@charset "UTF-8";

:root {
  color-scheme: dark;
  --void: #050505;
  --section: #0a0a0a;
  --card: #111111;
  --gold: #c6a15b;
  --gold-highlight: #e8d5a3;
  --gold-shadow: #8c7340;
  --metal-gold: linear-gradient(180deg, #f3e6c4 0%, #c6a15b 42%, #8a6a32 100%);
  --ivory: #f5f1e8;
  --body-copy: #b7b1a6;
  --line: rgba(198, 161, 91, .2);
  --line-hover: rgba(198, 161, 91, .5);
  --sans: "Geist", "Satoshi", "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Cormorant Garamond", "Bodoni 72", Didot, Georgia, serif;
  --mono: "JetBrains Mono", "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --page-pad: 16px;
  color: var(--ivory);
  background: var(--void);
  font-family: var(--sans);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
  scroll-padding-top: 60px;
}

*, *::before, *::after { box-sizing: border-box; }
body { min-width: 320px; margin: 0; color: var(--ivory); background: var(--void); font-size: 16px; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
::selection { color: var(--void); background: var(--gold-highlight); }
.top-target { display: block; width: 1px; height: 0; }
.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 10px 14px; transform: translateY(-160%); color: #1a1408; background: var(--gold-highlight); }
.skip-link:focus { transform: translateY(0); }

/* Small sticky identity bar */
.site-header { position: fixed; z-index: 20; inset: 0 0 auto; height: 52px; border-bottom: 1px solid transparent; transition: border-color .3s ease, background .3s ease; }
.site-header.is-scrolled { border-color: rgba(198, 161, 91, .28); background: rgba(5, 5, 5, .88); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.header-inner { display: flex; width: 100%; height: 100%; align-items: center; padding-inline: var(--page-pad); }
.brand { display: inline-flex; align-items: center; }
.brand-mark { display: block; width: 22px; height: 22px; fill: none; stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; }

/* Shared typography and controls */
h2, h3, p { margin-top: 0; }
.content-shell, .problem-shell { width: 100%; max-width: 680px; margin-inline: auto; padding-inline: var(--page-pad); }
.section-space { padding-block: 28px; }
.button { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; gap: 14px; padding: 0 24px; border: 1px solid transparent; border-radius: 4px; font: 600 13px/1 var(--sans); letter-spacing: .14em; text-align: center; text-transform: uppercase; transition: filter .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease, transform .2s ease; }
.button-primary { color: #1a1408; background: var(--metal-gold); box-shadow: inset 0 1px 0 rgba(255, 244, 214, .45), 0 10px 30px rgba(198, 161, 91, .18); }
.button-primary:hover { filter: brightness(1.06); box-shadow: inset 0 1px 0 rgba(255, 244, 214, .45), 0 12px 32px rgba(198, 161, 91, .23); }
.button-primary:active { transform: scale(.985); }
.button-chevron { width: 10px; height: 10px; flex: 0 0 10px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.button-primary:hover .button-chevron { transform: translateX(4px); }
.join-cta-group { display: flex; width: 100%; flex-direction: column; align-items: center; }
.join-cta-group .button { width: 100%; }
.trial-note { margin: 7px 0 0; color: var(--body-copy); font: 400 12px/1.4 var(--sans); text-align: center; }
:focus-visible { outline: 1px solid rgba(198, 161, 91, .7); outline-offset: 4px; }
html.js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .55s cubic-bezier(.22, 1, .36, 1), transform .55s cubic-bezier(.22, 1, .36, 1); }
html.js [data-reveal].is-visible { opacity: 1; transform: translateY(0); }
.problem-row:nth-child(2) { transition-delay: .06s; }
.problem-row:nth-child(3) { transition-delay: .12s; }
.problem-row:nth-child(4) { transition-delay: .18s; }
.problem-row:nth-child(5) { transition-delay: .24s; }

/* First screen */
.hero { position: relative; display: flex; min-height: 100svh; flex-direction: column; justify-content: center; overflow: hidden; padding: 66px var(--page-pad) 74px; isolation: isolate; }
.hero::before { position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse 78% 42% at 50% 22%, rgba(198, 161, 91, .1), transparent 74%), radial-gradient(ellipse 54% 32% at 18% 66%, rgba(140, 115, 64, .045), transparent 78%), var(--void); content: ""; }
.hero::after { position: absolute; z-index: 0; top: 44%; left: -4%; width: 108%; height: 145px; transform: translateY(-50%); clip-path: polygon(0 68%,12% 68%,18% 42%,27% 58%,36% 29%,45% 47%,54% 15%,64% 42%,74% 25%,84% 50%,95% 17%,100% 17%,100% 18%,95% 18%,84% 52%,74% 27%,64% 44%,54% 17%,45% 49%,36% 32%,27% 60%,18% 45%,12% 70%,0 70%); background: linear-gradient(90deg, transparent, #8c7340 8%, #e8d5a3 50%, #c6a15b 92%, transparent); opacity: .18; pointer-events: none; content: ""; }
.hero-content { position: relative; z-index: 1; width: 100%; max-width: 620px; margin: auto; text-align: center; }
.hero-monogram { display: block; width: 48px; height: 48px; margin: 0 auto 9px; fill: none; stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; }
.wordmark { margin: 0; color: var(--gold-highlight); background: var(--metal-gold); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font: 600 clamp(31px, 8.8vw, 43px)/1.03 var(--serif); letter-spacing: .09em; white-space: nowrap; animation: wordmark-rise .6s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes wordmark-rise { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.hero-tagline { margin: 11px 0 0; color: var(--gold-highlight); font: 500 16px/1.3 var(--serif); letter-spacing: .03em; }
.hero-support { margin: 7px 0 0; color: var(--body-copy); font-size: 16px; line-height: 1.4; }
.hero-pill-row { display: flex; justify-content: center; gap: 5px; margin: 11px auto 0; color: var(--gold); font: 8px/1.4 var(--mono); letter-spacing: .065em; white-space: nowrap; }
.hero-pill-row span { color: var(--gold-shadow); }
.hero-content > .join-cta-group { max-width: 340px; margin: 17px auto 0; }

/* Problem first, then the offer */
.problem-section { background: var(--section); }
.problem-shell > h2 { max-width: 18ch; margin: 0 auto 18px; color: var(--ivory); font: 500 clamp(34px, 9vw, 45px)/1.02 var(--serif); text-align: center; }
.problem-list { display: grid; gap: 8px; }
.problem-row { display: flex; min-height: 48px; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); transition: border-color .3s ease; }
.problem-row:hover { border-color: var(--line-hover); }
.problem-row p { margin: 0; color: var(--ivory); font-size: 16px; line-height: 1.35; }
.problem-ring { width: 9px; height: 9px; flex: 0 0 9px; border: 1px solid var(--gold); border-radius: 50%; }
.offer-card { margin-top: 14px; padding: 22px 18px; border: 1px solid rgba(198, 161, 91, .4); border-radius: 14px; background: var(--card); text-align: center; }
.offer-card h3 { margin: 0; color: var(--ivory); font: 500 30px/1.1 var(--serif); }
.offer-card > p { margin: 7px 0 15px; color: var(--body-copy); font-size: 16px; line-height: 1.4; }

/* Three concise learning outcomes */
.get-section { background: var(--void); }
.content-shell > h2 { margin: 0 0 14px; color: var(--ivory); font: 500 34px/1.1 var(--serif); }
.get-list { display: grid; gap: 10px; }
.get-item { padding: 12px 0; border-bottom: 1px solid var(--line); }
.get-item:last-child { border-bottom: 0; }
.get-item h3 { margin: 0 0 3px; color: var(--gold-highlight); font: 500 22px/1.15 var(--serif); }
.get-item p { max-width: 50ch; margin: 0; color: var(--body-copy); font-size: 16px; line-height: 1.4; }

/* Compact FAQ */
.faq-list { margin-top: 14px; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-trigger { display: flex; width: 100%; min-height: 46px; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border: 0; color: var(--ivory); background: transparent; cursor: pointer; font-size: 16px; line-height: 1.3; text-align: left; }
.faq-chevron { display: grid; width: 16px; height: 16px; flex: 0 0 16px; place-items: center; color: var(--gold-highlight); transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
.faq-chevron svg { width: 12px; height: 8px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.faq-trigger[aria-expanded="true"] .faq-chevron { transform: rotate(180deg); }
.faq-answer { display: block; height: 0; overflow: hidden; opacity: 0; transition: height .35s cubic-bezier(.22, 1, .36, 1), opacity .35s cubic-bezier(.22, 1, .36, 1); }
.faq-answer.is-open { opacity: 1; }
.faq-answer p { margin: 0; padding: 0 0 13px; color: var(--body-copy); font-size: 16px; line-height: 1.4; }

/* One final action and the legal notice */
.disclaimer-section { background: var(--section); }
.disclaimer-inner h2 { margin: 0 0 12px; color: var(--ivory); font: 500 32px/1.1 var(--serif); }
.disclaimer-inner p { margin: 0 0 9px; color: var(--body-copy); font-size: 16px; line-height: 1.4; }
.disclaimer-inner p:last-child { margin-bottom: 0; }
.site-footer { border-top: 1px solid var(--line); background: var(--void); }
.footer-inner { display: flex; min-height: 54px; align-items: center; justify-content: space-between; padding-inline: var(--page-pad); color: var(--body-copy); font-size: 12px; }
.back-top { padding: 6px 0; border: 0; color: var(--gold-highlight); background: transparent; cursor: pointer; font: 500 14px var(--sans); }

@media (min-width: 760px) {
  :root { --page-pad: 28px; scroll-padding-top: 60px; }
  .site-header { height: 60px; }
  .hero { padding-top: 75px; padding-bottom: 76px; }
  .hero-tagline { font-size: 19px; }
  .hero-support { font-size: 17px; }
  .hero-pill-row { font-size: 9px; }
  .hero-content > .join-cta-group { margin-top: 20px; }
  .problem-section, .get-section, .disclaimer-section { padding-block: 36px; }
  .problem-shell > h2 { font-size: 48px; }
  .offer-card { padding: 26px 28px; }
  .get-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
  .get-item { border-bottom: 0; }
  .faq-list { margin-top: 16px; }
  .disclaimer-inner h2 { font-size: 38px; }
}

@media (max-width: 360px) {
  .hero-pill-row { gap: 3px; font-size: 7px; letter-spacing: .035em; }
  .wordmark { font-size: 29px; letter-spacing: .055em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; transition: none !important; }
  html.js [data-reveal] { opacity: 1; transform: none; }
  .faq-answer { display: none; height: auto; overflow: visible; opacity: 1; }
  .faq-answer.is-open { display: block; }
}