/* 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-toggle .switch .switch__label .pricing .plan .plan--featured .plan__head .plan__name
 *   .plan__badge .plan__price .plan__per .plan__list .plan__note .price[data-monthly][data-annual]
 *   .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); }

/* ---- pricing: toggle (role=switch) + 2–3 plans; the featured plan is the only ringed one ---- */
.pricing-toggle { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin-bottom: var(--space-7); font: var(--type-body-sm); color: var(--text-muted); }
.switch { position: relative; width: 48px; height: 28px; border-radius: var(--radius-pill); background: var(--stroke-strong); transition: background-color var(--dur-base) var(--ease); flex: none; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-canvas); box-shadow: var(--shadow-1); transition: transform var(--dur-base) var(--ease); }
.switch[aria-checked="true"] { background: var(--accent); }
.switch[aria-checked="true"]::after { transform: translateX(20px); }
.switch__label { color: var(--text); }
.switch__label strong { color: var(--positive); font-weight: 600; }
.pricing { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); align-items: start; }
.plan { display: grid; gap: var(--space-4); padding: var(--space-6); border-radius: var(--radius-l); background: var(--surface-raised); box-shadow: var(--shadow-1); }
.plan--featured { box-shadow: var(--shadow-plan); }
.plan__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.plan__name { font: var(--type-h3); color: var(--text-emphasis); }
.plan__badge { padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); font: var(--type-caption); font-weight: 600; color: var(--accent-text); background: var(--surface-tint); }
.plan__price { display: flex; align-items: baseline; gap: var(--space-1); font: var(--type-price); color: var(--text-emphasis); font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-display); }
.plan__per { font: var(--type-body-sm); color: var(--text-muted); letter-spacing: 0; }
.plan__list { display: grid; gap: var(--space-2); font: var(--type-body-sm); color: var(--text); }
.plan__list li { padding-left: var(--space-5); position: relative; }
.plan__list li::before { content: "✓"; position: absolute; left: 0; color: var(--accent-text); font-weight: 600; }
.plan__note { text-align: center; margin-top: var(--space-6); font: var(--type-caption); color: var(--text-muted); }
.price::before { content: attr(data-annual); }
[data-billing="monthly"] .price::before { content: attr(data-monthly); }

/* ---- 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). */
.plan__note a, .faq__a a, .step__body a, .bullets a, .scores__cap 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); }
/* Scores: Lighthouse / PageSpeed-style gauges drawn in CSS from the --positive tokens — no image, no request.
 * Digits are 24 px semibold: --positive on --positive-container is 5.2:1 light / 8.6:1 dark (AA for normal text, not just large). */
.scores { display: grid; gap: var(--space-5); align-content: center; padding: var(--space-6) var(--space-5); }
.scores__list { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-5) var(--space-3); }
.score { display: grid; justify-items: center; align-content: start; gap: var(--space-3); flex: 1 1 88px; max-width: 120px; min-width: 0; text-align: center; }
.score__ring, .score__pill { font: 600 24px / 1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--positive); background: var(--positive-container); }
.score__ring { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; border: 5px solid var(--positive); }
.score__pill { display: flex; align-items: center; gap: var(--space-2); height: 40px; margin-block: 16px; padding: 0 var(--space-4); border-radius: var(--radius-pill); font-size: 20px; }
.score__pill::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--positive); }
.score__label { font: var(--type-caption); font-weight: 500; color: var(--text-emphasis); text-wrap: balance; }
.scores__cap { font: var(--type-caption); color: var(--text-muted); text-align: center; text-wrap: pretty; }