/* =============================================================
   ANALOG REALISM — site styles
   Pure CSS. No frameworks. No dependencies.
   ============================================================= */

/* --- Reset / base ------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  font-family: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "ss01";
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
input, textarea, select { font: inherit; color: inherit; }

/* --- Design tokens ------------------------------------------ */
:root {
  --bg:           #0E0D0B;
  --bg-elev:     #15130F;
  --bg-paper:    #F3EFE6;
  --fg:          #ECE7DC;
  --fg-dim:      #8A847A;
  --fg-mute:     #56524B;
  --line:        rgba(236, 231, 220, 0.10);
  --line-strong: rgba(236, 231, 220, 0.22);
  --accent:      #D67B3C;
  --accent-soft: #B86A33;
  --accent-cool: #6DD3FF;
  --accent-cool-soft: #4FA9D2;
  --glow-warm: 0 0 24px rgba(214, 123, 60, 0.22);
  --glow-cool: 0 0 24px rgba(109, 211, 255, 0.18);
  --paper-fg:    #1C1A16;
  --paper-dim:   #6D6759;
  --paper-line:  rgba(28, 26, 22, 0.14);

  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --pad: clamp(20px, 5vw, 64px);
  --gut: clamp(16px, 4vw, 48px);
  --maxw: 1480px;

  --t-fast: 140ms ease;
  --t-med: 280ms cubic-bezier(.2,.7,.2,1);
}

/* --- Utility ------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}
.mono {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 400;
}
.dim { color: var(--fg-dim); }
.accent { color: var(--accent); }
.rule { height: 1px; background: var(--line); width: 100%; }
.rule.strong { background: var(--line-strong); }

/* Make nested elements selectable and direct-editable */
h1, h2, h3, h4, p { text-wrap: pretty; }

/* --- Skip-to-content link --------------------------------------
   Visually hidden until keyboard focus moves to it; first
   tab-stop in the document so screen-reader / keyboard users can
   bypass the header nav and jump straight into <main>. */
.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 14px;
  background: var(--accent);
  color: #0E0D0B;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 4px;
  transform: translateY(-200%);
  transition: transform var(--t-fast);
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}

/* =============================================================
   Header / navigation
   ============================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(14, 13, 11, 0.86);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: 32px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  letter-spacing: 0;
}
.brand-mark {
  width: 22px;
  height: 22px;
  display: block;
}
.brand-text {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.brand-text .b-sub {
  color: var(--fg-dim);
  font-weight: 400;
  margin-left: 6px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav a {
  position: relative;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--fg);
  opacity: 0.78;
  transition: opacity var(--t-fast);
  letter-spacing: 0.01em;
}
.nav a:hover { opacity: 1; }
.nav a.is-active {
  opacity: 1;
}
.nav a.is-active::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 2px;
  height: 1px;
  background: var(--accent);
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 16px;
}
.nav-right .mono { color: var(--fg-dim); }

/* Social icons — inline SVGs in the nav; inherit nav text colour via
   currentColor, mirror the nav links' opacity hover, and add a subtle
   accent shift to signal these are external links. */
.social-icons {
  display: flex;
  flex-direction: row;   /* explicit — never inherit a column axis */
  flex-wrap: nowrap;     /* the four icons always stay on one line */
  align-items: center;
  gap: 14px;
}
.social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg);
  opacity: 0.72;
  transition: opacity var(--t-fast), color var(--t-fast);
}
.social-icons a:hover,
.social-icons a:focus-visible {
  opacity: 1;
  color: var(--accent);
}
.social-icons svg {
  width: 18px;
  height: 18px;
  display: block;
}
@media (max-width: 880px) {
  /* keep icons visible beside the hamburger; tighten spacing slightly */
  .social-icons { gap: 12px; }
}
@media (max-width: 380px) {
  .social-icons { gap: 9px; }
  .social-icons svg { width: 17px; height: 17px; }
}

/* Discord icon: 2s game-menu-style breathing pulse with warm→electric color
   shift (copper ember → cyan spark) and opacity rise. Targets only the Discord
   anchor by aria-label so the other five icons stay static. The SVG uses
   fill="currentColor", so animating color on the SVG drives the fill directly. */
@keyframes discord-breathe {
  0%, 100% {
    transform: scale(1.0);
    opacity: 0.55;
    color: var(--accent);          /* warm copper-orange at dim/smallest */
  }
  50% {
    transform: scale(1.36);
    opacity: 1;
    color: var(--accent-cool);     /* electric cyan-blue at bright/biggest */
  }
}
@keyframes accent-dot-breathe {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}
.social-icons a[aria-label="Analog Realism on Discord"] {
  /* Override .social-icons a's static opacity:0.72 so the SVG's animated
     opacity isn't multiplied by it (which would cap visible brightness). */
  opacity: 1;
}
.social-icons a[aria-label="Analog Realism on Discord"] svg {
  animation: discord-breathe 2s ease-in-out infinite;
  transform-origin: center center;
  will-change: transform, opacity, color;
}
@media (prefers-reduced-motion: reduce) {
  .social-icons a[aria-label="Analog Realism on Discord"] svg {
    animation: none;
  }
  .social-icons a[aria-label="Analog Realism on Discord"] {
    opacity: 0.72;                 /* match the other social icons when motion is off */
  }
  .hero h1 .accent-mark::after { animation: none; }
}

/* Mobile menu trigger */
.menu-toggle {
  display: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  border: 1px solid var(--line-strong);
}
.menu-toggle .bars {
  display: block;
  width: 16px; height: 1px;
  background: var(--fg);
  position: relative;
}
.menu-toggle .bars::before,
.menu-toggle .bars::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--fg);
}
.menu-toggle .bars::before { top: -5px; }
.menu-toggle .bars::after { top: 5px; }

/* Mobile drawer */
.mobile-nav {
  position: fixed;
  inset: 64px 0 0 0;
  background: var(--bg);
  z-index: 49;
  transform: translateY(-110%);
  transition: transform var(--t-med);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.mobile-nav.is-open { transform: translateY(0); }
.mobile-nav a {
  padding: 22px var(--pad);
  font-size: 22px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.mobile-nav a .idx {
  color: var(--fg-mute);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
}
.mobile-nav a.is-active {
  color: var(--accent);
  border-left: 2px solid var(--accent);
}
.mobile-nav a.is-active .idx {
  color: var(--accent);
}

@media (max-width: 880px) {
  .nav, .nav-right .mono { display: none; }
  .menu-toggle { display: inline-flex; }
}

/* =============================================================
   Hero — main page
   ============================================================= */
.hero {
  padding-top: clamp(48px, 9vw, 110px);
  padding-bottom: clamp(40px, 7vw, 80px);
  border-bottom: 1px solid var(--line);
}
.hero-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: var(--fg-dim);
  margin-bottom: clamp(32px, 6vw, 64px);
  gap: 24px;
  flex-wrap: wrap;
}
.hero-meta .meta-right { color: var(--fg-mute); }
.hero h1 {
  font-size: clamp(40px, 8.4vw, 132px);
  line-height: 0.94;
  letter-spacing: -0.025em;
  font-weight: 400;
  max-width: 16ch;
}
.hero h1 .em {
  font-style: italic;
  font-weight: 300;
  color: var(--fg-dim);
}
.hero-tagline {
  max-width: 52ch;
  margin-top: clamp(28px, 4vw, 44px);
  font-size: clamp(16px, 1.6vw, 19px);
  color: var(--fg);
  opacity: 0.85;
  line-height: 1.55;
}
.hero-cta {
  margin-top: clamp(28px, 4vw, 44px);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  font-size: 13px;
  letter-spacing: 0.02em;
  border: 1px solid var(--line-strong);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  position: relative;
}
.btn .arrow {
  width: 14px; height: 1px;
  background: currentColor;
  position: relative;
  transition: transform var(--t-fast);
}
.btn .arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: -3px;
  width: 7px; height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.btn:hover .arrow { transform: translateX(4px); }
.btn-primary {
  background: var(--accent);
  color: #0E0D0B;
  border-color: var(--accent);
}
.btn-primary:hover { background: #E58647; border-color: #E58647; }
.btn-ghost { background: transparent; color: var(--fg); }
.btn-ghost:hover { background: rgba(236, 231, 220, 0.06); }

/* =============================================================
   Hero visual / image-slot
   ============================================================= */
.imgslot {
  position: relative;
  width: 100%;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(236, 231, 220, 0.020) 0 12px,
      rgba(236, 231, 220, 0.045) 12px 24px
    ),
    #14120F;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.imgslot::before {
  /* crosshair */
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 28px; height: 28px;
  transform: translate(-50%, -50%);
  background:
    linear-gradient(var(--fg-mute), var(--fg-mute)) no-repeat center/1px 100%,
    linear-gradient(var(--fg-mute), var(--fg-mute)) no-repeat center/100% 1px;
  opacity: 0.5;
}
.imgslot-label {
  position: absolute;
  bottom: 14px; left: 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.imgslot-spec {
  position: absolute;
  bottom: 14px; right: 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.imgslot.has-image { background: none; border-color: transparent; }
.imgslot.has-image::before, .imgslot.has-image .imgslot-label, .imgslot.has-image .imgslot-spec { display: none; }
.imgslot img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hero-visual {
  margin-top: clamp(48px, 8vw, 96px);
  height: clamp(280px, 52vw, 620px);
}

/* Paper inversion */
.paper {
  background: var(--bg-paper);
  color: var(--paper-fg);
}
.paper .dim { color: var(--paper-dim); }
.paper .rule { background: var(--paper-line); }
.paper .imgslot {
  background:
    repeating-linear-gradient(45deg, rgba(28,26,22,0.04) 0 12px, rgba(28,26,22,0.08) 12px 24px),
    #E8E2D4;
  border-color: var(--paper-line);
}
.paper .imgslot::before {
  background:
    linear-gradient(var(--paper-dim), var(--paper-dim)) no-repeat center/1px 100%,
    linear-gradient(var(--paper-dim), var(--paper-dim)) no-repeat center/100% 1px;
}
.paper .imgslot-label, .paper .imgslot-spec { color: var(--paper-dim); }
.paper .btn { border-color: var(--paper-line); }
.paper .btn-ghost { color: var(--paper-fg); }
.paper .btn-ghost:hover { background: rgba(28,26,22,0.04); }

/* =============================================================
   Section scaffolding
   ============================================================= */
.section {
  padding-top: clamp(64px, 9vw, 128px);
  padding-bottom: clamp(64px, 9vw, 128px);
  border-bottom: 1px solid var(--line);
}
.paper.section { border-bottom: 1px solid var(--paper-line); }

.section-head {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--gut);
  margin-bottom: clamp(40px, 6vw, 72px);
  align-items: baseline;
}
.section-head .eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.paper .section-head .eyebrow { color: var(--paper-dim); }
.section-head h2 {
  font-size: clamp(28px, 4.2vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.018em;
  font-weight: 400;
  max-width: 22ch;
}
.section-head h2 .em { font-style: italic; font-weight: 300; opacity: 0.62; }
@media (max-width: 720px) {
  .section-head { grid-template-columns: 1fr; gap: 16px; }
}

/* =============================================================
   Product featured (main page)
   ============================================================= */
.feature-product {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--gut);
  align-items: stretch;
}
.feature-product .fp-visual {
  position: relative;
  min-height: 460px;
}
.feature-product .fp-meta {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 8px 0;
}
.fp-tag {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--fg-dim);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.fp-tag .dot {
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
}
.fp-title {
  font-size: clamp(32px, 4.6vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.018em;
  margin: clamp(16px, 2vw, 28px) 0 16px;
  font-weight: 400;
}
.fp-desc {
  font-size: clamp(15px, 1.4vw, 18px);
  max-width: 48ch;
  color: var(--fg);
  opacity: 0.86;
}
.fp-specs {
  margin-top: clamp(24px, 3vw, 40px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.fp-specs > li {
  background: var(--bg);
  padding: 16px;
}
.fp-specs .k {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
  display: block;
  margin-bottom: 6px;
}
.fp-specs .v {
  font-size: 14px;
}
.fp-cta { margin-top: clamp(28px, 4vw, 44px); display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 880px) {
  .feature-product { grid-template-columns: 1fr; }
  .feature-product .fp-visual { min-height: 320px; }
}

/* =============================================================
   Pillars / philosophy row
   ============================================================= */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}
.pillar {
  background: var(--bg);
  padding: clamp(28px, 3vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 240px;
}
.pillar .idx {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.pillar h3 {
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 400;
  max-width: 18ch;
}
.pillar p {
  color: var(--fg);
  opacity: 0.8;
  font-size: 14.5px;
  margin-top: auto;
  max-width: 42ch;
}
@media (max-width: 880px) { .pillars { grid-template-columns: 1fr; } }

/* =============================================================
   Marquee / numbers strip (subtle)
   ============================================================= */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}
.stat {
  background: var(--bg);
  padding: clamp(28px, 3vw, 44px) clamp(20px, 2vw, 28px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.stat .num {
  font-size: clamp(34px, 4.2vw, 60px);
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 400;
}
.stat .num .sm { font-size: 0.4em; color: var(--fg-dim); margin-left: 4px; vertical-align: super; }
.stat .lbl {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-top: 12px;
}
@media (max-width: 720px) { .stat-strip { grid-template-columns: repeat(2, 1fr); } }

/* =============================================================
   Product page
   ============================================================= */
.product-hero {
  padding-top: clamp(56px, 8vw, 110px);
  padding-bottom: clamp(40px, 6vw, 80px);
}
.product-hero .crumbs {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
  display: flex;
  gap: 10px;
}
.product-hero .crumbs .sep { color: var(--fg-mute); }

.product-hero-grid {
  margin-top: clamp(32px, 5vw, 64px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gut);
  align-items: end;
}
.product-hero h1,
.product-hero h2.product-hero-name {
  font-size: clamp(44px, 9vw, 140px);
  line-height: 0.92;
  letter-spacing: -0.025em;
  font-weight: 400;
  margin: 0;
}
.product-hero .sub {
  font-size: clamp(16px, 1.6vw, 20px);
  max-width: 48ch;
  color: var(--fg);
  opacity: 0.86;
  margin-top: 16px;
}
.product-hero-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.product-hero-side .row {
  display: flex;
  justify-content: space-between;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.product-hero-side .row:last-child { border-bottom: 1px solid var(--line); }
.product-hero-side .row .k {
  color: var(--fg-dim);
  flex-shrink: 0;
  margin-right: 16px;
}
.product-hero-side .row > span:last-child,
.product-hero-side .row > span:not(.k) {
  text-align: right;
}

@media (max-width: 880px) { .product-hero-grid { grid-template-columns: 1fr; } }

.product-visual {
  height: clamp(320px, 60vw, 720px);
}

/* Feature list */
.features {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gut);
}
.feature-item {
  grid-column: span 4;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 220px;
}
.feature-item .idx {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--fg-mute);
}
.feature-item h3 {
  font-size: clamp(18px, 1.7vw, 22px);
  letter-spacing: -0.005em;
  font-weight: 500;
  max-width: 18ch;
}
.feature-item p {
  color: var(--fg);
  opacity: 0.78;
  font-size: 14.5px;
  max-width: 38ch;
}
@media (max-width: 980px) { .feature-item { grid-column: span 6; } }
@media (max-width: 640px) { .feature-item { grid-column: span 12; min-height: 0; } }

/* Screenshot gallery */
.shots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gut);
}
.shot {
  aspect-ratio: 4 / 3;
  cursor: zoom-in;
  position: relative;
  transition: transform var(--t-med);
}
.shot:hover { transform: translateY(-3px); }
.shot .imgslot { width: 100%; height: 100%; }
.shot .shot-cap {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
@media (max-width: 720px) { .shots { grid-template-columns: 1fr; } }

/* Download blocks — 3 columns on desktop (Apple Silicon DMG, Intel DMG,
   Windows .exe), 2 on tablet, 1 on mobile. The 1024px breakpoint sits
   under the typical desktop width but above tablet portrait so the
   3-card row collapses to 2 before the cards get cramped. */
.downloads {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gut);
}
@media (max-width: 1024px) { .downloads { grid-template-columns: 1fr 1fr; } }
.download-card {
  border: 1px solid var(--line-strong);
  padding: clamp(24px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  min-height: 220px;
}
.download-card.dim {
  opacity: 0.55;
  pointer-events: none;
}
.download-card .platform {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.download-card .filename {
  font-size: clamp(22px, 2.2vw, 28px);
  letter-spacing: -0.01em;
  margin: 12px 0;
  font-weight: 400;
}
.download-card .meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-mute);
  letter-spacing: 0.08em;
}
.download-card .btn { margin-top: auto; align-self: flex-start; }
@media (max-width: 720px) { .downloads { grid-template-columns: 1fr; } }

/* =============================================================
   Lightbox
   ============================================================= */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(8, 7, 6, 0.96);
  z-index: 100;
  display: none;
  align-items: center; justify-content: center;
  padding: 5vw;
  cursor: zoom-out;
}
.lightbox.is-open { display: flex; }
/* Lightbox shell wraps the displayed image at its natural aspect ratio.
   Permanent design: .lightbox-inner shrink-wraps to the image (width:
   max-content), so its width always equals the rendered image width.
   Image and caption stack as block children. Caption is in normal flow
   below the image — it CAN'T overlap because there's no absolute
   positioning fighting against multi-line wrap. Caption text-align:center
   aligns the caption text under the image's centerline. */
.lightbox-inner {
  position: relative;
  display: inline-block;         /* shrink-wrap to content (image + caption) */
  width: auto;
  height: auto;                  /* must be explicit — flex-item default
                                    sizing can otherwise clip block children
                                    that flow past the first child's height */
  max-width: min(1400px, 90vw);
  /* No max-height — the image already has max-height:calc(90vh - 72px),
     and the caption + 12px gap consume the remaining ≤72px so the whole
     inner never exceeds 90vh. */
}
.lightbox-inner .imgslot {
  /* Discard the placeholder chrome from the base .imgslot rule — in the
     lightbox we only ever show real images, and the imgslot just wraps
     the img tightly so the image determines width/height. */
  width: auto;
  height: auto;
  background: none;
  border: none;
  overflow: visible;
  display: block;
}
.lightbox-inner .imgslot::before,
.lightbox-inner .imgslot .imgslot-label,
.lightbox-inner .imgslot .imgslot-spec {
  display: none;
}
.lightbox-cap {
  /* Static (flow) positioning — caption sits below the image and grows
     downward, never into it. block-level so it takes the inner's full
     (= image's) width; text-align:center centers the text under the
     image. */
  position: static;
  display: block;
  margin-top: 12px;
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-dim);
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

/* The signal analysis JPG is near-square (1181×1144) with built-in dark
   padding around the 9-panel chart matrix. When dropped into the 4/3 .shot
   grid cell with object-fit:cover, the chart visibly inset to the right of
   the caption left edge while screenshots 1 & 2 fill edge-to-edge. Scale
   the image to crop past the source padding so the visible chart spans
   the box width like the others; .imgslot overflow:hidden clips the
   excess. */
.shot[data-slot="sphinx-101-signal-analysis"] .imgslot img {
  transform: scale(1.08);
  transform-origin: center;
}
/* The test-results hero uses the same JPG at natural size (no fixed-ratio
   box), so the chart appears centered with the source padding visible on
   either side. Centering the figcaption keeps it under the visible chart
   instead of hugging the image element's left edge (which is inside the
   dark padding). */
.signal-analysis-hero figcaption {
  text-align: center;
}
.lightbox-close {
  position: absolute;
  top: -36px;
  right: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--fg-dim);
  display: flex;
  gap: 8px;
  align-items: center;
}
.lightbox-close::before { content: "×"; font-size: 20px; line-height: 1; }

/* =============================================================
   File list (test results, manuals)
   ============================================================= */
.file-list {
  border-top: 1px solid var(--line);
}
.file-row {
  display: grid;
  grid-template-columns: 60px 1fr 160px 160px 130px;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  transition: background var(--t-fast);
}
.file-row:hover { background: rgba(236, 231, 220, 0.025); }
.file-row .idx { font-family: var(--mono); font-size: 11px; color: var(--fg-mute); letter-spacing: 0.10em; }
.file-row .name { font-size: 15px; }
.file-row .desc { color: var(--fg-dim); font-size: 13px; }
.file-row .meta { font-family: var(--mono); font-size: 11px; color: var(--fg-dim); letter-spacing: 0.10em; text-transform: uppercase; }
.file-row .dl { justify-self: end; }
.file-row .dl a {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--accent);
}
.file-row .dl a::after {
  content: "";
  width: 9px; height: 9px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
}
@media (max-width: 880px) {
  .file-row { grid-template-columns: 40px 1fr auto; }
  .file-row .desc, .file-row .meta { display: none; }
}

/* Support page — Tips list. Same border-delimited row rhythm as
   .file-list, but free-flowing text instead of a fixed grid. */
.tips-list {
  border-top: 1px solid var(--line);
}
.tip-item {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  color: var(--fg-dim);
  line-height: 1.65;
}
.tip-item strong {
  color: var(--fg);
  font-weight: 600;
  margin-right: 4px;
}

/* =============================================================
   Activation form
   ============================================================= */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gut);
  align-items: start;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}
.field label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
  display: flex;
  justify-content: space-between;
}
.field input, .field textarea {
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  padding: 14px 16px;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--fg);
  transition: border-color var(--t-fast);
  width: 100%;
}
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.field input:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.field textarea { min-height: 120px; resize: vertical; }
.field .hint {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--fg-mute);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-top: 4px;
}

.response-area {
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  padding: 24px;
  min-height: 160px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--fg);
  letter-spacing: 0.04em;
  line-height: 1.6;
  word-break: break-all;
}
.response-area.empty {
  color: var(--fg-mute);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

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

/* Step list */
.steps {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
  margin-bottom: clamp(32px, 5vw, 64px);
}
.step {
  background: var(--bg);
  padding: 20px 0;
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 16px;
}
.step .num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.14em;
}
.step .body h4 { font-size: 16px; font-weight: 500; margin-bottom: 4px; letter-spacing: -0.005em; }
.step .body p { color: var(--fg-dim); font-size: 14px; max-width: 60ch; }

/* =============================================================
   About / two-column prose
   ============================================================= */
.prose {
  font-size: clamp(17px, 1.7vw, 22px);
  line-height: 1.5;
  letter-spacing: -0.005em;
  max-width: 36ch;
}
.prose-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 96px);
}
.prose-grid p + p { margin-top: 1em; }
.prose-grid .col-meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-dim);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
@media (max-width: 880px) { .prose-grid { grid-template-columns: 1fr; } }

.story {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: var(--gut);
}
.story .story-meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-dim);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.story-body p { font-size: 16px; line-height: 1.65; max-width: 56ch; color: var(--fg); opacity: 0.88; }
.story-body p + p { margin-top: 1em; }
@media (max-width: 880px) { .story { grid-template-columns: 1fr; } }

/* =============================================================
   Footer
   ============================================================= */
.site-footer {
  margin-top: auto;
  padding-top: clamp(48px, 6vw, 80px);
  padding-bottom: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--line);
  background: var(--bg);
  color: var(--fg-dim);
  font-size: 13px;
}
.foot-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--gut);
  margin-bottom: clamp(40px, 5vw, 64px);
}
.foot-block h3 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: 14px;
  font-weight: 400;
}
.foot-block ul { display: flex; flex-direction: column; gap: 8px; }
.foot-block a { color: var(--fg-dim); transition: color var(--t-fast); }
.foot-block a:hover { color: var(--fg); }
.foot-bottom {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--fg-mute);
  padding-top: 24px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
@media (max-width: 880px) {
  .foot-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .foot-top { grid-template-columns: 1fr; }
}

/* Legal-links row sits between two horizontal rules (the .legal-links
   border-top above and the .foot-bottom border-top below). Symmetric
   padding on both sides keeps the text visually centered between the
   two rules instead of cramped against the lower one. */
.legal-links {
  margin-top: 24px;
  padding: 16px 0;
  border-top: 1px solid rgba(236, 231, 220, 0.08);
  font-size: 11px;
  color: #6A665E;
}
.legal-links a {
  color: #6A665E;
  margin-right: 16px;
}
.legal-links a:last-child { margin-right: 0; }

/* =============================================================
   Misc small bits
   ============================================================= */
.kbd {
  font-family: var(--mono);
  font-size: 11px;
  padding: 3px 7px;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  color: var(--fg);
  letter-spacing: 0.06em;
}
.tag {
  display: inline-block;
  padding: 4px 9px;
  border: 1px solid var(--line-strong);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.callout {
  border-left: 1px solid var(--accent);
  padding: 8px 0 8px 20px;
  color: var(--fg);
  opacity: 0.88;
  font-size: 16px;
  max-width: 48ch;
}

.dl-inline {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}

/* Selection */
::selection { background: var(--accent); color: var(--bg); }
.paper ::selection { background: var(--paper-fg); color: var(--bg-paper); }

/* Tiny hairline corner mark — used decoratively */
.corner-mark {
  position: absolute;
  width: 14px; height: 14px;
  border-top: 1px solid var(--line-strong);
  border-left: 1px solid var(--line-strong);
}

/* Page intro band — for sub-pages */
.page-intro {
  padding-top: clamp(48px, 7vw, 96px);
  padding-bottom: clamp(40px, 6vw, 72px);
  border-bottom: 1px solid var(--line);
}
.page-intro .eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 24px;
  display: flex; gap: 12px; align-items: baseline;
}
.page-intro h1 {
  font-size: clamp(36px, 6.4vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.022em;
  font-weight: 400;
  max-width: 18ch;
}
.page-intro .lead {
  margin-top: clamp(20px, 3vw, 36px);
  font-size: clamp(16px, 1.6vw, 19px);
  max-width: 56ch;
  color: var(--fg);
  opacity: 0.85;
}


/* =============================================================
   AESTHETIC LAYER  v2
   Bohem-scandi-asian × cyberpunk-neo
   Subtle. Always restrained. Reads as confident before novel.
   ============================================================= */

/* --- Scanline overlay -------------------------------------- */
.scanlines {
  position: relative;
  isolation: isolate;
}
.scanlines::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(255,255,255,0.015) 0 1px,
    transparent 1px 3px
  );
  mix-blend-mode: screen;
}
.scanlines > * { position: relative; z-index: 1; }

/* --- Blueprint grid overlay (very subtle on hero) ---------- */
.blueprint {
  position: relative;
}
.blueprint::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(109,211,255,0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(109,211,255,0.045) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}

/* --- Glow modifiers --------------------------------------- */
.glow-warm { text-shadow: var(--glow-warm); }
.glow-cool { text-shadow: var(--glow-cool); }
.accent-cool { color: var(--accent-cool); }

/* --- Japanese vertical mono label -------------------------
   Decorative only. Reads as "audio · component-level". Used
   sparingly — never replaces real content, never localises.    */
.kana {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.30em;
  text-orientation: upright;
  writing-mode: vertical-rl;
  color: var(--fg-mute);
  line-height: 1.4;
  user-select: none;
}
.kana .accent { color: var(--accent); }
.kana-row {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--fg-mute);
  display: inline-flex;
  gap: 14px;
  align-items: center;
}
.kana-row .glyph { color: var(--accent-cool); letter-spacing: 0.10em; }
.kana-row .sep { width: 18px; height: 1px; background: var(--fg-mute); display: inline-block; }

/* --- Bracket corner frame (TE-flavoured) ------------------ */
.bracket {
  position: relative;
  padding: clamp(24px, 3vw, 40px);
}
.bracket::before, .bracket::after,
.bracket > .br-tr, .bracket > .br-bl {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  pointer-events: none;
}
.bracket::before { /* top-left */
  top: 0; left: 0;
  border-top: 1px solid var(--accent-cool);
  border-left: 1px solid var(--accent-cool);
}
.bracket::after  { /* bottom-right */
  bottom: 0; right: 0;
  border-bottom: 1px solid var(--accent-cool);
  border-right: 1px solid var(--accent-cool);
}
.bracket > .br-tr {
  top: 0; right: 0;
  border-top: 1px solid var(--accent-cool);
  border-right: 1px solid var(--accent-cool);
}
.bracket > .br-bl {
  bottom: 0; left: 0;
  border-bottom: 1px solid var(--accent-cool);
  border-left: 1px solid var(--accent-cool);
}

/* --- Build / data ticker strip ---------------------------- */
.ticker {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mute);
  display: flex;
  gap: 24px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  white-space: nowrap;
}
.ticker .ticker-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  animation: ticker-blink 2.4s ease-in-out infinite;
  align-self: center;
}
@keyframes ticker-blink {
  0%, 70%, 100% { opacity: 1; }
  85% { opacity: 0.25; }
}
.ticker .col-cool { color: var(--accent-cool); }
.ticker .sep { color: var(--fg-mute); opacity: 0.5; }

/* --- Hero accent: thin radial wash kept as fallback layer
       (the real movement now comes from .ambient — see AMBIENT
       ATMOSPHERE block at the bottom of this file).
       This pseudo just adds a tiny static lift when .ambient
       is NOT present on a hero (e.g. legacy pages). */
.hero { position: relative; overflow: hidden; }
.hero > .container { position: relative; z-index: 2; }

/* Hero side-rail JP label */
.hero-side {
  position: absolute;
  right: clamp(16px, 2.5vw, 40px);
  top: clamp(24px, 4vw, 64px);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  color: var(--fg-mute);
}
.hero-side .vline {
  width: 1px;
  height: clamp(80px, 14vw, 160px);
  background: linear-gradient(to bottom, transparent, var(--line-strong), transparent);
}
@media (max-width: 720px) { .hero-side { display: none; } }

/* --- Big display title — slight optical tracking ---------- */
.hero h1 .accent-mark {
  display: inline-block;
  color: var(--accent);
  font-style: normal;
  font-weight: 400;
  position: relative;
}
.hero h1 .accent-mark::after {
  /* a tiny tilde-glyph between lines, like a circuit marker */
  content: "";
  position: absolute;
  right: -0.12em;
  top: 0.55em;
  width: 0.12em;
  height: 0.12em;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: var(--glow-warm);
  animation: accent-dot-breathe 4s ease-in-out infinite;
  will-change: opacity;
}

/* --- Buy / price button -------------------------------------- */
.btn-price {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  padding: 16px 24px;
  background: var(--accent);
  color: #0E0D0B;
  border: 1px solid var(--accent);
  font-size: 13px;
  letter-spacing: 0.04em;
  transition: background var(--t-fast), box-shadow var(--t-fast);
  position: relative;
}
.btn-price:hover { background: #E58647; box-shadow: var(--glow-warm); }
.btn-price .label { font-weight: 500; }
.btn-price .sep {
  width: 1px; height: 14px;
  background: rgba(14,13,11,0.4);
  align-self: center;
  margin: 0 4px;
}
.btn-price .price { font-family: var(--mono); letter-spacing: 0.04em; font-size: 13px; }
.btn-price .arrow { background: #0E0D0B; }
.btn-price .arrow::after { border-top-color: #0E0D0B; border-right-color: #0E0D0B; }

/* Subtle inline buy link for the hero (less dominant) */
.buy-quiet {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  padding-bottom: 2px;
  border-bottom: 1px solid var(--accent);
  transition: color var(--t-fast);
}
.buy-quiet:hover { color: #E58647; }
.buy-quiet .price { color: var(--fg); }

/* --- Activation forms — two-up + new aesthetic ----------- */
.act-pair {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.act-divider {
  width: 1px;
  background: var(--line);
  align-self: stretch;
  position: relative;
}
.act-divider::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px; height: 6px;
  background: var(--accent-cool);
  border-radius: 50%;
  transform: translate(-50%,-50%);
  box-shadow: var(--glow-cool);
}
.act-card {
  position: relative;
  padding: clamp(28px, 3vw, 44px);
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, rgba(236,231,220,0.02), transparent 60%);
}
.act-card.act-card-warm::before,
.act-card.act-card-cool::before {
  content: "";
  position: absolute;
  left: 0; top: 0; width: 32px; height: 1px;
}
.act-card.act-card-warm::before { background: var(--accent); box-shadow: var(--glow-warm); }
.act-card.act-card-cool::before { background: var(--accent-cool); box-shadow: var(--glow-cool); }
.act-card h3 {
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: -0.01em;
  font-weight: 500;
  margin-bottom: 6px;
}
.act-card .act-sub {
  color: var(--fg-dim);
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 24px;
  max-width: 56ch;
}
.act-card .kana-row { margin-bottom: 14px; }
.act-card form > button[type=submit] {
  /* use site btn appearance — only the unstyled tag would inherit browser styles */
  margin-top: 28px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  font-size: 13px;
  letter-spacing: 0.02em;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #0E0D0B;
  cursor: pointer;
  transition: background var(--t-fast), box-shadow var(--t-fast);
}
.act-card.act-card-cool form > button[type=submit] {
  background: transparent;
  color: var(--accent-cool);
  border-color: var(--accent-cool);
}
.act-card form > button[type=submit]:hover { box-shadow: var(--glow-warm); }
.act-card.act-card-cool form > button[type=submit]:hover { box-shadow: var(--glow-cool); background: rgba(109,211,255,0.06); }

/* Style the imported form's labels / inputs natively */
.act-card form label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin: 18px 0 8px;
}
.act-card form input,
.act-card form textarea {
  width: 100%;
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  padding: 14px 16px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--fg);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.act-card form input:focus,
.act-card form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(214,123,60,0.18);
}
.act-card form input:focus-visible,
.act-card form textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.act-card.act-card-cool form input:focus-visible,
.act-card.act-card-cool form textarea:focus-visible {
  outline-color: var(--accent-cool);
}
.act-card.act-card-cool form input:focus,
.act-card.act-card-cool form textarea:focus {
  border-color: var(--accent-cool);
  box-shadow: 0 0 0 1px rgba(109,211,255,0.18);
}
.act-card form textarea { min-height: 96px; resize: vertical; }

/* Result panel — shown after form submit */
.act-result {
  margin-top: 24px;
  padding: 18px 20px;
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  font-family: var(--mono);
  font-size: 13px;
  color: var(--accent);
  word-break: break-all;
  line-height: 1.6;
}
.act-result.error { color: #FF8888; border-color: rgba(255,136,136,0.3); }
.act-result .reset-link {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
  border-bottom: 1px solid var(--fg-dim);
  padding-bottom: 1px;
}
.act-result .reset-link:hover { color: var(--fg); border-color: var(--fg); }

@media (max-width: 880px) {
  .act-pair { grid-template-columns: 1fr; gap: 24px; }
  .act-divider { display: none; }
}

/* --- "Receipt" / serial display block --------------------- */
.serial-display {
  margin-top: clamp(24px, 3vw, 40px);
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--accent);
  background: linear-gradient(180deg, rgba(214,123,60,0.04), transparent);
  font-family: var(--mono);
  text-align: center;
  position: relative;
}
.serial-display .serial-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 14px;
}
.serial-display .serial-key {
  font-size: clamp(18px, 2.4vw, 28px);
  letter-spacing: 0.12em;
  color: var(--accent);
  text-shadow: var(--glow-warm);
  word-break: break-all;
}
.serial-display .serial-key[data-loaded] {
  font-size: clamp(11px, 1.3vw, 14px);
  letter-spacing: 0.02em;
  line-height: 1.5;
  user-select: all;
}

/* --- Numbered step list for purchase-success -------------- */
.numbered {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: clamp(24px, 3vw, 40px);
}
.numbered li {
  background: var(--bg);
  padding: 20px 24px;
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 18px;
  align-items: baseline;
}
.numbered li .num {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--accent-cool);
  letter-spacing: 0.14em;
}
.numbered li .body h4 { font-size: 15px; font-weight: 500; margin-bottom: 4px; }
.numbered li .body p  { color: var(--fg-dim); font-size: 13.5px; max-width: 60ch; }

/* --- Refined link / underline reveal --------------------- */
.link-reveal {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
}
.link-reveal::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform var(--t-med);
}
.link-reveal:hover::after { transform: scaleX(1); }


/* =============================================================
   ACTIVATION  /  DEACTIVATION  SUCCESS PAGE COMPONENTS
   - .success-mark      circular tick badge with glow
   - .response-display  large response-code block + copy button
   ============================================================= */

.success-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  margin-bottom: 22px;
  position: relative;
  box-shadow: var(--glow-warm);
  background: rgba(214, 123, 60, 0.06);
}
.success-mark svg { width: 18px; height: 18px; }
.success-mark svg path { stroke: var(--accent); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.success-mark.cool { border-color: var(--accent-cool); box-shadow: var(--glow-cool); background: rgba(109, 211, 255, 0.06); }
.success-mark.cool svg path { stroke: var(--accent-cool); }

/* Response code panel ------------------------------------------ */
.response-display {
  margin: clamp(20px, 3vw, 32px) 0;
  padding: clamp(28px, 3vw, 40px);
  border: 1px solid var(--accent);
  background: linear-gradient(180deg, rgba(214,123,60,0.05), transparent 60%);
  position: relative;
}
.response-display::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 32px; height: 1px;
  background: var(--accent);
  box-shadow: var(--glow-warm);
}
.response-display .response-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.response-display .response-label .meta {
  color: var(--fg-mute);
  letter-spacing: 0.12em;
}
.response-display .response-code {
  font-family: var(--mono);
  font-size: clamp(13px, 1.4vw, 15px);
  letter-spacing: 0.04em;
  color: var(--accent);
  text-shadow: var(--glow-warm);
  word-break: break-all;
  line-height: 1.7;
  white-space: pre-wrap;
  margin: 0;
  padding: 18px 20px;
  background: rgba(14, 13, 11, 0.55);
  border: 1px solid var(--line);
  user-select: all;
  -webkit-user-select: all;
}
.response-display .response-actions {
  margin-top: 22px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.response-display .copy-hint {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

/* Cool variant for deactivation */
.response-display.cool {
  border-color: var(--accent-cool);
  background: linear-gradient(180deg, rgba(109,211,255,0.045), transparent 60%);
}
.response-display.cool::before {
  background: var(--accent-cool);
  box-shadow: var(--glow-cool);
}
.response-display.cool .response-code {
  color: var(--accent-cool);
  text-shadow: var(--glow-cool);
}

/* Copy button "Copied" flash state */
[data-copy][data-state="copied"] {
  background: var(--accent-cool) !important;
  border-color: var(--accent-cool) !important;
  color: #0E0D0B !important;
}
[data-copy] .copy-label { display: inline-block; min-width: 8ch; }

/* Slim "seat status" indicator strip */
.seat-strip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  margin-top: 8px;
}
.seat-strip .seats {
  display: inline-flex;
  gap: 4px;
}
.seat-strip .seat {
  width: 10px; height: 10px;
  border: 1px solid var(--accent);
  background: transparent;
}
.seat-strip .seat.used { background: var(--accent); box-shadow: var(--glow-warm); }
.seat-strip.cool .seat { border-color: var(--accent-cool); }
.seat-strip.cool .seat.used { background: var(--accent-cool); box-shadow: var(--glow-cool); }

/* Status-line headline mod for success pages */
.h-status {
  display: flex;
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
}
.h-status .h-suffix {
  font-family: var(--mono);
  font-size: clamp(12px, 1.2vw, 14px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.h-status .h-suffix.cool { color: var(--accent-cool); }

/* Inline error rendered under an activation/deactivation form when
   the backend rejects the submission (validation, signature mismatch,
   exhausted seats, …). Surfaces the JSON error code so the user sees
   why instead of a raw payload from the server. */
.auth-error {
  margin: 14px 0 0;
  padding: 10px 14px;
  border: 1px solid #C24A4A;
  border-left-width: 3px;
  background: rgba(194, 74, 74, 0.08);
  color: #F2C7C7;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.5;
}


/* =============================================================
   v3 — POLISH PASS
   Responsive a11y, paper-section text fixes, FAQ, boxed principle
   cards, button-spacing & alignment fixes.
   ============================================================= */

/* --- 1) Cross-device safety ------------------------------- */
html, body {
  overflow-x: hidden;   /* fallback for browsers without `clip` */
  overflow-x: clip;     /* keeps `position: sticky` working on header */
}
* { -webkit-tap-highlight-color: transparent; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Touch-friendly hit targets on coarse pointers */
@media (pointer: coarse) {
  .btn, .btn-price, .buy-quiet, .nav a, .mobile-nav a,
  details.faq-item summary, .menu-toggle {
    min-height: 44px;
  }
}

/* Ticker — let it scroll horizontally on narrow viewports instead
   of overflowing. Hide the scrollbar visually. */
.ticker {
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.ticker::-webkit-scrollbar { display: none; }

/* --- 2) Feature-item h3: drop the narrow max-width so titles
       like "Oversampling 2× / 4× / 8× / 16×" never wrap awkwardly */
.feature-item h3 { max-width: none; }

/* --- 3) Hero "Buy →" link: vertical center, parity with .btn */
.buy-quiet {
  align-items: center;
  padding: 6px 0;
}

/* --- 4) Download-card spacing — give 62 MB / VST3 lines room
       before the button. Keep min-height so cards stay even. */
.download-card { gap: 8px; }
.download-card .meta { margin-bottom: clamp(20px, 3vw, 32px); }
.download-card .btn { margin-top: auto; align-self: flex-start; }

/* --- 5) PAPER section text inheritance — critical readability fix
       Dark .step / .feature-item blocks INSIDE .paper sections
       used to inherit paper-fg (dark) on a dark background. Force
       cream text in those nested elements; keep paper-fg on the
       outer page sections. */

/* steps inside paper — switch the boxes to a cream-on-cream feel */
.paper .steps {
  background: var(--paper-line);
  border-color: var(--paper-line);
}
.paper .step {
  background: var(--bg-paper);
  color: var(--paper-fg);
}
.paper .step .num { color: var(--accent); }
.paper .step .body h4 { color: var(--paper-fg); font-weight: 500; }
.paper .step .body p  { color: var(--paper-dim); }

/* feature-items inside paper */
.paper .feature-item { border-top-color: var(--paper-line); }
.paper .feature-item .idx { color: var(--paper-dim); }
.paper .feature-item h3 { color: var(--paper-fg); }
.paper .feature-item p  { color: var(--paper-fg); opacity: 0.7; }

/* stat-strip / pillars inside paper (defensive — not currently used
   on paper sections, but keeps the cascade clean) */
.paper .pillars     { background: var(--paper-line); border-color: var(--paper-line); }
.paper .pillar      { background: var(--bg-paper); color: var(--paper-fg); }
.paper .pillar .idx { color: var(--paper-dim); }
.paper .pillar p    { color: var(--paper-fg); opacity: 0.7; }
.paper .stat-strip  { background: var(--paper-line); border-color: var(--paper-line); }
.paper .stat        { background: var(--bg-paper); color: var(--paper-fg); }
.paper .stat .lbl   { color: var(--paper-dim); }

/* --- 6) BOXED PRINCIPLE CARDS  (About page — was floating text) ---- */
.principles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.5vw, 22px);
}
.principle-card {
  position: relative;
  padding: clamp(26px, 2.5vw, 38px);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 240px;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.principle-card::before {
  /* corner accent — same family as the .bracket marks */
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 24px; height: 1px;
  background: var(--accent);
  box-shadow: var(--glow-warm);
}
.principle-card:nth-child(2)::before { background: var(--accent-cool); box-shadow: var(--glow-cool); }
.principle-card:nth-child(4)::before { background: var(--accent-cool); box-shadow: var(--glow-cool); }
.principle-card .idx {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.principle-card h3 {
  font-size: clamp(18px, 1.6vw, 22px);
  letter-spacing: -0.005em;
  font-weight: 500;
  line-height: 1.2;
  max-width: 16ch;
}
.principle-card p {
  font-size: 14.5px;
  color: var(--fg);
  opacity: 0.78;
  margin-top: auto;
  max-width: 42ch;
}
.paper .principle-card {
  background: var(--bg-paper);
  border-color: var(--paper-line);
  color: var(--paper-fg);
}
.paper .principle-card .idx { color: var(--paper-dim); }
.paper .principle-card h3   { color: var(--paper-fg); }
.paper .principle-card p    { color: var(--paper-fg); opacity: 0.7; }
@media (max-width: 980px) { .principles-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .principles-grid { grid-template-columns: 1fr; } }

/* --- 7) FAQ component  -------------------------------------- */
.faq {
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 4vw, 56px);
}
.faq-category {
  display: flex;
  flex-direction: column;
}
.faq-cat-title {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin: 0 0 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-strong);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-weight: 400;
}
.faq-cat-title .count {
  font-size: 10px;
  color: var(--fg-mute);
}
.paper .faq-cat-title {
  color: var(--paper-dim);
  border-bottom-color: var(--paper-line);
}
.paper .faq-cat-title .count { color: var(--paper-dim); }
details.faq-item {
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
}
.paper details.faq-item { border-bottom-color: var(--paper-line); }
details.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-start;
  padding: 8px 0;
  font-size: clamp(15px, 1.4vw, 17px);
  letter-spacing: -0.005em;
  font-weight: 500;
  color: var(--fg);
  outline-offset: 4px;
}
.paper details.faq-item summary { color: var(--paper-fg); }
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary::after {
  content: "+";
  font-family: var(--mono);
  font-size: 18px;
  line-height: 1;
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 2px;
  transition: color var(--t-fast);
}
details.faq-item[open] summary::after {
  content: "−";
  color: var(--accent-cool);
}
details.faq-item summary:hover { color: var(--accent); }
.paper details.faq-item summary:hover { color: var(--accent-soft); }
details.faq-item .faq-answer {
  padding: 10px 32px 12px 0;
  max-width: 72ch;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--fg);
  opacity: 0.86;
}
.paper details.faq-item .faq-answer { color: var(--paper-fg); opacity: 0.78; }
details.faq-item .faq-answer p { margin-bottom: 0.7em; }
details.faq-item .faq-answer p:last-child { margin-bottom: 0; }
details.faq-item .faq-answer strong {
  color: var(--accent);
  font-weight: 600;
}
.paper details.faq-item .faq-answer strong { color: var(--accent-soft); }

/* --- 8) Mobile drawer polish — improve density on small screens */
@media (max-width: 520px) {
  .mobile-nav a { padding: 18px var(--pad); font-size: 19px; }
  .container { padding-left: 18px; padding-right: 18px; }
}

/* Responsive nav — prevent two-line overflow on small phones (≤480px / ≤380px) */
@media (max-width: 480px) {
  .page-intro .eyebrow,
  .section-head .eyebrow {
    font-size: 10px;
    letter-spacing: 0.08em;
    gap: 8px;
    flex-wrap: wrap;
  }
  .page-intro .eyebrow > span,
  .section-head .eyebrow > span {
    white-space: nowrap;
  }
  .nav a, .mobile-nav a {
    letter-spacing: -0.01em;
  }
}
@media (max-width: 380px) {
  .page-intro .eyebrow,
  .section-head .eyebrow {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    font-size: 9px;
    letter-spacing: 0.04em;
  }
  .mobile-nav a {
    padding: 16px var(--pad);
    font-size: 17px;
  }
}

/* --- 9) Image-slot fallback colour fix on .paper sections is
       already handled via .paper .imgslot — confirmed no regression */

/* --- 10) Print stylesheet (minimal — site looks fine printed) ---- */
@media print {
  .site-header, .mobile-nav, .site-footer .foot-top,
  .menu-toggle, .ticker { display: none !important; }
  body { background: white; color: black; }
  .hero, .section, .page-intro { padding: 24px 0 !important; border: 0 !important; }
  a { color: inherit; text-decoration: underline; }
  .imgslot { border: 1px solid #ccc; }
}


/* =============================================================
   AMBIENT ATMOSPHERE — subtle aurora / depth-space
   Pure CSS. GPU-composited (transform + filter + opacity).
   Glacial cycles (30-44 s). Respects prefers-reduced-motion.

   USAGE:
     <section class="hero">
       <div class="ambient" aria-hidden="true">
         <span class="ambient-blob"></span>
       </div>
       ...
     </section>

   The parent must be position:relative + overflow:hidden (the hero,
   .page-intro.has-ambient, and similar containers already are).
   ============================================================= */

.ambient {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  isolation: isolate;
}

.ambient::before,
.ambient::after,
.ambient .ambient-blob {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(110px) saturate(140%);
  mix-blend-mode: screen;
  will-change: transform, opacity;
  pointer-events: none;
}

.ambient::before {
  /* warm amber, top-left */
  width: 78vmin;
  height: 78vmin;
  top: -14vmin;
  left: -10vmin;
  background: radial-gradient(circle at center, rgba(214, 123, 60, 0.55), transparent 62%);
  opacity: 0.58;
}

.ambient::after {
  /* cool cyan, bottom-right */
  width: 72vmin;
  height: 72vmin;
  bottom: -18vmin;
  right: -14vmin;
  background: radial-gradient(circle at center, rgba(109, 211, 255, 0.50), transparent 62%);
  opacity: 0.45;
}

.ambient .ambient-blob {
  /* deep brass mid */
  width: 60vmin;
  height: 60vmin;
  top: 50%;
  left: 50%;
  margin-top: -30vmin;
  margin-left: -30vmin;
  background: radial-gradient(circle at center, rgba(184, 106, 51, 0.42), transparent 65%);
  opacity: 0.30;
}

/* Containers that hold an .ambient need to clip + position */
.page-intro.has-ambient,
section.has-ambient {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Make sure content sits above the ambient */
.ambient ~ * { position: relative; z-index: 1; }

@media (prefers-reduced-motion: no-preference) {
  .ambient::before    { animation: ambient-drift-warm 32s ease-in-out infinite alternate; }
  .ambient::after     { animation: ambient-drift-cool 26s ease-in-out infinite alternate; }
  .ambient .ambient-blob { animation: ambient-drift-mid 36s ease-in-out infinite alternate; }
}

@keyframes ambient-drift-warm {
  0%   { transform: translate3d(0, 0, 0) scale(1);    }
  50%  { transform: translate3d(8vw, 4vh, 0) scale(1.12); }
  100% { transform: translate3d(-6vw, 8vh, 0) scale(0.96); }
}
@keyframes ambient-drift-cool {
  0%   { transform: translate3d(0, 0, 0) scale(1);    }
  50%  { transform: translate3d(-7vw, -4vh, 0) scale(1.08); }
  100% { transform: translate3d(5vw, -7vh, 0) scale(1.04); }
}
@keyframes ambient-drift-mid {
  0%   { transform: translate3d(0, 0, 0) scale(1);    opacity: 0.22; }
  50%  { transform: translate3d(-3vw, 5vh, 0) scale(1.18); opacity: 0.36; }
  100% { transform: translate3d(4vw, -3vh, 0) scale(0.94); opacity: 0.26; }
}

/* On very small screens, soften further so nothing visually dominates */
@media (max-width: 520px) {
  .ambient::before { opacity: 0.42; }
  .ambient::after  { opacity: 0.32; }
  .ambient .ambient-blob { opacity: 0.22; }
}

/* =============================================================
   LOGO IMAGE FALLBACK — when /images/logo.png is present, JS
   replaces the SVG-mark+wordmark with the user-supplied image.
   ============================================================= */
.brand-logo-image {
  display: block;
  height: 28px;
  width: auto;
  max-width: 220px;
}
.brand.has-logo-image {
  /* let the image dictate the brand link's size */
  gap: 0;
}
@media (max-width: 520px) {
  .brand-logo-image { height: 24px; }
}

/* =============================================================
   LIGHTBOX UPGRADE — smooth fade+scale, group nav, close button
   ============================================================= */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(8, 7, 6, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 100;
  display: flex;             /* was: none/flex toggle */
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 5vw, 64px);
  cursor: zoom-out;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 320ms cubic-bezier(.2,.7,.2,1),
    visibility 320ms cubic-bezier(.2,.7,.2,1);
}
.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.lightbox-inner {
  transform: scale(0.96);
  transition: transform 380ms cubic-bezier(.2,.7,.2,1);
  cursor: default;
}
.lightbox.is-open .lightbox-inner {
  transform: scale(1);
}
.lightbox-inner img {
  /* Image self-sizes to its natural ratio, capped at the available area
     of the viewport (matching .lightbox-inner's max-width/-height minus
     the .lightbox padding). The CSS clamp() keeps room for the caption
     stacked below — 90vh minus an allowance for ~3 lines of mono caption
     text + 12px gap. */
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(90vh - 72px);
}

/* Prev / Next buttons */
.lightbox-prev,
.lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px; height: 52px;
  background: rgba(14, 13, 11, 0.55);
  border: 1px solid var(--line-strong);
  color: var(--fg);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.lightbox-prev { left: clamp(12px, 3vw, 48px); }
.lightbox-next { right: clamp(12px, 3vw, 48px); }
.lightbox-prev:hover,
.lightbox-next:hover {
  background: rgba(214, 123, 60, 0.18);
  border-color: var(--accent);
}
.lightbox-prev:active { transform: translateY(-50%) translateX(-2px); }
.lightbox-next:active { transform: translateY(-50%) translateX(2px); }
.lightbox-prev[hidden],
.lightbox-next[hidden] { display: none; }

.lightbox-counter {
  position: absolute;
  top: clamp(16px, 3vw, 40px);
  left: clamp(16px, 3vw, 40px);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.lightbox-counter[hidden] { display: none; }

/* Make the close button itself clickable, not just decorative */
.lightbox-close {
  cursor: pointer;
  user-select: none;
  transition: color var(--t-fast);
}
.lightbox-close:hover { color: var(--accent); }

@media (max-width: 520px) {
  .lightbox-prev, .lightbox-next { width: 44px; height: 44px; }
  .lightbox-prev { left: 6px; }
  .lightbox-next { right: 6px; }
  .lightbox-counter { font-size: 10px; }
}