/* Ummidi Design System — public/css/app.css
   Layered stylesheet: Tokens → Reset → Base → Layout → Components → Utilities → Responsive.
   Terminal Industrial / High-Contrast Precision. */

/* ── 1. Design Tokens ────────────────────────────────── */

:root {
    /* Color — surface & canvas. Light is the base set; the dark one lives in
       the prefers-color-scheme block below and overrides these. */
    --canvas: #ffffff;
    --canvas-alt: #f3f3f3;
    --canvas-raised: #f4f4f4; /* cards raised on canvas — no border needed */
    --ink: #141414;
    --ink-soft: #262626;
    --muted: #6b6b6b; /* #707070 reads 4.35:1 on --canvas-raised, under AA */
    --text-faint: #adadad;
    --hairline: #e0e0e0;
    --hairline-soft: #f0f0f0;
    --field: #f0f0f0;
    --surface-hover: #e8e8e8;
    --terminal-bg: #ffffff; /* the terminal reads white in light, as macOS does */
    --primary: #141414;
    --on-primary: #ffffff;
    --accent: #025eea; /* #0066ff clears AA on white but misses on the greys */
    --color-cool: #f0f0fa; /* cool tinted surface (btn-filled-cool) */

    /* Color — semantic status, derived from --accent instead of picked by
       hand. The hues are rotations of the accent's in OKLab, not HSL: at a
       fixed HSL lightness a green reads far brighter than a blue and a red
       far darker, so rotating there would give four colours with wildly
       uneven contrast. Chroma holds at the accent's wherever the gamut
       allows, and L is walked until each clears 4.5:1 on the worst surface
       it lands on — #f0f0f0 here, #292929 in dark. Contrast pushes in
       opposite directions per theme, so both sets are derived separately;
       neither is hand-picked. */
    --color-success: #01791e;
    --color-warning: #965d04;
    --color-danger: #d60204;

    /* Traffic lights (macOS window controls) */
    --color-traffic-red: #ff5f57;
    --color-traffic-yellow: #febc2e;
    --color-traffic-green: #28c840;
    --color-silver: #aaaaaa;
    --color-disabled: var(--hairline);
    --color-avatar-fill: rgba(0, 0, 0, 0.06);
    --color-accent-soft: rgba(20, 20, 20, 0.06);
    --color-chip-bg: #f0f0f0;

    /* Text roles — the job, not the colour. Rules paint with these; --ink and
       --muted stay underneath as the raw palette, so remapping a role is one
       line instead of fifty. They alias rather than duplicate, which is why
       the dark block below needs no entry: the substitution resolves against
       whatever --ink and --muted hold in that theme. */
    --text-primary: var(--ink);
    --text-secondary: var(--muted);

    /* Type families. The fallback mirrors the app's stack — without it the
       chain ends at a bare `sans-serif`, which on Linux resolves to DejaVu
       rather than to anything the brand actually chose. */
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-display: 'Inter', var(--font-sans);
    --font-body: 'Inter', var(--font-sans);
    --font-mono: ui-monospace, Menlo, Monaco, monospace;

    /* Type scale — minor third, ratio 1.200, base 1rem = 16px
       (px values for reference: size / weight / leading) */
    --type-display-xxl: 2.986rem;  /* 47.8 / 652 / 1.12 */
    --type-display-lg: 2.488rem;   /* 39.8 / 652 / 1.12 */
    --type-display-md: 2.074rem;   /* 33.2 / 652 / 1.25 */
    --type-heading-lg: 1.728rem;   /* 27.6 / 652 / 1.33 */
    --type-body-lg: 1.200rem;      /* 19.2 / 440 / 1.55 */
    --type-body-md: 1rem;          /* 16   / 440 / 1.55 */
    --type-caption: 0.833rem;      /* 13.3 / 440 / 1.43 */
    --type-button-md: 0.833rem;    /* 13.3 / 652 / 1.38 */
    --type-micro-cap: 0.694rem;    /* 11.1 / 652 / 1    */

    /* Weight — the app's calibrated axis values rather than the usual
       400/700 steps. Inter loads as a variable font (100 900), so these
       render as-is instead of snapping to the nearest named weight.
       The app's third value, 300 for hero subtitles, has no home here:
       every prose block shares --weight-body, applied once on body.
       --weight-label sits between the two for chrome that names something
       without competing with the heading beneath it. */
    --weight-heading: 652;
    --weight-label: 600;
    --weight-body: 440;

    /* Spacing (8px base, denser sub-units for fine vertical rhythm) */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 24px;
    --spacing-xxl: 32px;
    --spacing-huge: 64px;

    /* Border radius scale — inputs to pill buttons */
    --rad-sm: 4px;
    --rad-md: 8px;
    --rad-lg: 12px;
    --rad-xl: 16px;
    --rad-button: 32px;
    --rad-full: 9999px; /* utility for pills/dots — outside the scale */

    /* Glass — frosted translucent surfaces (header, overlays) */
    --glass-bg: rgba(255, 255, 255, 0.75);
    --glass-blur: 14px;
    --glass-saturate: 140%;
    --glass-border: rgba(20, 20, 20, 0.08);

    /* Elevation — layered shadow stack (L0 flat → L3 toast) */
    --elev-l1: rgba(0, 0, 0, 0.1) 0 5px 20px 0;
    --elev-l2: rgba(0, 0, 0, 0.1) 0 0 32px 0;
    --elev-l3: rgba(0, 0, 0, 0.2) 0 1px 10px 0;

    /* Stacking */
    --z-header: 10;
}

/* ── 1b. Dark theme ──────────────────────────────────── */

/* Light is the base set above. These override it when the OS asks for dark —
   no toggle and no storage, which keeps cookies.html.twig's "localStorage:
   None / Not used" claim true. */

@media (prefers-color-scheme: dark) {
    :root {
        /* Color — surface & canvas */
        --canvas: #141414;
        --canvas-alt: #292929;
        --canvas-raised: #232323;
        --ink: #ffffff;
        --ink-soft: #e5e5e5;
        --muted: #adadad;
        --text-faint: #5c5c63;
        --hairline: hsl(0deg 0% 100% / 16.08%);
        --hairline-soft: #1f1f22;
        --field: #1a1a1e;
        --surface-hover: #2d2d2d;
        --terminal-bg: #232323;
        --primary: #ffffff;
        --on-primary: #141414;
        --accent: #5391ff; /* the light accent sits at 1.44:1, far too dark */
        --color-cool: #ededed;

        /* Semantic status for dark — same hues, L walked the other way to
           clear 4.5:1 against #292929. */
        --color-success: #07ad30;
        --color-warning: #d38402;
        --color-danger: #ff5e4d;

        /* Translucent surfaces flip back to white-on-dark */
        --color-avatar-fill: rgba(255, 255, 255, 0.06);
        --color-accent-soft: rgba(255, 255, 255, 0.10);
        --color-chip-bg: rgba(255, 255, 255, 0.06);

        /* Glass — back to the original aero values */
        --glass-bg: rgba(10, 10, 12, 0.65);
        --glass-border: rgba(255, 255, 255, 0.08);
    }
}

/* ── 2. Reset ────────────────────────────────────────── */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    min-height: 100vh;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

img,
picture,
svg,
video,
canvas {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}

label,
legend,
caption {
    display: block;
}

ul[role='list'],
ol[role='list'] {
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

p,
figure,
blockquote,
dl,
dd {
    margin: 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ── 3. Base — Fonts & Type ──────────────────────────── */

/* Self-hosted variable font, latin subset, served by LiteSpeed.
   No third-party requests. */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/inter-var.woff2') format('woff2');
}

body {
    background: var(--canvas);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: var(--type-body-md);
    font-weight: var(--weight-body);
    line-height: 1.55;
}

/* Heading hierarchy — element-level defaults */

h1 {
    font-size: var(--type-display-xxl);
    font-weight: var(--weight-heading);
    line-height: 1.12;
    margin-bottom: var(--spacing-xl);
}

h2 {
    font-size: var(--type-heading-lg);
    font-weight: var(--weight-heading);
    line-height: 1.33;
}

h3 {
    font-size: var(--type-heading-lg);
    font-weight: var(--weight-heading);
    line-height: 1.33;
}

h4 {
    font-size: var(--type-heading-lg);
    font-weight: var(--weight-heading);
    line-height: 1.33;
}

h5 {
    font-size: var(--type-body-lg);
    font-weight: var(--weight-heading);
    line-height: 1.4;
}

h6 {
    font-size: var(--type-body-md);
    font-weight: var(--weight-heading);
    line-height: 1.4;
}

/* Two text tiers: --ink for headings and for anything that has to pull the
   eye (prices, the brand, error codes), --muted for prose. Paragraphs take
   the second by default, so a subtitle never competes with the heading
   above it. */

p {
    line-height: 1.55;
    color: var(--text-secondary);
}

/* Site-specific type classes — mapped to the same scale */

/* No font-weight: .section-heading lands on h1 (pricing, terms, privacy,
   cookies) as well as h2, and the override was only ever there to pull an
   h1 down to the h2 weight. Every heading now resolves to the same token,
   so it has nothing left to normalise. */

.section-heading {
    font-size: var(--type-display-lg);
    line-height: 1.12;
    margin: 0 0 var(--spacing-lg);
}

.section-sub {
    font-size: var(--type-body-lg);
    line-height: 1.55;
    margin: 0 0 var(--spacing-huge);
}

.section-eyebrow {
    font-family: var(--font-mono);
    font-size: var(--type-micro-cap);
    font-weight: var(--weight-heading);
    line-height: 1;
    margin: 0 0 var(--spacing-xl);
}

.section .section-eyebrow {
    margin: 0 0 var(--spacing-md);
}

/* No margin: .lede only ever sits inside .hero-content, which is a flex
   column with its own gap. The margin it used to carry was left over from
   before that, and on the CLI hero — where a sibling follows it — it stacked
   with the gap instead of replacing it. */

.lede {
    font-size: var(--type-body-lg);
    line-height: 1.55;
}

/* Code surfaces */

pre,
code {
    font-family: var(--font-mono);
}

/* ── 4. Layout ───────────────────────────────────────── */

/* Container — abstract 1280px box with fluid gutters */

.container {
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: var(--spacing-huge);
}

/* Section — content container on top of .container rhythm:
   1280px box, hairline separation */

.section {
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--spacing-huge) var(--spacing-huge);
    border-top: 1px solid var(--hairline);
}

.section-alt {
    background: var(--canvas-alt);
}

/* First section after the header — no separator line */

.section--first {
    border-top: 0;
}

/* Header & Nav — sticky shell */

.header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);

    /* Aero glass — parked, not removed. Restore by uncommenting this
       block and deleting the flat background line below. */
    /*
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    */

    background: var(--canvas);
    border-bottom: 1px solid var(--glass-border);
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-xl);
    height: 64px;
}

.nav-brand {
    flex-shrink: 0;
    font-size: var(--type-body-lg);
    font-weight: var(--weight-heading);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
    margin-left: auto;
    list-style: none;
}

.nav-links a {
    font-size: var(--type-caption);
    font-weight: var(--weight-heading);
    color: var(--text-secondary);
    transition: color 0.15s ease;
}

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

.nav-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-left: var(--spacing-xl);
    flex-shrink: 0;
}

.nav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 var(--spacing-lg);
    border-radius: var(--rad-button);
    background: var(--primary);
    color: var(--on-primary);
    font-size: var(--type-button-md);
    font-weight: var(--weight-heading);
    transition: background-color 0.15s ease;
}

.nav-cta:hover {
    background: var(--ink-soft);
}

/* Hamburger — two bars morphing to X; hidden until mobile */

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    padding: 0 12px;
    background: transparent;
    border: none;
    cursor: pointer;
}

.nav-toggle span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--ink);
    border-radius: 1px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

body.nav-lock {
    overflow: hidden;
}

@keyframes navIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Tablet — tighten link spacing */

@media (max-width: 1023px) {
    .nav {
        gap: var(--spacing-lg);
    }

    .nav-links {
        gap: var(--spacing-lg);
    }

    /* Touch targets on tablets */
    .nav-links a,
    .nav-dropdown-summary {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

/* Nav dropdown — Products menu (native details, no JS) */

.nav-dropdown {
    position: relative;
}

.nav-dropdown-summary {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    cursor: pointer;
    list-style: none;
    font-size: var(--type-caption);
    font-weight: var(--weight-heading);
    color: var(--text-secondary);
    transition: color 0.15s ease;
}

.nav-dropdown-summary::-webkit-details-marker,
.nav-dropdown-summary::marker {
    display: none;
    content: '';
}

.nav-dropdown-summary:hover {
    color: var(--text-primary);
}

.nav-dropdown-caret {
    font-size: 12px;
    transition: transform 0.15s ease;
}

.nav-dropdown-details[open] .nav-dropdown-caret {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + var(--spacing-sm));
    left: 0;
    min-width: 200px;
    padding: var(--spacing-xs);
    background: var(--canvas-alt);
    border: 1px solid var(--hairline);
    border-radius: var(--rad-lg);
    box-shadow: var(--elev-l2);
    z-index: calc(var(--z-header) + 1);
}

.nav-dropdown-item {
    display: block;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--rad-md);
    transition: background-color 0.15s ease;
}

.nav-dropdown-item:hover {
    background: var(--color-chip-bg);
}

.nav-dropdown-title {
    font-size: var(--type-caption);
    font-weight: var(--weight-heading);
    color: var(--text-secondary);
    transition: color 0.15s ease;
}

.nav-dropdown-item:hover .nav-dropdown-title {
    color: var(--text-primary);
}

/* Mobile — inline in the overlay */

@media (max-width: 767px) {
    .nav-dropdown {
        position: static;
    }

    .nav-dropdown-summary {
        width: 100%;
        justify-content: space-between;
        min-height: 44px;
        padding: var(--spacing-md) 0;
    }

    .nav-dropdown-menu {
        position: static;
        min-width: 0;
        padding: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    .nav-links .nav-dropdown-item {
        text-align: left;
        padding: var(--spacing-sm) 0 var(--spacing-sm) var(--spacing-md);
    }
}

/* Mobile — collapse to hamburger (<768) */

@media (max-width: 767px) {
    .nav-toggle {
        display: flex;
    }

    /* Actions box keeps the toggle flush right */
    .nav-actions {
        margin-left: auto;
    }

    /* CTA leaves the bar on mobile — brand + hamburger only */
    .nav-cta {
        display: none;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        margin-left: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg);
        background: var(--canvas-alt);
        border-bottom: 1px solid var(--hairline);
        box-shadow: var(--elev-l2);
        max-height: calc(100dvh - 64px);
        overflow-y: auto;
    }

    .nav-open .nav-links {
        display: flex;
        animation: navIn 0.18s ease;
    }

    .nav-links a {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: var(--spacing-md) 0;
    }

    .nav-links li + li {
        border-top: 1px solid var(--hairline);
    }

    .nav-open .nav-toggle span:nth-child(1) {
        transform: translateY(4px) rotate(45deg);
    }

    .nav-open .nav-toggle span:nth-child(2) {
        transform: translateY(-4px) rotate(-45deg);
    }

    .nav-toggle:hover {
        opacity: 0.7;
    }
}

/* Small phones (<480) — shorter bar */

@media (max-width: 479px) {
    .nav {
        height: 56px;
    }

    .nav-links {
        top: 56px;
        max-height: calc(100dvh - 56px);
    }
}

/* Hero — minimal centered band, compact rhythm */

.hero--min {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: calc(var(--spacing-huge) + var(--spacing-xxl)) var(--spacing-huge);
}

.hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xl);
    width: 100%;
    max-width: 880px;
    margin-inline: auto;
}

.hero-content h1 {
    margin-bottom: 0;
}

/* Terminal frame inside the hero — wide, with breathing room */

.hero-content .terminal-window {
    width: 100%;
    max-width: 760px;
    margin-inline: auto;
    margin-top: var(--spacing-huge);
}

.hero-note {
    font-family: var(--font-mono);
    font-size: var(--type-micro-cap);
    font-weight: var(--weight-heading);
}

/* Hero actions — CTA row with breathing room */

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-lg);
}

@media (max-width: 1023px) {
    .hero--min {
        padding: calc(var(--spacing-huge) + var(--spacing-xxl)) var(--spacing-xxl);
    }
}

@media (max-width: 767px) {
    .hero--min {
        padding: calc(var(--spacing-xl) + var(--spacing-xxl)) 20px;
        padding-left: max(20px, env(safe-area-inset-left));
        padding-right: max(20px, env(safe-area-inset-right));
    }

    .hero-content {
        gap: var(--spacing-lg);
    }

    .hero-content .terminal-window {
        margin-top: var(--spacing-xxl);
    }
}

@media (max-width: 479px) {
    .hero--min {
        padding: calc(var(--spacing-lg) + var(--spacing-xl)) 16px;
    }
}

/* Grid — reusable column system */

.grid {
    display: grid;
    gap: var(--spacing-xl);
}

.grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-auto {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

@media (max-width: 1023px) {
    .grid-3,
    .grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--spacing-lg);
    }
}

@media (max-width: 767px) {
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }
}

/* Footer — full-bleed, multi-column grid + utility bar */

.footer {
    background: var(--canvas);
    border-top: 1px solid var(--hairline);
    padding: var(--spacing-huge) 0 var(--spacing-xxl);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr);
    gap: var(--spacing-xxl);
}

.footer-brand {
    font-size: var(--type-body-lg);
    font-weight: var(--weight-heading);
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

.footer-tagline {
    font-size: var(--type-caption);
}

.footer-col-heading {
    font-size: var(--type-micro-cap);
    font-weight: var(--weight-heading);
    margin: 0 0 var(--spacing-lg);
    color: var(--text-primary);
}

.footer-col a {
    display: block;
    margin-bottom: var(--spacing-md);
    font-size: var(--type-caption);
    font-weight: var(--weight-heading);
    color: var(--text-secondary);
    transition: color 0.15s ease;
}

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

.footer-utility {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--hairline);
    margin-top: var(--spacing-huge);
    padding-top: var(--spacing-xl);
}

.footer-copy {
    font-size: var(--type-caption);
}

.footer-legal {
    display: flex;
    gap: var(--spacing-xl);
}

.footer-legal a {
    font-size: var(--type-caption);
    font-weight: var(--weight-heading);
    color: var(--text-secondary);
    transition: color 0.15s ease;
}

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

/* Footer responsive — co-located */

/* Tablet and below — brand block spans the full width, nav sits 2-up
   so the three columns don't stack into a long single file. */

@media (max-width: 1023px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-xxl) var(--spacing-xl);
    }

    .footer-col--brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767px) {
    .footer-utility {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-lg);
    }

    .footer-legal {
        flex-wrap: wrap;
        gap: var(--spacing-md) var(--spacing-lg);
    }

    .footer {
        padding-bottom: var(--spacing-xl);
    }
}

/* ── 5. Components ───────────────────────────────────── */

/* Buttons — pill CTAs, radius 32px, button-md tier */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    height: 48px;
    padding: 0 var(--spacing-xl);
    border: 1px solid transparent;
    border-radius: var(--rad-button);
    font-size: var(--type-button-md);
    font-weight: var(--weight-heading);
    line-height: 1.38;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-primary {
    background: var(--primary);
    color: var(--on-primary);
}

.btn-primary:hover {
    background: var(--ink-soft);
}

/* No border-color, same as .btn-primary: the fill carries the shape and the
   transparent edge from .btn is only there to keep the box the same size as
   its neighbours. */

.btn-secondary {
    background: var(--canvas-alt);
    color: var(--text-primary);
}

.btn-secondary:hover {
    border-color: var(--muted);
}

/* Border is --hairline at 1px, which puts it at 1.2-1.6:1 against the card
   surfaces — under the 3:1 WCAG 1.4.11 asks of a component boundary. With no
   fill behind it, that is the only thing giving the button a shape. Padding
   override is gone with the 2px border: .btn already declares 1px, so nothing
   needs compensating. */

.btn-outline {
    background: transparent;
    border: 1px solid var(--hairline);
    color: var(--text-primary);
}

.btn-outline:hover {
    background: var(--color-accent-soft);
}

.btn-ghost {
    background: transparent;
    border-color: var(--primary);
    color: var(--text-primary);
}

.btn-ghost:hover {
    background: var(--color-accent-soft);
}

.btn-filled-cool {
    background: var(--color-cool);
    border-color: var(--color-cool);
    color: var(--on-primary);
}

.btn-filled-cool:hover {
    background: #e6e6f6;
    border-color: #e6e6f6;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Inverted CTA — black pill on inverted/light surfaces */

.btn-inverted {
    background: var(--on-primary);
    border-color: var(--on-primary);
    color: var(--primary);
}

.btn-inverted:hover {
    background: var(--surface-hover);
}

/* Badge — small outlined label. Names a product above a heading, tags a row,
   marks a state. Outline rather than filled so it reads as a label and not as
   a control; .terminal-badge is the filled variant for when it has to shout.
   The gap is there so an icon can sit inside without touching the text. */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-md);
    border: 1px solid var(--primary);
    border-radius: var(--rad-md);
    font-family: var(--font-body);
    font-size: var(--type-micro-cap);
    font-weight: var(--weight-label);
    letter-spacing: 0.2px;
    color: var(--text-primary);
    white-space: nowrap;
}

/* CTA stack — pill + note vertical rhythm */

.cta-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-lg);
}

/* CTA note — secondary path under the primary action. The base `a`
   rule is `color: inherit; text-decoration: none`, so the link needs
   its own affordance or it reads as plain text. */

.cta-note {
    font-size: var(--type-caption);
}

.cta-note a {
    color: var(--text-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.15s ease;
}

.cta-note a:hover {
    color: var(--text-secondary);
}

/* Copy pill — inline shell command with copy button */

.copy-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) var(--spacing-lg);
    background: var(--canvas-alt);
    border: 1px solid var(--hairline);
    border-radius: var(--rad-full);
    max-width: 100%;
}

.copy-pill-prompt {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: var(--type-caption);
    color: var(--text-secondary);
}

.copy-pill-code {
    min-width: 0;
    font-family: var(--font-mono);
    font-size: var(--type-caption);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.copy-pill-copy {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--hairline);
    border-radius: var(--rad-full);
    background: var(--canvas);
    color: var(--text-secondary);
    transition: border-color 0.15s ease, color 0.15s ease;
}

.copy-pill-copy:hover {
    border-color: var(--muted);
    color: var(--text-primary);
}

.copy-pill-copy.is-copied {
    color: var(--color-success);
    border-color: var(--color-success);
}

@media (max-width: 767px) {
    .copy-pill {
        width: 100%;
        justify-content: space-between;
        padding-left: 14px;
    }

    .copy-pill-copy {
        width: 44px;
        height: 44px;
    }
}

/* Feature list — icon row + title + copy, no card furniture */

.feature-grid {
    gap: var(--spacing-huge) var(--spacing-xxl);
}

@media (max-width: 1023px) {
    .feature-grid {
        gap: var(--spacing-xxl);
    }
}

@media (max-width: 767px) {
    .feature-grid {
        gap: var(--spacing-xl);
    }
}

.feature {
    display: grid;
    grid-template-columns: 24px 1fr;
    column-gap: var(--spacing-sm);
    row-gap: var(--spacing-xs);
}

.feature-icon {
    grid-row: 1;
    font-size: 18px;
    line-height: 1.4;
    color: var(--text-primary);
}

.feature h3 {
    font-size: var(--type-body-lg);
    line-height: 1.4;
}

.feature p {
    grid-column: 2;
    font-size: var(--type-caption);
}

/* Terminal window — shell frame with macOS-style controls (right side) */

.terminal-window {
    max-width: 760px;
    margin-inline: auto;
    background: transparent;
    border: 1px solid var(--hairline);
    border-radius: var(--rad-lg);
    box-shadow: var(--elev-l2);
    overflow: hidden;
}

.terminal-body {
    background: var(--terminal-bg);
}

.terminal-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--canvas-alt);
    border-bottom: 1px solid var(--glass-border);
}

.terminal-title {
    font-family: var(--font-mono);
    font-size: var(--type-caption);
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.terminal-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex-shrink: 0;
}

.terminal-control {
    width: 14px;
    height: 14px;
    background: transparent;
    border: 0;
    border-radius: var(--rad-full);
    cursor: default;
}

.terminal-control--minimize {
    background: var(--color-traffic-yellow);
}

.terminal-control--maximize {
    background: var(--color-traffic-green);
}

.terminal-control--close {
    background: var(--color-traffic-red);
}

.terminal-body {
    padding: var(--spacing-lg);
    min-height: 240px;
    font-family: var(--font-mono);
    font-size: var(--type-caption);
    line-height: 1.9;
    color: var(--text-primary);
}

.terminal-body > * + * {
    margin-top: var(--spacing-sm);
}

/* Welcome screen — codex-style intro lines */

.terminal-welcome-line {
    color: var(--text-primary);
    line-height: 1.5;
}

.terminal-welcome-line + .terminal-welcome-line {
    margin-top: var(--spacing-md);
}

.terminal-caret {
    color: var(--text-primary);
}

/* Current selection — option 1 highlighted green */

.terminal-welcome-line--selected,
.terminal-welcome-line--selected .terminal-caret {
    color: var(--accent);
    font-weight: var(--weight-heading);
}

.terminal-welcome-note {
    line-height: 1.5;
}

.terminal-welcome-note.indent {
    padding-left: 2ch;
}

.terminal-welcome-note + .terminal-welcome-line {
    margin-top: var(--spacing-md);
}

.terminal-press {
    margin-top: var(--spacing-xxl);
}

/* Command line — user@host ~ command */

.terminal-cmd {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-lg);
    margin-block: var(--spacing-lg) !important;
}

.terminal-cmd-sep,
.terminal-cmd-user .terminal-cmd-sep {
    color: var(--text-secondary);
}

/* Progres lines with green checks */

.terminal-status {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.terminal-status i {
    font-size: 14px;
    color: var(--color-success);
}

.terminal-status--bar {
    gap: var(--spacing-md);
}

.terminal-bar {
    display: inline-block;
    width: 72px;
    height: 8px;
    background: var(--color-chip-bg);
    border-radius: 2px;
    overflow: hidden;
}

.terminal-bar-fill {
    display: block;
    height: 100%;
    width: 62%;
    background: var(--color-success);
}

.terminal-time {
    color: var(--text-secondary);
    font-size: var(--type-caption);
}

/* Info callout — boxed key-value block */

.terminal-callout {
    border: 1px solid var(--hairline);
    border-radius: var(--rad-md);
    padding: var(--spacing-md) var(--spacing-lg);
    margin-block: var(--spacing-lg) !important;
}

.terminal-callout > * + * {
    margin-top: var(--spacing-xs);
}

.kv {
    display: flex;
    gap: var(--spacing-lg);
}

.kv + .kv {
    margin-top: var(--spacing-sm);
}

.kv-key {
    width: 110px;
    color: var(--text-secondary);
}

.kv-val {
    color: var(--text-primary);
}

.kv-val--running {
    color: var(--color-success);
    text-decoration: underline;
    text-decoration-color: var(--color-success);
}

.terminal-badge {
    display: inline-block;
    margin-bottom: var(--spacing-sm);
    padding: 2px var(--spacing-sm);
    background: var(--primary);
    color: var(--on-primary);
    border-radius: var(--rad-sm);
    font-size: var(--type-micro-cap);
    font-weight: var(--weight-heading);
}

.terminal-line {
    display: flex;
    align-items: center;
    gap: 2px;
}

.terminal-line--waiting {
    margin-top: var(--spacing-lg) !important;
}

.terminal-prompt {
    color: var(--text-primary);
}

.terminal-cursor {
    display: inline-block;
    width: 8px;
    height: 16px;
    margin-left: var(--spacing-xs);
    background: var(--muted);
    animation: cursorBlink 1s step-end infinite;
}

@keyframes cursorBlink {
    50% { opacity: 0; }
}

@media (max-width: 767px) {
    .terminal-window {
        border-radius: var(--rad-md);
        box-shadow: var(--elev-l1);
    }

    .terminal-body {
        min-height: 200px;
        padding: var(--spacing-md);
    }
}

/* Table — reusable data grid (comparison, rankings, ledger) */

.table-wrap {
    overflow-x: auto;
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--type-body-md);
}

.table th,
.table td {
    padding: var(--spacing-md) var(--spacing-md);
    border-bottom: 1px solid var(--hairline);
    text-align: left;
    white-space: nowrap;
}

.table thead th {
    font-size: var(--type-caption);
    font-weight: var(--weight-heading);
    color: var(--text-primary);
}

.table tbody th {
    font-weight: var(--weight-heading);
    color: var(--text-primary);
}

.table tbody td {
    color: var(--text-secondary);
}

/* Metric columns — centered; first/label column stays left */
.table th:not(:first-child),
.table td:not(:first-child) {
    text-align: center;
}

.table .ph-check {
    color: var(--color-success);
    font-size: var(--type-body-lg);
}

.table .ph-minus {
    color: var(--text-secondary);
    font-size: var(--type-body-lg);
}

@media (max-width: 767px) {
    .table {
        font-size: var(--type-caption);
    }

    .table th,
    .table td {
        padding: var(--spacing-md) var(--spacing-sm);
    }
}

/* Legal copy — long-form text and date stamp */

.legal-copy {
    max-width: 720px;
    color: var(--text-secondary);
}

.legal-copy p + p {
    margin-top: var(--spacing-md);
}

.legal-copy a {
    color: var(--text-primary);
    font-weight: var(--weight-heading);
    text-decoration: underline;
    text-decoration-color: var(--hairline);
    text-underline-offset: 4px;
}

.legal-copy a:hover {
    text-decoration-color: var(--text-primary);
}

.legal-date {
    margin-top: var(--spacing-xl);
    font-family: var(--font-mono);
    font-size: var(--type-micro-cap);
}

/* Error screen — standalone branded 404/500 */

.error-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-lg);
    text-align: center;
    padding: var(--spacing-lg);
}

.error-code {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--type-display-xxl);
    font-weight: var(--weight-heading);
    color: var(--text-primary);
    line-height: 1;
}

.error-page h1 {
    margin: 0;
    font-size: var(--type-heading-lg);
}

.error-page .btn {
    margin-top: var(--spacing-lg);
}

/* Product card — linked card with icon tile and arrow link */

.product-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    transition: background-color 0.15s ease;
}

.product-card:hover {
    background: var(--surface-hover);
}

.product-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    background: var(--color-chip-bg);
    border: 1px solid var(--hairline);
    border-radius: var(--rad-md);
    font-size: 20px;
    color: var(--text-primary);
}

.product-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-top: auto;
    padding-top: var(--spacing-sm);
    font-size: var(--type-caption);
    font-weight: var(--weight-heading);
    color: var(--text-primary);
}

.product-link .ph {
    font-size: 10px;
    transition: transform 0.15s ease;
}

.product-card:hover .product-link .ph {
    transform: translateX(3px);
}

/* FAQ — native accordion (details/summary, no JS) */

.faq {
    max-width: 720px;
    margin-inline: auto;
    border-bottom: 1px solid var(--hairline);
}

.faq-item + .faq-item {
    border-top: 1px solid var(--hairline);
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg) 0;
    cursor: pointer;
    list-style: none;
}

.faq-question::-webkit-details-marker,
.faq-question::marker {
    display: none;
    content: '';
}

.faq-question h3 {
    font-size: var(--type-body-lg);
}

.faq-question .ph {
    flex-shrink: 0;
    font-size: var(--type-body-lg);
    color: var(--text-secondary);
    transition: transform 0.15s ease;
}

.faq-item[open] .faq-question .ph {
    transform: rotate(180deg);
}

.faq-answer {
    padding: 0 0 var(--spacing-lg);
    color: var(--text-secondary);
    max-width: 60ch;
}

.faq-answer p {
    margin-bottom: var(--spacing-md);
}

.faq-answer p:last-child {
    margin-bottom: 0;
}

/* Cards — dark surface with hairline; raised & inverted variants */

.card {
    background: var(--canvas);
    border: 1px solid var(--hairline);
    border-radius: var(--rad-lg);
    padding: var(--spacing-xxl) var(--spacing-huge);
}

/* Feature card — no border, separated by elevated color alone */

.card--flat {
    border: 0;
    background: var(--canvas-raised);
}

/* Inverted surfaces — kept for reuse, no longer used by the pricing page.
   It carried a contrast bug while it was: .pricing-name, .pricing-desc and
   .pricing-period all set --muted without regard for the card under them, so
   on this fill they landed at 3.46:1 in light and 2.24:1 in dark, both well
   under AA. */

.card--inverted {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
}

/* Pricing — three-up grid with polarity-flipped middle tier */

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xl);
    align-items: stretch;
}

/* Tighter than .card's 64px gutters. At three-up those gutters ate 128px of a
   ~365px card, which wrapped the longer descriptions and left the feature
   lists starting at different heights across the row. */

.pricing-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    padding: var(--spacing-xxl);
}

.pricing-name {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-family: var(--font-body);
    font-size: var(--type-body-lg);
    font-weight: var(--weight-heading);
    color: var(--text-primary);
}

.pricing-price {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-sm);
    font-size: var(--type-display-xxl);
    font-weight: var(--weight-heading);
    color: var(--text-primary); /* the one number the card exists to show */
    line-height: 1;
}

.pricing-period {
    font-size: var(--type-caption);
    color: var(--text-secondary);
}

/* Hairline-divided feature list with dot bullets */

.pricing-list {
    list-style: none;
}

.pricing-list li {
    position: relative;
    padding: var(--spacing-lg) 0 var(--spacing-lg) var(--spacing-lg);
    border-bottom: 1px solid var(--hairline);
}

/* The last rule would separate the list from nothing */

.pricing-list li:last-child {
    border-bottom: 0;
}

.pricing-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: calc(var(--spacing-lg) + 0.62em);
    width: 5px;
    height: 5px;
    border-radius: var(--rad-full);
    background: var(--muted);
}

.pricing-cta {
    margin-top: auto;
}

/* Pricing stair — 2-up tablet, 1-up mobile */

@media (max-width: 1023px) {
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .pricing-grid {
        grid-template-columns: 1fr;
    }
}

/* Standards strip — the compliance marks the page answers to.
   Chip treatment mirrors .product-icon so the marks read as
   labels rather than as clickable controls. */

.standards-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-md);
    list-style: none;
}

.standards-list li {
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--color-chip-bg);
    border: 1px solid var(--hairline);
    border-radius: var(--rad-md);
    font-family: var(--font-mono);
    font-size: var(--type-caption);
    font-weight: var(--weight-heading);
    color: var(--text-primary);
}

/* Form Elements — standard inputs with hairline borders;
   focus replaces hairline with primary color. */

.form-field {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.form-label {
    font-size: var(--type-caption);
    font-weight: var(--weight-heading);
    color: var(--text-primary);
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    min-height: 44px;
    padding: 0 var(--spacing-md);
    background: var(--canvas-alt);
    border: 1px solid var(--hairline);
    border-radius: var(--rad-sm);
    color: var(--text-primary);
    font-size: var(--type-body-md);
    line-height: 1.4;
    transition: border-color 0.15s ease;
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--text-secondary);
}

.form-input:hover,
.form-select:hover,
.form-textarea:hover {
    border-color: var(--muted);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--primary);
}

.form-select {
    appearance: none;
    cursor: pointer;
    padding-right: 40px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a0a0a8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

.form-textarea {
    min-height: 128px;
    padding: var(--spacing-md);
    resize: vertical;
}

.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.form-input[aria-invalid='true'],
.form-select[aria-invalid='true'],
.form-textarea[aria-invalid='true'] {
    border-color: var(--color-danger);
}

/* ── 6. Utilities ────────────────────────────────────── */

/* Text alignment. Declared per element rather than inherited from a
   container: a centred section used to leak centre into everything inside
   it, so the pricing grid, the FAQ list and the terminal each had to undo it
   by hand — and anything new dropped in was centred until someone noticed. */

.text-center {
    text-align: center;
}

/* Elevation — L0 flat (hairline border only) through L3 toast */

.elev-0 {
    border: 1px solid var(--hairline);
}

.elev-1 {
    box-shadow: var(--elev-l1);
}

.elev-2 {
    box-shadow: var(--elev-l2);
}

.elev-3 {
    box-shadow: var(--elev-l3);
}

/* Screen-reader only — content visually hidden, still announced */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Skip link — hidden until keyboard focus */

.skip-link {
    position: fixed;
    top: var(--spacing-sm);
    left: var(--spacing-lg);
    z-index: var(--z-header);
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--primary);
    color: var(--on-primary);
    border-radius: var(--rad-button);
    font-size: var(--type-body-md);
    font-weight: var(--weight-heading);
    transform: translateY(-200%);
    transition: transform 0.15s ease;
}

.skip-link:focus {
    transform: translateY(0);
}

/* Glass — frosted translucent surface (aero glass) */

.glass {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    border: 1px solid var(--glass-border);
}

/* ── 7. Responsive ───────────────────────────────────── */

/* Heading stair-step (minor third scale):

   Tier        Desktop    Tablet(≤1023)   Mobile(≤767)
   h1          display-xxl 47.8   display-lg 39.8   display-md 33.2 / 1.75rem <480
   h2-h4       heading-lg 27.6    heading-lg 27.6   heading-lg 27.6
   h5          body-lg  19.2      body-lg 19.2      body-md 16
   h6          body-md  16        body-md 16        caption 13.3
   .lede/sub   body-lg  19.2      body-lg 19.2      body-md 16        */

/* Global stair-step behavior. Per-component responsive rules are
   co-located with each component.

   Breakpoints:
   Wide    ≥1440px
   Desktop 1024–1439px — default content max-width (1280px)
   Tablet  768–1023px
   Mobile  <768px — touch targets ≥44px */

/* ── Tablet (768–1023) ───────────────────────────── */

@media (max-width: 1023px) {
    /* Display tiers stair-step */
    h1 {
        font-size: var(--type-display-lg);
    }

    .section-heading {
        font-size: var(--type-display-md);
    }

    .container {
        padding-inline: var(--spacing-xxl);
    }

    .section {
        padding: var(--spacing-huge) var(--spacing-xxl); /* 64px 32px */
    }
}

/* ── Mobile (<768) ────────────────────────────────── */

@media (max-width: 767px) {
    /* Display tiers stair-step */
    h1 {
        font-size: var(--type-display-md);
    }

    .section-heading {
        font-size: var(--type-heading-lg);
    }

    h5 {
        font-size: var(--type-body-md);
    }

    h6 {
        font-size: var(--type-caption);
    }

    .lede,
    .section-sub {
        font-size: var(--type-body-md);
    }

    /* Touch targets — ≥44px (WCAG 2.5.5 AAA); form fields already 44px */
    .btn {
        min-height: 44px;
    }

    .container {
        padding-inline: var(--spacing-lg);
        padding-left: max(var(--spacing-lg), env(safe-area-inset-left));
        padding-right: max(var(--spacing-lg), env(safe-area-inset-right));
    }

    /* Section — relaxed margins with safe areas */
    .section {
        padding: 48px 20px;
        padding-left: max(20px, env(safe-area-inset-left));
        padding-right: max(20px, env(safe-area-inset-right));
    }
}

/* ── Small phones (<480) ───────────────────────────── */

@media (max-width: 479px) {
    h1 {
        font-size: 1.75rem;
    }

    .btn {
        padding: 0 var(--spacing-xl);
        font-size: var(--type-body-md);
    }

    .section {
        padding: 32px 16px;
    }
}

/* ── Reduced motion ────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}