/* =====================================================================
   MARROW, THE WEBSITE IN THE APP'S DARK TEAL.  assets/css/dialed-web.css
   Project dialed, lane W, 2026-10-04.

   Edwin, 2026-10-04: the website gets dark teal hero sections and key bands
   with light readable body sections between, one family with the iOS app's
   dark teal atmosphere (memory feedback_app_dark_teal_design_canon.md).
   Built to the Fable brief on dialed/dash-bold-20261004 at e0714864,
   review-artifacts/dash-bold/BRIEF.md section 11 and the depth system of
   section 3 it points at (P2 dark glass, P4 the one filled action, P5 the
   atmosphere hero).

   THE SHAPE OF A PAGE. Dark, light, dark, light: the hero and the key
   bands are full bleed .atmo panels repainted to the approved sketch (the
   app ground, three light pools and a whisper of the white lattice),
   marked data-mz-band="dark" so the nav can
   read them. Between them the parchment canvas and its cream cards are
   untouched, so long copy stays readable. Never two dark bands touching.

   THE PLANES, bottom to top: the band's ground and three light pools; the
   back plane word, white at 8 percent; dark glass cards with an aqua ring
   and a sky tinted drop; the one white pill with its teal aura; the nav, which turns to ink glass while a dark band is under it.
   The band edges are curved, not cut: the hero ends in a wide elliptical
   rim lit by one aqua line, and the key bands are a lens with the same rim
   top and bottom, each floating on a tinted drop.

   THE HYBRID, 2026-10-05 (Edwin, strict order: "blended exactly and
   perfectly with what we just designed now and what we have right now").
   Canon: ~/.edwinstrong/design-canon/hybrid-look-approved-20261005.html and
   hybrid-spec-20261005.md. Layout, copy and prices stay; the surfaces take
   the hybrid blue teal (hue 180 to 192), the bands take the hybrid ground
   and its flat light pools, cards go solid with the thin teal edge, the type
   is Fraunces, Public Sans and IBM Plex Mono, the one white pill per band
   carries the soft teal aura, and the hex lattice, the honeycomb, the glass,
   the cursor light and the back plane word are gone. The hybrid values are
   declared once below, scoped to body.dialed-page (section 0).

   TOKENS (before the hybrid). No new token. Every colour is a var() of css/styles.css or a
   color-mix() of one; the rgba channels in the shadows are --atmo-sky-0
   (11, 26, 25), white, --atelier-dark-teal (61, 221, 180) and
   --atelier-dark-aqua (94, 230, 203).

   PINNED. Every shadow, gradient, mask and backdrop filter in this sheet is
   listed byte for byte in tests/lib/light-sources.mjs (WEB_SHADOWS,
   WEB_GRADIENTS, WEB_MASKS, WEB_BACKDROPS) and allowed only from this file.
   Change a value here and change it there in the same commit.

   Names never carry orb, glow, halo, bloom or breathe (R3). Hover only on a
   fine pointer, transform only, and nothing moves under reduced motion. No
   em or en dashes.
   ===================================================================== */

/* THE X CLIP. A band reaches the viewport edges by 50vw, which is wider
   than the page wherever the browser draws a classic scrollbar, so the x
   axis is clipped. It lives on the BODY, as clip, and the root keeps its
   overflow visible. That pairing is load bearing: css/styles.css gives body
   overflow-x: hidden, and body's overflow only propagates to the viewport
   while the root's is visible. Lane W first clipped the root (2026-10-04),
   which stopped the propagation, so body became a scroll container that
   never scrolls and the sticky nav scrolled away with the page on every nav
   page (live check on 602d9583, 2026-10-05: nav top at -353 after 400px).
   clip on body propagates to the viewport as hidden, makes no scroll
   container, and keeps position: sticky working. Earlier still, clipping
   main cut every band back to the 1280 column. Guarded by
   tests/dialed-web-live-20261005.test.mjs. */
:root[data-mz-console="atelier"] body.dialed-page { overflow-x: clip; }

/* ---------------------------------------------------------------------
   0. THE HYBRID VALUES (hybrid-spec 1.1, 1.2) AND THE TYPE (2). Declared
   here once for the six public pages; the shared values reuse the
   css/styles.css tokens that already carry them. They sit on the root so
   every cascade reader resolves them; this sheet is linked only by the six
   public pages, so the root here is theirs alone.
   --------------------------------------------------------------------- */
:root[data-mz-console="atelier"] {
  --hy-ground: #0B1A1C;
  --hy-ground-hi: #122E33;
  --hy-card: #122A2C;
  --hy-sunk: #0C1E21;
  --hy-edge: #2A6B6B;
  --hy-ink: #EAF2F3;
  --hy-muted: #9FBCBE;
  --hy-pool-teal: #3BC9C4;
  --hy-aqua: var(--marrow-accent-on-dark);
  --hy-aqua-hi: var(--atelier-dark-aqua);
  --hy-teal: var(--atelier-dark-teal);
  --hy-pool-blue: var(--atelier-dark-blue);
  --hy-hairline: color-mix(in srgb, var(--hy-edge) 40%, transparent);
  /* The key wash, aqua #53B2A2 at 18 percent composited on the ground
     #0B1A1C, written opaque (#183534) so it reads as the selected surface it
     is, never as an accent fill. Ink on it measures 12.1. */
  --hy-wash: #183534;
  --hy-boundary: color-mix(in srgb, var(--hy-muted) 50%, transparent);
  --serif: "Fraunces", Georgia, serif;
  --display: var(--serif);
  --sans: "Public Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}
:root[data-mz-console="atelier"] body.dialed-page { font-family: var(--sans); }
/* No hex pattern anywhere (the hybrid removes the lattice by name): the
   cream ground's tile on body::before (held at opacity 0, so the ground
   guard still reads the one field it expects) and the lattice and honeycomb
   inside every atmosphere panel on these pages. */
:root[data-mz-console="atelier"] body.dialed-page::before { opacity: 0; }
:root[data-mz-console="atelier"] body.dialed-page .atmo::before,
:root[data-mz-console="atelier"] body.dialed-page .atmo::after { display: none; }

/* ---------------------------------------------------------------------
   1. THE BAND. A full bleed sky panel. Its inner column lines up with the
   page column to the pixel: the band reaches the viewport edges by a
   negative margin and gives it back as padding, never narrower than the
   section's own content box and never wider than the 1280 page column.
   --------------------------------------------------------------------- */
:root[data-mz-console="atelier"] body.dialed-page .dialed-band.atmo {
  margin-inline: calc(50% - 50vw);
  padding-inline: max(calc(50vw - 50%), calc(50vw - var(--atelier-max-width) / 2));
  /* One silhouette for every dark plate (Fable judge, item 5): a flat top
     and a bottom curve that sags 28px at most. */
  border-radius: 0 0 50% 50% / 0 0 28px 28px;
  width: auto;
  max-width: none;
  border: 0;
  /* The hybrid ground (spec 1.4): three flat pools, teal high left, blue
     right, teal at the floor, over the 160 degree fall from the lit corner. */
  background-color: var(--hy-ground);
  background-image: radial-gradient(44% 38% at 10% 0%, color-mix(in srgb, var(--hy-pool-teal) 14%, transparent) 0%, transparent 72%), radial-gradient(34% 44% at 96% 38%, color-mix(in srgb, var(--hy-pool-blue) 10%, transparent) 0%, transparent 70%), radial-gradient(46% 36% at 42% 106%, color-mix(in srgb, var(--hy-pool-teal) 9%, transparent) 0%, transparent 74%), linear-gradient(160deg, var(--hy-ground-hi) 0%, var(--hy-ground) 58%);
  /* The cast under the rim (Fable judge, item 6). --atelier-dark-teal at low
     alpha over the warm cream turns yellow green wherever the alpha falls
     between 0.04 and 0.12 (hue 64 to 112, measured on the composite), so the
     cast is a short dense lip: 0.5 under the rim over a 4px blur, so the
     pale band it fades through is a few pixels and not a wide lime tail.
     Sampled live at 1440 under the first band: pricing shows no tint above
     15 of 255, help reads hue 127 to 159 over its visible rows. */
  /* The rim takes the hybrid edge, and the lip under it the hybrid pool
     teal (hue 182), never the green cast teal. */
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--hy-edge) 55%, transparent), 0 10px 4px -4px color-mix(in srgb, var(--hy-pool-teal) 45%, transparent);
  color: var(--hy-ink);
  /* The token repoint, scoped to the band: ink, muted and the hairline are
     the hybrid's. Muted measures 5.32 on the brightest pool pixel (#184447). */
  --ink-primary: var(--hy-ink);
  --ink-secondary: var(--hy-muted);
  --ink-muted: var(--hy-muted);
  --ink-tertiary: var(--hy-muted);
  --rule-soft: var(--hy-hairline);
  --rule-strong: var(--hy-boundary);
  --paper-card: var(--hy-card);
  --paper-nested: var(--hy-sunk);
}
:root[data-mz-console="atelier"] body.dialed-page .dialed-band > * { position: relative; z-index: 1; }

/* The first band runs up under the sticky nav, so the nav's ink glass sits on
   the dark ground instead of the cream canvas (on cream the 72 percent ink
   read as flat grey). The band gives the nav's height back as padding;
   assets/js/dialed-web.js writes the measured height to --dialed-nav-h.
   ONLY UNDER A NAV: the rule needs a .nav or .cd-nav before main. Get
   started has no nav, and the unconditional pull slid its band 65px up over
   the 47px offer bar (live check on cafbac63, 2026-10-05), cutting the bar's
   text at 1440 and burying its close button at 390. Guarded by
   tests/dialed-web-live-20261005.test.mjs. */
:root[data-mz-console="atelier"] body.dialed-page :is(.nav, .cd-nav) ~ main > .dialed-band:first-child,
:root[data-mz-console="atelier"] body.dialed-page :is(.nav, .cd-nav) ~ main > #hero:first-child > .dialed-band:first-child {
  margin-top: calc(-1 * var(--dialed-nav-h, 65px));
  padding-top: calc(var(--dialed-band-top, 72px) + var(--dialed-nav-h, 65px));
}
:root[data-mz-console="atelier"] body.dialed-page #hero .hero-panel.dialed-band { --dialed-band-top: 64px; }
:root[data-mz-console="atelier"] body.dialed-page .pricing-band.dialed-band { --dialed-band-top: 0px; }
@media (max-width: 1180px) { :root[data-mz-console="atelier"] body.dialed-page #hero .hero-panel.dialed-band { --dialed-band-top: 40px; } }
@media (max-width: 767px) {
  :root[data-mz-console="atelier"] body.dialed-page #hero .hero-panel.dialed-band { --dialed-band-top: 24px; }
  :root[data-mz-console="atelier"] body.dialed-page :is(.page-hero, .help-hero, .cd-hero).dialed-band { --dialed-band-top: 48px; }
}

/* Type on the band (hybrid spec 2 and 4). Headings ink, Fraunces 300, the
   pivot word italic aqua hi; body copy muted (5.32 on the brightest pool
   pixel #184447); bare links and eyebrows aqua hi (6.98 there), because
   plain aqua measures 4.22 on that pixel. On a card, plain aqua (5.93). */
:root[data-mz-console="atelier"] body.dialed-page .dialed-band :is(h1, h2, h3) { color: var(--hy-ink); }
:root[data-mz-console="atelier"] body.dialed-page .dialed-band :is(h1, h2) em,
:root[data-mz-console="atelier"] body.dialed-page .dialed-band :is(h1, h2) .em { color: var(--hy-aqua-hi); font-style: italic; }
:root[data-mz-console="atelier"] body.dialed-page .dialed-band p { color: var(--hy-muted); }
:root[data-mz-console="atelier"] body.dialed-page .dialed-band p :is(strong, b) { color: var(--hy-ink); }
:root[data-mz-console="atelier"] body.dialed-page main .dialed-band.dialed-band :is(p, li, h1, h2, div, span) > a:not([class]),
:root[data-mz-console="atelier"] body.dialed-page main .dialed-band .container p a,
:root[data-mz-console="atelier"] body.dialed-page main .dialed-band.dialed-band :is(.tier-more, .pv-link, .cd-offer-link) {
  color: var(--hy-aqua-hi);
  text-decoration: none;
}
:root[data-mz-console="atelier"] body.dialed-page main .dialed-band.dialed-band :is(p, li, h1, h2, div, span) > a:not([class]):is(:hover, :focus-visible),
:root[data-mz-console="atelier"] body.dialed-page main .dialed-band .container p a:hover,
:root[data-mz-console="atelier"] body.dialed-page main .dialed-band.dialed-band :is(.tier-more, .pv-link, .cd-offer-link):is(:hover, :focus-visible) {
  color: var(--hy-aqua-hi);
  text-decoration: underline;
  text-underline-offset: 4px;
}
:root[data-mz-console="atelier"] body.dialed-page main .dialed-band.dialed-band :is(.dialed-glass, .atl-shade, .frost, .dialed-sunk) :is(p, li, div, span) > a:not([class]),
:root[data-mz-console="atelier"] body.dialed-page main .dialed-band.dialed-band :is(.dialed-glass, .atl-shade, .frost, .dialed-sunk) :is(p, li, div, span) > a:not([class]):is(:hover, :focus-visible) {
  color: var(--hy-aqua);
}
/* Eyebrows: IBM Plex Mono 500 12, 0.12em, uppercase; aqua hi bare on the
   band, aqua on a card, the accent teal on the cream (aqua is 2.26 there,
   the accent 5.76). */
:root[data-mz-console="atelier"] body.dialed-page :is(.eyebrow, .page-hero-eyebrow, .section-eyebrow, .cd-eyebrow, .cd-offer-eyebrow, .help-eyebrow, .gs-eyebrow, .layer-num, .help-roles-label) {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
:root[data-mz-console="atelier"] body.dialed-page .dialed-band :is(.eyebrow, .page-hero-eyebrow, .section-eyebrow, .cd-eyebrow, .cd-offer-eyebrow, .help-eyebrow, .help-roles-label) { color: var(--hy-aqua-hi); }
:root[data-mz-console="atelier"] body.dialed-page .dialed-band :is(.dialed-glass, .atl-shade, .frost) :is(.eyebrow, .mono) { color: var(--hy-aqua); }
:root[data-mz-console="atelier"] body.dialed-page .dialed-band :focus-visible { outline: 2px solid var(--hy-aqua-hi); outline-offset: 2px; }

/* ---------------------------------------------------------------------
   2. THE BACK PLANE WORD is retired (the hybrid removes it by name).
   --------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   3. THE CARD ON A BAND (hybrid spec 3.5): solid --hy-card, the thin teal
   hairline, 12 radius, no blur, no cursor light, no lift. Hover brings the
   edge to full, a colour change only (spec 1.4, transitions on colour,
   background and border only, 160ms). The class is written three times
   inside :is() so these rules outrank the public sheet's card resets
   (atelier-public.css 597 to 616) by specificity alone.
   --------------------------------------------------------------------- */
:root[data-mz-console="atelier"] body.dialed-page main :is(.dialed-glass.dialed-glass.dialed-glass) {
  position: relative;
  background: var(--hy-card);
  background-image: none;
  border: 1px solid var(--hy-hairline);
  border-radius: 12px;
  color: var(--hy-ink);
  box-shadow: none;
  transition: border-color 160ms ease, background-color 160ms ease;
}
:root[data-mz-console="atelier"] body.dialed-page main :is(.dialed-glass.dialed-glass.dialed-glass) :is(h2, h3, h4) { color: var(--hy-ink); }
:root[data-mz-console="atelier"] body.dialed-page main :is(.dialed-glass.dialed-glass.dialed-glass) :is(li, .small, p) { color: var(--hy-muted); }
/* The sunk plane (spec 1.1): nested rows and tiles, one step below the card. */
:root[data-mz-console="atelier"] body.dialed-page .dialed-sunk {
  background: var(--hy-sunk);
  background-image: none;
  border: 1px solid var(--hy-hairline);
  border-radius: 12px;
  box-shadow: none;
  color: var(--hy-ink);
}
/* The home hero carries its own copy card, its brand preview form and its
   phone: each is a hybrid card. The copy card is THE lit card (spec 3.4,
   1.4): its own two pools over the solid fill, the one drop on the band,
   and only ink, aqua hi and the white pill inside the lit zone. */
:root[data-mz-console="atelier"] body.dialed-page .dialed-band :is(.atl-shade, .bp-form.frost, .bp-screen.ink, .head-plate) {
  background: var(--hy-card);
  background-image: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--hy-hairline);
  border-radius: 12px;
  box-shadow: none;
}
:root[data-mz-console="atelier"] body.dialed-page .dialed-band .bp-form.frost::before { display: none; }
:root[data-mz-console="atelier"] body.dialed-page .dialed-band .bp-screen.ink { background: var(--hy-sunk); }
:root[data-mz-console="atelier"] body.dialed-page #hero .hero-copy.atl-shade {
  isolation: isolate;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--hy-edge) 55%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 30px 70px -40px color-mix(in srgb, var(--hy-pool-teal) 45%, transparent);
}
:root[data-mz-console="atelier"] body.dialed-page #hero .hero-copy.atl-shade::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(62% 72% at 12% 8%, color-mix(in srgb, var(--hy-pool-teal) 30%, transparent) 0%, transparent 70%), radial-gradient(42% 60% at 100% 30%, color-mix(in srgb, var(--hy-pool-blue) 12%, transparent) 0%, transparent 70%);
}
:root[data-mz-console="atelier"] body.dialed-page #hero .hero-copy.atl-shade :is(.eyebrow, .mono) { color: var(--hy-aqua-hi); }
:root[data-mz-console="atelier"] body.dialed-page #hero .hero-copy.atl-shade :is(p, .sub, .small) { color: var(--hy-ink); }
:root[data-mz-console="atelier"] body.dialed-page #hero .hero-copy.atl-shade :is(p, .small) > a:not([class]) { color: var(--hy-aqua-hi); }
:root[data-mz-console="atelier"] body.dialed-page .dialed-band .bp-form :is(.bp-input) { background: var(--hy-sunk); border: 1px solid var(--hy-boundary); color: var(--hy-ink); }
:root[data-mz-console="atelier"] body.dialed-page .dialed-band .bp-form :is(.bp-label, .mono) { color: var(--hy-aqua); }
:root[data-mz-console="atelier"] body.dialed-page .dialed-band .bp-form :is(.bp-note, .small) { color: var(--hy-muted); }
:root[data-mz-console="atelier"] body.dialed-page .dialed-band .bp-form .bp-up { color: var(--hy-ink); }

/* ---------------------------------------------------------------------
   4. THE ONE FILLED ACTION ON A BAND (hybrid spec 3.10): white, ground ink
   (17.82 to 1), the soft teal aura. Secondary actions are filled, never
   hollow: --hy-card on the band with the hairline, ink text.
   --------------------------------------------------------------------- */
:root[data-mz-console="atelier"] body.dialed-page .dialed-band .dialed-pill,
:root[data-mz-console="atelier"] body.dialed-page .dialed-band .dialed-pill:is(:hover, :focus-visible) {
  background: var(--color-pure-white);
  background-image: none;
  border: 1px solid var(--color-pure-white);
  color: var(--hy-ground);
}
:root[data-mz-console="atelier"] body.dialed-page .dialed-band .dialed-pill:active { background: #F2F6F5; border-color: #F2F6F5; color: var(--hy-ground); }
:root[data-mz-console="atelier"] body.dialed-page .dialed-band .dialed-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55), 0 10px 34px -10px color-mix(in srgb, var(--hy-teal) 62%, transparent), 0 0 0 6px color-mix(in srgb, var(--hy-teal) 10%, transparent);
  transition: box-shadow 160ms ease, background-color 160ms ease;
}
:root[data-mz-console="atelier"] body.dialed-page .dialed-band .dialed-frosty,
:root[data-mz-console="atelier"] body.dialed-page .dialed-band .dialed-frosty:is(:active, :focus-visible) {
  background: var(--hy-card);
  background-image: none;
  border: 1px solid var(--hy-hairline);
  color: var(--hy-ink);
}
:root[data-mz-console="atelier"] body.dialed-page .dialed-band .dialed-frosty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  box-shadow: none;
  transition: border-color 160ms ease, background-color 160ms ease;
}
/* On a card the secondary drops to the sunk plane (spec 3.10). */
:root[data-mz-console="atelier"] body.dialed-page .dialed-band :is(.dialed-glass, .atl-shade, .frost) .dialed-frosty { background: var(--hy-sunk); }

/* ---------------------------------------------------------------------
   5. HOVER. A fine pointer only, colour only: the card edge and a
   secondary's border come to the full edge, the pill's aura widens to 8px
   at 14 (spec 3.10). Nothing moves.
   --------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  :root[data-mz-console="atelier"] body.dialed-page main :is(.dialed-glass.dialed-glass.dialed-glass):hover { border-color: var(--hy-edge); }
  :root[data-mz-console="atelier"] body.dialed-page .dialed-band .dialed-pill:hover {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55), 0 10px 34px -10px color-mix(in srgb, var(--hy-teal) 62%, transparent), 0 0 0 8px color-mix(in srgb, var(--hy-teal) 14%, transparent);
  }
  :root[data-mz-console="atelier"] body.dialed-page .dialed-band .dialed-frosty:hover { border-color: var(--hy-edge); background: var(--hy-card); color: var(--hy-ink); }
}
@media (max-width: 390px) {
  :root[data-mz-console="atelier"] body.dialed-page .dialed-band .dialed-pill {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55), 0 8px 26px -8px color-mix(in srgb, var(--hy-teal) 62%, transparent), 0 0 0 5px color-mix(in srgb, var(--hy-teal) 10%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-mz-console="atelier"] body.dialed-page main :is(.dialed-glass.dialed-glass.dialed-glass, .dialed-pill, .dialed-frosty) { transition: none; }
}

/* ---------------------------------------------------------------------
   6. THE NAV, ONE COMPONENT IN TWO TOKEN STATES. On the cream it is the
   existing bar. While a dark band sits under it (assets/js/dialed-web.js
   marks that band data-mz-under-nav and the body data-mz-nav="dark") it is
   ink glass at 72 with white links. Structure, order and hairline are
   untouched. THE PHONE MENU PANEL goes dark with it: its links turn white in
   this state, and the coaches panel kept its literal bone white ground, so on
   cafbac63 every link read white on cream, 1.03 to 1 (live check, 2026-10-05).
   The open panel is solid ink in this state on every page (at 94 the hero
   type ghosted through it).
   --------------------------------------------------------------------- */
:root[data-mz-console="atelier"] body.dialed-page :is(.nav, .cd-nav) { transition: background-color 200ms ease, border-color 200ms ease; }
:root[data-mz-console="atelier"] body.dialed-page[data-mz-nav="dark"] :is(.nav, .cd-nav) {
  --ink-primary: var(--color-pure-white);
  --ink-secondary: var(--hy-muted);
  --ink-muted: var(--hy-muted);
  --rule-soft: var(--hy-hairline);
  --rule-strong: var(--hy-boundary);
  --paper-card: var(--hy-card);
  background: var(--hy-card);
  border-bottom-color: var(--hy-hairline);
  color: var(--hy-ink);
}
:root[data-mz-console="atelier"] body.dialed-page[data-mz-nav="dark"] :is(.nav, .cd-nav) :is(.nav-link, .nav-links a, .cd-nav-links a, .brand, .nav-brand, .nav-wordmark, .cd-brand, .cd-wordmark) { color: var(--hy-ink); }
:root[data-mz-console="atelier"] body.dialed-page[data-mz-nav="dark"] :is(.nav, .cd-nav) .nav-cta {
  background: var(--color-pure-white);
  border-color: var(--hy-ink);
  color: var(--hy-ground);
}
/* The home menu panel is solid ink like the phone panels below: at 94 the
   hero type ghosted through. This rule outranks the 720 panel rule
   (0,6,1 against 0,5,1), so it carries the solid ground itself, at every
   width, since the home menu is a dropdown on desktop too. */
:root[data-mz-console="atelier"] body.dialed-page[data-mz-nav="dark"] :is(.nav, .cd-nav) .nav-menu {
  background: var(--hy-card);
  border-color: var(--hy-hairline);
}

@media (max-width: 720px) {
  :root[data-mz-console="atelier"] body.dialed-page[data-mz-nav="dark"] :is(.nav-links, .cd-nav-links) {
    background: var(--hy-card);
    background-image: none;
    border-bottom: 1px solid var(--hy-hairline);
  }
  :root[data-mz-console="atelier"] body.dialed-page[data-mz-nav="dark"] :is(.nav-links, .cd-nav-links) a {
    color: var(--hy-ink);
    border-bottom-color: var(--hy-hairline);
  }
}

/* ---------------------------------------------------------------------
   7. THE FOOTER. Bone black with the band's three pools at half
   strength, so the page ends in the light it began in.
   --------------------------------------------------------------------- */
:root[data-mz-console="atelier"] body.dialed-page > footer {
  background-image: radial-gradient(44% 38% at 10% 0%, color-mix(in srgb, var(--hy-pool-teal) 7%, transparent) 0%, transparent 72%), radial-gradient(34% 44% at 96% 38%, color-mix(in srgb, var(--hy-pool-blue) 5%, transparent) 0%, transparent 70%), radial-gradient(46% 36% at 42% 106%, color-mix(in srgb, var(--hy-pool-teal) 5%, transparent) 0%, transparent 74%);
}

/* ---------------------------------------------------------------------
   8. THE ONE FILL ON A LIGHT SECTION is --atmo-sky-1 (brief 11), the app's
   dark teal in place of bone black.
   --------------------------------------------------------------------- */
:root[data-mz-console="atelier"] body.dialed-page main .dialed-fill-light,
:root[data-mz-console="atelier"] body.dialed-page main .dialed-fill-light:is(:hover, :active, :focus-visible),
:root[data-mz-console="atelier"] body.dialed-page main .demo-form .submit-btn,
:root[data-mz-console="atelier"] body.dialed-page main .demo-form .submit-btn:is(:hover, :active, :focus-visible) {
  background: var(--hy-card);
  background-image: none;
  border-color: var(--hy-card);
  color: var(--hy-ink);
}

/* =====================================================================
   9. PER PAGE. Only placement: which band, its padding, and where the back
   plane word sits. Every colour and plane comes from 1 to 8 above.
   ===================================================================== */

/* HOME. The hero is the existing .atmo.hero-panel, now full bleed; the four
   steps are the key band. */
:root[data-mz-console="atelier"] body.dialed-page #hero { padding-top: 0; padding-bottom: 56px; }
:root[data-mz-console="atelier"] body.dialed-page #hero .hero-panel.dialed-band {
  padding-block: 64px 48px;
  min-height: 0;
}
:root[data-mz-console="atelier"] body.dialed-page #setup.dialed-band { padding-block: 104px 112px; margin-block: 24px 40px; }
:root[data-mz-console="atelier"] body.dialed-page #setup .pv-steps { gap: 16px; }
:root[data-mz-console="atelier"] body.dialed-page #setup .pv-steps li { padding: 76px 24px 24px; min-height: 172px; }
:root[data-mz-console="atelier"] body.dialed-page #setup .pv-steps li::before {
  top: 24px;
  left: 24px;
  border: 1px solid var(--hy-boundary);
  background: var(--hy-sunk);
  color: var(--hy-ink);
  font-variant-numeric: tabular-nums lining-nums;
  z-index: 1;
}
:root[data-mz-console="atelier"] body.dialed-page #setup .pv-steps li::after { display: none; }
:root[data-mz-console="atelier"] body.dialed-page #setup .pv-steps h3 { color: var(--hy-ink); }
:root[data-mz-console="atelier"] body.dialed-page #setup .pv-steps p { color: var(--hy-muted); }
:root[data-mz-console="atelier"] body.dialed-page #setup .tier-more { margin-top: 32px; }
@media (max-width: 1180px) {
  :root[data-mz-console="atelier"] body.dialed-page #hero .hero-panel.dialed-band { padding-block: 40px 40px; min-height: 0; }
}
@media (max-width: 767px) {
  :root[data-mz-console="atelier"] body.dialed-page #hero .hero-panel.dialed-band { padding-block: 24px 32px; }
  :root[data-mz-console="atelier"] body.dialed-page #setup.dialed-band { padding-block: 72px 80px; }
  :root[data-mz-console="atelier"] body.dialed-page #setup .pv-steps li { padding: 20px 20px 20px 76px; min-height: 0; }
  :root[data-mz-console="atelier"] body.dialed-page #setup .pv-steps li::before { top: 20px; left: 20px; }
}

/* THE SHARED HERO. gyms, pricing and help open on a .page-hero or
   .help-hero; coaches on .cd-hero. The band is the section itself. */
:root[data-mz-console="atelier"] body.dialed-page :is(.page-hero, .help-hero, .cd-hero).dialed-band { padding-block: 72px 48px; }
:root[data-mz-console="atelier"] body.dialed-page :is(.page-hero, .help-hero, .cd-hero).dialed-band :is(.page-hero-title, .help-title, .cd-h1) { color: var(--hy-ink); font-weight: 300; }
:root[data-mz-console="atelier"] body.dialed-page :is(.page-hero, .help-hero, .cd-hero).dialed-band :is(.page-hero-lede, .help-subtitle, .cd-lede) { color: var(--hy-muted); }
@media (max-width: 767px) {
  :root[data-mz-console="atelier"] body.dialed-page :is(.page-hero, .help-hero, .cd-hero).dialed-band { padding-block: 48px 32px; }
}

/* GYMS. The hero, the owner console as the key band, the closing line as
   the last band. The hero's photo slot carries the real console frame. */
:root[data-mz-console="atelier"] body.dialed-page .gyms-head .head-plate.dialed-shot { margin: 0; padding: 10px; border-radius: 20px; min-height: 0; }
:root[data-mz-console="atelier"] body.dialed-page .gyms-head .head-plate.dialed-shot img { position: relative; z-index: 1; display: block; width: 100%; height: auto; border-radius: 12px; }
:root[data-mz-console="atelier"] body.dialed-page .page-section.dialed-band .section-title,
:root[data-mz-console="atelier"] body.dialed-page .pricing-band .page-hero-title { text-wrap: balance; }
:root[data-mz-console="atelier"] body.dialed-page .gyms-launch-link { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; margin-top: 24px; }
:root[data-mz-console="atelier"] body.dialed-page .gyms-launch-link a { color: var(--hy-aqua-hi); text-decoration: underline; text-underline-offset: 4px; }
:root[data-mz-console="atelier"] body.dialed-page .page-section.dialed-band { padding-block: 112px; margin-block: 32px; }
:root[data-mz-console="atelier"] body.dialed-page .page-section.dialed-band :is(.section-title, .pv-lede) { color: var(--hy-ink); }
:root[data-mz-console="atelier"] body.dialed-page .page-section.dialed-band .pv-lede { color: var(--hy-muted); }
:root[data-mz-console="atelier"] body.dialed-page .dialed-band .pv-shot-frame.dialed-glass { padding: 10px; border-radius: 20px; overflow: visible; }
:root[data-mz-console="atelier"] body.dialed-page .dialed-band .pv-shot-frame.dialed-glass img { position: relative; z-index: 1; border-radius: 12px; display: block; width: 100%; height: auto; }
:root[data-mz-console="atelier"] body.dialed-page .dialed-band figure.pv-shot { background: none; border: 0; box-shadow: none; }
:root[data-mz-console="atelier"] body.dialed-page .dialed-band .pv-shot figcaption { color: var(--hy-muted); }
:root[data-mz-console="atelier"] body.dialed-page :is(.cta-strip, .help-footer-cta, .cd-offer).dialed-band { padding-block: 112px; margin-block: 32px 64px; }
:root[data-mz-console="atelier"] body.dialed-page .cta-strip.dialed-band .cta-strip-line { color: var(--hy-ink); }
@media (max-width: 767px) {
  :root[data-mz-console="atelier"] body.dialed-page .page-section.dialed-band,
  :root[data-mz-console="atelier"] body.dialed-page :is(.cta-strip, .help-footer-cta, .cd-offer).dialed-band { padding-block: 80px; }
}

/* PRICING. One band holds the head, the offer and the three tiers, so two
   dark bands never touch; the tiers are dark glass. Every word and every
   price is the page's own. */
:root[data-mz-console="atelier"] body.dialed-page .pricing-band.dialed-band { padding-block: 0 48px; margin-bottom: 40px; }
:root[data-mz-console="atelier"] body.dialed-page .pricing-band .page-hero { padding-top: 72px; background: none; }
:root[data-mz-console="atelier"] body.dialed-page .pricing-band #memberships { background: none; }
:root[data-mz-console="atelier"] body.dialed-page .pricing-band .offer-strip-in.dialed-glass { padding: 24px 28px; }
:root[data-mz-console="atelier"] body.dialed-page .pricing-band .offer-strip-in.dialed-glass :is(#offer-strip-h, .offer-strip-code, .offer-strip-clock, .o-num, .o-lab, .o-sep) { color: var(--hy-ink); }
:root[data-mz-console="atelier"] body.dialed-page .pricing-band .offer-strip-in.dialed-glass .offer-strip-code { border-color: var(--hy-boundary); background: var(--hy-sunk); }
:root[data-mz-console="atelier"] body.dialed-page .pricing-band .plat-card.dialed-glass { padding: 28px; }
:root[data-mz-console="atelier"] body.dialed-page .pricing-band .plat-card.dialed-glass :is(.plat-card-name, .plat-card-for, .plat-price-sub, .offer-plan-line) { color: var(--hy-muted); }
:root[data-mz-console="atelier"] body.dialed-page .pricing-band .plat-card.dialed-glass .plat-price-num { color: var(--hy-ink); font-variant-numeric: tabular-nums lining-nums; }
:root[data-mz-console="atelier"] body.dialed-page .pricing-band .plat-card.dialed-glass .plat-price-num span { color: var(--hy-muted); }
:root[data-mz-console="atelier"] body.dialed-page .pricing-band .plat-card.dialed-glass .plat-includes li { color: var(--hy-muted); }
:root[data-mz-console="atelier"] body.dialed-page .pricing-band .plat-card.dialed-glass .plat-includes li::before { color: var(--atelier-dark-aqua); }
:root[data-mz-console="atelier"] body.dialed-page .pricing-band .plat-card.dialed-glass :is(.plat-setup-chip, .gym-setup-chip) { color: var(--hy-ink); border-color: var(--hy-boundary); background: var(--hy-sunk); }
:root[data-mz-console="atelier"] body.dialed-page .pricing-band :is(.mz-trust-item) { color: var(--hy-ink); }
:root[data-mz-console="atelier"] body.dialed-page .pricing-band :is(.mz-trust-h) { color: var(--hy-ink); }
:root[data-mz-console="atelier"] body.dialed-page .pricing-band :is(.mz-trust-s, .mz-trust-ic) { color: var(--hy-muted); }

/* COACHES. The hero and the coach offer are bands; the directory and the
   trust card stay on the cream. The atmosphere sheet this page now links
   inks every .mono sage; the footer's one mono line keeps its own ink. */
:root[data-mz-console="atelier"] body.dialed-page .cd-foot .mono { color: inherit; }
:root[data-mz-console="atelier"] body.dialed-page .cd-hero.dialed-band { border-bottom: 0; }
:root[data-mz-console="atelier"] body.dialed-page .cd-offer.dialed-band :is(.cd-offer-h) { color: var(--hy-ink); }
:root[data-mz-console="atelier"] body.dialed-page .cd-offer.dialed-band .cd-offer-price { color: var(--hy-muted); }
:root[data-mz-console="atelier"] body.dialed-page .cd-offer.dialed-band .cd-offer-link { color: var(--hy-aqua-hi); }

/* HELP. The search and the audience chips sit on the band; the selected
   chip is the brighter frost with a solid white boundary, never a fill. */
:root[data-mz-console="atelier"] body.dialed-page .help-hero.dialed-band .help-search-input {
  background: var(--hy-sunk);
  border: 1px solid var(--hy-boundary);
  color: var(--hy-ink);
}
:root[data-mz-console="atelier"] body.dialed-page .help-hero.dialed-band .help-search-input::placeholder { color: var(--hy-muted); }
:root[data-mz-console="atelier"] body.dialed-page .help-hero.dialed-band .help-search-icon { color: var(--hy-muted); }
:root[data-mz-console="atelier"] body.dialed-page .help-hero.dialed-band .help-roles-label { color: var(--hy-muted); }
:root[data-mz-console="atelier"] body.dialed-page .help-hero.dialed-band .help-role-btn {
  background: var(--hy-card);
  border: 1px solid var(--hy-boundary);
  color: var(--hy-ink);
}
:root[data-mz-console="atelier"] body.dialed-page .help-hero.dialed-band .help-role-btn[aria-pressed="true"],
:root[data-mz-console="atelier"] body.dialed-page .help-hero.dialed-band .help-role-btn[aria-pressed="true"]:is(:hover, :focus-visible) {
  background: var(--hy-wash);
  border-color: var(--hy-aqua);
  color: var(--hy-ink);
}
:root[data-mz-console="atelier"] body.dialed-page .help-footer-cta.dialed-band :is(h2, p) { position: relative; }

/* GET STARTED. The page is one screen: a short sky band carries the mark
   and the stepper, and the form's cream card floats up over the band's rim
   on the tinted drop, so the form itself stays on its readable ground. */
:root[data-mz-console="atelier"] body.dialed-page .gs-ground.dialed-band { padding-block: 40px 104px; margin-top: 0; }
/* The band meets whatever sits above main (the offer bar, or the top of the
   page) with no cream gap: main gives up its top padding (28, 44 from 560),
   the band carries its own. */
:root[data-mz-console="atelier"] body.dialed-page main.gs { padding-top: 0; }
:root[data-mz-console="atelier"] body.dialed-page .gs-ground.dialed-band .gs-word { color: var(--hy-ink); }
:root[data-mz-console="atelier"] body.dialed-page .gs-ground.dialed-band .gs-mark-row { margin-bottom: 24px; }
:root[data-mz-console="atelier"] body.dialed-page .gs-ground.dialed-band .gs-steps { margin-bottom: 0; }
:root[data-mz-console="atelier"] body.dialed-page .gs-ground.dialed-band .gs-step { color: var(--hy-muted); border-bottom-color: color-mix(in srgb, var(--color-pure-white) 22%, transparent); }
:root[data-mz-console="atelier"] body.dialed-page .gs-ground.dialed-band .gs-step:is(.is-current, .is-done) { color: var(--hy-ink); border-bottom-color: var(--hy-ink); }
:root[data-mz-console="atelier"] body.dialed-page .gs-ground.dialed-band .gs-step-num { border-color: var(--hy-boundary); color: var(--hy-ink); background: var(--hy-sunk); }
:root[data-mz-console="atelier"] body.dialed-page .gs-ground.dialed-band .gs-step:is(.is-current, .is-done) .gs-step-num { background: var(--color-pure-white); color: var(--hy-ground); }
:root[data-mz-console="atelier"] body.dialed-page .gs .gs-panel {
  position: relative;
  z-index: 2;
  margin-top: -64px;
  background: var(--atelier-card);
  border: 1px solid var(--rule-soft);
  border-radius: 24px;
  padding: 36px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 6px rgba(11, 26, 28, 0.35), 0 30px 60px -18px rgba(11, 26, 28, 0.75);
}
@media (max-width: 767px) {
  :root[data-mz-console="atelier"] body.dialed-page .gs-ground.dialed-band { padding-block: 24px 88px; }
  :root[data-mz-console="atelier"] body.dialed-page .gs .gs-panel { padding: 24px 20px; border-radius: 20px; margin-top: -56px; }
}
:root[data-mz-console="atelier"] body.dialed-page .gs .gs-panel p > a.gs-btn:not(.gs-btn-primary) { width: auto; padding-left: 0; padding-right: 0; border: 0; display: inline-flex; align-items: center; min-height: 44px; }
:root[data-mz-console="atelier"] body.dialed-page .gs .gs-panel .gs-lede a:not([class]) { color: var(--marrow-accent); text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 3px; }
/* HELP, the gutter (Fable judge, item 9): the help column took 32px (20px on
   a phone) inside the 1280 cap while the nav takes 24px, so the hero and
   every section sat 8px right of the nav (4px left on a phone). One gutter. */
:root[data-mz-console="atelier"] body.dialed-page :is(.help-hero-inner, .help-section-inner, .help-no-results) { padding-left: var(--space-3); padding-right: var(--space-3); }
/* HELP, the closing band (Fable judge, item 3): full bleed like the pricing
   close. The shared closing card sheet gives it calc(100% - 64px) and a 1216
   cap; the band rule above takes both back. Its copy sits directly in the
   section, so it takes the nav gutter itself. */
:root[data-mz-console="atelier"] body.dialed-page .help-footer-cta.dialed-band { padding-left: max(var(--space-3), calc(50vw - var(--atelier-max-width) / 2 + var(--space-3))); padding-right: max(var(--space-3), calc(50vw - var(--atelier-max-width) / 2 + var(--space-3))); }
:root[data-mz-console="atelier"] body.dialed-page #lamella .lam-copy .btn-solid,
:root[data-mz-console="atelier"] body.dialed-page #lamella .lam-copy .btn-solid:is(:hover, :active, :focus-visible) { background: var(--hy-card); background-image: none; border-color: var(--hy-card); color: var(--hy-ink); }
:root[data-mz-console="atelier"] body.dialed-page .cd-hero.dialed-band .cd-lede { text-wrap: pretty; }

/* =====================================================================
   10. THE HYBRID ON THE LIGHT READING SECTIONS. The cream stays the
   reading ground (Edwin: light readable sections between); the cards on it
   take the hybrid's crisp 12 radius and the thin teal edge, and hover
   brings the edge to full, colour only. The class is written three times
   inside :is() to outrank the public sheet's card reset by specificity.
   ===================================================================== */
:root[data-mz-console="atelier"] body.dialed-page main :is(.card.card.card, .help-article-card.help-article-card.help-article-card, .cd-card.cd-card.cd-card, .cd-trust.cd-trust.cd-trust, .xb-card.xb-card.xb-card):not(.dialed-glass) {
  border: 1px solid color-mix(in srgb, var(--hy-edge) 40%, transparent);
  border-radius: 12px;
  transition: border-color 160ms ease;
}
@media (hover: hover) and (pointer: fine) {
  :root[data-mz-console="atelier"] body.dialed-page main :is(.card.card.card, .help-article-card.help-article-card.help-article-card, .cd-card.cd-card.cd-card, .xb-card.xb-card.xb-card):not(.dialed-glass):hover { border-color: var(--hy-edge); }
}
/* Get started: the real Marrow mark beside the wordmark, top left, and the
   page's body face is the hybrid's (its sheet names Inter literally). */
:root[data-mz-console="atelier"] body.dialed-page .gs { font-family: var(--sans); }
:root[data-mz-console="atelier"] body.dialed-page .gs-brand { display: inline-flex; align-items: center; gap: 10px; }
:root[data-mz-console="atelier"] body.dialed-page .gs-brand .logo-svg { width: 28px; height: 28px; }
:root[data-mz-console="atelier"] body.dialed-page .gs-brand .logo-svg svg { width: 28px; height: 28px; display: block; }

/* =====================================================================
   11. THE HYBRID, THE FABLE JUDGE'S ROUND (2026-10-05).
   ===================================================================== */
/* The nav's dark state: the one white pill on the first view is the
   band's, so the nav CTA takes the secondary recipe here. */
:root[data-mz-console="atelier"] body.dialed-page[data-mz-nav="dark"] :is(.nav, .cd-nav) .nav-cta,
:root[data-mz-console="atelier"] body.dialed-page[data-mz-nav="dark"] :is(.nav, .cd-nav) .nav-cta:is(:hover, :focus-visible) {
  background: var(--hy-card);
  border: 1px solid var(--hy-hairline);
  color: var(--hy-ink);
}
@media (hover: hover) and (pointer: fine) {
  :root[data-mz-console="atelier"] body.dialed-page[data-mz-nav="dark"] :is(.nav, .cd-nav) .nav-cta:hover { border-color: var(--hy-edge); }
}

/* Home, the product mocks on the light sections: hybrid cards, hairline
   rows, the lit row edged in aqua, sunk bars with the lit bar in aqua hi,
   and outline tags in place of the mint slabs. */
:root[data-mz-console="atelier"] body.dialed-page main :is(.shot, .chat) {
  background: var(--hy-card);
  border: 1px solid var(--hy-hairline);
  border-radius: 12px;
  color: var(--hy-ink);
}
:root[data-mz-console="atelier"] body.dialed-page main .shot-row { border-bottom-color: var(--hy-hairline); }
:root[data-mz-console="atelier"] body.dialed-page main .shot-row.on { border: 1px solid color-mix(in srgb, var(--marrow-accent-on-dark) 60%, transparent); }
:root[data-mz-console="atelier"] body.dialed-page main .shot-ok { color: var(--hy-aqua); }
:root[data-mz-console="atelier"] body.dialed-page main .shot-bars i { background: var(--hy-sunk); border: 1px solid var(--hy-hairline); border-bottom: 0; }
:root[data-mz-console="atelier"] body.dialed-page main .shot-bars i.on { background: var(--hy-aqua-hi); border-color: var(--hy-aqua-hi); }
:root[data-mz-console="atelier"] body.dialed-page main :is(.shot-now, .chat-act) {
  background: transparent;
  border: 1px solid currentColor;
  color: var(--hy-aqua);
  font-family: var(--mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.04em;
}
:root[data-mz-console="atelier"] body.dialed-page main :is(.shot-k, .shot-foot) { color: var(--hy-muted); }
/* The phone's own primary is the white pill with the band pill's aura. */
:root[data-mz-console="atelier"] body.dialed-page .bp-screen .bp-cta {
  background: var(--color-pure-white);
  color: var(--hy-ground);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55), 0 10px 34px -10px color-mix(in srgb, var(--hy-teal) 62%, transparent), 0 0 0 6px color-mix(in srgb, var(--hy-teal) 10%, transparent);
}

/* Home, the two role doors on the hybrid ground: the coach door weights
   the blue pool, the gym door the teal pool. Their shade cards go solid. */
:root[data-mz-console="atelier"] body.dialed-page .atl-door.dialed-door { background-color: var(--hy-ground); }
:root[data-mz-console="atelier"] body.dialed-page .atl-door.dialed-door[data-door="coach"] {
  background-image: radial-gradient(60% 70% at 88% 12%, color-mix(in srgb, var(--hy-pool-blue) 22%, transparent) 0%, transparent 72%), radial-gradient(50% 50% at 8% 100%, color-mix(in srgb, var(--hy-pool-teal) 10%, transparent) 0%, transparent 72%), linear-gradient(160deg, var(--hy-ground-hi) 0%, var(--hy-ground) 58%);
}
:root[data-mz-console="atelier"] body.dialed-page .atl-door.dialed-door[data-door="gym"] {
  background-image: radial-gradient(60% 70% at 12% 12%, color-mix(in srgb, var(--hy-pool-teal) 24%, transparent) 0%, transparent 72%), radial-gradient(50% 50% at 92% 100%, color-mix(in srgb, var(--hy-pool-blue) 8%, transparent) 0%, transparent 72%), linear-gradient(160deg, var(--hy-ground-hi) 0%, var(--hy-ground) 58%);
}
:root[data-mz-console="atelier"] body.dialed-page .atl-door.dialed-door .door-shade {
  background: var(--hy-card);
  border: 1px solid var(--hy-hairline);
  border-radius: 12px;
}
:root[data-mz-console="atelier"] body.dialed-page .atl-door.dialed-door .door-shade :is(p, .small) { color: var(--hy-muted); }
:root[data-mz-console="atelier"] body.dialed-page .atl-door.dialed-door .door-shade :is(.eyebrow, .mono) { color: var(--hy-aqua); }
:root[data-mz-console="atelier"] body.dialed-page .atl-door.dialed-door .frost.disc { background: var(--hy-sunk); border: 1px solid var(--hy-hairline); -webkit-backdrop-filter: none; backdrop-filter: none; }
:root[data-mz-console="atelier"] body.dialed-page .atl-door.dialed-door .frost.disc::before { display: none; }

/* Every footer on the hybrid ground. */
:root[data-mz-console="atelier"] body.dialed-page > footer,
:root[data-mz-console="atelier"] body.dialed-page .cd-foot {
  --paper-footer: var(--hy-ground);
  --rule-soft: var(--hy-hairline);
  background-color: var(--hy-ground);
}

/* Pricing, the "Included in your plan" chip: the accent at 12 percent, never
   the status green, with the hybrid card teal as its text (the accent itself
   measures 4.12 on that tint over the densest lattice line; #122A2C clears
   10). */
:root[data-mz-console="atelier"] body.dialed-page .xb-chip.is-included { background: color-mix(in srgb, var(--marrow-accent) 12%, transparent); color: var(--hy-card); }

/* Wrapping. The home hero eyebrow keeps its last word under 420px; every
   section title balances; the gyms titles drop their hard breaks on a phone. */
@media (max-width: 420px) {
  :root[data-mz-console="atelier"] body.dialed-page #hero .hero-copy .eyebrow { letter-spacing: 0.08em; text-wrap: balance; }
}
:root[data-mz-console="atelier"] body.dialed-page .section-title { text-wrap: balance; }
@media (max-width: 767px) {
  :root[data-mz-console="atelier"] body.dialed-page .section-title br { display: none; }
}

/* Get started: the mark sits top left on the band, on the site gutter at
   the site max width, and the panel heading balances. */
:root[data-mz-console="atelier"] body.dialed-page .gs-ground.dialed-band .gs-mark-row {
  margin-inline: calc(50% - 50vw);
  padding-inline: max(var(--space-3), calc(50vw - var(--atelier-max-width) / 2 + var(--space-3)));
}
:root[data-mz-console="atelier"] body.dialed-page .gs-panel h1 { text-wrap: balance; }

/* Coaches: the directory grid fits its cards, and the profile pill never wraps. */
:root[data-mz-console="atelier"] body.dialed-page .cd-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
:root[data-mz-console="atelier"] body.dialed-page .cd-card-cta { white-space: nowrap; }

/* =====================================================================
   12. THE FABLE JUDGE'S SECOND ROUND (2026-10-05).
   ===================================================================== */
/* Get started: "I already have an account. Sign in" reads as a link. */
:root[data-mz-console="atelier"] body.dialed-page .gs .gs-panel p > a.gs-btn:not(.gs-btn-primary) {
  color: var(--marrow-accent);
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 3px;
}
/* Gyms, the Connections card on a phone: the status chip drops under the
   text, aligned with it: the 40px icon box (public-visual.css .pv-ic) plus
   the 24px row gap, 64px. */
@media (max-width: 480px) {
  :root[data-mz-console="atelier"] body.dialed-page .pv-conn-row { flex-wrap: wrap; }
  /* The title column takes the full row beside the icon, so the chip has to
     wrap: public-visual.css gives .pv-conn-t flex 1 with min-width 0, which on
     its own squeezed the titles to one word a line beside the chip. */
  :root[data-mz-console="atelier"] body.dialed-page .pv-conn-row .pv-conn-t { flex: 1 1 calc(100% - 64px); }
  :root[data-mz-console="atelier"] body.dialed-page .pv-conn-row .pv-pill { flex: 0 0 auto; margin-left: 64px; }
}
/* One rule for the mark on a phone, on all six pages: under 480px only the
   disc shows. The nav links keep their aria-label "Marrow home"; the get
   started wordmark stays in the accessibility tree. */
@media (max-width: 480px) {
  :root[data-mz-console="atelier"] body.dialed-page :is(.nav .brand, .nav-brand, .cd-brand) > span { display: none; }
  :root[data-mz-console="atelier"] body.dialed-page .gs-brand .gs-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Pricing, each tier's offer line fits one line without losing a word: the
   "Limited time" disclosure is pinned by tests/marrow2026-once-per-account
   (every offer surface says it is a limited time offer), so the line is set
   in Public Sans 12, sentence case, in place of the wide uppercase mono. The
   gym tier's "Sign up by Oct 31 and we do the setup" line takes the same type. */
:root[data-mz-console="atelier"] body.dialed-page .pricing-band .plat-card .offer-plan-line {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
@media (min-width: 421px) {
  :root[data-mz-console="atelier"] body.dialed-page .pricing-band .plat-card .offer-plan-line { white-space: nowrap; }
}