/* ===========================================================================
   OnSight Payments — onsightpayments.com

   The look is the product's own palette pushed editorial: navy ground,
   Carolina blue as a SIGNAL, and a coordinate grid running underneath the
   dark bands. The grid is the motif — this is software that knows where the
   crew is, what is on the truck and what the customer said no to. An
   instrument panel, not a friendly SaaS pastel.

   TWO RULES CARRIED OVER FROM THE APP AND EASY TO UNDO BY ACCIDENT
   ---------------------------------------------------------------
   1. --accent ACTS, --red WARNS. Anything pressable is Carolina blue. Red is
      warning and destruction and nothing else.
   2. There are TWO Carolina blues. --sky (#4B9CD3) is 3.0:1 on white and is
      for FILLS, TINTS, GRID LINES AND GLOWS ONLY. --accent (#2A6E9E) is
      5.5:1 and is the one that carries text on light grounds.

   SINGLE THEME ON PURPOSE. A marketing site is the same page for everybody;
   it does not follow the reader's OS. Every ground and every color is
   painted explicitly so the page holds on any host background.
   ======================================================================== */

:root {
  /* ── grounds ──────────────────────────────────────────────────────── */
  --abyss:      #071121;   /* deepest — hero, agent */
  --navy:       #13294B;   /* the brand ink */
  --navy-lift:  #1B355C;   /* raised panel on a dark ground */
  --paper:      #F4F9FD;   /* the light band */
  --paper-2:    #E9F2FA;   /* the light band, one step down */
  --white:      #FFFFFF;

  /* ── ink ──────────────────────────────────────────────────────────── */
  --ink:        #13294B;
  --ink-2:      #1E3A63;
  --steel:      #5A6B80;   /* neutral, biased blue toward the accent */
  --mute:       #8A99AC;
  --hair:       #D6E1EC;
  --hair-hard:  #BACCDE;

  /* on dark */
  --snow:       #F2F8FD;
  --frost:      #B8CEE4;
  --dusk:       #7E97B4;
  --hair-dark:  rgba(122,167,212,.20);
  --hair-dark2: rgba(122,167,212,.34);

  /* ── the two Carolinas, and the deep one ──────────────────────────── */
  --sky:        #4B9CD3;   /* fills, tints, grid, glow. Never text on white. */
  --sky-lt:     #7BAFD4;
  --accent:     #2A6E9E;   /* acts: buttons, links */
  --accent-dk:  #22597F;

  /* ── semantic, separate from the accent ───────────────────────────── */
  --green:      #2FA37A;  --green-bg:#E4F5EE;
  --amber:      #8A6100;  --amber-bg:#FFF6E5;
  --red:        #C93B40;  --red-bg:#FCECEC;

  /* ── type ─────────────────────────────────────────────────────────── */
  --sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ── metrics ──────────────────────────────────────────────────────── */
  --wrap: 1200px;
  --gut: clamp(20px, 5vw, 64px);
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;

  --shadow:      0 1px 2px rgba(7,17,33,.06), 0 18px 40px -20px rgba(7,17,33,.30);
  --shadow-lift: 0 2px 6px rgba(7,17,33,.10), 0 40px 80px -32px rgba(7,17,33,.55);
  --shadow-dark: 0 30px 80px -30px rgba(0,0,0,.75);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ===========================================================================
   RESET AND BASE
   ======================================================================== */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 104px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; display: block; height: auto; }
a { color: var(--accent); text-decoration: none; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: rgba(75,156,211,.30); color: var(--navy); }

/* ===========================================================================
   TYPE SCALE
   ======================================================================== */

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -.028em;
  line-height: 1.06;
  text-wrap: balance;
}

.t-hero  { font-size: clamp(2.35rem, 4.7vw, 4.15rem); line-height: 1.02; letter-spacing: -.036em; }
.t-h2    { font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.04; }
.t-h3    { font-size: clamp(1.3rem, 2.2vw, 1.75rem); line-height: 1.15; letter-spacing: -.022em; }
.t-h4    { font-size: 1.06rem; line-height: 1.3; letter-spacing: -.014em; font-weight: 600; }

p { margin: 0; }

.lede {
  font-size: clamp(1.06rem, 1.55vw, 1.28rem);
  line-height: 1.55;
  color: var(--steel);
  max-width: 60ch;
  font-weight: 400;
}
.on-dark .lede, .lede.on-dark { color: var(--frost); }

.body-copy { color: var(--steel); max-width: 62ch; }
.on-dark .body-copy { color: var(--frost); }

/* The eyebrow is the instrument label: monospace, spaced, and it carries a
   real value wherever one exists rather than a decorative number. */
.eyebrow {
  font-family: var(--mono);
  font-size: .715rem;
  font-weight: 500;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: var(--sky);
  flex: none;
}
.on-dark .eyebrow { color: var(--sky); }
.on-dark .eyebrow::before { background: var(--sky); opacity: .6; }

.pull {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.85rem, 4vw, 3.1rem);
  line-height: 1.14;
  letter-spacing: -.02em;
  color: var(--navy);
  text-wrap: balance;
}
.on-dark .pull { color: var(--snow); }
.pull em { font-style: italic; color: var(--accent); }
.on-dark .pull em { color: var(--sky); }

.num { font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

.mono-tag {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--mute);
}
.on-dark .mono-tag { color: var(--dusk); }

/* ===========================================================================
   LAYOUT
   ======================================================================== */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.band {
  position: relative;
  padding-block: clamp(72px, 9vw, 132px);
}
.band--paper  { background: var(--paper); }
.band--paper2 { background: var(--paper-2); }
.band--navy   { background: var(--navy); }
.band--abyss  { background: var(--abyss); }
.band--tight  { padding-block: clamp(48px, 6vw, 80px); }

.on-dark { color: var(--snow); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--snow); }

.stack   { display: flex; flex-direction: column; }
.gap-8   { gap: 8px; }  .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
.gap-20  { gap: 20px; } .gap-24 { gap: 24px; } .gap-32 { gap: 32px; }
.gap-40  { gap: 40px; } .gap-56 { gap: 56px; } .gap-72 { gap: 72px; }

.head-block { display: flex; flex-direction: column; gap: 20px; max-width: 62ch; }

/* the hairline that opens a section, with its label sat on it */
.rule {
  height: 1px;
  background: var(--hair);
  width: 100%;
}
.on-dark .rule { background: var(--hair-dark); }

/* ===========================================================================
   THE GRID FIELD — the motif under every dark band
   ======================================================================== */

.field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.field__grid {
  position: absolute;
  inset: -20% -10%;
  background-image:
    linear-gradient(rgba(122,167,212,.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122,167,212,.13) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(120% 90% at 78% 6%, #000 0%, transparent 68%);
          mask-image: radial-gradient(120% 90% at 78% 6%, #000 0%, transparent 68%);
  animation: drift 42s linear infinite;
}
@keyframes drift {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-46px,-46px,0); }
}
.field__glow {
  position: absolute;
  width: 68vw; height: 68vw;
  max-width: 900px; max-height: 900px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(75,156,211,.30) 0%, rgba(75,156,211,0) 62%);
  filter: blur(10px);
}
.field__glow--a { top: -32%; right: -12%; }
.field__glow--b { bottom: -46%; left: -18%; background: radial-gradient(circle, rgba(43,110,158,.34) 0%, rgba(43,110,158,0) 62%); }

/* ===========================================================================
   BUTTONS
   ======================================================================== */

.btn {
  --btn-bg: var(--accent);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: -.012em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background .25s ease;
  box-shadow: 0 1px 2px rgba(7,17,33,.18), 0 12px 26px -12px rgba(42,110,158,.7);
  white-space: nowrap;
}
.btn:hover  { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(7,17,33,.2), 0 20px 38px -14px rgba(42,110,158,.85); background: var(--accent-dk); }
.btn:active { transform: translateY(0); }

/* the arrow slides on hover */
.btn__arrow { transition: transform .35s var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--navy);
  border-color: var(--hair-hard);
  box-shadow: none;
}
.btn--ghost:hover { background: rgba(19,41,75,.05); border-color: var(--navy); box-shadow: none; }

.on-dark .btn--ghost {
  --btn-fg: var(--snow);
  border-color: var(--hair-dark2);
}
.on-dark .btn--ghost:hover { background: rgba(122,167,212,.13); border-color: var(--sky); }

.btn--lg { padding: 16px 28px; font-size: 1rem; }

/* ===========================================================================
   NAV
   ======================================================================== */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  transition: background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(7,17,33,.78);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
          backdrop-filter: blur(20px) saturate(160%);
  border-bottom-color: var(--hair-dark);
}
.nav__in {
  display: flex;
  align-items: center;
  gap: 30px;
  height: 84px;
}
.nav__logo { display: flex; align-items: center; }
.nav__logo img { height: 42px; width: auto; }
.nav__links {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: auto;
}
.nav__link {
  color: var(--frost);
  font-size: .93rem;
  font-weight: 500;
  letter-spacing: -.008em;
  position: relative;
  padding-block: 6px;
  transition: color .25s ease;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--sky);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease-out);
}
.nav__link:hover { color: #fff; }
.nav__link:hover::after { transform: scaleX(1); }

.nav__cta { padding: 10px 18px; font-size: .9rem; }

.nav__burger {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--hair-dark2);
  border-radius: 999px;
  padding: 9px 16px;
  color: var(--snow);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}


/* ===========================================================================
   THE INDUSTRIES DROPDOWN

   Opens on hover on a pointer device and on click everywhere, so it works on
   a touchscreen and from a keyboard without a second implementation. The
   bridge is the padding on .navdrop__menu's top gap: without it the pointer
   crosses dead space between the button and the menu and the menu closes
   under the cursor.
   ======================================================================== */

.navdrop { position: relative; display: flex; align-items: center; }
.navdrop__btn {
  background: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: inherit;
  font-size: .93rem;
  font-weight: 500;
  letter-spacing: -.008em;
  color: var(--frost);
  padding-block: 6px;
}
.navdrop__link { display: inline-flex; align-items: center; gap: 7px; }
.navdrop.is-here > .navdrop__btn,
.navdrop.is-here > .navdrop__link { color: #fff; }
.navdrop.is-here > .navdrop__btn::after,
.navdrop.is-here > .navdrop__link::after { transform: scaleX(1); }

.navdrop__chev {
  width: 6px; height: 6px;
  border-right: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: .7;
  transition: transform .3s var(--ease);
}
.navdrop.is-open .navdrop__chev { transform: translateY(1px) rotate(225deg); }

.navdrop__menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  translate: -50% 0;
  min-width: 310px;
  padding: 8px;
  border-radius: var(--r);
  background: rgba(9, 20, 38, .97);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
          backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--hair-dark2);
  box-shadow: 0 24px 60px -18px rgba(0,0,0,.8);
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .25s var(--ease), transform .25s var(--ease-out), visibility .25s;
}
/* the bridge across the gap, so the pointer never leaves the hover target */
.navdrop__menu::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -16px; height: 16px;
}
.navdrop:hover .navdrop__menu,
.navdrop.is-open .navdrop__menu,
.navdrop:focus-within .navdrop__menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* A long menu goes two-up rather than off the bottom of the screen. */
.navdrop__menu--wide {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 4px;
  min-width: 620px;
}

.navdrop__item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 13px 12px;
  border-radius: 9px;
  color: var(--snow);
  transition: background .25s ease;
}
.navdrop__item:hover { background: rgba(75,156,211,.16); }
.navdrop__n { font-size: .95rem; font-weight: 600; letter-spacing: -.014em; }
.navdrop__d { font-size: .78rem; color: var(--dusk); line-height: 1.4; }

/* On the phone the menu is not a menu: the burger panel is already a list,
   so the children join it inline rather than opening a layer over a layer. */
@media (max-width: 860px) {
  .navdrop { display: block; width: 100%; }
  /* The button has nothing behind it, so it goes. The link is a real page
     and has to survive, chevron dropped since nothing here folds. */
  .navdrop__btn { display: none; }
  .navdrop__link { display: block; margin-bottom: 14px; }
  .navdrop__link .navdrop__chev { display: none; }
  .navdrop__menu {
    position: static;
    translate: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    gap: 14px;
  }
  .navdrop__menu::before { display: none; }
  /* One column again on the phone, where the burger list is already vertical. */
  .navdrop__menu--wide { display: flex; min-width: 0; }
  .navdrop__item { padding: 0; }
  .navdrop__item:hover { background: none; }
  .navdrop__n { font-size: .93rem; font-weight: 500; color: var(--frost); }
  .navdrop__d { display: none; }
}

/* the drawn terminal, at the size a feature pane gives it */
.vterm--lg { padding: 20px 22px 22px; gap: 12px; }
.vterm--lg .vterm__head { padding-bottom: 13px; }
.vterm--lg .vterm__title { font-size: 1.06rem; }
.vterm--lg .vterm__biz { font-size: .76rem; }
.vterm--lg .vterm__row { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; }
.vterm--lg .vterm__l { font-size: .64rem; }
.vterm--lg .vterm__in { font-size: .88rem; padding: 9px 12px; }
.vterm--lg .vterm__seg b, .vterm--lg .vterm__seg i { font-size: .8rem; padding: 6px 4px; }
.vterm--lg .vterm__card { width: min(100%, 330px); padding: 18px 20px 19px; gap: 10px; }
.vterm--lg .vterm__brand { font-size: 1.3rem; }
.vterm--lg .vterm__pan { font-size: 1.1rem; }
.vterm--lg .vterm__meta { font-size: .7rem; }
.vterm--lg .vterm__price { padding: 12px 15px 13px; }
.vterm--lg .vterm__k { font-size: .64rem; }
.vterm--lg .vterm__v { font-size: 1.32rem; }
.vterm--lg .vterm__go { font-size: .92rem; padding: 12px; }

/* ===========================================================================
   HERO
   ======================================================================== */

.hero {
  position: relative;
  background: var(--abyss);
  padding-top: clamp(112px, 12vw, 150px);
  padding-bottom: clamp(76px, 9vw, 116px);
  overflow: hidden;
}
.hero__in { position: relative; z-index: 2; }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, .93fr) minmax(0, 1.07fr);
  gap: clamp(36px, 4vw, 60px);
  align-items: center;
}

.plate__url {
  margin-left: 14px;
  font-family: var(--mono);
  font-size: .6rem; letter-spacing: .04em; color: var(--mute);
  background: #fff; border: 1px solid var(--hair); border-radius: 999px;
  padding: 3px 13px;
}

.hero__copy { display: flex; flex-direction: column; gap: 26px; align-items: flex-start; }
.hero__lede { max-width: 58ch; }
.hero__copy h1 { color: var(--snow); }
.hero__copy h1 .sky { color: var(--sky); }

.hero__lede { color: var(--frost); font-size: clamp(1.04rem, 1.5vw, 1.2rem); line-height: 1.55; max-width: 52ch; }

.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; }

/* the strip of figures under the fold line */
.hero__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: clamp(44px, 5vw, 72px);
  border-top: 1px solid var(--hair-dark);
  position: relative;
  z-index: 2;
}
.stat { padding: 26px 26px 4px 0; border-right: 1px solid var(--hair-dark); }
.stat:last-child { border-right: 0; }
.stat:not(:first-child) { padding-left: 26px; }
.stat__n {
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  font-weight: 700;
  letter-spacing: -.035em;
  color: var(--snow);
  line-height: 1;
}
.stat__n .unit { color: var(--sky); }
.stat__l { margin-top: 9px; font-size: .87rem; color: var(--dusk); line-height: 1.42; }

/* ── the hero composite: the product in the window it runs in ─────── */
.composite {
  position: relative;
  margin-right: calc(var(--gut) * -1);
}
.composite__inner { position: relative; }

.appwin {
  border-radius: var(--r);
  overflow: hidden;
  background: var(--paper);
  border: 1px solid rgba(255,255,255,.20);
  box-shadow: var(--shadow-dark);
}
.appwin__bar {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-inline: 13px;
  background: linear-gradient(180deg, #FBFDFF, #EDF4FA);
  border-bottom: 1px solid var(--hair);
}
.appwin__bar i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--hair-hard); display: block; flex: none;
}
.appwin__url {
  margin-left: 14px;
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .04em;
  color: var(--mute);
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 999px;
  padding: 3px 12px;
}
.appwin__body { display: grid; grid-template-columns: 116px minmax(0, 1fr); }

.appwin__rail {
  /* The real rail: a navy gradient, an icon against every label, and an
     active item that is a TINT with a hairline ring rather than a solid
     slab -- on a navy ground a full-strength fill reads as a button
     somebody forgot to remove. Matched to .rail / .navitem in the app. */
  background: linear-gradient(172deg, var(--navy) 0%, #0A1730 100%);
  padding: 10px 8px 14px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.appwin__brand {
  padding: 4px 8px 10px;
  margin-bottom: 4px;
}
.appwin__brand img { height: 13px; width: auto; }
.railitem {
  font-size: .565rem;
  font-weight: 500;
  letter-spacing: -.004em;
  color: rgba(255,255,255,.72);
  padding: 5px 8px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.railitem i {
  font-style: normal;
  width: 9px;
  text-align: center;
  opacity: .85;
  flex: none;
  font-size: .58rem;
}
.railitem.is-on {
  background: rgba(75,156,211,.22);
  color: #fff;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(123,175,212,.34);
}

.appwin__main {
  padding: 11px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  background: var(--paper);
}
.appwin__main img {
  width: 100%;
  border-radius: 6px;
  border: 1px solid var(--hair);
  background: #fff;
}
/* the route band is cropped to a strip so the window keeps its proportion */
.appwin__main .crop { max-height: 62px; object-fit: cover; object-position: top left; }

@keyframes bob {
  0%,100% { transform: translate3d(0,0,0); }
  50%     { transform: translate3d(0,-13px,0); }
}

/* the agent chip that floats over the composite */
.agent-chip {
  position: absolute;
  z-index: 4;
  right: -3%;
  top: -7%;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 17px 11px 13px;
  border-radius: 999px;
  background: rgba(7,17,33,.86);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  border: 1px solid rgba(122,167,212,.42);
  box-shadow: 0 20px 46px -18px rgba(0,0,0,.85);
  color: var(--snow);
  font-size: .85rem;
  font-weight: 500;
  white-space: nowrap;
  animation: bob 8s ease-in-out infinite;
  animation-delay: -2s;
}
.agent-chip__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--sky);
  flex: none;
  box-shadow: 0 0 0 0 rgba(75,156,211,.65);
  animation: ping 2.4s var(--ease-out) infinite;
}
@keyframes ping {
  0%   { box-shadow: 0 0 0 0 rgba(75,156,211,.6); }
  70%  { box-shadow: 0 0 0 11px rgba(75,156,211,0); }
  100% { box-shadow: 0 0 0 0 rgba(75,156,211,0); }
}


/* ===========================================================================
   THE VIRTUAL TERMINAL, DRAWN

   The hero shows the terminal taking a payment. It is markup rather than a
   screenshot for one reason: the only capture that exists is a 1268x128 strip
   of the totals, and a hero has to be sharp on a Retina display at every
   width. Fields, the method row and the two prices are the real screen's.
   ======================================================================== */

.vterm {
  background: var(--paper);
  padding: 13px 14px 15px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.vterm__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--hair);
}
.vterm__title { font-size: .82rem; font-weight: 700; color: var(--navy); letter-spacing: -.018em; }
.vterm__biz { font-size: .58rem; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.vterm__row { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 10px; align-items: center; }
.vterm__l {
  font-family: var(--mono);
  font-size: .53rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mute);
}
.vterm__in {
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 6px;
  padding: 6px 9px;
  font-size: .66rem;
  color: var(--navy);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* the method row: a segmented control, Card selected */
.vterm__seg {
  display: flex;
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 6px;
  padding: 2px;
  gap: 2px;
}
.vterm__seg b, .vterm__seg i {
  flex: 1;
  text-align: center;
  font-style: normal;
  font-size: .6rem;
  padding: 4px 2px;
  border-radius: 4px;
  color: var(--steel);
  font-weight: 500;
}
.vterm__seg b { background: var(--accent); color: #fff; font-weight: 600; }

/* the card face that reads the number as it is typed */
.vterm__card {
  /* A payment card is 85.60 x 53.98mm - 1.586:1. Left to size itself off its
     contents this face came out at 4.6:1, which reads as a stretched
     rectangle rather than a card. */
  width: min(100%, 252px);
  margin-inline: auto;
  aspect-ratio: 1.586;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 7px;
  padding: 13px 14px 14px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--navy) 0%, #0A1730 100%);
  box-shadow: 0 6px 18px -8px rgba(19,41,75,.6);
  margin-top: 2px;
}
/* The brand reads as a mark rather than a caption: bigger than the rest of
   the face, and the only thing on it set that heavy. */
.vterm__brand {
  font-size: 1.05rem; font-weight: 700; letter-spacing: .1em;
  color: var(--sky); line-height: 1;
}
.vterm__pan {
  font-size: .78rem; letter-spacing: .06em; color: #fff; font-weight: 500;
}
.vterm__pan b { color: #fff; font-weight: 700; }
.vterm__meta {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: .53rem; letter-spacing: .07em; color: rgba(184,206,228,.8);
}

/* the two prices, sitting together and always adding up */
.vterm__prices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
  border-radius: 7px;
  overflow: hidden;
  margin-top: 2px;
}
.vterm__price { background: #fff; padding: 8px 10px 9px; display: flex; flex-direction: column; gap: 2px; }
.vterm__price--card { background: var(--band, #E6F0F8); }
.vterm__k {
  font-family: var(--mono);
  font-size: .5rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mute);
}
.vterm__v { font-size: .92rem; font-weight: 700; color: var(--navy); letter-spacing: -.026em; }
.vterm__price--card .vterm__v { color: var(--accent); }

.vterm__go {
  display: block;
  text-align: center;
  background: var(--accent);
  color: #fff;
  font-size: .68rem;
  font-weight: 600;
  padding: 8px;
  border-radius: 999px;
  margin-top: 3px;
}

/* the approval, floating a moment later */
.approved {
  position: absolute;
  z-index: 4;
  left: -7%;
  bottom: -11%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px 14px 15px;
  border-radius: var(--r);
  background: #fff;
  border: 1px solid var(--hair);
  box-shadow: 0 2px 6px rgba(7,17,33,.12), 0 28px 56px -20px rgba(7,17,33,.65);
  animation: bob 7s ease-in-out infinite;
  animation-delay: -3.4s;
}
.approved__tick {
  width: 30px; height: 30px; flex: none;
  border-radius: 50%;
  background: var(--green-bg);
  color: var(--green);
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem; font-weight: 700;
}
.approved__body { display: flex; flex-direction: column; gap: 1px; }
.approved__body b { font-size: .86rem; color: var(--navy); letter-spacing: -.016em; }
.approved__body > .num { font-size: .78rem; color: var(--ink-2); }
.approved__d { font-size: .68rem; color: var(--mute); }

@media (max-width: 860px) {
  .approved { left: -2%; bottom: -8%; padding: 11px 15px 11px 12px; }
  .approved__body b { font-size: .78rem; }
  .approved__body > .num { font-size: .7rem; }
}
@media (max-width: 560px) {
  .approved { position: static; margin-top: 14px; animation: none; }
}

/* ===========================================================================
   MARQUEE — the trades
   ======================================================================== */

.marquee {
  background: var(--navy);
  border-block: 1px solid var(--hair-dark);
  padding-block: 22px;
  overflow: hidden;
  position: relative;
}
.marquee::before, .marquee::after {
  content: "";
  position: absolute; top: 0; bottom: 0; width: 12vw; z-index: 2;
  pointer-events: none;
}
.marquee::before { left: 0;  background: linear-gradient(90deg, var(--navy), transparent); }
.marquee::after  { right: 0; background: linear-gradient(270deg, var(--navy), transparent); }
.marquee__track {
  display: flex;
  gap: 0;
  width: max-content;
  animation: slide 46s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee__item {
  display: flex;
  align-items: center;
  gap: 34px;
  padding-inline: 17px;
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--frost);
  white-space: nowrap;
}
.marquee__item::after {
  content: "";
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--sky); opacity: .55;
}

/* ===========================================================================
   PLATE — a product screen presented as evidence
   ======================================================================== */

.plate { display: flex; flex-direction: column; gap: 12px; }
.plate__frame {
  border-radius: var(--r);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--hair-hard);
  box-shadow: var(--shadow);
}
.on-dark .plate__frame { border-color: rgba(255,255,255,.16); box-shadow: var(--shadow-dark); }
.plate__frame img { width: 100%; }
.plate__cap {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mute);
  display: flex;
  gap: 9px;
  align-items: baseline;
}
.on-dark .plate__cap { color: var(--dusk); }
.plate__cap b { color: var(--accent); font-weight: 500; }
.on-dark .plate__cap b { color: var(--sky); }

/* a chrome bar so a cropped band still reads as a screen */
.plate__chrome {
  height: 32px;
  background: linear-gradient(180deg, #FBFDFF, #F1F6FB);
  border-bottom: 1px solid var(--hair);
  display: flex;
  align-items: center;
  gap: 6px;
  padding-inline: 13px;
}
.plate__chrome i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--hair-hard);
  display: block;
}


/* ── the wedge: two columns, then the ledger that names the change ─── */
.two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3.5vw, 56px);
}
.two-col .body-copy { max-width: none; }

.ledger {
  border: 1px solid var(--hair);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow);
}
.ledger__row {
  display: grid;
  grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 40px);
  padding: 19px clamp(20px, 3vw, 30px);
  border-bottom: 1px solid var(--hair);
  align-items: baseline;
}
.ledger__row:last-child { border-bottom: 0; }
.ledger__row--on {
  background: linear-gradient(90deg, rgba(75,156,211,.10), rgba(75,156,211,.02));
  box-shadow: inset 3px 0 0 var(--sky);
}
.ledger__k {
  font-family: var(--mono);
  font-size: .69rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--mute);
}
.ledger__row--on .ledger__k { color: var(--accent); }
.ledger__v { color: var(--steel); font-size: .97rem; line-height: 1.5; }
.ledger__row--on .ledger__v { color: var(--navy); font-weight: 500; }

/* ===========================================================================
   THE VAULT
   ======================================================================== */

.vault-figure {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 30px 34px;
  border-radius: var(--r-lg);
  background: linear-gradient(150deg, rgba(75,156,211,.15), rgba(75,156,211,.03));
  border: 1px solid var(--hair-dark2);
}
.vault-figure__n {
  font-size: clamp(2.8rem, 7vw, 4.8rem);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1;
  color: var(--snow);
}
.vault-figure__l { color: var(--frost); font-size: .97rem; }

/* the four-step pipeline */
.pipe {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--hair-dark);
  border: 1px solid var(--hair-dark);
  border-radius: var(--r);
  overflow: hidden;
}
.step {
  background: var(--navy);
  padding: 22px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  cursor: pointer;
  transition: background .5s var(--ease);
  text-align: left;
  border: 0;
  position: relative;
}
.step::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--sky);
  transform: scaleX(0); transform-origin: left;
  transition: transform .55s var(--ease);
}
.step.is-on { background: var(--navy-lift); }
.step.is-on::before { transform: scaleX(1); }
.step__i {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  color: var(--dusk);
}
.step.is-on .step__i { color: var(--sky); }
.step__t { font-size: 1.06rem; font-weight: 600; letter-spacing: -.018em; color: var(--snow); }
.step__d { font-size: .87rem; line-height: 1.45; color: var(--frost); }

/* ===========================================================================
   THE AGENT
   ======================================================================== */

.badge-soon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--hair-dark2);
  background: rgba(75,156,211,.11);
  font-family: var(--mono);
  font-size: .67rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sky);
  align-self: flex-start;
}
.badge-soon i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--sky); display: block;
  animation: ping 2.4s var(--ease-out) infinite;
}

.agent-grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  gap: clamp(36px, 4.5vw, 68px);
  align-items: start;
}

/* the prompt chips you can press */
.prompt-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid var(--hair-dark2);
  background: rgba(255,255,255,.03);
  color: var(--frost);
  font-size: .86rem;
  font-weight: 500;
  cursor: pointer;
  transition: all .3s var(--ease);
  text-align: left;
}
.chip:hover { border-color: var(--sky); color: #fff; background: rgba(75,156,211,.12); }
.chip.is-on { background: var(--sky); border-color: var(--sky); color: var(--abyss); font-weight: 600; }

/* the builder panel */
.builder {
  border-radius: var(--r-lg);
  border: 1px solid var(--hair-dark2);
  background: linear-gradient(165deg, rgba(27,53,92,.92), rgba(7,17,33,.92));
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
  box-shadow: var(--shadow-dark);
  overflow: hidden;
}
.builder__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--hair-dark);
  font-family: var(--mono);
  font-size: .69rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--dusk);
}
.builder__bar .mark {
  width: 17px; height: 17px; flex: none;
}
.builder__body { padding: 22px 20px 24px; display: flex; flex-direction: column; gap: 18px; }

.prompt-line {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 15px 17px;
  border-radius: var(--r);
  background: rgba(122,167,212,.10);
  border: 1px solid var(--hair-dark);
}
.prompt-line__who {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dusk);
  padding-top: 3px;
  flex: none;
}
.prompt-line__txt {
  color: var(--snow);
  font-size: .98rem;
  line-height: 1.5;
  min-height: 1.5em;
}
.caret {
  display: inline-block;
  width: 2px; height: 1.05em;
  background: var(--sky);
  vertical-align: -.16em;
  margin-left: 2px;
  animation: blink 1.05s steps(1) infinite;
}
@keyframes blink { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } }

.thinking {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--mono);
  font-size: .69rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--dusk);
  min-height: 18px;
}
.thinking[hidden] { display: none; }
.thinking i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--sky); display: block;
  animation: pulse 1.3s ease-in-out infinite;
}
.thinking i:nth-child(2) { animation-delay: .16s; }
.thinking i:nth-child(3) { animation-delay: .32s; }
@keyframes pulse { 0%,100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }

/* the assembled automation */
.auto { display: flex; flex-direction: column; gap: 9px; }
.node {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 14px;
  align-items: start;
  padding: 13px 15px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.045);
  border: 1px solid var(--hair-dark);
  border-left: 2px solid var(--sky);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.node.is-in { opacity: 1; transform: none; }
.node--when  { border-left-color: var(--sky); }
.node--if    { border-left-color: #C79A2E; }
.node--then  { border-left-color: var(--green); }
.node__k {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dusk);
  padding-top: 3px;
}
.node--when .node__k { color: var(--sky); }
.node--if   .node__k { color: #E0B84E; }
.node--then .node__k { color: #5BC7A2; }
.node__v { color: var(--snow); font-size: .93rem; line-height: 1.5; }
.node__v ul { margin: 0; padding-left: 17px; display: flex; flex-direction: column; gap: 4px; }
.node__v li::marker { color: var(--dusk); }

.builder__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 4px;
  opacity: 0;
  transition: opacity .5s var(--ease-out) .1s;
}
.builder__foot.is-in { opacity: 1; }
.btn--mini { padding: 9px 16px; font-size: .84rem; box-shadow: none; }
.foot-note { font-size: .8rem; color: var(--dusk); }

/* the four things the agent is, as a list rather than cards */
.rails { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--hair-dark); border: 1px solid var(--hair-dark); border-radius: var(--r); overflow: hidden; }
.rail {
  background: var(--abyss);
  padding: 24px 24px 26px;
  display: flex; flex-direction: column; gap: 8px;
}
.rail__k { font-family: var(--mono); font-size: .67rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sky); }
.rail__t { font-size: 1.02rem; font-weight: 600; color: var(--snow); letter-spacing: -.016em; }
.rail__d { font-size: .89rem; line-height: 1.5; color: var(--frost); }

/* ===========================================================================
   THE STICKY FEATURE SCROLLER
   ======================================================================== */

.scroller {
  display: grid;
  grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
  gap: clamp(36px, 5vw, 76px);
  align-items: start;
}
.scroller__text { display: flex; flex-direction: column; }
.feat {
  padding-block: clamp(38px, 8vh, 84px);
  display: flex; flex-direction: column; gap: 15px;
  border-top: 1px solid var(--hair);
  opacity: .4;
  transition: opacity .5s var(--ease);
}
.feat:first-child { border-top: 0; padding-top: 0; }
.feat.is-on { opacity: 1; }
.feat__k {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--mute);
  transition: color .4s ease;
}
.feat.is-on .feat__k { color: var(--accent); }
.feat__d { color: var(--steel); font-size: .99rem; line-height: 1.6; max-width: 46ch; }
.feat__list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px; }
.tag {
  font-size: .78rem;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--hair);
  color: var(--ink-2);
  font-weight: 500;
}

.scroller__pane {
  position: sticky;
  top: 116px;
  display: grid;
}
.pane-shot {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(14px) scale(.985);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
  pointer-events: none;
}
.pane-shot.is-on { opacity: 1; transform: none; pointer-events: auto; }


/* ===========================================================================
   DISPATCH AND ROUTING
   ======================================================================== */

.inline-link {
  color: var(--accent);
  font-weight: 500;
  white-space: nowrap;
  border-bottom: 1px solid rgba(42,110,158,.35);
  transition: border-color .25s ease;
}
.inline-link:hover { border-bottom-color: var(--accent); }
.on-dark .inline-link { color: var(--sky); border-bottom-color: rgba(75,156,211,.4); }
.on-dark .inline-link:hover { border-bottom-color: var(--sky); }

.views { display: flex; flex-wrap: wrap; gap: 8px; }
.viewpill {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--hair-dark2);
  background: rgba(255,255,255,.03);
  color: var(--frost);
  font-size: .87rem;
  font-weight: 500;
}
.viewpill.is-on {
  background: rgba(75,156,211,.22);
  border-color: rgba(123,175,212,.55);
  color: #fff;
  font-weight: 600;
}

.dispatch-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: clamp(36px, 4.5vw, 68px);
  align-items: start;
}

/* The numbered flow. These ARE steps in order — 04 cannot happen before 03 —
   so the numbering carries information rather than decorating the block. */
.flow { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.flow__step {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid var(--hair-dark);
}
.flow__step:first-child { border-top: 0; padding-top: 0; }
.flow__n {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .1em;
  color: var(--dusk);
  padding-top: 3px;
}
.flow__step--key .flow__n { color: var(--sky); }
.flow__b { color: var(--frost); font-size: .95rem; line-height: 1.6; }
.flow__b b { display: block; color: var(--snow); font-weight: 600; margin-bottom: 4px; letter-spacing: -.012em; }
.flow__step--key .flow__b b { color: var(--sky); }

/* the optimizer, drawn as it actually asks */
.optpanel {
  border-radius: var(--r-lg);
  border: 1px solid var(--hair-dark2);
  background: linear-gradient(165deg, rgba(27,53,92,.94), rgba(7,17,33,.94));
  box-shadow: var(--shadow-dark);
  overflow: hidden;
}
.optpanel__bar {
  padding: 13px 18px;
  border-bottom: 1px solid var(--hair-dark);
  font-family: var(--mono);
  font-size: .69rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--dusk);
}
.optpanel__fields { padding: 6px 18px; }
.optrow {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 0;
  border-bottom: 1px solid var(--hair-dark);
  font-size: .9rem;
}
.optrow:last-child { border-bottom: 0; }
.optrow span { color: var(--dusk); }
.optrow b { color: var(--snow); font-weight: 500; }

.optpanel__totals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hair-dark);
  border-block: 1px solid var(--hair-dark);
}
.optpanel__totals > div {
  background: rgba(75,156,211,.09);
  padding: 14px 18px 15px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.optpanel__totals b { font-size: 1.16rem; font-weight: 700; color: var(--snow); letter-spacing: -.028em; }
.optpanel__k {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--dusk);
}

.optpanel__moves { padding: 16px 18px 4px; display: flex; flex-direction: column; gap: 9px; }
.move {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 58px;
  gap: 12px;
  align-items: baseline;
  font-size: .87rem;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--hair-dark);
}
.move:last-child { border-bottom: 0; }
.move span { color: var(--frost); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.move b { color: var(--snow); font-weight: 500; }
.move i { font-style: normal; text-align: right; font-weight: 600; }
/* Earlier and later, not good and bad — a stop moving is a fact, not a fault,
   which is why neither of these is the warning red. */
.move .down { color: #5BC7A2; }
.move .up   { color: #E0B84E; }

.optpanel__foot {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 16px 18px 18px;
  border-top: 1px solid var(--hair-dark);
}
.optpanel__foot .btn--mini { cursor: default; }


/* ===========================================================================
   THE DISPATCH BOARD

   Full width, and drawn rather than captured: the only screenshot of this
   screen has an empty grey rectangle where the map should be, because the
   tile layer had not painted when it was taken. What is drawn is the real
   screen -- crew rows with distance, drive time, Directions and Undo; the
   stops in route order; and the notice naming what could not be mapped.

   THE UNMAPPED NOTICE IS NOT DECORATION. A board that silently shows nine of
   a crew's twelve stops reads as a light day and somebody dispatches on it,
   so the count sits in the summary strip as well.
   ======================================================================== */

/* the summary strip now sits under the real screenshot */
.board__legend {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--hair-dark);
  border: 1px solid var(--hair-dark);
  border-radius: var(--r);
  overflow: hidden;
}
.board__legend .bstat { background: var(--navy); }
.board__legend .bstat__k { color: var(--dusk); }
.board__legend .bstat__v { color: var(--snow); }
.board__legend .bstat--warn { background: rgba(138,97,0,.22); }
.board__legend .bstat--warn .bstat__v { color: #E0B84E; }
.plate--wide .plate__frame { box-shadow: var(--shadow-dark); }

.board {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: var(--shadow-dark);
}

.board__bar {
  height: 40px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-inline: 16px;
  background: linear-gradient(180deg, #FBFDFF, #EDF4FA);
  border-bottom: 1px solid var(--hair);
}
.board__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--hair-hard); flex: none; }
.board__url {
  margin-left: 14px;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .04em; color: var(--mute);
  background: #fff; border: 1px solid var(--hair); border-radius: 999px; padding: 4px 14px;
}
.board__view {
  margin-left: auto;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .13em; text-transform: uppercase;
  color: #fff; background: var(--accent); border-radius: 999px; padding: 4px 13px;
}

/* what actually went out today */
.board__summary {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--hair);
  border-bottom: 1px solid var(--hair);
}
.bstat { background: #fff; padding: 14px 18px 15px; display: flex; flex-direction: column; gap: 3px; }
.bstat__k {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--mute);
}
.bstat__v { font-size: 1.24rem; font-weight: 700; color: var(--navy); letter-spacing: -.03em; }
/* amber, not red: three unmapped stops is something to look at, not a fault */
.bstat--warn { background: var(--amber-bg); }
.bstat--warn .bstat__v { color: var(--amber); }

.board__body { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); }

/* the day, in route order */
.board__list { border-right: 1px solid var(--hair); background: #fff; }
.board__lhead {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 14px 18px 13px;
  border-bottom: 1px solid var(--hair);
  font-size: .88rem; font-weight: 600; color: var(--navy);
}
.board__sub { font-size: .72rem; font-weight: 400; color: var(--mute); }

.bstop {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 11px 18px;
  border-bottom: 1px solid var(--hair);
}
.bstop__n {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 700; color: #fff;
}
.bstop--b .bstop__n { background: #2FA37A; }
.bstop--c .bstop__n { background: #A6531C; }
.bstop__who { font-size: .84rem; font-weight: 600; color: var(--navy); min-width: 0; }
.bstop__who span {
  display: block; font-weight: 400; font-size: .74rem; color: var(--steel);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bstop__t { font-size: .78rem; color: var(--steel); }
.board__more {
  padding: 12px 18px; font-size: .78rem; color: var(--accent); font-weight: 600;
}

/* the map, and the crews on it */
.board__map { display: flex; flex-direction: column; background: #fff; min-width: 0; }
.board__crews {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--hair);
}
.bcrew {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 13px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: var(--paper);
  font-size: .78rem;
}
.bcrew__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.bcrew--b .bcrew__dot { background: #2FA37A; }
.bcrew--c .bcrew__dot { background: #A6531C; }
.bcrew__n { font-weight: 600; color: var(--navy); }
.bcrew__m { color: var(--steel); }
.bcrew__a { color: var(--accent); font-weight: 500; text-decoration: underline; }
.bcrew__u { color: var(--steel); }
.bcrew__go {
  margin-left: auto;
  padding: 7px 15px;
  border: 1px solid var(--hair-hard);
  border-radius: 999px;
  font-size: .78rem; font-weight: 600; color: var(--navy);
  white-space: nowrap;
}

.bmap { display: block; width: 100%; height: auto; }

.board__unmapped {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 18px 14px;
  border-top: 1px solid var(--hair);
  background: var(--amber-bg);
  font-size: .82rem; line-height: 1.45; color: var(--ink-2);
}
.board__unmapped b { color: var(--amber); }
.board__unmapped u { color: var(--accent); text-decoration-color: rgba(42,110,158,.4); }
.board__warn {
  width: 19px; height: 19px; border-radius: 50%; flex: none;
  background: var(--amber); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700;
  margin-top: 1px;
}

@media (max-width: 1040px) {
  .board__summary, .board__legend { grid-template-columns: repeat(3, 1fr); }
  .board__body { grid-template-columns: 1fr; }
  .board__list { border-right: 0; border-bottom: 1px solid var(--hair); }
  .bcrew__go { margin-left: 0; }
}
@media (max-width: 560px) {
  .board__summary, .board__legend { grid-template-columns: repeat(2, 1fr); }
  .bcrew__m { display: none; }
}

/* ===========================================================================
   PAYMENTS — the price comparison
   ======================================================================== */

.pay-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: clamp(36px, 5vw, 68px);
  align-items: center;
}

.programs { display: flex; gap: 8px; flex-wrap: wrap; }

.ticket {
  border-radius: var(--r-lg);
  background: var(--white);
  border: 1px solid var(--hair);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}
.ticket__head {
  padding: 18px 22px;
  border-bottom: 1px solid var(--hair);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: linear-gradient(180deg, #FBFDFF, #F3F8FC);
}
.ticket__biz { font-weight: 600; color: var(--navy); letter-spacing: -.015em; }
.ticket__no { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; color: var(--mute); }
.ticket__lines { padding: 6px 22px; }
.tline {
  display: grid; grid-template-columns: 1fr auto; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid var(--hair);
  font-size: .92rem;
}
.tline:last-child { border-bottom: 0; }
.tline span { color: var(--ink-2); }
.tline b { font-weight: 500; color: var(--navy); }
.ticket__totals {
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--hair);
}
.tot {
  padding: 18px 22px 20px;
  display: flex; flex-direction: column; gap: 3px;
}
.tot + .tot { border-left: 1px solid var(--hair); }
.tot--card { background: var(--paper); }
.tot__k { font-family: var(--mono); font-size: .66rem; letter-spacing: .13em; text-transform: uppercase; color: var(--mute); }
.tot__v { font-size: 1.62rem; font-weight: 700; letter-spacing: -.032em; color: var(--navy); }
.tot--card .tot__v { color: var(--accent); }
.tot__n { font-size: .78rem; color: var(--steel); min-height: 1.2em; }

/* ===========================================================================
   TRADES
   ======================================================================== */

.trade-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.trade-btn {
  padding: 10px 17px;
  border-radius: 999px;
  border: 1px solid var(--hair-hard);
  background: var(--white);
  color: var(--ink-2);
  font-size: .9rem; font-weight: 500;
  cursor: pointer;
  transition: all .28s var(--ease);
}
.trade-btn:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.trade-btn.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }

.trade-out {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  overflow: hidden;
}
.tcell { background: var(--white); padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 9px; min-height: 150px; }
.tcell__k { font-family: var(--mono); font-size: .67rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.tcell__v { font-size: 1.16rem; font-weight: 600; color: var(--navy); letter-spacing: -.02em; }
.tcell__n { font-size: .87rem; color: var(--steel); line-height: 1.5; }
.tcell__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tcell__go {
  margin-top: auto;
  padding-top: 8px;
  font-size: .86rem;
  font-weight: 600;
  color: var(--accent);
}
.tcell__go:hover { text-decoration: underline; }
.tcell__tags span {
  font-size: .77rem; padding: 4px 10px; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--hair); color: var(--ink-2);
}

/* ===========================================================================
   THE FOUR QUESTIONS
   ======================================================================== */

.qs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--hair-dark); border: 1px solid var(--hair-dark); border-radius: var(--r); overflow: hidden; }
.q { background: var(--navy); padding: 30px 30px 32px; display: flex; flex-direction: column; gap: 12px; transition: background .4s var(--ease); }
.q:hover { background: var(--navy-lift); }
.q__n { font-family: var(--mono); font-size: .7rem; letter-spacing: .16em; color: var(--sky); }
.q__q { font-size: 1.16rem; font-weight: 600; color: var(--snow); letter-spacing: -.02em; line-height: 1.3; }
.q__a { font-size: .92rem; line-height: 1.58; color: var(--frost); }

/* ===========================================================================
   CALCULATOR
   ======================================================================== */

.calc {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 4.5vw, 64px);
  align-items: center;
}
.sliders { display: flex; flex-direction: column; gap: 30px; }
.slider { display: flex; flex-direction: column; gap: 11px; }
.slider__top { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.slider__l { font-size: .93rem; color: var(--frost); }
.slider__v { font-size: 1.42rem; font-weight: 700; color: var(--snow); letter-spacing: -.03em; }

input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 3px; border-radius: 3px;
  background: var(--hair-dark2);
  cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--sky);
  border: 3px solid var(--abyss);
  box-shadow: 0 0 0 1px var(--sky), 0 5px 14px -4px rgba(75,156,211,.9);
  transition: transform .2s var(--ease);
}
input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.16); }
input[type=range]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--sky); border: 3px solid var(--abyss);
  box-shadow: 0 0 0 1px var(--sky);
}

.results { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--hair-dark); border: 1px solid var(--hair-dark); border-radius: var(--r); overflow: hidden; }
.res { background: var(--navy); padding: 24px 24px 26px; display: flex; flex-direction: column; gap: 6px; }
.res--hero { background: linear-gradient(150deg, rgba(75,156,211,.18), rgba(75,156,211,.04)); grid-column: 1 / -1; }
.res__k { font-family: var(--mono); font-size: .66rem; letter-spacing: .13em; text-transform: uppercase; color: var(--dusk); }
.res__v { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 700; letter-spacing: -.035em; color: var(--snow); line-height: 1.05; }
.res--hero .res__v { font-size: clamp(2.1rem, 4.6vw, 3.3rem); color: var(--sky); }
.res__n { font-size: .82rem; color: var(--dusk); line-height: 1.45; }

/* ===========================================================================
   CTA + FOOTER
   ======================================================================== */

.cta-final { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 26px; }
.cta-final .eyebrow { justify-content: center; }
.cta-final .lede { text-align: center; margin-inline: auto; }

.foot { background: var(--abyss); border-top: 1px solid var(--hair-dark); padding-block: 46px 40px; }
.foot__top { display: flex; flex-wrap: wrap; gap: 34px; justify-content: space-between; align-items: flex-start; }
.foot__logo img { height: 34px; }
.foot__cols { display: flex; flex-wrap: wrap; gap: clamp(30px, 6vw, 76px); }
.foot__col { display: flex; flex-direction: column; gap: 11px; }
.foot__h { font-family: var(--mono); font-size: .66rem; letter-spacing: .15em; text-transform: uppercase; color: var(--dusk); }
.foot__col a { color: var(--frost); font-size: .9rem; transition: color .25s ease; }
.foot__col a:hover { color: var(--sky); }
.foot__base {
  margin-top: 40px; padding-top: 22px;
  border-top: 1px solid var(--hair-dark);
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
  font-size: .8rem; color: var(--dusk);
}


/* ===========================================================================
   SUB-PAGES — pricing, industries index, and the twelve trade pages

   These share the index's bands and plates; what follows is only the parts
   that do not appear on the home page.
   ======================================================================== */

.t-h1 { font-size: clamp(2.2rem, 4.6vw, 3.9rem); line-height: 1.04; letter-spacing: -.034em; }

.subhero { padding-top: clamp(128px, 13vw, 168px); }
/* A wide screen band is a sliver in a side-by-side column, so this variant
   stacks: copy at reading width, plate across the whole wrap. */
/* A WHOLE APPLICATION SCREEN SHRUNK TO THE TEXT COLUMN IS LEGIBLE TO NOBODY.
   Any plate carrying a full screenshot breaks out past the wrap, so the spec
   chips, the reason lines and the warranty countdown can actually be read.
   1520 against a 3000px source is almost exactly 2x, which is also why the
   captures are saved at 3000. */
.plate--wide {
  width: min(1520px, calc(100vw - 2 * var(--gut)));
  margin-inline: calc((min(1520px, calc(100vw - 2 * var(--gut))) - 100%) / -2);
}
.plate--wide .plate__frame { box-shadow: var(--shadow-dark); }
.subhero--stacked .plate { width: min(1520px, calc(100vw - 2 * var(--gut)));
  margin-inline: calc((min(1520px, calc(100vw - 2 * var(--gut))) - 100%) / -2); }
.subhero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(36px, 4.5vw, 64px);
  align-items: center;
}

.nav__link.is-here { color: #fff; }
.nav__link.is-here::after { transform: scaleX(1); }

/* ── pricing ──────────────────────────────────────────────────────────── */

.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}

/* One plan rather than three. The three-column grid would stretch a single
   card the full width of the wrap, which reads as a banner rather than as a
   price, so it gets its own column width and sits centred. */
.plans--one {
  grid-template-columns: minmax(0, 420px);
  justify-content: center;
}
.plan {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 30px 28px 32px;
  background: var(--white);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.plan:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
/* The chosen plan is lifted by a ring in the accent, not by a colored slab:
   a filled card next to two white ones reads as an advertisement inside the
   price list rather than as one of the three options. */
.plan--on {
  border-color: var(--sky);
  box-shadow: 0 0 0 1px var(--sky), var(--shadow-lift);
}
.plan__top { display: flex; flex-direction: column; gap: 7px; }
.plan__name {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 1.28rem; font-weight: 700; color: var(--navy); letter-spacing: -.024em;
}
.plan__badge {
  font-family: var(--mono);
  font-size: .62rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--accent);
  background: rgba(75,156,211,.14);
  border: 1px solid rgba(75,156,211,.36);
  border-radius: 999px;
  padding: 4px 10px;
  font-weight: 500;
}
.plan__blurb { font-size: .93rem; color: var(--steel); line-height: 1.5; }
.plan__price { display: flex; align-items: baseline; gap: 9px; }
.plan__amt { font-size: 2.9rem; font-weight: 700; color: var(--navy); letter-spacing: -.042em; line-height: 1; }
.plan__unit { font-size: .88rem; color: var(--steel); }
.plan__seats {
  font-family: var(--mono);
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mute);
  padding-bottom: 4px;
}
.plan__cta { justify-content: center; }
.plan--on .plan__cta { background: var(--accent); }
.plan__feats { display: flex; flex-direction: column; gap: 11px; padding-top: 4px; border-top: 1px solid var(--hair); }
.plan__fh {
  font-family: var(--mono);
  font-size: .66rem; letter-spacing: .13em; text-transform: uppercase; color: var(--mute);
  padding-top: 14px;
}
.plan__feats ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.plan__feats li {
  position: relative;
  padding-left: 24px;
  font-size: .91rem;
  line-height: 1.45;
  color: var(--ink-2);
}
.plan__feats li::before {
  content: "";
  position: absolute; left: 4px; top: .52em;
  width: 9px; height: 5px;
  border-left: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(-45deg);
}
.plan__note { font-size: .82rem; color: var(--mute); margin-top: auto; }

.fineprint { font-size: .84rem; color: var(--mute); max-width: 64ch; }

.addons {
  border: 1px solid var(--hair);
  border-radius: var(--r);
  background: var(--white);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.addon {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 180px) minmax(0, 1fr);
  gap: clamp(14px, 2.5vw, 34px);
  padding: 19px clamp(20px, 3vw, 30px);
  border-bottom: 1px solid var(--hair);
  align-items: baseline;
}
.addon:last-child { border-bottom: 0; }
.addon__n { font-weight: 600; color: var(--navy); letter-spacing: -.014em; }
.addon__p { color: var(--accent); font-weight: 600; }
.addon__d { font-size: .91rem; color: var(--steel); line-height: 1.5; }

.faqs { border-top: 1px solid var(--hair); }
.faq { border-bottom: 1px solid var(--hair); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 21px 44px 21px 0;
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -.018em;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute; right: 8px; top: 50%;
  width: 9px; height: 9px;
  border-right: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .3s var(--ease);
}
.faq[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq p { padding: 0 0 22px; color: var(--steel); max-width: 72ch; line-height: 1.62; }

/* ── industries index ─────────────────────────────────────────────────── */

.icards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: 18px;
}
.icard {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 26px 26px 28px;
  background: var(--white);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .3s ease;
}
.icard:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--sky); }
.icard__k { font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.icard__n { font-size: 1.24rem; font-weight: 700; color: var(--navy); letter-spacing: -.024em; }
.icard__d { font-size: .9rem; line-height: 1.5; color: var(--steel); }
.icard__go { margin-top: auto; padding-top: 10px; font-size: .87rem; font-weight: 600; color: var(--accent); }

/* ── a trade page ─────────────────────────────────────────────────────── */

.flowwrap { max-width: 76ch; }

.two-up {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(32px, 4.5vw, 64px);
  align-items: start;
}

.ticks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.ticks li {
  position: relative;
  padding: 13px 0 13px 26px;
  border-bottom: 1px solid var(--hair);
  color: var(--ink-2);
  font-size: .95rem;
}
.ticks li:last-child { border-bottom: 0; }
.ticks li::before {
  content: "";
  position: absolute; left: 2px; top: 1.32em;
  width: 10px; height: 6px;
  border-left: 1.5px solid var(--sky);
  border-bottom: 1.5px solid var(--sky);
  transform: rotate(-45deg);
}

.autocards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.autocard {
  padding: 26px 26px 28px;
  border-radius: var(--r);
  border: 1px solid var(--hair-dark2);
  background: linear-gradient(165deg, rgba(27,53,92,.6), rgba(7,17,33,.6));
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.autocard__q {
  font-size: 1.04rem;
  font-weight: 600;
  color: var(--sky);
  line-height: 1.42;
  letter-spacing: -.016em;
}
.autocard__a { font-size: .92rem; line-height: 1.58; color: var(--frost); }

@media (max-width: 1040px) {
  .subhero__grid, .two-up { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; }
  .autocards { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .addon { grid-template-columns: 1fr; gap: 5px; }
}


/* ===========================================================================
   THE HOME PAGE'S SIX DOORS

   Every nav destination has a card here, so the home page is a map of the
   site rather than a place the site happens to start. The Vault's card is
   double-width and carries its figure, because it is the one thing on the
   list a competitor cannot answer.
   ======================================================================== */

.pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.pillar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 28px 30px;
  background: var(--white);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  position: relative;
  overflow: hidden;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .3s ease;
}
.pillar::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--sky);
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease-out);
}
.pillar:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--hair-hard); }
.pillar:hover::before { transform: scaleX(1); }

.pillar__k {
  font-family: var(--mono);
  font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
}
.pillar__t {
  font-size: 1.16rem; font-weight: 700; color: var(--navy);
  letter-spacing: -.024em; line-height: 1.22;
  text-wrap: balance;
}
.pillar__d { font-size: .92rem; line-height: 1.55; color: var(--steel); }
.pillar__go { margin-top: auto; padding-top: 12px; font-size: .88rem; font-weight: 600; color: var(--accent); }

.pillar--wide {
  grid-column: span 2;
  background: linear-gradient(140deg, var(--navy) 0%, var(--navy-deep, #0A1730) 100%);
  border-color: transparent;
}
.pillar--wide .pillar__k { color: var(--sky); }
.pillar--wide .pillar__t { color: var(--snow); font-size: 1.5rem; }
.pillar--wide .pillar__d { color: var(--frost); max-width: 46ch; }
.pillar--wide .pillar__go { color: var(--sky); }
.pillar--wide:hover { border-color: transparent; }
/* The figure sits in the corner the copy does not reach, so it reads as the
   card's evidence rather than as a heading competing with the title. Figure
   and caption are ONE positioned block: two separately anchored ones overlap
   the moment the caption wraps to a second line. */
.pillar__stat {
  position: absolute;
  right: 28px; bottom: 26px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
  max-width: 40%;
}
.pillar__fig {
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  font-weight: 700;
  letter-spacing: -.04em;
  color: var(--sky);
  line-height: 1;
}
.pillar__figl { font-size: .76rem; line-height: 1.4; color: var(--dusk); }

/* The last card spans the row rather than leaving two empty cells beside it,
   and turns horizontal to earn the width. */
.pillar--full {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr) auto;
  grid-template-areas: "k d go" "t d go";
  align-items: center;
  gap: 6px 44px;
}
.pillar--full .pillar__k  { grid-area: k; align-self: end; }
.pillar--full .pillar__t  { grid-area: t; align-self: start; }
.pillar--full .pillar__d  { grid-area: d; }
.pillar--full .pillar__go { grid-area: go; margin-top: 0; padding-top: 0; white-space: nowrap; }


/* ===========================================================================
   THE FORK — where the shared core stops and the two branches begin

   Platform ends here on purpose. A crew driving to forty addresses and a shop
   filling six bays need different software on top of the same money layer,
   and the page should say so rather than blur them into one feature list.
   ======================================================================== */

.forks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.fork {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 30px 30px 32px;
  border-radius: var(--r-lg);
  border: 1px solid var(--hair-dark2);
  background: linear-gradient(165deg, rgba(27,53,92,.72), rgba(7,17,33,.72));
  color: var(--snow);
  transition: transform .4s var(--ease-out), border-color .3s ease, background .4s var(--ease);
}
.fork:hover {
  transform: translateY(-5px) scale(1.018);
  border-color: var(--sky);
  background: linear-gradient(165deg, rgba(27,53,92,.92), rgba(7,17,33,.92));
}
.fork__k {
  font-family: var(--mono);
  font-size: .67rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sky);
}
.fork__t { font-size: 1.4rem; font-weight: 700; letter-spacing: -.026em; color: var(--snow); line-height: 1.16; }
.fork__l { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.fork__l li {
  position: relative;
  padding: 11px 0 11px 24px;
  border-bottom: 1px solid var(--hair-dark);
  font-size: .92rem;
  line-height: 1.45;
  color: var(--frost);
}
.fork__l li:last-child { border-bottom: 0; }
.fork__l li::before {
  content: "";
  position: absolute; left: 1px; top: 1.24em;
  width: 9px; height: 5px;
  border-left: 1.5px solid var(--sky);
  border-bottom: 1.5px solid var(--sky);
  transform: rotate(-45deg);
}
.fork__go { margin-top: auto; padding-top: 8px; font-size: .9rem; font-weight: 600; color: var(--sky); }

/* Forks on a paper band. The base .fork fills with navy at 72% alpha, which
   is right over --abyss and washes out to grey over paper. Same blue card,
   painted opaque so the ground underneath stops showing through. */
.forks--paper .fork {
  background: linear-gradient(165deg, var(--navy-lift), var(--abyss));
  border-color: var(--hair-dark2);
  box-shadow: var(--shadow);
}
.forks--paper .fork:hover {
  background: linear-gradient(165deg, #23426F, #0D1E38);
  border-color: var(--sky);
  box-shadow: var(--shadow-lift);
}

/* ── the light and dark variants the branch pages needed ──────────────── */

.trade-out--six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.trade-out--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.trade-out--dark { background: var(--hair-dark); border-color: var(--hair-dark); }
.trade-out--dark .tcell { background: var(--navy); }
.trade-out--dark .tcell__k { color: var(--sky); }
.trade-out--dark .tcell__v { color: var(--snow); }
.trade-out--dark .tcell__n { color: var(--frost); }

.icards--dark .icard {
  background: var(--navy-lift);
  border-color: var(--hair-dark2);
  color: var(--snow);
  box-shadow: none;
}
.icards--dark .icard:hover { border-color: var(--sky); background: #21406C; }
.icards--dark .icard__k { color: var(--dusk); }
.icards--dark .icard__n { color: var(--snow); }
.icards--dark .icard__d { color: var(--frost); }
.icards--dark .icard__go { color: var(--sky); }

/* ORDER MATTERS HERE. `.ticks li b` and `.ticks--dark li b` have identical
   specificity, so whichever comes last wins - and with the light rule last,
   every bold word on a dark band was navy on navy and simply invisible. */
.ticks li b { color: var(--navy); font-weight: 600; }
.ticks--dark li { color: var(--frost); border-bottom-color: var(--hair-dark); }
.ticks--dark li b { color: var(--snow); font-weight: 600; }

/* On a light ground the rail needs the light ground's own hairlines, or it
   draws a dark grid over white and reads as a table that lost its rows. */
.rails--light { background: var(--hair); border-color: var(--hair); }
.rails--light .rail { background: var(--white); }
.rails--light .rail__k { color: var(--accent); }
.rails--light .rail__t { color: var(--navy); }
.rails--light .rail__d { color: var(--steel); }

/* the branch link that sits in a trade page's eyebrow */
.eyebrow a { color: inherit; border-bottom: 1px solid rgba(75,156,211,.45); }
.eyebrow a:hover { border-bottom-color: var(--sky); }

@media (max-width: 1040px) {
  .forks { grid-template-columns: 1fr; }
  .trade-out--six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .trade-out--six { grid-template-columns: 1fr; }
}

/* ===========================================================================
   THE AGENT PAGE'S EIGHT ASKS
   ======================================================================== */

.asks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--hair-dark);
  border: 1px solid var(--hair-dark);
  border-radius: var(--r);
  overflow: hidden;
}
.ask {
  background: var(--navy);
  padding: 24px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: background .4s var(--ease);
}
.ask:hover { background: var(--navy-lift); }
.ask__q {
  font-size: 1rem;
  font-weight: 600;
  color: var(--sky);
  line-height: 1.42;
  letter-spacing: -.016em;
}
.ask__a { font-size: .89rem; line-height: 1.55; color: var(--frost); }
.ask__a b { color: var(--snow); font-weight: 600; }

@media (max-width: 1040px) {
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillar--wide { grid-column: span 2; }
  .pillar__stat { position: static; align-items: flex-start; text-align: left; max-width: none; margin-top: 16px; }
  .pillar--full { grid-template-columns: 1fr; grid-template-areas: "k" "t" "d" "go"; gap: 10px; }
  .pillar--full .pillar__go { padding-top: 8px; }
  .asks { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .pillars { grid-template-columns: 1fr; }
  .pillar--wide { grid-column: span 1; }
}



/* ===========================================================================
   PROCESSING RATES

   The rate cards sit on the dark band under the software plans, because the
   two prices are separate things and the page should not let them blur. The
   fourth card is the custom quote; the strip under them is bring-your-own,
   which is the option the bundled platforms do not offer.
   ======================================================================== */

.prates {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.prate {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 28px 28px 30px;
  border-radius: var(--r);
  border: 1px solid var(--hair-dark2);
  background: linear-gradient(165deg, rgba(27,53,92,.72), rgba(7,17,33,.72));
}
.prate__k {
  font-family: var(--mono);
  font-size: .67rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sky);
}
.prate__n { display: flex; flex-direction: column; gap: 3px; }
.prate__r { font-size: 2.5rem; font-weight: 700; letter-spacing: -.042em; color: var(--snow); line-height: 1; }
.prate__p { font-size: .88rem; color: var(--frost); }
.prate__d { font-size: .92rem; line-height: 1.55; color: var(--frost); }
.prate__w { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 8px; }
.prate__w span {
  font-size: .74rem; padding: 4px 10px; border-radius: 999px;
  background: rgba(122,167,212,.12); border: 1px solid var(--hair-dark);
  color: var(--frost);
}
/* the custom card is quoted rather than published, so its figure is words */
.prate--custom { border-color: rgba(123,175,212,.5); background: linear-gradient(165deg, rgba(75,156,211,.15), rgba(7,17,33,.72)); }
.prate--custom .prate__r { font-size: 1.9rem; color: var(--sky); }
.prate__go { margin-top: 10px; font-size: .88rem; font-weight: 600; color: var(--sky); }
.prate__go:hover { text-decoration: underline; }

/* bring your own */
.byo {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr) auto;
  gap: 12px 36px;
  align-items: center;
  padding: 24px 28px 26px;
  border-radius: var(--r);
  border: 1px dashed var(--hair-dark2);
  background: rgba(255,255,255,.03);
}
.byo__l { display: flex; flex-direction: column; gap: 4px; }
.byo__k {
  font-family: var(--mono);
  font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dusk);
}
.byo__t { font-size: 1.06rem; font-weight: 600; color: var(--snow); letter-spacing: -.018em; line-height: 1.25; }
.byo__d { font-size: .93rem; line-height: 1.55; color: var(--frost); }
.byo__go { font-size: .9rem; font-weight: 600; color: var(--sky); white-space: nowrap; }
.byo__go:hover { text-decoration: underline; }

.fineprint--dark { color: var(--dusk); }

@media (max-width: 1040px) {
  .prates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .byo { grid-template-columns: 1fr; }
  .byo__go { white-space: normal; }
}
@media (max-width: 700px) {
  .prates { grid-template-columns: 1fr; }
}


/* ===========================================================================
   BUSINESS SERVICES

   Two drawn components: the timesheet against a client, and the client
   portal's requests-and-files view. Drawn for the same reason the terminal
   is - there is no capture of a business-services org, and a screenshot of
   a landscaping business on this page would be worse than a diagram.
   ======================================================================== */

.tsheet {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--hair);
  box-shadow: var(--shadow);
}
.tsheet__bar {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 16px 20px;
  background: linear-gradient(180deg, #FBFDFF, #F1F6FB);
  border-bottom: 1px solid var(--hair);
  font-weight: 700; color: var(--navy); letter-spacing: -.016em;
}
.tsheet__wip { font-size: .8rem; font-weight: 500; color: var(--accent); }

.tsheet__row {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) 62px 92px;
  gap: 12px;
  align-items: center;
  padding: 13px 20px;
  border-bottom: 1px solid var(--hair);
}
.tsheet__dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--hair-hard);
}
.tsheet__dot--done { background: var(--green); }
.tsheet__dot--nb { background: var(--mute); }
/* the running entry: one per person, and it says so by looking alive */
.tsheet__row--live { background: rgba(75,156,211,.08); }
.tsheet__row--live .tsheet__dot {
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(42,110,158,.55);
  animation: ping 2.4s var(--ease-out) infinite;
}
.tsheet__row--nb .tsheet__w { color: var(--steel); }
.tsheet__w { font-size: .9rem; font-weight: 600; color: var(--navy); min-width: 0; }
.tsheet__w span {
  display: block; font-size: .76rem; font-weight: 400; color: var(--steel);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tsheet__h { font-size: .92rem; font-weight: 700; color: var(--navy); text-align: right; }
.tsheet__v { font-size: .8rem; color: var(--steel); text-align: right; }
.tsheet__foot {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 16px 20px 18px;
}
.tsheet__foot .btn--mini { cursor: default; }

/* ── the client portal, drawn ─────────────────────────────────────────── */

.cportal {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--hair-dark2);
  box-shadow: var(--shadow-dark);
}
.cportal__bar {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 15px 20px;
  background: var(--navy);
  color: var(--snow);
}
.cportal__biz { font-weight: 700; letter-spacing: -.016em; }
.cportal__who { font-size: .74rem; color: var(--frost); }
.cportal__sec { padding: 15px 20px 6px; border-bottom: 1px solid var(--hair); }
.cportal__k {
  display: block;
  font-family: var(--mono);
  font-size: .62rem; letter-spacing: .13em; text-transform: uppercase; color: var(--mute);
  margin-bottom: 10px;
}

.creq {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--hair);
}
.creq:last-child { border-bottom: 0; }
.creq__t { font-size: .88rem; font-weight: 600; color: var(--navy); }
.creq__d { grid-column: 1; font-size: .76rem; color: var(--steel); }
.creq__b {
  grid-row: 1 / 3; grid-column: 2;
  font-size: .76rem; font-weight: 600; color: #fff; background: var(--accent);
  padding: 6px 14px; border-radius: 999px; white-space: nowrap;
}
.creq__s {
  grid-row: 1 / 3; grid-column: 2;
  font-size: .72rem; font-weight: 600; color: var(--green);
  background: var(--green-bg); padding: 5px 12px; border-radius: 999px;
}
.creq--done .creq__t { color: var(--steel); }

.cfile {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--hair);
}
.cfile:last-child { border-bottom: 0; }
.cfile__i {
  flex: none; width: 42px; text-align: center;
  font-family: var(--mono); font-size: .58rem; letter-spacing: .06em;
  color: var(--accent); background: var(--band, #E6F0F8);
  border-radius: 5px; padding: 5px 0; font-weight: 500;
}
.cfile__n { font-size: .86rem; font-weight: 600; color: var(--navy); min-width: 0; }
.cfile__n span { display: block; font-size: .74rem; font-weight: 400; color: var(--steel); }

.cportal__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 20px 17px;
}
.cportal__ask { font-size: .86rem; color: var(--steel); }
.cportal__foot .btn--mini { cursor: default; }

/* ── the signature flow ───────────────────────────────────────────────── */

.signflow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  overflow: hidden;
}
.sstep {
  background: var(--white);
  padding: 24px 24px 26px;
  display: flex; flex-direction: column; gap: 8px;
}
.sstep__n {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; color: var(--mute);
}
.sstep--key { background: linear-gradient(160deg, rgba(75,156,211,.12), rgba(75,156,211,.03)); }
.sstep--key .sstep__n { color: var(--accent); }
.sstep__t { font-size: 1.02rem; font-weight: 600; color: var(--navy); letter-spacing: -.018em; line-height: 1.25; }
.sstep__d { font-size: .88rem; line-height: 1.5; color: var(--steel); }

@media (max-width: 1040px) {
  .signflow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .signflow { grid-template-columns: 1fr; }
  .tsheet__row { grid-template-columns: 14px minmax(0, 1fr) auto; }
  .tsheet__v { display: none; }
}

/* ===========================================================================
   BOOK A DEMO, AND CONTACT

   The booking panel is deliberately honest while there is no Calendly URL:
   a widget that cannot book is worse than no widget, because the visitor
   presses it, nothing happens, and they leave. Set CONTACT['calendly'] in
   content.py and this placeholder swaps itself for the real embed.
   ======================================================================== */

.booknow {
  position: sticky;
  top: 116px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px 32px 34px;
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--navy) 0%, #0A1730 100%);
  box-shadow: var(--shadow-lift);
  color: var(--snow);
}
.booknow__k {
  font-family: var(--mono);
  font-size: .67rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sky);
}
.booknow__t { font-size: 1.5rem; font-weight: 700; letter-spacing: -.026em; line-height: 1.16; }
.booknow__d { font-size: .95rem; line-height: 1.6; color: var(--frost); }
.booknow__ctas { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 6px; }
.booknow__n {
  font-family: var(--mono);
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dusk);
  padding-top: 4px;
}
/* ── OnSight's own booking, drawn by js/booking.js (Greg, 2026-09-14, design A)
   The fallback and the live picker share the panel's 14px rhythm. Every row
   below spaces its children with gap, never a margin on the child. */
.bk__fallback { display: flex; flex-direction: column; gap: 14px; }
/* ⚠ display:flex above beats the browser's own [hidden] rule, so the email
   fallback stayed on screen above the live times on the first deployed
   preview (2026-09-14) while booking.js reported it hidden. */
.bk__fallback[hidden] { display: none; }
.bk { display: flex; flex-direction: column; gap: 16px; }
.bk__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; }
.bk__title { font-size: 1.5rem; font-weight: 700; letter-spacing: -.026em; line-height: 1.16; }
.bk__zone {
  font: inherit; font-size: .8rem; color: var(--frost);
  background: transparent; border: 1px solid var(--hair-dark2); border-radius: var(--r-sm);
  padding: 4px 8px;
}
.bk__zone option { color: var(--navy); }
.bk__intro, .bk__note { font-size: .95rem; line-height: 1.6; color: var(--frost); }
.bk__picker { display: flex; flex-direction: column; gap: 16px; }
.bk__days { display: flex; flex-direction: column; gap: 14px; }
.bk__day { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: start; }
.bk__date { font-size: .8rem; line-height: 1.3; color: var(--frost); padding-top: 7px; }
.bk__date b { display: block; font-size: .95rem; color: var(--snow); }
.bk__slots { display: flex; flex-wrap: wrap; gap: 8px; }
.bk__slot {
  font: inherit; font-size: .9rem; font-variant-numeric: tabular-nums; white-space: nowrap;
  color: var(--snow); background: transparent;
  border: 1px solid var(--hair-dark2); border-radius: var(--r-sm);
  padding: 7px 12px; cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.bk__slot:hover { border-color: var(--sky); }
.bk__slot[aria-pressed="true"] { background: var(--white); border-color: var(--white); color: var(--navy); font-weight: 600; }
.bk__more { align-self: flex-start; font: inherit; font-size: .85rem; color: var(--sky); background: none; border: 0; padding: 0; cursor: pointer; }
/* "+N more" sits in a row of pills: centered on them, with the pill's own
   horizontal padding so the 8px gap reads the same as between two pills. */
.bk__slots .bk__more { align-self: center; padding: 7px 4px; }
.bk__slot:focus-visible, .bk__more:focus-visible, .bk__zone:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
.bk__form { display: flex; flex-direction: column; gap: 14px; padding-top: 18px; border-top: 1px solid var(--hair-dark); }
.bk__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bk__field { display: flex; flex-direction: column; gap: 6px; font-size: .78rem; color: var(--frost); }
.bk__field input, .bk__field textarea {
  font: inherit; font-size: .95rem; color: var(--snow);
  background: rgba(255,255,255,.06); border: 1px solid var(--hair-dark2); border-radius: var(--r-sm);
  padding: 10px 12px;
}
.bk__field input:focus, .bk__field textarea:focus { outline: none; border-color: var(--sky); }
/* q11: out of sight and out of the tab order; a person never meets it */
.bk__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bk__error { font-size: .9rem; line-height: 1.5; color: #FFB9BC; }
.bk__go { justify-content: center; }
.bk__done { display: flex; flex-direction: column; gap: 12px; }
.bk__when { font-size: 1.1rem; font-weight: 600; color: var(--snow); }
.bk__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.bk__link { font-size: .9rem; color: var(--sky); }
@media (max-width: 560px) {
  .bk__grid { grid-template-columns: 1fr; }
  .bk__day { grid-template-columns: 1fr; gap: 6px; }
  .bk__date { padding-top: 0; }
}

/* the numbered flow, on a light band */
.flow--light .flow__step { border-top-color: var(--hair); }
.flow--light .flow__n { color: var(--mute); }
.flow--light .flow__b { color: var(--steel); }
.flow--light .flow__b b { color: var(--navy); }

/* ── the four ways in ─────────────────────────────────────────────────── */

.croutes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.croute {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px 28px 30px;
  background: var(--white);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
}
.croute__k {
  font-family: var(--mono);
  font-size: .67rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
}
.croute__a {
  font-size: 1.16rem; font-weight: 700; color: var(--navy); letter-spacing: -.022em;
  word-break: break-word;
}
.croute__a:hover { color: var(--accent); text-decoration: underline; }
.croute__d { font-size: .92rem; line-height: 1.55; color: var(--steel); }
.croute__t {
  margin-top: auto; padding-top: 10px;
  font-family: var(--mono);
  font-size: .66rem; letter-spacing: .11em; text-transform: uppercase; color: var(--mute);
}

@media (max-width: 1040px) {
  .booknow { position: static; }
  .croutes { grid-template-columns: 1fr; }
}

/* ===========================================================================
   SCROLL REVEAL
   ======================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }
.reveal[data-d="4"] { transition-delay: .32s; }
.reveal[data-d="5"] { transition-delay: .40s; }

/* headline words rising on load */
.rise { display: block; overflow: hidden; }
.rise > span {
  display: inline-block;
  transform: translateY(102%);
  animation: rise .95s var(--ease-out) forwards;
}
@keyframes rise { to { transform: none; } }

/* ===========================================================================
   RESPONSIVE
   ======================================================================== */

@media (max-width: 1040px) {
  .composite__inner { transform: none !important; }
  .hero__grid { grid-template-columns: 1fr; gap: 56px; }
  .composite { margin-right: 0; }
  .agent-grid, .pay-grid, .calc, .dispatch-grid { grid-template-columns: 1fr; }
  .scroller { grid-template-columns: 1fr; }
  .scroller__pane { position: static; }
  .pane-shot { grid-area: auto; }
  .trade-out { grid-template-columns: 1fr; }
  .trade-out--six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__links.is-open {
    display: flex; flex-direction: column; align-items: flex-start;
    position: absolute; top: 84px; left: 0; right: 0;
    background: rgba(7,17,33,.97);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--hair-dark);
    padding: 22px var(--gut) 28px;
    gap: 18px;
    margin-left: 0;
  }
  .nav__burger { display: block; }
  .hero__stats { grid-template-columns: repeat(2, 1fr); }
  .stat { border-right: 0; padding: 22px 18px 4px 0; }
  .stat:nth-child(odd) { border-right: 1px solid var(--hair-dark); }
  .stat:nth-child(even) { padding-left: 22px; }
  .pipe { grid-template-columns: 1fr 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .ledger__row { grid-template-columns: 1fr; gap: 6px; }
  .rails, .qs, .results { grid-template-columns: 1fr; }
  .optpanel__totals { grid-template-columns: 1fr; }
  .move { grid-template-columns: minmax(0,1fr) auto; }
  .move i { grid-column: 2; text-align: right; }
  .res--hero { grid-column: 1; }
  .ticket__totals { grid-template-columns: 1fr; }
  .tot + .tot { border-left: 0; border-top: 1px solid var(--hair); }
  .agent-chip { right: 0; top: -6%; font-size: .78rem; padding: 9px 14px 9px 11px; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .pipe { grid-template-columns: 1fr; }
  .hero__stats { grid-template-columns: 1fr; }
  .stat, .stat:nth-child(odd), .stat:nth-child(even) {
    border-right: 0;
    border-bottom: 1px solid var(--hair-dark);
    padding: 20px 0 18px;
  }
  .stat:last-child { border-bottom: 0; }
  .agent-chip { display: none; }
}

/* ===========================================================================
   REDUCED MOTION — everything above still has to work standing still
   ======================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .rise > span { transform: none; }
  .marquee__track { animation: none; }
  .approved, .agent-chip { animation: none; }
  .pane-shot { opacity: 1; }
  .pane-shot:not(.is-on) { display: none; }
}

/* ═══════════════════════════════════════════════ the contact form ════
   Fields on the paper band, so they are white cards on a tinted ground
   the same way .croute is. The grid is two up and collapses to one; the
   message spans both because a textarea in a half column is a slot, and
   people write less in a slot.
   ------------------------------------------------------------------- */

.cform {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 34px 34px 30px;
  background: var(--white);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
}
.cform__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 24px;
}

.fld { display: flex; flex-direction: column; gap: 7px; margin: 0; }
.fld--wide { grid-column: 1 / -1; }

.fld label {
  font-family: var(--mono);
  font-size: .67rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-2);
}
.fld__req { color: var(--accent); text-decoration: none; border: 0; }
.fld__opt { color: var(--mute); letter-spacing: .11em; }
.fld__hint { font-size: .84rem; line-height: 1.5; color: var(--steel); }

.fld input,
.fld select,
.fld textarea {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--hair-hard);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  width: 100%;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.fld textarea { resize: vertical; min-height: 116px; line-height: 1.55; }

/* The native arrow differs on every platform and none of them match, so
   the select gets the same chevron the nav dropdown uses. */
.fld select {
  appearance: none; -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235A6B80' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
}
.fld select:invalid { color: var(--mute); }

.fld input::placeholder,
.fld textarea::placeholder { color: var(--mute); }

.fld input:hover,
.fld select:hover,
.fld textarea:hover { border-color: var(--steel); }

.fld input:focus-visible,
.fld select:focus-visible,
.fld textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(75,156,211,.26);
}

/* Only after a failed send, never while someone is still typing. */
.cform.is-checked .fld input:invalid,
.cform.is-checked .fld select:invalid,
.cform.is-checked .fld textarea:invalid {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(201,59,64,.16);
}

/* The honeypot. Off-screen rather than display:none, which some bots skip. */
.cform__trap {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

.cform__foot {
  display: flex; align-items: center; flex-wrap: wrap; gap: 16px 22px;
}
.cform__note { font-size: .93rem; color: var(--steel); margin: 0; }
.cform__note.is-ok   { color: var(--green); font-weight: 600; }
.cform__note.is-bad  { color: var(--red); }
.cform__note a { color: inherit; text-decoration: underline; }

.cform.is-sending #cfSend { opacity: .6; pointer-events: none; }

@media (max-width: 720px) {
  .cform { padding: 24px 20px 22px; }
  .cform__grid { grid-template-columns: 1fr; }
}

/* ═════════════════════════════════════════ the deposit, reconciled ════
   One bank line resolving into the payments inside it. Built rather than
   screenshotted because it has to stay legible at 340px and a JPEG of a
   table never does.
   ------------------------------------------------------------------- */

.dep {
  background: var(--white);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.dep__bar {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 16px 20px;
  background: var(--navy);
  color: var(--snow);
}
.dep__src { font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sky); }
.dep__amt { font-size: 1.34rem; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.dep__rows { display: flex; flex-direction: column; }
.dep__row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 12px;
  padding: 11px 20px;
  border-bottom: 1px solid var(--hair);
  font-size: .92rem;
}
.dep__row:last-child { border-bottom: 0; }
.dep__n { font-family: var(--mono); font-size: .66rem; color: var(--mute); }
.dep__what { color: var(--navy); }
.dep__what small { display: block; color: var(--steel); font-size: .8rem; margin-top: 2px; }
.dep__v { font-variant-numeric: tabular-nums; color: var(--navy); font-weight: 600; white-space: nowrap; }
.dep__row--fee .dep__v, .dep__row--fee .dep__what { color: var(--steel); }
.dep__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 14px 20px;
  background: var(--green-bg);
  border-top: 1px solid var(--hair);
}
.dep__ok { font-size: .92rem; font-weight: 600; color: var(--green); }
.dep__ok::before { content: "✓ "; }
.dep__bal { font-family: var(--mono); font-size: .8rem; color: var(--steel); font-variant-numeric: tabular-nums; }

/* ══════════════════════════════════════ one invoice, three programs ════
   The pricing page published rates and then argued about them in prose.
   This shows the same invoice under each program, and the number that
   actually decides it: what lands in the bank.
   ------------------------------------------------------------------- */

.pcmp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pcol {
  display: flex; flex-direction: column; gap: 0;
  background: var(--white);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.pcol--best { border-color: var(--sky); box-shadow: 0 0 0 1px var(--sky), var(--shadow-lift); }
.pcol__top { padding: 20px 22px 16px; border-bottom: 1px solid var(--hair); }
.pcol__k { font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.pcol--best .pcol__k { color: var(--sky); }
.pcol__n { display: block; font-size: 1.18rem; font-weight: 700; letter-spacing: -.024em; color: var(--navy); margin-top: 6px; }
.pcol__d { display: block; font-size: .86rem; line-height: 1.5; color: var(--steel); margin-top: 8px; }
.pline {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 11px 22px; border-bottom: 1px solid var(--hair-2, var(--hair));
  font-size: .92rem; color: var(--steel);
}
.pline__v { font-variant-numeric: tabular-nums; color: var(--navy); font-weight: 600; white-space: nowrap; }
.pline--fee .pline__v { color: var(--steel); font-weight: 500; }
.pcol__keep {
  margin-top: auto;
  padding: 16px 22px 18px;
  background: var(--paper);
  border-top: 1px solid var(--hair);
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.pcol--best .pcol__keep { background: var(--paper-2); }
.pcol__keepk { font-family: var(--mono); font-size: .64rem; letter-spacing: .13em; text-transform: uppercase; color: var(--mute); }
.pcol__keepv { font-size: 1.5rem; font-weight: 700; letter-spacing: -.032em; color: var(--navy); font-variant-numeric: tabular-nums; }
.pcol--best .pcol__keepv { color: var(--accent); }
.pcol__delta { font-family: var(--mono); font-size: .72rem; color: var(--green); width: 100%; }

@media (max-width: 900px) { .pcmp { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════ automations, after setup ════
   The builder above shows one being written. This shows three of them
   running, because the interesting half of an agent is not the sentence
   you typed, it is what it did while you were not looking.
   ------------------------------------------------------------------- */

.runs { display: flex; flex-direction: column; gap: 14px; }
.run {
  background: var(--navy-lift);
  border: 1px solid var(--hair-dark2);
  border-radius: var(--r);
  padding: 18px 22px 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 20px;
  align-items: start;
}
.run__n { font-size: 1.02rem; font-weight: 600; color: var(--snow); letter-spacing: -.016em; }
.run__meta {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .06em;
  color: var(--dusk); display: flex; gap: 14px; flex-wrap: wrap; margin-top: 5px;
}
.run__on {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: .63rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--green); background: rgba(47,163,122,.14);
  border: 1px solid rgba(47,163,122,.34);
  padding: 4px 10px 3px; border-radius: 999px; white-space: nowrap;
}
.run__on i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--green); display: block;
  animation: ping 2.4s var(--ease-out) infinite;
}
.run__out {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; gap: 10px 34px;
  margin-top: 12px; padding-top: 14px;
  border-top: 1px solid var(--hair-dark);
}
.run__cell { display: flex; flex-direction: column; gap: 2px; }
.run__k { font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dusk); }
.run__v { font-size: 1.06rem; font-weight: 700; color: var(--snow); letter-spacing: -.022em; font-variant-numeric: tabular-nums; }

@media (max-width: 620px) {
  .run { grid-template-columns: 1fr; }
  .run__out { gap: 10px 22px; }
}

/* ══════════════════════════════════════════════════ the sales board ════
   Four stages with what is sitting in each. Deliberately not .pipe --
   that one is the Vault's linear process, and a pipeline of deals is a
   different shape that should not read as the same thing twice.
   ------------------------------------------------------------------- */

.deals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.dcol {
  background: var(--white);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  padding: 14px 13px 15px;
  display: flex; flex-direction: column; gap: 9px;
}
.dcol--won { border-color: var(--sky); background: var(--paper); }
.dcol__h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.dcol__s { font-family: var(--mono); font-size: .64rem; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); }
.dcol__v { font-family: var(--mono); font-size: .7rem; color: var(--mute); font-variant-numeric: tabular-nums; }
.deal {
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: var(--r-sm);
  padding: 10px 12px 11px;
  display: flex; flex-direction: column; gap: 4px;
}
.dcol--won .deal { background: var(--white); border-color: var(--sky); }
.deal__n { font-size: .88rem; font-weight: 600; color: var(--navy); line-height: 1.3; letter-spacing: -.012em; }
.deal__x { font-size: .76rem; color: var(--steel); line-height: 1.4; }
.dcol--won .deal__x { color: var(--accent); font-weight: 600; }

@media (max-width: 900px) { .deals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .deals { grid-template-columns: 1fr; } }

/* The board on a dark band. */
.deals--dark .dcol { background: var(--navy-lift); border-color: var(--hair-dark2); }
.deals--dark .dcol--won { border-color: var(--sky); background: rgba(75,156,211,.10); }
.deals--dark .dcol__s { color: var(--sky); }
.deals--dark .dcol__v { color: var(--dusk); }
.deals--dark .deal { background: rgba(7,17,33,.42); border-color: var(--hair-dark); }
.deals--dark .dcol--won .deal { background: rgba(7,17,33,.30); border-color: rgba(75,156,211,.45); }
.deals--dark .deal__n { color: var(--snow); }
.deals--dark .deal__x { color: var(--frost); }
.deals--dark .dcol--won .deal__x { color: var(--sky); }

/* A grouped dropdown: four headings rather than eleven equal rows. The
   groups are the grid items, so each keeps its own children together. */
.navdrop__menu--grouped { gap: 6px 10px; align-items: start; }
.navgrp { display: flex; flex-direction: column; gap: 2px; }
.navgrp__h {
  font-family: var(--mono);
  font-size: .6rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--sky);
  padding: 10px 13px 5px;
}
.navgrp:first-child .navgrp__h { padding-top: 4px; }

@media (max-width: 860px) {
  .navdrop__menu--grouped { display: flex; }
  .navgrp { gap: 12px; }
  .navgrp__h { padding: 4px 0 0; color: var(--dusk); }
}

.trade-out--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Four doors want two rows of two, not three and a stray. The auto-fit
   grid gives three columns at this width, which strands the fourth. */
.icards--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .icards--four { grid-template-columns: 1fr; } }

/* ═════════════════════════════════ professional services · devices ════ */

.flagbox {
  border-left: 3px solid var(--amber);
  background: var(--amber-bg);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 16px 20px;
  display: flex; flex-direction: column; gap: 10px;
  font-size: .95rem; line-height: 1.55; color: var(--ink-2);
}
.flagbox b { color: var(--amber); }

.dtable { width: 100%; border-collapse: collapse; font-size: .95rem; }
.dtable th {
  text-align: left; font-family: var(--mono);
  font-size: .64rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--dusk); padding: 13px 18px; border-bottom: 1px solid var(--hair-dark2);
  white-space: nowrap;
}
.dtable td { padding: 13px 18px; border-bottom: 1px solid var(--hair-dark); color: var(--frost); vertical-align: top; }
.dtable tr:last-child td { border-bottom: 0; }
.dtable td b { color: var(--snow); font-weight: 600; }
.on-dark .tw { border-color: var(--hair-dark2); background: var(--navy-lift); }

.figs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px; background: var(--hair-dark); border: 1px solid var(--hair-dark);
  border-radius: var(--r); overflow: hidden;
}
.figc { background: var(--navy); padding: 17px 19px; display: flex; flex-direction: column; gap: 5px; }
.figc__k { font-family: var(--mono); font-size: .62rem; letter-spacing: .13em; text-transform: uppercase; color: var(--dusk); }
.figc__v { font-size: 1.5rem; font-weight: 700; letter-spacing: -.03em; color: var(--snow); font-variant-numeric: tabular-nums; }
.figc__v--good { color: var(--green); }
.figc__n { font-size: .78rem; color: var(--frost); }

/* The scroll box every wide table sits in, so a table can overflow itself
   without the page ever scrolling sideways. */
.tw {
  overflow-x: auto;
  border: 1px solid var(--hair);
  border-radius: var(--r);
  background: var(--white);
  box-shadow: var(--shadow);
}
.tw table { min-width: 480px; }

.ltable { width: 100%; border-collapse: collapse; font-size: .95rem; }
.ltable th {
  text-align: left; font-family: var(--mono);
  font-size: .64rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--mute); padding: 13px 18px; border-bottom: 1px solid var(--hair);
  background: var(--paper); white-space: nowrap;
}
.ltable td { padding: 13px 18px; border-bottom: 1px solid var(--hair); color: var(--steel); vertical-align: top; }
.ltable tr:last-child td { border-bottom: 0; }
.ltable td b { color: var(--navy); font-weight: 600; }
.ltable .is-late, .ltable .is-late b { color: var(--red); }

/* ═══════════════════════════════════ the customer record, drawn ════
   Same approach as the terminal on the home page. Sits inside .appwin,
   so the rail and the window chrome are already handled.
   ------------------------------------------------------------------- */

.cprof {
  display: grid;
  grid-template-columns: minmax(0, 230px) minmax(0, 1fr);
  gap: 16px;
  padding: 16px 18px 18px;
  background: var(--paper);
  align-content: start;
}

.cprof__card {
  background: linear-gradient(168deg, var(--navy-lift), var(--abyss));
  border-radius: var(--r-sm);
  padding: 14px 15px 15px;
  display: flex; flex-direction: column; gap: 7px;
  align-self: start;
}
.cprof__name { font-size: .98rem; font-weight: 700; color: var(--snow); letter-spacing: -.018em; line-height: 1.2; }
.cprof__meta { font-size: .64rem; color: var(--dusk); font-family: var(--mono); letter-spacing: .03em; }
.cprof__figs { display: flex; gap: 16px; margin: 6px 0 3px; }
.cprof__fig { display: flex; flex-direction: column; gap: 2px; }
.cprof__fig b { font-family: var(--mono); font-size: .55rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dusk); font-weight: 500; }
.cprof__fig i { font-style: normal; font-size: .9rem; font-weight: 700; color: var(--snow); letter-spacing: -.02em; }
.cprof__kv { display: flex; justify-content: space-between; gap: 10px; font-size: .68rem; padding: 4px 0; border-top: 1px solid var(--hair-dark); }
.cprof__kv b { color: var(--dusk); font-weight: 400; }
.cprof__kv i { font-style: normal; color: var(--frost); text-align: right; }

.cprof__main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cprof__tabs { display: flex; gap: 14px; flex-wrap: wrap; border-bottom: 1px solid var(--hair); padding-bottom: 7px; }
.cprof__tabs span { font-size: .68rem; color: var(--mute); white-space: nowrap; }
.cprof__tabs .is-on { color: var(--accent); font-weight: 600; box-shadow: 0 7px 0 -6px var(--accent); }

.cprof__h { display: block; font-family: var(--mono); font-size: .55rem; letter-spacing: .13em; text-transform: uppercase; color: var(--mute); margin-bottom: 7px; }
.cprof__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.cprop, .cperson {
  background: var(--white); border: 1px solid var(--hair); border-radius: 7px;
  padding: 8px 10px 9px; margin-bottom: 7px;
  display: flex; flex-direction: column; gap: 2px;
}
.cprop__n, .cperson__n { font-size: .72rem; font-weight: 600; color: var(--navy); }
.cprop__n b, .cperson__n b {
  font-family: var(--mono); font-size: .5rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); background: var(--paper-2); padding: 2px 5px; border-radius: 3px; margin-left: 5px;
}
.cprop__a, .cperson__r { font-size: .64rem; color: var(--steel); }
.cprop__b { font-size: .6rem; color: var(--accent); font-weight: 600; margin-top: 3px; }
.cperson__p {
  font-family: var(--mono); font-size: .53rem; letter-spacing: .07em; color: var(--green);
  background: var(--green-bg); border-radius: 3px; padding: 2px 5px; align-self: flex-start; margin-top: 3px;
}

.cprof__pay { border-top: 1px solid var(--hair); padding-top: 10px; }
.cpay { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cpay__brand {
  font-family: var(--mono); font-size: .6rem; font-weight: 600; letter-spacing: .08em;
  color: var(--navy); background: var(--white); border: 1px solid var(--hair);
  border-radius: 4px; padding: 3px 7px;
}
.cpay__pan { font-size: .72rem; font-weight: 600; color: var(--navy); }
.cpay__d { font-size: .64rem; color: var(--steel); }
.cpay__n { font-size: .6rem; color: var(--mute); width: 100%; }

@media (max-width: 760px) {
  .cprof { grid-template-columns: 1fr; }
  .cprof__cols { grid-template-columns: 1fr; }
}

/* ════════════════════════════════ the property passport, drawn ════
   Matched to the live screen: a navy card on the left, and a right
   column that opens on what was recommended and never carried out.
   ------------------------------------------------------------------- */

.pass { background: var(--paper); padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; }

.pass__actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pass__back { font-size: .65rem; color: var(--steel); }
.pass__btns { display: flex; gap: 6px; flex-wrap: wrap; }
.pass__btns i, .pass__btns b {
  font-style: normal; font-size: .6rem; padding: 4px 9px; border-radius: 5px; white-space: nowrap;
}
.pass__btns i { color: var(--navy); background: var(--white); border: 1px solid var(--hair); }
.pass__btns b { color: #fff; background: var(--accent); font-weight: 600; }

.pass__grid { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: 14px; align-items: start; }

.pass__card {
  background: linear-gradient(168deg, var(--navy-lift), var(--abyss));
  border-radius: var(--r-sm); padding: 14px 15px 15px;
  display: flex; flex-direction: column; gap: 9px;
}
.pass__name { font-size: 1rem; font-weight: 700; color: var(--snow); letter-spacing: -.02em; }
.pass__addr { font-size: .66rem; color: var(--frost); line-height: 1.45; }
.pass__stats { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--hair-dark); padding-top: 10px; }
.pass__stats > span { display: flex; flex-direction: column; gap: 1px; }
.pass__stats b { font-family: var(--mono); font-size: .52rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dusk); font-weight: 500; }
.pass__stats i { font-style: normal; font-size: .84rem; font-weight: 700; color: var(--snow); letter-spacing: -.02em; }
.pass__stats em { font-style: normal; font-size: .57rem; color: var(--dusk); }
.pass__owner { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--hair-dark); padding-top: 9px; }
.pass__owner b { font-family: var(--mono); font-size: .52rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dusk); font-weight: 500; }
.pass__owner i { font-style: normal; font-size: .68rem; color: var(--frost); }
.pass__go {
  text-align: center; font-size: .66rem; font-weight: 600; color: var(--snow);
  background: rgba(122,167,212,.16); border: 1px solid var(--hair-dark2);
  border-radius: 6px; padding: 7px 10px; margin-top: 2px;
}

.pass__main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.pass__sold { background: var(--white); border: 1px solid var(--hair); border-radius: 8px; padding: 12px 14px 13px; display: flex; flex-direction: column; gap: 5px; }
.pass__soldhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pass__soldhead b { font-family: var(--mono); font-size: .55rem; letter-spacing: .13em; text-transform: uppercase; color: var(--mute); font-weight: 500; }
.pass__soldhead i { font-style: normal; font-size: .72rem; font-weight: 700; color: var(--navy); }
.pass__soldsub { font-size: .63rem; color: var(--steel); line-height: 1.45; }
.pass__item { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 4px; }
.pass__itemn { font-size: .78rem; font-weight: 600; color: var(--navy); line-height: 1.35; }
.pass__itemn em {
  font-style: normal; font-family: var(--mono); font-size: .5rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent); background: var(--paper-2);
  padding: 2px 5px; border-radius: 3px; margin-left: 5px; white-space: nowrap;
}
.pass__itemn em.is-yes { color: var(--green); background: var(--green-bg); }
.pass__itemv { font-size: .84rem; font-weight: 700; color: var(--navy); white-space: nowrap; }
.pass__itemd { font-size: .61rem; color: var(--steel); }
.pass__also { font-size: .61rem; color: var(--accent); font-weight: 600; border-top: 1px solid var(--hair); padding-top: 8px; margin-top: 3px; }

.pass__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pass__h { display: block; font-family: var(--mono); font-size: .53rem; letter-spacing: .13em; text-transform: uppercase; color: var(--mute); margin-bottom: 8px; }

.pkit { background: var(--white); border: 1px solid var(--hair); border-radius: 8px; padding: 10px 12px 11px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 4px; }
.pkit__n { font-size: .76rem; font-weight: 600; color: var(--navy); }
.pkit__m { font-size: .62rem; color: var(--steel); line-height: 1.4; }
.pkit__ok { font-size: .58rem; color: var(--green); background: var(--green-bg); border-radius: 5px; padding: 4px 8px; align-self: flex-start; margin-top: 2px; }
.pkit__tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 4px; }
.pkit__tags i { font-style: normal; font-size: .56rem; color: var(--steel); background: var(--paper); border: 1px solid var(--hair); border-radius: 4px; padding: 3px 7px; }
.pkit__tags b { color: var(--navy); font-weight: 600; }

.pfact { display: flex; flex-direction: column; gap: 2px; padding: 9px 0; border-bottom: 1px solid var(--hair); }
.pfact:last-child { border-bottom: 0; }
.pfact span { font-size: .72rem; color: var(--navy); font-weight: 600; }
.pfact i { font-style: normal; font-size: .63rem; color: var(--steel); }

@media (max-width: 760px) {
  .pass__grid { grid-template-columns: 1fr; }
  .pass__cols { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════ the vehicle record, drawn ════
   The auto page's argument in one figure: a car that has driven past
   the mileage its declined work came due at. The meter is the point.
   ------------------------------------------------------------------- */

.vrec { background: var(--paper); padding: 16px 18px 16px; display: flex; flex-direction: column; gap: 14px; }

.vrec__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.vrec__car { font-size: 1.04rem; font-weight: 700; color: var(--navy); letter-spacing: -.022em; display: flex; flex-direction: column; gap: 3px; }
.vrec__car i { font-style: normal; font-family: var(--mono); font-size: .6rem; font-weight: 400; color: var(--steel); letter-spacing: .02em; }
.vrec__odo { display: flex; flex-direction: column; gap: 1px; text-align: right; }
.vrec__odo b { font-family: var(--mono); font-size: .53rem; letter-spacing: .13em; text-transform: uppercase; color: var(--mute); font-weight: 500; }
.vrec__odo i { font-style: normal; font-size: 1.3rem; font-weight: 700; color: var(--navy); letter-spacing: -.03em; }
.vrec__odo em { font-style: normal; font-size: .58rem; color: var(--steel); }

/* the mileage track: recommended → due → now */
.vmeter { display: flex; flex-direction: column; gap: 9px; }
.vmeter__track { position: relative; height: 8px; border-radius: 99px; background: var(--paper-2); display: block; }
.vmeter__done { position: absolute; inset: 0 0 0 0; border-radius: 99px; background: linear-gradient(90deg, var(--sky), var(--red)); }
.vmeter__due { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--navy); border-radius: 2px; }
.vmeter__due::after {
  content: "due"; position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: .48rem; letter-spacing: .1em; text-transform: uppercase; color: var(--navy);
}
.vmeter__now { position: absolute; right: -5px; top: -3px; width: 14px; height: 14px; border-radius: 50%; background: var(--red); border: 3px solid var(--paper); }
/* The middle label has to sit under its own tick, not at the midpoint of
   the row -- the gap between them reads as a mistake, because it is one. */
.vmeter__marks { position: relative; display: flex; justify-content: space-between; gap: 10px; }
.vmeter__marks > span { display: flex; flex-direction: column; gap: 1px; font-size: .58rem; color: var(--steel); }
.vmeter__marks b { font-size: .78rem; font-weight: 700; color: var(--navy); letter-spacing: -.02em; }
.vmeter__marks .is-due { position: absolute; left: 33.3%; transform: translateX(-50%); text-align: center; }
.vmeter__marks .is-now { margin-left: auto; text-align: right; }
.vmeter__marks .is-now b { color: var(--red); }

.vitem { background: var(--white); border: 1px solid var(--hair); border-left: 3px solid var(--red); border-radius: 0 8px 8px 0; padding: 11px 14px 12px; display: flex; flex-direction: column; gap: 4px; }
.vitem__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.vitem__n { font-size: .82rem; font-weight: 600; color: var(--navy); }
.vitem__n em { font-style: normal; font-family: var(--mono); font-size: .5rem; letter-spacing: .1em; text-transform: uppercase; padding: 2px 6px; border-radius: 3px; margin-left: 6px; white-space: nowrap; }
.vitem__n em.is-safety { color: var(--red); background: var(--red-bg); }
.vitem__v { font-size: .9rem; font-weight: 700; color: var(--navy); white-space: nowrap; }
.vitem__d { font-size: .65rem; color: var(--steel); }
.vitem__d b { color: var(--red); font-weight: 700; }

.vrec__foot { margin: 0; font-size: .63rem; color: var(--steel); border-top: 1px solid var(--hair); padding-top: 10px; }

@media (max-width: 620px) {
  .vrec__head { flex-direction: column; }
  .vrec__odo { text-align: left; }
  .vmeter__marks { font-size: .54rem; }
}

/* ═══════════════════════════════════════ the Vault list, drawn ════
   The page's central screen. Wide, so the type runs a little larger
   than the other drawn figures -- at 1520px the usual .6rem vanishes.
   ------------------------------------------------------------------- */

.appwin--plain { display: block; }

.vlist { background: var(--paper); padding: 16px 18px 16px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.vlist__tiles { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 10px; }
.vtile {
  background: var(--white); border: 1px solid var(--hair); border-radius: 8px;
  padding: 11px 13px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.vtile b { font-family: var(--mono); font-size: .55rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); font-weight: 500; }
.vtile i { font-style: normal; font-size: 1.12rem; font-weight: 700; color: var(--navy); letter-spacing: -.028em; }
.vtile em { font-style: normal; font-size: .61rem; color: var(--steel); line-height: 1.35; }
.vtile--lead { background: linear-gradient(168deg, var(--navy-lift), var(--abyss)); border-color: transparent; }
.vtile--lead b { color: var(--dusk); }
.vtile--lead i { color: var(--snow); font-size: 1.42rem; }
.vtile--lead em { color: var(--frost); }

.vlist__views { display: flex; gap: 14px; flex-wrap: wrap; border-bottom: 1px solid var(--hair); padding-bottom: 7px; }
.vview { font-size: .69rem; color: var(--mute); white-space: nowrap; }
.vview.is-on { color: var(--accent); font-weight: 600; box-shadow: 0 7px 0 -6px var(--accent); }

.vtab { width: 100%; border-collapse: collapse; }
.vtab th {
  font-family: var(--mono); font-size: .53rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--mute); font-weight: 500; text-align: left; padding: 0 12px 7px 0;
}
.vtab td { padding: 10px 12px 10px 0; border-top: 1px solid var(--hair); vertical-align: top; }
.vtab .is-r { text-align: right; padding-right: 0; }
.vtab td b { display: block; font-size: .76rem; font-weight: 600; color: var(--navy); }
.vtab td i { font-style: normal; display: block; font-size: .61rem; color: var(--steel); }
.vtab td.is-r b { font-size: .86rem; letter-spacing: -.02em; }

.vtab__n { display: block; font-size: .8rem; font-weight: 600; color: var(--navy); line-height: 1.35; }
.vtab__n em {
  font-style: normal; font-family: var(--mono); font-size: .5rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent); background: var(--paper-2);
  padding: 2px 6px; border-radius: 3px; margin-left: 6px; white-space: nowrap;
}
.vtab__n em.is-safety { color: var(--red); background: var(--red-bg); }
.vtab__n em.is-fail { color: var(--red); background: var(--red-bg); }
.vtab__n em.is-worse { color: var(--amber); background: var(--amber-bg); }
.vtab__w { display: block; font-size: .63rem; color: var(--steel); margin-top: 3px; }

.vlist__foot {
  margin: 0; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid var(--hair); padding-top: 10px; font-size: .63rem; color: var(--steel);
}
.vlist__foot b { color: var(--navy); font-weight: 700; }

@media (max-width: 900px) {
  .vlist__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  /* The rail is decorative here and eats a third of a phone. The table needs
     the width more than the figure needs to look like a browser window. */
  .appwin--list .appwin__body { grid-template-columns: minmax(0, 1fr); }
  .appwin--list .appwin__rail { display: none; }
  .vlist__tiles { grid-template-columns: 1fr; }
  .vtab thead { display: none; }
  .vtab tr { display: block; border-top: 1px solid var(--hair); padding: 10px 0; }
  .vtab td { display: block; border: 0; padding: 2px 0; }
  .vtab .is-r { text-align: left; }
}

/* ══════════════════════════════════ the review outbox, drawn ════
   Six drafts, each carrying the sentence that put it there, and a
   button that is the whole argument: nothing sends itself.
   ------------------------------------------------------------------- */

.obox { background: var(--paper); padding: 15px 16px 16px; display: flex; flex-direction: column; gap: 9px; }

.obox__head { display: flex; flex-direction: column; gap: 3px; padding-bottom: 4px; }
.obox__head b { font-size: .95rem; font-weight: 700; color: var(--navy); letter-spacing: -.02em; }
.obox__head > span { font-size: .65rem; color: var(--steel); line-height: 1.4; }

.omsg {
  background: var(--white); border: 1px solid var(--hair); border-radius: 8px;
  padding: 9px 11px 10px; display: flex; flex-direction: column; gap: 3px;
}
.omsg__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.omsg__who { font-size: .76rem; font-weight: 600; color: var(--navy); }
.omsg__who em {
  font-style: normal; font-family: var(--mono); font-size: .48rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent); background: var(--paper-2);
  padding: 2px 5px; border-radius: 3px; margin-left: 5px; white-space: nowrap;
}
.omsg__who em.is-sms { color: var(--green); background: var(--green-bg); }
.omsg__v { font-size: .82rem; font-weight: 700; color: var(--navy); white-space: nowrap; }
.omsg__i { font-size: .64rem; color: var(--steel); }
.omsg__y { font-size: .62rem; color: var(--accent); font-weight: 600; line-height: 1.35; }

.obox__more { margin: 0; font-size: .63rem; color: var(--steel); }
.obox__more b { color: var(--navy); font-weight: 700; }

.obox__act { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 3px; }
.obox__act b, .obox__act i {
  font-style: normal; font-size: .68rem; padding: 7px 13px; border-radius: 6px; white-space: nowrap;
}
.obox__act b { background: var(--accent); color: #fff; font-weight: 600; }
.obox__act i { background: var(--white); border: 1px solid var(--hair); color: var(--navy); }

.obox__foot { margin: 0; font-size: .62rem; color: var(--steel); border-top: 1px solid var(--hair); padding-top: 9px; line-height: 1.45; }

/* ═════════════════════════════ the customer's copy, drawn ════
   Deliberately not the portal: no window chrome, and the header is
   the contractor's, because that is the point being made.
   ------------------------------------------------------------------- */

.ccopy { border-radius: var(--r); overflow: hidden; background: var(--white); border: 1px solid var(--hair-hard); box-shadow: var(--shadow); }
.on-dark .ccopy { border-color: rgba(255,255,255,.16); box-shadow: var(--shadow-dark); }

.ccopy__brand {
  background: #1F6B4E; padding: 13px 16px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.ccopy__brand b { font-size: .92rem; font-weight: 700; color: #fff; letter-spacing: -.018em; }
.ccopy__brand i { font-style: normal; font-family: var(--mono); font-size: .62rem; letter-spacing: .04em; color: rgba(255,255,255,.82); }

.ccopy__body { padding: 15px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.ccopy__lede { margin: 0; font-size: .72rem; color: var(--steel); line-height: 1.5; }
.ccopy__lede b { color: var(--navy); font-weight: 600; }

.ccopy__item { background: var(--paper); border: 1px solid var(--hair); border-radius: 8px; padding: 12px 13px 13px; display: flex; flex-direction: column; gap: 4px; }
.ccopy__n { font-size: .92rem; font-weight: 700; color: var(--navy); letter-spacing: -.02em; }
.ccopy__w { font-size: .64rem; color: var(--steel); }
.ccopy__inc { list-style: none; margin: 6px 0 2px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ccopy__inc li { font-size: .68rem; color: var(--ink-2); padding-left: 15px; position: relative; line-height: 1.4; }
.ccopy__inc li::before { content: ""; position: absolute; left: 0; top: .42em; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.ccopy__v { font-size: 1.18rem; font-weight: 700; color: var(--navy); letter-spacing: -.028em; border-top: 1px solid var(--hair); padding-top: 9px; margin-top: 5px; }
.ccopy__v em { font-style: normal; font-size: .61rem; font-weight: 400; color: var(--mute); letter-spacing: 0; margin-left: 5px; }

.ccopy__ans { display: flex; gap: 7px; flex-wrap: wrap; }
.ccopy__ans b, .ccopy__ans i {
  font-style: normal; font-size: .72rem; padding: 9px 15px; border-radius: 7px; white-space: nowrap;
}
.ccopy__ans b { background: #1F6B4E; color: #fff; font-weight: 600; }
.ccopy__ans i { background: var(--white); border: 1px solid var(--hair-hard); color: var(--navy); }

.ccopy__foot { margin: 0; font-size: .64rem; color: var(--steel); border-top: 1px solid var(--hair); padding-top: 10px; line-height: 1.5; }
.ccopy__foot b { color: var(--navy); font-weight: 700; }

/* ── Feature guides (tools/guides/build_guides.py) ─────────────────────
   A screenshot with its caption, and the numbered steps under it. */
.guide-fig { margin: 0; }
.guide-fig img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--hair); box-shadow: 0 10px 30px rgba(15, 31, 61, .08); }
.guide-fig figcaption { margin-top: 10px; }