/* The Skill Mastery — design system v1.0 */
:root{
  color-scheme:light;
  --cream:#F8F2E4; --cream-hi:#FCF8F0;
  --band-blue:#E4EDF3; --band-stone:#ECEAE3;
  --ink:#2A2018; --ink-soft:#4A3B2D; --grey:#6E6960; --grey-2:#8B857A;
  --brown:#845236; --brown-dk:#6A3F28; --orange:#E96B21; --amber:#FFB01F;
  --line:#E4DBC9; --dark:#120E0A; --plum:#241436;
  --pill:100px; --r:16px; --maxw:1160px;
  --serif:"Didot","Bodoni 72","Hoefler Text","Playfair Display",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI",Roboto,Arial,sans-serif;
  --shadow:0 22px 48px -24px rgba(60,38,18,.45);
  --shadow-sm:0 2px 10px rgba(0,0,0,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:84px}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
::selection{background:var(--amber);color:var(--ink)}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.06;letter-spacing:-.01em;text-wrap:balance;margin:0;color:var(--ink)}
h1 em,h2 em,h3 em{font-style:italic}
p{margin:0}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.2rem,4vw,2.4rem)}
.eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--brown);margin:0 0 1rem}
.for-who{display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);border:1px solid var(--amber);padding:.4em .85em;border-radius:var(--pill);margin:0 0 .95rem}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5em;font-weight:600;font-size:.95rem;line-height:1;padding:1em 1.9em;border-radius:var(--pill);border:1.6px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap;transition:transform .18s,box-shadow .18s,background .18s,color .18s}
.btn:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
.btn--brown{background:var(--brown);color:#fff;box-shadow:var(--shadow-sm)}
.btn--brown:hover{background:var(--brown-dk);transform:translateY(-2px)}
.btn--orange{background:var(--orange);color:#fff;box-shadow:var(--shadow-sm)}
.btn--orange:hover{background:#d65f18;transform:translateY(-2px)}
.btn--outline{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--outline:hover{background:var(--ink);color:var(--cream);transform:translateY(-2px)}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.btn--ghost:hover{background:#fff;color:var(--ink)}
.btn--sm{padding:.72em 1.35em;font-size:.85rem}
.price-note{font-size:.85rem;color:var(--grey);margin-top:.6rem}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:var(--dark);color:#F4ECDD;transition:box-shadow .25s}
.nav.scrolled{box-shadow:0 10px 30px -12px rgba(0,0,0,.5)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:66px}
.brand{font-family:var(--serif);font-size:1.32rem;color:#F7F0E2;text-decoration:none;white-space:nowrap}
.brand em{font-style:italic;color:var(--amber)}
.nav-links{display:flex;gap:1.35rem;list-style:none;margin:0;padding:0}
.nav-links a{font-size:.9rem;color:#D9CFBD;text-decoration:none;font-weight:500;white-space:nowrap}
.nav-links a:hover,.nav-links a[aria-current]{color:#fff}
.nav-links li{display:flex;align-items:center;height:66px;position:relative}
.drop{position:absolute;top:66px;left:50%;transform:translateX(-50%);min-width:280px;background:#1A140E;border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:.55rem;display:none;box-shadow:0 24px 48px -18px rgba(0,0,0,.65);z-index:70}
.has-drop:hover .drop,.has-drop:focus-within .drop{display:block}
.drop a{display:block;padding:.6em .85em;font-size:.88rem;color:#D9CFBD;text-decoration:none;border-radius:8px;white-space:nowrap}
.drop a:hover{background:rgba(255,255,255,.07);color:#fff}
.drop .drop-bundle{margin-top:.45rem;border-top:1px solid rgba(255,255,255,.12);padding-top:.75em;color:var(--amber);font-weight:600}
.nav-right{display:flex;align-items:center;gap:1.1rem}
.nav-login{font-size:.9rem;color:#D9CFBD;text-decoration:none;font-weight:500;white-space:nowrap}
.nav-login:hover{color:#fff}
@media(max-width:900px){.nav-links,.nav-login{display:none}}

/* hero */
.hero{position:relative;background:radial-gradient(120% 120% at 85% -10%,rgba(255,176,31,.16),transparent 55%),radial-gradient(90% 90% at 0% 110%,rgba(132,82,54,.12),transparent 50%),var(--cream)}
.hero-in{position:relative;padding:clamp(3.6rem,8vw,6.5rem) 0 clamp(3rem,6vw,5rem);max-width:920px}
.hero h1{font-size:clamp(2.6rem,6.5vw,4.8rem);letter-spacing:-.02em}
.hero h1 em{color:var(--brown)}
.hero-sub{margin:1.6rem 0 0;font-size:clamp(1.05rem,2vw,1.25rem);color:var(--ink-soft);max-width:44ch;line-height:1.55}
.hero-cta{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.2rem}
.hero-note{margin-top:1.6rem;font-size:.86rem;color:var(--grey)}
.hero-note b{color:var(--brown)}

/* suite hero (interior pages) */
.suite-hero{position:relative;isolation:isolate;color:#fff;overflow:hidden}
.suite-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.suite-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,14,10,.55),rgba(18,14,10,.75));z-index:-1}
.suite-hero-in{padding:clamp(4rem,9vw,7rem) 0}
.suite-hero .eyebrow{color:var(--amber)}
.suite-hero h1{color:#fff;font-size:clamp(2.4rem,5.5vw,4rem)}
.suite-hero p{margin-top:1.3rem;color:#EFE7D9;max-width:56ch;font-size:1.08rem}

/* feature rows (the TDM tiles) */
.band-cream{background:var(--cream)} .band-blue{background:var(--band-blue)} .band-stone{background:var(--band-stone)} .band-hi{background:var(--cream-hi)}
.feature{padding:clamp(3rem,6vw,5.2rem) 0}
.feature-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.2rem);align-items:center}
.feature--rev .media{order:2}
@media(max-width:860px){.feature-in{grid-template-columns:1fr;gap:1.8rem}.feature--rev .media{order:0}}
.media{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/3;transition:transform .3s,box-shadow .3s}
.media img{width:100%;height:100%;object-fit:cover}
a.media:hover{transform:translateY(-4px);box-shadow:0 30px 60px -26px rgba(40,25,12,.6)}
.media .chip{position:absolute;top:1.1rem;left:1.1rem;font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.35);padding:.5em .9em;border-radius:var(--pill);backdrop-filter:blur(4px)}
.copy h2{font-size:clamp(1.8rem,3.4vw,2.7rem)}
.copy h2 em{color:var(--brown)}
.copy .lead{margin-top:1.1rem;color:var(--grey);font-size:1.03rem;max-width:48ch;line-height:1.6}
.gets{list-style:none;margin:1.2rem 0 0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.gets li{font-size:.94rem;color:var(--ink-soft);padding-left:1.4em;position:relative}
.gets li::before{content:"✓";position:absolute;left:0;color:var(--orange);font-weight:700}
.prompts{margin-top:1.25rem;border-left:3px solid var(--amber);padding:.15rem 0 .15rem 1rem;display:flex;flex-direction:column;gap:.45rem}
.prompts span{display:block;font-size:.88rem;color:var(--grey);font-style:italic}
.buy-row{display:flex;align-items:center;flex-wrap:wrap;gap:1rem;margin-top:1.6rem}
.demo-note{font-size:.83rem;color:var(--grey)}

/* index suite tiles */
.tilerow .copy .suite-price{font-family:var(--serif);font-size:1.15rem;color:var(--ink);margin-top:1.2rem}
.tilerow .copy .suite-price s{color:var(--grey-2);margin-left:.5rem;font-size:.95rem}

/* how it works */
.how{padding:clamp(3.4rem,7vw,5.6rem) 0}
.how-head{text-align:center;max-width:44ch;margin:0 auto}
.how-head h2{font-size:clamp(1.9rem,4vw,2.8rem)}
.how-head h2 em{color:var(--brown)}
.how-head p{margin-top:1rem;color:var(--grey)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2.8rem}
@media(max-width:760px){.steps{grid-template-columns:1fr}}
.step{background:var(--cream);border:1px solid var(--line);border-radius:var(--r);padding:1.8rem}
.band-cream .step,.band-hi .step{background:#fff9ef}
.step-n{font-family:var(--serif);font-style:italic;font-size:2.2rem;color:var(--brown);line-height:1}
.step h3{font-size:1.2rem;margin:.8rem 0 0}
.step p{margin-top:.55rem;color:var(--grey);font-size:.94rem}

/* trust strip */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust-in{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;padding:2.1rem 0}
@media(max-width:760px){.trust-in{grid-template-columns:1fr 1fr}}
.trust-item .t{font-family:var(--serif);font-size:1.12rem;display:block}
.trust-item .d{font-size:.82rem;color:var(--grey)}

/* bundle / access bands */
.bundle{background:linear-gradient(135deg,#7A4A30,#4E2C1A);color:#F7EEE0}
.bundle-in{padding:clamp(3rem,6vw,4.6rem) 0;display:grid;grid-template-columns:1.4fr 1fr;gap:2.4rem;align-items:center}
@media(max-width:800px){.bundle-in{grid-template-columns:1fr}}
.bundle h2{color:#fff;font-size:clamp(1.9rem,3.8vw,2.8rem)}
.bundle h2 em{color:var(--amber)}
.bundle p{margin-top:1rem;color:#E7D8C6;max-width:54ch}
.bundle-list{list-style:none;margin:1.2rem 0 0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.bundle-list li{font-size:.9rem;color:#E7D8C6;padding-left:1.4em;position:relative}
.bundle-list li::before{content:"✓";position:absolute;left:0;color:var(--amber);font-weight:700}
.buy-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);border-radius:var(--r);padding:1.8rem;backdrop-filter:blur(6px)}
.buy-card .label{font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--amber)}
.price{display:flex;align-items:baseline;gap:.6rem;font-family:var(--serif);margin-top:.6rem}
.price .big{font-size:2.8rem;color:#fff;line-height:1}
.price .was{font-size:1.05rem;color:#C9B4A0;text-decoration:line-through}
.price .per{font-size:1rem;color:#DEC9B4}
.buy-card .sub{font-size:.85rem;color:#D9C6B4;margin-top:.4rem}
.buy-card .btn{margin-top:1.3rem;width:100%;justify-content:center}
.access{background:linear-gradient(160deg,#2E1A44 0%,#241436 45%,#160C22 100%);color:#EFE7F5}
.access .eyebrow{color:var(--amber)}
.access h2{color:#fff}
.access p{color:#D6C9E4}
.access .bundle-list li{color:#D6C9E4}
.access .bundle-list li::before{content:"✦"}

/* finale + footer */
.finale{background:linear-gradient(180deg,#160C22,#241436);color:#EFE7F5;text-align:center}
.finale-in{padding:clamp(3.6rem,8vw,6rem) 0}
.finale h2{color:#fff;font-size:clamp(2rem,4.6vw,3.2rem);max-width:20ch;margin:0 auto}
.finale h2 em{color:var(--amber)}
.finale p{margin:1.1rem auto 0;color:#CBBFDB;max-width:46ch}
.finale .btn{margin-top:2rem}
.foot{background:var(--dark);color:#C9BEAC}
.foot-in{padding:clamp(2.6rem,5vw,3.6rem) 0 2.2rem;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2rem}
@media(max-width:760px){.foot-in{grid-template-columns:1fr 1fr}}
.foot .brand{font-size:1.35rem;display:inline-block;margin-bottom:.7rem}
.foot-tag{font-size:.87rem;color:#9A8E7C;max-width:32ch;line-height:1.6}
.foot h4{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#7E7361;margin:0 0 .9rem}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.foot ul a{font-size:.9rem;color:#C9BEAC;text-decoration:none}
.foot ul a:hover{color:#fff}
.foot-bottom{border-top:1px solid rgba(255,255,255,.08);padding:1.3rem 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.8rem;font-size:.78rem;color:#8A7F6E}

/* breadcrumb strip on suite pages */
.crumb{background:var(--dark);color:#9A8E7C;font-size:.8rem;padding:.55rem 0}
.crumb a{color:#C9BEAC;text-decoration:none}
.crumb a:hover{color:#fff}

/* reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s,transform .7s}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.btn,.media{transition:none}html{scroll-behavior:auto}}

/* ── deep skill pages ─────────────────────────────────────────────── */
.sec{padding:clamp(3.2rem,6.5vw,5.4rem) 0}
.wrap.narrow{max-width:74ch}
.sec-h{font-size:clamp(1.8rem,3.8vw,2.7rem);margin-bottom:1.4rem}
.sec-h em{color:var(--brown)}
.sec-h.center{text-align:center;max-width:24ch;margin-left:auto;margin-right:auto;margin-bottom:2.6rem}
.band-stone .sec-h em,.band-blue .sec-h em{color:var(--brown-dk)}
.wrap.narrow p{margin-bottom:1.05rem;color:var(--ink-soft);font-size:1.03rem}
.wrap.narrow p.lead{color:var(--grey);margin-bottom:1.8rem}

/* skill hero */
.skill-hero{background:linear-gradient(180deg,var(--cream-hi),var(--cream))}
.skill-hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center;padding:clamp(2.6rem,6vw,4.6rem) 0}
.skill-hero h1{font-size:clamp(2.1rem,4.6vw,3.4rem);margin-bottom:1.2rem}
.skill-hero h1 em{color:var(--brown)}
.skill-hero .lead{font-size:1.08rem;color:var(--ink-soft);max-width:52ch}
.skill-hero .media{aspect-ratio:4/3}
@media(max-width:860px){.skill-hero-in{grid-template-columns:1fr}.skill-hero .media{order:-1}}

/* the four modes */
.modes{display:grid;grid-template-columns:repeat(2,1fr);gap:1.3rem}
.mode{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.7rem 1.6rem;box-shadow:var(--shadow-sm)}
.mode h3{font-family:var(--sans);font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--brown);margin-bottom:.8rem}
.mode p{font-size:.95rem;color:var(--ink-soft)}
.mode-p{display:block;margin-top:1rem;padding-left:.9rem;border-left:3px solid var(--amber);font-size:.87rem;font-style:italic;color:var(--grey)}
@media(max-width:760px){.modes{grid-template-columns:1fr}}

/* why-different */
.whys{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.why h3{font-size:1.22rem;margin-bottom:.6rem;color:var(--brown-dk)}
.why p{font-size:.95rem;color:var(--ink-soft)}
@media(max-width:760px){.whys{grid-template-columns:1fr}}

/* first five minutes */
.first5{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.75rem;counter-reset:f}
.first5 li{display:flex;gap:1rem;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:12px;padding:1rem 1.15rem;font-size:.96rem;font-style:italic;color:var(--ink-soft)}
.first5 li span{font-style:normal;font-weight:700;font-size:.8rem;color:var(--orange);flex:0 0 auto;padding-top:.15em}

/* honest limits */
.limits{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.9rem}
.limits li{position:relative;padding-left:1.9em;font-size:.98rem;color:var(--ink-soft)}
.limits li::before{content:"—";position:absolute;left:0;color:var(--grey-2);font-weight:700}

/* faq */
.faq{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:1.15rem 2rem 1.15rem 0;font-weight:600;font-size:1.02rem;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.3rem;top:1rem;font-size:1.4rem;color:var(--brown);font-weight:400;transition:transform .2s}
.faq[open] summary::after{transform:rotate(45deg)}
.faq p{padding:0 0 1.3rem;color:var(--ink-soft);font-size:.98rem;max-width:70ch}

/* sibling skills */
.sibs{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1rem}
.sib{background:#fff;border:1px solid var(--line);border-radius:12px;padding:1.2rem 1.3rem;text-decoration:none;transition:transform .18s,box-shadow .18s}
.sib:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.sib span{display:block;font-weight:700;font-size:.95rem;color:var(--brown);margin-bottom:.35rem}
.sib em{font-style:normal;font-size:.87rem;color:var(--grey);line-height:1.45;display:block}
.sib-note{text-align:center;margin-top:1.8rem;font-size:.95rem;color:var(--grey)}
.sib-note a{color:var(--brown);font-weight:600}
.gets.big li{font-size:1.02rem;padding-left:1.7em;padding-bottom:.15rem}
.gets.big li::before{font-size:1.05rem}