/* SecretlyBlue: page layout. Tokens come from tokens.css, components from components.css. */

@font-face { font-family: "Sora"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../fonts/Sora-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../fonts/Sora-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Rethink Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/RethinkSans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Rethink Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/RethinkSans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Roboto only for the OnlyFans chat demo (.sb-chat) */
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/Roboto-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/Roboto-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/Roboto-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/Roboto-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root {
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --pad: clamp(20px, 4vw, 56px);
  /* One content width and one left edge for header, hero copy, sections and footer */
  --content-w: min(1320px, calc(100vw - 2 * (16px + var(--pad))));
  --header-h: 76px;
  --ease: cubic-bezier(.2, 0, 0, 1);
  /* Type scale: the only font sizes on the page. Exceptions: form controls 16px (no iOS zoom), the iOS notification replica (.notif*), the 404 numeral, the .unread badge (em) */
  --fs-display-xl: clamp(44px, 27.7px + 4.19vw, 88px);  /* H1 in hero only */
  --fs-display-l: clamp(36px, 25.6px + 2.67vw, 64px);   /* big numbers + at most 3 key H2s */
  --fs-heading-l: clamp(30px, 24.8px + 1.33vw, 44px);   /* all other section H2s */
  --fs-heading-m: clamp(22px, 19.8px + 0.57vw, 28px);   /* H3, card titles in larger cards, platform names */
  --fs-heading-s: 20px;                                 /* FAQ questions, timeline step titles, leak card titles, security list titles, legal h2 */
  --fs-body-l: clamp(17px, 15.9px + 0.29vw, 20px);      /* lead paragraphs */
  --fs-body: 17px;                                      /* running text, accordion answers */
  --fs-body-s: 15px;                                    /* lists, card text, tables, chat bubbles, nav and footer links, terms text */
  --fs-label: 14px;                                     /* labels above headings, chips, table headers, field labels, small bold titles */
  --fs-caption: 13px;                                   /* help text, captions, footnotes, chart tick labels, timestamps */
}

/* ---------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; min-height: 100vh; background: var(--surface); color: var(--ink); font: 400 var(--fs-body)/1.4 var(--font-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
picture { display: block; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
button, input, select { font: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--on-accent); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--gutter-l); top: -100px; z-index: 100; padding: 12px 18px; border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
[hidden] { display: none !important; }

/* ---------- type */
.h2 { font: 600 var(--fs-heading-l)/1.01 var(--font-display); letter-spacing: -0.025em; color: var(--ink); text-wrap: balance; }
.h2--xl { font-size: var(--fs-display-l); }
.h2 span, .hero__title span { color: var(--accent-text); }
.lead { font-size: var(--fs-body-l); line-height: 1.4; color: var(--ink-soft); max-width: 60ch; text-wrap: pretty; }
p { text-wrap: pretty; }
.sb-label { margin: 0; }
.lines { list-style: none; margin: 0; padding: 0; }
.lines li { padding: 13px 0; border-top: 1px solid var(--line); font-size: var(--fs-body-s); line-height: 1.45; color: var(--ink-soft); }
.lines li:last-child { border-bottom: 1px solid var(--line); }
/* bar under a sideways scroller on phones (moved by main.js); each section shows it at its own breakpoint */
.swipe-progress { display: none; position: relative; height: 3px; margin-top: 20px; border-radius: 2px; background: var(--line); overflow: hidden; }
.swipe-progress span { position: absolute; inset: 0 auto 0 0; width: 30%; border-radius: inherit; background: var(--ink); }
/* Component sizes that are off the scale in components.css, mapped onto it */
.sb-note b { font-size: var(--fs-caption); }
.sb-price__num { font-size: var(--fs-display-l); }

/* ---------- layout */
.container { width: var(--content-w); margin-inline: auto; }
.sheet { margin-inline: var(--gutter-l) var(--gutter-r); border-radius: var(--radius-xl); background: var(--surface); color: var(--ink); }
.section { padding-block: clamp(64px, 8vw, 104px); }
.section--key { padding-block: clamp(80px, 10vw, 144px); }
.sheet > .section + .section { padding-top: 0; }
.band { padding-block: clamp(80px, 9vw, 128px); background: var(--surface); color: var(--ink); }
.band--key { padding-block: clamp(88px, 10vw, 152px); }
.head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 820px; margin-bottom: clamp(40px, 5vw, 64px); }
.head--center { align-items: center; text-align: center; margin-inline: auto; }
.head--center .lead { margin-inline: auto; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll:focus-visible { outline-offset: 4px; }

/* ---------- header */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--surface); transition: box-shadow 200ms var(--ease); }
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--line); }
.site-header__inner { display: flex; align-items: center; gap: 40px; width: var(--content-w); height: var(--header-h); margin-inline: auto; }
.site-header__logo { flex: none; border-radius: 8px; }
.site-header__logo .logo { height: 30px; width: auto; }
.site-nav { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-nav__links { display: flex; gap: clamp(20px, 2.4vw, 36px); list-style: none; margin: 0 auto; padding: 0; }
.site-nav__links a { font: 500 var(--fs-body-s)/1 var(--font-text); color: var(--ink-soft); text-decoration: none; padding: 10px 2px; transition: color 150ms var(--ease); }
.site-nav__links a:hover { color: var(--ink); }
.site-nav__side { display: flex; align-items: center; gap: 20px; }
.lang { display: flex; align-items: center; gap: 6px; font: 600 var(--fs-label)/1 var(--font-text); color: var(--ink-muted); }
.lang__current { color: var(--ink); }
.lang a { color: var(--ink-soft); text-decoration: none; padding: 12px 4px; }
.lang a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.header-cta { display: none; margin-left: auto; }
.menu-btn { display: none; width: 44px; height: 44px; margin-left: auto; place-items: center; border: 0; border-radius: var(--radius-pill); background: var(--surface-raised); color: var(--ink); cursor: pointer; }
.menu-btn svg { width: 22px; height: 22px; }
.menu-btn path { transition: transform 200ms var(--ease); transform-origin: 12px 12px; }
.menu-btn[aria-expanded="true"] .menu-btn__a { transform: translateY(4px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__b { transform: translateY(-4px) rotate(-45deg); }

@media (max-width: 959px) {
  .menu-btn { display: grid; margin-left: 0; }
  .header-cta { display: inline-flex; }
  .site-header__inner { gap: 10px; }
  .site-header__logo .logo { height: 24px; }
  .site-nav { position: fixed; inset: calc(var(--header-h) + env(safe-area-inset-top, 0px)) 0 0 0; display: none; flex-direction: column; align-items: stretch; justify-content: space-between; padding: 24px calc(var(--gutter-r) + 8px) calc(32px + env(safe-area-inset-bottom, 0px)) calc(var(--gutter-l) + 8px); background: var(--surface); overflow-y: auto; }
  .site-header.is-open .site-nav { display: flex; }
  .site-nav__links { flex-direction: column; gap: 0; margin: 0; }
  .site-nav__links a { display: block; padding: 18px 0; border-bottom: 1px solid var(--line); font: 600 var(--fs-heading-m)/1.2 var(--font-display); letter-spacing: -0.02em; color: var(--ink); }
  .site-nav__side { flex-direction: column; align-items: stretch; gap: 16px; }
  .site-nav__side .sb-btn { min-height: 52px; }
  .lang { justify-content: center; }
  body.menu-open { overflow: hidden; }
}

/* ---------- 1 hero */
.hero { padding: 4px var(--gutter-r) clamp(40px, 5vw, 64px) var(--gutter-l); }
.hero__stage { position: relative; display: flex; flex-direction: column; }
.hero__copy { display: contents; }
.hero__head { order: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; width: var(--content-w); align-self: center; padding: 20px 0 24px; }
.hero__frame { order: 2; }
.hero__body { order: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; width: var(--content-w); align-self: center; padding: 24px 0 4px; }
.hero__title { font: 600 var(--fs-display-xl)/1.01 var(--font-display); letter-spacing: -0.025em; color: var(--ink); text-wrap: balance; }
/* A title with a forced break keeps exactly two lines: the longer half ("správy zarábajú.") is 7.51em in GC Furion (about 7.82em in the Sora fallback), so the size is capped at column width / 7.9 (re-measure if the display font or letter-spacing changes) */
.hero__title:has(br) { font-size: min(var(--fs-display-xl), var(--content-w) / 7.9); }
.hero__lead { max-width: 50ch; font-size: var(--fs-body-l); line-height: 1.4; color: var(--ink-soft); }
.hero__ctas { display: flex; align-items: center; gap: 16px 28px; flex-wrap: wrap; margin-top: 4px; }
.hero__frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-xl); overflow: hidden; background: linear-gradient(180deg, var(--brand-night) 0%, var(--brand-night) 38%, var(--brand-horizon) 80%, var(--brand-blue) 118%); }
.hero__frame picture, .hero__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__scrim { display: none; }
/* Notifications over the glowing phone: iOS lock-screen replica (system font on purpose, it copies the OS UI) */
.notifs { position: absolute; left: 63%; bottom: calc(21% + 10px); transform: translateX(-50%); width: 370px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
.notif { display: flex; align-items: center; gap: 11px; padding: 13px 15px 13px 13px; border-radius: 24px; background: rgba(58, 60, 70, 0.58); -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.22), 0 10px 30px rgba(0, 0, 0, 0.22); color: #ffffff; letter-spacing: -0.01em; }
.notif__icon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; background: #ffffff; color: #000000; }
.notif__icon svg { width: 21px; height: 21px; }
.notif__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.notif__top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.notif__top b { font-weight: 600; font-size: 15px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif__time { flex: none; font-size: 13px; line-height: 20px; color: rgba(255, 255, 255, 0.62); }
.notif__text { font-size: 15px; line-height: 20px; color: #ffffff; }
/* static state (no JS, reduced motion): the latest three */
.notifs:not(.is-anim) .notif:nth-last-child(n+4) { display: none; }
.notifs.is-anim .notif { display: none; }
.notifs.is-anim .notif.is-in { display: flex; animation: notif-in 560ms cubic-bezier(.2, .8, .2, 1) both; }
.notifs.is-anim .notif.is-out { animation: notif-out 260ms var(--ease) both; }
.notifs.is-anim .notif.is-gone { display: none; }
@keyframes notif-in { 0% { opacity: 0; transform: translateY(26px) scale(.92); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes notif-out { to { opacity: 0; transform: translateY(-10px) scale(.97); } }
.hero__foot { display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; width: var(--content-w); margin-inline: auto; padding-top: 28px; }
/* Results strip: four columns on desktop, 2 × 2 below */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 0; width: 100%; list-style: none; margin: 0; padding: 0; }
.stats li { display: flex; flex-direction: column; gap: 8px; padding-inline: clamp(20px, 2.4vw, 32px); border-left: 1px solid var(--line); }
.stats li:first-child { padding-left: 0; border-left: 0; }
.stats__num { font: 600 var(--fs-display-l)/1 var(--font-display); letter-spacing: -0.035em; color: var(--ink); white-space: nowrap; }
.stats__text { max-width: 26ch; font-size: var(--fs-body-s); line-height: 1.45; color: var(--ink-muted); text-wrap: balance; }
@media (max-width: 1023px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats li { padding-inline: 0 clamp(16px, 2.4vw, 32px); }
  .stats li:nth-child(even) { padding-inline: clamp(16px, 2.4vw, 32px) 0; }
  .stats li:nth-child(odd) { border-left: 0; }
}
@media (max-width: 640px) {
  .stats__text { text-wrap: pretty; }
}

@media (min-width: 1024px) {
  /* Header sits inside the hero photo; after the hero it slides in as a fixed bar (see main.js) */
  .site-header--hero { position: absolute; top: 16px; left: 0; right: 0; background: transparent; }
  .site-header--hero.is-scrolled { box-shadow: none; }
  .site-header--hero.is-fixed { position: fixed; top: env(safe-area-inset-top, 0px); background: var(--surface); box-shadow: 0 1px 0 var(--line); animation: header-in 260ms var(--ease) both; }
  .hero { padding-top: 16px; }
  .hero__stage { display: block; }
  /* copy box is centered in the frame with the shared content width, so its left edge matches every section; vertically it is centered in the photo below the header (auto margins fall back to top-aligned when it does not fit) */
  .hero__copy { position: absolute; z-index: 2; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: var(--content-w); display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding-block: calc(var(--header-h) + 24px) 24px; pointer-events: none; }
  .hero__head, .hero__body { width: min(600px, 50%); align-self: flex-start; padding: 0; gap: 24px; pointer-events: auto; }
  .hero__head { margin-top: auto; }
  .hero__body { margin-bottom: auto; }
  /* Exception: the display-xl token, capped by viewport width and height so the title stays inside the photo on short screens */
  .hero__title { font-size: min(6.1vw, var(--fs-display-xl), calc((100svh - 32px) * 0.105)); }
  .hero__title:has(br) { font-size: min(6.1vw, var(--fs-display-xl), calc((100svh - 32px) * 0.105), min(600px, var(--content-w) / 2) / 7.9); }
  /* Fit the first screen: never taller than the viewport; the photo is cropped from the top so the phone stays in view */
  .hero__frame { aspect-ratio: auto; container-type: inline-size; height: min(calc((100vw - 32px) * 0.5625), calc(100svh - 32px)); min-height: 560px; }
  .hero__frame img { object-position: 50% 100%; }
  /* the phone's top edge sits 21 % above the image bottom; the image is 2400 × 1340, so that is 11.7 % of the frame width */
  /* ...and never left of the copy column's right edge + 24px, so on narrow desktops the cards do not cover the vertically centered copy */
  .notifs { bottom: calc(11.7cqw + 10px); left: max(63%, (100% - var(--content-w)) / 2 + min(600px, var(--content-w) / 2) + 24px + 185px); }
  .hero__scrim { display: block; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--brand-night) 62%, transparent) 0, color-mix(in srgb, var(--brand-night) 0%, transparent) 170px), linear-gradient(90deg, color-mix(in srgb, var(--brand-night) 86%, transparent) 0%, color-mix(in srgb, var(--brand-night) 62%, transparent) 36%, color-mix(in srgb, var(--brand-night) 0%, transparent) 60%); }
}
@media (max-width: 640px) {
  .hero__frame { aspect-ratio: 4 / 5; }
  .notifs { left: 12px; right: 12px; width: auto; transform: none; align-items: center; }
  .notif { width: 100%; max-width: 330px; padding: 10px 12px 10px 10px; gap: 10px; border-radius: 20px; }
  .notif__icon { width: 34px; height: 34px; border-radius: 8px; }
  .notif__icon svg { width: 19px; height: 19px; }
  .notif__top b, .notif__text { font-size: 13px; line-height: 17px; }
  .notif__time { font-size: 12px; line-height: 17px; }
  .notifs:not(.is-anim) .notif:nth-last-child(n+3) { display: none; }
  .hero__ctas { flex-direction: column; align-items: stretch; width: 100%; }
  .hero__ctas .sb-link { align-self: center; }
}

/* ---------- 2 leaks: editorial headline + staggered cards */
.leaks-head { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 16px 24px; align-items: start; }
.leaks-head .sb-label { padding-top: 0.9em; }
.leaks-head__text { display: flex; flex-direction: column; gap: 20px; }
.leaks-head__title { font: 600 var(--fs-display-l)/1.01 var(--font-display); letter-spacing: -0.025em; color: var(--ink); text-wrap: balance; }
.leaks-head__title > span { color: var(--ink-muted); }
.unread { display: inline-grid; place-items: center; min-width: 1.5em; height: 0.92em; padding: 0 0.32em; margin: 0 0.04em; border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); font-size: 0.62em; line-height: 1; letter-spacing: -0.02em; vertical-align: 0.16em; font-variant-numeric: tabular-nums; }
.leak-cards { list-style: none; margin: clamp(48px, 6vw, 80px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: start; }
.leak { position: relative; aspect-ratio: 3 / 4; min-height: 340px; display: flex; flex-direction: column; justify-content: space-between; padding: 20px; border-radius: var(--radius-l); overflow: hidden; background: var(--surface); color: var(--ink); isolation: isolate; }
.leak:nth-child(even) { margin-top: 88px; }
.leak--tint { background: var(--accent-tint); }
.leak--photo { background: var(--brand-night); }
.leak__img { position: absolute; inset: 0; z-index: -2; }
.leak__img img { width: 100%; height: 100%; object-fit: cover; }
.leak--photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--brand-night) 20%, transparent) 0%, color-mix(in srgb, var(--brand-night) 10%, transparent) 35%, color-mix(in srgb, var(--brand-night) 88%, transparent) 78%); }
.leak__tag { align-self: flex-start; padding: 5px 12px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 45%, transparent); font: 600 var(--fs-label)/1.2 var(--font-text); color: var(--ink-soft); }
.leak__body { display: flex; flex-direction: column; gap: 10px; }
.leak__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-text); }
.leak__title { font: 600 var(--fs-heading-s)/1.01 var(--font-display); letter-spacing: -0.015em; color: var(--ink); text-wrap: balance; }
.leak__text { font-size: var(--fs-body-s); line-height: 1.5; color: var(--ink-soft); }
.leak--tint .leak__tag { color: var(--accent-strong); }
@media (max-width: 1023px) {
  .leaks-head { grid-template-columns: 1fr; }
  .leaks-head .sb-label { padding-top: 0; }
  .leak-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .leak:nth-child(even) { margin-top: 56px; }
}
@media (max-width: 600px) {
  .leak-cards { grid-template-columns: 1fr; gap: 12px; }
  .leak, .leak:nth-child(even) { margin-top: 0; aspect-ratio: auto; min-height: 340px; }
}

/* ---------- 3 voice */
.voice { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: clamp(40px, 8vw, 128px); align-items: center; }
.voice__notes { display: flex; flex-direction: column; gap: 28px; max-width: 600px; }
.notes-title { margin: 0 0 4px; font: 600 var(--fs-heading-m)/1.01 var(--font-display); letter-spacing: -0.015em; color: var(--ink); }
.voice__notes .sb-note { gap: 16px; font-size: var(--fs-body-l); line-height: 1.5; color: var(--ink-soft); }
.voice__notes .sb-note b { width: 32px; height: 32px; font-size: var(--fs-label); transform: translateY(-1px); }
.chat-demo { margin: 0; min-width: 0; }
.sb-ppv:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.sb-ppv__img, .sb-ppv__lock { transition: opacity 400ms var(--ease); }
.sb-ppv__btn { transition: background-color 150ms ease; }
.sb-chat .is-hidden { display: none; }
@media (max-width: 759px) { .voice { grid-template-columns: 1fr; } .voice__notes { gap: 20px; } }

/* ---------- 4 collab */
.collab { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px; }
.collab__card { --card-pad: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 24px; padding: var(--card-pad); border-radius: var(--radius-l); }
.collab__card--creator { display: grid; grid-template-columns: minmax(17em, 1.22fr) minmax(0, 1fr); gap: var(--card-pad); overflow: hidden; background: var(--surface-raised); }
.collab__card--agency { background: var(--surface); color: var(--ink); }
.collab__text { display: flex; flex-direction: column; gap: 24px; }
.collab__title { font: 600 var(--fs-heading-m)/1.01 var(--font-display); letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.collab .lines li { font-size: var(--fs-body); color: var(--ink); }
.collab__card .sb-btn { align-self: flex-start; margin-top: auto; }
/* The photo runs out to the card's top, right and bottom edges. It is out of the flow, so the text sets the card's height
   and no empty gap opens above the button. */
.collab__img { position: relative; margin: calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) 0; }
.collab__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
@media (max-width: 1023px) { .collab { grid-template-columns: 1fr; } }
/* Tablets: the agency card spans the full width, so its points sit beside the title, in the same column as the photo above */
@media (min-width: 641px) and (max-width: 1023px) {
  .collab__card--agency { display: grid; grid-template-columns: minmax(17em, 1.22fr) minmax(0, 1fr); grid-template-areas: "title list" "cta list"; column-gap: var(--card-pad); }
  .collab__card--agency .collab__title { grid-area: title; }
  .collab__card--agency .lines { grid-area: list; }
  .collab__card--agency .sb-btn { grid-area: cta; align-self: end; justify-self: start; }
}
/* Phones: the two cards are a carousel scrolled sideways with snap, edge to edge; the next card peeks in from the right.
   The photo is left out there: it made the creator card much taller and left the agency card half empty. */
@media (max-width: 640px) {
  .collab { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(86%, 340px); gap: 12px; overflow-x: auto;
    margin-inline: calc((var(--content-w) - 100vw) / 2); padding-inline: calc((100vw - var(--content-w)) / 2); scroll-padding-inline: calc((100vw - var(--content-w)) / 2);
    scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
  .collab::-webkit-scrollbar { display: none; }
  .collab__card { --card-pad: 22px; padding-top: 32px; scroll-snap-align: start; }
  .collab__card--creator { grid-template-columns: 1fr; }
  .collab .lines li { font-size: var(--fs-body-s); }
  .collab__img { display: none; }
  .collab + .swipe-progress { display: block; }
}

/* ---------- 5 results: one card per creator, the figures on the left, the OnlyFans screenshot on the right */
.results { display: flex; flex-direction: column; gap: clamp(16px, 2vw, 24px); }
.proof { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); grid-template-areas: "head tabs" "fig shot"; grid-template-rows: auto 1fr;
  gap: 28px clamp(24px, 4vw, 56px); padding: clamp(24px, 3vw, 40px); border-radius: var(--radius-l); background: var(--surface-raised); }
.proof__head { grid-area: head; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.proof__who { font: 600 var(--fs-heading-m)/1.01 var(--font-display); letter-spacing: -0.02em; color: var(--ink); }
.proof__tabs { grid-area: tabs; align-self: end; justify-self: start; }
.proof__view { display: contents; }
.proof__view[hidden] { display: none; }
/* the number shrinks with its column, so "4 566 328 $" fits next to the screenshot from 1024 px up */
.proof__fig { grid-area: fig; container-type: inline-size; display: flex; flex-direction: column; align-items: flex-start; }
/* what the big number is: the period's caption from results.cases ("netto od 13. 4. 2025"), so the tabs can stay short */
.proof__ctx { margin-bottom: 10px; font: 600 var(--fs-label)/1.3 var(--font-text); color: var(--ink-muted); }
.proof__ctx::first-letter { text-transform: uppercase; }
.proof__num { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  font: 500 min(var(--fs-display-l), 14.5cqi)/1 var(--font-display); letter-spacing: -0.04em; color: var(--ink); }
.proof__num > span:first-child { white-space: nowrap; }
/* the net's growth against the previous period right by the amount, green like OnlyFans' trend chips in the screenshot;
   it drops under the amount when both don't fit (phones under 360 px) */
.proof__growth { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px 6px 9px; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--signal-up) 12%, transparent); font: 600 var(--fs-heading-s)/1.1 var(--font-text); letter-spacing: 0;
  color: var(--signal-up); white-space: nowrap; }
.proof__growth svg { width: 1.1em; height: 1.1em; fill: currentColor; }
/* "$1 259 194 zo správ a PPV 76 %": one sentence, the label moved above the amount here and back into the line on phones */
.proof__msg { align-self: stretch; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.3em; margin-top: 24px;
  font: 600 var(--fs-heading-s)/1.3 var(--font-text); color: var(--ink); font-variant-numeric: tabular-nums; }
.proof__msg b { font-weight: inherit; }
.proof__msg-label { order: -1; flex-basis: 100%; margin-bottom: 6px; font: 600 var(--fs-label)/1.3 var(--font-text); color: var(--ink-muted); }
.proof__msg-label::first-letter { text-transform: uppercase; }
/* the messages' share of the net as a meter: accent fill on the accent tint, a 2px gap of the card's surface between them,
   the percentage and what it is a share of inside the fill at its end (the shares are 62 - 81 %, smaller on the narrowest phones) */
.proof__bar { position: relative; display: block; flex-basis: 100%; height: 28px; margin-top: 14px; border-radius: var(--radius-pill); background: var(--accent-tint); }
.proof__bar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--share); border-radius: inherit; background: var(--accent); box-shadow: 2px 0 0 var(--surface-raised); }
.proof__msg-share { position: absolute; inset: 0 calc(100% - var(--share)) 0 auto; display: flex; align-items: center; padding-right: 12px;
  font: 600 var(--fs-label)/1 var(--font-text); color: var(--on-accent); white-space: nowrap; }
.proof__shot { grid-area: shot; margin: 0; }
.proof__shot a { display: block; overflow: hidden; border-radius: var(--radius-m); cursor: zoom-in; }
.proof__shot img { display: block; width: 100%; height: auto; }
/* one column: spacing by relationship, the tabs close to the name, the figures and the screenshot as their own blocks */
@media (max-width: 1023px) {
  .proof { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "tabs" "fig" "shot"; grid-template-rows: none; gap: 0; }
  .proof__tabs { align-self: auto; margin-top: 16px; }
  .proof__fig { margin-top: 28px; }
  .proof__shot { margin-top: 32px; }
  .proof__num { font-size: var(--fs-display-l); }
  .proof__msg { max-width: 560px; }
}
/* Phones: the amount is the loudest thing in the card. The rank is a plain line, the period switch only as wide as its labels,
   the caption under the number, and the screenshot is just OnlyFans' Earnings panel (the -m images), readable at this width. */
@media (max-width: 640px) {
  .proof { padding: 22px; }
  .proof__head { gap: 4px; }
  .proof .proof__rank { min-height: 0; padding: 0; background: none; font: 400 var(--fs-body-s)/1.4 var(--font-text); color: var(--ink-muted); }
  .proof .proof__tabs { justify-self: start; width: auto; grid-auto-columns: auto; }
  .proof .proof__tabs:not(:has(> :nth-child(3))) button { padding: 6px 14px; }
  .proof__fig { margin-top: 24px; }
  .proof__ctx { order: 1; margin: 8px 0 0; }
  .proof__ctx::first-letter { text-transform: none; }
  .proof__msg { order: 2; margin-top: 20px; font-size: var(--fs-body); }
  .proof__msg-label { order: 0; flex-basis: auto; margin: 0; font: 400 var(--fs-body)/1.3 var(--font-text); color: var(--ink-soft); }
  .proof__msg-label::first-letter { text-transform: none; }
  .proof__growth { font-size: var(--fs-body); }
  /* the panel crops are 317 and 365 px wide: on wider phones they would be blown up and blurred */
  .proof__shot { max-width: 365px; margin-top: 24px; }
}
@media (max-width: 520px) {
  /* four periods take the full width again, columns as wide as their labels instead of equal quarters,
     so "180 days" stays on one line at 360 px */
  .proof .proof__tabs:has(> :nth-child(3)) { justify-self: stretch; width: 100%; }
}
@media (max-width: 359px) {
  /* the smallest share (62 %) leaves the caption about 147 px of fill at 320 px */
  .proof__msg-share { padding-right: 8px; font-size: 12px; }
}

/* ---------- 6 compare */
.sb-compare thead th { vertical-align: bottom; }
.sb-compare thead .is-us { padding-top: 24px; padding-bottom: 14px; }
.sb-compare thead .is-us .logo { height: 26px; width: auto; }
/* Phones: one column per criterion, scrolled sideways with snap; the first column stays put and names the two rows
   (the SecretlyBlue logo in the dark band, the usual agency under it). Rows share heights through subgrid, so the band is one strip. */
@media (max-width: 759px) {
  .compare-wrap { margin-right: calc((var(--content-w) - 100vw) / 2); scroll-snap-type: x mandatory; scroll-padding-left: 44px; overscroll-behavior-x: contain; scrollbar-width: none; }
  .compare-wrap::-webkit-scrollbar { display: none; }
  .sb-compare { display: grid; grid-template-columns: 44px; grid-template-rows: auto minmax(140px, auto) auto; grid-auto-flow: column; grid-auto-columns: min(76vw, 300px); width: max-content; }
  .sb-compare thead, .sb-compare tbody { display: contents; }
  .sb-compare tr { display: grid; grid-row: 1 / span 3; grid-template-rows: subgrid; }
  .sb-compare tbody tr { scroll-snap-align: start; }
  .sb-compare th, .sb-compare td { display: block; padding: 0; border: 0; border-radius: 0; }
  .sb-compare tr > :first-child { grid-row: 1; }
  .sb-compare tr > .is-us { grid-row: 2; }
  .sb-compare tr > :nth-child(3) { grid-row: 3; }
  .sb-compare tbody tr > * { border-left: 1px solid var(--line); }
  /* the first column: stays on the left while the criteria scroll under it */
  .sb-compare thead tr { position: sticky; left: 0; z-index: 1; }
  .sb-compare thead th { position: relative; background: var(--surface); }
  .sb-compare thead .is-us, .sb-compare tbody tr:last-child .is-us { border-radius: 0; padding: 0; background: var(--surface-raised); }
  /* the desktop 40 % (components.css) would leave the logo band at a third of the column, short of the band beside it */
  .sb-compare thead .is-us { width: 100%; }
  .sb-compare thead .is-us .logo { position: absolute; left: 50%; top: 50%; height: 20px; width: auto; max-width: none; translate: -50% -50%; rotate: -90deg; }
  /* the rotated label would shrink to its line; full column width keeps it centered under the logo and covers the criteria scrolling beneath */
  .sb-compare thead th:nth-child(3) { width: 100%; display: flex; align-items: center; justify-content: center; padding: 16px 0; writing-mode: vertical-rl; rotate: 180deg; font: 600 var(--fs-label)/1 var(--font-text); color: var(--ink-muted); }
  /* the criteria and the two answers */
  .sb-compare tbody th { align-self: end; padding: 4px 20px 14px; font: 600 var(--fs-body-s)/1.35 var(--font-text); color: var(--ink); }
  /* the answers, each with its check or cross mark (components.css), centred in its band */
  .sb-compare td { display: flex; align-items: center; padding: 20px 20px 20px 18px; font-size: var(--fs-body-s); line-height: 1.45; }
  .sb-compare td.is-us { color: var(--ink); }
  .sb-compare td:not(.is-us) { color: var(--ink-soft); }
  .compare-wrap + .swipe-progress { display: block; }
}

/* ---------- 7 team (night) */
.team { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(48px, 6vw, 96px) clamp(40px, 6vw, 96px); }
.team__funnel { display: flex; flex-direction: column; gap: 16px; }
.funnel { margin-top: 24px; }
.funnel ol { list-style: none; margin: 0; padding: 0; }
.funnel li { display: grid; grid-template-columns: minmax(150px, 210px) minmax(0, 1fr) 64px; align-items: center; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.funnel li:last-child { border-bottom: 1px solid var(--line); }
.funnel__label { font-size: var(--fs-body-s); line-height: 1.35; color: var(--ink-soft); }
.funnel__track { height: 16px; }
.funnel__bar { display: block; width: var(--w); height: 100%; border-radius: 4px; background: var(--accent); }
.funnel li:last-child .funnel__bar { background: var(--brand-glow); }
.funnel__val { text-align: right; font: 600 var(--fs-body-s)/1 var(--font-text); font-variant-numeric: tabular-nums; color: var(--ink); }
/* discretion: its own raised panel, so it doesn't run together with the funnel rows next to it */
.team__sec { display: flex; flex-direction: column; gap: 20px; align-self: start; padding: clamp(24px, 3vw, 40px); border-radius: var(--radius-l); background: var(--surface-raised); }
.team__sec-title { font: 600 var(--fs-heading-m)/1.01 var(--font-display); letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.sec-list div { padding: 18px 0; border-top: 1px solid var(--line); }
.sec-list dt { font: 600 var(--fs-heading-s)/1.01 var(--font-display); letter-spacing: -0.01em; color: var(--ink); }
.sec-list dd { margin-top: 6px; color: var(--ink-soft); }
/* platforms: a quieter sunken strip across both columns, a third kind of information */
.platforms { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 16px 32px; padding: 24px clamp(24px, 3vw, 40px); border-radius: var(--radius-l); background: var(--surface-sunken); }
.platforms__label { font: 600 var(--fs-label)/1.3 var(--font-text); color: var(--ink-muted); }
.platforms ul { display: flex; flex-wrap: wrap; align-items: center; gap: 16px clamp(24px, 3vw, 40px); list-style: none; margin: 0; padding: 0; }
.platforms li { display: flex; font-size: var(--fs-heading-m); color: var(--ink-soft); }
/* heights balanced by eye: OnlyFans box includes the y descender, Fansly the heart mark */
.platforms__logo { display: block; width: auto; height: 1em; }
.platforms__logo--fansly { height: 1.15em; }
.platforms__logo--fanvue { height: 0.82em; }
@media (max-width: 959px) {
  .team { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .sec-list dt { font-size: var(--fs-body); }
  .sec-list dd { font-size: var(--fs-body-s); }
}
@media (max-width: 520px) {
  .funnel li { grid-template-columns: minmax(0, 1fr) 56px; row-gap: 8px; }
  .funnel__track { grid-column: 1 / -1; grid-row: 2; }
  /* the three logos (about 12 em wide together) stay on one row inside the strip down to 320 px */
  .platforms { padding: 20px; }
  .platforms ul { flex: 1 1 100%; justify-content: space-between; column-gap: 16px; }
  .platforms li { font-size: min(var(--fs-heading-m), 5.4vw); }
}

/* ---------- 9 calculator */
.calc { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.calc__inputs { display: flex; flex-direction: column; gap: 16px; }
.calc__form { display: grid; gap: 20px; max-width: 480px; margin-top: 16px; }
.sb-select { appearance: none; -webkit-appearance: none; padding-right: 48px; background-repeat: no-repeat; background-position: right 18px center; background-size: 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%235e6795' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M3 5.5l4 4 4-4'/%3E%3C/svg%3E"); cursor: pointer; }
[data-theme="night"] .sb-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%239aa5d3' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M3 5.5l4 4 4-4'/%3E%3C/svg%3E"); }
.sb-select option { color: #0b1550; background: #ffffff; }
.calc__result { position: sticky; top: calc(var(--header-h) + 24px); display: flex; flex-direction: column; min-height: 554px; padding: clamp(24px, 3vw, 40px); border-radius: var(--radius-l); background: var(--surface); color: var(--ink); }
.calc__label { font: 600 var(--fs-label)/1.3 var(--font-text); color: var(--ink-soft); }
.calc__big { margin: 10px 0 24px; font: 500 var(--fs-display-l)/1 var(--font-display); letter-spacing: -0.04em; color: var(--ink); }
.calc__big small { font: 400 var(--fs-body)/1 var(--font-text); letter-spacing: 0; color: var(--ink-soft); }
.calc__rows { margin-top: auto; }
.calc__rows div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); font-size: var(--fs-body-s); }
.calc__rows dt { color: var(--ink-soft); }
.calc__rows dd { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc__rows .calc__total dt, .calc__rows .calc__total dd { font-weight: 600; color: var(--ink); }
.form-status { font: 500 var(--fs-body-s)/1.45 var(--font-text); }
.form-status:empty { display: none; }
.form-status[data-state="ok"] { color: var(--signal-up); }
.form-status[data-state="error"] { color: var(--signal-error); }
@media (max-width: 959px) {
  .calc { grid-template-columns: 1fr; }
  .calc__result { position: static; min-height: 0; }
}

/* ---------- 10 pricing (night) */
.pricing { display: flex; flex-direction: column; align-items: center; }
.sb-price { width: 100%; max-width: 580px; display: flex; flex-direction: column; gap: 24px; padding: clamp(24px, 3vw, 40px); }
.price-top { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.price-label { font: 600 var(--fs-label)/1.3 var(--font-text); color: var(--ink); }
.price-fig { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; }
.sb-price__num { font-variant-numeric: normal; }
/* worked example right under the rate, as a small statement: average and new month, the growth in blue,
   then the commission on that growth under a hairline */
.price-calc { width: 100%; padding: 20px 24px; border-radius: var(--radius-m); background: var(--surface-sunken); }
.price-calc dl { display: grid; gap: 10px; margin: 12px 0 0; font-size: var(--fs-body-s); line-height: 1.4; }
.price-calc dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.price-calc dt { color: var(--ink-soft); }
.price-calc dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.price-calc .is-growth dt, .price-calc .is-growth dd { color: var(--accent-text); font-weight: 600; }
.price-calc .is-total { margin-top: 2px; padding-top: 12px; border-top: 1px solid var(--line); }
.price-calc .is-total dt, .price-calc .is-total dd { color: var(--ink); font-weight: 600; }
.sb-price .sb-btn { width: 100%; }
.sb-seg { flex-wrap: wrap; }
@media (max-width: 520px) {
  .sb-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; border-radius: 16px; }
  .sb-seg button { min-height: 44px; padding: 6px 8px; border-radius: 12px; line-height: 1.2; white-space: normal; }
}

/* ---------- 11 not for */
/* Who this isn't for. By default a list of rows and a dark closing block ("Yes, if…") with the apply button.
   On screens at least 600px tall, with motion allowed, it becomes a deck: the section sticks under the header and a
   short scroll sends the top "No, if…" card off on its own (a transition), until only the closing card is left.
   --gone is how many cards have left, each card's --i is its place in the deck. */
.notfor { list-style: none; margin: 0; padding: 0; }
.notfor li { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 12px clamp(24px, 4vw, 64px); align-items: baseline; padding: clamp(24px, 3vw, 36px) 0; border-top: 1px solid var(--line); }
.notfor li:last-child { border-bottom: 1px solid var(--line); }
.notfor__count { display: none; }
.notfor__title { font: 600 var(--fs-heading-m)/1.01 var(--font-display); letter-spacing: -0.025em; color: var(--ink); text-wrap: balance; }
.notfor__title span { color: var(--ink-muted); }
.notfor__text { color: var(--ink-soft); }
.notfor__end { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px clamp(24px, 4vw, 64px); align-items: center; margin-top: clamp(32px, 4vw, 48px); padding: clamp(24px, 3vw, 40px); border-radius: var(--radius-l); background: var(--surface); color: var(--ink); }
.notfor__end .notfor__title span { color: var(--accent-text); }
.notfor__end .sb-btn { grid-column: 2; justify-self: start; }
@media (max-width: 799px) {
  .notfor li, .notfor__end { grid-template-columns: 1fr; }
  .notfor__end .sb-btn { grid-column: auto; }
}

/* The layout is pure CSS (no shift when main.js starts); main.js only sets --dealt, the number of cards that have left.
   Gated on scripting so that without JS nothing hides under the top card. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) and (min-height: 600px) {
  /* A card leaving the deck is cut off at the screen edge (not at the sheet) and never scrolls the page sideways */
  main:has(.notfor-deck) { overflow-x: clip; }
  /* The stage sticks centred under the header, at most 680px tall so the sheet doesn't open with a screenful of empty space;
     each card gets 32svh of scroll while it is stuck */
  .notfor-sec { padding-block: 0; --stage-h: min(100svh - var(--header-h), 680px); --stage-top: calc(var(--header-h) + (100svh - var(--header-h) - var(--stage-h)) / 2); }
  .notfor-track { height: calc(var(--stage-h) + var(--n) * 32svh); }
  .notfor-stage { position: sticky; top: var(--stage-top); height: var(--stage-h); display: grid; align-content: center; gap: clamp(28px, 5svh, 56px); }
  .notfor-stage .head { margin-bottom: 0; }
  .notfor-stage .h2 span { display: block; }

  .notfor-deck { display: grid; --gone: var(--dealt, 0); }
  /* Tabbing to the apply button deals the whole deck, so the button is never under a card */
  .notfor-deck:has(:focus-visible) { --gone: var(--n); }
  .notfor-deck > *, .notfor li { grid-area: 1 / 1; }
  .notfor { display: grid; }

  .notfor li, .notfor__end {
    --rel: calc(var(--i) - var(--gone));
    --depth: clamp(0, var(--rel), 2);       /* 0 on top, 1–2 under it (deeper cards wait behind the second one) */
    --fly: clamp(0, -1 * var(--rel), 1);    /* 0 in the deck, 1 gone */
    display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 12px;
    min-height: clamp(240px, 36svh, 340px); margin: 0; padding: clamp(24px, 3vw, 40px);
    border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface-raised);
    box-shadow: 0 1px 2px rgba(5, 10, 36, 0.05), 0 18px 40px -24px rgba(5, 10, 36, 0.3);
    z-index: calc(var(--n) - var(--i) + 1);
    transform-origin: 50% 100%;
    /* a gone card ends at least 60vw to the right, off every screen; the cards under it move up at the same time */
    transform: translate(calc(var(--fly) * max(120%, 60vw)), calc(var(--depth) * 14px - var(--fly) * 12%)) rotate(calc(var(--fly) * 14deg)) scale(calc(1 - var(--depth) * 0.05));
    /* soft start, long settle: the leaving card is on screen for about half of it, the ones under it glide up */
    transition: transform 800ms cubic-bezier(0.5, 0, 0.15, 1);
  }
  .notfor__count { display: block; margin-bottom: auto; padding-bottom: 24px; font: 600 var(--fs-label)/1 var(--font-text); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
  .notfor__text { max-width: 46ch; }
  .notfor__end { background: var(--surface); border-color: var(--line); }
  .notfor__end .sb-btn { margin-top: 12px; }

  @media (min-width: 1024px) {
    .notfor-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: clamp(48px, 6vw, 112px); }
  }
}

/* ---------- 12 faq */
.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.faq__head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; position: sticky; top: calc(var(--header-h) + 24px); }
.sb-acc summary { min-height: 44px; }
@media (max-width: 959px) {
  .faq { grid-template-columns: 1fr; }
  .faq__head { position: static; }
}
@media (max-width: 600px) {
  .sb-acc summary { font-size: var(--fs-body); }
  .sb-acc p { font-size: var(--fs-body-s); }
}

/* ---------- 13 application (night, the page's one gradient: sky after sunset) */
.final { margin-inline: var(--gutter-l) var(--gutter-r); border-radius: var(--radius-xl); padding-block: clamp(80px, 10vw, 144px); background: linear-gradient(180deg, var(--brand-night) 0%, var(--brand-night) 40%, var(--brand-horizon) 100%); color: var(--ink); }
.final__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.final__main { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.final__chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 4px 0 0; padding: 0; }
.final__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-xl); }
.apply { display: flex; flex-direction: column; gap: 20px; width: 100%; max-width: 660px; margin-top: 20px; }
.apply__type { align-self: flex-start; }
.apply__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.apply__submit { align-self: flex-start; min-width: 220px; }
.apply__consent { display: flex; flex-direction: column; gap: 6px; max-width: 60ch; }
.apply__alt { font-size: var(--fs-body-s); }
@media (max-width: 1023px) {
  .final__grid { grid-template-columns: 1fr; }
  .final__img img { aspect-ratio: 3 / 2; object-position: 50% 4%; }  /* the woman's head stays in the wide crop */
}
@media (max-width: 640px) {
  .apply__grid { grid-template-columns: 1fr; }
  .apply__submit { align-self: stretch; }
}

/* ---------- footer */
.site-footer { overflow: hidden; padding-top: clamp(64px, 8vw, 104px); background: var(--surface); color: var(--ink); }
.site-footer__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: 40px; }
.site-footer__brand { display: flex; flex-direction: column; gap: 16px; }
.site-footer__brand .logo { height: 28px; width: auto; }
.site-footer__brand p { max-width: 34ch; font-size: var(--fs-body-s); line-height: 1.5; color: var(--ink-soft); }
.site-footer__title { margin-bottom: 14px; font: 600 var(--fs-label)/1.3 var(--font-text); color: var(--ink-muted); }
.site-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.site-footer__col a { display: inline-block; padding: 6px 0; font-size: var(--fs-body-s); color: var(--ink-soft); text-decoration: none; }
.site-footer__col a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.site-footer__notes { display: flex; flex-direction: column; gap: 10px; font: 500 var(--fs-caption)/1.5 var(--font-text); color: var(--ink-muted); }
.site-footer__giant { width: var(--content-w); margin: clamp(48px, 7vw, 104px) auto 0; line-height: 0; }
.site-footer__giant svg { width: 100%; height: auto; fill: var(--surface-raised); }
@media (max-width: 959px) { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-footer__brand, .site-footer__notes { grid-column: 1 / -1; } }
@media (max-width: 520px) { .site-footer__grid { grid-template-columns: 1fr; } }

/* ---------- subpages */
.sheet--page { margin-top: 8px; margin-bottom: clamp(40px, 6vw, 80px); }
/* no-common-ligatures: Rethink Sans turns "(1)" into a circled digit, which breaks article references like 6(1)(b) */
.legal { padding-block: clamp(56px, 8vw, 96px); font-variant-ligatures: no-common-ligatures; }
.legal > * { max-width: 820px; }
.legal h1 { margin-bottom: 16px; }
.legal__draft { padding: 14px 18px; border-radius: var(--radius-s); background: var(--accent-tint); color: var(--accent-strong); font: 500 var(--fs-body-s)/1.5 var(--font-text); }
.legal h2 { margin: 36px 0 8px; font: 600 var(--fs-heading-s)/1.01 var(--font-display); letter-spacing: -0.01em; color: var(--ink); }
.legal p, .legal ul { max-width: 68ch; color: var(--ink-soft); }
.legal p + p, .legal p + ul, .legal ul + p { margin-top: 12px; }
.legal ul { padding-left: 1.2em; }
.legal li + li { margin-top: 6px; }
.legal .legal__intro { margin-top: 28px; }
.legal .legal__meta { margin-top: 8px; font-size: var(--fs-body-s); }
.legal p:last-child { margin-top: 40px; }
.notfound { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding-block: clamp(80px, 12vw, 160px); }
.notfound__code { font: 600 clamp(96px, 60px + 10vw, 180px)/0.9 var(--font-display); letter-spacing: -0.05em; color: var(--surface-raised); }

@keyframes header-in { from { transform: translateY(-100%); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
@media (forced-colors: active) {
  .funnel__bar { forced-color-adjust: none; }
}

/* Control borders on the gradient: lighter so they keep 3:1 against the sky's lower part */
.final .sb-input { border-color: var(--ink-muted); }

@media (max-height: 700px) and (min-width: 1024px) {
  .notifs:not(.is-anim) .notif:nth-last-child(n+3) { display: none; }
}

/* Phones: no outer gutter, the light sheets, the hero frame and the application block run edge to edge;
   text keeps --pad (20 px) from the screen edge, plus the safe area in landscape.
   Kept at the end of the file: it has to come after the .hero and .final rules, which set the gutter. */
@media (max-width: 640px) {
  :root { --content-w: calc(100vw - 2 * var(--pad) - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)); }
  .sheet, .final { margin-inline: 0; }
  .hero { padding-inline: 0; }
}