/* Caddium — interface styles.
   One stylesheet, no framework, no build step. */

/* ============================================================ design tokens ==
   The Caddium brand system, straight off the brandboard: Fairway Green as the
   voice, Champagne Gold as the single premium accent, Sage as the quiet
   supporting tone, on Off White paper.

   The five canonical tokens are available project-wide. Legacy aliases retain
   their established values here so the signed-in product is not restyled as a
   side effect; the homepage overrides those aliases in its scoped block.
   ========================================================================== */

:root {
  /* -- canonical brand colours ------------------------------------------ */
  --color-fairway-green: #0F3D2E;
  --color-sage: #8DAA8D;
  --color-off-white: #F7F7F5;
  --color-graphite: #1E1E1E;
  --color-champagne-gold: #C8A24B;

  /* Product aliases share the same palette as the public Caddium brand. */
  --brand-900: var(--color-fairway-green);
  --brand-700: var(--color-fairway-green);
  --brand-600: var(--color-fairway-green);
  --brand-500: var(--color-sage);
  --brand-100: rgba(141, 170, 141, .16);
  --amber-600: var(--color-champagne-gold);
  --amber-100: rgba(200, 162, 75, .14);
  --red-600: #b3261e;
  --red-100: #fdecea;
  --ink: var(--color-graphite);
  --ink-soft: #5C5C57;
  --ink-faint: #777770;
  --line: #e6e2da;
  --surface: #ffffff;
  --canvas: var(--color-off-white);

  /* -- type -------------------------------------------------------------- */
  --font-heading: "Sora", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --step-hero: clamp(3rem, 6vw, 5.75rem);
  --step-h1: clamp(2.5rem, 5vw, 4.5rem);
  --step-h2: clamp(2rem, 4vw, 3.5rem);
  --step-h3: clamp(1.25rem, 2vw, 1.75rem);
  --step-lead: clamp(1.125rem, 1.5vw, 1.25rem);
  --step-body: 1rem;
  --step-small: .875rem;

  /* -- spacing ----------------------------------------------------------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px;
  --section-y: clamp(72px, 9vw, 128px);

  /* -- layout ------------------------------------------------------------ */
  --container-narrow: 760px;
  --container-wide: 1240px;
  --page-gutter: clamp(20px, 4vw, 40px);
  --breakpoint-phone: 390px;
  --breakpoint-tablet: 768px;
  --breakpoint-laptop: 1024px;
  --breakpoint-desktop: 1440px;

  /* -- shape ------------------------------------------------------------- */
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* -- depth: soft and low, never a drop shadow that shouts -------------- */
  --shadow: 0 1px 1px rgba(20, 17, 12, .04), 0 6px 20px rgba(20, 17, 12, .06);
  --shadow-lifted: 0 3px 8px rgba(15, 61, 46, .06), 0 24px 60px rgba(15, 61, 46, .11);

  /* -- motion: functional only. Durations short enough to feel instant --- */
  --ease: cubic-bezier(.2, .7, .3, 1);
  --dur-fast: .15s;
  --dur: .25s;

}

/* Sora and Inter are self-hosted from their official Google Fonts releases.
   Keeping them local avoids both third-party requests and a flash caused by
   the missing font files the previous declarations referenced. */
@font-face {
  font-family: "Sora";
  src: url("/static/fonts/sora-variable.ttf") format("truetype");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter-variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

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

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  width: 100%;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 560;
  letter-spacing: -.025em;
}

h1, h2, h3, p { overflow-wrap: break-word; }

/* One shell for the public site (.public-site raises --container-wide);
   .wrap keeps its narrower measure for the signed-in section. */
.wrap { max-width: 880px; width: 100%; margin: 0 auto; padding: 0 20px; }
.wrap-wide { max-width: var(--container-wide); width: 100%; margin: 0 auto; padding: 0 var(--page-gutter); }

/* ----------------------------------------------------------- top nav --
   The navigation itself is styled further down, under .site-nav; what lives
   here is only what the brand lockup and the sign-in slot share. */

@media (max-width: 420px) {
  .nav-brand { font-size: 16px; }
}
.nav-brand {
  display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none;
  font-weight: 700; font-size: 18px; letter-spacing: -.01em; flex: none;
}
.nav-brand .brand-mark { width: 28px; height: 28px; flex: none; }

.nav-auth { display: flex; align-items: center; gap: 10px; }.nav-login-link {
  color: #fff !important; background: var(--brand-600); border-radius: 8px;
  padding: 9px 18px !important; text-decoration: none !important; transition: background .15s;
}
.nav-login-link:hover { background: var(--brand-700) !important; }
.nav-cta-btn { padding: 9px 16px; font-size: 13.5px; white-space: nowrap; }

@media (max-width: 480px) { .nav-cta-btn { padding: 8px 12px; font-size: 12.5px; } }

.badge {
  flex: none; font-size: 12.5px; font-weight: 600; padding: 6px 12px;
  border-radius: 999px; white-space: nowrap;
}
.badge-ok { background: var(--brand-100); color: var(--brand-700); }
.badge-warn { background: #f8ead9; color: var(--amber-600); }
.badge-muted { background: var(--canvas); color: var(--ink-faint); border: 1px solid var(--line); }

/* ------------------------------------------------------- app sidebar -- */

.app-shell { display: flex; align-items: stretch; min-height: 100vh; }
.sidebar-toggle-checkbox { position: absolute; opacity: 0; pointer-events: none; }

.app-sidebar {
  flex: none; width: 264px;
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 45;
  display: flex; flex-direction: column;
  background: var(--brand-900); color: #dbe2ee;
  padding: 20px 14px;
}
.app-sidebar-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; padding: 0 6px; }
.app-sidebar-brand {
  display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none;
  font-weight: 700; font-size: 17px; letter-spacing: -.01em;
}
.app-sidebar-brand .brand-mark { width: 26px; height: 26px; flex: none; }
.app-sidebar-brand .brand-mark circle:first-child { stroke: #fff; }

.app-sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
.app-sidebar-link {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px;
  color: #b7c2d6; text-decoration: none; font-size: 14.5px; font-weight: 600;
  transition: background .15s, color .15s;
}
.app-sidebar-link svg { width: 19px; height: 19px; flex: none; }
.app-sidebar-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.app-sidebar-link.active { background: rgba(255,255,255,.14); color: #fff; box-shadow: inset 3px 0 0 #fff; }

.app-sidebar-link.app-sidebar-cta {
  background: var(--amber-600); color: #fff; margin: 6px 0;
}
.app-sidebar-link.app-sidebar-cta:hover { background: #995828; color: #fff; }
.app-sidebar-link.app-sidebar-cta.active { background: var(--amber-600); color: #fff; box-shadow: inset 3px 0 0 #fff; }

.app-sidebar-bottom {
  margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-direction: column; gap: 2px;
}
.app-sidebar-backlink {
  color: #8b96ab; text-decoration: none; font-size: 12.5px; font-weight: 600;
  padding: 10px 12px;
}
.app-sidebar-backlink:hover { color: #dbe2ee; text-decoration: underline; }

.app-main { flex: 1 1 auto; min-width: 0; margin-left: 264px; }
.app-main-topbar { display: none; }

@media (max-width: 900px) {
  .app-sidebar {
    transform: translateX(-100%); transition: transform .2s ease; box-shadow: 0 0 40px rgba(0,0,0,.25);
  }
  .sidebar-toggle-checkbox:checked ~ .app-sidebar { transform: translateX(0); }
  .app-main { margin-left: 0; }
  .app-main-topbar {
    display: flex; align-items: center; gap: 12px; height: 60px;
    background: var(--surface); border-bottom: 1px solid var(--line);
    padding: 0 20px; position: sticky; top: 0; z-index: 30;
  }
  .app-main-topbar .nav-brand { font-size: 16px; }
  .sidebar-toggle-btn {
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 34px; height: 34px; cursor: pointer; border-radius: 8px; flex: none;
  }
  .sidebar-toggle-btn span { display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; }
  .sidebar-toggle-btn:hover { background: var(--brand-100); }
  .sidebar-backdrop {
    display: none; position: fixed; inset: 0; background: rgba(14,21,36,.45); z-index: 44;
  }
  .sidebar-toggle-checkbox:checked ~ .sidebar-backdrop { display: block; }
}

/* --------------------------------------------------------- page head -- */

.page-header { padding: 30px 0 6px; }
.page-header h1 { margin: 0 0 6px; font-size: 26px; letter-spacing: -.02em; }
.page-header p { margin: 0; color: var(--ink-soft); max-width: 60ch; }

/* ------------------------------------------------------------- hero -- */

.hero-light { padding: 64px 0; background: var(--surface); }
.hero-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px; align-items: center; }
.hero-copy h1 {
  font-size: 38px; line-height: 1.2; margin: 0 0 18px; letter-spacing: -.02em; color: var(--ink);
}
.hero-copy p { font-size: 17px; line-height: 1.65; color: var(--ink-soft); margin: 0 0 26px; max-width: 46ch; }
.hero-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.hero-actions .btn-large { width: auto; padding: 14px 28px; }
.hero-secondary-link {
  color: var(--brand-700); text-decoration: none; font-weight: 600; font-size: 15px;
}
.hero-secondary-link:hover { text-decoration: underline; }

.hero-photo-frame {
  position: relative; padding: 5px;
  background: linear-gradient(135deg, var(--amber-600), var(--brand-600));
  border-radius: 18px;
  box-shadow: 0 28px 54px -20px rgba(177,101,45,.45), 0 16px 40px rgba(14,21,36,.16);
}
.hero-photo {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: 14px; overflow: hidden; background: var(--brand-900);
}
.hero-photo img, .hero-photo video {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  object-fit: cover;
}
.hero-photo-accent {
  position: absolute; top: -11px; right: 34px; width: 22px; height: 22px;
  border-radius: 50%; background: var(--amber-600);
  box-shadow: 0 6px 14px rgba(177,101,45,.55), 0 0 0 4px var(--surface);
}

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-photo-frame { order: -1; max-width: 560px; margin: 0 auto; width: 100%; }
  .hero-copy h1 { font-size: 32px; }
}

/* ------------------------------------------------------------ section -- */

.section { padding: 64px 0; }
.section-alt { background: var(--canvas); }
.section-title-center { text-align: center; font-size: 27px; letter-spacing: -.01em; margin: 0 0 40px; }
.section-eyebrow {
  display: block; font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--brand-600); margin-bottom: 12px;
}

.wrap-narrow { max-width: var(--container-narrow); width: 100%; margin: 0 auto; padding: 0 var(--page-gutter); }
.wrap-narrow h2 { font-size: 27px; line-height: 1.3; letter-spacing: -.01em; margin: 0 0 24px; }
.wrap-narrow p { font-size: 17px; line-height: 1.7; color: var(--ink-soft); margin: 0 0 20px; }
.wrap-narrow p:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------- why panel -- */

.why-panel {
  background: linear-gradient(135deg, var(--brand-900) 0%, var(--brand-700) 100%);
  color: #fff;
}
.why-panel .section-eyebrow { display: block; text-align: center; color: var(--amber-100); }
.why-panel .section-title-center { color: #fff; margin-bottom: 16px; }
.why-intro {
  text-align: center; max-width: 600px; margin: 0 auto 44px; font-size: 16.5px;
  line-height: 1.6; color: rgba(255,255,255,.72);
}
.why-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 32px; }
.why-card { text-align: center; }
.why-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%; margin-bottom: 16px;
  background: rgba(177,101,45,.22); color: var(--amber-100);
}
.why-icon svg { width: 26px; height: 26px; }
.why-card h3 { color: #fff; margin: 0 0 8px; font-size: 17px; letter-spacing: -.005em; }
.why-card p { margin: 0; color: rgba(255,255,255,.68); font-size: 15px; line-height: 1.6; }
.why-more { text-align: center; margin-top: 36px; font-size: 14.5px; }
.why-more a { color: var(--amber-100); font-weight: 600; text-decoration: none; }
.why-more a:hover { text-decoration: underline; }

@media (max-width: 780px) {
  .why-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------------------------------------------------------- trust strip -- */

.trust-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 32px; }
.trust-strip span {
  display: flex; align-items: center; gap: 8px;
  font-size: 14.5px; font-weight: 600; color: var(--ink-soft);
}
.trust-strip svg { width: 17px; height: 17px; flex: none; color: var(--brand-600); }

/* ------------------------------------------------------ product page -- */

.product-photo-row { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin: 12px 0; }
.product-photo-row img {
  display: block; width: 100%; height: auto; border-radius: 12px 90px 12px 90px;
  object-fit: cover; aspect-ratio: 5 / 4;
}
.product-photo-row .wrap-narrow { padding: 0; max-width: none; }

@media (max-width: 780px) {
  .product-photo-row { grid-template-columns: 1fr; gap: 24px; }
  .product-photo-row img { order: -1; max-width: 380px; margin: 0 auto; aspect-ratio: 4/3; }
}

/* -------------------------------------------------------- plain steps -- */

.steps-grid-plain { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 40px; }
.step-plain { text-align: left; }
.step-plain .step-index {
  width: 34px; height: 34px; border-radius: 50%; background: var(--brand-100); color: var(--brand-700);
  font-weight: 700; font-size: 15px; display: grid; place-items: center; margin-bottom: 14px;
}
.step-plain h3 { margin: 0 0 8px; font-size: 16.5px; }
.step-plain p { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.6; }

@media (max-width: 780px) { .steps-grid-plain { grid-template-columns: 1fr; gap: 28px; } }

/* ----------------------------------------------------- example preview -- */

.example-preview { max-width: 640px; margin: 0 auto; }
/* Direct-child combinator: over-ons.html uses plain <p> children of
   .example-preview (styled here), while index.html nests the same
   .insight-chain/.insight-standalone cards used on the real results page --
   a descendant selector would leak into those nested <p class="insight-card-text">
   and override their own styling. */
.example-preview > p {
  font-size: 16.5px; line-height: 1.6; color: var(--ink); margin: 0;
  padding: 18px 0; border-bottom: 1px solid var(--line);
}
.example-preview > p:last-child { border-bottom: none; }
.example-preview > p strong { color: var(--brand-700); }
.example-preview .insight-chain { margin-top: 16px; }
.example-note { text-align: center; margin-top: 20px !important; }

/* -------------------------------------------------------- closing cta -- */

.closing-cta { padding: 72px 0; text-align: center; background: var(--surface); }
.closing-cta h2 { font-size: 27px; margin: 0 0 10px; letter-spacing: -.01em; }
.closing-cta p { margin: 0 0 24px; color: var(--ink-soft); font-size: 16px; }
.closing-cta-btn { width: auto; padding: 14px 30px; }

/* ------------------------------------------------------- empty state -- */

.empty-state { text-align: center; padding: 48px 20px; }
.empty-state .empty-icon { font-size: 38px; margin-bottom: 10px; }
.empty-state .empty-icon svg { width: 40px; height: 40px; color: var(--ink-faint); }
.empty-state h3 { margin: 0 0 8px; font-size: 18px; }
.empty-state p { margin: 0 0 20px; color: var(--ink-soft); }

/* -------------------------------------------------------------- cards -- */

main { padding: 28px 0 48px; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  margin-bottom: 20px;
}
.card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.card h2 { font-size: 19px; margin: 0 0 10px; letter-spacing: -.01em; }
.card-head h2 { margin: 0; }

.step-number {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--brand-100); color: var(--brand-700);
  font-size: 13px; font-weight: 700;
  display: grid; place-items: center;
}
.optional { font-size: 12.5px; font-weight: 500; color: var(--ink-faint); }

.section-title { font-size: 19px; margin: 0 0 14px; }
.section-title.inline { display: inline; }
.subheading { font-size: 14px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-faint); margin: 22px 0 8px; }

.muted { color: var(--ink-soft); }
.small { font-size: 13.5px; }
.hidden { display: none !important; }

/* ---------------------------------------------------------- dropzone -- */

.dropzone {
  border: 2px dashed #c7cedb;
  border-radius: var(--radius);
  background: var(--brand-100);
  padding: 46px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.dropzone:hover, .dropzone:focus-visible { border-color: var(--brand-500); background: #dfe6f0; outline: none; }
.dropzone.dragging { border-color: var(--brand-600); background: #dfe6f0; }
.upload-icon { width: 40px; height: 40px; color: var(--brand-600); }
.dropzone-title { margin: 10px 0 2px; font-weight: 700; font-size: 17px; }
.dropzone-hint { margin: 0; color: var(--ink-soft); font-size: 13.5px; }

/* ------------------------------------------------------- /probeer page -- */
/* One focused task, so the column stays narrow -- but inside the same site
   chrome as every other public page, not a world of its own. */

.probeer-main { padding-top: 40px; padding-bottom: 60px; }

.probeer-sticky-cta {
  position: sticky; top: 12px; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: var(--brand-900); color: #fff; padding: 12px 18px; border-radius: var(--radius-sm);
  margin-bottom: 20px; box-shadow: var(--shadow);
}
.probeer-sticky-cta span { font-weight: 600; font-size: 14px; }

.probeer-dialog {
  border: none; border-radius: var(--radius); padding: 28px; max-width: 420px; width: calc(100% - 40px);
  box-shadow: 0 20px 50px rgba(20,17,12,.25); text-align: center;
}
.probeer-dialog::backdrop { background: rgba(14,21,36,.55); }
.probeer-dialog h3 { margin: 4px 0 8px; }
.probeer-dialog-actions { display: flex; gap: 10px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }

/* --------------------------------------------------- insight card grid -- */
/* Shared by /probeer (always .locked, generic example text) and the real
   resultaat page (never .locked, the golfer's own data) -- same block shape
   in both places, so unlocking an account changes the content, not the look. */

.insight-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px;
}
@media (max-width: 560px) { .insight-grid { grid-template-columns: 1fr; } }
.insight-card {
  position: relative; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--canvas); overflow: hidden;
}
.insight-card-label { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13.5px; margin-bottom: 8px; }
.insight-card-label svg { width: 15px; height: 15px; flex: none; }
.insight-card-text { margin: 0; font-size: 14px; color: var(--ink-soft); line-height: 1.55; }
.insight-card.locked .insight-card-text { filter: blur(3.5px); user-select: none; }
.insight-card-lock {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(247, 245, 241, .3);
}
.insight-card-lock svg { width: 20px; height: 20px; color: var(--ink-faint); }

/* Standalone: the one positive point, kept visually separate from the
   improvement narrative below it. */
.insight-standalone {
  position: relative; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--canvas); overflow: hidden; margin-bottom: 16px;
}
.insight-standalone .insight-card-text { margin: 0; font-size: 14px; color: var(--ink-soft); line-height: 1.55; }
.insight-standalone.locked .insight-card-text { filter: blur(3.5px); user-select: none; }

/* Chain: the improvement, its reason, and its drill are one story, not three
   unrelated findings -- numbered steps inside a single bordered container
   instead of three equal, disconnected tiles. */
.insight-chain {
  position: relative; border: 1px solid var(--line); border-radius: var(--radius-sm);
  overflow: hidden; background: var(--canvas);
}
.insight-chain-step { display: flex; gap: 14px; padding: 16px; }
.insight-chain-step + .insight-chain-step { border-top: 1px dashed var(--line); }
.insight-chain-number {
  flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--brand-600); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12.5px;
  margin-top: 1px;
}
.insight-chain-body { min-width: 0; flex: 1 1 auto; }
.insight-chain.locked .insight-card-text { filter: blur(3.5px); user-select: none; }

/* The metric-driven insight image lives inside step 1, right under the
   observation it illustrates -- not in a separate tab -- so the claim and
   its evidence read as one thing. */
.insight-image { margin: 12px 0 0; }
.insight-image img { width: 100%; border-radius: 9px; border: 1px solid var(--line); display: block; cursor: zoom-in; }
.insight-image figcaption { font-size: 12.5px; color: var(--ink-faint); margin-top: 6px; }

.tips { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.tips summary { cursor: pointer; font-weight: 600; font-size: 14.5px; color: var(--brand-700); }
.tips ul { margin: 10px 0 0; padding-left: 20px; color: var(--ink-soft); font-size: 14.5px; }
.tips li { margin-bottom: 6px; }

/* ------------------------------------------------------- upload step -- */

/* ---------------------------------------------------------- preview -- */

.preview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-top: 20px; }
.preview video { width: 100%; max-height: 340px; border-radius: 10px; background: #000; }
.preview-meta h3 { margin: 0 0 8px; font-size: 15px; word-break: break-all; }
.stats { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 0 0 12px; font-size: 14px; }
.stats dt { color: var(--ink-faint); }
.stats dd { margin: 0; }
.notes { font-size: 13.5px; color: var(--amber-600); }
.notes p { margin: 0 0 6px; }

/* -------------------------------------------------- language picker -- */
/* No flags: a flag is a country, not a language (which French flag serves a
   Belgian?), and a screen reader announces it as "flag of France". A globe plus
   the language's own name in its own script is both clearer and readable. */

.lang-picker { position: relative; flex: none; }
.lang-picker-btn {
  display: flex; align-items: center; gap: 6px;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink-soft);
  background: transparent; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 7px 10px; cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.lang-picker-btn:hover { background: var(--brand-100); color: var(--brand-700); border-color: var(--brand-100); }
.lang-picker-btn:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 1px; }
.lang-globe { width: 16px; height: 16px; flex: none; }
.lang-caret { width: 11px; height: 11px; flex: none; transition: transform .15s; }
.lang-picker-btn[aria-expanded="true"] .lang-caret { transform: rotate(180deg); }

.lang-picker-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  min-width: 176px; margin: 0; padding: 6px; list-style: none;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); box-shadow: var(--shadow);
}
.lang-picker-menu[hidden] { display: none; }
.lang-picker-menu li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 10px; border-radius: 8px; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap;
}
.lang-picker-menu li:hover { background: var(--brand-100); color: var(--brand-700); }
.lang-picker-menu li:focus-visible { outline: 2px solid var(--brand-500); outline-offset: -2px; }
.lang-picker-menu li[aria-selected="true"] { color: var(--brand-700); }
.lang-picker-menu li[aria-selected="true"]::after { content: "✓"; font-size: 13px; }

/* On the dark app sidebar, and opening upward because it sits at the bottom
   of a full-height column. */
.lang-picker--on-dark .lang-picker-btn {
  color: #b7c2d6; border-color: rgba(255, 255, 255, .14); width: 100%;
}
.lang-picker--on-dark .lang-picker-btn:hover {
  background: rgba(255, 255, 255, .07); color: #fff; border-color: rgba(255, 255, 255, .22);
}
.lang-picker--up .lang-picker-menu { top: auto; bottom: calc(100% + 6px); left: 0; right: auto; }

/* The CTA loses its long form before the picker starts squeezing the nav. */
.cta-short { display: none; }
@media (max-width: 560px) {
  .cta-long { display: none; }
  .cta-short { display: inline; }
}
@media (max-width: 420px) {
  .lang-picker-btn { padding: 7px 8px; gap: 4px; }
}

/* ------------------------------------------------------------ forms -- */

.grid { display: grid; gap: 14px; }
.form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 14px; }
.form-grid .span-2 { grid-column: 1 / -1; }
label { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }
input[type="text"], input[type="number"], select {
  width: 100%; margin-top: 5px; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: 9px;
  font: inherit; font-size: 15px; font-weight: 400; color: var(--ink);
  background: #fff;
}
input:focus, select:focus { outline: 2px solid var(--brand-500); outline-offset: 1px; border-color: transparent; }

.field-block { display: flex; flex-direction: column; gap: 6px; }
.field-block-label { font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }

/* A checkbox that reads as one line with its label ("Ik heb hier les over
   gehad"), instead of the label sitting above it like every other field. */
.inline-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.inline-check input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--brand-600); }

.segmented { display: flex; gap: 10px; flex-wrap: wrap; }
.segmented-option { position: relative; flex: 1; min-width: 170px; }
.segmented-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.segmented-option span {
  display: block; padding: 9px 14px; border: 1px solid var(--line); border-radius: 10px;
  font-size: 14.5px; font-weight: 600; color: var(--ink); cursor: pointer; text-align: center;
  transition: border-color .15s, background .15s;
}
.segmented-option span small { display: block; font-weight: 400; color: var(--ink-faint); font-size: 12px; margin-top: 2px; }
.segmented-option input:checked + span { border-color: var(--brand-600); background: var(--brand-100); color: var(--brand-700); }
.segmented-option input:focus-visible + span { outline: 2px solid var(--brand-500); outline-offset: 1px; }

.club-picker { display: flex; gap: 8px; margin-top: 5px; }
.club-picker select { flex: 1; margin-top: 0; }

.flight-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 5px; }
.flight-option { position: relative; }
.flight-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.flight-option span {
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 2px;
  border: 1px solid var(--line); border-radius: 9px; cursor: pointer;
  font-size: 11px; font-weight: 600; color: var(--ink-soft); text-align: center;
}
.flight-option svg { width: 20px; height: 20px; color: var(--ink-faint); }
.flight-option input:checked + span { border-color: var(--brand-600); background: var(--brand-100); color: var(--brand-700); }
.flight-option input:checked + span svg { color: var(--brand-600); }
.flight-option input:focus-visible + span { outline: 2px solid var(--brand-500); outline-offset: 1px; }

/* --------------------------------------------------------- profile -- */

.history-list { margin-top: 10px; display: grid; gap: 8px; }
.history-entry {
  display: flex; gap: 10px; align-items: baseline; font-size: 14px;
  padding: 8px 10px; border-radius: 8px; background: var(--canvas);
}
.history-date { flex: none; font-weight: 600; color: var(--ink-faint); font-size: 12.5px; }
.history-detail { color: var(--ink-soft); }

/* ---------------------------------------------------------- buttons -- */

.btn {
  font: inherit; font-weight: 600; border-radius: 10px; border: 1px solid transparent;
  padding: 10px 18px; cursor: pointer; text-decoration: none; display: inline-block;
  transition: background .15s, box-shadow .15s, transform .1s ease;
}
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn:active:not(:disabled) { transform: scale(0.98); }
.btn-primary { background: var(--brand-600); color: #fff; box-shadow: 0 1px 2px rgba(20,17,12,.14); }
.btn-primary:hover:not(:disabled) { background: var(--brand-700); }
.btn-large { font-size: 16.5px; padding: 13px 26px; width: 100%; }
.btn-secondary { background: var(--brand-100); color: var(--brand-700); }
.btn-secondary:hover { background: #dbe2ec; }
.btn-ghost { background: transparent; color: var(--brand-700); border-color: var(--line); }
.btn-ghost:hover { background: var(--brand-100); }
.btn-small { padding: 6px 12px; font-size: 13.5px; }
.btn-danger-ghost { background: transparent; color: var(--red-600); border-color: #f0c8c4; }
.btn-danger-ghost:hover { background: var(--red-100); }

/* --------------------------------------------------------- progress -- */

.progress-panel { margin-top: 16px; }
.progress-track { height: 8px; border-radius: 999px; background: var(--brand-100); overflow: hidden; }
.progress-bar { height: 100%; width: 0; background: var(--brand-500); transition: width .35s ease; }
.progress-step { margin: 8px 0 2px; font-weight: 600; font-size: 14.5px; }

/* ----------------------------------------------------------- alerts -- */

.alert { padding: 12px 14px; border-radius: 10px; margin-top: 14px; font-size: 14.5px; }
.alert-error { background: var(--red-100); color: var(--red-600); border: 1px solid #f2cdc9; }
.alert-warn { background: var(--amber-100); color: #7a4a03; border: 1px solid #f0dcb6; }

/* ---------------------------------------------------------- summary -- */

.summary-card { border-left: 4px solid var(--brand-600); }
.summary-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.summary-text { font-size: 17px; line-height: 1.65; margin: 6px 0 14px; }
.confidence {
  font-size: 13px; font-weight: 600; color: var(--ink-soft); white-space: nowrap;
  background: var(--canvas); border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px;
}
.confidence .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-size: 12.5px; font-weight: 600; padding: 4px 11px; border-radius: 999px;
  background: var(--brand-100); color: var(--brand-700);
}
.chip.warn { background: var(--amber-100); color: var(--amber-600); }

/* -------------------------------------------------------- highlights -- */

.highlight-card { padding: 8px 24px 4px; }
.highlight-block {
  padding: 28px 0; border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 6px;
}
.highlight-block:last-child { border-bottom: none; }
.highlight-label {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
}
.highlight-label svg { width: 15px; height: 15px; flex: none; }
/* ================================================== resultatenpagina: "Atelier" ==
   Het gekozen ontwerp (zie docs/ontwerp-resultatenpagina-concepten.md): één
   groot getal, veel lucht, haarlijnen in plaats van kaders. Status komt uit
   typografie en witruimte, niet uit chrome -- daarom staan hier bijna geen
   randen en schaduwen, en is de enige echte kleuraccent het goud van de
   scoreboog en het groen van het sterke punt. */

.atelier { max-width: 760px; margin: 0 auto; padding-bottom: 60px; }

/* -- hero: het beeld van je eigen swing draagt de bovenkant ------------- */
.at-hero {
  position: relative; border-radius: 18px; overflow: hidden; margin: 8px 0 20px;
  background: linear-gradient(150deg, #123B2D, #0B2A20 55%, #08211A);
  min-height: 210px; display: flex; align-items: flex-end;
}
.at-hero-media { position: absolute; inset: 0; }
.at-hero-media img { width: 100%; height: 100%; object-fit: cover; opacity: .34; }
.at-hero-copy { position: relative; padding: 28px 30px 26px; width: 100%; }
.at-hero-meta {
  margin: 0 0 10px; font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
  font-weight: 700; color: rgba(232, 237, 233, .68);
}
.at-hero-summary {
  margin: 0; font-family: var(--font-heading); font-size: clamp(19px, 2.7vw, 24px);
  line-height: 1.34; letter-spacing: -.02em; font-weight: 600; color: #F4F7F4;
  max-width: 30ch; text-wrap: balance;
}

/* -- de score: haarlijnboog, geen meter -------------------------------- */
.at-score {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding: 26px 0 28px; border-bottom: 1px solid var(--line);
}
.at-score-ring { position: relative; width: 112px; height: 112px; flex: none; }
.at-score-ring svg { width: 112px; height: 112px; transform: rotate(-90deg); }
.at-ring-track { fill: none; stroke: var(--line); stroke-width: 1.5; }
.at-ring-fill {
  fill: none; stroke: var(--amber-600); stroke-width: 1.5; stroke-linecap: round;
  transition: stroke-dashoffset 800ms cubic-bezier(.22, .61, .36, 1);
}
.at-score-value {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-size: 36px; font-weight: 700;
  letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums;
}
.at-score-copy { flex: 1; min-width: 200px; }
.at-score-explain { margin: 4px 0 0; color: var(--ink-soft); font-size: 14.5px; max-width: 40ch; }
.at-score-delta { margin-left: auto; text-align: right; }
.at-delta {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 11px; border-radius: 999px;
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.at-delta-up { background: var(--brand-100); color: var(--brand-700); }
.at-delta-down, .at-delta-flat { background: rgba(30, 30, 30, .06); color: var(--ink-faint); }
.at-delta-caption { display: block; margin-top: 6px; font-size: 11.5px; color: var(--ink-faint); }

/* -- momentum: reeks en mijlpaal, klein gehouden ----------------------- */
.at-momentum { padding: 20px 0 22px; border-bottom: 1px solid var(--line); }
.at-momentum-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.at-momentum-streak { font-size: 14px; font-weight: 600; color: var(--ink); }
.at-momentum-count { font-size: 12.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.at-momentum-track {
  height: 5px; background: var(--line); border-radius: 3px; overflow: hidden; margin-top: 10px;
}
.at-momentum-fill {
  height: 100%; border-radius: 3px; width: 0;
  background: linear-gradient(90deg, var(--brand-600), var(--amber-600));
  transition: width 700ms cubic-bezier(.22, .61, .36, 1);
}
.at-momentum-note { margin: 9px 0 0; font-size: 12.5px; color: var(--ink-faint); }

/* -- secties: haarlijnen in plaats van kaarten ------------------------- */
.at-section, .at-drill, .at-note { padding: 28px 0; border-bottom: 1px solid var(--line); }
.at-label {
  margin: 0 0 8px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-faint);
}
.at-label-good { color: var(--brand-700); }
.at-label-work { color: var(--amber-600); }
.at-sub-label {
  margin: 18px 0 5px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-faint);
}
.at-body { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--ink); max-width: 56ch; }
.at-body-soft { color: var(--ink-soft); font-size: 15px; }
.at-phase { margin: 8px 0 0; font-size: 13px; color: var(--ink-faint); }
.at-goal-note { margin: 10px 0 0; font-size: 13.5px; color: var(--brand-700); }
.at-detail { margin: 14px 0 0; display: grid; gap: 10px; }
.at-detail dt {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-faint); margin-bottom: 3px;
}
.at-detail dd { margin: 0; color: var(--ink-soft); font-size: 14.5px; }
.at-insight { margin: 18px 0 0; }
.at-insight img {
  width: 100%; max-width: 460px; border-radius: 11px;
  border: 1px solid var(--line); display: block; cursor: zoom-in;
}
.at-insight figcaption { margin-top: 7px; font-size: 12.5px; color: var(--ink-faint); }

/* -- het gevoel: de enige plek waar de typografie groot mag worden ----- */
.at-feel { padding: 40px 0; border-bottom: 1px solid var(--line); text-align: center; }
.at-feel .at-label { text-align: center; }
.at-quote {
  margin: 10px auto 0; padding: 0; border: none; max-width: 34ch;
  font-family: var(--font-heading); font-size: clamp(19px, 2.6vw, 23px);
  line-height: 1.48; letter-spacing: -.015em; color: var(--ink); font-weight: 500;
}
.at-quote::before { content: "\201C"; }
.at-quote::after { content: "\201D"; }
.at-quote:empty { display: none; }

/* -- zie het zelf ------------------------------------------------------ */
.at-evidence { padding: 30px 0; border-bottom: 1px solid var(--line); }
.at-heading {
  font-family: var(--font-heading); font-size: 19px; font-weight: 600;
  letter-spacing: -.015em; margin: 0 0 8px; color: var(--ink);
}

/* -- lab: het analytische deel, dichtgeklapt --------------------------- */
.at-lab { padding: 8px 0; border-bottom: 1px solid var(--line); }
.at-lab > summary {
  cursor: pointer; padding: 20px 0; display: flex; align-items: baseline;
  justify-content: space-between; gap: 12px; list-style: none;
}
.at-lab > summary::-webkit-details-marker { display: none; }
.at-lab > summary::after {
  content: ""; width: 8px; height: 8px; flex: none; margin-left: auto;
  border-right: 1.5px solid var(--ink-faint); border-bottom: 1.5px solid var(--ink-faint);
  transform: rotate(45deg); transition: transform 200ms ease;
}
.at-lab[open] > summary::after { transform: rotate(-135deg); }
.at-lab > summary .at-heading { margin: 0; }
.at-lab-count { font-size: 12.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.at-lab-body { padding: 4px 0 26px; }
.at-metric-grid {
  display: grid; gap: 9px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.at-metric {
  padding: 12px 14px; background: var(--canvas); border-radius: 10px;
  border-top: 2px solid var(--line); display: flex; flex-direction: column; gap: 4px;
}
.at-metric.is-high { border-top-color: var(--brand-600); }
.at-metric.is-low { border-top-color: var(--amber-600); }
.at-metric.is-unmeasurable { opacity: .6; }
.at-metric-label { font-size: 11.5px; color: var(--ink-faint); font-weight: 600; line-height: 1.35; }
.at-metric-value {
  font-family: var(--font-heading); font-size: 16px; font-weight: 700;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.at-metric.is-unmeasurable .at-metric-value {
  font-family: var(--font-body); font-size: 12px; font-weight: 400; color: var(--ink-faint);
}
.at-lab-limits { margin-top: 24px; }

@media (max-width: 640px) {
  .at-hero-copy { padding: 22px 20px 20px; }
  .at-score { gap: 16px; }
  .at-score-delta { margin-left: 0; text-align: left; width: 100%; }
  .at-feel { padding: 32px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .at-ring-fill, .at-momentum-fill { transition: none; }
}

/* ============================================== resultatenpagina: designvergelijking ==
   Drie ontwerpvarianten van de resultatenpagina (/app/design/a|b|c) staan naast de
   normale /app/nieuwe-analyse/resultaat, zodat Lars ze kan vergelijken voordat er een
   definitieve keuze valt -- zie docs/ontwerp-resultatenpagina-concepten.md. Alle vier
   delen deze .design-switch-bar en de .rp-* klassen hieronder, zodat er geen hex-kleuren
   buiten het bestaande kleursysteem om sluipen en de vier varianten optisch bij elkaar
   blijven horen ondanks hun andere opbouw. */

.design-switch-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 16px 0 28px;
}
.design-switch-label { font-size: 13px; color: var(--ink-faint); margin-right: 2px; }
.design-switch-link {
  padding: 5px 13px; border-radius: 999px; font-size: 13px; font-weight: 600;
  text-decoration: none; color: var(--ink-soft); background: var(--canvas);
  border: 1px solid var(--line);
}
.design-switch-link:hover { border-color: var(--brand-500); color: var(--brand-700); }
.design-switch-link.active {
  background: var(--brand-100); color: var(--brand-900); border-color: transparent;
}

.rp-shell { max-width: 780px; margin: 0 auto; padding: 8px 0 80px; }
.rp-shell--wide { max-width: 1100px; }
.rp-loading { text-align: center; padding: 80px 0; color: var(--ink-faint); }

.rp-meta { color: var(--ink-faint); font-size: 13.5px; margin-bottom: 8px; }

.rp-card {
  background: var(--surface); border-radius: var(--radius); padding: 24px;
  box-shadow: var(--shadow); margin-bottom: 20px;
}
.rp-card-good { border-left: 4px solid var(--brand-600); }
.rp-card-improve { border-left: 4px solid var(--amber-600); }
.rp-card-label {
  font-size: 12px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
  margin-bottom: 8px; display: flex; align-items: center; gap: 6px;
}
.rp-card-good .rp-card-label { color: var(--brand-700); }
.rp-card-improve .rp-card-label { color: var(--amber-600); }
.rp-card-title { font-family: var(--font-heading); font-size: 18px; font-weight: 600; margin: 0 0 8px; color: var(--ink); }
.rp-card-text { color: var(--ink-soft); line-height: 1.6; margin: 0 0 14px; font-size: 15px; }
.rp-card-text:last-child { margin-bottom: 0; }
.rp-card-frame { width: 100%; border-radius: 10px; margin: 10px 0; border: 1px solid var(--line); }

.rp-confidence-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-faint); }
.rp-confidence-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }

.rp-frames-strip { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 16px; margin-bottom: 8px; }
.rp-frames-strip img {
  width: 180px; height: 118px; object-fit: cover; border-radius: 10px;
  border: 1px solid var(--line); cursor: zoom-in; flex: none;
}

.rp-limitations {
  color: var(--ink-faint); font-size: 13.5px; padding: 16px 0 0;
  border-top: 1px solid var(--line); margin-top: 8px;
}
.rp-limitations h3 { font-size: 14px; font-weight: 600; margin: 0 0 8px; color: var(--ink-soft); }
.rp-limitations li { margin-bottom: 4px; }

.rp-actions { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }

/* -- optie B: De Scorekaart -- */
.rp-compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 28px; }
.rp-compare-card { background: var(--surface); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); text-align: center; }
.rp-compare-card img { width: 100%; max-height: 280px; object-fit: cover; border-radius: 9px; margin-bottom: 8px; }
.rp-compare-card-empty {
  height: 180px; background: var(--canvas); border-radius: 9px; display: flex;
  align-items: center; justify-content: center; color: var(--ink-faint); font-size: 13px;
}
.rp-compare-label { font-size: 13px; color: var(--ink-faint); }
@media (max-width: 720px) { .rp-compare-grid { grid-template-columns: 1fr; } }

.rp-metric-group { margin-bottom: 8px; }
.rp-metric-group-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); margin: 20px 0 6px; }
.rp-metric-group-title:first-child { margin-top: 0; }
.rp-metric-row { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.rp-metric-name { width: 150px; flex: none; font-size: 14px; color: var(--ink); }
.rp-metric-bar { flex: 1; height: 8px; background: var(--canvas); border-radius: 5px; overflow: hidden; }
.rp-metric-fill { height: 100%; border-radius: 5px; background: var(--brand-500); transition: width 500ms ease; }
.rp-metric-fill.not-measurable { background: var(--line); }
.rp-metric-value { width: 130px; flex: none; text-align: right; font-size: 12.5px; color: var(--ink-faint); }
.rp-metric-caveat { font-size: 12.5px; color: var(--ink-faint); margin: 10px 0 0; }

.rp-trend { margin: 28px 0; background: var(--surface); border-radius: var(--radius); padding: 20px 24px; box-shadow: var(--shadow); }
.rp-trend h3 { font-size: 15px; font-weight: 600; margin: 0 0 4px; }
.rp-trend-caption { font-size: 12.5px; color: var(--ink-faint); margin: 0 0 16px; }
.rp-trend-bar { display: flex; align-items: flex-end; gap: 10px; height: 100px; }
.rp-trend-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 0; }
.rp-trend-fill { width: 100%; border-radius: 6px 6px 0 0; background: var(--brand-500); transition: height 500ms ease; }
.rp-trend-fill.current { background: var(--brand-700); }
.rp-trend-value { font-size: 11.5px; font-weight: 600; color: var(--ink-soft); margin-bottom: 4px; }
.rp-trend-date { font-size: 10.5px; color: var(--ink-faint); margin-top: 5px; white-space: nowrap; }
.rp-trend-delta { font-size: 13px; font-weight: 600; margin-left: 8px; }
.rp-trend-delta.up { color: var(--brand-700); }
.rp-trend-delta.down { color: var(--ink-faint); }

/* -- optie C: De Werkbank -- */
.rp-status-row {
  display: flex; align-items: center; gap: 10px; padding: 14px 0 22px; font-size: 15px; color: var(--ink);
}
.rp-status-icon { flex: none; width: 22px; height: 22px; color: var(--brand-600); }
.rp-status-row.is-new .rp-status-icon { color: var(--ink-faint); }
.rp-status-row.is-resolved .rp-status-icon { color: var(--amber-600); }

.rp-ring-wrap { display: flex; justify-content: center; margin-bottom: 8px; }
.rp-ring { position: relative; width: 190px; height: 190px; }
.rp-ring svg { transform: rotate(-90deg); }
.rp-ring-track { fill: none; stroke: var(--line); }
.rp-ring-fill { fill: none; stroke: var(--brand-600); stroke-linecap: round; transition: stroke-dashoffset 700ms ease; }
.rp-ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.rp-ring-score { font-family: var(--font-heading); font-size: 2.6rem; font-weight: 700; color: var(--ink); line-height: 1; }
.rp-ring-label { font-size: 12.5px; color: var(--ink-faint); margin-top: 4px; text-align: center; max-width: 130px; }

.rp-timeline { margin: 24px 0; padding: 20px 24px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); text-align: left; }
.rp-timeline h3 { font-size: 14px; font-weight: 600; margin: 0 0 14px; }
.rp-timeline-dots { display: flex; gap: 10px; align-items: center; }
.rp-timeline-dot {
  width: 30px; height: 30px; border-radius: 50%; background: var(--canvas); flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--ink-faint);
  border: 2px solid transparent;
}
.rp-timeline-dot.current { background: var(--brand-600); color: #fff; }
.rp-timeline-dot.same-topic { border-color: var(--brand-500); }
.rp-timeline-line { flex: 1; height: 2px; background: var(--line); min-width: 8px; }
.rp-timeline-note { font-size: 13.5px; color: var(--ink-soft); margin-top: 14px; }
.rp-timeline-note.is-resolved { color: var(--brand-700); font-weight: 600; }

.next-action {
  display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px;
  background: var(--brand-100); border-radius: var(--radius); margin-bottom: 20px;
}
.next-action svg { flex: none; width: 20px; height: 20px; color: var(--brand-700); margin-top: 2px; }
.next-action p { margin: 0; color: var(--brand-700); font-size: 14.5px; line-height: 1.55; }
.next-action strong { color: var(--ink); }
.highlight-block.good .highlight-label { color: var(--brand-600); }
.highlight-block.work .highlight-label { color: var(--amber-600); }
.highlight-block.feel .highlight-label { color: var(--ink-faint); }

.highlight-lead { font-size: 23px; line-height: 1.4; margin: 0; letter-spacing: -.01em; font-weight: 500; }
.highlight-sub { font-size: 16px; line-height: 1.55; margin: 0; color: var(--ink-soft); }
.highlight-goal-note {
  font-size: 13.5px; line-height: 1.5; margin: 4px 0 0; padding: 8px 12px;
  border-radius: 8px; background: var(--amber-100); color: #7a4a03;
}
.highlight-goal-note.matched { background: var(--brand-100); color: var(--brand-700); }
.highlight-feel { font-size: 18px; line-height: 1.55; margin: 0; color: var(--ink-soft); font-style: italic; }

.highlight-solo { border-left: 4px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.highlight-solo.good { border-left-color: var(--brand-500); }
.highlight-solo.work { border-left-color: var(--amber-600); }
.highlight-solo.why { border-left-color: var(--ink-faint); }
.highlight-solo.feel { border-left-color: var(--brand-700); background: var(--brand-100); }
.highlight-solo.progress { border-left-color: var(--ink-faint); }
.highlight-solo.trial-upsell { border-left-color: var(--amber-600); background: var(--amber-100); }
/* The coach's own point. Grey until we could actually check it -- the colour
   is a claim about evidence, so it is not given away for free. */
.highlight-solo.lesson { border-left-color: var(--ink-faint); }
.highlight-solo.lesson.checked { border-left-color: var(--brand-600); }
.lesson-verdict {
  align-self: flex-start; font-size: 12.5px; font-weight: 600; padding: 3px 9px;
  border-radius: 999px; background: var(--canvas); color: var(--ink-faint);
}
.lesson-verdict.checked { background: var(--brand-100); color: var(--brand-700); }
.highlight-solo.good .highlight-label { color: var(--brand-600); }
.highlight-solo.work .highlight-label { color: var(--amber-600); }

/* --------------------------------------------------------- evidence -- */

.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin: 16px 0 18px; }
.tab {
  font: inherit; font-size: 14.5px; font-weight: 600; background: none; border: none;
  padding: 9px 14px; cursor: pointer; color: var(--ink-faint);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab.active { color: var(--brand-700); border-bottom-color: var(--brand-600); }

.video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.video-grid figure { margin: 0; }
.video-grid video { width: 100%; border-radius: 10px; background: #000; }
.video-grid figcaption { font-size: 13px; color: var(--ink-faint); margin-top: 6px; }

.frame-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.frame-grid figure { margin: 0; }
.frame-grid img { width: 100%; border-radius: 9px; border: 1px solid var(--line); display: block; cursor: zoom-in; }
.frame-grid figcaption { font-size: 12.5px; margin-top: 5px; }
.frame-grid .fc-title { font-weight: 600; display: block; }
.frame-grid .fc-meta { color: var(--ink-faint); font-size: 11.5px; }
.frame-grid .approx { color: var(--amber-600); }

.compare-grid { display: grid; gap: 18px; }
.compare-grid figure { margin: 0; }
.compare-grid img { width: 100%; border-radius: 10px; border: 1px solid var(--line); display: block; }
.compare-grid figcaption { font-size: 13.5px; color: var(--ink-soft); margin-top: 6px; }

.legend { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-top: 20px;
  padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-soft); }
.legend span { display: flex; align-items: center; gap: 7px; }
.legend i { width: 15px; height: 3px; border-radius: 2px; display: inline-block; }

/* ----------------------------------------------------------- limits -- */

.limits { margin: 0; padding-left: 20px; color: var(--ink-soft); font-size: 14.5px; }
.limits li { margin-bottom: 6px; }

/* --------------------------------------------------------- advanced -- */

.advanced summary { cursor: pointer; list-style: none; }
.advanced summary::-webkit-details-marker { display: none; }
.advanced summary::before { content: "▸ "; color: var(--ink-faint); }
.advanced[open] summary::before { content: "▾ "; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--ink-faint); font-weight: 600; white-space: nowrap; }
.rel-high { color: var(--brand-600); font-weight: 600; }
.rel-medium { color: var(--amber-600); font-weight: 600; }
.rel-low, .rel-not_measurable { color: var(--ink-faint); }

.actions-card { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* ----------------------------------------------------------- footer -- */

.site-footer { border-top: 1px solid var(--line); background: var(--surface); padding: 48px 0 0; margin-top: 48px; }
.footer-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 32px;
  padding-bottom: 36px;
}
.footer-brand .footer-logo {
  display: flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none;
  font-weight: 700; font-size: 17px; letter-spacing: -.01em; margin-bottom: 10px;
}
.footer-brand .footer-logo svg { width: 24px; height: 24px; flex: none; }
.footer-brand p { margin: 0; max-width: 34ch; }
.footer-col h3 {
  font-size: 12.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-faint); margin: 0 0 12px; font-weight: 700;
}
.footer-col { display: flex; flex-direction: column; gap: 9px; }
.footer-col a { color: var(--ink-soft); text-decoration: none; font-size: 14.5px; }
.footer-col a:hover { color: var(--brand-600); text-decoration: underline; }
.footer-privacy p { margin: 0; line-height: 1.55; }
.footer-bottom {
  border-top: 1px solid var(--line); padding: 18px 0 22px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
}
.footer-bottom p { margin: 0; }
.footer-legal-links { display: flex; gap: 16px; flex-wrap: wrap; }
.footer-legal-links a { color: var(--ink-faint); text-decoration: none; font-size: 13px; }
.footer-legal-links a:hover { color: var(--ink-soft); text-decoration: underline; }

@media (max-width: 780px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; gap: 26px; }
}

/* -------------------------------------------------- analysis progress -- */

.step-progress { display: grid; gap: 4px; margin: 22px 0; }
.progress-step-row {
  display: flex; align-items: center; gap: 14px; padding: 12px 4px;
  color: var(--ink-faint); font-size: 15px; font-weight: 600;
}
.progress-step-row .step-dot {
  flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line);
  display: grid; place-items: center; font-size: 13px; background: #fff;
}
.progress-step-row.done { color: var(--ink); }
.progress-step-row.done .step-dot { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.progress-step-row.active { color: var(--ink); }
.progress-step-row.active .step-dot {
  border-color: var(--brand-600); color: var(--brand-700);
  animation: pulse-ring 1.4s ease-in-out infinite;
}
@keyframes pulse-ring {
  0%, 100% { box-shadow: 0 0 0 0 rgba(36,64,107,.25); }
  50% { box-shadow: 0 0 0 5px rgba(36,64,107,.12); }
}

.analysis-explainer {
  background: var(--brand-100); color: var(--brand-700); border-radius: 10px;
  padding: 12px 14px; font-size: 14.5px; margin-top: 10px;
}

/* -------------------------------------------------------- form pages -- */

.form-page-grid { display: grid; gap: 14px; max-width: 520px; }
.form-page-grid label { margin-top: 4px; }
.field-hint { margin: 4px 0 0; font-size: 13px; color: var(--ink-faint); }

.auth-tabs { display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.auth-tab {
  font: inherit; font-size: 14.5px; font-weight: 600; background: none; border: none;
  padding: 9px 4px; margin-right: 18px; cursor: pointer; color: var(--ink-faint);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.auth-tab.active { color: var(--brand-700); border-bottom-color: var(--brand-600); }

.link-btn {
  font: inherit; background: none; border: none; padding: 0; cursor: pointer;
  color: var(--brand-700); font-size: 13px; font-weight: 600; text-decoration: underline;
}

/* ---------------------------------------------------------- pricing -- */

.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.price-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 26px 22px;
}
.price-card.highlight { border-color: var(--brand-600); box-shadow: 0 0 0 2px var(--brand-500), var(--shadow); }
.price-card h3 { margin: 0 0 4px; font-size: 17px; }
.price-card .price { font-size: 30px; font-weight: 700; margin: 6px 0 14px; }
.price-card .price small { font-size: 14px; font-weight: 500; color: var(--ink-faint); }
.price-card .price.price-tbd { font-size: 19px; font-weight: 600; color: var(--ink-faint); }
.price-card ul { margin: 0 0 18px; padding-left: 18px; color: var(--ink-soft); font-size: 14.5px; }
.price-card li { margin-bottom: 6px; }

/* --------------------------------------------------------- analyses -- */

.analysis-card { display: flex; gap: 14px; align-items: flex-start; }
.analysis-select { flex: none; padding-top: 3px; cursor: pointer; }
.analysis-select input { width: 18px; height: 18px; accent-color: var(--brand-600); cursor: pointer; }
.analysis-body { flex: 1; min-width: 0; }
.analysis-card .meta { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 6px 0 10px;
  font-size: 13px; color: var(--ink-faint); }
.analysis-card h3 { margin: 0 0 2px; font-size: 16.5px; }
.analysis-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.analysis-card-full .analysis-card { padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }

.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;
}

.compare-bar {
  display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; padding: 12px 16px;
  background: var(--brand-100); border-radius: var(--radius); margin-bottom: 16px;
}
.compare-bar .muted { margin-right: auto; }

.compare-table-wrap { overflow-x: auto; }
.compare-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 10px; }
.compare-table th, .compare-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare-table thead th { color: var(--ink-faint); font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; }
.compare-table tbody th { color: var(--ink-soft); font-weight: 600; white-space: nowrap; width: 160px; }

.footer-links { margin: 8px 0 0; font-size: 13px; }
.footer-links a { color: var(--ink-soft); }

/* ------------------------------------------------------------ legal -- */

.legal-page .card { max-width: 72ch; }
.legal-page .card + .card { margin-top: 4px; }
.legal-page p { color: var(--ink-soft); }
.legal-page code {
  background: var(--canvas); border: 1px solid var(--line); border-radius: 5px;
  padding: 1px 6px; font-size: 13px;
}

/* --------------------------------------------------------- lightbox -- */

.lightbox {
  position: fixed; inset: 0; background: rgba(16, 14, 10, .88);
  display: grid; place-items: center; padding: 24px; z-index: 50; cursor: zoom-out;
}
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 10px; }
.lightbox-close {
  position: fixed;
  top: 20px;
  right: 20px;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid rgba(247, 247, 245, .5);
  border-radius: 50%;
  background: var(--color-off-white);
  color: var(--color-graphite);
  cursor: pointer;
  font: 400 1.7rem/1 var(--font-body);
}

/* ------------------------------------------------------ responsive -- */

@media (max-width: 720px) {
  .preview { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .card { padding: 18px; }
  .cta-band { margin: 0; border-radius: 0; }
  .pricing-grid { grid-template-columns: 1fr; }
  .section { padding: 40px 0; }
  .section-head h2 { font-size: 23px; }
}

@media (max-width: 560px) {
  .analysis-card { flex-wrap: wrap; }
  .analysis-side {
    flex-direction: row; align-items: center; justify-content: space-between;
    width: 100%; margin-left: 32px; margin-top: 10px;
  }
  .actions-card { flex-direction: column; align-items: stretch; }
  .actions-card .btn { width: 100%; text-align: center; }
  .compare-table tbody th { width: 120px; }
}

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

/* ===========================================================================
   Credits: the sidebar balance, the product picker, and the ledger view.
   =========================================================================== */

/* Sidebar balance. Shares the sidebar link shape so it reads as part of the
   nav, but is not itself a destination-looking item. */
.app-sidebar-credits {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px;
  color: #b7c2d6; text-decoration: none; font-size: 14.5px; font-weight: 600;
  transition: background .15s, color .15s;
}
.app-sidebar-credits svg { width: 19px; height: 19px; flex: none; }
.app-sidebar-credits:hover { background: rgba(255,255,255,.07); color: #fff; }
.app-sidebar-credits > span:first-of-type { flex: 1; }

.credit-badge {
  padding: 2px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  background: rgba(255,255,255,.14); color: #fff; white-space: nowrap;
}
/* An empty wallet is worth noticing here rather than at the analyse button. */
.credit-badge-empty { background: var(--amber-600); color: #fff; }

/* --- product picker ------------------------------------------------------ */

.product-choice { border: 0; padding: 0; margin: 0 0 18px; display: grid; gap: 12px; }

.product-option {
  display: block; border: 1.5px solid var(--line); border-radius: 12px; padding: 14px 16px;
  cursor: pointer; background: #fff; transition: border-color .15s, box-shadow .15s;
}
.product-option:hover { border-color: #cfc8bb; }
.product-option:has(input:checked) {
  border-color: var(--amber-600); box-shadow: 0 0 0 3px rgba(177,101,45,.13);
}
.product-option input { position: absolute; opacity: 0; pointer-events: none; }
.product-body { display: block; }
.product-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.product-head strong { font-size: 15.5px; color: var(--brand-900); }
.product-price {
  font-size: 13px; font-weight: 700; color: var(--amber-600); white-space: nowrap;
}
.product-blurb {
  display: block; margin-top: 5px; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft);
}
/* Still selectable when it cannot be afforded: the 402 explains the shortfall
   in full, which is friendlier than a control that refuses to respond. */
.product-option-short { opacity: .72; }
.product-short {
  display: block; margin-top: 6px; font-size: 12.5px; font-weight: 700;
  color: var(--amber-600);
}

.credit-line { margin: 0 0 14px; font-size: 13.5px; color: var(--ink-soft); }

/* --- ledger ------------------------------------------------------------- */

.credit-summary {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px;
}
.credit-total { font-size: 30px; font-weight: 700; color: var(--brand-900); line-height: 1; }
.credit-total-unit { font-size: 14px; color: var(--ink-faint); font-weight: 600; }

.ledger { list-style: none; margin: 14px 0 0; padding: 0; }
.ledger li {
  display: flex; align-items: baseline; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13.5px;
}
.ledger li:last-child { border-bottom: 0; }
.ledger-when { color: var(--ink-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ledger-what { flex: 1; color: var(--ink-soft); }
.ledger-delta { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ledger-plus { color: #2e7d4f; }
.ledger-minus { color: var(--amber-600); }

/* --- bundles ------------------------------------------------------------ */

.bundle-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.bundle {
  border: 1.5px solid var(--line); border-radius: 12px; padding: 18px; background: #fff;
}
.bundle-name { font-size: 13px; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .04em; }
.bundle-price { font-size: 26px; font-weight: 700; color: var(--brand-900); margin: 6px 0 2px; }
.bundle-credits { font-size: 14px; color: var(--ink-soft); }
.bundle-bonus { display: inline-block; margin-top: 8px; font-size: 12.5px; font-weight: 700; color: #2e7d4f; }

.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;
}

/* Product comparison: what each package can and cannot tell you. The two lists
   sit side by side so the difference is readable in one pass -- that difference
   is the only reason there are two packages. */
.product-includes, .product-excludes {
  list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px;
}
.product-includes li, .product-excludes li {
  position: relative; padding-left: 20px; font-size: 13px; line-height: 1.45;
}
.product-includes li { color: var(--ink-soft); }
.product-includes li::before {
  content: ""; position: absolute; left: 3px; top: 6px;
  width: 5px; height: 9px; border: solid #2e7d4f; border-width: 0 1.8px 1.8px 0;
  transform: rotate(45deg);
}
/* Muted rather than alarming: "this package doesn't cover tempo" is information,
   not a warning. */
.product-excludes li { color: var(--ink-faint); }
.product-excludes li::before {
  content: "–"; position: absolute; left: 4px; top: -1px; font-weight: 700;
}

.price-card-excludes { margin-top: 4px; }
.price-card-excludes li { color: var(--ink-faint); }

.price small {
  display: block; font-size: 13px; font-weight: 600; color: var(--ink-faint);
  letter-spacing: .02em; margin-top: 2px;
}

/* Dashboard: saldo rechtsboven, naast de titel. */
.page-header-split {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  flex-wrap: wrap;
}
.credit-pill {
  display: flex; flex-direction: column; align-items: flex-end; gap: 0;
  padding: 10px 16px; border-radius: 12px; text-decoration: none;
  background: #fff; border: 1.5px solid var(--line); flex: none;
  transition: border-color .15s;
}
.credit-pill:hover { border-color: var(--amber-600); }
.credit-pill-value { font-size: 24px; font-weight: 700; color: var(--brand-900); line-height: 1.1; }
.credit-pill-label { font-size: 12px; font-weight: 600; color: var(--ink-faint); }
/* Leeg saldo valt op vóór iemand op de analyseknop drukt, niet erna. */
.credit-pill-empty { border-color: var(--amber-600); background: #fdf6f0; }
.credit-pill-empty .credit-pill-value { color: var(--amber-600); }
@media (max-width: 560px) { .page-header-split { flex-direction: column; } }

/* Credits zijn de eenheid waarin je kiest, dus die staan groot; het bedrag
   staat er kleiner onder als omrekening. */
.price-secondary, .bundle-cost {
  font-size: 13.5px; font-weight: 600; color: var(--ink-faint); margin-top: -4px;
}
.bundle-price { line-height: 1.1; }
.bundle-price small {
  display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-faint);
  letter-spacing: .02em; margin-top: 2px;
}
.bundle-cost { margin-top: 6px; }

/* --- Mijn analyses: inklapbare kaart ---------------------------------- */
/* De kaart is dicht een regel en open een volledig rapport. Er is bewust geen
   rand of achtergrondkleur om het uitgeklapte deel: het hoort bij de kaart
   erboven, een kader eromheen laat het als een tweede kaart lezen. */
.analysis-tag { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px;
  background: #f1f4f8; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.analysis-tag-model { background: var(--brand-100); color: var(--brand-700); }
.analysis-card-full .analysis-card { padding-bottom: 14px; margin-bottom: 0; }
.analysis-details { padding-top: 16px; }
.analysis-toggle { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.analysis-toggle-caret { transition: transform 0.15s ease; font-size: 11px; }
.analysis-toggle[aria-expanded="true"] .analysis-toggle-caret { transform: rotate(180deg); }
.analysis-subhead { margin: 22px 0 10px; font-size: 14px; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--ink-faint); }
.analysis-video { margin: 0; }
.analysis-video video { width: 100%; max-width: 460px; border-radius: 10px;
  border: 1px solid var(--line); display: block; background: #000; }
.analysis-video figcaption { margin-top: 6px; }
.insight-figure { margin: 10px 0 0; }
.insight-figure img { width: 100%; max-width: 340px; border-radius: 9px;
  border: 1px solid var(--line); display: block; cursor: zoom-in; }

/* ==================================================== homepage (index.html) ==
   These styles are scoped to .public-site so the signed-in
   application keep their existing chrome. Mobile-first; grids split only when
   their content has enough room. */

.public-site {
  --brand-900: var(--color-fairway-green);
  --brand-700: var(--color-fairway-green);
  --brand-600: var(--color-fairway-green);
  --brand-500: var(--color-sage);
  --brand-100: rgba(141, 170, 141, .16);
  --amber-600: var(--color-champagne-gold);
  --amber-100: rgba(200, 162, 75, .16);
  --ink: var(--color-graphite);
  --ink-soft: rgba(30, 30, 30, .72);
  --ink-faint: rgba(30, 30, 30, .64);
  --line: rgba(15, 61, 46, .13);
  --surface: #ffffff;
  --canvas: var(--color-off-white);
  --radius-sm: 12px;
  --shadow: 0 1px 2px rgba(15, 61, 46, .04), 0 10px 30px rgba(15, 61, 46, .06);
  --container-wide: 1400px;
  background: var(--color-off-white);
  color: var(--color-graphite);
  font-family: var(--font-body);
  font-size: var(--step-body);
  -webkit-font-smoothing: antialiased;
  hyphens: auto;
}

.public-site h1,
.public-site h2,
.public-site h3,
.public-site h4 {
  font-family: var(--font-heading);
  letter-spacing: -.015em;
  line-height: 1.14;
  hyphens: manual;
}

.public-site .wrap {
  max-width: var(--container-narrow);
  padding-inline: var(--page-gutter);
}

.public-site .wrap-wide {
  max-width: var(--container-wide);
  padding-inline: var(--page-gutter);
}

.public-site.nav-open { overflow: hidden; }

.public-site img,
.public-site svg,
.public-site video { max-width: 100%; }

.public-site .main-flush { padding: 0; }

.public-site .section {
  padding: var(--section-y) 0;
  scroll-margin-top: 76px;
}

.public-site .section-heading {
  max-width: 760px;
  margin-bottom: clamp(40px, 6vw, 72px);
}

.public-site .section-heading-center {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.public-site .section-heading h2,
.public-site .priority-copy h2 {
  margin: var(--space-3) 0 var(--space-4);
  color: var(--color-graphite);
  font-size: var(--step-h2);
  font-weight: 560;
  letter-spacing: -.035em;
  line-height: 1.08;
  text-wrap: balance;
}

.public-site .section-heading p,
.public-site .priority-copy > p {
  max-width: 62ch;
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--step-lead);
  line-height: 1.65;
}

.public-site .section-heading-center p { margin-inline: auto; }

.public-site .section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--color-fairway-green);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.public-site .section-eyebrow::before {
  width: 24px;
  height: 2px;
  background: var(--color-champagne-gold);
  content: "";
}

.public-site .section-heading-center .section-eyebrow {
  justify-content: center;
}

.public-site :where(a, button, summary):focus-visible {
  outline: 3px solid var(--color-fairway-green) !important;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--color-off-white) !important;
}

.public-site .lang-picker-menu li:focus-visible {
  outline: 3px solid var(--color-fairway-green);
  outline-offset: -3px;
}

.public-site .lang-picker-btn,
.public-site .lang-picker-menu li {
  min-height: 44px;
}

.public-site .skip-link {
  position: fixed;
  top: 0;
  left: 16px;
  z-index: 200;
  padding: 12px 18px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: var(--color-fairway-green);
  color: var(--color-off-white);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-120%);
  transition: transform var(--dur-fast) var(--ease);
}

.public-site .skip-link:focus { transform: translateY(0); }

.public-site .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
}

.public-site .hidden { display: none !important; }

/* Header */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 80;
  border-bottom: 1px solid transparent;
  background: rgba(247, 247, 245, .96);
  transition:
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    background var(--dur) var(--ease);
}

.site-nav.is-scrolled,
.site-nav.is-menu-open {
  border-bottom-color: var(--line);
  background: var(--color-off-white);
  box-shadow: 0 8px 28px rgba(15, 61, 46, .07);
}

.site-nav .nav-bar {
  display: flex;
  align-items: center;
  min-height: 80px;
  gap: var(--space-4);
}

.site-nav .nav-brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  width: auto;
  color: var(--color-fairway-green);
  text-decoration: none;
}

.site-nav .brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 11px;
}

.site-nav .brand-emblem {
  display: block;
  flex: 0 0 auto;
  width: 43px;
  height: 43px;
  overflow: hidden;
  border: 1px solid rgba(15, 61, 46, .1);
  border-radius: 50%;
  background: var(--color-fairway-green);
  box-shadow: 0 2px 8px rgba(15, 61, 46, .1);
}

.site-nav .brand-emblem img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand-wordmark {
  display: block;
  width: 180px;
  height: 40px;
}

.brand-wordmark img {
  display: block;
  width: 100%;
  height: auto;
}

.site-nav .brand-wordmark {
  width: 158px;
  height: auto;
}

.site-nav .nav-links {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2vw, 32px);
  margin-left: auto;
}

.site-nav .nav-links > a {
  position: relative;
  padding: 8px 0;
  border: 0;
  color: var(--color-graphite);
  font-size: .94rem;
  font-weight: 520;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav .nav-links > a::after {
  position: absolute;
  right: 0;
  bottom: 1px;
  left: 0;
  height: 2px;
  background: var(--color-champagne-gold);
  content: "";
  opacity: 0;
  transform: scaleX(.4);
  transition:
    opacity var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}

.site-nav .nav-links > a:hover,
.site-nav .nav-links > a.active { color: var(--color-fairway-green); }

.site-nav .nav-links > a:hover::after,
.site-nav .nav-links > a.active::after {
  opacity: 1;
  transform: scaleX(1);
}

.site-nav .nav-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-3);
}

.site-nav .nav-auth {
  display: flex;
  align-items: center;
}

.site-nav .nav-auth .nav-login-link {
  padding: 8px 2px !important;
  border: 0;
  background: transparent;
  color: var(--color-graphite) !important;
  font-size: .94rem;
  font-weight: 520;
  text-decoration: none !important;
}

.site-nav .nav-auth .nav-login-link:hover { color: var(--color-fairway-green) !important; }

.site-nav .nav-cta-btn,
.site-nav .nav-mobile-cta {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 11px 19px;
  border: 1px solid var(--color-fairway-green);
  border-radius: var(--radius-pill);
  background: var(--color-fairway-green);
  color: var(--color-off-white);
  font-size: .9rem;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav .nav-cta-btn:hover,
.site-nav .nav-mobile-cta:hover {
  background: var(--color-graphite);
  border-color: var(--color-graphite);
}

.site-nav .nav-toggle-btn {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  cursor: pointer;
}

.site-nav .nav-toggle-btn span {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--color-fairway-green);
  transform-origin: center;
  transition:
    transform var(--dur) var(--ease),
    opacity var(--dur-fast) var(--ease);
}

.site-nav .nav-toggle-btn span + span { margin-top: 5px; }

.site-nav.is-menu-open .nav-toggle-btn span:first-child {
  transform: translateY(7px) rotate(45deg);
}

.site-nav.is-menu-open .nav-toggle-btn span:nth-child(2) { opacity: 0; }

.site-nav.is-menu-open .nav-toggle-btn span:last-child {
  transform: translateY(-7px) rotate(-45deg);
}

.site-nav .nav-mobile-actions { display: none; }

.site-nav .nav-backdrop {
  display: none;
  position: fixed;
  inset: 80px 0 0;
  z-index: 78;
  width: 100%;
  border: 0;
  background: rgba(30, 30, 30, .34);
  cursor: default;
}

@media (max-width: 1179px) {
  .site-nav .nav-bar { min-height: 68px; }

  .site-nav .nav-links {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 82;
    display: none;
    max-height: calc(100vh - 68px);
    margin: 0;
    padding: 12px var(--page-gutter) 28px;
    overflow-y: auto;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--color-off-white);
    box-shadow: var(--shadow);
  }

  .site-nav .nav-backdrop { inset: 68px 0 0; }

  .site-nav.is-menu-open .nav-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .site-nav .nav-links > a {
    padding: 15px 2px;
    border-bottom: 1px solid var(--line);
    font-size: 1.05rem;
  }

  .site-nav .nav-links > a::after { display: none; }

  .site-nav .nav-mobile-actions {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-4);
    padding-top: var(--space-5);
  }

  .site-nav .nav-mobile-cta {
    grid-column: 1 / -1;
    justify-self: stretch;
    padding: 14px 20px;
    text-align: center;
  }

  .site-nav .nav-desktop-only { display: none; }
  .site-nav .nav-toggle-btn { display: block; }
  .site-nav .nav-actions { margin-left: auto; }
  .site-nav.is-menu-open .nav-backdrop { display: block; }
}

@media (max-width: 560px) {
  .site-nav .nav-cta-btn { display: none; }

  .site-nav .nav-brand { width: auto; }
  .site-nav .brand-lockup { gap: 8px; }
  .site-nav .brand-emblem { width: 36px; height: 36px; }
  .site-nav .brand-wordmark { width: 128px; height: auto; }
}

/* Hero */
.public-site .hero {
  position: relative;
  isolation: isolate;
  min-height: min(820px, calc(100vh - 72px));
  overflow: hidden;
  background: var(--color-fairway-green);
}

.public-site .hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 56% 50%;
}

.public-site .hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(92deg, rgba(15, 61, 46, .96) 0%, rgba(15, 61, 46, .9) 42%, rgba(15, 61, 46, .62) 68%, rgba(15, 61, 46, .42) 100%),
    linear-gradient(180deg, rgba(15, 61, 46, .22), rgba(15, 61, 46, .38));
}

.public-site .hero-home,
.public-site .hero-home .hero-layout {
  min-height: min(760px, calc(100svh - 80px));
}

.public-site .hero-home .hero-scrim {
  background:
    linear-gradient(92deg, rgba(15, 61, 46, .88) 0%, rgba(15, 61, 46, .76) 40%, rgba(15, 61, 46, .4) 70%, rgba(15, 61, 46, .2) 100%),
    linear-gradient(180deg, rgba(15, 61, 46, .08), rgba(15, 61, 46, .34));
}

.public-site .hero-home .hero-layout {
  padding-top: clamp(92px, 9vw, 140px);
  padding-bottom: clamp(92px, 9vw, 140px);
}

.public-site .hero-home .hero-copy { max-width: 700px; }

.public-site .hero-home .hero-copy h1 {
  max-width: 11ch;
  margin-bottom: clamp(28px, 3vw, 38px);
  font-size: clamp(3.2rem, 5.4vw, 5.3rem);
  font-weight: 480;
  letter-spacing: -.05em;
  line-height: 1.03;
}

.public-site .hero-home .hero-lead {
  max-width: 37ch;
  margin-bottom: 0;
  color: rgba(247, 247, 245, .91);
  font-size: clamp(1.1rem, 1.5vw, 1.28rem);
  line-height: 1.58;
}

.public-site .store-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
  margin-top: clamp(32px, 4vw, 44px);
}

.public-site .store-badge {
  display: inline-flex;
  flex: 0 1 184px;
  min-height: 60px;
  align-items: center;
  gap: 10px;
  justify-content: flex-start;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, .58);
  border-radius: 9px;
  background: #080a09;
  box-shadow: 0 8px 24px rgba(10, 18, 14, .16);
  color: #fff;
  cursor: not-allowed;
  font-family: var(--font-body);
  opacity: 1;
  text-align: left;
}

.public-site .store-badge:disabled {
  color: #fff;
  opacity: 1;
}

.public-site .store-badge-icon {
  flex: 0 0 auto;
  width: 29px;
  height: 32px;
}

.public-site .store-badge-icon-apple { width: 30px; }

.public-site .store-badge-copy {
  display: grid;
  min-width: 0;
  gap: 1px;
  line-height: 1;
}

.public-site .store-badge-copy small {
  color: rgba(255, 255, 255, .82);
  font-size: .59rem;
  font-weight: 450;
  letter-spacing: .015em;
  line-height: 1.15;
  white-space: nowrap;
}

.public-site .store-badge-copy strong {
  color: #fff;
  font-size: 1.16rem;
  font-weight: 550;
  letter-spacing: -.025em;
  line-height: 1.08;
  white-space: nowrap;
}

.public-site .store-coming-soon {
  flex-basis: 100%;
  color: rgba(247, 247, 245, .72);
  font-size: .78rem;
  letter-spacing: .02em;
}

.public-site .hero-layout {
  position: relative;
  z-index: 3;
  display: grid;
  align-items: center;
  min-height: min(820px, calc(100vh - 72px));
  gap: clamp(36px, 6vw, 88px);
  padding-top: clamp(72px, 10vw, 136px);
  padding-bottom: clamp(72px, 10vw, 136px);
  color: var(--color-off-white);
}

.public-site .hero-copy { max-width: 760px; }

.public-site .hero-copy h1 {
  max-width: 12ch;
  margin: 0 0 var(--space-5);
  color: #fff;
  font-size: var(--step-hero);
  font-weight: 560;
  letter-spacing: -.055em;
  line-height: .98;
  text-wrap: balance;
}

.public-site .hero-lead {
  max-width: 55ch;
  margin: 0 0 var(--space-6);
  color: rgba(247, 247, 245, .86);
  font-size: var(--step-lead);
  line-height: 1.65;
}

.public-site .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.public-site .hero-actions .btn,
.public-site .closing-cta .btn {
  width: auto;
  min-height: 52px;
  padding: 14px 24px;
  border-radius: var(--radius-pill);
  font-size: 1rem;
  text-decoration: none;
}

.public-site .btn-gold {
  border: 1px solid var(--color-champagne-gold);
  background: var(--color-champagne-gold);
  color: var(--color-graphite);
  box-shadow: 0 10px 28px rgba(30, 30, 30, .15);
}

.public-site .btn-gold:hover {
  border-color: var(--color-champagne-gold);
  background: var(--color-champagne-gold);
  color: var(--color-graphite);
  filter: brightness(.96);
  transform: translateY(-1px);
}

.public-site .btn-ghost-light {
  border: 1px solid rgba(247, 247, 245, .58);
  background: rgba(247, 247, 245, .07);
  color: #fff;
  backdrop-filter: blur(3px);
}

.public-site .btn-ghost-light:hover {
  border-color: var(--color-off-white);
  background: rgba(247, 247, 245, .14);
  color: #fff;
}

@media (min-width: 960px) {
  .public-site .hero-layout {
    grid-template-columns: minmax(0, 1.45fr) minmax(140px, .55fr);
  }
}

@media (max-width: 720px) {
  .public-site .hero {
    min-height: auto;
  }

  .public-site .hero-layout {
    min-height: auto;
    padding-top: 76px;
    padding-bottom: 72px;
  }

  .public-site .hero-scrim {
    background: rgba(15, 61, 46, .84);
  }

  .public-site .hero-home,
  .public-site .hero-home .hero-layout { min-height: auto; }

  .public-site .hero-home .hero-scrim {
    background: linear-gradient(90deg, rgba(15, 61, 46, .9), rgba(15, 61, 46, .72));
  }

  .public-site .hero-home .hero-layout {
    padding-top: 88px;
    padding-bottom: 88px;
  }
}

@media (max-width: 520px) {
  .public-site .hero-copy h1 {
    font-size: clamp(2.7rem, 12vw, 3.25rem);
    letter-spacing: -.045em;
  }

  .public-site .hero-actions .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .public-site .hero-home .hero-copy h1 {
    font-size: clamp(2.75rem, 12vw, 3.35rem);
    line-height: 1.04;
  }

  .public-site .store-badges { gap: 10px; }

  .public-site .store-badge {
    flex: 1 1 158px;
    min-width: 0;
    padding-inline: 11px;
  }
}

/* Trust */
.public-site .trust-band {
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.public-site .trust-band-layout { display: grid; gap: var(--space-5); }

.public-site .trust-band-title {
  margin: 0;
  color: var(--color-fairway-green);
  font-family: var(--font-heading);
  font-size: .95rem;
  font-weight: 600;
}

.public-site .trust-band-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  padding: 0;
  margin: 0;
  list-style: none;
}

.public-site .trust-band-grid li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-soft);
  font-size: .9rem;
}

.public-site .trust-band-grid svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--color-fairway-green);
}

@media (min-width: 620px) {
  .public-site .trust-band-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1080px) {
  .public-site .trust-band-layout {
    grid-template-columns: 260px minmax(0, 1fr);
    align-items: center;
  }

  .public-site .trust-band-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* How it works */
.public-site .how-section { background: var(--color-off-white); }

.public-site .steps-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.public-site .step-item {
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--line);
}

.public-site .step-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
}

.public-site .step-number {
  color: var(--color-champagne-gold);
  font-family: var(--font-heading);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
}

.public-site .step-topline svg {
  width: 28px;
  height: 28px;
  color: var(--color-fairway-green);
}

.public-site .step-item h3 {
  max-width: 18ch;
  margin: 0 0 var(--space-3);
  color: var(--color-graphite);
  font-size: var(--step-h3);
  font-weight: 560;
}

.public-site .step-item p {
  max-width: 40ch;
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.65;
}

@media (min-width: 768px) {
  .public-site .steps-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: 1px solid var(--line);
  }

  .public-site .step-item {
    padding: var(--space-6) clamp(24px, 3vw, 42px) var(--space-7);
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }

  .public-site .step-item:first-child { padding-left: 0; }
  .public-site .step-item:last-child { padding-right: 0; border-right: 0; }
}

/* Analysis example */
.public-site .analysis-section { background: #fff; }

.public-site .analysis-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: clamp(40px, 6vw, 80px);
}

.public-site .analysis-media { margin: 0; }

.public-site .analysis-video-shell {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-fairway-green);
  box-shadow: var(--shadow-lifted);
}

.public-site .analysis-video-shell video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.public-site .analysis-video-guides {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.public-site .analysis-video-guides path {
  fill: none;
  stroke: var(--color-sage);
  stroke-width: 1.5;
  stroke-dasharray: 8 10;
}

.public-site .analysis-video-guides circle {
  fill: var(--color-champagne-gold);
  stroke: #fff;
  stroke-width: 1.5;
}

.public-site .video-toggle {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(247, 247, 245, .72);
  border-radius: 50%;
  background: rgba(15, 61, 46, .82);
  box-shadow: 0 12px 30px rgba(30, 30, 30, .2);
  cursor: pointer;
  transform: translate(-50%, -50%);
}

.public-site .video-play-icon {
  width: 0;
  height: 0;
  margin-left: 4px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 13px solid #fff;
}

.public-site .analysis-video-shell.is-playing .video-play-icon {
  width: 14px;
  height: 17px;
  margin: 0;
  border: 0;
  border-right: 4px solid #fff;
  border-left: 4px solid #fff;
}

.public-site .video-timeline {
  position: absolute;
  right: 22px;
  bottom: 20px;
  left: 22px;
  height: 3px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: rgba(247, 247, 245, .34);
}

.public-site .video-timeline span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--color-champagne-gold);
}

.public-site .video-error {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  left: var(--space-4);
  padding: 10px 14px;
  margin: 0;
  border-radius: var(--radius-sm);
  background: var(--color-off-white);
  color: var(--color-graphite);
  font-size: .875rem;
  text-align: center;
}

.public-site .analysis-media figcaption {
  margin-top: var(--space-3);
  color: var(--ink-faint);
  font-size: .8rem;
  text-align: center;
}

.public-site .analysis-report {
  display: grid;
  gap: var(--space-6);
}

.public-site .analysis-score-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--line);
}

.public-site .analysis-score-label {
  color: var(--ink-soft);
  font-size: .85rem;
  font-weight: 600;
}

.public-site .analysis-score {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 2px 0 0;
  color: var(--color-fairway-green);
  font-variant-numeric: tabular-nums;
}

.public-site .analysis-score strong {
  font-family: var(--font-heading);
  font-size: clamp(4.25rem, 8vw, 6.25rem);
  font-weight: 500;
  letter-spacing: -.06em;
  line-height: 1;
}

.public-site .analysis-score span {
  color: var(--ink-faint);
  font-size: 1.3rem;
}

.public-site .demo-label {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 9px;
  border: 1px solid rgba(141, 170, 141, .46);
  border-radius: var(--radius-pill);
  background: rgba(141, 170, 141, .12);
  color: var(--color-fairway-green);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.public-site .analysis-report h3 {
  margin: 0 0 var(--space-3);
  color: var(--color-graphite);
  font-size: 1rem;
  font-weight: 650;
}

.public-site .finding-list {
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.public-site .finding-list li {
  position: relative;
  padding-left: 28px;
  color: var(--ink-soft);
}

.public-site .finding-good li::before {
  position: absolute;
  top: 1px;
  left: 0;
  display: grid;
  width: 19px;
  height: 19px;
  place-items: center;
  border-radius: 50%;
  background: rgba(141, 170, 141, .18);
  color: var(--color-fairway-green);
  content: "✓";
  font-size: .72rem;
  font-weight: 800;
}

.public-site .analysis-improvements {
  display: grid;
  gap: var(--space-3);
}

.public-site .analysis-improvements > h3 { margin-bottom: 0; }

.public-site .finding-card {
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--color-off-white);
}

.public-site .finding-card + .finding-card { margin-top: 0; }

.public-site .finding-card summary {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: 18px 48px 18px 18px;
  color: var(--color-graphite);
  cursor: pointer;
  font-weight: 620;
  list-style: none;
}

.public-site .finding-card summary::-webkit-details-marker { display: none; }

.public-site .finding-card summary::after {
  position: absolute;
  top: 18px;
  right: 18px;
  color: var(--color-champagne-gold);
  content: "+";
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1;
}

.public-site .finding-card[open] summary::after { content: "−"; }

.public-site .finding-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
  padding: 0 18px 20px;
  margin: 0;
}

.public-site .finding-detail dt {
  margin-top: 12px;
  color: var(--color-fairway-green);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.public-site .finding-detail dd {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.55;
}

@media (min-width: 1024px) {
  .public-site .analysis-grid {
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  }
}

/* Personal priority */
.public-site .priority-section { background: var(--color-off-white); }

.public-site .priority-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 7vw, 96px);
  align-items: center;
}

.public-site .priority-copy h2 { max-width: 14ch; }

.public-site .priority-card {
  padding: clamp(24px, 4vw, 44px);
  border: 1px solid var(--line);
  border-top: 3px solid var(--color-champagne-gold);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow);
}

.public-site .priority-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.public-site .priority-flag {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-fairway-green);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.public-site .priority-index {
  color: rgba(15, 61, 46, .22);
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 650;
}

.public-site .priority-card h3 {
  max-width: 22ch;
  margin: 0;
  color: var(--color-graphite);
  font-size: var(--step-h3);
  font-weight: 560;
}

.public-site .priority-card dl {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin: var(--space-6) 0 0;
}

.public-site .priority-card dl > div {
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

.public-site .priority-card dt {
  margin: 0 0 6px;
  color: var(--color-fairway-green);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.public-site .priority-card dd {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.55;
}

@media (min-width: 900px) {
  .public-site .priority-layout {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  }

  .public-site .priority-card dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Drills */
.public-site .drills-section { background: #fff; }

.public-site .drill-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

.public-site .drill-card {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 8px 28px rgba(15, 61, 46, .045);
}

.public-site .drill-thumb {
  display: grid;
  aspect-ratio: 16 / 9;
  place-items: center;
  border-radius: 0;
  background: var(--color-off-white);
}

.public-site .drill-thumb svg {
  width: 76%;
  height: 76%;
  overflow: visible;
  stroke: var(--color-fairway-green);
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.public-site .drill-thumb .drill-motion {
  stroke: var(--color-champagne-gold);
  stroke-dasharray: 5 6;
}

.public-site .drill-thumb .drill-club,
.public-site .drill-thumb .drill-wall {
  stroke: var(--color-sage);
}

.public-site .drill-card-body {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 3vw, 30px);
}

.public-site .drill-card h3 {
  margin: 0 0 10px;
  color: var(--color-graphite);
  font-size: 1.3rem;
  font-weight: 580;
}

.public-site .drill-card-body > p {
  min-height: 3.1em;
  margin: 0 0 var(--space-5);
  color: var(--ink-soft);
  line-height: 1.58;
}

.public-site .drill-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 7px var(--space-3);
  padding-top: var(--space-4);
  margin: 0 0 var(--space-5);
  border-top: 1px solid var(--line);
  font-size: .84rem;
}

.public-site .drill-meta dt { color: var(--ink-faint); }

.public-site .drill-meta dd {
  margin: 0;
  color: var(--color-graphite);
  text-align: right;
}

.public-site .drill-link {
  align-self: flex-start;
  margin-top: auto;
  color: var(--color-fairway-green);
  font-size: .9rem;
  font-weight: 700;
  text-underline-offset: 4px;
}

.public-site .drill-link::after {
  margin-left: 8px;
  color: var(--color-champagne-gold);
  content: "→";
  text-decoration: none;
}

@media (min-width: 680px) and (max-width: 1023px) {
  .public-site .drill-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .public-site .drill-card:last-child {
    grid-column: 1 / -1;
    width: 100%;
    max-width: calc(50% - 12px);
    justify-self: center;
  }
}

@media (min-width: 1024px) {
  .public-site .drill-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Progress */
.public-site .progress-section { background: rgba(141, 170, 141, .09); }

.public-site .progress-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

.public-site .progress-card {
  min-width: 0;
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 7px 24px rgba(15, 61, 46, .04);
}

.public-site .progress-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 44px;
  margin-bottom: var(--space-5);
}

.public-site .progress-card h3 {
  margin: 0;
  color: var(--color-graphite);
  font-size: 1.15rem;
  font-weight: 600;
}

.public-site .score-chart {
  display: block;
  width: 100%;
  height: auto;
}

.public-site .chart-grid path {
  fill: none;
  stroke: rgba(15, 61, 46, .11);
  stroke-width: 1;
}

.public-site .chart-area { fill: rgba(141, 170, 141, .13); }

.public-site .chart-line {
  fill: none;
  stroke: var(--color-fairway-green);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.public-site .chart-dots circle {
  fill: #fff;
  stroke: var(--color-fairway-green);
  stroke-width: 2.5;
}

.public-site .chart-dots .chart-dot-latest {
  fill: var(--color-champagne-gold);
  stroke: #fff;
}

.public-site .chart-labels {
  fill: var(--ink-faint);
  font-family: var(--font-body);
  font-size: 11px;
}

.public-site .progress-summary {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: var(--space-4) 0 0;
  color: var(--ink-soft);
  font-size: .82rem;
}

.public-site .progress-summary strong {
  color: var(--color-fairway-green);
  font-family: var(--font-heading);
  font-size: 1.2rem;
}

.public-site .progress-trend {
  color: var(--color-fairway-green);
  font-size: .8rem;
  font-weight: 700;
}

.public-site .tempo-comparison {
  display: grid;
  gap: var(--space-5);
}

.public-site .tempo-comparison > div {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 6px var(--space-3);
}

.public-site .tempo-comparison span {
  color: var(--ink-faint);
  font-size: .8rem;
}

.public-site .tempo-comparison strong {
  color: var(--color-graphite);
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}

.public-site .tempo-current strong { color: var(--color-fairway-green); }

.public-site .tempo-track {
  grid-column: 1 / -1;
  height: 7px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: rgba(141, 170, 141, .18);
}

.public-site .tempo-track span {
  display: block;
  width: var(--tempo-width);
  height: 100%;
  border-radius: inherit;
  background: var(--color-sage);
}

.public-site .tempo-current .tempo-track span { background: var(--color-fairway-green); }

.public-site .progress-tempo-card > p,
.public-site .progress-compare-card > p {
  margin: var(--space-6) 0 0;
  color: var(--ink-soft);
  font-size: .88rem;
  line-height: 1.55;
}

.public-site .swing-compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.public-site .swing-frame {
  display: grid;
  place-items: center;
  padding: 12px 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--color-off-white);
}

.public-site .swing-frame svg {
  width: 78px;
  height: 92px;
  stroke: var(--color-sage);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.public-site .swing-frame-now svg { stroke: var(--color-fairway-green); }

.public-site .swing-frame span {
  color: var(--ink-faint);
  font-size: .72rem;
}

.public-site .swing-frame-now span {
  color: var(--color-fairway-green);
  font-weight: 700;
}

.public-site .compare-arrow {
  color: var(--color-champagne-gold);
  font-size: 1.2rem;
}

.public-site .demo-disclaimer {
  max-width: 72ch;
  margin: var(--space-5) auto 0;
  color: var(--ink-faint);
  font-size: .8rem;
  text-align: center;
}

@media (min-width: 768px) {
  .public-site .progress-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .public-site .progress-card:first-child { grid-column: 1 / -1; }
}

@media (min-width: 1100px) {
  .public-site .progress-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .public-site .progress-card:first-child { grid-column: auto; }
}

/* Pricing */
.public-site .pricing-section { background: var(--color-off-white); }

.public-site #home-pricing {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: 0;
}

.public-site #home-pricing .price-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 100%;
  flex-direction: column;
  gap: 0;
  padding: clamp(24px, 3vw, 34px);
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 7px 24px rgba(15, 61, 46, .04);
}

.public-site #home-pricing .price-card-featured {
  border-color: rgba(200, 162, 75, .8);
  box-shadow: 0 8px 30px rgba(15, 61, 46, .07);
}

.public-site .price-tier-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 28px;
  margin-bottom: var(--space-4);
}

.public-site #home-pricing .price-card h3 {
  margin: 0;
  color: var(--color-graphite);
  font-size: 1.35rem;
  font-weight: 600;
}

.public-site .price-tag {
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  background: rgba(200, 162, 75, .16);
  color: var(--color-graphite);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.public-site .price-amount {
  margin: 0 0 5px;
  color: var(--color-fairway-green);
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 560;
  letter-spacing: -.04em;
  line-height: 1.1;
}

.public-site .price-unit {
  min-height: 2.6em;
  margin: 0 0 var(--space-5);
  color: var(--ink-faint);
  font-size: .82rem;
}

.public-site .price-description {
  min-height: 3.2em;
  margin: 0 0 var(--space-5);
  color: var(--ink-soft);
  line-height: 1.58;
}

.public-site #home-pricing ul {
  display: grid;
  gap: 10px;
  padding: var(--space-5) 0 0;
  margin: 0 0 var(--space-6);
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  list-style: none;
}

.public-site #home-pricing li {
  position: relative;
  padding-left: 24px;
  font-size: .9rem;
}

.public-site #home-pricing li::before {
  position: absolute;
  left: 0;
  color: var(--color-fairway-green);
  content: "✓";
  font-weight: 800;
}

.public-site .price-card .btn {
  align-self: stretch;
  justify-content: center;
  margin-top: auto;
  border-radius: var(--radius-pill);
}

.public-site .price-card-loading {
  min-height: 360px;
  justify-content: flex-start;
}

.public-site .price-card-loading span {
  display: block;
  width: 58%;
  height: 16px;
  margin-bottom: 16px;
  border-radius: var(--radius-pill);
  background: rgba(141, 170, 141, .16);
}

.public-site .price-card-loading span:nth-child(2) {
  width: 38%;
  height: 44px;
}

.public-site .price-card-loading span:nth-child(3) { width: 82%; }

.public-site .pricing-message {
  grid-column: 1 / -1;
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink-soft);
  text-align: center;
}

.public-site .pricing-message a {
  color: var(--color-fairway-green);
  font-weight: 700;
}

.public-site .pricing-footnote {
  max-width: 72ch;
  margin: var(--space-5) auto 0;
  color: var(--ink-faint);
  font-size: .8rem;
  text-align: center;
}

@media (min-width: 760px) {
  .public-site #home-pricing { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* FAQ */
.public-site .faq-section { background: #fff; }

.public-site .faq-list {
  margin: 0;
  border-top: 1px solid var(--line);
}

.public-site .faq-item {
  border-bottom: 1px solid var(--line);
}

.public-site .faq-item h3 { margin: 0; }

.public-site .faq-question {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr) 28px;
  align-items: center;
  gap: var(--space-4);
  padding: 22px 2px;
  border: 0;
  background: transparent;
  color: var(--color-graphite);
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: clamp(1rem, 2vw, 1.13rem);
  font-weight: 560;
  line-height: 1.4;
  text-align: left;
}

.public-site .faq-question:hover { color: var(--color-fairway-green); }

.public-site .faq-icon {
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
  border: 1px solid var(--line);
  border-radius: 50%;
}

.public-site .faq-icon::before,
.public-site .faq-icon::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 1.5px;
  background: var(--color-champagne-gold);
  content: "";
  transform: translate(-50%, -50%);
  transition: transform var(--dur-fast) var(--ease);
}

.public-site .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }

.public-site .faq-question[aria-expanded="true"] .faq-icon::after {
  transform: translate(-50%, -50%) rotate(0);
}

.public-site .faq-answer {
  padding: 0 46px var(--space-5) 2px;
}

.public-site .faq-answer p {
  max-width: 64ch;
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.65;
}

/* Closing CTA */
.public-site .closing-cta {
  position: relative;
  overflow: hidden;
  padding: var(--section-y) 0;
  margin: 0;
  background: var(--color-fairway-green);
  color: var(--color-off-white);
  text-align: center;
}

.public-site .closing-cta-inner {
  position: relative;
  z-index: 1;
}

.public-site .closing-accent {
  display: block;
  width: 42px;
  height: 3px;
  margin: 0 auto var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--color-champagne-gold);
}

.public-site .closing-cta h2 {
  max-width: 18ch;
  margin: 0 auto var(--space-4);
  color: #fff;
  font-size: var(--step-h2);
  font-weight: 560;
  letter-spacing: -.035em;
  line-height: 1.08;
  text-wrap: balance;
}

.public-site .closing-cta p {
  max-width: 52ch;
  margin: 0 auto var(--space-6);
  color: rgba(247, 247, 245, .8);
  font-size: var(--step-lead);
}

/* Footer */
.public-site .site-footer {
  padding: clamp(56px, 7vw, 88px) 0 0;
  margin: 0;
  border-top: 0;
  background: var(--color-off-white);
}

.public-site .footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
}

.public-site .footer-brand { max-width: 360px; }

.public-site .footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--color-fairway-green);
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  text-decoration: none;
}

.brand-icon-crop {
  display: block;
  width: 38px;
  height: 38px;
  border-radius: 10px;
}

.brand-icon-crop img {
  display: block;
  width: 38px;
  height: 38px;
}

.public-site .footer-brand > p {
  margin: var(--space-4) 0 0;
  color: var(--ink-soft);
  font-size: .9rem;
  line-height: 1.65;
}

.public-site .footer-col {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.public-site .footer-col h3 {
  margin: 0 0 8px;
  color: var(--color-graphite);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.public-site .footer-col a {
  color: var(--ink-soft);
  font-size: .9rem;
  text-decoration: none;
}

.public-site .footer-col a:hover { color: var(--color-fairway-green); }

.public-site .footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: space-between;
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
  margin-top: var(--space-7);
  border-top: 1px solid var(--line);
}

.public-site .footer-bottom p {
  margin: 0;
  color: var(--ink-faint);
  font-size: .75rem;
}

@media (min-width: 680px) {
  .public-site .footer-grid { grid-template-columns: 1.4fr repeat(2, 1fr); }
  .public-site .footer-brand { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
  .public-site .footer-grid { grid-template-columns: minmax(280px, 1.8fr) repeat(3, 1fr); }
  .public-site .footer-brand { grid-column: auto; }

  .public-site .footer-bottom {
    flex-direction: row;
    align-items: center;
  }
}

/* Tight phone safeguards */
@media (max-width: 420px) {
  .public-site .section { padding: 68px 0; }

  .public-site .section-heading {
    margin-bottom: 38px;
  }

  .public-site .section-heading h2,
  .public-site .priority-copy h2 {
    font-size: clamp(1.95rem, 9vw, 2.35rem);
  }

  .public-site .analysis-score strong { font-size: 4rem; }

  .public-site .priority-card {
    padding: 22px 18px;
  }

  .public-site .priority-card-head {
    align-items: flex-start;
  }

  .public-site .demo-label {
    font-size: .6rem;
  }

  .public-site .drill-meta {
    grid-template-columns: 1fr;
  }

  .public-site .drill-meta dd { text-align: left; }

  .public-site .swing-frame svg {
    width: 62px;
    height: 76px;
  }
}

/* ==========================================================================
   Unified Caddium product layer
   The marketing site, authentication flow and signed-in product all use the
   same quiet brand system. These rules intentionally sit after the legacy
   declarations so existing API/DOM contracts can remain untouched.
   ========================================================================== */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid rgba(200, 162, 75, .72);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 12px;
  z-index: 100;
  padding: 10px 15px;
  border-radius: var(--radius-pill);
  background: var(--color-fairway-green);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--dur-fast) var(--ease);
}

.skip-link:focus { transform: translateY(0); }

.btn {
  min-height: 44px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 700;
}

.btn-primary {
  border-color: var(--color-fairway-green);
  background: var(--color-fairway-green);
  color: #fff;
}

.btn-primary:hover:not(:disabled) {
  border-color: var(--color-fairway-green);
  background: var(--color-fairway-green);
  filter: brightness(.94);
}

.btn-secondary {
  border-color: var(--color-fairway-green);
  background: transparent;
  color: var(--color-fairway-green);
}

.btn-ghost { color: var(--color-fairway-green); }

input,
select,
textarea {
  min-height: 46px;
  border-color: rgba(30, 30, 30, .18);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--color-graphite);
  font-family: var(--font-body);
}

input:hover,
select:hover,
textarea:hover { border-color: rgba(15, 61, 46, .45); }

input:focus,
select:focus,
textarea:focus {
  border-color: var(--color-fairway-green);
  box-shadow: 0 0 0 3px rgba(141, 170, 141, .2);
}

/* Authentication -------------------------------------------------------- */

.auth-page {
  min-height: 100vh;
  background: var(--color-off-white);
}

.auth-brand { display: block; width: clamp(132px, 14vw, 168px); }
.auth-brand img { display: block; width: 100%; height: auto; }

.auth-page .lang-picker-btn,
.auth-page .password-toggle,
.auth-page .link-btn {
  min-height: 44px;
}

.auth-back-link {
  color: var(--ink-soft);
  font-size: .875rem;
  font-weight: 650;
  text-decoration: none;
}

.auth-back-link:hover { color: var(--color-fairway-green); }

.auth-layout {
  display: grid;
  width: min(100% - (2 * var(--page-gutter)), var(--container-wide));
  min-height: calc(100vh - 118px);
  grid-template-columns: minmax(0, .92fr) minmax(460px, 1.08fr);
  align-items: stretch;
  overflow: hidden;
  padding: 0;
  margin: 40px auto;
  border: 1px solid rgba(15, 61, 46, .12);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-lifted);
}

.auth-story {
  position: relative;
  display: flex;
  min-height: 720px;
  align-items: flex-end;
  overflow: hidden;
  padding: clamp(36px, 5vw, 68px);
  background: var(--color-fairway-green);
  color: var(--color-off-white);
}

.auth-story::before,
.auth-story::after {
  position: absolute;
  border: 1px solid rgba(247, 247, 245, .13);
  border-radius: 50%;
  content: "";
}

.auth-story::before { top: -110px; right: -130px; width: 430px; height: 430px; }
.auth-story::after { top: 58px; right: 48px; width: 165px; height: 165px; border-color: rgba(200, 162, 75, .44); }

.auth-story-content { position: relative; z-index: 1; max-width: 520px; }

.auth-eyebrow,
.auth-story .section-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 var(--space-5);
  color: rgba(247, 247, 245, .72);
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.auth-eyebrow::before {
  width: 28px;
  height: 2px;
  background: var(--color-champagne-gold);
  content: "";
}

.auth-story h1 {
  max-width: 11ch;
  margin: 0 0 var(--space-5);
  color: #fff;
  font-size: clamp(2.4rem, 4.4vw, 4.25rem);
  font-weight: 520;
  letter-spacing: -.05em;
  line-height: 1.04;
}

.auth-story-content > p {
  max-width: 46ch;
  margin: 0;
  color: rgba(247, 247, 245, .78);
  font-size: 1.04rem;
  line-height: 1.7;
}

.auth-benefits {
  display: grid;
  gap: 12px;
  padding: var(--space-6) 0;
  margin: var(--space-6) 0 0;
  border-top: 1px solid rgba(247, 247, 245, .15);
  border-bottom: 1px solid rgba(247, 247, 245, .15);
  list-style: none;
}

.auth-benefits li {
  position: relative;
  padding-left: 28px;
  color: rgba(247, 247, 245, .88);
  font-size: .92rem;
}

.auth-benefits li::before {
  position: absolute;
  left: 0;
  color: var(--color-champagne-gold);
  content: "✓";
  font-weight: 800;
}

.auth-credit-note { margin-top: var(--space-5) !important; font-size: .875rem !important; }
.auth-credit-note strong { color: #fff; }

.auth-panel {
  width: 100%;
  max-width: 610px;
  align-self: center;
  padding: clamp(36px, 5vw, 72px);
  margin: auto;
}

.auth-panel-heading { margin-bottom: var(--space-6); }
.auth-panel-heading .section-eyebrow { margin-bottom: 10px; color: var(--color-fairway-green); }
.auth-panel-heading h2 { margin: 0 0 10px; font-size: clamp(2rem, 3vw, 2.8rem); font-weight: 540; }
.auth-panel-heading p { margin: 0; color: var(--ink-soft); }

.auth-page .auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  margin: 0 0 var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--color-off-white);
}

.auth-page .auth-tab {
  min-height: 44px;
  padding: 9px 14px;
  margin: 0;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--ink-soft);
}

.auth-page .auth-tab.active {
  background: #fff;
  color: var(--color-fairway-green);
  box-shadow: 0 1px 8px rgba(15, 61, 46, .08);
}

.auth-page .form-page-grid { max-width: none; gap: 9px; }
.auth-page .form-page-grid > label { margin-top: 9px; color: var(--color-graphite); font-size: .875rem; font-weight: 700; }
.auth-page .form-page-grid > input,
.auth-page .form-page-grid > select,
.auth-page .password-field input { width: 100%; }

.password-field { position: relative; }
.password-field input { padding-right: 92px; }
.password-toggle {
  position: absolute;
  top: 50%;
  right: 7px;
  min-width: 70px;
  min-height: 34px;
  padding: 4px 9px;
  border: 0;
  border-radius: var(--radius-pill);
  background: rgba(141, 170, 141, .14);
  color: var(--color-fairway-green);
  cursor: pointer;
  font: 700 .75rem var(--font-body);
  transform: translateY(-50%);
}

.auth-submit { width: 100%; margin-top: var(--space-4); }
.form-status { min-height: 1.35em; margin: 1px 0 0; color: var(--ink-soft); font-size: .82rem; }
.auth-inline-action,
.auth-switch { margin: 5px 0 0; text-align: center; }
.auth-switch { color: var(--ink-soft); font-size: .875rem; }
.auth-page .link-btn { min-height: 32px; color: var(--color-fairway-green); }
.auth-privacy { padding-top: var(--space-5); margin: var(--space-6) 0 0; border-top: 1px solid var(--line); color: var(--ink-faint); font-size: .78rem; line-height: 1.6; }
.auth-privacy a { color: var(--color-fairway-green); }
.auth-page .password-toggle,
.auth-page .link-btn { min-height: 44px; }

@media (max-width: 900px) {
  .auth-layout { grid-template-columns: 1fr; margin-block: 24px; }
  .auth-story { min-height: auto; align-items: center; padding-block: 48px; }
  .auth-story h1 { max-width: 15ch; font-size: clamp(2.25rem, 8vw, 3.5rem); }
  .auth-benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
}

@media (max-width: 620px) {
  .auth-brand { width: 126px; }
  .auth-back-link { display: none; }
  .auth-layout { width: 100%; min-height: auto; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
  .auth-story { padding: 40px 20px; }
  .auth-story::before { width: 300px; height: 300px; }
  .auth-story::after { display: none; }
  .auth-story h1 { font-size: clamp(2.2rem, 11vw, 3rem); }
  .auth-benefits { grid-template-columns: 1fr; padding-block: 22px; }
  .auth-panel { padding: 38px 20px 54px; }
}

/* Free Quick Swing Scan ------------------------------------------------- */

.probeer-page { background: var(--color-off-white); }

.probeer-main { max-width: 900px; padding: clamp(52px, 7vw, 88px) 20px 100px; }

.probeer-page .card {
  padding: clamp(24px, 4vw, 42px);
  border-color: rgba(15, 61, 46, .12);
  box-shadow: 0 10px 38px rgba(15, 61, 46, .06);
}

.probeer-step-heading { display: flex; align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-5); }
.probeer-step-heading .step-number {
  width: auto;
  height: auto;
  padding-top: 4px;
  border-radius: 0;
  background: transparent;
  color: var(--color-champagne-gold);
  font-family: var(--font-heading);
  letter-spacing: .1em;
}
.probeer-step-heading h2 { margin: 0 0 5px; font-size: clamp(1.35rem, 3vw, 1.8rem); }
.probeer-step-heading p { margin: 0; color: var(--ink-soft); }

.probeer-page .dropzone {
  padding: clamp(42px, 8vw, 74px) 22px;
  border: 1.5px dashed rgba(15, 61, 46, .38);
  background: rgba(141, 170, 141, .08);
}
.probeer-page .dropzone:hover,
.probeer-page .dropzone:focus-visible,
.probeer-page .dropzone.dragging { border-color: var(--color-fairway-green); background: rgba(141, 170, 141, .14); }
.dropzone.is-busy { pointer-events: none; opacity: .72; }

.probeer-page #analyse-btn { margin-top: var(--space-4); }

.upload-progress { display: grid; gap: 8px; margin-top: var(--space-4); color: var(--ink-soft); font-size: .85rem; }
.upload-progress progress { width: 100%; height: 7px; overflow: hidden; border: 0; border-radius: var(--radius-pill); background: rgba(141, 170, 141, .18); }
.upload-progress progress::-webkit-progress-bar { background: rgba(141, 170, 141, .18); }
.upload-progress progress::-webkit-progress-value { background: var(--color-fairway-green); }
.upload-progress progress::-moz-progress-bar { background: var(--color-fairway-green); }

.probeer-analysing { text-align: center; }
.probeer-analysing h2 { margin: 16px 0 8px; font-size: clamp(1.4rem, 3vw, 2rem); }
.probeer-analysing p { max-width: 52ch; margin: 0 auto var(--space-5); color: var(--ink-soft); }
.analysis-pulse {
  display: block;
  width: 52px;
  height: 52px;
  margin: 0 auto;
  border: 1px solid rgba(15, 61, 46, .2);
  border-radius: 50%;
  box-shadow: inset 0 0 0 12px rgba(141, 170, 141, .12);
  animation: analysis-breathe 1.8s var(--ease) infinite;
}
@keyframes analysis-breathe { 50% { transform: scale(.9); opacity: .62; } }

.probeer-sticky-cta {
  border-color: rgba(200, 162, 75, .42);
  background: var(--color-fairway-green);
  color: #fff;
}
.probeer-sticky-cta .btn { border-color: var(--color-champagne-gold); background: var(--color-champagne-gold); color: var(--color-graphite); }

.trial-section-heading { margin-bottom: var(--space-5); }
.trial-section-heading h2 { margin: 0; font-size: clamp(1.65rem, 4vw, 2.5rem); }
.trial-section-heading .section-eyebrow { margin-bottom: 8px; }
.trial-finding {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--line);
}
.trial-finding-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(141, 170, 141, .4);
  border-radius: 50%;
  color: var(--color-fairway-green);
  font-family: var(--font-heading);
  font-size: .75rem;
  font-weight: 750;
}
.trial-finding-focus .trial-finding-icon { border-color: rgba(200, 162, 75, .6); color: #8a6a22; }
.trial-finding h3 { margin: 0 0 7px; color: var(--color-fairway-green); font-size: .76rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.trial-finding p { margin: 0; color: var(--color-graphite); font-size: clamp(1rem, 2vw, 1.15rem); line-height: 1.65; }
.trial-finding .trial-effect { padding-top: 10px; margin-top: 11px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: .92rem; }

.trial-recording-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 5vw, 54px); }
.trial-recording-grid h3 { margin: 0 0 12px; color: var(--color-fairway-green); font-size: .92rem; }
.trial-upgrade { border-top: 3px solid var(--color-champagne-gold) !important; }
.trial-upgrade h2 { max-width: 22ch; font-size: clamp(1.7rem, 4vw, 2.6rem); }
.trial-upgrade > p { max-width: 64ch; color: var(--ink-soft); }
.trial-unlock-list { display: grid; gap: 9px; padding: 0; margin: var(--space-5) 0 var(--space-6); list-style: none; }
.trial-unlock-list li { position: relative; padding-left: 28px; }
.trial-unlock-list li::before { position: absolute; left: 0; color: var(--color-fairway-green); content: "✓"; font-weight: 800; }
.trial-upgrade-note { margin: 12px 0 0; }

@media (max-width: 620px) {
  .probeer-main { padding: 42px 16px 72px; }
  .probeer-page .card { padding: 22px 18px; }
  .trial-recording-grid { grid-template-columns: 1fr; }
  .trial-finding { grid-template-columns: 34px minmax(0, 1fr); gap: 12px; }
  .trial-finding-icon { width: 32px; height: 32px; }
}

/* Signed-in app shell --------------------------------------------------- */

.app-shell { background: var(--color-off-white); }
.app-nav-open { overflow: hidden; }

.app-sidebar {
  width: 248px;
  padding: 22px 14px 18px;
  border-right: 1px solid rgba(15, 61, 46, .11);
  background: #fff;
  color: var(--ink-soft);
}

.app-sidebar-top { min-height: 42px; margin-bottom: 24px; padding-inline: 10px; }
.app-sidebar-brand { width: 140px; min-width: 0; }
.app-sidebar-brand img { display: block; width: 100%; height: auto; }
.app-sidebar-brand .brand-wordmark { display: block; }

.app-sidebar-nav { gap: 4px; }
.app-sidebar-link,
.app-sidebar-credits {
  min-height: 44px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  font-size: .875rem;
  font-weight: 600;
}
.app-sidebar-link:hover,
.app-sidebar-credits:hover { background: rgba(141, 170, 141, .12); color: var(--color-fairway-green); }
.app-sidebar-link.active { background: rgba(141, 170, 141, .14); color: var(--color-fairway-green); box-shadow: inset 2px 0 0 var(--color-champagne-gold); }
.app-sidebar-link.app-sidebar-cta { margin-block: 7px 12px; background: var(--color-fairway-green); color: #fff; }
.app-sidebar-link.app-sidebar-cta:hover,
.app-sidebar-link.app-sidebar-cta.active { background: var(--color-fairway-green); color: #fff; box-shadow: inset 2px 0 0 var(--color-champagne-gold); filter: brightness(.97); }
.app-sidebar-bottom { border-color: var(--line); }
.app-sidebar-backlink { color: var(--ink-faint); }
.app-sidebar-backlink:hover { color: var(--color-fairway-green); }
.credit-badge { background: rgba(141, 170, 141, .16); color: var(--color-fairway-green); }
.credit-badge-empty { background: var(--color-champagne-gold); color: var(--color-graphite); }
.app-sidebar .lang-picker--on-dark .lang-picker-btn { color: var(--ink-soft); border-color: var(--line); }
.app-sidebar .lang-picker--on-dark .lang-picker-btn:hover { background: rgba(141, 170, 141, .12); color: var(--color-fairway-green); border-color: rgba(15, 61, 46, .18); }

.app-main { margin-left: 248px; background: var(--color-off-white); }
.app-main > .page-header,
.app-main > main.wrap { max-width: 1180px; padding-inline: clamp(20px, 4vw, 44px); }
.app-main > .page-header { padding-top: clamp(38px, 5vw, 68px); padding-bottom: 20px; }
.app-main > .page-header h1 { margin-bottom: 9px; color: var(--color-graphite); font-size: clamp(2rem, 4vw, 3.35rem); font-weight: 520; letter-spacing: -.045em; }
.app-main > .page-header p { max-width: 68ch; font-size: 1rem; line-height: 1.65; }
.app-main > main { padding-top: 8px; padding-bottom: 80px; }

.app-main .card {
  padding: clamp(22px, 3vw, 32px);
  border-color: rgba(15, 61, 46, .11);
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 8px 30px rgba(15, 61, 46, .055);
}
.app-main .card h2,
.app-main .section-title { color: var(--color-graphite); font-size: clamp(1.1rem, 2vw, 1.35rem); }

.app-main .summary-card {
  padding: clamp(28px, 4vw, 44px);
  border-top: 3px solid var(--color-champagne-gold);
  background: #fff;
}
.app-main .summary-text { max-width: 70ch; font-size: clamp(1.15rem, 2.2vw, 1.45rem); line-height: 1.65; }
.app-main .confidence { color: var(--ink-soft); }
.app-main .confidence .dot { background: var(--color-sage) !important; }

.app-main .insight-standalone,
.app-main .insight-chain {
  overflow: hidden;
  border-color: rgba(15, 61, 46, .12);
  border-radius: var(--radius);
  background: rgba(141, 170, 141, .06);
}
.app-main .insight-standalone { border-left-color: var(--color-sage); }
.app-main .insight-card-label { color: var(--color-fairway-green); }
.app-main .insight-chain-number { background: var(--color-fairway-green); color: #fff; }
.app-main .insight-card-text { color: var(--color-graphite); line-height: 1.65; }

.result-detail-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  padding-top: var(--space-5);
  margin: var(--space-5) 0 0;
  border-top: 1px solid rgba(15, 61, 46, .11);
}
.result-detail-list > div { min-width: 0; }
.result-detail-list dt { margin-bottom: 5px; color: var(--color-fairway-green); font-size: .72rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.result-detail-list dd { margin: 0; color: var(--ink-soft); font-size: .9rem; line-height: 1.55; }
.insight-phase { display: inline-flex; padding: 4px 9px; margin: 10px 0 0; border-radius: var(--radius-pill); background: rgba(141, 170, 141, .14); color: var(--color-fairway-green); font-size: .76rem; font-weight: 700; }

.app-main .product-option:has(input:checked) { border-color: var(--color-fairway-green); box-shadow: 0 0 0 3px rgba(141, 170, 141, .18); }
.app-main .product-price { color: var(--color-fairway-green); }

.app-main .credit-pill { border-color: rgba(15, 61, 46, .16); border-radius: var(--radius-pill); }
.app-main .credit-pill:hover { border-color: var(--color-champagne-gold); }
.app-main .credit-pill-value { color: var(--color-fairway-green); }
.account-tabs { flex-wrap: wrap; gap: 6px; padding: 5px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(141, 170, 141, .07); }
.account-tabs .auth-tab { min-height: 44px; padding-inline: 14px; margin: 0; border: 0; border-radius: var(--radius-pill); }
.account-tabs .auth-tab.active { background: #fff; color: var(--color-fairway-green); box-shadow: 0 2px 10px rgba(15, 61, 46, .08); }
.account-main { max-width: 840px !important; }

.app-main .history-list,
.app-main .ledger { overflow: hidden; border-radius: var(--radius-sm); }
.app-main table th { color: var(--color-fairway-green); }
.dashboard-meta { margin: 0 0 7px; }
.dashboard-highlight { margin: 0; color: var(--color-graphite); font-size: 1rem; line-height: 1.62; }
.dashboard-support { margin: 8px 0 0; line-height: 1.58; }

.plan-priority-card {
  border-top: 3px solid var(--color-champagne-gold) !important;
}
.plan-priority-card > h2 {
  max-width: 24ch;
  margin: 12px 0 10px;
  color: var(--color-graphite);
  font-size: clamp(1.65rem, 3.5vw, 2.65rem) !important;
  line-height: 1.12;
}
.plan-priority-why { max-width: 68ch; margin: 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.68; }
.plan-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-6); }
.plan-detail { min-width: 0; padding: 18px; border: 1px solid rgba(15, 61, 46, .1); border-radius: var(--radius-sm); background: rgba(141, 170, 141, .06); }
.plan-detail-wide { grid-column: 1 / -1; }
.plan-detail h3 { margin: 0 0 7px; color: var(--color-fairway-green); font-size: .72rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.plan-detail p { margin: 0; color: var(--color-graphite); line-height: 1.6; }
.plan-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--space-6); }
.plan-timeline-card { margin-top: var(--space-5); }
.plan-timeline { margin-top: 12px; }
.plan-recurring { margin-left: 6px; }

@media (max-width: 620px) {
  .plan-detail-grid { grid-template-columns: 1fr; }
  .plan-detail-wide { grid-column: auto; }
  .plan-actions .btn { width: 100%; justify-content: center; }
}

.progress-list { margin-top: var(--space-4); }
.confidence-chart { display: grid; gap: 13px; margin-top: var(--space-5); }
.confidence-row { display: grid; grid-template-columns: 74px minmax(100px, 1fr) 44px; align-items: center; gap: 12px; font-size: .82rem; }
.confidence-track { display: block; height: 9px; overflow: hidden; border-radius: var(--radius-pill); background: rgba(141, 170, 141, .13); }
.confidence-fill { display: block; width: var(--confidence); height: 100%; border-radius: inherit; background: var(--color-sage); }
.confidence-low { opacity: .48; }
.confidence-medium { opacity: .7; }
.confidence-high { opacity: 1; }
.confidence-value { text-align: right; font-variant-numeric: tabular-nums; }

.app-main .next-action {
  border-color: rgba(200, 162, 75, .38);
  background: rgba(200, 162, 75, .09);
}
.app-main .next-action svg { color: var(--color-champagne-gold); }

.app-main-topbar {
  min-height: 64px;
  background: rgba(247, 247, 245, .96);
  backdrop-filter: blur(8px);
}
.app-main-topbar .nav-brand { width: 128px; }
.app-main-topbar .nav-brand img { display: block; width: 100%; height: auto; }

.sidebar-toggle-btn { min-width: 44px; min-height: 44px; align-items: center; border: 0; background: transparent; }
.sidebar-backdrop { background: rgba(15, 61, 46, .42); }

@media (max-width: 900px) {
  .app-main { margin-left: 0; }
  .app-sidebar { transform: translateX(-100%); transition: transform var(--dur) var(--ease); }
  .sidebar-toggle-checkbox:checked ~ .app-sidebar { transform: translateX(0); }
  .app-main .grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 560px) {
  .app-main > .page-header,
  .app-main > main.wrap { padding-inline: 16px; }
  .app-main > .page-header { padding-top: 30px; }
  .app-main > .page-header h1 { font-size: clamp(2rem, 11vw, 2.65rem); }
  .app-main .card { padding: 20px 17px; }
  .app-main .summary-head { align-items: flex-start; gap: 14px; }
  .app-main .insight-chain-step { grid-template-columns: 30px minmax(0, 1fr); }
  .result-detail-list { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .analysis-pulse { animation: none; }
}

/* Three-tier pricing ---------------------------------------------------- */

.pricing-main { max-width: var(--container-wide); padding: 20px var(--page-gutter) var(--space-9); }
.pricing-products { padding: var(--space-5) 0 var(--space-8); }
.pricing-section-heading { max-width: 760px; margin-bottom: var(--space-7); }
.pricing-section-heading h2 { margin: 0 0 var(--space-4); font-size: clamp(2rem, 4vw, 3.35rem); font-weight: 520; }
.pricing-section-heading p { margin: 0; color: var(--ink-soft); font-size: var(--step-lead); line-height: 1.65; }

.pricing-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: var(--space-4); }
.marketing-price-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: clamp(24px, 3vw, 34px);
  border-color: rgba(15, 61, 46, .13);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 34px rgba(15, 61, 46, .055);
}
.marketing-price-card.highlight {
  position: relative;
  border-color: rgba(15, 61, 46, .42);
  box-shadow: 0 14px 42px rgba(15, 61, 46, .1);
}
.price-card-topline { display: flex; min-height: 28px; align-items: center; justify-content: space-between; gap: 8px; }
.price-card-eyebrow { color: var(--color-fairway-green); font-size: .7rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.price-card-choice { padding: 4px 9px; border-radius: var(--radius-pill); background: rgba(200, 162, 75, .14); color: #745818; font-size: .68rem; font-weight: 750; }
.marketing-price-card h3 { margin: var(--space-4) 0 8px; color: var(--color-graphite); font-size: clamp(1.45rem, 3vw, 2rem); font-weight: 540; }
.price-card-cost { display: flex; align-items: baseline; gap: 8px; color: var(--color-fairway-green); }
.price-card-cost strong { font-family: var(--font-heading); font-size: clamp(2.9rem, 5vw, 4.2rem); font-weight: 520; letter-spacing: -.055em; line-height: 1; }
.price-card-cost span { color: var(--ink-faint); font-size: .82rem; font-weight: 650; }
.price-card-unit { min-height: 24px; margin: 8px 0 var(--space-5); color: var(--ink-faint); font-size: .8rem; }
.price-euro-equivalent { margin-left: 5px; }
.price-card-blurb { min-height: 76px; margin: 0; color: var(--ink-soft); line-height: 1.6; }
.price-card-features { display: grid; gap: 10px; padding: var(--space-5) 0; margin: var(--space-5) 0; border-top: 1px solid var(--line); list-style: none; }
.price-card-features li { position: relative; padding-left: 25px; color: var(--ink-soft); font-size: .875rem; line-height: 1.5; }
.price-card-features li::before { position: absolute; left: 0; color: var(--color-fairway-green); content: "✓"; font-weight: 800; }
.marketing-price-card .btn { width: 100%; margin-top: auto; text-align: center; }
.price-card-loading { min-height: 560px; background: rgba(141, 170, 141, .08); animation: pricing-pulse 1.4s ease-in-out infinite; }
@keyframes pricing-pulse { 50% { opacity: .55; } }
.pricing-load-error { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-4); }

.welcome-credit-band {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 5vw, 52px);
  padding: clamp(28px, 5vw, 54px);
  margin-bottom: var(--space-8);
  border-radius: var(--radius-lg);
  background: var(--color-fairway-green);
  color: #fff;
}
.welcome-credit-number { color: var(--color-champagne-gold); font-family: var(--font-heading); font-size: clamp(4.2rem, 9vw, 7rem); font-weight: 500; letter-spacing: -.06em; line-height: 1; }
.welcome-credit-band h2 { margin: 0 0 8px; color: #fff; font-size: clamp(1.4rem, 3vw, 2.25rem); }
.welcome-credit-band p { max-width: 58ch; margin: 0; color: rgba(247, 247, 245, .74); }

.pricing-operations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.pricing-operation-card { padding: clamp(26px, 4vw, 42px); border: 1px solid rgba(15, 61, 46, .12); border-radius: var(--radius-lg); background: #fff; }
.pricing-operation-card h2 { margin: 0 0 var(--space-4); font-size: clamp(1.45rem, 3vw, 2rem); }
.pricing-operation-card > p { color: var(--ink-soft); }
.pricing-operation-card .bundle-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: var(--space-5) 0; }
.bundle-planned { min-width: 0; padding: 14px; background: var(--color-off-white); }
.bundle-planned .bundle-price { display: block; font-size: 1.35rem; }
.bundle-planned .bundle-cost { display: block; }

@media (max-width: 980px) {
  .pricing-grid-three { grid-template-columns: 1fr; }
  .marketing-price-card { max-width: 720px; }
  .price-card-blurb { min-height: auto; }
  .pricing-operations { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .pricing-main { padding-inline: 16px; }
  .welcome-credit-band { grid-template-columns: 1fr; gap: 12px; }
  .pricing-operation-card .bundle-grid { grid-template-columns: 1fr; }
  .pricing-load-error { align-items: stretch; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .price-card-loading { animation: none; }
}

/* ================================================== public page opening ==
   The homepage opens on a photograph. Every other public page opens on this:
   the same shell and the same type scale, built from the brand tokens instead
   of an image, so the pages read as one site without competing for the eye.
   ======================================================================= */

.public-site .page-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(120% 150% at 8% -10%, rgba(141, 170, 141, .26) 0%, transparent 58%),
    radial-gradient(90% 130% at 95% 0%, rgba(200, 162, 75, .13) 0%, transparent 62%),
    var(--color-off-white);
  padding-block: clamp(52px, 7vw, 104px) clamp(40px, 5vw, 72px);
}

/* A single hairline of fairway green, picking up the rule under the eyebrow
   and carrying it across the band. */
.public-site .page-hero::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--color-champagne-gold) 0%, transparent 42%);
  content: "";
}

.public-site .page-hero-inner {
  position: relative;
  z-index: 1;
}

.public-site .page-hero h1 {
  max-width: 20ch;
  margin: 18px 0 0;
  color: var(--color-fairway-green);
  font-size: clamp(2.25rem, 4.8vw, 3.9rem);
  font-weight: 560;
  letter-spacing: -.04em;
  line-height: 1.05;
}

.public-site .page-hero-lead {
  max-width: 54ch;
  margin: 20px 0 0;
  color: var(--ink-soft);
  font-size: var(--step-lead);
  line-height: 1.6;
}

.public-site .page-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

/* The band already carries the breathing room above the content. */
.public-site .page-hero + main > .section:first-child,
.public-site .page-hero + main.section {
  padding-top: clamp(40px, 5vw, 72px);
}

@media (max-width: 600px) {
  .public-site .page-hero h1 { max-width: none; }
  .public-site .page-hero-actions > .btn { width: 100%; }
}

.public-site .page-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.public-site .page-hero-stats li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--ink-soft);
  font-size: .95rem;
}

.public-site .page-hero-stats strong {
  color: var(--color-fairway-green);
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 560;
  line-height: 1;
}

/* A single reading column on the public pages, replacing the inline
   max-width/margin that each page used to carry its own version of. */
.public-site .prose-block {
  max-width: var(--container-narrow);
  margin: 0 auto 48px;
}

.public-site .prose-block:last-child { margin-bottom: 0; }

.public-site .steps-grid-plain { margin-bottom: 56px; }

.public-site .filming-rules {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.7;
}

.public-site .example-preview-full { max-width: none; }
.public-site .cookies-note { margin-top: 16px; }