/* ==========================================================================
   Base Foundation (reset, variables, typography)
   ========================================================================== */

/* Design Tokens */
:root {
    --bg-primary: #1A1D23;
    --bg-card: #16191F;
    --bg-card-alt: #0F1116;
    --border-primary: #2E323A;
    --border-secondary: #1E2229;
    --text-primary: #FFFFFF;
    --text-secondary: #94A3B8;
    --text-tertiary: #64748B;
    --text-muted: #475569;
    --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    --container-max-width: 1280px;
    --transition-speed: 200ms;
}

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scrollbar-gutter: stable;
    scroll-behavior: smooth;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: var(--font-family-base);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--bg-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Base Typography */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    outline: none !important;
}

h1 { font-size: 80px; letter-spacing: normal; }
h2 { font-size: 56px; letter-spacing: normal; }
h3 { font-size: 32px; }

p {
    margin: 0;
    font-size: 20px;
    line-height: 1.6;
    color: var(--text-secondary);
}

a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color var(--transition-speed);
}

a:hover {
    color: var(--text-primary);
}

/* Utilities */

/* ==========================================================================
   Branduals New Design System
   Used by MainLayout.razor and /final page
   ========================================================================== */

/* --------------------------------------------------------------------------
   Brand Font
   -------------------------------------------------------------------------- */
@font-face {
    font-family: 'Ladislav';
    src: url('/fonts/Ladislav_SemiBold.eot');
    src: url('/fonts/Ladislav_SemiBold.eot?#iefix') format('embedded-opentype'),
         url('/fonts/Ladislav_SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* The three self-hosted families, subset to Latin, Latin Extended and the few symbols the site sets (the footer's heart, the availability
   glyphs); one static file per weight for Inter and Space Grotesk, one variable file for Literata carrying its two ruled axis ranges. */
@font-face { font-family: 'Inter'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-style: normal; font-display: swap; src: url('/fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-style: normal; font-display: swap; src: url('/fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-style: normal; font-display: swap; src: url('/fonts/inter-700.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/space-grotesk-400.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 500; font-style: normal; font-display: swap; src: url('/fonts/space-grotesk-500.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 600; font-style: normal; font-display: swap; src: url('/fonts/space-grotesk-600.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 700; font-style: normal; font-display: swap; src: url('/fonts/space-grotesk-700.woff2') format('woff2'); }
@font-face { font-family: 'Literata'; font-weight: 400 500; font-style: normal; font-display: swap; src: url('/fonts/literata-variable.woff2') format('woff2'); }

/* --------------------------------------------------------------------------
   Custom Properties
   -------------------------------------------------------------------------- */
:root {
    --brand-orange: #ef4600;
    --brand-orange-light: #ff6520;
    --brand-orange-dark: #d63e00;

    --font-display: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-brand: 'Ladislav', 'Inter', sans-serif;
    --font-story: 'Literata', Georgia, 'Times New Roman', serif;   /* the story voice: the home page's serif */

    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* The site's tokens (the home page's design system, consumed by the chrome on every page). Every colour below is a solid; the chrome
   ground is declared twice — its solid first, so a browser without color-mix() keeps a ground under the bar, the menus and the banner. */
:root {
    --canvas: #2b241e; --canvas-2: #332c26; --canvas-3: #3b332c; --bubble: #3d352d;
    --chrome-solid: #241e19;
    --paper: #f2ece3; --paper-2: #cfc6b9; --mute: #9b9285; --hair: rgba(242, 236, 227, .14);
    --button-text: #171310; --paper-body: #4a433b; --paper-small: #6b6259;
    --bar-h: 81px;            /* the bar's height, one token, measured on the built bar (desktop, 2026-09-17): 20 + the 40 px Sign in pill + 20 + the 1 px border */
}
@media (max-width: 860px) { :root { --bar-h: 73px; } }   /* phones, signed out: 16 + the Sign in pill's 40 + 16 + the 1 px border — the pill is the tallest item (the burger is 32 px, not the artifact's 40); signed in, the 34 px avatar replaces the pill and the bar measures 67 — the 6 px of slack every offset then keeps is accepted */
html { color-scheme: dark; scroll-padding-top: var(--bar-h); }
@media (max-height: 499px) { html { scroll-padding-top: 0; } }   /* a bar that does not stick (see .site-nav) leaves no dead offset */

/* --------------------------------------------------------------------------
   Hide reCAPTCHA badge (attribution in footer per Google TOS)
   -------------------------------------------------------------------------- */
.grecaptcha-badge {
    visibility: hidden !important;
}

/* --------------------------------------------------------------------------
   Selection
   -------------------------------------------------------------------------- */
::selection {
    background: var(--brand-orange);
    color: #fff;
}

/* --------------------------------------------------------------------------
   Scrollbar
   -------------------------------------------------------------------------- */
.site-main::-webkit-scrollbar,
html::-webkit-scrollbar {
    width: 6px;
}
.site-main::-webkit-scrollbar-track,
html::-webkit-scrollbar-track {
    background: #000;
}
.site-main::-webkit-scrollbar-thumb,
html::-webkit-scrollbar-thumb {
    background: var(--brand-orange);
}

/* --------------------------------------------------------------------------
   Fixed Background
   -------------------------------------------------------------------------- */
.site-bg {
    position: fixed;
    inset: 0;
    z-index: -100;
    /* Viewport-fixed layers must stay dark end to end — a light stop here paints a permanent
       fog over the bottom of every viewport. The footer sits on the chrome ground now (the same
       material as the bar), so no hand-off ramp exists; this gradient is the other pages' ground
       until their own pass re-cuts it. */
    background: linear-gradient(to bottom, #000000 0%, #0a0a0a 45%, #14171d 100%);
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */
.site-nav { position: sticky; top: 0; z-index: 100; display: flex; justify-content: space-between; align-items: center;
    padding: 20px 40px; background: var(--chrome-solid); background: color-mix(in srgb, var(--canvas) 84%, black);
    border-bottom: 1px solid var(--hair); }
@media (max-height: 499px) { .site-nav { position: relative; } }        /* a short viewport keeps its height for the content: the bar stops sticking, in flow but still positioned above the phone menu */
.site-nav-logo { font-family: var(--font-brand); font-size: 26px; font-weight: 600; color: var(--brand-orange); text-decoration: none; line-height: 1; letter-spacing: -.01em; }
.site-nav-links { display: flex; gap: 28px; align-items: center; }
.site-nav-links a { font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--paper-2); text-decoration: none; white-space: nowrap; transition: color .2s; }
.site-nav-links a:hover, .site-nav-links a.active { color: var(--paper); }
.site-nav-actions { display: flex; align-items: center; gap: 12px; }
.site-nav-signin { font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--paper); text-decoration: none;
    border: 1px solid rgba(242, 236, 227, .5); border-radius: 999px; padding: 8px 16px; line-height: 22px; white-space: nowrap; transition: border-color .2s; }   /* .5 over the chrome ground measures 4.51:1 (the boundary floor is 3:1); the artifact's .34 measured 2.82. The 22 px line box makes the pill exactly 40 px tall, so the bar's height is a whole number at both breakpoints; nowrap keeps the label on one line when the bar is squeezed */
.site-nav-signin:hover { border-color: rgba(242, 236, 227, .7); }        /* the hover is a boundary change, never a fill: the first screen keeps the line's birth as its only orange event */
.site-nav-pill { font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--button-text); background: var(--paper);
    text-decoration: none; border-radius: 999px; padding: 9px 16px; line-height: 22px; white-space: nowrap; }
.nav-drop { position: relative; }
.nav-drop-menu { position: absolute; top: 100%; left: -12px; min-width: 220px; padding: 8px 0; opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .18s, visibility .18s, transform .18s; background: var(--chrome-solid); background: color-mix(in srgb, var(--canvas) 84%, black);
    border: 1px solid var(--hair); border-radius: 8px; }   /* the menu's anatomy as today (the replaced group's values) on the new tokens; the transition names its three properties instead of all */
.nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu { opacity: 1; visibility: visible; transform: none; }   /* the open rule, re-declared here because the replaced group carried it */
.nav-drop-menu a { display: block; font-size: 14px; color: var(--paper-2); padding: 8px 16px; }
.nav-drop-menu a:hover { color: var(--paper); background: rgba(242, 236, 227, .05); }
@media (prefers-reduced-motion: reduce) { .nav-drop-menu { transition: none; } }
.nav-drop.is-closed:hover .nav-drop-menu, .nav-drop.is-closed:focus-within .nav-drop-menu { opacity: 0; visibility: hidden; }   /* Escape closes it without moving focus (site-chrome.js adds the class); written after the open rule at a higher specificity, so it wins */
/* The skip link: the page's first focusable element, off screen until focused, then a paper pill over the bar. */
.site-skip { position: absolute; left: 16px; top: -200px; z-index: 200; padding: 10px 14px; background: var(--paper); color: var(--button-text); border-radius: 999px; font-family: var(--font-body); font-weight: 600; text-decoration: none; }
.site-skip:focus-visible { top: 12px; }
/* The chrome's focus ring: a paper outline, offset, on the bar, the footer, the banner and the phone menu. */
.site-nav :focus-visible, .site-footer :focus-visible, .cookie-banner :focus-visible, .site-mobile-menu :focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }

.site-nav-hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}

.site-nav-hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: #fff;
    transition: transform 0.3s, opacity 0.3s;
}

/* --------------------------------------------------------------------------
   User Menu
   -------------------------------------------------------------------------- */
.user-menu {
    position: relative;
}

.user-menu-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    padding: 0;
    overflow: hidden;
    transition: box-shadow 0.2s;
}

.user-menu-trigger:hover {
    box-shadow: 0 0 0 2px rgba(242, 236, 227, 0.3);
}

/* The initials disc: dark text on the orange, the pair every button uses (white on orange measured 3.79:1 and failed AA). */
.user-menu-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--brand-orange);
    color: var(--button-text);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
}

.user-menu-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-menu-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    min-width: 260px;
    background: var(--chrome-solid); background: color-mix(in srgb, var(--canvas) 84%, black);
    border: 1px solid var(--hair);
    border-radius: 12px;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
    z-index: 200;
}

.user-menu-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.user-menu-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.user-menu-name {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.user-menu-email {
    font-family: var(--font-body);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
}

.user-menu-brands {
    padding: 12px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.user-menu-label {
    display: block;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.3);
    padding: 0 12px 8px;
}

.user-menu-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.15s;
}

.user-menu-brand:hover {
    background: rgba(255, 255, 255, 0.06);
}

.user-menu-brand-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(239, 70, 0, 0.15);
    color: var(--brand-orange);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.user-menu-brand-name {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    color: #fff;
}

.user-menu-actions {
    padding: 8px;
}

.user-menu-action {
    display: block;
    padding: 8px 12px;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.user-menu-action:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.user-menu-signout {
    color: rgba(255, 255, 255, 0.4);
}

.user-menu-signout:hover {
    color: var(--brand-orange);
}

/* --------------------------------------------------------------------------
   Mobile Menu
   -------------------------------------------------------------------------- */
.site-mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: var(--chrome-solid); background: color-mix(in srgb, var(--canvas) 84%, black);
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    padding: calc(var(--bar-h) + 12px) 20px 24px;
    overflow: auto;
    overscroll-behavior: contain;   /* a scrolled-out list never chains its scroll onto the document beneath */
    opacity: 0;
    visibility: hidden;             /* a closed menu is unreachable by Tab and unread by assistive technology, not merely transparent */
    pointer-events: none;
    transition: opacity 0.3s, visibility 0.3s;
}

.site-mobile-menu.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.site-mobile-menu-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;   /* the rows run the column's full width, each under its own hairline */
    width: 100%;
    gap: 0;
}

.site-mobile-menu-inner a {
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--paper);
    padding: 12px 0;
    border-bottom: 1px solid var(--hair);
    text-decoration: none;
}

.site-mobile-sub { font-size: 15px; color: var(--paper-2); padding-left: 18px; }   /* the five volumes, as sub-rows of Product */
.site-mobile-go { color: var(--brand-orange); }                                    /* the trial door: the menu's one orange line */

/* --------------------------------------------------------------------------
   Main Content
   -------------------------------------------------------------------------- */
.site-content {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-main {
    position: relative;
    flex: 1;
}

/* --------------------------------------------------------------------------
   Section Base
   -------------------------------------------------------------------------- */
.section {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 120px 96px;
    overflow: hidden;
    z-index: 10;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
/* The site's one button: dark text on the orange, sentence case, a pill (ruled 2026-09-16 — the white-on-orange pair measured 3.79:1
   and failed AA at every size; this pair measures 4.88:1). No uppercase, no tracking, no hover scale, no hover colour: the orange never
   changes, so the button carries no fill transition. */
.btn-brand { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--brand-orange); color: var(--button-text);
    padding: 14px 22px; border-radius: 999px; font-family: var(--font-body); font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none;
    border: none; cursor: pointer; text-decoration: none; }
.btn-brand:disabled { opacity: .45; cursor: not-allowed; }        /* the primitive's one state: a form disables its submit until the name is valid */
.btn-brand--large { font-size: 17px; padding: 18px 30px; }       /* the coda's door alone; the band's door is the base size */

/* --------------------------------------------------------------------------
   Pricing Section (Home Page + /pricing)
   -------------------------------------------------------------------------- */

.pricing-toggle {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-bottom: 56px;
}

.pricing-toggle-btn { font-family: var(--font-body); font-size: 13px; font-weight: 600; padding: 10px 24px; border: 1px solid var(--paper-2); background: transparent; color: var(--paper-2); cursor: pointer; transition: color 0.2s, background 0.2s, border-color 0.2s; }   /* the control's boundary at 9.05:1 (the 3:1 floor); the hairline it had read 1.5:1 */

.pricing-toggle-btn:first-child {
    border-right: none;
}

.pricing-toggle-btn.active { color: var(--paper); background: var(--canvas-2); border-color: var(--paper); }   /* the pressed side: paper text, a paper border, the second canvas; aria-pressed says the same to assistive tech */

.pricing-toggle-btn:hover:not(.active) {
    color: var(--paper-2);
}

.pricing-toggle-save { font-size: 12px; color: var(--paper-2); margin-left: 6px; }   /* the saving phrase: no orange text under 24 px (4.04:1 on the canvas) */

/* Tier Cards Grid */
.pricing-tiers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 0;
    max-width: 1240px;
    margin: 0 auto;
}

.pricing-tier {
    border: 1px solid var(--hair);
    padding: 48px 36px;
    display: flex;
    flex-direction: column;
    transition: border-color 0.3s;
}

.pricing-tier + .pricing-tier {
    border-left: none;
}

.pricing-tier:hover {
    border-color: var(--hair);
}

.pricing-tier-name {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    color: var(--paper-2);
    margin-bottom: 24px;
}

.pricing-tier-price {
    margin-bottom: 32px;
}

.pricing-tier-current {
    font-family: var(--font-display);
    font-size: clamp(44px, 4vw, 60px);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--paper);
    line-height: 1;
}

/* "from $999 /mo" lockup (Enterprise): one baseline-aligned line — the bare inline spans wrap
   "/mo" under the numeral and float "from" off its baseline at card widths. */
.pricing-tier-price--from {
    display: flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
}
.pricing-tier-price--from .pricing-tier-current {
    font-size: clamp(34px, 3vw, 46px);
}
.pricing-tier-price--from .pricing-tier-from {
    margin-right: 0;
}
.pricing-tier-price--from .pricing-tier-period {
    margin-left: 0;
}

.pricing-tier-period {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--mute);
    margin-left: 4px;
}

.pricing-tier-features {
    list-style: none;
    padding: 0;
    margin: 0 0 40px;
    flex: 1;
}

.pricing-tier-features li {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--paper-2);
    padding: 7px 0;
    border-bottom: 1px solid var(--hair);
}

.pricing-tier-features li:last-child {
    border-bottom: none;
}

/* Enterprise Line */

/* Footer Notes */

.pricing-compare {
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--mute);
    margin-top: 32px;
    text-align: center;   /* the closing line sits under a centred column; left-aligned it read as a stray (2026-09-23) */
}

.pricing-compare a { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; font-weight: 400; }
.pricing-compare a:hover { color: var(--brand-orange); }

.pricing-compare a:hover {
    text-decoration: underline;
}

/* Pricing page content - wider than the legal document column */
.pricing-page-content {
    max-width: 1100px;
    margin: 0 auto;   /* centred like the head above it: without the auto margins the whole body sat at the page's left padding on any screen wider than 1148 px (Robert's 2000 px screenshots, 2026-09-23) */
}

.pricing-page-heading { font-family: var(--font-body); font-weight: 600; font-size: clamp(24px, 2.4vw, 30px); color: var(--paper); margin: 96px 0 40px; text-align: center; }

.pricing-matrix th:first-child {
    text-align: left;
}

/* --------------------------------------------------------------------------
   Pricing Page - Feature Comparison Matrix
   -------------------------------------------------------------------------- */
.pricing-matrix {
    max-width: 1100px;
    margin: 0 auto;
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
}

.pricing-matrix col:first-child {
    width: 30%;
}

.pricing-matrix th,
.pricing-matrix td {
    font-family: var(--font-body);
    padding: 12px 16px;
    text-align: center;
    border-bottom: 1px solid var(--hair);
}

.pricing-matrix thead {
    position: sticky;
    top: var(--bar-h);
    z-index: 10;
}

.pricing-matrix th {
    font-size: 12px;
    font-weight: 700;
    color: var(--paper-2);
    padding: 16px;
    border-bottom: 1px solid var(--hair);
    background: var(--canvas);
}

.pricing-matrix td:first-child {
    text-align: left;
    font-size: 14px;
    color: var(--paper);
}

.pricing-matrix td {
    font-size: 14px;
    color: var(--paper-2);
}

/* --------------------------------------------------------------------------
   Pricing Page - FAQ (Collapsible)
   -------------------------------------------------------------------------- */
.pricing-faq {
    max-width: 720px;
    margin: 0 auto;
}

.pricing-faq-item {
    border-bottom: 1px solid var(--hair);
}

.pricing-faq-item:first-child {
    border-top: 1px solid var(--hair);
}

.pricing-faq-q { font-family: var(--font-body); font-size: 17px; font-weight: 600; color: var(--paper); margin: 0; padding: 24px 0 8px; }   /* a heading now: the answers open as a document, no control, no marker */

/* The question row is a <button> (keyboard + aria-expanded); typography restated
   explicitly — NO `font: inherit` (it would flatten the 17px/600 above). */

.pricing-faq-a { font-family: var(--font-body); font-size: 15px; line-height: 1.7; color: var(--paper-2); padding: 0 0 24px; }
.launch-offer--answer { font: inherit; color: inherit; margin: 0; }   /* the launch-offer answer mounts a paragraph; it takes the family's type by inheritance */
.pricing-faq-a a { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }   /* the recipe's prose link (moved out of the archive block) */
.pricing-faq-a a:hover { color: var(--brand-orange); }

/* Ledger extras (2026-07 redesign; content = fill-in slots) */
.pricing-tier-from {
    font-family: var(--font-display);
    color: var(--paper-2);
    font-size: 14px;
    margin-right: 6px;
}
/* The pricing page on the tokens: the featured tier by a paper border and its words (no blue in iteration 1); the offer above the toggle in both states (Robert's ruling at the review's sitting);
   the per-tier first-year line under Annual only; the compare table's row headers; the on-every-plan list; the Enterprise card as an engagement */
/* the featured card alone carries the paper border: its own left border restored over the neighbour's hairline (the siblings drop theirs);
   the card after it needs no colour of its own — its left edge IS this card's right border (a sibling rule had painted the next card's
   whole frame paper too, so two cards read as featured until 2026-09-23) */
.pricing-tier--featured, .pricing-tier--featured:hover { border-color: var(--paper); border-left: 1px solid var(--paper); margin-left: -1px; }
.pricing-tier--featured .pricing-tier-current { color: var(--paper); }
.pricing-offer { font-family: var(--font-body); font-size: 15px; color: var(--paper); border: 1px solid var(--hair); padding: 14px 18px; margin: 0 auto 32px; max-width: 720px; text-align: center; }
.pricing-tier-offer { font-family: var(--font-body); font-size: 13.5px; color: var(--paper-2); min-height: 1.5em; margin: -20px 0 20px; }
.pricing-tier-offer:empty { display: block; }   /* the empty line keeps the cards level when the offer reads under Annual only */
.pricing-tier-line { font-family: var(--font-story); font-size: 17px; color: var(--paper); margin: 0 0 20px; }
.pricing-tier--enterprise .pricing-tier-features a { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }
.pricing-tier--enterprise .pricing-tier-features a:hover { color: var(--brand-orange); }
.pricing-every { max-width: 720px; margin: 0 auto; }
.pricing-every-list { list-style: none; padding: 0; margin: 0; font-family: var(--font-body); font-size: 15px; line-height: 1.55; color: var(--paper-2); }
.pricing-every-list li { position: relative; padding: 10px 0 10px 18px; border-top: 1px solid var(--hair); }
.pricing-every-list li::before { content: ''; position: absolute; left: 0; top: 1.15em; width: 6px; height: 6px; border-radius: 50%; background: var(--paper-2); }
.pricing-trial { font-family: var(--font-body); font-size: 15px; color: var(--paper-2); text-align: center; max-width: 560px; margin: 40px auto 0; }
.pricing-matrix tbody th { text-align: left; font-weight: 500; color: var(--paper); }   /* the compare table's row headers */
@media (max-width: 860px) { .pricing-tier--enterprise .pricing-tier-features a { display: inline-block; padding: 12px 0; } }   /* the card's one inline link blockifies on phones so its padding counts toward the 44 px tap height */

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
/* The footer on the chrome ground behind a hairline — the same material as the bar, so every page runs between two bands of it. */
.site-footer { background: var(--chrome-solid); background: color-mix(in srgb, var(--canvas) 84%, black); color: var(--paper-2); padding: 72px 40px 0; border-top: 1px solid var(--hair); position: relative; z-index: 10; }
/* Three columns (ruled 2026-09-21): the brand column carries the paragraph with its own door and the two product doors beneath it, so it
   stands as tall as the two link columns — the earlier four-column grid put seven rows beside a one-row column. */
.site-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; max-width: 1120px; margin: 0 auto; }
.site-footer-logo { font-family: var(--font-brand); font-weight: 600; font-size: 28px; color: var(--brand-orange); text-decoration: none; display: inline-block; margin-bottom: 14px; line-height: 1; }
.site-footer-brand p { font-family: var(--font-body); font-size: 14.5px; line-height: 1.6; color: var(--mute); max-width: 360px; }
.site-footer-brand p a { color: var(--paper-2); text-decoration: underline; text-underline-offset: 3px; }   /* a link inside prose is underlined, as the utility pages' prose links are — colour alone never marks it */
.site-footer-brand p a:hover { color: var(--brand-orange); }
.site-footer-col h2 { font-family: var(--font-body); font-weight: 600; font-size: 13.5px; color: var(--paper); margin: 8px 0 18px; }
.site-footer-col ul, .site-footer-doors { list-style: none; padding: 0; margin: 0; }
.site-footer-doors { margin-top: 18px; }
.site-footer-col a, .site-footer-doors a { font-family: var(--font-body); font-size: 14px; color: var(--paper-2); text-decoration: none; white-space: nowrap; }   /* a row is one unit: never a break between a glyph and its word, or inside a door's label */
.site-footer-col li, .site-footer-doors li { margin-bottom: 11px; }
.site-footer-col a:hover, .site-footer-doors a:hover { color: var(--brand-orange); }
.site-footer-glyph { display: inline-block; width: 15px; height: 15px; margin-right: 9px; vertical-align: -2px; }   /* the channel rows' glyphs (the envelope, the LinkedIn mark) sit inline in the link's own colour, so the hover turns both */
.site-footer-bottom { display: flex; justify-content: space-between; max-width: 1120px; margin: 56px auto 0; padding: 26px 0 34px; border-top: 1px solid var(--hair); font-family: var(--font-body); font-size: 12.5px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--mute); }
.site-footer-bottom a { color: var(--mute); text-decoration: none; margin-right: 16px; }
.site-footer-bottom a:hover { color: var(--brand-orange); }
.site-footer-heart { color: var(--brand-orange); }   /* a decorative glyph (aria-hidden) — the word beside it is what a screen reader says; a decorative glyph carries no text-contrast claim */
.site-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }   /* text for assistive tech only: painted nowhere, read in order */

/* --------------------------------------------------------------------------
   Responsive - Tablet (1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .section {
        padding: 80px 48px;
    }

    .pricing-tiers {
        gap: 0;
    }

    .pricing-tier {
        padding: 36px 24px;
    }

    .pricing-tier-current {
        font-size: 40px;
    }

}

/* --------------------------------------------------------------------------
   Responsive - The bar's phone collapse (860px): the items and the trial pill leave the bar for the burger's menu; Sign in stays in the bar
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
    .site-nav { padding: 16px 20px; }
    .site-nav-links { display: none; }
    .site-nav-hamburger { display: flex; }
    .site-nav-pill { display: none; }        /* the trial door lives in the menu on phones */
    .site-nav-actions { gap: 6px; }
    /* the 44 px tap heights as invisible hit areas: the logo and the Sign in pill are flex items of the bar, whose padding is box height,
       so padding would grow the bar past its height token — the boxes stay as drawn (26 px and 40 px); the hit areas reach 44 and 62 */
    .site-nav-logo, .site-nav-signin { position: relative; }
    .site-nav-logo::before { content: ''; position: absolute; inset: -9px 0; }
    .site-nav-signin::before { content: ''; position: absolute; inset: -11px 0; }
    /* the footer on phones: two columns, the legal row a column; the tap heights by padding on the inline links — an inline box's
       padding extends the hit target without moving the line box, so the row pitch stays the artifact's 11 px at every width. An
       inline box is as tall as the font's content area (about 17 px at 14 px, 15 px at 12.5 px), not the line box: 14 and 15 px
       of padding reach 44 */
    .site-footer { padding: 64px 20px 0; }
    .site-footer-grid { grid-template-columns: max-content 1fr; gap: 28px; }   /* the Site column as wide as its longest row; the Company column, which carries the address, takes the rest */
    .site-footer-brand { grid-column: 1 / -1; }   /* the brand column spans both; the two link columns sit side by side beneath it */
    .site-footer-bottom { flex-direction: column; gap: 10px; }
    .site-footer-col a, .site-footer-doors a { padding: 14px 0; }
    .site-footer-brand p a { padding: 13px 0; }   /* the paragraph's inline link: 14.5 px of type is about an 18 px content area; 13 px each side reaches 44 without moving the line box */
    .site-footer-bottom a { padding: 15px 0; }
    .site-footer-logo { display: inline-block; padding: 9px 0; }
}

/* --------------------------------------------------------------------------
   Responsive - Mobile (768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .section {
        padding: 64px 24px;
    }

    .pricing-tiers {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }

    .pricing-tier + .pricing-tier {
        border-left: 1px solid var(--hair);   /* stacked: every card keeps its own left edge and the shared edge is the top */
        border-top: none;
    }

    .pricing-tier--featured { margin-left: 0; }   /* the row layout's one-pixel overlap has no neighbour to overlap in the column; the paper border stays */

    .pricing-tier {
        padding: 36px 32px;
    }

    .pricing-matrix th:nth-child(n+4),
    .pricing-matrix td:nth-child(n+4) {
        display: none;
    }

}

/* --------------------------------------------------------------------------
   Responsive - Small (480px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    .section {
        padding: 48px 16px;
    }
}

/* ==========================================================================
   Page-Specific Styles (Product, Philosophy)
   Migrated from legacy.css
   ========================================================================== */

/* Section Title (used by Product, Philosophy) */

/* --------------------------------------------------------------------------
   Blazor Error UI
   -------------------------------------------------------------------------- */

#blazor-error-ui {
    background: #b32121;
    color: white;
    padding: 1rem 1.5rem;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: none;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 1.5rem;
    top: 0.75rem;
}

/* --------------------------------------------------------------------------
   Responsive - Page-Specific
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    h1 { font-size: 64px; }
    h2 { font-size: 48px; }
}

@media (max-width: 768px) {
    h1 { font-size: 36px; }
    h2 { font-size: 28px; }
    h3 { font-size: 22px; }
    p { font-size: 16px; }

}

@media (max-width: 480px) {
    h1 { font-size: 28px; }
    h2 { font-size: 24px; }
}

/* ==========================================================================
   Cookie Consent Banner
   ========================================================================== */

/* The banner is chrome: one small opaque layer on the chrome ground, dismissed once. While it is mounted the page reserves a bottom
   inset equal to its rendered height (site-chrome.js writes --banner-h on the root), so no focused control hides behind it and the
   footer's legal row stays reachable; the inset leaves with the banner, in the same gesture. */
.cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 10000; background: var(--chrome-solid); background: color-mix(in srgb, var(--canvas) 84%, black);
    border-top: 1px solid var(--hair); padding: 16px 0; animation: cookieBannerSlideUp 0.4s ease-out; }
@media (prefers-reduced-motion: reduce) { .cookie-banner { animation: none; } }   /* the slide-up is for everyone else: under reduced motion the banner never moves by itself */
@keyframes cookieBannerSlideUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
/* --banner-h is the ONE carrier of the reserved inset: set on the root while the banner is mounted, removed by its release. The padded
   box is the in-flow wrapper around the main column and the footer — html and body are fixed at 100 % height here, so padding on
   either sits inside a viewport-tall box and adds no scroll room after the content; the scroll padding sits on the root, the scroll
   container, where focus-driven scrolls and anchor scrolls read it. */
.site-content { padding-bottom: var(--banner-h, 0px); }
html { scroll-padding-bottom: var(--banner-h, 0px); }

.cookie-banner-content {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 48px;
    display: flex;
    align-items: center;
    gap: 32px;
}

.cookie-banner-content p { flex: 1; color: var(--paper-2); font-family: var(--font-body); font-size: 14px; line-height: 1.5; margin: 0; }
.cookie-banner-content a { color: var(--paper); text-decoration: underline; }

.cookie-banner-actions {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.cookie-btn-reject,
.cookie-btn-accept {
    white-space: nowrap;
}

.cookie-btn-reject { font-family: var(--font-body); font-size: 14px; font-weight: 500; line-height: 18px; color: var(--paper); background: transparent; border: 1px solid rgba(242, 236, 227, .5); border-radius: 999px; padding: 10px 16px; cursor: pointer; }   /* the outlined paper pill: the border at .5 measures 4.51:1 on the chrome ground; 10 + 18 + 10 + the 1 px border twice = 40 px */
.cookie-btn-accept { font-size: 15px; line-height: 18px; padding: 11px 18px; }   /* the ruled button at its base size: 11 + 18 + 11 = 40 px, the outlined pill's height */

/* phones: the sentence at 13 px and the two buttons in ONE row under it, at their intrinsic widths, each 40 px tall */
@media (max-width: 860px) {
    .cookie-banner { padding: 12px 0; }
    .cookie-banner-content { flex-direction: column; gap: 10px; padding: 0 16px; text-align: center; }
    .cookie-banner-content p { font-size: 13px; }
    .cookie-banner-actions { width: 100%; justify-content: center; }
}

/* ==========================================================================
   Included strip (homepage value differentiator — "included, not upsold")
   ========================================================================== */
.included {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

/* ===== HELP (doc-) — the documentation system on the site's tokens: Inter throughout, sentence case, nothing that is not written ===== */
.doc-crumb { display: flex; gap: 8px; align-items: baseline; font-family: var(--font-body); font-size: 13.5px; font-weight: 500; color: var(--mute); }
.doc-crumb a { color: var(--paper-2); text-decoration: none; }
.doc-crumb a:hover { color: var(--brand-orange); }
.doc-crumb .sep { color: var(--mute); }
.doc-home-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 48px; margin-top: 28px; }
@media (max-width: 900px) { .doc-home-grid { grid-template-columns: 1fr; } }
.doc-cat { border-top: 1px solid var(--hair); padding-top: 18px; }
.doc-cat-label { font-family: var(--font-body); font-size: 13.5px; font-weight: 600; color: var(--paper); }
.doc-topic-card { display: block; padding: 14px 8px; border-bottom: 1px solid var(--hair); color: inherit; text-decoration: none; }
.doc-topic-card:hover .t { color: var(--brand-orange); }
.doc-topic-card .t { display: block; font-family: var(--font-body); font-size: 16px; font-weight: 600; color: var(--paper); }
.doc-topic-card .d { display: block; color: var(--paper-2); font-size: 14px; line-height: 1.55; margin-top: 4px; }
.doc-article { display: grid; grid-template-columns: minmax(0, 7fr) 3fr; gap: 56px; align-items: start; margin-top: 32px; }
@media (max-width: 900px) { .doc-article { grid-template-columns: 1fr; } .doc-siblings { display: none; } }
.doc-body { max-width: 720px; }
.doc-body--wide { max-width: 760px; }
.doc-lead { color: var(--paper-2); font-size: 17px; line-height: 1.7; margin: 14px 0 8px; }
.doc-body h1, .doc-title { font-family: var(--font-body); font-weight: 600; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.15; color: var(--paper); margin: 10px 0 0; }   /* documentation titles read as documentation: sentence case, Inter */
.doc-body h2 { font-family: var(--font-body); font-size: 20px; font-weight: 600; color: var(--paper); margin: 40px 0 10px; scroll-margin-top: calc(var(--bar-h) + 24px); }
.doc-body p { color: var(--paper-2); font-size: 15.5px; line-height: 1.7; margin: 10px 0; }
.doc-body p b, .doc-steps li b, .doc-tip b { color: var(--paper); font-weight: 600; }
.doc-body a { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }
.doc-body a:hover { color: var(--brand-orange); }
.doc-steps { counter-reset: doc-step; list-style: none; margin: 18px 0; padding: 0; }
.doc-steps li { counter-increment: doc-step; position: relative; padding: 10px 0 10px 44px; color: var(--paper-2); font-size: 15.5px; line-height: 1.65; border-bottom: 1px solid var(--hair); }
.doc-steps li::before { content: counter(doc-step); position: absolute; left: 0; top: 10px; width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--hair); color: var(--paper); font-family: var(--font-body); font-size: 12.5px; font-weight: 600; }
.doc-tip { border-left: 2px solid var(--brand-orange); padding: 6px 0 6px 16px; margin: 18px 0; color: var(--paper-2); font-size: 14.5px; line-height: 1.6; }
.doc-ref { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 14.5px; }
.doc-ref th { text-align: left; font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--mute); padding: 8px; border-bottom: 1px solid var(--hair); }
.doc-ref td { padding: 9px 8px; border-bottom: 1px solid var(--hair); color: var(--paper-2); line-height: 1.55; }
.doc-ref td:first-child { color: var(--paper); font-weight: 600; }
.doc-siblings { position: sticky; top: calc(var(--bar-h) + 30px); border-left: 1px solid var(--hair); padding-left: 20px; }
.doc-siblings .h { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--mute); margin-bottom: 10px; }
.doc-siblings a { display: block; padding: 6px 0; color: var(--paper-2); font-size: 14px; text-decoration: none; line-height: 1.5; }
.doc-siblings a:hover { color: var(--paper); }
.doc-siblings a.active { color: var(--paper); box-shadow: inset 2px 0 0 var(--brand-orange); padding-left: 10px; margin-left: -20px; padding-left: 28px; }
.doc-map { border-top: 1px solid var(--hair); margin-top: 28px; }
.doc-map-row { display: flex; align-items: baseline; gap: 16px; padding: 16px 8px; border-bottom: 1px solid var(--hair); color: inherit; text-decoration: none; }
a.doc-map-row:hover .t { color: var(--brand-orange); }
.doc-map-row .t { font-family: var(--font-body); font-size: 15.5px; font-weight: 600; color: var(--paper); min-width: 200px; }
.doc-map-row .d { color: var(--paper-2); font-size: 14px; line-height: 1.5; flex: 1; }
.doc-type-badge { font-family: var(--font-body); font-size: 12px; font-weight: 500; color: var(--mute); border: 1px solid var(--hair); padding: 3px 8px; white-space: nowrap; }
.doc-prevnext { display: flex; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--hair); }
.doc-prevnext a { color: var(--paper-2); font-size: 14px; text-decoration: none; }
.doc-prevnext a:hover { color: var(--brand-orange); }
.doc-cat-label--map { display: block; margin-top: 44px; }
.doc-page { background: var(--canvas); color: var(--paper); padding: 40px 0 96px; }
.doc-page--home { padding-top: 110px; }   /* the Help home has no breadcrumb: it starts where every utility page starts */
.doc-wrap { max-width: 1120px; margin: 0 auto; padding: 0 40px; }   /* the one container of every Help page */
.doc-page :focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
@media (max-width: 860px) { .doc-page { padding: 20px 0 64px; } .doc-page--home { padding-top: 60px; } .doc-wrap { padding: 0 20px; } .doc-crumb a, .doc-topic-card, .doc-map-row, .doc-prevnext a, .doc-body a, .doc-siblings a { padding-top: 12px; padding-bottom: 12px; }
  .doc-prevnext a { display: inline-block; } }   /* the two inline prev / next links blockify on phones so their padding counts toward the 44 px tap height: an inline box's rect is the font's content area alone */

/* ===== THE HOME PAGE (2026-09 rebuild) ===== */
.home-page { position: relative; overflow: clip; background: var(--canvas); color: var(--paper); font-family: var(--font-story); }
.home-line { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.home-line-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; }
.home-line path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.home-line-ghost { stroke: rgba(242, 236, 227, .3); stroke-dasharray: 1 5; stroke-width: 1.5; }
.home-line-drawn { stroke: var(--brand-orange); stroke-width: 2.5; filter: drop-shadow(0 0 5px rgba(239, 70, 0, .5)); stroke-dasharray: 0 1000; }
.home-page > section, .home-tl { position: relative; z-index: 2; }
/* the hero */
.home-hero { max-width: 1480px; margin: 0 auto; padding: 8vh 40px 0; text-align: center; }
.home-h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(52px, 8.6vw, 124px); line-height: .95; letter-spacing: -.01em; text-transform: uppercase; margin: 0; }
.home-stop { color: var(--brand-orange); }
.home-sub { font-family: var(--font-story); font-weight: 400; font-size: clamp(21px, 2.3vw, 32px); line-height: 1.25; color: var(--paper-2); max-width: 780px; margin: 28px auto 0; }
.home-doors { max-width: 780px; margin: 34px auto 0; }
.home-cap { font-family: var(--font-story); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.4; color: var(--paper-2); margin: 0; }
.home-pair { display: flex; justify-content: center; align-items: center; gap: 14px 28px; flex-wrap: wrap; margin-top: 24px; }
.home-door-pill { font-family: var(--font-body); font-weight: 600; font-size: 15px; color: var(--paper); text-decoration: none; border: 1px solid rgba(242, 236, 227, .5); padding: 12px 20px; border-radius: 999px; }   /* the boundary at .5 over the canvas measures 4.36:1 (the floor is 3:1) */
.home-door-link { font-family: var(--font-body); font-size: 15px; color: var(--paper); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(242, 236, 227, .4); }
/* the dated timeline: a three-column grid, the date on the line, the frame on one side */
.home-tl { max-width: 1400px; margin: 120px auto 0; }
.home-row { position: relative; display: grid; grid-template-columns: 1fr 120px 1fr; align-items: start; padding: 24px 0; }
.home-date { grid-column: 2; grid-row: 1; justify-self: center; position: relative; text-align: center; font-family: var(--font-story); font-size: 15px; color: var(--paper-2); padding-top: 22px; margin-top: 6px; transition: opacity .7s ease; }
.home-date .home-dot { position: absolute; left: 50%; top: 0; transform: translateX(-50%); }
.home-dot, .home-end { display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 5px rgba(242, 236, 227, .12); transition: opacity .7s ease; }
.home-row--left .site-frame { grid-column: 1; grid-row: 1; justify-self: end; margin-right: 14px; }
.home-row--right .site-frame { grid-column: 3; grid-row: 1; justify-self: start; margin-left: 14px; }
/* the no-script floor on desktop sits on the script's even cadence (2026-09-23): every row after the first is pulled up so the rows fall
   at one step — half the clearance two rows on a side need (the row's height plus the 110 px gap, less the 48 px of padding both carry).
   The margin is that step minus the row's own height, which comes to 25.5 px plus half the frame's 3:2 height from the column's width
   (about 65 px of caption block — the 14 px above it and the two lines — and 48 px of padding sit inside the row); the script then
   measures and corrects by pixels. Without this the scripted page pulled every row up by the whole compaction after the first paint, and
   a restored scroll shifted by that much. */
@media (min-width: 861px) {
    .home-tl .home-row + .home-row { margin-top: calc(-25.5px - min(620px, (100vw - 120px) / 2) / 3); }
    .home-tl .home-row.home-row--note { margin-top: 0; }
}
@media (min-width: 861px) and (max-width: 1400px) {
    .home-tl .home-row + .home-row { margin-top: calc(-25.5px - min(520px, (100vw - 120px) / 2) / 3); }
}
.home-row--note { grid-template-columns: 1fr; padding: 40px 0 30px; }
.home-note { grid-column: 1; justify-self: center; position: relative; font-family: var(--font-story); font-size: clamp(26px, 3vw, 42px); line-height: 1.2; color: var(--paper); background: var(--canvas); padding: 8px 30px; margin: 0; transition: opacity .7s ease; }
.home-note .home-dot { position: absolute; left: 50%; top: 50%; visibility: hidden; }
/* the frame: 3:2, 620 above 1400, 520 at and below, full width on phones; no mat, a paper hairline */
.site-frame { width: min(620px, 100%); margin: 0; }
@media (max-width: 1400px) { .site-frame { width: min(520px, 100%); } }
.site-frame-box { position: relative; }   /* the mat and, over its corner, the pause pill: the pill's positioning parent, a sibling of the mat so the mat's future dim never reaches the control */
.site-frame-mat { position: relative; aspect-ratio: 3 / 2; border: 1px solid var(--hair); border-radius: 5px; overflow: hidden; transition: opacity .7s ease, filter .7s ease; }   /* the box owns the ratio, so a hidden video leaves the poster its room (print) */
.site-frame-media, .site-frame-poster { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.site-frame-poster { position: absolute; inset: 0; }
.site-frame--playing .site-frame-poster { visibility: hidden; }
/* a station's caption is its HEADLINE (Robert, 2026-09-23: "even I have to actively try to find them" — a 15.5 px regular line under a 620 px
   frame, the same size as the date on the line, hid): the module name a small kicker in mute, the title at the highlights' size and weight */
.site-frame-caption { margin: 14px 0 0; }
.site-frame-module { display: block; font-family: var(--font-story); font-size: 14px; color: var(--mute); margin-bottom: 1px; }   /* the caption keeps its tone in both states: mute at .75 would fail AA */
.site-frame-line { display: block; font-family: var(--font-story); font-size: clamp(18px, 1.55vw, 22px); font-weight: 500; line-height: 1.25; color: var(--paper); transition: opacity .7s ease; }
/* the future state, per element — the script adds is-future; the default is KEPT, so the no-script page is whole */
.home-row.is-future .site-frame-mat { opacity: .42; filter: saturate(.3); }
.home-row.is-future .home-date, .home-row.is-future .site-frame-line { opacity: .75; }
.home-row.is-future .home-note { opacity: .6; }
.home-row.is-future .home-dot, .home-beat.is-future .home-dot, .home-statement.is-future .home-dot, .home-coda.is-future .home-end { opacity: .35; }
.home-statement.is-future h2 { opacity: .6; }
/* the beats wake on the tip's arrival too (2026-09-23): the heading and the frame ahead of the tip sit faint, the text stays full */
.home-beat.is-future h2, .home-strip.is-future h3 { opacity: .6; }
.home-beat.is-future .site-frame-mat { opacity: .42; filter: saturate(.3); }
.home-coda:not(.is-future) .home-end { background: var(--brand-orange); box-shadow: 0 0 0 7px rgba(239, 70, 0, .15), 0 0 16px rgba(239, 70, 0, .7); }
/* the beats */
.home-beat { position: relative; max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 620px; gap: 60px; align-items: start; padding: 190px 40px 30px; }
.home-beat--left, .home-strip--left { grid-template-columns: 620px minmax(0, 1fr); }
.home-beat--left .home-text, .home-strip--left .home-text { order: 2; padding-left: 40px; }
@media (max-width: 1400px) { .home-beat { grid-template-columns: minmax(0, 1fr) 520px; } .home-beat--left, .home-strip--left { grid-template-columns: 520px minmax(0, 1fr); } }
.home-beat .home-text { max-width: 520px; padding-top: 4px; }
.home-beat h2 { font-family: var(--font-story); font-weight: 500; font-size: clamp(32px, 3.6vw, 50px); line-height: 1.08; letter-spacing: -.01em; margin: 0 0 26px; transition: opacity .7s ease; }
.home-beat p { font-family: var(--font-story); font-weight: 400; font-size: clamp(18px, 1.55vw, 22px); line-height: 1.5; color: var(--paper-2); margin: 0 0 18px; }
.home-beat > .home-dot { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); visibility: hidden; z-index: 3; }   /* placed by the script on the heading's first line; hidden until then, so no stray dot sits at a beat's top without the script */
.home-beat > .home-dot.is-placed { visibility: visible; }
.home-pile h2 { font-weight: 400; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.25; color: var(--paper); }   /* after the beat rule at equal specificity: the pile's sentence heading is lighter and smaller than a beat heading */
.home-pilebox { position: relative; height: 434px; }
.home-card { position: absolute; transform: rotate(var(--r)); background: var(--canvas-3); border: 1px solid rgba(242, 236, 227, .2); border-radius: 8px; padding: 10px 13px; font-family: var(--font-body); font-size: 13.5px; color: var(--paper-2); box-shadow: 0 10px 26px rgba(0, 0, 0, .25); white-space: nowrap; }
.home-tag { display: inline-block; font-size: 10.5px; letter-spacing: .03em; color: var(--paper-2); border: 1px solid var(--hair); border-radius: 3px; padding: 1px 5px; margin-right: 8px; vertical-align: 1px; }   /* paper-2, not mute: at 10.5 px mute would fail AA */
.home-card--bubble { border-radius: 16px 16px 16px 4px; background: var(--bubble); color: var(--paper); }
.home-card--ask { border-color: rgba(239, 70, 0, .6); border-radius: 16px 16px 4px 16px; }
.home-pile.is-future .home-card { opacity: 0; }
.home-pile.has-arrived .home-card { animation: home-tumble .6s cubic-bezier(.2, .7, .2, 1) both; }
.home-pile.has-arrived .home-card:nth-child(2) { animation-delay: .07s; } .home-pile.has-arrived .home-card:nth-child(3) { animation-delay: .14s; }
.home-pile.has-arrived .home-card:nth-child(4) { animation-delay: .21s; } .home-pile.has-arrived .home-card:nth-child(5) { animation-delay: .28s; }
.home-pile.has-arrived .home-card:nth-child(6) { animation-delay: .35s; } .home-pile.has-arrived .home-card:nth-child(7) { animation-delay: .42s; }
.home-pile.has-arrived .home-card:nth-child(8) { animation-delay: .49s; }
@keyframes home-tumble { from { opacity: 0; transform: translate(-18px, 34px) rotate(calc(var(--r) - 9deg)) scale(.96); } to { opacity: 1; transform: rotate(var(--r)); } }
.home-statement { position: relative; max-width: 1400px; margin: 0 auto; padding: 230px 40px 0; text-align: center; }
.home-statement h2 { display: inline-block; position: relative; font-family: var(--font-story); font-weight: 500; font-size: clamp(34px, 4.2vw, 60px); line-height: 1.12; letter-spacing: -.012em; margin: 0; color: var(--paper); background: var(--canvas); padding: 10px 34px; max-width: 960px; transition: opacity .7s ease; }
/* the statement's dot is the STATION MARKER ONLY, never shown: the script places it on the heading's first line to know where the
   statement's station is, and the approved artifact gave it no fill and kept it hidden — a centred sentence has its middle exactly where
   the line runs, so a visible dot lands on a word (it did, inherited from the beats' dot, until 2026-09-23) */
.home-statement > .home-dot { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); visibility: hidden; z-index: 3; }
.home-strip { padding: 110px 40px 24px; align-items: center; }
.home-strip h3 { font-family: var(--font-story); font-weight: 500; font-size: clamp(22px, 2vw, 28px); line-height: 1.2; margin: 0 0 14px; color: var(--paper); transition: opacity .7s ease; }
/* the highlights beat: no frame; the heading and its line in the text column, the list across the beat in two columns astride the line */
.home-beat.home-beat--hl { grid-template-columns: 1fr; padding-bottom: 130px; }   /* the list ends in text, not a frame: room before the open band's paper (Robert's eye, 2026-09-23) */
.home-hl { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 60px; row-gap: 26px; }
.home-hl li { font-family: var(--font-story); font-weight: 400; font-size: clamp(18px, 1.55vw, 22px); line-height: 1.5; color: var(--paper-2); }
.home-hl li b { font-weight: 500; color: var(--paper); }
/* the open band: its paper ground is a pseudo-element UNDER the running line (z 0 against the line's 1) and its content sits above the line
   (the column at 2), so the line crosses the band as approved; the section itself forms no stacking context (the sections' z-index 2 would
   lift the ground over the line — the built band hid the line until 2026-09-23) */
.home-page > .home-band { z-index: auto; }
.home-band { position: relative; color: var(--canvas); padding: 190px 0; }
.home-band::before { content: ""; position: absolute; inset: 0; background: var(--paper); z-index: 0; }
.home-band-col { position: relative; z-index: 2; max-width: 1120px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.home-band h2 { font-family: var(--font-story); font-weight: 500; font-size: clamp(32px, 3.6vw, 50px); line-height: 1.08; letter-spacing: -.01em; margin: 0 0 22px; color: var(--canvas); }
.home-band p { font-family: var(--font-story); font-size: clamp(18px, 1.55vw, 22px); line-height: 1.5; color: var(--paper-body); margin: 0 0 14px; }
.home-band-doors { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; margin-top: 22px; }
.home-band-link { font-family: var(--font-body); font-size: 14px; color: var(--canvas); text-decoration: underline; text-underline-offset: 3px; }
.home-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.home-tier { border: 1px solid rgba(23, 19, 16, .14); border-radius: 12px; padding: 16px; background: #fff; }
.home-tier-n { font-family: var(--font-story); font-size: 13px; color: var(--paper-small); }
.home-tier-p { font-family: var(--font-display); font-weight: 700; font-size: 38px; line-height: 1; margin: 8px 0 2px; color: var(--canvas); }
.home-tier-p small { font-family: var(--font-body); font-size: 13px; color: var(--paper-small); }
.home-tier-m { font-family: var(--font-story); font-size: 12px; color: var(--paper-small); }   /* #6b6259 measures 5.09:1 on paper; the lighter grey of the test page failed AA */
.home-band :focus-visible { outline: 2px solid var(--canvas); outline-offset: 3px; }
/* the coda */
.home-coda { position: relative; max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 170px 40px 170px; }
.home-coda h2 { font-family: var(--font-story); font-weight: 500; font-size: clamp(36px, 5.2vw, 72px); line-height: 1.05; letter-spacing: -.012em; margin: 0; }
.home-coda .btn-brand { margin-top: 64px; }
.home-end { position: absolute; left: 50%; top: 70px; transform: translateX(-50%); width: 14px; height: 14px; }
.home-page :focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
/* the clip's control — a normal player's (Robert's rulings, 2026-09-23): a play / pause glyph centred on the mat, on the canvas as a veil so it
   reads over any frame, OUT of the flow (a control in flow under the mat had moved every row below it the moment the script revealed it — a
   0.29 layout shift on a phone deep in the page); hidden until the module runs with motion allowed, so the no-script page never shows a dead
   control, and the reduced-motion block below re-hides it at this rule's own specificity, later in the file; faded while the clip plays,
   back on hover over the frame, on focus and on pause. The whole frame is the tap target: the script listens on the box, which this button
   bubbles to. The word beside the glyph is for assistive tech (the screen-reader-only recipe). */
.site-frame-control { display: none; position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; padding: 0; z-index: 1; align-items: center; justify-content: center; color: var(--paper); background: rgba(43, 36, 30, .82); border: 1px solid rgba(242, 236, 227, .6); border-radius: 50%; cursor: pointer; opacity: 1; transition: opacity .4s ease; }   /* the backing is --canvas at .82 */
.site-frame-control svg { width: 24px; height: 24px; fill: currentColor; }
.site-frame-glyph-pause { display: none; }   /* the glyph follows the frame's state: play at rest, paused or ended; pause while the clip runs */
.site-frame--playing:not(.site-frame--paused) .site-frame-glyph-play { display: none; }
.site-frame--playing:not(.site-frame--paused) .site-frame-glyph-pause { display: block; }
.home-page--live .site-frame-control { display: inline-flex; }
.home-page--live .home-row.is-future .site-frame-control, .home-page--live .home-beat.is-future .site-frame-control { display: none; }   /* a station the line has not reached offers no control: a tap there would play ahead of the story, and a control that does nothing is a dead control */
.site-frame--playing:not(.site-frame--paused) .site-frame-control { opacity: 0; }   /* the fade: a running clip shows no control … */
.site-frame-box:hover .site-frame-control, .site-frame-control:focus-visible { opacity: 1; }   /* … until the pointer is over the frame or the control has focus; a pause brings it back through the state classes */
.site-frame--clip .site-frame-box { cursor: pointer; }   /* the whole frame is the tap target (the script toggles the clip on the box) */
.home-tl .home-row { pointer-events: none; }   /* the timeline rows overlap (an even step of about half a row): a row's empty box must not catch the pointer over the previous frame's lower part, or neither hover nor a tap reaches it there */
.home-tl .home-row > * { pointer-events: auto; }
/* phones */
@media (max-width: 860px) {
    .home-hero { padding: 8vh 20px 0 34px; }   /* centred as on desktop; the column's own side paddings */
    .home-h1 { font-size: clamp(44px, 13vw, 80px); } .home-stop { color: inherit; }
    .home-door-link, .home-band-link { padding: 12px 0; }   /* the 44 px tap height by padding, not layout */
    .home-tl { margin-top: 36px; padding: 0 20px 0 34px; }
    .home-row { grid-template-columns: 1fr; padding: 10px 0; }
    .home-date { grid-column: 1; grid-row: 1; justify-self: start; text-align: left; padding: 0; }
    .home-date .home-dot { left: -25px; top: 5px; transform: none; }
    .home-row--left .site-frame, .home-row--right .site-frame { grid-column: 1; grid-row: 2; justify-self: start; margin: 8px 0 0; width: 100%; }   /* one frame width on phones: stations and plates alike */
    .home-row--note { padding: 40px 0 16px; } .home-note { justify-self: start; background: transparent; padding: 0; } .home-note .home-dot { left: -25px; top: 50%; }
    .home-beat, .home-beat--left, .home-strip, .home-strip--left { grid-template-columns: 1fr; gap: 28px; padding: 90px 20px 10px 34px; }
    .home-beat .home-text, .home-beat--left .home-text, .home-strip--left .home-text { order: 0; max-width: none; padding-left: 0; }   /* the flipped twins neutralised at equal specificity: one column, one left edge */
    .home-strip, .home-strip--left { padding: 30px 20px 10px 34px; }   /* one value for both strip sides */
    .home-beat > .home-dot, .home-statement > .home-dot { left: 20px; }
    .home-pilebox { height: auto; padding-top: 4px; } .home-card { position: static; display: inline-block; margin: 8px 10px 0 0; white-space: normal; }
    .home-statement { padding: 110px 20px 0 34px; text-align: left; } .home-statement h2 { padding: 0; background: transparent; }
    .home-hl { grid-template-columns: 1fr; row-gap: 18px; margin-top: 22px; } .home-beat.home-beat--hl { padding-bottom: 60px; }
    .home-band { padding: 90px 0; } .home-band-col { grid-template-columns: 1fr; padding: 0 20px 0 34px; } .home-tiers { grid-template-columns: 1fr; } .home-tier { display: flex; align-items: baseline; gap: 14px; } .home-tier-p { margin: 0; }
    .home-coda { padding: 110px 20px 170px 34px; } .home-end { left: 20px; top: 40px; }   /* centred as on desktop; the dot keeps its translate onto the x = 14 line */
    .site-frame { width: 100%; }
    .site-frame-control { width: 48px; height: 48px; margin: -24px 0 0 -24px; }   /* the tap size on phones; a tap anywhere on the frame toggles the clip too */
}
/* reduced motion: nothing dims, tumbles or plays; no pause pill is offered */
@media (prefers-reduced-motion: reduce) {
    .home-row.is-future .site-frame-mat, .home-row.is-future .home-date, .home-row.is-future .site-frame-line, .home-row.is-future .home-note, .home-statement.is-future h2, .home-beat.is-future h2, .home-strip.is-future h3, .home-beat.is-future .site-frame-mat { opacity: 1; filter: none; }
    .home-pile .home-card, .home-pile.has-arrived .home-card { animation: none; opacity: 1; }
    .site-frame-mat, .home-dot, .home-end, .home-date, .site-frame-line, .home-note, .home-statement h2, .home-beat h2, .home-strip h3 { transition: none; }
    .home-page--live .site-frame-control { display: none; }   /* at the reveal rule's own specificity; the reveal is written above this block, so this wins by order */
}
/* forced colours: the line, the dots and the pills take the system colours */
@media (forced-colors: active) { .home-line-drawn, .home-line-ghost { stroke: CanvasText; filter: none; } .home-dot, .home-end { background: CanvasText; box-shadow: none; } .home-door-pill, .btn-brand { border: 1px solid ButtonText; } }
/* print: the same-role colours follow the print tokens the chrome block re-declares; here the layout changes and the inverse-role
   colours and the hero doors' two literal inks are re-stated — the line and the pile out, the frames' images in (a clip prints its poster, played or not), the beats allowed to break */
@media print {
    .home-line, .home-pilebox, .home-line-svg, video.site-frame-media { display: none; }
    .site-frame-poster, .site-frame--playing .site-frame-poster { position: static; visibility: visible; }   /* the playing rule hides the poster at (0,2,0); a played clip must still print its poster, so the print rule meets it there */
    .home-beat, .home-strip, .home-row { break-inside: auto; page-break-inside: auto; grid-template-columns: 1fr; padding: 24px 0; }
    .home-hl { grid-template-columns: 1fr; }
    .home-row.is-future .site-frame-mat, .home-row.is-future .home-date, .home-row.is-future .site-frame-line, .home-row.is-future .home-note, .home-statement.is-future h2, .home-pile.is-future .home-card, .home-beat.is-future h2, .home-strip.is-future h3, .home-beat.is-future .site-frame-mat { opacity: 1; filter: none; }
    .home-band::before { background: #fff; } .home-tier { border-color: #ccc; }
    .home-band h2, .home-band-link, .home-tier-p { color: #111; }   /* the open band reads a canvas token as TEXT (inverse-role): the print tokens alone would paint it white on white */
    .home-door-pill { border-color: rgba(0, 0, 0, .3); } .home-door-link { text-decoration-color: #444; }   /* the hero doors' two literal paper-alpha inks would vanish on white: the text goes dark through the tokens, the boundary and the underline are re-stated */
    .home-page--live .site-frame-control { display: none; }   /* a control never prints; the scripted page carries the live class that reveals the control, so the hiding meets the reveal at its own specificity */
}

/* ===== THE UTILITY PAGES (start · legal · status; 2026-09 restyle) ===== */
.ut-page { background: var(--canvas); color: var(--paper); font-family: var(--font-body); padding: 110px 24px 120px; }
.ut-body { max-width: 560px; margin: 0 auto; text-align: center; }   /* the column is centred at this one home; the card and the legal document are the two left-aligned surfaces and declare themselves below */
.ut-body--document { max-width: 720px; position: relative; }
.ut-form { max-width: 480px; margin: 0 auto; }   /* the start form's bound (today's width) and the scope of the phone full-width arm */
.ut-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(32px, 4vw, 44px); line-height: 1.05; letter-spacing: -.01em; text-transform: uppercase; margin: 0 0 14px; }
.ut-title--start { font-size: clamp(36px, 5vw, 72px); line-height: .95; }
.ut-lead { font-size: 16px; line-height: 1.7; color: var(--paper-2); margin: 0 auto 32px; max-width: 480px; }
.ut-lead strong, .ut-body strong { color: var(--paper); font-weight: 600; }
.ut-body p, .ut-body li { font-size: 16px; line-height: 1.7; color: var(--paper-2); }
.ut-body .ut-small { font-size: 14px; line-height: 1.6; color: var(--mute); }   /* scoped under the body: the small print renders as paragraphs, and a lone class would lose to the paragraph rule above */
.ut-body h2 { font-family: var(--font-body); font-weight: 600; font-size: 20px; color: var(--paper); margin: 40px 0 16px; scroll-margin-top: calc(var(--bar-h) + 20px); }
.ut-document { text-align: left; }   /* the legal document reads as a document, not as a centred column */
.ut-document a, .ut-links a, .ut-state a, .ut-card ul a { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }   /* the prose links — the legal document, the link lines, the availability hint, the rows of a card's list; never the doors, which are button anchors inside the same body */
.ut-document a:hover, .ut-links a:hover, .ut-state a:hover, .ut-card ul a:hover { color: var(--brand-orange); }
.ut-page :focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.ut-field { display: flex; align-items: stretch; background: var(--paper); color: var(--button-text); border: 1px solid var(--hair); border-radius: 8px; overflow: hidden; color-scheme: light; }   /* the one light control on the dark page declares its own scheme, so the UA paints its caret and autofill for a light field; the hairline is a boundary the field's fill already carries at 13:1 */
.ut-field input { flex: 1; min-width: 0; border: none; background: transparent; color: var(--button-text); font-family: var(--font-body); font-size: 18px; font-weight: 600; padding: 16px 20px; outline: none; }
.ut-field select { flex: 1; min-width: 0; width: 100%; border: none; background: transparent; color: var(--button-text); font-family: var(--font-body); font-size: 18px; font-weight: 600; padding: 16px 20px; outline: none; cursor: pointer; }   /* a choice is a line control and carries the field's face; the chevron is the light scheme's own */
.ut-field textarea { flex: 1; min-width: 0; width: 100%; border: none; background: transparent; color: var(--button-text); font-family: var(--font-body); font-size: 16px; font-weight: 400; line-height: 1.6; padding: 16px 20px; outline: none; resize: vertical; min-height: 168px; }   /* the one prose control carries the body's face, not the line controls' display weight */
.ut-field input::placeholder, .ut-field textarea::placeholder { color: var(--paper-small); }
.ut-field input:disabled, .ut-field select:disabled, .ut-field textarea:disabled { opacity: .5; cursor: not-allowed; }   /* the paper field's dim: its light fill reads as inert at .5, where the orange pill needs .45; a disabled control carries no contrast claim */
.ut-field:focus-within { outline: 2px solid var(--brand-orange); outline-offset: 2px; }
.ut-field-suffix { display: flex; align-items: center; padding: 0 20px; font-size: 18px; color: var(--paper-small); border-left: 1px solid rgba(23, 19, 16, .12); white-space: nowrap; }
.ut-body .ut-state { min-height: 24px; margin: 12px 0 16px; font-size: 14px; color: var(--paper); }   /* an outcome — available, unavailable — in paper, aligned as its surface is (centred on the column, left inside a card); scoped like the small print, since a state renders as a paragraph too */
.ut-state[data-state="hint"], .ut-state[data-state="checking"] { color: var(--mute); }   /* a hint or a wait in mute: the two neutral tones, no semantic colour */
.ut-glyph { display: inline-block; margin-right: 6px; }
.ut-disc { width: 64px; height: 64px; margin: 0 auto 24px; border-radius: 50%; border: 1.5px solid var(--paper-2); display: flex; align-items: center; justify-content: center; color: var(--paper); font-size: 28px; }
.ut-card { background: var(--canvas-2); border: 1px solid var(--hair); border-radius: 12px; padding: 32px; text-align: left; }
.ut-card h2 { font-size: 16px; margin: 0 0 20px; }
.ut-card label { display: block; font-size: 14px; font-weight: 600; margin: 0 0 8px; }   /* a field label inside a card, above its paper field */
.ut-field + label { margin-top: 20px; }   /* the next field's label, clear of the field above it */
.ut-card h3 { font-family: var(--font-body); font-weight: 600; font-size: 16px; color: var(--paper); margin: 0 0 4px; }   /* a row's name in a card's list */
.ut-card + .ut-card { margin-top: 32px; }
.ut-card ol { list-style: none; padding: 0; margin: 0; counter-reset: tips; }
.ut-card ol li { padding: 12px 0 12px 32px; position: relative; counter-increment: tips; }
.ut-card ul { list-style: none; padding: 0; margin: 0; }   /* the unnumbered list is a list of rows: a name, a line, a link */
.ut-card ul li { padding: 14px 0; }
.ut-card ul li + li { border-top: 1px solid var(--hair); }
.ut-card ul li p { margin: 0 0 6px; }
.ut-card ol li::before { content: counter(tips) "."; position: absolute; left: 0; top: 10px; color: var(--brand-orange); font-size: 19px; font-weight: 700; line-height: 1; }   /* the numerals in orange at the large-text size: 3.63:1 on this ground clears the 3:1 line, which 16 px could not */
.ut-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }   /* the honeypot: out of sight and out of the Tab order, in the DOM for bots to trip on */
.ut-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }   /* one door centred, or two side by side (the setup page's retry beside its start-over) with a gap no inline style has to carry */
.ut-links { margin-top: 16px; }
.ut-note { margin-top: 24px; }
/* the legal contents rail: kept in place, re-toned; hidden on narrow screens as today */
.ut-rail { position: absolute; right: calc(100% + 48px); top: 0; width: 160px; height: 100%; }
.ut-rail-list { position: sticky; top: calc(var(--bar-h) + 20px); list-style: none; padding: 0; margin: 0; }
.ut-rail-link { display: flex; align-items: center; gap: 8px; padding: 6px 0 6px 8px; font-size: 12px; color: var(--mute); text-decoration: none; white-space: nowrap; transition: color .2s; }
.ut-rail-link:hover { color: var(--paper); }
.ut-rail-link.active { color: var(--paper); box-shadow: inset 2px 0 0 var(--brand-orange); }   /* the active state as a 2 px orange bar inside the padding every link carries, so the text never moves when the bar appears; a non-text mark: orange text at 12 px cannot clear 4.5:1 on the canvas */
.ut-rail-num { display: inline-flex; justify-content: center; width: 20px; font-weight: 700; font-size: 11px; font-variant-numeric: tabular-nums; }
/* the missing station (the not-found pages): the ghost path across, the drawn bar to its stop, three lit stations, the never-lit ring, the
   tip; the END state is the default — the run class, added once by the chrome script, plays the draw and lands the words after it */
.ut-moment { position: relative; height: 120px; margin: 0 auto 34px; width: 100%; --ut-stop: 66%; }
.ut-moment-ghost { position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; transform: translateY(-50%); background: radial-gradient(circle, rgba(242, 236, 227, .34) .8px, transparent 1px) 0 0 / 6.5px 1.5px repeat-x; }
.ut-moment-drawn { position: absolute; left: 0; top: 50%; height: 2.5px; width: var(--ut-stop); transform: translateY(-50%); background: var(--brand-orange); border-radius: 2px; box-shadow: 0 0 6px rgba(239, 70, 0, .55); }
.ut-moment-dot { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); transform: translate(-50%, -50%); box-shadow: 0 0 0 5px rgba(242, 236, 227, .12); }
.ut-moment-dot--s1 { left: 18%; } .ut-moment-dot--s2 { left: 36%; } .ut-moment-dot--s3 { left: 54%; }
.ut-moment-gap { position: absolute; top: 50%; left: 70%; width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%, -50%); opacity: .35; border: 1.5px solid var(--paper-2); }
.ut-moment-tip { position: absolute; top: 50%; left: var(--ut-stop); width: 10px; height: 10px; border-radius: 50%; background: var(--brand-orange); transform: translate(-50%, -50%); box-shadow: 0 0 0 6px rgba(239, 70, 0, .15), 0 0 14px rgba(239, 70, 0, .6); }
.ut-moment--play .ut-moment-drawn { animation: ut-draw 1.1s cubic-bezier(.2, .7, .2, 1) .35s both; }
.ut-moment--play .ut-moment-tip { animation: ut-travel 1.1s cubic-bezier(.2, .7, .2, 1) .35s both; }
.ut-moment--play .ut-moment-dot { animation: ut-light .5s ease both; }
.ut-moment--play .ut-moment-dot--s1 { animation-delay: calc(.35s + 1.1s * .22); } .ut-moment--play .ut-moment-dot--s2 { animation-delay: calc(.35s + 1.1s * .44); } .ut-moment--play .ut-moment-dot--s3 { animation-delay: calc(.35s + 1.1s * .66); }
.ut-moment--play ~ .ut-title, .ut-moment--play ~ .ut-lead, .ut-moment--play ~ .ut-actions { animation: ut-land .6s ease 1.6s both; }   /* the words land after the stop: the moment is the first child of the body, the title, the sentence and the door its siblings */
@keyframes ut-draw { from { width: 0; } to { width: var(--ut-stop); } }
@keyframes ut-travel { from { left: 0; } to { left: var(--ut-stop); } }
@keyframes ut-light { from { opacity: .35; box-shadow: none; } to { opacity: 1; box-shadow: 0 0 0 5px rgba(242, 236, 227, .12); } }
@keyframes ut-land { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ut-moment--play *, .ut-moment--play ~ * { animation: none; } }
@media (max-width: 860px) { .ut-moment { height: 96px; } }
@media (max-width: 1100px) { .ut-rail { display: none; } }
@media (max-width: 860px) { .ut-page { padding: 60px 16px 90px; } .ut-field { flex-direction: column; } .ut-field-suffix { border-left: none; border-top: 1px solid rgba(23, 19, 16, .12); padding: 12px 20px; justify-content: center; } .ut-form .btn-brand { width: 100%; } .ut-links a, .ut-document a, .ut-card ul a { padding: 12px 0; } }   /* the full-width arm is the start form's alone — every other door keeps its intrinsic width; every prose link reaches 44 px by padding — a link standing on its own line (a legal document's contact address, the follow-along link) measures 20 px of text; the padding is inline and moves no layout */
/* the About page: the reading recipe's story-voice arm (ab-) — the document's left alignment, Literata on its prose, the map, the rules, the people */
.ab-body { text-align: left; }
.ab-body p, .ab-body li { font-family: var(--font-story); font-size: clamp(17px, 1.4vw, 19px); }
.ab-body h2 { font-family: var(--font-story); font-weight: 500; font-size: clamp(26px, 2.8vw, 34px); margin: 48px 0 14px; }
.ab-map { display: grid; grid-template-columns: 1fr 24px 1.3fr 24px 1fr; align-items: center; margin: 28px 0; }
.ab-map-box { border: 1px solid var(--hair); padding: 18px 16px; text-align: center; }
.ab-map-box--us { border-color: var(--paper-2); }
.ab-map-k { display: block; font-family: var(--font-body); font-size: 12.5px; color: var(--mute); }
.ab-map-v { display: block; font-family: var(--font-story); font-size: 17px; color: var(--paper); margin-top: 4px; }
.ab-map-box--us .ab-map-k { font-family: var(--font-brand); font-weight: 600; font-size: 24px; color: var(--brand-orange); }   /* the wordmark at its one weight and at 24 px: large text, where the orange's 4.04:1 on the canvas clears the 3:1 floor */
.ab-map-line { height: 1px; background: var(--hair); }
.ab-rules { list-style: none; padding: 0; margin: 14px 0 0; }
.ab-rules li { padding: 12px 0; border-top: 1px solid var(--hair); }
.ab-people { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 18px; }
.ab-people li { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }
.ab-face { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; grid-row: span 2; }
.ab-name { font-family: var(--font-story); font-size: 19px; color: var(--paper); }
.ab-city { font-family: var(--font-body); font-size: 14px; color: var(--mute); margin-left: 12px; }
.ab-line { font-family: var(--font-story); color: var(--paper-2); }
@media (max-width: 860px) { .ab-map { grid-template-columns: 1fr; } .ab-map-line { width: 1px; height: 24px; justify-self: center; } }
@media print { .ut-rail, .ut-moment { display: none; } .ut-field, .ut-field input, .ut-field select, .ut-field textarea { background: #fff; color: #111; } }   /* the same-role colours follow the print tokens the chrome block re-declares; the paper field reads a paper token as its GROUND, so it is re-stated */

/* ===== THE PRODUCT RECIPE (pr-) — the five area pages and their index: the home's strips in long form, nothing waits for a script ===== */
.pr-page { background: var(--canvas); color: var(--paper); font-family: var(--font-body); padding: 110px 40px 0; }
.pr-head { max-width: 1120px; margin: 0 auto; }
.pr-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(36px, 5vw, 72px); line-height: .95; letter-spacing: -.01em; text-transform: uppercase; color: var(--paper); margin: 0; max-width: 900px; }   /* capitals by CSS from sentence-case source: the one H1 rule */
.pr-intro { font-family: var(--font-story); font-weight: 400; font-size: clamp(21px, 2.3vw, 32px); line-height: 1.3; color: var(--paper-2); max-width: 780px; margin: 28px 0 0; }
.pr-contents { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 36px 0 0; font-size: 14px; }   /* the page's modules as plain links; never sticky */
.pr-contents a { color: var(--paper-2); text-decoration: none; }
.pr-contents a:hover { color: var(--brand-orange); }
.pr-module { display: grid; grid-template-columns: minmax(0, 1fr) 620px; gap: 40px; align-items: center; max-width: 1120px; margin: 0 auto; padding: 110px 0 0; scroll-margin-top: calc(var(--bar-h) + 24px); }
.pr-module--left { grid-template-columns: 620px minmax(0, 1fr); }   /* the frame's side alternates; the text stays first in DOM order */
.pr-module--left .pr-text { order: 2; }
.pr-module h2 { font-family: var(--font-story); font-weight: 500; font-size: clamp(28px, 3vw, 40px); line-height: 1.1; color: var(--paper); margin: 0 0 16px; }
.pr-text .pr-lead { font-family: var(--font-story); font-size: clamp(19px, 1.7vw, 23px); line-height: 1.4; color: var(--paper); margin: 0 0 14px; }
.pr-text p { font-family: var(--font-story); font-size: clamp(17px, 1.4vw, 19px); line-height: 1.55; color: var(--paper-2); margin: 0 0 14px; }
.pr-caps { list-style: none; margin: 18px 0; padding: 0; font-family: var(--font-body); font-size: 15px; line-height: 1.5; color: var(--paper-2); }
.pr-caps li { position: relative; padding-left: 18px; margin: 0 0 8px; }
.pr-caps li::before { content: ''; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--paper-2); }   /* a quiet marker, never orange */
.pr-caps li.soon { color: var(--mute); }   /* a capability not yet generally available: its qualifier is written in the item's own text, never generated by CSS; the rule carries the mute colour alone */
.pr-text .pr-connect { font-family: var(--font-body); font-size: 15px; line-height: 1.55; color: var(--mute); margin: 0 0 14px; }
.pr-text .pr-help { font-family: var(--font-body); font-size: 15px; margin: 0; }
.pr-help a, .pr-link, .pr-area-modules a { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }   /* the prose links of the recipe */
.pr-help a:hover, .pr-link:hover, .pr-area-modules a:hover { color: var(--brand-orange); }
.pr-nav { display: flex; justify-content: space-between; max-width: 1120px; margin: 90px auto 0; padding: 24px 0; border-top: 1px solid var(--hair); font-size: 14px; }
.pr-nav a { color: var(--paper-2); text-decoration: none; }
.pr-nav a:hover { color: var(--brand-orange); }
.pr-close { text-align: center; max-width: 720px; margin: 0 auto; padding: 110px 0 150px; }
.pr-close h2 { font-family: var(--font-story); font-weight: 500; font-size: clamp(30px, 3.6vw, 48px); line-height: 1.1; color: var(--paper); margin: 0 0 18px; }
.pr-close p { font-family: var(--font-story); font-size: clamp(18px, 1.55vw, 22px); line-height: 1.5; color: var(--paper-2); margin: 0 0 32px; }
.pr-doors { display: flex; gap: 28px; justify-content: center; align-items: center; flex-wrap: wrap; }
.pr-link { font-family: var(--font-body); font-size: 15px; }
.pr-index { max-width: 1120px; margin: 60px auto 0; }
.pr-area { display: grid; grid-template-columns: 1fr 1.4fr; gap: 40px; padding: 32px 0; border-top: 1px solid var(--hair); }
.pr-area:last-child { border-bottom: 1px solid var(--hair); }
.pr-area h2 { font-family: var(--font-story); font-weight: 500; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; margin: 0; }
/* an area heading is a door: a faint underline in the ghost line's paper says so without an arrow (phones have no hover; 2026-09-23) */
.pr-area h2 a { color: var(--paper); text-decoration: underline; text-decoration-color: rgba(242, 236, 227, .3); text-decoration-thickness: 1px; text-underline-offset: .18em; }
.pr-area h2 a:hover { color: var(--brand-orange); text-decoration-color: var(--brand-orange); }
.pr-area p { font-family: var(--font-story); font-size: clamp(17px, 1.4vw, 19px); line-height: 1.55; color: var(--paper-2); margin: 0 0 12px; }
.pr-area-modules { display: flex; flex-wrap: wrap; gap: 8px 24px; font-family: var(--font-body); font-size: 15px; }
.pr-page :focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
@media (max-width: 1400px) { .pr-module { grid-template-columns: minmax(0, 1fr) 520px; } .pr-module--left { grid-template-columns: 520px minmax(0, 1fr); } }
@media (max-width: 860px) {
    .pr-page { padding: 60px 20px 0; }
    .pr-title { font-size: clamp(34px, 11vw, 60px); }
    .pr-module, .pr-module--left { grid-template-columns: 1fr; gap: 28px; padding-top: 60px; }
    .pr-module--left .pr-text { order: 0; }   /* one column, the text first, the frame full width beneath it */
    .pr-area { grid-template-columns: 1fr; gap: 12px; }
    .pr-close { padding: 80px 0 110px; }
    .pr-contents a, .pr-link, .pr-area-modules a, .pr-area h2 a { padding: 12px 0; }   /* the 44 px tap height on the flex-item links, which blockify: the padding moves no line box */
    .pr-help a, .pr-nav a { display: inline-block; padding: 12px 0; }   /* the two inline links blockify on phones so their padding counts toward the 44 px tap height: an inline box's rect is the font's content area alone */
}
@media print { .pr-module, .pr-module--left, .pr-area { grid-template-columns: 1fr; } .pr-module--left .pr-text { order: 0; } }

/* Print: the tokens every colour rides re-declared once — dark on white for the chrome and both page systems; the overlays leave. */
@media print {
    :root { --canvas: #fff; --canvas-2: #fff; --canvas-3: #f4f4f4; --bubble: #f4f4f4; --chrome-solid: #fff; --paper: #111; --paper-2: #222; --mute: #444; --hair: rgba(0, 0, 0, .2); --paper-body: #111; --paper-small: #333; }
    body { background: #fff; color: #111; }
    .cookie-banner, .site-nav .site-nav-hamburger, .site-skip, .site-mobile-menu, .site-bg { display: none; }   /* the burger at (0,2,0): the phone query sets it display: flex later in the file, and paper's page box takes that query */
    .site-nav, .site-footer, .nav-drop-menu { background: #fff; }
    .site-nav-pill { background: #fff; color: #111; }                 /* the paper pill reads a paper token as its GROUND: re-stated, or it prints a dark block on the white bar */
    .site-nav-signin { border-color: rgba(0, 0, 0, .3); }              /* the outlined pill's literal paper border would vanish on white */
}