/* Inter and Inconsolata come from /fonts/fonts.css (docs/public/fonts), shared with the docs pages */
/* ============================================================
   Tina4 landing - design/landing.html
   Prototype workspace. Tokens + system from design/DESIGN.md
   (the approved PyConZA brand record). Flat colours only, no
   gradients. Inter + mono only. Human punctuation only.
   ============================================================ */

:root{
  /* Brand palette (DESIGN.md s4) */
  --brand:#2f5fe0;       /* primary blue, used sparingly; a fill behind white text */
  --brand-text:#2f5fe0;  /* blue as text (links, numbers, prompts); brighter in dark mode */
  --brand-2:#4888ff;     /* lighter accent, links, the accent 4 on dark */
  --fg:#1a1727;          /* dark brand surface: hero, AI band, footer, closing (a shade deeper in dark mode) */
  --ink:#1a1727;         /* primary text on light surfaces (flips to near-white in dark) */
  --fg-2:#4e4a63;        /* muted body text on light surfaces */
  --bg:#ffffff;          /* page white */
  --bg-soft:#f8f8fd;     /* soft panel */
  --bg-mute:#eeeef8;     /* muted panel / inline code bg */
  --border:#e6e5f1;      /* hairline */
  --border-2:#cfcde3;    /* stronger hairline */
  --dark-blue:#0f1a3a;   /* flat dark-blue alt for hero/OG backdrops */
  --code-bg:#141420;     /* code window background */
  --beacon:#ff9a2e;      /* the one orange beacon node (used once) */

  /* code-window syntax palette */
  --code-t:#e8e6f0; --code-c:#6b6880; --code-k:#7eb8f7;
  --code-s:#a8d4a0; --code-f:#88c0d0; --code-p:#b39ddb;

  --mono:'Inconsolata',ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  /* spacing (base-4) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s8:32px; --s10:40px; --s12:48px; --s16:64px; --s20:80px; --s24:96px; --s32:128px;

  --radius:14px;
  --radius-lg:20px;
  --max:1180px;

  --dur:200ms; --dur-slow:600ms;
  --ease:cubic-bezier(.2,0,0,1);
}

/* Dark theme, three-state pattern. The dark brand surfaces (hero, proof,
   footer, closing) use --fg directly and stay dark in both themes; only the
   light surfaces re-map below, so the native tina4press dark toggle works
   edge to edge once this ports in. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#262335; --bg-soft:#2f2c3f; --bg-mute:#38344a;
    --border:#3b3650; --border-2:#4a4560;
    --fg-2:#b9b3cb; --ink:#efecf6;
    --fg:#13111b; --brand-text:#6b9bff;
  }
}
:root[data-theme="dark"]{
  --bg:#262335; --bg-soft:#2f2c3f; --bg-mute:#38344a;
  --border:#3b3650; --border-2:#4a4560;
  --fg-2:#b9b3cb; --ink:#efecf6;
  --fg:#13111b; --brand-text:#6b9bff;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:var(--brand-text);text-decoration:none}
img,svg{display:block;max-width:100%}
h1,h2,h3{text-wrap:balance;letter-spacing:-.02em;line-height:1.08}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--s6)}

/* the robot rig's blend modes (tools/build-robot-rig.js turns its style attributes
   into these classes, so the inlined SVG obeys the page's no-inline-style CSP) */
.rb-blend-color-dodge{mix-blend-mode:color-dodge}
.rb-blend-multiply{mix-blend-mode:multiply}
.rb-blend-soft-light{mix-blend-mode:soft-light}
/* the inline icon sprite: in the page, out of the layout */
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--fg);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.site-header .wrap{display:flex;align-items:center;gap:var(--s6);height:60px}
.brand{display:flex;align-items:center;gap:var(--s3);margin-right:auto}
.brand img{width:30px;height:30px}
.brand-name{font-weight:800;font-size:1.15rem;color:#fff;letter-spacing:-.02em}
.brand-name span{color:var(--brand-2)}
.site-nav{display:flex;align-items:center;gap:var(--s4)}
.site-nav a{
  color:rgba(255,255,255,.72);font-weight:500;font-size:.88rem;
  transition:color var(--dur) var(--ease);
}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:#fff}
.header-actions{display:flex;align-items:center;gap:var(--s2)}
.icon-btn{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:9px;
  color:rgba(255,255,255,.72);background:none;border:0;cursor:pointer;
  transition:color var(--dur) var(--ease),background var(--dur) var(--ease)}
.icon-btn:hover{color:#fff;background:rgba(255,255,255,.08)}
/* GitHub, Discord and Code Infinity leave the header below 720px, as the docs
   site does (tina4press.config.mjs, .tp-site-links--compact); they stay in the footer */
@media(max-width:720px){.header-actions a.icon-btn{display:none}}
.icon-btn svg{width:18px;height:18px;fill:currentColor}
/* Lucide icons from the inline sprite: outline, 1em, the colour of the text */
.i{width:1em;height:1em;flex:none;display:inline-block;vertical-align:-.14em;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icon-btn svg.i{width:18px;height:18px;fill:none}
.search-pill .i{width:15px;height:15px}
.nav-toggle .i{width:22px;height:22px;vertical-align:middle}
.copy-btn{display:inline-flex;align-items:center;gap:6px}
.copy-btn .i{width:14px;height:14px}
.search-pill{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.6);border-radius:9px;
  padding:7px 10px;font-size:.85rem;cursor:pointer;transition:border-color var(--dur) var(--ease)}
.search-pill:hover{border-color:rgba(255,255,255,.3);color:#fff}
/* the shortcut key: a centred box with the command icon and the K, so it never
   depends on a font having the command symbol */
.search-pill kbd{display:inline-flex;align-items:center;gap:1px;height:18px;padding:0 5px;line-height:1;
  font-family:var(--mono);font-size:.72rem;background:rgba(255,255,255,.1);border-radius:4px;color:rgba(255,255,255,.7)}
.search-pill kbd .i{width:10px;height:10px;stroke-width:2.4}
.theme-toggle .sun{display:none;fill:none}
:root[data-theme="dark"] .theme-toggle .moon{display:none}
:root[data-theme="dark"] .theme-toggle .sun{display:block}
.nav-cta{
  color:#fff !important;background:transparent;
  border:1px solid rgba(255,255,255,.24);
  padding:7px 16px;border-radius:10px;font-weight:600;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.nav-cta:hover{border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.06)}
.nav-toggle{display:none;background:none;border:0;color:#fff;font-size:1.4rem;cursor:pointer}
/* the full nav and the search label share one bar: the label goes first */
.site-nav a,.search-pill{white-space:nowrap}
@media(max-width:1180px){
  .site-nav{gap:var(--s3)}
  .search-pill .search-hint,.search-pill kbd{display:none}
}
@media(max-width:960px){
  .site-nav{display:none}
  .nav-toggle{display:block}
  .search-pill .search-hint,.search-pill kbd{display:none}
}

/* the phone and tablet menu: a panel under the header bar with the same links */
.mobile-nav{display:flex;flex-direction:column;padding:var(--s2) var(--s6) var(--s4);
  background:var(--fg);border-top:1px solid rgba(255,255,255,.08)}
.mobile-nav[hidden]{display:none}
.mobile-nav a{color:rgba(255,255,255,.8);font-weight:500;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.mobile-nav a:last-child{border-bottom:0}
.mobile-nav a:hover,.mobile-nav a[aria-current="page"]{color:#fff}
@media(min-width:961px){.mobile-nav{display:none}}

/* ---------- hero ---------- */
.hero{
  position:relative;
  background:var(--fg);
  color:#fff;
  overflow:hidden;
  min-height:calc(100vh - 60px);
  display:flex;align-items:center;
}
/* A: generative dependency tangle that resolves to one clean node */
.tangle{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
/* depth tiers and line styles of the live network. The hero is the one place
   soft glow and gradients are allowed (DESIGN.md s0, s7): hub glows, bokeh and
   the beacon use radial fills defined in the SVG */
.tangle path{stroke:#5f78c8;stroke-linecap:round}
.tangle .t-knot path{stroke-width:1}
.tangle .t-spokes path{stroke:#4888ff;stroke-width:1.2}
.tangle .t-threads path{stroke-width:.6;stroke-dasharray:2 6}
.tangle .t-cons path{stroke-width:.7}
.tangle .t-sats path{stroke-width:.4}
.tangle .t-snap path{stroke:#ffd27a;stroke-width:1.4;stroke-linecap:round}
.tangle .n-hub{fill:#4888ff}
.tangle .n-hubglow{fill:url(#t4-hubglow)}
.tangle .n-mid{fill:#8fa6e6}
.tangle .n-mid.n-grey{fill:#cfcde3}
.tangle .n-sat,.tangle .n-dust{fill:#8fa6e6}
.tangle .n-bokeh{fill:url(#t4-bokeh)}
.tangle .b-glow{fill:url(#t4-beacon)}
.tangle .beacon{fill:var(--beacon)}

/* the hairball artwork as a drifting backdrop: screen-blended on the dark hero so
   it melts in with no rectangle seam; the page fades it up as the knot resolves */
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero-bg img{position:absolute;mix-blend-mode:screen;max-width:none;
  /* the PNG's own ground is a navy a shade lighter than the hero, so screen-
     blending alone leaves a faint rectangle; a soft radial mask dissolves the
     edges so it melts in with no seam (DESIGN.md s7) */
  -webkit-mask-image:radial-gradient(ellipse 70% 75% at 66% 34%, #000 42%, transparent 100%);
          mask-image:radial-gradient(ellipse 70% 75% at 66% 34%, #000 42%, transparent 100%)}
/* blurred and faint: the artwork is the far background, the sharp live network
   sits in front of it (depth of field) */
.hb-main{top:-12%;right:-8%;width:min(70vw,960px);opacity:.1;filter:blur(4px);animation:hbDrift 60s ease-in-out infinite alternate}
.hb-mirror{bottom:-30%;left:-14%;width:min(55vw,720px);opacity:.07;filter:blur(6px);transform:scale(-1);animation:hbDrift2 74s ease-in-out infinite alternate}
/* a second, transparent layer above the robot: the orange beacon moves here
   while it passes in front of the robot, and back to the main layer behind it */
.tangle.tangle-front{z-index:3}
/* the boot text, in the robot's spot until the scene builds in */
.boot{position:absolute;inset:0;z-index:4;pointer-events:none;display:flex;flex-direction:column;
  justify-content:center;padding:0 6%;font-family:var(--mono);font-size:clamp(.78rem,.7rem + .3vw,.92rem);
  line-height:1.8;color:rgba(255,255,255,.72);white-space:pre}
.boot .p{color:var(--brand-2);font-weight:700}
.boot .u{color:var(--code-s)}
.boot .c{display:inline-block;width:8px;height:1.05em;background:var(--code-t);vertical-align:-2px;
  margin-left:2px;animation:blink 1s step-end infinite}
@media(prefers-reduced-motion:reduce){.boot{display:none}}
@keyframes hbDrift{to{translate:-12px 10px}}
@keyframes hbDrift2{to{translate:14px -8px}}
/* a soft dark wash under the headline so the copy stays crisp and the
   top-right reads brighter by contrast */
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 60% 75% at 18% 58%, rgba(15,26,58,.62), rgba(15,26,58,0) 70%)}
.tangle-cap{position:relative;z-index:3;margin-top:var(--s5);text-align:center;
  font-family:var(--mono);font-size:.75rem;color:rgba(255,255,255,.45);
  letter-spacing:.01em;opacity:0;transition:opacity .6s var(--ease)}
.hero-node{flex-direction:column}
.tangle-cap.show{opacity:1}
.tangle-cap b{color:var(--beacon);font-weight:400}
.hero > .wrap{position:relative;z-index:2;width:100%;
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s10);align-items:center;
  padding-top:var(--s16);padding-bottom:var(--s16);
}
.hero-left{max-width:34ch}
.slogan{
  font-weight:900;font-style:italic;
  font-size:clamp(2.2rem,1rem + 5.2vw,4.6rem);
  letter-spacing:-.045em;line-height:.9;color:#fff;
}
.slogan .dot{color:var(--brand-2)}
.hero-desc{
  margin-top:var(--s6);
  font-size:clamp(1.05rem,1rem + .4vw,1.3rem);
  font-weight:500;color:rgba(255,255,255,.72);line-height:1.5;
}
.hero-desc b{color:#fff;font-weight:600}
.hero-sub{
  margin-top:var(--s3);font-size:.9rem;color:rgba(255,255,255,.5);font-weight:500;
}
.hero-sub b{color:var(--brand-2);font-weight:500}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s8)}
/* the quiet third action under the two buttons: opens the Ask Tina4 chat */
.hero-ask{display:inline-flex;align-items:center;gap:var(--s2);margin-top:var(--s5);padding:4px 2px;background:none;border:0;
  font:inherit;font-size:.95rem;font-weight:600;color:rgba(255,255,255,.72);cursor:pointer;
  text-decoration:underline;text-decoration-color:rgba(255,255,255,.25);text-underline-offset:4px;transition:color var(--dur) var(--ease)}
.hero-ask:hover{color:#fff;text-decoration-color:currentColor}
.hero-ask .tina-mark{width:22px;height:22px;color:var(--brand-2)}
.btn{
  display:inline-flex;align-items:center;gap:var(--s2);
  padding:13px 22px;border-radius:12px;font-weight:600;font-size:1rem;
  transition:transform var(--dur) var(--ease),background var(--dur) var(--ease),border-color var(--dur) var(--ease);
  cursor:pointer;border:1px solid transparent;
}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:#3a6bf0;transform:translateY(-1px)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.22)}
.btn-ghost:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.05)}
.btn .arr{display:inline-flex;flex:none;transition:transform var(--dur) var(--ease)}   /* never squeezed away */
.btn:hover .arr{transform:translateX(3px)}

/* hero right: robot as the one clean node in the tangle */
.hero-node{position:relative;display:flex;align-items:center;justify-content:center;min-height:440px}
.hero-robot{
  width:min(78%,400px);height:auto;aspect-ratio:1;display:block;position:relative;z-index:3;
  filter:drop-shadow(0 16px 40px rgba(0,0,0,.45));
  opacity:0;transform:translateY(10px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
}
/* arrival is triggered by the tangle's own clock, not a fixed delay, so a page
   opened in a background tab still plays the resolve when it's first seen */
.hero-robot.arrived{opacity:1;transform:none}
.hero-robot > img,.hero-robot > svg{display:block;width:100%;height:100%;overflow:visible}
@media(prefers-reduced-motion:reduce){.hero-robot{transition:none;opacity:1;transform:none}}

/* ---------- section scaffolding (light) ---------- */
.section{padding:var(--s24) 0}
.section-head{max-width:46ch;margin-bottom:var(--s12)}
.section-head h2{font-size:clamp(1.8rem,1.4rem + 1.8vw,2.7rem);font-weight:800}
.section-head h2 em{font-style:normal;color:var(--brand-text)}
.section-head p{margin-top:var(--s4);font-size:1.1rem;color:var(--fg-2)}

/* ---------- proof band ---------- */
.proof{position:relative}
.chip{
  display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:10px;padding:12px 16px;
}
.chip .prompt{font-family:var(--mono);font-size:.92rem;color:var(--brand-2);font-weight:700}
.chip code{font-family:var(--mono);font-size:.92rem;color:var(--code-t)}
.chip .arrow{font-family:var(--mono);color:var(--brand-2)}
.chip .json{color:var(--code-s)}
.code-window{margin:var(--s4) 0;border:1px solid rgba(255,255,255,.1);
  border-radius:12px;overflow:hidden;background:#0f0f1a}
.code-header{background:#1a1a28;padding:10px 14px;display:flex;align-items:center;gap:7px}
.code-header .dot{width:11px;height:11px;border-radius:50%}
.dot-r{background:#ff5f57}.dot-y{background:#febc2e}.dot-g{background:#28c840}
.code-title{font-family:var(--mono);font-size:.78rem;color:rgba(255,255,255,.4);margin-left:8px}
.code-tabs{display:flex;gap:2px;margin-left:10px;overflow-x:auto;scrollbar-width:none}
.code-tabs::-webkit-scrollbar{display:none}
.code-tab{appearance:none;background:none;border:0;border-bottom:2px solid transparent;cursor:pointer;
  font-family:var(--mono);font-size:.78rem;color:rgba(255,255,255,.4);padding:4px 10px;white-space:nowrap;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.code-tab:hover{color:rgba(255,255,255,.72)}
.code-tab.active{color:var(--code-t);border-bottom-color:var(--brand-2)}
.code-variant{display:none}
.code-variant.active{display:block}
.code-body{padding:var(--s6);font-family:var(--mono);font-size:.9rem;line-height:1.7;
  color:var(--code-t);overflow-x:auto;white-space:pre}
.ck{color:var(--code-k)}.cs{color:var(--code-s)}.cf{color:var(--code-f)}
.cp{color:var(--code-p)}.cc{color:var(--code-c)}
.chip.col{flex-direction:column;align-items:flex-start;gap:var(--s2)}
.chip.col .row{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
/* one flow on the light page, top to bottom: create, add the route, call it. The
   code window is the section's one dark object; the commands are plain lines */
.proof-steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--s6)}
.proof-step{display:grid;grid-template-columns:150px minmax(0,1fr);gap:var(--s5);align-items:start}
.step-l{padding-top:2px;font-weight:700;font-size:.95rem;color:var(--ink)}
.proof-step .code-window{margin:0}
.proof-line{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2) var(--s3);font-family:var(--mono);font-size:.95rem}
.proof-line .prompt{color:var(--brand-text);font-weight:700}
.proof-line code{font-family:var(--mono);color:var(--ink)}
.proof-line .arrow{color:var(--brand-text)}
.proof-line .json{color:var(--ink);font-weight:700}
.proof-cmds{gap:var(--s2) var(--s8)}
.proof-cmds .row{display:flex;align-items:center;gap:var(--s2)}
.proof-line .typing::after{background:var(--ink)}
/* every language's code sits in the same grid cell, so the window is always as
   tall as the longest one and switching tabs never moves the page */
.proof-body{display:grid}
.proof-body .code-variant{display:block;grid-area:1/1;visibility:hidden}
.proof-body .code-variant.active{visibility:visible}
.code-body{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}
.code-body::-webkit-scrollbar{height:8px}
.code-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:4px}
.code-body::-webkit-scrollbar-track{background:transparent}
/* what that one file gave you: plain text in two columns, each title a docs link */
.proof-gets{list-style:none;margin:var(--s10) 0 0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s4) var(--s10);max-width:860px}
.proof-gets li{font-size:.95rem;line-height:1.55;color:var(--fg-2)}
.proof-gets code{font-family:var(--mono);font-size:.88em;color:var(--ink);background:var(--bg-mute);padding:1px 5px;border-radius:4px}
.proof-gets a{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--border-2);text-underline-offset:3px}
.proof-gets a:hover{color:var(--brand-text);text-decoration-color:currentColor}
/* stat strip */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5);margin-top:var(--s8);
  border-top:1px solid rgba(255,255,255,.12);padding-top:var(--s8)}
.stat-n{font-size:clamp(1.6rem,1.2rem + 1.4vw,2.2rem);font-weight:800;line-height:1;
  color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stat-n b{color:var(--brand-2);font-weight:800}
.stat-l{font-size:.8rem;color:rgba(255,255,255,.55);margin-top:var(--s3);line-height:1.4}

/* ---------- language tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5)}
.tile{
  display:block;background:var(--bg-soft);border:1px solid var(--border);
  border-radius:var(--radius);padding:var(--s6);
  transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.tile:hover{border-color:var(--border-2)}
.tile-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s4)}
.tile h3{font-size:1.15rem;font-weight:700;color:var(--ink)}
.tile .lang-badge{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:var(--fg);font-family:var(--mono);font-weight:700;font-size:.85rem;color:#fff}
.tile p{font-size:.88rem;color:var(--fg-2);line-height:1.5}
.tile .tile-link{margin-top:var(--s5);font-weight:600;font-size:.9rem;color:var(--brand-text);
  display:inline-flex;align-items:center;gap:6px}
.tile:hover .tile-link .arr{transform:translateX(3px)}

/* ---------- feature grid ---------- */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.feature{display:block;padding:var(--s6);border-radius:var(--radius);border:1px solid var(--border);background:var(--bg);
  transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.feature:hover{border-color:var(--border-2)}
.feature h3{color:var(--fg)}
.feature .fmark{display:inline-block;font-family:var(--mono);font-size:.82rem;color:var(--fg-2);
  background:var(--bg-mute);padding:3px 9px;border-radius:7px;margin-bottom:var(--s5)}
.feature h3{font-size:1.05rem;font-weight:700;margin-bottom:var(--s2);color:var(--ink)}
.feature p{font-size:.9rem;color:var(--fg-2);line-height:1.55}
.feature code,.tile p code{font-family:var(--mono);font-size:.85em;background:var(--bg-mute);padding:1px 6px;border-radius:5px;color:var(--ink)}

/* ---------- footer ---------- */
.site-footer{background:var(--fg);color:#fff;padding:var(--s16) 0 var(--s10)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--s8)}
.footer-brand .brand-name{color:#fff;margin-bottom:var(--s3)}
.footer-brand p{color:rgba(255,255,255,.55);font-size:.9rem;max-width:30ch}
.footer-col h4{font-size:.9rem;color:rgba(255,255,255,.55);margin-bottom:var(--s4);font-weight:600}
.footer-col a{display:block;color:rgba(255,255,255,.72);font-size:.92rem;padding:5px 0;
  transition:color var(--dur) var(--ease)}
.footer-col a:hover{color:#fff}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--s4);
  margin-top:var(--s12);padding-top:var(--s6);border-top:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.45);font-size:.85rem}
.footer-cobrand{display:inline-flex;align-items:center;gap:var(--s2)}
.footer-cobrand img{height:16px;width:auto}

/* ---------- easter egg: Tina pops up from the bottom when you go still ----------
   Leave the page untouched for a while with more of it still below, and she
   rises from the bottom edge, head first, to say so. Any movement sends her
   back down; clicking her scrolls on to the next part of the page */
.peek{position:fixed;left:50%;bottom:0;width:200px;height:200px;z-index:55;pointer-events:none;
  transform:translate(-50%,101%);transition:transform .6s cubic-bezier(.2,.9,.3,1.2)}
.peek.in{transform:translate(-50%,30%);pointer-events:auto;cursor:pointer}   /* her whole head and the top of her body clear the edge */
.peek-bot{width:100%;height:100%;filter:drop-shadow(0 8px 20px rgba(0,0,0,.35))}
.peek-bot svg,.peek-bot img{width:100%;height:100%;display:block;overflow:visible;transform-origin:50% 60%}
.peek.in .peek-bot svg,.peek.in .peek-bot img{animation:peekWobble 1.4s ease-in-out .55s 2}
@keyframes peekWobble{25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}
.peek-say{position:absolute;left:calc(100% - 36px);top:18%;font-weight:700;font-size:.85rem;color:#fff;background:var(--fg);
  display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:10px;white-space:nowrap;opacity:0;transition:opacity .3s var(--ease)}
.peek-say .i{width:13px;height:13px}
.peek.in .peek-say{opacity:1;transition-delay:.5s}
@media(max-width:600px){.peek{width:150px;height:150px}.peek-say{font-size:.78rem}}

/* ---------- Ask Tina4 chat ----------
   The markup and class names are tina4press's own chat widget (tp-chat-*,
   tina4press 0.1.16 src/theme/client.js), so this styling ports as plain CSS.
   Pieces tina4press does not draw yet are marked "enhancement" (see PORT-PLAN).
   Tina's mark is the favicon's silhouette, drawn inline in currentColor. */
.tina-mark{fill:currentColor;stroke:none;display:block}
.tp-chat{position:fixed;right:22px;bottom:22px;z-index:60}
/* collapsed: a brand-blue pill with Tina in white */
.tp-chat-btn{display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  background:var(--brand);color:#fff;border:0;padding:12px 20px 12px 14px;border-radius:999px;
  font:inherit;font-weight:600;font-size:.95rem;box-shadow:0 10px 30px rgba(47,95,224,.35);
  transition:transform var(--dur) var(--ease),background var(--dur) var(--ease),opacity .25s var(--ease)}
.tp-chat-btn:hover{transform:translateY(-2px);background:#3a6bf0}
.tp-chat-btn .tina-mark{width:24px;height:24px}
/* open: a wide panel that slides in from the right edge of the page. tina4press
   toggles the panel's [hidden] attribute, so [hidden] means "slid away" here
   rather than display:none; that is what lets it animate */
/* docked: half the screen tall (420 to 680px), sharing the button's corner so the
   button can morph into it. Closed ([hidden], which tina4press toggles), the panel
   is clipped to the button's exact pill and covered in brand blue; opening grows
   the clip out to the whole panel while the blue fades and the contents arrive.
   --bw/--bh are the button's size and --gr/--gb its offset from the panel's corner
   (the page script measures them; the fallbacks fit the desktop button) */
.tp-chat-panel{position:fixed;right:22px;bottom:22px;width:min(480px,calc(100vw - 44px));
  height:clamp(420px,50vh,680px);max-height:calc(100vh - 44px);
  display:flex;flex-direction:column;overflow:hidden;background:var(--bg);color:var(--ink);
  border:1px solid var(--border);border-radius:16px;box-shadow:0 24px 64px rgba(20,20,32,.28);
  visibility:visible;clip-path:inset(-96px round 24px);   /* wide enough for the whole shadow (64px blur, 24px drop) */
  transition:clip-path .42s cubic-bezier(.2,.8,.2,1),width .25s var(--ease),height .25s var(--ease),visibility 0s}
.tp-chat-panel::after{content:"";position:absolute;inset:0;background:var(--brand);opacity:0;pointer-events:none;
  transition:opacity .24s var(--ease) .1s}
.tp-chat-panel > *{transition:opacity .2s var(--ease) .16s}
.tp-chat-panel[hidden]{display:flex;visibility:hidden;
  clip-path:inset(calc(100% - var(--gb,0px) - var(--bh,48px)) var(--gr,0px) var(--gb,0px) calc(100% - var(--gr,0px) - var(--bw,142px)) round calc(var(--bh,48px) / 2));
  transition:clip-path .34s cubic-bezier(.4,0,.2,1),visibility 0s .34s}
.tp-chat-panel[hidden]::after{opacity:1;transition:opacity .14s var(--ease)}
.tp-chat-panel[hidden] > *{opacity:0;transition:opacity .08s var(--ease)}
/* the button hands over to the panel at once, and takes back over as the panel lands */
.tp-chat.open .tp-chat-btn{opacity:0;pointer-events:none;transition:none}
.tp-chat:not(.open) .tp-chat-btn{transition:transform var(--dur) var(--ease),background var(--dur) var(--ease),opacity 0s .3s}
/* widened: wider and taller */
.tp-chat.wide .tp-chat-panel{width:min(760px,calc(100vw - 44px));height:min(85vh,calc(100vh - 44px))}
@media(prefers-reduced-motion:reduce){.tp-chat-panel,.tp-chat-panel[hidden],.tp-chat-panel::after,.tp-chat-panel > *{transition:none}}
/* head: Tina, the title, the model line, and the tools: widen and close (enhancements) */
.tp-chat-head{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;
  align-items:center;padding:12px 10px 12px 16px;border-bottom:1px solid var(--border)}
.tp-chat-avatar{grid-column:1;grid-row:1 / span 2;margin-right:10px;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;background:var(--brand);color:#fff}
.tp-chat-avatar .tina-mark{width:22px;height:22px}
.tp-chat-head strong{grid-column:2;font-size:1rem;line-height:1.2}
.tp-chat-model{grid-column:2;font-size:.76rem;color:var(--fg-2)}
.tp-chat-tools{grid-column:3;grid-row:1 / span 2;display:flex;gap:2px}
.tp-chat-tool{width:34px;height:34px;display:grid;place-items:center;background:none;border:0;
  border-radius:8px;color:var(--fg-2);cursor:pointer}
.tp-chat-tool:hover{color:var(--ink);background:var(--bg-mute)}
.tp-chat-tool .i{width:17px;height:17px}
.tp-chat-expand .i-shrink,.tp-chat.wide .tp-chat-expand .i-grow{display:none}
.tp-chat.wide .tp-chat-expand .i-shrink{display:block}
/* the conversation */
.tp-chat-log{flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:12px}
.tp-chat-msg{font-size:.93rem;line-height:1.55;max-width:86%;overflow-wrap:anywhere}
.tp-chat-you{align-self:flex-end;background:var(--brand);color:#fff;padding:9px 14px;border-radius:16px 16px 4px 16px}
.tp-chat-bot{align-self:flex-start;background:var(--bg-soft);color:var(--ink);border:1px solid var(--border);
  padding:10px 14px;border-radius:16px 16px 16px 4px;animation:chatIn .2s var(--ease)}
@keyframes chatIn{from{opacity:0;transform:translateY(6px)}}
.tp-chat-bot code{font-family:var(--mono);font-size:.86em;background:var(--bg-mute);padding:1px 5px;border-radius:4px}
.tp-chat-bot pre{margin:8px 0;background:#0f0f1a;color:var(--code-t);border-radius:8px;padding:10px 12px;
  font-family:var(--mono);font-size:.82rem;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
.tp-chat-bot pre code{background:none;padding:0;font-size:inherit;color:inherit}
.tp-chat-bot strong{font-weight:700}
.tp-chat-bot a{color:var(--brand-text);font-weight:600}
/* while Tina thinks: three dots (enhancement; tina4press shows a static ellipsis) */
.tp-chat-thinking{display:inline-flex;gap:4px;padding:4px 2px}
.tp-chat-thinking span{width:6px;height:6px;border-radius:50%;background:var(--fg-2);animation:chatDot 1s var(--ease) infinite}
.tp-chat-thinking span:nth-child(2){animation-delay:.15s}
.tp-chat-thinking span:nth-child(3){animation-delay:.3s}
@keyframes chatDot{0%,60%,100%{opacity:.25;transform:none}30%{opacity:1;transform:translateY(-3px)}}
/* sources: real links into the docs, under the answer */
.tp-chat-sources{align-self:flex-start;max-width:86%;display:flex;flex-wrap:wrap;gap:6px}
.tp-chat-sources-label{width:100%;font-size:.8rem;font-weight:600;color:var(--fg-2)}
.tp-chat-src{display:inline-flex;align-items:center;font-size:.82rem;font-weight:600;color:var(--brand-text);
  background:var(--bg);border:1px solid var(--border);border-radius:999px;padding:4px 11px}
.tp-chat-src:hover{border-color:var(--brand)}
/* suggested questions (enhancement) */
.tp-chat-suggest{align-self:flex-start;display:flex;flex-wrap:wrap;gap:6px;max-width:100%}
.tp-chat-chip{font:inherit;font-size:.85rem;color:var(--ink);background:var(--bg);border:1px solid var(--border);
  border-radius:999px;padding:6px 12px;cursor:pointer;transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.tp-chat-chip:hover{border-color:var(--brand);color:var(--brand-text)}
/* the question box: a soft rounded field and a round send button */
.tp-chat-form{display:flex;align-items:center;gap:8px;padding:12px 14px 6px;border-top:1px solid var(--border)}
.tp-chat-input{flex:1;min-width:0;font:inherit;font-size:.95rem;color:var(--ink);background:var(--bg-soft);
  border:1px solid var(--border);border-radius:12px;padding:11px 14px}
.tp-chat-input:focus{outline:2px solid var(--brand);outline-offset:-1px}
.tp-chat-form button{flex:none;width:42px;height:42px;display:grid;place-items:center;border:0;border-radius:12px;
  background:var(--brand);color:#fff;cursor:pointer}
.tp-chat-form button:hover{background:#3a6bf0}
.tp-chat-form button .i{width:19px;height:19px}

/* ---------- C: self-building terminal ---------- */
.proof{position:relative}
.typing::after{content:"";display:inline-block;width:7px;height:1em;background:var(--code-t);
  vertical-align:-2px;margin-left:2px;animation:blink 1s step-end infinite}
.code-variant .ln{opacity:1;transition:opacity .25s var(--ease)}
.code-variant.building .ln{opacity:0}
.code-variant.building .ln.on{opacity:1}
#curl-json{transition:opacity .3s var(--ease)}
#curl-json.hide{opacity:0}
/* under the steps, in line with them */
.replay{margin:var(--s4) 0 0 calc(150px + var(--s5));font:inherit;font-size:.85rem;font-weight:600;color:var(--fg-2);
  background:none;border:1px solid var(--border);border-radius:8px;
  padding:5px 12px;cursor:pointer;transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.replay:hover{color:var(--ink);border-color:var(--border-2)}

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

/* ---------- B: what you're not installing ---------- */
/* two matching install windows: the same command shape, the real package names
   landing as chips, and the dependency count as the landmark number */
.dep-tabs{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--border);border-radius:12px;
  background:var(--bg-soft);margin-bottom:var(--s5)}
.dep-tab{font:inherit;font-size:.9rem;font-weight:600;color:var(--fg-2);background:transparent;border:0;
  border-radius:8px;padding:7px 14px;cursor:pointer;transition:color var(--dur) var(--ease),background var(--dur) var(--ease)}
.dep-tab:hover{color:var(--ink)}
.dep-tab.active{background:var(--fg);color:#fff}
.dep-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8)}
.dep-side{min-width:0}
/* the receipt: one flat dark box with the install output, no window chrome */
.dep-box{background:#0f0f1a;border-radius:12px;padding:var(--s5) var(--s6);font-family:var(--mono);font-size:.85rem;color:var(--code-t)}
.dep-cmd{margin-bottom:var(--s4)}
.dep-cmd .prompt{color:var(--brand-2);font-weight:700}
.dep-pkgs{position:relative;list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start;height:154px;overflow:hidden}
.dep-pkgs li.more{color:#fff;background:transparent;border:1px dashed rgba(255,255,255,.35)}
.dep-pkgs li{font-size:.76rem;line-height:1;padding:6px 8px;border-radius:6px;color:#b9b4d6;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);white-space:nowrap;
  animation:depIn .22s var(--ease) both}
.dep-pkgs li.req{color:#fff;border-color:rgba(255,255,255,.28)}
.dep-us .dep-pkgs li.req{color:#fff;background:var(--brand);border-color:var(--brand)}
@keyframes depIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
/* the claim: the dependency count as a headline on the page, above its receipt */
.dep-count{display:flex;align-items:center;gap:var(--s4);margin-bottom:var(--s4)}
.dep-n{font-weight:800;font-size:clamp(3.2rem,2rem + 4vw,5.5rem);line-height:.9;
  letter-spacing:-.05em;color:var(--ink);font-variant-numeric:tabular-nums}
.dep-us .dep-n{color:var(--brand-text)}
.dep-l{font-size:.95rem;color:var(--fg-2);line-height:1.4}
.dep-l b{color:var(--ink);font-weight:700}
/* what the zero buys you: plain text in two columns */
.dep-gains{list-style:none;margin:var(--s10) 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:var(--s4) var(--s10);max-width:860px}
.dep-gains li{color:var(--fg-2);font-size:.95rem;line-height:1.55}
.dep-gains b{color:var(--ink);font-weight:700}
.dep-note{margin-top:var(--s8);font-size:.78rem;color:var(--fg-2);max-width:80ch}
@media(max-width:860px){.dep-gains{grid-template-columns:1fr}}
@media(max-width:640px){.dep-grid{grid-template-columns:1fr}}   /* two installs side by side down to small tablets */
@media(min-width:861px) and (max-width:1100px){.proof-gets{grid-template-columns:1fr 1fr}}

/* ---------- closing band ---------- */
.closing{background:var(--fg);color:#fff;text-align:center;padding:var(--s24) 0}
.closing h2{font-size:clamp(1.8rem,1.4rem + 1.8vw,2.8rem);font-weight:900;font-style:italic;
  letter-spacing:-.035em;color:#fff;line-height:1}
.closing h2 .dot{color:var(--brand-2)}
.closing p{margin-top:var(--s4);color:rgba(255,255,255,.6);font-size:1.05rem}
.closing-cta{display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:center;align-items:center;margin-top:var(--s8)}
.closing .chip{display:inline-flex}
.install .chip{display:flex;width:100%}

/* blinking caret for the empty Requires gag */
.caret{display:inline-block;width:8px;height:1.05em;background:var(--code-s);
  vertical-align:-2px;margin-left:3px;animation:blink 1.1s step-end infinite}
@keyframes blink{50%{opacity:0}}

.footer-backronym{font-size:.8rem;color:rgba(255,255,255,.45);margin:4px 0 12px}
.footer-backronym b{color:var(--brand-2);font-weight:500}

/* ================= below-hero richness pass ================= */

/* rhythm: tighter sections, and not every heading sits top-left */
.section{padding:80px 0}
.section-head{margin-bottom:var(--s8)}
.section-head.centered{margin-left:auto;margin-right:auto;text-align:center}
/* each language's logo in white on the dark tile (Simple Icons, CC0; home/assets/lang/README.md) */
.lang-badge{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--fg)}
.lang-badge svg{width:22px;height:22px;display:block;fill:#fff}


/* stat strip: its own full-width band */
.stat-strip{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg)}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr)}
.stat-strip .stat{padding:var(--s10) var(--s6);border-left:1px solid var(--border)}
.stat-strip .stat:first-child{border-left:0;padding-left:0}
.stat-strip .stat-n{font-size:clamp(2.4rem,1.6rem + 2.4vw,3.5rem);font-weight:800;color:var(--ink);
  letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.stat-strip .stat-n.is-zero{color:var(--brand-text)}
.stat-strip .stat-l{font-size:.85rem;color:var(--fg-2);margin-top:var(--s3)}


/* give your AI 30 seconds */
.ai-band{position:relative;overflow:hidden;background:var(--fg);color:#fff;padding:96px 0}
.ai-band .wrap,.closing .wrap{position:relative;z-index:1}
.ai-head{max-width:56ch}
.ai-head h2{font-size:clamp(1.8rem,1.4rem + 1.8vw,2.7rem);font-weight:800;color:#fff}
.ai-head p{color:rgba(255,255,255,.65);margin-top:var(--s4);font-size:1.05rem}
.ai-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--s12);margin-top:var(--s10);align-items:start}
/* the prompt, set as a sentence: tabs, the quote, one copy button. No window */
.ai-tabs{display:inline-flex;gap:4px;padding:4px;border:1px solid rgba(255,255,255,.14);border-radius:12px;margin-bottom:var(--s6)}
.ai-tab{font:inherit;font-size:.9rem;font-weight:600;color:rgba(255,255,255,.6);background:transparent;border:0;
  border-radius:8px;padding:7px 14px;cursor:pointer;transition:color var(--dur) var(--ease),background var(--dur) var(--ease)}
.ai-tab:hover{color:#fff}
.ai-tab.active{background:#fff;color:var(--fg)}
.ai-quote{font-size:clamp(1.35rem,1rem + 1vw,1.7rem);font-weight:500;line-height:1.45;color:#fff;letter-spacing:-.01em;max-width:30ch}
.ai-quote .q{color:var(--brand-2)}
#ai-lang{color:var(--brand-2);font-weight:700}
.copy-btn{margin-left:auto;font-family:var(--mono);font-size:.75rem;color:rgba(255,255,255,.55);
  background:none;border:1px solid rgba(255,255,255,.16);border-radius:7px;padding:4px 10px;cursor:pointer;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.copy-btn:hover{color:#fff;border-color:rgba(255,255,255,.4)}
.copy-btn.done{color:var(--code-s);border-color:var(--code-s)}
.copy-btn.ai-copy{margin:var(--s6) 0 0;font:inherit;font-size:.9rem;font-weight:600;color:#fff;padding:9px 16px;border-radius:10px;border-color:rgba(255,255,255,.3)}
.copy-btn.ai-copy:hover{border-color:#fff}
/* what the assistant runs next: plain mono lines under a hairline, no box */
.ai-run-label{font-size:.85rem;color:rgba(255,255,255,.55);margin-bottom:var(--s3);padding-bottom:var(--s3);border-bottom:1px solid rgba(255,255,255,.12)}
.ai-lines{display:flex;flex-direction:column;gap:var(--s2);font-family:var(--mono);font-size:.92rem}
.ai-lines .row{display:flex;align-items:center;gap:var(--s2)}
.ai-lines .prompt{color:var(--brand-2);font-weight:700}
.ai-lines code{font-family:var(--mono);color:var(--code-t)}
.ai-lines .arrow{color:var(--brand-2)}
.ai-lines .json{color:var(--code-s)}
.ai-note{margin-top:var(--s6);color:rgba(255,255,255,.65);font-size:.95rem}
.ai-note a,.ai-tag a{color:var(--brand-2)}
.ai-note code{font-family:var(--mono);font-size:.88em;background:rgba(255,255,255,.08);padding:1px 6px;border-radius:5px;color:var(--code-t)}
.ai-tag{margin-top:var(--s4);font-weight:800;font-style:italic;color:#fff;letter-spacing:-.01em}
.ai-tag a{font-style:normal;font-weight:600;margin-left:var(--s2)}

/* reveal-on-scroll rows (only armed when JS and IntersectionObserver are present) */
[data-reveal].pending .row,[data-reveal].pending .box-row{opacity:0}
[data-reveal] .row,[data-reveal] .box-row{transition:opacity .4s var(--ease)}
[data-reveal] .row.on,[data-reveal] .box-row.on{opacity:1}

/* languages: one spec sheet */
.spec{border-top:1px solid var(--border)}
.spec-head,.spec-row{display:grid;grid-template-columns:44px 110px 1fr 160px 72px 120px;gap:var(--s5);
  align-items:center;padding:var(--s5) var(--s3);border-bottom:1px solid var(--border)}
.spec-head{font-size:.8rem;color:var(--fg-2);padding-top:var(--s3);padding-bottom:var(--s3)}
.spec-row{color:var(--ink);transition:background var(--dur) var(--ease)}
.spec-row:hover{background:var(--bg-soft)}
.spec-name{font-weight:700;font-size:1.05rem}
.spec-desc{color:var(--fg-2);font-size:.92rem}
.spec-desc code{font-family:var(--mono);font-size:.85em;background:var(--bg-mute);padding:1px 6px;border-radius:5px;color:var(--ink)}
.spec-cmd,.spec-port{font-family:var(--mono);font-size:.85rem;color:var(--fg-2)}
.spec-go{color:var(--brand-text);font-weight:600;font-size:.9rem;text-align:right;white-space:nowrap}

/* what's in the box: one terminal catalogue */
.box{margin:0}
.box-body{padding:0}
.box-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s12)}
.box-group{margin-bottom:var(--s8)}
.box-c{font-size:.95rem;font-weight:600;color:var(--ink);margin-bottom:var(--s2)}
.box-row{display:grid;grid-template-columns:150px 1fr;gap:var(--s4);padding:10px 0;
  border-top:1px solid var(--border);font-size:.92rem;color:var(--fg-2);line-height:1.5}
.box-k{justify-self:start;font-family:var(--mono);color:var(--ink);font-size:.82rem;white-space:nowrap;
  background:var(--bg-mute);padding:2px 7px;border-radius:5px;height:max-content}
.box-row span code{font-family:var(--mono);font-size:.88em;color:var(--ink);background:var(--bg-mute);padding:1px 4px;border-radius:4px}

/* what shipped last */
/* a dated note, set apart from the feature catalogue above it on a soft ground */
.shipped{padding:64px 0;background:var(--bg-soft);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.shipped-row{display:grid;grid-template-columns:200px 1fr;gap:var(--s10);align-items:start;
  border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--s8)}
.shipped-ver{display:flex;flex-direction:column;gap:var(--s2)}
.shipped-ver code{background:var(--fg);color:#fff;font-family:var(--mono);font-size:1rem;
  padding:6px 12px;border-radius:8px;width:max-content}
.shipped-ver span{font-family:var(--mono);font-size:.85rem;color:var(--fg-2)}
.shipped-h{font-size:1.25rem;font-weight:800;margin-bottom:var(--s3)}
.shipped-list{list-style:none;display:grid;color:var(--fg-2);font-size:.93rem}
.shipped-list li + li{border-top:1px solid var(--border)}
.rel-link{display:grid;grid-template-columns:7.5em 6.5em minmax(0,1fr);gap:var(--s4);align-items:baseline;
  padding:10px 0;color:var(--fg-2);transition:color var(--dur) var(--ease)}
.rel-link:hover{color:var(--ink)}
.rel-link:hover .rel-h{text-decoration:underline;text-underline-offset:3px}
.rel-link code{font-family:var(--mono);font-size:.9em;color:var(--ink);width:max-content}
.rel-date{font-family:var(--mono);font-size:.85rem}
.rel-h{color:var(--ink)}
.shipped-foot{margin-top:var(--s4);font-size:.9rem;color:var(--fg-2)}
.shipped-foot a{font-weight:600}

/* also in the box: heading left, rows right, no empty quadrant */
/* also in the box: three rows, the words on the left and the thing itself on the
   right: real tina4-js code, the real skills command, the Code Viewer itself */
.also-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s6) var(--s12);align-items:center;
  padding:var(--s10) 0;border-top:1px solid var(--border);color:var(--ink)}
.also-row:last-child{border-bottom:1px solid var(--border)}
.also-name{font-weight:800;font-size:1.25rem}
.also-size{font-family:var(--mono);font-size:.78rem;font-weight:400;color:var(--fg-2);margin-left:var(--s2);
  background:var(--bg-mute);padding:2px 8px;border-radius:6px;vertical-align:2px}
.also-desc{color:var(--fg-2);font-size:.95rem;max-width:46ch;margin-top:var(--s2)}
.also-link{display:inline-flex;align-items:center;gap:6px;margin-top:var(--s4);color:var(--brand-text);font-weight:600;font-size:.92rem}
.also-link:hover{text-decoration:underline}
.also-code{margin:0;background:#0f0f1a;border-radius:12px;padding:var(--s6);font-family:var(--mono);font-size:.88rem;
  line-height:1.7;color:var(--code-t);white-space:pre;overflow-x:auto}
.also-cmd{display:flex;align-items:center;gap:var(--s2);font-family:var(--mono);font-size:1.15rem;color:var(--ink)}
.also-cmd .prompt{color:var(--brand-text);font-weight:700}
.also-shot{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--border);
  box-shadow:0 18px 48px rgba(20,20,32,.14)}
@media(max-width:860px){.also-row{grid-template-columns:1fr;gap:var(--s5)}}

/* closing + install */
.closing{position:relative;overflow:hidden}
/* Tina's five rings, large and faint behind the closing headline, each on its own
   slow spin (durations and directions are set per ring by the script) */
.closing-rings{position:absolute;left:50%;top:50%;width:min(1000px,140vw);aspect-ratio:1;
  transform:translate(-50%,-50%);opacity:.22;pointer-events:none;z-index:0}
.closing-rings svg{width:100%;height:100%;display:block}
.closing-rings .cring{transform-box:view-box;transform-origin:308.7976px 308.8681px;animation:cringSpin 90s linear infinite}
@keyframes cringSpin{to{transform:rotate(360deg)}}
.install{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);margin-top:var(--s10);text-align:left}
.install-os{position:relative;min-width:0}
.install-l{font-size:.85rem;color:rgba(255,255,255,.55);margin-bottom:var(--s2);min-height:22px}
.install-os .copy-btn{position:absolute;top:-4px;right:0}
.install .chip{height:calc(100% - 30px)}
.install .chip code{font-size:.8rem;white-space:normal;word-break:normal;overflow-wrap:normal}

/* grid children default to min-width:auto, so a long code line can push a 1fr
   track past the viewport; let them shrink and let the code scroll in its window */
.proof-steps > *,.ai-grid > *,.box-cols > *{min-width:0}

@media(max-width:860px){
  .stat-row{grid-template-columns:repeat(2,1fr)}
  .stat-strip .stat{padding:var(--s6) var(--s4);border-left:0;border-top:1px solid var(--border)}
  .stat-strip .stat:nth-child(-n+2){border-top:0}
  .stat-strip .stat:nth-child(odd){padding-left:0}
  .ai-grid,.box-cols,.install,.also .wrap{grid-template-columns:1fr}
  .spec-head{display:none}
  .spec-row{grid-template-columns:40px 1fr;row-gap:var(--s1)}
  .spec-desc,.spec-cmd,.spec-go{grid-column:2}
  .spec-port{display:none}
  .spec-go{text-align:left}
  .box-row{grid-template-columns:1fr;gap:var(--s1)}
  .shipped-row{grid-template-columns:1fr;gap:var(--s5)}
  .rel-link{grid-template-columns:auto 1fr;gap:var(--s1) var(--s3)}
  .rel-h{grid-column:1 / -1}
}

/* ---------- responsive ---------- */
@media(max-width:860px){
  .hero > .wrap{grid-template-columns:1fr;gap:var(--s8);text-align:left}
  .hero-node{min-height:260px;order:-1}
  .hero-robot{width:180px}
  .hero-bg{right:-20%;opacity:.4;width:120vw}
  .proof-step{grid-template-columns:1fr;gap:var(--s3)}
  .step-l{padding-top:0}
  .replay{margin-left:0}
  .proof-gets{grid-template-columns:1fr 1fr}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .features{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr);gap:var(--s6)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .section{padding:var(--s16) 0}
}
/* big screens: the hero scales with the viewport instead of sitting in a laptop-
   sized column. The copy stays in line with the header's logo; the robot's column
   takes the rest of the width, so it sits inside the network */
@media(min-width:1500px){
  .hero > .wrap,.hero .stat-row{max-width:none;
    padding-left:max(var(--s6), calc((100% - var(--max))/2 + var(--s6)));
    padding-right:max(var(--s6), calc((100% - var(--max))/4 + var(--s6)))}
  .hero-left{max-width:none}
  .slogan{font-size:clamp(4.6rem,1.6rem + 3.2vw,6.6rem)}
  .hero-desc{max-width:17em;font-size:clamp(1.3rem,.7rem + .6vw,1.6rem)}
  .hero-sub{font-size:1rem}
  .hero-cta .btn{padding:16px 28px;font-size:1.1rem}
  .hero-node{min-height:min(560px,60vh)}
  .hero-robot{width:min(88%,60vh,640px)}
  .boot{font-size:clamp(.92rem,.5rem + .45vw,1.15rem)}
}
/* tall big screens: the stat strip moves up into the bottom of the hero (the page
   script relocates it), filling the band that would otherwise sit empty */
.hero.has-stats{flex-direction:column;align-items:stretch}
.hero.has-stats > .wrap{flex:1;padding-top:var(--s10);padding-bottom:var(--s10)}
.hero .stat-strip{position:relative;z-index:2;background:rgba(15,26,58,.4);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border-top:1px solid rgba(255,255,255,.1);border-bottom:0}
.hero .stat-strip .stat{padding:var(--s6);border-left-color:rgba(255,255,255,.1)}
.hero .stat-strip .stat:first-child{padding-left:0}
.hero .stat-strip .stat-n{color:#fff;font-size:clamp(2rem,1rem + 1.2vw,2.8rem)}
.hero .stat-strip .stat-n.is-zero{color:var(--brand-2)}
.hero .stat-strip .stat-l{color:rgba(255,255,255,.55)}
@media(max-width:480px){
  .proof-gets{grid-template-columns:1fr}
  .tiles{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
}

/* ================= tablet pass (2026-10-16) =================
   601 to 860px: the stacked hero becomes one centred composition, with Tina
   sized to the screen rather than the phone's 180px */
@media(min-width:601px) and (max-width:860px){
  .hero > .wrap{padding-top:var(--s10);padding-bottom:var(--s12);gap:var(--s6);justify-items:center}
  .hero-node{min-height:clamp(260px,36vh,400px)}
  .hero-robot{width:clamp(220px,30vh,330px)}
  .hero-left{max-width:36em;text-align:center}
  .hero-desc{max-width:26em;margin-left:auto;margin-right:auto}
  .hero-cta{justify-content:center}
}

/* ================= phone pass (2026-10-16) =================
   Last in the sheet so it wins. Checked at 375px. */
@media(max-width:600px){
  /* hero: a bigger Tina, less padding, the two buttons side by side */
  .hero > .wrap{padding-top:var(--s8);padding-bottom:var(--s10)}
  /* Tina and her network scale with the screen height too, so a short phone
     still shows the headline and both buttons without scrolling */
  .hero-node{min-height:clamp(170px,34vh,270px)}
  .hero-robot{width:clamp(140px,27vh,220px)}
  .hero-cta{flex-wrap:nowrap;gap:var(--s2)}
  .hero-cta .btn{flex:1 1 auto;justify-content:center;padding:12px 14px;font-size:.95rem;white-space:nowrap}
  /* Ask Tina4 shrinks to a round icon, so it stops sitting on the content */
  /* the chat button is a round icon, and the panel takes the whole screen */
  .tp-chat{right:14px;bottom:14px}
  .tp-chat-btn{padding:12px;gap:0}
  .tp-chat-btn .tp-chat-label{display:none}
  .tp-chat-panel,.tp-chat.wide .tp-chat-panel{inset:0;width:100%;height:auto;max-height:none;border-radius:0;border:0}
  .tp-chat-expand{display:none}
  /* install comparison: Tina4's box fits its one package instead of a tall empty box */
  .dep-us .dep-pkgs{height:auto}
  .dep-pkgs{height:128px}
  /* the code window: no window dots, tighter tabs so all four fit, and long
     lines wrap instead of running off the edge */
  .proof-step .code-header .dot{display:none}
  .proof-step .code-tabs{margin-left:0;gap:0}
  .proof-step .code-tab{padding:4px 7px;font-size:.72rem}
  .proof-body{padding:var(--s5) var(--s4);font-size:.8rem;white-space:pre-wrap;overflow-wrap:anywhere}
  /* also in the box: the snippet wraps rather than scrolls */
  .also-code{font-size:.8rem;padding:var(--s5) var(--s4);white-space:pre-wrap;overflow-wrap:anywhere}
  .also-cmd{font-size:1rem}
  /* closing install boxes: the prompt stays beside its command */
  .install .chip .row{flex-wrap:nowrap;align-items:flex-start}
  .install .chip code{min-width:0}
  /* Tina's pop-up: the bubble sits above her head, clear of the screen edge */
  .peek-say{left:50%;top:14%;transform:translate(-50%,-100%)}
}
/* short phones (an iPhone SE is 568 to 667 tall): tighter still */
@media(max-width:600px) and (max-height:760px){
  .hero > .wrap{padding-top:var(--s5);padding-bottom:var(--s6);gap:var(--s4)}
  .hero-node{min-height:28vh}
  .hero-robot{width:24vh}
  .hero-desc{margin-top:var(--s4);font-size:1rem}
  .hero-cta{margin-top:var(--s5)}
  .hero-ask{margin-top:var(--s2)}
}
/* the narrowest phones (320px): slightly smaller hero buttons so both fit */
@media(max-width:360px){
  .hero-cta .btn{padding:11px 10px;font-size:.88rem;gap:6px}
  /* all four file tabs still fit on a 320px screen */
  .proof-step .code-tab{padding:4px 5px;font-size:.66rem}
}
/* Ask Tina4 steps aside while the hero's own buttons are on screen (the page
   script sets this class), so it never covers them; it is back once you scroll */
body.cta-visible .tp-chat:not(.open) .tp-chat-btn{opacity:0;pointer-events:none;transform:translateY(8px)}

/* ---------- docs search ----------
   The modal is tina4press's own (markup and rules copied from the docs build into
   search.css by scripts/build-home.mjs). Its rules read tina4press's variables;
   here they take the page's tokens, so it follows this page's light and dark */
.tp-search-modal{
  --tp-bg:var(--bg); --tp-bg-soft:var(--bg-soft); --tp-bg-mute:var(--bg-mute);
  --tp-border:var(--border); --tp-border-2:var(--border-2);
  --tp-fg:var(--ink); --tp-fg-2:var(--fg-2); --tp-fg-3:var(--fg-2);
  --tp-brand:var(--brand-text); --tp-sel:rgba(47,95,224,.18); --tp-shadow:260 40% 14%;
  --tp-font:inherit; --tp-mono:var(--mono);
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
}
:root[data-theme="dark"] .tp-search-modal{--tp-sel:#3d4470;--tp-shadow:260 60% 3%}
.tp-search-modal kbd{font-family:var(--mono);font-size:.85em;padding:1px 6px;border-radius:5px;
  border:1px solid var(--border-2);background:var(--bg-soft);color:var(--fg-2)}
.tp-sr{color:inherit}