/* Self-hosted. Previously three families were pulled from fonts.googleapis.com as a
   render-blocking third-party stylesheet, adding a DNS lookup, a TLS handshake and a
   round trip ahead of first paint, on a page whose entire job is to load fast for
   paid traffic. All three are OFL-licensed, so self-hosting is permitted.
   Regenerate with the recipe in README.md if the families ever change. */
@font-face{
  font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/ibm-plex-mono-latin-ext.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;
}
@font-face{
  font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/ibm-plex-mono-latin.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(/assets/fonts/ibm-plex-mono-latin-ext.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;
}
@font-face{
  font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url(/assets/fonts/ibm-plex-mono-latin.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:'Source Serif 4';font-style:italic;font-weight:400;font-display:swap;
  src:url(/assets/fonts/source-serif-4-italic-latin-ext.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;
}
@font-face{
  font-family:'Source Serif 4';font-style:italic;font-weight:400;font-display:swap;
  src:url(/assets/fonts/source-serif-4-italic-latin.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:'Source Serif 4';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/source-serif-4-latin-ext.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;
}
@font-face{
  font-family:'Source Serif 4';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/source-serif-4-latin.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:'Source Serif 4';font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/fonts/source-serif-4-latin-ext.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;
}
@font-face{
  font-family:'Source Serif 4';font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/fonts/source-serif-4-latin.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:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;
  src:url(/assets/fonts/space-grotesk-latin-ext.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;
}
@font-face{
  font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;
  src:url(/assets/fonts/space-grotesk-latin.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:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/fonts/space-grotesk-latin-ext.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;
}
@font-face{
  font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/fonts/space-grotesk-latin.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;
}

/* DialWorth, restrained, typographic, one accent.
   Brand brief (spec §13): serif body, geometric sans headings, one accent color,
   generous whitespace. It should read as an engineering report, not a marketing deck. */

:root{
  --paper:#FBFAF7;
  --paper-2:#F3F1EB;
  --ink:#15171B;
  --ink-2:#3E434B;
  --ink-3:#565C66;
  --rule:#CFC9BC;
  --rule-2:#E8E5DD;
  /* Petrol & Paper (D-0065, amplified D-0066). A vivid petrol BLUE, the first petrol
     pick sat so close to the old green that the change was invisible at a glance. 6.9:1
     on paper (AA all sizes); the rust tone below stays the only warm signal. Brand
     assets regenerate from this value via dialworth/scripts/brand_logo.py. */
  --accent:#095E80;
  /* Muted sibling for labels and eyebrows. 4.9:1+ on BOTH paper surfaces. */
  --accent-muted:#3C6E86;
  --accent-soft:#095E800F;
  /* Primary-action color. Deliberately NOT the accent: the accent appears across links,
     labels and the logo, so a CTA sharing it has no isolation, the one part of "button
     colour" research that actually replicates. Ink gives the CTA 17:1 contrast and a
     color nothing else on the page uses as an action. */
  --cta:var(--ink);
  --warn:#8A4B12;

  --display:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;
  --body:"Source Serif 4","Iowan Old Style",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --max:1120px;
  --narrow:720px;

  /* Paper grain, feTurbulence, inlined as a data URI. */
  --grain:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background-color:var(--paper);color:var(--ink);
  /* Depth wash + paper grain (D-0068): the page opens under a soft petrol light and
     the grain is strong enough to actually read as paper. Both inline, no requests.
     The ambient graph-paper grid that used to sit under everything is gone (owner
     call, 2026-08-14): it read as a template, not a firm. Depth now comes from the
     light wash and the grain alone. */
  background-image:
    radial-gradient(1300px 700px at 80% -260px, rgba(9,94,128,.05), transparent 65%),
    var(--grain);
  background-repeat:no-repeat,repeat;
  background-size:auto,200px 200px;
  font-family:var(--body);font-size:18px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
  /* `overflow-x:hidden` here would make body a scroll container and silently break
     position:sticky on the header. `clip` contains overflow without that side effect.
     Wide figures scroll inside their own .figure-scroll wrapper instead. */
  overflow-x:clip;
}

/* Anchor targets must clear the sticky header, or every in-page link lands with its
   heading hidden underneath it. */
[id]{scroll-margin-top:88px}

::selection{background:var(--accent);color:var(--paper)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:1px}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}

.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
/* A narrow measure must not re-centre itself, or prose lands in a different left margin
   from the hero above it. Keep the outer gutter identical and cap the content instead. */
.wrap.narrow{max-width:var(--max)}
.wrap.narrow>*{max-width:var(--narrow)}

h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.12;letter-spacing:-.018em}
/* Display scale raised a step (D-0065): the hero statement is the page's one moment of
   drama, at 60px it read timid next to the whitespace it sits in. */
h1{font-size:clamp(40px,6vw,66px)}
h2{font-size:clamp(27px,3.4vw,38px)}
h3{font-size:19px;letter-spacing:-.01em}
p+p{margin-top:1.05em}

.eyebrow{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--accent-muted);display:block;margin-bottom:16px;font-weight:500;
}
.muted{color:var(--ink-2)}
.small{font-size:15px;line-height:1.55}
.fine{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink-3);line-height:1.7}
.figure{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:60;background:rgba(251,250,247,.92);
  backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--rule);
  /* The brand bar (D-0066): a 3px petrol rule across the top of every page. */
  border-top:3px solid var(--accent);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;height:66px}
.logo{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-.03em;display:flex;align-items:center;gap:9px}
/* The mark IS the D, the lockup reads [D]ialWorth, so the glyph and the wordmark
   must share a baseline and cap height exactly. */
/* Both dimensions are explicit: an inline <svg> with only a viewBox has no intrinsic
   size, and `width:auto` collapses it to a sliver inside a flex row. 30:32 is the
   mark's aspect ratio. */
.logo .mark{height:19px;width:17.8px;display:block;fill:var(--accent);flex:none}
.logo{gap:1.5px}
footer .logo .mark{height:21px;width:19.7px}
.logo b{font-weight:600;color:var(--accent)}
nav.links{display:flex;gap:26px;font-family:var(--mono);font-size:12px;letter-spacing:.11em;text-transform:uppercase}
nav.links a{color:var(--ink-2);padding:4px 0;border-bottom:1px solid transparent;transition:.15s}
nav.links a:hover,nav.links a[aria-current]{color:var(--accent);border-bottom-color:var(--accent)}
/* Padded to a ≥44px hit area; the negative margin keeps the visual position. */
.burger{display:none;background:none;border:0;font-size:20px;cursor:pointer;color:var(--ink);padding:12px;margin:-12px}

/* Keyboard users get a way past the 8-item header. Visible only on focus. */
.skip-link{
  position:absolute;left:16px;top:-52px;z-index:80;background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;padding:12px 18px;
  border-radius:1px;transition:top .15s;
}
.skip-link:focus{top:12px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--mono);font-size:12px;letter-spacing:.11em;text-transform:uppercase;
  padding:13px 22px;border:1px solid var(--accent);border-radius:1px;transition:.16s;cursor:pointer;
}
.btn-primary{background:var(--cta);border-color:var(--cta);color:var(--paper);box-shadow:0 1px 0 rgba(0,0,0,.06)}
.btn-primary:hover{background:#000;border-color:#000;transform:translateY(-1px);box-shadow:0 4px 14px rgba(21,23,27,.22)}
.btn-ghost{background:transparent;color:var(--accent)}
.btn-ghost:hover{background:var(--accent-soft);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .btn:hover{transform:none}
  html{scroll-behavior:auto}
}

/* ---------- sections ---------- */
section{padding:104px 0;border-top:1px solid var(--rule)}
section:first-of-type{border-top:0}
.section-head{max-width:660px;margin-bottom:52px}
.section-head p{margin-top:18px;color:var(--ink-2)}

/* ---------- hero ----------
   Typographic and quiet. Depth comes from one soft wash of light, nothing else.
   A graph-paper grid used to sit across the top-right of every hero; it read as a
   wireframe template rather than a firm's site, and it competed with the headline for
   attention on the page a stranger sees first. Photography earns its place further down,
   where it shows the work being measured rather than decorating a headline. */
.hero{padding:104px 0 92px;position:relative;isolation:isolate}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(1100px 620px at 78% -18%, rgba(9,94,128,.11), transparent 66%),
    linear-gradient(180deg, rgba(243,241,235,.72), rgba(251,250,247,0) 62%);
}
.hero .wrap{position:relative}
.hero .lede{font-size:clamp(19px,2.1vw,23px);color:var(--ink-2);max-width:56ch;margin:26px 0 36px}
.hero h1{max-width:17ch}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.hero .fine{margin-top:30px;max-width:60ch}

/* ---------- hero ledger (D-0069) ----------
   The homepage's first impression carries a fragment of the deliverable itself, an
   audit-ledger card beside the headline, so the visitor is looking at someone's actual
   numbers before a single claim is made. Rows are the engine's published worked example
   (FIG. 03); the two flagged shares are the blood-pressure reading: uncomfortable, not
   alarming. */
.hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:64px;align-items:center}
.ledger{
  background:var(--paper);border:1px solid var(--rule);border-top:3px solid var(--accent);
  box-shadow:0 1px 2px rgba(21,23,27,.05), 0 28px 64px -40px rgba(21,23,27,.5);
  padding:22px 24px 18px;
}
.ledger__head{
  display:flex;justify-content:space-between;gap:14px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--accent-muted);padding-bottom:12px;border-bottom:1px solid var(--rule);
}
.ledger__ref{color:var(--ink-3);letter-spacing:.08em}
/* Reconciliation layout: a leading operator column (−/=) makes the ledger read as
   arithmetic, top to bottom, demand, minus each leak, equals booked. The note used
   to invite the reader to check that the buckets sum while the rows mixed a subtotal
   (Answered) in with terminal buckets, so the visible numbers appeared to sum to
   188%. The operators fix what the copy could not. */
.ledger__row{
  display:grid;grid-template-columns:14px 1fr auto 54px;gap:12px;align-items:baseline;
  padding:10px 0;border-bottom:1px solid var(--rule-2);font-size:15px;
}
.ledger__row .op{
  font-family:var(--mono);font-size:13px;color:var(--accent-muted);text-align:center;
}
.ledger__row span:nth-child(3),.ledger__row span:nth-child(4){
  font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:13.5px;
}
.ledger__row span:nth-child(4){text-align:right;color:var(--ink-3)}
.ledger__row span.flagged{color:var(--warn)}
.ledger__row--subtotal{border-top:1px solid var(--rule);font-weight:500}
.ledger__row--total{border-top:1px solid var(--rule);border-bottom:0;font-weight:600;margin-top:2px;padding-top:13px}
.ledger__note{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;line-height:1.65;
  color:var(--ink-3);margin-top:13px;
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .ledger{max-width:480px}
}

/* Alternating surfaces give the long pages a rhythm without adding ornament.
   Grid-free (same 2026-08-14 owner call as the body): a flat wash of the darker
   paper tone, bounded by hairlines, reads as a section of a report rather than
   a wireframe. */
section.tint{
  background:linear-gradient(180deg, rgba(243,241,235,.85), rgba(243,241,235,.38));
  border-top:1px solid var(--rule-2);
  border-bottom:1px solid var(--rule-2);
}

/* Hero terms bar. Four facts a buyer weighs before they will click anything: who it is
   for, what it costs, how long it takes, and what happens if it does not work. They were
   spread across four different pages; a visitor who bounced from the hero never saw any of
   them. Monospace and small on purpose, this is a spec line, not a sales line. */
.terms-bar{
  display:flex;flex-wrap:wrap;gap:10px 26px;margin:26px 0 0;padding:16px 0 0;
  border-top:1px solid var(--rule);list-style:none;
}
/* Not a flex container: the gap property would land between the text nodes inside the
   item, which pushes a space in front of every comma. Absolute-positioned tick instead. */
.terms-bar li{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;color:var(--ink-2);
  margin:0;padding:0 0 0 17px;position:relative;
}
.terms-bar li::before{
  content:"\2713";color:var(--accent);font-size:12px;position:absolute;left:0;top:0;
}
.terms-bar strong{color:var(--ink);font-weight:600}
@media (max-width:640px){.terms-bar{gap:8px 18px}.terms-bar li{font-size:12px}}

/* Claim block, the sentence the whole business rests on */
.claim{
  border-left:2px solid var(--accent);padding:4px 0 4px 26px;margin:44px 0 0;
  max-width:62ch;font-size:19px;
}

/* ---------- rule-separated lists ---------- */
.rows{border-top:1px solid var(--rule)}
.row{
  display:grid;grid-template-columns:52px 1fr;gap:26px;
  padding:30px 0;border-bottom:1px solid var(--rule-2);align-items:start;
}
.row .k{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--accent-muted);padding-top:5px}
.row h3{margin-bottom:9px}
.row p{color:var(--ink-2);max-width:62ch}

.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--rule)}
.cols>div{padding:34px 30px 34px 0;border-right:1px solid var(--rule-2)}
.cols>div:last-child{border-right:0;padding-right:0}
.cols h3{margin-bottom:10px}
.cols p{color:var(--ink-2);font-size:16.5px;line-height:1.58}
.cols .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;color:var(--accent-muted);display:block;margin-bottom:14px}

/* ---------- engagement tiers ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.tier{background:var(--paper);padding:34px 28px;display:flex;flex-direction:column}
.tier.featured{background:var(--paper-2)}
.tier .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-muted);margin-bottom:12px}
.tier h3{font-size:22px}
.tier .amt{font-family:var(--mono);font-size:24px;margin:16px 0 4px;letter-spacing:-.02em}
.tier .dur{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.tier p{font-size:16px;color:var(--ink-2);margin:18px 0 22px;flex:1}
.tier ul{list-style:none;font-size:15.5px;color:var(--ink-2);margin:0 0 24px}
.tier li{padding:7px 0 7px 18px;position:relative}
.tier li::before{content:"\2713";position:absolute;left:0;color:var(--accent)}

/* ---------- calculator ---------- */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:start}
.field{margin-bottom:20px}
.field label{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-2);margin-bottom:7px}
.field .hint{font-family:var(--body);font-size:14px;color:var(--ink-3);letter-spacing:0;text-transform:none;margin-top:5px;display:block}
input,select,textarea{
  width:100%;font-family:var(--mono);font-size:15px;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule);border-radius:1px;padding:12px 13px;transition:.15s;
}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* Honeypot. Hidden from sighted users AND from screen readers (aria-hidden on the
   wrapper), so only a bot filling every field it can find will trip it. Not display:none
  , some bots skip those deliberately. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Visually hidden, still announced. The inverse of .hp: this one is FOR screen readers,
   used where a heading is needed to keep the document outline intact but would be visual
   noise on the page. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
fieldset{border:0;margin:0 0 8px}
legend{
  font-family:var(--mono);font-size:11px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--accent-muted);padding:0 0 16px;
}

.result{border:1px solid var(--rule);background:var(--paper-2);padding:34px 30px;position:sticky;top:92px}
.result .headline{font-family:var(--mono);font-size:clamp(26px,3.6vw,38px);letter-spacing:-.03em;line-height:1.18;margin:6px 0 4px}
.result .band{font-family:var(--mono);font-size:14px;color:var(--ink-2);letter-spacing:.02em}
.result .annual{font-family:var(--mono);font-size:13px;color:var(--ink-3);margin-top:14px}
.breakdown{border-top:1px solid var(--rule);margin-top:26px;padding-top:8px}
.breakdown .line{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--rule-2);font-size:15.5px}
.breakdown .line:last-child{border-bottom:0}
.breakdown .line span:last-child{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.breakdown .line.total{font-weight:600;border-top:1px solid var(--rule);border-bottom:0;margin-top:4px;padding-top:14px}
.assumption-table{width:100%;border-collapse:collapse;margin-top:14px;font-size:14px}
.assumption-table td{padding:8px 0;border-bottom:1px solid var(--rule-2);vertical-align:top}
/* Second-column prose (a sentence or two, not a short right-aligned value) needs the
   opposite of the default last-child rule below: left-aligned, body font, and free to
   wrap. Without this, a long cell forces nowrap and overflows the table's right edge
   instead of wrapping, the default rule is correct for the short-value tables that use
   this same class (calculator, benchmarks, score bands) and stays untouched for them. */
.assumption-table.prose-rows td:last-child{
  text-align:left;font-family:var(--body);font-size:15.5px;white-space:normal;color:var(--ink-2);
}

/* ---------- estimator: the DialWorth Score card ---------- */
/* The shareable artifact. Sits above the dollar figure on purpose, the dollar figure
   is an admission, the score is something an owner will post. Accent-led rather than
   paper-led so it reads as a distinct object when screenshotted out of context. */
.scorecard{
  border:1px solid var(--rule);border-top:2px solid var(--accent);
  background:var(--paper);padding:28px 30px 24px;margin-bottom:20px;
  box-shadow:0 1px 2px rgba(21,23,27,.04), 0 12px 34px -24px rgba(21,23,27,.28);
}
.sc-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.sc-eyebrow{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--accent-muted);font-weight:500;
}
.sc-grade{
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ink-2);
  text-align:right;
}
.sc-number{
  font-family:var(--mono);font-size:clamp(44px,7vw,64px);letter-spacing:-.04em;
  line-height:1.02;margin:10px 0 2px;font-variant-numeric:tabular-nums;
}
.sc-denom{font-size:.42em;color:var(--ink-3);letter-spacing:-.01em;margin-left:2px}
.sc-rank{
  font-family:var(--mono);font-size:13.5px;color:var(--ink-2);line-height:1.5;
  min-height:2.4em;
}
.sc-bars{margin-top:22px;border-top:1px solid var(--rule-2);padding-top:16px}
.sc-bar + .sc-bar{margin-top:13px}
.sc-bar-label{
  display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--ink-2);
  margin-bottom:5px;
}
.sc-bar-label span:last-child{
  font-family:var(--mono);font-size:12px;color:var(--ink-3);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.sc-track{height:5px;background:var(--rule-2);overflow:hidden}
.sc-fill{height:100%;width:0;background:var(--accent);transition:width .3s ease}
.sc-actions{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  margin-top:24px;padding-top:20px;border-top:1px solid var(--rule-2);
}
.sc-link{
  font-family:var(--mono);font-size:12px;color:var(--accent);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:rgba(9,94,128,.45);
}
.sc-link:hover{text-decoration-color:var(--accent)}
.sc-fine{font-size:12.5px;color:var(--ink-3);line-height:1.55;margin-top:16px}
@media (max-width:900px){
  .scorecard{padding:24px 22px 20px}
}
.assumption-table td:last-child{text-align:right;font-family:var(--mono);white-space:nowrap;font-size:13px}
.flagged{color:var(--warn)}
.flag-key{font-family:var(--mono);font-size:11px;color:var(--warn);margin-top:12px;display:block}

.note{
  border:1px solid var(--rule);border-left:2px solid var(--accent);
  padding:22px 24px;background:var(--paper-2);font-size:16px;color:var(--ink-2);
}
.note strong{color:var(--ink);font-weight:600}

/* ---------- figures ----------
   Charts are generated from real engine output by dialworth/scripts/site_figures.py.
   Each SVG is self-contained, title, source note and takeaway travel inside the image,
   so it stays honest when someone screenshots it out of context. */
figure{margin:0;border:1px solid var(--rule);background:var(--paper)}
.figure-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* Capped at natural width: these are SVGs so upscaling stays crisp, but it would
   inflate the type inside the chart relative to the page and break the hierarchy. */
figure img{display:block;width:100%;height:auto;padding:26px 28px;margin:0 auto}
figure.wide img{min-width:700px;max-width:790px}
figure.plot img{min-width:660px;max-width:816px}
/* Figures break out of the prose measure, a chart cramped into a text column reads as
   decoration rather than evidence. */
.figure-block{margin:48px 0}
.wrap.narrow>.figure-block{max-width:100%}
.figure-note{
  font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--ink-3);
  margin-top:12px;line-height:1.7;
}
.figure-lead{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-muted);margin-bottom:14px;
}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
form .btn{width:100%;margin-top:6px}

/* ---------- journal ---------- */
.posts{border-top:1px solid var(--rule)}
.post{display:grid;grid-template-columns:130px 1fr;gap:26px;padding:30px 0;border-bottom:1px solid var(--rule-2)}
.post .date{font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;color:var(--ink-3);padding-top:6px;text-transform:uppercase}
.post h3{margin-bottom:8px}
.post p{color:var(--ink-2);font-size:16.5px;max-width:64ch}

/* ---------- prose ---------- */
.prose h2{margin:52px 0 18px}
.prose h3{margin:34px 0 12px;font-size:20px}
.prose p,.prose li{color:var(--ink-2);max-width:68ch}
.prose ul,.prose ol{margin:14px 0 14px 22px}
.prose li{padding:5px 0}
.prose code{font-family:var(--mono);font-size:14.5px;background:var(--paper-2);padding:2px 6px;border:1px solid var(--rule-2)}
/* Journal tables. Data tables in the prose column: a wide table must scroll inside its own
   box rather than push the page sideways on a phone, which is why the wrapper exists. */
.prose table{width:100%;border-collapse:collapse;margin:22px 0;font-size:15px;display:block;overflow-x:auto}
.prose thead th{
  text-align:left;font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-2);font-weight:500;
  border-bottom:1px solid var(--rule);padding:0 18px 9px 0;white-space:nowrap;
}
.prose tbody td{padding:9px 18px 9px 0;border-bottom:1px solid var(--rule-2);color:var(--ink-2)}
.prose tbody tr:last-child td{border-bottom:0}
.prose tbody td:first-child{color:var(--ink);font-variant-numeric:tabular-nums}
.prose tbody td+td{font-family:var(--mono);font-size:14px;font-variant-numeric:tabular-nums}

/* Subscribe form. Stacks on narrow screens; the status line is a live region so a
   screen-reader user hears the result of a submit that never reloads the page. */
.subscribe-form{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:24px 0 14px}
.subscribe-form input[type=email]{
  flex:1 1 260px;min-width:0;padding:13px 15px;font:inherit;font-size:16px;
  color:var(--ink);background:var(--paper);border:1px solid var(--rule);border-radius:2px;
}
.subscribe-form input[type=email]:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.subscribe-form button{flex:0 0 auto}
.subscribe-form [data-subscribe-status]{flex:1 1 100%;margin:0;min-height:1.2em}
.subscribe-form [data-subscribe-status].is-error{color:#8C2F17}

.formula{
  font-family:var(--mono);font-size:14.5px;background:var(--paper-2);border:1px solid var(--rule);
  padding:18px 20px;margin:18px 0;overflow-x:auto;line-height:1.9;color:var(--ink);
  /* Without this the authored line breaks collapse and the formulas reflow into prose. */
  white-space:pre-wrap;
}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--rule);padding:64px 0 44px;background:var(--paper-2)}
.foot{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
.foot p{font-size:15.5px;color:var(--ink-2);max-width:34ch;margin-top:14px}
.foot h3{font-family:var(--mono);font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px;font-weight:500}
.foot a{display:block;font-size:15.5px;color:var(--ink-2);padding:5px 0}
.foot a:hover{color:var(--accent)}
.copyright{
  border-top:1px solid var(--rule);margin-top:48px;padding-top:24px;
  font-family:var(--mono);font-size:11.5px;color:var(--ink-3);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  /* iOS Safari force-zooms any focused input under 16px, which defeats the estimator's
     pinned result bar. 16px here; the desktop keeps its denser 15px. */
  input,select,textarea{font-size:16px}
  .cols,.tiers,.calc,.contact-grid{grid-template-columns:1fr}
  .cols>div{border-right:0;border-bottom:1px solid var(--rule-2);padding-right:0}
  .cols>div:last-child{border-bottom:0}
  .tiers{gap:1px}
  .foot{grid-template-columns:1fr 1fr}
  /* The estimator's whole mechanism is watching the number move as you type. Stacked at
     375px the result sat ~1,100px below the first input, a full screen and a half out of
     sight, so the live update was invisible on exactly the devices most ad traffic
     arrives on. The result block is pulled above the inputs and a compact sticky bar
     keeps the headline figure pinned while the fields scroll underneath. */
  /* Pinned figure, then the inputs, then the full breakdown and the ask.
     align-items must be reset: the desktop grid sets `start`, which in the flex layout
     shrinks every child to its content width instead of filling the column. */
  .calc{display:flex;flex-direction:column;align-items:stretch}
  .calc>.result-bar{order:0}
  .calc>form#inputs{order:1}
  .calc>.calc-result{order:2}
  .result{position:static}
  nav.links{display:none}
  nav.links.open{
    display:flex;position:absolute;top:66px;left:0;right:0;flex-direction:column;gap:0;
    background:var(--paper);border-bottom:1px solid var(--rule);padding:8px 28px 18px;
  }
  nav.links.open a{padding:11px 0}
  .burger{display:block}
  .nav>.btn{display:none}
}
@media (max-width:620px){
  body{font-size:17px}
  section{padding:72px 0}
  .row{grid-template-columns:1fr;gap:10px}
  .post{grid-template-columns:1fr;gap:8px}
  .field-row{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr}
}

/* ---------- surface polish ---------- */
.tier{position:relative;transition:.18s}
/* The featured tier is the recommendation, it earns real elevation, not just a tint. */
.tier.featured::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent);
}
.tier.featured{
  box-shadow:0 1px 2px rgba(21,23,27,.05), 0 18px 44px -30px rgba(21,23,27,.4);
  z-index:1;
}
.tier:hover{background:var(--paper-2)}
.tier.featured:hover{background:#EFEDE5}

figure{box-shadow:0 1px 2px rgba(21,23,27,.04), 0 8px 28px -18px rgba(21,23,27,.22)}
.result{box-shadow:0 1px 2px rgba(21,23,27,.04), 0 12px 34px -24px rgba(21,23,27,.28)}

.rows .row{transition:.15s}
.cols>div{transition:.15s}

/* Inline links inside prose get a proper underline, not a colour change alone. */
.prose p a,.note a,.figure-note a{
  color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;text-decoration-color:rgba(9,94,128,.45);
}
.prose p a:hover,.note a:hover{text-decoration-color:var(--accent)}

/* ---------- photography ----------
   Real photographs, presented as plates in a report: a hairline frame, a faint interval
   grid, and a mono caption. The heavy duotone this replaced was compensating for stock
   imagery that did not deserve to be shown straight. These do. */
.plate{
  position:relative;overflow:hidden;border:1px solid var(--rule);background:var(--paper-2);
  box-shadow:0 1px 2px rgba(21,23,27,.04), 0 10px 30px -20px rgba(21,23,27,.28);
}
/* A <picture> is an inline box by default, so an <img> inside it resolving height:100%
   would measure against the picture rather than the plate and collapse the aspect box.
   Plates that serve a single format still use a bare <img>; both paths must lay out the
   same, so the wrapper is made a block of the same size rather than special-cased. */
.plate picture{display:block;width:100%;height:100%}
.plate img{
  display:block;width:100%;height:100%;object-fit:cover;
  filter:saturate(.94) contrast(1.02);
}
/* No overlay. A grid ruled across a photograph reads as a filter, and a filter reads as
   compensation for a weak image. These images do not need it. */
.plate-caption{
  position:absolute;left:0;right:0;bottom:0;padding:26px 22px 16px;
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(251,250,247,.96);
  background:linear-gradient(0deg, rgba(12,16,15,.82), rgba(12,16,15,.30) 60%, transparent);
}
.plate.wide{aspect-ratio:16/9}
.band{margin:0}
.band .plate{aspect-ratio:16/9}

.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.split .plate{aspect-ratio:4/3}

/* ---------- FAQ ---------- */
.faq details{border-bottom:1px solid var(--rule-2);padding:4px 0}
.faq summary{
  cursor:pointer;list-style:none;padding:22px 0;font-family:var(--display);
  font-size:19px;font-weight:600;letter-spacing:-.01em;display:flex;
  justify-content:space-between;gap:24px;align-items:baseline;
}
.faq summary::-webkit-details-marker{display:none}
/* The + rotates 45° into an × when open, one glyph moving beats two glyphs swapping,
   and the reduced-motion block above already turns the rotation off. */
.faq summary::after{content:"+";font-family:var(--mono);color:var(--accent-muted);font-size:20px;line-height:1;transition:transform .18s ease,color .18s ease}
.faq details[open] summary::after{transform:rotate(45deg);color:var(--accent)}
.faq summary:hover{color:var(--accent)}
.faq .answer{padding:0 0 24px;color:var(--ink-2);max-width:66ch}
.faq .answer p+p{margin-top:.9em}

/* ---------- estimator: mobile sticky headline ---------- */
/* Desktop keeps the full sticky result panel; this compact bar is mobile only. */
.result-bar{
  /* top clears the 67px sticky site header, at top:0 the figure hid behind it. */
  display:none;position:sticky;top:67px;z-index:30;margin:0 0 22px;
  background:var(--paper);border:1px solid var(--rule);border-left:2px solid var(--accent);
  padding:13px 16px;box-shadow:0 8px 20px -16px rgba(21,23,27,.5);
}
.result-bar .rb-label{
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);
}
.result-bar .rb-value{
  font-family:var(--mono);font-size:23px;letter-spacing:-.02em;line-height:1.2;margin-top:3px;
  font-variant-numeric:tabular-nums;
}
.result-bar .rb-range{font-family:var(--mono);font-size:12px;color:var(--ink-3);margin-top:3px}
/* Must follow the base rule above, not sit in the earlier responsive block, equal
   specificity means whichever comes last in the file wins, and the base `display:none`
   was silently cancelling it. */
@media (max-width:900px){ .result-bar{display:block} }

/* ---------- estimator: the forwardable one-pager ---------- */
/* Hidden on screen, printed instead of the page. This is the artifact a champion sends
   to whoever signs the cheque, so it carries the figure, the arithmetic, the inputs it
   came from, and every assumption flagged, enough to be defended in a meeting we are
   not in. */
#print-summary{display:none}
.print-only{display:none}

@media print{
  header,footer,.cta,.burger,nav,.hero,section,.result-bar{display:none !important}
  #print-summary{display:block !important;padding:0}
  .print-only{display:block}
  body{background:#fff;font-size:10.5pt;color:#000}
  @page{margin:14mm}
  #print-summary h2{font-size:19pt;letter-spacing:-.02em;margin:0 0 2mm}
  #print-summary .ps-sub{font-size:9.5pt;color:#444;margin:0 0 6mm}
  #print-summary .ps-headline{
    font-family:var(--mono);font-size:26pt;letter-spacing:-.03em;margin:0;
  }
  #print-summary .ps-band{font-family:var(--mono);font-size:10pt;color:#333;margin-top:1.5mm}
  #print-summary table{width:100%;border-collapse:collapse;margin-top:5mm}
  #print-summary td{
    border-bottom:1px solid #ddd;padding:1.6mm 0;font-size:9.5pt;vertical-align:top;
  }
  #print-summary td:last-child{
    text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;
  }
  #print-summary h2{
    font-size:10pt;letter-spacing:.08em;text-transform:uppercase;margin:7mm 0 1mm;
    border-bottom:1px solid #000;padding-bottom:1mm;
  }
  #print-summary .ps-note{font-size:8.5pt;color:#444;line-height:1.5;margin-top:2mm}
  #print-summary .ps-foot{
    margin-top:8mm;border-top:1px solid #000;padding-top:2mm;font-size:8.5pt;color:#333;
    display:flex;justify-content:space-between;gap:8mm;
  }
  #print-summary .flagged{color:#000;font-weight:600}
}

@media (max-width:900px){
  .split{grid-template-columns:1fr;gap:28px}
}

/* Slogan sits directly under the footer lockup, above the category descriptor. */
.foot .slogan{
  font-family:var(--display);font-size:17px;font-weight:600;color:var(--accent);
  letter-spacing:-.015em;margin-top:14px;max-width:none;
}
.foot .slogan + p{margin-top:8px}

/* ---------- motion & typographic polish ----------
   Everything here is a progressive enhancement: unsupported browsers get exactly the
   page they got before, and the reduced-motion block near the top of the file already
   disables every transition and animation declared below. */

/* The site is light-only by design (paper). Saying so stops forced-dark extensions and
   auto-darkening WebViews from inverting it; accent-color brands any native control. */
:root{color-scheme:light;accent-color:var(--accent)}

/* Headings balance their line breaks; prose avoids one-word orphan lines. */
h1,h2,h3,h4{text-wrap:balance}
p,li{text-wrap:pretty}

/* Same-origin navigations cross-fade (MPA view transitions). The sticky header is named
   so it persists across the fade instead of dissolving with the page behind it. Kept to
   180ms, a page this fast should feel instant, the fade just removes the white flash. */
@media not (prefers-reduced-motion: reduce){
  @view-transition{navigation:auto}
}
header{view-transition-name:site-header}
::view-transition-old(root),::view-transition-new(root){animation-duration:.18s}

/* The header earns its shadow only once content actually slides beneath it. */
@supports (animation-timeline: scroll()){
  header{animation:header-elevate linear both;animation-timeline:scroll();animation-range:0 140px}
  @keyframes header-elevate{to{box-shadow:0 10px 28px -22px rgba(21,23,27,.45)}}
}

/* Underlines ease in rather than snap, prose links and the scorecard links share it. */
.prose p a,.note a,.figure-note a,.sc-link{transition:text-decoration-color .15s}

/* Scroll containers get thin, paper-toned scrollbars instead of the UA default. */
.figure-scroll,.formula{scrollbar-width:thin;scrollbar-color:var(--rule) transparent}

/* One quiet beat on the estimator figure each time it recomputes, so the eye is drawn
   to the number moving. The .tick class is re-triggered from the calculator script. */
@keyframes figure-tick{from{opacity:.45;transform:translateY(2px)}}
.result .headline.tick,.result-bar .rb-value.tick{animation:figure-tick .32s ease}

/* ---------- dark footer (D-0066) ----------
   The page closes on ink the way a report closes on its cover: paper text, the mark in
   light petrol. Overrides the paper-footer rules above by coming later at equal
   specificity. #8CC3D9 is 9.3:1 on ink. */
/* The same 3px petrol bar the header opens with, the two ends of the page rhyme. */
footer{
  background:var(--ink);
  border-top:3px solid var(--accent);color:rgba(251,250,247,.85);
}
/* Mirror of the header nav: same six items, same mono-uppercase voice, sitting above
   the directory columns so the footer answers the header instead of replacing it. */
.foot-nav{
  display:flex;gap:26px;flex-wrap:wrap;
  font-family:var(--mono);font-size:12px;letter-spacing:.11em;text-transform:uppercase;
  padding-bottom:26px;margin-bottom:40px;border-bottom:1px solid rgba(251,250,247,.14);
}
.foot-nav a{color:rgba(251,250,247,.72);padding:4px 0;border-bottom:1px solid transparent;transition:.15s}
.foot-nav a:hover{color:#8CC3D9;border-bottom-color:#8CC3D9}
.foot p{color:rgba(251,250,247,.62)}
.foot h3{color:rgba(251,250,247,.45)}
.foot a{color:rgba(251,250,247,.82)}
.foot a:hover{color:#8CC3D9}
footer .logo{color:var(--paper)}
/* The lockup is [D]ialWorth, one line, mark and wordmark sharing a baseline. The
   generic .foot a{display:block; padding:5px 0} link rule outspecifies bare .logo and
   was stacking the mark ABOVE the wordmark; .foot .logo wins it back. */
.foot .logo{display:flex;align-items:center;padding:0}
footer .logo .mark{fill:#8CC3D9}
footer .logo b{color:#8CC3D9}
.foot .slogan{color:#8CC3D9}
.copyright{border-top-color:rgba(251,250,247,.16);color:rgba(251,250,247,.5)}

/* ---------- footer share row (D-0067) ----------
   The page's own canonical URL out to LinkedIn / X / Facebook / email. Plain anchors ,
   no scripts, no SDK, nothing third-party executes; the CSP stays first-party. */
.share{display:flex;align-items:center;gap:10px;margin-top:20px}
.share__label{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(251,250,247,.45)}
/* Bare marks, no boxes (owner call), the 36px flex box stays as the invisible touch
   target, only the glyph shows. */
.share__btn{
  display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  color:rgba(251,250,247,.72);transition:.15s;
}
.share__btn svg{width:19px;height:19px;fill:currentColor}
.share__btn:hover{color:#8CC3D9;transform:translateY(-1px)}
/* The copy button is a <button> (needs the clipboard API, so it cannot be an anchor):
   strip the UA chrome so it sits in the row like its anchor siblings. Ships hidden in
   the HTML; share.js reveals it, so no-JS visitors never see a dead control. */
button.share__btn{background:none;border:0;padding:0;cursor:pointer;font:inherit}
.share__btn.is-copied{color:#8CC3D9}
/* Confirmation ("Copied", or the raw URL when the clipboard is refused), announced
   by the aria-live region and shown inline after the buttons. */
.share__done{font-family:var(--mono);font-size:12px;color:#8CC3D9;overflow-wrap:anywhere}

/* Footer contact line, phone and email as first-class citizens on every page. The
   generic .foot a{display:block} must not stack these two inline links. */
.foot-contact{font-family:var(--mono);font-size:13px;letter-spacing:.02em;color:rgba(251,250,247,.62);margin-top:16px}
.foot .foot-contact a{display:inline;padding:0;color:rgba(251,250,247,.85)}
.foot .foot-contact a:hover{color:#8CC3D9}

/* ---------- product showcase (D-0074) ----------
   The estimator demonstrated as motion: a dark full-bleed band, the same register as
   the footer, holding a framed "screen" where the tool types its own published example
   and builds the range. All figures are the calculator's real outputs for its real
   default inputs, the animation is a re-enactment of arithmetic anyone can reproduce
   on /calculator/, never a performance of invented numbers. Static final frame under
   prefers-reduced-motion. */
.showcase{background:var(--ink);border-top:3px solid var(--accent);color:rgba(251,250,247,.85)}
.showcase .eyebrow{color:#8CC3D9}
.showcase h2{color:var(--paper)}
.showcase p{color:rgba(251,250,247,.72)}
.showcase .btn-ghost{color:#8CC3D9;border-color:rgba(140,195,217,.5)}
.showcase .btn-ghost:hover{border-color:#8CC3D9}
.showcase-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:center}
@media (max-width:960px){.showcase-grid{grid-template-columns:1fr;gap:44px}}
.showcase .fine{color:rgba(251,250,247,.45)}

.stat-band{display:flex;gap:36px;flex-wrap:wrap;margin:30px 0 6px;padding-top:22px;border-top:1px solid rgba(251,250,247,.14)}
.stat-n{display:block;font-family:var(--display);font-weight:600;font-size:clamp(26px,2.6vw,34px);color:var(--paper);font-variant-numeric:tabular-nums}
.stat-l{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(251,250,247,.5);margin-top:4px;max-width:16ch}

/* The framed screen. */
.demo{background:#101318;border:1px solid rgba(251,250,247,.14);box-shadow:0 32px 80px -48px rgba(0,0,0,.85)}
.demo-chrome{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid rgba(251,250,247,.12)}
.demo-chrome span{width:10px;height:10px;border-radius:50%;background:rgba(251,250,247,.18)}
.demo-chrome em{font-family:var(--mono);font-style:normal;font-size:11.5px;letter-spacing:.06em;color:rgba(251,250,247,.45);margin-left:10px}
.demo-toggle{margin-left:auto;background:none;border:0;color:rgba(251,250,247,.55);cursor:pointer;font-size:13px;padding:2px 6px}
.demo-toggle:hover{color:#8CC3D9}
.demo-body{padding:22px 24px 24px}
.demo-rows{display:grid;grid-template-columns:1fr 1fr;gap:10px 28px}
@media (max-width:520px){.demo-rows{grid-template-columns:1fr}}
.demo-row{display:flex;justify-content:space-between;gap:14px;border-bottom:1px solid rgba(251,250,247,.10);padding:7px 0;font-family:var(--mono);font-size:13px}
.demo-row .k{color:rgba(251,250,247,.55)}
.demo-row .v{color:var(--paper);font-variant-numeric:tabular-nums;min-width:5ch;text-align:right}
.demo-row .v.typing::after{content:"";display:inline-block;width:7px;height:13px;background:#8CC3D9;margin-left:2px;vertical-align:-2px;animation:demo-caret .8s steps(1) infinite}
@keyframes demo-caret{50%{opacity:0}}
.demo-bars{margin:20px 0 4px;display:grid;gap:10px}
.demo-bar{display:grid;grid-template-columns:104px 1fr 76px;gap:12px;align-items:center;font-family:var(--mono);font-size:11.5px}
.demo-bar .bk{color:rgba(251,250,247,.55);letter-spacing:.08em;text-transform:uppercase}
.demo-bar .track{height:14px;background:rgba(251,250,247,.08)}
.demo-bar .fill{height:100%;width:0;background:var(--accent-2,#4E96B4);transition:width 1.1s cubic-bezier(.22,.8,.24,1)}
.demo-bar .bv{color:rgba(251,250,247,.8);text-align:right;font-variant-numeric:tabular-nums}
.demo-result{margin-top:22px;padding-top:18px;border-top:1px solid rgba(251,250,247,.14)}
.demo-result-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#8CC3D9}
.demo-result-value{font-family:var(--display);font-weight:600;font-size:clamp(34px,3.6vw,46px);color:var(--paper);font-variant-numeric:tabular-nums;margin:6px 0 2px}
.demo-result-range{font-family:var(--mono);font-size:12px;color:rgba(251,250,247,.55)}

/* ---------- journal cards with thumbnails (D-0074) ----------
   The share cards double as thumbnails: already branded, already content-hashed,
   already cached for a year. One asset, two jobs. */
.posts--thumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;border:0}
@media (max-width:900px){.posts--thumbs{grid-template-columns:1fr}}
.post-card{
  display:block;border:1px solid var(--rule);background:var(--paper);color:inherit;
  text-decoration:none;box-shadow:0 1px 2px rgba(21,23,27,.04);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.post-card:hover{transform:translateY(-3px);box-shadow:0 18px 44px -28px rgba(21,23,27,.4);border-color:var(--accent-muted)}
/* Photography-led cards: each piece carries its own photograph (owner call,
   2026-08-14, one unique image per journal entry). Mixed source ratios are
   normalised to one crop so the grid reads as a set. */
.post-card img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-bottom:1px solid var(--rule-2)}
.post-card-body{padding:18px 20px 20px}
.post-card-body .date{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-muted)}
.post-card-body h3{font-size:18px;line-height:1.35;margin:8px 0 8px}
.post-card:hover h3{color:var(--accent)}
.post-card-body p{font-size:14.5px;color:var(--ink-2);margin:0}

/* ---------- scroll reveal (D-0074) ----------
   Elements are tagged by script, so a no-JS visitor sees everything immediately;
   reduced-motion visitors are never opted in at all. */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
  .reveal.in{opacity:1;transform:none}
}

/* Tier icons (owner ask, 2026-08-14): one stroke-drawn glyph per engagement,
   accent-colored, sitting above the tier name. */
.tier-icon{width:30px;height:30px;color:var(--accent);display:block;margin-bottom:12px}
.tier.featured .tier-icon{color:var(--accent)}

/* ---------- calculator-funnel CTA (owner ask, 2026-08-14) ----------
   The one action the whole site funnels toward gets its own treatment: petrol
   gradient, arrow that slides on hover, a glow the plain ink buttons don't have.
   On the dark showcase band it flips to light, the previous ink-on-ink primary
   was nearly invisible there, which defeated the point of the band. */
.btn-go{
  background:linear-gradient(135deg,#0E7099,#095E80 55%,#084F6C);
  border-color:transparent;color:var(--paper);
  padding:15px 26px;font-size:12.5px;font-weight:500;
  box-shadow:0 10px 26px -10px rgba(9,94,128,.65),0 1px 0 rgba(0,0,0,.08);
  position:relative;
}
.btn-go::after{content:"→";font-size:15px;line-height:1;transition:transform .16s ease}
.btn-go:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 34px -12px rgba(9,94,128,.75),0 2px 4px rgba(21,23,27,.12);
  background:linear-gradient(135deg,#1180AE,#0A6890 55%,#095E80);
}
.btn-go:hover::after{transform:translateX(4px)}
.btn-go:focus-visible{outline:3px solid #8CC3D9;outline-offset:2px}
/* Light variant for the dark band: paper fill, petrol arrow, soft petrol glow. */
.showcase .btn-go{
  background:var(--paper);color:var(--ink);
  box-shadow:0 12px 30px -10px rgba(140,195,217,.45),0 1px 0 rgba(0,0,0,.3);
}
.showcase .btn-go::after{color:var(--accent)}
.showcase .btn-go:hover{
  background:#fff;
  box-shadow:0 18px 40px -12px rgba(140,195,217,.6),0 2px 6px rgba(0,0,0,.35);
}