/* =========================================================
   LINE 群組多語翻譯系統 — Landing (Light)
   Palette: soft paper background · deep-green primary · burnt-amber = 外語側
   Type: Space Grotesk (display/latin) · Noto Sans TC (漢字) · Space Mono (認領碼)
   ========================================================= */

:root{
  --ink:      #F6F8F5;   /* page background — pale mint-white */
  --ink-2:    #FFFFFF;   /* card / input surfaces */
  --ink-3:    #EEF3EF;   /* subtle section tint */
  --sunken:   rgba(16,35,26,.04); /* recessed fields inside glass cards */
  --glass:    rgba(255,255,255,.68);
  --glass-2:  rgba(255,255,255,.85);
  --hair:     rgba(16,35,26,.12);
  --hair-2:   rgba(16,35,26,.07);
  --lime:     #0A8145;   /* primary — large text, buttons, icons */
  --lime-hi:  #076B39;   /* darker green — small text needing contrast */
  --lime-dim: #CFEEDC;   /* light green tint */
  --amber:    #9C5B0C;   /* 外語（lang_b）側 — dark burnt amber for legibility */
  --amber-dim:#F3DDB3;   /* light amber tint */
  --line-green:#06C755;  /* LINE 品牌綠，只給「加入 LINE」用 */
  --text:     #10231A;
  --muted:    #4E6358;
  --muted-2:  #5C6E64;
  --font-disp:"Space Grotesk","Noto Sans TC",system-ui,sans-serif;
  --font-body:"Noto Sans TC","Space Grotesk",system-ui,sans-serif;
  --font-mono:"Space Mono","Noto Sans TC",monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* ambient light — a soft green bloom top-left + amber bottom-right,
   very subtle on a light page, grounding the two-language idea */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(680px 520px at 12% -6%, rgba(11,138,74,.09), transparent 60%),
    radial-gradient(560px 520px at 104% 108%, rgba(156,91,12,.07), transparent 60%);
}
main,header,footer{position:relative;z-index:1}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--lime);color:#fff}

/* focus visibility (quality floor) */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--lime);outline-offset:3px;border-radius:6px;
}

/* ---------- shared bits ---------- */
.wrap{width:min(1180px,92vw);margin-inline:auto}
.eyebrow{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--lime-hi);
  display:inline-flex;align-items:center;gap:.55rem;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--lime-hi);opacity:.7}
.glass{
  background:var(--glass);
  border:1px solid var(--hair);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border-radius:20px;
  box-shadow:0 18px 40px rgba(16,35,26,.06);
}
.mono{font-family:var(--font-mono)}
.lime{color:var(--lime-hi)}
.amber{color:var(--amber)}

/* buttons */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-disp);font-weight:600;font-size:.95rem;
  padding:.85rem 1.35rem;border-radius:12px;border:1px solid transparent;
  cursor:pointer;transition:transform .18s ease, box-shadow .25s ease, background .2s;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--lime);color:#fff;box-shadow:0 0 0 rgba(11,138,74,0);}
.btn-primary:hover{box-shadow:0 10px 28px rgba(11,138,74,.24);transform:translateY(-2px)}
.btn-line{background:var(--line-green);color:#fff}
.btn-line:hover{box-shadow:0 10px 28px rgba(6,199,85,.28);transform:translateY(-2px)}
.btn-ghost{background:transparent;border-color:var(--hair);color:var(--text)}
.btn-ghost:hover{border-color:var(--lime);color:var(--lime-hi)}
.btn-sm{padding:.55rem .9rem;font-size:.82rem}

/* section rhythm */
.section{padding:clamp(2.25rem,4.5vw,4rem) 0}
.sec-head{max-width:640px}
.sec-head h2{
  font-family:var(--font-disp);font-weight:700;
  font-size:clamp(1.9rem,4.4vw,3rem);line-height:1.3;margin:.7rem 0 0;
  letter-spacing:-.01em;
}
.sec-head p{color:var(--muted);margin:.9rem 0 0;font-size:1.02rem}

/* ---------- NAV ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(246,248,245,.78);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hair-2);
}
.nav-inner{display:flex;align-items:center;gap:1.5rem;height:66px}
.brand{display:flex;align-items:center;gap:.6rem;font-family:var(--font-disp);font-weight:700}
.brand .dot{width:11px;height:11px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px rgba(11,138,74,.55)}
.brand small{display:block;font-family:var(--font-body);font-weight:400;font-size:.68rem;color:var(--muted);letter-spacing:.02em}
.brand-logo{height:56px;width:auto;display:block}
.brand-logo-sm{height:76px}
@media(max-width:920px){.brand-logo{height:44px}}
.nav-menu{display:contents}
.nav-links{display:flex;gap:1.6rem;font-size:.9rem}
.nav-links a{color:var(--muted);transition:color .18s}
.nav-links a:hover{color:var(--lime-hi)}
/* nav-cta is a plain sibling, never a child of .nav-menu — it must never get
   reparented into the burger dropdown's flex layout */
.nav-cta{display:flex;gap:.6rem}
.lang-switch{display:flex;align-items:center;margin-left:auto}
.lang-select{
  font-family:var(--font-body);font-size:.82rem;color:var(--text);
  background:var(--ink-2);border:1px solid var(--hair);border-radius:999px;
  padding:.4rem 1.6rem .4rem .8rem;cursor:pointer;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234E6358' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right .55rem center;background-size:14px;
}
.lang-select:hover{border-color:var(--lime)}
.nav-burger{display:none;background:none;border:0;color:var(--text);cursor:pointer}
/* .nav-menu wraps only nav-links now (display:contents at rest, so desktop
   layout is unaffected); the open panel is padded so links don't sit flush
   against its edges, and is capped to match .wrap so it lines up with the
   rest of the page instead of running full-bleed. */
.nav-menu.open{
  display:flex;flex-direction:column;position:absolute;top:66px;left:0;right:0;
  width:min(1180px,92vw);margin:0 auto;
  background:var(--ink-2);padding:1.2rem 1.5rem 1.5rem;gap:1.1rem;border-bottom:1px solid var(--hair);
  border-radius:0 0 16px 16px;
}
.nav-menu.open .nav-links{flex-direction:column}
@media(max-width:920px){
  .nav-menu:not(.open){display:none}
  .nav-cta{display:none}
  .nav-burger{display:block}
}
/* translated nav labels run much longer than the terse zh originals and
   never fit the 1180px-capped nav row at any viewport width — always route
   nav-links through the burger for non-Chinese languages. nav-cta (two short
   buttons) fits fine, so it stays visible in the top bar right after the
   language switcher, same as zh. */
html:not([lang="zh-Hant-TW"]) .nav-menu:not(.open){display:none}
html:not([lang="zh-Hant-TW"]) .nav-burger{display:block}

/* zh: nav-links fit inline, so the desktop order is links first, then the
   language switcher, then the CTA buttons, at the far right of the bar
   (matching the original pre-i18n layout). Re-point the "push right" auto
   margin from .lang-switch onto .nav-links so the whole trio moves as one
   right-aligned group instead of splitting into two gaps. */
html[lang="zh-Hant-TW"] .nav-links{order:1;margin-left:auto}
html[lang="zh-Hant-TW"] .lang-switch{order:2;margin-left:0}
html[lang="zh-Hant-TW"] .nav-cta{order:3}
html[lang="zh-Hant-TW"] .nav-burger{order:4}

/* ---------- HERO (asymmetric 12-col) ---------- */
.hero{padding-top:clamp(3rem,7vw,5.5rem);padding-bottom:clamp(3.5rem,7vw,6rem)}
.hero-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:2rem;align-items:start}
.hero-copy{grid-column:1 / 8}
.hero-tag{margin-bottom:1.3rem}
.hero h1{
  font-family:var(--font-disp);font-weight:700;
  font-size:clamp(2.4rem,6.4vw,4.55rem);line-height:1.3;margin:0;
  letter-spacing:-.02em;
}
.hero h1 .flip{color:var(--lime-hi);position:relative;white-space:nowrap}
.hero h1 .thru{color:var(--muted-2);text-decoration:line-through;text-decoration-color:var(--amber);text-decoration-thickness:3px}
.hero-sub{color:var(--muted);font-size:1.12rem;margin:1.5rem 0 0;max-width:34rem}
.hero-sub b{color:var(--text);font-weight:600}
.hero-cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2.1rem}
.hero-meta{display:flex;gap:1.6rem;flex-wrap:wrap;margin-top:1.9rem;font-size:.82rem;color:var(--muted)}
.hero-meta span{display:inline-flex;align-items:center;gap:.4rem}
.hero-meta b{color:var(--lime-hi);font-family:var(--font-mono)}

.hero-card{grid-column:8 / 13;transform:rotate(1.4deg)}
@media(max-width:900px){
  .hero-copy{grid-column:1/13}
  .hero-card{grid-column:1/13;transform:none;margin-top:1rem}
}

/* language chips row */
.langbar{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-top:2.4rem;font-size:.8rem;color:var(--muted)}
.lang-chip{
  font-family:var(--font-mono);font-size:.78rem;padding:.34rem .7rem;border-radius:999px;
  border:1px solid var(--hair);background:var(--ink-2);color:var(--amber);
}

/* ---------- phone / chat card (signature base) ---------- */
.phone{padding:1rem 1rem 1.2rem}
.phone-top{display:flex;align-items:center;gap:.6rem;padding:.2rem .4rem .9rem;border-bottom:1px solid var(--hair-2)}
.phone-top .back{color:var(--muted)}
.phone-top .g{font-weight:600;font-size:.92rem}
.phone-top .g small{color:var(--muted);font-weight:400}
.stream{display:flex;flex-direction:column;gap:.7rem;padding:1rem .3rem .3rem;min-height:0}
.msg{max-width:82%;padding:.62rem .8rem;border-radius:14px;font-size:.9rem;line-height:1.5;position:relative}
.msg .who{font-size:.68rem;color:var(--muted);margin-bottom:.2rem}
.msg .tr{display:block;margin-top:.42rem;padding-top:.42rem;border-top:1px dashed rgba(16,35,26,.16);font-size:.82rem}
/* zh side (left) = green tint, translated line reads in amber */
.msg.zh{align-self:flex-start;background:rgba(11,138,74,.08);border:1px solid rgba(11,138,74,.25)}
.msg.zh .tr{color:var(--amber)}
/* lang_b side (right) = amber tint, translated line reads in green */
.msg.fb{align-self:flex-end;background:rgba(156,91,12,.08);border:1px solid rgba(156,91,12,.25)}
.msg.fb .tr{color:var(--lime-hi)}
.msg .tag{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.08em;opacity:.85}

/* ---------- PAIN → FIX (offset two blocks) ---------- */
.pain-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:1.6rem}
.pain{grid-column:1/7;padding:2rem}
.fix{grid-column:7/13;padding:2rem;margin-top:2.6rem}
.pain h3,.fix h3{font-family:var(--font-disp);font-size:1.35rem;margin:.2rem 0 .8rem}
.pain .label{color:var(--amber)}
.fix .label{color:var(--lime-hi)}
.pain p,.fix p{color:var(--muted);margin:.4rem 0}
.fix{border-color:rgba(11,138,74,.28)}
@media(max-width:820px){.pain,.fix{grid-column:1/13;margin-top:0}}

/* pain: messy manual copy-paste diagram */
.pain-visual{margin-top:1.5rem;padding:1.1rem;border-radius:14px;background:var(--sunken);border:1px dashed var(--amber-dim)}
.app-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.app-chip{display:inline-flex;align-items:center;gap:.4rem;background:var(--ink-2);border:1px solid var(--hair);border-radius:999px;padding:.4rem .8rem;font-size:.8rem;color:var(--text);white-space:nowrap}
.copy-arrow{font-family:var(--font-mono);font-size:.68rem;color:var(--muted-2);white-space:nowrap}
.pain-tags{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.9rem}
.tag-bad{font-size:.75rem;color:var(--amber);background:rgba(156,91,12,.1);border:1px solid rgba(156,91,12,.28);padding:.28rem .6rem;border-radius:999px;white-space:nowrap}

/* fix: bot translating inline, no copy-paste needed */
.fix-visual{margin-top:1.5rem;border-radius:14px;background:var(--ink-2);border:1px solid var(--hair);overflow:hidden}

/* ---------- HIGHLIGHT (photo + live chat + supported languages) ---------- */
.highlight-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:1.6rem}
.highlight-photo{min-height:320px}
.h-chat{padding:1rem 1rem 1.1rem;display:flex;flex-direction:column}
.h-chat .stream{flex:1}
.h-chat-icon{width:26px;height:26px;border-radius:50%;background:var(--sunken);display:inline-flex;align-items:center;justify-content:center;font-size:.85rem;flex-shrink:0}
.h-chat-expand{margin-left:auto;color:var(--muted-2);font-size:.85rem}
.h-chat-input{display:flex;gap:.5rem;margin-top:.8rem;padding-top:.8rem;border-top:1px solid var(--hair-2)}
.h-chat-input input{flex:1;background:var(--sunken);border:1px solid var(--hair);border-radius:10px;padding:.55rem .75rem;font-family:var(--font-body);font-size:.85rem;color:var(--text)}
.h-chat-input input::placeholder{color:var(--muted-2)}
.h-chat-input .btn{pointer-events:none}
.h-langs{padding:1.7rem}
.h-langs h4{font-family:var(--font-disp);font-size:1.1rem;margin:0 0 .5rem}
.h-langs-sub{font-family:var(--font-body);font-weight:700;font-size:.92rem;color:var(--lime-hi);margin:0 0 1.1rem}
.h-lang-list{margin-bottom:1.1rem;flex:none}
.h-langs-note{color:var(--muted-2);font-size:.82rem;margin:.3rem 0 0;font-style:italic}
@media(max-width:900px){
  .highlight-grid{grid-template-columns:1fr;gap:1.1rem}
  .highlight-photo{min-height:240px}
}

/* ---------- FEATURES (bento, asymmetric) ---------- */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:1.1rem;margin-top:2.6rem}
.card{padding:1.5rem;border-radius:18px;background:var(--glass);border:1px solid var(--hair);transition:transform .2s,border-color .2s,box-shadow .2s}
.card:hover{transform:translateY(-4px);border-color:rgba(11,138,74,.32);box-shadow:0 20px 44px rgba(16,35,26,.08)}
.card h4{font-family:var(--font-disp);font-size:1.12rem;margin:.9rem 0 .4rem}
.card p{color:var(--muted);font-size:.92rem;margin:0}
.card .ic{width:40px;height:40px;display:grid;place-items:center;border-radius:11px;background:rgba(11,138,74,.12);color:var(--lime-hi)}
.f-tall{grid-column:span 5;grid-row:span 2;display:flex;flex-direction:column;justify-content:space-between}
.f-a{grid-column:span 7}
.f-b{grid-column:span 4}
.f-c{grid-column:span 3}
.f-d{grid-column:span 12;display:flex;align-items:center;gap:1.3rem}
.f-d .ic{flex-shrink:0}
.f-d-text h4{margin:0 0 .3rem}
.f-d-text p{margin:0}
@media(max-width:600px){.f-d{flex-direction:column;align-items:flex-start;text-align:left}}
.big-num{font-family:var(--font-mono);font-size:3.2rem;color:var(--lime);line-height:1;margin-top:1.5rem}
.big-num small{display:block;font-size:.8rem;color:var(--muted);font-family:var(--font-body);margin-top:.5rem}
@media(max-width:820px){.f-tall,.f-a,.f-b,.f-c,.f-d{grid-column:1/13;grid-row:auto}}

/* ---------- STEPS (real sequence -> numbered) ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;margin-top:2.6rem;counter-reset:s}
.steps.steps-5{grid-template-columns:repeat(5,1fr)}
.step{padding:1.4rem;border-radius:16px;background:var(--glass);border:1px solid var(--hair);position:relative}
.step:nth-child(2){transform:translateY(1.4rem)}
.step:nth-child(3){transform:translateY(2.8rem)}
.step:nth-child(4){transform:translateY(4.2rem)}
.step:nth-child(5){transform:translateY(5.6rem)}
.step .n{counter-increment:s;font-family:var(--font-mono);font-size:.8rem;color:var(--lime-hi)}
.step .n::before{content:"0" counter(s)}
.step h4{font-family:var(--font-disp);font-size:1.05rem;margin:.7rem 0 .4rem}
.step p{color:var(--muted);font-size:.88rem;margin:0}
.step .cmd{margin-top:.7rem;font-family:var(--font-mono);font-size:.78rem;color:var(--amber);background:var(--sunken);border:1px dashed var(--amber-dim);border-radius:8px;padding:.4rem .55rem;display:inline-block}
/* the step people actually forget — flagged, not just numbered */
.step-warn{border-color:rgba(156,91,12,.4);background:rgba(156,91,12,.06);box-shadow:0 20px 40px rgba(156,91,12,.1)}
.step-warn .n{color:var(--amber)}
.step-flag{
  position:absolute;top:-.65rem;right:1.1rem;font-family:var(--font-mono);font-size:.64rem;
  letter-spacing:.04em;background:var(--amber);color:#fff;padding:.28rem .55rem;border-radius:999px;
}
@media(max-width:1100px){
  .steps.steps-5{grid-template-columns:repeat(3,1fr)}
  .steps.steps-5 .step:nth-child(n){transform:none}
}
@media(max-width:820px){
  .steps{grid-template-columns:1fr}
  .step:nth-child(n){transform:none}
}

/* ---------- ONBOARDING WALKTHROUGH DEMO ---------- */
.onboard-demo{margin-top:2.8rem}
.onboard-layout{display:grid;grid-template-columns:200px 1fr;gap:1.6rem;align-items:start;margin-top:1.4rem}
.onboard-tabs{margin-top:0;flex-direction:column;flex-wrap:nowrap;gap:.5rem}
.onboard-tabs button{width:100%;text-align:left}
.onboard-stage{margin-top:0;padding:2rem 1.5rem;display:flex;justify-content:center}
.onboard-panel{width:100%;max-width:420px}
.onboard-panel-row{max-width:900px}
.mock-phone{
  max-width:340px;margin:0 auto;
  background:var(--ink-2);
  border:10px solid var(--text);
  border-radius:38px;
  box-shadow:0 20px 44px rgba(16,35,26,.18);
  position:relative;
  overflow:hidden;
}
.mock-phone::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:84px;height:16px;background:var(--text);border-radius:0 0 12px 12px;z-index:2;
}
.mock-phone::after{
  content:"";position:absolute;bottom:7px;left:50%;transform:translateX(-50%);
  width:96px;height:4px;border-radius:999px;background:rgba(16,35,26,.22);z-index:2;
}
.mock-phone .phone-top{padding-top:.7rem}

/* 01 add-friend card */
.mock-friend{padding:2rem 1rem 1.6rem;text-align:center}
.mock-avatar{
  width:64px;height:64px;border-radius:50%;background:var(--lime);color:#fff;
  display:grid;place-items:center;margin:0 auto .9rem;font-family:var(--font-disp);font-weight:700;font-size:1.4rem;
}
.mock-friend-name{font-family:var(--font-disp);font-weight:700;color:var(--text)}
.mock-friend-desc{color:var(--muted);font-size:.82rem;margin:.35rem 0 1.3rem}

/* 02 system message */
.mock-sysmsg{background:var(--sunken);color:var(--muted);font-size:.76rem;padding:.4rem .9rem;border-radius:999px}
.mock-sysline{color:var(--text);font-size:.86rem;margin-top:.6rem;text-align:center}

/* 03 / 04 chained flow: chat <-> browser, side by side */
.onboard-flow{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:wrap;gap:1.4rem}
.onboard-flow .mock-phone{flex:0 0 auto}
.onboard-flow .mock-browser{width:auto;flex:1 1 300px}
.onboard-down{color:var(--muted-2);font-family:var(--font-mono);font-size:.76rem;flex:0 0 auto}
.mock-link{margin-top:.55rem;font-family:var(--font-mono);font-size:.84rem;color:var(--lime-hi);text-decoration:underline;text-underline-offset:2px}
@media(max-width:640px){
  .onboard-flow{flex-direction:column}
  .onboard-panel-row{max-width:420px}
}

/* browser chrome, reused for any "web/admin" mockup */
.browser{border-radius:14px;overflow:hidden;border:1px solid var(--hair);background:var(--ink-2)}
.mock-browser{max-width:380px;width:100%}
.mock-browser-wide{max-width:440px;margin:0 auto}
.browser-bar{display:flex;align-items:center;gap:.45rem;padding:.6rem .8rem;background:var(--sunken);border-bottom:1px solid var(--hair-2)}
.browser-dot{width:8px;height:8px;border-radius:50%;background:var(--amber)}
.browser-dot:nth-child(2){background:var(--lime)}
.browser-dot:nth-child(3){background:var(--muted-2)}
.browser-url{flex:1;background:var(--ink);border:1px solid var(--hair);border-radius:8px;padding:.3rem .6rem;font-family:var(--font-mono);font-size:.68rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.browser-body{padding:1.5rem 1.2rem}
.mock-title{font-family:var(--font-disp);font-weight:700;margin-bottom:.9rem;color:var(--text)}
.mock-sub{color:var(--muted);font-size:.8rem;margin-bottom:.7rem}

/* 04 claim code */
.claim-code{
  font-family:var(--font-mono);font-weight:700;font-size:1.7rem;letter-spacing:.05em;color:var(--lime-hi);
  background:rgba(11,138,74,.08);border:1px dashed rgba(11,138,74,.35);border-radius:10px;
  padding:.55rem 1rem;display:inline-block;
}

/* 05 group-management admin panel */
.mock-group-name{font-family:var(--font-disp);font-weight:600;margin-bottom:1.1rem;color:var(--text)}
.mock-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.mock-row-label{color:var(--muted);font-size:.85rem}
.lang-pill{display:inline-flex;gap:.4rem;align-items:center;font-family:var(--font-mono);font-size:.82rem;background:var(--sunken);border:1px solid var(--hair);border-radius:999px;padding:.35rem .75rem;color:var(--text)}
.mock-toggle-row{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1rem;border-radius:10px;
  border:1px dashed rgba(156,91,12,.4);background:rgba(156,91,12,.06);
}
.mock-toggle-title{font-weight:600;color:var(--text);font-size:.9rem}
.mock-toggle-warn{color:var(--amber);font-size:.74rem;margin-top:.2rem}
.toggle{width:42px;height:23px;border-radius:999px;background:var(--hair);position:relative;flex-shrink:0}
.toggle .knob{position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(16,35,26,.25);transition:left .2s}
.toggle.on{background:var(--lime)}
.toggle.on .knob{left:21px}

@media(max-width:820px){
  .onboard-layout{grid-template-columns:1fr}
  .onboard-tabs{flex-direction:row;flex-wrap:wrap}
  .onboard-tabs button{width:auto;text-align:center}
}
@media(max-width:480px){
  .onboard-stage{padding:1.4rem .9rem}
}

/* ---------- DEMO (signature interactive) ---------- */
.demo-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:1.6rem;margin-top:2.6rem;align-items:stretch}
.demo-ctl{grid-column:1/6;padding:1.7rem;display:flex;flex-direction:column}
.demo-view{grid-column:6/13;padding:0;overflow:hidden;display:flex;flex-direction:column}
@media(max-width:900px){.demo-ctl,.demo-view{grid-column:1/13}}
.ctl-label{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:1.2rem 0 .5rem}
.ctl-label:first-child{margin-top:0}
.seg{display:flex;gap:.4rem;flex-wrap:wrap}
.seg button{
  font-family:var(--font-body);font-size:.84rem;padding:.5rem .75rem;border-radius:10px;
  background:var(--sunken);border:1px solid var(--hair);color:var(--muted);cursor:pointer;transition:.15s
}
.seg button[aria-pressed="true"]{background:rgba(11,138,74,.12);border-color:var(--lime);color:var(--lime-hi)}
.dir-toggle{display:flex;align-items:center;gap:.6rem;font-family:var(--font-mono);font-size:.9rem}
.dir-toggle button{flex:1;padding:.55rem;border-radius:10px;background:var(--sunken);border:1px solid var(--hair);color:var(--text);cursor:pointer}
.dir-toggle button[aria-pressed="true"]{border-color:var(--lime);color:var(--lime-hi);background:rgba(11,138,74,.1)}
.dir-arrow{color:var(--muted)}
.chips{display:flex;flex-direction:column;gap:.5rem;margin-top:.4rem}
.chip{
  text-align:left;font-size:.86rem;padding:.62rem .8rem;border-radius:11px;
  background:var(--sunken);border:1px solid var(--hair);color:var(--text);cursor:pointer;transition:.15s;line-height:1.4
}
.chip:hover{border-color:var(--lime);background:rgba(11,138,74,.08)}
.demo-form{display:flex;gap:.5rem;margin-top:1rem}
.demo-form input{
  flex:1;background:var(--sunken);border:1px solid var(--hair);border-radius:11px;
  color:var(--text);padding:.7rem .85rem;font-family:var(--font-body);font-size:.9rem
}
.demo-form input::placeholder{color:var(--muted-2)}
.demo-note{font-size:.76rem;color:var(--muted-2);margin-top:.8rem;line-height:1.5}
.demo-note a{color:var(--lime-hi);text-decoration:underline;text-underline-offset:2px}

.demo-view{background:var(--glass)}
.demo-view .phone-top{padding:1rem 1.2rem;border-bottom:1px solid var(--hair-2);margin:0}
.demo-stream{flex:1;padding:1.2rem;display:flex;flex-direction:column;gap:.7rem;overflow-y:auto;max-height:440px}
.typing{display:inline-flex;gap:3px;align-items:center}
.typing i{width:5px;height:5px;border-radius:50%;background:var(--muted);animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}
.demo-empty{color:var(--muted-2);text-align:center;margin:auto;font-size:.9rem;padding:2rem}

/* ---------- SCENARIOS (asymmetric photo cards) ---------- */
.scenes{display:grid;grid-template-columns:repeat(12,1fr);gap:1.1rem;margin-top:2.6rem}
.scene{border-radius:18px;overflow:hidden;border:1px solid var(--hair);background:var(--glass);position:relative}
.scene img{width:100%;height:100%;object-fit:cover;filter:saturate(.96) contrast(1.02)}
.scene .cap{position:absolute;inset:auto 0 0 0;padding:1.1rem;background:linear-gradient(to top,rgba(5,9,8,.94),rgba(5,9,8,.2) 70%,transparent)}
.scene .cap h4{font-family:var(--font-disp);font-size:1.1rem;margin:0 0 .25rem;color:#fff}
.scene .cap p{margin:0;color:rgba(255,255,255,.82);font-size:.82rem}
.scene .cap .q{color:var(--amber-dim);font-size:.8rem;margin-top:.5rem;font-style:italic}
.sc-1{grid-column:1/7;grid-row:span 2;min-height:340px}
.sc-2{grid-column:7/13;min-height:165px}
.sc-3{grid-column:7/10;min-height:200px}
.sc-4{grid-column:10/13;min-height:200px}
@media(max-width:820px){
  .sc-1,.sc-2,.sc-3,.sc-4{grid-column:1/13;grid-row:auto;min-height:190px}
}

/* ---------- PRICING ---------- */
.price-toggle{
  display:inline-flex;gap:.3rem;padding:.3rem;margin-top:1.8rem;
  background:var(--sunken);border:1px solid var(--hair);border-radius:14px;
}
.price-toggle button{
  font-family:var(--font-body);font-size:.86rem;padding:.5rem 1rem;border-radius:10px;
  background:transparent;border:0;color:var(--muted);cursor:pointer;display:flex;align-items:center;gap:.4rem;transition:.15s;
}
.price-toggle button[aria-pressed="true"]{background:var(--ink-2);color:var(--lime-hi);box-shadow:0 4px 14px rgba(16,35,26,.08)}
.save-tag{font-family:var(--font-mono);font-size:.68rem;color:var(--lime-hi);background:rgba(11,138,74,.12);padding:.12rem .4rem;border-radius:999px}

.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;margin-top:2.4rem;align-items:stretch}
.price-card{
  position:relative;padding:2rem 1.7rem;display:flex;flex-direction:column;
  transition:transform .2s, box-shadow .2s;
}
.price-card h3{font-family:var(--font-disp);font-size:1.2rem;margin:0}
.tier-desc{color:var(--muted);font-size:.86rem;margin:.5rem 0 1.4rem;min-height:2.6em}
.price{display:flex;align-items:baseline;gap:.35rem;margin-bottom:1.5rem}
.price .amt{font-family:var(--font-mono);font-weight:700;font-size:2.3rem;color:var(--text)}
.price .per{color:var(--muted);font-size:.86rem}
.price-features{list-style:none;margin:0 0 1.8rem;padding:0;display:flex;flex-direction:column;gap:.6rem;flex:1}
.price-features li{position:relative;padding-left:1.35rem;color:var(--muted);font-size:.9rem;line-height:1.4}
.price-features li::before{content:"✓";position:absolute;left:0;top:0;color:var(--lime-hi);font-weight:700}
.price-features li b{color:var(--text);font-family:var(--font-mono);font-weight:700}
.price-cta{width:100%;justify-content:center;text-align:center}
.price-cta-dark{background:var(--text);color:#fff}
.price-cta-dark:hover{box-shadow:0 10px 28px rgba(16,35,26,.22);transform:translateY(-2px)}

/* popular tier — staggered lift, echoes the step offsets elsewhere on the page */
.price-popular{
  transform:translateY(-1.1rem);
  border-color:rgba(10,129,69,.4);
  box-shadow:0 26px 54px rgba(10,129,69,.14);
}
.price-popular:hover{transform:translateY(-1.5rem)}
.badge{
  position:absolute;top:-.7rem;right:1.6rem;font-family:var(--font-mono);font-size:.66rem;
  letter-spacing:.06em;background:var(--lime);color:#fff;padding:.32rem .65rem;border-radius:999px;
}
.badge-dark{background:var(--text)}
.price-note{color:var(--muted-2);font-size:.82rem;margin-top:1.8rem}
@media(max-width:900px){
  .pricing-grid{grid-template-columns:1fr}
  .price-popular{transform:none}
  .price-popular:hover{transform:translateY(-4px)}
}

/* ---------- TRUST strip ---------- */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:16px;overflow:hidden;margin-top:2.4rem}
.trust div{background:var(--ink-2);padding:1.4rem}
.trust h5{font-family:var(--font-disp);margin:.2rem 0 .3rem;font-size:1rem;color:var(--lime-hi)}
.trust p{margin:0;color:var(--muted);font-size:.83rem}
@media(max-width:820px){.trust{grid-template-columns:1fr 1fr}}

/* ---------- CTA band ---------- */
.cta-band{padding:2.6rem;display:grid;grid-template-columns:1.4fr .9fr;gap:2rem;align-items:stretch;border-color:rgba(11,138,74,.25)}
.cta-band h2{font-family:var(--font-disp);font-size:clamp(1.6rem,3.6vw,2.4rem);margin:.4rem 0 1rem;line-height:1.3}
.cta-band p{color:var(--muted);margin:0 0 1.4rem}
.cta-actions{display:flex;gap:.7rem;flex-wrap:wrap}
.qr-box{display:flex;align-items:center;gap:1rem;justify-content:flex-end;height:100%}
.qr-box img{width:118px;border-radius:12px;background:#fff;padding:8px;border:1px solid var(--hair)}
.qr-box .qt{font-size:.82rem;color:var(--muted);max-width:150px}
.qr-box .qt b{color:var(--text);display:block;font-family:var(--font-disp)}
@media(max-width:760px){.cta-band{grid-template-columns:1fr}.qr-box{justify-content:flex-start;height:auto}}

/* ---------- FAQ ---------- */
.faq{margin-top:2.4rem;display:grid;gap:.8rem}
.faq details{background:var(--glass);border:1px solid var(--hair);border-radius:14px;padding:0 1.2rem}
.faq summary{cursor:pointer;padding:1.1rem 0;font-family:var(--font-disp);font-weight:500;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--lime-hi);font-size:1.3rem;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{color:var(--muted);margin:0 0 1.1rem;font-size:.92rem}

/* ---------- FOOTER ---------- */
.foot{border-top:1px solid var(--hair-2);padding:3rem 0 2rem;margin-top:2rem}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem}
.foot-brand{display:flex;align-items:center;gap:1.1rem}
.foot-brand .brand{flex:0 0 30%;max-width:30%}
.foot-brand .brand-logo-sm{width:100%;height:auto}
.foot-brand p{color:var(--muted);font-size:.86rem;max-width:16rem;margin:0;flex:1}
.foot h6{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin:0 0 1rem}
.foot a{display:block;color:var(--muted);font-size:.88rem;padding:.28rem 0;transition:color .15s}
.foot a:hover{color:var(--lime-hi)}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid var(--hair-2);color:var(--muted-2);font-size:.8rem}
.foot-bottom span{white-space:nowrap}
.foot-bottom a{display:inline;padding:0}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{flex-direction:column}}

/* ---------- reveal animation ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* legal pages */
.legal{padding:clamp(3rem,7vw,6rem) 0;max-width:760px}
.legal h1{font-family:var(--font-disp);font-size:clamp(1.8rem,4vw,2.6rem);margin:0 0 .4rem}
.legal .updated{color:var(--muted-2);font-family:var(--font-mono);font-size:.8rem;margin-bottom:2.5rem}
.legal h2{font-family:var(--font-disp);font-size:1.25rem;margin:2.4rem 0 .6rem;color:var(--lime-hi)}
.legal p,.legal li{color:var(--muted);font-size:.95rem}
.legal ul{padding-left:1.2rem}
.legal a{color:var(--lime-hi);text-decoration:underline;text-underline-offset:2px}
.legal .back{font-family:var(--font-mono);font-size:.82rem;color:var(--muted);display:inline-block;margin-bottom:2rem}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .step:nth-child(n){transform:none}
  .hero-card{transform:none}
}

/* ---------- non-Chinese language typography ----------
   headings, nav labels etc. are sized/wrapped for short zh phrases;
   en/vi/th/fil translations run 2-4x longer, so scale display type down */
html:not([lang="zh-Hant-TW"]) .hero h1{font-size:clamp(1.8rem,4.6vw,3.1rem)}
html:not([lang="zh-Hant-TW"]) .sec-head h2{font-size:clamp(1.5rem,3.6vw,2.25rem)}
html:not([lang="zh-Hant-TW"]) .cta-band h2{font-size:clamp(1.35rem,3vw,1.9rem)}
html:not([lang="zh-Hant-TW"]) .card h4{font-size:1rem}
html:not([lang="zh-Hant-TW"]) .step h4{font-size:.96rem}