/* =====================================================================
   MARROW ATELIER. THE PUBLIC WEBSITE TEMPLATE.  assets/css/atelier-public.css
   (2026-09-16, lane L6)

   One template for every public page (BLUEPRINT-SURFACES E), linked after
   assets/css/atelier.css and assets/css/atelier-components.css on every
   stamped page of the website and before the page's own sheet. It binds the
   hooks the public pages already carry (css/styles.css names them) to the
   Atelier system: the shared nav (.nav-brand, .nav-wordmark, .nav-links), the
   page head (.page-hero-*), the section head (.section-eyebrow, .section-title,
   .section-lede), the rhythm (.page-section, .container), the cta strip, the
   shared footer and the small set of places the two shared sheets cannot
   reach on a page that never loads the theme layer.

   The header of atelier.css states every convention this file follows: the
   :root[data-mz-console="atelier"] prefix on every rule so a tie is won on
   order and never on weight, tokens never literals (the one rgba here is white
   at an alpha, which is not a brand value), no combinator inside an :is(), no
   gradient, no shadow, no blur, no keyframe, no light. Where css/styles.css
   sets the parchment idiom (uppercase serif titles, mono tracked eyebrows, a
   teal cta strip), this sheet returns them to the Oura scale: the serif at 300
   in sentence case, mono 12 at 700, the strip a cream section with one bone
   black pill. No em or en dashes.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. THE SHARED NAV. The shell (glass, hairline, 64 tall) is atelier.css;
   this binds the public hooks it does not name.
   --------------------------------------------------------------------- */
:root[data-mz-console="atelier"] .nav-inner {
  padding-top: 0;
  padding-bottom: 0;
  justify-content: space-between;
}
:root[data-mz-console="atelier"] .nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  min-width: 44px;
  color: var(--ink-primary);
  text-decoration: none;
}
:root[data-mz-console="atelier"] .nav-brand svg { width: 32px; height: 32px; flex: none; }
/* THE BRAND NEVER SHRINKS. The nav row is flex, and the brand link gave way
   first when the row was tight, so at 320 on /terms/, /privacy/ and /founder/
   it was drawn 121 wide around 128 of mark and wordmark, the word running 7px
   past its own link (Gauntlet 2026-10-02). It keeps its size now, and at 374
   and below the wordmark steps from 24px to 18px and its gap from 12 to 8,
   which hands the row back more than the brand used to give by shrinking:
   at 320 the brand is 105, Join now stays on one line, and the longest label
   on the shared nav, Connect with Lamella on /lamella/connect/, keeps the two
   lines it had (at 20px it went to three). */
:root[data-mz-console="atelier"] .nav-brand { flex-shrink: 0; }
:root[data-mz-console="atelier"] .nav-wordmark {
  font-family: var(--serif);
  font-weight: var(--weight-serif);
  font-size: 24px;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1;
  color: var(--ink-primary);
}
/* After the rule above, so it wins on source order (see THE BRAND NEVER SHRINKS). */
@media (max-width: 374px) {
  :root[data-mz-console="atelier"] .nav-brand { gap: 8px; }
  :root[data-mz-console="atelier"] .nav-wordmark { font-size: 18px; }
}
:root[data-mz-console="atelier"] .nav-links a {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 16px;
  color: var(--ink-secondary);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--mz-dur-fast) ease, border-color var(--mz-dur-fast) ease;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  min-width: 24px;
}
:root[data-mz-console="atelier"] .nav-links a:hover { color: var(--ink-primary); }
:root[data-mz-console="atelier"] .nav-links a[aria-current="page"] { color: var(--ink-primary); border-bottom-color: var(--marrow-accent); }
/* The shared sheet sets the CTA in uppercase mono tracking; the Atelier pill is Inter 500 in sentence case. */
:root[data-mz-console="atelier"] .nav-cta { text-transform: none; letter-spacing: 0; }
:root[data-mz-console="atelier"] .nav-toggle {
  border: 1px solid var(--rule-strong);
  border-radius: 12px;
  color: var(--ink-primary);
  background: transparent;
}
:root[data-mz-console="atelier"] .nav-toggle:hover { border-color: var(--ink-primary); }
@media (max-width: 720px) {
  /* The slide down panel is a card under the glass bar. */
  :root[data-mz-console="atelier"] .nav-links {
    background: var(--paper-card);
    border-bottom: 1px solid var(--rule-soft);
  }
  :root[data-mz-console="atelier"] .nav-links a { border-bottom: 1px solid var(--rule-soft); min-height: 44px; }
  :root[data-mz-console="atelier"] .nav-links a:last-child { border-bottom: none; }
}

/* ---------------------------------------------------------------------
   2. THE PAGE HEAD AND THE SECTION HEAD. Eyebrow mono 12 at 700 in the
   accent, h1 serif 300 at 48 (40 under 768) with one italic word, lede 16
   secondary in a 720 column, all left aligned on the canvas (BLUEPRINT F).
   --------------------------------------------------------------------- */
:root[data-mz-console="atelier"] .page-hero {
  background: transparent;
  background-image: none;
  padding: var(--space-5) 0 var(--space-3);
  text-align: left;
}
:root[data-mz-console="atelier"] :is(.page-hero-eyebrow, .section-eyebrow, .included-band-eyebrow, .hub-eyebrow, .tc-card-eyebrow, .vi-section-eyebrow, .cx-ask-eyebrow, .profile-eyebrow) {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--marrow-accent);
  margin-bottom: 12px;
}
:root[data-mz-console="atelier"] :is(.page-hero-title, .section-title, .cx-h2, .vi-section-h) {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 48px;
  line-height: 1.25;
  letter-spacing: -1.2px;
  text-transform: none;
  color: var(--ink-primary);
  max-width: 24ch;
  margin: 0 0 16px;
}
:root[data-mz-console="atelier"] :is(.page-hero-title, .section-title, .cx-h2, .vi-section-h) :is(em, .em, .italic, .red) {
  font-style: italic;
  font-weight: var(--weight-serif);
  color: inherit;
  text-decoration: none;
}
:root[data-mz-console="atelier"] :is(.page-hero-lede, .section-lede, .cx-lede) {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-secondary);
  max-width: 720px;
  margin: 0;
}
:root[data-mz-console="atelier"] :is(.page-hero-lede, .section-lede) strong { color: var(--ink-primary); font-weight: 500; }
:root[data-mz-console="atelier"] .page-section { padding: calc(var(--atelier-section-gap) / 2) 0; }
:root[data-mz-console="atelier"] .container { max-width: var(--atelier-max-width); padding: 0 var(--space-3); }
@media (max-width: 767px) {
  :root[data-mz-console="atelier"] :is(.page-hero-title, .section-title, .cx-h2, .vi-section-h) { font-size: 40px; letter-spacing: -1px; }
  :root[data-mz-console="atelier"] .page-hero { padding-top: var(--space-4); }
}

/* ---------------------------------------------------------------------
   3. CARDS, BANDS AND THE READING COLUMN.
   --------------------------------------------------------------------- */
:root[data-mz-console="atelier"] :is(.mz-card, .card, .plat-card, .hub-card, .tc-card, .cx-card, .xb-card, .build-card, .sec-card, .legal-card, .trust-card, .st-card) {
  background: var(--paper-card);
  background-image: none;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-card);
  box-shadow: none;
  color: var(--ink-primary);
}
:root[data-mz-console="atelier"] :is(.mz-card--lift, .mz-card--lift:hover) { transform: none; box-shadow: none; }
:root[data-mz-console="atelier"] :is(.included-band, .plat-included, .band-nested) {
  background: var(--paper-nested);
  background-image: none;
  border: 0;
  border-radius: var(--radius-card);
}
:root[data-mz-console="atelier"] .reading,
:root[data-mz-console="atelier"] .legal-body,
:root[data-mz-console="atelier"] .prose { max-width: 720px; }
:root[data-mz-console="atelier"] :is(.reading, .legal-body, .prose) :is(p, li) { font-size: 16px; line-height: 1.6; color: var(--ink-secondary); }
:root[data-mz-console="atelier"] :is(.reading, .legal-body, .prose) h2 {
  font-family: var(--serif);
  font-weight: var(--weight-serif);
  font-size: 24px;
  line-height: 1.38;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-primary);
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule-soft);
  margin: var(--space-4) 0 var(--space-2);
}
:root[data-mz-console="atelier"] :is(.reading, .legal-body, .prose) a { color: var(--marrow-accent); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }

/* ---------------------------------------------------------------------
   4. THE CTA STRIP. Teal never fills a surface, so the strip is a cream
   section with a hairline above it, a serif line and one bone black pill.
   --------------------------------------------------------------------- */
:root[data-mz-console="atelier"] .cta-strip {
  background: transparent;
  background-image: none;
  color: var(--ink-primary);
  border-top: 1px solid var(--rule-soft);
  padding: var(--atelier-section-gap) 0;
  text-align: left;
}
:root[data-mz-console="atelier"] .cta-strip-line {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.25;
  letter-spacing: -1px;
  text-transform: none;
  color: var(--ink-primary);
  max-width: 24ch;
  margin-bottom: var(--space-3);
}
:root[data-mz-console="atelier"] .cta-strip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 14px 28px;
  border-radius: 999px;
  background: var(--bone-black);
  color: var(--bone-white);
  border: 1px solid var(--bone-black);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  transition: background-color var(--mz-dur-fast) ease;
}
:root[data-mz-console="atelier"] .cta-strip-btn:hover { background: var(--atelier-onyx); border-color: var(--atelier-onyx); transform: none; }
/* Secondary actions written for the old dark strip are ghosts on the cream now. */
:root[data-mz-console="atelier"] :is(.btn-secondary--on-dark, .btn-primary--on-dark),
:root[data-mz-console="atelier"] .cta-strip .btn-secondary {
  background: transparent;
  color: var(--ink-secondary);
  border: 1px solid var(--ink-secondary);
}
:root[data-mz-console="atelier"] :is(.btn-secondary--on-dark, .btn-primary--on-dark):hover,
:root[data-mz-console="atelier"] .cta-strip .btn-secondary:hover { color: var(--ink-primary); border-color: var(--ink-primary); background: transparent; }

/* ---------------------------------------------------------------------
   5. THE SHARED FOOTER. atelier.css paints the ground, the canvas ink and
   the accent on dark links; this sets the type on the public hooks.
   --------------------------------------------------------------------- */
:root[data-mz-console="atelier"] :where(body) > footer { padding: var(--space-6) 0 var(--space-4); }
:root[data-mz-console="atelier"] .footer-wordmark {
  font-family: var(--serif);
  font-weight: var(--weight-serif);
  font-size: 24px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--paper-canvas);
}
:root[data-mz-console="atelier"] .footer-wordmark sup { color: var(--paper-canvas); }
:root[data-mz-console="atelier"] .footer-bio { color: var(--paper-canvas); font-size: 14px; line-height: 1.5; letter-spacing: 0.35px; }
:root[data-mz-console="atelier"] .footer-col-title {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--paper-canvas);
}
:root[data-mz-console="atelier"] .footer-col a { color: var(--marrow-accent-on-dark); font-size: 14px; }
:root[data-mz-console="atelier"] .footer-col a:hover { color: var(--color-pure-white); }
:root[data-mz-console="atelier"] .footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--paper-canvas);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.5px;
  line-height: 1.5;
}
:root[data-mz-console="atelier"] .footer-bottom a { color: var(--marrow-accent-on-dark); }

/* ---------------------------------------------------------------------
   6. THE HOME. The one italic pivot on the hero panel is white, because the
   sky mood's last stop IS the accent and a teal word there measures 1.0.
   --------------------------------------------------------------------- */
:root[data-mz-console="atelier"] .hero-copy .display em { color: var(--color-pure-white); }

/* ---------------------------------------------------------------------
   7. TABLES ON THE PUBLIC PAGES (legal/subprocessors, security).
   --------------------------------------------------------------------- */
:root[data-mz-console="atelier"] .public-table { width: 100%; border-collapse: collapse; }
:root[data-mz-console="atelier"] .public-table th {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule-strong);
}
:root[data-mz-console="atelier"] .public-table td {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-primary);
  padding: 14px 16px;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
}
:root[data-mz-console="atelier"] .public-table tbody tr:nth-child(even) td { background: var(--paper-nested); }

/* ---------------------------------------------------------------------
   8. THE OTHER SHARED BUTTON HOOKS. css/styles.css sets these in uppercase
   tracked type with square corners; on the Atelier every action is a pill in
   sentence case. The filled ones are bone black, the rest ghosts.
   --------------------------------------------------------------------- */
:root[data-mz-console="atelier"] :is(.btn-primary, .btn-secondary, .btn-primary-light, .submit-btn, .cta-strip-btn, .nav-cta) {
  text-transform: none;
  letter-spacing: 0;
  border-radius: 999px;
}
:root[data-mz-console="atelier"] :is(.btn-primary-light, .submit-btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 14px 28px;
  background: var(--bone-black);
  background-image: none;
  color: var(--bone-white);
  border: 1px solid var(--bone-black);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 16px;
  box-shadow: none;
  transform: none;
  transition: background-color var(--mz-dur-fast) ease;
}
:root[data-mz-console="atelier"] :is(.btn-primary-light, .submit-btn):hover { background: var(--atelier-onyx); border-color: var(--atelier-onyx); color: var(--mzv-onfill); transform: none; }
:root[data-mz-console="atelier"] :is(.btn-primary-light, .submit-btn):disabled { background: transparent; border-color: var(--rule-strong); color: var(--ink-tertiary); cursor: not-allowed; }

/* ---------------------------------------------------------------------
   9. THE DASHBOARD PREVIEW on /coach/ and /gyms/ (css/styles.css .dash-*).
   The console it pictures is light canvas now, so the mock is a hairline
   card carrying the coach console's inks, not a black slab.
   --------------------------------------------------------------------- */
:root[data-mz-console="atelier"] .dash-preview {
  background: var(--paper-card);
  background-image: none;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-elevated);
  box-shadow: none;
  color: var(--ink-primary);
}
:root[data-mz-console="atelier"] .dash-preview-bar { border-bottom-color: var(--rule-soft); }
:root[data-mz-console="atelier"] .dash-dot { background: var(--rule-strong); }
:root[data-mz-console="atelier"] .dash-preview-url { color: var(--ink-muted); }
:root[data-mz-console="atelier"] .dash-sidebar { background: var(--paper-nested); border-radius: var(--radius-card); }
:root[data-mz-console="atelier"] .dash-sidebar-section { font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--ink-muted); }
:root[data-mz-console="atelier"] .dash-sidebar-item { color: var(--ink-secondary); }
:root[data-mz-console="atelier"] .dash-sidebar-item:hover { background: transparent; color: var(--ink-primary); }
:root[data-mz-console="atelier"] .dash-sidebar-item.active { background: transparent; color: var(--ink-primary); border-left: 3px solid var(--marrow-accent); }
:root[data-mz-console="atelier"] .dash-greeting { font-family: var(--serif); font-weight: 400; font-size: 32px; letter-spacing: -1px; text-transform: none; color: var(--ink-primary); }
:root[data-mz-console="atelier"] :is(.dash-subtitle, .dash-alert-detail, .dash-table-row) { color: var(--ink-secondary); }
:root[data-mz-console="atelier"] .dash-alert { background: var(--paper-nested); border: 0; border-left: 3px solid var(--marrow-accent); border-radius: var(--radius-card); }
:root[data-mz-console="atelier"] :is(.dash-alert-eyebrow, .dash-metric-label, .dash-table-row.header) { font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--ink-muted); }
:root[data-mz-console="atelier"] .dash-alert-title { color: var(--ink-primary); }
:root[data-mz-console="atelier"] :is(.dash-metric, .dash-table) { background: var(--paper-nested); border: 0; border-radius: var(--radius-card); }
:root[data-mz-console="atelier"] .dash-metric.featured { background: var(--paper-nested); border: 1px solid var(--marrow-accent); }
:root[data-mz-console="atelier"] .dash-metric-value,
:root[data-mz-console="atelier"] .dash-metric.featured .dash-metric-value { font-family: var(--serif); font-weight: 400; color: var(--ink-primary); font-variant-numeric: tabular-nums; }
:root[data-mz-console="atelier"] .dash-table-row { border-bottom: 1px solid var(--rule-soft); }
:root[data-mz-console="atelier"] .dash-table-row.flagged { color: var(--ink-primary); }
:root[data-mz-console="atelier"] .dash-table-row.header { background: transparent; }

/* ---------------------------------------------------------------------
   10. CARD HEADS THE SHARED SHEET SETS IN UPPERCASE SERIF. Heading sm is
   the serif at 400, 24, in sentence case.
   --------------------------------------------------------------------- */
:root[data-mz-console="atelier"] :is(.apply-form-title, .card-title-serif, .form-title) {
  font-family: var(--serif);
  font-weight: var(--weight-serif);
  font-size: 24px;
  line-height: 1.38;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-primary);
}

/* ---------------------------------------------------------------------
   11. HEADINGS IN SENTENCE CASE, CARD TITLES AT INTER 500 18. The parchment
   idiom set every serif heading in uppercase; the Oura scale never does. A
   heading inside any card hook is a card title (DESIGN-SYSTEM 5).
   --------------------------------------------------------------------- */
:root[data-mz-console="atelier"] :is(h1, h2, h3, h4, h5) { text-transform: none; }
:root[data-mz-console="atelier"] :is(.card, .mz-card, [class*="-card"]) :is(h3, h4) {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--ink-primary);
}

/* ---------------------------------------------------------------------
   12. THE LEGAL READING TEMPLATE (BLUEPRINT E2): h2 serif 400 at 24 over a
   hairline, h3 Inter 500 at 18, body 16 at 1.6 leading in the secondary ink,
   lists indented once. privacy/ and terms/ carry these classes in place of
   the inline styles they shipped with.
   --------------------------------------------------------------------- */
:root[data-mz-console="atelier"] .legal-h2 {
  font-family: var(--serif);
  font-weight: var(--weight-serif);
  font-size: 24px;
  line-height: 1.38;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-primary);
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule-soft);
  margin: var(--space-4) 0 var(--space-2);
}
:root[data-mz-console="atelier"] .legal-h3 { font-family: var(--sans); font-weight: 500; font-size: 18px; line-height: 1.5; text-transform: none; letter-spacing: 0; color: var(--ink-primary); margin: var(--space-3) 0 var(--space-1); }
:root[data-mz-console="atelier"] .legal-p, :root[data-mz-console="atelier"] .legal-ul { font-family: var(--sans); font-size: 16px; line-height: 1.6; color: var(--ink-secondary); margin-bottom: var(--space-2); max-width: 720px; }
:root[data-mz-console="atelier"] .legal-p-end { margin-bottom: var(--space-3); }
:root[data-mz-console="atelier"] .legal-ul { padding-left: var(--space-3); }
:root[data-mz-console="atelier"] .legal-ul li { margin-bottom: 6px; }
:root[data-mz-console="atelier"] :is(.legal-p, .legal-ul) a { color: var(--marrow-accent); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; overflow-wrap: anywhere; }
:root[data-mz-console="atelier"] :is(.legal-p, .legal-ul) strong { color: var(--ink-primary); font-weight: 500; }

/* ---------------------------------------------------------------------
   13. SECTION RHYTHM. css/styles.css pads every bare section by 128; on the
   Oura scale sections sit 80 apart, so every section carries half the gap
   on each side (a page's own prefixed rule, later in order, may set its own).
   --------------------------------------------------------------------- */
:root[data-mz-console="atelier"] section { padding-block: calc(var(--atelier-section-gap) / 2); }

/* =====================================================================
   14 and on. LANE L6b: THE E3 AND E4 PAGE FAMILIES (help, articles, learn,
   community, method, mission, roadmap, press, and everything else), appended
   to L6a's template on 2026-09-16. Same conventions. Where L6a binds a hook
   above, that rule stands; these bind the reading template's generic
   elements, the card grid index by the -card suffix the page families share,
   the page family pills by name, the closing bands as hairline cards, the
   footer's legacy six cell mark, and the phone wraps. No em or en dashes.
   ===================================================================== */
/* Under 480 a long localized nav label beside the injected language switch overflowed the row at 360 (pt 378px); the pill and every panel pill may wrap. */
@media (max-width: 480px) {
  :root[data-mz-console="atelier"] .nav-inner { gap: 8px; }
  :root[data-mz-console="atelier"] .nav .nav-cta { white-space: normal; text-align: center; line-height: 1.15; font-size: 13px; padding: 6px 12px; max-width: 34vw; }
  :root[data-mz-console="atelier"] main .pill { white-space: normal; text-align: center; line-height: 1.15; height: auto; min-height: 44px; padding-top: 8px; padding-bottom: 8px; }
}
/* ---------------------------------------------------------------------
   2. THE PAGE HEAD ON THE CANVAS. The reading template: eyebrow mono 12 700
   in the accent, h1 serif 300 at 40 with one italic word, lede 16 in the
   secondary ink, the column at 720, left aligned. Chrome that sits on the
   canvas reads --ink-primary, --ink-secondary, --ink-muted or the accent
   only (BACKGROUND.md 4).
   --------------------------------------------------------------------- */
:root[data-mz-console="atelier"] .page-hero { text-align: left; padding: 64px 0 40px; background: transparent; background-image: none; }
:root[data-mz-console="atelier"] main h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 3vw + 20px, 48px);
  line-height: 1.25;
  letter-spacing: -1px;
  text-transform: none;
  color: var(--ink-primary);
  margin-left: 0;
  margin-right: 0;
  max-width: 720px;
  background: none;
  -webkit-text-fill-color: currentColor;
}
:root[data-mz-console="atelier"] main h1 em,
:root[data-mz-console="atelier"] main h1 i { font-style: italic; font-weight: var(--weight-serif); color: inherit; }
:root[data-mz-console="atelier"] .atmo h1 em,
:root[data-mz-console="atelier"] .atmo h1 i,
:root[data-mz-console="atelier"] .atmo h2 em { color: var(--color-pure-white); }
:root[data-mz-console="atelier"] main h2,
:root[data-mz-console="atelier"] .article-body h2 {
  font-family: var(--serif);
  font-weight: var(--weight-serif);
  font-size: clamp(22px, 1vw + 17px, 24px);
  line-height: 1.38;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-primary);
}
:root[data-mz-console="atelier"] main h3,
:root[data-mz-console="atelier"] main h4,
:root[data-mz-console="atelier"] .article-body h3,
:root[data-mz-console="atelier"] .article-body h4 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-primary);
}
:root[data-mz-console="atelier"] main [class*="eyebrow"],
:root[data-mz-console="atelier"] main [class*="kicker"],
:root[data-mz-console="atelier"] main [class$="-tag"],
:root[data-mz-console="atelier"] main [class*="breadcrumb"],
:root[data-mz-console="atelier"] .article-back,
:root[data-mz-console="atelier"] .article-meta {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--marrow-accent);
  background: transparent;
  border: 0;
}
/* On an atmosphere panel a label is white at 0.85 (DESIGN-SYSTEM 11.7; mint as type measures 1.75 on the sky mood's worst pixel); the shade and the frost carry the panel padding the boards drew inline. */
:root[data-mz-console="atelier"] .atmo [class*="eyebrow"],
:root[data-mz-console="atelier"] .atmo [class*="kicker"] { color: rgba(255, 255, 255, 0.85); }
:root[data-mz-console="atelier"] .atl-shade { padding: 24px 28px; }
:root[data-mz-console="atelier"] .frost:not(.disc) { padding: 28px; }
:root[data-mz-console="atelier"] main .card [class*="eyebrow"],
:root[data-mz-console="atelier"] main [class$="-card"] [class*="eyebrow"],
:root[data-mz-console="atelier"] main [class$="-card-eyebrow"],
:root[data-mz-console="atelier"] main [class$="-card-tag"],
:root[data-mz-console="atelier"] .article-meta,
:root[data-mz-console="atelier"] .article-back { color: var(--ink-muted); }
:root[data-mz-console="atelier"] .article-back:hover { color: var(--ink-primary); }
:root[data-mz-console="atelier"] .page-hero-lede,
:root[data-mz-console="atelier"] .section-lede,
:root[data-mz-console="atelier"] main [class$="-lede"],
:root[data-mz-console="atelier"] main [class*="-lede "],
:root[data-mz-console="atelier"] main [class$="-sub"],
:root[data-mz-console="atelier"] main [class*="-sub "],
:root[data-mz-console="atelier"] main [class$="-subtitle"] {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--ink-secondary);
  max-width: 720px;
  margin-left: 0;
  margin-right: 0;
}
:root[data-mz-console="atelier"] main p { font-family: var(--sans); font-size: 16px; line-height: 1.6; }
:root[data-mz-console="atelier"] main p strong,
:root[data-mz-console="atelier"] main li strong { font-weight: 550; color: var(--ink-primary); }
:root[data-mz-console="atelier"] .page-section { padding: var(--atelier-section-gap) 0; }

/* ---------------------------------------------------------------------
   3. THE READING COLUMN. Articles, help articles, learn lessons, the method,
   the mission, the roadmap and press: 720 wide, Inter 400 16 at 1.6 in soft
   charcoal (DESIGN-SYSTEM 11.1), h2 serif 400 at 24, hairline rules between
   sections, underline links in the accent, screenshots at radius 8 with a
   1px hairline.
   --------------------------------------------------------------------- */
:root[data-mz-console="atelier"] :is(.article, .article-body, .article-header, .help-summary, .help-note, .help-related, .pk-prose, .mission-block, .prose, .legal-body, .reading) { max-width: 720px; margin-left: 0; margin-right: 0; }
:root[data-mz-console="atelier"] .article-body { font-family: var(--sans); font-size: 16px; line-height: 1.6; color: var(--color-soft-charcoal); padding-top: 40px; }
:root[data-mz-console="atelier"] .article-body p:first-of-type { font-size: 18px; line-height: 1.5; color: var(--ink-primary); }
:root[data-mz-console="atelier"] .article-body h2 { margin: 48px 0 16px; padding-top: 32px; border-top: 1px solid var(--rule-soft); }
:root[data-mz-console="atelier"] .article-body h3 { margin: 32px 0 12px; }
:root[data-mz-console="atelier"] .article-body h4 { font-size: 16px; }
:root[data-mz-console="atelier"] .article-body a,
:root[data-mz-console="atelier"] main .container p a,
:root[data-mz-console="atelier"] main li a { color: var(--marrow-accent); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
:root[data-mz-console="atelier"] .article-body a:hover,
:root[data-mz-console="atelier"] main .container p a:hover,
:root[data-mz-console="atelier"] main li a:hover { color: var(--marrow-accent); text-decoration-thickness: 2px; }
:root[data-mz-console="atelier"] .article-body .article-list li::before { background: var(--rule-strong); }
:root[data-mz-console="atelier"] .article-body hr.article-rule { background: var(--rule-soft); width: 100%; margin: 40px 0; }
:root[data-mz-console="atelier"] .article-body code { background: var(--paper-nested); border-radius: 4px; color: var(--ink-primary); }
:root[data-mz-console="atelier"] :is(.article-header, .journal-hero, .help-hero, .learn-hero, .com-hero, .mission-hero, .pk-hero) { background: transparent; background-image: none; border-bottom: 0; padding: 64px 0 40px; text-align: left; }
:root[data-mz-console="atelier"] .help-screenshot-img,
:root[data-mz-console="atelier"] main figure,
:root[data-mz-console="atelier"] main img[class*="shot"] { border: 1px solid var(--rule-soft); border-radius: 8px; overflow: hidden; background: var(--paper-card); box-shadow: none; }
:root[data-mz-console="atelier"] .help-screenshot-img figcaption {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--ink-muted);
  background: var(--paper-card);
  border-top: 1px solid var(--rule-soft);
}
:root[data-mz-console="atelier"] :is(.help-step, .mission-block, .stage-block, .pk-section, .help-related) { border-color: var(--rule-soft); }

/* ---------------------------------------------------------------------
   4. THE CARD GRID INDEX. Hairline cards on the card ground, radius 8,
   padding 24, no shadow, no lift; kicker mono 12, title Inter 500 18, meta
   14 in the muted ink. Bound to the site's card hooks by name and by the
   -card suffix the page families share.

   THE CARVE OUT, 2026-09-16 (website integration). This block is the CREAM
   card. An atmosphere surface is not one: .frost, .ink and .atmo carry their
   own ground from atelier-atmo.css (DESIGN-SYSTEM 11.2 to 11.4), and every
   word inside them is white. Without the carve out the -card suffix caught
   .frost.hero-card on the seven pages that ship the hero panel and repainted
   it bone white, which put white text on cream at 1.04 and made the whole
   card unreadable. Measured on this tree: every card hook inside an .atmo
   also carries .frost, so the three names below cover the class completely,
   and tests/atelier-contrast-floor.test.mjs holds them to it.
   --------------------------------------------------------------------- */
:root[data-mz-console="atelier"] main [class$="-card"]:not(.frost):not(.ink):not(.atmo),
:root[data-mz-console="atelier"] main [class*="-card "]:not(.frost):not(.ink):not(.atmo),
:root[data-mz-console="atelier"] main .card:not(.frost):not(.ink):not(.atmo),
:root[data-mz-console="atelier"] main .pillar:not(.frost):not(.ink):not(.atmo),
:root[data-mz-console="atelier"] main .fc-pillar:not(.frost):not(.ink):not(.atmo),
:root[data-mz-console="atelier"] main .obj:not(.frost):not(.ink):not(.atmo),
:root[data-mz-console="atelier"] main .door:not(.frost):not(.ink):not(.atmo) {
  background: var(--paper-card);
  background-image: none;
  border: 1px solid var(--rule-soft);
  border-radius: 8px;
  padding: 24px;
  box-shadow: none;
  color: var(--ink-primary);
  transform: none;
  transition: border-color var(--mz-dur-fast) ease;
}
:root[data-mz-console="atelier"] main :is([class$="-card"], .card, .pillar, .fc-pillar, .door):not(.frost):not(.ink):not(.atmo):is(:hover, :focus-within) { background: var(--paper-card); border-color: var(--rule-strong); box-shadow: none; transform: none; }
:root[data-mz-console="atelier"] main :is([class$="-card"], .card, .pillar, .fc-pillar, .door):not(.frost):not(.ink):not(.atmo)::before,
:root[data-mz-console="atelier"] main :is([class$="-card"], .card, .pillar, .fc-pillar, .door):not(.frost):not(.ink):not(.atmo)::after { background: none; background-image: none; box-shadow: none; }
:root[data-mz-console="atelier"] main .article-grid { gap: 16px; background: transparent; border: 0; }
:root[data-mz-console="atelier"] main :is(.article-grid, .help-article-grid, .learn-courses-grid, .values-grid, .feature-list, .never-grid, .trust-grid, .pk-trust-grid, .pk-quote-grid, .com-inst-grid, .com-events-grid, .com-comm-grid) { display: grid; gap: 16px; }
@media (min-width: 720px) {
  :root[data-mz-console="atelier"] main :is(.article-grid, .help-article-grid, .learn-courses-grid, .values-grid, .never-grid, .trust-grid, .pk-trust-grid, .pk-quote-grid, .com-inst-grid, .com-events-grid, .com-comm-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  :root[data-mz-console="atelier"] main :is(.help-article-grid, .learn-courses-grid, .values-grid, .never-grid, .trust-grid, .pk-trust-grid, .com-inst-grid, .com-events-grid, .com-comm-grid) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
:root[data-mz-console="atelier"] main [class$="-card-title"],
:root[data-mz-console="atelier"] main [class$="-card-h"],
:root[data-mz-console="atelier"] main .card h3,
:root[data-mz-console="atelier"] main [class$="-card"] h3,
:root[data-mz-console="atelier"] main .pillar-name,
:root[data-mz-console="atelier"] main .fc-pillar-h {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-primary);
  margin-bottom: 8px;
}
:root[data-mz-console="atelier"] main :is([class$="-card-desc"], [class$="-card-body"], [class$="-card-summary"], [class$="-card-meta"], [class$="-card-why"], .pillar-desc, .pillar-detail, .fc-pillar-body) { font-family: var(--sans); font-size: 14px; line-height: 1.5; letter-spacing: 0.35px; color: var(--ink-secondary); }
:root[data-mz-console="atelier"] main :is([class$="-card-cta"], [class$="-card-link"]) {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--marrow-accent);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
:root[data-mz-console="atelier"] main :is([class$="-card-num"], .pillar-num, .fc-pillar-num) {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink-primary);
  background: none;
  -webkit-text-fill-color: currentColor;
}

/* ---------------------------------------------------------------------
   5. PILLS ON THE WEBSITE HOOKS. The page family primaries are the filled
   pill (bone black, onfill ink) and every second action is the ghost; caps
   and tracking from css/styles.css come off. The nav's Join now is the one
   filled pill of the chrome; a page body carries at most one more, its own
   next action, and never above the fold on the reading template.
   --------------------------------------------------------------------- */
:root[data-mz-console="atelier"] :is(.btn-primary, .btn-solid, .btn-secondary, .btn-ghost, .btn-quiet, .btn, .help-footer-help-btn, .help-footer-cta-btn, .article-cta-btn, .com-btn, .fc-btn, .fc-btn-primary, .fc-btn-ghost, .fc-cta-primary, .fc-cta-secondary, .ent-btn-primary, .ent-btn-ghost, .mia-cta-primary, .mia-cta-secondary, .mig-cta-primary, .mig-cta-secondary, .mig-cta-button, .mig-cta-bottom-btn, .mig-hero-cta, .vs-cta-primary, .vs-cta-secondary, .v-cta-primary, .v-cta-secondary, .cv-cta-primary, .cv-cta-secondary, .wn-cta-primary, .wn-cta-secondary, .pk-cta-primary, .pk-cta-secondary, .pk-pdf-cta, .tier-stack-cta, .tier-stack-cta-light, .g-cta-primary, .g-cta-secondary, .submit-btn, .signup-cta, .lm-cta, .course-landing-cta, .course-landing-cta-secondary, .mkt-cta-coach-btn, .prop-btn-dark, .gt-btn, .gt-btn-quiet, .a-cta, .learn-journal-pointer-cta, .learn-courses-empty-cta, .learn-login-wall-cta, .mkt-empty-cta, .refer-copy-btn, .offer-cta, .founder-signature-cta, .look-tile-cta, .d-trust-cta, .cd-trust-cta, .cd-offer-cta, .d-empty-cta, .cd-empty-cta, .mr-card-cta, .mr-card-cta-secondary, .mr-ath-btn, .gen-btn, .gate-btn, .close-btn, .lesson-player-complete-btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 14px 28px;
  border-radius: 999px;
  background: transparent;
  background-image: none;
  color: var(--ink-secondary);
  border: 1px solid var(--ink-secondary);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  box-shadow: none;
  transform: none;
  transition: background-color var(--mz-dur-fast) ease, border-color var(--mz-dur-fast) ease, color var(--mz-dur-fast) ease;
}
:root[data-mz-console="atelier"] :is(.btn-secondary, .btn-ghost, .btn-quiet, .btn, .help-footer-help-btn, .help-footer-cta-btn, .article-cta-btn, .com-btn, .fc-btn, .fc-btn-ghost, .fc-cta-secondary, .ent-btn-ghost, .mia-cta-secondary, .mig-cta-secondary, .mig-cta-bottom-btn, .vs-cta-secondary, .v-cta-secondary, .cv-cta-secondary, .wn-cta-secondary, .pk-cta-secondary, .tier-stack-cta-light, .g-cta-secondary, .course-landing-cta-secondary, .gt-btn-quiet, .learn-journal-pointer-cta, .learn-courses-empty-cta, .mkt-empty-cta, .mr-card-cta-secondary, .d-empty-cta, .cd-empty-cta, .close-btn):is(:hover, :active) {
  color: var(--ink-primary);
  border-color: var(--ink-primary);
  background: transparent;
  background-image: none;
  box-shadow: none;
  transform: none;
}
/* The page family primaries: the filled pill, written AFTER the ghost base at equal weight so it wins on order. */
:root[data-mz-console="atelier"] :is(.btn-primary, .btn-solid, .fc-btn-primary, .fc-cta-primary, .ent-btn-primary, .mia-cta-primary, .mig-cta-primary, .mig-cta-button, .mig-hero-cta, .vs-cta-primary, .v-cta-primary, .cv-cta-primary, .wn-cta-primary, .pk-cta-primary, .pk-pdf-cta, .tier-stack-cta, .g-cta-primary, .submit-btn, .signup-cta, .lm-cta, .course-landing-cta, .mkt-cta-coach-btn, .prop-btn-dark, .gt-btn, .a-cta, .offer-cta, .founder-signature-cta, .d-trust-cta, .cd-trust-cta, .cd-offer-cta, .mr-card-cta, .mr-ath-btn, .gen-btn, .gate-btn, .lesson-player-complete-btn, .learn-login-wall-cta, .refer-copy-btn),
:root[data-mz-console="atelier"] .com-btn.primary { background: var(--bone-black); background-image: none; color: var(--bone-white); border: 1px solid var(--bone-black); }
:root[data-mz-console="atelier"] :is(.btn-primary, .btn-solid, .fc-btn-primary, .fc-cta-primary, .ent-btn-primary, .mia-cta-primary, .mig-cta-primary, .mig-cta-button, .mig-hero-cta, .vs-cta-primary, .v-cta-primary, .cv-cta-primary, .wn-cta-primary, .pk-cta-primary, .pk-pdf-cta, .tier-stack-cta, .g-cta-primary, .submit-btn, .signup-cta, .lm-cta, .course-landing-cta, .mkt-cta-coach-btn, .prop-btn-dark, .gt-btn, .a-cta, .offer-cta, .founder-signature-cta, .d-trust-cta, .cd-trust-cta, .cd-offer-cta, .mr-card-cta, .mr-ath-btn, .gen-btn, .gate-btn, .lesson-player-complete-btn, .learn-login-wall-cta, .refer-copy-btn):is(:hover, :active),
:root[data-mz-console="atelier"] .com-btn.primary:is(:hover, :active) {
  background: var(--atelier-onyx);
  background-image: none;
  border-color: var(--atelier-onyx);
  color: var(--mzv-onfill);
  box-shadow: none;
  transform: none;
}
/* Segmented pills on the website: the help role filter and the fit check chips. */
:root[data-mz-console="atelier"] :is(.help-role-btn, .fc-chip, .surface-pill, .ul-pill) {
  min-height: 40px;
  padding: 8px 20px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--ink-secondary);
  color: var(--ink-secondary);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
}
:root[data-mz-console="atelier"] :is(.help-role-btn, .fc-chip, .surface-pill, .ul-pill):is([aria-pressed="true"], [aria-selected="true"], .is-active, .active) { background: var(--bone-black); border-color: var(--bone-black); color: var(--bone-white); }
:root[data-mz-console="atelier"] .pill { border-radius: 999px; box-shadow: none; background-image: none; }

/* ---------------------------------------------------------------------
   6. THE CTA STRIP AND THE DARK BANDS. The accent never fills a surface and
   the footer is the one dark surface on a page, so the shared .cta-strip and
   the article's dark closing band become a hairline card at radius 24 on the
   canvas with a ghost pill.
   --------------------------------------------------------------------- */
:root[data-mz-console="atelier"] :is(.article-cta, .help-footer-cta, .help-footer-help, .audience-cta, .com-retention-strip, .learn-journal-pointer, .mig-cta-bottom, .look-footer-cta, .gt-cta-strip, .pk-pdf-band) {
  background: var(--paper-card);
  background-image: none;
  color: var(--ink-primary);
  border: 1px solid var(--rule-soft);
  border-radius: 24px;
  width: calc(100% - 64px);
  max-width: calc(var(--atelier-max-width) - 64px);
  margin: 0 auto var(--atelier-section-gap);
  padding: 64px 32px;
  text-align: left;
  box-shadow: none;
}
:root[data-mz-console="atelier"] :is(.article-cta, .help-footer-cta, .help-footer-help, .audience-cta, .com-retention-strip, .learn-journal-pointer, .mig-cta-bottom, .look-footer-cta, .gt-cta-strip, .pk-pdf-band) :is(h2, h3, .article-cta-title, .audience-cta-title, .mig-cta-h, .look-footer-cta-line, .learn-journal-pointer-h, .pk-pdf-line) {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 2.25vw + 24px, 40px);
  line-height: 1.25;
  letter-spacing: -1px;
  text-transform: none;
  color: var(--ink-primary);
  max-width: 720px;
  margin-left: 0;
  margin-right: 0;
}
:root[data-mz-console="atelier"] :is(.article-cta, .help-footer-cta, .help-footer-help, .audience-cta, .learn-journal-pointer, .mig-cta-bottom, .pk-pdf-band) :is(p, .article-cta-body, .mig-cta-lede, .learn-journal-pointer-sub, .pk-pdf-copy) { color: var(--ink-secondary); max-width: 720px; margin-left: 0; margin-right: 0; }
:root[data-mz-console="atelier"] :is(.article-cta, .help-footer-cta, .help-footer-help, .audience-cta, .learn-journal-pointer, .mig-cta-bottom, .pk-pdf-band) [class*="eyebrow"] { color: var(--ink-muted); }
@media (max-width: 720px) {
  :root[data-mz-console="atelier"] :is(.article-cta, .help-footer-cta, .help-footer-help, .audience-cta, .com-retention-strip, .learn-journal-pointer, .mig-cta-bottom, .look-footer-cta, .gt-cta-strip, .pk-pdf-band) { border-radius: 16px; padding: 40px 20px; width: calc(100% - 40px); }
  /* A pill may not be wider than its card. "Email support@marrowfitness.com" ran 13px past the help card at 390 (gauntlet 2026-10-01, f9e7686a); the label now wraps, and the address may break, inside the card. */
  :root[data-mz-console="atelier"] :is(.article-cta, .help-footer-cta, .help-footer-help) :is(.help-footer-help-btn, .help-footer-cta-btn, .article-cta-btn) { max-width: 100%; padding-left: 16px; padding-right: 16px; overflow-wrap: anywhere; text-align: center; }
  /* On a phone a long localized word must be able to shrink the line: the floor here is under the base floor above (tests/public-overflow-floor). */
  :root[data-mz-console="atelier"] main h1 { font-size: clamp(28px, 8vw, 40px); letter-spacing: -0.6px; }
  :root[data-mz-console="atelier"] main h2,
  :root[data-mz-console="atelier"] .article-body h2 { font-size: clamp(19px, 5.5vw, 24px); }
}

/* ---------------------------------------------------------------------
   7. THE FOOTER ON THE WEBSITE HOOKS. atelier.css paints the ground and the
   link ink; this binds the wordmark, the column titles, the bio and the
   legal line, and inks the footer's legacy six cell mark in onfill.
   --------------------------------------------------------------------- */
:root[data-mz-console="atelier"] :where(body) > footer { padding: var(--atelier-section-gap) 0 40px; }
:root[data-mz-console="atelier"] .footer-wordmark {
  font-family: var(--serif);
  font-weight: var(--weight-serif);
  font-size: 24px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--paper-canvas);
}
:root[data-mz-console="atelier"] .footer-col li { font-size: 14px; letter-spacing: 0.35px; }
:root[data-mz-console="atelier"] .footer-bottom {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: none;
  color: var(--paper-canvas);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
/* The footer mark is the final partial (white on its own token, bare on the
   dark footer, data-tile none), wrapped in span.logo-svg and sized here; it is
   never re inked, so the legacy stroke and use[fill] rules are gone. */
:root[data-mz-console="atelier"] :where(body) > footer .logo-svg { width: 28px; height: 28px; }
/* Footer links never fade (a page opacity of 0.7 drops the accent on dark under 4.5); underline links hover in the accent itself (the strong accent measures 4.42 on the densest lattice line). */
:root[data-mz-console="atelier"] :where(body) > footer a { opacity: 1; }
:root[data-mz-console="atelier"] :is(.cat-door, .tier-more, .dash-act-more, .com-section-link):hover { color: var(--marrow-accent); text-decoration-thickness: 2px; }

/* ---------------------------------------------------------------------
   8. WHAT THE SHARED SHEETS CANNOT REACH IN css/styles.css FOR THESE PAGES:
   the selection colour (the accent as a fill behind text), the smooth
   scroll, the reveal transforms, and the dark context arms that go dead.
   --------------------------------------------------------------------- */
:root[data-mz-console="atelier"] :is(.reveal-up, .rv, .mz-reveal) { opacity: 1; transform: none; transition: none; }
:root[data-mz-console="atelier"] :is(.trust-strip, .roadmap-meta, .stage-status, .stage-when, .article-meta-dot, .help-breadcrumb-sep) { color: var(--ink-muted); }
/* The look inside mock stays a bone black media well and its labels take the on dark inks (L6a paints the .dash-preview mock as a light card). The preview badge on the canvas is a hairline chip in the ink. */
:root[data-mz-console="atelier"] main .look-coach-dash [class*="eyebrow"] { color: var(--marrow-accent-on-dark); }
:root[data-mz-console="atelier"] main .look-coach-dash :is([class$="-subtitle"], [class$="-sub"], p) { color: var(--steel-light); }
:root[data-mz-console="atelier"] main .preview-badge { background: var(--paper-card); color: var(--ink-primary); border-color: var(--rule-strong); }
:root[data-mz-console="atelier"] main .look-coach-dash [class$="-card"],
:root[data-mz-console="atelier"] main .look-coach-dash [class$="-card"]:is(:hover, :focus-within) { background: var(--atelier-ink-card); border-color: rgba(255, 255, 255, 0.08); color: var(--paper-canvas); }
:root[data-mz-console="atelier"] main table { font-variant-numeric: tabular-nums; }
:root[data-mz-console="atelier"] main th { font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--ink-muted); border-bottom: 1px solid var(--rule-strong); background: transparent; }
:root[data-mz-console="atelier"] main td { font-size: 14px; letter-spacing: 0.35px; color: var(--ink-primary); border-bottom: 1px solid var(--rule-soft); }
:root[data-mz-console="atelier"] main :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
  background: var(--paper-card);
  border: 1px solid var(--rule-strong);
  border-radius: 12px;
  padding: 12px 16px;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink-primary);
  box-shadow: none;
}
:root[data-mz-console="atelier"] main label { font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--ink-muted); }

/* A STANDALONE OFFER LINE LINK GETS THE TAP FLOOR.
   Gauntlet 2026-10-02 measured standalone offer line links on /pricing/ and
   /gyms/ at about 35 tall, at 390 and 320. Each is the only thing on its line,
   so the inline link exemption does not cover it. (The Founding Launch line
   this first covered was retired 2026-11-01.) The pill on /pricing/ drops
   its 6px top and bottom padding when it holds a link, so it is 44 tall, not 56. */
:root[data-mz-console="atelier"] .offer-plan-line > a { display: inline-flex; align-items: center; min-height: 44px; }
:root[data-mz-console="atelier"] .offer-plan-line:has(> a) { padding-top: 0; padding-bottom: 0; }

/* ---------------------------------------------------------------------
   9. THE VISUAL PREMIUM PASS, 2026-10-03 (docs/design-brief-20261003.md).
   Three moves on the public surfaces: three planes (D1, R3, R8), one signal
   colour (D3, D4, D6, R2, R12) and two type tiers (D8, R4, R7). Guarded by
   tests/visual-premium-site-signal.test.mjs and
   tests/visual-premium-site-tiers.test.mjs.
   --------------------------------------------------------------------- */
/* ONE SIGNAL. .is-signal is the page's one primary action and the only fill the
   accent ever paints. On an atmosphere it carries a 1px white border, because
   the accent on the sky panel measures 1.99 to 1 without it (judge ruling 1). */
:root[data-mz-console="atelier"] .is-signal { background: var(--ink-primary); background-image: none; border: 1px solid var(--marrow-accent); color: var(--bone-white); }
:root[data-mz-console="atelier"] .is-signal:is(:hover, :active) { background: var(--mz-ember-pressed); color: var(--mz-on-ember); border-color: transparent; transform: none; }
:root[data-mz-console="atelier"] :is(.atmo, .frost) .is-signal { border-color: var(--color-pure-white); }
:root[data-mz-console="atelier"] :is(.atmo, .frost) .is-signal:is(:hover, :active) { border-color: var(--color-pure-white); }

/* THE HOME HERO. The thesis is the back plane, the brand preview phone the
   middle plane overlapping it, and Start with this look the one signal pill
   on top. Every supporting line is the small tier at 14 in white on the sky,
   inside a measure under 60 characters (judge ruling 3). */
:root[data-mz-console="atelier"] #hero .hero-copy .sub { font-size: 14px; line-height: 1.5; color: var(--color-pure-white); max-width: 400px; }
:root[data-mz-console="atelier"] #hero .bp-form-h { font-family: var(--sans); font-size: 14px; font-weight: 500; line-height: 1.4; }
:root[data-mz-console="atelier"] #hero :is(.hero-copy, .hero-side) { position: relative; }
:root[data-mz-console="atelier"] #hero .hero-copy { z-index: 0; }
:root[data-mz-console="atelier"] #hero .hero-side { z-index: 1; }
/* The phone laps the panel's padding by 20px and never a glyph: measured on all
   six homes from 1181 to 1440 (the tightest, es at 1240, ends 10px short). */
@media (min-width: 1181px) {
  :root[data-mz-console="atelier"] #hero .hero-side { margin-left: -60px; }
}
/* Russian only. "приложений." is one word that cannot break, and at the 80px
   display size between 1181 and 1279 it ran 14px past the thesis panel. 72px
   keeps it inside the panel; the other five homes are untouched. */
@media (min-width: 1181px) and (max-width: 1279px) {
  :root[data-mz-console="atelier"][lang="ru"] #hero .hero-copy .display { font-size: 72px; }
}
@media (max-width: 1180px) {
  :root[data-mz-console="atelier"] #hero .hero-side { margin-top: -40px; }
}

:root[data-mz-console="atelier"] .gyms-head .page-hero-eyebrow { color: var(--ink-muted); }
/* THE GYMS HERO. The headline is set at the display scale beside the moss
   plate. It is not slid under the plate: at 96 the last word of the line is
   what an overlap would cover, so this surface takes M2 and M3 and keeps its
   columns. The plate stays stacked above the type in case a long translation
   reaches it. */
:root[data-mz-console="atelier"] .gyms-head .page-hero-title { position: relative; z-index: 0; max-width: none; font-size: 80px; line-height: 1; letter-spacing: -2px; }
:root[data-mz-console="atelier"] .gyms-head .head-plate { position: relative; z-index: 1; }
:root[data-mz-console="atelier"] .gyms-head .page-hero-lede { font-size: 14px; line-height: 1.5; color: var(--ink-primary); }
@media (min-width: 1280px) {
  :root[data-mz-console="atelier"] .gyms-head .page-hero-title { font-size: 96px; letter-spacing: -4.8px; }
}
@media (max-width: 767px) {
  :root[data-mz-console="atelier"] .gyms-head .page-hero-title { font-size: 52px; letter-spacing: -1.6px; }
}
@media (max-width: 560px) {
  :root[data-mz-console="atelier"] .gyms-head .page-hero-title { font-size: 44px; letter-spacing: -1.2px; }
}

/* TAP FLOORS on a phone, 44px under 768, after every base rule above
   (Gauntlet tap floor class, 2026-10-12;
   tests/public-tap-floor-class-guard.test.mjs holds them). */
@media (max-width: 767px) {
  :root[data-mz-console="atelier"] .nav-links a { min-height: 44px; min-width: 44px; }
}

/* v3.1 (2026-11-04, colour-v3-spec R1): the nav's Join now is the one ember pill on a page that owns no other. */
:root[data-mz-console="atelier"] .nav .nav-cta,
:root[data-mz-console="atelier"] .nav .nav-cta:is(:hover, :focus-visible) { background: var(--mz-ember); border-color: var(--mz-ember); color: var(--mz-on-ember); }
:root[data-mz-console="atelier"] .nav .nav-cta:active { background: var(--mz-ember-pressed); border-color: var(--mz-ember-pressed); color: var(--mz-on-ember); }