/* =====================================================================
   Key of Life Ventures — shared design system
   Used by the offering detail pages (Eight Moments, Mindset Groups,
   1:1 Coaching). The homepage keeps its own inline styles.
   ===================================================================== */

:root{
  /* base */
  --parchment:      #FFFFFF;
  --parchment-soft: #F1F6F2;
  --parchment-deep: #E6EFE8;
  --cream:          #FFFFFF;
  /* ink */
  --espresso:       #0E211B;
  --ink:            #172A23;
  --ink-soft:       #47574F;
  --ink-faint:      #7B8A83;
  /* accents — green / teal only */
  --bronze:         #1F6B4E;
  --bronze-deep:    #14523B;
  --honey:          #2E8B67;
  --honey-light:    #7ECBA6;
  --teal:           #1F6B5E;
  --teal-deep:      #123F37;
  --mauve:          #4E8C7E;
  --accent:         #D99A2B;
  --accent-soft:    #F0C877;
  /* derived */
  --line:           rgba(43,32,25,.12);
  --line-soft:      rgba(43,32,25,.07);
  --shadow-warm:    36px 40px 80px -40px rgba(74,49,26,.45);
  --shadow-card:    0 30px 60px -36px rgba(74,49,26,.40);
  --shadow-soft:    0 14px 34px -20px rgba(74,49,26,.34);
  --maxw:           1180px;
  --serif:'Newsreader', Georgia, serif;
  --sans:'Hanken Grotesk', system-ui, sans-serif;
  --ease:cubic-bezier(.2,.7,.3,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip; }
body{ font-family:var(--sans); color:var(--ink); background:var(--parchment); font-size:18px; line-height:1.65; overflow-x:hidden; }
body::before{ content:""; position:fixed; inset:0; pointer-events:none; z-index:9999; opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"); }

h1,h2,h3,h4{ font-family:var(--serif); font-weight:500; line-height:1.05; letter-spacing:-.01em; color:var(--espresso); }
em{ font-style:italic; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
p{ text-wrap:pretty; }
/* content protection */
body{ -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; }
input,textarea{ -webkit-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text; }
img,video{ -webkit-user-drag:none; user-drag:none; -webkit-touch-callout:none; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 clamp(22px,5vw,56px); }
.pad{ padding-block:clamp(72px,11vh,130px); }

.eyebrow{ font-size:.92rem; font-weight:700; letter-spacing:.28em; text-transform:uppercase; color:var(--bronze-deep); display:inline-flex; align-items:center; gap:.85em; }
.eyebrow::before{ content:""; width:30px; height:1px; background:var(--bronze); opacity:.6; }
.eyebrow.center{ justify-content:center; }
.eyebrow.center::after{ content:""; width:30px; height:1px; background:var(--bronze); opacity:.6; }
.eyebrow.on-dark{ color:var(--honey-light); }
.eyebrow.on-dark::before,.eyebrow.on-dark.center::after{ background:var(--honey-light); }

/* ---------- buttons ---------- */
.btn{ --bg:var(--teal); --fg:var(--cream);
  display:inline-flex; align-items:center; gap:.7em; font-family:var(--sans); font-weight:600; font-size:.96rem; letter-spacing:.02em;
  padding:1.05em 1.9em; border-radius:999px; background:var(--bg); color:var(--fg); border:1px solid transparent; cursor:pointer;
  transition:transform .35s var(--ease), box-shadow .35s, background .35s, color .35s; box-shadow:0 16px 30px -16px rgba(46,82,78,.5); white-space:nowrap; }
.btn:hover{ transform:translateY(-3px); box-shadow:0 24px 40px -18px rgba(46,82,78,.6); }
.btn .arr{ transition:transform .35s var(--ease); }
.btn:hover .arr{ transform:translateX(5px); }
.btn--ghost{ --bg:transparent; --fg:var(--espresso); border-color:var(--line); box-shadow:none; }
.btn--ghost:hover{ background:rgba(43,32,25,.04); }
.btn--cream{ --bg:var(--cream); --fg:var(--bronze-deep); }
.btn--bronze{ --bg:var(--bronze); --fg:var(--cream); box-shadow:0 16px 30px -16px rgba(110,69,38,.5); }
.btn--bronze:hover{ background:var(--bronze-deep); }

/* ---------- top nav ---------- */
header.nav{ position:fixed; top:0; left:0; right:0; z-index:60; display:flex; align-items:center; justify-content:space-between;
  padding:16px clamp(20px,5vw,56px); transition:background .45s, box-shadow .45s, padding .45s; }
header.nav.scrolled{ background:rgba(244,242,234,.86); backdrop-filter:blur(14px) saturate(1.1); box-shadow:0 1px 0 var(--line-soft); }
.brand{ position:relative; display:block; height:46px; transition:height .45s; }
header.nav.scrolled .brand{ height:40px; }
.brand img{ height:100%; width:auto; max-width:none; transition:opacity .4s; }
.brand .logo-cream{ position:static; display:block; }
.brand .logo-bronze{ position:absolute; left:0; top:0; opacity:0; }
header.nav.scrolled .brand .logo-cream{ opacity:0; }
header.nav.scrolled .brand .logo-bronze{ opacity:1; }
.nav-logo{ height:46px; transition:height .45s; }
header.nav.scrolled .nav-logo{ height:40px; }
.nav-links{ display:flex; align-items:center; gap:clamp(18px,2.4vw,36px); }
.nav-links a.lnk{ font-size:.92rem; font-weight:500; letter-spacing:.01em; white-space:nowrap; color:rgba(251,246,236,.92); position:relative; padding:4px 0; transition:color .25s; }
.nav-links a.lnk::after{ content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:var(--honey-light); transition:width .3s; }
.nav-links a.lnk:hover{ color:var(--honey-light); }
header.nav.scrolled .nav-links a.lnk{ color:var(--ink-soft); }
header.nav.scrolled .nav-links a.lnk::after{ background:var(--bronze); }
header.nav.scrolled .nav-links a.lnk:hover{ color:var(--bronze); }
.nav-links a.lnk:hover::after{ width:100%; }
.nav-cta{ font-weight:600; font-size:.9rem; white-space:nowrap; padding:.7em 1.35em; border-radius:999px; border:1.5px solid rgba(251,246,236,.5); color:var(--cream); transition:all .35s; }
.nav-cta:hover{ background:var(--cream); color:var(--bronze-deep); border-color:var(--cream); }
header.nav.scrolled .nav-cta{ border-color:var(--bronze); color:var(--bronze-deep); }
header.nav.scrolled .nav-cta:hover{ background:var(--bronze); color:var(--cream); }
@media(max-width:720px){ .nav-links a.lnk{ display:none; } }

/* ---------- ecosystem nav dropdown (shared) ---------- */
.nav-links .nav-eco{ position:relative; }
.nav-eco__btn{ display:inline-flex; align-items:center; gap:.42em; font-size:.92rem; font-weight:500; letter-spacing:.01em; white-space:nowrap; color:rgba(251,246,236,.92); padding:4px 0; cursor:pointer; position:relative; transition:color .25s; }
.nav-eco__btn::after{ content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:var(--honey-light); transition:width .3s; }
.nav-eco:hover .nav-eco__btn, .nav-eco:focus-within .nav-eco__btn{ color:var(--honey-light); }
.nav-eco:hover .nav-eco__btn::after, .nav-eco:focus-within .nav-eco__btn::after{ width:100%; }
header.nav.scrolled .nav-eco__btn{ color:var(--ink-soft); }
header.nav.scrolled .nav-eco:hover .nav-eco__btn, header.nav.scrolled .nav-eco:focus-within .nav-eco__btn{ color:var(--bronze); }
header.nav.scrolled .nav-eco__btn::after{ background:var(--bronze); }
.nav-eco__caret{ width:10px; height:10px; opacity:.55; transition:transform .3s; }
.nav-eco:hover .nav-eco__caret, .nav-eco:focus-within .nav-eco__caret{ transform:rotate(180deg); }
.nav-eco__menu{ position:absolute; top:calc(100% + 16px); right:0; min-width:210px; background:var(--cream); border:1px solid var(--line); border-radius:16px; box-shadow:0 24px 60px -28px rgba(74,49,26,.55); padding:8px; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s; z-index:60; }
.nav-eco__menu::before{ content:""; position:absolute; top:-16px; left:0; right:0; height:16px; }
.nav-eco:hover .nav-eco__menu, .nav-eco:focus-within .nav-eco__menu{ opacity:1; visibility:visible; transform:translateY(0); }
.nav-eco__item{ display:block; padding:10px 14px; border-radius:10px; font-size:.9rem; font-weight:500; letter-spacing:.02em; color:var(--espresso); white-space:nowrap; transition:background .2s, color .2s; }
.nav-eco__item:hover{ background:var(--parchment-deep); color:var(--bronze-deep); }
@media(max-width:720px){ .nav-links .nav-eco{ display:none; } }

/* ---------- mobile menu ---------- */
.nav-burger{ display:none; }
.mnav{ display:none; }
@media(max-width:720px){
  .nav-burger{ display:flex; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; padding:0; border:0; background:transparent; cursor:pointer; z-index:70; }
  .nav-burger span{ display:block; width:24px; height:2px; margin:0 auto; border-radius:2px; background:var(--cream); transition:transform .3s, opacity .25s, background .3s; }
  header.nav.scrolled .nav-burger span{ background:var(--bronze-deep); }
  body.mnav-open .nav-burger span{ background:var(--bronze-deep); }
  body.mnav-open .nav-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  body.mnav-open .nav-burger span:nth-child(2){ opacity:0; }
  body.mnav-open .nav-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .mnav{ display:block; position:fixed; inset:0; z-index:65; overflow:hidden; background:rgba(40,26,4,.42); opacity:0; visibility:hidden; transition:opacity .35s, visibility .35s; }
  body.mnav-open .mnav{ opacity:1; visibility:visible; }
  .mnav__panel{ position:absolute; top:0; right:0; height:100%; width:min(82vw,330px); background:var(--cream); box-shadow:-24px 0 70px -34px rgba(74,49,20,.65); padding:104px 34px 44px; display:flex; flex-direction:column; gap:2px; transform:translateX(100%); transition:transform .42s cubic-bezier(.4,0,.1,1); overflow-y:auto; }
  body.mnav-open .mnav__panel{ transform:translateX(0); }
  .mnav__panel a.lnk, .mnav__panel .nav-eco__btn{ display:block; width:100%; font-size:1.12rem; font-weight:500; letter-spacing:.01em; color:var(--espresso) !important; padding:15px 0; border-bottom:1px solid var(--line-soft); opacity:1 !important; }
  .mnav__panel a.lnk::after, .mnav__panel .nav-eco__btn::after{ display:none; }
  .mnav__panel .nav-eco{ display:block !important; position:static; opacity:1 !important; }
  .mnav__panel .nav-eco__caret{ display:none; }
  .mnav__panel .nav-eco__menu{ position:static; opacity:1 !important; visibility:visible !important; transform:none !important; min-width:0; padding:4px 0 8px 14px; margin:0; background:transparent; border:0; box-shadow:none; }
  .mnav__panel .nav-eco__item{ font-size:1rem; padding:11px 0; }
  .mnav__panel .nav-cta{ margin-top:24px; text-align:center; opacity:1 !important; border:1.5px solid var(--bronze); color:var(--bronze-deep); }
  .mnav__close{ position:absolute; top:20px; right:20px; width:42px; height:42px; border:0; background:transparent; color:var(--espresso); opacity:.55; font-size:30px; line-height:1; cursor:pointer; display:grid; place-items:center; border-radius:50%; transition:background .2s, opacity .2s; }
  .mnav__close:hover{ background:rgba(74,49,20,.08); opacity:1; }
  body.mnav-open .nav-burger{ opacity:0; pointer-events:none; transition:opacity .2s; }
}


/* ---------- workshop announcement banner (shared) ---------- */
body.banner-on header.nav{ top:var(--banner-h,51px); }
body.banner-on .ohero{ padding-top:calc(var(--banner-h,51px) + clamp(120px,17vh,180px)); }
.wb-banner{ position:fixed; top:0; left:0; right:0; z-index:200; display:flex; align-items:center; justify-content:center;
  gap:clamp(10px,1.6vw,20px); padding:9px clamp(44px,5vw,56px);
  background:radial-gradient(120% 180% at 12% 0%, rgba(199,150,74,.22), transparent 46%), linear-gradient(90deg, var(--teal-deep), var(--teal));
  color:var(--cream); font-size:.83rem; letter-spacing:.01em;
  box-shadow:0 1px 0 rgba(0,0,0,.12), 0 10px 30px -20px rgba(20,12,6,.6);
  transform:translateY(0); transition:transform .5s cubic-bezier(.2,.7,.3,1); }
.wb-banner.hide{ transform:translateY(-105%); }
.wb-badge{ flex:none; font-size:.62rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--honey-light); display:inline-flex; align-items:center; gap:.55em; white-space:nowrap; }
.wb-badge svg{ width:13px; height:13px; }
.wb-copy{ font-weight:500; white-space:nowrap; }
.wb-copy em{ font-family:'Newsreader',serif; font-style:italic; font-weight:400; }
.wb-sep{ opacity:.4; margin:0 .1em; }
.wb-date{ opacity:.82; white-space:nowrap; }
.wb-cta{ flex:none; display:inline-flex; align-items:center; gap:.5em; padding:.45em 1.05em; border-radius:100px; background:var(--cream); color:var(--teal-deep); font-weight:600; font-size:.8rem; white-space:nowrap; transition:transform .25s ease, box-shadow .25s; }
.wb-cta:hover{ transform:translateY(-1px); box-shadow:0 8px 18px -10px rgba(0,0,0,.5); }
.wb-cta span{ transition:transform .25s ease; }
.wb-cta:hover span{ transform:translateX(3px); }
.wb-close{ position:absolute; right:clamp(10px,2vw,18px); top:50%; transform:translateY(-50%); width:26px; height:26px; border-radius:50%; border:0; cursor:pointer; background:rgba(255,255,255,.12); color:var(--cream); display:inline-flex; align-items:center; justify-content:center; line-height:1; font-size:15px; transition:background .2s; }
.wb-close:hover{ background:rgba(255,255,255,.24); }
@media(max-width:860px){ .wb-date{ display:none; } }
@media(max-width:560px){ .wb-copy{ font-size:.8rem; } .wb-cta{ padding:.4em .85em; } .btn{ white-space:normal; text-align:center; line-height:1.4; } }

/* ---------- workshop banner: mobile marquee ---------- */
  .wb-marquee{ display:none; }
  @keyframes wb-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
  @media(max-width:600px){
    .wb-banner{ justify-content:flex-start; gap:0; padding:0; overflow:hidden; }
    .wb-badge, .wb-copy, .wb-date, .wb-cta{ display:none; }
    .wb-marquee{ display:block; flex:1 1 auto; min-width:0; overflow:hidden; position:relative;
      padding:11px 0; text-decoration:none; color:var(--cream);
      -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 20px,#000 calc(100% - 42px),transparent 100%);
              mask-image:linear-gradient(90deg,transparent 0,#000 20px,#000 calc(100% - 42px),transparent 100%); }
    .wb-track{ display:inline-flex; white-space:nowrap; will-change:transform; animation:wb-scroll 17s linear infinite; }
    .wb-run{ padding-left:2.2em; font-size:.82rem; font-weight:500; letter-spacing:.01em; }
    .wb-run b{ color:var(--honey-light); text-transform:uppercase; letter-spacing:.16em; font-size:.74em; font-weight:700; }
    .wb-run em{ font-family:'Newsreader',serif; font-style:italic; font-weight:400; }
    .wb-run .arr{ color:var(--honey-light); font-style:normal; }
  }
  @media (prefers-reduced-motion: reduce){
    .wb-track{ animation:none; }
    .wb-marquee{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  }

/* ---------- breadcrumb back ---------- */
.crumb{ display:inline-flex; align-items:center; gap:.5em; font-size:.84rem; font-weight:500; color:rgba(251,246,236,.78); transition:color .25s, gap .25s; }
.crumb:hover{ color:var(--cream); gap:.8em; }
.crumb .arr{ transition:transform .25s; }
.crumb:hover .arr{ transform:translateX(-3px); }

/* ---------- offering hero ---------- */
.ohero{ position:relative; isolation:isolate; color:var(--cream); padding-top:clamp(120px,17vh,180px); padding-bottom:clamp(60px,9vh,104px); overflow:hidden; }
.ohero__bg{ position:absolute; inset:0; z-index:-2; }
.ohero__bg::after{ content:""; position:absolute; inset:0; }
.ohero__inner{ position:relative; z-index:2; }
.ohero .kicker{ display:block; font-size:.86rem; font-weight:700; letter-spacing:.26em; text-transform:uppercase; color:var(--honey-light); }
.ohero h1{ color:var(--cream); font-weight:300; font-size:clamp(2.4rem,5.2vw,4.3rem); line-height:1.16; margin-top:1rem; max-width:20ch; text-shadow:0 2px 30px rgba(20,12,6,.45); padding-bottom:.06em; }
.ohero h1 em{ color:var(--honey-light); }
.ohero .sub{ color:rgba(251,246,236,.92); font-weight:400; font-size:clamp(1.12rem,1.6vw,1.34rem); margin-top:1.9rem; max-width:46ch; line-height:1.6; }
.ohero .octa{ margin-top:2.2rem; display:flex; gap:14px; flex-wrap:wrap; }
.ohero .hero-cohort{ margin-top:1.6rem; display:inline-flex; align-items:center; gap:.6em; font-size:.92rem; font-weight:500; color:var(--cream); background:rgba(226,190,124,.14); border:1px solid rgba(226,190,124,.32); padding:.5em 1.05em; border-radius:999px; }
.ohero .hero-cohort b{ color:var(--honey-light); font-weight:700; }
.ohero .hero-cohort .dot{ width:8px; height:8px; border-radius:50%; background:var(--honey-light); box-shadow:0 0 0 0 rgba(226,190,124,.6); animation:heroPulse 2.4s ease-out infinite; }
@keyframes heroPulse{ 0%{ box-shadow:0 0 0 0 rgba(226,190,124,.5); } 70%{ box-shadow:0 0 0 7px rgba(226,190,124,0); } 100%{ box-shadow:0 0 0 0 rgba(226,190,124,0); } }
@media(prefers-reduced-motion:reduce){ .ohero .hero-cohort .dot{ animation:none; } }
.ohero .meta{ margin-top:2.4rem; display:flex; gap:clamp(20px,3vw,44px); flex-wrap:wrap; }
.ohero .meta .m{ }
.ohero .meta .m .k{ font-family:var(--serif); font-style:italic; font-size:1.7rem; color:var(--honey-light); }
.ohero .meta .m .v{ font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(251,246,236,.7); margin-top:.2rem; }

/* ---------- section heads ---------- */
.shead{ max-width:60ch; }
.shead.center{ margin:0 auto; text-align:center; }
.shead h2{ font-size:clamp(2.4rem,4.4vw,3.6rem); font-weight:600; margin-top:1rem; }
.shead h2 em{ font-style:italic; font-weight:500; color:var(--bronze); }
.shead p{ color:var(--ink-soft); font-weight:400; font-size:clamp(1.05rem,1.4vw,1.2rem); margin-top:1.1rem; }

/* ---------- split block ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,84px); align-items:center; }
.split.narrow-left{ grid-template-columns:.85fr 1.15fr; }
.split.narrow-right{ grid-template-columns:1.15fr .85fr; }
@media(max-width:860px){ .split,.split.narrow-left,.split.narrow-right{ grid-template-columns:1fr; gap:40px; } }
.prose h3{ font-size:clamp(1.6rem,2.6vw,2.2rem); margin-bottom:.8rem; }
.prose h3 em{ font-style:italic; color:var(--bronze); }
.prose p{ color:var(--ink-soft); font-weight:400; font-size:1.08rem; line-height:1.75; margin-top:1rem; }
.prose p:first-child{ margin-top:0; }

/* ---------- feature list ---------- */
.flist{ display:flex; flex-direction:column; gap:18px; margin-top:6px; }
.flist .f{ display:flex; gap:16px; align-items:flex-start; }
.flist .f .ic{ flex:none; width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:rgba(61,107,102,.1); border:1px solid rgba(61,107,102,.22); color:var(--teal); }
.flist .f .ic svg{ width:22px; height:22px; }
.flist .f h4{ font-family:var(--sans); font-weight:600; font-size:1.05rem; color:var(--ink); }
.flist .f p{ color:var(--ink-soft); font-weight:400; font-size:.98rem; margin-top:.2rem; }

/* ---------- included grid (cards) ---------- */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,24px); margin-top:clamp(40px,6vh,60px); }
@media(max-width:820px){ .cards{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; } }
.icard{ background:var(--cream); border:1px solid var(--line); border-radius:20px; padding:30px 28px; box-shadow:var(--shadow-soft); transition:transform .4s var(--ease), box-shadow .4s; }
.icard:hover{ transform:translateY(-6px); box-shadow:var(--shadow-card); }
.icard .ic{ width:48px; height:48px; border-radius:12px; display:grid; place-items:center; background:rgba(199,150,74,.12); border:1px solid rgba(199,150,74,.28); color:var(--bronze); margin-bottom:18px; }
.icard .ic svg{ width:24px; height:24px; }
.icard h4{ font-family:var(--serif); font-size:1.35rem; }
.icard p{ color:var(--ink-soft); font-weight:400; font-size:.98rem; margin-top:.5rem; }

/* ---------- photo slot (user fills) ---------- */
.pslot{ position:relative; border-radius:20px; overflow:hidden; background:
    repeating-linear-gradient(135deg, rgba(138,90,51,.06) 0 14px, rgba(138,90,51,.1) 14px 28px);
  border:1.5px dashed rgba(138,90,51,.4); display:grid; place-items:center; min-height:280px; }
.pslot .lbl{ font-family:ui-monospace,Menlo,monospace; font-size:.72rem; letter-spacing:.04em; color:var(--bronze); background:var(--cream); padding:6px 12px; border-radius:8px; border:1px solid var(--line); }
.pslot.tall{ aspect-ratio:4/5; min-height:0; }
.pslot.wide{ aspect-ratio:3/2; min-height:0; }
.pslot.square{ aspect-ratio:1; min-height:0; }
.pslot img{ width:100%; height:100%; object-fit:cover; }

/* ---------- testimonial ---------- */
.tsection{ background:var(--parchment-deep); }
.tgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.2vw,26px); margin-top:clamp(40px,6vh,58px); max-width:1080px; margin-left:auto; margin-right:auto; }
@media(max-width:960px){ .tgrid{ grid-template-columns:1fr 1fr; max-width:700px; } }
@media(max-width:600px){ .tgrid{ grid-template-columns:1fr; } }
.tcard{ background:var(--cream); border:1px solid var(--line); border-radius:22px; padding:34px 32px; box-shadow:var(--shadow-soft); display:flex; flex-direction:column; height:100%; }
.tcard .stars{ color:var(--honey); letter-spacing:.18em; font-size:.9rem; }
.tcard blockquote{ font-family:var(--serif); font-weight:400; font-style:italic; font-size:1.28rem; line-height:1.5; color:var(--ink); margin:14px 0 0; }
.tcard .who{ margin-top:22px; display:flex; align-items:center; gap:14px; }
.tcard .who .av{ width:46px; height:46px; border-radius:50%; flex:none; display:grid; place-items:center; background:var(--teal); color:var(--cream); font-weight:600; font-size:1rem; }
.tcard .who .nm{ font-weight:600; color:var(--ink); font-size:.98rem; }
.tcard .who .rl{ font-size:.84rem; color:var(--ink-faint); }
.tcard.placeholder{ border-style:dashed; border-color:rgba(138,90,51,.4); background:rgba(199,150,74,.05); }
.tcard.placeholder blockquote{ color:var(--ink-faint); }
.tcard .slotnote{ font-family:ui-monospace,Menlo,monospace; font-size:.68rem; letter-spacing:.03em; color:var(--ink-faint); background:rgba(43,32,25,.06); padding:3px 9px; border-radius:6px; margin-top:18px; align-self:flex-start; }

/* ---------- pricing / offer band ---------- */
.offer{ background:var(--cream); border:1px solid var(--line); border-radius:26px; box-shadow:var(--shadow-card); overflow:hidden; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); }
@media(max-width:760px){ .offer{ grid-template-columns:minmax(0,1fr); } }
.offer__main{ padding:clamp(34px,4.5vw,52px); }
.offer__main h3{ font-size:clamp(1.7rem,3vw,2.3rem); }
.offer__main h3 em{ font-style:italic; color:var(--bronze); }
.offer__main .incl{ list-style:none; margin-top:1.4rem; display:flex; flex-direction:column; gap:12px; }
.offer__main .incl li{ display:flex; gap:12px; align-items:flex-start; color:var(--ink-soft); font-weight:400; }
.offer__main .incl li .ck{ flex:none; width:22px; height:22px; border-radius:50%; background:rgba(61,107,102,.12); color:var(--teal); display:grid; place-items:center; margin-top:2px; }
.offer__main .incl li .ck svg{ width:13px; height:13px; }
.offer__aside{ background:var(--teal-deep); color:var(--cream); padding:clamp(34px,4.5vw,52px); display:flex; flex-direction:column; justify-content:center; gap:.4rem; }
.offer__aside .plabel{ font-size:.74rem; letter-spacing:.24em; text-transform:uppercase; color:var(--honey-light); font-weight:600; }
.offer__aside .price{ font-family:var(--serif); font-size:clamp(2.4rem,4vw,3.2rem); line-height:1; }
.offer__aside .price .ph{ font-family:ui-monospace,Menlo,monospace; font-size:.9rem; color:rgba(251,246,236,.6); letter-spacing:0; }
.offer__aside .pnote{ color:rgba(251,246,236,.86); font-weight:400; font-size:.94rem; }
.offer__aside .btn{ margin-top:1.4rem; justify-content:center; }
.offer__aside .giftnote{ display:flex; align-items:center; gap:.55rem; margin-top:1rem; padding:.7rem .9rem; border:1px solid rgba(226,190,124,.4); border-radius:10px; background:rgba(226,190,124,.1); color:var(--honey-light); font-size:.9rem; font-weight:400; }
.offer__aside .giftnote .gift-ic{ flex:none; display:grid; place-items:center; }
.offer__aside .giftnote .gift-ic svg{ width:18px; height:18px; }
.offer__aside .btn--cream{ --bg:var(--honey-light); --fg:var(--teal-deep); }
.offer__aside .btn--cream:hover{ --bg:var(--cream); background:var(--cream); }
.offer__aside .priceline{ font-size:.86rem; color:rgba(251,246,236,.6); margin-top:-.2rem; }
.offer__aside .guarantee{ margin-top:1.3rem; padding-top:1.1rem; border-top:1px solid rgba(251,246,236,.16); font-size:.86rem; color:rgba(251,246,236,.72); line-height:1.55; }
.offer__aside .guarantee .gtitle{ color:var(--honey-light); font-weight:600; }
.offer__aside .guarantee a{ color:var(--honey-light); text-decoration:underline; text-underline-offset:2px; }
.offer__aside .welcome-note, .offer .welcome-note{ margin-top:1rem; text-align:center; font-size:.82rem; line-height:1.5; color:rgba(251,246,236,.62); }
.offer-crosssell{ max-width:70ch; margin:clamp(26px,4vh,40px) auto 0; text-align:center; font-size:1.05rem; line-height:1.65; color:var(--ink-soft); }
.offer-crosssell a{ color:var(--teal); font-weight:600; border-bottom:1px solid rgba(61,107,102,.4); }
.offer-crosssell a:hover{ color:var(--teal-deep); }
.referral{ max-width:760px; margin:clamp(22px,3vh,32px) auto 0; background:var(--parchment); border:1px solid var(--line); border-radius:20px; padding:clamp(24px,3vw,34px); text-align:center; }
.referral .ref-ic{ display:inline-grid; place-items:center; width:46px; height:46px; border-radius:50%; background:rgba(61,107,102,.1); color:var(--teal); margin-bottom:.6rem; }
.referral .ref-ic svg{ width:24px; height:24px; }
.referral h3{ font-family:var(--serif); font-weight:500; font-size:clamp(1.3rem,2vw,1.65rem); color:var(--ink); }
.referral p{ color:var(--ink-soft); font-size:1.04rem; line-height:1.65; margin:.6rem auto 0; max-width:56ch; }
.referral p b{ color:var(--bronze); font-weight:600; }
.referral p a{ color:var(--teal); font-weight:600; border-bottom:1px solid rgba(61,107,102,.4); }

/* ---------- FAQ ---------- */
.faq{ max-width:780px; margin-inline:auto; margin-top:clamp(36px,5vh,52px); display:flex; flex-direction:column; gap:0; }
.faq details{ border-bottom:1px solid var(--line); scroll-margin-top:96px; }
.faq summary{ list-style:none; cursor:pointer; padding:24px 4px; display:flex; align-items:center; justify-content:space-between; gap:20px;
  font-family:var(--serif); font-size:1.22rem; color:var(--ink); transition:color .25s; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--bronze); }
.faq summary .pm{ flex:none; width:26px; height:26px; position:relative; }
.faq summary .pm::before,.faq summary .pm::after{ content:""; position:absolute; background:var(--bronze); border-radius:2px; transition:transform .3s var(--ease); }
.faq summary .pm::before{ top:50%; left:4px; right:4px; height:2px; transform:translateY(-50%); }
.faq summary .pm::after{ left:50%; top:4px; bottom:4px; width:2px; transform:translateX(-50%); }
.faq details[open] summary .pm::after{ transform:translateX(-50%) scaleY(0); }
.faq .ans{ padding:0 4px 26px; color:var(--ink-soft); font-weight:400; line-height:1.7; max-width:64ch; }
.faq .ans.placeholder{ color:var(--ink-faint); font-style:italic; }

/* ---------- closing CTA ---------- */
.closing{ position:relative; overflow:hidden; background:var(--teal-deep); color:var(--cream); text-align:center; }
.closing::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 120%, rgba(199,150,74,.4) 0%, rgba(199,150,74,0) 55%),
            radial-gradient(80% 70% at 50% -10%, rgba(226,190,124,.16) 0%, transparent 60%); }
.closing .wrap{ position:relative; z-index:2; max-width:820px; }
.closing h2{ color:var(--cream); font-weight:300; font-size:clamp(2.2rem,4.6vw,3.6rem); }
.closing h2 em{ color:var(--honey-light); }
.closing p{ color:rgba(251,246,236,.88); font-weight:400; font-size:clamp(1.08rem,1.5vw,1.26rem); margin-top:1.2rem; max-width:56ch; margin-inline:auto; }
.closing .btn{ margin-top:2.2rem; }
.closing .btn--cream{ --bg:var(--honey-light); --fg:var(--teal-deep); }
.closing .btn--cream:hover{ --bg:var(--cream); background:var(--cream); }
.closing .reassure{ margin-top:1.2rem; font-size:.86rem; color:rgba(251,246,236,.66); letter-spacing:.02em; }

/* ---------- footer ---------- */
footer.site{ background:var(--espresso); color:rgba(243,234,219,.7); padding-block:clamp(56px,8vh,82px) 40px; }
.foot-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px; align-items:start; }
@media(max-width:760px){ .foot-grid{ grid-template-columns:1fr; gap:34px; } }
.foot-mark{ height:74px; margin-bottom:20px; }
.foot-tag{ font-family:var(--serif); font-style:italic; font-size:1.12rem; color:rgba(243,234,219,.78); max-width:30ch; }
.foot-col h4{ font-family:var(--sans); font-size:.74rem; letter-spacing:.24em; text-transform:uppercase; color:var(--honey-light); font-weight:600; margin-bottom:16px; }
.foot-col a{ display:block; padding:7px 0; color:rgba(243,234,219,.78); font-size:.95rem; font-weight:400; transition:color .25s, transform .25s; width:fit-content; }
.foot-col a:hover{ color:var(--cream); transform:translateX(4px); }
.foot-bottom{ margin-top:clamp(40px,6vh,64px); padding-top:26px; border-top:1px solid rgba(243,234,219,.12);
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; font-size:.82rem; color:rgba(243,234,219,.62); }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; } .reveal.d3{ transition-delay:.24s; }
@media(prefers-reduced-motion:reduce){ .reveal{ opacity:1 !important; transform:none !important; } html{ scroll-behavior:auto; } }

::selection{ background:var(--honey-light); color:var(--ink); }


/* ---------- FAQ cross-link prompt ---------- */
.faq-more{ text-align:center; margin-top:clamp(20px,3vh,32px); }
.faq-more p{ font-size:1.05rem; color:var(--ink-soft); }
.faq-more a{ font-weight:600; color:var(--teal-deep); border-bottom:1px solid rgba(61,107,102,.34); transition:color .25s, border-color .25s; }
.faq-more a:hover{ color:var(--bronze-deep); border-bottom-color:var(--bronze-deep); }