/* ==========================================================================
   ELEVARA — site.css · v3 · "Night grading, Sunday clarity"
   One file. Order: fonts → tokens → base → type → layout → components → sections → motion → utilities.
   The full rules are in DESIGN_SYSTEM.md (v3).
   ========================================================================== */

/* ---------- 1. Fonts (self-hosted, subset) ---------- */
@font-face { font-family: "Newsreader"; src: url("../fonts/newsreader-display.woff2") format("woff2"); font-weight: 300 600; font-style: normal; font-display: swap; }
/* the italic face is added by site.js after load (it is only used below the first screen) */
@font-face { font-family: "Hanken Grotesk"; src: url("../fonts/hanken-grotesk.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Elevara Pen"; src: url("../fonts/pen.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Elevara Hand"; src: url("../fonts/hand.woff2") format("woff2"); font-display: swap; }
/* Metric-matched fallbacks, so the page doesn't jump when the fonts arrive */
@font-face { font-family: "Newsreader Fallback"; src: local("Georgia"); size-adjust: 96%; ascent-override: 92%; descent-override: 24%; }
@font-face { font-family: "Hanken Fallback"; src: local("Arial"); size-adjust: 97%; ascent-override: 98%; descent-override: 26%; }

/* ---------- 2. Tokens ---------- */
:root {
  /* the four real-world colors: violet ink, paper, highlighter, red pen */
  /* the night tone. NIGHT_TONE in site-config.js: "purple" (these) or "original" (the first v3 colors, below) */
  --night: #240A40;            /* deep purple: the 9pm desk */
  --night-2: #2F0E50;
  --night-3: #43196C;
  --night-rgb: 36, 10, 64;
  --night-3-rgb: 67, 25, 108;
  --on-night: #F3F0FA;
  --on-night-soft: rgba(243, 240, 250, .74);
  --on-night-faint: rgba(243, 240, 250, .6);
  --on-night-line: rgba(243, 240, 250, .14);

  --day: #F6F5F2;              /* the desk in daylight */
  --day-2: #EDEBE5;
  --paper: #FFFFFF;
  --ink: #1A1235;
  --ink-soft: #453E5E;
  --muted: #6B6584;
  --line: rgba(26, 18, 53, .12);
  --line-strong: rgba(26, 18, 53, .22);

  --violet: #7C3AED;           /* Elevara violet: small accents only (the report's name, rules, bars) */
  --violet-hover: #6D28D9;
  --ink-violet: #4A25AA;       /* the button ink on day sections: deeper, calmer than the brand violet */
  --violet-deep: #4C1D95;
  --violet-pale: #EFE9FC;
  --violet-glow: #A78BFA;

  --highlight: #FDE68A;
  --lamp: #FFCF70;
  --pen: #D33A2C;
  --pen-deep: #A8261B;
  --student-ink: #25316F;
  --good: #1F7A4D;

  --f-display: "Newsreader", "Newsreader Fallback", Georgia, serif;
  --f-text: "Hanken Grotesk", "Hanken Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-pen: "Elevara Pen", "Bradley Hand", "Segoe Print", cursive;
  --f-hand: "Elevara Hand", "Segoe Print", cursive;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-soft: cubic-bezier(.2, .7, .2, 1);

  --max: 1280px;
  --gutter: clamp(20px, 4.2vw, 56px);
  --nav-h: 72px;
  --radius-s: 10px;
  --radius: 18px;
  --radius-l: 28px;

  --shadow-paper: 0 1px 1px rgba(var(--night-rgb), .12), 0 18px 40px -18px rgba(var(--night-rgb), .35), 0 50px 90px -40px rgba(var(--night-rgb), .45);
  --shadow-paper-night: 0 1px 1px rgba(0, 0, 0, .3), 0 30px 60px -22px rgba(0, 0, 0, .65), 0 80px 140px -50px rgba(0, 0, 0, .8);
  --shadow-soft: 0 1px 2px rgba(var(--night-rgb), .06), 0 12px 32px -16px rgba(var(--night-rgb), .18);

  /* the grader's tick, as a mask for list markers */
  --tick-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 13.5c2.2 1.4 3.7 3 5 5.2C10.6 13 14.8 7.6 21 3.5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  color-scheme: light;
}
html.tone-original { --night: #140C2E; --night-2: #1C1340; --night-3: #2A1D5A; --night-rgb: 20, 12, 46; --night-3-rgb: 42, 29, 90; }

/* ---------- 3. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  background: var(--day);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga";
  overflow-x: clip;
}
@media (max-width: 640px) { body { font-size: 17px; } }
img, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--highlight); color: var(--ink); }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 4px; }
.theme-night :focus-visible { outline-color: var(--violet-glow); }
sub { font-size: .68em; line-height: 0; vertical-align: -.25em; }

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--paper); color: var(--ink); padding: 12px 18px; border-radius: 999px;
  font-weight: 600; text-decoration: none; transition: top .2s;
}
.skip-link:focus { top: 12px; }

/* ---------- 4. Type ---------- */
.display-xl, .display-l, .display-m, .display-s, .deck, .quote {
  font-family: var(--f-display);
  font-optical-sizing: auto;
  text-wrap: balance;
}
.display-xl { font-size: clamp(46px, 6.3vw, 96px); line-height: .98; letter-spacing: -.032em; font-weight: 400; }
.display-l  { font-size: clamp(38px, 5.4vw, 80px);  line-height: 1.01; letter-spacing: -.028em; font-weight: 400; }
.display-m  { font-size: clamp(31px, 3.7vw, 54px);  line-height: 1.06; letter-spacing: -.022em; font-weight: 400; }
.display-s  { font-size: clamp(24px, 2.3vw, 33px);  line-height: 1.16; letter-spacing: -.012em; font-weight: 450; }
.deck { font-size: clamp(22px, 2.35vw, 34px); line-height: 1.24; letter-spacing: -.012em; font-weight: 300; }
.quote { font-style: italic; font-weight: 350; font-size: clamp(24px, 2.6vw, 38px); line-height: 1.22; letter-spacing: -.01em; }
.lead { font-size: clamp(18px, 1.45vw, 21px); line-height: 1.55; }
.small { font-size: 15.5px; line-height: 1.5; }
.micro { font-size: 14px; line-height: 1.45; }
.muted { color: var(--muted); }
.theme-night .muted { color: var(--on-night-faint); }
.soft { color: var(--ink-soft); }
.theme-night .soft { color: var(--on-night-soft); }
.kicker { font-size: 15px; line-height: 1.4; font-weight: 500; color: var(--ink-soft); margin-bottom: 22px; display: block; max-width: 34em; }
.theme-night .kicker { color: var(--on-night-soft); }
.label { font-size: 14px; font-weight: 600; letter-spacing: .01em; color: var(--muted); display: block; margin-bottom: 14px; }
.theme-night .label { color: var(--on-night-faint); }
.pen { font-family: var(--f-pen); color: var(--pen); font-weight: 400; letter-spacing: 0; }
.hand { font-family: var(--f-hand); color: var(--student-ink); }
.num { font-variant-numeric: lining-nums tabular-nums; }
.measure { max-width: 34em; }
.measure-s { max-width: 26em; }
strong, b { font-weight: 650; }
.prose p { margin-bottom: .9em; }
.prose p + p { margin-top: 0; }
.stack > * + * { margin-top: var(--stack, 1em); }

/* the highlighter: drawn behind a phrase, once, when it comes into view */
.hl {
  background-image: linear-gradient(100deg, transparent 0 .6%, var(--highlight) 1.4% 97.5%, transparent 99%);
  background-repeat: no-repeat;
  background-size: 0% 62%;
  background-position: 0 88%;
  padding: 0 .12em;
  margin: 0 -.12em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: background-size 1.05s var(--ease-out);
}
.hl.is-in, .no-motion .hl, .hl.is-static { background-size: 100% 62%; }
/* on dark sections the stroke covers the full line, and the words turn ink as it passes */
.theme-night .hl { background-size: 0% 100%; background-position: 0 50%; padding: .04em .14em; border-radius: 2px; transition: background-size 1.05s var(--ease-out), color .35s ease .38s; }
.theme-night .hl.is-in, .no-motion .theme-night .hl { background-size: 100% 100%; color: var(--ink); }

/* ---------- 5. Layout ---------- */
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2 * var(--gutter), 860px); margin-inline: auto; }
.section { position: relative; padding-block: clamp(96px, 12vw, 176px); }
.section-tight { padding-block: clamp(72px, 8vw, 120px); }
.theme-night { background: var(--night); color: var(--on-night); }
.theme-day { background: var(--day); color: var(--ink); }
.theme-paper { background: var(--paper); color: var(--ink); }
.theme-deep { background: var(--day-2); color: var(--ink); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 110px); align-items: start; }
.split-wide-left { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.split-wide-right { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.center { text-align: center; }
.center .measure, .center .measure-s { margin-inline: auto; }
@media (max-width: 900px) {
  .split, .split-wide-left, .split-wide-right { grid-template-columns: minmax(0, 1fr); }
}
.section-head { margin-bottom: clamp(44px, 6vw, 84px); }
.section-head .display-l + .deck, .section-head .display-m + .deck { margin-top: 22px; }
.section-head .lead { margin-top: 24px; }

/* film grain (night sections only) */
.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  opacity: .085; mix-blend-mode: soft-light;
  animation: grain 1.2s steps(6) infinite;
}
/* the grain moves by shifting its pattern, never its box, so nothing on the page shifts */
@keyframes grain {
  0% { background-position: 0 0; } 20% { background-position: -66px 44px; } 40% { background-position: 44px -66px; }
  60% { background-position: -44px -22px; } 80% { background-position: 66px 66px; } 100% { background-position: 0 0; }
}
.grain > * { position: relative; z-index: 2; }

/* ---------- 6. Components ---------- */

/* Buttons. Day: violet ink. Night: the highlighter itself. On hover a fresh stroke sweeps across. */
.btn {
  --btn-h: 62px;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: var(--btn-h); padding: 0 32px;
  border-radius: 12px;
  background: var(--btn-bg, var(--ink-violet)); color: var(--btn-fg, #fff);
  font-family: var(--f-text); font-size: 17.5px; font-weight: 600; letter-spacing: -.005em; line-height: 1.15;
  text-decoration: none; text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 12px 26px -16px rgba(var(--night-rgb), .55);
  transition: color .45s var(--ease-out), box-shadow .45s var(--ease-out), transform .5s var(--ease-out);
  will-change: transform;
}
.btn::before {
  content: ""; position: absolute; z-index: -1; inset: -2px -8px;
  background: var(--btn-sweep, var(--highlight));
  clip-path: polygon(0 8%, 100% 0, 100% 92%, 0 100%);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .6s var(--ease-out);
}
.btn:hover { color: var(--ink); }
.btn:hover::before { transform: scaleX(1); }
.btn:active { transform: scale(.985); }
.btn .btn-mark { width: 18px; height: 18px; flex: none; }
.theme-night, .footer, .menu, .sticky-cta, .contact-card.is-main, .nav[data-on="night"], .menu-open .nav {
  --btn-bg: var(--highlight); --btn-fg: var(--ink); --btn-sweep: #FFFDF4;
}
.theme-night .btn, .footer .btn, .menu .btn, .sticky-cta .btn, .contact-card.is-main .btn, .nav[data-on="night"] .btn, .menu-open .nav .btn { box-shadow: 0 14px 34px -18px rgba(0, 0, 0, .7); }
.btn-s { --btn-h: 44px; padding: 0 18px; font-size: 15px; border-radius: 10px; }
.btn-full { width: 100%; }
@media (max-width: 640px) { .btn { width: 100%; padding: 0 22px; font-size: 17px; } .btn-s { width: auto; } }

.btn-note { display: block; margin-top: 14px; font-size: 15px; line-height: 1.45; color: var(--muted); }
.theme-night .btn-note { color: var(--on-night-faint); }
.cta-block { display: flex; flex-direction: column; align-items: flex-start; }
.cta-block.is-center { align-items: center; text-align: center; }
.center .cta-block { align-items: center; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; margin-top: 30px; }

/* a text link with a pen underline that draws on hover */
.link {
  display: inline;
  font-weight: 600; text-decoration: none; color: inherit;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  padding-bottom: 3px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  transition: background-size .5s var(--ease-out), color .3s;
}
button.link { display: inline; text-align: left; line-height: inherit; }
.link:hover { background-image: linear-gradient(var(--pen), var(--pen)); background-size: 100% 2px; }
.link-quiet { font-weight: 500; opacity: .78; }
.link-quiet:hover { opacity: 1; }

/* seats line (filled from seats.json) */
.seats { display: block; margin-top: 12px; font-size: 15.5px; font-weight: 500; color: var(--ink-soft); }
.theme-night .seats { color: var(--on-night-soft); }
.seats[hidden] { display: none; }

/* small list of trust facts with pen ticks */
.ticks { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 28px; font-size: 15.5px; color: var(--ink-soft); }
.ticks-col { flex-direction: column; align-items: flex-start; }
.theme-night .ticks { color: var(--on-night-soft); }
.ticks li { display: inline-flex; align-items: center; gap: 9px; }
.tick-svg { width: 17px; height: 17px; flex: none; color: var(--pen); }
.theme-night .tick-svg { color: #F07A6E; }

/* Navigation */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  height: var(--nav-h);
  color: var(--ink);
  transition: transform .5s var(--ease-out), background-color .35s, color .35s, box-shadow .35s, backdrop-filter .35s;
}
.nav[data-on="night"] { color: var(--on-night); }
.nav.is-solid { background: rgba(246, 245, 242, .82); box-shadow: 0 1px 0 var(--line); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); }
.nav.is-solid[data-on="night"] { background: rgba(var(--night-rgb), .72); box-shadow: 0 1px 0 var(--on-night-line); }
.nav.is-hidden { transform: translateY(-105%); }
.nav-inner { height: 100%; display: flex; align-items: center; gap: 28px; }
.wordmark { display: inline-flex; align-items: baseline; gap: 10px; text-decoration: none; color: inherit; margin-right: auto; }
.wordmark-name { font-family: var(--f-display); font-size: 27px; font-weight: 500; letter-spacing: -.02em; line-height: 1; }
.wordmark-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pen); display: inline-block; transform: translateY(-2px); }
.nav-links { display: flex; align-items: center; gap: 26px; font-size: 15.5px; font-weight: 500; }
.nav-links a { text-decoration: none; position: relative; padding: 6px 0; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links a[aria-current="page"]::after { background: var(--pen); height: 2px; }
/* "Log in" is an account action, not a page: set apart by a hairline and drawn as a small outlined pill */
.nav-links .nav-login { margin-left: 10px; padding: 7px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1.2px currentColor; font-size: 14.5px; line-height: 1.15; opacity: .9; transition: opacity .25s, background-color .25s; }
.nav-links .nav-login::after { display: none; }
.nav-links .nav-login::before { content: ""; position: absolute; left: -19px; top: 50%; width: 1px; height: 22px; transform: translateY(-50%); background: currentColor; opacity: .28; }
.nav-links .nav-login:hover { opacity: 1; background-color: color-mix(in srgb, currentColor 10%, transparent); }
.nav-cta { margin-left: 4px; }
.menu-btn { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; margin-right: -10px; }
.menu-btn span { display: block; width: 22px; height: 1.5px; background: currentColor; position: relative; transition: transform .4s var(--ease-out), background .2s; }
.menu-btn span::before, .menu-btn span::after { content: ""; position: absolute; left: 0; width: 22px; height: 1.5px; background: currentColor; transition: transform .4s var(--ease-out); }
.menu-btn span::before { transform: translateY(-7px); }
.menu-btn span::after { transform: translateY(7px); }
.menu-open .menu-btn span { background: transparent; }
.menu-open .menu-btn span::before { transform: rotate(45deg); }
.menu-open .menu-btn span::after { transform: rotate(-45deg); }
@media (max-width: 1040px) {
  .nav-links { display: none; }
  .menu-btn { display: inline-flex; }
  .nav-inner { gap: 12px; }
}
@media (max-width: 380px) { .nav-cta { padding: 0 14px; font-size: 14px; } .wordmark-name { font-size: 24px; } }
.nav-cta { white-space: nowrap; }
@media (max-width: 400px) { .wordmark .logo-img { height: 16px; max-width: 38vw; } }

.menu {
  position: fixed; inset: 0; z-index: 55;
  background: var(--night); color: var(--on-night);
  padding: calc(var(--nav-h) + 24px) var(--gutter) 32px;
  display: flex; flex-direction: column; gap: 28px;
  visibility: hidden; opacity: 0;
  transition: opacity .4s var(--ease-out), visibility 0s .4s;
  overflow-y: auto;
}
.menu-open .menu { visibility: visible; opacity: 1; transition: opacity .4s var(--ease-out); }
.menu-open .nav { color: var(--on-night); background: transparent; box-shadow: none; backdrop-filter: none; transform: none; }
.menu-links { display: flex; flex-direction: column; }
.menu-links a { font-family: var(--f-display); font-size: clamp(34px, 9vw, 46px); line-height: 1.12; letter-spacing: -.02em; text-decoration: none; padding: 8px 0; border-bottom: 1px solid var(--on-night-line); transform: translateY(14px); opacity: 0; transition: transform .6s var(--ease-out), opacity .6s var(--ease-out); }
.menu-open .menu-links a { transform: none; opacity: 1; }
.menu-links a:nth-child(2) { transition-delay: .04s; } .menu-links a:nth-child(3) { transition-delay: .08s; }
.menu-links a:nth-child(4) { transition-delay: .12s; } .menu-links a:nth-child(5) { transition-delay: .16s; }
.menu-foot { margin-top: auto; display: flex; flex-direction: column; gap: 18px; font-size: 16px; color: var(--on-night-soft); }
.menu-foot a { color: var(--on-night); }
html.menu-open, html.menu-open body { overflow: hidden; }

/* reading line: the pen underlines the page as you read */
.read-line { position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 70; pointer-events: none; }
.read-line i { display: block; height: 100%; background: var(--pen); transform-origin: 0 50%; transform: scaleX(0); }

/* Paper documents */
.paper {
  position: relative; background: var(--paper); color: var(--ink);
  border-radius: 3px;
  box-shadow: var(--shadow-paper);
}
.theme-night .paper { box-shadow: var(--shadow-paper-night); }
.paper::after { /* fibre + lamp light */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(120% 90% at 85% 8%, rgba(255, 214, 140, .14), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0) 60%, rgba(var(--night-rgb), .035));
}

/* The test paper (SVG) */
.test-svg { width: 100%; height: auto; overflow: visible; }
.test-svg .q { font-family: var(--f-text); font-size: 13.4px; fill: #2A2440; }
.test-svg .q-b { font-weight: 700; }
.test-svg .q-m { fill: #7A7590; font-size: 12px; }
.test-svg .hd { font-family: var(--f-text); font-weight: 700; font-size: 15.5px; fill: var(--ink); letter-spacing: -.01em; }
.test-svg .hd-s { font-family: var(--f-text); font-size: 11.6px; fill: #6F6A86; }
.test-svg .rule { stroke: #DAD6E6; stroke-width: 1; }
.test-svg .ans-line { stroke: #E4E1EE; stroke-width: 1; stroke-dasharray: 3 4; }
.test-svg .hand { font-family: var(--f-hand); fill: var(--student-ink); font-size: 19px; }
.test-svg .pen-t { font-family: var(--f-pen); fill: var(--pen); font-size: 25px; }
.test-svg .pen-l { fill: none; stroke: var(--pen); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.test-svg .pen-l.thick { stroke-width: 2.8; }
.test-svg .stu-l { fill: none; stroke: var(--student-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.test-svg .hl-rect { fill: var(--highlight); mix-blend-mode: multiply; }
.test-svg .score { font-family: var(--f-pen); fill: var(--pen); font-size: 58px; }

/* the red pen object */
.pen-obj { pointer-events: none; }

/* Gap Report (HTML document, scales with its own width) */
.report {
  container-type: inline-size;
  width: 100%; max-width: 520px;
  background: var(--paper); color: var(--ink);
  border-radius: 4px;
  box-shadow: var(--shadow-paper);
  position: relative;
}
.report-inner { padding: 7.5cqw 7.8cqw 6.5cqw; font-size: 2.85cqw; line-height: 1.45; }
.report .r-top { display: flex; justify-content: space-between; align-items: baseline; }
.report .r-brand { font-family: var(--f-display); font-weight: 500; font-size: 1.9em; color: var(--violet); letter-spacing: -.02em; }
.report .r-kind { font-size: .82em; letter-spacing: .04em; color: var(--muted); }
.report .r-title { font-family: var(--f-display); font-size: 3.6em; line-height: 1; letter-spacing: -.03em; margin: .6em 0 .25em; }
.report .r-meta { font-size: .98em; color: var(--ink-soft); }
.report .r-rule { height: 1.5px; background: var(--violet); margin: .9em 0 1.1em; opacity: .85; }
.report .r-cols { display: grid; grid-template-columns: 1.45fr 1fr; gap: 1.6em; }
.report .r-h { font-family: var(--f-display); font-size: 1.42em; line-height: 1.15; margin: 0 0 .45em; letter-spacing: -.01em; }
.report .r-list li { margin-bottom: .55em; }
.report .r-list b { font-weight: 650; }
.report .r-bar { margin-bottom: .7em; font-size: .95em; }
.report .r-bar i { display: block; height: .5em; background: var(--violet); border-radius: 2px; margin-top: .25em; transform-origin: left; }
.report .r-total { font-weight: 700; margin-top: .4em; }
.report .r-could { display: inline-flex; align-items: baseline; gap: .4em; margin-top: .25em; font-size: .98em; }
.report .r-could b { font-family: var(--f-display); font-size: 1.5em; font-weight: 500; color: var(--violet-deep); }
.report .r-block { margin-top: 1.2em; }
.report .r-plan li { padding-left: 1em; position: relative; margin-bottom: .2em; }
.report .r-plan li::before { content: ""; position: absolute; left: 0; top: .62em; width: .42em; height: .42em; border-radius: 50%; background: var(--violet); }
.report .r-line { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: .8em; position: relative; font-size: .78em; text-align: center; color: var(--ink-soft); }
.report .r-line::before { content: ""; position: absolute; left: 10%; right: 10%; top: .42em; height: 1px; background: var(--violet-glow); }
.report .r-line span { position: relative; padding-top: 1.3em; }
.report .r-line span::before { content: ""; position: absolute; left: 50%; top: .18em; width: .5em; height: .5em; margin-left: -.25em; border-radius: 50%; background: var(--violet); }
.report .r-fight { margin-top: 1em; }
.report .r-foot { margin-top: 1.4em; font-size: .78em; color: var(--muted); }
.report [data-part] { transition: opacity .5s var(--ease-out), background-color .5s var(--ease-out), box-shadow .5s var(--ease-out); border-radius: .5em; }
.report.has-focus [data-part] { opacity: .28; }
.report.has-focus [data-part].is-focus { opacity: 1; background: rgba(253, 230, 138, .42); box-shadow: 0 0 0 .55em rgba(253, 230, 138, .42); }

/* the phone (Sunday report, WhatsApp-style) */
.phone {
  container-type: inline-size;
  width: min(100%, 330px);
  aspect-ratio: 9 / 17.4;
  border-radius: 46px;
  background: #0E0A1C;
  padding: 10px;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .08) inset, 0 40px 80px -30px rgba(var(--night-rgb), .55), 0 18px 30px -18px rgba(var(--night-rgb), .4);
  position: relative;
}
.phone-screen { height: 100%; border-radius: 37px; overflow: hidden; background: #EFEAE2; display: flex; flex-direction: column; position: relative; font-size: 3.9cqw; line-height: 1.35; color: #1B1B1B; }
.phone-screen::before { content: ""; position: absolute; top: 2.4cqw; left: 50%; width: 27cqw; height: 7.4cqw; margin-left: -13.5cqw; border-radius: 99px; background: #0E0A1C; z-index: 3; }
.phone-bar { background: #F7F5F2; padding: 13cqw 5cqw 3.6cqw; display: flex; align-items: center; gap: 3cqw; border-bottom: 1px solid rgba(0, 0, 0, .06); }
.phone-avatar { width: 10cqw; height: 10cqw; border-radius: 50%; background: var(--violet); display: grid; place-items: center; color: #fff; font-family: var(--f-display); font-size: 5.4cqw; }
.phone-name { font-weight: 650; font-size: 4.3cqw; }
.phone-sub { font-size: 3.2cqw; color: #6b6b6b; }
.phone-body { flex: 1; padding: 4.4cqw 4cqw; display: flex; flex-direction: column; gap: 2.6cqw; }
.phone-day { align-self: center; background: rgba(255, 255, 255, .8); border-radius: 2cqw; padding: 1cqw 3cqw; font-size: 3.1cqw; color: #555; }
.bubble { background: #fff; border-radius: 3.4cqw; border-top-left-radius: .8cqw; padding: 3.2cqw 3.6cqw 2.4cqw; max-width: 92%; box-shadow: 0 1px .5px rgba(0, 0, 0, .12); }
.bubble p { margin: 0 0 1.6cqw; }
.bubble b { font-weight: 700; }
.bubble-time { display: block; text-align: right; font-size: 2.8cqw; color: #8a8a8a; margin-top: 1cqw; }
.bubble-file { display: flex; align-items: center; gap: 2.6cqw; background: #F3F1EE; border-radius: 2.4cqw; padding: 2.4cqw; margin-bottom: 2cqw; font-size: 3.3cqw; }
.bubble-file i { width: 7cqw; height: 8.6cqw; border-radius: 1.2cqw; background: #E5483B; display: block; flex: none; position: relative; }
.bubble-file i::after { content: "PDF"; position: absolute; inset: auto 0 1.2cqw; text-align: center; font: 700 2.2cqw/1 var(--f-text); color: #fff; font-style: normal; }
.line-row { display: block; opacity: 1; }

/* Status pill: the Night Room's real status, from the clock in New York */
.status-pill { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 13px; border-radius: 999px; font-size: 14.5px; font-weight: 550; background: rgba(243, 240, 250, .08); color: var(--on-night); box-shadow: inset 0 0 0 1px var(--on-night-line); }
.theme-day .status-pill, .status-pill.on-day { background: var(--violet-pale); color: var(--ink); box-shadow: none; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--on-night-faint); flex: none; }
.status-pill[data-state="open"] .status-dot { background: #4ADE80; box-shadow: 0 0 0 0 rgba(74, 222, 128, .6); animation: breathe 2.6s var(--ease-in-out) infinite; }
.theme-day .status-pill .status-dot, .status-pill.on-day .status-dot { background: var(--muted); }
.theme-day .status-pill[data-state="open"] .status-dot { background: var(--good); }
@keyframes breathe { 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .55); } 70% { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); } }

/* Pen-numbered steps (a real sequence) */
.steps { counter-reset: step; display: grid; gap: clamp(28px, 3.4vw, 44px); }
.step { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 20px; align-items: start; }
.step-n { position: relative; width: 52px; height: 52px; display: grid; place-items: center; font-family: var(--f-display); font-size: 25px; color: var(--ink); }
.theme-night .step-n { color: var(--on-night); }
.step-n svg { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); overflow: visible; }
.step-n path { fill: none; stroke: var(--pen); stroke-width: 2.2; stroke-linecap: round; }
.step-t { font-family: var(--f-display); font-size: clamp(22px, 2vw, 28px); line-height: 1.2; letter-spacing: -.012em; margin-bottom: 8px; padding-top: 9px; }
.step-b { color: var(--ink-soft); }
.theme-night .step-b { color: var(--on-night-soft); }

/* Struck-through list (the usual help) */
.struck { display: grid; gap: 18px; }
.struck li { position: relative; font-family: var(--f-display); font-size: clamp(22px, 2.15vw, 30px); line-height: 1.25; letter-spacing: -.012em; color: var(--ink-soft); width: fit-content; max-width: 100%; }
.struck li .strike-svg { position: absolute; left: -2%; top: 0; width: 104%; height: 100%; overflow: visible; pointer-events: none; }
.struck li .strike-svg path { fill: none; stroke: var(--pen); stroke-width: 2.4; stroke-linecap: round; }

/* Checks and crosses (who it's for) */
.marks { display: grid; gap: 18px; }
.marks li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; align-items: start; font-size: clamp(17.5px, 1.35vw, 19.5px); line-height: 1.5; }
.mark-svg { width: 28px; height: 28px; margin-top: -1px; overflow: visible; }
.mark-svg path { fill: none; stroke: var(--pen); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.marks.is-not li { color: var(--ink-soft); }
html:not(.js) .marks li { display: block; }
.marks.is-not .mark-svg path { stroke: var(--ink-soft); opacity: .65; }

/* The checkable list (violet ink boxes that tick) */
.checks { display: grid; gap: 0; border-top: 1px solid var(--line); }
.checks li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 18px; padding: 26px 0; border-bottom: 1px solid var(--line); align-items: start; }
.check-box { width: 28px; height: 28px; position: relative; margin-top: 1px; }
.check-box svg { position: absolute; inset: 0; width: 28px; height: 28px; overflow: visible; }
.check-box path { fill: none; stroke: var(--pen); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.checks .c-title { font-weight: 650; display: block; margin-bottom: 4px; }
.checks .c-body { color: var(--ink-soft); }

/* Stats (proof) */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); margin-bottom: clamp(56px, 7vw, 96px); }
.stat { border-top: 1.5px solid var(--ink); padding-top: 22px; }
.stat-n { font-family: var(--f-display); font-size: clamp(60px, 7.4vw, 112px); line-height: .95; letter-spacing: -.04em; font-variant-numeric: lining-nums tabular-nums; display: block; }
.stat-l { display: block; margin-top: 14px; color: var(--ink-soft); font-size: 16.5px; max-width: 18em; }
@media (max-width: 720px) { .stats { grid-template-columns: minmax(0, 1fr); } }

/* Proof cards (real screenshots, names blurred) */
.proof-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.6vw, 36px); }
@media (max-width: 860px) { .proof-grid { gap: 16px; } }
@media (max-width: 560px) {
  .proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .proof-grid > .proof-card:last-child:nth-child(odd) { grid-column: 1 / -1; width: calc(50% - 6px); justify-self: center; }
  .proof-card figcaption { font-size: 13.5px; margin-top: 9px; }
  .proof-ghost::after { content: "Your screenshot"; font-size: 10.5px; padding: 6px 9px; bottom: 9%; }
}
.proof-card { margin: 0; }
/* the screenshot shows whole inside its frame (nothing to open or zoom) */
.proof-shot { display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow-soft); position: relative; }
.proof-shot img { width: 100%; height: 100%; object-fit: contain; object-position: center; padding: 6px; }
.proof-card figcaption { margin-top: 14px; font-weight: 650; font-size: 15.5px; line-height: 1.4; }
.proof-ghost { position: absolute; inset: 0; padding: 12% 10%; display: flex; flex-direction: column; gap: 6%; background: linear-gradient(180deg, #F2EFE9, #ECE7DE); }
.proof-ghost span { display: block; height: 9%; width: 72%; border-radius: 12px; background: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, .05); filter: blur(.3px); }
.proof-ghost span.me { align-self: flex-end; width: 64%; background: #DCF3D3; }
.proof-ghost span.short { width: 38%; }

/* Lightbox for proof */

/* FAQ (accordion) */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 34px; gap: 20px; align-items: center; padding: 26px 0; font-family: var(--f-display); font-size: clamp(21px, 1.9vw, 27px); line-height: 1.25; letter-spacing: -.012em; }
.faq summary::-webkit-details-marker { display: none; }
.faq .plus { width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-strong); position: relative; transition: background .3s, transform .5s var(--ease-out); }
.faq .plus::before, .faq .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; margin: -.8px 0 0 -6px; background: currentColor; transition: transform .5s var(--ease-out); }
.faq .plus::after { transform: rotate(90deg); }
.faq details[open] .plus { background: var(--ink); color: var(--day); transform: rotate(180deg); }
.faq details[open] .plus::after { transform: rotate(0); }
.faq .answer { padding: 0 54px 28px 0; color: var(--ink-soft); max-width: 46em; }
.faq .answer p + p { margin-top: .6em; }
.faq summary:hover { color: var(--violet-deep); }
.theme-night .faq, .theme-night .faq details { border-color: var(--on-night-line); }
.theme-night .faq .answer { color: var(--on-night-soft); }

/* Footer */
.footer { position: relative; overflow: hidden; padding: clamp(80px, 9vw, 130px) 0 40px; background: var(--night); color: var(--on-night); }
.footer-top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 40px 32px; position: relative; z-index: 2; }
.footer h3 { font-size: 13.5px; font-weight: 600; color: var(--on-night-faint); margin-bottom: 16px; letter-spacing: .01em; }
.footer li { margin-bottom: 10px; font-size: 15.5px; }
.footer a { text-decoration: none; color: var(--on-night-soft); transition: color .25s; }
.footer a:hover { color: var(--on-night); }
.footer-lead { font-family: var(--f-display); font-size: clamp(26px, 2.6vw, 36px); line-height: 1.15; letter-spacing: -.015em; max-width: 13em; margin-bottom: 26px; }
.footer-legal { position: relative; z-index: 2; margin-top: 72px; padding-top: 26px; border-top: 1px solid var(--on-night-line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 30px; font-size: 13.5px; color: var(--on-night-faint); }
@media (max-width: 960px) { .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } }

/* Sticky phone bar */
.sticky-cta { position: fixed; z-index: 50; left: 12px; right: 12px; bottom: 12px; display: none; align-items: center; gap: 12px; padding: 10px 10px 10px 18px; border-radius: 999px; background: rgba(var(--night-rgb), .9); color: var(--on-night); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 18px 40px -16px rgba(var(--night-rgb), .6); transform: translateY(140%); transition: transform .55s var(--ease-out); }
.sticky-cta.is-in { transform: none; }
.sticky-cta .sc-text { font-size: 14px; line-height: 1.25; flex: 1; color: var(--on-night-soft); }
.sticky-cta .sc-text b { color: var(--on-night); display: block; font-size: 14.5px; }
.sticky-cta .btn { width: auto; --btn-h: 46px; padding: 0 20px; font-size: 15px; }
/* phones: solid instead of blurred (a blur behind a fixed bar is redrawn on every frame of every scroll) */
@media (max-width: 760px) { .sticky-cta { display: flex; background: var(--night); backdrop-filter: none; -webkit-backdrop-filter: none; } }

/* Media slots (generated photos/video) and their in-code fallbacks */
.media { position: relative; overflow: hidden; border-radius: var(--radius-l); background: var(--night-2); }
.media-img { width: 100%; height: 100%; object-fit: cover; }
.media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- 7. Sections ---------- */

/* HERO (night) */
.hero { position: relative; min-height: 100svh; padding-top: calc(var(--nav-h) + clamp(20px, 4.5vh, 56px)); padding-bottom: 0; overflow: hidden; display: flex; flex-direction: column; }
.hero .lamp {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(42vmax 34vmax at var(--lx, 74%) var(--ly, 26%), rgba(255, 207, 112, .17), rgba(255, 207, 112, .05) 45%, transparent 70%),
    radial-gradient(60vmax 50vmax at 10% 110%, rgba(124, 58, 237, .26), transparent 60%),
    radial-gradient(40vmax 40vmax at 100% 100%, rgba(var(--night-3-rgb), .7), transparent 60%);
  transition: opacity 1.4s var(--ease-out);
}
.motion .hero .lamp { opacity: 0; }
.motion .hero.is-lit .lamp { opacity: 1; }
.hero-grid { flex: 1; display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); gap: clamp(32px, 4vw, 72px); align-items: center; padding-bottom: clamp(48px, 7vh, 90px); }
.hero-copy { position: relative; z-index: 3; padding-top: 8px; }
.hero h1 { max-width: 10.6em; }
.hero .deck { margin-top: 22px; max-width: 19em; color: var(--on-night-soft); font-size: clamp(22px, 2.1vw, 30px); }
.hero .lead { margin-top: 20px; max-width: 31em; color: var(--on-night-soft); }
.hero .cta-row { margin-top: 32px; }
.hero-stage { position: relative; z-index: 2; width: min(100%, 560px, calc((100svh - var(--nav-h) - 110px) * .77)); justify-self: end; perspective: 1600px; }
.hero-paper { transform: rotate(-3.2deg); transform-style: preserve-3d; will-change: transform; }
.hero-paper .paper { padding: 0; }
@media (max-width: 900px) {
  .hero { min-height: 0; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 54px; padding-bottom: 64px; }
  .hero-stage { justify-self: center; width: min(92%, 440px); }
  .hero-grid { padding-bottom: 72px; }
  .hero h1 { max-width: 10em; }
}

/* STORY: where the points went (sticky stage, night → day) */
.story { --bg: var(--night); --fg: var(--on-night); --fg-soft: var(--on-night-soft); --card: rgba(var(--night-rgb), .82); background: var(--bg); color: var(--fg); position: relative; overflow: clip; padding-block: clamp(72px, 8vw, 120px) clamp(80px, 9vw, 140px); }
.story.is-day { --bg: var(--day); --fg: var(--ink); --fg-soft: var(--ink-soft); --card: rgba(246, 245, 242, .9); }
.story { transition: background-color .9s var(--ease-in-out), color .9s var(--ease-in-out); }
.story .soft { color: var(--fg-soft); transition: color .9s var(--ease-in-out); }
.story-intro { max-width: 860px; margin-bottom: clamp(40px, 6vw, 80px); }
.story-intro .quote { margin-top: 34px; max-width: 22em; }
.story-intro cite { display: block; margin-top: 14px; font-style: normal; font-size: 15px; color: var(--fg-soft); }
.story-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(32px, 5vw, 90px); }
.story-steps { position: relative; z-index: 3; }
.story-step { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; padding-block: 6vh; max-width: 30em; }
.story-step:first-child { min-height: 70vh; }
.story-step .tag { font-family: var(--f-pen); color: var(--pen); font-size: 27px; line-height: 1; margin-bottom: 14px; display: block; }
.story.is-day .story-step .tag { color: var(--pen); }
.story-step h3 { font-family: var(--f-display); font-size: clamp(30px, 3.2vw, 46px); line-height: 1.06; letter-spacing: -.022em; margin-bottom: 18px; text-wrap: balance; }
.story-step p { color: var(--fg-soft); transition: color .9s var(--ease-in-out); font-size: clamp(17.5px, 1.35vw, 19.5px); }
.story-step .lost { display: inline-block; margin-top: 18px; font-family: var(--f-pen); font-size: 30px; color: var(--pen); line-height: 1; }
.story-stage { position: sticky; top: calc(var(--nav-h) + 4vh); height: calc(100vh - var(--nav-h) - 8vh); display: grid; place-items: center; z-index: 1; }
/* the paper fits the stage's height (with room for its turn and the soft top and bottom edges), so short laptop screens see the whole page */
.stage-inner { position: relative; width: min(100%, 560px, calc((100vh - var(--nav-h) - 8vh - 52px) * 600 / 780)); aspect-ratio: 600 / 780; max-height: 100%; }
.stage-cam { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }
.stage-test { position: absolute; inset: 0; transform: rotate(-2deg); transition: transform 1.1s var(--ease-out), opacity .9s var(--ease-out); }
.stage-report { position: absolute; left: 6%; right: -2%; top: 3%; opacity: 0; transform: translateY(14%) rotate(3deg); transition: transform 1.1s var(--ease-out), opacity .8s var(--ease-out); }
.story.show-report .stage-test { transform: translate(-12%, 7%) rotate(-7deg) scale(.9); opacity: .55; }
.story.show-report .stage-report { opacity: 1; transform: rotate(1.4deg); }
.spot { position: absolute; border-radius: 10px; pointer-events: none; box-shadow: 0 0 0 200vmax rgba(var(--night-rgb), .5); opacity: 0; transition: opacity .6s var(--ease-out), left .9s var(--ease-out), top .9s var(--ease-out), width .9s var(--ease-out), height .9s var(--ease-out); }
.story.is-day .spot { box-shadow: 0 0 0 200vmax rgba(246, 245, 242, .55); }
.spot.is-on { opacity: 1; }
.story-cta { margin-top: 24px; }
@media (max-width: 900px) {
  .story-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* phones (Oct 28, 2026): the heading and the quote come first, then the paper, so the hero's paper and this one
     never sit back to back. The steps' wrapper steps aside, so the intro, the stage and the cards share one column. */
  .story-steps { display: contents; }
  .story-intro { order: -2; }
  .story-stage { order: -1; top: calc(var(--nav-h) + 8px); height: 52vh; height: 52svh; margin-bottom: -6vh; }
  .stage-inner { width: auto; height: 100%; max-width: 100%; }
  /* the cards are solid instead of blurring the paper behind them: a blur is redrawn on every frame of the scroll */
  .story { --card: var(--night); }
  .story.is-day { --card: var(--day); }
  .story-step { position: relative; z-index: 3; min-height: 0; margin: 0 0 58vh; padding: 22px 22px 24px; border-radius: 20px; background: var(--card); box-shadow: 0 20px 50px -30px rgba(0, 0, 0, .5); transition: background-color .9s var(--ease-in-out); }
  .story-step.story-intro { min-height: 0; margin: 0 0 clamp(40px, 9vw, 64px); padding: 0; border-radius: 0; background: none; box-shadow: none; }
  .story-step:last-child { margin-bottom: 8vh; }
  .story-step h3 { font-size: 27px; }
  /* the highlight fades from one question to the next (opacity only) instead of sliding, which re-lays out the page each frame */
  .spot { transition: opacity .3s var(--ease-out); }
}

/* METHOD */
.method-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
@media (max-width: 900px) { .method-grid { grid-template-columns: minmax(0, 1fr); } }

/* WEEK STRIP */
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1.5px solid var(--ink); }
.day { position: relative; padding: 22px 16px 26px 0; border-right: 1px solid var(--line); min-height: 280px; }
.day + .day { padding-left: 16px; }
.day:last-child { border-right: 0; }
.day-name { font-family: var(--f-display); font-size: 26px; letter-spacing: -.01em; line-height: 1; display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.day-today { font-family: var(--f-pen); color: var(--pen); font-size: 21px; opacity: 0; transition: opacity .4s; }
.day.is-today .day-today { opacity: 1; }
.day.is-today::before { content: ""; position: absolute; left: 0; right: 0; top: -1.5px; height: 3px; background: var(--pen); }
.day-ev { margin-top: 20px; display: grid; gap: 14px; }
.ev { font-size: 15px; line-height: 1.4; }
.ev b { display: block; font-size: 15.5px; font-weight: 650; margin-bottom: 3px; color: var(--ink); }
.ev span { color: var(--ink-soft); }
.ev-glyph { width: 26px; height: 26px; display: block; margin-bottom: 8px; overflow: visible; }
.ev-glyph * { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.g-violet * { stroke: var(--violet); } .g-pen * { stroke: var(--pen); } .g-ink * { stroke: var(--ink); }
.g-fill { fill: var(--violet) !important; stroke: none !important; }
@media (max-width: 1080px) {
  .week { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; border-top: 0; }
  .day, .day + .day { border: 0; border-top: 1.5px solid var(--ink); background: var(--paper); border-radius: 0 0 16px 16px; padding: 20px 18px 22px; min-height: 0; box-shadow: var(--shadow-soft); }
}
@media (max-width: 640px) {
  /* phones: the whole week in one planner card, every day visible, nothing to swipe */
  .week { display: block; background: var(--paper); border-radius: 18px; box-shadow: var(--shadow-soft); padding: 2px 18px; }
  .day, .day + .day { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 2px 14px; padding: 16px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; min-height: 0; }
  .day:last-child { border-bottom: 0; }
  .day-name { font-size: 21px; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 5px; }
  .day-ev { margin-top: 0; min-height: 0; gap: 6px; }
  .ev-glyph { display: none; }
  .ev b { font-size: 15.5px; }
  .ev span { font-size: 15px; }
  .ev-nr { margin-top: 2px; padding-top: 0; border-top: 0; }
  .ev-nr b, .ev-nr span { font-size: 13.5px; color: var(--muted); }
  .day.is-today::before { left: -18px; right: auto; top: 12px; bottom: 12px; width: 3px; height: auto; border-radius: 0 3px 3px 0; }
}
.week-note { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px 28px; color: var(--ink-soft); font-size: 15.5px; }

/* PRICE (compact block and the full ledger) */
.price-block { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: end; margin-top: clamp(56px, 7vw, 100px); padding-top: clamp(40px, 5vw, 60px); border-top: 1px solid var(--line); }
@media (max-width: 900px) { .price-block { grid-template-columns: minmax(0, 1fr); align-items: start; } }
.price-big { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.price-big .amt { font-family: var(--f-display); font-size: clamp(76px, 9.6vw, 148px); line-height: .9; letter-spacing: -.045em; }
.price-big .per { font-size: 17px; color: var(--ink-soft); line-height: 1.35; }
.guarantee-mini { display: grid; gap: 22px; }
.g-item { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; align-items: start; }
.g-seal, .g-item .seal { width: 36px; height: 36px; overflow: visible; margin-top: -2px; }
.g-item b { display: block; font-size: 17.5px; margin-bottom: 4px; }
.g-item span { color: var(--ink-soft); font-size: 16px; }
.why-line { margin-top: 22px; font-size: 15px; color: var(--muted); max-width: 34em; }

/* NIGHT ROOM */
.night-room { overflow: hidden; }
.lamp-cursor { position: absolute; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(420px 420px at var(--cx, 76%) var(--cy, 58%), rgba(255, 207, 112, .09), transparent 70%); transition: opacity .6s; }
.clock-line { margin: 0; font-family: var(--f-display); font-size: clamp(84px, 15vw, 240px); line-height: .86; letter-spacing: -.05em; font-weight: 300; display: flex; align-items: baseline; gap: .12em; white-space: nowrap; }
.clock-line small { font-size: .2em; letter-spacing: 0; font-weight: 400; color: var(--on-night-soft); font-family: var(--f-text); }
.nr-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 100px); align-items: center; margin-top: clamp(40px, 5vw, 70px); }
@media (max-width: 900px) { .nr-grid { grid-template-columns: minmax(0, 1fr); } }
.screen { position: relative; border-radius: 22px; background: #0B0717; padding: 12px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 40px 100px -40px rgba(124, 58, 237, .55), 0 30px 60px -30px rgba(0, 0, 0, .8); }
.screen-bar { display: flex; align-items: center; gap: 8px; padding: 4px 6px 12px; font-size: 12.5px; color: var(--on-night-faint); }
.screen-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .16); display: block; }
.screen-bar .rec { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.screen-bar .rec::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #F87171; }
.board { border-radius: 12px; overflow: hidden; background: #FBFAF7; }
.board svg { width: 100%; height: auto; }
.board .b-q { font-family: var(--f-text); font-size: 15px; fill: #2A2440; }
.board .b-hand { font-family: var(--f-hand); fill: var(--student-ink); font-size: 21px; }
.board .b-tut { font-family: var(--f-pen); fill: var(--violet); font-size: 25px; }
.board .b-grid { stroke: #EAE7F0; stroke-width: 1; }
.nr-photo { margin-top: 18px; }

/* SUNDAY */
.sunday { position: relative; overflow: hidden; }
.sunday::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70vmax 50vmax at 92% 0%, rgba(255, 212, 140, .32), transparent 62%), radial-gradient(50vmax 40vmax at 0% 100%, rgba(167, 139, 250, .14), transparent 60%); }
.sunday > * { position: relative; }
.sunday-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(40px, 6vw, 100px); align-items: center; }
@media (max-width: 900px) { .sunday-grid { grid-template-columns: minmax(0, 1fr); } }
.five { margin-top: 30px; display: grid; gap: 0; counter-reset: five; border-top: 1px solid var(--line); }
.five li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 16.5px; }
.five li b { font-weight: 650; }
.five li span { color: var(--ink-soft); }
@media (max-width: 520px) { .five li { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.phone-wrap { justify-self: center; width: min(100%, 330px); transform: rotate(2.4deg); }

/* WHO / STANDARD */
.who-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 100px); }
@media (max-width: 860px) { .who-grid { grid-template-columns: minmax(0, 1fr); } }
.who-col h3 { font-family: var(--f-display); font-size: clamp(25px, 2.2vw, 32px); letter-spacing: -.015em; margin-bottom: 26px; }

/* CLOSING (night) */
.closing { text-align: center; overflow: hidden; padding-bottom: clamp(80px, 9vw, 120px); }
.closing .note { font-family: var(--f-display); font-style: italic; font-weight: 350; font-size: clamp(21px, 2vw, 28px); line-height: 1.4; color: var(--on-night-soft); max-width: 30em; margin: 0 auto clamp(56px, 7vw, 90px); }
.closing .note p { margin-bottom: .55em; }
.closing h2 { max-width: 13em; margin-inline: auto; }
.closing .cta-block { margin-top: 40px; align-items: center; }
.closing .wa-link { margin-top: 26px; }

/* PAGE HEROES (inner pages) */
.page-hero { padding-top: calc(var(--nav-h) + clamp(56px, 9vw, 130px)); padding-bottom: clamp(72px, 9vw, 130px); position: relative; overflow: hidden; overflow: clip; }
.page-hero h1 { max-width: 12em; }
.page-hero .deck { margin-top: 24px; max-width: 22em; }
.page-hero .lead { margin-top: 26px; max-width: 34em; }
.page-hero.theme-night .deck, .page-hero.theme-night .lead { color: var(--on-night-soft); }
.page-hero .cta-row { margin-top: 36px; }
.page-hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(36px, 5vw, 90px); align-items: center; }
@media (max-width: 900px) { .page-hero-grid { grid-template-columns: minmax(0, 1fr); } }

/* Generic inclusion rows with value tags (program) */
.rows { border-top: 1.5px solid var(--ink); }
.row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 40px; padding: 30px 0; border-bottom: 1px solid var(--line); align-items: start; }
.row h3 { font-family: var(--f-display); font-size: clamp(23px, 2.1vw, 30px); line-height: 1.15; letter-spacing: -.015em; margin-bottom: 10px; }
.row p { color: var(--ink-soft); max-width: 40em; }
.row .tag-val { font-size: 15px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; padding-top: 8px; }
.tag-val:has(b) { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 5px; text-align: right; }
.tag-val b { display: inline-block; font-size: 13px; font-weight: 650; letter-spacing: .01em; color: var(--ink-violet); background: var(--violet-pale); padding: 5px 11px 4px; border-radius: 99px; }
.tag-val b + span { font-size: 13.5px; color: var(--muted); }
/* (the wide layout is spelled out here as well, so the laptop view's copy of this line wins over the narrow one below) */
.row .tag-val:has(b) { white-space: nowrap; flex-direction: column; align-items: flex-end; gap: 5px; text-align: right; }
/* when the list sits in a narrow column, the tag moves under the text instead of squeezing it */
.rows { container-type: inline-size; }
@container (max-width: 620px) {
  .row { grid-template-columns: minmax(0, 1fr); }
  .row .tag-val { padding-top: 0; }
  .row .tag-val:has(b) { flex-direction: row; align-items: center; gap: 10px; text-align: left; white-space: normal; }
}
@media (max-width: 640px) { .row { grid-template-columns: minmax(0, 1fr); } .row .tag-val { padding-top: 0; } .row .tag-val:has(b) { flex-direction: row; align-items: center; gap: 10px; text-align: left; white-space: normal; } }

/* Ledger (price) */
.ledger { background: var(--paper); border-radius: 6px; box-shadow: var(--shadow-paper); padding: clamp(26px, 3.6vw, 48px); }
.ledger h3 { font-family: var(--f-display); font-size: clamp(25px, 2.2vw, 32px); margin-bottom: 18px; letter-spacing: -.015em; }
.ledger-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; padding: 16px 0; border-bottom: 1px dashed var(--line-strong); font-size: 17px; align-items: baseline; }
.ledger-row:last-of-type { border-bottom: 0; }
.ledger-row b { font-variant-numeric: lining-nums tabular-nums; font-weight: 650; white-space: nowrap; }
.ledger-row small { display: block; color: var(--muted); font-size: 14px; margin-top: 2px; }
.ledger-foot { margin-top: 18px; padding-top: 18px; border-top: 1.5px solid var(--ink); color: var(--ink-soft); font-size: 15.5px; }

/* Compare table */
.compare { width: 100%; border-collapse: collapse; font-size: 16px; }
.compare th, .compare td { text-align: left; padding: 16px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare thead th { font-weight: 650; font-size: 15px; color: var(--ink-soft); border-bottom: 1.5px solid var(--ink); }
.compare tbody th { font-weight: 550; width: 34%; }
.compare td.us { font-weight: 600; }
.compare td.none { color: var(--muted); }
.compare-wrap { overflow-x: auto; }
@media (max-width: 640px) { .compare { font-size: 14.5px; } .compare th, .compare td { padding: 12px 8px; } }

/* Guarantees as a signed document */
.promise-doc { background: var(--paper); border-radius: 6px; box-shadow: var(--shadow-paper); padding: clamp(28px, 4.4vw, 64px); position: relative; }
.promise { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 20px; padding: 30px 0; border-bottom: 1px solid var(--line); }
.promise:first-of-type { padding-top: 6px; }
.promise:last-of-type { border-bottom: 0; }
.promise h3 { font-family: var(--f-display); font-size: clamp(23px, 2.2vw, 31px); line-height: 1.15; letter-spacing: -.015em; }
.promise .formal { display: block; font-size: 14px; color: var(--muted); margin: 6px 0 12px; }
.promise p { color: var(--ink-soft); }
.seal { width: 48px; height: 48px; overflow: visible; flex: none; }
.sign-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-top: 26px; padding-top: 24px; border-top: 1.5px solid var(--ink); }
.signature { font-family: var(--f-pen); font-size: 38px; color: var(--violet-deep); line-height: 1; }

/* Timeline (the year) */
.year { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; padding-top: 46px; }
.year::before { content: ""; position: absolute; left: 0; right: 0; top: 13px; height: 2px; background: var(--line-strong); }
.year .y-fill { position: absolute; left: 0; top: 13px; height: 2px; background: var(--pen); transform-origin: left; transform: scaleX(0); width: 100%; }
.y-item { position: relative; }
.y-item::before { content: ""; position: absolute; top: -40px; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--day); box-shadow: inset 0 0 0 2px var(--ink); }
.y-item.is-first::before { background: var(--pen); box-shadow: none; }
.y-when { font-size: 14px; color: var(--muted); margin-bottom: 6px; display: block; }
.y-item h3 { font-family: var(--f-display); font-size: 24px; letter-spacing: -.012em; line-height: 1.15; margin-bottom: 8px; }
.y-item p { font-size: 15.5px; color: var(--ink-soft); }
@media (max-width: 960px) {
  .year { grid-template-columns: minmax(0, 1fr); padding-top: 0; padding-left: 36px; gap: 34px; }
  .year::before { left: 7px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .year .y-fill { left: 7px; top: 0; width: 2px; height: 100%; transform-origin: top; transform: scaleY(0); }
  .y-item::before { top: 4px; left: -36px; }
}

/* Form card (the website Tally form) */
.form-card { background: var(--paper); border-radius: var(--radius-l); box-shadow: var(--shadow-paper); padding: clamp(22px, 3vw, 40px); position: relative; }
.form-card h2 { font-family: var(--f-display); font-size: clamp(26px, 2.5vw, 36px); letter-spacing: -.018em; line-height: 1.1; margin-bottom: 8px; }
.form-card .form-sub { color: var(--ink-soft); font-size: 16px; margin-bottom: 18px; }
.tally-slot iframe { width: 100%; border: 0; min-height: 520px; }
.form-preview { display: grid; gap: 14px; padding-top: 4px; }
.fp-q { font-weight: 650; font-size: 17px; }
.fp-opts { display: grid; gap: 10px; }
.fp-opt { border: 1px solid var(--line-strong); border-radius: 12px; padding: 14px 16px; font-size: 16px; display: flex; align-items: center; gap: 12px; background: var(--paper); }
.fp-opt i { width: 18px; height: 18px; border-radius: 50%; border: 1.6px solid var(--line-strong); flex: none; }
.fp-next { pointer-events: none; margin-top: 6px; }

/* Legal / reference pages */
.legal-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(40px, 6vw, 100px); align-items: start; }
.legal-toc { position: sticky; top: calc(var(--nav-h) + 30px); font-size: 15px; }
.legal-toc a { display: block; padding: 7px 0; text-decoration: none; color: var(--ink-soft); border-left: 2px solid var(--line); padding-left: 14px; }
.legal-toc a:hover { color: var(--ink); border-color: var(--pen); }
.legal-body h2 { font-family: var(--f-display); font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -.016em; margin: 56px 0 16px; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 { font-size: 18px; font-weight: 650; margin: 26px 0 8px; }
.legal-body p, .legal-body li { color: var(--ink-soft); max-width: 44em; }
.legal-body ul { margin: 0 0 1em; display: grid; gap: 8px; }
.legal-body ul li { padding-left: 18px; position: relative; }
.legal-body ul li::before { content: ""; position: absolute; left: 0; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
@media (max-width: 900px) { .legal-grid { grid-template-columns: minmax(0, 1fr); } .legal-toc { position: static; } }

/* ---------- 8. Motion states (only when motion is on) ---------- */
.motion [data-reveal] { opacity: 0; }
.motion [data-reveal="up"] { transform: translateY(26px); }
.motion [data-reveal].is-in { opacity: 1; transform: none; transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out); }
.motion [data-reveal="card"] { transform: translateY(34px); }
.no-motion [data-reveal], .no-motion [data-reveal="up"] { opacity: 1 !important; transform: none !important; }
.motion .split-line { overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
@media (prefers-reduced-motion: reduce) {
  /* .force-motion = the ?motion=on preview (layout.html) */
  :root:not(.force-motion) *, :root:not(.force-motion) *::before, :root:not(.force-motion) *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  :root:not(.force-motion) .grain::after { animation: none; }
}

/* ---------- 9. Utilities ---------- */
.nw { white-space: nowrap; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mt-s { margin-top: 18px; } .mt-m { margin-top: 32px; } .mt-l { margin-top: 56px; }
.only-phone { display: none; }
@media (max-width: 760px) { .only-phone { display: initial; } .not-phone { display: none !important; } }
[hidden] { display: none !important; }
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }

/* chat bubbles from the parent (right side) and a photo of a test */
.bubble-me { align-self: flex-end; background: #DCF8C6; border-top-left-radius: 3.4cqw; border-top-right-radius: .8cqw; }
.bubble-photo { position: relative; height: 34cqw; border-radius: 2.2cqw; background: #fff; margin-bottom: 2.2cqw; padding: 4cqw 4cqw; display: flex; flex-direction: column; gap: 2.4cqw; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); transform: rotate(-1.5deg); }
.bubble-photo .bp-l { display: block; height: 1.6cqw; width: 78%; background: #DAD6E6; border-radius: 1cqw; }
.bubble-photo .bp-l.s { width: 52%; }
.bubble-photo .bp-score { position: absolute; right: 4cqw; top: 3cqw; font-family: var(--f-pen); color: var(--pen); font-size: 9cqw; line-height: 1; border: .5cqw solid var(--pen); border-radius: 50%; padding: 1.2cqw 2.2cqw; }
.ev-nr { margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--line-strong); }
.ev-nr b { font-size: 14px; color: var(--ink-soft); font-weight: 600; margin-bottom: 0; display: inline; }
.ev-nr span { font-size: 14px; }
.ev-nr b::after { content: " "; }
.day-ev { display: flex; flex-direction: column; min-height: calc(100% - 46px); }

/* story intro lives in the steps column */
.story-intro { min-height: 84vh; justify-content: center; }
.story-intro .quote { margin-top: 30px; max-width: 18em; }
.story-intro cite { display: block; margin-top: 14px; font-style: normal; font-size: 15px; color: var(--fg-soft); }
.story-intro p { color: var(--fg-soft); }
.stage-report .report { transform-origin: top center; }

/* strike lines, one per line of text */
.struck li { padding: 2px 0; }
.struck .st-line { position: absolute; pointer-events: none; overflow: visible; }
.struck .st-line path { fill: none; stroke: var(--pen); stroke-width: 2.4; stroke-linecap: round; }

/* door visual */
.door-visual { position: sticky; top: calc(var(--nav-h) + 40px); display: grid; justify-items: center; padding-top: 30px; }
.door-visual .phone { transform: rotate(-2.2deg); }
@media (max-width: 900px) { .door-visual { position: static; padding-top: 0; } }

/* proof placeholders (only until the real screenshot is in images/) */
.proof-ghost::after { content: "Your screenshot goes here"; position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); white-space: nowrap; font: 600 12px/1 var(--f-text); color: var(--muted); background: rgba(255,255,255,.85); border-radius: 99px; padding: 7px 11px; }
.proof-card:nth-child(2n) .proof-ghost span:nth-child(1) { width: 58%; }
.proof-card:nth-child(2n) .proof-ghost span.me { width: 70%; }
.proof-card:nth-child(3n) .proof-ghost span:nth-child(2) { width: 44%; }
.proof-card:nth-child(3n) .proof-ghost span:nth-child(4) { height: 16%; }
.proof-ghost span { filter: blur(.6px); }
/* keep the zoomed paper out of the text column; where the zoomed paper meets the frame's top and bottom, it fades instead of being cut */
@media (min-width: 901px) {
  .story-stage {
    overflow: clip; overflow-clip-margin: 0; padding-inline: 40px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 100%), linear-gradient(180deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 100%), linear-gradient(180deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
    mask-composite: intersect;
  }
}
.footer a { overflow-wrap: anywhere; }
.door-visual { position: relative; }
.door-photo:empty { display: none; }
.door-photo { width: 100%; aspect-ratio: 4 / 5; border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow-soft); }
.door-photo + .phone { margin-top: -38%; margin-left: 28%; width: min(70%, 300px); }
/* the Night Room photo: a lamp-lit desk behind the big clock (the lit paper sits right, the dark desk left, under the type) */
.night-photo { position: absolute; left: 0; right: 0; top: 0; height: min(86vh, 820px); z-index: 0; pointer-events: none; }
.night-photo:empty { display: none; }
.night-photo img, .night-photo video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 64% 50%; opacity: .78; }
/* the video stays invisible until it really plays (the photo shows until then, e.g. in an iPhone's Low Power Mode) */
.night-photo video { opacity: 0; transition: opacity .8s var(--ease-out); }
.night-photo.has-video video { opacity: .78; }
.night-photo::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(var(--night-rgb), .3) 0%, rgba(var(--night-rgb), .05) 24%, rgba(var(--night-rgb), .5) 58%, var(--night) 94%),
  linear-gradient(90deg, rgba(var(--night-rgb), .7) 0%, rgba(var(--night-rgb), .12) 48%, rgba(var(--night-rgb), .2) 100%); }
@media (max-width: 760px) {
  .night-photo { height: 560px; }
  .night-photo img, .night-photo video { object-position: 74% 50%; opacity: 1; }
  .night-photo video { opacity: 0; }
  .night-photo.has-video video { opacity: 1; }
  .night-photo::after { background: linear-gradient(180deg, rgba(var(--night-rgb), .2) 0%, rgba(var(--night-rgb), .08) 30%, rgba(var(--night-rgb), .74) 58%, var(--night) 80%), linear-gradient(90deg, rgba(var(--night-rgb), .55) 0%, rgba(var(--night-rgb), 0) 60%); }
}
/* phones and upright tablets (the video plays there since Oct 28, 2026): its bright tablet sits right behind the clock
   and the light, so a veil over the top fades in with it and keeps them readable (computers keep their own look) */
@media (max-width: 900px) {
  .night-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .8s var(--ease-out);
    background: linear-gradient(180deg, rgba(var(--night-rgb), .66) 0%, rgba(var(--night-rgb), .66) 48%, rgba(var(--night-rgb), 0) 72%); }
  .night-photo.has-video::before { opacity: 1; }
}

/* ---------- Program-page objects ---------- */
.yearmap, .mock { container-type: inline-size; width: 100%; max-width: 520px; }
.yearmap .doc-inner, .mock .doc-inner { padding: 7cqw 7.5cqw 6.5cqw; font-size: 3cqw; line-height: 1.45; }
.mock .doc-inner { font-size: 3.2cqw; }
.ym-top { display: flex; justify-content: space-between; align-items: baseline; }
.ym-brand { font-family: var(--f-display); font-weight: 500; font-size: 1.75em; color: var(--violet); letter-spacing: -.02em; }
.ym-kind { font-size: .85em; color: var(--muted); }
.ym-title { font-family: var(--f-display); font-size: 3.4em; line-height: 1; letter-spacing: -.03em; margin: .55em 0 .2em; }
.ym-meta { color: var(--ink-soft); font-size: .95em; padding-bottom: 1em; border-bottom: 1.5px solid var(--violet); margin-bottom: 1.3em; }
.ym-list { position: relative; display: grid; gap: 1.15em; }
.ym-list::before { content: ""; position: absolute; left: .42em; top: .6em; bottom: .9em; width: 1.5px; background: var(--violet-glow); }
.ym-list li { position: relative; padding-left: 2em; }
.ym-list b { display: block; font-family: var(--f-display); font-weight: 450; font-size: 1.35em; letter-spacing: -.01em; line-height: 1.15; }
.ym-list span:not(.ym-dot) { color: var(--ink-soft); font-size: .95em; display: block; margin-top: .15em; }
.ym-dot { position: absolute; left: 0; top: .32em; width: .9em; height: .9em; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 2px var(--violet); }
.ym-list li.is-now .ym-dot { background: var(--pen); box-shadow: 0 0 0 .3em rgba(211, 58, 44, .18); }
.ym-pen { position: absolute; right: -.4em; top: -.2em; font-family: var(--f-pen); font-style: normal; color: var(--pen); font-size: 1.7em; transform: rotate(-6deg); }
.ym-week { margin-top: 1.5em; padding-top: 1em; border-top: 1px dashed var(--line-strong); display: flex; flex-wrap: wrap; gap: .5em .9em; align-items: baseline; font-size: .9em; }
.ym-week span { color: var(--muted); }
.ym-week b { font-weight: 600; background: var(--violet-pale); color: var(--violet-deep); padding: .2em .6em; border-radius: 99px; }
.mock-rows { display: grid; gap: 1em; }
.mock-rows div { display: grid; grid-template-columns: 1fr auto; gap: .3em 1em; }
.mock-rows span { color: var(--ink-soft); }
.mock-rows b { font-variant-numeric: tabular-nums; }
.mock-rows i { grid-column: 1 / -1; height: .55em; border-radius: 99px; background: var(--line); position: relative; overflow: hidden; }
.mock-rows i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--violet); border-radius: inherit; }
.mock-proj { display: flex; align-items: center; justify-content: space-between; margin-top: 1.4em; padding: 1em 1.2em; border-radius: .8em; background: var(--violet-pale); }
.mock-proj span { font-weight: 600; }
.mock-proj b { font-family: var(--f-display); font-size: 3.2em; line-height: .9; color: var(--violet-deep); font-weight: 450; }
.mock-move { margin-top: 1.2em; color: var(--ink-soft); }
.graded { width: 100%; max-width: 560px; }
.graded svg { width: 100%; height: auto; }

/* the week as 168 hours */
.hours { margin: 0; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
@media (max-width: 900px) { .hours { grid-template-columns: minmax(0, 1fr); } }
.hours-t { display: block; font-family: var(--f-display); font-size: clamp(21px, 1.8vw, 26px); letter-spacing: -.012em; margin-bottom: 14px; }
.hours-n { display: block; margin-top: 12px; font-family: var(--f-pen); color: var(--pen); font-size: 26px; }
.hg-wrap { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; }
.hg-days { display: grid; grid-template-rows: repeat(7, 1fr); gap: 3px; font-size: 11.5px; color: var(--muted); }
.hg-days span { display: flex; align-items: center; }
.hg { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 3px; }
.hg i { aspect-ratio: 1; border-radius: 3px; background: rgba(26, 18, 53, .07); display: block; }
.hg i.a { background: rgba(124, 58, 237, .14); }
.hg i.n { background: #F2B544; }
.hg i.s { background: var(--violet); }
.hg i.g { background: var(--pen); }
.hg i.r { background: var(--ink); }
.hours-key { margin-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; font-size: 14px; color: var(--ink-soft); }
.hours-key li { display: flex; align-items: center; gap: 9px; }
.hours-key i { width: 13px; height: 13px; border-radius: 3px; flex: none; }
.hours-key i.s { background: var(--violet); } .hours-key i.g { background: var(--pen); } .hours-key i.n { background: #F2B544; } .hours-key i.a { background: rgba(124, 58, 237, .18); } .hours-key i.r { background: var(--ink); }
@media (max-width: 520px) { .hours-key { grid-template-columns: minmax(0, 1fr); } }
.motion .hg i.s, .motion .hg i.g, .motion .hg i.n, .motion .hg i.r { transform: scale(.2); opacity: 0; transition: transform .5s var(--ease-out), opacity .5s; }
.motion .hours.is-in .hg i { transform: none; opacity: 1; }

/* feature rows (three that sell on their own) */
.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 110px); align-items: center; padding-block: clamp(56px, 7vw, 100px); border-top: 1px solid var(--line); }
.feature:first-of-type { border-top: 0; padding-top: 0; }
.feature.flip > :first-child { order: 2; }
@media (max-width: 900px) { .feature, .feature.flip { grid-template-columns: minmax(0, 1fr); } .feature.flip > :first-child { order: 0; } }
.feature h3 { font-family: var(--f-display); font-size: clamp(30px, 3.3vw, 48px); line-height: 1.04; letter-spacing: -.022em; margin-bottom: 20px; }
.feature .tag-val { display: inline-flex; margin-top: 18px; font-size: 14.5px; color: var(--muted); }
.feature .tag-val:has(b) { flex-direction: row; align-items: center; gap: 10px; text-align: left; }
.feature-visual { display: grid; justify-items: center; }
.theme-night .feature { border-color: var(--on-night-line); }
.mini-quote { font-family: var(--f-display); font-style: italic; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.35; margin: 0 0 18px; color: var(--ink-soft); }
.mini-quote cite { display: block; margin-top: 8px; font-style: normal; font-family: var(--f-text); font-size: 14px; color: var(--muted); }

/* scan list (hero facts) */
.scan { margin-top: 26px; display: grid; gap: 12px; max-width: 34em; }
.scan li { position: relative; padding-left: 28px; font-size: clamp(16.5px, 1.25vw, 18.5px); line-height: 1.5; color: var(--ink-soft); }
.scan li::before { content: ""; position: absolute; left: 0; top: .32em; width: 17px; height: 17px; background: var(--pen); -webkit-mask: var(--tick-mask) center / contain no-repeat; mask: var(--tick-mask) center / contain no-repeat; }
.scan b { color: var(--ink); font-weight: 650; }
.theme-night .scan li { color: var(--on-night-soft); }
.theme-night .scan b { color: var(--on-night); }
.theme-night .scan li::before { background: #F07A6E; }
.hero-doc { display: grid; justify-items: end; }
.hero-doc .paper { transform: rotate(2deg); }
@media (max-width: 900px) { .hero-doc { justify-items: center; } }
.quotes { display: grid; gap: 22px; }
.promise .seal { width: 46px; height: 46px; }
.seats-big { font-family: var(--f-display); font-size: clamp(24px, 2.3vw, 32px); line-height: 1.2; color: var(--ink); font-weight: 450; letter-spacing: -.012em; margin: 0 0 18px; }

/* ---------- Gap Map page ---------- */
.gm-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); grid-template-areas: "top form" "rest form"; column-gap: clamp(36px, 5vw, 90px); align-items: start; }
.gm-top { grid-area: top; }
.gm-rest { grid-area: rest; }
.gm-hero .form-card { grid-area: form; position: sticky; top: calc(var(--nav-h) + 24px); }
.gm-hero .ticks-col { margin-top: 30px; }
.gm-when-title { margin: clamp(48px, 6vw, 72px) 0 30px; }
@media (max-width: 900px) {
  .gm-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "form" "rest"; }
  .gm-hero { padding-top: calc(var(--nav-h) + 30px); }
  .gm-hero .form-card { position: static; margin-top: 28px; }
}
.when { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 26px; position: relative; padding-top: 40px; counter-reset: when; }
.when::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 2px; background: var(--line-strong); }
.when li { position: relative; }
.when li::before { content: ""; position: absolute; top: -40px; left: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--day-2); box-shadow: inset 0 0 0 2px var(--violet); }
.when li:first-child::before { background: var(--violet); }
.when-t { display: block; font-family: var(--f-pen); color: var(--pen); font-size: 24px; line-height: 1; margin-bottom: 10px; }
.when h3 { font-family: var(--f-display); font-size: clamp(21px, 1.8vw, 26px); line-height: 1.15; letter-spacing: -.012em; margin-bottom: 10px; }
.when p { font-size: 15.5px; color: var(--ink-soft); }
@media (max-width: 1000px) {
  .when { grid-template-columns: minmax(0, 1fr); padding-top: 0; padding-left: 38px; gap: 34px; }
  .when::before { left: 8px; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; }
  .when li::before { top: 2px; left: -38px; }
}
.when.when-v { grid-template-columns: minmax(0, 1fr); padding-top: 0; padding-left: 38px; gap: 28px; }
.when.when-v::before { left: 8px; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; }
.when.when-v li::before { top: 2px; left: -38px; background: var(--day); }
.when.when-v li:first-child::before { background: var(--violet); }
.when.when-v h3 { font-size: clamp(20px, 1.6vw, 23px); margin-bottom: 6px; }
.annot { margin-top: 34px; display: grid; gap: 8px; }
.annot button { text-align: left; width: 100%; padding: 16px 18px; border-radius: 14px; font-size: 16px; line-height: 1.45; color: var(--ink-soft); transition: background .3s, color .3s, transform .4s var(--ease-out); }
.annot button b { color: var(--ink); font-weight: 650; display: block; margin-bottom: 2px; }
.annot button:hover, .annot button:focus-visible, .annot button.is-on { background: var(--violet-pale); color: var(--ink); transform: translateX(6px); }
.annot-doc { display: grid; justify-items: center; }
.annot-doc .report { transform: rotate(1.5deg); }

.cert { container-type: inline-size; width: 100%; max-width: 480px; transform: rotate(-1.8deg); }
.cert .doc-inner { padding: 7cqw 7.5cqw 6.5cqw; font-size: 3.1cqw; line-height: 1.45; }
.cert-rows { display: grid; gap: .1em; }
.cert-rows div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 1em; padding: .75em 0; border-bottom: 1px dashed var(--line-strong); }
.cert-rows span { color: var(--muted); }
.cert-rows b { font-weight: 600; }
.cert-big { display: flex; align-items: center; justify-content: space-between; margin-top: 1.3em; padding: 1em 1.2em; border-radius: .8em; background: var(--violet-pale); }
.cert-big span { font-weight: 600; }
.cert-big b { font-family: var(--f-display); font-size: 3.4em; line-height: .9; color: var(--violet-deep); font-weight: 450; letter-spacing: -.03em; }

/* ---------- Contact, thanks, 404, FAQ groups ---------- */
.contact-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 20px; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
.contact-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 28px; border-radius: var(--radius-l); background: var(--paper); box-shadow: var(--shadow-soft); text-decoration: none; transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.contact-card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -24px rgba(var(--night-rgb), .4); }
.contact-card.is-main { background: var(--night); color: var(--on-night); }
.cc-k { font-size: 14px; font-weight: 600; color: var(--muted); }
.contact-card.is-main .cc-k { color: var(--on-night-faint); }
.cc-v { font-family: var(--f-display); font-size: clamp(24px, 2.2vw, 32px); letter-spacing: -.015em; overflow-wrap: anywhere; }
.cc-n { font-size: 15.5px; color: var(--ink-soft); }
.contact-card.is-main .cc-n { color: var(--on-night-soft); }
.thanks .steps .step-t { font-size: clamp(22px, 2vw, 28px); }
.thanks .step-n { color: var(--on-night); }
.nf-num { position: relative; display: inline-block; font-family: var(--f-display); font-size: clamp(90px, 14vw, 170px); line-height: 1; letter-spacing: -.04em; margin: 0 auto 10px; color: var(--on-night-soft); }
.nf-num svg { position: absolute; left: -16%; top: -12%; width: 132%; height: 124%; overflow: visible; }
.faq-group { margin: 56px 0 8px; scroll-margin-top: 110px; }
.faq-group:first-child { margin-top: 0; }
.cc-v { font-size: clamp(21px, 1.75vw, 26px); }
.why-list-gap { margin-top: 1em; }
.grain, .section-tight { position: relative; }
.grain { overflow: hidden; }
@media (max-width: 960px) { .footer-top > div:last-child { grid-column: 1 / -1; } }

/* Hero words arrive with CSS, at first paint, so nothing waits for scripts */
@keyframes heroIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes heroTitle { from { transform: translateY(26px); letter-spacing: -.02em; } to { transform: none; letter-spacing: -.032em; } }
.motion .hero h1 { animation: heroTitle 1.1s var(--ease-out) .04s both; }
.motion .hero [data-hero] { animation: heroIn 1.1s var(--ease-out) both; }
.motion .hero .kicker[data-hero] { animation-delay: .02s; }
.motion .hero .deck[data-hero] { animation-delay: .38s; }
.motion .hero .lead[data-hero] { animation-delay: .5s; }
.motion .hero .cta-row[data-hero] { animation-delay: .62s; }
.motion .hero .ticks[data-hero] { animation-delay: .74s; }

@media (hover: hover) { .week .day { transition: background-color .4s var(--ease-out); } .week .day:hover { background: rgba(124, 58, 237, .045); } }
.closing { position: relative; }

.story .hl { color: inherit; background-size: 0% 100%; background-position: 0 50%; padding: .04em .14em; border-radius: 2px; transition: background-size 1.05s var(--ease-out), color .35s ease .38s; }
.story .hl.is-in, .no-motion .story .hl { background-size: 100% 100%; color: var(--ink); }

/* ---------- A student's planner (How it works hero): the week fills in as it goes ---------- */
.planner { container-type: inline-size; width: min(100%, 440px); transform: rotate(2deg); background: #FFFEFA; }
.pl-inner { position: relative; padding: 7cqw 6cqw 6cqw; font-size: 3.4cqw; line-height: 1.3; }
.pl-inner::before { content: ""; position: absolute; top: 0; bottom: 0; left: 19.5cqw; width: 1.5px; background: rgba(211, 58, 44, .42); }
.pl-head { display: flex; flex-direction: column; padding: 0 0 3.4cqw 16.5cqw; border-bottom: 1.5px solid #C9D4EA; }
.pl-title { font-family: var(--f-display); font-size: 2.5em; line-height: 1; letter-spacing: -.02em; color: var(--ink); }
.pl-meta { margin-top: .5em; font-size: .92em; color: var(--muted); }
.pl-list li { display: grid; grid-template-columns: 13.5cqw minmax(0, 1fr) 11cqw; align-items: end; min-height: 10.6cqw; padding-bottom: 1.5cqw; border-bottom: 1px solid #DCE4F2; }
.pl-d { font-family: var(--f-display); font-size: 1.12em; color: var(--ink-soft); letter-spacing: -.01em; line-height: 1; }
.pl-e { padding-left: 3.4cqw; font-family: var(--f-hand); font-size: 1.27em; color: var(--student-ink); line-height: 1.12; }
.pl-t { margin-right: .45em; opacity: .62; }
.pl-mark { position: relative; justify-self: end; display: grid; place-items: end; }
.pl-tick { width: 6.4cqw; height: 6.4cqw; overflow: visible; opacity: 0; }
.pl-tick path { fill: none; stroke: var(--pen); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.pl-list li.is-done .pl-tick { opacity: 1; }
.pl-now { display: none; font-family: var(--f-pen); color: var(--pen); font-size: 1.5em; line-height: 1; position: absolute; right: 0; bottom: .05em; white-space: nowrap; }
.pl-list li.is-today .pl-now { display: block; }
.pl-list li.is-today + li.is-today .pl-now { display: none; }
.pl-list li.is-today .pl-e { background: linear-gradient(100deg, transparent 0 .8%, rgba(253, 230, 138, .9) 1.6% 97%, transparent 99%) 0 88% / 100% 58% no-repeat; }

/* buttons inside link-colored areas keep their own ink */
.footer a.btn, .menu-foot a.btn { color: var(--btn-fg); }
.footer a.btn:hover, .menu-foot a.btn:hover { color: var(--ink); }

/* a photo inside a text section (About) */
.media-photo { margin: 40px 0 0; border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow-soft); aspect-ratio: 3 / 2; background: var(--day-2); }
.media-photo:empty { display: none; }
.media-photo .media-img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- v3.1 additions ---------- */
/* Your logo (images/brand/my-logo.*, optional my-logo-white.* for dark backgrounds). Without them, the typeset wordmark shows. */
.logo-img { display: block; height: 22px; width: auto; max-width: 210px; object-fit: contain; object-position: left center; }
.wordmark .logo-on-dark { display: none; }
.nav[data-on="night"] .wordmark .logo-on-light, .menu-open .nav .wordmark .logo-on-light { display: none; }
.nav[data-on="night"] .wordmark .logo-on-dark, .menu-open .nav .wordmark .logo-on-dark { display: block; }
.logo-auto-white { filter: brightness(0) invert(1); }
.logo-auto-dark { filter: brightness(0); }
@media (max-width: 640px) { .logo-img { height: 19px; max-width: 44vw; } }
.footer .footer-logo { display: inline-flex; align-items: baseline; gap: 10px; margin-bottom: 24px; color: var(--on-night); text-decoration: none; }
.footer-logo .wordmark-name { font-size: 30px; }
.footer-logo .logo-on-light { display: none; }
.footer-logo .logo-on-dark { display: block; height: 52px; max-width: 260px; }

/* Social icons in the footer (the brands' own files in images/brand/social/; text links until all three are there).
   Shown exactly as given, never recolored (Meta doesn't allow recoloring the Facebook logo), 30px tall
   (Instagram's minimum is 29px), with clear space of half an icon around each (Instagram's and Facebook's rule). */
.social-icons { display: inline-flex; align-items: center; gap: 30px; margin-top: 12px; padding: 4px 0; }
.social-icons a { display: block; line-height: 0; border-radius: 6px; transition: transform .4s var(--ease-out); }
.social-icons a:hover { transform: translateY(-2px); }
.social-icons img { width: 30px; height: 30px; object-fit: contain; }

/* Your real items (images/real/*.webp|png|jpg) replace the samples, with no Sample stamp */
.phone-real .phone-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* a cropped screenshot (not a full phone screen): shown whole at the top, under the phone's top edge */
.phone-real.is-cropped .phone-screen { padding-top: 11cqw; }
.phone-real.is-cropped .phone-screen img { height: auto; max-height: 100%; object-fit: contain; }
/* a whole screen in the older 2:3 shape: at the top of a modern phone that fades out just under the screenshot's own
   message bar (--fade-a/--fade-b come from build.mjs), nothing stretched or cropped; the faded part takes no space */
.phone-real.is-fit {
  -webkit-mask-image: linear-gradient(to bottom, #000 var(--fade-a), transparent var(--fade-b));
  mask-image: linear-gradient(to bottom, #000 var(--fade-a), transparent var(--fade-b));
  margin-bottom: calc(min(100%, 330px) * -.36);
}
.phone-real.is-fit .phone-screen img { height: auto; }
.screen-real { padding: 10px; }
.screen-real img { width: 100%; height: auto; border-radius: 12px; }
.feature-visual .screen { width: 100%; }
.real-doc { margin: 0; width: 100%; max-width: 520px; border-radius: 6px; overflow: hidden; background: var(--paper); box-shadow: var(--shadow-paper); }
.real-doc img { width: 100%; height: auto; }
.theme-night .real-doc { box-shadow: var(--shadow-paper-night); }
.hero-doc .real-doc { transform: rotate(2deg); }

/* ---------- v3.2 additions ---------- */
/* the founder's logo inside documents (Gap Report, Map to May, mock report, the certificate) */
.r-brand .doc-logo, .ym-brand .doc-logo { display: block; height: .95em; width: auto; }
/* the round avatar in the phone chats uses the icon */
.phone-avatar img { width: 100%; height: 100%; border-radius: 50%; display: block; object-fit: cover; }
/* real photos (a printed page, a phone on a table): as they are, no filter, a plain rounded frame */
.real-photo { margin: 0; display: flex; justify-content: center; width: 100%; }
.real-photo img { display: block; width: auto; height: auto; max-width: 100%; max-height: min(84vh, 860px); border-radius: var(--radius-l); box-shadow: var(--shadow-soft); background: var(--paper); }
.theme-night .real-photo img { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 40px 80px -40px rgba(0, 0, 0, .6); }
.door-visual .real-photo img { width: 100%; max-height: none; }
.phone-wrap:has(.real-photo) { width: min(100%, 540px); transform: none; }
.phone-wrap .real-photo img { max-height: min(78vh, 680px); }
.feature-visual .real-photo { max-width: 540px; }