/* ulukalabs.com
   Matches the Uluka desktop app: near-black surfaces, white text, one blue accent, Inter for text and
   JetBrains Mono for data. The hero keeps the old site's cell-grid background; the memory ruler is the one
   memorable element. Everything sizes in rem. The root size grows a little with the screen so a large
   monitor is not reading 16px type, but only a little: headings are sized in vw on top of the root, so a
   steep root slope multiplies with them and the page ends up looking zoomed in. Keep both shallow. */
@font-face { font-family: "Inter"; src: url("img/fonts/inter.woff2?v=35e6937697") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("img/fonts/jetbrains-mono.woff2?v=35e6937697") format("woff2"); font-weight: 400 600; font-display: swap; }

:root {
  color-scheme: dark;
  --base: #161616;          /* page, as in the app */
  --deep: #080808;          /* deeper bands and the footer */
  --layer: #1f1f1f;         /* panels and cards */
  --layer-2: #2a2a2a;
  --text: #fafafa;
  --muted: #aeaeae;
  --faint: #8a8a8a;
  --line: #ffffff1a;
  --line-strong: #ffffff38;
  --grey: #5f5f5f;          /* the other models in a chart */
  --accent: #7698fd;        /* Uluka */
  --accent-text: #a2bcff;
  --accent-wash: #7698fd1f;
  --btn: #3b5cf6;           /* the app's blue, for the main action */
  --inverse: #fafafa;
  --r: 0.5rem;
  --sans: "Inter", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}
* { box-sizing: border-box; }
html { font-size: clamp(16px, 0.18vw + 13.5px, 20px); scroll-behavior: smooth; scroll-padding-top: 5rem; }
body { margin: 0; background: var(--base); color: var(--text); font: 400 1.0625rem/1.6 var(--sans); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(#ffffff12 1px, transparent 1.2px) 0 0 / 22px 22px;
  -webkit-mask: linear-gradient(#000, #0000 90%); mask: linear-gradient(#000, #0000 90%); }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.035em; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
main { overflow-x: clip; }
main:focus, h1[tabindex="-1"]:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: 92rem; margin: 0 auto; padding-inline: clamp(1.25rem, 3.2vw, 5rem); }
.skip { position: absolute; left: 0.75rem; top: -4rem; z-index: 10; background: var(--inverse); color: var(--base); padding: 0.6rem 0.9rem; border-radius: var(--r); text-decoration: none; }
.skip:focus { top: 0.75rem; }

/* ---- header ---- */
.top { position: sticky; top: 0; z-index: 5; background: #161616dd; backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top-in { display: flex; align-items: center; gap: 1rem; min-height: 4rem; position: relative; }
.brand { display: flex; align-items: center; gap: 0.55rem; text-decoration: none; }
/* The logo is the wordmark: the hand-lettered "uluka.labs" as outlines, so it is the same artwork at
   every size and in any colour, with no font to wait for and nothing beside it. */
/* the script runs tall: its box holds the l ascenders, so it needs more height than a
   set wordmark would to reach the same x-height beside the mark. */
.word { height: 2.45rem; width: auto; flex: none; color: var(--text); }
.menu { margin-left: auto; }
.menu summary { list-style: none; cursor: pointer; padding: 0.6rem 0.85rem; border: 1px solid var(--line-strong); border-radius: var(--r); font-weight: 500; }
.menu summary::-webkit-details-marker { display: none; }
.menu[open] .nav { position: absolute; right: 0; top: 3.75rem; width: min(17rem, calc(100vw - 2.5rem)); display: flex; flex-direction: column;
  background: var(--layer); border: 1px solid var(--line-strong); border-radius: 0.75rem; padding: 0.5rem; box-shadow: 0 1.5rem 3rem -1rem #000; }
.nav a { display: block; padding: 0.75rem; text-decoration: none; border-radius: 0.4rem; font-weight: 500; color: var(--muted); }
.nav a:hover { background: var(--layer-2); color: var(--text); }
.nav a[aria-current="page"] { color: var(--text); box-shadow: inset 3px 0 0 var(--accent); }
.aws { flex: none; background: var(--btn); color: #fff; padding: 0.7rem 1.1rem; border-radius: var(--r); font-weight: 600; text-decoration: none; }
.aws:hover { background: #4d6bf8; }
@media (min-width: 1100px) {
  .menu summary { display: none; }
  .menu .nav, .menu[open] .nav { display: flex; position: static; flex-direction: row; align-items: center; gap: 0.25rem; background: none; border: 0; padding: 0; width: auto; box-shadow: none; }
  .nav a { padding: 0.6rem 0.9rem; border-radius: 0; }
  .nav a:hover { background: none; }
  .nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--accent); }
}
@media (max-width: 420px) { .word { height: 1.75rem; } .aws { padding: 0.65rem 0.8rem; } .menu summary { padding: 0.6rem 0.7rem; } .top-in { gap: 0.6rem; } }

/* ---- buttons and links ---- */
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.btn { display: inline-block; padding: 0.9rem 1.5rem; border-radius: var(--r); border: 1px solid var(--line-strong); text-decoration: none; font-weight: 600; }
.btn:hover { background: var(--layer-2); }
.btn.primary { background: var(--inverse); border-color: var(--inverse); color: var(--base); }
.btn.primary:hover { background: #fff; }
.link { font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em; text-decoration-color: var(--accent); }
.link:hover { color: var(--accent-text); }

/* ---- the old site's background, kept: a grid of cells behind the hero (drawn by main.js) ---- */
canvas.bg { position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; height: 100%; z-index: 0; pointer-events: none;
  -webkit-mask: linear-gradient(90deg, #0003 0%, #0006 30%, #000 62%), linear-gradient(#0000, #000 14%, #000 86%, #0000);
  -webkit-mask-composite: source-in;
  mask: linear-gradient(90deg, #0003 0%, #0006 30%, #000 62%), linear-gradient(#0000, #000 14%, #000 86%, #0000);
  mask-composite: intersect; }
@media (max-width: 1059px) { canvas.bg { -webkit-mask: linear-gradient(#0000, #000 60%); mask: linear-gradient(#0000, #000 60%); } }

/* ---- hero ---- */
.hero { position: relative; padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(2.5rem, 4vw, 3.5rem); }
/* The hero sizes to its content. It used to be pinned to calc(100svh - 4rem), which stretched the copy
   and the panel apart on a tall screen and was most of why the page read as zoomed in. */
.hero:not(.small) { display: flex; align-items: center; }
.hero:not(.small) > .wrap { width: 100%; }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem, 5vw, 4.5rem); }
@media (min-width: 1060px) { .hero-grid { grid-template-columns: 1.05fr 1fr; gap: clamp(2.5rem, 4vw, 5.5rem); align-items: center; } }
.hero h1 { font-size: clamp(2.2rem, 5.6vw, 3.4rem); line-height: 1.04; letter-spacing: -0.04em; max-width: 14em; }
@media (min-width: 1060px) { .hero:not(.small) h1 { font-size: clamp(3rem, 3.3vw, 4rem); } }
.lede { margin-top: 1.25rem; max-width: 36em; font-size: clamp(1.1rem, 1vw, 1.3rem); color: var(--muted); line-height: 1.55; }
.hero.small { padding: clamp(2.5rem, 4.5vw, 4rem) 0 clamp(1.25rem, 2vw, 2.25rem); }
.hero.small h1 { font-size: clamp(2.1rem, 3.2vw, 3.5rem); max-width: 16em; }
.hero.small .lede { max-width: 38em; }

/* ---- the memory ruler: model sizes drawn to scale against GPU memory ---- */
.ruler { margin: 0; padding: clamp(1.25rem, 2.6vw, 2rem); background: var(--layer); border: 1px solid var(--line); border-radius: 0.75rem; }
.ruler-title { font-weight: 600; margin-bottom: 1.1rem; }
.rrow + .rrow { margin-top: 1.1rem; }
.rname { font-weight: 500; color: var(--muted); margin-bottom: 0.35rem; }
.rname strong { color: var(--accent-text); font-weight: 600; }
.rtrack, .rticks { position: relative;
  --lines: linear-gradient(var(--line-strong), var(--line-strong)) 20% 0 / 1px 100% no-repeat, linear-gradient(var(--line-strong), var(--line-strong)) 30% 0 / 1px 100% no-repeat,
           linear-gradient(var(--line-strong), var(--line-strong)) 60% 0 / 1px 100% no-repeat, linear-gradient(var(--line-strong), var(--line-strong)) 100% 0 / 1px 100% no-repeat; }
.rtrack { display: flex; align-items: center; height: clamp(2.75rem, 6vw, 3.75rem); background: var(--lines); border-bottom: 1px solid var(--line-strong); }
.rbar { display: block; flex: none; width: var(--w); height: clamp(2rem, 4.6vw, 2.9rem); border-radius: 2px; transform-origin: left center; background: var(--grey); }
.rbar.cobalt { background: var(--accent); }
.rbar.planned, .mbar .dashed { background: repeating-linear-gradient(135deg, var(--accent) 0 6px, #5b7de6 6px 12px); }
.rval { display: inline-flex; align-items: center; margin-left: 0.75rem; font-weight: 600; font-size: clamp(1.05rem, 1.4vw, 1.35rem); letter-spacing: -0.03em; white-space: nowrap; }
.rtag { font: 500 0.75rem var(--mono); font-style: normal; letter-spacing: 0; color: var(--accent-text); background: var(--accent-wash); padding: 0.2rem 0.5rem; border-radius: 3px; margin-left: 0.65rem; }
.rticks { height: 5.5rem; margin-top: 0; font: 400 0.75rem/1.3 var(--mono); color: var(--muted); }
.rticks::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 7px; background: repeating-linear-gradient(to right, #ffffff40 0 1px, transparent 1px 5%); }
.rticks span { position: absolute; top: 0; left: var(--x); padding-top: 0.9rem; transform: translateX(-50%); text-align: center; white-space: nowrap; }
.rticks span::before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 11px; background: var(--text); }
.rticks span:last-child { transform: translateX(-100%); text-align: right; }
.rticks span:last-child::before { left: 100%; }
.rticks span:nth-child(2) { padding-top: 2.25rem; }
.rticks span:nth-child(2)::before { height: 2rem; }
.ruler figcaption { margin-top: 0.5rem; max-width: 42em; font-size: 0.9375rem; color: var(--muted); }
.r320 .rtrack { --lines: linear-gradient(var(--text), var(--text)) 32% 0 / 1px 100% no-repeat; }
.r320 .rticks { height: 3.5rem; }
.r320 .rticks::before { background: none; }
.r320 .rticks span:last-child { transform: translateX(-50%); text-align: center; }
.r320 .rticks span:last-child::before { left: 50%; }
.r320 .rticks span:nth-child(2) { padding-top: 0.9rem; }
@media (prefers-reduced-motion: no-preference) {
  .rbar { animation: grow 1.1s cubic-bezier(.2,.75,.2,1) both; animation-delay: calc(var(--i, 0) * 140ms + 150ms); }
  .rrow .rval { animation: show .5s ease both; animation-delay: calc(var(--i, 0) * 140ms + 900ms); }
  @keyframes grow { from { transform: scaleX(0); } }
  @keyframes show { from { opacity: 0; } }
}

/* ---- the hero deck: a slideshow of four views of the same test ----
   The slides sit side by side on a rail that slides along; the viewport clips it. A flex row is as
   tall as its tallest item, so the deck never changes height between slides. The arrows and dots are
   overlaid inside the card, in the strip the slides reserve with their extra bottom padding. */
.deck { position: relative; min-width: 0; }
.deck-panes { overflow: hidden; min-width: 0; border-radius: 0.75rem; }
.deck-rail { display: flex; min-width: 0; }
.pane { flex: 0 0 100%; min-width: 0; margin: 0; }
.pane[inert] { pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .deck-rail { transition: transform .55s cubic-bezier(.3,.8,.3,1); }
  .pane { transition: opacity .4s ease; }
  .pane:not(.on) { opacity: 0.35; }   /* the slides either side dim as they pass */
}

/* room at the foot of every slide for the controls that sit on top of it */
.pane.ruler { padding-bottom: calc(clamp(1.25rem, 2.6vw, 2rem) + 2.5rem); }
.deck-dots { position: absolute; left: clamp(1.25rem, 2.6vw, 2rem); bottom: clamp(1.5rem, 2.6vw, 2.1rem);
  display: flex; gap: 0.4rem; margin: 0; z-index: 2; }
.deck-dots i { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--line-strong); transition: background .3s ease, width .3s ease; }
.deck-dots i.on { width: 1.1rem; border-radius: 999px; background: var(--accent); }
.deck-nav { position: absolute; right: clamp(1rem, 2.2vw, 1.6rem); bottom: clamp(1rem, 2.2vw, 1.6rem);
  display: flex; gap: 0.4rem; z-index: 2; }
.deck-arrow { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; cursor: pointer;
  color: var(--muted); background: #2a2a2abb; border: 1px solid var(--line-strong); border-radius: 50%;
  backdrop-filter: blur(4px); }
.deck-arrow svg { width: 0.9rem; height: 0.9rem; }
.deck-arrow:hover { color: var(--text); background: var(--layer-2); border-color: var(--text); }

/* evenly spaced scales (scores) and the two-bar money scale do not want the GPU ruler's tick stagger */
.pane.flat .rtrack { --lines: linear-gradient(var(--line-strong), var(--line-strong)) 25% 0 / 1px 100% no-repeat, linear-gradient(var(--line-strong), var(--line-strong)) 50% 0 / 1px 100% no-repeat,
  linear-gradient(var(--line-strong), var(--line-strong)) 75% 0 / 1px 100% no-repeat, linear-gradient(var(--line-strong), var(--line-strong)) 100% 0 / 1px 100% no-repeat; }
.pane.flat .rticks { height: 2.25rem; }
.pane.flat .rticks::before { background: none; }
.pane.flat .rticks span:nth-child(2) { padding-top: 0.9rem; }
.pane.flat .rticks span:nth-child(2)::before { height: 11px; }
.pane.money .rtrack { --lines: linear-gradient(var(--line-strong), var(--line-strong)) 100% 0 / 1px 100% no-repeat; }
.rsize { font: 400 0.75rem var(--mono); color: var(--faint); letter-spacing: 0; }
.deck-year { margin-top: 1.4rem; color: var(--muted); font-size: 0.9375rem; max-width: 34em; }
.deck-year strong { color: var(--text); }

/* Bars replay every time a pane comes round, so the deck stays alive. The site-wide .rbar keyframes
   fire once at load and hold at scaleX(0) until their delay, which is no use on a pane that is
   shown again later; inside the deck it is a transition latched on .lit, which main.js drops and re-adds. */
.deck .rbar { animation: none; transform-origin: left center; transition: transform .9s cubic-bezier(.2,.75,.2,1) calc(var(--i, 0) * 110ms); }
.deck .rrow .rval { animation: none; transition: opacity .45s ease calc(var(--i, 0) * 110ms + .3s); }
.js .deck .pane:not(.lit) .rbar { transform: scaleX(0); }
.js .deck .pane:not(.lit) .rval { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .pane.on { transition: opacity .4s ease; }
  .pane:not(.on) { transition: opacity .4s ease, visibility 0s linear .4s; }
}
@media (prefers-reduced-motion: reduce) {
  .deck .rbar, .deck .rrow .rval { transition: none; }
}

/* ---- the terminal pane ---- */
.pane.term { display: flex; flex-direction: column; padding: 0; background: var(--layer); border: 1px solid var(--line); border-radius: 0.75rem; overflow: hidden; }
.term-bar { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--line);
  font: 400 0.75rem var(--mono); color: var(--muted); }
.term-bar .dots { display: flex; gap: 0.3rem; }
.term-bar .dots i { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--line-strong); }
.term-model { margin-left: auto; color: var(--faint); }
.term-body { flex: 1; min-height: 0; overflow: auto; padding: 0.9rem 1rem; font: 400 0.8125rem/1.65 var(--mono); scrollbar-width: thin; }
.term-body .echo { color: var(--accent-text); white-space: pre-wrap; }
.term-body .status { color: var(--faint); margin-top: 0.5rem; }
.term-body .reply { margin-top: 0.5rem; color: var(--text); white-space: pre-wrap; }
.term-body .reply .label { display: block; color: var(--faint); }
.term-body .caret { display: inline-block; width: 0.5rem; height: 1em; margin-left: 1px; background: var(--accent); vertical-align: text-bottom; }
.term-foot { display: flex; flex-wrap: wrap; gap: 0.25rem 1.1rem; padding: 0.55rem 0.9rem; border-top: 1px solid var(--line);
  font: 400 0.75rem var(--mono); color: var(--muted); }
.term-foot b { color: var(--text); font-weight: 600; }
.pane.term figcaption { padding: 0 0.9rem 3.3rem; font-size: 0.8125rem; color: var(--faint); }
@media (prefers-reduced-motion: no-preference) { .term-body .caret { animation: blink 1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } }

/* ---- sections ---- */
.sec { padding-block: clamp(3rem, 5vw, 5.5rem); border-top: 1px solid var(--line); }
.sec.tight { border-top: 0; padding-top: clamp(1.5rem, 2.5vw, 2.5rem); }
.sec.dark, .sec.deep { background: var(--deep); }
.sec h2 { font-size: clamp(2.2rem, 2.4vw, 2.9rem); line-height: 1.08; letter-spacing: -0.035em; max-width: 20em; }
.sec h2.h2s { font-size: clamp(1.6rem, 2vw, 2.3rem); max-width: 18em; }
.sec h3 { font-size: clamp(1.25rem, 1.5vw, 1.5rem); line-height: 1.25; margin-bottom: 0.5rem; letter-spacing: -0.025em; }
.sub { margin-top: 1rem; max-width: 38em; color: var(--muted); font-size: clamp(1.0625rem, 0.95vw, 1.2rem); }
.point { margin-top: 2.25rem; max-width: 38em; font-size: 1.125rem; font-weight: 500; }
.point + .point { margin-top: 1rem; }
.note { margin-top: 0.9rem; font-size: 0.9375rem; color: var(--muted); max-width: 46em; }
.panel { background: var(--layer); border: 1px solid var(--line); border-radius: 0.75rem; padding: clamp(1.25rem, 3vw, 2rem); }
.panel-title { font-weight: 600; margin-bottom: 1.1rem; }

.split { display: grid; gap: 2rem; }
.split-h h2 { max-width: 12em; }
.split-h .sub + .sub { margin-top: 1rem; }
@media (min-width: 900px) { .split { grid-template-columns: 5fr 7fr; gap: 5rem; align-items: start; } }
.split-b .item { padding: 1.25rem 0 1.75rem; border-top: 2px solid var(--text); }
.split-b .item p { font-size: 1.125rem; max-width: 32em; color: var(--muted); }
.split-b .roadmap { margin: 0; }

/* home: three doors into the other pages */
.teasers { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.teasers a { display: block; text-decoration: none; border-top: 2px solid var(--text); padding: 1.25rem 0 1.75rem; height: 100%; }
.teasers .fig { display: block; font: 600 clamp(2.8rem, 6vw, 4.6rem)/1 var(--sans); letter-spacing: -0.05em; }
.teasers .cap { display: block; margin-top: 0.9rem; color: var(--muted); font-size: 1.125rem; max-width: 22em; }
.teasers .go { display: inline-block; margin-top: 1.1rem; font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em; text-decoration-color: var(--accent); }
.teasers a:hover .fig { color: var(--accent-text); }
@media (min-width: 800px) { .teasers { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }

/* the price staircase */
.ladder { margin-top: 3rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.6rem, 2.5vw, 1.75rem); align-items: start; }
.rung { display: flex; flex-direction: column; }
.rcol { height: clamp(10.5rem, 20vw, 16rem); margin-bottom: 0.75rem; border-bottom: 1px solid var(--text); display: flex; align-items: flex-end; }
.rfill { display: block; width: 100%; height: max(var(--h), 1.25rem); background: var(--grey); transform-origin: bottom; transition: transform 1s cubic-bezier(.2,.75,.2,1) calc(var(--i, 0) * 130ms); }
.rung:first-child .rfill { background: var(--accent); }
.rung:nth-child(2) { --i: 1; } .rung:nth-child(3) { --i: 2; } .rung:nth-child(4) { --i: 3; }
.js .ladder:not(.in) .rfill { transform: scaleY(0); }
.rprice { margin-bottom: 0.6rem; font: 600 clamp(1.1rem, 1.8vw, 1.7rem) var(--sans); letter-spacing: -0.04em; }
.rprice span { display: block; font: 400 0.75rem var(--mono); color: var(--muted); letter-spacing: 0; }
.rgpu { font-size: 0.9375rem; line-height: 1.3; }
.rfits { margin-top: 0.4rem; font-size: 0.875rem; color: var(--muted); line-height: 1.35; }
.cobalt-text { color: var(--accent-text); font-weight: 600; }
@media (max-width: 560px) { .ladder { gap: 0.5rem; } .rprice span { display: none; } .rgpu { font-size: 0.8125rem; } .rfits { font-size: 0.75rem; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .rfill { transition: none; } .js .ladder:not(.in) .rfill { transform: none; } }

/* results */
.proof { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .proof { grid-template-columns: 5fr 7fr; gap: 2.5rem; align-items: start; } }
.stats { margin: 0; display: grid; }
.stats div { padding: 1.1rem 0; border-top: 1px solid var(--line); display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 0.4rem; }
.stats div:last-child { border-bottom: 1px solid var(--line); }
.stats dt { color: var(--muted); }
.stats dd { margin: 0; font: 600 clamp(2.2rem, 3vw, 3.2rem)/1 var(--sans); letter-spacing: -0.045em; }
.scores { padding-top: 1.1rem; border-top: 1px solid var(--line); }
.srow { display: grid; grid-template-columns: 8rem 1fr 3rem; align-items: center; gap: 0.75rem; margin-bottom: 0.85rem; }
.sname { font-size: 0.9375rem; color: var(--muted); }
.sname strong { color: var(--accent-text); }
.strack { height: 1.9rem; background: var(--layer-2); border-radius: 2px; }
.sbar { display: block; height: 100%; width: var(--w); border-radius: 2px; background: var(--grey); }
.sbar.cobalt { background: var(--accent); }
.sval { font: 600 1.05rem var(--sans); text-align: right; }
@media (max-width: 480px) { .srow { grid-template-columns: 6rem 1fr 2.6rem; gap: 0.5rem; } }

/* tables */
.fit, .results { margin-top: 2rem; padding: 0.5rem clamp(0.75rem, 3vw, 1.5rem); overflow-x: auto; position: relative; }
.fit table, .results table { width: 100%; border-collapse: collapse; }
.fit th, .fit td, .results th, .results td { padding: 0.9rem 0.6rem; text-align: center; border-bottom: 1px solid var(--line); font-weight: 500; }
.fit tbody tr:last-child > *, .results tbody tr:last-child > * { border-bottom: 0; }
.fit thead th, .results thead th { font-weight: 600; line-height: 1.25; hyphens: none; vertical-align: bottom; }
.fit thead th span, .results thead th span, .fit tbody th span, .results tbody th span { font: 400 0.75rem var(--mono); color: var(--muted); }
.fit th:first-child, .results th:first-child { text-align: left; }
.fit tbody th, .results tbody th { font-weight: 600; }
.fit tbody th span, .results tbody th span { display: block; margin-top: 0.15rem; }
.fit i { font-style: normal; font-weight: 700; font-size: 1.25rem; }
.fit .yes { color: var(--text); } .fit .no { color: var(--grey); }
.fit .u, .results .u { background: var(--accent-wash); }
.fit .yes.u, .fit thead .u, .results thead .u, .results td.u { color: var(--accent-text); }
.results td { font: 600 1.125rem var(--sans); }
.results .avg > * { border-top: 2px solid var(--text); font-size: 1.15rem; }
@media (max-width: 560px) {
  .fit, .results { padding-inline: 0.5rem; }
  .fit th, .fit td, .results th, .results td { padding: 0.75rem 0.2rem; }
  .fit thead th, .results thead th { font-size: 0.8125rem; }
  .fit thead th span, .results thead th span, .fit tbody th span, .results tbody th span { font-size: 0.7rem; }
  .fit tbody th, .results tbody th { font-size: 0.9rem; padding-right: 0.4rem; }
  .results td { font-size: 1rem; }
  .fit th:first-child, .results th:first-child { width: 36%; }
}

/* calculator */
.calc { margin-top: 2.5rem; display: grid; gap: 1.75rem; }
.calc > * { min-width: 0; }
@media (min-width: 900px) { .calc { grid-template-columns: 5fr 7fr; gap: 3.5rem; align-items: start; } }
.calc label { display: block; font-weight: 600; }
.calc input[type=range] { width: 100%; margin-top: 0.9rem; accent-color: var(--accent); height: 1.75rem; }
.calc-out { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.calc-out.solo { grid-template-columns: 1fr; }
.calc-out div { background: var(--layer); border: 1px solid var(--line); border-radius: 0.6rem; padding: 1rem 1.15rem; }
.calc-out dt { font-size: 0.9375rem; color: var(--muted); line-height: 1.3; }
.calc-out dd { margin: 0.5rem 0 0; font: 600 clamp(1.4rem, 2vw, 1.85rem)/1.1 var(--sans); letter-spacing: -0.04em; }
.calc-out .u dd { color: var(--accent-text); }
.calc-out .save { grid-column: 1 / -1; padding: 1.4rem 1.5rem; background: var(--btn); border-color: var(--btn); }
.calc-out .save dt { color: #fff; }
.calc-out .save dd { color: #fff; font-size: clamp(2.6rem, 6vw, 4rem); }
.calc-out small { font: 500 0.9375rem var(--sans); letter-spacing: 0; margin-left: 0.3rem; opacity: 0.9; }
.calc-out .year { grid-column: 1 / -1; background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 1rem 0 0; display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; }
.calc-out .year dd { margin: 0; font-size: 1.5rem; }
@media (max-width: 420px) { .calc-out { grid-template-columns: 1fr; } }

/* roadmap */
.roadmap { list-style: none; margin: 2rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.roadmap li { display: grid; gap: 0.35rem; padding: 1.2rem 0; border-bottom: 1px solid var(--line); }
@media (min-width: 720px) { .roadmap li { grid-template-columns: 9.5rem 1fr; gap: 1.5rem; align-items: baseline; } }
.roadmap li > span:last-child { color: var(--muted); }
.st { font: 600 1.05rem var(--sans); display: inline-flex; align-items: center; gap: 0.65rem; }
.st::before { content: ""; width: 0.75rem; height: 0.75rem; border-radius: 50%; border: 2px solid var(--accent); flex: none; }
.st.done::before { background: var(--accent); }
.st.doing::before { background: linear-gradient(90deg, var(--accent) 50%, transparent 50%); }
.st.next { color: var(--muted); } .st.next::before { border-color: var(--grey); }

/* models */
.models { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.model h2 { font-size: 2rem; max-width: none; }
.badge { display: inline-block; margin-bottom: 0.9rem; font: 500 0.75rem var(--mono); padding: 0.25rem 0.6rem; border-radius: 3px; }
.badge.done { background: var(--accent-wash); color: var(--accent-text); }
.badge.next { background: var(--layer-2); color: var(--muted); }
.from { margin-top: 0.4rem; color: var(--muted); }
.shrink { margin-top: 0.9rem; font-size: 1.125rem; }
.shrink span { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--grey); }
.shrink strong { color: var(--accent-text); font: 600 1.5rem var(--sans); letter-spacing: -0.03em; }
.mbar { margin: 1.2rem 0 0.6rem; position: relative; height: 1.4rem; }
.mbar span { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: 2px; background: var(--grey); }
.mbar .cobalt { background: var(--accent); }
.mbar .cobalt.dashed { background: repeating-linear-gradient(135deg, var(--accent) 0 6px, #5b7de6 6px 12px); }
.model ul { margin: 1.4rem 0 0; padding-left: 1.1em; display: grid; gap: 0.65rem; color: var(--muted); }
.model li::marker { color: var(--accent); }
.more { margin-top: 1.4rem; }
.model.planned { border-style: dashed; border-color: var(--line-strong); background: transparent; }

/* the app: a slim row on the home page, a full page of its own */
.app-strip { padding-block: clamp(2rem, 4vw, 3.5rem); background: var(--base); }
.app-row { display: grid; gap: 1.25rem; align-items: center; }
@media (min-width: 900px) { .app-row { grid-template-columns: 11rem 1fr auto; gap: 2.25rem; } }
.thumb { display: block; border: 1px solid var(--line); border-radius: 0.5rem; overflow: hidden; background: var(--deep); max-width: 14rem; }
.thumb img { display: block; width: 100%; height: auto; }
.app-text h2 { font-size: clamp(1.25rem, 1.4vw, 1.6rem); letter-spacing: -0.03em; }
.app-text p { margin-top: 0.5rem; max-width: 36em; color: var(--muted); }
.app-link { margin: 0; }

.apppage { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 900px) { .apppage { grid-template-columns: 7fr 5fr; gap: 4rem; } }
.shot { margin: 0; border: 1px solid var(--line); border-radius: 0.75rem; overflow: hidden; background: var(--deep); box-shadow: 0 2rem 5rem -2.5rem #000; }
.shot img { display: block; width: 100%; height: auto; }
.privgrid .item { padding: 1.25rem 0 1.5rem; border-top: 2px solid var(--text); }
.privgrid .item h2 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.2; margin-bottom: 0.5rem; letter-spacing: -0.03em; max-width: none; }
.appside .item p { color: var(--muted); font-size: 1.0625rem; max-width: 30em; }
.downloads { margin-top: 1.25rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.dl { border: 1px dashed var(--line-strong); border-radius: var(--r); padding: 1rem 1.15rem; display: grid; gap: 0.25rem; }
.dl b { font-size: 1.125rem; letter-spacing: -0.02em; }
.dl span { color: var(--muted); font-size: 0.9375rem; }

/* footer */
.foot { background: var(--deep); border-top: 1px solid var(--line); padding: 2.5rem 0 3.5rem; }
.foot-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2.5rem; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.foot-nav a { color: var(--muted); text-decoration: none; font-weight: 500; }
.foot-nav a:hover { color: var(--text); }
.foot-note { margin-top: 1.75rem; max-width: 46em; font-size: 0.875rem; color: var(--faint); }

/* the portal button in the hero, same blue as the header's */
.btn.portal { background: var(--btn); border-color: var(--btn); color: #fff; }
.btn.portal:hover { background: #4d6bf8; border-color: #4d6bf8; }

/* results tables: the Uluka row is highlighted, the average column is stronger */
.results tr.urow > * { background: var(--accent-wash); }
.results tr.urow th, .results tr.urow td { color: var(--accent-text); }
.results td.avgc { font-weight: 700; border-left: 1px solid var(--line); }
.results table { min-width: 0; }

/* Why Uluka: the staircase sits in a card beside the argument */
.ladder-card { padding: clamp(1.25rem, 2.6vw, 2rem); }
.ladder-card .ladder { margin-top: 1.25rem; gap: clamp(0.5rem, 1.6vw, 1.25rem); }
.ladder-card .rcol { height: clamp(8.5rem, 13vw, 12rem); }
.ladder-card .rprice { font-size: clamp(1.15rem, 2vw, 1.7rem); }
.split-h .point { margin-top: 1.75rem; font-size: 1.0625rem; color: var(--muted); font-weight: 400; }
.split-h .point + .point { margin-top: 1rem; font-weight: 600; color: var(--text); }
@media (max-width: 560px) { .ladder-card { padding: 1rem; } .ladder-card .rcol { height: 9rem; } }

/* the arrow on AWS portal links: it nudges up and right on hover */
.ext { width: 0.9em; height: 0.9em; margin-left: 0.4em; vertical-align: -0.08em; flex: none; }
.aws, .btn.portal { display: inline-flex; align-items: center; }
@media (prefers-reduced-motion: no-preference) {
  .ext { transition: transform 0.18s ease; }
  a:hover > .ext { transform: translate(2px, -2px); }
}

/* privacy: the boundary your data does not cross */
.boundary { margin: 0; display: grid; gap: 0; }
.inside { border: 2px dashed var(--accent); border-radius: 1rem; padding: clamp(1.25rem, 3vw, 2.25rem); background: #7698fd0d; }
.inside-label { font: 500 0.8125rem var(--mono); color: var(--accent-text); margin-bottom: 1.25rem; }
.flow { display: grid; gap: 0.75rem; align-items: stretch; }
.node { background: var(--layer); border: 1px solid var(--line-strong); border-radius: 0.6rem; padding: 1.1rem 1.25rem; }
.node strong { display: block; font-size: 1.15rem; letter-spacing: -0.02em; }
.node span { display: block; margin-top: 0.3rem; color: var(--muted); font-size: 0.9375rem; line-height: 1.4; }
.node.hot { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.arrow { position: relative; display: block; height: 1.75rem; }
.arrow::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0.4rem; width: 2px; background: var(--line-strong); transform: translateX(-50%); }
.arrow::after { content: ""; position: absolute; left: 50%; bottom: 0.4rem; width: 0.55rem; height: 0.55rem; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translate(-50%, 0) rotate(45deg); }
.outside { display: grid; justify-items: center; }
.cut { position: relative; display: grid; place-items: center; height: 3.25rem; }
.cut::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 2px dashed var(--grey); }
.cut i { position: relative; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--base); border: 1px solid var(--grey);
  font-style: normal; font-weight: 700; color: var(--muted); line-height: 1; }
.node.ghost { border-style: dashed; border-color: var(--grey); background: transparent; text-align: center; min-width: min(100%, 15rem); }
.boundary figcaption { margin-top: 1.5rem; color: var(--muted); max-width: 44em; }
.teasers.three .item-card { border-top: 2px solid var(--text); padding: 1.25rem 0 1.5rem; height: 100%; }
.teasers.three .item-card h3 { margin-bottom: 0.6rem; }
.teasers.three .item-card p { color: var(--muted); font-size: 1.125rem; max-width: 22em; }

/* the large-model formats chart (Why Uluka) has many rows, so it runs a little tighter */
.r320 .rtrack { --lines: linear-gradient(var(--text), var(--text)) 11.6% 0 / 1px 100% no-repeat; height: 2.5rem; }
.r320 .rbar { height: 1.65rem; }
.r320 .rrow + .rrow { margin-top: 0.55rem; }
.r320 .rname { font-size: 0.9375rem; margin-bottom: 0.15rem; }
.r320 .rval { font-size: 1rem; margin-left: 0.6rem; }
.r320 .rticks { height: 3.25rem; }

/* privacy: the points beside the diagram */
.privgrid { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .privgrid { grid-template-columns: 5fr 6fr; gap: 5rem; align-items: start; } }
.privgrid .item { padding: 1.25rem 0 1.75rem; border-top: 2px solid var(--text); }
.privgrid .item p { font-size: 1.125rem; max-width: 28em; color: var(--muted); }
.privgrid .boundary figcaption { margin-top: 1.25rem; }
.flow { max-width: 30rem; margin-inline: auto; }
.node.ghost { margin-inline: auto; }

/* small phones (360 px): a tighter header so the AWS portal button always fits */
.brand { min-height: 2.75rem; }
@media (max-width: 420px) {
  .wrap { padding-inline: 1rem; }
  .word { height: 1.65rem; }
  .top-in { gap: 0.5rem; }
  .aws { padding: 0.6rem 0.75rem; font-size: 0.9375rem; }
  .menu summary { padding: 0.55rem 0.65rem; font-size: 0.9375rem; }
}
@media (max-width: 380px) { .aws .ext { display: none; } }

/* very small phones (320 px) */
.models { grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); }
@media (max-width: 340px) {
  .word { height: 1.45rem; }
  .brand { gap: 0.45rem; }
  .aws { padding: 0.55rem 0.6rem; font-size: 0.875rem; }
  .menu summary { padding: 0.5rem 0.55rem; font-size: 0.875rem; }
  .top-in { gap: 0.4rem; }
}

.r320 .rval { margin-left: 1.15rem; }

.fit:focus-visible, .results:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }


/* large-model formats chart, compact: label beside the bar, one line per row */
.r320 { --lw: 11rem; }
.r320 .rrow { display: grid; grid-template-columns: var(--lw) 1fr; align-items: center; column-gap: 1rem; }
.r320 .rrow + .rrow { margin-top: 0; }
.r320 .rname { margin: 0; font-size: 1rem; font-weight: 600; color: var(--text); line-height: 1.2; padding-block: 0.15rem; }
.r320 .rname strong { color: var(--accent-text); }
.r320 .rname span { display: block; font: 400 0.75rem var(--mono); color: var(--muted); margin-top: 0.1rem; }
.r320 .rtrack { height: 2.9rem; border-bottom: 1px solid var(--line); }
.r320 .rrow:last-of-type .rtrack { border-bottom: 1px solid var(--line-strong); }
.r320 .rbar { height: 1.5rem; }
.r320 .rval { font-size: 0.9375rem; margin-left: 0.7rem; }
.r320 .rticks { height: 2.75rem; margin-left: calc(var(--lw) + 1rem); }
@media (max-width: 560px) { .r320 { --lw: 6.6rem; } .r320 .rrow { column-gap: 0.6rem; } .r320 .rname { font-size: 0.875rem; } .r320 .rname span { font-size: 0.65rem; } .r320 .rticks { margin-left: calc(var(--lw) + 0.6rem); } }

/* the download page */
.dlcards { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.dlcard { border: 1px solid var(--line-strong); border-radius: 0.6rem; background: var(--layer); padding: 1.25rem; display: grid; gap: 0.35rem; align-content: start; }
.dl-os { font-size: 1.35rem; font-weight: 600; letter-spacing: -0.03em; }
.dl-state { color: var(--muted); font: 500 0.8125rem var(--mono); }
.dl-note { margin-top: 0.75rem; color: var(--muted); font-size: 0.8125rem; line-height: 1.45; }
.dlcard .btn { margin-top: 0.9rem; width: 100%; text-align: center; font-size: 0.9375rem; padding: 0.8rem 0.5rem; }
.btn.dis, .btn:disabled { background: transparent; color: var(--faint); border-style: dashed; cursor: not-allowed; }
.btn.dis:hover { background: transparent; }
.reqs { margin-top: 2rem; }
.reqs h2 { font-size: 1.15rem; letter-spacing: -0.02em; max-width: none; }
.reqs ul { margin: 0.9rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.reqs li { padding: 0.8rem 0; border-bottom: 1px solid var(--line); color: var(--muted); }
@media (max-width: 420px) { .dlcards { grid-template-columns: 1fr; } }
/* a full row of nav items needs more room, so the menu collapses a little earlier */

/* headings inside the three-point rows are subheadings, not section titles */
.teasers.three .item-card h2 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.2; letter-spacing: -0.03em; margin-bottom: 0.6rem; max-width: none; }


/* ===== critique round: tighter, more consistent ===== */
.sec { padding-block: clamp(3rem, 6vw, 6rem); }

/* home: what we do */
.twocol { margin-top: 2rem; display: grid; gap: 2rem; }
@media (min-width: 800px) { .twocol { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.twocol .item { border-top: 2px solid var(--text); padding-top: 1.25rem; }
.twocol .item p { color: var(--muted); font-size: 1.125rem; max-width: 34em; }

/* hero ruler: no staggered label on wide screens */
@media (min-width: 700px) { .ruler:not(.hchart) .rticks span:nth-child(2) { padding-top: 0.9rem; } .ruler:not(.hchart) .rticks span:nth-child(2)::before { height: 11px; } .ruler:not(.hchart) .rticks { height: 3.5rem; } }

/* horizontal charts (large-model formats, GPU prices): label beside the bar, one line per row */
.hchart { --lw: 11rem; }
.hchart .rrow { display: grid; grid-template-columns: var(--lw) 1fr; align-items: center; column-gap: 1rem; }
.hchart .rrow + .rrow { margin-top: 0; }
.hchart .rname { margin: 0; font-size: 1rem; font-weight: 600; color: var(--text); line-height: 1.2; padding-block: 0.15rem; }
.hchart .rname strong { color: var(--accent-text); }
.hchart .rname span { display: block; font: 400 0.75rem var(--mono); color: var(--muted); margin-top: 0.1rem; }
.hchart .rtrack { height: 3rem; border-bottom: 1px solid var(--line); }
.hchart .rrow:last-of-type .rtrack { border-bottom: 1px solid var(--line-strong); }
.hchart .rbar { height: 1.5rem; }
.hchart .rval { font-size: 0.9375rem; margin-left: 0.7rem; }
.pricechart .rtrack { --lines: none; }
.pricechart { --lw: 13rem; }
.hchart.reveal .rbar { animation: none; transition: transform 1s cubic-bezier(.2,.75,.2,1) calc(var(--i, 0) * 110ms); transform-origin: left center; }
.js .hchart.reveal:not(.in) .rbar { transform: scaleX(0); }
@media (prefers-reduced-motion: reduce) { .hchart.reveal .rbar { transition: none; } .js .hchart.reveal:not(.in) .rbar { transform: none; } }
@media (max-width: 560px) { .hchart, .pricechart { --lw: 7rem; } .hchart .rrow { column-gap: 0.6rem; } .hchart .rname { font-size: 0.875rem; } .hchart .rname span { font-size: 0.7rem; } .r320 .rticks { margin-left: calc(var(--lw) + 0.6rem); } }

/* results: three stats in a row */
.stats.row { grid-template-columns: repeat(3, 1fr); gap: clamp(0.75rem, 3vw, 3rem); }
.stats.row div { border-top: 2px solid var(--text); border-bottom: 0; padding: 1.1rem 0 0; }
.stats.row dd { font-size: clamp(2rem, 6.5vw, 4.6rem); }
.stats.row dt { font-size: clamp(0.8125rem, 1.4vw, 1rem); }

/* savings: one blue slab per page; the pill for the percentage */
.calc-out small { background: #ffffff26; padding: 0.15rem 0.55rem; border-radius: 999px; margin-left: 0.5rem; font-weight: 600; vertical-align: middle; }
.calc input[type=range] { height: 2.5rem; }
.calc + .note { margin-top: 1.25rem; }

/* models: cards pin their link to the bottom */
.model { display: flex; flex-direction: column; }
.model .more { margin-top: auto; padding-top: 1.5rem; }

/* privacy: a tighter diagram */
.arrow { height: 1.4rem; }
.flow { gap: 0.5rem; }

/* the download cards */
.dlcard .btn.dis { margin-top: 0.75rem; color: var(--muted); }

/* phones */
.menu summary, .aws { min-height: 2.75rem; }
.aws { display: inline-flex; align-items: center; }
@media (max-width: 560px) {
  .teasers .fig { font-size: clamp(2.2rem, 11vw, 3rem); }
  .results table { min-width: 30rem; }
  .results th:first-child { position: sticky; left: 0; z-index: 1; width: auto; min-width: 6.5rem; background: var(--layer); box-shadow: 1px 0 0 var(--line); }
  .results tr.urow th:first-child { background: #232a3f; }
}

@media (min-width: 700px) { .pricechart { --lw: 16rem; } }

/* phones: leave room after the longest bar for its value */
@media (max-width: 560px) { .hchart .rbar { width: calc(var(--w) * 0.7); } }
/* the percentage pill on the blue tile: solid, high contrast */
.calc-out .save small { background: #fff; color: #2b49d9; opacity: 1; font-weight: 700; }


/* ===== second pass ===== */
/* calculator: slider on top, three results in a row */
.calc { grid-template-columns: 1fr; }
.calc-copy { max-width: 36rem; }
.calc-out { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.calc-out .save { grid-column: auto; padding: 1.1rem 1.25rem; }
.calc-out .save dd { font-size: clamp(2rem, 2.8vw, 2.8rem); }
.calc-out .save .yr { margin-top: 0.4rem; font: 500 0.9375rem var(--sans); letter-spacing: 0; color: #fff; }
.calc-out .save .yr span { font-weight: 700; }
@media (max-width: 760px) { .calc-out { grid-template-columns: 1fr; } }

/* charts and text sit centred against each other */
#how .split, #scale .split { align-items: center; }
.pricechart .rbar { min-width: 0.9rem; }

/* home: calmer numerals, a bigger app thumbnail with its link beside it */
.teasers .fig { font-size: clamp(2.2rem, 2.8vw, 3rem); }
@media (min-width: 900px) { .app-row { grid-template-columns: 14rem 1fr; } }
.thumb { max-width: 16rem; }
.app-link { margin-top: 0.9rem; }

/* privacy: balanced columns */
.privgrid { align-items: center; }
.node.ghost { width: 100%; max-width: 30rem; }
.cut { height: 2.5rem; }

/* models and downloads */
.model.planned { border-color: #ffffff4d; }
.dlcards { grid-template-columns: 1fr 1fr; }
.dlcard { padding: 1rem; }
@media (max-width: 420px) { .dlcards { grid-template-columns: 1fr 1fr; } .dl-os { font-size: 1.15rem; } .dlcard .btn { font-size: 0.8125rem; padding: 0.7rem 0.25rem; } }

/* phones: stats as a compact list, and a hint that the tables scroll */
.swipe { display: none; }
@media (max-width: 560px) {
  .stats.row { grid-template-columns: 1fr; gap: 0; }
  .stats.row div { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.9rem 0; border-top: 1px solid var(--line); }
  .stats.row div:first-child { border-top: 2px solid var(--text); }
  .stats.row dd { font-size: 2.2rem; order: 0; }
  .stats.row dt { font-size: 0.9375rem; text-align: right; order: 1; }
  .swipe { display: block; margin: 1.25rem 0 0.5rem; font: 500 0.75rem var(--mono); color: var(--muted); }
}


/* projected large-model costs, and the system requirements */
.tbl-title { margin-top: 2.25rem; font-size: 1.15rem; letter-spacing: -0.02em; }
.results.proj { margin-top: 0.75rem; }
.results.proj td:nth-child(2) { color: var(--muted); }
.reqgrid { margin-top: 1.75rem; display: grid; gap: 1.5rem; }
@media (min-width: 800px) { .reqgrid { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.req { border-top: 2px solid var(--text); padding-top: 1.25rem; }
.req h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin-bottom: 0.75rem; }
.req-h { margin-top: 1.1rem; font: 500 0.8125rem var(--mono); color: var(--accent-text); }
.req > p:not(.req-h) { margin-top: 0.5rem; color: var(--muted); font-size: 1.0625rem; max-width: 30em; }
.req ul { margin: 0.6rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.req li { padding: 0.7rem 0; border-bottom: 1px solid var(--line); color: var(--muted); }

/* app page: the download cards stack and sit level with the screenshot */
@media (min-width: 900px) { .apppage { align-items: start; } .apppage .shot { position: sticky; top: 5.5rem; } .appside .dlcards { grid-template-columns: 1fr; } .appside .dlcard { padding: 1.4rem; } }

.req-note { margin-top: 1rem; color: var(--muted); font-size: 0.9375rem; max-width: 30em; }


/* ===== savings page: the answer first ===== */
.vs { margin-top: 2rem; display: grid; gap: 0.75rem; }
@media (min-width: 800px) { .vs { grid-template-columns: 1fr 1fr 1.1fr; gap: 1rem; } }
.setup, .result { border: 1px solid var(--line-strong); border-radius: 0.75rem; background: var(--layer); padding: 1.4rem; display: flex; flex-direction: column; }
.setup.u { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.setup-name { font-weight: 600; letter-spacing: -0.02em; color: var(--muted); }
.setup.u .setup-name { color: var(--accent-text); }
.setup-size { margin-top: 0.4rem; font: 600 clamp(2.4rem, 3.6vw, 3.4rem)/1 var(--sans); letter-spacing: -0.05em; }
.setup-facts { margin: 1.1rem 0 0; display: grid; border-top: 1px solid var(--line); }
.setup-facts div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.65rem 0; border-bottom: 1px solid var(--line); }
.setup-facts dt { color: var(--muted); }
.setup-facts dd { margin: 0; font-weight: 600; }
.setup-cost { margin-top: auto; padding-top: 1.1rem; color: var(--muted); }
.setup-cost span { color: var(--text); font: 600 1.9rem var(--sans); letter-spacing: -0.04em; }
.setup.u .setup-cost span { color: var(--accent-text); }
.result { background: var(--btn); border-color: var(--btn); justify-content: center; }
.result .setup-name { color: #fff; }
.result-big { margin-top: 0.5rem; font: 600 clamp(3rem, 5vw, 4.4rem)/1 var(--sans); letter-spacing: -0.05em; color: #fff; }
.result-big small { display: inline-block; margin-left: 0.6rem; vertical-align: middle; background: #fff; color: #2b49d9; font: 700 0.9375rem var(--sans); letter-spacing: 0; padding: 0.2rem 0.65rem; border-radius: 999px; }
.result-sub { margin-top: 0.6rem; color: #fff; font-size: 1.0625rem; }
.result-sub span { font-weight: 700; }
.servers { margin-top: 1.75rem; max-width: 34rem; }
.servers label { display: block; font-weight: 600; }
.servers input[type=range] { width: 100%; margin-top: 0.7rem; accent-color: var(--accent); height: 2.5rem; }
.servers .hint { margin-top: 0.15rem; color: var(--muted); font-size: 0.9375rem; }
.sec .badge + h2 { margin-top: 0; }

.servers { margin: 1.5rem 0 0; }
.setup-math { margin-top: 0.15rem; font: 400 0.8125rem var(--mono); color: var(--faint); }
.setup-cost { padding-top: 0.9rem; }

.pj { margin-left: 0.4rem; font: 500 0.75rem var(--mono); color: var(--accent-text); letter-spacing: 0; }

/* ---- Ask Uluka Info, docked bottom-right ---- */
.ask-btn { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 20; cursor: pointer;
  background: var(--btn); color: #fff; border: 0; border-radius: 999px; padding: 0.7rem 1.25rem;
  font: 600 0.9375rem var(--sans); box-shadow: 0 0.5rem 1.5rem #0009; }
.ask-btn:hover { background: #4d6bf8; }
.ask { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 20; width: min(23rem, calc(100vw - 2.5rem));
  height: min(34rem, calc(100vh - 2.5rem)); display: flex; flex-direction: column;
  background: var(--layer); border: 1px solid var(--line-strong); border-radius: 0.75rem; box-shadow: 0 1rem 3rem #000c; }
.ask[hidden], .ask-btn[hidden] { display: none !important; }
.ask-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem;
  padding: 0.85rem 1rem; border-bottom: 1px solid var(--line); }
.ask-head b { display: block; font-size: 0.9375rem; }
.ask-sub { display: block; margin-top: 0.15rem; font: 400 0.75rem var(--mono); color: var(--faint); }
.ask-head button { border: 0; background: none; font: inherit; font-size: 1.35rem; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 0.2rem; }
.ask-head button:hover { color: var(--text); }
.ask-log { flex: 1; min-height: 0; overflow-y: auto; padding: 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.6rem; scrollbar-width: thin; }
.ask-msg { margin: 0; padding: 0.6rem 0.75rem; border-radius: 0.6rem; font-size: 0.875rem; line-height: 1.55; white-space: pre-wrap; max-width: 92%; }
.ask-msg.bot { background: var(--layer-2); color: var(--text); align-self: flex-start; }
.ask-msg.you { background: var(--inverse); color: var(--base); align-self: flex-end; font-weight: 500; }
.ask-status { margin: 0; padding: 0.35rem 1rem 0; font: 400 0.6875rem var(--mono); color: var(--faint); min-height: 1em; }
.ask-form { display: flex; gap: 0.5rem; padding: 0.85rem 1rem; border-top: 1px solid var(--line); }
.ask-form input { flex: 1; min-width: 0; padding: 0.55rem 0.7rem; border: 1px solid var(--line-strong); border-radius: var(--r);
  background: var(--base); color: var(--text); font: inherit; font-size: 0.875rem; }
.ask-form input::placeholder { color: var(--faint); }
.ask-form .btn { padding: 0.55rem 0.9rem; font-size: 0.875rem; }

/* Accounts extend the site's existing Inter, dark-surface and blue-action system. */
.account-panel { padding: 2.5rem; background: var(--layer); border: 1px solid var(--line-strong); border-radius: 0.7rem; min-width: 0; }
.account-panel h2 { font-size: 1.8rem; line-height: 1.2; letter-spacing: -0.035em; }
#signedOut { text-align: center; }
.panel-copy { color: var(--muted); margin: 0.8rem 0 1.5rem; font-size: 1rem; line-height: 1.6; }
.google-signin { display: flex; justify-content: center; width: 100%; min-height: 44px; margin-top: 1.9rem; }
.fine-print { font-size: 0.8125rem; color: var(--muted); line-height: 1.6; }
.account-message { font-size: 0.875rem; line-height: 1.6; color: var(--accent-text); margin-top: 1rem; overflow-wrap: anywhere; }
.account-message:empty { display: none; }
.account-identity { display: flex; align-items: center; gap: 0.7rem; justify-content: space-between; padding-bottom: 1.3rem; margin-bottom: 1.3rem; border-bottom: 1px solid var(--line); }
.account-identity p { color: var(--muted); font-size: 0.8125rem; overflow-wrap: anywhere; min-width: 0; }
.text-button { border: 0; padding: 0.2rem 0; background: transparent; color: var(--accent-text); cursor: pointer; font: 500 0.8125rem/1.4 var(--sans); white-space: nowrap; }
.text-button:hover { color: var(--text); }
.text-button:disabled { cursor: default; color: var(--faint); }
.access-form label { display: block; margin-top: 1.3rem; margin-bottom: 0.5rem; font-size: 0.875rem; font-weight: 500; }
.optional { color: var(--faint); font-weight: 400; margin-left: 0.3rem; }
.access-form input,.access-form textarea,.admin-toolbar input,.admin-toolbar select { width: 100%; min-width: 0; padding: 0.75rem; border: 1px solid var(--line-strong); border-radius: 0.375rem; color: var(--text); background: var(--base); font: 400 0.9375rem/1.4 var(--sans); }
.access-form textarea { resize: vertical; min-height: 7rem; }
.access-form .btn { margin-top: 1.4rem; width: 100%; }
.access-state { display: inline-block; color: var(--muted); font-size: 0.75rem; font-weight: 500; white-space: nowrap; }
.access-state[data-status=pending] { color: #e8c78a; }
.access-state[data-status=approved] { color: #9cd9b4; }
.access-state[data-status=revoked],.access-state[data-status=denied] { color: #e8aaaa; }
.request-alert { display: block; margin-top: 0.25rem; color: #e8c78a; font-size: 0.75rem; }
#accessStatus > h2 { margin-top: 0.9rem; }
.admin-link { display: block; margin-top: 1.5rem; padding-top: 1.1rem; border-top: 1px solid var(--line); font-size: 0.875rem; }
.download-access { padding: 1.6rem; margin-bottom: 1.4rem; }
.download-access h2 { font-size: 1.5rem; }
.download-access .google-signin { margin-top: 1.1rem; }
.download-access .fine-print { margin-top: 1.1rem; }
#download { scroll-margin-top: 6rem; }
@media (max-width: 899px) { .apppage .appside { order: -1; } }
.download-checksum { font: 400 0.65rem/1.6 var(--mono); color: var(--faint); margin-top: 0.75rem; overflow-wrap: anywhere; }
.download-details { margin-top: 0.75rem; }
.download-terminal { margin-top: 1.1rem; }
.download-command { margin: 0.4rem 0 0.2rem; padding: 0.6rem 0.75rem; font: 400 0.8125rem/1.6 var(--mono); color: var(--text); background: var(--base); border: 1px solid var(--line); border-radius: 0.375rem; overflow-x: auto; }
.download-details summary { width: fit-content; cursor: pointer; color: var(--muted); font-size: 0.8125rem; }
.download-details summary:hover { color: var(--text); }
.download-details p { margin-top: 0.75rem; }
.download-open { margin-top: 0.75rem; }
.privacy-website { max-width: 70rem; }
.privacy-website h2 { font-size: 1.9rem; }
.privacy-website p { max-width: 52em; color: var(--muted); margin-top: 1.1rem; }
.admin-shell { min-height: 65svh; }
.admin-title { display: flex; justify-content: space-between; gap: 1.5rem; align-items: flex-start; margin-bottom: 2.5rem; }
.admin-title h1 { font-size: clamp(2rem, 3.5vw, 3rem); }
.admin-title .lede { font-size: 1rem; margin-top: 0.6rem; }
.admin-title > a { font-size: 0.875rem; white-space: nowrap; margin-top: 0.8rem; }
.admin-agent { display: flex; justify-content: space-between; gap: 2rem; align-items: center; border-block: 1px solid var(--line); padding-block: 1.2rem; margin-bottom: 2.2rem; }
.admin-agent h2 { font-size: 1.2rem; margin-bottom: 0.4rem; }
.admin-agent .btn { font-size: 0.8125rem; padding: 0.7rem 1rem; }
.admin-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.9rem; }
.admin-toolbar h2 { font-size: 1.3rem; margin-right: auto; }
.admin-toolbar h2 span { color: var(--muted); font-size: 0.9375rem; font-weight: 400; }
.admin-toolbar input { width: 15rem; }
.admin-toolbar select { width: 10rem; }
.requests-table { margin-top: 1.2rem; overflow-x: auto; border-top: 1px solid var(--line-strong); }
.requests-table table { width: 100%; border-collapse: collapse; min-width: 720px; text-align: left; }
.requests-table th { color: var(--faint); font: 400 0.75rem var(--mono); padding: 0.85rem 0.8rem; border-bottom: 1px solid var(--line-strong); }
.requests-table td { padding: 1.2rem 0.8rem; border-bottom: 1px solid var(--line); font-size: 0.875rem; vertical-align: top; }
.requests-table td:first-child { width: 24%; }
.requests-table td:first-child strong { display: block; font-weight: 500; }
.requests-table td:first-child span { display: block; color: var(--muted); font-size: 0.75rem; margin-top: 0.3rem; overflow-wrap: anywhere; }
.request-purpose { color: var(--muted); max-width: 28rem; overflow-wrap: anywhere; white-space: pre-wrap; }
.request-actions .btn { font-size: 0.75rem; padding: 0.5rem 0.7rem; margin: 0 0.3rem 0.3rem 0; }
.empty-requests { padding: 3rem; text-align: center; color: var(--muted); }
.request-more { margin-top: 1.2rem; font-size: 0.875rem; }
.btn:disabled { opacity: 0.5; cursor: default; }

/* Ask Uluka Info: lightweight, device-independent chat using the same visual system. */
.ask-btn { display: flex; align-items: center; gap: 0.65rem; padding: 0.85rem 1.2rem; }
.ask-btn svg { width: 1.15rem; height: 1.15rem; }
.ask { width: min(26rem, calc(100vw - 2.5rem)); height: min(39rem, calc(100dvh - 2.5rem)); background: var(--base); overflow: hidden; }
.ask-head { padding: 1.1rem 1.25rem; background: var(--layer); align-items: center; }
.ask-head b { font-size: 1.05rem; font-weight: 600; }
.ask-sub { font: 400 0.75rem/1.5 var(--sans); color: var(--muted); margin-top: 0.3rem; }
.ask-head button { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 0.3rem; }
.ask-head button svg { width: 1.2rem; height: 1.2rem; }
.ask-head button:hover { background: var(--layer-2); }
.ask-log { padding: 1.2rem; gap: 1rem; }
.ask-welcome { padding-block: 0.5rem 1rem; }
.ask-welcome h2 { font-size: 1.5rem; line-height: 1.3; }
.ask-welcome > p { font-size: 0.875rem; line-height: 1.6; color: var(--muted); margin-top: 0.75rem; }
.ask-suggestions { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; margin-top: 1.4rem; }
.ask-suggestions button { border: 1px solid var(--line-strong); border-radius: 0.4rem; background: var(--layer); color: var(--text); padding: 0.7rem 0.9rem; text-align: left; cursor: pointer; font: 400 0.8125rem/1.4 var(--sans); }
.ask-suggestions button:hover { border-color: var(--accent); background: var(--layer-2); }
.ask-msg { padding: 0.85rem 1rem; max-width: 94%; font-size: 0.875rem; line-height: 1.7; }
.ask-msg p { margin: 0; }
.ask-msg.bot { background: var(--layer); }
.ask-msg.you { background: #253361; color: var(--text); font-weight: 400; }
.ask-sources { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.8rem; }
.ask-sources a { color: var(--accent-text); font-size: 0.75rem; text-decoration: none; padding-bottom: 0.1rem; border-bottom: 1px solid #7698fd55; }
.ask-sources a:hover { color: var(--text); }
.ask-status { padding: 0.4rem 1.2rem; min-height: 1.5rem; font: 400 0.75rem/1.5 var(--sans); color: var(--muted); }
.ask-tools { padding: 0.2rem 1.2rem 0.6rem; display: flex; gap: 1rem; }
.ask-tools #askClear { margin-left: auto; color: var(--faint); }
.ask-form { margin: 0 1rem; padding: 0.5rem; border: 1px solid var(--line-strong); border-radius: 0.5rem; background: var(--layer); align-items: center; }
.ask-form input { border: 0; background: transparent; padding: 0.4rem; font-size: 0.875rem; }
.ask-form .btn { display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border-radius: 0.35rem; flex: 0 0 2rem; }
.ask-form svg { width: 1rem; height: 1rem; }
#askVerification { padding-inline: 1.2rem; display: grid; place-items: center; }
@media (max-width: 900px) {
  .account-panel { padding: 1.8rem; }
}
@media (max-width: 700px) {
  .account-panel { padding: 1.8rem 1.4rem; }
  .account-panel h2 { font-size: 1.6rem; }
  .admin-toolbar input { flex: 1 1 12rem; }
  .admin-toolbar select { flex: 1 1 9rem; }
  .admin-toolbar h2 { width: 100%; }
  .admin-agent { gap: 1rem; }
  .admin-title { flex-direction: column; gap: 0; }
}
@media (max-width: 460px) {
  .ask { right: 0.6rem; bottom: 0.6rem; width: calc(100vw - 1.2rem); height: min(38rem, calc(100dvh - 1.2rem)); }
  .ask-btn { right: 0.8rem; bottom: 0.8rem; }
}

/* download cards: a line of facts, three short steps, everything long folded away */
.dl-meta { margin-top: 0.7rem; color: var(--muted); font-size: 0.8125rem; line-height: 1.5; }
.dl-steps { margin: 0.9rem 0 0; padding-left: 1.2rem; display: grid; gap: 0.45rem; color: var(--text); font-size: 0.875rem; line-height: 1.5; }
.dl-steps li::marker { color: var(--faint); font-weight: 600; }
.dl-steps code { font: 500 0.8125rem var(--mono); padding: 0.05rem 0.35rem; background: var(--base); border: 1px solid var(--line); border-radius: 0.25rem; }
.dlcard .download-details { margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--line); }
.dlcard .download-details + .download-details { margin-top: 0.4rem; padding-top: 0.4rem; border-top: 0; }
.dlcard .download-details[open] > summary { margin-bottom: 0.1rem; }
.dlcard .dl-note { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--line); }
@media (max-width: 560px) { .dlcards { grid-template-columns: 1fr; } .dlcard { padding: 1.25rem; } .dl-os { font-size: 1.35rem; } .dlcard .btn { font-size: 0.9375rem; padding: 0.8rem 0.5rem; } }