/* ==========================================================================
   Conflow - Antimetal CTA WHITE  (faithful rebuild of Paper artboard R3S-0)
   Plain CSS, no framework. Values extracted directly from the Paper design.
   ========================================================================== */

/* ---- Design tokens ------------------------------------------------------- */
:root {
  /* Surfaces */
  --bg: #F8F9FC;
  --card: #FFFFFF;
  --card-subtle: #FBFCFE;
  --dark-band: #001033;

  /* Ink / text */
  --ink: #1B2540;
  --muted: #6B7184;
  --muted-2: #7C8293;
  --muted-3: #9AA0AC;
  --faint: #B3BAC7;
  --faint-2: #AEB6C6;
  --faint-3: #9098A8;

  /* Accent */
  --accent: #0050F8;
  --accent-bright: #2563EB;
  --icon-bg: #EEF2FB;
  --icon-bg-2: #EAF1FF;

  /* Hero text */
  --hero-ink: #FAFEFF;
  --hero-soft: #E0F6FF;

  /* Hairlines (navy at low alpha) */
  --line-08: #00275014;
  --line-0f: #0027500F;
  --line-1f: #0027501F;
  --line-0a: #0027500A;
  --line-0d: #0027500D;

  /* Type */
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --font-display: "Inter Tight", "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Geist Mono", monospace;

  /* Layout */
  --maxw: 1200px;
  --pad: 120px;

  /* Hero gradient (exact oklab from design, with sRGB fallback) */
  --hero-gradient: linear-gradient(180deg, #001033 0%, #0050F8 55%, #5FBDF7 100%);
}

@supports (background: linear-gradient(in oklab, red, blue)) {
  :root {
    --hero-gradient: linear-gradient(
      in oklab 180deg,
      oklab(18.6% -0.013 -0.073) 0%,
      oklab(51.8% -0.032 -0.255) 55%,
      oklab(76.4% -0.064 -0.104) 100%
    );
  }
}

/* ---- Reset --------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

/* No horizontal page scroll, ever: clamp both the root and the body to the
   viewport width and kill horizontal overflow on both. Setting overflow-x on
   html as well as body is what makes the guard reliable on mobile (a body-only
   rule does not always propagate to the viewport scroller). */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  max-width: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; -webkit-appearance: none; appearance: none; color: inherit; }
svg { display: block; flex-shrink: 0; }

/* Shared helpers */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 6px 13px 6px 10px;
  background: var(--card);
  box-shadow: var(--line-0f) 0 0 0 1px, var(--line-0d) 0 1px 2px;
  font-size: 13px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
  flex-shrink: 0;
}
/* Eyebrow pills hug their own text in left-aligned sections, rather than
   stretching to the full column width. Centered headers already hug + center. */
.pillars__header-left .eyebrow,
.feature__text .eyebrow,
.seccard__left .eyebrow,
.story__left .eyebrow { align-self: flex-start; }

.section-heading {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.section-sub {
  font-size: 16px;
  line-height: 25px;
  letter-spacing: -0.01em;
  color: var(--muted);
  margin: 0;
}

.pill-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-top: 2px;
  font-size: 14px;
  line-height: 18px;
  font-weight: 480;
  letter-spacing: -0.01em;
  color: var(--accent);
}
.pill-link svg { transition: transform .2s ease; }
.pill-link:hover svg { transform: translateX(3px); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  font-family: var(--font-sans);
  letter-spacing: -0.01em;
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease;
}
.btn:active { transform: translateY(1px); }

/* white CTA = #FFFFFF fill, dark text */
.btn-white {
  background: #FFFFFF;
  color: #000000;
  font-weight: 480;
}
.btn-white:hover { box-shadow: 0 8px 22px -10px rgba(0,0,0,.45); }

.btn-ghost-light {
  background: transparent;
  color: var(--hero-soft);
  font-weight: 450;
  box-shadow: #E0F6FF80 0 0 0 1px inset;
}
.btn-ghost-light:hover { box-shadow: #E0F6FFcc 0 0 0 1px inset; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: 944px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: clip;
  background-image: var(--hero-gradient);
}

.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ---- Nav ---- */
.nav {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1440px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px var(--pad);
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--hero-ink);
}
.brand__name {
  font-size: 20px;
  line-height: 24px;
  font-weight: 480;
  letter-spacing: -0.02em;
  /* Default (footer) wordmark: dark-navy ink, legible on the light footer. */
  color: var(--ink);
}
/* Nav logo only: white wordmark for legibility on the dark hero. The nav
   dots are white with two grey accents in the markup; the footer logo keeps
   the dark-navy wordmark + blue/grey dots. */
.nav .brand__name { color: var(--hero-ink); }
.nav__links {
  display: flex;
  align-items: center;
  gap: 34px;
}
.nav__links a {
  font-size: 15px;
  line-height: 18px;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--hero-ink);
  opacity: .92;
  transition: opacity .15s ease;
}
.nav__links a:hover { opacity: 1; }
.nav__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.nav__login {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 14px;
  line-height: 18px;
  font-weight: 450;
  letter-spacing: -0.01em;
  color: var(--hero-soft);
  background: transparent;
  box-shadow: #E0F6FF80 0 0 0 1px inset;
}
.nav__demo {
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 14px;
  line-height: 18px;
  font-weight: 480;
}
.nav__toggle { display: none; }

/* ---- Hero content ---- */
.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1440px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 88px var(--pad) 0;
  gap: 26px;
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-radius: 999px;
  padding: 7px 15px 7px 11px;
  box-shadow: #E0F6FF73 0 0 0 1px inset;
  font-size: 13px;
  line-height: 16px;
  font-weight: 450;
  letter-spacing: -0.005em;
  color: var(--hero-soft);
}
.hero__eyebrow .dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--hero-soft);
  flex-shrink: 0;
}
.hero__title {
  margin: 0;
  max-width: 880px;
  font-family: var(--font-sans);
  font-size: 60px;
  line-height: 64px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--hero-ink);
}
.hero__sub {
  margin: 0;
  max-width: 600px;
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  letter-spacing: -0.011em;
  color: var(--hero-soft);
}
.hero__ctas {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 6px;
}
.hero__ctas .btn { padding: 13px 24px; font-size: 15px; }
.hero__fineprint {
  padding-top: 8px;
  font-size: 13px;
  line-height: 16px;
  letter-spacing: -0.003em;
  color: #E0F6FFB8;
}

/* ==========================================================================
   TRUST STRIP
   ========================================================================== */
.trust {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 72px var(--pad);
  background: var(--bg);
}
.trust__label {
  font-size: 13px;
  line-height: 16px;
  font-weight: 450;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.trust__marquee {
  width: 100%;
  max-width: 1100px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.trust__track {
  display: flex;
  width: max-content;
  animation: trust-scroll 30s linear infinite;
}
@keyframes trust-scroll {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .trust__track { animation: none; transform: none; }
}
.trust__logos {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 52px;
  /* trailing gap so the duplicated set tiles seamlessly at -50% */
  padding-right: 52px;
}
.trust__logos span {
  font-size: 19px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--muted-3);
  white-space: nowrap;
}

/* ==========================================================================
   SECTION SHELLS
   ========================================================================== */
.section { padding-inline: var(--pad); background: var(--bg); }

/* ---- Showcase ---- */
.showcase {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 44px;
  padding: 72px var(--pad) 90px;
}
.showcase__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 760px;
  gap: 18px;
}
.showcase__header h2 { font-size: 44px; line-height: 50px; }
.showcase__header .section-sub { max-width: 600px; line-height: 28px; font-size: 18px; }

.card-wrap {
  position: relative;
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
  display: flex;
  justify-content: center;
}

/* Dashboard card */
.dash {
  width: 100%;
  max-width: 1080px;
  display: flex;
  border-radius: 20px;
  overflow: clip;
  background: var(--card);
  box-shadow: var(--line-0a) 0 0 0 1px,
    #0027501A 0 24px 56px -16px,
    var(--line-0f) 0 8px 20px -12px;
}
.dash__side {
  width: 62px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: 16px;
  gap: 6px;
  background: var(--card-subtle);
  box-shadow: var(--line-0d) -1px 0 0 inset;
}
.dash__navicon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9AA3B2;
}
.dash__navicon.is-active { background: #E7EFFF; color: var(--accent); }
.dash__spacer { flex: 1; }
.dash__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.dash__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  box-shadow: var(--line-0f) 0 -1px 0 inset;
}
.dash__crumbs {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: -0.005em;
}
.dash__title-row { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.dash__title { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.tag-draft {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  font-weight: 500;
  color: var(--accent);
  background: #E7EFFF;
  border-radius: 5px;
  padding: 3px 7px;
}
.dash__toolbar-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.dash__search {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 10px;
  padding: 9px 14px;
  background: var(--card-subtle);
  box-shadow: var(--line-0f) 0 0 0 1px;
  color: var(--faint);
  font-size: 14px;
  min-width: 220px;
}
.btn-publish {
  background: var(--ink);
  color: #fff;
  border-radius: 10px;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 500;
}

.dash__grid { width: 100%; }
.dash__cols {
  display: grid;
  grid-template-columns: 64px 1fr 92px 56px 120px 132px 110px;
  align-items: center;
  padding: 9px 20px;
  gap: 0;
  background: var(--card-subtle);
  box-shadow: var(--line-0f) 0 -1px 0 inset;
}
.dash__cols span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted-3);
}
.t-right { text-align: right; }
.dash__row, .dash__grouprow {
  display: grid;
  grid-template-columns: 64px 1fr 92px 56px 120px 132px 110px;
  align-items: center;
  padding: 12px 20px;
  box-shadow: var(--line-0f) 0 -1px 0 inset;
  font-size: 14px;
}
.dash__grouprow { background: #F4F7FE; font-weight: 600; color: var(--ink); }
.dash__grouprow .grp { display: flex; align-items: center; gap: 8px; grid-column: 2 / 3; }
.dash__grouprow .grp .muted { color: var(--muted-3); font-weight: 400; }
.dash__code { font-family: var(--font-mono); font-size: 12px; color: var(--muted-3); }
.dash__desc { color: var(--ink); }
.dash__num { font-family: var(--font-mono); font-size: 13px; color: var(--ink); text-align: right; }
.dash__unit { font-family: var(--font-mono); font-size: 12px; color: var(--muted-3); }
.dash__amt { font-family: var(--font-mono); font-size: 13px; color: var(--ink); font-weight: 600; text-align: right; }
.dash__grouprow .dash__amt { text-align: right; }
.dash__cols > span:nth-child(7),
.dash__row > span:nth-child(7),
.dash__grouprow > span:nth-child(7) { padding-left: 16px; }

.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.status .d { width: 6px; height: 6px; border-radius: 999px; flex-shrink: 0; }
.status.priced { color: var(--accent); }
.status.priced .d { background: var(--accent); }
.status.reviewed { color: var(--ink); }
.status.reviewed .d { background: var(--ink); }
.status.plugged { color: #6E8FD6; }
.status.plugged .d { background: #9DBBF2; }
.status.unpriced { color: var(--muted-3); }
.status.unpriced .d { background: transparent; box-shadow: 0 0 0 1.5px var(--faint) inset; }
.status.locked { color: var(--muted-2); }

.dash__totals {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--card-subtle);
}
.dash__totals .lbl { font-size: 14px; color: var(--muted); }
.dash__totals .lbl strong { color: var(--ink); font-weight: 600; }
.dash__totals .grand { font-family: var(--font-mono); }
.dash__totals .grand .cur { font-size: 13px; color: var(--muted-3); margin-right: 6px; }
.dash__totals .grand .val { font-size: 20px; font-weight: 700; color: var(--ink); }

/* Floating badges */
.badge {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border-radius: 999px;
  padding: 8px 14px 8px 12px;
  box-shadow: var(--line-0a) 0 0 0 1px, #0027501f 0 12px 28px -10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  z-index: 4;
}
.badge .sub {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  border-radius: 6px;
  padding: 2px 7px;
}
.badge-priced { left: -14px; top: 120px; }
.badge-priced svg { color: var(--accent); }
.badge-priced .sub { color: var(--accent); }
.badge-anomaly { right: -10px; top: -18px; }
.badge-anomaly svg { color: var(--accent); }
.badge-anomaly .sub { color: var(--accent); background: #E7EFFF; }
.badge-ctc { right: 30px; bottom: -16px; }
.badge-ctc svg { color: var(--accent); }
.badge-ctc .sub { color: #1A9E63; background: #E4F7EE; }

/* ---- Process ---- */
.process {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 52px;
  padding: 92px var(--pad);
}
.process__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
}
.process__header h2 { max-width: 800px; font-size: 40px; line-height: 46px; }
.process__header .section-sub { max-width: 600px; }
.process__steps {
  width: 100%;
  max-width: 1200px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.step {
  display: flex;
  flex-direction: column;
  gap: 15px;
  border-radius: 16px;
  padding: 30px;
  background: var(--card);
  box-shadow: var(--line-1f) 0 0 0 1px, var(--line-0f) 0 16px 34px -14px;
  transition: transform .25s ease, box-shadow .25s ease;
}
/* Brand-blue glow + slight lift on hover, matching the module tiles */
.step:hover {
  transform: translateY(-4px);
  box-shadow: var(--line-0f) 0 16px 34px -14px, 0 0 0 1px rgba(37, 99, 235, .4), 0 16px 36px -10px rgba(37, 99, 235, .5);
}
.step__top { display: flex; align-items: baseline; justify-content: space-between; }
.step__num { font-size: 34px; line-height: 34px; font-weight: 400; color: var(--faint-2); }
.step__week {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--faint-3);
}
.step__title { font-size: 19px; line-height: 24px; font-weight: 500; letter-spacing: -0.014em; color: var(--ink); }
.step__body { font-size: 15px; line-height: 23px; letter-spacing: -0.006em; color: var(--muted); }

/* ---- Pillars ---- */
.pillars {
  display: flex;
  flex-direction: column;
  gap: 52px;
  padding: 60px var(--pad);
}
.pillars__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  max-width: 1200px;
  margin-inline: auto;
  width: 100%;
}
.pillars__header-left { display: flex; flex-direction: column; gap: 16px; max-width: 620px; }
.pillars__header h2 { font-size: 40px; line-height: 46px; }
.pillars__header .section-sub { max-width: 360px; }
/* Assembly diagram: wired module tiles joined to a backbone rail */
.assembly {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
}
.assembly__board {
  position: relative;
  width: 100%;
  max-width: 1200px;
  height: 360px;
}

/* Backbone rail: a horizontal accent line with a soft glow */
.assembly__rail {
  position: absolute;
  top: 50%;
  left: 6.67%;
  right: 6.67%;
  height: 2px;
  border-radius: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg,
    rgba(37, 99, 235, 0) 0%,
    rgba(37, 99, 235, .9) 7%,
    rgba(37, 99, 235, .9) 93%,
    rgba(37, 99, 235, 0) 100%);
  box-shadow: 0 0 14px rgba(37, 99, 235, .5);
}
/* Arrowhead terminating the rail */
.assembly__arrow {
  position: absolute;
  top: 50%;
  left: 92.5%;
  width: 9px;
  height: 9px;
  border-top: 2px solid var(--accent-bright);
  border-right: 2px solid var(--accent-bright);
  transform: translate(-50%, -50%) rotate(45deg);
}

/* Five equal columns laid over the rail */
.assembly__cols {
  position: absolute;
  inset: 0;
  display: flex;
  z-index: 1;
}
.assembly__col {
  position: relative;
  flex: 1 1 0;
  padding-inline: 6px;
}

/* Node dot where a tile meets the rail */
.assembly__node {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent-bright);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .16), 0 0 10px rgba(37, 99, 235, .7);
}

/* Vertical connector trace between a tile and its node */
.assembly__trace {
  position: absolute;
  left: 50%;
  width: 2px;
  height: 48px;
  transform: translateX(-50%);
}
.assembly__col--top .assembly__trace {
  bottom: 50%;
  background: linear-gradient(180deg, rgba(37, 99, 235, .3) 0%, rgba(37, 99, 235, .95) 100%);
}
.assembly__col--bottom .assembly__trace {
  top: 50%;
  background: linear-gradient(180deg, rgba(37, 99, 235, .95) 0%, rgba(37, 99, 235, .3) 100%);
}

/* Tile placement: top tiles above the rail, bottom tiles below */
.assembly__col .block {
  position: absolute;
  left: 6px;
  right: 6px;
  margin-inline: auto;
  width: auto;
  max-width: 220px;
}
.assembly__col--top .block { bottom: calc(50% + 48px); }
.assembly__col--bottom .block { top: calc(50% + 48px); }

/* ---- Module tile ---- */
.block {
  height: 104px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 15px 16px;
  border-radius: 16px;
  background: var(--card);
  border: 1px solid #0027501A;
  box-shadow: var(--line-0f) 0 10px 24px;
  /* Feature A: smooth transition for the hover glow + lift */
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.block__top { display: flex; align-items: flex-start; justify-content: space-between; }
.block__matrix {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background-image: radial-gradient(circle at center, var(--accent-bright) 1.4px, transparent 1.6px);
  background-size: 6px 6px;
}
.block__no { font-family: var(--font-mono); font-size: 11px; font-weight: 500; line-height: 14px; color: rgba(0, 39, 80, .4); }
.block__text { display: flex; flex-direction: column; gap: 4px; }
.block__name { font-family: var(--font-display); font-size: 17px; font-weight: 600; line-height: 22px; letter-spacing: -0.01em; color: var(--ink); margin: 0; }
.block__desc { font-size: 12px; line-height: 16px; color: var(--muted); margin: 0; }

/* Your block: dashed, invent-it-for-you tile */
.block--new { background: rgba(37, 99, 235, .035); border: 1px dashed #2563EB73; box-shadow: none; }
.block__plus {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: rgba(37, 99, 235, .12);
  border: 1px solid rgba(37, 99, 235, .3);
  color: var(--accent-bright);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
}

/* Feature A: brand-blue glow + slight lift on hover */
.block:hover {
  transform: translateY(-4px);
  border-color: rgba(37, 99, 235, .55);
  box-shadow: var(--line-0f) 0 10px 24px, 0 0 0 1px rgba(37, 99, 235, .4), 0 14px 34px -8px rgba(37, 99, 235, .5);
}
.block--new:hover { background: rgba(37, 99, 235, .06); border-style: solid; }

/* Construct / Arrange / Invent closing line */
.assembly__closing { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.assembly__verbs { display: flex; align-items: center; gap: 14px; }
.assembly__verb { font-family: var(--font-display); font-size: 16px; font-weight: 600; line-height: 20px; color: var(--accent-bright); }
.assembly__verbdot { width: 4px; height: 4px; border-radius: 50%; background: rgba(37, 99, 235, .4); }
.assembly__caption { font-size: 14px; line-height: 18px; color: var(--muted-2); margin: 0; }

/* Feature B: calm, continuous pulse on the connector lines (live-system feel).
   Opacity / box-shadow pulse, staggered per trace. Disabled under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .assembly__trace { animation: tracePulse 2.8s ease-in-out infinite; }
  .assembly__col:nth-child(2) .assembly__trace { animation-delay: .55s; }
  .assembly__col:nth-child(3) .assembly__trace { animation-delay: 1.1s; }
  .assembly__col:nth-child(4) .assembly__trace { animation-delay: 1.65s; }
  .assembly__col:nth-child(5) .assembly__trace { animation-delay: 2.2s; }
  .assembly__rail { animation: railPulse 3.6s ease-in-out infinite; }
  .assembly__node { animation: nodePulse 2.8s ease-in-out infinite; }
}
@keyframes tracePulse {
  0%, 100% { opacity: .45; }
  50% { opacity: 1; }
}
@keyframes railPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(37, 99, 235, .38); }
  50% { box-shadow: 0 0 18px rgba(37, 99, 235, .72); }
}
@keyframes nodePulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(37, 99, 235, .12), 0 0 8px rgba(37, 99, 235, .55); }
  50% { box-shadow: 0 0 0 5px rgba(37, 99, 235, .22), 0 0 14px rgba(37, 99, 235, .85); }
}

/* ---- Feature sections (worksheet / adjudication) ---- */
.feature {
  display: flex;
  align-items: center;
  gap: 64px;
  padding: 0 var(--pad);
  max-width: 1440px;
  margin-inline: auto;
}
.feature--worksheet { padding-top: 30px; padding-bottom: 40px; }
.feature--adjudicate { padding-top: 40px; padding-bottom: 50px; }
.feature__text {
  width: 432px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.feature__text h2 { font-size: 36px; line-height: 42px; }
.feature__text .section-sub { line-height: 25px; }
.feature__media { flex: 1; min-width: 0; display: flex; justify-content: center; }
.feature--adjudicate .feature__text { order: 2; }
.feature--adjudicate .feature__media { order: 1; }

/* Shrink-to-fit wrapper for the wide mockup cards on narrow screens.

   CSS-first, no observer loop: the wrapper is a query container
   (container-type: inline-size). When it is narrower than the card's natural
   design width, the @container rules further down lay the card out at that fixed
   width and scale it with transform: scale() whose ratio is derived natively from
   the wrapper's own inline size (cqw) -- so the browser recomputes the scale on
   resize with NO JavaScript. This is what removes the previous ResizeObserver
   feedback loop and the scroll jitter.

   The card is centred with margin-inline:auto: on desktop the card is narrower
   than the wrapper, so the auto margins centre it exactly as before; when the
   card is laid out WIDER than the wrapper (scaling mode) the auto margins
   collapse to zero, so the card's top-left sits at the wrapper origin and the
   transform (origin top left) scales the box down into [0, wrapper width].

   scale-cards.js does only the two things CSS cannot: it sets this wrapper's
   height to the SCALED card height (a transformed box keeps its full layout
   height, so without this the wrapper would reserve the unscaled height and leave
   a gap) and toggles .is-fitted, on load + a debounced resize only. */
.fit-scale {
  display: block;
  container-type: inline-size;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
/* Overflow guard (set by scale-cards.js) applied ONLY while a card is actually
   being scaled, so the card box-shadows are never clipped at full size on
   desktop. The scaled card's transformed box already stays within the wrapper;
   this is the belt-and-suspenders clip that guarantees no page overflow. */
.fit-scale.is-fitted { overflow: hidden; }

/* When narrower than the card's natural width, the wrapper scales its card to
   fit exactly. tan(atan2(100cqw, Wpx)) is the unitless ratio 100cqw / W (the
   wrapper's inline size over the card's natural width); the engine re-evaluates
   it on every resize with no script, which is what keeps the scaling smooth and
   jitter-free. transform-origin is top left so the scaled box fills [0, 100cqw].
   These natural widths MUST stay in sync with the data-fit-w attributes in
   index.html (and are mirrored by scale-cards.js for the wrapper height).

   The selectors are scoped as `.fit-scale > X` on purpose: that lifts them to
   (0,2,0) so they out-rank the stacked-layout override
   `@media (max-width: 1000px) { .wcard, .acard { width: 100% } }` at (0,1,0).
   Without that, the equal-specificity .wcard/.acard rule that appears LATER in
   the source won the cascade and forced these two cards to full container width,
   so they never laid out at their fixed design width and the scale collapsed.
   (The showcase .card-wrap was never in that override list, which is why it was
   the only wide card that shrank.) */
@container (max-width: 785px) {
  .fit-scale > .card-wrap {
    width: 786px;
    margin-inline: 0;
    transform-origin: top left;
    transform: scale(tan(atan2(100cqw, 786px)));
  }
}
@container (max-width: 614px) {
  .fit-scale > .wcard {
    width: 615px;
    margin-inline: 0;
    transform-origin: top left;
    transform: scale(tan(atan2(100cqw, 615px)));
  }
}
@container (max-width: 599px) {
  .fit-scale > .acard {
    width: 600px;
    margin-inline: 0;
    transform-origin: top left;
    transform: scale(tan(atan2(100cqw, 600px)));
  }
}

.bullets { display: flex; flex-direction: column; gap: 14px; padding-top: 4px; }
.bullet { display: flex; align-items: flex-start; gap: 11px; }
.bullet__check {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 1px;
  border-radius: 999px;
  background: var(--icon-bg-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bullet span { font-size: 15px; line-height: 22px; letter-spacing: -0.008em; color: var(--ink); }

/* Worksheet card */
.wcard {
  width: 100%;
  max-width: 615px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  overflow: clip;
  background: var(--card);
  box-shadow: var(--line-0a) 0 0 0 1px, #0027501A 0 22px 50px -18px, var(--line-0d) 0 6px 16px -10px;
}
.wcard__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 22px 24px;
  box-shadow: var(--line-0f) 0 -1px 0 inset;
}
.wcard__eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--muted-3); }
.wcard__name { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); margin-top: 6px; }
.wcard__rate-box {
  text-align: right;
  background: var(--card-subtle);
  border-radius: 12px;
  padding: 10px 16px;
  box-shadow: var(--line-0f) 0 0 0 1px;
}
.wcard__rate-lbl { font-size: 13px; color: var(--muted); }
.wcard__rate-val { font-family: var(--font-mono); margin-top: 2px; }
.wcard__rate-val .big { font-size: 24px; font-weight: 600; color: var(--ink); }
.wcard__rate-val .unit { font-size: 13px; color: var(--muted-3); margin-left: 4px; }

.wtable { display: flex; flex-direction: column; }
.wtable__head, .wtable__row {
  display: grid;
  grid-template-columns: 1.7fr 0.9fr 0.7fr 0.6fr 0.7fr;
  align-items: center;
  padding: 0 24px;
  gap: 8px;
}
.wtable__head {
  height: 38px;
  box-shadow: var(--line-0f) 0 -1px 0 inset;
}
.wtable__head span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--muted-3); }
.wtable__row { height: 46px; box-shadow: var(--line-0f) 0 -1px 0 inset; }
.wtable__row .res { font-size: 15px; color: var(--ink); }
.wtable__row .num { font-family: var(--font-mono); font-size: 14px; color: var(--ink); }
.wtable__row .num.muted { color: var(--muted-3); }
.wchip {
  display: inline-flex;
  align-items: center;
  border-radius: 6px;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 500;
  background: #EEF1F6;
  color: var(--muted);
  width: fit-content;
}
.wchip.labour { background: #E7EFFF; color: var(--accent); }
.wchip.plant { background: #EAF1FF; color: #4D74C8; }
.wchip.material { background: #EEF1F6; color: var(--muted); }
.wchip.subcontract { background: #F1F1F5; color: var(--muted-3); }
.wchip.recipe { background: #ECE9FB; color: #6D4ED6; }

.wcalc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 24px;
  background: #F5F8FE;
  box-shadow: var(--line-0f) 0 -1px 0 inset;
}
.wcalc__left { display: flex; align-items: center; gap: 12px; }
.wcalc__fx {
  font-family: var(--font-mono);
  font-style: italic;
  font-size: 13px;
  color: var(--accent);
  background: #E2EAFF;
  border-radius: 7px;
  padding: 4px 9px;
}
.wcalc__expr { font-family: var(--font-mono); font-size: 14px; color: var(--ink); }
.wcalc__res { font-family: var(--font-mono); font-size: 14px; color: var(--accent); }
.wcard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
}
.wcard__foot .note { font-size: 14px; color: var(--muted); }
.wcard__foot .total { font-family: var(--font-mono); flex-shrink: 0; }
.wcard__foot .total .lbl { font-size: 14px; color: var(--muted); margin-right: 6px; font-family: var(--font-sans); }
.wcard__foot .total .val { font-size: 18px; font-weight: 600; color: var(--ink); }
.wcard__foot .total .unit { font-size: 13px; color: var(--muted-3); margin-left: 3px; }

/* Adjudication card (block-level inside its .fit-scale wrapper: width:auto fills
   the wrapper exactly as flex:1 filled .feature__media before). */
.acard {
  width: 100%;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  overflow: clip;
  background: var(--card);
  box-shadow: var(--line-0a) 0 0 0 1px, #0027501A 0 22px 50px -18px, var(--line-0d) 0 6px 16px -10px;
}
.acard__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 22px 24px;
  box-shadow: var(--line-0f) 0 -1px 0 inset;
}
.acard__eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--muted-3); }
.acard__name { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); margin-top: 6px; }
.acard__est {
  text-align: right;
  background: var(--card-subtle);
  border-radius: 12px;
  padding: 10px 16px;
  box-shadow: var(--line-0f) 0 0 0 1px;
}
.acard__est .lbl { font-size: 13px; color: var(--muted); }
.acard__est .val { font-family: var(--font-mono); font-size: 22px; font-weight: 600; color: var(--ink); margin-top: 2px; }

.atable__head, .arow {
  display: grid;
  grid-template-columns: 1.6fr 0.9fr 0.7fr 0.8fr;
  align-items: center;
  padding: 0 24px;
  gap: 8px;
}
.atable__head { height: 40px; box-shadow: var(--line-0f) 0 -1px 0 inset; }
.atable__head span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--muted-3); }
.arow { height: 58px; box-shadow: var(--line-0f) 0 -1px 0 inset; position: relative; }
.arow.best { background: #F3F7FF; }
.arow.best::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
.arow .sub-name { display: flex; align-items: center; gap: 10px; }
.arow .sub-name b { font-size: 16px; font-weight: 500; color: var(--ink); }
.fmt-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted-3);
  background: #EEF1F6;
  border-radius: 5px;
  padding: 2px 7px;
}
.arow .ret { font-family: var(--font-mono); font-size: 16px; color: var(--ink); }
.arow .var { font-family: var(--font-mono); font-size: 15px; display: inline-flex; align-items: center; gap: 4px; }
.arow .var.down { color: var(--accent); }
.arow .var.up { color: var(--muted); }
.atag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 500;
  width: fit-content;
}
.atag.best { background: var(--accent); color: #fff; }
.atag.compliant { background: #EEF1F6; color: var(--muted); }
.atag.anomaly { background: #E7EFFF; color: var(--accent); }
.acard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: var(--card-subtle);
}
.acard__foot .note { font-size: 15px; color: var(--muted); }
.acard__foot .save { font-size: 16px; color: var(--ink); }
.acard__foot .save b { font-family: var(--font-mono); color: var(--accent); font-weight: 700; margin-left: 6px; }

/* ---- Security ---- */
.security { padding: 30px var(--pad) 40px; }
.seccard {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  display: flex;
  border-radius: 24px;
  overflow: clip;
  background: var(--card);
  box-shadow: var(--line-0a) 0 0 0 1px, #0027501A 0 26px 60px -20px;
}
.seccard__left {
  width: 468px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 48px 44px;
  box-shadow: var(--line-0f) -1px 0 0 inset;
}
.seccard__left h2 { font-size: 34px; line-height: 40px; max-width: 376px; }
.seccard__left .section-sub { max-width: 376px; line-height: 25px; }
.seccard__host {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  padding-top: 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}
.seccard__host svg { color: var(--accent); }
.seccard__grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.seccell {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 40px 36px;
  box-shadow: var(--line-0f) 0 0 0 1px;
}
.seccell__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--icon-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}
.seccell h3 { margin: 0; font-size: 19px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.seccell p { margin: 0; font-size: 15px; line-height: 23px; color: var(--muted); }

/* ---- CTA band ---- */
.cta { padding: 20px var(--pad) 90px; }
.cta__band {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-radius: 24px;
  padding: 76px 64px;
  overflow: clip;
  gap: 24px;
  background: var(--dark-band);
}
.cta__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.cta__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 680px;
  gap: 22px;
}
.cta__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 6px 14px 6px 11px;
  box-shadow: #E0F6FF73 0 0 0 1px inset;
  font-size: 13px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--hero-soft);
}
.cta__eyebrow .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--hero-soft); }
.cta__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 48px;
  line-height: 54px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--hero-ink);
}
.cta__sub {
  margin: 0;
  max-width: 520px;
  font-size: 17px;
  line-height: 26px;
  letter-spacing: -0.01em;
  color: #E0F6FFC2;
}
.cta__buttons { display: flex; align-items: center; gap: 12px; padding-top: 8px; }
.cta__buttons .btn { padding: 14px 26px; font-size: 15px; }
.btn-blue { background: var(--accent-bright); color: #fff; font-weight: 480; }
.btn-blue:hover { background: #1d56d6; }
.btn-ghost-cta {
  background: transparent;
  color: var(--hero-ink);
  font-weight: 480;
  box-shadow: #FAFEFF59 0 0 0 1px inset;
}
.btn-ghost-cta:hover { box-shadow: #FAFEFFaa 0 0 0 1px inset; }

/* ---- Footer ---- */
.footer {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: 62px var(--pad) 44px;
  background: var(--bg);
  box-shadow: var(--line-08) 0 1px 0 inset;
}
.footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 60px;
  max-width: 1200px;
  margin-inline: auto;
  width: 100%;
}
.footer__brand { width: 320px; flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; }
.footer__brand .brand { color: var(--ink); }
.footer__brand .brand__name { color: var(--ink); }
.footer__desc { font-size: 14.5px; line-height: 22px; letter-spacing: -0.008em; color: var(--muted); }
.footer__made { display: flex; align-items: center; gap: 7px; padding-top: 2px; font-size: 13px; font-weight: 450; color: var(--muted-2); }
.footer__made svg { color: var(--muted-3); }
.footer__cols { display: flex; gap: 60px; flex-wrap: wrap; }
.footer__col { display: flex; flex-direction: column; gap: 13px; }
.footer__col h4 { margin: 0; font-size: 13px; font-weight: 500; letter-spacing: -0.005em; color: var(--ink); }
.footer__col a { font-size: 14px; line-height: 18px; letter-spacing: -0.008em; color: var(--muted); transition: color .15s ease; }
.footer__col a:hover { color: var(--ink); }
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 1200px;
  margin-inline: auto;
  width: 100%;
  padding-top: 26px;
  box-shadow: var(--line-08) 0 1px 0 inset;
}
.footer__copy { font-size: 13px; letter-spacing: -0.005em; color: var(--muted-2); }
.footer__status { display: flex; align-items: center; gap: 16px; }
.footer__status .live { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 450; color: var(--muted); }
.footer__status .live .d { width: 7px; height: 7px; border-radius: 999px; background: var(--accent); }
.footer__status .soc { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; color: var(--muted-3); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
/* ==========================================================================
   INTEGRATIONS - works with your existing tools
   ========================================================================== */
.integrations {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  padding: 72px var(--pad);
  background: var(--bg);
}
.integrations__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  max-width: 640px;
}
.integrations__header h2 { font-size: 40px; line-height: 46px; }
.integrations__header .section-sub { max-width: 520px; }
.integrations__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  width: 100%;
  max-width: 880px;
}
.integration {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 10px 18px 10px 12px;
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--line-0f) 0 0 0 1px, var(--line-0d) 0 1px 2px;
  transition: box-shadow .2s ease;
}
.integration:hover { box-shadow: rgba(37, 99, 235, .35) 0 0 0 1px, var(--line-0d) 0 2px 6px; }
.integration__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--icon-bg);
  box-shadow: var(--line-0a) 0 0 0 1px inset;
  flex-shrink: 0;
}
.integration__icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: block;
  filter: grayscale(1);
  opacity: .72;
  transition: filter .25s ease, opacity .25s ease;
}
.integration:hover .integration__icon img { filter: none; opacity: 1; }
.integration__name {
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--muted);
  transition: color .2s ease;
  white-space: nowrap;
}
.integration:hover .integration__name { color: var(--ink); }

@media (max-width: 1180px) {
  :root { --pad: 64px; }
  .hero__title { font-size: 52px; line-height: 56px; }
}

@media (max-width: 1000px) {
  /* Assembly: stack the module tiles along a vertical spine */
  .assembly__board { height: auto; }
  .assembly__rail, .assembly__arrow, .assembly__trace { display: none; }
  .assembly__cols {
    position: relative;
    inset: auto;
    flex-direction: column;
    gap: 14px;
    max-width: 380px;
    margin-inline: auto;
    padding-left: 30px;
  }
  .assembly__cols::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 12px;
    bottom: 12px;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, rgba(37, 99, 235, 0) 0%, rgba(37, 99, 235, .9) 6%, rgba(37, 99, 235, .9) 94%, rgba(37, 99, 235, 0) 100%);
    box-shadow: 0 0 12px rgba(37, 99, 235, .5);
  }
  .assembly__col { padding-inline: 0; }
  .assembly__col .block {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    margin: 0;
    width: auto;
    max-width: 100%;
  }
  .assembly__col--top .block, .assembly__col--bottom .block { top: auto; bottom: auto; }
  .assembly__node { left: -20px; top: 50%; }
  .feature { flex-direction: column; gap: 36px; }
  .feature__text { width: 100%; }
  /* Stacked: pin the media column to the full row width so the .fit-scale wrapper
     inside it has a DEFINITE containing block. .feature uses align-items:center,
     which leaves an auto-width flex item content-sized; the showcase wrapper
     avoids this because it is a direct child of its own definite-width flex, but
     the worksheet/adjudication wrappers are nested one level deeper here. With a
     definite width the wrapper's 100cqw equals the viewport-derived width, so the
     @container scale resolves correctly and 100cqw is never measured off an
     indefinite box. */
  .feature__media { width: 100%; }
  .feature--adjudicate .feature__text { order: 1; }
  .feature--adjudicate .feature__media { order: 2; }
  .wcard, .acard { max-width: 700px; width: 100%; }
  .seccard { flex-direction: column; }
  .seccard__left { width: 100%; box-shadow: var(--line-0f) 0 -1px 0 inset; }
  .seccard__host { margin-top: 8px; }
  .pillars__header { flex-direction: column; align-items: flex-start; gap: 16px; }
  .pillars__header .section-sub { max-width: 620px; }
}

/* Feature B (stacked): pulse the vertical spine, unless reduced motion is requested */
@media (max-width: 1000px) and (prefers-reduced-motion: no-preference) {
  .assembly__cols::before { animation: railPulse 3.6s ease-in-out infinite; }
}

@media (max-width: 820px) {
  :root { --pad: 28px; }
  .nav__links, .nav__login { display: none; }
  .nav__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 10px;
    background: transparent;
    box-shadow: #E0F6FF80 0 0 0 1px inset;
    color: var(--hero-ink);
  }
  .hero { min-height: 816px; }
  .hero__title { font-size: 40px; line-height: 44px; }
  .hero__sub { font-size: 16px; line-height: 25px; }
  .process__steps { grid-template-columns: 1fr; }
  .showcase__header h2 { font-size: 32px; line-height: 38px; }
  .process__header h2, .pillars__header h2, .feature__text h2 { font-size: 30px; line-height: 36px; }
  .integrations__header h2 { font-size: 30px; line-height: 36px; }
  .integrations__grid { gap: 10px; }
  .integration { padding: 9px 14px 9px 10px; }
  .cta__title { font-size: 34px; line-height: 40px; }
  .cta__band { padding: 56px 28px; }
  .footer__top { flex-direction: column; gap: 36px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 16px; }
  /* the dashboard shrinks to fit via the .fit-scale container query; hold its
     columns at design width so the scaled card never reflows */
  .dash__main { min-width: 720px; }
}

@media (max-width: 560px) {
  .assembly__cols { max-width: 340px; }
  .trust__logos { gap: 28px; padding-right: 28px; }
  /* Security cells: drop to a single column on narrow phones. At two columns the
     cells' long words (e.g. "Microsoft", "Deterministic") give each 1fr track a
     min-content wider than half the viewport, which pushed the grid past 100vw. */
  .seccard__grid { grid-template-columns: 1fr; }
  .seccell { padding: 28px 24px; }
  .hero__ctas { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; }
  .hero__ctas .btn { width: 100%; }
  .cta__buttons { flex-direction: column; width: 100%; max-width: 320px; }
  .cta__buttons .btn { width: 100%; }
  /* worksheet + adjudication cards shrink to fit via the .fit-scale container
     query; hold the table columns at their design width so the layout never
     reflows while scaled */
  .wtable__head, .wtable__row, .atable__head, .arow { min-width: 540px; }
}

/* Mobile menu panel */
.mobile-menu {
  display: none;
  position: absolute;
  z-index: 5;
  top: 80px;
  left: 16px;
  right: 16px;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(8, 22, 52, 0.92);
  backdrop-filter: blur(12px);
  box-shadow: #E0F6FF33 0 0 0 1px inset, rgba(0,0,0,.4) 0 20px 50px -20px;
}
.mobile-menu.is-open { display: flex; }
.mobile-menu a {
  padding: 11px 12px;
  border-radius: 10px;
  font-size: 16px;
  color: var(--hero-ink);
}
.mobile-menu a:hover { background: rgba(255,255,255,.07); }
.mobile-menu .divider { height: 1px; background: #E0F6FF26; margin: 8px 4px; }
.mobile-menu .btn { margin-top: 4px; padding: 12px; }
@media (min-width: 821px) { .mobile-menu { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   SUBPAGE HEROES (Pricing / About) - reuse .hero gradient + nav + canvas
   ========================================================================== */
.hero--sub { min-height: auto; }
.subhero {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1440px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
  padding: 80px var(--pad) 92px;
}
.subhero--pricing { padding-bottom: 132px; } /* room for cards to overlap */
.hero__eyebrow.is-upper { text-transform: uppercase; letter-spacing: 0.1em; }

/* Billing toggle */
.billing { display: flex; align-items: center; gap: 14px; padding-top: 8px; flex-wrap: wrap; justify-content: center; }
.billing__switch {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  box-shadow: #E0F6FF40 0 0 0 1px inset;
}
.billing__opt {
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 14px;
  line-height: 18px;
  font-weight: 450;
  letter-spacing: -0.01em;
  color: var(--hero-soft);
}
.billing__opt.is-active { background: #fff; color: #0B1530; font-weight: 480; }
.billing__note { font-size: 13px; font-weight: 450; letter-spacing: -0.005em; color: #E0F6FFB8; }

/* ==========================================================================
   PRICING - tiers
   ========================================================================== */
.pricing-tiers {
  position: relative;
  z-index: 2;
  margin-top: -72px;
  padding: 0 var(--pad) 8px;
  background: transparent;
}
.tiers {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}
.tier {
  display: flex;
  flex-direction: column;
  gap: 28px;
  border-radius: 20px;
  padding: 32px;
  background: #fff;
  box-shadow: var(--line-1f) 0 0 0 1px, #00275010 0 2px 5px;
}
.tier--featured {
  background: #001033;
  box-shadow: #2563EB 0 0 0 1.5px, #0010334D 0 24px 50px -18px;
}
.tier__head { display: flex; flex-direction: column; gap: 8px; }
.tier__badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  padding: 5px 13px 5px 11px;
  background: var(--accent-bright);
  margin-bottom: 4px;
}
.tier__badge .d { width: 6px; height: 6px; border-radius: 999px; background: #fff; flex-shrink: 0; }
.tier__badge span { text-transform: uppercase; font-size: 12px; line-height: 14px; font-weight: 600; letter-spacing: 0.05em; color: #fff; }
.tier__name { font-size: 16px; line-height: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.tier__desc { font-size: 14.5px; line-height: 21px; letter-spacing: -0.008em; color: var(--muted); }
.tier--featured .tier__name { color: var(--hero-ink); }
.tier--featured .tier__desc { color: #C2CBE0; }
.tier__price { display: flex; flex-direction: column; gap: 6px; }
.tier__price-row { display: flex; align-items: flex-end; gap: 6px; }
.tier__amt { font-family: var(--font-display); font-size: 46px; line-height: 46px; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }
.tier__per { font-size: 16px; line-height: 24px; color: var(--muted); padding-bottom: 3px; }
.tier__cap { font-size: 13px; line-height: 18px; font-weight: 450; letter-spacing: -0.005em; color: var(--muted-2); }
.tier--featured .tier__amt { color: var(--hero-ink); }
.tier--featured .tier__per { color: #AEBBD6; }
.tier--featured .tier__cap { color: #93A0BD; }
.tier__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: 999px;
  padding: 13px 24px;
  background: #fff;
  box-shadow: #00275033 0 0 0 1px inset, var(--line-0d) 0 1px 2px;
  font-size: 15px;
  line-height: 18px;
  font-weight: 480;
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: box-shadow .2s ease, transform .15s ease;
}
.tier__cta:hover { box-shadow: #00275055 0 0 0 1px inset, var(--line-0d) 0 1px 2px; }
.tier--featured .tier__cta { box-shadow: #0010334D 0 1px 2px; }
.tier--featured .tier__cta:hover { box-shadow: #0010334D 0 6px 16px -6px; }
.tier__feats {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 24px;
  box-shadow: var(--line-1f) 0 1px 0 inset;
}
.tier--featured .tier__feats { box-shadow: #FFFFFF24 0 1px 0 inset; }
.tier__feats-label { text-transform: uppercase; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; color: var(--muted-2); padding-bottom: 2px; }
.tier--featured .tier__feats-label { color: #93A0BD; }
.tier__feat { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; line-height: 21px; letter-spacing: -0.008em; color: #3D4660; }
.tier--featured .tier__feat { color: #D5DDF0; }
.tier__feat svg { margin-top: 1px; flex-shrink: 0; }

/* ==========================================================================
   PRICING - comparison table
   ========================================================================== */
.compare {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  padding: 24px var(--pad) 104px;
  background: var(--bg);
}
.compare__header { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 720px; gap: 18px; }
.compare__header h2 { font-size: 44px; line-height: 50px; }
.compare__header .section-sub { max-width: 600px; font-size: 18px; line-height: 28px; }
.ctable-scroll { width: 100%; max-width: 1200px; margin-inline: auto; }
.ctable {
  position: relative;
  width: 100%;
  border-radius: 20px;
  padding: 16px 40px;
  background: #fff;
  box-shadow: var(--line-1f) 0 0 0 1px, #00275010 0 2px 6px;
}
.ctable__hl {
  position: absolute;
  top: 10px;
  bottom: 10px;
  right: 188px;
  width: 184px;
  border-radius: 16px;
  background: #EEF3FF;
  z-index: 0;
}
.ctable__inner { position: relative; z-index: 1; }
.chead { display: flex; align-items: flex-end; padding-top: 20px; padding-bottom: 18px; box-shadow: #00275017 0 1px 0; }
.chead__label { flex: 1; text-transform: uppercase; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; color: #9AA0AF; }
.cplan { width: 160px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.cplan__name { font-size: 15px; line-height: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.cplan__price { font-size: 13px; line-height: 16px; letter-spacing: -0.005em; color: var(--muted-2); }
.ccat { display: flex; padding-top: 26px; padding-bottom: 12px; }
.ccat span { text-transform: uppercase; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; color: #9AA0AF; }
.crow { display: flex; align-items: center; padding-block: 15px; box-shadow: var(--line-0f) 0 1px 0; }
.crow__label { flex: 1; font-size: 14.5px; line-height: 20px; font-weight: 450; letter-spacing: -0.008em; color: var(--ink); padding-right: 16px; }
.ccell { width: 160px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; line-height: 18px; letter-spacing: -0.005em; color: var(--ink); }
.ccell.muted { color: var(--muted); }
.ccell .dash { width: 14px; height: 2px; border-radius: 2px; background: #CDD2DD; }

/* ==========================================================================
   PRICING / shared - FAQ
   ========================================================================== */
.faq { display: flex; flex-direction: column; align-items: center; gap: 44px; padding: 8px var(--pad) 104px; background: var(--bg); }
.faq__header { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 720px; gap: 18px; }
.faq__header h2 { font-size: 44px; line-height: 50px; }
.faq__header .section-sub { max-width: 560px; font-size: 18px; line-height: 28px; }
.faq__list { width: 100%; max-width: 1000px; display: flex; flex-direction: column; }
.faq__item { display: flex; gap: 64px; padding-block: 28px; box-shadow: #00275017 0 1px 0 inset; }
.faq__q { width: 380px; flex-shrink: 0; font-size: 19px; line-height: 27px; font-weight: 500; letter-spacing: -0.012em; color: var(--ink); }
.faq__a { flex: 1; font-size: 16px; line-height: 26px; letter-spacing: -0.009em; color: var(--muted); }

/* ==========================================================================
   ABOUT - story
   ========================================================================== */
.story {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 96px;
  padding: 104px var(--pad);
  background: #fff;
}
.story__left { width: 400px; flex-shrink: 0; display: flex; flex-direction: column; gap: 20px; }
.story__left h2 { font-size: 44px; line-height: 50px; }
.story__right { display: flex; flex-direction: column; max-width: 620px; gap: 24px; padding-top: 4px; }
.story__right p { margin: 0; font-size: 19px; line-height: 32px; letter-spacing: -0.011em; color: #2A3142; }

/* ABOUT - values */
.values { display: flex; flex-direction: column; align-items: center; gap: 56px; padding: 96px var(--pad) 100px; background: var(--bg); }
.values__header { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 720px; gap: 18px; }
.values__header h2 { font-size: 44px; line-height: 50px; }
.values__header .section-sub { max-width: 600px; font-size: 18px; line-height: 28px; }
.values__grid { width: 100%; max-width: 1200px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.vcard { display: flex; flex-direction: column; gap: 16px; border-radius: 16px; padding: 28px; background: #fff; box-shadow: var(--line-1f) 0 0 0 1px, var(--line-0f) 0 16px 34px -14px; }
.vcard__icon { width: 44px; height: 44px; border-radius: 12px; background: #EEF3FF; box-shadow: #0050F81F 0 0 0 1px inset; display: flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0; }
.vcard h3 { margin: 0; min-height: 52px; font-size: 19px; line-height: 26px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.vcard p { margin: 0; font-size: 15px; line-height: 24px; letter-spacing: -0.005em; color: var(--muted); }

/* ABOUT - team */
.team { display: flex; flex-direction: column; align-items: center; gap: 56px; padding: 96px var(--pad) 100px; background: #fff; }
.team__header { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 720px; gap: 18px; }
.team__header h2 { font-size: 44px; line-height: 50px; }
.team__header .section-sub { max-width: 600px; font-size: 18px; line-height: 28px; }
.team__grid { width: 100%; max-width: 800px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.person { display: flex; align-items: center; gap: 18px; border-radius: 16px; padding: 24px; background: var(--bg); box-shadow: var(--line-0f) 0 0 0 1px; }
.person__avatar {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--hero-ink);
  box-shadow: #00275024 0 4px 12px -4px;
  background: linear-gradient(145deg, #0E2150 0%, #2C66E0 100%);
}
.person__name { font-size: 18px; line-height: 24px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.person__role { font-size: 14px; line-height: 20px; letter-spacing: -0.005em; color: var(--muted); margin-top: 4px; }

/* ABOUT - stats */
.stats { padding: 8px var(--pad) 104px; background: #fff; }
.stats__band {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  display: flex;
  border-radius: 20px;
  padding: 14px 8px;
  background: var(--bg);
  box-shadow: var(--line-1f) 0 0 0 1px, #00275012 0 20px 44px -20px;
}
.stat { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 34px 24px; }
.stat + .stat { border-left: 1px solid #0027501A; }
.stat__num { display: flex; align-items: baseline; gap: 1px; }
.stat__num .n { font-family: var(--font-display); font-size: 54px; line-height: 58px; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }
.stat__num .suf { font-family: var(--font-display); font-size: 40px; line-height: 58px; font-weight: 500; letter-spacing: -0.02em; color: var(--accent); }
.stat__label { font-size: 15px; line-height: 21px; letter-spacing: -0.005em; color: var(--muted); text-align: center; }

/* ==========================================================================
   RESPONSIVE - subpages
   ========================================================================== */
@media (max-width: 1000px) {
  .tiers { grid-template-columns: 1fr; max-width: 460px; }
  .pricing-tiers { margin-top: -56px; }
  .values__grid { grid-template-columns: repeat(2, 1fr); }
  .team__grid { grid-template-columns: repeat(2, 1fr); }
  .story { flex-direction: column; gap: 32px; }
  .story__left { width: 100%; }
  .ctable-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ctable { min-width: 880px; }
}
@media (max-width: 820px) {
  .subhero { padding: 56px var(--pad) 64px; }
  .subhero--pricing { padding-bottom: 96px; }
  .compare__header h2, .faq__header h2, .values__header h2, .team__header h2, .story__left h2 { font-size: 30px; line-height: 36px; }
  .faq__item { flex-direction: column; gap: 10px; }
  .faq__q { width: 100%; }
  .stats__band { flex-wrap: wrap; }
  .stat { flex: 1 1 50%; }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid #0027501A; }
}
@media (max-width: 560px) {
  .values__grid, .team__grid { grid-template-columns: 1fr; }
  .stat { flex: 1 1 100%; border-left: 0; }
  .stat + .stat { border-left: 0; border-top: 1px solid #0027501A; }
  .stat__num .n { font-size: 44px; line-height: 48px; }
  .stat__num .suf { font-size: 32px; line-height: 48px; }
}

/* ==========================================================================
   WORKSHEET BUILDER - footer "add resource" field + price-book dropdown
   The add field lives in the card footer (.wcard__foot); selecting a resource
   appends a new worksheet row and rolls the unit rate up live. The dropdown is
   rendered into document.body and positioned with position:fixed from the
   input's box (see worksheet-builder.js) so it escapes the card's
   `overflow: clip`; it opens upward above the footer input.
   ========================================================================== */

/* ---- Footer add-resource field ---- */
.waddfield {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--card-subtle);
  box-shadow: var(--line-1f) 0 0 0 1px, var(--line-0d) 0 1px 2px;
  transition: box-shadow .18s ease;
}
.waddfield:hover { box-shadow: #00275033 0 0 0 1px, var(--line-0d) 0 1px 2px; }
/* Active cell = green accent ring, like the app's active worksheet cell */
.waddfield:focus-within {
  background: var(--card);
  box-shadow: #16A06A 0 0 0 1.5px, #16A06A29 0 0 0 4px;
}
/* Pulsing blue caret cue at rest (blink gated behind prefers-reduced-motion) */
.waddfield__caret {
  width: 2px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 1px;
  background: var(--accent-bright);
}
.waddfield:focus-within .waddfield__caret,
.waddfield.has-value .waddfield__caret { display: none; }
.waddfield__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 15px;
  letter-spacing: -0.008em;
  color: var(--ink);
}
.waddfield__input::placeholder { color: var(--faint); }
.waddfield__count {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--muted-3);
  white-space: nowrap;
}

/* ---- Newly appended worksheet row (highlight on appear) ---- */
.wtable__row--new { animation: wRowIn .5s ease both; }

/* ---- Price-book dropdown (portalled to body, positioned fixed by JS) ---- */
.rpmenu {
  position: fixed;
  z-index: 80;
  left: 0;
  top: auto;
  width: 360px;
  max-width: calc(100vw - 24px); /* never exceed the viewport on mobile */
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  background: var(--card);
  box-shadow: var(--line-0a) 0 0 0 1px, #0027502E 0 18px 44px -12px, var(--line-0d) 0 4px 12px -6px;
  overflow: hidden;
  /* resting (closed) state */
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px) scale(.985);
  transform-origin: bottom center;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
/* When there is no room above, the menu opens downward instead. */
.rpmenu--down { transform-origin: top center; }
.rpmenu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  transition: opacity .16s ease, transform .16s ease, visibility 0s;
}
.rpmenu__count {
  padding: 8px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted-2);
  background: var(--card-subtle);
  box-shadow: var(--line-0f) 0 -1px 0 inset;
}
.rpmenu__n { color: var(--accent); font-weight: 600; }
.rpmenu__list {
  margin: 0;
  padding: 6px;
  list-style: none;
  max-height: 264px; /* ~7 rows visible inside the card, the rest scroll */
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Resource row */
.rpopt {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 9px;
  border-radius: 8px;
  cursor: pointer;
}
.rpopt:hover { background: var(--card-subtle); } /* light highlight on hover */
.rpopt.is-active { background: #EEF3FF; box-shadow: #2563EB29 0 0 0 1px inset; }
.rpopt__name {
  font-size: 14px;
  letter-spacing: -0.008em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rpopt__rate { font-family: var(--font-mono); font-size: 12.5px; text-align: right; white-space: nowrap; }
.rpopt__n { color: #109B72; } /* teal/green number */
.rpopt__u { color: var(--muted-3); margin-left: 1px; }

/* Square type badge - consistent tinted scheme */
.rpopt__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}
.rpopt__badge--R { background: #E7EFFF; color: #2563EB; } /* Recipe - blue */
.rpopt__badge--M { background: #E4F7EE; color: #1A9E63; } /* Material - green */
.rpopt__badge--P { background: #FBF1DC; color: #B7791F; } /* Plant - amber */
.rpopt__badge--L { background: #EDE9FB; color: #6D4ED6; } /* Labour - violet */
.rpopt__badge--S { background: #EEF1F6; color: #5B6577; } /* Subcontract - slate */

/* Motion: blink the caret, flash new rows, slide the dropdown - only when allowed */
@media (prefers-reduced-motion: no-preference) {
  .waddfield__caret { animation: rpCaret 1.1s steps(1, end) infinite; }
}
@keyframes rpCaret {
  0%, 45% { opacity: 1; }
  50%, 95% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes wRowIn {
  0% { background: #EEF3FF; }
  100% { background: transparent; }
}
/* Reduced motion: steady caret, no row flash, no slide, instant show/hide */
@media (prefers-reduced-motion: reduce) {
  .wtable__row--new { animation: none; }
  .rpmenu { transform: none; transition: opacity .001s linear, visibility 0s linear .001s; }
  .rpmenu.is-open { transform: none; transition: opacity .001s linear, visibility 0s; }
}

/* ==========================================================================
   CONTACT / LEAD QUALIFICATION FORM  (contact.html)
   Added by the contact-page task. Self-scoped .qf* classes, built on the
   site's existing design tokens. Does not touch the worksheet feature or
   any worksheet CSS above.
   ========================================================================== */

/* Subpage hero, contact variant */
.subhero--contact { padding-bottom: 64px; }
.qf-hero__meta {
  margin: 2px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: #E0F6FFB8;
}

/* Form shell, lifts the card stack slightly over the hero base */
.qf { background: var(--bg); padding: 0 var(--pad) 96px; }
.qf__wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  margin-top: -40px;
}
.qf__form { display: flex; flex-direction: column; gap: 20px; }

/* Card */
.qf-card {
  background: var(--card);
  border-radius: 18px;
  padding: 28px 30px;
  box-shadow: var(--line-1f) 0 0 0 1px, var(--line-0f) 0 16px 34px -16px;
}
.qf-card__head { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 22px; }
.qf-card__no {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: var(--accent-bright);
  background: #EEF3FF;
  border-radius: 8px;
  padding: 7px 9px;
}
.qf-card__heading { display: flex; flex-direction: column; gap: 4px; }
.qf-card__title { margin: 0; font-family: var(--font-display); font-size: 21px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.qf-card__help { margin: 0; font-size: 14px; line-height: 20px; color: var(--muted); }
.qf-card__body { display: flex; flex-direction: column; gap: 20px; }

/* Text fields */
.qf-grid { display: grid; gap: 16px; }
.qf-grid--2 { grid-template-columns: 1fr 1fr; }
.qf-field { display: flex; flex-direction: column; gap: 7px; }
.qf-label { font-size: 13px; font-weight: 500; letter-spacing: -0.005em; color: var(--ink); }
.qf-input {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--ink);
  background: var(--card-subtle);
  border: 1px solid #00275017;
  border-radius: 10px;
  padding: 12px 14px;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.qf-input::placeholder { color: var(--faint); }
.qf-input:focus {
  outline: none;
  border-color: var(--accent-bright);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
  background: var(--card);
}
.qf-textarea { min-height: 84px; line-height: 22px; resize: vertical; }
.qf-select {
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%236B7184' stroke-width='1.6'%3E%3Cpath d='M3 4.5L6 7.5l3-3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}

/* Fieldsets group chips with a label */
.qf-fieldset { display: flex; flex-direction: column; gap: 11px; margin: 0; padding: 0; border: 0; }
.qf-fieldset .qf-label { padding: 0; }

/* Chips: a hidden input plus a styled span, selection driven by :checked */
.qf-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.qf-chip { position: relative; display: inline-flex; cursor: pointer; }
.qf-chip input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.qf-chip span {
  display: inline-flex;
  align-items: center;
  padding: 9px 15px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 450;
  letter-spacing: -0.005em;
  color: var(--ink);
  background: var(--card-subtle);
  box-shadow: #00275017 0 0 0 1px inset;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.qf-chip:hover span { box-shadow: #00275036 0 0 0 1px inset; }
.qf-chip input:checked + span {
  color: #fff;
  font-weight: 500;
  background: var(--accent-bright);
  box-shadow: none;
}
.qf-chip input:focus-visible + span { box-shadow: 0 0 0 3px rgba(37, 99, 235, .32); }

/* Self-perform vs subcontract slider */
.qf-split { display: flex; align-items: center; gap: 14px; }
.qf-split__end { font-size: 13px; color: var(--muted); white-space: nowrap; }
.qf-range {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(90deg, var(--accent-bright) 0%, var(--accent-bright) 60%, #DCE3F0 60%, #DCE3F0 100%);
  cursor: pointer;
}
.qf-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--accent-bright);
  box-shadow: 0 1px 3px rgba(0, 39, 80, .25);
}
.qf-range::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--accent-bright);
  box-shadow: 0 1px 3px rgba(0, 39, 80, .25);
}
.qf-range:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, .25); }
.qf-split__out { font-family: var(--font-mono); font-size: 13px; color: var(--accent-bright); }

/* Router: three selectable cards */
.qf-router { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.qf-route { position: relative; display: block; height: 100%; cursor: pointer; }
.qf-route input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.qf-route__inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  box-sizing: border-box;
  padding: 18px;
  border-radius: 14px;
  background: var(--card-subtle);
  box-shadow: #00275017 0 0 0 1px inset;
  transition: background-color .15s ease, box-shadow .15s ease;
}
.qf-route__badge {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--accent-bright);
  background: #EEF3FF;
  border-radius: 6px;
  padding: 4px 8px;
}
.qf-route__name { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.qf-route__desc { font-size: 13.5px; line-height: 20px; color: var(--muted); }
.qf-route__tag { margin-top: auto; padding-top: 4px; font-size: 12px; font-weight: 500; color: var(--accent-bright); }
.qf-route__tag--pilot { color: #B7791F; }
.qf-route:hover .qf-route__inner { box-shadow: #00275036 0 0 0 1px inset; }
.qf-route input:checked + .qf-route__inner {
  background: #F3F7FF;
  box-shadow: var(--accent-bright) 0 0 0 2px inset;
}
.qf-route input:focus-visible + .qf-route__inner {
  box-shadow: var(--accent-bright) 0 0 0 2px inset, 0 0 0 4px rgba(37, 99, 235, .2);
}

/* Submit */
.qf-submit { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 8px; }
.qf-submit__btn { padding: 15px 40px; font-size: 16px; }
.qf-submit__note { margin: 0; font-size: 13px; color: var(--muted); text-align: center; }

/* Inline confirmation */
.qf-thanks {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  background: var(--card);
  border-radius: 18px;
  padding: 56px 40px;
  box-shadow: var(--line-1f) 0 0 0 1px, var(--line-0f) 0 16px 34px -16px;
  outline: none;
}
.qf-thanks__mark {
  width: 56px; height: 56px;
  border-radius: 999px;
  background: #EEF3FF;
  display: flex; align-items: center; justify-content: center;
}
.qf-thanks__title { margin: 0; font-family: var(--font-display); font-size: 28px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.qf-thanks__sub { margin: 0; max-width: 440px; font-size: 15px; line-height: 24px; color: var(--muted); }
.qf-thanks__home { margin-top: 10px; padding: 13px 26px; font-size: 15px; }

@media (max-width: 720px) {
  .qf-grid--2 { grid-template-columns: 1fr; }
  .qf-router { grid-template-columns: 1fr; }
  .qf-card { padding: 22px 20px; }
  .qf__wrap { margin-top: -24px; }
}