/* Phantom Read — architectural-blueprint direction (see docs/DESIGN.md).
   Prussian drafting paper, a fine cyan grid, mono annotations, and a coral
   anomaly accent. Product and landing page share these tokens. */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  --paper: #0d1b2a;
  --paper-2: #12253a;
  --surface: #16304a;
  --surface-line: rgba(120, 190, 230, 0.18);
  --grid: rgba(120, 190, 230, 0.09);
  --ink: #eaf2ff;
  --muted: #8fb0cf;
  --cyan: #58c4dc;
  --cyan-deep: #2f8fb0;
  --coral: #ff6b57;
  --amber: #ffcf6b;
  --unit: 8px;
  --radius: 10px;
  --radius-chip: 6px;
  --display: 'Space Grotesk', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;
  --shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.8);
  --inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--mono);
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    radial-gradient(ellipse 90% 60% at 28% -10%, #1b3a5c 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 100% 110%, #10283f 0%, transparent 55%);
  background-size:
    28px 28px,
    28px 28px,
    100% 100%,
    100% 100%;
  background-attachment: fixed;
}

/* ---- masthead ---- */

.masthead {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--unit);
  padding: calc(var(--unit) * 5) calc(var(--unit) * 3) calc(var(--unit) * 2);
  text-align: center;
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4ch;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 6vw, 3.4rem);
  letter-spacing: -0.02em;
}

.wordmark__glyph {
  color: var(--coral);
  font-size: 0.8em;
  filter: drop-shadow(0 0 12px rgba(255, 107, 87, 0.5));
  animation: pulse-glyph 4s var(--ease) infinite;
}

@keyframes pulse-glyph {
  0%, 100% { opacity: 0.85; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-2px); }
}

.wordmark__accent {
  color: var(--cyan);
}

.tagline {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}

.mute {
  position: absolute;
  top: calc(var(--unit) * 3);
  right: calc(var(--unit) * 3);
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
  min-height: 40px;
  padding: 0 calc(var(--unit) * 1.5);
  color: var(--cyan);
  font-family: var(--mono);
  font-size: 0.8rem;
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius-chip);
  box-shadow: var(--inset);
  cursor: pointer;
  transition: border-color 160ms var(--ease), color 160ms var(--ease), transform 120ms var(--ease);
}

.mute:hover { border-color: var(--cyan); }
.mute:active { transform: translateY(1px); }
.mute:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.mute--off { color: var(--muted); }
.mute--off .mute__icon { text-decoration: line-through; }

/* ---- three-region layout ---- */

.app {
  max-width: 1440px;
  margin: 0 auto;
  padding: calc(var(--unit) * 2) calc(var(--unit) * 3) calc(var(--unit) * 8);
  display: grid;
  gap: calc(var(--unit) * 3);
  grid-template-columns: 300px minmax(0, 1fr) 320px;
  align-items: start;
}

.rail, .panel {
  position: sticky;
  top: var(--unit);
}

@media (max-width: 1100px) {
  .app {
    grid-template-columns: minmax(0, 1fr);
  }
  .rail, .panel {
    position: static;
  }
}

.colophon {
  display: flex;
  justify-content: center;
  gap: calc(var(--unit) * 2);
  color: var(--muted);
  font-size: 0.75rem;
  padding: calc(var(--unit) * 3);
  border-top: 1px solid rgba(120, 190, 230, 0.12);
}

.colophon__links {
  display: inline-flex;
  gap: calc(var(--unit) * 2);
}
.colophon__link {
  color: var(--cyan);
  text-decoration: none;
}
.colophon__link:hover { text-decoration: underline; }

/* ---- learn / FAQ band (SEO copy, below the app) ---- */

.learn {
  max-width: 820px;
  margin: 0 auto;
  padding: calc(var(--unit) * 4) calc(var(--unit) * 3) calc(var(--unit) * 2);
}
.learn__inner {
  background: linear-gradient(180deg, var(--paper-2), var(--surface));
  border: 1px solid var(--surface-line);
  border-radius: var(--radius);
  padding: calc(var(--unit) * 3.5);
  box-shadow: var(--inset), var(--shadow);
}
.learn__h {
  margin: calc(var(--unit) * 3) 0 var(--unit);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.learn__h:first-child { margin-top: 0; }
.learn p {
  margin: 0 0 var(--unit);
  max-width: 68ch;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--muted);
}
.faq { margin: 0; }
.faq dt {
  margin-top: calc(var(--unit) * 2);
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--cyan);
}
.faq dd {
  margin: var(--unit) 0 0;
  max-width: 68ch;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--muted);
}

.noscript {
  text-align: center;
  color: var(--coral);
  padding: var(--unit);
}

/* ---- controls rail ---- */

.rail__inner {
  display: flex;
  flex-direction: column;
  gap: calc(var(--unit) * 1.5);
  background: linear-gradient(180deg, var(--paper-2), var(--surface));
  border: 1px solid var(--surface-line);
  border-radius: var(--radius);
  padding: calc(var(--unit) * 2.5);
  box-shadow: var(--inset), var(--shadow);
}

.rail__heading {
  margin: var(--unit) 0 0;
  font-family: var(--display);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.rail__blurb {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--muted);
  max-width: 60ch;
}

.picker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--unit);
}

.pill {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 0 calc(var(--unit) * 1.5);
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--muted);
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius-chip);
  cursor: pointer;
  transition: color 160ms var(--ease), border-color 160ms var(--ease),
    background 160ms var(--ease), transform 120ms var(--ease);
}

.pill:hover { color: var(--ink); border-color: var(--cyan-deep); }
.pill:active { transform: translateY(1px); }
.pill:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.pill--on {
  color: var(--paper);
  background: var(--cyan);
  border-color: var(--cyan);
  font-weight: 500;
}

.hint {
  display: flex;
  gap: 0.6ch;
  align-items: center;
  margin: 0;
  font-size: 0.72rem;
}
.hint__fire { color: var(--coral); }
.hint__safe { color: var(--amber); }
.hint__sep { color: var(--muted); }

/* segmented isolation selector */
.seg {
  display: grid;
  grid-template-columns: 2.4ch repeat(3, 1fr);
  gap: 4px;
  align-items: center;
  padding: 4px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius-chip);
}

.seg__label {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.8rem;
  text-align: center;
}
.seg--t1 .seg__label { color: var(--cyan); }
.seg--t2 .seg__label { color: var(--coral); }

.seg__opt {
  min-height: 44px;
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: color 140ms var(--ease), background 140ms var(--ease), transform 100ms var(--ease);
}
.seg__opt:hover { color: var(--ink); background: rgba(120, 190, 230, 0.08); }
.seg__opt:active { transform: translateY(1px); }
.seg__opt:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
.seg--t1 .seg__opt--on { color: var(--paper); background: var(--cyan); }
.seg--t2 .seg__opt--on { color: var(--paper); background: var(--coral); }

/* transport */
.transport {
  margin-top: var(--unit);
  display: flex;
  flex-direction: column;
  gap: var(--unit);
}
.transport__count {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-transform: uppercase;
}
.transport__row {
  display: grid;
  grid-template-columns: 44px 44px 1fr 1.4fr;
  gap: var(--unit);
}
.tbtn {
  min-height: 44px;
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius-chip);
  box-shadow: var(--inset);
  cursor: pointer;
  transition: border-color 140ms var(--ease), background 140ms var(--ease),
    transform 90ms var(--ease), box-shadow 90ms var(--ease);
}
.tbtn:hover:not(:disabled) { border-color: var(--cyan); }
.tbtn:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }
.tbtn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.tbtn:disabled { opacity: 0.35; cursor: not-allowed; }
.tbtn--primary {
  color: var(--paper);
  background: var(--cyan);
  border-color: var(--cyan);
  font-weight: 500;
}
.tbtn--primary:hover:not(:disabled) { background: #6fd2e8; }

/* ---- stage: the hero ---- */

.stage__inner {
  display: flex;
  flex-direction: column;
  gap: calc(var(--unit) * 3);
  min-height: 60vh;
}

/* two-lane timeline */
.lanes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--unit);
  position: relative;
}

.lane-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.8ch;
  padding: calc(var(--unit) * 1.25) calc(var(--unit) * 1.5);
  background: linear-gradient(180deg, var(--paper-2), rgba(18, 37, 58, 0.85));
  border: 1px solid var(--surface-line);
  border-radius: var(--radius-chip);
  backdrop-filter: blur(4px);
}
.lane-head--t1 { border-top: 2px solid var(--cyan); }
.lane-head--t2 { border-top: 2px solid var(--coral); }
.lane-head__name { font-family: var(--display); font-weight: 700; }
.lane-head--t1 .lane-head__name { color: var(--cyan); }
.lane-head--t2 .lane-head__name { color: var(--coral); }
.lane-head__iso { font-size: 0.72rem; color: var(--muted); margin-right: auto; }

.badge {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid var(--surface-line);
  color: var(--muted);
}
.badge--active { color: var(--cyan); border-color: var(--cyan-deep); }
.badge--committed { color: var(--amber); border-color: rgba(255, 207, 107, 0.4); }
.badge--aborted { color: var(--coral); border-color: rgba(255, 107, 87, 0.5); }
.badge--idle { opacity: 0.6; }

.step {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: calc(var(--unit) * 1.25) calc(var(--unit) * 1.5);
  border: 1px solid var(--surface-line);
  border-left-width: 3px;
  border-radius: var(--radius-chip);
  background: rgba(0, 0, 0, 0.18);
  opacity: 0.5;
  transition: opacity 160ms var(--ease), transform 120ms var(--ease),
    box-shadow 160ms var(--ease), background 160ms var(--ease);
}
.step--t1 { border-left-color: var(--cyan); }
.step--t2 { border-left-color: var(--coral); }
.step--done { opacity: 0.82; }
.step--next { opacity: 0.62; border-style: dashed; }
.step--active {
  opacity: 1;
  background: rgba(88, 196, 220, 0.08);
  box-shadow: 0 0 0 1px var(--cyan), 0 10px 26px -18px rgba(88, 196, 220, 0.9);
  transform: translateY(-1px);
}
.step--t2.step--active { box-shadow: 0 0 0 1px var(--coral), 0 10px 26px -18px rgba(255, 107, 87, 0.9); }
.step--error { border-color: var(--coral); background: rgba(255, 107, 87, 0.1); }

.step__op {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.step__note { font-size: 0.78rem; color: var(--ink); }
.step__result {
  font-size: 0.72rem;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}
.step--error .step__result { color: var(--coral); }

/* ---- shared table / version chains ---- */

.board {
  background: linear-gradient(180deg, var(--paper-2), var(--surface));
  border: 1px solid var(--surface-line);
  border-radius: var(--radius);
  padding: calc(var(--unit) * 2.5);
  box-shadow: var(--inset), var(--shadow);
}
.board__title {
  margin: 0 0 calc(var(--unit) * 2);
  font-family: var(--display);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.rows { display: flex; flex-direction: column; gap: var(--unit); }
.rows__empty { color: var(--muted); font-size: 0.82rem; margin: 0; }

.row {
  display: flex;
  flex-direction: column;
  gap: var(--unit);
  padding: calc(var(--unit) * 1.5);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius-chip);
  background: rgba(0, 0, 0, 0.16);
  transition: box-shadow 140ms var(--ease), border-color 140ms var(--ease);
}
.row__head { display: flex; align-items: baseline; gap: 1ch; }
.row__key { font-family: var(--display); font-weight: 500; color: var(--ink); }
.row__value {
  margin-left: auto;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}

.row--flare {
  border-color: var(--coral);
  animation: flare 900ms var(--ease);
}
.row--calm {
  border-color: var(--amber);
  box-shadow: 0 0 0 1px rgba(255, 207, 107, 0.4), 0 0 24px -6px rgba(255, 207, 107, 0.5);
}
@keyframes flare {
  0% { box-shadow: 0 0 0 1px var(--coral), 0 0 0 0 rgba(255, 107, 87, 0.6); }
  40% { box-shadow: 0 0 0 1px var(--coral), 0 0 30px 6px rgba(255, 107, 87, 0.55); }
  100% { box-shadow: 0 0 0 1px var(--coral), 0 0 18px -4px rgba(255, 107, 87, 0.4); }
}

.chain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chain__arrow { color: var(--muted); }
.ver {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 5px 8px;
  border: 1px solid var(--surface-line);
  border-radius: 5px;
  background: rgba(120, 190, 230, 0.05);
}
.ver__val { font-size: 0.82rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.ver__stamp { font-size: 0.6rem; color: var(--muted); letter-spacing: 0.02em; }
.ver--committed { border-color: rgba(255, 207, 107, 0.4); }
.ver--committed .ver__val { color: var(--amber); }
.ver--active { border-style: dashed; }
.ver--aborted { opacity: 0.4; text-decoration: line-through; }
.ver--dead { opacity: 0.55; }
.ver--live { box-shadow: var(--inset); }

.sees { display: flex; flex-wrap: wrap; gap: 6px; }
.sees__chip {
  font-size: 0.66rem;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--surface-line);
}
.sees__chip--t1 { color: var(--cyan); border-color: var(--cyan-deep); }
.sees__chip--t2 { color: var(--coral); border-color: rgba(255, 107, 87, 0.5); }

/* ---- annotation panel ---- */

.panel__inner {
  display: flex;
  flex-direction: column;
  gap: var(--unit);
  background: linear-gradient(180deg, var(--paper-2), var(--surface));
  border: 1px solid var(--surface-line);
  border-radius: var(--radius);
  padding: calc(var(--unit) * 2.5);
  box-shadow: var(--inset), var(--shadow);
}
.panel__title {
  margin: var(--unit) 0 0;
  font-family: var(--display);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.explain {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--ink);
  min-height: 3.2em;
  border-left: 2px solid var(--cyan);
  padding-left: var(--unit);
}

.inspector { display: flex; flex-direction: column; gap: var(--unit); }
.insp {
  padding: var(--unit) calc(var(--unit) * 1.25);
  border: 1px solid var(--surface-line);
  border-left-width: 3px;
  border-radius: var(--radius-chip);
  background: rgba(0, 0, 0, 0.16);
}
.insp--t1 { border-left-color: var(--cyan); }
.insp--t2 { border-left-color: var(--coral); }
.insp__head { display: flex; align-items: center; gap: 0.8ch; margin-bottom: 4px; }
.insp__name { font-family: var(--display); font-weight: 500; font-size: 0.78rem; }
.insp__row { font-size: 0.72rem; color: var(--muted); line-height: 1.4; }
.insp__row--dim { opacity: 0.75; }
.insp__empty { font-size: 0.78rem; color: var(--muted); margin: 0; }

/* ---- anomaly / win callout ---- */

.callout {
  position: fixed;
  inset: auto 0 0 0;
  display: flex;
  justify-content: center;
  padding: calc(var(--unit) * 2);
  pointer-events: none;
  z-index: 20;
}
.callout[hidden] { display: none; }
.callout__card {
  pointer-events: auto;
  position: relative;
  max-width: 460px;
  width: 100%;
  padding: calc(var(--unit) * 2.5);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--paper-2), var(--surface));
  border: 1px solid var(--surface-line);
  box-shadow: 0 -10px 60px -20px rgba(0, 0, 0, 0.9), var(--inset);
  animation: rise 220ms var(--ease);
}
.callout--anomaly .callout__card { border-color: var(--coral); box-shadow: 0 0 40px -10px rgba(255, 107, 87, 0.5), var(--inset); }
.callout--safe .callout__card { border-color: var(--amber); box-shadow: 0 0 44px -10px rgba(255, 207, 107, 0.5), var(--inset); }
@keyframes rise { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.callout__tag {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.callout--anomaly .callout__tag { color: var(--coral); }
.callout--safe .callout__tag { color: var(--amber); }
.callout__title {
  margin: 4px 0 6px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}
.callout--anomaly .callout__title { color: var(--coral); }
.callout--safe .callout__title { color: var(--amber); }
.callout__detail { margin: 0 0 calc(var(--unit) * 2); font-size: 0.85rem; color: var(--ink); line-height: 1.5; }
.callout__cta { display: flex; flex-wrap: wrap; gap: var(--unit); }
.cbtn {
  min-height: 44px;
  padding: 0 calc(var(--unit) * 2);
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: var(--radius-chip);
  cursor: pointer;
  transition: border-color 140ms var(--ease), transform 90ms var(--ease);
}
.cbtn:hover { border-color: var(--cyan); }
.cbtn:active { transform: translateY(2px); }
.cbtn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.cbtn--primary { color: var(--paper); background: var(--cyan); border-color: var(--cyan); font-weight: 500; }

/* confetti — the prevention celebration */
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.confetti__bit {
  position: absolute;
  top: -10%;
  left: calc(6% + (var(--i) * 6.4%));
  width: 7px;
  height: 12px;
  background: var(--amber);
  opacity: 0.9;
  transform: rotate(20deg);
  animation: fall 1100ms var(--ease) calc(var(--i) * 40ms) 1;
}
.confetti__bit:nth-child(3n) { background: var(--cyan); }
.confetti__bit:nth-child(3n + 1) { background: var(--coral); }
@keyframes fall {
  to { transform: translateY(320px) rotate(220deg); opacity: 0; }
}

/* ---- mobile ---- */
@media (max-width: 560px) {
  .app { padding: var(--unit); }
  .transport__row { grid-template-columns: 44px 44px 1fr 1.3fr; }
  .row__head { flex-wrap: wrap; }
  .callout__title { font-size: 1.25rem; }
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .confetti { display: none; }
}

/* Visually hidden but available to assistive tech (the live step narration). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- landing band ---- */

.landing {
  max-width: 1440px;
  margin: 0 auto;
  padding: calc(var(--unit) * 2) calc(var(--unit) * 3) 0;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: calc(var(--unit) * 3);
  align-items: center;
}

.landing__headline {
  margin: 0 0 var(--unit);
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.landing__headline em { color: var(--cyan); font-style: normal; }

.landing__copy {
  margin: 0 0 calc(var(--unit) * 2);
  max-width: 62ch;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--muted);
}

.cta {
  min-height: 48px;
  padding: 0 calc(var(--unit) * 2.5);
  font-family: var(--mono);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--paper);
  background: var(--cyan);
  border: 1px solid var(--cyan);
  border-radius: var(--radius-chip);
  box-shadow: 0 12px 30px -14px rgba(88, 196, 220, 0.8);
  cursor: pointer;
  transition: transform 100ms var(--ease), background 140ms var(--ease), box-shadow 140ms var(--ease);
}
.cta:hover { background: #6fd2e8; box-shadow: 0 16px 36px -14px rgba(88, 196, 220, 0.95); }
.cta:active { transform: translateY(2px); box-shadow: none; }
.cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.landing__cards { display: grid; gap: var(--unit); }
.acard {
  display: grid;
  gap: 3px;
  text-align: left;
  padding: calc(var(--unit) * 1.5) calc(var(--unit) * 2);
  color: var(--ink);
  background: linear-gradient(180deg, var(--paper-2), var(--surface));
  border: 1px solid var(--surface-line);
  border-left-width: 3px;
  border-radius: var(--radius-chip);
  box-shadow: var(--inset);
  cursor: pointer;
  transition: transform 140ms var(--ease), border-color 140ms var(--ease), box-shadow 140ms var(--ease);
}
.acard--dirty { border-left-color: var(--muted); }
.acard--phantom { border-left-color: var(--cyan); }
.acard--skew { border-left-color: var(--coral); }
.acard:hover { transform: translateX(3px); box-shadow: var(--inset), var(--shadow); }
.acard:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.acard__name { font-family: var(--display); font-weight: 500; font-size: 0.95rem; }
.acard__desc { font-size: 0.76rem; color: var(--muted); line-height: 1.45; }
.acard__go { font-size: 0.72rem; color: var(--cyan); margin-top: 2px; }

@media (max-width: 860px) {
  .landing { grid-template-columns: minmax(0, 1fr); }
}