/*
  ROWVIN base stylesheet: reset, typography, layout primitives, and core
  components (buttons, links, nav, footer). Loaded after tokens.css on
  every page. No preprocessor, no utility-class framework -- semantic,
  hand-authored CSS, consistent with this project's zero-build-tool
  discipline.
*/

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
/* The `hidden` attribute's own UA-stylesheet `display: none` is the
   lowest-priority origin in the cascade -- any author rule that sets
   `display` on the same element (e.g. .btn's `display: inline-flex`)
   silently wins over it, real bug found live on /start: every intake-nav
   button carries both `hidden` and `.btn`, so Back/Continue/Send all
   rendered at once regardless of which step was actually current. This
   reasserts `[hidden]` as authoritative wherever it's used, which is
   never anything but intentional -- nothing should ever want a
   hidden-attributed element to actually render. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
input, textarea, select { font: inherit; color: inherit; }

/* Respect the OS-level reduced-motion preference before anything else in
   this file defines a transition/animation -- every subsequent rule that
   animates must be additive to this, never bypass it. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Focus visibility (never suppressed -- keyboard operability is a
   Definition-of-Done requirement, not an afterthought) --- */
:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Skip-to-content link -- visually hidden until focused */
.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -100px;
  background: var(--color-accent);
  color: var(--color-accent-text-on);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-weight: var(--font-weight-semibold);
  z-index: 1000;
  transition: top var(--duration-base) var(--ease-standard);
}
.skip-link:focus { top: var(--space-3); }

/* --- Typography --- */
.display-xl {
  font-size: var(--font-size-display-xl);
  font-weight: var(--font-weight-display);
  line-height: var(--line-height-tight);
  letter-spacing: -0.01em;
}
.display-lg {
  font-size: var(--font-size-display-lg);
  font-weight: var(--font-weight-display);
  line-height: var(--line-height-tight);
  letter-spacing: -0.01em;
}
.heading-lg { font-size: var(--font-size-heading-lg); font-weight: var(--font-weight-heading); line-height: var(--line-height-heading); }
.heading-md { font-size: var(--font-size-heading-md); font-weight: var(--font-weight-heading); line-height: var(--line-height-heading); }
.heading-sm { font-size: var(--font-size-heading-sm); font-weight: var(--font-weight-semibold); line-height: var(--line-height-heading); }
.body-lg { font-size: var(--font-size-body-lg); line-height: var(--line-height-body); color: var(--color-text-secondary); }
.body { font-size: var(--font-size-body); line-height: var(--line-height-body); color: var(--color-text-secondary); }
.text-small { font-size: var(--font-size-small); color: var(--color-text-tertiary); }
.eyebrow {
  font-size: var(--font-size-micro);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-accent);
}
.accent { color: var(--color-accent); }

.on-light { color: var(--color-text-on-light); }
.on-light .body, .on-light .body-lg { color: var(--color-text-on-light-secondary); }

/* --- Layout primitives --- */
.container {
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: var(--content-padding-inline);
}
.section { padding-block: var(--space-8); }
.section--tight { padding-block: var(--space-7); }
.section--dark { background: var(--color-bg-primary); }
.section--elevated { background: var(--color-bg-elevated); }
.section--light { background: var(--color-bg-inverse-soft); color: var(--color-text-on-light); }
.section--light .body, .section--light .body-lg { color: var(--color-text-on-light-secondary); }
.section--light .text-small { color: rgba(13,13,13,0.5); }

.stack { display: flex; flex-direction: column; }
.stack > * + * { margin-top: var(--gap, var(--space-4)); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, var(--space-3)); }
.grid { display: grid; gap: var(--gap, var(--space-4)); }

@media (min-width: 720px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 960px) {
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .grid--5 { grid-template-columns: repeat(5, 1fr); }
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.85em 1.5em;
  border-radius: var(--radius-pill);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-body);
  white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--color-accent);
  color: var(--color-accent-text-on);
  border: 1px solid var(--color-accent);
}
.btn-primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.btn-secondary {
  background: transparent;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-subtle);
}
.btn-secondary:hover { border-color: var(--color-text-primary); }
.section--light .btn-secondary { color: var(--color-text-on-light); border-color: var(--color-border-subtle-on-light); }
.section--light .btn-secondary:hover { border-color: var(--color-text-on-light); }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  border-bottom: 1px solid transparent;
  transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.text-link:hover { color: var(--color-accent); border-color: var(--color-accent); }
.section--light .text-link { color: var(--color-text-on-light); }

/* --- Icon (2px stroke, geometric, rounded caps/joins -- reference's own
   "Icon Style" spec) --- */
.icon {
  width: 1.5em;
  height: 1.5em;
  stroke: currentColor;
  stroke-width: var(--icon-stroke-width);
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* --- Section intro (eyebrow + heading, used to open most sections) --- */
.section-intro { max-width: 42rem; margin-bottom: var(--space-6); }
.section-intro .eyebrow { display: block; margin-bottom: var(--space-2); }

/* --- Hero --- */
.hero { padding-block: var(--space-9) var(--space-8); }
.hero-grid { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.1fr 0.9fr; } }
.hero-lede { margin-top: var(--space-4); max-width: 34rem; }
.hero-actions { margin-top: var(--space-6); }
.btn-lg { padding: 1em 1.85em; font-size: var(--font-size-body-lg); }

.hero-signal-field { width: 100%; height: auto; color: var(--color-text-tertiary); }
.signal-dots circle { fill: var(--color-text-tertiary); }
.signal-path { fill: none; stroke: var(--color-border-subtle); stroke-width: 1.5; }
.signal-terminus { fill: var(--color-accent); }
.js .signal-terminus {
  transform-origin: center;
  animation: pulse 2.4s var(--ease-standard) infinite;
}
@keyframes pulse {
  0%, 100% { r: 7; opacity: 1; }
  50% { r: 10; opacity: 0.6; }
}

/* --- Problem section --- */
.problem-grid { display: grid; gap: var(--space-5); }
@media (min-width: 860px) { .problem-grid { grid-template-columns: 1fr 1fr; align-items: start; } }

/* --- Understand / Decide / Build / Learn grid --- */
.udbl-grid { grid-template-columns: 1fr; }
@media (min-width: 720px) { .udbl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .udbl-grid { grid-template-columns: repeat(4, 1fr); } }
.udbl-item { padding-top: var(--space-4); border-top: 1px solid var(--color-border-subtle); }
.udbl-index { display: block; font-size: var(--font-size-small); color: var(--color-accent); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-label); margin-bottom: var(--space-2); }
.udbl-item .heading-sm { margin-bottom: var(--space-1); }

/* --- Capability split (deliberately not a mechanical card grid --
   two narrative columns) --- */
.capability-split { display: grid; gap: var(--space-6); }
@media (min-width: 860px) { .capability-split { grid-template-columns: 1fr 1fr; } }
.capability-list { display: flex; flex-direction: column; gap: var(--space-3); }
.capability-list li { color: var(--color-text-secondary); line-height: var(--line-height-body); padding-left: var(--space-3); border-left: 2px solid var(--color-border-subtle); }
.capability-list strong { color: var(--color-text-primary); display: block; margin-bottom: 0.2em; }

/* --- Evidence / CTA sections --- */
.evidence-grid { max-width: 46rem; }
.evidence-grid .heading-md { margin-bottom: var(--space-3); }
.cta-grid { text-align: center; max-width: 40rem; margin-inline: auto; }
.cta-grid .body-lg { margin-top: var(--space-3); margin-bottom: var(--space-6); }

/* --- Signal -> Structure -> Decision -> Impact motif ---
   The one recurring visual device this system uses instead of stock AI
   imagery (per brand direction) -- a deliberately reused, not
   one-off-decorative, component. */
.motif { text-align: center; }
.motif-chain {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0;
}
.motif-node { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.motif-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--color-border-subtle);
  color: var(--color-text-secondary);
}
.motif-icon .icon { width: 24px; height: 24px; }
.motif-node--impact .motif-icon--filled {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background: rgba(255, 59, 31, 0.12);
}
.motif-label { font-size: var(--font-size-small); color: var(--color-text-tertiary); font-weight: var(--font-weight-medium); }
.motif-node--impact .motif-label { color: var(--color-text-primary); }
.motif-connector {
  width: clamp(20px, 5vw, 48px);
  height: 1px;
  background: var(--color-border-subtle);
  align-self: center;
  margin-top: -22px;
}
.motif-connector--accent { background: linear-gradient(90deg, var(--color-border-subtle), var(--color-accent)); }
.motif-caption { margin-top: var(--space-4); max-width: 32rem; margin-inline: auto; }

/* --- Site header / nav --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(13, 13, 13, 0.82);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--color-border-subtle);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-3);
}
.brand-mark { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--font-weight-display); font-size: 1.1rem; letter-spacing: 0.02em; }
.brand-mark .mark { color: var(--color-accent); }
.primary-nav { display: none; align-items: center; gap: var(--space-5); }
.primary-nav a { font-size: var(--font-size-small); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); transition: color var(--duration-fast) var(--ease-standard); }
.primary-nav a:hover, .primary-nav a[aria-current="page"] { color: var(--color-text-primary); }
@media (min-width: 900px) {
  .primary-nav { display: flex; }
  .nav-toggle { display: none; }
}
.header-actions { display: flex; align-items: center; gap: var(--space-3); }
/* Below 900px the mobile-nav dropdown already carries its own "Start a
   Conversation" link -- showing the full-size button here too crowds the
   header (logo/button/hamburger all fighting for a narrow viewport) and
   duplicates the same CTA twice on screen. */
.header-cta { display: none; }
@media (min-width: 900px) {
  .header-cta { display: inline-flex; }
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
}
.mobile-nav {
  display: none;
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-bg-elevated);
}
.mobile-nav.is-open { display: block; }
.mobile-nav ul { padding: var(--space-3) var(--content-padding-inline) var(--space-4); }
.mobile-nav a { display: block; padding: var(--space-2) 0; font-size: var(--font-size-body-lg); color: var(--color-text-secondary); }
.mobile-nav a:hover, .mobile-nav a[aria-current="page"] { color: var(--color-text-primary); }
@media (min-width: 900px) { .mobile-nav { display: none !important; } }

/* --- Scroll reveal --- progressive enhancement, safe-by-default: content
   is fully visible unless templates/base.html's own early inline script
   has already confirmed JS is running (adds .js to <html> before first
   paint) -- a visitor with JS disabled or failed-to-load never sees
   permanently-invisible content. assets/js/main.js toggles .is-visible
   via IntersectionObserver, and skips the whole mechanism entirely under
   prefers-reduced-motion (content stays at its default, fully visible
   state in that case too). */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--duration-slow) var(--ease-decelerate),
              transform var(--duration-slow) var(--ease-decelerate);
}
.js [data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* --- Guided intake (/start) --- */
.intake-hero { padding-block: var(--space-8) var(--space-5); }
.intake-sub { max-width: 34rem; margin-top: var(--space-3); }
.intake-container { max-width: 42rem; }

.intake-progress { margin-bottom: var(--space-6); }
.intake-steps-list { display: flex; justify-content: space-between; gap: var(--space-1); }
.intake-steps-list li { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; text-align: center; opacity: 0.4; transition: opacity var(--duration-base) var(--ease-standard); }
.intake-steps-list li.is-active, .intake-steps-list li.is-complete { opacity: 1; }
.intake-step-num { font-size: var(--font-size-micro); font-weight: var(--font-weight-semibold); color: var(--color-text-tertiary); }
.intake-steps-list li.is-active .intake-step-num { color: var(--color-accent); }
.intake-steps-list li.is-complete .intake-step-num { color: var(--color-text-primary); }
.intake-step-label { font-size: var(--font-size-micro); color: var(--color-text-tertiary); }

.intake-step { border: 0; padding: 0; margin: 0; }
.intake-step legend { padding: 0; margin-bottom: var(--space-3); width: 100%; }
.intake-step legend:focus { outline: none; } /* programmatic focus target for step transitions -- not user-tabbed to directly, so no visible ring needed here; the step's own inputs remain normally focusable/tabbable */
.intake-step-hint { margin-bottom: var(--space-3); color: var(--color-text-tertiary); }

.intake-options { display: grid; gap: var(--space-2); grid-template-columns: 1fr; }
@media (min-width: 560px) { .intake-options { grid-template-columns: repeat(2, 1fr); } }
.intake-option {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md);
  cursor: pointer; transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
}
.intake-option:hover { border-color: var(--color-text-secondary); }
.intake-option input { accent-color: var(--color-accent); width: 18px; height: 18px; flex-shrink: 0; }
.intake-option:has(input:checked) { border-color: var(--color-accent); background: rgba(255, 59, 31, 0.08); }
.intake-option:has(input:focus-visible) { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }

.intake-field-label { display: block; font-size: var(--font-size-small); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); margin-bottom: var(--space-1); }
.intake-optional { color: var(--color-text-tertiary); font-weight: var(--font-weight-body); }
.intake-textarea, .intake-input {
  width: 100%; background: var(--color-bg-elevated); color: var(--color-text-primary);
  border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3); font-size: var(--font-size-body-lg); font-family: inherit;
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.intake-textarea:focus, .intake-input:focus { border-color: var(--color-accent); outline: none; }
.intake-textarea:focus-visible, .intake-input:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
.intake-textarea { resize: vertical; }

.intake-contact-grid { display: grid; gap: var(--space-3); }
@media (min-width: 560px) { .intake-contact-grid { grid-template-columns: repeat(2, 1fr); } }
.intake-privacy-note { margin-top: var(--space-3); color: var(--color-text-tertiary); }

.intake-error { color: var(--color-accent); margin-top: var(--space-2); font-size: var(--font-size-small); }
.intake-submit-error { color: var(--color-accent); margin-top: var(--space-3); }

.intake-nav { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-6); }
.intake-nav [data-intake-continue], .intake-nav [data-intake-submit] { margin-left: auto; }

.intake-success { text-align: center; padding-block: var(--space-6); }
.intake-success .body-lg { max-width: 32rem; margin-inline: auto; margin-top: var(--space-2); margin-bottom: var(--space-5); }

/* --- Footer --- */
.site-footer {
  border-top: 1px solid var(--color-border-subtle);
  padding-block: var(--space-5);
}
.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
}
.footer-tagline { color: var(--color-text-tertiary); font-size: var(--font-size-small); }
.footer-links { display: flex; gap: var(--space-4); }
.footer-links a { font-size: var(--font-size-small); color: var(--color-text-secondary); }
.footer-links a:hover { color: var(--color-accent); }