/* ============================================================
   Lunicle marketing site — styles
   ------------------------------------------------------------
   Dark, product-marketing look. A near-black green neutral base
   + a single mint accent (--accent), sampled straight out of the
   product's dark theme (assets/hero-overview.png) so the page and
   the screenshots read as one surface. Easy to reskin from the
   tokens at the top. No external fonts or assets.
   ============================================================ */

/* ---------- design tokens ---------- */
:root {
  /* the page is dark only — tells the browser to match scrollbars, form
     controls and the embedded tracker's own default surfaces */
  color-scheme: dark;

  /* neutrals — the app's greens, one step darker so its panels sit on top */
  --bg: #080d0a;
  --surface: #0e1611;
  --surface-2: #142019;
  --border: #1c2a23;
  --border-strong: #2a4034;
  --text: #e4f6e9;
  --text-muted: #9db6a6;
  --text-faint: #6a8873;

  /* one accent — swap these to reskin the whole site */
  --accent: #8ee4a6;
  --accent-strong: #6ed08b;
  --accent-2: #b7f2c8;
  --accent-ink: #a9ecbd;   /* the accent as text/links on a dark ground */
  --accent-wash: #14251b;  /* the accent laid faintly over a surface */
  --on-accent: #06170d;    /* ink on a solid mint fill */

  --radius: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* on a dark ground, shadow alone reads as nothing — every elevation step
     pairs a black drop with a faint light hairline along the top edge */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4),
    0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 6px 18px -6px rgba(0, 0, 0, 0.6),
    0 2px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 30px 60px -22px rgba(0, 0, 0, 0.8),
    0 12px 28px -14px rgba(0, 0, 0, 0.55);

  --topbar-h: 62px;
  --content-max: 1080px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- reset-ish ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* soft ambient wash so the flat dark bg has some life */
  background-image:
    radial-gradient(1100px 520px at 78% -8%, rgba(142, 228, 166, 0.10), transparent 60%),
    radial-gradient(900px 460px at -6% 4%, rgba(110, 208, 139, 0.07), transparent 55%);
  background-attachment: fixed;
}

a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

:focus-visible {
  outline: 2.5px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ============================================================
   TOP BAR
   ------------------------------------------------------------
   The brand, then the pages as tabs — the shape the product's own
   tab bar has, so the chrome around the screenshots rhymes with
   what is inside them. Fixed to the top; the tab row scrolls
   sideways on a narrow screen rather than folding into a drawer.
   ============================================================ */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--topbar-h);
  /* brand | pages | off-site — the two 1fr rails are what keeps the pages
     centred no matter how wide the brand or the trailing links are */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 22px;
  /* the bar's contents sit in the same band as the page below it (the hero's
     1180px column, less its 40px gutters), so the brand starts where the copy
     does instead of drifting off into the corner of a wide screen */
  padding: 0 max(20px, calc((100% - 1100px) / 2));
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.9);
  z-index: 40;
}

/* A short fade below the bar, in the page's own colour. The page scrolls
   *under* the bar, so without it a screenshot's top edge butts straight into
   the tab row; this gives the bar some air to sit on at any scroll position. */
.topbar::after {
  content: "";
  position: absolute;
  inset: 100% 0 auto 0;
  height: 34px;
  pointer-events: none;
  background: linear-gradient(180deg, var(--bg) 30%, rgba(8, 13, 10, 0));
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  color: var(--text);
}
.brand:hover { text-decoration: none; }

.brand-mark {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: var(--on-accent);
  background: linear-gradient(150deg, var(--accent), var(--accent-2));
  box-shadow: 0 3px 14px -2px rgba(142, 228, 166, 0.45);
}
.brand-mark svg { width: 18px; height: 18px; display: block; }

.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.brand-tag {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-faint);
  letter-spacing: 0.01em;
}

/* the tab runs. Each group keeps its own <nav>; a hairline divides one run
   from the next, which is what the gaps in the old sidebar were doing. */
.nav-groups {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;            /* the row scrolls, quietly */
  -webkit-overflow-scrolling: touch;
}
.nav-groups::-webkit-scrollbar { display: none; }
/* the off-site run, hard against the right edge */
.nav-groups-end { justify-content: flex-end; }

.nav-group { display: flex; align-items: center; gap: 6px; }
.nav-group + .nav-group {
  border-left: 1px solid var(--border);
  padding-left: 14px;
}
.nav-group-label {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  padding-right: 2px;
}

/* one tab */
.nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.15s var(--ease), color 0.15s var(--ease),
    border-color 0.15s var(--ease);
}
.nav-link:hover {
  background: var(--accent-wash);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  color: var(--text);
  text-decoration: none;
}
/* solid mint, exactly how the product marks the tab you're on */
.nav-link.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}
.nav-link.active:hover { background: var(--accent-2); border-color: var(--accent-2); }
.nav-link .nav-icon { width: 17px; height: 17px; flex: none; opacity: 0.9; }
.nav-link.active .nav-icon { opacity: 1; }

/* the little "→" affordance for the tab that embeds the live tracker */
.nav-link .nav-ext {
  font-size: 12px;
  color: var(--text-faint);
  opacity: 0;
  transition: opacity 0.15s var(--ease);
}
.nav-link:hover .nav-ext,
.nav-link.active .nav-ext { opacity: 1; }
.nav-link.active .nav-ext { color: var(--on-accent); }

/* tabs that leave the site: permanently marked with an outward arrow, and
   never highlighted as "active" — they aren't a page you can be on */
.nav-link.is-external { color: var(--text-faint); background: transparent; }
.nav-link.is-external:hover { color: var(--text-muted); }
.nav-link .nav-out {
  width: 13px;
  height: 13px;
  flex: none;
  opacity: 0.55;
  transition: opacity 0.15s var(--ease);
}
.nav-link.is-external:hover .nav-out { opacity: 1; }

/* label read aloud but not drawn */
.nav-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ============================================================
   CONTENT / ROUTER
   ============================================================ */
.content { padding-top: var(--topbar-h); min-height: 100vh; }

.page { display: none; }
.page.is-active { display: block; }

/* the standard reading column for text pages */
.wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 72px 40px 96px;
}

/* ---------- shared bits ---------- */
.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent-wash);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  margin-bottom: 20px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.12s var(--ease), box-shadow 0.15s var(--ease),
    background 0.15s var(--ease);
}
.btn:hover { text-decoration: none; }
.btn-primary {
  color: var(--on-accent);
  background: linear-gradient(150deg, var(--accent-2), var(--accent));
  box-shadow: 0 8px 26px -10px rgba(142, 228, 166, 0.65);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 32px -10px rgba(142, 228, 166, 0.8); }
.btn-ghost {
  color: var(--text);
  background: var(--surface-2);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}
.btn-ghost:hover {
  background: var(--accent-wash);
  border-color: var(--accent-strong);
  transform: translateY(-1px);
}

/* ============================================================
   ABOUT — HERO
   ============================================================ */
.hero {
  max-width: 1180px;
  margin: 0 auto;
  padding: 84px 40px 40px;
  text-align: center;
}
.hero h1 {
  font-size: clamp(2.4rem, 5.2vw, 3.9rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 800;
  margin: 6px 0 20px;
}
.hero h1 .accent {
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hero .lede {
  max-width: 660px;
  margin: 0 auto 30px;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: var(--text-muted);
}
.hero-ctas {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 56px;
}
/* the early-days footnote sits close under the buttons, so it reads as part of
   the same block; without :has support the gap is merely roomier, never broken */
.hero-ctas:has(+ .hero-note) { margin-bottom: 22px; }
.hero-note {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  max-width: 560px;
  margin: 0 auto 52px;
  font-size: 0.9rem;
  line-height: 1.5;
  text-align: left;
  color: var(--text-muted);
}
.hero-note .nav-icon {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  opacity: 0.75;
}

/* the framed product screenshot under the hero copy — and, reused, every shot
   in the showcase sections below. Square corners: the app window in each shot
   has its own frame, and CSS rounding on top of it read as clipped/ugly. */
.hero-shots {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.hero-figure { width: 100%; max-width: 1080px; margin: 0; }

/* the frame is a button: clicking it opens the shot full size (.lightbox) */
.hero-shot {
  display: block;
  width: 100%;
  padding: 0;
  border-radius: 0;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  position: relative;
  cursor: zoom-in;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.hero-shot:hover,
.hero-shot:focus-visible {
  border-color: var(--accent-strong);
  box-shadow: var(--shadow-lg), 0 0 26px -6px rgba(142, 228, 166, 0.35);
}
.hero-shot::after {
  /* faint top sheen so the frame doesn't read as a flat rectangle */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 10%);
  pointer-events: none;
}
.hero-shot img { width: 100%; display: block; }

.hero-cap {
  margin-top: 14px;
  text-align: center;
  font-size: 0.88rem;
  color: var(--text-faint);
}

/* graceful fallback shown when a screenshot file isn't present yet */
.hero-shot.is-missing {
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(-45deg, var(--surface-2) 0 14px, var(--surface) 14px 28px);
  color: var(--text-faint);
  font-size: 14px;
}
.hero-shot.is-missing::before { content: "Product screenshot"; }

/* ============================================================
   ABOUT — SHOWCASE SECTIONS
   ------------------------------------------------------------
   One screenshot per section with its copy beside it, sides
   alternating down the page (the lunamux site's feature stack,
   in Lunicle's own language). Each shot reuses .hero-shot.
   ============================================================ */
.showcases {
  max-width: 1180px;
  margin: 0 auto;
  padding: 96px 40px 40px;
  display: flex;
  flex-direction: column;
  gap: 104px;
}

.showcase {
  display: grid;
  /* the screenshot gets the wider column — it's the thing being shown */
  grid-template-columns: 1fr 1.3fr;
  gap: 52px;
  align-items: center;
  scroll-margin-top: 24px;
}
.showcase[data-side="right"] { grid-template-columns: 1.3fr 1fr; }
.showcase[data-side="right"] .showcase-copy { order: 2; }
.showcase[data-side="right"] .showcase-shots { order: 1; }

.showcase-index {
  display: block;
  font-size: 52px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 6px;
  color: color-mix(in srgb, var(--accent) 26%, transparent);
}
.showcase-copy h2 {
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
  line-height: 1.14;
  letter-spacing: -0.025em;
  font-weight: 800;
  margin: 0 0 14px;
}
.showcase-copy p {
  color: var(--text-muted);
  font-size: 1.02rem;
  margin: 0 0 22px;
}

/* the short bullet list — the run of text before the first space in each
   <span> reads as the line's key, in the accent */
.kv { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.kv li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 0.94rem;
  color: var(--text-muted);
}
.kv li span:first-child {
  flex: none;
  min-width: 82px;
  color: var(--accent-ink);
  font-weight: 600;
}

.showcase-shots { display: flex; flex-direction: column; gap: 20px; }
.showcase-shots .hero-figure { max-width: none; }

/* A section with nothing to show: one centred column, so the page reads as one
   continuous list of sections rather than switching into a grid of boxes. */
.showcase.is-noshot { grid-template-columns: 1fr; justify-items: center; }
.showcase.is-noshot .showcase-copy { max-width: 660px; text-align: center; }
.showcase.is-noshot .feat-icon { margin: 0 auto 14px; }
.showcase.is-noshot .kv { text-align: left; max-width: 520px; margin: 0 auto; }

/* A labelled divider opening a new run of sections ("What's inside", "In the
   works") — fading rules either side of a small centred pill. */
.showcase-sep {
  display: flex;
  align-items: center;
  gap: 18px;
  scroll-margin-top: 24px;
  /* pull in against the stack's own gap, so the rule reads as belonging with
     the section under it rather than floating between two of them */
  margin: -26px 0;
}
.showcase-sep::before,
.showcase-sep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
}
.showcase-sep-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent-wash);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  padding: 5px 14px;
  border-radius: var(--radius-pill);
}

/* ============================================================
   ABOUT — the mint icon tile + the "experimental" badge
   ------------------------------------------------------------
   What is left of the old feature-card grid: the sections that
   have no screenshot carry the icon, and the unfinished ones
   carry the badge.
   ============================================================ */
.feat-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  background: var(--accent-wash);
  color: var(--accent-ink);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}
.feat-icon svg { width: 23px; height: 23px; }

.tag-exp {
  display: inline-block;
  vertical-align: middle;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  /* the amber the product uses for a High priority, on a dark wash */
  color: #e7b55e;
  background: #241d10;
  border: 1px solid #4d3f21;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  margin-left: 6px;
  position: relative;
  top: -1px;
}

/* ============================================================
   ABOUT — CLOSING CTA
   ============================================================ */
.closing { padding: 20px 40px 110px; }
.closing-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  text-align: center;
  padding: 60px 40px;
  border-radius: var(--radius-lg);
  /* the one mint panel on the page — the same solid mint the product puts
     across the top of a board, so the page ends on the product's own note */
  color: var(--on-accent);
  background:
    radial-gradient(700px 300px at 20% 0%, rgba(255, 255, 255, 0.22), transparent 60%),
    linear-gradient(140deg, var(--accent-strong), var(--accent) 55%, var(--accent-2));
  box-shadow: var(--shadow-lg);
}
.closing-inner h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.closing-inner p {
  max-width: 520px;
  margin: 0 auto 26px;
  color: rgba(6, 23, 13, 0.78);
  font-size: 1.05rem;
}
.closing-ctas {
  display: flex;
  gap: 16px 20px;
  justify-content: center;
  flex-wrap: wrap;
}
.cta-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.cta-note {
  display: inline-block;
  font-size: 12.5px;
  color: rgba(6, 23, 13, 0.72);
  letter-spacing: 0.01em;
  max-width: 30ch;
  text-align: center;
  text-wrap: balance;
}
/* on the mint panel the buttons invert: dark fill, mint text */
.closing-inner .btn {
  background: var(--bg);
  color: var(--accent-ink);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
}
.closing-inner .btn:hover { background: var(--surface); transform: translateY(-1px); }
.closing-inner .btn-on-dark {
  background: rgba(6, 23, 13, 0.1);
  color: var(--on-accent);
  border-color: rgba(6, 23, 13, 0.4);
  box-shadow: none;
}
.closing-inner .btn-on-dark:hover {
  background: rgba(6, 23, 13, 0.18);
  transform: translateY(-1px);
}

/* ============================================================
   PLACEHOLDER PAGES (Demo / Docs / News / Discuss)
   ============================================================ */
.placeholder { text-align: center; max-width: 640px; margin: 0 auto; padding: 40px 0; }
.placeholder h1 {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
}
.placeholder p { color: var(--text-muted); font-size: 1.08rem; margin: 0 auto 26px; }
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 26px;
}
.status-chip::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 0 3px var(--accent-wash);
}

/* a big soft placeholder canvas under the intro */
.placeholder-canvas {
  margin-top: 44px;
  height: 300px;
  border-radius: var(--radius-lg);
  border: 1px dashed var(--border-strong);
  background:
    radial-gradient(500px 220px at 50% 0%, var(--accent-wash), transparent 70%),
    var(--surface);
  display: grid;
  place-items: center;
  color: var(--text-faint);
  font-size: 14px;
}

/* ============================================================
   GITHUB (intentionally blank)
   ============================================================ */
#page-github .wrap { min-height: 40vh; }

/* ============================================================
   ISSUES — embedded tracker (chromeless, full height)
   ============================================================ */
body.issues-active .content,
body.demo-active .content { min-height: 100vh; }
.issues-frame,
.demo-frame {
  position: fixed;
  inset: var(--topbar-h) 0 0 0;
  border: 0;
  width: auto;
  height: auto;
  background: var(--surface);
  /* Elsewhere the top bar's panel sits against the darker page bg, so its own
     hairline is enough. Here it butts straight up against the embedded app —
     dark on dark, and the app has its own tab bar right behind the seam — so a
     hairline reads as one more divider inside the product. A 2px rule a good
     step lighter than --border-strong makes the chrome sit visibly *above* it
     rather than continuous; the bar's own drop shadow does the rest. No inset
     shadow here: it would darken the app's tab row, which reads as the top of
     the product being clipped. */
  border-top: 2px solid #3c5b4a;
}

/* The bar's fade is a scroll affordance for the *page*. Over the embedded app
   nothing scrolls under the bar, so it would just lay a dark band across the
   product's own tab row — the top of the app looking cut off. */
body.issues-active .topbar::after,
body.demo-active .topbar::after { display: none; }
.issues-frame iframe,
.demo-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ============================================================
   CREDITS
   ============================================================ */
.credit-groups { display: flex; flex-direction: column; gap: 14px; margin-top: 40px; }
.credit-group {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 26px;
  box-shadow: var(--shadow-sm);
}
.credit-group h2 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 14px;
}
.credit-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  padding: 9px 0;
  border-top: 1px solid var(--border);
}
.credit-item:first-of-type { border-top: 0; }
.credit-name { font-weight: 600; font-size: 1.02rem; }
.credit-role { color: var(--text-muted); font-size: 0.92rem; }

/* cross-promo for Lunamux — a "terminal window" that echoes the lunamux site
   (near-black navy ground, cyan glow, monospace). Its own local tokens, so it
   stays navy-and-cyan against the mint-and-green page around it. */
.lmx-promo {
  --lmx-bg: #070f1a;
  --lmx-bar: #0b1626;
  --lmx-cyan: #4dc8f5;
  --lmx-cyan-hi: #66d9ff;
  --lmx-dim: #7f95ad;
  --lmx-border: rgba(77, 200, 245, 0.34);

  display: block;
  margin-top: 40px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--lmx-bg);
  border: 1px solid var(--lmx-border);
  box-shadow: 0 18px 40px -20px rgba(6, 20, 38, 0.55),
    0 0 0 1px rgba(77, 200, 245, 0.04) inset;
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  color: var(--lmx-dim);
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease),
    border-color 0.18s var(--ease);
}
.lmx-promo:hover {
  text-decoration: none;
  transform: translateY(-2px);
  border-color: var(--border-hi, rgba(77, 200, 245, 0.45));
  box-shadow: 0 24px 48px -20px rgba(6, 20, 38, 0.6),
    0 0 24px -6px rgba(77, 200, 245, 0.35);
}

/* the title bar with traffic-light dots */
.lmx-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  background: var(--lmx-bar);
  border-bottom: 1px solid var(--lmx-border);
}
.lmx-bar-title {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lmx-dim);
}

.lmx-body { display: block; padding: 20px 22px 22px; }
.lmx-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.lmx-icon {
  width: 26px;
  height: 26px;
  flex: none;
  color: var(--lmx-cyan);
  filter: drop-shadow(0 0 6px rgba(77, 200, 245, 0.5));
}
.lmx-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #eaf6ff;
  letter-spacing: 0.01em;
}
.lmx-tagline {
  display: block;
  font-size: 0.98rem;
  color: var(--lmx-cyan-hi);
  margin-bottom: 8px;
}
.lmx-desc { display: block; font-size: 0.88rem; color: var(--lmx-dim); line-height: 1.55; }
.lmx-cta {
  display: inline-block;
  margin-top: 16px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--lmx-cyan-hi);
}
.lmx-promo:hover .lmx-cta { text-shadow: 0 0 12px rgba(102, 217, 255, 0.6); }

/* discreet Framna line at the foot of the Credits page (outside the boxes) */
.credits-framna {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 48px;
  padding: 0 6px;
}
.credits-framna-mark {
  display: inline-flex;
  width: 26px;
  height: 26px;
  flex: none;
  color: var(--text-muted);
  transition: color 0.15s var(--ease);
}
.credits-framna-mark:hover { color: var(--accent); }
.credits-framna-mark svg { display: block; width: 100%; height: 100%; }
.credits-framna p { margin: 0; font-size: 0.9rem; color: var(--text-faint); }
.credits-framna a { color: var(--text-muted); font-weight: 500; }

/* ============================================================
   FRAMNA
   ============================================================ */
.back-link {
  display: block;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 44px;
}
.back-link:hover { color: var(--accent); }

/* Laid out like the lunamux site's Framna tab — centred wordmark, a centred
   blurb, three link cards and a small non-endorsement note — with the mint
   accent doing the work its cyan does there. */
.framna-block { text-align: center; margin: 8px auto 0; }

.framna-logo {
  display: flex;
  justify-content: center;
  margin: 4px auto 18px;
  color: var(--accent);
  transition: opacity 0.2s var(--ease);
}
.framna-logo:hover { opacity: 0.82; }
.framna-wordmark {
  display: block;
  width: min(340px, 72%);
  height: auto;
  color: inherit;
  filter: drop-shadow(0 0 22px rgba(142, 228, 166, 0.22));
}

.framna-body {
  max-width: 62ch;
  margin: 0 auto;
  color: var(--text-muted);
  font-size: 1.02rem;
  line-height: 1.7;
}
/* Links in the blurb keep the surrounding colour — only the underline says
   they're links, so the paragraph doesn't turn speckled. */
.framna-body a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s var(--ease);
}
.framna-body a:hover { color: var(--accent-ink); }

.framna-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 820px;
  margin: 30px auto 0;
}
.framna-card {
  display: flex;
  flex-direction: column;
  padding: 18px 20px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: left;
  color: var(--text-muted);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease),
    transform 0.2s var(--ease);
}
.framna-card:hover {
  text-decoration: none;
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  box-shadow: var(--shadow-md), 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}
.framna-card-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.framna-card-body {
  margin-top: 12px;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-muted);
}
/* the CTA sits at the card's foot, so cards of uneven copy stay aligned */
.framna-card-link {
  margin-top: auto;
  padding-top: 16px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--accent-ink);
}
.framna-card-arrow { display: inline-block; transition: transform 0.2s var(--ease); }
.framna-card:hover .framna-card-arrow { transform: translateX(3px); }

.framna-disclaimer {
  max-width: 62ch;
  margin: 26px auto 0;
  padding-top: 18px;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--text-faint);
}

/* ============================================================
   LIGHTBOX — a screenshot at full size, over the page
   ============================================================ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;                /* above the top bar (40) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(3, 8, 5, 0.95);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.2s var(--ease);
}
.lightbox[hidden] { display: none; }
.lightbox.open { opacity: 1; }

.lightbox-img {
  /* sized to the viewport, so the whole screenshot always fits */
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 48px);
  width: auto;
  height: auto;
  object-fit: contain;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.8);
}

.lightbox-close {
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  z-index: 1;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 26px;
  line-height: 1;
  color: var(--accent-ink);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease),
    border-color 0.15s var(--ease);
}
.lightbox-close:hover,
.lightbox-close:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  outline: none;
}

/* the page behind a full-size shot doesn't scroll under it */
body.zoomed { overflow: hidden; }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal.visible { opacity: 1; transform: none; }

/* ============================================================
   DOCS — the manual (#/docs)
   ------------------------------------------------------------
   Two columns: a sticky contents rail on the left, the article
   on the right. The rail mirrors SITE_DOCS.sections and is
   scroll-spied by app.js, which boxes the entry you're reading.
   Below 980px the columns stack and the rail becomes a
   collapsible <details> above the article.
   ============================================================ */
/* Wider and with tighter gutters than the rest of the site: this is a
   two-column reading page, so the width is better spent on the rail and the
   prose than on empty margin. */
.docs-page {
  max-width: 1240px;
  padding-left: 28px;
  padding-right: 28px;
}
.docs-title {
  margin: 0 0 12px;
  font-size: clamp(2rem, 3.6vw, 2.7rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}
.docs-lede {
  margin: 0 0 44px;
  max-width: 68ch;
  color: var(--text-muted);
  font-size: 1.08rem;
}
.docs-layout {
  display: grid;
  grid-template-columns: 262px minmax(0, 1fr);
  gap: 52px;
  align-items: start;
}

/* ---------- contents rail ---------- */
.docs-toc-wrap {
  position: sticky;
  /* clears the fixed top bar */
  top: calc(var(--topbar-h) + 16px);
  max-height: calc(100vh - var(--topbar-h) - 40px);
  overflow-y: auto;
  padding-right: 8px;
  border-right: 1px solid var(--border);
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.docs-toc-wrap::-webkit-scrollbar { width: 8px; }
.docs-toc-wrap::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 4px;
}
.docs-toc-wrap::-webkit-scrollbar-thumb:hover { background: var(--accent-strong); }
.docs-toc-list,
.docs-toc-sublist { list-style: none; margin: 0; padding: 0; }
.docs-toc-group { margin-bottom: 18px; }
.docs-toc-sublist { margin: 4px 0 0; }
.docs-toc-link {
  display: block;
  padding: 5px 9px 5px 9px;
  border-left: 2px solid transparent;
  color: var(--text-faint);
  font-size: 13px;
  line-height: 1.45;
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.docs-toc-link:hover {
  color: var(--text);
  background: var(--accent-wash);
  text-decoration: none;
}
/* Top-level entries read as headers: brighter, uppercase, tracked out. */
.docs-toc-top {
  color: var(--text);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
}
.docs-toc-sub { padding-left: 16px; }
/* The section currently in the viewport (set by app.js). */
.docs-toc-link.active {
  color: var(--accent-2);
  border-left-color: var(--accent);
  background: var(--accent-wash);
}

/* ---------- article ---------- */
.docs-body { min-width: 0; max-width: 86ch; }
.docs-section { padding-bottom: 22px; }
.docs-section + .docs-section {
  margin-top: 52px;
  padding-top: 44px;
  border-top: 1px solid var(--border);
}
.docs-h2 {
  /* keep deep-linked headings clear of the fixed top bar */
  scroll-margin-top: calc(var(--topbar-h) + 18px);
  margin: 0 0 12px;
  color: var(--text);
  font-size: clamp(1.45rem, 2.6vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.docs-sub { scroll-margin-top: calc(var(--topbar-h) + 18px); margin-top: 38px; }
.docs-h3 {
  scroll-margin-top: calc(var(--topbar-h) + 18px);
  margin: 0 0 11px;
  color: var(--accent-2);
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
/* The "#" self-link, revealed on heading hover. */
.docs-anchor {
  margin-left: 10px;
  color: var(--text-faint);
  font-size: 0.72em;
  font-weight: 500;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}
.docs-h2:hover .docs-anchor,
.docs-h3:hover .docs-anchor { opacity: 1; }
.docs-anchor:hover { color: var(--accent); text-decoration: none; }
.docs-anchor:focus-visible { opacity: 1; }
.docs-intro {
  margin: 0 0 22px;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.75;
}
.docs-body p {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.78;
}
.docs-body strong { color: var(--text); font-weight: 650; }
.docs-body em { color: var(--text-muted); }
/* Inline code — a ticket number, an environment variable, a path. */
.docs-body code {
  padding: 1px 5px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface-2);
  color: var(--accent-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86em;
  white-space: nowrap;
}
/* Cross-references, underlined so they're findable in prose. */
.docs-body a:not(.docs-anchor):not(.docs-shot-zoom) {
  color: var(--accent-ink);
  border-bottom: 1px solid var(--border-strong);
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s;
}
.docs-body a:not(.docs-anchor):not(.docs-shot-zoom):hover,
.docs-body a:not(.docs-anchor):not(.docs-shot-zoom):focus-visible {
  color: var(--accent-2);
  border-bottom-color: var(--accent);
  text-decoration: none;
}

/* ---------- lists ---------- */
.docs-ul,
.docs-ol {
  margin: 0 0 18px;
  padding-left: 20px;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.78;
}
.docs-ul li,
.docs-ol li { margin-bottom: 7px; }
.docs-ul li::marker,
.docs-ol li::marker { color: var(--accent-strong); }
/* Labelled list — the same "key + description" shape as the About bullets. */
.docs-kv {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  gap: 10px;
}
.docs-kv li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.7;
}
.docs-kv-v { flex: 1 1 auto; min-width: 0; }
/* The term being defined. Weight does the separating rather than the accent,
   which belongs to the links sitting inside the description beside it. */
.docs-kv-k {
  flex: 0 0 auto;
  min-width: 108px;
  color: var(--text);
  font-weight: 700;
}

/* ---------- numbered walkthroughs ---------- */
/* For deployment, where "step 6" has to be a thing you can point at. */
.docs-steps {
  list-style: none;
  counter-reset: docs-step;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  gap: 14px;
}
.docs-steps > li {
  counter-increment: docs-step;
  position: relative;
  padding: 14px 16px 14px 52px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.docs-steps > li::before {
  content: counter(docs-step);
  position: absolute;
  left: 14px;
  top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 12px;
  font-weight: 800;
}
.docs-step-title {
  display: block;
  margin-bottom: 4px;
  color: var(--text);
  font-weight: 700;
  font-size: 0.97rem;
}
.docs-step-body {
  display: block;
  color: var(--text-muted);
  font-size: 0.93rem;
  line-height: 1.72;
}
.docs-step-body p { margin: 0 0 0.7em; }
.docs-step-body p:last-child { margin-bottom: 0; }

/* ---------- tables ---------- */
/* Scrolls inside its own box, so a wide reference table never makes the page
   itself scroll sideways. */
.docs-table-wrap {
  margin: 0 0 20px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.docs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.docs-table th,
.docs-table td {
  padding: 9px 14px;
  text-align: left;
  vertical-align: top;
  line-height: 1.6;
}
.docs-table thead th {
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.docs-table tbody tr + tr td { border-top: 1px solid var(--border); }
.docs-table td { color: var(--text-muted); }
.docs-table td:first-child { color: var(--text); }
.docs-table code { white-space: nowrap; }

/* ---------- code / configuration blocks ---------- */
.docs-code {
  margin: 0 0 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.docs-code-title {
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-faint);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
}
.docs-code pre {
  margin: 0;
  padding: 14px;
  overflow-x: auto;
}
.docs-code code {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  line-height: 1.7;
  white-space: pre;
}

/* ---------- shortcut tables ---------- */
.docs-keys {
  margin: 0 0 20px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.docs-keys-title {
  margin: 0 0 10px;
  color: var(--text-faint);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.docs-keys-grid { display: grid; gap: 2px; }
.docs-key-row {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 6px 0;
}
.docs-key-row + .docs-key-row { border-top: 1px solid var(--border); }
.docs-key-caps { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.docs-key-caps kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.7em;
  height: 1.7em;
  padding: 0 0.45em;
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--accent-2);
  font: 700 11.5px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.docs-key-desc { color: var(--text-muted); font-size: 0.86rem; line-height: 1.55; }

/* ---------- callouts ---------- */
/* A left rule and a small tag, so an aside reads as something you can skip
   without losing the thread. */
.docs-note {
  margin: 0 0 20px;
  padding: 13px 17px;
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--accent-wash);
}
.docs-note--warn {
  border-left-color: #e8c46a;
  background: rgba(232, 196, 106, 0.06);
}
.docs-note--do {
  border-left-color: var(--accent-2);
  background: rgba(183, 242, 200, 0.05);
}
.docs-note-tag {
  display: block;
  margin-bottom: 6px;
  color: var(--accent);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.docs-note--warn .docs-note-tag { color: #e8c46a; }
.docs-note--do .docs-note-tag { color: var(--accent-2); }
.docs-note-body { color: var(--text-muted); font-size: 0.9rem; line-height: 1.72; }
.docs-note-body p { margin: 0 0 0.7em; font-size: 0.9rem; }
.docs-note-body p:last-child { margin-bottom: 0; }
.docs-note-body ul { margin: 0.4em 0 0; padding-left: 18px; }
.docs-note-body li { margin-bottom: 4px; }

/* ---------- screenshots ---------- */
/* Frameless: every shot in the manual is already a picture of a window, so a
   drawn-on title bar would nest one set of chrome inside another. The frame
   hugs the picture rather than filling the column. */
.docs-shot { margin: 0 0 24px; }
.docs-shot-zoom {
  display: block;
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  cursor: zoom-in;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.docs-shot-zoom:hover,
.docs-shot-zoom:focus-visible {
  border-color: var(--accent-strong);
  box-shadow: var(--shadow-lg);
  outline: none;
}
.docs-shot-zoom img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 560px;
  height: auto;
  margin: 0 auto;
  border-radius: 8px;
}
/* A shot whose file is missing degrades to a labelled slot rather than a
   broken-image icon. */
.docs-shot-zoom.is-missing {
  width: 100%;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  background:
    repeating-linear-gradient(135deg, var(--surface) 0 12px, var(--surface-2) 12px 24px);
}
.docs-shot-zoom.is-missing::before {
  content: "Screenshot";
  color: var(--text-faint);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.docs-shot figcaption {
  margin-top: 9px;
  color: var(--text-faint);
  font-size: 0.8rem;
  line-height: 1.6;
  text-align: center;
}

/* ---------- inline app glyphs ---------- */
/* The real glyph from the app, rendered as a small chip, so a sentence naming
   a button shows that button. The SVG inherits colour via currentColor. */
.docs-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: -0.25em;
  margin: 0 0.15em;
  color: var(--accent);
}
.docs-icon svg { height: 16px; width: auto; display: block; }
.docs-kv-k .docs-icon { color: inherit; margin: 0 0.1em; }
.docs-kv-k .docs-icon svg { height: 14px; }
.docs-kv-icon .docs-kv-k { min-width: 24px; color: var(--accent); }
.docs-kv-icon .docs-kv-k .docs-icon { margin: 0; }

/* ---------- stacked layout ---------- */
.docs-toc-details > summary { display: none; }
.docs-toc-summary {
  list-style: none;
  cursor: pointer;
  align-items: center;
  gap: 10px;
  padding: 10px 2px;
  color: var(--text);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.docs-toc-summary::-webkit-details-marker { display: none; }
.docs-tw { display: inline-block; transition: transform 0.2s var(--ease); }
.docs-toc-details[open] > .docs-toc-summary .docs-tw { transform: rotate(90deg); }

@media (max-width: 980px) {
  .docs-page { padding-left: 22px; padding-right: 22px; }
  .docs-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .docs-toc-wrap {
    position: static;
    max-height: none;
    overflow: visible;
    padding: 0 0 18px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .docs-toc-details > summary { display: flex; }
  .docs-key-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .docs-kv li { flex-direction: column; gap: 2px; }
  .docs-kv-k { min-width: 0; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  /* the tagline under the wordmark is the first thing to go — the tab row
     needs the width more than the brand needs a second line */
  .brand-tag { display: none; }
  /* no room for centring rails — brand, then the tabs taking what's left */
  .topbar { display: flex; gap: 14px; padding: 0 14px; }
  .nav-groups { flex: 1; justify-content: flex-start; }
  .nav-groups-end { flex: none; }

  .hero { padding-top: 40px; }
  .framna-points { grid-template-columns: 1fr; }

  /* copy above its screenshot — side by side, neither has room to read */
  .showcases { padding: 72px 22px 24px; gap: 76px; }
  .showcase,
  .showcase[data-side="right"] { grid-template-columns: 1fr; gap: 26px; }
  .showcase[data-side="right"] .showcase-copy { order: 1; }
  .showcase[data-side="right"] .showcase-shots { order: 2; }
  .showcase-index { font-size: 42px; }
}

@media (max-width: 680px) {
  .wrap { padding: 60px 22px 80px; }
  .hero { padding: 88px 22px 32px; }
  .closing { padding: 10px 22px 80px; }
  .closing-inner { padding: 44px 24px; }
  .hero-ctas .btn { width: 100%; justify-content: center; }

  .hero-shots { gap: 30px; }
  .showcases { gap: 64px; }
  /* the key runs above its line rather than squeezing the text into a sliver */
  .kv li { flex-direction: column; gap: 2px; }
  .kv li span:first-child { min-width: 0; }
}