/* ============================================================
   site.css - shared theme, base and touch targets for every
   standalone page: /scorecard, /chapter-1, /privacy, /terms.

   Why this exists: the touch-target work on 4 Aug 2026 had to be
   applied four separate times, once per file, because every page
   carried its own copy of the same theme and the same rules.

   TWO TEMPLATES SHARE THIS FILE and they are not interchangeable:

     content pages  /scorecard, /chapter-1
                    slim 14px top bar, 720px column,.foot-in footer
     legal pages    /privacy, /terms
                    46px header block, 760px column,.back link,
                    borderless footer, 17px body

   So the CONTENT-PAGE CHROME BELOW IS NOT UNIVERSAL. The legal
   pages override.top,.top-in,.wrap, footer and body in their
   own inline <style>, which loads after this file. If you add a
   rule here for a selector those pages also use, check it does
   not leak -.top-in{display:flex} and footer{background} both
   did, and both are explicitly reset at the bottom of their
   inline styles.

   index.html deliberately does NOT use this file. mockups.py
   builds index-single-file.html by rewriting src="*.jpg" to data
   URIs and does not inline stylesheets, so an external sheet
   would ship that page unstyled. Its duplicate copy is intended.
   ============================================================ */

/* ─────────── theme ───────────
   One set of values, two vocabularies. The legal pages were
   written with --sea / --sea-deep / --foam for the same colours;
   aliased rather than renamed so their markup needs no rewrite.
   var() is late-bound, so the aliases follow the dark overrides. */
:root{
  --ink:#1a1714; --paper:#e8e4dc; --paper-2:#f1eee7; --card:#fbfaf7;
  --accent:#a6402f; --deep:#1a1714; --abyss:#0c0a08; --bone:#e9e3d8;
  --muted:#6a6259; --rule:#d2ccc0;
  --serif:Georgia,'Iowan Old Style','Palatino Linotype',Palatino,'Times New Roman',serif;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.18,.79,.36,1);
  --sea:var(--accent); --sea-deep:var(--deep); --foam:var(--bone);
}
@media (prefers-color-scheme:dark){
 :root{ --ink:#e9e3d8; --paper:#141210; --paper-2:#1b1815; --card:#211d19;
    --accent:#d9705c; --deep:#100e0c; --muted:#9d948a; --rule:#332e28; }
}
:root[data-theme="dark"]{ --ink:#e9e3d8; --paper:#141210; --paper-2:#1b1815;
  --card:#211d19; --accent:#d9705c; --deep:#100e0c; --muted:#9d948a; --rule:#332e28; }
:root[data-theme="light"]{ --ink:#1a1714; --paper:#e8e4dc; --paper-2:#f1eee7;
  --card:#fbfaf7; --accent:#a6402f; --deep:#1a1714; --muted:#6a6259; --rule:#d2ccc0; }

/* ─────────── universal base ─────────── */
*{box-sizing:border-box}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
strong{font-weight:650}
em{font-style:italic}
/* on its own line so it can be padded to 44px without its hit area
   colliding with the links on the line above */
.legal{display:block;margin-top:8px}

/* ─────────── content-page chrome ───────────
   /scorecard and /chapter-1 only. The legal pages override every
   one of these. See the header note before adding to this block. */
body{margin:0;background:var(--paper);color:var(--ink);
     font:400 18px/1.75 var(--sans);-webkit-font-smoothing:antialiased}
p{margin:0 0 22px}
.top{background:var(--deep);color:var(--bone);padding:14px 24px}
.top-in{max-width:720px;margin:0 auto;display:flex;justify-content:space-between;
        align-items:center;gap:16px;flex-wrap:wrap}
/*:not(.back) - the legal pages put a.back link inside.top, and.top a
   (0,1,1) would otherwise beat.back (0,1,0) and restyle it */
.top a:not(.back){color:var(--bone);text-decoration:none;font:600 13px/1 var(--sans)}
.top a:not(.back):hover{text-decoration:underline}
.top .badge{font:600 10.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;
        color:#d99a83}
.wrap{max-width:720px;margin:0 auto;padding:56px 24px 20px}
.kicker{font:600 11px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;
        color:var(--accent);margin-bottom:22px}
.end{margin:56px 0 0;padding:38px 0 0;border-top:2px solid var(--ink)}
.end h2{margin-top:0}
.fine{font-size:14px;color:var(--muted);margin:16px 0 0}
footer{margin-top:64px;background:var(--paper-2);border-top:1px solid var(--rule);
       padding:30px 24px}
.foot-in{max-width:720px;margin:0 auto;font-size:13.5px;color:var(--muted)}
.foot-in a{color:var(--muted)}

/* ─────────── legal-page chrome ───────────
   /privacy and /terms only. Kept here rather than in those files so the
   touch-target override below has a single base rule to act on - left in
   both places, their copy loaded later and won on margin-bottom. */
.back{display:inline-block;font:600 11px/1 var(--sans);letter-spacing:.2em;
      text-transform:uppercase;color:#d99a83;text-decoration:none;margin-bottom:22px}
.back:hover{text-decoration:underline}

/* ─────────── touch targets ───────────
   Measured at 375px across all four pages: back links were 11-13px
   tall, inline links 19-22px, footer links 18-19px - all under the
   44px thumb target. Sizes are derived from each element's own
   line-height, not guessed:.top a is 13px/1 so it needs 16px of
   padding;.back is 11px/1 so it needs 17px.

   Scoped to touch widths on purpose. Applied at every width on the
   sales page these boxes overlapped each other's hover zones on
   desktop - hovering the email link lit up Privacy Policy. Do not
   lift them out of the media query.

   Links inside flowing prose get an invisible::after overlay
   rather than padding, so the text does not reflow and underlines
   stay put. Links on their own line get padding plus a matching
   negative margin, so layout is unchanged. */
@media(max-width:760px){
 .top a:not(.back){display:inline-block;padding:16px 0;margin:-16px 0}
 .back{padding:17px 0;margin:-17px 0 5px}
 .legal{line-height:3.4}
 .foot-in .legal a,footer .legal a{display:inline-block;padding:13px 0;
    margin:-13px 0;line-height:1.35}
  footer a{display:inline-block;padding:13px 0;margin:-13px 0;line-height:1.35}
 .fine a,.wrap p a{position:relative}
 .fine a::after,.wrap p a::after{content:"";position:absolute;left:0;right:0;
    top:50%;height:44px;transform:translateY(-50%)}
}

@media(max-width:600px){.wrap{padding:38px 20px 16px} }


/* ─────────── email opt-in ───────────
   Used on /scorecard and /chapter-1, below the free thing and below
   the $49 CTA, never above either. index.html carries its own copy
   of this block inline, for the reason in the header comment.

   All new selectors are.optin*, a class the legal pages do not use,
   so nothing here can leak onto /privacy or /terms the way
  .top-in and footer did.

   The 46px control height is deliberate and is not a touch override:
   it applies at every width, because a 44px minimum on an input the
   visitor has to hit accurately is the floor, not a mobile special
   case. That is why there is nothing for.optin in the media query
   at the bottom of this file. */
.optin-box{margin:46px 0 0;padding:30px 30px 28px;background:var(--card);
  border:1px solid var(--rule);border-radius:3px}
.optin-box h3{font-family:var(--serif);font-weight:700;
  font-size:clamp(21px,2.7vw,26px);line-height:1.2;letter-spacing:-.015em;
  margin:0 0 10px}
.optin-box p{margin:0 0 18px;max-width:56ch}
.optin-kick{font:600 11px/1 var(--sans);letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);display:block;margin:0 0 12px}

.optin{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.optin input[type=email]{flex:1 1 240px;min-width:0;height:46px;
  padding:0 14px;font:400 16px/1 var(--sans);color:var(--ink);
  background:var(--paper-2);border:1px solid var(--rule);border-radius:3px}
/* 16px is the smallest font iOS Safari will not zoom into on focus.
   Anything under it makes the page jump when the field is tapped. */
.optin input[type=email]::placeholder{color:var(--muted)}
.optin input[type=email]:focus-visible{outline:2px solid var(--accent);
  outline-offset:1px;border-color:var(--accent)}
.optin button{height:46px;padding:0 22px;border:0;border-radius:3px;
  background:var(--accent);color:#fff;font:650 16px/1 var(--sans);
  cursor:pointer;transition:transform .16s var(--ease),background .16s linear}
.optin button:hover{transform:translateY(-2px);background:#8e3627}
.optin button:active{transform:translateY(0)}
.optin button[disabled]{opacity:.6;cursor:default;transform:none}
.optin button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* The honeypot. Positioned off-canvas rather than display:none,
   because a headless bot reading computed styles skips hidden
   inputs, and aria-hidden + tabindex=-1 keeps it away from people
   using a screen reader or the keyboard. */
.optin .hp{position:absolute;left:-9999px;width:1px;height:1px;
  overflow:hidden}

.optin-fine{font-size:13px;line-height:1.5;color:var(--muted);
  margin:18px 0 0;max-width:56ch}
.optin-fine a{color:var(--muted)}
.optin-note{flex:1 1 100%;margin:0;font-size:14px;line-height:1.45;
  color:var(--accent);min-height:0}
.optin[data-state=error] .optin-note{margin-top:4px}

.optin-done{margin:0}
.optin-done b{display:block;font-family:var(--serif);font-weight:700;
  font-size:19px;margin:0 0 6px}
.optin-done span{display:block;color:var(--muted);max-width:56ch}

@media(max-width:520px){
 .optin-box{padding:24px 20px 22px}
 .optin input[type=email],.optin button{flex:1 1 100%}
 .optin button{width:100%}
}