/* ============================================================
   CALL MARLIN — PAGE COMPOSITION
   Section-level layout. Semantic tokens only.
   ============================================================ */

/* ============================================================
   INLINE NAV / FOOTER LOCKUP
   The nav lockup is live text plus the canonical emblem, so it stays
   crisp, inherits the surface's text colour, and needs no image request.
   assets/brand/lockup-*.svg remain the masters for print and other media.
   Brief §3: the detailed hero illustration is NEVER the nav logo.
   ============================================================ */
.brand-lockup--inline {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: auto;
  color: var(--text-primary);
  text-decoration: none;
}
.brand-lockup__mark { width: 30px; height: 30px; flex: none; }
.brand-lockup__word {
  font-family: var(--font-heading);
  font-size: 1.3125rem;
  font-weight: var(--weight-extrabold);
  letter-spacing: -0.03em;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .brand-lockup__mark { width: 34px; height: 34px; }
  .brand-lockup__word { font-size: 1.5rem; }
}
.brand-lockup--footer { margin-bottom: var(--space-4); }

/* ============================================================
   HERO
   ============================================================ */
.hero__note { margin-top: var(--space-6); max-width: 34rem; }

/* Illustration above, sample card below and right-aligned.
   Overlapping the two was tried and abandoned: the art column is ~565px
   at 1440, so a ~300px card anchored in any corner covers either the
   head and bill or the whole flank. Stacking keeps the artwork clear of
   the headings, the buttons and the card at every width, and removes the
   mobile overlap case entirely. */
.hero__art {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}
@media (min-width: 1024px) {
  .hero__art { align-items: flex-end; padding-left: var(--space-8); }
}

/* .on-light in the markup restores the light token context here — without
   it the card inherits the hero's navy --surface-default and vanishes. */
.sample-card {
  background: var(--surface-default);
  color: var(--text-primary);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-overlay);
  padding: var(--space-6);
  width: 100%;
  max-width: 21rem;
}
.sample-card__head { margin-bottom: var(--space-4); }
.sample-card__title {
  font-family: var(--font-heading);
  font-size: var(--type-h3-size);
  font-weight: var(--weight-bold);
  letter-spacing: -0.015em;
}
.sample-card__rows { display: grid; gap: var(--space-2); margin: var(--space-4) 0 0; }
.sample-card__rows > div { display: flex; justify-content: space-between; gap: var(--space-4); }
.sample-card__rows dt { color: var(--text-secondary); }
.sample-card__rows dd { margin: 0; font-weight: var(--weight-semibold); }
.sample-card__foot {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-divider);
  color: var(--text-secondary);
}

/* ============================================================
   OUTCOMES — the said / done two-track motif
   Not identical floating cards: each outcome is a rule-separated block
   whose result track is a flat inset panel.
   ============================================================ */
.outcomes { display: grid; gap: var(--space-12); }
@media (min-width: 1024px) { .outcomes { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); } }
.outcome { padding-top: var(--space-6); border-top: 2px solid var(--border-strong); }
.outcome > p { margin-top: var(--space-3); color: var(--text-secondary); }
.outcome__pair {
  display: grid;
  gap: 1px;
  margin-top: var(--space-6);
  background: var(--border-divider);
  border: 1px solid var(--border-divider);
  border-radius: var(--radius-control);
  overflow: hidden;
}
.outcome__said, .outcome__done { background: var(--surface-default); padding: var(--space-4); }
.outcome__done { background: var(--cm-ice); }
.outcome__label {
  display: block;
  font-size: var(--type-meta-size);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}
.outcome__said p { font-style: italic; }
.outcome__done p { font-weight: var(--weight-medium); }
.outcome__done .chip { margin-top: var(--space-3); }

/* ============================================================
   INDUSTRY CARDS
   ============================================================ */
.industry-cards { display: grid; gap: var(--space-6); }
@media (min-width: 768px) { .industry-cards { grid-template-columns: repeat(2, 1fr); } }
.industry-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  margin-bottom: var(--space-6);
  border-radius: var(--radius-control);
  background: var(--surface-selected);
  color: var(--text-link);
}
.industry-card__outcome {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-divider);
  color: var(--text-secondary);
}
.industries__note { margin-top: var(--space-6); }

/* ============================================================
   CONTROLS / LISTS
   ============================================================ */
.controls-panel { margin-top: var(--space-12); }
.controls-list { display: grid; gap: var(--space-4); margin-top: var(--space-6); }
.controls-list li {
  padding-left: var(--space-6);
  position: relative;
  color: var(--text-secondary);
  max-width: var(--measure-prose);
}
.controls-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.6em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--action-primary);
}
.controls-list strong { color: var(--text-primary); }
.controls-panel .meta { margin-top: var(--space-6); }

/* ============================================================
   INTEGRATION TABLE NOTE + EVIDENCE PANEL
   ============================================================ */
.deftable__note { margin-top: var(--space-4); max-width: var(--measure-prose); }

.evidence { margin-top: var(--space-16); }
.evidence h3 { margin-top: var(--space-4); }
.evidence > p { margin-top: var(--space-4); color: var(--text-secondary); }
.evidence__steps { counter-reset: ev; display: grid; gap: 0; margin: var(--space-8) 0; }
.evidence__steps li {
  counter-increment: ev;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-4);
  align-items: baseline;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--border-divider);
}
.evidence__steps li:last-child { border-bottom: 1px solid var(--border-divider); }
.evidence__steps li::before {
  content: counter(ev);
  grid-row: span 2;
  align-self: start;
  font-family: var(--font-numeric);
  font-size: var(--type-meta-size);
  font-weight: var(--weight-bold);
  color: var(--text-link);
  min-width: 1.5rem;
}
.evidence__steps span:first-of-type { font-weight: var(--weight-semibold); }
.evidence__steps span:last-of-type { color: var(--text-secondary); grid-column: 2; }
@media (min-width: 640px) {
  .evidence__steps li { grid-template-columns: auto 14rem 1fr; }
  .evidence__steps li::before { grid-row: auto; }
  .evidence__steps span:last-of-type { grid-column: 3; }
}

/* ============================================================
   PRICING INTRO + FAQ
   ============================================================ */
.pricing-intro { display: grid; gap: var(--space-16); }
@media (min-width: 1024px) { .pricing-intro { grid-template-columns: 1fr 1fr; gap: var(--space-16); } }
.faq-heading { margin-bottom: var(--space-8); }

/* ============================================================
   FINAL CTA
   ============================================================ */
.final-cta .section-head { margin-bottom: var(--space-8); }
.final-cta__actions { justify-content: center; }
.final-cta__note { margin: var(--space-8) auto 0; text-align: center; max-width: 34rem; }

.footer__blurb { max-width: 22rem; }

/* ============================================================
   EMPTY VIDEO SHELL — honest not-yet-produced state
   ============================================================ */
.video-shell--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  margin-block: var(--space-6);
  border: 1px dashed var(--cm-navy-line-strong);
  text-align: center;
}
.video-shell--empty p { color: var(--cm-text-on-dark-secondary); max-width: 26rem; }

/* ============================================================
   SHARED SECONDARY-PAGE PATTERNS
   ============================================================ */
.page-hero { background: var(--surface-inverse); padding-block: var(--space-16); }
.page-hero .eyebrow { color: var(--accent-on-dark); }
.page-hero h1 { font-size: var(--type-h2-size); line-height: var(--type-h2-lh); }
.page-hero .lead { margin-top: var(--space-4); }
.page-hero__actions { margin-top: var(--space-8); display: flex; flex-wrap: wrap; gap: var(--space-3); }

.prose { max-width: var(--measure-prose); }
.prose h2 { margin-top: var(--space-12); }
.prose h3 { margin-top: var(--space-8); }
.prose p, .prose ul { margin-top: var(--space-4); }
.prose ul li {
  position: relative;
  padding-left: var(--space-6);
  margin-top: var(--space-2);
  color: var(--text-secondary);
}
.prose ul li::before {
  content: "";
  position: absolute; left: 0; top: 0.6em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--border-control);
}
.prose--legal h2 { font-size: var(--type-h3-size); }

.two-col { display: grid; gap: var(--space-12); }
@media (min-width: 1024px) { .two-col { grid-template-columns: 1fr 1fr; gap: var(--space-16); } }

.card-grid { display: grid; gap: var(--space-6); }
@media (min-width: 640px)  { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ============================================================
   ============================================================
   SECONDARY ROUTES — added for /industries, /integrations,
   /pricing, /trust, /contact, /privacy, /terms.

   Everything below is layout only and references layer-2 semantic
   tokens exclusively. Where a pattern already existed it was reused
   rather than reimplemented: .deftable carries every comparison
   table, .saiddone carries the input-to-result pair, .steps carries
   the three sequences, .evidence carries the sample workflows,
   .price-card carries the quote card, and .field / .checkbox /
   .form-status carry the whole pilot form.
   ============================================================
   ============================================================ */

/* ============================================================
   PAGE HERO, SPLIT VARIANT — industry pages
   Copy left, sample result card right. Grid tracks are minmax(0, …)
   so a long record label can never push the column past the viewport.
   Below 1024 the copy and the CTA come first and the card follows,
   which is the same ordering rule as the home hero.
   ============================================================ */
.page-hero--split .page-hero__inner { display: grid; gap: var(--space-8); }
.page-hero__note { margin-top: var(--space-6); max-width: 34rem; }
.page-hero--split .sample-card { margin-inline: auto; }
@media (min-width: 1024px) {
  .page-hero--split .page-hero__inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: center;
    gap: var(--space-12);
  }
  .page-hero--split .sample-card { margin-inline: 0; justify-self: end; }
}
/* The industry record carries six or seven rows rather than three, so
   it needs a little more measure than the home page's card. */
.sample-card--wide { max-width: 26rem; }

/* Below 480px the long record labels ("Odometer, as stated by caller",
   "Approval status") and their values both wrap, which turns the row
   into two ragged columns. Stack the label above the value instead: a
   deliberate two-line pair. Scoped to the records added by these routes
   so the home page's three-row card keeps its side-by-side rows. */
@media (max-width: 479px) {
  .sample-card--wide .sample-card__rows > div,
  .saiddone .sample-card__rows > div { display: block; }
  .sample-card--wide .sample-card__rows dd,
  .saiddone .sample-card__rows dd { margin-top: var(--space-1); }
}

/* ============================================================
   INPUT-TO-RESULT PAIR — industry pages
   Wraps the shared .saiddone motif; adds no new structure.
   ============================================================ */
.workflow-pair { margin-top: var(--space-12); }
.workflow-pair__quote { font-style: italic; }
.workflow-pair__quote + .workflow-pair__quote { margin-top: var(--space-4); }
.workflow-pair__aside { margin-top: var(--space-6); }
.workflow-pair__chips { margin-top: var(--space-4); max-width: none; }

/* Spacing-only helpers, so the markup carries no inline styles. */
.auto-notice { margin-top: var(--space-8); }
.evidence--flush { margin-top: 0; }
.label-table__title { margin-bottom: var(--space-6); }
.subsection-title { margin-bottom: var(--space-6); }
.pending-slot + .subsection-title { margin-top: var(--space-16); }
.pricing-owner { margin-top: var(--space-6); }

/* A heading immediately followed by body copy in a plain column, where
   .prose is not wanted because it would also re-space the section head. */
.copy-block { margin-top: var(--space-8); }
.copy-block > h3 { margin-bottom: var(--space-4); }
.copy-block > p + p { margin-top: var(--space-4); }

/* The two legend tables on /integrations put a .tag or .chip in the row
   header. .chip is already nowrap; .tag is not, and in a narrow header
   column "Via connector" was breaking across two lines. Both labels are
   two short words, so they never risk an overflow at any width. */
.label-table th .tag { white-space: nowrap; }
@media (min-width: 640px) { .label-table th { width: 11rem; } }

/* ============================================================
   PENDING CONTENT SLOT
   The one component for "this is deliberately empty". Used on /trust
   for retention, sub-processors, legal entity, certifications and the
   handoff destination, and on /privacy and /terms for every section
   awaiting legal sign-off.

   It is dashed rather than solid so it reads as an unfilled field, and
   it always carries a status chip (icon + text) plus a named owner —
   never colour alone, and never a bare grey box a reader could mistake
   for finished content.
   ============================================================ */
.pending-slot {
  margin-top: var(--space-4);
  padding: var(--space-6);
  background: var(--surface-subtle);
  border: 1px dashed var(--border-control);
  border-radius: var(--radius-card);
}
.pending-slot__head {
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-4);
  max-width: none;
}
.pending-slot__owner {
  font-size: var(--type-meta-size);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
}
.pending-slot > h3,
.pending-slot > h4 { margin-top: 0; }
.pending-slot > h3 + p,
.pending-slot > h4 + p { margin-top: var(--space-3); }
.pending-slot p + p { margin-top: var(--space-3); }
.pending-stack { display: grid; gap: var(--space-6); }

/* ============================================================
   PRICING SLOTS — /pricing, and the legal pages' meta rows
   .price-slot is the inline "value not yet approved" marker. It has to
   be unmistakably empty: dashed edge, secondary text, lower case, and
   the word pending. No figure, no placeholder digits, nothing that
   could be screenshotted and read as a price.
   ============================================================ */
.price-slot {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border: 1px dashed var(--border-control);
  border-radius: var(--radius-control);
  background: var(--surface-default);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--type-meta-size);
  font-weight: var(--weight-medium);
  font-style: normal;
  letter-spacing: 0;
}
.price-slot--amount {
  padding: var(--space-2) var(--space-6);
  font-size: var(--type-lead-size);
  font-weight: var(--weight-semibold);
}

/* Label left, pending value right, on one line — matching
   .sample-card__rows. flex-wrap makes the stack at narrow widths a
   deliberate two-line label/value pair rather than accidental
   indentation. */
.price-slots {
  display: grid;
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--border-divider);
}
.price-slots__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-divider);
}
.price-slots dt { color: var(--text-secondary); }
.price-slots dd { margin: 0; }

.price-card__head { gap: var(--space-3); }
.price-card__true { font-weight: var(--weight-semibold); }
.price-card__foot {
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-divider);
}

/* ============================================================
   PILOT REQUEST FORM — /contact
   Six fields and one optional consent box, nothing else. Layout only:
   the controls, the error treatment and the status banner are all the
   existing .field / .checkbox / .form-status components.
   ============================================================ */
.pilot-form { display: grid; gap: var(--space-8); max-width: 34rem; }
.pilot-form__req { color: var(--text-secondary); }
.req-star { color: var(--status-error-fg); font-weight: var(--weight-bold); }

/* min-width: 0 stops the fieldset's default min-content floor from
   widening the grid column. display:block on the legend opts out of
   the notched rendering so it can read as a real subheading. */
.pilot-form__group { border: 0; padding: 0; margin: 0; min-width: 0; }
.pilot-form__group > legend {
  display: block;
  width: 100%;
  padding: 0;
  font-family: var(--font-heading);
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-lh);
  font-weight: var(--weight-bold);
  letter-spacing: -0.015em;
  color: var(--text-primary);
}
.pilot-form__group > legend + * { margin-top: var(--space-6); }
.pilot-form__group .field + .field { margin-top: var(--space-6); }

/* The error element is display:flex, which would otherwise beat the
   UA's [hidden] rule and leave every error permanently visible. */
.field__error[hidden] { display: none; }

/* Checkbox with the control nested inside its label, so the box, the
   gap and the text are a single hit target with no dead zone between
   them. Keeps the 44px height from .checkbox's label padding. */
.checkbox--joined { display: block; }
.checkbox--joined > label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
}

/* Removes the 300ms double-tap-zoom delay on every tappable control.
   Site-wide from here because it belongs to the controls themselves,
   and it changes nothing visually. */
.btn,
.nav-toggle,
.nav-links a,
.mobile-menu a,
.site-footer a,
.faq__item summary,
.field__control,
.checkbox label,
.legal-index__list a { touch-action: manipulation; }

/* Consent sits in its own bounded block so it cannot be mistaken for
   part of the request itself. Unticked by default, in the markup.
   The box is an inner div rather than the fieldset, so the legend reads
   as a heading above it instead of sitting in the border gap. */
.pilot-form__consent > legend {
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  font-weight: var(--weight-semibold);
  letter-spacing: 0;
}
.pilot-form__consent-box {
  padding: var(--space-6);
  background: var(--surface-subtle);
  border: 1px solid var(--border-divider);
  border-radius: var(--radius-card);
}
.pilot-form__consent-box .field__help { margin-top: var(--space-3); }

.pilot-form__actions { display: grid; gap: var(--space-4); justify-items: start; }
.pilot-form__note { max-width: 34rem; }
.pilot-form__status { margin-bottom: var(--space-8); }
.form-status__title {
  font-family: var(--font-heading);
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-lh);
  font-weight: var(--weight-bold);
  letter-spacing: -0.015em;
}
.form-status p + p { margin-top: var(--space-3); }

/* The "what happens next" sequence sits in a single narrow column, so
   the three-across step grid is overridden back to a stack. */
@media (min-width: 768px) {
  .steps--stacked { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
}

/* ============================================================
   LEGAL SHELLS — /privacy and /terms
   Section index beside the document, document meta as label/value
   rows, and a .pending-slot per section. No legal wording is authored
   here; each slot states what that section must cover and who owns it.
   ============================================================ */
.legal-layout { display: grid; gap: var(--space-12); }
@media (min-width: 1024px) {
  .legal-layout {
    grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
    gap: var(--space-16);
    align-items: start;
  }
}
.legal-index { border-top: 2px solid var(--border-strong); padding-top: var(--space-6); }
.legal-index__title {
  font-family: var(--font-body);
  font-size: var(--type-meta-size);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.legal-index__list { margin-top: var(--space-2); }
.legal-index__list a {
  display: flex;
  align-items: center;
  min-height: var(--target-min);
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--border-divider);
  color: var(--text-primary);
  text-decoration: none;
}
.legal-index__list a:hover { color: var(--text-link); text-decoration: underline; }
.legal-index__note { margin-top: var(--space-6); }

.legal-meta {
  display: grid;
  gap: 0;
  margin: 0 0 var(--space-12);
  border-top: 1px solid var(--border-divider);
}
.legal-meta__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-divider);
}
.legal-meta dt { font-weight: var(--weight-semibold); }
.legal-meta dd { margin: 0; }

.legal-rule {
  margin: var(--space-16) 0 0;
  border: 0;
  border-top: 1px solid var(--border-divider);
}

/* ============================================================
   PASS 1 — SCENARIO-AWARE HERO AND CTA HIERARCHY
   ============================================================ */

/* Exactly one hero variant renders. <html data-scenario> is set by an inline
   head script before first paint, so a sector visitor never sees generic copy
   flash first. Default covers the no-JS case: generic shows, others stay
   hidden, so the page is correct without scripting. */
.hero__variant { display: none; }
.hero__variant[data-for="generic"] { display: block; }
[data-scenario="restaurant"]   .hero__variant[data-for="generic"],
[data-scenario="auto-service"] .hero__variant[data-for="generic"] { display: none; }
[data-scenario="restaurant"]   .hero__variant[data-for="restaurant"] { display: block; }
[data-scenario="auto-service"] .hero__variant[data-for="auto-service"] { display: block; }

/* CTA hierarchy: one dominant action. The example is a quiet tertiary
   control, not a second equally weighted button — the brief is explicit
   that three equally emphasised conversion buttons must not appear. */
.btn--quiet {
  background: transparent;
  border-color: transparent;
  color: var(--text-primary);
  text-decoration: underline;
  text-decoration-color: var(--border-control);
  text-underline-offset: 4px;
  padding-inline: var(--space-3);
}
.btn--quiet:hover {
  color: var(--text-link);
  text-decoration-color: currentColor;
  background: transparent;
}
.on-dark .btn--quiet { color: var(--text-primary); }

/* Brand sign-off: the original line demoted to a quiet mark, so it still
   appears but is no longer carrying the explanation. */
.hero__signoff {
  margin-top: var(--space-12);
  font-family: var(--font-heading);
  font-size: var(--type-meta-size);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  opacity: 0.75;
}

/* Sample pricing: the amount reads as a real price, the unit stays quiet. */
.price-card__unit-inline {
  display: block;
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  margin-top: var(--space-1);
}
/* Anything carrying sample content gets a visible edge so a reviewer can see
   at a glance what must be replaced before publication. */
[data-sample] { border-left: 4px solid var(--accent-on-light); }

/* Captioned walkthrough inside the example dialog: real beats with timings,
   so the placeholder is a usable thing rather than an empty player. */
.dialog__beats { display: grid; gap: var(--space-3); margin: var(--space-6) 0; }
.dialog__beats li {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-divider);
  color: var(--text-secondary);
}
.dialog__beats li span:first-child {
  font-size: var(--type-meta-size);
  font-weight: var(--weight-semibold);
  color: var(--text-link);
}