/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/archivo-400-2525c7.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/archivo-400-a4c949.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/archivo-400-695c7a.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;
}
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/archivo-400-2525c7.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/archivo-400-a4c949.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/archivo-400-695c7a.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;
}
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/archivo-400-2525c7.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/archivo-400-a4c949.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/archivo-400-695c7a.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;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/barlow-condensed-600-7db48c.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/barlow-condensed-600-0546fe.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/barlow-condensed-600-070a7e.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;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/barlow-condensed-700-ec156d.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/barlow-condensed-700-14dba4.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/barlow-condensed-700-356ce4.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;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/barlow-condensed-800-3e81b7.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/barlow-condensed-800-d24de7.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/barlow-condensed-800-a6d1ad.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/roboto-mono-400-aadeed.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/roboto-mono-400-8ea9e2.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/roboto-mono-400-3bd635.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/roboto-mono-400-c690b1.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/roboto-mono-400-e30946.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/roboto-mono-400-bf6390.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/roboto-mono-400-aadeed.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/roboto-mono-400-8ea9e2.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/roboto-mono-400-3bd635.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/roboto-mono-400-c690b1.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/roboto-mono-400-e30946.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/roboto-mono-400-bf6390.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/roboto-mono-400-aadeed.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/roboto-mono-400-8ea9e2.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/roboto-mono-400-3bd635.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/roboto-mono-400-c690b1.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/roboto-mono-400-e30946.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/roboto-mono-400-bf6390.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;
}

/* ============================================================================
   DealWrench marketing. Ported from the September 2026 design prototype.

   The theme follows the reader's machine and nothing else -- there is no
   toggle and no stored preference. Dark is the base, declared on bare :root so
   it is also what a browser too old for the query gets; light applies under
   prefers-color-scheme: light, which is what an unset preference reports.

   Every colour is a token declared on bare :root first. A colour whose only
   definition sits inside the media block never applies in the base state,
   which is the classic half-themed-page bug.

   Marketing only. The product at /app has its own stylesheet and is untouched.
   ========================================================================= */

:root{
  --paper:#17171a; --card:#1f1e21; --wash:#201f23;
  --ink:#eeece7; --ink-2:#c9c6bf; --muted:#a0a6af;
  --rule:#3a3833; --rule-2:#2a2926;
  --accent:#6fb3ff; --onaccent:#0b1b2c;
  --good:#9dbd3f; --warn:#d9a441; --bad:#e0654a;
  --sans:Archivo,'Helvetica Neue',Helvetica,Arial,sans-serif;
  --disp:'Barlow Condensed','Helvetica Neue',Helvetica,sans-serif;
  --mono:'Roboto Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --shade:rgba(255,255,255,.045);
}
@media (prefers-color-scheme:light){
  :root{
    --paper:#fafaf7; --card:#ffffff; --wash:#f2efe8;
    --ink:#1a1a1a; --ink-2:#3d3b37; --muted:#59616b;
    --rule:#d9d5cc; --rule-2:#e6e2d9;
    --accent:#0f62c4; --onaccent:#ffffff;
    --good:#4a7a1f; --warn:#8a6414; --bad:#b2311c;
    --shade:rgba(0,0,0,.035);
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--paper);color:var(--ink);
  font:15px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,dl,dd,figure,ul{margin:0}
img{max-width:100%;height:auto}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
button:disabled{opacity:.6;cursor:wait}
a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto}}

.wrap{max-width:1140px;margin:0 auto;padding-inline:24px}
.narrow{max-width:820px}
section{border-bottom:1px solid var(--rule)}
section>.wrap{padding-block:64px}
.soft{background:var(--wash)}

/* ---- Type ---------------------------------------------------------------
   The display face is Barlow Condensed at 800, uppercase. It carries every
   heading; the body face never does. */
h1{font:800 clamp(38px,5.4vw,64px)/0.95 var(--disp);text-transform:uppercase;
  letter-spacing:.005em;text-wrap:balance;max-width:16ch}
h2{font:800 clamp(28px,3.4vw,42px)/1.02 var(--disp);text-transform:uppercase;
  letter-spacing:.005em;text-wrap:balance}
h3{font:600 18px/1.35 var(--sans);letter-spacing:-.01em;color:var(--ink)}
.eyebrow,.number{display:block;font:500 10.5px/1.6 var(--mono);
  letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.eyebrow+h1,.eyebrow+h2{margin-top:18px}
.lead{font-size:17px;line-height:1.6;color:var(--ink-2);max-width:34em}
h1+.lead,h2+.lead,.lead+h2{margin-top:20px}
.lead+.lead{margin-top:14px}
p{max-width:36em;color:var(--ink-2)}
.micro,.stamp,.fine,.hint{font:500 10.5px/1.7 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-top:20px;max-width:none}
.err{color:var(--bad);font-size:14px}

/* ---- Buttons ------------------------------------------------------------ */
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn,.btn2{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font:700 17px/1 var(--disp);text-transform:uppercase;letter-spacing:.05em;
  padding:14px 24px;min-height:48px;border:1px solid transparent;border-radius:0;
  text-decoration:none;background:var(--accent);color:var(--onaccent)}
.btn:hover{background:var(--ink);color:var(--paper);text-decoration:none}
.btn2{background:none;color:var(--ink);border-color:var(--rule)}
.btn2:hover{border-color:var(--ink);text-decoration:none;color:var(--ink)}
.btn.small{font-size:14px;padding:10px 16px;min-height:40px}
.text-link{display:inline-block;font:500 11px/1.6 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;margin-top:22px}

.skip{position:absolute;left:-9999px;top:0;z-index:60;background:var(--accent);
  color:var(--onaccent);padding:10px 16px;font:500 11px var(--mono);
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.skip:focus{left:12px;top:12px}

/* ---- Header & footer ---------------------------------------------------- */
header{position:sticky;top:0;z-index:20;background:var(--paper);
  border-bottom:1px solid var(--rule)}
.header-inner{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  min-height:70px;padding-block:14px}
.brand{display:inline-flex;align-items:center;text-decoration:none}
.brand img{display:block;height:22px;width:auto}
.brand:hover{text-decoration:none}
nav{display:flex;align-items:center;gap:2px;flex-wrap:wrap;margin-inline:auto}
nav a{padding:8px 10px;font:500 11px var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);text-decoration:none}
nav a:hover{color:var(--ink)}
nav a[aria-current]{color:var(--accent)}
.header-actions{display:flex;gap:14px;align-items:center}
.header-actions>a:not(.btn){font:500 11px var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);text-decoration:none}
.header-actions>a:not(.btn):hover{color:var(--ink)}

footer{border-top:1px solid var(--rule);background:var(--paper)}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:36px 28px;padding:52px 0}
.footer-grid h3{font:500 10.5px var(--mono);letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.footer-grid a:not(.brand){display:block;font-size:14px;margin-bottom:9px;
  color:var(--ink-2);text-decoration:none}
.footer-grid a:not(.brand):hover{color:var(--accent)}
.footer-grid p{font-size:14px;color:var(--muted);margin:14px 0}
.footer-bottom{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;
  border-top:1px solid var(--rule-2);padding:18px 0 44px;
  font:500 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.footer-bottom a{color:var(--muted);text-decoration:none}
.footer-bottom a:hover{color:var(--ink)}

/* ---- Page furniture ----------------------------------------------------- */
.page-hero>.wrap,.hero>.wrap{padding-block:64px 56px}
.hero{background:var(--paper)}
.hero-grid,.photo-hero{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:52px;align-items:start}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:52px;align-items:start}
.cols,.source-grid,.feature-grid,.fit-grid,.pricing-grid{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:32px;margin-top:32px}
.section-head{margin-bottom:28px}

/* A ruled list, not a card stack. The rule is the whole device. */
.rows{display:grid;gap:0;margin-top:8px}
.rows>div{border-top:1px solid var(--rule);padding:16px 0;
  display:grid;grid-template-columns:minmax(150px,auto) 1fr;gap:8px 28px;align-items:baseline}
.rows>div:first-child{border-top:0}
.rows dt{font:500 10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.rows dd{margin:0;color:var(--ink-2);font-size:14.5px;line-height:1.65}
.rows dd strong{color:var(--ink);font-weight:600}
@media (max-width:640px){.rows>div{grid-template-columns:1fr}}

.check-list{list-style:none;padding:0;margin-top:22px;display:grid;gap:0}
.check-list li{border-top:1px solid var(--rule-2);padding:13px 0 13px 26px;
  position:relative;color:var(--ink-2);font-size:14.5px;max-width:60em}
.check-list li:first-child{border-top:0}
.check-list li::before{content:"—";position:absolute;left:0;color:var(--muted);font-family:var(--mono)}

.numbered,.build-timeline,.steps{list-style:none;padding:0;margin-top:22px}
.numbered li,.build-timeline li{border-top:1px solid var(--rule-2);padding:14px 0;color:var(--ink-2)}

.source-grid article,.feature-grid article,.cols article{border:1px solid var(--rule);
  background:var(--card);padding:20px}
.source-grid article a{display:block;margin-top:9px;font:500 11px var(--mono);
  letter-spacing:.1em;text-transform:uppercase}
.source-grid article p{font-size:14px;color:var(--muted);margin-top:8px}

.pill{display:inline-block;border:1px solid var(--rule);padding:4px 10px;
  font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.signal{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--good);margin-right:7px}
.yes{color:var(--good)} .later{color:var(--warn)} .status{font:500 10.5px var(--mono);
  letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}

.closing{background:var(--wash);border-bottom:0}
.closing-inner{display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between;align-items:center}

/* The figure is the only thing that gets the display treatment. The unit rode
   along with it when this was ported and came out at 60px mono, which reads as
   two numbers rather than a price. */
.price{font:700 clamp(40px,6vw,58px)/1 var(--mono);font-variant-numeric:tabular-nums;
  color:var(--ink);letter-spacing:-.02em;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.price span{font:500 14px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted)}
.price-panel,.plan-summary{border:1px solid var(--rule);background:var(--card);padding:26px}
.faq details{border-top:1px solid var(--rule);padding:14px 0}
.faq summary{cursor:pointer;font-weight:600;color:var(--ink)}

.trust-strip{background:var(--paper)}
.trust-strip .wrap{display:flex;flex-wrap:wrap;gap:14px 30px;justify-content:space-between;
  padding-block:22px;font:500 10.5px var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}

/* ---- The sample work order --------------------------------------------- */
.work-example{background:var(--card);border:1px solid var(--rule)}
.example-top{display:flex;justify-content:space-between;gap:12px;padding:12px 16px;
  border-bottom:1px solid var(--rule);font:500 10.5px var(--mono);
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.example-title{padding:16px}
.example-title h2{font-size:24px;line-height:1.05}
.example-title p{font:500 11px var(--mono);color:var(--muted);margin-top:6px}
.example-body{padding:0}
.example-row{display:grid;grid-template-columns:1fr auto;gap:14px;padding:11px 16px;
  border-bottom:1px solid var(--rule);align-items:baseline;font-size:14px}
.example-row small{display:block;font:500 10.5px var(--mono);color:var(--muted);margin-top:3px}
.example-bottom{display:grid;grid-template-columns:1fr auto;gap:14px;padding:14px 16px;
  border-top:3px double var(--rule);
  font:500 10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.example-note{display:flex;gap:12px;padding:14px 16px;border-top:1px solid var(--rule);
  background:var(--shade);font-size:13px;color:var(--muted)}
.note-icon{color:var(--accent)}
.steps{display:flex;gap:0;margin:0 16px;border:1px solid var(--rule);
  font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.steps span{padding:9px 10px;flex:1;text-align:center;color:var(--muted)}
.steps .selected{background:var(--accent);color:var(--onaccent)}
.marketing-photo{margin:0;min-width:0}
.marketing-photo img{display:block;width:100%;border:1px solid var(--rule)}

/* ---- Invoice generator (/tools/invoice-generator) ----------------------- */
.inv-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:40px;align-items:start;margin-top:28px}
@media (max-width:860px){.inv-grid{grid-template-columns:1fr;gap:28px}}
.inv-form fieldset{border:1px solid var(--rule);padding:16px 18px 18px;margin:0 0 16px}
.inv-form legend{font:500 10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);padding:0 6px}
.inv-form label{display:grid;gap:5px;margin-bottom:11px;font-size:13px;color:var(--ink-2)}
.inv-form input{font:14px var(--sans);padding:9px 11px;border:1px solid var(--rule);
  background:var(--paper);color:var(--ink);width:100%}
.inv-part{display:grid;grid-template-columns:1fr 62px 90px 32px;gap:7px;margin-bottom:8px}
.inv-part input{font-size:13px;padding:8px 9px}
.inv-part .p-del{border:1px solid var(--rule);background:none;color:var(--muted);
  font-size:17px;line-height:1}
.inv-part .p-del:hover{color:var(--bad);border-color:var(--bad)}
.inv-paper{border:1px solid var(--rule);background:var(--card);padding:22px;position:sticky;top:90px}
@media (max-width:860px){.inv-paper{position:static}}
.inv-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  border-bottom:1px solid var(--rule);padding-bottom:12px}
.inv-head strong{font:700 22px var(--disp);text-transform:uppercase;letter-spacing:.01em}
.inv-head span,.inv-meta span{font:500 10.5px var(--mono);letter-spacing:.1em;color:var(--muted)}
.inv-meta{display:flex;flex-wrap:wrap;gap:4px 18px;padding:12px 0 4px}
.inv-table{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:10px}
.inv-table td{padding:9px 0;border-top:1px solid var(--rule-2);vertical-align:top;color:var(--ink-2)}
.inv-table td:last-child{text-align:right;font-family:var(--mono);
  font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}
.inv-table tfoot td{color:var(--muted)}
.inv-table tfoot .inv-total td{color:var(--ink);font-weight:700;font-size:16px;
  border-top:3px double var(--rule)}
.inv-fine{margin-top:14px;font:500 10px/1.7 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}

/* ---- Claims ledger (/receipts) ------------------------------------------ */
.scroll-x{overflow-x:auto;margin-top:22px}
.receipt-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:620px}
.receipt-table th{text-align:left;font:500 10.5px var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);font-weight:500;
  padding:0 18px 9px 0;border-bottom:1px solid var(--rule)}
.receipt-table td{padding:12px 18px 12px 0;border-bottom:1px solid var(--rule-2);
  vertical-align:top;line-height:1.55;color:var(--ink-2)}
.receipt-table td:nth-child(2){font-family:var(--mono);font-variant-numeric:tabular-nums;
  white-space:nowrap;color:var(--ink)}
.receipt-table td:last-child{font:500 10.5px var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap;padding-right:0}

@media (max-width:760px){
  nav{margin-inline:0;order:3;width:100%}
  .footer-bottom>span:nth-child(2){display:none}
}
@media print{
  header,footer,.page-hero,.soft,.closing,.inv-form,.actions,.skip,noscript{display:none!important}
  .inv-grid{display:block}
  .inv-paper{border:0;padding:0;position:static}
  section{border:0}
  section>.wrap{padding:0}
}

/* ---- Wordmark, one file per ground --------------------------------------
   logo.png sets WRENCH in white and logo-light.png sets it in ink, so the
   wrong one is invisible rather than merely off. Both carry an empty alt and
   the anchor carries the aria-label, so a screen reader hears the name once. */
.brand img{display:block;height:22px;width:auto}
.footer-grid .brand img{height:20px}
.brand .logo-light{display:none}
@media (prefers-color-scheme:light){
  .brand .logo-dark{display:none}
  .brand .logo-light{display:block}
}

/* ---- Comparison tables (/compare/*) -------------------------------------
   Deliberately NOT sharing .receipt-table: that one sets column two in mono
   because it holds figures, and these hold sentences. */
.compare-table{width:100%;border-collapse:collapse;font-size:14px;min-width:660px}
.compare-table th{text-align:left;font:500 10.5px var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);font-weight:500;
  padding:0 20px 10px 0;border-bottom:1px solid var(--rule)}
.compare-table th:first-child{width:13%}
.compare-table th:not(:first-child){width:43.5%}
.compare-table td{padding:14px 20px 14px 0;border-bottom:1px solid var(--rule-2);
  vertical-align:top;line-height:1.6;color:var(--ink-2)}
.compare-table td:last-child{padding-right:0}
.compare-table td.c-label{font:500 10.5px var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);padding-top:16px}
.compare-table td.c-us{color:var(--ink)}