/* ============================================================================
   AdWeft — ink-wash design system
   ----------------------------------------------------------------------------
   Sumi-e discipline: one paper, one ink diluted across a range, one vermilion
   seal used the way a chop is used on a scroll — rarely, and only where it
   means something. Everything else is space.

   The ink ramp doubles as the data ramp. A single-hue light→dark scale is
   exactly what a sequential encoding wants, so score meters and match bars need
   no second palette and never compete with the seal.
   ========================================================================== */

:root {
  /* paper */
  --paper:      #FBFAF5;
  --paper-2:    #F6F3EC;
  --paper-3:    #EFEAE0;
  --paper-sunk: #E8E1D4;

  /* ink, diluted */
  --ink-900: #241C18;
  --ink-800: #33261F;
  --ink-700: #4A3128;
  --ink-600: #5B3A32;   /* body ink */
  --ink-500: #7A5A4E;
  --ink-400: #99806F;
  --ink-300: #B8A392;
  --ink-200: #D6C9B8;
  --ink-100: #E8DFD2;
  --ink-050: #F2ECE1;

  /* seal — the only saturated colour on the page */
  --seal:      #B23A2E;
  --seal-soft: #D4695A;
  --seal-wash: rgba(178, 58, 46, 0.08);

  /* jade — the seal's traditional companion, for affirmative states only */
  --jade:      #4E7A63;
  --jade-wash: rgba(78, 122, 99, 0.10);

  --rule:      rgba(91, 58, 50, 0.14);
  --rule-soft: rgba(91, 58, 50, 0.08);
  --shadow-sm: 0 1px 2px rgba(36, 28, 24, 0.04);
  --shadow-md: 0 2px 10px rgba(36, 28, 24, 0.06), 0 1px 2px rgba(36, 28, 24, 0.04);
  --shadow-lg: 0 18px 50px -18px rgba(36, 28, 24, 0.28), 0 2px 8px rgba(36, 28, 24, 0.05);

  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono:  ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;

  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  --wrap: 1180px;

  /* The pinned bar's row, named once and shared with the homepage's copy of the
     same bar. Naming it keeps the height and everything measured from it from
     drifting apart when the bar shortens on small screens. */
  --bar: 78px;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
}

/* ---------------------------------------------------------------- reset */

*, *::before, *::after { box-sizing: border-box; }
/* Author `display` rules silently beat the UA stylesheet's [hidden] — several
   elements here set display:block, so make the attribute win outright. */
[hidden] { display: none !important; }
/* scroll-padding, not scroll-margin: set once on the scroll container it covers
   every way of arriving somewhere under the pinned bar — a keyboard focus
   walking into a control, a find-in-page match, an anchor. Same figure as the
   homepage: the bar's row, its hairline, and 20px of paper. */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bar) + 21px); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-600);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.62;
  font-weight: 400;
  letter-spacing: -0.008em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
button { background: none; border: none; padding: 0; cursor: pointer; }
a { color: inherit; }

/* Paper grain — a whisper of tooth so flat colour doesn't read as plastic. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- type */

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 300;
  color: var(--ink-800);
  letter-spacing: -0.022em;
  margin: 0;
  line-height: 1.14;
}
h1 { font-size: clamp(2.6rem, 5.4vw, 4.15rem); }
h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); }
h3 { font-size: 1.32rem; line-height: 1.28; }
h4 { font-size: 1.06rem; line-height: 1.35; }

.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.lede { font-size: 1.075rem; line-height: 1.66; color: var(--ink-500); max-width: 58ch; }
.muted { color: var(--ink-400); }
.small { font-size: 13px; line-height: 1.55; }
.tiny  { font-size: 11.5px; line-height: 1.5; letter-spacing: 0.01em; }
.num   { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

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

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 32px; position: relative; z-index: 1; }

/* ---------------------------------------------------------------- chrome */

/* The bar is the homepage's, ported whole: /beta is a room in the same house,
   so the menu does not change when the reader walks into it. Sticky rather than
   fixed, so it keeps its place in the flow and the page never jumps by the
   bar's own height on load. Paper is painted under it — without that the words
   it sits over read straight through — and the hairline is the only edge it
   needs. The z-index clears everything the app draws, including the seal-red
   generating mark and the video cards. */
.topbar {
  position: sticky; top: 0; z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--rule-soft);
}
/* app.js still toggles this past 8px of scroll. The bar carries its hairline at
   rest now, so the class lands on a rule that is already true — kept so the two
   files do not have to move together over a decoration. */
.topbar.scrolled { border-bottom-color: var(--rule-soft); }
.topbar-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: var(--bar);
}

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
/* The mark is line art: one ink from the ramp, nothing filled. */
.mark {
  display: block; width: 26px; height: 22px; flex: none;
  fill: none; stroke: var(--ink-800); stroke-linecap: round; stroke-linejoin: round;
}
.wordmark {
  font-size: 13.5px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--ink-400); font-weight: 500;
}
.wordmark b { color: var(--ink-600); font-weight: 600; }

/* The bar's right-hand side. Two quiet ways back into the story, then the
   advertisers door — deliberately the quietest item: a lighter ink, a point and
   a half smaller, and an underline only when it is pointed at. Both names are
   kept because the homepage calls this row .mainnav and the advertisers page
   calls it .topnav; they are one rule. */
.mainnav, .topnav { display: flex; align-items: center; gap: 22px; margin-left: auto; min-width: 0; }
.navlink {
  font-size: 15.5px; color: var(--ink-600); text-decoration: none; white-space: nowrap;
  transition: color .16s ease;
}
.navlink:hover {
  color: var(--ink-800);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px;
}
.advlink {
  font-size: 14px; color: var(--ink-400); text-decoration: none; white-space: nowrap;
  transition: color .16s ease;
}
.advlink:hover {
  color: var(--ink-800);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px;
}

/* The row the step rail moved into, directly under the bar and separated by the
   same hairline the bar ends with. It scrolls away with the page on purpose:
   the creator asked for the menu to be the fixed thing, and a second pinned
   strip would eat a phone's screen twice over. Centred, because the rail is a
   sequence and a sequence reads from the middle of the paper. */
.railbar { background: var(--paper); border-bottom: 1px solid var(--rule-soft); }
.railbar .wrap { display: flex; justify-content: center; min-height: 54px; align-items: center; }

/* Step rail — where the creator is in the flow. */
.rail { display: flex; align-items: center; gap: 0; }
.rail-step {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; color: var(--ink-300);
  transition: color .35s var(--ease-soft);
  white-space: nowrap;
}
.rail-step .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-200);
  transition: background .35s var(--ease-soft), transform .35s var(--ease);
}
.rail-step.done { color: var(--ink-400); }
.rail-step.done .dot { background: var(--ink-300); }
.rail-step.active { color: var(--ink-700); }
.rail-step.active .dot { background: var(--seal); transform: scale(1.5); }
/* A step you can go back to. Deliberately no new colour or weight — the only
   change is the affordance, so the rail looks exactly as it did. */
.rail-step.nav { cursor: pointer; }
.rail-step.nav:hover { color: var(--ink-700); }
.rail-step.nav:hover .dot { background: var(--ink-400); }
.rail-step.nav:focus-visible {
  outline: 1.5px solid var(--seal); outline-offset: 4px; border-radius: 3px;
}
.rail-sep { width: 26px; height: 1px; background: var(--rule); margin: 0 12px; }
/* Below this the rail drops its labels and runs as dots. `:not(.dot)` is the
   whole of the fix for a rail that used to disappear entirely under 880px: the
   dot is a span too, so `.rail-step span` hid the sequence *and* the seal-red
   marker saying where the creator was. The rail owns a full row of its own now
   rather than half the bar, so the named steps hold on much further down. */
@media (max-width: 640px) {
  .rail-step span:not(.dot) { display: none; }
  .rail-sep { width: 14px; margin: 0 7px; }
}
/* Tablet: the bar tightens its side padding, and the gap between the links
   gives way first. */
@media (max-width: 720px) {
  .topbar .wrap, .railbar .wrap { padding: 0 20px; }
  .mainnav, .topnav { gap: clamp(10px, 2vw, 22px); }
  .navlink { font-size: 14.5px; }
  .advlink { font-size: 13.5px; }
}
/* Phone: the bar keeps only the two things it cannot do without — the mark and
   the way home it carries — and, carrying less, takes a little less of a short
   screen's height. Exactly what the homepage's bar does at this width, so the
   two still match. The rail's rules pull in so the sequence keeps its shape. */
@media (max-width: 560px) {
  :root { --bar: 68px; }
  .mainnav, .topnav, .advlink { display: none; }
  .brand { gap: 9px; }
  .railbar .wrap { min-height: 48px; }
  .rail-sep { width: 7px; margin: 0 4px; }
}
@media (max-width: 420px) {
  :root { --bar: 62px; }
  .wordmark { font-size: 12.5px; letter-spacing: .2em; }
}

/* ---------------------------------------------------------------- stages */

.stage { display: none; }
.stage.on { display: block; animation: stage-in .62s var(--ease) both; }
@keyframes stage-in {
  from { opacity: 0; transform: translateY(14px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

/* Ink bleed — content arrives the way ink meets paper. */
.bleed { animation: bleed .8s var(--ease) both; animation-delay: var(--d, 0ms); }
@keyframes bleed {
  from { opacity: 0; transform: translateY(10px) scale(0.994); filter: blur(7px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .stage.on, .bleed { animation: none; }
  * { transition-duration: 0.01ms !important; }
}

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 46px; padding: 0 24px;
  border-radius: 999px;
  font-size: 14.5px; font-weight: 500; letter-spacing: -0.005em;
  transition: transform .22s var(--ease), background .22s, color .22s, box-shadow .22s, border-color .22s;
  white-space: nowrap; text-decoration: none;
}
.btn:active { transform: translateY(1px) scale(0.995); }
.btn-primary { background: var(--ink-800); color: var(--paper); box-shadow: var(--shadow-md); }
.btn-primary:hover { background: var(--ink-900); box-shadow: var(--shadow-lg); }
.btn-primary[disabled] { background: var(--ink-200); color: var(--paper); box-shadow: none; cursor: not-allowed; }
.btn-seal { background: var(--seal); color: #fff; box-shadow: 0 8px 24px -10px rgba(178,58,46,.6); }
.btn-seal:hover { background: #9E3227; }
.btn-ghost { border: 1px solid var(--rule); color: var(--ink-600); }
.btn-ghost:hover { border-color: var(--ink-300); background: var(--paper-2); }
.btn-quiet { color: var(--ink-500); height: 38px; padding: 0 6px; }
.btn-quiet:hover { color: var(--ink-800); }
.btn-lg { height: 54px; padding: 0 30px; font-size: 15.5px; }

.link-ink {
  color: var(--ink-800); text-decoration: none;
  background-image: linear-gradient(var(--seal), var(--seal));
  background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 100%;
  padding-bottom: 2px; transition: background-size .3s var(--ease);
}
.link-ink:hover { background-size: 100% 2px; }

/* ---------------------------------------------------------------- surfaces */

.card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.card-sunk { background: var(--paper-2); border-color: var(--rule-soft); }
.pad { padding: 26px 28px; }
.pad-lg { padding: 34px 36px; }
.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 11px; border-radius: 999px;
  border: 1px solid var(--rule); background: var(--paper);
  font-size: 11.5px; color: var(--ink-500); white-space: nowrap;
}

/* ---------------------------------------------------------------- stage 1: upload */

.hero { padding: clamp(48px, 9vh, 104px) 0 84px; text-align: center; }
.hero h1 { max-width: 15ch; margin: 30px auto 0; }
.hero .lede { margin: 24px auto 0; text-align: center; max-width: 50ch; text-wrap: pretty; }

.brand-mark { display: block; margin: 0 auto; }
/* The hero loom. One ink, from the same ramp as the header's mark, with the warp
   threads a shade lighter so the frame and the two wefts read first — at 132px
   the three weights the small mark packs into a stamp have room to separate.
   The ink is set on the group, not the svg, so the wash behind it stays a wash
   and does not pick up an outline. */
.hero-mk > g { stroke: var(--ink-800); }
.hero-mk .warp { stroke: var(--ink-400); }

.drop {
  margin: 46px auto 0; max-width: 640px;
  border: 1px dashed var(--ink-200);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(246,243,236,.5));
  padding: 46px 34px;
  transition: border-color .3s var(--ease-soft), background .3s, transform .3s var(--ease);
  cursor: pointer;
}
.drop:hover { border-color: var(--ink-300); transform: translateY(-2px); }
.drop.hot {
  border-color: var(--seal); border-style: solid;
  background: linear-gradient(180deg, rgba(255,255,255,.7), var(--seal-wash));
  transform: scale(1.012);
}
.drop-title { font-family: var(--serif); font-size: 1.22rem; color: var(--ink-700); margin-top: 14px; }
.drop-sub { font-size: 13px; color: var(--ink-400); margin-top: 6px; }

.hero-facts {
  display: flex; justify-content: center; gap: 46px; flex-wrap: wrap;
  margin-top: 62px; padding-top: 34px; border-top: 1px solid var(--rule-soft);
}
.fact { text-align: center; }
.fact .v { font-family: var(--serif); font-size: 2rem; font-weight: 300; color: var(--ink-800); line-height: 1; }
.fact .l { font-size: 11.5px; color: var(--ink-400); margin-top: 8px; letter-spacing: .02em; }

/* ---------------------------------------------------------------- stage 2: configure */

.split { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 52px; align-items: start; }
@media (max-width: 940px) { .split { grid-template-columns: 1fr; gap: 34px; } }

.film {
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--ink-900);
  box-shadow: var(--shadow-lg);
  position: relative;
}
.film video, .film img { width: 100%; display: block; }
.film-meta {
  display: flex; gap: 18px; flex-wrap: wrap;
  margin-top: 14px; font-size: 12.5px; color: var(--ink-400);
}

.field { margin-top: 26px; }
.field-label {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 10px;
}
.field-label .t { font-size: 13px; font-weight: 500; color: var(--ink-700); }
.field-label .h { font-size: 12px; color: var(--ink-400); }

.input-ink {
  width: 100%; height: 50px; padding: 0 16px;
  border: 1px solid var(--rule); border-radius: var(--r-md);
  background: var(--paper);
  font-size: 16px; font-variant-numeric: tabular-nums;
  transition: border-color .2s, box-shadow .2s;
}
.input-ink:focus { outline: none; border-color: var(--ink-400); box-shadow: 0 0 0 3px rgba(91,58,50,.07); }

.seg { display: flex; gap: 6px; padding: 4px; background: var(--paper-3); border-radius: 999px; }
.seg button {
  flex: 1; height: 34px; border-radius: 999px; font-size: 13px; color: var(--ink-500);
  transition: background .22s var(--ease-soft), color .22s, box-shadow .22s;
}
.seg button[aria-pressed="true"] { background: var(--paper); color: var(--ink-800); box-shadow: var(--shadow-sm); font-weight: 500; }

/* density picker */
.density { display: grid; gap: 10px; }
.dens {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px;
  padding: 16px 18px; border: 1px solid var(--rule); border-radius: var(--r-md);
  background: var(--paper); text-align: left; width: 100%;
  transition: border-color .24s var(--ease-soft), background .24s, box-shadow .24s, transform .24s var(--ease);
}
.dens:hover { border-color: var(--ink-300); transform: translateX(2px); }
.dens[aria-pressed="true"] { border-color: var(--ink-700); background: var(--paper-2); box-shadow: var(--shadow-md); }
.dens-glyph { display: flex; gap: 3px; align-items: center; }
.dens-glyph i {
  width: 7px; height: 20px; border-radius: 2px; background: var(--ink-200);
  transition: background .24s var(--ease-soft);
}
.dens[aria-pressed="true"] .dens-glyph i.on { background: var(--seal); }
.dens-glyph i.on { background: var(--ink-400); }
.dens-t { display: block; font-size: 14px; font-weight: 500; color: var(--ink-800); }
.dens-pct {
  font-size: 10.5px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-400); margin-left: 7px; white-space: nowrap;
}
.film img { width: 100%; display: block; }
.dens-d { display: block; font-size: 12.5px; color: var(--ink-400); margin-top: 3px; line-height: 1.45; }
.dens-v { display: block; text-align: right; font-family: var(--serif); font-size: 1.16rem; color: var(--ink-700); font-variant-numeric: tabular-nums; line-height: 1.1; }
.dens-vl {
  display: block; font-family: var(--sans); font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-400); margin-top: 3px;
}

/* mode picker — three cards rather than three words. "Seamless" and "Active"
   mean nothing until you are told what each one puts in your hands at the end,
   so each card carries the sentence and the deliverable. Picker semantics are
   unchanged: still one <button> per mode, still data-m, still aria-pressed. */
.modes { display: grid; gap: 10px; }
.mode-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start; gap: 14px;
  width: 100%; text-align: left;
  padding: 15px 16px;
  border: 1px solid var(--rule); border-radius: var(--r-md);
  background: var(--paper);
  transition: border-color .24s var(--ease-soft), background .24s,
              box-shadow .24s, transform .24s var(--ease);
}
.mode-card:hover { border-color: var(--ink-300); transform: translateX(2px); }
.mode-card[aria-pressed="true"] {
  border-color: var(--ink-700); background: var(--paper-2); box-shadow: var(--shadow-md);
}
/* The glyphs are drawn, not iconography: an ink line thin enough to sit in the
   same weight as the type around it, and it deepens with selection. */
.mode-glyph { display: block; color: var(--ink-300); margin-top: 2px; transition: color .24s var(--ease-soft); }
.mode-card[aria-pressed="true"] .mode-glyph { color: var(--ink-700); }

/* A <button> may only hold phrasing content, so every part of the card is a
   span — and a span is inline until told otherwise. */
.mode-body { display: block; min-width: 0; }
.mode-name { display: block; font-family: var(--serif); font-size: 1.14rem; color: var(--ink-900); line-height: 1.2; }
.mode-what { display: block; font-size: 12.5px; line-height: 1.5; color: var(--ink-500); margin-top: 5px; text-wrap: pretty; }
.mode-get  { display: block; font-size: 12px;   line-height: 1.45; color: var(--ink-400); margin-top: 7px; }
.mode-get b { color: var(--ink-600); font-weight: 500; }

.mode-tick {
  display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%; margin-top: 3px;
  border: 1px solid var(--ink-200); background: var(--paper);
  color: transparent;
  transition: background .24s, border-color .24s, color .24s;
}
.mode-card[aria-pressed="true"] .mode-tick { background: var(--seal); border-color: var(--seal); color: #fff; }

/* What the choice changes on the rest of this screen — not a repeat of the card. */
.mode-help { font-size: 12.5px; line-height: 1.5; color: var(--ink-400); margin: 12px 2px 0; }

/* Where the earnings preview used to sit: rates, not amounts. */
.terms-note {
  margin-top: 26px; padding: 20px 22px;
  border-radius: var(--r-md);
  background: linear-gradient(170deg, var(--paper-2), var(--paper-3));
  border: 1px solid var(--rule-soft);
}
.terms-programs { margin-top: 12px; display: grid; gap: 8px; }
.prog-line { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-600); }
.prog-line i { width: 9px; height: 9px; border-radius: 2px; flex: none; display: block; }

/* The caveat that must travel with every commission figure. Quiet, but never
   small enough to be missed — it is the honest half of the sentence. */
.caveat {
  margin: 14px 0 0; padding-left: 11px;
  border-left: 2px solid var(--seal);
  font-size: 12.5px; line-height: 1.5; color: var(--ink-500);
}

/* ---------------------------------------------------------------- stage 3: generating */

.gen { min-height: 74vh; display: grid; place-items: center; text-align: center; padding: 60px 0; }
.gen-inner { width: 100%; max-width: 660px; }

.gen-log {
  margin-top: 44px; text-align: left;
  border-top: 1px solid var(--rule-soft);
  max-height: 268px; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 26px, #000 78%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 26px, #000 78%, transparent);
}
.log-line {
  display: grid; grid-template-columns: 15px 1fr auto; gap: 13px; align-items: baseline;
  padding: 9px 2px; font-size: 13px; color: var(--ink-500);
  border-bottom: 1px solid var(--rule-soft);
  animation: bleed .5s var(--ease) both;
}
.log-line .tick { color: var(--jade); font-size: 12px; }
.log-line .val { font-family: var(--mono); font-size: 11.5px; color: var(--ink-400); font-variant-numeric: tabular-nums; }
.log-line.pending { color: var(--ink-300); }
.log-line.pending .tick { color: var(--ink-200); }

.gen-bar { height: 2px; background: var(--ink-100); border-radius: 2px; overflow: hidden; margin-top: 34px; }
.gen-bar i { display: block; height: 100%; width: 0; background: var(--seal); transition: width .5s var(--ease); }

/* ---------------------------------------------------------------- stage 4: choose */

.variants { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 38px; }
@media (max-width: 900px) { .variants { grid-template-columns: 1fr; } }

.vcard {
  border: 1px solid var(--rule); border-radius: var(--r-lg);
  background: var(--paper); overflow: hidden; text-align: left; width: 100%;
  transition: border-color .3s var(--ease-soft), box-shadow .35s var(--ease), transform .35s var(--ease);
  position: relative;
}
.vcard:hover { border-color: var(--ink-300); box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.vcard[aria-pressed="true"] { border-color: var(--ink-800); box-shadow: var(--shadow-lg); }
.vcard[aria-pressed="true"]::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--r-lg);
  border: 1px solid var(--ink-800); pointer-events: none;
}
/* The card is a <button>, so every part is a <span>. Spans are inline by default,
   which silently kills aspect-ratio and vertical margins — declare display on each. */
.vcard-film { display: block; position: relative; aspect-ratio: 16/9; background: var(--ink-900); overflow: hidden; }
.vcard-film img, .vcard-film video { width: 100%; height: 100%; object-fit: cover; }
.vcard-film video { position: absolute; inset: 0; opacity: 0; transition: opacity .45s var(--ease-soft); }
.vcard:hover .vcard-film video { opacity: 1; }
.vcard-badge {
  position: absolute; left: 12px; top: 12px; z-index: 2;
  height: 25px; padding: 0 11px; border-radius: 999px;
  background: rgba(251,250,245,.93); backdrop-filter: blur(8px);
  font-size: 11px; font-weight: 500; color: var(--ink-600);
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap; letter-spacing: .01em;
}
.vcard-pick {
  position: absolute; right: 12px; top: 12px; z-index: 2;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid rgba(251,250,245,.6); background: rgba(36,28,24,.34);
  backdrop-filter: blur(8px);
  display: grid; place-items: center; color: transparent;
  transition: background .25s, color .25s, border-color .25s;
}
.vcard[aria-pressed="true"] .vcard-pick { background: var(--seal); border-color: var(--seal); color: #fff; }
.vcard-body { display: block; padding: 20px 22px 22px; }
.vcard-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.vcard-angle { display: block; font-family: var(--serif); font-size: 1.24rem; color: var(--ink-900); line-height: 1.2; }
.vcard-count {
  display: block; font-size: 11.5px; color: var(--ink-400);
  letter-spacing: .02em; white-space: nowrap; padding-top: 5px;
}
.vcard-note { display: block; font-size: 13px; color: var(--ink-400); margin-top: 9px; line-height: 1.55; }
.brandrow { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 15px; }
.bmark { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-600); }
.bmark i { width: 13px; height: 13px; border-radius: 3px; display: block; }
.bmark-where { color: var(--ink-400); font-size: 11.5px; }

/* score meter — sequential, single hue, per the ink ramp */
.meter { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; margin-top: 5px; }
.meter-track { display: block; height: 4px; background: var(--ink-100); border-radius: 3px; overflow: hidden; }
.meter-fill { display: block; height: 100%; background: var(--ink-600); border-radius: 0 3px 3px 0; transition: width .9s var(--ease); }
.meter-val { font-size: 11.5px; color: var(--ink-400); font-variant-numeric: tabular-nums; min-width: 30px; text-align: right; }
.meter-lab { font-size: 12px; color: var(--ink-500); }

/* ---------------------------------------------------------------- stage 5: deal */

.deal-grid { display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr); gap: 44px; align-items: start; }
@media (max-width: 1000px) { .deal-grid { grid-template-columns: 1fr; gap: 32px; } }

/* Two products come out of this machine and they are not alike: one is a file,
   the other is a page of words. Unlabelled, stacked down one column, they read
   as one undifferentiated pile of output. Each gets a header that names the mode
   it came from and one line saying what it is for. */
/* The rule sits on top of every section and is lifted off whichever one is
   showing first. `.outsec + .outsec` cannot do this: a sibling combinator still
   counts a display:none section, so a hidden Seamless block would leave its
   divider hanging above the page. The first *visible* section is a JS fact. */
.outsec { margin-top: 42px; padding-top: 36px; border-top: 1px solid var(--rule); }
.outsec-first { margin-top: 0; padding-top: 0; border-top: 0; }
.outsec-hd { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 20px; }
.outsec-glyph { flex: none; color: var(--ink-300); margin-top: 3px; }
.outsec-h {
  font-family: var(--serif); font-size: 1.36rem; font-weight: 300;
  color: var(--ink-500); letter-spacing: -0.018em; line-height: 1.25; margin: 0;
}
/* The mode name carries the weight; the rest of the line explains it. */
.outsec-mode { color: var(--ink-900); }
.outsec-sub { margin: 8px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-400); max-width: 64ch; text-wrap: pretty; }

.compare { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--ink-900); box-shadow: var(--shadow-lg); }
.compare video { width: 100%; display: block; }

/* The one control on the page that can make a noise. Autoplay is only permitted
   while muted, so muted is where it starts and a click — a user gesture, which
   is the permission autoplay was missing — turns it up. */
.sound-btn {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  height: 30px; padding: 0 13px; border-radius: 999px;
  background: rgba(251, 250, 245, .92); backdrop-filter: blur(8px);
  border: 1px solid rgba(36, 28, 24, .08);
  font-size: 12px; font-weight: 500; letter-spacing: .01em; color: var(--ink-600);
  transition: background .22s, color .22s, border-color .22s, transform .22s var(--ease);
}
.sound-btn:hover { background: #fff; transform: translateY(-1px); }
.sound-btn[aria-pressed="true"] { background: var(--seal); border-color: var(--seal); color: #fff; }
.sound-ico { display: block; }
.sound-btn .ico-on { display: none; }
.sound-btn[aria-pressed="true"] .ico-off { display: none; }
.sound-btn[aria-pressed="true"] .ico-on  { display: block; }
.compare-tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--paper-3); border-radius: 999px; margin-bottom: 14px; }
.compare-tabs button { height: 32px; padding: 0 15px; border-radius: 999px; font-size: 12.5px; color: var(--ink-500); transition: background .2s, color .2s; }
.compare-tabs button[aria-pressed="true"] { background: var(--paper); color: var(--ink-800); box-shadow: var(--shadow-sm); font-weight: 500; }

/* The commission ledger. No total row: a total would be a projected sum, and this
   console does not have one to show. */
.ledger-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule-soft); }
.ledger-row:last-child { border-bottom: 0; }
.ledger-row .k { font-size: 13px; color: var(--ink-500); }
.ledger-row .v { font-size: 14px; color: var(--ink-800); font-variant-numeric: tabular-nums; }

.placement { padding: 18px 0; border-bottom: 1px solid var(--rule-soft); }
.placement:last-child { border-bottom: 0; }
.placement-head { display: flex; align-items: center; gap: 11px; }
.placement-head i { width: 15px; height: 15px; border-radius: 4px; display: block; flex: none; }
.placement-name { font-size: 14.5px; font-weight: 500; color: var(--ink-800); }
.placement-where { font-size: 12.5px; color: var(--ink-400); }
.reasons { margin: 12px 0 0; padding: 0; list-style: none; }
.reasons li {
  position: relative; padding-left: 18px; margin: 7px 0;
  font-size: 13px; color: var(--ink-500); line-height: 1.55;
}
.reasons li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--ink-200);
}

.ledger-row .k .dot-ink {
  display: inline-block; width: 9px; height: 9px; border-radius: 2px;
  margin-right: 8px; vertical-align: baseline;
}

/* The tool fee, stated once and quietly. It is a price list, not an offer. */
.price-note {
  margin: 16px 0 0; text-align: center;
  font-size: 11.5px; letter-spacing: .02em; color: var(--ink-400);
}

/* ------------------------------------------------- description pack */
/* Raw text with [LINK-n] placeholders left visible: the creator has to edit it,
   so pretending it is finished would be a lie about what they still owe it. */

.pack-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.pack-head .btn-ghost { height: 36px; padding: 0 16px; font-size: 13px; flex: none; }

.pack-ta {
  display: block; width: 100%; margin-top: 16px; min-height: 260px; resize: vertical;
  padding: 16px 18px;
  border: 1px solid var(--rule); border-radius: var(--r-md);
  background: var(--paper-2); color: var(--ink-700);
  font-family: var(--mono); font-size: 12.5px; line-height: 1.72;
  white-space: pre-wrap;
}
.pack-ta:focus { outline: none; border-color: var(--ink-400); box-shadow: 0 0 0 3px rgba(91,58,50,.07); }

.pack-slots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.slot {
  display: inline-flex; align-items: center; gap: 8px;
  height: 27px; padding: 0 11px; border-radius: 999px;
  border: 1px solid var(--rule); background: var(--paper);
  font-size: 12px; color: var(--ink-600); white-space: nowrap;
}
.slot code { font-family: var(--mono); font-size: 11px; color: var(--seal); }
.slot-alt { color: var(--ink-400); font-size: 11.5px; }

.pack-disc { margin-top: 16px; display: grid; gap: 8px; }
.disc {
  font-size: 12.5px; line-height: 1.55; color: var(--jade);
  background: var(--jade-wash); padding: 9px 12px; border-radius: 6px;
}
.disc-k {
  display: inline-block; margin-right: 9px;
  font-family: var(--sans); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; opacity: .75;
}
.pack-flag {
  margin: 12px 0 0; padding: 9px 12px; border-radius: 6px;
  background: var(--seal-wash); color: var(--seal);
  font-size: 12.5px; line-height: 1.5;
}

/* ------------------------------------------------- programme checklist */

.prog { padding: 18px 0; border-bottom: 1px solid var(--rule-soft); }
.prog:last-of-type { border-bottom: 0; }
.prog-head { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.prog-head i { width: 15px; height: 15px; border-radius: 4px; display: block; flex: none; }
.prog-name { font-size: 14.5px; font-weight: 500; color: var(--ink-800); }
.prog-type { font-size: 12.5px; color: var(--ink-400); }

.prog-facts {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  margin-top: 9px; font-size: 12.5px; color: var(--ink-500);
}
.prog-rate {
  font-family: var(--serif); font-size: 1.06rem; color: var(--ink-800);
  font-variant-numeric: tabular-nums;
}
.prog-asof, .prog-rel { font-size: 11.5px; color: var(--ink-400); }
.prog-quote { margin-top: 10px; font-size: 13px; font-style: italic; color: var(--ink-500); }

.prog-links { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 14px; }
.path { display: flex; flex-direction: column; gap: 4px; }
.btn-link {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 15px; border-radius: 999px;
  border: 1px solid var(--rule); background: var(--paper);
  font-size: 13px; font-weight: 500; color: var(--ink-700); text-decoration: none;
  transition: border-color .22s var(--ease-soft), background .22s, color .22s, transform .22s var(--ease);
}
.btn-link:hover { border-color: var(--ink-300); background: var(--paper-2); transform: translateY(-1px); }
.btn-link svg { opacity: .5; }
.btn-link-strong { border-color: rgba(178,58,46,.35); color: var(--seal); background: var(--seal-wash); }
.btn-link-strong:hover { border-color: var(--seal); background: rgba(178,58,46,.12); }
.path-meta { padding-left: 4px; }
.path-note { font-size: 11.5px; color: var(--ink-400); }
.path-verified { font-size: 11.5px; color: var(--jade); }
/* An unverified signup link is never dressed up as a verified one. */
.path-unverified { font-size: 11.5px; color: var(--ink-300); }

/* the seal — appears once, on acceptance */
.seal-stamp {
  width: 84px; height: 84px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--seal); color: #fff;
  font-family: var(--serif); font-size: 12px; line-height: 1.2; text-align: center;
  letter-spacing: .04em;
  transform: rotate(-7deg);
  box-shadow: 0 10px 30px -12px rgba(178,58,46,.7);
  animation: stamp .5s var(--ease) both;
}
@keyframes stamp {
  0%   { opacity: 0; transform: rotate(-7deg) scale(1.9); }
  60%  { opacity: 1; transform: rotate(-7deg) scale(0.94); }
  100% { opacity: 1; transform: rotate(-7deg) scale(1); }
}

/* ---------------------------------------------------------------- misc */

.toast {
  position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%) translateY(80px);
  background: var(--ink-900); color: var(--paper);
  padding: 13px 22px; border-radius: 999px; font-size: 13.5px;
  box-shadow: var(--shadow-lg); z-index: 90;
  transition: transform .5s var(--ease), opacity .4s; opacity: 0;
}
.toast.on { transform: translateX(-50%) translateY(0); opacity: 1; }

.foot { margin-top: 96px; padding: 34px 0 60px; border-top: 1px solid var(--rule-soft); }
/* The ways out of the console — back to the story, or over to the sell side.
   One quiet line, a step darker and larger than the disclosures beneath it so
   the eye can tell a link from a legal note without either one shouting. */
.foot-nav { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 22px; }
.foot-nav a {
  font-size: 13.5px; color: var(--ink-400); text-decoration: none;
  transition: color .16s ease;
}
.foot-nav a:hover {
  color: var(--ink-700);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px;
}
.foot-in { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; font-size: 12px; color: var(--ink-300); }

/* Only mention hovering to people who have a pointer to hover with. */
.hover-hint { display: none; }
@media (hover: hover) and (pointer: fine) { .hover-hint { display: inline; } }

::selection { background: var(--seal-wash); color: var(--ink-900); }
:focus-visible { outline: 2px solid var(--seal); outline-offset: 3px; border-radius: 4px; }


/* ------------------------------------------------- active (spoken) ads */
/* These are the only cards on the deal screen that are not wrapped in a `.card`,
   so they carry the container themselves: the sunk tone, the same radius and the
   same hairline the rest of the page uses, rather than floating on bare paper. */
.aread {
  border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--paper-2);
  box-shadow: var(--shadow-sm);
  padding: 20px 22px; margin-bottom: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.aread-hd { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.aread-at {
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12px; color: var(--seal); letter-spacing: .04em;
}
/* Which link slot in the description pack this read points at — the read and the
   pasted description are one artefact, so the card names the join. */
.aread-slot code {
  font-family: var(--mono); font-size: 11px; color: var(--ink-500);
  border: 1px solid var(--rule); border-radius: 999px; padding: 2px 8px;
  background: var(--paper);
}
.aread-script {
  font-family: var(--serif); font-size: 16.5px; line-height: 1.62;
  color: var(--ink-800); border-left: 2px solid var(--seal);
  padding-left: 14px; margin: 0;
}
/* An Active ad has no audio until the creator records it, which is precisely
   what made the mode hard to grasp on a screen full of silent video. This plays
   a synthetic stand-in — and says so, right beside itself, every time. The note
   is not fine print: mistaking the robot for the deliverable is the one
   misunderstanding this button could cause. */
.aread-foot { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.aread-say {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  height: 32px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--rule); background: var(--paper);
  font-size: 12.5px; font-weight: 500; color: var(--ink-700);
  transition: border-color .22s var(--ease-soft), background .22s, color .22s, transform .22s var(--ease);
}
.aread-say:hover { border-color: var(--ink-300); transform: translateY(-1px); }
.aread-say[aria-pressed="true"] { border-color: var(--seal); background: var(--seal-wash); color: var(--seal); }
.aread-say .ico-stop { display: none; }
.aread-say[aria-pressed="true"] .ico-play { display: none; }
.aread-say[aria-pressed="true"] .ico-stop { display: block; }
.aread-say-note { font-size: 11.5px; line-height: 1.4; color: var(--ink-400); }

.aread-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--ink-400); }
.aread-ev { font-size: 13px; color: var(--ink-500); font-style: italic; }
.aread-disc {
  font-size: 12.5px; color: var(--jade); background: var(--jade-wash);
  padding: 7px 11px; border-radius: 5px;
}