/* TraceLock — Component styles (v2 · light-first enterprise)
 * All components read from tokens.css. Light is default; dark inherits via [data-theme="dark"].
 */

/* ==================== BUTTONS ==================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  min-height: 42px;
  transition:
    background-color var(--dur-med) var(--ease-out),
    border-color     var(--dur-med) var(--ease-out),
    color            var(--dur-med) var(--ease-out),
    transform        var(--dur-fast) var(--ease-out),
    box-shadow       var(--dur-med) var(--ease-out);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  letter-spacing: -0.005em;
}
.btn:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn.is-disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.btn.is-loading { pointer-events: none; }
.btn.is-loading::after {
  content: '';
  width: 14px; height: 14px; margin-left: 4px;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%;
  animation: btn-spin 700ms linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

.btn-sm { padding: 7px 14px; min-height: 34px; font-size: 0.8125rem; border-radius: 8px; }
.btn-lg { padding: 14px 22px; min-height: 50px; font-size: 1rem; }
.btn-xl { padding: 16px 26px; min-height: 56px; font-size: 1.0625rem; border-radius: 12px; }
/* Touch targets: 44px minimum on phone and tablet widths. .btn-sm measured 34px
   and .btn 42px on the live site; desktop keeps the compact sizes. */
@media (max-width: 960px) {
  .btn, .btn-sm { min-height: 44px; }
  /* The industries breadcrumb link measured 17px tall (bare text). */
  .ind-crumb a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Primary — deep ink. The default CTA. Confident, not cyan-glowy. */
.btn-primary {
  background: var(--text);
  color: var(--panel);
  border-color: var(--text);
}
.btn-primary:hover { background: #000; border-color: #000; }
[data-theme="dark"] .btn-primary { background: var(--text); color: var(--base); border-color: var(--text); }
[data-theme="dark"] .btn-primary:hover { background: #FFF; border-color: #FFF; }

/* Accent — cyan. For moments where the CTA should feel branded. */
.btn-accent {
  background: var(--accent);
  color: #FFFFFF;
  border-color: var(--accent);
}
.btn-accent:hover { background: #065F78; border-color: #065F78; }
[data-theme="dark"] .btn-accent { color: var(--accent-ink); }
[data-theme="dark"] .btn-accent:hover { background: var(--accent-bright); border-color: var(--accent-bright); }

/* Secondary — outline */
.btn-secondary {
  background: var(--panel);
  color: var(--text);
  border-color: var(--stroke);
}
.btn-secondary:hover { border-color: var(--text); }

/* Ghost — text only */
.btn-ghost {
  background: transparent;
  color: var(--text);
}
.btn-ghost:hover { background: var(--elevate); }

/* Danger */
.btn-danger {
  background: var(--danger);
  color: #FFFFFF;
  border-color: var(--danger);
}
.btn-danger:hover { filter: brightness(0.92); }

/* ==================== NAV ==================== */
.tl-nav {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--base) 78%, transparent);
  border-bottom: 1px solid var(--stroke-soft);
}
/* backdrop-filter lives on ::before so it does NOT become a containing block
   for the position:fixed mobile drawer inside the nav. Putting backdrop-filter
   directly on .tl-nav would make it the containing block for fixed children,
   causing the drawer's top/right/bottom coords to be relative to the ~60px nav
   box rather than the viewport — the drawer would be clipped / mis-positioned. */
.tl-nav::before {
  content: '';
  position: absolute; inset: 0;
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  z-index: -1;
  pointer-events: none;
}
.tl-nav-inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 14px var(--gutter);
  display: flex;
  align-items: center;
  gap: 36px;
}
.tl-nav-brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-weight: 600; letter-spacing: -0.015em;
  color: var(--text); font-size: 1.0625rem;
}
.tl-nav-brand .wordmark {
  display: inline-flex; align-items: baseline;
  letter-spacing: -0.02em;
}
.tl-nav-brand .wordmark .lock-o {
  color: var(--accent);
  font-feature-settings: "ss01";
}
.tl-nav-brand img { height: 34px; width: auto; display: block; }
/* Light-theme wordmark ships as soft gray; darken it so it reads on the off-white nav. */
:root[data-theme="light"] .tl-nav-brand img[data-logo-light] { filter: brightness(0.35) contrast(1.2); }
.tl-nav-links {
  display: flex; align-items: center; gap: 26px;
  list-style: none; margin: 0; padding: 0;
  font-size: 0.9375rem; font-weight: 500;
}
.tl-nav-link {
  position: relative;
  color: var(--muted);
  padding: 6px 2px;
  transition: color var(--dur-med) var(--ease-out);
}
.tl-nav-link:hover { color: var(--text); }
.tl-nav-link.is-active { color: var(--text); }
.tl-nav-link.is-active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 2px; background: var(--text); border-radius: 2px;
}
.tl-nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* Nav submenu */
.tl-nav-links li.has-menu { position: relative; }
.tl-submenu {
  position: absolute; top: calc(100% + 10px); left: -16px;
  min-width: 280px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  display: none;
  z-index: 80;
}
/* Invisible hover-bridge so cursor can cross the 10px gap between nav link and submenu
   without :hover breaking. Lives inside .tl-submenu so hovering it keeps the parent open. */
.tl-submenu::before {
  content: '';
  position: absolute;
  top: -10px; left: 0; right: 0; height: 10px;
}
.tl-nav-links li.has-menu:hover .tl-submenu,
.tl-nav-links li.has-menu:focus-within .tl-submenu { display: block; }
.tl-submenu a {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  color: var(--text);
  transition: background var(--dur-fast) var(--ease-out);
}
.tl-submenu a:hover { background: var(--elevate); }
.tl-submenu a strong { font-weight: 600; font-size: 0.9375rem; color: var(--text); }
.tl-submenu a span { font-size: 0.8125rem; color: var(--muted); }

/* Footer marquee block */
.tl-footer-marquee {
  display: grid; grid-template-columns: 1.6fr 1fr; gap: 48px;
  padding: 48px 0;
  border-bottom: 1px solid var(--stroke-soft);
  margin-bottom: 48px;
  align-items: flex-end;
}
.tl-foot-claim .eyebrow-mono {
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted-subtle);
}
.tl-foot-claim p {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.375rem, 1.5vw + 0.5rem, 1.875rem);
  line-height: 1.25; letter-spacing: -0.018em;
  color: var(--text); margin: 14px 0 24px; max-width: 36ch;
}
.tl-foot-badges { display: flex; flex-wrap: wrap; gap: 10px; }
.tl-foot-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: var(--panel);
  border: 1px solid var(--stroke-soft);
  border-radius: 999px;
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted-strong);
}
.tl-foot-badge .g {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--success); box-shadow: 0 0 0 3px var(--success-tint);
}
.tl-foot-cta h4 {
  font-family: var(--font-display)!important; font-weight: 600!important;
  font-size: 1.25rem!important; letter-spacing: -0.01em!important;
  text-transform: none!important; color: var(--text)!important;
  margin: 0 0 4px!important;
}
.tl-foot-cta p { color: var(--muted); font-size: 0.9375rem; margin: 0 0 16px; }
.tl-foot-cta .btn { margin-right: 8px; }
@media (max-width: 860px) {
  .tl-footer-marquee { grid-template-columns: 1fr; gap: 32px; align-items: flex-start; }
}

/* Theme toggle */
.tl-theme-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  background: transparent; border: 1px solid var(--stroke);
  border-radius: 999px;
  color: var(--muted); cursor: pointer;
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
  min-height: 34px;
}
.tl-theme-toggle:hover { color: var(--text); border-color: var(--text); }
.tl-theme-toggle svg { width: 14px; height: 14px; }

.tl-nav-burger { display: none; }
@media (max-width: 960px) {
  .tl-nav-links, .tl-nav-right .tl-btn-auth { display: none; }
  /* 44px square: the one control a phone user must be able to hit. */
  .tl-nav-burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-left: auto;
    background: transparent; border: 1px solid var(--stroke); border-radius: 8px;
    color: var(--text); cursor: pointer;
  }
  /* Touch-size the other two header controls (they measured 34px tall). */
  .tl-nav-brand { min-height: 44px; }
  .tl-theme-toggle { min-height: 44px; }
  /* Open-state drawer styling lives in the MOBILE NAV DRAWER block below */
}

/* ==================== MOBILE NAV DRAWER ==================== */
/* Toggled by body.nav-open (see site.js initMobileNav).
   Works at <=960px; desktop nav renders above it and the drawer stays hidden. */
@media (max-width: 960px) {
  /* Drawer uses transform translateX(100%) to slide off-screen; that box
     still contributes to layout width. Clip horizontally so the drawer
     doesn't force a document-wide scrollbar when closed. */
  html, body { overflow-x: clip; }
  @supports not (overflow-x: clip) {
    html, body { overflow-x: hidden; }
  }
  body.nav-open .tl-nav {
    /* Raise above the backdrop (z-index:50) so the nav stacking context
       paints the drawer on top. Do NOT use position:static — changing
       position mid-animation cancels the transform transition in Chromium. */
    z-index: 55;
  }
  body.nav-open .tl-nav::before { content: none; }
  /* Backdrop — full-viewport, fades in */
  body::after {
    content: '';
    position: fixed; inset: 0;
    background: rgba(17, 24, 39, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms var(--ease-out);
    z-index: 50;
  }
  body.nav-open::after {
    opacity: 1;
    pointer-events: auto;
  }
  body.nav-open { overflow: hidden; }

  /* Drawer panel — unhides the injected <nav> + auth buttons in a slide-in sheet */
  .tl-nav nav[aria-label="Primary"] {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(85vw, 360px);
    background: var(--panel);
    border-left: 1px solid var(--stroke-soft);
    box-shadow: -24px 0 48px rgba(17, 24, 39, 0.18);
    /* bottom padding reserves space so the fixed auth-buttons row
       (tl-nav-right, ~158px tall) never overlaps the last nav link */
    padding: 72px 20px 180px;
    transform: translateX(100%);
    transition: transform 260ms var(--ease-out);
    z-index: 60;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: block !important;
  }
  /* Subtle fade-out above the pinned auth block so content underneath is
     visually muted, not abruptly cut off */
  body.nav-open .tl-nav::after {
    content: '';
    position: fixed;
    right: 0; bottom: 158px;
    width: min(85vw, 360px);
    height: 28px;
    background: linear-gradient(180deg, transparent 0%, var(--panel) 100%);
    z-index: 60;
    pointer-events: none;
  }
  body.nav-open .tl-nav nav[aria-label="Primary"] {
    transform: translateX(0);
  }
  body.nav-open .tl-nav nav[aria-label="Primary"] .tl-nav-links {
    display: flex !important;
    flex-direction: column;
    gap: 4px;
    align-items: stretch;
  }
  .tl-nav nav[aria-label="Primary"] .tl-nav-links li { list-style: none; width: 100%; }
  .tl-nav nav[aria-label="Primary"] .tl-nav-link {
    display: block;
    padding: 14px 12px;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text);
    border-radius: var(--r-md);
    border-bottom: 1px solid var(--stroke-soft);
  }
  .tl-nav nav[aria-label="Primary"] .tl-nav-link:hover,
  .tl-nav nav[aria-label="Primary"] .tl-nav-link:active { background: var(--elevate); }
  /* Flatten submenu — show its items inline as a sub-list */
  .tl-nav nav[aria-label="Primary"] .tl-submenu {
    position: static;
    display: block;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 4px 0 10px 14px;
    min-width: 0;
  }
  .tl-nav nav[aria-label="Primary"] .tl-submenu::before { display: none; }
  .tl-nav nav[aria-label="Primary"] .tl-submenu a {
    padding: 10px 12px;
    border-radius: var(--r-sm);
  }
  .tl-nav nav[aria-label="Primary"] .tl-submenu a strong { font-size: 0.875rem; }
  .tl-nav nav[aria-label="Primary"] .tl-submenu a span { font-size: 0.75rem; }

  /* Auth CTAs: unhide inside the drawer */
  body.nav-open .tl-nav-right .tl-btn-auth {
    display: inline-flex !important;
  }
  /* Pull the auth buttons into the drawer visually (they're in tl-nav-right).
     We use a floating pinned block via fixed positioning. */
  body.nav-open .tl-nav-right {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 61;
    width: min(85vw, 360px);
    padding: 14px 20px 20px;
    background: var(--panel);
    border-top: 1px solid var(--stroke-soft);
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
    box-sizing: border-box;
  }
  body.nav-open .tl-nav-right .tl-theme-toggle { order: 3; justify-content: center; }
  body.nav-open .tl-nav-right .btn { justify-content: center; width: 100%; }
  body.nav-open .tl-nav-burger {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 62;
    background: var(--panel);
  }
  /* Burger → X when open */
  body.nav-open .tl-nav-burger svg line:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
    transform-origin: center;
  }
  body.nav-open .tl-nav-burger svg line:nth-child(2) { opacity: 0; }
  body.nav-open .tl-nav-burger svg line:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
    transform-origin: center;
  }
  .tl-nav-burger svg line { transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out); }
}

/* ==================== NAV: PHONE WIDTHS ==================== */
/* Measured on the live site at 320px: brand 161 + gap 36 + theme toggle 72 +
   burger 40 + two 24px gutters = 367px, so the burger sat 31px past the right
   edge and a 320-wide phone had no visible way to open the menu. The theme
   toggle travels with the nav (D-29): wherever the links are in the drawer, so
   is the toggle, as its last row, and the header is brand plus burger. That is
   the same 960 breakpoint the nav collapses at, one rule instead of a second
   480 special case. Below 480 the gap also tightens: 161 + 12 + 44 + 48 = 265. */
@media (max-width: 960px) {
  .tl-nav-right .tl-theme-toggle { display: none; }
  body.nav-open .tl-nav-right .tl-theme-toggle { display: inline-flex; }
}
@media (max-width: 480px) {
  .tl-nav-inner { gap: var(--sp-3); }
}

/* ==================== CARDS ==================== */
.card {
  background: var(--panel);
  border: 1px solid var(--stroke-soft);
  border-radius: var(--r-lg);
  padding: 24px;
  transition: border-color var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.card-elevate { background: var(--elevate); border-color: var(--stroke); }
.card-hover:hover { border-color: var(--stroke-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }

/* ==================== CHIPS ==================== */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 4px;
  border: 1px solid var(--stroke);
  color: var(--muted-strong);
  background: var(--panel);
  line-height: 1.4;
}
.chip-dot::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.chip-accent { color: var(--accent); border-color: var(--accent-line); background: var(--accent-tint); }
.chip-success{ color: var(--success); border-color: var(--success-line); background: var(--success-tint); }
.chip-warn   { color: var(--warn);    border-color: var(--warn-line);    background: var(--warn-tint); }
.chip-danger { color: var(--danger);  border-color: var(--danger-line);  background: var(--danger-tint); }
.chip-ink    { color: var(--text);    border-color: var(--stroke);       background: var(--elevate); }

/* Stage chips — map to pipeline stages */
.chip-stage-lead   { color: var(--stage-lead);  background: var(--stage-lead-tint);  border-color: transparent; }
.chip-stage-quote  { color: var(--stage-quote); background: var(--stage-quote-tint); border-color: transparent; }
.chip-stage-won    { color: var(--stage-won);   background: var(--stage-won-tint);   border-color: transparent; }
.chip-stage-job    { color: var(--stage-job);   background: var(--stage-job-tint);   border-color: transparent; }
.chip-stage-field  { color: var(--stage-field); background: var(--stage-field-tint); border-color: transparent; }
.chip-stage-done   { color: var(--stage-done);  background: var(--stage-done-tint);  border-color: transparent; }

/* ==================== SECTION HEADER ==================== */
.section-header {
  display: flex; flex-direction: column; gap: 14px;
  max-width: 780px;
}
.section-header h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 600; }
.section-header .sub { color: var(--muted); font-size: var(--fs-lead); line-height: 1.5; max-width: 62ch; }
.section-header.center { margin-left: auto; margin-right: auto; text-align: center; align-items: center; }
.section-header.with-link {
  flex-direction: row; justify-content: space-between; align-items: flex-end; max-width: none; gap: 24px;
}
@media (max-width: 860px) {
  .section-header.with-link { flex-direction: column; align-items: flex-start; }
}

/* ==================== FORM INPUTS ==================== */
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label {
  font-size: 0.8125rem; font-weight: 500;
  color: var(--text-soft);
  letter-spacing: -0.005em;
}
.input, .textarea, .select {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--stroke);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  padding: 11px 14px;
  border-radius: var(--r-md);
  transition: border-color var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
  min-height: 42px;
}
.input::placeholder, .textarea::placeholder { color: var(--muted-subtle); }
.input:hover, .textarea:hover, .select:hover { border-color: var(--stroke-strong); }
.input:focus, .textarea:focus, .select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
.textarea { min-height: 110px; resize: vertical; line-height: 1.55; }
.field.has-error .input, .field.has-error .textarea { border-color: var(--danger); }
.field.has-error .helper { color: var(--danger); }
.helper { font-size: 0.8125rem; color: var(--muted); }

.field-group {
  display: flex; align-items: stretch;
  border: 1px solid var(--stroke);
  border-radius: var(--r-md);
  background: var(--panel);
  overflow: hidden;
  transition: border-color var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.field-group:focus-within { border-color: var(--accent); box-shadow: var(--focus-ring); }
.field-group .input { border: 0; background: transparent; }
.field-group .affix {
  display: inline-flex; align-items: center; padding: 0 12px;
  color: var(--muted); background: var(--elevate);
  border-left: 1px solid var(--stroke-soft);
  font-size: 0.875rem;
}
.field-group .affix:first-child { border-left: 0; border-right: 1px solid var(--stroke-soft); }

/* Check / radio */
.check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 0.9375rem; }
.check input { position: absolute; opacity: 0; pointer-events: none; }
.check .box {
  width: 18px; height: 18px;
  border: 1.5px solid var(--stroke-strong);
  background: var(--panel);
  border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color var(--dur-med) var(--ease-out), background-color var(--dur-med) var(--ease-out);
  flex-shrink: 0;
}
.check.radio .box { border-radius: 50%; }
.check:hover .box { border-color: var(--text); }
.check input:checked + .box { border-color: var(--text); background: var(--text); }
.check.checkbox input:checked + .box::after {
  width: 10px; height: 10px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
  content: '';
}
.check.radio input:checked + .box::after {
  width: 8px; height: 8px; background: var(--panel); border-radius: 50%;
  content: '';
}

/* Switch */
.switch {
  display: inline-flex; align-items: center; gap: 10px;
  cursor: pointer; font-size: 0.9375rem; color: var(--text);
}
.switch .track {
  width: 40px; height: 22px;
  background: var(--stroke);
  border-radius: 999px;
  position: relative;
  transition: background-color var(--dur-med) var(--ease-out);
  flex-shrink: 0;
}
.switch .thumb {
  position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #FFFFFF;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-med) var(--ease-out);
}
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch input:checked ~ .track { background: var(--text); }
.switch input:checked ~ .track .thumb { transform: translateX(18px); }

/* ==================== ACCORDION ==================== */
.accordion { border-top: 1px solid var(--stroke-soft); }
.acc-item { border-bottom: 1px solid var(--stroke-soft); }
.acc-btn {
  width: 100%;
  display: flex; align-items: center; gap: 20px;
  padding: 22px 0;
  background: transparent; border: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.0625rem; font-weight: 500;
  text-align: left; cursor: pointer;
  letter-spacing: -0.01em;
  transition: color var(--dur-med) var(--ease-out);
}
.acc-btn:hover { color: var(--accent); }
.acc-btn .chev {
  margin-left: auto; width: 16px; height: 16px; color: var(--muted);
  transition: transform var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out);
  flex-shrink: 0;
}
.acc-item.is-open .acc-btn .chev { transform: rotate(180deg); color: var(--accent); }
.acc-body {
  max-height: 0; overflow: hidden;
  transition: max-height var(--dur-slow) var(--ease-out);
}
.acc-item.is-open .acc-body { max-height: 400px; }
.acc-body-inner {
  padding: 0 0 24px;
  color: var(--muted);
  font-size: 0.9375rem; line-height: 1.65;
  max-width: 72ch;
}
.acc-item .acc-cat {
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted-subtle);
  flex-shrink: 0; width: 110px;
}

/* ==================== PIPELINE RIBBON (hero centerpiece) ==================== */
.pipeline-ribbon {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  position: relative;
}
@media (max-width: 1023px) { .pipeline-ribbon { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { .pipeline-ribbon { grid-template-columns: repeat(2, 1fr); gap: 8px; } }

.pipeline-stage {
  background: var(--panel);
  border: 1px solid var(--stroke-soft);
  border-radius: var(--r-md);
  padding: 14px 14px 12px;
  display: flex; flex-direction: column; gap: 8px;
  position: relative;
  transition: border-color var(--dur-med) var(--ease-out),
              background-color var(--dur-med) var(--ease-out),
              transform var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out);
  min-height: 118px;
}
.pipeline-stage .stage-label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-subtle);
  display: flex; align-items: center; gap: 6px;
}
.pipeline-stage .stage-label .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: 0.6;
}
.pipeline-stage .stage-title {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.pipeline-stage .stage-meta {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.pipeline-stage[data-stage="lead"]  { --stage-c: var(--stage-lead);  --stage-tc: var(--stage-lead-tint); }
.pipeline-stage[data-stage="quote"] { --stage-c: var(--stage-quote); --stage-tc: var(--stage-quote-tint); }
.pipeline-stage[data-stage="won"]   { --stage-c: var(--stage-won);   --stage-tc: var(--stage-won-tint); }
.pipeline-stage[data-stage="job"]   { --stage-c: var(--stage-job);   --stage-tc: var(--stage-job-tint); }
.pipeline-stage[data-stage="field"] { --stage-c: var(--stage-field); --stage-tc: var(--stage-field-tint); }
.pipeline-stage[data-stage="done"]  { --stage-c: var(--stage-done);  --stage-tc: var(--stage-done-tint); }

.pipeline-stage.is-active {
  border-color: var(--stage-c);
  background: var(--stage-tc);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.pipeline-stage.is-active .stage-label { color: var(--stage-c); }
.pipeline-stage.is-active .stage-label .dot { opacity: 1; }

.pipeline-stage .count-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px;
  background: transparent;
  overflow: hidden;
  border-bottom-left-radius: var(--r-md);
  border-bottom-right-radius: var(--r-md);
}
.pipeline-stage.is-active .count-bar::before {
  content: '';
  display: block;
  height: 100%;
  background: var(--stage-c);
  animation: ribbon-progress var(--dur-ribbon) var(--ease-in-out) forwards;
}
@keyframes ribbon-progress { from { width: 0%; } to { width: 100%; } }

/* ==================== LIFECYCLE STEPS ==================== */
.lifecycle-row {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.4fr);
  gap: 64px;
  align-items: center;
  padding: 48px 0;
  border-bottom: 1px solid var(--stroke-soft);
}
.lifecycle-row:last-child { border-bottom: 0; }
.lifecycle-row.reverse { grid-template-columns: minmax(320px, 1.4fr) minmax(280px, 1fr); }
.lifecycle-row.reverse .lifecycle-copy { order: 2; }
@media (max-width: 960px) {
  .lifecycle-row, .lifecycle-row.reverse { grid-template-columns: 1fr; gap: 32px; padding: 32px 0; }
  .lifecycle-row.reverse .lifecycle-copy { order: 0; }
}

.lifecycle-copy .stage-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px;
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  border-radius: 4px;
  margin-bottom: 20px;
}
.lifecycle-copy .stage-pill .num {
  opacity: 0.6;
}
.lifecycle-copy h3 {
  font-size: clamp(1.5rem, 1.2vw + 1rem, 2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin-bottom: 16px;
}
.lifecycle-copy p.blurb {
  color: var(--muted);
  font-size: 1.0625rem;
  line-height: 1.55;
  max-width: 48ch;
  margin-bottom: 24px;
}
.lifecycle-copy ul.features {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.lifecycle-copy ul.features li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 0.9375rem; color: var(--text-soft);
  line-height: 1.45;
}
.lifecycle-copy ul.features li::before {
  content: ''; flex-shrink: 0;
  width: 16px; height: 16px; margin-top: 3px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B7A97' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
}
[data-theme="dark"] .lifecycle-copy ul.features li::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338C8EC' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}

/* ==================== PRODUCT MOCK FRAME (for mocked UIs) ==================== */
.product-shot {
  background: var(--panel);
  border: 1px solid var(--stroke-soft);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  position: relative;
}
.product-shot .chrome-bar {
  height: 36px;
  border-bottom: 1px solid var(--stroke-soft);
  background: var(--elevate);
  display: flex; align-items: center; padding: 0 14px;
  gap: 10px;
}
.product-shot .chrome-bar .dots { display: flex; gap: 6px; }
.product-shot .chrome-bar .dots span {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--stroke-strong); opacity: 0.55;
}
.product-shot .chrome-bar .addr {
  flex: 1;
  text-align: center;
  font-family: var(--font-mono); font-size: 0.6875rem;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.product-shot .chrome-bar .addr::before {
  content: '⌘';
  margin-right: 6px;
  opacity: 0.6;
}

/* ==================== KANBAN / PIPELINE BOARD MOCK ==================== */
.kanban {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 18px;
  background: var(--base);
}
.kanban-col { display: flex; flex-direction: column; gap: 8px; min-height: 240px; }
.kanban-col-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 4px;
  font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
}
.kanban-col-head .count { color: var(--muted-subtle); }
.kanban-card {
  background: var(--panel);
  border: 1px solid var(--stroke-soft);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 4px;
  box-shadow: var(--shadow-xs);
  transition: border-color var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.kanban-card:hover { border-color: var(--stroke-strong); transform: translateY(-1px); }
.kanban-card .name {
  font-size: 0.8125rem; font-weight: 500; color: var(--text);
  letter-spacing: -0.005em;
}
.kanban-card .meta {
  font-size: 0.6875rem; color: var(--muted);
  display: flex; gap: 6px; align-items: center;
}
.kanban-card .amt {
  font-family: var(--font-mono); color: var(--text);
  font-size: 0.6875rem; letter-spacing: 0.02em;
  margin-top: 2px;
}
.kanban-card.stage-lead  { border-top: 2px solid var(--stage-lead); }
.kanban-card.stage-quote { border-top: 2px solid var(--stage-quote); }
.kanban-card.stage-won   { border-top: 2px solid var(--stage-won); }
.kanban-card.stage-job   { border-top: 2px solid var(--stage-job); }

/* ==================== JOB CARD MOCK ==================== */
.job-card {
  background: var(--panel);
  border: 1px solid var(--stroke-soft);
  border-radius: var(--r-md);
  padding: 18px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: var(--shadow-sm);
}
.job-card .header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
}
.job-card .job-title {
  font-size: 1rem; font-weight: 600; letter-spacing: -0.01em;
  line-height: 1.3;
}
.job-card .job-addr {
  font-size: 0.8125rem; color: var(--muted); margin-top: 2px;
}
.job-card .job-meta {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  padding: 12px 0; border-top: 1px solid var(--stroke-soft); border-bottom: 1px solid var(--stroke-soft);
}
.job-card .job-meta .mk { display: flex; flex-direction: column; gap: 2px; }
.job-card .job-meta .mk .label {
  font-family: var(--font-mono); font-size: 0.625rem;
  color: var(--muted-subtle); letter-spacing: 0.1em; text-transform: uppercase;
}
.job-card .job-meta .mk .val { font-size: 0.8125rem; color: var(--text); font-weight: 500; }
.job-card .job-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.job-card .assignee {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.8125rem; color: var(--muted);
}
.job-card .assignee .avatar {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--ink-accent-soft);
  color: var(--text);
  font-family: var(--font-mono); font-size: 0.625rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 500;
  border: 1px solid var(--stroke-soft);
}

/* ==================== INVOICE MOCK ==================== */
.invoice {
  background: var(--panel);
  padding: 28px;
  font-size: 0.8125rem;
  color: var(--text);
}
.invoice .inv-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 20px;
}
.invoice .inv-head .brand {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1rem; letter-spacing: -0.02em;
}
.invoice .inv-head .num {
  font-family: var(--font-mono); font-size: 0.6875rem;
  color: var(--muted); letter-spacing: 0.06em;
}
.invoice table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.invoice th, .invoice td {
  text-align: left;
  padding: 8px 0;
  border-bottom: 1px solid var(--stroke-soft);
  font-size: 0.75rem;
}
.invoice th {
  font-family: var(--font-mono); font-size: 0.625rem;
  color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 500;
}
.invoice td.num-col { text-align: right; font-family: var(--font-mono); }
.invoice .totals {
  display: flex; flex-direction: column; gap: 4px;
  align-items: flex-end; margin-top: 8px;
}
.invoice .totals .row {
  display: flex; gap: 28px; font-size: 0.8125rem;
}
.invoice .totals .row.grand {
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  padding-top: 8px; border-top: 2px solid var(--text);
  margin-top: 4px;
}

/* ==================== DATA TABLE ==================== */
.dtable {
  width: 100%; border-collapse: collapse;
  font-size: 0.8125rem;
}
.dtable thead th {
  text-align: left;
  padding: 10px 14px;
  font-family: var(--font-mono); font-size: 0.625rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  border-bottom: 1px solid var(--stroke-soft);
  background: var(--elevate);
}
.dtable tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--stroke-soft);
  color: var(--text);
}
.dtable tbody tr:hover td { background: var(--elevate); }
.dtable td.mono { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted-strong); }

/* ==================== DASHBOARD TILES ==================== */
.dash-tile {
  background: var(--panel);
  border: 1px solid var(--stroke-soft);
  border-radius: var(--r-md);
  padding: 18px;
  display: flex; flex-direction: column; gap: 8px;
}
.dash-tile .label {
  font-family: var(--font-mono); font-size: 0.625rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted);
}
.dash-tile .value {
  font-family: var(--font-display);
  font-size: 1.875rem; font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1;
}
.dash-tile .delta {
  font-family: var(--font-mono); font-size: 0.6875rem;
  color: var(--success);
  display: inline-flex; align-items: center; gap: 4px;
}
.dash-tile .delta.down { color: var(--danger); }
.dash-tile .spark { height: 40px; margin-top: auto; }

/* ==================== FEATURE CARD (grid) ==================== */
.feature-card {
  background: var(--panel);
  border: 1px solid var(--stroke-soft);
  border-radius: var(--r-lg);
  padding: 28px;
  display: flex; flex-direction: column; gap: 14px;
  transition: border-color var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.feature-card:hover {
  border-color: var(--stroke-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.feature-card .icon-wrap {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent);
  background: var(--accent-tint);
  border-radius: 9px;
}
.feature-card .icon-wrap svg { width: 20px; height: 20px; }
.feature-card h3 {
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.005em;
}
.feature-card p {
  color: var(--muted); font-size: 0.9375rem; line-height: 1.55;
}
.feature-card .learn-more {
  margin-top: auto;
  color: var(--accent); font-size: 0.8125rem; font-weight: 500;
  display: inline-flex; align-items: center; gap: 4px;
}
.feature-card .learn-more:hover { gap: 8px; }

/* ==================== QUOTE / TESTIMONIAL ==================== */
.quote {
  background: var(--panel);
  border: 1px solid var(--stroke-soft);
  border-radius: var(--r-lg);
  padding: 32px;
  position: relative;
}
.quote-body {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--text);
  font-weight: 500;
  margin-bottom: 20px;
}
.quote-attr { display: flex; align-items: center; gap: 12px; }
.quote-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--ink-accent-soft);
  border: 1px solid var(--stroke-soft);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 0.75rem;
  color: var(--text);
  font-weight: 500;
}
.quote-meta { display: flex; flex-direction: column; }
.quote-name { font-size: 0.875rem; font-weight: 600; color: var(--text); }
.quote-role { font-size: 0.8125rem; color: var(--muted); }

/* ==================== PRICING ==================== */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 1023px) { .pricing-grid { grid-template-columns: 1fr; } }

.price-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--stroke-soft);
  border-radius: var(--r-lg);
  padding: 32px 28px;
  display: flex; flex-direction: column; gap: 18px;
  transition: border-color var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.price-card:hover { box-shadow: var(--shadow-md); }
.price-card.is-recommended {
  border-color: var(--text);
  box-shadow: var(--shadow-md);
}
.price-card.is-recommended::before {
  content: 'MOST POPULAR';
  position: absolute; top: -10px; left: 24px;
  padding: 4px 10px;
  background: var(--text);
  color: var(--panel);
  font-family: var(--font-mono); font-size: 0.625rem; font-weight: 500;
  letter-spacing: 0.14em;
  border-radius: 4px;
}
.price-card .tier-name {
  font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.02em; color: var(--muted);
  text-transform: uppercase;
}
.price-card .price {
  display: flex; align-items: baseline; gap: 6px;
  font-family: var(--font-display);
}
.price-card .price .amount {
  font-size: 2.75rem; font-weight: 600;
  letter-spacing: -0.025em; color: var(--text); line-height: 1;
}
.price-card .price .unit {
  font-family: var(--font-mono); font-size: 0.875rem; color: var(--muted);
}
.price-card .positioning { color: var(--muted); font-size: 0.9375rem; line-height: 1.5; }
.price-card ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.price-card li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 0.9375rem; color: var(--text);
  line-height: 1.45;
}
.price-card li::before {
  content: ''; flex-shrink: 0;
  width: 16px; height: 16px; margin-top: 3px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
}
.price-card .btn { margin-top: auto; }

/* ==================== INTEGRATIONS ==================== */
.int-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  border-left: 1px solid var(--stroke-soft);
  border-top: 1px solid var(--stroke-soft);
  background: var(--stroke-soft);
}
@media (max-width: 1023px) { .int-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { .int-grid { grid-template-columns: repeat(2, 1fr); } }

.int-tile {
  background: var(--panel);
  border-right: 1px solid var(--stroke-soft);
  border-bottom: 1px solid var(--stroke-soft);
  padding: 28px 20px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  min-height: 132px;
  transition: background-color var(--dur-med) var(--ease-out);
}
.int-tile:hover { background: var(--elevate); }
.int-tile .logo {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text);
}
.int-tile .logo svg { width: 100%; height: 100%; }
.int-tile .name {
  font-size: 0.8125rem; font-weight: 500;
  color: var(--text);
}
.int-tile .sub {
  font-family: var(--font-mono); font-size: 0.625rem;
  color: var(--muted-subtle); letter-spacing: 0.08em;
}

/* ==================== DEVICE FRAME (phone) ==================== */
.phone-frame {
  width: 272px;
  aspect-ratio: 9 / 19.5;
  background: #0F1116;
  border-radius: 36px;
  padding: 10px;
  box-shadow: var(--shadow-hero), inset 0 0 0 1px rgba(255,255,255,0.04);
  position: relative;
}
.phone-frame .notch {
  position: absolute; top: 18px; left: 50%;
  transform: translateX(-50%);
  width: 84px; height: 22px; border-radius: 22px;
  background: #000; z-index: 2;
}
.phone-frame .screen {
  width: 100%; height: 100%;
  border-radius: 28px;
  overflow: hidden;
  background: #000;
  position: relative;
}
.phone-frame .screen img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ==================== FOOTER ==================== */
.tl-footer {
  border-top: 1px solid var(--stroke-soft);
  margin-top: var(--sp-24);
  padding-top: var(--sp-16);
  padding-bottom: var(--sp-10);
  background: var(--base);
}
.tl-footer-grid {
  display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: var(--sp-10);
}
@media (max-width: 860px) { .tl-footer-grid { grid-template-columns: 1fr 1fr; } }
/* Two columns at 320px are 136px each; stack them. */
@media (max-width: 480px) { .tl-footer-grid { grid-template-columns: 1fr; gap: var(--sp-8); } }
/* The footer link lists were 16px-tall tap targets (bare line-height, no
   padding) and were most of the sub-44px count on every page. On phone and
   tablet widths each link becomes a 44px row; the list gap goes to zero so the
   rhythm stays close to the desktop 10px spacing. */
@media (max-width: 960px) {
  .tl-footer ul { gap: 0; }
  .tl-footer li a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
}
.tl-footer h4 {
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted-subtle); margin-bottom: 14px;
}
.tl-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.tl-footer li a { color: var(--muted); font-size: 0.9375rem; transition: color var(--dur-med) var(--ease-out); }
.tl-footer li a:hover { color: var(--text); }
.tl-footer-brand-tag {
  color: var(--muted); font-size: 0.9375rem;
  margin-top: 14px; max-width: 32ch; line-height: 1.55;
}
.tl-footer-bottom {
  border-top: 1px solid var(--stroke-soft);
  padding-top: var(--sp-6);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  color: var(--muted-subtle); font-size: 0.8125rem;
}
.trust-badges { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.trust-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  font-family: var(--font-mono); font-size: 0.625rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid var(--stroke); border-radius: 4px;
  color: var(--muted);
  background: var(--panel);
}

/* ==================== UTILS ==================== */
.stack-4  > * + * { margin-top: 4px; }
.stack-8  > * + * { margin-top: 8px; }
.stack-12 > * + * { margin-top: 12px; }
.stack-16 > * + * { margin-top: 16px; }
.stack-24 > * + * { margin-top: 24px; }
.stack-32 > * + * { margin-top: 32px; }
.row     { display: flex; align-items: center; gap: 12px; }
.row-8   { display: flex; align-items: center; gap: 8px; }
.row-16  { display: flex; align-items: center; gap: 16px; }
.row-24  { display: flex; align-items: center; gap: 24px; }
.grow    { flex: 1; }
.center-text { text-align: center; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================================================
   INDUSTRY PAGES  (/industries and /industries/<slug>)
   Shared visual template for the horizontal-positioning pages.
   Reuses .container / .section / .section-header / .btn / .eyebrow.
   Every industry page is the same layout; only the copy changes.
   ============================================================ */
.ind-hero { padding: 88px 0 56px; position: relative; overflow: hidden; border-bottom: 1px solid var(--stroke-soft); }
.ind-hero::before { content:''; position:absolute; inset:0; background: radial-gradient(900px 500px at 82% -12%, var(--accent-tint), transparent 60%); pointer-events:none; }
.ind-hero .container { position: relative; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center; }
.ind-crumb { display:inline-flex; gap:6px; align-items:center; font-family:var(--font-mono); font-size:0.6875rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); margin-bottom:16px; }
.ind-crumb a { color: var(--muted); }
.ind-crumb a:hover { color: var(--text); }
.ind-chip { display:inline-flex; align-items:center; gap:10px; padding:6px 12px; background:var(--panel); border:1px solid var(--stroke); border-radius:999px; font-family:var(--font-mono); font-size:0.6875rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted-strong); }
.ind-chip .d { width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px var(--accent-tint); }
.ind-chip .flag { padding:2px 8px; background:var(--accent-tint-strong); color:var(--accent-ink); border-radius:999px; font-weight:600; }
[data-theme="dark"] .ind-chip .flag { color:var(--accent); }
.ind-hero h1 { margin-top:20px; max-width:18ch; font-family:var(--font-display); font-weight:600; font-size:clamp(2.1rem, 3vw + 1rem, 3.4rem); letter-spacing:-0.025em; line-height:1.06; }
.ind-hero h1 .accent-word { position:relative; display:inline-block; }
.ind-hero h1 .accent-word::after { content:''; position:absolute; left:0; right:0; bottom:4px; height:10px; background:var(--accent-tint-strong); z-index:-1; border-radius:2px; }
.ind-hero .lead { margin-top:20px; max-width:52ch; font-size:var(--fs-lead); color:var(--muted); line-height:1.55; }
.ind-hero .ctas { margin-top:28px; display:flex; gap:12px; flex-wrap:wrap; }

/* Reusable mock: a work-order / checklist snapshot */
.ind-mock { background:var(--panel); border:1px solid var(--stroke); border-radius:var(--r-xl); padding:20px; box-shadow:var(--shadow-lg); }
.ind-mock .mk-head { display:flex; align-items:center; justify-content:space-between; padding-bottom:12px; border-bottom:1px solid var(--stroke-soft); margin-bottom:6px; }
.ind-mock .mk-head .t { font-family:var(--font-mono); font-size:0.6875rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); }
.ind-mock .mk-head .live { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:0.625rem; letter-spacing:0.08em; color:var(--success); }
.ind-mock .mk-head .live .d { width:6px; height:6px; border-radius:50%; background:var(--success); }
.ind-mock .mk-row { display:flex; align-items:center; gap:12px; padding:9px 0; border-top:1px solid var(--stroke-soft); font-size:0.8125rem; color:var(--text); }
.ind-mock .mk-row:first-of-type { border-top:none; }
.ind-mock .mk-row .ck { width:16px; height:16px; border-radius:5px; background:var(--accent-tint); color:var(--accent); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.ind-mock .mk-row .ck svg { width:11px; height:11px; }
.ind-mock .mk-row .mt { margin-left:auto; font-family:var(--font-mono); font-size:0.6875rem; color:var(--muted); }
.ind-mock .mk-foot { margin-top:12px; padding:10px 12px; background:var(--elevate); border-left:3px solid var(--accent); border-radius:6px; font-size:0.75rem; color:var(--text); line-height:1.45; }

.ind-section { padding: 72px 0; }
.ind-section.alt { background:var(--elevate); border-top:1px solid var(--stroke-soft); border-bottom:1px solid var(--stroke-soft); }

.ind-pains { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:36px; }
.ind-pain { padding:28px 24px; background:var(--panel); border:1px solid var(--stroke-soft); border-radius:var(--r-xl); display:flex; flex-direction:column; gap:12px; }
.ind-pain .ic { width:44px; height:44px; border-radius:11px; background:var(--accent-tint); color:var(--accent); display:flex; align-items:center; justify-content:center; }
.ind-pain .ic svg { width:22px; height:22px; }
.ind-pain h3 { font-family:var(--font-display); font-weight:600; font-size:1.0625rem; letter-spacing:-0.01em; color:var(--text); }
.ind-pain p { font-size:0.9rem; color:var(--muted); line-height:1.55; }
.ind-pain .ans { margin-top:auto; padding:12px 14px; background:var(--elevate); border-left:3px solid var(--accent); border-radius:6px; font-size:0.85rem; color:var(--text); line-height:1.5; }
.ind-pain .ans strong { font-weight:600; }

.ind-flow { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:36px; }
.ind-step { padding:20px; background:var(--panel); border:1px solid var(--stroke-soft); border-radius:var(--r-lg); }
.ind-step .n { font-family:var(--font-mono); font-size:0.6875rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; }
.ind-step h4 { font-family:var(--font-display); font-weight:600; font-size:0.98rem; letter-spacing:-0.01em; color:var(--text); }
.ind-step p { font-size:0.8125rem; color:var(--muted); line-height:1.5; margin-top:6px; }

.ind-field { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.ind-field .fl-list { display:flex; flex-direction:column; gap:10px; margin-top:18px; }
.ind-field .fl-list .row { display:flex; align-items:center; gap:10px; font-size:0.9rem; color:var(--text); }
.ind-field .fl-list .row .d { width:7px; height:7px; border-radius:50%; background:var(--accent); flex-shrink:0; }

.ind-features { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:36px; }
.ind-feature { padding:22px; background:var(--panel); border:1px solid var(--stroke-soft); border-radius:var(--r-lg); display:flex; flex-direction:column; gap:8px; }
.ind-feature .ic { width:32px; height:32px; border-radius:8px; background:var(--ink-accent-soft); color:var(--text); display:inline-flex; align-items:center; justify-content:center; }
.ind-feature .ic svg { width:16px; height:16px; }
.ind-feature h4 { font-weight:600; font-size:0.9375rem; letter-spacing:-0.005em; color:var(--text); }
.ind-feature p { font-size:0.8125rem; color:var(--muted); line-height:1.5; }

.ind-compliance { padding:28px 32px; background:var(--panel); border:1px solid var(--stroke); border-radius:var(--r-xl); display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:start; box-shadow:var(--shadow-sm); }
.ind-compliance .ic { width:44px; height:44px; border-radius:11px; background:var(--accent-tint); color:var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ind-compliance .ic svg { width:22px; height:22px; }
.ind-compliance h3 { font-family:var(--font-display); font-weight:600; font-size:1.125rem; letter-spacing:-0.01em; color:var(--text); margin-bottom:8px; }
.ind-compliance p { font-size:0.9375rem; color:var(--muted); line-height:1.6; }
.ind-compliance p + p { margin-top:10px; }

.ind-cta { padding:80px 0; text-align:center; }
.ind-cta h2 { font-family:var(--font-display); font-weight:600; font-size:clamp(1.75rem, 2.5vw + 1rem, 2.6rem); letter-spacing:-0.025em; max-width:24ch; margin:0 auto; line-height:1.12; }
.ind-cta p { margin-top:16px; max-width:52ch; margin-left:auto; margin-right:auto; color:var(--muted); font-size:var(--fs-lead); line-height:1.55; }
.ind-cta .ctas { margin-top:28px; display:inline-flex; gap:12px; flex-wrap:wrap; justify-content:center; }

/* Industries index grid */
.ind-index-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:40px; }
.ind-card { padding:26px 24px; background:var(--panel); border:1px solid var(--stroke-soft); border-radius:var(--r-xl); display:flex; flex-direction:column; gap:10px; text-decoration:none; transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.ind-card:hover { border-color:var(--stroke-strong); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.ind-card .ic { width:40px; height:40px; border-radius:10px; background:var(--accent-tint); color:var(--accent); display:flex; align-items:center; justify-content:center; }
.ind-card .ic svg { width:20px; height:20px; }
.ind-card h3 { font-family:var(--font-display); font-weight:600; font-size:1.0625rem; letter-spacing:-0.01em; color:var(--text); display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ind-card .flag { font-family:var(--font-mono); font-size:0.5625rem; letter-spacing:0.1em; text-transform:uppercase; padding:2px 7px; background:var(--accent-tint-strong); color:var(--accent-ink); border-radius:999px; }
[data-theme="dark"] .ind-card .flag { color:var(--accent); }
.ind-card p { font-size:0.875rem; color:var(--muted); line-height:1.5; }
.ind-card .go { margin-top:auto; font-family:var(--font-mono); font-size:0.75rem; color:var(--accent); letter-spacing:0.04em; }

@media (max-width: 980px) {
  .ind-hero .container { grid-template-columns:1fr; gap:40px; }
  .ind-pains { grid-template-columns:1fr; }
  .ind-flow { grid-template-columns:1fr 1fr; }
  .ind-features { grid-template-columns:1fr 1fr; }
  .ind-field { grid-template-columns:1fr; gap:32px; }
  .ind-index-grid { grid-template-columns:1fr 1fr; }
  .ind-compliance { grid-template-columns:1fr; }
}
@media (max-width: 560px) {
  .ind-flow, .ind-features, .ind-index-grid { grid-template-columns:1fr; }
}

/* ==================== TYPE FLOOR: PHONE AND TABLET ==================== */
/* The token scale's smallest size is --fs-mono (12px) and nothing a prospect
   reads sits below it, at any width (D-29). These labels (eyebrows, chips,
   footer headings, badges, breadcrumbs, step numbers) are hand-written at 9px to
   11px earlier in this file; this floor wins by cascade order. The product
   mockups' internal labels (kanban, invoice, dashboard tiles) are deliberately
   not included: they are pictures of the product, framed and decorative, and
   their type is drawn to the frame, not read as copy. */
.tl-foot-claim .eyebrow-mono, .tl-foot-badge, .tl-theme-toggle, .chip,
.acc-item .acc-cat, .pipeline-stage .stage-label, .pipeline-stage .stage-meta,
.lifecycle-copy .stage-pill, .tl-footer h4, .trust-badge,
.price-card.is-recommended::before, .int-tile .sub, .ind-crumb, .ind-step .n,
.ind-card .flag, .ind-chip { font-size: var(--fs-mono); }