/* Page CSS: only what sits inside a visual and the kit lacks (taste-skill, system.md),
   plus one --p-h per card group. Everything else is the kit's system.css. */

/* hero: the terminal is the window in the lit frame; it keeps its own width (fit 280-560) */
.hero--centred .hero__window > .hero__term { width: min(600px, calc(100% - 2 * var(--s-6))); }
@media (max-width: 639px) {
  .hero--centred .hero__window > .hero__term { width: calc(100% - 2 * var(--s-4)); }
}

/* app-frame (sections-library.md, app-frame: the whole recipe) */
.app.ui { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin-top: var(--s-7); background: var(--u-bg); border: 1px solid var(--u-border); border-radius: var(--u-r); box-shadow: var(--u-shadow); }
.app > .app__pane { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.app > .app__pane + .app__pane { border-left: 1px solid var(--u-line); }
.app > .app__pane > .ui-panel { width: 100%; border: 0; border-radius: 0; box-shadow: none; }
.app > .app__pane::after { content: ""; position: absolute; inset: auto 0 0 0; height: 64px; background: linear-gradient(transparent, var(--u-bg)); pointer-events: none; }
@media (min-width: 1024px) and (max-width: 1279px) { .app.ui { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
@media (max-width: 1023px) {
  .app.ui { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .app > .app__pane--list { max-height: 252px; }
  .app > .app__pane--list::after { display: none; }
  .app .ui-win__side { display: none; }
  .app .ui-win__body { grid-template-columns: minmax(0, 1fr); }
  .app > .app__pane + .app__pane { border-left: 0; border-top: 1px solid var(--u-line); }
}
@media (max-width: 639px) {
  .app.ui { grid-template-rows: minmax(0, 1fr); }
  .app > .app__pane--list { display: none; }
  .app > .app__pane + .app__pane { border-top: 0; }
}

/* the 2x2 of checks: one panel height for the group */
#checks .panel { --p-h: 336px; }
@media (min-width: 1024px) and (max-width: 1279px) { #checks .panel { --p-h: 244px; } }
@media (max-width: 639px) { #checks .panel { --p-h: 160px; } }

/* comparison-table: rows of the page grid, each closed by a 1px rule */
.cmp { margin-top: var(--s-7); }
.cmp__row { align-items: center; min-height: 64px; padding-block: var(--s-3); border-bottom: 1px solid var(--line); }
.cmp__head { font-weight: 500; color: var(--ink); background: var(--g-main); }
.cmp__feature { color: var(--ink); }
.cmp__cell { color: var(--ink); }
.cmp__yes { width: 20px; height: 20px; fill: none; stroke: var(--action); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.cmp__no { color: var(--muted); }
@media (max-width: 1023px) {
  .cmp__head { display: none; }
  .cmp__row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-2); padding-block: var(--s-4); }
  .cmp__row > .cmp__feature { grid-column: 1 / -1; font-weight: 500; }
  .cmp__row > .cmp__cell { grid-column: auto; display: flex; gap: var(--s-2); align-items: center; }
  .cmp__cell::before { content: attr(data-tool) ":"; color: var(--muted); }
}

/* code inside running text */
.t-lead code, .rows code { font-family: var(--font-mono); font-size: .9em; }

/* hero: the dealt arc mark inline in the h1, in the accent */
.hero__mark { width: .8em; height: .8em; vertical-align: -.06em; }
.mark { background: linear-gradient(135deg, var(--cyan, #5fd4ff), var(--accent)); }

/* ---------------------------------------------------------------- the blue system
   The lit ground (card panels, the hero frame, the footer slab) is electric blue with a cyan light,
   so the product UI sits on colour; the footer's button turns white on it. */
html[data-ground="sky"] { --ground-bg: #2f62d9; --ground-surface: #3a6ce3; --ground-ink: #ffffff; --ground-muted: #e3ebff; --ground-accent: #5fd4ff; }
html[data-tone="dark"] .footer--statement { --action: #ffffff; --action-ink: #070b18; }
:root { --cyan: #5fd4ff; --blue: #2a64f6; --glow: color-mix(in oklab, var(--blue) 55%, transparent); }

/* type: Instrument Serif for the display lines, set large and loose, with italic accents; Instrument
   Sans carries the text and the small headings, JetBrains Mono the code */
h1, h2, h3 { text-wrap: balance; }
body { font-feature-settings: "kern", "liga", "ss01"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.003em; }
:root { --t-h2: clamp(40px, 2.6vw + 22px, 64px); --t-h1: clamp(52px, 4.6vw + 22px, 104px); --ly-h1: var(--t-h1); }
h1, h2 { line-height: 1.02; }
h2 { font-size: var(--t-h2); }
h1 em, h2 em, .close__word { font-style: italic; letter-spacing: -0.01em; }
h2 em {
  background: linear-gradient(100deg, #9fc0ff 0%, var(--cyan) 55%, #8aa6ff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em;
}
h2 .muted { font-style: italic; }
h3, .card h3 { font-family: var(--font-text); font-weight: 550; letter-spacing: -0.018em; }
.t-lead, .hero__lead { letter-spacing: -0.008em; }
.pill, .nav, .btn, .link { letter-spacing: -0.006em; }
code, kbd, .ui-term, .ui-pipe__log { font-feature-settings: "calt" 0, "liga" 0; }
.hero--centred h1 {
  font-size: var(--t-h1); line-height: .98;
  background: linear-gradient(180deg, #ffffff 30%, #a9bde8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero--centred h1 .hero__mark { background: linear-gradient(135deg, var(--cyan), var(--blue)); }
.hero__hl {
  font-style: italic; padding-right: .08em;
  background: linear-gradient(100deg, #8fb4ff 0%, var(--cyan) 45%, #6f8dff 90%) 0 0 / 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
h2 .muted { color: color-mix(in oklab, var(--muted) 85%, var(--blue)); }
.close__word {
  background: linear-gradient(180deg, #ffffff, color-mix(in oklab, #ffffff 55%, var(--ground-bg)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* the news pill: a light runs round its border */
@property --pill-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.hero--centred .pill {
  position: relative; border-color: transparent; isolation: isolate;
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    conic-gradient(from var(--pill-a), color-mix(in oklab, var(--ink) 14%, transparent) 0 70%, var(--cyan) 82%, var(--blue) 90%, color-mix(in oklab, var(--ink) 14%, transparent)) border-box;
  border: 1px solid transparent;
  transition: transform .25s var(--ease);
}
.hero--centred .pill:hover { transform: translateY(-1px); }

/* buttons: pills built from light. The primary is a lit gradient with a top highlight, a dark
   bottom lip and stacked soft shadows that rise on hover; the secondary is frosted glass. */
.btn {
  --r-btn: 999px; border-radius: 999px; font-weight: 550;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s cubic-bezier(.2, .8, .2, 1), filter .25s ease, background-color .25s ease, border-color .25s ease;
}
.btn .m-arrow { transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.btn:hover .m-arrow { transform: translateX(3px); }
.btn--primary { position: relative; overflow: hidden; isolation: isolate; }
html main .btn--primary, .nav .btn--primary {
  background: linear-gradient(180deg, #5b8cff 0%, #3a70fb 45%, #2459ea 100%);
  color: #fff; border: 0; text-shadow: 0 1px 1px rgb(6 22 80 / .35);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .38), inset 0 -1px 0 rgb(8 28 110 / .45),
    0 0 0 1px rgb(20 60 190 / .9),
    0 1px 2px rgb(2 6 24 / .6), 0 4px 10px -2px rgb(42 100 246 / .45), 0 16px 36px -14px rgb(42 100 246 / .7);
}
html main .btn--primary:hover, .nav .btn--primary:hover {
  background: linear-gradient(180deg, #5b8cff 0%, #3a70fb 45%, #2459ea 100%);
  transform: translateY(-2px); filter: brightness(1.07) saturate(1.05);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .45), inset 0 -1px 0 rgb(8 28 110 / .45),
    0 0 0 1px rgb(40 90 230 / .95),
    0 2px 4px rgb(2 6 24 / .55), 0 10px 22px -6px rgb(42 100 246 / .55), 0 26px 56px -18px rgb(95 212 255 / .5);
}
html main .btn--primary:active, .nav .btn--primary:active {
  transform: translateY(0) scale(.975); filter: brightness(.96);
  box-shadow: inset 0 2px 4px rgb(6 22 80 / .45), 0 0 0 1px rgb(20 60 190 / .9), 0 1px 2px rgb(2 6 24 / .5);
}
.btn--secondary, html main .btn--secondary {
  background: linear-gradient(180deg, rgb(255 255 255 / .09), rgb(255 255 255 / .025));
  color: var(--ink); border: 1px solid rgb(255 255 255 / .13);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), 0 1px 2px rgb(0 0 0 / .45), 0 10px 28px -14px rgb(0 0 0 / .8);
}
.btn--secondary:hover, html main .btn--secondary:hover {
  background: linear-gradient(180deg, rgb(255 255 255 / .14), rgb(255 255 255 / .05));
  border-color: rgb(159 192 255 / .38); transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), 0 2px 4px rgb(0 0 0 / .4), 0 18px 40px -16px rgb(42 100 246 / .55);
}
.btn--secondary:active { transform: translateY(0) scale(.975); }
@media (min-width: 1024px) { .nav .btn { height: 40px; padding-inline: 18px; font-size: 14px; } }
/* on the blue footer slab the action turns to porcelain */
html .footer--statement .btn--primary {
  background: linear-gradient(180deg, #ffffff 0%, #eef3ff 60%, #dde7ff 100%); color: #0b1a4d; text-shadow: none;
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgb(30 70 180 / .18), 0 0 0 1px rgb(255 255 255 / .6),
    0 2px 4px rgb(6 22 80 / .25), 0 18px 40px -16px rgb(6 22 80 / .6);
}
html .footer--statement .btn--primary:hover { transform: translateY(-2px); background: linear-gradient(180deg, #ffffff, #e6eeff); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px #fff, 0 4px 8px rgb(6 22 80 / .25), 0 26px 50px -18px rgb(6 22 80 / .7); }
@media (prefers-reduced-motion: reduce) { .btn, .btn:hover, .btn:active { transform: none !important; } }
.btn--primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .28) 50%, transparent 70%) -150% 0 / 60% 100% no-repeat;
}
.btn--primary:hover::after { background-position: 250% 0; transition: background-position .7s var(--ease); }

/* cards: the border lights up blue and the top edge catches the light */
#checks .card { transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease); }
#checks .card:hover {
  border-color: color-mix(in oklab, var(--blue) 55%, transparent);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--blue) 25%, transparent), 0 24px 60px -30px var(--glow);
}
#checks .card::before {
  content: ""; position: absolute; left: 12%; right: 12%; top: 0; height: 1px; pointer-events: none; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent); opacity: 0; transition: opacity .3s var(--ease);
}
#checks .card:hover::before { opacity: 1; }
#checks .card:hover h3 { color: #ffffff; }

/* the app frame: a blue rim and a light along its top */
.app.ui { position: relative; box-shadow: 0 0 0 1px color-mix(in oklab, var(--blue) 22%, transparent), 0 40px 120px -50px var(--glow); }
.app.ui::before {
  content: ""; position: absolute; left: 20%; right: 20%; top: -1px; height: 1px; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
}

/* comparison: Sling's column is lit, rows answer the pointer */
.cmp__row:not(.cmp__head) { transition: background-color .2s var(--ease); }
.cmp__row:not(.cmp__head):hover { background: color-mix(in oklab, var(--blue) 7%, transparent); }
.cmp__row > :nth-child(2) { position: relative; color: #ffffff; font-weight: 500; }
@media (min-width: 1024px) {
  .cmp__row > :nth-child(2)::before {
    content: ""; position: absolute; inset: calc(-1 * var(--s-3) - 1px) calc(-1 * var(--s-3)); z-index: -1;
    background: color-mix(in oklab, var(--blue) 12%, transparent);
    border-inline: 1px solid color-mix(in oklab, var(--blue) 30%, transparent);
  }
  .cmp__head > :nth-child(2)::before { border-top: 1px solid var(--cyan); border-radius: var(--r-sm) var(--r-sm) 0 0; }
}
.cmp { isolation: isolate; }
.cmp__yes { stroke: var(--cyan); }

/* FAQ: a blue bar grows beside the question under the pointer */
.faq__item { position: relative; transition: padding-left .25s var(--ease); }
.faq__item::before {
  content: ""; position: absolute; left: 0; top: var(--s-5); bottom: var(--s-5); width: 2px; border-radius: 2px;
  background: linear-gradient(var(--cyan), var(--blue)); transform: scaleY(0); transform-origin: top; transition: transform .3s var(--ease);
}
.faq__item:first-child::before { top: 0; }
.faq__item:hover { padding-left: var(--s-4); }
.faq__item:hover::before { transform: scaleY(1); }

/* rows: the value slides a touch toward its name */
.rows > li { transition: color .2s var(--ease); }
.rows > li:hover .rows__name { color: var(--cyan); }
#how .rows > li:hover .rows__name, #how .how__facts li:hover { color: var(--cyan); }

/* the deploy word in the logo mark breathes once on hover */
.nav__logo .mark { transition: transform .4s var(--ease); }
.nav__logo:hover .mark { transform: rotate(-8deg) scale(1.08); }

/* motion that runs on its own rests under reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .hero--centred .pill { animation: pill-turn 6s linear infinite; }
  .hero__hl { animation: hl-flow 8s ease-in-out infinite alternate; }
}
@keyframes pill-turn { to { --pill-a: 360deg; } }
@keyframes hl-flow { to { background-position: 100% 0; } }
@media (prefers-reduced-motion: reduce) {
  .btn--primary::after, #checks .card, .faq__item, .faq__item::before { transition: none; }
}

/* the hero's terminal is a dark window standing on the blue light */
.hero__term { --fx-bg: #0a1122; --fx-surface: #111a33; --fx-ink: #e8eefc; --fx-muted: #8f9dc2; --fx-accent: #5fd4ff; }
.hero__term .ui { box-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 30px 80px -24px rgb(3 8 30 / .7); }

/* one continuous lit column for Sling: cells fill their row's height */
.cmp__row { align-items: stretch; padding-block: 0; }
.cmp__row > * { display: flex; align-items: center; padding-block: var(--s-3); }
@media (min-width: 1024px) {
  .cmp__row > :nth-child(2)::before { inset: 0 calc(-1 * var(--s-3)) -1px; }
}
@media (max-width: 1023px) { .cmp__row { padding-block: var(--s-3); } .cmp__row > * { padding-block: 0; } }

/* #deploys wears bg-mist, whose section rule (display: grid; align-content: center) outweighs the
   screen system's column: the .wrap then shrinks to its heading and the .fill app frame gets 0px.
   Put the column back so the frame takes what the screen leaves under the heading. */
main > #deploys.section { display: flex; flex-direction: column; align-content: normal; }
main > #deploys.section > .wrap { flex: 1 1 auto; min-height: 0; }
@media (max-width: 1023px) { #deploys .app.fill { min-height: 420px; } }
/* the grounds' own min-height (backgrounds.css) also outweighs the system's one-screen minimum below 1280 */
@media (min-width: 640px) and (max-width: 1279px) { main > :is(#deploys, #questions).section { min-height: 100vh; min-height: 100svh; } }
@media (max-width: 639px) { main > :is(#deploys, #questions).section { min-height: 100vh; min-height: 100lvh; } }
/* and its padding (1.5 x --section) replaces the rhythm every other section keeps */
main > #deploys.section { padding-block: var(--padt) var(--padb); }

/* narrow: the frame still fills its screen, so the running step's log fills the panel under the steps */
@media (max-width: 1023px) {
  #deploys .ui-pipe__log {
    display: block; margin: 0 12px 12px; padding: 10px 12px; border-radius: var(--u-r2);
    background: var(--u-fill); box-shadow: inset 0 0 0 1px var(--u-line);
    font: 11px/18px var(--ui-mono, ui-monospace, monospace); color: var(--u-text-2);
  }
}

/* How: stays on the page's dark ground (no colour swap on scroll); the diagram sits in a lit glass panel */
#how { position: relative; isolation: isolate; overflow-x: clip; }
#how::before {
  content: ""; position: absolute; inset: 10% 0 auto 40%; height: 70%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--blue) 26%, transparent), transparent 70%); filter: blur(20px);
}
#how .frame {
  background: linear-gradient(180deg, rgb(255 255 255 / .05), rgb(255 255 255 / .015)), #0b1226;
  border: 1px solid rgb(255 255 255 / .09); border-radius: 20px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 1px 2px rgb(0 0 0 / .5), 0 30px 80px -30px rgb(42 100 246 / .45);
}
#how .how__facts li { transition: color .25s var(--ease), transform .35s cubic-bezier(.2, .8, .2, 1); }
#how .how__facts li:hover { transform: translateX(4px); }

/* a heading whose letters are split into moving spans can't keep a clipped gradient: the accent is solid */
.mo-la__type em, .mo-la__type em * { background: none; color: var(--cyan); -webkit-text-fill-color: currentColor; }
/* on the blue footer slab the accent turns to frost, so it reads against the blue */
.footer--statement h2 em { background-image: linear-gradient(100deg, #ffffff, #cfe0ff 60%, #a8f0ff); }
/* the wordmark in the bar is the serif, set a size up */
@media (min-width: 640px) { .nav__logo { font-size: 24px; letter-spacing: -0.01em; } }
main .btn-row .btn { padding-inline: 22px; }
main .btn-row .btn--secondary, main .btn-row .btn--secondary:hover { text-decoration: none; }

/* GitHub's mark in the main action, sized to the label's cap height */
.btn .gh-mark { width: 1.15em; height: 1.15em; flex: none; margin-inline: -.1em .05em; filter: drop-shadow(0 1px 1px rgb(6 22 80 / .3)); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.btn:hover .gh-mark { transform: rotate(-8deg) scale(1.08); }
.footer--statement .btn .gh-mark { filter: none; }