/* Logos brand, taken from the app itself (artifacts/phrase-pilot/constants/colors.ts).
   GOLD and NAVY are the app's two brand constants; the greys are the app's dark palette,
   which is what the store screenshots and the splash screen already look like. Inter is the
   app's typeface. The old site used cream, Georgia and a different gold, and matched nothing. */
:root{
  --gold:#F5A623; --gold-dim:#C9881E; --navy:#1A3A5C;
  --bg:#111113; --surface:#1C1C1E; --raised:#2C2C2E; --line:#3A3A3C;
  --text:#FFFFFF; --muted:#8E8E93; --subtle:#B0B0B5;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg); color:var(--text);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  display:flex; align-items:center; justify-content:center;
  min-height:100svh; padding:40px 22px; line-height:1.55;
}
main{width:100%;max-width:440px;text-align:center;position:relative}
/* A soft gold glow behind the mark, the same warmth the icon has on the home screen. */
.glow{
  position:absolute; left:50%; top:-40px; width:340px; height:340px;
  transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(circle, rgba(245,166,35,.13) 0%, rgba(245,166,35,0) 68%);
}
.mark{
  position:relative; width:96px; height:96px; margin:0 auto;
  border-radius:23%; overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 40px rgba(0,0,0,.55);
}
.mark img{display:block;width:100%;height:100%;object-fit:cover}
/* One colour. The gold split on "os" is gone at Paul's call, 2026-09-16 — the gold now belongs
   to the button, which is the only thing on the page anyone is meant to press. */
.wordmark{
  margin-top:22px; font-size:clamp(30px,8.2vw,40px); font-weight:700; letter-spacing:-1.2px; line-height:1.1; color:var(--text);
}
.tag{
  margin-top:10px; font-size:11px; font-weight:600; letter-spacing:2.6px;
  text-transform:uppercase; color:var(--muted);
}
.lede{margin:26px auto 0;max-width:360px;font-size:16px;color:var(--subtle)}
.gift{margin-top:28px;font-size:20px;font-weight:600;color:var(--text)}
.sub{margin:10px auto 0;max-width:360px;font-size:15px;color:var(--muted)}
/* ⚠️ THE REASSURANCE BLOCK, AND WHY IT IS ABOVE THE DOWNLOAD BUTTON RATHER THAN UNDER IT.
   Paul, 2026-09-17, after redeeming the code on his own iPhone: Apple's own confirmation screen says
   "Confirm Subscription — Cancel anytime in Settings at least a day before each renewal date". That
   sentence is Apple's standard wording on every offer code and cannot be edited or skipped by an
   app. For THIS offer it is not even true: the offer is set to "Don't auto-renew the subscription at
   the end of this offer", so nothing renews and nothing is ever charged.
   A person who reads that promise BEFORE tapping treats Apple's screen as a formality. A person who
   reads it afterwards has already backed out. The words were on this page before today, but they sat
   below the badge, where most people never got to them. */
.calm{
  margin:26px auto 0;max-width:400px;text-align:left;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px;
}
.calm-t{font-size:16px;font-weight:600;color:var(--text);margin:0 0 6px}
.calm-b{font-size:14px;line-height:1.5;color:var(--subtle);margin:0 0 10px}
.calm-b:last-child{margin-bottom:0}
.calm-b b{color:var(--text);font-weight:600}
.cta{
  display:block;margin:26px auto 0;max-width:330px;
  background:var(--gold);color:#111113;text-decoration:none;
  font-size:17px;font-weight:600;padding:16px 22px;border-radius:999px;
  transition:transform .15s ease,opacity .15s ease;-webkit-tap-highlight-color:transparent;
}
.cta:hover{transform:translateY(-2px)}
.cta:active{transform:translateY(0);opacity:.85}
.steps{margin:20px auto 0;max-width:330px;text-align:left;font-size:14px;color:var(--muted);padding-left:20px}
.steps li{margin-bottom:4px}
.badges{margin-top:30px;display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.badge{display:inline-flex;text-decoration:none;border-radius:9px;transition:transform .15s ease,opacity .15s ease;-webkit-tap-highlight-color:transparent}
.badge:hover{transform:translateY(-2px)}
.badge:active{transform:translateY(0);opacity:.85}
.badge img{display:block;width:auto}
.badge--apple img{height:44px}
.badge--google img{height:52px}
.hint{margin-top:32px;padding-top:22px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.hint a{color:var(--subtle)}
[hidden]{display:none!important}

/* The three steps, drawn the way the app's own paywall draws them: a gold numbered disc, a hairline
   running between the discs, the step name, then the sentence. Someone who sees this on the website
   and then opens the app sees the same three steps in the same shape. Left-aligned inside the centred
   column, because a numbered list that is centred is unreadable. */
.steps3{ margin:28px auto 0; max-width:390px; text-align:left; position:relative; }
.step{ display:grid; grid-template-columns:28px 1fr; column-gap:14px; position:relative; padding-bottom:22px; }
.step:last-child{ padding-bottom:0; }
/* The hairline joining one disc to the next. Not drawn under the last step. */
.step:not(:last-child)::before{
  content:""; position:absolute; left:13.5px; top:30px; bottom:4px; width:1px; background:var(--line);
}
.step-n{
  width:28px; height:28px; border-radius:50%; background:var(--gold); color:#111113;
  font-size:14px; font-weight:700; display:flex; align-items:center; justify-content:center;
  position:relative; z-index:1;
}
.step-t{ font-size:17px; font-weight:600; color:var(--text); line-height:1.6; }
.step-b{ font-size:15px; color:var(--muted); margin-top:2px; }