/* ============================================================================ AppealHound — system.css Reset, type roles and every component. 🚫 This file must NEVER contain a raw hex, a vendor token (--ds-*, --do-*), or a hard-coded font name. It consumes the theme contract only. See themes/_CONTRACT.md. The moment a value is hard-coded here, themes stop being swappable and the whole structure is pointless. ========================================================================== */ *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--bg);color:var(--body); font:var(--w-body) var(--t-body)/1.55 var(--font-sans); -webkit-font-smoothing:antialiased;font-feature-settings:"kern" 1} img{max-width:100%} /* ---------- type roles ---------------------------------------------------- */ h1,h2,h3,.display-xl,.display-hero,.display-section{ margin:0;color:var(--ink);font-family:var(--font-display); font-weight:var(--w-heading);line-height:1.14;letter-spacing:var(--track-display)} .display-xl{font-size:var(--t-display);font-weight:var(--w-display)} .display-hero,h1{font-size:var(--t-hero);font-weight:var(--w-display)} .display-section,h2{font-size:var(--t-h2);line-height:1.25} h3{font-size:var(--t-h3);line-height:1.4} h2 + p,h1 + p,.display-section + p{margin-top:var(--s4)} .lead{font-size:var(--t-lead);line-height:1.5;color:var(--body);max-width:var(--measure)} .micro,.muted{font-size:var(--t-small);line-height:1.5;color:var(--muted)} .eyebrow{display:inline-block;font:600 var(--t-micro)/1 var(--font-sans); letter-spacing:.09em;text-transform:uppercase;color:var(--brand);margin:0 0 var(--s4)} .stat-num{font:var(--w-display) var(--t-hero)/1 var(--font-display); letter-spacing:var(--track-display);font-variant-numeric:tabular-nums;color:var(--money-text)} .stat-num.sm{font-size:var(--t-h2)} .num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} p{margin:0 0 var(--s4);max-width:var(--measure)} strong{color:var(--ink);font-weight:var(--w-strong)} a{color:var(--brand);text-decoration:none} a:hover{color:var(--brand-press);text-decoration:underline} code{font:var(--t-small)/1.5 var(--font-mono);background:var(--bg-sunken); padding:2px 6px;border-radius:var(--r-control);color:var(--ink)} /* ---------- layout -------------------------------------------------------- */ .wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--s5)} /* .narrow sits ON .wrap, so narrowing the wrap itself would re-centre the section and misalign it against every other one. Instead keep the wrap at full width and cap the CHILDREN. Same left edge, shorter measure. */ .wrap.narrow{max-width:var(--wrap)} .wrap.narrow > *{max-width:var(--wrap-narrow)} section{padding:var(--s8) 0} .sunken{background:var(--bg-sunken)} .inv{background:var(--bg-inv);color:var(--body-inv)} .inv h1,.inv h2,.inv h3,.inv .display-hero{color:var(--ink-inv)} .inv strong{color:var(--ink-inv)} .inv .lead{color:var(--body-inv)} .inv .eyebrow,.inv a{color:var(--brand-inv)} .inv .micro,.inv .muted,.inv .cta-note{color:var(--muted-inv)} .inv .stat-num{color:var(--money)} header{background:var(--bg);border-bottom:1px solid var(--line)} .bar{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) 0} .bar .logo{display:flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none; font:var(--w-strong) 18px/1 var(--font-display);letter-spacing:var(--track-display)} .bar .logo:hover{text-decoration:none} .bar .logo svg,.bar .logo .mark{display:block;flex:none} /* The mark carries real detail (55 paths). Below 24px it turns to mush, so the nav uses 30px and BRAND.md states 24px as the hard floor. */ /* The v2 mark is a 150x150 square, 2 paths. It holds down to ~20px. */ .mark{width:30px;height:30px} .foot-brand .mark{width:34px;height:34px} .bar .crumb{margin-left:auto;font-size:var(--t-small);color:var(--muted)} .hero{padding:var(--s9) 0 var(--s8)} .hero h1{max-width:17ch;margin-bottom:var(--s5)} .hero-grid{display:grid;gap:var(--s8);align-items:center; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)} @media (max-width:900px){.hero-grid{grid-template-columns:1fr;gap:var(--s6)} .hero h1{max-width:none}.paper{max-width:none}} /* ---------- button -------------------------------------------------------- */ .btn{display:inline-flex;align-items:center;justify-content:center;height:48px; padding:0 var(--s6);background:var(--brand);color:var(--on-brand);border:0; border-radius:var(--r-pill);cursor:pointer;text-decoration:none; font:var(--w-strong) var(--t-body)/1 var(--font-sans);transition:opacity .12s ease} .btn:hover{background:var(--brand-press);color:var(--on-brand);text-decoration:none} /* On an inverted band the brand colour sits too close to the ground, so the button loses contrast. Invert it: the surface becomes the button. */ .inv .btn{background:var(--ink-inv);color:var(--bg-inv)} .inv .btn:hover{background:var(--brand-wash);color:var(--bg-inv)} .btn.subtle{background:var(--bg-sunken);color:var(--ink)} .cta{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;margin:var(--s6) 0 0} .cta-note{font-size:var(--t-small);color:var(--muted)} /* ---------- card ---------------------------------------------------------- */ .card{background:var(--bg-card);border-radius:var(--r-card);box-shadow:var(--e-card); padding:var(--s5) var(--s6);margin:0 0 var(--s4)} .card-title{font:var(--w-strong) var(--t-h3)/1.4 var(--font-sans);color:var(--ink);margin:0 0 var(--s1)} .card-desc{font-size:var(--t-small);color:var(--muted);margin:0 0 var(--s4)} .cards{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin:0 0 var(--s4)} .cards > .card{margin:0} /* ---------- numbered steps ------------------------------------------------ */ ol.steps{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;gap:var(--s3)} ol.steps li{counter-increment:s;position:relative;padding:var(--s5) var(--s6) var(--s5) 62px; background:var(--bg-card);border-radius:var(--r-card);box-shadow:var(--e-card)} ol.steps li::before{content:counter(s);position:absolute;left:var(--s5);top:var(--s5); width:26px;height:26px;border-radius:var(--r-pill);background:var(--brand-wash); color:var(--brand);font:600 var(--t-small)/26px var(--font-sans);text-align:center} ol.steps p{margin:var(--s1) 0 0;font-size:var(--t-small);color:var(--muted)} /* ---------- spec tiles ---------------------------------------------------- */ .spec{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(160px,1fr));margin:0 0 var(--s4)} .spec > div{background:var(--bg-sunken);border-radius:var(--r-base);padding:var(--s4) var(--s5)} .spec .k{font:600 var(--t-micro)/1 var(--font-sans);letter-spacing:.09em; text-transform:uppercase;color:var(--muted);margin:0 0 var(--s2)} .spec .v{font-size:var(--t-body);font-weight:var(--w-strong);color:var(--ink);margin:0} /* ---------- lozenge ------------------------------------------------------- */ .chip{display:inline-block;font:600 var(--t-micro)/1 var(--font-sans);letter-spacing:.04em; text-transform:uppercase;padding:5px 9px;border-radius:var(--r-control); background:var(--bg-sunken);color:var(--ink)} .chip.ok{background:var(--ok-wash);color:var(--ok-text)} .chip.info{background:var(--brand-wash);color:var(--brand)} .chip.warn{background:var(--warn-wash);color:var(--warn)} .chip.bad{background:var(--bad-wash);color:var(--bad)} .chip-row{display:flex;flex-wrap:wrap;gap:var(--s2)} /* ---------- section message ----------------------------------------------- */ .note{border-radius:var(--r-base);background:var(--bg-sunken); padding:var(--s4) var(--s5);margin:0 0 var(--s4);font-size:var(--t-small)} .note.info{background:var(--brand-wash)} .note.warn{background:var(--warn-wash);color:var(--warn)} .note.bad{background:var(--bad-wash);color:var(--bad)} .note > :last-child{margin-bottom:0} /* ---------- table --------------------------------------------------------- */ table{border-collapse:collapse;width:100%;font-size:var(--t-small)} thead th{text-align:left;padding:0 var(--s3) var(--s2) 0; font:600 var(--t-micro)/1 var(--font-sans);letter-spacing:.08em;text-transform:uppercase; color:var(--muted);border-bottom:2px solid var(--line)} th.n,td.n{text-align:right} td{padding:var(--s3) var(--s3) var(--s3) 0;vertical-align:top;border-bottom:1px solid var(--line)} td.n{white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:var(--w-strong);color:var(--ink)} tr:last-child td{border-bottom:0} /* ---------- form ---------------------------------------------------------- */ label{display:block;font:var(--w-strong) var(--t-small)/1.4 var(--font-sans);color:var(--ink);margin:0 0 var(--s1)} .field{margin:0 0 var(--s4)} .row{display:flex;gap:var(--s4)}.row > .field{flex:1} input[type=text],textarea,select,input[type=file]{width:100%;padding:9px var(--s3); font:var(--w-body) var(--t-small)/1.5 var(--font-sans);color:var(--ink); background:var(--bg-sunken);border:2px solid transparent;border-radius:var(--r-control)} input:focus-visible,textarea:focus-visible,select:focus-visible{ outline:none;background:var(--bg);border-color:var(--brand)} textarea{min-height:190px;font-family:var(--font-mono);line-height:1.55} /* ---------- footer ------------------------------------------------------- The