/* ==========================================================================
   WHY CHOOSE US  ·  /why-choose-us   (.owf-wcu)
   --------------------------------------------------------------------------
   Same editorial system as /ivf-cost-calculator and /ovulation-calculator:
   one typeface (Jost) across its weights, ruled grids rather than cards,
   outline folio numerals, ink on paper with brand blue and red as accents.

   The one new idea is section 02, a vertically pinned rail that scrolls
   horizontally. Everything else is the established set of parts.

   Layers
     1  scope, shared type and rules
     2  masthead, standfirst, answer panel
     3  jump rail
     4  01 counters
     5  02 pinned horizontal rail
     6  03 comparison
     7  04 split, 05 lab gauges, 06 commitments
     8  FAQ, CTA, figures
     9  responsive, reduced motion, print
   ========================================================================== */

/* =============== 1 · scope =============== */
.owf-wcu {
    --owf-font-body:   'Jost', system-ui, -apple-system, sans-serif;
    --owf-font-accent: 'Jost', system-ui, -apple-system, sans-serif;
    --owf-font-ui:     'Jost', system-ui, -apple-system, sans-serif;

    --wcu-ink:       #0a1929;
    --wcu-ink-2:     #33475c;
    --wcu-ink-3:     #6b7a8a;
    --wcu-ink-4:     #9aa7b4;
    --wcu-rule:      rgba(10, 25, 41, 0.14);
    --wcu-rule-soft: rgba(10, 25, 41, 0.08);
    --wcu-paper:     #ffffff;
    --wcu-paper-2:   #f7f5f1;
    --wcu-blue:      var(--owf-blue, #0072be);
    --wcu-red:       var(--owf-red, #cc2930);
    --wcu-hdr-h:     56px;
    --wcu-jump-h:    44px;
    /* The site's dark is deep brand blue, the same ramp the footer uses
        (#005c98 > #004572 > #002e4c). Near-black ink was the odd one out. */
    --wcu-deep-1:    #005c98;
    --wcu-deep-2:    #004572;
    --wcu-deep-3:    #002e4c;
    --wcu-r:         8px;    /* the only softening on an otherwise square page */
    --wcu-r-fig:     10px;   /* images read better a touch rounder than chrome */
    --wcu-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
    --wcu-ease:      cubic-bezier(0.16, 1, 0.3, 1);

    font-family: var(--owf-font-display, 'Jost'), sans-serif;
    color: var(--wcu-ink);
    background: var(--wcu-paper);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    overflow-x: clip;
}

.owf-wcu__band {
    position: relative;
    overflow: hidden;                 /* contains the blur spots. No sticky lives
                                         inside a band, so this is safe here but
                                         deliberately absent on __hs below. */
    padding: clamp(30px, 3.4vw, 56px) 0;
    border-top: 1px solid var(--wcu-rule);
    scroll-margin-top: calc(var(--wcu-hdr-h) + var(--wcu-jump-h) + 6px);
    background:
        radial-gradient(ellipse at 10% 4%, rgba(0, 114, 190, 0.05) 0%, transparent 46%),
        radial-gradient(ellipse at 92% 94%, rgba(204, 41, 48, 0.035) 0%, transparent 48%),
        var(--wcu-paper);
}
.owf-wcu__band--tint {
    background:
        radial-gradient(ellipse at 88% 6%, rgba(0, 114, 190, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 6% 96%, rgba(204, 41, 48, 0.045) 0%, transparent 46%),
        var(--wcu-paper-2);
}
.owf-wcu__band--ink {
    /* Re-tint the accent words rather than out-specifying them: core.css §1b
       resolves .hl-b/.hl-r through these custom properties precisely so a
       dark section can do this without restarting a specificity fight.
       Brand blue and red both go muddy on deep navy. */
    --owf-hl-b: #9ecbf0;
    --owf-hl-r: #f3a0a4;
    color: #fff; border-top-color: var(--wcu-deep-3);
    background: linear-gradient(158deg, var(--wcu-deep-1) 0%, var(--wcu-deep-2) 52%, var(--wcu-deep-3) 100%);
}

/* ---- brand blur spots -------------------------------------------------
   Pseudo-elements rather than markup, so every section gets the blue and
   red spread the rest of the site uses without touching the PHP. */
.owf-wcu__band::before, .owf-wcu__band::after,
.owf-wcu__cta::before,  .owf-wcu__cta::after {
    content: ''; position: absolute; z-index: 0;
    border-radius: 50%; pointer-events: none;
    aspect-ratio: 1;
}
.owf-wcu__band::before { top: -16%;  right: -6%; width: 32vw; max-width: 480px; background: radial-gradient(circle, rgba(0, 114, 190, 0.14), transparent 70%); }
.owf-wcu__band::after  { bottom: -20%; left: -8%; width: 26vw; max-width: 400px; background: radial-gradient(circle, rgba(204, 41, 48, 0.1), transparent 70%); }
/* on the deep-blue band the spots have to carry more weight to register */
.owf-wcu__band--ink::before { background: radial-gradient(circle, rgba(0, 148, 235, 0.4), transparent 70%); }
.owf-wcu__band--ink::after  { background: radial-gradient(circle, rgba(204, 41, 48, 0.3), transparent 70%); }

.owf-wcu__band > .owf-container { position: relative; z-index: 1; }

#compare, #doctor, #lab, #promise, #faq { content-visibility: auto; contain-intrinsic-size: auto 720px; }

/* section opener */
.owf-wcu__head {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(14px, 1.8vw, 28px); align-items: start;
    margin-bottom: clamp(22px, 2.8vw, 38px);
    padding-bottom: clamp(14px, 1.8vw, 22px);
    border-bottom: 2px solid var(--wcu-ink);
}
.owf-wcu__head--lite { border-bottom-color: rgba(255, 255, 255, 0.28); }
.owf-wcu__num {
    font-size: clamp(44px, 4.6vw, 82px); font-weight: 800; line-height: 0.78; letter-spacing: -0.06em;
    color: transparent; -webkit-text-stroke: 1.4px var(--wcu-rule);
    transition: -webkit-text-stroke-color 0.6s var(--wcu-ease);
}
.owf-wcu__band:hover .owf-wcu__num { -webkit-text-stroke-color: rgba(0, 114, 190, 0.5); }
.owf-wcu__num--lite { -webkit-text-stroke-color: rgba(255, 255, 255, 0.3); }
.owf-wcu__head-txt { min-width: 0; padding-top: clamp(2px, 0.6vw, 8px); }
.owf-wcu__h {
    margin: 0 0 8px;
    font-size: clamp(23px, 2.1vw + 8px, 46px); font-weight: 700;
    letter-spacing: -0.038em; line-height: 1.04;
    color: var(--wcu-ink) !important; text-wrap: balance;
}
.owf-wcu__h--lite { color: #fff !important; }
.owf-wcu__sub { margin: 0; font-size: clamp(13px, 0.85vw + 3px, 16px); font-weight: 300; line-height: 1.6; color: var(--wcu-ink-2); }
.owf-wcu__sub--lite { color: rgba(255, 255, 255, 0.68); }
.owf-wcu__cap { margin: 12px 0 0; font-size: 12px; font-weight: 300; line-height: 1.55; color: var(--wcu-ink-3); }

.owf-wcu.is-ready [data-rv] { opacity: 0; transform: translateY(16px); transition: opacity 0.55s var(--wcu-ease), transform 0.55s var(--wcu-ease); }
.owf-wcu.is-ready [data-rv].is-in { opacity: 1; transform: none; }

.owf-wcu__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 50px; padding: 13px 26px; border: 1px solid transparent; border-radius: var(--wcu-r);
    font-family: var(--owf-font-display, 'Jost'), sans-serif; font-size: 14px; font-weight: 600; letter-spacing: -0.015em; text-decoration: none;
    transition: background 0.25s ease, transform 0.2s ease, color 0.25s ease;
}
.owf-wcu__btn--p { background: var(--wcu-red); color: #fff !important; }
.owf-wcu__btn--p:hover { background: #a32026; }
.owf-wcu__btn--p i { transition: transform 0.3s var(--wcu-ease); }
.owf-wcu__btn--p:hover i { transform: translateX(5px); }
.owf-wcu__btn--s { background: transparent; color: var(--wcu-ink) !important; border-color: var(--wcu-ink); }
.owf-wcu__btn--s:hover { background: var(--wcu-ink); color: #fff !important; }
.owf-wcu__btn:active { transform: scale(0.98); }
.owf-wcu__btn:focus-visible { outline: 2px solid var(--wcu-red); outline-offset: 3px; }


/* =============== 2 · masthead =============== */
.owf-wcu__mast { position: relative; overflow: hidden; isolation: isolate; padding-bottom: clamp(22px, 2.8vw, 40px); }
.owf-wcu__wm {
    position: absolute; right: -1.5vw; top: 38%; transform: translateY(-50%); z-index: 0;
    pointer-events: none; user-select: none;
    font-size: clamp(160px, 19vw, 330px); font-weight: 800; line-height: 0.7; letter-spacing: -0.07em;
    color: transparent; -webkit-text-stroke: 1.5px rgba(0, 114, 190, 0.1);
}
@media (max-width: 991px) { .owf-wcu__wm { display: none; } }

.owf-wcu__fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.owf-wcu__fx i { position: absolute; display: block; border-radius: 50%; }
.owf-wcu__fx i:nth-child(1) { top: -150px; left: -110px; width: 400px; height: 400px; background: radial-gradient(circle, rgba(0, 114, 190, 0.16), transparent 70%); animation: wcu-f1 19s ease-in-out infinite; }
.owf-wcu__fx i:nth-child(2) { bottom: -140px; right: 22%; width: 330px; height: 330px; background: radial-gradient(circle, rgba(204, 41, 48, 0.11), transparent 70%); animation: wcu-f2 23s ease-in-out infinite; }
.owf-wcu__fx i:nth-child(3) { top: 15%; left: 38%; width: 140px; height: 140px; border: 1px solid rgba(0, 114, 190, 0.12); background: none; animation: wcu-f3 17s ease-in-out infinite; }
@keyframes wcu-f1 { 0%, 100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(30px,22px,0) scale(1.09); } }
@keyframes wcu-f2 { 0%, 100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-26px,-20px,0) scale(1.11); } }
@keyframes wcu-f3 { 0%, 100% { transform: translate3d(0,0,0) rotate(0deg); } 50% { transform: translate3d(-18px,24px,0) rotate(18deg); } }

.owf-wcu__mast-in { position: relative; z-index: 1; }

/* ---- breadcrumb -----------------------------------------------------
   The BreadcrumbList schema already shipped in the JSON-LD graph; this is
   its visible counterpart. Deliberately the same trail as the story,
   journey and testimonials pages -- one small line, chevron separator,
   blue link going red on hover -- so the crumb reads identically
   wherever a reader lands. No local flourishes. */
.owf-wcu__crumb {
    display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
    padding-top: clamp(14px, 1.6vw, 22px);
    font-family: var(--owf-font-accent, 'Nunito'), sans-serif;
    font-size: 11px; font-weight: 700; letter-spacing: 0.05em; color: var(--wcu-ink-3);
}
.owf-wcu__crumb a { color: var(--wcu-blue); text-decoration: none; transition: color 0.25s ease; }
/* (0,2,0) -- out-ranks the theme's bare `a:hover { color }` at (0,1,1) */
.owf-wcu__crumb a:hover, .owf-wcu__crumb a:focus-visible { color: var(--wcu-red); }
.owf-wcu__crumb i { font-size: 9px; color: var(--wcu-ink-4); }
.owf-wcu__crumb [aria-current] { color: var(--wcu-ink-2); }

.owf-wcu__dateline {
    display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
    padding: 11px 0; margin-bottom: clamp(16px, 2vw, 28px);
    border-bottom: 1px solid var(--wcu-rule);
    font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wcu-ink-3);
}
.owf-wcu__dateline-a { color: var(--wcu-blue); text-decoration: none; }
.owf-wcu__dateline-a:hover { color: var(--wcu-red); }
.owf-wcu__dateline i { width: 3px; height: 3px; border-radius: 50%; background: var(--wcu-red); }

.owf-wcu__mast-head { display: flex; align-items: center; gap: 16px; margin-bottom: clamp(12px, 1.4vw, 18px); }
.owf-wcu__kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--wcu-red); white-space: nowrap; }
.owf-wcu__kicker-rule { flex: 1; height: 1px; background: var(--wcu-rule); }
.owf-wcu__folio { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wcu-ink-4); white-space: nowrap; }

.owf-wcu__mast-grid {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(22px, 3.4vw, 60px); align-items: end;
    padding-bottom: clamp(20px, 2.4vw, 32px); border-bottom: 1px solid var(--wcu-rule);
    margin-bottom: clamp(20px, 2.4vw, 32px);
}
.owf-wcu__mast-txt { min-width: 0; }
.owf-wcu__h1 {
    margin: 0 0 clamp(16px, 2vw, 26px);
    font-weight: 800; font-size: clamp(34px, 4.4vw + 10px, 84px);
    line-height: 0.95; letter-spacing: -0.05em; color: var(--wcu-ink) !important; text-wrap: balance;
}
/* No local .hl-r/.hl-b rules here on purpose. core.css §1b already owns the
   accent spans at (0,3,2) -- the shape it needs to beat Canvas' own
   `h1 > span:not(.nocolor):not(.badge)` at (0,2,2), which repaints heading
   spans black. A page-local `.owf-wcu__h1 .hl-r` is only (0,2,0) and loses
   to both, so the rules that used to sit here were never applying. */
@media (max-width: 760px) { .owf-wcu__br { display: none; } }
.owf-wcu__lead { margin: 0 0 clamp(18px, 2.2vw, 26px); font-size: clamp(15px, 0.7vw + 11px, 20px); font-weight: 300; line-height: 1.55; color: var(--wcu-ink-2); }
.owf-wcu__lead::first-letter { float: left; margin: 6px 12px 0 0; font-size: 3.3em; line-height: 0.74; font-weight: 800; letter-spacing: -0.05em; color: var(--wcu-blue); }
.owf-wcu__mast-cta { display: flex; flex-wrap: wrap; gap: 10px; }

.owf-wcu__mast-fig { margin: 0; min-width: 0; }
.owf-wcu__mast-fig img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border: 1px solid var(--wcu-rule); border-radius: var(--wcu-r-fig); }
.owf-wcu__mast-fig figcaption { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--wcu-rule-soft); font-size: 11.5px; font-weight: 300; line-height: 1.5; color: var(--wcu-ink-3); }

.owf-wcu__answer { padding: clamp(16px, 1.8vw, 24px) 0 0; border-top: 3px solid var(--wcu-ink); }
.owf-wcu__answer-h { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--wcu-red) !important; }
.owf-wcu__answer-lead { margin: 0 0 clamp(14px, 1.8vw, 20px); font-size: clamp(13.5px, 0.55vw + 11px, 16.5px); font-weight: 300; line-height: 1.62; color: var(--wcu-ink-2); }
.owf-wcu__answer-lead b { font-weight: 600; color: var(--wcu-ink); }
.owf-wcu__answer-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); margin: 0; border-top: 1px solid var(--wcu-rule); }
.owf-wcu__answer-dl > div { padding: 13px clamp(14px, 1.8vw, 26px) 13px 0; border-right: 1px solid var(--wcu-rule-soft); }
.owf-wcu__answer-dl > div:last-child { border-right: 0; }
.owf-wcu__answer-dl > div + div { padding-left: clamp(14px, 1.8vw, 26px); }
.owf-wcu__answer-dl dt { margin: 0 0 5px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wcu-blue); }
.owf-wcu__answer-dl dt i {
    display: grid; place-items: center; width: 28px; height: 28px; margin-bottom: 11px;
    border: 1px solid var(--wcu-rule); border-radius: var(--wcu-r); font-size: 13px; letter-spacing: 0; color: var(--wcu-ink-3);
    transition: background 0.35s var(--wcu-ease), border-color 0.35s var(--wcu-ease), color 0.35s var(--wcu-ease), transform 0.5s var(--wcu-spring);
}
.owf-wcu__answer-dl > div:hover dt i { background: var(--wcu-blue); border-color: var(--wcu-blue); color: #fff; transform: rotate(-7deg); }
.owf-wcu__answer-dl > div:last-child:hover dt i { background: var(--wcu-red); border-color: var(--wcu-red); }
.owf-wcu__answer-dl dd { margin: 0; font-size: 12.5px; font-weight: 300; line-height: 1.5; color: var(--wcu-ink-2); }


/* =============== 3 · jump rail =============== */
.owf-wcu__jump {
    position: sticky; top: var(--wcu-hdr-h); z-index: 30;
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%);
    border-top: 1px solid var(--wcu-ink); border-bottom: 1px solid var(--wcu-rule);
}
.owf-wcu__jump-in {
    display: flex; gap: clamp(14px, 2.2vw, 32px);
    overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
    scroll-padding-left: var(--owf-gutter, 28px); scroll-padding-right: var(--owf-gutter, 28px);
    overscroll-behavior-x: contain;
}
.owf-wcu__jump-in::-webkit-scrollbar { display: none; }
.owf-wcu__jump-a { position: relative; flex: 0 0 auto; scroll-snap-align: start; display: inline-flex; align-items: baseline; gap: 7px; padding: 12px 0; text-decoration: none; white-space: nowrap; }
.owf-wcu__jump-n { font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; color: var(--wcu-ink-4); transition: color 0.3s ease; }
.owf-wcu__jump-a > span:last-child { font-size: clamp(12px, 0.4vw + 10px, 13.5px); font-weight: 500; color: var(--wcu-ink-2); transition: color 0.3s ease; }
.owf-wcu__jump-a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--wcu-red); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--wcu-ease); }
.owf-wcu__jump-a:hover > span:last-child { color: var(--wcu-blue); }
.owf-wcu__jump-a.is-on > span:last-child { color: var(--wcu-ink); font-weight: 600; }
.owf-wcu__jump-a.is-on .owf-wcu__jump-n { color: var(--wcu-red); }
.owf-wcu__jump-a.is-on::after { transform: scaleX(1); }
.owf-wcu__jump-a:focus-visible { outline: 2px solid var(--wcu-red); outline-offset: 2px; }


/* =============== 4 · 01 counters =============== */
.owf-wcu__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--wcu-rule); border-left: 1px solid var(--wcu-rule-soft); }
.owf-wcu__stat {
    display: flex; flex-direction: column; align-items: flex-start;
    padding: clamp(18px, 2vw, 28px) clamp(14px, 1.6vw, 24px);
    border-right: 1px solid var(--wcu-rule-soft); border-bottom: 1px solid var(--wcu-rule-soft);
    transition: background 0.35s var(--wcu-ease);
}
.owf-wcu__stat:hover { background: rgba(0, 114, 190, 0.035); }
.owf-wcu__stat-ic { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 16px; border: 1px solid var(--wcu-rule); border-radius: var(--wcu-r); color: var(--wcu-ink-3); font-size: 17px; transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease, transform 0.5s var(--wcu-spring); }
.owf-wcu__stat:hover .owf-wcu__stat-ic { background: var(--wcu-blue); border-color: var(--wcu-blue); color: #fff; transform: rotate(-7deg); }
.owf-wcu__stat-n { font-size: clamp(38px, 3.6vw, 66px); font-weight: 800; line-height: 0.9; letter-spacing: -0.055em; color: var(--wcu-ink); font-variant-numeric: tabular-nums; }
.owf-wcu__stat-n em { font-size: 0.4em; font-style: normal; font-weight: 600; letter-spacing: -0.02em; color: var(--wcu-red); padding-left: 2px; }
.owf-wcu__stat-l { margin-top: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--wcu-blue); }
.owf-wcu__stat-d { margin: 8px 0 0; font-size: 12.5px; font-weight: 300; line-height: 1.55; color: var(--wcu-ink-2); }
.owf-wcu__stat-tag { margin-top: auto; padding-top: 14px; font-size: 9px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--wcu-ink-4); }


/* =============== 5 · 02 pinned horizontal rail =============== */
/* No overflow: hidden here. .owf-wcu__hs-pin is position: sticky inside this
   element, and clipping an ancestor turns it into a scroll container, which
   kills the pin outright. The spots are inset instead so they stay in-bounds. */
.owf-wcu__hs {
    /* Same deep gradient as --ink, so it needs the same accent re-tint --
       see the note there. Two dark surfaces, one mechanism. */
    --owf-hl-b: #9ecbf0;
    --owf-hl-r: #f3a0a4;
    position: relative; color: #fff; scroll-margin-top: 0;
    background: linear-gradient(158deg, var(--wcu-deep-1) 0%, var(--wcu-deep-2) 46%, var(--wcu-deep-3) 100%);
}
.owf-wcu__hs-pin {
    background:
        radial-gradient(circle at 88% 12%, rgba(0, 148, 235, 0.4) 0%, transparent 46%),
        radial-gradient(circle at 6% 92%, rgba(204, 41, 48, 0.28) 0%, transparent 42%);
}
.owf-wcu__hs-pin { padding: clamp(26px, 3vw, 44px) 0 clamp(22px, 2.6vw, 36px); }

/* the pin only engages once the engine has measured a travel distance */
.owf-wcu__hs.is-pinned .owf-wcu__hs-pin {
    /* Clears both the sticky site header and the sticky jump rail above it,
       otherwise the pinned frame slides underneath them. */
    position: sticky;
    top: calc(var(--wcu-hdr-h) + var(--wcu-jump-h));
    height: calc(100vh - var(--wcu-hdr-h) - var(--wcu-jump-h));
    display: flex; flex-direction: column; justify-content: center; gap: clamp(16px, 2vw, 30px);
    overflow: hidden;
}

.owf-wcu__hs-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(14px, 1.8vw, 28px); align-items: center; }
.owf-wcu__hs-prog { display: flex; align-items: center; gap: 12px; min-width: clamp(120px, 14vw, 200px); }
.owf-wcu__hs-prog-n { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.5); font-variant-numeric: tabular-nums; white-space: nowrap; }
.owf-wcu__hs-prog-n b { font-size: 18px; font-weight: 800; color: #fff; }
.owf-wcu__hs-prog-tr { flex: 1; height: 4px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, 0.2); }
.owf-wcu__hs-prog-tr i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--wcu-red); transition: width 0.12s linear; }

.owf-wcu__hs-view { overflow: hidden; }
.owf-wcu__hs-track {
    display: flex; gap: 0; margin: 0; padding: 0 var(--owf-gutter, 28px); list-style: none;
    will-change: transform;
}
.owf-wcu__rsn {
    flex: 0 0 clamp(300px, 27vw, 420px); min-width: 0;
    display: flex; flex-direction: column; align-items: flex-start;
    padding: clamp(20px, 2.2vw, 32px) clamp(18px, 2vw, 30px);
    border-left: 1px solid rgba(255, 255, 255, 0.16);
    position: relative;
}
.owf-wcu__rsn:last-child { border-right: 1px solid rgba(255, 255, 255, 0.16); }
.owf-wcu__rsn-n { position: absolute; top: clamp(16px, 1.8vw, 24px); right: clamp(16px, 1.8vw, 24px); font-size: clamp(30px, 3vw, 52px); font-weight: 800; line-height: 1; letter-spacing: -0.07em; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.2); }
.owf-wcu__rsn-ic { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 18px; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: var(--wcu-r); color: #7fc4f0; font-size: 18px; transition: background 0.35s ease, color 0.35s ease, transform 0.5s var(--wcu-spring); }
.owf-wcu__rsn:hover .owf-wcu__rsn-ic { background: var(--wcu-red); border-color: var(--wcu-red); color: #fff; transform: rotate(-7deg); }
.owf-wcu__rsn-k { font-size: 9.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #ffb3b7; }
.owf-wcu__rsn-t { margin: 8px 0 12px; font-size: clamp(18px, 1vw + 12px, 25px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.12; color: #fff !important; }
.owf-wcu__rsn-d { margin: 0; font-size: clamp(12.5px, 0.4vw + 11px, 14px); font-weight: 300; line-height: 1.6; color: rgba(255, 255, 255, 0.7); }
.owf-wcu__rsn-p { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 18px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #7fc4f0; }
.owf-wcu__rsn-p i { color: var(--wcu-red); font-size: 12px; }
.owf-wcu__rsn-a { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 9px 16px; border: 1px solid rgba(255, 255, 255, 0.32); border-radius: var(--wcu-r); font-size: 11.5px; font-weight: 600; color: #fff !important; text-decoration: none; transition: background 0.25s ease, border-color 0.25s ease; }
.owf-wcu__rsn-a:hover { background: #fff; color: var(--wcu-ink) !important; border-color: #fff; }
.owf-wcu__rsn-a i { transition: transform 0.3s var(--wcu-ease); }
.owf-wcu__rsn-a:hover i { transform: translateX(4px); }


/* =============== 6 · 03 comparison =============== */
.owf-wcu__cmp { border-top: 1px solid var(--wcu-ink); }
.owf-wcu__cmp-h,
.owf-wcu__cmp-r { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.15fr) minmax(0, 1.15fr); gap: clamp(12px, 1.6vw, 26px); }
.owf-wcu__cmp-h > span { padding: 11px 0; font-size: 9.5px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--wcu-ink-4); border-bottom: 1px solid var(--wcu-rule); }
.owf-wcu__cmp-h--o { color: var(--wcu-blue) !important; display: inline-flex; align-items: center; gap: 7px; }
.owf-wcu__cmp-h--x { color: var(--wcu-ink-4) !important; }
.owf-wcu__cmp-r { border-bottom: 1px solid var(--wcu-rule-soft); transition: background 0.25s ease; }
.owf-wcu__cmp-r:hover { background: rgba(0, 114, 190, 0.03); }
.owf-wcu__cmp-r > span { padding: 15px 0; font-size: 13px; font-weight: 300; line-height: 1.55; color: var(--wcu-ink-2); }
.owf-wcu__cmp-q { font-weight: 600 !important; letter-spacing: -0.025em; color: var(--wcu-ink) !important; font-size: 14px !important; }
.owf-wcu__cmp-o { display: flex; gap: 9px; color: var(--wcu-ink) !important; }
.owf-wcu__cmp-o i { flex-shrink: 0; margin-top: 3px; color: var(--wcu-blue); font-size: 13px; }
.owf-wcu__cmp-x { display: flex; gap: 9px; }
.owf-wcu__cmp-x i { flex-shrink: 0; margin-top: 3px; color: var(--wcu-ink-4); font-size: 13px; }


/* =============== 7 · 04 split, 05 lab, 06 commitments =============== */
.owf-wcu__split { display: grid; grid-template-columns: clamp(240px, 26vw, 380px) minmax(0, 1fr); gap: clamp(22px, 3.4vw, 56px); align-items: start; }
.owf-wcu__split-txt { min-width: 0; }

/* ---- the specialist split, from two columns to two columns of equal weight
   Measured at 1440: the portrait stood 505px tall against 259px of text, so
   246px of the left column was dead. Two causes, so two fixes.

   The prose was running to 961px -- roughly 130 characters a line, which is
   why it collapsed to so few lines. 92ch is the measure the rest of this page
   already uses for body copy, and it makes the column taller as well as
   readable.

   Then the plate stops dictating its own height: align-items: stretch plus a
   flex figure lets the portrait take exactly the height the text takes. The
   gap cannot reappear when the copy is edited, because there is no longer a
   fixed ratio for it to disagree with. Scoped to >=768px -- below that the
   split is a single column and the figure keeps its 4:5. */
@media (min-width: 768px) {
    .owf-wcu__split { align-items: stretch; grid-template-columns: clamp(240px, 22vw, 330px) minmax(0, 1fr); }
 .owf-wcu__split-txt > p { }
    .owf-wcu__fig--port { display: flex; flex-direction: column; }
    /* flex-basis 0 in a column flex container replaces height, so the image
       takes the leftover height after the caption; min-height stops it
       collapsing if the copy is ever cut right back. */
    .owf-wcu__fig--port img { aspect-ratio: auto; flex: 1 1 0; min-height: 300px; }
}
.owf-wcu__pull {
    margin: 0 0 18px; padding: 0 0 18px; border-bottom: 1px solid var(--wcu-rule);
    font-size: clamp(17px, 1vw + 11px, 25px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.3; color: var(--wcu-blue);
}
.owf-wcu__body { margin: 0 0 14px; font-size: clamp(13px, 0.4vw + 11.5px, 15px); font-weight: 300; line-height: 1.68; color: var(--wcu-ink-2); }
/* ---- continuity timeline ----
   The claim is one unbroken line with one name on it, so it is drawn as a
   line: five nodes left to right, each connector filling on scroll.

   Connectors are per-node, not one bar across the list. That is not a style
   choice -- on a phone this becomes a scroll rail, and inside a scroll
   container an absolutely positioned child resolves its left/right against
   the visible window rather than the scrolled content, so a single spanning
   bar would sit still while the nodes slid past it. */
.owf-wcu__cont { --ct-ic: 30px; margin: 20px 0 22px; padding-top: 16px; border-top: 1px solid var(--wcu-rule); }
.owf-wcu__cont-h { display: block; margin-bottom: 14px; font-family: var(--owf-font-accent, 'Nunito'), sans-serif; font-size: 9.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wcu-ink-4); }
.owf-wcu__cont-l { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; }
.owf-wcu__cont-i { position: relative; padding-right: 14px; }
.owf-wcu__cont-ic {
    position: relative; z-index: 1;   /* the ping has to ride over the connector */
    display: grid; place-items: center; width: var(--ct-ic); height: var(--ct-ic);
    border: 1px solid var(--wcu-rule); border-radius: 50%;
    font-size: 13px; color: var(--wcu-blue); background: var(--wcu-paper);
    transition: border-color 0.35s var(--wcu-ease), color 0.35s var(--wcu-ease);
}
/* A ring leaving each node, staggered down the line so the pulse reads as
   one wave travelling the timeline rather than five circles blinking at
   once. Kept faint and slow -- it sits beside body copy. The page's
   prefers-reduced-motion block already stops it dead. */
.owf-wcu__cont-ic::after {
    content: ""; position: absolute; inset: -1px; border-radius: 50%;
    border: 1px solid var(--wcu-blue); pointer-events: none;
    animation: wcu-ping 3s var(--wcu-ease) infinite;
}
.owf-wcu__cont-i:nth-child(2) .owf-wcu__cont-ic::after { animation-delay: 0.4s; }
.owf-wcu__cont-i:nth-child(3) .owf-wcu__cont-ic::after { animation-delay: 0.8s; }
.owf-wcu__cont-i:nth-child(4) .owf-wcu__cont-ic::after { animation-delay: 1.2s; }
.owf-wcu__cont-i:nth-child(5) .owf-wcu__cont-ic::after { animation-delay: 1.6s; }
@keyframes wcu-ping {
    0%       { transform: scale(1);    opacity: 0.5; }
    62%, 100% { transform: scale(1.85); opacity: 0; }
}
/* the segment runs from this node's edge to exactly where the next one
   starts, so gap: 0 on the list is what keeps the line continuous */
.owf-wcu__cont-c {
    position: absolute; left: calc(var(--ct-ic) + 7px); right: 0;
    top: calc(var(--ct-ic) / 2 - 1px); height: 2px;
    background: var(--wcu-rule); overflow: clip;
}
.owf-wcu__cont-cf { display: block; width: 0; height: 100%; background: var(--wcu-blue); }
.owf-wcu__cont-t { display: block; margin-top: 11px; font-size: 12px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.35; color: var(--wcu-ink-2); }
/* the last stop is the one the section is named after */
.owf-wcu__cont-i--end .owf-wcu__cont-ic { border-color: var(--wcu-red); color: var(--wcu-red); }
.owf-wcu__cont-i--end .owf-wcu__cont-ic::after { border-color: var(--wcu-red); }
.owf-wcu__cont-i--end .owf-wcu__cont-t { font-weight: 600; color: var(--wcu-ink); }

.owf-wcu__inline-a { display: inline-flex; align-items: center; gap: 9px; margin-top: 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wcu-blue); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.owf-wcu__inline-a:hover { color: var(--wcu-red); }
.owf-wcu__inline-a i { transition: transform 0.3s var(--wcu-ease); }
.owf-wcu__inline-a:hover i { transform: translateX(4px); }

.owf-wcu__labrig { display: grid; grid-template-columns: minmax(0, 1fr) clamp(280px, 32vw, 520px); gap: clamp(22px, 3.4vw, 56px); align-items: start; }
.owf-wcu__gauges { display: grid; gap: 0; border-top: 1px solid rgba(255, 255, 255, 0.2); }
.owf-wcu__gauge { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 4px clamp(16px, 2vw, 26px); align-items: center; padding: clamp(16px, 1.8vw, 24px) 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.owf-wcu__gauge svg { grid-row: 1 / 3; width: 96px; height: 96px; display: block; }
.owf-wcu__gauge-tr { fill: none; stroke: rgba(255, 255, 255, 0.14); stroke-width: 8; }
.owf-wcu__gauge-v  { fill: none; stroke: #7fc4f0; stroke-width: 8; stroke-linecap: butt; }
.owf-wcu__gauge-n  { font-family: var(--owf-font-display, 'Jost'), sans-serif; font-size: 30px; font-weight: 800; letter-spacing: -0.05em; fill: #fff; }
.owf-wcu__gauge-u  { font-size: 15px; font-weight: 600; fill: #7fc4f0; }
.owf-wcu__gauge-t  { margin: 0; align-self: end; font-size: clamp(15px, 0.6vw + 11px, 19px); font-weight: 600; letter-spacing: -0.03em; color: #fff !important; }
.owf-wcu__gauge-d  { margin: 0; align-self: start; font-size: 12.5px; font-weight: 300; line-height: 1.55; color: rgba(255, 255, 255, 0.66); }
.owf-wcu__bar      { display: none; }

.owf-wcu__promise { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--wcu-rule); border-left: 1px solid var(--wcu-rule-soft); }
.owf-wcu__promise li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: baseline; padding: clamp(15px, 1.7vw, 21px) clamp(14px, 1.6vw, 24px); border-right: 1px solid var(--wcu-rule-soft); border-bottom: 1px solid var(--wcu-rule-soft); transition: background 0.3s ease; }
.owf-wcu__promise li:hover { background: rgba(204, 41, 48, 0.04); }
/* A step down from clamp(13.5, .., 16): eight short commitments read as a
   list to scan, not eight paragraphs, and at 16px they carried more weight
   than the section heading above them. Now 13.5px at desktop, ~12px on a
   phone, with the index dropping to match. */
.owf-wcu__promise-n { font-size: 10.5px; font-weight: 800; letter-spacing: 0.02em; color: var(--wcu-red); font-variant-numeric: tabular-nums; }
.owf-wcu__promise-t { font-size: clamp(12px, 0.28vw + 11px, 13.5px); font-weight: 400; line-height: 1.45; letter-spacing: -0.02em; color: var(--wcu-ink); }


/* =============== 8 · FAQ, CTA, figures =============== */
.owf-wcu__faq { border-top: 1px solid var(--wcu-rule); }
.owf-wcu__q { border: 0; border-bottom: 1px solid var(--wcu-rule-soft); border-radius: 0; background: transparent; padding: 0; margin: 0; box-shadow: none; }
.owf-wcu__q > summary { display: flex; align-items: flex-start; gap: 16px; padding: clamp(15px, 1.7vw, 20px) 0; margin: 0; font-size: inherit; font-weight: 400; background: transparent; border: 0; cursor: pointer; list-style: none; }
.owf-wcu__q > summary::-webkit-details-marker { display: none; }
.owf-wcu__q > summary::marker { content: ''; }
.owf-wcu__q > summary:focus-visible { outline: 2px solid var(--wcu-red); outline-offset: 2px; }
.owf-wcu__q-n { flex-shrink: 0; width: 24px; padding-top: 3px; font-size: 12px; font-weight: 700; color: var(--wcu-ink-4); transition: color 0.25s ease; }
.owf-wcu__q-t { flex: 1; min-width: 0; font-size: clamp(15px, 0.45vw + 13px, 18px); font-weight: 500; letter-spacing: -0.028em; line-height: 1.38; color: var(--wcu-ink); transition: color 0.25s ease; }
.owf-wcu__q-mark { position: relative; flex-shrink: 0; width: 24px; height: 24px; border: 1px solid var(--wcu-rule); border-radius: 6px; transition: background 0.3s ease, border-color 0.3s ease, transform 0.4s var(--wcu-spring); }
.owf-wcu__q-mark i { position: absolute; top: 50%; left: 50%; display: block; width: 10px; height: 1.5px; margin: -0.75px 0 0 -5px; background: var(--wcu-ink); transition: transform 0.35s var(--wcu-spring), background 0.3s ease; }
.owf-wcu__q-mark i:last-child { transform: rotate(90deg); }
.owf-wcu__q:hover .owf-wcu__q-t { color: var(--wcu-blue); }
.owf-wcu__q:hover .owf-wcu__q-mark { border-color: var(--wcu-blue); }
.owf-wcu__q[open] .owf-wcu__q-n { color: var(--wcu-red); }
.owf-wcu__q[open] .owf-wcu__q-mark { background: var(--wcu-red); border-color: var(--wcu-red); transform: rotate(180deg); }
.owf-wcu__q[open] .owf-wcu__q-mark i { background: #fff; }
.owf-wcu__q[open] .owf-wcu__q-mark i:last-child { transform: rotate(0deg); }
.owf-wcu__a { padding: 0 0 clamp(16px, 1.9vw, 22px) 40px; animation: wcu-slide 0.4s var(--wcu-ease); }
.owf-wcu__a p { margin: 0; font-size: clamp(13px, 0.4vw + 11.5px, 15px); font-weight: 300; line-height: 1.68; color: var(--wcu-ink-2); }
@keyframes wcu-slide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.owf-wcu__fig { margin: 0; }
.owf-wcu__fig img { display: block; width: 100%; height: auto; object-fit: cover; border: 1px solid var(--wcu-rule); border-radius: var(--wcu-r-fig); background: var(--wcu-paper-2); }
.owf-wcu__fig figcaption { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--wcu-rule-soft); font-size: 11.5px; font-weight: 300; line-height: 1.5; color: var(--wcu-ink-3); }
.owf-wcu__fig--port img { aspect-ratio: 4 / 5; }
.owf-wcu__fig--lab img { aspect-ratio: 14 / 9; border-color: rgba(255, 255, 255, 0.22); }
.owf-wcu__fig--lab figcaption { border-top-color: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.6); }

.owf-wcu__cta {
    position: relative; overflow: hidden;
    padding: clamp(34px, 4.2vw, 66px) 0; color: #fff;
    border-top: 1px solid var(--wcu-deep-3);
    background: linear-gradient(158deg, var(--wcu-deep-1) 0%, var(--wcu-deep-2) 52%, var(--wcu-deep-3) 100%);
}
.owf-wcu__cta::before { top: -16%; left: 12%; width: 30vw; max-width: 460px; aspect-ratio: 1; background: rgba(0, 148, 235, 0.34); }
.owf-wcu__cta::after  { bottom: -20%; right: 6%; width: 24vw; max-width: 380px; aspect-ratio: 1; background: rgba(204, 41, 48, 0.24); }
.owf-wcu__cta-in { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: clamp(20px, 3vw, 44px); }
.owf-wcu__cta-txt { min-width: 0; }
.owf-wcu__cta-k { display: block; margin-bottom: 12px; font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #ffb3b7; }
.owf-wcu__cta-t { margin: 0 0 10px; font-size: clamp(24px, 2.2vw + 8px, 50px); font-weight: 800; letter-spacing: -0.045em; line-height: 1.02; color: #fff !important; }
.owf-wcu__cta-d { margin: 0; font-size: clamp(13px, 0.5vw + 11px, 15.5px); font-weight: 300; line-height: 1.6; color: rgba(255, 255, 255, 0.7); }
.owf-wcu__cta-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.owf-wcu__cta .owf-wcu__btn--s { color: #fff !important; border-color: rgba(255, 255, 255, 0.45); }
.owf-wcu__cta .owf-wcu__btn--s:hover { background: #fff; color: var(--wcu-ink) !important; border-color: #fff; }


/* =============== 9 · responsive =============== */
@media (max-width: 1180px) {
    .owf-wcu__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .owf-wcu__mast-grid { grid-template-columns: 1fr; align-items: start; }
    .owf-wcu__split { grid-template-columns: clamp(200px, 30vw, 300px) minmax(0, 1fr); }
    .owf-wcu__labrig { grid-template-columns: 1fr; }
}

@media (max-width: 899px) {
    /* No pin below this width: the rail becomes a native snap scroller, which
       is the better interaction on a touch screen anyway. */
    .owf-wcu__hs { height: auto !important; }
    .owf-wcu__hs-pin { position: static !important; height: auto !important; overflow: visible !important; }
    .owf-wcu__hs-view {
        overflow-x: auto; scrollbar-width: none;
        scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
        scroll-padding-left: var(--owf-gutter-mobile, 14px);
    }
    .owf-wcu__hs-view::-webkit-scrollbar { display: none; }
    .owf-wcu__hs-track { transform: none !important; padding-inline: var(--owf-gutter-mobile, 14px); }
    .owf-wcu__rsn { flex: 0 0 min(80vw, 340px); scroll-snap-align: start; }
    .owf-wcu__hs-head { grid-template-columns: auto minmax(0, 1fr); }
    .owf-wcu__hs-prog { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
    .owf-wcu__band { padding: clamp(26px, 6vw, 38px) 0; }
    .owf-wcu__crumb { gap: 6px; padding-top: 12px; font-size: 10px; }
    .owf-wcu__dateline { gap: 7px; font-size: 8.5px; letter-spacing: 0.13em; }
    /* ---- masthead type, down a step on a phone ----
       clamp(33px, 10.5vw, 52px) put the headline at 41px on a 390px screen —
       three or four lines before the lead even starts. The buttons carried
       their 14px desktop label at 26px of side padding, which is what made
       the pair look oversized under it. */
    .owf-wcu__h1 { font-size: clamp(26px, 8vw, 36px); line-height: 1.02; letter-spacing: -0.04em; }
    .owf-wcu__lead { font-size: 13.5px; line-height: 1.6; }
    .owf-wcu__lead::first-letter { font-size: 2.7em; margin: 4px 9px 0 0; }
    .owf-wcu__mast-cta { width: 100%; gap: 8px; }
    .owf-wcu__mast-cta .owf-wcu__btn {
        flex: 1 1 0; min-width: 0; min-height: 44px;
        padding: 11px 12px; gap: 7px; font-size: 12.5px;
    }
    .owf-wcu__mast-cta .owf-wcu__btn i { flex-shrink: 0; font-size: 13px; }
    /* ---- the four answers, 2x2 on a phone ----
       Four stacked rows read as a list you have to scroll; a 2x2 reads as
       one block you take in at a glance. The rules that separate them are
       drawn on the <dl> itself, not on the cells: two centre lines that
       fade out before either end, so nothing frames the block on the
       outside. grid-auto-rows: 1fr forces both rows to the same height,
       which is what lets the horizontal line sit at a flat 50% and still
       land in the row gap. */
    .owf-wcu__answer-dl {
        position: relative;
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 1fr;
        gap: 17px 16px;
        border-top: 0;
    }
    .owf-wcu__answer-dl::before,
    .owf-wcu__answer-dl::after { content: ""; position: absolute; pointer-events: none; }
    .owf-wcu__answer-dl::before {
        top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%);
        background: linear-gradient(180deg, transparent 0, var(--wcu-rule) 15%, var(--wcu-rule) 85%, transparent 100%);
    }
    .owf-wcu__answer-dl::after {
        left: 0; right: 0; top: 50%; height: 1px; transform: translateY(-50%);
        background: linear-gradient(90deg, transparent 0, var(--wcu-rule) 15%, var(--wcu-rule) 85%, transparent 100%);
    }
    /* the gap does the spacing now, so every cell rule from desktop comes off */
    .owf-wcu__answer-dl > div,
    .owf-wcu__answer-dl > div + div,
    .owf-wcu__answer-dl > div:last-child { padding: 0 !important; border: 0; }
    /* half the width means the label has to give some back */
    .owf-wcu__answer-dl dt { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 8.5px; letter-spacing: 0.1em; }
    .owf-wcu__answer-dl dt i { width: 22px; height: 22px; margin-bottom: 0; flex-shrink: 0; font-size: 11px; }
    .owf-wcu__answer-dl dd { font-size: 11.5px; line-height: 1.45; }

    .owf-wcu__head { grid-template-columns: 1fr; gap: 4px; }
    .owf-wcu__num { font-size: 34px; -webkit-text-stroke-width: 1px; }
    .owf-wcu__head-txt { padding-top: 0; }

    /* ---- by the numbers, as a rail ----
       Four stat blocks stacked is four screens of scrolling before the next
       section. As a full-bleed snap rail they read as one band you swipe.

       The usual three-part full-bleed idiom: negative margin cancels the
       container gutter, padding puts it back inside the scroller, and
       scroll-padding matches it -- without the third the first card lands
       flush against the screen edge after a swipe, because the snapport is
       the padding box.

       overflow-y must be stated at all: left at `visible` it computes to
       `auto` the moment the other axis scrolls, which hands the rail a
       vertical scroller that swallows the reveal transform. `clip` is the
       honest intent, though paired with `auto` it computes to `hidden`
       anyway -- measured ovY=hidden, and no vertical overflow either way. */
    .owf-wcu__stats {
        display: grid; grid-template-columns: none;
        grid-auto-flow: column; grid-auto-columns: min(74vw, 300px);
        border-left: 0;
        margin-inline: calc(var(--owf-gutter-mobile, 14px) * -1);
        padding-inline: var(--owf-gutter-mobile, 14px);
        overflow-x: auto; overflow-y: clip;
        scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
        scroll-padding-left: var(--owf-gutter-mobile, 14px);
        scrollbar-width: none;
    }
    .owf-wcu__stats::-webkit-scrollbar { display: none; }
    /* the hairline between cards is the divider now; the row is one height,
       so the bottom rule still runs straight across the band */
    .owf-wcu__stat {
        scroll-snap-align: start;
        padding: 18px 15px 18px 0;
        border-right: 1px solid var(--wcu-rule-soft);
    }
    .owf-wcu__stat + .owf-wcu__stat { padding-left: 15px; }
    .owf-wcu__stat:last-child { border-right: 0; }
    .owf-wcu__stat:hover { background: none; }
    .owf-wcu__stat-ic { width: 34px; height: 34px; margin-bottom: 12px; font-size: 15px; }
    .owf-wcu__stat-n { font-size: 40px; }
    .owf-wcu__stat-l { font-size: 10.5px; letter-spacing: 0.11em; }
    .owf-wcu__stat-d { font-size: 11.5px; line-height: 1.5; }
    .owf-wcu__stat-tag { padding-top: 12px; font-size: 8.5px; }

    /* ---- the comparison stays a table, and scrolls ----
       Stacking each row into three labelled blocks lost the only thing a
       comparison is for: reading the two answers against each other. So the
       table survives on a phone -- the question column pins to the left as
       the row heading and the two answer columns scroll under it.

       Widths are sized so one answer column sits beside the pinned heading
       with the next just peeking, which is what tells you it scrolls.
       scroll-padding-left clears the pinned column, so a snapped answer
       lands beside the question rather than underneath it. */
    .owf-wcu__cmp {
        --cmp-qw: 176px;
        /* Width is derived, not chosen. For the LAST column to be able to snap
           flush against the pinned one, the scroller has to be able to travel
           a full column: that needs cw >= 100vw - 2*gutter - qw. Anything
           narrower and the run ends early, stranding a sliver of the first
           answer beside the question -- which is exactly what showed. Taking
           it as an equality also makes the next column peek by precisely one
           gutter at rest, which is the affordance. */
        --cmp-cw: calc(100vw - var(--cmp-qw) - (var(--owf-gutter-mobile, 14px) * 2));
        margin-inline: calc(var(--owf-gutter-mobile, 14px) * -1);
        padding-inline: var(--owf-gutter-mobile, 14px);
        overflow-x: auto; overflow-y: clip;
        /* mandatory, not proximity: there are exactly two useful rest states
           -- question + At One World, or question + Common practice -- and
           proximity let a swipe stop halfway, leaving a sliver of the first
           answer stranded beside the pinned column. */
        scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
        scroll-padding-left: calc(var(--owf-gutter-mobile, 14px) + var(--cmp-qw));
        scrollbar-width: none;
    }
    .owf-wcu__cmp::-webkit-scrollbar { display: none; }
    /* the column headings come back -- they are what label the two answers
       now that the per-cell ::before labels are gone */
    .owf-wcu__cmp-h { display: grid; }
    .owf-wcu__cmp-h,
    .owf-wcu__cmp-r {
        /* Fixed tracks, NOT minmax(0, ...): a minmax whose floor is 0 is a
           flexible range, so the grid happily shrinks the answer columns to
           fit the container and nothing ever overflows -- which means nothing
           ever scrolls. Definite widths are what force the scroll.
           min-width: max-content grows the row box to match, so each row's
           bottom rule runs the full scrolled width instead of stopping at
           the screen edge. */
        grid-template-columns: var(--cmp-qw) repeat(2, var(--cmp-cw));
        min-width: max-content; gap: 0;
    }
    /* The heading holds one line. Getting there is a pair of changes, not
       one: 0.09em tracking instead of the desktop 0.15em, and a question
       column widened to 142px to take the result. nowrap then guarantees it
       -- three wrapped lines made the header taller than any data row. */
    /* measured, not guessed: at 0.05em the heading filled its column to the
       pixel, which a font fallback would have overflowed. 0.03em plus the
       wider column leaves ~9px of slack. */
    .owf-wcu__cmp-h > span { padding: 9px 0; font-size: 8px; letter-spacing: 0.03em; }
    .owf-wcu__cmp-h > span:first-child { white-space: nowrap; }
    .owf-wcu__cmp-r > span { padding: 13px 0; font-size: 12px; }
    /* left: 0, not left: 14px. Chromium resolves the sticky constraint
       against this scroller's CONTENT edge, which the padding-inline has
       already pushed to the gutter -- so 0 pins the question column exactly
       on the gutter, and 14px pinned it 14px inside that (measured). */
    .owf-wcu__cmp-q,
    .owf-wcu__cmp-h > span:first-child {
        position: sticky; left: 0; z-index: 2;
        background: var(--wcu-paper-2);
        font-size: 12.5px !important;
    }
    /* No fade veil over the next column: it has to overhang the answer cell
       to be of any use, which means it dims the answer's first characters
       even at scroll 0. The opaque background already hides what passes
       under, and the answer cells' left hairline draws the seam. */
    .owf-wcu__cmp-h > span:first-child { border-bottom-color: var(--wcu-rule); }
    /* Breathing room either side of the column rule. The child combinator is
       load-bearing: `.owf-wcu__cmp-r > span { padding: 13px 0 }` is (0,1,1)
       and beat a lone `.owf-wcu__cmp-q` at (0,1,0), so the shorthand kept
       zeroing this and questions ran flush into the rule. */
    .owf-wcu__cmp-r > .owf-wcu__cmp-q { padding-right: 16px; }
    /* The pinned column stops at the gutter, but the scroller's 14px padding
       strip to its left is bare -- answers slid through it in plain sight.
       This carries the cell's own background across that strip, so the
       column masks everything passing behind it right up to the screen edge. */
    .owf-wcu__cmp-q::before,
    .owf-wcu__cmp-h > span:first-child::before {
        content: ""; position: absolute; top: 0; bottom: 0; right: 100%;
        width: var(--owf-gutter-mobile, 14px);
        background: var(--wcu-paper-2); pointer-events: none;
    }
    .owf-wcu__cmp-o, .owf-wcu__cmp-x {
        border-left: 1px solid var(--wcu-rule-soft);
        scroll-snap-align: start;
    }
    /* Same (0,1,1) shorthand trap as the question cell: the bare class rules
       lost to `.owf-wcu__cmp-r > span { padding: 13px 0 }` and
       `.owf-wcu__cmp-h > span { padding: 9px 0 }`, so the tick and dash sat
       right on the column rule. Match the combinator to out-rank them. */
    .owf-wcu__cmp-r > .owf-wcu__cmp-o,
    .owf-wcu__cmp-r > .owf-wcu__cmp-x,
    .owf-wcu__cmp-h > .owf-wcu__cmp-h--o,
    .owf-wcu__cmp-h > .owf-wcu__cmp-h--x { padding-left: 16px; }
    .owf-wcu__cmp-r:hover { background: none; }

    .owf-wcu__split { grid-template-columns: 1fr; }

    /* ---- the timeline, as a rail ----
       Five stages will not sit across a phone, so it scrolls. Same full-bleed
       idiom as every other rail here: negative margin cancels the gutter,
       padding puts it back inside the scroller, scroll-padding matches it --
       without the third the first node lands flush on the screen edge after
       a swipe, because the snapport is the padding box. */
    .owf-wcu__cont-l {
        grid-auto-columns: 47vw;
        margin-inline: calc(var(--owf-gutter-mobile, 14px) * -1);
        padding-inline: var(--owf-gutter-mobile, 14px);
        overflow-x: auto; overflow-y: clip;
        scroll-snap-type: x proximity; overscroll-behavior-x: contain;
        scroll-padding-left: var(--owf-gutter-mobile, 14px);
        scrollbar-width: none;
    }
    .owf-wcu__cont-l::-webkit-scrollbar { display: none; }
    .owf-wcu__cont-i { scroll-snap-align: start; }
    .owf-wcu__cont-t { font-size: 11.5px; }
    /* ---- the lab standards, three across ----
       A 96px ring inside a 114px column leaves nothing for the number, so on
       a phone the ring gives way to a bar: same figure, same fill, read left
       to right instead of around. The ring and the bar are never displayed
       together, which is also what keeps exactly one of their two identical
       aria-labels in the accessibility tree. */
    .owf-wcu__gauges {
        /* 1.3 cards in the frame: one whole card plus a third of the next,
           which is what tells you it moves. Derived from the viewport so the
           peek holds at any phone width. */
        --lab-cw: calc((100vw - (var(--owf-gutter-mobile, 14px) * 2)) / 1.3);
        display: grid; grid-template-columns: none;
        grid-auto-flow: column; grid-auto-columns: var(--lab-cw);
        gap: 0;
        margin-inline: calc(var(--owf-gutter-mobile, 14px) * -1);
        padding-inline: var(--owf-gutter-mobile, 14px);
        overflow-x: auto; overflow-y: clip;
        scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
        scroll-padding-left: var(--owf-gutter-mobile, 14px);
        scrollbar-width: none;
    }
    .owf-wcu__gauges::-webkit-scrollbar { display: none; }
    .owf-wcu__gauge {
        scroll-snap-align: start;
        grid-template-columns: minmax(0, 1fr); gap: 7px;
        align-content: start;
        padding: 15px 16px 18px 0;
        border-bottom: 0; border-right: 1px solid rgba(255, 255, 255, 0.12);
    }
    .owf-wcu__gauge + .owf-wcu__gauge { padding-left: 16px; }
    .owf-wcu__gauge:last-child { border-right: 0; }
    .owf-wcu__gauge svg { display: none; }
    .owf-wcu__bar { display: grid; gap: 7px; }
    .owf-wcu__bar-n { font-family: var(--owf-font-display, 'Jost'), sans-serif; font-size: 26px; font-weight: 800; letter-spacing: -0.05em; line-height: 1; color: #fff; }
    .owf-wcu__bar-n em { font-size: 0.5em; font-style: normal; font-weight: 600; letter-spacing: -0.02em; color: #7fc4f0; }
    /* overflow:clip so a fill mid-transition cannot widen the grid column */
    .owf-wcu__bar-tr { display: block; height: 3px; background: rgba(255, 255, 255, 0.16); overflow: clip; }
    .owf-wcu__bar-f { display: block; height: 100%; width: 0; background: #7fc4f0; }
    .owf-wcu__gauge-t { font-size: 14.5px; letter-spacing: -0.025em; line-height: 1.25; }
    .owf-wcu__gauge-d { font-size: 11.5px; line-height: 1.55; }
    .owf-wcu__promise { grid-template-columns: 1fr; border-left: 0; }
    .owf-wcu__promise li { border-right: 0; padding-inline: 0; }
    .owf-wcu__a { padding-left: 0; }
    .owf-wcu__cta-btns { width: 100%; }
    .owf-wcu__cta-btns .owf-wcu__btn { flex: 1; }
    .owf-wcu a, .owf-wcu button { touch-action: manipulation; }
}

/* =============== reduced motion =============== */
@media (prefers-reduced-motion: reduce) {
    /* The ::before/::after arm is not decoration on the selector: a rule on an
       element does not reach its pseudo-elements, and `animation` is not an
       inherited property -- so without this the timeline's ping keeps looping
       for exactly the people who asked it not to. */
    .owf-wcu, .owf-wcu *,
    .owf-wcu *::before, .owf-wcu *::after { animation: none !important; transition-duration: 0.01ms !important; }
    .owf-wcu__fx { display: none; }
    .owf-wcu.is-ready [data-rv] { opacity: 1; transform: none; }
    /* the pin is disabled by the engine too; this is the belt to its braces */
    .owf-wcu__hs { height: auto !important; }
    .owf-wcu__hs-pin { position: static !important; height: auto !important; overflow: visible !important; }
    .owf-wcu__hs-view { overflow-x: auto; }
    .owf-wcu__hs-track { transform: none !important; }
}

/* =============== print =============== */
@media print {
    .owf-wcu__jump, .owf-wcu__fx, .owf-wcu__wm, #owf-header, #owf-top-bar,
    .owf-ft, .owf-subft, #gotoTop, .owf-wcu__cta { display: none !important; }
    /* the spots are decorative and would print as grey smears */
    .owf-wcu__band::before, .owf-wcu__band::after { display: none !important; }
    .owf-wcu__hs-pin { background: none !important; }
    .owf-wcu__band, .owf-wcu__hs { padding: 14px 0; break-inside: avoid; background: #fff !important; color: #000 !important; }
    .owf-wcu__hs-pin { position: static !important; height: auto !important; }
    .owf-wcu__hs-track { transform: none !important; display: block; }
    .owf-wcu__rsn { border: 0; border-bottom: 1px solid #ccc; padding-inline: 0; }
    .owf-wcu__rsn-t, .owf-wcu__h--lite, .owf-wcu__gauge-t { color: #000 !important; }
    .owf-wcu__rsn-d, .owf-wcu__sub--lite, .owf-wcu__gauge-d { color: #333 !important; }
    .owf-wcu a[href]::after { content: ''; }
}