:root {
    --font-body: "Asap", "LINE_Seed_TW", sans-serif;
    --green-dark: #025129;
    --green-mint: #2de897;
    --green-teal: #129e7d;
    --bg: #f7f7f7;
    --text: #0c1a14;
    --text-muted: #4a5a52;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}

#dotCanvas {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

a {
    color: inherit;
    text-decoration: none;
}

.nav-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px clamp(16px, 4vw, 32px) 0;
}

.js-horizontal .nav-wrap {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 100;
}

.nav {
    display: flex;
    align-items: center;
    gap: 40px;
    width: fit-content;
    padding: 8px 30px 8px 30px;
    border: 1px solid var(--green-dark);
    border-radius: 999px;
    background: #fff;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 700;
}

.brand-mark {
    width: 28px;
    height: 28px;
}

.nav-links {
    display: flex;
    gap: 28px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
}

.nav-links a:hover {
    color: var(--text);
}

.lang-link {
    padding-left: 16px;
    border-left: 1px solid #e0e0e0;
    font-weight: 600;
    color: var(--green-dark);
}

/* Hidden here unconditionally; the ≤880px media query below is the only
   place that turns it on. Desktop never sees it, JS or no JS. */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
}

.nav-toggle-bar {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 1px;
    background: var(--text);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
    opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.hero {
    max-width: 1160px;
    margin: 0 auto;
    padding: clamp(24px, 4vw, 48px) clamp(16px, 4vw, 32px);
    display: grid;
    /* Text : image = 1 : 1.2. .hero-sub keeps its own max-width for a
       readable line length, so a wider text column here just adds air
       rather than stretching the paragraph. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    align-items: center;
    gap: clamp(20px, 3vw, 32px);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(2, 81, 41, 0.08);
    color: var(--green-dark);
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 20px;
}

.hero h1 {
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.25;
    margin: 0 0 18px;
    font-weight: 800;
    color: var(--green-dark);
}

.hero-sub {
    max-width: 460px;
    margin: 0 0 32px;
    font-size: clamp(15px, 2vw, 17px);
    line-height: 1.8;
    color: var(--text-muted);
      text-align: justify;

}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 14px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 28px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    transition: transform 0.15s ease, opacity 0.15s ease, background 0.15s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-primary {
    background: #fff;
    color: var(--green-dark);
    border: 1.5px solid var(--green-dark);
}

.btn-primary:hover {
    background: rgba(2, 81, 41, 0.06);
}

.btn-secondary {
    background: #fff;
    color: var(--text);
    border: 1px solid #dcdedc;
}

.btn-secondary:hover {
    border-color: var(--green-dark);
}

/* OS-aware download buttons.
   Both ship as .btn-secondary; the one matching [data-os] on <html> is
   promoted to the primary look. The two selectors are mutually exclusive, so
   exactly one button is ever highlighted, and the attribute defaults to
   "windows" in the markup — a crawler and a no-JS visitor see what the site
   has always rendered. */
:root[data-os="windows"] .dl-win,
:root[data-os="mac"] .dl-mac {
    color: var(--green-dark);
    border: 1.5px solid var(--green-dark);
}

:root[data-os="windows"] .dl-win:hover,
:root[data-os="mac"] .dl-mac:hover {
    background: rgba(2, 81, 41, 0.06);
}

/* Justify reads well in Chinese, which has no natural word spacing to
   stretch, but it opens ugly rivers of space between English words at these
   line lengths. Overridden here rather than made the default because the
   base rules exist for the Chinese copy they were tuned against. */
:root[lang="en"] .hero-sub,
:root[lang="en"] .faq-a p {
    text-align: left;
}

.hero-note {
    margin: 22px 0 0;
    font-size: 13px;
    color: var(--text-muted);
}

.hero-visual {
    display: flex;
    justify-content: center;
    min-width: 0;
}

.hero-shot {
    position: relative;
    width: 100%;
    /* border-radius: 18px; */
    overflow: hidden;
    /* background: #fff;
  border: 1px solid #e7e9e7; */
    /* box-shadow: 0 30px 60px -24px rgba(2, 81, 41, 0.3), 0 10px 24px rgba(12, 26, 20, 0.06); */
    /* Lifted rather than margined: a transform moves the shot without pulling
     the section's height or anything below it along with it. */
    transform: rotate(1deg) translateY(-40px);
}

.hero-shot::before {
    content: "";
    position: absolute;
    inset: -20% -20% auto auto;
    width: 60%;
    height: 60%;
    background: var(--green-mint);
    filter: blur(80px);
    opacity: 0.35;
    z-index: -1;
}

.hero-shot img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 880px) {
    .hero {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-content {
        text-align: center;
    }

    .eyebrow {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-sub {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-actions {
        justify-content: center;
    }

    .hero-shot {
        transform: translateY(-40px);
        max-width: 480px;
        margin: 0 auto;
    }

    /* Room for the dropdown menu to anchor against; the pill itself only
       ever holds the brand and the toggle at this width. */
    .nav-wrap {
        position: relative;
    }

    .nav {
        width: fit-content;
        gap: 16px;
        padding: 8px 18px 8px 22px;
    }

    .nav-toggle {
        display: flex;
    }

    .nav-links {
        position: absolute;
        top: calc(100% + 10px);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        background: #fff;
        border: 1px solid var(--green-dark);
        border-radius: 16px;
        padding: 8px;
        box-shadow: 0 16px 32px -12px rgba(2, 81, 41, 0.25);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
        z-index: 90;
    }

    .nav-links.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .nav-links a {
        padding: 11px 14px;
        border-radius: 10px;
    }

    .nav-links a:hover,
    .nav-links a:focus-visible {
        background: rgba(2, 81, 41, 0.06);
    }

    .lang-link {
        border-left: 0;
        border-top: 1px solid #e0e0e0;
        padding-left: 14px;
        padding-top: 13px;
        margin-top: 2px;
    }

    /* One visible gap between every stacked section, plus more headroom
       inside each one — the vertical (no-JS / touch) layout otherwise
       leaves sections touching directly with no break between them. */
    .hz-slide + .hz-slide {
        margin-top: 56px;
    }

    .features,
    .closing,
    .faq {
        padding-top: clamp(36px, 8vw, 56px);
    }

    .hero h1 {
        font-size: 26px;
    }

    .hero-sub {
        font-size: 14px;
    }

    .features h2 {
        font-size: 21px;
    }

    .closing h2 {
        font-size: 22px;
    }
}

.features {
    position: relative;
    z-index: 1;
    max-width: 1600px;
    margin: 0 auto;
    padding: clamp(24px, 4vw, 48px) clamp(16px, 4vw, 32px);
}

.features h2 {
    text-align: center;
    font-size: clamp(24px, 3vw, 32px);
    margin: 0 0 28px;
    color: var(--green-dark);
}

.feature-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}


}

.feature-card {
    background: #fff;
    border: 1px solid #e7e9e7;
    border-radius: 16px;
    padding: 26px 28px;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.feature-card:hover {
    border-color: var(--green-mint);
    transform: translateY(-2px);
}

.feature-icon {
    display: inline-flex;
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
    opacity: 0;
    transform: scale(0.82);
    transition: opacity 0.9s ease, transform 0.9s ease;
}

.feature-card.is-visible .feature-icon {
    opacity: 1;
    transform: scale(1);
}

.feature-card:hover .feature-icon {
    transform: scale(1.08) rotate(-3deg);
}

.feature-icon svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* The card shows an icon and a title; the detail is what the modal opens to
   show. It lives in the markup as real text all the same, because attributes
   are not indexed and this is the most descriptive copy on the page. Clipped
   the same way .sr-only is, so a screen reader reads it in place too and the
   modal has a single source to copy from. */
.feature-detail {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.feature-icon svg path,
.feature-icon svg circle,
.feature-icon svg line,
.feature-icon svg rect {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 1.8s ease;
}

.feature-card.is-visible .feature-icon svg path,
.feature-card.is-visible .feature-icon svg circle,
.feature-card.is-visible .feature-icon svg line,
.feature-card.is-visible .feature-icon svg rect {
    stroke-dashoffset: 0;
}

.feature-grid .feature-card:nth-child(1) .feature-icon,
.feature-grid .feature-card:nth-child(1) .feature-icon svg * {
    transition-delay: 0ms;
}

.feature-grid .feature-card:nth-child(2) .feature-icon,
.feature-grid .feature-card:nth-child(2) .feature-icon svg * {
    transition-delay: 130ms;
}

.feature-grid .feature-card:nth-child(3) .feature-icon,
.feature-grid .feature-card:nth-child(3) .feature-icon svg * {
    transition-delay: 260ms;
}

.feature-grid .feature-card:nth-child(4) .feature-icon,
.feature-grid .feature-card:nth-child(4) .feature-icon svg * {
    transition-delay: 390ms;
}

.feature-grid .feature-card:nth-child(5) .feature-icon,
.feature-grid .feature-card:nth-child(5) .feature-icon svg * {
    transition-delay: 520ms;
}

.feature-grid .feature-card:nth-child(6) .feature-icon,
.feature-grid .feature-card:nth-child(6) .feature-icon svg * {
    transition-delay: 650ms;
}

.feature-card h3 {
    margin: 0;
    font-size: 16px;
    color: var(--green-dark);
}

.feature-card:focus-visible {
    outline: 2px solid var(--green-dark);
    outline-offset: 2px;
}

.feature-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.feature-modal[hidden] {
    display: none;
}

.feature-modal.is-open {
    opacity: 1;
}

.feature-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(12, 26, 20, 0.35);
}

.feature-modal-card {
    position: relative;
    background: #fff;
    border-radius: 20px;
    border: 1.5px solid var(--green-dark);
    padding: 36px;
    max-width: 420px;
    width: calc(100% - 48px);
    transform: scale(0.94) translateY(8px);
    transition: transform 0.2s ease;
}

.feature-modal.is-open .feature-modal-card {
    transform: scale(1) translateY(0);
}

.feature-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 999px;
    cursor: pointer;
}

.feature-modal-close:hover {
    background: #f2f2f2;
    color: var(--text);
}

.feature-modal-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
    opacity: 1;
    transform: none;
}

.feature-modal-icon svg path,
.feature-modal-icon svg circle,
.feature-modal-icon svg line,
.feature-modal-icon svg rect {
    stroke-dashoffset: 0;
}

#featureModalTitle {
    margin: 0 0 12px;
    font-size: 20px;
    color: var(--green-dark);
}

#featureModalBody {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-muted);
}

.footer {
    text-align: center;
    padding: 32px 16px 48px;
    font-size: 13px;
    color: var(--text-muted);
}

.footer p {
    margin: 4px 0;
}

.footer a {
    color: var(--green-teal);
    font-weight: 600;
}

.footer a:hover {
    text-decoration: underline;
}

.closing {
    max-width: 720px;
    margin: 0 auto;
    padding: clamp(24px, 5vw, 48px) clamp(16px, 4vw, 32px);
    text-align: center;
}

.closing h2 {
    font-size: clamp(26px, 3.4vw, 38px);
    margin: 0 0 28px;
    color: var(--green-dark);
}

.closing .hero-actions {
    justify-content: center;
}

.closing .hero-note {
    text-align: center;
}

.closing .footer {
    margin-top: 48px;
    padding: 24px 16px 0;
    border-top: 1px solid #e7e9e7;
}

/* -------------------------------------------------------------------- */
/* Q&A                                                                   */
/* -------------------------------------------------------------------- */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.faq {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: clamp(20px, 3vw, 36px) clamp(16px, 4vw, 32px);
}

.faq-card {
    background: #fff;
    border: 1px solid var(--green-dark);
    border-radius: clamp(16px, 2vw, 24px);
    padding: clamp(18px, 2.4vw, 30px) clamp(16px, 2.2vw, 28px);
}

.faq-mark {
    display: block;
    width: clamp(34px, 3.4vw, 46px);
    margin: 0 0 clamp(14px, 2vw, 24px);
}

.faq-mark svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.faq-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.faq-item {
    border-bottom: 1px solid var(--text);
}

.faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: clamp(11px, 1.3vw, 15px) clamp(2px, 0.9vw, 10px);
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: clamp(14px, 1.25vw, 16px);
    font-weight: 600;
    line-height: 1.5;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: color 0.15s ease;
}

.faq-q:hover {
    color: var(--green-teal);
}

.faq-q:focus-visible {
    outline: 2px solid var(--green-dark);
    outline-offset: 2px;
    border-radius: 6px;
}

.faq-chev {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    transition: transform 0.25s ease;
}

.faq-item.is-open .faq-chev {
    transform: rotate(180deg);
}

.faq-a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
}

.faq-item.is-open .faq-a {
    grid-template-rows: 1fr;
}

.faq-a > div {
    overflow: hidden;
}

.faq-a p {
    margin: 0;
    padding: 0 clamp(2px, 0.9vw, 10px) clamp(14px, 1.6vw, 18px);
    max-width: 66ch;
    font-size: clamp(13px, 1.1vw, 14px);
    line-height: 1.75;
    color: var(--text-muted);
    text-align: justify;
}

.faq .footer {
    margin-top: clamp(20px, 3vw, 36px);
    padding: 0 16px;
}

/* The same condition script.js reads as inlineCardsMQ. Past this point a card
   prints its detail instead of opening it, so the two have to agree: a card
   showing its text while the script still treats it as a button is the one
   combination that reads as broken. Three columns of body text is too narrow
   here, so the grid drops to two at the same moment. */
@media (max-width: 880px), (pointer: coarse) {
    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Out of the .sr-only clip and into the card as ordinary text. */
    .feature-detail {
        position: static;
        width: auto;
        height: auto;
        margin: 10px 0 0;
        padding: 0;
        clip: auto;
        overflow: visible;
        font-size: 14px;
        line-height: 1.7;
        color: var(--text-muted);
    }

    /* Nothing opens on a tap any more, so nothing should invite one. */
    .feature-card {
        cursor: default;
        text-align: left;
        padding: 22px 20px;
    }

    .feature-card:hover {
        border-color: #e7e9e7;
        transform: none;
    }

    .feature-card:hover .feature-icon {
        transform: scale(1);
    }

    .feature-icon {
        width: 44px;
        height: 44px;
        margin-bottom: 12px;
    }
}

@media (max-width: 520px) {
    .feature-grid {
        grid-template-columns: 1fr;
    }

@media (prefers-reduced-motion: reduce) {

    .faq-a,
    .faq-chev {
        transition: none;
    }
}

/* -------------------------------------------------------------------- */
/* Horizontal scroll mode (desktop, pointer:fine, no reduced-motion)     */
/* Base state below is the vertical/fallback layout: plain block flow.  */
/* -------------------------------------------------------------------- */

.hz-progress-track {
    display: none;
}

.hz-hint {
    display: none;
}

.js-horizontal {
    overflow: hidden;
}

.js-horizontal body {
    overflow: hidden;
}

.js-horizontal .hz-viewport {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    position: relative;
}

.js-horizontal .hz-track {
    display: flex;
    height: 100%;
    will-change: transform;
}

.js-horizontal .hz-slide {
    flex: 0 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    padding-top: 88px;
    box-sizing: border-box;
}

.js-horizontal #hero {
    width: min(1160px, 94vw);
}

.js-horizontal #features {
    width: min(1000px, 80vw) ;
    padding-left: 300px;
}

.js-horizontal #faq {
    width: min(740px, 70vw);
}

.js-horizontal #download {
    width: 100vw;
}

.js-horizontal .hz-progress-track {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: rgba(2, 81, 41, 0.08);
    z-index: 100;
}

.hz-progress {
    height: 100%;
    width: 0%;
    background: var(--green-dark);
}

.js-horizontal .hz-hint {
    display: block;
    position: fixed;
    left: clamp(16px, 3vw, 32px);
    bottom: 14px;
    margin: 0;
    font-size: 12px;
    color: var(--text-muted);
    z-index: 100;
    opacity: 1;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.js-horizontal .hz-hint.is-hidden {
    opacity: 0;
}