/* ============================================================
   Browserbase-inspired TEMPLATE LAYER (loaded last)
   Built from Browserbase's real design system:
   - deliberate grid-line rails + full-width dividers (u-grid-line)
   - <mark> style highlight on headline emphasis
   - their type scale (display 60/48/36 · text 20/18/16/14/12)
   - flat tinted cards, pill buttons, mono labels
   Colours & content unchanged.
   ============================================================ */

:root {
    --bb-line: rgba(26, 26, 23, 0.14);   /* our warm equivalent of --color-visual-grid */
    --bb-frame: 1240px;                  /* content-frame width (rails sit at its edges) */

    /* Browserbase type scale */
    --font-size-hero: clamp(2.5rem, 5.2vw, 3.75rem);   /* display-xl 60px */
    --font-size-2xl:  clamp(1.875rem, 3.6vw, 3rem);    /* display-lg 48px */
    --radius-lg: 0.625rem;                              /* 10px */
}

/* ---- Grid-line utilities (Browserbase's exact technique) --- */
.u-line { position: relative; }
.u-line::after {
    content: ""; position: absolute; inset: 0;
    pointer-events: none; z-index: 1;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
}
.u-line--x::after   { background-image: linear-gradient(var(--bb-line),var(--bb-line)), linear-gradient(var(--bb-line),var(--bb-line)); background-size: 1px 100%, 1px 100%; background-position: 0 0, 100% 0; }
.u-line--y::after   { background-image: linear-gradient(var(--bb-line),var(--bb-line)), linear-gradient(var(--bb-line),var(--bb-line)); background-size: 100% 1px, 100% 1px; background-position: 0 0, 0 100%; }
.u-line--all::after { background-image: linear-gradient(var(--bb-line),var(--bb-line)),linear-gradient(var(--bb-line),var(--bb-line)),linear-gradient(var(--bb-line),var(--bb-line)),linear-gradient(var(--bb-line),var(--bb-line)); background-size: 100% 1px,1px 100%,100% 1px,1px 100%; background-position: 0 0,100% 0,0 100%,0 0; }

/* ---- Ledger frame: two vertical rails down the content edges */
main { position: relative; }
main::before {
    content: ""; position: absolute; inset: 0;
    pointer-events: none; z-index: 1;
    background-image: linear-gradient(var(--bb-line), var(--bb-line)),
                      linear-gradient(var(--bb-line), var(--bb-line));
    background-repeat: no-repeat, no-repeat;
    background-size: 1px 100%, 1px 100%;
    background-position: calc(50% - (var(--bb-frame) / 2)) 0,
                         calc(50% + (var(--bb-frame) / 2)) 0;
}
/* full-width horizontal divider on every section = the intersecting rules */
.section, .marquee-band { border-top: 1px solid var(--bb-line); }
/* keep section content above the rails */
.section > .container, .hero-inner { position: relative; z-index: 2; }

/* ---- Hero: centered, marker headline ----------------------- */
.hero-inner { text-align: center; }
.hero-inner .eyebrow, .hero-inner .subtitle { margin-inline: auto; }
.hero-inner .actions { justify-content: center; }

/* ---- Section intros: LEFT-aligned (Browserbase) ------------ */
.section-header { text-align: left; max-width: 820px; margin-inline: 0; }
.section-header .section-label { justify-content: flex-start; }

/* ---- <mark>-style highlight on headline emphasis ----------- */
.gradient {
    -webkit-background-clip: border-box; background-clip: border-box;
    background: var(--accent); color: #fff;
    box-decoration-break: clone; -webkit-box-decoration-break: clone;
    padding: 0.04em 0.22em; border-radius: 2px;
}

/* ---- Mono labels with a hard square bullet ----------------- */
.section-header .section-label::before,
.act-label::before,
.marquee-label::before {
    content: ""; display: inline-block;
    width: 9px; height: 9px; margin-right: 4px;
    background: var(--accent); border-radius: 0;
}

/* ---- Cards: flat tinted rectangles ------------------------- */
.card {
    background: var(--color-surface);
    border: 1px solid var(--bb-line);
    border-radius: var(--radius-lg);
    box-shadow: none;
}
.card:hover { box-shadow: none; border-color: var(--color-text); transform: none; }

/* product-card CTA -> black pill */
#products .card-meta {
    display: inline-flex; align-items: center; gap: 7px; width: max-content;
    background: var(--color-text); color: var(--color-bg);
    font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0; text-transform: none;
    padding: 10px 18px; border-radius: 999px;
}

/* ---- Buttons: pill, mono ----------------------------------- */
.btn { border-radius: 999px; font-family: var(--font-mono); letter-spacing: 0.01em; }

/* ---- Oversized stat numbers -------------------------------- */
.stat { border-radius: var(--radius-lg); background: var(--color-surface); }
.stat-num { font-size: clamp(3rem, 6.5vw, 5rem); letter-spacing: -0.04em; }

/* ---- Tighten the oversized manifesto display type ---------- */
.act-statement  { font-size: clamp(1.75rem, 3.6vw, 2.6rem); letter-spacing: -0.03em; }
.coda-statement { font-size: clamp(2rem, 4.4vw, 3rem); letter-spacing: -0.035em; }
.team-card, .split-col, .flow-node, .qd-plot, .demos .demo-video { border-radius: var(--radius-lg); }

/* ---- Small screens: drop the side rails -------------------- */
@media (max-width: 760px) {
    main::before { display: none; }
}