/* ================================================================
   Agentic Frontier — site shell
   ----------------------------------------------------------------
   Base rules, the header and footer, the hero, the colour bands,
   the feature rows and the frames that hold product screens.
   Page-specific rules (pricing, contact, legal) live in pages.css.
   ================================================================ */

html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; }
img { max-width: 100%; }
::selection { background: var(--accent-soft); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input, textarea { color-scheme: light; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; top: -100px; left: 16px; z-index: 200; background: var(--ink); color: var(--on-ink); font-weight: 600; font-size: 13px; padding: 10px 16px; border-radius: 0 0 6px 6px; text-decoration: none; }
.skip-link:focus { top: 0; }

/* Layout */
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; box-sizing: border-box; }
.eyebrow { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.h1 { font-family: var(--font-display); font-weight: 300; font-size: clamp(40px, 5vw, 60px); line-height: 1.02; letter-spacing: -0.012em; margin: 0; }
.h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 3.2vw, 42px); line-height: 1.12; letter-spacing: -0.012em; margin: 0; max-width: 24ch; }
.h2.wide { max-width: 32ch; }
.h2 .alt { color: var(--accent); }
.h3 { font-family: var(--font-display); font-weight: 500; font-size: 22px; line-height: 1.25; letter-spacing: -0.008em; margin: 0 0 12px; }
.lede { font-size: 18px; line-height: 1.45; color: var(--ink-soft); margin: 0; max-width: 46ch; }
.copy { font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); margin: 0; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent; font-family: var(--font-body); font-size: 16px; font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease; }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-grey { background: var(--ground-3); color: var(--ink-soft); border-radius: 6px; }
.btn-grey:hover { background: var(--line); color: var(--ink); }
.btn-white { background: #ffffff; color: var(--ink); }
.btn-white:hover { background: var(--ground-2); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-outline:hover { border-color: var(--ink); }
.btn-sm { height: 36px; padding: 0 16px; font-size: 14.5px; font-weight: 600; }
.btn-lg { height: 52px; padding: 0 26px; font-size: 17px; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 60; background: var(--nav-bg-solid); border-bottom: 1px solid var(--line-soft); }
.site-header .wrap { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; flex: none; }
.brand img { display: block; width: 118px; height: auto; }
.nav { display: flex; align-items: center; gap: 28px; }
.nav a:not(.btn) { font-size: 14.5px; font-weight: 400; color: var(--ink); text-decoration: none; white-space: nowrap; }
.nav a:not(.btn):hover { color: var(--accent); }
.nav a:not(.btn)[aria-current="page"] { font-weight: 500; }
.nav-toggle { display: none; width: 40px; height: 40px; border: 0; background: transparent; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; height: 2px; background: var(--ink); margin: 5px 0; border-radius: 1px; }

/* Hero */
.hero { padding: 108px 0 56px; }
.hero .h1 { max-width: 15ch; }
.hero .lede { margin: 26px 0 30px; max-width: 42ch; }
.hero-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hero-note { margin-top: 26px; font-size: 14px; color: var(--ink-faint); display: flex; align-items: center; gap: 8px; }
/* The provider strip. A bare logo row under a hero reads as "our
   customers", which these are not, so the lead-in stays. It is plain
   sentence case rather than a tracked mono eyebrow. */
.providers { padding: 34px 0 6px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.providers-lead { margin: 0; font-size: 14px; color: var(--ink-faint); }
.logos { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.logos li { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; color: var(--ink-soft); white-space: nowrap; }
.logos svg { width: 17px; height: 17px; flex: none; fill: currentColor; }

/* Bands */
.band { padding: 96px 0; }
.band-navy { background: var(--band-navy); color: #ffffff; }
.band-navy .lede { color: rgba(255, 255, 255, 0.8); }
.band-navy .h2 .alt { color: var(--highlight); }
.band-pink { background: var(--band-pink); color: var(--ink); }
.band-pink .h2 .alt { color: rgba(17, 60, 66, 0.6); }
.band-pink .lede { color: rgba(17, 60, 66, 0.82); }
.band-white { background: var(--panel); color: var(--ink); }
.band-white .h2 .alt { color: var(--ink-faint); }
.band-yellow { background: var(--band-yellow); color: var(--ink); }
.band-yellow .h2 .alt { color: rgba(17, 60, 66, 0.6); }
.band-yellow .lede { color: rgba(17, 60, 66, 0.82); }
.band-coal { background: var(--band-coal); color: #ffffff; }
.band-coal .lede { color: rgba(255, 255, 255, 0.76); }
.band-coal .h2 .alt { color: var(--highlight); }
/* The accent is a band ground too, so the primary button has to invert
   on the two dark bands or it disappears into them. */
.band-navy .btn-primary, .band-coal .btn-primary { background: var(--void); color: var(--accent); }
.band-navy .btn-primary:hover, .band-coal .btn-primary:hover { background: #ffffff; }
.band-head { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 44px; }
.band-head.split { grid-template-columns: 1.1fr 0.9fr; align-items: end; gap: 48px; }
.centered { text-align: center; }
.centered .h2, .centered .lede { margin-left: auto; margin-right: auto; }

/* Product screen frames */
.screen-frame { position: relative; width: 100%; overflow: hidden; border-radius: 12px; box-shadow: var(--shadow-screen); background: var(--band-coal); }
.screen-frame > .af-screen { transform-origin: 0 0; }
.screen-frame.plain { box-shadow: var(--shadow-card); }

/* Feature rows */
.features { padding: 96px 0 40px; }
.features .h2 { margin-bottom: 8px; }
.feature { display: grid; grid-template-columns: 1.35fr 0.65fr; gap: 56px; align-items: center; padding: 64px 0; border-top: 1px solid var(--line-strong); }
.feature:first-of-type { border-top: 0; }
.feature .text { max-width: 440px; }
.feature .copy { margin-bottom: 20px; }
.feature ul { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 10px; }
.feature li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; color: var(--ink); line-height: 1.45; }
.feature li i { flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 4px; background: var(--ink); color: #ffffff; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 11px; font-family: var(--font-mono); }

/* Three short points under a band head (the build handoff) */
.points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; list-style: none; margin: 0 0 46px; padding: 0; }
.points li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 13px; align-items: start; }
.points i { display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px; margin-top: 2px; border-radius: 4px; background: var(--ink); color: var(--void); font-style: normal; font-family: var(--font-mono); font-size: 11px; }
.points b { display: block; font-size: 15.5px; font-weight: 500; }
.points span { display: block; margin-top: 3px; font-size: 14px; line-height: 1.45; color: rgba(17, 60, 66, 0.72); }

/* Stat rows (green band) */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin: 0 0 44px; }
.stat .num { font-family: var(--font-display); font-weight: 300; font-size: 44px; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat .cap { margin-top: 10px; font-size: 14.5px; color: rgba(255, 255, 255, 0.72); }
.stat .bar { height: 3px; margin-top: 16px; background: rgba(255, 255, 255, 0.16); border-radius: 2px; overflow: hidden; }
.stat .bar i { display: block; height: 100%; background: var(--highlight); transform-origin: left; transform: scaleX(0); transition: transform 1s var(--ease-out); }
.reveal.in .stat .bar i { transform: scaleX(var(--w, 1)); }

/* Security grid */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 64px; margin-top: 44px; }
.grid-2 > div { padding: 22px 0; border-top: 1px solid var(--line); }
.grid-2 h4 { margin: 0 0 6px; font-size: 16px; font-weight: 500; }
.grid-2 p { margin: 0; font-size: 14.5px; color: var(--ink-faint); }

/* Footer */
.site-footer { background: var(--band-navy); color: #ffffff; padding: 72px 0 40px; }
.site-footer .cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.site-footer h5 { margin: 0 0 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.68); font-weight: 500; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-footer a { color: #ffffff; text-decoration: none; font-size: 14.5px; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .mark { display: flex; justify-content: flex-end; margin-top: 64px; }
.site-footer .mark img { width: min(520px, 60vw); height: auto; display: block; }
.site-footer .legal { margin-top: 28px; font-size: 13px; color: rgba(255, 255, 255, 0.7); display: flex; gap: 18px; flex-wrap: wrap; }

.brand .dark { display: none; }   /* kept for a future dark header */

/* Hero: the door standing in a field of points. The section scopes a
   dark token set so the canvas (which reads its own computed style) and
   the tooltip draw in the product's own colours. */
.hero-dark {
  /* js/hero.js resolves its palette off this element's computed style,
     so the hero must read the site's own tokens and nothing else. The
     verdict colours come from --vb-*, the same set the problem card
     uses, and --pos (the light on the floor) is Dull Yellow. */
  --ink: #edebe2; --ink-soft: #b6c6c6; --ink-faint: #8ba3a4; --pos: var(--highlight);
  /* The soft lift behind the door. Romanov Mauve, and nothing else:
     an earlier version layered several clouds and read as grey haze. */
  --neb-1: #b97da8;
  --panel: #14161a; --line: #2b2f36; --shadow-card: 0 18px 50px rgba(0, 0, 0, 0.55);
  position: relative; overflow: hidden; background: var(--band-black); color: var(--ink);
  min-height: min(88vh, 900px); display: flex; align-items: flex-end; padding: 120px 0 72px; box-sizing: border-box;
}
.hero-dark canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-dark .hero-fade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(94deg, var(--band-black) 4%, transparent 56%), linear-gradient(0deg, var(--band-black) 3%, transparent 32%), radial-gradient(120% 88% at 50% 26%, transparent 40%, rgba(0, 0, 0, 0.6) 100%); }
#afHeroTip { position: absolute; left: 0; top: 0; z-index: 2; opacity: 0; pointer-events: none; transform: translate(-50%, -132%); background: var(--panel); border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow-card); padding: 10px 14px; white-space: nowrap; transition: opacity 0.18s ease; }
#afHeroTip .t { display: block; font-size: 14px; color: var(--ink); margin-bottom: 5px; }
#afHeroTip .m { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-faint); }
#afHeroTip i { font-style: normal; }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 56px; align-items: end; width: 100%; }
.hero-dark .h1 { color: #ffffff; max-width: 15ch; }
.hero-dark .lede { color: var(--ink-soft); margin: 24px 0 0; max-width: 42ch; }
.hero-cta { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; padding-bottom: 6px; }
.hero-dark .btn-outline { color: #ffffff; border-color: rgba(255, 255, 255, 0.3); }
.hero-dark .btn-outline:hover { border-color: #ffffff; }

/* The verdict: four cards, then the evidence ladder */
.vcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; list-style: none; margin: 0; padding: 0; }
.vcard { display: flex; flex-direction: column; padding: 22px 20px 24px; border-radius: 6px; color: #ffffff; }
.vcard h3 { margin: 0 0 10px; font-family: var(--font-display); font-size: 21px; font-weight: 500; letter-spacing: -0.012em; }
/* 0.92, not 0.82: on the Automate green and the Skip red, 0.82 composites
   to 4.17:1 and 4.11:1, under the 4.5:1 needed at this size. */
.vcard p { margin: 0; font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, 0.92); }
/* The action opens the sentence, so it carries the emphasis the old uppercase
   footer used to. */
.vcard p b { color: #ffffff; font-weight: 600; }
.vcard.v-automate { background: var(--v-automate); }
.vcard.v-marginal { background: var(--v-marginal); }
.vcard.v-skip { background: var(--v-skip); }
.vcard.v-pilot { background: var(--v-pilot-card); color: var(--v-pilot-card-ink); }
.vcard.v-pilot p { color: rgba(51, 38, 10, 0.82); }
.vcard.v-pilot p b { color: var(--v-pilot-card-ink); }

.ladder { margin-top: 64px; }
.ladder .lad-head { margin: 0; font-size: 17px; font-weight: 500; color: var(--ink); }
.lad-rail { position: relative; margin-top: 30px; }
.ladder .steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; list-style: none; margin: 0; padding: 0; }
/* The rider and the filled track are positioned by JS from the real node
   centres, so they stay aligned whatever the column widths do. */
.lad-fill { position: absolute; top: 5px; left: 5px; height: 1px; width: 0; background: var(--accent); }
.lad-dot { position: absolute; top: 0; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px var(--void); }
.ladder .steps::before { content: ""; position: absolute; left: 5px; right: 5px; top: 5px; height: 1px; background: var(--line); }
.ladder li { position: relative; padding-top: 26px; }
.ladder .node { position: absolute; top: 0; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--void); border: 2px solid var(--ink-dim); box-sizing: border-box; }
.ladder li.lit .node { background: var(--accent); border-color: var(--accent); }
.ladder b { display: block; font-size: 16px; font-weight: 500; }
.ladder li > span:not(.node) { display: block; margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--ink-faint); max-width: 34ch; }
.ladder .copy { margin-top: 36px; max-width: 62ch; }

/* Chapter rail, in the left margin (js/site.js lights the current one) */
.rail { position: fixed; left: 34px; top: 42%; transform: translateY(-50%); z-index: 50; display: grid; gap: 12px; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; }
.rail.on { opacity: 1; pointer-events: auto; }
.rail a { position: relative; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); opacity: 0.42; text-decoration: none; white-space: nowrap; transition: opacity 0.25s ease, color 0.25s ease; }
.rail a::before { content: ""; position: absolute; left: -22px; top: 50%; width: 12px; height: 1px; background: currentColor; opacity: 0; transition: opacity 0.25s ease; }
.rail a:hover { opacity: 0.75; }
.rail a.on { opacity: 1; }
.rail a.on::before { opacity: 1; }
.rail.on-dark a { color: #ffffff; }

/* The problem, told by scrolling (js/problem.js) */
.problem { padding: 0; }
.problem-outer { height: 500vh; }
.problem-sticky { position: sticky; top: 0; height: 100vh; padding-top: var(--nav-h); box-sizing: border-box; display: flex; align-items: center; overflow: hidden; }
.problem-sticky .wrap { width: 100%; min-width: 0; }
.problem .h2 { margin-bottom: 38px; }
.problem-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: 64px; align-items: start; }
.problem-grid > * { min-width: 0; }
.problem-text .copy { color: rgba(17, 60, 66, 0.82); max-width: 42ch; margin-bottom: 30px; }
.beats { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.beat { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; align-items: start; opacity: 0.42; transition: opacity 0.35s ease; }
.beat.on { opacity: 1; }
.beat i { display: block; width: 18px; height: 18px; margin-top: 2px; }
.beat svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.beat b { display: block; font-size: 15.5px; font-weight: 500; color: var(--ink); }
.beat span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.45; color: rgba(17, 60, 66, 0.82); }

.problem-card { position: relative; background: var(--band-coal); border-radius: 6px; padding: 26px 30px 24px; color: #ffffff; }
.problem-card .card-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 22px; }
.problem-card .num { font-family: var(--font-display); font-weight: 300; font-size: 40px; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.problem-card .cap { font-size: 14px; color: rgba(255, 255, 255, 0.66); }
.problem-card svg { display: block; width: 100%; height: auto; }
.problem-card .sq { transition: fill 0.4s ease, fill-opacity 0.4s ease; }
.problem.verdicts .problem-card .sq { cursor: crosshair; }
.problem.verdicts .problem-card .sq:hover { stroke: #ffffff; stroke-width: 2; }
.problem-card .blank { fill: #ffffff; fill-opacity: 0.08; }
.problem-card .no { fill: #ffffff; fill-opacity: 0.44; }
.problem-card .yes { fill: var(--vb-automate); fill-opacity: 1; }
.problem-card .v-automate { fill: var(--vb-automate); fill-opacity: 1; }
.problem-card .v-pilot { fill: var(--vb-pilot); fill-opacity: 1; }
.problem-card .v-marginal { fill: var(--vb-marginal); fill-opacity: 1; }
.problem-card .v-skip { fill: var(--vb-skip); fill-opacity: 1; }
.problem-card .building { stroke: #ffffff; stroke-width: 2.5; fill-opacity: 0.08; }
.problem-card .card-key { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; row-gap: 10px; margin: 20px 0 0; font-size: 12.5px; color: rgba(255, 255, 255, 0.66); }
.problem-card .k { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: #ffffff; opacity: 0.08; }
.problem-card .k + .k, .problem-card .card-key .k:not(:first-child) { margin-left: 16px; }
.problem-card .k.yes { background: var(--vb-automate); opacity: 1; }
.problem-card .k.no { opacity: 0.44; }
.problem-card .k.v-automate { background: var(--vb-automate); opacity: 1; }
.problem-card .k.v-pilot { background: var(--vb-pilot); opacity: 1; }
.problem-card .k.v-marginal { background: var(--vb-marginal); opacity: 1; }
.problem-card .k.v-skip { background: var(--vb-skip); opacity: 1; }
.problem-card .k4 { display: none; font-size: 11.5px; gap: 6px; }
.problem-card .k4 b { font-weight: 500; color: #ffffff; margin-right: 12px; }
.problem-card .k4 .k { margin-left: 0; }
.problem.verdicts .problem-card .k3 { display: none; }
.problem.verdicts .problem-card .k4 { display: flex; }

/* Beat 5: the squares move into four labelled groups */
.problem-card .groups { transition: opacity 0.3s ease; }
.problem-card .glab { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; }
.problem-card .glab.v-automate { fill: var(--vb-automate); }
.problem-card .glab.v-pilot { fill: var(--vb-pilot); }
.problem-card .glab.v-marginal { fill: var(--vb-marginal); }
.problem-card .glab.v-skip { fill: var(--vb-skip); }

/* Every square is a named process, the way the hero points are */
.problem-tip { position: absolute; z-index: 3; opacity: 0; pointer-events: none; transform: translate(-50%, calc(-100% - 10px)); background: #0d3036; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 6px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55); padding: 10px 14px; white-space: nowrap; transition: opacity 0.16s ease; }
.problem-tip.on { opacity: 1; }
.problem-tip .t { display: block; font-size: 13.5px; color: #ffffff; margin-bottom: 5px; }
.problem-tip .m { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11.5px; color: rgba(255, 255, 255, 0.6); }
.problem-tip i { font-style: normal; }
.problem-tip .v-automate { color: var(--vb-automate); }
.problem-tip .v-pilot { color: var(--vb-pilot); }
.problem-tip .v-marginal { color: var(--vb-marginal); }
.problem-tip .v-skip { color: var(--vb-skip); }

.problem.static .problem-outer { height: auto; }
.problem.static .problem-sticky { position: static; height: auto; padding: 72px 0; overflow: visible; }
.problem.static .beat { opacity: 1; }

/* Reveal */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }

/* Pilot dialog (native <dialog>; js/pilot.js owns the behaviour) */
.pilot-modal { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100%; height: 100%; margin: 0; }
.pilot-modal::backdrop { background: var(--backdrop); }
.pilot-modal[open] { display: flex; align-items: center; justify-content: center; padding: 24px; box-sizing: border-box; }
.field-err { display: none; margin: 0; font-size: 12.5px; color: var(--neg); }
.field-err.on { display: block; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--neg) !important; }
.form-status { margin: 0; font-size: 13.5px; color: var(--ink-soft); min-height: 1.3em; }
.form-status.err { color: var(--neg); }
.form-status a { color: var(--ink); }
.pilot-actions .btn-primary[disabled] { opacity: 0.6; cursor: default; }
/* The pilot dialog appears on index.html and pricing.html, but only pricing
   loads pages.css — so its form rules belong here or the home page dialog has
   no responsive behaviour at all. There is no global border-box, and the
   fields carry their own padding, so without this they overrun the frame at
   every width. */
.pilot-modal input, .pilot-modal textarea { box-sizing: border-box; width: 100%; max-width: 100%; }
@media (max-width: 900px) {
  #pilotFormGrid { grid-template-columns: 1fr !important; }
  #afPilotFrame { padding: 28px 22px !important; }
}
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hv-lift:hover { box-shadow: var(--shadow-lift); }
.hv-ink:hover { color: var(--ink) !important; }
.hv-wash:hover { background: rgba(var(--beam-rgb), 0.05) !important; }
.hv-wash-ink:hover { color: var(--ink) !important; background: rgba(var(--beam-rgb), 0.06) !important; }
.hv-border:hover { border-color: var(--ink) !important; }

/* Responsive */
@media (max-width: 1460px) {
  .rail { display: none; }
}
@media (max-width: 1200px) {
  .vcards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1100px) {
  .site-footer .cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .wrap { padding: 0 20px; }
  .nav { position: absolute; top: var(--nav-h); left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 0; background: var(--nav-bg-solid); border-bottom: 1px solid var(--line); padding: 8px 20px 16px; display: none; }
  .nav.open { display: flex; }
  .nav a:not(.btn) { padding: 10px 0; font-size: 16px; }
  .nav .btn { margin-top: 8px; }
  .nav-toggle { display: block; }
  .hero { padding: 72px 0 40px; }
  .providers { gap: 18px; }
  .providers-lead { flex-basis: 100%; }
  .logos { gap: 20px; }
  .band { padding: 64px 0; }
  .band-head.split { grid-template-columns: 1fr; }
  .hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .hero-cta { justify-content: flex-start; }
  .hero-dark { min-height: 100vh; padding: 60vh 0 48px; }
  .vcards { grid-template-columns: 1fr; gap: 10px; }
  .vcard { min-height: 0; }
  .ladder .steps { grid-template-columns: 1fr; gap: 26px; }
  .ladder .steps::before, .lad-fill, .lad-dot { display: none; }
  .ladder .node { background: var(--accent); border-color: var(--accent); }
  .problem-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .problem .h2 { margin-bottom: 28px; }
  .problem-card { padding: 22px 22px 20px; }
  .feature { grid-template-columns: 1fr; gap: 28px; padding: 48px 0; }
  .feature .text { max-width: none; }
  .points { grid-template-columns: 1fr; gap: 20px; margin-bottom: 32px; }
  .stats { grid-template-columns: 1fr; gap: 24px; }
  .grid-2 { grid-template-columns: 1fr; }
  .site-footer .cols { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .stat .bar i { transition: none; }
  html { scroll-behavior: auto; }
}

/* Design-partner offer. Used on the pricing page above the plan grid and at
   the foot of the home page, so it lives here rather than in pages.css. The
   button is self-contained: it must not depend on .plan-cta, which only the
   pricing page loads. */
.dp-banner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px 36px; text-align: left; background: var(--band-yellow); color: var(--ink-deep); border-radius: 18px; padding: 28px 32px; }
.dp-copy { flex: 1 1 420px; min-width: 0; }
.dp-title { font-family: var(--font-display); font-weight: 500; font-size: clamp(22px, 2.2vw, 29px); letter-spacing: -0.018em; line-height: 1.16; margin: 0 0 9px; }
.dp-sub { font-size: 15px; line-height: 1.6; color: rgba(10, 34, 38, 0.78); margin: 0; max-width: 62ch; }
.dp-act { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.dp-spots { font-size: 14.5px; font-weight: 600; color: var(--ink-deep); margin: 0; white-space: nowrap; }
.dp-cta { border: 1px solid var(--ink-deep); border-radius: 999px; padding: 13px 26px; background: var(--ink-deep); color: #ffffff; font-family: var(--font-body); font-weight: 600; font-size: 14.5px; line-height: 1; cursor: pointer; white-space: nowrap; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.dp-cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); }
@media (max-width: 700px) {
  .dp-banner { padding: 24px; }
  .dp-act { width: 100%; justify-content: space-between; }
}