/* ==========================================================================
   Scale Command site: the shell stylesheet (version 2, many pages)
   Owns: tokens, base, type, the header (What we do dropdown, menu button),
   the drawer, buttons, chips, the page components from SITE-MAP section 5
   (hero, rows, lists, app cards, stage strip, ledger sample, steps, FAQ,
   related, closing, what strip, teaser), the ledger grammar, the stage
   tracker, the phone frame chrome, the pulse, the footer and the
   breakpoints (1080 / 940 / 620).
   Tool modules style only their own classes in /css/*.css.
   ========================================================================== */

/* ----- 1. Tokens ------------------------------------------------------- */
:root {
  --bg: #0A0A0C;
  --card: #141418;
  --raised: #1B1B21;
  --hair: rgba(200, 168, 78, 0.15);
  --hair-soft: rgba(237, 235, 227, 0.38); /* slider tracks and unlit stage bars: 3.1:1 on the page, 3.2:1 on a card */
  --edge: rgba(237, 235, 227, 0.38);      /* control borders (chips, menu button, week stepper, ghost button) */
  --edge-hover: rgba(237, 235, 227, 0.5);
  --edge-on: rgba(237, 235, 227, 0.55);   /* a pressed chip */
  --hair-strong: rgba(200, 168, 78, 0.42);
  --hair-faint: rgba(200, 168, 78, 0.06);
  --band-alpha: rgba(74, 143, 212, 0.16);
  --band-edge: rgba(74, 143, 212, 0.4);

  --gold: #C8A84E;
  --gold-light: #DFC06A;
  --gold-dark: #8F7A32;
  --on-gold: #121212;

  --text: #EDEBE3;
  --text-2: #A7A5A0;
  --muted: #8A8A93; /* lifted from #73737C: 5.0:1 on the raised card, 5.8:1 on the page */

  --series-gold: #AC8C36;
  --series-blue: #4A8FD4;
  --green: #3FBF7F;
  --amber: #E0A63A;
  --red: #E05A4F;
  --money: #4ADE80;

  /* One family everywhere: Manrope 400 to 800. The three roles stay as tokens so a
     re-skin can split them again; numbers line up through tabular figures on body. */
  --font-display: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --radius-card: 10px;
  --radius-chip: 6px;
  --radius-btn: 8px;
  --radius-phone: 20px;
  --radius-photo: 14px;  /* hero photos and the photo band tiles, like the app cards */

  --btn-h: 48px;
  --tap: 44px;
  --header-h: 64px;
  --sticky-top: 76px;

  --container: 1320px;
  --gutter: clamp(16px, 4vw, 56px);
  --col-gap: 48px;
  --phone-w: 360px;
  --phone-body-h: 620px;

  --dur: 350ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--gold-light);
}

/* ----- 2. Base ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--bg);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }
.btn:focus-visible, .chip:focus-visible { outline-offset: 2px; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute; top: 8px; left: 8px;
  z-index: 100;
  padding: 10px 14px;
  background: var(--gold); color: var(--on-gold);
  border-radius: var(--radius-btn);
  font-weight: 600;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ----- 3. Type ---------------------------------------------------------- */
h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 4.5vw + 0.6rem, 3.6rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
}
.h1-line { display: block; }

.section-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.35rem, 2vw + 0.7rem, 2rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
}

.sub-title, .index-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.2rem, 1.2vw + 0.8rem, 1.55rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}

.lede {
  font-size: clamp(1rem, 0.4vw + 0.92rem, 1.15rem);
  color: var(--text-2);
  max-width: 56ch;
}

.section-line { color: var(--text-2); max-width: 62ch; }

.text-link {
  display: inline-flex; align-items: center;
  min-height: var(--tap);
  color: var(--text-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.text-link:hover { color: var(--text); }

/* ----- 4. Header -------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  background: rgba(10, 10, 12, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hair);
}
.header-inner {
  max-width: var(--container);
  height: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex; align-items: center; gap: 12px;
}

.brand { display: flex; align-items: center; gap: 10px; min-height: var(--tap); flex: none; }
.brand img { width: 40px; height: 35px; }
.brand-words {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.1em;
  white-space: nowrap;
  color: var(--text);
}
.brand-command {
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.header-nav { display: none; align-items: center; gap: 18px; margin-left: 22px; }
.nav-link, .nav-trigger {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--tap);
  padding: 0 2px;
  background: none; border: 0;
  font-size: 14px; font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
  cursor: pointer;
}
.nav-link:hover, .nav-trigger:hover, .nav-trigger[aria-expanded="true"] { color: var(--text); }
.nav-link::after, .nav-trigger::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 6px;
  height: 2px; background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform 220ms var(--ease);
}
.nav-link[aria-current="page"], .nav-trigger[data-current="true"] { color: var(--text); }
.nav-link[aria-current="page"]::after, .nav-trigger[data-current="true"]::after { transform: scaleX(1); }
.nav-trigger svg { width: 14px; height: 14px; flex: none; transition: transform 200ms var(--ease); }
.nav-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav-dropdown { position: relative; }
.nav-panel {
  position: absolute; top: calc(100% + 2px); left: -10px; z-index: 60;
  width: 600px; max-width: calc(100vw - 32px);
  padding: 8px;
  background: var(--raised);
  border: 1px solid var(--hair);
  border-radius: 12px;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5);
}
.nav-panel::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav-panel[hidden] { display: none; }
.nav-panel-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.nav-panel a {
  display: grid; gap: 2px;
  min-height: var(--tap);
  padding: 10px 12px;
  border-radius: 8px;
}
.nav-panel a:hover, .nav-panel a:focus-visible { background: rgba(237, 235, 227, 0.05); }
.nav-panel a[aria-current="page"] .nav-item-title { color: var(--gold-light); }
.nav-item-title { font-size: 14px; font-weight: 600; color: var(--text); }
.nav-item-line { font-size: 13px; color: var(--text-2); }

.header-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; flex: none; }
.header-signin { display: none; min-height: var(--tap); align-items: center; font-size: 14px; font-weight: 500; color: var(--text-2); }
.header-signin:hover { color: var(--text); }

.menu-btn {
  width: var(--tap); height: var(--tap);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  background: transparent;
  border: 1px solid var(--edge);
  border-radius: var(--radius-btn);
  color: var(--text);
  cursor: pointer;
}
.menu-btn svg { width: 22px; height: 22px; }
.menu-btn:hover { border-color: var(--edge-hover); }

/* ----- 5. Drawer (phones and tablets) ----------------------------------- */
.drawer-backdrop {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(0, 0, 0, 0.62);
  animation: fade-in 220ms var(--ease) both;
}
.drawer-backdrop[hidden] { display: none; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 80;
  width: min(100%, 420px);
  display: flex; flex-direction: column;
  padding: 0 var(--gutter) 32px;
  background: var(--bg);
  border-left: 1px solid var(--hair);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 280ms var(--ease), visibility 0s linear 280ms;
}
body.drawer-open .drawer {
  transform: none;
  visibility: visible;
  transition: transform 280ms var(--ease), visibility 0s;
}
body.drawer-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }

.drawer-head { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); flex: none; }
.drawer-title { font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: 0.1em; color: var(--text-2); }
.drawer-close {
  width: var(--tap); height: var(--tap);
  display: inline-flex; align-items: center; justify-content: center;
  margin-right: -8px;
  padding: 0;
  background: transparent; border: 0; border-radius: var(--radius-btn);
  color: var(--text);
  cursor: pointer;
}
.drawer-close svg { width: 22px; height: 22px; }

.drawer-nav { display: grid; align-content: start; padding-top: 6px; }
.drawer-nav a {
  display: flex; align-items: center;
  min-height: 56px;
  font-family: var(--font-display);
  font-size: 1.2rem; font-weight: 700;
  color: var(--text);
  border-bottom: 1px solid var(--hair);
}
.drawer-group { display: grid; padding-bottom: 20px; }
.drawer-group-label { padding: 10px 0 4px; }
.drawer-group a { min-height: 50px; font-size: 1.05rem; font-weight: 600; color: var(--text-2); }
.drawer-nav a:hover { color: var(--text); }
.drawer-nav a[aria-current="page"] { color: var(--gold-light); }

/* ----- 6. Buttons ------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--btn-h);
  padding: 0 22px;
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 15px; font-weight: 600; line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease);
}
.btn-gold { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.btn-gold:hover { background: var(--gold-light); border-color: var(--gold-light); }
.btn-ghost { background: transparent; border-color: var(--edge); color: var(--text); }
.btn-ghost:hover { border-color: var(--text-2); background: rgba(237, 235, 227, 0.04); }
.btn-sm { min-height: var(--tap); padding: 0 16px; font-size: 14px; }

.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* ----- 7. Chips --------------------------------------------------------- */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: var(--tap);
  padding: 8px 14px;
  border-radius: var(--radius-chip);
  border: 1px solid var(--edge);
  background: transparent;
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 500; line-height: 1.25;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms var(--ease), color 160ms var(--ease), background-color 160ms var(--ease);
}
.chip::before {
  content: ''; flex: none;
  width: 8px; height: 8px; border-radius: 50%;
  border: 1px solid currentColor;
  transition: background-color 160ms var(--ease);
}
.chip:hover { border-color: var(--edge-hover); color: var(--text); }
.chip[aria-pressed="true"] {
  color: var(--text);
  background: var(--raised);
  border-color: var(--edge-on);
}
.chip[aria-pressed="true"]::before { background: currentColor; }

/* ----- 8. Page layout --------------------------------------------------- */
.page {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section, .tool, .steps-section {
  position: relative;
  padding-block: clamp(40px, 7vw, 72px);
  border-top: 1px solid var(--hair);
  scroll-margin-top: calc(var(--header-h) + 12px);
}
.section-head { display: grid; gap: 10px; margin-bottom: 28px; }

/* The hero: eyebrow, h1, lede, two actions. No mock in any hero. */
.hero-page {
  display: grid; gap: 18px; justify-items: start;
  padding-top: clamp(40px, 8vw, 88px);
  padding-bottom: clamp(36px, 6vw, 64px);
}
.hero-page h1 { max-width: 20ch; }
.hero-actions, .closing-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.hero-actions { margin-top: 6px; }

/* The split hero (the build adds .hero-split when photos.json has a hero for the page): the eyebrow,
   h1, lede and actions in .hero-text, one portrait photo in .hero-photo. Under 940px the photo sits
   under the headline, full width on phones and never wider than 560px. No animation on the photo. */
.hero-split { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
.hero-split > .hero-text { display: grid; gap: 18px; justify-items: start; justify-self: stretch; min-width: 0; }
.hero-split > .hero-photo { width: 100%; max-width: 560px; min-width: 0; }
.hero-photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-photo);
  background: var(--card);
}

/* The photo band (placed by the build): three portrait tiles and nothing else. Under 700px it is a
   scroll-snap row that scrolls inside itself, so the page never scrolls sideways; from 700px the three
   tiles sit in a row (two columns would leave the third alone with an empty cell beside it). The
   section carries tabindex="0" so a keyboard can scroll the row; the ring sits inside the band. */
.photo-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(78vw, 440px);
  gap: 12px;
  padding-block: clamp(36px, 6vw, 64px);
  border-top: 1px solid var(--hair);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
}
.photo-strip img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-photo);
  background: var(--card);
  scroll-snap-align: start;
}
.photo-strip:focus-visible { outline-offset: -3px; }

/* The alternating explainer row: text and a visual, two columns from 940px. */
.row {
  display: grid; gap: 28px;
  padding-block: clamp(36px, 6vw, 64px);
  border-top: 1px solid var(--hair);
  scroll-margin-top: calc(var(--header-h) + 12px);
}
.row-text { display: grid; gap: 14px; align-content: center; min-width: 0; }
.row-text p { color: var(--text-2); max-width: 56ch; }
.row-text .btn-row { margin-top: 4px; }
.row-visual { order: -1; min-width: 0; }
/* A row that mounts a tool, or a wide row (the words sit above a full-width visual at every size), keeps
   its text first on phones, so the visual comes after the words that explain it */
.row.has-tool .row-visual, .row.is-wide .row-visual { order: 0; }

.plain-list { display: grid; gap: 8px; }
.plain-list li { position: relative; padding-left: 18px; color: var(--text-2); }
.plain-list li::before {
  content: ''; position: absolute; left: 0; top: 0.66em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-2); opacity: 0.7;
}

/* Steps: an ordered list, numbered because it is a sequence. */
.steps { display: grid; counter-reset: step; border-top: 1px solid var(--hair); }
.step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--hair);
  counter-increment: step;
}
.step::before {
  content: counter(step);
  grid-row: 1 / span 2;
  font-family: var(--font-display);
  font-size: 1.1rem; font-weight: 800;
  line-height: 1.4;
  min-width: 1.6em;
  color: var(--text);
}
.step-title { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; line-height: 1.3; }
.step-text { color: var(--text-2); font-size: 15px; }

/* FAQ: details with a plain chevron, no accordion library. */
.faq-list { border-top: 1px solid var(--hair); }
.faq-group { padding-top: 32px; }
.faq-group > h2, .faq-group > .sub-title { margin-bottom: 8px; }
section.faq-list > .sub-title { padding-top: 32px; margin-bottom: 8px; }
.steps-section > .sub-title { margin-bottom: 20px; }
.faq-item { border-bottom: 1px solid var(--hair); }
.faq-q {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 56px;
  padding: 14px 4px 14px 0;
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after {
  content: '';
  width: 10px; height: 10px;
  margin: 0 6px 4px 0;
  border-right: 2px solid var(--text-2);
  border-bottom: 2px solid var(--text-2);
  transform: rotate(45deg);
  transition: transform 200ms var(--ease);
}
.faq-item[open] .faq-q::after { transform: rotate(225deg); margin-bottom: -4px; }
.faq-q:hover { color: var(--gold-light); }
.faq-a { display: grid; gap: 10px; padding: 0 0 18px; color: var(--text-2); max-width: 66ch; }

/* Keep reading: three cards from the related list (built by the build). */
.related {
  display: grid; gap: 20px;
  padding-block: clamp(36px, 6vw, 64px);
  border-top: 1px solid var(--hair);
}
.related-title { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; letter-spacing: -0.01em; }
.related-grid { display: grid; gap: 12px; }
.related-card {
  display: grid; gap: 6px; align-content: start;
  min-height: var(--tap);
  padding: 18px;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--radius-card);
  transition: border-color 160ms var(--ease);
}
.related-card:hover { border-color: var(--hair-strong); }
.related-card-title { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.related-card-line { font-size: 14px; color: var(--text-2); }

/* The closing band (built by the build; Home writes its own). */
.closing {
  padding-block: clamp(48px, 8vw, 96px);
  border-top: 1px solid var(--hair);
}
.closing-inner { display: grid; gap: 16px; justify-items: start; max-width: 640px; }
.closing-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 3vw + 0.6rem, 2.6rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.closing-line { color: var(--text-2); font-size: 1.05rem; max-width: 50ch; }
/* Home only: the one CRM line, as the lead-in above the closing title (eyebrow-sized, sentence case). */
.closing-kicker { color: var(--muted); font-size: 0.95rem; margin-bottom: -4px; }
.closing-actions { margin-top: 6px; }

/* Home: the what-cards, seven since the attribution pivot (Attribution first, Sales last). With
   exactly seven, the first card takes the whole first row from 620px and lays out sideways, the words
   left and its thumbnail right, so the main piece leads and the six behind it keep the 2-up / 3-up
   grid with Sales last and small. Six cards, or eight, get the plain grid. The rule is below under
   the 620px breakpoint; it needs only the what-card class names from SITE-MAP section 5. */
.what-strip { display: grid; gap: 14px; }
.what-card {
  display: grid; gap: 10px; align-content: start;
  padding: 18px;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--radius-card);
  transition: border-color 160ms var(--ease);
}
.what-card:hover { border-color: var(--hair-strong); }
.what-card-title { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; letter-spacing: -0.01em; margin-top: 4px; }
.what-card-line { color: var(--text-2); font-size: 15px; }
.what-card-more {
  display: inline-flex; align-items: center;
  min-height: 28px;
  margin-top: auto;
  font-size: 14px; font-weight: 600;
  color: var(--text);
  text-decoration: underline; text-underline-offset: 3px;
}
.what-card:hover .what-card-more { color: var(--gold-light); }

/* Home: the Test your shop teaser. */
.teaser-card {
  display: grid; gap: 24px;
  padding: clamp(20px, 4vw, 36px);
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 14px;
}
.teaser-text { display: grid; gap: 14px; justify-items: start; align-content: center; }
.teaser-text p { color: var(--text-2); max-width: 52ch; }

/* A ledger sample: three static ledger rows under a small label. */
.ledger-sample { display: grid; gap: 10px; min-width: 0; }
.ledger-sample-label {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--muted);
}

/* The stage strip: the six stages in a row, one line each. */
.stage-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  counter-reset: st;
}
.stage-strip li {
  display: grid; gap: 4px; align-content: start;
  padding: 10px 8px 8px;
  border-top: 2px solid var(--hair-soft);
  counter-increment: st;
}
.stage-strip li::before {
  content: counter(st);
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 500; letter-spacing: 0.1em;
  color: var(--muted);
}
.stage-strip-name {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--text);
}
.stage-strip-line { font-size: 12px; line-height: 1.4; color: var(--muted); }

/* ----- 9. Ledger grammar (label left, mono readout right, hairlines) ---- */
.ledger { border-top: 1px solid var(--hair); }
.ledger-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label readout" "range range";
  align-items: center;
  column-gap: 12px;
  padding: 12px 0 4px;
  border-bottom: 1px solid var(--hair);
}
.ledger-label {
  grid-area: label;
  font-size: 14px; font-weight: 500; line-height: 1.3;
  color: var(--text);
}
.ledger-readout {
  grid-area: readout;
  font-family: var(--font-mono);
  font-size: 15px; font-weight: 600; line-height: 1;
  color: var(--text);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ledger-range {
  grid-area: range;
  -webkit-appearance: none; appearance: none;
  width: 100%; height: var(--tap);
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.ledger-range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--hair-soft); }
.ledger-range::-moz-range-track { height: 6px; border-radius: 3px; background: var(--hair-soft); }
.ledger-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 28px; height: 28px; margin-top: -11px;
  border-radius: 50%;
  background: var(--gold);
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 1px var(--gold-dark);
  transition: background-color 120ms var(--ease);
}
.ledger-range::-moz-range-thumb {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--gold);
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 1px var(--gold-dark);
}
.ledger-range:hover::-webkit-slider-thumb { background: var(--gold-light); }
.ledger-range:hover::-moz-range-thumb { background: var(--gold-light); }
.ledger-range:focus-visible { outline: none; }
.ledger-range:focus-visible::-webkit-slider-thumb { box-shadow: var(--focus-ring); }
.ledger-range:focus-visible::-moz-range-thumb { box-shadow: var(--focus-ring); }

/* The selected-week row: a 44px previous / next stepper between the label and the readout */
.ledger-row-week {
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "label nav readout" "range range range";
}
.week-nav { grid-area: nav; display: inline-flex; gap: 4px; }
.week-nav-btn {
  width: var(--tap); height: var(--tap);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  background: transparent;
  border: 1px solid var(--edge);
  border-radius: var(--radius-chip);
  color: var(--text-2);
  cursor: pointer;
  transition: border-color 160ms var(--ease), color 160ms var(--ease);
}
.week-nav-btn svg { width: 20px; height: 20px; }
.week-nav-btn:hover { border-color: var(--edge-hover); color: var(--text); }
.week-nav-btn[aria-disabled="true"] { opacity: 0.4; cursor: default; }

/* Static rows: readouts without a slider */
.ledger-row-static { grid-template-areas: "label readout"; min-height: 52px; padding: 12px 0; }
.ledger-row-static .ledger-label { color: var(--text-2); }
.ledger-row-total .ledger-label { color: var(--text); font-weight: 600; }
.ledger-row-total .ledger-readout { font-weight: 700; }

/* ----- 10. Stage tracker (the pipeline tool) ---------------------------- */
.tracker {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  counter-reset: stage;
}
.stage {
  display: flex; flex-direction: column; gap: 6px;
  min-height: var(--tap);
  padding: 10px 6px 8px;
  border-top: 2px solid var(--hair-soft);
  counter-increment: stage;
  transition: border-color 260ms var(--ease);
}
.stage::before {
  content: counter(stage);
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.stage-name {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 600; line-height: 1.25;
  letter-spacing: 0.03em;
  color: var(--muted);
  overflow-wrap: anywhere;
  transition: color 260ms var(--ease);
}
.stage.is-lit { border-top-color: var(--gold-dark); }
.stage.is-lit .stage-name { color: var(--text-2); }
.stage.is-current { border-top-color: var(--gold); }
.stage.is-current::before { color: var(--gold); }
.stage.is-current .stage-name { color: var(--gold-light); }
.stage.is-paused { border-top-style: dashed; border-top-color: var(--amber); }
.stage.is-paused .stage-name { color: var(--amber); }

/* ----- 11. Tool rhythm (the tool sections keep their ids and classes) --- */
.tool > .chip-row, .tool-body > .chip-row { margin-top: 20px; }
.diag-readout { display: grid; gap: 28px; margin-top: 36px; }
.leak { display: grid; gap: 10px; }
.band-line { display: grid; gap: 6px; }
.band-word { min-height: 1.2em; }

#pipe-chart { touch-action: pan-y; }
.ledger-week { margin-top: 12px; }
.tracker-wrap, .pipe-log-wrap, .pipe-next-wrap { display: grid; gap: 10px; margin-top: 28px; }
.pipe-log { min-height: 1.5em; }
.pipe-next30 { min-height: 1.5em; }

.ads-rows { margin-top: 28px; }
.ads-totals { margin-top: 20px; }
.ads-roas { margin-top: 16px; font-family: var(--font-mono); font-weight: 600; }

/* ----- 12. Index rows, join timeline, connections (kept for the pages) -- */
.index { border-top: 1px solid var(--hair); }
.index-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--hair);
}
.index-text { display: grid; gap: 6px; min-width: 0; }
.index-text p { color: var(--text-2); font-size: 15px; }

.timeline { display: grid; grid-template-columns: 1fr; gap: 18px; }
.tl-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding-top: 14px;
  border-top: 1px solid var(--hair);
}
.tl-num {
  font-family: var(--font-display);
  font-size: 1.1rem; font-weight: 800;
  line-height: 1.4;
  color: var(--text);
  min-width: 1.4em;
}
.tl-text { color: var(--text-2); font-size: 15px; }

.connections { display: grid; gap: 14px; }
.conn-list { border-top: 1px solid var(--hair); }
.conn-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name state" "line line";
  gap: 6px 12px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--hair);
}
.conn-name { grid-area: name; font-family: var(--font-mono); font-weight: 600; font-size: 14px; }
.conn-line { grid-area: line; color: var(--text-2); font-size: 15px; }
.conn-state {
  grid-area: state;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.trust-line { color: var(--text-2); font-size: 15px; }

/* ----- 13. App cards: static portal visuals on the pages ---------------- */
/* A labeled sample of the portal's own cards, in the portal's own markup. The shell owns the
   container (this block); the card grammar (.pcard, .psale, .ptrack and the rest) lives in
   css/portal.css under :is(#portal, .app-card), so every page with an .app-card lists
   /css/portal.css in its header. The phone frame chrome is in portal.css too, under #portal. */
.app-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
  padding: 12px 12px 14px;
  background: rgba(6, 6, 8, 0.96);
  border: 1px solid var(--hair);
  border-radius: 14px;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px; line-height: 1.4;
  overflow: hidden;
}
.app-card * { box-sizing: border-box; min-width: 0; }
.app-card-wide { max-width: none; }
.app-card-sample {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 2px 2px 10px;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted);
}
.what-card .app-card { max-width: none; padding: 10px; box-shadow: none; pointer-events: none; }
.what-card .app-card-sample { padding-bottom: 8px; }


/* ----- 15. Pulse (one 700ms gold hairline) ----------------------------- */
.pulse { animation: hair-pulse 700ms var(--ease) 1; }
@keyframes hair-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(200, 168, 78, 0); }
  30%  { box-shadow: 0 0 0 1px var(--gold), 0 0 16px rgba(200, 168, 78, 0.35); }
  100% { box-shadow: 0 0 0 0 rgba(200, 168, 78, 0); }
}

/* ----- 16. Footer ------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--hair); margin-top: 24px; }
.footer-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: 40px var(--gutter) 32px;
  display: grid; gap: 28px;
}
.footer-cols { display: grid; gap: 24px 28px; }
.footer-col { display: grid; align-content: start; }
.footer-col-title {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--muted);
  padding-bottom: 6px;
}
.footer-col a {
  display: inline-flex; align-items: center;
  min-height: var(--tap);
  font-size: 14px;
  color: var(--text-2);
}
.footer-col a:hover { color: var(--text); }
.footer-copy {
  padding-top: 18px;
  border-top: 1px solid var(--hair);
  font-family: var(--font-mono); font-size: 12px;
  color: var(--muted);
}

/* ----- 17. Motion: the hero rise and the reveal on scroll --------------- */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.hero-page > * { animation: rise 520ms var(--ease) both; }
.hero-page > :nth-child(2) { animation-delay: 90ms; }
.hero-page > :nth-child(3) { animation-delay: 180ms; }
.hero-page > :nth-child(4) { animation-delay: 270ms; }
/* In a split hero the words rise and the photo just sits there */
.hero-split > .hero-text, .hero-split > .hero-photo { animation: none; }
.hero-split .hero-text > * { animation: rise 520ms var(--ease) both; }
.hero-split .hero-text > :nth-child(2) { animation-delay: 90ms; }
.hero-split .hero-text > :nth-child(3) { animation-delay: 180ms; }
.hero-split .hero-text > :nth-child(4) { animation-delay: 270ms; }

/* main.js adds html.js-reveal only when the browser can observe and motion is allowed */
html.js-reveal .row {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
}
html.js-reveal .row.is-visible { opacity: 1; transform: none; }

/* ----- 18. Breakpoints -------------------------------------------------- */
/* Phones (under 620): compact header, full-width buttons, two chips per row */
@media (max-width: 619.98px) {
  :root { --header-h: 56px; }
  /* The words stay: the S mark alone never says Scale Command */
  .brand { gap: 8px; }
  .brand img { width: 32px; height: 28px; }
  .brand-words { font-size: 12px; letter-spacing: 0.08em; }
  .header-inner { gap: 10px; }
  .btn-row .btn, .hero-actions .btn, .closing-actions .btn { width: 100%; }
  .btn-row, .hero-actions, .closing-actions { flex-direction: column; align-items: stretch; }
  .hero-actions, .closing-actions { justify-self: stretch; }
  .chip-row .chip { flex: 1 1 calc(50% - 4px); }
  .tracker { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .index-row { grid-template-columns: 1fr; }
  .index-row .btn { width: 100%; }
}

/* 620 and up: two what-cards and two footer columns across; the stage strip three across */
@media (min-width: 620px) {
  .what-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stage-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* The lead card of a seven-card strip: full row, words in column 1 (rows 2 to 4), the thumbnail in
     column 2 across every row. The thumbnail is whichever child is not one of the three text spans
     (a bare .app-card, or the aria-hidden wrapper Home puts around its include). The two 1fr rows
     take what the thumbnail is taller than the words, in equal halves, so the words sit centered
     beside it. With no thumbnail both 1fr rows are 0. */
  .what-card:first-child:nth-last-child(7) {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) minmax(0, min(480px, 46%));
    grid-template-rows: 1fr auto auto auto 1fr;
    column-gap: clamp(20px, 4vw, 48px);
    row-gap: 10px;
    padding: clamp(18px, 3vw, 28px);
  }
  .what-card:first-child:nth-last-child(7) > :not(.what-card-title, .what-card-line, .what-card-more) {
    grid-column: 2; grid-row: 1 / span 5; align-self: center; min-width: 0;
  }
  .what-card:first-child:nth-last-child(7) > .what-card-title { grid-column: 1; grid-row: 2; margin-top: 0; }
  .what-card:first-child:nth-last-child(7) > .what-card-line { grid-column: 1; grid-row: 3; }
  .what-card:first-child:nth-last-child(7) > .what-card-more { grid-column: 1; grid-row: 4; margin-top: 0; }
}

/* 700 and up: the photo band's three tiles in one row (each 209px or wider) */
@media (min-width: 700px) {
  .photo-strip {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    overflow-x: visible;
    scroll-snap-type: none;
  }
}

/* 940 and up: rows go two columns, three what-cards, three related cards, four footer columns */
@media (min-width: 940px) {
  .row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
  }
  .row-visual { order: 0; }
  .row.is-flipped .row-text { order: 1; }
  .row.is-flipped .row-visual { order: 0; }
  /* The photo column tops out at 560px (2x = 1120) and at 42% of the hero, so the words keep the
     larger share between 940 and 1400 instead of being squeezed beside a full-size photo. */
  .hero-split {
    grid-template-columns: minmax(0, 1fr) minmax(320px, min(560px, 42%));
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
  }
  .hero-split > .hero-photo { max-width: none; }
  .photo-strip { gap: 20px; }
  .what-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .teaser-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(28px, 4vw, 56px); }
  .steps.steps-3, .steps.steps-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; border-top: 0; }
  .steps.steps-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .steps-3 .step, .steps-4 .step { grid-template-columns: 1fr; gap: 8px; padding: 16px 0 0; border-bottom: 0; border-top: 1px solid var(--hair); align-content: start; }
  .steps-3 .step::before, .steps-4 .step::before { grid-row: auto; }
  .stage-strip.is-wide { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .row.is-wide { grid-template-columns: minmax(0, 1fr); }
  .row-visual-wide { grid-column: 1 / -1; }
  .timeline { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .tl-step { grid-template-columns: 1fr; gap: 10px; padding-top: 16px; align-content: start; }
  .conn-row { grid-template-columns: 130px minmax(0, 1fr) auto; grid-template-areas: "name line state"; }
}

/* 1080 and up: the desktop nav and the sign-in link; the menu button and the drawer go away */
@media (min-width: 1080px) {
  .header-nav { display: flex; }
  .header-signin { display: inline-flex; }
  .menu-btn, .drawer, .drawer-backdrop { display: none; }
}

/* ----- 19. Reduced motion ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hero-page > *, .hero-split .hero-text > * { animation: none; }
  html.js-reveal .row { opacity: 1; transform: none; transition: none; }
}