/* 3dSynth marketing — Clay-inspired shell (tokens: styles/tokens.css) */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Mono:wght@400;500;600;700&display=swap");

/* ————————————————————————————————————————————————————————————————— */
/* Base reset                                                         */
/* ————————————————————————————————————————————————————————————————— */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  scroll-behavior: smooth;
}

html[data-theme="light"]::selection,
html[data-theme="light"] *::selection {
  background: var(--selection-bg, #1d2026);
  color: var(--selection-fg, #fff);
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  background: var(--bg-page, var(--bg-primary));
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss03" 1;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: calc(var(--nav-z, 9999) + 1);
  padding: 0.5rem 1rem;
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: 6px;
}
.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
}

/* ————————————————————————————————————————————————————————————————— */
/* Typography                                                         */
/* ————————————————————————————————————————————————————————————————— */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: var(--tracking-snug);
  line-height: var(--leading-tight);
}

h1 {
  font-size: var(--text-h1);
  letter-spacing: var(--tracking-tight);
}

h2 {
  font-size: var(--text-h2);
  letter-spacing: var(--tracking-tight);
}

h3 {
  font-size: var(--text-h3);
}

p {
  margin: 0;
}

strong {
  font-weight: 600;
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 0.1em 0.35em;
  background: var(--oat-200);
  border-radius: 4px;
}

.mono,
.kicker {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
}

.u-text-balance {
  text-wrap: balance;
}

.u-text-accent {
  color: var(--accent-primary);
}

.u-text-center {
  text-align: center;
}

.u-text-secondary {
  color: var(--text-secondary);
}

.u-text-muted {
  color: var(--text-muted);
}

/* Link styles within prose */
.link,
.prose-page a,
.faq-answer a,
.lead a {
  color: var(--accent-primary);
  text-decoration: underline;
  text-decoration-color: rgba(var(--accent-primary-rgb), 0.3);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
.link:hover,
.prose-page a:hover,
.faq-answer a:hover,
.lead a:hover {
  text-decoration-color: var(--accent-primary);
}

/* ————————————————————————————————————————————————————————————————— */
/* Container & grid                                                   */
/* ————————————————————————————————————————————————————————————————— */

.container {
  width: 100%;
  max-width: var(--container-max, 75rem);
  margin-inline: auto;
  padding-inline: var(--container-pad, 1.5rem);
}

.container--wide {
  max-width: var(--container-max-wide, 90rem);
}

.container--narrow {
  max-width: 56rem;
}

.container--prose {
  max-width: 44rem;
}

/* ~1200px: Clay’s inner .container (hero copy, etc.) */
.container--inner {
  max-width: var(--container-inner, 75rem);
}

.container--reading {
  max-width: var(--container-reading, var(--container-inner, 75rem));
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}

.row--tight {
  gap: var(--space-3);
}

.row--loose {
  gap: var(--space-6);
}

.row--center {
  justify-content: center;
}

.row--between {
  justify-content: space-between;
}

.row--align-end {
  align-items: flex-end;
}

.row--align-center {
  align-items: center;
}

/* ————————————————————————————————————————————————————————————————— */
/* Section system (full-bleed)                                        */
/* ————————————————————————————————————————————————————————————————— */

.section {
  position: relative;
  width: 100%;
  padding-block: var(--section-y);
  background: var(--bg-section-white);
}

.section--oat {
  background: var(--bg-section-oat);
}

#modules.section--oat {
  background-color: var(--bg-section-oat);
  background-image: var(--pastel-overlay-wash);
}

.section--oat-deep {
  background: var(--bg-section-oat-deep);
}

.section--dark {
  background: var(--bg-section-dark);
  color: var(--text-on-dark);
}

/* Final CTA: one full-section wash, same family as the pricing table (not per-column) */
.section--final-cta {
  background-color: var(--bg-primary);
  background-image: linear-gradient(
    165deg,
    var(--blueberry-50) 0%,
    #f2f4fc 38%,
    var(--oat-200) 100%
  );
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.section--final-cta h2 {
  color: var(--text-primary);
}

/* Effect library band: mint → lilac → peach (distinct from blueberry/oat washes) */
.section--effect-library-wash {
  background-color: #f5faf7;
  background-image: linear-gradient(
    125deg,
    #d4ebe0 0%,
    #e8e2f4 48%,
    #fde8dc 100%
  );
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.section--dark h1,
.section--dark h2,
.section--dark h3 {
  color: var(--text-on-dark);
}
.section--dark .lead,
.section--dark p {
  color: var(--text-on-dark-muted);
}

.section--tight {
  padding-block: var(--section-y-tight);
}

.section--loose {
  padding-block: var(--section-y-loose);
}

.section--top-flush {
  padding-top: 0;
}
.section--bottom-flush {
  padding-bottom: 0;
}

.section-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  max-width: 48rem;
}

.section-header--center {
  margin-inline: auto;
  text-align: center;
  align-items: center;
}

.section-header .kicker {
  margin: 0;
}

.section-header h2 {
  margin: 0;
  text-wrap: balance;
}

.section-header .lead {
  margin: 0;
  max-width: 40rem;
  color: var(--text-secondary);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  text-wrap: pretty;
}

.section-header--center .lead {
  margin-inline: auto;
}

.lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  text-wrap: pretty;
}

/* ————————————————————————————————————————————————————————————————— */
/* Navigation                                                         */
/* ————————————————————————————————————————————————————————————————— */

.topbar {
  position: sticky;
  top: max(0.5rem, env(safe-area-inset-top, 0px));
  z-index: var(--nav-z, 9999);
  width: auto;
  max-width: min(
    135rem,
    calc(100vw * 2160 / 2026),
    calc(100% - 2 * clamp(0.75rem, 2.5vw, 1.25rem))
  );
  margin-inline: auto;
  margin-top: max(0.5rem, env(safe-area-inset-top, 0px));
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--border-hairline, rgba(0, 0, 0, 0.08));
  transition: box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

.topbar.is-scrolled {
  background: #fff;
  border-color: var(--border-hairline-strong, rgba(0, 0, 0, 0.12));
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
}

/* White bar reads as “light surface”; keep copy readable in dark site theme */
html[data-theme="dark"] .topbar {
  --text-primary: #1d2026;
  --text-secondary: #525a69;
  --text-muted: #717989;
}

.topbar-inner {
  /* Same max-width as .home-hero-container; no side padding so the logo lines up
     with the hero card edge (not the inner .container copy column). */
  width: 100%;
  max-width: var(
    --container-nav-outer,
    min(135rem, calc(100vw * 2160 / 2026))
  );
  margin-inline: auto;
  padding-inline: 0;
  min-height: var(--nav-height);
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.5rem);
}

.topbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  flex-shrink: 0;
}
.topbar-brand:hover {
  text-decoration: none;
  opacity: 0.85;
}

.topbar-brand-logo {
  height: 32px;
  width: auto;
  max-width: 140px;
  display: block;
  object-fit: contain;
  flex-shrink: 0;
}

.nav-links {
  display: none;
  align-items: center;
  justify-content: flex-start;
  gap: 0.125rem;
}

.nav-links > a,
.nav-links > .nav-item > .nav-trigger {
  color: var(--text-secondary);
  font-size: var(--text-base);
  font-weight: 500;
  padding: 0.45rem 0.75rem;
  border-radius: 8px;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.nav-links > a:hover,
.nav-links > .nav-item .nav-trigger:hover {
  color: var(--text-primary);
  background: var(--oat-200);
  text-decoration: none;
}

.nav-links > a.active {
  color: var(--text-primary);
}
.nav-links > a.active::after {
  content: "";
  display: block;
  width: 16px;
  height: 2px;
  margin: 4px auto 0;
  background: var(--text-primary);
  border-radius: 2px;
}

.nav-item {
  position: relative;
}

.nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.nav-trigger::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur-fast) var(--ease-out);
  margin-left: 2px;
  opacity: 0.6;
}
.nav-item.open .nav-trigger::after {
  transform: rotate(-135deg) translateY(-1px);
}
.nav-item.open > .nav-trigger {
  color: var(--text-primary);
  background: var(--oat-200);
}

.nav-panel {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 260px;
  max-width: min(380px, 92vw);
  padding: 0.5rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-hairline);
  border-radius: 14px;
  box-shadow: var(--shadow-nav-panel);
  z-index: 2000;
}

.nav-item.open .nav-panel {
  display: block;
  animation: navPanelIn 160ms var(--ease-out);
}

@keyframes navPanelIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.nav-panel a {
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out);
}
.nav-panel a:hover {
  background: var(--oat-100);
  text-decoration: none;
}

/* ————————————————————————————————————————————————————————————————— */
/* Mega dropdown (Clay-style)                                         */
/* ————————————————————————————————————————————————————————————————— */

.nav-panel--mega {
  display: none;
  padding: 1.1rem;
  min-width: 640px;
  max-width: 820px;
  grid-template-columns: 1.6fr 1fr;
  gap: 0.5rem 1.25rem;
}

.nav-item.open .nav-panel--mega {
  display: grid;
}

.mega-col {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.mega-col--main {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.15rem 0.5rem;
}

.mega-col-label {
  grid-column: 1 / -1;
  margin: 0 0 0.35rem;
  padding: 0 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.mega-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.6rem 0.65rem;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out);
}

.mega-item:hover {
  background: var(--oat-100);
  text-decoration: none;
}

.mega-item-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--oat-200);
  color: var(--text-primary);
  border: 1px solid var(--border-hairline);
}

.mega-item-icon-svg {
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.mega-item-icon--gcode {
  background: rgba(88, 165, 111, 0.12);
  border-color: rgba(88, 165, 111, 0.3);
  color: var(--matcha-600);
}

.mega-item-icon--stl {
  background: rgba(var(--accent-primary-rgb), 0.1);
  border-color: rgba(var(--accent-primary-rgb), 0.3);
  color: var(--blueberry-600);
}

.mega-item-icon--node {
  background: rgba(236, 127, 59, 0.12);
  border-color: rgba(236, 127, 59, 0.3);
  color: var(--tangerine-600);
}

.mega-item-icon--blocks {
  background: rgba(214, 59, 85, 0.12);
  border-color: rgba(214, 59, 85, 0.3);
  color: var(--pomegranate-600);
}

.mega-item-icon--docs {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
  color: var(--grey-800);
}

.mega-item-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.mega-item-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

.mega-item-blurb {
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--text-secondary);
}

.mega-link {
  display: block;
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}
.mega-link:hover {
  color: var(--text-primary);
  background: var(--oat-100);
  text-decoration: none;
}

/* On mobile, the mega-panel collapses into a regular stacked list inside the
   mobile-open nav. */
@media (max-width: 1023px) {
  .nav-links.mobile-open .nav-panel--mega {
    display: block;
    min-width: 0;
    padding: 0.35rem;
  }
  .nav-links.mobile-open .mega-col--main {
    display: flex;
    flex-direction: column;
  }
  .nav-links.mobile-open .mega-col-label {
    margin-top: 0.5rem;
  }
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  flex-shrink: 0;
}

.mobile-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border-hairline);
  border-radius: 10px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.mobile-toggle:hover {
  background: var(--oat-200);
}

.mobile-cta-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  padding-top: 1rem;
  border-top: 1px solid var(--border-default);
  margin-top: 0.75rem;
}

@media (min-width: 1024px) {
  .nav-links {
    display: flex;
  }
  .mobile-toggle {
    display: none;
  }
  .mobile-cta-group {
    display: none;
  }
  .nav-actions .btn {
    display: inline-flex;
  }
}

@media (max-width: 1023px) {
  .nav-actions .btn {
    display: none;
  }
}

.nav-links.mobile-open {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-secondary);
  padding: var(--space-4);
  gap: 0.25rem;
  overflow-y: auto;
  z-index: 1500;
}

.nav-links.mobile-open > a,
.nav-links.mobile-open > .nav-item {
  width: 100%;
  padding: 0.75rem 0.65rem;
  border-radius: 10px;
  font-size: 1.05rem;
}
.nav-links.mobile-open > a::after {
  display: none;
}

.nav-links.mobile-open .nav-panel {
  position: static;
  display: block;
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
  box-shadow: none;
  border: 1px solid var(--border-default);
  padding: 0.35rem;
  animation: none;
}

.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  top: var(--nav-height);
  background: rgba(0, 0, 0, 0.35);
  z-index: 1400;
}
.nav-overlay.active {
  display: block;
}

/* ————————————————————————————————————————————————————————————————— */
/* Buttons                                                            */
/* ————————————————————————————————————————————————————————————————— */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.7em 1.35em;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--tracking-normal);
  border-radius: var(--radius-btn, 999px);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
  will-change: transform;
}
.btn:hover {
  text-decoration: none;
}
.btn:active {
  transform: translateY(1px);
}

.btn--lg {
  padding: 0.9em 1.75em;
  font-size: 1.0625rem;
}

.btn--sm {
  padding: 0.5em 1em;
  font-size: var(--text-sm);
}

.btn-primary,
html[data-theme="light"] .btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  border-color: var(--btn-primary-bg);
}
html[data-theme="light"] .btn-primary:hover {
  background: var(--btn-primary-hover);
  border-color: var(--btn-primary-hover);
  color: var(--btn-primary-fg);
}

html[data-theme="dark"] .btn-primary {
  background: var(--accent-primary);
  color: #fff;
  border-color: var(--accent-primary);
}

.btn-secondary,
html[data-theme="light"] .btn-secondary {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-fg);
  border-color: var(--btn-secondary-border);
}
.btn-secondary:hover,
html[data-theme="light"] .btn-secondary:hover {
  border-color: var(--btn-secondary-hover-border);
  background: var(--btn-secondary-bg);
}

.btn-ghost {
  background: transparent;
  color: var(--text-primary);
  border-color: transparent;
  padding-inline: 0.75em;
}
.btn-ghost:hover {
  background: var(--oat-200);
}

.btn-link {
  background: transparent;
  border: none;
  color: var(--text-primary);
  padding: 0;
  font-weight: 500;
  gap: 0.35em;
  border-radius: 0;
}
.btn-link::after {
  content: "→";
  transition: transform var(--dur-fast) var(--ease-out);
}
.btn-link:hover {
  color: var(--accent-primary);
}
.btn-link:hover::after {
  transform: translateX(3px);
}

/* Arrow icon inside primary buttons (Clay-like) */
.btn .btn-arrow {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease-out);
}
.btn:hover .btn-arrow {
  transform: translateX(3px);
}

/* Dark-background button overrides (final CTA section) */
.btn-on-dark {
  background: #fff;
  color: #000;
  border-color: #fff;
}
.btn-on-dark:hover {
  background: var(--blueberry-500);
  color: #fff;
  border-color: var(--blueberry-500);
}

.btn-on-dark-secondary {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}
.btn-on-dark-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}

/* ————————————————————————————————————————————————————————————————— */
/* Hero                                                               */
/* ————————————————————————————————————————————————————————————————— */

.hero {
  position: relative;
  overflow: visible;
  /* Horizontal inset comes from .home-hero-container max-width (ratio of 100vw), not extra padding. */
  padding: var(--space-4) 0 var(--space-5);
}

/* Oat card: +20% vs base Clay ref → 2160/2026, cap 2160px; min height scales like 500px at ref */
.home-hero-container,
.hero-container {
  position: relative;
  width: 100%;
  max-width: var(
    --container-hero-outer,
    min(135rem, calc(100vw * 2160 / 2026))
  );
  min-height: clamp(12rem, calc(100vw * 500 / 2026), 31.25rem);
  margin-inline: auto;
  padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(4rem, 8vw, 6.5rem);
  padding-inline: 0;
  background-color: var(--bg-section-oat);
  /* Soft pastel wash: cool blue → warm pink over the photo */
  background-image: var(--pastel-overlay-wash), url("../static/Images/hero.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid var(--oat-300, var(--border-hairline-strong));
  border-radius: var(--radius-card-lg);
  overflow: visible;
}

/* Stack headline above corner decos (matches clay.com: .container then .home-hero-contain) */
.home-hero-container > .container,
.hero-container > .container {
  position: relative;
  z-index: 2;
}

.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-5);
  position: relative;
  margin-bottom: 0;
}

/* Corner art: bottom corners, nudged 200px toward center; left scale 1.8, right 2.7 (20% up from 1.5 / 2.25) */
.home-hero-contain {
  position: absolute;
  bottom: 0;
  width: min(32%, 11rem);
  max-width: 180px;
  pointer-events: none;
  z-index: 1;
  transform: translate(-50%, 50%) scale(1.8);
  transform-origin: center;
}

.home-hero-contain.hero-deco--left {
  left: 200px;
  right: auto;
}

.home-hero-contain.hero-deco--right {
  bottom: 100px;
  right: 200px;
  left: auto;
  transform: translate(50%, 50%) scale(2.7);
}

.hero-deco-aspect {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
}

.hero-deco-aspect img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  display: block;
  filter: drop-shadow(0 6px 16px rgba(24, 24, 27, 0.1));
  transform: none;
}

@media (min-width: 900px) {
  .home-hero-contain {
    width: min(28%, 13rem);
    max-width: 220px;
  }
}

@media (max-width: 599px) {
  .home-hero-contain {
    display: none;
  }
}

.hero-kicker {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-hairline);
  border-radius: 999px;
}

.hero-headline {
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 600;
  max-width: 100%;
  margin: 0;
  text-wrap: balance;
}

.hero-subtitle {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  max-width: 56ch;
  margin: 0;
  text-wrap: pretty;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: center;
  align-items: center;
  margin-top: 0.5rem;
}

.hero-demo-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.4rem 0.8rem;
  background: transparent;
  border: none;
  border-radius: 999px;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}
.hero-demo-link:hover {
  color: var(--text-primary);
  background: rgba(0, 0, 0, 0.04);
}

.hero-demo-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--text-primary);
  color: #fff;
  font-size: 0.55rem;
  padding-left: 2px;
  flex-shrink: 0;
}

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.hero-proof strong {
  color: var(--text-primary);
  font-weight: 600;
}

.hero-media {
  position: relative;
  margin: var(--space-7) auto 0;
  width: 90%;
  max-width: 56rem;
}

.hero-media-frame {
  position: relative;
  overflow: hidden;
  border-radius: clamp(20px, 3vw, 32px);
  background: var(--bg-secondary);
  border: 1px solid var(--border-hairline);
  box-shadow: 0 8px 40px rgba(24, 24, 27, 0.10), 0 24px 80px rgba(24, 24, 27, 0.12);
}

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

/* ————————————————————————————————————————————————————————————————— */
/* Feature sections (side-by-side, alternating)                       */
/* ————————————————————————————————————————————————————————————————— */

.feature-split {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

@media (min-width: 860px) {
  .feature-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 5rem);
  }
  .feature-split--flip .feature-split-media {
    order: 2;
  }
}

.feature-split-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.feature-split-copy .kicker {
  margin-bottom: 0.25rem;
}

.feature-split-copy h3 {
  font-size: var(--text-h2);
  letter-spacing: var(--tracking-tight);
  font-weight: 600;
  line-height: var(--leading-tight);
  margin: 0;
  text-wrap: balance;
}

.feature-split-copy p {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  margin: 0;
  max-width: 44ch;
  text-wrap: pretty;
}

.feature-split-media {
  border-radius: var(--radius-card-lg);
  overflow: hidden;
  background: var(--bg-secondary);
  box-shadow: var(--shadow-card);
  aspect-ratio: 1 / 1;
  position: relative;
}

.feature-split-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.feature-split-media--contain img {
  object-fit: contain;
  padding: 1.5rem;
}

/* Outcome cards: side-by-side video + copy, stacked vertically */
.outcome-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.outcome-card {
  display: grid;
  gap: var(--space-5);
  align-items: start;
}

.outcome-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-card-lg);
  overflow: hidden;
  background: var(--bg-secondary);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-hairline);
}

.outcome-card-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.outcome-card-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.outcome-card-copy h3 {
  font-size: var(--text-h2);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: 0;
  text-wrap: balance;
}

.outcome-card-lead {
  margin: 0;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  max-width: 52ch;
  text-wrap: pretty;
}

.outcome-card-bullets {
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.outcome-card-bullets li {
  margin: 0;
  padding-left: 1.1rem;
  position: relative;
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

.outcome-card-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blueberry-500);
}

@media (min-width: 860px) {
  .outcome-card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
  }

  .outcome-card--flip .outcome-card-media {
    order: 2;
  }
}

/* Outcome grid (smaller 2x2 feature cards) */
.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 700px) {
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.feature-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: 0;
  background: transparent;
  border-radius: 0;
  border: none;
}

.feature-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--bg-secondary);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-hairline);
}

.feature-card-media a,
.feature-card-media img,
.feature-card-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature-card-media img {
  transition: transform var(--dur-slow) var(--ease-out);
}

.feature-card-media a:hover img,
.feature-card-media a:focus-visible img {
  transform: scale(1.02);
}

.feature-card-body h3 {
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: var(--tracking-snug);
  margin: 0 0 0.4rem;
}

.feature-card-body p {
  margin: 0;
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

/* ————————————————————————————————————————————————————————————————— */
/* Module card grid                                                   */
/* ————————————————————————————————————————————————————————————————— */

.module-matrix {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-4);
}

@media (min-width: 1100px) {
  .module-matrix {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.module-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  background: var(--bg-secondary);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
  box-shadow: var(--shadow-card);
}

.module-card:hover {
  text-decoration: none;
  transform: translateY(-3px);
  border-color: var(--border-hairline-strong);
  box-shadow: var(--shadow-card-hover);
}

.module-card:not(:has(.module-card-media)) {
  padding: var(--space-5);
  gap: 0.4rem;
}

.module-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--oat-100);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.module-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}

.module-card:hover .module-card-img {
  transform: scale(1.03);
}

.module-card-body {
  padding: var(--space-4) var(--space-4) var(--space-5);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.module-card .module-card-body .chips {
  margin-bottom: 0.25rem;
}

.module-card h3 {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: var(--tracking-snug);
  color: var(--text-primary);
  line-height: 1.25;
}

.module-card p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

/* Module spotlight list (modules.html) */
.module-spotlight-list {
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 6vw, 6rem);
  margin-top: var(--space-6);
}

.module-spotlight {
  display: grid;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}

@media (min-width: 860px) {
  .module-spotlight {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .module-spotlight--flip .module-spotlight-link {
    order: 2;
  }
}

.module-spotlight-link {
  display: block;
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-card-lg);
  overflow: hidden;
  background: var(--bg-secondary);
  border: 1px solid var(--border-hairline);
  aspect-ratio: 1 / 1;
  transition: transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
  box-shadow: var(--shadow-card);
}

.module-spotlight-link:hover {
  text-decoration: none;
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}

.module-spotlight-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.module-spotlight-body {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  align-items: flex-start;
}

.module-spotlight-body .chips {
  margin-bottom: 0.25rem;
}

.module-spotlight-body h3 {
  margin: 0;
  font-size: var(--text-h2);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  line-height: var(--leading-tight);
}

.module-spotlight-tagline {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--text-primary);
  line-height: var(--leading-relaxed);
}

.module-spotlight-detail {
  margin: 0 0 0.5rem;
  font-size: var(--text-md);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 52ch;
}

.module-spotlight-body .btn {
  align-self: flex-start;
}

/* ————————————————————————————————————————————————————————————————— */
/* Chips                                                              */
/* ————————————————————————————————————————————————————————————————— */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.chip {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-hairline);
  color: var(--text-secondary);
}

.chip-gcode {
  background: rgba(88, 165, 111, 0.1);
  border-color: rgba(88, 165, 111, 0.3);
  color: var(--matcha-600);
}

.chip-stl {
  background: rgba(var(--accent-primary-rgb), 0.08);
  border-color: rgba(var(--accent-primary-rgb), 0.3);
  color: var(--blueberry-600);
}

.chip-soft {
  background: var(--oat-200);
  border-color: transparent;
  color: var(--text-muted);
}

/* ————————————————————————————————————————————————————————————————— */
/* Learn cards                                                        */
/* ————————————————————————————————————————————————————————————————— */

.learn-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 600px) {
  .learn-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .learn-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.learn-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: var(--space-5);
  background: var(--bg-secondary);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  transition: transform var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
  min-height: 100%;
}

.learn-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-hairline-strong);
  box-shadow: var(--shadow-card);
}

.learn-card-title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: var(--tracking-snug);
  color: var(--text-primary);
}

.learn-card-desc {
  margin: 0;
  flex: 1;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

.learn-card-link {
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--accent-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transition: gap var(--dur-fast) var(--ease-out);
}
.learn-card-link:hover {
  gap: 0.5rem;
  text-decoration: none;
}

.learn-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: var(--text-sm);
  font-weight: 500;
}

.learn-card-actions a {
  color: var(--accent-primary);
}

.learn-card-actions-sep {
  color: var(--text-muted);
  user-select: none;
}

/* ————————————————————————————————————————————————————————————————— */
/* Pricing                                                            */
/* ————————————————————————————————————————————————————————————————— */

.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  max-width: 64rem;
  margin-inline: auto;
}

@media (min-width: 720px) {
  .pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.pricing-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--bg-primary);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card-lg);
  transition: transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.pricing-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

.pricing-card.featured {
  background: var(--grey-950);
  color: var(--text-on-dark);
  border-color: var(--grey-950);
  box-shadow: var(--shadow-card-hover);
}

.pricing-card-top {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.pricing-card-badge {
  display: inline-flex;
  align-self: flex-start;
  margin: 0 0 0.15rem;
  padding: 0.2rem 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lemon-500);
  background: rgba(232, 191, 53, 0.18);
  border: 1px solid rgba(232, 191, 53, 0.45);
  border-radius: 6px;
}

.pricing-card h3 {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 600;
  color: inherit;
}

.pricing-card-price {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  margin: 0;
  line-height: 1.1;
}

.pricing-card-price--promo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.75rem;
  font-weight: 600;
}

.pricing-card-price-now {
  font-size: 2.75rem;
  font-weight: 700;
  color: var(--text-on-dark);
  letter-spacing: var(--tracking-tight);
  line-height: 1.05;
}

.pricing-card-price-was {
  font-size: 1.1rem;
  color: var(--text-on-dark-muted);
}

.pricing-card-price-was s {
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.pricing-card-price-hint {
  margin: 0.25rem 0 0;
  max-width: 32rem;
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--text-on-dark-muted);
}

.pricing-card.featured .pricing-card-price-hint strong {
  color: rgba(255, 255, 255, 0.88);
  font-weight: 600;
}

.pricing-card.featured .pricing-card-top .pricing-card-blurb {
  margin-top: 0.35rem;
}

.pricing-card-blurb {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.pricing-card.featured .pricing-card-blurb {
  color: var(--text-on-dark-muted);
}

.pricing-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pricing-card li {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: var(--text-sm);
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.pricing-card.featured li {
  border-bottom-color: rgba(255, 255, 255, 0.08);
  color: var(--text-on-dark-muted);
}

.pricing-card:not(.featured) li code {
  padding: 0.1em 0.35em;
  font-size: 0.85em;
  font-weight: 500;
  background: var(--grey-100);
  color: var(--grey-900);
  border-radius: 4px;
}

.pricing-card.featured li code,
.section--dark code {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-on-dark);
}

.pricing-card li:last-child {
  border-bottom: none;
}

.pricing-card li.disabled {
  opacity: 0.45;
}

.pricing-card li span[aria-hidden="true"] {
  color: var(--success);
  font-weight: 700;
  flex-shrink: 0;
}

.pricing-card li.disabled span[aria-hidden="true"] {
  color: var(--text-muted);
}

.pricing-card.featured li span[aria-hidden="true"] {
  color: var(--blueberry-400);
}

.pricing-card .btn {
  margin-top: auto;
  align-self: stretch;
}

.pricing-card.featured .btn-primary {
  background: #fff;
  color: #000;
  border-color: #fff;
}
.pricing-card.featured .btn-primary:hover {
  background: var(--blueberry-500);
  color: #fff;
  border-color: var(--blueberry-500);
}

/* Two-column feature matrix: one wash behind the full table; cells stay transparent */
.pricing-compare {
  --pricing-wash: linear-gradient(
    165deg,
    var(--blueberry-50) 0%,
    #f2f4fc 38%,
    var(--oat-200) 100%
  );
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 0;
  max-width: 64rem;
  margin-inline: auto;
  position: relative;
  border-radius: var(--radius-card-lg);
  overflow: hidden;
  border: 1px solid var(--border-hairline);
  box-shadow: var(--shadow-card);
  background-color: var(--bg-primary);
  background-image: var(--pricing-wash);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

@media (min-width: 720px) {
  .pricing-compare > *:nth-child(2n) {
    border-left: 1px solid var(--border-hairline);
  }

  .pricing-compare > *:nth-child(2) {
    border-left-color: var(--border-hairline, rgba(0, 0, 0, 0.1));
  }
}

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

  .pricing-compare > *:nth-child(2n) {
    border-left: none;
  }

  .pricing-compare > *:nth-child(n + 2) {
    border-top: 1px solid var(--border-hairline);
  }

  .pricing-compare > *:nth-child(2) {
    border-top-color: var(--border-hairline, rgba(0, 0, 0, 0.08));
  }
}

.pricing-compare__cell--head,
.pricing-compare__cell--feat,
.pricing-compare__cell--foot {
  padding: 1.1rem 1.15rem 1.15rem;
}

.pricing-compare__cell--head h3,
.pricing-compare__cell--head p {
  margin: 0;
}

.pricing-compare__cell--head h3 {
  font-size: var(--text-xl);
  font-weight: 600;
  margin-top: 0.15rem;
}

/* Premium column: soft gradient + ink text (aligns with hero / oat page chrome) */
.pricing-compare > *:nth-child(2) .pricing-compare__title,
.pricing-compare__cell--premium h3,
.pricing-compare__cell--head.pricing-compare__cell--premium h3 {
  color: var(--text-primary);
}

.pricing-compare > *:nth-child(1) {
  background: transparent;
  color: var(--text-primary);
}

.pricing-compare > *:nth-child(2) {
  background: transparent;
  color: var(--text-primary);
}

.pricing-compare
  > *:nth-child(n + 3):nth-child(-n + 14):nth-child(odd) {
  background: transparent;
  color: var(--text-secondary);
  border-top: 1px solid var(--border-hairline);
}

.pricing-compare
  > *:nth-child(n + 3):nth-child(-n + 14):nth-child(even) {
  background: transparent;
  color: var(--text-secondary);
  border-top: 1px solid var(--border-hairline);
}

.pricing-compare > *:nth-child(1).pricing-compare__cell--head,
.pricing-compare > *:nth-child(2).pricing-compare__cell--head {
  border-bottom: 1px solid var(--border-hairline);
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.pricing-compare > *:nth-child(2).pricing-compare__cell--head {
  border-bottom-color: var(--border-hairline);
}

.pricing-compare > *:nth-child(15) {
  background: transparent;
  color: var(--text-primary);
  border-top: 1px solid var(--border-hairline);
}

.pricing-compare > *:nth-child(16) {
  background: transparent;
  color: var(--text-primary);
  border-top: 1px solid var(--border-hairline);
}

.pricing-compare__free-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin: 0 0 0.4rem;
}

.pricing-compare > *:nth-child(1) .pricing-compare__free-head .pricing-compare__price-now {
  color: var(--text-primary);
}

.pricing-compare__blurb {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  margin: 0;
}

.pricing-compare > *:nth-child(1) .pricing-compare__blurb {
  color: var(--text-secondary);
}

.pricing-compare__prem-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin: 0 0 0.4rem;
}

.pricing-compare__prem-lead {
  min-width: 0;
  flex: 1;
}

.pricing-compare__badge {
  display: inline-flex;
  margin: 0 0 0.2rem;
  padding: 0.2rem 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lemon-500);
  background: rgba(232, 191, 53, 0.18);
  border: 1px solid rgba(232, 191, 53, 0.45);
  border-radius: 6px;
}

.pricing-compare__price-block {
  flex-shrink: 0;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 0.1rem;
}

.pricing-compare__price-now {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--blueberry-800, #083b7a);
  line-height: 1.02;
  margin: 0;
  letter-spacing: var(--tracking-tight);
}

.pricing-compare__price-was {
  font-size: 1rem;
  font-weight: 500;
  margin: 0;
  color: var(--danger, #dc2626);
}

.pricing-compare__price-was s {
  color: inherit;
  text-decoration-thickness: 1px;
}

.pricing-compare__hint {
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0 0 0.5rem;
  max-width: 36em;
}

.pricing-compare__hint strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* Invisible copy of the premium intro line: keeps the main blurbs in sync (same top edge) */
.pricing-compare__hint--spacer {
  visibility: hidden;
  user-select: none;
}

.pricing-compare__hint--spacer strong {
  color: transparent;
  font-weight: 600;
}

@media (max-width: 719px) {
  .pricing-compare__hint--spacer {
    display: none;
  }
}

.pricing-compare > *:nth-child(2) .pricing-compare__blurb {
  color: var(--text-secondary);
  margin: 0;
}

.pricing-compare__cell--feat {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem 0.6rem;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  min-width: 0;
}

.pricing-compare__cell--feat .pricing-compare__icon {
  color: var(--success);
  font-weight: 700;
  line-height: 1.3;
  flex-shrink: 0;
}

.pricing-compare > *:nth-child(even).pricing-compare__cell--feat .pricing-compare__icon {
  color: var(--success);
}

.pricing-compare__cell--feat.pricing-compare__cell--disabled {
  opacity: 0.45;
}

.pricing-compare__cell--feat.pricing-compare__cell--disabled .pricing-compare__icon {
  color: var(--text-muted);
}

.pricing-compare
  > *:nth-child(even).pricing-compare__cell--disabled
  .pricing-compare__icon {
  color: var(--text-muted);
}

.pricing-compare__cell--feat > span:last-child {
  min-width: 0;
}

.pricing-compare__cell--feat > span code {
  padding: 0.1em 0.3em;
  font-size: 0.85em;
  font-weight: 500;
  border-radius: 4px;
}

.pricing-compare > *:nth-child(odd).pricing-compare__cell--feat code {
  background: var(--grey-100);
  color: var(--grey-900);
}

.pricing-compare > *:nth-child(even).pricing-compare__cell--feat code {
  background: var(--grey-100);
  color: var(--grey-900);
}

.pricing-compare__cell--foot {
  display: flex;
  align-items: center;
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
}

.pricing-compare__cell--foot .btn {
  width: 100%;
  justify-content: center;
}

.pricing-compare__btn-premium {
  background: var(--blueberry-500);
  color: #fff;
  border-color: var(--blueberry-500);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
}

.pricing-compare__btn-premium:hover {
  background: var(--blueberry-600, #0667d9);
  color: #fff;
  border-color: var(--blueberry-600, #0667d9);
}

/* ————————————————————————————————————————————————————————————————— */
/* FAQ                                                                */
/* ————————————————————————————————————————————————————————————————— */

.faq-list {
  max-width: 48rem;
  margin-inline: auto;
  border-top: 1px solid var(--border-hairline);
}

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

.faq-item summary {
  padding: 1.1rem 0;
  cursor: pointer;
  font-weight: 600;
  font-size: var(--text-lg);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  color: var(--text-primary);
  transition: color var(--dur-fast) var(--ease-out);
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary:hover {
  color: var(--accent-primary);
}

.faq-item summary::after {
  content: "+";
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
  color: var(--text-muted);
  transition: transform var(--dur-fast) var(--ease-out);
  flex-shrink: 0;
}

.faq-item[open] summary::after {
  content: "−";
}

.faq-answer {
  padding: 0 0 1.25rem;
  font-size: var(--text-md);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 64ch;
}

/* ————————————————————————————————————————————————————————————————— */
/* Prints gallery (community)                                         */
/* ————————————————————————————————————————————————————————————————— */

.prints-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: var(--space-4);
}

.prints-toolbar-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
  margin-right: 0.4rem;
}

.prints-filter {
  font-size: var(--text-sm);
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--border-hairline);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  transition: all var(--dur-fast) var(--ease-out);
}

.prints-filter:hover {
  color: var(--text-primary);
  border-color: var(--border-hairline-strong);
}

.prints-filter.is-active {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: var(--bg-secondary);
}

.prints-status {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0 0 var(--space-4);
}

.prints-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-4);
}

.gallery-item {
  min-height: 140px;
}

.gallery-item-btn {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 160px;
  padding: 0;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--bg-secondary);
  cursor: pointer;
  text-align: left;
  color: inherit;
  font-family: inherit;
  transition: transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

.gallery-item-btn:hover {
  transform: translateY(-3px);
  border-color: var(--border-hairline-strong);
  box-shadow: var(--shadow-card-hover);
}

.gallery-item-btn img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.gallery-meta {
  padding: 0.7rem 0.85rem 0.85rem;
  border-top: 1px solid var(--border-hairline);
}

.gallery-meta .title {
  font-size: var(--text-sm);
  font-weight: 500;
  display: block;
  color: var(--text-primary);
}

.gallery-placeholder {
  padding: var(--space-5);
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-align: center;
}

.view-more-placeholder {
  flex: 1;
  min-height: 120px;
  background: linear-gradient(135deg, var(--oat-100), var(--bg-secondary));
}

.print-tag-pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  padding: 0.15rem 0.45rem;
  margin: 0.2rem 0.2rem 0 0;
  border-radius: 999px;
  background: var(--oat-200);
  color: var(--text-muted);
}

/* ————————————————————————————————————————————————————————————————— */
/* Modals                                                             */
/* ————————————————————————————————————————————————————————————————— */

.video-modal,
.prints-modal {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
.video-modal[aria-hidden="false"],
.prints-modal[aria-hidden="false"] {
  display: flex;
  animation: modalIn 200ms var(--ease-out);
}

@keyframes modalIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.video-modal-backdrop,
.prints-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(24, 24, 27, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.video-modal-content,
.prints-modal-content {
  position: relative;
  z-index: 1;
  width: min(760px, 100%);
  max-height: 90vh;
  overflow: auto;
  background: var(--bg-secondary);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-card-hover);
}

.video-modal-embed iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--radius-card);
}

.video-modal-close,
.prints-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  border: none;
  background: var(--oat-200);
  color: var(--text-primary);
  width: 38px;
  height: 38px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  transition: background var(--dur-fast) var(--ease-out);
}
.video-modal-close:hover,
.prints-modal-close:hover {
  background: var(--oat-300);
}

.prints-modal-title {
  margin: 0 2.5rem 0.5rem 0;
  font-size: var(--text-xl);
}

.prints-modal-type,
.prints-modal-author {
  margin: 0.25rem 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.prints-modal-desc {
  margin: 0.5rem 0;
  font-size: var(--text-md);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.prints-modal-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.75rem 0;
}

.prints-modal-cta {
  margin-top: var(--space-4);
}

/* ————————————————————————————————————————————————————————————————— */
/* Footer                                                             */
/* ————————————————————————————————————————————————————————————————— */

.site-footer {
  background: var(--oat-200);
  color: var(--text-secondary);
  padding-block: clamp(3rem, 6vw, 5rem) var(--space-5);
}

.site-footer-inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border-hairline);
}

@media (min-width: 720px) {
  .footer-grid {
    grid-template-columns: 1.5fr repeat(3, 1fr);
  }
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 22rem;
}

.footer-brand-logo {
  height: 34px;
  width: auto;
}

.footer-tagline {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.footer-col h4 {
  margin: 0 0 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
  font-weight: 500;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-col a {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.footer-col a:hover {
  color: var(--text-primary);
  text-decoration: none;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.footer-bottom a {
  color: inherit;
}
.footer-bottom a:hover {
  color: var(--text-primary);
  text-decoration: none;
}

/* ————————————————————————————————————————————————————————————————— */
/* Prose / legal pages                                                */
/* ————————————————————————————————————————————————————————————————— */

.prose-page {
  max-width: 44rem;
  margin-inline: auto;
  padding-inline: var(--container-pad);
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 6rem);
}

.prose-page h1 {
  font-size: var(--text-h1);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-3);
}

.prose-page h2 {
  font-size: var(--text-2xl);
  margin: var(--space-7) 0 var(--space-3);
  letter-spacing: var(--tracking-snug);
}

.prose-page h3 {
  font-size: var(--text-xl);
  margin: var(--space-5) 0 var(--space-2);
}

.prose-page p,
.prose-page li {
  color: var(--text-secondary);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-3);
}

.prose-page ul,
.prose-page ol {
  padding-left: 1.25rem;
  margin: 0 0 var(--space-4);
}

.prose-page li {
  margin-bottom: var(--space-2);
}

.prose-page .lead {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  margin-bottom: var(--space-5);
  line-height: var(--leading-relaxed);
}

.prose-page .last-updated {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  letter-spacing: 0.02em;
  margin: 0 0 var(--space-5);
  padding: 0.25rem 0.6rem;
  background: var(--oat-200);
  border-radius: 999px;
}

.prose-page a {
  color: var(--accent-primary);
  text-decoration: underline;
  text-decoration-color: rgba(var(--accent-primary-rgb), 0.3);
  text-underline-offset: 3px;
}
.prose-page a:hover {
  text-decoration-color: var(--accent-primary);
}

.prose-page strong {
  color: var(--text-primary);
}

/* Cross-links strip */
.cross-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.25rem;
  font-size: var(--text-sm);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-hairline);
  margin-top: var(--space-6);
}
.cross-links a {
  color: var(--accent-primary);
}

/* ————————————————————————————————————————————————————————————————— */
/* Tables                                                             */
/* ————————————————————————————————————————————————————————————————— */

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.data-table th,
.data-table td {
  text-align: left;
  padding: 0.75rem 0.85rem;
  border-bottom: 1px solid var(--border-hairline);
  vertical-align: top;
}

.data-table th {
  color: var(--text-muted);
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-family: var(--font-mono);
}

.data-table a {
  color: var(--accent-primary);
  font-weight: 500;
}

/* ————————————————————————————————————————————————————————————————— */
/* Press page specific                                                */
/* ————————————————————————————————————————————————————————————————— */

.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-5);
}

.press-colors-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: flex-end;
}

.press-color-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.75rem;
  align-items: flex-end;
}

.press-swatch {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  border: 1px solid var(--border-hairline);
  flex-shrink: 0;
}

.press-download-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--text-sm);
}

.press-download-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border-hairline);
}

.press-download-list li:last-child {
  border-bottom: 0;
}

.guideline-mini h4 {
  margin: 0 0 0.5rem;
  font-size: var(--text-md);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
}

.guideline-mini ul {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

/* ————————————————————————————————————————————————————————————————— */
/* Module marketing sub-patterns (G-code Sculptor etc.)              */
/* ————————————————————————————————————————————————————————————————— */

.module-marketing-split {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}

@media (min-width: 860px) {
  .module-marketing-split {
    grid-template-columns: minmax(240px, 40%) 1fr;
    gap: clamp(2rem, 5vw, 4rem);
  }

  /* Copy first in DOM, visual (video) on the right */
  .module-marketing-split--visual-end {
    grid-template-columns: 1fr minmax(240px, 40%);
  }
}

.module-marketing-visual img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-card-lg);
  border: 1px solid var(--border-hairline);
  box-shadow: var(--shadow-card);
}

.module-marketing-visual video {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: block;
  object-fit: cover;
  border-radius: var(--radius-card-lg);
  border: 1px solid var(--border-hairline);
  box-shadow: var(--shadow-card);
}

.marketing-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.marketing-checklist li {
  padding-left: 1.4rem;
  position: relative;
  font-size: var(--text-md);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.marketing-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent-primary);
  opacity: 0.18;
}

.marketing-checklist li::after {
  content: "✓";
  position: absolute;
  left: 2px;
  top: 0.2em;
  font-size: 0.85em;
  font-weight: 700;
  color: var(--accent-primary);
}

.stack-growth-row {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}

@media (min-width: 860px) {
  .stack-growth-row {
    grid-template-columns: minmax(240px, 34%) 1fr;
  }
}

.insight-quad {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 360px;
}

.insight-quad-cell {
  aspect-ratio: 1;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--oat-100);
  border: 1px solid var(--border-hairline);
}

.insight-quad-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.insight-quad-cell--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  text-align: center;
  padding: 0.5rem;
  line-height: 1.35;
}

.stack-growth-copy h3 {
  margin: 0 0 0.5rem;
  font-size: var(--text-xl);
}

.stack-growth-copy p {
  margin: 0 0 1rem;
  font-size: var(--text-md);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.stack-growth-copy p:last-child {
  margin-bottom: 0;
}

.effect-library-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

@media (min-width: 700px) {
  .effect-library-header {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
  }
}

.effect-library-header__main {
  flex: 1;
  min-width: 0;
}

.effect-library-doc-cta {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 0.35rem;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-pill, 999px);
  padding: 0.55rem 1rem;
  background: var(--bg-elevated, var(--bg-secondary));
  transition:
    border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.effect-library-doc-cta:hover {
  border-color: var(--border-hairline-strong);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

html[data-theme='light'] .effect-library-doc-cta:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.effect-picker-category {
  margin: 0 0 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.effect-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 12px;
}

/* G-code effect library: 8 category columns, lists read top-to-bottom in each */
.effect-library-columns {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: var(--space-4) var(--space-3);
  align-items: start;
}

@media (max-width: 1199px) {
  .effect-library-columns {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 639px) {
  .effect-library-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Doc link grids that use four equal columns (e.g. Custom G-code page) */
.effect-library-columns--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1199px) {
  .effect-library-columns--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 639px) {
  .effect-library-columns--4 {
    grid-template-columns: minmax(0, 1fr);
  }
}

.effect-library-col {
  min-width: 0;
}

.effect-library-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.effect-library-list a {
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--text-primary);
  text-decoration: none;
  display: inline-block;
  max-width: 100%;
  border-bottom: 1px solid transparent;
  transition:
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
  overflow-wrap: break-word;
}

.effect-library-list a:hover {
  color: var(--accent-primary);
  border-bottom-color: var(--accent-primary);
}

.effect-library-list a:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

.effect-tile {
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card-sm);
  padding: 0.75rem 0.85rem;
  background: var(--bg-secondary);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  justify-content: center;
  min-height: 3.25rem;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

a.effect-tile {
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
  cursor: pointer;
}

.effect-tile:hover {
  border-color: var(--border-hairline-strong);
}

a.effect-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
}

html[data-theme='light'] a.effect-tile:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.effect-tile-name {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.25;
}

.effect-tile-tag {
  font-size: 0.65rem;
  font-family: var(--font-mono);
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

/* ————————————————————————————————————————————————————————————————— */
/* Legacy panel (fallback; new code uses .section)                    */
/* ————————————————————————————————————————————————————————————————— */

.panel {
  background: var(--bg-secondary);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}
.panel h2 {
  margin: 0 0 var(--space-3);
}

/* ————————————————————————————————————————————————————————————————— */
/* Legacy page-header / site-wrap compatibility                       */
/* ————————————————————————————————————————————————————————————————— */

.site-wrap {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  padding-block: var(--section-y-tight);
}

.site-wrap--wide {
  max-width: var(--container-max);
}

/* Prose pages constrain width even when combined with .site-wrap */
.site-wrap.prose-page,
main.prose-page {
  max-width: 44rem;
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 6rem);
}

.page-header {
  margin-bottom: var(--space-6);
  padding-bottom: 0;
  border-bottom: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.page-header--center {
  text-align: center;
  align-items: center;
  padding-block: var(--space-6) var(--space-5);
}

.page-header--center .hero-copy {
  max-width: 56rem;
  margin-inline: auto;
}

.page-header--center .lead {
  margin-inline: auto;
  max-width: 48rem;
  font-size: var(--text-lg);
}

.page-header--center .page-header-actions {
  justify-content: center;
}

.page-header h1 {
  margin: 0 0 var(--space-3);
}

.page-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

/* ————————————————————————————————————————————————————————————————— */
/* Utility classes                                                    */
/* ————————————————————————————————————————————————————————————————— */

.u-mt-0 { margin-top: 0 !important; }
.u-mt-1 { margin-top: var(--space-1) !important; }
.u-mt-2 { margin-top: var(--space-2) !important; }
.u-mt-3 { margin-top: var(--space-3) !important; }
.u-mt-4 { margin-top: var(--space-4) !important; }
.u-mt-5 { margin-top: var(--space-5) !important; }
.u-mt-6 { margin-top: var(--space-6) !important; }

.u-mb-0 { margin-bottom: 0 !important; }
.u-mb-1 { margin-bottom: var(--space-1) !important; }
.u-mb-2 { margin-bottom: var(--space-2) !important; }
.u-mb-3 { margin-bottom: var(--space-3) !important; }
.u-mb-4 { margin-bottom: var(--space-4) !important; }
.u-mb-5 { margin-bottom: var(--space-5) !important; }
.u-mb-6 { margin-bottom: var(--space-6) !important; }

.u-hidden { display: none !important; }

.u-flex { display: flex; }
.u-flex-col { display: flex; flex-direction: column; }
.u-gap-2 { gap: var(--space-2); }
.u-gap-3 { gap: var(--space-3); }
.u-gap-4 { gap: var(--space-4); }

.u-items-center { align-items: center; }
.u-justify-center { justify-content: center; }

.u-max-w-prose { max-width: 64ch; }
.u-max-w-lead { max-width: 52ch; }

.u-text-sm { font-size: var(--text-sm) !important; }
.u-text-base { font-size: var(--text-base) !important; }
.u-text-lg { font-size: var(--text-lg) !important; }
.u-text-xl { font-size: var(--text-xl) !important; }

.modal-title { font-size: var(--text-xl); font-weight: 600; }

/* ————————————————————————————————————————————————————————————————— */
/* Scroll reveal animations                                           */
/* ————————————————————————————————————————————————————————————————— */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--ease-out),
    transform 700ms var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

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

/* ————————————————————————————————————————————————————————————————— */
/* Legacy outcome-row (kept for compatibility; prefers .feature-grid) */
/* ————————————————————————————————————————————————————————————————— */

.outcome-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 700px) {
  .outcome-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.outcome-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.outcome-item-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--border-hairline);
  background: var(--bg-secondary);
  box-shadow: var(--shadow-card);
}

.outcome-item-zoom {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
  cursor: zoom-in;
}

.outcome-item-zoom:hover .outcome-item-img,
.outcome-item-zoom:focus-visible .outcome-item-img {
  transform: scale(1.02);
}

.outcome-item-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}

.outcome-item-body h3,
.outcome-item-body .outcome-item-title {
  margin: 0 0 0.35rem;
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: var(--tracking-snug);
  color: var(--text-primary);
  line-height: 1.25;
}

.outcome-item-body p {
  margin: 0;
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

/* Outcome hint text (used as section lead) */
.outcome-row-hint {
  margin: 0 0 var(--space-4);
  font-size: var(--text-md);
  color: var(--text-muted);
  line-height: var(--leading-relaxed);
}

.module-matrix-hint {
  margin: 0 0 var(--space-5);
  font-size: var(--text-md);
  color: var(--text-muted);
  line-height: var(--leading-relaxed);
}

/* ————————————————————————————————————————————————————————————————— */
/* Section title label (legacy; new code uses .kicker)                */
/* ————————————————————————————————————————————————————————————————— */

.section-title {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
  margin: 0 0 var(--space-3);
}

/* ————————————————————————————————————————————————————————————————— */
/* Announcement bar                                                   */
/* ————————————————————————————————————————————————————————————————— */

.announce {
  /* 20px each side, 5px from top; width fills space between side margins */
  width: auto;
  max-width: 100%;
  margin: 5px 20px 0;
  min-height: 0;
  display: flex;
  align-items: center;
  background: var(--lemon-400, #f6d55c);
  color: var(--text-primary);
  font-size: var(--text-sm);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-card, 12px);
  position: relative;
  z-index: calc(var(--nav-z, 9999) + 1);
}

.announce-inner {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  padding: 0.4rem 2.5rem 0.4rem 0.75rem;
  min-height: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.9rem;
  text-align: center;
}

.announce-kicker {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.announce-link {
  color: var(--text-primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.announce-link:hover {
  color: var(--blueberry-700);
  text-decoration: underline;
}

.announce-dismiss {
  position: absolute;
  right: 0.35rem;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  margin-left: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-primary);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto;
  opacity: 0.7;
  transition: opacity var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}
.announce-dismiss:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.08);
}

@media (max-width: 640px) {
  .announce-inner {
    padding: 0.35rem 2.25rem 0.35rem 0.5rem;
    font-size: 0.75rem;
  }
}

/* ————————————————————————————————————————————————————————————————— */
/* Trust strip + logo wall                                            */
/* ————————————————————————————————————————————————————————————————— */

.trust {
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.trust-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
}

.trust-label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
  max-width: 40rem;
}

.trust-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.trust-rating-stars {
  color: var(--lemon-600, #c79f1f);
  letter-spacing: 0.1em;
  font-size: 0.9rem;
}

.trust-rating strong {
  color: var(--text-primary);
  font-weight: 600;
}

.logo-wall {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.25rem 2.75rem;
  margin-top: 0.5rem;
  width: 100%;
  max-width: 68rem;
}

.brand-wordmark {
  font-family: var(--font-sans);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 600;
  letter-spacing: var(--tracking-snug);
  color: var(--oat-700);
  opacity: 0.72;
  transition: opacity var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
  white-space: nowrap;
  user-select: none;
}
.brand-wordmark:hover {
  opacity: 1;
  color: var(--text-primary);
}

.brand-wordmark--bambu {
  letter-spacing: -0.02em;
}
.brand-wordmark--prusa {
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.95em;
}
.brand-wordmark--creality {
  font-style: italic;
  letter-spacing: -0.01em;
}
.brand-wordmark--voron {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 700;
  font-size: 0.88em;
}
.brand-wordmark--anycubic {
  font-weight: 500;
  letter-spacing: 0.01em;
}
.brand-wordmark--elegoo {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  font-size: 0.9em;
}
.brand-wordmark--qidi {
  letter-spacing: 0.18em;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.92em;
}
.brand-wordmark--flsun {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  font-size: 0.92em;
}

/* ————————————————————————————————————————————————————————————————— */
/* Dock mockup (CREATE / EFFECTS / PRINT tab demo)                   */
/* ————————————————————————————————————————————————————————————————— */

.dock-demo-row {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

@media (min-width: 860px) {
  .dock-demo-row {
    grid-template-columns: minmax(280px, 360px) 1fr;
  }
}

.dock-mock {
  background: var(--bg-secondary);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.dock-mock-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-hairline);
  background: var(--oat-100);
}

.dock-mock-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.7rem 0.5rem;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  transition: color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}

.dock-mock-tab:hover {
  color: var(--text-primary);
  background: var(--oat-200);
}

.dock-mock-tab.is-active {
  color: var(--accent-primary);
  background: var(--bg-secondary);
}

.dock-mock-tab.is-active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent-primary);
}

.dock-mock-panel {
  display: none;
  padding: 1rem 1.1rem 1.25rem;
  flex-direction: column;
  gap: 0.75rem;
}

.dock-mock-panel.is-active {
  display: flex;
}

.dock-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.dock-field-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-primary);
}

.dock-field-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border-hairline);
  border-radius: 8px;
  background: var(--bg-primary);
  font-size: 0.82rem;
  color: var(--text-primary);
  cursor: default;
}

.dock-chevron {
  font-size: 0.6rem;
  color: var(--text-muted);
  margin-left: 0.5rem;
}

.dock-field-value {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border-hairline);
  border-radius: 8px;
  background: var(--bg-primary);
  font-size: 0.82rem;
  color: var(--text-primary);
  cursor: default;
}

.dock-field-value small {
  margin-left: 0.3rem;
  color: var(--text-muted);
  font-size: 0.75rem;
}

.dock-field-hint {
  font-size: 0.7rem;
  font-style: italic;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

.dock-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-hairline);
}

.dock-group-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--accent-primary);
}

.dock-effects-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dock-effects-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-primary);
}

.dock-effects-add {
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--accent-primary);
  border-radius: 6px;
  background: rgba(var(--accent-primary-rgb), 0.08);
  color: var(--accent-primary);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: default;
}

.dock-effect-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border-hairline);
  border-radius: 8px;
  background: var(--bg-primary);
  transition: border-color var(--dur-fast) var(--ease-out);
}

.dock-effect-item:hover {
  border-color: var(--border-hairline-strong);
}

.dock-effect-handle {
  color: var(--text-muted);
  font-size: 0.85rem;
  cursor: grab;
  flex-shrink: 0;
  line-height: 1;
}

.dock-effect-name {
  flex: 1;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-primary);
}

.dock-effect-tag {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  background: var(--oat-200);
  flex-shrink: 0;
}

.dock-effect-item--xform .dock-effect-tag {
  background: rgba(236, 127, 59, 0.12);
  color: var(--tangerine-600);
}

.dock-effects-hint {
  margin: 0.25rem 0 0;
  font-size: 0.68rem;
  color: var(--text-muted);
  font-style: italic;
}

.dock-demo-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.dock-demo-detail h3 {
  margin: 0 0 0.5rem;
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: var(--tracking-snug);
}

.dock-demo-detail p {
  margin: 0 0 1rem;
  font-size: var(--text-md);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.dock-demo-detail .marketing-checklist {
  margin-top: 0;
}