:root{
  --ink:#0C2029;
  --ink-2:#3C5560;
  --ink-3:#5E7681;
  --line:#DCE5E8;
  --bg:#FFFFFF;
  --surface:#F5F8F9;
  --surface-2:#FFFFFF;
  --accent:#2C6874;
  --accent-ink:#1C505B;
  --accent-soft:#E2F0F2;
  --warm:#A75B0F;
  --warm-soft:#FBECDC;
  --deep:#0F3846;
  --deep-2:#0A2530;
  --on-deep:#EAF3F5;
  --on-deep-2:#A8C4CC;
  --radius-s:10px;
  --radius:16px;
  --radius-l:24px;
  --shadow:0 1px 2px rgba(12,32,41,.05), 0 12px 28px -18px rgba(12,32,41,.35);
  --maxw:1080px;
}
@media (prefers-color-scheme: dark){
  :root{
    --ink:#E9F1F3;
    --ink-2:#B6CAD1;
    --ink-3:#8CA6AF;
    --line:#22383F;
    --bg:#0B181D;
    --surface:#101F26;
    --surface-2:#132630;
    --accent:#71B4C0;
    --accent-ink:#8FCAD4;
    --accent-soft:#12333B;
    --warm:#EDA45E;
    --warm-soft:#2C1F12;
    --deep:#0E313C;
    --deep-2:#081E27;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 28px -18px rgba(0,0,0,.7);
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--accent-ink); text-underline-offset:3px}
a:hover{color:var(--ink)}
/* 700 on a 44px heading is a shout. Display sizes sit at 600 and the small
   headings inside cards keep their weight, because at 17px a lighter face
   stops separating the heading from the paragraph under it. */
h1,h2{font-weight:600}
h1,h2,h3{line-height:1.2; letter-spacing:-.015em; margin:0}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
/* Air, in three weights rather than one. Every section used to be 72px
   regardless of whether it was a small turn in the argument or a change of
   ground, which is what makes a page feel stacked rather than composed.
   A phone gets less of everything: 88px of nothing on a 6in screen is a lot
   of thumb work. */
.section{padding:88px 0}
.section--tight{padding:64px 0}
.eyebrow{
  font-size:13px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--accent-ink); margin:0 0 14px;
}
.lede{font-size:19px; color:var(--ink-2); max-width:62ch; margin:18px 0 0}

/* Header */
header.site{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.bar{display:flex; align-items:center; gap:14px; padding:12px 24px; max-width:var(--maxw); margin:0 auto}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink); font-weight:800; font-size:18px; letter-spacing:-.02em}
.brand img{width:34px; height:34px; border-radius:9px}
nav.top{margin-left:auto; display:flex; gap:6px; align-items:center; flex-wrap:wrap}
nav.top a{
  color:var(--ink-2); text-decoration:none; font-size:15px; font-weight:600;
  padding:8px 12px; border-radius:999px;
}
nav.top a:hover{background:var(--surface); color:var(--ink)}
@media (max-width:620px){
  .bar{padding:10px 16px; gap:8px}
  nav.top{gap:0; flex-wrap:nowrap}
  nav.top a{padding:7px 7px; font-size:13.5px; white-space:nowrap}
  .brand span{display:none}
  .wrap{padding:0 20px}
}

/* Hero */
.hero{
  background:
    radial-gradient(1100px 460px at 88% -8%, rgba(215,135,52,.13), transparent 60%),
    linear-gradient(158deg, var(--deep) 0%, var(--deep-2) 100%);
  color:var(--on-deep);
  border-bottom:1px solid var(--line);
}
/* One column. The hero was two, with the app icon alone in the right hand
   one, so on a wide screen it was a large picture of a logo doing no work and
   on a phone it pushed the headline down the page. */
.hero .wrap{padding-top:66px; padding-bottom:72px}
/* Smaller than it was (52px) and with real air above it, so the price line
   above reads as its own statement instead of a label stuck to the headline.
   Tighter leading than the 1.2 the other headings use: at this size 1.2 opens
   gaps between the lines of a four line headline. */
.hero h1{
  font-size:clamp(31px, 4.3vw, 45px); color:#fff;
  letter-spacing:-.022em; line-height:1.14; max-width:20ch;
  margin-top:34px;
}
.hero p.sub{font-size:18.5px; color:var(--on-deep-2); margin:22px 0 0; max-width:54ch}
.badges{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px}
.badge{
  display:inline-flex; align-items:center; gap:9px;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.22);
  color:#fff; font-size:14px; font-weight:600;
  padding:7px 15px; border-radius:999px;
}
.badge .dot{width:8px; height:8px; border-radius:50%; background:#F0A85A; flex:none}
/* not a link yet: the Play listing 404s until Google publishes */
.badge--soon{
  background:rgba(255,255,255,.05); border-style:dashed;
  border-color:rgba(255,255,255,.26); color:var(--on-deep-2); cursor:default;
}
.badge--soon .dot{background:transparent; border:1.5px solid #F0A85A}
.availability{
  margin:18px 0 0; font-size:15px; color:var(--on-deep-2);
}
/* The mark and the store links read as one block: icon left, links right.
   flex-wrap is there so that on a screen too narrow for both, the links drop
   under the icon rather than being squeezed. */
.hero-lede{display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin:0 0 24px}
.hero-lede .badges{margin:0}
.hero-art{margin:0; flex:none}
.hero-art img{
  width:60px; height:60px; border-radius:23%;
  box-shadow:0 8px 20px -10px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.12);
}
/* ONE column. Two columns were tried on 2026-09-11 to fill the width left by
   the old second column, and the five points are of very different lengths:
   a grid row is as tall as its tallest item, so a one line point sat in a row
   sized for a four line one and the list read as misaligned. The measure is
   held at 62ch because a single column across the full page would otherwise
   run to 115 characters a line. */
.hero-points{list-style:none; padding:0; margin:32px 0 0; display:grid; gap:12px; max-width:62ch}
.hero-points li{display:flex; gap:11px; align-items:flex-start; color:var(--on-deep); font-size:16px}
.hero-points svg{flex:none; margin-top:4px}
@media (max-width:860px){
  .hero .wrap{padding-top:46px; padding-bottom:52px}
  .hero h1{margin-top:26px}
  .hero h1{max-width:none}
}
@media (max-width:620px){
  /* Two pills side by side do not fit beside the icon on a phone, so they
     become a column and stay to its right. */
  .hero-lede{gap:14px; align-items:flex-start; flex-wrap:nowrap}
  .hero-lede .badges{flex-direction:column; align-items:flex-start; gap:8px; min-width:0}
  .hero-art img{width:54px; height:54px}
}

/* Steps */
/* Two across, not four. There are four steps now and four narrow columns
   would leave each one about 190px of text, while a 2x2 grid gives them room
   and cannot produce the ragged half empty row that three across and four
   items would. */
.steps{display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:48px; counter-reset:step}
.step{
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 24px 28px; box-shadow:var(--shadow);
}
.step .num{
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent-ink); font-weight:800; font-size:15px; margin-bottom:16px;
}
.step h3{font-size:19px; font-weight:650; margin-bottom:8px}
.step p{margin:0; color:var(--ink-2); font-size:16px}
@media (max-width:800px){ .steps{grid-template-columns:1fr} }

/* Timeline */
.timeline{
  margin-top:56px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-l); padding:32px 28px;
}
.track{position:relative; margin:26px 0 0; padding:0; list-style:none}
.track::before{
  content:""; position:absolute; left:13px; top:8px; bottom:8px; width:2px;
  background:linear-gradient(var(--accent), var(--warm)); border-radius:2px; opacity:.5;
}
.track li{position:relative; padding:0 0 22px 44px}
.track li:last-child{padding-bottom:0}
.track .pin{
  position:absolute; left:6px; top:5px; width:16px; height:16px; border-radius:50%;
  background:var(--bg); border:3px solid var(--accent);
}
.track li:last-child .pin{border-color:var(--warm)}
.track .wk{font-weight:800; font-size:14px; letter-spacing:.05em; text-transform:uppercase; color:var(--accent-ink); display:block}
.track li:last-child .wk{color:var(--warm)}
.track .what{font-weight:650; display:block; margin-top:2px}
.track .why{color:var(--ink-2); font-size:15.5px}
.track-note{
  margin:22px 0 0; color:var(--ink-2); font-size:15.5px; max-width:72ch;
}

/* Features */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:48px}
.card{
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 22px 26px;
}
.card h3{font-size:17.5px; font-weight:650; margin-bottom:7px}
.card p{margin:0; color:var(--ink-2); font-size:15.5px}
.ico{
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent-ink); margin-bottom:15px;
}
@media (max-width:900px){ .grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .grid{grid-template-columns:1fr} }

/* Privacy band */
.band{
  background:linear-gradient(158deg, var(--deep) 0%, var(--deep-2) 100%);
  color:var(--on-deep);
  padding:100px 0;
}
.band .eyebrow{color:var(--on-deep-2)}
.band h2{color:#fff; font-size:clamp(26px,3.6vw,36px)}
.band p{color:var(--on-deep-2); font-size:18px; max-width:64ch}
.band ul{list-style:none; padding:0; margin:38px 0 0; display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.band ul li{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:var(--radius); padding:20px}
.band ul strong{display:block; color:#fff; margin-bottom:5px; font-size:16.5px}
.band ul span{color:var(--on-deep-2); font-size:15.5px}
@media (max-width:1000px){ .band ul{grid-template-columns:repeat(2,1fr)} }
@media (max-width:800px){ .band ul{grid-template-columns:1fr} }

/* Policy */
.policy{max-width:760px}
.policy h2{font-size:clamp(26px,3.6vw,34px)}
.policy h3{font-size:19px; margin:38px 0 8px}
.policy p, .policy li{color:var(--ink-2); font-size:16.5px}
.policy ul{padding-left:22px}
.policy li{margin:6px 0}
.updated{color:var(--ink-3); font-size:15px; margin-top:6px}
.pull{
  background:var(--accent-soft); border-left:4px solid var(--accent);
  border-radius:0 var(--radius-s) var(--radius-s) 0;
  padding:18px 22px; margin:26px 0; color:var(--ink); font-weight:600; font-size:17px;
}
.note{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 22px; margin:30px 0 0;
}
.note p{margin:0; font-size:15.5px}

/* Contact + footer */
.contact-card{
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-l);
  padding:34px 30px; box-shadow:var(--shadow); text-align:center;
}
.contact-card h2{font-size:26px}
.contact-card p{color:var(--ink-2); margin:12px auto 22px; max-width:52ch}
.btn{
  display:inline-block; background:var(--accent-ink); color:#fff; text-decoration:none;
  font-weight:700; font-size:16px; padding:14px 26px; border-radius:999px;
}
.btn:hover{background:var(--ink); color:#fff}
@media (prefers-color-scheme: dark){ .btn{background:var(--accent); color:#08171C} .btn:hover{background:#9AD2DB; color:#08171C} }

footer.site{border-top:1px solid var(--line); padding:34px 0 56px; margin-top:16px}
footer.site .wrap{display:flex; gap:18px; align-items:center; flex-wrap:wrap}
footer.site p{margin:0; color:var(--ink-3); font-size:14.5px}
footer.site nav{margin-left:auto; display:flex; gap:18px; flex-wrap:wrap}
footer.site nav a{font-size:14.5px; font-weight:600; text-decoration:none}
.disclaimer{margin-top:14px !important; max-width:70ch}
.skip{position:absolute; left:-9999px}
.skip:focus{left:16px; top:12px; position:fixed; background:var(--bg); color:var(--ink); padding:10px 16px; border-radius:8px; border:1px solid var(--line); z-index:50}

.policy-links{margin-top:22px; font-size:15px}
.policy-links a{font-weight:600}

/* The price, stated once in the hero. Deliberately quiet: it sits under the
   store badges as a fact, not a sales line. Added 2026-09-10, the day both
   stores went paid, because the page had no price on it anywhere and the
   privacy section's "what you download is the whole app" read as free. */
.price{
  margin:14px 0 0; font-size:15px; color:var(--on-deep-2);
}
/* The dot that used to sit in front of this was one of nine orange marks on
   the page. The price does not need a bullet to be read. */

/* What it does not do. Plain list, no cards: this is an admission, and
   dressing it up as a feature grid would undercut it. */
.scope{border-top:1px solid var(--line)}
.scope ul{
  list-style:none; padding:0; margin:26px 0 0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:20px 34px;
}
.scope li{color:var(--ink-2); font-size:16px; padding-left:18px; position:relative}
.scope li::before{
  content:""; position:absolute; left:0; top:10px;
  width:8px; height:1.5px; background:var(--ink-3);
}
.scope strong{color:var(--ink); font-weight:600}
@media (max-width:720px){
  .scope ul{grid-template-columns:1fr; gap:16px}
}


/* The second call to action, at the foot of the page. The hero badges sit on
   the dark band and are translucent white, which would be invisible here, so
   on this light ground they are filled buttons instead. Same shape, readable
   contrast. */
.closing{background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); text-align:center}
.closing h2{font-size:clamp(24px,3.2vw,31px)}
.closing>.wrap>p{color:var(--ink-2); margin:12px auto 0; max-width:46ch; font-size:16.5px}
.closing .badges{justify-content:center; margin:26px 0 0}
.closing .badge{
  background:var(--accent-ink); border-color:transparent; color:#fff;
  font-size:15.5px; padding:13px 22px;
}
.closing .badge:hover{background:var(--ink)}
.closing .small{font-size:14.5px; color:var(--ink-3); margin-top:16px}
@media (prefers-color-scheme:dark){
  .closing .badge{background:var(--accent); color:#08171C}
  .closing .badge .dot{background:#08171C}
  .closing .badge:hover{background:#9AD2DB}
}

/* A phone does not want a laptop's whitespace. */
@media (max-width:620px){
  .section{padding:62px 0}
  .section--tight{padding:50px 0}
  .band{padding:68px 0}
}