:root, [data-theme="light"] {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;
  --color-bg: #f7f6f2;
  --color-surface: #f9f8f5;
  --color-surface-2: #fbfbf9;
  --color-surface-offset: #f1efe9;
  --color-border: #d4d1ca;
  --color-divider: #dcd9d5;
  --color-text: #28251d;
  --color-text-muted: #65635e;
  --color-text-faint: #9a9994;
  --color-text-inverse: #f9f8f4;
  --color-primary: #01696f;
  --color-primary-hover: #0c4e54;
  --color-primary-highlight: #dcebea;
  --shadow-sm: 0 1px 2px rgba(35, 31, 24, 0.06);
  --shadow-md: 0 8px 24px rgba(35, 31, 24, 0.08);
  --shadow-lg: 0 20px 50px rgba(35, 31, 24, 0.12);
  --content-default: 1120px;
  --font-display: 'Boska', Georgia, serif;
  --font-body: 'Satoshi', Arial, sans-serif;
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
[data-theme="dark"] {
  --color-bg: #171614;
  --color-surface: #1c1b19;
  --color-surface-2: #201f1d;
  --color-surface-offset: #23211f;
  --color-border: #393836;
  --color-divider: #262523;
  --color-text: #e5e2db;
  --color-text-muted: #b1aea7;
  --color-text-faint: #7b7771;
  --color-text-inverse: #1d1b18;
  --color-primary: #4f98a3;
  --color-primary-hover: #64aeb8;
  --color-primary-highlight: #253235;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.22);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.38);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:none;text-size-adjust:none;scroll-behavior:smooth;scroll-padding-top:5rem}
body{min-height:100dvh;font-family:var(--font-body);font-size:var(--text-base);line-height:1.6;color:var(--color-text);background:radial-gradient(circle at top left,color-mix(in oklab,var(--color-primary) 8%,transparent),transparent 30%),var(--color-bg)}
img,svg{display:block;max-width:100%}a{color:inherit;text-decoration:none}button{font:inherit;border:none;background:none;cursor:pointer}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;border-radius:var(--radius-sm)}
.skip-link{position:absolute;left:var(--space-4);top:-3rem;background:var(--color-primary);color:var(--color-text-inverse);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);z-index:100}.skip-link:focus{top:var(--space-4)}
.container{width:min(calc(100% - 2rem),var(--content-default));margin-inline:auto}
.site-header{position:sticky;top:0;z-index:30;backdrop-filter:blur(10px);background:color-mix(in oklab,var(--color-bg) 88%,transparent);border-bottom:1px solid color-mix(in oklab,var(--color-text) 10%,transparent)}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:4.75rem}
.brand{display:inline-flex;align-items:center;gap:var(--space-3);font-weight:700;letter-spacing:.01em}.brand-mark{width:2.5rem;height:2.5rem;border-radius:.8rem;background:var(--color-surface);border:1px solid color-mix(in oklab,var(--color-text) 10%,transparent);padding:.5rem;box-shadow:var(--shadow-sm)}
.brand-name{font-size:var(--text-sm);text-transform:uppercase;letter-spacing:.12em;color:var(--color-text-muted)}
.header-actions{display:flex;align-items:center;gap:var(--space-3)}
/* --- header / button styles --- */

.theme-toggle,
.menu-toggle {
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  border: 1px solid color-mix(in oklab, var(--color-text) 10%, transparent);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  color: var(--color-text);
}

/* SVG icon inherits parent text color */
.theme-toggle svg,
.menu-toggle svg {
  color: currentColor;
  stroke: currentColor;
}

/* Theme toggle visible everywhere */
.theme-toggle {
  display: inline-flex;
}

/* Menu toggle hidden by default (desktop) */
.menu-toggle {
  display: none;
}

/* White‑ish icon for dark theme */
[data-theme="dark"] .theme-toggle,
[data-theme="dark"] .menu-toggle {
  color: #ffffff;
}


.nav-link,.button,.button-secondary{min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:.85rem 1.1rem;border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:600;transition:transform var(--transition-interactive),background var(--transition-interactive),color var(--transition-interactive),border-color var(--transition-interactive),box-shadow var(--transition-interactive)}
.nav-link{color:var(--color-text-muted)}.nav-link:hover{color:var(--color-text)}
.button{color:var(--color-text-inverse);background:var(--color-primary);box-shadow:var(--shadow-sm)}.button:hover{background:var(--color-primary-hover);transform:translateY(-1px)}
.button-secondary{background:var(--color-surface);border:1px solid color-mix(in oklab,var(--color-text) 10%,transparent);color:var(--color-text)}.button-secondary:hover{background:var(--color-surface-offset);transform:translateY(-1px)}
.public-nav{display:flex;align-items:center;gap:var(--space-2)}
.public-nav-menu{display:flex;align-items:center;gap:var(--space-2)}
.menu-toggle{display:none}
.hero{padding:clamp(var(--space-12),9vw,var(--space-24)) 0 var(--space-16)}.hero-grid{display:grid;gap:var(--space-8);align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius-full);background:var(--color-primary-highlight);color:var(--color-primary);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.12em;font-weight:700}
.hero h1,.page-hero h1{margin-top:var(--space-5);font-family:var(--font-display);font-size:clamp(2.75rem,7vw,5.2rem);line-height:.95;letter-spacing:-.03em;max-width:11ch}
.hero p,.page-hero p{margin-top:var(--space-5);max-width:58ch;color:var(--color-text-muted)}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6)}
.micro-proof{margin-top:var(--space-5);display:flex;flex-wrap:wrap;gap:var(--space-4);color:var(--color-text-muted);font-size:var(--text-sm)}.micro-proof span::before{content:"•";margin-right:.55rem;color:var(--color-primary)}
.hero-panel{background:linear-gradient(180deg,var(--color-surface-2),var(--color-surface));border:1px solid color-mix(in oklab,var(--color-text) 10%,transparent);border-radius:1.4rem;padding:var(--space-6);box-shadow:var(--shadow-lg);position:relative;overflow:hidden}.hero-panel::after{content:"";position:absolute;inset:auto -10% -30% auto;width:14rem;height:14rem;border-radius:50%;background:color-mix(in oklab,var(--color-primary) 12%,transparent);filter:blur(20px)}
.panel-stack{display:grid;gap:var(--space-4);position:relative;z-index:1}
.mini-card,.feature-card,.step-card,.benefit-card,.cta-shell,.content-card{background:var(--color-surface);border:1px solid color-mix(in oklab,var(--color-text) 10%,transparent);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm)}
.mini-card,.feature-card,.step-card,.benefit-card,.content-card{padding:var(--space-6)}.cta-shell{padding:clamp(var(--space-8),5vw,var(--space-12));display:grid;gap:var(--space-5);align-items:center}
.mini-label{color:var(--color-text-muted);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.12em;margin-bottom:var(--space-2)}.mini-value{font-size:var(--text-xl);font-weight:700}.mini-note{margin-top:var(--space-2);color:var(--color-text-muted);font-size:var(--text-sm)}
.section,.page-section{padding:clamp(var(--space-10),7vw,var(--space-20)) 0}.page-hero{padding:clamp(var(--space-12),8vw,var(--space-20)) 0 var(--space-10)}
.section-head{display:grid;gap:var(--space-3);margin-bottom:var(--space-8)}.section-head h2{font-size:var(--text-2xl);font-family:var(--font-display);max-width:14ch;line-height:1}.section-head p{color:var(--color-text-muted);max-width:58ch}
.feature-grid,.steps-grid,.benefit-grid,.content-grid{display:grid;gap:var(--space-4)}
.feature-card h3,.step-card h3,.benefit-card h3,.content-card h3{font-size:var(--text-lg);margin-bottom:var(--space-3)}
.feature-card p,.step-card p,.benefit-card p,.content-card p,.content-card li{color:var(--color-text-muted)}
.feature-kicker{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.12em;color:var(--color-primary);margin-bottom:var(--space-3);font-weight:700}
.showcase{display:grid;gap:var(--space-4);grid-template-columns:repeat(12,1fr)}
.showcase .wide,.showcase .tall,.showcase .compact{background:var(--color-surface);border:1px solid color-mix(in oklab,var(--color-text) 10%,transparent);border-radius:1.25rem;padding:var(--space-6);box-shadow:var(--shadow-sm)}
.showcase .wide,.showcase .tall,.showcase .compact{grid-column:span 12}.metric-row{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-4)}.metric-pill{padding:var(--space-2) var(--space-3);border-radius:var(--radius-full);background:var(--color-surface-offset);color:var(--color-text-muted);font-size:var(--text-sm)}
.cta{padding-bottom:clamp(var(--space-12),10vw,var(--space-24))}.cta-shell h2{font-size:var(--text-2xl);font-family:var(--font-display);line-height:1;max-width:14ch}.cta-shell p{color:var(--color-text-muted);max-width:56ch}
.site-footer{padding:var(--space-6) 0 var(--space-12);color:var(--color-text-muted);border-top:1px solid color-mix(in oklab,var(--color-text) 10%,transparent)}.footer-row{display:flex;flex-direction:column;gap:var(--space-3)}
.footer-links{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.reveal{opacity:0;transform:translateY(18px);transition:opacity 500ms ease,transform 500ms ease}.reveal.is-visible{opacity:1;transform:translateY(0)}
@media (min-width:760px){.hero-grid{grid-template-columns:1.08fr .92fr}.feature-grid{grid-template-columns:1.2fr .8fr 1fr}.steps-grid{grid-template-columns:repeat(3,1fr)}.benefit-grid,.content-grid{grid-template-columns:repeat(2,1fr)}.showcase .wide{grid-column:span 7}.showcase .tall{grid-column:span 5}.showcase .compact{grid-column:span 4}.cta-shell{grid-template-columns:1.15fr auto;justify-content:space-between}.footer-row{flex-direction:row;justify-content:space-between;align-items:center}}
/* mobile breakpoint */
@media (max-width: 759px) {
  .header-row {
    flex-wrap: wrap;
    padding: var(--space-3) 0;
  }

  .public-nav {
    width: 100%;
    justify-content: space-between;
  }

  .menu-toggle {
    display: inline-flex;
  }

  .public-nav-menu {
    width: 100%;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    padding: var(--space-3) 0;
  }

  .public-nav-menu.is-open {
    display: flex;
  }

  .public-nav-menu .nav-link,
  .public-nav-menu .button-secondary,
  .public-nav-menu .button {
    width: 100%;
  }

  .hero h1,
  .page-hero h1 {
    max-width: 9ch;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .button,
  .button-secondary {
    width: 100%;
  }
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.button:hover,.button-secondary:hover{transform:none}}