/* ==========================================================================
   WonLoop — instrument panel. Ported from the design system tokens
   (_ds/tokens/*.css) and the nine .dc.html pages. Two grounds, hairlines do
   the work, tabular numerals, semantic green/amber, neutral buttons.
   ========================================================================== */
:root {
 --ink: #0b0f14;
 --signal: #26d07c;
 --leak: #f5a623;
 --paper: #f6f7f9;
 --body: #1b2432;
 --muted: #5b6572;
 --line: #e4e7ec;
 --on-ink: #e7ebf0;
 --signal-text: #0a7a45;
 --leak-text: #8a5a00;
 --white: #ffffff;
 --hair-ink: rgba(231, 235, 240, 0.16);
 --dash-ink: rgba(231, 235, 240, 0.4);
 --on-ink-72: rgba(231, 235, 240, 0.72);
 --on-ink-60: rgba(231, 235, 240, 0.6);
 --wash-recovered: rgba(38, 208, 124, 0.1);
 --wash-lost: rgba(245, 166, 35, 0.12);
 --wash-ink: rgba(11, 15, 20, 0.06);
 --font-display: var(
  --wp--preset--font-family--display,
  "Space Grotesk",
  sans-serif
 );
 --font-body: var(--wp--preset--font-family--body, "Inter", sans-serif);
 --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
 --ease: cubic-bezier(0.2, 0, 0.2, 1);
 --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
 --duration-draw: 600ms;
 --radius: 4px;
 --container: 1200px;
 --gutter: 32px;
}
@keyframes ss-draw {
 from {
  stroke-dashoffset: 180;
 }
 to {
  stroke-dashoffset: 0;
 }
}

/* Base ------------------------------------------------------------------ */
html {
 -webkit-text-size-adjust: 100%;
 scroll-behavior: smooth;
}
/* font-optical-sizing:none — the design loads Inter from Google as fixed instances with the
   opsz axis at its default; letting the browser tune opsz per size renders ~2% narrower. */
body.wl {
 margin: 0;
 background: var(--paper);
 color: var(--body);
 font-family: var(--font-body);
 font-size: 18px;
 line-height: 30px;
 font-variant-numeric: tabular-nums;
 font-optical-sizing: none;
 -webkit-font-smoothing: antialiased;
 text-wrap: pretty;
}
*,
*::before,
*::after {
 box-sizing: border-box;
}
img,
svg,
video {
 max-width: 100%;
 height: auto;
}
figure {
 margin: 0;
}
h1,
h2,
h3,
h4 {
 font-family: var(--font-display);
 color: var(--ink);
 letter-spacing: -0.01em;
 margin: 0;
 font-weight: 600;
}
h1 {
 font-size: 56px;
 line-height: 64px;
 font-weight: 700;
 letter-spacing: -0.025em;
}
h2 {
 font-size: 40px;
 line-height: 48px;
}
h3 {
 font-size: 24px;
 line-height: 32px;
}
p {
 margin: 0;
}
a {
 color: var(--signal-text);
 text-decoration: none;
 transition:
  color 180ms var(--ease),
  border-color 180ms var(--ease);
}
a:hover {
 color: var(--ink);
}
:focus-visible {
 outline: 2px solid var(--ink);
 outline-offset: 2px;
}
.wl-band--ink :focus-visible {
 outline-color: #fff;
}
code,
pre,
kbd,
.wl-mono {
 font-family: var(--font-mono);
}
section[id],
div[id],
h2[id] {
 scroll-margin-top: 112px;
}
[hidden] {
 display: none !important;
}
button {
 font: inherit;
}
.screen-reader-text {
 position: absolute !important;
 width: 1px;
 height: 1px;
 margin: -1px;
 padding: 0;
 overflow: hidden;
 clip: rect(0, 0, 0, 0);
 border: 0;
}
.wl-skip {
 position: absolute;
 left: 16px;
 top: -100px;
 z-index: 100;
 background: var(--ink);
 color: #fff;
 padding: 8px 12px;
 border-radius: var(--radius);
}
.wl-skip:focus {
 top: 16px;
}
/* Core flow-layout and root block-gap margins are managed here, not by blockGap. */
.wl .wp-site-blocks > * {
 margin-block-start: 0;
 margin-block-end: 0;
}
.wl :where(.is-layout-flow > :not(:first-child)) {
 margin-block-start: 0;
}

/* Bands + container ----------------------------------------------------- */
.wl-band {
 padding: 96px var(--gutter);
}
.wl-band--paper {
 background: var(--paper);
 color: var(--body);
}
.wl-band--ink {
 background: var(--ink);
 color: var(--on-ink);
}
.wl-band--ink h1,
.wl-band--ink h2,
.wl-band--ink h3 {
 color: #fff;
}
.wl-band--hero {
 padding: 128px var(--gutter) 96px;
}
.wl-band--open {
 padding: 96px var(--gutter) 64px;
}
.wl-band--mid {
 padding: 64px var(--gutter);
}
.wl-band--close {
 padding: 64px var(--gutter) 96px;
}
.wl-band--flush {
 padding-top: 0;
}
.wl-band--tight {
 padding: 80px var(--gutter) 0;
}
.wl-band--edge {
 border-bottom: 1px solid var(--dash-ink);
}
.wl-container {
 max-width: var(--container);
 margin: 0 auto;
}
.wl-grid {
 display: grid;
 grid-template-columns: repeat(12, minmax(0, 1fr));
 gap: 48px 32px;
 align-items: start;
}
.wl-grid--hero {
 gap: 64px 32px;
}
.wl-grid--end {
 align-items: end;
}
.wl-c-1-7 {
 grid-column: 1 / span 7;
}
.wl-c-8-5 {
 grid-column: 8 / span 5;
}
.wl-c-1-6 {
 grid-column: 1 / span 6;
}
.wl-c-1-5 {
 grid-column: 1 / span 5;
}
.wl-c-7-6 {
 grid-column: 7 / span 6;
}
.wl-c-1-4 {
 grid-column: 1 / span 4;
}
.wl-c-6-7 {
 grid-column: 6 / span 7;
}
.wl-c-9-4 {
 grid-column: 9 / span 4;
}
.wl-c-1-9 {
 grid-column: 1 / span 9;
}
.wl-c-1-8 {
 grid-column: 1 / span 8;
}
.wl-c-10-3 {
 grid-column: 10 / span 3;
}

/* Type ------------------------------------------------------------------ */
.wl-eyebrow {
 font-family: var(--font-body);
 font-weight: 500;
 font-size: 13px;
 line-height: 16px;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 color: var(--muted);
 display: block;
}
.wl-eyebrow--ink {
 color: var(--ink);
}
.wl-eyebrow--leak {
 color: var(--leak-text);
}
.wl-eyebrow--signal {
 color: var(--signal-text);
}
.wl-eyebrow--link {
 color: var(--muted);
}
.wl-eyebrow--link:hover {
 color: var(--ink);
}
.wl-band--ink .wl-eyebrow {
 color: var(--on-ink);
}
.wl-band--ink .wl-eyebrow--dim {
 color: var(--on-ink-72);
}
.wl-eyebrow--dash {
 display: flex;
 align-items: center;
 gap: 16px;
}
.wl-eyebrow--dash::before {
 content: "";
 width: 32px;
 height: 1px;
 background: var(--line);
 flex: 0 0 auto;
}
.wl-band--ink .wl-eyebrow--dash::before {
 background: var(--dash-ink);
}
.wl-h1 {
 font-family: var(--font-display);
 font-weight: 700;
 font-size: 60px;
 line-height: 66px;
 letter-spacing: -0.025em;
 color: var(--ink);
 margin: 32px 0 0;
}
.wl-band--ink .wl-h1 {
 color: #fff;
}
.wl-home-hero .wl-h1 {
 margin-top: 0;
}
.wl-h1--56 {
 font-size: 56px;
 line-height: 64px;
}
.wl-h1--44 {
 font-size: 44px;
 line-height: 56px;
 letter-spacing: -0.015em;
}
.wl-h1__sub {
 display: block;
 font-weight: 500;
 font-size: 40px;
 line-height: 52px;
 letter-spacing: -0.02em;
 color: var(--muted);
 margin-top: 4px;
}
.wl-band--ink .wl-h1__sub {
 color: var(--on-ink-72);
}
.wl-h1__sub--muted {
 color: var(--muted) !important;
}
.wl-h2 {
 font-family: var(--font-display);
 font-weight: 600;
 font-size: 40px;
 line-height: 48px;
 letter-spacing: -0.01em;
 color: var(--ink);
 margin: 0;
}
.wl-band--ink .wl-h2 {
 color: #fff;
}
.wl-h3 {
 font-family: var(--font-display);
 font-weight: 600;
 font-size: 24px;
 line-height: 32px;
 letter-spacing: -0.01em;
 color: var(--ink);
 margin: 0;
}
.wl-h3-sm {
 font-family: var(--font-display);
 font-weight: 600;
 font-size: 18px;
 line-height: 28px;
 color: var(--ink);
 margin: 0;
 display: block;
}
.wl-band--ink .wl-h3,
.wl-band--ink .wl-h3-sm {
 color: #fff;
}
.wl-h3-28 {
 font-family: var(--font-display);
 font-weight: 600;
 font-size: 28px;
 line-height: 40px;
 letter-spacing: -0.015em;
 color: var(--ink);
 margin: 0;
}
.wl-display-24 {
 font-family: var(--font-display);
 font-weight: 600;
 font-size: 24px;
 line-height: 32px;
 letter-spacing: -0.01em;
 color: var(--body);
}
.wl-display-28 {
 font-family: var(--font-display);
 font-weight: 600;
 font-size: 28px;
 line-height: 40px;
 letter-spacing: -0.015em;
 color: var(--ink);
}
.wl-display-32 {
 font-family: var(--font-display);
 font-weight: 600;
 font-size: 32px;
 line-height: 44px;
 letter-spacing: -0.015em;
 color: var(--ink);
}
.wl-display-18 {
 font-family: var(--font-display);
 font-weight: 600;
 font-size: 18px;
 line-height: 24px;
 color: var(--ink);
}
.wl-band--ink .wl-display-24,
.wl-band--ink .wl-display-28,
.wl-band--ink .wl-display-32,
.wl-band--ink .wl-display-18 {
 color: #fff;
}
.wl-stat {
 font-family: var(--font-display);
 font-weight: 700;
 letter-spacing: -0.02em;
 color: var(--ink);
 font-variant-numeric: tabular-nums;
 white-space: nowrap;
}
.wl-stat--56 {
 font-size: 56px;
 line-height: 56px;
}
.wl-stat--48 {
 font-size: 48px;
 line-height: 48px;
}
.wl-stat--40 {
 font-size: 40px;
 line-height: 48px;
}
.wl-stat--32 {
 font-size: 32px;
 line-height: 40px;
 font-weight: 600;
 letter-spacing: -0.015em;
}
.wl-stat--24 {
 font-size: 24px;
 line-height: 32px;
 letter-spacing: -0.01em;
}
.wl-band--ink .wl-stat {
 color: #fff;
}
.wl-stat--signal {
 color: var(--signal) !important;
}
.wl-stat--signal-text {
 color: var(--signal-text) !important;
}
.wl-stat--leak-text {
 color: var(--leak-text) !important;
}
.wl-stat--on-ink {
 color: var(--on-ink) !important;
}
.wl-stat__unit {
 font-family: var(--font-body);
 font-weight: 500;
 font-size: 18px;
 line-height: 24px;
 letter-spacing: 0;
 color: var(--on-ink-72);
}
.wl-lede {
 font-size: 18px;
 line-height: 32px;
}
.wl-p {
 font-size: 18px;
 line-height: 30px;
}
.wl-deck {
 font-size: 24px;
 line-height: 36px;
 color: var(--muted);
}
.wl-small {
 font-size: 15px;
 line-height: 24px;
}
.wl-micro {
 font-size: 13px;
 line-height: 20px;
}
.wl-mono {
 font-family: var(--font-mono);
 font-size: 13px;
 line-height: 22px;
 color: var(--muted);
}
/* Inline in prose: the design changes only family and size, inheriting colour and line box.
   Standalone mono labels keep the muted 13/22 block treatment. */
.wl-mono--inline {
 line-height: inherit;
 color: inherit;
}
.wl-mono--16 {
 font-size: 16px;
 line-height: inherit;
 color: inherit;
}
.wl-mono--14 {
 font-size: 14px;
 color: inherit;
}
.wl-mono--15 {
 font-size: 15px;
 line-height: 26px;
 color: var(--ink);
}
.wl-muted {
 color: var(--muted);
}
.wl-ink {
 color: var(--ink);
}
.wl-body {
 color: var(--body);
}
.wl-white {
 color: #fff;
}
.wl-on-ink {
 color: var(--on-ink);
}
.wl-on-ink-72 {
 color: var(--on-ink-72);
}
.wl-on-ink-60 {
 color: var(--on-ink-60);
}
.wl-signal-text {
 color: var(--signal-text);
}
.wl-leak-text {
 color: var(--leak-text);
}
.wl-signal {
 color: var(--signal);
}
.wl-600 {
 font-weight: 600;
}
.wl-500 {
 font-weight: 500;
}
.wl-italic {
 font-style: italic;
}
.wl-ta-r {
 text-align: right;
}
.wl-nowrap {
 white-space: nowrap;
}
.wl-ulink {
 font-size: 15px;
 line-height: 24px;
 color: var(--body);
 border-bottom: 1px solid var(--line);
 padding-bottom: 2px;
}
.wl-ulink:hover {
 border-color: var(--ink);
}
.wl-link-hair {
 color: var(--signal-text);
 border-bottom: 1px solid var(--line);
}
.wl-link-hair:hover {
 color: var(--ink);
}
.wl-band--ink .wl-link-ink {
 color: #fff;
 border-bottom: 1px solid var(--dash-ink);
}

/* Spacing utilities ------------------------------------------------------ */
.wl-mt-0 {
 margin-top: 0;
}
.wl-mt-2 {
 margin-top: 2px;
}
.wl-mt-4 {
 margin-top: 4px;
}
.wl-mt-8 {
 margin-top: 8px;
}
.wl-mt-12 {
 margin-top: 12px;
}
.wl-mt-16 {
 margin-top: 16px;
}
.wl-mt-20 {
 margin-top: 20px;
}
.wl-mt-24 {
 margin-top: 24px;
}
.wl-mt-32 {
 margin-top: 32px;
}
.wl-mt-40 {
 margin-top: 40px;
}
.wl-mt-48 {
 margin-top: 48px;
}
.wl-mt-64 {
 margin-top: 64px;
}
.wl-mt-80 {
 margin-top: 80px;
}
.wl-mt-96 {
 margin-top: 96px;
}
.wl-mb-0 {
 margin-bottom: 0;
}
.wl-mb-4 {
 margin-bottom: 4px;
}
.wl-mb-8 {
 margin-bottom: 8px;
}
.wl-mb-12 {
 margin-bottom: 12px;
}
.wl-mb-16 {
 margin-bottom: 16px;
}
.wl-mb-20 {
 margin-bottom: 20px;
}
.wl-mb-24 {
 margin-bottom: 24px;
}
.wl-mb-32 {
 margin-bottom: 32px;
}
.wl-mb-40 {
 margin-bottom: 40px;
}
.wl-mb-48 {
 margin-bottom: 48px;
}
.wl-pt-4 {
 padding-top: 4px;
}
.wl-pt-6 {
 padding-top: 6px;
}
.wl-pt-8 {
 padding-top: 8px;
}
.wl-pt-12 {
 padding-top: 12px;
}
.wl-pt-16 {
 padding-top: 16px;
}
.wl-pt-20 {
 padding-top: 20px;
}
.wl-pt-24 {
 padding-top: 24px;
}
.wl-pt-32 {
 padding-top: 32px;
}
.wl-pt-40 {
 padding-top: 40px;
}
.wl-pt-48 {
 padding-top: 48px;
}
.wl-pb-8 {
 padding-bottom: 8px;
}
.wl-pb-12 {
 padding-bottom: 12px;
}
.wl-pb-16 {
 padding-bottom: 16px;
}
.wl-pb-20 {
 padding-bottom: 20px;
}
.wl-pb-24 {
 padding-bottom: 24px;
}
.wl-pb-64 {
 padding-bottom: 64px;
}
.wl-py-20 {
 padding-top: 20px;
 padding-bottom: 20px;
}
.wl-py-24 {
 padding-top: 24px;
 padding-bottom: 24px;
}
.wl-py-32 {
 padding-top: 32px;
 padding-bottom: 32px;
}
.wl-pl-24 {
 padding-left: 24px;
}
.wl-pl-32 {
 padding-left: 32px;
}
.wl-maxw-380 {
 max-width: 380px;
}
.wl-maxw-560 {
 max-width: 560px;
}
.wl-maxw-620 {
 max-width: 620px;
}
.wl-maxw-640 {
 max-width: 640px;
}
.wl-maxw-680 {
 max-width: 680px;
}
.wl-maxw-720 {
 max-width: 720px;
}
.wl-maxw-760 {
 max-width: 760px;
}
.wl-maxw-780 {
 max-width: 780px;
}
.wl-maxw-820 {
 max-width: 820px;
}
.wl-maxw-860 {
 max-width: 860px;
}
.wl-maxw-900 {
 max-width: 900px;
}
.wl-ch-16 {
 max-width: 16ch;
}
.wl-ch-18 {
 max-width: 18ch;
}
.wl-ch-19 {
 max-width: 19ch;
}
.wl-ch-20 {
 max-width: 20ch;
}
.wl-ch-22 {
 max-width: 22ch;
}
.wl-ch-24 {
 max-width: 24ch;
}
.wl-ch-26 {
 max-width: 26ch;
}
.wl-ch-30 {
 max-width: 30ch;
}
.wl-ch-34 {
 max-width: 34ch;
}
.wl-ch-40 {
 max-width: 40ch;
}
.wl-ch-44 {
 max-width: 44ch;
}
.wl-ch-46 {
 max-width: 46ch;
}
.wl-flex {
 display: flex;
 align-items: center;
 gap: 16px;
 flex-wrap: wrap;
}
.wl-flex--nowrap {
 flex-wrap: nowrap;
}
.wl-between {
 display: flex;
 align-items: baseline;
 justify-content: space-between;
 gap: 16px;
}
.wl-between--start {
 align-items: flex-start;
}
.wl-between--center {
 align-items: center;
}
.wl-col {
 display: flex;
 flex-direction: column;
}
.wl-col--stretch {
 align-items: stretch;
}
.wl-gap-4 {
 gap: 4px;
}
.wl-gap-8 {
 gap: 8px;
}
.wl-gap-12 {
 gap: 12px;
}
.wl-gap-16 {
 gap: 16px;
}
.wl-gap-20 {
 gap: 20px;
}
.wl-gap-24 {
 gap: 24px;
}
.wl-gap-32 {
 gap: 32px;
}
.wl-ml-auto {
 margin-left: auto;
}

/* Rules, rows, lists ------------------------------------------------------ */
.wl-rule-2 {
 border-top: 2px solid var(--ink);
}
.wl-rule-2b {
 border-bottom: 2px solid var(--ink);
}
.wl-rule-1 {
 border-top: 1px solid var(--line);
}
.wl-rule-1b {
 border-bottom: 1px solid var(--line);
}
.wl-band--ink .wl-rule-2 {
 border-top-color: var(--hair-ink);
}
.wl-band--ink .wl-rule-2b {
 border-bottom-color: var(--hair-ink);
}
.wl-band--ink .wl-rule-1 {
 border-top-color: var(--hair-ink);
}
.wl-band--ink .wl-rule-1b {
 border-bottom-color: var(--hair-ink);
}
.wl-hair {
 height: 1px;
 background: var(--line);
}
.wl-band--ink .wl-hair {
 background: var(--hair-ink);
}
.wl-rules {
 border-top: 2px solid var(--ink);
}
.wl-band--ink .wl-rules {
 border-top-color: var(--hair-ink);
}
.wl-rules--1 {
 border-top: 1px solid var(--line);
}
.wl-row {
 display: grid;
 grid-template-columns: var(--cols, minmax(0, 1fr));
 gap: var(--gap, 32px);
 align-items: start;
 padding: var(--py, 24px) 0;
 border-bottom: 1px solid var(--line);
}
.wl-row--baseline {
 align-items: baseline;
}
.wl-row--center {
 align-items: center;
}
.wl-row:last-child {
 border-bottom: 0;
}
.wl-row--keep:last-child,
.wl-rules--all .wl-row:last-child {
 border-bottom: 1px solid var(--line);
}
.wl-band--ink .wl-row,
.wl-band--ink .wl-row--keep:last-child {
 border-bottom-color: var(--hair-ink);
}
.wl-lines {
 list-style: none;
 margin: 0;
 padding: 0;
}
.wl-lines > li {
 padding: var(--py, 10px) 0;
 border-bottom: 1px solid var(--line);
 font-size: 15px;
 line-height: 24px;
 color: var(--body);
}
.wl-lines > li:last-child {
 border-bottom: 0;
}
.wl-lines--top {
 border-top: 1px solid var(--line);
}
.wl-lines--keep > li:last-child {
 border-bottom: 1px solid var(--line);
}
.wl-lines--18 > li {
 font-size: 18px;
 line-height: 30px;
 padding: 16px 0;
}
.wl-band--ink .wl-lines > li {
 border-bottom-color: var(--hair-ink);
 color: var(--on-ink-72);
}
.wl-band--ink .wl-lines--on > li {
 color: var(--on-ink);
}
.wl-band--ink .wl-lines--top {
 border-top-color: var(--hair-ink);
}
.wl-lines a {
 color: inherit;
}
.wl-band--ink .wl-lines a {
 color: var(--on-ink);
}
.wl-band--ink .wl-lines a:hover {
 color: #fff;
}
.wl-numlist {
 list-style: none;
 margin: 0;
 padding: 0;
 border-top: 1px solid var(--line);
}
.wl-numlist > li {
 display: flex;
 gap: 16px;
 padding: 16px 0;
 border-bottom: 1px solid var(--line);
}
.wl-numlist__n {
 font-family: var(--font-display);
 font-weight: 600;
 font-size: 15px;
 line-height: 30px;
 color: var(--muted);
 flex: 0 0 24px;
 font-variant-numeric: tabular-nums;
}
.wl-numlist__t {
 font-size: 18px;
 line-height: 30px;
 color: var(--body);
}
.wl-num {
 font-family: var(--font-display);
 font-weight: 600;
 font-size: 15px;
 line-height: 24px;
 color: var(--muted);
 font-variant-numeric: tabular-nums;
}
.wl-num--24 {
 font-size: 24px;
 line-height: 32px;
}
.wl-num--26 {
 line-height: 26px;
}
.wl-num--28 {
 line-height: 28px;
}
.wl-kv {
 display: flex;
 align-items: baseline;
 justify-content: space-between;
 gap: 16px;
 padding: 14px 0;
 border-bottom: 1px solid var(--line);
}
.wl-kv:last-child {
 border-bottom: 0;
}
.wl-kv--16 {
 padding: 16px 0;
}
.wl-kv--18 {
 padding: 18px 0;
}
.wl-band--ink .wl-kv {
 border-bottom-color: var(--hair-ink);
}
.wl-quote {
 margin: 0;
 border-left: 4px solid var(--ink);
 padding: 20px 0 20px 28px;
 box-sizing: content-box;
 font-family: var(--font-display);
 font-weight: 600;
 font-size: 24px;
 line-height: 32px;
 letter-spacing: -0.01em;
 color: var(--body);
}
.wl-quote p {
 margin: 0;
 font: inherit;
}
/* Anchored quote: sits at the foot of a stretched column, with generous room above and inside. */
.wl-quote--anchor {
 margin-top: 56px;
 padding: 32px 0 32px 36px;
 font-size: 28px;
 line-height: 40px;
 letter-spacing: -0.015em;
}
/* The repair list grows to fill the column: rows share the spare height evenly. */
.wl-repair-block {
 flex: 1 1 auto;
 display: flex;
 flex-direction: column;
 min-height: 0;
}
.wl-repair-block > ul {
 flex: 1 1 auto;
 display: grid;
 grid-auto-rows: 1fr;
}
.wl-repair-block > ul > li {
 display: grid;
 align-content: center;
 padding: 20px 0;
}
/* The design has no global border-box reset, so max-width on padded callouts and quotes is content width. */
.wl-callout {
 padding-left: 24px;
 border-left: 2px solid var(--ink);
 box-sizing: content-box;
}
.wl-band--ink .wl-callout {
 border-left-color: var(--dash-ink);
}
.wl-callout--3 {
 border-left-width: 3px;
}
.wl-callout--signal {
 border-left-color: var(--signal) !important;
 padding-left: 28px;
}
.wl-panel {
 border: 1px solid var(--hair-ink);
 border-radius: var(--radius);
 padding: 28px;
}
/* Signal Repair: offer facts, deliverables, and a report structure preview. */
.wl-panel.wl-repair-offer {
 padding: 0;
 overflow: hidden;
 background: var(--ink);
}
.wl-repair-offer__head {
 display: flex;
 align-items: center;
 justify-content: space-between;
 flex-wrap: wrap;
 gap: 12px;
 padding: 24px;
 border-bottom: 1px solid var(--hair-ink);
}
.wl-repair-offer__badge {
 color: var(--on-ink-72);
 border: 1px solid var(--hair-ink);
 border-radius: 2px;
 padding: 4px 8px;
 font-size: 13px;
 line-height: 20px;
}
.wl-repair-offer__price {
 padding: 24px;
}
.wl-repair-offer__price > span {
 font-family: var(--font-display);
 font-weight: 700;
 font-size: 56px;
 line-height: 56px;
 letter-spacing: -0.025em;
 color: var(--on-ink);
}
.wl-repair-offer__price > p {
 margin-top: 8px;
 color: var(--on-ink-72);
 font-size: 15px;
 line-height: 24px;
}
.wl-repair-offer__facts {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 24px;
 padding: 0 24px 24px;
 margin: 0;
}
.wl-repair-offer__facts > div + div {
 padding-left: 24px;
 border-left: 1px solid var(--hair-ink);
}
.wl-repair-offer__facts dt {
 color: var(--on-ink-72);
 font-size: 13px;
 line-height: 20px;
}
.wl-repair-offer__facts dd {
 margin: 4px 0 0;
 color: var(--on-ink);
 font-family: var(--font-display);
 font-size: 24px;
 line-height: 32px;
 font-weight: 600;
}
.wl-repair-offer__threshold {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 16px;
 padding: 24px;
 border-top: 1px solid var(--hair-ink);
 border-bottom: 1px solid var(--hair-ink);
 background: var(--wash-recovered);
}
.wl-repair-offer__threshold h3 {
 color: var(--on-ink);
 font-family: var(--font-display);
 font-size: 18px;
 line-height: 24px;
 font-weight: 500;
}
.wl-repair-offer__threshold p {
 margin-top: 4px;
 color: var(--on-ink-72);
 font-size: 13px;
 line-height: 20px;
}
.wl-repair-offer__threshold > span {
 color: var(--signal);
 font-family: var(--font-display);
 font-size: 40px;
 line-height: 48px;
 font-weight: 600;
 white-space: nowrap;
}
.wl-repair-offer__note {
 padding: 20px 24px;
 color: var(--on-ink-72);
 font-size: 13px;
 line-height: 22px;
}
.wl-repair-deliverables .wl-row > div {
 display: grid;
 grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr);
 column-gap: 32px;
}
.wl-repair-deliverables__location {
 grid-column: 2;
 margin-top: 8px;
 color: var(--muted);
 font-size: 13px;
 line-height: 22px;
}
.wl-repair-report {
 padding: 24px;
 background: var(--white);
 border: 1px solid var(--line);
 border-radius: var(--radius);
}
.wl-repair-report__head {
 display: flex;
 align-items: center;
 justify-content: space-between;
 flex-wrap: wrap;
 gap: 12px;
 padding-bottom: 16px;
 border-bottom: 1px solid var(--line);
}
.wl-repair-report__label {
 color: var(--muted);
 font-size: 13px;
 line-height: 20px;
}
.wl-repair-report__table {
 width: 100%;
 margin: 24px 0;
 border-collapse: collapse;
 font-size: 13px;
 line-height: 22px;
 text-align: left;
}
.wl-repair-report__table caption {
 margin-bottom: 8px;
 text-align: left;
 font-weight: 500;
}
.wl-repair-report__table th,
.wl-repair-report__table td {
 padding: 12px 8px;
 border-bottom: 1px solid var(--line);
 font-weight: 400;
}
.wl-repair-report__table thead th {
 background: var(--paper);
 color: var(--muted);
}
.wl-repair-report__table td {
 font-variant-numeric: tabular-nums;
}
.wl-repair-report__contents {
 margin: 0;
 font-size: 13px;
 line-height: 22px;
}
.wl-repair-report__contents > div {
 padding: 12px 0;
 border-bottom: 1px solid var(--line);
}
.wl-repair-report__contents dt {
 font-weight: 500;
}
.wl-repair-report__contents dd {
 margin: 4px 0 0;
 color: var(--muted);
}
.wl-repair-report figcaption {
 margin-top: 16px;
 color: var(--muted);
 font-size: 13px;
 line-height: 22px;
}
.wl-repair-close {
 display: grid;
 grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
 align-items: start;
 gap: 64px;
}
.wl-repair-close__action {
 padding: 32px;
 background: var(--paper);
 color: var(--body);
 border: 1px solid var(--line);
 border-radius: var(--radius);
}
.wl-repair-close__action h3 {
 color: var(--ink);
 font-family: var(--font-display);
 font-size: 24px;
 line-height: 32px;
 font-weight: 600;
 letter-spacing: -0.01em;
}
.wl-repair-close__action .wl-btn {
 width: 100%;
 white-space: normal;
 text-align: center;
}
.wl-repair-close__reassurance {
 margin-top: 12px;
 color: var(--muted);
 font-size: 13px;
 line-height: 22px;
 text-align: center;
}
.wl-repair-close__terms {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 margin-top: 24px;
 color: var(--ink);
 font-size: 13px;
 line-height: 22px;
 text-decoration: underline;
 text-underline-offset: 4px;
}
.wl-repair-close__terms svg {
 flex-shrink: 0;
}
@media (max-width: 900px) {
 .wl-repair-close {
  grid-template-columns: 1fr;
  gap: 32px;
 }
}
@media (max-width: 600px) {
 .wl-repair-close__action {
  padding: 24px;
 }
}
.wl-repair-faq {
 border-top: 2px solid var(--ink);
}
.wl-repair-faq details {
 border-bottom: 1px solid var(--line);
}
.wl-repair-faq summary {
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 24px;
 padding: 24px 0;
 color: var(--ink);
 font-family: var(--font-display);
 font-size: 18px;
 line-height: 24px;
 font-weight: 500;
 cursor: pointer;
 list-style: none;
}
.wl-repair-faq summary::-webkit-details-marker {
 display: none;
}
.wl-repair-faq summary svg {
 flex-shrink: 0;
}
.wl-repair-faq summary:focus-visible {
 outline: 2px solid var(--ink);
 outline-offset: 4px;
}
.wl-repair-faq details[open] summary svg {
 transform: rotate(180deg);
}
.wl-repair-faq details > p {
 padding-bottom: 24px;
 color: var(--body);
}
@media (max-width: 600px) {
 .wl-repair-timeline {
  display: none;
 }
 .wl-repair-phases.wl-mt-32 {
  margin-top: 0;
 }
 .wl-repair-deliverables .wl-row > div {
  display: block;
 }
 .wl-repair-offer__facts {
  gap: 16px;
 }
 .wl-repair-offer__facts > div + div {
  padding-left: 16px;
 }
 .wl-repair-offer__facts dd {
  font-size: 18px;
  line-height: 24px;
 }
 .wl-repair-offer__threshold {
  align-items: flex-start;
  flex-wrap: wrap;
 }
}

/* Tracking check: outcomes, optional detail, and a clear booking path. */
.wl-check-summary.wl-panel {
 padding: 24px;
}
.wl-check-summary h2 {
 padding-bottom: 16px;
 border-bottom: 1px solid var(--hair-ink);
}
.wl-check-summary__facts {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 12px;
 margin: 16px 0 0;
 padding: 20px 0;
 border-top: 1px solid var(--hair-ink);
 border-bottom: 1px solid var(--hair-ink);
}
.wl-check-summary__facts dt {
 color: var(--on-ink-72);
 font-size: 13px;
 line-height: 20px;
}
.wl-check-summary__facts dd {
 margin: 4px 0 0;
 color: var(--on-ink);
 font-family: var(--font-display);
 font-size: 18px;
 line-height: 24px;
 font-weight: 600;
}
.wl-check-exam__rows {
 margin-top: 40px;
}
.wl-check-exam__rows .wl-row > div {
 display: grid;
 grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr);
 column-gap: 32px;
}
.wl-check-exam__rows .wl-mono {
 grid-column: 2;
 font-family: var(--font-body);
 font-size: 13px;
 line-height: 22px;
}
.wl-check-diagram {
 max-width: calc(var(--container) + var(--gutter) * 2);
 padding: 0 var(--gutter);
 margin: 32px auto 0;
}
.wl-check-diagram > summary {
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 16px;
 padding: 20px 0;
 border-top: 1px solid var(--line);
 border-bottom: 1px solid var(--line);
 color: var(--ink);
 font-family: var(--font-display);
 font-size: 18px;
 line-height: 24px;
 font-weight: 500;
 cursor: pointer;
 list-style: none;
}
.wl-check-diagram > summary::-webkit-details-marker {
 display: none;
}
.wl-check-diagram > summary svg {
 flex-shrink: 0;
}
.wl-check-diagram[open] > summary svg {
 transform: rotate(180deg);
}
.wl-check-diagram > summary:focus-visible {
 outline: 2px solid var(--ink);
 outline-offset: 4px;
}
.wl-check-diagram .wl-flowwrap {
 margin-top: 24px;
}
.wl-check-diagram .wl-flow {
 padding-right: 0;
 padding-left: 0;
}
.wl-check-prep {
 display: grid;
 grid-template-columns: 150px minmax(0, 1fr);
 gap: 8px 24px;
}
.wl-booking-panel {
 padding: 32px;
 background: var(--white);
 border: 1px solid var(--line);
 border-radius: var(--radius);
}
.wl-booking-steps {
 display: flex;
 flex-wrap: wrap;
 gap: 12px 24px;
 padding: 0 0 20px;
 margin: 0;
 border-bottom: 1px solid var(--line);
 list-style: none;
 counter-reset: booking-step;
}
.wl-booking-steps li {
 display: flex;
 align-items: center;
 gap: 8px;
 color: var(--muted);
 font-size: 13px;
 line-height: 20px;
 counter-increment: booking-step;
}
.wl-booking-steps li::before {
 content: counter(booking-step);
 display: inline-grid;
 place-items: center;
 width: 24px;
 height: 24px;
 border: 1px solid var(--line);
 border-radius: 2px;
}
.wl-booking-steps [aria-current="step"] {
 color: var(--ink);
 font-weight: 600;
}
.wl-booking-steps [aria-current="step"]::before {
 background: var(--ink);
 color: var(--white);
 border-color: var(--ink);
}
.wl-booking-actions {
 display: flex;
 align-items: flex-start;
 flex-direction: column;
 gap: 12px;
}
.wl-booking-actions .wl-btn {
 width: 100%;
}
.wl-check-eligibility {
 padding-top: 24px;
 border-top: 1px solid var(--line);
}
.wl-check-eligibility > a {
 display: inline-block;
 margin-top: 16px;
}
@media (max-width: 600px) {
 .wl-check-exam__rows .wl-row > div {
  display: block;
 }
 .wl-booking-panel {
  padding: 24px;
 }
 .wl-check-prep {
  grid-template-columns: 1fr;
 }
 .wl-check-prep > span:nth-child(3) {
  margin-top: 12px;
 }
}
/* Hero measurement specimen: baseline and target share one visual scale. */
.wl-measure {
 padding: 0;
 overflow: hidden;
 background: var(--ink);
}
.wl-measure__head {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 gap: 16px;
 padding: 24px;
 border-bottom: 1px solid var(--hair-ink);
}
.wl-measure__head h2 {
 color: var(--on-ink);
 font-family: var(--font-display);
 font-size: 24px;
 line-height: 32px;
 font-weight: 600;
 letter-spacing: -0.01em;
}
.wl-measure__head p {
 margin-top: 4px;
 color: var(--on-ink-72);
 font-size: 15px;
 line-height: 24px;
}
.wl-measure__specimen {
 flex-shrink: 0;
 margin-top: 4px;
 padding: 4px 8px;
 border: 1px solid var(--hair-ink);
 border-radius: 2px;
 color: var(--on-ink-72);
 font-size: 13px;
 line-height: 20px;
}
.wl-measure__row {
 padding: 24px;
}
.wl-measure__row--target {
 border-top: 1px solid var(--hair-ink);
 background: var(--wash-recovered);
}
.wl-measure__value {
 color: var(--on-ink);
 font-family: var(--font-display);
 font-size: 56px;
 line-height: 56px;
 font-weight: 700;
 letter-spacing: -0.025em;
 font-variant-numeric: tabular-nums;
}
.wl-measure__row--target .wl-measure__value {
 color: var(--signal);
}
.wl-measure__label {
 margin-top: 12px;
 color: var(--on-ink);
 font-family: var(--font-display);
 font-size: 18px;
 line-height: 24px;
 font-weight: 500;
}
.wl-measure__period {
 margin-top: 4px;
 color: var(--on-ink-72);
 font-size: 13px;
 line-height: 20px;
}
.wl-measure__target-label {
 display: flex;
 align-items: baseline;
 justify-content: space-between;
 gap: 12px;
}
.wl-measure__delta {
 color: var(--signal);
 border: 1px solid rgba(38, 208, 124, 0.3);
 border-radius: 2px;
 padding: 2px 8px;
 font-size: 13px;
 line-height: 20px;
 font-weight: 500;
 white-space: nowrap;
}
.wl-measure__bar {
 margin-top: 16px;
 height: 6px;
 background: var(--hair-ink);
 border-radius: 1px;
 overflow: hidden;
}
.wl-measure__bar > span {
 display: block;
 width: 100%;
 height: 100%;
 background: var(--on-ink-60);
}
.wl-measure__row--target .wl-measure__bar > span {
 background: var(--signal);
}
.wl-measure__foot {
 padding: 20px 24px;
 border-top: 1px solid var(--hair-ink);
 color: var(--on-ink-72);
 font-size: 13px;
 line-height: 22px;
}
.wl-measure__disclosure {
 margin-bottom: 8px;
 color: var(--on-ink);
 font-weight: 500;
}
@media (max-width: 600px) {
 .wl-panel.wl-measure {
  padding: 0;
 }
 .wl-measure__head {
  flex-wrap: wrap;
 }
}
.wl-panel--24 {
 padding: 24px;
}
.wl-card {
 border: 1px solid var(--line);
 border-radius: var(--radius);
 background: #fff;
 padding: 24px;
}
.wl-card--20 {
 padding: 20px;
}
.wl-table {
 width: 100%;
 border-collapse: collapse;
}
.wl-table th {
 text-align: left;
 font-family: var(--font-body);
 font-weight: 500;
 font-size: 13px;
 line-height: 16px;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 color: var(--muted);
 padding: 0 0 12px;
 border-bottom: 2px solid var(--ink);
}
.wl-table th + th,
.wl-table td + td {
 padding-left: 24px;
}
.wl-table td {
 font-size: 15px;
 line-height: 24px;
 padding: 14px 0;
 border-bottom: 1px solid var(--line);
 vertical-align: top;
}
.wl-table td.wl-mono {
 font-size: 13px;
 line-height: 22px;
 white-space: nowrap;
}
.wl-cmp {
 display: grid;
 grid-template-columns: var(--cols, minmax(0, 1fr) 150px 120px);
 gap: 16px;
 align-items: baseline;
 padding: 14px 0;
 border-bottom: 1px solid var(--line);
 font-size: 15px;
 line-height: 24px;
}
.wl-cmp--head {
 padding: 0 0 12px;
 border-bottom: 2px solid var(--ink);
}
.wl-cmp > :not(:first-child) {
 text-align: right;
}
.wl-bar {
 height: 3px;
 background: var(--hair-ink);
}
.wl-bar > span {
 display: block;
 height: 3px;
}
.wl-bar--dashed > span {
 background: repeating-linear-gradient(
  90deg,
  var(--on-ink-72) 0 4px,
  transparent 4px 8px
 );
}
.wl-bar--solid > span {
 background: var(--dash-ink);
}
.wl-bar--paper {
 background: var(--line);
}
.wl-bar--paper > span {
 background: var(--leak);
}

/* Buttons --------------------------------------------------------------- */
/* Button — values from components/actions/Button.jsx: semibold, radius 4, 1px border,
   sm 15/24 + 6×12 (36px) · md 15/24 + 12×16 (48px) · lg 18/24 + 16×24 (56px). */
.wl-btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 font-family: var(--font-body);
 font-weight: 600;
 font-size: 15px;
 line-height: 24px;
 padding: 12px 16px;
 border-radius: var(--radius);
 border: 1px solid transparent;
 background: var(--ink);
 color: #fff;
 cursor: pointer;
 white-space: nowrap;
 font-variant-numeric: tabular-nums;
 transition:
  background 120ms var(--ease),
  color 120ms var(--ease),
  border-color 120ms var(--ease);
}
.wl-btn:hover {
 background: #161c24;
 color: #fff;
}
.wl-btn:active {
 background: #05080b;
}
.wl-btn--lg {
 font-size: 18px;
 padding: 16px 24px;
}
.wl-btn--md {
 padding: 12px 16px;
}
.wl-btn--sm {
 padding: 6px 12px;
}
.wl-header__cta {
 padding: 11px 16px;
}
.wl-btn--ghost {
 background: transparent;
 border-color: var(--ink);
 color: var(--ink);
}
.wl-btn--ghost:hover {
 background: var(--wash-ink);
 color: var(--ink);
}
.wl-btn--ink {
 background: #fff;
 border-color: transparent;
 color: var(--ink);
}
.wl-btn--ink:hover {
 background: var(--on-ink);
 color: var(--ink);
}
.wl-btn--ink.wl-btn--ghost {
 background: transparent;
 border-color: rgba(42, 50, 61, 0.6);
 color: #fff;
}
.wl-btn--ink.wl-btn--ghost:hover {
 background: rgba(255, 255, 255, 0.06);
 color: #fff;
}
.wl-btn--block {
 width: 100%;
}
.wl-btn[disabled],
.wl-btn.is-disabled {
 opacity: 0.4;
 cursor: not-allowed;
 pointer-events: none;
}
.wl-ctas {
 display: flex;
 align-items: center;
 gap: 16px;
 flex-wrap: wrap;
}

/* Logo ------------------------------------------------------------------ */
.wl-logo {
 display: inline-flex;
 align-items: center;
}
.wl-logo--stacked {
 flex-direction: column;
}
.wl-logo--image {
 max-width: 100%;
}
.wl-logo__image {
 display: block;
 width: auto;
 height: 100%;
 max-width: 100%;
 object-fit: contain;
}
.wl-logo__mark {
 display: block;
 flex: 0 0 auto;
}
.wl-logo__word {
 font-family: var(--font-display);
 font-weight: 700;
 line-height: 1;
 letter-spacing: -0.01em;
}
[data-ss-draw] {
 stroke-dasharray: 180;
 stroke-dashoffset: 0;
 animation: ss-draw var(--duration-draw) var(--ease-out) 1;
}

/* Header ---------------------------------------------------------------- */
.wl-cta__short {
 display: none;
}
/* WordPress collapses its nav overlay at 600px; the inline row plus the CTA needs
   ~1024px, so extend the overlay breakpoint rather than letting the header overflow. */
@media (max-width: 1024px) {
 .wl-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
  display: none;
 }
 .wl-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
  display: flex;
 }
}
@media (max-width: 389px) {
 .wl-cta__full {
  display: none;
 }
 .wl-cta__short {
  display: inline;
 }
}
/* Sticky lives on the template-part wrapper: a sticky element can only move within its
   parent, and the wrapper is exactly the header's height, so .wl-header itself never stuck. */
.wl-header-wrap,
.wp-block-template-part:has(> .wl-header) {
 position: sticky;
 top: var(--wp-admin--admin-bar--height, 0px);
 z-index: 20;
}
.wl-header {
 background: var(--paper);
 border-bottom: 1px solid var(--line);
}
.wl-header.is-live {
 transition:
  background 200ms var(--ease),
  border-color 200ms var(--ease);
}
.wl-header {
 padding: 0 var(--gutter);
}
.wl-header__inner {
 max-width: var(--container);
 margin: 0 auto;
 padding: 20px 0;
 display: flex;
 align-items: center;
 gap: 40px;
}
.wl-header__brand {
 display: grid;
 align-items: center;
}
.wl-header__logo--ink,
.wl-header__logo--white {
 grid-area: 1 / 1;
 display: inline-flex;
 transition: opacity 180ms var(--ease);
}
.wl-header__logo--white {
 opacity: 0;
}
.wl-header__right {
 display: flex;
 align-items: center;
 gap: 24px;
 margin-left: auto;
}
.wl-menu__toggle {
 display: none;
}
.wl-menu__list {
 display: flex;
 align-items: center;
 gap: 24px;
 margin: 0;
 padding: 0;
 list-style: none;
}
.wl-menu__list a {
 color: var(--body);
 border-bottom: 1px solid transparent;
 padding-bottom: 2px;
 font-size: 15px;
 line-height: 24px;
 font-weight: 500;
 text-decoration: none;
 transition:
  color 200ms var(--ease),
  border-color 200ms var(--ease);
}
.wl-menu__list a:hover,
.wl-menu__list .current-menu-item > a,
.wl-menu__list .current-menu-ancestor > a {
 border-bottom-color: currentColor;
}
.wl-menu__list .current-menu-item > a,
.wl-menu__list .current-menu-ancestor > a {
 color: var(--ink);
 font-weight: 600;
}
.wl-nav.wp-block-navigation {
 font-size: 15px;
 line-height: 24px;
 font-weight: 500;
}
.wl-nav .wp-block-navigation__container {
 gap: 24px;
}
.wl-nav .wp-block-navigation-item__content {
 color: var(--body);
 border-bottom: 1px solid transparent;
 padding-bottom: 2px;
 transition:
  color 200ms var(--ease),
  border-color 200ms var(--ease);
}
.wl-nav .wp-block-navigation-item__content:hover,
.wl-nav .current-menu-item > .wp-block-navigation-item__content,
.wl-nav [aria-current="page"] {
 border-bottom-color: currentColor;
}
.wl-nav [aria-current="page"] {
 color: var(--ink);
 font-weight: 600;
}
.wl-header--over-ink .wl-nav [aria-current="page"] {
 color: #fff;
}
.wl-header--over-ink .wl-menu__list a,
.wl-header--over-ink .wl-menu__toggle {
 color: var(--on-ink);
}
.wl-header--over-ink .wl-menu__list .current-menu-item > a,
.wl-header--over-ink .wl-menu__list .current-menu-ancestor > a {
 color: #fff;
}
.wl-nav .wp-block-navigation__responsive-container-open,
.wl-nav .wp-block-navigation__responsive-container-close {
 color: var(--body);
}
.wl-nav .wp-block-navigation__responsive-container.is-menu-open {
 background: var(--paper);
 padding: 96px var(--gutter) 32px;
}
.wl-nav
 .wp-block-navigation__responsive-container.is-menu-open
 .wp-block-navigation__container {
 gap: 16px;
}
.wl-nav
 .wp-block-navigation__responsive-container.is-menu-open
 .wp-block-navigation-item__content {
 font-family: var(--font-display);
 font-size: 28px;
 font-weight: 600;
 color: var(--ink);
}
.wl-header--over-ink {
 background: var(--ink);
 border-bottom-color: transparent;
}
.wl-header--over-ink .wl-header__logo--ink {
 opacity: 0;
}
.wl-header--over-ink .wl-header__logo--white {
 opacity: 1;
}
.wl-header--over-ink .wl-nav .wp-block-navigation-item__content,
.wl-header--over-ink .wl-nav .wp-block-navigation__responsive-container-open {
 color: var(--on-ink);
}
.wl-header--over-ink .wl-header__cta {
 background: transparent;
 border-color: rgba(42, 50, 61, 0.6);
 color: var(--on-ink);
}
.wl-header--over-ink .wl-header__cta:hover {
 background: rgba(255, 255, 255, 0.06);
 color: #fff;
}
@media (max-width: 1024px) {
 .wl-menu__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  color: var(--body);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
 }
 .wl-menu__list {
  position: fixed;
  z-index: 21;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 16px;
  padding: 96px var(--gutter) 32px;
  background: var(--paper);
  opacity: 0;
  pointer-events: none;
  transform: translateX(16px);
  transition:
   opacity 200ms var(--ease),
   transform 200ms var(--ease);
 }
 .wl-menu.is-open .wl-menu__list {
  opacity: 1;
  pointer-events: auto;
  transform: none;
 }
 .wl-menu__list li,
 .wl-menu__list a {
  width: 100%;
 }
 .wl-menu__list a {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 40px;
 }
 .wl-menu.is-open .wl-menu__toggle {
  position: fixed;
  z-index: 22;
  top: 16px;
  right: var(--gutter);
  border-color: var(--line);
  background: var(--paper);
  color: var(--ink);
 }
 .wl-header--over-ink .wl-menu.is-open .wl-menu__list a {
  color: var(--ink);
 }
}
@media (prefers-reduced-motion: reduce) {
 .wl-header__logo--ink,
 .wl-header__logo--white {
  transition: none;
 }
}

/* Status chips (Badge.jsx) + the "missing link" comparison ---------------- */
.wl-chip {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 font-family: var(--font-display);
 font-weight: 500;
 font-size: 12px;
 line-height: 16px;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 padding: 3px 8px;
 border-radius: 2px;
 white-space: nowrap;
 font-variant-numeric: tabular-nums;
}
.wl-chip i {
 width: 6px;
 height: 6px;
 border-radius: 999px;
 background: currentColor;
 display: inline-block;
}
.wl-chip--ok {
 color: var(--signal-text);
 border: 1px solid rgba(10, 122, 69, 0.3);
 background: var(--wash-recovered);
}
.wl-chip--no {
 color: var(--leak-text);
 border: 1px solid rgba(138, 90, 0, 0.3);
 background: var(--wash-lost);
}
.wl-chip--no i {
 border-radius: 0;
}
.wl-chip--x {
 color: var(--muted);
 border: 1px solid var(--line);
 background: transparent;
}
.wl-band--ink .wl-chip--no,
.wl-icard--ink .wl-chip--no {
 color: var(--leak);
 border-color: rgba(245, 166, 35, 0.5);
 background: rgba(245, 166, 35, 0.12);
}
.wl-icard {
 border: 1px solid var(--line);
 border-radius: var(--radius);
 background: #fff;
 padding: 20px;
}
.wl-icard--ink {
 background: var(--ink);
 border-color: var(--ink);
 color: var(--on-ink);
}
.wl-icard__title {
 display: flex;
 justify-content: space-between;
 align-items: baseline;
 gap: 12px;
 padding-bottom: 12px;
 border-bottom: 1px solid var(--line);
}
.wl-icard--ink .wl-icard__title {
 border-bottom-color: var(--hair-ink);
}
.wl-icard--ink .wl-eyebrow {
 color: var(--on-ink-72);
}
.wl-icard__list {
 list-style: none;
 margin: 0;
 padding: 0;
}
.wl-icard__list li {
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 12px;
 padding: 10px 0;
 border-bottom: 1px solid var(--line);
 font-size: 15px;
 line-height: 24px;
 color: var(--body);
}
.wl-icard__list li:last-child {
 border-bottom: 0;
}
.wl-bridge {
 position: relative;
 height: 72px;
 margin: 0 20px;
}
.wl-bridge i {
 position: absolute;
 left: 24px;
 top: 0;
 bottom: 0;
 border-left: 2px dashed var(--leak);
}
.wl-bridge i::after {
 content: "";
 position: absolute;
 left: -5px;
 bottom: -1px;
 width: 8px;
 height: 8px;
 background: var(--leak);
}
.wl-bridge b {
 position: absolute;
 left: 44px;
 top: calc(50% - 20px);
 font-family: var(--font-display);
 font-weight: 600;
 font-size: 13px;
 line-height: 20px;
 color: var(--leak-text);
}
.wl-bridge small {
 position: absolute;
 left: 44px;
 top: 50%;
 font-size: 13px;
 line-height: 20px;
 color: var(--muted);
}

/* Report comparison: two systems with a broken return connection. */
.wl-mechanism-intro {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 64px;
 align-items: start;
}
.wl-report-intro {
 max-width: 760px;
}
.wl-report__systems {
 display: grid;
 grid-template-columns: minmax(0, 1fr) 80px minmax(0, 1fr);
 align-items: center;
}
.wl-report__system {
 min-width: 0;
 background: var(--white);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 overflow: hidden;
}
.wl-report__system-head {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 16px;
 padding: 24px;
 background: var(--ink);
 color: var(--on-ink);
 border-bottom: 1px solid var(--ink);
}
.wl-report__system-head h4 {
 color: var(--on-ink);
 font-family: var(--font-display);
 font-size: 24px;
 font-weight: 600;
 line-height: 32px;
 letter-spacing: -0.01em;
}
.wl-report__system-head > div > span {
 display: block;
 margin-top: 4px;
 color: var(--on-ink-72);
 font-size: 13px;
 line-height: 20px;
}
.wl-report__system-icon {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 48px;
 height: 48px;
 flex-shrink: 0;
 border: 1px solid var(--hair-ink);
 border-radius: var(--radius);
 color: var(--on-ink-72);
}
.wl-report__metrics {
 margin: 0;
 padding: 8px 24px 16px;
 list-style: none;
}
.wl-report__metric {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 16px;
 min-height: 64px;
 padding: 16px 0;
 border-bottom: 1px solid var(--line);
 font-size: 15px;
 line-height: 24px;
}
.wl-report__metric:last-child {
 border-bottom: 0;
}
.wl-report__metric--no {
 margin: 0 -12px;
 padding-right: 12px;
 padding-left: 12px;
 background: var(--wash-lost);
 border-bottom-color: rgba(138, 90, 0, 0.16);
}
.wl-report__status {
 display: inline-flex;
 align-items: center;
 flex-shrink: 0;
 gap: 8px;
 color: var(--signal-text);
 font-size: 13px;
 font-weight: 500;
}
.wl-report__status i {
 width: 6px;
 height: 6px;
 background: currentColor;
 border-radius: 50%;
}
.wl-report__metric--no .wl-report__status {
 color: var(--leak-text);
}
.wl-report__metric--no .wl-report__status i {
 border-radius: 0;
}
.wl-report__metric--x .wl-report__status {
 color: var(--muted);
}
.wl-report__metric--x .wl-report__status i {
 height: 1px;
 border-radius: 0;
}
.wl-report__break {
 display: flex;
 align-items: center;
 gap: 4px;
 color: var(--leak-text);
}
.wl-report__break svg {
 flex-shrink: 0;
 width: 32px;
 height: 32px;
 padding: 5px;
 border: 1px solid rgba(138, 90, 0, 0.3);
 border-radius: 2px;
 background: var(--wash-lost);
}
.wl-report__break-line {
 flex: 1;
 border-top: 1px dashed currentColor;
}
.wl-report__note {
 max-width: 760px;
 margin: 20px auto 0;
 color: var(--muted);
 font-size: 13px;
 line-height: 22px;
 text-align: center;
}
.wl-report__note strong {
 color: var(--leak-text);
 font-weight: 500;
}
.wl-report__connection {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 24px;
 padding: 24px;
 text-align: center;
}
.wl-report__connection-rule {
 width: 64px;
 border-top: 1px dashed var(--leak-text);
}
.wl-report__connection-title {
 color: var(--leak-text);
 font-family: var(--font-display);
 font-weight: 600;
 font-size: 18px;
 line-height: 24px;
}
.wl-report__verdict {
 padding: 24px;
}
.wl-report__verdict .wl-icard__title {
 flex-wrap: wrap;
 padding-bottom: 0;
 border-bottom: 0;
}
.wl-report__verdict .wl-chip {
 white-space: normal;
}
.wl-report__verdict-title {
 color: var(--on-ink);
 font-family: var(--font-display);
 font-size: 24px;
 line-height: 32px;
 font-weight: 600;
 letter-spacing: -0.01em;
}
.wl-report__verdict > p {
 max-width: 760px;
}

@media (max-width: 1024px) {
 .wl-mechanism-intro {
  gap: 32px;
 }
 .wl-report__systems {
  grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr);
 }
 .wl-report__metric {
  align-items: flex-start;
  flex-direction: column;
  gap: 4px;
  min-height: 100px;
 }
}
@media (max-width: 600px) {
 .wl-mechanism-intro {
  grid-template-columns: 1fr;
  gap: 24px;
 }
 .wl-report__systems {
  grid-template-columns: 1fr;
 }
 .wl-report__break {
  flex-direction: column;
  height: 48px;
 }
 .wl-report__break-line {
  border-top: 0;
  border-left: 1px dashed currentColor;
 }
 .wl-report__metric {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 16px;
 }
 .wl-report__system-head {
  padding: 20px 16px;
 }
 .wl-report__system-head h4 {
  font-size: 18px;
  line-height: 24px;
 }
 .wl-report__system-icon {
  width: 40px;
  height: 40px;
 }
 .wl-report__metrics {
  padding: 8px 16px 16px;
 }
 .wl-report__metric {
  padding-right: 0;
  padding-left: 0;
 }
 .wl-report__metric--no {
  margin: 0 -8px;
  padding-right: 8px;
  padding-left: 8px;
 }

 .wl-report__connection {
  padding: 24px 0;
 }
 .wl-report__connection-rule {
  display: none;
 }
 .wl-report__verdict {
  padding: 24px;
 }
 .wl-report__verdict .wl-icard__title {
  flex-wrap: wrap;
 }
 .wl-report__verdict .wl-chip {
  white-space: normal;
 }
}

/* Optimization-target card (close rate, form fill vs revenue) ---------------- */
.wl-target {
 margin-top: 24px;
}
.wl-target__title {
 font-family: var(--font-display);
 font-weight: 600;
 font-size: 20px;
 line-height: 28px;
 letter-spacing: -0.01em;
 color: var(--ink);
 margin: 12px 0 4px;
}
.wl-target__row {
 display: grid;
 grid-template-columns: minmax(0, 1fr) auto;
 gap: 4px 16px;
 align-items: end;
 padding: 16px 0;
 border-bottom: 1px solid var(--line);
}
.wl-target__row:last-of-type {
 border-bottom: 0;
}
.wl-target__label {
 font-size: 15px;
 line-height: 24px;
 color: var(--body);
}
.wl-target__cohort {
 font-family: var(--font-mono);
 font-size: 13px;
 line-height: 20px;
 color: var(--muted);
}
.wl-target__bar {
 grid-column: 1 / -1;
 height: 6px;
 background: var(--line);
 border-radius: 1px;
 margin-top: 8px;
}
.wl-target__bar span {
 display: block;
 height: 6px;
 min-width: 4px;
 border-radius: 1px;
}
.wl-target__bar--lost span {
 background: var(--leak);
}
.wl-target__bar--won span {
 background: var(--signal);
}
.wl-target__delta {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
 align-items: baseline;
 gap: 8px 16px;
 padding-top: 16px;
 border-top: 2px solid var(--ink);
}
.wl-target__delta .wl-mono {
 white-space: nowrap;
}

/* Even column sets that collapse on narrow screens ------------------------- */
.wl-cols3 {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 24px;
}
.wl-cols2 {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 24px;
}
@media (max-width: 600px) {
 .wl-cols3,
 .wl-cols2 {
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
 }
}

/* Signal flow (two tracks) ------------------------------------------------ */
.wl-flowwrap {
 margin: 96px calc(-1 * var(--gutter)) 0;
 padding: 64px 48px;
 border-top: 1px solid var(--line);
 border-bottom: 1px solid var(--line);
}
.wl-flow {
 max-width: 1600px;
 margin: 0 auto;
}
.wl-flow__head,
.wl-flow__track,
.wl-flow__ret,
.wl-flow__foot {
 display: grid;
 grid-template-columns: 180px repeat(4, minmax(0, 1fr));
 gap: 28px;
}
.wl-flow__head {
 padding-bottom: 16px;
 border-bottom: 2px solid var(--ink);
}
.wl-flow__tracks {
 display: flex;
 flex-direction: column;
 gap: 32px;
 padding-top: 32px;
}
.wl-flow__track {
 align-items: stretch;
}
.wl-flow__label {
 padding-top: 16px;
}
.wl-flow__cell {
 position: relative;
}
.wl-flow__box {
 border: 1px solid var(--line);
 border-radius: var(--radius);
 background: transparent;
 padding: 16px;
 min-height: 88px;
 height: 100%;
 display: flex;
 align-items: flex-start;
}
.wl-flow__box > span {
 display: flex;
 flex-direction: column;
 gap: 6px;
}
.wl-flow__box b {
 font-weight: 500;
 font-size: 15px;
 line-height: 24px;
 color: var(--body);
}
.wl-flow__box small {
 font-size: 13px;
 line-height: 20px;
 color: var(--muted);
 font-variant-numeric: tabular-nums;
}
.wl-flow__box--lost {
 border-color: var(--leak);
 background: var(--wash-lost);
}
.wl-flow__box--won {
 background: var(--wash-recovered);
}
.wl-flow__cell--arrow::before {
 content: "";
 position: absolute;
 left: -28px;
 top: 50%;
 width: 22px;
 height: 2px;
 background: var(--muted);
}
.wl-flow__cell--arrow::after {
 content: "";
 position: absolute;
 left: -8px;
 top: 50%;
 margin-top: -4px;
 border-left: 6px solid var(--muted);
 border-top: 4px solid transparent;
 border-bottom: 4px solid transparent;
}
.wl-flow__track--lost .wl-flow__cell--arrow::before {
 background: var(--leak);
}
.wl-flow__track--lost .wl-flow__cell--arrow::after {
 border-left-color: var(--leak);
}
.wl-flow__track--won .wl-flow__cell--arrow::before {
 background: var(--signal);
}
.wl-flow__track--won .wl-flow__cell--arrow::after {
 border-left-color: var(--signal);
}
.wl-flow__ret > div {
 grid-column: 3 / span 3;
}
.wl-loop {
 position: relative;
 height: 48px;
}
.wl-loop > i {
 position: absolute;
 background: var(--signal);
}
.wl-loop__r {
 right: 0;
 top: 0;
 width: 2px;
 height: 34px;
}
.wl-loop__h {
 left: 0;
 right: 0;
 top: 32px;
 height: 2px;
}
.wl-loop__l {
 left: 0;
 top: 6px;
 width: 2px;
 height: 28px;
}
.wl-loop__a {
 position: absolute;
 left: -3px;
 top: 0;
 width: 0;
 height: 0;
 border-left: 4px solid transparent;
 border-right: 4px solid transparent;
 border-bottom: 7px solid var(--signal);
}
.wl-flow__foot {
 grid-template-columns: 180px 1fr 1fr;
 margin-top: 48px;
 padding-top: 32px;
 border-top: 1px solid var(--line);
}
.wl-flow__foot ol {
 margin: 0;
 padding-left: 20px;
 font-size: 15px;
 line-height: 24px;
 color: var(--muted);
 display: flex;
 flex-direction: column;
 gap: 8px;
}

/* Offers steps ----------------------------------------------------------- */
.wl-steps {
 border-top: 2px solid var(--hair-ink);
}
.wl-step {
 display: grid;
 grid-template-columns: 168px 1fr 300px;
 gap: 40px;
 align-items: start;
 padding: 40px 28px;
 border-left: 3px solid transparent;
 border-bottom: 1px solid var(--hair-ink);
}
.wl-step:last-child {
 border-bottom: 0;
}
.wl-step--on {
 border-left-color: var(--signal);
}

/* Timeline ---------------------------------------------------------------- */
.wl-tl {
 display: grid;
 grid-template-columns: repeat(15, minmax(0, 1fr));
 gap: 4px;
 padding-bottom: 8px;
}
.wl-tl--phases {
 border-top: 2px solid var(--ink);
 padding-top: 12px;
 padding-bottom: 0;
}
.wl-tl__tick {
 font-family: var(--font-mono);
 font-size: 11px;
 line-height: 16px;
 color: var(--muted);
 text-align: center;
}
.wl-tl__phase {
 min-height: 44px;
 border: 1px solid var(--ink);
 background: var(--wash-ink);
 border-radius: 2px;
 padding: 8px;
 font-weight: 500;
 font-size: 13px;
 line-height: 16px;
 color: var(--ink);
}
.wl-tl__edge-l {
 height: 12px;
 border-left: 2px solid var(--ink);
}
.wl-tl__edge-r {
 height: 12px;
 border-right: 2px solid var(--ink);
}

.wl-stats3 {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
}
.wl-stats3 > div {
 padding: 0 32px;
}
.wl-stats3 > div:first-child {
 padding-left: 0;
}
.wl-stats3 > div + div {
 border-left: 1px solid var(--hair-ink);
}

/* Footer ----------------------------------------------------------------- */
.wl-footer {
 padding: 96px var(--gutter) 40px;
}
.wl-footer__top {
 display: grid;
 grid-template-columns: repeat(12, 1fr);
 gap: 48px 32px;
 align-items: start;
 padding-bottom: 64px;
 border-bottom: 1px solid var(--hair-ink);
}
.wl-footer__brand {
 grid-column: 1 / span 7;
 display: flex;
 align-items: center;
 gap: 32px;
}
.wl-footer__tag {
 font-family: var(--font-display);
 font-weight: 600;
 font-size: 28px;
 line-height: 40px;
 letter-spacing: -0.015em;
 color: #fff;
 padding-left: 32px;
 border-left: 1px solid var(--hair-ink);
}
.wl-footer__ctas {
 grid-column: 9 / span 4;
 display: flex;
 flex-direction: column;
 gap: 12px;
}
.wl-footer__cols {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 32px;
 padding: 48px 0 64px;
}
.wl-footer__col .wl-eyebrow {
 color: var(--on-ink-72);
 padding-bottom: 12px;
 border-bottom: 1px solid var(--hair-ink);
}
/* Design: the footer <li> keeps the body's 30px line box; only the inline link is 15/24. */
.wl-footer__col .wl-lines > li {
 line-height: 30px;
}
.wl-footer__legal {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 32px;
 flex-wrap: wrap;
 padding-top: 32px;
 border-top: 1px solid var(--hair-ink);
 font-size: 13px;
 line-height: 20px;
 color: var(--on-ink-72);
}
.wl-footer__legal a {
 color: var(--on-ink-72);
}
.wl-footer__legal a:hover {
 color: #fff;
}
.wl-footer__legal-list {
 display: flex;
 gap: 24px;
 margin: 0;
 padding: 0;
 list-style: none;
}
.wl-social {
 display: flex;
 align-items: center;
 gap: 4px;
 margin-left: -12px;
}
.wl-social a {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 44px;
 height: 44px;
 color: var(--on-ink);
}
.wl-social a:hover {
 color: #fff;
}

/* FAQ ------------------------------------------------------------------- */
.wl-faq-row {
 display: grid;
 grid-template-columns: 380px minmax(0, 1fr);
 gap: 48px;
 align-items: start;
 padding: 28px 0;
 border-bottom: 1px solid var(--line);
}
.wl-rules .wl-faq-row:last-child {
 border-bottom: 0;
}

/* Forms ----------------------------------------------------------------- */
.wl-field {
 display: block;
}
.wl-field__label {
 display: block;
 font-size: 15px;
 line-height: 24px;
 font-weight: 500;
 color: var(--body);
 margin-bottom: 6px;
}
.wl-field__hint {
 display: block;
 font-size: 13px;
 line-height: 20px;
 color: var(--muted);
 margin-top: 6px;
}
.wl-input {
 display: flex;
 align-items: center;
 width: 100%;
 height: 44px;
 border: 1px solid var(--line);
 border-radius: var(--radius);
 background: #fff;
 color: var(--body);
 font-family: var(--font-body);
 font-size: 15px;
 line-height: 24px;
 padding: 0 12px;
 transition: border-color 180ms var(--ease);
}
.wl-input:focus {
 outline: none;
 border-color: var(--ink);
 box-shadow:
  0 0 0 2px #fff,
  0 0 0 4px var(--ink);
}
.wl-input--mono {
 font-family: var(--font-mono);
 font-size: 14px;
}
.wl-input-wrap {
 display: flex;
 align-items: center;
 border: 1px solid var(--line);
 border-radius: var(--radius);
 background: #fff;
 height: 44px;
}
.wl-input-wrap .wl-input {
 border: 0;
 height: 42px;
}
.wl-input-wrap .wl-input:focus {
 box-shadow: none;
}
.wl-input-wrap:focus-within {
 border-color: var(--ink);
}
.wl-input-wrap__prefix {
 padding: 0 0 0 12px;
 font-family: var(--font-mono);
 font-size: 14px;
 color: var(--muted);
}
select.wl-input {
 appearance: none;
 background: #fff
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235B6572' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
  no-repeat right 12px center;
 padding-right: 36px;
}
.wl-form__note {
 font-size: 15px;
 line-height: 24px;
 color: var(--muted);
 min-width: 0;
}
.wl-hp {
 position: absolute;
 left: -9999px;
}
.wl-urlrow {
 display: grid;
 grid-template-columns: 150px minmax(0, 1fr);
 gap: 24px;
 align-items: center;
 padding: 16px 0;
 border-bottom: 1px solid var(--line);
}
.wl-urlrow:last-of-type {
 border-bottom: 0;
}

/* Checker ---------------------------------------------------------------- */
.wl-verdict {
 border-left: 3px solid var(--line);
 padding-left: 28px;
}
.wl-verdict--lost {
 border-left-color: var(--leak);
}
.wl-verdict--recovered {
 border-left-color: var(--signal);
}
.wl-verdict__label--lost {
 color: var(--leak-text);
}
.wl-verdict__label--recovered {
 color: var(--signal-text);
}
.wl-cov {
 display: grid;
 grid-template-columns: 200px minmax(0, 1fr) 150px 130px;
 gap: 24px;
 align-items: baseline;
 padding: 16px 0;
 border-bottom: 1px solid var(--line);
 font-size: 15px;
 line-height: 24px;
}
.wl-cov--head {
 padding: 0 0 12px;
 border-bottom: 2px solid var(--ink);
}
.wl-cov__url {
 font-family: var(--font-mono);
 font-size: 13px;
 color: var(--muted);
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}
.wl-cov > :nth-child(3),
.wl-cov > :nth-child(4) {
 text-align: right;
}
.wl-cov > :nth-child(4) {
 font-family: var(--font-mono);
 font-size: 13px;
 color: var(--muted);
}
.wl-ev {
 padding: 16px 0;
 border-bottom: 1px solid var(--line);
}
.wl-ev code {
 display: block;
 font-size: 14px;
 line-height: 22px;
 color: var(--body);
 margin-top: 6px;
 word-break: break-all;
}
.wl-est {
 display: grid;
 grid-template-columns: minmax(0, 1fr) auto;
 gap: 4px 24px;
 align-items: end;
 padding: 20px 0;
 border-bottom: 1px solid var(--line);
}
.wl-est__full {
 grid-column: 1 / -1;
}
.wl-est__fig {
 font-family: var(--font-display);
 font-weight: 700;
 font-size: 48px;
 line-height: 48px;
 letter-spacing: -0.02em;
 color: var(--ink);
 white-space: nowrap;
}
.wl-est__fig--40 {
 font-size: 40px;
}
.wl-est__fig--muted {
 font-family: var(--font-body);
 font-weight: 400;
 font-size: 15px;
 line-height: 48px;
 color: var(--muted);
}
.wl-est--2 {
 grid-template-columns: repeat(2, 1fr);
 gap: 8px 24px;
 border-bottom: 0;
}

/* Blog ------------------------------------------------------------------ */
.wl-archive {
 border-top: 2px solid var(--ink);
 padding-top: 32px;
}
.wl-cards.wp-block-post-template {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 32px;
 align-items: stretch;
 margin: 0;
 padding: 0;
 list-style: none;
}
.wl-cards > .wl-postcard {
 margin: 0;
 width: auto;
}
.wl-postcard {
 display: flex;
 flex-direction: column;
 border: 1px solid var(--line);
 border-radius: var(--radius);
 background: #fff;
 overflow: hidden;
 height: 100%;
}
.wl-postcard .wp-block-post-featured-image {
 margin: 0;
 aspect-ratio: 1200 / 628;
 border-bottom: 1px solid var(--line);
 background: var(--ink);
}
.wl-postcard .wp-block-post-featured-image img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
}
.wl-postcard__body {
 display: flex;
 flex-direction: column;
 flex: 1 1 auto;
 padding: 24px;
}
.wl-postcard .wp-block-post-title {
 font-family: var(--font-display);
 font-weight: 600;
 font-size: 24px;
 line-height: 32px;
 letter-spacing: -0.01em;
 margin: 12px 0 8px;
}
.wl-postcard .wp-block-post-title a {
 color: var(--ink);
 border-bottom: 1px solid transparent;
}
.wl-postcard .wp-block-post-title a:hover {
 border-bottom-color: var(--ink);
}
.wl-postcard .wp-block-post-excerpt__excerpt {
 font-size: 15px;
 line-height: 24px;
 color: var(--body);
 margin: 0;
}
.wl-postcard__cta {
 margin-top: auto;
 padding-top: 24px;
}
.wl-pager {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 24px;
 flex-wrap: wrap;
 margin-top: 40px;
 padding-top: 24px;
 border-top: 1px solid var(--line);
 font-size: 15px;
 line-height: 24px;
}
.wl-pager .wp-block-query-pagination {
 display: flex;
 gap: 8px;
 align-items: center;
 margin: 0;
}
.wl-pager a,
.wl-pager .page-numbers {
 font-weight: 500;
 color: var(--body);
 border: 1px solid var(--line);
 border-radius: 2px;
 padding: 8px 14px;
}
.wl-pager .page-numbers.current {
 color: #fff;
 background: var(--ink);
}
.wl-pager .wp-block-query-pagination-previous,
.wl-pager .wp-block-query-pagination-next {
 font-size: 13px;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 padding: 12px 16px;
}
.wl-side {
 position: sticky;
 top: 104px;
}
.wl-catrow {
 display: flex;
 align-items: baseline;
 justify-content: space-between;
 gap: 12px;
 padding: 12px 0;
 border-bottom: 1px solid var(--line);
 font-size: 15px;
 line-height: 24px;
}
.wl-catrow a {
 color: var(--body);
 border-bottom: 1px solid transparent;
}
.wl-catrow a:hover {
 border-bottom-color: var(--body);
}
.wl-catrow span {
 color: var(--muted);
}
.wl-beat {
 display: grid;
 grid-template-columns: minmax(0, 1fr) 40px;
 gap: 16px;
 align-items: baseline;
 padding: 18px 0;
 border-bottom: 1px solid var(--hair-ink);
 color: inherit;
}
.wl-beat__name {
 display: block;
 font-family: var(--font-display);
 font-weight: 600;
 font-size: 18px;
 line-height: 28px;
 color: #fff;
}
.wl-beat__line {
 display: block;
 font-size: 15px;
 line-height: 24px;
 color: var(--on-ink-72);
}
.wl-beat__count {
 font-family: var(--font-display);
 font-weight: 600;
 font-size: 18px;
 line-height: 28px;
 color: var(--on-ink);
 text-align: right;
}

/* Article ---------------------------------------------------------------- */
.wl-article {
 padding: 80px var(--gutter) 0;
}
.wl-meta-row {
 display: flex;
 align-items: center;
 gap: 16px;
 flex-wrap: wrap;
}
.wl-meta-dash {
 width: 24px;
 height: 1px;
 background: var(--line);
}
.wl-article__title {
 margin-top: 32px;
}
.wl-article .wl-deck {
 margin-top: 32px;
}
.wl-feature {
 margin-top: 48px;
 border: 1px solid var(--line);
 aspect-ratio: 1200 / 628;
 overflow: hidden;
}
.wl-feature img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
}
.wl-article__layout {
 display: grid;
 grid-template-columns: 240px minmax(0, 1fr);
 gap: 64px;
 margin-top: 80px;
 align-items: start;
 min-width: 0;
}
.wl-article__layout > * {
 min-width: 0;
}
.wl-toc {
 position: sticky;
 top: 104px;
}
.wl-toc__label {
 padding-bottom: 12px;
}
.wl-toc__link {
 display: grid;
 grid-template-columns: auto minmax(0, 1fr);
 gap: 8px;
 font-size: 13px;
 line-height: 20px;
 padding: 6px 0 6px 16px;
 border-left: 2px solid var(--line);
 color: var(--muted);
}
.wl-toc__link:hover,
.wl-toc__link.is-active {
 color: var(--ink);
 border-left-color: var(--ink);
}
.wl-toc__link.is-active {
 font-weight: 500;
}
.wl-toc__n {
 color: var(--muted);
 width: 20px;
}
.wl-toc__cta {
 margin-top: 32px;
 border: 1px solid var(--line);
 border-radius: var(--radius);
 background: #fff;
 padding: 20px;
}
.wl-toc__cta p {
 margin: 8px 0 16px;
}
.wl-prose {
 max-width: 640px;
 min-width: 0;
 font-size: 18px;
 line-height: 32px;
}
.wl-prose > * {
 margin: 0 0 24px;
}
.wl-prose h2 {
 font-size: 40px;
 line-height: 48px;
 margin: 0 0 24px;
 padding-top: 40px;
}
.wl-prose h2:first-child {
 padding-top: 0;
}
.wl-prose h3 {
 font-size: 24px;
 line-height: 32px;
 margin: 32px 0 16px;
}
.wl-prose ul,
.wl-prose ol {
 padding-left: 20px;
}
.wl-prose li + li {
 margin-top: 8px;
}
.wl-prose strong {
 font-weight: 600;
}
.wl-prose code {
 font-size: 16px;
}
.wl-prose img {
 display: block;
 width: 100%;
 height: auto;
 border: 1px solid var(--line);
}
.wl-prose figcaption {
 font-family: var(--font-mono);
 font-size: 13px;
 line-height: 22px;
 color: var(--muted);
 padding: 8px 0;
}
.wl-prose blockquote {
 margin: 40px 0;
 background: var(--ink);
 padding: 40px;
 border-radius: var(--radius);
}
.wl-prose blockquote p {
 font-family: var(--font-display);
 font-weight: 600;
 font-size: 28px;
 line-height: 40px;
 letter-spacing: -0.015em;
 color: #fff;
 margin: 0;
}
.wl-prose pre {
 font-family: var(--font-mono);
 font-size: 15px;
 line-height: 24px;
 color: var(--ink);
 background: #fff;
 border: 1px solid var(--line);
 border-radius: var(--radius);
 padding: 24px;
 overflow-x: auto;
 white-space: pre;
 margin: 0 0 24px;
}
.wl-prose pre::first-line {
 font-weight: 600;
}
.wl-prose .wp-block-table,
.wl-prose figure.wp-block-table {
 overflow-x: auto;
 margin: 0 0 24px;
}
.wl-prose table {
 width: 100%;
 border-collapse: collapse;
 min-width: 480px;
}
.wl-prose th {
 text-align: left;
 font-family: var(--font-body);
 font-weight: 500;
 font-size: 13px;
 line-height: 16px;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 color: var(--muted);
 padding: 0 0 12px;
 border-bottom: 2px solid var(--ink);
}
.wl-prose tbody th {
 font-size: 15px;
 line-height: 24px;
 letter-spacing: 0;
 text-transform: none;
 font-weight: 600;
 color: var(--ink);
 padding: 14px 0;
 border-bottom: 1px solid var(--line);
 vertical-align: top;
}
.wl-prose td {
 font-size: 15px;
 line-height: 24px;
 padding: 14px 0;
 border-bottom: 1px solid var(--line);
 vertical-align: top;
}
.wl-prose th + th,
.wl-prose td + td,
.wl-prose th + td {
 padding-left: 24px;
}
.wl-prose a {
 color: var(--signal-text);
 border-bottom: 1px solid var(--line);
}
.wl-prose a:hover {
 color: var(--ink);
}
.wl-prose .wl-short {
 margin: 48px 0 0;
}
.wl-share {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 24px;
 flex-wrap: wrap;
 margin-top: 8px;
 padding-top: 32px;
 border-top: 1px solid var(--line);
}
.wl-share__bar {
 display: flex;
 align-items: stretch;
 border: 1px solid var(--line);
 border-radius: 2px;
 background: #fff;
 overflow: hidden;
}
.wl-share__bar > * {
 display: inline-flex;
 align-items: center;
 height: 44px;
 padding: 0 20px;
 font-size: 15px;
 line-height: 24px;
 font-weight: 500;
 color: var(--body);
 border: 0;
 border-right: 1px solid var(--line);
 background: transparent;
 cursor: pointer;
 transition: background 180ms var(--ease);
}
.wl-share__bar > *:last-child {
 border-right: 0;
}
.wl-share__bar > a:hover,
.wl-share__bar > button:hover {
 background: var(--wash-ink);
 color: var(--body);
}
.wl-share__label {
 font-size: 13px;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 color: var(--muted);
 padding: 0 16px;
 cursor: default;
}
.wl-share__copy.is-done {
 color: var(--signal-text);
}
.wl-bottom {
 margin-top: 96px;
}
.wl-bottom__body {
 margin-top: 32px;
}
.wl-bottom__body > p:first-child {
 font-family: var(--font-display);
 font-weight: 600;
 font-size: 32px;
 line-height: 44px;
 letter-spacing: -0.015em;
 color: #fff;
 max-width: 40ch;
}
.wl-bottom__body > p {
 max-width: 680px;
 margin-top: 24px;
}
.wl-bottom__body > p:first-child {
 margin-top: 0;
}
.wl-bottom__body a {
 color: #fff;
 border-bottom: 1px solid var(--dash-ink);
}
.wl-band--faq {
 padding: 96px var(--gutter) 80px;
}
.wl-related {
 padding: 0 var(--gutter) 80px;
}
.wl-rail-nav {
 display: flex;
 border: 1px solid var(--line);
 border-radius: 2px;
 overflow: hidden;
}
.wl-rail-btn {
 width: 44px;
 height: 36px;
 background: #fff;
 border: 0;
 border-right: 1px solid var(--line);
 color: var(--body);
 cursor: pointer;
 font-size: 20px;
 line-height: 1;
}
.wl-rail-btn:last-child {
 border-right: 0;
}
.wl-rail-btn:hover {
 background: var(--wash-ink);
}
.wl-rail-btn[disabled] {
 opacity: 0.4;
 cursor: not-allowed;
}
.wl-rail {
 display: flex;
 gap: 24px;
 overflow-x: auto;
 padding: 32px 0 8px;
 scrollbar-width: thin;
}
.wl-rail__card {
 flex: 0 0 320px;
 display: block;
 color: var(--body);
}
.wl-rail__img {
 display: block;
 width: 320px;
 aspect-ratio: 1200 / 628;
 object-fit: cover;
 border: 1px solid var(--line);
 background: var(--ink);
}
.wl-author {
 padding: 0 var(--gutter) 64px;
}
.wl-author__grid {
 display: grid;
 grid-template-columns: 120px minmax(0, 1fr);
 gap: 32px;
 align-items: start;
 padding-top: 48px;
 border-top: 1px solid var(--line);
}
.wl-author__photo {
 width: 120px;
 height: 120px;
 border: 1px solid var(--line);
 border-radius: 0;
 display: block;
}
.wl-author__name {
 font-family: var(--font-display);
 font-weight: 600;
 font-size: 24px;
 line-height: 32px;
 color: var(--ink);
 margin-top: 8px;
}
.wl-postnav {
 padding: 0 var(--gutter) 96px;
}
.wl-postnav__grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 32px;
 padding-top: 32px;
 border-top: 1px solid var(--line);
}
.wl-postnav__grid a {
 display: block;
 color: var(--body);
}
.wl-postnav__grid a > span {
 display: block;
}
.wl-totop {
 display: flex;
 justify-content: flex-end;
 margin-top: 32px;
 padding-top: 24px;
 border-top: 1px solid var(--line);
}

/* Editor ---------------------------------------------------------------- */
.editor-styles-wrapper .wl-band--ink {
 color: var(--on-ink);
}

/* Responsive ----------------------------------------------------------- */
@media (max-width: 1024px) {
 .wl-flow__head,
 .wl-flow__track,
 .wl-flow__ret {
  grid-template-columns: 140px repeat(4, minmax(0, 1fr));
  gap: 20px;
 }
 .wl-flow__foot {
  grid-template-columns: 140px minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
 }
 .wl-flow__cell--arrow::before {
  left: -20px;
  width: 14px;
 }
 .wl-step {
  grid-template-columns: 140px 1fr 240px;
  gap: 24px;
  padding: 32px 20px;
 }
 .wl-article__layout {
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
 }
 .wl-toc {
  position: static;
 }
 .wl-toc__cta {
  display: none;
 }
}
@media (max-width: 900px) {
 :root {
  --gutter: 20px;
 }
 .wl-band--hero {
  padding-top: 96px;
 }
 .wl-home-hero {
  padding-top: 64px;
  padding-bottom: 64px;
 }
 .wl-home-hero .wl-lede {
  margin-top: 24px;
 }
 h1,
 .wl-h1 {
  font-size: 40px;
  line-height: 46px;
 }
 .wl-h1__sub {
  font-size: 28px;
  line-height: 36px;
 }
 .wl-h1--44 {
  font-size: 34px;
  line-height: 42px;
 }
 h2,
 .wl-h2,
 .wl-prose h2 {
  font-size: 30px;
  line-height: 38px;
 }
 .wl-deck {
  font-size: 20px;
  line-height: 30px;
 }
 /* Collapse to one column: 12 tracks still carry 11 gaps, which alone exceed a 360px viewport. */
 .wl-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 40px 0;
 }
 .wl-grid > [class*="wl-c-"] {
  grid-column: 1;
 }
 .wl-step {
  grid-template-columns: 1fr;
  gap: 20px;
  padding: 32px 16px;
 }
 .wl-faq-row {
  grid-template-columns: 1fr;
  gap: 8px;
 }
 .wl-row {
  --cols: 1fr !important;
  --gap: 8px;
 }
 .wl-cmp {
  --cols: minmax(0, 1fr) 90px 90px;
  gap: 10px;
 }
 .wl-flowwrap {
  margin-left: calc(-1 * var(--gutter));
  margin-right: calc(-1 * var(--gutter));
  padding: 48px var(--gutter);
 }
 .wl-flow__head {
  display: none;
 }
 .wl-flow__track,
 .wl-flow__ret,
 .wl-flow__foot {
  grid-template-columns: 1fr;
  gap: 12px;
 }
 .wl-flow__label {
  padding-top: 0;
 }
 .wl-flow__cell--arrow::before,
 .wl-flow__cell--arrow::after {
  display: none;
 }
 .wl-flow__ret > div {
  grid-column: 1;
 }
 .wl-flow__foot > :first-child {
  display: none;
 }
 .wl-tl__phase {
  font-size: 11px;
  padding: 6px 4px;
  min-height: 36px;
 }
 .wl-footer__top {
  grid-template-columns: minmax(0, 1fr);
  gap: 32px 0;
 }
 .wl-footer__brand,
 .wl-footer__ctas {
  grid-column: 1;
 }
 .wl-footer__brand {
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
 }
 .wl-footer__tag {
  padding-left: 0;
  border-left: 0;
  font-size: 24px;
  line-height: 34px;
 }
 .wl-footer__cols {
  grid-template-columns: repeat(2, 1fr);
 }
 /* Keep the primary CTA reachable on mobile: compact, beside the menu toggle. */
 .wl-header__right {
  gap: 8px;
 }
 .wl-header__inner {
  gap: 12px;
 }
 .wl-header__cta {
  padding: 9px 12px;
  font-size: 14px;
 }
 .wl-cards.wp-block-post-template {
  grid-template-columns: 1fr;
 }
 .wl-side {
  position: static;
 }
 .wl-cov {
  grid-template-columns: 1fr;
  gap: 4px;
 }
 .wl-cov--head {
  display: none;
 }
 .wl-cov > :nth-child(3),
 .wl-cov > :nth-child(4) {
  text-align: left;
 }
 .wl-urlrow {
  grid-template-columns: 1fr;
  gap: 8px;
 }
 .wl-est {
  grid-template-columns: 1fr;
 }
 .wl-est__fig {
  font-size: 40px;
  line-height: 44px;
 }
 .wl-author__grid {
  grid-template-columns: 1fr;
 }
 .wl-postnav__grid {
  grid-template-columns: 1fr;
 }
 .wl-postnav__grid .wl-ta-r {
  text-align: left;
 }
 .wl-prose blockquote {
  padding: 24px;
 }
 .wl-prose blockquote p {
  font-size: 22px;
  line-height: 32px;
 }
 .wl-share {
  flex-direction: column;
  align-items: flex-start;
 }
 .wl-panel {
  padding: 20px;
 }
 .wl-quote {
  padding: 16px 0 16px 20px;
 }
 .wl-quote--anchor {
  margin-top: 48px;
  padding: 24px 0 24px 24px;
 }
 .wl-repair-block > ul {
  display: block;
 }
 .wl-repair-block > ul > li {
  padding: 16px 0;
 }
 .wl-stats3 {
  grid-template-columns: 1fr;
  gap: 24px;
 }
 .wl-stats3 > div {
  padding: 0 !important;
  border-left: 0 !important;
 }
 .wl-flowwrap {
  overflow: hidden;
 }
 .wl-tl {
  overflow-x: auto;
 }
}
@media (max-width: 600px) {
 /* Stat lines are nowrap so figures never split; below this they must wrap or they overflow. */
 .wl-stat,
 .wl-target__delta .wl-mono {
  white-space: normal;
 }
 .wl-kv {
  flex-wrap: wrap;
  gap: 0 12px;
 }
 .wl-footer__cols {
  grid-template-columns: 1fr;
 }
 .wl-ctas > .wl-btn {
  width: 100%;
 }
 .wl-footer__ctas .wl-btn {
  white-space: normal;
  text-align: center;
 }
 .wl-home-hero .wl-ctas > .wl-btn {
  white-space: normal;
  text-align: center;
 }
 .wl-stat--56 {
  font-size: 44px;
  line-height: 48px;
 }
 .wl-share__bar {
  flex-wrap: wrap;
 }
}

/* Hero entrance — homepage only, page load only. Owner decision 2026-09-06
   (supersedes the one-animation rule for this one sequence; nothing else
   animates site-wide). Thesis: the instrument takes its reading — the mark
   draws the loop closed, copy arrives in one quiet stagger, the measure
   bars sweep to their values. Transforms + opacity only; no loops. */
@keyframes wl-rise {
 from {
  opacity: 0;
  transform: translateY(14px);
 }
 to {
  opacity: 1;
  transform: none;
 }
}
@keyframes wl-sweep {
 from {
  transform: scaleX(0);
 }
 to {
  transform: scaleX(1);
 }
}
.wl-home-hero .wl-h1 {
 animation: wl-rise 450ms var(--ease-out) 100ms both;
}
.wl-home-hero .wl-lede {
 animation: wl-rise 400ms var(--ease-out) 240ms both;
}
.wl-home-hero .wl-display-18 {
 animation: wl-rise 350ms var(--ease-out) 340ms both;
}
.wl-home-hero .wl-ctas {
 animation: wl-rise 350ms var(--ease-out) 420ms both;
}
.wl-home-hero .wl-callout {
 animation: wl-rise 350ms var(--ease-out) 500ms both;
}
.wl-home-hero .wl-panel {
 animation: wl-rise 400ms var(--ease-out) 280ms both;
}
.wl-home-hero.is-measure-animating .wl-measure__bar > span {
 transform-origin: left center;
 animation: wl-sweep 500ms var(--ease-out) both;
}
@media (prefers-reduced-motion: reduce) {
 :root {
  --duration-draw: 0ms;
 }
 [data-ss-draw] {
  animation: none !important;
  stroke-dashoffset: 0 !important;
 }
 html {
  scroll-behavior: auto;
 }
 .wl-home-hero .wl-h1,
 .wl-home-hero .wl-lede,
 .wl-home-hero .wl-display-18,
 .wl-home-hero .wl-ctas,
 .wl-home-hero .wl-callout,
 .wl-home-hero .wl-panel,
 .wl-home-hero.is-measure-animating .wl-measure__bar > span {
  animation: none !important;
 }
}