/* landing.css — marketing landing page at the site root.
 * 1:1 port of the approved "Fix My Settings — Landing (light)" prototype
 * (design_handoff_fix_my_settings). Standalone on purpose (same pattern as
 * guides.css): same design tokens as css/style.css — warm "1a Bright &
 * friendly" palette, self-hosted webfonts via css/fonts.css, light default
 * + dark via prefers-color-scheme (the handoff is light-only; dark values
 * are our own warm-toned adaptation).
 * No frameworks, no CDNs. Responsive down to 360 px. */

:root {
  --bg: #FFFBF6;
  --surface: #FFFFFF;
  --surface-2: #FBF9F5;
  --surface-3: #F6F4EF;
  --ink: #211F1D;
  --text: #39342C;
  --text-body: #655F54;
  --text-muted: #6C665B;
  --text-faint: #948D7F;
  --border: #F0EBE2;
  --border-strong: #E6DFD2;

  --accent: #EF4E23;
  --accent-strong: #C23D18;
  --accent-contrast: #ffffff;
  --accent-soft: #FFF7F0;
  --accent-soft-2: #FCE9E1;

  --ok: #1FA971;
  --ok-soft: #E6F7EF;
  --ok-text: #178A5A;
  --ok-border: #BFE8D5;

  /* severity chips (hero fix-card), mirrors style.css danger/warn */
  --sev-high: #D14343;
  --sev-high-bg: #FBE3E3;
  --sev-med: #C68A2E;
  --sev-med-bg: #FBF0DC;

  /* strikethrough "before" values + the arrow between them */
  --val-old: #A79F90;
  --val-arrow: #B8B0A0;

  /* illustrated tiles + hero/CTA radial glows */
  --tile-bg: #FFF6EF;
  --tile-bg-2: #FFF1E9;
  --hero-glow: #FFE7D8;
  --cta-glow: #FFE0CE;

  /* points-plan card */
  --plan-points-bg: #FFF7F0;
  --plan-points-border: #F5D9C6;
  --plan-points-divider: #F5E2D3;
  --plan-points-shadow: 0 16px 40px rgba(239, 78, 35, 0.08);

  --shadow-sm: 0 6px 18px rgba(60, 50, 35, 0.04);
  --shadow-md: 0 8px 24px rgba(60, 50, 35, 0.05);
  --shadow-hero-card: 0 24px 54px rgba(60, 50, 35, 0.12);
  --shadow-lift: 0 12px 32px rgba(60, 50, 35, 0.14);
  --shadow-cta: 0 10px 24px rgba(239, 78, 35, 0.28);
  --shadow-cta-lg: 0 12px 30px rgba(239, 78, 35, 0.3);
  --card-hover-border: #F0C7B4;

  --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Space Grotesk", "Hanken Grotesk", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --radius: 16px;
  --radius-lg: 20px;
  --radius-sm: 12px;
  --speed: 180ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17140F;
    --surface: #201C15;
    --surface-2: #29241B;
    --surface-3: #29241B;
    --ink: #F5F1E8;
    --text: #E9E4DA;
    --text-body: #C9C1B2;
    --text-muted: #A69C8C;
    --text-faint: #8C8271;
    --border: #332D22;
    --border-strong: #463D2E;

    --accent: #FF7A45;
    --accent-strong: #FFA07E;
    --accent-contrast: #201207;
    --accent-soft: #33231A;
    --accent-soft-2: #47301F;

    --ok: #2FBF83;
    --ok-soft: #143426;
    --ok-text: #7FDDB4;
    --ok-border: #1F5A3E;

    --sev-high: #F0A3A3;
    --sev-high-bg: #3D211E;
    --sev-med: #EDD3A0;
    --sev-med-bg: #362A12;

    --val-old: #7E7566;
    --val-arrow: #6B6252;

    --tile-bg: #2A2317;
    --tile-bg-2: #2E2518;
    --hero-glow: #33231A;
    --cta-glow: #3A2617;

    --plan-points-bg: #2C2117;
    --plan-points-border: #4A362A;
    --plan-points-divider: #423226;
    --plan-points-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);

    --shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-hero-card: 0 24px 54px rgba(0, 0, 0, 0.5);
    --shadow-lift: 0 12px 32px rgba(0, 0, 0, 0.55);
    --shadow-cta: 0 10px 24px rgba(0, 0, 0, 0.45);
    --shadow-cta-lg: 0 12px 30px rgba(0, 0, 0, 0.5);
    --card-hover-border: #5C4430;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  background: var(--bg);
  color: var(--text);
}

/* handoff typography: headings in Space Grotesk, tight tracking, ink */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  letter-spacing: -0.02em;
}

.wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

a { color: var(--accent); }
a:hover { color: var(--accent-strong); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

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

/* light/dark-only alternates (official brand logo variants) */
.only-dark { display: none !important; }
@media (prefers-color-scheme: dark) {
  .only-light { display: none !important; }
  .only-dark { display: inline !important; }
}

/* ---------- header: moved to css/header.css (shared header) ---------- */

/* ---------- shared section scaffolding ---------- */

.section { padding: 5.25rem 0; }

/* full-width white band (pricing, guides) */
.band {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 5.25rem 0;
}

.section-head { text-align: center; margin-bottom: 3rem; }

.eyebrow {
  margin: 0 0 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.section-head h2, .guides-head h2 {
  margin: 0;
  font-size: clamp(1.7rem, 4vw, 2.375rem);
  font-weight: 700;
  line-height: 1.1;
}

.section-sub {
  margin: 0.75rem auto 0;
  max-width: 42rem;
  font-size: 1.05rem;
  color: var(--text-muted);
}

/* ---------- hero: 2-col grid, radial peach glow top right ---------- */

.hero {
  background: radial-gradient(900px 500px at 84% -12%, var(--hero-glow), transparent 60%);
  border-bottom: 1px solid var(--border);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 3rem;
  align-items: center;
  padding-top: 4.875rem;
  padding-bottom: 4.25rem;
}

@media (max-width: 979px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 2.4rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .fix-card { max-width: 520px; }
}

/* green "runs in browser" pill */
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 1.375rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ok);
  background: var(--ok-soft);
  padding: 6px 13px;
  border-radius: 999px;
}

.pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  flex-shrink: 0;
}

.hero h1 {
  margin: 0 0 1.25rem;
  font-size: clamp(2.1rem, 4.6vw, 3.625rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.025em;
}

.h1-accent { color: var(--accent); }

.hero .sub {
  margin: 0 0 1.875rem;
  max-width: 30.6rem;
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--text-body);
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 1.625rem;
}

.btn-hero {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  padding: 15px 26px;
  border-radius: 13px;
  text-decoration: none;
  box-shadow: var(--shadow-cta);
  transition: background var(--speed) ease, transform var(--speed) ease,
              box-shadow var(--speed) ease;
}

.btn-hero:hover {
  background: var(--accent-strong);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-lift);
}

@media (prefers-color-scheme: dark) {
  /* keep white-on-orange CTAs in dark too (per the shared header) */
  .btn-hero { background: #EF4E23; }
  .btn-hero:hover { background: #C23D18; }
}

/* Deliberately quieter than .btn-hero (analyst funnel walk: the guides
 * link competed with the primary CTA at equal visual weight) — a plain
 * text link, vertically aligned with the hero button. */
.btn-ghost {
  display: inline-block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--muted);
  background: none;
  border: none;
  padding: 15px 10px;
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color var(--speed) ease;
}

.btn-ghost:hover {
  color: var(--text);
  text-decoration: underline;
}

/* brand trust-line: logos/chips in front of names */
.trust-line {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0;
  font-size: 0.845rem;
  color: var(--text-faint);
}

.trust-brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.trust-brand b { color: var(--text); font-weight: 600; }

.trust-dot { color: var(--border-strong); }

/* rounded-square brand chips (handoff stand-ins for brands whose official
 * asset is not readable on this background — see docs/design.md) */
.brand-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}

.brand-chip.chip-sm { width: 18px; height: 18px; border-radius: 5px; }

.chip-bambu { background: #00AE42; }
.chip-prusa { background: #FA6831; }
.chip-creality { background: #E23A2E; }
.chip-voron { background: #D0112B; }
.chip-anycubic { background: #12B0E8; }
.chip-elegoo { background: #00A2E0; }

/* ---------- hero fix-card (example report) ---------- */

.fix-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow-hero-card);
}

.fix-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 15px;
}

.fix-card-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
}

.fix-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 5px 0 0;
}

.fix-card-machine {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-faint);
}

.fix-count {
  font-family: var(--font-mono);
  font-size: 0.69rem;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft-2);
  padding: 5px 10px;
  border-radius: 7px;
  white-space: nowrap;
  flex-shrink: 0;
}

.fix-rows { display: flex; flex-direction: column; gap: 10px; }

.fix-row {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 13px 14px;
}

.fix-row-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}

.fix-name { font-size: 0.845rem; font-weight: 600; color: var(--text); }

.sev {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

.sev-high { color: var(--sev-high); background: var(--sev-high-bg); }
.sev-med { color: var(--sev-med); background: var(--sev-med-bg); }

.fix-vals { margin: 0; font-family: var(--font-mono); font-size: 0.8125rem; }
.fix-vals .old { color: var(--val-old); }
.fix-vals .arrow { color: var(--val-arrow); }
.fix-vals .new { color: var(--ok); font-weight: 700; }

.fix-ready {
  margin-top: 13px;
  background: var(--ok-soft);
  border: 1px solid var(--ok-border);
  border-radius: 12px;
  padding: 11px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.fix-ready-label { font-size: 0.8125rem; font-weight: 600; color: var(--ok-text); }
.fix-ready-file { font-family: var(--font-mono); font-size: 0.75rem; color: var(--ok-text); }

/* ---------- how it works: 3 illustrated cards ---------- */

.how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

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

.how-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-md);
  transition: transform var(--speed) ease, border-color var(--speed) ease;
}

.how-card:hover { transform: translateY(-3px); border-color: var(--card-hover-border); }

/* illustrated tile: warm bg, the SVG drawing centered */
.tile {
  height: 120px;
  border-radius: 14px;
  background: var(--tile-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.step-mono {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--accent);
}

.how-card h3 {
  margin: 0 0 8px;
  font-size: 1.1875rem;
  font-weight: 600;
}

.h3-optional { font-size: 0.78rem; color: var(--text-faint); font-weight: 500; }

.how-card p { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--text-muted); }
.how-card p.step-mono { margin: 0 0 8px; font-size: 0.75rem; color: var(--accent); }

/* ---------- pricing: free vs points ---------- */

.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

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

.plan { border-radius: var(--radius-lg); padding: 30px; }

.plan-free {
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.plan-points {
  background: var(--plan-points-bg);
  border: 1px solid var(--plan-points-border);
  box-shadow: var(--plan-points-shadow);
}

.plan-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.plan-head h3 {
  margin: 0;
  font-size: 1.3125rem;
  font-weight: 700;
}

.plan-price {
  font-family: var(--font-mono);
  font-size: 0.69rem;
  font-weight: 700;
  color: var(--ok);
  background: var(--ok-soft);
  padding: 4px 10px;
  border-radius: 999px;
}

.plan-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.plan-list li {
  display: flex;
  gap: 10px;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--text);
}

.plan-list strong { color: var(--ink); font-weight: 600; }

.tick { color: var(--ok); flex-shrink: 0; }
.diamond { color: var(--accent); flex-shrink: 0; }

.plan-points .plan-list li { justify-content: space-between; }
.plan-points .plan-list li > span:nth-child(2) { flex: 1; }

.pts {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
  flex-shrink: 0;
}

/* points -> value translation (analyst funnel walk: "is this worth it?"
 * must be answerable on the pricing card itself) */
.plan-value {
  margin-top: 16px;
  font-size: 0.875rem;
  color: var(--text-body);
}
.plan-value strong { color: var(--ink); }

.pricing-why {
  max-width: 620px;
  margin: 10px auto 0;
  text-align: center;
  font-size: 0.9375rem;
}

.plan-foot {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--plan-points-divider);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 0.875rem;
  color: var(--text-body);
}

.plan-foot strong { color: var(--ink); }

.btn-signup {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  padding: 11px 18px;
  border-radius: 11px;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--speed) ease;
}

.btn-signup:hover { background: var(--accent-strong); color: #fff; }

@media (prefers-color-scheme: dark) {
  .btn-signup { background: #EF4E23; }
  .btn-signup:hover { background: #C23D18; }
}

/* ---------- supported printers: 3×2 brand grid ---------- */

.printer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 899px) { .printer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { .printer-grid { grid-template-columns: 1fr; } }

.printer-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--speed) ease, border-color var(--speed) ease;
}

.printer-card:hover { transform: translateY(-3px); border-color: var(--card-hover-border); }

/* 42px rounded-square brand tile (handoff chip; glyph or letter) */
.brand-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}

.brand-badge.chip-elegoo { font-size: 18px; }

.printer-info { min-width: 0; }

.printer-name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  line-height: 1.2;
  display: flex;
  align-items: center;
}

.printer-note { margin: 2px 0 0; font-size: 0.78rem; color: var(--text-faint); }

/* official brand wordmarks (app/img/brands/) sized to the name line */
.brand-wordmark { display: block; width: auto; }
.wm-prusa { height: 34px; }
.wm-creality { height: 20px; }
.wm-voron { height: 26px; }
.wm-elegoo { height: 17px; }

/* ---------- guides: 4 illustrated cards ---------- */

.guides-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}

.guides-head .eyebrow { margin-bottom: 0.75rem; }

.guides-all {
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}

.guides-all:hover { color: var(--accent-strong); }

.guide-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

@media (max-width: 979px) { .guide-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 559px) { .guide-grid { grid-template-columns: 1fr; } }

.guide-card {
  display: block;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  transition: transform var(--speed) ease, border-color var(--speed) ease;
}

.guide-card:hover {
  transform: translateY(-3px);
  border-color: var(--card-hover-border);
  color: var(--text);
}

.guide-tile {
  height: 96px;
  background: var(--tile-bg-2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.guide-body { padding: 18px 20px; }

.guide-cat {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 0.69rem;
  letter-spacing: 0.04em;
  color: var(--accent);
}

.guide-card h3 {
  margin: 0 0 6px;
  font-size: 1.0625rem;
  font-weight: 600;
}

.guide-blurb {
  margin: 0;
  font-size: 0.845rem;
  line-height: 1.45;
  color: var(--text-muted);
}

/* ---------- final CTA: centered on a radial peach glow ---------- */

.bottom-cta {
  background: radial-gradient(800px 380px at 50% 120%, var(--cta-glow), transparent 62%);
  border-top: 1px solid var(--border);
}

.cta-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 5.5rem 1.5rem;
  text-align: center;
}

.bottom-cta h2 {
  margin: 0 0 1rem;
  font-size: clamp(1.9rem, 4.6vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

.cta-sub {
  margin: 0 auto 1.875rem;
  max-width: 30rem;
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--text-body);
}

.btn-hero-lg { font-size: 1.0625rem; padding: 16px 32px; box-shadow: var(--shadow-cta-lg); }

/* ---------- footer: brand + Beta tag left, links right ---------- */

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.footer-brand { display: flex; align-items: center; gap: 10px; }

.footer-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text);
}

.footer-beta {
  font-family: var(--font-mono);
  font-size: 0.69rem;
  color: var(--text-faint);
  background: var(--surface-3);
  padding: 3px 8px;
  border-radius: 6px;
}

.footer-links { display: flex; gap: 24px; font-size: 0.875rem; }

.footer-links a { color: var(--text-muted); text-decoration: none; }
.footer-links a:hover { color: var(--accent); }

/* ---------- buy points on the landing pricing band (v2.4) ---------- */
.buy-band {
  margin-top: 22px;
  padding: 26px 30px 28px;
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.buy-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 18px;
}
.buy-head h3 { margin: 0; font-size: 1.3125rem; font-weight: 700; }
.buy-currency { display: inline-flex; align-items: center; gap: 8px; }
.buy-currency-label { font-size: 0.82rem; color: var(--ink); opacity: 0.7; }
#lp-currency {
  font: inherit;
  font-size: 0.9rem;
  padding: 7px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--bg);
  color: var(--ink);
}
.buy-packs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 719px) { .buy-packs { grid-template-columns: 1fr; } }
.buy-pack {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  text-align: left;
  padding: 18px 18px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.buy-pack:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--card-hover-border); }
.buy-pack:disabled { opacity: 0.55; cursor: default; transform: none; box-shadow: none; }
.buy-pack-feature { border-color: var(--accent); box-shadow: var(--plan-points-shadow); }
.buy-pack-tag {
  position: absolute;
  top: -10px;
  right: 14px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent);
  padding: 3px 8px;
  border-radius: 999px;
}
.buy-pack-label { font-size: 1.02rem; font-weight: 700; }
.buy-pack-points { font-size: 0.86rem; color: var(--ink); opacity: 0.7; }
.buy-pack-price {
  font-family: var(--font-mono);
  font-size: 1.35rem;
  font-weight: 800;
  margin-top: 6px;
}
.buy-pack-cta {
  margin-top: 12px;
  align-self: stretch;
  text-align: center;
  font-weight: 700;
  font-size: 0.92rem;
  color: #fff;
  background: var(--accent);
  padding: 9px 12px;
  border-radius: var(--radius);
}
.buy-pack:hover .buy-pack-cta { background: var(--accent-strong); }
.buy-sub { margin-top: 16px; font-size: 0.86rem; line-height: 1.5; }
.buy-note { margin-top: 10px; font-size: 0.86rem; font-weight: 600; }
.buy-note-warn { color: var(--sev-high); }
.buy-note-ok { color: var(--ok-text); }
.buy-loading { margin: 0; }

/* ---------- FAQ (v2.6) ---------- */
.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 20px;
}
@media (max-width: 819px) { .faq-grid { grid-template-columns: 1fr; } }
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: 2px 18px;
}
.faq-item summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1.02rem;
  padding: 15px 0;
  list-style: none;
  position: relative;
  padding-right: 28px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--accent);
  transition: transform var(--speed) ease;
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p {
  margin: 0;
  padding: 0 0 16px;
  color: var(--ink);
  opacity: 0.82;
  line-height: 1.55;
  font-size: 0.93rem;
}
.faq-item code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--surface);
  padding: 1px 5px;
  border-radius: 4px;
}

/* ---------- filament calibration guide spotlight (v2.33.0) ---------- */
.filcal-card {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 2rem;
  align-items: center;
  padding: 2rem 2.2rem;
  border-radius: 18px;
  border: 1px solid rgba(27, 158, 78, 0.35);
  background: linear-gradient(120deg, rgba(27, 158, 78, 0.07), rgba(27, 158, 78, 0.015) 60%);
}
.filcal-eyebrow { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; }
.filcal-tag {
  display: inline-block;
  padding: 0.12rem 0.6rem;
  border-radius: 99px;
  background: #1B9E4E;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: none;
}
.filcal-copy h2 { margin: 0.35rem 0 0.6rem; }
.filcal-btn {
  display: inline-block;
  margin-top: 1rem;
  background: #1B9E4E;
  /* .btn-hero's shadow token is ORANGE — recolor it to match the green */
  box-shadow: 0 10px 24px rgba(27, 158, 78, 0.28);
}
.filcal-btn:hover {
  background: #157B3C;
  box-shadow: 0 12px 30px rgba(27, 158, 78, 0.3);
}
.filcal-note { margin: 0.6rem 0 0; font-size: 0.8rem; color: var(--text-muted, #6C665B); }
.filcal-steps { display: flex; flex-direction: column; gap: 0.55rem; }
.filcal-step {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.85rem;
  border-radius: 10px;
  background: var(--card-bg, #FFFBF6);
  border: 1px solid var(--card-border, #F0EBE2);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-muted, #6C665B);
}
.filcal-dot {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #C9C2B4;
}
.filcal-step-done { color: inherit; }
.filcal-step-done .filcal-dot {
  border-color: #1B9E4E;
  background: #1B9E4E url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5" fill="none" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/10px no-repeat;
}
.filcal-step-active { border-color: #1B9E4E; color: inherit; }
.filcal-step-active .filcal-dot { border-color: #1B9E4E; }
@media (max-width: 760px) {
  .filcal-card { grid-template-columns: 1fr; padding: 1.4rem 1.2rem; }
  .filcal-steps { flex-direction: row; flex-wrap: wrap; }
  .filcal-step { font-size: 0.78rem; padding: 0.35rem 0.6rem; }
}
@media (prefers-color-scheme: dark) {
  .filcal-card {
    border-color: rgba(39, 185, 95, 0.4);
    background: linear-gradient(120deg, rgba(39, 185, 95, 0.1), rgba(39, 185, 95, 0.02) 60%);
  }
  .filcal-tag, .filcal-btn { background: #1B9E4E; }
  .filcal-btn:hover { background: #27B95F; }
  .filcal-step { background: rgba(255, 255, 255, 0.04); border-color: #332D22; }
  .filcal-dot { border-color: #57503F; }
  .filcal-step-done .filcal-dot, .filcal-step-active .filcal-dot { border-color: #27B95F; }
  .filcal-step-done .filcal-dot { background-color: #27B95F; }
}

/* ---- 3D-journey roadmap spotlight (v2.37.0) — purple sibling of the
 * green filcal card; same layout recipe, journey identity color ---- */
.journey-card {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 2rem;
  align-items: center;
  padding: 2rem 2.2rem;
  border-radius: 18px;
  border: 1px solid rgba(122, 79, 191, 0.35);
  background: linear-gradient(120deg, rgba(122, 79, 191, 0.07), rgba(122, 79, 191, 0.015) 60%);
}
.journey-eyebrow { color: #7A4FBF; }
.journey-copy h2 { margin: 0.35rem 0 0.6rem; }
.journey-btn {
  display: inline-block;
  margin-top: 1rem;
  background: #7A4FBF;
  /* .btn-hero's shadow token is ORANGE — recolor to the journey purple */
  box-shadow: 0 10px 24px rgba(122, 79, 191, 0.28);
}
.journey-btn:hover {
  background: #633E9E;
  box-shadow: 0 12px 30px rgba(122, 79, 191, 0.3);
}
.journey-note { margin: 0.6rem 0 0; font-size: 0.8rem; color: var(--text-muted, #6C665B); }
.journey-stations { display: flex; flex-direction: column; gap: 0.55rem; }
.journey-station {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.85rem;
  border-radius: 10px;
  background: var(--card-bg, #FFFBF6);
  border: 1px solid var(--card-border, #F0EBE2);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-muted, #6C665B);
}
.journey-dot {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #C9C2B4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--text-muted, #6C665B);
}
.journey-station-done { color: inherit; }
.journey-station-done .journey-dot { border-color: #1B9E4E; background: #1B9E4E; color: #fff; }
.journey-station-active { border-color: #7A4FBF; color: inherit; }
.journey-station-active .journey-dot { border-color: #7A4FBF; color: #7A4FBF; }
@media (max-width: 760px) {
  .journey-card { grid-template-columns: 1fr; padding: 1.4rem 1.2rem; }
  .journey-stations { flex-direction: row; flex-wrap: wrap; }
  .journey-station { font-size: 0.78rem; padding: 0.35rem 0.6rem; }
}
@media (prefers-color-scheme: dark) {
  .journey-card {
    border-color: rgba(169, 139, 221, 0.4);
    background: linear-gradient(120deg, rgba(169, 139, 221, 0.1), rgba(169, 139, 221, 0.02) 60%);
  }
  .journey-eyebrow { color: #A98BDD; }
  .journey-btn { background: #7A4FBF; }
  .journey-btn:hover { background: #8f63d6; }
  .journey-station { background: rgba(255, 255, 255, 0.04); border-color: #332D22; }
  .journey-dot { border-color: #57503F; }
  .journey-station-done .journey-dot { border-color: #27B95F; background-color: #27B95F; }
  .journey-station-active { border-color: #A98BDD; }
  .journey-station-active .journey-dot { border-color: #A98BDD; color: #A98BDD; }
}

/* ==================== v2.39.0 redesign (owner's mockup) ====================
 * Hero stat row + green free-pill + the four color-coded tool bands.
 * New BLUE identity for printer calibration: #1E63D6 (dark #5B9BFF) —
 * replaces the old teal that sat too close to the filament green. */

.hero-stats {
  display: flex;
  gap: 0;
  margin-top: 1.6rem;
  flex-wrap: wrap;
}
.hero-stat {
  display: flex;
  flex-direction: column;
  padding: 0 1.4rem;
  border-left: 1px solid var(--border, #F0EBE2);
}
.hero-stat:first-child { padding-left: 0; border-left: 0; }
.hero-stat b {
  font-family: var(--font-display, sans-serif);
  font-size: 1.7rem;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.hero-stat span { font-size: 0.8rem; color: var(--text-muted, #6C665B); }

/* ---- tool bands ---- */
.tool-band {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  border: 1px solid var(--border, #F0EBE2);
  border-left: 4px solid var(--tool, #EF4E23);
  border-radius: 18px;
  overflow: hidden;
  background: var(--card-bg, #fff);
  margin-bottom: 1.4rem;
  box-shadow: 0 8px 24px rgba(60, 50, 35, 0.05);
}
.tool-diag    { --tool: #EF4E23; --tool-tint: #FCE9E1; --tool-tintbg: #FDF1EB; }
.tool-cal     { --tool: #1E63D6; --tool-tint: #E5EDFC; --tool-tintbg: #EEF3FC; }
.tool-fil     { --tool: #1B9E4E; --tool-tint: #E4F5EA; --tool-tintbg: #EFF8F2; }
.tool-journey { --tool: #7A4FBF; --tool-tint: #EFE8F9; --tool-tintbg: #F5F0FB; }

.tool-copy { padding: 2rem 2.2rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem; }
.tool-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.22rem 0.75rem;
  border-radius: 999px;
  background: var(--tool-tint);
  color: var(--tool);
  font-family: var(--font-display, sans-serif);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.tool-num::after { content: " ·"; }
.tool-copy h3 { margin: 0.1rem 0 0; font-family: var(--font-display, sans-serif); font-size: 1.45rem; }
.tool-copy p { margin: 0; color: var(--text-muted, #6C665B); line-height: 1.6; }
.tool-cta {
  display: inline-block;
  margin-top: 0.7rem;
  background: var(--tool);
  color: #fff;
  font-family: var(--font-display, sans-serif);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 12px 22px;
  border-radius: 12px;
  text-decoration: none;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--tool) 28%, transparent);
  transition: transform 0.15s ease, filter 0.15s ease;
}
.tool-cta:hover { transform: translateY(-1px); filter: brightness(0.94); color: #fff; }

.tool-visual {
  background: var(--tool-tintbg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.6rem;
}

/* diag visual: broken report -> fixed card */
.tv-diag { display: flex; align-items: center; gap: 0.9rem; }
.tv-doc, .tv-fixed {
  width: 84px;
  height: 96px;
  border-radius: 12px;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tv-doc { background: var(--card-bg, #fff); box-shadow: 0 6px 18px rgba(60, 50, 35, 0.08); }
.tv-doc-squiggle {
  height: 22px;
  border-radius: 6px;
  background:
    linear-gradient(135deg, transparent 42%, #EF4E23 42%, #EF4E23 58%, transparent 58%),
    linear-gradient(45deg, transparent 42%, #EF4E23 42%, #EF4E23 58%, transparent 58%);
  background-size: 12px 100%;
  opacity: 0.75;
}
.tv-doc-line { height: 7px; border-radius: 4px; background: var(--border, #F0EBE2); }
.tv-doc-line.short { width: 60%; }
.tv-doc-line.light { background: rgba(255, 255, 255, 0.55); }
.tv-fixed { background: var(--tool, #EF4E23); box-shadow: 0 10px 22px rgba(239, 78, 35, 0.35); }
.tv-arrow { font-size: 1.5rem; color: var(--text-muted, #6C665B); }

/* cal visual: 4 checklist rows */
.tv-steps { display: flex; flex-direction: column; gap: 0.5rem; width: min(260px, 100%); }
.tv-step {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--card-bg, #fff);
  border: 1.5px solid transparent;
  border-radius: 11px;
  padding: 0.55rem 0.8rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted, #6C665B);
}
.tv-step b { margin-left: auto; font-family: var(--font-display, sans-serif); color: var(--tool); font-variant-numeric: tabular-nums; }
.tv-step-dot {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--border, #F0EBE2);
  color: var(--text-muted, #6C665B);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
}
.tv-step.is-done { color: var(--ink, #211F1D); border-color: var(--tool-tint); }
.tv-step.is-done .tv-step-dot { background: var(--tool); color: #fff; }
.tv-step.is-next { border-color: var(--tool); color: var(--ink, #211F1D); }
.tv-step.is-next .tv-step-dot { background: var(--tool); color: #fff; }

/* fil visual: flow-dynamics line picker */
.tv-flow { background: var(--card-bg, #fff); border-radius: 14px; padding: 1rem 1.2rem; box-shadow: 0 6px 18px rgba(60, 50, 35, 0.07); }
.tv-flow-label {
  margin: 0 0 0.6rem;
  font-family: var(--font-display, sans-serif);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted, #6C665B);
}
.tv-flow-lines { display: flex; gap: 0.55rem; }
.tv-flow-lines span {
  width: 34px;
  height: 52px;
  border-radius: 8px;
  border: 1.5px solid var(--border, #F0EBE2);
  background:
    repeating-linear-gradient(to bottom, transparent 0 6px, var(--border, #F0EBE2) 6px 8px);
}
.tv-flow-lines span.is-best { border: 2px solid var(--tool); }
.tv-flow-k { margin: 0.7rem 0 0; font-size: 0.82rem; font-weight: 600; display: flex; justify-content: space-between; gap: 1rem; }
.tv-flow-k b { color: var(--tool); font-family: var(--font-display, sans-serif); font-variant-numeric: tabular-nums; }

/* journey visual: mini milestone track */
.tv-miles { display: flex; flex-direction: column; gap: 0; position: relative; }
.tv-mile { display: flex; align-items: center; gap: 0.7rem; font-size: 0.85rem; font-weight: 600; color: var(--text-muted, #6C665B); padding: 0.42rem 0; }
.tv-mile-dot {
  flex: none;
  min-width: 26px;
  height: 26px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--card-bg, #fff);
  border: 2px solid var(--tool-tint);
  color: var(--tool);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display, sans-serif);
  font-size: 0.62rem;
  font-weight: 700;
}
.tv-mile.is-done .tv-mile-dot, .tv-mile.is-here .tv-mile-dot { background: var(--tool); border-color: var(--tool); color: #fff; }
.tv-mile.is-here { color: var(--ink, #211F1D); }

@media (max-width: 820px) {
  .tool-band { grid-template-columns: 1fr; }
  .tool-copy { padding: 1.5rem 1.3rem; }
  .tool-visual { padding: 1.3rem; }
  .hero-stat { padding: 0 1rem; }
  .hero-stat b { font-size: 1.4rem; }
}

@media (prefers-color-scheme: dark) {
  .tool-band { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); }
  .tool-diag    { --tool: #FF7A45; --tool-tint: rgba(255, 122, 69, 0.16); --tool-tintbg: #2A2019; }
  .tool-cal     { --tool: #5B9BFF; --tool-tint: rgba(91, 155, 255, 0.16); --tool-tintbg: #1C2436; }
  .tool-fil     { --tool: #27B95F; --tool-tint: rgba(39, 185, 95, 0.16);  --tool-tintbg: #192B1F; }
  .tool-journey { --tool: #A98BDD; --tool-tint: rgba(169, 139, 221, 0.18); --tool-tintbg: #262035; }
  .tv-doc { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); }
  .tv-doc-line.light { background: rgba(255, 255, 255, 0.4); }
  .tv-flow { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); }
  .tool-cta { color: #17140F; }
  .tool-cta:hover { color: #17140F; filter: brightness(1.08); }
}