/* ============================================================
   CALL MARLIN — COMPONENTS
   Every component listed in master prompt §11, with default / hover /
   focus-visible / pressed / selected / disabled / loading / error
   states where relevant. Semantic tokens only — no raw hex.
   ============================================================ */

/* ============================================================
   BUTTON
   ============================================================ */
.btn {
  --btn-h: var(--target-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--btn-h);
  padding: 0 var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font-family: var(--font-body);
  font-size: var(--type-button-size);
  line-height: var(--type-button-lh);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--motion-ease),
              border-color var(--motion-fast) var(--motion-ease),
              color var(--motion-fast) var(--motion-ease);
}
.btn svg { flex: none; }

.btn--primary {
  background: var(--action-primary);
  color: var(--action-primary-label);
}
.btn--primary:hover { background: var(--action-primary-hover); color: var(--action-primary-label); }
.btn--primary:active { background: var(--action-primary-pressed); }

.btn--secondary {
  background: transparent;
  color: var(--action-secondary-label);
  border-color: var(--action-secondary-border);
}
.btn--secondary:hover { border-color: var(--border-control-hover); color: var(--action-secondary-label); }
.btn--secondary:active { background: var(--surface-selected); }

.btn--ghost {
  background: transparent;
  color: var(--text-link);
  padding-inline: var(--space-3);
}
.btn--ghost:hover { background: var(--surface-selected); }

.btn--danger { background: var(--status-error-fg); color: var(--cm-white); }
.btn--danger:hover { filter: brightness(0.92); }

.btn--lg { --btn-h: 52px; padding-inline: var(--space-8); font-size: var(--type-lead-size); }
.btn--block { width: 100%; }

.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--action-disabled-surface);
  border-color: transparent;
  color: var(--action-disabled-label);
  cursor: not-allowed;
}
/* loading: spinner + the label stays readable, never replaced by "…" alone */
.btn[data-loading="true"] { cursor: progress; }
.btn[data-loading="true"] .btn__spinner { display: block; }
.btn__spinner { display: none; width: 16px; height: 16px; flex: none; }
.btn__spinner circle {
  fill: none; stroke: currentColor; stroke-width: 2.5;
  stroke-linecap: round; stroke-dasharray: 34; stroke-dashoffset: 26;
  transform-origin: center;
  animation: cm-spin 900ms linear infinite;
}
@keyframes cm-spin { to { transform: rotate(360deg); } }

/* ============================================================
   NAVIGATION + MOBILE MENU
   ============================================================ */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--surface-default);
  border-bottom: 1px solid var(--border-divider);
}
.site-nav.on-dark { background: var(--cm-navy); }

.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  min-height: var(--nav-height);
}

/* Master prompt §3: 132px wide on mobile, 156px on desktop, refined after testing.
   --asset is the variant that renders a whole exported lockup file; it must
   NOT style the inline variant's emblem, which sizes itself (see pages.css). */
.brand-lockup { display: block; flex: none; }
.brand-lockup--asset { width: 132px; }
.brand-lockup--asset svg, .brand-lockup--asset img { width: 100%; height: auto; }
@media (min-width: 768px) { .brand-lockup--asset { width: 156px; } }

.nav-links { display: none; gap: var(--space-2); }
@media (min-width: 1024px) { .nav-links { display: flex; align-items: center; } }
.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  padding-inline: var(--space-3);
  border-radius: var(--radius-control);
  color: var(--text-primary);
  font-weight: var(--weight-medium);
  text-decoration: none;
}
.nav-links a:hover { background: var(--surface-selected); }
.nav-links a[aria-current="page"] {
  color: var(--text-link);
  box-shadow: inset 0 -2px 0 var(--action-primary);
  border-radius: var(--radius-control) var(--radius-control) 0 0;
}

.nav-actions { display: flex; align-items: center; gap: var(--space-3); }
.nav-actions .btn--primary { display: none; }
@media (min-width: 640px) { .nav-actions .btn--primary { display: inline-flex; } }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--target-min);
  height: var(--target-min);
  background: transparent;
  border: 1px solid var(--border-control);
  border-radius: var(--radius-control);
  cursor: pointer;
}
@media (min-width: 1024px) { .nav-toggle { display: none; } }

.mobile-menu {
  position: fixed;
  inset: var(--nav-height) 0 0;
  z-index: 99;
  background: var(--surface-default);
  padding: var(--space-6) var(--page-gutter) var(--space-12);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu a {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding-inline: var(--space-2);
  border-bottom: 1px solid var(--border-divider);
  color: var(--text-primary);
  font-family: var(--font-heading);
  font-size: var(--type-h3-size);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}
.mobile-menu .btn { margin-top: var(--space-8); }

/* ============================================================
   HERO
   Master prompt §7A: 55/45 split, copy left, recreated marlin right.
   Mobile: headline + supporting copy + primary CTA BEFORE the artwork.
   ============================================================ */
.hero { position: relative; overflow: hidden; background: var(--surface-inverse); }
.hero__inner {
  display: grid;
  /* minmax(0, 1fr), not the implicit `auto` track: an auto track sizes to
     its widest item's min-content, so a single nowrap button can force the
     column wider than a narrow viewport and clip the copy. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  padding-block: var(--space-16) var(--space-12);
}
@media (min-width: 1024px) {
  .hero__inner {
    grid-template-columns: 55fr 45fr;
    align-items: center;
    gap: var(--space-12);
    padding-block: var(--space-24);
  }
}
.hero h1 { margin-bottom: var(--space-6); }
/* The payoff line. Aqua on navy = 8.33:1 (contrast-audit.csv).
   Never the reverse: aqua on white is 2:1 and is banned by the palette. */
.hero h1 .payoff { color: var(--accent-on-dark); display: block; }
.hero__copy > .lead { margin-bottom: var(--space-8); max-width: 34rem; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); }
/* Below 640px the CTAs go full width and are allowed to wrap. "Watch the
   60-second overview" fits on one line at 390px but not at 320px, where
   .btn's default nowrap would push it past the viewport instead of
   wrapping. Verified at a true 320px viewport, not a cropped wide one. */
@media (max-width: 639px) {
  .hero__ctas { flex-direction: column; align-items: stretch; }
  .hero__ctas .btn { width: 100%; white-space: normal; text-align: center; padding-inline: var(--space-4); }
}

.hero__art { order: 2; position: relative; }
.hero__art img, .hero__art svg { width: 100%; height: auto; }
@media (max-width: 1023px) {
  /* artwork after the message, and capped so it cannot push the CTA down */
  .hero__art { max-width: 380px; margin-inline: auto; }
}

/* ============================================================
   SAID / DONE — the recurring two-track motif
   Left: what was said. Right: the ledger of what was actually done.
   Used in the hero sample card, outcome cards, industry workflow, demo.
   ============================================================ */
.saiddone {
  display: grid;
  gap: 1px;
  background: var(--border-divider);
  border: 1px solid var(--border-divider);
  border-radius: var(--radius-card);
  overflow: hidden;
}
@media (min-width: 640px) { .saiddone { grid-template-columns: 1fr 1fr; } }
.saiddone__track { background: var(--surface-default); padding: var(--space-6); }
.saiddone__track--done { background: var(--surface-subtle); }
.saiddone__label {
  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-4);
}

/* ============================================================
   CARD
   Deliberately NOT one uniform rounded box with one shadow everywhere.
   .card      — raised, for navigational entry points
   .panel     — large flat container, no shadow
   .ledger-row— square-edged, rule-separated, never floating
   ============================================================ */
.card {
  display: flex;
  flex-direction: column;
  background: var(--surface-default);
  border: 1px solid var(--border-divider);
  border-radius: var(--radius-card);
  padding: var(--space-6);
}
.card--raised { box-shadow: var(--shadow-card); border-color: transparent; }
.card--link { text-decoration: none; color: inherit; transition: border-color var(--motion-fast) var(--motion-ease); }
.card--link:hover { border-color: var(--action-primary); color: inherit; }
.card--link:hover .card__cta { text-decoration: underline; }
.card__cta { margin-top: auto; padding-top: var(--space-6); color: var(--text-link); font-weight: var(--weight-semibold); }
.card h3 + p { margin-top: var(--space-3); color: var(--text-secondary); }

.panel {
  background: var(--surface-subtle);
  border: 1px solid var(--border-divider);
  border-radius: var(--radius-panel);
  padding: var(--space-8);
}
.panel.on-dark { background: var(--surface-inverse-raised); border-color: var(--border-divider); }

/* ============================================================
   STATUS CHIP
   Master prompt §8: seven action states. Colour is NEVER the only channel —
   every chip carries an icon glyph and a text label.
   ============================================================ */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--type-meta-size);
  font-weight: var(--weight-semibold);
  line-height: 1.5;
  white-space: nowrap;
}
.chip__glyph { font-size: 1em; line-height: 1; flex: none; }
.chip--pending      { background: var(--status-neutral-bg);  color: var(--status-neutral-fg); }
.chip--progress     { background: var(--status-progress-bg); color: var(--status-progress-fg); }
.chip--confirm      { background: var(--status-warning-bg);  color: var(--status-warning-fg); }
.chip--completed    { background: var(--status-success-bg);  color: var(--status-success-fg); }
.chip--failed       { background: var(--status-error-bg);    color: var(--status-error-fg); }
.chip--unknown      { background: var(--status-warning-bg);  color: var(--status-warning-fg); }
.chip--cancelled    { background: var(--status-neutral-bg);  color: var(--status-neutral-fg); }
/* Sample/verification labelling required by master prompt §2 and §9 */
.chip--sample       { background: var(--surface-selected); color: var(--text-primary); }
.on-dark .chip--sample { background: var(--status-neutral-bg); color: var(--text-primary); }

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 2px var(--space-2);
  border: 1px solid var(--border-control);
  border-radius: var(--space-1);
  font-size: var(--type-meta-size);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
}
.tag--native   { border-color: var(--status-success-fg); color: var(--status-success-fg); }
.tag--connector{ border-color: var(--action-primary); color: var(--text-link); }
.tag--custom   { border-color: var(--border-control); color: var(--text-secondary); }
.tag--planned  { border-style: dashed; border-color: var(--border-control); color: var(--text-secondary); }

/* ============================================================
   SCENARIO SELECTOR (industry selector)
   Radio group. Selected state carries border + background + check,
   not colour alone.
   ============================================================ */
.selector { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
@media (min-width: 640px) { .selector { grid-template-columns: repeat(2, 1fr); max-width: 42rem; } }
.selector__item { position: relative; }
.selector__item input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.selector__face {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 64px;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-default);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-control);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  transition: border-color var(--motion-fast) var(--motion-ease),
              background-color var(--motion-fast) var(--motion-ease);
}
.selector__item input:hover + .selector__face { border-color: var(--border-control-hover); }
.selector__item input:focus-visible + .selector__face {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
.selector__item input:checked + .selector__face {
  border-color: var(--action-primary);
  border-width: 2px;
  background: var(--surface-selected);
}
.on-dark .selector__item input:checked + .selector__face { border-color: var(--accent-on-dark); }
.selector__check { margin-left: auto; opacity: 0; flex: none; color: var(--text-link); }
.selector__item input:checked + .selector__face .selector__check { opacity: 1; }
.selector__item input[disabled] + .selector__face {
  background: var(--action-disabled-surface);
  color: var(--action-disabled-label);
  border-style: dashed;
  cursor: not-allowed;
}

/* ============================================================
   FORM FIELD
   Boundary uses --border-control (4.08:1), never --border-divider.
   ============================================================ */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field__label { font-weight: var(--weight-semibold); font-size: var(--type-body-size); }
.field__label .optional { font-weight: var(--weight-regular); color: var(--text-secondary); }
/* Instructions stay at body size — master prompt §5 bans essential text at meta size */
.field__help { font-size: var(--type-body-size); color: var(--text-secondary); }
.field__control {
  min-height: var(--target-min);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-default);
  color: var(--text-primary);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-control);
  font: inherit;
  width: 100%;
}
.field__control:hover { border-color: var(--border-control-hover); }
select.field__control { cursor: pointer; }
textarea.field__control { min-height: 120px; resize: vertical; }
.field__error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--status-error-fg);
  font-weight: var(--weight-medium);
}
.field[data-invalid="true"] .field__control { border-color: var(--status-error-fg); border-width: 2px; }
.field__control[disabled] { background: var(--surface-subtle); color: var(--text-secondary); cursor: not-allowed; }

.checkbox { display: flex; align-items: flex-start; gap: var(--space-3); }
.checkbox input {
  width: 22px; height: 22px; margin: 1px 0 0;
  accent-color: var(--action-primary);
  flex: none;
}
/* 44px target without a 44px box: the label extends the hit area */
.checkbox label { padding-block: var(--space-3); cursor: pointer; }

.form-status { border-radius: var(--radius-control); padding: var(--space-4); font-weight: var(--weight-medium); }
.form-status--error   { background: var(--status-error-bg);   color: var(--status-error-fg); }
.form-status--success { background: var(--status-success-bg); color: var(--status-success-fg); }
.form-status--info    { background: var(--surface-selected);  color: var(--text-primary); }

/* ============================================================
   FAQ ACCORDION — native details/summary, keyboard-free of JS
   ============================================================ */
.faq { border-top: 1px solid var(--border-divider); }
.faq__item { border-bottom: 1px solid var(--border-divider); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--target-min);
  padding: var(--space-4) 0;
  font-family: var(--font-heading);
  font-size: var(--type-h3-size);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "";
  flex: none;
  width: 12px; height: 12px;
  border-right: 2px solid var(--text-secondary);
  border-bottom: 2px solid var(--text-secondary);
  transform: rotate(45deg);
  transition: transform var(--motion-fast) var(--motion-ease);
}
.faq__item[open] summary::after { transform: rotate(-135deg); }
.faq__item summary:hover { color: var(--text-link); }
.faq__body { padding-bottom: var(--space-6); color: var(--text-secondary); }

/* ============================================================
   DIALOG — focus management annotated in docs/accessibility-annotations.md
   ============================================================ */
.dialog {
  border: none;
  border-radius: var(--radius-card);
  padding: 0;
  max-width: 34rem;
  width: calc(100% - 2 * var(--page-gutter));
  box-shadow: var(--shadow-overlay);
  color: var(--text-primary);
  background: var(--surface-default);
}
.dialog::backdrop { background: rgba(5, 21, 38, 0.6); }
.dialog__body { padding: var(--space-8); }
.dialog__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }

/* ============================================================
   VIDEO SHELL — poster + explicit play, never autoplay with sound
   ============================================================ */
.video-shell {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--surface-inverse-raised);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.video-shell img, .video-shell video { width: 100%; height: 100%; object-fit: cover; }
.video-shell__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  background: rgba(8, 31, 56, 0.35);
  border: none;
  color: var(--cm-white);
  font-family: var(--font-heading);
  font-size: var(--type-lead-size);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}
.video-shell__play:hover { background: rgba(8, 31, 56, 0.5); }
.video-shell__badge {
  position: absolute;
  left: var(--space-4); top: var(--space-4);
  z-index: 2;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--surface-inverse-deep); padding-block: var(--space-16) var(--space-8); }
.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
}
@media (min-width: 640px)  { .site-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .site-footer__cols { grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: var(--space-12); } }
.site-footer h2 {
  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-4);
}
.site-footer li + li { margin-top: var(--space-3); }
.site-footer a { color: var(--text-primary); text-decoration: none; }
.site-footer a:hover { color: var(--text-link); text-decoration: underline; }
.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-16);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-divider);
  color: var(--text-secondary);
  font-size: var(--type-meta-size);
}

/* ============================================================
   STEP LIST — numbered ONLY because setup genuinely is a sequence
   ============================================================ */
.steps { counter-reset: step; display: grid; gap: var(--space-8); }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } }
.steps__item { counter-increment: step; padding-top: var(--space-6); border-top: 2px solid var(--action-primary); }
.steps__item::before {
  content: counter(step);
  display: block;
  font-family: var(--font-heading);
  font-size: var(--type-h3-size);
  font-weight: var(--weight-extrabold);
  color: var(--action-primary);
  margin-bottom: var(--space-3);
}
.steps__item h3 + p { margin-top: var(--space-3); color: var(--text-secondary); }

/* ============================================================
   DISCLOSURE BANNER — sandbox notice, sample labels
   ============================================================ */
.notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-control);
  background: var(--surface-selected);
  color: var(--text-primary);
  border-left: 4px solid var(--action-primary);
}
.on-dark .notice { background: var(--status-neutral-bg); border-left-color: var(--accent-on-dark); }
.notice--warning { background: var(--status-warning-bg); color: var(--status-warning-fg); border-left-color: currentColor; }
.notice__icon { flex: none; margin-top: 2px; }
.notice p { max-width: 60ch; }

/* ============================================================
   PRICING CARD
   ============================================================ */
.price-card { display: flex; flex-direction: column; gap: var(--space-4); }
.price-card__amount { font-family: var(--font-heading); font-size: var(--type-h2-size); font-weight: var(--weight-extrabold); }
.price-card__unit { font-size: var(--type-body-size); font-weight: var(--weight-medium); color: var(--text-secondary); }
.price-card ul { display: grid; gap: var(--space-3); }
.price-card li { display: flex; gap: var(--space-3); align-items: flex-start; color: var(--text-secondary); }
.price-card li::before { content: "✓"; color: var(--status-success-fg); font-weight: var(--weight-bold); flex: none; }

/* ============================================================
   DEFINITION TABLE — integrations, permitted actions
   ============================================================ */
.deftable { width: 100%; border-collapse: collapse; }
.deftable caption { text-align: left; color: var(--text-secondary); padding-bottom: var(--space-4); }
.deftable th, .deftable td {
  text-align: left;
  padding: var(--space-4) var(--space-4) var(--space-4) 0;
  border-bottom: 1px solid var(--border-divider);
  vertical-align: top;
}
.deftable th { font-weight: var(--weight-semibold); }
.deftable thead th { font-size: var(--type-meta-size); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); }
@media (max-width: 639px) {
  .deftable thead { display: none; }
  .deftable tr { display: grid; gap: var(--space-2); padding-block: var(--space-4); border-bottom: 1px solid var(--border-divider); }
  .deftable th, .deftable td { border: none; padding: 0; }
  .deftable td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: var(--type-meta-size);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
  }
}

/* Small quiet control, for a tertiary alternative that must stay available
   without competing with the dominant action. */
.btn--sm { --btn-h: 36px; font-size: var(--type-meta-size); padding-inline: var(--space-3); }

/* ============================================================
   TEST-PREVIEW BANNER
   One short site-wide notice. Not a warning repeated per action —
   the demo module carries its own single label.
   ============================================================ */
.preview-bar {
  margin: 0;
  padding: var(--space-2) var(--page-gutter);
  background: var(--cm-navy-deep);
  color: var(--cm-text-on-dark-secondary);
  font-size: var(--type-meta-size);
  line-height: 1.5;
  text-align: center;
  max-width: none;
}

/* The secondary pages share the one lockup with the homepage. Their old
   inline-SVG fish was a different animal entirely, drawn by hand, and is
   gone; these rules size the replacement in the same slots. */
.brand-lockup .brand-logo, a.brand .brand-logo { display: block; width: auto; height: 42px; }
.brand-lockup--footer .brand-logo,
.brand-lockup--asset .brand-logo { height: 38px; }
@media (max-width: 680px) { .brand-logo { height: 32px; } }