/* Humorless Labs house styles. Tokens and rules: humorless-labs/docs/brand.md.
   No inline styles anywhere: the CSP is style-src 'self'. */

/* ---- Tokens ---- */
:root { --radius:12px; --max:1200px;
  --l-r:#ff5d5d; --l-o:#ff9a3c; --l-y:#ffd23f; --l-g:#3ecf8e; --l-c:#22c3e6; --l-b:#4c8bf5; --l-v:#a774ff;
  --white:#f5f7fa; --ink:#14181d; }
:root, [data-theme=dark] { --bg:#0f1216; --band:#13171c; --panel:#171b21; --line:#252c35; --txt:#e6e9ee; --muted:#8b95a3;
  --key:transparent; --edge:#f5f7fa; --focus:#f5f7fa; --primary:#000000; --on-primary:#ffffff; color-scheme:dark; }
[data-theme=light] { --bg:#f7f8fa; --band:#eef1f4; --panel:#ffffff; --line:#dde2e8; --txt:#14181d; --muted:#59626e;
  --key:#14181d; --edge:#14181d; --focus:#14181d; --primary:#ffffff; --on-primary:#14181d; color-scheme:light; }

/* Practice colour (--c) is the same in both themes. Glass outline (--t): pale tint on dark, dark shade on light. */
.l-r { --c:var(--l-r); --t:#ff9a9a; } .l-o { --c:var(--l-o); --t:#ffc28a; } .l-y { --c:var(--l-y); --t:#ffe58a; }
.l-g { --c:var(--l-g); --t:#8fe8bd; } .l-c { --c:var(--l-c); --t:#8ee6f5; } .l-b { --c:var(--l-b); --t:#9dbcf8; } .l-v { --c:var(--l-v); --t:#cfb2ff; }
[data-theme=light] .l-r { --t:#c62828; } [data-theme=light] .l-o { --t:#b45309; } [data-theme=light] .l-y { --t:#8a6100; }
[data-theme=light] .l-g { --t:#13784b; } [data-theme=light] .l-c { --t:#0b7285; } [data-theme=light] .l-b { --t:#1f5fd1; } [data-theme=light] .l-v { --t:#7a3fe0; }

/* ---- Base ---- */
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--txt); font:16px/1.55 "Segoe UI", system-ui, -apple-system, sans-serif; }
.sprite { position:absolute; width:0; height:0; overflow:hidden; }
.skip { position:absolute; left:-9999px; top:8px; z-index:20; }
.skip:focus { left:16px; padding:8px 12px; background:var(--panel); color:var(--txt); border:1.5px solid var(--edge); border-radius:var(--radius); }
.wrap { max-width:var(--max); margin:0 auto; padding:0 24px; }
section { padding:56px 0; } section.band { background:var(--band); border-block:1px solid var(--line); }
section[id] { scroll-margin-top:84px; }
h1 { font-size:44px; line-height:1.1; letter-spacing:-.02em; margin:0 0 14px; }
h2 { font-size:28px; line-height:1.2; letter-spacing:-.01em; margin:0 0 6px; }
h3 { font-size:18px; margin:0 0 4px; }
.lede { color:var(--muted); font-size:18px; margin:0 0 24px; max-width:60ch; }
.sub { color:var(--muted); margin:0 0 28px; max-width:70ch; } .sub.flush { margin:0; }

/* ---- Header: pinned; shrinks into a floating keylined bar once you scroll ---- */
header.top { position:sticky; top:0; z-index:10; background:var(--bg); border-bottom:1px solid var(--line); transition:padding .25s, background .25s, border-color .25s; }
header.top .bar { max-width:var(--max); margin:0 auto; padding:0 24px; height:68px; display:flex; align-items:center; gap:12px;
  border:1.5px solid transparent; border-radius:var(--radius); background:var(--bg);
  transition:height .25s, max-width .25s, padding .25s, border-color .25s, box-shadow .25s; }
header.top.small { padding:10px 16px 0; background:transparent; border-bottom-color:transparent; }
header.top.small .bar { height:54px; max-width:1080px; padding:0 10px 0 14px; border-color:var(--edge); box-shadow:2px 2px 0 var(--edge); }
.brand { display:flex; align-items:center; gap:10px; font-weight:650; font-size:18px; color:var(--txt); text-decoration:none; transition:font-size .25s; }
.brand svg { width:36px; height:36px; transition:width .25s, height .25s; }
.small .brand { font-size:16px; } .small .brand svg { width:28px; height:28px; }
.brand sup { font-size:10px; color:var(--muted); font-weight:500; }
.bar > .btn { margin-left:auto; }

/* Segmented nav: one sliding pill marks the section you're reading. */
nav.seg { position:relative; margin-left:auto; display:flex; gap:2px; padding:4px; border:1px solid var(--line); border-radius:999px; background:var(--band); }
nav.seg a { position:relative; z-index:1; padding:6px 16px; border-radius:999px; color:var(--muted); text-decoration:none; font-size:14px; font-weight:600; transition:color .25s; }
nav.seg a:hover { color:var(--txt); }
nav.seg a.on { color:var(--bg); }
nav.seg .ind { position:absolute; top:4px; bottom:4px; left:0; width:0; border-radius:999px; background:var(--txt); opacity:0; transition:left .3s ease, width .3s ease, opacity .2s; }

/* Theme switch: two labelled options, a sliding thumb on the mode you're in. */
.mode { position:relative; margin-left:10px; display:inline-flex; padding:3px; border:1px solid var(--line); border-radius:999px; background:var(--band); }
.mode button { position:relative; z-index:1; display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border:0; border-radius:999px; background:none;
  font:inherit; font-size:13px; font-weight:600; color:var(--muted); cursor:pointer; transition:color .25s; }
.mode button[aria-pressed=true] { color:var(--txt); }
.mode svg { width:14px; height:14px; }
.mode .thumb { position:absolute; top:3px; bottom:3px; left:3px; width:0; border-radius:999px; background:var(--panel); border:1.5px solid var(--edge); box-shadow:1.5px 1.5px 0 var(--edge); transition:left .25s ease, width .25s ease; }

.btn:focus-visible, nav.seg a:focus-visible, .mode button:focus-visible, .brand:focus-visible, .link:focus-visible,
input:focus, select:focus, textarea:focus { outline:2px solid var(--focus); outline-offset:2px; }

/* ---- Hero ---- */
.hero { display:grid; grid-template-columns:1.4fr 1fr; gap:40px; align-items:center; }
.hero-mark { justify-self:center; width:200px; height:200px; }
.actions { display:flex; align-items:center; gap:22px; flex-wrap:wrap; }

/* ---- Buttons: keyline plus a hard offset shadow. One primary per screen. ---- */
.btn { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:var(--radius); font:inherit; font-size:14px; font-weight:600;
  text-decoration:none; color:var(--txt); background:var(--bg); border:1.5px solid var(--edge); box-shadow:2px 2px 0 var(--shadow, var(--edge));
  cursor:pointer; transition:transform .08s, box-shadow .08s; }
.btn:hover { transform:translate(-1px, -1px); box-shadow:3px 3px 0 var(--shadow, var(--edge)); }
.btn:active { transform:translate(2px, 2px); box-shadow:0 0 0 var(--shadow, var(--edge)); }
.btn.primary { padding:12px 20px; font-size:16px; font-weight:650; background:var(--primary); color:var(--on-primary); border-width:2px; box-shadow:3px 3px 0 var(--edge); }
.btn.primary:hover { box-shadow:4px 4px 0 var(--edge); }

/* Inline links: colour as text on dark; ink with a colour underline on light. */
.link { color:var(--c, var(--txt)); font-weight:600; text-decoration:none; }
[data-theme=light] .link { color:var(--txt); text-decoration:underline; text-decoration-color:var(--c, var(--txt)); text-decoration-thickness:3px; text-underline-offset:5px; }

/* Tags: outlined colour text on dark; colour fill with ink text on light. */
.tag { display:inline-block; font-size:12px; font-weight:650; letter-spacing:.02em; color:var(--c); border:1px solid var(--c); border-radius:999px; padding:1px 10px; margin-bottom:8px; }
[data-theme=light] .tag { background:var(--c); color:var(--ink); border-color:var(--key); }

/* ---- Cards ---- */
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:16px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:20px; display:flex; flex-direction:column; gap:10px; }
.card p { color:var(--muted); margin:0 0 10px; font-size:15px; }
.card .price { color:var(--txt); font-weight:650; margin:0 0 6px; font-size:15px; }
.card > svg { flex:none; width:64px; height:64px; }
.card .rate { font-size:32px; font-weight:700; letter-spacing:-.02em; color:var(--txt); margin:0; } .card .rate small { font-size:15px; font-weight:500; color:var(--muted); }
/* The body grows so the action pins to the bottom-left of every card. */
.card .body { flex:1; display:flex; flex-direction:column; }
.card .body > .tag { align-self:flex-start; }
.card .body .btn { margin-top:auto; align-self:flex-start; --shadow:var(--c); }
.card.feature { border:1.5px solid var(--edge); box-shadow:3px 3px 0 var(--edge); }
.eyebrow { font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:32px 0 12px; }
.grid + .sub { margin-top:14px; }
.terms { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:12px; margin-top:16px; padding:18px 20px; border:1.5px dashed var(--edge); border-radius:var(--radius); }
.terms div { display:flex; gap:10px; align-items:flex-start; font-size:15px; }
.terms svg { flex:none; width:18px; height:18px; margin-top:3px; }

/* ---- Quote ---- */
.quote-panel { display:grid; grid-template-columns:1fr 1.6fr; gap:40px; background:var(--panel); border:1.5px solid var(--edge); box-shadow:4px 4px 0 var(--edge); border-radius:var(--radius); padding:32px; }
.steps { list-style:none; padding:0; margin:24px 0 0; counter-reset:s; }
.steps li { counter-increment:s; display:flex; gap:12px; margin-bottom:16px; color:var(--muted); font-size:15px; }
.steps li::before { content:counter(s); flex:none; width:28px; height:28px; display:grid; place-items:center; border-radius:999px; border:1.5px solid var(--edge); color:var(--txt); font-weight:700; font-size:14px; }
.steps b { color:var(--txt); display:block; }
form.quote { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
form.quote .full { grid-column:1 / -1; }
.req { color:var(--muted); font-size:13px; margin:0; }
label { display:block; font-size:14px; font-weight:600; margin-bottom:6px; }
input, select, textarea { width:100%; font:inherit; color:var(--txt); background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:10px 12px; }
textarea { min-height:110px; resize:vertical; }
.hint { color:var(--muted); font-size:13px; margin-top:4px; }
[aria-invalid=true] { border-color:var(--l-r); }
.error { color:var(--txt); font-weight:600; margin:0 0 12px; padding-left:10px; border-left:3px solid var(--l-r); }

/* ---- Footer ---- */
footer { border-top:1px solid var(--line); padding:28px 0; color:var(--muted); font-size:14px; }
footer .wrap { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
footer svg { width:24px; height:24px; }

/* ---- Policy pages: full width that scales, prose sections ---- */
.wrap.policy { max-width:none; width:88%; padding:0; }
header.top.wide:not(.small) .bar { max-width:none; width:88%; padding:0; }
.policy-head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px 40px; padding-bottom:24px; border-bottom:1px solid var(--line); }
.policy-head h1 { margin:0; }
.policy-meta { display:flex; gap:28px; margin:0; }
.policy-meta dt { font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.policy-meta dd { margin:2px 0 0; font-weight:600; }
.policy-body { margin-top:8px; }
.clause { padding:28px 0; border-bottom:1px solid var(--line); } .clause:last-child { border-bottom:0; }
.clause h2 { display:flex; align-items:baseline; gap:12px; font-size:22px; margin:0 0 10px; }
.clause h2 .n { font-size:14px; font-weight:700; color:var(--t); font-variant-numeric:tabular-nums; }
.clause h3 { font-size:16px; margin:18px 0 4px; }
.clause p, .clause li { color:var(--muted); font-size:16.5px; line-height:1.65; }
.clause p { margin:0 0 10px; } .clause p:last-child { margin-bottom:0; }
.clause ul, .clause ol { margin:0 0 12px; padding-left:20px; } .clause ul:last-child, .clause ol:last-child { margin-bottom:0; } .clause li::marker { color:var(--t); }
.btn[aria-disabled=true] { opacity:.55; pointer-events:none; }

/* ---- Small screens and reduced motion ---- */
@media (max-width:820px) {
  .hero { grid-template-columns:1fr; } .hero-mark { display:none; } nav.seg { display:none; }
  .mode { margin-left:auto; }
  h1 { font-size:34px; } .wrap.policy, header.top.wide:not(.small) .bar { width:auto; padding:0 16px; } form.quote, .quote-panel { grid-template-columns:1fr; } .quote-panel { padding:20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  header.top, header.top .bar, .brand, .brand svg, nav.seg a, nav.seg .ind, .mode button, .mode .thumb, .btn { transition:none; }
  .btn:hover { transform:none; }
}