/* Sales Researcher page: its own visuals and interactions (js/researcher.js). Shared parts (headings, folds, price)
   come from product.css. Territories: Anna in blue, Ben in yellow, Cem in teal; the brief in the researcher's violet. */

.sr-week, .sr-mapsec, .sr-learn, .sr-flipsec, .sr-never { padding-block: clamp(48px, 7vw, 88px) 0; }
.sr-week .pr-h2, .sr-flipsec .pr-h2 { text-align: center; }
.sr-week .eyebrow, .sr-flipsec .eyebrow { margin-bottom: 10px; }
.sr-gen-form[hidden], .sr-gen-try[hidden], .sr-steppers[hidden], .sr-reps[hidden], .sr-brief[hidden], .sr-unknown[hidden] { display: none; }

/* ---------- Hero: a research desk. The search, the sources being checked, the brief on paper ---------- */
.sr-gen { display: grid; gap: 12px; }
.sr-gen-form { display: flex; gap: 8px; padding: 6px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-sm); transition: border-color 0.2s ease; }
.sr-gen-form:focus-within { border-color: var(--ink); }
.sr-gen-field { display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; padding-inline: 12px; }
.sr-gen-field .i { flex: none; width: 16px; height: 16px; color: var(--ink-3); }
.sr-gen-field input { width: 100%; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 15px; color: var(--ink); outline: none; }
.sr-gen-try { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--ink-3); }
.sr-gen-try button { padding: 5px 11px; border: 1px dashed var(--line-strong); border-radius: 999px; background: none; font: inherit; font-size: 13px; color: var(--ink-2); cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease; }
.sr-gen-try button:hover { border-color: var(--ink); color: var(--ink); }
.sr-gen-try button[aria-pressed="true"] { border-style: solid; border-color: var(--ink); background: var(--surface); color: var(--ink); }
.sr-gen-try button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* The sources, ticked off one by one while it researches. */
.sr-gen-sources { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0 4px; list-style: none; font-size: 12.5px; color: var(--ink-3); }
.sr-gen-sources li { display: inline-flex; align-items: center; gap: 6px; transition: color 0.2s ease; }
.sr-gen-sources li::before { content: ""; flex: none; box-sizing: border-box; width: 14px; height: 14px; border: 1.5px solid var(--line-strong); border-radius: 50%; transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.sr-gen-sources li.is-done { color: var(--ink-2); }
.sr-gen-sources li.is-done::before { border-color: var(--ok); background: var(--ok); box-shadow: inset 0 0 0 3px var(--surface); }
.is-researching .sr-gen-sources li:not(.is-done)::before { border-top-color: var(--ink); animation: sr-spin 0.8s linear infinite; }
@keyframes sr-spin { to { transform: rotate(360deg); } }

/* The brief: a sheet of paper with a violet top edge. */
.sr-gen-paper { position: relative; min-height: 440px; padding: 22px 24px; border: 1px solid var(--line); border-top: 4px solid var(--chip-5); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-lg); }
/* While it researches: lines of a page still being written. */
.sr-gen-paper::before { content: ""; position: absolute; inset: 26px 24px auto; height: 280px; border-radius: 6px; background: repeating-linear-gradient(to bottom, var(--bg-soft) 0 14px, transparent 14px 32px); opacity: 0; pointer-events: none; }
.is-researching .sr-gen-paper::before { opacity: 1; animation: sr-pulse 1s ease-in-out infinite alternate; }
@keyframes sr-pulse { to { opacity: 0.45; } }
.sr-brief { display: grid; gap: 14px; }
.is-built .sr-brief:not([hidden]) > * { animation: sr-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.is-built .sr-brief > :nth-child(2) { animation-delay: 0.06s; }
.is-built .sr-brief > :nth-child(3) { animation-delay: 0.12s; }
.is-built .sr-brief > :nth-child(4) { animation-delay: 0.18s; }
.is-built .sr-brief > :nth-child(5) { animation-delay: 0.24s; }
.is-built .sr-brief > :nth-child(6) { animation-delay: 0.3s; }
@keyframes sr-in { from { opacity: 0; transform: translateY(8px); } }
.sr-brief-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.sr-kicker { margin: 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.sr-brief h2 { margin: 4px 0 2px; font-family: var(--font-display); font-size: 22px; letter-spacing: -0.02em; }
.sr-meta { margin: 0; font-size: 13.5px; color: var(--ink-2); }
.sr-read { display: inline-flex; flex: none; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--ok) 12%, var(--surface)); font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--ok); }
.sr-read .i { width: 13px; height: 13px; }
.sr-presence { margin: 0; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--chip-5) 18%, var(--surface)); font-size: 14px; line-height: 1.45; }
/* Every fact carries its source. */
.sr-src { display: inline-block; margin-inline-start: 4px; padding: 1px 7px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; white-space: nowrap; color: var(--ink-3); vertical-align: 1px; }
.sr-src::before { content: "↗ "; }
.sr-part h3 { margin: 0 0 6px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.sr-pains { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: pain; font-size: 14.5px; line-height: 1.45; }
.sr-pains li { position: relative; padding-inline-start: 28px; }
.sr-pains li::before { counter-increment: pain; content: counter(pain); position: absolute; top: 1px; inset-inline-start: 0; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: color-mix(in srgb, var(--err) 12%, var(--surface)); font-size: 11px; font-weight: 700; color: var(--err); }
.sr-product p { margin: 0; padding: 10px 12px; border-inline-start: 3px solid var(--ok); border-start-end-radius: 10px; border-end-end-radius: 10px; background: color-mix(in srgb, var(--ok) 7%, var(--surface)); font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.sr-product b { display: block; color: var(--ink); }
.sr-approach { margin: 0 0 8px; font-size: 13.5px; color: var(--ink-2); }
.sr-opening { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--bg-soft); font-size: 14.5px; font-style: italic; line-height: 1.5; }
.sr-more summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0 0; border-top: 1px dashed var(--line); font-size: 13.5px; font-weight: 600; list-style: none; cursor: pointer; }
.sr-more summary::-webkit-details-marker { display: none; }
.sr-more summary .i { width: 14px; height: 14px; transition: rotate 0.25s ease; }
.sr-more[open] summary .i { rotate: 45deg; }
.sr-more summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.sr-more p { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.sr-obj b { display: block; color: var(--ink); }
.sr-unknown { display: grid; justify-items: start; gap: 14px; padding: 18px 4px; }
.sr-unknown p { margin: 0; font-size: 16px; line-height: 1.5; }
.sr-gen-for { margin: 0; font-size: 12.5px; color: var(--ink-3); }

/* ---------- A sales team's week: research against selling ---------- */
.sr-week-card { display: grid; gap: 22px; max-width: 880px; margin: 28px auto 0; padding: clamp(20px, 3vw, 32px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-soft); }
.sr-steppers { display: flex; flex-wrap: wrap; gap: 16px 40px; }
.sr-stepper { display: grid; gap: 8px; }
.sr-stepper-label { font-size: 13px; color: var(--ink-3); }
.sr-stepper-box { display: inline-flex; align-items: center; justify-self: start; gap: 4px; padding: 4px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); }
.sr-stepper-box button { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--bg-soft); font: inherit; font-size: 20px; line-height: 1; color: var(--ink); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; }
.sr-stepper-box button:hover:not(:disabled) { background: var(--btn-bg); color: var(--btn-fg); }
.sr-stepper-box button:disabled { opacity: 0.35; cursor: default; }
.sr-stepper-box button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sr-stepper-box output { min-width: 3ch; font-family: var(--font-display); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; }
.sr-weeks { display: grid; gap: 12px; }
.sr-weekrow { display: grid; grid-template-columns: 150px minmax(0, 1fr) 84px; grid-template-areas: "name bar value"; align-items: center; gap: 6px 14px; }
.sr-weekrow-name { grid-area: name; font-size: 14px; font-weight: 600; }
/* A 40-hour week, five days: selling in green, research hatched over it from the start of the week. */
.sr-weekbar { position: relative; grid-area: bar; display: block; height: 30px; overflow: hidden; border-radius: 8px; background: repeating-linear-gradient(to right, color-mix(in srgb, var(--ok) 24%, var(--surface)) 0 calc(20% - 2px), var(--surface) calc(20% - 2px) 20%); }
[dir="rtl"] .sr-weekbar { background: repeating-linear-gradient(to left, color-mix(in srgb, var(--ok) 24%, var(--surface)) 0 calc(20% - 2px), var(--surface) calc(20% - 2px) 20%); }
.sr-weekbar i { position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--w); background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--err) 60%, var(--chip-4)) 0 6px, color-mix(in srgb, var(--err) 40%, var(--chip-4)) 6px 12px); transition: width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.sr-weekrow b { grid-area: value; font-family: var(--font-display); font-size: 20px; text-align: end; white-space: nowrap; color: var(--err); }
.sr-weekrow.is-with b { color: var(--ok); }
.sr-legend { display: flex; gap: 16px; margin: 0; padding: 0; padding-inline-start: 164px; list-style: none; font-size: 12.5px; color: var(--ink-3); }
.sr-legend li { display: inline-flex; align-items: center; gap: 6px; }
.sr-legend li::before { content: ""; width: 14px; height: 10px; border-radius: 3px; }
.sr-legend .is-research::before { background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--err) 60%, var(--chip-4)) 0 3px, color-mix(in srgb, var(--err) 40%, var(--chip-4)) 3px 6px); }
.sr-legend .is-selling::before { background: color-mix(in srgb, var(--ok) 24%, var(--surface)); border: 1px solid color-mix(in srgb, var(--ok) 40%, var(--line)); }
.sr-back { margin: 0; font-size: 17px; color: var(--ink-2); }
.sr-back b { font-family: var(--font-display); font-size: 28px; letter-spacing: -0.02em; color: var(--ok); }
.sr-note { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 13px; color: var(--ink-3); }
.sr-note .i { flex: none; width: 14px; height: 14px; margin-top: 2px; }

/* ---------- Monday's shortlist on the territory map ---------- */
.sr-map-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; gap: 32px 56px; }
.sr-map-text { display: grid; gap: 14px; }
.sr-map-text > p:not(.eyebrow) { margin: 0; font-size: 17px; color: var(--ink-2); }
.sr-reps { display: flex; flex-wrap: wrap; gap: 6px; }
.sr-reps button { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.sr-reps button:hover { border-color: var(--ink); color: var(--ink); }
.sr-reps button[aria-pressed="true"] { border-color: var(--btn-bg); background: var(--btn-bg); color: var(--btn-fg); }
.sr-reps button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sr-reps i { width: 10px; height: 10px; border-radius: 50%; }
.sr-reps .is-a { background: var(--chip-1); }
.sr-reps .is-b { background: var(--chip-3); }
.sr-reps .is-c { background: var(--chip-2); }
.sr-map-wrap { display: grid; gap: 12px; }
.sr-map { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: var(--bg-soft); }
.sr-map-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.sr-zone { stroke: var(--surface); stroke-width: 3; transition: opacity 0.3s ease; }
.sr-zone.is-a { fill: color-mix(in srgb, var(--chip-1) 45%, var(--surface)); }
.sr-zone.is-b { fill: color-mix(in srgb, var(--chip-3) 45%, var(--surface)); }
.sr-zone.is-c { fill: color-mix(in srgb, var(--chip-2) 45%, var(--surface)); }
.sr-road { fill: none; stroke: var(--surface); stroke-width: 4; stroke-linecap: round; opacity: 0.9; }
[data-active="a"] .sr-zone:not(.is-a), [data-active="b"] .sr-zone:not(.is-b), [data-active="c"] .sr-zone:not(.is-c) { opacity: 0.25; }
.sr-clock { position: absolute; top: 12px; inset-inline-start: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--btn-bg); font-family: var(--font-mono); font-size: 12px; color: var(--btn-fg); }
.sr-clock .i { width: 13px; height: 13px; }
.sr-pins { margin: 0; padding: 0; list-style: none; }
/* A pin per prospect; its name is read out, not shown. A dark centre means someone is already working on it. */
.sr-pin { --c: var(--chip-1); position: absolute; left: var(--x); top: var(--y); width: 26px; height: 26px; margin: -13px 0 0 -13px; padding: 0; border: 3px solid var(--surface); border-radius: 50% 50% 50% 0; background: color-mix(in srgb, var(--c) 85%, var(--ink) 15%); box-shadow: var(--shadow-sm); font-size: 0; color: transparent; cursor: pointer; transform: rotate(-45deg); transition: transform 0.2s ease, opacity 0.3s ease, box-shadow 0.2s ease; }
.sr-pin.is-b { --c: var(--chip-3); }
.sr-pin.is-c { --c: var(--chip-2); }
.sr-pin::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--surface); }
.sr-pin[data-locked-by]::after { background: var(--ink); }
.sr-pin:hover, .sr-pin:focus-visible { transform: rotate(-45deg) scale(1.15); outline: none; box-shadow: 0 0 0 3px var(--ink); }
.sr-pin[aria-pressed="true"] { z-index: 2; transform: rotate(-45deg) scale(1.3); box-shadow: 0 0 0 3px var(--ink), var(--shadow-lg); }
[data-active="a"] .sr-pin:not(.is-a), [data-active="b"] .sr-pin:not(.is-b), [data-active="c"] .sr-pin:not(.is-c) { opacity: 0.2; }
/* Monday 6:00: the pins drop in. */
.is-waiting .sr-pin { opacity: 0; translate: 0 -24px; }
.is-in .sr-pin { animation: sr-drop 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--i) * 70ms + 200ms); }
@keyframes sr-drop { from { opacity: 0; translate: 0 -24px; } }
.sr-pick { --c: var(--chip-1); display: grid; gap: 10px; padding: 16px 18px; border: 1px solid var(--line); border-inline-start: 4px solid var(--c); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-sm); }
.sr-pick.is-b { --c: var(--chip-3); }
.sr-pick.is-c { --c: var(--chip-2); }
.sr-pick-name { margin: 0; font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.sr-pick dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.sr-pick dt { font-size: 12px; color: var(--ink-3); }
.sr-pick dd { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; font-size: 14px; font-weight: 600; }
.sr-fit { display: inline-block; width: 60px; height: 6px; overflow: hidden; border-radius: 999px; background: var(--bg-soft); }
.sr-fit i { display: block; width: var(--w); height: 100%; background: var(--ok); transition: width 0.3s ease; }
.sr-pick-status { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; font-weight: 600; color: var(--ok); }
.sr-pick-status .i { width: 14px; height: 14px; }
.sr-pick.is-locked .sr-pick-status { color: var(--warn); }
.sr-pick.is-locked .sr-pick-status .i { display: none; }
.sr-caption { margin: 0; font-size: 12.5px; color: var(--ink-3); }

/* ---------- It learns: mark outcomes; the overview and next Monday follow ---------- */
.sr-learn-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: start; gap: 32px 56px; }
.sr-learn-text { display: grid; gap: 14px; }
.sr-learn-text > p:not(.eyebrow) { margin: 0; font-size: 17px; color: var(--ink-2); }
.sr-marks { display: grid; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; }
.sr-marks li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.sr-mark-name b { display: block; font-size: 14.5px; }
.sr-mark-name small { font-size: 12.5px; color: var(--ink-3); }
.sr-seg { display: inline-flex; min-width: 0; margin: 0; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-soft); }
.sr-seg label { position: relative; }
.sr-seg input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.sr-seg span { display: block; padding: 6px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; color: var(--ink-3); transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; }
.sr-seg label:hover span { color: var(--ink); }
.sr-seg input:checked + span { background: var(--surface); box-shadow: var(--shadow-sm); color: var(--ink); }
.sr-seg input[value="useless"]:checked + span { color: var(--err); }
.sr-seg input[value="meeting"]:checked + span { color: var(--accent); }
.sr-seg input[value="won"]:checked + span { background: var(--ok); color: var(--bg); }
.sr-seg input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 1px; }
.sr-overview { position: sticky; top: calc(var(--nav-h) + 20px); display: grid; gap: 14px; padding: 20px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-lg); }
.sr-ov-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 600; }
.sr-ov-title .i { width: 15px; height: 15px; color: var(--accent); }
.sr-ov-title .tag { margin-inline-start: auto; }
.sr-ov-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.sr-ov-kpis > div { padding: 12px; border-radius: 12px; background: var(--bg-soft); }
.sr-ov-kpis dt { font-size: 12px; color: var(--ink-3); }
.sr-ov-kpis dd { margin: 2px 0 0; font-family: var(--font-display); font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sr-ov-kpis .is-won dd { color: var(--ok); }
.sr-ov-sub { margin: 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.sr-ov-bars { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sr-ov-bars li { display: grid; grid-template-columns: minmax(0, 1fr) 30px; grid-template-areas: "label score" "bar bar"; gap: 4px 8px; font-size: 13px; }
.sr-ov-bars span { grid-area: label; color: var(--ink-2); }
.sr-ov-bars b { grid-area: score; text-align: end; font-variant-numeric: tabular-nums; }
.sr-ov-bars i { grid-area: bar; display: block; width: var(--w); min-width: 4px; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--chip-5) 70%, var(--surface)); transition: width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.3s ease; }
.sr-ov-bars li.is-top span { font-weight: 600; color: var(--ink); }
.sr-ov-bars li.is-top i { background: var(--ok); }
.sr-ov-next { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--ok) 10%, var(--surface)); font-size: 14px; line-height: 1.45; }
.sr-ov-next .i { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--ok); }
.sr-ov-next b { color: var(--ok); }

/* ---------- Objections: cards to flip ---------- */
.sr-flips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; }
.sr-flip { display: grid; width: 100%; min-height: 230px; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: start; cursor: pointer; perspective: 1000px; }
.sr-flip-face { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 20px; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1); }
.sr-flip-face.is-front { border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); }
.sr-flip-face.is-back { justify-content: center; background: var(--deep); font-size: 15.5px; line-height: 1.55; color: var(--deep-ink); transform: rotateY(180deg); }
.sr-flip[aria-pressed="true"] .is-front { transform: rotateY(-180deg); }
.sr-flip[aria-pressed="true"] .is-back { transform: rotateY(0deg); }
.sr-flip:hover .is-front { border-color: var(--line-strong); }
.sr-flip:focus-visible .sr-flip-face { outline: 2px solid var(--ink); outline-offset: 3px; }
.sr-quote { font-family: var(--font-display); font-size: 52px; line-height: 0.7; color: var(--chip-5); }
.is-front b { font-family: var(--font-display); font-size: 19px; line-height: 1.3; letter-spacing: -0.02em; }
.is-front small { margin-top: auto; font-size: 13px; font-weight: 600; color: var(--ink-3); }
/* Without script both sides simply show. */
html:not(.js) .sr-flip-face { grid-area: auto; transform: none; }

/* ---------- It never talks to your customers ---------- */
.sr-never-card { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 20px 48px; padding: clamp(24px, 4vw, 40px); border-radius: var(--radius-lg); background: var(--deep); color: var(--deep-ink); }
.sr-never-card .pr-h2 { color: var(--deep-ink); }
.sr-never-card p { margin: 10px 0 0; color: var(--deep-ink-2); }
.sr-never-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.sr-never-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 15.5px; line-height: 1.45; }
.sr-never-list li::before { content: "×"; display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: color-mix(in srgb, var(--deep-ink) 14%, transparent); font-weight: 700; line-height: 1; }
.sr-dp { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin: 0 !important; padding-top: 14px; border-top: 1px solid var(--deep-line); font-size: 13.5px; }
.sr-dp .i { flex: none; width: 14px; height: 14px; }
.sr-price-extra { max-width: 760px; margin: 14px auto 0; font-size: 14px; text-align: center; color: var(--ink-2); }

@media (max-width: 960px) {
  .sr-map-grid, .sr-learn-grid, .sr-never-card { grid-template-columns: minmax(0, 1fr); }
  .sr-overview { position: static; }
  .sr-flips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sr-gen { max-width: 560px; justify-self: center; width: 100%; }
}
@media (max-width: 640px) {
  .sr-flips { grid-template-columns: minmax(0, 1fr); }
  .sr-flip { min-height: 190px; }
  .sr-weekrow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name value" "bar bar"; }
  .sr-legend { padding-inline-start: 0; }
  .sr-marks li { grid-template-columns: minmax(0, 1fr); }
  .sr-seg { justify-self: start; max-width: 100%; overflow-x: auto; }
  .sr-pick dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sr-gen-paper { padding: 18px; }
  .sr-brief-head { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .sr-flip-face, .sr-weekbar i, .sr-ov-bars i, .sr-pin, .sr-zone, .sr-seg span, .sr-fit i { transition: none; }
  .is-built .sr-brief > *, .is-in .sr-pin, .is-researching .sr-gen-paper::before, .is-researching .sr-gen-sources li::before { animation: none; }
}