/* S-01 THE FRONT DOOR — the page sheet (0.4 E44.W1, LHFI-prod#764, a Wave of intent issue 751).

   THE DESIGN IS v12 (`UIH-s80-dan-nixon-01`, the Keith Lampe + Dan Nixon joint word,
   2026-09-25): `Architecture/Design considerations/UI Designs/mockups-2026-09-23-front-door/
   front-door-v12.html` in the LightHouse-Foundry repository @ ffeeaf0, its two 2026-09-25
   masthead edits included. This sheet is v12's ROLE LAYER — its §2 page scale, the door, the
   long read, the sky, the lockup, the sans variant and the centred read — on WARM EDITORIAL
   TRUST's paper palette, plus the sign-up's rules RE-HOMED from `../foundry/style.css` and
   re-expressed on WET roles (the sign-up is today's, issue 751 Q1 (a): restyled only).

   IT COPIES NO TOKEN. The WET token layer (`../warm-editorial-trust/tokens.css`) is linked by
   the root layout on every page; this sheet reads it. v12's first ~540 lines were a verbatim
   copy of that file and are NOT carried.

   THE VALUE LAW (U1). Every value a rule reads is a WET token or a NAMED token declared in
   the block below; the literals v12 carried inside its rules (the 700 weight, −0.035em, the
   cloud sizes and drift periods, the ray fan, the page-scale widths) are named there, each
   with its v12 source. What a rule may still state: 0, 1px hairlines, percentages, degrees,
   em offsets, fr/ch, unitless ratios in calc(), and breakpoints in @media conditions (v12's
   own px breakpoints, written in em at the same widths: 1180 · 900 · 760 · 640 · 560 · 400).
   Where v12 named a RAW colour (--card · --paper · --slate) the rule reads the ROLE that
   carries it (--surface-raised · --surface-page · --sem-unproven), DS1.

   EVERY RULE IS SCOPED to `[data-style="front-door"]` — the route layout's own wrapper — so
   nothing here can reach another surface even if the sheet were linked by mistake.

   @provenance new-proposal=front-door-page-sheet (v12, the joint word of 2026-09-25) */

/* ==== 0. THE TOKEN BLOCK ================================================================ */
[data-style="front-door"] {
  /* ── TYPE — v12's "SANS VARIANT": Outfit (display, the wordmark) · Plus Jakarta Sans
     (reading text, the Coach's voice) · JetBrains Mono (figures, the Judge's voice). The
     roles are re-pointed INSIDE the scope, and the venture aliases the Tailwind utilities
     read (--font-coach / --font-instrument) with them, so the reused ribbon and the ds
     primitives take the page's faces. Every other screen takes them in W2 (issue 765). */
  --font-display: "Outfit", system-ui, sans-serif;
  --font-prose: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-data: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-coach: var(--font-prose);
  --font-instrument: var(--font-data);
  --fd-title-weight: 700;          /* v12: .hero__title 700, "weighted like the live landing page's" */
  --fd-title-track: -0.035em;      /* v12: .hero__title letter-spacing */
  --fd-fig-size: 0.86em;           /* v12: .fig — a figure sits a step inside its line */
  --fd-hero-title-size: clamp(var(--fs-3xl), 6vw, var(--fs-5xl));
  --fd-hero-sub-size: calc((var(--fs-base) + var(--fs-md)) / 2);   /* v12: half a rung */
  --fd-field-size: calc((var(--fs-sm) + var(--fs-base)) / 2);      /* v12: the idea box, one step smaller */
  --fd-sect-title-size: clamp(var(--fs-xl), 3.4vw, var(--fs-2xl));
  --fd-sect-title-measure: 26ch;
  --fd-hero-sub-measure: 62ch;
  --fd-band: 0.14em;               /* the house's one underline: the brass band's height */
  --fd-band-ink: color-mix(in srgb, var(--sem-target) 42%, transparent);
  --fd-diamond-line: 1;            /* the promise's diamond sits on its own line box */

  /* ── PAGE SCALE — v12 §2, each value where v12 put it ── */
  --fd-hero-max: 900px;            /* system.css .hero max-width, tokenised in v12 */
  --fd-door-max: 760px;            /* the ask column: the prompt box + the starters */
  --fd-field-min: 132px;           /* the prompt box's resting height: three lines */
  --fd-starter-min: calc(var(--sp-11) + var(--sp-9));   /* 152 — a starter's minimum column */
  --fd-read-col: calc(var(--fd-door-max) - 2 * var(--gutter));   /* the centred read's column */
  --fd-margin-col: calc((var(--page-max) - 2 * var(--gutter) - var(--fd-read-col)) / 2 - var(--sp-8));
  --fd-stop-name: minmax(9rem, 12rem);   /* v12: a stop's name column */
  --fd-safe-top: env(safe-area-inset-top, 0px);

  /* ── THE LOCKUP — the larger masthead (v12's 2026-09-25 edit) ── */
  --fd-mark-lg: calc(var(--mark-size) * 1.75);    /* the footer's size, and now the masthead's */
  --fd-mark-md: calc(var(--mark-size) * 1.375);   /* one step back on a phone */
  /* the masthead's height, which the door reaches up behind (see §2) */
  --fd-nav-reach: calc(var(--sp-6) + var(--fd-mark-lg));

  /* ── THE SKY — v12's cumulus, on roles: the crown is the raised sheet, the body a
     sheet/paper mix, the belly leans to the slate role so it reads as shade ── */
  --fd-sky-top: color-mix(in srgb, var(--tint-info) 86%, var(--sem-unproven));
  --fd-sky-mid: color-mix(in srgb, var(--tint-info) 70%, var(--tint-neutral));
  --fd-cloud-crown: var(--surface-raised);
  --fd-cloud-body: color-mix(in srgb, var(--surface-raised) 92%, var(--surface-page));
  --fd-cloud-belly: color-mix(in srgb, var(--sem-unproven) 14%, var(--surface-raised));
  --fd-cloud-shade: color-mix(in srgb, var(--sem-unproven) 9%, transparent);
  --fd-cloud-edge: color-mix(in srgb, var(--surface-raised) 70%, transparent);
  --fd-cloud-rim: color-mix(in srgb, var(--surface-raised) 75%, transparent);
  --fd-ray-bright: color-mix(in srgb, var(--surface-raised) 55%, transparent);
  --fd-ray-soft: color-mix(in srgb, var(--surface-raised) 30%, transparent);
  --fd-ray-angle: 118deg;
  --fd-rays-opacity: 70%;
  --fd-cloud-aspect: 2.4 / 1;
  --fd-wisp-aspect: 5 / 1;
  --fd-wisp-opacity: 75%;
  --fd-wisp-blur: calc(var(--sp-1) / 4);
  --fd-cloud-drift: var(--sp-11);  /* how far a cloud drifts before it turns */
  --fd-drift-1: 110s;              /* v12's six periods, slow enough to read as weather */
  --fd-drift-2: 140s;
  --fd-drift-3: 125s;
  --fd-drift-4: 100s;
  --fd-drift-5: 160s;
  --fd-drift-6: 150s;
  --fd-cloud-1-w: min(34rem, 66vw);
  --fd-cloud-2-w: min(24rem, 48vw);
  --fd-cloud-3-w: min(28rem, 56vw);
  --fd-cloud-4-w: min(18rem, 40vw);
  --fd-cloud-5-w: min(16rem, 32vw);
  --fd-cloud-6-w: min(18rem, 34vw);

  /* ── THE SIGN-UP (re-homed from ../foundry/style.css) ── */
  --fd-scrim: color-mix(in srgb, var(--ink) 40%, transparent);
  --fd-enter-y: var(--sp-2);       /* a screen or a modal arrives from this far below */
  --fd-dialog-gap: var(--sp-11);   /* the modal never touches the viewport's edge */

  /* the page's own ground and voice */
  font-family: var(--font-prose);
}

/* ==== 1. BASE, inside the scope (v12 reset + base, the parts WET's base layer lacks) ==== */
[data-style="front-door"] :is(h1, h2, h3, h4, .fd-wordmark, .fd-promise-text, .fd-answer, .fd-chapter-name) {
  font-family: var(--font-display);
}
[data-style="front-door"] p {
  text-wrap: pretty;
}
[data-style="front-door"] :is(ul, ol) {
  list-style: none;
}
/* the values on this page — prices, credits, counts — are data (v12 .fig) */
[data-style="front-door"] .fd-fig {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--track-data);
  font-size: var(--fd-fig-size);
  color: var(--ink);
}
[data-style="front-door"] .fd-plain {
  font-style: normal;
}

/* ==== 2. THE DOOR — the masthead, the sky, the hero, the entry ========================= */
/* The masthead is the page's banner, ABOVE <main>; the door is inside <main> and reaches
   UP behind it by the masthead's height, so v12's sky runs behind the lockup while every
   section of the story stays inside the main landmark. The reach is the masthead's own
   height at each width (a larger value only moves the wash's top above the page). */
[data-style="front-door"] .fd-nav {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--sp-6) var(--gutter) 0;
}
[data-style="front-door"] .fd-lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  white-space: nowrap;
}
[data-style="front-door"] .fd-lockup svg {
  height: var(--mark-size);
  width: auto;
  flex: none;
  display: block;
}
[data-style="front-door"] .fd-lockup-rule {
  width: 1px;
  height: var(--sp-5);
  background: var(--rule-strong);
  flex: none;
}
[data-style="front-door"] .fd-wordmark {
  min-height: var(--hit-min);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semi);
  text-decoration: none;
  color: var(--ink);
}
[data-style="front-door"] .fd-wordmark svg {
  height: var(--fd-mark-lg);
}
[data-style="front-door"] .fd-wordmark .fd-lockup-rule {
  height: var(--sp-8);
}
[data-style="front-door"] .fd-wordmark-text {
  min-width: 0;
}
[data-style="front-door"] .fd-lockup em {
  font-style: italic;
  color: var(--sem-accent);
}
[data-style="front-door"] .fd-crumb {
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  font-style: italic;
}

[data-style="front-door"] .fd-door {
  position: relative;
  margin-top: calc(-1 * var(--fd-nav-reach));
  padding-top: var(--fd-nav-reach);
  background: linear-gradient(
    to bottom,
    var(--fd-sky-top) 0%,
    var(--fd-sky-mid) 34%,
    var(--tint-neutral) 62%,
    var(--surface-page) 100%
  );
}
[data-style="front-door"] .fd-door > :not(.fd-sky) {
  position: relative;
  z-index: 1;
}

/* THE SKY — v12's soft volumetric cumulus (2026-09-23 rework): three stacked masses per
   cloud, each a soft radial fill through an SVG turbulence filter (Sky.tsx), sun rays
   falling from the top-left corner. Drawn; nothing is borrowed. */
[data-style="front-door"] .fd-sky {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
[data-style="front-door"] .fd-sky-defs {
  position: absolute;
  width: 0;
  height: 0;
}
[data-style="front-door"] .fd-sky-rays {
  position: absolute;
  left: -20%;
  top: -40%;
  width: 90%;
  height: 140%;
  background: repeating-conic-gradient(
    from var(--fd-ray-angle) at 0% 0%,
    var(--fd-ray-bright) 0deg 3deg,
    transparent 3deg 7deg,
    var(--fd-ray-soft) 7deg 9deg,
    transparent 9deg 14deg
  );
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 0% 0%, var(--ink) 0%, transparent 80%);
  mask-image: radial-gradient(ellipse 70% 70% at 0% 0%, var(--ink) 0%, transparent 80%);
  filter: blur(var(--sp-4));
  opacity: var(--fd-rays-opacity);
}
[data-style="front-door"] .fd-cloud {
  position: absolute;
  aspect-ratio: var(--fd-cloud-aspect);
  animation: fd-cloud-drift var(--fd-drift-1) var(--ease-in-out) infinite alternate;
  will-change: transform;
}
[data-style="front-door"] .fd-cloud b {
  position: absolute;
  border-radius: 50%;
}
/* the belly: the shaded underside, low and wide */
[data-style="front-door"] .fd-cloud-belly {
  left: 6%;
  right: 4%;
  top: 42%;
  bottom: 4%;
  background: radial-gradient(
    ellipse 50% 50% at 50% 45%,
    var(--fd-cloud-belly) 0 45%,
    var(--fd-cloud-shade) 70%,
    transparent 100%
  );
  filter: url(#fd-cloud-billow) blur(var(--sp-1));
}
/* the body: the bulk of the cloud */
[data-style="front-door"] .fd-cloud-body {
  left: 4%;
  right: 8%;
  top: 14%;
  bottom: 14%;
  background: radial-gradient(
    ellipse 50% 50% at 50% 50%,
    var(--fd-cloud-body) 0 56%,
    var(--fd-cloud-edge) 76%,
    transparent 100%
  );
  filter: url(#fd-cloud-billow);
}
/* the crown: the sunlit top, smaller and brighter */
[data-style="front-door"] .fd-cloud-crown {
  left: 22%;
  right: 24%;
  top: 0;
  bottom: 38%;
  background: radial-gradient(
    ellipse 50% 50% at 45% 55%,
    var(--fd-cloud-crown) 0 54%,
    var(--fd-cloud-rim) 76%,
    transparent 100%
  );
  filter: url(#fd-cloud-billow);
}
/* a wisp: thin, stretched, no crown */
[data-style="front-door"] .fd-cloud--wisp {
  aspect-ratio: var(--fd-wisp-aspect);
  opacity: var(--fd-wisp-opacity);
}
[data-style="front-door"] .fd-cloud--wisp .fd-cloud-body {
  filter: url(#fd-cloud-wisp) blur(var(--fd-wisp-blur));
}
[data-style="front-door"] .fd-cloud[data-cloud="1"] { width: var(--fd-cloud-1-w); top: 10%; left: -9%; }
[data-style="front-door"] .fd-cloud[data-cloud="2"] { width: var(--fd-cloud-2-w); top: 3%; right: -6%; animation-duration: var(--fd-drift-2); animation-direction: alternate-reverse; }
[data-style="front-door"] .fd-cloud[data-cloud="3"] { width: var(--fd-cloud-3-w); top: 50%; right: -10%; animation-duration: var(--fd-drift-3); }
[data-style="front-door"] .fd-cloud[data-cloud="4"] { width: var(--fd-cloud-4-w); top: 74%; left: -2%; animation-duration: var(--fd-drift-4); animation-direction: alternate-reverse; }
[data-style="front-door"] .fd-cloud[data-cloud="5"] { width: var(--fd-cloud-5-w); top: 30%; left: 70%; animation-duration: var(--fd-drift-5); }
[data-style="front-door"] .fd-cloud[data-cloud="6"] { width: var(--fd-cloud-6-w); top: 38%; left: 4%; animation-duration: var(--fd-drift-6); animation-direction: alternate-reverse; }
[data-style="front-door"] .fd-cloud[data-cloud="1"] b { filter: url(#fd-cloud-billow-b); }
[data-style="front-door"] .fd-cloud[data-cloud="3"] :is(.fd-cloud-body, .fd-cloud-crown) { filter: url(#fd-cloud-billow-c); }
@keyframes fd-cloud-drift {
  from { transform: translateX(0); }
  to { transform: translateX(var(--fd-cloud-drift)); }
}

/* the hero (M1 — the business question) */
[data-style="front-door"] .fd-hero {
  max-width: var(--fd-hero-max);
  margin: 0 auto;
  padding: var(--sp-11) var(--gutter) var(--sp-6);
  text-align: center;
}
[data-style="front-door"] .fd-hero-eyebrow {
  font-style: italic;
  font-size: var(--fs-base);
  color: var(--sem-accent);
  margin-bottom: var(--sp-5);
}
[data-style="front-door"] .fd-hero-title {
  font-size: var(--fd-hero-title-size);
  font-weight: var(--fd-title-weight);
  line-height: var(--lh-tight);
  letter-spacing: var(--fd-title-track);
  text-wrap: balance;
}
[data-style="front-door"] .fd-hero-sub {
  max-width: var(--fd-hero-sub-measure);
  margin: var(--sp-6) auto 0;
  font-size: var(--fd-hero-sub-size);
  line-height: var(--lh-normal);
  color: var(--ink-soft);
}

/* the entry — the ONE ask: the notice's link, the prompt box, the status, the hint, and
   the reused idea ribbon, in the ask column (v12 .ask + .starters) */
[data-style="front-door"] .fd-entry {
  max-width: var(--fd-door-max);
  margin: 0 auto;
  padding: var(--sp-4) var(--gutter) var(--sp-10);
}
[data-style="front-door"] .fd-entry-live {
  display: flex;
  flex-direction: column;
}
/* the notice's LINK (0.3.1 E23.W2 — PMH-044): subtle, not invisible — above the box */
[data-style="front-door"] .fd-notice-line {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  text-align: right;
}
[data-style="front-door"] .fd-notice-link {
  color: var(--ink-soft);
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: var(--sp-1);
  transition: color var(--dur-settle) var(--ease-exit);
}
[data-style="front-door"] .fd-notice-link:hover {
  color: var(--ink);
  transition: color var(--dur-hover) var(--ease-out);
}
/* the prompt box — the ds composer is already v12's .prompt; the page sets its field */
[data-style="front-door"] .fd-composer {
  width: 100%;
}
[data-style="front-door"] [data-slot="composer-field"]:not(.fd-wizard-textarea) {
  min-height: var(--fd-field-min);
  font-size: var(--fd-field-size);
}
[data-style="front-door"] [data-slot="composer-field"]::placeholder {
  font-style: normal;
  font-size: var(--fd-field-size);
}
[data-style="front-door"] [data-slot="composer-foot"] {
  gap: var(--sp-3) var(--sp-4);
}
[data-style="front-door"] .fd-entry-controls {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-left: auto;
  min-width: 0;
}
[data-style="front-door"] .fd-entry-cta {
  flex: none;
}
[data-style="front-door"] .fd-entry-status {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--ink-soft);
}
[data-style="front-door"] .fd-entry-status:empty {
  margin: 0;
}
[data-style="front-door"] .fd-entry-status:is(
  [data-entry-state="invalid-email"],
  [data-entry-state="invalid-website"],
  [data-entry-state="malformed"],
  [data-entry-state="rate-limited"],
  [data-entry-state="unavailable"]
) {
  color: var(--sem-attention);
}
/* the line under the sheet: what a good answer looks like (v12 .hint-block, flush left) */
[data-style="front-door"] .fd-entry-hint {
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}
/* the confirmation, which REPLACES the form on a 204 */
[data-style="front-door"] .fd-recorded {
  background: var(--surface-raised);
  border: 1px solid var(--sem-accent);
  border-radius: var(--r-lg);
  box-shadow: var(--e2);
  padding: var(--sp-8);
  text-align: center;
  outline: none;
}
[data-style="front-door"] .fd-recorded-title {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semi);
  color: var(--ink);
}
[data-style="front-door"] .fd-recorded-body {
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--ink-soft);
}

/* the reused idea ribbon (`FirstContactIdeas`, never edited) — v12's starters: the label
   and "New ideas" flush on the box's edge, the cards four across in the ask column */
[data-style="front-door"] [data-fc-part="ideas"] {
  max-width: none;
  margin-top: var(--sp-8);
}
[data-style="front-door"] [data-fc-part="ideas"] > div:first-child {
  padding-inline: 0;
}
[data-style="front-door"] [data-fc-part="ideas"] > [role="list"] {
  grid-template-columns: repeat(auto-fit, minmax(var(--fd-starter-min), 1fr));
  gap: var(--sp-3);
}
[data-style="front-door"] [data-fc-part="idea"] {
  width: 100%;
  height: 100%;
  justify-content: flex-start;
}

/* ==== 3. THE WIZARD — today's six screens after the idea, inside the same prompt box ==== */
[data-style="front-door"] .fd-wizard {
  margin: 0;
  padding: var(--sp-6) var(--sp-6) var(--sp-4);
  border: 0;
  min-width: 0;
}
[data-style="front-door"] .fd-wizard-screen {
  animation: fd-enter var(--dur-transition) var(--ease-out);
}
/* the question is the fieldset's <legend>, floated into the panel's flow so the padding
   above reaches it (Keith Lampe, 2026-09-18: "the top question runs into the border") */
[data-style="front-door"] .fd-wizard-question {
  float: left;
  width: 100%;
  margin: 0 0 var(--sp-2);
  padding: 0;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
  color: var(--ink);
  text-wrap: balance;
}
[data-style="front-door"] .fd-wizard-helper {
  clear: both;
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--ink-soft);
}
[data-style="front-door"] .fd-wizard-fields {
  display: grid;
  gap: var(--sp-4);
}
[data-style="front-door"] .fd-wizard-field {
  display: grid;
  gap: var(--sp-2);
}
[data-style="front-door"] .fd-wizard-label {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--ink-soft);
}
/* a field on this surface: a control-scale box nested in the page-scale sheet (v12
   .door__email) — the edge, one radius rung down, its own raised ground */
[data-style="front-door"] :is([data-slot="field"], [data-slot="composer-field"].fd-wizard-textarea) {
  min-height: var(--hit-min);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
  background: var(--surface-raised);
  color: var(--ink);
  font-size: var(--fs-base);
  transition: border-color var(--dur-settle) var(--ease-exit);
}
[data-style="front-door"] :is([data-slot="field"], [data-slot="composer-field"].fd-wizard-textarea)::placeholder {
  color: var(--ink-quiet);
  font-style: italic;
  font-size: var(--fs-base);
}
[data-style="front-door"] :is([data-slot="field"], [data-slot="composer-field"].fd-wizard-textarea):focus-visible {
  outline: var(--focus-width) solid var(--sem-focus);
  outline-offset: 0;
  border-color: var(--sem-focus);
  background: var(--surface-raised);
}
[data-style="front-door"] [data-slot="field"][aria-invalid="true"] {
  border-color: var(--sem-attention);
}
/* the join's one line — what the press does, plainly; it takes focus when the screen arrives */
[data-style="front-door"] .fd-wizard-line {
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--ink);
  outline: none;
}
[data-style="front-door"] .fd-wizard-line:focus-visible {
  outline: var(--focus-width) solid var(--sem-focus);
  outline-offset: var(--focus-offset);
}

/* the slider — the ds `slider` primitive on its handles: ONE native range, three stops;
   the thumb in ink (Continue is the screen's one filled control), hidden while unanswered */
[data-style="front-door"] [data-slot="slider"] {
  width: 100%;
  margin: var(--sp-2) 0 0;
}
[data-style="front-door"] [data-slot="slider-input"] {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  height: var(--hit-min);
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
[data-style="front-door"] [data-slot="slider-input"]::-webkit-slider-runnable-track {
  height: var(--sp-2);
  background: var(--surface-inset);
  border: 1px solid var(--edge);
  border-radius: var(--r-pill);
}
[data-style="front-door"] [data-slot="slider-input"]::-moz-range-track {
  height: var(--sp-2);
  background: var(--surface-inset);
  border: 1px solid var(--edge);
  border-radius: var(--r-pill);
}
[data-style="front-door"] [data-slot="slider-input"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: var(--sp-6);
  height: var(--sp-6);
  margin-top: calc((var(--sp-2) - var(--sp-6)) / 2);
  background: var(--ink);
  border: 1px solid var(--edge);
  border-radius: var(--r-pill);
  box-shadow: var(--e1);
}
[data-style="front-door"] [data-slot="slider-input"]::-moz-range-thumb {
  width: var(--sp-6);
  height: var(--sp-6);
  background: var(--ink);
  border: 1px solid var(--edge);
  border-radius: var(--r-pill);
  box-shadow: var(--e1);
}
[data-style="front-door"] [data-slot="slider"][data-answered="false"] [data-slot="slider-input"]::-webkit-slider-thumb {
  opacity: 0%;
}
[data-style="front-door"] [data-slot="slider"][data-answered="false"] [data-slot="slider-input"]::-moz-range-thumb {
  opacity: 0%;
}
[data-style="front-door"] [data-slot="slider-stops"] {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--ink-soft);
}
[data-style="front-door"] [data-slot="slider-stop"] {
  flex: 1 1 0;
  text-align: center;
}
[data-style="front-door"] [data-slot="slider-stop"]:first-child {
  text-align: left;
}
[data-style="front-door"] [data-slot="slider-stop"]:last-child {
  text-align: right;
}
[data-style="front-door"] [data-slot="slider-stop"][data-current="true"] {
  color: var(--ink);
  font-weight: var(--fw-semi);
}

/* ==== 4. THE DIALOGS — the consent gate, its terms, and the notice (the ds primitive) ==== */
[data-style="front-door"] [data-slot="dialog"] {
  margin: auto;
  padding: 0;
  width: min(100% - var(--sp-8), var(--fd-door-max));
  max-height: calc(100vh - var(--fd-dialog-gap));
  overflow: hidden;
  background: var(--surface-raised);
  color: var(--ink);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--e3);
  animation: fd-enter var(--dur-transition) var(--ease-out);
}
[data-style="front-door"] [data-slot="dialog"]::backdrop {
  background: var(--fd-scrim);
}
/* ONE FILLED CONTROL WHILE A MODAL IS OPEN: the page's own primary controls go quiet
   beneath the scrim, so the open modal's Accept is the only lit control on screen */
[data-style="front-door"]:has([data-slot="dialog"][open]) [data-slot="button"][data-variant="primary"]:not([data-slot="dialog"] [data-slot="button"]) {
  background: var(--tint-quiet);
  color: var(--ink-soft);
  box-shadow: none;
}
[data-style="front-door"] [data-slot="dialog-panel"] {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--fd-dialog-gap));
}
[data-style="front-door"] [data-slot="dialog-body"] {
  padding: var(--sp-6);
  overflow: auto;
  min-height: 0;
}
[data-style="front-door"] [data-slot="dialog-title"] {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
  color: var(--ink);
}
[data-style="front-door"] [data-slot="dialog-actions"] {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--rule);
  background: var(--surface-inset);
}
/* the founder's sentence — the consent modal's own name; the link in the action colour */
[data-style="front-door"] .fd-consent-line {
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--ink);
}
[data-style="front-door"] .fd-consent-line a {
  color: var(--sem-action);
  text-decoration: underline;
  text-underline-offset: var(--sp-1);
}
[data-style="front-door"] .fd-consent-line a:hover {
  color: var(--sem-action-hover);
}
/* the ratified notice's paragraphs, in both modals */
[data-style="front-door"] .fd-terms-p {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--ink-soft);
}
[data-style="front-door"] .fd-terms-p:last-child {
  margin-bottom: 0;
}
@keyframes fd-enter {
  from {
    opacity: 0%;
    transform: translateY(var(--fd-enter-y));
  }
  to {
    opacity: 100%;
    transform: none;
  }
}

/* ==== 5. THE LONG READ — a hanging label + a centred column (v12's centred read) ======== */
[data-style="front-door"] .fd-sect {
  margin: 0 auto;
  padding-block: var(--sp-10) 0;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--fd-read-col)) minmax(0, 1fr);
  gap: var(--sp-4) var(--sp-8);
}
[data-style="front-door"] .fd-sect + .fd-sect {
  margin-top: var(--sp-10);
}
/* the section rule spans the read, not the whole window */
[data-style="front-door"] .fd-sect + .fd-sect::before {
  content: "";
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: start;
  justify-self: center;
  width: min(100%, calc(var(--fd-read-col) + 2 * (var(--fd-margin-col) + var(--sp-8))));
  border-top: 1px solid var(--rule);
  margin-top: calc(-1 * var(--sp-10));
}
/* the hanging track starts on the masthead's line (2026-09-25): the labels and the stage
   heads hang left of the column but never past the logo */
[data-style="front-door"] .fd-sect-margin {
  grid-column: 1;
  justify-self: end;
  width: var(--fd-margin-col);
  padding-top: var(--sp-2);
}
[data-style="front-door"] .fd-sect-label {
  font-style: italic;
  color: var(--sem-target-text);
  font-size: var(--fs-sm);
}
[data-style="front-door"] .fd-sect-body {
  grid-column: 2;
  min-width: 0;
}
[data-style="front-door"] .fd-sect-title {
  font-size: var(--fd-sect-title-size);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-display);
  text-wrap: balance;
  max-width: var(--fd-sect-title-measure);
}
[data-style="front-door"] .fd-sect-title em {
  color: var(--sem-accent);
}
[data-style="front-door"] .fd-lede {
  margin-top: var(--sp-5);
  max-width: var(--measure);
  color: var(--ink-soft);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
}
[data-style="front-door"] .fd-prose {
  margin-top: var(--sp-4);
  max-width: var(--measure);
  color: var(--ink-soft);
}
[data-style="front-door"] :is(.fd-prose, .fd-loop, .fd-promise-note, .fd-foot-disclosure) strong {
  color: var(--ink);
  font-weight: var(--fw-semi);
}

/* the problem: four raised cards, two across */
[data-style="front-door"] .fd-troubles {
  margin-top: var(--sp-8);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
}
[data-style="front-door"] .fd-trouble {
  background: var(--surface-raised);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--e1);
  padding: var(--sp-5) var(--sp-6);
}
[data-style="front-door"] .fd-trouble h3 {
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  line-height: var(--lh-normal);
}
[data-style="front-door"] .fd-trouble p {
  margin-top: var(--sp-2);
  color: var(--ink-soft);
  font-size: var(--fs-sm);
}
[data-style="front-door"] .fd-trouble-fig {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--sem-target-text);
}
[data-style="front-door"] .fd-trouble-fig .fd-fig {
  color: var(--sem-target-text);
}
[data-style="front-door"] .fd-answer {
  margin-top: var(--sp-9);
  max-width: var(--measure);
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  font-style: italic;
  letter-spacing: var(--track-display);
}

/* how you use it: the Coach's four points, two across */
[data-style="front-door"] .fd-coach-points {
  margin-top: var(--sp-7);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6) var(--sp-8);
}
[data-style="front-door"] .fd-coach-points h3 {
  font-size: var(--fs-base);
  font-weight: var(--fw-semi);
}
[data-style="front-door"] .fd-coach-points p {
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  margin-top: var(--sp-1);
}

/* the four stages: chapters in order */
[data-style="front-door"] .fd-loop {
  margin-top: var(--sp-6);
  max-width: var(--measure);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--ink-soft);
}
[data-style="front-door"] .fd-loop strong {
  font-style: italic;
}
/* the chapters sit under the section's own margin column: pull their heads into it */
[data-style="front-door"] .fd-chapters {
  margin-top: var(--sp-9);
  margin-left: calc(-1 * (var(--fd-margin-col) + var(--sp-8)));
  display: grid;
  gap: var(--sp-10);
}
[data-style="front-door"] .fd-chapter {
  display: grid;
  grid-template-columns: var(--fd-margin-col) minmax(0, 1fr);
  gap: var(--sp-4) var(--sp-8);
}
[data-style="front-door"] .fd-chapter-head {
  align-self: start;
  position: sticky;
  top: calc(var(--fd-safe-top) + var(--sp-6));
}
[data-style="front-door"] .fd-chapter-num {
  font-family: var(--font-data);
  font-size: var(--fs-sm);
  color: var(--sem-target-text);
  letter-spacing: var(--track-data);
}
[data-style="front-door"] .fd-chapter-name {
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  font-weight: var(--fw-medium);
  font-style: italic;
  letter-spacing: var(--track-display);
  margin-top: var(--sp-1);
}
/* Envision wears the house's brass band: the same pen marks the place you start */
[data-style="front-door"] .fd-chapter[data-stage="envision"] .fd-chapter-name span {
  background-image: linear-gradient(to top, var(--fd-band-ink) 0 var(--fd-band), transparent var(--fd-band));
}
[data-style="front-door"] .fd-chapter-sub {
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  margin-top: var(--sp-2);
}
[data-style="front-door"] .fd-chapter-body {
  min-width: 0;
}
[data-style="front-door"] .fd-chapter-lede {
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  max-width: var(--measure);
}
[data-style="front-door"] .fd-parts {
  margin-top: var(--sp-6);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5) var(--sp-7);
}
[data-style="front-door"] .fd-part dt {
  font-weight: var(--fw-semi);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
}
[data-style="front-door"] .fd-part dd {
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  margin: var(--sp-1) 0 0;
}
[data-style="front-door"] .fd-note {
  margin-top: var(--sp-6);
  max-width: var(--measure);
  padding: var(--sp-4) var(--sp-5);
  background: var(--tint-neutral);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  color: var(--ink);
}
/* a real sequence, drawn as one: the Build tab's states */
[data-style="front-door"] .fd-track {
  margin-top: var(--sp-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
}
[data-style="front-door"] .fd-track-state {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-pill);
  background: var(--surface-raised);
  font-size: var(--fs-sm);
  white-space: nowrap;
}
[data-style="front-door"] .fd-track-state--end {
  border-color: var(--sem-proven);
  background: var(--tint-positive);
}
[data-style="front-door"] .fd-track-sep {
  color: var(--ink-quiet);
  font-size: var(--fs-sm);
}
[data-style="front-door"] .fd-track-caption {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  font-style: italic;
}
/* Go to Market's six stops, numbered in the data face */
[data-style="front-door"] .fd-stops {
  margin-top: var(--sp-6);
  display: grid;
  border-top: 1px solid var(--rule-strong);
  counter-reset: fd-stop;
}
[data-style="front-door"] .fd-stop {
  display: grid;
  grid-template-columns: var(--sp-8) var(--fd-stop-name) minmax(0, 1fr);
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--rule);
  counter-increment: fd-stop;
}
[data-style="front-door"] .fd-stop::before {
  content: counter(fd-stop);
  font-family: var(--font-data);
  font-size: var(--fs-sm);
  color: var(--sem-target-text);
  padding-top: var(--sp-1);
}
[data-style="front-door"] .fd-stop h4 {
  font-size: var(--fs-base);
  font-weight: var(--fw-semi);
}
[data-style="front-door"] .fd-stop p {
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}

/* what makes it different: six claims, the first leads */
[data-style="front-door"] .fd-diffs {
  margin-top: var(--sp-8);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-7) var(--sp-8);
}
[data-style="front-door"] .fd-diff {
  border-top: 1px solid var(--rule-strong);
  padding-top: var(--sp-4);
}
[data-style="front-door"] .fd-diff h3 {
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  line-height: var(--lh-normal);
}
[data-style="front-door"] .fd-diff p {
  margin-top: var(--sp-2);
  color: var(--ink-soft);
  font-size: var(--fs-sm);
}
[data-style="front-door"] .fd-diff--lead {
  grid-column: 1 / -1;
  border-top-color: var(--sem-target);
}
[data-style="front-door"] .fd-diff--lead h3 {
  font-size: var(--fs-lg);
}
[data-style="front-door"] .fd-diff--lead p {
  font-size: var(--fs-base);
  max-width: var(--measure);
}

/* who it is for: three raised cards */
[data-style="front-door"] .fd-who {
  margin-top: var(--sp-7);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6);
}
[data-style="front-door"] .fd-who li {
  background: var(--surface-raised);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--e1);
  padding: var(--sp-5);
}
[data-style="front-door"] .fd-who h3 {
  font-size: var(--fs-base);
  font-weight: var(--fw-semi);
  line-height: var(--lh-normal);
}
[data-style="front-door"] .fd-who p {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}
[data-style="front-door"] .fd-who-foot {
  margin-top: var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  font-style: italic;
}

/* pricing: a ledger, not tiles */
[data-style="front-door"] .fd-ledger-wrap {
  margin-top: var(--sp-7);
  overflow-x: auto;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-lg);
  background: var(--surface-raised);
  box-shadow: var(--e1);
}
[data-style="front-door"] .fd-ledger {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
[data-style="front-door"] .fd-ledger :is(th, td) {
  text-align: left;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
[data-style="front-door"] .fd-ledger thead th {
  font-weight: var(--fw-medium);
  font-style: italic;
  color: var(--ink-soft);
  background: var(--surface-inset);
}
[data-style="front-door"] .fd-ledger tbody tr:last-child :is(th, td) {
  border-bottom: 0;
}
[data-style="front-door"] .fd-ledger tbody th {
  font-weight: var(--fw-semi);
  font-size: var(--fs-base);
}
[data-style="front-door"] .fd-ledger tbody th span {
  display: block;
  font-weight: var(--fw-regular);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  font-style: italic;
}
[data-style="front-door"] .fd-ledger .fd-num {
  text-align: right;
  white-space: nowrap;
}
[data-style="front-door"] .fd-ledger .fd-num .fd-fig {
  font-size: var(--fs-base);
}
[data-style="front-door"] .fd-terms {
  margin-top: var(--sp-7);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6);
}
[data-style="front-door"] .fd-terms li {
  border-top: 1px solid var(--rule-strong);
  padding-top: var(--sp-4);
}
[data-style="front-door"] .fd-terms h3 {
  font-size: var(--fs-base);
  font-weight: var(--fw-semi);
  line-height: var(--lh-normal);
}
[data-style="front-door"] .fd-terms p {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}

/* where we are: built and next */
[data-style="front-door"] .fd-status {
  margin-top: var(--sp-7);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6);
}
[data-style="front-door"] .fd-status-col h3 {
  font-family: var(--font-prose);
  font-size: var(--fs-sm);
  font-style: italic;
  font-weight: var(--fw-regular);
  color: var(--sem-target-text);
}
[data-style="front-door"] .fd-status-col ul {
  margin-top: var(--sp-3);
  display: grid;
  gap: var(--sp-2);
}
[data-style="front-door"] .fd-status-col li {
  display: flex;
  gap: var(--sp-3);
  align-items: baseline;
  font-size: var(--fs-base);
}
[data-style="front-door"] .fd-status-col li::before {
  content: "";
  flex: none;
  width: var(--sp-2);
  height: var(--sp-2);
  border-radius: var(--r-pill);
  transform: translateY(-0.15em);
}
[data-style="front-door"] .fd-status-col--built li::before {
  background: var(--sem-proven);
}
[data-style="front-door"] .fd-status-col--next li::before {
  border: 1px solid var(--sem-unproven);
}

/* ==== 6. THE CLOSE — the promise and its CTA =========================================== */
[data-style="front-door"] .fd-promise {
  max-width: var(--fd-door-max);
  margin: var(--sp-11) auto 0;
  padding: 0 var(--gutter);
  text-align: center;
}
[data-style="front-door"] .fd-promise-rule {
  height: 1px;
  background: var(--rule-strong);
  position: relative;
  margin-bottom: var(--sp-7);
}
/* the diamond: brass as a GRAPHIC (3.02:1 clears the 3:1 graphics bar) */
[data-style="front-door"] .fd-promise-rule::after {
  content: "\25C6";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--surface-page);
  padding: 0 var(--sp-3);
  color: var(--sem-target);
  font-size: var(--fs-xs);
  line-height: var(--fd-diamond-line);
}
[data-style="front-door"] .fd-promise-text {
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  font-weight: var(--fw-medium);
  font-style: italic;
  letter-spacing: var(--track-display);
}
[data-style="front-door"] .fd-promise-note {
  margin: var(--sp-5) auto 0;
  max-width: var(--measure);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--ink-soft);
}
[data-style="front-door"] .fd-close-cta {
  margin-top: var(--sp-7);
  display: flex;
  justify-content: center;
}
[data-style="front-door"] .fd-close-cta [data-slot="button"] {
  text-decoration: none;
}

/* ==== 7. THE FOOT ====================================================================== */
[data-style="front-door"] .fd-foot {
  max-width: var(--page-max);
  margin: var(--sp-11) auto 0;
  padding: var(--sp-8) var(--gutter) var(--sp-10);
  border-top: 1px solid var(--rule);
}
[data-style="front-door"] .fd-foot-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-3);
}
[data-style="front-door"] .fd-lockup--foot {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semi);
  color: var(--ink);
  margin-bottom: var(--sp-2);
}
[data-style="front-door"] .fd-lockup--foot svg {
  height: var(--fd-mark-lg);
}
[data-style="front-door"] .fd-lockup--foot .fd-lockup-rule {
  height: var(--sp-7);
}
[data-style="front-door"] .fd-foot-tag {
  font-style: italic;
  color: var(--ink-soft);
}
[data-style="front-door"] .fd-foot-small {
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  margin-top: var(--sp-2);
}
[data-style="front-door"] :is(.fd-foot-disclosure, .fd-foot-privacy, .fd-foot-legal) {
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  max-width: var(--measure);
}
[data-style="front-door"] .fd-foot-link {
  color: var(--ink-soft);
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: var(--sp-1);
}
[data-style="front-door"] .fd-foot-link:hover {
  color: var(--ink);
}

/* ==== 8. THE WIDTHS — v12's breakpoints, in em at the same widths ======================= */
/* 1180: below the width where the label track fits, the label stacks above the column */
@media (max-width: 73.75em) {
  [data-style="front-door"] .fd-sect {
    grid-template-columns: minmax(0, var(--fd-read-col));
    justify-content: center;
    gap: var(--sp-3);
  }
  [data-style="front-door"] :is(.fd-sect-margin, .fd-sect-body) {
    grid-column: 1;
  }
  [data-style="front-door"] .fd-sect-margin {
    justify-self: start;
    width: auto;
  }
  [data-style="front-door"] .fd-sect + .fd-sect::before {
    grid-column: 1;
    width: 100%;
  }
  [data-style="front-door"] .fd-chapters {
    margin-left: 0;
  }
  [data-style="front-door"] .fd-chapter {
    grid-template-columns: minmax(0, 1fr);
  }
  [data-style="front-door"] .fd-chapter-head {
    position: static;
  }
}
/* 900 */
@media (max-width: 56.25em) {
  [data-style="front-door"] :is(.fd-who, .fd-terms) {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* 760: the crumb takes its own row; the masthead grows by it */
@media (max-width: 47.5em) {
  [data-style="front-door"] {
    --fd-nav-reach: calc(var(--sp-6) + var(--fd-mark-lg) + var(--sp-3) + var(--sp-6));
  }
  [data-style="front-door"] .fd-nav {
    gap: var(--sp-3);
  }
  [data-style="front-door"] .fd-crumb {
    order: 3;
    width: 100%;
  }
  [data-style="front-door"] .fd-hero {
    padding-top: var(--sp-9);
  }
}
/* 640 */
@media (max-width: 40em) {
  [data-style="front-door"] :is(.fd-troubles, .fd-diffs, .fd-parts, .fd-status, .fd-coach-points) {
    grid-template-columns: minmax(0, 1fr);
  }
  [data-style="front-door"] .fd-stop {
    grid-template-columns: var(--sp-6) minmax(0, 1fr);
  }
  [data-style="front-door"] .fd-stop p {
    grid-column: 2;
  }
  [data-style="front-door"] .fd-ledger :is(th, td) {
    padding: var(--sp-3);
  }
  [data-style="front-door"] .fd-cloud:is([data-cloud="5"], [data-cloud="6"]) {
    display: none;
  }
}
/* 560: the lockup one step back; the starters two by two */
@media (max-width: 35em) {
  [data-style="front-door"] {
    --fd-nav-reach: calc(var(--sp-6) + var(--fd-mark-md) + var(--sp-3) + var(--sp-6));
  }
  [data-style="front-door"] .fd-wordmark {
    font-size: var(--fs-lg);
  }
  [data-style="front-door"] .fd-wordmark svg {
    height: var(--fd-mark-md);
  }
  [data-style="front-door"] .fd-wordmark .fd-lockup-rule {
    height: var(--sp-7);
  }
  [data-style="front-door"] [data-slot="composer-foot"] {
    padding-inline: var(--sp-3);
  }
  [data-style="front-door"] [data-slot="composer-foot"] [data-slot="composer-hint"] {
    flex: 1 1 100%;
  }
  [data-style="front-door"] [data-fc-part="ideas"] > div:first-child {
    flex-wrap: wrap;
  }
  [data-style="front-door"] [data-fc-part="ideas"] > [role="list"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* 400: the 16px side-gutter floor at phone width */
@media (max-width: 25em) {
  [data-style="front-door"] {
    --gutter: var(--sp-4);
  }
}

/* ==== 9. MOTION — per behaviour, and the clouds HOLD (A7) =============================== */
/* The clouds stop where they stand; the screen and modal entrances go straight to their
   end state. Nothing is lost: the picture stays, only the drift stops. */
@media (prefers-reduced-motion: reduce) {
  [data-style="front-door"] .fd-cloud {
    animation: none;
  }
  [data-style="front-door"] :is(.fd-wizard-screen, [data-slot="dialog"]) {
    animation: none;
  }
  [data-style="front-door"] :is(.fd-notice-link, [data-slot="field"], [data-slot="composer-field"]) {
    transition: none;
  }
}

@media print {
  [data-style="front-door"] .fd-sky {
    display: none;
  }
}