/* =========================================================================
   Ludic Advisory — Future Of… Blueprint Design (/future-of)

   Loaded by that page alone, through `PAGE["stylesheets"]`. Every rule is
   scoped to a `fo-` class, so nothing here can reach another page even if
   this file were loaded everywhere.

   THE BROCHURE'S PALETTE, WHICH IS ALREADY THE SITE'S. Its spreads are Deep
   Blue beside orange artwork, its process page turquoise, its back cover lime
   — the bands `deep-blue`, `turquoise` and `lime` in foundation.css. The one
   colour this file adds is Orange from the 2026 brand kit's secondary
   palette (#F55D08), and it is NEVER TEXT: it marks progress, meters and the
   "picked for you" chip, where it sits behind black ink.

   NO UNDERLINES AS DECORATION AND NO DROP SHADOWS, since 14 October 2026 —
   Pasha's call, to bring the page into the Ludic brand language the rest of
   the site speaks: flat panels, solid rules, SemiBold (600) headings. Edges
   that a shadow used to draw are a 1px `--line` border, which is what the
   site's own cards use. Links in running copy keep their underline, as they
   do on every other page.

   THE PREVIEW IS A PICTURE OF A DOCUMENT, not page furniture. Inside
   `.fo-preview` the type is set the way a designed blueprint would be —
   heavier, tighter, and in the visitor's chosen colour — which is the point
   of the step. It is `aria-hidden`; the controls beside it carry the state.

   Same ladder as the rest of the site: 36 / 48 / 64 / 80rem.
   ========================================================================= */

:root {
  --fo-orange: #f55d08;          /* brand kit Orange; black on it, checks.py::PAIRS */
  --fo-orange-soft: #fde3d3;
  --fo-paper: #ffffff;
  --fo-sticky: calc(var(--header-h) + 4.75rem);
}

/* ---------- hero: the cover -------------------------------------------- */
.hero--fo { background: var(--white); overflow: hidden; }

.fo-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
  padding-block: var(--space-lg) var(--space-xl);
}
@media (min-width: 64rem) {
  .fo-hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-xl);
    padding-block: var(--space-xl);
  }
}

.fo-hero__title {
  font-size: clamp(2.25rem, 4.4vw, 3.75rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
/* The brochure's ellipsis is the offer: a blank waiting for a subject. Kept
   on one line; it carried an orange underline until 14 October. */
.fo-hero__mark { white-space: nowrap; }
.fo-hero__lede {
  margin-top: var(--space-sm);
  max-width: 34rem;
  font-size: var(--text-md);
  line-height: 1.55;
}

ul.fo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--space-sm);
}
.fo-chip {
  padding: 0.3rem 0.7rem;
  border: 2px solid var(--black);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fo-hero__art {
  position: relative;
  min-height: 22rem;
}
@media (min-width: 64rem) { .fo-hero__art { min-height: 34rem; } }
.fo-hero__art picture,
.fo-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- the document mock, shared by the hero and the preview ------- */
.fo-doc {
  position: relative;
  aspect-ratio: 1 / 1.414;
  overflow: hidden;
  background: var(--fo-paper);
  color: var(--black);
  padding: 9% 9% 0;
  display: flex;
  flex-direction: column;
  container-type: inline-size;
}
.fo-doc__kicker {
  font-size: max(0.5rem, 5cqi);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-bottom: 4cqi;
  margin-bottom: 6cqi;
  border-bottom: 0.9cqi solid var(--black);
}
.fo-doc__pre { font-size: 7.5cqi; font-weight: 500; line-height: 1.1; }
.fo-doc__subject {
  font-size: 15cqi;
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
}
.fo-doc__line { margin-top: 4cqi; font-size: 5.2cqi; line-height: 1.35; }

.fo-doc--hero {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(19rem, 64%);
  transform: translate(-50%, -50%);
}
.fo-doc--hero .fo-doc__subject { transition: opacity 300ms var(--ease); }
.fo-doc--hero .fo-doc__subject.is-out { opacity: 0; }

/* ---------- introduction and the three reasons ------------------------- */
.fo-why { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
@media (min-width: 64rem) {
  .fo-why { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: stretch; }
}
.fo-why__lede { margin-top: var(--space-sm); font-size: var(--text-md); line-height: 1.6; max-width: 40rem; }
.fo-why__art { min-height: 14rem; }
.fo-why__art picture,
.fo-why__art img { width: 100%; height: 100%; object-fit: cover; }

/* The light panel the brochure lays across both halves of the spread. Ink is
   re-pointed inside it, because the band around it is white-on-blue. */
ol.fo-powers {
  --ink: var(--black);
  --ink-muted: var(--dark-grey);
  display: grid;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  padding: var(--space-md);
  background: var(--cream);
  color: var(--black);
}
@media (min-width: 64rem) {
  ol.fo-powers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    padding: var(--space-lg) var(--space-md);
  }
  /* SUBGRID, so the three figures sit on one line whatever the length of the
     paragraph above each: every column shares the panel's six rows. */
  ol.fo-powers { grid-template-rows: repeat(6, auto); }
  ol.fo-powers > .fo-power {
    grid-row: span 6;
    display: grid;
    grid-template-rows: subgrid;
    row-gap: 0;
    padding-inline: var(--space-md);
  }
  ol.fo-powers > .fo-power > .fo-power__stat { align-self: end; }
  .fo-power + .fo-power { border-left: 2px solid var(--white); }
}
.fo-power { display: flex; flex-direction: column; }
.fo-power__n {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--blue-ink);
}
.fo-power__title { font-size: var(--text-md); font-weight: 600; line-height: 1.3; }
.fo-power__body { margin-top: 0.5rem; line-height: 1.6; }
.fo-power__stat {
  margin-top: auto;
  padding-top: var(--space-md);
  font-size: clamp(3rem, 5.6vw, 4.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--blue);
}
.fo-power__label { margin-top: 0.5rem; font-weight: 600; line-height: 1.4; }
.fo-power__source { margin-top: 0.5rem; font-size: var(--text-xs); line-height: 1.5; color: var(--ink-muted); }

/* ---------- what you get ------------------------------------------------ */
ul.fo-get {
  display: grid;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 64rem) { ul.fo-get { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fo-get__card { display: flex; flex-direction: column; }
.fo-get__media {
  height: 20rem;
  margin-bottom: var(--space-sm);
  background: var(--band-deep-blue);
  overflow: hidden;
}
.fo-get__media picture,
.fo-get__media img { width: 100%; height: 100%; object-fit: contain; }
.fo-get__card:nth-child(2) .fo-get__media { background: var(--cream); }
.fo-get__card:nth-child(2) .fo-get__media img { object-fit: cover; object-position: top center; }
.fo-get__card:nth-child(3) .fo-get__media img { object-fit: cover; }
.fo-get__n { font-size: var(--text-sm); font-weight: 700; color: var(--blue-ink); }
.fo-get__title { margin-top: 0.25rem; font-size: var(--text-lg); font-weight: 600; line-height: 1.25; }
.fo-get__body { margin-top: 0.5rem; line-height: 1.65; }
.fo-get__note {
  margin-top: var(--space-lg);
  padding-top: var(--space-sm);
  border-top: 2px solid var(--black);
  max-width: 52rem;
  font-size: var(--text-md);
  line-height: 1.55;
}

/* ---------- the shared controls: pills, fields ------------------------- */
ul.fo-pick {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fo-pick__input,
.fo-swatch__input,
.fo-block__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.fo-pick__label,
.fo-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.05rem;
  border: 2px solid var(--black);
  border-radius: 999px;
  background: var(--white);
  color: var(--black);
  font: inherit;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
.fo-pick__label:hover,
.fo-pill:hover { background: var(--fo-orange-soft); }
.fo-pick__input:checked + .fo-pick__label { background: var(--black); color: var(--white); }
.fo-pick__input[type="checkbox"]:checked + .fo-pick__label::before { content: "✓"; font-weight: 700; }
.fo-pick__input:focus-visible + .fo-pick__label,
.fo-swatch__input:focus-visible + .fo-swatch,
.fo-block__input:focus-visible + .fo-block__label {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.fo-field { border: 0; margin: var(--space-md) 0 0; padding: 0; min-width: 0; }
.fo-field__label {
  display: block;
  margin-bottom: 0.5rem;
  padding: 0;
  font-weight: 600;
}
.fo-field__opt { font-weight: 400; color: var(--ink-muted); }
.fo-field__hint { margin: -0.25rem 0 0.75rem; font-size: var(--text-sm); color: var(--ink-muted); }
.fo-field__say {
  min-height: 3em;
  margin-top: 0.75rem;
  font-size: var(--text-sm);
  color: var(--ink-muted);
}
.fo-field__row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.fo-field__row .fo-input { flex: 1 1 14rem; }
.fo-field__button { flex: 0 0 auto; }

.fo-input {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 2px solid var(--black);
  border-radius: 0;
  background: var(--white);
  color: var(--black);
  font: inherit;
}
.fo-input::placeholder { color: #6b6b6b; }
.fo-input--area { resize: vertical; min-height: 7rem; }
select.fo-input { appearance: auto; }

/* ---------- step 1: the brief ------------------------------------------- */
.fo-step { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
@media (min-width: 64rem) {
  .fo-step { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; }
  .fo-step__head { position: sticky; top: var(--fo-sticky); }
}

ol.fo-dots {
  display: flex;
  gap: 0.4rem;
  margin-top: var(--space-md);
}
ol.fo-dots li {
  width: 2.25rem;
  height: 0.6rem;
  border: 2px solid var(--black);
  transition: background-color var(--duration) var(--ease);
}
ol.fo-dots li.is-done { background: var(--black); }
ol.fo-dots li.is-now { background: var(--fo-orange); }

ol.fo-deck { display: grid; gap: var(--space-md); margin: 0; padding: 0; list-style: none; }
.fo-q {
  display: flex;
  flex-direction: column;
  padding: var(--space-md);
  border: 2px solid var(--black);
  background: var(--white);
}
@media (min-width: 48rem) { .fo-q { padding: var(--space-lg); } }
ol.fo-deck.is-live .fo-q { min-height: 26rem; }
.fo-q:focus { outline: none; }
.fo-q:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.fo-q__n {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--space-xs);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.fo-q__n span {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--fo-orange);
  color: var(--black);
  font-size: var(--text-sm);
}
.fo-q__set { border: 0; margin: 0; padding: 0; min-width: 0; }
.fo-q__title {
  display: block;
  padding: 0;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.fo-q__hint { margin: 0.4rem 0 var(--space-sm); color: var(--ink-muted); }
.fo-q__say {
  min-height: 3.2em;
  margin-top: var(--space-sm);
  padding-left: 0.75rem;
  border-left: 3px solid transparent;
  color: var(--blue-ink);
  font-weight: 500;
  line-height: 1.5;
}
.fo-q__say:not(:empty) { border-left-color: var(--fo-orange); }
.fo-q__nav {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--line);
}
.fo-q__nav .button--secondary { margin-right: auto; }

/* The title field: the blank in "The Future of …", set large enough to read
   as the cover it is about to become. */
.fo-title-field {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.6rem;
  row-gap: 0.25rem;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.fo-title-field__pre { white-space: nowrap; }
.fo-title-field__input {
  /* A WIDTH AS WELL AS A BASIS. An input's min-content is its `size`
     attribute's 20 characters, at this font size wider than a 360px phone,
     and a flex basis alone does not stop it pushing the card sideways. */
  flex: 1 1 10rem;
  width: 10rem;
  min-width: 0;
  padding: 0.1rem 0;
  border: 0;
  border-bottom: 3px solid var(--black);
  border-radius: 0;
  background: transparent;
  color: var(--black);
  font: inherit;
}
.fo-title-field__input::placeholder { color: #8a8a8a; }
.fo-title-field__input:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
ul.fo-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: var(--space-sm) 0 0;
  padding: 0;
  list-style: none;
}
.fo-pill { padding: 0.35rem 0.8rem; font-size: var(--text-sm); }

/* ---------- step 2: design it ------------------------------------------- */
.fo-design { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
@media (min-width: 64rem) {
  .fo-design { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; }
  .fo-preview { position: sticky; top: var(--fo-sticky); }
}

ul.fo-swatches {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 36rem) { ul.fo-swatches { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.fo-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.2rem;
  font-size: var(--text-xs);
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
}
.fo-swatch__chip {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 2px solid rgb(0 0 0 / 0.2);
}
.fo-swatch__input:checked + .fo-swatch { font-weight: 700; }
.fo-swatch__input:checked + .fo-swatch .fo-swatch__chip { outline: 2px solid var(--black); outline-offset: 3px; }
.fo-swatch__chip--deep-blue { background: var(--band-deep-blue); }
.fo-swatch__chip--orange { background: var(--fo-orange); }
.fo-swatch__chip--turquoise { background: var(--band-turquoise); }
.fo-swatch__chip--lime { background: var(--band-lime); }
.fo-swatch__chip--pink { background: var(--band-pink); }
.fo-swatch__chip--purple { background: var(--band-dh-purple); }

/* The preview: a panel of four frames, each a picture of one output. */
.fo-preview {
  --fo-accent: var(--band-deep-blue);
  --fo-on-accent: var(--white);
  --fo-head: "Archivo", sans-serif;
  --fo-weight: 800;
  padding: var(--space-sm);
  border: 2px solid var(--black);
  background: var(--cream);
}
@media (min-width: 48rem) { .fo-preview { padding: var(--space-md); } }
.fo-color--deep-blue { --fo-accent: var(--band-deep-blue); --fo-on-accent: var(--white); }
.fo-color--orange { --fo-accent: var(--fo-orange); --fo-on-accent: var(--black); }
.fo-color--turquoise { --fo-accent: var(--band-turquoise); --fo-on-accent: var(--black); }
.fo-color--lime { --fo-accent: var(--band-lime); --fo-on-accent: var(--black); }
.fo-color--pink { --fo-accent: var(--band-pink); --fo-on-accent: var(--black); }
.fo-color--purple { --fo-accent: var(--band-dh-purple); --fo-on-accent: var(--white); }
.fo-look--editorial { --fo-head: "Roboto Slab", Georgia, serif; --fo-weight: 600; }
.fo-look--calm { --fo-weight: 300; }

.fo-preview__label {
  display: inline-block;
  margin-bottom: var(--space-sm);
  padding: 0.2rem 0.55rem;
  background: var(--black);
  color: var(--white);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.fo-preview__caption { margin-top: var(--space-sm); font-size: var(--text-xs); color: var(--ink-muted); }

.fo-preview__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas: "cover post" "web web" "spread spread";
  gap: var(--space-sm) var(--space-xs);
  align-items: start;
}
@media (min-width: 48rem) {
  .fo-preview__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-areas:
      "cover cover web web web web"
      "spread spread spread spread post post";
  }
}
.fo-frame { min-width: 0; }
.fo-frame--cover { grid-area: cover; }
.fo-frame--web { grid-area: web; }
.fo-frame--spread { grid-area: spread; }
.fo-frame--post { grid-area: post; }
.fo-frame__tag {
  margin-bottom: 0.35rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* The cover, four ways. Each look decides the paper, the type and which of
   the four artworks shows; the colour decides the accent. */
.fo-doc--cover { border: 1px solid var(--line); }
.fo-doc--cover .fo-doc__kicker { border-bottom-color: var(--fo-accent); }
.fo-doc--cover .fo-doc__pre,
.fo-doc--cover .fo-doc__subject { font-family: var(--fo-head); }
.fo-doc--cover .fo-doc__subject { font-weight: var(--fo-weight); }
.fo-doc__art {
  position: absolute;
  inset: auto 0 0;
  height: 46%;
}
.fo-art { display: none; height: 100%; }
.fo-art picture,
.fo-art img { width: 100%; height: 100%; object-fit: cover; }
.fo-look--bold .fo-art--bold,
.fo-look--editorial .fo-art--editorial,
.fo-look--vivid .fo-art--vivid,
.fo-look--calm .fo-art--calm { display: block; }

.fo-look--bold .fo-doc--cover .fo-doc__subject { text-transform: uppercase; font-size: 13cqi; }
.fo-look--editorial .fo-doc--cover { background: #f7f3ec; }
.fo-look--editorial .fo-doc--cover .fo-doc__subject { font-size: 14cqi; letter-spacing: -0.01em; }
.fo-look--editorial .fo-doc__art { height: 38%; inset: auto 9% 7%; }
.fo-look--vivid .fo-doc--cover { background: var(--fo-accent); color: var(--fo-on-accent); }
.fo-look--vivid .fo-doc--cover .fo-doc__kicker { border-bottom-color: var(--fo-on-accent); }
.fo-look--vivid .fo-doc__art {
  inset: auto -18% -18% auto;
  width: 82%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
}
.fo-look--calm .fo-doc__art { inset: 0; height: 100%; opacity: 0.55; }
.fo-look--calm .fo-doc--cover .fo-doc__kicker,
.fo-look--calm .fo-doc--cover .fo-doc__pre,
.fo-look--calm .fo-doc--cover .fo-doc__subject,
.fo-look--calm .fo-doc--cover .fo-doc__line { position: relative; }
.fo-look--calm .fo-doc--cover .fo-doc__kicker { border-bottom-width: 0.5cqi; }

/* The spread: contents on the left, a chapter opener on the right. */
.fo-spread {
  display: grid;
  grid-template-columns: 1fr 1fr;
  aspect-ratio: 2.4 / 1;
  background: var(--fo-paper);
  border: 1px solid var(--line);
  container-type: inline-size;
}
.fo-spread__page { position: relative; padding: 5cqi 4.5cqi; overflow: hidden; }
.fo-spread__page--toc { border-right: 1px solid #e3e3e3; }
.fo-spread__kicker {
  font-family: var(--fo-head);
  font-size: 3.2cqi;
  font-weight: 700;
  margin-bottom: 2.5cqi;
}
ol.fo-spread__toc { margin: 0; padding: 0; list-style: none; }
ol.fo-spread__toc li {
  display: flex;
  align-items: center;
  gap: 1.6cqi;
  padding: 0.9cqi 0;
  border-bottom: 1px solid #e6e6e6;
  font-size: 1.9cqi;
  line-height: 1.3;
}
ol.fo-spread__toc span {
  flex: 0 0 auto;
  padding: 0.3cqi 0.8cqi;
  background: var(--fo-accent);
  color: var(--fo-on-accent);
  font-weight: 700;
}
.fo-spread__page--open { background: var(--fo-accent); color: var(--fo-on-accent); }
.fo-look--calm .fo-spread__page--open,
.fo-look--editorial .fo-spread__page--open { background: var(--fo-paper); color: var(--black); }
.fo-spread__n {
  font-family: var(--fo-head);
  font-size: 9cqi;
  font-weight: var(--fo-weight);
  line-height: 1;
}
.fo-spread__h {
  margin-top: 1.5cqi;
  font-family: var(--fo-head);
  font-size: 3.6cqi;
  font-weight: var(--fo-weight);
  line-height: 1.15;
}
.fo-spread__bar {
  display: block;
  width: 30%;
  height: 0.8cqi;
  margin: 2.5cqi 0;
  background: currentColor;
}
.fo-look--calm .fo-spread__bar,
.fo-look--editorial .fo-spread__bar { background: var(--fo-accent); }
.fo-spread__lines { display: grid; gap: 1.2cqi; }
.fo-spread__lines span { display: block; height: 0.8cqi; background: currentColor; opacity: 0.25; }
.fo-spread__lines span:nth-child(2n) { width: 82%; }

/* The web page. */
.fo-browser {
  overflow: hidden;
  background: var(--fo-paper);
  border: 1px solid var(--line);
  container-type: inline-size;
}
.fo-browser__bar {
  display: flex;
  align-items: center;
  gap: 2.5cqi;
  padding: 1.6cqi 2.5cqi;
  background: #e7e7e7;
}
.fo-browser__dots { display: flex; gap: 1cqi; }
.fo-browser__dots span { width: 1.8cqi; height: 1.8cqi; border-radius: 50%; background: #b9b9b9; }
.fo-browser__url {
  flex: 1;
  padding: 0.4cqi 2cqi;
  background: var(--white);
  border-radius: 999px;
  font-size: 2.4cqi;
  color: #555;
  white-space: nowrap;
  overflow: hidden;
}
.fo-browser__hero { position: relative; aspect-ratio: 2.3 / 1; overflow: hidden; }
.fo-browser__hero picture,
.fo-browser__hero img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.fo-browser__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Never below the site's scrim floor (`checks.check_scrims`): the title is
     white, and the photograph behind it could be anything. */
  background: linear-gradient(0deg, rgb(0 0 0 / 0.72), rgb(0 0 0 / 0.55));
}
.fo-browser__title {
  position: absolute;
  left: 5cqi;
  bottom: 5cqi;
  z-index: 1;
  max-width: 70%;
  color: var(--white);
  font-family: var(--fo-head);
  line-height: 1;
}
.fo-browser__title span { display: block; font-size: 3.4cqi; font-weight: 500; margin-bottom: 1cqi; }
.fo-browser__title strong {
  display: inline;
  font-size: 7cqi;
  font-weight: var(--fo-weight);
  text-transform: uppercase;
}
ul.fo-browser__tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2cqi;
  margin: 0;
  padding: 3cqi;
  list-style: none;
}
ul.fo-browser__tiles li {
  min-height: 11cqi;
  padding: 2cqi;
  background: var(--fo-accent);
  color: var(--fo-on-accent);
  font-size: 2.5cqi;
  font-weight: 700;
  line-height: 1.25;
}

/* The post. */
.fo-phone {
  overflow: hidden;
  background: var(--fo-paper);
  border: 1px solid var(--line);
  container-type: inline-size;
  /* PERCENT, NOT cqi. A container's own padding resolves cqi against the
     container ABOVE it — here the viewport — which made it 86px and left the
     post 24px of room. Its children's cqi are its own, which is the point. */
  padding: 6%;
}
.fo-phone__head { display: flex; align-items: center; gap: 4cqi; margin-bottom: 4cqi; }
.fo-phone__avatar { width: 12cqi; height: 12cqi; border-radius: 50%; background: var(--fo-accent); }
.fo-phone__org { font-size: 6cqi; font-weight: 700; }
.fo-phone__text { font-size: 5.6cqi; line-height: 1.35; margin-bottom: 4cqi; }
.fo-phone__media { position: relative; aspect-ratio: 1.25 / 1; overflow: hidden; }
.fo-phone__media picture,
.fo-phone__media img { width: 100%; height: 100%; object-fit: cover; }
.fo-phone__over {
  position: absolute;
  inset: auto 0 0;
  padding: 4cqi 5cqi;
  background: rgb(0 0 0 / 0.68);
  color: var(--white);
  font-family: var(--fo-head);
  font-size: 7cqi;
  font-weight: var(--fo-weight);
  line-height: 1.05;
}

/* ---------- step 3: build it -------------------------------------------- */
.fo-build { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
@media (min-width: 64rem) {
  .fo-build { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: start; }
  .fo-board { position: sticky; top: var(--fo-sticky); }
}
.fo-build__tools { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--space-md); }
.section--fo-build .button--secondary { background: transparent; color: var(--white); }
.section--fo-build .button--secondary:hover,
.section--fo-build .button--secondary:focus-visible { background: var(--white); color: var(--black); }

.fo-lane { border: 0; margin: 0 0 var(--space-lg); padding: 0; min-width: 0; }
.fo-lane:last-child { margin-bottom: 0; }
.fo-lane__title {
  padding: 0;
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.25;
}
.fo-lane__desc { margin: 0.25rem 0 var(--space-sm); color: var(--ink-muted); }
ul.fo-blocks {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 48rem) { ul.fo-blocks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fo-block { position: relative; display: flex; }
.fo-block__label {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: start;
  width: 100%;
  padding: 1rem 1rem 1rem 0.9rem;
  border: 2px solid var(--white);
  background: var(--white);
  color: var(--black);
  cursor: pointer;
  transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.fo-block__label:hover { border-color: var(--fo-orange); }
.fo-block__input:checked + .fo-block__label { background: var(--band-lime); border-color: var(--band-lime); }
.section--fo-build .fo-block__input:focus-visible + .fo-block__label { outline-color: var(--white); }
.fo-block__glyph {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  background: var(--cream);
}
.fo-block__input:checked + .fo-block__label .fo-block__glyph { background: var(--white); }
.fo-glyph { width: 1.4rem; height: 1.4rem; }
.fo-block__text { display: grid; gap: 0.2rem; }
.fo-block__name { font-weight: 600; line-height: 1.3; }
.fo-block__body { font-size: var(--text-sm); line-height: 1.5; color: var(--dark-grey); }
.fo-block__rec {
  position: absolute;
  top: -0.65rem;
  left: 0.9rem;
  padding: 0.05rem 0.5rem;
  background: var(--fo-orange);
  color: var(--black);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.fo-block__plus {
  position: relative;
  width: 1.75rem;
  height: 1.75rem;
  border: 2px solid var(--black);
  border-radius: 50%;
}
.fo-block__plus::before,
.fo-block__plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.75rem;
  height: 2px;
  background: var(--black);
  transform: translate(-50%, -50%);
}
.fo-block__plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.fo-block__input:checked + .fo-block__label .fo-block__plus { background: var(--black); }
.fo-block__input:checked + .fo-block__label .fo-block__plus::before {
  width: 0.45rem;
  background: var(--band-lime);
  transform: translate(-85%, 10%) rotate(45deg);
}
.fo-block__input:checked + .fo-block__label .fo-block__plus::after {
  width: 0.8rem;
  background: var(--band-lime);
  transform: translate(-30%, -10%) rotate(-50deg);
}

/* The board: the blueprint as it stands, on white paper. */
.fo-board {
  --ink: var(--black);
  --ink-muted: var(--dark-grey);
  /* The page's own hairline, not the band's: the board is white paper on
     Deep Blue, where the band's `--line` is white at 30% and draws nothing. */
  --line: #d4d4d4;
  color: var(--black);
}
.fo-board__inner {
  padding: var(--space-md);
  background: var(--white);
}
.fo-board__kicker {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.fo-board__title {
  margin-top: 0.25rem;
  padding-bottom: var(--space-xs);
  border-bottom: 2px solid var(--black);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.fo-board__pre { display: block; font-size: var(--text-md); font-weight: 500; letter-spacing: 0; }
.fo-board__count { margin: 0.75rem 0; font-size: var(--text-sm); font-weight: 600; }
ol.fo-sum-lanes { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.fo-sum-lane { padding: 0.6rem 0.75rem; background: var(--cream); }
.fo-sum-lane__name {
  margin-bottom: 0.35rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
ul.fo-sum-lane__bricks { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0; padding: 0; list-style: none; }
ul.fo-sum-lane__bricks li {
  padding: 0.15rem 0.5rem;
  background: var(--black);
  color: var(--white);
  font-size: var(--text-xs);
  line-height: 1.4;
  animation: fo-drop 360ms var(--ease) both;
}
.fo-sum-lane__empty { font-size: var(--text-xs); color: var(--ink-muted); }
ul.fo-sum-lane__bricks:not(:empty) + .fo-sum-lane__empty { display: none; }
@keyframes fo-drop {
  from { opacity: 0; transform: translateY(-0.5rem); }
  to { opacity: 1; transform: none; }
}

.fo-strength {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: var(--space-sm);
  padding-top: var(--space-xs);
  border-top: 2px solid var(--black);
}
.fo-strength__lbl { font-weight: 600; }
.fo-strength__val { font-size: 2.25rem; font-weight: 800; line-height: 1; }
ul.fo-meters { display: grid; gap: 0.4rem; margin: var(--space-xs) 0 0; padding: 0; list-style: none; }
.fo-meter {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) 2rem;
  gap: 0.6rem;
  align-items: center;
  font-size: var(--text-sm);
}
.fo-meter__lbl { font-weight: 600; }
.fo-meter__bar { height: 0.6rem; background: var(--cream); overflow: hidden; }
.fo-meter__fill {
  display: block;
  width: 0;
  height: 100%;
  background: var(--fo-orange);
  transition: width 400ms var(--ease);
}
.fo-meter__val { text-align: right; font-variant-numeric: tabular-nums; }

ul.fo-badges { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: var(--space-sm) 0 0; padding: 0; list-style: none; }
.fo-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--line);
  color: var(--dark-grey);
  font-size: var(--text-xs);
  line-height: 1.3;
  transition: background-color var(--duration) var(--ease);
}
.fo-badge.is-on { border-color: var(--black); background: var(--band-lime); color: var(--black); font-weight: 600; }
.fo-badge__ico { font-size: 0.8em; }
.fo-board__tip {
  margin-top: var(--space-sm);
  padding: 0.75rem 0.9rem;
  border-left: 4px solid var(--fo-orange);
  background: var(--cream);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.fo-board__tip:empty { display: none; }
.fo-board__time { margin-top: var(--space-xs); font-size: var(--text-xs); color: var(--ink-muted); }

/* The dock: on a phone the board is below twenty blocks, so once something
   is on it a bar at the foot of the screen says so and jumps there. The
   script hides it again while the board or the send step is on screen. */
.fo-dock {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: var(--black);
  color: var(--white);
  font-size: var(--text-sm);
  text-decoration: none;
}
.fo-dock:hover { color: var(--white); }
.fo-dock__go { font-weight: 600; }
@media (min-width: 64rem) { .fo-dock { display: none; } }

/* ---------- how we make it ---------------------------------------------- */
ul.fo-approach {
  display: grid;
  gap: var(--space-md);
  margin: 0 0 var(--space-xl);
  padding: 0;
  list-style: none;
}
@media (min-width: 48rem) { ul.fo-approach { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 80rem) { ul.fo-approach { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fo-approach__item { padding-top: var(--space-xs); border-top: 2px solid var(--black); }
.fo-approach__title { font-size: var(--text-md); font-weight: 600; line-height: 1.3; }
.fo-approach__body { margin-top: 0.5rem; line-height: 1.65; }

ol.fo-tl {
  display: grid;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 64rem) { ol.fo-tl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Turquoise one step deeper — the brochure's darker panel behind each week.
   Opaque rather than a black wash, so it reads as a colour and not a scrim. */
.fo-tl__week { padding: var(--space-md); background: #2ce4e8; }
.fo-tl__label {
  display: inline-block;
  margin-bottom: var(--space-sm);
  padding: 0.5rem 1rem;
  background: var(--white);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.1;
}
ol.fo-tl__steps {
  position: relative;
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
ol.fo-tl__steps::before {
  content: "";
  position: absolute;
  left: 1.05rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 2px;
  background: var(--black);
}
.fo-tl__step {
  position: relative;
  display: grid;
  grid-template-columns: 2.1rem minmax(0, 1fr);
  column-gap: 0.85rem;
  align-items: start;
}
.fo-tl__n {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border: 2px solid var(--black);
  border-radius: 50%;
  background: var(--white);
  font-weight: 700;
}
.fo-tl__text {
  padding: 0.55rem 0.8rem;
  background: rgb(255 255 255 / 0.62);
  line-height: 1.45;
}
.fo-tl__note {
  grid-column: 2;
  margin-top: 0.4rem;
  padding-left: 1.4rem;
  position: relative;
  font-size: var(--text-sm);
  font-style: italic;
  line-height: 1.45;
}
.fo-tl__note::before {
  content: "↳";
  position: absolute;
  left: 0.2rem;
  top: 0;
  font-style: normal;
  font-weight: 700;
}

/* ---------- example outcomes -------------------------------------------- */
ol.fo-outcomes {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(15rem, 72%);
  gap: var(--space-sm);
  margin: 0;
  padding: 0 0 var(--space-xs);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
@media (min-width: 48rem) { ol.fo-outcomes { grid-auto-columns: minmax(15rem, 40%); } }
@media (min-width: 64rem) {
  ol.fo-outcomes {
    grid-auto-flow: row;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    overflow: visible;
  }
}
.fo-outcome { scroll-snap-align: start; border-left: 1px solid rgb(255 255 255 / 0.35); padding-left: var(--space-xs); }
.fo-outcome__media { height: 19rem; }
.fo-outcome__media picture,
.fo-outcome__media img { width: 100%; height: 100%; object-fit: contain; object-position: top left; }
.fo-outcome__n { margin-top: var(--space-xs); font-size: var(--text-lg); font-weight: 700; }
.fo-outcome__title { font-size: var(--text-md); font-weight: 500; line-height: 1.3; }

/* ---------- real blueprints ---------------------------------------------- */
ul.fo-cases {
  display: grid;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 64rem) { ul.fo-cases { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fo-case { display: flex; flex-direction: column; border: 1px solid var(--line); }
.fo-case__media { height: 13rem; background: var(--cream); overflow: hidden; }
.fo-case:nth-child(3) .fo-case__media { background: var(--band-deep-blue); }
.fo-case__media picture,
.fo-case__media img { width: 100%; height: 100%; object-fit: contain; }
.fo-case__body { display: flex; flex-direction: column; flex: 1; padding: var(--space-sm); }
.fo-case__tag {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.fo-case__title { margin-top: 0.25rem; font-size: var(--text-md); font-weight: 600; line-height: 1.3; }
.fo-case__label {
  margin-top: var(--space-sm);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.fo-case__p { margin-top: 0.35rem; font-size: var(--text-sm); line-height: 1.6; }
.fo-case__more { margin-top: var(--space-xs); }
.fo-case__summary {
  cursor: pointer;
  font-weight: 600;
}
ol.fo-case__list { display: grid; gap: 0.5rem; margin: 0.6rem 0 0; padding: 0; list-style: none; font-size: var(--text-sm); line-height: 1.55; }
ul.fo-case__mix { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.4rem 0 0; padding: 0; list-style: none; }
ul.fo-case__mix li {
  padding: 0.15rem 0.55rem;
  border: 1px solid var(--black);
  border-radius: 999px;
  font-size: var(--text-xs);
  line-height: 1.5;
}
.fo-case__more + .fo-case__label { margin-top: auto; padding-top: var(--space-sm); }
.fo-case__start { align-self: flex-start; margin-top: var(--space-sm); }

.fo-quotes {
  display: grid;
  gap: var(--space-md);
  margin-top: var(--space-xl);
  padding: var(--space-lg) var(--space-md);
  background: var(--band-deep-blue);
  color: var(--white);
}
@media (min-width: 64rem) {
  .fo-quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--space-lg); gap: var(--space-lg); }
  .fo-quote__text { font-size: var(--text-lg); }
}
.fo-quote { margin: 0; }
.fo-quote__text {
  margin: 0;
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.4;
}
.fo-quote__text::before {
  content: "“";
  display: block;
  height: 2.2rem;
  color: var(--fo-orange);
  font-size: 4rem;
  font-weight: 800;
  line-height: 1;
}
.fo-quote__cite { margin-top: var(--space-xs); font-size: var(--text-md); }

/* ---------- step 4: send it ---------------------------------------------- */
.fo-send { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
@media (min-width: 64rem) { .fo-send { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.fo-sum {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: var(--white);
  border: 2px solid var(--black);
}
.fo-sum__title { font-size: var(--text-md); font-weight: 700; margin-bottom: var(--space-xs); }
.fo-sum__rows { margin: 0; }
.fo-sum__row {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.45rem 0;
  border-top: 1px solid var(--line);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.fo-sum__row dt { font-weight: 600; }
@media (min-width: 36rem) { .fo-sum__row { grid-template-columns: 9rem minmax(0, 1fr); } }
.fo-send__talk { margin-top: var(--space-md); }
.fo-send__card {
  --ink-muted: var(--dark-grey);
  padding: var(--space-md);
  background: var(--white);
  border: 2px solid var(--black);
}
@media (min-width: 48rem) { .fo-send__card { padding: var(--space-lg); } }
.fo-send__card .fo-field:first-child { margin-top: 0; }
.fo-send__submit { width: 100%; margin-top: var(--space-md); }
.fo-send__extras { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: var(--space-sm); font-size: var(--text-sm); }
.fo-send__msg { min-height: 1.5em; margin-top: 0.5rem; font-size: var(--text-sm); font-weight: 600; }
.fo-send__privacy { margin-top: var(--space-xs); font-size: var(--text-xs); line-height: 1.6; color: var(--ink-muted); }
.fo-send__done {
  margin-top: var(--space-sm);
  padding: 0.75rem 1rem;
  background: var(--band-lime);
  border-left: 4px solid var(--black);
  font-size: var(--text-sm);
}

/* ---------- reduced motion, print ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  ul.fo-sum-lane__bricks li { animation: none; }
}

/* "Save as PDF" prints the blueprint on a page and nothing else. The class
   is set by the script for the length of the print dialog, so printing the
   page any other way prints the page. */
@media print {
  .fo-printing .site-header,
  .fo-printing .breadcrumb,
  .fo-printing .section-menu,
  .fo-printing .footer,
  .fo-printing [data-consent-root],
  .fo-printing .fo-dock,
  .fo-printing main > :not(.section--fo-send),
  .fo-printing .fo-send__card,
  .fo-printing .fo-send__talk { display: none !important; }
  .fo-printing .section--fo-send { background: none !important; padding: 0 !important; }
  .fo-printing .fo-send { display: block !important; }
}