/* ════════════════════════════════════════════════════════════════════════
   page.css — zCloud canonical PAGE grammar (Layer 2 · SHARED base for every
   doc page). Opt in per page with zMeta.zBrush: [page]. NOT global — app
   surfaces (zAccount, zDashboard) stay clean of marketing rhythm by not opting in.

   Layering:
     L1 atoms   → canvas (zC_Main.css): bg, centered column, tokens, zc-btn,
                  zc-grid, zc-card surface.
     L2 base    → THIS file: the section-layout vocabulary EVERY doc page shares
                  — hero / section / centered section headings / containers.
     L2 build-on→ hub.css ([page, hub]): card-grid nav surface + proof callout.
                  leaf.css ([page, leaf]): the editorial reading column.
     L3 identity→ per-page brush (home, founder, pricing, …): one-page uniques.

   The hub/leaf split was lifted out of this file verbatim (file management
   only — no value or selector changes).
   ════════════════════════════════════════════════════════════════════════ */

/* ── container — centered measure for a section's Inner ───────────────────── */
.zc-container,
.zc-container-narrow { margin: 0 auto; position: relative; z-index: 1; }
.zc-container        { max-width: var(--zc-container); }
.zc-container-narrow { max-width: var(--zc-container-narrow); }

/* ── section — vertical rhythm band ──────────────────────────────────────── */
.zc-section       { padding: var(--zc-section-y) var(--zc-section-x); position: relative; }
.zc-section-tight { padding: 4rem var(--zc-section-x); }

/* ── hero — standard doc/marketing banner (home keeps its own .hero-* brush) ─ */
.zc-hero {
    position:   relative;
    padding:    7rem var(--zc-section-x) 5rem;
    text-align: center;
    overflow:   hidden;
    isolation:  isolate;
}
.zc-hero::before {
    content:        '';
    position:       absolute;
    inset:          0;
    z-index:        -1;
    pointer-events: none;
    background:
        radial-gradient(44% 52% at 50% -8%, rgba(124, 58, 237, 0.24), transparent 66%),
        radial-gradient(82% 62% at 50% -2%, rgba(79, 70, 229, 0.10), transparent 74%);
}
.zc-hero > * { position: relative; }
.zc-hero-title {
    font-size:               clamp(2.25rem, 6vw, 4.5rem);
    font-weight:             800;
    line-height:             1.05;
    margin:                  1.5rem 0 1.75rem;
    letter-spacing:          -0.04em;
    background:              var(--zc-text-grad);
    -webkit-background-clip: text;
    background-clip:         text;
    -webkit-text-fill-color: transparent;
    text-shadow:             0 0 80px rgba(79, 70, 229, 0.3);
}
.zc-hero-lead {
    font-size:   1.125rem;
    color:       var(--text-gray);
    margin:      0 auto 2.5rem;
    max-width:   60ch;
    font-weight: 400;
}
/* a section's ONE action — authored on the zURL itself because bifrost
   collapses a sole-child actions wrapper, taking its centering with it */
.zc-btn-solo {
    display: flex;
    width:   fit-content;
    margin:  0 auto;
}

/* ── quiet link — muted wayfinding ink (hub fine print, leaf-nav hub seat) ────
   Base lives here (shared page vocabulary); contexts add their own placement
   (hub.css centers it under the grid, leaf.css seats it on the nav rail). */
.zc-link-quiet {
    display:         inline-flex;
    align-items:     center;
    font-size:       0.9rem;
    font-weight:     500;
    letter-spacing:  -0.01em;
    color:           var(--text-gray, #B4BBC8);
    text-decoration: none;
    transition:      transform 0.15s ease, color 0.15s ease;
}
.zc-link-quiet:hover {
    transform:       translateX(3px);
    color:           var(--color-primary, #A2D46E);
    text-decoration: none;
}
.zc-hero-actions {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: center;
    gap:             var(--zc-gap);
    margin-top:      2rem;
}

/* ── headings — centered section eyebrow / title / subtitle ───────────────── */
.zc-eyebrow {
    font-size:      0.8125rem;
    font-weight:    700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          #a5b4fc;
    margin:         0 0 0.75rem;
    text-align:     center;
}
.zc-title {
    font-size:               clamp(1.75rem, 4vw, 2.75rem);
    font-weight:             800;
    margin:                  0 0 1.25rem;
    letter-spacing:          -0.025em;
    text-align:              center;
    background:              var(--zc-text-grad);
    -webkit-background-clip: text;
    background-clip:         text;
    -webkit-text-fill-color: transparent;
}
.zc-title-plain {
    background:              none;
    -webkit-text-fill-color: var(--text-light);
    color:                   var(--text-light);
}
/* zH2/zH3 render their own heading tag inside the carrier — inherit so the
   class (on the block) drives the look, not the default tag styles. */
.zc-title h1, .zc-title h2, .zc-title h3 {
    font: inherit; letter-spacing: inherit; color: inherit; margin: 0; line-height: 1.1;
}
/* ── inline `code` inside a gradient title — the title clips a gradient to text
   with transparent fill, which the <code> would inherit and vanish. Reset the
   fill and give it a violet glass chip (matches .zc-proof-text code) so it reads
   as a techy token without breaking the title's rhythm. */
.zc-title code {
    -webkit-text-fill-color: #c7d2fe;
    color:                   #c7d2fe;
    background:              rgba(124, 58, 237, 0.18);
    -webkit-background-clip: border-box;
    background-clip:         border-box;
    border:                  1px solid rgba(124, 58, 237, 0.30);
    border-radius:           0.4em;
    padding:                 0.06em 0.34em;
    font-family:             'SF Mono', 'Monaco', 'Courier New', monospace;
    font-size:               0.78em;
    font-weight:             700;
    letter-spacing:          normal;
    vertical-align:          middle;
}
/* Two bifrost quirks — both resolved here so zolo authors don't work around them:
   A) When _zClass + color: are both set, bifrost applies ONLY the color class.
   B) When zH2 has siblings inside its wrapper, _zClass is not applied at all.
   Either way the heading lands without zc-title. Restore the canonical look. */
.zc-section h1[class^="zText-"], .zc-section h1[class*=" zText-"],
.zc-section h2[class^="zText-"], .zc-section h2[class*=" zText-"],
.zc-section h3[class^="zText-"], .zc-section h3[class*=" zText-"],
.zc-section h2:not([class]) {
    font-size:      clamp(1.75rem, 4vw, 2.75rem);
    font-weight:    800;
    letter-spacing: -0.025em;
    text-align:     center;
    margin:         0 0 1.25rem;
    line-height:    1.1;
}
/* Bare h2 (no color class) gets the gradient text treatment of zc-title */
.zc-section h2:not([class]) {
    background:              var(--zc-text-grad);
    -webkit-background-clip: text;
    background-clip:         text;
    -webkit-text-fill-color: transparent;
}
.zc-subtitle {
    font-size:   1.2rem;
    color:       var(--text-gray);
    margin:      0 auto 3.5rem;
    max-width:   60ch;
    font-weight: 400;
    line-height: 1.6;
    text-align:  center;
}

/* ── note — an info callout in the card family (glass surface + top hairline,
   same as .zc-card). Always LEFT-aligned reading, with comfortable side padding
   so text never touches the right edge. TWO widths, both left-anchored:
     • default            → MAIN column, full breathing room (spans the leaf).
     • + .zc-note-tight   → hugs the 68ch prose measure (right edge lines up
                            with .zc-leaf p). Pair: _zClass: zc-note zc-note-tight
   Left-align lives on .zc-note itself (not just its <p>) so a one-line inline
   `zMD:` — which markdown injects WITHOUT a <p> wrapper — reads the same as a
   multi-paragraph note instead of falling back to a centered default.        */
.zc-note {
    position:      relative;
    max-width:     var(--zc-container-narrow);
    margin:        1.75rem auto 2.5rem;
    padding:       1.4rem 1.9rem;
    background:    var(--zc-surface);
    border:        1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--zc-radius);
    box-shadow:    var(--zc-shadow);
    overflow:      hidden;
    text-align:    left;
}
/* tight width — hug the prose measure, left-anchored under the reading column */
.zc-note-tight {
    max-width:    68ch;
    margin-left:  0;
    margin-right: auto;
}
/* a CTA inside a note (bifrost collapses the zc-hero-actions wrapper onto a
   sole-child zURL, so center it here + give it room) */
.zc-note .zc-btn { margin-top: 1.5rem; }
.zc-note::before {
    content:    '';
    position:   absolute;
    top: 0; left: 0; right: 0;
    height:     1px;
    background: var(--zc-hairline);
}
.zc-note p {
    margin:      0;
    color:       #d1d5db;   /* a notch brighter than prose gray — a note is a callout, not body copy */
    font-size:   0.98rem;
    line-height: 1.6;
    text-align:  left;
}
/* stacked paragraphs in a leaf note get room to breathe */
.zc-leaf .zc-note p + p { margin-top: 1rem; }
.zc-leaf .zc-note ul,
.zc-leaf .zc-note ol { color: #d1d5db; }
.zc-note strong { color: var(--text-light); }
.zc-note h2, .zc-note h3 {
    text-align:  left;
    font-size:   1.25rem;
    font-weight: 700;
    color:       var(--text-light);
    margin:      0 0 0.7rem;
}
/* exclude bifrost-owned chrome links — an inline navbar or a breadcrumb trail can
   sit inside a .zc-note, and this prose-link rule would otherwise override their
   SSOT styling (navbar ink, breadcrumb muted chrome). */
.zc-note a:not(.zc-btn):not(.zNav-link):not(.zNavbar-brand):not(.zDropdown-item):not(.zBreadcrumb a) {
    color:                 #a5b4fc;
    text-decoration:       underline;
    text-underline-offset: 2px;
}
.zc-note a:not(.zc-btn):not(.zNav-link):not(.zNavbar-brand):not(.zDropdown-item):not(.zBreadcrumb a):hover { color: #c7d2fe; }

/* ── showcase — the repeating "source → render" demo unit (a zTerminal block,
   the render-note connector pill, then the live render). One flex column owns
   ALL vertical rhythm via a single gap, so the source, the pill, and the render
   sit at equal, identical intervals on every leaf — no per-element margin drift.
   align-items: stretch keeps the terminal + render full-width; the pill centres
   itself (it carries its own width: fit-content). */
.zc-showcase {
    display:        flex;
    flex-direction: column;
    align-items:    stretch;
    gap:            1.75rem;
}

/* ── render-note — the "↓ in Bifrost, it renders as" connector pill that bridges
   a zTerminal source block to its live render. A glowing secondary-purple chip
   with a breathing "core" glow so it reads as the live centre of the showcase,
   not a static label. zText puts the class on its own <p>, so we co-tag with
   .zc-leaf .zc-render-note to out-specify .zc-leaf p (else leaf prose steals the
   colour + auto-margin → gray + left-aligned). */
.zc-render-note,
.zc-leaf .zc-render-note {
    position:        relative;
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             0.5rem;
    width:           fit-content;
    max-width:       none;
    margin:          1.4rem auto;
    padding:         0.5rem 1.3rem;
    border-radius:   999px;
    font-size:       0.78rem;
    font-weight:     700;
    letter-spacing:  0.07em;
    text-transform:  uppercase;
    color:           #ffffff;
    background:
        radial-gradient(120% 180% at 50% 50%, rgba(167, 139, 250, 0.35), transparent 70%),
        linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%);
    border:          1px solid rgba(196, 181, 253, 0.6);
    box-shadow:      0 0 22px rgba(124, 58, 237, 0.5);
    animation:       zc-core 3.2s ease-in-out infinite;
}
/* inside a showcase the flex gap owns every interval — zero the pill's own
   block margin so it stays an equal distance from the source and the render. */
.zc-showcase .zc-render-note { margin-block: 0; }
/* a showcase's RENDER pane is demo OUTPUT, not a section heading — the
   bifrost-quirk restorer above (.zc-section h1[class^="zText-"]…) would
   otherwise catch a demo's colored zH1 and center it at title scale.
   Re-anchor demo headings left, at demo scale. Same specificity tier,
   later in the file — the showcase wins. */
.zc-section .zc-showcase h1, .zc-section .zc-showcase h2, .zc-section .zc-showcase h3,
.zc-showcase h1, .zc-showcase h2, .zc-showcase h3 {
    text-align:  left;
    font-size:   clamp(1.45rem, 2.4vw, 1.9rem);
    margin:      0;
    line-height: 1.2;
}
@keyframes zc-core {
    0%, 100% { box-shadow: 0 0 16px rgba(124, 58, 237, 0.4),  0 0 34px rgba(124, 58, 237, 0.18); }
    50%      { box-shadow: 0 0 26px rgba(139, 92, 246, 0.75), 0 0 66px rgba(124, 58, 237, 0.42); }
}
@media (prefers-reduced-motion: reduce) {
    .zc-render-note { animation: none; }
}

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .zc-section, .zc-section-tight { padding: 5rem 1.5rem; }
    .zc-hero { padding: 5.5rem 1.5rem 4rem; }
}