/*
 * Backlinkerz Enterprise stylesheet.
 * Flat surfaces, solid fills, one accent colour. No gradients, no glass, no glow.
 */

:root {
  /*
   * Palette and type are chosen deliberately away from framework defaults.
   *
   * The purple is not Tailwind violet-700 (#6d28d9) and the red is not
   * Material red-800 (#c62828). Those exact hexes are the fingerprint of a
   * generated page, and a brand that ships its framework's defaults looks
   * like it never made a decision. Every pairing here clears WCAG AAA,
   * checked with a contrast script rather than by eye.
   *
   * Light only. The page declares that below so it does not follow the
   * operating system into a dark theme it was never designed for.
   */
  color-scheme: light;

  --bg: #f7f6f9;
  --panel: #ffffff;
  --panel-2: #efedf3;
  --line: #e2dfe8;
  --line-strong: #bfb9cc;
  --text: #171520;
  --muted: #58536a;
  --accent: #56289c;
  --accent-hover: #3e1b73;
  --accent-soft: #f0eaf9;
  /* Desk only. The storefront signals state with the accent, not with a
     stock success green. */
  --ok: #14603c;
  /* Amber is a highlighter here, never a text colour: dark enough to pass
     contrast as text, it stops being amber and reads brown. It paints tints
     and borders only. */
  --warn: #7a4a05;
  --warn-soft: #fbf0de;
  /* Was #98202f, which is hue 353 at only 65% saturation, so it read maroon
     rather than red. Same family as --arrow, deeper so an error is not
     mistaken for wayfinding. */
  --danger: #a50f1b;
  /* True red, not brick. The value before this sat at hue 6 with 63%
     saturation, which reads brown on a dim screen. This is hue 355 at 82%,
     unmistakably red without landing on a framework default, and deep enough
     to pass 4.5:1 as small text on every surface the site paints it on. One
     red, no display-versus-text exception to remember. */
  --arrow: #b0111f;
  --arrow-soft: #fbe9ea;

  /* A tighter radius scale than the usual 8px-on-everything. Cards stay
     nearly square, which reads as editorial rather than as a component kit. */
  --radius: 5px;
  --radius-sm: 3px;

  --glass: rgba(255, 255, 255, 0.74);
  --glass-strong: rgba(255, 255, 255, 0.88);
  --glass-line: rgba(23, 21, 32, 0.10);
  --shadow-1: 0 1px 2px rgba(26, 18, 46, 0.05), 0 4px 12px rgba(26, 18, 46, 0.06);
  --shadow-2: 0 2px 6px rgba(26, 18, 46, 0.07), 0 14px 32px rgba(26, 18, 46, 0.12);
  --wrap: 1180px;

  /*
   * Not Inter, Poppins or Montserrat, which are the three that mark a page as
   * generated. Headlines are Archivo, run wide and heavy through its width
   * axis: it hits hard at display size, stays completely legible because it is
   * a workhorse grotesque underneath, and is rarely reached for. Bricolage
   * Grotesque was the previous pick and was more eccentric than readable, which
   * is the wrong trade for a headline somebody has to scan in a second.
   */
  --font-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  /* Money is set in a slab, not in the display grotesque. A heavy geometric
     sans is what every generated dashboard reaches for, and a figure is the
     one thing on this site a buyer reads as a number rather than as a word,
     so it gets a face of its own. A slab also holds its shape on a low
     resolution panel, where a high contrast serif would go thin and shimmer.
     The fallbacks are serif on purpose: if the webfont never lands, the
     figures still read as figures rather than reverting to the body face. */
  --font-figure: 'Zilla Slab', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --font: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.13; margin: 0 0 12px; letter-spacing: -0.022em;
  font-weight: 700;
  /* The width axis is what gives these presence. Falls back harmlessly on any
     engine that ignores it. */
  font-variation-settings: 'wdth' 108;
}
h1 { font-size: clamp(2rem, 4.4vw, 3.15rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 650; }
h3 { font-size: 1.2rem; font-weight: 600; }
h4 { font-size: 1.05rem; font-weight: 600; }
p { margin: 0 0 14px; }
a { color: var(--accent); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* Anchor targets clear the sticky header. */
:where(#lifecycle, #services, #operations, #tiers) { scroll-margin-top: 82px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: #fff; padding: 10px 16px;
}
.skip:focus { left: 12px; top: 12px; }

.eyebrow {
  text-transform: uppercase; letter-spacing: 0.09em; font-size: 0.72rem;
  font-weight: 600; color: var(--muted); margin: 0 0 8px;
}

/* ------------------------------------------------------------- buttons --- */

/* Buttons are drawn as keys that seat when pressed, not as filled rectangles
   with a blurred drop shadow. Three things do that work, and all three are
   shared with the warranty stub so the site reads as one system rather than a
   pile of separate effects: squared corners, a hard offset shadow with no
   blur, and a press that moves the button onto its own shadow. The offset
   colour is a variable so a button on a coloured band can set its own without
   restating the rule. */
.btn {
  --btn-shadow: var(--accent-hover);
  --btn-lift: 3px;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; padding: 12px 22px; border-radius: var(--radius-sm);
  font: inherit; font-weight: 600; font-size: 0.94rem;
  text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
  box-shadow: var(--btn-lift) var(--btn-lift) 0 var(--btn-shadow);
  transition: background-color .12s ease, border-color .12s ease, color .12s ease,
              transform .12s ease, box-shadow .12s ease;
}
/* Halfway down on hover, fully seated on press, so the click has somewhere
   left to go. */
.btn:hover { --btn-lift: 2px; transform: translate(1px, 1px); }
.btn:active { --btn-lift: 0px; transform: translate(3px, 3px); }

/* The leading marker. A square that stretches into a bar as the button is
   approached, which is the same square-marker and leading-bar vocabulary the
   service chips and step rail already use. */
.btn-primary::before,
.btn-outline::before {
  content: ''; flex: none; width: 7px; height: 7px; background: currentColor;
  transition: width .16s ease, height .16s ease;
}
.btn-primary:hover::before,
.btn-outline:hover::before { width: 15px; height: 2px; }

.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-outline {
  --btn-shadow: var(--line-strong);
  background: var(--panel); color: var(--text); border-color: var(--text);
}
.btn-outline::before { background: var(--accent); }
.btn-outline:hover { --btn-shadow: var(--accent); border-color: var(--accent); color: var(--accent); }

/* Quiet buttons close and dismiss. They are not the point of the screen, so
   they stay flat and carry no marker. */
.btn-quiet {
  --btn-lift: 0px;
  background: transparent; color: var(--muted); border-color: transparent; padding: 8px 12px;
}
.btn-quiet:hover { color: var(--text); background: var(--panel-2); transform: none; }
.btn-quiet:active { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: background-color .12s ease, border-color .12s ease, color .12s ease; }
  .btn:hover, .btn:active { transform: none; }
  .btn-primary::before, .btn-outline::before { transition: none; }
}
.btn-sm { padding: 8px 14px; font-size: 0.88rem; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* -------------------------------------------------------------- header --- */

.site-head {
  position: sticky; top: 0; z-index: 40;
  background: var(--glass);
  border-bottom: 1px solid var(--glass-line);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}
/* Safari before 18 and any browser without backdrop-filter gets an opaque bar
   rather than unreadable text over the scrolling page beneath it. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-head { background: var(--panel); }
}
.head-inner { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.brand-mark {
  width: 32px; height: 32px; display: grid; place-items: center;
  background: var(--accent); color: #fff; border-radius: var(--radius);
  font-weight: 700; font-size: 0.82rem; letter-spacing: 0.02em;
}
.brand-text { font-family: var(--font-display); font-weight: 700; font-size: 1.06rem; letter-spacing: -0.02em; font-variation-settings: 'wdth' 105; }
.head-nav { display: flex; align-items: center; gap: 22px; }
.head-nav a { color: var(--muted); text-decoration: none; font-size: 0.92rem; font-weight: 500; }
.head-nav a:hover { color: var(--text); }
.head-nav a.btn { color: var(--text); }

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

.hero { background: var(--panel); border-bottom: 1px solid var(--line); }
.hero-inner { padding: 76px 24px 64px; }
.hero-inner h1 { max-width: 880px; }
/*
 * The three words are a sequence, not a stack: they read left to right with
 * arrows between them, because the order is the argument. Below the breakpoint
 * they turn vertical rather than wrapping mid-phrase, and the arrows turn with
 * them so the sequence survives.
 */
.hero-title {
  display: flex; align-items: center; flex-wrap: nowrap; gap: clamp(10px, 1.6vw, 22px);
  text-transform: uppercase; letter-spacing: -0.03em; line-height: 1;
  font-size: clamp(1.45rem, 4.6vw, 3.5rem); font-weight: 800;
  font-variation-settings: 'wdth' 115;
  margin: 0 0 22px;
}
.ht-word { white-space: nowrap; }
.ht-refine { color: var(--accent); }

/* Arrow drawn from a rule and two borders, sized in em so it tracks the type. */
.ht-arrow {
  flex: none; position: relative; width: 1.15em; height: 0.09em;
  background: var(--arrow); border-radius: 1px;
}
.ht-arrow::after {
  content: ''; position: absolute; right: -0.02em; top: 50%;
  width: 0.34em; height: 0.34em;
  border-top: 0.09em solid var(--arrow); border-right: 0.09em solid var(--arrow);
  transform: translateY(-50%) rotate(45deg);
}

@media (max-width: 760px) {
  .hero-title {
    flex-direction: column; align-items: flex-start;
    gap: 8px; font-size: clamp(2.1rem, 12vw, 3rem);
  }
  .ht-arrow { width: 0.09em; height: 0.7em; margin-left: 0.35em; }
  .ht-arrow::after {
    right: 50%; top: auto; bottom: -0.02em;
    transform: translateX(50%) rotate(135deg);
  }
}

.hero-lead { font-size: 1.1rem; color: var(--muted); max-width: 660px; }
.hero-stats { max-width: 880px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 44px; }
.hero-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; margin: 0; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.hero-stats > div { background: var(--panel); padding: 16px 18px; }
.hero-stats dt { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em; }
.hero-stats dd { margin: 4px 0 0; font-size: 1.5rem; font-weight: 650; }

/* --------------------------------------------------------------- bands --- */

.band { padding: 72px 0; }
.band-alt { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-lead { color: var(--muted); max-width: 640px; }
.section-head { margin-bottom: 26px; }

.rail { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.rail li { background: var(--panel); padding: 22px; }
.rail-step {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--accent); font-weight: 700;
}
/* Inside the rail the mark sits on a line that is already uppercase and
   letterspaced, so it only needs the rule and the weight. */
.rail-step .stage-mark { font-size: 0.72rem; }
.rail h3 { margin: 8px 0 6px; }
.rail p { color: var(--muted); font-size: 0.93rem; margin: 0; }

/* --------------------------------------------------------------- chips --- */

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
/* Tab-style rather than pills: an underline that slides in carries the state,
   which reads as a control instead of a decorative capsule. */
.chip {
  position: relative; font: inherit; font-size: 0.9rem; font-weight: 550;
  cursor: pointer; padding: 9px 4px 11px; margin-right: 20px;
  border: 0; background: transparent; color: var(--muted);
  transition: color .14s ease;
}
.chip::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .18s ease;
}
.chip:hover { color: var(--text); }
.chip:hover::after { transform: scaleX(1); }
.chip.is-on { color: var(--accent); }
.chip.is-on::after { transform: scaleX(1); }

/* --------------------------------------------------------------- tiles --- */

.tile-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.tile {
  display: flex; flex-direction: column; gap: 10px; text-align: left;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; font: inherit; color: var(--text); cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}
.tile:hover { border-color: var(--accent); background: var(--panel); }
.tile.is-active { border-color: var(--accent); border-width: 2px; padding: 19px; background: var(--accent-soft); }
.tile-top { display: flex; justify-content: space-between; align-items: center; }
/* The service plate. Its number is the catalogue number carried on the service
   itself, so it is the same figure on the tile, in the static catalogue and on
   the desk, rather than a position that changes with the sort order. */
.tile-plate {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-variation-settings: 'wdth' 68;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.11em;
  text-transform: uppercase; line-height: 1; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.tile-plate::before {
  content: ''; flex: none; width: 14px; height: 2px; background: var(--line-strong);
}
.tile:hover .tile-plate, .tile.is-active .tile-plate { color: var(--accent); }
.tile:hover .tile-plate::before,
.tile.is-active .tile-plate::before { background: var(--accent); }

.tile-name { font-weight: 600; font-size: 1.02rem; line-height: 1.3; }
.tile-short { color: var(--muted); font-size: 0.9rem; line-height: 1.45; flex: 1; }
.tile-foot {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px;
}
.tile-from { font-weight: 600; font-size: 0.9rem; }
.tile-count { font-size: 0.8rem; color: var(--muted); }

/* ----------------------------------------------------------- tier cards --- */

.tiers {
  margin-top: 26px; background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 26px;
}
.tiers-head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; margin-bottom: 22px; }
.tiers-desc { color: var(--muted); max-width: 720px; margin: 6px 0 0; }
.tier-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.tier {
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px;
  box-shadow: var(--shadow-1);
}
.tier.is-featured { border-color: var(--accent); border-width: 2px; padding: 19px; }
.tier.is-quote { background: var(--panel-2); }
.tier-flag {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 700; color: var(--accent); margin: 0 0 6px;
}
.tier-name { margin: 0 0 2px; }
.tier-tagline { color: var(--muted); font-size: 0.88rem; margin: 0 0 14px; }
.tier-price { margin: 0 0 4px; display: flex; flex-direction: column; }
.tier-price-main {
  display: inline-flex; align-items: baseline;
  font-family: var(--font-figure); font-size: 1.8rem; font-weight: 700;
  letter-spacing: -0.005em; font-variant-numeric: tabular-nums;
}
.tier-price-sub { font-size: 0.85rem; color: var(--muted); }
.tier-range {
  font-size: 0.8rem; color: var(--muted); margin: 0 0 14px;
  border-top: 1px solid var(--line); padding-top: 10px;
}
.tier-list { list-style: none; padding: 0; margin: 8px 0 20px; flex: 1; }
.tier-list li {
  position: relative; padding-left: 20px; margin-bottom: 7px;
  font-size: 0.89rem; color: var(--muted); line-height: 1.45;
}
.tier-list li::before {
  content: ''; position: absolute; left: 4px; top: 8px;
  width: 6px; height: 6px; background: var(--accent); border-radius: 50%;
}

/* ---------------------------------------------------------------- flow --- */

.split { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px;   box-shadow: var(--shadow-1);
}
.ticks { list-style: none; padding: 0; margin: 0; }
.ticks li {
  position: relative; padding-left: 24px; margin-bottom: 9px;
  color: var(--muted); font-size: 0.93rem;
}
.ticks li::before {
  content: ''; position: absolute; left: 2px; top: 7px; width: 10px; height: 6px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

/* ----------------------------------------------------------------- cta --- */

.cta { background: var(--accent); color: #fff; padding: 52px 0; }

.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.cta h2 { color: #fff; margin-bottom: 6px; }
.cta p { color: rgba(255, 255, 255, 0.82); margin: 0; max-width: 560px; }
/* On the purple band the default offset would be invisible, so it darkens
   instead. The marker inherits the button's own colour and needs no rule. */
.cta .btn-primary {
  --btn-shadow: #2a1152;
  background: #fff; color: var(--accent); border-color: #fff;
}
.cta .btn-primary:hover { background: rgba(255, 255, 255, 0.88); border-color: rgba(255, 255, 255, 0.88); }

/* -------------------------------------------------------------- footer --- */

.site-foot { background: var(--panel); border-top: 1px solid var(--line); padding: 26px 0; }
.foot-inner { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; }
.foot-inner p { margin: 0; color: var(--muted); font-size: 0.88rem; }
.foot-inner nav { display: flex; gap: 20px; }
.foot-inner a { color: var(--muted); text-decoration: none; font-size: 0.88rem; }
.foot-inner a:hover { color: var(--text); }

/* ------------------------------------------------------------ checkout --- */

.checkout-dialog {
  padding: 0; border: 1px solid var(--glass-line); border-radius: 14px;
  background: var(--panel); color: var(--text); box-shadow: var(--shadow-2);
  width: min(1040px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
  overflow-y: auto; overscroll-behavior: contain;
}
/* The frosted layer sits on the backdrop rather than the panel, so form text
   never sits on a blurred, moving surface. */
.checkout-dialog::backdrop {
  background: rgba(10, 13, 18, 0.50);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}

.checkout-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  padding: 22px 26px; border-bottom: 1px solid var(--glass-line);
  position: sticky; top: 0; z-index: 2;
  background: var(--glass-strong);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}
.checkout-head h3 { margin: 0; }
.icon-btn {
  font: inherit; font-size: 0.86rem; cursor: pointer; color: var(--muted);
  background: transparent; border: 1px solid var(--line-strong);
  border-radius: var(--radius); padding: 6px 12px;
}
.icon-btn:hover { color: var(--text); border-color: var(--accent); }

.checkout-body { display: grid; grid-template-columns: 1fr 340px; gap: 0; align-items: start; }
.checkout-main { padding: 24px 26px 30px; }
.checkout-summary {
  border-left: 1px solid var(--line); background: var(--panel-2);
  align-self: stretch; height: 100%;
}
.summary-inner { padding: 24px 26px 30px; position: sticky; top: 88px; }
.checkout-summary h4 { margin: 0 0 14px; }

/* ------------------------------------------------------- slider control --- */

.volume { margin-bottom: 26px; }
.volume-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.volume-head label { font-weight: 550; font-size: 0.92rem; }
.volume-out {
  font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em;
  color: var(--accent); font-variant-numeric: tabular-nums;
}

/* Track and thumb are styled per engine because there is still no single
   cross-browser way to do it. Solid fills only, no gradients. */
.range {
  -webkit-appearance: none; appearance: none; width: 100%;
  height: 28px; background: transparent; cursor: pointer; display: block;
}
.range:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.range::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px; background: var(--panel-2); border: 1px solid var(--line);
}
.range::-moz-range-track {
  height: 6px; border-radius: 3px; background: var(--panel-2); border: 1px solid var(--line);
}
.range::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--accent); }
.range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; margin-top: -10px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--panel);
  box-shadow: var(--shadow-1); transition: transform .12s ease;
}
.range::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--panel); box-shadow: var(--shadow-1);
}
.range:active::-webkit-slider-thumb { transform: scale(1.12); }
/* Typing a number above the tier band leaves the slider pinned at its maximum,
   so it desaturates to show it is no longer the control in charge. */
.range.is-over::-webkit-slider-thumb { background: var(--arrow); }
.range.is-over::-moz-range-thumb { background: var(--arrow); }

.volume-scale {
  display: flex; justify-content: space-between;
  font-size: 0.76rem; color: var(--muted); margin: 2px 0 14px;
}
.volume-exact { display: flex; align-items: stretch; width: fit-content; }
.stepper {
  width: 44px; font: inherit; font-size: 1.15rem; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line-strong); color: var(--text);
  transition: background-color .12s ease, border-color .12s ease;
}
.stepper:first-of-type { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.stepper:last-of-type { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.stepper:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.volume-exact input {
  width: 92px; text-align: center; font: inherit; font-weight: 600; font-size: 1rem;
  border: 1px solid var(--line-strong); border-left: 0; border-right: 0;
  background: var(--panel); color: var(--text); padding: 10px 6px;
  font-variant-numeric: tabular-nums;
}
.volume-note { font-size: 0.83rem; color: var(--muted); margin: 10px 0 0; max-width: 52ch; }

fieldset { border: 0; padding: 0; margin: 0 0 26px; }
legend {
  font-weight: 600; font-size: 0.95rem; padding: 0 0 12px;
  width: 100%; border-bottom: 1px solid var(--line); margin-bottom: 16px;
}

/* ------------------------------------------------------ switch control --- */

.sw {
  -webkit-appearance: none; appearance: none; flex: none; cursor: pointer;
  position: relative; width: 46px; height: 27px; border-radius: 14px;
  background: var(--line-strong); border: 0; margin: 0;
  transition: background-color .18s ease;
}
.sw::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 21px; height: 21px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(16, 12, 30, 0.35);
  transition: transform .18s ease;
}
.sw:checked { background: var(--accent); }
.sw:checked::after { transform: translateX(19px); }
.sw:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sw-sm { width: 40px; height: 24px; border-radius: 12px; }
.sw-sm::after { width: 18px; height: 18px; }
.sw-sm:checked::after { transform: translateX(16px); }

.addon {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  margin-bottom: 8px; cursor: pointer; background: var(--panel); text-align: left;
  transition: border-color .14s ease, background-color .14s ease;
}
.addon:hover { border-color: var(--accent); }
.addon:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.addon-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.addon-label { font-size: 0.91rem; line-height: 1.35; }
.addon-price { font-size: 0.84rem; font-weight: 600; color: var(--accent); }

.checkgroup { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.check {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  cursor: pointer; text-align: left; line-height: 1.35;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 9px 12px; font-size: 0.88rem; background: var(--panel);
  transition: border-color .14s ease, background-color .14s ease;
}
.check span { min-width: 0; }
.check:hover { border-color: var(--accent); }
.check:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }

.custom-toggle {
  display: flex; gap: 14px; align-items: center; justify-content: space-between;
  cursor: pointer; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 14px; font-size: 0.9rem; background: var(--panel);
  transition: border-color .14s ease, background-color .14s ease;
}
.custom-toggle:has(input:checked) { border-color: var(--arrow); background: var(--arrow-soft); }
.custom-toggle:has(input:checked) .sw:checked { background: var(--arrow); }

.field-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-wide { grid-column: 1 / -1; }
.field label { font-size: 0.89rem; font-weight: 550; }
.req {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); font-weight: 500; margin-left: 4px;
}
/* Checkboxes and radios are excluded: a full-width checkbox stretches to fill
   its label and pushes the text out of the box entirely. */
.field input:not([type="checkbox"]):not([type="radio"]),
.field select, .field textarea {
  font: inherit; font-size: 0.93rem; padding: 10px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--panel); color: var(--text); width: 100%;
}
.field textarea { resize: vertical; min-height: 84px; }
.field-help { font-size: 0.81rem; color: var(--muted); }
.field.has-error input, .field.has-error select, .field.has-error textarea,
.field.has-error .checkgroup { border-color: var(--danger); }
.field.has-error input:not([type="checkbox"]):not([type="radio"]),
.field.has-error textarea,
.field.has-error select { border-color: var(--danger); }
/* The one thing a checkout must never do is refuse silently. */
.form-error {
  font-size: 0.88rem; font-weight: 600; line-height: 1.5; color: var(--danger);
  margin: 0 0 12px; padding-left: 22px; position: relative;
}
.form-error::before {
  content: ''; position: absolute; left: 0; top: 0.42em;
  width: 12px; height: 2px; background: var(--danger);
}
.field.has-error label { color: var(--danger); }

.checkgroup {
  display: flex; flex-wrap: wrap; gap: 8px;
  border: 1px solid transparent; border-radius: var(--radius); padding: 2px;
}
.check {
  display: inline-flex; align-items: center; justify-content: flex-start;
  gap: 8px; cursor: pointer; text-align: left;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 8px 12px; font-size: 0.88rem; background: var(--panel);
  line-height: 1.35;
}
/* These controls are all .sw switches now, which size themselves. The only
   thing needed here is that the label text, not the control, takes the slack. */
.check span { flex: 1; min-width: 0; }
.check:hover { border-color: var(--accent); }
.check:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }

.custom-toggle {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 14px; font-size: 0.9rem; background: var(--panel);
}
.custom-toggle:has(input:checked) { border-color: var(--arrow); background: var(--arrow-soft); }
.custom-toggle input { margin-top: 3px; }

.sum-line {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 0.9rem;
}
.sum-line.is-addon .sum-label { color: var(--muted); }
.sum-label { display: flex; flex-direction: column; }
.sum-detail { font-size: 0.78rem; color: var(--muted); }
.sum-amount { font-weight: 600; white-space: nowrap; }
.summary-total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 16px 0 14px; gap: 12px;
}
.sum-total-label { font-size: 0.86rem; color: var(--muted); }
.sum-total-value {
  display: inline-flex; align-items: baseline;
  font-family: var(--font-figure); font-size: 1.62rem; font-weight: 700;
  letter-spacing: -0.005em; font-variant-numeric: tabular-nums;
}

/*
 * Order state, drawn two ways for two jobs.
 *
 * In the checkout it is a three step rail, because "what happens next" is the
 * question a buyer actually has at a payment screen, and a chip that says
 * READY FOR PAYMENT answers nothing they cannot already see. Nodes are
 * diamonds rather than the circles every stepper uses.
 *
 * On the admin desk it is a notched flag, because a queue needs a state at a
 * glance and has no room for a rail.
 */

.rail-steps {
  list-style: none; padding: 0; margin: 0 0 14px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
}
.rail-steps li { position: relative; display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }

/* Connector, drawn behind the nodes and stopping short of each one. */
.rail-steps li:not(:last-child)::after {
  content: ''; position: absolute; left: calc(50% + 9px); right: calc(-50% + 9px); top: 9px;
  height: 2px; background: var(--line-strong);
}
.rail-steps li.is-done:not(:last-child)::after { background: currentColor; }

.rs-node {
  width: 12px; height: 12px; margin: 3px auto 0;
  background: var(--panel); border: 2px solid var(--line-strong);
  transform: rotate(45deg); border-radius: 2px;
  position: relative; z-index: 1; transition: background-color .2s ease, border-color .2s ease;
}
.rail-steps li.is-done .rs-node,
.rail-steps li.is-now .rs-node { border-color: currentColor; }
.rail-steps li.is-done .rs-node { background: currentColor; }
/* The live step gets a ring so it reads as the one you are on. */
.rail-steps li.is-now .rs-node { box-shadow: 0 0 0 4px var(--accent-soft); }

.rs-label {
  font-size: 0.72rem; line-height: 1.3; text-align: center;
  color: var(--muted); font-weight: 550;
}
.rail-steps li.is-done .rs-label,
.rail-steps li.is-now .rs-label { color: currentColor; font-weight: 700; }

/* The payment route runs in the brand accent rather than a success green.
   Green here would be the same stock signal the warranty box and the status
   chip used, and the rail already tells the two routes apart by their labels.
   The quote route keeps the amber the custom-tier toggle uses, so "this is
   priced by hand" reads the same wherever it appears in the checkout. */
.rail-steps.is-pay { color: var(--accent); }
.rail-steps.is-quote { color: var(--arrow); }
.rail-steps.is-quote li.is-now .rs-node { box-shadow: 0 0 0 4px var(--arrow-soft); }

/* Notched flag for the admin queue. The cut corner is the whole identity, so
   it never reads as a rounded status pill. */

.state-reasons { list-style: none; padding: 0; margin: 0 0 14px; }
.state-reasons li { font-size: 0.84rem; color: var(--muted); padding-left: 14px; position: relative; margin-bottom: 4px; }
.state-reasons li::before { content: ''; position: absolute; left: 0; top: 9px; width: 6px; height: 2px; background: var(--arrow); }
.summary-fine { font-size: 0.78rem; color: var(--muted); margin: 12px 0 0; }

.confirm { padding: 44px 40px; max-width: 620px; }
/* The arrival stamp. The pale tinted status panel this replaced was the same
   component default as the old warranty box, and it was also being silently
   overridden: `.confirm p` outranks a single state class, so the colour it
   asked for never painted and the badge rendered as muted body text. It is
   its own component now, in the stamped language the buttons and the warranty
   use, and nothing it depends on can be outranked by a descendant selector.
   Committed and provisional are told apart the way the primary and outline
   buttons are, solid against outlined, rather than by a green and an amber. */
.confirm-stamp {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0 0 14px; padding: 7px 15px;
  font-size: 0.7rem; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  border: 1.5px solid var(--accent); border-radius: var(--radius-sm);
  box-shadow: 3px 3px 0 var(--accent-hover);
  /* Set by hand rather than square to the grid, because a stamp never is. */
  transform: rotate(-1.4deg);
}
.confirm-stamp .cs-mark { flex: none; width: 7px; height: 7px; background: currentColor; }
.confirm-stamp.is-committed { background: var(--accent); color: #fff; }
.confirm-stamp.is-provisional {
  background: var(--panel); color: var(--accent);
  box-shadow: 3px 3px 0 var(--line-strong);
}
/* The stamp is a `p`, and `.confirm p` would otherwise repaint it. */
.confirm p.confirm-stamp { color: inherit; }
.confirm .confirm-stamp.is-committed { color: #fff; }
.confirm .confirm-stamp.is-provisional { color: var(--accent); }
.confirm h3 { font-size: 1.5rem; margin: 10px 0 14px; }
.confirm p { color: var(--muted); }
.confirm-figure {
  font-size: 1.15rem; font-weight: 600; color: var(--text);
  border-top: 1px solid var(--line); padding-top: 14px; margin-top: 18px;
}
.confirm-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }

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

@media (max-width: 900px) {
  .checkout-body { grid-template-columns: 1fr; }
  .checkout-summary { border-left: 0; border-top: 1px solid var(--line); height: auto; }
  .summary-inner { position: static; }
  .field-grid { grid-template-columns: 1fr; }
  .head-nav a:not(.btn) { display: none; }
  .band { padding: 52px 0; }
  .hero-inner { padding: 52px 24px 44px; }
}

/* A Custom tier has no preset rates, so the summary states that instead of a zero. */
.sum-empty { font-size: 0.87rem; color: var(--muted); margin: 0; padding: 4px 0 10px; }
.sum-total-quoted { font-size: 1.15rem; }

/* ---------------------------------------------------------- categories --- */

.slides { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
@media (min-width: 901px) {
  .slides { grid-template-columns: repeat(3, 1fr); gap: 52px; }
}
.slide {
  position: relative; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line);
  border-top: 4px solid var(--line-strong);
  border-radius: 0;
  transition: border-color .16s ease, background-color .16s ease;
}
/* The stage rule sits on the top edge and grows in from the left, so the card
   reads as a control without lifting off the page. */
.slide::after {
  content: ''; position: absolute; left: -1px; right: -1px; top: -4px; height: 4px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .22s ease; pointer-events: none;
}
.slide:hover { border-color: var(--line-strong); background: var(--bg); }
.slide:hover::after { transform: scaleX(1); }
.slide:focus-within::after { transform: scaleX(1); }
.slide.is-active { border-color: var(--accent); background: var(--accent-soft); }
.slide.is-active::after { transform: scaleX(1); }

/* The main open control. Fills the card, so the whole upper area is clickable. */
.slide-open {
  display: flex; flex-direction: column; gap: 8px; flex: 1;
  text-align: left; cursor: pointer; font: inherit; color: inherit;
  background: transparent; border: 0; padding: 26px 26px 14px; width: 100%;
}
.slide-open:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; border-radius: var(--radius); }

.slide-top { display: flex; justify-content: space-between; align-items: center; }
/* Stage and plate marks. One treatment shared by the category cards, the
   lifecycle rail and the service tiles, so an index reads as a printed
   reference rather than as another boxed character. Condensed display caps
   with a leading rule, no container: the box was the part that looked
   generated, and three boxed characters on one screen looked like three. */
.stage-mark {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-variation-settings: 'wdth' 68;
  font-size: 0.76rem; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; line-height: 1; color: var(--accent);
}
.stage-mark::before {
  content: ''; flex: none; width: 18px; height: 2px; background: currentColor;
}

/*
 * Connector arrow from one category to the next, showing that Build, Refine and
 * Scale run in sequence. Red so it reads as wayfinding rather than as another
 * interactive accent. Decorative, so it is aria-hidden in the markup.
 */
.slide-arrow { display: none; }
@media (min-width: 901px) {
  .slide-arrow {
    display: block; position: absolute; right: -38px; top: 50%;
    width: 24px; height: 2px; background: var(--arrow);
    transform: translateY(-50%); pointer-events: none;
  }
  .slide-arrow::after {
    content: ''; position: absolute; right: -1px; top: 50%;
    width: 9px; height: 9px;
    border-top: 2px solid var(--arrow); border-right: 2px solid var(--arrow);
    transform: translateY(-50%) rotate(45deg);
  }
  .slides > .slide:last-child .slide-arrow { display: none; }
}
/* Stacked layout turns the arrow down instead of hiding the sequence. */
@media (max-width: 900px) {
  .slides { gap: 34px; }
  .slide-arrow {
    display: block; position: absolute; left: 50%; bottom: -26px;
    width: 2px; height: 18px; background: var(--arrow);
    transform: translateX(-50%); pointer-events: none;
  }
  .slide-arrow::after {
    content: ''; position: absolute; bottom: -1px; left: 50%;
    width: 9px; height: 9px;
    border-right: 2px solid var(--arrow); border-bottom: 2px solid var(--arrow);
    transform: translateX(-50%) rotate(45deg);
  }
  .slides > .slide:last-child .slide-arrow { display: none; }
}
.slide-count { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.slide-verb {
  font-size: clamp(1.6rem, 2.6vw, 2.05rem); font-weight: 700;
  text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.05; margin-top: 2px;
}
.slide-name { font-size: 0.95rem; font-weight: 600; color: var(--accent); line-height: 1.35; }
.slide-blurb { font-size: 0.88rem; color: var(--muted); line-height: 1.55; flex: 1; }
/* The services behind the card, each one its own control that jumps straight
   to that service. Squared off with a leading accent bar rather than a pill:
   the bar is what grows on hover, so the shape carries the interaction. */
.svc-index { list-style: none; margin: 0; padding: 0 26px 4px; }
.svc-row {
  display: flex; align-items: baseline; gap: 8px; width: 100%;
  padding: 6px 0; margin: 0; background: none; border: 0;
  font: inherit; font-size: 0.85rem; color: var(--muted);
  text-align: left; cursor: pointer;
  transition: color .14s ease;
}
.sr-name { flex: none; white-space: nowrap; }
/* The leader. A dotted rule that takes whatever width is left, which is what
   makes the row read as an index entry rather than as a list item. */
.sr-leader {
  flex: 1 1 auto; min-width: 12px; height: 0;
  border-bottom: 2px dotted var(--line-strong);
  transform: translateY(-3px);
  transition: border-color .14s ease, border-bottom-style .14s ease;
}
.sr-count {
  flex: none; font-size: 0.78rem; font-variant-numeric: tabular-nums;
  color: var(--muted); transition: color .14s ease;
}
/* On approach the leader goes solid and runs the whole way, which is the
   whole interaction: the row completes itself. */
.svc-row:hover { color: var(--accent); }
.svc-row:hover .sr-name { font-weight: 700; }
.svc-row:hover .sr-leader { border-bottom-style: solid; border-color: var(--accent); }
.svc-row:hover .sr-count { color: var(--accent); }
.svc-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.slide-foot {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--line); margin: 14px 26px 0; padding: 12px 0 18px;
}
.slide-from { font-weight: 600; font-size: 0.92rem; }
/* Chevron that points down, then flips up once the tile is open. */
.slide-go {
  width: 9px; height: 9px; border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent); transform: rotate(45deg);
  transition: transform .16s ease; margin-bottom: 3px;
}
.slide.is-active .slide-go { transform: rotate(-135deg); margin-bottom: -3px; }

@media (prefers-reduced-motion: reduce) {
  .slide, .slide::after, .slide-go { transition: none; }
  .slide:hover { transform: none; }
}

.tiles-panel {
  margin-top: 22px; padding: 26px; background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--radius); scroll-margin-top: 82px;
}
.tiles-panel .tiers { background: var(--panel); }
.tile-go { font-size: 0.82rem; color: var(--accent); font-weight: 550; }

/* Entry tier and the competitor benchmark that justifies each price. */
.tier.is-entry { border-color: var(--line-strong); background: var(--panel-2); }
.tier-flag-entry { color: var(--muted); }
.benchmark {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); padding: 0; margin: 0 0 22px;
}
.benchmark summary {
  cursor: pointer; padding: 13px 18px; font-size: 0.89rem; font-weight: 550;
  list-style: none; display: flex; align-items: center; gap: 8px;
}
.benchmark summary::-webkit-details-marker { display: none; }
.benchmark summary::before { content: '+'; color: var(--accent); font-weight: 700; }
.benchmark[open] summary::before { content: '-'; }
.benchmark summary:hover { color: var(--accent); }
.benchmark p {
  margin: 0; padding: 0 18px 16px; font-size: 0.88rem; color: var(--muted);
  line-height: 1.6; max-width: 78ch;
}

/* ------------------------------------------------- static catalogue + FAQ --- */

.cat-block { margin-top: 34px; }
.cat-block-head {
  font-size: 0.82rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--accent);
  padding-bottom: 10px; border-bottom: 2px solid var(--accent); margin-bottom: 18px;
}
.svc-entry {
  background: var(--bg); border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 20px 22px; margin-bottom: 10px;
  transition: border-color .16s ease, box-shadow .18s ease, transform .18s ease;
}
.svc-entry:hover {
  border-color: var(--accent); border-left-color: var(--accent);
  box-shadow: var(--shadow-1); transform: translateX(3px);
}
.svc-entry h4 { font-size: 1.05rem; margin-bottom: 6px; }
.svc-entry-lead { color: var(--muted); font-size: 0.92rem; margin-bottom: 10px; max-width: 82ch; }
.svc-entry-tiers { font-size: 0.86rem; color: var(--muted); margin-bottom: 8px; }
.svc-entry-tiers strong { color: var(--text); }
/* Keyword line. Real copy a buyer may skim, not a hidden stuffing block: it is
   visible, readable and describes what the service genuinely covers. */
.svc-entry-kw {
  font-size: 0.78rem; color: var(--muted); margin: 0;
  padding-top: 10px; border-top: 1px solid var(--line); opacity: 0.85;
}

.faq { margin-top: 30px; max-width: 860px; }
.faq-item {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); margin-bottom: 8px; overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: border-color .16s ease, box-shadow .18s ease;
}
.faq-item:hover { border-color: var(--line-strong); box-shadow: var(--shadow-2); }
.faq-item[open] { border-color: var(--accent); }
.faq-item summary {
  position: relative; cursor: pointer; list-style: none; display: block;
  padding: 17px 20px 17px 48px; font-size: 1rem; font-weight: 600; line-height: 1.4;
}
.faq-item summary::-webkit-details-marker { display: none; }
/* A plus built from two solid bars, where the upright rotates flat to make a
   minus. Two elements rather than a background trick, so there is no gradient
   function involved and it stays crisp at any zoom. */
.faq-item summary::before,
.faq-item summary::after {
  content: ''; position: absolute; left: 21px; top: 50%;
  background: var(--accent); transition: transform .2s ease;
}
.faq-item summary::before { width: 14px; height: 2px; margin-top: -1px; }
.faq-item summary::after { width: 2px; height: 14px; margin-top: -7px; margin-left: 6px; }
.faq-item[open] summary::after { transform: rotate(90deg); }
.faq-item[open] summary { color: var(--accent); }
.faq-item summary:hover { background: var(--panel-2); }
.faq-item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.faq-answer { padding: 0 20px 18px 48px; }
.faq-answer p { margin: 0; color: var(--muted); font-size: 0.93rem; line-height: 1.65; max-width: 76ch; }

@media (prefers-reduced-motion: reduce) {
  .svc-entry, .faq-item, .faq-item summary::before, .flow-step, .chip::after { transition: none; }
  .svc-entry:hover, .flow-step:hover { transform: none; }
}

@media (max-width: 640px) {
  .slide-open { padding: 22px 20px 12px; }
  .slide-services { padding: 0 20px 4px; }
  .slide-foot { margin: 12px 20px 0; }
  .faq-answer { padding-left: 20px; }
}

/* ---------------------------------------------------------- enterprise --- */

.enterprise { border-top: 1px solid var(--line); }
.ent-inner { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: start; }
.ent-list { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 2px; }
.ent-list li {
  display: flex; flex-direction: column; gap: 3px;
  padding: 14px 0; border-top: 2px solid var(--line);
  transition: border-color .16s ease;
}
.ent-list li:hover { border-top-color: var(--accent); }
.ent-list strong { font-size: 0.95rem; font-weight: 600; }
.ent-list span { font-size: 0.88rem; color: var(--muted); line-height: 1.55; }
.ent-cta {
  position: sticky; top: 92px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-1);
}
.ent-cta h3 { margin-bottom: 8px; }
.ent-cta p { font-size: 0.9rem; color: var(--muted); }
.ent-cta .btn { margin-top: 6px; }
.ent-fine { font-size: 0.8rem; margin: 12px 0 0; }

@media (max-width: 900px) {
  .ent-inner { grid-template-columns: 1fr; gap: 28px; }
  .ent-cta { position: static; }
}

/* ------------------------------------------------------------- mobile --- */

/* The bar is desktop-hidden and only earns its place on a narrow screen. */
.checkout-bar { display: none; }

/* Touch devices get targets that meet the 44px guideline regardless of screen
   width, since a coarse pointer is the reason for the minimum, not the viewport. */
@media (pointer: coarse) {
  .svc-row { min-height: 44px; align-items: center; }
  .check, .addon, .custom-toggle { min-height: 48px; }
  .chip { padding-top: 12px; padding-bottom: 14px; }
  .faq-item summary { padding-top: 19px; padding-bottom: 19px; }
  .stepper { min-width: 48px; }
}

@media (max-width: 900px) {
  /* Keep navigation reachable instead of hiding it. A scrollable row beats a
     hamburger for four links, with no JavaScript and no trap to escape. */
  .head-nav {
    gap: 16px; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; margin-left: 12px;
  }
  .head-nav::-webkit-scrollbar { display: none; }
  .head-nav a:not(.btn) { display: inline; font-size: 0.86rem; white-space: nowrap; }
}

@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .band { padding: 44px 0; }
  .hero-inner { padding: 40px 16px 36px; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .tile-grid, .tier-grid, .slides { grid-template-columns: 1fr; }
  .tiers, .tiles-panel { padding: 18px 14px; }
  .cta-inner { flex-direction: column; align-items: flex-start; }
  .svc-entry { padding: 16px; }
  .kv { grid-template-columns: 1fr; }

  /* The checkout becomes a full-height sheet. A floating dialog on a phone
     wastes the edges and leaves the page visible behind a form. */
  .checkout-dialog {
    width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh;
    margin: 0; border-radius: 0; border: 0;
  }
  .checkout-head { padding: 16px; }
  .checkout-main { padding: 18px 16px 24px; }
  .summary-inner { padding: 18px 16px 24px; }

  /* Running total pinned to the bottom of the sheet, so the price and the
     action stay reachable while the buyer works down a long intake form. */
  .checkout-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    position: sticky; bottom: 0; z-index: 3;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--glass-line);
    background: var(--glass-strong);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .checkout-bar { background: var(--panel); }
  }
  .bar-total { display: flex; flex-direction: column; line-height: 1.2; }
  .bar-label { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em; }
  .bar-value { font-size: 1.2rem; font-weight: 700; }
  .checkout-bar .btn { flex: none; min-height: 46px; }
  /* The desktop submit button is redundant once the bar is showing. */
  .checkout-summary #submitBtn { display: none; }
  .checkgroup { grid-template-columns: 1fr; }
}


}

/* --------------------------------------------------------- reveal + polish --- */

/*
 * The hidden state is applied by motion.js, never by this file alone. If the
 * script never runs, .reveal is never added and the content stays visible.
 */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s cubic-bezier(.22,.61,.36,1) var(--reveal-delay, 0ms),
              transform .5s cubic-bezier(.22,.61,.36,1) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; will-change: auto; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* View transitions. Named so the panel morphs rather than cross-fading the
   whole document, which is what makes the default look cheap. */
@media (prefers-reduced-motion: no-preference) {
  #tilesPanel { view-transition-name: tiles-panel; }
  ::view-transition-old(tiles-panel),
  ::view-transition-new(tiles-panel) { animation-duration: .28s; }
}

/* Warranty. Placed with the tiers because it answers a buying objection at the
   moment it is raised, not in a footer nobody reads.

   Drawn as a stamped guarantee stub rather than a tinted success alert. The
   pale green panel with a tick is the most recognisable component default on
   the web, and this promise is the strongest thing on the page, so it should
   not look like something a framework emitted. The parts doing that work: a
   torn-off counterfoil carrying the term, a dashed perforation between the
   two halves, brand purple instead of a status green, and a hard offset
   shadow with no blur, which reads as printed and stuck on rather than as a
   floating card. */
.warranty {
  display: inline-flex; align-items: stretch; max-width: 660px;
  margin: 0 0 20px; background: var(--panel);
  border: 1.5px solid var(--accent); border-radius: var(--radius-sm);
  box-shadow: 4px 4px 0 var(--accent);
  transition: transform .16s ease, box-shadow .16s ease;
}
/* Presses down under the cursor, the way a stamp would. */
.warranty:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--accent); }

/* The counterfoil. Condensed numerals so the term reads as a printed figure
   rather than as body copy that happens to be bold. */
.ws {
  flex: none; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 10px 14px 11px; background: var(--accent); color: #fff;
  /* The perforation. Dashed in the panel colour so it reads as punched out of
     the stub rather than as a border drawn around it. */
  border-right: 2px dashed var(--panel);
}
.ws-num {
  font-family: var(--font-display); font-variation-settings: 'wdth' 70;
  font-size: 1.9rem; font-weight: 900; line-height: 0.9;
  font-variant-numeric: tabular-nums;
}
/* Two words rather than a line break, so the stub can lay them out in a column
   here and in a row on a narrow screen without the words running together in
   the accessibility tree. */
.ws-unit {
  display: flex; flex-direction: column; align-items: center;
  font-family: var(--font); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase; line-height: 1.3;
  margin-top: 5px; padding-top: 5px; border-top: 1px solid rgba(255, 255, 255, 0.45);
}
.ws-body {
  padding: 12px 18px; font-size: 0.88rem; line-height: 1.55;
  color: var(--text); align-self: center;
}

@media (prefers-reduced-motion: reduce) {
  .warranty { transition: none; }
  .warranty:hover { transform: none; box-shadow: 4px 4px 0 var(--accent); }
}

@media (max-width: 560px) {
  /* The counterfoil turns into a header strip so the promise keeps a readable
     measure instead of being squeezed into a narrow column beside it. */
  .warranty { display: flex; flex-direction: column; width: 100%; }
  .ws {
    flex-direction: row; gap: 8px; justify-content: flex-start;
    padding: 7px 14px; border-right: 0; border-bottom: 2px dashed var(--panel);
  }
  .ws-num { font-size: 1.15rem; line-height: 1; }
  /* Two stacked words waste a line once the stub is horizontal. */
  .ws-unit {
    flex-direction: row; gap: 0.35em;
    margin-top: 0; padding-top: 0; padding-left: 8px;
    border-top: 0; border-left: 1px solid rgba(255, 255, 255, 0.45);
    align-self: center;
  }
}

/* Static catalogue and footer carry the same promise, so they carry the same
   colour. Green here would contradict the stub. */
.svc-entry-warranty {
  position: relative; font-size: 0.82rem; color: var(--accent); font-weight: 600;
  margin: 0 0 8px; padding-left: 26px;
}
.svc-entry-warranty::before {
  content: ''; position: absolute; left: 0; top: 0.62em;
  width: 16px; height: 2px; background: var(--accent);
}

/* Smooth anchor scrolling, opted out above for reduced motion. */
html { scroll-behavior: smooth; }

/* Closing CTA: the copy carries proof points, so it needs room to breathe. */
.cta-inner { align-items: flex-start; }
.cta-copy { max-width: 620px; }
.cta-proof { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 7px; }
.cta-proof li {
  position: relative; padding-left: 26px;
  font-size: 0.92rem; color: rgba(255, 255, 255, 0.92); line-height: 1.45;
}
/* Tick drawn from borders, so it needs no icon font and no SVG request. */
.cta-proof li::before {
  content: ''; position: absolute; left: 2px; top: 6px;
  width: 11px; height: 6px;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}
.cta-action { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 6px; }
.cta-alt {
  font-size: 0.88rem; color: rgba(255, 255, 255, 0.88);
  text-decoration: underline; text-underline-offset: 3px;
}
.cta-alt:hover { color: #fff; }

@media (max-width: 640px) {
  .cta-action { width: 100%; }
  .cta-action .btn { width: 100%; }
}

/* -------------------------------------------------------------- playbooks --- */

.plays { margin-top: 30px; max-width: 900px; }
.play {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  margin-bottom: 10px; box-shadow: var(--shadow-1);
  transition: border-color .16s ease, box-shadow .18s ease;
}
.play:hover { border-color: var(--line-strong); box-shadow: var(--shadow-2); }
.play[open] { border-color: var(--accent); }
.play summary {
  position: relative; cursor: pointer; list-style: none; display: flex;
  align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 18px 20px 18px 48px;
}
.play summary::-webkit-details-marker { display: none; }
.play summary::before, .play summary::after {
  content: ''; position: absolute; left: 21px; top: 27px;
  background: var(--accent); transition: transform .2s ease;
}
.play summary::before { width: 14px; height: 2px; margin-top: -1px; }
.play summary::after { width: 2px; height: 14px; margin-top: -7px; margin-left: 6px; }
.play[open] summary::after { transform: rotate(90deg); }
.play summary:hover { background: var(--panel-2); }
.play summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.play-q { font-size: 1.05rem; font-weight: 600; line-height: 1.35; }
.play[open] .play-q { color: var(--accent); }
.play-meta { font-size: 0.82rem; color: var(--muted); white-space: nowrap; }

.play-body { padding: 0 20px 22px 48px; }
.play-for {
  font-size: 0.85rem; font-weight: 600; color: var(--accent);
  margin: 0 0 10px; text-transform: none;
}
.play-answer { color: var(--muted); font-size: 0.93rem; line-height: 1.65; max-width: 76ch; }

.play-steps { list-style: none; padding: 0; margin: 20px 0 0; counter-reset: step; }
.play-steps li { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
/* Same count out of a total. A step in a sequence is worth knowing the length
   of, and this replaces a filled square with a white digit in it. */
.play-num {
  flex: none; display: inline-flex; align-items: baseline; gap: 1px;
  min-width: 34px; margin-top: 3px;
  font-family: var(--font-figure); font-size: 1rem; font-weight: 700;
  line-height: 1; color: var(--muted); font-variant-numeric: tabular-nums;
}
.play-num .of { font-size: 0.72em; color: var(--line-strong); margin: 0 1px; }
.play-num .total { font-size: 0.78em; }
.play-step { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.play-step-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.play-step-head strong { font-size: 0.98rem; }
.play-step-price { font-size: 0.83rem; color: var(--muted); }
.play-why { font-size: 0.89rem; color: var(--muted); line-height: 1.55; max-width: 68ch; }
.play-open {
  align-self: flex-start; margin-top: 4px; font: inherit; font-size: 0.84rem; font-weight: 600;
  cursor: pointer; color: var(--accent); background: transparent;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 7px 13px;
  transition: border-color .14s ease, background-color .14s ease;
}
.play-open:hover { border-color: var(--accent); background: var(--accent-soft); }
.play-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.play-note {
  font-size: 0.87rem; color: var(--muted); margin: 18px 0 0;
  padding-top: 14px; border-top: 1px solid var(--line);
}
.link-btn {
  font: inherit; font-size: inherit; color: var(--accent); background: transparent;
  border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.link-btn:hover { color: var(--accent-hover); }

/* ------------------------------------------------------------------ team --- */

.team-inner { display: grid; grid-template-columns: 1.5fr 1fr; gap: 44px; align-items: start; }
.team-list { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 2px; }
.team-list li {
  display: flex; flex-direction: column; gap: 3px;
  padding: 13px 0; border-top: 2px solid var(--line);
  transition: border-color .16s ease;
}
.team-list li:hover { border-top-color: var(--accent); }
.team-list strong { font-size: 0.95rem; font-weight: 600; }
.team-list span { font-size: 0.88rem; color: var(--muted); line-height: 1.55; }
.team-cta {
  position: sticky; top: 92px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-1);
}
.team-cta h3 { margin-bottom: 10px; }
.team-cta p { font-size: 0.9rem; color: var(--muted); }
.team-cta .btn { margin-top: 8px; }

@media (max-width: 900px) {
  .team-inner { grid-template-columns: 1fr; gap: 28px; }
  .team-cta { position: static; }
}
@media (max-width: 640px) {
  .play summary { padding-left: 44px; }
  .play-body { padding-left: 20px; padding-right: 16px; }
  .play-meta { white-space: normal; }
}

/* ------------------------------------------------- hero scale emphasis --- */

/*
 * "Scale it" is the promise the whole page is selling, so it detonates rather
 * than merely appearing: the word punches out past its final size while a
 * shockwave ring and ten rays fly outward and burn off.
 *
 * It runs once on load and replays on hover, so it is available on demand
 * without a headline that never stops moving. Everything is transform and
 * opacity only, so it composites on the GPU and does not force layout.
 */
.hero-scale {
  color: var(--arrow);
  display: inline-block;
  position: relative;
  transform-origin: center center;
  animation: detonate 780ms cubic-bezier(.2, 1.5, .4, 1) 420ms both;
}
@keyframes detonate {
  0%   { transform: scale(0.55); opacity: 0; }
  45%  { transform: scale(1.16); opacity: 1; }
  70%  { transform: scale(0.97); }
  100% { transform: scale(1); opacity: 1; }
}

/* Shockwave ring, drawn on the container so it sits behind the letters. */
.hero-scale::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 0.9em; height: 0.9em; margin: -0.45em 0 0 -0.45em;
  border: 0.06em solid var(--arrow); border-radius: 50%;
  transform: scale(0.2); opacity: 0; pointer-events: none;
  animation: shockwave 760ms ease-out 430ms both;
}
@keyframes shockwave {
  0%   { transform: scale(0.2); opacity: 0.85; }
  70%  { opacity: 0.18; }
  100% { transform: scale(3.1); opacity: 0; }
}

/* Ten rays thrown outward from the centre, each on its own angle and delay. */
.burst {
  position: absolute; left: 50%; top: 50%;
  width: 0; height: 0; pointer-events: none;
}
.burst i {
  position: absolute; left: 0; top: 0;
  width: 0.32em; height: 0.055em; border-radius: 1px;
  background: var(--arrow); opacity: 0;
  transform-origin: left center;
  animation: ray 660ms cubic-bezier(.15, .85, .35, 1) 440ms both;
}
@keyframes ray {
  0%   { opacity: 0;   transform: rotate(var(--a)) translateX(0.25em) scaleX(0.4); }
  25%  { opacity: 0.9; }
  100% { opacity: 0;   transform: rotate(var(--a)) translateX(1.9em) scaleX(1); }
}
.burst i:nth-child(1)  { --a:   8deg; animation-delay: 440ms; }
.burst i:nth-child(2)  { --a:  46deg; animation-delay: 470ms; }
.burst i:nth-child(3)  { --a:  92deg; animation-delay: 450ms; }
.burst i:nth-child(4)  { --a: 133deg; animation-delay: 490ms; }
.burst i:nth-child(5)  { --a: 171deg; animation-delay: 455ms; }
.burst i:nth-child(6)  { --a: 208deg; animation-delay: 480ms; }
.burst i:nth-child(7)  { --a: 248deg; animation-delay: 445ms; }
.burst i:nth-child(8)  { --a: 288deg; animation-delay: 495ms; }
.burst i:nth-child(9)  { --a: 318deg; animation-delay: 460ms; }
.burst i:nth-child(10) { --a: 344deg; animation-delay: 500ms; }

/* Replay on demand. */
.hero-scale:hover { animation: detonate 780ms cubic-bezier(.2, 1.5, .4, 1) both; }
.hero-scale:hover::before { animation: shockwave 760ms ease-out 10ms both; }
.hero-scale:hover .burst i { animation: ray 660ms cubic-bezier(.15, .85, .35, 1) 20ms both; }

/*
 * Reduced motion gets the finished state and nothing else. An explosion is
 * exactly the kind of effect that triggers vestibular symptoms, so this is not
 * a nicety.
 */
@media (prefers-reduced-motion: reduce) {
  .hero-scale,
  .hero-scale:hover { animation: none; opacity: 1; transform: none; }
  .hero-scale::before,
  .hero-scale:hover::before,
  .burst i,
  .hero-scale:hover .burst i { display: none; animation: none; }
}

.hero-lead strong { color: var(--text); font-weight: 600; }
/* The hero statement.
   Not a left-bar pull quote: that treatment is the single most reproduced
   generated-UI component on the web. This is a fielded note instead, the
   convention a technical document uses for a stated position. One rule across
   the top with the label knocked out of it, and the statement beneath. It also
   survives ragged text, which a corner-marked frame does not: with a two word
   last line the closing mark ends up stranded in open space. */
.hero-sub {
  position: relative;
  font-family: var(--font-display); font-variation-settings: 'wdth' 98;
  font-size: 1.06rem; font-weight: 600; line-height: 1.5; color: var(--accent);
  max-width: 52ch; margin: 26px 0 4px; padding-top: 19px;
  border-top: 2px solid var(--accent);
}
.hero-sub::before {
  content: attr(data-label);
  position: absolute; top: -0.62em; left: 0;
  /* Knocks the label out of the rule, so it has to match what is behind it.
     The hero band is --panel, not the page --bg. */
  padding-right: 12px; background: var(--panel);
  font-family: var(--font); font-size: 0.68rem; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase; line-height: 1;
  color: var(--accent);
}

/* ------------------------------------------------------- why different --- */

.diff { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin: 32px 0 20px; }
.diff-card {
  position: relative; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-1);
  transition: border-color .16s ease, box-shadow .18s ease, transform .18s ease;
}
.diff-card:hover { border-color: var(--accent); box-shadow: var(--shadow-2); transform: translateY(-2px); }
/* A count out of a total. The reader learns there are three of these before
   they have scrolled to find out, and a fraction is not a shape any component
   library ships. */
.diff-num {
  display: inline-flex; align-items: baseline; gap: 1px;
  font-family: var(--font-figure); font-size: 1.15rem; font-weight: 700;
  line-height: 1; color: var(--muted); margin: 0 0 12px;
  font-variant-numeric: tabular-nums;
  transition: color .16s ease;
}
.diff-num .of { font-size: 0.72em; color: var(--line-strong); margin: 0 1px; }
.diff-num .total { font-size: 0.78em; }
.diff-card:hover .diff-num { color: var(--accent); }
.diff-card h3 { margin-bottom: 8px; font-size: 1.08rem; }
.diff-card p:last-child { color: var(--muted); font-size: 0.92rem; margin: 0; line-height: 1.6; }

.honest {
  border: 1px solid var(--line); border-top: 3px solid var(--arrow);
  background: var(--panel); border-radius: 0; padding: 22px 24px; margin-top: 8px;
}
.honest h3 { margin-bottom: 8px; font-size: 1.02rem; }
.honest p { margin: 0; color: var(--muted); font-size: 0.93rem; line-height: 1.65; max-width: 82ch; }

/* -------------------------------------------------------------- rescue --- */

.rescue-inner { display: grid; grid-template-columns: 1.5fr 1fr; gap: 44px; align-items: start; }
.rescue-inner h2 { max-width: 20ch; }
.rescue-inner > div > p { color: var(--muted); font-size: 1rem; line-height: 1.7; max-width: 62ch; }
.rescue-cta {
  position: sticky; top: 92px;
  background: var(--panel); border: 1px solid var(--accent);
  border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-1);
}
.rescue-cta h3 { margin-bottom: 8px; }
.rescue-cta p { font-size: 0.9rem; color: var(--muted); }
.rescue-cta .btn { margin-top: 8px; }

@media (max-width: 900px) {
  .rescue-inner { grid-template-columns: 1fr; gap: 26px; }
  .rescue-cta { position: static; }
}

/* ------------------------------------------------ answers and comparison --- */

/*
 * The lead sentence after a question heading is written to be lifted whole by
 * an answer engine, so it is styled to be read that way: slightly larger, and
 * given its own space rather than buried in a paragraph block.
 */
.sub-head { font-size: 1.35rem; margin: 42px 0 12px; }
.answer-lead {
  position: relative;
  font-size: 1.02rem; line-height: 1.7; color: var(--text);
  max-width: 78ch; margin: 0 0 22px; padding-top: 16px;
}
.answer-lead::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 42px; height: 3px; background: var(--accent);
}

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 14px; }
.cmp {
  width: 100%; border-collapse: collapse; font-size: 0.92rem;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; min-width: 560px;
}
.cmp caption {
  text-align: left; font-size: 0.8rem; color: var(--muted);
  padding: 0 0 10px; caption-side: top;
}
.cmp th, .cmp td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.cmp thead th { background: var(--panel-2); font-weight: 700; font-size: 0.85rem; }
.cmp thead th:nth-child(2) { color: var(--arrow); }
.cmp thead th:nth-child(3) { color: var(--accent); }
.cmp tbody th { font-weight: 550; color: var(--muted); width: 30%; }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp tbody tr:hover { background: var(--panel-2); }
.table-note { font-size: 0.88rem; color: var(--muted); margin: 0 0 8px; max-width: 78ch; }

.defs { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; margin: 28px 0 16px; }
.defs > div { background: var(--panel); padding: 20px 22px; }
.defs dt {
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  color: var(--accent); margin-bottom: 6px; letter-spacing: -0.01em;
}
.defs dd { margin: 0; color: var(--muted); font-size: 0.93rem; line-height: 1.65; max-width: 78ch; }

/* The next step at the end of a section. A section that informs and then stops
   hands the reader back to their tab bar. */
.next-step {
  position: relative;
  font-size: 0.95rem; line-height: 1.65; color: var(--text); margin: 26px 0 0;
  padding: 0 0 0 40px; max-width: 82ch;
}
/* Shaft and head, drawn from borders, matching the stage arrows. */
.next-step::before {
  content: ''; position: absolute; left: 0; top: 0.62em;
  width: 26px; height: 2px; background: var(--arrow);
}
.next-step::after {
  content: ''; position: absolute; left: 19px; top: 0.62em;
  width: 8px; height: 8px; margin-top: -3px;
  border-top: 2px solid var(--arrow); border-right: 2px solid var(--arrow);
  transform: rotate(45deg);
}
.next-step a, .next-step .link-btn { color: var(--accent); font-weight: 600; }

@media (max-width: 640px) {
  .cmp { min-width: 480px; font-size: 0.86rem; }
  .cmp th, .cmp td { padding: 10px 12px; }
  .answer-lead { padding-left: 12px; }
}

/* ------------------------------------------------------------- footer --- */

.site-foot { background: var(--panel); border-top: 1px solid var(--line); padding: 48px 0 26px; margin-top: 0; }
.foot-top { display: grid; grid-template-columns: 1.1fr 2.4fr; gap: 48px; padding-bottom: 34px; }
.foot-brand .brand { margin-bottom: 14px; }
.foot-blurb { font-size: 0.88rem; color: var(--muted); line-height: 1.6; max-width: 40ch; margin: 0 0 12px; }
.foot-warranty {
  position: relative; font-size: 0.82rem; font-weight: 600; color: var(--accent);
  margin: 0; padding-left: 26px;
}
.foot-warranty::before {
  content: ''; position: absolute; left: 0; top: 0.62em;
  width: 16px; height: 2px; background: var(--accent);
}
.foot-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.foot-title {
  font-family: var(--font); font-size: 0.74rem; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--muted); font-weight: 700; margin: 0 0 12px;
}
.foot-col ul { list-style: none; padding: 0; margin: 0; }
.foot-col li { margin-bottom: 8px; }
.foot-col a {
  font-size: 0.86rem; color: var(--text); text-decoration: none; line-height: 1.45;
  border-bottom: 1px solid transparent;
}
.foot-col a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.foot-bottom {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  border-top: 1px solid var(--line); padding-top: 20px;
}
.foot-bottom p { margin: 0; font-size: 0.82rem; color: var(--muted); }
.foot-legal-links { display: flex; gap: 18px; }
.foot-legal-links a { color: var(--muted); text-decoration: none; border-bottom: 1px solid transparent; }
.foot-legal-links a:hover { color: var(--accent); border-bottom-color: var(--accent); }

@media (max-width: 900px) {
  .foot-top { grid-template-columns: 1fr; gap: 30px; }
  .foot-cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .foot-cols { grid-template-columns: 1fr; gap: 22px; }
}

/* Three column diagnostic: cause, symptom, fix. Wider than the two column
   comparison, so the row heads get less width and the fix column is emphasised
   because it is the one carrying the offer. */
.cmp.diag { min-width: 720px; }
.cmp.diag tbody th { width: 22%; color: var(--text); font-weight: 600; }
.cmp.diag td:last-child { color: var(--accent); font-weight: 550; }
.cmp.diag thead th:nth-child(2) { color: var(--muted); }
.cmp.diag thead th:nth-child(3) { color: var(--accent); }
@media (max-width: 640px) { .cmp.diag { min-width: 600px; } }

/* ------------------------------------------------------------- the creed --- */

/*
 * The positioning statement. It gets its own band and display-scale type
 * because a promise buried in a paragraph reads as filler, and this one is
 * checkable: the proof line under it lists what the promise actually costs us.
 */
.creed { background: var(--accent-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 66px 0; }
.creed-inner { max-width: 900px; }
.creed-kicker {
  font-size: 0.74rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.11em; color: var(--accent); margin: 0 0 22px;
}
.creed-quote { margin: 0; padding: 0; border: 0; }
.creed-lead {
  font-family: var(--font-display); font-variation-settings: 'wdth' 108;
  font-size: clamp(1.5rem, 3.4vw, 2.4rem); font-weight: 700; line-height: 1.16;
  letter-spacing: -0.022em; color: var(--muted); margin: 0 0 18px; max-width: 22ch;
}
.creed-body {
  font-size: clamp(1.1rem, 2vw, 1.42rem); line-height: 1.5; color: var(--text);
  font-weight: 500; margin: 0 0 22px; max-width: 34ch;
}
.creed-close {
  font-family: var(--font-display); font-variation-settings: 'wdth' 115;
  font-size: clamp(1.7rem, 4.4vw, 3rem); font-weight: 800;
  text-transform: uppercase; letter-spacing: -0.03em; line-height: 1;
  color: var(--arrow); margin: 0;
}
.creed-proof {
  font-size: 0.93rem; line-height: 1.7; color: var(--muted);
  margin: 34px 0 0; padding-top: 22px; border-top: 1px solid var(--line-strong);
  max-width: 76ch;
}

@media (max-width: 640px) {
  .creed { padding: 46px 0; }
  .creed-lead, .creed-body { max-width: none; }
}

/* The five statements. Set as a rhythmic list rather than a paragraph, because
   the repetition is the point and a paragraph would flatten it. */
.rescue-open { font-size: 1.05rem; line-height: 1.7; color: var(--muted); max-width: 62ch; }
.oughts { list-style: none; padding: 0; margin: 26px 0; max-width: 52ch; }
.oughts li {
  font-family: var(--font-display); font-variation-settings: 'wdth' 105;
  font-size: clamp(1.05rem, 2vw, 1.32rem); font-weight: 600; line-height: 1.35;
  color: var(--muted); padding: 10px 0 10px 22px; position: relative;
  border-bottom: 1px solid var(--line);
}
.oughts li:last-child { border-bottom: 0; }
.oughts li strong { color: var(--accent); font-weight: 800; }
.oughts li:last-child strong { color: var(--arrow); }
/* A short rule rather than a bullet, so the list reads as statements. */
.oughts li::before {
  content: ''; position: absolute; left: 0; top: 1.05em;
  width: 12px; height: 2px; background: var(--accent);
}
.oughts li:last-child::before { background: var(--arrow); }
.rescue-tail { font-size: 0.93rem; color: var(--muted); max-width: 66ch; }

/* Pull statement opening the team section. Sized between a heading and body so
   it reads as a stated position rather than as more prose. */
.backed {
  position: relative;
  font-family: var(--font-display); font-variation-settings: 'wdth' 106;
  font-size: clamp(1.08rem, 1.9vw, 1.35rem); font-weight: 600; line-height: 1.45;
  color: var(--text); max-width: 44ch;
  margin: 26px 0 18px; padding-top: 19px; border-top: 2px solid var(--arrow);
}
.backed::before {
  content: attr(data-label);
  position: absolute; top: -0.62em; left: 0;
  /* Knocks the label out of the rule, so it has to match the band behind it.
     .backed sits inside a band-alt section, which is --panel. */
  padding-right: 12px; background: var(--panel);
  font-family: var(--font); font-size: 0.68rem; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase; line-height: 1;
  color: var(--arrow);
}
.backed strong { color: var(--arrow); font-weight: 800; }

/* ------------------------------------------------------- revenue math --- */

/* The MRR panel is a working calculator rather than an illustration, so the
   controls sit on the left and the result stays visible beside them on a wide
   screen and directly under them on a narrow one. */
.mrr {
  display: grid; gap: 0; margin: 30px 0 8px;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--panel); box-shadow: var(--shadow-1); overflow: hidden;
}
.mrr-inputs { padding: 26px 26px 22px; border-right: 1px solid var(--line); }
.mrr-legend {
  font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 700; color: var(--muted); margin: 0 0 18px;
}
.mrr-row { display: block; margin-bottom: 16px; }
.mrr-name { display: inline-block; font-size: 0.9rem; font-weight: 600; color: var(--text); }
.mrr-val {
  float: right; font-family: var(--font-display); font-weight: 800;
  font-size: 0.98rem; color: var(--accent); font-variant-numeric: tabular-nums;
}
.mrr-switch {
  display: flex; align-items: center; gap: 12px; margin-top: 20px;
  padding-top: 18px; border-top: 1px solid var(--line);
  font-size: 0.9rem; font-weight: 600; color: var(--text); cursor: pointer;
}
.mrr-switch input { flex: 0 0 auto; }

.mrr-out { padding: 26px; background: var(--panel-2); }
.mrr-cap {
  font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 700; color: var(--muted); margin: 0 0 4px;
}
.mrr-big {
  display: flex; align-items: baseline;
  font-family: var(--font-figure);
  font-size: clamp(2rem, 5.2vw, 2.85rem); font-weight: 700; line-height: 1.05;
  letter-spacing: -0.005em; color: var(--accent);
  margin: 0 0 18px; padding-bottom: 9px;
  border-bottom: 2px solid var(--line-strong);
  font-variant-numeric: tabular-nums;
  /* The figure is recomputed on every slider step, so it must not reflow the
     panel while it is being dragged. */
  min-height: 1.05em;
}
/* The currency mark, set small and raised. Printed financial tables have done
   this for a century and almost nothing on the web does. */
.mrr-cur, .fig-cur {
  font-size: 0.5em; font-weight: 700; line-height: 1;
  transform: translateY(-0.62em); margin-right: 0.06em;
}
.mrr-second { color: var(--text); border-bottom-color: var(--text); }
/* When the lift switch is on, the second figure is the one that carries the
   point, so the emphasis moves to it. */
.mrr.is-lifted .mrr-big { color: var(--muted); border-bottom-color: var(--line); }
.mrr.is-lifted .mrr-second { color: var(--arrow); border-bottom-color: var(--arrow); }

.mrr-facts { margin: 0; padding: 16px 0 0; border-top: 1px solid var(--line); }
.mrr-facts div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 7px 0; border-bottom: 1px solid var(--line);
}
.mrr-facts div:last-child { border-bottom: 0; }
.mrr-facts dt { font-size: 0.86rem; color: var(--muted); margin: 0; }
.mrr-facts dd {
  margin: 0; font-family: var(--font-figure); font-weight: 700; font-size: 1rem;
  color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.mrr-note {
  font-size: 0.84rem; line-height: 1.6; color: var(--muted);
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line);
}

@media (max-width: 780px) {
  .mrr { grid-template-columns: 1fr; }
  .mrr-inputs { border-right: 0; border-bottom: 1px solid var(--line); }
  .mrr-row { margin-bottom: 12px; }
}

/* ---------------------------------------------------------- matchmaker --- */

/* Three panels joined by a single rule rather than floated as separate cards,
   because the point is that they are one job done three times. */
.match {
  display: grid; gap: 0; margin: 26px 0 22px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--panel); overflow: hidden;
}
.match-card {
  padding: 24px; border-right: 1px solid var(--line);
  transition: background .16s ease;
}
.match-card:last-child { border-right: 0; }
.match-card:hover { background: var(--panel-2); }
.match-tag {
  display: inline-block; margin: 0 0 12px; padding-bottom: 6px;
  font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 800; color: var(--accent); border-bottom: 2px solid var(--accent);
}
.match-card h4 {
  font-family: var(--font-display); font-variation-settings: 'wdth' 104;
  font-size: 1.05rem; font-weight: 700; line-height: 1.3; margin: 0 0 8px; color: var(--text);
}
.match-card p:last-child { margin: 0; font-size: 0.92rem; line-height: 1.65; color: var(--muted); }

@media (max-width: 860px) {
  .match-card { border-right: 0; border-bottom: 1px solid var(--line); }
  .match-card:last-child { border-bottom: 0; }
}

/* ------------------------------------------------------- engine roster --- */

/* An ordered list rather than cards: the point is that it is a checklist of
   ten surfaces, and a card grid would read as ten unrelated features. The
   counter is the only decoration, and it is a square block rather than a
   badge. Exactly two columns above the breakpoint, because the column rules
   below depend on knowing which side of the grid an item is on, and an
   auto-fit grid can silently become three. */
.engines {
  list-style: none; counter-reset: eng; padding: 0;
  margin: 22px 0 20px;
  display: grid; gap: 0; grid-template-columns: 1fr;
  border-top: 1px solid var(--line-strong);
}
.engines li {
  --num-left: 0px;
  counter-increment: eng;
  position: relative; padding: 16px 18px 16px 46px;
  border-bottom: 1px solid var(--line);
  transition: background .16s ease;
}
.engines li:last-child { border-bottom: 0; }
.engines li:hover { background: var(--panel); }
/* A reference index: the numeral, then a rule running toward the name, the way
   a printed specification numbers its clauses. No box, no leading zero. */
.engines li::before {
  content: counter(eng);
  position: absolute; left: var(--num-left); top: 15px; width: 20px; text-align: right;
  font-family: var(--font-figure); font-size: 1.02rem; font-weight: 700;
  line-height: 1; color: var(--muted); font-variant-numeric: tabular-nums;
  transition: color .14s ease;
}
.engines li::after {
  content: ''; position: absolute; left: calc(var(--num-left) + 26px); top: 21px;
  width: 10px; height: 1px; background: var(--line-strong);
  transition: background-color .14s ease, width .14s ease;
}
.engines li:hover::before { color: var(--accent); }
.engines li:hover::after { background: var(--accent); width: 14px; }
.eng-name {
  display: block; font-family: var(--font-display);
  font-variation-settings: 'wdth' 104;
  font-size: 1.02rem; font-weight: 700; color: var(--text); margin-bottom: 4px;
}
.eng-note { display: block; font-size: 0.9rem; line-height: 1.6; color: var(--muted); }

@media (min-width: 760px) {
  .engines { grid-template-columns: 1fr 1fr; }
  /* The list has an even number of entries, so the final row is a full row and
     both of its items drop the rule. */
  .engines li:nth-last-child(-n+2) { border-bottom: 0; }
  .engines li:nth-child(odd) { border-right: 1px solid var(--line); padding-right: 28px; }
  .engines li:nth-child(even) { padding-left: 74px; --num-left: 28px; }
}

/* --------------------------------------------------------- start screen --- */

/* The first step of the funnel, rendered into the checkout dialog so that
   picking a row swaps the contents in place rather than stacking a second
   layer on top. */
.chooser { padding: 0 0 26px; }
.chooser .checkout-head { margin-bottom: 0; }
.chooser-lead {
  font-size: 0.93rem; line-height: 1.6; color: var(--muted);
  margin: 18px 26px 22px; max-width: 68ch;
}
.chooser-cols {
  display: grid; gap: 0; margin: 0 26px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  border-top: 1px solid var(--line-strong);
}
.chooser-col { padding: 20px 22px 8px; border-right: 1px solid var(--line); }
.chooser-col:last-child { border-right: 0; }
.chooser-col h4 {
  font-family: var(--font-display); font-variation-settings: 'wdth' 82;
  font-size: 1.15rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.02em; margin: 0 0 2px; color: var(--text);
}
.chooser-cat { font-size: 0.78rem; color: var(--accent); font-weight: 600; margin: 0 0 12px; }
.chooser-list { list-style: none; padding: 0; margin: 0; }

/* Each row is a real button, priced, so the buyer knows what the next screen
   costs before they open it. */
.chooser-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  width: 100%; padding: 9px 0 9px 12px; margin: 0;
  background: none; border: 0; border-bottom: 1px solid var(--line);
  font: inherit; text-align: left; cursor: pointer; position: relative;
  transition: color .14s ease, padding-left .14s ease;
}
/* The leading bar the service chips use, so a row reads as the same kind of
   thing wherever it appears. */
.chooser-row::before {
  content: ''; position: absolute; left: 0; top: 12px; bottom: 12px;
  width: 2px; background: var(--line-strong); transition: background-color .14s ease, width .14s ease;
}
.chooser-row:hover { color: var(--accent); padding-left: 16px; }
.chooser-row:hover::before { background: var(--accent); width: 4px; }
.chooser-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cr-name { font-size: 0.93rem; font-weight: 600; }
.cr-price {
  flex: none; font-size: 0.85rem; font-weight: 700; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.chooser-row:hover .cr-price { color: var(--accent); }

.chooser-foot {
  font-size: 0.88rem; line-height: 1.6; color: var(--muted);
  margin: 22px 26px 0; padding-top: 16px; border-top: 1px solid var(--line);
}

/* Back to the list sits next to Close, so the two ways out of a configured
   tier are in the same place. */
.head-actions { display: flex; align-items: center; gap: 8px; flex: none; }

@media (max-width: 720px) {
  .chooser-col { border-right: 0; border-bottom: 1px solid var(--line); }
  .chooser-col:last-child { border-bottom: 0; }
  .chooser-lead, .chooser-cols, .chooser-foot { margin-left: 18px; margin-right: 18px; }
}

/* ------------------------------------------------------------ contact --- */

.contact-ways {
  display: grid; gap: 0; margin: 28px 0 0;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--panel); overflow: hidden;
}
.cw { padding: 26px 24px; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.cw:last-child { border-right: 0; }
.cw-tag {
  display: inline-block; align-self: flex-start; margin: 0 0 12px; padding-bottom: 6px;
  font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase;
  font-weight: 800; color: var(--accent); border-bottom: 2px solid var(--accent);
}
.cw h3 {
  font-family: var(--font-display); font-variation-settings: 'wdth' 100;
  font-size: 1.08rem; font-weight: 700; line-height: 1.3; margin: 0 0 8px;
}
.cw p { font-size: 0.92rem; line-height: 1.6; color: var(--muted); margin: 0 0 16px; }
/* The action sits on the floor of the card so three cards of different copy
   lengths still line their buttons up. */
.cw .btn { margin-top: auto; align-self: flex-start; }
.cw-mail { font-weight: 600; color: var(--accent); }
.cw-fine { font-size: 0.82rem; margin: 0; }

@media (max-width: 880px) {
  .cw { border-right: 0; border-bottom: 1px solid var(--line); }
  .cw:last-child { border-bottom: 0; }
}

.foot-contact { font-size: 0.88rem; color: var(--muted); margin: 10px 0 0; }
.foot-contact a { color: var(--accent); font-weight: 600; }

/* --------------------------------------------------------- back to top --- */

/* Same stamped language as the buttons, so it reads as part of the site rather
   than as a widget dropped on top of it. Hidden from the layout until there is
   something to scroll back from. */
.to-top {
  position: fixed; right: 20px; bottom: 24px; z-index: 40;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; font: inherit; font-size: 0.82rem; font-weight: 700;
  color: #fff; background: var(--accent);
  border: 1.5px solid var(--accent); border-radius: var(--radius-sm);
  box-shadow: 3px 3px 0 var(--accent-hover);
  cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s,
              box-shadow .12s ease, background-color .12s ease;
}
.to-top.is-in { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--accent-hover); box-shadow: 2px 2px 0 var(--accent-hover); }
.to-top:active { box-shadow: 0 0 0 var(--accent-hover); transform: translate(3px, 3px); }
.to-top:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Chevron drawn from borders, so there is no icon font and no extra request. */
.tt-arrow {
  flex: none; width: 8px; height: 8px; margin-top: 2px;
  border-left: 2px solid currentColor; border-top: 2px solid currentColor;
  transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
  .to-top { transition: opacity .18s ease, visibility .18s; transform: none; }
  .to-top.is-in { transform: none; }
  .to-top:active { transform: none; }
}

/* The mobile checkout bar owns the bottom of the screen while it is up, and it
   matters more than this does. */
@media (max-width: 720px) {
  .to-top { right: 14px; bottom: 16px; padding: 9px 12px; }
  .tt-text { display: none; }
}
body:has(.checkout-dialog[open]) .to-top { visibility: hidden; opacity: 0; }

/* ----------------------------------------------------------- tracking --- */

.track { max-width: 760px; padding: 60px 24px 90px; }
.track h1 { font-size: clamp(1.9rem, 4.4vw, 2.5rem); margin: 6px 0 12px; }
.track-lead { font-size: 1.02rem; line-height: 1.7; color: var(--muted); max-width: 60ch; }

.track-form { margin: 28px 0 8px; }
.track-fields { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; margin-bottom: 18px; }
@media (max-width: 640px) { .track-fields { grid-template-columns: 1fr; } }

.track-card {
  margin: 30px 0 0; padding: 26px 24px;
  background: var(--panel); border: 1px solid var(--line);
  border-top: 4px solid var(--accent); border-radius: 0;
}
.track-empty { border-top-color: var(--arrow); }
.track-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 20px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid var(--line);
}
.track-ref {
  font-family: var(--font-display); font-variation-settings: 'wdth' 68;
  font-size: 0.74rem; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 4px;
}
.track-head h2 { font-size: 1.3rem; margin: 0 0 4px; }
.track-tier { font-size: 0.9rem; color: var(--muted); margin: 0; }
.track-amount {
  display: inline-flex; align-items: baseline; margin: 0;
  font-family: var(--font-figure); font-size: 1.5rem; font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.track-rail { margin: 22px 0 20px; grid-template-columns: repeat(4, 1fr); }

.track-state {
  font-family: var(--font-display); font-variation-settings: 'wdth' 100;
  font-size: 1.08rem; font-weight: 700; color: var(--accent); margin: 0 0 6px;
}
.track-detail { font-size: 0.95rem; line-height: 1.65; color: var(--text); margin: 0; max-width: 62ch; }

.track-deliverable {
  margin: 22px 0 0; padding: 18px 20px;
  background: var(--panel-2); border-top: 3px solid var(--accent);
}
.td-label {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 10px;
}
.td-file {
  font-family: var(--font-figure); font-size: 1rem; font-weight: 700;
  margin: 0; word-break: break-all;
}
.td-note { font-size: 0.85rem; line-height: 1.55; color: var(--muted); margin: 10px 0 0; }

.track-reasons { margin: 12px 0 18px; padding-left: 20px; }
.track-reasons li { font-size: 0.93rem; line-height: 1.6; color: var(--muted); margin-bottom: 6px; }
.track-help { font-size: 0.9rem; color: var(--muted); margin: 20px 0 0; }
.track-help a { color: var(--accent); font-weight: 600; }

.confirm-track { font-size: 0.92rem; color: var(--muted); margin: 16px 0 0; }
.confirm-track a { color: var(--accent); font-weight: 600; }