/* ==========================================================================
   VITAL ACADEMY — Editorial refinement pass
   Palette: cream / beige / sand / sage → sage-deep / gold
   Type:    Cormorant Garamond (display, true italics) · Inter (body/UI)
   ========================================================================== */

:root{
  /* Core palette */
  --cream:#F7F2E9;
  --cream-warm:#F2EADB;
  --beige:#EDE3D2;
  --beige-deep:#D9CDB6;
  --sand:#C9B998;
  --sage:#8A9A7B;
  --sage-mid:#6F8063;
  --sage-deep:#4E5D45;
  --sage-ink:#2F3A2A;
  --ink:#2B2D26;
  --muted:#6B6A60;
  --gold:#B08C55;
  --gold-soft:#C9A96E;

  /* Hairlines & rules */
  --rule:rgba(47,58,42,.12);
  --rule-thin:rgba(47,58,42,.08);
  --rule-hair:rgba(47,58,42,.05);
  --rule-on-dark:rgba(237,227,210,.22);
  --line:rgba(47,58,42,.12);

  /* Shadows */
  --shadow-sm:0 1px 2px rgba(47,58,42,.04), 0 2px 6px rgba(47,58,42,.05);
  --shadow-md:0 8px 24px -16px rgba(47,58,42,.18), 0 2px 8px -4px rgba(47,58,42,.10);
  --shadow-lg:0 30px 60px -30px rgba(47,58,42,.28), 0 10px 24px -16px rgba(47,58,42,.16);
  --shadow-press:0 18px 40px -18px rgba(78,93,69,.55), 0 2px 6px -2px rgba(47,58,42,.22);

  /* Easing */
  --ease-out-expo:cubic-bezier(.19,1,.22,1);
  --ease-out-quart:cubic-bezier(.165,.84,.44,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-standard:cubic-bezier(.4,0,.2,1);

  /* Rhythm */
  --space-xs:8px;
  --space-sm:16px;
  --space-md:28px;
  --space-lg:60px;
  --space-xl:110px;
}

/* ---------- Reset + base ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}

body{
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  color:var(--ink);
  background:var(--cream);
  font-weight:300;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:"kern","liga","calt","ss01";
  hanging-punctuation:first last;
  position:relative;
  overflow-x:hidden;
}

/* Subtle paper grain — fixed overlay, blends with everything */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:200;
  opacity:.35;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 .18 0 0 0 0 .22 0 0 0 0 .16 0 0 0 .45 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:240px 240px;
}
@media (prefers-reduced-motion:reduce){ body::before{ opacity:.18 } }

/* ---------- Typography ---------- */
h1,h2,h3,h4{
  font-family:'Cormorant Garamond', 'Garamond', 'Times New Roman', serif;
  font-weight:500;
  letter-spacing:-.012em;
  color:var(--sage-ink);
  margin:0;
  font-feature-settings:"kern","liga","dlig","calt","onum";
  font-optical-sizing:auto;
  text-wrap:balance;
}
h1{ font-size:clamp(2.6rem,6vw,5rem); line-height:1.02; letter-spacing:-.022em }
h2{ font-size:clamp(2rem,4.2vw,3.4rem); line-height:1.08; letter-spacing:-.018em }
h3{ font-size:clamp(1.4rem,2.4vw,1.9rem); line-height:1.2; letter-spacing:-.01em }

p{ margin:0 0 1rem; text-wrap:pretty }
em, i{ font-style:italic }
strong{ font-weight:500; color:var(--sage-ink) }

a{ color:var(--sage-deep); text-decoration:none }
img{ max-width:100%; display:block }

::selection{ background:var(--sage-mid); color:var(--cream) }
::-moz-selection{ background:var(--sage-mid); color:var(--cream) }

:focus-visible{ outline:2px solid var(--sage-mid); outline-offset:4px; border-radius:4px }
.btn:focus-visible{ outline-offset:6px }

.wrap{ max-width:1180px; margin:0 auto; padding:0 28px }

/* ---------- Eyebrow (editorial kicker) ---------- */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:14px;
  font-family:'Inter',sans-serif;
  font-size:.72rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--sage-mid);
  font-weight:500;
  margin-bottom:1.4rem;
  font-feature-settings:"tnum","kern";
}
.eyebrow::before{
  content:"";
  display:inline-block;
  width:34px;
  height:1px;
  background:currentColor;
  opacity:.55;
}
.center .eyebrow::after{
  content:"";
  display:inline-block;
  width:34px;
  height:1px;
  background:currentColor;
  opacity:.55;
}

/* ---------- Scroll progress bar ---------- */
.progress{
  position:fixed; top:0; left:0; right:0;
  height:2px; z-index:60;
  pointer-events:none;
  background:transparent;
}
.progress-bar{
  height:100%;
  width:0%;
  background:linear-gradient(90deg, var(--sage-mid), var(--gold-soft), var(--sage-deep));
  transform-origin:left;
  transition:width .1s linear;
}

/* ---------- Navigation ---------- */
nav.top{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  background:rgba(247,242,233,.78);
  border-bottom:1px solid var(--rule-thin);
  transition:background .3s ease, box-shadow .3s ease, border-color .3s ease;
}
nav.top.is-scrolled{
  background:rgba(247,242,233,.92);
  box-shadow:0 1px 0 var(--rule-thin), 0 10px 30px -20px rgba(47,58,42,.15);
}
.navrow{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0; gap:20px;
}
.brand{
  display:flex; align-items:center; gap:12px;
  font-family:'Cormorant Garamond',serif;
  font-size:1.35rem; color:var(--sage-ink);
  font-weight:600; letter-spacing:.02em;
}
.brand-logo{
  display:block;
  width:150px; height:48px;
  background:var(--sage-deep);
  -webkit-mask:url("../img/Logo_VA_duze-removebg-preview-m6c6syzz-mklc8d94.png") no-repeat center/contain;
          mask:url("../img/Logo_VA_duze-removebg-preview-m6c6syzz-mklc8d94.png") no-repeat center/contain;
  transition:transform .5s var(--ease-out-expo), background-color .3s ease;
}
.brand:hover .brand-logo{ transform:scale(.97) }
.brand-logo.on-dark{ background:var(--beige) }

.navlinks{
  display:flex; gap:30px;
  font-size:.86rem;
  color:var(--muted);
  letter-spacing:.02em;
}
.navlinks a{
  position:relative;
  padding:6px 0;
  color:inherit;
  transition:color .25s ease;
}
.navlinks a::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-2px;
  height:1px;
  background:var(--sage-ink);
  transform:scaleX(0);
  transform-origin:right center;
  transition:transform .45s var(--ease-out-expo);
}
.navlinks a:hover{ color:var(--sage-ink) }
.navlinks a:hover::after{ transform:scaleX(1); transform-origin:left center }
@media (max-width:780px){ .navlinks{ display:none } }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 28px;
  border-radius:999px;
  font-family:'Inter',sans-serif;
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:500;
  transition:transform .5s var(--ease-out-expo),
             box-shadow .5s var(--ease-out-expo),
             background-color .3s ease,
             color .3s ease,
             border-color .3s ease;
  cursor:pointer;
  border:none;
  position:relative;
  will-change:transform;
}
.btn svg.arrow{
  display:inline-block;
  width:20px;
  height:10px;
  margin-left:4px;
  vertical-align:middle;
  overflow:visible;
  flex-shrink:0;
  transition:transform .45s var(--ease-out-expo);
}
.btn:hover svg.arrow{ transform:translateX(5px) }

.btn-primary{
  background:var(--sage-deep);
  color:var(--cream);
  box-shadow:0 10px 28px -14px rgba(47,58,42,.55);
}
.btn-primary:hover{
  transform:translateY(-2px);
  background:var(--sage-ink);
  box-shadow:var(--shadow-press);
}
.btn-primary:active{ transform:translateY(0); transition-duration:.15s }

.btn-ghost{
  background:transparent;
  color:var(--sage-ink);
  border:1px solid var(--sage-mid);
}
.btn-ghost:hover{
  background:var(--sage-ink);
  color:var(--cream);
  border-color:var(--sage-ink);
  transform:translateY(-2px);
}
.btn-light{
  background:var(--cream);
  color:var(--sage-ink);
  box-shadow:0 10px 28px -14px rgba(0,0,0,.3);
}
.btn-light:hover{ transform:translateY(-2px); box-shadow:0 18px 40px -18px rgba(0,0,0,.35) }

/* ---------- Media wrapper (images + duotone treatment) ---------- */
.media{
  position:relative; overflow:hidden;
  border-radius:8px;
  background:
    radial-gradient(1200px 400px at 10% 0%, rgba(138,154,123,.35), transparent 60%),
    radial-gradient(900px 500px at 110% 100%, rgba(176,140,85,.22), transparent 55%),
    linear-gradient(135deg, #B7C1A7 0%, #8A9A7B 50%, #6F8063 100%);
  isolation:isolate;
}
.media img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform 1.2s var(--ease-out-expo), filter .6s ease;
  filter:saturate(.92) contrast(1.02);
}
/* Unified warm overlay — ties all photography to the palette */
.media::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(47,58,42,0) 55%, rgba(47,58,42,.22) 100%),
    linear-gradient(180deg, rgba(201,185,152,.06), rgba(78,93,69,.06));
  pointer-events:none;
  z-index:3;
  transition:opacity .5s ease;
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding:90px 0 110px;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; right:-220px; top:-180px;
  width:760px; height:760px; border-radius:50%;
  background:radial-gradient(circle, rgba(138,154,123,.2), transparent 65%);
  pointer-events:none;
}
.hero::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--rule), transparent);
}
.hero-grid{
  display:grid;
  grid-template-columns:1.1fr .95fr;
  gap:80px;
  align-items:center;
}
@media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; gap:40px } }

.hero h1 em{ font-style:italic; color:var(--sage-mid); font-weight:400 }
.hero-sub{
  font-size:1.12rem;
  color:var(--muted);
  max-width:520px;
  margin:1.8rem 0 2.4rem;
  line-height:1.7;
}
.hero-sub strong{ color:var(--sage-ink); font-weight:500 }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap }

/* Hero meta row — editorial, with rules between */
.hero-meta{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:0;
  margin-top:2.6rem;
  padding-top:2rem;
  border-top:1px solid var(--rule-thin);
  color:var(--muted);
  font-size:.8rem;
  letter-spacing:.02em;
}
.hero-meta > div{
  padding:0 24px;
  border-left:1px solid var(--rule-hair);
}
.hero-meta > div:first-child{ padding-left:0; border-left:none }
.hero-meta strong{
  display:block;
  color:var(--sage-ink);
  font-family:'Cormorant Garamond',serif;
  font-size:1.75rem;
  font-weight:500;
  letter-spacing:-.01em;
  margin-bottom:4px;
  line-height:1;
}

/* Hero image wrap — container that can extend beyond media overflow */
.hero-img-wrap{
  position:relative;
}

/* Hero image — aspect, ken-burns, bracket markers */
.hero-img{
  aspect-ratio:4/5;
  min-height:520px;
  position:relative;
  border-radius:6px;
  box-shadow:var(--shadow-lg);
}
.hero-img img{
  animation:kenburns 22s ease-out both;
}
@keyframes kenburns{
  0%{ transform:scale(1.06) translate(0,0) }
  100%{ transform:scale(1.14) translate(-1.5%, -1.2%) }
}

/* Floating edition chip — centered on image bottom */
.hero-chip{
  position:absolute;
  left:50%;
  bottom:24px;
  transform:translateX(-50%);
  z-index:4;
  max-width:calc(100% - 24px);
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 18px 10px 14px;
  background:var(--cream);
  border:1px solid var(--rule-thin);
  border-radius:999px;
  box-shadow:var(--shadow-md);
  font-size:.66rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--sage-ink);
  font-weight:500;
  white-space:nowrap;
  backdrop-filter:blur(6px);
}
.hero-chip .dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--sage-mid);
  position:relative;
  box-shadow:0 0 0 0 rgba(138,154,123,.6);
  animation:pulse 2.4s var(--ease-in-out) infinite;
}
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(138,154,123,.55) }
  50%{ box-shadow:0 0 0 10px rgba(138,154,123,0) }
}
.hero-chip .sep{
  width:1px; height:14px; background:var(--rule); margin:0 2px;
}
.hero-chip .meta{
  color:var(--sage-mid);
  letter-spacing:.16em;
  font-size:.68rem;
}

/* Decorative corner brackets for hero column */
.hero-brackets{ position:relative }
.hero-brackets::before,
.hero-brackets::after{
  content:"";
  position:absolute;
  width:22px; height:22px;
  border:1px solid var(--sage-mid);
  opacity:.45;
  pointer-events:none;
}
.hero-brackets::before{ top:-12px; left:-14px; border-right:none; border-bottom:none }
.hero-brackets::after{ bottom:-14px; right:-14px; border-left:none; border-top:none }

/* ---------- Sections base ---------- */
section{
  padding:110px 0;
  position:relative;
}
.section-alt{ background:var(--beige) }
.section-deep{ background:var(--sage-deep); color:var(--cream) }
.section-deep h1,
.section-deep h2,
.section-deep h3{ color:var(--cream) }
.section-deep .eyebrow{ color:var(--beige-deep) }

.center{ text-align:center }
.lead{
  max-width:720px; margin:0 auto;
  font-size:1.1rem; color:var(--muted); line-height:1.7;
}

/* Large editorial numeral watermark */
.section-num{
  position:absolute;
  top:50px; right:40px;
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:clamp(5rem, 10vw, 9rem);
  font-weight:400;
  color:var(--sage);
  opacity:.09;
  pointer-events:none;
  line-height:1;
  letter-spacing:-.04em;
  user-select:none;
  z-index:0;
}
.section-deep .section-num{ color:var(--sand); opacity:.12 }

/* ---------- Story section ---------- */
.story{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:80px;
  align-items:center;
  position:relative; z-index:1;
}
@media (max-width:900px){ .story{ grid-template-columns:1fr; gap:40px } }
.story-img{ aspect-ratio:3/4 }
.dots{
  list-style:none; padding:0;
  margin:1.5rem 0;
  display:grid; gap:.8rem;
}
.dots li{
  padding-left:32px;
  position:relative;
  color:var(--ink);
  font-size:1.02rem;
}
.dots li::before{
  content:"";
  position:absolute; left:0; top:13px;
  width:16px; height:1px;
  background:var(--sage-mid);
  transform-origin:left;
  transition:width .5s var(--ease-out-expo), background .3s;
}
.dots li:hover::before{ width:24px; background:var(--sage-ink) }

.pullquote{
  font-family:'Cormorant Garamond',serif;
  font-weight:400;
  font-size:clamp(1.7rem, 3.2vw, 2.6rem);
  line-height:1.22;
  color:var(--sage-ink);
  font-style:italic;
  max-width:900px; margin:0 auto;
  text-align:center;
  position:relative;
  letter-spacing:-.008em;
}
.pullquote::before,
.pullquote::after{
  content:"";
  display:block;
  width:50px; height:1px;
  background:var(--sage);
  opacity:.6;
  margin:32px auto;
}

/* ---------- 4 Cards ---------- */
.cards4{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px; margin-top:70px;
  position:relative; z-index:1;
}
@media (max-width:900px){ .cards4{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:540px){ .cards4{ grid-template-columns:1fr } }
.card{
  background:var(--cream);
  border:1px solid var(--rule-thin);
  border-radius:8px;
  padding:36px 28px;
  transition:transform .6s var(--ease-out-expo),
             box-shadow .6s var(--ease-out-expo),
             border-color .3s ease,
             background-color .3s ease;
  position:relative;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute; left:0; top:0; right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--sage-mid), transparent);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .6s var(--ease-out-expo);
}
.card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
  border-color:var(--rule);
}
.card:hover::before{ transform:scaleX(1) }
.card .num{
  font-family:'Cormorant Garamond',serif;
  font-size:1.25rem;
  color:var(--sage);
  font-style:italic;
  margin-bottom:14px;
  font-feature-settings:"onum";
  display:flex; align-items:center; gap:10px;
}
.card .num::after{
  content:"";
  height:1px;
  flex:1;
  background:var(--rule-thin);
}
.card h3{ font-size:1.3rem; margin-bottom:10px; letter-spacing:-.008em }
.card p{ color:var(--muted); font-size:.95rem; margin:0; line-height:1.62 }

/* ---------- Levels ---------- */
.levels{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px; margin-top:70px;
  position:relative; z-index:1;
}
@media (max-width:900px){ .levels{ grid-template-columns:1fr } }
.level{
  background:var(--cream);
  border-radius:10px;
  overflow:hidden;
  display:flex; flex-direction:column;
  border:1px solid var(--rule-thin);
  transition:transform .6s var(--ease-out-expo),
             box-shadow .6s var(--ease-out-expo),
             border-color .3s;
}
.level:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
  border-color:var(--rule);
}
.level .media{
  aspect-ratio:5/4;
  border-radius:0;
  overflow:hidden;
}
.level:hover .media img{ transform:scale(1.06) }
.level-body{ padding:32px 30px 36px; position:relative }
.level-num{
  font-family:'Inter',sans-serif;
  color:var(--gold);
  letter-spacing:.3em;
  font-size:.7rem;
  text-transform:uppercase;
  font-weight:500;
  display:flex; align-items:center; gap:10px;
}
.level-num::before{
  content:"";
  width:18px; height:1px;
  background:var(--gold);
  opacity:.6;
}
.level h3{
  margin:12px 0 12px;
  font-size:1.7rem;
  letter-spacing:-.012em;
}
.level p{ color:var(--muted); font-size:.95rem; line-height:1.65 }

/* ---------- Testimonials ---------- */
.testis{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px; margin-top:60px;
}
@media (max-width:900px){ .testis{ grid-template-columns:1fr } }
.testi{
  background:var(--cream);
  border:1px solid var(--rule-thin);
  border-radius:8px;
  padding:36px 30px 32px;
  position:relative;
  transition:transform .5s var(--ease-out-expo),
             box-shadow .5s var(--ease-out-expo),
             border-color .3s;
  display:flex; flex-direction:column;
}
.testi:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
  border-color:var(--rule);
}
.testi .qmark{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:5rem;
  line-height:.6;
  color:var(--sage);
  opacity:.28;
  position:absolute;
  top:24px; right:24px;
  user-select:none;
  transition:opacity .3s ease, transform .5s var(--ease-out-expo);
}
.testi:hover .qmark{ opacity:.45; transform:rotate(-4deg) }
.testi-stars{
  display:flex; gap:4px;
  margin-bottom:14px;
  color:var(--gold);
}
.testi-stars svg{ width:12px; height:12px; fill:currentColor }
.testi h4{
  font-family:'Cormorant Garamond',serif;
  font-size:1.35rem;
  margin-bottom:14px;
  color:var(--sage-ink);
  font-style:italic;
  font-weight:500;
  letter-spacing:-.008em;
  max-width:calc(100% - 50px);
}
.testi p{
  font-size:.95rem;
  color:var(--ink);
  line-height:1.65;
  margin:0;
  flex:1;
}
.testi cite{
  display:flex; align-items:center; gap:12px;
  margin-top:22px; padding-top:18px;
  border-top:1px solid var(--rule-hair);
  font-style:normal;
  font-size:.74rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--sage-mid);
  font-weight:500;
}
.testi cite::before{
  content:"";
  width:28px; height:28px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--sand), var(--sage));
  flex:0 0 28px;
  box-shadow:inset 0 0 0 2px var(--cream);
}

.testi-dark{ background:var(--sage-deep); color:var(--cream); border-color:rgba(237,227,210,.1) }
.testi-dark .qmark{ color:var(--sand); opacity:.5 }
.testi-dark h4{ color:var(--cream) }
.testi-dark p{ color:var(--beige) }
.testi-dark cite{ color:var(--sand); border-top-color:rgba(237,227,210,.15) }
.testi-dark cite::before{ background:linear-gradient(135deg, var(--gold-soft), var(--sand)); box-shadow:inset 0 0 0 2px var(--sage-deep) }

/* ---------- Pillars ---------- */
.pillars{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0; margin-top:70px;
  border-top:1px solid var(--rule-on-dark);
  border-bottom:1px solid var(--rule-on-dark);
  position:relative; z-index:1;
}
@media (max-width:900px){ .pillars{ grid-template-columns:1fr } }
.pillar{
  padding:50px 40px;
  border-right:1px solid var(--rule-on-dark);
  position:relative;
}
.pillar:last-child{ border-right:none }
@media (max-width:900px){
  .pillar{ border-right:none; border-bottom:1px solid var(--rule-on-dark) }
  .pillar:last-child{ border-bottom:none }
}
.pillar-tag{
  font-family:'Inter',sans-serif;
  font-size:.68rem;
  letter-spacing:.32em;
  color:var(--sand);
  text-transform:uppercase;
  margin-bottom:22px;
  display:flex; align-items:center; gap:10px;
  font-weight:500;
}
.pillar-tag::before{
  content:"";
  width:20px; height:1px; background:var(--sand); opacity:.7;
}
.pillar h3{
  color:var(--cream);
  font-size:1.75rem;
  margin-bottom:20px;
  letter-spacing:-.012em;
  font-weight:500;
}
.pillar p{ color:var(--beige); line-height:1.65 }
.pillar ul{
  list-style:none; padding:0;
  margin:22px 0 0;
  display:grid; gap:.9rem;
  color:var(--beige);
}
.pillar ul li{
  padding-left:22px;
  position:relative;
  font-size:.95rem;
  line-height:1.55;
}
.pillar ul li::before{
  content:"";
  position:absolute;
  left:0; top:10px;
  width:10px; height:1px;
  background:var(--sand);
  opacity:.8;
}
.pillar ul li strong,
.pillar p strong,
.section-deep strong{
  color:var(--sand);
  font-weight:500;
}
.fw-yes strong{ color:var(--sand); font-weight:500 }
.testi-dark strong{ color:var(--sand); font-weight:500 }
.final strong{ color:var(--sand); font-weight:500 }

/* ---------- Pricing ---------- */
.price-box{
  background:var(--cream);
  border:1px solid var(--rule);
  border-radius:10px;
  padding:56px 56px 48px;
  max-width:780px; margin:60px auto 0;
  text-align:center;
  position:relative;
  box-shadow:var(--shadow-md);
}
.price-box::before{
  content:"";
  position:absolute;
  inset:-1px;
  border:1px solid transparent;
  border-radius:10px;
  background:linear-gradient(135deg, rgba(201,185,152,.3), transparent 40%, transparent 60%, rgba(176,140,85,.2)) border-box;
  -webkit-mask:linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
          mask:linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;
}
.price-badge{
  position:absolute;
  top:-14px; left:50%;
  transform:translateX(-50%);
  background:var(--sage-deep);
  color:var(--cream);
  padding:8px 22px;
  border-radius:999px;
  font-family:'Inter',sans-serif;
  font-size:.66rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  font-weight:500;
  white-space:nowrap;
  box-shadow:0 8px 20px -12px rgba(47,58,42,.6);
}
.price-label{
  font-family:'Inter',sans-serif;
  font-size:.7rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--sage-mid);
  font-weight:500;
  margin-bottom:14px;
  display:block;
}
.price{
  font-family:'Cormorant Garamond',serif;
  font-size:5rem;
  color:var(--sage-ink);
  line-height:1;
  font-weight:500;
  letter-spacing:-.03em;
  font-feature-settings:"lnum";
}
.price small{
  font-size:1.1rem;
  color:var(--muted);
  margin-left:8px;
  font-weight:400;
  letter-spacing:.08em;
  font-family:'Inter',sans-serif;
}
.price-box ul{
  text-align:left;
  margin:36px auto;
  max-width:520px;
  list-style:none;
  padding:0;
  color:var(--ink);
}
.price-box ul li{
  padding:13px 0 13px 32px;
  border-bottom:1px dashed var(--rule);
  position:relative;
  font-size:.95rem;
}
.price-box ul li::before{
  content:"";
  position:absolute;
  left:0; top:18px;
  width:16px; height:16px;
  border-radius:50%;
  background:var(--beige);
  border:1px solid var(--sage);
}
.price-box ul li::after{
  content:"";
  position:absolute;
  left:5px; top:22px;
  width:6px; height:3px;
  border-left:1.5px solid var(--sage-deep);
  border-bottom:1.5px solid var(--sage-deep);
  transform:rotate(-45deg);
}
.price-box ul li:last-child{ border-bottom:none }

/* ---------- Timeline ---------- */
.timeline{
  --line-x:11px;
  --dot:18px;
  --pad:54px;
  position:relative;
  max-width:780px;
  margin:70px auto 0;
  padding-left:var(--pad);
}
.timeline::before{
  content:"";
  position:absolute;
  top:10px; bottom:10px;
  left:var(--line-x);
  width:1px;
  background:linear-gradient(180deg, var(--sage) 0%, var(--sage-mid) 100%);
  transform-origin:top;
  animation:lineDraw 1.8s var(--ease-out-expo) both;
  animation-delay:.3s;
}
@keyframes lineDraw{
  from{ transform:scaleY(0); opacity:0 }
  to{ transform:scaleY(1); opacity:1 }
}
.tstep{
  position:relative;
  padding:0 0 46px 0;
}
.tstep:last-child{ padding-bottom:0 }
.tstep::before{
  content:"";
  position:absolute;
  top:7px;
  left:calc(var(--line-x) - var(--pad) - (var(--dot) / 2));
  width:var(--dot); height:var(--dot);
  border-radius:50%;
  background:var(--cream);
  border:2px solid var(--sage-mid);
  box-sizing:border-box;
  transition:transform .4s var(--ease-out-expo), background-color .3s;
}
.tstep::after{
  content:"";
  position:absolute;
  top:13px;
  left:calc(var(--line-x) - var(--pad) - 3px);
  width:6px; height:6px;
  border-radius:50%;
  background:var(--sage-deep);
  opacity:0;
  transition:opacity .4s ease;
}
.tstep.in::after{ opacity:1 }
.section-alt .tstep::before{ background:var(--beige) }
.tstep .date{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:1.35rem;
  color:var(--gold);
  letter-spacing:-.005em;
  font-feature-settings:"onum","lnum";
}
.tstep h3{
  font-size:1.4rem;
  margin:6px 0 10px;
  letter-spacing:-.008em;
}
.tstep p{ color:var(--muted); margin:0; line-height:1.65 }

/* ---------- For whom ---------- */
.forwho{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px; margin-top:60px;
}
@media (max-width:780px){ .forwho{ grid-template-columns:1fr } }
.fw-card{
  padding:44px 40px;
  border-radius:10px;
  position:relative;
  overflow:hidden;
}
.fw-yes{
  background:var(--sage-deep);
  color:var(--cream);
  box-shadow:var(--shadow-md);
}
.fw-yes::before{
  content:"";
  position:absolute;
  top:-40px; right:-40px;
  width:160px; height:160px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(201,185,152,.2), transparent 65%);
  pointer-events:none;
}
.fw-yes h3{ color:var(--cream) }
.fw-no{ background:var(--beige); color:var(--ink); border:1px solid var(--rule-thin) }
.fw-card h3{
  margin-bottom:28px;
  font-size:1.55rem;
  letter-spacing:-.012em;
  font-weight:500;
  position:relative;
  padding-bottom:18px;
}
.fw-card h3::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:40px; height:1px;
  background:currentColor;
  opacity:.35;
}
.fw-card ul{ list-style:none; padding:0; margin:0; display:grid; gap:1rem }
.fw-card li{
  padding-left:32px;
  position:relative;
  font-size:.98rem;
  line-height:1.55;
}
.fw-yes li::before{
  content:"";
  position:absolute;
  left:0; top:7px;
  width:14px; height:8px;
  border-left:1.5px solid var(--sand);
  border-bottom:1.5px solid var(--sand);
  transform:rotate(-45deg);
}
.fw-no li::before{
  content:"";
  position:absolute;
  left:2px; top:11px;
  width:12px; height:1.5px;
  background:var(--muted);
  opacity:.7;
}

/* ---------- Bonuses ---------- */
.bonuses{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px; margin-top:60px;
}
@media (max-width:780px){ .bonuses{ grid-template-columns:1fr } }
.bonus{
  background:var(--cream);
  border:1px solid var(--rule-thin);
  border-radius:10px;
  padding:40px;
  display:flex; gap:28px; align-items:flex-start;
  transition:transform .6s var(--ease-out-expo), box-shadow .6s var(--ease-out-expo), border-color .3s;
  position:relative;
  overflow:hidden;
}
.bonus:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
  border-color:var(--rule);
}
.bonus::before{
  content:"";
  position:absolute;
  top:20px; right:20px;
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:.7rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--gold);
}
.bonus.b1::before{ content:"Bonus · 01" }
.bonus.b2::before{ content:"Bonus · 02" }
.bonus .icon{
  flex:0 0 68px; width:68px; height:68px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--beige), var(--beige-deep));
  color:var(--sage-deep);
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);
}
.bonus h3{ font-size:1.35rem; margin-bottom:10px; letter-spacing:-.008em }
.bonus p{ color:var(--muted); font-size:.95rem; margin:0; line-height:1.65 }

/* ---------- FAQ ---------- */
.faq{ max-width:880px; margin:60px auto 0 }
details{
  border-bottom:1px solid var(--rule-thin);
  padding:26px 0;
  position:relative;
  transition:padding .3s ease;
}
details::before{
  content:"";
  position:absolute;
  left:-20px; top:0; bottom:0;
  width:2px;
  background:var(--sage-mid);
  transform:scaleY(0);
  transform-origin:center;
  transition:transform .5s var(--ease-out-expo), opacity .3s ease;
  opacity:.35;
}
details:hover::before{ transform:scaleY(.6); opacity:.6 }
details[open]::before{ transform:scaleY(1); opacity:1 }
details[open]{ padding-bottom:32px }
details summary{
  list-style:none;
  cursor:pointer;
  font-family:'Cormorant Garamond',serif;
  font-size:1.4rem;
  font-weight:500;
  color:var(--sage-ink);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  letter-spacing:-.008em;
  transition:color .35s var(--ease-out-expo), transform .45s var(--ease-out-expo);
}
details summary:hover{
  color:var(--sage-deep);
  transform:translateX(6px);
}
details[open] summary{ color:var(--sage-deep) }
details summary::-webkit-details-marker{ display:none }
details summary .faq-icon{
  flex:0 0 32px; width:32px; height:32px;
  position:relative;
  border-radius:50%;
  border:1px solid var(--sage-mid);
  transition:transform .55s var(--ease-out-expo),
             background-color .35s ease,
             border-color .35s ease,
             box-shadow .45s var(--ease-out-expo);
}
details summary .faq-icon::before,
details summary .faq-icon::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:12px; height:1px;
  background:var(--sage-mid);
  transform:translate(-50%,-50%);
  transition:transform .45s var(--ease-out-expo), background .35s ease, width .45s var(--ease-out-expo);
}
details summary .faq-icon::after{ transform:translate(-50%,-50%) rotate(90deg) }
details summary:hover .faq-icon{
  border-color:var(--sage-deep);
  box-shadow:0 0 0 6px rgba(138,154,123,.12);
  transform:scale(1.08);
}
details summary:hover .faq-icon::before,
details summary:hover .faq-icon::after{
  background:var(--sage-deep);
}
details[open] summary .faq-icon{
  background:var(--sage-deep);
  border-color:var(--sage-deep);
  transform:rotate(135deg);
  box-shadow:0 6px 18px -6px rgba(47,58,42,.35);
}
details[open] summary .faq-icon::before,
details[open] summary .faq-icon::after{
  background:var(--cream);
}
details[open] summary .faq-icon::after{ transform:translate(-50%,-50%) rotate(90deg) scaleX(0) }
details .ans{
  padding-top:20px;
  color:var(--muted);
  font-size:.98rem;
  line-height:1.78;
  max-width:760px;
  animation:fadeUp .55s var(--ease-out-expo) both;
}

/* ---------- Final CTA ---------- */
.final{
  background:
    radial-gradient(800px 500px at 20% 0%, rgba(138,154,123,.22), transparent 60%),
    radial-gradient(800px 500px at 100% 100%, rgba(176,140,85,.12), transparent 65%),
    linear-gradient(135deg, var(--sage-deep) 0%, var(--sage-ink) 100%);
  color:var(--cream);
  text-align:center;
  padding:140px 0;
  position:relative;
  overflow:hidden;
}
.final::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(600px 400px at 50% 0%, rgba(201,185,152,.14), transparent 70%);
  pointer-events:none;
}
.final::after{
  content:"";
  position:absolute;
  left:50%; top:40px;
  transform:translateX(-50%);
  width:1px; height:42px;
  background:linear-gradient(180deg, transparent, var(--sand));
}
.final h2{
  color:var(--cream);
  max-width:820px;
  margin:0 auto 24px;
  font-weight:500;
}
.final h2 em{ font-style:italic; color:var(--sand) }
.final p{ color:var(--beige); max-width:620px; margin:0 auto 44px; font-size:1.08rem; line-height:1.7 }
.final .eyebrow{ color:var(--sand) }

/* ---------- CTA strip ---------- */
.cta-strip{
  background:var(--cream);
  border-top:1px solid var(--rule-thin);
  border-bottom:1px solid var(--rule-thin);
  padding:44px 0;
  position:relative;
}
.cta-strip::before{
  content:"";
  position:absolute;
  top:-1px; left:50%;
  transform:translateX(-50%);
  width:60px; height:2px;
  background:var(--sage-mid);
}
/* Beige variant — a distinct, warmer "chapter break" */
.cta-strip.on-beige{
  background:
    linear-gradient(180deg, var(--beige-deep) 0%, #CEC0A6 100%);
  border-color:rgba(47,58,42,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -1px 0 rgba(47,58,42,.06);
}
.cta-strip.on-beige::before{
  background:var(--sage-deep);
  height:3px;
  width:80px;
}
.cta-strip.on-beige .cta-text{ color:var(--sage-ink) }
.cta-strip.on-beige .cta-meta{ color:var(--sage-deep); opacity:.75 }
.cta-strip .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  flex-wrap:wrap;
}
.cta-strip .cta-text{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.35rem, 2.4vw, 2rem);
  color:var(--sage-ink);
  font-style:italic;
  font-weight:500;
  line-height:1.25;
  margin:0;
  flex:1 1 420px;
  letter-spacing:-.008em;
}
.cta-strip .cta-meta{
  display:block;
  font-family:'Inter',sans-serif;
  font-size:.7rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--sage-mid);
  margin-top:12px;
  font-style:normal;
  font-weight:500;
}

/* ---------- Footer ---------- */
footer{
  background:var(--sage-ink);
  color:var(--beige);
  padding:60px 0 40px;
  font-size:.84rem;
  position:relative;
}
footer::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(237,227,210,.18), transparent);
}
.foot{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:28px;
  align-items:center;
}
footer .brand{ color:var(--cream) }
footer a{
  color:var(--beige-deep);
  position:relative;
  transition:color .3s ease;
}
footer a:hover{ color:var(--cream) }

/* ---------- Reveal on scroll ---------- */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity 1s var(--ease-out-expo), transform 1s var(--ease-out-expo);
}
.reveal.in{ opacity:1; transform:none }

/* ---------- Page load animations ---------- */
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(24px) }
  to{ opacity:1; transform:none }
}
@keyframes fadeIn{ from{ opacity:0 } to{ opacity:1 } }
@keyframes scaleIn{
  from{ opacity:0; transform:scale(.96) }
  to{ opacity:1; transform:none }
}
@keyframes drawLine{
  from{ transform:scaleX(0) }
  to{ transform:scaleX(1) }
}
@keyframes floatY{
  0%,100%{ transform:translateY(0) }
  50%{ transform:translateY(-8px) }
}

body{ opacity:0; animation:fadeIn .6s ease .05s forwards }
nav.top{ animation:fadeUp .9s var(--ease-out-expo) both }
.brand-logo{ animation:fadeUp 1s var(--ease-out-expo) .1s both }

.hero .eyebrow{
  animation:fadeUp .9s var(--ease-out-expo) .2s both;
  position:relative;
}
.hero h1{ animation:fadeUp 1.1s var(--ease-out-expo) .35s both }
.hero-sub{ animation:fadeUp 1s var(--ease-out-expo) .55s both }
.hero-cta{ animation:fadeUp 1s var(--ease-out-expo) .75s both }
.hero-meta{ animation:fadeUp 1s var(--ease-out-expo) .95s both }
.hero-img{ animation:scaleIn 1.5s var(--ease-out-expo) .45s both }
.hero-chip{ animation:fadeUp 1s var(--ease-out-expo) 1.2s both }
.hero::before{ animation:fadeIn 2s ease .4s both }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important }
  body{ opacity:1 }
  .reveal{ opacity:1; transform:none }
  .hero-img img{ animation:none; transform:scale(1.02) }
}

/* ---------- Mobile nav ---------- */
.hamburger{
  display:none;
  width:44px; height:44px;
  border:none; background:transparent;
  cursor:pointer;
  position:relative;
  padding:0;
}
.hamburger span{
  position:absolute;
  left:10px; right:10px;
  height:1.5px;
  background:var(--sage-ink);
  transition:transform .3s ease, top .3s ease, opacity .2s ease;
}
.hamburger span:nth-child(1){ top:15px }
.hamburger span:nth-child(2){ top:21px }
.hamburger span:nth-child(3){ top:27px }
.nav-open .hamburger span:nth-child(1){ top:21px; transform:rotate(45deg) }
.nav-open .hamburger span:nth-child(2){ opacity:0 }
.nav-open .hamburger span:nth-child(3){ top:21px; transform:rotate(-45deg) }

.mobile-drawer{
  position:fixed; inset:0;
  background:var(--cream);
  z-index:40;
  display:flex; flex-direction:column;
  justify-content:center; align-items:center;
  gap:8px;
  opacity:0; visibility:hidden;
  transition:opacity .35s ease, visibility .35s;
  padding:80px 28px 40px;
}
.mobile-drawer a{
  font-family:'Cormorant Garamond',serif;
  font-size:2rem;
  color:var(--sage-ink);
  padding:14px 20px;
  opacity:0;
  transform:translateY(12px);
  transition:opacity .4s ease, transform .4s ease;
}
.mobile-drawer .btn{
  margin-top:22px;
  font-family:'Inter',sans-serif;
  font-size:.82rem;
}
.nav-open .mobile-drawer{ opacity:1; visibility:visible }
.nav-open .mobile-drawer a{ opacity:1; transform:none }
.nav-open .mobile-drawer a:nth-child(1){ transition-delay:.08s }
.nav-open .mobile-drawer a:nth-child(2){ transition-delay:.14s }
.nav-open .mobile-drawer a:nth-child(3){ transition-delay:.20s }
.nav-open .mobile-drawer a:nth-child(4){ transition-delay:.26s }
.nav-open .mobile-drawer a:nth-child(5){ transition-delay:.32s }
.nav-open .mobile-drawer a:nth-child(6){ transition-delay:.38s }
body.nav-open{ overflow:hidden }

/* Sticky bottom CTA (mobile only) */
.sticky-cta{
  display:none;
  position:fixed;
  left:12px; right:12px; bottom:12px;
  z-index:45;
  padding:12px 14px;
  background:var(--sage-deep);
  color:var(--cream);
  border-radius:999px;
  box-shadow:0 16px 40px -12px rgba(47,58,42,.5);
  align-items:center;
  justify-content:space-between;
  gap:12px;
  opacity:0; transform:translateY(20px);
  transition:opacity .4s var(--ease-out-expo), transform .4s var(--ease-out-expo);
}
.sticky-cta.show{ opacity:1; transform:none }
.sticky-cta .label{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:1rem;
  padding-left:10px;
  line-height:1.2;
}
.sticky-cta .label small{
  display:block;
  font-family:'Inter',sans-serif;
  font-size:.6rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-style:normal;
  color:var(--sand);
  margin-top:3px;
}
.sticky-cta a{
  background:var(--cream);
  color:var(--sage-ink);
  padding:10px 18px;
  border-radius:999px;
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:500;
  white-space:nowrap;
}

/* ---------- Mobile responsive ---------- */
@media (max-width:900px){
  .hero-chip{
    padding:10px 16px;
    font-size:.64rem;
    letter-spacing:.2em;
  }
  .hero-chip .meta{ font-size:.6rem }
  .section-num{ font-size:5rem; top:30px; right:20px }
  .hero-brackets::before, .hero-brackets::after{ display:none }
  .pullquote::before, .pullquote::after{ margin:24px auto; width:40px }
  .price{ font-size:4rem }
}
@media (max-width:780px){
  .navlinks{ display:none }
  .hamburger{ display:block }
  .navrow .btn-primary{ display:none }
  .brand-logo{ width:120px; height:40px }

  section{ padding:76px 0 }
  .hero{ padding:60px 0 80px }
  .hero-grid{ gap:44px }
  .hero-sub{ font-size:1.02rem; margin:1.4rem 0 2rem }
  .hero-meta{
    grid-template-columns:repeat(3,1fr);
    gap:0;
    padding-top:1.6rem;
    margin-top:2rem;
  }
  .hero-meta > div{ padding:0 12px; font-size:.7rem }
  .hero-meta > div:first-child{ padding-left:0 }
  .hero-meta strong{ font-size:1.3rem; margin-bottom:2px }
  .hero-img{ min-height:380px; aspect-ratio:4/4.2 }
  .hero-chip{ bottom:18px }

  .price-box{ padding-top:48px }
  .price-badge{ letter-spacing:.16em; font-size:.6rem; padding:8px 16px }

  .story{ gap:36px }
  .story-img{ aspect-ratio:4/3 }

  .pullquote{ padding:0 8px }
  .pullquote::before, .pullquote::after{ margin:22px auto; width:36px }
  .cards4, .levels, .testis{ margin-top:40px }
  .pillars{ margin-top:40px }
  .pillar{ padding:36px 28px }
  .pillar h3{ font-size:1.45rem }
  .price-box{ padding:40px 24px 36px; margin-top:40px }
  .price{ font-size:3.6rem }
  .timeline{ margin-top:40px; --pad:44px }
  .tstep h3{ font-size:1.2rem }
  .forwho{ margin-top:36px }
  .fw-card{ padding:32px 26px }
  .fw-card h3{ font-size:1.3rem; padding-bottom:14px }
  .bonuses{ margin-top:40px }
  .bonus{ padding:30px 26px; gap:20px; flex-direction:row }
  .bonus .icon{ flex:0 0 52px; width:52px; height:52px; font-size:1.25rem }
  .bonus h3{ font-size:1.2rem }
  .bonus::before{ position:static; display:block; margin-bottom:14px; font-size:.62rem }
  .faq{ margin-top:40px }
  details{ padding:22px 0 }
  details summary{ font-size:1.1rem; gap:14px }
  details summary .faq-icon{ flex:0 0 28px; width:28px; height:28px }
  details summary:hover{ transform:none }
  details::before{ display:none }

  .cta-strip{ padding:28px 0 }
  .cta-strip .wrap{ flex-direction:column; align-items:stretch; gap:18px }
  .cta-strip .cta-text{ flex:initial; text-align:left }
  .cta-strip .btn{ width:100%; justify-content:center }
  .cta-strip .cta-meta{ margin-top:8px; letter-spacing:.2em }

  .final{ padding:100px 0 }
  .foot{ justify-content:center; text-align:center }

  .sticky-cta{ display:flex }
  body{ padding-bottom:78px }

  .testi{ padding:32px 26px }
  .testi h4{ font-size:1.2rem }

  .level h3{ font-size:1.4rem }
  .card h3{ font-size:1.15rem }
}
@media (max-width:540px){
  .wrap{ padding:0 20px }
  .navrow{ padding:10px 0 }
  .hero h1{ font-size:2.3rem; line-height:1.08 }
  .btn{ padding:14px 22px; font-size:.7rem; letter-spacing:.14em }
  .btn svg.arrow{ width:18px }
  .eyebrow{ font-size:.66rem; letter-spacing:.26em }
  .hero-meta{ grid-template-columns:1fr; gap:14px }
  .hero-meta > div{
    padding:0;
    border-left:none;
    border-top:1px solid var(--rule-hair);
    padding-top:12px;
    display:flex;
    align-items:baseline;
    gap:10px;
  }
  .hero-meta > div:first-child{ border-top:none; padding-top:0 }
  .hero-meta strong{ display:inline-block; font-size:1.3rem; margin:0 }
  .testi{ padding:30px 24px }
  .testi .qmark{ font-size:4rem; top:20px; right:20px }
  .pullquote{ font-size:1.4rem }
  .section-num{ font-size:3.5rem; top:20px; right:14px }
  .final{ padding:80px 0 }
  .final p{ font-size:1rem }
  .price{ font-size:3rem }
  .price-box{ padding:36px 20px 32px }
  .price-box ul li{ font-size:.9rem }
  .fw-card{ padding:28px 22px }
  .fw-card h3{ font-size:1.2rem }
  .card{ padding:28px 22px }
  .level-body{ padding:26px 24px 30px }
  .pillar{ padding:30px 22px }
  .pillar h3{ font-size:1.3rem }
  .cta-strip .cta-text{ font-size:1.15rem }
  .hero-chip{ font-size:.58rem; padding:8px 14px; letter-spacing:.16em; bottom:16px }
  .hero-chip .sep, .hero-chip .meta{ display:none }
  .price-badge{ letter-spacing:.12em; font-size:.56rem; padding:7px 14px }
  .price-box{ padding-top:44px }
}
@media (max-width:380px){
  .hero h1{ font-size:2rem }
  h2{ font-size:1.7rem }
  .wrap{ padding:0 16px }
}