.visually-hidden { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ================= HERO: split, copy at the start side, product at the end side ================= */
.hero { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5.5rem) clamp(4.5rem, 3rem + 5vw, 7rem); }
.hero-grid { display: grid; gap: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem); }
.hero-copy { max-width: 820px; }
.h1-line { display: block; text-wrap: balance; }
.hero-copy > * + * { margin-block-start: 1.25rem; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; padding-block-start: 0.5rem; }
.hero-visual { position: relative; padding-inline-end: clamp(0px, 9vw, 130px); padding-block-end: 4rem; }
@media (max-width: 767px) {
  .hero { padding-block: 1.75rem 2rem; }
  .hero-visual { padding-block-end: 0; }
}

/* ================= PROBLEM: inline points, no cards ================= */
.problem-points { list-style: none; padding: 0; display: grid; gap: 1.75rem; margin-block-start: clamp(2.25rem, 1.75rem + 2vw, 3.25rem); }
@media (min-width: 860px) { .problem-points { grid-template-columns: repeat(3, 1fr); gap: 0; } .problem-points li + li { border-inline-start: 1px solid var(--line); padding-inline-start: 2rem; } .problem-points li { padding-inline-end: 2rem; } }
.problem-points li { display: flex; gap: 1rem; align-items: flex-start; }
.problem-points .ti { flex: none; font-size: 1.6rem; color: var(--brand); margin-block-start: 0.15rem; }
.problem-points h3 { margin-block-end: 0.3rem; }
.problem-points p { color: var(--muted); }
.problem-punch { margin-block-start: clamp(2.5rem, 2rem + 2vw, 3.5rem); font-weight: 700; font-size: clamp(1.3rem, 1.1rem + 1vw, 1.85rem); line-height: 1.35; max-width: 32ch; text-wrap: balance; }

/* ================= HOW: sticky stage + steps ================= */
.how-layout { display: grid; gap: 2rem; margin-block-start: clamp(2.5rem, 2rem + 3vw, 4rem); }
@media (min-width: 960px) { .how-layout { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 1rem + 4vw, 5rem); } }
.how-stage { position: sticky; inset-block-start: 6rem; z-index: 2; align-self: start; }
.stage-card { position: relative; aspect-ratio: 5 / 4; border-radius: var(--radius-card); overflow: hidden; background: var(--bg-soft); border: 1px solid var(--line); }
.stage-layer {
  position: absolute; inset: 0; display: grid; place-items: center; padding: clamp(1rem, 0.6rem + 2vw, 2.25rem);
  opacity: 0; transform: translateY(14px); filter: blur(3px);
  transition: opacity 450ms var(--ease-out), transform 550ms var(--ease-out), filter 450ms var(--ease-out);
  pointer-events: none;
}
.stage-layer.is-active { opacity: 1; transform: none; filter: none; }

.chat { inline-size: min(100%, 420px); display: grid; gap: 0.75rem; }
.chat-head { display: flex; align-items: center; gap: 0.6rem; font-size: var(--fs-small); color: var(--muted); padding-block-end: 0.6rem; border-block-end: 1px solid var(--line); }
.bubble { padding: 0.85rem 1rem; border-radius: 18px; line-height: 1.55; max-inline-size: 92%; }
.bubble-owner { justify-self: end; background: var(--brand); color: var(--on-brand); border-end-end-radius: 6px; font-weight: 500; min-block-size: 3.2em; }
.bubble-icu { justify-self: start; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-end-start-radius: 6px; font-size: 0.95rem; opacity: 0; transform: translateY(6px); transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out); }
.bubble-icu.is-in { opacity: 1; transform: none; }
.caret { display: inline-block; inline-size: 2px; block-size: 1.05em; background: currentColor; vertical-align: text-bottom; margin-inline-start: 2px; animation: caret 1s steps(1) 5; }
@keyframes caret { 50% { opacity: 0; } }

.rule-card { inline-size: min(100%, 440px); padding: 1.25rem; border-radius: var(--radius-card); background: var(--bg); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.chip-live { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.2em 0.7em; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 600; background: var(--brand-soft); color: var(--brand-ink); }
.chip-live::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; background: currentColor; }
.rule-quote { margin-block: 0.9rem; font-weight: 600; font-size: 1.05rem; line-height: 1.5; }
.rule-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.rule-fields div { padding: 0.6rem 0.75rem; border-radius: var(--radius-input); background: var(--bg-soft); }
.rule-fields dt { font-size: var(--fs-xs); color: var(--muted); }
.rule-fields dd { margin: 0; font-weight: 600; font-size: 0.95rem; }
.rule-check { margin-block-start: 0.9rem; font-size: var(--fs-xs); color: var(--muted); display: flex; align-items: center; gap: 0.45em; }
.rule-check .ti { color: var(--brand); font-size: 1.1rem; }

.mini-phone { inline-size: min(100%, 360px); display: grid; gap: 0.75rem; }
.mini-notif, .mini-summary { padding: 0.95rem 1rem; border-radius: 16px; background: var(--bg); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.mini-notif strong { display: flex; align-items: center; gap: 0.4rem; }
.mini-notif strong::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--fail); }
.mini-notif p { color: var(--muted); font-size: 0.95rem; }
.mini-summary { box-shadow: none; }
.mini-summary span { font-size: var(--fs-xs); color: var(--muted); }

.how-steps { list-style: none; padding: 0; display: grid; }
.how-step { padding-block: clamp(2rem, 1rem + 10vh, 8rem); color: var(--subtle); transition: color 350ms ease; }
.how-step:first-child { padding-block-start: 1rem; }
.how-step h3 { font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.85rem); margin-block: 0.75rem 0.6rem; color: inherit; transition: color 350ms ease; }
.how-step p { max-width: 46ch; }
.how-step.is-active { color: var(--muted); }
.how-step.is-active h3 { color: var(--text); }
.step-num { display: inline-grid; place-items: center; inline-size: 2.1rem; block-size: 2.1rem; border-radius: 50%; border: 1.5px solid currentColor; font-weight: 600; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.how-step.is-active .step-num { border-color: var(--brand); color: var(--brand); }
@media (max-width: 959px) {
  .how-stage { inset-block-start: 4.75rem; }
  /* Layers share one grid cell, so the card is as tall as its tallest layer: nothing clips. */
  .stage-card { aspect-ratio: auto; display: grid; box-shadow: var(--shadow-2); background: var(--bg); border: 0; }
  .stage-layer { position: relative; inset: auto; grid-area: 1 / 1; padding: 1rem; align-items: start; }
  .rule-card { padding: 0.9rem; box-shadow: none; border: 0; }
  .rule-quote { margin-block: 0.6rem; font-size: 0.95rem; }
  .rule-fields { gap: 0.4rem; }
  .rule-fields div { padding: 0.45rem 0.6rem; }
  .rule-fields dd { font-size: 0.875rem; }
  .rule-check { margin-block-start: 0.6rem; }
  .how-step { padding-block: 2rem 20vh; }
  .how-step:last-child { padding-block-end: 2rem; }
}

/* ================= PRIVACY: claims + "what leaves the store" diagram ================= */
.privacy-layout { display: grid; gap: clamp(2.5rem, 2rem + 3vw, 4rem); align-items: center; }
@media (min-width: 960px) { .privacy-layout { grid-template-columns: 1.05fr 0.95fr; } }
.privacy-list { list-style: none; padding: 0; display: grid; gap: 1.4rem; margin-block-start: 2rem; }
.privacy-list li { display: flex; gap: 1rem; align-items: flex-start; }
.privacy-list .ti { flex: none; font-size: 1.5rem; color: var(--brand); margin-block-start: 0.15rem; }
.privacy-list h3 { margin-block-end: 0.2rem; }
.privacy-list p { color: var(--muted); }

.privacy-diagram { margin: 0; display: grid; justify-items: center; gap: 0; }
.store-box { inline-size: 100%; padding: 1.5rem; border-radius: var(--radius-card); background: var(--bg); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.store-box-label { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; font-size: var(--fs-small); color: var(--muted); }
.store-items { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-block: 1rem; }
.store-items span { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.85rem; border-radius: var(--radius-input); background: var(--bg-soft); font-weight: 600; font-size: var(--fs-small); }
.store-items .ti { color: var(--brand); font-size: 1.15rem; }
.store-box-note { font-size: var(--fs-small); color: var(--muted); }
.boundary { position: relative; block-size: 72px; inline-size: 100%; display: grid; place-items: center; }
.boundary::before { content: ""; position: absolute; inset-block: 0; left: 50%; border-inline-start: 2px dashed var(--line-strong); }
.boundary span { position: relative; padding: 0.2rem 0.75rem; border-radius: var(--radius-pill); background: var(--bg-soft); border: 1px solid var(--line); font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.event-card { inline-size: min(100%, 360px); padding: 0.9rem 1.1rem; border-radius: var(--radius-card); background: var(--bg); border: 1.5px solid var(--brand); }
.event-card dl { display: grid; grid-template-columns: repeat(3, auto); gap: 0.25rem 1.25rem; justify-content: space-between; margin: 0; }
.event-card dt { font-size: var(--fs-xs); color: var(--muted); }
.event-card dd { margin: 0; font-weight: 600; font-size: var(--fs-small); }
.event-quote { display: flex; align-items: center; gap: 0.4rem; margin-block-start: 0.7rem; padding-block-start: 0.7rem; border-block-start: 1px solid var(--line); font-size: var(--fs-xs); color: var(--muted); }
.event-quote .ti { color: var(--brand); font-size: 1rem; }
.privacy-diagram figcaption { margin-block-start: 0.9rem; font-size: var(--fs-small); color: var(--muted); text-align: center; }

/* ================= RULES: grouped by sense ================= */
.rules-groups { display: grid; gap: 1.25rem; margin-block-start: clamp(2.25rem, 1.75rem + 2vw, 3.25rem); }
@media (min-width: 960px) { .rules-groups { grid-template-columns: 1fr 1fr 1.15fr; align-items: start; } }
.rules-group { padding-block-start: 1.25rem; border-block-start: 2px solid var(--line); }
.rules-group h3 { display: flex; align-items: center; gap: 0.5rem; font-size: 1rem; color: var(--muted); margin-block-end: 1rem; }
.rules-group h3 .ti { font-size: 1.3rem; color: var(--brand); }
.rules-group ul { list-style: none; padding: 0; display: grid; gap: 1.1rem; }
.rules-group li { display: grid; gap: 0.15rem; }
.rules-group li b { font-weight: 600; }
.rules-group li span { color: var(--muted); }
.rules-group-both { border-block-start-color: var(--brand); padding: 1.25rem 1.4rem 1.4rem; background: var(--brand-soft); border-radius: 0 0 var(--radius-card) var(--radius-card); }
.rules-group-both h3 { color: var(--brand-ink); }
.rules-group-both > p { margin-block-start: 1.1rem; font-size: var(--fs-small); color: var(--brand-ink); }

/* ================= APP ================= */
.app-phones { display: grid; gap: 2rem; margin-block-start: clamp(2.5rem, 2rem + 3vw, 4rem); justify-items: center; }
@media (min-width: 900px) { .app-phones { grid-template-columns: repeat(3, 1fr); align-items: start; } .app-phone:nth-child(2) { margin-block-start: 2rem; } }
@media (max-width: 899px) {
  .app-phones { grid-auto-flow: column; grid-auto-columns: min(78%, 300px); justify-items: stretch; overflow-x: auto; scroll-snap-type: x mandatory; padding-block-end: 0.75rem; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: thin; }
  .app-phone { scroll-snap-align: center; }
}
.app-phone { margin: 0; inline-size: min(100%, 300px); }
.app-phone figcaption { margin-block-start: 1rem; text-align: center; font-size: var(--fs-small); color: var(--muted); }
.device { border-radius: 40px; padding: 10px; background: var(--device); box-shadow: var(--shadow-2); }
.device-screen { border-radius: 31px; background: #15181E; color: var(--device-text); padding: 2.4rem 1.1rem 1.4rem; min-block-size: 480px; display: flex; flex-direction: column; gap: 1rem; position: relative; overflow: hidden; }
.device-screen::before { content: ""; position: absolute; inset-block-start: 9px; left: 50%; transform: translateX(-50%); inline-size: 34%; block-size: 22px; border-radius: 999px; background: #000; }
.ui-top { display: flex; justify-content: space-between; align-items: baseline; }
.ui-title { font-weight: 700; font-size: 1.05rem; }
.ui-sub { font-size: var(--fs-xs); color: var(--device-muted); }
.score { display: grid; justify-items: center; padding: 1.1rem; border-radius: 20px; background: var(--device-2); }
.score-label { font-size: var(--fs-xs); color: var(--device-muted); }
.score-num { font-size: 3.2rem; line-height: 1.1; font-weight: 300; }
.score-delta { font-size: var(--fs-xs); color: var(--ok); }
.ui-rules { list-style: none; padding: 0; display: grid; }
.ui-rules li { display: flex; justify-content: space-between; padding-block: 0.6rem; border-block-end: 1px solid rgba(242, 244, 248, 0.08); font-size: 0.875rem; }
.ui-rules li:last-child { border-block-end: 0; }
.ui-rules b { font-weight: 500; }
.ui-alerts { list-style: none; padding: 0; display: grid; gap: 0.55rem; }
.ui-alerts li { display: flex; gap: 0.7rem; padding: 0.75rem; border-radius: 14px; background: var(--device-2); font-size: 0.8125rem; }
.ui-alerts i { flex: none; inline-size: 9px; block-size: 9px; border-radius: 50%; margin-block-start: 0.45rem; }
.ui-alerts b { display: block; font-weight: 600; font-size: 0.875rem; }
.ui-alerts span { color: var(--device-muted); }
.a-fail i { background: var(--fail); }
.a-ok i { background: var(--ok); }
.a-unknown i { background: var(--unknown); }
.ui-foot { margin-block-start: auto; text-align: center; font-size: var(--fs-xs); color: var(--device-muted); padding: 0.6rem; border-radius: 12px; border: 1px dashed rgba(242, 244, 248, 0.15); }
.ui-headline { font-size: 0.95rem; line-height: 1.5; }
.ui-headline b { display: block; font-size: 2.6rem; font-weight: 300; line-height: 1.1; color: var(--ok); }
.ui-chart { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; align-items: end; block-size: 110px; }
.ui-chart i { block-size: var(--v); border-radius: 6px 6px 3px 3px; background: #6C69E6; }
.ui-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; text-align: center; font-size: var(--fs-xs); color: var(--device-muted); margin-block-start: -0.4rem; }
.ui-insight { margin-block-start: auto; font-size: 0.8125rem; padding: 0.8rem; border-radius: 14px; background: var(--device-2); color: var(--device-text); }
.app-points { list-style: none; padding: 0; display: grid; gap: 1rem; margin-block-start: clamp(2.5rem, 2rem + 2vw, 3.5rem); color: var(--muted); }
@media (min-width: 860px) { .app-points { grid-template-columns: repeat(3, 1fr); gap: 0; } .app-points li { padding-inline: 1.5rem; } .app-points li + li { border-inline-start: 1px solid var(--line); } .app-points li:first-child { padding-inline-start: 0; } }
.app-points b { color: var(--text); display: block; }
.app-disclaimer { text-align: center; font-size: var(--fs-xs); color: var(--muted); margin-block-start: 1.75rem; }

/* ================= COST + FORM ================= */
.cost-grid { display: grid; gap: 1.5rem; margin-block-start: clamp(2rem, 1.5rem + 2vw, 3rem); align-items: start; }
@media (min-width: 960px) { .cost-grid { grid-template-columns: 0.85fr 1.15fr; gap: 2rem; } }
.calc { padding: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); border-radius: var(--radius-card); background: var(--bg-soft); display: grid; gap: 1.5rem; }
.calc-row { display: grid; grid-template-columns: 1fr auto; gap: 0.6rem 1rem; align-items: center; border: 0; padding: 0; min-inline-size: 0; }
.calc-row label, .calc-row legend { font-weight: 500; }
.calc-value { font-size: 1.1rem; font-weight: 700; color: var(--brand-ink); }
.calc-row input[type="range"] { grid-column: 1 / -1; inline-size: 100%; block-size: 44px; cursor: pointer; }
.calc-days legend { float: inline-start; padding: 0; }
.segmented { display: inline-flex; padding: 4px; border-radius: var(--radius-pill); background: var(--bg); border: 1px solid var(--line); gap: 2px; }
.segmented label { position: relative; }
.segmented input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.segmented span { display: grid; place-items: center; min-inline-size: 44px; min-block-size: 44px; border-radius: var(--radius-pill); font-weight: 600; font-variant-numeric: tabular-nums; transition: background-color var(--dur-ui) ease, color var(--dur-ui) ease; }
.segmented input:checked + span { background: var(--brand); color: var(--on-brand); }
.segmented input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.calc-result { border-block-start: 1px solid var(--line); padding-block-start: 1.5rem; display: grid; gap: 0.35rem; }
.calc-result-label { font-size: var(--fs-small); color: var(--muted); }
.calc-total { font-size: clamp(2.4rem, 1.9rem + 2.4vw, 3.4rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; }
.calc-note { font-size: var(--fs-xs); color: var(--muted); }

.form-card { padding: clamp(1.4rem, 1rem + 2vw, 2.5rem); border-radius: var(--radius-card); background: var(--bg); box-shadow: var(--shadow-2); }
.form-card > h3 { font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.6rem); line-height: 1.35; margin-block-end: 1.5rem; }
@media (max-width: 559px) { .form-actions .btn { inline-size: 100%; } }
.direct-contact { margin-block-start: 0.25rem; padding-block-start: 1rem; border-block-start: 1px solid var(--line); font-size: var(--fs-small); color: var(--muted); }
.direct-contact a { font-weight: 600; display: inline-flex; align-items: center; gap: 0.3rem; padding-block: 0.6rem; }

/* ================= COMPARE + FIT ================= */
.compare-table { margin-block-start: clamp(2rem, 1.5rem + 2vw, 3rem); border-radius: var(--radius-card); background: var(--bg); border: 1px solid var(--line); overflow: hidden; max-width: 940px; margin-inline: auto; }
.ct-row { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); align-items: center; border-block-end: 1px solid var(--line); }
.ct-row > * { padding: 0.95rem 0.6rem; text-align: center; }
.ct-row > [role="rowheader"] { text-align: start; font-weight: 500; padding-inline-start: 1.4rem; }
.ct-head > * { font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.ct-icu { background: var(--brand-soft); align-self: stretch; display: grid; place-items: center; }
.ct-head .ct-icu { color: var(--brand-ink); font-weight: 700; letter-spacing: 0.04em; }
.ct-row [role="cell"]::before, .ct-legend i { content: ""; display: inline-block; inline-size: 22px; block-size: 22px; border-radius: 50%; vertical-align: middle; }
.ct-row .y::before, .ct-legend .y { background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 70% no-repeat; }
.ct-row .n::before, .ct-legend .n { background: var(--bg-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355607A' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M8 8l8 8M16 8l-8 8'/%3E%3C/svg%3E") center / 70% no-repeat; box-shadow: inset 0 0 0 1px var(--line-strong); }
.ct-row .p::before, .ct-legend .p { background: conic-gradient(var(--brand) 0 50%, var(--bg-soft) 50% 100%); box-shadow: inset 0 0 0 1px var(--line-strong); }
.ct-legend { display: flex; gap: 1.25rem; justify-content: center; padding: 0.9rem; font-size: var(--fs-xs); color: var(--muted); }
.ct-legend span { display: inline-flex; align-items: center; gap: 0.45em; }
.ct-legend i { inline-size: 14px; block-size: 14px; }
@media (max-width: 640px) {
  .compare-table { overflow: clip; }
  .ct-head { position: sticky; inset-block-start: 68px; z-index: 1; background: var(--bg); box-shadow: 0 1px 0 var(--line); }
  .ct-row { grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 0.72fr)); }
  .ct-row > * { padding: 0.8rem 0.2rem; }
  .ct-row > [role="rowheader"] { padding-inline-start: 0.85rem; font-size: 0.875rem; line-height: 1.35; }
  .ct-head > * { font-size: 0.75rem; line-height: 1.25; }
  .ct-row [role="cell"]::before { inline-size: 18px; block-size: 18px; }
}
.fit-grid { display: grid; gap: 2rem; max-width: 940px; margin: clamp(2.5rem, 2rem + 2vw, 3.5rem) auto 0; }
@media (min-width: 760px) { .fit-grid { grid-template-columns: 1fr 1fr; } }
.fit-col h3 { margin-block-end: 0.9rem; }
.fit-col ul { list-style: none; padding: 0; display: grid; gap: 0.7rem; }
.fit-col li { display: flex; gap: 0.6rem; align-items: flex-start; }
.fit-col li .ti { flex: none; font-size: 1.2rem; line-height: 1.5; }
.fit-yes .ti { color: var(--brand); }
.fit-no li { color: var(--muted); }
.fit-no .ti { color: var(--subtle); }

/* ================= INCLUDED: strip ================= */
.included-strip { list-style: none; padding: 0; display: grid; gap: 1.75rem; margin-block-start: clamp(2rem, 1.5rem + 2vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.included-strip li { padding-block-start: 1.1rem; border-block-start: 2px solid var(--line); }
.included-strip .ti { font-size: 1.6rem; color: var(--brand); }
.included-strip h3 { font-size: 1.05rem; margin-block: 0.6rem 0.3rem; }
.included-strip p { color: var(--muted); font-size: var(--fs-small); }

/* ================= FAQ ================= */
.faq-layout { display: grid; gap: clamp(2rem, 1.5rem + 3vw, 4rem); }
@media (min-width: 960px) { .faq-layout { grid-template-columns: 0.7fr 1.3fr; } .faq .section-head { position: sticky; inset-block-start: 6.5rem; align-self: start; } }
.faq-list { display: grid; gap: 0.6rem; }
.faq-list details { border-radius: var(--radius-input); background: var(--bg); border: 1px solid var(--line); transition: border-color var(--dur-ui) ease; }
.faq-list details[open] { border-color: var(--line-strong); }
.faq-list summary { list-style: none; cursor: pointer; padding: 1.05rem 1.3rem; font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-block-size: 56px; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ""; flex: none; inline-size: 10px; block-size: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-3px); transition: transform 280ms var(--ease-out); }
.faq-list details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq-list details p { padding: 0 1.3rem 1.2rem; color: var(--muted); max-width: 62ch; }

/* ================= CLOSE ================= */
.close { background: var(--brand-soft); }
.close-layout { display: grid; gap: clamp(2rem, 1.5rem + 3vw, 4rem); align-items: center; }
@media (min-width: 960px) { .close-layout { grid-template-columns: 0.9fr 1.1fr; } }
.close-copy > * + * { margin-block-start: 1rem; }
.close .lead { color: var(--brand-ink); }

/* ---------- Development-stage labels ---------- */
.hero-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; margin-block-end: 1.1rem; padding: 0.3rem 0.85rem; border-radius: var(--radius-pill); background: var(--brand-soft); color: var(--brand-ink); font-size: var(--fs-small); font-weight: 600; }
.hero-eyebrow .dot { inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--brand); }
.ct-planned { display: block; font-size: 0.6875rem; font-weight: 500; opacity: 0.8; letter-spacing: 0; }