/* ===========================================================
   LAWYERS PAGE - ADDITIONS
   Extends styles-v2.css (the single design system: tokens,
   type ladder, components). This file only adds pieces the
   legal page needs that the system does not define; it does
   not re-declare any value styles-v2.css already sets.
   =========================================================== */

/* ===========================
   SECTION INDEX EYEBROW
   Numbered, monospace: scannable structure without prose.
   =========================== */
.sec-index {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 18px;
}

/* Dark sections: same neutral demotion, legible on navy */
.as-header .sec-index,
.metrics-header .sec-index {
  color: rgba(255, 255, 255, 0.6);
}

.section > .container > .sec-index {
  text-align: center;
}

/* ===========================
   POWERED-BY ROW
   The AI engine sits in its own static row so nothing implies
   a law office runs Anthropic or Twilio directly.
   =========================== */
.powered-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 30px;
  margin-bottom: 0;
}

.powered-label {
  font-size: var(--type-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-light);
}

.powered-item {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  font-weight: 600;
  color: var(--text-light);
  letter-spacing: 0.02em;
}

/* ===========================
   AUTOMATIONS GRID
   (extends terminal-window cards)
   Six capability cards plus one full-width closer. Each card
   ends in the chain of steps its system runs: first line is
   the trigger (prompt chevron), the rest chain with arrows.
   =========================== */
.automations-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.auto-card--wide {
  grid-column: 1 / -1;
}

.auto-card--wide .terminal-output-text {
  max-width: 68ch;
}

/* Output fills the card so step chains bottom-align across a row */
.auto-card .terminal-output {
  flex: 1;
}

.auto-steps {
  list-style: none;
  margin: auto 0 0;
  padding: 14px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.auto-steps li {
  position: relative;
  padding-left: 26px;
  font-family: var(--font-mono);
  font-size: var(--type-label);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
}

.auto-steps li::before {
  content: '->';
  position: absolute;
  left: 0;
  color: var(--gold);
  opacity: 0.75;
  font-weight: 700;
}

.auto-steps li:first-child {
  color: rgba(255, 255, 255, 0.85);
}

.auto-steps li:first-child::before {
  content: '>';
  opacity: 1;
}

@media (max-width: 1080px) {
  .automations-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* ===========================
   SHOWCASE PAGE LAYOUT
   Subtitle sits on a dark section here; diagram scrolls
   sideways on phones without shrinking its labels.
   =========================== */
.as-header .section-subtitle {
  color: rgba(255, 255, 255, 0.68);
  margin-left: auto;
  margin-right: auto;
}

.automation-showcase .demo-frame {
  margin-top: 56px;
}

.nd-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.nd-scroll .nd-svg {
  display: block;
  min-width: 820px;
  width: 100%;
  height: auto;
}

.nd-swipe-hint {
  display: none;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--type-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 12px;
}

/* ===========================
   DEMO VIDEO FRAME
   Honest placeholder: no dead play button, no claim the video
   already exists. Its own quiet caption bar (no window dots),
   so the terminal chrome is not repeated a third time.
   =========================== */
.demo-frame {
  position: relative;
  z-index: 1;
  max-width: 880px;
  margin: 0 auto;
  background: #0E0E1C;
  border: 1px solid rgba(197, 165, 90, 0.22);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(197, 165, 90, 0.06);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.demo-frame:hover {
  border-color: rgba(197, 165, 90, 0.4);
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(197, 165, 90, 0.12);
}

.demo-topbar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.demo-topbar-label {
  font-family: var(--font-mono);
  font-size: var(--type-label);
  color: rgba(255, 255, 255, 0.62);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.demo-player {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #0a0a12;
}

.demo-player video,
.demo-player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  object-fit: cover;
}

/* Styled poster shown until the real video is dropped in */
.demo-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 32px;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 120%, rgba(197, 165, 90, 0.12) 0%, transparent 60%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 1px, transparent 1px, transparent 48px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 1px, transparent 1px, transparent 48px);
}

.demo-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--type-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(197, 165, 90, 0.35);
  background: rgba(197, 165, 90, 0.08);
  border-radius: 100px;
  padding: 7px 16px;
}

.demo-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}

.demo-placeholder-title {
  font-family: var(--font-display);
  font-size: var(--type-title);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: -0.015em;
  max-width: 480px;
  line-height: 1.4;
}

.demo-link {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--gold);
  border-bottom: 1px solid rgba(197, 165, 90, 0.5);
  padding-bottom: 2px;
  transition: color var(--transition), border-color var(--transition);
}

.demo-link:hover {
  color: var(--gold-light);
  border-color: var(--gold-light);
}

/* ===========================
   FOCUS VISIBILITY
   Keyboard users get a clear gold ring on every action.
   =========================== */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.btn:focus-visible {
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

/* ===========================
   RESPONSIVE - PAGE PIECES
   =========================== */
@media (max-width: 768px) {
  .as-header {
    margin-bottom: 32px;
  }

  .automation-showcase .demo-frame {
    margin-top: 40px;
  }

  .nd-swipe-hint {
    display: block;
  }

  .nd-diagram-wrap--full {
    padding: 16px 16px 20px;
  }

  .demo-placeholder {
    gap: 16px;
    padding: 20px;
  }

  .demo-placeholder-title {
    font-size: 0.9375rem;
  }
}

/* ===========================
   REDUCED MOTION
   =========================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* Logo marquee: stop scrolling, show one static centered set */
  .logos-inner {
    animation: none;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px 40px;
  }

  .logos-inner .logo-item:nth-child(n+7) {
    display: none;
  }

  .logos-track-wrap {
    mask-image: none;
    -webkit-mask-image: none;
  }

  .nd-pulse-dot {
    animation: none;
  }

  .nd-live-line {
    animation: none;
    stroke-dashoffset: 0;
  }

  .metric-ring,
  .js .metric-ring {
    transition: none;
  }

  .hero-link svg,
  .hero-link:hover svg {
    transition: none;
    transform: none;
  }
}

/* ===========================================================
   LANDING REVAMP - NEW SECTIONS (2026-07)
   Why-automate, Why-Tesray, FAQ, plus generated-image layers
   and mid-page CTAs. All tokens come from styles-v2.css.
   =========================================================== */

/* ---- Generic dark section (matches .section-warm pattern) ---- */
.section-dark {
  background: var(--dark);
  position: relative;
  overflow: hidden;
}
.section-dark .section-title { color: #fff; }
.section-dark .section-subtitle { color: rgba(255, 255, 255, 0.68); }
.section-dark .sec-index { color: rgba(255, 255, 255, 0.6); }

/* ---- Hero photo layer (generated) ---- */
.hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("../assets/generated/hero.jpg") center right / cover no-repeat;
  opacity: 0.6;
}
.hero-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 72% 62% at 50% 48%, rgba(12,12,26,0.82) 0%, rgba(12,12,26,0.5) 55%, transparent 100%),
    linear-gradient(0deg, var(--dark) 2%, transparent 42%);
}

/* ---- Hero trust microline ---- */
.hero-trust {
  margin-top: 38px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.5);
  max-width: 420px;
}

/* ===========================
   WHY AUTOMATE
   =========================== */
.why-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 64px;
}
.why-head .section-title,
.why-head .section-subtitle {
  margin-left: auto;
  margin-right: auto;
}

.why-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: center;
}

.why-stats {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.why-stat {
  padding: 26px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.why-stat:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.09); }
.why-stat-fig {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 3.4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--gold);
  margin-bottom: 12px;
}
.why-stat-label {
  font-size: var(--type-body);
  color: rgba(255, 255, 255, 0.78);
  max-width: 44ch;
  margin-bottom: 8px;
}
.why-stat-src {
  font-family: var(--font-mono);
  font-size: var(--type-label);
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.42);
}

.why-visual-frame {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(197, 165, 90, 0.22);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}
.why-visual-frame img { width: 100%; display: block; }
.why-visual-caption {
  margin-top: 18px;
  text-align: center;
  font-size: var(--type-caption);
  font-style: italic;
  color: rgba(255, 255, 255, 0.6);
}

/* ===========================
   MID-PAGE CTA BAND
   Adapts to light or dark parent section.
   =========================== */
.mid-cta {
  margin-top: 72px;
  padding-top: 44px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}
.section-dark .mid-cta { border-top-color: rgba(255, 255, 255, 0.1); }
.mid-cta-text {
  font-family: var(--font-display);
  font-size: var(--type-title-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--dark);
  max-width: 30ch;
  line-height: 1.35;
}
.section-dark .mid-cta-text { color: #fff; }

/* ===========================
   WHY TESRAY
   =========================== */
.wt-intro {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  align-items: center;
  margin-bottom: 64px;
}
.wt-intro-text .section-title,
.wt-intro-text .section-subtitle { text-align: left; margin-left: 0; }
.wt-intro-visual {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--dark);
  box-shadow: 0 20px 50px rgba(12, 12, 26, 0.28);
}
.wt-intro-visual img { width: 100%; display: block; }

.wt-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.wt-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 26px;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.wt-card:hover {
  border-color: var(--border-gold);
  box-shadow: 0 14px 40px rgba(12, 12, 26, 0.1);
  transform: translateY(-3px);
}
.wt-icon {
  width: 46px;
  height: 46px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  background: rgba(197, 165, 90, 0.1);
  border: 1px solid rgba(197, 165, 90, 0.28);
  margin-bottom: 20px;
}
.wt-icon svg { width: 22px; height: 22px; }
.wt-card h3 {
  font-family: var(--font-display);
  font-size: var(--type-title);
  font-weight: 700;
  color: var(--dark);
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin-bottom: 12px;
}
.wt-card p {
  font-size: var(--type-body);
  color: var(--text-light);
  line-height: 1.6;
}

/* ===========================
   FAQ
   =========================== */
.faq-list {
  max-width: 820px;
  margin: 48px auto 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.faq-item[open] {
  border-color: var(--border-gold);
  box-shadow: 0 10px 30px rgba(12, 12, 26, 0.06);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-family: var(--font-display);
  font-size: var(--type-subhead);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--dark);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '';
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(45deg);
  transition: transform var(--transition);
}
.faq-item[open] summary::after { transform: rotate(-135deg); }
.faq-answer {
  padding: 0 26px 24px;
}
.faq-answer p {
  font-size: var(--type-body);
  color: var(--text-light);
  line-height: 1.65;
  max-width: 68ch;
}

/* ===========================
   CTA BANNER PHOTO
   =========================== */
.cta-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("../assets/generated/cta.jpg") center bottom / cover no-repeat;
  opacity: 0.55;
}

/* ===========================
   METRICS - subtle circuit texture
   =========================== */
.metrics-section {
  background-image:
    linear-gradient(rgba(12,12,26,0.9), rgba(12,12,26,0.93)),
    url("../assets/generated/system.jpg");
  background-size: cover;
  background-position: center;
}

/* ===========================
   RESPONSIVE
   =========================== */
@media (max-width: 900px) {
  .why-grid { grid-template-columns: 1fr; gap: 40px; }
  .why-visual { order: -1; }
  .wt-intro { grid-template-columns: 1fr; gap: 32px; }
  .wt-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .wt-grid { grid-template-columns: 1fr; }
  .hero-trust { max-width: none; }
  .why-head { margin-bottom: 44px; }
  .mid-cta { margin-top: 52px; }
  .faq-item summary { padding: 18px 20px; font-size: var(--type-body); }
  .faq-answer { padding: 0 20px 20px; }
}

/* ===========================================================
   ITERATION 1 — critic-driven fixes (a11y, contrast, layout,
   imagery, responsive). Overrides load after the base above.
   =========================================================== */

/* --- Contrast (WCAG AA) --- */
:root { --text-light: #565D6B; }                 /* 6.0:1 on warm, 6.6:1 on white */
.navbar.scrolled .logo-text { color: var(--gold-dark); }  /* was 2.36:1 gold-on-white */
.logo-item { opacity: 0.8; }                     /* tool wordmarks -> ~5.6:1 */
.why-stat-src { color: rgba(255, 255, 255, 0.55); } /* 12px sources -> 6.2:1 */

/* --- Buttons: never overflow narrow phones --- */
@media (max-width: 560px) {
  .btn { white-space: normal; text-align: center; }
}

/* --- Quiet CTA variant (dark backgrounds only; gold-on-light fails AA) --- */
.btn-ghost-gold {
  background: transparent;
  color: var(--gold);
  border-color: rgba(197, 165, 90, 0.5);
}
.btn-ghost-gold:hover {
  background: rgba(197, 165, 90, 0.08);
  border-color: var(--gold);
  color: var(--gold-light);
  transform: translateY(-2px);
}

/* --- Skip link --- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--gold);
  color: var(--dark);
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 700;
  font-size: 0.9375rem;
}
.skip-link:focus-visible { left: 0; }

/* --- Hero: balance the photo, own the headline zone, add call microcopy --- */
.hero-photo { background-position: center; opacity: 0.5; }
.hero-photo::after {
  background:
    radial-gradient(ellipse 64% 56% at 50% 44%, rgba(12,12,26,0.9) 0%, rgba(12,12,26,0.55) 55%, transparent 100%),
    linear-gradient(0deg, var(--dark) 2%, transparent 42%);
}
.hero-trust { max-width: none; letter-spacing: 0.04em; }
.cta-note {
  margin-top: 16px;
  font-size: var(--type-caption);
  color: rgba(255, 255, 255, 0.6);
  max-width: 440px;
}
@media (max-width: 768px) { .hero-photo { opacity: 0.4; } }
@media (max-width: 560px) { .hero h1 { font-size: clamp(2.1rem, 9vw, 2.6rem); } }

/* --- Section 02 header left-aligned: breaks the centered-stack monotony --- */
#what-we-build > .container > .sec-index,
#what-we-build > .container > .section-title,
#what-we-build > .container > .section-subtitle {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}
#what-we-build > .container > .section-subtitle { max-width: 64ch; }

/* --- Terminal cards: level the ragged step-divider line across a row --- */
.auto-card .terminal-output-text { min-height: calc(1.65em * 3); }

/* --- Wide closer card earns its width: horizontal, with a CTA --- */
.auto-card--wide .terminal-output {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 44px;
}
.auto-wide-copy { max-width: 58ch; }
.auto-wide-copy .terminal-output-text { min-height: 0; margin-top: 10px; }
.auto-card--wide .btn { flex-shrink: 0; }
@media (max-width: 760px) {
  .auto-card--wide .terminal-output { flex-direction: column; align-items: flex-start; gap: 24px; }
}

/* --- Why Tesray shield fills its frame instead of floating --- */
.wt-intro-visual { aspect-ratio: 4 / 3; }
.wt-intro-visual img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.5); }

/* --- Proof: even out the circuit texture; softer, honest header --- */
.metrics-section {
  background-image:
    radial-gradient(ellipse at 50% 50%, rgba(12,12,26,0.86) 0%, rgba(12,12,26,0.96) 100%),
    url("../assets/generated/system.jpg");
}

/* --- Tools strip: demote the powered-by row to a footnote --- */
.powered-row { margin-top: 22px; opacity: 0.62; gap: 8px 16px; }

/* --- CTA banner: let the light rays actually read --- */
.cta-photo { opacity: 0.9; mix-blend-mode: screen; }
.cta-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 72% 82% at 50% 100%, transparent 28%, var(--dark) 100%);
}

/* --- Founder headshot: warm it toward the palette --- */
.about-logo-wrap img { filter: saturate(0.92) brightness(0.97) sepia(0.06); }

/* --- Mobile menu a11y: hide closed drawer from tab order + bigger hamburger target --- */
@media (max-width: 768px) {
  .nav-links {
    visibility: hidden;
    transition: right var(--transition), visibility 0s var(--transition);
  }
  .nav-links.open { visibility: visible; transition: right var(--transition); }
  .hamburger { padding: 10px; margin: -10px; }
  .nd-exec-count { white-space: normal; text-align: right; }
}

/* --- Footer heading level fixed (h2->h4 skip); keep visual style --- */
.footer-links h3 {
  color: #fff;
  font-size: var(--type-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 20px;
}

/* --- Proof section: real-build narrative lead --- */
.proof-story {
  max-width: 660px;
  margin: 22px auto 0;
  text-align: center;
  font-size: var(--type-body);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.72);
}

/* ===========================================================
   ITERATION 2 — concise corporate redesign (2026-07-14)
   Terminal cards retired; clean use-case cards; leaner sections.
   =========================================================== */

/* --- Why Automate: copy left, stacked stats right --- */
.why-grid {
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.why-copy .section-title,
.why-copy .section-subtitle {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}
.why-copy .section-title { margin-bottom: 16px; }
.why-copy .section-subtitle { max-width: 40ch; margin-bottom: 0; }
.why-stat { padding: 22px 0; }
.why-stat-label { max-width: none; }
@media (max-width: 860px) {
  .why-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* --- Use-case cards (replaces the terminal/CLI grid) --- */
.uc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 48px;
}
.uc-card {
  background: var(--bg-warm);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 26px;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.uc-card:hover {
  border-color: var(--border-gold);
  box-shadow: 0 14px 40px rgba(12, 12, 26, 0.1);
  transform: translateY(-3px);
}
.uc-card .wt-icon { margin-bottom: 18px; }
.uc-card h3 {
  font-family: var(--font-display);
  font-size: var(--type-title);
  font-weight: 700;
  color: var(--dark);
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin-bottom: 10px;
}
.uc-card p {
  font-size: var(--type-body);
  color: var(--text-light);
  line-height: 1.6;
}

/* --- Open-ended closer --- */
.uc-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 22px;
  margin-top: 48px;
}
.uc-more p {
  max-width: 54ch;
  font-size: var(--type-subhead);
  color: var(--text-light);
}

@media (max-width: 900px) { .uc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .uc-grid { grid-template-columns: 1fr; } }

/* --- Standalone page header (FAQ etc.): dark band clearing the fixed nav --- */
.page-header {
  padding-top: 150px;
  padding-bottom: 56px;
  text-align: center;
}
.page-header .section-subtitle { margin-bottom: 0; }
.page-header + .faq-section { padding-top: 48px; }

/* ===========================================================
   ITERATION 3 — ALL-DARK THEME (2026-07-14)
   Unifies the page to one dark navy system so sections stop
   reading as separate light/dark blocks. Token flip + fixes
   for the elements that used dark ink on light backgrounds.
   =========================================================== */

:root {
  --bg: #0C0C1A;
  --bg-warm: #101021;                 /* subtle tonal step, not a light block */
  --text: rgba(255, 255, 255, 0.78);
  --text-light: rgba(255, 255, 255, 0.60);
  --border: rgba(255, 255, 255, 0.09);
  --shadow: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
}

/* Headings/eyebrows that were dark ink -> light */
.section-title { color: #fff; }
.founder-quote { color: #fff; }
.about-founder-name { color: #fff; }
.uc-card h3, .wt-card h3 { color: #fff; }

/* Navbar: dark on scroll instead of white */
.navbar.scrolled {
  background: rgba(12, 12, 26, 0.9);
  border-bottom-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.4);
}
.navbar.scrolled .nav-links a:not(.btn) { color: rgba(255, 255, 255, 0.82); }
.navbar.scrolled .hamburger span { background: rgba(255, 255, 255, 0.85); }
.navbar.scrolled .logo-text { color: var(--gold); }

/* Tools strip on dark */
.logos-section { background: var(--bg-warm); }

/* Cards on dark: a hair lighter than the section, gold hover */
.uc-card, .wt-card {
  background: #13131f;
  border-color: rgba(255, 255, 255, 0.09);
}
.uc-card:hover, .wt-card:hover {
  border-color: rgba(197, 165, 90, 0.4);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
}
.uc-card p, .wt-card p { color: rgba(255, 255, 255, 0.66); }

/* Why-Tesray framed image reads on dark */
.wt-intro-visual {
  border-color: rgba(197, 165, 90, 0.18);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

/* Founder on dark */
.about-text p strong { color: #fff; }

/* FAQ page items on dark */
.faq-item { background: #13131f; }
.faq-item summary { color: #fff; }

/* Depth so all-dark doesn't go flat: soft top glows on the two card sections */
#what-we-build, #why-tesray, #testimonials { position: relative; }
#what-we-build::before,
#why-tesray::before,
#testimonials::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 55% at 50% 0%, rgba(197, 165, 90, 0.05), transparent 62%);
}
#what-we-build > .container,
#why-tesray > .container,
#testimonials > .container { position: relative; z-index: 1; }

/* ===========================
   TESTIMONIALS
   =========================== */
.tm-strip {
  margin: 0 auto 8px;
  max-width: 640px;
  text-align: center;
}
.tm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
}
.tm-card {
  background: #13131f;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.tm-stars { color: var(--gold); letter-spacing: 3px; font-size: 0.9rem; }
.tm-quote {
  font-size: var(--type-subhead);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  flex: 1;
}
.tm-attrib { display: flex; flex-direction: column; gap: 2px; }
.tm-name { font-family: var(--font-display); font-weight: 700; color: #fff; }
.tm-role { font-size: var(--type-caption); color: rgba(255, 255, 255, 0.55); }
@media (max-width: 800px) { .tm-grid { grid-template-columns: 1fr; } }

/* --- Founder headshot: vignette its bright studio bg into the dark page --- */
.about-logo-wrap { position: relative; }
.about-logo-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 55px 14px rgba(12, 12, 26, 0.55);
  pointer-events: none;
}

/* ===========================================================
   ITERATION 4 — LIGHT BEIGE THEME + GOLD EMPHASIS (2026-07-14)
   Reverses the all-dark layer. Base = warm beige, text = warm
   charcoal + gold accents. Dark reserved for nav + footer + CTA.
   Palette discipline: one bg (beige), two ink colors (charcoal,
   gold), dark/white only in the dark blocks.
   =========================================================== */

:root {
  --bg: #F4EEE2;            /* warm beige page */
  --bg-warm: #EBE3D3;       /* deeper beige for alternating sections */
  --surface: #FCFAF4;       /* card cream */
  --text: #29241D;          /* warm charcoal */
  --text-light: #6E6555;    /* warm secondary */
  --border: #E2D8C4;        /* warm hairline */
  --shadow: 0 1px 3px rgba(41,36,29,0.06), 0 1px 2px rgba(41,36,29,0.04);
  --gold: #C5A55A;
  --gold-dark: #9A7C33;     /* AA-safe gold for text/numbers on cream */
  --dark: #14121C;          /* nav / footer / cta only */
}
body { background: var(--bg); color: var(--text); }

/* --- NAV: solid dark bar over the light page --- */
.navbar { background: var(--dark); border-bottom: 1px solid rgba(255,255,255,0.07); }
.navbar.scrolled {
  background: rgba(20,18,28,0.94);
  border-bottom-color: rgba(255,255,255,0.08);
  box-shadow: 0 6px 24px rgba(0,0,0,0.3);
}
.navbar .logo-text, .navbar.scrolled .logo-text { color: var(--gold); }
.nav-links a:not(.btn),
.navbar.scrolled .nav-links a:not(.btn) { color: rgba(255,255,255,0.82); }
.nav-links a:not(.btn):hover { color: #fff; }
.hamburger span, .navbar.scrolled .hamburger span { background: rgba(255,255,255,0.85); }
@media (max-width: 768px) { .nav-links { background: var(--dark); } }

/* --- HERO: light --- */
.hero { background: var(--bg); }
.hero-photo { display: none; }
.hero-bg {
  background:
    radial-gradient(ellipse at 50% -12%, rgba(197,165,90,0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 84% 78%, rgba(197,165,90,0.10) 0%, transparent 45%);
}
.hero h1 { color: var(--text); }
.hero-sub { color: var(--text-light); }
.hero-eyebrow { color: var(--gold-dark); }
.hero-trust { color: var(--text-light); border-top-color: var(--border); }
.hero-link { color: var(--text-light); border-bottom-color: rgba(41,36,29,0.25); }
.hero-link:hover { color: var(--gold-dark); border-color: var(--gold-dark); }
.text-gold-gradient {
  background: linear-gradient(135deg, #B8933F, var(--gold-dark));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* --- Section headings / tones --- */
.section-title { color: var(--text); }
.section-subtitle { color: var(--text-light); }
.sec-index { color: var(--gold-dark); }
.section-warm { background: var(--bg-warm); }
.section-dark { background: var(--bg-warm); }
.section-dark .section-title { color: var(--text); }
.section-dark .section-subtitle { color: var(--text-light); }
.section-dark .sec-index { color: var(--gold-dark); }

/* --- Cards: cream on beige, gold hover --- */
.uc-card, .wt-card { background: var(--surface); border-color: var(--border); }
.uc-card:hover, .wt-card:hover {
  border-color: var(--gold);
  box-shadow: 0 14px 40px rgba(41,36,29,0.10);
}
.uc-card h3, .wt-card h3 { color: var(--text); }
.uc-card p, .wt-card p { color: var(--text-light); }

/* --- Why-automate stats: gold numbers --- */
.why-copy .section-title, .why-copy .section-subtitle { color: var(--text); }
.why-copy .section-subtitle { color: var(--text-light); }
.why-stat { border-top-color: var(--border); }
.why-stat-fig { color: var(--gold-dark); }
.why-stat-label { color: var(--text); }
.why-stat-src { color: var(--text-light); }

/* --- Why-Tesray framed image on light --- */
.wt-intro-visual { border-color: var(--border); background: transparent; box-shadow: 0 20px 50px rgba(41,36,29,0.12); }

/* --- Founder on light --- */
.founder-quote { color: var(--text); border-left-color: var(--gold); }
.about-text p, .about-text p strong { color: var(--text); }
.about-founder-name { color: var(--text); }
.about-founder-title { color: var(--text-light); }
.about-logo-wrap::after { display: none; }

/* --- FAQ page on light --- */
.faq-item { background: var(--surface); border-color: var(--border); }
.faq-item summary { color: var(--text); }
.faq-item[open] { border-color: var(--gold); box-shadow: 0 10px 30px rgba(41,36,29,0.06); }
.faq-answer p { color: var(--text-light); }
.page-header { background: var(--bg-warm); }

/* --- Keep dark blocks dark --- */
.footer { background: var(--dark); }
.cta-banner { background: var(--dark); }

/* --- Diagram section header on light (dark card stays dark inside) --- */
.as-header .section-subtitle { color: var(--text-light); }
.as-header .sec-index { color: var(--gold-dark); }
.nd-swipe-hint { color: var(--text-light); }

/* ===========================
   TESTIMONIAL ROTATOR (replaces the brand strip)
   =========================== */
.tm-rotator-section {
  padding: 60px 0;
  background: var(--bg-warm);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.tm-rotator-label {
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 30px;
}
.tm-rotator { position: relative; max-width: 780px; margin: 0 auto; min-height: 150px; }
.tm-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 22px;
  opacity: 0;
  transform: translateX(44px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  pointer-events: none;
}
.tm-slide.is-active { opacity: 1; transform: none; pointer-events: auto; }
.tm-quote {
  font-family: var(--font-display);
  font-size: var(--type-title-lg);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--text);
  max-width: 680px;
}
.tm-person { display: flex; align-items: center; gap: 14px; }
.tm-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gold);
  background: #E6DDCB;
  flex-shrink: 0;
}
.tm-meta { text-align: left; display: flex; flex-direction: column; gap: 1px; }
.tm-name { font-family: var(--font-display); font-weight: 700; color: var(--text); font-size: var(--type-body); }
.tm-role { font-size: var(--type-caption); color: var(--text-light); }
.tm-dots { display: flex; justify-content: center; gap: 8px; margin-top: 30px; }
.tm-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--border); border: none; padding: 0; cursor: pointer;
  transition: background 0.3s, width 0.3s, border-radius 0.3s;
}
.tm-dot.is-active { background: var(--gold); width: 22px; border-radius: 4px; }
@media (max-width: 620px) {
  .tm-rotator { min-height: 220px; }
  .tm-quote { font-size: var(--type-title); }
}
@media (prefers-reduced-motion: reduce) {
  .tm-slide { transition: opacity 0.3s ease; transform: none; }
}

/* --- Hero light abstract (gold on cream, art to the right) --- */
.hero-photo {
  display: block;
  background: url("../assets/generated/hero_light.jpg") center right / cover no-repeat;
  opacity: 1;
}
.hero-photo::after { display: none; }
/* keep centered hero text crisp over the faint art */
.hero-content { text-shadow: 0 1px 0 rgba(244,238,226,0.4); }

/* Why-Tesray shield image: light version, gentle crop */
.wt-intro-visual { aspect-ratio: 4 / 3; background: var(--surface); }
.wt-intro-visual img { transform: scale(1.05); }

/* --- "See it run": light section, dark diagram card sits on it like a product shot --- */
.automation-showcase { background: var(--bg); }
.automation-showcase .section-title { color: var(--text); }
.as-header .section-subtitle { color: var(--text-light); }
.as-header .sec-index { color: var(--gold-dark); }
/* subtle warm plate behind the faint shield so it reads */
.wt-intro-visual {
  background: linear-gradient(160deg, #FBF7EF, #F0E7D6);
}

/* --- Hero art: hide on mobile so it never crosses the headline/sub --- */
@media (max-width: 768px) { .hero-photo { display: none; } }

/* ===========================================================
   MEGA FOOTER (leftclick.ai-style comprehensive nav)
   =========================================================== */
.footer-grid {
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: 44px;
  align-items: start;
}
.footer-brand p { max-width: 30ch; }
.footer-cta {
  display: inline-flex;
  margin-top: 20px;
}
.footer-locale {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: var(--type-label);
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.45);
}
.footer-links h3 { color: var(--gold); }
.footer-links li { margin-bottom: 2px; }
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ===========================================================
   ITERATION 5 — feedback: no light hero art, no numbered
   eyebrows, use-case cards link to real service pages
   =========================================================== */

/* Drop the light abstract art (peers preferred none over these) */
.hero-photo { display: none !important; }

/* Drop the "0X / label" mini-eyebrows; the H2 one-liner is the header */
.sec-index { display: none !important; }

/* Give the hero a touch more warmth now that the art is gone */
.hero-bg {
  background:
    radial-gradient(ellipse at 50% -8%, rgba(197,165,90,0.22) 0%, transparent 52%),
    radial-gradient(ellipse at 15% 90%, rgba(197,165,90,0.10) 0%, transparent 42%),
    radial-gradient(ellipse at 88% 30%, rgba(197,165,90,0.09) 0%, transparent 40%);
}

/* Use-case cards are now links to service pages */
a.uc-card { text-decoration: none; display: flex; flex-direction: column; color: inherit; }
.uc-learn {
  margin-top: 16px;
  font-size: var(--type-caption);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--gold-dark);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
a.uc-card:hover .uc-learn { color: var(--gold); }
.uc-learn svg { width: 14px; height: 14px; transition: transform var(--transition); }
a.uc-card:hover .uc-learn svg { transform: translateX(3px); }

/* ===========================
   SERVICE PAGES
   =========================== */
.svc-body { max-width: 760px; }
.svc-body .section-subtitle { margin-left: 0; text-align: left; max-width: 66ch; }
.svc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.svc-list li {
  position: relative;
  padding-left: 30px;
  font-size: var(--type-body);
  color: var(--text);
  line-height: 1.6;
}
.svc-list li::before {
  content: '';
  position: absolute;
  left: 4px; top: 9px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold);
}
.svc-list li strong { color: var(--text); }
.svc-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--type-caption);
  font-weight: 700;
  color: var(--gold-dark);
  margin-bottom: 20px;
}
.svc-back:hover { color: var(--gold); }

/* Service-page article body (left-aligned) */
.svc-body { max-width: 760px; margin: 0 auto; }
.svc-body > .section-title { text-align: left; margin-left: 0; font-size: var(--type-title-lg); margin-bottom: 20px; }
.svc-lead { font-size: var(--type-subhead); color: var(--text); line-height: 1.6; margin-bottom: 40px; max-width: 66ch; }
.svc-block + .svc-block { margin-top: 52px; }
.page-header .svc-back { justify-content: center; margin-bottom: 16px; }

/* ===========================================================
   ITERATION 6 — Fable review fixes
   =========================================================== */
/* Hero: control the line break, richer gold, on-light call note */
.hero h1 { max-width: 20ch; margin-left: auto; margin-right: auto; }
.text-gold-gradient { background: linear-gradient(135deg, #8C6E25, #6B531C); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero .cta-note { color: var(--text-light); margin-left: auto; margin-right: auto; }
/* Stats: kill dead whitespace under the short copy column */
.why-grid { align-items: start; }
.why-copy { padding-top: 4px; }
.why-copy .hero-link { margin-top: 26px; display: inline-flex; }

/* Rotator recast as rotating proof points (no fake avatars) */
.tm-tag {
  font-family: var(--font-mono);
  font-size: var(--type-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-dark);
}

/* Service page scenario callout */
.svc-scenario {
  margin: 0 0 44px;
  padding: 22px 26px;
  border-left: 3px solid var(--gold);
  background: var(--bg-warm);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--type-subhead);
  line-height: 1.6;
  color: var(--text);
  font-style: italic;
}
.svc-body + .section-warm .faq-list { max-width: 760px; }

/* ===========================================================
   ITERATION 7 — Fable review round 2 fixes
   =========================================================== */
/* Rotator: kill the dead gap (old flex:1 on quote) + let container track active slide */
.tm-slide .tm-quote { flex: 0 0 auto; }
.tm-slide { justify-content: center; }
.tm-slide.is-active { position: relative; }

/* Restore light/warm section alternation through the mid-page */
#what-we-build { background: var(--bg-warm); }

/* Stray dark-era hairline under the last stat */
.why-stat:last-child { border-bottom-color: var(--border); }

/* "How it works" as a numbered sequence, not unordered dots */
.svc-list--steps { counter-reset: step; }
.svc-list--steps li { padding-left: 34px; }
.svc-list--steps li::before {
  content: counter(step);
  counter-increment: step;
  width: 20px; height: 20px;
  left: 0; top: 1px;
  background: none;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  color: var(--gold-dark);
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}

/* Founder headshot: warm down the bright studio backdrop on beige */
.about-logo-wrap::after {
  display: block;
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(235,227,211,0.22);
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Iteration 7b: hide inactive rotator slides from AT + prevent read-through */
.tm-slide { visibility: hidden; transition: opacity 0.6s ease, transform 0.6s ease, visibility 0s 0.6s; }
.tm-slide.is-active { visibility: visible; transition: opacity 0.6s ease, transform 0.6s ease; }

/* ===========================================================
   ITERATION 8 — v2 RESTRUCTURE (2026-07-15)
   New emotional "why it matters" section, and What-We-Automate
   rebuilt as alternating feature rows (product-shot mockup +
   header + blurb + link to the service page).
   =========================================================== */

/* ---- Hero headline: wider cap for the two-clause line ---- */
.hero h1 { max-width: 16ch; }
.hero h1 .text-gold-gradient { display: block; }

/* ---- Emotional "why it matters" section ---- */
.why-human { background: var(--bg); }
.why-human-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.why-human-copy .section-title {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
  max-width: 15ch;
}
.why-human-lead {
  font-size: var(--type-subhead);
  line-height: 1.62;
  color: var(--text);
  margin-bottom: 18px;
  max-width: 52ch;
}
.why-human-copy .hero-link { margin-top: 12px; display: inline-flex; }
.why-human-visual {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 26px 64px rgba(41, 36, 29, 0.16);
}
.why-human-visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}
@media (max-width: 860px) {
  .why-human-grid { grid-template-columns: 1fr; gap: 34px; }
  .why-human-visual { order: -1; }
  .why-human-copy .section-title { max-width: none; }
}

/* ---- Feature rows ---- */
.feat-rows {
  display: flex;
  flex-direction: column;
  gap: 76px;
  margin-top: 60px;
}
.feat-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.feat-row--rev .feat-visual { order: 2; }
.feat-row--rev .feat-copy { order: 1; }

.feat-kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--type-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 14px;
}
.feat-copy h3 {
  font-family: var(--font-display);
  font-size: var(--type-title-lg);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--text);
  margin-bottom: 16px;
}
.feat-copy p {
  font-size: var(--type-body);
  line-height: 1.65;
  color: var(--text-light);
  max-width: 46ch;
  margin-bottom: 22px;
}
.feat-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--gold-dark);
}
.feat-link svg { width: 15px; height: 15px; transition: transform var(--transition); }
.feat-link:hover { color: var(--gold); }
.feat-link:hover svg { transform: translateX(4px); }

@media (max-width: 860px) {
  .feat-row { grid-template-columns: 1fr; gap: 28px; }
  .feat-row .feat-visual,
  .feat-row--rev .feat-visual { order: -1; }
  .feat-row .feat-copy,
  .feat-row--rev .feat-copy { order: 0; }
  .feat-copy p { max-width: none; }
}

/* ---- Product-shot mockups (light app UI on cream) ---- */
.mock {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 24px 58px rgba(41, 36, 29, 0.13), 0 2px 6px rgba(41, 36, 29, 0.05);
  max-width: 440px;
  width: 100%;
}
.feat-visual { display: flex; justify-content: center; }
.feat-row--rev .feat-visual { justify-content: center; }
.mock-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border);
  background: rgba(197, 165, 90, 0.06);
  font-family: var(--font-mono);
  font-size: var(--type-label);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--text-light);
}
.mock-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex-shrink: 0; }
.mock-dot--live { background: #2E8B57; box-shadow: 0 0 0 0 rgba(46, 139, 87, 0.5); animation: mockPulse 2s infinite; }
@keyframes mockPulse {
  0% { box-shadow: 0 0 0 0 rgba(46, 139, 87, 0.45); }
  70% { box-shadow: 0 0 0 7px rgba(46, 139, 87, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 139, 87, 0); }
}
.mock-body {
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

/* fields (intake) */
.mock-field {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.mock-label { font-size: var(--type-caption); color: var(--text-light); }
.mock-val { font-size: 0.9375rem; font-weight: 600; color: var(--text); }

/* flow chips */
.mock-flow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.mock-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--type-caption);
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 100px;
  background: rgba(197, 165, 90, 0.09);
  border: 1px solid rgba(197, 165, 90, 0.28);
  color: var(--gold-dark);
}
.mock-chip.is-done {
  background: rgba(46, 139, 87, 0.09);
  border-color: rgba(46, 139, 87, 0.30);
  color: #1F6B43;
}
.mock-check { width: 12px; height: 12px; position: relative; display: inline-block; flex-shrink: 0; }
.mock-check::after {
  content: '';
  position: absolute;
  left: 4px; top: 0;
  width: 4px; height: 8px;
  border: solid #2E8B57;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.mock-check--gold::after { border-color: var(--gold-dark); }

/* call transcript + waveform */
.mock-wave { display: flex; align-items: center; gap: 3px; height: 30px; margin-bottom: 4px; }
.mock-wave i { flex: 1; background: var(--gold); border-radius: 2px; opacity: 0.55; }
.mock-wave i:nth-child(3n) { height: 100%; opacity: 0.8; }
.mock-wave i:nth-child(3n+1) { height: 45%; }
.mock-wave i:nth-child(3n+2) { height: 70%; }
.mock-wave i:nth-child(4n) { height: 30%; }
.mock-line {
  font-size: var(--type-caption);
  line-height: 1.45;
  padding: 9px 13px;
  border-radius: 12px;
  max-width: 86%;
}
.mock-line--them { background: rgba(41, 36, 29, 0.05); color: var(--text); border-bottom-left-radius: 3px; align-self: flex-start; }
.mock-line--us { background: rgba(197, 165, 90, 0.14); color: var(--text); border-bottom-right-radius: 3px; align-self: flex-end; text-align: right; }

/* document draft */
.mock-docline { height: 9px; border-radius: 4px; background: rgba(41, 36, 29, 0.10); }
.mock-docline.w-95 { width: 95%; }
.mock-docline.w-90 { width: 90%; }
.mock-docline.w-70 { width: 70%; }
.mock-docline.w-60 { width: 60%; }
.mock-doctitle { font-size: var(--type-caption); font-weight: 600; color: var(--text); opacity: 0.7; margin-bottom: 4px; letter-spacing: 0.01em; }
.mock-docline--merge { height: auto; background: none; display: flex; align-items: center; gap: 7px; }
.mock-doctext { font-size: var(--type-caption); color: var(--text-light); }
.mock-merge {
  display: inline-block;
  background: rgba(197, 165, 90, 0.16);
  color: var(--gold-dark);
  font-size: var(--type-caption);
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 4px;
}

/* calendar + billing rows */
.mock-cal { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 6px; }
.mock-cal-cell {
  text-align: center;
  font-size: var(--type-caption);
  color: var(--text-light);
  padding: 6px 0;
  border-radius: 7px;
}
.mock-cal-cell--num { color: var(--text); font-weight: 600; background: rgba(41, 36, 29, 0.04); }
.mock-cal-cell--flag { color: var(--gold-dark); font-weight: 700; }
.mock-cal-cell--num.mock-cal-cell--flag { background: rgba(197, 165, 90, 0.16); border: 1px solid rgba(197, 165, 90, 0.4); }
.mock-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}
.mock-row-label { font-size: var(--type-caption); color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .mock-dot--live { animation: none; }
}

/* ===========================================================
   ITERATION 9 — LEAN v2 (2026-07-15)
   Compact services grid (replaces the big feature rows),
   numbers folded into the emotional section. Standalone stats
   section and explicit Why-Tesray section removed.
   =========================================================== */

/* ---- Numbers inside the emotional section ---- */
.why-figs {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
  margin: 26px 0 28px;
}
.why-fig { max-width: 22ch; }
.why-fig-num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--gold-dark);
  margin-bottom: 8px;
}
.why-fig-label {
  font-size: var(--type-caption);
  line-height: 1.5;
  color: var(--text-light);
}

/* ---- Compact services grid ---- */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 52px;
}
.svc-tile {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 28px 26px;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.svc-tile:hover {
  border-color: var(--gold);
  box-shadow: 0 16px 44px rgba(41, 36, 29, 0.12);
  transform: translateY(-3px);
}
.svc-icon {
  width: 46px;
  height: 46px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-dark);
  background: rgba(197, 165, 90, 0.1);
  border: 1px solid rgba(197, 165, 90, 0.28);
  margin-bottom: 20px;
}
.svc-icon svg { width: 22px; height: 22px; }
.svc-tile h3 {
  font-family: var(--font-display);
  font-size: var(--type-subhead);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--text);
  margin-bottom: 10px;
}
.svc-tile > p {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-light);
  margin-bottom: 18px;
}
.svc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 22px;
}
.svc-chips span {
  font-size: var(--type-caption);
  font-weight: 500;
  color: var(--text-light);
  background: var(--bg-warm);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 4px 11px;
}
.svc-more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--type-caption);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--gold-dark);
}
.svc-more svg { width: 14px; height: 14px; transition: transform var(--transition); }
.svc-tile:hover .svc-more { color: var(--gold); }
.svc-tile:hover .svc-more svg { transform: translateX(4px); }

@media (max-width: 900px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .svc-grid { grid-template-columns: 1fr; }
  .why-figs { gap: 18px 28px; }
}

/* ===========================================================
   ITERATION 10 — Gray's polish pass (2026-07-15)
   Hero gold matches the CTA button, metric sources, cream CTA
   banner, and the "See it run" diagram recolored to the light
   card aesthetic.
   =========================================================== */

/* Hero headline gold = the Book a Consultation button gold (flat #C5A55A, exact match) */
.text-gold-gradient {
  background: none;
  -webkit-text-fill-color: var(--gold);
  color: var(--gold);
}

/* Metric source microlabel in the benefits section */
.why-fig-src {
  display: block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: var(--type-label);
  letter-spacing: 0.04em;
  color: var(--text-light);
  opacity: 0.85;
}

/* CTA banner: cream instead of dark */
.cta-banner--light { background: var(--bg-warm); }
.cta-banner--light::before {
  background: radial-gradient(ellipse at 50% 0%, rgba(197, 165, 90, 0.14) 0%, transparent 62%);
}
.cta-banner--light .cta-content h2 { color: var(--text); }
.cta-banner--light .cta-badge {
  color: var(--gold-dark);
  background: rgba(197, 165, 90, 0.1);
  border-color: rgba(197, 165, 90, 0.35);
}

/* "See it run" diagram: light card to match the service cards */
.automation-showcase .nd-screen {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: 0 20px 50px rgba(41, 36, 29, 0.10);
}
.automation-showcase .nd-topbar {
  background: rgba(197, 165, 90, 0.06);
  border-bottom-color: var(--border);
}
.automation-showcase .nd-flow-name { color: var(--text); }
.automation-showcase .nd-exec-count { color: var(--text-light); }

/* Per-service illustration (reuses the .mock product-shot components) */
.svc-visual {
  display: flex;
  justify-content: center;
  margin: 4px 0 44px;
}
.svc-visual .mock { max-width: 460px; }

/* Pricing signal under the service grid. Buyers self-qualify here rather than bouncing. */
.uc-more .uc-price {
  max-width: 58ch;
  font-size: var(--type-body);
  color: var(--text-light);
  padding: 18px 24px;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.uc-more .uc-price strong { color: var(--text); font-weight: 700; white-space: nowrap; }

/* Related-services block: two-up, so service pages link to siblings instead of dead-ending.
   Only ever holds 2 cards, so it tracks .svc-grid's own 560px collapse rather than
   introducing a new breakpoint. Both widths are stated explicitly because this rule sits
   after .svc-grid's media queries and would otherwise win on source order alone. */
.svc-grid--pair { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 560px) { .svc-grid--pair { grid-template-columns: 1fr; } }

/* Second, lower-commitment door out of the CTA banner. Booking a call is not the only path. */
/* Specificity must clear .cta-content p, which hard-codes white for the dark banner.
   On the dark banner inheriting that white is correct; the light banner needs the override,
   the same way --light already overrides h2 and .cta-badge above. */
.cta-content .cta-alt {
  margin-top: 18px;
  font-size: var(--type-caption);
  opacity: .85;
}
.cta-banner--light .cta-content .cta-alt { color: var(--text-light); opacity: 1; }
.cta-content .cta-alt a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.cta-content .cta-alt a:hover { opacity: 1; }