:root {
    /* Prospektor's own tokens, lifted from the website's main.css so the studio
       and the site cannot drift. Coral is CTA only — the site's stylesheet says
       so in as many words — and emerald is the system colour: the machine
       working, done, verified. */
    --brand-accent: #e8533a;      /* coral: CTA only, nothing else               */
    --coral-hover: #d04530;
    --signal: #00b37e;            /* emerald: the machine working                */
    --signal-dim: #00956a;

    --brand-surface: #f7f5f0;     /* off-white                                   */
    --brand-ink: #1a1a18;

    /* Two typefaces, two owners. The studio's own type runs the product —
       navigation, forms, the terminal — and never changes. A tenant's `font`
       token styles the deliverables only: the artifacts that carry their brand
       and get pasted into their own materials. A client's serif has no business
       restyling the app's chrome. */
    --studio-font: 'Plus Jakarta Sans', -apple-system, system-ui, sans-serif;
    --brand-font: var(--studio-font);
    --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    --sand: #edeae3;              /* stone: the alternating band                 */
    --card: #ffffff;
    --line: rgba(26, 26, 24, .1);
    --hairline: rgba(26, 26, 24, .06);
    --muted: #52524e;             /* ink-mid                                     */
    --faint: #8f8f8a;             /* ink-faint                                   */
    --tint: color-mix(in srgb, var(--brand-accent) 9%, transparent);
    --mint: #e6f7f2;              /* accent-bg                                   */
    --radius: 14px;
    --warn: #a5651a;
    --bad: #c0392b;

    /* The active area, matching the site's build card exactly. Dark whatever
       the tenant palette is — this is the machine's surface, not the client's. */
    --term-bg: #1a1a18;
    --term-head: rgba(255, 255, 255, .03);
    --term-line: rgba(255, 255, 255, .09);
    --term-ink: rgba(255, 255, 255, .65);
    --term-muted: rgba(255, 255, 255, .45);
    --term-dim: rgba(255, 255, 255, .22);
    --term-gutter: rgba(255, 255, 255, .12);
    --term-green: #6ee7b7;
    --term-amber: #fde68a;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0;
    font-family: var(--studio-font);
    background: var(--brand-surface);
    color: var(--brand-ink);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  a { color: inherit; }

  /* ------------------------------- chrome -------------------------------
     Three columns so the nav sits dead centre whatever is either side of it. */
  header.top {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px;
    padding: 11px 26px; background: var(--card); color: var(--brand-ink);
    position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--line);
  }
  header.top .brand {
    display: flex; align-items: center; gap: 10px; text-decoration: none; justify-self: start;
  }
  header.top .brand img { display: block; border-radius: 8px; }
  header.top .wordmark { font-weight: 800; letter-spacing: -.02em; font-size: 16px; white-space: nowrap; }
  header.top .mark {
    font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .02em;
    text-transform: uppercase; color: var(--signal); background: var(--mint);
    border: 1px solid rgba(0,179,126,.2); border-radius: 4px; padding: 3px 8px; white-space: nowrap;
  }
  nav.segments { display: flex; gap: 3px; justify-self: center; }
  nav.segments button {
    background: transparent; border: 0; color: var(--muted); cursor: pointer;
    font: inherit; font-size: 14px; padding: 7px 16px; border-radius: 999px;
    display: flex; align-items: center; gap: 7px; white-space: nowrap;
  }
  nav.segments button:hover { color: var(--brand-accent); }
  nav.segments button[aria-current="page"] { background: var(--sand); color: var(--brand-ink); font-weight: 700; }
  nav.segments .count {
    font-family: var(--mono); font-size: 11px; font-variant-numeric: tabular-nums;
    background: color-mix(in srgb, var(--brand-ink) 9%, transparent); border-radius: 999px; padding: 1px 7px;
  }

  /* The client, and everything about being signed in to it. */
  .account { position: relative; justify-self: end; }
  .account-button {
    display: flex; align-items: center; gap: 9px; background: transparent; cursor: pointer;
    border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px 6px 11px; font: inherit; font-size: 14px;
    color: inherit; max-width: 300px;
  }
  .account-button:hover { border-color: var(--brand-ink); }
  .account-button .logo { height: 20px; width: 20px; object-fit: contain; border-radius: 4px; }
  .account-button .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--client-primary, var(--brand-ink)); flex: 0 0 auto; }
  .account-button .tenant { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .account-button .chev { color: var(--muted); font-size: 11px; }
  .account-button[aria-expanded="true"] { border-color: var(--brand-ink); background: var(--sand); }
  .account .menu {
    position: absolute; right: 0; top: calc(100% + 8px); min-width: 250px; z-index: 40;
    background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 6px;
    box-shadow: 0 14px 34px rgba(0,0,0,.13);
  }
  .account .menu-head { padding: 10px 12px 12px; border-bottom: 1px solid var(--hairline); margin-bottom: 6px; }
  .account .menu-head .tenant { font-weight: 600; }
  .account .menu-head .who { font-size: 12.5px; color: var(--muted); font-family: var(--mono); }
  .account .menu button {
    display: block; width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
    font: inherit; font-size: 14px; padding: 9px 12px; border-radius: 8px; color: inherit;
  }
  .account .menu button:hover { background: var(--sand); }

  /* ------------------------------ settings ------------------------------ */
  .setting { border-top: 1px solid var(--hairline); padding: 16px 0; display: grid; grid-template-columns: 190px 1fr; gap: 20px; }
  .setting:first-of-type { border-top: 0; }
  .setting .what { font-weight: 600; font-size: 14px; }
  .setting .why { font-size: 13px; color: var(--muted); margin-top: 2px; }
  .swatches { display: flex; gap: 10px; flex-wrap: wrap; }
  .swatch { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
  .swatch i { width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--line); display: block; }

  main { max-width: 1120px; margin: 0 auto; padding: 30px 26px 70px; }
  .card {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 26px; margin-bottom: 18px;
  }
  h1 { font-size: 30px; font-weight: 800; margin: 0 0 6px; letter-spacing: -.04em; line-height: 1.08; }
  h2 { font-size: 19px; font-weight: 700; margin: 0 0 10px; letter-spacing: -.02em; }
  h3 {
    font-family: var(--mono); font-size: 11px; font-weight: 500; margin: 24px 0 9px;
    text-transform: uppercase; letter-spacing: .12em; color: var(--muted);
  }
  p.sub { margin: 0 0 20px; color: var(--muted); }
  .eyebrow {
    font-family: var(--mono); font-size: 11px; text-transform: uppercase;
    letter-spacing: .12em; color: var(--muted);
  }
  .eyebrow.chip { background: var(--sand); border-radius: 6px; padding: 4px 9px; display: inline-block; }

  /* -------------------------------- forms -------------------------------- */
  label.field { display: block; font-size: 13px; font-weight: 600; margin: 0 0 6px; }
  label.field .opt { font-weight: 400; color: var(--muted); }
  input[type=text], input[type=email], input[type=url], textarea, select {
    width: 100%; padding: 11px 14px; font: inherit; color: inherit;
    border: 1px solid var(--line); border-radius: 10px; background: #fff;
  }
  input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 2px solid var(--signal); outline-offset: 1px; border-color: transparent;
  }
  textarea { min-height: 84px; resize: vertical; }
  textarea.editor { min-height: 340px; font-family: var(--mono); font-size: 13px; line-height: 1.65; }
  .grid { display: grid; gap: 18px; }
  .grid.two { grid-template-columns: 1fr 1fr; }
  .target-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: end; }
  .target-row .or { padding-bottom: 12px; font-family: var(--mono); font-size: 11px; color: var(--muted); }

  /* The target field, borrowed from the site's hero prompt. */
  .prompt {
    display: flex; align-items: center; gap: 10px; background: #fff;
    border: 1px solid var(--line); border-radius: 14px; padding: 5px 8px 5px 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
  }
  .prompt:focus-within { border-color: var(--signal); box-shadow: 0 0 0 3px var(--mint); }
  .prompt .sigil { font-family: var(--mono); color: var(--faint); font-size: 13px; }
  .prompt input {
    border: 0; padding: 8px 0; border-radius: 0; font-family: var(--mono); font-size: 14px; background: none;
  }
  .prompt input:focus-visible { outline: none; }
  .prompt .enter {
    font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--faint);
    background: var(--sand); border-radius: 4px; padding: 4px 8px; white-space: nowrap;
  }

  button.primary {
    background: var(--brand-accent); color: #fff; border: 0; border-radius: 100px;
    padding: 13px 26px; font: inherit; font-weight: 700; cursor: pointer;
    transition: background .15s, transform .1s;
  }
  button.primary:hover { background: var(--coral-hover); transform: translateY(-1px); }
  button.primary[disabled] { opacity: .5; cursor: default; filter: none; }
  /* One rule for the whole product: if it is red, you can click it. */
  .ghost {
    display: inline-block; background: #fff; border: 1px solid color-mix(in srgb, var(--brand-accent) 35%, transparent);
    border-radius: 999px; padding: 7px 16px; font: inherit; font-size: 13px; font-weight: 600;
    cursor: pointer; color: var(--brand-accent); text-decoration: none; white-space: nowrap;
  }
  .ghost:hover { background: var(--tint); border-color: var(--brand-accent); }
  .ghost.did { color: var(--signal); border-color: color-mix(in srgb, var(--signal) 40%, transparent); background: var(--mint); }
  a.go { color: var(--brand-accent); text-decoration-color: color-mix(in srgb, var(--brand-accent) 40%, transparent); }
  a.go:hover { text-decoration-color: currentColor; }
  .onward {
    display: block; margin: 26px 0 0; background: none; border: 0; padding: 0;
    font: inherit; font-size: 14px; font-weight: 600; color: var(--brand-accent); cursor: pointer;
  }
  .onward:hover { text-decoration: underline; }
  .teaches { font-size: 13px; color: var(--muted); margin: 0 0 12px; }
  .checks { display: flex; flex-wrap: wrap; gap: 8px; }
  .checks label {
    display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer;
    border: 1px solid var(--line); border-radius: 999px; padding: 7px 15px; background: #fff;
  }
  .checks label:has(input:checked) { border-color: var(--brand-ink); font-weight: 600; }
  .checks input { accent-color: var(--brand-accent); }

  /* ------------------------------- banners ------------------------------- */
  .banner { padding: 12px 16px; border-radius: 10px; font-size: 14px; margin-bottom: 14px; border: 1px solid; }
  .banner.warn { background: #fdf6e8; border-color: #e8d4a8; }
  .banner.error { background: #fdeceb; border-color: #edb6b1; }
  .banner.ok { background: var(--mint); border-color: color-mix(in srgb, var(--signal) 35%, transparent); }
  .banner.info { background: var(--sand); border-color: var(--line); }
  .banner .actions { display: flex; gap: 8px; margin-top: 11px; }

  /* --------------------------- the run, and only the run ---------------------------
     The site's "how it works": human-readable steps on the left, the machine's
     own surface on the right. */
  .run-grid { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 30px; align-items: start; }
  .run-steps { padding-top: 4px; }
  .run-steps h1 { margin: 10px 0 22px; font-size: 27px; }

  ol.stepper { list-style: none; margin: 0; padding: 0; }
  ol.stepper > li {
    display: grid; grid-template-columns: 26px 1fr; gap: 12px;
    padding: 13px 0; border-top: 1px solid var(--line);
  }
  ol.stepper > li:last-child { border-bottom: 1px solid var(--line); }
  .step-mark { font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--faint); padding-top: 3px; }
  .step-label { font-weight: 600; font-size: 14.5px; color: var(--muted); letter-spacing: -.01em; }
  .step-note { font-size: 13px; color: var(--muted); margin-top: 3px; }
  li.is-active .step-mark, li.is-done .step-mark { color: var(--signal); }
  li.is-active .step-label, li.is-done .step-label { color: var(--brand-ink); }
  li.is-active .step-label::after {
    content: '▌'; color: var(--signal); margin-left: 5px; animation: blink .9s step-end infinite;
  }
  @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

  .terminal {
    background: var(--term-bg); color: var(--term-ink); border-radius: var(--radius);
    border: 1px solid var(--term-line); overflow: hidden; font-family: var(--mono);
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
  }
  .term-head {
    display: flex; align-items: center; gap: 12px; padding: 11px 16px;
    background: var(--term-head); border-bottom: 1px solid var(--term-line); font-size: 12.5px;
  }
  .lights { display: flex; gap: 7px; }
  .lights i { width: 11px; height: 11px; border-radius: 50%; display: block; }
  .lights i:nth-child(1) { background: #ff5f57; }
  .lights i:nth-child(2) { background: #febc2e; }
  .lights i:nth-child(3) { background: #28c840; }
  .term-head .title { color: var(--term-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .term-head .spacer { flex: 1; }
  .term-head .elapsed { color: var(--term-muted); font-variant-numeric: tabular-nums; }

  .term-body { padding: 16px 16px 8px; min-height: 300px; max-height: 460px; overflow-y: auto; }
  ol.term-lines { list-style: none; margin: 0; padding: 0; font-size: 12.5px; line-height: 1.85; }
  ol.term-lines > li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; }
  .ln { color: var(--term-gutter); text-align: right; user-select: none; }
  .tx { color: var(--term-ink); overflow-wrap: anywhere; }
  .tx.stage { color: #fff; font-weight: 500; }
  .tx.stage::before { content: '// '; color: var(--term-dim); }
  .tx.step { color: var(--term-muted); }
  .tx.step::before { content: '› '; color: var(--term-dim); }
  .tx.ok { color: var(--term-green); }
  .tx.ok::before { content: '✓ '; }
  .tx.err { color: #ff7a6e; }
  .tx.err::before { content: '✗ '; }
  li.fresh .tx { animation: type-in .26s ease-out; }
  @keyframes type-in { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } }
  .caret { color: var(--signal); animation: blink .9s step-end infinite; }

  .term-foot { border-top: 1px solid var(--term-line); padding: 12px 16px 13px; }
  .bar { height: 2px; background: rgba(255,255,255,.08); border-radius: 2px; overflow: hidden; }
  .bar span { display: block; height: 100%; width: 0; background: var(--signal); transition: width 1.2s ease; }
  .foot-row {
    display: flex; align-items: center; gap: 10px; margin-top: 9px;
    font-size: 12px; color: var(--term-muted);
  }
  .foot-row .spacer { flex: 1; }
  .foot-row .pct { font-variant-numeric: tabular-nums; }
  .chips { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 13px; font-size: 11px; color: rgba(255,255,255,.3); }
  .chip { display: flex; align-items: center; gap: 6px; }
  .chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
  .chip.is-done { color: var(--signal); }
  .chip.is-active { color: var(--term-amber); }
  @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

  .run-hint { color: var(--muted); font-size: 13px; margin: 20px 2px 0; }

  /* The same six steps, told once, before anything is running. */
  .how {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line);
    border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-top: 26px;
  }
  .how > div { background: var(--card); padding: 16px 18px; }
  .how .n { font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--faint); display: block; margin-bottom: 5px; }
  .how .t { font-weight: 600; font-size: 14.5px; display: block; }
  .how .s { font-size: 13px; color: var(--muted); }

  @media (prefers-reduced-motion: reduce) {
    li.fresh .tx, .chip.is-active, .caret, li.is-active .step-label::after { animation: none; }
  }

  /* -------------------------------- result ------------------------------- */
  .result-head { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
  .result-head .who-they-are { flex: 1 1 300px; }
  .score { flex: 0 0 auto; text-align: right; }
  .score .num { font-size: 46px; font-weight: 800; line-height: 1; letter-spacing: -.04em; }
  .score .verdict {
    font-family: var(--mono); text-transform: uppercase; letter-spacing: .12em;
    font-size: 11px; color: var(--muted); margin-top: 4px;
  }
  .score.is-strong .num { color: var(--signal); }
  .band {
    display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line);
    border-radius: var(--radius); overflow: hidden; margin-top: 20px; background: var(--line); gap: 1px;
  }
  .band > div { background: var(--card); padding: 15px 18px; }
  .band .v { font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
  .band .k { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-top: 2px; }
  .band .v.flag { color: var(--bad); }
  .pills { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
  .pill {
    display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px;
    padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap;
  }
  .pill.strong { border-color: color-mix(in srgb, var(--signal) 45%, transparent); color: var(--signal); background: var(--mint); }
  .pill.bad { border-color: color-mix(in srgb, var(--bad) 40%, transparent); color: var(--bad); }
  .pill.accent { border-color: rgba(0,179,126,.2); color: var(--signal); background: var(--mint); }
  .one-thing { margin: 20px 0; border-left: 3px solid var(--signal); background: var(--mint); padding: 15px 18px; border-radius: 0 10px 10px 0; }
  .one-thing .eyebrow { display: block; margin-bottom: 5px; }

  /* The target is context, not the point: one line, always. Its profile is the
     Summary step, where it can be read rather than stepped over. */
  #result-head { padding: 14px 22px; }
  #result-head h1 { font-size: 21px; margin: 0; }
  #result-head .who-they-are { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
  #result-head .pills { margin-top: 0; }
  #result-head .score { display: flex; align-items: baseline; gap: 8px; }
  #result-head .score .num { font-size: 26px; }
  #result-head .score .verdict { margin-top: 0; }
  #result-head .head-actions { display: flex; gap: 8px; flex-wrap: wrap; }

  .tabs {
    display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 20px;
    position: sticky; top: 57px; z-index: 10; background: var(--brand-surface);
  }
  .tabs button {
    background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 14px;
    font: inherit; font-size: 14px; cursor: pointer; color: var(--muted); display: flex; align-items: center; gap: 7px;
  }
  .tabs button:hover { color: var(--brand-accent); }
  .tabs button[aria-selected=true] { color: var(--brand-ink); border-bottom-color: var(--brand-accent); font-weight: 700; }

  /* The four assets live under one tab; this picks between them. */
  .subtabs { display: flex; gap: 8px; flex-wrap: wrap; margin: -8px 0 18px; }
  .subtabs button {
    background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px;
    font: inherit; font-size: 13px; cursor: pointer; color: var(--muted);
  }
  .subtabs button:hover { color: var(--brand-accent); border-color: color-mix(in srgb, var(--brand-accent) 35%, transparent); }
  .subtabs button[aria-selected=true] { background: var(--brand-ink); border-color: var(--brand-ink); color: #fff; font-weight: 600; }
  .tabs .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--bad); }

  .panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
  .panel-head h2 { margin: 0; display: flex; align-items: center; gap: 8px; }
  .panel-head .spacer { flex: 1; }
  .ghost.tiny { padding: 3px 10px; font-size: 11.5px; }

  /* An ⓘ that explains the section without giving the method away. */
  .info {
    width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line);
    display: inline-grid; place-items: center; font-family: var(--mono); font-size: 10px;
    color: var(--faint); cursor: help; position: relative; flex: 0 0 auto; font-weight: 500;
  }
  .info:hover, .info:focus-visible { border-color: var(--brand-ink); color: var(--brand-ink); outline: none; }
  .info::after {
    content: attr(data-tip); position: absolute; left: 0; top: calc(100% + 8px); width: 320px;
    background: var(--term-bg); color: rgba(255,255,255,.88); border-radius: 10px; padding: 11px 13px;
    font-family: var(--studio-font); font-size: 12.5px; font-weight: 400; line-height: 1.5;
    letter-spacing: 0; text-transform: none; text-align: left; z-index: 50;
    opacity: 0; visibility: hidden; transition: opacity .12s ease; pointer-events: none;
    box-shadow: 0 10px 30px rgba(0,0,0,.22);
  }
  .info:hover::after, .info:focus-visible::after { opacity: 1; visibility: visible; }

  /* The case, before the argument. */
  ul.case { margin: 0; padding-left: 20px; }
  ul.case li { margin-bottom: 9px; font-size: 15px; }
  details.more { margin-top: 22px; border-top: 1px solid var(--hairline); padding-top: 14px; }
  details.more summary {
    cursor: pointer; font-size: 13px; font-weight: 600; color: var(--brand-accent); list-style: none;
  }
  details.more summary::-webkit-details-marker { display: none; }
  details.more summary::before { content: '▸ '; }
  details.more[open] summary::before { content: '▾ '; }
  details.more .prose { margin-top: 12px; }

  .two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
  .two-col h3 { margin-top: 0; }

  .item.signal.for { border-left: 3px solid color-mix(in srgb, var(--signal) 55%, transparent); }
  .item.signal.against { border-left: 3px solid color-mix(in srgb, var(--bad) 50%, transparent); }
  .signal-meta {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 6px 0 6px;
    font-family: var(--mono); font-size: 10.5px; color: var(--faint);
  }
  .strength {
    text-transform: uppercase; letter-spacing: .08em; border-radius: 4px; padding: 2px 7px;
    background: var(--sand); color: var(--muted);
  }
  .strength.strong { background: var(--mint); color: var(--signal-dim); }
  .strength.weak { background: transparent; border: 1px solid var(--line); }

  .one-thing-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
  .one-thing-head .eyebrow { flex: 1; }

  /* How close a lookalike is, said twice: a bar and a number. */
  .similarity { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; font-family: var(--mono); font-size: 11px; color: var(--faint); }
  .similarity i { display: block; width: 54px; height: 4px; border-radius: 2px; background: var(--line); position: relative; }
  .similarity i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--pct); background: var(--signal); border-radius: 2px; }

  td .rank, .rank {
    display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
    background: var(--sand); font-family: var(--mono); font-size: 11px; color: var(--muted);
  }
  tbody tr:first-child .rank { background: var(--brand-accent); color: #fff; }
  a.linkedin {
    display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 5px;
    background: #0a66c2; color: #fff; font-size: 11px; font-weight: 700; text-decoration: none;
    font-family: var(--studio-font);
  }
  a.linkedin.search {
    background: none; color: #0a66c2; border: 1px dashed #0a66c2; opacity: .75;
  }
  a.linkedin.search:hover { opacity: 1; }
  th .info { cursor: help; }

  /* --------------------------- editing a block --------------------------- */
  .block { position: relative; }
  .block:hover > .pencil, .pencil:focus-visible { opacity: 1; }
  /* An email's header already holds Copy, so its pencil takes the bottom. */
  .block:has(.email) > .pencil { top: auto; bottom: 10px; }
  .pencil {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
    background: #fff; border: 1px solid color-mix(in srgb, var(--brand-accent) 35%, transparent);
    color: var(--brand-accent); font-size: 13px; line-height: 1;
    opacity: 0; transition: opacity .12s ease;
  }
  .pencil:hover { background: var(--tint); }
  .slide.is-hero + .pencil { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); color: #fff; }
  .block-form {
    border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px;
    background: var(--card); display: grid; gap: 14px; margin-bottom: 12px;
  }
  .block-label { display: grid; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
  .block-field { font-family: var(--studio-font); font-size: 14px; }
  textarea.block-field { min-height: 0; line-height: 1.6; }
  .block-actions { display: flex; gap: 8px; }
  .proposal-section { padding-right: 44px; }

  .actions-menu { position: relative; }
  .actions-menu > .ghost { padding: 7px 12px; }
  .actions-menu .menu {
    position: absolute; right: 0; top: calc(100% + 6px); min-width: 180px; z-index: 30;
    background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 5px;
    box-shadow: 0 12px 30px rgba(0,0,0,.13);
  }
  .actions-menu .menu button {
    display: block; width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
    font: inherit; font-size: 13.5px; padding: 8px 11px; border-radius: 7px; color: inherit;
  }
  .actions-menu .menu button:hover { background: var(--sand); color: var(--brand-accent); }

  .pick-row { display: flex; gap: 14px; align-items: flex-start; cursor: pointer; }
  .pick-row input { margin-top: 4px; width: 16px; height: 16px; accent-color: var(--brand-accent); flex: 0 0 auto; }
  .pick-spacer { width: 16px; flex: 0 0 auto; }
  .pick-body { flex: 1; min-width: 0; }

  .refine { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--hairline); }
  .refine-row { display: flex; gap: 10px; align-items: center; }
  .refine-row input { flex: 1; font-size: 13.5px; }
  .refine .meta { display: block; margin-top: 8px; }

  .item.fill input { margin-top: 9px; }
  .item.fill.done { border-color: color-mix(in srgb, var(--signal) 40%, transparent); background: color-mix(in srgb, var(--mint) 45%, transparent); }

  /* The deliverables are the client's copy, so they are set in the client's
     type with the client's tokens in scope. Everything outside — the fit
     thesis, the checks, the chrome — is the studio's own analysis and stays in
     the studio's type. One rule, rather than a list of selectors that drifts. */
  .brand-scope {
    font-family: var(--brand-font);
    --accent: var(--client-accent, var(--brand-ink));
    --primary: var(--client-primary, var(--brand-ink));
    --surface: var(--client-surface, var(--card));
    --ink: var(--client-ink, var(--brand-ink));
  }

  /* ---------------------------------- deck ---------------------------------
     Slides, not paragraphs. Every rule here sits inside .brand-scope, so a
     client's brand.css can restyle any of it — these are their slides. */
  .deck { display: grid; gap: 14px; }
  .slide {
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: 26px 28px; background: var(--card);
  }
  .slide-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
  .slide .slide-label {
    font-family: var(--mono); font-size: 10.5px; text-transform: uppercase;
    letter-spacing: .12em; color: var(--muted);
  }
  .slide .slide-n { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--line); }
  .slide h4 {
    margin: 0; font-size: 25px; font-weight: 800; letter-spacing: -.03em; line-height: 1.16;
    max-width: 26ch;
  }
  .slide .slide-sub { color: var(--muted); margin: 9px 0 0; font-size: 15px; max-width: 52ch; }
  .slide ul { margin: 16px 0 0; padding-left: 20px; }
  .slide li { margin-bottom: 7px; font-size: 15px; }

  .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-top: 20px; }
  .tile {
    border-radius: 10px; padding: 14px 16px;
    background: color-mix(in srgb, var(--client-accent, var(--brand-ink)) 9%, #fff);
  }
  .tile-v { font-size: 27px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
  .tile-l { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
  .tile-src { margin-top: 8px; }
  .tile.unsourced { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bad) 45%, transparent); }

  /* The opening slide is the one that has to land, so it gets the colour. */
  .slide.is-hero {
    background: var(--client-primary, var(--brand-ink));
    border-color: transparent; color: #fff; padding: 34px 32px;
  }
  .slide.is-hero .slide-label { color: rgba(255,255,255,.6); }
  .slide.is-hero .slide-n { color: rgba(255,255,255,.25); }
  .slide.is-hero h4 { font-size: 30px; }
  .slide.is-hero .slide-sub { color: rgba(255,255,255,.72); }
  .slide.is-hero .tile { background: rgba(255,255,255,.1); }
  .slide.is-hero .tile-v { color: #fff; }
  .slide.is-hero .tile-l { color: rgba(255,255,255,.65); }
  .slide.is-hero .pill { color: rgba(255,255,255,.65); border-color: rgba(255,255,255,.28); background: none; }
  .slide.is-hero .go { color: #fff; }
  .slide.is-hero mark.ph { background: rgba(255,255,255,.2); border-bottom-color: rgba(255,255,255,.5); color: #fff; }
  .slide.is-hero .notes summary { color: rgba(255,255,255,.6); }
  .slide.is-hero .notes { border-top-color: rgba(255,255,255,.18); color: rgba(255,255,255,.6); }

  /* A phased slide reads left to right: the period, then what happens in it. */
  .tiles.phased { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .tiles.phased .tile { background: color-mix(in srgb, var(--client-primary, var(--brand-ink)) 7%, #fff); }
  .tiles.phased .tile-v { font-size: 20px; }
  .tiles.phased .tile-l { font-size: 13px; color: var(--brand-ink); margin-top: 5px; }

  .slide.is-close { border-color: var(--brand-ink); border-width: 2px; }

  .notes {
    margin-top: 18px; padding-top: 12px; border-top: 1px dashed var(--line);
    font-size: 13.5px; color: var(--muted);
  }
  .notes summary {
    cursor: pointer; font-family: var(--mono); font-size: 10.5px; text-transform: uppercase;
    letter-spacing: .1em; list-style: none; color: var(--faint);
  }
  .notes summary::-webkit-details-marker { display: none; }
  .notes summary::before { content: '▸ '; }
  .notes[open] summary::before { content: '▾ '; }
  .notes > div { margin-top: 8px; }

  .email { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; }
  .email .email-head { display: flex; align-items: center; gap: 10px; padding: 11px 18px; background: var(--sand); border-bottom: 1px solid var(--line); }
  .email .email-head .spacer { flex: 1; }
  /* The head's colours are the client's to set, so the pill borrows whatever
     text colour the head has rather than assuming a light background. */
  .email .email-head .pill { color: inherit; opacity: .75; background: none; border-color: color-mix(in srgb, currentColor 45%, transparent); }
  .email .email-head strong { font-size: 14px; }
  .email .subject { padding: 14px 18px 0; font-weight: 600; }
  .email .body { padding: 7px 18px 18px; white-space: pre-wrap; }
  .prose p { margin: 0 0 12px; }
  .prose h4 { margin: 20px 0 6px; font-size: 15px; font-weight: 700; }
  .cta { border: 1px solid var(--line); background: var(--sand); border-radius: var(--radius); padding: 18px 20px; margin-top: 16px; }
  .cta strong { display: block; }

  table { width: 100%; border-collapse: collapse; font-size: 14px; }
  th, td { text-align: left; padding: 11px 10px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
  th { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 500; }
  /* Pill and source sit on one line whatever the word is, so the column
     does not go ragged between "likely" and "confirmed". */
  td.confidence { white-space: nowrap; }
  td.confidence .go { font-size: 12px; margin-left: 8px; }
  .stack { display: grid; gap: 10px; }
  .item { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
  .item .meta { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
  .item.against { border-left: 3px solid color-mix(in srgb, var(--bad) 45%, transparent); }
  .item-head { display: flex; gap: 10px; align-items: center; justify-content: space-between; }

  mark.ph {
    background: color-mix(in srgb, var(--warn) 16%, transparent); border-bottom: 1px dashed var(--warn);
    color: inherit; padding: 0 4px; border-radius: 3px; font-family: var(--mono); font-size: .9em;
  }
  mark.ph.filled {
    background: color-mix(in srgb, var(--signal) 12%, transparent);
    border-bottom-color: color-mix(in srgb, var(--signal) 55%, transparent);
    font-family: inherit; font-size: inherit;
  }
  code { background: var(--sand); padding: 2px 6px; border-radius: 4px; font-size: 13px; font-family: var(--mono); }
  .finding { display: flex; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--hairline); font-size: 14px; }
  .finding .sev { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; flex: 0 0 54px; }
  .finding.blocker .sev { color: var(--bad); }
  .finding.note .sev { color: var(--muted); }

  /* ---------------------------- autocomplete ---------------------------- */
  .combo { position: relative; }
  ul.ac {
    position: absolute; z-index: 30; left: 0; right: 0; top: 100%; margin: 7px 0 0; padding: 5px;
    list-style: none; background: var(--card); border: 1px solid var(--line);
    border-radius: 12px; box-shadow: 0 14px 34px rgba(0, 0, 0, .13); max-height: 300px; overflow-y: auto;
  }
  ul.ac li { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 8px; cursor: pointer; font-size: 14px; }
  ul.ac li[aria-selected='true'] { background: var(--sand); }
  ul.ac .ac-logo { width: 20px; height: 20px; flex: 0 0 auto; border-radius: 4px; object-fit: contain; background: #fff; border: 1px solid var(--line); }
  ul.ac .ac-name { font-weight: 600; }
  ul.ac .ac-domain { color: var(--muted); font-size: 13px; font-family: var(--mono); }
  ul.ac .ac-tag { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; }

  .empty { text-align: center; color: var(--muted); padding: 44px 20px; }
  .hidden { display: none !important; }
  footer { text-align: center; color: var(--muted); font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 26px; }
  /* ------------------------------ a shared pitch ----------------------------
     The gate a recipient meets before they have an account, and the page the
     work lands on after. Everything below the gate is drawn by the same
     functions the studio uses, so there is nothing here about deliverables —
     only about being a stranger holding a link. */
  /* Minting a link swaps the button for the link itself, because copying it is
     the only thing anyone wants to do next. */
  .share { display: inline-flex; align-items: center; gap: 8px; }
  .share-url {
    width: 360px; max-width: 46vw; font-family: var(--mono); font-size: 12px;
    padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px;
    background: var(--sand); color: var(--muted);
  }

  /* The one destructive control in the product. Set apart, and made to look
     like the thing it is. */
  .danger {
    margin-top: 34px; padding: 20px 22px; border-radius: var(--radius);
    border: 1px solid color-mix(in srgb, var(--bad) 30%, transparent);
    background: color-mix(in srgb, var(--bad) 4%, transparent);
  }
  .danger h3 { margin: 0 0 6px; color: var(--bad); }
  .danger .why { font-size: 13px; color: var(--muted); margin: 0; }
  .danger-row { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
  .danger-row input { flex: 1 1 260px; }
  .danger-go {
    flex: 0 0 auto; border: 1px solid var(--bad); background: #fff; color: var(--bad);
    border-radius: 100px; padding: 11px 22px; font: inherit; font-weight: 700; cursor: pointer;
  }
  .danger-go:hover:not([disabled]) { background: var(--bad); color: #fff; }
  .danger-go[disabled] { opacity: .4; cursor: default; }

  /* ------------------------------ the interview -----------------------------
     One question at a time, with the research running above it. The strip is
     deliberately quiet: it is there to show the studio working, not to compete
     with the question being asked. */
  .reading {
    display: flex; align-items: center; gap: 10px; margin-bottom: 28px;
    padding: 10px 14px; border: 1px solid var(--hairline); border-radius: 999px;
    background: var(--sand); font-size: 13px;
  }
  .reading .dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--signal);
    flex: 0 0 auto; animation: pulse 1.4s ease-in-out infinite;
  }
  .reading .what { font-weight: 600; }
  .reading .meta { font-family: var(--mono); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 45%; }
  .reading.done .dot { animation: none; }
  .reading.failed .dot { background: var(--bad); animation: none; }
  @keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }

  #ob-q-body textarea { min-height: 90px; }
  .q-foot { display: flex; align-items: center; gap: 12px; margin-top: 22px; }

  /* Three manners, same message. Picking one is faster and truer than
     describing the voice you think you have. */
  .sample {
    display: block; width: 100%; text-align: left; margin-bottom: 10px; cursor: pointer;
    padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--card); font: inherit; font-size: 14.5px; line-height: 1.55;
    transition: border-color .12s, background .12s;
  }
  .sample:hover { border-color: var(--brand-ink); }
  .sample.chosen {
    border-color: var(--brand-accent); background: var(--tint);
    box-shadow: inset 0 0 0 1px var(--brand-accent);
  }

  .chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
  .chip-pick {
    border: 1px dashed color-mix(in srgb, var(--brand-accent) 45%, transparent);
    background: none; color: var(--brand-accent); border-radius: 999px;
    padding: 5px 12px; font: inherit; font-size: 12.5px; cursor: pointer;
  }
  .chip-pick:hover { background: var(--tint); }

  /* The gate is the only page a stranger ever sees, so it gets the room a
     first impression needs: one column, centred, nothing else competing. */
  .gate {
    max-width: 620px; margin: 6vh auto 0; padding: 44px 44px 40px; text-align: center;
  }
  .gate-mark { margin-bottom: 22px; }
  .gate-mark img { border-radius: 12px; }
  .gate .eyebrow { margin: 0; }
  .gate-title {
    font-size: 27px; line-height: 1.28; font-weight: 400; color: var(--muted);
    letter-spacing: -.02em; margin: 10px 0 0; text-wrap: balance;
  }
  .gate-title strong { font-weight: 800; color: var(--brand-ink); }
  .gate-sub { margin: 16px auto 0; max-width: 46ch; }

  /* What is behind the gate, by name. Enough to be worth an account. */
  .gate-contains {
    list-style: none; padding: 0; margin: 26px auto; max-width: 340px;
    text-align: left; border: 1px solid var(--hairline); border-radius: 12px;
    background: var(--sand); overflow: hidden;
  }
  .gate-contains li {
    padding: 10px 16px 10px 38px; font-size: 13.5px; position: relative;
    border-bottom: 1px solid var(--hairline);
  }
  .gate-contains li:last-child { border-bottom: 0; }
  .gate-contains li::before {
    content: '✓'; position: absolute; left: 16px; color: var(--signal); font-weight: 700;
  }

  .gate-cta {
    display: inline-block; text-decoration: none; background: var(--brand-accent);
    color: #fff; padding: 13px 26px; border-radius: 100px; font-weight: 700;
    transition: background .15s, transform .1s;
  }
  .gate-cta:hover { background: var(--coral-hover); transform: translateY(-1px); }
  .gate-fine { font-size: 12.5px; color: var(--faint); margin: 22px auto 0; max-width: 42ch; }
  .dev-gate { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--hairline); text-align: left; }
  .dev-gate h3 { margin-bottom: 4px; }

  @media (max-width: 860px) {
    .run-grid, .two-col { grid-template-columns: 1fr; }
    .band { grid-template-columns: repeat(2, 1fr); }
    .info::after { width: 240px; }
  }
  @media (max-width: 720px) {
    main { padding: 18px 14px 44px; }
    .grid.two, .target-row, .how { grid-template-columns: 1fr; }
    .target-row .or { padding: 0; }
    header.top { flex-wrap: wrap; gap: 10px; }
    h1 { font-size: 25px; }
  }