/* =====================================================================
   Outcome.gg — shared site stylesheet
   Last rebuilt 2026-05-02.
   Brand tokens deliberately mirror the iOS + companion brand kits so
   designers can reason about all three surfaces with one mental model.
   ===================================================================== */

:root {
  color-scheme: dark;

  /* Color tokens — mirror Outcome iOS + companion brand kits */
  --outcome-black:      #0a0a0f;
  --outcome-deep:       #1a0f2e;
  --outcome-soft-black: #14141b;
  --outcome-white:      #e8e8ec;
  --outcome-violet:     #a855f7;
  --outcome-violet-soft: #c7a3ff;
  /* Primary gradient pair — mirrors the AppIcon's violet+green shards. */
  --outcome-green:      #34d27a;
  --outcome-green-soft: #6fe69d;
  /* Secondary accent — the ANTE Digital teal. Used in pills, callouts,
     and the parent-product mark. NOT the primary brand gradient. */
  --outcome-teal:       #5fd6dd;
  --outcome-teal-soft:  #8be4e9;
  --outcome-text:       #d4d4d8;
  --outcome-muted:      #a1a1aa;
  --outcome-steel:      #6b7280;
  --outcome-grayline:   #4b5563;
  --outcome-line:       rgba(255, 255, 255, 0.08);

  /* Surfaces */
  --outcome-card:       rgba(168, 85, 247, 0.06);
  --outcome-card-edge:  rgba(168, 85, 247, 0.20);
  --outcome-callout:    rgba(34, 211, 238, 0.06);
  --outcome-callout-edge: rgba(34, 211, 238, 0.22);

  /* Type scale */
  --type-display:   clamp(2.5rem, 7vw, 4rem);
  --type-h1:        2.25rem;
  --type-h2:        1.625rem;
  --type-h3:        1.125rem;
  --type-body:      1.0625rem;
  --type-small:     0.9375rem;
  --type-eyebrow:   0.8125rem;

  /* Layout */
  --content-max:   72rem;
  --reading-max:   48rem;
  --radius-sm:     0.5rem;
  --radius-md:     0.75rem;
  --radius-lg:     1rem;
  --radius-xl:     1.5rem;

  /* Motion */
  --ease-snap:     cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast:      150ms;
  --dur-base:      220ms;
  --dur-slow:      400ms;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;
  background: var(--outcome-black);
  color: var(--outcome-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.6;
}

body {
  background:
    radial-gradient(ellipse at top, var(--outcome-deep) 0%, var(--outcome-black) 60%);
  min-height: 100vh;
}

/* Skip-to-main for keyboard users */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--outcome-violet);
  color: #fff;
  padding: 0.5rem 1rem;
  z-index: 999;
  text-decoration: none;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus {
  top: 0;
}

main {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* =====================================================================
   Typography
   ===================================================================== */
h1, h2, h3 { letter-spacing: -0.02em; line-height: 1.2; color: #fff; }
h2          { font-size: var(--type-h2); margin-bottom: 0.75rem; }
h3          { font-size: var(--type-h3); margin-bottom: 0.5rem; color: var(--outcome-violet-soft); }
p           { color: var(--outcome-text); }
a           { color: var(--outcome-violet); text-decoration: none; transition: color var(--dur-fast) var(--ease-snap); }
a:hover     { color: var(--outcome-violet-soft); text-decoration: underline; }
a:focus-visible {
  outline: 2px solid var(--outcome-teal);
  outline-offset: 3px;
  border-radius: 2px;
}

.eyebrow {
  font-size: var(--type-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--outcome-violet);
  margin-bottom: 0.75rem;
}

.wordmark {
  font-size: var(--type-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, var(--outcome-violet) 0%, var(--outcome-green) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

/* =====================================================================
   Buttons
   ===================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--type-body);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-snap),
              background var(--dur-base) var(--ease-snap),
              border-color var(--dur-base) var(--ease-snap),
              color var(--dur-base) var(--ease-snap);
  user-select: none;
  white-space: nowrap;
}
.btn:active     { transform: scale(0.98); }
.btn-primary    {
  background: linear-gradient(135deg, var(--outcome-violet) 0%, var(--outcome-green) 100%);
  color: #0a0a0f;
}
.btn-primary:hover {
  text-decoration: none;
  filter: brightness(1.08);
  color: #0a0a0f;
}
.btn-secondary  {
  background: transparent;
  border-color: var(--outcome-card-edge);
  color: var(--outcome-white);
}
.btn-secondary:hover {
  text-decoration: none;
  border-color: var(--outcome-violet);
  color: var(--outcome-white);
  background: var(--outcome-card);
}

/* =====================================================================
   Layout primitives
   ===================================================================== */
.section {
  padding: 4.5rem 0;
  border-top: 1px solid var(--outcome-line);
}
.section:first-of-type { border-top: none; }

.section-header {
  max-width: var(--reading-max);
  margin: 0 auto 2.5rem;
  text-align: center;
}
.section-header h2 { font-size: var(--type-h2); }
.section-header p  { color: var(--outcome-muted); margin-top: 0.5rem; }

.card {
  background: var(--outcome-card);
  border: 1px solid var(--outcome-card-edge);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
}
.card-callout {
  background: var(--outcome-callout);
  border-color: var(--outcome-callout-edge);
}

/* =====================================================================
   Hero
   ===================================================================== */
.hero {
  padding: 6rem 0 4rem;
  text-align: center;
}
.hero-headline {
  font-size: var(--type-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: 1rem;
}
.hero-headline .gradient {
  background: linear-gradient(135deg, var(--outcome-violet) 0%, var(--outcome-green) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sub {
  font-size: 1.25rem;
  color: var(--outcome-muted);
  max-width: 38rem;
  margin: 0 auto 2.5rem;
  line-height: 1.55;
}

/* Timeline strip */
.timeline {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  margin: 0 auto 3rem;
  max-width: 38rem;
  padding: 0 1rem;
}
.timeline-step {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  min-width: 0;
}
.timeline-step + .timeline-step::before {
  content: "";
  position: absolute;
  top: 0.5625rem;
  left: -50%;
  width: 100%;
  height: 1px;
  background: var(--outcome-grayline);
}
.timeline-dot {
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 999px;
  border: 2px solid var(--outcome-grayline);
  background: var(--outcome-black);
  position: relative;
  z-index: 1;
  transition: all var(--dur-base) var(--ease-snap);
}
.timeline-step.active .timeline-dot {
  background: var(--outcome-violet);
  border-color: var(--outcome-violet);
  box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.18);
}
.timeline-step.active .timeline-label {
  color: var(--outcome-white);
}
.timeline-label {
  margin-top: 0.625rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--outcome-steel);
  font-weight: 600;
}
.timeline-detail {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: var(--outcome-muted);
}

/* Hero mark — brand logo above the wordmark.
   Sized at half the original (was clamp(6rem, 14vw, 8.5rem)) per Brian. */
.hero-mark {
  width: clamp(3rem, 7vw, 4.25rem);
  height: clamp(3rem, 7vw, 4.25rem);
  margin: 0 auto 1.25rem;
  display: block;
  filter:
    drop-shadow(0 0 16px rgba(168, 85, 247, 0.18))
    drop-shadow(0 2px 18px rgba(0, 0, 0, 0.45));
  animation: outcome-mark-rise var(--dur-slow) var(--ease-snap) both;
}
@keyframes outcome-mark-rise {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* =====================================================================
   Hero CTAs — vertically stacked.
   The companion (download-now) is the primary, large action.
   The iOS waitlist sits below as a smaller secondary card.
   ===================================================================== */
.hero-cta-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 36rem;
  margin: 0 auto;
}
.hero-cta {
  background: var(--outcome-card);
  border: 1px solid var(--outcome-card-edge);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  text-align: left;
  transition: border-color var(--dur-base) var(--ease-snap),
              transform var(--dur-base) var(--ease-snap),
              background var(--dur-base) var(--ease-snap);
}
.hero-cta:hover {
  border-color: var(--outcome-violet);
  transform: translateY(-2px);
}
.hero-cta-eyebrow {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--outcome-teal-soft);
  font-weight: 600;
}
.hero-cta h3 {
  color: var(--outcome-white);
  font-size: 1.25rem;
  letter-spacing: -0.015em;
}
.hero-cta p {
  font-size: 0.9375rem;
  color: var(--outcome-muted);
  margin: 0;
}
.hero-cta .btn {
  margin-top: auto;
  width: 100%;
}

/* Primary CTA — the companion download. Larger, brighter, dominant. */
.hero-cta-primary {
  padding: 2.25rem 2rem;
  border-color: var(--outcome-violet);
  background:
    radial-gradient(circle at 0% 0%, rgba(168, 85, 247, 0.18), transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(52, 210, 122, 0.15), transparent 60%),
    rgba(255, 255, 255, 0.02);
  box-shadow:
    0 0 0 1px rgba(168, 85, 247, 0.10),
    0 24px 60px -20px rgba(168, 85, 247, 0.30);
}
.hero-cta-primary .hero-cta-eyebrow {
  color: var(--outcome-violet-soft);
}
.hero-cta-primary h3 {
  font-size: 1.625rem;
  letter-spacing: -0.02em;
}
.hero-cta-primary p {
  font-size: 1rem;
}
.hero-cta-primary .btn {
  padding: 1.125rem 1.75rem;
  font-size: 1.0625rem;
}
.hero-cta-primary-meta {
  display: flex;
  gap: 1rem;
  font-size: var(--type-small);
  color: var(--outcome-muted);
  margin-top: 0.25rem;
  flex-wrap: wrap;
}
.hero-cta-primary-meta a { color: var(--outcome-muted); }
.hero-cta-primary-meta a:hover { color: var(--outcome-white); text-decoration: none; }
.hero-cta-primary-meta .sep { color: var(--outcome-grayline); }

/* Secondary CTA — the iOS waitlist. Smaller, more reserved. */
.hero-cta-secondary {
  padding: 1.25rem 1.5rem;
  background: rgba(255, 255, 255, 0.015);
  border-color: var(--outcome-line);
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.hero-cta-secondary > div {
  flex: 1 1 18rem;
  min-width: 0;
}
.hero-cta-secondary h3 {
  font-size: 1.0625rem;
  margin-bottom: 0.125rem;
}
.hero-cta-secondary p {
  font-size: 0.875rem;
  margin: 0;
}
.hero-cta-secondary .btn {
  width: auto;
  margin-top: 0;
  flex-shrink: 0;
}

.hero-roadmap {
  margin-top: 2rem;
  font-size: 0.875rem;
  color: var(--outcome-steel);
}

@media (max-width: 640px) {
  .hero { padding: 3.5rem 0 3rem; }
  .hero-cta-stack { max-width: 28rem; }
  .hero-cta-primary { padding: 1.75rem 1.25rem; }
  .hero-cta-primary h3 { font-size: 1.375rem; }
  .hero-cta-secondary { flex-direction: column; align-items: stretch; }
  .hero-cta-secondary .btn { width: 100%; }
  .timeline-detail { font-size: 0.75rem; }
}

/* =====================================================================
   How it works (numbered steps)
   ===================================================================== */
.steps {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  max-width: var(--reading-max);
  margin: 0 auto;
}
.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  align-items: flex-start;
  padding: 1.25rem;
  border: 1px solid var(--outcome-line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.015);
}
.step-num {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 700;
  background: linear-gradient(135deg, var(--outcome-violet) 0%, var(--outcome-green) 100%);
  color: #0a0a0f;
  font-size: 0.9375rem;
}
.step h3 { color: var(--outcome-white); font-size: 1.0625rem; margin-bottom: 0.25rem; }
.step p  { font-size: var(--type-small); }

/* =====================================================================
   FAQ (semantic details/summary)
   ===================================================================== */
.faq {
  max-width: var(--reading-max);
  margin: 0 auto;
}
.faq details {
  border: 1px solid var(--outcome-line);
  border-radius: var(--radius-md);
  margin-bottom: 0.625rem;
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-snap);
}
.faq details[open] { border-color: var(--outcome-card-edge); }
.faq summary {
  padding: 1.125rem 1.25rem;
  cursor: pointer;
  font-weight: 600;
  font-size: var(--type-body);
  color: var(--outcome-white);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-size: 1.25rem;
  color: var(--outcome-violet);
  transition: transform var(--dur-fast) var(--ease-snap);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq-body {
  padding: 0 1.25rem 1.125rem;
  color: var(--outcome-text);
  font-size: var(--type-small);
  line-height: 1.65;
}

/* =====================================================================
   Trust card list
   ===================================================================== */
.trust-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  max-width: var(--content-max);
  margin: 0 auto;
}
.trust-grid .card h3 {
  color: var(--outcome-teal-soft);
}
.trust-grid .card p {
  font-size: var(--type-small);
  margin: 0;
}

/* =====================================================================
   Waitlist form
   ===================================================================== */
.waitlist-form {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.waitlist-form input[type="email"] {
  flex: 1 1 14rem;
  min-width: 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--outcome-line);
  border-radius: var(--radius-md);
  padding: 0.875rem 1rem;
  color: var(--outcome-white);
  font-size: var(--type-body);
  font-family: inherit;
  transition: border-color var(--dur-fast) var(--ease-snap);
}
.waitlist-form input[type="email"]::placeholder { color: var(--outcome-steel); }
.waitlist-form input[type="email"]:focus {
  outline: none;
  border-color: var(--outcome-violet);
}

/* =====================================================================
   Footer
   ===================================================================== */
.site-footer {
  padding: 3rem 0 4rem;
  border-top: 1px solid var(--outcome-line);
  margin-top: 2rem;
  text-align: center;
}
.site-footer .links {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.site-footer a {
  color: var(--outcome-muted);
  font-size: var(--type-small);
}
.site-footer a:hover { color: var(--outcome-white); }
.site-footer .parent {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--outcome-steel);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
/* ANTE Digital footer mark.
   Renders the official raster from the brand pack. We serve the 64px
   variant (a few KB) for the footer instead of the 1024px master so we
   don't ship over a megabyte of pixels for an ~18px decoration.
     - /static/brand/ante-digital-mark-1024.png  — master (workspace only)
     - /static/brand/ante-digital-mark-256.png   — retina footer + larger surfaces
     - /static/brand/ante-digital-mark-64.png    — 1x footer mark (this rule)
   The teal gradient remains as a fallback so the footer never goes
   blank if the file fails to load. The mark itself is transparent. */
.site-footer .ante-mark {
  width: 1.125rem;
  height: 1.125rem;
  background:
    url('/static/brand/ante-digital-mark-64.png') center / contain no-repeat,
    linear-gradient(135deg, #5fd6dd 0%, #2aa1aa 50%, #115d62 100%);
  border-radius: 0.2rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
/* Retina swap: serve the 256px variant when the device pixel ratio
   warrants it. Same display footprint, sharper rendering. */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .site-footer .ante-mark {
    background:
      url('/static/brand/ante-digital-mark-256.png') center / contain no-repeat,
      linear-gradient(135deg, #5fd6dd 0%, #2aa1aa 50%, #115d62 100%);
  }
}
.site-footer .copyright {
  font-size: 0.7rem;
  color: var(--outcome-grayline);
  margin-top: 0.5rem;
}

/* =====================================================================
   Site nav (top bar) — minimal: brand on left, optional links on right
   ===================================================================== */
.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 0;
  gap: 1rem;
}
.site-nav .brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--outcome-white);
}
.site-nav .brand:hover { text-decoration: none; }
.site-nav .brand-mark {
  width: 1.75rem;
  height: 1.75rem;
  background-image: url('/static/brand/outcome-mark-96-transparent.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.site-nav .nav-links {
  display: inline-flex;
  gap: 1.5rem;
  font-size: var(--type-small);
}
.site-nav .nav-links a {
  color: var(--outcome-muted);
}
.site-nav .nav-links a:hover { color: var(--outcome-white); text-decoration: none; }

/* Breadcrumb (subtle path indicator on inner pages) */
.crumbs {
  font-size: var(--type-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--outcome-steel);
  margin-bottom: 0.875rem;
}
.crumbs a { color: var(--outcome-muted); }
.crumbs a:hover { color: var(--outcome-white); text-decoration: none; }
.crumbs .sep { margin: 0 0.5rem; color: var(--outcome-grayline); }

/* =====================================================================
   Page-header (inner pages: download, release notes, support)
   ===================================================================== */
.page-header {
  padding: 3.5rem 0 2rem;
  text-align: left;
}
.page-header h1 {
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: 0.625rem;
  color: var(--outcome-white);
}
.page-header .lede {
  font-size: 1.125rem;
  color: var(--outcome-muted);
  max-width: 42rem;
  line-height: 1.55;
}

/* =====================================================================
   Pills + status badges
   ===================================================================== */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: var(--outcome-card);
  border: 1px solid var(--outcome-card-edge);
  color: var(--outcome-violet-soft);
  white-space: nowrap;
}
.pill-coming {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--outcome-line);
  color: var(--outcome-muted);
}
.pill-beta {
  background: var(--outcome-callout);
  border-color: var(--outcome-callout-edge);
  color: var(--outcome-teal-soft);
}
.pill-soon {
  background: rgba(168, 85, 247, 0.08);
  border-color: rgba(168, 85, 247, 0.30);
  color: var(--outcome-violet-soft);
}

/* =====================================================================
   Download chooser rows
   ===================================================================== */
.download-rows {
  display: grid;
  gap: 0.875rem;
  max-width: var(--reading-max);
  margin: 0 auto;
}
.download-row {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  gap: 1.25rem;
  align-items: center;
  padding: 1.25rem 1.5rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--outcome-line);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur-fast) var(--ease-snap),
              background var(--dur-fast) var(--ease-snap),
              transform var(--dur-fast) var(--ease-snap);
}
.download-row:hover {
  border-color: var(--outcome-card-edge);
  background: var(--outcome-card);
  text-decoration: none;
  transform: translateY(-1px);
}
.download-row.disabled {
  cursor: not-allowed;
  opacity: 0.85;
}
.download-row.disabled:hover {
  border-color: var(--outcome-line);
  background: rgba(255, 255, 255, 0.02);
  transform: none;
}
.download-row .platform-icon {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  background: rgba(168, 85, 247, 0.12);
  color: var(--outcome-violet);
  font-size: 1.25rem;
  font-weight: 700;
}
.download-row .platform-icon.muted {
  background: rgba(255, 255, 255, 0.04);
  color: var(--outcome-steel);
}
.download-row h3 { color: var(--outcome-white); font-size: 1.0625rem; margin-bottom: 0.125rem; }
.download-row p  { color: var(--outcome-muted); font-size: var(--type-small); margin: 0; }
.download-row .meta {
  display: inline-flex;
  gap: 0.5rem;
  margin-top: 0.375rem;
  flex-wrap: wrap;
}
.download-row .arrow {
  color: var(--outcome-muted);
  font-size: 1.25rem;
  transition: transform var(--dur-fast) var(--ease-snap);
}
.download-row:hover .arrow { transform: translateX(3px); color: var(--outcome-white); }

/* =====================================================================
   Spec block (system requirements) — definition list table
   ===================================================================== */
.spec {
  display: grid;
  grid-template-columns: 14rem 1fr;
  gap: 0.75rem 1.5rem;
  max-width: var(--reading-max);
  margin: 0 auto;
  padding: 1.5rem;
  border: 1px solid var(--outcome-line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.015);
}
.spec dt {
  color: var(--outcome-muted);
  font-size: var(--type-small);
  font-weight: 600;
}
.spec dd {
  color: var(--outcome-white);
  font-size: var(--type-small);
  margin: 0;
}
@media (max-width: 640px) {
  .spec { grid-template-columns: 1fr; gap: 0.25rem 0; }
  .spec dd { margin-bottom: 0.625rem; }
}

/* =====================================================================
   Release notes
   ===================================================================== */
.release {
  border: 1px solid var(--outcome-line);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  margin-bottom: 1rem;
  background: rgba(255, 255, 255, 0.015);
}
.release header {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--outcome-line);
}
.release header h2 {
  font-size: 1.25rem;
  letter-spacing: -0.015em;
  color: var(--outcome-white);
  margin: 0;
}
.release header .date {
  color: var(--outcome-steel);
  font-size: var(--type-small);
}
.release-block { margin-bottom: 1rem; }
.release-block:last-child { margin-bottom: 0; }
.release-block h3 {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--outcome-violet);
  margin-bottom: 0.5rem;
}
.release-block ul {
  list-style: disc;
  padding-left: 1.25rem;
  color: var(--outcome-text);
  font-size: var(--type-small);
  line-height: 1.65;
}
.release-block li { margin-bottom: 0.25rem; }

/* Empty state for release-notes pre-launch */
.empty-state {
  border: 1px dashed var(--outcome-grayline);
  border-radius: var(--radius-md);
  padding: 2.5rem 1.5rem;
  text-align: center;
  max-width: var(--reading-max);
  margin: 0 auto;
}
.empty-state h3 { color: var(--outcome-white); font-size: 1.125rem; margin-bottom: 0.5rem; }
.empty-state p  { color: var(--outcome-muted); font-size: var(--type-small); }

/* =====================================================================
   Feature snapshot (home page) — three cards w/ icon + lede + Learn more
   ===================================================================== */
.feature-snapshot {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
  max-width: var(--content-max);
  margin: 0 auto;
}
.feature-snapshot .card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.feature-snapshot .feature-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  background: rgba(168, 85, 247, 0.12);
  color: var(--outcome-violet);
  margin-bottom: 0.25rem;
}
.feature-snapshot .feature-icon.green {
  background: rgba(52, 210, 122, 0.12);
  color: var(--outcome-green);
}
.feature-snapshot .feature-icon.teal {
  background: rgba(95, 214, 221, 0.12);
  color: var(--outcome-teal);
}
.feature-snapshot .card h3 {
  color: var(--outcome-white);
  font-size: 1.0625rem;
  margin-bottom: 0.25rem;
}
.feature-snapshot .card p {
  font-size: var(--type-small);
  color: var(--outcome-text);
  margin: 0;
  flex-grow: 1;
}
.feature-snapshot .card a.learn-more {
  margin-top: 0.5rem;
  font-size: var(--type-small);
  color: var(--outcome-violet);
  font-weight: 600;
}
.feature-snapshot .card a.learn-more:hover {
  text-decoration: none;
  color: var(--outcome-violet-soft);
}
.feature-snapshot-footnote {
  margin-top: 1.5rem;
  text-align: center;
  font-size: var(--type-small);
  color: var(--outcome-muted);
}

/* =====================================================================
   Deep-dive feature section (/features) — figure placeholder + content
   ===================================================================== */
.deepdive {
  max-width: var(--content-max);
  margin: 0 auto;
}
.deepdive + .deepdive {
  margin-top: 3.5rem;
  padding-top: 3.5rem;
  border-top: 1px solid var(--outcome-line);
}
.deepdive header {
  margin-bottom: 1.75rem;
}
.deepdive header .feature-label {
  font-size: var(--type-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--outcome-violet);
  margin-bottom: 0.5rem;
}
.deepdive header h2 {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  letter-spacing: -0.02em;
  margin-bottom: 0.625rem;
  color: var(--outcome-white);
}
.deepdive header .lede {
  font-size: 1.0625rem;
  color: var(--outcome-text);
  max-width: 44rem;
  line-height: 1.55;
}
.deepdive .deepdive-grid {
  display: grid;
  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: flex-start;
}
.deepdive .deepdive-body h3 {
  color: var(--outcome-white);
  font-size: 1.0625rem;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}
.deepdive .deepdive-body h3:first-child { margin-top: 0; }
.deepdive .deepdive-body p {
  color: var(--outcome-text);
  font-size: var(--type-body);
  margin-bottom: 0.875rem;
}
.deepdive .deepdive-body ol {
  list-style: decimal;
  padding-left: 1.25rem;
  color: var(--outcome-text);
  font-size: var(--type-small);
  line-height: 1.7;
}
.deepdive .deepdive-body li { margin-bottom: 0.375rem; }
@media (max-width: 800px) {
  .deepdive .deepdive-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* Artist canvas — placeholder figure block awaiting illustration */
.artist-canvas {
  margin: 0;
  aspect-ratio: 4 / 5;
  border: 1px dashed var(--outcome-grayline);
  border-radius: var(--radius-lg);
  display: grid;
  place-items: center;
  text-align: center;
  background:
    radial-gradient(circle at 30% 30%, rgba(168, 85, 247, 0.10), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(52, 210, 122, 0.08), transparent 60%),
    rgba(255, 255, 255, 0.015);
  padding: 1.5rem;
  color: var(--outcome-steel);
  font-size: var(--type-small);
  line-height: 1.5;
}
.artist-canvas .canvas-mark {
  width: 3rem;
  height: 3rem;
  background-image: url('/static/brand/outcome-mark-96-transparent.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.35;
  margin: 0 auto 0.75rem;
}
.artist-canvas .canvas-label {
  display: block;
  color: var(--outcome-muted);
  font-weight: 600;
  letter-spacing: 0.05em;
  font-size: var(--type-eyebrow);
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}
.artist-canvas .canvas-hint {
  display: block;
  font-size: var(--type-small);
  max-width: 18rem;
  margin: 0 auto;
}

/* Anchor-link bar (used at the top of /features and /faq) */
.anchor-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 1rem 0;
  border-top: 1px solid var(--outcome-line);
  border-bottom: 1px solid var(--outcome-line);
  margin-bottom: 2.5rem;
}
.anchor-bar a {
  font-size: var(--type-small);
  color: var(--outcome-muted);
  padding: 0.375rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--outcome-line);
  background: rgba(255, 255, 255, 0.02);
  transition: border-color var(--dur-fast) var(--ease-snap),
              color var(--dur-fast) var(--ease-snap);
}
.anchor-bar a:hover {
  text-decoration: none;
  color: var(--outcome-white);
  border-color: var(--outcome-card-edge);
}

/* =====================================================================
   FAQ page layout — sticky TOC on desktop, inline jumps on mobile
   ===================================================================== */
.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: 3rem;
  max-width: var(--content-max);
  margin: 0 auto;
  align-items: flex-start;
}
.faq-toc {
  position: sticky;
  top: 2rem;
  padding: 1rem 0;
}
.faq-toc h2 {
  font-size: var(--type-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--outcome-violet);
  margin-bottom: 0.75rem;
}
.faq-toc ol {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.faq-toc a {
  font-size: var(--type-small);
  color: var(--outcome-muted);
  display: block;
  padding: 0.25rem 0;
}
.faq-toc a:hover { color: var(--outcome-white); text-decoration: none; }
.faq-toc .count {
  color: var(--outcome-steel);
  font-size: 0.8125rem;
  margin-left: 0.25rem;
}
.faq-sections section {
  margin-bottom: 2.5rem;
  scroll-margin-top: 1.5rem;
}
.faq-sections section h2 {
  font-size: 1.375rem;
  letter-spacing: -0.015em;
  margin-bottom: 1rem;
  color: var(--outcome-white);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--outcome-line);
}
@media (max-width: 800px) {
  .faq-layout { grid-template-columns: 1fr; gap: 1.5rem; }
  .faq-toc { position: static; padding: 0 0 1rem; }
  .faq-toc ol {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .faq-toc a {
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--outcome-line);
    border-radius: 999px;
  }
}

/* =====================================================================
   Showcase — two-column layout (figure + content) used on /download
   ===================================================================== */
.showcase {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
  max-width: var(--content-max);
  margin: 0 auto;
}
.showcase-content h2 {
  font-size: 1.625rem;
  margin-bottom: 0.875rem;
  letter-spacing: -0.02em;
}
.showcase-content > p {
  color: var(--outcome-text);
  margin-bottom: 1.5rem;
}
@media (max-width: 800px) {
  .showcase {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* Product feature card — used in the /download showcase as a
   placeholder for where the screenshot lives once available. */
.feature-card {
  background:
    radial-gradient(circle at 20% 20%, rgba(168, 85, 247, 0.18), transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(52, 210, 122, 0.14), transparent 60%),
    rgba(255, 255, 255, 0.02);
  border: 1px solid var(--outcome-card-edge);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 24px 48px -16px rgba(0, 0, 0, 0.6),
    0 0 60px -10px rgba(168, 85, 247, 0.18);
  margin: 0;
}
.feature-card .feature-card-mark {
  width: 6rem;
  height: 6rem;
  background-image: url('/static/brand/outcome-mark-256.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 0 24px rgba(168, 85, 247, 0.20));
}
.feature-card .feature-card-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--outcome-violet-soft);
  font-weight: 600;
}
.feature-card .feature-card-title {
  color: var(--outcome-white);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.feature-card .feature-card-meta {
  color: var(--outcome-muted);
  font-size: var(--type-small);
}

/* =====================================================================
   Reduce motion
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}