/* ===== Tokens ===== */
:root, [data-theme="light"] {
  --text-xs: clamp(.75rem,.7rem + .25vw,.875rem);
  --text-sm: clamp(.875rem,.8rem + .35vw,1rem);
  --text-base: clamp(1rem,.95rem + .25vw,1.125rem);
  --text-lg: clamp(1.125rem,1rem + .75vw,1.5rem);
  --text-xl: clamp(1.5rem,1.2rem + 1.25vw,2.25rem);
  --text-2xl: clamp(2rem,1.2rem + 2.5vw,3.5rem);

  --space-1:.25rem; --space-2:.5rem; --space-3:.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; --space-32:8rem;

  /* Warm marble surfaces */
  --color-bg:#F6F2EA;
  --color-surface:#FBF8F2;
  --color-surface-offset:#EFE9DD;
  --color-border:#DCD3C4;
  --color-divider:#E7E0D2;

  /* High-contrast warm neutrals */
  --color-text:#221F1A;
  --color-text-muted:#6E675C;
  --color-text-faint:#A69D8E;
  --color-text-inverse:#FBF8F2;

  /* Jewel accent — deep teal */
  --color-primary:#0D5257;
  --color-primary-hover:#093C40;
  --color-primary-highlight:#CBDBD9;
  --color-brass:#9A7B3F;

  --radius-sm:.375rem; --radius-md:.5rem; --radius-lg:.75rem; --radius-full:9999px;
  --transition-interactive:180ms cubic-bezier(.16,1,.3,1);
  --shadow-sm:0 1px 2px oklch(.2 .01 80 / .06);
  --shadow-md:0 6px 20px oklch(.2 .01 80 / .09);
  --shadow-lg:0 18px 48px oklch(.2 .01 80 / .14);

  --content:1120px;
  --font-display:'Instrument Serif', Georgia, serif;
  --font-body:'Satoshi','Helvetica Neue',Arial,sans-serif;
}

[data-theme="dark"] {
  --color-bg:#15150F;
  --color-surface:#1C1B16;
  --color-surface-offset:#23221B;
  --color-border:#3A382F;
  --color-divider:#2A2922;
  --color-text:#E8E3D8;
  --color-text-muted:#9A9384;
  --color-text-faint:#6A6456;
  --color-text-inverse:#15150F;
  --color-primary:#63B0B3;
  --color-primary-hover:#84C6C8;
  --color-primary-highlight:#26383A;
  --color-brass:#C9A567;
  --shadow-sm:0 1px 2px oklch(0 0 0 / .3);
  --shadow-md:0 6px 20px oklch(0 0 0 / .4);
  --shadow-lg:0 18px 48px oklch(0 0 0 / .5);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]){
    --color-bg:#15150F; --color-surface:#1C1B16; --color-surface-offset:#23221B;
    --color-border:#3A382F; --color-divider:#2A2922; --color-text:#E8E3D8;
    --color-text-muted:#9A9384; --color-text-faint:#6A6456; --color-text-inverse:#15150F;
    --color-primary:#63B0B3; --color-primary-hover:#84C6C8; --color-primary-highlight:#26383A;
    --color-brass:#C9A567;
  }
}

/* ===== Layout ===== */
.wrap{width:100%;max-width:var(--content);margin-inline:auto;padding-inline:var(--space-6)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--space-4);top:var(--space-4);z-index:99;background:var(--color-primary);color:var(--color-text-inverse);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md)}

/* ===== Header ===== */
.site-header{position:sticky;top:0;z-index:50;background:oklch(from var(--color-bg) l c h / .88);backdrop-filter:blur(12px);border-bottom:1px solid var(--color-divider)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding-block:var(--space-4)}
.brand{display:inline-flex;align-items:center;gap:var(--space-3);text-decoration:none;color:var(--color-text)}
.brand-mark{color:var(--color-primary);flex:none}
.brand-text{font-family:var(--font-display);font-size:var(--text-lg);letter-spacing:.01em}
.theme-btn{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--radius-full);color:var(--color-text-muted);border:1px solid var(--color-border)}
.theme-btn:hover{color:var(--color-primary);border-color:var(--color-primary)}

/* ===== Hero ===== */
.hero{padding-block:clamp(var(--space-12),7vw,var(--space-24))}
.hero-grid{display:grid;gap:clamp(var(--space-8),5vw,var(--space-16));align-items:center}
@media (min-width:900px){.hero-grid{grid-template-columns:1.05fr .95fr}}

.eyebrow{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.14em;font-weight:500;color:var(--color-primary);margin-bottom:var(--space-4)}
.hero h1{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:400;letter-spacing:-.01em;margin-bottom:var(--space-5)}
.hero h1 em{font-style:italic;color:var(--color-primary)}
.lede{font-size:var(--text-base);color:var(--color-text-muted);max-width:52ch;margin-bottom:var(--space-8)}

.hero-figure{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--color-border)}
.hero-figure img{width:100%;height:auto}

/* ===== Form ===== */
.optin{margin-bottom:var(--space-6)}
.optin-row{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.optin input{flex:1 1 15rem;min-width:0;padding:var(--space-4) var(--space-5);font-size:var(--text-sm);
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text)}
.optin input::placeholder{color:var(--color-text-faint)}
.optin input:focus-visible{border-color:var(--color-primary);outline-offset:1px}
.optin input[aria-invalid="true"]{border-color:var(--color-brass)}

.btn-primary{flex:0 0 auto;padding:var(--space-4) var(--space-6);font-size:var(--text-sm);font-weight:700;
  background:var(--color-primary);color:var(--color-text-inverse);border-radius:var(--radius-md);letter-spacing:.01em}
.btn-primary:hover{background:var(--color-primary-hover)}
.btn-primary[disabled]{opacity:.6;cursor:progress}

.form-note{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:var(--space-3)}
.form-note[data-state="error"]{color:var(--color-brass)}
.form-note[data-state="ok"]{color:var(--color-primary);font-weight:500}

.credit{font-size:var(--text-xs);color:var(--color-text-muted);letter-spacing:.02em}
.credit cite{font-style:italic;color:var(--color-text)}

/* ===== Sections ===== */
.section{padding-block:clamp(var(--space-12),7vw,var(--space-24));border-top:1px solid var(--color-divider)}
.section-title{font-family:var(--font-display);font-size:var(--text-xl);font-weight:400;margin-bottom:var(--space-3)}
.section-lede{color:var(--color-text-muted);font-size:var(--text-sm);margin-bottom:var(--space-12)}

.feature-grid{display:grid;gap:var(--space-8)}
@media (min-width:640px){.feature-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.feature-grid{grid-template-columns:repeat(3,1fr);gap:var(--space-10)}}
.feature{padding-top:var(--space-5);border-top:2px solid var(--color-primary-highlight)}
.feature-num{display:block;font-size:var(--text-xs);font-weight:700;letter-spacing:.12em;color:var(--color-primary);margin-bottom:var(--space-3)}
.feature h3{font-size:var(--text-lg);font-weight:500;margin-bottom:var(--space-2)}
.feature p{font-size:var(--text-sm);color:var(--color-text-muted)}

/* ===== Quote ===== */
.quote-band{background:var(--color-surface-offset);padding-block:clamp(var(--space-12),7vw,var(--space-20))}
.quote-band blockquote p{font-family:var(--font-display);font-size:var(--text-xl);font-style:italic;
  max-width:36ch;margin-inline:auto;text-align:center;color:var(--color-text)}

/* ===== About + upsell ===== */
.about-grid{display:grid;gap:clamp(var(--space-8),5vw,var(--space-16));align-items:start}
@media (min-width:900px){.about-grid{grid-template-columns:1.15fr .85fr}}
.about-grid p{font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--space-4)}

.upsell{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);
  padding:clamp(var(--space-6),3vw,var(--space-8));box-shadow:var(--shadow-sm)}
.upsell h3{font-family:var(--font-display);font-size:var(--text-lg);font-weight:400;margin-bottom:var(--space-4)}
.upsell p{font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--space-6)}
.btn-ghost{display:inline-block;padding:var(--space-3) var(--space-5);font-size:var(--text-sm);font-weight:500;
  text-decoration:none;color:var(--color-primary);border:1px solid var(--color-primary);border-radius:var(--radius-md)}
.btn-ghost:hover{background:var(--color-primary);color:var(--color-text-inverse)}
.upsell-note{font-size:var(--text-xs);color:var(--color-text-faint);margin-top:var(--space-4);margin-bottom:0}

/* ===== Footer ===== */
.site-footer{border-top:1px solid var(--color-divider);padding-block:var(--space-10)}
.footer-inner{display:flex;flex-wrap:wrap;gap:var(--space-4);justify-content:space-between;align-items:center}
.site-footer p{font-size:var(--text-xs);color:var(--color-text-faint);margin:0}

/* ===== Success state ===== */
.success{background:var(--color-surface);border:1px solid var(--color-primary);border-left-width:3px;
  border-radius:var(--radius-md);padding:var(--space-5) var(--space-6)}
.success-title{font-family:var(--font-display);font-size:var(--text-lg);color:var(--color-primary);margin-bottom:var(--space-2)}
.success-body{font-size:var(--text-sm);color:var(--color-text-muted);margin:0}

/* Kit form states */
.formkit-alert{list-style:none;margin:0 0 var(--space-4);padding:var(--space-4) var(--space-5);border-radius:var(--radius-md,8px);font-size:var(--text-sm)}
.formkit-alert:empty{display:none}
.formkit-alert-error{background:var(--color-surface);border:1px solid var(--color-brass);color:var(--color-text)}
.formkit-alert-success{background:var(--color-surface);border:1px solid var(--color-primary);border-left-width:3px;color:var(--color-primary);font-weight:500;line-height:1.5}
.formkit-submit[data-active]{opacity:.7;pointer-events:none}
.formkit-spinner{display:none}
.formkit-powered-by-convertkit-container{display:none}