/* AnimeLife public site.
 *
 * The design here is not invented. It is the chassis the app actually shipped on
 * 2026-08-19 (design/VIBRANCY-PASS-2026-08-19.md), rebuilt for a wide screen:
 * the flat red field, the art band cut by a diagonal, white sticker cards
 * dropping ONE hard red lip, near-black slabs for emphasis, the gold CTA, and
 * M PLUS Rounded 1c over Nunito. The previous site was cream, pastel and set in
 * Inter and Fraunces, three things that pass deleted from the product.
 *
 * Nothing here loads off-origin. Fonts are Latin subsets of the app's own
 * files, built by site/build-fonts.py.
 */

/* ---------------------------------------------------------------- fonts -- */

@font-face {
  font-family: "MPLUSRounded1c";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/MPLUSRounded1c-ExtraBold.woff2") format("woff2");
}

@font-face {
  font-family: "MPLUSRounded1c";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/MPLUSRounded1c-Black.woff2") format("woff2");
}

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Nunito-SemiBold.woff2") format("woff2");
}

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Nunito-Bold.woff2") format("woff2");
}

/* ---------------------------------------------------------------- tokens -- */

:root {
  /* The chassis. Values are cpChassis / cpColor / ink from theme/cityPop.ts. */
  --red: #ff3b4e;
  --red-deep: #c4142b;        /* the red that clears AA as text on white */
  --red-on-dark: #ff7a88;
  --wedge: rgba(122, 10, 25, 0.28);

  --ink: #14181f;             /* headline ink AND the one dark card fill */
  --ink-prose: #23252d;
  --ink-subtle: #6b7280;
  --ink-hairline: #eef0f4;
  --ink-field: #f4f5f8;
  --ink-chip: #f0f2f6;
  --chip-ink: #5b6270;

  --gold: #ffd62e;
  --on-gold: #4a3400;
  --white: #ffffff;

  /* CANDY_CARDS: every hue carries the ink measured against it. */
  --candy-mind: #3bbf9e;      --candy-mind-ink: #08301f;
  --candy-school: #5a96e8;    --candy-school-ink: #07203d;
  --candy-love: #ff7ac2;      --candy-love-ink: #4a0730;
  --candy-crime: #ff9f5a;     --candy-crime-ink: #4a2200;
  --candy-doctor: #c9a0ff;    --candy-doctor-ink: #2e1060;
  --candy-money: #2ec4c0;     --candy-money-ink: #052e2d;
  --candy-primary: #ffd62e;   --candy-primary-ink: #4a3400;

  /* The sticker. One hard red lip, no blur, no border, no glow. */
  --lip-card: 0 6px 0 rgba(122, 10, 25, 0.45);
  --lip-card-lg: 0 8px 0 rgba(122, 10, 25, 0.45);
  --lip-slab: 0 6px 0 rgba(122, 10, 25, 0.5);
  --lip-control: 0 4px 0 rgba(122, 10, 25, 0.4);
  --lip-nested: 0 3px 0 rgba(20, 24, 31, 0.14);
  --lip-gold: 0 6px 0 rgba(140, 102, 0, 0.55);

  --display: "MPLUSRounded1c", "Arial Rounded MT Bold", system-ui, sans-serif;
  --body: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --radius: 24px;
  --radius-lg: 32px;
  --gutter: clamp(20px, 5vw, 56px);
  --measure: 1200px;
  --header-h: 94px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 104px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--ink-prose);
  font-family: var(--body);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--red-deep);
  font-weight: 700;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.02;
  margin: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.shell {
  width: min(var(--measure), 100%);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.shell.wide {
  width: min(1480px, 100%);
}

/* ------------------------------------------------------- shared pieces -- */

/* The eyebrow. Upper, tracked, always the loudest small thing in a block. */
.eyebrow {
  margin: 0 0 14px;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.eyebrow.on-red { color: var(--gold); }
.eyebrow.on-ink { color: var(--red-on-dark); }
.eyebrow.on-paper { color: var(--red-deep); }

.section-intro {
  max-width: 660px;
  margin-bottom: clamp(36px, 5vw, 56px);
}

.section-intro.centered {
  margin-inline: auto;
  text-align: center;
}

.section-intro h2 {
  font-size: clamp(34px, 5.6vw, 58px);
}

.section-intro p {
  margin: 18px 0 0;
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.55;
}

.on-ink .section-intro p,
.on-red .section-intro p {
  color: rgba(255, 255, 255, 0.88);
}

/* The button. A control with the lip, pressed by 3px on click. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 30px;
  border: 0;
  border-radius: 16px;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.button.gold {
  color: var(--on-gold);
  background: var(--gold);
  box-shadow: var(--lip-gold);
}

.button.paper {
  color: var(--ink);
  background: var(--white);
  box-shadow: var(--lip-card);
}

.button:active {
  transform: translateY(3px);
  box-shadow: 0 3px 0 rgba(140, 102, 0, 0.55);
}

.button.paper:active {
  box-shadow: 0 3px 0 rgba(122, 10, 25, 0.45);
}

/* The chip. Upright, radius 10, the app's FilterChips at rest. */
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 15px;
  border-radius: 10px;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.chip.paper {
  color: var(--ink);
  background: var(--white);
  box-shadow: var(--lip-control);
}

.chip.slab {
  color: var(--red-on-dark);
  background: var(--ink);
}

.chip.gold {
  color: var(--on-gold);
  background: var(--gold);
}

.chip.ghost {
  color: #fff;
  background: rgba(122, 10, 25, 0.24);
}

/* ------------------------------------------------------------- header -- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 14px var(--gutter) 0;
}

.header-pill {
  width: min(var(--measure), 100%);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 66px;
  padding: 8px 10px 8px 14px;
  background: var(--white);
  border-radius: 999px;
  box-shadow: var(--lip-card);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
}

.brand img {
  width: 44px;
  height: 44px;
  border-radius: 13px;
}

.brand-name {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.site-nav {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 15px;
  border-radius: 12px;
  color: var(--ink-prose);
  font-family: var(--display);
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav a:hover {
  color: var(--ink);
  background: var(--ink-field);
}

.header-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-left: auto;
  padding: 0 20px;
  background: var(--ink);
  border-radius: 999px;
  color: var(--red-on-dark);
  font-family: var(--display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.site-nav + .header-chip {
  margin-left: 0;
}

/* --------------------------------------------------------------- hero -- */

/* The key art is a 1200 x 630 composition. It used to run as a full-bleed band
 * with object-fit: cover, which on a 1728px screen meant upscaling it 1.31x AND
 * cropping 1.905:1 down to 2.805:1 -- soft, and with the outer characters sliced
 * off. It is now a contained sticker at its own aspect ratio, capped at its own
 * native width so it is never enlarged past 1:1. */

.hero {
  position: relative;
  /* The sticky header is in flow, so the hero is pulled up under it and pads
     itself back out. Without this the strip behind the pill is body ink, which
     reads as a stray dark band above the chassis. */
  margin-top: calc(-1 * var(--header-h));
  padding-top: calc(var(--header-h) + clamp(6px, 1.4vw, 18px));
  padding-bottom: clamp(44px, 5.5vw, 78px);
  background: var(--red);
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  right: -14%;
  top: -6%;
  width: 46%;
  height: 130%;
  background: var(--wedge);
  transform: rotate(13deg);
  pointer-events: none;
}

/* Centred, because the art above it is a centred full-width card: a narrow
   left-aligned column under it left half the chassis empty. */
.hero-body {
  position: relative;
  z-index: 2;
  padding-top: clamp(30px, 4vw, 52px);
  text-align: center;
}

.hero h1 {
  max-width: 18ch;
  margin-inline: auto;
  font-size: clamp(42px, 7vw, 84px);
  color: #fff;
  text-wrap: balance;
}

.hero h1 em {
  display: block;
  font-style: normal;
  color: var(--gold);
}

/* The one line that sells the game. It gets the size it earns. */
.hero-lede {
  max-width: 34ch;
  margin: 24px auto 0;
  font-family: var(--display);
  font-size: clamp(21px, 2.7vw, 31px);
  font-weight: 800;
  line-height: 1.24;
  letter-spacing: -0.01em;
  color: #fff;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 22px;
  margin-top: 32px;
}

/* Plain text, not a chip. Set as a chip it read as a second, dead button
 * sitting next to the real one. */
.hero-platform {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 800;
  color: #fff;
}

.hero-platform::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--gold);
}

.hero-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin-top: 28px;
}

.hero-art {
  position: relative;
  z-index: 2;
}

.hero-art img {
  width: 100%;
  max-width: 1200px;
  height: auto;
  margin-inline: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--lip-card-lg);
}

/* ---------------------------------------------------------- fact strip -- */

.fact-strip {
  position: relative;
  background: var(--ink);
}

.fact-strip .shell {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  padding-block: clamp(34px, 4vw, 48px);
}

.fact-strip .shell > div {
  padding-inline: clamp(0px, 2vw, 28px);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.fact-strip .shell > div:first-child {
  border-left: 0;
  padding-left: 0;
}

.fact-strip strong {
  display: block;
  font-family: var(--display);
  font-size: clamp(15px, 1.7vw, 19px);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
}

.fact-strip span {
  display: block;
  margin-top: 6px;
  font-size: clamp(14px, 1.4vw, 16px);
  color: rgba(255, 255, 255, 0.76);
  line-height: 1.4;
}

/* ------------------------------------------------------------ sections -- */

.section {
  padding-block: clamp(64px, 9vw, 128px);
}

.section.on-paper {
  background: var(--ink-field);
  color: var(--ink-prose);
}

.section.on-paper h2 {
  color: var(--ink);
}

.section.on-ink {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.86);
}

/* h2 only. The world cards below set their own ink against their own hue, and
 * a blanket `.section.on-ink h3` outranks a single-class rule and whites them
 * all out. */
.section.on-ink h2 {
  color: #fff;
}

/* -------------------------------------------------------- how it works -- */

/* The app's list card: a flat vivid band with its own measured ink, then the
 * white body. Same object, one per step. */

.step-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(20px, 2.4vw, 30px);
}

.step-card {
  overflow: hidden;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--lip-card);
}

/* The band carries the ordinal and nothing else. Giving it a word as well
 * ("02 CHOOSE") only restates the title underneath it. */
.step-band {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.18em;
}

.step-card:nth-child(1) .step-band { background: var(--candy-primary); color: var(--candy-primary-ink); }
.step-card:nth-child(2) .step-band { background: var(--candy-love); color: var(--candy-love-ink); }
.step-card:nth-child(3) .step-band { background: var(--candy-school); color: var(--candy-school-ink); }

.step-body {
  padding: 26px 24px 30px;
}

.step-body h3 {
  font-size: clamp(24px, 2.4vw, 30px);
  color: var(--ink);
}

.step-body p {
  margin: 12px 0 0;
  color: var(--ink-prose);
  font-size: 16px;
  line-height: 1.55;
}

/* ------------------------------------------------------------- worlds -- */

/* Two by two. Four worlds in a three-track auto-fit grid strands the fourth
 * one alone on its own row. */
.world-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
}

/* Status chip at the top, the name and the pitch sitting on the floor of the
 * card, so four cards of unequal copy still line up as a set. */
.world-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: clamp(230px, 22vw, 300px);
  padding: clamp(24px, 2.6vw, 34px);
  border-radius: var(--radius);
  box-shadow: var(--lip-card-lg);
}

/* Everything inherits the card's own measured ink, so a hue can never ship a
 * title that outranks it and turns unreadable. */
.world-card h3,
.world-card p,
.world-status {
  position: relative;
  z-index: 1;
  color: inherit;
}

.world-card h3 {
  margin-top: 16px;
  font-size: clamp(27px, 3vw, 38px);
}

.world-card p {
  margin: 12px 0 0;
  max-width: 40ch;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.5;
}

.world-status {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  margin-bottom: auto;
  min-height: 32px;
  padding: 0 13px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.6);
  font-family: var(--display);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* A corner mark, not a watermark: the vibrancy pass retired those. */
.world-mark {
  position: absolute;
  z-index: 0;
  right: clamp(8px, 1.4vw, 22px);
  top: clamp(-10px, -0.6vw, 0px);
  font-size: clamp(92px, 10vw, 150px);
  line-height: 1;
  opacity: 0.22;
  pointer-events: none;
  user-select: none;
}

/* Every card is a CANDY_CARDS pair, hue plus the ink measured against it.
 * Modern Life takes CANDY_PRIMARY, which is the app's own "this is the main
 * one" band. It was the brand red first, but 16px white on #FF3B4E is 3.5:1,
 * and a world's pitch is body copy, not a headline that can live at the 3:1
 * large-text bar. */
.world-modern  { background: var(--candy-primary); color: var(--candy-primary-ink); }
.world-fantasy { background: var(--candy-doctor);  color: var(--candy-doctor-ink); }
.world-romance { background: var(--candy-love);    color: var(--candy-love-ink); }
.world-comedy  { background: var(--candy-crime);   color: var(--candy-crime-ink); }

/* --------------------------------------------------------- screenshots -- */

/* The captures are already red-field store tiles, so they sit on the light
 * section and read as their own stickers. They are the product: show them big. */

.shot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(18px, 2vw, 28px);
}

.shot {
  margin: 0;
}

.shot img {
  width: 100%;
  height: auto;
  border-radius: 18px;
  box-shadow: var(--lip-card-lg);
}

/* ------------------------------------------------------------- replay -- */

/* Three flat statements, not a two-column block with the hero's key art
 * repeated beside it. */
.perk-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.perk-row li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 22px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  font-family: var(--display);
  font-size: clamp(15px, 1.5vw, 17px);
  font-weight: 800;
  line-height: 1.3;
  color: #fff;
}

.perk-row span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 10px;
  background: var(--gold);
  color: var(--on-gold);
  font-size: 16px;
}

/* ---------------------------------------------------------- closing cta -- */

.final-cta {
  position: relative;
  overflow: hidden;
  padding-block: clamp(72px, 10vw, 132px);
  background: var(--red);
  text-align: center;
}

.final-cta::after {
  content: "";
  position: absolute;
  left: -18%;
  top: -30%;
  width: 52%;
  height: 160%;
  background: var(--wedge);
  transform: rotate(13deg);
  pointer-events: none;
}

.final-cta .shell {
  position: relative;
  z-index: 2;
}

.final-cta > .shell > img {
  width: 96px;
  height: 96px;
  margin: 0 auto 26px;
  border-radius: 28px;
  box-shadow: var(--lip-card);
}

.final-cta h2 {
  font-size: clamp(36px, 6.4vw, 78px);
  color: #fff;
}

.final-cta > .shell > p {
  margin: 22px auto 0;
  max-width: 30ch;
  font-family: var(--display);
  font-size: clamp(19px, 2.2vw, 24px);
  font-weight: 800;
  color: #fff;
}

.final-cta .cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 34px;
}

/* ------------------------------------------------------------- footer -- */

.site-footer {
  background: #0c0f14;
  padding-block: clamp(40px, 5vw, 60px);
  color: rgba(255, 255, 255, 0.64);
  font-size: 15px;
}

.site-footer .shell {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 26px 40px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.footer-brand img {
  width: 48px;
  height: 48px;
  border-radius: 15px;
}

.footer-brand strong {
  display: block;
  font-family: var(--display);
  font-size: 19px;
  font-weight: 900;
  color: #fff;
}

.footer-brand span {
  display: block;
  font-size: 14px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin-left: auto;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 11px;
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--display);
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
}

.footer-links a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.footer-copy {
  flex-basis: 100%;
  margin: 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 14px;
}

/* ================================================== readable sub-pages == */

/* privacy.html, safety.html and support.html share one shell. Their markup is
 * left alone on purpose: those pages carry the policy text, the age gate and
 * the crisis numbers, and hand-editing their structure to suit a stylesheet is
 * how a hotline number goes missing. The classes below are the ones already in
 * those files. */

body.doc-page {
  background: var(--red);
}

/* The chassis wedge, fixed so it survives a long policy scroll. */
body.doc-page::before {
  content: "";
  position: fixed;
  right: -14%;
  top: -10%;
  width: 46%;
  height: 130%;
  background: var(--wedge);
  transform: rotate(13deg);
  pointer-events: none;
  z-index: 0;
}

body.doc-page > * {
  position: relative;
  z-index: 1;
}

.wrap {
  width: min(880px, 100%);
  margin: 0 auto;
  padding-inline: clamp(18px, 5vw, 40px);
}

/* --- header ------------------------------------------------------------- */

body.doc-page .site-header {
  position: static;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  width: min(880px, 100%);
  margin: 0 auto;
  padding: clamp(20px, 3vw, 32px) clamp(18px, 5vw, 40px) clamp(18px, 2.4vw, 26px);
}

body.doc-page .brand,
body.doc-page .brand-name {
  color: #fff;
}

body.doc-page .site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}

body.doc-page .site-nav a {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(122, 10, 25, 0.24);
  color: #fff;
  font-size: 14px;
}

body.doc-page .site-nav a:hover {
  background: rgba(122, 10, 25, 0.38);
}

/* --- page hero ---------------------------------------------------------- */

.page-hero {
  padding-block: clamp(10px, 2vw, 22px) clamp(28px, 4vw, 44px);
}

.page-hero .eyebrow {
  color: var(--gold);
}

.page-hero h1 {
  font-size: clamp(36px, 6vw, 62px);
  color: #fff;
}

.page-hero .subtitle {
  max-width: 46ch;
  margin: 18px 0 0;
  font-family: var(--display);
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 800;
  line-height: 1.35;
  color: #fff;
}

/* A date is a stamp, not a subtitle: set at .subtitle size it shouts louder
 * than the policy it dates. */
.page-stamp {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  margin: 18px 0 0;
  padding: 0 15px;
  border-radius: 10px;
  background: rgba(122, 10, 25, 0.24);
  color: #fff;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --- the sheet ---------------------------------------------------------- */

/* One white sticker holding the whole document, so a policy page still looks
 * like the same product as the homepage. */
.content {
  padding: clamp(28px, 4.4vw, 50px) clamp(22px, 4vw, 46px) clamp(34px, 4.6vw, 54px);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--lip-card-lg);
}

.content h2 {
  margin: 40px 0 10px;
  padding-top: 28px;
  border-top: 1px solid var(--ink-hairline);
  font-size: clamp(22px, 2.6vw, 28px);
  color: var(--ink);
}

.content h2:first-of-type {
  margin-top: 6px;
  padding-top: 0;
  border-top: 0;
}

.content h3 {
  margin: 26px 0 8px;
  font-size: 19px;
  color: var(--ink);
}

.content p,
.content li {
  color: var(--ink-prose);
  font-size: 16.5px;
  line-height: 1.62;
}

.content li {
  margin-bottom: 8px;
}

.content strong {
  color: var(--ink);
  font-weight: 700;
}

.content a {
  color: var(--red-deep);
  text-underline-offset: 3px;
}

.updated,
.content .updated {
  color: var(--ink-subtle);
  font-size: 14px;
  font-weight: 700;
}

/* A block that must not be skimmed past: the contact address, the age gate,
 * the crisis numbers. */
.note-card {
  margin: 0 0 30px;
  padding: 20px 22px;
  background: #fff2f3;
  border-left: 5px solid var(--red);
  border-radius: 16px;
}

.note-card p:first-child { margin-top: 0; }
.note-card p:last-child { margin-bottom: 0; }

.faq-item {
  padding-top: 22px;
  border-top: 1px solid var(--ink-hairline);
}

.faq-item:first-of-type {
  padding-top: 6px;
  border-top: 0;
}

.faq-item h3 {
  margin-top: 0;
}

/* --- footer ------------------------------------------------------------- */

body.doc-page .site-footer {
  margin-top: clamp(34px, 5vw, 56px);
  background: transparent;
  color: rgba(255, 255, 255, 0.82);
}

.footer-inner {
  width: min(880px, 100%);
  margin: 0 auto;
  padding-inline: clamp(18px, 5vw, 40px);
}

body.doc-page .footer-links {
  margin-left: 0;
}

body.doc-page .footer-links a {
  color: #fff;
}

body.doc-page .footer-links a:hover {
  background: rgba(122, 10, 25, 0.3);
}

body.doc-page .footer-copy {
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.24);
  color: rgba(255, 255, 255, 0.82);
}

/* ---------------------------------------------------------- responsive -- */

/* The three nav labels stop fitting in the pill well before the fact strip
 * stops fitting in three columns, so they get their own breakpoint. */
@media (max-width: 940px) {
  .site-nav {
    display: none;
  }
}

@media (max-width: 760px) {
  .world-grid {
    grid-template-columns: 1fr;
  }

  .fact-strip .shell {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .fact-strip .shell > div {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 560px) {
  body {
    font-size: 16px;
  }

  .hero h1,
  .hero-lede {
    max-width: none;
  }

  .header-pill {
    min-height: 60px;
    padding: 7px 8px 7px 12px;
  }

  .brand img {
    width: 38px;
    height: 38px;
    border-radius: 11px;
  }

  .brand-name {
    font-size: 18px;
  }

  .header-chip {
    min-height: 40px;
    padding: 0 15px;
    font-size: 12px;
  }

  .world-mark {
    font-size: 70px;
  }

  .shot-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .button {
    transition: none;
  }
}