/* TheBenchHub · landing — direction "Loud and flat" (seed 1936931569) */

:root {
  --bg: #191919;
  --surface: #242424;
  --surface-2: #2e2e2e;
  --ink: #ffffff;
  --muted: #b4b4b4;
  --accent: #0c7866;
  --accent-ink: #ffffff;
  --red: #d71e1e;
  --blue: #1e4bd7;
  --teal: #0c7866;
  --yellow: #ffe927;
  --black: #111111;

  --font-display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --font-text: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;

  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);
  --step-display: clamp(2.5rem, 11.2vw, 12rem);

  --margin: clamp(1rem, 1.7vw, 1.5rem);
  --gutter: clamp(0.75rem, 1.6vw, 1.5rem);
  --pad: clamp(5rem, 10vw, 10rem);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-text); font-size: var(--step-body); line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, p, figure, ul, ol, dl, dd, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
img, video, svg { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
:target { scroll-margin-top: 1rem; }
::selection { background: var(--yellow); color: var(--black); }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--margin); top: -4rem; z-index: 10; background: var(--yellow); color: var(--black); padding: 0.75rem 1rem; text-decoration: none; }
.skip:focus { top: var(--margin); }

h1, h2 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.03em; line-height: 1; text-wrap: balance; }
h3 { font-weight: 500; }
p { text-wrap: pretty; }
.lead { font-size: var(--step-lead); line-height: 1.3; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding-inline: var(--margin); }

/* ---------- controls ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 3.5rem; padding: 0 1.75rem; background: var(--accent); color: var(--accent-ink); font-weight: 500; text-decoration: none; white-space: nowrap; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease; }
.button:active { transform: scale(0.97); }
.link { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.25em; text-decoration-thickness: 2px; transition: text-decoration-color var(--t-hover) ease; }
.link-plain { text-underline-offset: 0.2em; text-decoration-thickness: 2px; }
@media (hover: hover) and (pointer: fine) {
  .button:hover { background: var(--black); color: var(--yellow); }
  .link:hover { text-decoration-color: currentColor; }
}

/* ---------- app screens: the product, drawn in HTML with sample data ---------- */
.screen { --paper: #f3f2ed; display: flex; flex-direction: column; background: var(--paper); color: var(--black); font-size: 0.875rem; line-height: 1.25; overflow: hidden; font-variant-numeric: tabular-nums; }
.screen p, .screen ul { margin: 0; }
.scr-bar { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; padding: 0.7rem 0.75rem; background: var(--black); color: var(--ink); font-size: 0.8125rem; }
.scr-bar b { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; font-size: 0.875rem; }
.scr-bar span { color: var(--muted); white-space: nowrap; }
.scr-sub { padding: 0.6rem 0.75rem 0.45rem; color: #4d4d4d; font-size: 0.8125rem; }
.scr-rows { display: flex; flex-direction: column; gap: 3px; padding: 0 0.5rem 0.5rem; }
.scr-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: 2.35rem; padding: 0.35rem 0.5rem; background: #fff; }
.scr-row > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.scr-row small { color: #5a5a5a; font-size: 0.8125rem; }
.scr-row.is-out > span:first-child { color: #5a5a5a; }
.num { font-weight: 500; }
.chip { flex: none; padding: 0.22rem 0.45rem; font-size: 0.8125rem; font-weight: 500; white-space: nowrap; }
.chip.ok { background: var(--teal); color: var(--ink); }
.chip.warn { background: var(--yellow); color: var(--black); }
.chip.no { background: var(--red); color: var(--ink); }
.chip.blue { background: var(--blue); color: var(--ink); }
.pga { display: flex; gap: 3px; flex: none; }
.pga i { width: 1.6rem; height: 1.6rem; display: grid; place-items: center; font-style: normal; font-size: 0.8125rem; font-weight: 500; background: #e6e4dc; color: #4d4d4d; }
.pga .on-p { background: var(--teal); color: var(--ink); }
.pga .on-g { background: var(--yellow); color: var(--black); }
.pga .on-a { background: var(--red); color: var(--ink); }
.tick { display: inline-block; width: 0.85rem; height: 0.85rem; margin-right: 0.45rem; vertical-align: -0.1em; border: 2px solid #999; }
.tick.on { background: var(--teal); border-color: var(--teal); }
.scr-row:has(.tick) > span:first-child { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meter { display: flex; align-items: center; gap: 0.4rem; flex: none; font-weight: 500; }
.meter i { position: relative; display: block; width: 3rem; height: 0.4rem; background: #e6e4dc; }
.meter i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 1%); background: var(--teal); }
.scr-btn { margin: auto 0.5rem 0.5rem; padding: 0.7rem 0.75rem; background: var(--black); color: var(--ink); font-weight: 500; text-align: center; }
.scr-toast { margin: 0.5rem 0.5rem 0.4rem; padding: 0.55rem 0.6rem; background: var(--yellow); color: var(--black); font-size: 0.8125rem; font-weight: 500; }
.scr-match { display: flex; gap: 0.75rem; align-items: center; padding: 0.75rem; }
.scr-day { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; flex: none; background: var(--red); color: var(--ink); font-family: var(--font-display); font-weight: 800; font-size: 1.375rem; line-height: 1; }
.scr-day span { font-family: var(--font-text); font-weight: 500; font-size: 0.8125rem; text-transform: uppercase; }
.scr-opp { font-weight: 500; }
.scr-match s { color: #5a5a5a; }
.scr-log .scr-row { display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 0.5rem; padding: 0.55rem 0.6rem; }
.scr-log time { grid-column: 1 / -1; color: #5a5a5a; font-size: 0.8125rem; }
.scr-log .scr-row > span:first-child { display: block; }
.scr-log .chip { align-self: start; }
@media (min-width: 48em) {
  .scr-log .scr-row { grid-template-columns: 9.5rem 1fr auto; align-items: center; }
  .scr-log time { grid-column: auto; }
}

/* ---------- header ---------- */
.top { position: absolute; inset: 0 0 auto 0; z-index: 5; display: flex; justify-content: space-between; align-items: baseline; padding: calc(var(--margin) + env(safe-area-inset-top, 0px)) var(--margin) 0; font-size: var(--step-small); }
.wordmark { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; text-decoration: none; font-size: var(--step-small); }
.nav-links { display: none; gap: 1.75rem; }
.nav-menu { position: relative; }
.nav-menu summary { list-style: none; cursor: pointer; min-height: 44px; display: flex; align-items: center; text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 2px; }
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu ul { position: absolute; right: 0; top: 100%; min-width: 14rem; background: var(--black); padding: 0.5rem 0; }
.nav-menu a { display: block; padding: 0.75rem 1rem; text-decoration: none; font-size: var(--step-body); }
.wm-accent { color: var(--black); }
.nav { display: flex; align-items: center; gap: 1rem; }
.login { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1rem; background: var(--black); color: var(--ink); font-weight: 500; text-decoration: none; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease; }
.login:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .login:hover { background: var(--yellow); color: var(--black); }
}
@media (min-width: 48em) {
  .nav { gap: 1.75rem; }
  .nav-links { display: flex; }
  .nav-menu { display: none; }
}

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100svh; background: var(--red); color: var(--ink); display: grid; grid-template-rows: 14svh auto 1fr auto; padding: 0 var(--margin) calc(1.25rem + env(safe-area-inset-bottom, 0px)); overflow: hidden; }
.hero-title { grid-row: 2; font-size: var(--step-display); line-height: 0.9; letter-spacing: -0.04em; }
.lines .line { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.lines [data-line] { display: block; }
.hero-flag { grid-row: 3; justify-self: end; align-self: center; width: min(68vw, 17rem); margin: 1.5rem 4vw 1.5rem 0; transform: rotate(-4deg); }
.hero-foot { grid-row: 4; display: flex; flex-direction: column; gap: 1.25rem; }
.hero-sentence { max-width: 30ch; font-size: var(--step-body); line-height: 1.4; }
.hero-foot .button { width: 100%; }
@media (min-width: 48em) {
  .hero { grid-template-rows: 15svh auto 1fr auto; padding-bottom: 1.75rem; }
  .line-right { text-align: right; }
  .hero-flag { width: clamp(15rem, 19vw, 18rem); margin: 2rem 20vw 2rem 0; transform: rotate(3deg); }
  .hero-foot { flex-direction: row; justify-content: space-between; align-items: flex-end; }
  .hero-sentence { max-width: 40ch; font-size: var(--step-lead); }
  .hero-foot .button { width: auto; min-height: 4rem; padding: 0 2.25rem; font-size: var(--step-lead); }
}

/* ---------- the week (features) ---------- */
.week { background: var(--blue); color: var(--ink); padding-block: clamp(4rem, 7vw, 7rem); }
.week-title { grid-column: 1 / -1; position: sticky; top: 0; z-index: 2; background: var(--blue); padding-block: 0.75rem; margin-inline: calc(var(--margin) * -1); padding-inline: var(--margin); font-size: var(--step-head); }
.week-blocks { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 4.5rem; margin-top: 2rem; }
.block-title { font-size: var(--step-lead); line-height: 1.2; margin-bottom: 1.25rem; }
.block-row { display: grid; gap: 1.25rem; }
.block-pic { width: 100%; max-width: 24rem; }
.block-list { display: grid; gap: 0.75rem; font-size: var(--step-body); line-height: 1.4; }
@media (min-width: 60em) {
  .week-title { grid-column: 1 / 6; align-self: start; top: 2rem; margin: 0; padding: 0; line-height: 0.95; }
  .week-blocks { grid-column: 7 / 13; gap: 5rem; margin-top: 0; }
  .block-row { grid-template-columns: clamp(15rem, 19vw, 18rem) 1fr; gap: 2rem; align-items: start; }
  .block-row.flip { grid-template-columns: 1fr clamp(15rem, 19vw, 18rem); }
  .block-row.flip .block-pic { order: 2; }
  .block-pic { max-width: none; }
  .block-list { gap: 0.875rem; }
}

/* ---------- the call-up board (live) ---------- */
.board-section { background: var(--bg); padding-top: var(--pad); overflow: hidden; }
.board-head { padding-inline: var(--margin); display: grid; gap: 1.25rem; margin-bottom: 2.5rem; }
.board-match { font-size: var(--step-lead); line-height: 1.3; max-width: 40ch; }
.soft { color: var(--ink); }
.board-controls { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.control { min-height: 3rem; padding: 0 1.25rem; background: var(--yellow); color: var(--black); font-weight: 500; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease; }
.control:active { transform: scale(0.97); }
.control-alt { background: var(--surface-2); color: var(--ink); }
.control-alt[aria-pressed="false"] { background: var(--ink); color: var(--black); }
.board-count { width: 100%; margin-top: 0.5rem; font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) {
  .control:hover { background: var(--ink); }
  .control-alt:hover { background: #3a3a3a; }
  .control-alt[aria-pressed="false"]:hover { background: var(--yellow); }
}
@media (min-width: 48em) {
  .board-head { grid-template-columns: 1fr auto; align-items: end; }
  .board-count { width: auto; margin: 0 0 0 1rem; }
}

.board { padding-inline: 0.5rem; display: flex; flex-direction: column; gap: 4px; font-variant-numeric: tabular-nums; }
.board-rows { display: flex; flex-direction: column; gap: 4px; }
.row { background: var(--surface); transition: background-color var(--t-hover) ease; }
.board { overflow: hidden; }
.row-ghost { height: 64px; }
.row-ghost:first-child { margin-top: -32px; }
.row-ghost:last-child { margin-bottom: -32px; }
.row-btn { width: 100%; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.5rem 0.5rem 0.5rem 1rem; text-align: left; }
.r-name { font-size: var(--step-lead); line-height: 1.15; font-weight: 500; }
.r-fact { display: none; }
.r-status { flex: none; display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.75rem; font-size: var(--step-small); font-weight: 500; }
.s-ok { background: var(--blue); color: var(--ink); }
.s-in { background: var(--yellow); color: var(--black); }
.s-no { background: var(--red); color: var(--ink); }
.row-detail { display: none; padding: 0 1rem 1.25rem; font-size: var(--step-body); line-height: 1.45; }
.row-detail p { max-width: 52ch; }
.row-detail p + p { margin-top: 0.4rem; }
.row-detail .toggle { margin-top: 1rem; min-height: 3rem; padding: 0 1.25rem; background: var(--ink); color: var(--black); font-weight: 500; transition: transform var(--t-press) var(--ease-out); }
.row-detail .toggle:active { transform: scale(0.97); }
.row-detail .toggle[disabled] { background: transparent; color: var(--ink); text-decoration: line-through; cursor: not-allowed; padding: 0; min-height: 0; }
.row.is-open { background: var(--accent); }
.row.is-open .row-detail { display: block; }
.row.is-open .r-name { font-size: var(--step-lead); }
@media (hover: hover) and (pointer: fine) {
  .row:not(.is-open):hover { background: var(--surface-2); }
  .row-detail .toggle:hover { background: var(--yellow); }
}
@media (min-width: 60em) {
  .board { padding-inline: 0.75rem; }
  .row-btn { min-height: 72px; height: auto; display: grid; grid-template-columns: 4fr 2fr 1fr 3.2fr 2.4fr; gap: var(--gutter); padding: 0.5rem 0.5rem 0.5rem 1.25rem; }
  .row-ghost { height: 72px; }
  .row-ghost:first-child { margin-top: -36px; }
  .row-ghost:last-child { margin-bottom: -36px; }
  .r-name { font-size: var(--step-lead); }
  .r-fact { display: block; font-size: var(--step-lead); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .r-status { white-space: nowrap; }
  .r-rate { text-align: right; padding-right: 1rem; }
  .r-status { justify-self: stretch; justify-content: flex-start; min-height: 3.5rem; font-size: var(--step-body); padding: 0 1rem; }
  .row-detail { padding: 0.5rem 1.25rem 1.75rem; min-height: 9rem; }
  .row-detail .facts-line { display: none; }
}

/* ---------- how it works: one bar ---------- */
.how { background: var(--yellow); color: var(--black); padding: var(--pad) var(--margin); }
.how-title { font-size: var(--step-head); line-height: 0.95; max-width: 14ch; margin-bottom: 4rem; }
.bar { display: flex; flex-direction: column; gap: 6px; }
.seg { display: flex; flex-direction: column; }
.seg-time { display: block; padding: 1.25rem; font-size: var(--step-lead); font-weight: 500; line-height: 1.15; color: var(--ink); min-height: calc(4.5rem + var(--g) * 1.5rem); }
.seg-text { padding: 1rem 0 0.75rem; font-size: var(--step-body); max-width: 30ch; }
.seg-1 .seg-time { background: var(--red); }
.seg-2 .seg-time { background: var(--blue); }
.seg-3 .seg-time { background: var(--teal); }
.seg-4 .seg-time { background: var(--black); }
@media (min-width: 60em) {
  .bar { flex-direction: row; }
  .seg { flex: var(--g) 1 0; min-width: 12%; }
  .seg-time { height: 22vh; min-height: 10rem; }
  .seg-text { max-width: 22ch; }
}

/* ---------- trust (about) ---------- */
.trust { padding-block: var(--pad); background: var(--bg); }
.trust-title { grid-column: 1 / -1; font-size: var(--step-head); line-height: 0.98; max-width: 16ch; }
.trust-lead { grid-column: 1 / -1; margin-top: 1.5rem; max-width: 44ch; }
.trust-photo { grid-column: 1 / -1; margin-top: 3rem; position: relative; }
.trust-img { font-size: 0.875rem; }
.trust-note { margin-top: 1rem; font-size: var(--step-body); max-width: 52ch; }
.trust-side { grid-column: 1 / -1; margin-top: 3rem; }
.consent { background: var(--teal); padding: 1.5rem; aspect-ratio: 3 / 2; display: flex; flex-direction: column; }
.consent-title { font-size: var(--step-lead); font-weight: 500; }
.consent-scope { margin-top: 0.25rem; }
.consent-time { margin-top: auto; font-size: var(--step-lead); line-height: 1.2; font-variant-numeric: tabular-nums; }
.consent-revoke { align-self: flex-start; margin-top: 1rem; min-height: 3rem; padding: 0 1.25rem; background: var(--ink); color: var(--black); font-weight: 500; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease; }
.consent-revoke:active { transform: scale(0.97); }
.consent.is-revoked { background: var(--surface); }
@media (hover: hover) and (pointer: fine) { .consent-revoke:hover { background: var(--yellow); } }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem var(--gutter); margin-top: 1.5rem; }
.facts dt { color: var(--muted); font-size: var(--step-small); }
.facts dd { font-size: var(--step-body); font-weight: 500; }
@media (min-width: 60em) {
  .trust-lead { grid-column: 1 / 7; }
  .trust-photo { grid-column: 1 / 9; margin-top: 4.5rem; }
  .trust-img { font-size: 0.9375rem; }
  .trust-note { max-width: 52ch; }
  .trust-side { grid-column: 9 / 13; margin-top: 4.5rem; }
  .consent { aspect-ratio: auto; min-height: 15rem; }
}

/* ---------- pricing: the ticket ---------- */
.pricing { background: var(--blue); padding: var(--pad) var(--margin); }
.ticket { --notch: 28px; position: relative; display: grid; grid-template-rows: auto auto; background: var(--yellow); color: var(--black); }
.ticket::before, .ticket::after { content: ""; position: absolute; width: var(--notch); height: var(--notch); border-radius: 50%; background: var(--blue); }
.ticket::before { left: calc(var(--notch) / -2); top: var(--seam, 60%); transform: translateY(-50%); }
.ticket::after { right: calc(var(--notch) / -2); top: var(--seam, 60%); transform: translateY(-50%); }
.ticket-main { padding: 1.5rem 1.25rem 2rem; display: flex; flex-direction: column; gap: 1.5rem; }
.ticket-title { font-size: var(--step-head); line-height: 1; max-width: 12ch; }
.tiers { display: flex; flex-wrap: wrap; gap: 6px; }
.tiers label { position: relative; }
.tiers input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tiers span { display: inline-flex; align-items: center; min-height: 3rem; padding: 0 1.25rem; background: rgba(17, 17, 17, 0.1); font-weight: 500; transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.tiers input:checked + span { background: var(--black); color: var(--yellow); }
.tiers input:focus-visible + span { outline: 3px solid var(--black); outline-offset: 3px; }
.tiers label:active span { transform: scale(0.97); }
.ticket-lines { display: grid; gap: 0.5rem; font-size: var(--step-body); }
.ticket-stub { position: relative; padding: 3.5rem 1.25rem 1.25rem; display: flex; flex-direction: column; align-items: center; text-align: center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Ccircle cx='7' cy='7' r='3' fill='%231e4bd7'/%3E%3C/svg%3E"); background-size: 14px 14px; background-repeat: repeat-x; background-position: 0 0; }
.price { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.04em; font-size: var(--step-head); line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.price-note { margin-top: 0.5rem; font-size: var(--step-body); }
.button-bar { width: 100%; margin-top: 1.5rem; min-height: 3.5rem; }
@media (hover: hover) and (pointer: fine) { .tiers label:hover span { background: rgba(17, 17, 17, 0.2); } .tiers input:checked + span { background: var(--black); } }
@media (min-width: 60em) {
  .ticket { width: 68vw; aspect-ratio: 2.3 / 1; margin-inline: auto; grid-template-columns: 6.4fr 3.6fr; grid-template-rows: none; }
  .ticket::before { left: calc(64% - var(--notch) / 2); top: calc(var(--notch) / -2); transform: none; }
  .ticket::after { left: calc(64% - var(--notch) / 2); right: auto; top: auto; bottom: calc(var(--notch) / -2); transform: none; }
  .ticket-main { padding: 2.5rem; justify-content: space-between; }
    .ticket-lines { grid-template-columns: 1fr 1fr; gap: 0.5rem 2rem; }
  .ticket-stub { justify-content: center; padding: 2.5rem 2rem; background-repeat: repeat-y; background-position: -7px 0; }
  }

/* ---------- faq: index cards ---------- */
.faq { background: var(--bg); padding: var(--pad) var(--margin); }
.faq-title { font-size: var(--step-head); line-height: 1; margin-bottom: 3rem; }
.cards { display: flex; flex-direction: column; }
.card { --tab-w: 7.5rem; --tab-h: 2.5rem; --step: 3rem; --off: calc(var(--x) * var(--step)); position: relative; margin-top: calc(var(--tab-h) * -1 + 4px); padding-top: var(--tab-h); clip-path: polygon(var(--off) 0, calc(var(--off) + var(--tab-w)) 0, calc(var(--off) + var(--tab-w)) var(--tab-h), 100% var(--tab-h), 100% 100%, 0 100%, 0 var(--tab-h), var(--off) var(--tab-h)); }
.card:first-child { margin-top: 0; }
.card:nth-child(3n + 1) { background: var(--red); color: var(--ink); }
.card:nth-child(3n + 2) { background: var(--teal); color: var(--ink); }
.card:nth-child(3n + 3) { background: var(--yellow); color: var(--black); }
.card summary { list-style: none; cursor: pointer; display: block; min-height: 5.5rem; padding: 0 1.25rem 1.25rem; }
.card summary::-webkit-details-marker { display: none; }
.tab { position: absolute; top: 0; left: var(--off); width: var(--tab-w); height: var(--tab-h); display: flex; align-items: center; padding-inline: 0.875rem; font-size: var(--step-body); font-weight: 500; }
.q { display: block; padding-top: 0.75rem; font-size: var(--step-lead); font-weight: 500; line-height: 1.25; }
.card summary:focus-visible { outline: none; }
.card summary:focus-visible .q { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.2em; }
.a { padding: 0 1.25rem 2rem; max-width: 50ch; font-size: var(--step-body); }
@media (hover: hover) and (pointer: fine) { .card:not([open]) summary:hover .q { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; } }
@media (min-width: 60em) {
  .faq-title, .cards { margin-left: calc((100% + var(--gutter)) / 12 * 2); width: calc((100% + var(--gutter)) / 12 * 8 - var(--gutter)); }
  .card { --tab-w: 12.5rem; --step: 9.375rem; }
  .card summary { min-height: 6rem; padding: 0 2rem 1.5rem; }
  .a { padding: 0 2rem 2.5rem; }
}

/* ---------- cta: one word is the button ---------- */
.cta { background: var(--accent); }
.cta-link { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 46svh; padding: 1.25rem var(--margin) 1.5rem; color: var(--ink); background: var(--accent); text-decoration: none; overflow: hidden; }
.cta-sentence { max-width: 30ch; padding-right: 3rem; font-size: var(--step-body); line-height: 1.4; }
.cta-arrow { position: absolute; top: 1.25rem; right: var(--margin); width: 2rem; height: 2rem; transition: transform 240ms var(--ease-out); }
.cta-word { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.05em; font-size: 23vw; line-height: 0.8; white-space: nowrap; margin-left: -0.04em; }
.cta-link:focus-visible { outline-offset: -6px; }
@media (hover: hover) and (pointer: fine) {
  .cta-link:hover { background: var(--ink); color: var(--accent); }
  .cta-link:hover .cta-arrow { transform: translate(4px, -4px); }
}
.cta-link:active .cta-word { transform: scale(0.99); }
@media (min-width: 48em) {
  .cta-link { min-height: 60svh; }
  .cta-sentence { font-size: var(--step-lead); max-width: 34ch; }
  .cta-arrow { width: 3rem; height: 3rem; }
}

/* ---------- footer ---------- */
.foot { position: relative; min-height: 88svh; background: var(--ink); color: var(--black); display: flex; flex-direction: column; overflow: hidden; padding: var(--pad) var(--margin) 0; }
.foot-top { display: grid; gap: 2.5rem; }
.foot-title { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.03em; font-size: var(--step-head); line-height: 1; max-width: 11ch; margin-bottom: 1.75rem; }
.foot-invite .button { width: 100%; }
.foot-actions { display: grid; gap: 0.75rem; }
.button-quiet { background: var(--black); color: var(--ink); }
.foot-links { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; font-size: var(--step-body); }
.foot-links a { display: inline-flex; min-height: 44px; align-items: center; }
.foot-bottom { margin-top: auto; padding-top: 5rem; display: grid; gap: 1.5rem; }
.credits { font-size: var(--step-small); max-width: 62ch; }
.legal { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--step-small); }
.foot-mark { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.05em; font-size: max(var(--step-display), 17vw); line-height: 0.8; white-space: nowrap; margin: 1rem 0 0 -0.04em; transform: translateY(24%); color: var(--red); }
@media (min-width: 48em) {
  .foot-top { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .foot-invite { grid-column: 1 / 8; }
  .foot-invite .button { width: auto; }
  .foot-actions { display: flex; flex-wrap: wrap; }
  .foot-links { grid-column: 10 / 13; flex-direction: column; gap: 0.25rem; }
  .foot-mark { font-size: var(--step-display); transform: translateY(26%); }
}

/* ---------- motion (content stays visible without script or with reduced motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .lines [data-line] { transform: translateY(105%); animation: line-up 900ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 110ms + 150ms); }
  .js [data-rise] { opacity: 0; transform: translateY(20px); animation: rise 800ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 90ms + 520ms); }
  .js .hero-flag { animation: flag-in 1000ms var(--ease-out) 380ms both; }
  .js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .row.is-flash { animation: flash 600ms var(--ease-out); }
  .js .seg[data-reveal] { transform: translateY(28px); }
}
@keyframes line-up { to { transform: none; } }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes flag-in { from { opacity: 0; transform: translateY(40px) rotate(14deg); } }
@keyframes flash { from { background: var(--yellow); } }