/* ──────────────────────────────────────────────────────────────────────
   mAiSight landing — light blueprint.

   The product chassis is dark cyanotype (deep navy paper, off-white
   ink, rust accents). The marketing landing inverts the same blueprint
   into a paper-and-ink read: warm cream stock, faint navy grid, deep
   ink, and the same rust accent for the highlight mechanic so the
   product's signature color carries across both surfaces.
   ────────────────────────────────────────────────────────────────────── */

:root {
  color-scheme: light;

  /* Paper — warm cream with a hint of blueprint blue undertone. */
  --paper:        #f3ecdc;
  --paper-tint:   #ece4d0;
  --paper-edge:   #e2d8be;

  /* Surfaces — slightly lighter than the paper so cards lift cleanly. */
  --surface-1:    #fbf6ea;
  --surface-2:    #ffffff;
  --surface-deep: #ece2c8; /* used for the rail-side panel */

  /* Hairlines — deep ink, faded. */
  --border-subtle: rgba(13, 36, 64, 0.14);
  --border-strong: rgba(13, 36, 64, 0.32);

  /* Ink — deep cyanotype navy, three contrast tiers. */
  --ink-hi:  #0d2440;
  --ink-mid: #2f4564;
  --ink-low: #5d6f8b;

  /* Rust accent (unchanged from product tokens — the highlight color
     carries across surfaces). */
  --accent-rgb:    214, 88, 23;       /* a touch deeper than #ff8a3d to read on cream */
  --accent-primary:#cc5a16;
  --accent-hover:  #b34d10;
  --accent-ink:    #fdf5e8;

  --font-sans:    "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;

  --gutter: clamp(20px, 4vw, 56px);
  --maxw:   1080px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  min-height: 100%;
  color: var(--ink-hi);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  background:
    radial-gradient(1400px 600px at 50% -5%, rgba(13, 36, 64, 0.04), transparent 60%),
    radial-gradient(900px 700px at 88% 92%, rgba(var(--accent-rgb), 0.07), transparent 60%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-tint) 100%);
  background-attachment: fixed;
  overflow-x: hidden;
}

/* The blueprint grid — faint navy lines on cream. Two layers (major +
   minor), masked to fade at the edges. */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(13, 36, 64, 0.060) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 36, 64, 0.060) 1px, transparent 1px),
    linear-gradient(rgba(13, 36, 64, 0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 36, 64, 0.026) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 16px 16px, 16px 16px;
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.55), rgba(0,0,0,0) 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.55), rgba(0,0,0,0) 80%);
}

a { color: inherit; text-decoration: none; }
a:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ── Masthead ───────────────────────────────────────────────────────── */
.masthead {
  position: relative; z-index: 2;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
  padding: 22px var(--gutter);
  border-bottom: 1px solid var(--border-subtle);
}
.masthead-brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.18em;
  font-size: 12px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.brand-text { color: var(--ink-hi); }
.brand-sub  { color: var(--ink-low); }
@media (max-width: 500px) {
  .brand-sub { display: none; }
}
.lamp {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent-primary);
  box-shadow:
    0 0 0 2px rgba(var(--accent-rgb), 0.18),
    0 0 10px rgba(var(--accent-rgb), 0.55);
  animation: lamp-pulse 2.6s ease-in-out infinite;
}
@keyframes lamp-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
.masthead-nav {
  display: flex; gap: 28px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mid);
}
@media (max-width: 500px) {
  .masthead-nav { gap: 16px; font-size: 11px; letter-spacing: 0.12em; }
}
.masthead-nav a {
  position: relative;
  padding: 4px 0;
  transition: color 0.18s ease;
}
.masthead-nav a:hover { color: var(--ink-hi); }
.masthead-nav a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent-primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.22s cubic-bezier(.2,.7,.3,1);
}
.masthead-nav a:hover::after { transform: scaleX(1); }

/* ── Page ───────────────────────────────────────────────────────────── */
.page {
  position: relative; z-index: 1;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ── Hero ───────────────────────────────────────────────────────────── */
.hero {
  padding: clamp(24px, 3vw, 44px) 0 48px;
}
@media (max-width: 480px) {
  .hero { padding: 32px 0 44px; }
}

/* Hero layout — flexbox. Mobile: one stacked column (copy + download, then
   the demo). Desktop (≥901px): a two-item row — the live demo on the left,
   an aside (copy + download) on the right. DOM order is [aside, media];
   row-reverse puts the demo on the left without reordering the markup. */
.hero-grid {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.hero-aside {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hero-aside .install-card { margin: 0; }
.hero-media .demo { margin: 0; }
.hero-copy .hero-eyebrow  { margin-bottom: 16px; }
.hero-copy .hero-headline { font-size: clamp(34px, 4.4vw, 52px); margin-bottom: 16px; }
.hero-copy .hero-sub      { max-width: none; margin-bottom: 0; font-size: 16.5px; line-height: 1.5; }

@media (min-width: 901px) {
  .hero-grid {
    flex-direction: row-reverse;
    align-items: center;
    gap: clamp(32px, 4vw, 56px);
  }
  .hero-media { flex: 1 1 56%; min-width: 0; }
  .hero-aside { flex: 1 1 44%; min-width: 320px; }
}

/* Mobile order: copy → demo → download. Un-nest the aside (display:contents)
   so the demo can sit between the copy and the download card. */
@media (max-width: 900px) {
  .hero-aside { display: contents; }
  .hero-copy    { order: 1; }
  .hero-media   { order: 2; }
  .install-card { order: 3; }
}

.hero-eyebrow {
  margin: 0 0 28px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--ink-low);
}
.hero-headline {
  margin: 0 0 28px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 8.4vw, 84px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--ink-hi);
}
.hero-headline em {
  font-style: italic;
  color: var(--accent-primary);
  /* The "highlight" gimmick: a soft rust paint behind the italicized
     emphatic words, mirroring the in-prose mark below. */
  background-image: linear-gradient(
    to bottom,
    transparent 0%, transparent 58%,
    rgba(var(--accent-rgb), 0.20) 58%, rgba(var(--accent-rgb), 0.20) 92%,
    transparent 92%
  );
  padding: 0 0.04em;
}
.hero-sub {
  max-width: 56ch;
  margin: 0 0 56px;
  font-size: 18px;
  line-height: 1.62;
  color: var(--ink-mid);
}

/* ── Demo pane ──────────────────────────────────────────────────────── */
.demo {
  margin: 0 0 56px;
  padding: 0;
}

/* Mode controls — a small instrument-panel above the demo. */
.demo-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 4px 14px;
}
.demo-controls-label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--ink-low);
  text-transform: uppercase;
}
.mode-toggle {
  display: inline-flex;
  padding: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
}
.mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mid);
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}
.mode-btn:hover { color: var(--ink-hi); }
.mode-btn.is-active {
  background: var(--accent-primary);
  color: var(--accent-ink);
  box-shadow: 0 1px 0 rgba(13, 36, 64, 0.10);
}
.mode-btn-glyph {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1;
}

.demo-pane {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(220px, 1fr);
  gap: 0;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow:
    0 24px 50px -22px rgba(13, 36, 64, 0.25),
    0 1px 0 rgba(255, 255, 255, 0.7) inset;
  overflow: hidden;
  /* Fixed, even height — prose and rail each scroll inside the same window,
     so neither column leaves a lopsided gap. */
  height: 420px;
}
@media (max-width: 760px) {
  .demo-pane { grid-template-columns: 1fr; height: auto; }
}

/* Tooltip mode collapses the layout to a single column — the rail
   disappears, the prose takes the full width. */
.demo-pane.is-mode-tooltip { grid-template-columns: 1fr; }
.demo-pane.is-mode-tooltip .demo-rail { display: none; }
.demo-pane.is-mode-tooltip .demo-prose {
  border-right: 0;
  border-bottom: 0;
}

.demo-prose {
  padding: 28px 32px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-hi);
  border-right: 1px solid var(--border-subtle);
  /* Scrollable reading window; the rail filters to the terms in view as
     you scroll. Top/bottom fade so cut-off lines feather, not crop flat. */
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(13, 36, 64, 0.30) transparent;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
}
.demo-prose::-webkit-scrollbar { width: 8px; }
.demo-prose::-webkit-scrollbar-thumb { background: rgba(13, 36, 64, 0.22); border-radius: 4px; }
.demo-prose::-webkit-scrollbar-thumb:hover { background: rgba(13, 36, 64, 0.36); }
@media (max-width: 760px) {
  .demo-prose {
    border-right: 0; border-bottom: 1px solid var(--border-subtle);
    padding: 22px 20px; font-size: 15.5px;
    height: 320px;
  }
}
.demo-prose p { margin: 0 0 14px; }
.demo-prose p:last-child { margin-bottom: 0; }
.demo-prose em {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.92em;
  color: var(--ink-hi);
}

/* The marked term — a low-contrast rust underline that warms on hover or
   when its rail partner is lit. */
mark.t {
  background: transparent;
  color: inherit;
  padding: 0 1px;
  border-bottom: 1.5px dashed rgba(var(--accent-rgb), 0.60);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
mark.t:hover,
mark.t.is-lit {
  background: rgba(var(--accent-rgb), 0.16);
  color: var(--accent-primary);
  border-bottom-color: var(--accent-primary);
}

.demo-rail {
  padding: 24px 24px 18px;
  background: var(--surface-deep);
  /* Match the prose window; the term list scrolls inside if a dense
     paragraph puts more terms in view than fit. */
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
@media (max-width: 760px) {
  .demo-rail { padding: 18px 20px 14px; }
}
.demo-rail-head {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-low);
}
.demo-rail dl { margin: 0; overflow-y: auto; min-height: 0; scrollbar-width: thin; scrollbar-color: rgba(13, 36, 64, 0.30) transparent; }
.demo-rail dl::-webkit-scrollbar { width: 8px; }
.demo-rail dl::-webkit-scrollbar-thumb { background: rgba(13, 36, 64, 0.18); border-radius: 4px; }
.demo-row {
  padding: 10px 12px;
  margin: 0 -12px;
  border-radius: 8px;
  /* max-height + opacity so viewport-filtered rows breathe in/out instead
     of popping — rows stay mounted (origin-reference behavior 3). */
  max-height: 240px;
  overflow: hidden;
  transition:
    background 0.16s ease,
    max-height 0.3s ease,
    opacity 0.2s ease,
    transform 0.2s ease,
    padding 0.2s ease,
    margin 0.2s ease;
  cursor: pointer;
}
.demo-row + .demo-row { margin-top: 2px; }
/* Out-of-view terms — collapsed, not unmounted. */
.demo-row.is-filtered {
  max-height: 0;
  opacity: 0;
  transform: translateX(-8px);
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  pointer-events: none;
}
.demo-row:hover,
.demo-row.is-lit {
  background: rgba(var(--accent-rgb), 0.12);
}
.demo-row.is-lit {
  box-shadow: inset 2px 0 0 var(--accent-primary);
}
.demo-row dt {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  color: var(--ink-hi);
  margin: 0 0 2px;
}
.demo-row dd {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-mid);
}
.demo-row dd em {
  font-family: var(--font-mono);
  font-style: normal;
  color: var(--ink-hi);
}

/* Dim non-lit terms/rows when something is lit — emphasises the binding. */
.demo-pane.is-focused mark.t:not(.is-lit),
.demo-pane.is-focused .demo-row:not(.is-lit) dt {
  opacity: 0.45;
}

.demo-cap {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-low);
}
.demo-cap-hint { flex: 1; }
.demo-cap-meta { font-size: 10.5px; text-align: right; }
@media (max-width: 600px) {
  .demo-cap { flex-direction: column; gap: 6px; }
  .demo-cap-meta { text-align: left; }
}

/* ── Tooltip mode popover ───────────────────────────────────────────── */
.demo-tooltip {
  position: absolute;
  z-index: 10;
  max-width: 320px;
  padding: 12px 14px;
  background: var(--surface-2);
  color: var(--ink-hi);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow:
    0 14px 28px -12px rgba(13, 36, 64, 0.30),
    0 1px 0 rgba(255, 255, 255, 0.8) inset;
  opacity: 0;
  transform: translateY(-2px);
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease;
}
.demo-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.demo-tooltip.is-pinned {
  border-color: var(--accent-primary);
}
.demo-tooltip-term {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  margin: 0 0 4px;
  color: var(--ink-hi);
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.demo-tooltip-pin {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-low);
  text-transform: uppercase;
}
.demo-tooltip-def {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-mid);
}
.demo-tooltip-def em {
  font-family: var(--font-mono);
  font-style: normal;
  color: var(--ink-hi);
}
/* Arrow — a rotated square anchored to the bottom edge of the
   tooltip. JS swaps this to the top edge when the tooltip flips below. */
.demo-tooltip::after {
  content: "";
  position: absolute;
  left: var(--arrow-x, 50%);
  width: 10px; height: 10px;
  background: var(--surface-2);
  border-right: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
  transform: translateX(-50%) rotate(45deg);
}
.demo-tooltip.is-above::after {
  bottom: -6px;
}
.demo-tooltip.is-below::after {
  top: -6px;
  transform: translateX(-50%) rotate(225deg);
}
.demo-tooltip.is-pinned::after {
  border-color: var(--accent-primary);
}

/* In tooltip mode the mark itself gets a more obvious affordance. */
.demo-pane.is-mode-tooltip mark.t {
  border-bottom-style: solid;
  border-bottom-color: rgba(var(--accent-rgb), 0.85);
}
.demo-pane.is-mode-tooltip mark.t.is-pinned {
  background: rgba(var(--accent-rgb), 0.20);
  color: var(--accent-primary);
  border-bottom-color: var(--accent-primary);
}

/* ── Install card — the centerpiece CTA ─────────────────────────────── */
.install-card {
  position: relative;
  padding: 36px clamp(24px, 4vw, 48px) 32px;
  margin: 0 0 32px;
  background:
    radial-gradient(600px 200px at 50% 0%, rgba(var(--accent-rgb), 0.10), transparent 70%),
    linear-gradient(180deg, var(--surface-2) 0%, var(--surface-1) 100%);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow:
    0 24px 50px -22px rgba(13, 36, 64, 0.25),
    0 1px 0 rgba(255, 255, 255, 0.7) inset;
  overflow: hidden;
}
/* Engineering corner brackets — orange on top-left, faint on the others. */
.install-card::before,
.install-card::after {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  pointer-events: none;
}
.install-card::before {
  top: 0; left: 0;
  border-top: 1.5px solid var(--accent-primary);
  border-left: 1.5px solid var(--accent-primary);
  border-top-left-radius: 14px;
}
.install-card::after {
  bottom: 0; right: 0;
  border-bottom: 1.5px solid var(--border-strong);
  border-right: 1.5px solid var(--border-strong);
  border-bottom-right-radius: 14px;
}
.install-sub {
  margin: 16px 0 18px;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-mid);
}

.install-cta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 16px 22px 16px 18px;
  background: var(--accent-primary);
  color: var(--accent-ink);
  border: 1px solid var(--accent-primary);
  border-radius: 12px;
  transition: transform 0.18s cubic-bezier(.2,.7,.3,1), background 0.18s ease, box-shadow 0.18s ease;
  box-shadow:
    0 14px 24px -10px rgba(var(--accent-rgb), 0.45),
    0 2px 0 rgba(13, 36, 64, 0.10);
  max-width: 100%;
}
@media (max-width: 480px) {
  .install-cta { display: flex; width: 100%; gap: 12px; padding: 14px 16px; }
  .install-cta-arrow { margin-left: auto; }
}
.install-cta:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow:
    0 22px 30px -12px rgba(var(--accent-rgb), 0.55),
    0 2px 0 rgba(13, 36, 64, 0.10);
}
.install-cta:focus-visible {
  outline: 2px solid var(--ink-hi);
  outline-offset: 3px;
}
.install-cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 9px;
  background: rgba(253, 245, 232, 0.20);
  color: var(--accent-ink);
}
.install-cta-text {
  display: flex; flex-direction: column;
  text-align: left;
  line-height: 1.2;
}
.install-cta-label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.005em;
  color: var(--accent-ink);
}
.install-cta-meta {
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  color: rgba(253, 245, 232, 0.78);
  text-transform: uppercase;
}
.install-cta-arrow {
  margin-left: 4px;
  font-size: 18px;
  transition: transform 0.18s cubic-bezier(.2,.7,.3,1);
}
.install-cta:hover .install-cta-arrow { transform: translateX(4px); }

.install-howto {
  margin: 22px 0 0;
  padding: 16px 18px;
  background: var(--paper-tint);
  border: 1px dashed var(--border-subtle);
  border-radius: 10px;
  font-size: 14px;
  color: var(--ink-mid);
}
.install-howto > summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mid);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.install-howto > summary::-webkit-details-marker { display: none; }
.install-howto > summary:hover { color: var(--ink-hi); }
.howto-caret {
  display: inline-block;
  transition: transform 0.18s ease;
}
.install-howto[open] .howto-caret { transform: rotate(-180deg); }
.install-howto ol {
  margin: 14px 0 0;
  padding: 0 0 0 22px;
  display: grid;
  gap: 8px;
  line-height: 1.55;
}
.install-howto code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(13, 36, 64, 0.06);
  color: var(--ink-hi);
}
.install-howto em {
  font-style: normal;
  font-weight: 600;
  color: var(--ink-hi);
}

/* ── Secondary CTAs ─────────────────────────────────────────────────── */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
  padding-top: 4px;
}
.cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: transform 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.cta-secondary {
  color: var(--ink-hi);
  border-bottom: 1px solid var(--border-strong);
  padding-bottom: 6px;
}
.cta-secondary:hover {
  color: var(--accent-primary);
  border-bottom-color: var(--accent-primary);
}
.cta-tertiary {
  color: var(--ink-mid);
}
.cta-tertiary:hover { color: var(--ink-hi); }
.cta-arrow {
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: 0;
  transition: transform 0.18s cubic-bezier(.2,.7,.3,1);
}
.cta-secondary:hover .cta-arrow { transform: translateX(3px); }
.cta-tertiary:hover  .cta-arrow { transform: translate(2px, -2px); }

/* ── "How it works" strip ───────────────────────────────────────────── */
.strip {
  padding: 64px 0 96px;
  border-top: 1px solid var(--border-subtle);
}
.strip-eyebrow {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--ink-low);
  text-transform: uppercase;
}
.strip-headline {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--ink-hi);
}
.strip-num { color: var(--accent-primary); }
.strip-lede {
  margin: 0 0 40px;
  max-width: 52ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-mid);
}
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin: 0; padding: 0;
  list-style: none;
}
@media (max-width: 780px) {
  .steps { grid-template-columns: 1fr; gap: 28px; }
}
.step {
  padding: 26px 24px;
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  position: relative;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
}
.step::before {
  /* corner-marker — tiny detail that reads as engineering drawing */
  content: "";
  position: absolute; top: 0; left: 0;
  width: 14px; height: 14px;
  border-top: 1px solid var(--accent-primary);
  border-left: 1px solid var(--accent-primary);
  border-top-left-radius: 10px;
}
.step:not(:last-child)::after {
  /* connector — makes the three cards read as one 1→2→3 flow */
  content: "→";
  position: absolute;
  right: -22px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-sans);
  font-size: 18px;
  color: var(--ink-low);
}
@media (max-width: 780px) {
  .step:not(:last-child)::after {
    content: "↓";
    right: 50%; top: auto; bottom: -20px;
    transform: translateX(50%);
  }
}
.step-no {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--accent-primary);
}
.step-title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink-hi);
}
.step-body {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-mid);
}
.step-body em {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 12.5px;
  color: var(--accent-primary);
}

/* ── Colophon / footer ──────────────────────────────────────────────── */
.colophon {
  position: relative; z-index: 1;
  border-top: 1px solid var(--border-subtle);
}
.colophon-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 22px var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-low);
}
.colophon-mark { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--ink-mid); }
.colophon-meta { margin: 0; }
.colophon-meta a, .colophon-mark a {
  color: var(--ink-mid);
  border-bottom: 1px dotted var(--border-strong);
}
.colophon-meta a:hover, .colophon-mark a:hover {
  color: var(--accent-primary);
  border-bottom-color: var(--accent-primary);
}

/* ── Single desktop view (desktop only) ─────────────────────────────────
   At ≥1024px the whole page — masthead, hero, the 1·2·3 pipeline, and the
   footer — composes into one comfortable viewport (the Figma draft). The
   strip's lede and the demo/docs CTA-row drop out here (the nav and footer
   already carry those). Below 1024px the page reverts to the stacked,
   scrolling mobile/tablet layout. min-height (not fixed height) so short
   windows can still scroll instead of clipping. */
@media (min-width: 1024px) {
  body { display: flex; flex-direction: column; min-height: 100vh; }
  .masthead, .colophon { flex: 0 0 auto; }
  .page {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(18px, 2.2vh, 30px);
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .hero { padding: 0; }
  .demo-pane { height: 320px; }
  /* Compact the right column so hero + pipeline both fit one viewport. */
  .hero-copy .hero-headline { font-size: clamp(30px, 2.4vw, 42px); margin-bottom: 14px; }
  .hero-copy .hero-sub { font-size: 15.5px; line-height: 1.45; margin-bottom: 20px; }
  .install-sub { display: none; }
  .hero-aside .install-card { padding: 16px 18px; }

  .strip { border-top: none; padding: 0; }
  .strip-eyebrow { margin-bottom: 10px; }
  .strip-headline { font-size: clamp(28px, 2.6vw, 38px); margin-bottom: 16px; }
  .strip-lede { display: none; }
  .strip .cta-row { display: none; }
  .steps { gap: 20px; }
  .step { padding: 18px 20px; }
  .step-title { font-size: 23px; margin-bottom: 6px; }
  .step-body { font-size: 13px; line-height: 1.5; }
}

/* ── Reduced motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .lamp { animation: none; }
  * { transition-duration: 0.01ms !important; }
}