/* ClearMile Auto — Signal Board redesign
   The copy and route structure stay server-rendered in PHP. This stylesheet
   gives the advertorial a brighter, more tactile editorial system: a dark
   signal-board hero, lime actions, and proof sections that read like a
   calm dashboard instead of a generic comparison page.
*/

:root {
    --paper: #f4f1e9;
    --paper-alt: #ebe8df;
    --surface: #fffdf8;
    --ink: #152431;
    --ink-soft: #46545f;
    --ink-mute: #68757e;
    --ink-inv: #f5f7f3;
    --navy: #173b5b;
    --navy-deep: #0b1b29;
    --blue: #3f78ff;
    --cta: #c9f36a;
    --cta-deep: #a9d84c;
    --coral: #ff7653;
    --teal: #147866;
    --slate: #75828b;
    --slate-lt: #d5d9d5;
    --hair: rgba(21, 36, 49, 0.18);
    --hair-soft: rgba(21, 36, 49, 0.1);
    --s1: 0.375rem;
    --s2: 0.75rem;
    --s3: 1.125rem;
    --s4: 1.75rem;
    --s5: 2.5rem;
    --s6: clamp(3.5rem, 7vw, 6rem);
    --s7: clamp(4.5rem, 10vw, 8rem);
    --wrap: 1160px;
    --col-label: 10.5rem;
    --col-main: 35rem;
    --col-note: 15rem;
    --font-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    --font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }
body { background: var(--paper); color: var(--ink-soft); font-family: var(--font-body); font-size: clamp(.94rem, .89rem + .2vw, 1.05rem); line-height: 1.25; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--hair); transition: color .16s, background .16s, border-color .16s, transform .16s; }
a:hover { color: var(--blue); text-decoration-color: currentColor; }
strong, b { color: var(--ink); font-weight: 650; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 4px; }
::selection { background: var(--coral); color: #fff; }
h1, h2, h3 { color: var(--navy-deep); font-family: var(--font-display); font-weight: 700; letter-spacing: -0.04em; line-height: 1.02; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 1.42rem + 4.05vw, 4.5rem); }
h2 { font-size: clamp(1.5rem, 1.11rem + 1.47vw, 2.28rem); }
h3 { font-size: clamp(1.04rem, .92rem + .45vw, 1.3rem); letter-spacing: -0.025em; }
p + p { margin-top: .9em; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-left: clamp(1.25rem, 5vw, 3rem); padding-right: clamp(1.25rem, 5vw, 3rem); }
.spine { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
.sec { position: relative; padding: clamp(2.35rem, 4.7vw, 4rem) 0; }
.sec:nth-of-type(odd) { background: var(--paper-alt); }
.sec:nth-of-type(even) { background: var(--paper); }
.s-label { color: var(--coral); font-family: var(--font-mono); font-size: .68rem; font-weight: 500; letter-spacing: .13em; line-height: 1.35; text-transform: uppercase; padding-top: .42rem; }
.s-note { align-self: start; border-top: 2px solid var(--navy); color: var(--ink-mute); font-family: var(--font-mono); font-size: .68rem; letter-spacing: .01em; line-height: 1.5; padding-top: .65rem; }
.s-note a { color: var(--slate); }
.lede { color: var(--ink); font-size: 1.12em; }
h2 + p, h2 + ul, h3 + p, h3 + ul { margin-top: var(--s3); }
.s-main > .figure, .s-main > .skip { margin-top: var(--s3); }

/* Disclosure and masthead */
.disclosure { align-items: center; background: var(--navy-deep); color: rgba(245,247,243,.9); display: flex; font-family: var(--font-mono); font-size: clamp(.72rem, .69rem + .12vw, .79rem); gap: .75rem; justify-content: center; letter-spacing: .01em; line-height: 1.4; padding: .75rem clamp(1.25rem, 5vw, 3rem); text-align: center; }
.disclosure::before { background: var(--cta); border-radius: 50%; content: ''; flex: 0 0 .45rem; height: .45rem; }
.disclosure strong { color: var(--cta); font-size: .69rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.masthead { align-items: center; border-bottom: 1px solid var(--hair); display: flex; flex-wrap: wrap; gap: .7rem 1.75rem; justify-content: space-between; padding-bottom: 1.15rem; padding-top: 1.15rem; }
.mark { align-items: center; color: var(--navy-deep); display: inline-flex; font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; gap: .65rem; letter-spacing: -.02em; line-height: 1.2; text-decoration: none; }
.mark:hover { color: var(--blue); }
.mark svg { flex: none; height: 32px; width: 32px; }
.lg-track { stroke: var(--slate-lt); }
.lg-arc { stroke: var(--coral); }
.lg-needle { stroke: var(--navy); }
.lg-hub { fill: var(--navy); }
.footer .lg-track { stroke: rgba(245,247,243,.25); }
.footer .lg-needle, .footer .lg-hub { stroke: #fff; fill: #fff; }
.masthead-tag { color: var(--ink-soft); font-family: var(--font-mono); font-size: .74rem; letter-spacing: .01em; line-height: 1.4; }

/* Hero: an editorial lead with a photographic column and overlapping action band. */
.hero { background: var(--paper); border-bottom: 1px solid var(--hair-soft); color: var(--ink-soft); overflow: hidden; position: relative; }
.hero::before { background: linear-gradient(145deg, rgba(63,120,255,.13), rgba(201,243,106,.08)); clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%); content: ''; inset: 0 0 0 56%; pointer-events: none; position: absolute; }
.hero::after { background: var(--coral); border-radius: 999px; content: ''; height: .42rem; position: absolute; right: clamp(1.25rem, 5vw, 4rem); top: clamp(1.25rem, 3vw, 2rem); width: clamp(3.5rem, 7vw, 6.5rem); }
.hero-shell { display: grid; gap: 1.6rem; padding-bottom: clamp(4.25rem, 8vw, 7rem); padding-top: clamp(3.5rem, 7vw, 6.25rem); position: relative; z-index: 1; }
.hero-copy { position: relative; z-index: 2; }
.hero-kicker { align-items: center; color: var(--coral); display: flex; font-family: var(--font-mono); font-size: .65rem; font-weight: 500; gap: .75rem; letter-spacing: .14em; margin-bottom: 1.35rem; text-transform: uppercase; }
.hero-kicker::before { background: var(--coral); border-radius: 50%; content: ''; flex: 0 0 .5rem; height: .5rem; }
.hero h1 { color: var(--navy-deep); font-size: clamp(2.27rem, 1.34rem + 3.8vw, 4.27rem); max-width: 13ch; }
.hero h1 .turn { color: var(--blue); display: block; font-weight: 400; margin-top: .28em; }
.hero-figure { margin: 0; position: relative; z-index: 1; }
.hero-figure::before { background: var(--blue); border-radius: 1.25rem; content: ''; inset: 1rem -1rem -1rem 1rem; opacity: .18; position: absolute; }
.hero-figure img { aspect-ratio: 16 / 10; border: 1px solid rgba(21,36,49,.13); border-radius: 1.25rem; object-fit: cover; position: relative; width: 100%; z-index: 1; }
.hero-action { background: var(--navy-deep); border: 1px solid rgba(255,255,255,.12); border-radius: 1rem; box-shadow: 0 1.5rem 3rem rgba(11,27,41,.16); color: rgba(245,247,243,.82); display: grid; gap: 1.5rem; padding: clamp(1.3rem, 3vw, 2rem); position: relative; z-index: 3; }
.deck { color: #fff; font-size: 1.16em; line-height: 1.45; max-width: 34ch; }
.hero .act { border-left: 3px solid var(--cta); margin-top: 0; max-width: 38rem; padding-left: 1rem; }
.act-assure { align-items: center; color: var(--cta); display: flex; font-family: var(--font-mono); font-size: .67rem; gap: .5rem; letter-spacing: .12em; margin-bottom: var(--s2); text-transform: uppercase; }
.act-assure::before { background: var(--cta); border-radius: 50%; content: ''; flex: none; height: 7px; width: 7px; }
.cta { align-items: center; background: var(--cta); border: 0; border-radius: 999px; color: var(--navy-deep); display: inline-flex; font-family: var(--font-display); font-size: .98rem; font-weight: 700; gap: .7rem; letter-spacing: -.01em; padding: .9rem 1.35rem; text-decoration: none; }
.cta::after { content: '↗'; font-size: 1.1em; line-height: 1; transition: transform .16s; }
.cta:hover, .cta:focus-visible { background: #e0ff91; color: var(--navy-deep); transform: translateY(-2px); }
.cta:hover::after { transform: translate(2px, -2px); }
.cta:active { transform: translateY(1px); }
.act-micro { color: var(--ink-mute); font-family: var(--font-display); font-size: .78rem; line-height: 1.5; margin-top: var(--s2); max-width: 44ch; }
.hero .act-micro { color: rgba(245,247,243,.58); }

/* Mid-page action: a borderless signal field between editorial sections. */
.act-break { align-items: center; background: linear-gradient(118deg, var(--blue) 0%, #356de9 72%, #2d61d2 100%); border-radius: 1.15rem; box-shadow: 0 1.25rem 2.75rem rgba(63,120,255,.2); display: grid; gap: var(--s3) var(--s5); grid-template-columns: auto minmax(0, 1fr); isolation: isolate; margin: var(--s6) 0; overflow: hidden; padding: clamp(1.4rem, 3.5vw, 2.35rem); position: relative; }
.act-break::before { border: 1px solid rgba(255,255,255,.32); border-radius: 50%; box-shadow: 0 0 0 2.5rem rgba(201,243,106,.09), 0 0 0 5rem rgba(255,255,255,.045); content: ''; height: 8rem; position: absolute; right: -1.5rem; top: -4.75rem; width: 8rem; z-index: -1; }
.act-break .cta { box-shadow: 0 .55rem 1.35rem rgba(11,27,41,.18); }
.act-break .act-micro { color: rgba(255,255,255,.86); margin-top: 0; max-width: 42ch; }

/* Evidence figures */
.figure { margin: 0; }
.figure img { border-radius: .9rem; filter: saturate(.9) contrast(1.02); width: 100%; }
.figure figcaption { border-left: 2px solid var(--coral); color: var(--ink-mute); font-family: var(--font-mono); font-size: .68rem; line-height: 1.42; margin-top: .7rem; padding-left: .8rem; }
.figure--margin { border-top: 0; padding-top: 0; }
.movement { display: grid; gap: 1rem; margin-top: var(--s3); }
.move--up, .move--down { background: var(--surface); border: 1px solid var(--hair-soft); border-radius: .85rem; padding: 1rem 1.1rem 1.15rem; }
.move--up { color: var(--navy); }
.move--down { color: var(--teal); }
.move-num { border-top: 4px solid currentColor; display: block; font-family: var(--font-mono); font-size: clamp(2.2rem, 1.55rem + 2.4vw, 3.3rem); font-variant-numeric: tabular-nums; font-weight: 500; letter-spacing: -.06em; line-height: 1; padding-top: .72rem; }
.move-lbl { color: var(--ink-mute); display: block; font-family: var(--font-mono); font-size: .68rem; line-height: 1.45; margin-top: .55rem; max-width: 24ch; }
.split-chart { margin-top: var(--s3); }
.split-track { background: rgba(21,36,49,.08); border-radius: 999px; display: flex; height: 1.25rem; overflow: hidden; }
.split-seg { transform-origin: left center; }
.split-seg + .split-seg { border-left: 3px solid var(--paper); }
.split-seg.is-down { background: var(--teal); }
.split-seg.is-up { background: var(--coral); }
.split-seg.is-flat { background: var(--slate-lt); }
.split-keys { color: var(--ink-mute); display: grid; font-family: var(--font-mono); font-size: .68rem; grid-template-columns: 35fr 39fr 26fr; line-height: 1.4; margin-top: .65rem; }
.split-keys b { display: block; font-size: 1.05rem; font-variant-numeric: tabular-nums; font-weight: 500; letter-spacing: -.02em; }
.split-keys li { list-style: none; padding-right: .75rem; }
.split-keys li:nth-child(1) b { color: var(--teal); }
.split-keys li:nth-child(2) b { color: var(--coral); }
.split-keys li:nth-child(3) b { color: var(--slate); }
.pull { border-left: 4px solid var(--coral); color: var(--navy-deep); font-family: var(--font-body); font-size: clamp(1.65rem, 1rem + 2.5vw, 2.8rem); font-weight: 400; letter-spacing: -.025em; line-height: 1.12; max-width: 23ch; padding-left: 1rem; text-wrap: balance; }
.skip { counter-reset: skip; display: grid; gap: var(--s3); margin-top: var(--s3); }
.skip li { border-top: 1px solid var(--hair); list-style: none; padding: var(--s3) 0 0 2.6rem; position: relative; }
.skip li::before { color: var(--coral); content: counter(skip, decimal-leading-zero); counter-increment: skip; font-family: var(--font-mono); font-size: .7rem; left: 0; position: absolute; top: var(--s3); }
.skip strong { color: var(--navy-deep); display: block; font-weight: 650; }
.proof-fig { color: var(--blue); font-family: var(--font-mono); font-size: clamp(2.15rem, 1.55rem + 1.7vw, 3rem); font-variant-numeric: tabular-nums; font-weight: 500; letter-spacing: -.06em; line-height: 1; padding-top: .25rem; }

/* Questions */
.qa { background: var(--surface); border: 1px solid var(--hair-soft); border-radius: 1rem; overflow: hidden; }
.qa details { border-bottom: 1px solid var(--hair-soft); padding: 0 1.2rem; }
.qa details:last-child { border-bottom: 0; }
.qa summary { align-items: baseline; color: var(--navy-deep); cursor: pointer; display: flex; font-family: var(--font-display); font-size: 1.04rem; font-weight: 650; gap: var(--s4); justify-content: space-between; letter-spacing: -.02em; list-style: none; padding: 1.15rem 0; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--blue); }
.qa summary::after { color: var(--coral); content: '+'; flex: none; font-family: var(--font-mono); font-size: 1.05rem; line-height: 1; }
.qa details[open] summary::after { content: '−'; }
.qa-a { font-size: .96em; padding-bottom: var(--s4); }

/* Closing action and footer */
.close { background: var(--navy); color: rgba(245,247,243,.78); overflow: hidden; padding: clamp(3rem, 6.65vw, 5.35rem) 0; position: relative; }
.close::after { border: 1px solid rgba(201,243,106,.3); border-radius: 50%; content: ''; height: 30rem; position: absolute; right: -15rem; top: -9rem; width: 30rem; }
.close > * { position: relative; z-index: 1; }
.close h2 { color: #fff; max-width: 15ch; }
.close p { color: rgba(245,247,243,.78); }
.close .s-label { color: var(--cta); }
.close .act-micro { color: rgba(245,247,243,.62); }
.close .act-assure { color: var(--cta); }
.close a { color: var(--navy-deep); }
.sticky-act { display: none; }
.footer { background: var(--navy-deep); border-top: 1px solid rgba(245,247,243,.14); color: rgba(245,247,243,.7); font-family: var(--font-display); padding: var(--s5) 0 var(--s6); text-align: center; }
.footer a { color: rgba(245,247,243,.9); text-decoration-color: rgba(245,247,243,.3); }
.footer a:hover { color: var(--cta); }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; row-gap: .4rem; }
.footer-links a { font-size: .84rem; line-height: 1.4; padding: .15rem .95rem; text-decoration: none; }
.footer-links a + a { border-left: 1px solid rgba(245,247,243,.24); }
.footer-mark { color: #fff; font-size: 1.06rem; margin-top: var(--s4); }
.footer-mark svg { height: 27px; width: 27px; }
.footer-notice { background: rgba(201,243,106,.09); border: 1px solid rgba(201,243,106,.27); border-radius: .75rem; color: rgba(245,247,243,.94); font-size: .8rem; line-height: 1.52; margin: var(--s4) auto 0; max-width: 62rem; padding: .95rem 1.3rem; }
.footer-notice strong { color: var(--cta); font-weight: 700; }
.footer-fine { color: rgba(245,247,243,.6); font-size: .74rem; line-height: 1.56; margin: var(--s4) auto 0; max-width: 58rem; }
.footer-fine + .footer-fine { margin-top: var(--s3); }
.footer-line { color: rgba(245,247,243,.7); font-size: .8rem; line-height: 1.5; margin-top: .55rem; }
.footer-fine + .footer-line { margin-top: .83rem; }
.footer-line a { text-decoration: none; }
.footer-copy { color: rgba(245,247,243,.7); font-size: .84rem; margin-top: .55rem; }

/* Interior/legal pages use the same signal-board language. */
.site-header { border-bottom: 1px solid var(--hair); }
.site-header .wrap { align-items: center; display: flex; gap: 1rem; justify-content: space-between; padding-bottom: .85rem; padding-top: .85rem; }
.header-back { color: var(--slate); font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em; text-decoration: none; text-transform: uppercase; }
.header-back:hover { color: var(--blue); }
.legal-page { padding: var(--s6) 0 var(--s7); }
.legal-content { max-width: 100%; }
.legal-content h1 { font-size: clamp(1.81rem, 1.34rem + 1.9vw, 2.74rem); margin-bottom: var(--s1); }
.legal-content h2 { border-top: 2px solid var(--coral); font-size: clamp(1rem, .9rem + .39vw, 1.21rem); margin-bottom: var(--s2); margin-top: var(--s5); padding-top: var(--s3); }
.legal-content h3 { font-size: .9rem; margin-bottom: var(--s1); margin-top: var(--s4); }
.legal-content ul, .legal-content ol { display: grid; gap: .4rem; margin: var(--s2) 0 var(--s2) 1.15rem; }
.legal-content .last-updated { color: var(--ink-mute); font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em; margin-bottom: var(--s5); text-transform: uppercase; }
.legal-content .callout { background: var(--surface); border-left: 4px solid var(--coral); border-radius: 0 .7rem .7rem 0; margin: var(--s4) 0; padding: 1rem 1.1rem; }
.legal-content .callout p { margin: 0; }
.legal-table { border-collapse: collapse; font-family: var(--font-mono); font-size: .68rem; line-height: 1.5; margin: var(--s3) 0; width: 100%; }
.legal-table th, .legal-table td { border-bottom: 1px solid var(--hair-soft); color: var(--ink-mute); padding: .6rem .7rem .6rem 0; text-align: left; vertical-align: top; }
.legal-table th { border-bottom: 2px solid var(--navy); color: var(--navy-deep); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.table-scroll { overflow-x: auto; }

/* Motion is enhancement only; complete content remains visible without it. */
.fx .settle { opacity: 0; transform: translateY(16px); }
.fx .settle.is-in { opacity: 1; transform: none; transition: opacity .6s cubic-bezier(.16,1,.3,1) var(--d,0s), transform .6s cubic-bezier(.16,1,.3,1) var(--d,0s); }
.fx .split-seg { transform: scaleX(0); }
.fx .split-chart.is-in .split-seg { transform: scaleX(1); transition: transform .8s cubic-bezier(.16,1,.3,1); }
.fx .split-chart.is-in .split-seg.is-up { transition-delay: .12s; }
.fx .split-chart.is-in .split-seg.is-flat { transition-delay: .24s; }

@media (min-width: 34rem) { .movement { grid-template-columns: 1fr 1fr; } }
@media (min-width: 54rem) {
    .hero-shell { column-gap: clamp(1rem, 2vw, 1.8rem); grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: clamp(1.5rem, 3vw, 2.5rem); }
    .hero-copy { grid-column: 1 / 9; grid-row: 1; padding-top: clamp(.75rem, 2vw, 1.5rem); }
    .hero h1 { font-size: clamp(2.58rem, 1.55rem + 2.16vw, 3.76rem); max-width: 20ch; }
    .hero-figure { align-self: stretch; grid-column: 9 / 13; grid-row: 1 / 3; }
    .hero-figure img { aspect-ratio: auto; height: 100%; min-height: 42rem; }
    .hero-action { align-items: start; grid-column: 1 / 10; grid-row: 2; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
}
@media (max-width: 53.99rem) {
    .hero-shell { padding-top: 2.75rem; }
    .hero-copy { order: 1; }
    .hero-action { gap: 1.25rem; margin: 0 clamp(.7rem, 3vw, 1.5rem); order: 2; }
    .hero-action .deck { font-size: 1.08em; }
    .hero-figure { margin-top: -5rem; order: 3; }
}
@media (min-width: 62rem) {
    .spine { align-items: start; column-gap: clamp(1.6rem, 3vw, 2.8rem); grid-template-columns: var(--col-label) minmax(0, var(--col-main)) minmax(0, var(--col-note)); row-gap: var(--s4); }
    .s-label { grid-column: 1; text-align: right; }
    .s-main { grid-column: 2; }
    .s-note { grid-column: 3; }
    .s-wide { grid-column: 2 / -1; }
}
@media (max-width: 61.99rem) {
    .sticky-act { align-items: center; background: rgba(255,253,248,.95); border-top: 1px solid var(--hair); bottom: 0; box-shadow: 0 -12px 26px rgba(11,27,41,.14); display: flex; justify-content: center; left: 0; padding: .65rem 1rem calc(.65rem + env(safe-area-inset-bottom)); position: fixed; right: 0; transform: translateY(110%); transition: transform .28s cubic-bezier(.22,1,.36,1); z-index: 60; }
    .sticky-act.is-shown { transform: translateY(0); }
    .sticky-act .cta { justify-content: center; max-width: 28rem; width: 100%; }
    .footer { padding-bottom: 6rem; }
}
@media (max-width: 34rem) {
    .disclosure { align-items: flex-start; text-align: left; }
    .masthead { align-items: flex-start; }
    .masthead-tag { font-size: .7rem; }
    .hero h1 { max-width: 12ch; }
    .hero-kicker { align-items: flex-start; flex-direction: column; gap: .35rem; }
    .hero-kicker::before { display: none; }
    .hero-figure::before { inset: .7rem -.7rem -.7rem .7rem; }
    .hero-figure img { border-radius: 1rem; }
    .act-break { grid-template-columns: minmax(0, 1fr); }
    .act-break .cta { justify-content: center; width: 100%; }
    .split-keys b { font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .fx .settle { opacity: 1; transform: none; transition: none; }
    .fx .split-seg { transform: scaleX(1); transition: none; }
    .sticky-act { transition: none; }
}
@media print {
    .sticky-act, .disclosure { display: none; }
    body { background: #fff; }
}

/* ClearMile Auto, review 2026-10-01: readability, contrast, CTA focus, mobile fold. Append at the end of styles.css. */

/* 1. Readable body text: line spacing 1.25 -> 1.55 */
body { line-height: 1.55; }
h1, h2, h3, .pull, .proof-fig, .move-num, .split-keys b, .cta { line-height: 1.12; }

/* 2. Text contrast to WCAG AA (4.5:1) on every page background */
:root { --ink-mute: #5a6770; --coral-text: #b23f25; }
.s-label, .hero-kicker, .skip li::before, .split-keys li:nth-child(2) b { color: var(--coral-text); }
.split-keys li:nth-child(1) b { color: #0f6656; }
.split-keys li:nth-child(3) b { color: var(--ink-mute); }
.s-note a { color: var(--ink-mute); }
.s-label.proof-fig { color: var(--blue); }

/* 3. Keep the lime button color for buttons only */
.disclosure strong, .close .s-label, .footer-notice strong { color: #fff; }
.act-assure, .close .act-assure { color: rgba(245,247,243,.86); }
.act-assure::before, .disclosure::before { background: rgba(245,247,243,.6); }

/* 4. Mid-page button panel: dark background so the button and its small print both pass contrast */
.act-break { background: var(--navy-deep); box-shadow: 0 1.25rem 2.75rem rgba(11,27,41,.18); }
.act-break .act-micro { color: rgba(245,247,243,.86); }

/* 5. Mobile sticky bar: dark bar so the lime button stands out (was lime on near-white, 1.13:1) */
@media (max-width: 61.99rem) {
  .sticky-act { background: rgba(11,27,41,.96); border-top-color: rgba(255,255,255,.12); }
}

/* 6. Disclosure and small-print legibility: 13px minimum, readable opacity */
.act-micro { font-size: .8125rem; }
.hero .act-micro { color: rgba(245,247,243,.78); }
.close .act-micro { color: rgba(245,247,243,.78); }
.footer-notice, .footer-fine { font-size: .8125rem; }
.footer-fine { color: rgba(245,247,243,.72); }
.footer-links a { display: inline-block; min-height: 24px; padding-block: .2rem; }

/* 6b. Top disclosure bar at 13px on every screen width */
.disclosure { font-size: .8125rem; }
.disclosure strong { font-size: inherit; }

/* 7. Mobile first screen: get the hero button above the fold on in-app browsers (640-667px tall) */
@media (max-width: 34rem) {
  .disclosure { display: block; font-size: .8125rem; padding-top: .6rem; padding-bottom: .6rem; }
  .disclosure::before { display: none; }
  .masthead { padding-top: .7rem; padding-bottom: .7rem; gap: .35rem 1rem; }
  .hero-kicker { display: none; }
  .hero-shell { padding-top: 1.5rem; gap: 1.1rem; }
  .hero h1 .turn { margin-top: .18em; }
  .hero-action { gap: 1rem; padding: 1.1rem 1.15rem; }
}


/* 8. Narrow phones (about 360px): drop the masthead tagline so the button clears the fold. The advertorial disclosure above it stays. */
@media (max-width: 23.5rem) {
  .masthead-tag { display: none; }
}

/* 9. Variant B: space a heading that follows a list */
.skip + h3 { margin-top: var(--s5); }

/* 10. Sticky bar: out of the tab order and accessibility tree while parked off screen, with or without JS.
       Visibility flips after the slide-out finishes, and before the slide-in starts. */
@media (max-width: 61.99rem) {
  .sticky-act { visibility: hidden; transition: transform .28s cubic-bezier(.22,1,.36,1), visibility 0s linear .28s; }
  .sticky-act.is-shown { visibility: visible; transition: transform .28s cubic-bezier(.22,1,.36,1), visibility 0s; }
}
@media (prefers-reduced-motion: reduce) {
  .sticky-act, .sticky-act.is-shown { transition: none; }
}

/* 10. Variant B: price section, chart and data panel */
.pt-cap { color: var(--ink-mute); font-size: .9375rem; margin-top: .5rem; }
.pt-title { margin-top: var(--s4); }
.pt-sub { color: var(--ink-mute); font-size: .9375rem; margin-top: .1rem; }
.trend-chart { display: block; height: auto; margin-top: .5rem; max-width: 40rem; width: 100%; }
.pt-data { font-size: .9375rem; margin-top: .75rem; }
.pt-data summary { color: var(--ink-mute); cursor: pointer; font-family: var(--font-mono); font-size: .8125rem; }
.pt-data table { border-collapse: collapse; margin-top: .5rem; max-width: 28rem; width: 100%; }
.pt-data caption { color: var(--ink-mute); font-size: .875rem; padding-bottom: .25rem; text-align: left; }
.pt-data th, .pt-data td { border-bottom: 1px solid var(--hair-soft); padding: .3rem .4rem; text-align: left; }
.pt-data th:not(:first-child), .pt-data td:not(:first-child) { font-variant-numeric: tabular-nums; text-align: right; }
.pt-data .dnote { color: var(--ink-mute); font-size: .8125rem; line-height: 1.5; margin-top: .6rem; }
.trend-chart + p { margin-top: var(--s3); }

/* 11. Variant B: big dollar figure and colored data table */
.pt-big { border-bottom: 1px solid var(--hair); border-top: 2px solid var(--navy); margin-top: var(--s3); padding: .8rem 0 .7rem; }
.pt-big-lbl { color: var(--ink-mute); display: block; font-family: var(--font-mono); font-size: .75rem; letter-spacing: .05em; line-height: 1.4; text-transform: uppercase; }
.pt-big-num { color: #0f6656; display: block; font-family: var(--font-display); font-size: clamp(4rem, 3rem + 6vw, 5.75rem); font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: -.04em; line-height: 1; margin-top: .2rem; }
.pt-big-unit { color: var(--ink); font-size: .32em; font-weight: 700; letter-spacing: -.01em; }
.pt-data tbody tr.is-falling { background: rgba(15,102,86,.09); }
.pt-data tbody tr.is-falling td:first-child { box-shadow: inset 3px 0 0 #0f6656; font-weight: 600; }
.pt-data tbody tr.is-gap td { color: var(--ink-mute); font-style: italic; }
.pt-data td.chg-down { color: #0f6656; font-weight: 700; }
.pt-data td.chg-up { color: #b23f25; font-weight: 600; }

/* 12. Variant B: price section and page flow */
.pt-sub { color: var(--ink-mute); font-size: .9375rem; margin-top: .25rem; }
.trend-chart { margin-top: .75rem; }
.pt-big { border-bottom: 1px solid var(--hair); border-top: 2px solid var(--navy); margin-top: var(--s4); padding: .85rem 0 .8rem; }
.pt-q { color: var(--ink); font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; margin: 0; }
.pt-big-num { color: #0f6656; font-family: var(--font-display); font-size: clamp(3.6rem, 2.8rem + 5vw, 5.25rem); font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: -.04em; line-height: 1; margin: .15rem 0 .2rem; }
.pt-cap { color: var(--ink-mute); font-size: .9375rem; line-height: 1.5; margin-top: .6rem; }
.pt-data tbody tr.is-falling { background: rgba(15,102,86,.09); }
.pt-data tbody tr.is-falling td:first-child { box-shadow: inset 3px 0 0 #0f6656; font-weight: 600; }
.pt-data tbody tr.is-gap td { color: var(--ink-mute); font-style: italic; }
.pt-data td.chg-down { color: #0f6656; font-weight: 700; }
.pt-data td.chg-up { color: #b23f25; font-weight: 600; }
.pt-data td.chg-flat, .pt-data td.chg-na { color: var(--ink-mute); }
.pt-data td.chg-na { font-style: italic; }