/* ============================================================
   JACK IN — landing page
   Dark cyber-editorial. Phosphor green on near-black.
   Type: Chakra Petch (display) · Sora (body) · JetBrains Mono (code)
   ============================================================ */

:root {
  --bg:        #04070a;
  --bg-2:      #070d10;
  --panel:     #0a1318;
  --panel-2:   #0d1a1f;
  --line:      #15282b;
  --ink:       #d6e6dd;
  --ink-soft:  #8aa39a;
  --ink-faint: #5a6f68;
  --phos:      #4dffb0;   /* phosphor green */
  --phos-dim:  #1c8f63;
  --cyan:      #58e0ff;
  --danger:    #ff6b6b;
  --maxw:      1180px;
  --radius:    14px;
  --ease:      cubic-bezier(.2, .7, .2, 1);
  --space-box: clamp(1.5rem, 3.5vw, 2.2rem);   /* shared vertical gap between stacked boxes */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Sora", system-ui, sans-serif;
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: .01em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---- atmospheric layers ---- */
#rain {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 0; opacity: .14;
  pointer-events: none;
}
.grain {
  position: fixed; inset: -50%;
  z-index: 1; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 6s steps(6) infinite;
}
.vignette {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 90% at 50% -10%, transparent 40%, rgba(0,0,0,.55) 100%);
}
@keyframes grain {
  0%,100% { transform: translate(0,0); }
  20% { transform: translate(-4%,3%); }
  40% { transform: translate(3%,-4%); }
  60% { transform: translate(-3%,-2%); }
  80% { transform: translate(4%,2%); }
}

/* everything above the atmosphere */
main, .footer { position: relative; z-index: 2; }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 99;
  background: var(--phos); color: #022; padding: .6rem 1rem; border-radius: 0 0 8px 0;
  font-family: "JetBrains Mono", monospace; font-size: .8rem;
}
.skip-link:focus { left: 0; }
/* skip-link target: receives focus programmatically, so suppress the region outline */
#main:focus { outline: none; }

/* visually-hidden text for screen readers (e.g. new-tab announcements) */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

::selection { background: var(--phos); color: #022016; }

/* ---- layout helpers ---- */
section { padding: clamp(4.5rem, 10vw, 9rem) clamp(1.25rem, 5vw, 3rem); }
.section-head { max-width: var(--maxw); margin: 0 auto clamp(2.5rem, 5vw, 4rem); }
.section-kicker {
  font-family: "JetBrains Mono", monospace;
  font-size: .72rem; letter-spacing: .32em; text-transform: uppercase;
  color: var(--phos); opacity: .85;
}
.section-head h2 {
  font-family: "Chakra Petch", sans-serif; font-weight: 600;
  font-size: clamp(1.9rem, 4.6vw, 3.1rem); line-height: 1.04;
  margin: .7rem 0 0; letter-spacing: -.01em; color: #eafff4;
}

/* ---- vertical rhythm between stacked content boxes ----
   Inside a section, every box that follows another box gets ONE shared gap.
   Before this, boxes without their own vertical margin (terminals, the options
   table, the feature grids) butted against their neighbour with zero space —
   two .term--doc blocks touched, a table sat flush against the next terminal.
   The .section-head keeps its larger margin-bottom as the head→first-box gap
   (it isn't in the list below), preserving the heading-to-content hierarchy. */
:is(.term--doc, .note, .doc-intro, .doc-table-wrap, .features, .steps, .targets, .price-card)
+ :is(.term--doc, .note, .doc-intro, .doc-table-wrap, .features, .steps, .targets, .price-card) {
  margin-top: var(--space-box);
}

/* ---- buttons ---- */
.btn {
  --pad: .9rem 1.4rem;
  display: inline-flex; align-items: center; gap: .55rem; justify-content: center;
  padding: var(--pad); border-radius: 10px; cursor: pointer;
  font-family: "JetBrains Mono", monospace; font-size: .9rem; font-weight: 500;
  letter-spacing: .02em; text-decoration: none; border: 1px solid transparent;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s, border-color .25s;
  position: relative;
}
.btn--solid {
  background: var(--phos); color: #02160e;
  box-shadow: 0 0 0 0 rgba(77,255,176,.5);
}
.btn--solid:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px -10px rgba(77,255,176,.55), 0 0 0 1px rgba(77,255,176,.6);
}
.btn--ghost {
  background: rgba(77,255,176,.04); color: var(--ink); border-color: var(--line);
}
.btn--ghost:hover { border-color: var(--phos-dim); color: #eafff4; transform: translateY(-2px); }
.btn--block { width: 100%; }
.price-pill {
  background: rgba(2,22,14,.18); border: 1px solid rgba(2,22,14,.25);
  border-radius: 999px; padding: .05rem .5rem; font-size: .82em;
}

/* ---- nav ---- */
.nav {
  /* z-index above main/.footer (2) so the sticky header stays ON TOP and page
     content scrolls underneath it — both shared z-index:2 before, and since
     main is later in the DOM the hero title painted over the nav. */
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem clamp(1.25rem, 5vw, 3rem);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  /* Near-opaque base so scrolling page content can't bleed through the bar
     (the old .82→.40 gradient left the lower half see-through). A faint
     gradient is kept for depth; the blur adds the glassy feel on top. */
  background: linear-gradient(180deg, rgba(4,7,10,.96), rgba(4,7,10,.9));
  border-bottom: 1px solid var(--line);
}
/* No backdrop-filter support (e.g. some Firefox configs) = no blur to mask
   content, so fall back to a solid bar. */
@supports not ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  .nav { background: rgba(4,7,10,.98); }
}
.brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--ink); }
.brand__glyph {
  display: grid; place-items: center; width: 1.9rem; height: 1.9rem;
  border: 1px solid var(--phos-dim); border-radius: 7px;
  color: var(--phos); font-size: 1.1rem;
  box-shadow: inset 0 0 12px rgba(77,255,176,.18);
}
.brand__word {
  font-family: "Chakra Petch", sans-serif; font-weight: 700;
  letter-spacing: .14em; font-size: 1.02rem;
}
.brand__in { color: var(--phos); }
.brand--sm .brand__word { font-size: .92rem; }
.nav__links { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); }
.nav__links > a:not(.btn) {
  font-family: "JetBrains Mono", monospace; font-size: .82rem; letter-spacing: .03em;
  color: var(--ink-soft); text-decoration: none; transition: color .2s;
}
.nav__links > a:not(.btn):hover { color: var(--phos); }
.nav__cta { padding: .55rem 1rem; }
/* Log-out is a form post (data-model E2, Kind=action); keep it inline in the nav row. */
.nav__links form { display: inline-flex; margin: 0; }

/* ---- responsive disclosure toggle + active state + focus (US3) ---- */
/* Hamburger button: hidden on the desktop inline row, revealed ≤720px (media query below). */
.nav__toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; padding: 0;
  background: rgba(77,255,176,.04); border: 1px solid var(--line);
  border-radius: 10px; color: var(--ink); cursor: pointer;
  transition: border-color .2s, color .2s;
}
.nav__toggle:hover { border-color: var(--phos-dim); color: var(--phos); }
/* three-bar icon: the span is the middle bar, ::before/::after are the outer bars */
.nav__bars, .nav__bars::before, .nav__bars::after {
  display: block; width: 1.15rem; height: 2px; border-radius: 2px;
  background: currentcolor; transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.nav__bars { position: relative; }
.nav__bars::before { content: ""; position: absolute; left: 0; top: -.36rem; }
.nav__bars::after  { content: ""; position: absolute; left: 0; top: .36rem; }
/* morph to an × while the menu is open */
.nav.is-open .nav__bars { background: transparent; }
.nav.is-open .nav__bars::before { transform: translateY(.36rem) rotate(45deg); }
.nav.is-open .nav__bars::after  { transform: translateY(-.36rem) rotate(-45deg); }

/* active-location indicator (FR-011, contract A.4) */
.nav__links > a:not(.btn) { position: relative; }
.nav__links > a:not(.btn).is-active { color: var(--phos); }
.nav__links > a:not(.btn).is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.5rem; height: 2px;
  background: var(--phos); border-radius: 2px; box-shadow: 0 0 10px rgba(77,255,176,.55);
}
.nav__cta.is-active { border-color: var(--phos); color: #eafff4; }

/* visible keyboard focus rings across interactive chrome */
.skip-link:focus-visible,
.brand:focus-visible,
.nav__toggle:focus-visible,
.nav__links a:focus-visible,
.btn:focus-visible,
.linkbtn:focus-visible,
.link:focus-visible {
  outline: 2px solid var(--phos);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---- hero ---- */
.hero {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center; max-width: var(--maxw); margin: 0 auto;
  padding-top: clamp(3.5rem, 9vw, 7rem); padding-bottom: clamp(4rem, 9vw, 7rem);
}
.eyebrow {
  font-family: "JetBrains Mono", monospace; font-size: .78rem; letter-spacing: .34em;
  text-transform: uppercase; color: var(--phos); margin: 0 0 1.1rem;
}
.hero__title {
  font-family: "Chakra Petch", sans-serif; font-weight: 700;
  font-size: clamp(3.2rem, 11vw, 7rem); line-height: .92; margin: 0;
  letter-spacing: -.02em; color: #f2fff8;
}
.hero__title span { display: block; }
.hero__title .glitch { color: var(--phos); text-shadow: 0 0 38px rgba(77,255,176,.35); }
.hero__lede {
  font-size: clamp(1.05rem, 2.1vw, 1.4rem); font-weight: 400; color: #cfe4d8;
  margin: 1.6rem 0 0; max-width: 32ch;
}
.hero__lede em { color: var(--phos); font-style: normal; }
.hero__sub { color: var(--ink-soft); margin: 1rem 0 0; max-width: 46ch; font-size: .98rem; }
.hero__sub strong { color: var(--ink); font-weight: 500; }
.hero__sub em { color: var(--cyan); font-style: normal; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.hero__trust {
  margin-top: 1.5rem; font-family: "JetBrains Mono", monospace;
  font-size: .76rem; color: var(--ink-faint); letter-spacing: .03em;
}
.kbd {
  border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px;
  padding: .05rem .4rem; color: var(--ink-soft);
}

/* terminal */
.term {
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.8), 0 0 0 1px rgba(77,255,176,.06),
              0 0 70px -30px rgba(77,255,176,.25);
}
.term__bar {
  display: flex; align-items: center; gap: .45rem;
  padding: .7rem .9rem; border-bottom: 1px solid var(--line); background: rgba(0,0,0,.25);
}
.dot { width: .7rem; height: .7rem; border-radius: 50%; opacity: .85; }
.dot--r { background: #ff5f57; } .dot--y { background: #febc2e; } .dot--g { background: #28c840; }
.term__title {
  margin-left: .6rem; font-family: "JetBrains Mono", monospace;
  font-size: .74rem; color: var(--ink-faint);
}
.term__body {
  margin: 0; padding: 1.3rem 1.3rem 1.6rem;
  font-family: "JetBrains Mono", monospace; font-size: clamp(.8rem, 1.5vw, .95rem);
  line-height: 1.85; color: var(--ink); white-space: pre-wrap; min-height: 12.5rem;
}
.term__body .ln-cmd { color: #eafff4; }
.term__body .ln-dim { color: var(--ink-faint); }
.term__body .ln-ok  { color: var(--phos); }
.term__body .ln-cy  { color: var(--cyan); }
.term__body .ln-big {
  font-family: "Chakra Petch", sans-serif; font-size: 1.5em; font-weight: 700;
  color: var(--phos); text-shadow: 0 0 26px rgba(77,255,176,.5); letter-spacing: .01em;
}
.caret {
  color: var(--phos); animation: blink 1s steps(1) infinite; margin-left: 1px;
}
@keyframes blink { 50% { opacity: 0; } }

/* ---- the download / story ---- */
.download__grid {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.story-quote {
  margin: 0; padding: clamp(1.6rem, 3vw, 2.4rem);
  border-left: 2px solid var(--phos-dim);
  background: linear-gradient(180deg, rgba(77,255,176,.04), transparent);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: "JetBrains Mono", monospace; color: var(--ink-soft);
}
.story-quote p { margin: .2rem 0; font-size: 1.02rem; }
.story-quote__beat { color: var(--ink-faint); font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; margin: 1.1rem 0 !important; }
.story-quote__punch {
  font-family: "Chakra Petch", sans-serif; font-weight: 700;
  font-size: clamp(1.6rem, 4vw, 2.4rem); color: var(--phos);
  text-shadow: 0 0 30px rgba(77,255,176,.4); margin-top: .4rem !important;
}
.download__text p { font-size: 1.06rem; color: #c2d6cb; margin: 0 0 1.15rem; }
.download__text em { color: var(--phos); font-style: normal; }
.download__text strong { color: #eafff4; font-weight: 600; }

/* column 1 of the download grid: the construct feed stacked over the quote */
.download__media { display: grid; gap: clamp(1.2rem, 3vw, 1.8rem); align-content: start; }

/* ---- construct feed (Matrix screen frame for the GIFs) ----
   Shares the terminal's border/glow language so the footage reads as another
   live readout from the construct, not a stock image. Decorative scanline +
   caption are pure CSS; the still poster (prefers-reduced-motion) is swapped in
   by the <picture> source in the markup. */
.construct {
  position: relative; margin: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.8),
              0 0 0 1px rgba(77,255,176,.06),
              0 0 70px -30px rgba(77,255,176,.25);
}
.construct__feed {
  display: block; width: 100%; height: auto;
  filter: saturate(.9) contrast(1.04); /* nudge toward the phosphor palette */
}
.construct__scan {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .55;
  background:
    linear-gradient(180deg, rgba(77,255,176,.07), transparent 26% 74%, rgba(88,224,255,.06)),
    repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px);
}
.construct__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; align-items: center; gap: .5rem; padding: .55rem .8rem .6rem;
  font-family: "JetBrains Mono", monospace; font-size: .72rem; letter-spacing: .04em;
  color: var(--phos); background: linear-gradient(0deg, rgba(4,7,10,.88), transparent);
}
.construct__cap::before {
  content: ""; width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--phos); box-shadow: 0 0 8px var(--phos);
  animation: constructPulse 1.6s var(--ease) infinite;
}
@keyframes constructPulse { 50% { opacity: .3; } }

/* the jack-in feed sits centred above the register CTA */
.register .construct {
  max-width: 520px; margin: 0 auto var(--space-box);
}

/* ---- how / steps ---- */
.steps {
  list-style: none; margin: 0 auto; padding: 0; max-width: var(--maxw);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; counter-reset: s;
}
.step {
  position: relative; padding: 1.6rem 1.4rem; border: 1px solid var(--line);
  border-radius: var(--radius); background: linear-gradient(180deg, var(--panel), var(--bg-2));
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.step:hover {
  transform: translateY(-5px); border-color: var(--phos-dim);
  box-shadow: 0 24px 50px -28px rgba(77,255,176,.4);
}
.step__no {
  font-family: "JetBrains Mono", monospace; font-size: .8rem; color: var(--phos);
  border: 1px solid var(--phos-dim); border-radius: 6px; padding: .15rem .45rem;
}
.step h3 { font-family: "Chakra Petch", sans-serif; font-weight: 600; font-size: 1.12rem; margin: 1rem 0 .4rem; color: #eafff4; }
.step p { margin: 0; color: var(--ink-soft); font-size: .94rem; }
.step em { color: var(--phos); font-style: italic; }

/* ---- features ---- */
.features {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem;
}
.feature {
  padding: 1.8rem 1.6rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); transition: transform .3s var(--ease), border-color .3s, background .3s;
}
.feature:hover { transform: translateY(-4px); border-color: var(--phos-dim); background: var(--panel-2); }
.feature__icon {
  width: 2rem; height: 2rem; fill: none; stroke: var(--phos); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; margin-bottom: 1rem;
  filter: drop-shadow(0 0 10px rgba(77,255,176,.35));
}
.feature h3 { font-family: "Chakra Petch", sans-serif; font-weight: 600; font-size: 1.15rem; margin: 0 0 .45rem; color: #eafff4; }
.feature p { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.feature em { color: var(--cyan); font-style: normal; }

/* ---- pricing ---- */
.pricing .section-head { text-align: center; }
.price-card {
  position: relative; max-width: 460px; margin: 0 auto;
  padding: clamp(2rem, 4vw, 3rem); border: 1px solid var(--phos-dim); border-radius: 20px;
  background: linear-gradient(180deg, var(--panel-2), var(--bg-2)); overflow: hidden; text-align: center;
}
.price-card__glow {
  position: absolute; inset: -40% 10% auto; height: 60%; z-index: 0;
  background: radial-gradient(50% 60% at 50% 0%, rgba(77,255,176,.22), transparent 70%);
  filter: blur(10px);
}
.price-card > :not(.price-card__glow) { position: relative; z-index: 1; }
.price-card__plan {
  font-family: "JetBrains Mono", monospace; font-size: .76rem; letter-spacing: .3em;
  text-transform: uppercase; color: var(--phos); margin: 0 0 .5rem;
}
.price-card__amount {
  font-family: "Chakra Petch", sans-serif; font-weight: 700; font-size: clamp(3.6rem, 9vw, 5.2rem);
  line-height: 1; margin: .2rem 0; color: #f2fff8;
}
.price-card__currency { font-size: .45em; vertical-align: super; color: var(--phos); }
.price-card__period { font-size: .26em; color: var(--ink-soft); font-family: "JetBrains Mono", monospace; }
.price-card__per { font-family: "JetBrains Mono", monospace; color: var(--ink-soft); margin: 0 0 1.6rem; letter-spacing: .1em; }
.price-card__list { list-style: none; margin: 0 0 1.8rem; padding: 0; text-align: left; display: grid; gap: .7rem; }
.price-card__list li { position: relative; padding-left: 1.7rem; color: #cfe4d8; font-size: .96rem; }
.price-card__list li::before {
  content: "▸"; position: absolute; left: 0; color: var(--phos); font-size: .85rem; top: .12rem;
}
.price-card__fine { margin: 1rem 0 0; font-size: .8rem; color: var(--ink-faint); font-family: "JetBrains Mono", monospace; }

/* ---- register / form ---- */
.register__inner {
  max-width: 760px; margin: 0 auto;
  border: 1px solid var(--line); border-radius: 22px; padding: clamp(1.8rem, 5vw, 3.4rem);
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(77,255,176,.06), transparent 55%),
    linear-gradient(180deg, var(--panel), var(--bg-2));
  box-shadow: 0 50px 90px -50px rgba(0,0,0,.9);
}
.register .section-head { margin-bottom: clamp(1.6rem, 4vw, 2.6rem); }
.register__lede { color: var(--ink-soft); margin: .9rem 0 0; max-width: 52ch; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field label {
  font-family: "JetBrains Mono", monospace; font-size: .76rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft);
}
.field input {
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  padding: .85rem .95rem; color: var(--ink); font-family: "Sora", sans-serif; font-size: .98rem;
  transition: border-color .2s, box-shadow .2s; width: 100%;
}
.field input::placeholder { color: var(--ink-faint); }
.field input:focus {
  outline: none; border-color: var(--phos);
  box-shadow: 0 0 0 3px rgba(77,255,176,.14);
}
.field input[aria-invalid="true"] { border-color: var(--danger); }
.field__error { color: var(--danger); font-size: .78rem; font-family: "JetBrains Mono", monospace; min-height: .9rem; }
#register-form > button { grid-column: 1 / -1; margin-top: .4rem; }
.form__status {
  grid-column: 1 / -1; margin: .4rem 0 0; min-height: 1.2rem;
  font-family: "JetBrains Mono", monospace; font-size: .88rem;
}
.form__status.is-ok { color: var(--phos); }
.form__status.is-err { color: var(--danger); }

.btn__spinner {
  width: 1rem; height: 1rem; border-radius: 50%;
  border: 2px solid rgba(2,22,14,.35); border-top-color: #02160e;
  display: none; animation: spin .7s linear infinite;
}
.btn.is-loading .btn__spinner { display: inline-block; }
.btn.is-loading .btn__label { opacity: .7; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- footer ---- */
.footer {
  border-top: 1px solid var(--line); padding: 2.6rem clamp(1.25rem, 5vw, 3rem);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  max-width: var(--maxw); margin: 0 auto;
}
.footer__row { display: flex; align-items: center; gap: 1rem; }
.footer__tag { margin: 0; color: var(--ink-faint); font-family: "JetBrains Mono", monospace; font-size: .8rem; }
.footer__meta { margin: 0; color: var(--ink-soft); font-size: .85rem; }
.footer__meta strong { color: var(--phos); font-weight: 600; }

/* ---- app shell (authenticated/app-mode pages) ----
   Consolidated from the former _Layout.cshtml inline <style> block (FR-012).
   Reuses the :root design tokens above. */
.app-main { max-width: 920px; margin: 0 auto; padding: clamp(2rem, 6vw, 4rem) clamp(1.25rem, 5vw, 3rem); }
.app-head { margin-bottom: 2rem; }
.app-head h1 {
  font-family: "Chakra Petch", sans-serif; font-weight: 700;
  font-size: clamp(1.8rem, 5vw, 2.8rem); line-height: 1.04; margin: .4rem 0 0; color: #eafff4;
}
.app-card {
  border: 1px solid var(--line); border-radius: 16px; padding: clamp(1.4rem, 4vw, 2.2rem);
  background: linear-gradient(180deg, var(--panel), var(--bg-2)); margin-bottom: var(--space-box);
}
.app-card h2 { font-family: "Chakra Petch", sans-serif; font-weight: 600; color: #eafff4; margin: 0 0 1rem; font-size: 1.25rem; }
.stack { display: grid; gap: 1.1rem; max-width: 480px; }
.pkg-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.pkg-table th, .pkg-table td {
  text-align: left; padding: .7rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top;
}
.pkg-table th { font-family: "JetBrains Mono", monospace; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.pkg-table td a { color: var(--cyan); text-decoration: none; }
.pkg-table td a:hover { color: var(--phos); }
.badge {
  font-family: "JetBrains Mono", monospace; font-size: .7rem; letter-spacing: .06em;
  padding: .12rem .5rem; border-radius: 999px; border: 1px solid var(--phos-dim); color: var(--phos);
}
.muted { color: var(--ink-faint); font-family: "JetBrains Mono", monospace; font-size: .82rem; }
.inline-form { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.inline-form input[type=url] { flex: 1 1 220px; }
.msg { font-family: "JetBrains Mono", monospace; font-size: .88rem; margin: 0 0 1rem; }
.msg.is-ok { color: var(--phos); } .msg.is-err { color: var(--danger); }
.validation-summary ul { margin: 0; padding-left: 1.1rem; }
.field span.text-danger, .text-danger { color: var(--danger); font-size: .78rem; font-family: "JetBrains Mono", monospace; }
.app-nav { display: flex; align-items: center; gap: 1.2rem; }
.app-nav form { display: inline; }
.linkbtn {
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: "JetBrains Mono", monospace; font-size: .82rem; letter-spacing: .03em; color: var(--ink-soft);
}
.linkbtn:hover { color: var(--phos); }

/* inline-style replacements for app/auth pages (FR-012, US3 T025/T026) */
.link { color: var(--cyan); text-decoration: none; }
.link:hover { color: var(--phos); }
.form-switch { margin-top: 1.2rem; }   /* "No account yet? Register." switch line */
.table-note { margin-top: 1rem; }       /* note beneath the dashboard packages table */

/* ---- checkout confirmation (/Success) ----
   Moved from the former wwwroot/success.html inline <style> block (FR-012).
   Reuses the :root design tokens. */
.done { min-height: 100vh; display: grid; place-items: center; text-align: center; padding: 2rem; }
.done__card {
  position: relative; z-index: 2; max-width: 600px;
  border: 1px solid var(--phos-dim); border-radius: 22px; padding: clamp(2rem, 5vw, 3.6rem);
  background: linear-gradient(180deg, var(--panel-2), var(--bg-2));
  box-shadow: 0 50px 90px -50px rgba(0,0,0,.9), 0 0 70px -30px rgba(77,255,176,.3);
}
.done__check {
  width: 4.4rem; height: 4.4rem; margin: 0 auto 1.4rem; display: grid; place-items: center;
  border: 1px solid var(--phos-dim); border-radius: 50%;
  box-shadow: inset 0 0 26px rgba(77,255,176,.22); color: var(--phos);
}
.done__check svg { width: 2rem; height: 2rem; fill: none; stroke: currentcolor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.done__kicker { font-family: "JetBrains Mono", monospace; letter-spacing: .3em; text-transform: uppercase; color: var(--phos); font-size: .76rem; margin: 0 0 .8rem; }
.done__title { font-family: "Chakra Petch", sans-serif; font-weight: 700; font-size: clamp(2rem, 6vw, 3rem); margin: 0; color: #f2fff8; line-height: 1.04; }
.done__sub { color: var(--ink-soft); margin: 1.1rem auto 0; max-width: 44ch; }
.done__sub strong { color: var(--ink); font-weight: 500; }
.done__meta { font-family: "JetBrains Mono", monospace; font-size: .78rem; color: var(--ink-faint); margin-top: 1.5rem; word-break: break-all; }
.done__actions { margin-top: 2rem; display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }

/* ---- reveal animation ---- */
.reveal { opacity: 0; transform: translateY(22px); }
.reveal.in {
  opacity: 1; transform: none;
  transition: opacity .8s var(--ease) var(--d, 0s), transform .8s var(--ease) var(--d, 0s);
}

/* ---- responsive ---- */
@media (max-width: 920px) {
  .hero { grid-template-columns: 1fr; }
  .hero__terminal { order: 2; }
  .download__grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .features { grid-template-columns: repeat(2, 1fr); }
}
/* Responsive nav: hamburger disclosure at/below the 720px pinned breakpoint
   (research Decision 2); the inline row returns above 720px. Links stay in the
   DOM at every width (contract A.6) — collapsed, never removed. */
@media (max-width: 720px) {
  .nav { flex-wrap: wrap; }
  .nav__toggle { display: inline-flex; }
  .nav__links {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: .15rem;
    margin-top: .9rem;
  }
  .nav.is-open .nav__links { display: flex; }
  .nav__links > a:not(.btn) {
    padding: .7rem .25rem;
    border-bottom: 1px solid var(--line);
    font-size: .9rem;
  }
  /* the underline marker doesn't read well stacked; color alone signals active */
  .nav__links > a:not(.btn).is-active::after { display: none; }
  .nav__links form { width: 100%; }
  .nav__links .nav__cta { width: 100%; margin-top: .6rem; }
}

@media (max-width: 620px) {
  .steps, .features, .form { grid-template-columns: 1fr; }
  .footer { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  #rain, .grain { display: none; }
  /* the open/close menu is a state change, not an animation — drop the icon morph too */
  .nav__bars, .nav__bars::before, .nav__bars::after { transition: none; }
}

/* ============================================================
   MANUAL (/Manual) — docs for the jack-in CLI
   Reuses the :root tokens and shared components (.term, .section-head,
   .features/.feature, .pkg-table, .btn). Marketing body mode.
   ============================================================ */

/* intro block */
.doc-hero { max-width: var(--maxw); margin: 0 auto; }
.doc-hero__title {
  font-family: "Chakra Petch", sans-serif; font-weight: 700;
  font-size: clamp(2.3rem, 6vw, 4rem); line-height: 1.02; letter-spacing: -.02em;
  color: #f2fff8; margin: .7rem 0 0;
}
.doc-hero__lede { color: var(--ink-soft); font-size: clamp(1.02rem, 2vw, 1.22rem); max-width: 62ch; margin: 1.2rem 0 0; }
.doc-hero__lede b { color: #eafff4; font-weight: 600; }
.doc-hero__lede strong { color: var(--ink); font-weight: 500; }
.doc-hero__lede em { color: var(--phos); font-style: normal; }
.doc-hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }

/* static (non-typewriter) terminals: fit their content, centred, capped width */
.term--doc { max-width: var(--maxw); margin-inline: auto; }
.term--doc .term__body { min-height: auto; }
.doc-hero + .term--doc { margin-top: clamp(2rem, 5vw, 3rem); }
.term__body .ln-com { color: var(--ink-faint); }      /* inline shell comments */

/* command-reference cards (reuse .features/.feature grid) */
.cmd-syntax {
  display: block; font-family: "JetBrains Mono", monospace; font-size: .84rem;
  color: var(--phos); background: rgba(77,255,176,.05);
  border: 1px solid var(--line); border-radius: 8px;
  padding: .5rem .65rem; margin: 0 0 .7rem; overflow-x: auto; white-space: nowrap;
}
.manual-commands .feature h3 {
  font-family: "JetBrains Mono", monospace; font-size: .8rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--phos); margin: 0 0 .7rem;
}

/* install targets two-up */
.targets { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.target {
  padding: 1.8rem 1.6rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); transition: transform .3s var(--ease), border-color .3s, background .3s;
}
.target:hover { transform: translateY(-4px); border-color: var(--phos-dim); background: var(--panel-2); }
.target h3 {
  display: flex; align-items: center; gap: .6rem;
  font-family: "Chakra Petch", sans-serif; font-weight: 600; color: #eafff4; margin: 0 0 .35rem; font-size: 1.18rem;
}
.target__path { font-family: "JetBrains Mono", monospace; font-size: .82rem; color: var(--phos); margin: .1rem 0 .85rem; }
.target p { margin: 0; color: var(--ink-soft); font-size: .95rem; }

/* options table */
.doc-table-wrap { max-width: var(--maxw); margin: 0 auto; overflow-x: auto; }
.doc-table th:nth-child(2), .doc-table td:nth-child(2) { white-space: nowrap; }

/* version-resolution prose */
.doc-intro { max-width: var(--maxw); margin: 0 auto var(--space-box); }
.doc-prose { color: var(--ink-soft); font-size: clamp(1rem, 2vw, 1.12rem); max-width: 72ch; margin: 0; }
.doc-prose b { color: #eafff4; font-weight: 600; }
.doc-prose strong { color: #eafff4; font-weight: 600; }
.doc-prose em { color: var(--phos); font-style: normal; }

/* inline code (prose, notes, table cells) */
.inline-code, .doc-prose code, .note code, .doc-table code {
  font-family: "JetBrains Mono", monospace; font-size: .85em; color: var(--cyan);
  background: rgba(88,224,255,.06); border: 1px solid var(--line);
  border-radius: 5px; padding: .04rem .35rem;
}

/* callout note */
.note {
  max-width: var(--maxw); margin: var(--space-box) auto 0;
  border: 1px solid var(--phos-dim); border-left-width: 3px;
  border-radius: 0 var(--radius) var(--radius) 0;
  background: linear-gradient(180deg, rgba(77,255,176,.05), transparent);
  padding: 1.1rem 1.3rem; color: var(--ink-soft); font-size: .95rem;
}
.note strong { color: var(--phos); font-weight: 600; }
.note a { color: var(--cyan); text-decoration: none; }
.note a:hover { color: var(--phos); }

@media (max-width: 720px) {
  .targets { grid-template-columns: 1fr; }
}