:root{--ink:#11162e;--navy:#10172f;--blue:#5268f5;--blue-hover:#4056d7;--violet:#806ff4;--muted:#68738a;--line:#e2e7f1;--soft:#f3f5fb;--panel:#ffffff;--shadow-sm:0 12px 28px rgba(82,104,245,.16);--shadow-md:0 18px 40px rgba(82,104,245,.14);--shadow-lg:0 32px 80px rgba(24,39,99,.18);--radius-sm:.625rem;--radius-md:.875rem;--radius-lg:1.375rem;--chrome:102px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif;color:var(--ink)}
*{box-sizing:border-box}html{scroll-behavior:smooth;overflow-x:hidden}body{margin:0;min-width:320px;background:#fff;line-height:1.75;overflow-x:hidden}a{color:inherit;text-decoration:none}button{font:inherit}
.wrap{width:min(1180px,calc(100% - 48px));margin:auto}
.skip-link{position:fixed;left:1rem;top:-5rem;z-index:30;padding:.75rem 1rem;background:#fff;color:var(--blue);border:2px solid var(--blue);border-radius:var(--radius-sm)}.skip-link:focus{top:1rem}
.official-bar{height:30px;display:flex;align-items:center;justify-content:center;color:#cbd3e9;background:var(--navy);font-size:.68rem;letter-spacing:.04em}
.site-header{position:sticky;top:0;z-index:20;border-bottom:1px solid var(--line);background:rgba(255,255,255,.95);backdrop-filter:blur(16px)}
.nav-bar{height:72px;display:flex;align-items:center;gap:1.75rem}
/* The header carries the full logo — paper-plane mark plus the 如梭 wordmark — so the brand name
   is legible without reading the copy. Intrinsic 580x176 stays on the element for the aspect-ratio
   box; the height below is what actually sizes it, and the width follows the ratio. */
.brand{display:inline-flex;align-items:center;min-height:44px}.brand img{display:block;width:auto;height:34px}
.nav-links{display:flex;gap:1.6rem;margin-left:auto}
.nav-links a,.member-link,.site-footer a{color:var(--muted);font-size:.85rem;font-weight:700;min-height:44px;display:inline-flex;align-items:center}
.nav-links a{min-width:44px;justify-content:center}
.nav-links a:hover,.member-link:hover,.site-footer a:hover{color:var(--blue)}
/* Deliberately a quiet utility link rather than the filled button it used to be: the only
   prominent action on this page is the Android download (PLAN-027 §1). */
.member-link{min-width:44px;justify-content:center}
.button{border:1px solid transparent;min-height:48px;border-radius:var(--radius-sm);padding:.8rem 1.3rem;display:inline-flex;align-items:center;justify-content:center;gap:.8rem;font-weight:800;font-size:.92rem;transition:transform .2s,background .2s,color .2s;cursor:pointer}
.button:hover{transform:translateY(-2px)}
.button-primary{background:var(--blue);color:#fff;box-shadow:var(--shadow-sm)}.button-primary:hover{background:var(--blue-hover)}
.button-quiet{color:var(--ink);background:transparent;border-color:var(--line)}.button-quiet:hover{border-color:var(--blue);color:var(--blue)}
.eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.13em;color:var(--blue);display:flex;gap:.55rem;align-items:center;margin:0 0 .9rem}
.eyebrow>span{display:inline-block;width:26px;height:1px;background:currentColor}
.eyebrow.light{color:#94a4ff}

/* Hero. `min-height` rather than a fixed height so the first viewport holds the whole V16
   composition at 1440x900 and 390x844 without clipping a longer translation. */
.hero{background:linear-gradient(135deg,#fff 0 55%,#eef1ff 55%)}
.hero-grid{min-height:calc(100svh - var(--chrome));display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center;padding:clamp(1.5rem,3vh,2.5rem) 0}
.hero h1{margin:0;max-width:560px;font-size:clamp(2.4rem,4.4vw,3.8rem);line-height:1.04;letter-spacing:-.045em}
.hero h1 span{display:block;margin-top:.4rem;color:var(--blue)}
.lead{max-width:30rem;margin:1.1rem 0 0;color:var(--muted);font-size:1rem;line-height:1.75}
.hero-actions{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin-top:1.5rem}
.microcopy{color:#818a9e;font-size:.78rem;margin:.9rem 0 0}
.text-action{display:inline-flex;min-height:44px;align-items:center;color:var(--blue);font-weight:800;font-size:.85rem}

/* The real client screenshot and the six destination marks, inside the first viewport. */
.product-stage{position:relative;height:100%;min-height:420px;display:grid;place-items:center;border-radius:1.75rem;background:linear-gradient(145deg,#dfe5ff,#f5f2ff);isolation:isolate}
.product-stage:before{content:"";position:absolute;width:min(300px,62%);aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.65);z-index:0}
.product-screenshot{position:relative;z-index:1;width:auto;height:min(78%,520px);max-width:70%;object-fit:contain;filter:drop-shadow(0 24px 28px rgba(18,28,70,.22))}
.orbit-icon{position:absolute;z-index:2;display:flex;align-items:center;gap:.5rem;min-width:6.5rem;padding:.55rem .7rem;border:1px solid rgba(255,255,255,.9);border-radius:.8rem;background:rgba(255,255,255,.9);box-shadow:0 12px 28px rgba(23,36,84,.12);color:#505b70;font-size:.72rem;font-weight:800;backdrop-filter:blur(10px)}
.orbit-icon img{width:22px;height:22px;object-fit:contain}
.orbit-icon.google{left:2%;top:14%}.orbit-icon.youtube{right:1%;top:9%}.orbit-icon.instagram{left:0;top:45%}.orbit-icon.x{right:0;top:41%}.orbit-icon.claude{left:3%;bottom:16%}.orbit-icon.chatgpt{right:0;bottom:11%}
.non-affiliation{position:absolute;z-index:3;left:50%;bottom:.6rem;width:94%;transform:translateX(-50%);color:#69738b;font-size:.62rem;line-height:1.5;text-align:center}

.section{padding:clamp(3.5rem,8vw,6rem) 0}
.section.soft{background:var(--soft)}
.section.dark{background:var(--navy);color:#fff}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:2.5rem;margin-bottom:2.5rem}
.section-head.light>p{color:#abb5ce}
.section h2{max-width:34rem;margin:0;font-size:clamp(1.9rem,3.4vw,3rem);line-height:1.12;letter-spacing:-.03em}
.section-head>p{max-width:24rem;margin:0;color:var(--muted);font-size:.85rem;line-height:1.75}

.steps-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;overflow:hidden;border:1px solid rgba(255,255,255,.14);border-radius:1.375rem;background:rgba(255,255,255,.14)}
.steps-list li{min-height:230px;padding:1.75rem;background:var(--navy)}
.steps-list>li>span{color:#91a1ff;font-size:.72rem;font-weight:800}
.steps-list h3{font-size:1.05rem;margin:1.4rem 0 .5rem}
.steps-list p{color:#aeb8d0;margin:0;line-height:1.7;font-size:.85rem}
.steps-list a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* The iPhone route, kept visibly secondary: no filled button, no price, one text link out. */
.iphone-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,6vw,4.5rem);align-items:center}
.iphone-copy>p{color:var(--muted);font-size:.9rem;line-height:1.8;max-width:30rem;margin:1.2rem 0 1.2rem}
.iphone-steps{list-style:none;margin:0;padding:0;display:grid;gap:1px;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--line)}
/* The number and the text are two grid items, matching `.steps-list`. An earlier version put the
   number in a `::before` and left `h3`/`p` as siblings, which made the paragraph the third grid
   item and wrapped it one character wide in the number column. */
.iphone-steps li{display:grid;grid-template-columns:2.25rem 1fr;gap:1rem;align-items:baseline;padding:1.1rem 1.35rem;background:var(--panel)}
.iphone-steps>li>span{color:var(--violet);font-size:.72rem;font-weight:800}
.iphone-steps h3{margin:0;font-size:1rem}
.iphone-steps p{margin:.3rem 0 0;color:var(--muted);font-size:.82rem;line-height:1.7}
.iphone-steps a{color:var(--blue);font-weight:700}

.boundaries-layout{display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(2rem,6vw,4.5rem)}
.boundaries-layout>div>p{color:var(--muted);font-size:.85rem;line-height:1.75;max-width:26rem}
.boundary-faq{border-top:1px solid var(--line)}
.boundary-faq details{border-bottom:1px solid var(--line)}
.boundary-faq summary{min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:1rem;cursor:pointer;font-size:.95rem;font-weight:800;list-style:none}
.boundary-faq summary::-webkit-details-marker{display:none}
.boundary-faq summary:after{content:"+";color:var(--blue);font-size:1.2rem}
.boundary-faq details[open] summary:after{content:"–"}
.boundary-faq details p{margin:-.15rem 0 1.25rem;color:var(--muted);font-size:.85rem;line-height:1.75}
.boundary-faq details a{color:var(--blue);font-weight:700}
.boundary-support{display:inline-flex;min-height:44px;align-items:center;margin-top:1.5rem;color:var(--blue);font-weight:800;font-size:.85rem}

.site-footer{padding:1.75rem 0 2.5rem;color:var(--muted);font-size:.8rem}
.footer-main{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap}.footer-main p{margin:0}
.footer-main .brand img{height:26px}
.footer-links{display:flex;gap:1.4rem;margin-left:auto;flex-wrap:wrap}
.footer-support{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;color:var(--muted);font-size:.78rem;font-weight:700}
.support-mode{gap:.35rem;padding:.25rem .35rem;border-radius:.4rem}
.support-mode svg{width:1.1rem;height:1.1rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.brand-muted{opacity:.7}
.footer-legal{margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--line)}.footer-legal p{margin:0;color:var(--muted);font-size:.75rem}

/* First-visit analytics notice (PLAN-061, compacted under PLAN-031 §4). Fixed to the bottom and
   deliberately NOT modal: the collection it describes is not optional, so there is nothing to
   decide and nothing that should block the page. It sits above the page but never covers the
   whole viewport, and it leaves the document scrollable and every control reachable while it is
   open. Narrow (not the 1180px full-width bar this replaced) and one sentence, because a
   mandatory notice a visitor cannot decline should take as little of their attention as it
   truthfully can. */
.site-notice{position:fixed;left:50%;bottom:0;z-index:25;transform:translateX(-50%);width:min(30rem,calc(100% - 24px));margin-bottom:12px;display:flex;align-items:center;gap:1rem;padding:.85rem 1rem;border:1px solid var(--line);border-radius:var(--radius-md);background:rgba(255,255,255,.97);box-shadow:var(--shadow-lg);backdrop-filter:blur(16px)}
.site-notice[hidden]{display:none}
.site-notice-content{flex:1;min-width:0}
.site-notice-content h2{margin:0 0 .2rem;color:var(--ink);font-size:.9rem;line-height:1.35}
.site-notice-copy{margin:0;color:var(--muted);font-size:.8rem;line-height:1.6}
.site-notice-copy a{color:var(--blue);font-weight:700}
/* `white-space:nowrap` keeps the one action on a single line so the label can never wrap into a
   two-line target that reads as two controls. */
.site-notice .button{flex:none;min-height:44px;padding:.6rem 1.4rem;white-space:nowrap}

.error-page{min-height:58vh;padding:clamp(5rem,11vw,9rem) 0}
.error-inner{max-width:36rem}
.error-page h1{font-size:clamp(2.6rem,6vw,4.8rem);line-height:1;letter-spacing:-.045em;margin:0}
.error-page>.error-inner>p{color:var(--muted);margin:1.4rem 0 1.8rem}

/* --- PLAN-029 item 1: the two policy pages ----------------------------------------------------
   Long-form prose is the one thing the marketing shell had no measure for: `.wrap` is 1180px,
   about twice a comfortable line. What follows is a width and a vertical rhythm only — colour,
   link colour and focus ring all come from the tokens and rules already above, so these pages
   stay inside the same visual language rather than introducing a second one. */
.policy-page{padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(3rem,7vw,5rem)}
.policy{max-width:44rem}
.policy h1{margin:0;font-size:clamp(1.9rem,3.6vw,2.7rem);line-height:1.12;letter-spacing:-.035em}
.policy h2{margin:2.4rem 0 .5rem;font-size:1.1rem;letter-spacing:-.02em}
.policy h3{margin:1.4rem 0 .4rem;font-size:.98rem;letter-spacing:-.01em}
.policy p,.policy li{color:var(--muted);font-size:.9rem;line-height:1.85;margin:.5rem 0}
.policy ul{margin:.5rem 0;padding-left:1.15rem}
.policy strong{color:var(--ink)}
.policy a{color:var(--blue);font-weight:700}
.policy .microcopy{font-size:.78rem;color:#818a9e;margin:.9rem 0 0}
/* The disclosures a reader is most likely to skim past — the query string being kept verbatim,
   and the absence of any consent control — are the two this page most needs read. */
.policy-note{margin:1.2rem 0;padding:.9rem 1.1rem;border-left:3px solid var(--blue);background:var(--soft);border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.policy-note p{margin:0}

/* Native <dialog>: `showModal()` owns initial focus, the inert background, Escape and aria-modal.
   Invisible to a visitor without JavaScript, which is why the hero link is the real contract. */
.button:focus-visible,.nav-links a:focus-visible,.member-link:focus-visible,.text-action:focus-visible,.boundary-support:focus-visible,.site-footer a:focus-visible,.brand:focus-visible,.boundary-faq summary:focus-visible,.steps-list a:focus-visible,.iphone-steps a:focus-visible,.policy a:focus-visible,.site-notice a:focus-visible{outline:3px solid var(--violet);outline-offset:4px}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.button:hover{transform:none}}
@media(max-width:920px){.hero-grid{grid-template-columns:1fr;align-content:center}.iphone-layout{grid-template-columns:1fr}.boundaries-layout{grid-template-columns:1fr}.steps-list{grid-template-columns:1fr}.steps-list li{min-height:0}}
@media(max-width:760px){
  /* 30px official bar + two-row nav-bar. Measured with Playwright at both 320 and 390 (identical,
     since the row heights don't depend on viewport width): header renders 117.78px tall, so total
     chrome is 147.78, rounded up to 148 — not the single-row 94 from before the nav row was restored. */
  :root{--chrome:148px}
  /* The nav list no longer disappears below this width: `.nav-bar` wraps, and `.nav-links` is
     pushed after `.member-link` with `order` so it drops to its own full-width row while the logo
     and login link stay together on the first row (matching PLAN-029's compact mobile header). */
  .nav-bar{height:auto;flex-wrap:wrap;gap:.6rem .75rem;padding:.6rem 0}
  .nav-links{order:3;flex-basis:100%;flex-wrap:wrap;justify-content:center;gap:.5rem 1rem;margin-left:0}
  .member-link{margin-left:auto}.brand img{height:28px}
  .hero-grid{gap:1rem;padding:1rem 0 .75rem}
  .hero h1{font-size:2rem;letter-spacing:-.035em}
  .lead{margin-top:.7rem;font-size:.9rem;line-height:1.6}
  .hero-actions{display:grid;grid-template-columns:1fr;gap:.6rem;margin-top:1rem}.button{width:100%}
  .microcopy{margin-top:.6rem}
  .product-stage{min-height:300px}
  .product-screenshot{height:min(74%,320px);max-width:52%}
  .orbit-icon{min-width:0;width:2.6rem;height:2.6rem;justify-content:center;padding:.5rem;border-radius:.7rem}
  .orbit-icon span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .orbit-icon.google{left:2%;top:10%}.orbit-icon.youtube{right:2%;top:7%}.orbit-icon.instagram{left:1%;top:42%}.orbit-icon.x{right:1%;top:39%}.orbit-icon.claude{left:3%;bottom:16%}.orbit-icon.chatgpt{right:2%;bottom:12%}
  .non-affiliation{font-size:.58rem;bottom:.4rem}
  .section{padding:3rem 0}.section-head{display:block}.section-head>p{margin-top:.9rem}
  .iphone-steps li{grid-template-columns:1.9rem 1fr;gap:.7rem;padding:.9rem 1rem}
  .footer-main{gap:.8rem}.footer-support,.footer-links{width:100%;margin-left:0}.footer-support{gap:.5rem}.footer-links{gap:1.1rem}
  /* Stacked below 760px: side by side the copy is squeezed to a few words per line long before the
     action stops fitting. The action keeps its own row and the full width. */
  .site-notice{flex-direction:column;align-items:stretch;gap:.75rem;padding:.9rem 1rem;width:calc(100% - 16px);margin-bottom:8px}
  .site-notice .button{width:100%}
}