:root{
  --ink:#151513;
  --ink-2:#000000;
  --muted:#6b7280;
  --ground:#ffffff;
  --band:#f9fafb;
  --band-2:#f3f4f6;
  --line:#e5e7eb;
  --line-2:#d1d5db;

  --g-50:#eef5f1;
  --g-100:#d7e9df;
  --g-200:#aed2be;
  --g-300:#7fb99b;
  --g-400:#4f9b76;
  --g-500:#3a8460;
  --g-600:#307050;
  --g-700:#275b41;
  --g-800:#1d4531;
  --g-900:#12291f;
  --mint:#8fd9b0;

  --deep-bg:#12291f;
  --deep-fg:#ffffff;
  --deep-fg-2:rgba(255,255,255,.78);
  --deep-fg-3:rgba(255,255,255,.55);
  --deep-rule:rgba(255,255,255,.22);
  --deep-accent:#8fd9b0;
  --deep-accent-ink:#12291f;
  --deep-shot-bg:rgba(255,255,255,.06);
  --deep-shot-line:rgba(255,255,255,.24);
  --deep-shot-fg:rgba(255,255,255,.6);
  --deep-store-border:#ffffff;

  --gold-50:#fdf6e7;
  --gold-100:#f7e6be;
  --gold-300:#ffdc85;
  --gold-500:#e8a317;
  --gold-700:#a86f06;
  --gold-800:#7d5205;


  --cjk:"PingFang SC","Hiragino Sans","Noto Sans CJK SC","Noto Sans CJK JP","Microsoft YaHei","Yu Gothic UI","Meiryo";
  --font-h:"Montserrat",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,var(--cjk),"Helvetica Neue",Arial,sans-serif;
  --font-b:"Open Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,var(--cjk),"Helvetica Neue",Arial,sans-serif;

  --r-sm:.25rem;
  --r-md:.375rem;
  --r-lg:.5rem;
  --r-xl:.75rem;
  --r-2xl:1rem;

  --menu-h:64px;
  --wrap:1280px;
}

html:lang(ja){--cjk:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic","Meiryo","Noto Sans CJK JP","Noto Sans JP","PingFang SC","Noto Sans CJK SC"}
html:lang(zh){--cjk:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC","Noto Sans SC","Hiragino Sans"}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--menu-h) + 16px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font-b);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd{margin:0}
ul{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
a{color:var(--g-700)}
a:hover{color:var(--g-800)}
.lede a,.ct-item a,.legal a,.sr-consent a,.legal-foot p a{color:var(--g-700);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.24em;text-decoration-color:var(--ink);overflow-wrap:anywhere;transition:color .16s ease,text-decoration-color .16s ease}
.lede a:hover,.ct-item a:hover,.legal a:hover,.sr-consent a:hover,.legal-foot p a:hover{color:var(--g-800);text-decoration-color:var(--ink)}
::selection{background:var(--g-200);color:var(--g-900)}
:focus-visible{outline:2px solid var(--g-600);outline-offset:2px;border-radius:2px}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:#fff;padding:12px 18px;border-radius:0 0 var(--r-lg) 0;font-family:var(--font-h);font-weight:600;font-size:14px;text-decoration:none}
.skip:focus{left:0;color:#fff}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:24px}
.sec{padding-block:32px}
.sec-in{padding-block:0}
#download .sec-in{padding-block:32px}
@media(min-width:1024px){.sec{padding-block:40px}}
@media(min-width:1280px){.sec{padding-block:48px}}

.band{background:var(--band)}
.band-white{background:var(--ground)}
.band-deep{background:var(--deep-bg);color:var(--deep-fg)}
.band-deep h1,.band-deep h2,.band-deep h3{color:var(--deep-fg)}
.band-deep a:not(.btn):not(.store):not(.brand){color:var(--deep-fg)}
.band-deep .lede,.band-deep .body{color:var(--deep-fg-2)}
.band-deep .kicker{color:var(--deep-accent)}
.rule-top{border-top:1px solid var(--line)}

.kicker{font-family:var(--font-h);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--g-700);margin-bottom:12px}
h1,h2,h3,.h{font-family:var(--font-h);letter-spacing:normal;text-wrap:balance}
.h1{font-weight:800;font-size:clamp(32px,4.2vw,48px);line-height:1.1;white-space:pre-line}
.h2{font-weight:700;font-size:clamp(24px,2.4vw,30px);line-height:1.2}
.h3{font-weight:700;font-size:clamp(18px,1.4vw,20px);line-height:1.2;letter-spacing:.025em}
.h4{font-family:var(--font-h);font-weight:700;font-size:20px;line-height:1.2;letter-spacing:.025em}
.lede{font-size:18px;line-height:1.5;color:var(--ink-2);text-wrap:pretty}
.body{font-size:16px;line-height:1.5;color:var(--ink-2);text-wrap:pretty}
.small{font-size:14px;line-height:1.55;color:var(--muted)}
.small.measure{max-width:72ch}
.measure{max-width:52rem}
.measure-tight{max-width:34ch}

.btn{display:inline-flex;align-items:center;justify-content:center;padding:8px 30px;border:1px solid transparent;border-radius:9999px;font-family:var(--font-h);font-weight:600;font-size:14px;line-height:1.35;letter-spacing:.025em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.btn .ico{flex:none;width:20px;height:20px;margin-right:8px;opacity:0;transition:opacity .3s ease}
.btn .ico svg{width:100%;height:100%;display:block}
.btn .ico + span{display:inline-block;transform:translateX(-14px);transition:transform .3s ease}
.btn:hover .ico,.btn:focus-visible .ico{opacity:1}
.btn:hover .ico + span,.btn:focus-visible .ico + span{transform:translateX(0)}
.btn-primary{background:var(--g-700);color:#fff}
.btn-primary:hover{background:var(--g-800);color:#fff}
.btn-light{background:#fff;color:#000;border-color:#fff}
.btn-light:hover{background:var(--band-2);color:#000}
.btn-outline{background:transparent;color:var(--deep-fg);border-color:var(--deep-rule)}
.btn-outline:hover{border-color:var(--deep-fg);color:var(--deep-fg)}
.btn-mint{background:var(--mint);color:var(--g-900);border-color:var(--mint)}
.btn-mint:hover{background:#a5e3c1;border-color:#a5e3c1;color:var(--g-900)}
.btn-sm{padding:7px 22px;font-size:13px}

.store{display:inline-flex;align-items:center;gap:12px;padding:11px 20px;border-radius:9999px;text-decoration:none;background:#fff;color:#000;border:1px solid var(--deep-store-border);transition:background-color .2s ease}
.store:hover{background:var(--band-2);color:#000}
.store .lbl{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.store .lbl small{font-family:var(--font-h);font-weight:600;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.store .lbl strong{font-family:var(--font-h);font-weight:700;font-size:16px;letter-spacing:-.01em}
.stores{display:flex;flex-wrap:wrap;gap:16px}
.store-soon{background:transparent;color:var(--deep-fg);border:1px dashed var(--deep-store-border);cursor:default}
.store-soon:hover{background:transparent;color:var(--deep-fg)}
.store-soon .lbl small{color:inherit;opacity:.65}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}

.why-lead{margin-top:14px;font-family:var(--font-h);font-weight:700;font-size:16px;line-height:1.5;color:var(--ink)}
.why-list{display:flex;flex-direction:column;gap:14px;margin:24px 0 28px}
.why-list li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.5;color:var(--ink-2)}
.why-list .bi{flex:none;margin-top:1px;color:var(--g-600)}
.why .shot{aspect-ratio:3/2}

.site-head{position:sticky;top:0;z-index:50;height:var(--menu-h);background:#fff;border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;gap:18px;height:100%}
.brand{display:inline-flex;flex-direction:column;align-items:flex-start;gap:3px;text-decoration:none;color:var(--ink);flex:none}
.brand:hover{color:var(--ink)}
.brand .name{font-family:var(--font-h);font-weight:500;font-size:22px;line-height:1;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
.brand-tag{font-family:var(--font-h);font-weight:700;font-size:11px;line-height:1.2;letter-spacing:.01em;color:var(--g-600);white-space:nowrap}

.nav-links{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav-link{display:inline-flex;align-items:center;padding:9px 13px;border-radius:var(--r-md);font-family:var(--font-h);font-weight:500;font-size:16px;line-height:1.5;letter-spacing:.025em;text-transform:uppercase;color:var(--ink);text-decoration:none;white-space:nowrap;transition:color .18s ease}
.nav-link:hover{color:var(--g-700);-webkit-text-stroke:.6px currentColor}
.nav-link[aria-current="page"],.nav-link[aria-current="true"]{color:var(--g-700)}
.mobile-menu a[aria-current="page"],.mobile-menu a[aria-current="true"]{color:var(--g-700)}

.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}
.lang{position:relative;display:inline-flex;align-items:center;flex:none}
.lang-trigger{display:inline-flex;align-items:center;gap:2px;padding:0;background:none;border:0;color:var(--ink);font-family:var(--font-h);font-weight:500;font-size:14px;line-height:1.5;cursor:pointer;transition:color .18s ease}
.lang-trigger:hover{color:var(--g-700)}
.lang-code{text-transform:uppercase}
.lang-trigger .cv{flex:none;transition:transform .2s ease}
.lang.open .lang-trigger .cv{transform:rotate(180deg)}
.lang-panel{position:absolute;top:calc(100% + 12px);right:0;width:192px;max-height:320px;overflow-y:auto;padding:12px;background:#fff;border-radius:var(--r-lg);box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);display:none;z-index:60}
.lang.open .lang-panel{display:block}
.lang-panel button{display:block;width:100%;text-align:left;padding:4px 8px;border:0;border-radius:var(--r-sm);background:none;font-family:var(--font-b);font-weight:400;font-size:14px;line-height:1.5;color:var(--ink);cursor:pointer;transition:background-color .16s ease}
.lang-panel button + button{margin-top:4px}
.lang-panel button:hover{background:var(--line)}
.lang-panel button[aria-checked="true"]{background:var(--band-2);font-weight:700}
.nav-dl{flex:none}
.burger{display:none;width:44px;height:44px;flex:none;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line-2);border-radius:9999px;color:var(--ink);cursor:pointer}

.mobile-menu{display:none;border-bottom:1px solid var(--line);background:#fff;max-height:calc(100vh - var(--menu-h));overflow-y:auto}
.mobile-menu.open{display:block}
.mobile-menu .wrap{display:flex;flex-direction:column;padding-block:8px 20px}
/* :not(.btn) because `.mobile-menu a` (0,1,1) outranks `.btn-primary` (0,1,0),
   so without it the drawer repaints the CTA's label in --ink and dark text sits
   on the dark green fill. Same guard as .band-deep above. */
.mobile-menu a:not(.btn){padding:14px 0;font-family:var(--font-h);font-weight:500;font-size:16px;letter-spacing:.025em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.mobile-menu .btn{margin-top:18px}
@media(max-width:900px){
  .site-head .brand-tag{display:none}
  .nav-links,.nav-dl{display:none}
  .burger{display:inline-flex}
  .brand{margin-right:auto}
  /* Touch targets reach the 44px minimum below the desktop breakpoint. The
     header keeps its fixed height, so the language button grows into the
     padding it already had room for rather than pushing the bar taller. */
  .btn{padding-block:12px}
  .btn-sm{padding-block:13px}
  .lang-trigger{padding:12px 4px}
  .site-head .brand{padding-block:13px}
  /* :not(.brand) — this exists to give footer LINKS a 44px touch target, but
     `.site-foot a` (0,1,1) also outranks `.brand` (0,1,0) and replaces its
     inline-flex column with inline-block, which drops the tagline onto the same
     line as the wordmark. Desktop never showed it because the rule is mobile-only. */
  .site-foot a:not(.brand){display:inline-block;padding-block:9px}
}
@media(max-width:480px){
  .site-head .wrap{gap:12px;padding-inline:16px}
  .brand .name{font-size:18px}
  .lang-trigger{font-size:13px}
}

.grid12{display:grid;gap:32px;align-items:center}
@media(min-width:1024px){.grid12{grid-template-columns:repeat(12,1fr);gap:40px}
  .col6{grid-column:span 6}
  .col5{grid-column:span 5}
  .col7{grid-column:span 7}
}
@media(min-width:1280px){.grid12{gap:64px}}

.hero-in{padding-block:64px}
.hero-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-h);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--deep-accent);margin-bottom:20px}
.hero-nos{display:flex;flex-wrap:wrap;gap:0 10px;margin-top:20px;font-family:var(--font-h);font-weight:700;font-size:clamp(17px,1.5vw,20px);line-height:1.45;color:var(--deep-fg)}


.shot{position:relative;width:100%;aspect-ratio:3/2;background:var(--band-2);border:1px dashed var(--line-2);border-radius:var(--r-2xl);display:flex;align-items:center;justify-content:center;padding:20px;text-align:center;color:var(--muted);font-size:13px;line-height:1.45;overflow:hidden}
.band-deep .shot{background:var(--deep-shot-bg);border-color:var(--deep-shot-line);color:var(--deep-shot-fg)}
.hero-art{width:100%;display:flex;justify-content:center}
.hero-art img{display:block;max-width:100%;max-height:450px;width:auto;height:auto}
.phero-art{max-width:480px;margin-inline:auto}
.shot.filled{padding:0;border:0;background:none;box-shadow:0 1px 2px rgba(18,41,31,.05),0 10px 28px rgba(18,41,31,.07)}
.shot.filled img{display:block;width:100%;height:100%;object-fit:cover}
.shot.filled.art{border-radius:var(--r-2xl);background:var(--g-50);padding:24px}
.band-deep .shot.filled{box-shadow:none}
.shot.filled.art img{object-fit:contain}
@media(min-width:1024px){.feat .img .shot,.why .shot{max-width:480px;margin-inline:auto}}
@media(max-width:1023px){.feat .img,.why .shot{width:100%;max-width:680px;margin-inline:auto}}



.steps{display:grid;gap:24px}
@media(min-width:768px){.steps{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.steps{gap:40px}}
.step .num{font-family:var(--font-h);font-weight:800;font-size:14px;letter-spacing:.1em;color:var(--g-600);margin-bottom:14px}
.step .shot{margin-bottom:18px}
.step h3{margin-bottom:8px}

.feat{display:grid;gap:32px;align-items:center;padding-block:40px}
@media(min-width:1024px){.feat{grid-template-columns:repeat(12,1fr);gap:40px;padding-block:56px}
  .feat .txt{grid-column:span 6}
  .feat .img{grid-column:span 6}
  .feat.rev .txt{grid-column:7 / span 6}
  .feat.rev .img{grid-column:1 / span 6;grid-row:1}
}
@media(min-width:1280px){.feat{gap:80px}}
.feat + .feat{border-top:1px solid var(--line)}
.feat-e{font-family:var(--font-h);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--g-600);margin-bottom:8px}
.feat h3{margin-bottom:16px}
.bullets{display:flex;flex-direction:column;gap:12px}
.bullets li{display:flex;gap:11px;font-size:16px;line-height:1.5;color:var(--ink-2)}
.bullets .bi{flex:none;margin-top:3px;color:var(--g-600)}

.tools{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:640px){.tools{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.tools{grid-template-columns:repeat(4,1fr)}}
.tool{display:flex;gap:14px;align-items:flex-start;padding:18px;background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);transition:border-color .2s ease,box-shadow .2s ease}
.tool:hover{border-color:var(--g-400);box-shadow:0 1px 2px rgba(0,0,0,.05)}
.tool .icn{flex:none;width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-lg)}
.tool .icn svg{display:block;width:22px;height:22px}
.tool .nm{display:flex;align-items:center;gap:6px;font-family:var(--font-h);font-weight:700;font-size:16px;letter-spacing:.025em}
.tool .ds{font-size:14px;line-height:1.5;color:var(--ink-2);margin-top:4px}
.tool[hidden]{display:none}
.tool-group{margin-top:36px}
.tool-group + .tool-group{margin-top:32px}
.group-h{display:flex;align-items:center;gap:9px;margin-bottom:14px;font-family:var(--font-h);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.group-h .dot{width:8px;height:8px;border-radius:50%;flex:none}

.crown{display:inline-flex;color:var(--gold-500)}

.privacy-icon{width:72px;height:72px;flex:none;display:inline-flex;align-items:center;justify-content:center;background:var(--deep-accent);color:var(--deep-accent-ink);border-radius:var(--r-2xl);margin-bottom:24px}
.ppoints{display:grid;gap:24px;margin-top:32px}
@media(min-width:768px){.ppoints{grid-template-columns:repeat(2,1fr);gap:28px 40px}}
.ppoint{padding-top:16px;border-top:1px solid var(--deep-rule)}
.ppoint h3{font-family:var(--font-h);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--deep-accent);margin-bottom:8px}
.ppoint p{font-size:16px;line-height:1.5;color:var(--deep-fg-2)}


.cta-center{text-align:center;display:flex;flex-direction:column;align-items:center;max-width:760px;margin-inline:auto}
.cta-center .stores{justify-content:center;margin-top:32px}
.cta-note{margin-top:22px;font-family:var(--font-h);font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--deep-fg-3)}

.site-foot{border-top:1px solid var(--line);background:#fff}
.foot-grid{display:grid;gap:36px;padding-block:48px}
@media(min-width:640px){.foot-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.foot-grid{grid-template-columns:2.6fr repeat(3,minmax(205px,1fr));column-gap:24px}}
.foot-grid h3{font-family:var(--font-h);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-bottom:16px}
.foot-grid li{margin-bottom:11px}
.foot-grid li a{display:inline-flex;align-items:center;gap:7px;font-size:16px;color:var(--ink-2);text-decoration:none}
.foot-grid li a:hover{color:var(--g-700)}
.foot-bot{border-top:1px solid var(--line);padding-block:20px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--muted)}

.toast{position:fixed;left:50%;bottom:24px;z-index:80;max-width:min(92vw,430px);padding:13px 20px;border-radius:var(--r-lg);background:var(--ink);color:#fff;font-size:14px;line-height:1.5;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.24);opacity:0;transform:translate(-50%,14px);pointer-events:none;transition:opacity .22s ease,transform .22s ease}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media(prefers-reduced-motion:reduce){.toast{transition:none}}
/* The bar is just the CTA now — the "e-Scanner · Free" label was dropped
   2026-08-04 as saying nothing the page had not already said. One child means
   space-between would strand the button on the left, so it stretches instead. */
.sticky-dl{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;align-items:stretch;gap:12px;padding:10px 20px;background:#fff;border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(0,0,0,.08)}
.sticky-dl.show{display:flex}
.sticky-dl .btn{flex:1}
@media(min-width:901px){.sticky-dl{display:none !important}}

.cmp-surface{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden}
.cmp{width:100%;table-layout:fixed;border-collapse:collapse;background:transparent;font-size:16px}
.cmp thead th{vertical-align:top;text-align:left;padding:24px 20px;border:0;border-bottom:1px solid var(--line);background:#fff}
.cmp thead th + th{border-left:1px solid var(--line)}
.cmp thead th.pro{background:var(--gold-50);border-bottom-color:var(--gold-100)}
.cmp .ph-feat{vertical-align:middle;font-family:var(--font-b);font-weight:700;font-size:16px;color:var(--ink)}
.cmp .pl-name,.cmp-cards h3{display:flex;align-items:center;gap:7px;height:20px;font-family:var(--font-h);font-weight:700;font-size:12px;line-height:20px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cmp .ph.pro .pl-name,.cmp-cards .pcard.pro h3{color:var(--gold-800)}
.pl-amt{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;margin:12px 0 6px}
.pl-amt strong{font-family:var(--font-h);font-weight:700;font-size:clamp(26px,2.4vw,32px);line-height:1.05;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.pl-amt span{font-size:14px;color:var(--muted)}
.pl-sub{font-weight:400;font-size:14px;line-height:1.45;color:var(--muted);min-height:2.9em}
.pl-cta{margin-top:14px;width:100%}
.pl-more{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:14px;font-family:var(--font-h);font-weight:700;font-size:13px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink);text-decoration:none;transition:color .18s ease}
.pl-more:hover{color:var(--g-700)}
.pl-cta.alt{background:#fff;color:var(--ink);border-color:var(--line-2)}
.pl-cta.alt:hover{background:var(--band-2);border-color:var(--ink)}
.bill{display:inline-flex;padding:3px;margin-top:12px;border-radius:9999px;background:#fff;border:1px solid var(--gold-100)}
.bill button{padding:6px 16px;border:0;border-radius:9999px;background:transparent;font-family:var(--font-h);font-weight:600;font-size:12px;line-height:16px;letter-spacing:.04em;color:var(--muted);cursor:pointer;transition:background-color .2s ease,color .2s ease}
.bill button:hover{color:var(--gold-800)}
.bill button[aria-pressed="true"]{background:var(--gold-100);color:var(--gold-800)}
.bill-ghost{visibility:hidden}
.cmp tbody tr.grp th{padding:13px 20px;border:0;border-bottom:1px solid var(--line);background:var(--band-2);font-family:var(--font-h);font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);text-align:left}
.cmp tbody tr:not(.grp) td:last-child{background:var(--gold-50)}
.cmp tbody tr:not(.grp):hover td{background:var(--band)}
.cmp tbody tr:not(.grp):hover td:last-child{background:#f9ecd2}
.cmp td{padding:12px 20px;border:0;font-size:16px;line-height:1.5;color:#374151;text-align:left}
.cmp td + td{border-left:1px solid var(--line)}
.cmp tbody tr:not(.grp){border-bottom:1px solid var(--line)}
.cmp tbody tr:last-child{border-bottom:0}
.cmp .c{text-align:center;font-weight:400;color:#374151;font-variant-numeric:tabular-nums;white-space:pre-line}
.cmp td.diff,.cmp-cards .pcard.pro b.diff{color:var(--g-700)}
.tk{display:inline-flex;color:inherit}
.cmp td:last-child .tk{color:var(--g-700)}
.dh{color:var(--muted)}
.cmp th:first-child,.cmp td:first-child{width:40%}
.cmp th:nth-child(2),.cmp td:nth-child(2),.cmp th:nth-child(3),.cmp td:nth-child(3){width:30%}
.cmp-cards{display:none;gap:18px}
.cmp-cards li b{white-space:pre-line}
.cmp-cards .pcard{padding:22px;border-radius:var(--r-xl);border:1px solid var(--line);background:#fff}
.cmp-cards .pcard.pro{border-color:var(--gold-100);background:var(--gold-50)}
.cmp-cards .pl-cta{margin-bottom:8px}
.cmp-cards .grp-h{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font-family:var(--font-h);font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.cmp-cards .pcard.pro .grp-h{border-color:var(--gold-100)}
.cmp-cards ul{margin-top:12px}
.cmp-cards li{display:flex;justify-content:space-between;gap:14px;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--line);font-size:16px;line-height:1.5;color:var(--ink-2)}
.cmp-cards .pcard.pro li{border-color:var(--gold-100)}
.cmp-cards ul li:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0}
.cmp-cards li b{font-weight:600;color:var(--ink);justify-content:flex-end;text-align:right}
.cmp-lede{max-width:none;margin:14px 0 28px;text-wrap:normal}
.cur-row{display:flex;justify-content:flex-end;margin-bottom:12px}
.cur .lang-panel{width:120px}
.cmp-note{display:flex;align-items:flex-start;gap:9px;margin-top:20px;font-size:14px;line-height:1.55;color:var(--muted)}
.cmp-note .ni{flex:none;margin-top:2px;color:var(--muted)}
.cmp-note .ni svg{display:block}
@media(max-width:900px){
  .cmp-surface{display:none}
  .cmp-cards{display:grid}
}

.faq{display:flex;flex-direction:column;gap:10px}
.faq details{border:0;background:none}
.faq details[open]{margin-bottom:14px}
.faq summary{display:flex;align-items:center;gap:12px;width:100%;padding:17px 22px;border-radius:var(--r-lg);background:var(--band-2);cursor:pointer;font-family:var(--font-b);font-weight:400;font-size:17px;line-height:1.45;color:var(--ink);list-style:none;transition:background-color .18s ease}
.faq summary:hover{background:var(--band-2);filter:brightness(.975)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .chev{flex:none;margin-left:auto;color:var(--ink);transition:transform .2s ease}
.faq details[open] summary .chev{transform:rotate(180deg)}
.faq .ans{padding:22px 22px 4px;font-size:17px;line-height:1.72;color:var(--ink-2)}
.faq .ans p{margin:0}
.faq .ans p + p,.faq .ans ul + p{margin-top:1rem}
.faq .ans ul{margin:1rem 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.faq .ans li{position:relative;padding-left:22px}
.faq .ans li::before{content:"";position:absolute;left:4px;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--ink)}

.perks{display:flex;flex-direction:column;gap:14px;margin-top:24px}
.perks b{font-family:var(--font-h);font-weight:700}
.perks li{display:flex;gap:11px;font-size:16px;line-height:1.5;color:var(--deep-fg)}
.perks .bi{flex:none;margin-top:3px;color:var(--deep-accent)}
.badge-pill{display:inline-flex;align-items:center;gap:9px;padding:7px 16px;border-radius:9999px;border:1px solid var(--gold-300);background:var(--gold-300);color:var(--g-900);font-family:var(--font-h);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.hero-in .badge-pill{margin-bottom:20px}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .btn .ico{opacity:1}
  .btn .ico + span{transform:none}
}


/* ===== THEME: Mid green — band #3a7d5f, Privacy accent band #12291f ===== */
/* --deep-fg-3 and --deep-accent are set for 12px uppercase labels: both >= 4.5:1 (WCAG AA). */

:root{
  --deep-bg:#3a7d5f;
  --deep-fg:#ffffff;
  --deep-fg-2:rgba(255,255,255,.86);
  --deep-fg-3:rgba(255,255,255,.96);
  --deep-rule:rgba(255,255,255,.30);
  --deep-accent:#f0fbf6;
  --deep-accent-ink:#245139;
  --deep-shot-bg:rgba(255,255,255,.10);
  --deep-shot-line:rgba(255,255,255,.32);
  --deep-shot-fg:rgba(255,255,255,.72);
  --deep-store-border:#ffffff;
}

/* ===== LEGAL PAGES (privacy.html / terms.html) ===== */
.legal-head{padding-block:44px 32px}
@media(min-width:1024px){.legal-head{padding-block:64px 40px}}
.legal-head .lede{margin-top:16px}
.legal-updated{display:inline-flex;align-items:center;gap:8px;margin-top:22px;padding:6px 14px;border:1px solid var(--deep-rule);border-radius:9999px;font-family:var(--font-h);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--deep-fg-3)}
.legal-inapp{margin-top:14px;font-size:14px;line-height:1.55;color:var(--deep-fg-2)}

.legal-layout{display:grid;gap:36px;align-items:start;padding-block:44px 8px}
@media(min-width:1024px){.legal-layout{grid-template-columns:260px minmax(0,1fr);gap:64px;padding-block:56px 8px}}

.legal-nav{display:none}
@media(min-width:1024px){
  .legal-nav{display:block;position:sticky;top:calc(var(--menu-h) + 28px);max-height:calc(100vh - var(--menu-h) - 60px);overflow-y:auto;padding-right:8px}
}
.legal-nav h2{font-family:var(--font-h);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.legal-nav ol{margin:0;padding:0;list-style:none;counter-reset:none}
.legal-nav li{margin-bottom:2px}
.legal-nav a{display:block;padding:6px 10px;border-left:2px solid var(--line);border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:14px;line-height:1.45;color:var(--muted);text-decoration:none;transition:color .16s ease,border-color .16s ease,background-color .16s ease}
.legal-nav a:hover{color:var(--g-700);border-color:var(--g-400);background:var(--band)}
.legal-nav a[aria-current="true"]{color:var(--g-700);border-color:var(--g-600);background:var(--band);font-weight:600}

.legal-intro{max-width:44rem;margin:0 0 34px;padding:20px 22px;border-left:3px solid var(--g-600);background:var(--band);border-radius:0 var(--r-lg) var(--r-lg) 0;font-weight:600;font-size:15px;line-height:1.75;color:var(--ink)}
@media(min-width:768px){.legal-intro{font-size:15.5px}}

.legal{max-width:44rem}
.legal h2{margin:0 0 14px;padding-top:34px;border-top:1px solid var(--line);font-family:var(--font-h);font-weight:700;font-size:clamp(19px,1.5vw,21px);line-height:1.25;letter-spacing:.01em;color:var(--ink);scroll-margin-top:calc(var(--menu-h) + 20px)}
.legal h2:first-child{padding-top:0;border-top:0}
.legal p{margin:0 0 1rem;font-size:16px;line-height:1.72;color:var(--ink-2);text-wrap:pretty}
.legal h2 + p{margin-top:0}
.legal > *:last-child{margin-bottom:34px}

.legal p.legal-num{margin-left:1.5rem}
.legal-ul{display:flex;flex-direction:column;gap:0;margin:0 0 1.35rem;padding:0;list-style:none;border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;background:#fff}
.legal-ul li{padding:14px 18px;font-size:15px;line-height:1.62;color:var(--ink-2);white-space:pre-line}
.legal-ul li + li{border-top:1px solid var(--line)}
.legal-ul li.split{display:grid;gap:3px 22px}
@media(min-width:640px){.legal-ul li.split{grid-template-columns:minmax(11rem,15rem) minmax(0,1fr);align-items:baseline}}
.legal-ul li.split b{font-family:var(--font-h);font-weight:700;font-size:15px;letter-spacing:.01em;color:var(--ink)}

/* The summary list at the top of the Privacy Policy: same data, louder. */
.legal-ul.callout{border-color:var(--g-200);background:var(--g-50);box-shadow:0 1px 2px rgba(18,41,31,.04)}
.legal-ul.callout li{display:flex;gap:12px;padding:13px 20px;font-size:15.5px;color:var(--ink)}
.legal-ul.callout li + li{border-top-color:var(--g-100)}
.legal-ul.callout li::before{content:"";flex:none;width:18px;height:18px;margin-top:3px;border-radius:50%;background:var(--g-600) no-repeat center/11px 11px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 5 5L19 7'/%3E%3C/svg%3E")}

/* Draft placeholder. Reads at body size; only the colour flags it. */
.fillme{color:#b91c1c;cursor:help}

.sup-ways{display:grid;gap:20px}
@media(min-width:768px){.sup-ways{grid-template-columns:repeat(2,1fr);gap:24px}}
.sup-card{padding:26px 24px;background:#fff;border:1px solid var(--line);border-radius:var(--r-xl)}
.sup-card .icn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-bottom:16px;border-radius:var(--r-lg);background:var(--g-50);color:var(--g-700)}
.sup-card h2{margin-bottom:8px}
.sup-card .body{color:var(--ink-2)}
.sup-card .btn{margin-top:18px;text-transform:none;letter-spacing:normal}

.sup-links{display:flex;flex-wrap:wrap;gap:12px 26px;margin-top:22px}
.sup-links .lk{font-family:var(--font-h);font-weight:700;font-size:13px;letter-spacing:.03em;text-transform:uppercase;color:var(--g-700);text-decoration:none}
.sup-links .lk:hover{text-decoration:underline}

.faq-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:start;padding-block:8px}
.faq-layout > *{min-width:0}
@media(min-width:1024px){.faq-layout{grid-template-columns:300px minmax(0,1fr);gap:56px}}
.faq-top{display:flex;justify-content:flex-end;padding-block:28px 4px}
/* Below the desktop breakpoint the search box is the first thing under the
   banner, so 28px of lead-in on top of .sec's 32px just pushes the chips and
   the first question further off-screen. */
@media(max-width:1023px){.faq-top{padding-block:4px}.faq-search{max-width:none}}
.faq-search{position:relative;width:100%;max-width:340px}
.faq-search input{width:100%;padding:11px 16px 11px 42px;border:1px solid var(--line);border-radius:9999px;background:var(--band-2);font-family:var(--font-b);font-size:15px;line-height:1.5;color:var(--ink)}
.faq-search input::placeholder{color:var(--muted)}
.faq-search input:focus{outline:none;background:#fff;border-color:var(--g-500);box-shadow:0 0 0 3px var(--g-100)}
.faq-search .ic{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.faq-nav{display:none}
@media(min-width:1024px){
  .faq-nav{display:block;position:sticky;top:calc(var(--menu-h) + 28px);max-height:calc(100vh - var(--menu-h) - 60px);overflow-y:auto}
}
.faq-nav ol{margin:0;padding:0;list-style:none}
.faq-nav li{margin-bottom:4px}
.faq-nav li[hidden]{display:none}
.faq-nav a{display:block;padding:7px 0;font-family:var(--font-b);font-size:18px;line-height:1.4;color:var(--muted);text-decoration:none;transition:color .16s ease}
.faq-nav a:hover{color:var(--ink)}
.faq-nav a[aria-current="true"]{color:var(--g-700);font-weight:600}
/* A single scrolling row. Wrapping was tried and rejected: eight Vietnamese
   labels take four rows at 390px, which buries the first question below the
   fold to save one swipe. The row bleeds to the viewport edges so the cut lands
   at the screen edge rather than inside the 24px gutter, and scroll-snap parks
   whichever chip you swipe to flush against that edge. */
.faq-sec{margin-bottom:46px;scroll-margin-top:calc(var(--menu-h) + 20px)}
.faq-sec > h2{margin:0 0 18px;font-family:var(--font-h);font-weight:700;font-size:clamp(21px,2vw,27px);line-height:1.2;letter-spacing:.01em;text-transform:uppercase;color:var(--ink)}
.faq-sec[hidden]{display:none}
.faq-empty{padding:22px 24px;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--band);font-size:15px;line-height:1.6;color:var(--ink-2)}
.faq-empty[hidden]{display:none}

.sr-layout{display:grid;gap:32px;align-items:start;padding-block:36px 8px}
@media(min-width:1024px){.sr-layout{grid-template-columns:minmax(0,1fr) 300px;gap:56px}}
.sr-layout > *{min-width:0}
.ct-list{display:grid;gap:26px;max-width:44rem}
@media(min-width:768px){.ct-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 40px;max-width:none}}
.ct-item{padding:22px 24px 24px;border:1px solid var(--line);border-radius:var(--r-xl);background:#fff}
.ct-item .body{margin-top:8px}
.ct-item .body b{font-family:var(--font-h);font-weight:700;color:var(--ink)}
.ct-item .body + .body{margin-top:3px}
.sr-card{padding:28px 26px 26px;border:1px solid var(--line);border-radius:var(--r-2xl);background:var(--band)}
@media(min-width:640px){.sr-card{padding:32px 34px 30px}}
.sr-card[hidden]{display:none}

.sr-steps{display:flex;align-items:center;gap:8px;margin:0 0 26px;padding:0;list-style:none}
.sr-step{display:flex;align-items:center;gap:10px;flex:none}
.sr-step + .sr-step{flex:1;min-width:0}
.sr-step + .sr-step::before{content:"";flex:1;height:1px;background:var(--line-2);min-width:14px}
.sr-step .n{display:inline-flex;align-items:center;justify-content:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--line-2);color:#fff;font-family:var(--font-h);font-weight:700;font-size:14px}
.sr-step .t{font-family:var(--font-h);font-weight:500;font-size:15px;color:var(--muted);white-space:nowrap}
@media(max-width:520px){.sr-step:not(.on) .t{display:none}}
.sr-step.on .n{background:var(--ink)}
.sr-step.on .t{font-weight:700;color:var(--ink)}
.sr-step.ok .n{background:var(--g-600);font-size:0}
.sr-step.ok .n::after{content:"";width:14px;height:14px;background:no-repeat center/14px 14px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 5 5L19 7'/%3E%3C/svg%3E")}

.sr-field{margin-bottom:22px;border:0;padding:0}
.sr-field > label,.sr-field > legend{display:block;margin-bottom:8px;padding:0;font-size:15px;line-height:1.4;color:var(--ink)}
.sr-field .req{color:#c2436b}
.sr-field input[type=text],.sr-field input[type=email],.sr-field select,.sr-field textarea{width:100%;padding:13px 15px;border:1px solid transparent;border-radius:var(--r-lg);background-color:var(--band-2);font-family:var(--font-b);font-size:16px;line-height:1.5;color:var(--ink);transition:background-color .16s ease,border-color .16s ease}
.sr-field textarea{resize:vertical;min-height:130px}
.sr-field input::placeholder,.sr-field textarea::placeholder{color:var(--muted)}
.sr-field select{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23151513' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;background-size:18px 18px;cursor:pointer}
.sr-field select::-ms-expand{display:none}
.sr-field :is(input,select,textarea):hover{background-color:var(--line)}
.sr-field :is(input,textarea):focus{outline:none;background-color:#fff;border-color:var(--g-500);box-shadow:0 0 0 3px var(--g-100)}
.sr-field select:focus{outline:none;border-color:var(--g-500);box-shadow:0 0 0 3px var(--g-100)}
.sr-field :is(input,select,textarea).bad{background-color:#fff;border-color:#c2436b}
.sr-radio{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:16px;color:var(--ink);cursor:pointer}
.sr-radio input{width:19px;height:19px;accent-color:var(--g-600);cursor:pointer}

.sr-note{display:flex;gap:11px;align-items:flex-start;margin:0 0 20px;padding:15px 17px;border:1px solid var(--g-100);border-radius:var(--r-lg);background:var(--g-50);font-size:14px;line-height:1.6;color:var(--ink-2)}
.sr-note .ic{flex:none;margin-top:2px;color:var(--g-600)}
.sr-consent{display:flex;gap:12px;align-items:flex-start;margin-bottom:22px;font-size:15px;line-height:1.6;color:var(--ink-2);cursor:pointer}
.sr-consent input{flex:none;width:19px;height:19px;margin-top:2px;accent-color:var(--g-600);cursor:pointer}

.sr-err{margin:0 0 16px;font-size:14px;line-height:1.5;color:#c2436b}
.sr-err[hidden]{display:none}
.sr-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:4px}
.btn-outline-ink{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-outline-ink:hover{background:var(--band-2);color:var(--ink);border-color:var(--muted)}
.btn[disabled]{opacity:.55;pointer-events:none}

.sr-done{padding:44px 26px 48px;border:1px solid var(--line);border-radius:var(--r-2xl);background:var(--band);text-align:center}
.sr-done[hidden]{display:none}
.sr-tick{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;margin:0 0 16px;border-radius:50%;background:var(--g-600);color:#fff}
.sr-done .lede{margin:12px auto 0}

.sr-aside{padding:24px 24px 26px;border:1px solid var(--line);border-radius:var(--r-xl);background:#fff}
.sr-aside .body{margin-top:8px}
.sr-aside .lk{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:9px 16px;border:1px solid var(--g-200);border-radius:999px;font-family:var(--font-h);font-weight:700;font-size:13px;letter-spacing:.03em;text-transform:uppercase;color:var(--g-700);text-decoration:none}
.sr-aside .lk::after{content:"\2192";font-size:15px;line-height:1}
.sr-aside .lk:hover{border-color:var(--g-400);background:var(--g-50)}

.legal-foot{margin-top:38px;padding:26px 26px 28px;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--band)}
.legal-foot h2{margin:0 0 8px;padding:0;border:0;font-family:var(--font-h);font-weight:700;font-size:18px;letter-spacing:.01em;color:var(--ink)}
.legal-foot p{margin:0;font-size:15px;line-height:1.65;color:var(--ink-2)}
.legal-foot .lk{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:10px 18px;border:1px solid var(--g-200);border-radius:999px;background:#fff;font-family:var(--font-h);font-weight:700;font-size:13px;letter-spacing:.03em;text-transform:uppercase;color:var(--g-700);text-decoration:none}
.legal-foot .lk::after{content:"\2192";font-size:15px;line-height:1}
.legal-foot .lk:hover{border-color:var(--g-400);background:var(--g-50)}

.band-accent{
  --deep-bg:#12291f;
  --deep-fg:#ffffff;
  --deep-fg-2:rgba(255,255,255,.82);
  --deep-fg-3:rgba(255,255,255,.62);
  --deep-rule:rgba(255,255,255,.24);
  --deep-accent:#8fd9b0;
  --deep-accent-ink:#12291f;
  --deep-shot-bg:rgba(255,255,255,.08);
  --deep-shot-line:rgba(255,255,255,.26);
  --deep-shot-fg:rgba(255,255,255,.65);
  --deep-store-border:#ffffff;
}