/* ==========================================================================
   SUCCESS RATES  ·  /success-rates   (.owf-sr)
   ==========================================================================
   A data page that has to feel like the rest of the site rather than like a
   dashboard. Structurally a sibling of embryology-lab-team.css and
   why-choose-us.css — masthead + folio numeral, ruled grids instead of white
   cards, ink on paper with brand blue leading and red as the accent.

   The one idea specific to this page is that every figure is drawn as a
   RANGE. Range bars on the chart, a two-ended readout in the estimator, a
   band rather than a line on the cumulative curve. That is the argument the
   page is making, expressed in the geometry rather than only in the prose.

   Vocabulary borrowed from siblings so it reads as one site:
     · soft radial glow orbs that breathe      — home.css / embryology
     · concentric part-coloured orbit rings    — .owf-jrn__orbit (home.css)
     · blue eyebrow + pulsing red dot          — .owf-cnt2__eyebrow-dot
     · folio numeral + rule masthead           — why-choose-us.css

   Rules (see css/core.css header):
     · Full-bleed only — .owf-container owns the 28/14px gutters.
     · Brand tokens only. Blue leads, red accents, no gradients on type.
     · Type: Jost (display) · Open Sans (body) · Nunito (labels).
     · Every band carries content edge to edge — no empty half-screens.

   ⚠ Canvas paints every heading > span with --cnvs-themecolor, so .hl-b /
     .hl-r carry !important, as in every sibling stylesheet.
   ========================================================================== */
.owf-sr {
    --sr-line:   rgba(0, 114, 190, 0.18);
    --sr-line-2: rgba(10, 25, 41, 0.11);
    --sr-tint:   #f4fafe;
    --sr-tint-2: #eaf4fc;
    --sr-good:   #0a8f6a;
    --sr-gold:   #b8860b;
    /* mirrors --owf-hdr-h in core.css, which is scoped to #owf-header and so
       is not readable here. Keep in sync if the header height moves. */
    --sr-hdr-h:  56px;
    --sr-jump-h: 46px;
    position: relative; display: block;
    color: var(--owf-ink, #0a1929);
    font-family: var(--owf-font-display, 'Jost'), sans-serif;
    background: #fff;
}
.owf-sr .hl-b { color: var(--owf-blue, #0072be) !important; }
.owf-sr .hl-r { color: var(--owf-red, #cc2930) !important; }

/* Every major band earns its screen — the "no negative space" rule is
   enforced here rather than left to whatever content happens to land. */
.owf-sr__chart-band,
.owf-sr__why,
.owf-sr__how,
.owf-sr__tl,
.owf-sr__est,
.owf-sr__read,
.owf-sr__faq { min-height: 45vh; }

/* ==========================================================================
   §0 · SHARED — buttons, masthead, watermark, icon chip, notes
   ========================================================================== */
.owf-sr__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 13px 22px; border-radius: 999px; border: 1px solid transparent;
    font-family: var(--owf-font-display, 'Jost'), sans-serif;
    font-size: clamp(12.5px, 0.95vw, 14.5px); font-weight: 700; letter-spacing: -0.01em;
    text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: transform var(--owf-transition, 0.2s ease), box-shadow var(--owf-transition, 0.2s ease),
                background var(--owf-transition, 0.2s ease), color var(--owf-transition, 0.2s ease);
}
.owf-sr__btn i { font-size: 1.02em; }
.owf-sr__btn--p { color: #fff; background: var(--owf-blue, #0072be); box-shadow: 0 16px 30px -16px rgba(0, 114, 190, 0.95); }
.owf-sr__btn--p:hover { color: #fff; background: var(--owf-blue-600, #005c98); transform: translateY(-2px); box-shadow: 0 20px 34px -14px rgba(0, 114, 190, 0.95); }
.owf-sr__btn--g { color: var(--owf-blue-700, #004572); background: rgba(0, 114, 190, 0.07); border-color: rgba(0, 114, 190, 0.2); }
.owf-sr__btn--g:hover { color: var(--owf-blue-700, #004572); background: rgba(0, 114, 190, 0.13); transform: translateY(-2px); }
.owf-sr__btn--s { color: var(--owf-red, #cc2930); background: rgba(204, 41, 48, 0.07); border-color: rgba(204, 41, 48, 0.22); }
.owf-sr__btn--s:hover { color: var(--owf-red-600, #a32026); background: rgba(204, 41, 48, 0.13); transform: translateY(-2px); }
.owf-sr__btn:focus-visible { outline: 3px solid var(--owf-red, #cc2930); outline-offset: 3px; }

/* ---- masthead: folio numeral · title · rule · tag ---- */
.owf-sr__mast {
    display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(40px, auto) auto;
    align-items: center; gap: clamp(12px, 1.6vw, 24px);
    padding-bottom: clamp(16px, 2vw, 26px); margin-bottom: clamp(18px, 2.4vw, 34px);
    border-bottom: 1px solid var(--sr-line);
}
.owf-sr__mast--tight { border-bottom: 0; padding-bottom: 0; margin-bottom: clamp(16px, 2vw, 26px); grid-template-columns: auto minmax(0, 1fr); }
.owf-sr__mast-n {
    font-family: var(--owf-font-display, 'Jost'), sans-serif;
    font-size: clamp(22px, 2.4vw, 40px); font-weight: 800; line-height: 1; letter-spacing: -0.05em;
    color: transparent; -webkit-text-stroke: 1.4px rgba(0, 114, 190, 0.42);
}
.owf-sr__mast-txt { min-width: 0; }
.owf-sr__mast-t { margin: 0 0 5px; font-family: var(--owf-font-display, 'Jost'), sans-serif; font-size: clamp(21px, 2.1vw, 38px); font-weight: 800; line-height: 1.08; letter-spacing: -0.035em; color: var(--owf-ink, #0a1929); }
.owf-sr__mast-d { margin: 0; font-family: var(--owf-font-body, 'Open Sans'), sans-serif; font-size: clamp(12.5px, 0.95vw, 14.5px); line-height: 1.6; color: var(--owf-ink-500, #4b5563); }
.owf-sr__mast-rule { height: 1px; background: linear-gradient(90deg, transparent, var(--sr-line) 40%, rgba(0, 114, 190, 0.42)); }
.owf-sr__mast-tag { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; background: rgba(0, 114, 190, 0.07); border: 1px solid rgba(0, 114, 190, 0.16); font-family: var(--owf-font-accent, 'Nunito'), sans-serif; font-size: 10.5px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--owf-blue-700, #004572); white-space: nowrap; }
.owf-sr__mast-a { display: inline-flex; align-items: center; gap: 7px; font-family: var(--owf-font-display, 'Jost'), sans-serif; font-size: 12.5px; font-weight: 700; color: var(--owf-blue, #0072be); text-decoration: none; white-space: nowrap; transition: gap var(--owf-transition, 0.2s ease), color var(--owf-transition, 0.2s ease); }
.owf-sr__mast-a:hover { gap: 11px; color: var(--owf-red, #cc2930); }

/* ---- section watermark ---- */
.owf-sr__wm {
    position: absolute; left: -1.2vw; bottom: -2.2vw; z-index: 0;
    pointer-events: none; user-select: none;
    font-family: var(--owf-font-display, 'Jost'), sans-serif;
    font-size: clamp(120px, 14vw, 240px); font-weight: 800;
    line-height: 0.8; letter-spacing: -0.06em; color: var(--owf-blue, #0072be); opacity: 0.05;
}
.owf-sr__wm--r { left: auto; right: -1.2vw; color: var(--owf-red, #cc2930); opacity: 0.055; }
@media (max-width: 1199px) { .owf-sr__wm { display: none; } }

/* ---- icon chip ---- */
.owf-sr__ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
    color: var(--owf-blue, #0072be); background: rgba(0, 114, 190, 0.08);
    border: 1px solid rgba(0, 114, 190, 0.16); font-size: 17px;
    transition: transform var(--owf-transition, 0.2s ease), background var(--owf-transition, 0.2s ease), color var(--owf-transition, 0.2s ease);
}

/* ---- inline note ---- */
.owf-sr__note {
    display: flex; align-items: flex-start; gap: 11px; margin: 0;
    padding: 14px 16px; border-radius: var(--owf-radius, 10px);
    background: rgba(0, 114, 190, 0.05); border: 1px solid rgba(0, 114, 190, 0.15);
    font-family: var(--owf-font-body, 'Open Sans'), sans-serif;
    font-size: clamp(12px, 0.9vw, 13.8px); line-height: 1.6; color: var(--owf-ink-500, #4b5563);
}
.owf-sr__note i { flex-shrink: 0; margin-top: 2px; font-size: 15px; color: var(--owf-blue, #0072be); }
.owf-sr__note b { color: var(--owf-ink, #0a1929); font-weight: 700; }
.owf-sr__note--r { background: rgba(204, 41, 48, 0.045); border-color: rgba(204, 41, 48, 0.16); }
.owf-sr__note--r i { color: var(--owf-red, #cc2930); }

.owf-sr__h3 { margin: 0 0 14px; font-family: var(--owf-font-display, 'Jost'), sans-serif; font-size: clamp(16px, 1.3vw, 22px); font-weight: 800; letter-spacing: -0.03em; color: var(--owf-blue-700, #004572); }

/* ==========================================================================
   §1 · HERO
   ========================================================================== */
.owf-sr__hero {
    position: relative; overflow: hidden; isolation: isolate;
    padding: clamp(22px, 2.6vw, 42px) 0 clamp(20px, 2.4vw, 34px);
    background:
        radial-gradient(ellipse at 84% 0%, rgba(0, 114, 190, 0.14), transparent 48%),
        radial-gradient(ellipse at 4% 100%, rgba(204, 41, 48, 0.08), transparent 46%),
        linear-gradient(180deg, #ffffff 0%, #f1f7fc 100%);
}
.owf-sr__hero-wm {
    position: absolute; left: -1.4vw; bottom: -2vw; z-index: 0;
    pointer-events: none; user-select: none;
    font-family: var(--owf-font-display, 'Jost'), sans-serif;
    font-size: clamp(120px, 14vw, 240px); font-weight: 800;
    line-height: 0.8; letter-spacing: -0.06em; color: var(--owf-blue, #0072be); opacity: 0.05;
}
@media (max-width: 1199px) { .owf-sr__hero-wm { display: none; } }

.owf-sr__fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.sr-orb { position: absolute; display: block; border-radius: 50%; }
.sr-orb--1 { top: -130px; left: -80px; width: 330px; height: 330px; background: radial-gradient(circle, rgba(0, 114, 190, 0.16), transparent 70%); animation: sr-f1 18s ease-in-out infinite; }
.sr-orb--2 { bottom: -110px; left: 34%; width: 260px; height: 260px; background: radial-gradient(circle, rgba(204, 41, 48, 0.09), transparent 70%); animation: sr-f2 22s ease-in-out infinite; }
@keyframes sr-f1 { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(30px, 22px, 0) scale(1.09); } }
@keyframes sr-f2 { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-26px, -18px, 0) scale(1.11); } }

.sr-ring { position: absolute; top: 6%; right: 5%; width: clamp(150px, 16vw, 250px); aspect-ratio: 1; }
.sr-ring i { position: absolute; border-radius: 50%; border: 1.6px solid transparent; }
.sr-ring i:nth-child(1) { inset: 0;    border-top-color: rgba(0, 114, 190, 0.5);  border-right-color: rgba(0, 114, 190, 0.16); animation: sr-spin 22s linear infinite; }
.sr-ring i:nth-child(2) { inset: 34px; border-bottom-color: rgba(204, 41, 48, 0.42); border-left-color: rgba(204, 41, 48, 0.12); animation: sr-spin 15s linear infinite reverse; }
.sr-ring i:nth-child(3) { inset: 68px; border-top-color: rgba(204, 41, 48, 0.3); border-bottom-color: rgba(0, 114, 190, 0.22); animation: sr-spin 30s linear infinite; }
@keyframes sr-spin { to { transform: rotate(360deg); } }
.sr-sweep { position: absolute; left: 0; right: 0; top: 62%; height: 1px; background: linear-gradient(90deg, transparent, rgba(0, 114, 190, 0.3), transparent); animation: sr-sweep 9s ease-in-out infinite; }
@keyframes sr-sweep { 0%, 100% { transform: translateX(-32%) scaleX(0.5); opacity: 0; } 50% { transform: translateX(32%) scaleX(1); opacity: 1; } }
@media (max-width: 991px) { .sr-ring { display: none; } }

.owf-sr__hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr); gap: clamp(24px, 3.4vw, 56px); align-items: center; }
.owf-sr__hero-copy { min-width: 0; }

.owf-sr__crumb { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; font-family: var(--owf-font-accent, 'Nunito'), sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--owf-ink-400, #6b7280); }
.owf-sr__crumb a { color: var(--owf-blue, #0072be); text-decoration: none; transition: color var(--owf-transition, 0.2s ease); }
.owf-sr__crumb a:hover { color: var(--owf-red, #cc2930); }
.owf-sr__crumb i { font-size: 9px; }

.owf-sr__kicker { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.owf-sr__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--owf-font-accent, 'Nunito'), sans-serif; font-size: 10.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--owf-blue, #0072be); white-space: nowrap; }
.owf-sr__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--owf-red, #cc2930); box-shadow: 0 0 0 3px rgba(204, 41, 48, 0.14); animation: sr-pulse 2.6s ease-in-out infinite; }
@keyframes sr-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(204, 41, 48, 0.14); } 50% { box-shadow: 0 0 0 7px rgba(204, 41, 48, 0.05); } }
.owf-sr__rule { flex: 1; min-width: 16px; height: 1px; background: linear-gradient(90deg, var(--owf-blue, #0072be), rgba(0, 114, 190, 0.18) 72%, transparent); }
.owf-sr__kicker-c { display: inline-flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.owf-sr__kicker-c b { font-family: var(--owf-font-display, 'Jost'), sans-serif; font-size: 15px; font-weight: 800; color: var(--owf-red, #cc2930); }
.owf-sr__kicker-c em { font-family: var(--owf-font-accent, 'Nunito'), sans-serif; font-size: 10px; font-weight: 800; font-style: normal; letter-spacing: 0.12em; text-transform: uppercase; color: var(--owf-ink-400, #6b7280); }

.owf-sr__h1 { margin: 0 0 14px; font-family: var(--owf-font-display, 'Jost'), sans-serif; font-weight: 800; font-size: clamp(30px, 2.8vw + 13px, 62px); line-height: 1.04; letter-spacing: -0.04em; color: var(--owf-ink, #0a1929); }
.owf-sr__lead { margin: 0 0 clamp(18px, 2.2vw, 28px); font-family: var(--owf-font-body, 'Open Sans'), sans-serif; font-size: clamp(13.5px, 1vw, 16px); line-height: 1.64; color: var(--owf-ink-500, #4b5563); }
.owf-sr__hero-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }

/* the honesty line sits ON the fold, not in a footnote */
.owf-sr__src {
    display: flex; align-items: flex-start; gap: 10px; margin: 0;
    padding: 12px 15px; border-radius: var(--owf-radius, 10px);
    background: rgba(204, 41, 48, 0.045); border: 1px solid rgba(204, 41, 48, 0.16);
    font-family: var(--owf-font-body, 'Open Sans'), sans-serif; font-size: 11.8px; line-height: 1.55; color: var(--owf-ink-500, #4b5563);
}
.owf-sr__src i { flex-shrink: 0; margin-top: 2px; font-size: 14px; color: var(--owf-red, #cc2930); }
.owf-sr__src b { color: var(--owf-ink, #0a1929); font-weight: 700; }

/* ---- hero sparkline card ---- */
.owf-sr__spark {
    position: relative; margin: 0; padding: clamp(16px, 1.6vw, 24px);
    border-radius: var(--owf-radius-lg, 16px);
    background: linear-gradient(168deg, #ffffff 0%, #f2f8fd 100%);
    border: 1px solid rgba(0, 114, 190, 0.16);
    box-shadow: 0 30px 58px -34px rgba(0, 46, 76, 0.55);
}
.owf-sr__spark-head { display: flex; flex-direction: column; gap: 3px; margin-bottom: 12px; }
.owf-sr__spark-t { font-family: var(--owf-font-display, 'Jost'), sans-serif; font-size: clamp(15px, 1.15vw, 19px); font-weight: 800; letter-spacing: -0.03em; color: var(--owf-blue-700, #004572); }
.owf-sr__spark-s { font-family: var(--owf-font-accent, 'Nunito'), sans-serif; font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--owf-ink-400, #6b7280); }
.owf-sr__spark-svg { display: block; width: 100%; height: auto; aspect-ratio: 420 / 200; overflow: visible; }
.owf-sr__spark-grid line { stroke: var(--sr-line-2); stroke-width: 1; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.owf-sr__spark-area { fill: url(#srSparkFill); }
.owf-sr__spark-line { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.owf-sr__spark-line--ivf { stroke: var(--owf-blue, #0072be); }
.owf-sr__spark-line--don { stroke: var(--sr-gold); stroke-dasharray: 6 5; }
.owf-sr__spark-svg circle { vector-effect: non-scaling-stroke; }
.owf-sr__spark-keys { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--sr-line-2); }
.owf-sr__key { display: inline-flex; align-items: center; gap: 7px; font-family: var(--owf-font-accent, 'Nunito'), sans-serif; font-size: 11px; font-weight: 700; color: var(--owf-ink-500, #4b5563); }
.owf-sr__key-sw { width: 16px; height: 3px; border-radius: 2px; background: var(--owf-blue, #0072be); }
.owf-sr__key-sw--ivf { background: var(--owf-blue, #0072be); }
.owf-sr__key-sw--don { background: var(--sr-gold); }
.owf-sr__key-sw--bar { width: 10px; height: 15px; border-radius: 3px; background: var(--c, var(--owf-blue, #0072be)); }
.owf-sr__key-sw--mid { background: var(--owf-ink, #0a1929); }
.owf-sr__key-sw--ghost { height: 15px; width: 10px; border-radius: 3px; background: transparent; border: 1.6px dashed var(--owf-ink-300, #9ca3af); }
.owf-sr__key--ghost { color: var(--owf-ink-400, #6b7280); }
.owf-sr__spark-ax { margin-left: auto; font-family: var(--owf-font-accent, 'Nunito'), sans-serif; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--owf-ink-400, #6b7280); }

/* ---- KPI strip ---- */
.owf-sr__kpis {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
    margin: clamp(20px, 2.6vw, 38px) 0 0; padding: 0; list-style: none;
    border-top: 1px solid var(--sr-line);
}
.owf-sr__kpi { position: relative; padding: clamp(16px, 1.8vw, 24px) clamp(14px, 1.6vw, 26px) clamp(14px, 1.6vw, 20px); }
.owf-sr__kpi + .owf-sr__kpi { border-left: 1px solid var(--sr-line-2); }
.owf-sr__kpi:first-child { padding-left: 0; }
.owf-sr__kpi:last-child { padding-right: 0; }
.owf-sr__kpi-n { position: absolute; top: 12px; right: 14px; font-family: var(--owf-font-display, 'Jost'), sans-serif; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; color: transparent; -webkit-text-stroke: 1px rgba(0, 114, 190, 0.34); }
.owf-sr__kpi-v { display: block; }
.owf-sr__kpi-v .counter { display: inline-flex; align-items: baseline; gap: 1px; margin: 0; }
.owf-sr__kpi-num, .owf-sr__kpi-num span { font-family: var(--owf-font-display, 'Jost'), sans-serif !important; font-size: clamp(30px, 3.1vw, 52px) !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: -0.045em; color: var(--owf-blue, #0072be) !important; }
.owf-sr__kpi-sfx { font-family: var(--owf-font-display, 'Jost'), sans-serif; font-size: clamp(16px, 1.4vw, 24px); font-weight: 800; color: var(--owf-red, #cc2930); }
.owf-sr__kpi-l { display: block; margin-top: 7px; font-family: var(--owf-font-display, 'Jost'), sans-serif; font-size: clamp(13px, 1vw, 15.5px); font-weight: 700; letter-spacing: -0.02em; color: var(--owf-ink, #0a1929); }
.owf-sr__kpi-d { display: block; margin-top: 4px; font-family: var(--owf-font-body, 'Open Sans'), sans-serif; font-size: clamp(11px, 0.82vw, 12.6px); line-height: 1.5; color: var(--owf-ink-400, #6b7280); }

/* ==========================================================================
   §2 · ANSWER BLOCK (AEO / GEO / AIO)
   ========================================================================== */
.owf-sr__ans {
    position: relative; overflow: hidden;
    padding: clamp(26px, 3.4vw, 50px) 0;
    background: linear-gradient(168deg, var(--sr-tint) 0%, var(--sr-tint-2) 100%);
    border-top: 1px solid var(--sr-line); border-bottom: 1px solid var(--sr-line);
}
.owf-sr__ans::before {
    content: ''; position: absolute; z-index: 0; pointer-events: none;
    top: -90px; right: -70px; width: 240px; height: 240px; border-radius: 50%;
    border: 1.6px solid transparent;
    border-top-color: rgba(0, 114, 190, 0.28); border-right-color: rgba(204, 41, 48, 0.16);
    animation: sr-spin 26s linear infinite;
}
.owf-sr__ans-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(22px, 3vw, 56px); align-items: start; }
.owf-sr__ans-l { position: sticky; top: calc(var(--sr-hdr-h) + 16px); }
.owf-sr__ans-h { margin: 0 0 12px; font-family: var(--owf-font-display, 'Jost'), sans-serif; font-size: clamp(19px, 1.8vw, 31px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; color: var(--owf-blue-700, #004572) !important; }
.owf-sr__ans-lead { margin: 0; font-family: var(--owf-font-body, 'Open Sans'), sans-serif; font-size: clamp(13px, 1vw, 15.5px); line-height: 1.74; color: var(--owf-ink-500, #4b5563); }
.owf-sr__ans-lead b { color: var(--owf-ink, #0a1929); font-weight: 600; }

.owf-sr__ans-list { margin: 0; padding: 0; }
.owf-sr__ans-row { display: grid; grid-template-columns: minmax(120px, 0.42fr) minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(0, 114, 190, 0.14); }
.owf-sr__ans-row:first-child { border-top: 1px solid rgba(0, 114, 190, 0.14); }
.owf-sr__ans-row dt { margin: 0; font-family: var(--owf-font-accent, 'Nunito'), sans-serif; font-size: 10.5px; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; color: var(--owf-blue, #0072be); }
.owf-sr__ans-row dd { margin: 0; font-family: var(--owf-font-body, 'Open Sans'), sans-serif; font-size: clamp(12.5px, 0.95vw, 14.2px); line-height: 1.55; color: var(--owf-ink-700, #1f2937); }

/* ==========================================================================
   §3 · JUMP RAIL
   ========================================================================== */
.owf-sr__jump {
    position: sticky; top: var(--sr-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-bottom: 1px solid var(--sr-line-2);
}
.owf-sr__jump-in { display: flex; align-items: stretch; gap: 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.owf-sr__jump-in::-webkit-scrollbar { display: none; }
.owf-sr__jump-a {
    display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
    height: var(--sr-jump-h); padding: 0 14px; text-decoration: none; white-space: nowrap;
    font-family: var(--owf-font-display, 'Jost'), sans-serif; font-size: 12.5px; font-weight: 600;
    color: var(--owf-ink-500, #4b5563); border-bottom: 2px solid transparent;
    transition: color var(--owf-transition, 0.2s ease), border-color var(--owf-transition, 0.2s ease);
}
.owf-sr__jump-a:first-child { padding-left: 0; }
.owf-sr__jump-n { font-family: var(--owf-font-accent, 'Nunito'), sans-serif; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; color: transparent; -webkit-text-stroke: 0.9px rgba(0, 114, 190, 0.44); }
.owf-sr__jump-a:hover, .owf-sr__jump-a.is-on { color: var(--owf-blue, #0072be); border-bottom-color: var(--owf-blue, #0072be); }
.owf-sr__jump-a.is-on .owf-sr__jump-n { -webkit-text-stroke-color: var(--owf-red, #cc2930); }

/* ==========================================================================
   §4 · THE CHART
   ========================================================================== */
.owf-sr__chart-band { position: relative; overflow: hidden; padding: clamp(30px, 4vw, 62px) 0; background: #fff; }
.owf-sr__chart-band > .owf-container { position: relative; z-index: 1; }

.owf-sr__rig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, 0.29fr); gap: clamp(18px, 2.4vw, 38px); align-items: start; margin-bottom: clamp(24px, 3vw, 44px); }
.owf-sr__rig-main { min-width: 0; }

/* ---- pathway chips ---- */
.owf-sr__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 10px; }
.owf-sr__chips-l { font-family: var(--owf-font-accent, 'Nunito'), sans-serif; font-size: 10px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: var(--owf-ink-400, #6b7280); margin-right: 4px; }
.owf-sr__chip {
    position: relative; display: inline-flex; align-items: center; gap: 7px; margin: 0; cursor: pointer;
    padding: 8px 14px; border-radius: 999px; border: 1px solid var(--owf-ink-100, #e5e7eb); background: #fff;
    font-family: var(--owf-font-display, 'Jost'), sans-serif; font-size: 12.5px; font-weight: 600; color: var(--owf-ink-500, #4b5563);
    transition: border-color var(--owf-transition, 0.2s ease), background var(--owf-transition, 0.2s ease), color var(--owf-transition, 0.2s ease), transform var(--owf-transition, 0.2s ease);
}
.owf-sr__chip input { position: absolute; opacity: 0; pointer-events: none; }
.owf-sr__chip-sw { width: 9px; height: 9px; border-radius: 3px; background: var(--c, var(--owf-blue, #0072be)); flex-shrink: 0; }
.owf-sr__chip:hover { transform: translateY(-1px); border-color: var(--c, var(--owf-blue, #0072be)); }
.owf-sr__chip.is-on { color: #fff; background: var(--c, var(--owf-blue, #0072be)); border-color: var(--c, var(--owf-blue, #0072be)); box-shadow: 0 12px 22px -14px var(--c, #0072be); }
.owf-sr__chip.is-on .owf-sr__chip-sw { background: rgba(255, 255, 255, 0.9); }
.owf-sr__chip:focus-within { outline: 3px solid rgba(204, 41, 48, 0.4); outline-offset: 2px; }
.owf-sr__chips--cmp { margin-bottom: 16px; }
.owf-sr__chip--ghost { font-size: 12px; padding: 7px 12px; }
.owf-sr__chip--ghost.is-on { color: var(--c, var(--owf-ink-700, #1f2937)); background: transparent; border-style: dashed; border-width: 1.6px; border-color: var(--c, var(--owf-ink-300, #9ca3af)); box-shadow: none; }
.owf-sr__chip--ghost.is-on .owf-sr__chip-sw { background: var(--c, var(--owf-blue, #0072be)); }
.owf-sr__chip--ghost i { font-size: 12px; }

/* ---- the SVG ---- */
.owf-sr__fig { margin: 0; }
.owf-sr__svg { display: block; width: 100%; height: auto; aspect-ratio: 900 / 420; overflow: visible; }
.owf-sr__grid line { stroke: var(--sr-line-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.owf-sr__grid line.is-base { stroke: rgba(10, 25, 41, 0.28); }
.owf-sr__grid text { font-family: var(--owf-font-accent, 'Nunito'), sans-serif; font-size: 11px; font-weight: 700; fill: var(--owf-ink-400, #6b7280); }
.owf-sr__bars rect { transition: y 0.55s var(--owf-ease-out, cubic-bezier(0.16, 1, 0.3, 1)), height 0.55s var(--owf-ease-out, cubic-bezier(0.16, 1, 0.3, 1)), fill 0.35s ease; }
.owf-sr__bars text.owf-sr__bar-v { font-family: var(--owf-font-display, 'Jost'), sans-serif; font-size: 13px; font-weight: 800; fill: var(--owf-ink, #0a1929); }
.owf-sr__bars text.owf-sr__bar-u { font-family: var(--owf-font-accent, 'Nunito'), sans-serif; font-size: 9.5px; font-weight: 800; fill: var(--owf-ink-400, #6b7280); }
.owf-sr__ghost rect { fill: none; stroke-width: 1.6; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.owf-sr__ghost line { stroke-width: 1.6; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.owf-sr__mid { fill: none; stroke: var(--owf-ink, #0a1929); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; opacity: 0.55; }
.owf-sr__xlab text { font-family: var(--owf-font-display, 'Jost'), sans-serif; font-size: 12.5px; font-weight: 700; fill: var(--owf-ink-700, #1f2937); }
.owf-sr__xlab text.is-sub { font-family: var(--owf-font-accent, 'Nunito'), sans-serif; font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em; fill: var(--owf-ink-300, #9ca3af); }

.owf-sr__cap { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--sr-line-2); }

/* ---- side stats ---- */
.owf-sr__rig-side { display: flex; flex-direction: column; gap: 10px; position: sticky; top: calc(var(--sr-hdr-h) + var(--sr-jump-h) + 14px); }
.owf-sr__stat { padding: 13px 15px; border-radius: var(--owf-radius, 10px); background: rgba(0, 114, 190, 0.05); border: 1px solid rgba(0, 114, 190, 0.15); }
.owf-sr__stat--r { background: rgba(204, 41, 48, 0.045); border-color: rgba(204, 41, 48, 0.16); }
.owf-sr__stat-v { display: block; font-family: var(--owf-font-display, 'Jost'), sans-serif; font-size: clamp(22px, 2vw, 30px); font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--owf-blue, #0072be); }
.owf-sr__stat--r .owf-sr__stat-v { color: var(--owf-red, #cc2930); }
.owf-sr__stat em { display: block; margin-top: 5px; font-family: var(--owf-font-display, 'Jost'), sans-serif; font-size: 12.5px; font-style: normal; font-weight: 700; color: var(--owf-ink, #0a1929); }
.owf-sr__stat i { display: block; margin-top: 2px; font-family: var(--owf-font-body, 'Open Sans'), sans-serif; font-size: 11px; font-style: normal; line-height: 1.45; color: var(--owf-ink-400, #6b7280); }
.owf-sr__side-note { margin: 0; padding: 12px 14px; border-radius: var(--owf-radius, 10px); background: var(--owf-ink-50, #f3f4f6); font-family: var(--owf-font-body, 'Open Sans'), sans-serif; font-size: 11.6px; line-height: 1.55; color: var(--owf-ink-500, #4b5563); }
.owf-sr__side-cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 14px; border-radius: var(--owf-radius, 10px); text-decoration: none; background: var(--owf-blue, #0072be); color: #fff; font-family: var(--owf-font-display, 'Jost'), sans-serif; font-size: 12.5px; font-weight: 700; transition: background var(--owf-transition, 0.2s ease), transform var(--owf-transition, 0.2s ease); }
.owf-sr__side-cta:hover { color: #fff; background: var(--owf-blue-600, #005c98); transform: translateY(-2px); }

/* ---- the table ---- */
.owf-sr__tbl-wrap { border-top: 1px solid var(--sr-line); padding-top: clamp(18px, 2.2vw, 30px); }
.owf-sr__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.owf-sr__tbl { width: 100%; border-collapse: collapse; min-width: 640px; }
.owf-sr__tbl-cap { caption-side: bottom; padding-top: 12px; text-align: left; font-family: var(--owf-font-body, 'Open Sans'), sans-serif; font-size: 11.4px; line-height: 1.55; color: var(--owf-ink-400, #6b7280); }
.owf-sr__tbl thead th { padding: 10px 12px; text-align: right; border-bottom: 1.6px solid var(--sr-line); font-family: var(--owf-font-accent, 'Nunito'), sans-serif; font-size: 10.5px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--owf-blue-700, #004572); white-space: nowrap; }
.owf-sr__tbl thead th:first-child { text-align: left; padding-left: 0; }
.owf-sr__tbl tbody th { padding: 12px 12px 12px 0; text-align: left; border-bottom: 1px solid var(--sr-line-2); font-family: var(--owf-font-display, 'Jost'), sans-serif; font-size: 13.5px; font-weight: 700; color: var(--owf-ink, #0a1929); white-space: nowrap; }
.owf-sr__tbl-sw { display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 3px; background: var(--c, var(--owf-blue, #0072be)); }
.owf-sr__tbl td { padding: 12px; text-align: right; border-bottom: 1px solid var(--sr-line-2); font-family: var(--owf-font-display, 'Jost'), sans-serif; font-size: 13.5px; font-weight: 600; color: var(--owf-ink-700, #1f2937); white-space: nowrap; }
.owf-sr__tbl td i { font-style: normal; font-size: 10.5px; color: var(--owf-ink-300, #9ca3af); margin-left: 1px; }
/* tabular figures so the six ranges line up as a column of numbers, not
   as ragged text — the whole point of putting them in a table */
.owf-sr__n { font-variant-numeric: tabular-nums; }
.owf-sr__tbl tbody tr:hover td, .owf-sr__tbl tbody tr:hover th { background: rgba(0, 114, 190, 0.035); }
.owf-sr__tr--note td { text-align: left; font-family: var(--owf-font-body, 'Open Sans'), sans-serif; font-size: 11.6px; font-weight: 400; line-height: 1.55; color: var(--owf-ink-400, #6b7280); white-space: normal; }
.owf-sr__tr--note th { font-weight: 600; color: var(--owf-ink-400, #6b7280); }

/* ==========================================================================
   §5 · WHY
   ========================================================================== */
.owf-sr__why { position: relative; overflow: hidden; padding: clamp(30px, 4vw, 62px) 0; background: linear-gradient(180deg, #ffffff 0%, var(--sr-tint) 100%); border-top: 1px solid var(--sr-line); }
.owf-sr__why-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.4fr); gap: clamp(22px, 3vw, 52px); align-items: start; }
.owf-sr__why-body { min-width: 0; }

/* ---- the denominator infographic ---- */
.owf-sr__den {
    position: relative; margin-bottom: clamp(22px, 2.6vw, 36px);
    padding: clamp(16px, 1.8vw, 26px); border-radius: var(--owf-radius-lg, 16px);
    background: #fff; border: 1px solid var(--sr-line);
    box-shadow: 0 22px 44px -32px rgba(0, 46, 76, 0.5);
}
.owf-sr__den-t { display: block; margin-bottom: 14px; font-family: var(--owf-font-display, 'Jost'), sans-serif; font-size: clamp(14px, 1.15vw, 18px); font-weight: 800; letter-spacing: -0.03em; color: var(--owf-blue-700, #004572); }
.owf-sr__den-rows { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.owf-sr__den-row { display: grid; grid-template-columns: minmax(140px, 0.28fr) minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--sr-line-2); }
.owf-sr__den-row:last-child { border-bottom: 0; }
.owf-sr__den-l { font-family: var(--owf-font-display, 'Jost'), sans-serif; font-size: clamp(12px, 0.92vw, 13.8px); font-weight: 700; color: var(--owf-ink, #0a1929); }
.owf-sr__den-bar { position: relative; display: block; height: 12px; border-radius: 999px; background: var(--owf-ink-50, #f3f4f6); overflow: hidden; }
.owf-sr__den-bar i { position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 999px; background: linear-gradient(90deg, var(--owf-blue, #0072be), rgba(0, 114, 190, 0.55)); transform-origin: left center; animation: sr-grow 1.1s var(--owf-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both; }
@keyframes sr-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.owf-sr__den-v { font-family: var(--owf-font-display, 'Jost'), sans-serif; font-size: clamp(18px, 1.6vw, 25px); font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--owf-blue, #0072be); white-space: nowrap; }
.owf-sr__den-v em { font-size: 0.55em; font-style: normal; color: var(--owf-ink-300, #9ca3af); }
.owf-sr__den-x { grid-column: 2 / -1; margin-top: -4px; font-family: var(--owf-font-body, 'Open Sans'), sans-serif; font-size: 11.2px; line-height: 1.45; color: var(--owf-ink-400, #6b7280); }
.owf-sr__den-row--bad .owf-sr__den-bar i { background: linear-gradient(90deg, var(--owf-red, #cc2930), rgba(204, 41, 48, 0.55)); }
.owf-sr__den-row--bad .owf-sr__den-v { color: var(--owf-red, #cc2930); }
.owf-sr__den-f { display: flex; align-items: flex-start; gap: 9px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--sr-line-2); font-family: var(--owf-font-body, 'Open Sans'), sans-serif; font-size: 11.6px; line-height: 1.55; color: var(--owf-ink-500, #4b5563); }
.owf-sr__den-f i { flex-shrink: 0; margin-top: 2px; font-size: 13px; color: var(--owf-red, #cc2930); }
.owf-sr__den-f b { color: var(--owf-ink, #0a1929); }

/* ---- the four reasons ---- */
.owf-sr__why-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; }
.owf-sr__why-i { position: relative; padding: clamp(16px, 1.8vw, 24px) clamp(16px, 1.8vw, 26px) clamp(16px, 1.8vw, 24px) 0; border-top: 1px solid var(--sr-line-2); }
.owf-sr__why-i:nth-child(odd) { border-right: 1px solid var(--sr-line-2); }
.owf-sr__why-i:nth-child(even) { padding-left: clamp(16px, 1.8vw, 26px); padding-right: 0; }
.owf-sr__why-n { position: absolute; top: clamp(14px, 1.6vw, 20px); right: clamp(4px, 0.6vw, 10px); font-family: var(--owf-font-display, 'Jost'), sans-serif; font-size: clamp(24px, 2.4vw, 40px); font-weight: 800; line-height: 1; letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 1.3px rgba(0, 114, 190, 0.2); }
.owf-sr__why-i:hover .owf-sr__ico { transform: translateY(-3px); background: var(--owf-blue, #0072be); color: #fff; }
.owf-sr__why-k { display: inline-block; margin: 11px 0 6px; font-family: var(--owf-font-accent, 'Nunito'), sans-serif; font-size: 9.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--owf-red, #cc2930); }
.owf-sr__why-t { margin: 0 0 7px; font-family: var(--owf-font-display, 'Jost'), sans-serif; font-size: clamp(15px, 1.25vw, 20px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.18; color: var(--owf-ink, #0a1929); }
.owf-sr__why-d { margin: 0; font-family: var(--owf-font-body, 'Open Sans'), sans-serif; font-size: clamp(12px, 0.9vw, 13.8px); line-height: 1.68; color: var(--owf-ink-500, #4b5563); }
.owf-sr__why-d em { font-style: italic; color: var(--owf-ink-700, #1f2937); }

/* ---- editorial plate ---- */
.owf-sr__plate { position: sticky; top: calc(var(--sr-hdr-h) + var(--sr-jump-h) + 14px); margin: 0; border-radius: var(--owf-radius-lg, 16px); overflow: hidden; background: var(--owf-blue-50, #e6f1fa); border: 1px solid rgba(0, 114, 190, 0.16); box-shadow: 0 34px 64px -34px rgba(0, 46, 76, 0.72); }
.owf-sr__plate-img { display: block; width: 100% !important; height: auto !important; max-width: none !important; aspect-ratio: 4 / 5; object-fit: cover; }
.owf-sr__plate-wash { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 23, 38, 0.04) 0%, rgba(0, 23, 38, 0.1) 44%, rgba(0, 23, 38, 0.72) 100%); }
.owf-sr__plate-tag { position: absolute; left: 14px; right: 14px; bottom: 13px; z-index: 2; display: flex; align-items: flex-start; gap: 10px; }
.owf-sr__plate-tag > span { display: flex; flex-direction: column; gap: 3px; font-family: var(--owf-font-body, 'Open Sans'), sans-serif; font-size: 11px; line-height: 1.5; color: rgba(255, 255, 255, 0.84); }
.owf-sr__plate-tag b { font-family: var(--owf-font-display, 'Jost'), sans-serif; font-size: clamp(13px, 1vw, 15.5px); font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.owf-sr__plate-pip { flex-shrink: 0; width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: #7ee0a8; box-shadow: 0 0 0 3px rgba(126, 224, 168, 0.28); animation: sr-pip 2.4s ease-in-out infinite; }
@keyframes sr-pip { 0%, 100% { box-shadow: 0 0 0 3px rgba(126, 224, 168, 0.28); } 50% { box-shadow: 0 0 0 7px rgba(126, 224, 168, 0.08); } }

/* ==========================================================================
   §6 · HOW — THE FUNNEL
   ========================================================================== */
.owf-sr__how { position: relative; overflow: hidden; padding: clamp(30px, 4vw, 62px) 0; background: linear-gradient(180deg, var(--sr-tint) 0%, #ffffff 100%); border-top: 1px solid var(--sr-line); }
.owf-sr__how > .owf-container { position: relative; z-index: 1; }

.owf-sr__funnel { margin: 0 0 clamp(20px, 2.4vw, 32px); padding: 0; list-style: none; counter-reset: sr-f; }
.owf-sr__fstep {
    position: relative; display: grid;
    grid-template-columns: minmax(160px, 0.32fr) minmax(0, 1fr) auto;
    align-items: center; gap: clamp(14px, 1.8vw, 30px);
    padding: clamp(13px, 1.5vw, 20px) 0; border-bottom: 1px solid var(--sr-line-2);
}
.owf-sr__fstep:first-child { border-top: 1px solid var(--sr-line); }
/* the funnel bar: width IS the number, so the shape carries the argument */
.owf-sr__fbar { position: relative; display: flex; align-items: center; height: clamp(38px, 3.6vw, 54px); }
.owf-sr__fbar-fill {
    display: block; width: var(--w); height: 100%; border-radius: 6px 999px 999px 6px;
    background: linear-gradient(90deg, var(--owf-blue-700, #004572), var(--owf-blue, #0072be) 62%, rgba(0, 114, 190, 0.62));
    box-shadow: 0 12px 22px -16px rgba(0, 114, 190, 0.9);
    transform-origin: left center; animation: sr-grow 0.9s var(--owf-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
    animation-delay: calc(var(--i) * 90ms);
}
.owf-sr__fstep:last-child .owf-sr__fbar-fill { background: linear-gradient(90deg, var(--owf-red-700, #7a181d), var(--owf-red, #cc2930) 62%, rgba(204, 41, 48, 0.62)); box-shadow: 0 12px 22px -16px rgba(204, 41, 48, 0.9); }
.owf-sr__fbar-n { position: absolute; left: 10px; font-family: var(--owf-font-display, 'Jost'), sans-serif; font-size: clamp(15px, 1.4vw, 21px); font-weight: 800; letter-spacing: -0.03em; color: #fff; }
.owf-sr__ftxt { min-width: 0; }
.owf-sr__ft { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 0 0 5px; font-family: var(--owf-font-display, 'Jost'), sans-serif; font-size: clamp(15px, 1.25vw, 20px); font-weight: 800; letter-spacing: -0.03em; color: var(--owf-ink, #0a1929); }
.owf-sr__ft-n { display: none; }
.owf-sr__fx { margin: 0; font-family: var(--owf-font-body, 'Open Sans'), sans-serif; font-size: clamp(12px, 0.9vw, 13.8px); line-height: 1.65; color: var(--owf-ink-500, #4b5563); }
.owf-sr__fx em { font-style: italic; color: var(--owf-ink-700, #1f2937); }
.owf-sr__floss { align-self: center; padding: 5px 11px; border-radius: 999px; background: rgba(204, 41, 48, 0.07); border: 1px solid rgba(204, 41, 48, 0.18); font-family: var(--owf-font-display, 'Jost'), sans-serif; font-size: 13px; font-weight: 800; color: var(--owf-red, #cc2930); white-space: nowrap; }
.owf-sr__how-foot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

/* ==========================================================================
   §7 · TIMELINE
   ========================================================================== */
.owf-sr__tl { position: relative; overflow: hidden; padding: clamp(30px, 4vw, 62px) 0; background: #fff; border-top: 1px solid var(--sr-line); }
.owf-sr__tl > .owf-container { position: relative; z-index: 1; }

.owf-sr__days { position: relative; margin: 0; padding: 0; list-style: none; }
/* the spine */
.owf-sr__days::before {
    content: ''; position: absolute; left: 27px; top: 10px; bottom: 10px; width: 2px;
    background: linear-gradient(180deg, rgba(0, 114, 190, 0.06), var(--owf-blue, #0072be) 12%, var(--owf-red, #cc2930) 88%, rgba(204, 41, 48, 0.06));
}
.owf-sr__day {
    position: relative; display: grid;
    grid-template-columns: 56px minmax(190px, 0.3fr) minmax(0, 1fr) auto;
    align-items: start; gap: 6px clamp(14px, 1.8vw, 26px);
    padding: clamp(13px, 1.5vw, 19px) 0; border-bottom: 1px solid var(--sr-line-2);
}
.owf-sr__day:first-child { border-top: 1px solid var(--sr-line); }
.owf-sr__day-node {
    position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
    color: var(--owf-blue, #0072be); background: #fff; border: 1.6px solid rgba(0, 114, 190, 0.28);
    box-shadow: 0 0 0 7px #fff; font-size: 20px;
    transition: transform var(--owf-transition, 0.2s ease), color var(--owf-transition, 0.2s ease), background var(--owf-transition, 0.2s ease);
}
.owf-sr__day-ring { position: absolute; inset: -6px; border-radius: 50%; border: 1.4px solid transparent; border-top-color: rgba(0, 114, 190, 0.4); border-right-color: rgba(204, 41, 48, 0.22); animation: sr-spin 12s linear infinite; }
.owf-sr__day:hover .owf-sr__day-node { transform: translateY(-3px); color: #fff; background: var(--owf-blue, #0072be); }
.owf-sr__day:last-child .owf-sr__day-node { color: var(--owf-red, #cc2930); border-color: rgba(204, 41, 48, 0.32); }
.owf-sr__day:last-child:hover .owf-sr__day-node { background: var(--owf-red, #cc2930); color: #fff; }
.owf-sr__day-txt { min-width: 0; }
.owf-sr__day-d { display: flex; flex-direction: column; gap: 1px; font-family: var(--owf-font-display, 'Jost'), sans-serif; font-size: clamp(16px, 1.4vw, 22px); font-weight: 800; letter-spacing: -0.035em; color: var(--owf-blue-700, #004572); }
.owf-sr__day-d em { font-family: var(--owf-font-accent, 'Nunito'), sans-serif; font-size: 9.5px; font-style: normal; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: var(--owf-ink-400, #6b7280); }
.owf-sr__day-t { margin: 6px 0 0; font-family: var(--owf-font-display, 'Jost'), sans-serif; font-size: clamp(13.5px, 1.05vw, 16px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; color: var(--owf-ink, #0a1929); }
.owf-sr__day-x { margin: 0; font-family: var(--owf-font-body, 'Open Sans'), sans-serif; font-size: clamp(12px, 0.9vw, 13.8px); line-height: 1.68; color: var(--owf-ink-500, #4b5563); }
.owf-sr__day-tag { display: inline-flex; align-items: center; gap: 2px; align-self: center; padding: 6px 12px; border-radius: 999px; background: rgba(0, 114, 190, 0.06); border: 1px solid rgba(0, 114, 190, 0.15); font-family: var(--owf-font-accent, 'Nunito'), sans-serif; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--owf-blue-700, #004572); white-space: nowrap; }
.owf-sr__day-tag i { font-size: 14px; color: var(--owf-red, #cc2930); }
.owf-sr__day:last-child .owf-sr__day-tag { background: rgba(204, 41, 48, 0.06); border-color: rgba(204, 41, 48, 0.18); color: var(--owf-red-600, #a32026); }

/* ==========================================================================
   §8 · THE ESTIMATOR
   ========================================================================== */
.owf-sr__est { position: relative; overflow: hidden; padding: clamp(30px, 4vw, 62px) 0; background: linear-gradient(168deg, var(--sr-tint) 0%, var(--sr-tint-2) 100%); border-top: 1px solid var(--sr-line); }
.owf-sr__est > .owf-container { position: relative; z-index: 1; }
.owf-sr__est-rig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 0.44fr); gap: clamp(18px, 2.4vw, 40px); align-items: start; }

/* cross-link to the full guided estimator — same model, different depth */
.owf-sr__xlink {
    display: flex; align-items: flex-start; gap: 11px;
    margin: 0 0 clamp(14px, 1.8vw, 22px); padding: 12px 15px;
    border-radius: var(--owf-radius, 10px); background: #fff;
    border: 1px solid rgba(0, 114, 190, 0.18); border-left: 3px solid var(--owf-blue, #0072be);
    font-family: var(--owf-font-body, 'Open Sans'), sans-serif;
    font-size: clamp(12px, 0.9vw, 13.6px); line-height: 1.6; color: var(--owf-ink-500, #4b5563);
}
.owf-sr__xlink i { flex-shrink: 0; margin-top: 2px; font-size: 15px; color: var(--owf-blue, #0072be); }
.owf-sr__xlink a { font-weight: 700; color: var(--owf-blue, #0072be); text-decoration: none; border-bottom: 1px solid rgba(0, 114, 190, 0.35); transition: color var(--owf-transition, 0.2s ease), border-color var(--owf-transition, 0.2s ease); }
.owf-sr__xlink a:hover { color: var(--owf-red, #cc2930); border-bottom-color: var(--owf-red, #cc2930); }

/* ---- controls ---- */
.owf-sr__form { min-width: 0; display: flex; flex-direction: column; gap: clamp(14px, 1.8vw, 24px); }
.owf-sr__fs { margin: 0; padding: clamp(15px, 1.7vw, 22px); border: 1px solid var(--sr-line); border-radius: var(--owf-radius-lg, 16px); background: #fff; box-shadow: 0 18px 38px -32px rgba(0, 46, 76, 0.5); }
.owf-sr__lg { display: flex; align-items: center; gap: 10px; float: none; width: auto; margin: 0 0 12px; padding: 0; font-family: var(--owf-font-display, 'Jost'), sans-serif; font-size: clamp(14px, 1.1vw, 17px); font-weight: 800; letter-spacing: -0.03em; color: var(--owf-ink, #0a1929); border: 0; }
.owf-sr__lg-n { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 8px; background: var(--owf-blue, #0072be); color: #fff; font-family: var(--owf-font-accent, 'Nunito'), sans-serif; font-size: 11px; font-weight: 800; }

.owf-sr__seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; padding: 5px; border-radius: 14px; background: var(--owf-ink-50, #f3f4f6); }
.owf-sr__seg--6 { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.owf-sr__seg-i {
    position: relative; display: flex; align-items: center; justify-content: center; margin: 0; cursor: pointer;
    min-height: 42px; padding: 8px 10px; border-radius: 10px; text-align: center;
    font-family: var(--owf-font-display, 'Jost'), sans-serif; font-size: 12.5px; font-weight: 600; line-height: 1.2; color: var(--owf-ink-500, #4b5563);
    transition: background var(--owf-transition, 0.2s ease), color var(--owf-transition, 0.2s ease), box-shadow var(--owf-transition, 0.2s ease);
}
.owf-sr__seg-i input { position: absolute; opacity: 0; pointer-events: none; }
.owf-sr__seg-i:hover { background: rgba(0, 114, 190, 0.08); color: var(--owf-blue-700, #004572); }
.owf-sr__seg-i.is-on { color: #fff; background: var(--owf-blue, #0072be); box-shadow: 0 10px 20px -12px rgba(0, 114, 190, 0.95); }
.owf-sr__seg-i:focus-within { outline: 3px solid rgba(204, 41, 48, 0.4); outline-offset: 2px; }
.owf-sr__hint { margin: 10px 0 0; font-family: var(--owf-font-body, 'Open Sans'), sans-serif; font-size: 11.6px; line-height: 1.55; color: var(--owf-ink-400, #6b7280); }

.owf-sr__selects { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.owf-sr__sel { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.owf-sr__sel-l { font-family: var(--owf-font-accent, 'Nunito'), sans-serif; font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--owf-blue-700, #004572); }
.owf-sr__sel-box { position: relative; display: block; }
.owf-sr__sel-box select {
    -webkit-appearance: none; appearance: none; width: 100%;
    min-height: 44px; padding: 10px 36px 10px 13px; border-radius: 11px; cursor: pointer;
    border: 1px solid var(--owf-ink-100, #e5e7eb); background: #fff; color: var(--owf-ink, #0a1929);
    font-family: var(--owf-font-display, 'Jost'), sans-serif; font-size: 13px; font-weight: 600;
    transition: border-color var(--owf-transition, 0.2s ease), box-shadow var(--owf-transition, 0.2s ease);
}
.owf-sr__sel-box select:hover { border-color: rgba(0, 114, 190, 0.4); }
.owf-sr__sel-box select:focus { outline: none; border-color: var(--owf-blue, #0072be); box-shadow: 0 0 0 3px rgba(0, 114, 190, 0.14); }
.owf-sr__sel-box i { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); pointer-events: none; font-size: 12px; color: var(--owf-blue, #0072be); }
.owf-sr__sel-h { font-family: var(--owf-font-body, 'Open Sans'), sans-serif; font-size: 11px; line-height: 1.45; color: var(--owf-ink-400, #6b7280); }
/* a modifier that is not neutral gets a visible mark, so the user can see
   which of their answers is moving the number */
.owf-sr__sel.is-mod .owf-sr__sel-box select { border-color: rgba(204, 41, 48, 0.4); box-shadow: inset 3px 0 0 var(--owf-red, #cc2930); }
.owf-sr__sel.is-up .owf-sr__sel-box select { border-color: rgba(10, 143, 106, 0.45); box-shadow: inset 3px 0 0 var(--sr-good); }

.owf-sr__reset { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; cursor: pointer; background: transparent; border: 1px dashed var(--owf-ink-200, #d1d5db); font-family: var(--owf-font-display, 'Jost'), sans-serif; font-size: 12.5px; font-weight: 600; color: var(--owf-ink-400, #6b7280); transition: color var(--owf-transition, 0.2s ease), border-color var(--owf-transition, 0.2s ease); }
.owf-sr__reset:hover { color: var(--owf-red, #cc2930); border-color: var(--owf-red, #cc2930); }

/* ---- readout ---- */
.owf-sr__out {
    position: sticky; top: calc(var(--sr-hdr-h) + var(--sr-jump-h) + 14px);
    padding: clamp(17px, 1.9vw, 26px); border-radius: var(--owf-radius-lg, 16px);
    background: linear-gradient(170deg, #ffffff 0%, #f4fafe 100%);
    border: 1px solid rgba(0, 114, 190, 0.2);
    box-shadow: 0 32px 60px -34px rgba(0, 46, 76, 0.6);
}
.owf-sr__out-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.owf-sr__out-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--owf-font-accent, 'Nunito'), sans-serif; font-size: 10px; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; color: var(--owf-blue, #0072be); }
.owf-sr__out-for { font-family: var(--owf-font-display, 'Jost'), sans-serif; font-size: 12px; font-weight: 700; color: var(--owf-ink-500, #4b5563); }

.owf-sr__big { display: flex; align-items: baseline; gap: 4px; }
.owf-sr__big-v { font-family: var(--owf-font-display, 'Jost'), sans-serif; font-size: clamp(42px, 4.6vw, 76px); font-weight: 800; line-height: 0.92; letter-spacing: -0.055em; color: var(--owf-blue, #0072be); font-variant-numeric: tabular-nums; }
.owf-sr__big-s { font-family: var(--owf-font-display, 'Jost'), sans-serif; font-size: clamp(26px, 2.8vw, 44px); font-weight: 300; line-height: 1; color: var(--owf-ink-300, #9ca3af); }
.owf-sr__big-p { font-family: var(--owf-font-display, 'Jost'), sans-serif; font-size: clamp(22px, 2.2vw, 36px); font-weight: 800; color: var(--owf-red, #cc2930); }
.owf-sr__big-l { margin: 6px 0 14px; font-family: var(--owf-font-body, 'Open Sans'), sans-serif; font-size: 12.5px; line-height: 1.5; color: var(--owf-ink-500, #4b5563); }
.owf-sr__big-l b { color: var(--owf-ink, #0a1929); font-weight: 700; }

/* ---- gauge ---- */
.owf-sr__gauge { margin-bottom: 16px; }
.owf-sr__gauge-track { position: relative; display: block; height: 10px; border-radius: 999px; background: linear-gradient(90deg, rgba(204, 41, 48, 0.14), rgba(0, 114, 190, 0.12) 55%, rgba(10, 143, 106, 0.16)); overflow: hidden; }
.owf-sr__gauge-fill { position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--owf-blue-700, #004572), var(--owf-blue, #0072be)); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7) inset; transition: left 0.5s var(--owf-ease-out, cubic-bezier(0.16, 1, 0.3, 1)), width 0.5s var(--owf-ease-out, cubic-bezier(0.16, 1, 0.3, 1)); }
.owf-sr__gauge-ax { display: flex; justify-content: space-between; margin-top: 5px; }
.owf-sr__gauge-ax b { font-family: var(--owf-font-accent, 'Nunito'), sans-serif; font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em; color: var(--owf-ink-300, #9ca3af); }

/* ---- cumulative curve ---- */
.owf-sr__cum { margin: 0 0 14px; padding: 14px 0 0; border-top: 1px solid var(--sr-line-2); }
.owf-sr__cum-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px; margin-bottom: 8px; }
.owf-sr__cum-head span { font-family: var(--owf-font-display, 'Jost'), sans-serif; font-size: 13px; font-weight: 700; color: var(--owf-ink, #0a1929); }
.owf-sr__cum-head em { font-family: var(--owf-font-body, 'Open Sans'), sans-serif; font-size: 11px; font-style: normal; color: var(--owf-ink-400, #6b7280); }
.owf-sr__cum-head em b { color: var(--owf-ink-700, #1f2937); }
.owf-sr__cum-svg { display: block; width: 100%; height: auto; aspect-ratio: 420 / 190; overflow: visible; }
.owf-sr__cum-grid line { stroke: var(--sr-line-2); stroke-width: 1; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.owf-sr__cum-area { fill: url(#srCumG); }
.owf-sr__cum-line { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.owf-sr__cum-line--hi { stroke: var(--owf-blue, #0072be); }
.owf-sr__cum-line--lo { stroke: var(--owf-blue-300, #66abe1); stroke-dasharray: 5 4; }
.owf-sr__cum-lab text { font-family: var(--owf-font-accent, 'Nunito'), sans-serif; font-size: 10.5px; font-weight: 800; fill: var(--owf-ink-400, #6b7280); }
.owf-sr__cum-svg text.owf-sr__cum-v { font-family: var(--owf-font-display, 'Jost'), sans-serif; font-size: 12px; font-weight: 800; fill: var(--owf-blue-700, #004572); }

.owf-sr__cum-rows { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.owf-sr__cum-row { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.owf-sr__cum-n { font-family: var(--owf-font-accent, 'Nunito'), sans-serif; font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--owf-ink-400, #6b7280); }
.owf-sr__cum-bar { position: relative; display: block; height: 8px; border-radius: 999px; background: var(--owf-ink-50, #f3f4f6); overflow: hidden; }
.owf-sr__cum-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, var(--owf-blue, #0072be), rgba(0, 114, 190, 0.5)); transition: width 0.5s var(--owf-ease-out, cubic-bezier(0.16, 1, 0.3, 1)); }
.owf-sr__cum-v { font-family: var(--owf-font-display, 'Jost'), sans-serif; font-size: 13px; font-weight: 800; color: var(--owf-ink, #0a1929); white-space: nowrap; font-variant-numeric: tabular-nums; }
.owf-sr__cum-v em { font-size: 0.78em; font-style: normal; color: var(--owf-ink-300, #9ca3af); }

/* ---- what moved it ---- */
.owf-sr__moves { padding-top: 13px; border-top: 1px solid var(--sr-line-2); }
.owf-sr__moves-t { display: block; margin-bottom: 8px; font-family: var(--owf-font-accent, 'Nunito'), sans-serif; font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--owf-ink-400, #6b7280); }
.owf-sr__moves-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 1px; }
.owf-sr__move { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px dotted var(--sr-line-2); font-family: var(--owf-font-body, 'Open Sans'), sans-serif; font-size: 11.8px; line-height: 1.4; color: var(--owf-ink-500, #4b5563); }
.owf-sr__move:last-child { border-bottom: 0; }
.owf-sr__move b { font-family: var(--owf-font-display, 'Jost'), sans-serif; font-size: 13px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* the option name — must wrap, unlike the percentage beside it */
.owf-sr__move em { font-style: normal; font-weight: 600; color: var(--owf-ink-700, #1f2937); }
.owf-sr__move em.is-net { font-family: var(--owf-font-display, 'Jost'), sans-serif; font-weight: 700; color: var(--owf-ink, #0a1929); }
.owf-sr__move.is-down b { color: var(--owf-red, #cc2930); }
.owf-sr__move.is-up b { color: var(--sr-good); }
.owf-sr__move.is-flat { color: var(--owf-ink-400, #6b7280); }
.owf-sr__move.is-flat b { color: var(--owf-ink-300, #9ca3af); }

.owf-sr__disc { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0; padding: 12px 14px; border-radius: var(--owf-radius, 10px); background: rgba(204, 41, 48, 0.05); border: 1px solid rgba(204, 41, 48, 0.17); font-family: var(--owf-font-body, 'Open Sans'), sans-serif; font-size: 11.4px; line-height: 1.55; color: var(--owf-ink-500, #4b5563); }
.owf-sr__disc i { flex-shrink: 0; margin-top: 2px; font-size: 14px; color: var(--owf-red, #cc2930); }
.owf-sr__disc b { color: var(--owf-ink, #0a1929); font-weight: 700; }
.owf-sr__out-btns { display: flex; flex-wrap: wrap; gap: 9px; }
.owf-sr__out-btns .owf-sr__btn { flex: 1 1 auto; }

/* ==========================================================================
   §9 · READING ANY CLAIM
   ========================================================================== */
.owf-sr__read { position: relative; overflow: hidden; padding: clamp(30px, 4vw, 62px) 0; background: #fff; border-top: 1px solid var(--sr-line); }
.owf-sr__cmp { margin: 0; padding: 0; list-style: none; }
.owf-sr__cmp-head, .owf-sr__cmp-row { display: grid; grid-template-columns: minmax(180px, 0.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(12px, 1.6vw, 28px); align-items: start; padding: clamp(13px, 1.4vw, 18px) 0; border-bottom: 1px solid var(--sr-line-2); }
.owf-sr__cmp-head { padding-top: 0; padding-bottom: 11px; border-bottom: 1.6px solid var(--sr-line); }
.owf-sr__cmp-head span { display: inline-flex; align-items: center; gap: 7px; font-family: var(--owf-font-accent, 'Nunito'), sans-serif; font-size: 10px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: var(--owf-ink-400, #6b7280); }
.owf-sr__cmp-head .owf-sr__cmp-o { color: var(--sr-good); }
.owf-sr__cmp-head .owf-sr__cmp-x { color: var(--owf-red, #cc2930); }
.owf-sr__cmp-head i { font-size: 13px; }
.owf-sr__cmp-q { display: flex; align-items: baseline; gap: 10px; font-family: var(--owf-font-display, 'Jost'), sans-serif; font-size: clamp(13.5px, 1.05vw, 16.5px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.25; color: var(--owf-ink, #0a1929); }
.owf-sr__cmp-n { flex-shrink: 0; font-family: var(--owf-font-display, 'Jost'), sans-serif; font-size: 15px; font-weight: 800; color: transparent; -webkit-text-stroke: 1.1px rgba(0, 114, 190, 0.34); }
.owf-sr__cmp-row .owf-sr__cmp-o, .owf-sr__cmp-row .owf-sr__cmp-x { display: flex; align-items: flex-start; gap: 9px; font-family: var(--owf-font-body, 'Open Sans'), sans-serif; font-size: clamp(12px, 0.9vw, 13.8px); line-height: 1.6; }
.owf-sr__cmp-row .owf-sr__cmp-o { color: var(--owf-ink-700, #1f2937); }
.owf-sr__cmp-row .owf-sr__cmp-x { color: var(--owf-ink-400, #6b7280); }
.owf-sr__cmp-row .owf-sr__cmp-o i { flex-shrink: 0; margin-top: 3px; font-size: 12px; color: var(--sr-good); }
.owf-sr__cmp-row .owf-sr__cmp-x i { flex-shrink: 0; margin-top: 3px; font-size: 11px; color: var(--owf-red, #cc2930); }
.owf-sr__cmp-row:hover { background: rgba(0, 114, 190, 0.025); }

/* ==========================================================================
   §10 · FAQ
   ========================================================================== */
.owf-sr__faq { position: relative; overflow: hidden; padding: clamp(30px, 4vw, 62px) 0; background: linear-gradient(180deg, #ffffff 0%, var(--sr-tint) 100%); border-top: 1px solid var(--sr-line); }
.owf-sr__faq > .owf-container { position: relative; z-index: 1; }
.owf-sr__faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(22px, 3vw, 52px); }
.owf-sr__q { border-top: 1px solid var(--sr-line-2); }
.owf-sr__faq-col:first-child > .owf-sr__q:first-child, .owf-sr__faq-col:last-child > .owf-sr__q:first-child { border-top: 1px solid var(--sr-line); }
.owf-sr__q-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px; width: 100%; padding: 17px 0; background: none; border: 0; cursor: pointer; text-align: left; }
.owf-sr__q-n { font-family: var(--owf-font-display, 'Jost'), sans-serif; font-size: 13px; font-weight: 800; color: transparent; -webkit-text-stroke: 1px rgba(0, 114, 190, 0.4); }
.owf-sr__q-t { font-family: var(--owf-font-display, 'Jost'), sans-serif; font-size: clamp(13.5px, 1.05vw, 16.5px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.32; color: var(--owf-ink, #0a1929); transition: color var(--owf-transition, 0.2s ease); }
.owf-sr__q-head:hover .owf-sr__q-t, .owf-sr__q-head[aria-expanded="true"] .owf-sr__q-t { color: var(--owf-blue, #0072be); }
.owf-sr__q-mark { position: relative; width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; background: rgba(0, 114, 190, 0.08); transition: background var(--owf-transition, 0.2s ease); }
.owf-sr__q-mark i { position: absolute; top: 50%; left: 50%; width: 10px; height: 1.8px; background: var(--owf-blue, #0072be); transform: translate(-50%, -50%); transition: transform 0.35s var(--owf-ease-out, cubic-bezier(0.16, 1, 0.3, 1)), background var(--owf-transition, 0.2s ease); }
.owf-sr__q-mark i:last-child { transform: translate(-50%, -50%) rotate(90deg); }
.owf-sr__q-head[aria-expanded="true"] .owf-sr__q-mark { background: var(--owf-red, #cc2930); }
.owf-sr__q-head[aria-expanded="true"] .owf-sr__q-mark i { background: #fff; }
.owf-sr__q-head[aria-expanded="true"] .owf-sr__q-mark i:last-child { transform: translate(-50%, -50%) rotate(0deg); }
.owf-sr__q-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--owf-ease-out, cubic-bezier(0.16, 1, 0.3, 1)); }
.owf-sr__q-head[aria-expanded="true"] + .owf-sr__q-wrap { grid-template-rows: 1fr; }
.owf-sr__q-a { overflow: hidden; min-height: 0; padding: 0 40px 0 34px; opacity: 0; font-family: var(--owf-font-body, 'Open Sans'), sans-serif; font-size: clamp(12px, 0.92vw, 14px); line-height: 1.7; color: var(--owf-ink-500, #4b5563); transition: opacity 0.35s ease 0.06s; }
.owf-sr__q-head[aria-expanded="true"] + .owf-sr__q-wrap .owf-sr__q-a { opacity: 1; padding-bottom: 20px; }

/* ==========================================================================
   §11 · CLOSING CTA
   ========================================================================== */
.owf-sr__end { padding: clamp(30px, 4vw, 58px) 0; background: linear-gradient(180deg, var(--sr-tint) 0%, #ffffff 100%); border-top: 1px solid var(--sr-line); }
.owf-sr__end-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: clamp(16px, 2.4vw, 34px); }
.owf-sr__end-t { margin: 0 0 7px; font-family: var(--owf-font-display, 'Jost'), sans-serif; font-size: clamp(19px, 1.6vw, 29px); font-weight: 800; letter-spacing: -0.03em; color: var(--owf-blue-700, #004572) !important; }
.owf-sr__end-d { margin: 0; font-family: var(--owf-font-body, 'Open Sans'), sans-serif; font-size: clamp(12.5px, 0.95vw, 14.5px); line-height: 1.6; color: var(--owf-ink-500, #4b5563); }
.owf-sr__end-btns { display: flex; flex-wrap: wrap; gap: 10px; }

/* ==========================================================================
   §12 · MOBILE ACTION BAR — phone only
   ========================================================================== */
.owf-sr__bar { display: none; }

/* ==========================================================================
   §13 · REVEAL
   ========================================================================== */
.owf-sr.is-ready [data-rv] { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--owf-ease-out, cubic-bezier(0.16, 1, 0.3, 1)), transform 0.7s var(--owf-ease-out, cubic-bezier(0.16, 1, 0.3, 1)); }
.owf-sr.is-ready [data-rv].is-in { opacity: 1; transform: none; }

/* ==========================================================================
   §14 · RESPONSIVE
   ========================================================================== */
@media (max-width: 1200px) {
    .owf-sr__ans-in { grid-template-columns: minmax(0, 1fr); }
    .owf-sr__ans-l { position: static; }
    .owf-sr__rig { grid-template-columns: minmax(0, 1fr); }
    .owf-sr__rig-side { position: static; flex-direction: row; flex-wrap: wrap; }
    .owf-sr__stat { flex: 1 1 180px; }
    .owf-sr__side-note { flex: 1 1 100%; }
    .owf-sr__side-cta { flex: 1 1 100%; }
    .owf-sr__est-rig { grid-template-columns: minmax(0, 1fr); }
    .owf-sr__out { position: static; }
}
@media (max-width: 991px) {
    .owf-sr__hero-in { grid-template-columns: minmax(0, 1fr); }
    .owf-sr__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .owf-sr__kpi:nth-child(3) { padding-left: 0; border-left: 0; }
    .owf-sr__kpi:nth-child(-n+2) { border-bottom: 1px solid var(--sr-line-2); }
    .owf-sr__why-in { grid-template-columns: minmax(0, 1fr); }
    .owf-sr__plate { position: static; max-width: 460px; }
    /* node · label · prose · tag collapses to node · stacked content */
    .owf-sr__day { grid-template-columns: 56px minmax(0, 1fr); row-gap: 8px; }
    .owf-sr__day-x, .owf-sr__day-tag { grid-column: 2; }
    .owf-sr__day-tag { justify-self: start; }
    .owf-sr__fstep { grid-template-columns: minmax(130px, 0.34fr) minmax(0, 1fr); row-gap: 8px; }
    .owf-sr__floss { grid-column: 1; justify-self: start; }
    .owf-sr__how-foot { grid-template-columns: minmax(0, 1fr); }
    .owf-sr__faq-grid { grid-template-columns: minmax(0, 1fr); }
    .owf-sr__faq-col:last-child > .owf-sr__q:first-child { border-top: 1px solid var(--sr-line-2); }
    .owf-sr__cmp-head { display: none; }
    .owf-sr__cmp-row { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
    .owf-sr__cmp-row .owf-sr__cmp-o, .owf-sr__cmp-row .owf-sr__cmp-x { padding-left: 26px; }
}
@media (max-width: 768px) {
    .owf-sr { --sr-hdr-h: 60px; }
    .owf-sr__jump-in { scroll-padding-left: var(--owf-gutter-mobile, 14px); scroll-padding-right: var(--owf-gutter-mobile, 14px); }
    .owf-sr__mast { grid-template-columns: auto minmax(0, 1fr); row-gap: 10px; }
    .owf-sr__mast-rule { display: none; }
    .owf-sr__mast-tag, .owf-sr__mast-a { grid-column: 1 / -1; justify-self: start; }
    .owf-sr__why-grid { grid-template-columns: minmax(0, 1fr); }
    .owf-sr__why-i:nth-child(odd) { border-right: 0; }
    .owf-sr__why-i, .owf-sr__why-i:nth-child(even) { padding-left: 0; padding-right: 0; }
}

/* ---- PHONE: the native-app pass ---------------------------------------
   Below 640px the page stops being a shrunk desktop layout. Rails scroll
   horizontally with snap, the readout becomes a card the thumb can reach,
   and a fixed action bar sits in the safe area. -------------------------- */
@media (max-width: 640px) {
    .owf-sr__hero { padding: 16px 0 20px; }
    .owf-sr__crumb { margin-bottom: 12px; font-size: 10px; }
    .owf-sr__kicker { gap: 10px; margin-bottom: 10px; }
    .owf-sr__eyebrow { font-size: 9.5px; letter-spacing: 0.13em; }
    .owf-sr__rule { display: none; }
    .owf-sr__h1 { font-size: 28px; line-height: 1.08; letter-spacing: -0.03em; margin-bottom: 10px; }
    .owf-sr__lead { font-size: 12.5px; line-height: 1.6; margin-bottom: 14px; }
    /* both on one row — stacked full-width buttons ate the fold */
    .owf-sr__hero-btns, .owf-sr__end-btns, .owf-sr__out-btns { width: 100%; flex-wrap: nowrap; margin-bottom: 14px; }
    .owf-sr__hero-btns .owf-sr__btn, .owf-sr__end-btns .owf-sr__btn, .owf-sr__out-btns .owf-sr__btn { flex: 1 1 0; min-width: 0; padding: 12px 10px; font-size: 12px; gap: 6px; }
    .owf-sr__src { font-size: 11px; padding: 10px 12px; }

    .owf-sr__spark { padding: 14px; }

    /* KPIs become a snap rail — the app idiom, not a squashed 2×2 grid */
    .owf-sr__kpis {
        display: flex; gap: 0; margin: 16px 0 0; border-top: 1px solid var(--sr-line);
        overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
        margin-left: calc(var(--owf-gutter-mobile, 14px) * -1);
        margin-right: calc(var(--owf-gutter-mobile, 14px) * -1);
        padding-left: var(--owf-gutter-mobile, 14px); padding-right: var(--owf-gutter-mobile, 14px);
        scroll-padding-left: var(--owf-gutter-mobile, 14px); scroll-padding-right: var(--owf-gutter-mobile, 14px);
    }
    .owf-sr__kpis::-webkit-scrollbar { display: none; }
    .owf-sr__kpi { flex: 0 0 66vw; scroll-snap-align: start; padding: 15px 16px 15px 0; border-bottom: 0 !important; }
    .owf-sr__kpi + .owf-sr__kpi { padding-left: 16px; border-left: 1px solid var(--sr-line-2); }
    .owf-sr__kpi-num, .owf-sr__kpi-num span { font-size: 38px !important; }
    .owf-sr__kpi-d { font-size: 11px; }

    .owf-sr__ans { padding: 22px 0; }
    .owf-sr__ans-row { grid-template-columns: minmax(0, 1fr); gap: 3px; padding: 10px 0; }

    .owf-sr__chart-band, .owf-sr__why, .owf-sr__how, .owf-sr__tl, .owf-sr__est, .owf-sr__read, .owf-sr__faq { padding: 26px 0; min-height: 0; }

    /* chip rows scroll rather than wrap into four ragged lines */
    .owf-sr__chips {
        flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
        margin-left: calc(var(--owf-gutter-mobile, 14px) * -1);
        margin-right: calc(var(--owf-gutter-mobile, 14px) * -1);
        padding: 2px var(--owf-gutter-mobile, 14px);
        scroll-padding-left: var(--owf-gutter-mobile, 14px); scroll-padding-right: var(--owf-gutter-mobile, 14px);
    }
    .owf-sr__chips::-webkit-scrollbar { display: none; }
    .owf-sr__chip { flex: 0 0 auto; scroll-snap-align: start; min-height: 40px; }
    .owf-sr__chips-l { flex: 0 0 auto; }

    /* the chart gets taller relative to width so six bands stay legible */
    .owf-sr__svg { aspect-ratio: 640 / 460; }
    .owf-sr__cap { gap: 10px; font-size: 11px; }
    .owf-sr__tbl { min-width: 560px; }

    .owf-sr__den { padding: 14px; }
    .owf-sr__den-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 5px; }
    .owf-sr__den-bar { grid-column: 1 / -1; order: 3; }
    .owf-sr__den-x { grid-column: 1 / -1; order: 4; margin-top: 0; }

    .owf-sr__fstep { grid-template-columns: minmax(0, 1fr); row-gap: 9px; padding: 14px 0; }
    /* the bar becomes a slim meter under the heading; the number moves inline */
    .owf-sr__fbar { order: 3; height: 10px; }
    .owf-sr__fbar-fill { border-radius: 999px; }
    .owf-sr__fbar-n { display: none; }
    .owf-sr__ft-n { display: inline-flex; align-items: baseline; gap: 3px; padding: 3px 9px; border-radius: 999px; background: var(--owf-blue, #0072be); color: #fff; font-size: 14px; font-weight: 800; }
    .owf-sr__ft-n em { font-family: var(--owf-font-accent, 'Nunito'), sans-serif; font-size: 9px; font-style: normal; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.85; }
    .owf-sr__fstep:last-child .owf-sr__ft-n { background: var(--owf-red, #cc2930); }
    .owf-sr__floss { order: 4; justify-self: start; font-size: 11.5px; padding: 4px 9px; }
    .owf-sr__ft { font-size: 15px; }

    .owf-sr__day { grid-template-columns: 44px minmax(0, 1fr); gap: 7px 13px; padding: 14px 0; }
    .owf-sr__days::before { left: 21px; }
    .owf-sr__day-node { width: 44px; height: 44px; box-shadow: 0 0 0 6px #fff; font-size: 16px; }
    .owf-sr__day-ring { inset: -5px; }
    .owf-sr__day-d { font-size: 17px; }
    .owf-sr__day-t { font-size: 14.5px; }
    .owf-sr__day-x { font-size: 12.5px; }
    .owf-sr__day-tag { font-size: 9.5px; padding: 5px 10px; }

    .owf-sr__fs { padding: 14px; border-radius: 14px; }
    .owf-sr__seg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .owf-sr__seg--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .owf-sr__seg-i { min-height: 46px; font-size: 12px; }
    .owf-sr__selects { grid-template-columns: minmax(0, 1fr); }
    .owf-sr__sel-box select { min-height: 48px; font-size: 14px; }

    .owf-sr__out { padding: 16px; border-radius: 16px; }
    .owf-sr__big-v { font-size: 52px; }
    .owf-sr__cum-row { grid-template-columns: 54px minmax(0, 1fr) auto; }

    .owf-sr__q-head { gap: 11px; padding: 15px 0; }
    .owf-sr__q-head[aria-expanded="true"] + .owf-sr__q-wrap .owf-sr__q-a { padding: 0 34px 16px 30px; }

    .owf-sr__end-in { flex-direction: column; align-items: flex-start; }

    /* ---- sticky action bar: the native-app move on phones ---- */
    .owf-sr__bar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
        display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
        padding: 9px var(--owf-gutter-mobile, 14px) calc(9px + env(safe-area-inset-bottom, 0px));
        background: rgba(255, 255, 255, 0.93);
        -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
        border-top: 1px solid var(--sr-line-2);
        box-shadow: 0 -10px 30px -18px rgba(10, 25, 41, 0.5);
    }
    .owf-sr__bar-a {
        display: inline-flex; align-items: center; justify-content: center; gap: 7px;
        min-height: 44px; border-radius: 999px; text-decoration: none;
        font-family: var(--owf-font-display, 'Jost'), sans-serif; font-size: 12.5px; font-weight: 700;
        color: var(--owf-blue-700, #004572); background: rgba(0, 114, 190, 0.08);
        border: 1px solid rgba(0, 114, 190, 0.18);
    }
    .owf-sr__bar-a i { font-size: 14px; }
    .owf-sr__bar-a--wa { color: #0f7a48; background: rgba(37, 211, 102, 0.1); border-color: rgba(15, 122, 72, 0.22); }
    .owf-sr__bar-a--p { color: #fff; background: var(--owf-blue, #0072be); border-color: var(--owf-blue, #0072be); box-shadow: 0 10px 22px -12px rgba(0, 114, 190, 0.9); }
    .owf-sr__bar-a:focus-visible { outline: 3px solid var(--owf-red, #cc2930); outline-offset: 2px; }

    /* clear the bar so it never covers the footer's last row or #gotoTop */
    #footer { padding-bottom: 74px; }
    #gotoTop { bottom: 78px !important; }
}
@media (max-width: 400px) {
    .owf-sr__bar-a span { display: none; }
    .owf-sr__bar-a i { font-size: 17px; }
    .owf-sr__seg--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .owf-sr__kpi { flex-basis: 76vw; }
}

/* ==========================================================================
   §15 · REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .sr-orb, .sr-ring i, .sr-sweep, .owf-sr__dot, .owf-sr__plate-pip,
    .owf-sr__ans::before, .owf-sr__day-ring { animation: none !important; }
    .owf-sr__den-bar i, .owf-sr__fbar-fill { animation: none !important; transform: none !important; }
    .owf-sr.is-ready [data-rv] { opacity: 1; transform: none; }
    .owf-sr__btn:hover, .owf-sr__day:hover .owf-sr__day-node, .owf-sr__chip:hover,
    .owf-sr__side-cta:hover { transform: none; }
    .owf-sr__why-i:hover .owf-sr__ico { transform: none; }
    .owf-sr__bars rect, .owf-sr__gauge-fill, .owf-sr__cum-bar i { transition: none !important; }
}

/* ==========================================================================
   §16 · PRINT
   ========================================================================== */
@media print {
    .owf-sr__jump, .owf-sr__bar, .owf-sr__fx, .owf-sr__hero-wm, .owf-sr__wm,
    .owf-sr__chips, .owf-sr__reset, .owf-sr__side-cta { display: none !important; }
    .owf-sr.is-ready [data-rv] { opacity: 1 !important; transform: none !important; }
    .owf-sr__q-wrap { grid-template-rows: 1fr !important; }
    .owf-sr__q-a { opacity: 1 !important; padding-bottom: 12px !important; }
    .owf-sr__out, .owf-sr__plate, .owf-sr__rig-side { position: static !important; }
    .owf-sr__tbl { min-width: 0 !important; }
}