/* Styles for the marketing pages (src/content/*, src/routes/marketing.ts).
   Linked on every page by src/layout.ts, after site.css. Uses the tokens in
   site.css only; patterns follow Mokxi web/src/site/site.css (plans, FAQ,
   steps, closing band, /vs). Scoped to body.marketing where a rule would
   otherwise change the app. */

/* ---------------- shared ---------------- */

.marketing .accent {
  color: var(--accent);
}

/* The h1 of a page that is not the home hero. */
.page-title {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.025em;
}

/* Centered section heads, as on Mokxi. A head beside its content sits left. */
.marketing .section-head {
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: 34px;
  text-align: center;
}

.marketing .section-head .section-sub {
  max-width: 60ch;
  margin-inline: auto;
}

.marketing .section-head-left,
.marketing .section-head-left .section-sub {
  margin-inline: 0;
  text-align: left;
}

.marketing .section-title {
  font-size: 30px;
  letter-spacing: -0.02em;
}

/* A planned feature: quiet, never hidden. */
.soon {
  /* Kept whole: it moves to the next line as one piece, and breaks inside
     only when one line cannot hold it (large text on a phone). */
  display: inline-block;
  max-width: 100%;
  color: var(--text-faint);
  font-size: 0.92em;
}

.section-actions {
  display: flex;
  justify-content: center;
  margin-top: 26px;
}

/* Row headers in a table read as words, not labels. */
.marketing .table tbody th {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  white-space: normal;
}

.marketing .table td {
  color: var(--text-dim);
}

/* A row reads along one line: a name and its cells meet on their first
   baseline, however many lines the longest cell wraps to. Tables of marks
   (.compare-table) keep the middle, where a tick lines up with a word. */
.marketing .table tbody :is(th, td) {
  vertical-align: baseline;
}

.marketing .compare-table tbody :is(th, td) {
  vertical-align: middle;
}

/* A list of short lines with a green tick before each. */
.checks {
  display: grid;
  gap: 10px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.checks li {
  position: relative;
  padding-left: 28px;
  color: var(--text);
}

.checks li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 0.62em;
  width: 10px;
  height: 5px;
  border-left: 2px solid var(--chip-ok-fg);
  border-bottom: 2px solid var(--chip-ok-fg);
  transform: rotate(-45deg);
}

.checks-wide {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 32px;
  max-width: 980px;
  /* Centered under its centered section head, like every other section body. */
  margin-inline: auto;
}

/* Visible breadcrumbs over a page title. */
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--text-faint);
}

.crumbs li + li::before {
  content: '/';
  margin-right: 4px;
  color: var(--line-strong);
}

.crumbs a {
  color: var(--text-dim);
}

/* ---------------- how it works ---------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-panel);
}

.step {
  position: relative;
  padding: 24px 26px;
  border-right: 1px solid var(--line);
}

.step:last-child {
  border-right: none;
}

.step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.step-no {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.step-icon,
.audience-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 10px;
}

.step-name {
  margin-top: 14px;
  font-size: 19px;
}

.step-line {
  margin-top: 7px;
  color: var(--text-dim);
  font-size: 14.5px;
}

/* An arrow between steps on a desk: the path reads left to right. */
.steps:not(.steps-plain) .step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -7px;
  z-index: 1;
  width: 12px;
  height: 12px;
  background: var(--bg-panel);
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
  transform: translateY(-50%) rotate(45deg);
}

@media (max-width: 760px) {
  .steps {
    grid-template-columns: minmax(0, 1fr);
  }
  .step {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .step:last-child {
    border-bottom: none;
  }
  .steps:not(.steps-plain) .step:not(:last-child)::after {
    top: auto;
    right: auto;
    bottom: -7px;
    left: 32px;
    transform: rotate(135deg);
  }
}

/* ---------------- pricing ---------------- */

/* The page opens on the plans: a short head, the toggle, the cards. */
.marketing .pricing-hero {
  padding-block: 64px 96px;
}

.pricing-head {
  max-width: 720px;
  margin: 0 auto 32px;
  text-align: center;
}

/* The toggle stays its own size on a phone too: two words and a pill. */
.pricing-toggle .segmented {
  display: inline-flex;
  width: auto;
}

.marketing .pricing-head .hero-lead {
  max-width: 40em;
  margin: 16px auto 0;
}

@media (max-width: 720px) {
  .marketing .pricing-hero {
    padding-block: 32px 64px;
  }
  .pricing-head {
    margin-bottom: 24px;
  }
}

.pricing-toggle {
  display: flex;
  justify-content: center;
  margin-bottom: 26px;
}

/* With large text the Yearly segment lets its pill drop under the word
   instead of running past the screen; at normal sizes it stays on the row. */
.pricing-toggle .segment {
  flex: 0 1 auto;
  min-width: 0;
  flex-wrap: wrap;
  padding-block: 2px;
}

.pricing-save {
  font-family: var(--sans);
  font-size: 11px;
  line-height: 16px;
}

.segment[aria-selected='true'] .pricing-save,
.segment[aria-pressed='true'] .pricing-save {
  color: var(--accent);
  background: var(--bg-raised);
  border-color: transparent;
}

.compare-wrap {
  max-width: 940px;
  margin-inline: auto;
}

.compare-table th[scope='col'] {
  text-align: center;
}

.compare-table th[scope='col']:first-child {
  text-align: left;
}

.compare-table td {
  text-align: center;
}

.compare-group th {
  padding-top: 18px;
  font-family: var(--mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--accent) !important;
  background: var(--bg-panel);
}

.marketing .compare-table tbody tr.compare-group:hover th {
  background: var(--bg-panel);
}

.tick {
  display: inline-grid;
  place-items: center;
  color: var(--chip-ok-fg);
}

/* Not "dash": app-analytics.css styles .dash as the dashboard grid, which pushed these cells down. */
.no-mark {
  color: var(--text-faint);
}

.steps-plain .step-no {
  letter-spacing: 0.08em;
}

.compare-prices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.compare-title {
  margin-bottom: 12px;
  font-size: 17px;
}

/* Price tables: the name, then cells on its line. A price never breaks
   ("$49 a month" stays whole) and sits right in tabular figures; the notes
   take the slack. The Datacenter row is tinted to the frame's rounded corners. */
.price-table tr.is-ours th,
.price-table tr.is-ours td {
  color: var(--text);
  background: var(--accent-soft);
}

.marketing .price-table tbody tr.is-ours:hover td {
  background: var(--accent-soft);
}

.price-table .num {
  white-space: nowrap;
}

/* Usage prices are sentences: they wrap, still flush right. */
.usage-table th[scope='row'] {
  width: 45%;
}

/* On a phone a row stacks: name and price on the first line, the plan and
   notes under them. The column heads stay for screen readers. */
@media (max-width: 640px) {
  .price-table,
  .price-table tbody,
  .price-table tr,
  .price-table th,
  .price-table td,
  .usage-table,
  .usage-table tbody,
  .usage-table tr,
  .usage-table th,
  .usage-table td {
    display: block;
  }
  .price-table thead,
  .usage-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .price-table tbody tr,
  .usage-table tbody tr {
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
  }
  .price-table tbody tr:last-child,
  .usage-table tbody tr:last-child {
    border-bottom: 0;
  }
  .marketing .price-table tbody :is(th, td),
  .marketing .usage-table tbody :is(th, td) {
    width: auto;
    padding: 0;
    text-align: left;
    background: none;
    border: 0;
  }
  .price-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 16px;
    row-gap: 2px;
    align-items: baseline;
  }
  .price-table tbody th {
    grid-area: 1 / 1;
  }
  .marketing .price-table tbody td.num {
    grid-area: 1 / 2;
    text-align: right;
    color: var(--text);
  }
  .price-table tbody td:not(.num) {
    grid-column: 1 / -1;
    font-size: 13.5px;
  }
  .price-table tr.is-ours {
    background: var(--accent-soft);
  }
  .marketing .usage-table tbody td.num {
    margin-top: 2px;
    white-space: normal;
  }
}

.sources-line {
  margin-top: 18px;
  font-size: 13px;
  color: var(--text-faint);
  text-align: center;
}

.sources-line a {
  color: var(--text-dim);
}

@media (max-width: 960px) {
  .compare-prices {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------------- FAQ ---------------- */

.faq {
  max-width: 78ch;
  margin-inline: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.faq-item + .faq-item {
  border-top: 1px solid var(--line);
}

.faq-q {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 18px;
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  background: var(--bg-panel);
  cursor: pointer;
  list-style: none;
}

.faq-q::-webkit-details-marker {
  display: none;
}

.faq-q:hover {
  background: var(--bg-hover);
}

.faq-q:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.faq-q > span:first-child {
  flex: 1 1 auto;
}

.faq-chevron {
  flex: 0 0 auto;
  color: var(--text-faint);
  transition: transform 0.15s ease;
}

.faq-item[open] > .faq-q {
  background: var(--bg-raised);
}

.faq-item[open] .faq-chevron {
  transform: rotate(180deg);
  color: var(--accent);
}

.faq-a {
  padding: 0 18px 18px;
  background: var(--bg-raised);
}

.faq-a p {
  max-width: 68ch;
  font-size: 14.5px;
  color: var(--text-dim);
}

/* ---------------- the closing band ---------------- */

.closing {
  background:
    radial-gradient(110% 85% at 50% 100%, var(--accent-soft), transparent 72%),
    radial-gradient(110% 85% at 50% 0%, var(--accent-soft), transparent 72%),
    var(--bg-panel);
}

.closing-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.closing-title {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.closing-line {
  margin-top: 12px;
  max-width: 54ch;
  color: var(--text-dim);
}

.closing-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}

@media (max-width: 720px) {
  .page-title {
    font-size: 30px;
  }
  .marketing .section-title {
    font-size: 24px;
  }
  .closing-title {
    font-size: 26px;
  }
  .closing-actions {
    width: 100%;
  }
  .closing-actions .btn {
    flex: 1 1 160px;
  }
  .checks-wide {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------------- /vs ---------------- */

.vs-hero {
  padding-block: 40px 56px;
}

.vs-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 44px;
  align-items: start;
}

.vs-hero .hero-lead {
  margin-top: 16px;
}

.vs-checked {
  margin-top: 16px;
  font-size: 13px;
  color: var(--text-faint);
}

/* The direct answer, for "X alternative" searches. */
.answer {
  padding: 22px 24px;
  background: var(--brand-band);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
}

.answer-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.answer-text {
  margin-top: 10px;
  font-size: 16.5px;
  line-height: 1.55;
}

.answer-note {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--text-dim);
}

.claims {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.claims li {
  display: flex;
  gap: 12px;
  padding: 16px 18px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.claim-mark {
  flex: 0 0 auto;
  color: var(--chip-ok-fg);
}

.claim-text {
  color: var(--text);
}

.claim-source {
  display: inline-block;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--text-dim);
}

.vs-table th[scope='col']:nth-child(2) {
  color: var(--accent);
}

.vs-table td:nth-child(2) {
  color: var(--text);
}

.vs-sources {
  margin-top: 18px;
  font-size: 13px;
}

.vs-sources-title {
  font-weight: 600;
  color: var(--text-dim);
}

.vs-sources ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.vs-sources a {
  color: var(--text-dim);
}

.which-card {
  padding: 24px;
  background: var(--bg-raised);
}

.which-ours {
  border-color: var(--accent);
}

.which-link {
  margin-top: 18px;
}

.which-link a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-weight: 600;
}

.which-link svg {
  width: 15px;
  height: 15px;
}

.related {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.related .chip {
  min-height: 44px;
  padding-inline: 16px;
  font-size: 14px;
}

.vs-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

/* Comparison headlines are two whole lines, "Datacenter vs" and the name, so
   the name never breaks. The longest name ("Google Analytics.") fits a
   358px phone column at the phone size below. */
.vs-title .hero-line {
  display: block;
  /* Each line is chosen to fit whole from 360px up, so it never breaks there.
     With large text (a phone's text size, browser zoom) it breaks evenly
     instead of running off the screen. */
  text-wrap: balance;
}

.vs-group-line {
  margin: -8px 0 14px;
  font-size: 13.5px;
  color: var(--text-dim);
}

.vs-group-title {
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.vs-cards {
  display: grid;
  gap: 12px;
}

.vs-card {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 18px 52px 18px 20px;
}

.vs-card .card-title,
.vs-card .card-sub {
  display: block;
}

.vs-card-go {
  position: absolute;
  top: 50%;
  right: 18px;
  color: var(--accent);
  transform: translateY(-50%);
  transition: transform 0.15s ease;
}

a.vs-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-menu);
}

a.vs-card:hover .vs-card-go {
  transform: translate(3px, -50%);
}

@media (max-width: 900px) {
  .vs-hero-grid,
  .vs-groups,
  .claims {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .claims {
    gap: 12px;
  }
}

/* ---------------- docs ----------------
   The help center (src/content/docs.ts) and its articles (docs/help/,
   rendered by src/content/md.ts). Modeled on calm API docs: a quiet list on
   the left, the article at a reading measure, and a contents rail on the
   right that marks the section being read. Every color is a token, so light
   and dark follow the theme; ratios are noted where a pair is new. */

/* The index: the search first, then one card per section. */
.marketing .docs-head {
  margin-bottom: 28px;
}

.docs-search {
  position: relative;
  max-width: 620px;
  margin: 0 auto;
}

.docs-search-icon {
  position: absolute;
  top: 50%;
  left: 16px;
  color: var(--text-faint);
  transform: translateY(-50%);
  line-height: 0;
}

.docs-search-input {
  min-height: 52px;
  padding-left: 46px;
  font-size: 16px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-menu);
}

.docs-results {
  max-width: 720px;
  margin: 22px auto 0;
}

.docs-results-count {
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--text-faint);
  text-align: center;
}

.docs-result-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.docs-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 12px;
  padding: 14px 16px;
  color: inherit;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.docs-result:hover {
  border-color: var(--line-strong);
  text-decoration: none;
}

.docs-result-title {
  font-weight: 650;
  color: var(--accent);
}

.docs-result-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.docs-result-line {
  grid-column: 1 / -1;
  font-size: 13.5px;
  color: var(--text-dim);
}

.docs-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.docs-card {
  padding: 22px 22px 16px;
  background: var(--bg-raised);
}

.docs-card-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.docs-card-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.docs-card-head + .docs-card-list {
  margin-top: 16px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

/* A title list reads as a list of places, so no underline until hover. */
.docs-card-link {
  display: flex;
  align-items: center;
  min-height: 34px;
  font-size: 14.5px;
  color: var(--text);
}

.docs-card-link:hover {
  color: var(--accent);
  text-decoration: none;
}

.docs-card-more > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  list-style: none;
  cursor: pointer;
}

.docs-card-more > summary::-webkit-details-marker {
  display: none;
}

.docs-card-more > summary .doc-chevron {
  transform: rotate(90deg);
}

.docs-card-more[open] > summary {
  display: none;
}

@media (max-width: 960px) {
  .docs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .docs-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .docs-card-link,
  .docs-card-more > summary {
    min-height: 44px;
  }
}

/* An article: the list, the page, then the contents rail. */
.doc-page,
.legal-page {
  padding-block: 40px 80px;
}

.doc-layout {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr) 184px;
  gap: 48px;
  align-items: start;
}

.doc-layout-no-toc {
  grid-template-columns: 232px minmax(0, 1fr);
}

/* One fold mark for every docs disclosure: right when closed, down when open. */
.doc-chevron {
  flex: none;
  color: var(--text-faint);
  transition: transform var(--dur-2) var(--ease-out);
}

details[open] > summary > .doc-chevron {
  transform: rotate(90deg);
}

.doc-nav summary,
.doc-toc-fold > summary {
  list-style: none;
  cursor: pointer;
}

.doc-nav summary::-webkit-details-marker,
.doc-toc-fold > summary::-webkit-details-marker {
  display: none;
}

/* ---- the article list ---- */

.doc-nav {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  font-size: 14px;
}

.doc-nav-summary {
  display: none;
}

/* Its own scroll, the height of the screen. The bar shows only while the
   pointer is over the list (overlay scroll bars already hide on their own). */
.doc-nav-scroll {
  max-height: calc(100dvh - var(--header-h) - 48px);
  margin: -12px 0 0 -10px;
  padding: 12px 6px 24px 0;
  overflow-y: auto;
  /* Rows fade at either edge instead of being cut by it. The padding keeps
     the first and last rows clear of the fade when scrolled to an end. */
  mask-image: linear-gradient(to bottom, transparent, #000 12px, #000 calc(100% - 24px), transparent);
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.doc-nav-scroll:hover,
.doc-nav-scroll:focus-within {
  scrollbar-color: var(--line-strong) transparent;
}

.doc-nav-section + .doc-nav-section {
  margin-top: 20px;
}

/* A group heading is a quiet label on a wide screen; on a phone it folds. */
.doc-nav-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  pointer-events: none;
}

.doc-nav-heading .doc-chevron {
  display: none;
}

.doc-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Nav lists are plainly links already: no underline (site.css underlines links in running text). */
.doc-nav a,
.doc-toc a,
main .doc-nav a:not([class]),
main .doc-toc a:not([class]),
main .doc-toc-fold a:not([class]) {
  text-decoration: none;
}

/* 32px rows: 20px of line and 6px above and below. */
.doc-nav a {
  display: block;
  padding: 6px 10px;
  line-height: 20px;
  color: var(--text-dim);
  border-radius: var(--r-sm);
  outline-offset: -2px;
}

.doc-nav a:hover {
  color: var(--text);
  background: var(--bg-hover);
}

/* The current article: accent words on a faint accent wash, and heavier.
   Accent on the 7% wash is 5.5:1 in light and 5.0:1 in dark (the 10 and 16%
   accent-soft fell under 4.5 in dark). */
.doc-nav a[aria-current='page'] {
  color: var(--accent);
  font-weight: 600;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

/* ---- the article ---- */

.doc-article,
.legal-article {
  min-width: 0;
  max-width: 760px;
}

.doc-article {
  max-width: 680px;
}

.legal-layout {
  display: flex;
  justify-content: center;
}

.legal-article {
  width: 100%;
}

.doc-trail {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--text-faint);
}

.doc-trail-link {
  color: var(--text-dim);
}

.doc-trail-link:hover {
  color: var(--accent);
  text-decoration: none;
}

.doc-trail [aria-hidden] {
  color: var(--line-strong);
}

.doc-title {
  font-size: 38px;
  line-height: 1.12;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.doc-lead {
  max-width: 36em;
  margin-top: 12px;
  font-size: 17.5px;
  line-height: 1.55;
  color: var(--text-dim);
}

.legal-updated {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-faint);
}

.legal-article .notice {
  margin-top: 18px;
}

/* The words. One scale: 16px body at 1.7, 22px h2, 17px h3, 14px tables,
   13px code. One measure: 36em of running text, about 70 characters. Space
   comes from the block above: 16px between paragraphs, 24px around tables,
   code and notes, 48px before an h2, 32px before an h3, tight under each. */
.doc-body {
  margin-top: 32px;
  font-size: 16px;
  line-height: 1.7;
}

.doc-body > p,
.doc-body > ul,
.doc-body > ol,
.doc-body > h2,
.doc-body > h3 {
  max-width: 36em;
}

.doc-body > * + * {
  margin-top: 16px;
}

.doc-body > h2 {
  margin-top: 48px;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 650;
  letter-spacing: -0.012em;
}

.doc-body > h3 {
  margin-top: 32px;
  font-size: 17px;
  line-height: 1.4;
  font-weight: 650;
}

.doc-body > h2:first-child {
  margin-top: 0;
}

.doc-body > h2 + * {
  margin-top: 12px;
}

.doc-body > h3 + * {
  margin-top: 8px;
}

.doc-body > .table-wrap,
.doc-body > .doc-code,
.doc-body > .doc-note,
.doc-body > * + .table-wrap,
.doc-body > * + .doc-code,
.doc-body > * + .doc-note {
  margin-block: 24px;
}

.doc-body > h2 + .table-wrap,
.doc-body > h2 + .doc-code,
.doc-body > h2 + .doc-note,
.doc-body > h3 + .table-wrap,
.doc-body > h3 + .doc-code,
.doc-body > h3 + .doc-note {
  margin-top: 12px;
}

.doc-body ul,
.doc-body ol {
  padding-left: 1.3em;
}

.doc-body li + li {
  margin-top: 6px;
}

.doc-body li::marker {
  color: var(--text-faint);
}

.doc-body strong {
  font-weight: 650;
}

.doc-body h2,
.doc-body h3 {
  scroll-margin-top: calc(var(--header-h) + 24px);
}

main .doc-body a:not([class]) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
}

main .doc-body a:not([class]):hover {
  text-decoration-color: currentColor;
}

/* A link to the section, shown when the pointer is on its heading (and on
   the docs and guides alike, which share the renderer). */
.doc-anchor {
  margin-left: 0.4em;
  font-weight: 500;
  color: var(--text-faint);
  text-decoration: none;
  opacity: 0;
  transition: opacity var(--dur-1) ease;
}

h2:hover > .doc-anchor {
  opacity: 1;
}

.doc-anchor:hover {
  color: var(--accent);
  text-decoration: none;
}

@media (hover: none) {
  .doc-anchor {
    display: none;
  }
}

/* Inline code: a soft pill in the text's own color, no border. The 7% wash
   of the text color keeps code at 14:1 or better in both themes. */
.doc-body :not(pre) > code,
.guide-body :not(pre) > code {
  padding: 0.12em 0.36em;
  font-size: 0.875em;
  background: color-mix(in srgb, var(--text) 7%, transparent);
  border: 0;
  border-radius: 5px;
  /* A long address in a sentence breaks rather than push the page sideways. */
  overflow-wrap: anywhere;
}

/* ---- code blocks: a slim bar (language, Copy) on the same ground as the code ---- */

.doc-code {
  background: var(--bg-input);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.doc-code-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 38px;
  padding: 0 6px 0 16px;
  border-bottom: 1px solid var(--line);
}

.doc-code-lang {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.doc-code-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-dim);
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition:
    color var(--dur-1) ease,
    background-color var(--dur-1) ease;
}

.doc-code-copy:hover {
  color: var(--text);
  background: var(--bg-hover);
}

.doc-code .code {
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow-y: hidden;
  tab-size: 2;
}

.doc-code .code:focus-visible {
  outline-offset: -2px;
}

.doc-code-wrap .code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.doc-code .code code {
  padding: 0;
  background: none;
  border: none;
}

/* ---- notes: one shape, two tones. Used sparingly ---- */

.doc-note {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 10px;
  padding: 12px 16px;
  background: var(--info-bg);
  border: 1px solid var(--info-line);
  border-radius: var(--radius);
}

.doc-note-icon {
  margin-top: 4px;
  color: var(--accent);
}

.doc-note p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
}

.doc-warning {
  background: var(--warning-bg);
  border-color: var(--warning-line);
}

/* Warning ink on the warning ground: 6.1:1 light, 9.6:1 dark. */
.doc-warning .doc-note-icon {
  color: var(--warning-fg);
}

/* ---- tables: hairlines between rows, no zebra, no hover ---- */

.doc-table {
  font-size: 14px;
  line-height: 1.5;
}

/* Cells meet on their first line, so a mono type lines up with its name. */
.doc-table th,
.doc-table td {
  padding: 9px 14px;
  vertical-align: baseline;
}

.doc-table thead th {
  position: static;
  height: 36px;
  padding-block: 0;
  vertical-align: middle;
  white-space: nowrap;
  background: transparent;
}

.doc-table tbody tr:hover td {
  background: none;
}

/* The frame closes the table: the last row's name loses its rule too. */
.doc-table tbody tr:last-child > th {
  border-bottom: 0;
}

/* A field name is one word: it never breaks, and its column takes what it
   needs. A row named in plain words (a plan feature) wraps like any text. */
.doc-table th[scope='row'] code {
  padding: 0;
  font-size: 0.93em;
  font-weight: 600;
  background: none;
  overflow-wrap: normal;
  white-space: nowrap;
}

.doc-type {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-faint);
}

/* Named past `.marketing .table td`, which sets cells in text-dim. Faint on
   the panel is 5.1:1 light, 5.5:1 dark. */
.marketing .doc-table td.doc-type {
  color: var(--text-faint);
  white-space: nowrap;
}

/* A table wider than the screen scrolls inside its frame. A shade at the
   edge says there is more: the panel-colored covers scroll with the table
   and hide the shade once the edge is reached. Cells stay transparent so the
   shade can show through. */
.doc-table-wrap {
  background:
    linear-gradient(to right, var(--bg-panel) 40%, transparent) left / 36px 100% no-repeat local,
    linear-gradient(to left, var(--bg-panel) 40%, transparent) right / 36px 100% no-repeat local,
    linear-gradient(to right, color-mix(in srgb, var(--text) 12%, transparent), transparent) left / 14px 100% no-repeat scroll,
    linear-gradient(to left, color-mix(in srgb, var(--text) 12%, transparent), transparent) right / 14px 100% no-repeat scroll,
    var(--bg-panel);
}

/* ---- after the words ---- */

.doc-pager {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 56px;
}

.doc-pager-link {
  display: grid;
  gap: 2px;
  padding: 14px 16px;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition:
    border-color var(--dur-1) ease,
    background-color var(--dur-1) ease;
}

.doc-pager-link:hover {
  background: var(--bg-panel);
  border-color: var(--line-strong);
  text-decoration: none;
}

.doc-pager-dir {
  font-size: 12.5px;
  color: var(--text-faint);
}

.doc-pager-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--accent);
}

.doc-pager-link.next {
  text-align: right;
}

.doc-help {
  margin-top: 20px;
  font-size: 13.5px;
  color: var(--text-faint);
}

/* ---- contents: a rail on a wide screen, folded under the lead otherwise ---- */

.doc-side {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  max-height: calc(100dvh - var(--header-h) - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.doc-toc-title {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.doc-side .doc-toc ul {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--line);
}

.doc-side .doc-toc a {
  display: block;
  margin-left: -1px;
  padding: 5px 0 5px 12px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-dim);
  border-left: 2px solid transparent;
  outline-offset: -2px;
}

.doc-side .doc-toc a:hover {
  color: var(--text);
}

.doc-side .doc-toc a[aria-current='true'] {
  color: var(--accent);
  font-weight: 600;
  border-left-color: var(--accent);
}

.doc-toc-fold {
  display: none;
  margin-top: 24px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.doc-toc-fold > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 0 14px 0 16px;
  font-size: 14.5px;
  font-weight: 600;
}

.doc-toc-fold ul {
  margin: 0;
  padding: 0 16px 10px;
  list-style: none;
  font-size: 14.5px;
}

.doc-toc-fold a {
  display: flex;
  align-items: center;
  min-height: 36px;
  color: var(--text-dim);
}

.doc-toc-fold a:hover {
  color: var(--accent);
}

/* The legal pages keep their contents list as one box under the lead. */
.legal-article .doc-toc {
  margin-top: 24px;
  padding: 14px 18px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.legal-article .doc-toc ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}

.legal-article .doc-toc a {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
}

/* Under 1180 the rail goes; the contents fold under the lead. */
@media (max-width: 1180px) {
  .doc-layout,
  .doc-layout-no-toc {
    grid-template-columns: 232px minmax(0, 1fr);
  }
  .doc-side {
    display: none;
  }
  .doc-toc-fold {
    display: block;
  }
}

/* Under 900 the list folds into one row above the article; each group folds too. */
@media (max-width: 900px) {
  .doc-layout,
  .doc-layout-no-toc {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .doc-nav {
    position: static;
    font-size: 15px;
  }
  .doc-nav-fold {
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }
  .doc-nav-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 14px 0 16px;
    font-weight: 600;
  }
  .doc-nav-where {
    margin-left: auto;
    font-size: 13.5px;
    font-weight: 400;
    color: var(--text-faint);
  }
  .doc-nav-scroll {
    max-height: none;
    margin: 0;
    padding: 4px 8px 8px;
    overflow: visible;
    mask-image: none;
    border-top: 1px solid var(--line);
  }
  .doc-nav-section + .doc-nav-section {
    margin-top: 0;
    border-top: 1px solid var(--line);
  }
  .doc-nav-heading {
    min-height: 44px;
    padding: 0 8px;
    pointer-events: auto;
  }
  .doc-nav-heading .doc-chevron {
    display: block;
  }
  .doc-nav-section ul {
    padding-bottom: 8px;
  }
  .doc-nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding-block: 10px;
  }
}

@media (max-width: 720px) {
  .doc-page {
    padding-top: 20px;
  }
  .doc-title {
    font-size: 30px;
  }
  .doc-lead {
    font-size: 16px;
  }
  .doc-body {
    margin-top: 24px;
  }
  .doc-body > h2 {
    margin-top: 40px;
    font-size: 20px;
  }
  .doc-toc-fold a {
    min-height: 44px;
  }
  /* A 44px tap target that still sits inside the slim bar. */
  .doc-code-bar {
    min-height: 44px;
    padding-right: 0;
  }
  .doc-code-copy {
    height: 44px;
    padding-inline: 14px;
    border-radius: 0;
  }
  /* Plain tables keep a readable column: the notes never shrink to a word
     a line, the frame scrolls instead. */
  .doc-table td {
    min-width: 11em;
  }
  /* A parameter table stacks: the name, its type beside it in muted mono,
     then the notes under them. One hairline between parameters. */
  .doc-table-wrap:has(.doc-params) {
    background: var(--bg-panel);
  }
  .doc-params,
  .doc-params tbody,
  .doc-params tr,
  .doc-params td {
    display: block;
  }
  /* The column names stay for screen readers; clip-path hides them. */
  .doc-params thead {
    position: absolute;
    width: 1px;
    height: 1px;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .doc-params tr {
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
  }
  .doc-params tbody tr:last-child {
    border-bottom: 0;
  }
  .doc-params th[scope='row'],
  .doc-params td {
    padding: 0;
    border: 0;
  }
  .doc-params th[scope='row'] {
    display: inline;
  }
  .doc-params td.doc-type {
    display: inline;
    margin-left: 8px;
  }
  .doc-params td:last-child {
    min-width: 0;
    margin-top: 4px;
    color: var(--text-dim);
  }
  .doc-pager {
    grid-template-columns: minmax(0, 1fr);
  }
  .doc-pager-link.next {
    text-align: left;
  }
}

/* ---------------- fixes from the layout check ---------------- */

/* Each group of rows keeps its bottom rule; only the table's last row loses it.
   td and th named so these outrank `.table tbody tr:last-child td` in site.css. */
.compare-table tbody tr:last-child > td,
.compare-table tbody tr:last-child > th {
  border-bottom: 1px solid var(--line);
}

.compare-table tbody:last-of-type tr:last-child > td,
.compare-table tbody:last-of-type tr:last-child > th {
  border-bottom: none;
}

/* Five plans do not fit a phone: the table scrolls inside its frame, and the
   feature names stay pinned on the left so each row stays readable. */
@media (max-width: 720px) {
  .compare-table {
    min-width: 640px;
  }
  .compare-table th[scope='row'],
  .compare-table thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 132px;
    background: var(--bg-panel);
  }
}

.claims .claim-text {
  display: block;
}

/* ---------------- /tools/utm-builder (src/content/tools.ts) ---------------- */

.ub-wrap {
  max-width: 760px;
}

.ub-lead {
  max-width: 34em;
  margin-top: 12px;
  font-size: 17px;
  color: var(--text-dim);
}

.ub-lead-small {
  max-width: 40em;
  margin-top: 8px;
  font-size: 14px;
  color: var(--text-faint);
}

.ub {
  display: grid;
  gap: 18px;
  margin-top: 28px;
  padding: 22px;
  background: var(--bg-raised);
  box-shadow: var(--shadow-panel);
}

.ub-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.ub-label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}

.ub-optional {
  font-weight: 400;
  color: var(--text-faint);
}

.ub-key {
  margin-left: 4px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 400;
  color: var(--text-faint);
}

.ub-input {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  font: inherit;
  color: var(--text);
  background: var(--bg-input);
  /* The field edge at 3:1 on every surface (WCAG 1.4.11); line-strong is 1.7:1. */
  border: 1px solid var(--line-input);
  border-radius: var(--radius-sm);
}

.ub-input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.ub-dest {
  min-height: 50px;
  font-family: var(--mono);
  font-size: 14.5px;
}

.ub-hint,
.ub-note {
  font-size: 13px;
  color: var(--text-dim);
}

.ub-hint:empty {
  display: none;
}

.ub-group {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.ub-group-name {
  padding-top: 9px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.ub .chip {
  min-height: 40px;
  padding-inline: 14px;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

/* A phone tap target is 44px, as every other chip on a phone (ui.css). */
@media (max-width: 720px) {
  .ub .chip {
    min-height: var(--ctl-h-lg);
  }
}

.ub-pair,
.ub-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.ub-advanced {
  padding: 0 14px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.ub-advanced summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-dim);
  cursor: pointer;
}

.ub-advanced summary::-webkit-details-marker {
  display: none;
}

.ub-advanced[open] {
  display: grid;
  gap: 12px;
  padding-bottom: 14px;
}

.ub-result {
  display: grid;
  gap: 10px;
  padding: 16px;
  background: var(--bg-panel);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  border-radius: var(--radius);
}

.ub-code {
  display: block;
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg-input);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow-wrap: anywhere;
}

.ub-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ub-template {
  display: grid;
  gap: 10px;
}

.ub-template-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.ub-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ub-template-title {
  font-size: 14px;
  font-weight: 600;
}

.ub-steps {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 20px;
  font-size: 13.5px;
  color: var(--text-dim);
}

.ub-private {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-dim);
}

.ub-private svg {
  flex: none;
  color: var(--accent);
}

@media (max-width: 720px) {
  .ub {
    padding: 16px;
  }
  .ub-group {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
  .ub-group-name {
    padding-top: 0;
  }
  .ub-pair,
  .ub-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .ub-actions .btn {
    flex: 1 1 100%;
  }
}

/* ---------------- /tools, the tag checker, the estimator, the checklist (src/content/freeTools.ts) ---------------- */

.tools-cards {
  margin-top: 28px;
}

.tool-card {
  padding-left: 64px;
}

.tool-icon {
  position: absolute;
  top: 50%;
  left: 20px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 9px;
  transform: translateY(-50%);
}

.tc-row {
  display: flex;
  gap: 10px;
}

.tc-row .ub-input {
  flex: 1 1 auto;
  min-width: 0;
}

.tc-row .btn {
  flex: none;
}

#result:empty {
  display: none;
}

.tc-result {
  display: grid;
  gap: 14px;
  padding: 18px;
  background: var(--bg-panel);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  border-radius: var(--radius);
}

.tc-head {
  display: grid;
  gap: 4px;
}

.tc-site {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  overflow-wrap: anywhere;
}

.tc-title {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--text);
}

.tc-line {
  color: var(--text-dim);
}

.tc-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.tc-group {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 14px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.tc-group-name {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

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

.tc-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  font-size: 14.5px;
  font-weight: 600;
}

.tc-tick {
  display: inline-flex;
  color: var(--accent);
}

.tc-id {
  padding: 2px 7px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  color: var(--text-dim);
  background: var(--bg-input);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow-wrap: anywhere;
}

.tc-notes {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 18px;
  font-size: 13.5px;
  color: var(--text-dim);
}

.tc-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tc-steps li {
  display: grid;
  gap: 10px;
  padding: 20px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
}

.tc-steps b {
  color: var(--text);
}

.tc-steps span {
  color: var(--text-dim);
}

.tc-step-no {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--accent) !important;
}

.blocker {
  margin-top: 28px;
}

.blocker-source {
  margin-top: 18px;
  font-size: 13px;
  color: var(--text-dim);
}

.lead-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 14px 32px;
  align-items: center;
  max-width: 960px;
  margin-inline: auto;
  padding: 28px;
  background: var(--bg-raised);
  box-shadow: var(--shadow-card);
}

.lead-title {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.lead-line {
  margin-top: 6px;
  color: var(--text-dim);
}

.lead-row {
  display: flex;
  gap: 10px;
}

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

.lead-row .btn {
  flex: none;
}

.lead-card .turnstile,
.lead-note {
  grid-column: 2;
}

.lead-note {
  font-size: 12.5px;
  color: var(--text-faint);
}

@media (max-width: 720px) {
  .tc-row,
  .lead-row {
    flex-direction: column;
  }
  .tc-groups,
  .tc-steps,
  .lead-card {
    grid-template-columns: minmax(0, 1fr);
  }
  .lead-card {
    padding: 20px;
  }
  .lead-card .turnstile,
  .lead-note {
    grid-column: auto;
  }
  .lead-title {
    font-size: 22px;
  }
}

/* ================================================================
   The warm redesign (docs/style.md, 2026-10-21). Serif headlines on
   marketing pages, mono labels, app windows, big numbers, alternating
   paper, tint and blue bands. Motion lives in marketing.js and is off
   under prefers-reduced-motion.
   ================================================================ */

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

.marketing h1,
.marketing .section-title,
.marketing .page-title,
.marketing .closing-title,
.marketing .promise-title,
.marketing .gap-statement,
.marketing .estimator-title,
.marketing .step-card-title,
.marketing .mode-title,
.marketing .pick-title,
.marketing .faq-q,
.marketing .plan-name {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.015em;
}

.marketing .hero-title {
  font-size: 54px;
  line-height: 1.06;
  letter-spacing: -0.025em;
  font-weight: 500;
}

.marketing .page-title {
  font-size: 48px;
  line-height: 1.08;
  font-weight: 500;
}

.marketing .section-title {
  font-size: 44px;
  line-height: 1.1;
  font-weight: 500;
}

.marketing .section-sub {
  font-size: 17px;
  line-height: 1.55;
}

.marketing .section-eyebrow {
  font-size: 11.5px;
  letter-spacing: 0.12em;
  color: var(--text-faint);
}

.step-label {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.step-label-no {
  color: var(--accent);
}

.found {
  color: var(--found);
}

.lost {
  color: var(--lost);
}

/* ---------------- sections: paper, tint, blue ---------------- */

.wsec {
  padding-block: 104px;
}

.wsec-tint {
  background: var(--bg-tint);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.wsec-tint + .section,
.section + .wsec-tint {
  border-top-color: var(--line);
}

.wsec-blue {
  border-top: none;
}

.wsec-paper + .wsec-paper {
  border-top: 1px solid var(--line);
}

.wsec-head {
  max-width: 780px;
  margin: 0 auto 52px;
  text-align: center;
}

.wsec-head .section-sub {
  max-width: 58ch;
  margin: 16px auto 0;
  color: var(--text-dim);
}

.wsec-head-left {
  margin-inline: 0;
  text-align: left;
}

.frame-icon {
  display: block;
  margin: 0 auto 22px;
  color: var(--text);
}

.wsec-head-left .frame-icon {
  margin-inline: 0;
}

/* The soft blue band: a rounded panel on paper, a white title card on it. */
.blue-panel {
  position: relative;
  padding: 40px;
  background:
    radial-gradient(70% 90% at 100% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%),
    radial-gradient(60% 80% at 0% 100%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%),
    var(--brand-band);
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line));
  border-radius: 22px;
  overflow: hidden;
}

.wsec-head-card {
  max-width: 900px;
  margin-bottom: 28px;
  padding: 26px 32px 30px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
}

.wsec-head-card .section-title {
  font-size: 38px;
}

/* ---------------- app window ---------------- */

.st-window {
  position: relative;
  min-width: 0;
  /* A picture of our screens: with large text its words break inside it. */
  overflow-wrap: anywhere;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
  overflow: hidden;
}

.st-window-bar {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 64px;
  align-items: center;
  height: 38px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-raised);
}

.st-dots {
  display: flex;
  gap: 6px;
}

.st-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line-strong);
  opacity: 0.8;
}

.st-url {
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-faint);
}

.st-tag {
  justify-self: end;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--accent);
}

.st-window-body {
  padding: 18px;
}

.st-window-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 16px;
  padding: 12px 18px;
  font-size: 13px;
  color: var(--text-dim);
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-tint) 55%, var(--bg-raised));
}

.window-caption {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  text-align: center;
}

/* ---------------- big numbers ---------------- */

.bignum {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

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

.bignum-value {
  font-family: var(--serif);
  font-size: 44px;
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text);
}

.bignum-lost .bignum-value {
  color: var(--lost);
}

.bignum-found .bignum-value {
  color: var(--found);
}

.bignum-caption {
  font-size: 13px;
  color: var(--text-dim);
}

/* ---------------- pills and chips ---------------- */

.pill-row,
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pill-row-center,
.chip-row.strip-chips {
  justify-content: center;
}

.pill-row-center {
  margin-top: 40px;
}

.pill-plain {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 4px 14px 4px 11px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.pill-plain .tick-svg {
  color: var(--accent);
}

.chip-row li {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 4px 14px;
  font-size: 14px;
  color: var(--text);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.chip-mini {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-dim);
  background: var(--bg-tint);
  border: 1px solid var(--line);
  border-radius: 999px;
  white-space: nowrap;
}

.chip-mini.is-on {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: transparent;
}

/* ---------------- hero ---------------- */

.home-hero,
.pricing-hero {
  padding-block: 72px 96px;
}

.marketing .hero-grid {
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  gap: 56px;
}

.marketing .hero-lead {
  margin-top: 22px;
  font-size: 18px;
  line-height: 1.55;
  max-width: 30em;
}

/* The button tray: both calls to action in one quiet card. */
.cta-tray {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
  padding: 10px;
  background: color-mix(in srgb, var(--bg-raised) 70%, transparent);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
}

.hero-try {
  margin-top: 16px;
  font-size: 14px;
  color: var(--text-dim);
}

.hero-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--text-faint);
}

/* Each fact is its own item with its own dot, so a wrapped row stays aligned. */
.hero-dots li {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.hero-dots li::before {
  content: '';
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--accent);
}

/* The hero headline is always two lines: "Know which platforms" and
   "drive <word>." Each line stays whole; the font size below keeps the
   first line inside the column down to a 360px phone. */
.hero-title .hero-line {
  display: block;
  /* Each line is chosen to fit whole from 360px up, so it never breaks there.
     With large text (a phone's text size, browser zoom) it breaks evenly
     instead of running off the screen. */
  text-wrap: balance;
}

/* The rotating word: every word in one grid cell, so the box is as wide as
   the widest and nothing moves when it swaps. */
.rotator {
  display: inline-grid;
  justify-items: start;
  vertical-align: baseline;
}

.rotator-word {
  grid-area: 1 / 1;
  white-space: nowrap;
}

.js-motion .rotator-word {
  opacity: 0;
  transform: translateY(0.22em);
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.js-motion .rotator-word.is-on {
  opacity: 1;
  transform: none;
}

.js-motion .rotator-word.is-out {
  opacity: 0;
  transform: translateY(-0.22em);
}

/* ---------------- the hero film ---------------- */

.film {
  margin: 0;
}

.film .st-window-body {
  padding: 0;
}

.film-steps {
  /* Each step as wide as its words, spread across the bar: equal quarters cut "Sent to Meta" on phones. */
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: space-between;
  column-gap: 8px;
  margin: 0;
  padding: 12px 14px 10px;
  list-style: none;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.film-step {
  display: flex;
  align-items: center;
  gap: 7px;
  /* Each step fits on one line at every phone width; with large text it wraps
     inside its column instead of pushing the bar off the screen. */
  min-width: 0;
  transition: color 0.3s ease;
}

.film-step b {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  font-weight: 600;
  font-size: 10px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.film.is-b1 .film-step[data-step='1'],
.film.is-b2 .film-step[data-step='2'],
.film.is-b3 .film-step[data-step='3'],
.film.is-b4 .film-step[data-step='4'] {
  color: var(--accent);
}

.film.is-b1 .film-step[data-step='1'] b,
.film.is-b2 .film-step[data-step='2'] b,
.film.is-b3 .film-step[data-step='3'] b,
.film.is-b4 .film-step[data-step='4'] b {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}

.film-bar {
  height: 2px;
  margin: 0 14px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}

.film-bar i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--accent);
  transition: width 0.9s ease;
}

.film.is-b1 .film-bar i { width: 25%; }
.film.is-b2 .film-bar i { width: 50%; }
.film.is-b3 .film-bar i { width: 75%; }
.film.is-b4 .film-bar i { width: 100%; }

.film-source {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin: 16px 18px 6px;
  padding: 12px 14px;
  background: var(--bg-tint);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.film-avatar {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(135deg, #b8547a, #d4884a);
  border-radius: 50%;
}

.film-who {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  font-size: 13.5px;
}

.film-who span {
  font-size: 12px;
  color: var(--text-faint);
}

.film-link {
  position: relative;
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 6px 11px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
}

.film-link svg {
  width: 14px;
  height: 14px;
  color: var(--accent);
}

.film-tap {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 35%, transparent);
  opacity: 0;
  pointer-events: none;
}

.film.is-tap .film-tap {
  animation: film-tap 0.7s ease-out;
}

@keyframes film-tap {
  0% { opacity: 0.9; transform: scale(0.3); }
  100% { opacity: 0; transform: scale(2.2); }
}

.film-feed {
  margin: 10px 18px 0;
}

.film-row {
  display: grid;
  grid-template-columns: 62px 74px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 4px;
  font-size: 13px;
  border-bottom: 1px dashed var(--line);
}

/* Each row is an empty slot until its beat: the line stays, the words arrive. */
.film-row > * {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.film-row:last-child {
  border-bottom: none;
}

.film.is-b1 .film-row-1 > *,
.film.is-b2 .film-row-2 > *,
.film.is-b3 .film-row-3 > * {
  opacity: 1;
  transform: none;
}

.film.is-b1 .film-row-1,
.film.is-b2 .film-row-2,
.film.is-b3 .film-row-3 {
  border-bottom-style: solid;
}

.film-time {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-faint);
}

.film-ev {
  justify-self: start;
  white-space: nowrap;
  padding: 1px 8px;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 999px;
}

.ev-click {
  color: var(--accent);
  background: var(--accent-soft);
}

.ev-visit {
  color: var(--text-dim);
  background: var(--bg-active);
}

.ev-sale {
  color: var(--chip-ok-fg);
  background: var(--chip-ok-bg);
}

.film-what {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 12px;
}

.film-note {
  font-size: 12.5px;
  color: var(--text-faint);
  white-space: nowrap;
}

.film-credit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  color: var(--accent);
  transition: opacity 0.4s ease 0.6s;
}

.film:not(.is-b3) .film-row-3 .film-credit {
  opacity: 0;
}

.film-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-top: 14px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-tint) 55%, var(--bg-raised));
}

.film-foot > * {
  padding: 16px 18px 18px;
}

.film-foot > * + * {
  border-left: 1px solid var(--line);
}

.film-foot .bignum-value {
  font-size: 38px;
}

.film-meta-state {
  display: flex;
  align-items: center;
  min-height: 40px;
}

.film-wait,
.film-sent {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}

.film-wait {
  color: var(--text-faint);
}

.film-sent {
  padding: 5px 12px;
  font-weight: 600;
  color: var(--chip-ok-fg);
  background: var(--chip-ok-bg);
  border: 1px solid var(--chip-ok-line);
  border-radius: 999px;
}

.film:not(.is-b4) .film-sent,
.film.is-b4 .film-wait {
  display: none;
}

.film.is-b4 .film-sent {
  animation: film-pop 0.45s ease;
}

@keyframes film-pop {
  0% { transform: scale(0.85); opacity: 0; }
  100% { transform: none; opacity: 1; }
}

.film.is-fading .st-window-body {
  opacity: 0.25;
  transition: opacity 0.4s ease;
}

.film-caption {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--text-faint);
}

/* ---------------- platform strip and setup ---------------- */

.strip {
  /* It follows the revenue band now, not the hero, so it needs its own room above. */
  padding-block: 64px 72px;
}

.strip-line {
  margin-bottom: 14px;
  font-size: 14.5px;
  color: var(--text-dim);
  text-align: center;
}

.setup-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  max-width: 1000px;
  margin: 36px auto 0;
  padding: 18px 22px;
  background: var(--bg-tint);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.setup-band-line {
  flex: 1 1 360px;
  font-size: 14.5px;
  color: var(--text-dim);
}

.setup-band-line strong {
  color: var(--text);
}

.setup-band-link {
  font-weight: 600;
  white-space: nowrap;
}

.setup-band-list {
  gap: 6px;
}

.setup-band-list li {
  min-height: 28px;
  padding: 2px 10px;
  font-size: 12.5px;
  color: var(--text-dim);
}

/* ---------------- the gap ---------------- */

.gap-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 28px;
  align-items: center;
}

.gap-card {
  padding: 40px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
}

.gap-statement {
  font-size: 40px;
  line-height: 1.1;
}

.gap-line {
  margin-top: 18px;
  font-size: 17px;
  color: var(--text-dim);
}

.gap-fine {
  margin-top: 18px;
  font-size: 13px;
  color: var(--text-faint);
}

.journey-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.journey-row {
  display: grid;
  grid-template-columns: 14px 58px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 44px;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
}

.journey-dot {
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
}

.journey-day {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-faint);
}

.journey-row.is-sale .journey-dot {
  background: var(--accent);
  border-color: var(--accent);
}

.journey-row.is-sale .journey-day {
  color: var(--accent);
}

.journey-row.is-sale .journey-what {
  font-weight: 600;
}

.journey-totals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.journey-totals .bignum {
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.journey-totals .bignum-value {
  font-size: 36px;
}

/* ---------------- four steps ---------------- */

.step-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 30px 30px 26px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
}

.step-card-title {
  font-size: 27px;
  line-height: 1.15;
}

.step-card-line {
  margin-top: 8px;
  color: var(--text-dim);
}

.step-card-visual {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-height: 132px;
  margin-top: 22px;
  padding: 18px;
  background: var(--bg-tint);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.step-card-visual > * {
  width: 100%;
}

.mini-code {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 12px 14px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.mini-code code {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
  /* Breaks at the spaces first, so the script address stays whole instead of splitting inside "https". */
  overflow-wrap: anywhere;
}

.mini-linkcard {
  padding: 14px 16px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.mini-linkcard-short {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 14px;
}

/* With large text the short address breaks inside the card. */
.mini-linkcard-short > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.mini-linkcard-short svg {
  color: var(--accent);
}

.mini-linkcard-label {
  margin: 12px 0 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.mini-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mini-chips li {
  padding: 3px 10px;
  font-size: 12.5px;
  color: var(--text-dim);
  background: var(--bg-tint);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.mini-chips li.is-on {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}

.mini-path {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.mini-path li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px;
}

.mini-path li + li {
  border-left: 1px solid var(--line);
}

.mini-path-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.mini-path-value {
  font-family: var(--serif);
  font-size: 26px;
  font-variant-numeric: tabular-nums lining-nums;
}

.mini-path li:last-child .mini-path-value {
  color: var(--found);
}

.mini-sync {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(24px, 1fr) minmax(0, auto);
  align-items: center;
  /* With large text the words break inside the boxes, so the card keeps to the screen. */
  overflow-wrap: anywhere;
}

.sync-from {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  font-weight: 600;
  font-size: 14px;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 10px;
}

.sync-mark {
  color: var(--accent);
}

.sync-sub {
  font-weight: 400;
  font-size: 12px;
  color: var(--text-dim);
}

.sync-lines {
  width: 100%;
  height: 70px;
  overflow: visible;
}

.sync-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-dasharray: 3 4;
  vector-effect: non-scaling-stroke;
}

.js-motion .sync-line:not(.sync-line-off) {
  animation: sync-flow 1.2s linear infinite;
}

@keyframes sync-flow {
  to { stroke-dashoffset: -14; }
}

.sync-line-off {
  stroke: var(--line-strong);
}

.sync-to {
  display: grid;
  gap: 8px;
}

.sync-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: min(128px, 100%);
  padding: 9px 12px;
  font-size: 14px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.sync-ok {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--chip-ok-fg);
}

.sync-card.is-off strong {
  color: var(--text-dim);
}

/* ---------------- split rows ---------------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 64px;
  align-items: center;
}

.split-flip {
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
}

.split-copy .section-title {
  font-size: 42px;
}

.split-lead {
  margin-top: 16px;
  font-size: 17px;
  color: var(--text-dim);
}

.checks-lg {
  margin: 22px 0 22px;
  font-size: 16px;
}

.checks-lg li {
  margin-bottom: 10px;
}

/* ---------------- ad sets table ---------------- */

.ads .st-window-body {
  padding: 4px 0 0;
}

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

.ads-table th,
.ads-table td {
  padding: 12px 18px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.ads-table thead th {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.ads-table thead th.ads-ours {
  color: var(--accent);
}

.ads-table tbody th,
.ads-table tfoot th {
  font-weight: 500;
}

.ads-table tfoot th,
.ads-table tfoot td {
  border-bottom: none;
  font-weight: 600;
}

.ads-table .num {
  text-align: right;
  white-space: nowrap;
}

.ads-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.ads-meta .cross-svg {
  color: var(--lost);
}

.ads-pill {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  min-width: 64px;
  padding: 3px 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 7px;
}

.ads-pill-strong {
  color: var(--accent-ink);
  background: var(--accent);
}

/* ---------------- estimator ---------------- */

.estimator {
  margin-top: 64px;
  padding: 36px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
}

.estimator-title {
  font-size: 30px;
  line-height: 1.15;
}

.estimator-sub {
  margin-top: 8px;
  color: var(--text-dim);
  max-width: 60ch;
}

.estimator-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 32px;
  margin-top: 26px;
}

.estimator-inputs {
  display: grid;
  gap: 14px;
  align-content: start;
}

.estimator-inputs .field {
  margin: 0;
}

.estimator-out {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-content: start;
}

.estimator-out .bignum {
  padding: 18px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.estimator-out .bignum-value {
  font-size: 48px;
}

.estimator-formula {
  grid-column: 1 / -1;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--text-dim);
  background: var(--bg-tint);
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
}

/* ---------------- pick what you run ---------------- */

.pick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pick-card {
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  min-height: 100%;
  color: inherit;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.pick-card:hover {
  text-decoration: none;
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  box-shadow: var(--shadow-panel);
}

.pick-no {
  grid-row: 1 / span 2;
  padding: 18px 0 0;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--accent);
  text-align: center;
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-raised));
  border-right: 1px solid var(--line);
}

.pick-icon {
  display: none;
}

.pick-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 120px 22px 20px;
}

.pick-title {
  font-size: 23px;
  line-height: 1.2;
}

.pick-line {
  color: var(--text-dim);
}

.pick-see {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-faint);
}

.pick-go {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text);
  background: var(--bg-tint);
  border: 1px solid var(--line);
  border-radius: 7px;
}

.pick-go svg {
  width: 13px;
  height: 13px;
  transition: transform 0.15s ease;
}

.pick-card:hover .pick-go svg {
  transform: translateX(2px);
}

/* ---------------- agencies: the sites window ---------------- */

.sites .st-window-body {
  padding: 0;
}

.sites-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}

.sites-filter-label {
  margin-right: 4px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.sites-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sites-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto 76px 88px;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}

.sites-fav {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  font-weight: 700;
  font-size: 13px;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 8px;
}

.sites-name {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
  font-size: 14px;
}

.sites-name span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-faint);
}

.sites-num {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.3;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.sites-sub {
  font-weight: 400;
  font-size: 11px;
  color: var(--text-faint);
}

.sites-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-dim);
}

.sites-share .pill {
  margin-left: auto;
  font-family: var(--sans);
}

/* ---------------- private by default ---------------- */

.mode-grid,
.usecase-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 960px;
  margin-inline: auto;
}

.usecase-points {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: none;
}

.mode-card {
  padding: 30px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
}

.mode-tag {
  display: inline-block;
  margin-bottom: 12px;
  padding: 2px 9px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: var(--bg-tint);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.mode-tag-accent {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: transparent;
}

.mode-title {
  font-size: 26px;
  margin-bottom: 14px;
}

.usecase-line {
  color: var(--text-dim);
}

/* ---------------- plans, restyled ---------------- */

.marketing .plan-card {
  position: relative;
  background: var(--bg-raised);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
}

.marketing .plan-card.highlight {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), var(--shadow-panel);
}

.marketing .plan-name {
  font-size: 24px;
}

.marketing .plan-amount {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 44px;
}

/* Two lines held for every tagline and billing line, so prices and feature lists start level across cards side by side. */
.marketing .plan-tagline {
  line-height: 1.6;
}

@media (min-width: 641px) {
  .marketing .plan-tagline,
  .marketing .pricing-cards .plan-billing {
    line-height: 1.6;
    min-height: 3.2em;
  }
}

/* /pricing cards: name in small caps, the price, the rows that differ
   between plans (a check or a muted cross), one button. Free sits under
   them as one quiet row, Custom as the wide card. */
.marketing .pricing-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1040px;
  margin-inline: auto;
}

.marketing .pricing-cards .plan-name {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.marketing .pricing-cards .plan-price {
  margin-top: 10px;
}

.marketing .pricing-cards .plan-amount {
  font-size: 48px;
  line-height: 1.05;
}

.marketing .pricing-cards .plan-period {
  font-size: 15px;
}

/* Every billing line here is one short line: nothing to hold level. */
@media (min-width: 641px) {
  .marketing .pricing-cards .plan-billing {
    min-height: 0;
  }
}

.plan-checks {
  flex: 1 1 auto;
  margin: 20px 0 24px;
  padding: 18px 0 0;
  list-style: none;
  font-size: 14.5px;
  border-top: 1px solid var(--line);
}

.plan-checks li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  line-height: 1.45;
}

.plan-checks li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: calc(var(--check-pad, 0px) + 0.42em);
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--chip-ok-fg);
  border-bottom: 2px solid var(--chip-ok-fg);
  transform: rotate(-45deg);
}

.plan-checks li.is-off {
  color: var(--text-faint);
}

.plan-checks li.is-off::before,
.plan-checks li.is-off::after {
  content: '';
  top: calc(var(--check-pad, 0px) + 0.68em);
  left: 3px;
  width: 11px;
  height: 0;
  border: 0;
  border-top: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.plan-checks li.is-off::after {
  position: absolute;
  transform: rotate(-45deg);
}

.plan-checks a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}

.plan-checks a:hover {
  color: var(--accent);
  text-decoration-color: currentColor;
}

.plan-term summary {
  display: inline;
  cursor: pointer;
  list-style: none;
  text-decoration: underline dashed;
  text-decoration-color: var(--text-faint);
  text-underline-offset: 4px;
  border-radius: 4px;
}

.plan-term summary::-webkit-details-marker {
  display: none;
}

.plan-term summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* On a phone a term opens by touch, so its row is a 44px target (docs/style.md).
   Every row takes the same height, with or without a term, so the list keeps
   one rhythm: the 10px gap between rows becomes padding inside them. */
@media (max-width: 500px) {
  .plan-checks li {
    --check-pad: 11.5px;
    margin-bottom: 0;
    padding-block: var(--check-pad);
  }
  .plan-term summary {
    display: block;
    margin-block: calc(-1 * var(--check-pad));
    padding-block: var(--check-pad);
  }
}

.plan-term p {
  margin: 6px 0 2px;
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-dim);
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.plan-checks li.is-off .plan-term p {
  color: var(--text-dim);
}

.plan-due {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
  color: var(--text-faint);
}

/* Under each trial button: the card and wallet marks, then "Secure checkout
   by Stripe". The marks keep their white badge in dark mode, as brands ask. */
.buy-badges {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin-top: 14px;
}

.buy-badge-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.buy-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 26px;
  border: 1px solid #d9dde3;
  border-radius: 4px;
  background: #fff;
  /* The chip is white in both themes, so its name (read by screen readers, clipped from view) is ink in both: the dark theme's light text on white measured 1.2:1. */
  color: #1f1d1a;
}

.buy-secure,
.buy-guarantee {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--text-dim);
  font-size: 12.5px;
  line-height: 1.4;
}

.buy-line-icon {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The money back, once, centered under the paid cards. */
.pricing-guarantee {
  display: flex;
  justify-content: center;
  margin: 20px 0 8px;
}

/* Free: the same card language, quieter than the paid plans (panel, no
   shadow, a smaller price), in a row like Custom with room for its lines. */
.marketing .plan-free {
  display: grid;
  grid-template-columns: minmax(140px, 0.75fr) minmax(0, 2.5fr) minmax(200px, 0.9fr);
  align-items: center;
  gap: 16px 32px;
  max-width: 1040px;
  margin: 16px auto 0;
  padding: 22px 24px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  box-shadow: none;
}

.marketing .plan-free .plan-name {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.marketing .plan-free .plan-price {
  margin-top: 6px;
}

.marketing .plan-free .plan-amount {
  font-size: 36px;
  line-height: 1.05;
}

.marketing .plan-free .plan-period {
  font-size: 14px;
}

/* What Free has down the first column, what it lacks at the end. Two
   columns where each line fits whole; one below that. */
.plan-free-checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  font-size: 14px;
  border-top: 0;
}

.plan-free-checks li {
  margin: 0;
}

@media (max-width: 1099px) {
  .plan-free-checks {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-flow: row;
  }
}

.plan-free-action {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.plan-free-nudge {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
  color: var(--text-faint);
}

.plan-free-nudge a {
  color: var(--text-dim);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}

.plan-free-nudge a:hover {
  color: var(--accent);
  text-decoration-color: currentColor;
}

.marketing .pricing-cards ~ .plan-wide {
  max-width: 1040px;
  margin-inline: auto;
}

@media (max-width: 1099px) {
  .marketing .pricing-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 1040px;
  }
}

@media (max-width: 900px) {
  .marketing .pricing-cards {
    grid-template-columns: minmax(0, 1fr);
    max-width: 480px;
  }

  .marketing .plan-free {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 0;
    max-width: 480px;
  }

  .plan-free-checks {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
  }

  .plan-free-action {
    margin-top: 12px;
  }
}

/* ---------------- plan finder ---------------- */

.finder .st-window-body {
  padding: 6px 22px 22px;
}

.finder-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.8fr);
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.finder-label {
  font-size: 14.5px;
}

.finder-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 14.5px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}

.finder-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.finder-result {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}

.finder-result > div:first-child {
  display: flex;
  flex-direction: column;
}

.finder-result-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.finder-result-name {
  font-family: var(--serif);
  font-size: 34px;
  line-height: 1.1;
}

.finder-result-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--serif);
  font-size: 34px;
  color: var(--accent);
}

.finder-result-per {
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--text-dim);
}

/* The finder's "See Studio above" lands with the card's flag clear of the header. */
.marketing [data-plan-card] {
  scroll-margin-top: 28px;
}

.finder-stage {
  max-width: 560px;
  margin-inline: auto;
}

.finder-see {
  display: flex;
  justify-content: center;
  margin-top: 14px;
  font-size: 14px;
}

.finder-note {
  margin: 6px 0 16px;
  font-size: 13.5px;
  color: var(--text-dim);
}

.plan-card.is-match {
  animation: plan-match 0.5s ease;
}

@keyframes plan-match {
  0% { transform: translateY(0); }
  40% { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}

/* ---------------- promise band ---------------- */

.promise {
  padding-block: 96px;
}

.promise-card {
  max-width: 880px;
  margin-inline: auto;
  padding: 52px 40px 44px;
  text-align: center;
  background:
    radial-gradient(80% 60% at 50% 0%, var(--accent-soft), transparent 70%),
    var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow-card);
}

.promise-card .frame-icon {
  margin: 0 auto 18px;
}

.promise-title {
  font-size: 46px;
  line-height: 1.1;
}

.promise-line {
  max-width: 52ch;
  margin: 16px auto 0;
  font-size: 17px;
  color: var(--text-dim);
}

.promise-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}

.promise-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 0;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--text-faint);
}

.promise-facts li + li::before {
  content: '·';
  margin: 0 10px;
}

/* ---------------- FAQ, restyled ---------------- */

.marketing .faq {
  max-width: 820px;
  padding: 6px 28px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
}

.marketing .faq-q {
  min-height: 64px;
  padding: 16px 0;
  font-size: 19px;
  background: transparent;
}

.marketing .faq-q:hover {
  background: transparent;
  color: var(--accent);
}

.marketing .faq-item[open] > .faq-q {
  background: transparent;
}

.marketing .faq-chevron {
  width: 26px;
  height: 26px;
  padding: 5px;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 50%;
}

.marketing .faq-a {
  padding: 0 0 20px;
  background: transparent;
}

.marketing .faq-a p {
  font-size: 15.5px;
}

/* ---------------- closing band ---------------- */

.marketing .closing {
  padding-block: 104px;
  background:
    radial-gradient(70% 90% at 50% 100%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 72%),
    var(--bg-tint);
  border-top: 1px solid var(--line);
}

.marketing .closing-title {
  font-size: 48px;
  line-height: 1.1;
}

.marketing .closing-line {
  font-size: 17px;
}

/* ---------------- use case pages ---------------- */

.usecase-hero {
  padding-block: 88px 96px;
}

.usecase-hero-inner {
  max-width: 820px;
  text-align: center;
}

.usecase-hero .hero-lead {
  margin-inline: auto;
}

.usecase-others {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

/* ---------------- setup call ---------------- */

.call-hero {
  padding-block: 72px 96px;
}

.call-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

.call-list {
  display: grid;
  gap: 18px;
  margin: 32px 0 30px;
  padding: 0;
  list-style: none;
}

.call-list li {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--text-dim);
}

.call-list .frame-icon {
  flex: 0 0 auto;
  margin: 0;
  width: 46px;
  height: 35px;
}

.call-list strong {
  color: var(--text);
}

.call-card {
  padding: 30px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-panel);
}

/* Client sites and traffic: asked only for a Custom plan. Without :has() they always show. */
.call-size {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 14px; /* the form's own 16px rhythm when stacked */
}

@supports selector(:has(*)) {
  /* The day and time share the grid but are asked of everyone. */
  .form:not(:has(#f-plan option[value='custom']:checked)) .call-size:not(.call-slot) {
    display: none;
  }
}

@media (max-width: 480px) {
  .call-size {
    grid-template-columns: minmax(0, 1fr);
  }
}

.call-platforms,
.call-when {
  margin: 0;
  padding: 0;
  border: 0;
}

.call-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}

/* The honeypot: off screen for people, there for bots. */
.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.call-thanks {
  padding-block: 96px;
}

/* ---------------- reveal on scroll ---------------- */

.js-motion .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.js-motion .reveal.is-in {
  opacity: 1;
  transform: none;
}

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

@media (max-width: 1100px) {
  .marketing .hero-title {
    font-size: 46px;
  }
  .split,
  .split-flip {
    gap: 40px;
  }
}

@media (max-width: 960px) {
  .marketing .hero-grid,
  .gap-grid,
  .split,
  .split-flip,
  .call-grid,
  .estimator-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .split-flip .split-visual {
    order: 2;
  }
  .split .split-copy {
    order: -1;
  }
  .wsec {
    padding-block: 80px;
  }
  .marketing .section-title {
    font-size: 38px;
  }
  .usecase-points {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .home-hero,
  .pricing-hero,
  .call-hero {
    padding-block: 32px 64px;
  }
  .marketing .hero-title {
    font-size: clamp(30px, 9.4vw, 40px);
    line-height: 1.08;
  }
  .marketing .page-title {
    font-size: 36px;
  }
  .marketing .hero-lead {
    font-size: 16.5px;
  }
  .cta-tray {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .cta-tray .btn {
    width: 100%;
  }
  .wsec {
    padding-block: 64px;
  }
  .wsec-head {
    margin-bottom: 36px;
  }
  .marketing .section-title,
  .split-copy .section-title {
    font-size: 32px;
  }
  .wsec-head-card .section-title {
    font-size: 28px;
  }
  .marketing .section-sub {
    font-size: 16px;
  }
  .blue-panel {
    margin-inline: calc(var(--gutter) * -1 + 8px);
    padding: 16px 12px;
    border-radius: 18px;
  }
  .wsec-head-card {
    padding: 20px 18px 22px;
  }
  .step-grid,
  .pick-grid,
  .mode-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .step-card,
  .mode-card {
    padding: 22px 20px;
  }
  .step-card-title {
    font-size: 24px;
  }
  .step-card-visual {
    padding: 12px;
  }
  .gap-card {
    padding: 26px 22px;
  }
  .gap-statement {
    font-size: 32px;
  }
  .st-window-body {
    padding: 14px;
  }
  .bignum-value {
    font-size: 36px;
  }
  .estimator {
    margin-top: 44px;
    padding: 22px 18px;
  }
  .estimator-title {
    font-size: 25px;
  }
  .estimator-out .bignum {
    padding: 14px;
  }
  .estimator-out .bignum-value {
    font-size: 34px;
  }
  .pick-text {
    padding: 18px 16px 12px;
  }
  .pick-card {
    grid-template-columns: 44px minmax(0, 1fr);
  }
  .pick-go {
    position: static;
    grid-column: 2;
    justify-self: start;
    margin: 0 16px 18px;
  }
  .sites-row {
    grid-template-columns: 30px minmax(0, 1fr) 80px;
  }
  .sites-row .chip-mini,
  .sites-row .sites-visitors {
    display: none;
  }
  .promise {
    padding-block: 64px;
  }
  .promise-card {
    padding: 36px 20px 30px;
  }
  .promise-title {
    font-size: 32px;
  }
  .promise-actions .btn {
    flex: 1 1 200px;
  }
  .marketing .faq {
    padding: 2px 18px;
  }
  .marketing .faq-q {
    font-size: 17px;
  }
  .marketing .closing {
    padding-block: 72px;
  }
  .marketing .closing-title {
    font-size: 34px;
  }
  .ads-table th,
  .ads-table td {
    padding: 11px 12px;
  }
  .ads-table {
    font-size: 13.5px;
  }
  .ads-pill {
    min-width: 0;
  }
  .ads-pill .tick-svg {
    display: none;
  }
  /* Wide enough for "Purchase" on one line; it broke as "Purchas" over "e" at 66px. */
  .film-row {
    grid-template-columns: 76px minmax(0, 1fr) auto;
  }
  .film-time {
    display: none;
  }
  .film-steps {
    font-size: 9.5px;
    letter-spacing: 0.04em;
    padding-inline: 10px;
  }
  .film-step {
    gap: 4px;
  }
  .film-step b {
    width: 16px;
    height: 16px;
  }
  .film-source {
    margin-inline: 12px;
  }
  .film-link {
    margin-left: 0;
  }
  .film-feed {
    margin-inline: 12px;
  }
  .film-foot > * {
    padding: 14px;
  }
  .film-foot .bignum-value {
    font-size: 32px;
  }
  .finder .st-window-body {
    padding: 4px 16px 18px;
  }
  .finder-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
  .call-card {
    padding: 20px 16px;
  }
  .setup-band {
    padding: 16px;
  }
  .strip {
    padding-block: 48px 56px;
  }
  .journey-row {
    grid-template-columns: 12px 50px minmax(0, 1fr);
    font-size: 14px;
  }
  .journey-totals .bignum-value {
    font-size: 30px;
  }
}

@media (max-width: 420px) {
  .film-step:nth-child(4) {
    letter-spacing: 0;
  }
  .mini-path {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mini-path li:nth-child(3) {
    border-left: none;
  }
  .mini-path li:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }
  .mini-sync {
    grid-template-columns: auto minmax(24px, 1fr) auto;
  }
  .sync-card {
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js-motion .reveal,
  .js-motion .rotator-word {
    opacity: 1;
    transform: none;
  }
}

/* ---------------- footer, four columns ---------------- */

.footer-promise {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--accent);
}

/* ================================================================
   Phase 2 pages: /how-it-works, /for/*, /platforms/*, /walkthroughs,
   /demo and the Product menu. Built from the same tokens and pieces
   as the home page; only what those pages add lives here.
   ================================================================ */

.section-actions {
  flex-wrap: wrap;
  gap: 4px 28px;
}

/* ---------------- page heroes (two lines, like home) ---------------- */

.page-hero {
  padding-block: 72px 96px;
}

.page-hero .hero-try {
  margin-top: 12px;
}

.page-hero .hero-try .text-link {
  min-height: 32px;
}

/* ---------------- card grids ---------------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.card-grid-4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.info-card {
  display: flex;
  flex-direction: column;
}

.info-card .mode-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
}

.info-card-lost .mode-tag {
  color: var(--lost);
}

.info-card-lost .cross-svg {
  color: var(--lost);
}

.info-card .mode-title {
  font-size: 23px;
  margin-bottom: 8px;
}

.info-card-visual {
  margin-top: auto;
  padding-top: 20px;
}

.mini-num {
  padding: 14px 16px;
  background: var(--bg-tint);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.mini-num .bignum-value {
  font-size: 34px;
}

.problem-nums {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 980px;
  margin-inline: auto;
}

.problem-nums .mini-num {
  padding: 22px 22px 20px;
  background: var(--bg-raised);
  box-shadow: var(--shadow-card);
}

.problem-nums .bignum-value {
  font-size: 44px;
}

.problem-nums + .window-caption a {
  color: inherit;
  text-decoration: underline;
}

/* ---------------- numbered set up steps ---------------- */

.step-rows {
  display: grid;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step-row {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 48px;
  align-items: center;
  padding: 32px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
}

.step-row-flip {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

.step-row-flip .step-row-copy {
  order: 2;
}

.step-row-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin-bottom: 16px;
}

.step-row-visual {
  min-width: 0;
}

.step-row-visual .st-window {
  box-shadow: var(--shadow-card);
}

/* ---------------- link chips ----------------
   The one look for a chip that is a link (blocks.ts linkChip): a bordered
   pill with a small arrow that moves on hover, a lift and an accent border.
   Static words (chipRow, pillRow) have no border and no hover, so the two
   never get mixed up. */

.link-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.link-chips-center {
  justify-content: center;
}

.link-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 5px 10px 5px 13px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--text);
  text-decoration: none;
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--line-strong) 45%, transparent);
  transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.link-chip:hover {
  color: var(--accent);
  text-decoration: none;
  border-color: var(--accent);
  box-shadow: var(--shadow-card);
  transform: translateY(-1px);
}

.link-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.link-chip-arrow {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: var(--accent);
  transition: transform 0.15s ease;
}

.link-chip:hover .link-chip-arrow {
  transform: translateX(2px);
}

@media (max-width: 720px) {
  /* A full 44px tap target on phones, for both sizes. */
  .link-chip {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .link-chip,
  .link-chip-arrow {
    transition: none;
  }
  .link-chip:hover,
  .link-chip:hover .link-chip-arrow {
    transform: none;
  }
}

/* The install row takes the band's full width, so it stays on one line on a desk. */
.setup-band {
  max-width: none;
}

/* Static words and facts: no border, no shadow, no hover. */
.chip-row li {
  min-height: 30px;
  padding: 3px 11px;
  font-size: 13.5px;
  color: var(--text-dim);
  background: var(--bg-tint);
  border: none;
  border-radius: 8px;
}

.pill-plain {
  background: transparent;
  border: none;
  padding-inline: 4px 8px;
}

/* ---------------- replicas of our own screens ---------------- */

.rep-title {
  margin-bottom: 12px;
  font-weight: 600;
  font-size: 15px;
}

.rep-title-flat {
  margin: 0;
}

.rep-label {
  display: block;
  margin-bottom: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-dim);
}

.rep-label-gap {
  margin-top: 14px;
}

.rep-field {
  margin-bottom: 12px;
}

.rep-input {
  display: block;
  overflow: hidden;
  min-height: 38px;
  padding: 8px 11px;
  font-size: 13.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text);
  background: var(--bg-input, var(--bg-raised));
  border: 1px solid var(--line-strong);
  border-radius: 8px;
}

.rep-mono,
.rep-code code,
.rep-tpl-code {
  font-family: var(--mono);
  font-size: 12px;
}

.rep-hint {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-faint);
}

.rep-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rep-chips li {
  padding: 3px 10px;
  font-size: 12.5px;
  color: var(--text-dim);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.rep-chips li.is-on {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}

.rep-groups {
  display: grid;
  gap: 8px;
}

.rep-group {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
}

.rep-group-name {
  padding-top: 4px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.rep-short {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-top: 16px;
  padding-top: 14px;
  font-family: var(--mono);
  font-size: 13.5px;
  border-top: 1px solid var(--line);
}

.rep-short svg {
  color: var(--accent);
}

.rep-short .rep-btn {
  margin-left: auto;
  font-family: var(--sans, inherit);
}

.rep-short-flat {
  margin: 0;
  padding: 0;
  border: 0;
}

.rep-dest {
  margin: 4px 0 14px;
}

.rep-btn {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 4px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
}

.rep-btn-primary {
  margin-top: 4px;
  color: var(--cta-ink);
  background: var(--cta);
  border-color: var(--cta);
}

.rep-btn-quiet {
  border-color: transparent;
  color: var(--text-dim);
}

.rep-row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.rep-code {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 10px;
  padding: 10px 10px 10px 12px;
  background: var(--bg-tint);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.rep-code code {
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-all;
}

.rep-ok {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--chip-ok-fg);
}

.rep-tpl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.rep-tpl-title {
  font-weight: 600;
  font-size: 14px;
}

.rep-tpl-code {
  display: block;
  padding: 10px 12px;
  line-height: 1.55;
  word-break: break-all;
  background: var(--bg-tint);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.rep-steps {
  margin: 12px 0 0;
  padding-left: 20px;
  font-size: 13px;
  color: var(--text-dim);
}

.rep-steps li + li {
  margin-top: 4px;
}

.rep-kinds {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.rep-kind {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text-faint);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.rep-kind strong {
  font-size: 13.5px;
  color: var(--text);
}

.rep-kind.is-on {
  color: var(--text-dim);
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}

.rep-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.rep-pill-ok {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--chip-ok-fg);
  background: var(--chip-ok-bg);
  border: 1px solid var(--chip-ok-line);
  border-radius: 999px;
  white-space: nowrap;
}

.rep-goals {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rep-goals li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.rep-check {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--line-strong);
  border-radius: 5px;
}

.rep-check.is-on {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}

.rep-check .tick-svg {
  width: 12px;
  height: 12px;
}

.rep-goal-name {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: 13px;
  line-height: 1.3;
}

.rep-goal-name code {
  font-size: 11.5px;
  color: var(--text-faint);
}

.rep-select {
  padding: 4px 10px;
  font-size: 12.5px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
}

.rep-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}

.rep-tabs li {
  padding: 3px 9px;
  font-size: 12px;
  color: var(--text-dim);
  border-radius: 7px;
}

.rep-tabs li.is-on {
  color: var(--text);
  font-weight: 600;
  background: var(--bg-active);
}

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

.rep-table th,
.rep-table td {
  padding: 9px 8px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.rep-table thead th {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.rep-table tbody th {
  font-weight: 500;
}

.rep-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.rep-table tr:last-child th,
.rep-table tr:last-child td {
  border-bottom: none;
}

.rep-sub {
  display: block;
  font-size: 11.5px;
  color: var(--text-faint);
}

/* The bar behind each name, as in the dashboard. */
.rep-bars tbody th span {
  position: relative;
  display: block;
  padding: 2px 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 12.5px;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--accent-soft) var(--w), transparent var(--w));
}

.rep-bars tr.is-hit tbody th span,
.rep-bars tr.is-hit th span {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 22%, transparent) var(--w), transparent var(--w));
  font-weight: 700;
}

.rep-num-hit {
  font-weight: 700;
  color: var(--found);
}

.rep-bars tr.is-hit td {
  font-weight: 700;
}

.rep-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
}

.rep-path {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rep-sms-from,
.rep-mail-from {
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  color: var(--text-dim);
}

.rep-bubble {
  max-width: 88%;
  padding: 10px 14px;
  font-size: 15px;
  line-height: 1.4;
  background: var(--bg-tint);
  border: 1px solid var(--line);
  border-radius: 18px 18px 18px 6px;
}

.rep-bubble-link {
  color: var(--accent);
  text-decoration: underline;
  word-break: break-all;
}

.rep-sms-meta {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--text-faint);
}

.rep-mail-from {
  display: flex;
  flex-direction: column;
  text-align: left;
  color: var(--text);
}

.rep-mail-from span {
  font-weight: 400;
  color: var(--text-dim);
}

.rep-mail-line {
  font-size: 14px;
  color: var(--text-dim);
}

.rep-mail-btn {
  display: inline-block;
  margin-top: 14px;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--cta-ink);
  background: var(--cta);
  border-radius: 8px;
}

.rep-mail-href {
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-faint);
  word-break: break-all;
}

.rep-mail-brand {
  margin-bottom: 12px;
  font-weight: 700;
  font-size: 16px;
}

.rep-mail-site {
  margin-bottom: 12px;
  font-family: var(--serif);
  font-size: 22px;
}

.rep-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.rep-kpis > span {
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.rep-kpis strong {
  font-size: 22px;
}

.rep-up {
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  color: var(--chip-ok-fg);
}

.rep-list {
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
}

.rep-list li {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}

/* ---------------- the template, plan fit, status ---------------- */

.tpl-card {
  max-width: 820px;
  margin-inline: auto;
  padding: 26px 28px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
}

.tpl-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.tpl-card-label {
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.tpl-code {
  display: block;
  padding: 14px 16px;
  font-size: 13.5px;
  line-height: 1.6;
  word-break: break-all;
  background: var(--bg-tint);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.tpl-steps {
  margin: 16px 0 0;
  padding-left: 22px;
  color: var(--text-dim);
}

.tpl-steps li + li {
  margin-top: 6px;
}

.tpl-note {
  margin-top: 14px;
  font-size: 14px;
  color: var(--text-dim);
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  align-items: start;
  gap: 20px;
  max-width: 960px;
  margin-inline: auto;
}

.status-later {
  margin: 0;
  padding-left: 18px;
  color: var(--text-dim);
}

.status-later li + li {
  margin-top: 8px;
}

.fit-card {
  max-width: 900px;
  margin-inline: auto;
  padding: 28px 32px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
}

.fit-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 20px;
}

.fit-head .plan-name {
  font-size: 30px;
}

.fit-head .plan-amount {
  font-family: var(--serif);
  font-size: 40px;
}

.fit-head .plan-period {
  margin-left: 6px;
  color: var(--text-dim);
}

.fit-why {
  margin-top: 6px;
  font-size: 16px;
  color: var(--text-dim);
}

.fit-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 24px;
  margin: 18px 0 22px;
}

.fit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.meta-sync {
  max-width: 520px;
  margin: 32px auto 0;
  padding: 20px;
  background: var(--bg-tint);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.meta-sync-big {
  margin: 0 0 22px;
}

.journey-solo {
  max-width: 640px;
  margin-inline: auto;
}

.credit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 900px;
  margin-inline: auto;
}

.credit-winner {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1.2;
}

.credit-winner .tick-svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--accent);
}

/* The walkthrough teaser under a /for page's steps. */
.wt-teaser {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  max-width: 900px;
  margin: 28px auto 0;
  padding: 16px 22px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.wt-teaser-label {
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.wt-teaser-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-family: var(--serif);
  font-size: 20px;
}

/* ---------------- walkthroughs ---------------- */

.wt-hero {
  padding-block: 40px 88px;
}

.wt-hero-inner {
  max-width: 900px;
}

.wt-head {
  margin: 18px 0 14px;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.wt-title {
  font-size: 56px;
}

.wt-kicker {
  color: var(--text-dim);
}

.stat-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.stat-pills li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 128px;
  padding: 10px 16px 12px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.stat-pill-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.stat-pill-value {
  font-family: var(--serif);
  font-size: 28px;
  font-variant-numeric: tabular-nums lining-nums;
}

.stat-pills li:last-child .stat-pill-value {
  color: var(--found);
}

.wt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}

.wt-note {
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--text-faint);
}

.learned {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: 24px;
  max-width: 1000px;
  margin-inline: auto;
}

.learned-list {
  margin: 0;
  padding: 26px 28px 26px 52px;
  font-size: 17px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
}

.learned-list li + li {
  margin-top: 12px;
}

.learned-list li::marker {
  font-family: var(--mono);
  color: var(--accent);
}

.learned-try {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: 26px;
  background: var(--accent-soft);
  border-radius: 18px;
}

.learned-try p {
  font-size: 15.5px;
}

.wt-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.wt-cards-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wt-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px;
  color: var(--text);
  text-decoration: none;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.wt-card:hover {
  text-decoration: none;
  border-color: var(--accent);
}

.wt-card .wt-head {
  margin: 0;
}

.wt-card-title {
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1.15;
}

.wt-card-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 14px;
  color: var(--text-dim);
}

.wt-card-pills b {
  color: var(--text);
}

.wt-card-go {
  margin-top: auto;
  color: var(--accent);
}

/* Two app windows on top of each other in a hero, the second a little in. */
.hero-stack {
  display: grid;
  gap: 16px;
}

.hero-stack > .st-window + .st-window {
  margin-left: 48px;
}

/* ---------------- /demo ---------------- */

/* /demo is the app shell (src/content/demopage.ts): the badge sits by the wordmark, as a team chip does in the app. */
.demo-app .demo-badge {
  margin-left: var(--space-3);
  margin-right: auto;
  white-space: nowrap;
}

.demo-app .header-actions .btn {
  white-space: nowrap;
}

@media (max-width: 600px) {
  .demo-app .demo-tour {
    display: none;
  }
  .demo-app .demo-badge {
    margin-left: var(--space-2);
  }
  .demo-app .demo-badge-more {
    display: none;
  }
}

/* At 320 the wordmark, the badge and the button need 291px and the row has
   288, or 273 beside a classic scrollbar, so the button was squeezed and its
   words spilled out. The row gives up spacing there, never the words, the
   13px text or the 44px target. */
@media (max-width: 359px) {
  .demo-app .site-header-inner {
    gap: 6px;
  }
  .demo-app .demo-badge {
    margin-left: 0;
  }
  .demo-app .header-actions .btn {
    --btn-px: 8px;
  }
}

/* ---------------- the verdict sheet (/vs/hyros) ---------------- */

.verdict-band {
  padding-block: 0 64px;
}

.verdict {
  max-width: 860px;
  margin-inline: auto;
}

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

.verdict-table th,
.verdict-table td {
  padding: 13px 10px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.verdict-table thead th {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.verdict-table tbody th {
  font-weight: 500;
}

.verdict-table td {
  width: 24%;
}

.verdict-table tr:last-child th,
.verdict-table tr:last-child td {
  border-bottom: none;
}

.verdict-yes {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 50%;
}

.verdict-word {
  font-size: 13.5px;
  color: var(--text-dim);
}

.verdict-jump {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 12px;
  margin-top: 18px;
  font-size: 14px;
  color: var(--text-faint);
}

.verdict-jump a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}

.ads-none {
  font-size: 12px;
  color: var(--text-faint);
  white-space: nowrap;
}

/* ---------------- the Product menu ---------------- */

.nav-panel-wide {
  left: 0;
  /* Three columns: Product, By what you run, Platforms. Never wider than the screen. */
  width: min(940px, calc(100vw - 64px));
  padding: 14px;
  transform: none;
}

.nav-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

/* Each column is one list in the three-column panel, however many links it holds. */
.nav-cols .nav-panel-list-2 {
  grid-template-columns: minmax(0, 1fr);
}

.nav-cols .nav-panel-list-2 .nav-item {
  min-height: 0;
}

.nav-col-label {
  padding: 4px 10px 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.nav-col-label::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  vertical-align: 1px;
  border-radius: 2px;
  background: var(--accent);
}

.nav-panel-list-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.nav-panel-list-2 .nav-item {
  min-height: 64px;
}

.nav-more {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 10px 0 0;
  padding: 10px 0 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.nav-more-link {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
  min-height: 52px;
  padding: 8px 10px;
  color: var(--text);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  border-radius: 9px;
}

.nav-more-link svg {
  color: var(--accent);
}

.nav-more-link:hover,
.nav-more-link:focus-visible,
.nav-more-link[aria-current='page'] {
  background: var(--bg-active);
  text-decoration: none;
}

.nav-more-line {
  grid-column: 2;
  font-weight: 400;
  font-size: 12.5px;
  color: var(--text-dim);
}

/* ---------------- phase 2: responsive ---------------- */

@media (max-width: 1100px) {
  .step-row {
    gap: 32px;
    padding: 26px;
  }
}

@media (max-width: 960px) {
  .card-grid,
  .problem-nums,
  .wt-cards-3 {
    grid-template-columns: minmax(0, 1fr);
  }
  .step-row,
  .step-row-flip,
  .learned {
    grid-template-columns: minmax(0, 1fr);
  }
  .step-row-flip .step-row-copy {
    order: 0;
  }
}

@media (max-width: 720px) {
  .page-hero {
    padding-block: 32px 64px;
  }
  .step-row {
    padding: 20px 16px;
    gap: 22px;
  }
  .step-row-title {
    font-size: 25px;
  }
  .card-grid-4,
  .credit-grid,
  .wt-cards,
  .fit-list,
  .rep-two,
  .rep-kinds {
    grid-template-columns: minmax(0, 1fr);
  }
  .rep-group {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
  .rep-group-name {
    padding-top: 0;
  }
  .rep-hide-sm {
    display: none;
  }
  .tpl-card,
  .fit-card {
    padding: 20px 18px;
  }
  .wt-title {
    font-size: 38px;
  }
  .wt-hero {
    padding-block: 24px 64px;
  }
  .stat-pills li {
    flex: 1 1 calc(50% - 10px);
    min-width: 0;
  }
  .stat-pill-value {
    font-size: 24px;
  }
  .learned-list {
    padding: 20px 18px 20px 40px;
    font-size: 16px;
  }
  .verdict-table th,
  .verdict-table td {
    padding: 11px 6px;
    font-size: 13.5px;
  }
  .verdict-table td {
    width: 26%;
  }
  .problem-nums .bignum-value {
    font-size: 38px;
  }
  .meta-sync {
    padding: 14px;
  }
  .hero-stack > .st-window + .st-window {
    margin-left: 0;
  }
}

/* Home hero headline: sized from its own column, not the window, so
   "Know which platforms" fits on one line with room to spare in every serif
   the system picks (Apple's New York runs wider than Charter or Georgia).
   About 9cqi keeps a 20-character line near 90% of the column. */
.marketing .home-hero .hero-grid,
.marketing .page-hero .hero-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 72px;
}
.marketing .home-hero .hero-copy,
.marketing .page-hero .hero-copy {
  container-type: inline-size;
}
.marketing .home-hero .hero-title,
.marketing .page-hero .hero-title {
  font-size: clamp(30px, 9cqi, 56px);
}
/* The hero eyebrow stays on one line; the smallest phones get tighter tracking. */
.marketing .hero-eyebrow {
  white-space: nowrap;
}
@media (max-width: 360px) {
  .marketing .hero-eyebrow {
    letter-spacing: 0.06em;
  }
}
/* The facts under a hero never wrap mid-row on a phone. A short set (up to 50
   characters, marked .hero-dots-line) stays on one line, its type following the
   column; a longer set, or any set on the narrowest phones, stacks one per line. */
@media (max-width: 720px) {
  .marketing .hero-dots {
    flex-direction: column;
    gap: 8px;
  }
}
/* Its type is sized against the hero column, so the column is the container. */
.marketing .hero-copy:has(> .hero-dots-line) {
  container-type: inline-size;
}
@media (min-width: 370px) and (max-width: 720px) {
  .marketing .hero-dots-line {
    flex-direction: row;
    /* Sized to fit one line; with large text the items wrap instead of spilling. */
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 14px;
    font-size: clamp(8.5px, 2.9cqi, 11.5px);
    letter-spacing: 0;
  }
  .marketing .hero-dots-line li::before {
    margin-right: 6px;
  }
}
/* On a phone the headline fills the column: the longest line ("Prove which
   ads", "drive revenue.") still fits at 12.5cqi. */
@media (max-width: 720px) {
  .marketing .home-hero .hero-title {
    font-size: clamp(34px, 12.5cqi, 52px);
    line-height: 1.04;
  }
}
@media (max-width: 1100px) {
  .marketing .home-hero .hero-grid,
  .marketing .page-hero .hero-grid {
    gap: 48px;
  }
}
@media (max-width: 960px) {
  .marketing .home-hero .hero-grid,
  .marketing .page-hero .hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ================================================================
   Vertical pages, round two: the live feed hero, the gap window,
   the journey band and the payoff (src/content/vertical.ts).
   ================================================================ */

/* The hero picture sits on a soft blue panel with faint contour lines. */
.hero-panel {
  position: relative;
  padding: 36px 30px 22px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='400' viewBox='0 0 600 400'%3E%3Cg fill='none' stroke='%231559d0' stroke-opacity='.07' stroke-width='14'%3E%3Cpath d='M-20 80 C120 20 260 140 400 70 S620 40 640 60'/%3E%3Cpath d='M-20 210 C140 150 280 270 420 200 S620 170 640 190'/%3E%3Cpath d='M-20 340 C120 290 260 400 400 330 S620 300 640 320'/%3E%3C/g%3E%3C/svg%3E") center / cover,
    var(--brand-band);
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line));
  border-radius: 22px;
}

.hero-panel .film-caption {
  margin-top: 14px;
}

.ledger .st-window-body {
  padding: 0;
}

.ledger-status {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 40px;
  margin: 10px 14px 0;
  padding: 0 4px 8px;
  font-size: 12.5px;
  font-weight: 600;
}

.ledger-status i {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
}

.ledger-miss {
  color: var(--lost);
}

.ledger-miss i {
  background: var(--lost);
}

.ledger-ok {
  color: var(--accent);
}

.ledger-ok i {
  background: var(--accent);
}

.ledger:not(.is-connected) .ledger-ok,
.ledger.is-connected .ledger-miss {
  display: none;
}

.ledger-bar {
  position: absolute;
  right: 4px;
  bottom: 0;
  left: 4px;
  height: 3px;
  background: var(--line);
  border-radius: 3px;
  overflow: hidden;
}

.ledger-bar b {
  display: block;
  width: 0;
  height: 100%;
  background: var(--accent);
  transition: width 1.1s ease;
}

.ledger.is-connected .ledger-bar b {
  width: 100%;
}

.ledger-table {
  width: 100%;
  margin-top: 4px;
  border-collapse: collapse;
  font-size: 13px;
}

.ledger-table th {
  padding: 8px 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
  color: var(--text-faint);
  border-bottom: 1px solid var(--line);
}

.ledger-table th:first-child,
.ledger-table td:first-child {
  padding-left: 18px;
}

.ledger-table td {
  height: 38px;
  padding: 0 10px;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}

.ledger-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ledger-time {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-faint);
}

.ledger-item {
  font-weight: 600;
}

.ledger-value {
  font-family: var(--mono);
  font-size: 12.5px;
}

.ledger-state {
  width: 52%;
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ledger-lost,
.ledger-found {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  font-family: var(--mono);
  font-size: 11.5px;
}

.ledger-found span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.ledger-lost {
  color: var(--lost);
}

.ledger-found {
  color: var(--accent);
}

.ledger-row .ledger-found,
.ledger-row.is-credited .ledger-lost {
  display: none;
}

.ledger-row.is-credited .ledger-found {
  display: inline-flex;
}

.ledger-row.is-credited {
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}

.ledger-row > td {
  opacity: 0;
  transition: opacity 0.35s ease;
}

.ledger-row.is-in > td {
  opacity: 1;
}

.ledger-foot .bignum-value {
  font-size: 34px;
}

.ledger-count .bignum-value {
  color: var(--lost);
  transition: color 0.4s ease;
}

.ledger.is-connected .ledger-count .bignum-value {
  color: var(--found);
}

.ledger.is-connected .ledger-lost-label,
.ledger:not(.is-connected) .ledger-found-label {
  display: none;
}

.ledger-seen .bignum-value {
  color: var(--accent);
}

/* ---------------- the gap window ---------------- */

.gap-solo {
  max-width: 920px;
  margin-inline: auto;
}

.gap-window .st-window-body {
  padding: 0;
}

.gap-cells {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gap-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 28px 30px 26px;
}

.gap-cell + .gap-cell {
  border-left: 1px solid var(--line);
}

.gap-value {
  font-family: var(--serif);
  font-size: 56px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text);
}

.gap-spark {
  width: 80px;
  height: 22px;
  color: var(--text-faint);
}

.gap-cost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-weight: 600;
}

.gap-cost i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lost);
}

.card-grid-gap {
  margin-top: 24px;
}

/* ---------------- payoff ---------------- */

.payoff {
  margin-top: 48px;
  text-align: center;
}

.payoff-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  font-weight: 500;
}

.payoff-pills li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.payoff-pills svg {
  color: var(--accent);
}

.payoff-line {
  margin-top: 24px;
  font-family: var(--serif);
  font-size: 34px;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.journey-band .gap-card .frame-icon {
  margin: 0 0 18px;
}

@media (max-width: 720px) {
  .hero-panel {
    margin-inline: calc(var(--gutter) * -1 + 8px);
    padding: 16px 8px 12px;
    border-radius: 18px;
  }
  .ledger-time,
  .ledger-table th:first-child {
    display: none;
  }
  .ledger-table td:nth-child(2),
  .ledger-table th:nth-child(2) {
    padding-left: 12px;
  }
  .ledger-table td {
    padding: 0 6px;
  }
  .ledger-item {
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ledger-foot .bignum-value {
    font-size: 28px;
  }
  .gap-cells {
    grid-template-columns: minmax(0, 1fr);
  }
  .gap-cell + .gap-cell {
    border-left: none;
    border-top: 1px solid var(--line);
  }
  .gap-cell {
    padding: 20px 18px;
  }
  .gap-value {
    font-size: 44px;
  }
  .payoff-line {
    font-size: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ledger-row > td,
  .ledger-bar b,
  .ledger-count .bignum-value {
    transition: none;
  }
}

.share-row {
  margin-top: 40px;
  text-align: center;
}

.share-row-label {
  margin-bottom: 12px;
  font-size: 14.5px;
  color: var(--text-dim);
}

/* ---------------- send to Meta, and the dashboard still ---------------- */

.send-window .st-window-body {
  padding: 0;
}

.send-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 10px 18px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg-tint) 55%, var(--bg-raised));
}

.send-cols span:nth-child(2) {
  text-align: center;
}

.send-cols span:last-child {
  text-align: right;
}

.send-grid {
  display: grid;
  grid-template-columns: auto minmax(40px, 1fr) auto;
  align-items: center;
  padding: 28px 22px;
}

.send-from .frame-icon {
  width: 34px;
  height: 26px;
  margin: 0 0 6px;
}

.send-lines {
  height: 140px;
}

.send-card {
  min-width: 170px;
  padding: 12px 14px;
}

.send-sub {
  font-size: 12px;
  color: var(--accent);
}

.dash-still .st-window-body {
  padding: 0;
}

.still-wrap {
  max-width: 980px;
  margin-inline: auto;
}

.still-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}

.still-kpis > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 18px;
}

.still-kpis > div + div {
  border-left: 1px solid var(--line);
}

.still-kpis > div:first-child {
  background: var(--accent-soft);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.still-kpis strong {
  font-size: 26px;
  font-variant-numeric: tabular-nums;
}

.still-body {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 24px;
  padding: 20px 18px;
}

.still-chart {
  width: 100%;
  height: 180px;
}

.still-area {
  fill: color-mix(in srgb, var(--accent) 14%, transparent);
}

.still-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.2;
  vector-effect: non-scaling-stroke;
}

.still-sources {
  display: grid;
  align-content: start;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
}

.still-sources li {
  display: flex;
  justify-content: space-between;
  padding: 6px 10px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--accent-soft) var(--w), transparent var(--w));
}

.still-sources li span:last-child {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.payoff-band .payoff {
  margin-top: 0;
  padding: 18px 0 6px;
}

.payoff-band .share-row-label {
  color: var(--text-dim);
}

@media (max-width: 720px) {
  .send-grid {
    grid-template-columns: auto minmax(20px, 1fr) auto;
    padding: 20px 12px;
  }
  .send-card {
    min-width: 0;
  }
  .still-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .still-kpis > div:nth-child(3) {
    border-left: none;
  }
  .still-kpis > div:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }
  .still-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .still-chart {
    height: 120px;
  }
}

/* The selected KPI sits on the accent tint: its label needs the dimmer ink, not the faint one (4.5:1 in dark). */
.still-kpis .bignum-label {
  color: var(--text-dim);
}

/* ---------------- product pages: real screenshots, light and dark ---------------- */

/* A screenshot fills its window edge to edge. */
.shot-window .st-window-body {
  padding: 0;
  overflow: hidden;
}

.shot {
  display: block;
  width: 100%;
  height: auto;
}

/* Light by default; the dark shot follows the same two rules as the theme tokens. Hidden lazy images never load. */
.shot-dark {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .shot-light {
    display: none;
  }
  :root:not([data-theme='light']) .shot-dark {
    display: block;
  }
}

:root[data-theme='dark'] .shot-light {
  display: none;
}

:root[data-theme='dark'] .shot-dark {
  display: block;
}

/* The tall report shot stays a readable width in the hero. */
.product-hero .hero-stage .shot-window {
  max-height: 620px;
}

.product-hero .hero-stage .shot-window .st-window-body {
  max-height: 582px;
}

.split-shot,
.split-flip.split-shot {
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: 48px;
}

@media (max-width: 960px) {
  .split-shot,
  .split-flip.split-shot {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
}

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

.later-list li {
  color: var(--text-dim);
}

.product-plan-table th,
.product-plan-table td {
  text-align: center;
  white-space: nowrap;
}

/* The Assistant's hero: words, not a picture of a screen that is not live. */
.soon-card {
  display: grid;
  gap: 14px;
  padding: 28px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
}

.soon-card-title {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.soon-card-line {
  font-size: 14px;
  color: var(--text-faint);
}

/* Prove, keep, automate: copy and a real screen per job. */
.jobs {
  display: grid;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.job {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 48px;
  align-items: center;
  padding: 32px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
}

.job:nth-child(even) .job-copy {
  order: 2;
}

.job-title {
  margin: 8px 0 10px;
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.job-line {
  margin: 0 0 18px;
  font-size: 16px;
  color: var(--text-dim);
}

/* The report shot is tall and narrow: show its top. */
.job-visual .shot-window {
  max-height: 440px;
}

.job-visual .shot-window .st-window-body {
  max-height: 402px;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-card {
  height: 100%;
}

/* Dashboards on home: the real board, then three points under it. On desk
   widths the shot ends just under the two charts (610px of a 1040px wide
   shot), so the points stay near it; phones show all of it. */
.board-stage {
  max-width: 1040px;
  margin-inline: auto;
}

.board-stage .shot-window .st-window-body {
  max-height: 610px;
}

.board-points {
  margin-top: 36px;
}

/* /product/dashboards: each template with its numbers and cards, as the app builds them. */
.board-label {
  margin: 14px 0 4px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.board-numbers {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.board-cards {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14.5px;
  color: var(--text-dim);
}

.board-cards li {
  position: relative;
  padding-left: 14px;
}

/* A short rule, not a bullet: the list reads as the stack of cards on the board. */
.board-cards li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 7px;
  height: 1.5px;
  background: var(--line-strong);
}

@media (max-width: 720px) {
  .board-stage .shot-window .st-window-body {
    max-height: none;
  }
  .board-points {
    margin-top: 24px;
  }
}

@media (max-width: 960px) {
  .job {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding: 22px;
  }
  .job:nth-child(even) .job-copy {
    order: 0;
  }
}

@media (max-width: 720px) {
  .job {
    padding: 18px;
  }
  .job-title {
    font-size: 28px;
  }
  .soon-card {
    padding: 20px;
  }
  .soon-card-title {
    font-size: 25px;
  }
  .product-hero .hero-stage .shot-window {
    max-height: 460px;
  }
  .product-hero .hero-stage .shot-window .st-window-body {
    max-height: 422px;
  }
}

/* ---- /status (src/routes/reliability.ts) ------------------------------------
   State colours reuse the chip tokens, so light and dark both come from the
   token blocks: working is the ok green, degraded the warn amber, down the
   danger red. Days with no checks use the strong line colour: "no data" must
   never read as green. */
.status-page {
  --st-up: var(--chip-ok-fg);
  --st-degraded: var(--chip-warn-fg);
  --st-down: var(--danger);
  --st-maintenance: var(--accent);
  --st-unknown: var(--line-strong);
  padding-block: 48px 88px;
}

.status-wrap {
  max-width: 820px;
}

.status-head h1 {
  font-family: var(--serif);
  font-size: 42px;
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.status-head .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* The overall state as a dot before the eyebrow. */
.status-head .eyebrow::before {
  --dot: var(--st-unknown);
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--dot);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--dot) 22%, transparent);
}

.status-head.is-up .eyebrow::before {
  --dot: var(--st-up);
}

.status-head.is-degraded .eyebrow::before {
  --dot: var(--st-degraded);
}

.status-head.is-down .eyebrow::before {
  --dot: var(--st-down);
}

.status-head.is-maintenance .eyebrow::before {
  --dot: var(--st-maintenance);
}

.status-sub {
  margin-top: 12px;
  max-width: 60ch;
  font-size: 17px;
  color: var(--text-dim);
}

.status-section {
  margin-top: 44px;
}

.status-h2 {
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.status-list {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
}

.status-row {
  padding: 20px 22px;
  border-bottom: 1px solid var(--line);
}

.status-row:last-child {
  border-bottom: 0;
}

.status-row-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.status-row h3 {
  font-size: 16px;
  font-weight: 600;
}

.status-row-head p {
  margin-top: 2px;
  font-size: 14px;
  color: var(--text-dim);
}

.status-state {
  --dot: var(--st-unknown);
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dim);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dot);
}

.status-state.is-up {
  --dot: var(--st-up);
  color: var(--chip-ok-fg);
}

.status-state.is-degraded {
  --dot: var(--st-degraded);
  color: var(--chip-warn-fg);
}

.status-state.is-down {
  --dot: var(--st-down);
  color: var(--danger-fg);
}

.status-state.is-maintenance {
  --dot: var(--st-maintenance);
  color: var(--accent);
}

/* One bar a day, the newest on the right. */
.status-bars {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 2px;
  height: 30px;
  margin-top: 14px;
}

.status-bars span,
.status-key i {
  display: block;
  border-radius: 2px;
  background: var(--st-unknown);
}

.status-bars .d-up,
.status-key .d-up {
  background: var(--st-up);
}

.status-bars .d-degraded,
.status-key .d-degraded {
  background: var(--st-degraded);
}

.status-bars .d-down,
.status-key .d-down {
  background: var(--st-down);
}

.status-axis {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 7px;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
}

.status-axis > span:first-child,
.status-axis > span:last-child {
  flex: 0 0 auto;
  white-space: nowrap;
}

.status-axis > span:nth-child(2) {
  text-align: center;
}

.status-key {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--text-faint);
}

.status-key span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.status-key i {
  width: 10px;
  height: 10px;
}

.status-incident {
  padding: 18px 22px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.status-incident + .status-incident {
  margin-top: 12px;
}

/* An open incident carries its impact on the left edge. */
.status-incident.is-open {
  border-left: 4px solid var(--st-degraded);
}

.status-incident.is-open.impact-major {
  border-left-color: var(--st-down);
}

.status-incident.is-open.impact-maintenance {
  border-left-color: var(--st-maintenance);
}

.status-incident h3 {
  font-size: 17px;
  font-weight: 600;
}

.status-incident-meta {
  margin-top: 2px;
  font-size: 13px;
  color: var(--text-faint);
}

.status-updates {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.status-updates li {
  padding-left: 14px;
  border-left: 2px solid var(--line);
}

.status-updates li + li {
  margin-top: 12px;
}

.status-updates p {
  font-size: 15px;
}

.status-updates time {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--text-faint);
}

.status-empty {
  color: var(--text-dim);
}

.status-how ul {
  margin: 0 0 14px;
  padding-left: 20px;
  color: var(--text-dim);
}

.status-how li + li {
  margin-top: 6px;
}

@media (max-width: 720px) {
  .status-page {
    padding-block: 32px 64px;
  }

  .status-head h1 {
    font-size: 32px;
  }

  .status-row,
  .status-incident {
    padding: 16px;
  }

  /* All 90 days on a phone too, so the bars and the uptime cover the same days. */
  .status-bars {
    gap: 1px;
    height: 26px;
  }
}

/* ---------------- phone sweep (scripts/phone-sweep.mjs) ----------------
   At 320 to 430 wide: nothing past the edge, no word cut short, and no row of
   short items that leaves one alone on its last line. */
@media (max-width: 720px) {
  /* Clouds of chips wrap in balanced lines, not a full line and a lone chip.
     Balancing works on inline content, so the items flow inline here. */
  .link-chips,
  .rep-chips,
  .mini-chips,
  .rep-tabs,
  .sites-filter,
  .marketing .chips {
    display: block;
    text-wrap: balance;
  }
  .link-chips > *,
  .rep-chips > *,
  .mini-chips > *,
  .rep-tabs > *,
  .sites-filter > *,
  .marketing .chips > * {
    display: inline-flex;
    margin: 0 4px 6px 0;
    vertical-align: middle;
  }
  .link-chips-center {
    text-align: center;
  }
  /* Three or four short facts and pills: one per line, centered, never 2 + 1. */
  .promise-facts,
  .payoff-pills,
  .pill-row-center,
  .section-actions {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  .promise-facts li + li::before {
    content: none;
  }
  /* The window bar: the address may take two lines rather than end in "...". */
  .st-window-bar {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 10px;
    height: auto;
    min-height: 38px;
    padding-block: 6px;
  }
  .st-dots {
    display: none;
  }
  .st-url {
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
    text-overflow: clip;
    text-align: left;
    font-size: 11px;
    line-height: 1.35;
  }
  /* Replicas of inputs and table names wrap instead of hiding their ends. */
  .rep-input {
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
    text-overflow: clip;
    font-size: 12.5px;
  }
  .rep-short > span {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .rep-bars tbody th span {
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .sites-name span,
  .sites-name strong {
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  /* Column heads in the demo tables may take two lines on the narrowest phones. */
  .ads-table thead th,
  .ads-table thead th.num,
  .rep-table thead th {
    white-space: normal;
  }
}
@media (max-width: 380px) {
  .ads-table th,
  .ads-table td {
    padding-inline: 8px;
  }
  .rep-table th,
  .rep-table td {
    padding-inline: 5px;
  }  /* The verdict's columns size to their names, so "AgencyAnalytics" stays whole. */
  .verdict-table th,
  .verdict-table td {
    padding-inline: 4px;
  }
  .verdict-table td {
    width: auto;
  }
  .verdict-table thead th {
    letter-spacing: 0.02em;
  }
}

/* ---- /partners (src/content/partners.ts): approved agencies, one card each.
   A logo only when the agency uploaded one; the name carries the card otherwise. */
.pt-list {
  display: grid;
  gap: 12px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.pt-card {
  display: grid;
  gap: 10px;
  padding: 20px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}

.pt-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.pt-card-title {
  min-width: 0;
}

.pt-name {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.pt-meta {
  margin-top: 2px;
  font-size: 14px;
  color: var(--text-dim);
  overflow-wrap: anywhere;
}

.pt-line {
  color: var(--text);
}

.pt-serves {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pt-serves li {
  padding: 2px 10px;
  font-size: 13px;
  color: var(--text-dim);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}

.pt-empty {
  display: grid;
  gap: 8px;
  margin-top: 28px;
  padding: 24px;
}

.pt-empty-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
}

.pt-empty-line {
  color: var(--text-dim);
}

.pt-empty-actions,
.pt-band-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.pt-band-actions {
  justify-content: center;
  margin-top: 28px;
}

.pt-band-note {
  max-width: 40em;
  margin: 14px auto 0;
  font-size: 14px;
  text-align: center;
  color: var(--text-faint);
}

@media (max-width: 720px) {
  .pt-band-actions .btn {
    flex: 1 1 100%;
  }
}

/* ================================================================
   The layout system (owner, 2026-10-23: "centering and stylings...
   Mokxi got this right"). Last in the file on purpose: every frame a
   marketing section sits in is set here once, and the per-page rules above
   only lay out what goes inside a frame. The rules follow Mokxi's
   web/src/site/site.css ("One axis, on every page").

   Section types, each with one alignment rule:
   - Hero with a picture beside it (home, pricing, product, /for, /platforms,
     /how-it-works, /vs/<tool>, setup call): words on the left at desk width.
     Once the picture drops under them (960px) the words stack on the
     center line, as on Mokxi.
   - Hero with no picture (/vs, /tools, /walkthroughs): centered at every
     width, on the same column as the section heads under it.
   - Section head (eyebrow, h2, sub): centered, 760px at most, the sub at a
     60 character measure. A list under a centered head sits as one centered
     block and keeps left-aligned lines (a centered bullet reads badly).
   - A head that shares its row with a picture (split rows): left beside the
     picture, centered once the row stacks.
   - Cards: words left inside the card at every width. A card is a thing to
     read, not a title.
   - Promise and closing bands: centered.
   - Reading pages (guides, glossary, docs, legal): left, like a document.

   One container (--site-max), one vertical step (--sec-pad), one h2 size,
   one button set (--btn-h-*), one eyebrow.
   ================================================================ */

.marketing {
  /* Every band: 104, then 80 under 960, then 64 on a phone. */
  --sec-pad: 104px;
  /* Heroes start closer to the header and end on the same step. */
  --hero-pad-top: 72px;
  /* Reading pages keep a tighter step between short topic sections. */
  --read-pad: 56px;
  --head-max: 760px;
  --head-gap: 52px;
  --measure: 60ch;
  --h2: 44px;
  --page-h1: 48px;
}

@media (max-width: 960px) {
  .marketing {
    --sec-pad: 80px;
    --hero-pad-top: 56px;
    --h2: 38px;
    --page-h1: 42px;
  }
}

@media (max-width: 720px) {
  .marketing {
    --sec-pad: 64px;
    --hero-pad-top: 32px;
    --read-pad: 44px;
    --head-gap: 36px;
    --h2: 32px;
    --page-h1: 36px;
  }
}

/* ---- rhythm: one step between every section type ---- */

.marketing .wsec,
.marketing .promise,
.marketing .closing,
.marketing:not(.guides):not(.docs):not(.legal) main > .section:not(.hero):not(.strip):not(.verdict-band):not(.vs-hero):not(.wt-hero):not(.call-hero) {
  padding-block: var(--sec-pad);
}

.marketing .hero,
.marketing .call-hero,
.marketing .vs-hero,
.marketing .wt-hero {
  padding-block: var(--hero-pad-top) var(--sec-pad);
}

/* The verdict sheet continues the /vs hero and the platform strip continues
   the home hero. Each ends on the same step as any band. */
.marketing .verdict-band,
.marketing .strip {
  padding-block: 0 var(--sec-pad);
}

.marketing.guides main > .section:not(.guide-page),
.marketing.docs main > .section:not(.doc-page):not(.closing) {
  padding-block: var(--read-pad);
}

/* ---- section heads ---- */

.marketing .wsec-head,
.marketing .section-head {
  max-width: var(--head-max);
  margin: 0 auto var(--head-gap);
  text-align: center;
}

.marketing .wsec-head .section-sub,
.marketing .section-head .section-sub {
  max-width: var(--measure);
  margin: 16px auto 0;
}

/* A reading page's heads stay on its left edge. */
.marketing .section-head-left,
.marketing .section-head-left .section-sub,
.marketing .wsec-head-left,
.marketing .wsec-head-left .section-sub {
  margin-inline: 0;
  text-align: left;
}

/* One eyebrow: mono, uppercase, faint. The accent is kept for the one word
   in each headline, so nothing competes with it. */
.marketing .section-eyebrow,
.marketing .wt-head,
.marketing .answer-label,
.marketing .split-copy > .step-label,
.marketing .split-copy > .step-label .step-label-no {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  text-wrap: balance;
}

/* ---- type: one h2 size for every section head ---- */

.marketing .section-title,
.marketing .split-copy .section-title,
.marketing .wsec-head-card .section-title,
.marketing .closing-title,
.marketing .promise-title {
  font-family: var(--serif);
  font-size: var(--h2);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* Reading pages head their topics a step smaller, as a document does. */
.marketing.guides .guides-topic .section-title {
  font-size: min(var(--h2), 30px);
}

.marketing .page-title,
.marketing .wt-title {
  font-size: var(--page-h1);
  line-height: 1.08;
  letter-spacing: -0.025em;
}

/* Every hero headline is sized from its own column, so a two-line title
   keeps both lines whole and every hero reads at the same size. */
.marketing .hero-copy,
.marketing .call-copy {
  container-type: inline-size;
}

.marketing .hero-copy .hero-title,
.marketing .call-copy .hero-title {
  font-size: clamp(30px, 9cqi, 56px);
}

/* Home's lines are the shortest, so on a phone they fill the column. */
@media (max-width: 720px) {
  .marketing .home-hero .hero-copy .hero-title {
    font-size: clamp(34px, 12.5cqi, 52px);
  }
}

/* ---- heroes ---- */

/* The calls to action sit on the page, not in a box around them. */
.cta-tray {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Heroes with no picture: one centered column. */
.marketing .wt-hero-inner,
.marketing.tools .ub-wrap,
.marketing.vs .vs-hero > .container > .section-head {
  max-width: var(--head-max);
  margin-inline: auto;
  text-align: center;
}

.marketing .wt-hero-inner .crumbs,
.marketing.tools .ub-wrap .crumbs,
.marketing.vs .vs-hero:not(:has(.vs-hero-grid)) .crumbs {
  justify-content: center;
}

.marketing .wt-hero-inner .hero-lead,
.marketing .wt-note,
.marketing.tools .ub-lead {
  max-width: var(--measure);
  margin-inline: auto;
}

.marketing .wt-hero-inner .stat-pills,
.marketing .wt-actions {
  justify-content: center;
}

.marketing.tools .tools-cards {
  text-align: left;
}

/* Heroes with a picture stack on the center line once the picture drops
   under the words. */
@media (max-width: 960px) {
  .marketing .hero-copy,
  .marketing .call-copy,
  .marketing .vs-hero-grid > div:first-child {
    text-align: center;
  }
  .marketing .hero-copy .hero-lead,
  .marketing .call-copy .hero-lead,
  .marketing .vs-hero-grid .hero-lead,
  .marketing .vs-hero-grid .vs-checked {
    max-width: var(--measure);
    margin-inline: auto;
  }
  .marketing .hero-copy .cta-tray,
  .marketing .hero-copy .hero-dots,
  .marketing .call-copy .pill-row {
    justify-content: center;
  }
  .marketing .hero-copy .hero-dots {
    align-items: center;
  }
  /* A list keeps left-aligned lines, as one block on the center line. */
  .marketing .hero-copy .checks,
  .marketing .call-copy .call-list {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    text-align: left;
  }
  .marketing.vs .vs-hero .crumbs {
    justify-content: center;
  }
}

/* ---- split rows: a head beside its picture ---- */

/* Beside the picture the head is left, so its links are too; they center with it once the row stacks. */
@media (min-width: 961px) {
  .marketing .split-copy .section-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 960px) {
  .marketing .split-copy {
    text-align: center;
  }
  .marketing .split-copy .checks {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    text-align: left;
  }
  .marketing .split-copy .split-lead {
    max-width: var(--measure);
    margin-inline: auto;
  }
}

/* ---- the blue band: the panel keeps the page's gutter, its head is not a card ---- */

.marketing .wsec-head-card {
  max-width: var(--head-max);
  margin: 0 auto var(--head-gap);
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

@media (max-width: 720px) {
  .marketing .blue-panel {
    margin-inline: 0;
    padding: 32px 16px 16px;
  }
}

/* ---- buttons: one set ----
   48 for the calls to action in heroes and bands, 40 for the rest, and every
   one 44 or more on a phone (site.css). A pair of calls to action never
   shares a phone's row: each takes its own, full width, so both are the same
   size and neither label wraps. */

@media (max-width: 520px) {
  .marketing .cta-tray,
  .marketing .closing-actions,
  .marketing .promise-actions,
  .marketing .wt-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .marketing .cta-tray .btn,
  .marketing .closing-actions .btn,
  .marketing .promise-actions .btn,
  .marketing .wt-actions .btn {
    flex: 0 0 auto;
    width: 100%;
  }
}

/* "Show me how" inside a card that is itself the link: a plain text link,
   the same as "Read the walkthrough", not a box that looks like a second button. */
.marketing .pick-go {
  padding: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  background: none;
  border: 0;
}

/* ---- rows that wrap: never one item alone on a phone ---- */

@media (max-width: 720px) {
  /* Up to six link chips become a list of full-width rows, each a 44px target. */
  .marketing .link-chips:not(:has(> li:nth-child(7))) {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 420px;
    margin-inline: auto;
  }
  .marketing .link-chips:not(:has(> li:nth-child(7))) .link-chip {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding-inline: 16px 14px;
  }
  /* Short facts with a tick: one per line, as one block. */
  .marketing .pill-row {
    flex-direction: column;
    align-items: flex-start;
    width: fit-content;
    max-width: 100%;
  }
  .marketing .pill-row-center,
  .marketing .call-copy .pill-row {
    margin-inline: auto;
  }
  /* In-page links and source lists: one per line, no separators. */
  .marketing .verdict-jump {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  .marketing .verdict-jump [aria-hidden='true'] {
    display: none;
  }
  .marketing .verdict-jump a {
    min-height: 44px;
  }
  .marketing .vs-sources ul {
    flex-direction: column;
    gap: 4px;
  }
  /* The promise facts: one per line, no leading dot. */
  .marketing .promise-facts {
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  .marketing .promise-facts li + li::before {
    content: none;
  }
  /* Tabs and filters inside a picture of the app scroll sideways, as they do
     in the app, instead of dropping one onto a line of its own. */
  .marketing .rep-tabs,
  .marketing .rep-chips,
  .marketing .sites-filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .marketing .rep-tabs > *,
  .marketing .rep-chips > *,
  .marketing .sites-filter > * {
    flex: 0 0 auto;
  }
  /* A guide's related terms: the same full-width rows as the link chips. */
  .marketing .guide-terms {
    flex-direction: column;
    gap: 8px;
  }
  .marketing .guide-terms a {
    display: flex;
    min-height: 44px;
    padding-inline: 16px;
  }
  /* Form choices: one per line, each a full row to tap. */
  .marketing .call-checks {
    flex-direction: column;
    gap: 0;
  }
  .marketing .call-checks .field-check {
    min-height: 44px;
  }
  /* Column heads and names in a picture's table may take two lines rather
     than be cut off. */
  .marketing .st-window thead th {
    white-space: normal;
    letter-spacing: 0.04em;
  }
  .marketing .rep-bars tbody th span,
  .marketing .sites-name > span,
  .marketing .rep-input {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  /* Related links under a section: one per line, on the center line. */
  .marketing .section-actions {
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
  .marketing .section-actions .text-link {
    min-height: 44px;
  }
  /* The trail above a page title stops at its parent: the title under it
     already names the page, and a long one would wrap the trail. */
  .marketing .crumbs li[aria-current],
  .marketing .crumbs li:has(> [aria-current]) {
    display: none;
  }
  /* "Home" alone is not a trail; the wordmark already goes there. */
  .marketing .crumbs:not(:has(li:nth-child(3))) {
    display: none;
  }
  /* A link taken apart in a guide figure: one part per line. */
  .marketing .fig-anatomy {
    flex-direction: column;
  }
}

/* ---- the home setup row: on the strip's center line ---- */

.marketing .setup-band {
  justify-content: center;
  text-align: center;
}

.marketing .setup-band-line {
  flex-basis: 100%;
}

.marketing .setup-band .link-chips,
.marketing .setup-band .chip-row {
  justify-content: center;
}

/* ---- details ---- */

/* The short answer on /vs: a quiet panel, no heavy rule down its side. */
.marketing .answer {
  border-left-width: 1px;
  border-radius: var(--r-lg);
}

/* A window's address bar shows the whole address on a desk. On a phone it
   shows the site only, as Safari does, so nothing is cut off mid-word. */
@media (max-width: 560px) {
  .st-url-rest {
    display: none;
  }
}

/* ---- home hero: the website field (src/content/home.ts addSiteForm) ----
   One unit on a desk: the field and its button in one raised box, and the
   box takes the focus ring while the field is typed in. On a phone the two
   stack, each full width, and the field carries the box itself. */

.marketing .hero-add {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  max-width: 520px;
  margin-top: 32px;
  padding: 6px;
  background: var(--bg-input);
  border: 1px solid var(--line-input);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  transition: border-color var(--dur-1) ease, box-shadow var(--dur-1) ease;
}

.marketing .hero-add:focus-within:not(:has(.hero-add-go:focus-visible)) {
  border-color: var(--accent);
  box-shadow: var(--focus-ring), var(--shadow-card);
}

.marketing .hero-add-field {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding-left: 12px;
  color: var(--text-faint);
  cursor: text;
}

.marketing .hero-add-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}

.marketing .hero-add-input {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--btn-h-lg);
  padding: 0;
  font: inherit;
  font-size: 17px;
  color: var(--text);
  background: transparent;
  border: 0;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.marketing .hero-add-input::placeholder {
  color: var(--text-faint);
  opacity: 1;
}

.marketing .hero-add-go {
  flex: 0 0 auto;
  border-radius: calc(var(--r-xl) - 6px);
  white-space: nowrap;
}

.marketing .home-hero .hero-dots {
  margin-top: 18px;
}

.marketing .home-hero .hero-try {
  margin-top: 14px;
}

@media (max-width: 960px) {
  .marketing .hero-add {
    margin-inline: auto;
  }
}

@media (max-width: 520px) {
  .marketing .hero-add {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .marketing .hero-add:focus-within:not(:has(.hero-add-go:focus-visible)) {
    box-shadow: none;
  }
  .marketing .hero-add-field {
    padding: 0 14px;
    background: var(--bg-input);
    border: 1px solid var(--line-input);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-card);
    transition: border-color var(--dur-1) ease, box-shadow var(--dur-1) ease;
  }
  .marketing .hero-add-field:focus-within {
    border-color: var(--accent);
    box-shadow: var(--focus-ring), var(--shadow-card);
  }
  .marketing .hero-add-go {
    width: 100%;
    border-radius: var(--r-lg);
  }
}

/* ---- home hero: revenue by source on the demo shop (src/content/demo.ts revenueWindow) ---- */

.money {
  margin: 0;
}

.money-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.money-top .bignum-value {
  font-size: clamp(30px, 4vw, 40px);
}

.money-table {
  width: 100%;
  margin-top: 6px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.money-table caption {
  padding: 12px 0 4px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  color: var(--text-faint);
}

.money-table thead th {
  padding: 4px 0 8px;
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  color: var(--text-faint);
}

.money-table .num {
  padding-left: 12px;
  text-align: right;
  white-space: nowrap;
}

.money-table tbody th,
.money-table tbody td {
  padding: 9px 0;
  border-top: 1px solid var(--line);
  vertical-align: top;
}

.money-table tbody td.num {
  padding-left: 12px;
  font-size: 14px;
  color: var(--text);
}

.money-table tbody th {
  font-weight: 400;
  text-align: left;
}

.money-name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.money-kind {
  display: block;
  margin-top: 1px;
  font-size: 12px;
  color: var(--text-dim);
}

/* The bar: each source's revenue against the top one, under its name. */
.money-bar {
  display: block;
  width: var(--w);
  height: 4px;
  margin-top: 7px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--accent) 30%, transparent);
}

.money-table .is-best .money-bar {
  background: var(--accent);
}

.money-table .num:last-child {
  /* Room for the best value's pill, so it stays inside the window's edge. */
  padding-right: 7px;
}

.money-best {
  display: inline-block;
  padding: 1px 7px;
  margin: -1px -7px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: var(--r-pill);
}

.money-caption {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--text-faint);
}

.money-caption .text-link {
  display: flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  margin: 4px auto 0;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0;
  white-space: nowrap;
}

@media (max-width: 420px) {
  .money .st-window-body {
    padding: 14px;
  }
  .money-top {
    gap: 12px;
  }
  .money-top .bignum-value {
    font-size: 28px;
  }
}

/* ---------------- /demo feature pages (src/content/demoFeatures.ts) ---------------- */

/* The feature pages' views: screens side by side, or stacked. */

.demo-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 20px;
}

.demo-pair-report {
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
}

.demo-stack {
  display: grid;
  gap: 20px;
}

.demo-view > .st-window,
.demo-view > .hero-panel {
  max-width: 760px;
  margin-inline: auto;
}

@media (max-width: 720px) {
  .demo-pair,
  .demo-pair-report {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The revenue view in its own band under the hero: one window, centered, as wide as it reads well. */
.marketing .money-stage {
  max-width: 640px;
  margin-inline: auto;
}

/* The demo is about which ad made money: on a phone its Ad spend card comes right after the numbers,
   ahead of the charts the app's own phone order puts first (public/static/app-analytics.css). */
@media (max-width: 720px) {
  .demo-app .dw.dw-ads {
    order: 3;
  }
}

/* The home hero's film opens the live demo: the whole window is one link. */
.hero-film-link {
  display: block;
  color: inherit;
  text-decoration: none;
  border-radius: 16px;
}
.hero-film-link .st-window {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hero-film-link:hover .st-window {
  transform: translateY(-2px);
}
.hero-film-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
}
.hero-film-cta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-weight: 600;
  color: var(--accent);
}
.hero-film-cta svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}
.hero-film-link:hover .hero-film-cta svg {
  transform: translateX(2px);
}
@media (prefers-reduced-motion: reduce) {
  .hero-film-link .st-window,
  .hero-film-cta svg {
    transition: none;
  }
  .hero-film-link:hover .st-window,
  .hero-film-link:hover .hero-film-cta svg {
    transform: none;
  }
}

/* ---------- the install link's page (/install/:token, src/routes/install.ts) ----------
   A public page on datacenter.so that loads every sheet; it lives here, not in
   an app area file, so app pages never carry it. */

/* One column the width of setup, centered on the page: no app frame around it. */
.install-wrap {
  max-width: calc(760px + 2 * var(--gutter, 24px));
  padding-block: var(--space-6) var(--space-12);
}

.install-head {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin-bottom: var(--space-5);
}

/* The wordmark as on client pages (app-analytics.css .client-brand). */
.install-head .wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 19px;
}

/* The footer lines up with the page's one column, not the window's edges. */
.install-page .wl-footer .container {
  max-width: calc(760px + 2 * var(--gutter, 24px));
}

/* The owner's name in the logo's place: no rule after it, nothing sits beside it here. */
.install-head .install-brand-name {
  padding-right: 0;
  border-right: 0;
  max-width: 100%;
}

.install {
  display: grid;
  gap: var(--space-4);
}

.install-eyebrow {
  font-family: var(--mono);
  font-size: var(--type-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-faint);
}

/* The site's address is the page's heading: it wraps whole on a phone, never sideways. */
.setup-title.install-domain {
  margin-top: calc(-1 * var(--space-2));
  font-size: var(--type-display);
  overflow-wrap: anywhere;
}

.install-tech {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding-left: 1.2em;
  font-size: var(--fs-16);
  color: var(--text-dim);
}

.install-tech code {
  font-family: var(--mono);
  font-size: 0.9em;
  overflow-wrap: anywhere;
}

.install-check {
  scroll-margin-top: var(--space-4);
}

@media (max-width: 720px) {
  .setup-title.install-domain {
    font-size: var(--fs-24);
  }
  .install-wrap {
    padding-block: var(--space-4) var(--space-10);
  }
}