/*
 * set-adnia.css — Solar Estimate Tool page.
 * Shared system: dark aurora aad-* theme tokens + the adnia scroll language.
 * Page-unique mechanics: the working calculator and what follows it are at the
 * end of this file (4 Nov); rules above it for the old page are dead until a
 * tidy. Scoped to body.apex-set.
 */

body.apex-set {
    --set-ink: #f4f9ff;
    --set-body: #b7c7e3;
    --set-soft: #9fb6da;
    --set-brand: #274d8a;
    --set-accent: #6ea8ff;
    --set-sun: #ffd479;
    --set-line: rgba(150, 196, 255, .18);
    --set-ease: cubic-bezier(.22, 1, .36, 1);
    --set-card: radial-gradient(120% 130% at 14% 0%, rgba(74, 126, 255, .16), transparent 48%), linear-gradient(165deg, rgba(26, 45, 84, .84), rgba(11, 22, 48, .92));
    --set-card-border: rgba(150, 196, 255, .18);
    --set-card-shadow: 0 30px 70px rgba(2, 8, 24, .5), inset 0 1px 0 rgba(255, 255, 255, .09);
    --set-head-font: var(--a-sans);   /* was Avenir Next, which the theme never loads */
}

/* ════ Shared ════ */
body.apex-set .set-arrow { width: 1em; height: 1em; flex: none; }

body.apex-set .set-head { max-width: 62rem; margin: 0 0 clamp(2.6rem, 5vw, 4.5rem); }
body.apex-set .set-head h2 {
    font: 800 clamp(1.95rem, 3.1vw, 2.85rem)/1.1 var(--set-head-font); letter-spacing: -.018em; color: var(--set-ink); margin: 0;
    text-wrap: balance;
}

body.apex-set .set-textlink {
    display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap;
    color: var(--set-accent); font-weight: 600; text-decoration: none;
}
body.apex-set .set-textlink:hover { color: #9cc2ff; }

body.apex-set .set-main > * { margin-block: var(--a-gap-move); }
/* the hero is outside .set-main on this page, so this rule IS the
   hero-to-first-section gap. It ran at 50px while every other page ran the
   full move gap. */
body.apex-set .set-main > *:first-child { margin-top: var(--a-gap-move); }

/* ════ Scroll reveals ════ */
body.apex-set [data-reveal] {
    opacity: 0;
    transform: translateY(var(--a-rev-y));
    filter: blur(var(--a-rev-blur));
    transition: opacity var(--a-rev-fade) var(--a-ease), transform var(--a-rev-move) var(--a-ease),
                filter var(--a-rev-fade) var(--a-ease);
    transition-delay: calc(var(--i, 0) * var(--a-rev-step));
}
body.apex-set [data-reveal].is-revealed { opacity: 1; transform: none; filter: none }

body.apex-set [data-reveal-words] { opacity: 1 !important; transform: none !important; }
body.apex-set [data-reveal-words] .set-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .09em; margin-bottom: -.09em; }
body.apex-set [data-reveal-words] .set-word > span { display: inline-block; transform: translateY(120%); transition: transform .8s var(--set-ease); transition-delay: calc(var(--w, 0) * 45ms); }
body.apex-set [data-reveal-words].is-revealed .set-word > span { transform: none; }

/* ════ HERO ════ */
body.apex-set .set-hero {
    position: relative; z-index: 1;
    min-height: 100svh; display: flex; flex-direction: column;
    padding-bottom: clamp(3rem, 9vh, 7rem);
}
body.apex-set .set-hero__inner { margin-top: auto; max-width: 88rem; }
body.apex-set .set-hero__title {
    font: 800 clamp(2.7rem, 5vw, 4.3rem)/1.05 var(--set-head-font); letter-spacing: -.02em; color: var(--set-ink); margin: 0 0 1.7rem;
    text-wrap: balance;
}
body.apex-set .set-hero__statement {
    font-family: var(--set-head-font); font-weight: 400; font-size: clamp(1.05rem, 1.3vw, 1.24rem); line-height: 1.55; color: var(--set-body); max-width: 46ch; text-wrap: pretty; margin: 0 0 2.2rem;
}
body.apex-set .set-hero__link {
    display: inline-flex; align-items: center; gap: .6rem;
    padding: .92rem 1.6rem; border-radius: 999px; text-decoration: none;
    font: 700 1rem/1 var(--set-head-font); color: var(--set-ink);
    border: 1px solid rgba(160, 196, 255, .35);
    transition: transform .25s var(--set-ease), background .25s var(--set-ease);
}
body.apex-set .set-hero__link:hover { background: rgba(160, 196, 255, .1); }
body.apex-set .set-hero__link:active { transform: translateY(1px) scale(.99); }
body.apex-set .set-hero__cue {
    position: absolute; left: 50%; bottom: 1.6rem; translate: -50% 0;
    width: 26px; height: 42px; border: 2px solid rgba(150, 196, 255, .5);
    border-radius: 14px; display: grid; place-items: start center; padding-top: 7px;
}
body.apex-set .set-hero__cue span { width: 4px; height: 8px; border-radius: 2px; background: var(--set-accent); animation: set-cue 1.6s var(--set-ease) infinite; }
@keyframes set-cue { 0% { opacity: 0; transform: translateY(-3px); } 40% { opacity: 1; } 80%, 100% { opacity: 0; transform: translateY(10px); } }

/* ════ CALCULATOR SCENE ════ */
body.apex-set .set-calc { position: relative; height: 300vh; }
body.apex-set .set-calc__pin {
    position: sticky; top: 0; height: 100svh;
    display: flex; align-items: center; overflow: hidden;
}
body.apex-set .set-calc__grid {
    display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    gap: clamp(2rem, 5vw, 5rem); align-items: center; width: min(1200px, 92vw);
}
body.apex-set .set-calc__heading {
    font: 800 clamp(1.95rem, 3.1vw, 2.85rem)/1.1 var(--set-head-font); letter-spacing: -.018em; color: var(--set-ink); margin: 0 0 1rem; text-wrap: balance;
}
body.apex-set .set-calc__lead { margin: 0 0 1.6rem; color: var(--set-body); line-height: 1.6; }

body.apex-set .set-tool {
    max-width: 36rem; border-radius: var(--a-r); overflow: hidden;
    background: var(--set-card); border: 1px solid var(--set-card-border); box-shadow: var(--set-card-shadow);
}
body.apex-set .set-tool__head {
    display: flex; align-items: center; gap: .6rem;
    padding: .95rem 1.4rem; font: 600 var(--a-t-micro)/1 var(--set-head-font);
    letter-spacing: var(--a-track-micro); text-transform: uppercase; color: var(--set-soft);
    border-bottom: 1px solid var(--set-line); background: rgba(8, 18, 40, .35);
}
body.apex-set .set-tool__dot { width: 9px; height: 9px; border-radius: 999px; background: var(--set-sun); box-shadow: 0 0 10px rgba(255, 212, 121, .7); flex: none; }
body.apex-set .set-tool__body { position: relative; padding: 1.5rem 1.6rem 1.6rem; display: flex; flex-direction: column; gap: 1.2rem; }
body.apex-set .set-tool__address { margin: 0; display: flex; align-items: center; gap: .55rem; color: var(--set-body); font-size: .95rem; }
body.apex-set .set-tool__address svg { width: 17px; height: 17px; color: var(--set-accent); flex: none; }

body.apex-set .set-tool__slider { display: flex; flex-direction: column; gap: .6rem; }
body.apex-set .set-tool__slider-label { font: 600 var(--a-t-micro)/1 var(--set-head-font); letter-spacing: var(--a-track-micro); text-transform: uppercase; color: var(--set-soft); }
body.apex-set .set-tool__track { position: relative; display: block; height: 8px; border-radius: 999px; background: rgba(150, 196, 255, .14); }
body.apex-set .set-tool__fill { position: absolute; inset: 0 auto 0 0; width: 36%; border-radius: 999px; background: linear-gradient(90deg, rgba(110, 168, 255, .55), var(--set-accent)); }
body.apex-set .set-tool__thumb {
    position: absolute; top: 50%; left: 36%; translate: -50% -50%;
    width: 24px; height: 24px; border-radius: 999px;
    background: #fff; border: 3px solid var(--set-accent);
    box-shadow: 0 0 16px rgba(110, 168, 255, .7);
}

body.apex-set .set-tool__readouts { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
body.apex-set .set-readout {
    padding: .9rem 1rem; border-radius: 14px;
    background: rgba(5, 12, 28, .45); border: 1px solid rgba(150, 196, 255, .12);
    display: flex; flex-direction: column; gap: .15rem;
}
body.apex-set .set-readout__val { font: 800 clamp(1.15rem, 1.7vw, 1.45rem)/1.1 var(--set-head-font); letter-spacing: -.01em; color: var(--set-ink); }
body.apex-set .set-readout__val b { font-variant-numeric: tabular-nums; }
body.apex-set .set-readout__label { font-size: .8rem; color: var(--set-soft); }
body.apex-set .set-tool__payback { margin: 0; color: var(--set-body); font-size: .95rem; }
body.apex-set .set-tool__payback b { color: var(--set-accent); font-variant-numeric: tabular-nums; }
body.apex-set .set-tool__footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
body.apex-set .set-tool__btn {
    flex: none; padding: .85rem 1.4rem; border-radius: 999px;
    font: 700 .95rem/1 var(--set-head-font); color: #fff;
    background: linear-gradient(180deg, #3f72d6, var(--set-brand)); box-shadow: 0 12px 30px rgba(39, 77, 138, .45);
}
body.apex-set .set-tool__leadtoast {
    display: flex; align-items: center; gap: .55rem;
    padding: .7rem 1rem; border-radius: 12px; font-size: .85rem; color: var(--set-ink);
    background: rgba(8, 18, 40, .92); border: 1px solid rgba(88, 214, 141, .35);
    opacity: 0; transform: translateY(10px);
    transition: opacity .45s var(--set-ease), transform .45s var(--set-ease);
}
body.apex-set .set-tool__leadtoast strong { color: #58d68d; }
body.apex-set .set-tool__leadtoast b { font-variant-numeric: tabular-nums; }
body.apex-set .set-tool__leaddot { width: 8px; height: 8px; border-radius: 999px; background: #58d68d; box-shadow: 0 0 10px rgba(88, 214, 141, .7); flex: none; }
body.apex-set .set-tool.is-captured .set-tool__leadtoast { opacity: 1; transform: none; }

/* ════ FEATURE LEDGER ════ */
body.apex-set .set-ledger { border-top: 1px solid var(--set-line); }
body.apex-set .set-lrow {
    display: grid; grid-template-columns: 56px minmax(0, 4fr) minmax(0, 7fr);
    gap: clamp(1rem, 2.5vw, 2.5rem); align-items: start;
    padding: clamp(1.5rem, 3vh, 2.2rem) 0; border-bottom: 1px solid var(--set-line);
}
body.apex-set .set-lrow__icon {
    width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px;
    background: rgba(110, 168, 255, .12); border: 1px solid var(--set-line); color: var(--set-accent);
}
body.apex-set .set-lrow__icon svg { width: 23px; height: 23px; }
body.apex-set .set-lrow h3 { margin: .35rem 0 0; font: 800 clamp(1.15rem, 1.7vw, 1.4rem)/1.2 var(--set-head-font); letter-spacing: -.012em; color: var(--set-ink); }
body.apex-set .set-lrow p { margin: .35rem 0 0; color: var(--set-body); font-size: .98rem; line-height: 1.6; max-width: 38rem; }

/* ════ PROOF STRIP ════ */
body.apex-set .set-proof__strip {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
    gap: clamp(1.2rem, 3vw, 2.5rem);
    padding: 1.4rem clamp(1rem, 3vw, 2.5rem);
    border-block: 1px solid var(--set-line);
}
body.apex-set .set-proof__item { display: inline-flex; align-items: baseline; gap: .6rem; color: var(--set-soft); font-size: var(--a-t-btn); }
body.apex-set .set-proof__item b {
    font: 600 var(--a-t-sub)/1 var(--set-head-font); letter-spacing: -.01em;
    color: var(--set-ink);
}
body.apex-set .set-proof__strip > i { width: 5px; height: 5px; border-radius: 999px; background: rgba(150, 196, 255, .35); }

/* ════ STATEMENT ════ */
body.apex-set .set-statement { text-align: center; }
body.apex-set .set-statement h2 {
    margin: 0 auto; max-width: 54rem;
    font: 800 clamp(1.7rem, 3.4vw, 2.9rem)/1.18 var(--set-head-font);
    letter-spacing: -.015em; color: var(--set-ink); text-wrap: balance;
}

/* ════ INSIGHTS ════ */
body.apex-set .set-insights__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; max-width: none; flex-wrap: wrap; }
body.apex-set [data-drag] { cursor: grab; }
body.apex-set [data-drag].is-dragging { cursor: grabbing; }
body.apex-set [data-drag].is-dragging * { pointer-events: none; }
body.apex-set .set-article__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(165deg, rgba(26, 45, 84, .6), rgba(11, 22, 48, .8)); }
body.apex-set .set-article__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--set-ease); }
body.apex-set .set-article__cat {
    margin: 1.2rem 1.3rem .2rem; align-self: flex-start;
    font: 600 .72rem/1 var(--set-head-font); letter-spacing: .12em; text-transform: uppercase;
    color: var(--set-accent); padding: .42rem .7rem; border: 1px solid var(--set-line); border-radius: 999px;
}
body.apex-set .set-article__more { margin: auto 1.3rem 1.3rem; color: var(--set-soft); font-weight: 700; display: inline-flex; align-items: center; gap: .45rem; }

/* ════ FAQ — one panel, hairline rows ════ */
/* ── One FAQ, site-wide (critique item 1a). Rows, summary type, chevron and
   open/close motion are apex-faq.css now. The rows sat inside a single elevated panel. The panel goes with them:
   every other FAQ on the site is a plain hairline list on the page ground ── */
body.apex-set .apex-faq {
    --faq-line:   var(--set-line);
    --faq-ink:    var(--set-ink);
    --faq-body:   var(--set-body);
    --faq-accent: var(--set-accent);
}

/* ════ CTA — estimate-result card ════ */
body.apex-set .set-cta__card {
    max-width: 46rem; margin-inline: auto;
    border-radius: var(--a-r); overflow: hidden;
    background: var(--set-card); border: 1px solid var(--set-card-border); box-shadow: var(--set-card-shadow);
}
body.apex-set .set-cta__body { padding: 1.6rem 1.8rem 1.8rem; display: flex; flex-direction: column; gap: 1.1rem; }
body.apex-set .set-cta__body h2 {
    font: 800 clamp(1.95rem, 3.1vw, 2.85rem)/1.1 var(--set-head-font); letter-spacing: -.018em; color: var(--set-ink); margin: 0; text-wrap: balance;
}
body.apex-set .set-cta__body > p { margin: 0; color: var(--set-body); line-height: 1.62; max-width: 38rem; }
body.apex-set .set-cta__rows { display: flex; flex-direction: column; gap: .5rem; }
body.apex-set .set-cta__row {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .8rem 1.1rem; border-radius: 12px;
    background: rgba(5, 12, 28, .45); border: 1px solid rgba(150, 196, 255, .12);
    font-size: .95rem;
}
body.apex-set .set-cta__row i { font-style: normal; color: var(--set-soft); }
body.apex-set .set-cta__row b { color: var(--set-accent); }
body.apex-set .set-cta__actions { display: flex; flex-wrap: wrap; gap: .6rem; }
body.apex-set .set-chip {
    display: inline-flex; align-items: center; gap: .6rem; padding: .92rem 1.6rem; border-radius: 999px; text-decoration: none; font: 700 1rem/1 var(--set-head-font); color: var(--set-ink); border: 1px solid rgba(160, 196, 255, .35); background: rgba(8, 18, 40, .4);
    transition: transform .25s var(--set-ease), border-color .25s, box-shadow .25s;
}
body.apex-set .set-chip:hover { transform: translateY(-2px); border-color: rgba(150, 196, 255, .6); }
body.apex-set .set-chip--solid {
    color: #fff; border-color: transparent;
    background: linear-gradient(180deg, #3f72d6, var(--set-brand)); box-shadow: 0 12px 30px rgba(39, 77, 138, .45);
}
body.apex-set .set-chip--solid:hover { box-shadow: 0 18px 42px rgba(39, 77, 138, .55); }
body.apex-set .set-chip svg { width: .95em; height: .95em; }
body.apex-set .set-cta__hint { font-size: .82rem; color: var(--set-soft); }

/* keyboard focus */
body.apex-set a:focus-visible,
body.apex-set button:focus-visible,
body.apex-set summary:focus-visible {
    outline: var(--a-focus); outline-offset: var(--a-focus-off); border-radius: 6px;
}

/* ════ RESPONSIVE ════ */
@media (max-width: 900px) {
    body.apex-set .set-calc { height: auto; }
    body.apex-set .set-calc__pin { position: static; height: auto; display: block; padding-block: 1rem; }
    body.apex-set .set-calc__grid { grid-template-columns: 1fr; align-items: start; }
    body.apex-set .set-tool__leadtoast { opacity: 1; transform: none; }
    body.apex-set .set-lrow { grid-template-columns: 44px 1fr; }
    body.apex-set .set-lrow p { grid-column: 2; }
    body.apex-set .set-proof__strip { flex-direction: column; gap: .9rem; }
    body.apex-set .set-proof__strip > i { display: none; }
}
@media (max-width: 600px) {
    body.apex-set .set-hero { min-height: 92svh; }
    body.apex-set .set-tool__readouts { grid-template-columns: 1fr; }
}

/* ════ REDUCED MOTION ════ */
@media (prefers-reduced-motion: reduce) {
    body.apex-set [data-reveal],
    body.apex-set [data-reveal-words],
    body.apex-set [data-reveal-words] .set-word > span {
        opacity: 1 !important; transform: none !important; transition: none !important;
    }
    body.apex-set .set-hero__cue span { animation: none; }
    body.apex-set .set-calc { height: auto; }
    body.apex-set .set-calc__pin { position: static; height: auto; }
    body.apex-set .set-tool__leadtoast { opacity: 1; transform: none; }
}

/* ════ ON THE PAGE ════
   The one wide moment on this page: the band breaks past .aad-shell (1180px)
   so the embedded tool reads at something close to the size a visitor sees. */
body.apex-set .set-real__band { width: min(100% - 5rem, 1400px); margin-inline: auto; }
body.apex-set .set-real__head { max-width: 40rem; }
body.apex-set .set-real__frame { border-radius: 18px; }
body.apex-set .set-real__cap { margin-left: auto; text-align: right; }

@media (max-width: 900px) {
    body.apex-set .set-real__band { width: calc(100% - 40px); }
    body.apex-set .set-real__cap { margin-left: 0; text-align: left; }
}

/* Pressed feedback — matches .cs-btn:active on the service pages. */
body.apex-set .set-chip:active { transform: translateY(1px) scale(.99); }

/* Says on the page what the aria-label alone used to say: the demo numbers
   are an example, not a quote. */
body.apex-set .set-calc__note {
    margin: 0 0 1.3rem;
    color: var(--set-soft);
    font-size: .92rem;
    line-height: 1.55;
    max-width: 34rem;
}

/* ── The shared hero ridge (apex-ridge.css + inc/parts/hero-ridge.php).
   The scene sits on a negative layer, so the hero has to be its own stacking
   context or that layer falls behind the page instead of behind the copy. This
   line is the whole integration, and nothing in the hero needs a z-index of its
   own: every child, positioned or static, keeps the order it already had. ── */
body.apex-set .set-hero { position: relative; isolation: isolate }

/* Site sweep 2026-09-05: the pinned scene centres its content in a full
   viewport, which already leaves half a screen of air above and below it.
   Stacking the section gap on top made a ~400px void at both ends at 1440.
   Where the pin is live, the neighbours' facing gaps go and the centring is
   the whole gap; below 900px and under reduced motion the pin is static and
   the normal rhythm stays. */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
    body.apex-set .set-main > .set-calc { margin-block: 0; }
    body.apex-set .set-main > :has(+ .set-calc) { margin-bottom: 0; }
    body.apex-set .set-main > .set-calc + * { margin-top: 0; }
}

/* ════════ 4 NOV: A CALCULATOR YOU CAN USE, THE EMAIL, THE PRICE SHEET ═════ */
body.apex-set .set-page .set-pen { margin: 0; font: 400 2rem/1.1 "Apex Hand", cursive; color: #1f5fd6; text-wrap: balance }

body.apex-set .set-hero { min-height: 0; padding-bottom: clamp(2.5rem, 6vh, 4.5rem) }
body.apex-set .set-page .set-hero__inner { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; margin-top: 0 }
body.apex-set .set-page .set-hero__copy { min-width: 0 }
body.apex-set .set-page .set-hero__title { margin: 0 0 1.5rem; max-width: 18ch }
body.apex-set .set-page .set-hero__statement { margin: 0 0 2rem }
body.apex-set .set-page .set-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem }
body.apex-set .set-page .set-hero__more { font-weight: 600; white-space: normal; text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px }
body.apex-set .set-page .set-hero__tool { min-width: 0; width: 100%; max-width: 30rem; justify-self: end }
body.apex-set .set-page .set-pen--try { display: flex; align-items: flex-start; justify-content: flex-end; gap: .3rem; margin: 0 1.5rem -.5rem 0; transform: rotate(-2deg) }
body.apex-set .set-page .set-pen--try svg { width: 3.1rem; height: 2.3rem; margin-top: .55rem; flex: none }

/* the tool */
body.apex-set .set-page .set-est { overflow: hidden; background: #fff; border: 1px solid var(--a-card-line); border-radius: 18px; box-shadow: var(--a-card-shadow-2, var(--a-card-shadow)) }
body.apex-set .set-page .set-est__head { margin: 0; padding: .7rem 1.2rem; font-size: .92rem; font-weight: 500; color: var(--set-body); border-bottom: 1px solid var(--a-card-line) }
body.apex-set .set-page .set-roof { padding: 1rem clamp(1rem, 4vw, 2rem) 0; background: linear-gradient(180deg, #dcebff, #f3f8ff) }
body.apex-set .set-page .set-roof__plane {
    padding: 5% 11% 6%;
    background: repeating-linear-gradient(0deg, #5e6878 0 7px, #535d6d 7px 8px);
    clip-path: polygon(7% 0, 93% 0, 100% 100%, 0 100%);
}
body.apex-set .set-page .set-roof__panels { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px }
body.apex-set .set-page .set-roof__panels i {
    display: block; aspect-ratio: 1 / 1.35; opacity: 0; transform: translateY(-3px);
    background: linear-gradient(140deg, #24518f, #0e2449 70%); outline: 1px solid rgba(255, 255, 255, .28); outline-offset: -1px;
    transition: opacity .18s, transform .18s;
}
body.apex-set .set-page .set-roof__panels i.is-on { opacity: 1; transform: none }
body.apex-set .set-page .set-est__body { padding: 1.15rem 1.2rem 1rem }
body.apex-set .set-page .set-est__field { display: block; margin: 0 0 .85rem }
body.apex-set .set-page .set-est__label { display: flex; justify-content: space-between; gap: 1rem; font-size: 1rem; font-weight: 500; color: var(--set-ink) }
body.apex-set .set-page .set-est__label b { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap }
body.apex-set .set-page .set-est__field input[type="range"] {
    -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 2rem; margin: 0; padding: 0; cursor: pointer; background: none; border: 0;
}
body.apex-set .set-page .set-est__field input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 8px; background: linear-gradient(to right, var(--a-brand) var(--p, 40%), #dbe5f5 var(--p, 40%)) }
body.apex-set .set-page .set-est__field input[type="range"]::-moz-range-track { height: 8px; border-radius: 8px; background: linear-gradient(to right, var(--a-brand) var(--p, 40%), #dbe5f5 var(--p, 40%)) }
body.apex-set .set-page .set-est__field input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -10px; border-radius: 50%; background: #fff; border: 2px solid var(--a-brand); box-shadow: 0 3px 10px rgba(16, 36, 80, .28) }
body.apex-set .set-page .set-est__field input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 2px solid var(--a-brand); box-shadow: 0 3px 10px rgba(16, 36, 80, .28) }
body.apex-set .set-page .set-est__field input[type="range"]:focus-visible { outline: var(--a-focus); outline-offset: 2px; border-radius: 8px }
body.apex-set .set-page .set-est__size { margin: 0; font-size: 1rem; color: var(--set-body) }
body.apex-set .set-page .set-est__size b { font-weight: 600; color: var(--set-ink); font-variant-numeric: tabular-nums }
body.apex-set .set-page .set-est__price { margin: .1rem 0 .3rem; font-size: clamp(1.9rem, 3vw, 2.35rem); font-weight: 700; line-height: 1.12; letter-spacing: -.025em; color: var(--set-ink); font-variant-numeric: tabular-nums }
body.apex-set .set-page .set-est__save { margin: 0 0 1rem; font-size: 1rem; line-height: 1.45; color: var(--set-body) }
body.apex-set .set-page .set-est__save b { font-weight: 600; color: var(--set-ink) }
body.apex-set .set-page .set-est__btn {
    display: block; width: 100%; padding: .95rem 1rem; cursor: pointer; text-align: center; color: #fff; font-size: 1.05rem; font-weight: 600;
    background: var(--own, var(--a-brand)); border: 0; border-radius: 12px; transition: filter .2s, background .25s;
}
body.apex-set .set-page button.set-est__btn:hover { filter: brightness(1.12) }
body.apex-set .set-page .set-est__btn:focus-visible { outline: var(--a-focus); outline-offset: 2px }
body.apex-set .set-page .set-est__small { margin: .7rem 0 0; font-size: .9rem; color: var(--set-body); text-align: center }

/* shared section copy */
body.apex-set .set-page :is(.set-lead__copy, .set-range__copy, .set-own__copy) .set-head { margin-bottom: 1.2rem }
body.apex-set .set-page :is(.set-lead__copy, .set-range__copy, .set-own__copy) > p { margin: 0 0 1rem; max-width: 34rem; font-size: var(--a-t-lede); line-height: 1.55 }
body.apex-set .set-page :is(.set-lead, .set-range, .set-own) { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center }

/* the email */
body.apex-set .set-page .set-mail-wrap { min-width: 0 }
body.apex-set .set-page .set-mail { padding: 1.4rem 1.6rem 1.5rem; background: #fff; border: 1px solid var(--a-card-line); border-radius: 14px; box-shadow: var(--a-card-shadow-2, var(--a-card-shadow)) }
body.apex-set .set-page .set-mail.is-new { animation: set-mail-in .7s var(--set-ease) .35s backwards }
@keyframes set-mail-in { from { opacity: 0; transform: translateY(-22px) rotate(-1deg) } }
body.apex-set .set-page .set-mail__from { display: flex; justify-content: space-between; margin: 0 0 .35rem; font-size: 1rem; color: var(--set-body) }
body.apex-set .set-page .set-mail__from b { font-weight: 600; color: var(--set-ink) }
body.apex-set .set-page .set-mail__subject { margin: 0 0 1.1rem; padding-bottom: 1.1rem; font-size: clamp(1.3rem, 2.2vw, 1.6rem); font-weight: 600; line-height: 1.2; letter-spacing: -.015em; color: var(--set-ink); border-bottom: 1px solid var(--a-card-line) }
body.apex-set .set-page .set-mail__subject span { font-variant-numeric: tabular-nums }
body.apex-set .set-page .set-mail__line { margin: 0 0 .55rem; font-size: 1.08rem; line-height: 1.5; color: var(--set-body) }
body.apex-set .set-page .set-mail__line:last-child { margin: 0 }
body.apex-set .set-page .set-mail__line b, body.apex-set .set-page .set-mail__line b span { font-weight: 600; color: var(--set-ink) }
body.apex-set .set-page .set-x { display: inline-block; height: .95em; max-width: 45%; vertical-align: -.12em; margin: 0 .1em; background: #0f1d3a; border-radius: 2px }
body.apex-set .set-page .set-pen--mail { margin-top: .9rem; text-align: right; transform: rotate(-1.5deg) }

/* the price sheet */
body.apex-set .set-page .set-sheet-wrap { margin: 0; min-width: 0 }
body.apex-set .set-page .set-sheet {
    padding: 1.6rem clamp(1.3rem, 3vw, 2.2rem) 1.8rem clamp(2rem, 4vw, 3rem); transform: rotate(-1.2deg);
    background: linear-gradient(90deg, transparent 1.45rem, rgba(207, 42, 39, .28) 1.45rem, rgba(207, 42, 39, .28) calc(1.45rem + 1px), transparent calc(1.45rem + 1px)), repeating-linear-gradient(180deg, #fffdf7 0 2.55rem, #cfdcf2 2.55rem calc(2.55rem + 1px));
    border: 1px solid #e7e2d2; border-radius: 3px; box-shadow: var(--a-card-shadow-2, var(--a-card-shadow));
}
body.apex-set .set-page .set-sheet p, body.apex-set .set-page .set-sheet span { font: 400 1.95rem/2.62rem "Apex Hand", cursive; color: #1d3f91;}
body.apex-set .set-page .set-sheet p { margin: 0 }
body.apex-set .set-page .set-sheet__title { font-size: 2.3rem }
body.apex-set .set-page .set-sheet__row { display: flex; justify-content: space-between; gap: 1rem }
body.apex-set .set-page .set-sheet .set-sheet__old { position: relative; display: inline-block }
body.apex-set .set-page .set-sheet__old svg { position: absolute; inset: 22% -6% auto; width: 112%; height: 56%; overflow: visible; fill: none; stroke: #cf2a27; stroke-width: 3; stroke-linecap: round; vector-effect: none }
body.apex-set .set-page .set-sheet__old path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .6s .5s }
body.apex-set .set-page .is-revealed .set-sheet__old path { stroke-dashoffset: 0 }
body.apex-set .set-page .set-sheet .set-sheet__new { margin-left: .35rem; color: #cf2a27 }
body.apex-set .set-page .set-sheet .set-sheet__note { margin-top: 0; color: #cf2a27; transform: rotate(-1deg); text-wrap: balance }

/* yours */
body.apex-set .set-page .set-own__opts { display: grid; gap: .5rem; max-width: 24rem; margin-top: 1.5rem }
body.apex-set .set-page .set-own__opt {
    display: flex; align-items: center; gap: .7rem; width: 100%; padding: .75rem .95rem; cursor: pointer; text-align: left; font-size: 1.05rem; font-weight: 500; color: var(--set-ink);
    background: #fff; border: 1px solid var(--a-card-line); border-radius: 12px; transition: border-color .2s, box-shadow .2s;
}
body.apex-set .set-page .set-own__opt i { width: 1.15rem; height: 1.15rem; flex: none; border-radius: 50% }
body.apex-set .set-page .set-own__opt:hover { border-color: var(--a-brand) }
body.apex-set .set-page .set-own__opt:focus-visible { outline: var(--a-focus); outline-offset: 2px }
body.apex-set .set-page .set-own__opt[aria-pressed="true"] { border-color: var(--set-ink); box-shadow: inset 0 0 0 1px var(--set-ink) }
body.apex-set .set-page .set-own__card { --own: #274d8a; min-width: 0; padding: 0 clamp(1.3rem, 3vw, 2rem) clamp(1.3rem, 3vw, 2rem); background: #fff; border: 1px solid var(--a-card-line); border-radius: 18px; box-shadow: var(--a-card-shadow-2, var(--a-card-shadow)); overflow: hidden }
body.apex-set .set-page .set-own__logo { margin: 0 calc(clamp(1.3rem, 3vw, 2rem) * -1) 1.3rem; padding: 1.1rem clamp(1.3rem, 3vw, 2rem); color: #fff; font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; background: var(--own); transition: background .25s }

@media (min-width: 700px) {
    body.apex-set .set-page .set-hero__inner { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr) }
    body.apex-set .set-page .set-lead { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) }
    body.apex-set .set-page .set-range { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) }
    body.apex-set .set-page .set-own { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr) }
}
@media (min-width: 700px) and (max-width: 899px) {
    body.apex-set .set-page .set-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) }
    body.apex-set .set-page :is(.set-lead, .set-range, .set-own) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) }
}
@media (max-width: 699px) {
    body.apex-set .set-page .set-hero__tool { justify-self: start; max-width: 34rem }
    body.apex-set .set-page .set-sheet-wrap { order: 2 }
    body.apex-set .set-page :is(.set-mail-wrap, .set-sheet-wrap, .set-own__card) { max-width: 36rem }
}
@media (prefers-reduced-motion: reduce) {
    body.apex-set .set-page .set-mail.is-new { animation: none }
    body.apex-set .set-page .set-sheet__old path { stroke-dashoffset: 0; transition: none }
}

/* ══ 6 NOV: THE CUSTOMER'S SIDE, THE REP'S WEEK, THE RED PRICE, YOUR NAME ══ */
body.apex-set .set-page .set-pen--said { min-height: 2.3em; margin: .9rem .4rem 0; font-size: 1.85rem; transform: rotate(-1deg) }
body.apex-set .set-page [data-est] [hidden], body.apex-set .set-page .set-ask[hidden] { display: none }
body.apex-set .set-page .set-ask { display: grid; gap: .6rem }
body.apex-set .set-page .set-ask__f { display: grid; gap: .25rem; font-size: .95rem; font-weight: 500; color: var(--set-ink) }
body.apex-set .set-page .set-ask__f input, body.apex-set .set-page .set-own__name input {
    width: 100%; padding: .7rem .85rem; font: inherit; font-size: 1.05rem; font-weight: 400; color: var(--set-ink);
    background: #fff; border: 1px solid var(--a-card-line); border-radius: 10px;
}
body.apex-set .set-page :is(.set-ask__f, .set-own__name) input:focus { outline: var(--a-focus); outline-offset: 1px; border-color: var(--a-brand) }
body.apex-set .set-page .set-ask .set-est__small { margin-top: 0 }
body.apex-set .set-page [data-mail-name].is-named { font-weight: 600; color: var(--set-ink) }
body.apex-set .set-page .set-mail-go { margin: 1rem 0 0; text-align: right }
body.apex-set .set-page .set-mail-go a, body.apex-set .set-page .set-range__go a, body.apex-set .set-page .set-own__go a {
    font-weight: 600; text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px
}
body.apex-set .set-page .set-range__copy > .set-range__go, body.apex-set .set-page .set-own__copy > .set-own__go { margin: 1.4rem 0 0 }

/* the rep's week */
body.apex-set .set-page .set-week { display: block }
body.apex-set .set-page .set-week__copy { max-width: 46rem; margin-bottom: clamp(1.8rem, 4vw, 2.6rem) }
body.apex-set .set-page .set-week__copy > p { margin: 0; font-size: var(--a-t-lede); line-height: 1.55 }
body.apex-set .set-page .set-week__days { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none }
body.apex-set .set-page .set-day {
    display: flex; flex-direction: column; min-width: 0; padding: 1.1rem 1.2rem 1.2rem; background: #fffdf7;
    border: 1px solid #e7e2d2; border-left: 4px solid #e7e2d2; border-radius: 6px; box-shadow: var(--a-card-shadow);
    transition: border-color .3s
}
body.apex-set .set-page .set-day.is-right { border-left-color: #178a43 }
body.apex-set .set-page .set-day.is-wrong { border-left-color: #cf2a27 }
body.apex-set .set-page .set-day p { margin: 0 }
body.apex-set .set-page .set-day__when { display: flex; justify-content: space-between; gap: .8rem; font-size: .95rem; color: var(--set-body) }
body.apex-set .set-page .set-day__when b { font-weight: 600; color: var(--set-ink) }
body.apex-set .set-page .set-day__note { margin: .45rem 0 .9rem !important; font: 400 1.75rem/1.15 "Apex Hand", cursive; color: #1d3f91; text-wrap: balance }
body.apex-set .set-page .set-day__picks { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: auto !important }
body.apex-set .set-page .set-day__picks button {
    padding: .5rem .8rem; cursor: pointer; font: inherit; font-size: .92rem; font-weight: 600; color: var(--a-brand);
    background: #fff; border: 1px solid #b9c7de; border-radius: 9px; transition: background .2s, border-color .2s, color .2s
}
body.apex-set .set-page .set-day__picks button:hover { border-color: var(--a-brand); background: #eef3fb }
body.apex-set .set-page .set-day__picks button:focus-visible { outline: var(--a-focus); outline-offset: 2px }
body.apex-set .set-page .set-day[data-picked] .set-day__picks button { cursor: default; opacity: .45 }
body.apex-set .set-page .set-day[data-picked] .set-day__picks button[aria-pressed="true"] { opacity: 1; color: #fff; background: var(--a-brand); border-color: var(--a-brand) }
body.apex-set .set-page .set-day__est { margin-top: .9rem; padding-top: .8rem; border-top: 1px dashed #d8d1bd; animation: set-day-in .45s var(--set-ease) }
body.apex-set .set-page .set-day__est[hidden] { display: none }
@keyframes set-day-in { from { opacity: 0; transform: translateY(-6px) } }
body.apex-set .set-page .set-day__nums { font-size: 1rem; line-height: 1.45; color: var(--set-body) }
body.apex-set .set-page .set-day__nums span { font-weight: 700; color: var(--set-ink); font-variant-numeric: tabular-nums }
body.apex-set .set-page .set-day__why { margin-top: .4rem !important; font-size: 1rem; line-height: 1.45; font-weight: 600; color: var(--set-ink) }
body.apex-set .set-page .set-day.is-wrong .set-day__why { color: #b3261e }
body.apex-set .set-page .set-week__end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: 1.8rem }
body.apex-set .set-page .set-week__end[hidden] { display: none }
body.apex-set .set-page .set-week__end .set-pen { flex: 1 1 22rem; max-width: 40rem; transform: rotate(-1deg) }
@media (min-width: 700px) { body.apex-set .set-page .set-week__days { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (min-width: 1100px) { body.apex-set .set-page .set-week__days { grid-template-columns: repeat(3, minmax(0, 1fr)) } }

/* the red price is an input */
body.apex-set .set-page .set-sheet .set-sheet__new input {
    width: 5.6ch; margin: 0; padding: 0 .1em; font: inherit; color: inherit; background: transparent;
    border: 0; border-bottom: 2px dashed rgba(207, 42, 39, .55); border-radius: 0; cursor: text
}
body.apex-set .set-page .set-sheet .set-sheet__new input:focus { outline: none; border-bottom-style: solid; background: rgba(207, 42, 39, .06) }
body.apex-set .set-page .set-sheet__pen { margin-top: 1.4rem; font-size: 2rem; transform: rotate(-1deg) }

/* your name and your own colour */
body.apex-set .set-page .set-own__name { display: grid; gap: .3rem; max-width: 24rem; margin-top: 1.5rem; font-size: .95rem; font-weight: 600; color: var(--set-ink) }
body.apex-set .set-page .set-own__name + .set-own__opts { margin-top: 1rem }
body.apex-set .set-page .set-own__pick { position: relative; cursor: pointer }
body.apex-set .set-page .set-own__pick input { width: 1.4rem; height: 1.4rem; flex: none; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer }
body.apex-set .set-page .set-own__pick input::-webkit-color-swatch-wrapper { padding: 0 }
body.apex-set .set-page .set-own__pick input::-webkit-color-swatch { border: 0; border-radius: 50% }
body.apex-set .set-page .set-own__pick input::-moz-color-swatch { border: 0; border-radius: 50% }
body.apex-set .set-page .set-own__pick.is-on { border-color: var(--set-ink); box-shadow: inset 0 0 0 1px var(--set-ink) }
body.apex-set .set-page .set-own__copy > .set-own__pen { max-width: 24rem; min-height: 1.1em; margin: 1rem 0 0; font-size: 1.9rem; line-height: 1.1; color: #1f5fd6 }
body.apex-set .set-page .set-own__pen:empty { display: none }
@media (prefers-reduced-motion: reduce) { body.apex-set .set-page .set-day__est { animation: none } }
/* the colour picker shows keyboard focus; the card's preview button presses and says where it goes (8 Nov) */
body.apex-set .set-page .set-own__pick input:focus-visible { outline: var(--a-focus); outline-offset: 3px }
body.apex-set .set-page .set-own__card span.set-est__btn { cursor: pointer }