/* The site's own look, in one place.
 *
 * Every page outside the app (marketing, help, legal, the download page, the
 * password reset) pulls this in, so the red is one red, the hero is one hero,
 * and a page added next year cannot quietly invent its own palette. The values
 * are the ones home.html has always used.
 *
 * Loaded as a stylesheet rather than inlined per page: the app-wide CSP allows
 * style-src 'self', and one file means one place to change.
 */
/* Same tokens as home.html, so this page is the site rather than a page that
   resembles it: the red is #e51636 everywhere, the hero is the dark radial
   treatment, and cards are paper on cream with the same line and radius. */
:root{
  --red:#e51636; --red-hot:#ff5a6e; --red-deep:#c20f29;
  --ink:#15121a; --ink-2:#1e1a22; --ink-3:#282330;
  --cream:#f7f4f3; --paper:#fffdfc; --line:#e9e2e0;
  --tx:#1c1418; --tx-soft:#5b5054; --tx-mute:#8a8286;
  --tx-inv:#f5f2f4; --tx-inv-soft:#b9b2bd;
}
@media (prefers-color-scheme: dark){
  :root{ --cream:#15171b; --paper:#1c2027; --line:#2c313a; --tx:#e9edf2; --tx-soft:#c2c8d0; --tx-mute:#99a1ab; }
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--tx);background:var(--cream);line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--red);text-decoration:none}
.wrap{max-width:760px;margin:0 auto;padding:0 22px}

/* Hero: the site's gradient, not a flat red block. */
.hero{background:radial-gradient(1200px 600px at 70% -10%, #3a1220 0%, transparent 60%), linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 70%);color:var(--tx-inv);padding:34px 0 78px}
.hero .kicker{color:var(--red-hot);font-weight:800;font-size:12px;letter-spacing:2px;text-transform:uppercase}
.hero h1{font-size:clamp(30px,5vw,44px);line-height:1.06;font-weight:800;letter-spacing:-1.2px;margin:12px 0 10px;text-wrap:balance}
.hero p{font-size:17px;color:var(--tx-inv-soft);max-width:36em}

/* The platform cards lift off the hero, which is where the elevation reads. */
main{padding-bottom:64px}
.platforms{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:-52px}
@media (max-width:620px){ .platforms{grid-template-columns:1fr} }
.card{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:24px}
.platforms .card{box-shadow:0 24px 70px rgba(28,20,24,.16)}
.plat-name{font-size:12px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--red);margin-bottom:6px}
.plat-head{font-size:20px;font-weight:800;letter-spacing:-.4px;margin-bottom:6px}
.plat-sub{font-size:14px;color:var(--tx-soft);margin-bottom:18px;min-height:42px}

/* The store badges, identical to the ones on the homepage. */
.appstore-badge{display:inline-flex;align-items:center;gap:10px;background:#000;color:#fff;border-radius:12px;padding:11px 18px;line-height:1.05;width:100%;justify-content:center;transition:transform .12s ease,opacity .15s ease}
.appstore-badge:hover{opacity:.86}
.appstore-badge:active{transform:scale(.98)}
.appstore-badge svg{flex:none}
.appstore-badge .ab-t{display:flex;flex-direction:column;text-align:left}
.appstore-badge .ab-t small{font-size:11px;font-weight:500;letter-spacing:.2px}
.appstore-badge .ab-t strong{font-size:18px;font-weight:600;letter-spacing:-.3px}
.meta{font-size:12.5px;color:var(--tx-mute);margin-top:12px}

h2{font-size:23px;font-weight:800;letter-spacing:-.5px;margin:38px 0 12px}
p,li{font-size:16px;color:var(--tx-soft)}
.lead{margin-bottom:14px}
ol{padding-left:22px;margin:0 0 8px} ol li{margin:0 0 12px}
ul{padding-left:22px} ul li{margin:0 0 8px}
.step-note{display:block;font-size:14px;color:var(--tx-mute);margin-top:4px}
p strong, li strong, .tip strong{color:var(--tx)}
.tip{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--red);border-radius:12px;padding:14px 16px;font-size:15px;color:var(--tx);margin:16px 0}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;word-break:break-all}
.sum{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:13.5px;color:var(--tx-mute);margin:0}
.sum b{color:var(--tx);font-weight:700}
details{border-top:1px solid var(--line);padding:14px 0}
summary{font-weight:700;font-size:16px;cursor:pointer;color:var(--tx)}
details p{margin-top:8px}
.btn-ghost{display:inline-block;background:transparent;color:var(--red);border:1.5px solid var(--red);border-radius:12px;padding:10px 18px;font-weight:700;font-size:15px;font-family:inherit;cursor:pointer}
.btn-ghost:hover{background:var(--red);color:#fff}
footer{border-top:1px solid var(--line);margin-top:34px;padding:24px 0 44px;text-align:center;color:var(--tx-mute);font-size:13px}

/* ---- shared pieces the other pages need ---- */

/* A hero that is not the top of a funnel: help, legal, the reset page. Shorter,
   and without the cards that lift out of it. */
.hero.slim{padding:30px 0 34px}
.hero.slim h1{font-size:clamp(26px,4vw,36px)}
.hero .crumb{margin-top:14px;font-size:13px;color:var(--tx-inv-soft)}
.hero .crumb a{color:var(--tx-inv);text-decoration:underline;text-underline-offset:2px}

/* Cards that sit in the page rather than over the hero. */
.card.flat{box-shadow:none}
.card + .card{margin-top:14px}

/* A page that is one panel in the middle of the screen (reset, 404, 500,
   offline). The panel gets the elevation the platform cards get. */
.center{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.panel{width:100%;max-width:440px;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:28px;box-shadow:0 24px 70px rgba(28,20,24,.16)}
.panel h1{font-size:23px;font-weight:800;letter-spacing:-.5px;margin:0 0 8px}
.panel .kicker{color:var(--red);font-weight:800;font-size:12px;letter-spacing:2px;text-transform:uppercase;margin-bottom:14px}

/* Forms, for the reset page. */
label{display:block;font-size:12px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--tx-mute);margin:0 0 6px}
input[type=password],input[type=search],input[type=email],input[type=text]{
  width:100%;font-size:16px;padding:12px 14px;border-radius:12px;margin:0 0 14px;
  border:1px solid var(--line);background:var(--cream);color:var(--tx);font-family:inherit;
}
input:focus{outline:2px solid var(--red);outline-offset:1px}
.btn-red{display:inline-block;width:100%;text-align:center;background:var(--red);color:#fff;border:0;border-radius:12px;padding:13px 22px;font-weight:700;font-size:15px;font-family:inherit;cursor:pointer}
.btn-red:hover{background:var(--red-deep)}
.btn-red[disabled]{opacity:.55;cursor:default}

.msg{font-size:14.5px;line-height:20px;margin:0 0 14px}
.bad{color:var(--red);font-weight:600}
.good{color:#1f9d57;font-weight:600}
.hide{display:none}

/* The reset page names the account the link belongs to. */
.who{font-size:13.5px;color:var(--tx-mute);margin:0 0 18px}