/* Campus Connect public website: one stylesheet for every page. */
@font-face { font-family: 'Newsreader'; src: url('/assets/fonts/Newsreader-latin.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'General Sans'; src: url('/assets/fonts/GeneralSans-Regular.otf') format('opentype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'General Sans'; src: url('/assets/fonts/GeneralSans-Medium.otf') format('opentype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'General Sans'; src: url('/assets/fonts/GeneralSans-Semibold.otf') format('opentype'); font-weight: 600; font-display: swap; }

:root {
  --paper: #ffffff;
  --mist: #eef3f8;      /* quiet ground behind app screens */
  --ink: #102133;       /* text */
  --navy: #163b5e;      /* logo navy: headings, actions, the dark moments */
  --night: #0e2a45;     /* the film and people bands */
  --signal: #0097ff;    /* logo blue: focus and "where in the app" only */
  --signal-text: #006fbd;
  --slate: #475a6d;     /* secondary text, 7:1 on white, 6.3:1 on mist */
  --on-night: #d3e1ef;  /* secondary text on night, 11:1 */
  --rule: #dce4ec;
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'General Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wrap: 1200px;
  --gutter: clamp(20px, 4.5vw, 48px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body.menu-open { overflow: hidden; }
img, video { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; color: var(--navy); margin: 0; text-wrap: balance; font-optical-sizing: auto; overflow-wrap: break-word; }
h2 { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.06; letter-spacing: -0.02em; }
h3 { font-size: clamp(22px, 2.3vw, 30px); line-height: 1.15; letter-spacing: -0.01em; }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; border-radius: 6px; }
::selection { background: #cfe9ff; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.lede { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--slate); max-width: 33em; }
.muted { color: var(--slate); }
.small { font-size: 14px; line-height: 1.5; font-weight: 500; }
/* General Sans Regular is light at small sizes: supporting text below 16px uses Medium. */
.hero .note, figcaption, .foot-base, .policy-date { font-weight: 500; }
.kicker { font: 500 15px/1.4 var(--sans); color: var(--slate); margin: 0 0 18px; }
.skip { position: absolute; left: 12px; top: -64px; z-index: 60; padding: 10px 14px; background: var(--navy); color: #fff; border-radius: 8px; }
.skip:focus { top: 12px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Actions: one filled button for the action that matters; underlined links for the rest. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; border: 0; background: var(--navy); color: #fff; font: 600 16px/1 var(--sans); text-decoration: none; cursor: pointer; transition: background-color .2s var(--ease), transform .16s var(--ease); }
.btn:hover { background: #0f2c48; }
.btn:active { transform: scale(.98); }
.btn svg { width: 18px; height: 18px; flex: none; }
/* The signature: the main Download buttons fill with the logo's blue from below, four blobs rising a beat apart
   and merging (after Hilary's "Blobs button"). Transforms only, so no SVG goo filter repainting every frame.
   White on #006fbd keeps 5:1. site.js adds the decorative spans, so without JS this is the plain button. */
.btn-blob { position: relative; isolation: isolate; overflow: hidden; }
.btn-blob .blobs { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.btn-blob .blobs i { position: absolute; top: 0; left: 0; width: 25%; height: 100%; border-radius: 50%; background: var(--signal-text); transform: translateY(150%) scale(1.7); transition: transform .42s var(--ease); }
.btn-blob .blobs i:nth-child(2) { left: 30%; transition-delay: .05s; }
.btn-blob .blobs i:nth-child(3) { left: 60%; transition-delay: .1s; }
.btn-blob .blobs i:nth-child(4) { left: 90%; transition-delay: .15s; }
.btn-blob svg { transition: transform .2s var(--ease); }
.btn-blob:focus-visible .blobs i { transform: scale(1.7); }
@media (hover: hover) and (pointer: fine) {
  .btn-blob:hover .blobs i { transform: scale(1.7); }
  .btn-blob:hover svg { transform: translateY(2px); } /* the arrow nods toward the download */
}
/* Touch has no hover: a press fills the button at once instead. */
@media (hover: none) { .btn-blob:active { background: var(--signal-text); } }
.btn-light { background: #fff; color: var(--navy); }
.btn-light:hover { background: var(--mist); }
.btn[aria-disabled="true"] { background: var(--slate); cursor: not-allowed; }
.link { color: var(--navy); font-weight: 500; text-decoration: underline; text-decoration-color: var(--rule); text-decoration-thickness: 2px; text-underline-offset: 5px; transition: text-decoration-color .2s var(--ease); }
.link:hover { text-decoration-color: var(--signal); }
/* Links that stand alone get a full touch target; links inside sentences stay inline. */
.link { display: inline-block; padding-block: 10px; }
p .link, li .link, dd .link, figcaption .link { display: inline; padding-block: 0; }
.list-plain .link { display: inline-block; padding-block: 8px; }
.on-night .link { color: #fff; text-decoration-color: rgba(255, 255, 255, .35); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }

/* ---------- Header and menu ---------- */
.site-head { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, .92); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.site-head.scrolled { border-bottom-color: var(--rule); }
.head-row { display: flex; align-items: center; justify-content: space-between; min-height: 76px; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--navy); font: 600 18px/1 var(--sans); letter-spacing: -0.01em; }
.brand img { width: 28px; height: auto; }
.site-nav { display: flex; align-items: center; gap: 34px; }
.site-nav a { position: relative; text-decoration: none; color: var(--ink); font-weight: 500; font-size: 15.5px; padding: 8px 0; }
.site-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--signal); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); }
.site-nav a[aria-current="page"] { color: var(--navy); }
.menu-btn { display: none; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--navy); font: 600 16px var(--sans); cursor: pointer; }
.menu-btn .bars { position: relative; width: 22px; height: 10px; }
.menu-btn .bars::before, .menu-btn .bars::after { content: ''; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 2px; transition: transform .25s var(--ease), top .25s var(--ease); }
.menu-btn .bars::before { top: 0; }
.menu-btn .bars::after { top: 8px; }
.menu-btn[aria-expanded="true"] .bars::before { top: 4px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .bars::after { top: 4px; transform: rotate(-45deg); }

/* The phone menu is a page of its own: big serif destinations, the quiet links underneath. */
.menu-sheet { position: fixed; inset: 76px 0 0; z-index: 39; display: flex; flex-direction: column; justify-content: space-between; padding: 28px var(--gutter) max(28px, env(safe-area-inset-bottom)); background: var(--paper); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .22s var(--ease), transform .22s var(--ease), visibility 0s .22s; overflow-y: auto; }
.menu-sheet.open { opacity: 1; visibility: visible; transform: none; transition: opacity .22s var(--ease), transform .22s var(--ease); }
.menu-sheet nav { display: grid; }
.menu-sheet nav a { padding: 14px 0; border-bottom: 1px solid var(--rule); font: 600 clamp(34px, 10vw, 44px)/1.1 var(--serif); color: var(--navy); text-decoration: none; letter-spacing: -0.015em; }
.menu-sheet nav a[aria-current="page"] { color: var(--signal-text); }
.menu-sheet .menu-foot { display: grid; gap: 18px; padding-top: 28px; }
.menu-sheet .menu-foot p { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.menu-sheet .menu-foot a:not(.btn) { color: var(--slate); }

/* ---------- Home ---------- */
/* Hero: the headline and the first real screens share one viewport. */
.hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: center; min-height: min(780px, calc(100svh - 76px)); padding-block: clamp(32px, 4vw, 56px); }
.hero h1 { font-size: clamp(40px, 5.6vw, 80px); line-height: 1; letter-spacing: -0.03em; max-width: 10.5em; margin-bottom: 24px; }
.hero .lede { margin-bottom: 30px; color: var(--ink); }
.hero .note { margin: 18px 0 0; font-size: 14px; color: var(--slate); }
.hero-visual { position: relative; height: clamp(420px, 44vw, 600px); }
.hero-visual .screen { position: absolute; width: min(56%, 300px); }
.hero-visual .front { left: 6%; bottom: 0; z-index: 2; }
.hero-visual .back { right: 2%; top: 0; width: min(48%, 260px); opacity: .95; }

/* Film: the product film alone, full width in a navy frame, with one quiet play button. */
.film-section { padding-bottom: clamp(56px, 7vw, 96px); }
.film-board { padding: clamp(10px, 1.4vw, 18px); border-radius: clamp(18px, 2vw, 28px); background: var(--night); }
.film { position: relative; aspect-ratio: 16 / 9; border-radius: clamp(10px, 1.2vw, 16px); overflow: hidden; background: #fff; }
.film-poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
.film video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }
.film-play { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 64px; height: 64px; padding: 0; border: 1px solid rgba(255, 255, 255, .24); border-radius: 50%; background: rgba(14, 42, 69, .6); color: #fff; cursor: pointer; transition: background-color .18s var(--ease); }
.film-play:hover { background: rgba(14, 42, 69, .82); }
.film-play:focus-visible { outline: 3px solid var(--signal); outline-offset: 4px; border-radius: 50%; }
.film-play[hidden] { display: none; }
/* The triangle sits right of its box's centre, which centres it optically. */
.film-play svg { width: 26px; height: 26px; }
.film.playing .film-poster { display: none; }
.film-error { position: absolute; z-index: 3; inset: auto 0 0; padding: 14px 20px; background: rgba(14, 42, 69, .94); color: #fff; display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; }
.film-error p { margin: 0; }
.film-error button { background: none; border: 0; color: #fff; font: 600 15px var(--sans); text-decoration: underline; cursor: pointer; padding: 8px 0; }
.film-busy { position: absolute; z-index: 3; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .25); border-top-color: #fff; animation: spin .8s linear infinite; pointer-events: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* The idea: type only, indented off the left axis. */
.idea { padding-block: 0 clamp(56px, 7vw, 96px); }
.idea .statement { margin: 0 0 0 auto; max-width: 22em; font: 500 clamp(24px, 2.9vw, 38px)/1.25 var(--serif); letter-spacing: -0.012em; color: var(--ink); text-wrap: pretty; }
.idea .statement .problem { color: var(--slate); }
/* Focus shift: on a mouse, the sentence under the pointer takes the ink and the other steps back. Colour only,
   so nothing reflows. The inline padding fills the gaps between lines without moving them, so the pointer
   crossing from one line to the next does not flicker back to the default. */
.idea .statement > span { padding-block: .15em; transition: color .32s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .idea .statement:has(.problem:hover) .problem { color: var(--ink); }
  .idea .statement:has(.problem:hover) .solution { color: var(--slate); }
}

/* A glimpse inside: one day, three real screens on a gentle stagger. */
.glimpse { padding-block: clamp(56px, 7vw, 96px); background: var(--mist); }
.glimpse-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px 40px; margin-bottom: clamp(28px, 4vw, 48px); }
.day { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 4vw, 56px); align-items: start; max-width: 1000px; }
.day li:nth-child(2) { margin-top: clamp(24px, 4vw, 56px); }
.day li:nth-child(3) { margin-top: clamp(48px, 8vw, 112px); }
.day time { display: block; font: 600 clamp(22px, 2.2vw, 28px)/1 var(--serif); color: var(--navy); margin-bottom: 6px; }
.day p { margin: 0 0 18px; max-width: 18em; color: var(--slate); font-size: 16px; }
.screen { border-radius: 30px; padding: 8px; background: #fff; box-shadow: 0 30px 60px -36px rgba(22, 59, 94, .45); }
.screen img { width: 100%; height: auto; aspect-ratio: 738 / 1600; border-radius: 23px; background: var(--mist); }

/* The people: one line of names, set in the margin like a byline. */
.people { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 5vw, 80px); align-items: start; padding-block: clamp(56px, 7vw, 96px); }
.people-names { margin: 0; font: 500 clamp(30px, 3.6vw, 48px)/1.1 var(--serif); color: var(--navy); letter-spacing: -0.02em; }
.people h2 { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; margin-bottom: 14px; }

/* The close: a practical ending, built for the Synergy stall: scan or tap. */
.get-it { border-top: 1px solid var(--rule); padding-block: clamp(48px, 6vw, 80px); }
.get-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(28px, 5vw, 80px); align-items: center; }
.get-grid h2 { margin-bottom: 14px; }
.get-grid .lede { margin-bottom: 26px; }
.qr { margin: 0; display: grid; gap: 12px; justify-items: center; width: 220px; padding: 16px; border: 1px solid var(--rule); border-radius: 20px; }
.qr[hidden] { display: none; }
.qr img { width: 188px; height: 188px; }
.qr figcaption { margin: 0; text-align: center; font-size: 13px; line-height: 1.4; }

/* ---------- Inside ---------- */
.page-head { padding-block: clamp(40px, 5vw, 80px) clamp(28px, 4vw, 48px); }
.page-head h1 { font-size: clamp(33px, 4.6vw, 64px); line-height: 1; letter-spacing: -0.03em; max-width: 12em; margin-bottom: 20px; }
.page-head.compact { padding-bottom: clamp(20px, 3vw, 36px); }

/* Showcase: one phone, six parts of the app, moved between by tabs, arrows, keys or a swipe. */
.showcase { padding-bottom: clamp(56px, 7vw, 96px); }
.show-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; margin-bottom: clamp(24px, 3vw, 40px); border-radius: 999px; background: var(--mist); width: fit-content; max-width: 100%; }
.show-tabs button { min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: none; color: var(--slate); font: 600 15px/1 var(--sans); cursor: pointer; white-space: nowrap; transition: background-color .2s, color .2s; }
.show-tabs button:hover { color: var(--navy); }
@media (hover: hover) and (pointer: fine) { .show-tabs button[aria-selected="false"]:hover { background: rgba(255, 255, 255, .6); } }
.show-tabs button[aria-selected="true"] { background: #fff; color: var(--navy); box-shadow: 0 2px 10px rgba(22, 59, 94, .12); }
.show-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 6vw, 96px); align-items: center; border-radius: 6px; }
.show-stage { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; touch-action: pan-y; }
.show-stage .screen { width: min(100%, 300px); overflow: hidden; } /* the screen changes inside the phone's bezel */
.show-step { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rule); background: #fff; color: var(--navy); font: 400 26px/1 var(--sans); cursor: pointer; transition: border-color .2s var(--ease), transform .16s var(--ease); }
.show-step:hover { border-color: var(--navy); }
.show-step:active { transform: scale(.94); }
.show-copy h2 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.04; margin-bottom: 14px; }
.show-copy .lede { margin-bottom: 20px; }
.show-copy ul { margin: 0 0 18px; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.show-copy li { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.show-copy .show-count { margin: 0; }
/* Moving between parts is animated in site.js (Web Animations), so it can turn around mid-motion. */

/* The question index: questions students ask, set like a book index. */
.ask-section { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); padding-block: clamp(48px, 6vw, 88px); border-top: 1px solid var(--rule); }
.ask-section h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.08; margin-bottom: 12px; }
.index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.index li { display: flex; align-items: baseline; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.index .q { font: 400 clamp(20px, 2.1vw, 27px)/1.25 var(--serif); color: var(--ink); letter-spacing: -0.01em; }
.index .lead { flex: 1; min-width: 20px; border-bottom: 2px dotted #b4c2d0; transform: translateY(-6px); }
.index .where { font: 600 15px/1 var(--sans); color: var(--signal-text); white-space: nowrap; }

.also { background: var(--mist); padding-block: clamp(48px, 6vw, 80px); }
.also h2 { font-size: clamp(26px, 2.6vw, 34px); margin-bottom: clamp(20px, 3vw, 32px); }
.say { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
.say h3 { font-size: 22px; margin-bottom: 8px; padding-top: 16px; border-top: 2px solid var(--navy); }
.say p { color: var(--slate); margin: 0; }
.band-cta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px 40px; padding-block: clamp(48px, 6vw, 80px); }
.band-cta h2 { font-size: clamp(28px, 3vw, 40px); }

/* ---------- Story ---------- */
.story { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 6vw, 96px); padding-bottom: clamp(48px, 6vw, 88px); }
.story-quote { position: sticky; top: 108px; align-self: start; }
.story-quote p { margin: 0; padding-left: 20px; border-left: 3px solid var(--signal); font: 500 clamp(24px, 2.6vw, 34px)/1.22 var(--serif); color: var(--navy); letter-spacing: -0.012em; }
.reading { max-width: 680px; }
.reading p, .reading li { font-family: var(--serif); font-size: 20px; line-height: 1.65; }
.reading h2 { font-size: clamp(26px, 2.6vw, 34px); margin: 0 0 16px; line-height: 1.12; }
.reading h3 { margin: 32px 0 10px; font-size: 22px; }
.reading ul { padding-left: 1.2em; }
.story-proof { background: var(--mist); padding-block: clamp(48px, 6vw, 88px); }
.proof-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 6vw, 96px); align-items: center; }
.proof-grid h2 { font-size: clamp(28px, 3vw, 40px); margin-bottom: 14px; }
.proof-screens { display: grid; grid-template-columns: repeat(2, minmax(0, 240px)); gap: clamp(14px, 3vw, 32px); }
.proof-screens .screen:nth-child(2) { margin-top: clamp(28px, 5vw, 64px); }
.team { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(24px, 6vw, 96px); padding-block: clamp(48px, 6vw, 88px); }

.activity-head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 48px); }
.activity-head h2 { margin-bottom: 14px; }

/* ---------- Download ---------- */
.dl-hero { padding-block: clamp(48px, 6vw, 96px) clamp(40px, 5vw, 72px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 6vw, 96px); align-items: end; }
.dl-hero h1 { font-size: clamp(40px, 5.4vw, 76px); line-height: .96; letter-spacing: -0.03em; margin-bottom: 24px; }
.dl-hero .actions { margin-top: 32px; }
.platforms { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.platforms li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.platforms b { font-weight: 600; }
.platforms span { color: var(--slate); text-align: right; }
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
.steps li { counter-increment: step; border-top: 2px solid var(--navy); padding-top: 20px; }
.steps li::before { content: counter(step); display: block; font: 600 48px/1 var(--serif); color: var(--navy); margin-bottom: 16px; }
.steps h3 { margin-bottom: 10px; }
.steps p { margin: 0; color: var(--slate); }
.facts { margin: 0; }
.facts div { display: grid; grid-template-columns: 8em minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.facts dt { color: var(--slate); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.facts code { font: 13px/1.5 ui-monospace, Consolas, monospace; }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 6vw, 96px); }
.two h2 { font-size: clamp(28px, 3vw, 40px); margin-bottom: 16px; }
.play[hidden] { display: none; }

/* ---------- Support ---------- */
.support-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 6vw, 96px); padding-bottom: clamp(72px, 9vw, 128px); }
.faq h2, .report h2 { font-size: clamp(28px, 3vw, 40px); margin-bottom: 20px; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq details:first-of-type { border-top: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 20px 0; font: 500 21px/1.35 var(--serif); color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; font: 400 26px/1 var(--sans); color: var(--slate); transition: transform .2s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { max-width: 36em; color: var(--slate); padding-bottom: 10px; }
.report { margin-top: clamp(56px, 7vw, 96px); }
.aside-block { border-top: 2px solid var(--navy); padding-top: 18px; margin-bottom: 44px; }
.aside-block h2 { font-size: 26px; margin-bottom: 12px; }
.list-plain { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }

/* ---------- Policy pages: existing text, reading layout ---------- */
.doc { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 680px); gap: clamp(32px, 6vw, 96px); padding-bottom: clamp(72px, 9vw, 128px); }
.doc-nav { position: sticky; top: 108px; align-self: start; display: grid; gap: 8px; font-size: 14px; }
.doc-nav a { color: var(--slate); text-decoration: none; }
.doc-nav a:hover { color: var(--navy); text-decoration: underline; }
.doc .reading p, .doc .reading li { font-size: 18px; }
.policy-date { color: var(--slate); font-family: var(--sans) !important; font-size: 15px !important; }

/* ---------- Footer ---------- */
.site-foot { border-top: 1px solid var(--rule); padding: 64px 0 32px; font-size: 15px; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 32px; }
.foot-grid h2 { font: 600 14px/1.4 var(--sans); color: var(--slate); margin-bottom: 14px; }
.foot-grid nav { display: grid; gap: 9px; align-content: start; }
.foot-grid nav a { color: var(--ink); text-decoration: underline transparent; transition: text-decoration-color .2s var(--ease); }
.foot-grid nav a:hover { text-decoration-color: currentColor; }
.tagline { font: 500 24px/1.2 var(--serif); color: var(--navy); margin: 18px 0 0; max-width: 11em; }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--rule); color: var(--slate); font-size: 14px; }
.foot-base p { margin: 0; }

/* ---------- Motion: the home headline arrives once; a few chosen blocks (data-reveal) arrive as you reach them;
   everything else answers a person. ---------- */
/* Scroll arrivals (site.js adds .reveal-wait only to what is still below the fold, and only with motion allowed):
   without JS, with reduced motion, or in print, nothing is ever hidden. */
@media screen and (prefers-reduced-motion: no-preference) {
  [data-reveal]:not([data-reveal="stagger"]).reveal-wait, [data-reveal="stagger"].reveal-wait > * { opacity: 0; transform: translateY(10px); }
  [data-reveal]:not([data-reveal="stagger"]).revealed, [data-reveal="stagger"].revealed > * { transition: opacity .55s var(--ease), transform .55s var(--ease); }
  [data-reveal="stagger"].revealed > :nth-child(2) { transition-delay: .07s; }
  [data-reveal="stagger"].revealed > :nth-child(3) { transition-delay: .14s; }
}
@media (prefers-reduced-motion: no-preference) {
  .arrive > * { animation: arrive .7s var(--ease) both; }
  .arrive > :nth-child(2) { animation-delay: .06s; }
  .arrive > :nth-child(3) { animation-delay: .12s; }
  .arrive > :nth-child(4) { animation-delay: .18s; }
  .hero-visual .screen { animation: arrive-screen .9s var(--ease) .15s both; }
  .hero-visual .back { animation-delay: .3s; }
  /* Movement only: the text is readable from the first frame, so the headline is painted at once. */
  @keyframes arrive { from { transform: translateY(14px); } to { transform: none; } }
  @keyframes arrive-screen { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Tablet ---------- */
@media (max-width: 980px) {
  .support-grid, .doc, .dl-hero, .ask-section, .story, .team, .proof-grid, .people { grid-template-columns: 1fr; }
  .story-quote { position: static; }
  .doc-nav { position: static; border-left: 2px solid var(--rule); padding-left: 14px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-grid > :first-child { grid-column: 1 / -1; }
}

/* ---------- Phone: compositions of their own, not a shrunk desktop ---------- */
@media (max-width: 760px) {
  .page-head h1 { font-size: clamp(33px, 9.4vw, 40px); }
  .site-nav { display: none; }
  .menu-btn { display: inline-flex; }
  .hero { grid-template-columns: 1fr; min-height: 0; padding-top: 28px; gap: 8px; }
  .hero .actions .btn { flex: 1 1 100%; }
  /* The screens peek in under the headline and the action, cropped by the next section. */
  .hero-visual { height: 300px; overflow: hidden; margin-inline: calc(-1 * var(--gutter)); }
  .hero-visual .front { left: 10%; bottom: auto; top: 28px; width: 52%; }
  .hero-visual .back { right: 6%; top: 0; width: 44%; }
  .film-board { padding: 8px; }
  .film-play { width: 52px; height: 52px; }
  .film-play svg { width: 22px; height: 22px; }
  .idea .statement { margin-left: 0; }
  .day { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 20px; scrollbar-width: none; }
  .day::-webkit-scrollbar { display: none; }
  .day li { flex: 0 0 72%; scroll-snap-align: center; }
  .day li:nth-child(n) { margin-top: 0; }
  .get-grid { grid-template-columns: 1fr; }
  .get-grid .actions .btn { flex: 1 1 100%; }
  .qr { display: none; } /* a phone does not scan itself */
  .show-tabs { flex-wrap: nowrap; overflow-x: auto; width: calc(100% + 2 * var(--gutter)); max-width: none; margin-inline: calc(-1 * var(--gutter)); border-radius: 0; padding: 6px var(--gutter); scrollbar-width: none; }
  .show-tabs::-webkit-scrollbar { display: none; }
  .show-body { grid-template-columns: 1fr; gap: 24px; }
  .show-stage .screen { width: 64%; }
  .say, .steps, .two { grid-template-columns: 1fr; }
  .band-cta .actions .btn { flex: 1 1 100%; }
  .index li { flex-wrap: wrap; gap: 4px 12px; }
  .index .lead { display: none; }
  .index .where { width: 100%; }
  .facts div { grid-template-columns: 1fr; gap: 2px; }
  .reading p, .reading li { font-size: 19px; }
  .foot-grid { grid-template-columns: 1fr; }
}