@font-face {
  font-family: "Newsreader";
  src: url("assets/newsreader-variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("assets/source-serif-4-bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("assets/source-serif-4-italic.ttf") format("truetype");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("assets/inter-variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
}

:root {
  font-family: "Source Serif 4", Georgia, serif;
  color: #000;
  background: #fff;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* { box-sizing: border-box; }
body { margin: 0; }
::selection { background: #000; color: #fff; }

/* While the opening plays, the page is held at the top. */
@media (prefers-reduced-motion: no-preference) {
  .pod8-intro-active.is-hero-revealing { overflow-y: scroll; }

  .pod8-intro-active body {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
  }
}

.about {
  padding: clamp(56px, 5vw, 80px) clamp(24px, 6vw, 96px);
  display: flex;
  font-family: "Inter", Arial, sans-serif;
  font-weight: 400;
  color: #f3f0e8;
  background: #141618;
}

.about ::selection,
.manifesto ::selection,
.care ::selection { background: #f3f0e8; color: #1b1b19; }

.about-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

.about-intro { max-width: 760px; }

@media (prefers-reduced-motion: no-preference) {
  [data-reveal].is-reveal-pending > * {
    opacity: 0;
    transform: translateY(1rem);
  }
}

.section-label {
  margin: 0 0 24px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #b4b5ac;
}

.about h2,
.audience-column h3,
.standards h2 {
  margin: 0;
  font-family: "Newsreader", Georgia, serif;
  font-weight: 600;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.about h2,
.standards h2 {
  font-size: clamp(34px, 3.6vw, 52px);
  line-height: 1.12;
}

.about h2 > span,
.standards h2 > span { display: block; }

.audience-block {
  display: flex;
  flex-direction: column;
  margin-top: clamp(56px, 6vw, 88px);
}

.audience-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 64px);
}

.audience-column,
.audience-copy {
  display: flex;
  flex-direction: column;
}

.audience-copy { flex: 1; }

.audience-visual {
  --light-left: 38%;
  --light-right: 62%;
  position: relative;
  isolation: isolate;
  height: clamp(184px, min(19vw, 27vh), 260px);
  margin-bottom: 20px;
  transform: translateZ(0);
}

.audience-visual--wide {
  --light-left: 25%;
  --light-right: 75%;
}

.audience-visual::before,
.audience-visual::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.audience-visual::before {
  inset: 4% -3% -5%;
  background:
    radial-gradient(ellipse 42% 42% at 50% 54%, rgb(0 129 204 / .22), rgb(0 81 173 / .1) 45%, transparent),
    radial-gradient(ellipse 30% 30% at 62% 65%, rgb(111 66 221 / .09), transparent);
}

.audience-visual::after {
  right: 8%;
  bottom: -2px;
  left: 8%;
  height: 42px;
  background:
    radial-gradient(ellipse 20% 28% at var(--light-left) 50%, rgb(163 242 255 / .72), rgb(0 176 255 / .52) 32%, transparent),
    radial-gradient(ellipse 20% 28% at var(--light-right) 50%, rgb(141 225 255 / .6), rgb(0 159 255 / .42) 32%, transparent),
    radial-gradient(ellipse 15% 30% at 57% 55%, rgb(181 75 240 / .3), transparent),
    radial-gradient(ellipse 48% 42% at 50% 50%, rgb(0 129 204 / .4), rgb(0 89 204 / .18) 50%, transparent);
  filter: blur(4px);
  /* Light the objects stand in, not a stage they stand on. */
  opacity: .5;
}

.audience-visual img {
  position: absolute;
  bottom: 16px;
  left: 50%;
  z-index: 1;
  display: block;
  width: auto;
  height: calc(100% - 24px);
  object-fit: contain;
  object-position: center bottom;
  translate: -50% 0;
  scale: .9;
  transform-origin: center bottom;
  /* The glass carries its own light; the page adds only an ambient glow, never a neon rim. */
  filter: drop-shadow(0 0 18px rgb(0 129 255 / .16));
}

@media (prefers-reduced-motion: no-preference) {
  /* Keep the wrapper stationary as the scroll measurement anchor. */
  .audience-block > * {
    translate: 0 calc(var(--audience-offset-factor, 0) * clamp(48px, 5vw, 72px));
  }
}

.audience-column h3 {
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.15;
}

.audience-column h3 {
  min-height: 2.3em;
  margin-bottom: 18px;
}

.audience-column p {
  flex: 1;
  max-width: 38ch;
  min-height: 3.2em;
  margin: 0;
  font-size: 20px;
  line-height: 1.6;
  color: #e1e3df;
  text-wrap: pretty;
}

/* The note closes the section rather than trailing the last column: a hairline sets it apart, and
   on wide screens it takes the columns' grid, title under the first and copy across the other two. */
.trust-note {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(32px, 4vw, 64px);
  align-items: baseline;
  margin-top: clamp(64px, 7vw, 104px);
  padding-top: clamp(28px, 3vw, 40px);
  background: linear-gradient(90deg, rgb(243 240 232 / .22), rgb(243 240 232 / 0)) top / 100% 1px no-repeat;
}

.trust-note h3 {
  margin: 0;
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.02em;
  text-wrap: balance;
  color: #f3f0e8;
}

.trust-note p {
  grid-column: 2 / -1;
  max-width: 60ch;
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: #b4b5ac;
  text-wrap: pretty;
}

/* What makes Pod Eight different: four ideas, made a sentence at a time, on the same ground as the
   section before. As written, each sentence is a block in cream with its explanation beside it on
   wide screens and beneath it on narrow ones. manifesto.js lights the sentences as they rise into
   view. Where the screen is wide and tall enough and motion is welcome, the four are instead pinned
   as one statement while the page scrolls past: the sentence reached is lit, and its explanation
   stands beside it. */
@property --manifesto-approach {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

.manifesto {
  --manifesto-ink: #f3f0e8;
  /* A sentence waiting its turn: 3.4:1 on the ground, dimmed but still legible. */
  --manifesto-dim: #686a65;
  --manifesto-note: #b4b5ac;
  /* An explanation waiting its turn: 4.9:1 on the ground. */
  --manifesto-note-dim: #84867f;
  --manifesto-note-width: clamp(240px, 22vw, 320px);
  --manifesto-gap: clamp(48px, 7vw, 120px);
  /* How far the page scrolls for each sentence while the statement is pinned. */
  --manifesto-step: 60vh;
  /* From the close of "Who is Pod Eight for?" to these first words, with that section's own
     padding: a new section's breath, never a screen left empty. The pinned statement arrives at the
     same distance (manifesto.js). */
  --manifesto-approach: clamp(88px, 7.5vw, 128px);
  padding: var(--manifesto-approach) clamp(24px, 6vw, 96px) clamp(96px, 12vw, 176px);
  font-family: "Inter", Arial, sans-serif;
  font-weight: 400;
  color: var(--manifesto-ink);
  background: #141618;
}

.manifesto-stage {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

.manifesto .section-label { margin-bottom: clamp(28px, 3.2vw, 48px); }

/* The statement's type, which each sentence takes up; the explanations set their own. */
.manifesto-list {
  display: grid;
  row-gap: clamp(48px, 5.5vw, 80px);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: "Newsreader", Georgia, serif;
  font-size: clamp(2rem, 1.2rem + 2.9vw, 3.5rem);
  font-weight: 400;
  font-optical-sizing: auto;
  line-height: 1.16;
  letter-spacing: -.018em;
}

.manifesto-item {
  display: grid;
  row-gap: 14px;
}

.manifesto-sentence {
  max-width: 18em;
  margin: 0;
  color: var(--manifesto-ink);
  text-wrap: balance;
}

.manifesto-note {
  max-width: 36ch;
  margin: 0;
  font-family: "Inter", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: normal;
  color: var(--manifesto-note);
  text-wrap: pretty;
}

/* Wide screens set each explanation beside its sentence, hung from the same line as when pinned:
   with these faces and this leading, aligning the two boxes' tops sets their capitals level to
   within a pixel. */
@media (min-width: 62.5em) {
  .manifesto-item {
    grid-template-columns: minmax(0, 1fr) var(--manifesto-note-width);
    column-gap: var(--manifesto-gap);
    align-items: start;
  }
}

/* A sentence and its explanation carry the same number, the mark of a footnote: small, in the
   label's face, and raised so the top of the figure meets the top of the capitals it stands before.
   An explanation's number takes the explanation's grey; a sentence's number takes that grey too. */
@property --manifesto-cap {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

.manifesto-number {
  margin-inline-end: .3em;
  font-family: "Inter", Arial, sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  font-variant-numeric: lining-nums proportional-nums;
  line-height: 1;
  letter-spacing: normal;
  vertical-align: super;
  /* Copying the statement copies its words alone. */
  -webkit-user-select: none;
  user-select: none;
}

.manifesto-sentence > .manifesto-number { color: var(--manifesto-note); }

@supports (top: 1cap) {
  :is(.manifesto-sentence, .manifesto-note) { --manifesto-cap: 1cap; }

  /* Raised by the difference of the two capitals, which leaves the line as it was. */
  .manifesto-number {
    position: relative;
    top: calc(1cap - var(--manifesto-cap));
    vertical-align: baseline;
  }
}

/* Each sentence and its explanation brighten as they rise into view (manifesto.js). An explanation's
   number follows the explanation's colour as it changes. */
.manifesto.is-lighting :is(.manifesto-sentence, .manifesto-note, .manifesto-sentence > .manifesto-number) {
  transition: color .7s cubic-bezier(.25, .1, .25, 1);
}

.manifesto.is-lighting .manifesto-item:not(.is-lit) .manifesto-sentence { color: var(--manifesto-dim); }

.manifesto.is-lighting .manifesto-item:not(.is-lit) :is(.manifesto-note, .manifesto-sentence > .manifesto-number) {
  color: var(--manifesto-note-dim);
}

/* A state taken up at once, on arrival or on a change of layout, is shown at once. */
.manifesto.is-settling * { transition: none !important; }

/* Pinned: the four sentences run on as one paragraph, held on screen while the page scrolls by
   three steps. The page decides this before it is first drawn, so nothing below it moves later;
   manifesto.js lights the sentence reached (.is-lit) and sets each explanation beside its own. */
@media (prefers-reduced-motion: no-preference) and (forced-colors: none) and (min-width: 62.5em) and (min-height: 37.5em) {
  .has-motion .manifesto:not(.is-static) {
    height: calc(100vh + 3 * var(--manifesto-step));
    padding-block: 0;
  }

  @supports (height: 100svh) {
    .has-motion .manifesto:not(.is-static) { height: calc(100svh + 3 * var(--manifesto-step)); }
  }

  /* manifesto.js lifts the statement ahead of the page as it comes up the screen (--manifesto-lift),
     so that it follows the section before at the usual distance rather than after the empty top of
     a pinned screen. Lifted, that empty top reaches over the section before: only the words take
     the pointer. */
  .has-motion .manifesto:not(.is-static) .manifesto-stage {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;
    height: 100svh;
    translate: 0 var(--manifesto-lift, 0px);
    pointer-events: none;
  }

  .has-motion .manifesto:not(.is-static) .manifesto-stage > * { pointer-events: auto; }

  .has-motion .manifesto:not(.is-static) .manifesto-list {
    position: relative;
    display: block;
    margin-right: calc(var(--manifesto-note-width) + var(--manifesto-gap));
    text-wrap: pretty;
  }

  .has-motion .manifesto:not(.is-static) :is(.manifesto-item, .manifesto-sentence) { display: inline; }

  .has-motion .manifesto:not(.is-static) .manifesto-sentence {
    color: var(--manifesto-dim);
    transition: color .6s cubic-bezier(.25, .1, .25, 1);
  }

  .has-motion .manifesto:not(.is-static) .is-lit .manifesto-sentence { color: var(--manifesto-ink); }

  .has-motion .manifesto:not(.is-static) .manifesto-sentence > .manifesto-number {
    color: var(--manifesto-note-dim);
    transition: color .6s cubic-bezier(.25, .1, .25, 1);
  }

  .has-motion .manifesto:not(.is-static) .is-lit .manifesto-sentence > .manifesto-number { color: var(--manifesto-note); }

  .has-motion .manifesto:not(.is-static) .manifesto-note {
    position: absolute;
    top: var(--manifesto-note-top, 0px);
    left: calc(100% + var(--manifesto-gap));
    width: var(--manifesto-note-width);
    opacity: 0;
    transition: opacity .4s cubic-bezier(.4, 0, .2, 1);
  }

  /* The old explanation fades out, and the new one fades in as it goes. */
  .has-motion .manifesto:not(.is-static) .is-lit .manifesto-note {
    opacity: 1;
    transition-delay: .2s;
  }
}

/* manifesto.js measures with this for a moment: zero wide and a capital high, standing on the
   baseline, so its top is where the capitals of that line begin. */
.manifesto-probe {
  display: inline-block;
  width: 0;
  height: 1cap;
  vertical-align: baseline;
}

.standards {
  padding: clamp(64px, 6vw, 96px) clamp(24px, 6vw, 96px);
  background: #fff;
  color: #1b1b19;
  font-family: "Inter", Arial, sans-serif;
  font-weight: 400;
}

.standards-content {
  max-width: 1280px;
  margin: 0 auto;
}

.standards-feature {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: end;
  gap: clamp(40px, 6vw, 80px);
}

.standards-intro { max-width: 520px; }

.standards .section-label { color: #5d5f5a; }

.standards-description {
  max-width: 44ch;
  margin: 24px 0 0;
  color: #5d5f5a;
  font-size: 18px;
  line-height: 1.6;
  text-wrap: pretty;
}

.standards-photo-frame {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 5 / 6;
  max-height: 760px;
  margin: 0;
  border-radius: 4px;
  background: #e6e9ed;
}

.standards-photo-frame img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transform: scale(1.3);
}

@media (prefers-reduced-motion: no-preference) {
  .standards-photo-frame img { translate: 0 var(--frame-scroll-y, 0%); }
}

.standards-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
  margin: clamp(56px, 6vw, 88px) 0 0;
  padding: 0;
  list-style: none;
}

.standard-number {
  display: block;
  margin-bottom: 24px;
  color: #1b1b19;
  font-family: "Newsreader", Georgia, serif;
  font-size: clamp(48px, 4.5vw, 64px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.03em;
  overflow: visible;
  transform-box: border-box;
}

.number-outline,
.quote-outline {
  fill: none;
  stroke: currentColor;
  stroke-width: 22; /* Font units: about .7px at the desktop size. */
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 0;
}

.number-fill,
.quote-fill {
  fill: currentColor;
}

.standard-copy h3 {
  min-height: 2.5em;
  margin: 0 0 12px;
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.standard-copy p {
  max-width: 30ch;
  margin: 0;
  color: #5d5f5a;
  font-size: 16px;
  line-height: 1.6;
  text-wrap: pretty;
}

/* Numbers, titles and descriptions share the list's rows, so a title that wraps further than its
   neighbours' moves the whole row's descriptions down together. */
@supports (grid-template-rows: subgrid) {
  .standards-list > li {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }

  .standard-copy {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    grid-template-columns: minmax(0, 1fr);
  }
}

.care {
  padding: clamp(56px, 5vw, 80px) clamp(24px, 6vw, 96px);
  color: #f3f0e8;
  background: #141618;
}

.care-content {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(48px, 6vw, 96px);
  max-width: 1280px;
  margin: 0 auto;
}

.care-scene {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 760px;
  aspect-ratio: 1000 / 680;
}

.care-constellation,
.care-intro { grid-area: 1 / 1; }

.care-intro { position: relative; }

.care-intro .section-label {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  left: 0;
  margin: 0;
  font-family: "Inter", Arial, sans-serif;
  text-align: center;
}

.care-constellation {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  color: #50afe5;
  pointer-events: none;
}

.constellation-chain > path {
  fill: none;
  stroke: currentColor;
  stroke-width: .65px;
  stroke-opacity: .74;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 32 1.5 18 1 46 2.5;
  vector-effect: non-scaling-stroke;
}

.constellation-chain:last-child > path {
  stroke-opacity: .65;
  stroke-dasharray: 38 1 14 1.8 51 1.2;
}

.constellation-star {
  --star-twinkle: .55;
  --star-strength: 1;
  --star-size: 1;
}

.constellation-star--soft {
  --star-strength: .72;
  --star-size: .78;
}

.constellation-star-aura {
  opacity: calc(var(--star-strength, 1) * (.42 + var(--star-twinkle, .55) * .58));
  transform: scale(calc(var(--star-size, 1) * (.85 + var(--star-twinkle, .55) * .4)));
  transform-origin: 0 0;
}

.constellation-star-bloom {
  opacity: calc(.62 + var(--star-twinkle, .55) * .38);
}

.constellation-star-rays {
  opacity: calc(var(--star-strength, 1) * (.4 + var(--star-twinkle, .55) * .6));
  transform: scale(calc(var(--star-size, 1) * (.75 + var(--star-twinkle, .55) * .4)));
  transform-origin: 0 0;
}

.constellation-star-diagonals {
  fill: none;
  stroke: url(#constellation-star-rays);
  stroke-width: .5px;
  opacity: .35;
  vector-effect: non-scaling-stroke;
}

.constellation-star-core {
  opacity: calc(.8 + var(--star-twinkle, .55) * .2);
}

.care-heading {
  position: relative;
  margin: 0;
  font-family: "Newsreader", Georgia, serif;
  font-size: clamp(32px, 4.8vw, 70px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.04em;
  text-align: center;
}

.care-heading > span {
  position: relative;
  display: block;
  width: max-content;
  margin: 0 auto;
}

.care-quote {
  position: absolute;
  top: -.04em;
  color: #0081cc;
  font-size: .72em;
  line-height: 1;
  overflow: visible;
}

.care-quote--open { right: calc(100% + .14em); }
.care-quote--close { left: calc(100% + .12em); }

.care-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  width: 100%;
}

.care-description {
  max-width: 36ch;
  margin: 0;
  font-family: "Inter", Arial, sans-serif;
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: 400;
  line-height: 1.65;
  text-align: left;
  text-wrap: pretty;
  color: #c5c6bf;
}

.glass-button {
  --glass-shine: 1;
  --glass-tint: rgb(0 0 0 / .065);
  --glass-edge-base: rgb(255 255 255 / .5);
  --glass-edge: rgb(0 0 0 / .5);
  --glass-shadow: rgb(0 0 0 / .2);
  --glass-spread: -0.125em;
  --glass-fill:
    linear-gradient(-75deg,
      rgb(255 255 255 / calc(.05 * var(--glass-shine))),
      rgb(255 255 255 / calc(.2 * var(--glass-shine))),
      rgb(255 255 255 / calc(.05 * var(--glass-shine)))),
    linear-gradient(var(--glass-tint), var(--glass-tint));
  --glass-box-shadow:
    inset 0 .125em .125em rgb(0 0 0 / .05),
    inset 0 -.125em .125em rgb(255 255 255 / calc(.5 * var(--glass-shine))),
    0 .25em .125em var(--glass-spread) var(--glass-shadow),
    inset 0 0 .1em .25em rgb(255 255 255 / calc(.2 * var(--glass-shine)));

  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 48px;
  max-width: 100%;
  margin: 32px 0 0;
  padding: 11px 24px 13px;
  border: 0;
  border-radius: 999px;
  color: #111;
  background: var(--glass-fill);
  box-shadow: var(--glass-box-shadow);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-family: "Inter", Arial, sans-serif;
  font-size: .96875rem;
  font-weight: 500;
  line-height: 1.5rem;
  letter-spacing: -.03em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .4s, box-shadow .4s, color .4s;
  transition-timing-function: cubic-bezier(.65, 0, .35, 1);
  /* WebKit otherwise loses the SourceGraphic of this CSS-referenced SVG filter. */
  transform: translateZ(0);
}

.glass-button--primary {
  --glass-edge-base: rgb(0 129 204 / .34);
  --glass-edge: rgb(157 220 255 / .82);
  --glass-lift: -0.2em;
  --glass-pool: -0.14em;
  --glass-fill:
    linear-gradient(-75deg,
      transparent 18%, rgb(255 255 255 / .14) 40%,
      rgb(255 255 255 / .04) 52%, transparent 66%),
    radial-gradient(ellipse 75% 110% at 50% 120%,
      rgb(0 129 204 / .34), transparent 72%),
    linear-gradient(135deg, rgb(18 42 55 / .72), rgb(8 19 27 / .78));
  --glass-box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .3),
    inset 0 0 0 1px rgb(157 220 255 / .12),
    inset 0 var(--glass-pool) .35em rgb(0 129 204 / .24),
    0 .35em .5em var(--glass-lift) rgb(0 0 0 / .32),
    0 0 24px -6px rgb(0 129 204 / .48),
    0 7px 20px -9px rgb(0 129 204 / .4);
  color: #fff;
}

.glass-button__edge {
  pointer-events: none;
  position: absolute;
  inset: -1px;
  z-index: 10;
  overflow: hidden;
  border-radius: inherit;
  padding: 1px;
  background: var(--glass-edge-base);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) border-box;
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) border-box;
  mask-composite: exclude;
}

.glass-button__edge::before {
  content: "";
  position: absolute;
  left: -50%;
  top: 50%;
  width: 200%;
  aspect-ratio: 1;
  transform: translateY(-50%);
  background: conic-gradient(from -75deg at 50% 50%,
    var(--glass-edge), transparent 5% 40%,
    var(--glass-edge) 50%, transparent 60% 95%,
    var(--glass-edge));
}

.glass-button__arrow {
  display: grid;
  place-items: center;
  flex: 0 0 20px;
}

.glass-button:focus-visible {
  outline: 2px solid #0081cc;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .glass-button { transition: none; }
}

@media (forced-colors: active) {
  .glass-button { border: 1px solid ButtonText; color: ButtonText; background: ButtonFace; }
  .glass-button__edge { display: none; }
  .glass-button:focus-visible { outline-color: Highlight; }
}

@media (max-width: 1000px) {
  .care-content {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 32px;
  }

  .care-heading { font-size: clamp(32px, 9vw, 70px); }
  .care-copy { align-items: center; }

  .care-description {
    max-width: 64ch;
    text-align: center;
    text-wrap: balance;
  }
}

@media (max-width: 800px) {
  .audience-columns {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .audience-visual {
    width: min(100%, 360px);
    height: 220px;
    margin-bottom: 24px;
  }

  .audience-column h3 { min-height: 0; }
  .audience-column p { min-height: 0; }

  .trust-note {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 8px;
  }

  .trust-note p { grid-column: auto; }

  .standards-feature {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .standards-intro { max-width: 600px; }

  .standards-photo-frame {
    aspect-ratio: 4 / 5;
    max-height: none;
  }

  .standards-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 40px;
  }

  /* Title breaks keep the four-column row at two lines each; wider columns here fit titles on one. */
  .standard-copy h3 br { display: none; }
}

@media (max-width: 640px) {
  :root,
  body {
    background: #0f1112;
  }

  .about { overflow: clip; }

  .audience-columns { gap: 40px; }

  .audience-column {
    display: grid;
    grid-template-columns: clamp(80px, 26vw, 132px) minmax(0, 1fr);
    gap: 20px;
    align-items: center;
  }

  .audience-visual {
    width: clamp(150px, 43vw, 210px);
    height: clamp(140px, 40vw, 184px);
    margin: 0 0 0 calc(-1 * clamp(24px, 6vw, 96px) - 48px);
  }

  .audience-visual img {
    right: 0;
    bottom: 0;
    left: auto;
    height: calc(100% - 16px);
    translate: none;
    scale: 1;
  }

  .audience-column h3 {
    margin-bottom: 12px;
    font-size: clamp(32px, 8.5vw, 36px);
    line-height: 1.1;
  }

  .audience-column p {
    font-size: 18px;
    line-height: 1.55;
  }

  .manifesto-note > .manifesto-number { display: none; }
}

@media (max-width: 560px) {
  .standards-list { grid-template-columns: 1fr; }
  .standard-copy h3 { min-height: 0; }

  .care-content { padding-top: 42px; }
  .care-intro { position: static; }
  .care-intro .section-label { top: -42px; bottom: auto; }
}