:root {
  color-scheme: light dark;
  --public-bg: #f5f7fb;
  --public-surface: #ffffff;
  --public-subtle: #eef1f7;
  --public-border: #dce1eb;
  --public-text: #141722;
  --public-muted: #5f687d;
  --public-primary: #4938d4;
  --public-primary-hover: #3828b4;
  --public-focus: #8075ff;
  --public-danger: #b42318;
  --public-danger-bg: #fff1f0;
  --public-success: #157347;
  --public-success-bg: #ecfdf3;
  --public-warning: #8a5700;
  --public-warning-bg: #fff7df;
  /* The one tinted band, deep enough to register as a change of ground. */
  --public-band: #e6ebf4;

  /* ── Display ladder ──────────────────────────────────────────────────
     One scale, three rungs, held everywhere. Every section previously
     rendered its heading within a few pixels of the hero, so the page had
     no way to say "this is the story" versus "this is a supporting
     detail". The rungs step ~1.4x apart so hierarchy survives the clamp.

     Tracking is one ratio at every size rather than a value chosen per
     element. Six different negative values read as six different fonts;
     a single ratio is what makes large type look drawn rather than
     squeezed. Small text keeps normal tracking - negative tracking below
     ~1.25rem costs legibility and buys nothing. */
  --tp-display: clamp(2.9rem, 5.6vw, 4.75rem);
  --tp-h2: clamp(1.95rem, 3.4vw, 3rem);
  --tp-h3: clamp(1.6rem, 2.6vw, 2.25rem);
  --tp-track: -.022em;

  /* Structural rules. A dashed hairline at the container edge, run the
     height of the page, is what makes separate sections read as one
     drawing rather than a stack. Kept under 12% so it frames without
     competing with content. */
  --public-rule: rgb(20 23 34 / .11);
}

[data-theme="dark"] {
  --public-bg: #0b0d13;
  --public-surface: #12151d;
  --public-subtle: #191d27;
  --public-border: #292f3d;
  --public-text: #f3f5fa;
  --public-muted: #a4adbf;
  --public-primary: #9ea7ff;
  --public-primary-hover: #bac0ff;
  --public-focus: #b2b9ff;
  --public-danger: #ffb4ab;
  --public-danger-bg: #361714;
  --public-success: #77d7a5;
  --public-success-bg: #102a1f;
  --public-warning: #f7cb70;
  --public-warning-bg: #33260e;
  --public-band: #151922;
  --public-rule: rgb(240 244 255 / .10);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --public-bg: #0b0d13;
    --public-surface: #12151d;
    --public-subtle: #191d27;
    --public-border: #292f3d;
    --public-text: #f3f5fa;
    --public-muted: #a4adbf;
    --public-primary: #9ea7ff;
    --public-primary-hover: #bac0ff;
    --public-focus: #b2b9ff;
    --public-rule: rgb(240 244 255 / .10);
  }
}

*, *::before, *::after { box-sizing: border-box; }
/* Mobile browsers autosize text inside long blocks. On the hero this
   inflated a 46.4px headline to 58.5px - a size no clamp in this file
   asks for - which is why the phone layout reads as louder than the
   desktop one rather than as the same design at another width. Opting
   out makes the declared scale the actual scale on both. */
html { min-width: 0; background: var(--public-bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Body container units exclude the scrollbar; viewport units do not. */
body { container-type: inline-size; margin: 0; color: var(--public-text); background: var(--public-bg); font-family: Inter, system-ui, sans-serif; }
a { color: var(--public-primary); text-underline-offset: .2em; }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: .18rem solid var(--public-focus); outline-offset: .18rem; }
.tp-public__skip { position: fixed; z-index: 100; top: .5rem; left: .5rem; padding: .6rem .8rem; border-radius: .5rem; background: var(--public-surface); transform: translateY(-150%); }
.tp-public__skip:focus { transform: none; }
.tp-public__footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: min(76rem, calc(100% - 2rem)); margin-inline: auto; }
/* ── The commercial header ────────────────────────────────────────────────
   Sticky, because the page is nine sections long and the only route to
   signup used to be the hero. Chrome, not content: a hairline and a
   translucent ground so it reads as a fixed frame over a moving document
   rather than as a section that stopped scrolling. */
.tp-public__header {
  position: sticky;
  z-index: 50;
  top: 0;
  width: 100%;
  border-bottom: 1px solid var(--public-border);
  /* Solid first. An unsupported color-mix drops the whole declaration, and a
     transparent sticky header over scrolling text is unreadable. */
  background: var(--public-bg);
  background: color-mix(in srgb, var(--public-bg) 88%, transparent);
}
@supports (backdrop-filter: blur(1px)) {
  .tp-public__header { backdrop-filter: saturate(1.4) blur(.6rem); }
}
.tp-public__header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: min(76rem, calc(100% - 2rem)); min-height: 4.5rem; margin-inline: auto; }
.tp-public__nav, .tp-public__footer nav { display: flex; align-items: center; gap: 1rem; }
/* The CTA is excluded here rather than out-specified below. As a bare
   descendant selector this rule (0,1,1) beat `.tp-public__nav-cta` (0,1,0)
   and painted the primary conversion button in muted grey on indigo -- 1.34:1
   where AA asks 4.5:1 -- with white appearing only on hover, because the
   hover rule carried a pseudo-class and won the cascade. */
.tp-public__nav a:not(.tp-public__nav-cta), .tp-public__footer a { color: var(--public-muted); text-decoration: none; }
/* Colour alone is not an affordance. Every link gains a rule as well. */
.tp-public__nav-link { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .35rem 0; border-bottom: 1px solid transparent; font-size: .88rem; font-weight: 600; }
.tp-public__nav-link:hover, .tp-public__nav-link:focus-visible { border-bottom-color: currentColor; color: var(--public-text); }
.tp-public__nav-cta { display: inline-flex; min-height: 2.75rem; align-items: center; padding: .5rem .9rem; border: 1px solid var(--public-primary); border-radius: .6rem; background: var(--public-primary); color: var(--public-surface); font-size: .88rem; font-weight: 750; white-space: nowrap; }
.tp-public__nav-cta:hover { background: var(--public-primary-hover); color: var(--public-surface); }
.tp-public__nav-cta:active { transform: translateY(.08rem) scale(.99); }
/* Anchors land below the sticky frame instead of underneath it. */
html { scroll-padding-top: 5.5rem; }
.tp-public__main [id] { scroll-margin-top: 5.5rem; }
.tp-public__brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--public-text); text-decoration: none; }
.tp-public__brand span { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: .55rem; background: var(--public-primary); color: var(--public-surface); font-size: .72rem; font-weight: 800; }
.tp-public__brand > span:last-child { display: block; width: auto; height: auto; border-radius: 0; background: transparent; color: var(--public-text); }
.tp-public__brand small { display: none; color: var(--public-muted); font-size: .65rem; font-weight: 500; }
/* Public navigation: final desktop branding and the single mobile layout. */
.tp-public__brand > span:last-child { font-size: 1.02rem; letter-spacing: -.015em; }
.tp-public__brand span:first-child { border-radius: .5rem; }
.tp-public__nav-cta:focus-visible { border-radius: .65rem; }
@media (max-width: 48rem) {
  .tp-public__header-inner { display: grid; grid-template-columns: 1fr auto auto; gap: .3rem .6rem; padding-block: .4rem; }
  .tp-public__nav { display: contents; }
  .tp-public__brand { grid-column: 1; grid-row: 1; }
  .tp-public__nav-signin { grid-column: 2; grid-row: 1; }
  .tp-public__nav-cta { grid-column: 3; grid-row: 1; padding-inline: .6rem; }
  .tp-public__nav-product { grid-column: 1; grid-row: 2; }
  .tp-public__nav a[href="/#pricing"] { grid-column: 2; grid-row: 2; }
  .tp-public__nav-help { grid-column: 3; grid-row: 2; }
  .tp-public__nav a { font-size: .75rem; }
}
@media (max-width: 360px) {
  .tp-public__brand > span:last-child { display: none; }
}
.tp-public__main { position: relative; width: min(76rem, calc(100% - 2rem)); min-height: calc(100vh - 9rem); margin-inline: auto; }
/* The reading column's own edges, drawn. One dashed rule per side, run the
   full height, so every section is measured against the same frame instead
   of floating in undifferentiated white. Sits at the gutter, never over
   text, and never intercepts a click. Full-bleed dark bands paint over it
   deliberately - the frame belongs to the light ground. */
.tp-public__main::before, .tp-public__main::after {
  content: "";
  position: absolute;
  top: 0;
  z-index: 0;
  width: 1px;
  height: 100%;
  background-image: linear-gradient(var(--public-rule) 50%, transparent 50%);
  background-size: 1px 2rem;
  background-repeat: repeat-y;
  pointer-events: none;
}
.tp-public__main::before { left: -1rem; }
.tp-public__main::after { right: -1rem; }
@media (max-width: 60rem) { .tp-public__main::before, .tp-public__main::after { display: none; } }
.tp-public__footer { min-height: 4.5rem; border-top: 1px solid var(--public-border); color: var(--public-muted); font-size: .82rem; }
.tp-public__eyebrow { margin: 0 0 .65rem; color: var(--public-muted); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.tp-public__hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(min(22rem, 100%), .82fr); gap: 3rem; align-items: center; padding: clamp(3rem, 8vw, 7rem) 0; }
.tp-public__hero h1 { max-width: 18ch; margin: 0; font-size: var(--tp-display); line-height: .98; letter-spacing: var(--tp-track); }
/* Scoped to the hero's own prose. As a bare descendant selector this beat
   `.tp-public__demo-label` and every other single-class rule inside the
   product view on specificity, so labels, source lines and the disclaimer
   inside the campaign card all rendered at the hero lede's 19.2px instead
   of their intended ~11px. That is what pushed "Campaign readiness" onto
   two lines and stretched the held-state reason down four. The product
   view keeps its own type. */
.tp-public__hero > p, .tp-public__hero > * > p { max-width: 38rem; color: var(--public-muted); font-size: clamp(1rem, 2vw, 1.2rem); line-height: 1.65; }
.tp-public__actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.4rem; }
.tp-public__action { display: inline-flex; min-height: 2.75rem; align-items: center; justify-content: center; padding: .7rem 1rem; border: 1px solid var(--public-border); border-radius: .65rem; background: var(--public-surface); color: var(--public-text); font-weight: 750; text-decoration: none; cursor: pointer; }
.tp-public__action:hover { border-color: var(--public-primary); }
.tp-public__action--primary { border-color: var(--public-primary); background: var(--public-primary); color: var(--public-surface); }
.tp-public__action--primary:hover { background: var(--public-primary-hover); color: var(--public-surface); }
/* Sections were 72px apart carrying 64px headings, so the gap between two
   subjects was the same size as the heading inside one. Widening the
   rhythm is what separates them; it is the cheapest thing on this page
   that reads as expensive. */
.tp-public__section { padding: clamp(3.5rem, 6.5vw, 7rem) 0; border-top: 1px solid var(--public-border); }
.tp-public__section > h2 { max-width: 20ch; margin: .2rem 0 1rem; font-size: var(--tp-h2); letter-spacing: var(--tp-track); }
.tp-public__section > p { max-width: 48rem; color: var(--public-muted); line-height: 1.65; }
.tp-public__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.tp-public__card { padding: 1.25rem; border: 1px solid var(--public-border); border-radius: .85rem; background: var(--public-surface); }
.tp-public__card h2, .tp-public__card h3 { margin-top: 0; }
.tp-public__card p, .tp-public__card li { color: var(--public-muted); line-height: 1.55; }
.tp-auth { display: grid; width: min(32rem, 100%); margin: 2.5rem auto; padding: clamp(1.25rem, 4vw, 2rem); border: 1px solid var(--public-border); border-radius: 1rem; background: var(--public-surface); box-shadow: 0 1rem 3rem rgb(20 23 34 / .08); }
.tp-auth--wide { width: min(44rem, 100%); }
.tp-auth h1 { margin: .2rem 0 .6rem; font-size: clamp(1.8rem, 5vw, 2.5rem); letter-spacing: var(--tp-track); }
.tp-auth__intro { margin: 0 0 1.4rem; color: var(--public-muted); line-height: 1.55; }
.tp-auth__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; margin-bottom: 1.4rem; padding: .25rem; border-radius: .7rem; background: var(--public-subtle); }
.tp-auth__tabs a { padding: .55rem; border-radius: .5rem; color: var(--public-muted); text-align: center; text-decoration: none; }
.tp-auth__tabs a[aria-current="page"] { background: var(--public-surface); color: var(--public-text); font-weight: 750; box-shadow: 0 .1rem .35rem rgb(20 23 34 / .12); }
.tp-form { display: grid; gap: 1rem; }
.tp-form fieldset { display: grid; gap: 1rem; margin: 0; padding: 1.2rem 0 0; border: 0; border-top: 1px solid var(--public-border); }
.tp-form fieldset:first-of-type { padding-top: 0; border-top: 0; }
.tp-form legend { padding: 0; font-size: 1rem; font-weight: 800; }
.tp-form label { display: grid; gap: .4rem; color: var(--public-muted); font-size: .78rem; font-weight: 700; }
.tp-form input, .tp-form select, .tp-form textarea { width: 100%; min-height: 2.75rem; padding: .7rem .75rem; border: 1px solid var(--public-border); border-radius: .6rem; background: var(--public-bg); color: var(--public-text); }
.tp-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.tp-form__check { grid-template-columns: auto minmax(0, 1fr) !important; align-items: start; font-weight: 500 !important; }
.tp-form__check input { width: auto; min-height: auto; margin-top: .2rem; }
.tp-form small { color: var(--public-muted); font-weight: 450; line-height: 1.45; }
.tp-public__message { margin: 0 0 1rem; padding: .8rem 1rem; border-radius: .7rem; background: var(--public-subtle); color: var(--public-muted); line-height: 1.5; }
.tp-public__message[data-state="error"], .tp-public__message[data-state="invalid"] { background: var(--public-danger-bg); color: var(--public-danger); }
.tp-public__message[data-state="confirmed"] { background: var(--public-success-bg); color: var(--public-success); }
.tp-public__message[data-state="warning"] { background: var(--public-warning-bg); color: var(--public-warning); }
.tp-auth__secret { padding: .8rem; border: 1px solid var(--public-border); border-radius: .6rem; background: var(--public-subtle); font-family: ui-monospace, monospace; font-weight: 750; overflow-wrap: anywhere; text-align: center; }
.tp-legal { width: min(50rem, 100%); margin: 2rem auto 4rem; }
.tp-legal header { padding: 2rem 0; border-bottom: 1px solid var(--public-border); }
.tp-legal h1 { font-size: var(--tp-h2); letter-spacing: var(--tp-track); }
.tp-legal section { padding: 1.25rem 0; border-bottom: 1px solid var(--public-border); }
.tp-legal p, .tp-legal li { color: var(--public-muted); line-height: 1.7; }
/* Answers expand in place, so the list is one column: a two-column grid made
   an opened answer stretch the row and shove its neighbour down the page. */
.tp-guide-lede { max-width: 46rem; margin: 0 0 1.5rem; color: var(--public-muted); line-height: 1.6; }
/* Held to the answers' own reading measure: at full width the summary row's
   hint stranded itself an inch from the right edge, far from its question. */
.tp-guide-list { display: flex; flex-direction: column; max-width: 52rem; }
.tp-guide { border-top: 1px solid var(--public-border); }
.tp-guide:last-child { border-bottom: 1px solid var(--public-border); }
.tp-guide > summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 0; cursor: pointer; list-style: none;
}
.tp-guide > summary::-webkit-details-marker { display: none; }
.tp-guide > summary h3 { margin: 0; font-size: 1.05rem; }
.tp-guide__hint { flex: none; color: var(--public-muted); font-size: .8rem; }
.tp-guide[open] > summary .tp-guide__hint { visibility: hidden; }
.tp-guide > summary:hover h3 { color: var(--public-primary); }
.tp-guide > summary:focus-visible { outline: 2px solid var(--public-focus); outline-offset: 3px; }
.tp-guide__body { max-width: 46rem; padding: 0 0 1.5rem; }
.tp-guide__body p, .tp-guide__body li { color: var(--public-muted); line-height: 1.65; }
.tp-guide__body p { margin: 0 0 .8rem; }
.tp-guide__body ul { margin: 0 0 .8rem; padding-left: 1.1rem; display: grid; gap: .45rem; }
.tp-guide__body strong { color: var(--public-text); font-weight: 600; }
.tp-guide__body > :last-child { margin-bottom: 0; }
#continue .tp-public__action { margin-top: .9rem; }

@media (max-width: 760px) {
  .tp-public__hero, .tp-public__grid, .tp-form__grid { grid-template-columns: 1fr; }
  .tp-public__hero { gap: 1.5rem; }
  .tp-public__hero h1 { max-width: none; }
  .tp-public__footer { align-items: flex-start; flex-direction: column; justify-content: center; padding: 1rem 0; }
  .tp-public__footer nav { flex-wrap: wrap; }
  .tp-auth { margin: 1rem auto 2rem; border-radius: .8rem; box-shadow: none; }
  .tp-public__actions .tp-public__action, .tp-form > .tp-public__action { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* ── Landing truth-tile demo (design language §5.1) ─────────────────────
   The hero demonstrates the product's honesty with its real anatomy: value,
   state, source. The unconfirmed state wears the muted treatment and
   an em dash — never green, never zero. */

.tp-public__demo { display: grid; gap: .65rem; align-content: start; }

.tp-public__demo-toggle { display: inline-flex; gap: .3rem; padding: .25rem; border: 1px solid var(--public-border); border-radius: 10px; background: var(--public-subtle); }
.tp-public__demo-toggle button { border: 0; border-radius: 8px; background: transparent; color: var(--public-muted); font: inherit; font-size: .8rem; font-weight: 650; padding: .4rem .7rem; cursor: pointer; min-height: 38px; }
.tp-public__demo-toggle button.is-on { background: var(--public-surface); color: var(--public-text); box-shadow: 0 1px 2px rgba(16,18,22,.12); }
.tp-public__demo-toggle button:focus-visible { outline: 2px solid var(--public-primary); outline-offset: 1px; }

.tp-public__demo-tile { border: 1px solid var(--public-border); border-radius: 12px; padding: .8rem .95rem; background: var(--public-surface); display: grid; gap: .2rem; }
.tp-public__demo-label { margin: 0; font-size: .68rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--public-muted); }
.tp-public__demo-value { margin: .1rem 0 .15rem; font-size: 1.9rem; font-weight: 760; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.tp-public__demo-state { margin: 0; display: flex; align-items: flex-start; gap: .4rem; font-size: .76rem; font-weight: 700; line-height: 1.45; }
.tp-public__demo-state i { flex: none; width: .5rem; height: .5rem; margin-top: .38rem; border-radius: 50%; background: currentColor; }
.tp-public__demo-state[data-demo-statecls="ok"] { color: var(--public-state-ok, #1f8a53); }
/* Held is the state the page exists to show: a check failed and the send
   stopped. It is deliberately not red — nothing has gone wrong, the product
   is doing its job — but it must not read as "ok" either. */
.tp-public__demo-state[data-demo-statecls="held"] { color: var(--public-state-held, #8a5700); font-weight: 650; }
/* Square marker, not a dot: held is a different kind of state from ok and
   unknown, and shape carries that for anyone who cannot use the colour. */
.tp-public__demo-state[data-demo-statecls="held"] i { border-radius: 1px; }
.tp-public__demo-state[data-demo-statecls="unknown"] { color: var(--public-muted); }
.tp-public__demo-state[data-demo-statecls="unknown"] i { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.tp-public__demo-src { margin: 0; font-size: .7rem; color: var(--public-muted); }
/* Says on the card that these figures are a demonstration. A demo that does
   not declare itself is indistinguishable from a fabricated customer metric. */
.tp-public__demo-notice { margin: 0; font-size: .68rem; font-weight: 500; color: var(--public-muted); }
.tp-public__demo-note { margin: 0; font-size: .76rem; color: var(--public-muted); }

/* ── Pricing emphasis ──────────────────────────────────────────────────── */
.tp-public__price { position: relative; }
.tp-public__price--recommended { border-color: var(--public-primary); }
.tp-public__price-tag { position: absolute; top: -.65rem; left: 1rem; font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: var(--public-primary); color: #fff; border-radius: 999px; padding: .14rem .55rem; }
.tp-public__price-amount { margin: .1rem 0 .3rem; font-size: 1.6rem; font-weight: 780; font-variant-numeric: tabular-nums; }
.tp-public__price-amount small { font-size: .75rem; font-weight: 600; color: var(--public-muted); }

/* ── Landing composition ────────────────────────────────────────────────
   The page had five sections of identical weight: eyebrow, heading, three
   white cards. Nothing led, so nothing was read. These rules give the page
   a rhythm — a tour, a differentiator band, one commercial band, a close —
   without touching the governed copy. */

/* The hero's two columns end at different heights; aligning to the top and
   tightening the trailing space removes the dead band under the fold. */
.tp-public__hero { align-items: start; padding-block-end: clamp(2rem, 4vw, 3.5rem); }

/* 1 · Product tour — each surface leads with the question it answers, which
   is the product's voice rather than a feature label. */
.tp-public__tour-q {
  margin: 0 0 .4rem;
  color: var(--public-primary);
  font-size: .82rem;
  font-weight: 650;
  font-style: italic;
}
.tp-public__grid--tour .tp-public__card { border-block-start: 3px solid var(--public-primary); }

/* 2 · The differentiator gets its own ground so it stops reading as another
   feature row. */
.tp-public__section--feature {
  margin-inline: calc(50% - 50cqw);
  padding-inline: max(1.25rem, calc(50cqw - 34rem));
  background: var(--public-subtle);
  border-top: 0;
}
.tp-public__grid--safety { counter-reset: safety; }
.tp-public__grid--safety .tp-public__card { counter-increment: safety; position: relative; padding-block-start: 2.6rem; }
.tp-public__grid--safety .tp-public__card::before {
  content: counter(safety);
  position: absolute;
  inset-block-start: 1.1rem;
  inset-inline-start: 1.25rem;
  display: grid;
  place-items: center;
  inline-size: 1.6rem;
  block-size: 1.6rem;
  border-radius: 50%;
  background: var(--public-primary);
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
}

/* 3 · Trial and plans are one commercial band, so the trial stops being a
   lone card in a three-column grid. */
.tp-public__section--continued { border-top: 0; padding-block-start: 0; }
.tp-public__trial {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--public-primary);
  border-radius: .85rem;
  background: var(--public-surface);
}
.tp-public__trial h3 { margin: 0 0 .3rem; }
.tp-public__trial p { margin: 0; color: var(--public-muted); max-width: 52ch; }
.tp-public__trial .tp-public__action { flex: 0 0 auto; }

/* 4 · The close states the offer once and keeps Sales reachable without
   giving it equal weight to the primary action. */
.tp-public__section--close > p { max-width: 46ch; }
.tp-public__close-note { margin-block-start: 1rem; color: var(--public-muted); font-size: .88rem; }

@media (max-width: 60rem) {
  .tp-public__section--feature { margin-inline: 0; padding-inline: 0; }
  .tp-public__trial { flex-direction: column; align-items: stretch; }
  .tp-public__trial .tp-public__action { text-align: center; }
}

/* FAQ: a disclosure list, so objections are answerable without leaving the page. */
.tp-public__faq { display: grid; gap: .5rem; margin-top: 1.25rem; }
.tp-public__faq details { border: 1px solid var(--public-border); border-radius: .7rem; background: var(--public-surface); }
.tp-public__faq summary { padding: .85rem 1rem; font-weight: 700; cursor: pointer; list-style: none; min-height: 2.75rem; display: flex; align-items: center; }
.tp-public__faq summary::-webkit-details-marker { display: none; }
.tp-public__faq summary::after { content: "+"; margin-left: auto; color: var(--public-muted); font-weight: 700; }
.tp-public__faq details[open] summary::after { content: "\2212"; }
.tp-public__faq summary:focus-visible { outline: .18rem solid var(--public-focus); outline-offset: -.18rem; border-radius: .7rem; }
.tp-public__faq p { margin: 0; padding: 0 1rem 1rem; color: var(--public-muted); line-height: 1.6; }
/* The delivery-log reasons, quoted verbatim from the product. */
.tp-public__reasons { display: grid; gap: .4rem; margin: 1rem 0 1.25rem; padding: 0; list-style: none; }
.tp-public__reasons li { padding: .6rem .85rem; border-left: 2px solid var(--public-border); color: var(--public-muted); font-size: .92rem; }
/* The proof line under a loop stage. Set apart from the description because
   it is a claim about what the screen demonstrates, not more description. */
.tp-public__proof { margin: .7rem 0 0; padding-top: .7rem; border-top: 1px solid var(--public-border); color: var(--public-text); font-size: .82rem; font-weight: 600; line-height: 1.5; }
/* Four checks, not three plus an orphan. The section reads as a set, and a
   lone card beside empty space read as an afterthought rather than a peer. */
/* Scoped above the mobile breakpoint: the shared `.tp-public__grid` rule
   collapses to one column at <=760px, and an unscoped override here is more
   specific, so it forced two columns onto a 320px screen. */
@media (min-width: 48rem) { .tp-public__grid--safety { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .tp-public__grid--safety { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ── Dark punctuation ────────────────────────────────────────────────────
   Two blocks only, and they are the two that carry the argument: the card
   where the product refuses to send, and the close where it quotes its own
   refusal reasons. Everything between them stays light.

   Rhythm is what makes a page feel deliberate. Nine identically-weighted
   white bands read as a list however good each one is, and a third dark
   band would make this a dark site with light interruptions, which is a
   different design. Two is punctuation; three is a pattern.

   The band restates the public tokens rather than restyling components, so
   anything dropped inside it adapts without a second set of rules. */
.tp-public__band--dark {
  --public-surface: #191d25;
  --public-subtle: #12151b;
  --public-bg: #0e1014;
  --public-text: #f5f6f9;
  --public-muted: #a6b0c0;
  --public-border: #2c333f;
  --public-primary: #8b93ff;
  --public-primary-hover: #a7adff;
  --public-focus: #b2b9ff;
  --public-state-ok: #6ecf9b;
  --public-state-held: #f0bb63;
  background: var(--public-bg);
  color: var(--public-text);
}
.tp-public__band--dark h2, .tp-public__band--dark h3 { color: var(--public-text); }
.tp-public__band--dark .tp-public__action { background: transparent; color: var(--public-text); border-color: var(--public-border); }
.tp-public__band--dark .tp-public__action:hover { border-color: var(--public-primary); }
.tp-public__band--dark .tp-public__action--primary { background: var(--public-primary); border-color: var(--public-primary); color: #12141b; }
.tp-public__band--dark .tp-public__action--primary:hover { background: var(--public-primary-hover); color: #12141b; }

/* The refusal card: dark inside a light hero, so the eye lands on it first. */
.tp-public__demo.tp-public__band--dark { border-color: #2c333f; box-shadow: 0 1.4rem 3rem rgb(8 10 14 / .28); }

/* The close: a full-bleed band, escaping the centred column without a
   wrapper element so the section order in the template is untouched. */
.tp-public__section--close.tp-public__band--dark {
  margin-inline: calc(50% - 50cqw);
  padding-inline: calc(50cqw - 50%);
  padding-block: clamp(3rem, 6vw, 5rem);
  border-top: 0;
}
.tp-public__band--dark .tp-public__reasons li { border-left-color: var(--public-primary); color: var(--public-muted); }

/* ── Rhythm ──────────────────────────────────────────────────────────────
   Sections were separated by an identical hairline at identical padding,
   which is what made nine of them read as one ruled list. The rule now
   marks a change of subject rather than every boundary: consecutive
   commercial bands (trial, pricing) already read as one block, and the two
   dark bands need no rule at all. */
.tp-public__section--commercial + .tp-public__section--commercial { border-top: 0; padding-block-start: 0; }
.tp-public__section--feature { background: var(--public-band, #e7ecf5); margin-inline: calc(50% - 50cqw); padding-inline: calc(50cqw - 50%); border-top: 0; }

/* ── Workflow continuity ─────────────────────────────────────────────────
   Six cards of equal weight read as six features. The stage marker now
   carries the sequence, and a connector runs between cards so the eye is
   told this is one loop rather than a set. Decorative, so it is hidden
   from assistive technology and disappears when the grid stacks. */
.tp-public__grid--tour { position: relative; }
#loop .tp-public__card { position: relative; }
#loop .tp-public__eyebrow { display: inline-flex; align-items: center; gap: .45rem; color: var(--public-primary); }
#loop .tp-public__card::after {
  content: ""; position: absolute; top: 50%; right: -1rem; width: 1rem; height: 1px;
  background: var(--public-border);
}
#loop .tp-public__card:nth-child(3)::after, #loop .tp-public__card:nth-child(6)::after { display: none; }
@media (max-width: 760px) {
  #loop .tp-public__card::after { top: auto; bottom: -1rem; right: 50%; width: 1px; height: 1rem; }
  #loop .tp-public__card:nth-child(3)::after { display: block; }
}

/* ── Evidence framing ────────────────────────────────────────────────────
   When the six product captures land they must read as proof rather than
   as documentation: one frame, one radius, one scale, the caption bound
   underneath, and operational annotations drawn from the product's own
   state words. Defined now so the assets cannot each arrive with their own
   treatment, which is how a screenshot set stops looking deliberate. */
.tp-public__shot { margin: 1rem 0 0; border: 1px solid var(--public-border); border-radius: .7rem; overflow: hidden; background: var(--public-subtle); }
.tp-public__shot img { display: block; width: 100%; height: auto; }
.tp-public__shot-notes { display: flex; flex-wrap: wrap; gap: .35rem; padding: .6rem .7rem; border-top: 1px solid var(--public-border); }
.tp-public__shot-note { font-size: .68rem; font-weight: 650; letter-spacing: .02em; padding: .22em .5em; border-radius: 999px; background: var(--public-surface); color: var(--public-muted); border: 1px solid var(--public-border); }
/* `.tp-public__card p` claims every paragraph inside a card, so the refusal
   card's headline number rendered in muted grey: the one figure the section
   exists for was the quietest thing in it. Matched at equal specificity and
   declared later so it wins without an !important. */
.tp-public__card .tp-public__demo-value { color: var(--public-text); }

/* ── The signature ───────────────────────────────────────────────────────
   The one thing on this page a competitor cannot print honestly: all four
   gates, with three passed and one closed. It is a shape before it is a
   sentence, which is what makes it readable from across a room and what
   makes it the product's visual identity rather than a dashboard widget.

   The mark is a glyph, not a colour, so the state survives greyscale and
   colour blindness; the label repeats it in text for assistive readers. */
.tp-public__gates { display: grid; gap: .3rem; margin: .85rem 0 0; padding: .8rem 0 0; border-top: 1px solid var(--public-border); list-style: none; }
.tp-public__gates li { display: flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 620; color: var(--public-muted); }
.tp-public__gates li span { flex: none; display: grid; place-items: center; width: 1.05rem; height: 1.05rem; border-radius: 50%; font-size: .68rem; font-weight: 800; line-height: 1; }
.tp-public__gates li[data-gate="pass"] span { color: var(--public-state-ok, #1f8a53); box-shadow: inset 0 0 0 1.2px currentColor; }
.tp-public__gates li[data-gate="pass"] span::before { content: "\2713"; }
.tp-public__gates li[data-gate="blocked"] { color: var(--public-text); }
.tp-public__gates li[data-gate="blocked"] span { color: #12141b; background: var(--public-state-held, #8a5700); border-radius: 3px; }
.tp-public__gates li[data-gate="blocked"] span::before { content: "\2715"; }
.tp-public__gates li[data-gate="pending"] span { color: var(--public-muted); box-shadow: inset 0 0 0 1.2px currentColor; }
.tp-public__gates li[data-gate="pending"] span::before { content: "?"; }

/* ── The refusal, choreographed ──────────────────────────────────────────
   ThreadPilot's signature moment is not a gradient. It is the instant the
   product declines to send: four checks resolve, pacing closes, the
   decision reads Held. This is the one place on the page worth spending
   real motion, because the motion IS the product claim.

   The safety rule that shapes every line below: a held send must never be
   rendered as a passing one, not even for a frame. So nothing here morphs
   between states. Each element already holds its truthful held content
   before its animation begins; the animation only governs when that truth
   becomes visible. Revealing a true state progressively is safe.
   Interpolating from a false state to a true one is not, and is why these
   keyframes touch opacity and transform exclusively - never colour,
   never background, never the glyph.

   That property also makes reduced motion correct for free: the global
   reduce rule nulls every animation, and what remains is the finished,
   truthful card with no delay and nothing to wait for.

   One cycle. `is-held` is added once and never removed, so this plays a
   single time and settles. */
@keyframes tp-gate-settle { from { opacity: 0; transform: translateY(.28rem); } to { opacity: 1; transform: none; } }
@keyframes tp-gate-close { 0% { transform: scale(.72); } 55% { transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes tp-decision-land { from { opacity: 0; transform: translateY(.35rem); } to { opacity: 1; transform: none; } }

.tp-showcase-shell--hero.is-held .tp-public__gates li { animation: tp-gate-settle .34s cubic-bezier(.2, .7, .2, 1) both; }
.tp-showcase-shell--hero.is-held .tp-public__gates li:nth-child(1) { animation-delay: 0ms; }
.tp-showcase-shell--hero.is-held .tp-public__gates li:nth-child(2) { animation-delay: 90ms; }
.tp-showcase-shell--hero.is-held .tp-public__gates li:nth-child(3) { animation-delay: 180ms; }
.tp-showcase-shell--hero.is-held .tp-public__gates li:nth-child(4) { animation-delay: 270ms; }
/* The gate that actually closes gets the emphasis. Scale only - the mark
   is already the blocked mark when this starts. */
.tp-showcase-shell--hero.is-held .tp-public__gates li[data-gate="blocked"] span { animation: tp-gate-close .4s cubic-bezier(.2, .7, .2, 1) 300ms both; }
/* The decision lands after the checks have settled, never before. */
.tp-showcase-shell--hero.is-held .tp-public__demo-value { animation: tp-decision-land .42s cubic-bezier(.2, .7, .2, 1) 380ms both; }
.tp-showcase-shell--hero.is-held .tp-public__demo-state { animation: tp-decision-land .42s cubic-bezier(.2, .7, .2, 1) 460ms both; }
.tp-showcase-shell--hero.is-held .tp-public__demo-note { animation: tp-decision-land .42s cubic-bezier(.2, .7, .2, 1) 540ms both; }

/* ── Landing product story ─────────────────────────────────────────────
   Product state is the artwork. The public page uses the same restrained
   surfaces, status vocabulary, and evidence hierarchy as the application,
   composed into one authored showcase rather than a stack of screenshots. */
.tp-story-hero {
  position: relative;
  /* The copy column was .78fr, leaving the headline 452px to hold a
     42-character sentence - the reason it broke over five lines however
     the type was tuned. Near-parity gives the sentence room to break at
     its own clauses and still leaves the product view the larger half. */
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 3.5vw, 3.25rem);
  align-items: center;
  min-height: min(49rem, calc(100vh - 4.5rem));
  padding-block: clamp(3.5rem, 7vw, 6rem);
}
.tp-story-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 calc(50% - 50cqw);
  background:
    linear-gradient(90deg, transparent calc(100% - 1px), rgb(73 56 212 / .08) 0) 0 0 / 4rem 4rem,
    linear-gradient(transparent calc(100% - 1px), rgb(73 56 212 / .07) 0) 0 0 / 4rem 4rem,
    radial-gradient(circle at 67% 42%, rgb(108 92 255 / .18), transparent 35rem);
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 86%, transparent);
}
.tp-story-hero__copy { position: relative; z-index: 1; }
.tp-story-hero__copy > .tp-public__eyebrow { display: flex; align-items: center; gap: .55rem; }
.tp-story-hero__copy > .tp-public__eyebrow::before { content: ""; width: .48rem; height: .48rem; border-radius: 50%; background: #69d7a0; box-shadow: 0 0 0 .25rem rgb(105 215 160 / .12); }
/* Was 99px held to a 10.5ch measure, which broke a 42-character sentence
   over six lines - a wall rather than a headline, and the widest thing on
   the page by a factor of two. A wider measure at a smaller size lets the
   sentence land in three lines and leaves the product view room to be the
   other half of the composition. */
.tp-story-hero h1 {
  max-width: 15ch;
  font-size: var(--tp-display);
  line-height: .96;
  letter-spacing: var(--tp-track);
  text-wrap: balance;
}
.tp-story-hero__lede { max-width: 32rem !important; margin-block: 1.4rem 0; font-size: clamp(1rem, 1.7vw, 1.18rem) !important; }
.tp-story-hero__terms { margin-top: 1.1rem; font-size: .82rem !important; line-height: 1.5 !important; }
.tp-story-live, .tp-showcase-shell__status i, .tp-story-pulse {
  display: inline-block;
  width: .48rem;
  height: .48rem;
  border-radius: 50%;
  background: #69d7a0;
  box-shadow: 0 0 0 .25rem rgb(105 215 160 / .12);
}

.tp-showcase-shell {
  position: relative;
  isolation: isolate;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #303646;
  border-radius: 1.15rem;
  background: #0d1016;
  color: #f7f8fb;
  box-shadow: 0 2rem 5rem rgb(13 16 22 / .24), 0 .4rem 1.4rem rgb(13 16 22 / .16);
}
.tp-showcase-shell::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 1px rgb(255 255 255 / .08), inset 1px 0 rgb(255 255 255 / .025);
}
.tp-showcase-shell--hero { transform: none; transform-origin: center left; }
.tp-showcase-shell__bar {
  display: flex;
  min-height: 2.8rem;
  align-items: center;
  gap: .65rem;
  padding: .55rem .75rem;
  border-bottom: 1px solid #282e3b;
  background: #151922;
  color: #b2bbca;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.tp-showcase-shell__mark { display: grid; width: 1.65rem; height: 1.65rem; place-items: center; border-radius: .45rem; background: #6957f5; color: #fff; font-size: .58rem; font-weight: 850; }
.tp-showcase-shell__status { display: inline-flex; align-items: center; gap: .45rem; margin-left: auto; color: #8f9aad; }
.tp-showcase-shell__status i { width: .38rem; height: .38rem; box-shadow: none; }

.tp-hero-product { --public-state-ok: #73d8a4; --public-state-held: #efbb68; --public-muted: #adb6c8; --public-text: #f4f5ff; --public-border: #394254; display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); min-height: 31rem; }
.tp-hero-product__rail { display: flex; flex-direction: column; gap: .35rem; padding: 1rem .7rem; border-right: 1px solid #252b37; background: #11141b; }
.tp-hero-product__rail span { padding: .55rem .6rem; border-radius: .45rem; color: #a3adbf; font-size: .72rem; font-weight: 650; }
.tp-hero-product__rail .is-current { background: #211e3f; color: #c4beff; }
.tp-hero-product__canvas { min-width: 0; padding: clamp(.8rem, 2vw, 1.25rem); background: radial-gradient(circle at 50% 0, rgb(105 87 245 / .1), transparent 18rem), #0d1016; }
.tp-hero-product__heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.tp-hero-product__heading div { display: grid; gap: .12rem; }
.tp-hero-product__heading small { color: #778196; font-size: .62rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.tp-hero-product__heading strong { font-size: 1rem; }
.tp-state-pill { display: inline-flex; align-items: center; min-height: 1.55rem; padding: .25rem .48rem; border: 1px solid #394254; border-radius: 999px; color: #aab3c3; font-size: .58rem; font-style: normal; font-weight: 750; }
.tp-state-pill--ok { border-color: rgb(105 215 160 / .3); background: rgb(105 215 160 / .08); color: #73d8a4; }
.tp-state-pill--live { border-color: rgb(139 147 255 / .3); background: rgb(139 147 255 / .1); color: #aeb4ff; }
.tp-hero-product__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; }
.tp-hero-product .tp-public__demo { min-width: 0; padding: 0; }
.tp-hero-product .tp-public__demo-toggle { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-color: #29303d; background: #11151d; }
.tp-hero-product .tp-public__demo-toggle button { min-width: 0; min-height: 2.75rem; padding: .35rem .2rem; color: #adb6c8; font-size: .72rem; white-space: nowrap; }
.tp-hero-product .tp-public__demo-toggle button.is-on { background: #202532; color: #fff; box-shadow: none; }
.tp-hero-product .tp-public__demo-tile { border-color: #29303d; background: #151922; }
.tp-hero-product .tp-public__demo-value { color: #fff; font-size: clamp(1.55rem, 3vw, 2.2rem); }
.tp-hero-product .tp-public__demo-note, .tp-hero-product .tp-public__demo-notice, .tp-hero-product .tp-public__demo-src { color: #adb6c8; font-size: .75rem; }
.tp-hero-product .tp-public__gates li { color: #adb6c8; font-size: .8rem; }
/* One decision with an actionable reading; reasoning stays available on request. */
.tp-public__demo-next { padding-block: .75rem; border-bottom: 1px solid var(--public-border); }
.tp-public__demo-next > span { color: var(--public-muted); font-size: .72rem; font-weight: 650; }
.tp-public__demo-next > p { margin: .35rem 0 0; color: var(--public-text); font-size: .95rem; line-height: 1.5; }
.tp-public__demo-reason > summary { min-height: 2.75rem; display: flex; align-items: center; gap: .5rem; cursor: pointer; color: var(--public-muted); font-size: .8rem; }
.tp-public__demo-reason > summary::after { content: "+"; margin-left: auto; }
.tp-public__demo-reason[open] > summary::after { content: "−"; }
.tp-public__demo-reason > summary:focus-visible { outline: 2px solid #aeb4ff; outline-offset: 2px; }
.tp-public__demo-reason[open] { padding-bottom: .65rem; }
.tp-hero-product__stack { display: grid; align-content: start; gap: .8rem; }
.tp-ops-card { display: grid; gap: .65rem; min-width: 0; padding: .8rem; border: 1px solid #29303d; border-radius: .8rem; background: #151922; }
.tp-ops-card > div { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.tp-ops-card small { color: #7d8799; font-size: .6rem; font-style: normal; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.tp-ops-card > strong { display: grid; gap: .2rem; font-size: 1.45rem; }
.tp-ops-card > strong small { letter-spacing: 0; text-transform: none; }
.tp-ops-card > strong em { color: #73d8a4; font-size: .86rem; font-style: normal; }
.tp-ops-card p { display: grid; gap: .15rem; margin: 0; color: #c0c7d3; font-size: .66rem; line-height: 1.35; }
.tp-ops-card p span { color: #747f92; }
.tp-progress { height: .34rem; overflow: hidden; border-radius: 999px; background: #262c38; }
.tp-progress i { position: relative; display: block; width: var(--progress); height: 100%; overflow: hidden; border-radius: inherit; background: #7564ff; }
.tp-story-pulse { animation: tp-status-pulse 2.4s ease-out infinite; }

.tp-proof-strip { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0 1.5rem; border-top: 1px solid var(--public-border); }
.tp-proof-strip > p { margin: 0; color: var(--public-muted); font-size: .75rem; font-weight: 650; }
.tp-proof-strip__items { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .25rem; }
.tp-proof-strip a { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .65rem; border-radius: .45rem; color: var(--public-text); font-size: .7rem; font-weight: 750; text-decoration: none; }
.tp-proof-strip a:hover { background: var(--public-subtle); }
.tp-proof-strip a span { color: var(--public-primary); font-size: .58rem; }

.tp-section-heading { max-width: 54rem; }
.tp-section-heading > h2, .tp-section-heading > div > h2 { margin: .2rem 0 1rem; font-size: var(--tp-h2); line-height: 1.02; letter-spacing: var(--tp-track); text-wrap: balance; }
/* ── Section grammar ─────────────────────────────────────────────────────
   Four consecutive sections opened with the same gesture: eyebrow and
   large heading left, supporting paragraph right, content beneath. Each
   one was well set, and together they read as a list, because a reader
   registers the silhouette of a section before any of its words.

   So the opening gesture now follows what the section is doing rather
   than being the house default:

     --split       the widest gesture. The walkthrough only: it is the
                   flagship demonstration and earns the full-width header.
     --stacked     centred, narrow. Used where the artefact below is the
                   subject and the words are a caption to it.
     --lede-under  left, narrow, lede directly beneath the heading. Used
                   where the argument is verbal and the evidence supports
                   it rather than the other way round.
     (inline)      no header row at all - the heading becomes a column
                   beside the evidence. Owned by the section that uses it.

   Four different silhouettes in the four places that previously shared
   one. */
.tp-section-heading--split { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(16rem, .7fr); gap: 2rem; align-items: end; max-width: none; margin-bottom: 2rem; }
.tp-section-heading--split > p { margin: 0 0 1rem; color: var(--public-muted); line-height: 1.6; }

.tp-section-heading--stacked { display: grid; justify-items: center; max-width: 46rem; margin-inline: auto; margin-bottom: clamp(2rem, 4vw, 3.25rem); text-align: center; }
.tp-section-heading--stacked > h2 { margin-bottom: .75rem; }
.tp-section-heading--stacked > p { max-width: 36rem; margin: 0; color: var(--public-muted); line-height: 1.6; }

.tp-section-heading--lede-under { display: grid; max-width: 38rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.tp-section-heading--lede-under > h2 { margin-bottom: .75rem; }
.tp-section-heading--lede-under > p { margin: 0; color: var(--public-muted); line-height: 1.6; }

.tp-transformation { padding-block: clamp(4rem, 8vw, 7rem); }
.tp-transformation__flow { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(1rem, 3vw, 2.5rem); align-items: center; margin-top: 2.5rem; }
.tp-transformation__before, .tp-transformation__after { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.tp-transformation__before span, .tp-transformation__after span, .tp-transformation__after strong { min-height: 3.4rem; padding: .8rem; border: 1px solid var(--public-border); border-radius: .65rem; background: var(--public-surface); color: var(--public-muted); font-size: .76rem; font-weight: 650; }
.tp-transformation__before span { text-decoration: line-through; text-decoration-color: rgb(180 35 24 / .4); }
.tp-transformation__after { position: relative; padding: 1rem; border: 1px solid rgb(73 56 212 / .45); border-radius: 1rem; background: linear-gradient(145deg, rgb(73 56 212 / .08), transparent), var(--public-surface); }
.tp-transformation__after strong { grid-column: 1 / -1; min-height: auto; border: 0; background: transparent; color: var(--public-text); font-size: 1rem; }
.tp-transformation__after span { color: var(--public-text); text-decoration: none; }
.tp-transformation__trace { display: flex; align-items: center; min-width: 6rem; color: var(--public-primary); }
.tp-transformation__trace i { width: 2.4rem; height: 1px; background: currentColor; }
.tp-transformation__trace b { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: .7rem; background: var(--public-primary); color: #fff; font-size: .68rem; }

/* A single campaign record replaces the old before/after diagram. The real
   state vocabulary does the explaining inside one product object. */
.tp-record-story {
  position: relative;
  isolation: isolate;
  margin-inline: calc(50% - 50cqw);
  padding: clamp(4.5rem, 8vw, 7rem) calc(50cqw - 50%);
  overflow: hidden;
  border-top: 0;
  background:
    radial-gradient(circle at 72% 54%, rgb(118 101 255 / .18), transparent 28rem),
    linear-gradient(145deg, #0b0e14, #11141b 62%, #0c0f15);
}
.tp-record-story::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, transparent calc(100% - 1px), rgb(139 147 255 / .055) 0) 0 0 / 5rem 5rem, linear-gradient(transparent calc(100% - 1px), rgb(139 147 255 / .045) 0) 0 0 / 5rem 5rem; mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); }
.tp-record-story .tp-section-heading { color: var(--public-text); }
.tp-record-story .tp-section-heading--split > p { color: var(--public-muted); }
/* Centred and full width under a centred header. Right-aligning it at 92%
   made sense beneath a left-weighted split header; under a stacked one it
   would read as a misalignment rather than a composition. */
.tp-record-story__stage { position: relative; width: 100%; margin: clamp(2rem, 5vw, 4rem) auto 0; perspective: 90rem; }
.tp-record-story__stage::before { content: ""; position: absolute; inset: 12% 5% -12%; border-radius: 50%; background: rgb(107 88 255 / .2); filter: blur(4rem); opacity: .55; }
.tp-showcase-shell--record { transform: none; transform-origin: right center; box-shadow: 0 3rem 7rem rgb(0 0 0 / .42), 0 .5rem 1.4rem rgb(0 0 0 / .25); }
.tp-record-story__body { position: relative; z-index: 1; min-width: 0; padding: clamp(1.25rem, 3vw, 2rem); background: radial-gradient(circle at 82% 0, rgb(118 101 255 / .13), transparent 22rem), #0d1016; }
.tp-record-story__body > header { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.tp-record-story__body > header p { margin: 0 0 .3rem; color: #8d83ff; font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.tp-record-story__body > header h3 { margin: 0; font-size: var(--tp-h3); letter-spacing: var(--tp-track); }
.tp-record-story__timeline { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5rem; width: 100%; min-width: 0; max-width: 100%; margin: 2rem 0 0; padding: 0; list-style: none; }
.tp-record-story__timeline::before { content: ""; position: absolute; top: 1.15rem; right: 4%; left: 4%; height: 1px; background: #343b49; }
.tp-record-story__timeline li { position: relative; z-index: 1; display: grid; align-content: start; gap: 1rem; min-width: 0; padding: 0 .2rem; }
.tp-record-story__timeline li > span { display: grid; width: 2.3rem; height: 2.3rem; place-items: center; border: 1px solid #3c4556; border-radius: 50%; background: #141820; color: #8792a5; font-size: .62rem; font-weight: 800; }
.tp-record-story__timeline li > div { display: grid; gap: .25rem; min-width: 0; }
.tp-record-story__timeline small { color: #747f92; font-size: .56rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.tp-record-story__timeline strong { color: #f1f3f7; font-size: .78rem; overflow-wrap: anywhere; }
.tp-record-story__timeline [data-tone="ok"] > span { border-color: rgb(112 213 161 / .42); color: #70d5a1; box-shadow: 0 0 0 .28rem rgb(112 213 161 / .05); }
.tp-record-story__timeline [data-tone="live"] > span { border-color: rgb(174 180 255 / .45); color: #aeb4ff; box-shadow: 0 0 0 .28rem rgb(118 101 255 / .08); }
.tp-record-story__timeline [data-tone="held"] > span { border-radius: .65rem; border-color: rgb(239 187 104 / .45); color: #efbb68; }
.tp-record-story__body > footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #2b313d; color: #7e899c; font-size: .68rem; }
.tp-record-story__body > footer strong { color: #c2c7ff; font-size: .72rem; }

[data-tone="ok"] strong, [data-tone="ok"] b { color: #70d5a1; }
[data-tone="held"] strong, [data-tone="held"] b { color: #efbb68; }
[data-tone="live"] strong, [data-tone="live"] b { color: #aeb4ff; }
[data-tone="unknown"] strong, [data-tone="unknown"] b { color: #9aa4b6; }

.tp-safety-story { padding-block: clamp(4rem, 8vw, 7rem); }
.tp-safety-story__layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(18rem, .8fr); gap: 1rem; }
.tp-safety-story__gates { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.tp-safety-story__gates > div { display: flex; align-items: center; gap: .8rem; min-height: 5rem; padding: 1rem; border: 1px solid var(--public-border); border-radius: .8rem; background: var(--public-surface); }
.tp-safety-story__gates > div > span { display: grid; flex: none; width: 1.75rem; height: 1.75rem; place-items: center; border-radius: 50%; }
.tp-safety-story__gates [data-gate="pass"] > span { color: var(--public-success); box-shadow: inset 0 0 0 1.5px currentColor; }
.tp-safety-story__gates [data-gate="pass"] > span::after { content: "✓"; }
.tp-safety-story__gates [data-gate="blocked"] { border-color: rgb(138 87 0 / .35); }
.tp-safety-story__gates [data-gate="blocked"] > span { border-radius: .3rem; background: var(--public-warning); color: #fff; }
.tp-safety-story__gates [data-gate="blocked"] > span::after { content: "×"; }
.tp-safety-story__gates div div { display: grid; gap: .22rem; }
.tp-safety-story__gates small { color: var(--public-muted); }
.tp-safety-story__decision { display: grid; align-content: center; gap: .6rem; padding: 1.4rem; border: 1px solid rgb(138 87 0 / .35); border-radius: .9rem; background: var(--public-warning-bg); }
.tp-safety-story__decision p, .tp-safety-story__decision small { margin: 0; color: var(--public-muted); font-size: .72rem; }
.tp-safety-story__decision strong { color: var(--public-warning); font-size: var(--tp-h3); letter-spacing: var(--tp-track); }
.tp-safety-story__decision > span { color: var(--public-text); font-size: .86rem; font-weight: 700; }
.tp-safety-story__policy { max-width: 62rem !important; margin-top: 1.5rem; font-size: .78rem; }

.tp-audience-story { padding-block: clamp(4rem, 8vw, 7rem); }
/* The inline variant. This section drops the header row entirely: the
   heading becomes the left column and the evidence stacks in the right,
   so the silhouette is two tall columns rather than a banner over a grid.
   It is the section that most needed to stop looking like its neighbours,
   and it is also the one where the pairing reads best - the claim and the
   numbers that support it sit at the same height.

   The intro sticks while the evidence scrolls, so the claim stays with
   the segment the reader is inspecting. */
.tp-audience-story__layout { display: grid; grid-template-columns: minmax(17rem, .78fr) minmax(0, 1.22fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.tp-audience-story__intro { position: sticky; top: 5.25rem; display: grid; align-content: start; gap: .55rem; }
.tp-audience-story__intro > h2 { margin: 0 0 .35rem; font-size: var(--tp-h2); line-height: 1.02; letter-spacing: var(--tp-track); text-wrap: balance; }
.tp-audience-story__intro > p { margin: 0; color: var(--public-muted); line-height: 1.6; }
.tp-audience-story__scope { margin-top: .6rem !important; padding-top: .9rem; border-top: 1px solid var(--public-border); font-size: .82rem; }
.tp-audience-story__evidence { display: grid; gap: 1rem; min-width: 0; }
.tp-audience-meter, .tp-audience-story__legend { padding: 1.25rem; border: 1px solid var(--public-border); border-radius: .9rem; background: var(--public-surface); }
.tp-audience-meter__total { display: grid; gap: .18rem; }
.tp-audience-meter__total small { color: var(--public-muted); font-size: .68rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
/* The evaluated total was set larger than the section heading above it,
   which put the loudest type on the page on a supporting number. It is a
   peer of the heading, not its superior. */
.tp-audience-meter__total strong { font-size: var(--tp-h2); line-height: 1; letter-spacing: var(--tp-track); }
.tp-audience-meter__total span { color: var(--public-muted); font-size: .75rem; }
.tp-audience-meter__bar { display: flex; gap: .18rem; min-height: 2.75rem; margin-top: 1.4rem; align-items: center; }
.tp-audience-meter__bar button { flex: 0 0 calc(var(--slice) - .135rem); min-width: .25rem; height: .7rem; padding: 0; border: 0; border-radius: 999px; background: var(--public-border); cursor: pointer; transition: height .18s ease, opacity .18s ease, box-shadow .18s ease; }
.tp-audience-meter__bar button:hover, .tp-audience-meter__bar button:focus-visible, .tp-audience-meter__bar button.is-active { height: 1.05rem; box-shadow: 0 0 0 .2rem var(--public-surface), 0 0 0 .3rem currentColor; }
.tp-audience-meter__bar:has(button:hover) button:not(:hover), .tp-audience-meter__bar:has(button:focus-visible) button:not(:focus-visible) { opacity: .45; }
.tp-audience-meter__bar [data-tone="ok"] { background: #55bd8a; }
.tp-audience-meter__bar [data-tone="held"] { background: #d99b37; }
.tp-audience-meter__bar [data-tone="muted"] { background: #8b95a7; }
.tp-audience-meter__bar [data-tone="unknown"] { background: #b9bfca; }
.tp-audience-meter__focus { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: center; min-height: 7.2rem; margin-top: .8rem; padding: 1rem; border: 1px solid var(--public-border); border-radius: .8rem; background: var(--public-subtle); }
.tp-audience-meter__focus > span { min-width: 4.5rem; font-size: var(--tp-h3); font-weight: 780; letter-spacing: var(--tp-track); }
.tp-audience-meter__focus > div { display: grid; gap: .25rem; }
.tp-audience-meter__focus strong { font-size: .92rem; }
.tp-audience-meter__focus p { margin: 0; color: var(--public-muted); font-size: .72rem; line-height: 1.45; }
.tp-audience-meter > p { margin: 1rem 0 0; color: var(--public-muted); font-size: .65rem; }
.tp-audience-story__legend { display: grid; gap: 0; padding: 0; overflow: hidden; }
.tp-audience-story__legend > button { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; width: 100%; min-height: 4.2rem; padding: .85rem 1rem; border: 0; border-bottom: 1px solid var(--public-border); background: transparent; color: var(--public-text); font: inherit; text-align: left; cursor: pointer; transition: background-color .18s ease, transform .18s ease; }
.tp-audience-story__legend > button:last-child { border-bottom: 0; }
.tp-audience-story__legend > button:hover, .tp-audience-story__legend > button:focus-visible, .tp-audience-story__legend > button.is-active { background: var(--public-subtle); }
.tp-audience-story__legend > button.is-active { box-shadow: inset .22rem 0 0 var(--public-primary); }
.tp-audience-story__legend i { width: .6rem; height: .6rem; border-radius: 50%; background: var(--public-border); }
.tp-audience-story__legend [data-tone="ok"] i { background: #55bd8a; }
.tp-audience-story__legend [data-tone="held"] i { border-radius: .12rem; background: #d99b37; }
.tp-audience-story__legend [data-tone="muted"] i { background: #8b95a7; }
.tp-audience-story__legend [data-tone="unknown"] i { border: 1px solid #8b95a7; background: transparent; }
.tp-audience-story__legend span { display: grid; gap: .15rem; }
.tp-audience-story__legend small { color: var(--public-muted); }
.tp-audience-story__legend b { font-variant-numeric: tabular-nums; }

.tp-commercial-story { padding-block: clamp(4rem, 8vw, 7rem); }
.tp-commercial-story__trial { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(16rem, .75fr); gap: 2rem; align-items: end; padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid var(--public-primary); border-radius: 1rem; background: linear-gradient(135deg, rgb(73 56 212 / .09), transparent 55%), var(--public-surface); }
.tp-commercial-story__trial h2, .tp-commercial-story__plans h2 { margin: .2rem 0 .65rem; font-size: var(--tp-h2); line-height: 1.02; letter-spacing: var(--tp-track); }
.tp-commercial-story__trial p { max-width: 42rem; margin: 0; color: var(--public-muted); line-height: 1.55; }
.tp-commercial-story__trial > div:last-child { display: grid; gap: .8rem; justify-items: start; }
.tp-commercial-story__bridge { display: grid; grid-template-columns: auto minmax(2rem, 1fr) auto minmax(2rem, 1fr) auto; gap: .7rem; align-items: center; margin: 1.2rem clamp(1rem, 4vw, 2.5rem) 0; color: var(--public-muted); font-size: .68rem; }
.tp-commercial-story__bridge strong { color: var(--public-primary); font-size: .7rem; text-align: center; }
.tp-commercial-story__bridge i { height: 1px; background: linear-gradient(90deg, var(--public-border), var(--public-primary)); }
.tp-commercial-story__plans { padding-top: clamp(2rem, 4vw, 3.5rem); }
.tp-commercial-story__plans .tp-public__grid { margin-top: 1.5rem; }
.tp-commercial-story__plans > p { max-width: 60rem; color: var(--public-muted); font-size: .75rem; line-height: 1.55; }
.tp-commercial-story__plans .tp-public__card { box-shadow: none; }
.tp-commercial-story__plans .tp-public__card p { margin-block: .6rem; }
.tp-commercial-story__plans .tp-public__price--recommended { position: relative; z-index: 1; transform: translateY(-.55rem); background: linear-gradient(155deg, rgb(73 56 212 / .075), transparent 48%), var(--public-surface); box-shadow: 0 1.6rem 4rem rgb(34 25 104 / .12), 0 .35rem 1rem rgb(20 23 34 / .06); }
.tp-commercial-story__plans .tp-public__price--recommended::after { content: ""; position: absolute; inset: .45rem; pointer-events: none; border: 1px solid rgb(255 255 255 / .72); border-radius: .65rem; opacity: .55; }

.tp-faq-story { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(2rem, 6vw, 6rem); padding-block: clamp(4rem, 8vw, 7rem); }
.tp-faq-story h2 { margin: .2rem 0 0; font-size: var(--tp-h2); line-height: 1.02; letter-spacing: var(--tp-track); }
.tp-faq-story .tp-public__faq { margin-top: 0; }

.tp-final-story { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.tp-final-story__copy h2 { margin: .2rem 0 1rem; font-size: var(--tp-h2); line-height: 1.02; letter-spacing: var(--tp-track); }
.tp-final-story__copy > p { color: var(--public-muted); line-height: 1.6; }
.tp-final-story__console { overflow: hidden; border: 1px solid #303744; border-radius: .9rem; background: #11141a; box-shadow: 0 1.5rem 4rem rgb(0 0 0 / .25); }
.tp-final-story__console > div { display: flex; align-items: center; gap: .35rem; min-height: 2.4rem; padding: .55rem .75rem; border-bottom: 1px solid #2b313d; background: #181c24; }
.tp-final-story__console > div span { width: .46rem; height: .46rem; border-radius: 50%; background: #39404d; }
.tp-final-story__console > div b { margin-left: .35rem; color: #aab3c3; font-size: .62rem; }
.tp-final-story__console .tp-public__reasons { margin: 0; padding: .6rem; }
.tp-final-story__console .tp-public__reasons li { display: flex; gap: .65rem; padding: .65rem .7rem; border: 0; border-bottom: 1px solid #252b35; color: #9ba5b5; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .66rem; }
.tp-final-story__console .tp-public__reasons li:last-child { border-bottom: 0; }
.tp-final-story__console .tp-public__reasons i { flex: none; width: .45rem; height: .45rem; margin-top: .22rem; border-radius: .1rem; background: #efbb68; }

/* ── Campaign scroll story ─────────────────────────────────────────────
   Native scroll drives which already-rendered example panel is emphasized.
   There is no wheel interception and no scroll-position mutation. */
.tp-campaign-scroll { overflow: clip; padding-block: clamp(4rem, 8vw, 7rem); }
.tp-campaign-scroll__layout { display: grid; grid-template-columns: minmax(19rem, .72fr) minmax(0, 1.28fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.tp-campaign-scroll__narrative { min-width: 0; }
/* Inactive steps sat at .3 opacity, which on a light ground rendered live
   headings as grey-on-grey and read as a loading failure rather than as
   de-emphasis. The floor is now .58 - clearly secondary, still plainly
   text. The scale() is gone with it: transforming type mid-transition
   softens the glyphs for no benefit, and the opacity already carries the
   state change.

   46vh per step across seven steps cost over three screens of scroll for
   one section. 38vh keeps each state legible without making the
   walkthrough the length of the rest of the page. */
.tp-campaign-step { display: flex; min-height: 0; padding-block: .35rem; align-items: center; opacity: 1; transition: opacity .22s ease; }
.tp-campaign-step.is-past { opacity: 1; }
.tp-campaign-step.is-future { opacity: 1; }
.tp-campaign-step.is-active { opacity: 1; }
.tp-campaign-step > button { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .9rem; width: 100%; align-items: start; padding: 1.1rem; border: 1px solid transparent; border-radius: .9rem; background: transparent; color: var(--public-text); text-align: left; cursor: pointer; transition: transform .24s ease, border-color .24s ease, background-color .24s ease, box-shadow .24s ease; }
.tp-campaign-step > button:hover, .tp-campaign-step.is-active > button { border-color: var(--public-border); background: var(--public-surface); box-shadow: 0 .8rem 2rem rgb(20 23 34 / .06); transform: translateY(-.15rem); }
.tp-campaign-step__number { display: grid; width: 2.15rem; height: 2.15rem; place-items: center; border: 1px solid var(--public-border); border-radius: 50%; color: var(--public-muted); font-size: .62rem; font-weight: 800; transition: border-color .24s ease, background-color .24s ease, color .24s ease; }
.tp-campaign-step.is-active .tp-campaign-step__number { border-color: var(--public-primary); background: var(--public-primary); color: #fff; }
.tp-campaign-step.is-past .tp-campaign-step__number { border-color: rgb(21 115 71 / .35); background: var(--public-success-bg); color: var(--public-success); }
.tp-campaign-step__copy { display: grid; gap: .42rem; min-width: 0; }
.tp-campaign-step__copy small { color: var(--public-primary); font-size: .65rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.tp-campaign-step__copy strong { font-size: clamp(1.2rem, 1.9vw, 1.55rem); line-height: 1.15; letter-spacing: var(--tp-track); }
.tp-campaign-step__copy em { color: var(--public-muted); font-size: .78rem; font-style: normal; line-height: 1.55; }
.tp-campaign-step .tp-state-pill { margin-top: .1rem; background: var(--public-subtle); }
.tp-state-pill[data-tone="ok"] { border-color: rgb(21 115 71 / .35); background: var(--public-success-bg); color: var(--public-success); }
.tp-state-pill[data-tone="live"] { border-color: rgb(73 56 212 / .3); background: rgb(73 56 212 / .09); color: var(--public-primary); }
.tp-state-pill[data-tone="held"] { border-color: rgb(138 87 0 / .35); background: var(--public-warning-bg); color: var(--public-warning); }
.tp-state-pill[data-tone="unknown"] { color: var(--public-muted); }
.tp-campaign-scroll__visual { position: sticky; top: 5.25rem; min-width: 0; padding-block: 2rem; perspective: 100rem; }
.tp-campaign-scroll__visual::before { content: ""; position: absolute; inset: 12% -8% 2%; border-radius: 50%; background: rgb(102 84 244 / .15); filter: blur(3.8rem); opacity: .65; }
.tp-showcase-shell--campaign { min-height: min(39rem, calc(100vh - 7.5rem)); transform: none; transform-origin: right center; box-shadow: 0 3rem 7rem rgb(13 16 22 / .3), 0 .5rem 1.5rem rgb(13 16 22 / .14); }
/* ── The campaign as one object ──────────────────────────────────────────
   The walkthrough used to be seven panels swapped by display:none. Every
   advance therefore destroyed and rebuilt the header, the progress bar and
   the footer along with the readings - the frame flickered and the layout
   reflowed, which is what made it read as a slideshow of screenshots
   rather than as one campaign changing state.

   Now the frame is persistent. The rail and the footer live on the object,
   the panels share a single grid cell and cross-fade in place, so nothing
   outside the readings ever moves. The rail advances as a continuous fill
   rather than seven discrete markers, because the campaign advances
   continuously.

   What deliberately does NOT animate is the numbers themselves. Counting a
   reading from 3 up to 1,204 would render intermediate figures the product
   never recorded. Readings replace; only their container moves. */
.tp-campaign-object { display: grid; align-content: start; min-height: 34rem; padding: clamp(1.15rem, 3vw, 2rem); background: radial-gradient(circle at 80% 0, rgb(117 100 255 / .13), transparent 20rem), #0d1016; color: #f4f6fa; }
.tp-campaign-rail { position: relative; height: .2rem; margin-bottom: 1.35rem; border-radius: 999px; background: #262c38; overflow: hidden; }
.tp-campaign-rail > i { position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: scaleX(var(--advance, .1428)); transform-origin: left center; border-radius: 999px; background: linear-gradient(90deg, #6353ff, #9b90ff); box-shadow: 0 0 .8rem rgb(118 101 255 / .45); transition: transform var(--tp-commit) var(--tp-ease); }
.tp-campaign-object__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.15rem; color: #737e91; font-size: .6rem; }
.tp-campaign-object__foot p { margin: 0; text-align: right; }
/* Unenhanced the stages stack, so a single counter cannot describe them. */
.tp-campaign-object:not(.is-live) .tp-campaign-object__foot > span { visibility: hidden; }
.tp-campaign-panel { display: grid; align-content: start; color: #f4f6fa; }
/* One cell. visibility (not display) keeps the panel out of the a11y tree
   while remaining transitionable, and stops the frame resizing per stage. */
.tp-campaign-panels.is-enhanced { display: grid; }
.tp-campaign-panels.is-enhanced > .tp-campaign-panel { grid-area: 1 / 1; }
.tp-campaign-panels.is-enhanced > .tp-campaign-panel:not(.is-active) { opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility 0s linear .18s; }
.tp-campaign-panels.is-enhanced > .tp-campaign-panel.is-active { opacity: 1; visibility: visible; animation: tp-campaign-recompose .3s cubic-bezier(.2, .7, .2, 1) both; }
.tp-campaign-panel > header { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.tp-campaign-panel > header p { margin: 0 0 .35rem; color: #8d83ff; font-size: .63rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.tp-campaign-panel > header h3 { margin: 0; font-size: var(--tp-h3); letter-spacing: var(--tp-track); }
.tp-campaign-panel .tp-state-pill[data-tone="ok"] { border-color: rgb(112 213 161 / .3); background: rgb(112 213 161 / .08); color: #70d5a1; }
.tp-campaign-panel .tp-state-pill[data-tone="live"] { border-color: rgb(174 180 255 / .3); background: rgb(174 180 255 / .09); color: #aeb4ff; }
.tp-campaign-panel .tp-state-pill[data-tone="held"] { border-color: rgb(239 187 104 / .3); background: rgb(239 187 104 / .08); color: #efbb68; }
.tp-campaign-panel__body { display: grid; grid-template-columns: minmax(12rem, .9fr) minmax(0, 1.1fr); gap: .85rem; margin-top: 1.25rem; }
.tp-campaign-panel__primary, .tp-campaign-panel__facts { overflow: hidden; border: 1px solid #2a303d; border-radius: .85rem; background: #151922; }
.tp-campaign-panel__primary { position: relative; display: grid; align-content: center; min-height: 18rem; padding: 1.35rem; }
.tp-campaign-panel__primary::after { content: ""; position: absolute; right: -2.8rem; bottom: -3.5rem; width: 11rem; height: 11rem; border: 1px solid rgb(118 101 255 / .18); border-radius: 50%; box-shadow: 0 0 0 2.2rem rgb(118 101 255 / .035), 0 0 0 4.4rem rgb(118 101 255 / .018); }
.tp-campaign-panel__primary small { position: relative; z-index: 1; color: #7c8799; font-size: .62rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.tp-campaign-panel__primary strong { position: relative; z-index: 1; margin-top: .55rem; font-size: var(--tp-h3); line-height: 1; letter-spacing: var(--tp-track); overflow-wrap: anywhere; }
.tp-campaign-panel__primary span { position: relative; z-index: 1; max-width: 16rem; margin-top: .65rem; color: #8b95a7; font-size: .72rem; line-height: 1.45; }
.tp-campaign-panel__facts { display: grid; }
.tp-campaign-panel__facts > div { display: grid; align-content: center; gap: .45rem; min-height: 6rem; padding: 1rem; border-bottom: 1px solid #2a303d; }
.tp-campaign-panel__facts > div:last-child { border-bottom: 0; }
.tp-campaign-panel__facts span { color: #7d8799; font-size: .62rem; font-weight: 700; }
.tp-campaign-panel__facts strong { font-size: 1rem; }
.tp-campaign-navigator { display: none; grid-template-columns: auto minmax(0, 1fr) auto; gap: .7rem; align-items: center; margin-top: .8rem; }
.tp-campaign-navigator > button { min-height: 2.75rem; padding: .55rem .8rem; border: 1px solid var(--public-border); border-radius: .65rem; background: var(--public-surface); color: var(--public-text); font: inherit; font-size: .7rem; font-weight: 750; cursor: pointer; }
.tp-campaign-navigator > button:disabled { cursor: default; opacity: .38; }
.tp-campaign-navigator__status { display: grid; min-width: 0; justify-items: center; gap: .2rem; }
.tp-campaign-navigator__status > strong { color: var(--public-primary); font-size: .67rem; letter-spacing: .06em; }
.tp-campaign-navigator__status > span { max-width: 100%; overflow: hidden; color: var(--public-text); font-size: .72rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.tp-campaign-navigator__status > div { display: flex; gap: .32rem; margin-top: .2rem; }
.tp-campaign-navigator__status button { width: .62rem; height: .62rem; padding: 0; border: 1px solid #8c94a3; border-radius: 50%; background: transparent; cursor: pointer; }
.tp-campaign-navigator__status button[aria-pressed="true"] { border-color: var(--public-primary); background: var(--public-primary); box-shadow: 0 0 0 .18rem rgb(73 56 212 / .12); }

/* Reveal choreography is opt-in after the observer exists. Without script,
   or with reduced motion, the server-rendered page remains fully visible. */
.tp-public__action { transition: border-color .18s ease, background-color .18s ease, color .18s ease, transform .18s ease; }
.tp-public__action:active { transform: translateY(.08rem) scale(.99); }
.tp-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.tp-showcase-shell--hero.is-held { box-shadow: 0 2.4rem 6rem rgb(42 30 4 / .2), 0 .45rem 1.4rem rgb(13 16 22 / .16); }
.tp-showcase-shell--hero.is-held .tp-public__demo-tile { box-shadow: inset 0 0 0 1px rgb(239 187 104 / .18); }

@keyframes tp-status-pulse { 0% { box-shadow: 0 0 0 0 rgb(105 215 160 / .34); } 70%, 100% { box-shadow: 0 0 0 .55rem transparent; } }
@keyframes tp-campaign-recompose { from { opacity: .25; transform: translateY(calc(var(--dir, 1) * .4rem)); } to { opacity: 1; transform: none; } }

@media (max-width: 64rem) {
  .tp-story-hero { grid-template-columns: minmax(0, .68fr) minmax(0, 1.32fr); gap: 1.5rem; }
  .tp-story-hero h1 { font-size: clamp(2.6rem, 5.6vw, 4rem); }
  .tp-hero-product { grid-template-columns: 5.5rem minmax(0, 1fr); }
  .tp-hero-product__rail { padding-inline: .4rem; }
  .tp-hero-product__rail span { padding-inline: .4rem; font-size: .58rem; }
  .tp-hero-product__grid { grid-template-columns: 1fr; }
  .tp-hero-product__stack { grid-template-columns: 1fr 1fr; }
  .tp-record-story__stage { width: 100%; }
  .tp-showcase-shell--record { transform: none; }
  .tp-campaign-scroll__layout { grid-template-columns: 1fr; }
  .tp-campaign-scroll__visual { display: block; position: static; grid-row: 1; padding-block: 1rem 0; }
  .tp-campaign-scroll__narrative { grid-row: 2; margin-top: 1rem; }
  .tp-campaign-scroll__narrative { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  .tp-campaign-step, .tp-campaign-step.is-past, .tp-campaign-step.is-future { display: block; min-height: 0; opacity: 1; transform: none; }
  .tp-campaign-step > button { height: 100%; border-color: var(--public-border); background: var(--public-surface); }
  .tp-campaign-step__copy strong { font-size: 1.1rem; }
  .tp-showcase-shell--campaign { min-height: 0; transform: none; }
  .tp-campaign-panels, .tp-campaign-panel { min-height: 30rem; }
  .tp-campaign-navigator { display: grid; }
}

@media (max-width: 48rem) {
  .tp-story-hero { grid-template-columns: 1fr; min-height: auto; }
  .tp-story-hero h1 { max-width: 14ch; font-size: clamp(2.4rem, 6.4vw, 3.4rem); }
  .tp-showcase-shell--hero { transform: none; }
  /* Mobile is already a long, stacked product story. Keep every section
     immediately present instead of allowing viewport reveal choreography to
     leave blank bands after anchor jumps or fast touch scrolling. */
  .tp-proof-strip { align-items: flex-start; flex-direction: column; }
  .tp-proof-strip__items { justify-content: flex-start; }
  .tp-record-story { padding-block: 4rem; }
  .tp-record-story .tp-section-heading--split { margin-bottom: 1.5rem; }
  .tp-record-story__stage { margin-top: 1.5rem; }
  .tp-record-story__timeline { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 8.75rem; overflow-x: auto; padding: .2rem 0 .65rem; scroll-snap-type: x proximity; scrollbar-width: thin; }
  .tp-record-story__timeline::before { display: none; }
  .tp-record-story__timeline li { min-height: 7rem; padding: .75rem; border: 1px solid #2c3340; border-radius: .75rem; background: #12161d; scroll-snap-align: start; }
  .tp-record-story__timeline li > span { width: 2rem; height: 2rem; }
  .tp-record-story__body > footer { align-items: flex-start; flex-direction: column; }
  .tp-commercial-story__plans .tp-public__price--recommended { transform: none; }
  .tp-section-heading--split, .tp-transformation__flow, .tp-safety-story__layout, .tp-audience-story__layout, .tp-commercial-story__trial, .tp-faq-story, .tp-final-story { grid-template-columns: 1fr; }
  .tp-audience-story__intro { position: static; }
  .tp-transformation__trace { flex-direction: column; min-height: 5rem; justify-content: center; }
  .tp-transformation__trace i { width: 1px; height: 1.3rem; }
  .tp-campaign-scroll__narrative { grid-template-columns: 1fr; }
  /* ── The walkthrough, once the steps are one column ────────────────────────────────────
     The object rendered first and then scrolled away, so by the time the
     seven steps arrived there was nothing left on screen for them to
     drive. A phone got a tap-through carousel while the desktop got the
     whole narrative.

     Pinning it was the wrong repair. On desktop the frame and the steps are
     two grid columns, so pinning one lets the other move past it. Here they
     are two rows of the same grid, and a pinned row 1 is simply parked on top
     of row 2: the steps slid underneath it and were cut in half, and the
     navigator sat across the card below it. Measured on the shipped page,
     119px of the frame covered the active step at 390px and 169px at 320px.

     Nothing is pinned here. The frame and its navigator scroll as one block,
     which is enough on its own -- the controls sit directly under the readings
     they change, so all seven stages can be walked without scrolling at all.
     The steps below are a jump list, and choosing from it brings the frame
     back into view (public_landing_threadkit.js) rather than updating a panel
     the reader cannot see. */
  .tp-campaign-scroll__visual { position: static; padding-block: .5rem 0; }
  .tp-campaign-scroll__narrative { margin-top: 1.25rem; }
  .tp-campaign-panel__body { grid-template-columns: 1fr; gap: .6rem; margin-top: .9rem; }
  .tp-campaign-panel__primary { min-height: 0; padding: .95rem; }
  .tp-campaign-panel__primary::after { display: none; }
  .tp-campaign-panel__primary span { display: none; }
  .tp-campaign-panel__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tp-campaign-panel__facts > div { min-height: 0; padding: .6rem .55rem; border-bottom: 0; border-right: 1px solid #2a303d; }
  .tp-campaign-panel__facts > div:last-child { border-right: 0; }
  .tp-campaign-panel__facts strong { font-size: .82rem; }
  /* The tablet block floors the panel at 30rem, which once the steps are one column padded a
     223px stage out to 480px and ate the room the steps needed. Every
     stage measures the same 223px here, so a 15rem floor keeps the frame
     from resizing between them with headroom for a value that wraps. */
  .tp-campaign-object { min-height: 0; }
  .tp-campaign-panels, .tp-campaign-panel { min-height: 15rem; }
  .tp-campaign-step > button { min-height: 4.25rem; height: auto; padding: .75rem; }
  .tp-campaign-step__copy strong { font-size: 1rem; }
  .tp-campaign-step .tp-state-pill { align-self: center; }
  .tp-commercial-story__bridge { grid-template-columns: auto 1fr auto; }
  .tp-commercial-story__bridge i:first-of-type, .tp-commercial-story__bridge span:last-child { display: none; }
}

@media (max-width: 34rem) {
  .tp-story-hero { padding-top: 2.5rem; }
  /* 15vw put a 58.5px headline on a 390px screen over five lines, a
     third of the viewport before any product was shown. */
  .tp-story-hero h1 { font-size: clamp(2.2rem, 10.4vw, 2.9rem); }
  .tp-hero-product { grid-template-columns: 1fr; }
  .tp-hero-product__rail { display: none; }
  .tp-hero-product__canvas { padding: .75rem; }
  .tp-hero-product__heading { align-items: start; }
  .tp-hero-product__stack { grid-template-columns: 1fr; }
  .tp-hero-product .tp-public__demo-toggle { grid-template-columns: 1fr 1fr; }
  .tp-proof-strip__items { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .tp-proof-strip a { border: 1px solid var(--public-border); }
  .tp-transformation__before, .tp-transformation__after, .tp-safety-story__gates { grid-template-columns: 1fr; }
  .tp-final-story__console .tp-public__reasons li { font-size: .61rem; }
  .tp-campaign-step > button { grid-template-columns: auto minmax(0, 1fr); }
  .tp-campaign-step > button .tp-state-pill { grid-column: 2; justify-self: start; }

  /* Scroll still drives the state here, and the tap controls stay for anyone
     who prefers them — but it no longer does so by giving every step a 34vh
     band to scroll through. That belonged to the earlier tall-band layout;
     these steps are a compact card list now, and the wider breakpoint zeroes
     the band for past and future steps precisely because of it. It never
     zeroed the active one, so exactly one card in the list carried a 287px
     slot around a 169px button and opened a 137px hole beneath itself that
     moved as the reader scrolled. The list keeps one rhythm instead. */
  /* One declaration, not two. This rule was written twice in the same
     media query with opposing flex-direction; only the display:none on the
     note survived the collision, so it is folded in here. */
  .tp-campaign-object__foot { align-items: flex-start; flex-direction: column; }
  .tp-campaign-object__foot p { display: none; text-align: left; }
  .tp-campaign-navigator { grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem; }
  .tp-campaign-navigator > button { overflow: hidden; padding-inline: .4rem; font-size: 0; }
  .tp-campaign-navigator > button::before { font-size: 1rem; }
  .tp-campaign-navigator > button[data-campaign-previous]::before { content: "←"; }
  .tp-campaign-navigator > button[data-campaign-next]::before { content: "→"; }
}

@media (prefers-reduced-motion: reduce) {
  .tp-showcase-shell--record, .tp-showcase-shell--campaign { transform: none; }
  .tp-campaign-step, .tp-campaign-step.is-past, .tp-campaign-step.is-future { opacity: 1; transform: none; }
  .tp-campaign-panels.is-enhanced .tp-campaign-panel.is-active { animation: none; }
  .tp-audience-meter__bar button, .tp-audience-story__legend > button { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   THE MOTION CONSTITUTION

   Motion is how this product shows its reasoning. Nothing moves that is not thinking.

   An animation ships only if it serves one of four purposes:

     1. State change   — something became true that was not true before.
     2. Cause and effect — two things moved and the order is the argument.
     3. Continuity     — the frame persists while its contents change, so the
                         reader knows they are watching one object.
     4. Attention, once — a one-shot reveal. Never on re-entry.

   Explicitly prohibited, because each of them performs activity this product
   cannot evidence, on the page whose whole claim is that it refuses to:

     · ambient background loops, moving grids, drifting glows
     · "breathing" product mockups
     · counters that increment on their own (fabricated telemetry)
     · decorative parallax
     · camera pans, zooms and crossfades between sections
     · a second spring or overshoot beyond the one gate-close exception
     · looping product films
     · decorative cursor effects beyond the hero's measuring rules
     · loading skeletons, on a document that loads nothing

   Reduced motion is not a degraded path. Every sequence's final frame is a
   complete, truthful page, and reduced motion renders that frame directly.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  /* One curve. It commits almost immediately and spends the rest of its
     duration settling, which is why the page reads as decided rather than
     as animated. Do not introduce a second general easing curve. */
  --tp-ease: cubic-bezier(.2, .7, .2, 1);
  --tp-tap: 120ms;      /* pressed feedback; must feel instant */
  --tp-hover: 180ms;    /* hover and focus affordances */
  --tp-state: 340ms;    /* a reading changes */
  --tp-commit: 440ms;   /* a decision lands, progress advances */
  --tp-reveal: 620ms;   /* section entrance, once per element */
  --tp-stagger: 90ms;   /* gap between siblings in a sequence */
}

/* ── Phase B: the operator's day ─────────────────────────────────────────── */
.tp-operator-day__moments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
.tp-operator-day__moment { display: flex; flex-direction: column; gap: .55rem; padding: 1.35rem; border: 1px solid var(--public-border); border-radius: .9rem; background: var(--public-surface); }
.tp-operator-day__moment h3 { margin: 0; font-size: 1.08rem; font-weight: 700; line-height: 1.3; letter-spacing: -.008em; text-wrap: balance; }
.tp-operator-day__gap { margin: 0; color: var(--public-muted); font-size: .92rem; line-height: 1.6; }
.tp-operator-day__answer { display: flex; align-items: flex-start; gap: .55rem; margin: auto 0 0; padding-top: .85rem; border-top: 1px solid var(--public-border); color: var(--public-text); font-size: .86rem; font-weight: 600; line-height: 1.5; }
.tp-operator-day__answer > i { flex: none; width: .5rem; height: .5rem; margin-top: .4rem; border-radius: 50%; background: var(--public-primary); }

/* ── Phase C: who this is for ────────────────────────────────────────────── */
.tp-audience-fit__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
.tp-audience-fit__card { display: flex; flex-direction: column; gap: .5rem; padding: 1.25rem; border: 1px solid var(--public-border); border-radius: .9rem; background: var(--public-surface); }
.tp-audience-fit__business { margin: 0; color: var(--public-muted); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.tp-audience-fit__situation { margin: 0; font-size: 1.02rem; font-weight: 700; line-height: 1.3; letter-spacing: -.006em; }
.tp-audience-fit__decision { margin: 0; color: var(--public-text); font-size: .95rem; font-style: italic; line-height: 1.5; }
.tp-audience-fit__support { display: flex; align-items: flex-start; gap: .5rem; margin: auto 0 0; padding-top: .8rem; border-top: 1px solid var(--public-border); color: var(--public-muted); font-size: .82rem; line-height: 1.5; }
.tp-audience-fit__support > i { flex: none; width: .5rem; height: .5rem; margin-top: .35rem; border-radius: 50%; background: var(--public-success); }

/* ── Phase C: setup and the loop, rendered from the evidence model ───────── */
.tp-setup-loop__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 2rem 0 0; padding: 0; border: 1px solid var(--public-border); border-radius: .9rem; background: var(--public-border); list-style: none; overflow: hidden; }
.tp-setup-loop__steps > li { display: flex; flex-direction: column; gap: .4rem; padding: 1.25rem; background: var(--public-surface); }
.tp-setup-loop__steps > li[data-setup-phase="operating"] { background: var(--public-subtle); }
.tp-setup-loop__stage { margin: 0; color: var(--public-primary); font-size: .68rem; font-weight: 800; letter-spacing: .1em; font-variant-numeric: tabular-nums; text-transform: uppercase; }
.tp-setup-loop__steps h3 { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.3; }
.tp-setup-loop__body { margin: 0; color: var(--public-muted); font-size: .86rem; line-height: 1.55; }
.tp-setup-loop__proof { margin: .3rem 0 0; padding-left: .7rem; border-left: 2px solid var(--public-border); color: var(--public-muted); font-size: .78rem; font-style: italic; line-height: 1.5; }
.tp-setup-loop__help { max-width: 62ch; margin: 1.25rem 0 0; color: var(--public-muted); font-size: .9rem; line-height: 1.6; }

/* ── Phase C: the commercial answers ─────────────────────────────────────── */
.tp-commercial-story__answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.75rem 0 1.25rem; }
.tp-commercial-story__answers > div { padding: 1.1rem 1.15rem; border: 1px solid var(--public-border); border-radius: .8rem; background: var(--public-surface); }
.tp-commercial-story__answers dt { margin: 0 0 .4rem; font-size: .92rem; font-weight: 700; }
.tp-commercial-story__answers dd { margin: 0; color: var(--public-muted); font-size: .88rem; line-height: 1.6; }

/* ── The legend that used to pretend to be navigation ────────────────────── */
.tp-proof-strip__item { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .65rem; color: var(--public-text); font-size: .7rem; font-weight: 750; }
.tp-proof-strip__item > span { color: var(--public-primary); font-size: .58rem; font-variant-numeric: tabular-nums; }

/* ── Phase E: three eyebrow ranks, so the page has visible chapters ──────── */
.tp-public__eyebrow--act { color: var(--public-primary); }

/* ── Phase E: numerals that do not reflow mid-transition ─────────────────── */
[data-campaign-counter], [data-campaign-position], [data-reachability-value],
.tp-public__demo-value, .tp-campaign-panel__primary strong, .tp-audience-meter__total strong,
.tp-audience-story__legend > button b { font-variant-numeric: tabular-nums; }

/* ── Phase 4: interaction language ───────────────────────────────────────── */
/* Instrument surfaces. They do not float toward the cursor: no lift, no
   shadow bloom. Border and ground only. */
.tp-audience-meter__bar button:active,
.tp-audience-story__legend > button:active,
.tp-campaign-navigator > button:active:not(:disabled),
.tp-campaign-step > button:active { transform: translateY(.08rem) scale(.995); }
.tp-audience-story__legend > button:hover { background-color: var(--public-subtle); }
.tp-campaign-step > button:hover { border-color: var(--public-border); background-color: var(--public-subtle); }
/* A disabled control must look unavailable before it is clicked. */
.tp-campaign-navigator > button:disabled { opacity: .4; cursor: not-allowed; }
.tp-public__skip { transition: transform var(--tp-tap) var(--tp-ease); }
.tp-public__skip:focus { transform: translateY(0); }
.tp-public__faq summary { cursor: pointer; }
.tp-public__faq summary::marker { color: var(--public-primary); }

/* ── Phase 3: motion applied to the four sections that had none ──────────── */

/* 1. The operating record. The section titled "every state" was the one
      place nothing changed state. One directional pass, then it settles. */
@keyframes tp-record-advance { from { opacity: 0; transform: translateY(.4rem); } to { opacity: 1; transform: none; } }

/* 2. The safety gates. The page's strongest argument was animated in the
      hero and frozen in its own section. Same choreography, same keyframes:
      the passing gates settle, the blocked gate closes with the one
      permitted overshoot, and the decision lands after it -- because the
      gate is the reason for the decision, and the order is the argument. */

/* 3. Reachability, resolving. The bar arrived fully drawn, which reported a
      classification instead of showing one being decided. */
@keyframes tp-slice-resolve { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* 4. The closing argument reads like what it is: a log. One line at a time,
      already rendered in the document -- no typing, no character
      simulation, no paraphrase of a source-bound string. */


/* ── Phase 5: mobile keeps the argument, not just the features ───────────── */
@media (max-width: 68rem) {
  .tp-operator-day__moments { grid-template-columns: 1fr; }
  .tp-audience-fit__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tp-setup-loop__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 48rem) {
  /* The walkthrough's explanation was deleted on tablets and phones, which
     removed the teaching copy from the devices most visitors arrive on.
     Clamped to two lines on the active step instead of destroyed. */
  .tp-campaign-step__copy em { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
  .tp-campaign-step:not(.is-active) .tp-campaign-step__copy em { display: none; }
  .tp-campaign-step > button { min-height: 5.25rem; }
  /* Nothing is pinned at this width any more, so there is no sticky header to
     clear -- the frame scrolls with the section it belongs to. */
  /* Section reveals stay disabled here. An earlier fix in this file
     documents why: viewport choreography left blank bands after anchor
     jumps and fast touch scrolling. A 300ms fade is not worth
     re-introducing that. The state animations below still run, because
     each is a short one-shot on a small element that settles on its own. */
  .tp-commercial-story__answers { grid-template-columns: 1fr; }
}
@media (max-width: 34rem) {
  .tp-audience-fit__grid, .tp-setup-loop__steps { grid-template-columns: 1fr; }
  /* Five objects competing inside a frame that is itself an object. */
  .tp-hero-product__stack .tp-ops-card:not(.tp-ops-card--dispatch) { display: none; }
}

/* The horizontal timeline on a phone has more to the right and said so with
   nothing at all. A fade is an affordance; an arrow is a control. */
@media (max-width: 48rem) {
  .tp-record-story__stage { position: relative; }
  .tp-record-story__stage::after { content: ""; position: absolute; z-index: 2; top: 0; right: 0; bottom: 0; width: 2.5rem; background: linear-gradient(90deg, transparent, var(--public-bg)); pointer-events: none; }
}

/* ── Reduced motion: the final frame, rendered directly ──────────────────── */
@media (prefers-reduced-motion: reduce) {
  .tp-audience-story .tp-audience-meter__bar button { transform: scaleX(1); }
  .tp-campaign-rail > i { transition: none; }
  .tp-public__skip { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   CRAFTSMANSHIP PASS — the light sections, and the three chapters

   Structure, narrative, motion and content are locked. Everything here is
   ground, spacing, weight and composition.

   The diagnosis this answers: the dark operational scenes already read as
   premium, and the light explanatory sections fell back toward ordinary SaaS,
   because every one of them was the same page grey carrying the same bordered
   card at the same weight. A screenshot could not tell two of them apart.

   So the page is given three grounds rather than one, and the light sections
   stop using cards where a card was never the point.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Chapter 2 is a different plane ──────────────────────────────────────
   The record, the walkthrough, the gates and reachability are one chapter:
   the system doing its work. Lifting it to white -- full bleed, so it is a
   ground and not a card -- makes the middle of the page read as somewhere
   you have gone into, between the grey of "why you should care" and the grey
   of "what it costs". */
.tp-campaign-scroll,
.tp-audience-story {
  margin-inline: calc(50% - 50cqw);
  padding-inline: calc(50cqw - 50%);
  border-top: 0;
  background: var(--public-surface);
}

/* ── The dark bands are the page's two memorable moments. Give them room ── */
.tp-public__band--dark { padding-block: clamp(4.5rem, 8vw, 8.5rem); }
.tp-record-story .tp-section-heading { margin-bottom: clamp(2rem, 4vw, 3.25rem); }

/* ── The operator's day: an opening spread, not three product cards ──────
   Three parallel moments told at the same weight is correct content and was
   the wrong form -- bordered, filled and rounded, they read as features. The
   card is removed and the moment becomes the largest type in the section,
   over a hairline, which is what an editorial opening looks like. */
.tp-operator-day__moments { gap: clamp(1.5rem, 3vw, 2.75rem); margin-top: clamp(2.25rem, 4vw, 3.5rem); }
.tp-operator-day__moment {
  gap: .8rem;
  padding: 1.4rem 0 0;
  border: 0;
  border-top: 1px solid var(--public-text);
  border-radius: 0;
  background: none;
}
.tp-operator-day__moment h3 { font-size: clamp(1.15rem, 1.7vw, 1.42rem); line-height: 1.22; letter-spacing: -.014em; }
.tp-operator-day__gap { font-size: .95rem; line-height: 1.62; }
.tp-operator-day__answer { padding-top: 1rem; border-top: 1px solid var(--public-border); font-size: .84rem; }

/* ── Who this is for: the question is the payload ────────────────────────
   The business type was set as the loudest element, which made four cards
   that differ only in a noun. The decision is what the section is about, so
   the decision is what carries the weight. */
.tp-audience-fit__grid { gap: 1px; background: var(--public-border); border: 1px solid var(--public-border); border-radius: 1rem; overflow: hidden; }
.tp-audience-fit__card { gap: .55rem; padding: clamp(1.25rem, 2.2vw, 1.75rem); border: 0; border-radius: 0; background: var(--public-surface); }
.tp-audience-fit__business { color: var(--public-primary); font-size: .62rem; letter-spacing: .12em; }
.tp-audience-fit__situation { color: var(--public-muted); font-size: .85rem; font-weight: 600; letter-spacing: 0; }
.tp-audience-fit__decision { font-size: clamp(1.02rem, 1.5vw, 1.22rem); font-style: normal; font-weight: 680; line-height: 1.3; letter-spacing: -.012em; text-wrap: balance; }
.tp-audience-fit__support { padding-top: .85rem; font-size: .8rem; }

/* ── Setup: a sequence, not a specification table ────────────────────────
   The 1px grid gave it the grammar of documentation. The stage numeral is
   the anchor instead: large, tabular, quiet -- an instrument's scale
   markings rather than a table's cells. */
.tp-setup-loop__steps { gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.75rem); border: 0; border-radius: 0; background: none; overflow: visible; }
.tp-setup-loop__steps > li { gap: .5rem; padding: 1.15rem 0 0; border-top: 1px solid var(--public-border); background: none; }
.tp-setup-loop__steps > li[data-setup-phase="operating"] { background: none; }
.tp-setup-loop__steps > li[data-setup-phase="operating"] .tp-setup-loop__stage { color: var(--public-muted); }
.tp-setup-loop__stage { font-size: .68rem; letter-spacing: .14em; }
.tp-setup-loop__steps h3 { font-size: 1.06rem; letter-spacing: -.008em; }
.tp-setup-loop__proof { margin-top: .55rem; padding-left: .8rem; border-left: 2px solid var(--public-primary); font-size: .77rem; }
.tp-setup-loop__help { margin-top: clamp(2.25rem, 4vw, 3.25rem); }

/* ── Pricing: the number is the subject ─────────────────────────────────
   Three cards at 1.6rem read as a settings panel. The price is what the
   section is for, so it is set at display weight and the plan facts fall
   into a ruled rhythm underneath it. */
.tp-commercial-story__plans .tp-public__grid { gap: 1.15rem; align-items: start; }
.tp-public__price { display: flex; flex-direction: column; padding: clamp(1.4rem, 2.4vw, 1.9rem); border-radius: 1rem; }
.tp-public__price h3 { margin-bottom: .35rem; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--public-muted); }
/* Qualified, because `.tp-public__card p` (0,1,1) outranks a lone class and
   was painting the price in muted grey -- the same cascade trap that muted
   the header CTA. The price is the subject of this section. */
.tp-public__price p.tp-public__price-amount { margin: 0 0 1rem; font-size: clamp(2.1rem, 3.2vw, 2.75rem); font-weight: 760; line-height: 1; letter-spacing: -.028em; color: var(--public-text); }
.tp-public__price-amount small { font-size: .8rem; font-weight: 650; letter-spacing: 0; }
.tp-public__price p:not(.tp-public__price-amount) { margin: 0; padding: .6rem 0; border-top: 1px solid var(--public-border); font-size: .87rem; line-height: 1.45; }
.tp-public__price p:not(.tp-public__price-amount):last-child { padding-bottom: 0; }
.tp-public__price--recommended { box-shadow: 0 1.1rem 2.6rem rgb(20 23 34 / .09); }
.tp-public__price-tag { top: -.7rem; }

/* The commercial answers are reference, and should read quieter than the
   plans they sit under rather than competing with them. */
.tp-commercial-story__answers { gap: 1px; margin-top: 2rem; background: var(--public-border); border: 1px solid var(--public-border); border-radius: 1rem; overflow: hidden; }
.tp-commercial-story__answers > div { border: 0; border-radius: 0; }
.tp-commercial-story__answers dt { font-size: .88rem; }

/* ── FAQ: reference material, set as reference material ─────────────────── */
.tp-public__faq { gap: 0; border: 1px solid var(--public-border); border-radius: 1rem; overflow: hidden; }
.tp-public__faq details { border: 0; border-bottom: 1px solid var(--public-border); border-radius: 0; }
.tp-public__faq details:last-child { border-bottom: 0; }
.tp-public__faq summary { padding: 1.05rem 1.25rem; }
.tp-public__faq p { padding: 0 1.25rem 1.15rem; }

/* ── The wordmark, not an admin console header ───────────────────────────
   A two-line brand lockup with a descriptor under the name is the grammar of
   an internal tool. The name carries it. */

/* ── Light-section headings get the same air the dark ones have ─────────── */
.tp-operator-day .tp-section-heading,
.tp-audience-fit .tp-section-heading,
.tp-setup-loop .tp-section-heading { margin-bottom: 0; }

@media (max-width: 68rem) {
  .tp-audience-fit__grid, .tp-commercial-story__answers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 48rem) {
  .tp-campaign-scroll, .tp-audience-story { margin-inline: 0; padding-inline: 0; }
  .tp-commercial-story__answers { grid-template-columns: 1fr; }
}
@media (max-width: 34rem) {
  .tp-audience-fit__grid { grid-template-columns: 1fr; }
  .tp-operator-day__moment { padding-top: 1.15rem; }
}

/* ── Details ─────────────────────────────────────────────────────────────
   The things nobody names but everybody feels: selected text in the brand's
   own colour rather than the browser's blue, no grey flash under a thumb on
   a phone, headings that break into balanced lines rather than leaving one
   word alone on the last, and a footer that wraps instead of overflowing now
   that it carries the two doors the header deliberately does not. */
::selection { background: rgb(73 56 212 / .16); color: var(--public-text); }

/* The default tap flash is a grey rectangle with the wrong radius on every
   button on the page. Focus and active states already report the touch. */
a, button, summary, [role="button"] { -webkit-tap-highlight-color: transparent; }

/* `balance` was on some headings and not others, so a few sections shipped a
   one-word last line. It belongs on every display-sized heading. */
h1, h2, h3, .tp-section-heading > div > h2, .tp-public__price h3 { text-wrap: balance; }
/* Body copy wants `pretty`, not `balance` -- it only prevents the orphan. */
.tp-story-hero__lede, .tp-section-heading p, .tp-operator-day__gap,
.tp-audience-fit__support, .tp-setup-loop__body, .tp-commercial-story__answers dd { text-wrap: pretty; }

.tp-public__footer { flex-wrap: wrap; padding-block: 1.35rem; }
.tp-public__footer nav { flex-wrap: wrap; row-gap: .35rem; }
.tp-public__footer a { padding-block: .2rem; border-bottom: 1px solid transparent; }
.tp-public__footer a:hover, .tp-public__footer a:focus-visible { border-bottom-color: currentColor; color: var(--public-text); }

/* A rubber-band scroll that reveals the browser's own ground under a dark
   band breaks the illusion that the page is one drawn object. */
html { overscroll-behavior-y: none; }

/* Focus rings follow the corner they sit on, rather than drawing a square
   ring around a rounded control. */
.tp-public__action:focus-visible { border-radius: .65rem; }


/* A deliberate product demonstration, separate from the signup action. */
.tp-campaign-playback { position: relative; z-index: 1; display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; margin-top: .75rem; }
.tp-campaign-playback[hidden] { display: none; }
.tp-campaign-playback button { min-height: 2.75rem; }
.tp-campaign-playback span { color: var(--public-muted); font-size: .8rem; }

/* Marketing overview: short first reading, operational detail on request. */
.tp-setup-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; margin: 2rem 0; padding: 0; list-style: none; }
.tp-setup-overview li { padding-top: 1rem; border-top: 1px solid var(--public-border); }
.tp-setup-overview li > span { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-bottom: 1rem; border: 1px solid var(--public-border); border-radius: 50%; color: var(--public-primary); font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tp-setup-overview h3 { margin: 0 0 .5rem; font-size: 1.05rem; }
.tp-setup-overview p { margin: 0; color: var(--public-muted); font-size: .9rem; line-height: 1.6; }
.tp-setup-detail { border-block: 1px solid var(--public-border); }
.tp-setup-detail > summary { min-height: 2.75rem; padding: 1rem 0; cursor: pointer; font-weight: 650; }
.tp-setup-detail[open] { padding-bottom: 1.5rem; }
.tp-setup-detail > summary:focus-visible { outline: 2px solid var(--public-focus); outline-offset: 4px; }
.tp-audience-story [data-tone="ok"] strong, .tp-audience-story [data-tone="ok"] b { color: var(--public-success); }
.tp-audience-story [data-tone="held"] strong, .tp-audience-story [data-tone="held"] b { color: var(--public-warning); }
.tp-audience-story [data-tone="unknown"] strong, .tp-audience-story [data-tone="unknown"] b { color: var(--public-muted); }
.tp-public--guides .tp-public__hero { padding-block: clamp(2.5rem, 5vw, 4rem); }
.tp-public--guides .tp-public__hero h1 { font-size: var(--tp-h2); }
.tp-public--guides .tp-public__section { padding-block: clamp(2rem, 4vw, 3.5rem); }
.tp-public--guides .tp-guide-list { max-width: none; }
@media (max-width: 64rem) { .tp-setup-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 30rem) { .tp-setup-overview { grid-template-columns: 1fr; gap: 1.25rem; } }

/* Public product/help layer: shared typography, native navigation and controls. */
.tp-help-discovery { padding-block: 1rem 2rem; }
.tp-help-search { max-width: 50rem; margin-bottom: 2rem; }
.tp-help-search label { display: block; margin-bottom: .6rem; font-weight: 650; }
.tp-help-search > div { display: flex; gap: .6rem; }
.tp-help-search input { flex: 1; min-width: 0; min-height: 3rem; padding: .8rem 1rem; border: 1px solid var(--public-border); border-radius: .7rem; color: var(--public-text); background: var(--public-surface); font: inherit; }
.tp-help-search input:focus-visible { outline: 2px solid var(--public-focus); outline-offset: 3px; }
.tp-help-search > p { color: var(--public-muted); font-size: .85rem; }
.tp-help-topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.tp-help-topics a { display: grid; gap: .5rem; padding: 1.25rem; border: 1px solid var(--public-border); border-radius: .8rem; background: var(--public-surface); color: var(--public-text); text-decoration: none; }
.tp-help-topics a:hover { border-color: var(--public-primary); }
.tp-help-topics span { color: var(--public-muted); font-size: .86rem; line-height: 1.5; }
.tp-help-search[hidden], .tp-help-topics[hidden], [data-help-empty][hidden], .tp-guide[hidden] { display: none; }
.tp-product-map { padding: 1.5rem; border: 1px solid var(--public-border); border-radius: 1rem; background: var(--public-surface); box-shadow: 0 12px 36px rgb(20 23 34 / .06); }
.tp-product-map > p { margin: 0 0 1rem; color: var(--public-muted); font-size: .85rem; }
.tp-product-map ol { list-style: none; margin: 0; padding: 0; }
.tp-product-map li + li { border-top: 1px solid var(--public-border); }
.tp-product-map a { display: grid; grid-template-columns: 2rem 1fr; gap: .2rem .6rem; padding: 1rem 0; text-decoration: none; color: var(--public-text); }
.tp-product-map a:hover strong { color: var(--public-primary); }
.tp-product-map a > span { grid-row: span 2; color: var(--public-primary); font-size: .75rem; font-variant-numeric: tabular-nums; }
.tp-product-map small { color: var(--public-muted); }
.tp-product-chapters > article { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; padding-block: clamp(2rem, 5vw, 4rem); border-top: 1px solid var(--public-border); scroll-margin-top: 6rem; }
.tp-product-chapters h2 { margin: .5rem 0; font-size: var(--tp-h3); line-height: 1.15; letter-spacing: var(--tp-track); }
.tp-product-chapters article > div > p:not(.tp-public__eyebrow), .tp-product-close p { color: var(--public-muted); line-height: 1.65; }
.tp-product-chapters article > div > p { margin-top: 0; }
.tp-product-chapters a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.tp-public--product .tp-public__hero { padding-block: clamp(3rem, 6vw, 5rem); }
.tp-public--product .tp-public__hero h1 { font-size: var(--tp-display); }
.tp-help-topics a:focus-visible, .tp-product-map a:focus-visible { outline: 2px solid var(--public-focus); outline-offset: 3px; }
@media (max-width: 48rem) {
  .tp-help-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tp-product-chapters > article { grid-template-columns: 1fr; gap: .75rem; }
}
@media (max-width: 30rem) {
  .tp-public--product .tp-public__hero h1 { font-size: clamp(2.2rem, 10.4vw, 2.9rem); }
  .tp-help-topics { grid-template-columns: 1fr; }
  .tp-help-search > div { flex-wrap: wrap; }
  .tp-help-search input { flex-basis: 100%; }
}

.tp-public--guides .tp-public__hero { grid-template-columns: 1fr; }
.tp-public--guides .tp-help-search { margin: 1.5rem 0 0; }
.tp-public--guides .tp-public__section > aside { margin-bottom: 2rem; }

.tp-public__nav-link[aria-current="page"] {
  border-bottom: 2px solid var(--public-primary);
  color: var(--public-text);
}
.tp-public__footer a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: .25em;
  font-weight: 600;
}

/* The draft stage shows the work, within the existing stable story frame. */
.tp-campaign-panel__message::after { content: none; }
.tp-campaign-message {
  margin: .85rem 0;
  padding: .9rem;
  border-radius: .85rem .85rem .25rem .85rem;
  background: #30265c;
  color: #f4f6fa;
  font-size: 1rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.tp-campaign-panel__message small { color: #b4bed0; }
.tp-campaign-panel__message span { display: block; color: #b4bed0; }

/* Public story scenes share the existing stable walkthrough frame. */
.tp-channel-identity { display:flex; align-items:center; gap:16px; margin:20px 0; color:var(--tp-public-muted,#637087); font-size:.9rem; }
.tp-channel-identity img { flex:none; object-fit:contain; }
.tp-story-scene::after { content:none; }
.tp-story-scene small,.tp-story-scene span { display:block; color:#b4bed0; }
.tp-story-scene .tp-story-customer { margin-top:1rem; font-size:1rem; }
.tp-story-incoming { padding:.8rem; border-radius:.85rem .85rem .85rem .25rem; background:#242b38; color:#f4f6fa; line-height:1.5; }
.tp-story-calendar { margin:1rem 0; border-top:1px solid #343d50; padding-top:1rem; }
.tp-story-calendar > strong { font-size:1.1rem; }
.tp-story-calendar > div { border-left:3px solid #a99aff; background:#30265c; padding:.85rem; margin-top:.7rem; border-radius:.35rem; }
.tp-story-calendar p { margin:.5rem 0; color:#f4f6fa; font-weight:650; }
.tp-story-calendar time { color:#eee9ff; }
.tp-story-outcomes { display:grid; grid-template-columns:1fr 1fr; height:12px; gap:3px; margin:1.5rem 0 1rem; overflow:hidden; border-radius:6px; }
.tp-story-outcomes progress { width:100%; height:12px; border:0; background:#343d50; appearance:none; }
.tp-story-outcomes progress::-webkit-progress-bar { background:#343d50; }
.tp-story-outcomes__sent::-webkit-progress-value { background:#6cdda8; }
.tp-story-outcomes__held::-webkit-progress-value { background:#f5c46a; }
.tp-story-outcomes__sent::-moz-progress-bar { background:#6cdda8; }
.tp-story-outcomes__held::-moz-progress-bar { background:#f5c46a; }
.tp-story-scene > p { font-size:.95rem; line-height:1.5; color:#f4f6fa; }
@media(max-width:48rem) {
  .tp-campaign-panel__primary.tp-story-scene span { display:block; }
  .tp-story-scene .tp-story-customer { font-size:1rem; }
  .tp-channel-identity { gap:16px; font-size:.82rem; }
}

/* Compact public story and equal plan actions. */
.tp-story-hero__fit { color: var(--public-muted); font-size: .9rem; line-height: 1.6; }
.tp-commercial-story__plans .tp-public__price { display: flex; flex-direction: column; }
.tp-public__price .tp-public__action { margin-top: auto; }
.tp-public__price-fit { padding-bottom: 1rem; }

.tp-campaign-step .tp-state-pill[data-tone="neutral"] { color: var(--public-muted); }
.tp-public__nav a.tp-public__nav-link { color: var(--public-text); }

/* Public help: results lead while searching; recent guidance stays compact. */
.tp-public--guides #continue { padding-block: 1.25rem; }
.tp-public--guides #continue h2 { font-size: 1.1rem; letter-spacing: normal; margin-block: .35rem; }
.tp-public--guides #continue p { margin-block: .35rem; }
.tp-help-discovery[hidden], #continue[hidden] { display: none; }
.tp-help-steps { display: grid; gap: 1.25rem; padding-left: 1.4rem; margin-block: 1.25rem; }
.tp-help-support-notes { max-width: 46rem; margin-top: 1.5rem; line-height: 1.65; }
.tp-help-support-notes li + li { margin-top: .5rem; }
.tp-public--guides .tp-guide, .tp-public--guides #support { scroll-margin-top: 8rem; }