/* ==========================================================================
   Kdai — visual system v2
   Direction locked to Aeline (Temlis). Full sampled spec in REFERENCE-AELINE.md.
   Non-negotiables:
     - Headings are weight 500. Never bold.
     - Tracking: -0.06em at 40px+, -0.04em at 20-24px, -0.02em at 14-16px.
     - Every label, eyebrow and button is Geist Mono, uppercase, +0.12em.
     - Lime #d6fd70 is a FILL, with black text on it. Cyan is heading pills only.
     - Blue arrives through photography and nothing else.
   ========================================================================== */

:root {
  /* Colour */
  --ink: #131313;
  --page: #ffffff;
  --surface: #f2f2f2;   /* cards sitting on the page */
  --card: #ffffff;      /* cards sitting on photography, stay white */
  --lime: #d6fd70;
  --lime-deep: #cdfb56;
  --cyan: #38c6f6;
  --charcoal: #2f2f2f;
  --grey: #6a6a6a;   /* darkened from the reference's #7b7b7b to clear 4.5:1 */
  --black: #000000;
  --frost: rgba(18, 40, 53, 0.25);
  --ink-50: rgba(19, 19, 19, 0.5);
  --white-80: rgba(255, 255, 255, 0.8);

  /* Type */
  --sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Radius */
  --r-surface: 24px;
  --r-pill: 48px;
  --r-inner: 12px;
  --r-badge: 8px;

  /* Layout */
  --container: 1408px;
  --edge: 24px;
  --section: clamp(96px, 10vw, 144px);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--lime); color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: var(--r-badge);
}

/* ------------------------------------------------------------------ type */

.display,
.h2,
.h3,
.stat {
  font-weight: 500;
  margin: 0;
  text-wrap: balance;
}

.display {
  font-size: clamp(36px, 4.7vw, 60px);
  line-height: 1.2;
  letter-spacing: -0.06em;
}

/* Two-clause display headings break on the full stop, not wherever balance decides.
   540px is measured, not guessed: it is the narrowest viewport where the longer clause
   still fits one line at 36px. Below it, forcing the break orphans "needs." on a line
   of its own, so there we hand it back to text-wrap: balance. */
.display--split .clause { display: inline; }
@media (min-width: 540px) {
  .display--split { text-wrap: normal; }
  .display--split .clause { display: block; }
}

.h2 {
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.17;
  letter-spacing: -0.06em;
}

.stat {
  font-size: clamp(32px, 2.9vw, 40px);
  line-height: 1.2;
  letter-spacing: -0.06em;
}

.h3 {
  font-size: 24px;
  line-height: 1.33;
  letter-spacing: -0.04em;
}

.sub {
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: -0.04em;
  font-weight: 400;
  margin: 0;
}

.body {
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: var(--charcoal);
  margin: 0;
  text-wrap: pretty;
}

.body-sm {
  font-size: 14px;
  line-height: 1.43;
  letter-spacing: -0.02em;
  margin: 0;
}

.micro {
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: -0.04em;
  font-weight: 500;
  margin: 0;
}

/* The label. Geist Mono, uppercase, +0.12em. Every eyebrow, nav link,
   button and plan name in the system uses this. */
.label {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0;
}

.label--muted { color: var(--grey); }
.label--dot::before { content: '\2022'; margin-right: 0.7em; }

/* ---------------------------------------------------------------- layout */

.shell {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--edge);
}

.section { padding-block: calc(var(--section) / 2); }

.section__head { max-width: 720px; margin-inline: auto; text-align: center; }
.section__head .h2 { margin-top: 16px; }
.section__head .body { margin-top: 16px; }
.section__head--left { margin-inline: 0; text-align: left; }

/* --------------------------------------------------------------- buttons */

.btn {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 0;
  border-radius: var(--r-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

/* The tall variants carry an inset circular arrow badge, hence the 4px right pad. */
.btn--lime,
.btn--ink { height: 48px; padding: 4px 4px 4px 16px; }

.btn--lime { background: var(--lime); color: var(--ink); }
.btn--lime:hover { background: var(--lime-deep); }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: #262626; }

.btn--frost {
  height: 48px;
  padding: 14px 16px;
  background: var(--frost);
  color: #fff;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.btn--frost:hover { background: rgba(18, 40, 53, 0.38); }

.btn--sm { height: 40px; padding: 10px 16px; }

.btn__badge {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  font-size: 13px;
  letter-spacing: 0;
}
.btn--lime .btn__badge { background: var(--ink); color: var(--lime); }
.btn--ink .btn__badge { background: var(--lime); color: var(--ink); }

/* ------------------------------------------------------------------- nav */

.nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  padding-block: 28px;
}

.nav__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}

.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand__mark { width: 26px; height: 16.5px; flex: none; }
.brand__word {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.06em;
  line-height: 1;
  color: #fff;
}

.nav__links { display: flex; justify-content: center; gap: 32px; }
.nav__links a { color: #fff; opacity: 0.86; transition: opacity 180ms ease; }
.nav__links a:hover { opacity: 1; }

.nav__end { display: flex; justify-content: flex-end; }

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

/* Aeline's hero is an inset rounded block, not a true full bleed. */
.hero {
  position: relative;
  margin: 0 var(--edge);
  border-radius: var(--r-surface);
  overflow: hidden;
  min-height: min(92svh, 940px);
  display: flex;
  align-items: center;
  background: #4aa3d8;
}

.hero__sky,
.hero__sky--video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: 168px 64px;
  text-align: center;
}

.hero__copy { max-width: 760px; margin-inline: auto; }
.hero .display { color: #fff; }
.hero__lead {
  margin: 20px auto 0;
  max-width: 540px;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: #fff;
}

.hero__actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
  flex-wrap: wrap;
}

/* --------------------------------------------------- hero card fan (six) */

.fan {
  --card-w: 168px;
  margin-top: 64px;
  cursor: grab;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 26px;
  perspective: 1500px;
  padding-bottom: 8px;
}

.fan__card {
  width: var(--card-w);
  min-height: 186px;
  flex: none;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-radius: var(--r-inner);
  padding: 13px;
  text-align: left;
  box-shadow: rgba(12, 40, 60, 0.18) 0 12px 28px -8px;
  transform-origin: 50% 100%;
  transition: transform 900ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Position, not source order. JS rotates these classes so the fan turns. */
.fan__card.p1 { order: 1; transform: rotateY(18deg)  rotate(-10deg) translateY(26px) scale(0.9);  z-index: 1; }
.fan__card.p2 { order: 2; transform: rotateY(11deg)  rotate(-6deg)  translateY(10px) scale(0.95); z-index: 2; }
.fan__card.p3 { order: 3; transform: rotateY(4deg)   rotate(-2deg)  translateY(0);                z-index: 3; }
.fan__card.p4 { order: 4; transform: rotateY(-4deg)  rotate(2deg)   translateY(0);                z-index: 3; }
.fan__card.p5 { order: 5; transform: rotateY(-11deg) rotate(6deg)   translateY(10px) scale(0.95); z-index: 2; }
.fan__card.p6 { order: 6; transform: rotateY(-18deg) rotate(10deg)  translateY(26px) scale(0.9);  z-index: 1; }

.fan__card.p3 { background: var(--lime); }
.fan__card.p3 .fan__no { color: rgba(19, 19, 19, 0.55); }
.fan__card.p3 .fan__meta { color: rgba(19, 19, 19, 0.62); }
.fan__card.p3 .fan__six i { background: rgba(19, 19, 19, 0.2); }

.fan__no {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--grey);
}


.fan__name {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.2;
  margin: 26px 0 0;
}
.fan__meta {
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--grey);
  margin: 4px 0 0;
}


/* the six-square motif from the logo, reused as a position indicator */
.fan__six { display: flex; gap: 3px; margin-top: auto; padding-top: 16px; }
.fan__six i {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: rgba(19, 19, 19, 0.14);
}
.fan__six i.on { background: var(--ink); }


/* ------------------------------------------------------------ proof line */

.proof {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: fit-content;
  margin: 44px auto 0;
  padding: 9px 18px 9px 15px;
  border-radius: var(--r-pill);
  background: var(--frost);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.02em;
  color: #fff;
}
.proof svg { width: 26px; height: 16.5px; flex: none; }

/* --------------------------------------------------------------- marquee */

.marquee {
  overflow: hidden;
  background: var(--surface);
  border-radius: var(--r-surface);
  margin: 16px var(--edge) 0;
  padding-block: 28px;
  position: relative;
}

.marquee__label { text-align: center; color: var(--grey); margin-bottom: 22px; }

.marquee__track {
  display: flex;
  width: max-content;
  padding-left: 64px;
  gap: 64px;
  animation: slide 46s linear infinite;
}

.marquee__item {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--grey);
  opacity: 0.82;
  white-space: nowrap;
}

@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.marquee::before,
.marquee::after {
  content: '';
  position: absolute;
  top: 68px;
  bottom: 0;
  width: 96px;
  z-index: 2;
  pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(to right, var(--surface), rgba(242, 242, 242, 0)); }
.marquee::after { right: 0; background: linear-gradient(to left, var(--surface), rgba(242, 242, 242, 0)); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee__track { animation: none; }
  .fan__card { transition: none; }
  .hero__sky--video { display: none; }
}

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

@media (max-width: 1100px) {
  .fan { --card-w: 140px; gap: 10px; }
  .nav__links { display: none; }
  .nav__inner { grid-template-columns: 1fr auto; }
}

@media (max-width: 820px) {
  :root { --edge: 16px; }
  .hero__inner { padding-block: 132px 44px; }
  .fan {
    overflow-x: auto;
    justify-content: flex-start;
    perspective: none;
    gap: 12px;
    padding: 4px 4px 18px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .fan { cursor: default; }
  .fan__card { scroll-snap-align: center; order: 0 !important; }
  .fan__card.p1, .fan__card.p2, .fan__card.p3,
  .fan__card.p4, .fan__card.p5, .fan__card.p6 { transform: none; z-index: auto; }
  .fan__card.p3 { background: #fff; }
  .fan__card.p3 .fan__no, .fan__card.p3 .fan__meta { color: var(--grey); }
  .fan__card--lime { background: var(--lime); }
  .fan__card--lime .fan__no { color: rgba(19, 19, 19, 0.55); }
  .fan__card--lime .fan__meta { color: rgba(19, 19, 19, 0.62); }
  .marquee__item { font-size: 17px; }
}

/* ==========================================================================
   Sections 4 to 11
   ========================================================================== */

/* ------------------------------------------------------------- 4. bento */

.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 16px;
  margin-top: 56px;
}

.bento__cell {
  border-radius: var(--r-surface);
  padding: 28px;
  display: flex;
  flex-direction: column;
  min-height: 168px;
}

.bento__cell--photo {
  grid-row: 1 / 3;
  background: #4aa3d8;
  color: #fff;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
  padding: 20px;
}
.bento__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bento__cell--photo > *:not(.bento__art) { position: relative; z-index: 2; }
.bento__cell--quote { grid-row: 1 / 3; background: #e8e8e8; }
.bento__cell--lime  { background: var(--lime); }
.bento__cell--ink   { background: var(--ink); color: #fff; flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; }

.bento__inner {
  background: #fff;
  color: var(--ink);
  border-radius: var(--r-inner);
  padding: 20px;
}
.bento__cell--photo .label { position: absolute; top: 20px; left: 20px; color: rgba(255,255,255,.85); }

.bento .stat { display: block; }
.bento__note { margin-top: 8px; font-size: 14px; line-height: 1.43; letter-spacing: -0.02em; color: var(--charcoal); }
.bento__cell--ink .bento__note { color: rgba(255,255,255,.72); margin: 0; }
.bento__cell--lime .label { color: rgba(19,19,19,.6); }
.bento__cell--lime .stat { margin-top: 10px; }
.bento__cell--lime .bento__note { color: rgba(19,19,19,.72); }

.bento__quote {
  margin-top: 18px;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.02em;
  font-weight: 500;
}
.bento__six { display: flex; gap: 5px; }
.bento__cell--quote .bento__six { margin-top: auto; }
.bento__six i { width: 12px; height: 12px; border-radius: 3px; background: rgba(19,19,19,.16); }
.bento__six i.on { background: var(--ink); }

/* ------------------------------------------------- 5. the six, framed grid */

.frame {
  border: 1px solid #e0e0e0;
  border-radius: var(--r-surface);
  background: #e0e0e0;
  overflow: hidden;
  margin-top: 56px;
}

.frame--3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; }
.frame--4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; }
.frame--2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; }

.cell { background: var(--surface); padding: 32px; }

.badge {
  width: 30px;
  height: 30px;
  border-radius: var(--r-badge);
  background: var(--lime);
  display: grid;
  place-items: center;
  flex: none;
}
.badge svg { width: 16px; height: 16px; }

.cell .h3 { margin-top: 28px; }
.cell .body { margin-top: 10px; font-size: 14px; line-height: 1.45; }

/* --------------------------------------------------------- 6. twenty-one */

.phases { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 56px; }

.phase {
  background: var(--surface);
  border-radius: var(--r-surface);
  padding: 32px;
}
.phase__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.phase .h3 { margin-top: 20px; }
.phase .body { margin-top: 10px; }

.log { margin-top: 24px; border-top: 1px solid #e0e0e0; }
.log__row {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid #e0e0e0;
}
.log__row:last-child { border-bottom: 0; }
.log__day {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey);
  padding-top: 1px;
}
.log__what { font-size: 14px; line-height: 1.45; letter-spacing: -0.02em; color: var(--charcoal); }

/* -------------------------------------------------------------- 7. ladder */

.rung { background: var(--surface); padding: 28px; display: flex; flex-direction: column; }
.rung__head { display: flex; align-items: center; gap: 12px; }
.rung__name { font-family: var(--mono); font-size: 14px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }
.rung .body { margin-top: 20px; font-size: 14px; line-height: 1.45; min-height: 64px; }
.rung__price { display: flex; align-items: baseline; gap: 6px; margin-top: 24px; }
.rung__price .stat { font-size: 40px; }
.rung__per { font-size: 14px; letter-spacing: -0.02em; color: var(--grey); }
.rung__list { list-style: none; margin: 24px 0 28px; padding: 0; display: grid; gap: 11px; }
.rung__list li { display: flex; gap: 10px; font-size: 14px; line-height: 1.4; letter-spacing: -0.02em; color: var(--charcoal); }
.rung__tick {
  width: 16px; height: 16px; border-radius: 50%; flex: none; margin-top: 2px;
  background: var(--lime); display: grid; place-items: center;
}
.rung__tick svg { width: 9px; height: 9px; }
.rung .btn { margin-top: auto; justify-content: center; width: 100%; }

/* ---------------------------------------------------------- 8. comparison */

.compare {
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-surface);
  padding: clamp(32px, 4.4vw, 64px);
}
.compare .h2 { color: #fff; max-width: 22ch; }
.compare__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 48px; }
.compare__item { padding-top: 20px; border-top: 1px solid rgba(255,255,255,.28); }
.compare__figure {
  display: block;
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.06em;
  margin-bottom: 10px;
}
.compare__what { font-size: 14px; line-height: 1.45; letter-spacing: -0.02em; color: rgba(255,255,255,.76); }
.compare__item--ours { border-top-color: var(--lime); }
.compare__item--ours .compare__figure { color: var(--lime); }
.compare__foot { margin-top: 44px; font-size: 14px; line-height: 1.5; letter-spacing: -0.02em; color: rgba(255,255,255,.62); max-width: 76ch; }

/* ------------------------------------------------------------- 10. close */

.close {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-surface);
  margin-inline: var(--edge);
  min-height: 440px;
  display: flex;
  align-items: center;
  background: #4aa3d8;
}
.close__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.close::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg, rgba(9, 32, 48, 0.68) 0%, rgba(9, 32, 48, 0.42) 46%, rgba(9, 32, 48, 0) 78%);
}
.close__art + * { position: relative; z-index: 2; }
.close__inner { position: relative; z-index: 2; width: 100%; padding: clamp(32px, 4.4vw, 64px); max-width: 720px; }
.close .h2 { color: #fff; margin-top: 18px; }
.close__body { margin-top: 16px; font-size: 16px; line-height: 1.5; letter-spacing: -0.02em; color: rgba(255,255,255,.86); max-width: 52ch; }
.close__actions { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }
.close__stamp { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-size: 14px; letter-spacing: -0.02em; }
.close__stamp svg { width: 26px; height: 16.5px; }

/* ------------------------------------------------------------- 11. footer */

.footer {
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-surface);
  margin: 16px var(--edge) var(--edge);
  padding: clamp(32px, 3.6vw, 48px);
}
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.footer__tag { margin-top: 18px; font-size: 14px; line-height: 1.5; letter-spacing: -0.02em; color: rgba(255,255,255,.66); max-width: 34ch; }
.footer .footer__h { font-family: var(--mono); font-size: 14px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,.58); margin: 0 0 18px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.footer a { font-size: 16px; letter-spacing: -0.02em; color: rgba(255,255,255,.84); }
.footer a:hover { color: #fff; }

.signup { margin-top: 48px; max-width: 440px; }
.signup__row { display: flex; gap: 8px; margin-top: 14px; background: rgba(255,255,255,.1); border-radius: var(--r-pill); padding: 5px 5px 5px 18px; }
.signup input {
  flex: 1; min-width: 0; border: 0; background: none; color: #fff;
  font-family: var(--sans); font-size: 15px; letter-spacing: -0.02em;
}
.signup input::placeholder { color: rgba(255,255,255,.6); }
.signup input:focus { outline: none; }

.footer__base {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 14px; letter-spacing: -0.02em; color: rgba(255,255,255,.6);
}

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

@media (max-width: 1100px) {
  .frame--3, .frame--4 { grid-template-columns: repeat(2, 1fr); }
  .compare__grid { grid-template-columns: repeat(2, 1fr); }
  .footer__top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
  .bento { grid-template-columns: 1fr; }
  .bento__cell--photo, .bento__cell--quote { grid-row: auto; }
  .phases { grid-template-columns: 1fr; }
  .frame--2 { grid-template-columns: 1fr; }
  .cell, .rung { padding: 24px; }
}

@media (max-width: 620px) {
  .frame--3, .frame--4 { grid-template-columns: 1fr; }
  .compare__grid { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; gap: 32px; }
  .log__row { grid-template-columns: 62px 1fr; gap: 12px; }
}

/* ==========================================================================
   Multi-page architecture: light nav, page heads, prose, blog
   ========================================================================== */

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

/* --------------------------------------------------------- nav, light variant */

.nav--light { position: static; padding-block: 24px; }
.nav--light .brand__word,
.nav--light .nav__links a { color: var(--ink); }
.nav--light .brand__mark { color: var(--ink); }
.nav__links a[aria-current="page"] { opacity: 1; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 5px; }

.nav__end { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }

.nav__burger {
  display: none;
  width: 40px; height: 40px; flex: none;
  border: 0; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  cursor: pointer;
  padding: 0;
}
.nav__burger span { display: block; width: 16px; height: 1.6px; margin: 3px auto;
  background: #fff; transition: transform 200ms ease; }
.nav--light .nav__burger { background: var(--surface); }
.nav--light .nav__burger span { background: var(--ink); }
body.nav-open .nav__burger span:first-child { transform: translateY(2.3px) rotate(45deg); }
body.nav-open .nav__burger span:last-child { transform: translateY(-2.3px) rotate(-45deg); }

/* ---------------------------------------------------------------- page head */

.pagehead { background: var(--page); }
/* the page head already ends in whitespace, so the section under it starts tight */
.pagehead + main.section { padding-top: clamp(8px, 1.6vw, 26px); }
.pagehead__inner { padding-block: clamp(32px, 5vw, 72px) clamp(28px, 4vw, 56px); max-width: 900px; }

.h1 {
  font-size: clamp(32px, 4.1vw, 52px);
  line-height: 1.14;
  letter-spacing: -0.06em;
  font-weight: 500;
  margin: 14px 0 0;
  text-wrap: balance;
}
.pagehead__lede { margin-top: 20px; color: var(--charcoal); max-width: 62ch; }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  color: var(--grey); margin-bottom: 22px; }
.crumbs a { color: var(--grey); }
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current] { color: var(--ink); }
.crumbs__sep { opacity: 0.45; }

/* ------------------------------------------------------------------- prose */

.prose { max-width: 76ch; }
.prose > * + * { margin-top: 20px; }
.prose h2 {
  font-size: clamp(24px, 2.4vw, 30px); line-height: 1.25; letter-spacing: -0.04em;
  font-weight: 500; margin: 52px 0 0; text-wrap: balance;
}
.prose h3 {
  font-size: 20px; line-height: 1.3; letter-spacing: -0.04em; font-weight: 500;
  margin: 36px 0 0;
}
.prose p, .prose li { font-size: 17px; line-height: 1.62; letter-spacing: -0.02em;
  color: var(--charcoal); }
.prose ul, .prose ol { padding-left: 22px; }
.prose li + li { margin-top: 10px; }
.prose strong { font-weight: 600; color: var(--ink); }
.prose a { color: var(--ink); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: var(--fog, #b9b9b9); transition: text-decoration-color 160ms ease; }
.prose a:hover { text-decoration-color: var(--ink); }
.prose hr { border: 0; border-top: 1px solid #e0e0e0; margin: 44px 0; }
.prose blockquote { margin: 32px 0; padding: 20px 24px; background: var(--surface);
  border-radius: var(--r-inner); }
.prose blockquote p { margin: 0; }

.prose table { width: 100%; border-collapse: collapse; margin-top: 28px;
  display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; padding: 13px 16px 13px 0;
  border-bottom: 1px solid #e0e0e0; font-size: 15px; letter-spacing: -0.02em; }
.prose th { font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey);
  border-bottom-color: var(--ink); }
.prose td:last-child, .prose th:last-child { padding-right: 0; }

.prose--article > h2:first-child { margin-top: 0; }
.article__meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--grey); margin: 0 0 36px;
  padding-bottom: 22px; border-bottom: 1px solid #e0e0e0; }
.article__cat { color: var(--ink); }

/* --------------------------------------------------------------------- faq */

.faq-block { padding-top: 0; }
.faq { margin-top: 32px; border-top: 1px solid #e0e0e0; max-width: 900px; }
.faq__row { padding: 24px 0; border-bottom: 1px solid #e0e0e0; display: grid;
  grid-template-columns: 1fr 1.4fr; gap: 32px; }
.faq__q { font-size: 19px; line-height: 1.3; letter-spacing: -0.04em; font-weight: 500;
  margin: 0; }
.faq__a p { font-size: 16px; line-height: 1.55; letter-spacing: -0.02em;
  color: var(--charcoal); margin: 0; }

/* -------------------------------------------------------------------- blog */

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
.chip {
  font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 9px 15px; border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink);
  transition: background-color 160ms ease;
}
.chip:hover { background: #e8e8e8; }
.chip--all { background: var(--ink); color: #fff; }
.chip--all:hover { background: #262626; }

.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.post-card { background: var(--surface); border-radius: var(--r-surface);
  transition: background-color 200ms ease; }
.post-card:hover { background: #e9e9e9; }
.post-card__link { display: flex; flex-direction: column; height: 100%; padding: 28px; }
.post-card__title { font-size: 22px; line-height: 1.25; letter-spacing: -0.04em;
  font-weight: 500; margin: 18px 0 0; text-wrap: balance; }
.post-card__sum { font-size: 15px; line-height: 1.5; letter-spacing: -0.02em;
  color: var(--charcoal); margin: 12px 0 0; }
.post-card__meta { font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey);
  margin-top: auto; padding-top: 28px; }

.next-post { display: flex; flex-direction: column; gap: 10px; max-width: 76ch;
  margin-top: 56px; padding: 28px; border-radius: var(--r-surface);
  background: var(--surface); transition: background-color 200ms ease; }
.next-post:hover { background: #e9e9e9; }
.next-post__title { font-size: 22px; line-height: 1.25; letter-spacing: -0.04em;
  font-weight: 500; }

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

.brand--footer .brand__word { color: #fff; }
.brand--footer .brand__mark { color: #fff; }
.footer__say { margin-top: 10px; font-family: var(--mono); font-size: 12px;
  font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.56); }
.footer__base a { color: rgba(255, 255, 255, 0.66); }
.footer__base a:hover { color: #fff; }

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

@media (max-width: 1100px) {
  .posts { grid-template-columns: repeat(2, 1fr); }
  .faq__row { grid-template-columns: 1fr; gap: 12px; }
}

@media (max-width: 900px) {
  .nav__burger { display: block; }
  .nav__inner { grid-template-columns: 1fr auto; }
  .nav__links {
    display: none;
    grid-column: 1 / -1;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-top: 18px;
    padding: 18px 20px;
    border-radius: var(--r-surface);
    background: var(--surface);
  }
  body.nav-open .nav__links { display: flex; }
  .nav--light .nav__links a { color: var(--ink); }
  .nav .nav__links a { color: var(--ink); padding-block: 8px; }
}

@media (max-width: 620px) {
  .posts { grid-template-columns: 1fr; }
  .prose p, .prose li { font-size: 16px; }
}

/* ==========================================================================
   Panel system
   Borrowed, role-bounded, from Deta Surf (Refero 465762b1): a sky canvas with
   white cards floating on it, and its hard rule that a text-heavy container is
   never transparent. Framing rhythm from Flecto (a4da778b). Aeline stays primary:
   radius stays 24px, lime stays the only accent, blue only ever arrives as
   photography.
   ========================================================================== */

/* ------------------------------------------------- inner page sky panel */

.pagehero {
  position: relative;
  margin: 0 var(--edge);
  border-radius: var(--r-surface);
  overflow: hidden;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  background: #4aa3d8;
}

.pagehero__sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
}

/* the copy sits low on the panel, so it lands over cloud rather than open sky */
.pagehero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(8, 30, 46, 0.62) 0%,
    rgba(8, 30, 46, 0.34) 38%,
    rgba(8, 30, 46, 0.04) 72%
  );
}

.pagehero .nav { z-index: 3; }

.pagehero__inner {
  position: relative;
  z-index: 2;
  padding-block: 120px 44px;
  max-width: 900px;
}

.pagehero__inner .h1 { color: #fff; }
.pagehero__eyebrow { color: rgba(255, 255, 255, 0.78); }
.pagehero__lede { margin-top: 18px; color: rgba(255, 255, 255, 0.9); max-width: 60ch; }
.pagehero__actions { margin-top: 28px; }

.pagehero .crumbs { color: rgba(255, 255, 255, 0.7); }
.pagehero .crumbs a { color: rgba(255, 255, 255, 0.7); }
.pagehero .crumbs a:hover { color: #fff; }
.pagehero .crumbs [aria-current] { color: #fff; }

/* --------------------------------------------------------- tinted bands */

/* A band is a full-width tone that holds panels, so content never sits on the
   bare page. The page white only ever shows as the gutter between bands. */
.band {
  background: var(--surface);
  margin: 16px var(--edge) 0;
  border-radius: var(--r-surface);
  padding-block: clamp(32px, 4vw, 56px);
}
.band--tight { padding-block: clamp(24px, 3vw, 40px); }

/* A panel is a white card inside a band. Text always lands on one of these. */
.panel {
  background: var(--card);
  border-radius: var(--r-surface);
  padding: clamp(28px, 3.4vw, 48px);
}
.panel--wide { max-width: none; }

/* home sections that would otherwise leave their header floating */
.section--block { padding-block: 8px; }
.section--block > .shell {
  background: var(--surface);
  border-radius: var(--r-surface);
  padding-block: clamp(40px, 5vw, 72px);
}
.section--block .section__head { max-width: 720px; }
.section--block .bento,
.section--block .frame,
.section--block .phases,
.section--block .ladder { margin-top: clamp(32px, 4vw, 48px); }

/* --------------------------------------------------- two column content */

.layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.layout__main { min-width: 0; }
.layout__main .prose { max-width: 68ch; }

.rail { position: sticky; top: 24px; display: grid; gap: 12px; }

.rail__block {
  background: var(--card);
  border-radius: var(--r-surface);
  padding: 24px;
}
.rail__h {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey);
  margin: 0 0 16px;
}
.rail__toc { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px;
  counter-reset: toc; }
.rail__toc li { counter-increment: toc; }
.rail__toc a {
  display: flex; gap: 10px;
  font-size: 14px; line-height: 1.4; letter-spacing: -0.02em; color: var(--charcoal);
}
.rail__toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--mono); font-size: 11px; color: var(--fog, #b4b4b4); flex: none;
  padding-top: 1px;
}
.rail__toc--plain { counter-reset: none; }
.rail__toc--plain a::before { content: none; }
.rail__toc a:hover { color: var(--ink); }

.rail__block--cta { background: var(--ink); }
.rail__block--cta .rail__h { color: rgba(255, 255, 255, 0.5); }
.rail__note { font-size: 14px; line-height: 1.45; letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.76); margin: 0 0 20px; }

/* ----------------------------------------------------------- prev / next */

.pager { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 16px; }
.pager__card {
  background: var(--card);
  border-radius: var(--r-surface);
  padding: 24px 28px;
  display: grid;
  gap: 8px;
  transition: background-color 200ms ease;
}
.pager__card:hover { background: #fafafa; }
.pager__card:only-child { grid-column: 2; }
.pager__title { font-size: 20px; line-height: 1.25; letter-spacing: -0.04em; font-weight: 500; }

/* ------------------------------------------------------------------- faq */

.faq-block { padding-top: clamp(28px, 3.4vw, 48px); }
.faq__title { margin-bottom: 8px; }
.faq { border-top: 1px solid #e6e6e6; max-width: none; }
.faq__row { border-bottom-color: #e6e6e6; }

/* blog and next-post cards live on a band now, so they invert to white */
.band .post-card,
.band .next-post { background: var(--card); }
.band .post-card:hover,
.band .next-post:hover { background: #fafafa; }
.band .chip { background: var(--card); }
.band .chip:hover { background: #fafafa; }
.band .chip--all { background: var(--ink); color: #fff; }

/* ------------------------------------------------- fixes found in review */

/* the closing band's scrim ran left to right, so at narrow widths the body copy
   sat over bright cloud. Now it holds at every width. */
.close::after {
  background:
    linear-gradient(100deg, rgba(9, 32, 48, 0.72) 0%, rgba(9, 32, 48, 0.4) 52%, rgba(9, 32, 48, 0) 86%),
    linear-gradient(to bottom, rgba(9, 32, 48, 0.28) 0%, rgba(9, 32, 48, 0) 55%);
}
/* the frosted button was too faint on cloud */
.btn--frost { background: rgba(12, 32, 46, 0.42); }
.btn--frost:hover { background: rgba(12, 32, 46, 0.58); }

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

@media (max-width: 1100px) {
  .layout { grid-template-columns: 1fr; }
  .rail { position: static; grid-template-columns: repeat(2, 1fr); }
  .layout__main .prose { max-width: 74ch; }
}

@media (max-width: 820px) {
  .pagehero { min-height: 300px; }
  .pagehero__inner { padding-block: 92px 28px; }
  /* the CTA is repeated in the closing band and the rail, so the page header
     does not need it on a small screen where height is expensive */
  .pagehero__actions { display: none; }
  .pagehero__lede { margin-top: 14px; }
  .rail { grid-template-columns: 1fr; }
  .pager { grid-template-columns: 1fr; }
  .pager__card:only-child { grid-column: 1; }
}

/* Cards sitting inside a tinted block invert to white, or they disappear into it.
   Same rule as the post cards on a band. */
.section--block .cell,
.section--block .phase,
.section--block .rung,
.section--block .bento__cell--quote { background: var(--card); }
.section--block .frame { background: #e2e2e2; border-color: #e2e2e2; }
.section--block .log,
.section--block .log__row { border-color: #e6e6e6; }
.section--block .rung__list li,
.section--block .cell .body { color: var(--charcoal); }

/* ==========================================================================
   Blog covers and cited sources
   ========================================================================== */

.post-card--cover .post-card__link { padding: 0; }
.post-card__cover {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-surface) var(--r-surface) 0 0;
  background: #cfe3f2;
}
.post-card__cover img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.post-card:hover .post-card__cover img { transform: scale(1.045); }
.post-card__body { display: flex; flex-direction: column; flex: 1; padding: 26px 28px 28px; }

/* ------------------------------------------------------------- sources */

.sources {
  margin-top: 56px;
  padding: 28px;
  border-radius: var(--r-surface);
  background: var(--surface);
}
.sources__h {
  font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--grey); margin: 0 0 20px;
}
.sources__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.sources__item { display: grid; gap: 5px; }
.sources__link {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-size: 17px; line-height: 1.35; letter-spacing: -0.03em; font-weight: 500;
  color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: #c9c9c9;
  transition: text-decoration-color 160ms ease;
}
.sources__link:hover { text-decoration-color: var(--ink); }
.sources__ext { font-size: 12px; flex: none; }
.sources__pub {
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink);
}
.sources__note { font-size: 14px; line-height: 1.45; letter-spacing: -0.02em; color: var(--grey); }
.sources__foot {
  margin: 22px 0 0; padding-top: 18px; border-top: 1px solid #e0e0e0;
  font-size: 13px; line-height: 1.45; letter-spacing: -0.02em; color: var(--grey);
}

/* a post's own cover carries its page header, so the scrim works harder */
.page--inner .pagehero::after {
  background:
    linear-gradient(to top, rgba(8, 26, 40, 0.74) 0%, rgba(8, 26, 40, 0.42) 40%, rgba(8, 26, 40, 0.08) 74%),
    linear-gradient(to bottom, rgba(8, 26, 40, 0.34) 0%, rgba(8, 26, 40, 0) 42%);
}

/* ==========================================================================
   Mobile hero deck: a stacked deck that rotates
   Below 1100px there is no room to fan six cards, so they stack. The front card
   is full size, three peek behind it, and the deck cycles so all six surface.
   ========================================================================== */

@media (max-width: 1099px) {
  .fan {
    position: relative;
    display: block;
    width: 100%;
    height: 274px;
    margin: 48px 0 0;
    padding: 0;
    gap: 0;
    overflow: visible;
    perspective: none;
    cursor: grab;
    touch-action: pan-y;
  }

  .fan__card {
    position: absolute;
    left: 50%;
    top: 0;
    width: min(320px, calc(100vw - 72px));
    min-height: 196px;
    margin: 0;
    transform-origin: 50% 0;
    transition: transform 620ms cubic-bezier(0.32, 0.72, 0, 1),
                opacity 620ms cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform, opacity;
  }

  /* stack positions, front to back */
  .fan__card.s1 { transform: translateX(-50%) translateY(0) scale(1);      z-index: 60; opacity: 1; }
  .fan__card.s2 { transform: translateX(-50%) translateY(24px) scale(0.93);  z-index: 50; opacity: 0.96; }
  .fan__card.s3 { transform: translateX(-50%) translateY(44px) scale(0.865); z-index: 40; opacity: 0.78; }
  .fan__card.s4 { transform: translateX(-50%) translateY(60px) scale(0.81);  z-index: 30; opacity: 0.4; }
  .fan__card.s5,
  .fan__card.s6 { transform: translateX(-50%) translateY(68px) scale(0.79);  z-index: 20; opacity: 0; }

  /* the accent follows the front of the deck */
  .fan__card.s1 { background: var(--lime); }
  .fan__card.s1 .fan__no,
  .fan__card.s1 .fan__meta { color: rgba(19, 19, 19, 0.6); }
  .fan__card.s1 .fan__six i { background: rgba(19, 19, 19, 0.2); }
  .fan__card:not(.s1) { background: var(--card); }
  .fan__card:not(.s1) .fan__no,
  .fan__card:not(.s1) .fan__meta { color: var(--grey); }

  .fan__name { font-size: 17px; margin-top: 28px; }
  .fan__meta { font-size: 12px; }

  /* dots, so it is obvious there are six and where you are */
  .deck-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 22px;
  }
  .deck-dots button {
    width: 8px; height: 8px; padding: 0;
    border: 0; border-radius: 2px;
    background: rgba(255, 255, 255, 0.42);
    cursor: pointer;
    transition: background-color 240ms ease, width 240ms ease;
  }
  .deck-dots button[aria-current="true"] { background: var(--lime); width: 20px; }
}

@media (min-width: 1100px) {
  .deck-dots { display: none; }
}

@media (max-width: 560px) {
  .fan { height: 268px; }
  .fan__card { width: calc(100vw - 64px); }
}

@media (prefers-reduced-motion: reduce) {
  .fan__card { transition: none !important; }
}

/* The brand lockup was a 24px tall tap target. Touch needs 44px, so pad it out
   without moving it visually. */
@media (max-width: 900px) {
  .brand { min-height: 44px; align-items: center; }
  .nav__burger { width: 44px; height: 44px; }
  /* the visible bar stays small, the tap area is 40px */
  .deck-dots button { height: 40px; padding: 16px 0; background-clip: content-box; }
  .deck-dots { margin-top: 8px; }
  .chip { padding: 12px 16px; }
}

/* ==========================================================================
   The page sits on cloud, not on white
   A fixed layer behind everything, so the gutters between panels show sky
   instead of paper. Panels stay opaque so text never lands on the photograph.
   ========================================================================== */

.site-backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--page) url('/assets/img/backdrop.jpg') center center / cover no-repeat;
  pointer-events: none;
}

/* a touch of white over the photograph keeps it a texture rather than a picture */
.site-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.34);
}

body { background: transparent; }

/* the gutters need to be wide enough for the backdrop to register */
.band { margin-top: 20px; }
.footer { margin-top: 20px; }
.marquee { margin-top: 20px; }
.close { margin-top: 20px; }
.section--block { padding-block: 10px; }

/* Sections that were transparent so the white page showed through now need to
   be explicitly opaque, or the backdrop shows behind live text. */
.pagehero,
.hero { background-color: #4aa3d8; }
.marquee,
.band,
.section--block > .shell { background-color: var(--surface); }
.panel,
.rail__block,
.pager__card,
.post-card,
.next-post,
.cell,
.phase,
.rung,
.frame { background-color: var(--card); }
.rail__block--cta,
.footer,
.compare,
.bento__cell--ink { background-color: var(--ink); }

/* The shell is only a width container, never a surface. It must NOT list
   .compare here: the shorthand wiped its ink background and left white text on
   the cloud backdrop. */
.section:not(.section--block) > .shell { background: transparent; }

/* The backdrop matters most on mobile, which is where the bare white showed.
   A fixed layer is only ever viewport-sized, so it stays on every breakpoint. */

/* --------------------------------------------------------------------------
   Cloud as the canvas, cards floating on it
   The bands were opaque, so the backdrop only showed in the gutters. They are
   now spacing containers, and the cloud is the page. Cards get a soft lift so
   they separate from the photograph. That shadow is a deliberate borrow from
   Deta Surf, which uses exactly this to lift white cards off a sky canvas;
   Aeline's own no-shadow rule assumed a flat page colour.
   -------------------------------------------------------------------------- */

.site-backdrop::after { background: rgba(255, 255, 255, 0.12); }

.band,
.section--block > .shell,
.marquee { background-color: transparent; }

.marquee::before,
.marquee::after { display: none; }

/* everything that holds content lifts off the cloud */
.panel,
.rail__block,
.pager__card,
.post-card,
.next-post,
.frame,
.sources,
.phase,
.bento__cell,
.rung {
  box-shadow: rgba(12, 40, 60, 0.07) 0 2px 6px 0, rgba(12, 40, 60, 0.10) 0 14px 30px -14px;
}
.frame { border-color: transparent; }
.rail__block--cta,
.footer,
.compare { box-shadow: rgba(9, 26, 40, 0.18) 0 14px 34px -14px; }

/* the marquee becomes a floating card of its own */
.marquee {
  background-color: var(--card);
  box-shadow: rgba(12, 40, 60, 0.07) 0 2px 6px 0, rgba(12, 40, 60, 0.10) 0 14px 30px -14px;
}

/* headings that now sit on the cloud rather than a tinted panel */
.section--block > .shell { padding-block: clamp(28px, 3.4vw, 44px); }
.section__head .body { color: var(--charcoal); }

/* the framed grids read better as separate cards on cloud than as one slab */
.frame--3, .frame--4, .frame--2 { gap: 12px; background: transparent; }
.frame { overflow: visible; border: 0; }
.cell, .rung { border-radius: var(--r-surface); }
.cell {
  box-shadow: rgba(12, 40, 60, 0.07) 0 2px 6px 0, rgba(12, 40, 60, 0.10) 0 14px 30px -14px;
}

/* ==========================================================================
   Legibility over photography
   Measured against the real rendered pixels, white text on the bright sky was
   failing badly: hero headline 1.75:1, nav 1.9:1, breadcrumbs 2.5:1. A flat
   scrim strong enough to fix that would kill the sky, so the darkening is
   banded: heavier where the text actually sits, bright everywhere else.
   ========================================================================== */

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Khoder wants the sky bright, so this is the lightest touch that still helps:
     a wide soft ellipse behind the copy and a narrow vignette under the nav.
     The heavy scrim that passed WCAG outright is in git history if we ever want it. */
  background:
    radial-gradient(86% 50% at 50% 32%,
      rgba(6, 22, 36, 0.34) 0%, rgba(6, 22, 36, 0.26) 46%,
      rgba(6, 22, 36, 0.10) 76%, rgba(6, 22, 36, 0) 100%),
    linear-gradient(to bottom,
      rgba(6, 22, 36, 0.40) 0px, rgba(6, 22, 36, 0.20) 88px, rgba(6, 22, 36, 0) 150px);
}

/* The sky stays bright, so the text carries its own separation. A shadow does
   not count toward a WCAG ratio but it makes a real difference on a bright
   screen, which is what actually matters here. */
.hero .display,
.hero__lead,
.hero .nav__links a,
.hero .brand__word,
.proof {
  text-shadow: 0 1px 2px rgba(6, 22, 36, 0.42), 0 2px 14px rgba(6, 22, 36, 0.28);
}

.pagehero::after,
.page--inner .pagehero::after {
  background:
    linear-gradient(to bottom, rgba(6, 22, 36, 0.62) 0px, rgba(6, 22, 36, 0.36) 110px,
                                rgba(6, 22, 36, 0.30) 190px),
    linear-gradient(to top, rgba(6, 22, 36, 0.78) 0%, rgba(6, 22, 36, 0.52) 46%,
                             rgba(6, 22, 36, 0.28) 78%, rgba(6, 22, 36, 0.2) 100%);
}

/* the frosted button measured 4.23:1, just under */
.btn--frost { background: rgba(9, 26, 40, 0.56); }
.btn--frost:hover { background: rgba(9, 26, 40, 0.7); }

/* The proof pill uses the same --frost token and was missed in that pass. At 0.25
   alpha it composites to ~rgb(196,201,205) over a bright cloud, putting white text
   near 1.7:1. 0.62 measures ~5:1 against pure white, the worst case behind it. */
.proof { background: rgba(9, 26, 40, 0.62); }

/* the label on the bento photo card measured 3.73:1 */
.bento__cell--photo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(6, 22, 36, 0.55) 0%, rgba(6, 22, 36, 0.1) 34%,
                                          rgba(6, 22, 36, 0) 60%);
}

/* Nav links were 20px tall, under WCAG 2.2's 24px minimum target size.
   Padding rather than font size, so nothing moves visually. */
.nav__links a { padding-block: 5px; }

/* ==========================================================================
   The six, punctuated
   One lime and one ink in six, mirroring the mark (five ink squares, one lime).
   The lime marks where to start, the ink marks where it ends, so the row reads
   as a sequence rather than six equal tiles. Studied in
   reference/card-colours.html; colouring all six was rejected because the
   palette holds four surface tones, not six, and colour stops meaning anything.
   ========================================================================== */

/* the glyphs follow the badge's text colour now */
.badge { color: var(--ink); }

/* first: start here */
.frame--3 .cell:first-child { background: var(--lime); }
.frame--3 .cell:first-child .badge { background: var(--ink); color: var(--lime); }
.frame--3 .cell:first-child .h3 { color: var(--ink); }
.frame--3 .cell:first-child .body { color: rgba(19, 19, 19, 0.72); }

/* last: and it ends here */
.frame--3 .cell:last-child { background: var(--ink); }
.frame--3 .cell:last-child .badge { background: var(--lime); color: var(--ink); }
.frame--3 .cell:last-child .h3 { color: #fff; }
.frame--3 .cell:last-child .body { color: rgba(255, 255, 255, 0.78); }

/* these two are already coloured, so they do not also need to be lifted */
.frame--3 .cell:first-child,
.frame--3 .cell:last-child {
  box-shadow: rgba(12, 40, 60, 0.10) 0 2px 6px 0, rgba(12, 40, 60, 0.16) 0 14px 30px -14px;
}