/* =====================================================================
   MARROW, THE PUBLIC SYSTEM, TIER B.  assets/css/public-tierb.css
   Lane 5 of the public rollout (2026-10-09,
   ~/.edwinstrong/design-canon/public-rollout-plan-20261008.md section 4).
   The supporting pages keep their own markup and copy; this sheet lays the
   approved homepage look over them: the shared hero (assets/public/public.css)
   sized for a supporting page, full bleed light planes, the hybrid type on the
   live headings, the white pill and ink pill on the live buttons, and one card
   recipe for the live cards. Loaded only by pages that carry body.pub-tb, and
   every rule hangs off body.pub-tb #main, so nothing reaches another page.
   Colours only through the --hy-* and css/styles.css tokens. Motion only on
   opacity, transform, box-shadow; reduced motion and Pause motion rest.
   No em or en dashes.
   ===================================================================== */

/* ---------- 1. The hero, sized for a supporting page ---------- */
@media (min-width: 1024px) {
  body.pub-tb #main .pub-hero-tb .pub-hero-grid { min-height: min(calc(100vh - 120px), 620px); padding-block: 24px 128px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }
  body.pub-tb #main .pub-hero-tb .pub-mark-hero { width: clamp(220px, 24vw, 340px); }
}
@media (max-width: 1023px) {
  body.pub-tb #main .pub-hero-tb .pub-hero-grid { gap: 24px; padding-bottom: 96px; }
  body.pub-tb #main .pub-hero-tb .pub-mark-hero { width: 160px; justify-self: start; }
}
body.pub-tb #main .pub-hero-tb .pub-h1 { font-size: clamp(42px, 5vw, 68px); max-width: 18ch; }
body.pub-tb #main .pub-hero-tb .pub-h1 sup { font-size: 0.32em; vertical-align: super; letter-spacing: 0; }
body.pub-tb #main .pub-hero-tb p.pub-sub { color: var(--hy-ink); max-width: 56ch; }
body.pub-tb #main .pub-hero-tb p.pub-sub + p.pub-sub { color: var(--hy-muted); margin-top: -8px; }
body.pub-tb #main .pub-hero-extra { display: flex; flex-direction: column; gap: 14px; max-width: 60ch; }
body.pub-tb #main .pub-hero-extra :is(p, span, div) { color: var(--hy-muted); font-size: 15px; line-height: 1.55; }
body.pub-tb #main .pub-hero-extra strong { color: var(--hy-ink); font-weight: 500; }
body.pub-tb #main .pub-hero-extra a:not([class]) { color: var(--hy-aqua-hi); text-decoration: underline; text-underline-offset: 3px; }
body.pub-tb #main .pub-hero-extra .pub-note { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hy-aqua-hi); }

/* ---------- 2. The planes ---------- */
/* The live sections after the hero sit, in their order, on one light plane
   (.pub-tb-flow) and keep their own rhythm; a dark section is its own band.
   The live .container lines up with the hero column: 1232 wide, no gutter of
   its own, so the page frame's 24px is the only gutter at every width. */
body.pub-tb #main > .pub-tb-flow { padding-block: 0; min-width: 0; }
body.pub-tb #main :is(.pub-tb-flow, .pub-band) .container { max-width: calc(var(--atelier-max-width) - 2 * var(--space-3)); padding-inline: 0; margin-inline: auto; }
/* A live section that paints its own paper fill reaches both edges. */
body.pub-tb #main > .pub-tb-flow > section[style*="background"] { margin-inline: calc(50% - 50vw); padding-inline: max(calc(50vw - 50%), calc(50vw - var(--atelier-max-width) / 2)); }
/* The reading pages (trust, security) keep their column, aligned to the hero. */
body.pub-tb #main > .pub-tb-flow:is(.tc-wrap, .sec-wrap) { width: 100%; max-width: calc(var(--atelier-max-width) - 2 * var(--space-3)); margin-inline: auto; padding: 72px 0 96px; }
body.pub-tb #main > .pub-tb-flow:is(.tc-wrap, .sec-wrap) > :is(p, section, div, nav):not(.tc-grid):not(.tc-meta) { max-width: 820px; }
body.pub-tb #main > .pub-band { padding-block: 104px; }
body.pub-tb #main > .pub-band.cta-strip { text-align: left; }
body.pub-tb #main > .pub-band .cta-strip-line { font-family: var(--serif); font-weight: 300; font-size: clamp(32px, 3.6vw, 48px); line-height: 1.1; letter-spacing: -0.02em; text-transform: none; color: var(--hy-ink); margin: 0 0 32px; }
body.pub-tb #main > .pub-band .pub-tb-after { margin: 20px 0 0; }
body.pub-tb #main > .pub-band .pub-tb-after-s { margin: 10px 0 0; font-size: 15px; line-height: 1.6; }
body.pub-tb #main > .pub-band :is(p, li) > a:not([class]) { color: var(--hy-aqua-hi); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 3. The hybrid type on the live headings ---------- */
body.pub-tb #main :is(.section-title, .page-hero-title) { font-family: var(--serif); font-weight: 300; font-size: clamp(32px, 3.4vw, 44px); line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
body.pub-tb #main > .pub-light :is(.section-title, h2) { color: var(--ink-primary); }
body.pub-tb #main :is(.section-title, h2, h3) :is(em, .em) { font-style: italic; font-weight: 300; color: var(--marrow-accent); }
body.pub-tb #main > .pub-band :is(.section-title, h2, h3) :is(em, .em) { color: var(--hy-aqua-hi); }
/* Zero weight past one class, so a page or theme rule that inks its own eyebrow still wins. */
:where(body.pub-tb #main) :is(.section-eyebrow, .page-hero-eyebrow, .why-num) { font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--marrow-accent); }
body.pub-tb #main > .pub-band :is(.section-eyebrow, .why-num) { color: var(--hy-aqua-hi); }
body.pub-tb #main > .pub-light :is(.section-lede, .pv-lede) { color: var(--ink-secondary); font-size: 17px; line-height: 1.55; }

/* ---------- 4. The live buttons as the system's pills ---------- */
body.pub-tb #main :is(.btn-primary, .btn-primary-light, .btn-secondary) { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: 999px; font-family: var(--sans); font-weight: 500; font-size: 15px; line-height: 20px; letter-spacing: 0; text-transform: none; text-decoration: none; box-shadow: none; transform: none; transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease; }
body.pub-tb #main > .pub-light :is(.btn-primary, .btn-primary-light) { background: var(--hy-card); border: 1px solid var(--hy-card); color: var(--hy-ink); }
body.pub-tb #main > .pub-light .btn-secondary { background: transparent; border: 1px solid color-mix(in srgb, var(--ink-primary) 38%, transparent); color: var(--ink-primary); }
@media (hover: hover) and (pointer: fine) {
  body.pub-tb #main > .pub-light :is(.btn-primary, .btn-primary-light):hover { background: var(--hy-card); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hy-teal) 30%, transparent); transform: none; }
  body.pub-tb #main > .pub-light .btn-secondary:hover { background: transparent; border-color: var(--ink-primary); color: var(--ink-primary); }
}

/* ---------- 5. One card recipe for the live cards ---------- */
body.pub-tb #main > .pub-light :is(.pv-icons li, .feature-card, .tc-card, .aff-card, .build-card, .never-card, .team-feature, .cx-card, .mz-card--lift, .help-article-card) { background: var(--paper-card); border: 1px solid var(--rule-soft); border-radius: 16px; box-shadow: none; transition: border-color 160ms ease; }
@media (hover: hover) and (pointer: fine) {
  body.pub-tb #main > .pub-light a:is(.tc-card, .help-article-card, .feature-card):hover { border-color: var(--rule-strong); transform: none; box-shadow: none; }
}
body.pub-tb #main > .pub-light .pv-shot-frame { border-radius: 16px; }
body.pub-tb #main > .pub-light .pv-shot.is-phone .pv-shot-frame { border-radius: 36px; border: 1px solid var(--hy-edge); background: var(--hy-ground); }

/* ---------- 6. Page by page, where a live block needs the plane's help ---------- */
body.pub-tb #main > .pub-tb-flow:not(.tc-wrap):not(.sec-wrap) > section:not(.pk-pdf-band) { margin-inline: calc(50% - 50vw); padding-inline: max(calc(50vw - 50%), calc(50vw - var(--atelier-max-width) / 2)); }
body.pub-tb #main .pub-hero-extra .roadmap-meta { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 0; }
body.pub-tb #main > .pub-band :is(.look-footer-cta-line, .proof-cta-line) { font-family: var(--serif); font-weight: 300; font-size: clamp(32px, 3.6vw, 48px); line-height: 1.1; letter-spacing: -0.02em; text-transform: none; color: var(--hy-ink); margin: 0 0 32px; }
body.pub-tb #main > .pub-band :is(.look-footer-cta-line, .proof-cta-line) em { font-style: italic; color: var(--hy-aqua-hi); }
body.pub-tb #main > .pub-band.look-footer-cta .container { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
body.pub-tb #main > .pub-band .look-footer-cta-line { flex-basis: 100%; }
body.pub-tb #main .look-inside-tiles { padding-block: 72px 96px; }
body.pub-tb #main .pk-pdf-band { width: 100%; max-width: calc(var(--atelier-max-width) - 2 * var(--space-3)); margin: 64px auto 0; padding: 32px 36px; border-radius: 16px; }
@media (max-width: 520px) {
  body.pub-tb #main .pub-hero-tb .pub-h1 { font-size: clamp(34px, 9.4vw, 42px); overflow-wrap: break-word; }
  body.pub-tb #main .pub-hero-tb .pub-mark-hero { width: 128px; }
  body.pub-tb #main .pub-pill { white-space: normal; text-align: center; min-height: 48px; padding-block: 12px; }
  body.pub-tb #main > .pub-band { padding-block: 72px; }
}
body.pub-tb #main > .pub-band .pub-tb-mono { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hy-muted); }
/* The help search and role filter, on the shared hero (the rules
   dialed-web.css gave them on the old .help-hero band). */
:root[data-mz-console="atelier"] body.pub-tb #main .pub-hero .help-search-input { background: var(--hy-sunk); border: 1px solid var(--hy-boundary); color: var(--hy-ink); }
:root[data-mz-console="atelier"] body.pub-tb #main .pub-hero .help-search-input::placeholder { color: var(--hy-muted); }
:root[data-mz-console="atelier"] body.pub-tb #main .pub-hero .help-search-icon { color: var(--hy-muted); }
:root[data-mz-console="atelier"] body.pub-tb #main .pub-hero .help-roles-label { color: var(--hy-muted); font-size: 12px; line-height: 1.2; }
:root[data-mz-console="atelier"] body.pub-tb #main .pub-hero .help-role-btn { background: var(--hy-card); border: 1px solid var(--hy-boundary); color: var(--hy-ink); }
:root[data-mz-console="atelier"] body.pub-tb #main .pub-hero .help-role-btn[aria-pressed="true"],
:root[data-mz-console="atelier"] body.pub-tb #main .pub-hero .help-role-btn[aria-pressed="true"]:is(:hover, :focus-visible) { background: var(--hy-wash); border-color: var(--hy-aqua); color: var(--hy-ink); }