/* Home: charcoal and paper, the Life At blue, condensed headings in sentence case, and
   the product itself (real screens, demo data) doing the persuading. One house style for
   every campus; the schools' own colours stay on the schools' own sites. */
body[data-page="home"] {
  --surface: #fffdf8;
  --band: #efeae0;
  --rule: rgb(23 41 61 / .14);
  --rule-dark: rgb(247 244 237 / .12);
  --text-soft: #3d4852;
  --on-dark-soft: #b9c3ca;
  --on-dark: #e6eaed;
  --link: #176ca1;
  --header-height: 88px;
  --radius-card: 24px;
  --soft-shadow: 0 10px 28px rgb(23 41 61 / .07);
}
body[data-page="home"] main :is(h1, h2, h3) { text-transform: none; letter-spacing: -.01em; }
body[data-page="home"] main h2 { font-size: clamp(40px, 4.4vw, 60px); line-height: 1; }

/* The header sits transparent over the hero's charcoal and takes its own dark ground once
   the hero has scrolled under it. */
.site-header { margin: 0; border-radius: 0; background: transparent; transition: background-color .25s var(--ease), box-shadow .25s var(--ease); }
.site-header.is-stuck { background: var(--dark); box-shadow: 0 1px 0 rgb(255 255 255 / .06), 0 10px 30px rgb(0 0 0 / .25); }
.header-inner { border-bottom: 0; min-height: var(--header-height); }
.site-header .brand { color: var(--paper); text-decoration: none; }
.site-header .brand:hover .brand-dot { color: var(--white); }

.button { border-radius: 10px; }
.button-primary { border-color: transparent; }
/* Hover styles only where a pointer can hover, so a tap never leaves them stuck on. */
@media (hover: hover) and (pointer: fine) { .button-primary:hover { background: #b1daf2; box-shadow: none; transform: none; } }
.button-primary:active { background: #9ccdeb; transform: none; }

/* ---- Hero: LIFE AT over a wheel of every campus; the wheel drives the website beside it. */
.hero { position: relative; isolation: isolate; overflow: visible; background: none; padding-block: 96px 136px; }
/* The charcoal reaches up behind the transparent header so the two read as one screen. */
.hero::before { content: ""; position: absolute; inset: calc(var(--header-height) * -1) 0 0; z-index: -1; background: var(--dark); }
.hero-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); align-items: center; gap: clamp(40px, 5vw, 72px); }
.hero-copy { --lockup-size: clamp(56px, 6.4vw, 88px); --brand-face: "Arial Narrow", "Helvetica Neue", Arial, sans-serif; }
/* The Life At wordmark, as the apps draw it: wide-set narrow capitals with the pin as the A. */
body[data-page="home"] .hero .hero-lockup { margin: 0; color: var(--white); font-family: var(--brand-face); font-size: var(--lockup-size); font-weight: 800; line-height: 1; letter-spacing: .1em; }
.hero .hero-wordmark, .hero .hero-wordmark span { color: var(--white); }

/* The wheel: five names on a drum. --o is each name's distance from the centre row, set by
   app.js (and in the markup for the first paint); everything else is derived from it. */
.campus-wheel {
  --row: 1.25em;
  position: relative;
  height: calc(var(--row) * 3.3);
  margin-top: .2em;
  font-family: var(--brand-face);
  font-size: calc(var(--lockup-size) * .6);
  font-weight: 800;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  -webkit-mask-image: linear-gradient(transparent, #000 26%, #000 74%, transparent);
  mask-image: linear-gradient(transparent, #000 26%, #000 74%, transparent);
  --focus: var(--blue);
}
.wheel-item {
  --a: max(var(--o), calc(var(--o) * -1));
  display: inline-flex;
  align-items: center;
  gap: .42em;
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -.5em;
  padding: 0;
  border: 0;
  background: none;
  color: var(--paper);
  font: inherit;
  line-height: 1;
  letter-spacing: inherit;
  text-transform: inherit;
  white-space: nowrap;
  transform-origin: 0 50%;
  transform: translateY(calc(var(--o) * var(--row))) scale(calc(1 - var(--a) * .16));
  opacity: calc(1 - var(--a) * .5);
  transition: transform .6s var(--ease), opacity .6s var(--ease), color .4s var(--ease);
}
/* The campus in the centre takes its own Life At accent; its mark is that campus's app icon. */
.wheel-item[aria-pressed="true"] { color: var(--life-at-accent); }
.wheel-mark { width: 1.18em; height: 1.18em; }
.wheel-item[data-life-at-theme="unc"] { --life-at-accent: #4b9cd3; --life-at-ink: #13294b; }
@media (hover: hover) and (pointer: fine) { .wheel-item:not([aria-pressed="true"]):hover { opacity: calc(1 - var(--a) * .35); } }
.wheel-item.is-wrapping { transition: none; }
/* Three paces: the automatic turn glides slowly, a chosen step snaps quickly, a drag follows the pointer. */
.campus-wheel[data-pace="auto"] .wheel-item { transition-duration: 1.1s, 1.1s, .6s; transition-timing-function: cubic-bezier(.45, 0, .25, 1); }
.campus-wheel[data-pace="step"] .wheel-item { transition-duration: .38s, .38s, .3s; }
.campus-wheel[data-pace="drag"] .wheel-item { transition: none; }
.campus-wheel { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.wheel-item:focus-visible { outline-offset: 2px; }

.hero-copy > .hero-tagline { max-width: none; margin-top: 18px; color: var(--white); font-family: var(--display); font-size: clamp(26px, 2.4vw, 34px); font-weight: 700; line-height: 1.1; }
/* The blue half stays together, so a narrow phone breaks the line between the halves, never before "place". */
.hero-copy > .hero-tagline span { color: var(--blue); white-space: nowrap; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-actions .button { min-height: 52px; padding: 13px 24px; gap: 10px; }
.hero-app-button { background: transparent; border-color: rgb(247 244 237 / .38); color: var(--paper); }
@media (hover: hover) and (pointer: fine) { .hero-app-button:hover { background: rgb(247 244 237 / .08); border-color: rgb(247 244 237 / .6); } }
.hero-app-button:active { background: rgb(247 244 237 / .14); }
/* The page's svg reset would stroke the Apple mark; it is a filled shape. */
.hero-apple-mark { width: 18px; height: 18px; fill: currentColor; stroke: none; margin-top: -2px; }
.hero-copy > .hero-proof { max-width: 46ch; margin-top: 22px; color: var(--on-dark-soft); font-size: 15px; line-height: 1.6; }

/* The website, in a browser window you can scroll, with the iPhone app in front of it. */
.hero-visual { --phone-drop: 40px; position: relative; display: grid; grid-template-columns: minmax(0, 36fr) minmax(0, 64fr); align-items: center; row-gap: calc(var(--phone-drop) + 14px); padding: 0; margin-top: 120px; }
.browser { grid-row: 1; grid-column: 1 / -1; justify-self: end; width: 80%; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 40px 80px -28px rgb(0 0 0 / .75); }
.browser-screens { position: relative; aspect-ratio: 16 / 10; background: var(--paper); }
.browser-screen { position: absolute; inset: 0; overflow: hidden; opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility 0s linear .45s; scrollbar-width: thin; scrollbar-color: #b9b4a8 transparent; }
.browser-screen.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }
.browser-page { position: relative; container-type: inline-size; }
.site-view { display: none; width: 100%; height: auto; }
.site-view.is-active { display: block; }

/* Every tap target: invisible until hovered, focused, or pointed out once on arrival. */
.hot { position: relative; padding: 0; border: 0; border-radius: 4px; background: transparent; cursor: pointer; --focus: var(--blue); transition: background-color .15s var(--ease), box-shadow .15s var(--ease); }
@media (hover: hover) and (pointer: fine) { .hot:hover { background: rgb(75 156 211 / .16); box-shadow: inset 0 0 0 2px rgb(75 156 211 / .7); } }
.hot:focus-visible { outline-offset: -2px; }
.phone-tabs .hot, .phone-sheet .hot { position: relative; }
.phone-sheet .hot { position: absolute; }
.phone-sheet { position: absolute; inset: 0; }
.is-hinting .hot::after { content: ""; position: absolute; inset: -2px; border: 2px solid var(--blue); border-radius: inherit; animation: hot-pulse 1.8s var(--ease) 2; pointer-events: none; }
@keyframes hot-pulse { 0% { opacity: 0; transform: scale(.94); } 35% { opacity: .95; } 100% { opacity: 0; transform: scale(1.08); } }
.hero-try { position: static; grid-row: 2; grid-column: 1; justify-self: center; pointer-events: none; white-space: nowrap; justify-content: center; display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--on-dark-soft); font-size: 14px; }
.hero-try svg { width: 18px; height: 18px; color: var(--blue); }
/* "Click" for a mouse, "Tap" on a touch screen. */
.try-touch { display: none; }
@media (hover: none) { .try-touch { display: inline; } .try-mouse { display: none; } }
.browser-screen:focus-visible { outline-offset: -4px; }
/* With a mouse the page inside scrolls like the real site; on touch it stays still so it
   never traps the page's own scroll. */
@media (hover: hover) and (pointer: fine) { .browser-screen { overflow-y: auto; overscroll-behavior: contain; } }

.phone { position: relative; z-index: 2; grid-row: 1; grid-column: 1; justify-self: start; width: 100%; max-width: 264px; transform: translateY(var(--phone-drop)); padding: 8px; border-radius: 40px; background: #0b0d10; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16), inset 0 0 0 3px #22262c, 0 40px 64px -22px rgb(0 0 0 / .8); }
.phone-screen { overflow: hidden; border-radius: 32px; background: #f5f2ea; }
@media (max-width: 1280px) { .phone { border-radius: 34px; padding: 6px; } .phone-screen { border-radius: 28px; } }
.phone { container-type: inline-size; }
.phone-status { position: relative; display: flex; justify-content: space-between; align-items: center; height: 14cqi; padding: 0 8cqi 0 10cqi; color: #111; font-size: 5.6cqi; font-weight: 700; }
.phone-island { position: absolute; top: 3.4cqi; left: 50%; width: 30cqi; height: 8cqi; margin-left: -15cqi; border-radius: 5cqi; background: #0b0d10; }
.phone-icons { display: inline-flex; align-items: center; gap: 2cqi; }
.phone-icons svg { width: auto; height: 4.4cqi; fill: currentColor; stroke: currentColor; stroke-width: 1.2; }
.phone-icons svg:first-child { stroke: none; }
.phone-views { position: relative; aspect-ratio: 603 / 1311; cursor: pointer; }
.phone-view { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .3s var(--ease); }
.phone-view.is-active { opacity: 1; }
/* Tap targets laid over the app's own tab bar, which fills the bottom 11% of each screen. */
.phone-tabs { position: absolute; inset: auto 0 0; display: grid; grid-template-columns: repeat(5, 1fr); height: 11%; }
.phone-tabs button { min-height: 0; padding: 0; border: 0; background: transparent; cursor: pointer; --focus: var(--blue); }


/* Desktop: the hero scales with the window's height, so the first screen always ends a little
   above the fold and the cream section below peeks out (Liam's front-screen rule). */
@media (min-width: 901px) {
  /* The headline sits about 70px under the nav at every height, as on most product sites; spare height goes below. */
  .hero { padding-block: 12px clamp(32px, 6vh, 120px); }
  .hero-copy { --lockup-size: clamp(48px, min(6.4vw, 10.5vh), 88px); }
  .hero-visual { --phone-drop: clamp(12px, 3vh, 36px); margin-top: 0; }
  /* The website sits a little lower beside the phone (Liam, 2026-10-08). Transform only, so the layout and the fold peek do not move. */
  .browser { transform: translateY(clamp(20px, 4.5vh, 44px)); }
  /* The phone is about 2.4 times as tall as it is wide; it never rises past the nav. */
  .phone { max-width: clamp(150px, calc((100vh - 250px) / 2.45), 264px); }
  .hero-actions { margin-top: clamp(20px, 3.6vh, 32px); }
  .hero-copy > .hero-tagline { margin-top: clamp(10px, 2vh, 18px); }
}

/* ---- Section heads: the title, and at most one short line of fact on the right. */
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px 32px; flex-wrap: wrap; margin-bottom: 36px; }
.section-head p { margin: 0; color: var(--muted); font-size: 15px; }

/* ---- Campuses: the original photo cards, kept as they were (Liam, 2026-10-08). */
.campuses { padding-block: 112px 96px; }
.school-grid { gap: 22px; }
.school-card {
  --school-accent-ink: var(--white);
  border: 0;
  border-radius: 0;
  min-height: 320px;
  background: #142333;
  color: var(--white);
  box-shadow: 6px 6px 0 rgb(8 18 27 / .16);
  overflow: clip;
  isolation: isolate;
  transition: transform .5s var(--ease), opacity .5s var(--ease), filter .5s var(--ease), box-shadow .5s var(--ease);
}
.school-card-image { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
/* A photo still loading or missing shows a block a shade lighter than the card's navy. */
.school-card { --skeleton: #1d2e40; --skeleton-sheen: #283b4f; }
.school-card-overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(8 18 27 / .08) 0%, rgb(8 18 27 / .14) 36%, rgb(8 18 27 / .84) 78%, rgb(8 18 27 / .98) 100%); pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .school-card:hover { box-shadow: 10px 10px 0 rgb(8 18 27 / .2); } }
/* Keyboard focus still zooms the photo anywhere; a tap on Save never does. */
.school-card:has(:focus-visible) .school-card-image { transform: scale(1.05); }
@media (hover: hover) and (pointer: fine) { .school-card:is(:hover, :focus-within) .school-card-image { transform: scale(1.05); } }
.school-portal { min-height: 266px; padding: 22px 24px 18px; display: flex; flex-direction: column; justify-content: space-between; }
.school-card-top { margin-bottom: 22px; align-items: center; justify-content: flex-end; }
.school-card.unc { --school-accent-ink: #0a1a27; }
.school-location {
  position: absolute;
  top: 0;
  left: 0;
  padding: 8px 14px;
  background: var(--school-accent);
  color: var(--school-accent-ink);
  font-weight: 600;
}
.school-prefix, .school-fullname { color: rgb(255 255 255 / .82); }
.school-card h3 { font-size: 40px; text-shadow: 0 2px 15px rgb(0 0 0 / .3); }
.school-card-copy { margin-top: auto; }
/* Keep Save above the stretched campus link; other footer clicks still open campus. */
.school-card-bottom { position: relative; z-index: 2; pointer-events: none; border: 0; border-top: 1px solid color-mix(in srgb, var(--school-accent) 58%, transparent); background: rgb(8 18 27 / .36); color: var(--white); padding: 0 15px 0 24px; min-height: 54px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.school-card-bottom > span svg { color: color-mix(in srgb, var(--school-accent) 72%, white); }
.save-school { border-radius: 12px; pointer-events: auto; }
@media (hover: hover) and (pointer: fine) { .save-school:hover { background: color-mix(in srgb, var(--school-accent) 24%, transparent); } }
.save-school[aria-pressed="true"] svg { color: color-mix(in srgb, var(--school-accent) 72%, white); fill: currentColor; }
.school-portal:focus-visible { outline-color: var(--white); outline-offset: -5px; border-radius: 0; }
.school-card.unc .school-card-image { object-position: 56% center; }
.school-card.ncsu .school-card-image { object-position: 57% center; }
.school-card.duke .school-card-image { object-position: center 28%; }
.school-card.psu .school-card-image { object-position: center 42%; }
.school-card.charlotte .school-card-image { object-position: center 31%; }
@media (hover: hover) and (pointer: fine) {
  .campus-card-grid:has(.school-card:is(:hover, :focus-within)) .school-card { transform: scale(.97); opacity: .6; filter: blur(2px); }
  .campus-card-grid:has(.school-card:is(:hover, :focus-within)) .school-card:is(:hover, :focus-within) { z-index: 2; transform: scale(1.05); opacity: 1; filter: none; }
}
/* The request card shares a grid row with two campus cards, so it has to fit their
   320px or it stretches them and leaves dead space under their footers. A one-line
   heading sized to the card is what makes the email form fit. */
.request-campus { container-type: inline-size; justify-content: flex-start; gap: 16px; border: 0; border-radius: 0; padding: 24px 26px; box-shadow: 6px 6px 0 rgb(8 18 27 / .16); }
.request-campus > div:first-child { display: flex; align-items: center; gap: 10px; }
.request-campus h3 { margin: 0; max-width: none; font-size: clamp(24px, calc((100cqi - 36px) / 8.4), 32px); line-height: 1; }
.request-campus .text-link { margin-top: 0; }
.request-plus { flex: none; width: 26px; height: 26px; transform: none; }
.request-form { gap: 6px; margin-top: 0; }
.request-form input { min-height: 42px; }
.request-form input + label { margin-top: 4px; }
.request-form .button { margin-top: 8px; }
@container (max-width: 230px) {
  .request-plus { display: none; }
  .request-campus h3 { font-size: clamp(20px, calc(100cqi / 8.4), 32px); }
}
.campus-pass { border: 0; border-radius: var(--radius-card); box-shadow: var(--soft-shadow); margin-right: 0; overflow: clip; }
.campus-pass-art { border: 0; border-radius: var(--radius-card) 48% 48% var(--radius-card); }
.campus-pass-art::before, .campus-pass-art::after { display: none; }
.campus-pass-art .life-at-mark { filter: none; transform: rotate(-5deg); }
.campus-pass-actions .button:hover { box-shadow: none; transform: none; }
/* The page's sentence-case rule stops at the cards: their lockups stay in capitals. */
body[data-page="home"] main :is(.school-card, .request-campus) h3 { text-transform: uppercase; }

/* ---- Explore: the feature list beside one large real screen. */
.explore-band { --focus: var(--blue); padding-block: 112px 120px; background: var(--dark); color: var(--paper); }
.explore-band .section-head p { color: var(--on-dark-soft); }
.tour { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); align-items: start; gap: 48px; }
.tour-list { position: relative; display: flex; flex-direction: column; gap: 2px; }
.tour-tab { display: grid; gap: 6px; min-height: 52px; padding: 14px 18px; border: 0; border-radius: 10px; background: none; color: var(--on-dark-soft); text-align: left; transition: background-color .2s var(--ease), color .2s var(--ease); }
@media (hover: hover) and (pointer: fine) { .tour-tab:hover { background: rgb(247 244 237 / .05); color: var(--paper); } }
.tour-tab[aria-selected="true"] { background: rgb(247 244 237 / .08); color: var(--white); }
.tour-tab-name { font-family: var(--display); font-size: 24px; font-weight: 700; line-height: 1.1; }
.tour-tab-note { display: none; color: var(--on-dark); font-size: 15px; line-height: 1.5; }
.tour-tab[aria-selected="true"] .tour-tab-note { display: block; }
.tour-panel { margin: 0; padding: clamp(18px, 3vw, 40px); border-radius: 16px; background: var(--tone, #a9d8f2); }
.tour-panel:not([hidden]) { animation: tour-in .32s var(--ease); }
.tour-frame { overflow: hidden; border-radius: 10px; background: var(--paper); box-shadow: 0 0 0 1px rgb(23 41 61 / .14), 0 28px 48px -22px rgb(23 41 61 / .55); }
.tour-frame picture { display: block; }
.tour-frame img { width: 100%; height: auto; }
/* On wide screens the tab carries the description; the caption is for narrow ones. */
.tour-caption { display: none; }
@keyframes tour-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- Student quotes: every verified quote, on two counter-scrolling rows (21st.dev marquee-01).
   Plain paper cards, no tilt or pins; the rows pause under the pointer and stand still for
   reduced motion. */
.voices { padding-block: 112px 0; }
.voices-track { --voices-board: var(--paper); }
.voices-card { border: 1px solid var(--rule) !important; border-radius: 12px !important; background: var(--surface) !important; padding: 20px 20px 22px !important; }
.voices-card .voices-name { color: var(--ink); font-size: 15px; font-weight: 700; line-height: 20px; }
.voices-card .voices-handle { color: var(--muted); font-size: 13px; line-height: 18px; }
.voices-card .voices-quote { color: var(--ink); font-size: 16px; line-height: 1.55; }
.voices [data-marquee] { padding-block: 6px; }
@media (prefers-reduced-motion: reduce) {
  .voices [data-marquee] > div { animation: none; }
  .voices [data-marquee] { overflow-x: auto; scrollbar-width: thin; }
  .voices [data-marquee] > [aria-hidden="true"] { display: none; }
}

/* ---- How data is handled: a ruled list, not a grid of icon cards. */
.trust { margin-top: 112px; padding-block: 96px; background: var(--band); }
.trust-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; }
.trust-head p { max-width: 40ch; margin-top: 18px; color: var(--text-soft); font-size: 17px; line-height: 1.6; }
.trust-head .text-link { margin-top: 12px; color: var(--link); }
.trust-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; margin: 0; }
.trust-list > div { padding: 22px 0 24px; border-top: 1px solid rgb(23 41 61 / .18); }
.trust-list dt { font-size: 17px; font-weight: 700; line-height: 1.35; }
.trust-list dd { margin: 6px 0 0; color: var(--text-soft); font-size: 15px; line-height: 1.6; }

/* ---- The founder's note and the common questions. */
.closing { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; gap: 64px; padding-block: 112px 120px; }
.founder { margin: 0; padding: 32px; border-radius: 16px; background: var(--dark); color: var(--paper); --focus: var(--blue); }
/* The photo's block is a shade lighter than the charcoal card. */
.founder { --skeleton: #2b2f35; --skeleton-sheen: #363b42; }
.founder img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: center 30%; }
.founder blockquote { margin: 24px 0 0; }
.founder blockquote p { color: var(--on-dark); font-size: 18px; line-height: 1.65; }
.founder blockquote p + p { margin-top: 14px; }
.founder figcaption { display: grid; gap: 2px; margin-top: 24px; font-size: 15px; }
.founder figcaption span { color: var(--on-dark-soft); font-size: 14px; }
.founder .text-link { justify-self: start; margin-top: 10px; color: var(--blue); }
.faq h2 { margin-bottom: 20px; }
.faq details { border-top: 1px solid rgb(23 41 61 / .18); }
.faq details:last-child { border-bottom: 1px solid rgb(23 41 61 / .18); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; padding-block: 16px; font-size: 17px; font-weight: 700; line-height: 1.4; list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 10px; height: 10px; margin-right: 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform .2s var(--ease); }
.faq details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
/* Opening eases the answer down a little, closing eases it back; where the browser cannot
   animate to auto height the answer still fades in. */
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content { block-size: 0; overflow: clip; transition: block-size .26s var(--ease), content-visibility .26s allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }
}
.faq details[open] p { animation: faq-in .26s var(--ease); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (hover: hover) and (pointer: fine) { .faq summary:hover { color: var(--link); } }
.faq details p { max-width: 60ch; padding-bottom: 22px; color: var(--text-soft); font-size: 16px; line-height: 1.65; }
.faq details a { color: var(--link); }

.site-footer { margin-top: 0; border-radius: 40px 40px 0 0; }
.footer-inner { padding-block: 38px 24px; }
.footer-bottom { border: 0; margin-top: 14px; padding-top: 10px; }
.welcome-dialog { border: 0; border-radius: 24px; box-shadow: 0 20px 80px rgb(0 0 0 / .24); }
.welcome-close { border: 0; border-radius: 50%; }
.welcome-form select { border-radius: 12px; }
.welcome-campus-strips { border-radius: 50% 0 0 0; overflow: hidden; }

@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .school-portal { padding-inline: 22px; }
  .school-card-bottom { padding-left: 22px; }
  .tour { grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); gap: 32px; }
  .trust-grid, .closing { gap: 48px; }
}
@media (max-width: 900px) {
  .hero { padding-block: 56px 104px; }
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .hero-copy { --lockup-size: clamp(46px, 13vw, 84px); }
  .hero-visual { --phone-drop: 28px; margin-top: 0; grid-template-columns: minmax(0, 66fr) minmax(0, 34fr); }
  .phone { grid-column: 2; justify-self: end; border-radius: 26px; padding: 5px; }
  .browser { justify-self: start; }
  .hero-try { grid-column: 1 / -1; justify-self: end; font-size: 13px; }
  .phone-screen { border-radius: 25px; }
  /* The list becomes a row of names above the screen; the caption takes over the description. */
  .tour { grid-template-columns: 1fr; gap: 20px; }
  .tour-list { flex-direction: row; gap: 4px; margin: -10px; padding: 10px; overflow-x: auto; scrollbar-width: none; }
  .tour-list::-webkit-scrollbar { display: none; }
  .tour-tab { flex: none; min-height: 44px; padding: 10px 14px; }
  .tour-tab-name { font-size: 20px; }
  .tour-tab[aria-selected="true"] .tour-tab-note { display: none; }
  .tour-caption { display: block; margin-top: 16px; color: var(--ink); font-size: 15px; line-height: 1.5; }
  .trust-grid, .closing { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .campuses { padding-block: 80px 68px; }
  .explore-band, .voices { padding-top: 80px; }
  .explore-band { padding-bottom: 88px; }
  .trust { margin-top: 80px; padding-block: 72px; }
  .closing { padding-block: 80px 96px; }
}
@media (max-width: 600px) {
  body[data-page="home"] { --header-height: 60px; }
  /* The first Safari screen holds LIFE AT, the wheel, the tagline and both buttons; the live
     iPhone stands alone below them, centred and large, its top already showing at the fold.
     Phones get no website screenshot: at this size its text would be about 3px. */
  .hero { padding-block: 36px 64px; }
  .hero-grid { gap: 36px; }
  .hero-actions { margin-top: 26px; }
  .hero-actions .button { flex: 1 1 100%; }
  .hero-visual { --phone-drop: 0px; display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 0; }
  .browser { display: none; }
  .phone { width: clamp(224px, 62vw, 268px); max-width: none; transform: none; padding: 6px; border-radius: 40px; }
  .phone-screen { border-radius: 34px; }
  .hero-try { justify-self: auto; font-size: 14px; }
  /* The Index sheet's close button is small in the screenshot; its hit area reaches past it. */
  .phone-sheet [data-sheet-close]::before { content: ""; position: absolute; inset: -12px; }
  .section-head { margin-bottom: 24px; }

  /* Campuses: the cards keep their height (Liam, 2026-10-08). Save is a full-height block on
     the card's edge, so a near miss can no longer open the campus site. */
  .campuses { padding-block: 40px 56px; }
  #campuses { scroll-margin-top: calc(var(--header-height) - 20px); }
  .campuses .section-head { margin-bottom: 20px; }
  .school-grid { gap: 14px; }
  .school-card, .request-campus { border-radius: 0; }
  .school-portal { min-height: 270px; padding: 20px 20px 14px; }
  .school-card-top { margin-bottom: 0; }
  .school-card h3 { font-size: 39px; }
  .school-card-bottom { padding: 0 0 0 20px; min-height: 52px; }
  .school-card-bottom > span { font-size: 14px; }
  .save-school { align-self: stretch; min-height: 52px; padding: 0 20px 0 18px; border-radius: 0; font-size: 14px; }
  .save-school svg { width: 18px; height: 18px; }
  .school-prefix { font-size: 11px; }
  .school-fullname, .school-location { font-size: 13px; }
  .school-location { padding: 8px 12px; }
  .school-arrow { display: none; }
  /* 16px inputs, so iOS never zooms into the form. */
  .request-campus { min-height: 0; padding: 24px 20px; }
  .request-form label { font-size: 14px; }
  .request-form input { font-size: 16px; min-height: 48px; padding: 10px 14px; }
  .request-form .button { min-height: 50px; font-size: 16px; }
  /* The footer's Request a campus lands the card 20px under the header, like the other links. */
  #request { scroll-margin-top: calc(var(--header-height, 60px) + 20px); }
  /* The pass art keeps its whole rounded shape above the actions row, with room between them. */
  .campus-pass-art { border-radius: 22px 48% 48% 22px; }
  .campus-pass-actions { border: 0; padding: 14px 16px 16px; }

  /* Explore: no tab list; every feature is a card in one sideways swipe row, the next one
     peeking in, each showing the real iPhone screen rising from the card's foot. */
  .explore-band { padding-block: 64px 72px; }
  #explore { scroll-margin-top: calc(var(--header-height) - 44px); }
  /* A fresh load of /#explore-map: the browser's own jump lands the card so the section
     heading above it (72px with its margin) still sits 20px under the header. */
  #explore .tour-panel { scroll-margin-top: calc(var(--header-height) + 92px); }
  .tour-list { display: none; }
  .tour-panels { display: flex; gap: 12px; margin-inline: -20px; padding-inline: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; scrollbar-width: none; }
  .tour-panels::-webkit-scrollbar { display: none; }
  .tour-panel, .tour-panel[hidden] { display: flex !important; flex-direction: column; flex: 0 0 calc(100vw - 72px); scroll-snap-align: start; scroll-snap-stop: always; padding: 20px 20px 0; overflow: hidden; height: clamp(440px, 72svh, 540px); animation: none; }
  .tour-caption { margin: 0 0 16px; }
  .tour-caption strong { display: block; margin-bottom: 6px; font: 700 26px/1.05 var(--display); }
  .tour-frame { flex: none; width: 236px; margin-inline: auto; border-radius: 26px 26px 0 0; box-shadow: 0 0 0 6px #0b0d10; }
  /* Syllabus AI and Assignments have no iPhone screen yet: phones get a crop of the desktop
     capture made for this card (board-tour.tsx), shown whole so no word is cut at the card's
     edge. The capture's background is the paper, so spare room reads as page; each crop sits
     against the edges where its screen runs on (the right, and for Assignments the foot). */
  .tour-panel--wide .tour-frame { flex: 1 1 auto; min-height: 0; width: auto; margin-inline: 0; border-radius: 12px 12px 0 0; box-shadow: 0 0 0 1px rgb(23 41 61 / .14); }
  .tour-panel--wide .tour-frame :is(picture, img) { width: 100%; height: 100%; }
  .tour-panel--wide .tour-frame img { object-fit: contain; object-position: 100% 0; }
  #explore-assignments .tour-frame img { object-position: 100% 100%; }

  .voices { padding-top: 64px; }
  .trust { margin-top: 64px; padding-block: 64px; }
  .trust-list { grid-template-columns: 1fr; }
  .trust-list > div { padding: 16px 0 18px; }
  .closing { padding-block: 64px 72px; gap: 56px; }
  /* The founder note opens with who is speaking: photo, name and role in one row, then the note. */
  .founder { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 24px; }
  .founder img { grid-column: 1; grid-row: 1; width: 52px; height: 52px; }
  .founder figcaption { display: contents; }
  .founder figcaption strong { grid-column: 2; grid-row: 1; align-self: start; margin-top: 4px; }
  .founder figcaption span { grid-column: 2; grid-row: 1; align-self: end; margin-bottom: 4px; }
  .founder blockquote { grid-column: 1 / -1; grid-row: 2; margin-top: 18px; }
  .founder blockquote p { font-size: 17px; line-height: 1.6; }
  .founder .text-link { grid-column: 1 / -1; grid-row: 3; margin-top: 16px; }
  .site-footer { border-radius: 28px 28px 0 0; }
  .footer-inner { padding-top: 32px; }
  .footer-bottom { margin-top: 16px; }
}
/* Student quotes on touch phones: one swipe row instead of two moving marquees; the
   desktop marquee is untouched. */
@media (hover: none) and (max-width: 600px) {
  .voices-track > div { flex-direction: row; justify-content: flex-start; align-items: stretch; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; padding: 6px 20px 10px; scrollbar-width: none; }
  .voices-track > div::-webkit-scrollbar { display: none; }
  .voices [data-marquee] { flex: none; overflow: visible; padding: 0; gap: 12px; }
  .voices [data-marquee] > div { animation: none; gap: 12px; }
  .voices [data-marquee] > [aria-hidden="true"], .voices .pointer-events-none { display: none; }
  .voices-card { width: calc(100vw - 72px); scroll-snap-align: start; scroll-snap-stop: always; }
}
/* Landscape phones: the wordmark, wheel and buttons beside the iPhone, all in one screen. */
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  body[data-page="home"] { --header-height: 56px; }
  .hero { padding-block: 20px 40px; }
  /* The phone's column takes only what the phone and its hint need, so both buttons fit on one
     row. The copy stays at the top, so the buttons sit above the fold however tall the phone is. */
  .hero-grid { grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: start; }
  .hero-copy { --lockup-size: clamp(40px, 11vh, 56px); }
  .hero-actions { flex-wrap: nowrap; gap: 10px; margin-top: 16px; }
  .hero-actions .button { flex: 0 1 auto; padding: 12px 16px; }
  .hero-visual { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0; --phone-drop: 0px; }
  .browser { display: none; }
  /* Wide enough that its dock and Index tiles take a finger; it may run past the fold. */
  .phone { width: clamp(222px, 26vw, 230px); max-width: none; transform: none; }
  /* 16px inputs, so iOS never zooms into the form. */
  .request-form input { font-size: 16px; min-height: 48px; }
  /* Every Explore tab stays on screen: the row wraps instead of hiding Goals past the edge. */
  .tour-list { flex-wrap: wrap; overflow: visible; }
}
/* Phones: the wheel's names and the Index tiles sit close together, so each one's tap area
   reaches across half the gap to its neighbour. Nothing visible changes. */
@media (max-width: 600px), (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  /* 6px, which the scale on the faded outer names shrinks to about 4px across their wider gaps. */
  .wheel-item::before { content: ""; position: absolute; inset: -6px 0; }
  .phone-sheet [data-sheet-close]::before { content: ""; position: absolute; inset: -12px; }
  /* Tiles are 6.86% of the sheet tall on a 7.79% pitch and 45.02% wide on a 47.02% pitch, so
     half of each gap is 6.8% of a tile's height and 2.2% of its width. */
  .phone-sheet [data-sheet-tile]::before { content: ""; position: absolute; inset: -6.8% -2.2%; }
}
/* Touch: styles.css lifts a card and tints Save on :hover, which a tap would leave stuck. */
@media (hover: none) {
  .school-card:hover { transform: none; box-shadow: 6px 6px 0 rgb(8 18 27 / .16); }
  .save-school:hover { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .tour-tab, .wheel-item, .browser-screen, .phone-view { transition: none; }
  .faq details::details-content { transition: none; }
  .faq details[open] p { animation: none; }
  .is-hinting .hot::after { animation: none; }
  .school-card, .school-card-image { transition: none; }
  .campus-card-grid:has(.school-card:is(:hover, :focus-within)) .school-card,
  .campus-card-grid:has(.school-card:is(:hover, :focus-within)) .school-card:is(:hover, :focus-within) { transform: none; }
  .school-card:hover { transform: none; }
  .tour-panel:not([hidden]) { animation: none; }
}
.voices-card svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }