*,*::before,*::after{box-sizing:border-box}
/* Every colour here is sampled from the product itself: the slate and the near
   black come from the app icon, the washes and the pastels are the app's own
   canvas, cards and avatars. Nothing is invented, so the site and the app read
   as one thing. */
:root{
  /* The page sits on warm cream, not white: it is the app's own card colour and
     it stops a light layout from reading as bare documentation. */
  --page:#fbf5ec; --paper:#fff; --wash:#f7f8fa; --hair:#e6e0d5;
  --slate:#3e424d; --ink:#181a21;
  /* Device-mockup colours, sampled from the app's own screenshots rather than
     guessed. See the phone mockup block for which screenshot each came from. */
  --cream:#f6f1e8; --lav-ink:#d4c9d4;
  --sent:#545863; --sent-ink:#fff; --sent-dim:#c2c5cd;
  --bar:#edeeef; --field:#fcfdff;
  /* Chat-list chrome and the app's avatar palette, sampled from
     shots/audit/70-light-chatlist.png. */
  --cl-search:#e8e8eb; --cl-badge:#bec1ca;
  --av-olive:#8c8e7b; --av-warm:#bdbeb2; --av-cool:#dfe3e6;
  --text:#181a21; --body:#474d5b; --muted:#6f7686;
  --on-dark:#fff; --on-dark-body:#d2d6df; --on-dark-muted:#9aa1af;
  --doc:760px; --wide:1180px;
}
/* The header is sticky, so anchored jumps need to clear it. */
html{-webkit-text-size-adjust:100%;background:var(--page);scroll-behavior:smooth;
  scroll-padding-top:76px}
body{
  margin:0;background:var(--page);color:var(--text);overflow-x:hidden;
  font:16px/1.7 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",
    "PingFang SC","Hiragino Sans GB","Microsoft YaHei",Roboto,sans-serif;
}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:12px;top:12px;z-index:20;background:var(--slate);color:var(--on-dark);
  padding:10px 16px;border-radius:10px;text-decoration:none}
:focus-visible{outline:2px solid var(--slate);outline-offset:3px;border-radius:4px}
a{color:var(--slate)}
img,svg{display:block;max-width:100%}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:15;background:#fbf5ecf2;
  border-bottom:1px solid transparent}
.bar{max-width:var(--wide);margin:0 auto;padding:13px 24px;
  display:flex;align-items:center;gap:14px}
.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}
.brand b{font-size:19px;font-weight:660;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(--body)}
nav.top a:hover{color:var(--ink);background:#f2ebde}
nav.top a[aria-current]{color:var(--ink);background:#efe7d7;font-weight:620}
.lang{font-size:13.5px;color:var(--body);text-decoration:none;padding:6px 12px;
  border:1px solid #e0d8c9;border-radius:999px;white-space:nowrap}
.lang:hover{color:var(--ink);border-color:var(--muted)}
.cta{background:var(--slate);color:var(--on-dark);text-decoration:none;font-weight:640;
  font-size:14.5px;padding:9px 18px;border-radius:999px;white-space:nowrap}
.cta:hover{background:var(--ink)}

/* ---------- shared section machinery ---------- */
/* Two backgrounds only: white, and the cream page showing through. The app's
   cooler card colours (mint, lavender) are the wrong temperature next to the
   cream at full-section scale, so they are kept to small elements. */
.band{border-bottom:1px solid var(--hair)}
.band.paper{background:var(--paper)}
.inner{max-width:var(--wide);margin:0 auto;padding:112px 24px}
.split{display:grid;grid-template-columns:1.02fr .98fr;gap:60px;align-items:center}
.split.rev .art{order:-1}
.center{text-align:center}
.center-col{display:flex;flex-direction:column;align-items:center}
.btns{display:flex;flex-wrap:wrap;gap:13px;margin:26px 0 0}
.btns.center{justify-content:center}
.dlnote{margin:20px 0 0;font-size:15px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 22px;border-radius:12px;font-weight:640;font-size:15px;
  text-decoration:none;border:1px solid transparent;transition:transform .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-lg{padding:15px 28px;font-size:16px;border-radius:999px}
.btn-primary{background:var(--slate);color:var(--on-dark);
  box-shadow:0 12px 26px -14px rgba(24,26,33,.5)}
.btn-primary:hover{background:var(--ink)}
.btn-ghost{background:var(--paper);color:var(--ink);border-color:var(--hair)}
.btn-ghost:hover{border-color:var(--muted)}
.arrow{font-weight:620;text-decoration:none;font-size:15.5px}
.arrow::after{content:" \2192"}
.arrow:hover{text-decoration:underline}
/* 52px, not 58px: in a split section the heading column is only ~525-547px, and
   at 58px an ordinary line ("An email address gets you in.") measures 722px and
   wraps, so a two-line heading silently became four with "you." orphaned on a
   line of its own. Keep each line either side of the <br> under ~22 characters. */
h2.sec{font-size:clamp(30px,3.8vw,52px);line-height:1.08;letter-spacing:-1.5px;
  margin:0 0 24px;font-weight:600;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}

/* ---------- hero ---------- */
/* Light and open, with the devices sitting in a soft pool of colour rather than
   on a dark slab. The dark panel it replaces gave the phones contrast for free
   but made the first screen feel like a boxed advert; the reference site gets
   its depth from the glow behind the hardware instead, which leaves the page one
   continuous surface.
   Devices first in the source order, so they land on the left as they do there. */
.hero{max-width:var(--wide);margin:0 auto;padding:8px 24px 0}
.hero .inner{max-width:none;margin:0;
  display:grid;grid-template-columns:1.02fr .98fr;gap:24px;align-items:center;
  padding:40px 8px 56px}
.hero-short .inner{display:block;padding:76px 8px 40px;text-align:center}
.eyebrow{margin:0 0 20px;font-size:12.5px;font-weight:640;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--muted)}
/* Keep each line of the hero headline under ~13 characters. The copy column is
   about 540px wide, and at 80px a line of ordinary length ("Private messaging.")
   measures 640px and silently wraps, turning two deliberate lines into four
   ragged ones. Shorten the words before reducing the size.
   600, not 500: Segoe UI ships no 500 weight, so on Windows a 500 request falls
   back to Regular and the headline renders visibly thinner than intended. 600
   has real glyphs in Segoe UI, SF and PingFang alike. It is also where a system
   UI face lands the same optical density that a purpose-built marketing face
   reaches at 400 — matching the reference's look, not its stated number. */
.display{font-size:clamp(42px,6.4vw,80px);line-height:1;letter-spacing:-2.2px;
  font-weight:600;margin:0 0 26px}
.sub{font-size:18px;line-height:1.62;color:var(--body);margin:0;max-width:42ch}
.sub.center{margin:0 auto}
/* 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{line-height:1.8}

/* ---------- phone mockup ---------- */
/* Two devices, both upright, the nearer one overlapping the further one from the
   left — the reference site's arrangement. Both are faithful redraws of the app's
   own screens: the chat list in front, a conversation behind.
   The stage is a fixed box rather than a flex row because the two phones overlap;
   its size is just the union of their footprints, worked out from the constants
   below (front 288x578 at 0,0 and back scaled to .93 from y=34).
   It shrinks by scaling the whole box rather than by resizing the phones, so the
   interface inside keeps its proportions instead of growing relative to the
   hardware. The margins cancel the layout space the transform does not reclaim. */
.stage{--s:1;--sw:534px;--sh:578px;
  position:relative;width:var(--sw);height:var(--sh);flex:0 0 auto;justify-self:center;
  transform:scale(var(--s));transform-origin:50% 0;
  margin:0 calc((var(--s) - 1) * var(--sw) / 2) calc((var(--s) - 1) * var(--sh))}
/* The pool of light the devices sit in, attached to the stage so it tracks them
   at every width. Only tints the app itself uses — its lavender and olive avatar
   colours over its cream card — so the first screen is coloured by the product
   rather than by a palette invented for the website. The near-white core is what
   keeps the phones legible against it.
   The box is deliberately much larger than the stage and the two coloured centres
   sit outside the phone silhouettes. Tucked in tight they were both behind a
   phone, so all that escaped was the faint outer edge of each gradient and the
   glow read as nothing at all.
   Because those two centres sit near the edge of the layer, their gradients were
   still carrying colour where the box ended, and a background is painted only
   inside its own box: the pool acquired a straight vertical edge on the right and
   a straight horizontal one along the top. Masking the whole layer with an
   ellipse that reaches zero at the box's own boundary means no gradient can be
   cut off by it, whatever gets moved around inside later. */
.stage::before{content:"";position:absolute;z-index:0;pointer-events:none;
  inset:-30% -34%;
  background:
    radial-gradient(30% 30% at 50% 48%,rgba(255,255,255,.9),transparent 74%),
    radial-gradient(42% 42% at 78% 18%,rgba(203,188,206,.78),transparent 70%),
    radial-gradient(44% 44% at 20% 80%,rgba(140,142,123,.5),transparent 70%),
    radial-gradient(50% 48% at 50% 50%,rgba(246,241,232,.95),transparent 76%);
  -webkit-mask-image:radial-gradient(closest-side ellipse at 50% 50%,#000 58%,transparent);
  mask-image:radial-gradient(closest-side ellipse at 50% 50%,#000 58%,transparent)}
.phone{position:absolute;
  width:288px;height:578px;border-radius:50px;padding:9px;
  background:linear-gradient(150deg,#e6e8ee,#a8adb9 46%,#7e838f);
  box-shadow:0 52px 90px -34px rgba(10,12,18,.5),0 0 0 1px rgba(255,255,255,.35)}
.phone-front{left:0;top:0;z-index:2}
/* Smaller and set down a little, so it reads as further away rather than as a
   duplicate pasted alongside — but overlapped by only ~22px, which is the front
   phone's bezel. A deeper overlap looked like more of a composition and then cut
   every line of the conversation behind it in half, which reads as a bug rather
   than as depth. The reference site can overlap hard because its rear screen is
   a photograph; a thread has to stay readable. */
.phone-back{left:266px;top:34px;z-index:1;transform:scale(.93);transform-origin:0 0}
.screen{height:100%;border-radius:41px;background:var(--wash);overflow:hidden;
  display:flex;flex-direction:column;color:var(--ink)}
.phone .g{width:16px;height:16px;flex:0 0 auto}

/* ---------- phone: chat list ---------- */
/* The account avatar on the left, the camera and compose controls in one white
   pill on the right — the app puts them in a floating pill, not on a bar. */
.cl-top{display:flex;align-items:center;justify-content:space-between;
  padding:6px 14px 0;color:var(--slate)}
.cl-me{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:var(--av-warm);color:#4a4c42;font-size:10.5px;font-weight:700}
.cl-tools{display:flex;align-items:center;gap:13px;background:var(--field);
  border-radius:999px;padding:7px 12px;box-shadow:0 1px 3px rgba(24,26,33,.08)}
.cl-tools .g{width:15px;height:15px}
.cl-title{margin:10px 0 8px;padding:0 15px;font-size:25px;font-weight:700;
  letter-spacing:-.9px;color:var(--ink)}
.cl-search{display:flex;align-items:center;gap:7px;margin:0 14px;
  background:var(--cl-search);border-radius:11px;padding:8px 11px;
  font-size:12px;color:var(--muted)}
.cl-search .g{width:13px;height:13px}

.cl-rows{flex:1;padding:6px 0 0;overflow:hidden}
/* The separator starts after the avatar, as it does in the app, so the avatars
   read as one column. */
.cl-row{display:flex;align-items:center;gap:10px;padding:9px 14px;
  box-shadow:inset 0 -1px 0 var(--wash)}
.cl-row+.cl-row .cl-mid{border-top:0}
.cl-av{width:34px;height:34px;border-radius:50%;flex:0 0 auto;
  display:grid;place-items:center;font-size:13px;font-weight:700}
.cl-av .g{width:17px;height:17px}
.cl-av.lav{background:var(--lav-ink);color:#5b5266}
.cl-av.olive{background:var(--av-olive);color:#f3f4ee}
.cl-av.warm{background:var(--av-warm);color:#4a4c42}
.cl-av.cool{background:var(--av-cool);color:var(--slate)}
.cl-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cl-name{display:flex;align-items:center;gap:4px;min-width:0}
.cl-name b{font-size:12.8px;font-weight:660;letter-spacing:-.2px;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-name .vbadge{width:10px;height:10px}
.cl-prev{font-size:11.4px;color:var(--muted);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.cl-meta{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.cl-meta time{font-size:9.5px;color:var(--muted)}
.cl-meta .tick{color:var(--muted);margin:0}
.cl-badge{min-width:16px;height:16px;border-radius:999px;background:var(--cl-badge);
  color:var(--paper);font-size:9.5px;font-weight:700;
  display:grid;place-items:center;padding:0 4px}

/* The floating white tab bar the app draws over the list. */
.cl-tabs{display:flex;justify-content:space-around;align-items:center;
  margin:0 11px 13px;background:var(--field);border-radius:22px;padding:7px 4px 6px;
  box-shadow:0 3px 12px -4px rgba(24,26,33,.16),0 1px 2px rgba(24,26,33,.06)}
.cl-tab{display:flex;flex-direction:column;align-items:center;gap:2px;
  color:var(--muted);font-size:8.5px;font-weight:600}
.cl-tab .g{width:17px;height:17px}
.cl-tab.on{color:var(--ink)}

.ios-status{display:flex;align-items:center;justify-content:space-between;
  padding:11px 22px 4px;font-size:12.5px;font-weight:640;letter-spacing:-.2px}
.island{width:66px;height:19px;border-radius:999px;background:#0b0d12}
.signal{width:38px;height:9px;border-radius:2px;background:var(--ink);opacity:.72}

/* The header sits on the thread background rather than on a white bar, and the
   controls are floating white circles and one white pill. */
.ios-nav{display:flex;align-items:center;gap:7px;padding:4px 11px 8px;color:var(--slate)}
.navbtn{width:27px;height:27px;border-radius:50%;background:var(--paper);flex:0 0 auto;
  display:grid;place-items:center;box-shadow:0 1px 2px rgba(24,26,33,.07)}
.navbtn .g{width:12px;height:12px}
.av{width:27px;height:27px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  font-size:11px;font-weight:700;color:#5b5266;background:var(--lav-ink)}
.who{flex:1;min-width:0;display:flex;align-items:center;gap:4px}
.who b{font-size:13px;letter-spacing:-.2px;color:var(--ink)}
.vbadge{width:11px;height:11px;flex:0 0 auto;color:var(--ink)}
.acts{display:flex;gap:11px;align-items:center;flex:0 0 auto;
  background:var(--paper);border-radius:999px;padding:6px 11px;
  box-shadow:0 1px 2px rgba(24,26,33,.07)}
.acts .g{width:14px;height:14px}

/* Anchored to the bottom so that when the thread is taller than the screen the
   oldest message is the one cut off, the way a real conversation looks. */
.sc-body{flex:1;padding:12px 11px;display:flex;flex-direction:column;
  justify-content:flex-end;gap:6px;overflow:hidden}
/* The "new messages" rule the app draws above the unread run. */
.newmsg{align-self:stretch;display:flex;align-items:center;gap:8px;margin:2px 0 2px;
  color:var(--muted);font-size:9.5px}
.newmsg::before,.newmsg::after{content:"";flex:1;height:1px;background:var(--hair)}
.newmsg span{background:var(--paper);border-radius:999px;padding:2px 9px;font-weight:600}
.day{align-self:center;font-size:9.5px;font-weight:640;color:var(--muted);margin:2px 0 4px}
/* Evenly rounded, no tail notch, and the sent bubble is the app's dark slate
   with white text — not a light grey. */
.bub{position:relative;max-width:80%;padding:7px 11px;border-radius:16px;
  font-size:12.4px;line-height:1.4;display:flex;align-items:flex-end;gap:6px}
.bub.in{background:var(--paper);color:var(--ink);align-self:flex-start;
  box-shadow:0 1px 2px rgba(24,26,33,.07)}
.bub.out{background:var(--sent);color:var(--sent-ink);align-self:flex-end}
.bub time{font-size:8.5px;color:var(--muted);flex:0 0 auto;margin-bottom:1px}
.bub.out time{color:var(--sent-dim)}
.tick{width:12px;height:9px;flex:0 0 auto;color:var(--sent-dim);margin-bottom:3px}

/* Composer: the plus and the microphone sit outside the field, as in the app. */
.sc-input{display:flex;align-items:center;gap:9px;padding:9px 12px 16px;
  background:var(--bar);color:var(--slate)}
.sc-input .plus{width:19px;height:19px}
.sc-input .field{flex:1;display:flex;align-items:center;justify-content:space-between;
  gap:8px;background:var(--field);border-radius:999px;padding:8px 11px;
  font-size:12px;color:var(--muted);box-shadow:0 1px 2px rgba(24,26,33,.06)}

/* ---------- trust strip ---------- */
/* Transparent, so it reads as a caption under the hero panel rather than as
   another band competing with the white section below it. */
.strip{border-bottom:1px solid var(--hair)}
.strip .inner{padding:34px 24px 36px;display:grid;gap:20px 34px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.strip b{display:block;font-size:14px;font-weight:660;letter-spacing:-.2px;color:var(--ink)}
.strip span{font-size:12.8px;color:var(--muted)}

/* ---------- illustration cards ---------- */
.art{display:grid;place-items:center}
.artcard{width:100%;max-width:430px;background:var(--paper);
  border:1px solid var(--hair);border-radius:26px;padding:32px 32px 28px;
  box-shadow:0 30px 60px -30px rgba(24,26,33,.3)}
/* Inverted against the band it sits on, or it disappears into it. */
.band.paper .artcard{background:var(--cream)}
.artcard h3{margin:0;font-size:11.5px;font-weight:660;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--muted)}
.handle{font-size:44px;font-weight:600;letter-spacing:-1.8px;margin:14px 0 2px;color:var(--ink)}
.bignum{font-size:92px;font-weight:600;letter-spacing:-4.5px;margin:12px 0 0;
  line-height:.9;color:var(--slate)}
.artnote{font-size:14px;color:var(--muted);margin:8px 0 18px}
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--cream);
  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(--slate);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(--slate);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(--slate);flex:0 0 auto}

/* ---------- 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:34px}
.fcard{background:var(--paper);border:1px solid var(--hair);border-radius:20px;padding:24px;
  box-shadow:0 14px 34px -26px rgba(24,26,33,.3)}
.fcard .ico{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
  background:var(--cream);color:var(--slate);margin-bottom:16px}
.fcard .ico .i{width:21px;height:21px}
.fcard h3{margin:0 0 7px;font-size:16.5px;font-weight:650;letter-spacing:-.2px;color:var(--ink)}
.fcard p{margin:0;font-size:14.5px;line-height:1.62;color:var(--body)}

/* ---------- platform grid ---------- */
.pgrid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(266px,1fr))}
.pcard{background:var(--paper);border:1px solid var(--hair);border-radius:20px;padding:26px}
.pcard.ready{border-color:var(--slate);box-shadow:0 16px 38px -26px rgba(24,26,33,.4)}
.pcard h3{margin:0 0 4px;font-size:21px;font-weight:660;letter-spacing:-.4px;color:var(--ink)}
.pnote{margin:0 0 16px;font-size:13px;color:var(--muted)}
.pcard p{color:var(--body);font-size:14.8px}
/* Bookends the page with the same dark panel as the hero, so the final call to
   action carries the weight the opening one did. */
.closer{max-width:var(--wide);margin:0 auto;padding:0 24px 36px;border-bottom:0}
.closer .inner{max-width:none;margin:0;border-radius:28px;padding:92px 52px 96px;
  color:var(--on-dark);
  background:
    radial-gradient(60% 100% at 50% 0%,rgba(255,255,255,.08),transparent 60%),
    linear-gradient(158deg,#262931 0%,#181a21 44%,#0c0d11 100%)}
.closer h2.sec{color:var(--on-dark)}
.closer p.body{color:var(--on-dark-body)}
.closer .btn-primary{background:var(--paper);color:var(--ink);
  box-shadow:0 14px 30px -16px rgba(0,0,0,.65)}
.closer .btn-primary:hover{background:var(--cream)}
.closer .btn-ghost{background:transparent;color:var(--on-dark);border-color:#ffffff40}
.closer .btn-ghost:hover{background:#ffffff14;border-color:#ffffff7a}

/* ---------- 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)}
.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(--paper);border:1px solid var(--hair);border-radius:18px;padding:22px}
.doc .card h2{margin:0 0 7px;font-size:17px;color:var(--slate);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}

/* ---------- footer ---------- */
.site-foot{background:var(--paper);border-top:1px solid var(--hair)}
.foot-inner{max-width:var(--wide);margin:0 auto;padding:52px 24px 44px}
.cols{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(158px,1fr))}
.cols h2{font-size:12px;color:var(--ink);margin:0 0 11px;font-weight:640;
  text-transform:uppercase;letter-spacing:.9px}
.cols ul{list-style:none;padding:0;margin:0}
.cols li{margin:6px 0;font-size:14.2px}
.cols a{color:var(--body);text-decoration:none}
.cols a:hover{color:var(--ink);text-decoration:underline}
.fine{color:var(--muted);font-size:13px;margin:38px 0 0}
.fine a{color:var(--muted)}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  /* Copy first once the hero stacks: on a phone the headline has to arrive before
     the picture, whatever the source order does on a desktop. */
  .hero .inner{grid-template-columns:1fr;gap:8px;padding:36px 12px 52px}
  .hero-copy{order:0}
  .stage{order:1;--s:.9}
  .split{grid-template-columns:1fr;gap:34px}
  .split.rev .art{order:0}
  .fgrid{grid-template-columns:repeat(2,1fr)}
  .inner{padding:64px 24px}
}
@media(max-width:720px){
  .bar{flex-wrap:wrap;gap:10px 12px;padding:12px 18px}
  .brand{margin-right:auto}
  nav.top{order:3;width:100%;gap:0;margin:0 -12px}
  /* Tall enough to be a comfortable tap target on a phone. */
  nav.top a{padding:11px 12px;font-size:14.5px}
  .cta{order:2}
  .inner{padding:54px 18px}
  .hero{padding:10px 14px 0}
  .hero .inner{padding:26px 4px 40px}
  .hero-short .inner{padding:42px 4px 30px}
  .fgrid{grid-template-columns:1fr}
  /* One phone from here down. Two at this width would each be too small to read,
     and the list screen is the one carrying the usernames. */
  .phone-back{display:none}
  .stage{--sw:288px;--sh:578px;--s:.94}
  /* 34% of the stage on each side is wider than the phone it is meant to sit
     behind: on a 320pt screen the layer reached 358px and the page picked up a
     horizontal scroll it has no business having. Pulled in to where it cannot
     leave the viewport, and the two coloured centres move above and below the
     device, since beside it there is no longer any empty space for them. */
  .stage::before{inset:-24% -8%;
    background:
      radial-gradient(46% 16% at 50% 50%,rgba(255,255,255,.9),transparent 74%),
      radial-gradient(58% 15% at 60% 7%,rgba(203,188,206,.78),transparent 72%),
      radial-gradient(58% 15% at 38% 93%,rgba(140,142,123,.5),transparent 72%),
      radial-gradient(62% 34% at 50% 50%,rgba(246,241,232,.95),transparent 76%)}
  .sub{font-size:17px}
  /* The closing panel kept its desktop 52px inset, which on a 320pt screen left
     the heading 168px to work in and broke a fifteen-character line into four.
     More specific than the .inner rule above, so it needs saying again here. */
  .closer{padding:0 14px 30px}
  .closer .inner{padding:60px 22px 64px;border-radius:24px}
  .doc{padding:36px 18px 64px}
  .foot-inner{padding:44px 18px 38px}
  .bignum{font-size:54px}
  .sn{font-size:14.5px;gap:8px 10px}
}
@media(max-width:400px){
  .hero .inner{padding:22px 2px 36px}
  .stage{--s:.82}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn{transition:none}
}