/* Markline: the one palette and the shared components.

   Every page links this file: the landing page, the app shell (dashboard,
   pricing, auth, welcome, account) and the legal pages. Page-specific layout
   stays with its page; colour never does. A colour that isn't a token here
   doesn't belong in a template.

   Palette (founder's Adobe Color palette, 2026-10-06)
   -------
   Five colours, nothing else:
     #E73121 vermilion    --accent        lines, marks, display text
     #B5483E brick        --accent-strong filled buttons (white text, 5.3:1)
                          --accent-ink    small accent text (5.3:1)
     #824B46 clay         --ink-faint     labels, meta; also --warn (ambiguous)
     #4F3C3A umber        --ink-mid       secondary text
     #332C2C char         --ink           body text, the closing band; also --ok
   Surfaces and rules are warm tints of the same family. The highlighter is a
   red-pen wash of the vermilion, not a second colour. Verdicts: out of scope
   is vermilion, ambiguous is clay, in scope is plain ink.

   Email and the PDF can't use oklch() or this file (Outlook, WeasyPrint), so
   they inline the hex mirror below. tests/test_palette.py fails if an email
   template, sender.py or the PDF uses a hex that isn't in this list.

   hex-mirror:
     --paper          #ffffff
     --surface        #f8f3f2
     --surface-edge   #eee5e4
     --rule           #e2d6d5
     --ink            #332c2c
     --ink-mid        #4f3c3a
     --ink-faint      #824b46
     --accent         #e73121
     --accent-strong  #b5483e
     --accent-ink     #b5483e
     --accent-tint    #fdefed
     --marker         #fbdedc
     --ok             #332c2c
     --ok-tint        #f3f2f2
     --warn           #824b46
     --warn-tint      #f5f1f0
   end-hex-mirror
*/

/* ---------- Fonts: self-hosted (static/fonts/, licences alongside) ----------
   Served from our own origin so no third party sees a visitor's IP before
   they answer the consent banner. Latin subset; Archivo and Familjen are
   variable (400 to 700). Ubuntu is cut to the letters of the wordmark only. */
@font-face{font-family:"Archivo";font-style:italic;font-weight:400 700;font-display:swap;src:url("../fonts/archivo-italic-400-700.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/archivo-normal-400-700.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Familjen Grotesk";font-style:italic;font-weight:400 700;font-display:swap;src:url("../fonts/familjen-grotesk-italic-400-700.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Familjen Grotesk";font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/familjen-grotesk-normal-400-700.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/ibm-plex-mono-italic-400.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ibm-plex-mono-normal-400.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/ibm-plex-mono-normal-500.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Ubuntu";font-style:normal;font-weight:500;font-display:block;src:url("../fonts/ubuntu-wordmark-500.woff2") format("woff2")}

:root{
  --font-body:"Archivo",ui-sans-serif,system-ui,sans-serif;
  --font-display:"Familjen Grotesk",ui-sans-serif,sans-serif;
  --font-brand:"Ubuntu",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  --paper:#ffffff;
  --surface:oklch(0.968 0.006 25);
  --surface-edge:oklch(0.93 0.010 25);
  --rule:oklch(0.885 0.013 25);
  --ink:#332c2c;
  --ink-mid:#4f3c3a;
  --ink-faint:#824b46;

  --accent:#e73121;
  --accent-strong:#b5483e;
  --accent-ink:#b5483e;
  --accent-tint:oklch(0.604 0.219 29.8 / .08);
  --on-accent:#ffffff;
  --marker:oklch(0.604 0.219 29.8 / .16);

  --ok:#332c2c;
  --ok-tint:oklch(0.301 0.010 17.7 / .06);
  --warn:#824b46;
  --warn-tint:oklch(0.476 0.076 25.8 / .08);

  /* The closing band on the landing page: char in both themes. */
  --band:#332c2c;
  --on-band:oklch(0.97 0.006 40);
  --on-band-mid:oklch(0.82 0.015 35);
  --band-accent:#e73121;

  --scrim:oklch(1 0 0 / .82);
  --shadow:oklch(0.301 0.010 17.7 / .12);

  --ease:cubic-bezier(.2,.7,.2,1);
  --z-banner:50;

  color-scheme:light;
}

/* Dark: the same family and roles, re-lit. Opt-in from the toggle in the
   topbar; light stays the default (Decision 014: white paper). The choice is
   stored under the same key the landing toggle always used. */
:root[data-theme="dark"]{
  --paper:oklch(0.19 0.008 20);
  --surface:oklch(0.235 0.010 20);
  --surface-edge:oklch(0.29 0.012 20);
  --rule:oklch(0.33 0.014 20);
  --ink:oklch(0.95 0.008 40);
  --ink-mid:oklch(0.80 0.018 35);
  --ink-faint:oklch(0.70 0.035 30);

  --accent:oklch(0.68 0.19 30);
  --accent-strong:oklch(0.68 0.19 30);
  --accent-ink:oklch(0.74 0.15 32);
  --accent-tint:oklch(0.68 0.19 30 / .14);
  --on-accent:oklch(0.19 0.008 20);
  --marker:oklch(0.68 0.19 30 / .24);

  --ok:oklch(0.95 0.008 40);
  --ok-tint:oklch(0.95 0.008 40 / .08);
  --warn:oklch(0.74 0.07 35);
  --warn-tint:oklch(0.74 0.07 35 / .12);

  --band:oklch(0.235 0.010 20);
  --band-accent:oklch(0.68 0.19 30);

  --scrim:oklch(0.19 0.008 20 / .84);
  --shadow:oklch(0 0 0 / .4);

  color-scheme:dark;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important;animation:none !important}
}
body{
  font-family:var(--font-body);
  background:var(--paper); color:var(--ink);
  font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection{background:var(--marker);color:var(--ink)}
a{color:var(--ink);text-decoration:none;transition:color .18s var(--ease),border-color .18s var(--ease)}
a:hover{color:var(--accent-ink)}
button{font-family:inherit;font-size:inherit}
strong{font-weight:600}
em{font-style:italic}
h1,h2,h3{font-family:var(--font-display);font-weight:400;letter-spacing:-.015em;text-wrap:balance}
p{text-wrap:pretty}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.num{font-variant-numeric:tabular-nums}

.skip{
  position:absolute; left:16px; top:-60px; z-index:calc(var(--z-banner) + 1);
  background:var(--ink); color:var(--paper); padding:10px 14px;
  font-size:13px; font-weight:600;
}
.skip:focus{top:12px; color:var(--paper)}

.page{max-width:1120px;margin:0 auto;padding:0 48px;position:relative}
@media(max-width:760px){ .page{ padding:0 20px; } }

/* ---------- Topbar + wordmark ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:20px 0 18px; border-bottom:1px solid var(--rule);
}
/* Wordmark: identical on every surface (tests/views/test_brand.py). The mark
   is drawn in CSS so it follows the tokens in both themes. */
.brand{display:flex;align-items:baseline;gap:10px;font-family:"Ubuntu",sans-serif;font-size:19px;letter-spacing:.02em;font-weight:500;color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand .mark{ display:inline-block; width:22px; height:14px; position:relative; }
.brand .mark::before{
  content:""; position:absolute; left:0; right:0; top:50%;
  height:1.5px; background:var(--ink); transform:translateY(-50%);
}
.brand .mark::after{
  content:""; position:absolute; left:8px; top:-2px;
  width:9px; height:14px;
  border-left:2px solid var(--accent);
  transform:rotate(18deg); transition:transform .25s var(--ease);
}
.brand:hover .mark::after{ transform:rotate(26deg); }
.topbar .meta{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  font-size:14px; color:var(--ink-mid);
}

.theme-toggle{
  width:34px; height:34px; border:1.5px solid var(--ink); background:transparent; color:var(--ink);
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:0;
  transition:background .18s var(--ease),color .18s var(--ease);
}
.theme-toggle:hover{ background:var(--ink); color:var(--paper); }
.theme-toggle svg{ width:16px; height:16px; }
.theme-toggle .icon-sun{ display:none; }
:root[data-theme="dark"] .theme-toggle .icon-sun{ display:block; }
:root[data-theme="dark"] .theme-toggle .icon-moon{ display:none; }

/* ---------- Text helpers ---------- */
.muted{ color:var(--ink-mid); }
.lbl{ font-size:12px; font-weight:600; letter-spacing:.01em; color:var(--ink-faint); }
.linkbtn{
  font-size:14px; font-weight:500; color:var(--ink);
  background:none; border:0; border-bottom:1px solid var(--ink); padding:0; cursor:pointer;
  transition:color .18s var(--ease),border-color .18s var(--ease);
}
.linkbtn:hover{ color:var(--accent-ink); border-color:var(--accent); }
/* The forwarding address, wherever it appears. */
.addr{ font-family:var(--mono); font-weight:500; color:var(--ink); border-bottom:1.5px solid var(--accent); white-space:nowrap; }
a.addr:hover{ color:var(--accent-ink); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--ink); color:var(--paper); border:1.5px solid var(--ink); padding:14px 20px;
  font-size:14px; letter-spacing:.01em; font-weight:600;
  cursor:pointer; position:relative;
  transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease),transform .12s var(--ease);
}
.btn:hover{ background:var(--accent-strong); border-color:var(--accent-strong); color:var(--on-accent); }
.btn:active{ transform:translateY(1px); }
.btn svg{ width:14px; height:14px; transition:transform .18s var(--ease); }
.btn:hover svg{ transform:translateX(3px); }
.btn:disabled,.btn[disabled]{ opacity:.5; cursor:default; transform:none; }
.btn:disabled:hover{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.btn.o{ background:transparent; color:var(--ink); }
.btn.o:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.btn.r{ background:var(--accent-strong); border-color:var(--accent-strong); color:var(--on-accent); }
.btn.r:hover{ background:var(--accent-ink); border-color:var(--accent-ink); }
.btn.sm{ padding:10px 14px; font-size:13px; }
/* Hero size, with the inset frame from the landing design. */
.btn.lg{ padding:18px 26px; font-size:15px; gap:12px; }
.btn.lg::after{ content:""; position:absolute; inset:5px; border:1px solid currentColor; opacity:.3; pointer-events:none; }
.btn.block{ width:100%; justify-content:center; }
/* Underlined text button, the quiet partner to .btn. */
.btn-text{
  display:inline-flex; align-items:center; gap:8px; padding:18px 4px;
  font-size:14px; font-weight:600;
  color:var(--ink); border-bottom:1.5px solid var(--ink);
}
.btn-text:hover{ color:var(--accent-ink); border-color:var(--accent); }

/* ---------- Forms ---------- */
label.field{ display:block; font-size:13px; font-weight:600; color:var(--ink-mid); margin:0 0 8px; }
input[type=email],input[type=text],input[type=number]{
  width:100%; border:1.5px solid var(--ink); background:var(--paper); padding:13px 14px;
  font-family:inherit; font-size:16px; color:var(--ink); outline:none;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint); }
input::placeholder{ color:var(--ink-faint); }

/* ---------- Notices + stamps ---------- */
.notice{ border:1.5px solid var(--ink); padding:12px 16px; margin:0 0 18px; font-size:15px; }
.notice.ok{ border-color:var(--ok); background:var(--ok-tint); }
.notice.error{ border-color:var(--accent); background:var(--accent-tint); }
/* Verdict / status stamp. Default is out of scope. */
.st{
  display:inline-block; font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; border:1.5px solid var(--accent-ink); color:var(--accent-ink); padding:2px 7px;
  transform:rotate(-1.5deg); white-space:nowrap;
}
.st.in,.st.in_scope{ border-color:var(--ok); color:var(--ok); }
.st.am,.st.ambiguous{ border-color:var(--warn); color:var(--warn); }
.st.lg{ font-size:12px; padding:5px 10px; }
/* Struck-through old price. */
.strike{ position:relative; color:var(--ink-faint); font-family:var(--font-display); font-size:.5em; margin-right:8px; vertical-align:.5em; }
.strike::after{ content:""; position:absolute; left:-4%; right:-4%; top:52%; height:2px; background:var(--accent); transform:rotate(-8deg); }

/* ---------- Footer ---------- */
.foot{
  margin-top:40px; padding:28px 0 40px; border-top:1px solid var(--rule);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px;
  font-size:13px; color:var(--ink-faint);
}
.foot nav{ display:flex; gap:22px; flex-wrap:wrap; }
.foot a,.foot button{ color:var(--ink-faint); }
.foot a:hover,.foot button:hover{ color:var(--ink); }
.foot button{ background:none; border:0; padding:0; cursor:pointer; font:inherit; letter-spacing:inherit; text-transform:inherit; }

/* ---------- Consent banner (B-019) ---------- */
.ml-consent{
  position:fixed; left:0; right:0; bottom:0; z-index:var(--z-banner); display:none;
  background:var(--paper); border-top:1.5px solid var(--ink);
  box-shadow:0 -10px 30px var(--shadow); padding:20px;
}
.ml-consent.open{ display:block; }
.ml-consent-in{ max-width:1024px; margin:0 auto; display:flex; flex-wrap:wrap; gap:18px; align-items:flex-end; justify-content:space-between; }
.ml-consent p{ margin:0 0 12px; font-size:14px; line-height:1.5; color:var(--ink-mid); max-width:60ch; }
.ml-consent h2{ margin:0 0 6px; font-family:var(--font-display); font-size:20px; color:var(--ink); }
.ml-consent-opts{ display:flex; flex-wrap:wrap; gap:10px 22px; }
.ml-consent-opt{ display:flex; align-items:flex-start; gap:8px; font-size:13px; color:var(--ink-mid); max-width:40ch; cursor:pointer; }
.ml-consent-opt strong{ color:var(--ink); }
.ml-consent-opt input{ margin-top:3px; flex:0 0 auto; accent-color:var(--accent-strong); }
.ml-consent-actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.ml-consent a{ color:inherit; border-bottom:1px solid var(--accent); }