/* ============================================================================
   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;
  --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; }
html { -webkit-text-size-adjust: 100%; }
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 */

.topbar {
  position: sticky; top: 0; z-index: 60;
  backdrop-filter: saturate(1.4) blur(14px);
  background: rgba(251, 250, 245, 0.82);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease-soft), background .3s var(--ease-soft);
}
.topbar.scrolled { border-bottom-color: var(--rule-soft); }
.topbar-in { display: flex; align-items: center; justify-content: space-between; height: 68px; }

.brand { display: flex; align-items: center; gap: 11px; }
.brand-name {
  font-family: var(--serif); font-size: 1.5rem; font-weight: 400;
  letter-spacing: -0.02em; color: var(--ink-800);
}
.brand-name em { font-style: normal; color: var(--ink-300); }

/* 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; }
@media (max-width: 880px) { .rail-step span { display: none; } .rail-sep { width: 14px; margin: 0 7px; } }

/* ---------------------------------------------------------------- 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; }

.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; }

/* The invite gate, under the drop zone. A doorway, not a feature: narrow, centred,
   and quiet enough that someone who already has a code barely notices it. Shown
   only when a live backend reports invite_required — see syncInviteGate(). */
.invite-gate { max-width: 300px; margin: 26px auto 0; text-align: center; }
.invite-gate[hidden] { display: none; }
.invite-label { display: block; margin-bottom: 9px; }
.invite-input {
  height: 42px; text-align: center;
  font-size: 14px; letter-spacing: .03em; color: var(--ink-700);
}
.invite-input::placeholder { color: var(--ink-300); letter-spacing: .02em; }
/* The one place the seal is allowed here: a refused code, on its way back. */
.invite-input.refused { border-color: var(--seal); background: var(--seal-wash); }
.invite-hint { margin: 9px 0 0; }

.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); }
.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;
}