/* The self-serve pages' styles, on the etailinsights brand guide (the design system as of
   2026-11-05, with the sky accent and the sky success colour). Its tokens,
   by its own names, are the only colours, type styles, spacings and radii these pages use, and
   they live in :root below and nowhere else: every rule takes a colour from var(--…), a type
   style from font: var(--type-…) and a spacing from var(--space-…); info.css adds layout only.
   tests/test_selfserve_page.py (BrandRuleTests) holds :root to the guide and the rules to it.
   Plus Jakarta Sans is self-hosted from /assets (the policy fetches nothing from elsewhere);
   code is the system monospace. Light scheme only, like etailinsights.com. */
@font-face{font-family:"Plus Jakarta Sans";src:url(/assets/plus-jakarta-sans.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
:root{
  color-scheme:light;
  /* Color: brand */
  --cart-orange:#F78F1E; --deep-navy:#22405F;
  --orange-ink:#C2410C; --navy-ink:#22405F;
  --orange-tint:#FFF7ED; --navy-tint:#EEF3F8;
  /* Color: the occasional third colour (sky-accent on navy, sky-ink as text on light grounds) */
  --sky-accent:#38BDF8; --sky-ink:#0369A1;
  /* Color: neutrals and surfaces */
  --ink:#101828; --ink-muted:#4A5565;
  --surface:#FFFFFF; --surface-alt:#F9FAFB; --surface-inverse:#22405F; --on-inverse:#F3F4F6;
  --on-orange:#101828; --hairline:#E5E7EB; --control-border:#7C8698;
  /* Color: states */
  --focus-ring:#1D4ED8; --success:#0369A1; --danger:#B42318;
  /* Color, the guide's dark column: orange-ink and ink-muted for a dark ground, used on the
     one dark ground of a light page, a code block (ink) */
  --code-accent:#FDBA74; --code-muted:#A3ADBD;
  /* Derived: an alpha of one of the colours above, nothing new */
  --inverse-hairline:rgba(243, 244, 246, .18);
  --press-shade:rgba(16, 24, 40, .08); --press-shade-strong:rgba(16, 24, 40, .16);
  --scrim:rgba(16, 24, 40, .48);
  --shadow-card:0 1px 2px rgba(16, 24, 40, .06),0 4px 12px rgba(16, 24, 40, .06);
  /* Spacing and radius */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px;
  --space-8:32px; --space-12:48px; --space-24:96px;
  --radius-sm:4px; --radius-md:8px; --radius-lg:16px;
  /* Layout and components; and Typography's "keep body lines under 70 characters": Plus
     Jakarta Sans averages 0.46em a character (its 0, and so 1ch, is 0.73em), so 30em holds
     about 65 on average and under 70 on the longest line */
  --content-max:1200px; --measure:30em;
  /* Typography: one typeface, the guide's fallback stack, and its twelve styles */
  --font-ui:"Plus Jakarta Sans",ui-sans-serif,system-ui,sans-serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --type-display:700 56px/60px var(--font-ui);
  --type-h1:700 40px/48px var(--font-ui);
  --type-h2:600 30px/38px var(--font-ui);
  --type-h3:600 22px/30px var(--font-ui);
  --type-lead:400 19px/30px var(--font-ui);
  --type-body:400 16px/26px var(--font-ui);
  --type-label:600 15px/20px var(--font-ui);
  --type-caption:400 13px/18px var(--font-ui);
  --type-stat:700 44px/48px var(--font-ui);
  --type-eyebrow:600 12px/16px var(--font-ui);
  --type-data:500 14px/20px var(--font-ui);
  --type-code:400 14px/20px var(--font-mono);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--surface);color:var(--ink);font:var(--type-body);-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed}
h1,h2,h3,p,dl,dd,pre{margin:0}
b,strong{font-weight:600} /* emphasis inside running text, at the guide's semibold */
a{color:var(--sky-ink);text-underline-offset:2px}
code{font:var(--type-code)}
pre,.mono{font-family:var(--font-mono)}
.mono,.num{font-variant-numeric:tabular-nums}
.num{white-space:nowrap}
.muted{color:var(--ink-muted)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.band :focus-visible,.reveal :focus-visible{outline-color:var(--on-inverse)}
.wrap{max-width:calc(860px + 2 * var(--space-8));margin-inline:auto;padding-inline:var(--space-8)}
.hint{font:var(--type-caption);color:var(--ink-muted)}
.build{max-width:calc(860px + 2 * var(--space-8));margin:0 auto;padding:0 var(--space-8) var(--space-6);font:var(--type-caption)}

/* ---------- the type scale (Typography) ---------- */
h1{font:var(--type-h1);letter-spacing:-.015em;color:var(--navy-ink);text-wrap:balance}
h2{font:var(--type-h2);letter-spacing:-.01em;color:var(--navy-ink);text-wrap:balance}
h3{font:var(--type-h3);color:var(--navy-ink)}
.lede{font:var(--type-lead);color:var(--ink-muted);max-width:var(--measure)}
/* The one uppercase style. Nothing set in it may hold the name or eCommerce, whose casing
   the guide fixes (Name and voice). */
.eyebrow{font:var(--type-eyebrow);letter-spacing:.08em;text-transform:uppercase;color:var(--sky-ink)}

/* ---------- header bar: deep navy, the reverse logo (Logo, Color) ---------- */
.band{background:var(--surface-inverse);color:var(--on-inverse)}
.band-in{padding-block:var(--space-4);display:flex;flex-direction:column;gap:var(--space-2)}
.brand{display:flex;align-items:center;gap:var(--space-4);margin:0}
.logo{display:block;padding-block:var(--space-2);border-radius:var(--radius-sm)}
.logo img{display:block;height:36px;width:auto}
.logo-api{padding-left:var(--space-4);border-left:1px solid var(--inverse-hairline);font:var(--type-label);color:var(--on-inverse)}
.band-tag{color:var(--on-inverse);max-width:var(--measure)}

/* ---------- buttons and controls (Layout and components): one primary per view ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:44px;padding:var(--space-3) var(--space-6);border-radius:var(--radius-sm);border:1px solid transparent;font:var(--type-label);text-decoration:none;white-space:nowrap;transition:box-shadow .12s,border-color .12s}
.btn-primary{background:var(--cart-orange);color:var(--on-orange)}
.btn-primary:hover{box-shadow:inset 0 0 0 999px var(--press-shade)}
.btn-primary:disabled{background:var(--hairline);color:var(--ink-muted);box-shadow:none}
.btn-secondary{background:var(--surface);color:var(--ink);border-color:var(--control-border)}
.btn-secondary:hover{border-color:var(--ink)}
.btn-danger{background:var(--danger);color:var(--on-inverse)}
.btn-danger:hover{box-shadow:inset 0 0 0 999px var(--press-shade-strong)}
.btn-sm{min-height:36px;padding:var(--space-2) var(--space-4)}

/* ---------- the views: the body's data-view attribute picks one ---------- */
.view{display:none;padding-block:var(--space-12);flex-direction:column;gap:var(--space-6)}
body[data-view="signup"] #signup,body[data-view="welcome"] #welcome,body[data-view="signin"] #signin,body[data-view="auth"] #auth,body[data-view="account"] #account{display:flex}
.view h2{font:var(--type-h3);letter-spacing:0}
.view p:not(.notice){max-width:var(--measure)}
.notice{padding:var(--space-3) var(--space-4);border-left:4px solid var(--navy-ink);border-radius:var(--radius-sm);background:var(--navy-tint)}
.notice-bad{border:1px solid var(--danger);border-left-width:4px;background:var(--surface)}

/* ---------- the form ---------- */
.signup-form{display:flex;flex-direction:column;gap:var(--space-6);padding:var(--space-6);background:var(--surface);border-radius:var(--radius-md);box-shadow:var(--shadow-card)}
.field{display:flex;flex-direction:column;gap:var(--space-2);margin:0;padding:0;border:0;min-width:0}
.field>label,.field>legend{padding:0;font:var(--type-label);color:var(--ink)}
.field>legend{margin-bottom:var(--space-3)}
.field input{width:100%;height:44px;padding:0 var(--space-3);background:var(--surface);border:1px solid var(--control-border);border-radius:var(--radius-sm)}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3)}
.plan{position:relative;display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-4);border:1px solid var(--hairline);border-radius:var(--radius-md);background:var(--surface-alt);cursor:pointer;font:var(--type-caption);color:var(--ink-muted);text-decoration:none}
.plan input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.plan-name{font:var(--type-label);color:var(--navy-ink)}
.plan-price b{font:var(--type-h3);color:var(--navy-ink);font-variant-numeric:tabular-nums}
.plan-records b{color:var(--ink);font-variant-numeric:tabular-nums}
.plan-included{margin-top:var(--space-1);color:var(--sky-ink)}
.plan:hover{border-color:var(--control-border)}
.plan:has(input:checked){background:var(--orange-tint);border-color:var(--cart-orange);box-shadow:inset 0 0 0 1px var(--cart-orange);color:var(--ink)}
.plan:has(input:focus-visible){outline:2px solid var(--focus-ring);outline-offset:2px}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-6)}
.fine{margin:0;padding-left:var(--space-6);display:flex;flex-direction:column;gap:var(--space-1);font:var(--type-caption);color:var(--ink-muted);max-width:var(--measure)}
.foot{color:var(--ink-muted)}

/* ---------- welcome ---------- */
.state{display:flex;flex-direction:column;gap:var(--space-4)}
.working{display:flex;align-items:center;gap:var(--space-3);color:var(--ink-muted)}
.dot{width:10px;height:10px;border-radius:50%;background:var(--cart-orange);animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:none}}
.reveal{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-6);border-radius:var(--radius-md);background:var(--surface-inverse);color:var(--on-inverse)}
.reveal-lead{font:var(--type-label)}
.reveal code{display:block;overflow-wrap:anywhere;border-radius:var(--radius-sm);color:var(--on-inverse)}
.reveal .btn{align-self:flex-start}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3) var(--space-6);padding:var(--space-6);background:var(--surface-alt);border:1px solid var(--hairline);border-radius:var(--radius-md)}
.facts dt{font:var(--type-caption);color:var(--ink-muted)}
.facts dd{font:var(--type-data);overflow-wrap:anywhere;color:var(--ink);font-variant-numeric:tabular-nums}
.facts dd.mono{font:var(--type-code)}
.snippet{padding:var(--space-4);border-radius:var(--radius-md);background:var(--ink);font:var(--type-code);overflow-x:auto;white-space:pre;color:var(--on-inverse)}

/* ---------- narrow screens: the guide's one type scale throughout ---------- */
@media (max-width:760px){
  .plans{grid-template-columns:repeat(2,minmax(0,1fr))}
  .two{grid-template-columns:minmax(0,1fr)}
  .facts{grid-template-columns:minmax(0,1fr)}
  .view{padding-block:var(--space-8) var(--space-12)}
}
@media (max-width:560px){
  .wrap,.build{padding-inline:var(--space-4)}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---- the account (S3) ---- */
.facts-account{grid-template-columns:repeat(2,minmax(0,1fr))}
.actions-account{align-items:flex-start}
.actions-account form{margin:0}
details.danger{display:flex;flex-direction:column;gap:var(--space-3)}
details.danger summary{align-self:flex-start;list-style:none;cursor:pointer}
details.danger summary::-webkit-details-marker{display:none}
details.danger form{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-4);border:1px solid var(--danger);border-left-width:4px;border-radius:var(--radius-md);background:var(--surface);max-width:var(--measure)}
details.danger p{color:var(--ink)}
details.danger .btn-danger{align-self:flex-start}