/* AI with Megan — preview stylesheet (reconstructs the locked brand + sales system
   from the handoff palette, since the live brand.css/sales.css are iCloud-evicted this session).
   FOR REVIEW ONLY. On go-live these pages link the real /assets/brand.css + /assets/sales.css. */

:root{
  --cream:#FAF8F3; --cream-warm:#F4EFE7; --cream-deep:#E9E1D3;
  --forest:#2F4036; --ink:#2F4036; --ink-70:#5b665c;
  --terracotta:#C97A63; --terracotta-d:#B15C44;
  --sage:#C4CFB9;
  --font-serif:'Playfair Display',Georgia,serif;
  --font-body:'Newsreader',Georgia,serif;
  --font-sans:'Montserrat',system-ui,sans-serif;
  --radius:10px; --radius-lg:18px; --hair:1px;
  --shadow-soft:0 8px 30px rgba(47,64,54,.09);
  --lh-tight:1.12;
  --fs-h1:clamp(2.2rem,1.4rem + 3vw,3.4rem);
  --fs-h2:clamp(1.65rem,1.2rem + 2vw,2.35rem);
  --fs-h3:1.2rem; --fs-body:1.08rem; --fs-small:.8rem;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--font-body); font-size:var(--fs-body); line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.wrap{width:min(1080px,92vw); margin-inline:auto}
img{max-width:100%}
em{font-style:italic}

/* header / footer */
.banner.site-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem clamp(1rem,4vw,2.4rem); background:var(--cream);
  border-bottom:var(--hair) solid var(--cream-deep);
  position:sticky; top:0; z-index:20;
}
.wordmark-serif{
  font-family:var(--font-serif); font-size:1.35rem; color:var(--forest);
  text-decoration:none; font-weight:500; letter-spacing:.01em;
}
.wordmark-serif em{color:var(--terracotta); font-style:italic; font-weight:400}
.doctype{font-family:var(--font-sans); font-size:var(--fs-small); color:var(--ink-70); text-transform:uppercase; letter-spacing:.08em}
.site-foot{background:var(--cream-warm); margin-top:0}
.site-foot .wrap{padding:2.4rem 0}
.rule{border:none; border-top:var(--hair) solid var(--sage); margin:0}
.tagline{font-family:var(--font-serif); font-style:italic; color:var(--forest); font-size:1.15rem}
.fine{font-family:var(--font-sans); font-size:var(--fs-small); color:var(--ink-70)}

/* sections */
.hero{padding:clamp(2.25rem,1.5rem + 2.5vw,4rem) 0}
.hero .wrap,.section .wrap{}
.section{padding:clamp(3rem,2rem + 3vw,5.5rem) 0}
.section--warm{background:var(--cream-warm)}
.hero-split{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(1.6rem,1rem + 3vw,3.4rem); align-items:center}
@media(max-width:820px){.hero-split{grid-template-columns:1fr; max-width:600px; margin-inline:auto}}

/* type */
.kicker,.eyebrow{font-family:var(--font-sans); font-size:var(--fs-small); text-transform:uppercase; letter-spacing:.1em; color:var(--terracotta-d); display:block; margin-bottom:1rem}
h1{font-family:var(--font-serif); font-weight:500; font-size:var(--fs-h1); line-height:var(--lh-tight); margin:0 0 1.1rem; color:var(--forest)}
.lede{font-size:1.2rem; color:var(--ink); margin:0 0 2rem; max-width:52ch; line-height:1.7}
.sec-h2{font-family:var(--font-serif); font-weight:500; font-size:var(--fs-h2); line-height:1.2; color:var(--forest); margin:0 0 1.8rem; max-width:24ch}
.sec-body{max-width:64ch}
.sec-body p{margin:0 0 1.3rem}
.trust{font-family:var(--font-sans); font-size:var(--fs-small); color:var(--ink-70); margin:.9rem 0 0; max-width:46ch}
.marker.draw{
  background:linear-gradient(transparent 62%, color-mix(in oklab, var(--sage) 85%, white) 0);
  padding:0 .12em; border-radius:2px;
}
.pull{font-family:var(--font-serif); font-style:italic}

/* buttons */
.btn{
  display:inline-block; background:var(--terracotta); color:#fff; text-decoration:none;
  font-family:var(--font-sans); font-weight:600; font-size:.98rem; letter-spacing:.01em;
  padding:.9rem 1.6rem; border-radius:var(--radius); border:none; cursor:pointer;
  transition:background .15s ease, transform .15s ease;
}
.btn:hover{background:var(--terracotta-d); transform:translateY(-1px)}
.cta-row{display:flex; gap:1rem; flex-wrap:wrap; align-items:center; margin:.5rem 0}

/* photo slot (placeholder while real photos are evicted) */
.photo-slot{border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-soft)}
.photo-ph{
  aspect-ratio:4/5; background:
    repeating-linear-gradient(45deg,var(--cream-warm),var(--cream-warm) 14px,#efe8db 14px,#efe8db 28px);
  border:var(--hair) dashed var(--sage); border-radius:var(--radius-lg);
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:var(--font-sans); font-size:.78rem; color:var(--ink-70); letter-spacing:.06em; text-transform:uppercase; padding:1rem;
}

/* numbered parts */
.parts{display:grid; gap:1.4rem; margin-top:2.6rem}
.part{display:grid; grid-template-columns:auto 1fr; gap:1.3rem; align-items:start;
  background:var(--cream); border:var(--hair) solid var(--cream-deep); border-radius:var(--radius-lg); padding:1.7rem 1.9rem}
.section--warm .part{background:var(--cream)}
.part .num{font-family:var(--font-serif); font-size:1.5rem; color:var(--terracotta); line-height:1; width:2.2rem; height:2.2rem; border-radius:50%; border:var(--hair) solid var(--sage); display:flex; align-items:center; justify-content:center}
.part h3{font-family:var(--font-serif); font-weight:500; font-size:var(--fs-h3); margin:.15rem 0 .4rem; color:var(--forest)}
.part p{margin:0; color:var(--ink)}

/* for-grid */
.for-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.8rem; margin-top:2rem}
@media(max-width:700px){.for-grid{grid-template-columns:1fr}}
.for-col{border-radius:var(--radius-lg); padding:1.8rem 2rem; border:var(--hair) solid var(--cream-deep)}
.for-col.yes{background:color-mix(in oklab,var(--sage) 22%, var(--cream))}
.for-col.no{background:var(--cream)}
.for-col h3{font-family:var(--font-serif); font-weight:500; margin:0 0 .7rem; color:var(--forest)}
.for-col ul{margin:0; padding-left:1.1rem}
.for-col li{margin-bottom:.5rem}

/* price block */
.price-block{text-align:center; max-width:640px; margin-inline:auto}
.price{font-family:var(--font-serif); font-size:clamp(3rem,2rem + 5vw,4.5rem); color:var(--forest); line-height:1}
.price .cur{font-size:.5em; vertical-align:super; color:var(--terracotta)}

/* faq */
.faq{max-width:760px; margin-top:1rem}
.faq details{border-bottom:var(--hair) solid var(--sage); padding:.4rem 0}
.faq summary{font-family:var(--font-sans); font-weight:600; font-size:1rem; color:var(--forest); cursor:pointer; padding:.7rem 0; list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; float:right; color:var(--terracotta); font-size:1.2rem}
.faq details[open] summary::after{content:"\2013"}
.faq-a p{margin:.2rem 0 1rem; color:var(--ink)}

/* closing (forest) */
.closing{background:var(--forest); color:var(--cream); text-align:center}
.closing h2{font-family:var(--font-serif); font-weight:400; font-size:var(--fs-h1); line-height:var(--lh-tight); color:var(--cream); margin:0 auto 1.4rem; max-width:24ch}
.closing p{color:color-mix(in oklab,var(--cream) 80%, var(--forest)); max-width:52ch; margin:0 auto 2rem}
.closing .pull{color:var(--terracotta); font-size:1.25rem; margin-bottom:1rem; display:block}

/* webinar reg card */
.reg-card{background:var(--cream-warm); border:var(--hair) solid var(--cream-deep); border-radius:var(--radius-lg); padding:2.2rem; box-shadow:var(--shadow-soft)}
.reg-card label{display:block; font-family:var(--font-sans); font-size:var(--fs-small); margin:0 0 .35rem; color:var(--ink-70)}
.reg-card input{width:100%; margin-bottom:1rem; padding:.8rem .9rem; border:var(--hair) solid var(--sage); border-radius:var(--radius); background:var(--cream); font-family:var(--font-sans); font-size:1rem; color:var(--ink)}
.reg-card .btn{width:100%; text-align:center}
.when{font-family:var(--font-sans); font-size:var(--fs-small); color:var(--terracotta-d); letter-spacing:.04em; text-transform:uppercase}
.wins{padding-left:1.1rem}
.wins li{margin-bottom:.6rem}
.bonus{background:var(--forest); color:var(--cream); border-radius:var(--radius-lg); padding:2rem; text-align:center}
.bonus h3{font-family:var(--font-serif); font-weight:400; color:var(--cream); font-size:var(--fs-h2); margin:0 0 .8rem}
.bonus p{color:color-mix(in oklab,var(--cream) 82%, var(--forest)); max-width:46ch; margin:0 auto}

/* ai partner wedge */
.twocol{display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; margin-top:1.4rem}
@media(max-width:700px){.twocol{grid-template-columns:1fr}}
.optcard{background:var(--cream); border:var(--hair) solid var(--cream-deep); border-radius:var(--radius-lg); padding:1.5rem}
.optcard h3{font-family:var(--font-serif); font-weight:500; color:var(--forest); margin:0 0 .6rem}
.optcard p{margin:0; color:var(--ink)}
.middle{background:var(--forest); color:var(--cream); border-radius:var(--radius-lg); padding:2rem; text-align:center; margin-top:1.6rem}
.middle h3{font-family:var(--font-serif); font-weight:400; color:var(--cream); margin:0 0 .6rem; font-size:var(--fs-h3)}
.middle p{color:color-mix(in oklab,var(--cream) 84%, var(--forest)); max-width:60ch; margin:0 auto}
.incl{list-style:none; padding:0; margin:1rem 0 0; display:grid; grid-template-columns:1fr 1fr; gap:.6rem 1.6rem}
@media(max-width:620px){.incl{grid-template-columns:1fr}}
.incl li{padding-left:1.5rem; position:relative; margin-bottom:.2rem}
.incl li::before{content:"\2713"; position:absolute; left:0; color:var(--terracotta); font-weight:700}

/* bridge card (AI Roadmap Session) */
.bridge{background:color-mix(in oklab,var(--sage) 20%, var(--cream)); border:var(--hair) solid var(--sage); border-radius:var(--radius-lg); padding:2rem 2.2rem; margin-top:2rem}
.bridge h3{font-family:var(--font-serif); font-weight:500; color:var(--forest); margin:0 0 .5rem}
.bridge p{margin:0 0 .3rem; color:var(--ink)}

/* testimonials */
.quotes{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.6rem; margin-top:2rem}
@media(max-width:560px){.quotes{grid-template-columns:1fr}}
.quote{background:var(--cream); border:var(--hair) solid var(--cream-deep); border-left:3px solid var(--terracotta); border-radius:var(--radius); padding:1.7rem 1.9rem}
.quote p{font-style:italic; margin:0 0 .7rem}
.quote cite{font-family:var(--font-sans); font-style:normal; font-size:.82rem; color:var(--ink-70); letter-spacing:.03em}

/* review-only flag banner */
.flagnote{background:#fff6ec; border:1px dashed var(--terracotta); color:#7a4a37; font-family:var(--font-sans); font-size:.82rem; padding:.5rem .9rem; border-radius:8px; margin:.8rem 0}
.eyebrow-status{display:inline-block; background:var(--terracotta); color:#fff; font-family:var(--font-sans); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; padding:.2rem .6rem; border-radius:999px; margin-left:.5rem; vertical-align:middle}


/* ===== homepage-specific (moved from inline) ===== */

  /* homepage-specific bits */
  .nav{display:flex; align-items:center; gap:1.6rem}
  .nav a.navlink{font-family:var(--font-sans); font-size:.86rem; color:var(--ink-70); text-decoration:none; letter-spacing:.02em}
  .nav a.navlink:hover{color:var(--forest)}
  .nav .btn{padding:.6rem 1.1rem; font-size:.84rem}
  @media(max-width:820px){ .nav .navlink{display:none} }
  .closer-band{background:var(--forest); color:var(--cream); text-align:center; padding:1.6rem 0}
  .closer-band p{margin:0; font-family:var(--font-serif); font-style:italic; font-size:1.35rem; color:var(--cream)}
  .steps{display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; margin-top:2.6rem}
  @media(max-width:960px){.steps{grid-template-columns:1fr 1fr}}
  @media(max-width:560px){.steps{grid-template-columns:1fr}}
  .step{background:var(--cream); border:var(--hair) solid var(--cream-deep); border-radius:var(--radius-lg); padding:1.8rem 1.7rem}
  .section--warm .step{background:var(--cream)}
  .step .n{font-family:var(--font-sans); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--terracotta-d)}
  .step h3{font-family:var(--font-serif); font-weight:500; color:var(--forest); font-size:1.15rem; margin:.4rem 0 .5rem}
  .step p{margin:0; color:var(--ink); font-size:1rem}
  .step .free{color:var(--terracotta-d); font-weight:600}
  .offers{display:grid; grid-template-columns:1fr 1fr; gap:1.8rem; margin-top:2.4rem}
  @media(max-width:760px){.offers{grid-template-columns:1fr}}
  .offer{background:var(--cream); border:var(--hair) solid var(--cream-deep); border-radius:var(--radius-lg); padding:2.1rem 2.2rem; display:flex; flex-direction:column}
  .offer .tag{font-family:var(--font-sans); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--terracotta-d)}
  .offer h3{font-family:var(--font-serif); font-weight:500; color:var(--forest); font-size:1.5rem; margin:.5rem 0 .2rem}
  .offer .p{font-family:var(--font-serif); color:var(--forest); font-size:1.05rem; margin-bottom:.7rem}
  .offer p{color:var(--ink); margin:0 0 1.1rem}
  .offer a.go{margin-top:auto; font-family:var(--font-sans); font-weight:600; font-size:.9rem; color:var(--terracotta-d); text-decoration:none}
  .offer a.go:hover{text-decoration:underline}
  .guides{display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; margin-top:1.2rem}
  @media(max-width:760px){.guides{grid-template-columns:1fr 1fr}}
  @media(max-width:460px){.guides{grid-template-columns:1fr}}
  .guide{background:var(--cream); border:var(--hair) solid var(--cream-deep); border-radius:var(--radius); padding:.9rem 1rem; font-family:var(--font-sans); font-size:.86rem; color:var(--forest); text-decoration:none}
  .guide:hover{border-color:var(--sage)}
  .chips{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem}
  .chip{background:color-mix(in oklab,var(--sage) 22%,var(--cream)); border:var(--hair) solid var(--sage); border-radius:999px; padding:.35rem .9rem; font-family:var(--font-sans); font-size:.8rem; color:var(--forest)}
  .optin{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1rem; max-width:520px}
  .optin input{flex:1; min-width:200px; padding:.8rem .9rem; border:var(--hair) solid var(--sage); border-radius:var(--radius); background:var(--cream); font-family:var(--font-sans); font-size:1rem; color:var(--ink)}


.site-foot a{color:var(--ink-70);text-decoration:none}
.site-foot a:hover{color:var(--forest)}

/* About sections: photo in the NARROW column, text in the wide one (hero-split is 7fr/5fr the other way) */
.about-grid{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:clamp(2rem,1rem + 4vw,4.5rem); align-items:center}
@media(max-width:820px){.about-grid{grid-template-columns:1fr; max-width:560px; margin-inline:auto}}

/* cap hero photo height so the forest band peeks above the fold = scroll cue */
.hero .photo-slot img{max-height:58vh; object-fit:cover; object-position:center 22%}