/* ============================================================================
   Big Dog Mining v2: site layer over vendor/scrollcraft/scrollcraft.css
   ----------------------------------------------------------------------------
   Tokens first (the scroll-craft roles rebranded), then the shared chrome
   (bar, footer, buttons), then the home acts, then the product UI kit used by
   the travelling daily report and the Ask Big Dog console.

   Radius scale, held everywhere: controls 8px, panels 12px, chips pill.
   Motion: transform and opacity only. Reduced motion handled at the bottom.
   ========================================================================== */

:root {
  --sc-canvas: #121212;
  --sc-surface: #1C1C1C;
  --sc-ink: #FFFFFF;
  --sc-ink-soft: #B4B4B4;
  --sc-accent: #E8A844;
  --sc-accent-ink: #121212;
  --sc-font-display: "Archivo Black", "Arial Black", Arial, sans-serif;
  --sc-font-text: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --sc-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* Archivo Black is wide and heavy; the stock ramp is tuned for a lighter
     display face and sets it far too big. */
  --sc-t-2xl: clamp(1.75rem, 1.3rem + 1.9vw, 2.9rem);
  --sc-t-3xl: clamp(2.1rem, 1.35rem + 3vw, 4rem);
  --sc-t-4xl: clamp(2.5rem, 1.3rem + 4.4vw, 5.4rem);
  --sc-gutter: clamp(1.25rem, 5vw, 5.5rem);
  --sc-maxw: 84rem;
  --sc-r-sm: 8px; --sc-r-md: 12px; --sc-r-lg: 12px;
  --sc-shadow-color: 0 0% 2%;

  --gold: #E8A844;
  --gold-soft: rgba(232, 168, 68, .14);
  --white: #FFFFFF;
  --muted: #DEDEDE;
  --dim: #8E8E8E;
  --line: rgba(255, 255, 255, .10);
  --line-strong: rgba(255, 255, 255, .18);
  --ok: #5FB97F;
  --ok-soft: rgba(95, 185, 127, .14);
  --panel: #0F0F0F;
  --panel-2: #161616;
  --bar-h: 64px;
}
@media (min-width: 1100px) {
  /* room in the left margin for the depth gauge */
  :root { --sc-gutter: clamp(5.5rem, 7vw, 7.5rem); }
}

body { color: var(--muted); }
::selection { background: var(--gold); color: #121212; }
.sc-display { font-weight: 400; letter-spacing: -0.012em; line-height: 1.02; color: var(--white); }
.sc-display--md { letter-spacing: -0.008em; line-height: 1.06; }
.sc-lede { color: var(--white); }
.sc-body { color: var(--sc-ink-soft); }

.vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 1rem; top: -4rem; z-index: 100;
  background: var(--gold); color: #121212; padding: .6rem 1rem; border-radius: var(--sc-r-sm);
  font-weight: 600; text-decoration: none;
}
.skip:focus { top: 1rem; }

/* Section label: Archivo Black caps, wide tracking, gold. Used sparingly. */
.lbl {
  font-family: var(--sc-font-display); font-size: .78rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold); margin: 0; line-height: 1.2;
}
.mono { font-family: var(--sc-font-mono); font-size: .78em; letter-spacing: 0; }

/* ------------------------------------------------------------- buttons --
   Three weights, one family. The primary is the only filled amber thing on a
   screen: a shine sweeps across it on hover, the arrow nudges, and on a fine
   pointer it leans toward the cursor (buttons.js writes --mx/--my). The ghost
   secondary carries a cursor spotlight on its border. The text link draws its
   underline in from the left. Transform and opacity only. */
:root { --amber: #F5A524; --amber-hi: #FFB847; }
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 44px; padding: .7rem 1.2rem; border-radius: var(--sc-r-sm);
  font: 600 .95rem/1 var(--font-ui, var(--sc-font-text)); letter-spacing: -0.005em; text-decoration: none;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
  transition: transform 260ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out),
              border-color 200ms var(--sc-ease-out), color 160ms;
}
.btn > span, .btn > svg { position: relative; z-index: 1; }
.btn:active { transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) scale(.97); transition-duration: 90ms; }
/* The arrow is a little window with two arrows in it: on hover the first
   slides out to the right while its twin slides in from the left. */
.btn__arrow {
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7h9M7.5 3.5 11 7l-3.5 3.5' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  position: relative; flex: none; width: 14px; height: 14px; overflow: hidden;
}
.btn__arrow::before, .btn__arrow::after {
  content: ""; position: absolute; inset: 0; background: currentColor;
  -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat;
  transition: transform 420ms cubic-bezier(.7, 0, .2, 1);
}
.btn__arrow::after { transform: translateX(-140%); }
.btn--lg .btn__arrow { width: 16px; height: 16px; }
.btn:hover .btn__arrow::before, .btn:focus-visible .btn__arrow::before { transform: translateX(140%); }
.btn:hover .btn__arrow::after, .btn:focus-visible .btn__arrow::after { transform: none; }

.btn--gold { background: var(--amber); color: #0B0B0B; box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 0 0 1px rgba(0,0,0,.25) inset; }
.btn--gold:hover { background: var(--amber-hi); }
/* The shine: a narrow bright band that crosses once per hover. */
.btn--gold::before {
  content: ""; position: absolute; inset: -20% auto -20% 0; width: 45%; z-index: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55) 45%, rgba(255,255,255,.1) 60%, transparent);
  transform: translateX(-130%) skewX(-18deg); opacity: 0;
}
.btn--gold:hover::before, .btn--gold:focus-visible::before {
  opacity: 1; transform: translateX(330%) skewX(-18deg);
  transition: transform 750ms cubic-bezier(.2, .7, .2, 1), opacity 120ms;
}
/* The glow: a warm light that follows the cursor across the face. */
.btn--gold::after {
  content: ""; position: absolute; left: 0; top: 0; width: 8rem; height: 8rem; margin: -4rem 0 0 -4rem; z-index: 0;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 236, 200, .55), transparent);
  transform: translate(var(--sx, 50%), var(--sy, 50%)); opacity: 0; transition: opacity 260ms;
}
.btn--gold[data-lit]:hover::after { opacity: 1; }

.btn--ghost { background: rgba(255,255,255,.02); color: var(--white); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: rgba(245, 165, 36, .55); background: rgba(255,255,255,.04); }
/* Spotlight: a soft disc that follows the cursor inside the ghost button. */
.btn--ghost::before {
  content: ""; position: absolute; left: 0; top: 0; width: 9rem; height: 9rem; margin: -4.5rem 0 0 -4.5rem; z-index: 0;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(245, 165, 36, .22), transparent);
  transform: translate(var(--sx, 50%), var(--sy, 50%)); opacity: 0; transition: opacity 260ms;
}
.btn--ghost[data-lit]:hover::before { opacity: 1; }
.btn--lg { min-height: 56px; padding: 1rem 1.55rem; font-size: 1.04rem; }

/* The page primary (gold, large) carries a border beam: a point of white
   light that runs the edge every few seconds, so the one thing to press is
   the one thing on the screen that moves on its own. buttons.js adds the
   span; without JS the button is simply gold. Transform only: a conic
   gradient rotates behind a mask that shows just the 1.5px edge. */
.btn > .btn__beam {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  padding: 1.5px; overflow: hidden;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.btn__beam::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 260%; aspect-ratio: 1;
  margin: -130% 0 0 -130%;
  background: conic-gradient(from 0deg, transparent 0 70%, rgba(255, 255, 255, .15) 80%, #FFFFFF 92%, rgba(255, 246, 225, .9) 95%, transparent 97%);
  animation: btn-beam 4.8s linear infinite;
}
.btn--gold.btn--lg { box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 0 0 1px rgba(0,0,0,.25) inset, 0 14px 34px -14px rgba(245, 165, 36, .55); }
.btn--gold.btn--lg:hover { box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 0 0 1px rgba(0,0,0,.25) inset, 0 18px 44px -12px rgba(255, 184, 71, .75); }
.btn--gold:hover .btn__beam::before { animation-duration: 1.6s; }
@keyframes btn-beam { to { transform: rotate(1turn); } }

/* Label plus sub-label (COPY-v2 section 4). The sub-label is always in the
   page; on a desktop pointer it brightens and rises on hover, on touch it
   simply sits under the button. */
.ctas { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.1rem 1.4rem; }
.cta { display: inline-flex; flex-direction: column; align-items: flex-start; gap: .65rem; }
.cta__sub {
  font-family: var(--sc-font-mono); font-size: .78rem; letter-spacing: .02em; line-height: 1.4;
  /* #A8A8A8 at full opacity: about 8:1 on the page black, AA at this size. */
  color: #A8A8A8; max-width: 30ch; padding-left: .15rem;
}
@media (hover: hover) and (pointer: fine) {
  .cta__sub { transform: translateY(-2px); transition: transform 240ms var(--sc-ease-out), color 240ms; }
  .cta:hover .cta__sub, .cta:focus-within .cta__sub { transform: none; color: var(--sc-ink-soft); }
}

/* Text-link CTA: a quiet rule, and an amber line drawn in over it on hover. */
.more {
  position: relative; display: inline-flex; align-items: center; gap: .5em; color: var(--white);
  font-weight: 600; text-decoration: none; padding-bottom: 4px;
  background: linear-gradient(var(--line-strong), var(--line-strong)) left bottom / 100% 1px no-repeat;
}
.more::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--amber);
  transform: scaleX(.28); transform-origin: left; transition: transform 380ms var(--sc-ease-out);
}
.more::after { content: "\2192"; color: var(--amber); transition: transform 260ms var(--sc-ease-out); }
.more:hover::before, .more:focus-visible::before { transform: scaleX(1); }
.more:hover::after, .more:focus-visible::after { transform: translateX(3px); }
.more--quiet { font-weight: 500; font-size: .9rem; color: var(--muted); }

/* ---------------------------------------------------------------- bar -- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome); height: var(--bar-h);
}
.bar::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: rgba(14, 14, 14, .8);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
  opacity: 0; transition: opacity 240ms var(--sc-ease-out);
}
.bar[data-scrolled="true"]::before, .bar[data-open="true"]::before, .bar:has([data-open="true"])::before { opacity: 1; }
.bar__in {
  position: relative; height: 100%; max-width: 100%;
  display: flex; align-items: center; gap: 1.5rem;
  padding-inline: clamp(1.25rem, 3vw, 2.5rem);
}
.lockup {
  display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; flex: none;
  font-family: var(--sc-font-display); font-size: .92rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--white); line-height: 1;
}
.lockup img { width: 30px; height: 30px; }
.lockup__gold { color: var(--gold); }
.bar__nav { margin-left: auto; height: 100%; }
.bar__list { display: flex; align-items: center; height: 100%; gap: clamp(.9rem, 1.6vw, 1.8rem); list-style: none; margin: 0; padding: 0; }
.nav__item { position: relative; display: flex; align-items: center; height: 100%; }
.nav__top {
  color: var(--muted); text-decoration: none; font-size: .9rem; font-weight: 500; white-space: nowrap;
  padding: .5rem 0; transition: color 140ms;
}
.nav__top:hover, .nav__item:hover > .nav__top, .nav__item[data-open="true"] > .nav__top { color: var(--white); }
.nav__top[aria-current="page"] { color: var(--white); }
.nav__caret {
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 28px; margin-left: 7px;
  padding: 0; background: none; border: 0; color: var(--dim); cursor: pointer;
}
.nav__caret::before {
  content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0;
  transform: translateY(-2px) rotate(45deg); transition: transform 220ms var(--sc-ease-out);
}
.nav__item:hover .nav__caret, .nav__item[data-open="true"] .nav__caret { color: var(--amber); }
.nav__item[data-open="true"] .nav__caret::before { transform: translateY(1px) rotate(225deg); }
/* The caret's ring stays clear of the word before it. */
.nav__caret:focus-visible { outline-offset: 0; }
.bar__cta { min-height: 40px; padding: .6rem 1rem; font-size: .88rem; }
.bar__menu { display: none; }
.bar__sheet-foot { display: none; }

/* The drop panels: a dark sheet under the bar, the list on the left, one
   short line and the hub link on the right. Opened by hover (fine pointers)
   or by the caret button (keyboard, touch). */
/* Anchored to the bar's right edge, under the Book a call button, so the
   wider Industries panel never runs off the screen. */
.nav__item[data-drop] { position: static; }
.drop {
  position: absolute; top: 100%; right: clamp(1.25rem, 3vw, 2.5rem); z-index: 2; padding-top: .35rem;
  opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none;
  transition: opacity 180ms var(--sc-ease-out), transform 220ms var(--sc-ease-out), visibility 0s 220ms;
}
.nav__item[data-open="true"] > .drop {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  transition: opacity 180ms var(--sc-ease-out), transform 220ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) and (min-width: 961px) {
  html:not(.drop-js) .nav__item[data-drop]:hover > .drop {
    opacity: 1; visibility: visible; transform: none; pointer-events: auto;
    transition: opacity 180ms var(--sc-ease-out) 60ms, transform 220ms var(--sc-ease-out) 60ms;
  }
}
.drop__in {
  display: grid; grid-template-columns: minmax(0, 1fr) 15rem; width: min(48rem, calc(100vw - 3rem));
  background: rgba(14, 14, 14, .97); border: 1px solid var(--line-strong); border-radius: var(--sc-r-md);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(0,0,0,.4);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); overflow: hidden;
}
#drop-industries .drop__in { width: min(54rem, calc(100vw - 3rem)); }
.drop__list { list-style: none; margin: 0; padding: .6rem; display: grid; gap: 2px; }
.drop__list--two { grid-template-columns: 1fr 1fr; }
.drop__list a {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .85rem; row-gap: .25rem;
  padding: .8rem .9rem; border-radius: var(--sc-r-sm); color: inherit; text-decoration: none; transition: background-color 160ms;
}
.drop__list a:hover, .drop__list a:focus-visible { background: #1A1A1A; }
.drop__n { grid-row: span 2; font-family: var(--sc-font-mono); font-size: .7rem; color: var(--amber); padding-top: .2rem; }
.drop__list b { font-family: var(--font-ui); font-weight: 500; font-size: .95rem; letter-spacing: -0.015em; color: var(--white); }
.drop__list small { color: var(--dim); font-size: .8rem; line-height: 1.4; }
.drop__list a:hover small { color: var(--sc-ink-soft); }
.drop__aside {
  display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; padding: 1.4rem 1.3rem;
  background: linear-gradient(180deg, #141414, #101010); border-left: 1px solid var(--line);
}
.drop__k { margin: 0; font-family: var(--font-ui); font-weight: 500; color: var(--white); font-size: 1rem; letter-spacing: -0.015em; }
.drop__aside p { margin: 0; color: var(--sc-ink-soft); font-size: .86rem; line-height: 1.5; }
.drop__aside .more { margin-top: .3rem; font-size: .86rem; }
.drop__all { margin-top: auto; padding-top: .9rem; font-family: var(--sc-font-mono); font-size: .72rem; letter-spacing: .04em; color: var(--amber); text-decoration: none; }
.drop__all::after { content: " \2192"; }
.drop__all:hover { color: var(--amber-hi); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1180px) and (min-width: 961px) {
  .bar__list { gap: .9rem; }
  .nav__top { font-size: .84rem; }
  .bar__in { gap: 1rem; }
}

@media (max-width: 960px) {
  /* The phone menu is a full sheet: solid to the bottom of the screen, and
     the page behind it does not scroll while it is open. */
  .bar__nav {
    position: fixed; inset: var(--bar-h) 0 0 0; margin: 0; height: calc(100dvh - var(--bar-h));
    overflow-y: auto; overscroll-behavior: contain;
    background: #0E0E0E; border-top: 1px solid var(--line);
    padding: .5rem clamp(1.25rem, 3vw, 2.5rem) 1.5rem;
    opacity: 0; transform: translateY(-8px); pointer-events: none; visibility: hidden;
    transition: opacity 200ms var(--sc-ease-out), transform 200ms var(--sc-ease-out), visibility 0s 200ms;
  }
  html:has(.bar[data-open="true"]), html:has(.bar[data-open="true"]) body { overflow: hidden; }
  .bar[data-open="true"] .bar__nav {
    opacity: 1; transform: none; pointer-events: auto; visibility: visible;
    transition: opacity 200ms var(--sc-ease-out), transform 200ms var(--sc-ease-out);
  }
  .bar__list { flex-direction: column; align-items: stretch; height: auto; gap: 0; }
  .nav__item { flex-wrap: wrap; height: auto; border-bottom: 1px solid var(--line); }
  .nav__top { flex: 1; display: block; padding: .95rem 0; font-size: 1.05rem; color: var(--white); }
  .nav__caret { width: 44px; height: 44px; margin-right: -10px; }
  .drop, .nav__item[data-open="true"] > .drop {
    position: static; flex-basis: 100%; padding: 0 0 .9rem; transform: none; opacity: 1; visibility: visible;
    pointer-events: auto; transition: none; display: none;
  }
  .nav__item[data-open="true"] > .drop { display: block; }
  .drop__in, #drop-industries .drop__in { display: block; width: auto; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .drop__list, .drop__list--two { grid-template-columns: 1fr; padding: 0; }
  .drop__list a { padding: .6rem .2rem; }
  .drop__list small { display: none; }
  .drop__aside { display: none; }
  .bar__nav { display: flex; flex-direction: column; }
  .bar__sheet-foot { display: grid; gap: .8rem; margin-top: auto; padding-top: 2rem; }
  .bar__sheet-links { list-style: none; margin: 0 0 .4rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
  .bar__sheet-links a { display: inline-block; padding: .45rem 0; color: var(--white); font-size: 1rem; font-weight: 500; }
  .bar__sheet-links a:hover, .bar__sheet-links a:focus-visible { color: var(--gold); }
  .bar__sheet-foot p { margin: 0; max-width: 34ch; color: var(--sc-ink-soft); font-size: .92rem; line-height: 1.5; }
  .bar__cta { margin-left: auto; }
  .bar__menu {
    display: inline-flex; align-items: center; justify-content: center;
    flex: none; width: 44px; height: 44px; margin-right: -10px; background: none; border: 0; cursor: pointer;
  }
  .bar__menu-lines, .bar__menu-lines::before, .bar__menu-lines::after {
    display: block; width: 20px; height: 2px; background: var(--white); border-radius: 2px;
    transition: transform 200ms var(--sc-ease-out), opacity 200ms;
  }
  .bar__menu-lines { position: relative; }
  .bar__menu-lines::before, .bar__menu-lines::after { content: ""; position: absolute; left: 0; }
  .bar__menu-lines::before { transform: translateY(-6px); }
  .bar__menu-lines::after { transform: translateY(6px); }
  .bar[data-open="true"] .bar__menu-lines { background: transparent; }
  .bar[data-open="true"] .bar__menu-lines::before { transform: rotate(45deg); }
  .bar[data-open="true"] .bar__menu-lines::after { transform: rotate(-45deg); }
}
@media (max-width: 420px) {
  .lockup { font-size: .8rem; letter-spacing: .12em; }
  .bar__in { gap: .75rem; }
  .bar__cta .btn__arrow { display: none; }
}

/* ------------------------------------------------------- trust strip --
   One line above the footer on every page: who owns it. */
.trust { background: #0B0B0B; border-top: 1px solid var(--line); }
.trust__in {
  max-width: var(--sc-maxw); margin-inline: auto; padding: 1.1rem var(--sc-gutter);
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.1rem;
}
.trust__key { color: var(--amber); flex: none; }
.trust p { margin: 0; color: var(--white); font-size: .95rem; line-height: 1.45; }
.trust .more { margin-left: auto; }
@media (max-width: 760px) { .trust .more { margin-left: 0; } }

/* -------------------------------------------------------------- footer -- */
.foot { background: #090909; border-top: 1px solid var(--line); color: var(--dim); font-size: .92rem; }
.foot__in {
  max-width: var(--sc-maxw); margin-inline: auto; padding: clamp(3rem, 6vw, 5rem) var(--sc-gutter) 2.5rem;
  display: grid; grid-template-columns: minmax(15rem, 1fr) 2.8fr; gap: clamp(2rem, 5vw, 5rem);
}
.foot__brand p { margin: 1.1rem 0 1.2rem; max-width: 32ch; color: var(--sc-ink-soft); line-height: 1.55; }
.foot__mail { font-family: var(--sc-font-mono); font-size: .8rem; }
.foot__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.foot__h {
  font-family: var(--sc-font-display); font-weight: 400; font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold); margin: 0 0 1rem;
}
/* Every column head reads the same gold, linked or not. */
.foot .foot__h a:not(.btn):not(.lockup):not(.more) { color: inherit; }
.foot .foot__h a:not(.btn):not(.lockup):not(.more):hover { color: var(--amber-hi); text-decoration: none; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li + li { margin-top: .55rem; }
.foot a:not(.btn):not(.lockup):not(.more) { color: var(--muted); text-decoration: none; }
.foot a:not(.btn):not(.lockup):not(.more):hover { color: var(--white); text-decoration: underline; text-decoration-color: var(--amber); text-underline-offset: 3px; }
.foot__legal {
  max-width: var(--sc-maxw); margin-inline: auto; padding: 1.25rem var(--sc-gutter) 2rem;
  display: flex; gap: 1.5rem; border-top: 1px solid var(--line); font-size: .85rem;
}
.foot__legal span { margin-right: auto; }
.foot__pulse { max-width: var(--sc-maxw); margin-inline: auto; padding: 1.4rem var(--sc-gutter); border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); gap: .6rem 2rem; align-items: center; }
.foot__pulse-h { margin: 0; color: var(--sc-ink-soft); line-height: 1.45; }
.foot__pulse-h b { font-weight: 500; color: var(--white); margin-right: .4rem; }
.foot__pulse-form { display: flex; gap: .5rem; min-width: 0; }
.foot__pulse-field { flex: 1 1 auto; min-width: 0; }
.foot__pulse-field input { width: 100%; min-height: 44px; padding: 0 .9rem; border-radius: 10px; border: 1px solid var(--line-strong); background: #0E0E0E; color: var(--white); font: inherit; font-size: .92rem; }
.foot__pulse-field input::placeholder { color: #6F6D6A; }
.foot__pulse-field input:focus-visible { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(245, 165, 36, .18); }
.foot__pulse .btn { min-height: 44px; flex: none; }
.foot__pulse-msg { grid-column: 2; margin: 0; font-size: .84rem; color: var(--white); }
.foot__pulse-err { color: #FF8A80; }
.foot__pulse [hidden] { display: none; }
@media (max-width: 760px) { .foot__pulse { grid-template-columns: 1fr; } .foot__pulse-msg { grid-column: 1; } }
@media (max-width: 420px) { .foot__pulse-form { flex-direction: column; } .foot__pulse .btn { width: 100%; justify-content: center; } }
@media (max-width: 960px) {
  .foot__in { grid-template-columns: 1fr; }
  .foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
}

/* Insights strip: the blog pipeline writes its <li>s between the markers. */
.latest { background: #0B0C0E; border-top: 1px solid var(--line); }
.latest__in {
  max-width: var(--sc-maxw); margin-inline: auto; padding: 2.5rem var(--sc-gutter);
  display: grid; grid-template-columns: 12rem 1fr auto; gap: 2rem; align-items: start;
}
.latest ul {
  list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem 2rem; counter-reset: post;
}
.latest li { border-top: 1px solid var(--line-strong); padding-top: .9rem; line-height: 1.4; }
.latest li a { color: var(--white); text-decoration: none; font-weight: 500; }
.latest li a:hover { text-decoration: underline; text-decoration-color: var(--gold); }
@media (max-width: 960px) { .latest__in { grid-template-columns: 1fr; gap: 1.25rem; } }

/* ---------------------------------------------------------- depth gauge --
   Fixed in the left margin. site.js writes --depth (0..1) and the readout.
   Decorative: aria-hidden, because every section it names has a heading. */
.gauge {
  position: fixed; z-index: 40; left: clamp(14px, 1.7vw, 28px); top: 50%;
  height: 54vh; width: 3.8rem; translate: 0 -50%;
  display: none; pointer-events: none;
  font-family: var(--sc-font-mono); color: var(--dim);
  opacity: var(--gauge-o, 1); transition: opacity 300ms var(--sc-ease-out);
}
@media (min-width: 1100px) { .gauge { display: block; } }
.gauge__track {
  position: absolute; left: 0; top: 2.2rem; bottom: 0; width: 9px;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.28) 0 1px, transparent 1px 10%);
  border-left: 1px solid rgba(255,255,255,.22);
}
.gauge__fill {
  position: absolute; left: -1px; top: 0; width: 1px; height: 100%;
  background: var(--gold); transform-origin: top; transform: scaleY(var(--depth, 0));
}
.gauge__needle {
  position: absolute; left: -4px; top: 0; width: 17px; height: 2px; background: var(--gold);
  transform: translateY(calc(var(--depth, 0) * (54vh - 2.2rem)));
}
.gauge__read {
  position: absolute; left: 0; top: 0; font-size: .74rem; color: var(--white);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.gauge__lbl {
  position: absolute; left: 1.2rem; top: 2.4rem; writing-mode: vertical-rl;
  font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
}
/* One short fact per stratum, set beside the label in the same column. */
.gauge__note {
  position: absolute; left: 2.75rem; top: 2.4rem; max-height: calc(54vh - 2.4rem); overflow: hidden;
  writing-mode: vertical-rl; font-size: .64rem; line-height: 1.2; color: rgba(255,255,255,.42);
  white-space: nowrap; letter-spacing: .02em;
}

/* Focus: one visible ring for every control, keyboard only. White on the
   gold buttons and the gold role pill, so the ring never vanishes into them. */
:where(a, button, [role="tab"], [tabindex]):focus-visible {
  outline: 2px solid var(--white); outline-offset: 3px; border-radius: var(--sc-r-sm);
}
.btn:focus-visible, .role:focus-visible, .q:focus-visible {
  outline: 2px solid #FFFFFF; outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(232, 168, 68, .35);
}
.role:focus-visible { border-radius: 999px; }

/* ================================================================ HOME == */

/* Act 1. Surface, first light ------------------------------------------- */
.hero .sc-stage__poster { object-position: 50% 60%; }
.hero__copy { max-width: min(52rem, 84vw); }
.hero__copy .lbl { margin-bottom: 1.25rem; }
.hero h1 { font-size: var(--sc-t-4xl); max-width: 15ch; }
.hero__sub { margin-top: 1.4rem; max-width: 40rem; color: var(--muted); font-size: var(--sc-t-lg); line-height: 1.45; }
/* The payoff of the descent: it lands on the drilled face and holds, so the
   line that answers "who are these people" lands with it, at display size. */
.hero__strip { margin: 0; color: var(--white); text-align: right; }
.hero__strip b {
  display: block; font-family: var(--sc-font-mono); font-size: .82rem; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gold);
}
.hero__strip span {
  display: block; margin-top: .7rem; font-family: var(--sc-font-display); font-size: var(--sc-t-3xl);
  line-height: 1.02; letter-spacing: -0.012em; max-width: 11ch; margin-left: auto;
}
@media (max-width: 860px) { .hero__strip { text-align: left; } .hero__strip span { margin-left: 0; } }
.hero .sc-scrim--lead {
  background: linear-gradient(to top right, rgba(10,10,10,.96) 0%, rgba(10,10,10,.86) 34%,
    rgba(10,10,10,.5) 56%, transparent 78%);
}
.hero__trail-scrim {
  background: linear-gradient(to top left, rgba(10,10,10,.94) 0%, rgba(10,10,10,.72) 28%, transparent 52%);
}
.hero__shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(10,10,10,.55), transparent 22%);
}

/* Act 2. The face ---------------------------------------------------------- */
.face { position: relative; padding-block: clamp(5rem, 12vw, 10rem) clamp(4rem, 9vw, 8rem); }
.face__grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6rem); align-items: center;
}
.face h2 { font-size: var(--sc-t-3xl); max-width: 13ch; }
.face__lines > p { font-size: var(--sc-t-lg); line-height: 1.45; color: var(--muted); max-width: 32ch; }
.face__lines > p + p { margin-top: 1.1rem; }
.face__small { font-size: var(--sc-t-sm) !important; color: var(--sc-ink-soft) !important; }
.face__small b { color: var(--gold); font-weight: 600; }
.face__photo { position: relative; margin: 0; }
.face__photo-in {
  position: relative; border-radius: var(--sc-r-md); overflow: hidden; aspect-ratio: 4 / 5;
  box-shadow: var(--sc-e3); background: #1a1a1a;
}
.face__photo img { width: 100%; height: 112%; object-fit: cover; margin-top: -6%; max-width: none; }
.retype {
  position: absolute; left: clamp(-3rem, -4vw, -1rem); bottom: 8%; z-index: 2;
  display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none;
}
.retype li {
  display: flex; align-items: center; gap: .6rem; padding: .5rem .8rem;
  background: rgba(15,15,15,.94); border: 1px solid var(--line-strong); border-radius: var(--sc-r-sm);
  font-size: .82rem; color: var(--muted); box-shadow: var(--sc-e2);
}
.retype li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.retype li:nth-child(2) { margin-left: 1.2rem; }
.retype li:nth-child(3) { margin-left: 2.4rem; }
.retype li:nth-child(4) { margin-left: 3.6rem; }
@media (max-width: 860px) {
  .face__grid { grid-template-columns: 1fr; }
  .face__photo-in { aspect-ratio: 4 / 3; }
  .retype { left: auto; right: .75rem; bottom: .75rem; }
}

/* Act 3. The descent: the daily report travels ------------------------------ */
.descent .sc-stage { display: grid; align-items: center; }
.descent__ground { position: absolute; inset: -20% 0; z-index: 0; pointer-events: none; }
.descent__ground img { width: 100%; height: 100%; object-fit: cover; opacity: .55; max-width: none; }
/* Strata hairlines that rise as you go down. Transform only. */
.strata {
  position: absolute; inset: 0 0 -60% 0; opacity: .5;
  background:
    repeating-linear-gradient(to bottom, transparent 0 11vh, rgba(255,255,255,.05) 11vh calc(11vh + 1px)),
    repeating-linear-gradient(to bottom, transparent 0 37vh, rgba(232,168,68,.10) 37vh calc(37vh + 1px));
  transform: translate3d(0, calc(var(--sc-p, 0) * -40%), 0);
}
.descent__grid {
  position: relative; z-index: 2; width: 100%; height: 100%;
  max-width: var(--sc-maxw); margin-inline: auto; padding: calc(var(--bar-h) + 1rem) var(--sc-gutter) 2rem;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 39rem);
  gap: clamp(2rem, 6vw, 6rem); align-items: center;
}
.descent__copy { position: relative; height: 22rem; }
.stamp, .descent__resolve { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; }
.stamp__n {
  font-family: var(--sc-font-mono); font-size: .82rem; color: var(--gold); letter-spacing: .1em; margin: 0 0 1rem;
}
.stamp__t { font-family: var(--sc-font-display); font-weight: 400; color: var(--white); font-size: var(--sc-t-3xl); line-height: 1; margin: 0; }
.stamp__s { margin: 1.2rem 0 0; font-size: var(--sc-t-lg); line-height: 1.45; color: var(--muted); max-width: 30ch; }
.descent__resolve { font-size: var(--sc-t-3xl); max-width: 12ch; }
.descent__resolve span { color: var(--gold); }
.descent__card { position: relative; justify-self: end; width: 100%; }

@media (max-width: 860px) {
  .descent__grid {
    grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: start;
    padding: calc(var(--bar-h) + .5rem) 1rem 1rem; gap: 0;
  }
  /* Card on top, the stamp copy in the row below it (DOM order is copy
     first for reading order, so place them explicitly). */
  .descent__card { justify-self: stretch; grid-row: 1; }
  .descent__copy { height: auto; min-height: 0; align-self: stretch; grid-row: 2; }
  .stamp, .descent__resolve { top: 1.6rem; translate: none; padding-inline: .25rem; }
  .stamp__n { margin-bottom: .5rem; }
  .stamp__s { margin-top: .6rem; font-size: 1rem; }
  .stamp__t, .descent__resolve { font-size: 2rem; }
}

/* Act 4. Control room ------------------------------------------------------ */
.room .sc-stage { display: flex; align-items: center; }
/* The room the screens live in: a rock-cut control room, dimmed, drifting a
   little against the rail so the frames read as glass in front of it. */
.room__ground { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.room__ground img {
  width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; opacity: .32; max-width: none;
  transform: scale(1.08) translate3d(calc(var(--sc-p, 0) * -4%), 0, 0);
}
.room__ground::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, #0C0C0C 0%, transparent 22%, transparent 70%, #0C0C0C 100%);
}
.room__rail { position: relative; z-index: 1; }
.room__rail { gap: clamp(1.25rem, 3vw, 3rem); padding-inline: var(--sc-gutter); align-items: center; }
.room__lead { flex: none; width: min(30rem, 80vw); }
.room__lead h2 { font-size: var(--sc-t-3xl); }
.room__lead p { margin-top: 1.25rem; font-size: var(--sc-t-lg); color: var(--muted); line-height: 1.45; max-width: 26ch; }
.room__lead .more { margin-top: 1.75rem; }
.room__lead .room__demo { margin-top: .9rem; font-size: .8rem; color: var(--dim); font-family: var(--sc-font-mono); }
.panel { flex: none; width: min(46rem, 84vw); margin: 0; }
.panel__frame {
  border-radius: var(--sc-r-md); overflow: hidden; border: 1px solid var(--line-strong);
  background: var(--panel); box-shadow: var(--sc-e3); aspect-ratio: 16 / 10; position: relative;
}
.panel__frame > img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.panel figcaption { display: flex; gap: 1rem; align-items: baseline; margin-top: 1.1rem; }
.panel h3 {
  font-family: var(--sc-font-display); font-weight: 400; font-size: 1.15rem; color: var(--white);
  margin: 0; flex: none; letter-spacing: .01em;
}
.panel figcaption p { margin: 0; color: var(--sc-ink-soft); font-size: .98rem; line-height: 1.45; }
.room__end { flex: none; width: min(22rem, 70vw); color: var(--sc-ink-soft); font-size: .95rem; }
.room__end p { margin: 0 0 1rem; }
@media (prefers-reduced-motion: no-preference) {
  .room .panel { opacity: clamp(.55, calc(1.6 - (var(--i) / 7 - var(--sc-p, 0)) * 4), 1); }
}
@media (max-width: 860px) {
  .panel figcaption { flex-direction: column; gap: .35rem; }
}

/* Act 5. Who we build for ------------------------------------------------- */
.who { padding-block: clamp(5rem, 10vw, 9rem); }
.who h2 { font-size: var(--sc-t-3xl); max-width: 14ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.who__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.trade { margin: 0; }
.trade:nth-child(even) { margin-top: clamp(0rem, 8vw, 7rem); }
.trade__img { border-radius: var(--sc-r-md); overflow: hidden; aspect-ratio: 4 / 3; background: #1a1a1a; }
.trade__img img { width: 100%; height: 100%; object-fit: cover; }
.trade figcaption { padding: 1.25rem .25rem 0; }
.trade h3 { font-family: var(--sc-font-display); font-weight: 400; color: var(--white); font-size: var(--sc-t-xl); margin: 0; }
.trade h3 small { display: block; margin-top: .35rem; font-family: var(--sc-font-text); font-size: .9rem; color: var(--gold); letter-spacing: 0; }
.trade p { margin: .8rem 0 0; color: var(--sc-ink-soft); max-width: 40ch; }
@media (max-width: 760px) {
  .who__grid { grid-template-columns: 1fr; }
  .trade:nth-child(even) { margin-top: 0; }
}

/* Act 6. How we work ------------------------------------------------------- */
.how .sc-stage { display: flex; align-items: center; }
.how__in { width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding: calc(var(--bar-h) + 1rem) var(--sc-gutter) 2rem; }
.how h2 { font-size: var(--sc-t-3xl); max-width: 16ch; }
.steps { list-style: none; margin: clamp(2.5rem, 6vh, 4.5rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); }
.steps li { border-top: 1px solid var(--line-strong); padding-top: 1.5rem; }
.steps__n { font-family: var(--sc-font-display); color: var(--gold); font-size: var(--sc-t-2xl); line-height: 1; }
.steps h3 { font-family: var(--sc-font-display); font-weight: 400; color: var(--white); font-size: var(--sc-t-xl); margin: 1rem 0 .75rem; }
.steps p { margin: 0; color: var(--sc-ink-soft); max-width: 34ch; }
.how__more { margin-top: 2.5rem; }
@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr; gap: 1.1rem; margin-top: 1.5rem; }
  .steps li { padding-top: 1rem; display: grid; grid-template-columns: 2.6rem 1fr; column-gap: .5rem; }
  .steps__n { font-size: 1.4rem; grid-row: span 2; }
  .steps h3 { margin: 0 0 .35rem; font-size: 1.25rem; }
  .steps p { font-size: .95rem; line-height: 1.5; }
}

/* Act 7. Hard questions ---------------------------------------------------- */
.ask { padding-block: clamp(5rem, 10vw, 9rem); }
.ask__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.ask h2 { font-size: var(--sc-t-3xl); max-width: 11ch; }
.ask__intro p { margin-top: 1.25rem; color: var(--muted); font-size: var(--sc-t-lg); line-height: 1.45; max-width: 28ch; }
.ask__intro .more { margin-top: 2rem; }
@media (max-width: 960px) { .ask__grid { grid-template-columns: 1fr; } }

/* The plain list: what search engines and no-JS visitors read. site.js builds
   the console from it and hides it. */
.qa-all { margin-top: 2rem; }
.qa-all h3 { color: var(--gold); font-family: var(--sc-font-display); font-weight: 400; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; margin: 2rem 0 .75rem; }
.qa-all dl { margin: 0; }
.qa-all dt { color: var(--white); font-weight: 600; margin-top: 1.1rem; }
.qa-all dd { margin: .3rem 0 0; color: var(--sc-ink-soft); }

/* Act 8. Proof ------------------------------------------------------------- */
.proof { padding-block: clamp(4rem, 9vw, 8rem); }
.counts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem; }
.counts li { border-top: 1px solid var(--line-strong); padding-top: 1.1rem; }
.counts b { display: block; font-family: var(--sc-font-display); font-weight: 400; color: var(--white); font-size: var(--sc-t-2xl); line-height: 1; white-space: nowrap; }
.counts b small { font-size: .5em; color: var(--gold); margin-right: .2em; font-family: var(--sc-font-text); font-weight: 600; letter-spacing: 0; vertical-align: .35em; }
.counts li > span { display: block; margin-top: .65rem; color: var(--sc-ink-soft); font-size: .92rem; line-height: 1.4; max-width: 18ch; }
.quotes { margin-top: clamp(4rem, 8vw, 7rem); display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(2rem, 4vw, 4rem); }
.quote { margin: 0; }
.quote blockquote { margin: 0; color: var(--white); font-size: var(--sc-t-lg); line-height: 1.4; }
.quote--big blockquote { font-family: var(--sc-font-display); font-size: var(--sc-t-2xl); line-height: 1.12; }
.quote blockquote::before { content: "\201C"; color: var(--gold); }
.quote blockquote::after { content: "\201D"; color: var(--gold); }
.quote figcaption { margin-top: 1.1rem; color: var(--sc-ink-soft); font-size: .92rem; }
.quote figcaption b { color: var(--muted); font-weight: 600; }
.quotes__side { display: grid; gap: 2.5rem; align-content: start; }
@media (max-width: 960px) {
  .counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .counts li:last-child { grid-column: span 2; }
  .quotes { grid-template-columns: 1fr; }
}

/* Act 9. Night close -------------------------------------------------------- */
.close .sc-stage { display: flex; align-items: center; }
.close__photo { position: absolute; inset: 0; z-index: 0; }
.close__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; opacity: .5; max-width: none; }
.close__photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, #08090C 0%, rgba(8,9,12,.92) 36%, rgba(8,9,12,.35) 75%, rgba(8,9,12,.6) 100%);
}
.close__in { position: relative; z-index: 3; width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding: var(--bar-h) var(--sc-gutter) 0; }
.close h2 { font-size: var(--sc-t-3xl); max-width: 14ch; }
.close__sub { margin: 1.5rem 0 2.25rem; color: var(--muted); font-size: var(--sc-t-lg); line-height: 1.45; max-width: 34ch; }
.close__row { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 1.75rem; }
.close__mail { color: var(--sc-ink-soft); }
.close__mail a { color: var(--white); }
@media (max-width: 860px) {
  .close__photo::after { background: linear-gradient(0deg, #08090C 0%, rgba(8,9,12,.92) 45%, rgba(8,9,12,.4) 100%); }
  .close .sc-stage { align-items: flex-end; }
  .close__in { padding-bottom: 3rem; }
}

/* ========================================================= PRODUCT UI KIT ==
   Big Dog OS, new look: near-black panels, hairlines, amber primary with key
   hints, green "Saved", mono timestamps. Demo company only (Ridgeline
   Drilling), labelled made-up data on every surface. */
/* Exact Big Dog OS new-look tokens, scoped to product surfaces only, so the
   card in the descent and the console read as the real product, not as a
   marketing drawing of it. The site around them keeps the brand tokens. */
.ui {
  --panel: #0E0E0E; --panel-2: #141414; --raise: #1A1A1A;
  --line: #1E1E1E; --line-strong: #2A2A2A;
  --white: #F2F0EB; --muted: #A3A3A3; --dim: #858380;
  --gold: #F5A524; --gold-soft: rgba(245, 165, 36, .13);
  --ok: #6FCF7F; --ok-soft: rgba(111, 207, 127, .13); --bad: #F0524B;
  --sc-font-text: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --sc-font-mono: "Geist Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --sc-font-display: var(--sc-font-text);
  --sc-r-sm: 6px; --sc-r-md: 14px;
  font-family: var(--sc-font-text); font-feature-settings: "ss01";
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--sc-r-md);
  box-shadow: var(--sc-e3), inset 0 1px 0 rgba(255,255,255,.06);
  color: var(--white); font-size: .88rem; line-height: 1.45; overflow: hidden;
}
/* Numbers in Geist Mono, headlines 500 with tight tracking, as in the app. */
.ui .change__num, .ui .tile b { font-family: var(--sc-font-mono); font-weight: 500; letter-spacing: -0.03em; }
.ui .fb__h, .ui .morning__hi { font-weight: 500; letter-spacing: -0.02em; }
.ui .uibtn--gold:hover { background: #FFB847; }
.ui__head { display: flex; align-items: center; gap: .6rem; padding: .85rem 1rem; border-bottom: 1px solid var(--line); }
.ui__co { font-weight: 600; color: var(--white); }
.ui__when { margin-left: auto; color: var(--dim); font-family: var(--sc-font-mono); font-size: .74rem; }
.ui__foot { padding: .55rem 1rem; border-top: 1px solid var(--line); color: var(--dim); font-size: .72rem; }
.ui__avatar { width: 24px; height: 24px; border-radius: 50%; background: #1E1E1E; display: grid; place-items: center; flex: none; overflow: hidden; }
.ui__avatar img { width: 18px; height: 18px; }

.track { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .3rem; padding: .7rem 1rem .8rem; border-bottom: 1px solid var(--line); }
.track__s { position: relative; padding-top: .7rem; font-size: .72rem; color: var(--dim); line-height: 1.2; }
.track__s::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 2px; background: rgba(255,255,255,.12); }
.track__s::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 2px; background: var(--gold); transform-origin: left; transform: scaleX(0); transition: transform 360ms var(--sc-ease-out); }
.track__s i { display: block; font-style: normal; font-family: var(--sc-font-mono); font-size: .66rem; margin-top: .15rem; opacity: .8; }
.track__s.is-done, .track__s.is-now { color: var(--white); }
.track__s.is-done::after, .track__s.is-now::after { transform: scaleX(1); }
.track__s.is-done::after { background: rgba(245,165,36,.55); }

.chip {
  display: inline-flex; align-items: center; gap: .35rem; padding: .18rem .55rem; border-radius: 999px;
  font-size: .72rem; font-weight: 600; white-space: nowrap; line-height: 1.5;
}
.chip--gold { background: var(--gold-soft); color: var(--gold); }
.chip--ok { background: var(--ok-soft); color: var(--ok); }
.chip--ok::before { content: "\2713"; }
.chip--line { border: 1px solid var(--line-strong); color: var(--muted); font-weight: 500; }
.key { display: inline-grid; place-items: center; min-width: 1.2rem; height: 1.2rem; padding: 0 .25rem; border-radius: 4px; background: rgba(0,0,0,.18); font-family: var(--sc-font-mono); font-size: .66rem; }
.uibtn { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .8rem; border-radius: var(--sc-r-sm); font-weight: 600; font-size: .8rem; }
.uibtn--gold { background: var(--gold); color: #121212; }
.uibtn--line { border: 1px solid var(--line-strong); color: var(--muted); }

/* The travelling report: one card, five states, crossfaded on data-step. */
.fb__states { position: relative; height: 26rem; }
@media (min-width: 861px) { .fb { font-size: .95rem; } }
.fb__state {
  position: absolute; inset: 0; padding: 1rem; display: flex; flex-direction: column; gap: .7rem;
  opacity: 0; transform: translateY(10px); visibility: hidden;
  transition: opacity 420ms var(--sc-ease-out), transform 420ms var(--sc-ease-out), visibility 0s 420ms;
}
.fb[data-step="1"] .fb__state[data-s="1"], .fb[data-step="2"] .fb__state[data-s="2"],
.fb[data-step="3"] .fb__state[data-s="3"], .fb[data-step="4"] .fb__state[data-s="4"],
.fb[data-step="5"] .fb__state[data-s="5"] {
  opacity: 1; transform: none; visibility: visible;
  transition: opacity 420ms var(--sc-ease-out), transform 420ms var(--sc-ease-out), visibility 0s;
}
/* Before site.js runs (or without it) the first state shows. */
.fb:not([data-step]) .fb__state[data-s="1"] { opacity: 1; transform: none; visibility: visible; }
.fb__app { display: flex; align-items: center; gap: .55rem; color: var(--dim); font-size: .74rem; }
.fb__app b { color: var(--white); font-weight: 600; font-size: .84rem; }
.msg { max-width: 82%; padding: .55rem .7rem; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); }
.msg--me { align-self: flex-end; background: #1E170B; border-color: rgba(245,165,36,.25); }
.msg time { display: block; text-align: right; font-family: var(--sc-font-mono); font-size: .64rem; color: var(--dim); margin-top: .2rem; }
.msg__photo { width: 100%; aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; background: #2a2620; margin-bottom: .45rem; }
.msg__photo img { width: 100%; height: 100%; object-fit: cover; }
.msg__by { display: flex; align-items: center; gap: .4rem; font-size: .72rem; color: var(--gold); font-weight: 600; margin-bottom: .2rem; }
.voice { display: flex; align-items: center; gap: .55rem; }
.voice__play { width: 0; height: 0; border-left: 9px solid var(--white); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.voice__wave { display: flex; align-items: center; gap: 2px; height: 22px; }
.voice__wave span { width: 2px; border-radius: 1px; background: var(--muted); }
.checks { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; padding-top: .7rem; border-top: 1px solid var(--line); }
.checks .chip { opacity: clamp(.25, calc((var(--lp, 1) * 5 - var(--k)) * 2), 1); }

.change { border: 1px solid var(--line); border-radius: 10px; padding: .75rem .85rem; background: var(--panel-2); }
.change__top { display: flex; justify-content: space-between; gap: .5rem; color: var(--dim); font-size: .74rem; }
.change__num { font-family: var(--sc-font-display); color: var(--white); font-size: 1.55rem; line-height: 1.1; margin-top: .3rem; }
.change__num small { font-family: var(--sc-font-text); font-size: .8rem; color: var(--dim); font-weight: 500; }
.change__bar { position: relative; height: 2px; background: rgba(255,255,255,.12); margin: .7rem 0 .55rem; border-radius: 2px; }
.change__bar i { position: absolute; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--gold); }
.change__src { display: flex; justify-content: space-between; align-items: center; font-size: .72rem; color: var(--dim); }
.change__src span { font-family: var(--sc-font-mono); }
.fb__h { font-size: 1.15rem; font-weight: 600; color: var(--white); line-height: 1.25; }
.fb__h span { display: block; color: var(--dim); font-weight: 500; font-size: .95rem; }
.fb__acts { display: flex; gap: .5rem; align-items: center; margin-top: auto; position: relative; min-height: 2.4rem; }
.fb__acts > * { transition: opacity 260ms var(--sc-ease-out); }
.fb__approved { position: absolute; left: 0; top: 50%; translate: 0 -50%; opacity: 0; }
.fb[data-pressed="true"] .fb__acts .uibtn { opacity: 0; }
.fb[data-pressed="true"] .fb__approved { opacity: 1; }

.inv { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.inv__row { display: grid; grid-template-columns: 3.2rem 1fr auto; gap: .5rem; padding: .6rem .8rem; border-top: 1px solid var(--line); align-items: baseline; }
.inv__row:first-child { border-top: 0; background: var(--panel-2); color: var(--dim); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }
.inv__row span:first-child { font-family: var(--sc-font-mono); color: var(--dim); font-size: .74rem; }
.inv__row b { color: var(--white); font-weight: 600; font-variant-numeric: tabular-nums; }
.cap { font-size: .74rem; color: var(--dim); }
.cap__bar { height: 6px; border-radius: 6px; background: rgba(255,255,255,.08); margin-top: .4rem; overflow: hidden; }
.cap__bar i { display: block; height: 100%; background: var(--gold); transform-origin: left; transform: scaleX(calc(.62 * clamp(.15, var(--lp, 1) * 1.6, 1))); border-radius: 6px; }
.trail { display: flex; gap: .4rem; flex-wrap: wrap; }

.morning__hi { font-size: 1.3rem; font-weight: 600; color: var(--white); line-height: 1.2; }
.morning__hi span { display: block; color: var(--dim); font-size: .9rem; font-weight: 500; margin-top: .2rem; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
.tile { border: 1px solid var(--line); border-radius: 10px; padding: .6rem .65rem; background: var(--panel-2); }
.tile small { display: block; color: var(--dim); font-size: .68rem; }
.tile b { display: block; font-family: var(--sc-font-display); font-weight: 400; color: var(--white); font-size: 1.2rem; margin-top: .15rem; }
.need { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border: 1px solid rgba(245,165,36,.28); border-radius: 10px; background: rgba(245,165,36,.06); }
.need p { margin: 0; flex: 1; font-size: .82rem; }
.need::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex: none; }

@media (max-width: 860px) {
  .ui { font-size: .8rem; }
  .fb__states { height: 15.5rem; }
  .fb__state { padding: .75rem; gap: .5rem; }
  .fb .track { padding: .55rem .75rem .6rem; }
  .fb .track__s { font-size: .64rem; }
  .fb .track__s i { display: none; }
  .msg__photo { aspect-ratio: 16 / 7; }
  .tiles { gap: .35rem; }
  .tile b { font-size: 1rem; }
  .change { padding: .55rem .7rem; }
  .change__num { font-size: 1.2rem; }
  .fb__hide-sm { display: none !important; }
}

/* Control room fallback panels (used only when a product frame is missing). */
.mini { position: absolute; inset: 0; display: grid; grid-template-columns: 9.5rem 1fr; font-size: .78rem; color: #EDEDED; }
.mini__rail { border-right: 1px solid var(--line); padding: .9rem .75rem; display: grid; align-content: start; gap: .2rem; color: var(--dim); }
.mini__rail span { padding: .35rem .5rem; border-radius: 6px; }
.mini__rail .is-on { background: rgba(255,255,255,.06); color: var(--white); }
.mini__main { padding: 1rem 1.1rem; display: grid; align-content: start; gap: .65rem; overflow: hidden; }
.mini__h { font-size: 1.05rem; color: var(--white); font-weight: 600; }
.mini__h span { color: var(--dim); font-weight: 500; }
.mini__row { display: grid; grid-template-columns: 1fr auto auto; gap: .75rem; align-items: center; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); }
.mini__row small { color: var(--dim); font-family: var(--sc-font-mono); font-size: .68rem; }
.mini__row b { color: var(--white); font-weight: 600; font-variant-numeric: tabular-nums; }
.mini__steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: .35rem; }
.mini__steps span { height: 2.4rem; border-radius: 6px; border: 1px solid var(--line); background: var(--panel-2); display: grid; place-items: center; color: var(--dim); font-size: .68rem; }
.mini__steps .is-slow { border-color: rgba(245,165,36,.45); color: var(--gold); background: rgba(245,165,36,.07); }
.mini__ans { padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); line-height: 1.5; }
.mini__ans small { display: block; margin-top: .5rem; color: var(--gold); font-family: var(--sc-font-mono); font-size: .68rem; }
.mini__tag { position: absolute; right: .8rem; bottom: .6rem; color: var(--dim); font-size: .66rem; }
@media (max-width: 860px) { .mini { grid-template-columns: 1fr; } .mini__rail { display: none; } }

/* The Ask Big Dog console ---------------------------------------------------- */
.console { position: sticky; top: calc(var(--bar-h) + 1.5rem); }
.console__roles { display: flex; flex-wrap: wrap; gap: .4rem; padding: .85rem 1rem; border-bottom: 1px solid var(--line); }
.role {
  min-height: 36px; padding: .4rem .85rem; border-radius: 999px; border: 1px solid var(--line-strong);
  background: transparent; color: var(--muted); font-size: .82rem; font-weight: 500; cursor: pointer;
  transition: background-color 140ms, color 140ms, border-color 140ms;
}
.role:hover { border-color: rgba(255,255,255,.4); color: var(--white); }
.role[aria-selected="true"] { background: var(--gold); border-color: var(--gold); color: #121212; font-weight: 600; }
.console__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); min-height: 22rem; }
.console__qs { list-style: none; margin: 0; padding: .6rem; border-right: 1px solid var(--line); display: grid; align-content: start; gap: .2rem; }
.q {
  width: 100%; text-align: left; background: none; border: 0; border-radius: var(--sc-r-sm);
  padding: .65rem .7rem; color: var(--muted); font-size: .86rem; line-height: 1.4; cursor: pointer;
  display: grid; grid-template-columns: 1.6rem 1fr; gap: .2rem;
}
.q span { font-family: var(--sc-font-mono); color: var(--dim); font-size: .72rem; padding-top: .1rem; }
.q:hover { background: rgba(255,255,255,.04); color: var(--white); }
.q[aria-pressed="true"] { background: rgba(245,165,36,.09); color: var(--white); box-shadow: inset 2px 0 0 var(--gold); }
.console__ans { padding: 1.1rem 1.2rem 1.2rem; display: flex; flex-direction: column; gap: .8rem; }
.console__q { color: var(--white); font-weight: 600; font-size: .98rem; line-height: 1.35; }
.console__by { display: flex; align-items: center; gap: .5rem; color: var(--gold); font-size: .74rem; font-weight: 600; }
.console__by time { margin-left: auto; color: var(--dim); font-family: var(--sc-font-mono); font-weight: 400; }
.console__a { color: #E6E6E6; font-size: .95rem; line-height: 1.6; min-height: 7.5rem; }
.console__caret { display: inline-block; width: 7px; height: 1em; background: var(--gold); vertical-align: -.15em; margin-left: 2px; }
.console__src { margin-top: auto; padding-top: .8rem; border-top: 1px solid var(--line); display: flex; gap: .5rem; align-items: center; font-size: .72rem; color: var(--dim); }
.console__src span { font-family: var(--sc-font-mono); }
@media (max-width: 760px) {
  .console { position: static; }
  .console__body { grid-template-columns: 1fr; }
  .console__qs { border-right: 0; border-bottom: 1px solid var(--line); }
}

/* -------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .strata { transform: none; }
  .fb__state, .fb[data-step] .fb__state, .track__s::after, .btn, .bar__nav, .more::after { transition: none !important; }
  .fb__state { transform: none; }
  .room .panel { opacity: 1; }
  .room__ground img { transform: scale(1.08); }
  /* The pan becomes a native scroll region under reduced motion (engine). */
}
@media (prefers-reduced-transparency: reduce) {
  .bar::before { background: #121212; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ============================================================== INNER ==
   Inner pages: same world as the home (dark ground, strata, amber, the depth
   gauge), light devices only: flow sections, data-sc-in reveals, counts and
   one pan on the platform page. Each page brings its own hero art; the parts
   below are the shared vocabulary they are built from. */

/* Type on inner pages: Archivo Black is for the page H1 only. Every other
   heading is Geist 500 with tight tracking, the product's own voice. */
:root { --font-ui: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
.h2, .h3 { font-family: var(--font-ui); font-weight: 500; color: var(--white); margin: 0; text-wrap: balance; }
.h2 { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.2rem); line-height: 1.06; letter-spacing: -0.035em; max-width: 22ch; }
.h3 { font-size: clamp(1.3rem, 1rem + 1vw, 1.75rem); line-height: 1.15; letter-spacing: -0.025em; }

/* Section rhythm. More air above a heading than below it. */
.sec { position: relative; padding-block: clamp(4rem, 8vw, 7.5rem); }
.sec--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.sec--line { border-top: 1px solid var(--line); }
/* A section that continues the one before it: no second band of air. */
.sec--snug { padding-block: clamp(2rem, 4vw, 3.5rem); }
.sec--snug-end { padding-bottom: clamp(2rem, 4vw, 3.5rem); }
.sec__intro { margin-top: 1.1rem; max-width: 44ch; color: var(--sc-ink-soft); font-size: var(--sc-t-lg); line-height: 1.5; text-wrap: pretty; }
.prose { max-width: 62ch; }
.prose p { margin: 0; color: var(--muted); font-size: 1.06rem; line-height: 1.7; text-wrap: pretty; }
.prose p + p { margin-top: 1.1rem; }
.prose strong { color: var(--white); font-weight: 600; }
.prose a { color: var(--white); text-decoration-color: var(--gold); text-underline-offset: 3px; }
.h2 + .prose { margin-top: 1.5rem; }
.prose + .more { margin-top: 1.75rem; }

/* ---------------------------------------------------------- inner hero -- */
.ih { position: relative; overflow: hidden; padding: calc(var(--bar-h) + clamp(2.5rem, 6vw, 5rem)) 0 clamp(3.5rem, 7vw, 6rem); }
.ih__ground { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ih__ground img {
  width: 100%; height: 100%; object-fit: cover; max-width: none; opacity: .5;
  -webkit-mask-image: linear-gradient(100deg, transparent 18%, #000 70%);
  mask-image: linear-gradient(100deg, transparent 18%, #000 70%);
}
.ih__ground::after {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(to bottom, transparent 0 11vh, rgba(255,255,255,.04) 11vh calc(11vh + 1px)),
    linear-gradient(to bottom, transparent 60%, var(--sc-canvas) 100%);
}
.ih__grid {
  position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.22fr);
  gap: clamp(2.5rem, 6vw, 6rem); align-items: center;
}
.ih__grid--wide-copy { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.ih h1 { font-size: clamp(2.3rem, 1.25rem + 2.9vw, 3.9rem); line-height: 1.02; max-width: 17ch; margin-top: 1.4rem; text-wrap: balance; }
.ih__sub { margin-top: 1.4rem; max-width: 38ch; color: var(--muted); font-size: var(--sc-t-lg); line-height: 1.45; text-wrap: pretty; }
.ih__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: 2.2rem; }
.ih__acts .more { font-size: .95rem; }
/* Each hero CTA is as wide as its button and its sub wraps under it, so a
   long sub never pushes the second button onto its own row. */
.ih__acts .cta { width: min-content; align-self: flex-start; }
.ih__acts .btn { white-space: nowrap; }
.ih__acts .cta__sub { max-width: none; }
.ih__art { position: relative; margin: 0; min-width: 0; }
@media (min-width: 1200px) { .ih__art { margin-right: calc(-1 * clamp(0rem, 4vw, 4rem)); } }
@media (max-width: 860px) {
  .ih__grid, .ih__grid--wide-copy { grid-template-columns: 1fr; gap: 2.5rem; }
  .ih h1 { font-size: clamp(2.1rem, 1.2rem + 4vw, 2.8rem); }
}

/* Breadcrumb: wayfinding, not an eyebrow. Mono, quiet, one line. */
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .2rem .5rem; margin: 0; padding: 0;
  font-family: var(--sc-font-mono); font-size: .76rem; letter-spacing: .04em; color: var(--dim); }
.crumbs li + li::before { content: "/"; margin-right: .5rem; color: rgba(255,255,255,.22); }
.crumbs a { color: var(--sc-ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--white); }
.crumbs [aria-current] { color: var(--gold); }

/* ------------------------------------------- product frames, composed --
   A desktop screen with a phone over its corner. Variants move the phone or
   swap it for a second screen, so no two heroes share a composition. */
.stack { position: relative; aspect-ratio: 16 / 11.2; }
.stack__desk, .stack__desk2, .stack__phone, .stack__paper { position: absolute; margin: 0; }
.stack__desk {
  right: 0; top: 0; width: 90%; aspect-ratio: 16 / 10; border-radius: var(--sc-r-md); overflow: hidden;
  border: 1px solid var(--line-strong); background: var(--panel); box-shadow: var(--sc-e3);
}
.stack__desk img, .stack__desk2 img { width: 100%; height: 100%; object-fit: cover; object-position: top left; max-width: none; }
.stack__phone {
  left: 0; bottom: 0; width: 26%; aspect-ratio: 780 / 1480; border-radius: 22px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.22); background: #0B0B0B;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.8), 0 10px 20px rgba(0,0,0,.4), var(--sc-edge);
}
.stack__phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; max-width: none; }
.stack--phone-right .stack__desk { left: 0; right: auto; }
.stack--phone-right .stack__phone { left: auto; right: 0; }
.stack--duo { aspect-ratio: 16 / 12; }
.stack--duo .stack__desk { width: 82%; top: 0; right: 0; opacity: .72; }
.stack__desk2 {
  left: 0; bottom: 0; width: 82%; aspect-ratio: 16 / 10; border-radius: var(--sc-r-md); overflow: hidden;
  border: 1px solid var(--line-strong); background: var(--panel);
  box-shadow: 0 30px 60px -24px rgba(0,0,0,.85), var(--sc-e3);
}
.stack__paper { left: -2%; bottom: 4%; width: 44%; rotate: -7deg; filter: drop-shadow(0 24px 30px rgba(0,0,0,.6)); }
.stack__paper img { width: 100%; height: auto; }
.stack--paper .stack__phone { left: 34%; bottom: -4%; width: 23%; }
@media (max-width: 860px) {
  .stack__phone { width: 30%; border-radius: 16px; }
  .stack--paper .stack__phone { width: 28%; }
}

/* Frame gallery: one screen large, the rest smaller, phones in a row. */
.frames { display: grid; gap: clamp(2rem, 4vw, 3.5rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
.frame { margin: 0; min-width: 0; }
.frame__img {
  border-radius: var(--sc-r-md); overflow: hidden; border: 1px solid var(--line-strong);
  background: var(--panel); box-shadow: var(--sc-e3);
}
.frame__img img { display: block; width: 100%; height: auto; }
/* A frame with a white paper page in it (the invoice reader) is graded down
   to the site's dark, so it does not glare next to the other screens. */
.frame__img--paper { background: #0B0B0B; }
/* invoice-read.webp carries its own warm-dark grade now; no filter on top. */
.frame figcaption { display: flex; gap: .9rem; align-items: baseline; margin-top: 1rem; }
.frame figcaption b { font-family: var(--font-ui); font-weight: 500; color: var(--white); font-size: 1.05rem; flex: none; letter-spacing: -0.02em; }
.frame figcaption span { color: var(--sc-ink-soft); font-size: .95rem; line-height: 1.45; }
.frames__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
.frames__row .frame:nth-child(2) { margin-top: clamp(0rem, 5vw, 4rem); }
.phones { display: flex; gap: clamp(1rem, 2.4vw, 2rem); align-items: flex-start; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: .5rem; scrollbar-width: thin; }
.phone { flex: 0 0 clamp(10.5rem, 17vw, 14.5rem); margin: 0; scroll-snap-align: start; }
.phone:nth-child(even) { margin-top: 2.5rem; }
.phone__img { aspect-ratio: 780 / 1480; border-radius: 24px; overflow: hidden; border: 1px solid rgba(255,255,255,.18); background: #0B0B0B; box-shadow: var(--sc-e3), var(--sc-edge); }
.phone__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; max-width: none; }
.phone figcaption { margin-top: .8rem; color: var(--sc-ink-soft); font-size: .88rem; line-height: 1.4; }
/* Phones beside a short note, so the row fills the width. */
.phoneset { display: grid; grid-template-columns: minmax(15rem, 1fr) auto; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.phoneset__copy .lbl { margin: 0 0 1rem; }
.phoneset__copy .h3 { max-width: 18ch; }
.phoneset__copy p:not(.lbl) { margin: 1rem 0 0; max-width: 34ch; color: var(--sc-ink-soft); font-size: 1.05rem; line-height: 1.6; }
@media (max-width: 960px) { .phoneset { grid-template-columns: 1fr; gap: 1.75rem; } }
@media (max-width: 760px) {
  .frames__row { grid-template-columns: 1fr; }
  .frames__row .frame:nth-child(2) { margin-top: 0; }
  .frame figcaption { flex-direction: column; gap: .3rem; }
}

/* Feature rows: copy beside a screen. Never more than two in a row. */
.feature { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.feature--rev { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.feature--rev .feature__copy { order: 2; }
.feature__copy p { margin-top: 1.1rem; color: var(--muted); font-size: var(--sc-t-lg); line-height: 1.5; max-width: 32ch; text-wrap: pretty; }
.feature__copy .more { margin-top: 1.6rem; }
@media (max-width: 860px) {
  .feature, .feature--rev { grid-template-columns: 1fr; }
  .feature--rev .feature__copy { order: 0; }
}

/* ------------------------------------------------------ big statement -- */
.stmt { font-family: var(--font-ui); font-weight: 500; color: var(--white); font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.4rem); line-height: 1.06;
  letter-spacing: -0.035em; max-width: 26ch; text-wrap: balance; margin: 0; }
.stmt em { font-style: normal; color: var(--gold); }
.stmt-note { margin-top: 1.4rem; color: var(--sc-ink-soft); max-width: 52ch; font-size: 1.02rem; line-height: 1.6; }

/* The five stamps, as a track the report moves along. */
.stamps { list-style: none; margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem; position: relative; }
.stamps::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line-strong); }
.stamps li { position: relative; padding-top: 1.6rem; }
.stamps li::before { content: ""; position: absolute; left: 0; top: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px var(--sc-canvas); }
.stamps b { display: block; font-family: var(--font-ui); font-weight: 500; color: var(--white); font-size: 1.6rem; letter-spacing: -0.03em; line-height: 1; }
.stamps span { display: block; margin-top: .9rem; color: var(--sc-ink-soft); font-size: .96rem; line-height: 1.5; }
.stamps-resolve { margin-top: clamp(2.5rem, 5vw, 4rem); font-family: var(--font-ui); font-weight: 500; letter-spacing: -0.03em; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem); color: var(--white); }
.stamps-resolve span { color: var(--gold); }
@media (max-width: 960px) {
  .stamps { grid-template-columns: 1fr; gap: 0; padding-left: 1.4rem; }
  .stamps::before { left: 4px; right: auto; top: .4rem; bottom: .4rem; width: 1px; height: auto; }
  .stamps li { padding: 0 0 1.8rem; }
  .stamps li::before { left: -1.4rem; top: .45rem; }
  .stamps span { margin-top: .5rem; }
}

/* "What changes": three lines, set large, offset like a ledger. */
.ledger { list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; display: grid; gap: 0; }
.ledger li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem; align-items: baseline;
  padding: 1.3rem 0; border-top: 1px solid var(--line-strong); color: var(--white);
  font-family: var(--font-ui); font-weight: 500; letter-spacing: -0.03em; font-size: clamp(1.4rem, 1.05rem + 1.3vw, 2.1rem); line-height: 1.15; }
.ledger li small { font-family: var(--sc-font-mono); font-size: .76rem; color: var(--gold); letter-spacing: .06em; }
.ledger li:nth-child(2) { padding-left: clamp(0rem, 6vw, 6rem); }
.ledger li:nth-child(3) { padding-left: clamp(0rem, 12vw, 12rem); }
@media (max-width: 760px) { .ledger li { grid-template-columns: 1fr; gap: .4rem; } .ledger li:nth-child(n) { padding-left: 0; } }

/* --------------------------------------------- hard-question cards ------
   The Ask Big Dog answer, as a card: product tokens, the question, the
   answer, the source line. Used on /questions/ and wherever a page answers
   an objection. */
/* Equal-height rows, never an empty slot: three cards sit three across, an
   odd card left over spans the row. On /questions/ questions.js keeps the
   same rule while the role filter hides cards (data-count, data-wide). */
.qgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); margin-top: clamp(2rem, 4vw, 3rem); margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.qgrid:not([data-count]) > .qcard:last-child:nth-child(odd), .qcard[data-wide] { grid-column: 1 / -1; }
@media (min-width: 1000px) {
  .qgrid:not([data-count]):has(> .qcard:nth-child(3):last-child), .qgrid[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .qgrid:not([data-count]) > .qcard:nth-child(3):last-child, .qgrid[data-count="3"] > .qcard[data-wide] { grid-column: auto; }
}
@media (max-width: 760px) { .qgrid { grid-template-columns: 1fr; } }
.qcard { margin: 0; padding: 1.15rem 1.25rem 1.1rem; display: flex; flex-direction: column; gap: .7rem; }
.qcard__foot { margin-top: auto; }
.qcard .console__by { margin: 0; }
.qcard__q { margin: 0; color: var(--white); font-weight: 600; font-size: 1.04rem; line-height: 1.35; letter-spacing: -0.01em; }
.qcard__a { margin: 0; color: #E6E6E6; font-size: .95rem; line-height: 1.6; }
.qcard__foot { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; padding-top: .7rem; border-top: 1px solid var(--line); }
.qcard__src { margin-right: auto; font-family: var(--sc-font-mono); font-size: .68rem; color: var(--dim); }
.qcard .chip--line { font-size: .66rem; padding: .1rem .5rem; }
.qcard[hidden] { display: none; }

/* ------------------------------------------------- related reading ------ */
.refs { list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 2.5vw, 2rem); }
.ref a { display: grid; gap: .5rem; text-decoration: none; color: inherit; }
.ref__img { display: block; aspect-ratio: 1456 / 720; border-radius: var(--sc-r-md); overflow: hidden; background: var(--sc-surface); border: 1px solid var(--line); margin-bottom: .45rem; }
.ref__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--sc-ease-out); }
/* In the card grid every image is the same height, the calculator banner
   included; the list layout keeps the banner's own shape. */
.refs--list .ref--calc .ref__img { aspect-ratio: 900 / 223; }
@media (max-width: 960px) { .refs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .refs { grid-template-columns: 1fr; } }
.ref a:hover .ref__img img { transform: scale(1.03); }
.ref__k { font-family: var(--sc-font-mono); font-size: .72rem; color: var(--gold); letter-spacing: .06em; }
.ref__t { color: var(--white); font-weight: 600; font-size: 1.04rem; line-height: 1.35; text-wrap: balance; }
.ref a:hover .ref__t { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.ref__d { color: var(--sc-ink-soft); font-size: .9rem; line-height: 1.5; }
.refs--list { grid-template-columns: 1fr; gap: 0; }
.refs--list .ref a { grid-template-columns: 12rem minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 1.75rem; row-gap: .4rem; padding: 1.5rem 0; border-top: 1px solid var(--line); align-items: start; }
.refs--list .ref__img { grid-row: 1 / span 3; margin: 0; }
.refs--list .ref--news a { grid-template-columns: 1fr; }
@media (max-width: 640px) { .refs--list .ref a { grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: 1rem; } .refs--list .ref__d { display: none; } }

/* ---------------------------------------------------- closing band ------
   The CTA band every inner page ends on (_src/partials/talk.html.tpl): one
   primary, one ghost secondary, two text links for readers not ready yet. */
.talk { position: relative; overflow: hidden; padding-block: clamp(6rem, 12vw, 10rem); border-top: 1px solid var(--line); }
.talk__photo { position: absolute; inset: 0; z-index: 0; }
.talk__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; opacity: .45; max-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 85%); mask-image: linear-gradient(90deg, transparent 30%, #000 85%); }
.talk__in { position: relative; z-index: 1; }
.talk .h2 { max-width: 17ch; font-size: clamp(2.2rem, 1.3rem + 3.2vw, 4rem); }
.talk__sub { margin: 1.5rem 0 2.4rem; color: var(--muted); font-size: var(--sc-t-lg); line-height: 1.45; max-width: 40ch; text-wrap: pretty; }
/* The band offers the presentation everywhere except on the page that holds it. */
.ctas .cta--how, .ctas[data-page$="/platform/"] .cta--deck { display: none; }
.ctas[data-page$="/platform/"] .cta--how { display: inline-flex; }
.talk__more { list-style: none; margin: 2.6rem 0 0; padding: 1.6rem 0 0; border-top: 1px solid var(--line); max-width: 46rem;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.2rem 2.5rem; }
.talk__more li { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; }
.talk__more span { color: var(--sc-ink-soft); font-size: .88rem; line-height: 1.45; }
.talk__nda { margin: 2rem 0 0; color: var(--sc-ink-soft); font-size: .9rem; }
.talk__nda a { color: var(--white); text-decoration-color: var(--amber); text-underline-offset: 3px; }
.talk__mail { color: var(--sc-ink-soft); }
.talk__mail a { color: var(--white); }
@media (max-width: 860px) {
  .talk__photo img { opacity: .3; -webkit-mask-image: linear-gradient(0deg, transparent 20%, #000 90%); mask-image: linear-gradient(0deg, transparent 20%, #000 90%); }
}

/* A mid-page band: one secondary ask between sections (The Pulse, a tool). */
.band { border-block: 1px solid var(--line); background: linear-gradient(90deg, rgba(245,165,36,.06), transparent 60%); }
.band__in { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2.5rem; padding-block: clamp(2rem, 4vw, 3rem); }
.band__copy { flex: 1 1 22rem; }
.band__copy .h3 { max-width: 30ch; }
.band__copy p { margin: .5rem 0 0; color: var(--sc-ink-soft); line-height: 1.5; max-width: 52ch; }

/* Section ground: a strata texture, faded in at the top and out at the
   bottom, so sections read as layers of the same ground. */
.ground { position: relative; isolation: isolate; }
.ground::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--ground) center / cover no-repeat; opacity: .55;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}

/* Photo heroes (industries): a real site photo, framed like a core box,
   with the product on a phone over its corner. */
.shot { position: relative; margin: 0; }
.shot__photo { margin: 0; border-radius: var(--sc-r-md); overflow: hidden; border: 1px solid var(--line-strong); box-shadow: var(--sc-e3); aspect-ratio: 4 / 3.2; }
/* Real photos get the generated photos' grade: highlights pulled, blacks
   kept, warmed toward amber, so a bright or cool shot sits in the dark site. */
.shot__photo { position: relative; }
.shot__photo img { width: 100%; height: 100%; object-fit: cover; max-width: none; filter: brightness(.78) contrast(1.1) saturate(.78) sepia(.32); }
.shot__photo::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: rgba(196, 128, 44, .26); mix-blend-mode: color; }
.shot__photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 40%, rgba(240, 165, 50, .08), rgba(9, 9, 9, .42) 100%); mix-blend-mode: multiply; z-index: 1; }
.shot .stack__phone { left: auto; right: -4%; bottom: -8%; width: 30%; }
.shot__cap { margin-top: .9rem; font-family: var(--sc-font-mono); font-size: .74rem; color: var(--dim); }
@media (max-width: 860px) { .shot .stack__phone { right: 3%; width: 32%; } .shot { margin-bottom: 2rem; } }

/* ---------------------------------------------------- /solutions/ ----
   Five layers, top to bottom, each its own band of ground. */
.layers { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.layer { position: relative; border-bottom: 1px solid var(--line); }
.layer > a { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.45fr); gap: clamp(2rem, 4vw, 4rem); align-items: center;
  padding-block: clamp(2rem, 4vw, 3.25rem); color: inherit; text-decoration: none; }
.layer:nth-child(even) > a { grid-template-columns: minmax(0, 1.45fr) minmax(0, .72fr); }
.layer:nth-child(even) .layer__copy { order: 2; }
.layer__n { font-family: var(--sc-font-mono); font-size: .78rem; color: var(--gold); letter-spacing: .06em; }
.layer .h2 { margin-top: .8rem; font-size: clamp(1.8rem, 1.1rem + 2.2vw, 2.9rem); }
.layer__line { margin-top: 1rem; color: var(--muted); font-size: var(--sc-t-lg); line-height: 1.45; max-width: 30ch; }
.layer__go { display: inline-flex; gap: .5rem; margin-top: 1.5rem; color: var(--white); font-weight: 600; font-size: .95rem; }
.layer__go::after { content: "\2192"; color: var(--gold); transition: transform 300ms var(--sc-ease-out); }
.layer > a:hover .layer__go::after { transform: translateX(4px); }
.layer__art { margin: 0; border-radius: var(--sc-r-md); overflow: hidden; border: 1px solid var(--line-strong); box-shadow: var(--sc-e3); aspect-ratio: 16 / 10; background: var(--panel); }
/* A cropped detail, not the whole screen: the sidebar is skipped and about
   60% of the frame's width fills the card, so the headline and numbers
   read at card size. Each figure can set its own crop so no word is cut:
   --x/--y the top-left corner and --w the width, as fractions of the frame
   (--mx/--my/--mw on phones). */
.layer__art img {
  --cw: var(--w, .606); --cx: var(--x, .0576); --cy: var(--y, 0);
  display: block; width: calc(100% / var(--cw)); height: auto; max-width: none;
  margin-left: calc(var(--cx) * -100% / var(--cw)); margin-top: calc(var(--cy) * -62.5% / var(--cw));
  transform-origin: top left; transition: transform 700ms var(--sc-ease-out);
}
.layer > a:hover .layer__art img { transform: scale(1.02); }
@media (max-width: 860px) {
  .layer > a, .layer:nth-child(even) > a { grid-template-columns: 1fr; gap: 1.75rem; }
  .layer:nth-child(even) .layer__copy { order: 0; }
  .layer__art { aspect-ratio: 4 / 3; }
  .layer__art img { --cw: var(--mw, .435); --cx: var(--mx, .0565); --cy: var(--my, 0); }
}

/* "What happens today": the paper path, step by step, ending on the cost. */
.today { list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; counter-reset: today; max-width: 58rem; }
.today li { counter-increment: today; display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: 1rem; padding: 1.15rem 0;
  border-top: 1px solid var(--line); color: var(--muted); font-size: clamp(1.05rem, .95rem + .4vw, 1.25rem); line-height: 1.5; }
.today li::before { content: "0" counter(today); font-family: var(--sc-font-mono); font-size: .76rem; color: var(--dim); padding-top: .35rem; }
.today__sum { display: block; margin-top: .4rem; font-family: var(--sc-font-mono); font-size: .86em; color: var(--white); }
.today .today__end { color: var(--white); font-family: var(--font-ui); font-weight: 500; letter-spacing: -0.025em; font-size: clamp(1.35rem, 1.05rem + 1.1vw, 1.9rem); line-height: 1.2; border-top-color: var(--amber); }
.today .today__end::before { color: var(--amber); }

/* The leak list: money earned and never billed. */
.leaks { list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.leaks li { position: relative; padding: 1.6rem 1.4rem 1.7rem; border: 1px solid var(--line-strong); border-radius: var(--sc-r-md); background: #0E0E0E;
  font-family: var(--font-ui); font-weight: 500; letter-spacing: -0.025em; color: var(--white); font-size: clamp(1.3rem, 1.05rem + .8vw, 1.7rem); line-height: 1.2; }
.leaks li { display: flex; flex-direction: column; justify-content: flex-start; }
.leaks__ic { display: block; width: 28px; height: 28px; margin-bottom: 1rem; color: var(--gold); }
.leaks li::before { content: "Not billed"; display: block; order: -1; margin-bottom: 1.1rem; font-family: var(--sc-font-mono); font-weight: 400; font-size: .7rem; letter-spacing: .06em; color: #F0524B; }
.leaks-line { margin-top: 1.6rem; color: var(--sc-ink-soft); font-size: var(--sc-t-lg); max-width: 44ch; }
.leaks-line b { color: var(--white); font-weight: 500; }
@media (max-width: 860px) { .leaks { grid-template-columns: 1fr; } }

/* Bids: three outcomes, the middle one is the only good one. */
.bidcases { list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--sc-r-md); overflow: hidden; }
.bidcases li { background: #0C0C0E; padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 2.5vw, 1.75rem); }
.bidcases b { display: block; font-family: var(--font-ui); font-weight: 500; letter-spacing: -0.03em; color: var(--white); font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem); line-height: 1.05; }
.bidcases span { display: block; margin-top: .9rem; color: var(--sc-ink-soft); line-height: 1.5; }
.bidcases i { display: block; margin-bottom: 1.1rem; font-style: normal; font-family: var(--sc-font-mono); font-size: .72rem; letter-spacing: .06em; color: var(--dim); }
.bidcases .is-right { background: linear-gradient(180deg, rgba(245,165,36,.12), rgba(245,165,36,.02)); }
.bidcases .is-right i { color: var(--amber); }
@media (max-width: 860px) { .bidcases { grid-template-columns: 1fr; } }

.ledger li:nth-child(4) { padding-left: clamp(0rem, 18vw, 18rem); }
@media (max-width: 760px) { .ledger li:nth-child(4) { padding-left: 0; } }
.btn__arrow--down { transform: rotate(90deg); }

/* --------------------------------------------- /industries/ index ---- */
.trades4 { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.75rem, 1.5vw, 1.25rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
.trade4 a { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(26rem, 52vw, 38rem);
  border-radius: var(--sc-r-md); overflow: hidden; color: inherit; text-decoration: none; border: 1px solid var(--line-strong); isolation: isolate; }
.trade4 img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; max-width: none; transition: transform 900ms var(--sc-ease-out); filter: saturate(.8); }
.trade4 a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(10,10,12,.96) 18%, rgba(10,10,12,.55) 55%, rgba(10,10,12,.1)); }
.trade4 a:hover img { transform: scale(1.04); }
.trade4__in { padding: 1.4rem 1.3rem 1.5rem; }
.trade4 .h3 { font-size: 1.5rem; }
.trade4 p { margin: .7rem 0 0; color: #CFCBC4; font-size: .93rem; line-height: 1.5; }
.trade4 .layer__go { margin-top: 1.1rem; font-size: .9rem; }
.trade4:nth-child(2) a { margin-top: clamp(0rem, 4vw, 3rem); }
.trade4:nth-child(3) a { margin-top: clamp(0rem, 2vw, 1.5rem); }
.trade4:nth-child(4) a { margin-top: clamp(0rem, 6vw, 4.5rem); }
@media (max-width: 1000px) { .trades4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .trade4 a { margin-top: 0 !important; min-height: 24rem; } }
@media (max-width: 560px) { .trades4 { grid-template-columns: 1fr; } .trade4 a { min-height: 20rem; } }

/* Pain list: what the day actually looks like. */
.pains { list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: 0 clamp(1.5rem, 3vw, 2.5rem); }
.pains li { padding: 1.1rem 0 1.2rem; border-top: 1px solid var(--line-strong); color: var(--white); font-size: 1.08rem; line-height: 1.4; }
.pains li::before { content: ""; display: block; width: 18px; height: 2px; background: var(--gold); margin-bottom: .9rem; }

/* What we do, as links to the solution pages. */
.dolist { list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: var(--sc-r-md); overflow: hidden; }
.dolist li { box-shadow: 0 0 0 .5px var(--line), inset 0 0 0 .5px var(--line); }
.dolist a, .dolist span.dolist__in { display: block; height: 100%; padding: 1.4rem 1.3rem 1.5rem; color: inherit; text-decoration: none; transition: background 250ms; }
.dolist a:hover { background: #17171A; }
.dolist b { display: block; font-family: var(--font-ui); font-weight: 500; letter-spacing: -0.02em; color: var(--white); font-size: 1.15rem; }
.dolist small { display: block; margin-top: .55rem; color: var(--sc-ink-soft); font-size: .9rem; line-height: 1.45; }
.dolist a b::after { content: " \2192"; color: var(--gold); }

/* -------------------------------------------------- /how-we-work/ ---- */
.stations { list-style: none; margin: 0; padding: 0; }
.station { position: relative; display: grid; grid-template-columns: minmax(0, .38fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 5rem);
  padding-block: clamp(3.5rem, 7vw, 6rem); border-top: 1px solid var(--line); }
.station__n { font-family: var(--sc-font-mono); font-weight: 500; color: var(--gold); font-size: clamp(3.5rem, 2rem + 6vw, 7.5rem); line-height: .9; letter-spacing: -0.06em; }
.station__n small { display: block; margin-top: 1rem; font-size: .78rem; letter-spacing: .06em; color: var(--dim); }
.station .h2 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.4rem); }
.station__lead { margin-top: 1.2rem; color: var(--white); font-size: var(--sc-t-lg); line-height: 1.5; max-width: 40ch; }
.station__detail { margin: 1.75rem 0 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .9rem 1.5rem; max-width: 46rem; }
.station__detail dt { font-family: var(--sc-font-mono); font-size: .76rem; color: var(--dim); padding-top: .2rem; letter-spacing: .04em; }
.station__detail dd { margin: 0; color: var(--muted); line-height: 1.55; }
.station__list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .85rem; max-width: 46rem; }
.station__list li { position: relative; padding-left: 1.4rem; color: var(--muted); line-height: 1.55; }
.station__list li:first-child { color: var(--white); font-size: var(--sc-t-lg); line-height: 1.5; }
.station__list li::before { content: ""; position: absolute; left: 0; top: .72em; width: .6rem; height: 1.5px; background: var(--gold); }
.station__frame { margin-top: clamp(1.75rem, 3vw, 2.5rem); max-width: 46rem; }
.station__stop { margin-top: 1.75rem; display: inline-flex; gap: .6rem; align-items: center; font-size: .86rem; color: var(--sc-ink-soft); }
.station__stop::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--gold); }
@media (max-width: 760px) { .station { grid-template-columns: 1fr; } .station__detail { grid-template-columns: 1fr; gap: .2rem; } .station__detail dd { margin-bottom: .8rem; } }

/* ------------------------------------------------------ /security/ --- */
.claims { list-style: none; margin: 0; padding: 0; counter-reset: claim; }
.claim { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, .7fr); gap: 1rem clamp(1.5rem, 4vw, 4rem); align-items: start;
  padding-block: clamp(2.25rem, 4.5vw, 3.75rem); border-top: 1px solid var(--line-strong); }
.claim::before { counter-increment: claim; content: "0" counter(claim); font-family: var(--sc-font-mono); color: var(--gold); font-size: .85rem; padding-top: .7rem; }
.claim .stmt { font-size: clamp(1.7rem, 1.1rem + 2vw, 2.8rem); max-width: 22ch; }
.claim p { margin: .5rem 0 0; color: var(--muted); line-height: 1.6; font-size: 1rem; }
.claim p a { color: var(--white); text-decoration-color: var(--gold); text-underline-offset: 3px; }
@media (max-width: 900px) { .claim { grid-template-columns: 1fr; gap: .8rem; } .claim::before { padding: 0; } }
.wont { list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--sc-r-md); overflow: hidden; }
.wont li { background: #0C0C0E; padding: 1.4rem 1.5rem; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: .6rem 2rem; }
.wont s { color: var(--sc-ink-soft); text-decoration-color: rgba(240, 82, 75, .8); text-decoration-thickness: 1.5px; font-size: 1.05rem; line-height: 1.45; }
.wont span { color: var(--white); line-height: 1.55; }
.wont span b { display: block; font-family: var(--sc-font-mono); font-weight: 400; color: var(--gold); font-size: .72rem; letter-spacing: .06em; margin-bottom: .3rem; }
@media (max-width: 760px) { .wont li { grid-template-columns: 1fr; } }

/* ------------------------------------------------------ /questions/ -- */
.qbar { position: sticky; top: calc(var(--bar-h) + .75rem); z-index: 5; margin-top: clamp(2rem, 4vw, 3rem); background: #0E0E0E; }
/* A solid band from the nav bar down to just under the filter, full width,
   so no card shows through above or beside it while it sticks. */
.qbar::before { content: ""; position: absolute; z-index: -1; top: calc(-.75rem - 1px); bottom: -.75rem; left: -100vw; right: -100vw;
  background: var(--sc-canvas); box-shadow: 0 10px 18px -6px var(--sc-canvas); pointer-events: none; }
/* .ui clips its own ::before, so the strip between the nav bar and the
   stuck filter is filled with the bar's own shadow, which is not clipped. */
.qbar { box-shadow: 0 calc(-.75rem - 1px) 0 0 var(--sc-canvas), var(--sc-e3), inset 0 1px 0 rgba(255,255,255,.06); }
.qbar .ui__head { flex-wrap: wrap; row-gap: .5rem; }
.qbar__roles { display: flex; flex-wrap: wrap; gap: .4rem; padding: .75rem 1rem; }
.qbar__count { margin-left: auto; font-family: var(--sc-font-mono); font-size: .74rem; color: var(--dim); }
.qgroup { padding-top: clamp(2.5rem, 5vw, 4rem); scroll-margin-top: calc(var(--bar-h) + 9rem); }
.qgroup[hidden] { display: none; }
/* On a phone the filter bar wraps to two rows of roles: clear it too. */
@media (max-width: 760px) { .qgroup { scroll-margin-top: calc(var(--bar-h) + 12.5rem); } }
.qbar[hidden], .qcard[hidden], .qjump li[hidden] { display: none; }
.qbar .role[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: #121212; font-weight: 600; }
.qgroup__h { font-family: var(--font-ui); font-weight: 500; letter-spacing: -0.03em; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem); color: var(--white); margin: 0; display: flex; align-items: baseline; gap: .8rem; }
.qgroup__h::after { content: ""; flex: 1; height: 1px; background: var(--line-strong); transform: translateY(-.3em); }
.qgroup .qgrid { margin-top: 1.5rem; }
.qcard .console__by time { font-size: .7rem; }
a.qcard__src { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
.qjump { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; margin-top: 1.5rem; font-size: .9rem; }
.qjump a { color: var(--sc-ink-soft); text-decoration: none; }
.qjump a:hover { color: var(--white); }

/* ---------------------------------------------------------- /about --- */
.people { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.person__k { font-family: var(--sc-font-mono); font-size: .76rem; color: var(--gold); letter-spacing: .06em; }
.person .h3 { margin-top: .6rem; }
.person p { margin: 1rem 0 0; color: var(--muted); line-height: 1.65; }
@media (max-width: 860px) { .people { grid-template-columns: 1fr; } }
.mission { font-family: var(--font-ui); font-weight: 500; letter-spacing: -0.035em; color: var(--white); font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.4rem); line-height: 1.1; max-width: 24ch; margin: 0; text-wrap: balance; }
.mission + .mission { margin-top: 1rem; color: var(--sc-ink-soft); }
.polaroids { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.polaroids figure { margin: 0; border-radius: var(--sc-r-md); overflow: hidden; border: 1px solid var(--line-strong); }
.polaroids figure:nth-child(2) { margin-top: 3rem; }
.polaroids img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 4; max-width: none; }

/* -------------------------------------------------------- /contact/ -- */
.reach { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.reach__list { list-style: none; margin: 0; padding: 0; }
.reach__list li { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1rem; padding: 1.2rem 0; border-top: 1px solid var(--line-strong); }
.reach__list li > span:first-child { font-family: var(--sc-font-mono); font-size: .76rem; color: var(--dim); letter-spacing: .04em; padding-top: .2rem; }
.reach__list li > :last-child { color: var(--white); line-height: 1.55; }
.reach__list a { color: var(--white); text-decoration-color: var(--gold); text-underline-offset: 3px; }
.reach .ledger { margin-top: 1.5rem; }
.reach .stmt-note { margin-top: 1.5rem; }
.reach .talk__nda { margin-top: 1rem; }
.book { border: 1px solid var(--line-strong); border-radius: 14px; background: #0E0E0E; overflow: hidden; }
.book__frame { display: block; width: 100%; height: 860px; border: 0; }
.book__alt { padding: 1.1rem 1.25rem; background: #0E0E0E; border-top: 1px solid var(--line-strong); }
@media (max-width: 860px) { .reach { grid-template-columns: 1fr; } .reach__list li { grid-template-columns: 1fr; gap: .3rem; } }

/* ------------------------------------------------------- /insights/ -- */
.hubs { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); margin-top: clamp(2rem, 4vw, 3rem); }
.hub a { position: relative; display: flex; flex-direction: column; min-height: 15rem; padding: 1.5rem 1.4rem; border-radius: var(--sc-r-md); overflow: hidden;
  border: 1px solid var(--line-strong); color: inherit; text-decoration: none; isolation: isolate; background: #0C0C0E; transition: border-color 300ms; }
.hub a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ground) center / cover; opacity: .55; transition: opacity 400ms; }
/* Scrim: dark at the top for the label, darker at the bottom for the title
   and line, so neither sits on a bright patch of the photo. */
.hub a::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(9, 9, 9, .72) 0%, rgba(9, 9, 9, .15) 32%, rgba(9, 9, 9, .55) 58%, rgba(9, 9, 9, .94) 100%); }
.hub a::before { filter: saturate(.8) sepia(.25) brightness(.85); }
.hub a:hover { border-color: rgba(232, 168, 68, .5); }
.hub a:hover::before { opacity: .75; }
.hub .h3 { margin-top: auto; }
.hub p { margin: .6rem 0 0; color: #CFCBC4; font-size: .93rem; line-height: 1.5; }
.hub__k { font-family: var(--sc-font-mono); font-size: .74rem; color: var(--gold); letter-spacing: .06em; }
@media (max-width: 860px) { .hubs { grid-template-columns: 1fr; } .hub a { min-height: 11rem; } }
.pulse { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (max-width: 860px) { .pulse { grid-template-columns: 1fr; } }

/* Section label above a heading: mono, gold, quiet. */
.eyebrow { margin: 0 0 .9rem; font-family: var(--sc-font-mono); font-size: .76rem; color: var(--gold); text-transform: uppercase; letter-spacing: .14em; }
.feature__copy .eyebrow { margin-bottom: .9rem; }

/* Platform tour: a light pan across the operations screens. */
.tour .sc-stage { display: flex; align-items: center; }
.tour [data-sc-pan] { gap: clamp(1.25rem, 2.5vw, 2rem); align-items: center; padding-inline: var(--sc-gutter); }
.tour__item { flex: 0 0 auto; width: min(64vw, 52rem); margin: 0; }
.tour__item--note { width: min(30vw, 22rem); }
.tour__item--note p { color: var(--muted); font-size: var(--sc-t-lg); line-height: 1.5; margin: 0; }
.tour__head { flex: 0 0 auto; width: min(34vw, 26rem); }
@media (max-width: 760px) {
  .tour__item { width: 82vw; }
  .tour__head, .tour__item--note { width: 72vw; }
}
@media (prefers-reduced-motion: reduce) {
  .ref__img img, .layer__art img, .trade4 img { transition: none; }
}
.counts--one { grid-template-columns: 1fr; max-width: 40rem; }
.counts--one li { border-top: 0; padding-top: 0; }
.counts--one b { font-family: var(--sc-font-mono); font-weight: 500; letter-spacing: -0.05em; color: var(--gold); font-size: clamp(3.5rem, 2rem + 6vw, 7rem); }
.counts--one li > span { max-width: 32ch; font-size: var(--sc-t-lg); color: var(--muted); }
@media (max-width: 760px) { .counts--one li:last-child { grid-column: auto; } }

/* Pull quote, in the product face rather than the display face. */
.pull { margin: 0; }
.pull blockquote { margin: 0; font-family: var(--font-ui); font-weight: 500; letter-spacing: -0.03em; color: var(--white);
  font-size: clamp(1.6rem, 1.05rem + 1.9vw, 2.6rem); line-height: 1.16; max-width: 26ch; text-wrap: balance; }
.pull blockquote::before { content: "\201C"; color: var(--gold); margin-right: .05em; }
.pull blockquote::after { content: "\201D"; color: var(--gold); }
.pull figcaption { margin-top: 1.2rem; color: var(--sc-ink-soft); font-size: .95rem; }
.pull figcaption b { color: var(--white); font-weight: 600; }

.pulls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); margin-top: clamp(3.5rem, 7vw, 6rem); }
.pulls .pull blockquote { font-size: clamp(1.35rem, 1rem + 1vw, 1.9rem); }
@media (max-width: 860px) { .pulls { grid-template-columns: 1fr; } }

/* Who is behind it: a real photo beside the short version of the story. */
.bio { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.bio__photo { margin: 0; border-radius: var(--sc-r-md); overflow: hidden; border: 1px solid var(--line-strong); aspect-ratio: 1; box-shadow: var(--sc-e3); }
.bio__photo img { width: 100%; height: 100%; object-fit: cover; max-width: none; }
.bio .prose { margin-top: 1.2rem; }
.bio .pull { margin-top: clamp(2rem, 4vw, 3rem); padding-top: clamp(1.5rem, 3vw, 2rem); border-top: 1px solid var(--line-strong); }
@media (max-width: 860px) { .bio { grid-template-columns: 1fr; } .bio__photo { max-width: 22rem; } }

/* Buttons under reduced motion: no shine, no lean, no spotlight, no nudge. */
@media (prefers-reduced-motion: reduce) {
  .btn, .btn__arrow::before, .btn__arrow::after, .more::before, .more::after, .cta__sub, .drop, .nav__caret::before { transition: none !important; }
  .btn { transform: none !important; }
  .btn--gold::before, .btn--gold::after, .btn--ghost::before, .btn > .btn__beam { display: none; }
  .btn:hover .btn__arrow::before, .btn:focus-visible .btn__arrow::before, .more:hover::after { transform: none; }
  .btn:hover .btn__arrow::after, .btn:focus-visible .btn__arrow::after { transform: translateX(-140%); }
}


/* A ledger of full sentences: no stagger, a little smaller. */
.ledger--long li, .ledger--long li:nth-child(n) { padding-left: 0; font-size: clamp(1.25rem, 1rem + .9vw, 1.7rem); grid-template-columns: 2.4rem minmax(0, 1fr); counter-increment: ledger; }
.ledger--long { counter-reset: ledger; }
.ledger--long li::before { content: "0" counter(ledger); font-family: var(--sc-font-mono); font-size: .76rem; letter-spacing: 0; color: var(--amber); }
@media (max-width: 760px) { .ledger--long li, .ledger--long li:nth-child(n) { grid-template-columns: 2rem minmax(0, 1fr); } }
.ledger__k { font-weight: 500; color: var(--amber); }

/* ------------------------------------------------------- exit offer ----
   The two free guides, offered once to a visitor on the way out (exit.js).
   Desktop: a centred card, the two covers fanned on the left like they were
   dropped on the desk. Phone: a sheet from the bottom, covers small on top.
   Only opacity and transform move; reduced motion shows it still. */
html.exit-open { overflow: hidden; }
.exit[hidden] { display: none; }
.exit { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 1.25rem; }
.exit__veil { position: absolute; inset: 0; background: rgba(4, 4, 4, .78); opacity: 0; transition: opacity 320ms var(--sc-ease-out); }
@supports (backdrop-filter: blur(4px)) { .exit__veil { background: rgba(4, 4, 4, .62); backdrop-filter: blur(6px); } }
.exit__card {
  position: relative; width: min(54rem, 100%); max-height: calc(100dvh - 2.5rem); overflow: auto;
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: center;
  background: #0E0E0E; border: 1px solid #2A2A2A; border-radius: var(--sc-r-md);
  box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(245, 165, 36, .06);
  opacity: 0; transform: translateY(18px) scale(.985);
  transition: opacity 320ms var(--sc-ease-out), transform 420ms cubic-bezier(.2, .8, .2, 1);
}
.exit__card:focus { outline: none; }
.exit[data-open] .exit__veil, .exit[data-open] .exit__card { opacity: 1; }
.exit[data-open] .exit__card { transform: none; }
/* Amber hairline across the top edge: the one warm line on the card. */
.exit__card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(245, 165, 36, .7), transparent); }

.exit__x {
  position: absolute; top: .85rem; right: .85rem; z-index: 2; width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 999px; border: 1px solid #2A2A2A; background: #141414; color: #A3A3A3; cursor: pointer;
  transition: color 160ms, border-color 160ms;
}
.exit__x:hover { color: #F2F0EB; border-color: rgba(245, 165, 36, .55); }

.exit__covers {
  position: relative; align-self: stretch; min-height: 26rem; overflow: hidden;
  background: radial-gradient(70% 60% at 45% 55%, rgba(245, 165, 36, .16), transparent 70%), #090909;
  border-right: 1px solid #1E1E1E;
}
.exit__cover {
  position: absolute; left: 50%; top: 50%; width: 9.8rem; height: auto; border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 28px 60px -14px rgba(0, 0, 0, .9), 0 0 40px -18px rgba(245, 165, 36, .5);
  transition: transform 520ms cubic-bezier(.2, .8, .2, 1);
}
/* Back cover sits high and left, front cover low and right, so the front never covers the back's title. */
.exit__cover--a { transform: translate(-80%, -78%) rotate(-5deg); z-index: 1; }
.exit__cover--b { transform: translate(-20%, -24%) rotate(4deg); z-index: 2; }
.exit[data-open] .exit__cover--a { transform: translate(-84%, -80%) rotate(-6deg); }
.exit[data-open] .exit__cover--b { transform: translate(-16%, -22%) rotate(5deg); }

.exit__body { padding: clamp(1.75rem, 3.4vw, 2.75rem); padding-right: clamp(2.5rem, 4vw, 3.25rem); }
.exit__k { margin: 0; font-family: var(--sc-font-mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.exit__h { margin: .7rem 0 0; font: 600 clamp(1.5rem, 1.1rem + 1.2vw, 2rem)/1.12 var(--sc-font-text); letter-spacing: -0.025em; color: #F2F0EB; text-wrap: balance; }
/* The pop-up lives inside <footer class="foot">, so these beat the footer's list and link resets. */
.exit .exit__list { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: .7rem; }
.exit .exit__list li + li { margin-top: 0; }
.exit__list li { position: relative; padding-left: 1.4rem; color: #A3A3A3; font-size: .95rem; line-height: 1.5; }
.exit__list li::before { content: ""; position: absolute; left: 0; top: .5em; width: .55rem; height: .55rem; border-radius: 2px; background: var(--amber); transform: rotate(45deg) scale(.8); }
.exit__list b { color: #F2F0EB; font-weight: 600; }
.exit__form { display: flex; gap: .6rem; margin-top: 1.4rem; }
.exit__field { flex: 1 1 auto; min-width: 0; }
.exit__field input {
  width: 100%; min-height: 48px; padding: 0 .95rem; border-radius: var(--sc-r-sm);
  border: 1px solid #2A2A2A; background: #141414; color: #F2F0EB; font: 400 1rem var(--sc-font-text);
}
.exit__field input::placeholder { color: #858380; }
.exit__field input:focus { outline: none; border-color: rgba(245, 165, 36, .7); box-shadow: 0 0 0 3px rgba(245, 165, 36, .18); }
.exit__form .btn { min-height: 48px; flex: none; }
.exit__err { margin: .7rem 0 0; color: #FF8A7A; font-size: .9rem; }
.exit__done { margin-top: 1.4rem; padding: 1rem 1.1rem; border-radius: var(--sc-r-sm); border: 1px solid rgba(95, 185, 127, .35); background: rgba(95, 185, 127, .07); }
.exit__done p { margin: 0; color: #DEDEDE; font-size: .95rem; line-height: 1.5; }
.exit__done p + p { margin-top: .45rem; }
.exit__done b { color: #F2F0EB; }
.foot .exit__done a:not(.btn):not(.lockup):not(.more) { color: var(--amber); text-decoration: underline; text-underline-offset: 3px; }
.exit__fine { margin: .9rem 0 0; color: #858380; font-size: .8rem; }

@media (max-width: 760px) {
  .exit { place-items: end center; padding: 0; }
  .exit__card {
    grid-template-columns: 1fr; width: 100%; max-height: 92dvh; border-radius: 16px 16px 0 0; border-bottom: 0;
    transform: translateY(40px);
  }
  .exit__covers { min-height: 0; height: 8rem; border-right: 0; border-bottom: 1px solid #1E1E1E; }
  .exit__cover { width: 4.7rem; }
  .exit__cover--a, .exit[data-open] .exit__cover--a { transform: translate(-108%, -52%) rotate(-6deg); }
  .exit__cover--b, .exit[data-open] .exit__cover--b { transform: translate(8%, -46%) rotate(5deg); }
  .exit__body { padding: 1.35rem 1.25rem calc(1.4rem + env(safe-area-inset-bottom)); }
  .exit__h { font-size: 1.45rem; padding-right: 0; }
  .exit__x { width: 44px; height: 44px; top: .6rem; right: .6rem; }
  .exit__form { flex-direction: column; }
  .exit__form .btn { width: 100%; }
  .exit__list li, .exit__done p { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .exit__veil, .exit__card, .exit__cover { transition: none; }
  .exit__card, .exit[data-open] .exit__card { transform: none; }
}

/* ------------------------------------------------------------- ROI ----
   Hours back and money billed, only from real or calculator numbers: our
   own receipts (counted October 17, 2026), the site's per-supervisor claim,
   and a Field Tool so the visitor works out their own. Copy left, the
   numbers right, set in mono like a reading on an instrument. */
.roi { position: relative; border-block: 1px solid var(--line); background:
  radial-gradient(60% 120% at 100% 50%, rgba(245, 165, 36, .08), transparent 70%), #0B0B0B; }
.roi__in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5.5rem); align-items: center; padding-block: clamp(3rem, 6vw, 5rem); }
.roi__copy .lbl { margin-bottom: 1rem; }
.roi__copy .h2 { max-width: 20ch; }
.roi__copy > p:not(.lbl) { margin: 1.1rem 0 0; max-width: 46ch; color: var(--sc-ink-soft); font-size: 1.05rem; line-height: 1.6; }
.roi__copy .cta { margin-top: 1.75rem; }
.roi__nums { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid #2A2A2A; }
.roi__nums li { display: grid; grid-template-columns: minmax(8.5rem, auto) minmax(0, 1fr); gap: 1.5rem; align-items: baseline; padding: 1.15rem 0; border-bottom: 1px solid #2A2A2A; }
.roi__nums b { font-family: var(--sc-font-mono); font-weight: 500; letter-spacing: -0.04em; color: var(--amber); font-size: clamp(2.1rem, 1.4rem + 2vw, 3.1rem); line-height: 1; white-space: nowrap; }
.roi__nums b small { font-size: .5em; letter-spacing: 0; margin-left: .15em; color: #A3A3A3; }
.roi__nums span { color: #A3A3A3; font-size: .95rem; line-height: 1.45; }
.roi__nums span em { font-style: normal; color: #F2F0EB; }
.roi__src { margin: .9rem 0 0; font-family: var(--sc-font-mono); font-size: .72rem; color: #858380; }
@media (max-width: 860px) {
  .roi__in { grid-template-columns: 1fr; }
  .roi__nums li { grid-template-columns: 1fr; gap: .45rem; }
}

/* ---------------------------------------------- the reporting video ----
   Into /reporting/ (the VSL) from wherever a visitor is reading about better
   reporting. A real still of Dan, the play mark kept off his face. */
.vsl { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center;
  padding: clamp(1rem, 2vw, 1.25rem); border: 1px solid #2A2A2A; border-radius: var(--sc-r-md); background: #0E0E0E; text-decoration: none; color: inherit; }
.vsl__shot { position: relative; margin: 0; border-radius: var(--sc-r-sm); overflow: hidden; aspect-ratio: 600 / 380; background: #141414; }
.vsl__shot img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(.68) contrast(1.12) saturate(.75) sepia(.35); transition: transform 700ms cubic-bezier(.2, .8, .2, 1); }
.vsl__shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9, 9, 9, 0) 40%, rgba(9, 9, 9, .75)), linear-gradient(90deg, rgba(245, 165, 36, .14), transparent 60%); mix-blend-mode: normal; }
.vsl__play { position: absolute; left: 1rem; bottom: 1rem; z-index: 1; display: inline-flex; align-items: center; gap: .6rem;
  padding: .45rem .85rem .45rem .45rem; border-radius: 999px; background: rgba(9, 9, 9, .72); border: 1px solid rgba(255, 255, 255, .16);
  color: #F2F0EB; font: 500 .82rem/1 var(--sc-font-text); backdrop-filter: blur(6px); }
.vsl__play i { width: 28px; height: 28px; border-radius: 50%; background: var(--amber); display: grid; place-items: center; transition: transform 260ms var(--sc-ease-out); }
.vsl__play i::before { content: ""; width: 0; height: 0; margin-left: 2px; border-style: solid; border-width: 5.5px 0 5.5px 9px; border-color: transparent transparent transparent #0B0B0B; }
.vsl__copy .lbl { margin-bottom: .9rem; }
.vsl__copy .h3 { margin: 0; }
.vsl__copy p:not(.lbl) { margin: .8rem 0 0; color: var(--sc-ink-soft); line-height: 1.6; max-width: 42ch; }
.vsl__go { margin-top: 1.25rem; }
.vsl:hover { border-color: rgba(245, 165, 36, .45); }
.vsl:hover .vsl__shot img { transform: scale(1.035); }
.vsl:hover .vsl__play i { transform: scale(1.12); }
.vsl:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
@media (max-width: 760px) { .vsl { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .vsl__shot img, .vsl__play i { transition: none; } .vsl:hover .vsl__shot img, .vsl:hover .vsl__play i { transform: none; } }
.station__frame { margin-top: 2rem; max-width: 46rem; }

/* ------------------------------------------------ WhatsApp row ---- */
/* Daily reporting: the "Written once" line beside the WhatsApp phone
   (whatsapp.css), showing the exchange the stamps describe. */
.wa-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 17.5rem); gap: clamp(2rem, 6vw, 6rem); align-items: center; margin-top: clamp(2.5rem, 5vw, 4rem); }
.wa-row .stamps-resolve { margin-top: 0; }
.wa-row__p { margin-top: 1.1rem; max-width: 34rem; color: var(--sc-ink-soft); font-size: 1.05rem; line-height: 1.55; }
.wa-row__phone { justify-self: end; width: 100%; }
@media (max-width: 760px) {
  .wa-row { grid-template-columns: 1fr; }
  .wa-row__phone { justify-self: center; max-width: 16.5rem; }
}

/* ------------------------------------------------------------- phones --
   Mobile round (2026-10-28). Phones only: nothing here reaches the desktop.
   The bar: body copy 16px, secondary text 13px, nothing read under 12px;
   every tap target at least 44px tall with 8px to its neighbor; inputs at
   16px so iOS does not zoom the page on focus. */
@media (max-width: 760px) {
  .sec { padding-block: 3.25rem; }
  .sec--tight { padding-block: 2.75rem; }

  /* Secondary text: 13px floor. */
  .lbl, .eyebrow, .cta__sub, .crumbs ol, .ref__k, .hub__k, .person__k, .qbar__count, .foot__mail { font-size: .8125rem; }
  .foot__h { font-size: .8125rem; }
  /* Card meta (role chips, "Our answer", the No. stamp): 12px floor. */
  .console__by, .qcard__src, .qcard .chip--line, .chip { font-size: .75rem; }
  .console__by time, .qcard .console__by time { font-size: .75rem; }
  .qcard__src a, a.qcard__src { display: inline-flex; align-items: center; min-height: 44px; }

  /* Tap targets. The visible underline stays 4px under the words; the
     padding only grows the hit area. */
  .more { min-height: 44px; padding: 10px 0 14px; background-position: left 0 bottom 10px; }
  .more::before { bottom: 10px; }
  .crumbs a { display: inline-block; padding-block: 15px; margin-block: -15px; }
  .qjump { gap: .5rem 1.25rem; }
  .qjump a { display: inline-flex; align-items: center; min-height: 44px; }

  /* Questions: on a phone the sticky filter is one swipeable row of 44px
     roles, so it covers about a tenth of the screen, not a fifth. */
  .qbar .ui__head { display: none; }
  .qbar__roles { flex-wrap: nowrap; overflow-x: auto; gap: .5rem; padding: .5rem .75rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .qbar__roles::-webkit-scrollbar { display: none; }
  .qbar .role { flex: none; }
  /* Stuck flush under the nav bar, with a fade where the roles run off
     the right edge; the end padding lets the last role scroll clear of it. */
  .qbar { top: var(--bar-h); margin-top: 0; box-shadow: 0 -1px 0 0 var(--sc-canvas); }
  .qbar::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 2.75rem; pointer-events: none;
    background: linear-gradient(90deg, rgba(18,18,18,0), var(--sc-canvas) 80%); }
  .qbar__roles { padding-inline-end: 2.75rem; }
  .sec:has(> .sc-wrap > .qbar) { padding-top: 1rem; }
  .ih:has(+ .sec > .sc-wrap > .qbar) { padding-bottom: 0; }
  .role { min-height: 44px; padding-inline: 1rem; font-size: .875rem; }
  .qgroup, .qgroup:target { scroll-margin-top: calc(var(--bar-h) + 6rem); }

  /* Stacked link rows and tiles: 8px of air between neighbors. */
  .refs--list { row-gap: 8px; }
  .refs--list .ref a { padding-block: 1.1rem; }
  .refs + .more { margin-top: 1rem; }
  .dolist { gap: 8px; border: 0; border-radius: 0; overflow: visible; }
  .dolist li { box-shadow: none; border: 1px solid var(--line); border-radius: var(--sc-r-md); overflow: hidden; }

  /* A desktop frame is unreadable at phone width: the phone screen stands in. */
  .station__frame--swap .frame__img { max-width: 17rem; margin-inline: auto; border-radius: 1.75rem; }
  .station__frame--swap figcaption { justify-content: center; }

  /* Inputs at 16px: below that iOS zooms in on focus. */
  .foot__pulse-field input, .exit__field input { font-size: 1rem; }

  /* Footer: every link a 44px row, 8px apart. */
  .foot li + li { margin-top: 8px; }
  .foot li a:not(.btn):not(.lockup):not(.more) { display: inline-flex; align-items: center; min-height: 44px; }
  .foot .foot__h { margin-bottom: .5rem; }
  .foot .foot__h a:not(.btn):not(.lockup):not(.more) { display: inline-flex; align-items: center; min-height: 44px; }
  .foot__cols { row-gap: 1.5rem; }
  .foot .foot__mail { display: inline-flex; align-items: center; min-height: 44px; }
  .foot__legal { align-items: center; gap: 1rem; }
  .foot__legal a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; }

  /* Bar: the logo and the button are full 44px targets. */
  .lockup { min-height: 44px; }
  .bar__cta { min-height: 44px; }
}
@media (max-width: 960px) {
  /* Phone menu: 44px rows with air between them. */
  .drop__list a { display: flex; align-items: center; min-height: 44px; padding-block: .25rem; }
  .drop__list li + li { margin-top: 4px; }
  .bar__sheet-links { gap: 8px 1.4rem; }
  .bar__sheet-links a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; }
}
/* Blog on phones, through site.css: team-lead owns the blog's own styles,
   so these only lift sizes. body.blog outranks the blog's inline sheet. */
@media (max-width: 760px) {
  body.blog .bl .tag, body.blog .bl .toc-h, body.blog .bl th { font-size: .75rem; }
  /* 13px meta: tighter tracking and dot spacing keep category and date on one line. */
  body.blog .fn-meta { font-size: .8125rem; letter-spacing: .04em; }
  body.blog .fn-meta > * + *::before { margin: 0 7px; }
  body.blog .fn-desc { font-size: 1rem; }
  body.blog .crumbs ol, body.blog .fn-links, body.blog .fn-count, body.blog .bl-facts, body.blog .bl .takeaways h2,
  body.blog .bl .bl-next__all, body.blog .lbl, body.blog .bl .bl-next__c .lbl, body.blog .bl .bl-author .lbl { font-size: .8125rem; }
  body.blog .bl-homebtn { min-height: 44px; }
  /* When the crumbs and the home button wrap (360), keep 8px between their tap areas. */
  body.blog .bl-top { row-gap: 24px; }
  body.blog .fn-links { gap: 8px 24px; }
  body.blog .fn-links a, body.blog .bl .bl-next__all a, body.blog .bl .bl-author__n a, body.blog .bl-by__n a { display: inline-flex; align-items: center; min-height: 44px; }
  body.blog .bl .toc a { padding-block: 12px; min-height: 44px; }
  body.blog .bl .toc ul { gap: 8px; }
  body.blog .bl details.faq { padding-block: 4px; }
  body.blog .bl details.faq summary { padding-block: 14px; }
  body.blog .bl details.faq summary::after { top: 12px; }
  body.blog .crumbs a { display: inline-block; padding-block: 15px; margin-block: -15px; }
  /* Wide tables: a soft amber edge shows on whichever side still has more
     table to swipe to. The panel-colored covers scroll with the table and
     hide the edge once it is reached. */
  body.blog .bl .tw {
    background:
      linear-gradient(90deg, #0E0E0E 40%, rgba(14,14,14,0)) left / 36px 100% no-repeat local,
      linear-gradient(270deg, #0E0E0E 40%, rgba(14,14,14,0)) right / 36px 100% no-repeat local,
      linear-gradient(90deg, rgba(245,165,36,.28), rgba(245,165,36,0)) left / 18px 100% no-repeat scroll,
      linear-gradient(270deg, rgba(245,165,36,.28), rgba(245,165,36,0)) right / 18px 100% no-repeat scroll,
      #0E0E0E;
  }
}
/* Blog grid cards: category and date only, at every width; the read time
   would wrap onto its own line behind the separator dot. The featured card
   keeps it where there is room, and so does the post byline. */
body.blog .fn-card .fn-meta > span:not(.fn-cat) { display: none; }
@media (max-width: 480px) {
  body.blog .fn-feat .fn-meta > span:not(.fn-cat) { display: none; }
}
@media (max-width: 380px) {
  body.blog .fn-meta { letter-spacing: .02em; }
  body.blog .fn-meta > * + *::before { margin: 0 5px; }
}

/* Mobile round, the solutions pages. On a phone the WhatsApp phone on daily
   reporting grows to the width of the column and its type goes a size up,
   so the timestamps read at 12px; source lines and case labels read at 13px;
   the email link under every talk block is a 44px target. */
@media (max-width: 760px) {
  .wa-row__phone { max-width: 21rem; }
  .wa-row__phone .waph__screen { font-size: 4.65cqi; }
  .wa-row__phone :is(.waph__meta, .waph__dur) { font-size: max(.8em, 12px); }
  .wa-row__phone :is(.waph__day, .waph__who small) { font-size: max(.82em, 12px); }
  .roi__src, .bidcases i { font-size: .8125rem; }
  .talk__nda a { display: inline-flex; align-items: center; min-height: 44px; }

  /* Frames read on a phone. A whole desktop screen at phone width puts its
     text near 6px, so each one swaps (through its <picture>) to a 4:3 crop
     of the part that carries its point, 1080px wide, from
     assets/v2/product/phone-crop/. --px/--py/--pw record where it was cut. */
  :is(.frame__img, .layer__art, .stack__desk2) picture { display: contents; }
  .frame__img[style*="--pw"] { aspect-ratio: 4 / 3; }
  :is(.frame__img[style*="--pw"], .layer__art[style*="--pw"], .stack--dc .stack__desk2) img {
    width: 100%; height: auto; max-width: none; margin: 0; object-fit: fill;
  }
  /* A hero stack becomes its phone screen at full width, cropped from --sy
     to the window shape --sa; .stack--dc shows its second desk frame's crop
     instead, as a frame above. */
  .stack--pc, .stack--dc {
    aspect-ratio: var(--sa); overflow: hidden; border-radius: var(--sc-r-md);
    border: 1px solid var(--line-strong); background: #0B0B0B; box-shadow: var(--sc-e3);
  }
  .stack--pc > :not(.stack__phone), .stack--dc > :not(.stack__desk2) { display: none; }
  .stack--pc .stack__phone, .stack--dc .stack__desk2 {
    position: static; width: 100%; aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none; opacity: 1;
  }
  .stack--pc .stack__phone img {
    width: 110%; height: auto; margin-left: -5%; object-fit: fill; transform: translateY(calc(var(--sy) * -100%));
  }
  /* The phone rows: one screen most of the width, the next one peeking. */
  .sol .phone { flex-basis: 80%; }
  .sol .phone:nth-child(even) { margin-top: 0; }
  .sol .phone figcaption { font-size: 1rem; }
}
/* Phone-size copies of the hero photos and strata grounds (assets/v2/media/phone/):
   the <picture> wrappers stay out of layout, and the inline --ground-m wins on phones. */
.ih__ground picture, .shot__photo picture, .talk__photo picture, .ref__img picture { display: contents; }
@media (max-width: 860px) {
  .ground::before, .hub a::before { background-image: var(--ground-m, var(--ground)); }
}

/* Footer accordion on phones: the link columns collapse to one closed row per
   heading, using details/summary so it works without JS. Each row is a 44px
   target with 4px above and below, so neighbors sit 8px apart. The Pulse
   signup and the legal line stay open. Above 760px the accordion is hidden
   and nothing changes. */
.foot__acc { display: none; }
@media (max-width: 760px) {
  .foot__in { padding-block: 2.5rem 1rem; gap: 1rem; }
  .foot__brand p { margin: .75rem 0 .25rem; max-width: none; font-size: 1rem; }
  /* Only where the accordion exists: an older copied footer keeps its columns. */
  .foot__acc ~ .foot__cols { display: none; }
  .foot__acc { display: block; border-top: 1px solid var(--line); }
  .foot__acc-item { border-bottom: 1px solid var(--line); padding-block: 4px; }
  .foot__acc-item summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
  .foot__acc-item summary::-webkit-details-marker { display: none; }
  .foot__acc-item summary::after { content: ""; width: 9px; height: 9px; margin-right: 6px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: translateY(-3px) rotate(45deg); transition: transform 200ms var(--sc-ease-out); }
  .foot__acc-item[open] summary::after { transform: translateY(2px) rotate(-135deg); }
  .foot__acc-item summary:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 4px; }
  .foot .foot__acc .foot__h { margin: 0; }
  .foot__acc ul { padding: 8px 0 .5rem; }
  .foot__in { padding-top: 2rem; }
  /* The Pulse: input and button share one row; the legal line is one slim row. */
  .foot__pulse { padding-block: 1.25rem; gap: .75rem; }
  .foot__pulse-form { flex-direction: row; }
  .foot__pulse .btn { width: auto; padding-inline: .9rem; }
  .foot__pulse .btn__arrow { display: none; }
  .foot__pulse-field input { padding-inline: .75rem; }
  .foot__legal { padding-block: .25rem .75rem; }
}
/* Under 380px the email would not fit beside the button: stack them again. */
@media (max-width: 380px) {
  .foot__pulse-form { flex-direction: column; }
  .foot__pulse .btn { width: 100%; justify-content: center; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .foot__acc-item summary::after { transition: none; }
}