/* =====================================================================================================================
   5090Ai  -  THE DESIGN LAYER

   Loaded after site.css on every page, so it has the last word. Precision engineering rather than soft software: a
   carbon-black (or paper-white) ground with an engineering grid, a wide expanded display face set in capitals, hairline
   rules, one 45-degree chamfer cut on buttons, the hexagon for every icon tile, and the 5090Ai orange gradient used as a
   line of light - on an edge, a rule, an underline.

       --cut      the chamfer (buttons, toggles, tags): top-left and bottom-right corners cut at 45 degrees
       --hex      the hexagon, for every icon tile and step number
       --rule     the gradient as a hairline

   The page follows the theme everywhere (dark is carbon, light is paper); only the "devices" stay dark in both: the GPU
   animation, the receipt, the side-by-side demo and code.
   ===================================================================================================================== */

@property --vel-a { syntax: "<angle>"; inherits: false; initial-value: 135deg; }

:root {
    --bg: #F2F3F5;
    --bg-alt: #E8EAEE;
    --card: #FFFFFF;
    --surface-2: #F6F7F9;
    --surface-3: #ECEEF2;
    --text: #0A0D12;
    --text-2: #2A3039;
    --muted: #5C6470;
    --faint: #8C949F;
    --border: rgba(10, 13, 18, .09);
    --border-strong: rgba(10, 13, 18, .2);
    --navy: #0A0D12;
    --navy-2: #12161D;
    --navy-card: #FFFFFF;
    --on-navy: #0A0D12;
    --on-navy-2: #2A3039;
    --shadow: 0 18px 40px -24px rgba(10, 13, 18, .28);
    --shadow-lg: 0 40px 90px -40px rgba(10, 13, 18, .35);
    --accent-text: #C83A0C;
    --eyebrow-ink: #C83A0C;
    --line-accent: rgba(229, 55, 12, .35);
    --grid-line: rgba(10, 13, 18, .045);
    --input-bg: #FFFFFF;
    --input-solid: #FFFFFF;
    --field-glow: 0 0 0 1px #E5370C, 0 10px 28px -18px rgba(229, 55, 12, .75);
    --grad-text: linear-gradient(100deg, #E8650F 0%, #E5470F 45%, #C32E08 100%);
    --beam-o: .12;
    --title: "Archivo", "Segoe UI", system-ui, sans-serif;
    --body: "Inter", "Segoe UI", system-ui, sans-serif;
    --mono: "JetBrains Mono", "Cascadia Code", Consolas, monospace;
    --ease: cubic-bezier(.22, 1, .36, 1);

    --o: #FF5926;
    --rule: linear-gradient(90deg, #FFB547, #FF5926 50%, #E5370C);
    --grad: linear-gradient(135deg, #FF9A3D 0%, #FF5926 50%, #D9300A 100%);
    --grad-fill: var(--grad);
    --cut: 10px;
    --chamfer: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
    --hex: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
    --wedge: linear-gradient(225deg, var(--o) 0 50%, transparent 50%) right top / 12px 12px no-repeat;
    color-scheme: light;
}
[data-theme="dark"] {
    --bg: #05070A;
    --bg-alt: #080B10;
    --card: #0C1016;
    --surface-2: #11161E;
    --surface-3: #18202A;
    --text: #F3F5F7;
    --text-2: #C2CAD3;
    --muted: #8893A0;
    --faint: #59636F;
    --border: rgba(255, 255, 255, .075);
    --border-strong: rgba(255, 255, 255, .15);
    --navy: #080B10;
    --navy-2: #0C1016;
    --navy-card: #0C1016;
    --on-navy: #F3F5F7;
    --on-navy-2: #C2CAD3;
    --shadow: 0 18px 40px -22px rgba(0, 0, 0, .9);
    --shadow-lg: 0 40px 90px -40px rgba(0, 0, 0, .95);
    --accent-text: #FF7A45;
    --eyebrow-ink: #FF8A4D;
    --line-accent: rgba(255, 89, 38, .35);
    --grid-line: rgba(255, 255, 255, .03);
    --input-bg: rgba(255, 255, 255, .025);
    --input-solid: #0B0F15;
    --field-glow: 0 0 0 1px #FF5926, 0 10px 30px -18px rgba(255, 89, 38, .9);
    --grad-text: linear-gradient(100deg, #FFB547 0%, #FF7A3D 45%, #FF4419 100%);
    --beam-o: .22;
    color-scheme: dark;
}


/* ---- GROUND ---------------------------------------------------------------------------------------------------------
   A flat ground with an engineering grid that fades out below the fold, and one hard beam of the gradient falling
   across the top of the page. */

body { background: var(--bg); color: var(--muted); font: 16px/1.7 var(--body); }
body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
               background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
               background-size: 72px 72px; background-position: -1px -1px;
               -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 90%); mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 90%); }
body::after { content: ""; position: fixed; z-index: -1; pointer-events: none; width: 140vw; height: 160px; top: -60px; left: -20vw; transform: rotate(-8deg);
              background: var(--rule); filter: blur(70px); opacity: var(--beam-o); }
::selection { background: #FF5926; color: #fff; }
* { scrollbar-color: color-mix(in srgb, var(--muted) 50%, transparent) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 45%, transparent); }
::-webkit-scrollbar-thumb:hover { background: #FF5926; }
:focus-visible { outline: 2px solid #FF5926; outline-offset: 2px; }
.section, .section.alt, .section.navy, .contact { background: transparent; color: var(--muted); }
.section.alt { background: color-mix(in srgb, var(--bg-alt) 55%, transparent); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section.navy { background: color-mix(in srgb, var(--bg-alt) 80%, transparent); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section.navy h2, .section.navy h3, .section.navy h4 { color: var(--text); }
.contact::before { display: none; }


/* ---- TYPE -----------------------------------------------------------------------------------------------------------
   Archivo, expanded (font-stretch 125%) and set in capitals for the headlines; Inter for reading. */

h1, h2 { font-family: var(--title); font-stretch: 125%; font-weight: 800; text-transform: uppercase; letter-spacing: -.012em; line-height: 1.04; color: var(--text); }
h3 { font-family: var(--title); font-stretch: 112%; font-weight: 700; letter-spacing: -.005em; color: var(--text); }
h4 { font-family: var(--title); font-stretch: 108%; font-weight: 700; color: var(--text); }
.section-head h2 { font-size: clamp(28px, 3.4vw, 42px); }
.section-head p { color: var(--text-2); }
.hl { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* EYEBROW: no pill - a gradient rule and widely tracked capitals */
.eyebrow { gap: 12px; margin-bottom: 16px; font: 700 11px/1.2 var(--title); font-stretch: 125%; letter-spacing: .24em; text-transform: uppercase; color: var(--eyebrow-ink) !important; }
.eyebrow::before { width: 34px; height: 2px; flex: none; background: var(--rule); }
/* the homepage numbers its sections: "01", "02"... ahead of the rule */
body.home { counter-reset: vel-sec; }
body.home .section-head .eyebrow { counter-increment: vel-sec; }
body.home .section-head .eyebrow::before { content: counter(vel-sec, decimal-leading-zero); width: auto; height: auto; padding-right: 46px; color: var(--muted);
    background: var(--rule) no-repeat right center / 34px 2px; font-stretch: 112%; letter-spacing: .1em; }


/* ---- BUTTONS --------------------------------------------------------------------------------------------------------
   Capitals in the expanded face, cut on the chamfer. Primary is the gradient, turning slowly (a full revolution every
   9 seconds); hover runs a light bar across it. Secondary is an outline in the text colour that fills on hover. The
   focus ring is drawn inside (an outline would be clipped away with the corners). */

.btn { --cut: 9px; height: 52px; padding: 0 28px; border: 0; border-radius: 0; clip-path: var(--chamfer); position: relative; overflow: hidden; isolation: isolate;
       font: 700 13px var(--title); font-stretch: 118%; letter-spacing: .08em; text-transform: uppercase; text-shadow: none; box-shadow: none;
       transition: background-color .35s ease, color .35s ease, box-shadow .35s ease, transform .2s ease; }
.btn:hover { transform: none; }
.btn:active { transform: scale(.985); }
.btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--text); }
.btn.primary { color: #fff; box-shadow: none; text-shadow: 0 1px 1px rgba(90, 20, 0, .25);
               background: linear-gradient(var(--vel-a), #FF9A3D 0%, #FF5926 50%, #D9300A 100%); animation: vel-turn 9s linear infinite; }
.btn.primary::before { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 30%; z-index: -1; pointer-events: none; opacity: 0;
                       background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent); transform: translateX(-160%) skewX(-30deg);
                       transition: opacity .35s ease, transform 0s linear .35s; }
.btn.primary:hover { box-shadow: none; transform: none; }
.btn.primary:hover::before { opacity: 1; transform: translateX(420%) skewX(-30deg); transition: opacity .2s ease, transform 1s cubic-bezier(.3, .7, .2, 1); }
.btn.primary:focus-visible { box-shadow: inset 0 0 0 2px #fff; }
@keyframes vel-turn { to { --vel-a: 495deg; } }
.btn.outline, .btn.ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--border-strong); }
.btn.outline:hover, .btn.ghost:hover { background: var(--text); color: var(--bg); box-shadow: inset 0 0 0 1px var(--text); }
.btn.sm { --cut: 7px; height: 42px; padding: 0 18px; font-size: 11.5px; letter-spacing: .07em; }


/* ---- FIELDS ---------------------------------------------------------------------------------------------------------
   Square fields with a hairline. The label rests inside the field and glides up to a small caption on focus or once
   filled; focus draws the gradient round the field (an opaque fill on the padding box over the gradient on the border
   box) inside one line of orange light. */

.fl input, .fl textarea, .fl select {
    border-radius: 0; border: 1px solid var(--border-strong); background: var(--input-bg); color: var(--text); font: 500 16px var(--body);
    padding: 26px 18px 9px; box-shadow: none; transition: border-color .25s, box-shadow .35s var(--ease), background-color .25s;
}
.fl textarea { padding-top: 30px; }
.fl select { padding-right: 46px; }
.fl input:hover, .fl textarea:hover, .fl select:hover { border-color: var(--muted); }
.fl input:focus, .fl textarea:focus, .fl select:focus {
    border-color: transparent; box-shadow: var(--field-glow);
    background: linear-gradient(var(--input-solid), var(--input-solid)) padding-box, linear-gradient(135deg, #FF9A3D, #FF5926 50%, #D9300A) border-box;
}
.fl label { font: 500 16px var(--body); color: var(--muted); transition: transform .32s var(--ease), color .3s ease, letter-spacing .32s var(--ease); }
.fl input:focus + label, .fl textarea:focus + label, .fl select:focus + label { color: var(--accent-text); }
.fl input:focus + label, .fl input:not(:placeholder-shown) + label, .fl textarea:focus + label, .fl textarea:not(:placeholder-shown) + label,
.fl select:focus + label, .fl select:valid + label { transform: translateY(-11px) scale(.74); font-weight: 600; letter-spacing: .02em; }
.fl.bad input, .fl.bad textarea, .fl.bad select { border-color: #F43F5E; box-shadow: 0 0 0 1px rgba(244, 63, 94, .5); }
.fl .count { font: 500 11px var(--mono); }
.form-foot .btn:hover svg { transform: translate(3px, -3px); }


/* ---- SURFACES -------------------------------------------------------------------------------------------------------
   Cards are sharp with a hairline and carry the chamfer as a mark: a small orange wedge in the top-right corner. On
   hover a lit top edge. */

.panel, .mcard, .plan, .req, .lcard, .ep-card, .gcard, .gpn a, .mail-card, .contact-form, .strip .row, .exact .pt, .eq, .step, .faq details, .tbl, .table-wrap,
.need, .doc-m, .timeline-panel {
    border-radius: 0; box-shadow: none; border: 1px solid var(--border);
}
.panel, .mcard, .plan:not(.free), .req, .lcard, .ep-card, .gcard, .gpn a, .mail-card, .contact-form, .exact .pt, .eq, .step, .faq details {
    background: var(--wedge), var(--card);
}
.panel, .contact-form, .mcard { box-shadow: var(--shadow); }
.mcard, .lcard, .ep-card, .gcard, .gpn a, .req, .step, .plan, .exact .pt, .faq details { transition: box-shadow .3s var(--ease), border-color .3s, transform .3s var(--ease); }
.mcard:hover, .lcard:hover, .ep-card:hover, .gcard:hover, .gpn a:hover, .req:hover, .step:hover, .plan:hover, .exact .pt:hover, .faq details:hover {
    transform: translateY(-3px); border-color: var(--border-strong); box-shadow: inset 0 2px 0 var(--o), var(--shadow);
}
.contact-form::before { height: 2px; border-radius: 0; background: var(--rule); }

/* THE HEXAGON: every icon tile and step number */
.lcard .ic, .exact .pt .ic, .mail-card .ic, .guide-card .ic, .gmeta .ic, .mnav .links .ic, .guide-head .num, .gstep::before, .lossless-table .ok, .contact-form .sent .ic {
    border-radius: 0 !important; clip-path: var(--hex); box-shadow: none !important; border: 0 !important;
}
.lcard .ic, .exact .pt .ic, .mail-card .ic, .guide-card .ic, .gmeta .ic, .guide-head .num { width: 50px; height: 46px; color: #fff; background: var(--grad); }
.gmeta .ic { width: 32px; height: 29px; }
.guide-head .num { font: 800 20px var(--title); font-stretch: 118%; }
.gstep::before { width: 42px; height: 38px; color: #fff; background: var(--grad); font: 800 16px var(--title); font-stretch: 112%; top: -6px; }
.gstep::after { left: 20px; background: linear-gradient(var(--o), transparent); opacity: .5; width: 1px; }
.ticks li::before { border-radius: 0; clip-path: var(--hex); width: 24px; height: 22px; background-color: color-mix(in srgb, var(--o) 16%, transparent); }
.lossless-table .ok { width: 22px; height: 20px; background: var(--grad); }

/* FRAME BRACKETS: four L-marks just outside a frame (the hero animation, the screenshots) */
.stage-frame, .shot-wrap { position: relative; }
.stage-frame::before, .shot-wrap::before {
    content: ""; position: absolute; inset: -12px; z-index: 6; pointer-events: none; opacity: 1; border-radius: 0; --bk: var(--o);
    background:
        linear-gradient(var(--bk), var(--bk)) top left / 22px 2px no-repeat, linear-gradient(var(--bk), var(--bk)) top left / 2px 22px no-repeat,
        linear-gradient(var(--bk), var(--bk)) top right / 22px 2px no-repeat, linear-gradient(var(--bk), var(--bk)) top right / 2px 22px no-repeat,
        linear-gradient(var(--bk), var(--bk)) bottom left / 22px 2px no-repeat, linear-gradient(var(--bk), var(--bk)) bottom left / 2px 22px no-repeat,
        linear-gradient(var(--bk), var(--bk)) bottom right / 22px 2px no-repeat, linear-gradient(var(--bk), var(--bk)) bottom right / 2px 22px no-repeat;
}
.shot { border-radius: 0; box-shadow: var(--shadow-lg); }


/* ---- TABS, TAGS, TABLES ---------------------------------------------------------------------------------------------- */

.model-tabs, .stage-tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 0; background: var(--card); border: 1px solid var(--border); }
.stage-tabs { margin: 16px auto 0; display: flex; width: max-content; max-width: 100%; }
.model-tabs button, .stage-tabs button { border: 0; border-radius: 0; background: transparent; color: var(--muted); padding: 11px 18px;
    font: 700 11.5px var(--title); font-stretch: 112%; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background .25s, color .25s; }
.model-tabs button:hover, .stage-tabs button:hover { color: var(--text); }
.model-tabs button.on, [data-theme="dark"] .model-tabs button.on, .stage-tabs button.on { background: var(--text); color: var(--bg); border: 0; }
.stage-note { color: var(--faint); }

table.speed th { background: var(--surface-2); color: var(--muted); font: 700 11px var(--title); font-stretch: 112%; letter-spacing: .12em; text-transform: uppercase;
                 border-bottom: 1px solid var(--border); }
table.speed tbody tr:hover td { box-shadow: inset 0 0 0 0 transparent; }
table.speed tbody tr:hover td:first-child { box-shadow: inset 2px 0 0 var(--o); }
table.speed tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
table.speed td.x { font-stretch: 118%; }
.bench-table thead tr + tr th { color: var(--faint); }
.bench-table th[colspan] { border-left: 1px solid var(--border); }
.bench-table tr.total td { border-top: 1px solid var(--border-strong); }
.tbl { border-radius: 0; }
.tbl th { font-stretch: 112%; background: var(--surface-2); }
.tbl tr:hover td:first-child { box-shadow: inset 2px 0 0 var(--o); }

.chip { border-radius: 0; --cut: 6px; clip-path: var(--chamfer); font: 700 11px var(--title); font-stretch: 112%; letter-spacing: .08em; text-transform: uppercase;
        background: var(--surface-2); border: 0; box-shadow: inset 0 0 0 1px var(--border-strong); color: var(--text-2); }
.chip.yes { background: color-mix(in srgb, var(--o) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--o) 45%, transparent); color: var(--accent-text); }
.chip.no { background: rgba(48, 196, 132, .12); box-shadow: inset 0 0 0 1px rgba(48, 196, 132, .4); color: #13865a; }
[data-theme="dark"] .chip.no { color: #7fe0b4; }
.m { border-radius: 0; --cut: 5px; clip-path: var(--chamfer); }
.ui, kbd, code.inl, .tbl code, .doc p code, .doc li code { border-radius: 0; }


/* ---- NAVIGATION ---------------------------------------------------------------------------------------------------- */

.topbar { background: var(--bg-alt); color: var(--muted); border-bottom: 1px solid var(--border); font-size: 12.5px; }
.topbar .container { height: 40px; }
.topbar .item b { color: var(--text); }
.topbar .item svg { color: var(--o); }
.header { background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 0; }
.header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rule); opacity: .7; }
.header .container { height: 80px; gap: 30px; }
.brand-logo { height: 40px; }
.nav { gap: 2px; margin-left: 10px; }
.nav a { padding: 8px 14px; font: 600 12px var(--title); font-stretch: 112%; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.nav a::after { left: 14px; right: 14px; bottom: 2px; height: 2px; background: var(--rule); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.nav a:hover { color: var(--text); }
.nav a:hover::after { right: 14px; transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--text); }
.nav a[aria-current="page"]::after { right: 14px; transform: scaleX(1); }
.theme-toggle, .menu-toggle { --cut: 7px; border-radius: 0; clip-path: var(--chamfer); border: 0; background: var(--card); box-shadow: inset 0 0 0 1px var(--border-strong);
                              width: 44px; height: 44px; color: var(--text); }
.theme-toggle:hover, .menu-toggle:hover { transform: none; background: var(--text); color: var(--bg); box-shadow: inset 0 0 0 1px var(--text); }

/* the phone / tablet drawer follows the theme */
.mnav .scrim { background: color-mix(in srgb, var(--bg) 60%, transparent); }
.mnav .panel { background: var(--bg); color: var(--text-2); border-left: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.mnav .panel::before { background: none; border-left: 2px solid; border-image: linear-gradient(180deg, #FFB547, #FF5926 50%, #E5370C) 1; }
.mnav .top img { content: url("../img/logo-light.png"); }
[data-theme="dark"] .mnav .top img { content: url("../img/logo-dark.png"); }
.mnav .close { --cut: 7px; border-radius: 0; clip-path: var(--chamfer); border: 0; background: var(--card); box-shadow: inset 0 0 0 1px var(--border-strong); color: var(--text); }
.mnav .close:hover { transform: none; background: var(--text); color: var(--bg); }
.mnav .k { font-stretch: 125%; letter-spacing: .22em; color: var(--muted); }
.mnav .links a { border-radius: 0; color: var(--text); font: 700 15px/1.2 var(--title); font-stretch: 112%; text-transform: uppercase; letter-spacing: .04em; }
.mnav .links a small { color: var(--muted); text-transform: none; letter-spacing: 0; font: 500 12.5px var(--body); }
.mnav .links .ic { width: 42px; height: 38px; color: #fff; background: var(--grad); }
.mnav .links .chev { color: var(--faint); }
.mnav .links a:hover, .mnav .links a:focus-visible { background: color-mix(in srgb, var(--o) 8%, transparent); }
.mnav .links a[aria-current] { background: linear-gradient(90deg, color-mix(in srgb, var(--o) 16%, transparent), transparent 85%); box-shadow: inset 2px 0 0 var(--o); }
.mnav .cta, .mnav .sec a { color: var(--muted); }

/* footer: the second ground with a gradient hairline */
.footer { position: relative; background: var(--bg-alt); color: var(--muted); }
.footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--rule); opacity: .7; }
.footer h4 { color: var(--text); font: 700 11px var(--title); font-stretch: 125%; letter-spacing: .2em; text-transform: uppercase; }
.footer a:hover { color: var(--accent-text); }
.footer .logo { content: url("../img/logo-light.png"); height: 40px; }
[data-theme="dark"] .footer .logo { content: url("../img/logo-dark.png"); }
.footer .bottom { border-top: 1px solid var(--border); }
.footer .tm { color: var(--faint); }


/* ---- HERO ---------------------------------------------------------------------------------------------------------- */

.hero { background: transparent; color: var(--text-2); }
.hero::before { display: none; }
.hero .container { padding: 70px 0 110px; }
.hero h1 { color: var(--text); font-size: clamp(34px, 4.3vw, 60px); font-weight: 800; letter-spacing: -.015em; line-height: 1; }
.hero h1 .x { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lead { color: var(--text-2); }
.hero .lead b { color: var(--text); }
.hero .fine { color: var(--muted); }
.hero-stats { border-radius: 0; border: 1px solid var(--border); background: var(--wedge), var(--card); }
.hero-stats div { border-left: 1px solid var(--border); }
.hero-stats b { color: var(--text); font: 800 28px var(--title); font-stretch: 118%; letter-spacing: -.02em; }
.hero-stats b .o { color: var(--o); }
.hero-stats div > span { display: block; margin-top: 4px; color: var(--muted); font: 600 10px/1.35 var(--title); font-stretch: 108%; letter-spacing: .06em; text-transform: uppercase; }
.hero-stats div { padding: 18px 16px; }
.stage { border-radius: 0; }
.strip .row { border-radius: 0; background: var(--wedge), var(--card); box-shadow: var(--shadow-lg); }
.strip .cell { border-left: 1px solid var(--border); }
.strip .n { font: 800 30px/1 var(--title); font-stretch: 125%; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.strip h3 { text-transform: uppercase; font-size: 17px; letter-spacing: .02em; }

/* page heroes (guides, API Guide, benchmarks, legal): the plain ground, the gradient as a rule */
.page-hero, .guides-hero { background: transparent; color: var(--text-2); border-bottom: 1px solid var(--border); }
.page-hero::before, .guides-hero::before { display: none; }
.page-hero h1, .guides-hero h1, .guides-hero .guide-head h1 { color: var(--text); }
.guides-hero p { color: var(--text-2); }
.guides-hero .crumbs { color: var(--muted); font: 600 11px var(--title); font-stretch: 112%; letter-spacing: .12em; text-transform: uppercase; }
.guides-hero .crumbs a { color: var(--text); }
.guides-hero .crumbs a:hover { color: var(--accent-text); }
.guides-hero .crumbs span { color: var(--faint); }
.guides-hero .guide-head .meta { color: var(--muted); }
.guide-card { border-radius: 0; background: var(--wedge), var(--card); border: 1px solid var(--border); color: var(--text-2); }
.guide-card:hover { background: var(--wedge), var(--card); border-color: var(--border-strong); box-shadow: inset 0 2px 0 var(--o), var(--shadow); }
.guide-card b { color: var(--text); }
.guide-card small { color: var(--muted); }
.api-hero .hero-ep code { color: var(--text); }
.api-hero .chip { color: var(--text-2); }
[data-theme="dark"] .api-hero .m.get, .api-hero .m.get { color: #13865a; background: rgba(19, 134, 90, .12); }
[data-theme="dark"] .api-hero .m.get { color: #5fe0a8; background: rgba(48, 196, 132, .16); }
.api-hero .m.post { color: var(--accent-text); background: color-mix(in srgb, var(--o) 14%, transparent); }
.bench-jump a { border-radius: 0; --cut: 6px; clip-path: var(--chamfer); border: 0; background: var(--card); box-shadow: inset 0 0 0 1px var(--border-strong); color: var(--text);
                font: 700 11px var(--title); font-stretch: 112%; letter-spacing: .1em; text-transform: uppercase; padding: 10px 16px; }
.bench-jump a:hover { background: var(--text); color: var(--bg); box-shadow: inset 0 0 0 1px var(--text); }
.legal .note { border-radius: 0; border-left: 3px solid var(--o); background: var(--card); }


/* ---- SECTIONS ------------------------------------------------------------------------------------------------------ */

/* value */
.value h2 .hl { white-space: normal; }
.eq { border-radius: 0; }
.eq .m { color: var(--muted); }
.eq .m b { color: var(--text); font-stretch: 112%; }
.eq .f { color: var(--text-2); font-family: var(--mono); font-size: 14px; }
.eq strong { font: 800 26px var(--title); font-stretch: 118%; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.receipt { border-radius: 0; --cut: 16px; clip-path: var(--chamfer); background: linear-gradient(160deg, #10141B, #05070A); border: 1px solid rgba(255, 89, 38, .35); }
.receipt .you { border-radius: 0; --cut: 9px; clip-path: var(--chamfer); }
.value-note { color: var(--faint); }

/* speed */
.big-x .x { font: 800 92px/.9 var(--title); font-stretch: 118%; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.big-x .lbl { font: 700 11.5px var(--title); font-stretch: 112%; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.race .lane, .hb-row .lane { border-radius: 0; height: 8px; background: var(--surface-3); }
.race .lane i, .hb-row .lane i { border-radius: 0; }
.race .lane i.e, .hb-row .lane i.e { background: linear-gradient(90deg, #FF9A3D, #FF5926 50%, #D9300A); box-shadow: none; }
.callout-box { border-radius: 0; border: 0; border-left: 3px solid var(--o); background: var(--card); color: var(--text); font: 700 12.5px var(--title); font-stretch: 112%;
               letter-spacing: .1em; text-transform: uppercase; }
.legend i { border-radius: 0; }
.legend .e i { background: var(--grad); }
.chart .tip { border-radius: 0; border-top: 2px solid var(--o); }
.chart .mult { font-stretch: 118%; }

/* custom engine + duel */
.exact .pt { border-radius: 0; }
.exact .pt h4 { text-transform: uppercase; font-size: 15px; letter-spacing: .04em; }
.exact .pt p { color: var(--text-2); }
.flow { border-radius: 0; --cut: 14px; clip-path: var(--chamfer); background: linear-gradient(160deg, #10141B, #05070A); border: 1px solid rgba(255, 255, 255, .08); }
.duel .lane-box { border-radius: 0; }
.duel .same { border-radius: 0; font-stretch: 112%; letter-spacing: .04em; }

/* features */
.feature h3 { text-transform: uppercase; font-stretch: 125%; font-weight: 800; letter-spacing: -.01em; line-height: 1.05; font-size: clamp(26px, 2.8vw, 38px); }
.feature p { color: var(--text-2); }
.ticks li { color: var(--text-2); }

/* lossless */
.lcard h3 { text-transform: uppercase; font-size: 16px; letter-spacing: .03em; }
.lcard p { color: var(--text-2); }

/* models */
.mcard .top { background: transparent; color: var(--text-2); border-bottom: 1px solid var(--border); }
.mcard .tag { font: 700 11px var(--title); font-stretch: 125%; letter-spacing: .22em; color: var(--eyebrow-ink); }
.mcard .tag::before { content: ""; display: inline-block; width: 22px; height: 2px; margin-right: 10px; vertical-align: middle; background: var(--rule); }
.mcard h3 { color: var(--text); text-transform: uppercase; font-stretch: 125%; font-weight: 800; font-size: 28px; }
.mcard .nums b { font-stretch: 118%; letter-spacing: -.02em; }
.mcard .nums b.o { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mcard .nums span { font: 600 10.5px var(--title); font-stretch: 112%; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* steps */
.step { border-radius: 0; }
.step .n { font: 700 11px var(--title); font-stretch: 125%; letter-spacing: .22em; color: var(--eyebrow-ink); }
.step h4 { text-transform: uppercase; letter-spacing: .03em; }
.step p { color: var(--text-2); }
.step .ic { color: color-mix(in srgb, var(--o) 30%, transparent); }

/* pricing */
.plan { border-radius: 0; }
.plan.free { --cut: 18px; clip-path: var(--chamfer); background: var(--card); color: var(--text-2); border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.plan.free::after { content: ""; position: absolute; inset: 0 0 auto 0; width: auto; height: 2px; border-radius: 0; top: 0; right: 0; background: var(--rule); }
.plan.free::before { content: ""; position: absolute; top: 0; right: 0; width: 18px; height: 18px; background: linear-gradient(225deg, var(--o) 0 50%, transparent 50%); }
.plan .kind { font: 700 11px var(--title); font-stretch: 125%; letter-spacing: .22em; color: var(--eyebrow-ink); }
.plan.free h3, .plan h3 { color: var(--text); }
.plan .price { font-stretch: 125%; text-transform: uppercase; }
.plan.free .price { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.plan.free .ticks li { color: var(--text-2); }
.plan .fine { color: var(--muted); }
.plans-note { color: var(--muted); }

/* requirements */
.req .k { font: 700 10.5px var(--title); font-stretch: 125%; letter-spacing: .2em; color: var(--muted); }
.req .v { font-stretch: 118%; text-transform: uppercase; font-size: 18px; letter-spacing: .01em; }
.req p { color: var(--text-2); }

/* faq */
.faq details[open] { border-color: var(--border-strong); box-shadow: inset 0 2px 0 var(--o), var(--shadow); }
.faq summary { font: 700 15px var(--title); font-stretch: 112%; text-transform: uppercase; letter-spacing: .02em; }
.faq summary .n { font-stretch: 112%; color: var(--muted); font-size: 12px; letter-spacing: .1em; }
.faq summary::after { color: var(--o); font-weight: 400; }
.faq details p { color: var(--text-2); }

/* call to action band: the carbon plate with a gradient rule, in both themes */
.cta-band { background: #05070A; border-top: 1px solid rgba(255, 255, 255, .08); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.cta-band::after { background: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 72px 72px, linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 72px 72px; }
.cta-band::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--rule); z-index: 2; }
.cta-band h2 { color: #fff; font-size: clamp(24px, 2.8vw, 36px); }
.cta-band .btn { background: linear-gradient(var(--vel-a), #FF9A3D 0%, #FF5926 50%, #D9300A 100%); color: #fff; animation: vel-turn 9s linear infinite; }
.cta-band .btn:hover { background: #fff; color: #05070A; }

/* contact */
.mail-card { border-radius: 0; }
.mail-card small { font: 600 10.5px var(--title); font-stretch: 112%; letter-spacing: .12em; }
.mail-card a { font-stretch: 112%; }
.mail-card .copy { --cut: 6px; border-radius: 0; clip-path: var(--chamfer); border: 0; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-strong); }
.mail-card .copy:hover { background: var(--text); color: var(--bg); }
.contact-form { border-radius: 0; padding: 40px; }
.contact-form .sent { border-radius: 0; }
.contact-points li::before { border-radius: 0; background: var(--o); }

/* guides and the API Guide */
.toc .k { font-stretch: 125%; letter-spacing: .2em; font-size: 10.5px; }
.toc a { border-radius: 0; }
.toc a.on { border-left-color: var(--o); background: linear-gradient(90deg, color-mix(in srgb, var(--o) 12%, transparent), transparent 85%); }
.toc a:hover { background: color-mix(in srgb, var(--o) 6%, transparent); }
.need { border-radius: 0; background: var(--card); }
.callout { border-radius: 0; border: 0; border-left: 3px solid var(--o); background: color-mix(in srgb, var(--o) 7%, var(--card)); }
.callout.info { border-left-color: #4688e3; background: color-mix(in srgb, #4688e3 7%, var(--card)); }
.gshot .frame { border-radius: 0; }
.gthumb { border-bottom: 1px solid var(--border); }
.gnum { border-radius: 0; --cut: 6px; clip-path: var(--chamfer); background: var(--grad); font-stretch: 118%; }
.gbody h2 { font-size: 17px; letter-spacing: .01em; }
.gbody .more { font: 700 11.5px var(--title); font-stretch: 112%; letter-spacing: .1em; text-transform: uppercase; }
.guide-head h2 { font-size: clamp(22px, 2.6vw, 30px); }
.gpn small { font: 600 10.5px var(--title); font-stretch: 112%; letter-spacing: .14em; }
.gpn b { font-stretch: 112%; text-transform: uppercase; font-size: 15px; letter-spacing: .02em; }
.doc h2 { font-size: clamp(20px, 2.3vw, 26px); }
.doc h3 { text-transform: none; }
.codetabs, pre.code { border-radius: 0; background: #05070A; border: 1px solid rgba(255, 255, 255, .08); }
.codetabs { --cut: 12px; clip-path: var(--chamfer); }
.codetabs .bar { background: #0C1016; }
.codetabs .bar button { border-radius: 0; font-stretch: 112%; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; }
.codetabs .bar button.on { background: #05070A; border-bottom-color: var(--o); }
.codetabs .copy { --cut: 6px; border-radius: 0; clip-path: var(--chamfer); }
.ep-card { border-radius: 0; }
.ep-card b { font-stretch: 112%; }

/* benchmarks */
.hb-head b { font-stretch: 112%; }
.timeline .t { font-stretch: 118%; }
.bench-sub { text-transform: uppercase; font-stretch: 118%; font-size: 18px; letter-spacing: .03em; }
.bench-wide { background: var(--wedge), var(--card); }


/* ---- PHONES: the expanded face eases in width so capitals never crowd a narrow screen ------------------------------- */
@media (max-width: 720px) {
    .header .container { height: 68px; }
    .brand-logo { height: 34px; }
}
@media (max-width: 480px) {
    .btn { font-stretch: 100%; letter-spacing: .04em; }
    h1, h2 { font-stretch: 112%; }
    .eyebrow { letter-spacing: .16em; }
}

@media (prefers-reduced-motion: reduce) {
    .btn.primary, .cta-band .btn { animation: none; }
    .nav a::after { transition: none; }
}


/* ---- MOTION ---------------------------------------------------------------------------------------------------------
   Every hover glides on one long ease-out (--ease) instead of snapping. Buttons lift; outlines fill from the left
   (a wipe, not a swap); primaries brighten under their light bar. Cards rise, their top edge lights from the left and
   their corner wedge grows. Touch screens keep the colours but not the movement; reduced motion keeps neither. */

.btn { transition: background-color .45s var(--ease), background-size .55s var(--ease), color .35s ease, box-shadow .45s var(--ease),
                   transform .45s var(--ease), filter .45s var(--ease); }
.btn svg { transition: transform .45s var(--ease); }
.btn.outline, .btn.ghost { background: linear-gradient(var(--text), var(--text)) left center / 0% 100% no-repeat transparent; }
.btn.outline:hover, .btn.ghost:hover { background: linear-gradient(var(--text), var(--text)) left center / 100% 100% no-repeat transparent; color: var(--bg); }
.btn.primary:hover { filter: brightness(1.08) saturate(1.08); }
.cta-band .btn:hover { background: linear-gradient(var(--vel-a), #FF9A3D 0%, #FF5926 50%, #D9300A 100%); color: #fff; filter: brightness(1.1) saturate(1.1); }
.theme-toggle, .menu-toggle, .mnav .close, .mail-card .copy, .codetabs .copy, .bench-jump a {
    transition: background-color .4s var(--ease), color .35s ease, box-shadow .4s var(--ease), transform .5s var(--ease); }
.model-tabs button, .stage-tabs button, .codetabs .bar button { transition: background-color .4s var(--ease), color .35s ease; }
.nav a::after { transition: transform .5s var(--ease); }
.footer a, .toc a, .crumbs a { transition: color .3s ease, background-color .3s ease; }

.mcard, .lcard, .ep-card, .gcard, .gpn a, .req, .step, .plan, .exact .pt, .faq details, .guide-card {
    transition: transform .6s var(--ease), box-shadow .6s var(--ease), border-color .45s ease, background-size .65s var(--ease), opacity .8s var(--ease); }
.mcard, .lcard, .ep-card, .gcard, .gpn a, .req, .step, .plan:not(.free), .exact .pt, .faq details, .guide-card {
    background: linear-gradient(90deg, #FFB547, #FF5926 50%, #E5370C) left top / 0% 2px no-repeat,
                linear-gradient(225deg, var(--o) 0 50%, transparent 50%) right top / 12px 12px no-repeat, var(--card);
}
.mcard:hover, .lcard:hover, .ep-card:hover, .gcard:hover, .gpn a:hover, .req:hover, .step:hover, .plan:not(.free):hover, .exact .pt:hover,
.faq details:hover, .guide-card:hover {
    background: linear-gradient(90deg, #FFB547, #FF5926 50%, #E5370C) left top / 100% 2px no-repeat,
                linear-gradient(225deg, var(--o) 0 50%, transparent 50%) right top / 20px 20px no-repeat, var(--card);
    border-color: color-mix(in srgb, var(--o) 40%, var(--border-strong));
    box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--o) 55%, transparent), 0 18px 40px -24px rgba(5, 7, 10, .35);
}
.lcard .ic, .exact .pt .ic, .guide-card .ic, .mail-card .ic, .mcard .nums b { transition: transform .6s var(--ease), filter .6s var(--ease); }
@media (hover: hover) and (pointer: fine) {
    .btn:hover { transform: translateY(-2px); }
    .btn:active { transform: translateY(0) scale(.98); transition-duration: .12s; }
    .btn:hover svg { transform: scale(1.14); }
    .mcard:hover, .lcard:hover, .ep-card:hover, .gcard:hover, .step:hover, .plan:hover, .exact .pt:hover, .guide-card:hover { transform: translateY(-6px); }
    .req:hover, .gpn a:hover { transform: translateY(-4px); }
    .faq details:hover { transform: translateY(-2px); }
    .lcard:hover .ic, .exact .pt:hover .ic, .guide-card:hover .ic { transform: scale(1.08) rotate(-4deg); filter: brightness(1.12); }
    .theme-toggle:hover, .menu-toggle:hover { transform: translateY(-2px); }
    .mnav .close:hover { transform: rotate(90deg); }
    .bench-jump a:hover { transform: translateY(-2px); }
}
@media (hover: none) {
    .mcard:hover, .lcard:hover, .ep-card:hover, .gcard:hover, .gpn a:hover, .req:hover, .step:hover, .plan:hover, .exact .pt:hover,
    .faq details:hover, .guide-card:hover { transform: none; }
}


/* ---- SPEED THAT STACKS (home, API Speed): llama.cpp -> 5090Ai one call -> 5090Ai four calls, one scale --------------- */

.stack { position: relative; max-width: 1040px; margin: 0 auto 56px; padding: 32px 38px 30px; border: 1px solid var(--border);
         background: var(--wedge), var(--card); box-shadow: var(--shadow-lg); text-align: left; }
.stack::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--rule); }
.st-top { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 30px; }
.st-title b { display: block; font: 800 20px var(--title); font-stretch: 118%; letter-spacing: .02em; text-transform: uppercase; color: var(--text); }
.st-title span { font: 600 10.5px var(--title); font-stretch: 112%; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.st-row { display: grid; grid-template-columns: 220px minmax(0, 1fr) 130px; gap: 22px; align-items: center; }
.st-k b { display: block; font: 800 14px var(--title); font-stretch: 112%; letter-spacing: .04em; text-transform: uppercase; color: var(--text); }
.st-k span { font-size: 13px; color: var(--muted); }
.st-lane { display: flex; height: 24px; background: var(--surface-3); overflow: hidden; }
.st-lane i { display: block; height: 100%; width: 0; flex: none; transition: width 1.3s var(--ease); }
.st-row.l .st-lane i { background: var(--blue); }
.st-row.c .st-lane i, .st-row.a .st-lane i.base { background: color-mix(in srgb, var(--o) 22%, var(--surface-3)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--o) 75%, transparent); }
.st-row.c .st-lane i { transition-delay: .15s; }
.st-row.a .st-lane i.base { transition-delay: .3s; }
.st-row.a .st-lane i.add { position: relative; overflow: hidden; transition-delay: .75s; transition-duration: 1.5s;
    background: linear-gradient(90deg, #FF9A3D, #FF5926 50%, #D9300A); box-shadow: 0 0 28px -2px rgba(255, 89, 38, .65); }
.st-row.a .st-lane i.add::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent); animation: st-shine 2.8s var(--ease) 2.4s infinite; }
@keyframes st-shine { 0% { left: -40%; } 60%, 100% { left: 110%; } }
.st-v { text-align: right; white-space: nowrap; }
.st-v b { font: 800 26px var(--title); font-stretch: 118%; letter-spacing: -.01em; color: var(--text); font-variant-numeric: tabular-nums; }
.st-v span { margin-left: 6px; font: 600 10.5px var(--title); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.st-row.a .st-v b { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 32px; }
.st-step { position: relative; display: flex; align-items: center; gap: 12px; margin: 8px 0 8px 242px; padding-left: 18px;
           font: 700 11px var(--title); font-stretch: 112%; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.st-step::before { content: ""; position: absolute; left: 0; top: -8px; bottom: -8px; width: 2px; background: linear-gradient(var(--o), transparent); opacity: .7; }
.st-x { --cut: 6px; display: inline-flex; align-items: center; padding: 5px 10px; clip-path: var(--chamfer); font: 800 14px var(--title); font-stretch: 118%;
        letter-spacing: 0; color: var(--accent-text); background: color-mix(in srgb, var(--o) 14%, transparent);
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--o) 45%, transparent); font-variant-numeric: tabular-nums; }
.st-total { display: flex; align-items: center; gap: 22px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border); }
.st-x.big { --cut: 12px; padding: 10px 20px; font-size: 44px; line-height: 1; color: #fff; background: linear-gradient(var(--vel-a), #FF9A3D 0%, #FF5926 50%, #D9300A 100%);
            box-shadow: none; animation: vel-turn 9s linear infinite; text-shadow: 0 1px 1px rgba(90, 20, 0, .25); }
.st-total p { margin: 0; font-size: 16px; color: var(--text-2); }
.st-total p b { color: var(--text); }
.par-uses.four { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 0; }
@media (max-width: 860px) {
    .stack { padding: 24px 18px 22px; }
    .st-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; }
    .st-lane { grid-column: 1 / -1; grid-row: 2; height: 18px; }
    .st-step { margin: 14px 0; }
    .st-total { flex-direction: column; align-items: flex-start; gap: 14px; }
    .st-x.big { font-size: 36px; }
    .par-uses.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) { .par-uses.four { grid-template-columns: minmax(0, 1fr); } }


/* ---- COST VS THE CLOUD (benchmarks): what cloud APIs would charge for the same calls, against 5090Ai ----------------- */

.cost { position: relative; max-width: 1040px; margin: 0 auto; padding: 32px 38px 30px; border: 1px solid var(--border);
        background: var(--wedge), var(--card); box-shadow: var(--shadow-lg); }
.cost::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--rule); }
.cost .model-tabs { margin: 0; }
.cost-ctl { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 34px; margin-bottom: 28px; padding-bottom: 28px; border-bottom: 1px solid var(--border); }
.cost-k { margin-bottom: 12px; font: 700 10.5px var(--title); font-stretch: 125%; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.cost-tasks { display: flex; flex-wrap: wrap; gap: 8px; }
.cost-tasks button { --cut: 7px; clip-path: var(--chamfer); border: 0; cursor: pointer; text-align: left; padding: 9px 14px; background: var(--surface-2); color: var(--text-2);
                     box-shadow: inset 0 0 0 1px var(--border-strong); transition: background-color .35s var(--ease), color .3s ease; }
.cost-tasks button b { display: block; font: 800 12px var(--title); font-stretch: 112%; letter-spacing: .05em; text-transform: uppercase; color: inherit; }
.cost-tasks button small { display: block; margin-top: 2px; font: 500 11px var(--mono); color: var(--muted); }
.cost-tasks button:hover { color: var(--text); }
.cost-tasks button.on { background: var(--text); color: var(--bg); box-shadow: none; }
.cost-tasks button.on small { color: inherit; opacity: .7; }
.cost-n b { display: block; font: 800 34px/1.1 var(--title); font-stretch: 118%; color: var(--text); font-variant-numeric: tabular-nums; }
.cost-n span { font: 500 12px var(--mono); color: var(--muted); }
.cost input[type="range"] { width: 100%; margin: 14px 0 4px; accent-color: #FF5926; cursor: pointer; }
.cost-ticks { position: relative; height: 16px; font: 500 10.5px var(--mono); color: var(--faint); }
.cost-ticks span { position: absolute; left: var(--x); transform: translateX(-50%); }
.cost-ticks span:first-child { transform: none; }
.cost-ticks span:last-child { left: auto; right: 0; transform: none; }
.cost-rows { display: grid; gap: 14px; }
.cost-row { display: grid; grid-template-columns: 250px minmax(0, 1fr) 130px; gap: 22px; align-items: center; }
.cost-row .st-lane i { background: color-mix(in srgb, var(--muted) 55%, var(--surface-3)); }
.cost-row:first-child .st-lane i { background: var(--muted); }
.cost-row.e .st-lane { align-items: center; box-shadow: inset 2px 0 0 #FF5926; }
.cost-row.e .st-lane em { padding-left: 12px; font: 800 12px var(--title); font-style: normal; font-stretch: 125%; letter-spacing: .24em; color: var(--accent-text); }
.cost-row.e .st-v b { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 32px; }
.cost .st-total p { max-width: 640px; }
.cost-fit { margin: 16px 0 0; font-size: 13.5px; color: var(--muted); }
.cost-fit b { color: var(--text); }
.cost-table th small { display: block; margin-top: 2px; font: 500 10.5px var(--mono); letter-spacing: 0; text-transform: none; color: var(--faint); }
@media (max-width: 860px) {
    .cost { padding: 24px 18px 22px; }
    .cost-ctl { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .cost-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; }
    .cost-row .st-lane { grid-column: 1 / -1; grid-row: 2; height: 18px; }
    .cost-row.e .st-v b { font-size: 26px; }
}


/* ---- BENCHMARKS: Chat | API ------------------------------------------------------------------------------------------
   One switch in the hero picks the half of the page; each half has its own figures and jump links. Without scripts both
   halves show, one after the other. */

.bench-switch { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; margin-top: 34px; padding: 4px; --cut: 12px; clip-path: var(--chamfer);
                background: var(--card); box-shadow: inset 0 0 0 1px var(--border-strong); max-width: 100%; }
.bench-switch button { position: relative; z-index: 1; border: 0; background: transparent; cursor: pointer; text-align: left; padding: 14px 30px 14px 22px;
                       color: var(--muted); transition: color .45s var(--ease); min-width: 0; }
.bench-switch button b { display: block; font: 800 22px/1.1 var(--title); font-stretch: 118%; letter-spacing: .02em; text-transform: uppercase; color: inherit; }
.bench-switch button small { display: block; margin-top: 4px; font: 600 10.5px var(--title); font-stretch: 112%; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.bench-switch button:hover { color: var(--text); }
.bench-switch button[aria-selected="true"] { color: var(--bg); }
.bench-switch .pill { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); --cut: 9px; clip-path: var(--chamfer);
                      background: var(--text); transition: transform .6s var(--ease); }
.bench-switch[data-on="api"] .pill { transform: translateX(100%); }
.bench-switch .pill::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--rule); }
.bench-hero [data-for][hidden], .bench-panel[hidden] { display: none; }
.bench-panel.shown { animation: bench-in .7s var(--ease) both; }
@keyframes bench-in { from { opacity: 0; transform: translateY(16px); } }
.bench-part { padding: 70px 0 0; }
.bench-part .part-k { display: flex; align-items: center; gap: 14px; font: 800 12px var(--title); font-stretch: 125%; letter-spacing: .22em; text-transform: uppercase;
                      color: var(--eyebrow-ink); }
.bench-part .part-k::after { content: ""; flex: 1; height: 1px; background: var(--rule); opacity: .6; }
.bench-tabbed .bench-part { display: none; }
.est { color: var(--faint); font-weight: 600; }
td .est, .hb-row .v .est { margin-left: 2px; }


/* ---- API SPEED (api-speed.html) ----------------------------------------------------------------------------------- */

.as-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--border); }
.as-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(60% 70% at 85% 30%, color-mix(in srgb, var(--o) 16%, transparent), transparent 70%); }
.as-hero .container { position: relative; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 56px; align-items: center; padding: 72px 0 84px; }
.as-hero h1 { margin: 12px 0 18px; color: var(--text); font-size: clamp(36px, 4.6vw, 64px); font-weight: 800; line-height: .98; letter-spacing: -.015em; }
.as-hero h1 .x { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.as-hero .lead { font-size: 18px; color: var(--text-2); margin: 0; max-width: 600px; }
.as-hero .lead b { color: var(--text); }
.as-hero .ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.as-hero .hero-stats { margin-top: 36px; grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* the race: four calls on standard llama.cpp against four on 5090Ai, in real time */
.race4 { --cut: 16px; clip-path: var(--chamfer); position: relative; padding: 24px 24px 22px; color: #C2CAD3; background: linear-gradient(160deg, #10141B, #05070A);
         border: 1px solid rgba(255, 255, 255, .08); box-shadow: var(--shadow-lg); }
.race4::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--rule); }
.r4-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.r4-top .k { font: 700 10.5px var(--title); font-stretch: 112%; letter-spacing: .14em; text-transform: uppercase; color: #8893A0; }
.race4 .model-tabs { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .1); }
.race4 .model-tabs button { color: #8893A0; padding: 8px 12px; font-size: 10.5px; }
.race4 .model-tabs button:hover { color: #fff; }
.race4 .model-tabs button.on { background: #F3F5F7; color: #05070A; }
.r4-group + .r4-group { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .07); }
.r4-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.r4-head b { font: 800 13px var(--title); font-stretch: 112%; letter-spacing: .06em; text-transform: uppercase; color: #F3F5F7; }
.r4-head b i { display: inline-block; width: 9px; height: 9px; margin-right: 8px; vertical-align: 0; background: var(--blue); }
.r4-group.e .r4-head b i { background: var(--grad); }
.r4-head .t { font: 700 13px var(--mono); color: #8893A0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.r4-group.e .r4-head .t { color: #FFB547; }
.r4-head .t.done { color: #F3F5F7; }
.r4-group.e .r4-head .t.done { color: #FF8A5B; }
.r4-lane > span:first-child { white-space: nowrap; }
.r4-lane { display: grid; grid-template-columns: 50px minmax(0, 1fr) 62px; gap: 10px; align-items: center; margin-top: 7px; font: 500 11.5px var(--mono); color: #59636F; }
.r4-lane .bar { height: 10px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.r4-lane .bar i { display: block; height: 100%; width: 0; background: var(--blue); }
.r4-group.e .r4-lane .bar i { background: linear-gradient(90deg, #FF9A3D, #FF5926 60%, #D9300A); box-shadow: 0 0 16px rgba(255, 89, 38, .6); }
.r4-lane .n { text-align: right; color: #C2CAD3; font-variant-numeric: tabular-nums; }
.r4-lane.done .n { color: #F3F5F7; }
.r4-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .07); }
.r4-foot .x { font: 800 34px/1 var(--title); font-stretch: 118%; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.r4-foot small { display: block; font: 700 10px var(--title); font-stretch: 112%; letter-spacing: .12em; text-transform: uppercase; color: #8893A0; margin-top: 4px; }
.r4-foot .again { --cut: 6px; clip-path: var(--chamfer); border: 0; cursor: pointer; padding: 10px 14px; background: rgba(255, 255, 255, .06); color: #F3F5F7;
                  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); font: 700 10.5px var(--title); font-stretch: 112%; letter-spacing: .1em; text-transform: uppercase;
                  display: inline-flex; align-items: center; gap: 8px; transition: background-color .4s var(--ease), color .35s ease, box-shadow .4s var(--ease); }
.r4-foot .again svg { width: 14px; height: 14px; transition: transform .6s var(--ease); }
.r4-foot .again:hover { background: #F3F5F7; color: #05070A; }
.r4-foot .again:hover svg { transform: rotate(-200deg); }
.r4-note { margin: 12px 0 0; font-size: 11.5px; color: #59636F; }

/* big figures in a row */
.as-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.as-fig { position: relative; padding: 30px 28px; border: 1px solid var(--border); background: var(--wedge), var(--card); }
.as-fig .k { font: 700 10.5px var(--title); font-stretch: 125%; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.as-fig .v { margin: 10px 0 8px; font: 800 54px/1 var(--title); font-stretch: 118%; letter-spacing: -.02em; background: var(--grad-text); -webkit-background-clip: text;
             background-clip: text; color: transparent; }
.as-fig .v small { font-size: .45em; letter-spacing: 0; }
.as-fig p { margin: 0; font-size: 14.5px; color: var(--text-2); }
.as-fig p b { color: var(--text); }
.as-fig p a { color: var(--accent-text); font-weight: 700; white-space: nowrap; }
.as-fig p a::after { content: " →"; }

/* a day of work: tokens per day, one bar per engine */
.as-day { display: grid; gap: 14px; }
.as-day .row { display: grid; grid-template-columns: 250px minmax(0, 1fr) 110px; gap: 18px; align-items: center; }
.as-day .row .who b { display: block; font: 800 13px var(--title); font-stretch: 112%; letter-spacing: .04em; text-transform: uppercase; color: var(--text); }
.as-day .row .who span { font-size: 13px; color: var(--muted); }
.as-day .lane { height: 16px; background: var(--surface-3); overflow: hidden; }
.as-day .lane i { display: block; height: 100%; width: 0; background: var(--blue); transition: width 1.4s var(--ease); }
.as-day .row.e .lane i { background: linear-gradient(90deg, #FF9A3D, #FF5926 50%, #D9300A); }
.as-day .row .v { text-align: right; font: 800 22px var(--title); font-stretch: 118%; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.as-day .row.e .v { color: var(--accent-text); }
.as-day h3 { margin: 0; }
.as-day .sub { margin: -8px 0 4px; }
.as-day + .as-day { margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--border); }

.as-uses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.as-uses .req .k { color: var(--text); font-size: 12px; }
.as-uses .req .ic { width: 44px; height: 40px; display: grid; place-items: center; margin-bottom: 16px; color: #fff; background: var(--grad); clip-path: var(--hex); }
.as-uses .req .ic svg { width: 20px; height: 20px; }
.as-code { max-width: 920px; margin: 0 auto; }
.as-code .codetabs { margin-top: 0; }
.as-split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 50px; align-items: center; }
.as-split h2 { font-size: clamp(30px, 3.6vw, 44px); margin: 0 0 16px; }
.as-split p { font-size: 16.5px; }
.as-split .ticks { margin-top: 18px; }

@media (max-width: 1080px) {
    .as-hero .container { grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 56px 0 64px; }
    .as-split { grid-template-columns: minmax(0, 1fr); gap: 30px; }
}
@media (max-width: 860px) {
    .as-figs, .as-uses { grid-template-columns: minmax(0, 1fr); }
    .as-day .row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
    .as-day .lane { grid-column: 1 / -1; grid-row: 2; }
    .as-hero .hero-stats { grid-template-columns: minmax(0, 1fr); }
    .as-hero .hero-stats div { border-left: 0; border-top: 1px solid var(--border); }
    .as-hero .hero-stats div:first-child { border-top: 0; }
}
@media (max-width: 560px) {
    .race4 { padding: 18px 14px 16px; }
    .r4-lane { grid-template-columns: 44px minmax(0, 1fr) 40px; gap: 8px; font-size: 10.5px; }
    .r4-foot { flex-wrap: wrap; }
    .as-fig .v { font-size: 44px; }
    .bench-switch button { padding: 12px 14px; }
    .bench-switch button b { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
    .btn, .btn svg, .mcard, .lcard, .ep-card, .gcard, .gpn a, .req, .step, .plan, .exact .pt, .faq details, .guide-card, .bench-switch .pill,
    .st-lane i, .as-day .lane i { transition: none !important; }
    .st-row.a .st-lane i.add::after, .st-x.big { animation: none; }
    .bench-panel.shown { animation: none; }
    .btn:hover, .mcard:hover, .lcard:hover, .ep-card:hover, .gcard:hover, .gpn a:hover, .req:hover, .step:hover, .plan:hover, .exact .pt:hover,
    .faq details:hover, .guide-card:hover { transform: none !important; }
}


/* ---- PAGE TRANSITIONS: pages change in place (the router in site.js); the top bar, header, menu and footer stay on screen
   while the content between them fades out, and the new content fades in as it arrives ------------------------------- */

body > :is(main, section, .strip) { animation: pt-in .55s var(--ease) backwards; }
@keyframes pt-in { from { opacity: 0; transform: translateY(14px); } }
html.pt-out body > :is(main, section, .strip) { opacity: 0; transition: opacity .24s ease; }
h1[tabindex="-1"]:focus { outline: none; }   /* the router moves focus to the new page's title */
.footer a[aria-current="page"] { color: var(--accent-text); font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
    body > :is(main, section, .strip) { animation: none; }
    html.pt-out body > :is(main, section, .strip) { transition: none; }
}