/* ==========================================================================
   Axon Agent - the whole SaaS surface in one stylesheet
   ==========================================================================
   Every page that extends base.html is styled from here: the marketing front
   door, the auth cards, the account screen and the sending console. One file
   rather than two, because the console and the landing page share the topbar,
   the buttons and the form controls, and a split stylesheet is how those three
   drift apart.

   The look is an instrument panel, not a brochure: near-black surfaces, one
   amber accent reserved for "this is happening right now" and "this is the
   button that starts it", green for delivered, red for failed. Nothing else
   competes for attention.
   ========================================================================== */

:root {
  /* surfaces, darkest first */
  --ink:      #0b0e14;
  --slab:     #12161f;
  --slab-up:  #171c27;
  --sunk:     #090c11;
  --edge:     #232a38;
  --edge-lit: #333d50;

  /* text */
  --paper:    #e8ebf0;
  --paper-dim:#c6cdd9;
  --muted:    #8a95aa;
  --faint:    #5c6678;

  /* meaning */
  --signal:   #ffb020;
  --signal-2: #ffc04a;
  --signal-dim: rgba(255, 176, 32, 0.14);
  --signal-line: rgba(255, 176, 32, 0.42);
  --go:       #34d399;
  --go-dim:   rgba(52, 211, 153, 0.13);
  --halt:     #f4635e;
  --halt-dim: rgba(244, 99, 94, 0.13);

  --radius:    12px;
  --radius-sm: 8px;
  --radius-xs: 5px;
  --sans: "Space Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;
  --gutter: 22px;
  --lift: 0 18px 44px -26px rgba(0, 0, 0, 0.9);
}

/* --------------------------------------------------------------- baseline */

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

/* Several blocks below are flex or grid containers, whose `display` would
   otherwise beat the browser's own `[hidden] { display: none }`. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(940px 460px at 82% -10%, rgba(255, 176, 32, 0.075), transparent 68%),
    radial-gradient(700px 380px at 4% 8%, rgba(52, 211, 153, 0.045), transparent 70%),
    var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.018em; }
p { margin: 0; }

a { color: var(--signal); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--signal-2); }

code, .mono, pre { font-family: var(--mono); }

code {
  font-size: 0.9em;
  color: var(--signal);
  background: var(--signal-dim);
  padding: 1px 5px;
  border-radius: var(--radius-xs);
}

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
  border-radius: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 60;
  background: var(--paper);
  color: var(--ink);
  font-weight: 600;
  padding: 9px 15px;
  border-radius: var(--radius-sm);
}

.skip:focus { left: 12px; }

/* ----------------------------------------------------------------- topbar */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 13px clamp(16px, 4vw, 40px);
  border-bottom: 1px solid var(--edge);
  background: rgba(9, 12, 17, 0.82);
  backdrop-filter: blur(10px);
}

.mark {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  color: var(--paper);
  text-decoration: none;
}

.mark:hover { color: var(--paper); }

.mark__glyph {
  width: 9px;
  height: 9px;
  flex: none;
  background: var(--signal);
  transform: rotate(45deg) translateY(-1px);
  box-shadow: 0 0 14px rgba(255, 176, 32, 0.55);
}

.mark__name { font-weight: 700; letter-spacing: -0.022em; white-space: nowrap; }

.mark__role {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  white-space: nowrap;
}

.nav {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}

.nav__link {
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 7px 11px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.nav__link:hover { color: var(--paper); background: rgba(255, 255, 255, 0.04); }

.nav__link.is-current {
  color: var(--signal);
  background: var(--signal-dim);
}

.nav__who {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--faint);
  padding: 0 4px 0 10px;
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-left: 1px solid var(--edge);
  margin-left: 6px;
}

.nav__form { margin: 0; display: inline-flex; }

/* ---------------------------------------------------------------- flashes */

.flashes {
  max-width: 1360px;
  margin: 14px auto 0;
  padding: 0 clamp(16px, 4vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.flash {
  border: 1px solid var(--edge);
  border-left: 3px solid var(--muted);
  border-radius: var(--radius-sm);
  background: var(--slab);
  padding: 11px 15px;
  font-size: 14px;
}

.flash[data-tone="good"]    { border-left-color: var(--go); }
.flash[data-tone="bad"],
.flash[data-tone="error"]   { border-left-color: var(--halt); }
.flash[data-tone="warning"] { border-left-color: var(--signal); }

/* ----------------------------------------------------------------- layout */

.shell, .console, .accountwrap, .landing {
  max-width: 1360px;
  margin: 0 auto;
  padding: clamp(20px, 3vw, 34px) clamp(16px, 4vw, 40px) 48px;
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
}

.accountwrap { max-width: 780px; }

.authwrap {
  min-height: 68vh;
  display: grid;
  place-items: center;
  padding: clamp(24px, 5vw, 56px) clamp(16px, 4vw, 40px);
}

.pagetitle { font-size: clamp(24px, 3vw, 30px); }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  padding: 11px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: transform 110ms ease, background-color 140ms ease,
              border-color 140ms ease, color 140ms ease;
}

.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.42; cursor: not-allowed; transform: none; }

.btn--go {
  background: var(--signal);
  color: #1b1405;
  padding: 12px 24px;
  font-size: 15px;
  box-shadow: 0 0 0 1px var(--signal-line),
              0 12px 28px -16px rgba(255, 176, 32, 0.85);
}

.btn--go:hover:not(:disabled) { background: var(--signal-2); color: #1b1405; }

.btn--warn {
  background: transparent;
  border-color: rgba(244, 99, 94, 0.48);
  color: var(--halt);
}

.btn--warn:hover:not(:disabled) { background: var(--halt-dim); color: var(--halt); }

.btn--ghost {
  background: transparent;
  border-color: var(--edge);
  color: var(--paper);
}

.btn--ghost:hover:not(:disabled) {
  border-color: var(--edge-lit);
  background: rgba(255, 255, 255, 0.035);
  color: var(--paper);
}

.btn--quiet {
  background: transparent;
  border-color: var(--edge);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  padding: 8px 12px;
}

.btn--quiet:hover:not(:disabled) {
  color: var(--paper);
  border-color: var(--edge-lit);
  background: rgba(255, 255, 255, 0.03);
}

/* ------------------------------------------------------------------ pills */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 5px 11px;
  border: 1px solid var(--edge);
  border-radius: 100px;
  color: var(--muted);
  white-space: nowrap;
}

.pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
  opacity: 0.85;
}

.pill[data-state="busy"]   { color: var(--signal); border-color: var(--signal-line); }
.pill[data-state="done"]   { color: var(--go);     border-color: rgba(52, 211, 153, 0.4); }
.pill[data-state="broken"] { color: var(--halt);   border-color: rgba(244, 99, 94, 0.42); }

.pill[data-state="busy"]::before { animation: blip 1.3s ease-in-out infinite; }

.pill--runner[data-online="1"] { color: var(--go); border-color: rgba(52, 211, 153, 0.4); }
.pill--dry { color: var(--signal); border-color: var(--signal-line); }

@keyframes blip { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* ----------------------------------------------------------------- fields */

.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }

.field__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}

.field__hint {
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--faint);
}

.field__rule {
  color: var(--faint);
  font-size: 12.5px;
  line-height: 1.5;
}

/* ------------------------------------------------------- password strength */
/* Three bands - red, amber, green - drawn by static/js/password.js. The level
   is written once, to data-level on the wrapper, so the bar and the caption
   cannot disagree about how strong the password is. The wrapper starts hidden
   and is revealed on the first keystroke: with scripting off it never appears,
   which is right, because there is then nothing to measure it with. */

.pwmeter { display: flex; flex-direction: column; gap: 6px; }

/* .pwmeter sets display:flex, which outranks the browser's own [hidden] rule,
   so hiding has to be restated here or the empty meter shows through. */
.pwmeter[hidden] { display: none; }

.pwmeter__track {
  height: 5px;
  border-radius: 999px;
  background: var(--sunk);
  border: 1px solid var(--edge);
  overflow: hidden;
}

.pwmeter__bar {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--faint);
  transition: width 160ms ease, background-color 160ms ease;
}

.pwmeter__label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}

.pwmeter[data-level="1"] .pwmeter__bar { width: 34%; background: var(--halt); }
.pwmeter[data-level="2"] .pwmeter__bar { width: 67%; background: var(--signal); }
.pwmeter[data-level="3"] .pwmeter__bar { width: 100%; background: var(--go); }

.pwmeter[data-level="1"] .pwmeter__label { color: var(--halt); }
.pwmeter[data-level="2"] .pwmeter__label { color: var(--signal); }
.pwmeter[data-level="3"] .pwmeter__label { color: var(--go); }

/* "Both boxes have to match" is the only rule left on the form, so it is worth
   answering live rather than on submit. */
.pwmatch { font-size: 12.5px; line-height: 1.5; color: var(--faint); }
.pwmatch[hidden] { display: none; }
.pwmatch[data-ok="0"] { color: var(--signal); }
.pwmatch[data-ok="1"] { color: var(--go); }

.field__input {
  width: 100%;
  min-width: 0;
  background: var(--sunk);
  border: 1px solid var(--edge);
  border-radius: var(--radius-sm);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 14px;
  padding: 10px 12px;
  transition: border-color 140ms ease, background-color 140ms ease;
}

.field__input:hover { border-color: var(--edge-lit); }

.field__input:focus {
  outline: none;
  border-color: var(--signal);
  background: #0d1118;
  box-shadow: 0 0 0 3px rgba(255, 176, 32, 0.1);
}

select.field__input {
  appearance: none;
  /* The caret is drawn rather than left to the platform, because a native
     select arrow on a near-black background renders as a black-on-black
     smudge in both Edge and Firefox. */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 52%, calc(100% - 12px) 52%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 34px;
  cursor: pointer;
}

.field__input--short { max-width: 150px; }

.field__area {
  resize: vertical;
  line-height: 1.6;
  min-height: 84px;
  font-family: var(--mono);
  font-size: 13px;
}

.field__area--tall { min-height: 190px; font-family: var(--sans); font-size: 14.5px; }

.field__file {
  flex: 1 1 200px;
  min-width: 0;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  background: var(--sunk);
  border: 1px dashed var(--edge);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  cursor: pointer;
}

.field__file:hover { border-color: var(--edge-lit); }

.field__file::file-selector-button {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--paper);
  background: var(--slab-up);
  border: 1px solid var(--edge);
  border-radius: var(--radius-xs);
  padding: 6px 12px;
  margin-right: 12px;
  cursor: pointer;
}

::placeholder { color: #4e586c; }

.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.row--split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  align-items: start;
}

/* --------------------------------------------------------------- switches */

.switches { display: flex; flex-direction: column; gap: 9px; }

.switch {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 11px 13px;
  border: 1px solid var(--edge);
  border-radius: var(--radius-sm);
  background: var(--sunk);
  font-size: 13.5px;
  transition: border-color 140ms ease, background-color 140ms ease;
}

.switch:hover { border-color: var(--edge-lit); }

.switch input {
  appearance: none;
  flex: none;
  width: 38px;
  height: 21px;
  margin: 0;
  border-radius: 100px;
  background: var(--edge);
  border: 1px solid var(--edge-lit);
  cursor: pointer;
  position: relative;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.switch input::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform 160ms ease, background-color 160ms ease;
}

.switch input:checked {
  background: var(--signal-dim);
  border-color: var(--signal-line);
}

.switch input:checked::after {
  transform: translateX(17px);
  background: var(--signal);
}

.switch:has(input:checked) { border-color: var(--signal-line); }

.switch span { min-width: 0; }
.switch em { font-style: normal; color: var(--faint); }

/* ------------------------------------------------------------------ chips */

.chips { display: flex; flex-wrap: wrap; gap: 7px; }

.chip {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--signal);
  background: var(--signal-dim);
  border: 1px solid var(--signal-line);
  border-radius: 100px;
  padding: 5px 12px;
  cursor: pointer;
  transition: background-color 140ms ease;
}

.chip:hover { background: rgba(255, 176, 32, 0.24); }

/* ------------------------------------------------------------------ cards */

.card {
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--slab-up), var(--slab));
  padding: clamp(18px, 2.6vw, 26px);
  display: flex;
  flex-direction: column;
  gap: 15px;
  box-shadow: var(--lift);
}

.card--auth { width: min(440px, 100%); }
.card--error { text-align: center; align-items: center; }

.card__title { font-size: 18px; }
.card--auth .card__title { font-size: 22px; }

.card__note { color: var(--muted); font-size: 13.5px; max-width: 66ch; }

.card__foot {
  color: var(--muted);
  font-size: 13px;
  padding-top: 4px;
  border-top: 1px solid var(--edge);
  margin-top: 2px;
}

.card--error .card__foot { border: 0; }

.errcode {
  font-family: var(--mono);
  font-size: 52px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--signal);
  line-height: 1;
}

.formerror {
  border: 1px solid rgba(244, 99, 94, 0.42);
  border-left: 3px solid var(--halt);
  border-radius: var(--radius-sm);
  background: var(--halt-dim);
  color: #ffd9d7;
  font-size: 13.5px;
  padding: 11px 14px;
}

/* The way out of the refusal - "Create an account" under an unknown e-mail,
   "Sign in instead" under an address that is already registered. A block on its
   own line, so it does not read as the tail of the sentence above it, and only
   as wide as its text so the underline stops where the words do. */
.formerror__do {
  display: block;
  width: fit-content;
  margin-top: 8px;
  color: #fff;
  font-weight: 620;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.formerror__do:hover,
.formerror__do:focus-visible { color: #ffe9e8; }

/* ------------------------------------------------------------------- forms */

.form { display: flex; flex-direction: column; gap: 14px; }

.form--inline {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.form__hint { color: var(--faint); font-size: 12.5px; }

.form .btn--go { align-self: flex-start; }

/* ------------------------------------------------- account: facts and keys */

.kv {
  margin: 0;
  border: 1px solid var(--edge);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.kv__row {
  display: grid;
  grid-template-columns: minmax(120px, 0.5fr) minmax(0, 1fr);
  gap: 14px;
  padding: 11px 15px;
  background: var(--sunk);
  border-top: 1px solid var(--edge);
}

.kv__row:first-child { border-top: 0; }

.kv dt {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  align-self: center;
}

.kv dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 14px;
}

.kv .num {
  font-family: var(--mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--signal);
}

.secret { display: flex; gap: 8px; flex-wrap: wrap; }

.secret__value {
  flex: 1 1 260px;
  min-width: 0;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  background: var(--sunk);
  border: 1px solid var(--edge);
  border-radius: var(--radius-sm);
  color: var(--paper);
  padding: 10px 12px;
}

.snippet {
  margin: 0;
  background: var(--sunk);
  border: 1px solid var(--edge);
  border-left: 3px solid var(--signal-line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  overflow-x: auto;
  font-size: 12.5px;
  line-height: 1.6;
}

.snippet code { background: none; padding: 0; color: var(--paper-dim); }

/* ------------------------------------------- account: the setup walkthrough */

/* Five numbered steps for getting the sender running, with the three lines that
   differ between Windows, macOS and Linux swapped by a tablist rather than
   printed three times over. With JavaScript off `data-os` stays at its rendered
   value and the Windows variant shows - the steps still read correctly. */

.howto {
  border: 1px solid var(--edge);
  border-radius: var(--radius-sm);
  background: var(--sunk);
  padding: clamp(14px, 1.8vw, 20px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.howto__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.howto__title { font-size: 15px; font-weight: 620; }

.howto__tabs {
  display: flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: var(--ink);
}

.howto__tab {
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  padding: 5px 13px;
  cursor: pointer;
}

.howto__tab:hover { color: var(--paper); }

.howto__tab[aria-selected="true"] {
  background: var(--signal-dim);
  border: 1px solid var(--signal-line);
  padding: 4px 12px;
  color: var(--signal-2);
  font-weight: 600;
}

.howto__tab:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 1px;
}

/* The whole point of the tabs: everything tagged for another OS is gone, not
   merely dimmed, so the reader never has to work out which line is theirs. */
.howto[data-os="win"] .os:not(.os--win),
.howto[data-os="mac"] .os:not(.os--mac),
.howto[data-os="nix"] .os:not(.os--nix) { display: none; }

.snippet code.os { display: block; }

.steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.step {
  counter-increment: step;
  position: relative;
  padding-left: 38px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

/* The number as a dial on the left, and a hairline down to the next one, so a
   long step does not lose its place in the sequence. */
.step::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border: 1px solid var(--signal-line);
  border-radius: 50%;
  background: var(--signal-dim);
  color: var(--signal-2);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
}

.step::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 31px;
  bottom: -18px;
  width: 1px;
  background: var(--edge);
}

.step:last-child::after { display: none; }

.step__title {
  font-size: 14px;
  font-weight: 620;
  line-height: 1.35;
  padding-top: 3px;
}

.step__text { color: var(--paper-dim); font-size: 13.5px; max-width: 68ch; }
.step__hint { color: var(--muted); font-size: 12.5px; max-width: 68ch; }

.step__text strong { color: var(--paper); font-weight: 620; }
.step code, .howto__more code { font-size: 12.5px; }

/* A command with its own Copy button. The button sits beside the box rather than
   inside it: a floating button over a horizontally scrolling <pre> covers the
   end of the very line it is offering to copy. */
.snip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}

.snip .snippet { flex: 1 1 320px; min-width: 0; }
.snip__copy { flex: 0 0 auto; }

.howto__more { display: flex; flex-direction: column; gap: 12px; }

/* The walkthrough's own background is already --sunk, so the fold needs to sit
   a shade darker to read as a separate panel rather than a seam. */
.howto .more { background: var(--ink); }

kbd {
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1;
  display: inline-block;
  padding: 3px 6px;
  border: 1px solid var(--edge-lit);
  border-bottom-width: 2px;
  border-radius: var(--radius-xs);
  background: var(--slab-up);
  color: var(--paper);
  white-space: nowrap;
}

@media (max-width: 560px) {
  .howto__head { flex-direction: column; align-items: flex-start; }
  .step { padding-left: 32px; }
  .step::after { left: 12px; }
}

/* ------------------------------------------------------------------ stage */

.stage {
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background:
    radial-gradient(620px 220px at 88% 0%, rgba(255, 176, 32, 0.07), transparent 70%),
    linear-gradient(180deg, var(--slab-up), var(--sunk));
  padding: clamp(20px, 3vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-shadow: var(--lift);
}

.stage__head { display: flex; flex-direction: column; gap: 10px; }

.stage__pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.stage__title {
  font-size: clamp(25px, 3.6vw, 36px);
  line-height: 1.12;
}

.stage__note { color: var(--muted); font-size: 14px; max-width: 62ch; }

.stage__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.savemark {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--go);
  animation: fade-out 2.4s ease forwards;
}

@keyframes fade-out { 0%, 55% { opacity: 1; } 100% { opacity: 0; } }

/* -------------------------------------------------------------------- cue */
/* The stage's "do something now" panel: the QR instruction while a code is on
   screen, and anything that means "this cannot work yet". Deliberately loud -
   it is the one moment the run is waiting on the person, not the other way
   round. */

.cue {
  border: 1px solid var(--signal-line);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
  background: var(--signal-dim);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.cue__head {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  font-weight: 600;
  color: var(--signal-2);
}

.cue__title { flex: 1 1 auto; min-width: 0; }

.cue__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--signal);
  flex: none;
  animation: cue-beat 1.4s ease-in-out infinite;
}

@keyframes cue-beat {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.75); }
}

.cue__time {
  font-family: var(--mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--signal);
  flex: none;
}

.cue__steps {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13.5px;
  color: var(--paper-dim);
}

.cue__steps strong { color: var(--paper); font-weight: 600; }

.cue__foot { font-size: 12.5px; color: var(--muted); }

/* The same box with nothing to enumerate: one sentence, no pulse. */
.cue--flat { display: block; font-size: 13.5px; color: var(--paper-dim); }

.cue--flat[data-tone="bad"] {
  border-color: rgba(244, 99, 94, 0.42);
  background: var(--halt-dim);
  color: var(--paper-dim);
}

/* --------------------------------------------------------------- counters */

.counters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  gap: 1px;
  background: var(--edge);
  border: 1px solid var(--edge);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.counter {
  background: var(--sunk);
  padding: 13px 15px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.counter__num {
  font-family: var(--mono);
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.counter__tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}

#c-sent     { color: var(--go); }
#c-failed   { color: var(--halt); }
#c-rejected { color: var(--signal); }

/* ------------------------------------------------------------------- rail */
/* One tick per recipient, with a cursor riding above the one being dialled.
   It is the only place on the page where the whole run is visible at once. */

.railbox { position: relative; padding-top: 40px; }

.rail__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 46px;
  border-bottom: 1px solid var(--edge);
}

.rail__track:empty { border-bottom-style: dashed; }

.rail__tick {
  flex: 1 1 0;
  min-width: 2px;
  height: 16px;
  background: var(--edge);
  border-radius: 2px 2px 0 0;
  transition: height 180ms ease, background-color 180ms ease;
}

.rail__tick[data-state="sent"]    { height: 34px; background: var(--go); }
.rail__tick[data-state="failed"]  { height: 26px; background: var(--halt); }
.rail__tick[data-state="stopped"] { height: 9px;  background: #2c3446; }

.rail__tick[data-state="current"] {
  height: 46px;
  background: var(--signal);
  animation: blip 1.4s ease-in-out infinite;
}

.rail__empty { margin-top: 12px; color: var(--muted); font-size: 13px; }

.rail__cursor {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 10px;
  border: 1px solid var(--signal-line);
  border-radius: 100px;
  background: var(--signal-dim);
  color: var(--signal);
  font-family: var(--mono);
  font-size: 11px;
  white-space: nowrap;
  transition: left 220ms ease;
}

.rail__cursor::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 1px;
  height: 9px;
  background: rgba(255, 176, 32, 0.5);
}

.rail__cursor-time { font-weight: 700; letter-spacing: -0.02em; }

/* ------------------------------------------------------- panels, the grid */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: var(--gutter);
  align-items: start;
}

.panel {
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: var(--slab);
  padding: clamp(16px, 2vw, 22px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.panel__title {
  font-size: 15px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--edge);
}

.panel__note { color: var(--muted); font-size: 12.5px; }

/* ------------------------------------------------------------- previewbox */

.previewbox {
  border: 1px solid var(--edge);
  border-radius: var(--radius-sm);
  background: var(--sunk);
  overflow: hidden;
}

.previewbox__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 13px;
  border-bottom: 1px solid var(--edge);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.previewbox__sum { color: var(--signal); letter-spacing: 0.06em; }

.previewbox__body {
  margin: 0;
  padding: 13px;
  max-height: 190px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.65;
  color: var(--paper-dim);
}

.previewbox__rows:not(:empty) {
  border-top: 1px solid var(--edge);
  max-height: 230px;
  overflow: auto;
}

.prow {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 4px 12px;
  padding: 9px 13px;
  border-top: 1px solid rgba(35, 42, 56, 0.65);
  font-size: 12.5px;
}

.previewbox__rows > .prow:first-child { border-top: 0; }

.prow__to {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--signal);
  white-space: nowrap;
}

.prow__name { color: var(--muted); min-width: 0; overflow-wrap: anywhere; }

.prow__msg {
  grid-column: 1 / -1;
  color: var(--paper-dim);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.previewbox__rows--bad .prow__to { color: var(--halt); }
.previewbox__rows--bad .prow__why { color: var(--muted); overflow-wrap: anywhere; }

/* ----------------------------------------------------- collapsed extra bits */

.more {
  border: 1px solid var(--edge);
  border-radius: var(--radius-sm);
  background: var(--sunk);
}

.more__head {
  cursor: pointer;
  padding: 11px 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 9px;
}

.more__head::-webkit-details-marker { display: none; }

.more__head::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 160ms ease;
}

.more[open] .more__head { color: var(--paper); border-bottom: 1px solid var(--edge); }
.more[open] .more__head::before { transform: rotate(90deg); }

.more__head:hover { color: var(--paper); }

.more__body {
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* --------------------------------------------------------------- activity */

.activity {
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: var(--slab);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.activity__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 18px 0;
}

.activity__head .panel__title { border: 0; padding: 0; }

.tabs { display: flex; gap: 2px; margin-bottom: -1px; }

.tab {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 8px 11px 12px;
  cursor: pointer;
}

.tab:hover { color: var(--paper); }
.tab.is-current { color: var(--signal); border-bottom-color: var(--signal); }

.activity__body {
  border-top: 1px solid var(--edge);
  background: var(--sunk);
  max-height: 460px;
  overflow-y: auto;
}

.activity__tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-bottom: 1px solid var(--edge);
  background: var(--slab);
  position: sticky;
  top: 0;
  z-index: 2;
}

.activity__stat {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* -------------------------------------------------------------- live log */

.log {
  list-style: none;
  margin: 0;
  padding: 10px 0;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.65;
}

.log:empty::after {
  content: "The run narrates itself here.";
  display: block;
  padding: 22px 18px;
  color: var(--faint);
  font-size: 12px;
}

.line {
  display: flex;
  gap: 12px;
  padding: 3px 18px;
  border-left: 2px solid transparent;
  word-break: break-word;
}

.line:hover { background: rgba(255, 255, 255, 0.022); }

.line__time {
  flex: 0 0 62px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.line__text { color: var(--paper-dim); white-space: pre-wrap; }

.line[data-tone="go"] { border-left-color: var(--go); }
.line[data-tone="go"] .line__text { color: var(--go); }
.line[data-tone="bad"] { border-left-color: var(--halt); }
.line[data-tone="bad"] .line__text { color: var(--halt); }
.line[data-tone="warn"] { border-left-color: var(--signal); }
.line[data-tone="warn"] .line__text { color: var(--signal-2); }
.line[data-tone="mute"] .line__text { color: var(--faint); }

/* ------------------------------------------------------- deliveries table */

.tablewrap { overflow-x: auto; }

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.table th {
  text-align: left;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 500;
  padding: 10px 14px;
  border-bottom: 1px solid var(--edge);
  background: var(--slab);
  position: sticky;
  top: 45px;
  white-space: nowrap;
}

.table td {
  padding: 9px 14px;
  border-bottom: 1px solid rgba(35, 42, 56, 0.6);
  color: var(--paper-dim);
  vertical-align: top;
}

.table tr:last-child td { border-bottom: 0; }
.table tr:hover td { background: rgba(255, 255, 255, 0.022); }

.table td:nth-child(1),
.table td:nth-child(2) { font-family: var(--mono); white-space: nowrap; }

.table td:nth-child(5) { color: var(--faint); font-size: 12px; }

.table__empty {
  text-align: center;
  color: var(--faint);
  padding: 30px 14px !important;
}

.res { font-family: var(--mono); font-size: 11px; color: var(--go); }
.res[data-bad="1"] { color: var(--halt); }

/* ------------------------------------------------------------------ toast */

.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%) translateY(8px);
  z-index: 50;
  max-width: min(520px, calc(100vw - 32px));
  margin: 0;
  padding: 11px 18px;
  border: 1px solid var(--edge-lit);
  border-radius: 999px;
  background: var(--slab-up);
  box-shadow: var(--lift);
  color: var(--paper);
  font-size: 13px;
  text-align: center;
  animation: toast-in 200ms ease forwards;
}

.toast[data-tone="bad"] {
  border-color: var(--halt);
  background: linear-gradient(var(--halt-dim), var(--halt-dim)), var(--slab-up);
  color: #ffd9d7;
}

.toast[data-tone="go"] {
  border-color: var(--go);
  background: linear-gradient(var(--go-dim), var(--go-dim)), var(--slab-up);
  color: #c9f7e4;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(14px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ------------------------------------------------------------ landing: hero */

.landing { display: flex; flex-direction: column; gap: 42px; }

/* The hero is its own lit stage: a rounded slab lifted off the page background
   with layered amber/green aurora and a hairline gradient border, so the front
   door reads premium the instant it loads. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 18px;
  padding: clamp(40px, 6vw, 76px) clamp(24px, 5vw, 60px) clamp(38px, 5vw, 60px);
  border-radius: 22px;
  border: 1px solid var(--edge);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(255, 176, 32, 0.10), transparent 55%),
    radial-gradient(90% 120% at 0% 100%, rgba(52, 211, 153, 0.07), transparent 60%),
    linear-gradient(180deg, var(--slab-up), var(--sunk));
  box-shadow: var(--lift), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Soft moving light behind the copy - decoration only, so aria-hidden and
   pointer-events off. It sits below the text via z-index. */
.hero__glow {
  position: absolute;
  inset: -40% -10% auto -10%;
  height: 120%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(255, 176, 32, 0.16), transparent 70%);
  filter: blur(20px);
  transform: translateZ(0);
  animation: hero-drift 14s ease-in-out infinite alternate;
}

@keyframes hero-drift {
  from { transform: translate3d(-6%, -4%, 0) scale(1); }
  to   { transform: translate3d(8%, 3%, 0) scale(1.08); }
}

/* A grid gloss on top of the aurora, faded out toward the bottom so it never
   fights the text. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(120% 90% at 70% 0%, #000, transparent 75%);
          mask-image: radial-gradient(120% 90% at 70% 0%, #000, transparent 75%);
}

.hero__inner { position: relative; max-width: 720px; }

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--signal);
  margin: 0 0 22px;
  padding: 6px 12px;
  border: 1px solid var(--signal-line);
  border-radius: 999px;
  background: var(--signal-dim);
}

.hero__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 3px rgba(255, 176, 32, 0.22);
  animation: hero-pulse 2.4s ease-in-out infinite;
}

@keyframes hero-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 3px rgba(255, 176, 32, 0.22); }
  50%      { opacity: 0.6; box-shadow: 0 0 0 5px rgba(255, 176, 32, 0.08); }
}

.hero__title {
  font-size: clamp(34px, 6vw, 62px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  margin: 0 0 20px;
  color: #fff;
}

.hero__accent {
  background: linear-gradient(100deg, var(--signal-2) 10%, var(--go) 120%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--signal-2);
}

.hero__lede {
  font-size: clamp(16px, 1.7vw, 20px);
  line-height: 1.55;
  color: var(--paper-dim);
  margin: 0 0 30px;
  max-width: 48ch;
}

.hero__lede code {
  background: var(--signal-dim);
  border-color: var(--signal-line);
  color: var(--signal-2);
}

.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.hero__cta .btn { padding: 13px 24px; font-size: 13px; }

.hero__fine {
  margin: 22px 0 0;
  font-size: 12.5px;
  color: var(--faint);
  max-width: 60ch;
  padding-left: 12px;
  border-left: 2px solid var(--edge);
}

/* ----------------------------------------------------------- landing: strip */

.strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 1px;
  background: var(--edge);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  overflow: hidden;
}

.strip__item {
  background: var(--slab);
  padding: 22px 20px 24px;
  transition: background 160ms ease;
}

.strip__item:hover { background: var(--slab-up); }

.strip__num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--signal);
  margin: 0 0 14px;
}

.strip__title {
  font-size: 16px;
  letter-spacing: -0.01em;
  margin: 0 0 9px;
  color: var(--paper);
}

.strip__text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--muted);
}

/* --------------------------------------------------- landing: honesty + close */

.honest {
  border: 1px solid var(--edge);
  border-left: 3px solid var(--signal);
  border-radius: var(--radius);
  background: var(--sunk);
  padding: 24px 26px 26px;
}

.honest__title {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--signal);
  margin: 0 0 16px;
}

.honest__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 13px;
  max-width: 82ch;
}

.honest__list li {
  position: relative;
  padding-left: 22px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--paper-dim);
}

.honest__list li::before {
  content: "\2715";
  position: absolute;
  left: 0;
  top: 1px;
  font-size: 10px;
  color: var(--halt);
}

.closer { text-align: center; padding: 18px 0 46px; }
.closer__title { font-size: clamp(22px, 3vw, 30px); margin: 0 0 12px; }
.closer__text {
  margin: 0 auto 22px;
  max-width: 54ch;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}
.closer .hero__cta { justify-content: center; }

/* ------------------------------------------------------ landing: setup guide */
/* Five steps as a tablist: compact items on the left, the whole story for the
   selected one on the right. The rail is still numbered and the panel still
   says "Step N of 5", because the order is the meaning - step 3 cannot happen
   before step 2, and a screen reader should say so. */

/* Both are jumped to from the topbar and the footer, and the topbar is sticky,
   so without this the heading lands underneath it. */
.setup, .reviews { scroll-margin-top: 78px; }

.setup { display: flex; flex-direction: column; gap: 22px; }

.setup__head { max-width: 68ch; display: flex; flex-direction: column; gap: 12px; }

.setup__eyebrow,
.reviews__eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--signal);
  margin: 0;
}

.setup__title,
.reviews__title { font-size: clamp(23px, 3.2vw, 32px); line-height: 1.14; }

.setup__lede,
.reviews__lede {
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--muted);
  max-width: 62ch;
}

/* The guide: a vertical tablist on the left, one detail panel on the right.
   Grid rather than flex because the rail must keep its width while the panel
   takes whatever is left - a long command line in step 3 would otherwise widen
   the rail and shift the steps as you click through them. */
.guide {
  display: grid;
  grid-template-columns: minmax(200px, 264px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.guide__rail { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.guide__tab {
  appearance: none;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--muted);
  border: 1px solid var(--edge);
  border-radius: var(--radius-sm);
  background: var(--slab);
  padding: 11px 14px;
  display: grid;
  gap: 2px;
  transition: border-color 160ms ease, background-color 160ms ease,
              color 160ms ease;
}

/* The amber spine marks the selected step. It is scaled to nothing rather than
   absent, so picking a tab never nudges the text sideways. */
.guide__tab::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--signal);
  transform: scaleY(0);
  transition: transform 180ms ease;
}

.guide__tab:hover {
  color: var(--paper-dim);
  border-color: var(--edge-lit);
  background: var(--slab-up);
}

.guide__tab.is-active {
  color: var(--paper);
  border-color: var(--signal-line);
  background: linear-gradient(90deg, var(--signal-dim), var(--slab-up) 64%);
}

.guide__tab.is-active::before { transform: scaleY(1); }

.guide__tab-num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
}

.guide__tab.is-active .guide__tab-num { color: var(--signal); }

.guide__tab-name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.35;
}

.guide__tab-time { font-family: var(--mono); font-size: 10px; color: var(--faint); }

.guide__stage {
  min-width: 0;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--slab-up), var(--slab));
  padding: 20px clamp(18px, 2.4vw, 26px) 22px;
  /* Holds the height steady across steps, so clicking down the rail does not
     make the page jump under the pointer. */
  min-height: 430px;
}

.guide__panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  animation: panel-in 260ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes panel-in {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}

.guide__eyebrow {
  margin: 0;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--signal);
}

.guide__title {
  font-size: clamp(18px, 2.4vw, 22px);
  letter-spacing: -0.014em;
  margin: 0;
}

.guide__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--paper-dim);
  max-width: 74ch;
}

.guide__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 2px;
}

.guide__col { display: flex; flex-direction: column; gap: 9px; min-width: 0; }

.guide__sub {
  margin: 0;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--edge);
}

.guide__wins,
.guide__how {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--paper-dim);
}

.guide__wins li,
.guide__how li { position: relative; padding-left: 21px; min-width: 0; }

.guide__wins li::before {
  content: "+";
  position: absolute;
  left: 4px;
  top: -1px;
  font-family: var(--mono);
  font-weight: 700;
  color: var(--go);
}

.guide__how { counter-reset: how; }
.guide__how li { counter-increment: how; }

.guide__how li::before {
  content: counter(how);
  position: absolute;
  left: 0;
  top: 3px;
  width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--signal);
  background: var(--signal-dim);
  border: 1px solid var(--signal-line);
}

.guide__note {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--faint);
  max-width: 74ch;
  padding-left: 12px;
  border-left: 2px solid var(--edge);
}

.guide__panel .snippet { min-width: 0; margin: 0; }

.setup__cta { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }

/* --------------------------------------------------------- landing: reviews */

.reviews { display: flex; flex-direction: column; gap: 16px; }

.reviews__head { max-width: 68ch; display: flex; flex-direction: column; gap: 10px; }

/* The marquee. Two identical passes of the six cards sit in one track; the
   track slides exactly its own half and restarts, so the seam never shows. The
   card gap is a right margin rather than `gap`, because with `gap` the halfway
   point falls mid-gutter and the loop visibly jumps by half a gutter. */
.ticker {
  --ticker-time: 62s;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: var(--sunk);
  padding: 16px 0;
  /* Cards enter and leave instead of being chopped off at the edges. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.ticker__track {
  display: flex;
  align-items: stretch;
  width: max-content;
  animation: ticker-run var(--ticker-time) linear infinite;
  will-change: transform;
}

@keyframes ticker-run {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Three ways to stop it, all the same mechanism: the animation holds on the
   frame it is on and carries on from there, so nothing snaps. */
.ticker:hover .ticker__track,
.ticker:focus-within .ticker__track,
.ticker.is-paused .ticker__track { animation-play-state: paused; }

.tkcard {
  flex: none;
  width: 328px;
  margin-right: 14px;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--slab-up), var(--slab));
  padding: 15px 17px 14px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  cursor: pointer;
  transition: border-color 170ms ease, box-shadow 220ms ease,
              transform 170ms ease, background-color 170ms ease;
}

/* The highlight. Hover and focus do it in CSS; a click latches it on through
   .is-active, set in landing.js, so a card can be held and read. */
.tkcard:hover,
.tkcard:focus-visible,
.tkcard.is-active {
  border-color: var(--signal-line);
  box-shadow: 0 0 0 1px var(--signal-line),
              0 16px 44px -24px rgba(255, 176, 32, 0.6);
  transform: translateY(-3px);
}

.tkcard.is-active { background: linear-gradient(180deg, #1c2130, var(--slab)); }

/* The tag is pinned right of the name, and takes the row above it when the two
   cannot share one - which is what a 272px card on a phone gives them. */
.tkcard__top {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  flex-wrap: wrap-reverse;
  gap: 9px 10px;
  min-width: 0;
}

.tkcard__tag {
  flex: none;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--edge-lit);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}

.tkcard:hover .tkcard__tag,
.tkcard.is-active .tkcard__tag {
  color: var(--signal-2);
  border-color: var(--signal-line);
  background: var(--signal-dim);
}

.tkcard__who {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
  margin-right: auto;
}

/* The DP: initials on a tinted disc. No avatar files to ship, nothing to
   404, and it stays legible at any size the card gives it. */
.tkcard__dp {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid var(--edge-lit);
  background: var(--sunk);
  color: var(--paper-dim);
}

.tkcard[data-tint="0"] .tkcard__dp {
  background: var(--signal-dim);
  border-color: var(--signal-line);
  color: var(--signal-2);
}

.tkcard[data-tint="1"] .tkcard__dp {
  background: var(--go-dim);
  border-color: rgba(52, 211, 153, 0.4);
  color: var(--go);
}

.tkcard__id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.tkcard__name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--paper);
  overflow-wrap: anywhere;
}

.tkcard__role {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

.tkcard__meta {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.tkcard__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--go);
  background: var(--go-dim);
  border: 1px solid rgba(52, 211, 153, 0.4);
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}

.tkcard__stars {
  font-size: 13px;
  letter-spacing: 0.16em;
  line-height: 1;
  color: var(--signal);
}

.tkcard__text {
  margin: 0;
  flex: 1 1 auto;
  font-size: 13px;
  line-height: 1.64;
  color: var(--paper-dim);
  padding-left: 12px;
  border-left: 2px solid var(--edge);
}

.tkcard:hover .tkcard__text,
.tkcard.is-active .tkcard__text { border-left-color: var(--signal-line); }

.tkcard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--edge);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--faint);
}

.tkcard__date { text-transform: uppercase; }
.tkcard__vol { text-align: right; }

.ticker__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.ticker__toggle[aria-pressed="true"] {
  color: var(--signal);
  border-color: var(--signal-line);
  background: var(--signal-dim);
}

.ticker__hint { margin: 0; font-size: 12px; color: var(--faint); }

.reviews__fine {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--faint);
  max-width: 74ch;
}

/* ------------------------------------------------- terms and policies page */

.policy {
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(20px, 3vw, 34px) clamp(16px, 4vw, 40px) 48px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.policy__head { display: flex; flex-direction: column; gap: 13px; }

.policy__eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--signal);
  margin: 0;
}

.policy__title {
  font-size: clamp(26px, 4vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.028em;
  color: #fff;
}

.policy__lede {
  font-size: 15px;
  line-height: 1.65;
  color: var(--paper-dim);
  max-width: 68ch;
}

.policy__stamp {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

/* Anchors, not a sticky sidebar: nine short links wrap into two rows and stay
   readable on a phone, where a sidebar would eat half the viewport. */
.policy__toc {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 14px 16px;
  border: 1px solid var(--edge);
  border-radius: var(--radius-sm);
  background: var(--sunk);
}

.policy__toc a {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
  text-decoration: none;
  padding: 5px 11px;
  border: 1px solid var(--edge);
  border-radius: 100px;
  white-space: nowrap;
}

.policy__toc a:hover {
  color: var(--signal);
  border-color: var(--signal-line);
  background: var(--signal-dim);
}

.policy__short {
  border: 1px solid var(--edge);
  border-left: 3px solid var(--signal);
  border-radius: var(--radius);
  background: var(--sunk);
  padding: 22px 24px 24px;
}

.policy__short-title {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--signal);
  margin: 0 0 16px;
}

.policy__short-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.policy__short-list li {
  position: relative;
  padding-left: 22px;
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--paper-dim);
}

.policy__short-list li::before {
  content: "\2192";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--signal);
}

.policy__body { display: flex; flex-direction: column; gap: 22px; }

.clause {
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--slab-up), var(--slab));
  padding: 22px clamp(18px, 2.6vw, 26px) 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* Anchor links from the table of contents land under the sticky topbar
     otherwise. */
  scroll-margin-top: 78px;
}

.clause__title {
  font-size: 19px;
  letter-spacing: -0.015em;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--edge);
}

.clause__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.68;
  color: var(--paper-dim);
  max-width: 78ch;
}

.clause__warn {
  margin: 0;
  border: 1px solid rgba(244, 99, 94, 0.42);
  border-left: 3px solid var(--halt);
  border-radius: var(--radius-sm);
  background: var(--halt-dim);
  color: #ffd9d7;
  font-size: 13.5px;
  line-height: 1.62;
  padding: 13px 16px;
}

.clause__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 13px;
}

.clause__list li {
  position: relative;
  padding-left: 20px;
  font-size: 13.5px;
  line-height: 1.66;
  color: var(--paper-dim);
  max-width: 82ch;
}

.clause__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--signal);
  opacity: 0.7;
}

.clause__list strong { color: var(--paper); font-weight: 600; }
.clause__list em { color: var(--signal-2); font-style: normal; }

.policy__close {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 78ch;
  padding-left: 13px;
  border-left: 2px solid var(--edge);
}

.policy__back { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 11px; }

/* ----------------------------------------------------------------- footer */

.sitefoot {
  border-top: 1px solid var(--edge);
  background: var(--sunk);
  margin-top: 54px;
  padding: 24px var(--gutter) 34px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  text-align: center;
}

.sitefoot__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  justify-content: center;
}

.sitefoot__nav a {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
}

.sitefoot__nav a:hover { color: var(--signal); background: rgba(255, 255, 255, 0.04); }

/* The contact card: two labelled pairs, side by side on a wide screen and
   stacked on a narrow one. A hairline slab rather than loose text, so the two
   facts read as information rather than as more small print. */
.sitefoot__card {
  margin: 2px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 34px;
  padding: 14px 22px;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.015);
}

.sitefoot__pair {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
  min-width: 0;
}

.sitefoot__key {
  margin: 0;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

.sitefoot__val {
  margin: 0;
  font-size: 13.5px;
  font-weight: 560;
  color: var(--paper);
  overflow-wrap: anywhere;
}

.sitefoot__val a {
  color: var(--signal);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.sitefoot__val a:hover,
.sitefoot__val a:focus-visible { border-bottom-color: currentColor; }

.sitefoot__legal {
  margin: 0;
  max-width: 78ch;
  font-size: 12px;
  line-height: 1.65;
  color: var(--faint);
}

.sitefoot__legal a { color: var(--muted); }
.sitefoot__legal a:hover { color: var(--signal); }

.sitefoot__meta {
  margin: 0;
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ------------------------------------------------------------- entrance */

.stage, .panel, .card, .activity, .strip, .honest,
.guide, .ticker, .policy__short, .clause {
  animation: rise 340ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.grid .panel:nth-child(2) { animation-delay: 60ms; }
.grid .panel:nth-child(3) { animation-delay: 120ms; }
.activity { animation-delay: 150ms; }

@keyframes rise {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 1080px) {
  .grid { grid-template-columns: 1fr; }
  .stage__title { font-size: clamp(24px, 6vw, 34px); }
}

/* The rail cannot stay a column once the panel has no room beside it: below
   this it becomes a horizontal strip of steps above the panel. */
@media (max-width: 900px) {
  .guide { grid-template-columns: minmax(0, 1fr); }

  .guide__rail {
    flex-direction: row;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }

  .guide__tab { flex: 0 0 auto; min-width: 154px; }
  .guide__stage { min-height: 0; }
}

@media (max-width: 760px) {
  :root { --gutter: 15px; }

  .topbar { flex-wrap: wrap; gap: 10px; padding: 12px var(--gutter); }
  .nav { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .nav__who { display: none; }

  .stage { padding: 20px 16px 22px; }
  .stage__actions { flex-direction: column; align-items: stretch; }
  .stage__actions .btn { width: 100%; justify-content: center; }

  .counters { grid-template-columns: repeat(2, 1fr); }
  .row--split { grid-template-columns: 1fr; }
  .row { flex-direction: column; align-items: stretch; }
  .row .btn { width: 100%; justify-content: center; }

  .panel, .card { padding: 18px 15px; }
  .secret { flex-direction: column; align-items: stretch; }
  .kv__row { grid-template-columns: 1fr; gap: 2px; }
  .kv dd { text-align: left; }

  .activity__body { max-height: 340px; }
  .line { padding-inline: 13px; }
  .line__time { flex-basis: 54px; }
  .table th { top: 0; position: static; }

  .hero { padding: 30px 18px 28px; margin-top: 8px; }
  .hero__cta .btn { width: 100%; justify-content: center; }

  .clause { padding: 18px 15px 20px; }
  .guide__stage { padding: 18px 15px 20px; }
  .setup__cta .btn, .policy__back .btn { width: 100%; justify-content: center; }
  .guide__cols { gap: 14px; }
  .ticker { padding: 13px 0; }
  .tkcard { width: 272px; padding: 14px 15px 13px; }
  /* No room for name and tag side by side: the tag takes its own top row. */
  .tkcard__top { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
  .tkcard__tag { order: -1; align-self: flex-end; }
  .ticker__toggle { width: 100%; justify-content: center; }
  .policy__short { padding: 18px 16px 20px; }
  .policy__toc { padding: 11px 12px; }
  .sitefoot { padding-inline: var(--gutter); }
}

/* ----------------------------------------------------------- calmer motion */

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

  /* A marquee is the one thing here that cannot be fixed by shortening it, so
     it stops being a marquee: the strip becomes an ordinary swipeable rail and
     the duplicate pass - decoration for the loop - goes away. Must come after
     the blanket rule above to beat its !important. */
  .ticker {
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-mask-image: none;
            mask-image: none;
    padding-inline: 12px;
  }

  .ticker__track { animation: none !important; width: auto; }
  .tkcard { scroll-snap-align: start; }
  .tkcard[data-clone="1"] { display: none; }
  .ticker__bar { display: none; }
}

@media print {
  .topbar, .nav, .stage__actions, .tabs, .activity__tools, .toast, .sitefoot { display: none !important; }
  body { background: #fff; color: #000; }
}