/* ==========================================================================
   DIRECTION E5 — "Orbit 5"

   Built after studying all eight pages of noroview.com, which the owner named
   as the look they prefer. Structure, rhythm and craft are taken; nothing else
   is. No image of theirs, no line of their CSS, and their accent is not reused.

   What that site actually does, measured rather than guessed:

     - a base of #030305 — not grey-black, a blue-black
     - text hierarchy built from OPACITY of one ink colour (100/66/42%), not
       from three separate greys. This is the single most transferable idea
       here: it guarantees the greys are always in tune with the background
     - hairlines at 9% white, and a "strong" variant at 18%
     - every surface is one card recipe: 2.5% white fill, 9% border, a 2px
       backdrop blur, and an inset highlight on the BOTTOM edge — unusual, and
       it is what makes their panels look like glass lit from below
     - a pale blue "starlight" accent rather than a saturated brand colour
     - white buttons with near-black text
     - a galaxy image behind the home hero only, plus a site-wide star canvas

   TWO DELIBERATE DEPARTURES, both to protect properties this site already has:

     1. Their starfield is a <canvas> driven by JavaScript. Ours is drawn with
        layered radial-gradients — no script, so the site keeps its zero-JS
        property and its native <details> FAQ.
     2. Their nebula is a WebP download. Ours is gradients, so the page still
        makes zero requests beyond its own HTML and CSS.

   The cost of those departures is honest: less organic than a real photograph.
   The gain is a hero that weighs nothing and cannot fail to load.

   Layered over site.css — plus ONE theme-gated markup block (see below).

   ORBIT 5 — comet rebuilt against the owner's model image:
   elongated core instead of a sphere, a thick coma along the drawn
   red line, a far larger bloom, the mid-tail knot — plus Orbit's
   original colour nebula back and stars in varied sizes.
   Generated by tools/gen_orbit2_bg.php — edit THERE, not here.
   ========================================================================== */

:root {
  --bg:          #030305;
  --bg-elev:     #0a0a10;
  --bg-elev-2:   #101018;
  --bg-inset:    #050508;

  --line:        hsl(0 0% 100% / .09);
  --line-strong: hsl(0 0% 100% / .18);

  --text:        #f4f5f7;
  --text-dim:    rgb(244 245 247 / .66);
  /* 🔴 .42 MEASURED 3.74:1 — under the 4.5 floor for normal text, on eight
     distinct elements of the homepage alone: the risk disclosure, the footer
     registration line, every footer column title, the eyebrows and the
     screenshot captions. Raised to .55, which measures ~5.6. Legal small print
     nobody can read is the worst place in the site to save contrast.
     ⚠️ EDIT HERE, NOT IN theme-e5.css — that file is GENERATED from this one by
     tools/gen_orbit2_bg.php and any change to it is erased on the next run. */
  --text-faint:  rgb(244 245 247 / .55);

  /* Starlight, not brand paint — and ours, not theirs. Their star is #9db8ff,
     a violet-leaning blue. This is the same idea derived from the sky blue the
     site already uses (#38bdf8), so it lands cooler and stays in our family. */
  --accent:      #a9cdf5;
  --accent-hi:   #cfe4fb;

  /* 🔴 --accent-dim IS A SURFACE COLOUR, NOT A TEXT COLOUR. Measured 2026-08-16
     across all 51 public pages: it is a fill, a border or a gradient stop in
     eight rules and passes there, because no contrast floor applies to those.
     In the one rule that made it TEXT (.shot__hint, "Click to enlarge" under
     every screenshot) it measured 2.57:1 against --bg-elev-2 — 195 elements on
     25 pages. Guard 18 was green throughout because its text-token list was
     hand-written and this token was not on it. Use --accent-quiet for a quiet
     accent that is read, and leave this one for things that are looked at. */
  --accent-dim:  #3a5878;

  /* A quiet accent that is still TEXT. .65 measured 5.51:1 on --bg and 5.39:1
     on --bg-elev-2, so it clears the 4.5 floor while staying a shade softer
     than the caption it sits inside (5.82:1) — a hint must not outshine the
     line it annotates. Same alpha-on-accent shape as --star-soft below. */
  --accent-quiet: rgb(169 205 245 / .65);
  --star-soft:   rgb(169 205 245 / .14);

  --card-fill:   hsl(0 0% 100% / .025);
  --card-lit:    inset 0 -1px 0 0 hsl(0 0% 100% / .12);

  --radius:      10px;
  --radius-sm:   8px;
  --wrap:        1180px;

  --shadow:    0 20px 50px -24px rgb(0 0 0 / .7);
  --shadow-lg: 0 30px 80px -28px rgb(0 0 0 / .85);

  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

body {
  font-size: 16px;
  line-height: 1.6;
  position: relative;
}

/* --- the starfield, in CSS ------------------------------------------------ */
/* Three tiles at different sizes and opacities. Different tile dimensions mean
   the three patterns only realign every few thousand pixels, so the repeat is
   not readable at any scroll position. Fixed, so it sits still while the page
   moves over it — the thing that makes it read as depth rather than wallpaper. */

body::before {
  content: '';
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(2.6px 2.6px at 17% 23%,  rgb(255 255 255 / .9),  transparent 100%),
    radial-gradient(1px 1px     at 62% 11%,  rgb(169 205 245 / .8),  transparent 100%),
    radial-gradient(1.5px 1.5px at 84% 47%,  rgb(255 255 255 / .6),  transparent 100%),
    radial-gradient(3.2px 3.2px at 33% 71%,  rgb(255 255 255 / .5),  transparent 100%),
    radial-gradient(0.9px 0.9px at 8%  62%,  rgb(169 205 245 / .55), transparent 100%),
    radial-gradient(1.8px 1.8px at 91% 82%,  rgb(255 255 255 / .65), transparent 100%),
    radial-gradient(1.1px 1.1px at 47% 38%,  rgb(255 255 255 / .45), transparent 100%),
    radial-gradient(2.2px 2.2px at 74% 66%,  rgb(169 205 245 / .6),  transparent 100%),
    radial-gradient(0.8px 0.8px at 28% 12%,  rgb(255 255 255 / .5),  transparent 100%),
    radial-gradient(1.4px 1.4px at 55% 87%,  rgb(207 228 251 / .55), transparent 100%);
  background-size: 620px 520px, 430px 380px, 760px 610px, 940px 860px,
                   680px 590px, 520px 460px, 820px 700px, 890px 760px,
                   380px 340px, 570px 500px;
  opacity: .55;
}

/* Everything the page actually contains sits above the stars. The header
   stays sticky at z-index 50 — v1 of this rule flattened it to relative
   (killing stick-on-scroll) and v2 left it at z-index 1, equal to the
   content, so scrolling copy painted OVER the bar. */
.site-header { position: sticky; z-index: 50; }
main, .site-footer, .theme-switch { position: relative; z-index: 1; }

/* --- the comet, v5: rebuilt against the owner's model image ---------------- */
/* Same flight path as Orbit 4 ("the position is good"). What changed:
     - the head is an ELONGATED white-hot core, not a sphere;
     - a thick luminous coma wraps the head and the first stretch of tail —
       the red line the owner drew — instead of a thin rim on a ball;
     - the ambient bloom is much larger and brighter;
     - the tail runs longer and carries the model's faint mid-tail knot. */
@keyframes comet-fly {
  0%   { transform: translate3d(640px, -300px, -950px); opacity: 0; }
  8%   { opacity: 1; }
  62%  { opacity: 1; }
  86%  { transform: translate3d(-760px, 150px, 260px); opacity: 0; }
  100% { transform: translate3d(-760px, 150px, 260px); opacity: 0; }
}
.comet {
  position: absolute; top: 0; left: 0; right: 0; height: 160vh;
  z-index: 0;
  pointer-events: none;
  display: flex; justify-content: center;
  /* CLIP, not hidden, and only on x.
     The flight path runs from +640px to -760px either side of the scene's
     centre, so at a 1366-wide viewport the comet reached page x 1707 and
     the document scrolled sideways by 341px — a real horizontal scrollbar
     at the commonest laptop width. Proven by control rather than inferred:
     hiding this one element took scrollWidth from 1707 to exactly 1366,
     and hiding every other child of body changed it by zero.
     `overflow: hidden` would also clip the TOP, where the path begins at
     y -300px while the comet is still at opacity 0. `overflow-x: hidden`
     is not honoured on its own — the other axis is forced to auto and a
     scroll container appears. `clip` has neither problem, and this element
     spans left:0 to right:0, so it clips exactly at the viewport edge. */
  overflow-x: clip;
  mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 92%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 92%);
}
.comet__scene {
  position: relative;
  width: min(1100px, 96vw); height: 100vh;
  perspective: 1000px;
  perspective-origin: 50% 40%;
}
.comet__track {
  position: absolute; left: 50%; top: 34%;
  transform-style: preserve-3d;
  animation: comet-fly 17s linear infinite;
  will-change: transform, opacity;
}
.comet__track > i, .comet__track > b { position: absolute; }

/* Every remaining glow is a gradient that reaches zero alpha and is then
   blurred again — none of them has a rim, an outline or a box-shadow,
   because a shadow at a fixed radius is precisely what draws a ring. */

/* a soft bloom sitting on the nucleus */
.comet__head {
  left: -60px; top: -34px; width: 150px; height: 68px;
  transform-origin: 60px 34px;
  transform: rotate(-18deg);
  border-radius: 50%;
  background: radial-gradient(closest-side at 40% 50%, rgb(255 255 255 / .55), rgb(207 228 251 / .18) 45%, transparent 75%);
  filter: blur(9px);
}
/* the coma — ambient light around head and tail base, wide and edgeless */
.comet__coma {
  left: -110px; top: -70px; width: 380px; height: 140px;
  transform-origin: 110px 70px;
  transform: rotate(-18deg);
  border-radius: 50%;
  background: radial-gradient(closest-side at 28% 50%, rgb(207 228 251 / .26), rgb(169 205 245 / .1) 48%, transparent 76%);
  filter: blur(20px);
}
/* the ambient bloom — far larger and brighter than v4's */
.comet__halo {
  left: -290px; top: -290px; width: 580px; height: 580px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(207 228 251 / .28), rgb(169 205 245 / .12) 34%, rgb(169 205 245 / .04) 55%, transparent 70%);
  filter: blur(14px);
}
/* THE FIX (the owner circled the head): one spindle, nose to vanishing
   tip. The :not() keeps this off the sheath element, which carries both
   classes — and it means neither rule can overwrite the other's
   background, whatever order they end up in. */
.comet__tail:not(.comet__tail--soft) {
  left: -34px; top: -32px; width: 900px; height: 64px;
  transform-origin: 34px 32px; transform: rotate(-18deg);
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='900'%20height='64'%20viewBox='0%200%20900%2064'%3E%3Cdefs%3E%3ClinearGradient%20id='g'%20x1='0'%20y1='0'%20x2='1'%20y2='0'%3E%3Cstop%20offset='0'%20stop-color='%23ffffff'%20stop-opacity='.85'/%3E%3Cstop%20offset='.03'%20stop-color='%23ffffff'%20stop-opacity='1'/%3E%3Cstop%20offset='.08'%20stop-color='%23f6faff'%20stop-opacity='.92'/%3E%3Cstop%20offset='.16'%20stop-color='%23e8f1ff'%20stop-opacity='.66'/%3E%3Cstop%20offset='.28'%20stop-color='%23cfe4fb'%20stop-opacity='.42'/%3E%3Cstop%20offset='.44'%20stop-color='%23a9cdf5'%20stop-opacity='.26'/%3E%3Cstop%20offset='.62'%20stop-color='%23a9cdf5'%20stop-opacity='.16'/%3E%3Cstop%20offset='.8'%20stop-color='%23a9cdf5'%20stop-opacity='.09'/%3E%3Cstop%20offset='.93'%20stop-color='%23a9cdf5'%20stop-opacity='.04'/%3E%3Cstop%20offset='1'%20stop-color='%23a9cdf5'%20stop-opacity='0'/%3E%3C/linearGradient%3E%3Cfilter%20id='aura'%20x='-4%25'%20y='-260%25'%20width='108%25'%20height='620%25'%3E%3CfeGaussianBlur%20stdDeviation='7'/%3E%3C/filter%3E%3Cfilter%20id='core'%20x='-4%25'%20y='-160%25'%20width='108%25'%20height='420%25'%3E%3CfeGaussianBlur%20stdDeviation='1.2'/%3E%3C/filter%3E%3Cfilter%20id='knot'%20x='-60%25'%20y='-320%25'%20width='220%25'%20height='740%25'%3E%3CfeGaussianBlur%20stdDeviation='5'/%3E%3C/filter%3E%3C/defs%3E%3Cpath%20d='M8,32C8,20%2026,17%2052,17.2C120,18.5%20190,24%20260,27.6C420,30.3%20620,31.1%20898,31.6L898,32.4C620,32.9%20420,33.7%20260,36.4C190,40%20120,45.5%2052,46.8C26,47%208,44%208,32Z'%20fill='url(%23g)'%20filter='url(%23aura)'%20opacity='.6'/%3E%3Cellipse%20cx='500'%20cy='32'%20rx='72'%20ry='3.5'%20fill='%23cfe4fb'%20fill-opacity='.5'%20filter='url(%23knot)'/%3E%3Cpath%20d='M8,32C8,20%2026,17%2052,17.2C120,18.5%20190,24%20260,27.6C420,30.3%20620,31.1%20898,31.6L898,32.4C620,32.9%20420,33.7%20260,36.4C190,40%20120,45.5%2052,46.8C26,47%208,44%208,32Z'%20fill='url(%23g)'%20filter='url(%23core)'/%3E%3Cellipse%20cx='34'%20cy='32'%20rx='20'%20ry='8.5'%20fill='%23ffffff'%20fill-opacity='.9'%20filter='url(%23core)'/%3E%3C/svg%3E") 0 0 / 900px 64px no-repeat;
}
/* a broad, very faint wash along the flight line — 28px of blur at 15%
   alpha, so its rounded cap cannot resolve into an edge */
.comet__tail--soft {
  left: 0; top: -50px; width: 640px; height: 100px;
  transform-origin: 0 50px; transform: rotate(-18deg);
  border-radius: 999px;
  filter: blur(28px);
  background: linear-gradient(90deg, rgb(207 228 251 / .15), rgb(169 205 245 / .06) 45%, transparent 88%);
}
.comet__track > b { border-radius: 50%; background: #e8f1ff; }
.comet__track > b:nth-of-type(1) { left: 57.1px; top: -22.7px; width: 3.5px; height: 3.5px; opacity: 0.21; }
.comet__track > b:nth-of-type(2) { left: 133.1px; top: -50.3px; width: 3.2px; height: 3.2px; opacity: 0.48; }
.comet__track > b:nth-of-type(3) { left: 209.2px; top: -68.9px; width: 3.1px; height: 3.1px; opacity: 0.36; }
.comet__track > b:nth-of-type(4) { left: 285.3px; top: -91.2px; width: 2.9px; height: 2.9px; opacity: 0.45; }
.comet__track > b:nth-of-type(5) { left: 361.4px; top: -113.7px; width: 2.8px; height: 2.8px; opacity: 0.53; }
.comet__track > b:nth-of-type(6) { left: 437.5px; top: -142.5px; width: 1.3px; height: 1.3px; opacity: 0.20; }
.comet__track > b:nth-of-type(7) { left: 513.6px; top: -164.4px; width: 2.6px; height: 2.6px; opacity: 0.49; }
.comet__track > b:nth-of-type(8) { left: 589.7px; top: -197.6px; width: 1.7px; height: 1.7px; opacity: 0.21; }
.comet__track > b:nth-of-type(9) { left: 665.7px; top: -216.2px; width: 3.1px; height: 3.1px; opacity: 0.41; }
.comet__track > b:nth-of-type(10) { left: 741.8px; top: -240.7px; width: 3.2px; height: 3.2px; opacity: 0.49; }

@keyframes comet-fly-2 {
  0%   { transform: translate3d(420px, -140px, -700px) rotate(-16deg); opacity: 0; }
  6%   { opacity: .8; }
  40%  { opacity: .8; }
  52%  { transform: translate3d(-680px, 210px, 140px) rotate(-16deg); opacity: 0; }
  100% { transform: translate3d(-680px, 210px, 140px) rotate(-16deg); opacity: 0; }
}
.comet__scene::after {
  content: ''; position: absolute; left: 62%; top: 6vh;
  width: 300px; height: 2.5px; border-radius: 999px;
  background: linear-gradient(90deg, rgb(255 255 255 / .9), rgb(207 228 251 / .45) 18%, rgb(169 205 245 / .15) 55%, transparent 92%);
  filter: drop-shadow(0 0 5px rgb(169 205 245 / .5));
  transform-origin: 0 50%;
  opacity: 0;
  animation: comet-fly-2 24s linear infinite;
  animation-delay: -9s;
  will-change: transform, opacity;
}
@media (max-width: 880px) {
  .comet { display: none; }
}

/* --- type ----------------------------------------------------------------- */

h1, h2, h3, h4 { font-weight: 640; }
h1 { font-size: clamp(36px, 4.7vw, 56px); font-weight: 660; letter-spacing: -.022em; line-height: 1.16; }
h2 { font-size: clamp(25px, 3.2vw, 38px); letter-spacing: -.018em; line-height: 1.2;  font-weight: 600; }
h3 { font-size: clamp(16px, 1.7vw, 19px); letter-spacing: -.014em; font-weight: 620; }
h4 { font-size: 16px; }

::selection { background: rgb(169 205 245 / .28); }

.lede { font-size: clamp(16.5px, 1.5vw, 18px); color: var(--text-dim); max-width: 62ch; }
.prose { color: var(--text-dim); max-width: 70ch; }

/* Their section labels are tracked-out caps in the faint ink. */
.eyebrow {
  font-size: 11px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 22px;
}
.eyebrow::before { width: 18px; background: var(--accent); opacity: .8; }

/* --- buttons -------------------------------------------------------------- */

.btn {
  border-radius: var(--radius-sm);
  padding: 11px 20px;
  font-size: 14px; font-weight: 600; letter-spacing: -.004em;
  transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out),
              transform .2s var(--ease-out);
}
.btn:active { transform: none; }

.btn--primary { background: var(--text); color: #06060a; border-color: transparent; }
.btn--primary:hover { background: #fff; color: #06060a; }

.btn--ghost {
  background: var(--card-fill);
  border-color: var(--line);
  color: var(--text);
  box-shadow: var(--card-lit);
  backdrop-filter: blur(2px);
}
.btn--ghost:hover { background: hsl(0 0% 100% / .06); border-color: var(--line-strong); color: var(--text); }

.btn--sm { padding: 8px 16px; font-size: 13.5px; }
.btn-row { gap: 10px; margin-top: 30px; }

/* --- header --------------------------------------------------------------- */

.site-header {
  height: 72px;
  background: rgb(3 3 5 / .65);
  backdrop-filter: blur(22px) saturate(160%);
  border-bottom: 1px solid var(--line);
}
.site-header__inner { height: 72px; }

.brand__mark {
  width: 20px; height: 20px; border-radius: 6px;
  background: radial-gradient(circle at 32% 28%, var(--accent-hi), var(--accent-dim) 70%);
  box-shadow: 0 0 12px -2px var(--accent), inset 0 0 0 1px hsl(0 0% 100% / .18);
}
.brand__name { font-size: 15.5px; font-weight: 650; letter-spacing: -.02em; }
.brand__name-dim { color: var(--text-faint); }

.site-nav { gap: 2px; }
.site-nav a {
  font-size: 13.5px; font-weight: 500;
  color: var(--text-dim); padding: 7px 12px;
  border-radius: 7px; border-bottom: 0;
}
.site-nav a:hover { color: var(--text); background: hsl(0 0% 100% / .05); border-bottom: 0; }
.site-nav a[aria-current="page"] { color: var(--text); background: hsl(0 0% 100% / .07); border-bottom: 0; }

/* --- hero: nebula in gradients ------------------------------------------- */

.hero {
  padding-block: clamp(80px, 12vw, 168px) clamp(48px, 7vw, 88px);
  border-bottom: 0;
  text-align: center;
}

/* The galaxy. Five overlapping colour fields — a bright warm core, two cool
   arms, a violet outer haze — blurred hard so no individual circle is legible.
   The whole thing is one paint operation and downloads nothing. */
.hero::before {
  inset: -30% -10% auto;
  height: 150%;
  background-image:
    radial-gradient(22% 30% at 50% 30%, rgb(198 214 255 / .22), transparent 62%),
    radial-gradient(34% 26% at 38% 36%, rgb(97 134 232 / .2),   transparent 68%),
    radial-gradient(30% 24% at 63% 33%, rgb(126 106 214 / .17), transparent 70%),
    radial-gradient(46% 34% at 50% 26%, rgb(58 78 150 / .16),   transparent 72%),
    radial-gradient(60% 42% at 50% 18%, rgb(20 26 56 / .5),     transparent 76%);
  background-size: auto;
  mask-image: none; -webkit-mask-image: none;
  filter: blur(46px);
  opacity: .95;
}

/* A faint horizon glow along the fold, which is what stops the nebula from
   ending in a visible edge. */
.hero::after {
  top: auto; bottom: -2px; left: 0; right: 0;
  width: 100%; height: 40%;
  background: radial-gradient(60% 100% at 50% 100%, rgb(169 205 245 / .1), transparent 70%);
  filter: none;
}

.hero__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 6vw, 64px); justify-items: center; }
.hero h1 { max-width: 16ch; margin-inline: auto; margin-bottom: 20px; }
.hero h1 em {
  font-style: normal;
  background: linear-gradient(180deg, #fff 20%, var(--accent) 130%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__lede { margin-inline: auto; }
.hero .btn-row { justify-content: center; }

/* Their hero ends in a bordered glass panel. Ours becomes the indicator strip:
   one card, four cells, hairline dividers. */
.hero__aside {
  width: 100%;
  background: var(--card-fill);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--card-lit), var(--shadow-lg);
  backdrop-filter: blur(2px);
  padding: 0; overflow: hidden;
}
.hero__aside h2 {
  font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-faint);
  margin: 0; padding: 14px 20px; text-align: left;
  border-bottom: 1px solid var(--line);
}
.hero__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0; }
.hero__list li {
  border-radius: 0; padding: 22px 20px;
  border-right: 1px solid var(--line);
  font-size: 14px; font-weight: 550; color: var(--text);
  text-align: left;
}
.hero__list li:last-child { border-right: 0; }
.hero__list li:hover { background: hsl(0 0% 100% / .022); }
.hero__list li::before {
  width: 6px; height: 6px; border-radius: 50%; opacity: 1;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}

/* --- sections, numbered like their toolkit ------------------------------- */

.section { padding-block: clamp(64px, 9vw, 112px); }
.section--inset { background: rgb(5 5 8 / .8); border-block: 1px solid var(--line); }
.section__head { margin-bottom: 48px; max-width: 680px; }

main { counter-reset: sec; }
.section { counter-increment: sec; }

.section > .wrap > .section__head > h2::before,
.section .content__inner > div > h2::before {
  content: counter(sec, decimal-leading-zero) ' —';
  display: block;
  font-size: 11px; font-weight: 600; letter-spacing: .18em;
  color: var(--accent);
  margin-bottom: 14px;
}

.content__inner { gap: 24px; }
.content--panel .content__inner {
  background: var(--card-fill);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--card-lit);
  backdrop-filter: blur(2px);
}
.content--accent .content__inner { border-left: 1px solid var(--line-strong); }
.content__sub { color: var(--accent); font-weight: 550; font-size: 16px; }

.prose ul > li::before { border-radius: 50%; width: 5px; height: 5px; background: var(--accent); opacity: .9; }
.checklist li::before { border-color: var(--accent); }
.checklist__title { font-weight: 620; letter-spacing: -.012em; }

/* --- cards: one recipe, everywhere --------------------------------------- */

.cards, .features { gap: 14px; }

.card, .feature {
  background: var(--card-fill);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--card-lit), var(--shadow);
  backdrop-filter: blur(2px);
  padding: 28px 24px;
  transition: border-color .25s var(--ease-out), background-color .25s var(--ease-out),
              transform .25s var(--ease-out);
}
.card:hover, .feature:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  background: hsl(0 0% 100% / .045);
}

.card--featured {
  border-color: var(--line-strong);
  background: linear-gradient(180deg, rgb(169 205 245 / .07), var(--card-fill));
}
.card--featured::before {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

.card h3 { font-size: 18px; margin-bottom: 6px; }
.card__price {
  font-family: var(--font); font-size: 11px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 22px;
}
.card__features li { font-size: 14px; color: var(--text-dim); }
.card__features li::before { background: var(--accent); width: 4px; height: 4px; opacity: .8; }

/* --- FAQ ------------------------------------------------------------------ */

.faq { gap: 10px; max-width: 840px; }
.faq__item {
  background: var(--card-fill);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--card-lit);
  backdrop-filter: blur(2px);
}
.faq__item[open] { background: hsl(0 0% 100% / .045); border-color: var(--line-strong); }
.faq__item:hover { border-color: var(--line-strong); }
.faq__q { font-size: 15.5px; font-weight: 560; padding: 19px 22px; }

/* Their marker is a + that rotates to an ×, not a chevron. */
.faq__q::after {
  content: '+';
  width: auto; height: auto;
  border: 0; transform: none;
  margin-top: -2px;
  font-size: 21px; font-weight: 400; line-height: 1;
  color: var(--text-faint);
  transition: transform .25s var(--ease-out), color .25s var(--ease-out);
}
.faq__item[open] .faq__q::after {
  content: '+';
  transform: rotate(45deg);
  border: 0;
  color: var(--accent);
}
.faq__a {
  margin: 0 22px 22px; padding-top: 0;
  border-top: 0;
  font-size: 14.8px; color: var(--text-dim); max-width: 66ch;
}
.faq__a code { background: hsl(0 0% 100% / .06); border-color: var(--line); border-radius: 5px; color: var(--accent-hi); }

/* --- CTA ------------------------------------------------------------------ */

.cta-band {
  background: var(--card-fill);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--card-lit), var(--shadow-lg);
  backdrop-filter: blur(2px);
  padding: clamp(38px, 5.5vw, 60px);
}
.cta-band::before {
  background: radial-gradient(50% 130% at 50% 0%, rgb(169 205 245 / .13), transparent 68%);
}

/* --- footer --------------------------------------------------------------- */

.site-footer {
  background: transparent;
  border-top: 1px solid var(--line);
  font-size: 13.8px;
}
.site-footer__col-title {
  font-family: var(--font); font-size: 11px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--text-faint);
}
.site-footer__col a { color: var(--text-dim); }
.site-footer__col a:hover { color: var(--accent-hi); }

/* --- forms ---------------------------------------------------------------- */

.auth__card {
  background: var(--card-fill); border-color: var(--line);
  box-shadow: var(--card-lit), var(--shadow-lg);
  backdrop-filter: blur(2px);
}
.ff__input {
  background: hsl(0 0% 100% / .04); border-color: var(--line);
  border-radius: var(--radius-sm);
}
.ff__input:focus { outline-color: var(--accent); }
.account__table, .pill, .account__empty { border-color: var(--line); }
.account__table th, .account__table td { border-color: var(--line); }

@media (prefers-reduced-motion: reduce) {
  .card, .feature { transition: none; }
}

@media (max-width: 880px) {
  .hero { text-align: left; }
  .hero__grid { justify-items: stretch; }
  .hero h1, .hero__lede { margin-inline: 0; }
  .hero .btn-row { justify-content: flex-start; }
  .hero__list li { border-right: 0; border-bottom: 1px solid var(--line); }
  .hero__list li:last-child { border-bottom: 0; }
}


/* --- the two-tone headline ------------------------------------------------- */
.hero h1 em {
  display: block;
  font-style: normal;
  background: none;
  -webkit-background-clip: border-box; background-clip: border-box;
  color: var(--accent);
  margin-top: .12em;
}
.hero h1 { max-width: 19ch; }

/* --- the credential lockup: aligned to ECOSYSTEM, centred as one ---------- */
.hero .hero__cred {
  display: inline-block;
  text-align: left;
}
.hero .nt-badge--hero { display: block; width: 168px; margin: 0 0 11px; }
.hero .eyebrow {
  display: flex;
  width: max-content;
  margin: 0 0 22px 80.04px;
}