/* saas-starter.css — ui-landing-saas components for the plain static frontend (web/).
 * Consumes tokens.css ONLY: no raw colours, no raw font stacks, no raw radii.
 * Copy into web/styles.css and link in this order:
 *   <link rel="stylesheet" href="tokens.css">
 *   <link rel="stylesheet" href="theme.css">    (optional; minimal or hud)
 *   <link rel="stylesheet" href="styles.css">   (this file)
 *
 * Markup contract — classes this sheet styles (see assets/saas-skeleton.html):
 *   .skip-link .sr-only .wrap .copy
 *   .header .header__inner .header__brand .header__nav .header__actions .theme-toggle
 *   .btn .btn--primary .btn--ghost .btn--text .btn--small .btn--block
 *   .hero .hero__grid .hero__copy .hero__title .hero__lede .hero__actions .hero__fine .hero__media .media-frame
 *   .eyebrow .section .section--alt .section__head .section__title .lede
 *   .logo-wall .logo-wall__label .logo-wall__grid .logo-wall__item
 *   .feature .feature--flip .feature__copy .feature__media .bullets
 *   .steps .step .step__num .step__title .step__body
 *   .grid .grid--3 .card .card__title .card__body
 *   (pricing + Lighthouse gauge rules of the template kit removed: no pricing here; the scoreboard below replaces the gauges)
 *   .quotes .quote .quote__body .quote__who .quote__avatar .quote__name .quote__role
 *   .faq .faq__item .faq__q .faq__a
 *   .cta-band .cta-band__title
 *   .footer .footer__cols .footer__col .footer__legal
 *   .field .input .field__error .reveal .is-visible
 * Everything renders without JavaScript; .reveal only hides when scripting is enabled.
 */

/* ---- reset-lite ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-h); overflow-x: clip; }
body { margin: 0; overflow-x: clip; background: var(--surface-canvas); color: var(--text); font: var(--type-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--accent-text); text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
strong { font-weight: 600; color: var(--text-emphasis); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: var(--radius-s); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--space-4); top: -100px; z-index: 100; padding: var(--space-2) var(--space-3); background: var(--surface-raised); color: var(--text-emphasis); border-radius: var(--radius-s); box-shadow: var(--shadow-2); }
.skip-link:focus { top: var(--space-4); }
@media (hover: hover) and (pointer: fine) {
  a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 0.18em; }
}

/* ---- layout primitives ---- */
.wrap { width: min(var(--max-w), 100% - 2 * var(--gutter)); margin-inline: auto; }
.copy { max-width: var(--copy-max); margin-inline: auto; text-align: center; }
.section { padding-block: var(--section-pad); background: var(--surface-canvas); }
.section--alt { background: var(--surface-section); }
.section__head { display: grid; gap: var(--space-4); margin-bottom: var(--space-7); }
.section__title { font: var(--type-h1); letter-spacing: var(--tracking-display); color: var(--text-emphasis); text-wrap: balance; }
.eyebrow { font: var(--type-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--accent-text); }
.lede { font: var(--type-lede); color: var(--text-muted); text-wrap: balance; }

/* ---- header: sticky glass bar, brand · nav · one primary CTA · theme toggle ---- */
.header { position: sticky; top: 0; z-index: 50; height: var(--header-h); display: flex; align-items: center; background: var(--surface-glass); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); box-shadow: 0 1px 0 var(--stroke); }
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.header__brand { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-emphasis); font: var(--type-control); font-weight: 600; letter-spacing: var(--tracking-control); }
.header__brand svg, .header__brand img { height: 24px; width: auto; }
.header__nav { display: flex; align-items: center; gap: var(--space-5); }
.header__nav a { font: var(--type-control); letter-spacing: var(--tracking-control); color: var(--text); padding: var(--space-2) 0; }
.header__nav a[aria-current="page"] { color: var(--text-emphasis); }
.header__actions { display: flex; align-items: center; gap: var(--space-3); }
.theme-toggle { width: var(--control-h); height: var(--control-h); display: inline-grid; place-items: center; border-radius: var(--radius-pill); color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--stroke); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-moon { display: none; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .theme-toggle .icon-sun { display: none; }
  html:not([data-theme]) .theme-toggle .icon-moon { display: block; }
}
@media (max-width: 767px) { .header__nav { display: none; } }

/* ---- buttons: one filled primary per viewport; everything else ghost or text ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control-h); padding: 0 var(--space-5); border-radius: var(--radius-m); font: var(--type-control); letter-spacing: var(--tracking-control); white-space: nowrap; user-select: none; color: var(--text-emphasis); transition: background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--ghost { background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--stroke-strong); }
.btn--text { padding-inline: var(--space-2); color: var(--accent-text); }
.btn--small { min-height: 36px; padding: 0 var(--space-4); font-size: 14px; }
.btn--large { min-height: var(--control-h-lg); padding: 0 var(--space-6); font-size: 17px; }
.btn--block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { text-decoration: none; }
  .btn--primary:hover { background: var(--accent-hover); color: var(--on-accent); }
  .btn--primary:active { background: var(--accent-pressed); }
  .btn--ghost:active { background: var(--surface-raised-hover); box-shadow: inset 0 0 0 1px var(--stroke-strong), inset 0 1px 2px var(--accent-ring); }
  .btn--ghost:hover { background: var(--surface-raised-hover); color: var(--text-emphasis); }
}

/* ---- hero: copy left, media right; stacks under 1024 ---- */
.hero { padding-block: clamp(48px, 6vw, 96px) var(--section-pad); }
.hero__grid { display: grid; gap: var(--space-8); align-items: center; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.hero__copy { display: grid; gap: var(--space-5); }
.hero__title { font: var(--type-display); letter-spacing: var(--tracking-display); color: var(--text-emphasis); text-wrap: balance; }
.hero__lede { font: var(--type-lede); color: var(--text-muted); text-wrap: pretty; max-width: 48ch; }
.hero__lede strong { color: var(--text-emphasis); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero__fine { font: var(--type-caption); color: var(--text-muted); }
.hero__media { min-width: 0; }
.media-frame { overflow: hidden; border-radius: var(--radius-l); background: var(--surface-media); box-shadow: var(--shadow-media); }
.media-frame img, .media-frame video { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
@media (max-width: 1023px) { .hero__grid { grid-template-columns: 1fr; gap: var(--space-7); } .hero__lede { max-width: none; } }

/* ---- logo wall: a static monochrome grid (no marquee — nothing moves on its own) ---- */
.logo-wall { padding-block: 0 var(--section-pad); text-align: center; }
.logo-wall__label { font: var(--type-caption); color: var(--text-muted); margin-bottom: var(--space-5); }
.logo-wall__grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-5) var(--space-7); }
.logo-wall__item { height: 28px; width: auto; opacity: 0.65; color: var(--text-muted); }
.logo-wall__item svg { height: 100%; width: auto; fill: currentColor; }

/* ---- feature: media + copy pair, alternating; bold-lead bullets ---- */
.feature { display: grid; gap: var(--space-8); align-items: center; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feature + .feature { margin-top: var(--section-pad); }
.feature--flip .feature__media { order: -1; }
.feature__copy { display: grid; gap: var(--space-4); }
.feature__copy h2, .feature__copy h3 { font: var(--type-h2); letter-spacing: var(--tracking-display); color: var(--text-emphasis); text-wrap: balance; }
.bullets { display: grid; gap: var(--space-3); margin-top: var(--space-2); }
.bullets > li { font: var(--type-body); color: var(--text-muted); padding-left: var(--space-5); position: relative; text-wrap: pretty; }
.bullets > li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.bullets > li > strong { color: var(--text-emphasis); }
@media (max-width: 767px) { .feature { grid-template-columns: 1fr; gap: var(--space-6); } .feature--flip .feature__media { order: 0; } }

/* ---- steps: three numbered cards ---- */
.steps { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); counter-reset: step; }
.step { display: grid; gap: var(--space-3); padding: var(--space-6); border-radius: var(--radius-l); background: var(--surface-raised); box-shadow: var(--shadow-1); }
.step__num { font: var(--type-eyebrow); color: var(--accent-text); letter-spacing: var(--tracking-eyebrow); }
.step__title { font: var(--type-h3); color: var(--text-emphasis); }
.step__body { font: var(--type-body-sm); color: var(--text-muted); }

/* ---- grid & cards ---- */
.grid { display: grid; gap: var(--space-5); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.card { display: grid; gap: var(--space-2); padding: var(--space-6); border-radius: var(--radius-l); background: var(--surface-raised); box-shadow: var(--shadow-1); }
.card__title { font: var(--type-h3); color: var(--text-emphasis); }
.card__body { font: var(--type-body-sm); color: var(--text-muted); }


/* ---- testimonials: real people, real roles ---- */
.quotes { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.quote { display: grid; gap: var(--space-4); padding: var(--space-6); border-radius: var(--radius-l); background: var(--surface-raised); box-shadow: var(--shadow-1); }
.quote__body { font: var(--type-body); color: var(--text); text-wrap: pretty; }
.quote__who { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--space-3); align-items: center; }
.quote__avatar { width: 40px; height: 40px; border-radius: 50%; grid-row: 1 / 3; object-fit: cover; background: var(--surface-tint); }
.quote__name { font: var(--type-body-sm); font-weight: 600; color: var(--text-emphasis); }
.quote__role { font: var(--type-caption); color: var(--text-muted); }

/* ---- FAQ: native <details>, objection-ordered ---- */
.faq { max-width: var(--copy-max); margin-inline: auto; }
.faq__item { border-top: 1px solid var(--stroke); }
.faq__item:last-child { border-bottom: 1px solid var(--stroke); }
.faq__q { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 64px; padding: var(--space-4) 0; cursor: pointer; list-style: none; font: var(--type-h3); color: var(--text-emphasis); }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: "+"; font-size: 22px; color: var(--text-muted); transition: transform var(--dur-base) var(--ease); }
.faq__item[open] .faq__q::after { transform: rotate(45deg); }
.faq__a { padding: 0 0 var(--space-5); font: var(--type-body); color: var(--text-muted); max-width: 60ch; }
.faq__a p + p { margin-top: var(--space-3); }

/* ---- CTA band: the re-close ---- */
.cta-band { padding-block: var(--section-pad); background: var(--surface-section); text-align: center; }
.cta-band .copy { display: grid; justify-items: center; gap: var(--space-5); }
.cta-band__title { font: var(--type-h1); letter-spacing: var(--tracking-display); color: var(--text-emphasis); text-wrap: balance; }

/* ---- footer ---- */
.footer { padding-block: var(--space-8) var(--space-6); background: var(--surface-canvas); border-top: 1px solid var(--stroke); font: var(--type-caption); color: var(--text-muted); }
.footer__cols { display: grid; gap: var(--space-6) var(--space-5); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: var(--space-7); }
.footer__col h3 { font: var(--type-caption); font-weight: 600; color: var(--text-emphasis); margin-bottom: var(--space-3); }
.footer__col a { display: block; padding: var(--space-1) 0; color: var(--text-muted); }
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); justify-content: space-between; padding-top: var(--space-5); border-top: 1px solid var(--stroke); }
.footer__legal a { color: var(--text-muted); }
@media (hover: hover) and (pointer: fine) { .footer a:hover { color: var(--text-emphasis); } }

/* ---- forms: one field + one button; red only on validation ---- */
.field { display: grid; gap: var(--space-2); width: 100%; max-width: 420px; }
.field label { font: var(--type-body-sm); color: var(--text); }
.input { appearance: none; width: 100%; height: var(--control-h); padding: 0 var(--space-4); border-radius: var(--radius-m); font: var(--type-body); color: var(--text-emphasis); background: var(--surface-raised); border: 1px solid var(--stroke-strong); outline: none; transition: border-color var(--dur-base), box-shadow var(--dur-base); }
.input::placeholder { color: var(--text-subtle); }
.input:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); }
.input[aria-invalid="true"] { border-color: var(--negative); }
.field__error { font: var(--type-caption); color: var(--negative); }

/* ---- reveal-on-scroll: only hides when JS is running AND motion is welcome ---- */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  .reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
  .reveal.is-visible { opacity: 1; transform: none; }
}

/* ---- print: content, no chrome ---- */
@media print {
  .header, .theme-toggle, .skip-link, .cta-band { display: none; }
  .section { padding-block: var(--space-6); }
}

/* ---- page-specific (project-template dogfood page) ----
 * The "product" here is a repo and a deploy loop, so the media slots hold the
 * product itself: an inline SVG architecture diagram and real terminal output.
 * Tokens only — no raw colours. */
/* Links inside muted running text must not rely on colour alone (Lighthouse link-in-text-block). */
.faq__a a, .step__body a, .hero__fine a, .bullets a, .lede a, .hero-demo__cap a, .samples__note a, .scoreboard__note a { text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 1px; }
.media-frame--code { margin: 0; padding: var(--space-5); font: var(--type-body-sm); font-family: var(--font-mono); line-height: 1.55; color: var(--text); background: var(--surface-media); white-space: pre; overflow-x: auto; -webkit-overflow-scrolling: touch; tab-size: 2; }
.media-frame--code .c { color: var(--text-muted); }
.media-frame--code .k { color: var(--accent-text); }
.media-frame--code .ok { color: var(--positive); font-weight: 600; }
.diagram { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; padding: var(--space-3); }
.diagram text { font-family: var(--font-mono); fill: var(--text-emphasis); }
.diagram .d-muted { fill: var(--text-muted); }
.diagram .d-box { fill: var(--surface-raised); stroke: var(--stroke-strong); stroke-width: 1.5; }
.diagram .d-group { fill: none; stroke: var(--stroke); stroke-width: 1.5; stroke-dasharray: 6 5; }
.diagram .d-arrow { fill: none; stroke: var(--accent); stroke-width: 2; }
.diagram .d-head { fill: var(--accent); }
.diagram .d-label { fill: var(--accent-text); }

/* ---- image-optimizer: hero = the measured score card (AD_006; injected by scripts/build-scoreboard.mjs) ---- */
.hero-scores { display: grid; gap: var(--space-4); padding: var(--space-6); }
.hero-scores__head { font: var(--type-caption); color: var(--text-muted); text-align: center; }
.hero-scores__rings { display: flex; align-items: center; justify-content: center; gap: var(--space-5); }
.hero-scores__ring { --v: 0; display: grid; justify-items: center; gap: var(--space-2); text-align: center; }
.hero-scores__num { display: grid; place-items: center; width: 112px; height: 112px; border-radius: 50%; font: 600 36px/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-emphasis); background: radial-gradient(var(--surface-media) 62%, transparent 63%), conic-gradient(var(--ring, var(--accent)) calc(var(--v) * 1%), var(--surface-tint) 0); }
.hero-scores__ring--before { --ring: var(--text-muted); }
.hero-scores__lbl { font: var(--type-caption); color: var(--text-muted); }
.hero-scores__arrow { font-size: 28px; color: var(--text-muted); }
.hero-scores__sub { margin: 0; text-align: center; font: var(--type-body-sm); color: var(--text-muted); }
.hero-scores__facts { margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.hero-scores__facts dt { font: var(--type-caption); color: var(--text-muted); }
.hero-scores__facts dd { margin: 0; font: var(--type-body-sm); color: var(--text); font-variant-numeric: tabular-nums; }
.hero-scores__facts strong { color: var(--accent-text); }
.hero-scores__verify { margin: 0; text-align: center; font: var(--type-caption); color: var(--text-muted); }
.hero-scores__verify a { text-decoration: underline; text-underline-offset: 0.15em; }
@media (max-width: 480px) { .hero-scores__facts { grid-template-columns: 1fr; } }
.brand-mark { fill: var(--surface-canvas); }

/* ---- image-optimizer: gallery ---- */
/* Below-the-fold blocks skip style/layout until they approach the viewport (mobile TBT). */
.sample, .feature, .steps, .grid--3 .card, .faq__item { content-visibility: auto; contain-intrinsic-size: auto 420px; }
.samples { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.sample { display: grid; gap: var(--space-3); }
.sample__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.sample__pair figure { margin: 0; display: grid; gap: var(--space-2); }
.sample__pair img { width: 100%; height: auto; display: block; border-radius: var(--radius-m); background: var(--surface-media); box-shadow: inset 0 0 0 1px var(--stroke); }
.sample__pair figcaption { font: var(--type-caption); color: var(--text-muted); }
.sample__meta { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); margin: 0; }
.sample__kind { font: var(--type-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted); }
.sample__factor { font: var(--type-h3); color: var(--accent-text); }
.sample__detail { margin: 0; font: var(--type-body-sm); color: var(--text); }
.sample__credit { margin: 0; font: var(--type-caption); color: var(--text-muted); }
.samples__note { margin-top: var(--space-6); font: var(--type-body-sm); color: var(--text-muted); text-align: center; }
.card__code { font-size: 13px; margin: 0; }
.grid--3 .card p { margin: 0; }
.grid--3 .card { display: grid; gap: var(--space-4); align-content: start; }
/* Outcome lines + measured scoreboard (AD_006) */
.sample__outcome { margin: 0; font: var(--type-body-sm); color: var(--text-emphasis); }
.scoreboard-wrap { overflow-x: auto; padding: var(--space-2) var(--space-4); }
.scoreboard { width: 100%; border-collapse: collapse; font: var(--type-body-sm); font-variant-numeric: tabular-nums; }
.scoreboard th, .scoreboard td { padding: var(--space-3) var(--space-3); text-align: left; border-bottom: 1px solid var(--surface-tint); vertical-align: top; }
.scoreboard thead th { font: var(--type-caption); color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.scoreboard tbody th { font-weight: 500; color: var(--text-emphasis); }
.scoreboard tbody tr:last-child th, .scoreboard tbody tr:last-child td { border-bottom: 0; }
.scoreboard__before { color: var(--text-muted); }
.scoreboard__after { font-weight: 700; color: var(--accent-text); }
.scoreboard__note { margin: var(--space-3) 0 var(--space-2); font: var(--type-caption); color: var(--text-muted); }
.scoreboard--runs td { color: var(--text-muted); }