/* Textbook+ 2.0 public pages (/v2/ and /v2/privacy.html): ultra-large liquid-chrome type in
   the app's greyscale roles (DESIGN.md), light and dark, following assets/theme.js. */
/* Layout: a pale gallery wall — one ultra-large chrome headline per screen, small quiet copy tucked beside it. Colour comes only from the app's monochrome roles (DESIGN.md), light and dark. */
:root {
  color-scheme: light;
  /* the app's colour roles (DESIGN.md, monochrome scheme from the black seed); light here, dark below */
  --canvas: #F9F9F9;        /* background / surface */
  --lowest: #FFFFFF;        /* surface-container-lowest */
  --ink: #1B1B1B;           /* on-surface */
  --mute: #474747;          /* on-surface-variant */
  --hair: #C6C6C6;          /* outline-variant */
  --primary: #000000;       /* primary */
  --on-primary: #E2E2E2;    /* on-primary */
  --container: #E2E2E2;     /* surface-container-highest */
  --inverse: #303030;       /* inverse-surface */
  --on-inverse: #F1F1F1;    /* inverse-on-surface */
  --primary-hover: #303030;
  --screen: #F9F9F9;        /* the phone frame behind a screenshot */
  --shade: rgba(0,0,0,.14); /* shadow under the chrome */
  --frame-shadow: rgba(0,0,0,.4);
  --orb-1: #C6C6C6; --orb-2: #ABABAB; --orb-3: #FFFFFF;
  --dot-2: #747474; --dot-3: #C6C6C6;
  --glow: linear-gradient(100deg, #000000, #747474 45%, #303030 70%, #919191);
  --display: "Roboto Flex", "Helvetica Neue", Arial, sans-serif;
  --body: "Roboto Flex", "Helvetica Neue", Arial, sans-serif;
  --mark: Outfit, "Roboto Flex", sans-serif;
    /* liquid chrome in the scheme's own greys: black, the tonal steps between, and white highlights */
  --chrome: linear-gradient(100deg,
    #000000 0%, #303030 10%, #5E5E5E 17%, #777777 20%, #474747 25%, #1B1B1B 33%,
    #3B3B3B 39%, #000000 45%, #5E5E5E 51%, #777777 53.5%, #474747 59%, #1B1B1B 66%,
    #5E5E5E 72%, #303030 78%, #777777 85%, #5E5E5E 90%, #303030 95%, #000000 100%);   /* lightest stop is outline #777777: 4.25:1 on the page */
}
/* dark: the app's dark roles; the chrome runs from white down to the dark outline grey (#919191, 6.6:1 on #131313) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --canvas: #131313; --lowest: #0E0E0E; --ink: #E2E2E2; --mute: #C6C6C6; --hair: #474747;
    --primary: #FFFFFF; --on-primary: #1B1B1B; --container: #353535; --inverse: #E2E2E2; --on-inverse: #303030;
    --primary-hover: #E2E2E2; --screen: #131313; --shade: rgba(0,0,0,.5); --frame-shadow: rgba(0,0,0,.7);
    --orb-1: #303030; --orb-2: #474747; --orb-3: #1B1B1B;
    --dot-2: #919191; --dot-3: #474747;
    --glow: linear-gradient(100deg, #FFFFFF, #ABABAB 45%, #E2E2E2 70%, #919191);
    --chrome: linear-gradient(100deg,
      #FFFFFF 0%, #C6C6C6 10%, #919191 17%, #ABABAB 22%, #E2E2E2 28%, #FFFFFF 33%,
      #D4D4D4 39%, #FFFFFF 45%, #ABABAB 51%, #919191 54%, #C6C6C6 59%, #FFFFFF 66%,
      #ABABAB 72%, #E2E2E2 78%, #919191 85%, #C6C6C6 90%, #E2E2E2 95%, #FFFFFF 100%);
  }
}
/* dark chosen with the theme switch (assets/theme.js) */
:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #131313; --lowest: #0E0E0E; --ink: #E2E2E2; --mute: #C6C6C6; --hair: #474747;
  --primary: #FFFFFF; --on-primary: #1B1B1B; --container: #353535; --inverse: #E2E2E2; --on-inverse: #303030;
  --primary-hover: #E2E2E2; --screen: #131313; --shade: rgba(0,0,0,.5); --frame-shadow: rgba(0,0,0,.7);
  --orb-1: #303030; --orb-2: #474747; --orb-3: #1B1B1B;
  --dot-2: #919191; --dot-3: #474747;
  --glow: linear-gradient(100deg, #FFFFFF, #ABABAB 45%, #E2E2E2 70%, #919191);
  --chrome: linear-gradient(100deg,
    #FFFFFF 0%, #C6C6C6 10%, #919191 17%, #ABABAB 22%, #E2E2E2 28%, #FFFFFF 33%,
    #D4D4D4 39%, #FFFFFF 45%, #ABABAB 51%, #919191 54%, #C6C6C6 59%, #FFFFFF 66%,
    #ABABAB 72%, #E2E2E2 78%, #919191 85%, #C6C6C6 90%, #E2E2E2 95%, #FFFFFF 100%);
}
:root[data-theme="light"] { color-scheme: light; }
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--canvas); color: var(--ink);
  font: 400 1rem/1.55 var(--body);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  overflow-x: clip;
}
html { overflow-x: clip; }
a { color: inherit; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 20; padding: 10px 16px; border-radius: 8px; background: var(--inverse); color: var(--on-inverse); }
.skip:focus { top: calc(8px + env(safe-area-inset-top, 0px)); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 6px; }

.wrap { max-width: 1320px; margin: 0 auto; }

/* ---------- the chrome type ---------- */
.chrome {
  position: relative;
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.84;
  background: var(--chrome);
  background-size: 260% 100%;
  background-position: var(--sheen, 30%) 50%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  /* The metal is a background painted through the letters, and a background only
     paints inside the box. The tight line height and tracking make the box smaller
     than the glyphs, so pad it to cover descenders and overhangs, and take the same
     amount back with negative margins so the layout doesn't move. */
  --ink-top: .06em; --ink-side: .12em; --ink-bottom: .24em;
  padding: var(--ink-top) var(--ink-side) var(--ink-bottom);
  filter: url(#liquid) drop-shadow(0 14px 22px var(--shade));
  animation: sheen 9s cubic-bezier(.45,0,.2,1) infinite alternate;
}
.chrome::after {          /* the glowing edge: a blurred colour copy behind the metal */
  content: attr(data-text);
  content: attr(data-text) / "";   /* decorative: screen readers skip it */
  position: absolute; inset: 0; z-index: -1;
  padding: inherit;   /* the glow copy sits exactly on the metal */
  background: var(--glow);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: blur(7px); opacity: .11;
  white-space: inherit;
}
@keyframes sheen { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

/* width breathes on the big lines: Roboto Flex's width axis */
.chrome.breathe { animation: sheen 9s cubic-bezier(.45,0,.2,1) infinite alternate, breathe 7s ease-in-out infinite alternate; }
.chrome.breathe.b2 { animation-delay: -3s, -2.3s; }
.chrome.breathe.b3 { animation-delay: -6s, -4.6s; }
@keyframes breathe {
  from { font-variation-settings: "wdth" 84, "opsz" 144; }
  to   { font-variation-settings: "wdth" 100, "opsz" 144; }
}

.label { font: 600 .75rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5;
  display: flex; align-items: center; gap: 16px;
  padding-block: 18px;
  isolation: isolate;
}
/* the bar's frosted background runs edge to edge; its contents stay on the page's column */
.nav::before {
  content: ""; position: absolute; z-index: -1;
  inset: 0 calc(50% - 50vw);
  background: color-mix(in srgb, var(--canvas) 82%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--canvas); }
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; margin-right: auto; }
.brand .symbol { font-family: "Material Symbols Rounded"; font-size: 28px; line-height: 1; font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 28; -webkit-font-feature-settings: "liga"; font-feature-settings: "liga"; }
.brand .word { font: 500 1.375rem/1 var(--mark); }
.nav-links { display: none; gap: 28px; font-size: .9375rem; }
.nav-links a { text-decoration: none; color: var(--mute); }
.nav-links a:hover { color: var(--ink); }
.ghost { color: var(--primary); font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--primary); padding-bottom: 2px; }

/* ---------- hero ---------- */
.hero { position: relative; padding-block: 28px 64px; isolation: isolate; }
.hero > .label { text-wrap: balance; }   /* no lone word on the last line when it wraps */
.orb { position: absolute; z-index: -2; border-radius: 50%; filter: blur(60px); opacity: .55; pointer-events: none; }
.orb.o1 { width: 38vw; height: 38vw; max-width: 520px; max-height: 520px; background: var(--orb-1); top: 4%; right: -8%; opacity: .55; }
.orb.o2 { width: 26vw; height: 26vw; max-width: 360px; max-height: 360px; background: var(--orb-2); top: 40%; right: 18%; opacity: .3; }
.orb.o3 { width: 20vw; height: 20vw; max-width: 280px; max-height: 280px; background: var(--orb-3); bottom: 4%; left: 8%; opacity: .9; }
.hero h1 { margin: 18px 0 0; font-size: clamp(3.2rem, 14vw, 14rem); }
.hero h1 .line { display: block; white-space: nowrap; }
.hero-foot { display: grid; gap: 28px; margin-top: 36px; align-items: end; }
.lede { margin: 0; max-width: 34ch; font-size: 1.1875rem; line-height: 1.5; color: var(--ink); }
.cta-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 28px; }
.cta-row .ghost { margin-top: 14px; }
.phone {
  width: min(250px, 62vw); aspect-ratio: 630 / 1400; max-width: 100%;
  border-radius: 34px; overflow: hidden; background: var(--screen);
  border: 1px solid var(--hair);
  box-shadow: 0 50px 80px -40px var(--frame-shadow), 0 0 0 8px var(--lowest), 0 0 0 9px var(--hair);
}
.phone picture { display: contents; }
.phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.hero .phone { justify-self: start; transform: rotate(-4deg); }

/* ---------- marquee ---------- */
.marquee { border-block: 1px solid var(--hair); overflow: hidden; padding-block: 18px; margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); }
.track { display: flex; width: max-content; gap: 48px; animation: slide 38s linear infinite; }
.marquee:hover .track { animation-play-state: paused; }
html.still .chrome, html.still .track { animation-play-state: paused !important; }
@media (hover: hover) { .theme-toggle:hover { background: var(--container); } }
.theme-toggle:focus-visible { background: var(--container); }
.theme-toggle {
  display: inline-grid; place-items: center; flex-shrink: 0;
  width: 48px; height: 48px; padding: 0; border: 0; border-radius: 999px;
  background: none; color: var(--ink); cursor: pointer;
}
.theme-toggle .symbol { font-family: "Material Symbols Rounded"; font-size: 24px; line-height: 1; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; -webkit-font-feature-settings: "liga"; font-feature-settings: "liga"; }
.track span { font: 800 clamp(2.4rem, 7vw, 5.5rem)/1 var(--display); letter-spacing: -.03em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
.track span.fill { -webkit-text-stroke: 0; }
.track i { font-style: normal; align-self: center; width: 14px; height: 14px; border-radius: 50%; background: var(--primary); }
.track i.b { background: var(--dot-2); }
.track i.l { background: var(--dot-3); }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- ways ---------- */
.section { padding-block: 96px; }
.ways { display: grid; gap: 0; margin-top: 28px; }
.way { display: grid; gap: 10px 32px; padding-block: 28px; border-top: 1px solid var(--hair); align-items: baseline; }
.way:last-child { border-bottom: 1px solid var(--hair); }
.way { --way-size: clamp(3rem, 11vw, 9.5rem); }
.way h3 { margin: 0; font-size: var(--way-size); }
.way p { margin: 0; max-width: 40ch; color: var(--mute); font-size: 1.0625rem; }
.way .label { color: var(--ink); }

/* ---------- figures ---------- */
/* ---------- see it, three ways ---------- */
/* phones: stacked; from 600 px two columns (the third centred below); from 1000 px three */
.see h2 { margin: 0; font-size: clamp(2.6rem, 8.6vw, 8rem); text-wrap: balance; }
.trio { display: grid; gap: 56px 32px; margin-top: 48px; }
.trio-item { display: grid; gap: 24px; justify-items: center; align-content: start; min-width: 0; }
.trio-text { justify-self: stretch; max-width: 34ch; }
.trio-text h3 { margin: 0; font: 700 1.5rem/1.15 var(--display); font-variation-settings: "wdth" 80; letter-spacing: -.01em; color: var(--ink); }
.trio-text p { margin: 8px 0 0; font-size: 1.0625rem; color: var(--mute); }
.see-note { margin: 40px 0 0; font-size: .875rem; color: var(--mute); max-width: 60ch; }

/* ---------- board-style papers ---------- */
/* phones: copy, then the tablets, then the bank figure; from 760 px the tablets sit in the right column */
.board h2 { margin: 0; font-size: clamp(2.6rem, 8.6vw, 8rem); text-wrap: balance; }
.board-grid { display: grid; gap: 40px; margin-top: 40px; grid-template-areas: "copy" "tablet" "num"; }
.board-copy { grid-area: copy; display: grid; gap: 16px; align-content: start; }
.board-copy > p { margin: 0; max-width: 46ch; font-size: 1.0625rem; color: var(--mute); }
.board-copy > p:first-child { color: var(--ink); font-size: 1.1875rem; line-height: 1.5; }
.board-copy > .board-note { font-size: .875rem; }
.board .num { grid-area: num; container-type: inline-size; min-width: 0; }
.board .num .chrome { font-size: clamp(3.4rem, 15cqi, 7.5rem); font-variant-numeric: tabular-nums; display: inline-block; }
/* landscape tablets (Pixel Tablet, status bars cropped off) in the page's device-frame style.
   Phones: a row of the three that swipes sideways, the next frame peeking in. From 760 px a cascade in the
   right column: the written answer at the back, the assertion–reason question in front of it as the main
   frame, the results smallest at the front over its lower-right corner */
.tablet-stack {
  grid-area: tablet; min-width: 0; display: flex; gap: 28px; align-items: start;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 10px;
  padding: 10px 10px 48px; scrollbar-width: none; border-radius: 8px;
}
.tablet-stack::-webkit-scrollbar { display: none; }
.tablet-stack:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.tablet {
  flex: 0 0 84%; aspect-ratio: 2560 / 1552; scroll-snap-align: start;
  border-radius: 20px; overflow: hidden; background: var(--screen);
  border: 1px solid var(--hair);
  box-shadow: 0 50px 80px -40px var(--frame-shadow), 0 0 0 9px var(--lowest), 0 0 0 10px var(--hair);
}
.tablet-results { aspect-ratio: 2560 / 1462; }   /* the results crop, down to its three rows */
.tablet img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.num p { margin: 8px 0 0; max-width: 30ch; font-size: 1.0625rem; color: var(--mute); }
.facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.facts span { padding: 10px 16px; border-radius: 999px; border: 1px solid var(--hair); font-size: .9375rem; background: var(--lowest); }
.facts span b { font-weight: 700; }

/* ---------- belief ---------- */
.belief h2 { margin: 0; font-size: clamp(2.8rem, 11.5vw, 11rem); white-space: nowrap; }
.belief blockquote { margin: 40px 0 0; font: 500 clamp(1.5rem, 3.4vw, 2.6rem)/1.15 var(--display); letter-spacing: -.02em; max-width: 20ch; }
.belief blockquote em { font-style: normal; color: var(--primary); font-weight: 700; }
.belief .pair { display: grid; gap: 40px; }
.belief p { margin: 16px 0 0; max-width: 42ch; color: var(--mute); font-size: 1.0625rem; }

/* ---------- the privacy notice ---------- */
.legal { max-width: 75ch; padding-block: 24px 96px; }
.legal-title { display: block; margin: 0 0 16px; font-size: clamp(3.2rem, 13vw, 9rem);
  animation: none; background-position: 30% 50%; filter: drop-shadow(0 14px 22px var(--shade)); }   /* a still headline: no motion to pause on this page */
.legal .label { margin: 0 0 28px; }
.legal-lede { margin: 0 0 8px; font-size: 1.1875rem; line-height: 1.5; max-width: 52ch; }
.legal h2 { margin: 40px 0 10px; font: 600 1.0625rem/1.4 var(--body); font-variation-settings: "wdth" 75; letter-spacing: .01em; }
.legal ul { margin: 0; padding-inline-start: 20px; display: grid; gap: 8px; color: var(--mute); }
.legal li::marker { color: var(--mute); }
.legal-draft {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; margin-bottom: 28px; border-radius: 16px;
  background: var(--container); color: var(--ink);
}
.legal-draft p { margin: 0; font-size: .9375rem; }
.legal-draft .symbol { font-family: "Material Symbols Rounded"; font-size: 20px; line-height: 1.2; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20; -webkit-font-feature-settings: "liga"; font-feature-settings: "liga"; }

/* ---------- close ---------- */
.close { text-align: left; padding-block: 120px 96px; }
.close h2 { margin: 0 0 40px; font-size: clamp(3.2rem, 14.5vw, 14rem); }
.promise-row { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 28px; color: var(--mute); font-size: .9375rem; }
.promise-row span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); margin-right: 10px; vertical-align: 1px; }

footer { border-top: 1px solid var(--hair); padding-block: 32px 40px; display: grid; gap: 14px; color: var(--mute); font-size: .875rem; }
footer .row { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; }
footer .notice { margin: 0; }   /* one line wherever the screen is wide enough */
footer .notice + .notice { margin-top: -6px; }
.motion-link {
  min-height: 48px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: var(--ink); text-decoration: underline; text-underline-offset: .15em;
}
/* the official Google Play badge, unaltered, with the Apple note below */
.get { display: grid; gap: 14px; justify-items: start; }   /* the badge's clear space: about a quarter of its height */
.play-badge { display: inline-block; line-height: 0; border-radius: 9px; }
.play-badge img { width: 180px; height: auto; display: block; }
.soon { margin: 0; font-size: .8125rem; line-height: 1.3; color: var(--mute); }
footer svg.ab { width: 30px; height: 30px; color: var(--mute); }

@media (min-width: 760px) {
  .nav-links { display: flex; }
  .hero-foot { grid-template-columns: 1fr auto; }
  .hero .phone { position: absolute; right: 2%; top: 30%; width: 260px; z-index: -1; }
  .hero-foot { grid-template-columns: minmax(0, 1fr); }
  .way { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
  .way > div { padding-top: calc(var(--way-size) * var(--cap-offset, .045)); }
  .board-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); grid-template-areas: "copy tablet" "num tablet"; column-gap: 56px; row-gap: 32px; align-items: start; }
  /* the cascade, sized so each frame's key part shows: the passage and its answer box, the options, the score */
  .tablet-stack { display: block; position: relative; container-type: inline-size; overflow: visible; height: 0; padding: 0 0 calc(95% + 20px); margin-top: 8px; }
  .tablet-stack > .tablet { position: absolute; }
  .tablet-write { top: 10px; right: 10px; width: 55cqi; border-radius: 16px; }
  .tablet-ar { top: calc(27cqi + 10px); left: 10px; width: 78cqi; z-index: 1; }
  .tablet-results { top: calc(63cqi + 10px); right: 10px; width: 55cqi; z-index: 2; border-radius: 16px; }
  .belief .pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 600px) {
  .trio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trio-item:last-child { grid-column: 1 / -1; max-width: 50%; justify-self: center; }
}
@media (min-width: 1000px) {
  .trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .trio-item:last-child { grid-column: auto; max-width: none; justify-self: stretch; }
}
@media (min-width: 1100px) { .hero .phone { right: 4%; top: 20%; width: 300px; } }

@media (prefers-reduced-motion: reduce) {
  .chrome, .breathe, .track { animation: none !important; }
  .chrome { filter: drop-shadow(0 18px 28px var(--shade)); }
}
/* the padding above, taken back: last so it wins over each block's own margin: 0 */
:is(h1, h2, h3, span).chrome { margin: calc(-1 * var(--ink-top)) calc(-1 * var(--ink-side)) calc(-1 * var(--ink-bottom)); }
.hero h1 .line { margin-bottom: calc(.04em - var(--ink-bottom)); }
/* the privacy headline keeps its full descender space, so the label below clears the "y" */
.legal-title.chrome { margin-bottom: 12px; }