/* ============================================================
   Smith Product Sense — public site layout
   Structure only. Every color, font, radius and spacing value comes
   from tokens.css via var(--...) — same discipline as the OS app's
   own css/app.css. Typography classes (.h1-.h4, .body, .eyebrow,
   .mono, a, focus-ring) are defined once in tokens.css and reused
   here rather than redeclared.
   ============================================================ */

:root {
  --site-max: 1120px;
  --hairline-on-dark: color-mix(in srgb, var(--blue-200) 30%, transparent);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--fg-default);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: var(--lh-relaxed);
  -webkit-font-smoothing: antialiased;
}

p { margin: 0 0 1.1em; }
a { text-underline-offset: 3px; }

/* Hero/eyebrow headline needs more range than the app's fixed type
   scale — clamps between a readable floor and the family's largest
   display token rather than an arbitrary value. */
.display-hero {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: 0 0 0.5em;
  font-size: clamp(2.4rem, 5vw, var(--type-display-xl));
  color: var(--fg-default);
}

.eyebrow.on-dark { color: var(--fg-ondark-muted); }

.container {
  max-width: var(--site-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

/* ---------- Header / nav ---------- */

.site-header {
  background: var(--bg-dark);
  color: var(--fg-ondark);
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: var(--hairline) solid var(--hairline-on-dark);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--type-h3);
  color: var(--fg-ondark);
  text-decoration: none;
  letter-spacing: var(--ls-snug);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.wordmark .mark { display: block; }

.nav-links {
  display: flex;
  gap: var(--space-8);
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  letter-spacing: var(--ls-wide);
}

.nav-links a {
  text-decoration: none;
  color: var(--fg-ondark-muted);
  padding: 0.4em 0;
  border-bottom: 2px solid transparent;
  transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--fg-ondark);
  border-color: var(--peach-500);
}

.nav-toggle {
  display: none;
  background: none;
  border: var(--hairline) solid var(--hairline-on-dark);
  color: var(--fg-ondark);
  border-radius: var(--radius-sm);
  padding: 0.5em 0.7em;
  font-family: var(--font-mono);
  font-size: var(--type-caption);
}

@media (max-width: 760px) {
  .nav-links {
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: var(--bg-dark);
    flex-direction: column;
    gap: 0;
    padding: 0 var(--space-6);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--duration-base) var(--ease-out);
    border-bottom: var(--hairline) solid var(--hairline-on-dark);
  }
  .nav-links.open { max-height: 320px; padding: var(--space-3) var(--space-6) var(--space-5); }
  .nav-links li { border-top: var(--hairline) solid var(--hairline-on-dark); }
  .nav-links li:first-child { border-top: none; }
  .nav-links a { display: block; padding: 0.85em 0; }
  .nav-toggle { display: inline-block; }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-size: var(--type-body-sm);
  letter-spacing: var(--ls-default);
  text-decoration: none;
  padding: 0.85em 1.4em;
  border-radius: var(--radius-sm);
  border: var(--hairline) solid transparent;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out), background var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.btn-primary { background: var(--brand); color: var(--fg-onbrand); }
.btn-primary:hover { background: var(--brand-hover); }

.btn-secondary-accent { background: var(--blue-900); color: var(--fg-ondark); }
.btn-secondary-accent:hover { background: var(--ink-900); }

.btn-outline {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}
.btn-outline:hover { background: var(--bg-hover); }

.btn-outline.on-dark { color: var(--fg-ondark); border-color: var(--hairline-on-dark); }
.btn-outline.on-dark:hover { background: rgba(255, 255, 255, 0.06); }

/* ---------- Hero ---------- */

.hero {
  background: var(--bg-dark);
  color: var(--fg-ondark);
  padding: 96px 0 70px;
  position: relative;
  overflow: hidden;
}

.hero .container { position: relative; z-index: 2; max-width: 760px; }

.hero .display-hero { color: var(--fg-ondark); }
.hero .lede {
  font-family: var(--font-body);
  font-size: 1.25rem;
  color: var(--fg-ondark-muted);
  max-width: 46ch;
}

.path-mark {
  display: block;
  margin: 46px 0 8px;
}

/* ---------- Two-path split ---------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--hairline);
  background: var(--border-subtle);
  border: var(--hairline) solid var(--border-subtle);
  margin: 0 0 -1px;
}

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

.path-card {
  background: var(--bg-surface);
  padding: var(--space-12) var(--space-10);
  text-decoration: none;
  color: var(--fg-default);
  position: relative;
  transition: background var(--duration-base) var(--ease-out);
}

.path-card:hover { background: var(--bg-inset); }

.path-card .eyebrow { font-weight: 600; }
.path-card.core .eyebrow { color: var(--brand-text); }
.path-card.edu .eyebrow { color: var(--blue-900); }

.path-card h2 { margin-bottom: 0.4em; }

.path-card .go {
  font-family: var(--font-mono);
  font-size: var(--type-body-sm);
  margin-top: 1.4em;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
.path-card.core .go { color: var(--brand-text); }
.path-card.edu .go { color: var(--blue-900); }
.path-card .go .arrow { transition: transform var(--duration-base) var(--ease-out); }
.path-card:hover .go .arrow { transform: translateX(4px); }

/* ---------- Sections ---------- */

section { padding: 76px 0; }
section.tight { padding: var(--space-12) 0; }

.section-head { max-width: 640px; margin-bottom: 2.2em; }

/* Branch divider — small echo of the signature mark between sections */
.branch-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
}
.branch-divider svg { display: block; }

/* ---------- Offer rows ---------- */

.offer {
  display: grid;
  grid-template-columns: 220px 1fr auto;
  gap: var(--space-8);
  align-items: start;
  padding: var(--space-8) 0;
  border-top: var(--hairline) solid var(--border-subtle);
}

.offer:last-child { border-bottom: var(--hairline) solid var(--border-subtle); }

@media (max-width: 720px) {
  .offer { grid-template-columns: 1fr; gap: var(--space-3); }
}

.offer .status {
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.35em 0.9em;
  border-radius: var(--radius-pill);
  width: fit-content;
  height: fit-content;
}

.status.live { background: var(--success-bg); color: var(--success); }
.status.live .dot { background: var(--olive-700); }
.status.building { background: var(--warning-bg); color: var(--warning); }
.status.building .dot { background: var(--amber-700); }
.status .dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }

.offer h3 { margin-bottom: 0.35em; }
.offer p { color: var(--fg-muted); margin-bottom: 0; font-size: var(--type-body-sm); }

.offer .action { align-self: center; }

/* ---------- Cards ---------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
@media (max-width: 860px) { .card-grid { grid-template-columns: 1fr; } }

.site-card {
  background: var(--bg-surface);
  border: var(--hairline) solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-8);
}

.site-card .eyebrow { margin-bottom: 0.6em; }

/* ---------- FAQ (native details/summary — no JS) ---------- */

.faq { border-top: var(--hairline) solid var(--border-subtle); }
.faq details {
  border-bottom: var(--hairline) solid var(--border-subtle);
  padding: var(--space-5) 0;
}
.faq summary {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--type-h4);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 1.3rem;
  color: var(--fg-muted);
  flex-shrink: 0;
  transition: transform var(--duration-base) var(--ease-out);
}
.faq details[open] summary::after { content: "\2013"; }
.faq .faq-body { padding-top: 0.9em; color: var(--fg-muted); max-width: 62ch; }

/* ---------- Forms ---------- */

.form-grid {
  display: grid;
  gap: var(--space-5);
  max-width: 540px;
}

label {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
  display: block;
  margin-bottom: 0.5em;
}

input, select, textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--type-body);
  padding: 0.75em 0.85em;
  border: var(--hairline) solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--fg-default);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  box-shadow: var(--focus-ring);
  border-color: var(--brand);
}

textarea { resize: vertical; min-height: 120px; }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--bg-dark);
  color: var(--fg-ondark-muted);
  padding: var(--space-16) 0 var(--space-8);
  margin-top: var(--space-10);
  font-size: var(--type-body-sm);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--space-10);
  padding-bottom: var(--space-8);
  border-bottom: var(--hairline) solid var(--hairline-on-dark);
}

@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-8); }
}

.footer-grid h4 {
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--blue-300);
  margin-bottom: 1em;
}

.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 0.6em; }
.footer-grid a { color: var(--fg-ondark-muted); text-decoration: none; }
.footer-grid a:hover { color: var(--fg-ondark); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  color: var(--blue-300);
  flex-wrap: wrap;
  gap: var(--space-3);
}

.footer-bottom a { color: var(--blue-300); text-decoration: underline; }

/* ---------- Legal pages ---------- */

.legal .container { max-width: 760px; }
.legal h2 { margin-top: 1.6em; }
.legal p, .legal li { color: var(--fg-muted); }
.legal .updated {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  color: var(--fg-muted);
  margin-bottom: 2.5em;
  display: block;
}

/* ---------- Utility ---------- */

.center { text-align: center; }
.mt-0 { margin-top: 0; }
.accent-core { color: var(--brand-text); }
.accent-edu { color: var(--blue-900); }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}