/* ---------------- Tokens ----------------
   The same palette as the app and the user guide, so the site, the store
   screenshots and the product all read as one thing. One accent (the app's
   orange) does all the signalling; neutrals carry a slight blue bias so they
   sit next to the app's own dark UI rather than reading as flat grey.
   Both themes are designed, not inverted: the light accent is darkened to
   #c26a00 because #ffa02e on white fails contrast at body-text size. */
:root{
  --bg:#f7f7f5;
  --surface:#ffffff;
  --sunken:#f0f0ee;
  --ink:#16181d;
  --ink-2:#4a4e57;
  --ink-3:#7b808a;
  --rule:rgba(20,24,32,.10);
  --rule-2:rgba(20,24,32,.18);
  --accent:#c26a00;
  --accent-bright:#ffa02e;
  --accent-soft:rgba(255,160,46,.14);
  --on-accent:#1a1000;
  --good:#1f7a34;
  --good-soft:rgba(31,122,52,.10);
  --shadow:0 1px 2px rgba(16,19,24,.05), 0 10px 30px rgba(16,19,24,.07);
  --shadow-lg:0 2px 4px rgba(16,19,24,.06), 0 30px 60px rgba(16,19,24,.12);
  --device:#0c0e13;
  --nav-bg:rgba(247,247,245,.82);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0c0e12;
    --surface:#171b22;
    --sunken:#101318;
    --ink:#eef1f6;
    --ink-2:#a8b0bd;
    --ink-3:#767d89;
    --rule:rgba(255,255,255,.09);
    --rule-2:rgba(255,255,255,.16);
    --accent:#ffa02e;
    --accent-soft:rgba(255,160,46,.13);
    --good:#4ec46a;
    --good-soft:rgba(78,196,106,.12);
    --shadow:none;
    --shadow-lg:0 30px 70px rgba(0,0,0,.5);
    --device:#000;
    --nav-bg:rgba(12,14,18,.82);
  }
}
:root[data-theme="dark"]{
  --bg:#0c0e12; --surface:#171b22; --sunken:#101318;
  --ink:#eef1f6; --ink-2:#a8b0bd; --ink-3:#767d89;
  --rule:rgba(255,255,255,.09); --rule-2:rgba(255,255,255,.16);
  --accent:#ffa02e; --accent-soft:rgba(255,160,46,.13);
  --good:#4ec46a; --good-soft:rgba(78,196,106,.12);
  --shadow:none; --shadow-lg:0 30px 70px rgba(0,0,0,.5);
  --device:#000; --nav-bg:rgba(12,14,18,.82);
}
:root[data-theme="light"]{
  --bg:#f7f7f5; --surface:#ffffff; --sunken:#f0f0ee;
  --ink:#16181d; --ink-2:#4a4e57; --ink-3:#7b808a;
  --rule:rgba(20,24,32,.10); --rule-2:rgba(20,24,32,.18);
  --accent:#c26a00; --accent-soft:rgba(255,160,46,.14);
  --good:#1f7a34; --good-soft:rgba(31,122,52,.10);
  --shadow:0 1px 2px rgba(16,19,24,.05), 0 10px 30px rgba(16,19,24,.07);
  --shadow-lg:0 2px 4px rgba(16,19,24,.06), 0 30px 60px rgba(16,19,24,.12);
  --device:#0c0e13; --nav-bg:rgba(247,247,245,.82);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:80px}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--accent); text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px}

.wrap{max-width:1080px; margin:0 auto; padding:0 22px}
.narrow{max-width:760px}

.skip{
  position:absolute; left:-9999px; top:8px;
  background:var(--surface); color:var(--ink); padding:10px 16px;
  border-radius:10px; border:1px solid var(--rule-2); z-index:100;
}
.skip:focus{left:16px}

/* ---------------- Header ---------------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:var(--nav-bg); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rule);
}
.nav .wrap{display:flex; align-items:center; gap:18px; height:64px}
.mark{display:inline-flex; align-items:center; gap:10px; font-size:16px; font-weight:800; color:var(--ink); text-decoration:none; letter-spacing:-.01em}
.mark .glyph{width:28px; height:28px; border-radius:8px; background:var(--accent-bright); display:grid; place-items:center; flex:none}
.mark .glyph svg{width:16px; height:16px; display:block}
.nav nav{margin-left:auto; display:flex; gap:26px; align-items:center}
.nav nav a{color:var(--ink-2); text-decoration:none; font-size:14.5px; font-weight:600}
.nav nav a:hover{color:var(--ink)}
@media (max-width:720px){ .nav nav{display:none} }

/* ---------------- Hero ---------------- */
.hero{padding:74px 0 10px; overflow:hidden}
.hero .wrap{display:grid; grid-template-columns:1fr minmax(280px,360px); gap:56px; align-items:center}
@media (max-width:900px){
  .hero{padding-top:48px}
  /* No justify-items:center here: it shrink-wraps each column to its content,
     which lets a long headline or the lede's max-width push past the viewport
     and scroll the whole page sideways. Centre the text instead. */
  .hero .wrap{grid-template-columns:1fr; gap:40px; text-align:center}
  .hero .lede{margin-left:auto; margin-right:auto}
  .hero .shot{display:flex; justify-content:center}
}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:750; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent); background:var(--accent-soft);
  border:1px solid var(--rule-2); border-radius:999px; padding:6px 13px; margin-bottom:22px;
}
h1{
  font-size:clamp(33px,6.4vw,62px); line-height:1.03; letter-spacing:-.035em;
  font-weight:830; margin:0 0 20px; text-wrap:balance;
}
.lede{font-size:clamp(17.5px,2.2vw,20px); color:var(--ink-2); margin:0 0 30px; max-width:34em; text-wrap:pretty}
.hero .lede{margin-bottom:28px}

/* ---------------- Store buttons ----------------
   Deliberately not links. The app is not in either store yet, and a badge
   that goes nowhere is worse than one that says so. When it ships, swap the
   <span class="store"> for an <a href="…"> and drop .is-soon — nothing else
   in the CSS has to change. */
.stores{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:16px}
.hero .stores, .cta .stores{justify-content:flex-start}
@media (max-width:900px){ .hero .stores{justify-content:center} }
.store{
  display:inline-flex; align-items:center; gap:11px;
  background:var(--ink); color:var(--bg);
  border-radius:13px; padding:11px 18px 11px 15px;
  text-decoration:none; min-height:54px;
}
.store svg{width:22px; height:22px; flex:none}
.store .lines{display:flex; flex-direction:column; line-height:1.15; text-align:left}
.store .small{font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; opacity:.72; font-weight:650}
.store .big{font-size:16px; font-weight:700; letter-spacing:-.01em}
.store.is-soon{opacity:.55; cursor:default}
.store.apple svg{fill:var(--bg)}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:var(--accent-bright); color:#1a1000;
  font-size:16px; font-weight:730; text-decoration:none;
  border-radius:13px; padding:14px 24px; min-height:54px; border:none;
}
.btn:hover{filter:brightness(1.06)}
.btn.ghost{background:var(--surface); color:var(--ink); border:1px solid var(--rule-2); box-shadow:var(--shadow)}
.note{font-size:14px; color:var(--ink-3); margin:14px 0 0}
.hero .note{max-width:34em}

/* ---------------- Device frame ----------------
   The screenshots are raw captures, status bar and all, so the frame only
   has to supply the bezel. Padding is asymmetric-free on purpose: a real
   phone's bezel is even, and anything else reads as a mistake. */
.device{
  background:var(--device); border-radius:42px; padding:9px;
  border:1px solid var(--rule-2); box-shadow:var(--shadow-lg);
  width:100%; max-width:340px;
}
.device img{border-radius:34px}
.device.tilt{transform:rotate(-1.4deg)}
@media (prefers-reduced-motion: reduce){ .device.tilt{transform:none} }

/* ---------------- Strip of claims ---------------- */
.strip{border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); margin-top:64px; background:var(--sunken)}
.strip ul{
  list-style:none; margin:0; padding:22px 0; display:grid;
  grid-template-columns:repeat(4,1fr); gap:18px; text-align:center;
}
.strip li{font-size:15px; font-weight:650; color:var(--ink-2); display:flex; align-items:center; justify-content:center; gap:9px}
.strip svg{width:17px; height:17px; flex:none; color:var(--good)}
@media (max-width:760px){ .strip ul{grid-template-columns:repeat(2,1fr); text-align:left} .strip li{justify-content:flex-start} }

/* ---------------- Sections ---------------- */
section{scroll-margin-top:80px}
.band{padding:88px 0}
.band.tint{background:var(--sunken); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}
.kicker{font-size:12.5px; font-weight:750; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin:0 0 12px}
h2{font-size:clamp(28px,4vw,40px); line-height:1.12; letter-spacing:-.028em; font-weight:800; margin:0 0 16px; text-wrap:balance}
h3{font-size:20px; line-height:1.25; letter-spacing:-.015em; font-weight:750; margin:0 0 8px}
p{margin:0 0 16px; color:var(--ink-2); text-wrap:pretty}
p strong, li strong{color:var(--ink); font-weight:650}
.section-head{max-width:660px; margin:0 0 52px}
.section-head.centred{margin:0 auto 52px; text-align:center}

/* Alternating feature rows. */
.feature{display:grid; grid-template-columns:1fr minmax(240px,288px); gap:64px; align-items:center; margin-bottom:84px}
.feature:last-child{margin-bottom:0}
.feature .shot{display:flex; justify-content:center}
/* Smaller than the hero's phone on purpose: at full size a 2868px-tall capture
   towers over three lines of text and leaves the row looking half-empty. */
.feature .device{max-width:264px; border-radius:36px}
.feature .device img{border-radius:29px}
/* Every other row puts the screenshot on the left. The columns swap with it:
   moving the image alone would hand the text the narrow column. The flip is a
   class rather than :nth-child so that adding or removing a row cannot
   silently re-order the ones below it. */
.feature.flip{grid-template-columns:minmax(240px,288px) 1fr}
.feature.flip .shot{order:-1}
@media (max-width:880px){
  .feature, .feature.flip{grid-template-columns:1fr; gap:36px; margin-bottom:72px}
  .feature.flip .shot{order:0}
}
.tag{
  display:inline-block; font-size:11.5px; font-weight:750; letter-spacing:.07em;
  text-transform:uppercase; color:var(--accent); background:var(--accent-soft);
  border-radius:999px; padding:4px 10px; margin:0 0 12px;
}
.ticks{list-style:none; margin:0; padding:0}
.ticks li{position:relative; padding-left:26px; margin-bottom:9px; color:var(--ink-2)}
.ticks li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:9px; height:9px; border-radius:50%; background:var(--accent-bright);
}

/* ---------------- Watches ----------------
   A scroll track, not a grid. Four 422px-wide captures in four grid columns
   rely on the browser shrinking a replaced element below its intrinsic width,
   and that is exactly where engines disagree: Chrome shrank them, Safari kept
   all 422px and pushed the row off the side of the page. A percentage
   flex-basis with min-width:0 cannot do that anywhere, and when the cards no
   longer fit it is the track that scrolls rather than the document. */
.carousel{position:relative}
.watches{
  display:flex; gap:20px;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  /* Room for a focus ring, taken straight back off the layout. */
  padding:5px; margin:-5px;
  scrollbar-width:none;
}
.watches::-webkit-scrollbar{display:none}
@media (prefers-reduced-motion: reduce){ .watches{scroll-behavior:auto} }
.watch{flex:0 0 calc((100% - 80px)/5); min-width:0; scroll-snap-align:center}
@media (max-width:880px){ .watch{flex-basis:calc((100% - 20px)/2)} }
@media (max-width:540px){ .watch{flex-basis:78%} }
.watch figure{margin:0}
.watch .screen{background:var(--device); border:1px solid var(--rule-2); border-radius:22px; padding:7px; box-shadow:var(--shadow)}
.watch .screen img{border-radius:16px; width:100%}
.watch figcaption{font-size:13.5px; color:var(--ink-3); margin-top:11px; text-align:center}

/* The arrows are revealed by script and only when the track really does
   scroll, so a browser that runs no script gets a plain row it can still
   swipe rather than two buttons that do nothing. */
.carousel-nav{
  position:absolute; top:50%; transform:translateY(calc(-50% - 18px));
  width:44px; height:44px; border-radius:50%; padding:0;
  background:var(--surface); color:var(--ink);
  border:1px solid var(--rule-2); box-shadow:var(--shadow-lg);
  display:grid; place-items:center; cursor:pointer; z-index:2;
}
/* display:grid above beats the user agent's [hidden]{display:none}, so the
   script's prev.hidden would otherwise leave two ghost buttons on a wide
   screen where nothing scrolls. */
.carousel-nav[hidden]{display:none}
.carousel-nav svg{width:19px; height:19px}
.carousel-nav.prev{left:-18px}
.carousel-nav.next{right:-18px}
.carousel-nav:hover:not(:disabled){border-color:var(--accent-bright)}
.carousel-nav:disabled{opacity:.3; cursor:default}
/* Inside the track once the page is too narrow for them to sit beside it. */
@media (max-width:1160px){ .carousel-nav.prev{left:2px} .carousel-nav.next{right:2px} }

/* The same shrink-below-intrinsic-width trap as the watch row, in the two
   other places a screenshot sits in a grid column. */
.hero .wrap > *, .feature > *{min-width:0}
.device img{width:100%}

/* ---------------- Cards ---------------- */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
@media (max-width:860px){ .cards{grid-template-columns:1fr} }
.card{background:var(--surface); border:1px solid var(--rule); border-radius:16px; padding:26px 24px; box-shadow:var(--shadow)}
.card p:last-child{margin-bottom:0}
.card .ico{width:38px; height:38px; border-radius:11px; background:var(--accent-soft); display:grid; place-items:center; margin-bottom:16px}
.card .ico svg{width:20px; height:20px; color:var(--accent)}

/* ---------------- Pricing ---------------- */
.plans{display:grid; grid-template-columns:repeat(2,1fr); gap:22px; align-items:start}
@media (max-width:820px){ .plans{grid-template-columns:1fr} }
.plan{background:var(--surface); border:1px solid var(--rule); border-radius:18px; padding:30px 28px; box-shadow:var(--shadow); position:relative}
.plan.premium{border-color:var(--accent-bright); box-shadow:var(--shadow-lg)}
.price{display:flex; align-items:baseline; gap:8px; margin:6px 0 4px}
.price .amount{font-size:42px; font-weight:820; letter-spacing:-.035em; line-height:1}
.price .per{font-size:15px; color:var(--ink-3)}
.plan .alt{font-size:14.5px; color:var(--ink-3); margin:0 0 22px}
.plan ul{list-style:none; margin:0 0 24px; padding:0}
.plan li{position:relative; padding-left:28px; margin-bottom:10px; color:var(--ink-2); font-size:16px}
.plan li svg{position:absolute; left:0; top:.28em; width:17px; height:17px; color:var(--good)}
.plan .foot{font-size:14px; color:var(--ink-3); margin:0}

.aside{
  background:var(--good-soft); border:1px solid var(--rule-2); border-radius:16px;
  padding:20px 24px; margin-top:24px;
}
.aside p{color:var(--ink); margin:0}

/* ---------------- FAQ ---------------- */
.faq{max-width:760px; margin:0 auto}
details{border-bottom:1px solid var(--rule); padding:4px 0}
details summary{
  cursor:pointer; list-style:none; padding:18px 34px 18px 0; position:relative;
  font-size:17.5px; font-weight:680; color:var(--ink);
}
details summary::-webkit-details-marker{display:none}
details summary::after{
  content:""; position:absolute; right:6px; top:50%; width:9px; height:9px;
  border-right:2px solid var(--ink-3); border-bottom:2px solid var(--ink-3);
  transform:translateY(-70%) rotate(45deg); transition:transform .15s ease;
}
details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
details .answer{padding:0 34px 20px 0}
details .answer p:last-child{margin-bottom:0}

/* ---------------- Closing call to action ---------------- */
.cta{padding:96px 0}
.cta .inner{
  background:var(--surface); border:1px solid var(--rule); border-radius:22px;
  padding:52px 40px; text-align:center; box-shadow:var(--shadow);
}
.cta .stores{justify-content:center}
.cta h2{margin-bottom:14px}
.cta .lede{margin:0 auto 28px}
@media (max-width:600px){ .cta .inner{padding:38px 22px} }

/* ---------------- Footer ---------------- */
footer{border-top:1px solid var(--rule); background:var(--sunken); padding:52px 0 40px}
.cols{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:34px; margin-bottom:38px}
@media (max-width:820px){ .cols{grid-template-columns:1fr 1fr; gap:30px} }
@media (max-width:460px){ .cols{grid-template-columns:1fr} }
.cols h4{font-size:12.5px; font-weight:750; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); margin:0 0 14px}
.cols ul{list-style:none; margin:0; padding:0}
.cols li{margin-bottom:9px}
.cols a{color:var(--ink-2); text-decoration:none; font-size:15px}
.cols a:hover{color:var(--ink); text-decoration:underline}
.colophon{font-size:14px; color:var(--ink-3); border-top:1px solid var(--rule); padding-top:24px}
.colophon p{color:var(--ink-3); font-size:14px; margin:0 0 6px}

/* ---------------- Support page ----------------
   Shares every token above; only the layout pieces the landing page has no
   use for live down here. */
.page-head{padding:66px 0 10px; border-bottom:1px solid var(--rule)}
.page-head h1{font-size:clamp(34px,5.4vw,52px); margin-bottom:14px}
.page-head .lede{margin-bottom:34px}

.linkgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
@media (max-width:760px){ .linkgrid{grid-template-columns:1fr} }
.linkcard{
  display:block; background:var(--surface); border:1px solid var(--rule);
  border-radius:16px; padding:22px 24px; text-decoration:none; color:inherit;
  box-shadow:var(--shadow);
}
.linkcard:hover{border-color:var(--rule-2)}
.linkcard h3{margin-bottom:6px; display:flex; align-items:center; gap:9px}
.linkcard h3 .arrow{color:var(--accent); font-weight:700}
.linkcard p{margin:0; font-size:15.5px}
.linkcard .meta{display:inline-block; margin-top:12px; font-size:12.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3)}

.contact{
  background:var(--accent-soft); border:1px solid var(--rule-2); border-radius:18px;
  padding:30px 32px; display:grid; grid-template-columns:1fr auto; gap:26px; align-items:center;
}
@media (max-width:700px){ .contact{grid-template-columns:1fr; padding:26px 22px} }
.contact h2{font-size:24px; margin-bottom:8px}
.contact p:last-of-type{margin-bottom:0}

.steps{counter-reset:step; list-style:none; margin:0 0 16px; padding:0}
.steps li{counter-increment:step; position:relative; padding-left:40px; margin-bottom:14px; color:var(--ink-2)}
.steps li::before{
  content:counter(step); position:absolute; left:0; top:-1px;
  width:26px; height:26px; border-radius:50%; background:var(--accent-soft);
  color:var(--accent); font-size:13.5px; font-weight:750;
  display:grid; place-items:center;
}

.table-scroll{overflow-x:auto; margin:22px 0 0}
table{border-collapse:collapse; width:100%; min-width:520px; font-size:15.5px}
th,td{text-align:left; padding:13px 14px; border-bottom:1px solid var(--rule); vertical-align:top}
thead th{font-size:12px; font-weight:750; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); border-bottom:1px solid var(--rule-2)}
td{color:var(--ink-2)}
td strong{color:var(--ink)}
.no{color:var(--ink-3)}