*,*::before,*::after{box-sizing:border-box}
/* Palette. The page is a dark opening and a white sheet, in the manner of the
   2026-09-19 reference (hibro.io): near-black, one indigo accent, and four soft
   tints for the large tiles. The device mockups keep the app's own colours,
   sampled from its screenshots, so the product inside the phones is still the
   real product. */
:root{
  --night:#0b0c10; --night-2:#15171e; --paper:#fff; --page:#f5f5f9; --hair:#e6e7ee;
  --accent:#5d5fef; --accent-ink:#4648d6; --accent-soft:#ecebff;
  --lav:#ecebff; --butter:#fff3c6; --mint:#e0f5e9; --rose:#ffe7ec; --sky:#e3f1ff;
  /* Neutrals carry a trace of the accent's hue rather than sitting flat grey;
     --muted is the lightest text colour and still clears 4.5:1 on --page. */
  --ink:#0f1117; --body:#4a4f5e; --muted:#656a80;
  /* Shadows on the white sheet lean indigo, the accent's temperature. */
  --shade:38,36,92;
  --on-dark:#fff; --on-dark-body:#c9cdd8; --on-dark-muted:#8c93a3;
  /* Device-mockup colours, sampled from the app's own screenshots rather than
     guessed. See the phone mockup block for which screenshot each came from. */
  --wash:#f7f8fa; --slate:#3e424d; --cream:#f6f1e8; --lav-ink:#d4c9d4;
  --sent:#545863; --sent-ink:#fff; --sent-dim:#c2c5cd;
  --bar:#edeeef; --field:#fcfdff;
  --cl-search:#e8e8eb; --cl-badge:#bec1ca;
  --av-olive:#8c8e7b; --av-warm:#bdbeb2; --av-cool:#dfe3e6;
  --text:#0f1117;
  --doc:760px; --wide:1180px;
}
/* The header is sticky, so anchored jumps need to clear it. */
html{-webkit-text-size-adjust:100%;background:var(--night);scroll-behavior:smooth;
  scroll-padding-top:76px}
/* Inter for Latin text, self-hosted and variable-weight; everything outside
   its range (all CJK) falls through to the system stack behind it. swap, so
   text is never invisible while the 48 KB file arrives. */
@font-face{font-family:"Inter";font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/assets/fonts/inter-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,
    U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
body{
  margin:0;background:var(--night);color:var(--text);overflow-x:hidden;
  font:16px/1.7 "Inter",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",
    "PingFang SC","Hiragino Sans GB","Microsoft YaHei",Roboto,sans-serif;
  font-feature-settings:"cv11","ss01";
}
/* Everything between the header and the footer sits on white; the hero paints
   its own dark slab inside that. */
main{background:var(--paper)}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:12px;top:12px;z-index:20;background:var(--accent);color:var(--on-dark);
  padding:10px 16px;border-radius:10px;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
a{color:var(--accent-ink)}
img,svg{display:block;max-width:100%}

/* ---------- header ---------- */
/* The header is the one place the page uses glass, as the platform guidance
   has it: controls and navigation float on the material, content never does.
   Blur plus saturation keeps colour under the bar alive; a 1px top highlight
   and a darker horizontal edge separate it from whatever scrolls beneath. */
.site-head{position:sticky;top:0;z-index:15;background:rgba(11,12,16,.78);
  -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,.08);color:var(--on-dark);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:background .35s ease,border-color .35s ease}
.bar{max-width:var(--wide);margin:0 auto;padding:13px 24px;
  display:flex;align-items:center;gap:14px;
  transition:margin .35s cubic-bezier(.2,.7,.2,1),padding .35s cubic-bezier(.2,.7,.2,1),
    border-radius .35s ease,background .35s ease,box-shadow .35s ease,max-width .35s ease}
/* Once the page scrolls the bar lets go of the edges and floats as a pill —
   the reference site's header. The strip behind goes transparent so the pill
   reads as an object over the page rather than a bar with rounded ends. */
.site-head.scrolled{background:transparent;border-color:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none}
.site-head.scrolled .bar{max-width:calc(var(--wide) - 48px);margin:10px auto;padding:8px 10px 8px 14px;
  border-radius:999px;background:rgba(15,17,23,.72);
  -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  box-shadow:0 22px 48px -22px rgba(0,0,0,.7),0 0 0 1px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(255,255,255,.04)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;margin-right:auto}
/* The app's own icon, not a lookalike drawn in CSS. */
.mark{width:34px;height:34px;flex:0 0 auto;border-radius:9px}
.brand b{font-size:19px;font-weight:700;letter-spacing:-.4px}
nav.top{display:flex;gap:2px;flex-wrap:wrap}
nav.top a{padding:7px 13px;border-radius:999px;font-size:14.5px;text-decoration:none;color:var(--on-dark-body)}
nav.top a:hover{color:var(--on-dark);background:rgba(255,255,255,.08)}
nav.top a[aria-current]{color:var(--on-dark);background:rgba(255,255,255,.12);font-weight:620}
.lang{font-size:13.5px;color:var(--on-dark-body);text-decoration:none;padding:6px 12px;
  border:1px solid rgba(255,255,255,.18);border-radius:999px;white-space:nowrap}
.lang:hover{color:var(--on-dark);border-color:rgba(255,255,255,.45)}
.cta{background:var(--accent);color:var(--on-dark);text-decoration:none;font-weight:650;
  font-size:14.5px;padding:9px 18px;border-radius:999px;white-space:nowrap}
.cta:hover{background:var(--accent-ink)}
/* The phone menu: hidden until the narrow breakpoint, then a three-line
   button that drops a panel of the same links. No script involved. */
.menu{display:none;position:relative}
.menu summary{list-style:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  gap:0;cursor:pointer;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)}
.menu summary::-webkit-details-marker{display:none}
.menu summary span{display:block;width:18px;height:2px;background:var(--on-dark);border-radius:2px;
  margin:2px 0}
.menu[open] summary{background:rgba(255,255,255,.18)}
.menu nav{position:absolute;right:0;top:48px;min-width:200px;padding:8px;border-radius:18px;
  background:rgba(15,17,23,.86);border:1px solid rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  box-shadow:0 24px 50px -20px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.12);display:flex;flex-direction:column}
.menu nav a{padding:11px 14px;border-radius:12px;color:var(--on-dark-body);text-decoration:none;font-size:15px}
.menu nav a:hover,.menu nav a[aria-current]{background:rgba(255,255,255,.1);color:var(--on-dark)}

/* ---------- shared section machinery ---------- */
.inner{max-width:var(--wide);margin:0 auto;padding:104px 24px}
.band.alt{background:var(--page)}
.center{text-align:center}
.center-col{display:flex;flex-direction:column;align-items:center}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 0}
.btns.center{justify-content:center}
.dlnote{margin:22px 0 0;font-size:14px;color:var(--on-dark-muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 22px;border-radius:999px;font-weight:650;font-size:15px;
  text-decoration:none;border:1px solid transparent;transition:transform .15s ease,background .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-lg{padding:17px 32px;font-size:17px}
.btn-lg.go::after{content:"\2192";font-weight:500}
.btn-accent,.btn-primary{background:var(--accent);color:var(--on-dark);
  box-shadow:0 16px 34px -16px rgba(93,95,239,.75)}
.btn-accent:hover,.btn-primary:hover{background:var(--accent-ink)}
.btn-ghost{background:var(--paper);color:var(--ink);border-color:var(--hair)}
.btn-ghost:hover{border-color:var(--muted)}
.arrow{font-weight:650;text-decoration:none;font-size:15.5px}
.arrow::after{content:" \2192"}
.arrow:hover{text-decoration:underline}
h2.sec{font-size:clamp(32px,4.4vw,58px);line-height:1.04;letter-spacing:-2px;
  margin:0 0 20px;font-weight:700;color:var(--ink)}
p.body{font-size:18px;line-height:1.68;color:var(--body);margin:0 0 16px;max-width:50ch}
p.body.center{margin-left:auto;margin-right:auto}
.lede{font-size:19px;line-height:1.65;color:var(--body);margin:0;max-width:60ch}
.lede.center{margin-left:auto;margin-right:auto}

/* ---------- hero ---------- */
/* Dark opening, two columns on wide screens: copy on the left, the fan of
   store cards on the right, the reference site's split (2026-09-20 04:4x).
   Sticky and exactly one viewport tall, so the white sheet slides over it;
   the fan is sized from the viewport height (--card) so the whole opening
   always fits in one screen — a taller-than-window sticky box pinned the
   headline and hid the cards (W11). A glow follows the pointer (--mx/--my,
   set by the script); without the script it sits on the right. */
.hero{position:sticky;top:var(--head);background:var(--night);color:var(--on-dark);padding:0 24px;
  overflow:hidden;min-height:calc(100svh - var(--head));display:flex;flex-direction:column;justify-content:center;
  --head:69px;--card:clamp(200px,calc((100svh - 300px) * .46),300px)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(55% 45% at 50% 0%,rgba(93,95,239,.30),transparent 70%),
    radial-gradient(30% 30% at 12% 40%,rgba(64,170,220,.12),transparent 70%)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(460px circle at var(--mx,74%) var(--my,46%),
    rgba(120,110,255,.72),rgba(151,116,255,.28) 40%,transparent 72%);
  filter:blur(10px)}
.hero .inner{position:relative;z-index:1;max-width:var(--wide);margin:0 auto;padding:56px 8px 40px;width:100%;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:72px;align-items:center;text-align:left}
.hero .hero-copy{align-items:flex-start}
/* Side by side with the cards the headline has half the width: two lines at
   ~64px, not 96. */
.hero .display{font-size:clamp(40px,5vw,72px)}
.hero .sub{margin:0}
.hero .btns.center{justify-content:flex-start}
.hero-short .inner{padding:72px 8px 72px}
.hero-copy{max-width:820px;display:flex;flex-direction:column;align-items:center}
.eyebrow{margin:0 0 22px;font-size:12.5px;font-weight:650;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--on-dark-muted)}
/* 700, not 600: on a dark ground a heavier cut holds its edge, and Segoe UI,
   SF and PingFang all ship real 700 glyphs. Keep each line of the headline
   under ~13 characters; shorten the words before reducing the size. */
.display{font-size:clamp(46px,7.6vw,96px);line-height:.98;letter-spacing:-3px;
  font-weight:700;margin:0 0 26px}
.sub{font-size:19px;line-height:1.62;color:var(--on-dark-body);margin:0 auto;max-width:46ch}
.sub.center{margin:0 auto}
.hero .btn-ghost{background:rgba(255,255,255,.1);color:var(--on-dark);border-color:rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(12px) saturate(180%);backdrop-filter:blur(12px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.hero .btn-ghost:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3)}
/* Round platform marks under the buttons, as the reference draws them. */
.plats{display:flex;gap:12px;margin:22px 0 0}
.plat{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:var(--on-dark);
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);
  transition:background .15s ease,transform .15s ease}
.plat:hover{background:rgba(255,255,255,.2);transform:translateY(-1px)}
.plat .i{width:24px;height:24px}
/* Chinese has no ascender/descender slack and no word spaces, so the tight
   tracking and tight leading that flatter the English display type make it
   cramped and unreadable. */
html[lang="zh-Hans"] .display{letter-spacing:0;line-height:1.14}
html[lang="zh-Hans"] h2.sec{letter-spacing:0;line-height:1.24}
html[lang="zh-Hans"] p.body,html[lang="zh-Hans"] .sub,html[lang="zh-Hans"] .lede{line-height:1.8}

/* The white sheet the rest of the page rides on. It starts where the hero
   ends; the rounded corners show the dark opening behind them. */
.sheet{position:relative;z-index:2;background:var(--paper);
  border-radius:44px 44px 0 0;padding-top:56px}

/* ---------- store-card fan ---------- */
/* The five App Store screenshots, 660x1434 each, shown at half size. The
   centre card stands upright and nearest; each step outward is set back,
   scaled down and tilted, the reference site's arrangement. The box is sized
   to the centre card; the wings overhang it and are clipped by the hero's
   edges, which is fine — the outer cards are meant to run off, and the lower
   ends disappear behind the sheet. Positions are classes s0–s4, which the
   script rotates; the transform transition is what makes a card glide from
   one seat to the next. */
.fanwrap{display:flex;flex-direction:column;align-items:center;margin-top:0;min-width:0}
/* Carousel controls: previous / next and one dot per card, the current one
   stretched. Hidden until the script is running, since they need it. */
.fanctl{display:none;align-items:center;justify-content:center;gap:16px;margin:0 0 6px}
html.js .fanctl{display:flex}
.fanbtn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);color:var(--on-dark);
  -webkit-backdrop-filter:blur(12px) saturate(180%);backdrop-filter:blur(12px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
  transition:background .15s ease}
.fanbtn:hover{background:rgba(255,255,255,.2)}
.fanbtn svg{width:20px;height:20px}
.dots{display:flex;align-items:center;gap:8px}
.dot{width:8px;height:8px;border-radius:4px;border:0;padding:0;cursor:pointer;
  background:rgba(255,255,255,.3);transition:width .3s ease,background .3s ease}
.dot:hover{background:rgba(255,255,255,.55)}
.dot[aria-selected="true"]{width:24px;background:var(--on-dark)}
.fan:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:40px}
.fan{position:relative;z-index:3;width:var(--card,330px);height:calc(var(--card,330px) * 717 / 330);margin:16px auto 0;flex:0 0 auto}
.shot{position:absolute;left:0;bottom:0;width:var(--card,330px);height:auto;border-radius:32px;
  transform-origin:50% 100%;cursor:pointer;
  transition:transform .75s cubic-bezier(.2,.7,.2,1),opacity .5s ease,box-shadow .4s ease;
  box-shadow:0 44px 90px -34px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.06)}
.shot:hover{box-shadow:0 54px 100px -34px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.14)}
.s2{z-index:5}
/* Three seats show in the column; s0 / s4 are the parked positions the
   rotation passes through, kept invisible so nothing is half-cut. */
.s1{z-index:4;transform:translateX(calc(var(--card,330px) * -.6)) translateY(24px) rotate(-6deg) scale(.9)}
.s3{z-index:4;transform:translateX(calc(var(--card,330px) * .6)) translateY(24px) rotate(6deg) scale(.9)}
.s0{z-index:3;opacity:0;pointer-events:none;transform:translateX(calc(var(--card,330px) * -1.2)) translateY(56px) rotate(-12deg) scale(.8)}
.s4{z-index:3;opacity:0;pointer-events:none;transform:translateX(calc(var(--card,330px) * 1.2)) translateY(56px) rotate(12deg) scale(.8)}

/* ---------- motion ---------- */
/* The opening rises into place on load; cards further down fade up as they
   scroll into view (the script adds .in). Hidden starting state is gated on
   html.js so without the script nothing is ever invisible. */
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.hero-copy>*{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
.hero-copy>:nth-child(2){animation-delay:.06s}
.hero-copy>:nth-child(3){animation-delay:.12s}
.hero-copy>:nth-child(4){animation-delay:.18s}
.hero-copy>:nth-child(5){animation-delay:.24s}
.hero-copy>:nth-child(6){animation-delay:.3s}
.fanwrap{animation:rise .9s .26s cubic-bezier(.2,.7,.2,1) both}
html.js .rv{opacity:0;transform:translateY(26px);
  transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
html.js .rv.in{opacity:1;transform:none}
.rv:nth-child(2){transition-delay:.06s}
.rv:nth-child(3){transition-delay:.12s}
.rv:nth-child(4){transition-delay:.18s}
.rv:nth-child(5){transition-delay:.24s}
.rv:nth-child(6){transition-delay:.3s}
html.js .fcard.in,html.js .dlcard.in{transition:transform .25s ease,box-shadow .25s ease}
html.js .fcard.in:hover,html.js .dlcard.in:hover{transform:translateY(-4px);box-shadow:0 24px 50px -30px rgba(var(--shade),.45)}

/* ---------- stack tile ---------- */
.tile.sky{background:var(--sky)}
.layers{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.layers li{display:flex;gap:14px;align-items:flex-start;background:rgba(255,255,255,.72);
  border-radius:20px;padding:14px 16px}
.lico{width:38px;height:38px;border-radius:12px;flex:0 0 auto;display:grid;place-items:center;
  background:var(--paper);color:var(--accent);box-shadow:0 6px 16px -12px rgba(var(--shade),.4)}
.lico .i{width:19px;height:19px}
.ltx{display:flex;flex-direction:column;gap:2px;min-width:0}
.ltx b{font-size:15px;font-weight:680;color:var(--ink);letter-spacing:-.2px}
.ltx span{font-size:13.8px;line-height:1.55;color:var(--body)}

/* ---------- download page ---------- */
.dlgrid{display:grid;gap:18px;grid-template-columns:repeat(4,1fr);align-items:start}
.dlcard{background:var(--page);border-radius:28px;padding:28px 26px 22px;border:2px solid transparent;min-width:0}
.dlcard.on{border-color:var(--accent);background:var(--accent-soft)}
.dlcard h2{margin:0 0 14px;font-size:24px;font-weight:700;letter-spacing:-.6px;color:var(--ink)}
.dlrows{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.dlrows li{border-bottom:1px solid var(--hair)}
.dlrows a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 2px;
  color:var(--ink);text-decoration:none}
.dlrows a:hover b{text-decoration:underline}
.dlrows .rl{display:flex;flex-direction:column;gap:2px;min-width:0}
.dlrows b{font-size:16px;font-weight:650}
.dlrows small{font-size:12.5px;color:var(--muted)}
.dlrows .i{width:20px;height:20px;flex:0 0 auto;color:var(--accent-ink)}
.dlcard .pnote{margin:14px 0 0;font-size:13px;line-height:1.55;color:var(--muted)}
.sha{margin:10px 0 0;font-size:12px;line-height:1.5;color:var(--muted);word-break:break-all}
.sha code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.dlfoot{margin:36px auto 0;max-width:72ch;text-align:center;font-size:14.5px;line-height:1.65;color:var(--body)}
.plinks{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.plinks a{display:inline-block;padding:9px 16px;border-radius:999px;background:var(--paper);
  border:1px solid var(--hair);color:var(--ink);text-decoration:none;font-weight:650;font-size:14px}
.plinks a:hover{border-color:var(--accent)}

/* ---------- trust strip ---------- */
.strip .inner{padding:0 24px 8px;display:grid;gap:16px;grid-template-columns:repeat(4,1fr)}
.strip .inner>div{display:flex;gap:14px;align-items:flex-start;background:var(--page);
  border-radius:22px;padding:18px 20px}
.strip .ico{width:42px;height:42px;border-radius:13px;flex:0 0 auto;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent)}
.strip .ico .i{width:21px;height:21px}
.strip .tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.strip b{display:block;font-size:15px;font-weight:660;letter-spacing:-.2px;color:var(--ink)}
.strip .tx span{font-size:13px;color:var(--muted);line-height:1.45}

/* ---------- tiles ---------- */
/* Four large tinted cards, two of them full width. Each carries one claim and
   the object that proves it — the reference site's card idiom, applied to our
   own material. */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:56px}
.tile{border-radius:34px;padding:46px;display:flex;flex-direction:column;gap:30px;min-width:0}
.tile.wide{grid-column:1/-1;display:grid;grid-template-columns:.92fr 1.08fr;align-items:center;gap:48px}
.tile.lav{background:var(--lav)}
.tile.butter{background:var(--butter)}
.tile.mint{background:var(--mint)}
.tile.rose{background:var(--rose)}
.tile h3{font-size:clamp(26px,2.7vw,38px);line-height:1.08;letter-spacing:-1.2px;
  margin:0 0 16px;font-weight:700;color:var(--ink)}
.tile p{font-size:16.5px;line-height:1.66;color:var(--body);margin:0 0 12px;max-width:52ch}
.tile .tech{font-size:13px;color:var(--muted);letter-spacing:.3px;font-weight:600}
.tile .arrow{color:var(--accent-ink)}
.tile-copy{min-width:0}

/* The device-to-device diagram in the encryption tile. */
.flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:10px;align-items:stretch;min-width:0}
.node{background:rgba(255,255,255,.62);border-radius:24px;padding:14px 12px 14px;text-align:center;
  display:flex;flex-direction:column;min-width:0}
.nlab{display:block;font-size:13px;font-weight:660;color:var(--ink);margin-bottom:10px}
.mini{flex:1;background:var(--paper);border-radius:18px;padding:12px 10px;display:flex;flex-direction:column;
  gap:6px;min-height:124px;justify-content:center;
  box-shadow:0 10px 24px -18px rgba(var(--shade),.35)}
.mb{font-size:12px;line-height:1.35;padding:6px 9px;border-radius:12px;max-width:88%;text-align:left}
.mb.in{background:#eef0f4;color:var(--ink);align-self:flex-start}
.mb.out{background:var(--sent);color:var(--sent-ink);align-self:flex-end}
.mini.cipher{align-items:center;gap:8px}
.mini.cipher .i{width:26px;height:26px;color:var(--accent)}
.mini.cipher code{font:600 12px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--body);
  word-break:break-all;letter-spacing:.3px}
.mini.cipher small{font-size:12px;color:var(--muted)}
.farrow{align-self:center;color:var(--muted);font-size:22px;line-height:1}

/* ---------- illustration cards ---------- */
.art{display:grid;place-items:center}
.artcard{width:100%;background:var(--paper);border-radius:28px;padding:30px 30px 26px;
  box-shadow:0 26px 60px -34px rgba(var(--shade),.35)}
.band.alt .artcard{border:1px solid var(--hair)}
.artcard h3,.artcard h4{margin:0;font-size:12px;font-weight:660;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--muted)}
.handle{font-size:44px;font-weight:700;letter-spacing:-1.8px;margin:14px 0 2px;color:var(--ink)}
.bignum{font-size:92px;font-weight:700;letter-spacing:-4.5px;margin:12px 0 0;
  line-height:.9;color:var(--accent)}
.artnote{font-size:14px;color:var(--muted);margin:8px 0 18px}
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--page);
  border:1px solid var(--hair);border-radius:999px;padding:8px 15px;
  font-size:13px;color:var(--body);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.chks{margin-top:18px;border-top:1px solid var(--hair)}
.chk{display:flex;align-items:flex-start;gap:11px;padding:11px 0;
  border-bottom:1px solid var(--hair);font-size:14px;color:var(--body)}
.chk:last-child{border-bottom:0}
.chk .i{width:19px;height:19px;flex:0 0 auto;color:var(--accent);margin-top:2px}
.sn{display:grid;grid-template-columns:repeat(3,1fr);gap:11px 16px;margin:20px 0 22px;
  font:600 19px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.6px;color:var(--ink);text-align:center}
.verified{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--body);
  border-top:1px solid var(--hair);padding-top:14px}
.verified .i{width:19px;height:19px;color:var(--accent);flex:0 0 auto}

/* ---------- comparison ---------- */
.cmp{margin-top:44px;border-radius:28px;background:var(--paper);border:1px solid var(--hair);overflow:hidden}
.cmp table{width:100%;border-collapse:collapse;font-size:16px}
.cmp th,.cmp td{padding:18px 26px;text-align:left;border-bottom:1px solid var(--hair);vertical-align:middle}
.cmp tbody tr:last-child td{border-bottom:0}
.cmp th{font-size:12.5px;text-transform:uppercase;letter-spacing:.9px;color:var(--muted);
  font-weight:660;background:var(--page)}
.cmp th.us{color:var(--accent-ink)}
.cmp td:first-child{font-weight:650;color:var(--ink)}
.cmp td.no{color:var(--muted)}
.cmp td.us{color:var(--ink);font-weight:650;white-space:nowrap}
.cmp td.us .i{width:18px;height:18px;color:var(--accent);display:inline-block;vertical-align:-4px;margin-right:9px}

/* ---------- feature grid ---------- */
/* Fixed at three columns rather than auto-fit: there are six cards, and letting
   them flow into four would leave an orphan row of two. */
.fgrid{display:grid;gap:18px;grid-template-columns:repeat(3,1fr);margin-top:52px}
.fgrid.four{grid-template-columns:repeat(4,1fr)}
.fcard{background:var(--page);border-radius:26px;padding:28px}
.fcard .ico{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;
  background:var(--paper);color:var(--accent);margin-bottom:18px;
  box-shadow:0 8px 20px -14px rgba(var(--shade),.4)}
.fcard .ico .i{width:22px;height:22px}
.fcard h3{margin:0 0 8px;font-size:18px;font-weight:680;letter-spacing:-.3px;color:var(--ink)}
.fcard p{margin:0;font-size:15px;line-height:1.62;color:var(--body)}

/* ---------- platform grid ---------- */
.pgrid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(266px,1fr));margin-top:48px}
.pcard{background:var(--paper);border:1px solid var(--hair);border-radius:28px;padding:30px}
.pcard.ready{border-color:transparent;box-shadow:0 22px 50px -34px rgba(var(--shade),.45)}
.pico{width:54px;height:54px;border-radius:17px;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent-ink);margin-bottom:18px}
.pico .i{width:26px;height:26px}
.pcard h3{margin:0 0 4px;font-size:22px;font-weight:700;letter-spacing:-.5px;color:var(--ink)}
.pnote{margin:0 0 16px;font-size:13px;color:var(--muted)}
.pcard p{color:var(--body);font-size:14.8px}
.pcard p:last-child{margin-bottom:0}
/* The cards are ~270px wide at three across; the full-size button wraps there. */
.pcard .btn{padding:12px 18px;font-size:14.5px;text-align:center}

/* Closing panel: the dark slab again, so the page ends the way it opened. */
.closer{max-width:var(--wide);margin:0 auto;padding:0 24px 40px}
.closer .inner{max-width:none;margin:0;border-radius:36px;padding:92px 52px 96px;
  color:var(--on-dark);position:relative;overflow:hidden;
  background:
    radial-gradient(70% 90% at 80% 10%,rgba(160,120,255,.55),transparent 62%),
    radial-gradient(60% 80% at 15% 90%,rgba(64,170,220,.35),transparent 60%),
    linear-gradient(150deg,#5d5fef 0%,#4648d6 55%,#2f2f8f 100%)}
.closer h2.sec{color:var(--on-dark)}
/* Three short clauses split by full stops: break only there, never inside
   a word ("一个用户 / 名。" on a phone). Each clause fits any width we serve. */
html[lang="zh-Hans"] .closer h2.sec{word-break:keep-all;overflow-wrap:normal}
.closer .lede{color:rgba(255,255,255,.82)}
.closer .btn-accent{background:var(--paper);color:var(--accent-ink);box-shadow:0 18px 40px -18px rgba(0,0,0,.5)}
.closer .btn-accent:hover{background:#f1f1ff}
.closer .btn-ghost{background:rgba(255,255,255,.1);color:var(--on-dark);border-color:rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(12px) saturate(180%);backdrop-filter:blur(12px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.closer .btn-ghost:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.4)}

/* ---------- document pages ---------- */
.doc{max-width:var(--doc);margin:0 auto;padding:48px 24px 88px}
.doc h1{font-size:clamp(30px,4.2vw,42px);line-height:1.16;letter-spacing:-1.3px;
  margin:0 0 14px;font-weight:700;color:var(--ink)}
.doc h2{font-size:19.5px;letter-spacing:-.3px;margin:38px 0 9px;font-weight:650;color:var(--ink)}
/* On the combined legal page the two documents' own headings sit one level
   down; the demoted title keeps a title's size, its sections a section's. */
.doc hr+h2,.doc hr~h2{font-size:clamp(26px,3.4vw,34px);letter-spacing:-1px;margin:8px 0 14px;font-weight:700}
.doc h3{font-size:19.5px;letter-spacing:-.3px;margin:38px 0 9px;font-weight:650;color:var(--ink)}
.doc p,.doc li,.doc td{color:var(--body)}
.doc .lede{font-size:18px;line-height:1.68;color:var(--body);margin:0 0 8px}
.doc .meta{font-size:13px;color:var(--muted);margin:0 0 8px}
.doc .muted{color:var(--muted);font-size:14px}
.doc ul,.doc ol{padding-left:23px;margin:11px 0}
.doc li{margin:7px 0}
.doc hr{border:0;border-top:1px solid var(--hair);margin:48px 0}
.doc .grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));margin:24px 0}
.doc .card{background:var(--page);border:1px solid var(--hair);border-radius:18px;padding:22px}
.doc .card h2{margin:0 0 7px;font-size:17px;color:var(--accent-ink);font-weight:650}
.doc .card p{margin:0 0 9px}
.doc .card p:last-child{margin-bottom:0}
.doc table{width:100%;border-collapse:collapse;margin:20px 0;font-size:15px}
.doc th,.doc td{text-align:left;padding:12px 12px;border-bottom:1px solid var(--hair);vertical-align:top}
.doc th{color:var(--muted);font-weight:640;font-size:12.5px;text-transform:uppercase;letter-spacing:.5px}
.doc .btns{margin:26px 0 0}

/* Download page: the split sections it still uses. */
.split{display:grid;grid-template-columns:1.02fr .98fr;gap:60px;align-items:center}
.split.rev .art{order:-1}
.split .artcard{max-width:430px;border:1px solid var(--hair)}

/* ---------- footer ---------- */
.site-foot{background:var(--night);color:var(--on-dark-body)}
.foot-inner{max-width:var(--wide);margin:0 auto;padding:68px 24px 44px}
.foot-top{display:grid;grid-template-columns:1.1fr 2fr;gap:48px;align-items:start}
.foot-brand{display:flex;flex-direction:column;align-items:flex-start;gap:14px;max-width:38ch}
.foot-brand .brand{color:var(--on-dark);margin:0}
.foot-brand p{margin:0;font-size:14.5px;line-height:1.6;color:var(--on-dark-muted)}
.foot-plats{display:flex;gap:10px}
.foot-plats .plat{width:44px;height:44px}
.foot-plats .plat .i{width:20px;height:20px}
.cols{display:grid;gap:26px;grid-template-columns:repeat(5,1fr)}
.cols h2{font-size:12px;color:var(--on-dark);margin:0 0 12px;font-weight:660;
  text-transform:uppercase;letter-spacing:.9px}
.cols ul{list-style:none;padding:0;margin:0}
.cols li{margin:7px 0;font-size:14.2px}
.cols a{color:var(--on-dark-body);text-decoration:none}
.cols a:hover{color:var(--on-dark);text-decoration:underline}
.fine{color:var(--on-dark-muted);font-size:13px;margin:44px 0 0;padding-top:24px;
  border-top:1px solid rgba(255,255,255,.08)}
.fine a{color:var(--on-dark-muted)}

/* ---------- responsive ---------- */
/* A window too short for copy + fan side by side: let the opening scroll
   like any other section rather than pin and hide its lower half. */
@media(max-height:640px){
  .hero{position:relative;min-height:0}
}
@media(max-width:1000px){
  /* One column again: copy centred, the fan under it, the opening scrolls. */
  .hero{position:relative;top:auto;min-height:0;--card:300px}
  .hero .inner{display:flex;flex-direction:column;align-items:center;text-align:center;padding:72px 8px 0}
  .hero .hero-copy{align-items:center}
  .hero .display{font-size:clamp(44px,7.6vw,80px)}
  .hero .sub{margin:0 auto}
  .hero .btns.center{justify-content:center}
  .fanwrap{margin-top:40px}
  .s0,.s4{display:none}
  .sheet{padding-top:48px}
  .dlgrid{grid-template-columns:repeat(2,1fr)}
  .strip .inner{grid-template-columns:repeat(2,1fr)}
  .tiles{grid-template-columns:1fr}
  .tile.wide{grid-template-columns:1fr;gap:30px}
  .split{grid-template-columns:1fr;gap:34px}
  .split.rev .art{order:0}
  .fgrid,.fgrid.four{grid-template-columns:repeat(2,1fr)}
  .inner{padding:72px 24px}
  .foot-top{grid-template-columns:1fr;gap:36px}
  .cols{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:720px){
  .bar{gap:8px;padding:10px 14px}
  .brand{margin-right:auto}
  /* The row of links and the language pill move into the menu. */
  nav.top,.lang{display:none}
  .menu{display:block}
  .cta{padding:9px 14px;font-size:14px}
  .inner{padding:56px 18px}
  .hero{padding:0 14px}
  .hero .inner{padding:44px 4px 0}
  .hero-short .inner{padding:44px 4px 44px}
  .display{letter-spacing:-1.8px}
  .sub{font-size:17px}
  .btns{width:100%;flex-direction:column;align-items:stretch}
  .btns .btn{width:100%}
  /* On a phone the fan becomes a swipeable row: every card upright, snapping
     to centre, the way the store itself shows them. */
  /* Phone: no sticky stage. Copy, then the swipe strip, then the sheet. */
  .hero{overflow:visible;position:relative;min-height:0;display:block;justify-content:normal}
  .hero::after{display:none}
  .site-head.scrolled .bar{margin:8px 10px;padding:8px 10px;border-radius:30px}
  .fanwrap{align-self:stretch;margin-top:32px}
  .fan{width:auto;align-self:stretch;height:auto;margin:16px -18px 0;display:flex;gap:14px;overflow-x:auto;
    padding:0 calc(50vw - 130px) 40px;scroll-snap-type:x mandatory;scrollbar-width:none;
    -webkit-overflow-scrolling:touch}
  .fan::-webkit-scrollbar{display:none}
  .shot,.s0,.s1,.s2,.s3,.s4{position:static;display:block;flex:0 0 auto;width:260px;transform:none;
    opacity:1;pointer-events:auto;
    scroll-snap-align:center;border-radius:28px;box-shadow:0 24px 50px -24px rgba(0,0,0,.7)}
  .sheet{padding-top:36px;border-radius:30px 30px 0 0}
  .dlgrid{grid-template-columns:1fr}
  .layers li{padding:12px 14px}
  .strip .inner{grid-template-columns:1fr;gap:10px}
  .tile{padding:28px 24px;border-radius:26px;gap:24px}
  .tile.wide{gap:24px}
  .flow{grid-template-columns:1fr}
  .farrow{transform:rotate(90deg);justify-self:center}
  .fgrid,.fgrid.four{grid-template-columns:1fr}
  .cmp th,.cmp td{padding:13px 14px;font-size:14px}
  .cmp td.us{white-space:normal}
  .closer{padding:0 14px 30px}
  .closer .inner{padding:60px 22px 64px;border-radius:26px}
  .doc{padding:36px 18px 64px}
  .foot-inner{padding:52px 18px 38px}
  .cols{grid-template-columns:1fr 1fr;gap:20px}
  /* Same rhythm (31px per row), but the tappable box grows from 17px to 27px. */
  .cols li{margin:2px 0}
  .cols a{display:inline-block;padding:5px 0}
  .bignum{font-size:64px}
  .sn{font-size:14.5px;gap:8px 10px}
}
@media(max-width:400px){
  .hero .inner{padding:36px 2px 0}
  .shot,.s0,.s1,.s2,.s3,.s4{width:232px}
  .fan{padding:0 calc(50vw - 116px) 36px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn,.plat{transition:none}
}
/* Reduce Transparency on: every glass surface goes solid, as the platform does. */
@media(prefers-reduced-transparency:reduce){
  .site-head,.site-head.scrolled .bar,.menu nav,.hero .btn-ghost,.closer .btn-ghost,.fanbtn{
    -webkit-backdrop-filter:none;backdrop-filter:none}
  .site-head{background:rgba(11,12,16,.98)}
  .site-head.scrolled .bar,.menu nav{background:rgba(15,17,23,.98)}
  .hero .btn-ghost,.closer .btn-ghost,.fanbtn{background:rgba(255,255,255,.16)}
}