:root{color-scheme:light}

:root{
  --paper:#f5f8f8; --petrol:#103339; --petrol-mid:#17505c; --tint:#e6f2f1;
  --text:#24373b; --muted:#52676c; --accent-text:#0c766e; --accent:#16a69b;
  --on-petrol:#f5f8f8; --rule:rgba(36,55,59,.15);
  --serif:"Fraunces",Georgia,serif; --sans:"Karla",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--text);font:400 18px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.narrow{max-width:720px}
h1,h2,h3{font-family:var(--serif);font-weight:300;line-height:1.15;margin:0;letter-spacing:-.01em}
h1{font-size:clamp(2.3rem,5.6vw,4.1rem)}
h2{font-size:clamp(1.8rem,3.8vw,2.7rem)}
h3{font-size:1.35rem}
em{font-style:italic}
.eyebrow{font:600 .78rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text);margin:0 0 20px}
section{padding:96px 0}
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 26px;border-radius:999px;font:600 1rem var(--sans);text-decoration:none;transition:transform .2s,background .2s}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--petrol);color:var(--on-petrol)}
.btn-primary:hover{background:var(--petrol-mid)}
.btn-ghost{border:1px solid var(--rule);color:var(--petrol)}
.btn-light{background:var(--on-petrol);color:var(--petrol)}
.next{display:block;margin-top:48px;font-family:var(--serif);font-style:italic;font-size:1.2rem;color:var(--accent-text);text-decoration:none}
.next::after{content:" ↓"}

/* header */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:rgba(245,248,248,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
header .wrap{display:flex;justify-content:space-between;align-items:center;height:68px}
.logo{font-family:var(--serif);font-size:1.15rem;text-decoration:none;color:var(--petrol)}
nav{display:flex;gap:28px;font-size:.95rem}
nav a{text-decoration:none;color:var(--muted)}
nav a:hover{color:var(--petrol)}
@media (max-width:760px){nav{display:none}}

/* hero */
.hero{padding:88px 0 72px}
.hero h1 .quiet{display:block;color:var(--muted);font-style:italic}
.hero .lead{font-size:1.25rem;max-width:620px;margin:32px 0 0}
.hero .lead strong{color:var(--petrol)}
.hero .ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px}
.next-event{margin-top:32px;padding:18px 22px;border-left:3px solid var(--accent);background:var(--tint);border-radius:0 12px 12px 0;max-width:620px}
.next-event .ne-label{display:block;font:600 .75rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text)}
.next-event b{display:block;font:300 1.4rem var(--serif);color:var(--petrol);margin:6px 0 4px}
.next-event span{font-size:.95rem;color:var(--muted)}
.hero .meta{margin-top:20px;font-size:.92rem;color:var(--muted)}

/* scenes */
.scenes{background:var(--petrol);color:var(--on-petrol)}
.scenes .eyebrow{color:#7fd3cb}
.scene-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:48px;background:rgba(245,248,248,.12)}
.scene{background:var(--petrol);padding:36px 28px 40px}
.scene .time{font:600 .8rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#7fd3cb}
.scene p{font-family:var(--serif);font-weight:300;font-size:1.22rem;line-height:1.5;margin:16px 0 0}
.scene .said{display:block;margin-top:20px;font-style:italic;color:#bfe3df}
.scenes .after{margin-top:56px;font-size:1.2rem;max-width:640px}
.scenes .next,.ab .next{color:#7fd3cb}
@media (max-width:860px){.scene-grid{grid-template-columns:1fr}}

/* problem loop */
.loop{display:grid;grid-template-columns:1fr;gap:0;margin-top:40px;border-left:2px solid var(--accent)}
.loop div{padding:0 0 36px 32px;position:relative}
.loop div::before{content:"";position:absolute;left:-7px;top:10px;width:12px;height:12px;border-radius:50%;background:var(--paper);border:2px solid var(--accent)}
.loop .tag{font:600 .78rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text)}
.loop p{margin:8px 0 0;font-size:1.1rem}
.loop .big{font-family:var(--serif);font-size:1.5rem;line-height:1.35;color:var(--petrol)}

/* no list */
.nolist{background:var(--tint)}
.nolist ol{list-style:none;padding:0;margin:48px 0 0;counter-reset:n}
.nolist li{counter-increment:n;display:grid;grid-template-columns:72px 1fr;gap:16px;padding:28px 0;border-top:1px solid var(--rule)}
.nolist li::before{content:"0" counter(n);font:300 1.6rem var(--serif);color:var(--accent-text)}
.nolist li strong{display:block;font:300 clamp(1.4rem,2.6vw,1.9rem)/1.25 var(--serif);color:var(--petrol)}
.nolist li span{display:block;margin-top:8px;color:var(--muted)}

/* story */
.story{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:start}
.story .hook{font:300 clamp(1.6rem,3vw,2.2rem)/1.3 var(--serif);color:var(--petrol);position:sticky;top:110px}
.story .hook em{color:var(--accent-text)}
.story p{margin:0 0 20px}
.story .turn{font-family:var(--serif);font-style:italic;font-size:1.35rem;color:var(--petrol);margin:32px 0}
@media (max-width:860px){.story{grid-template-columns:1fr;gap:32px}.story .hook{position:static}}

/* A/B */
.ab{background:var(--petrol);color:var(--on-petrol)}
.ab .eyebrow{color:#7fd3cb}
.ab .intro{max-width:620px;margin-top:20px;color:#cfe3e1}
.ab-box{margin-top:48px;border:1px solid rgba(245,248,248,.18);border-radius:20px;overflow:hidden}
.ab-situation{padding:24px 32px;background:rgba(245,248,248,.06);font-size:1.05rem}
.ab-situation b{color:#7fd3cb;font-weight:600}
.ab-tabs{display:flex;border-bottom:1px solid rgba(245,248,248,.18)}
.ab-tabs button{flex:1;background:none;border:0;color:#9fbfbc;font:600 1rem var(--sans);padding:18px;cursor:pointer;border-bottom:3px solid transparent}
.ab-tabs button[aria-selected="true"]{color:var(--on-petrol);border-bottom-color:var(--accent)}
.ab-panel{padding:40px 32px 44px;display:none}
.ab-panel.on{display:block;animation:fade .45s ease}
.ab-panel .line{font:300 clamp(1.5rem,3vw,2.2rem)/1.3 var(--serif)}
.ab-body{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:32px}
.ab-body div{border-top:1px solid rgba(245,248,248,.2);padding-top:14px;font-size:.98rem;color:#cfe3e1}
.ab-body b{display:block;font:600 .78rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#7fd3cb;margin-bottom:6px}
@media (max-width:760px){.ab-body{grid-template-columns:1fr}}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* insight */
.insight .big{font:300 clamp(1.9rem,4.4vw,3.2rem)/1.2 var(--serif);color:var(--petrol);max-width:900px}
.insight .big em{color:var(--accent-text)}
.boxes-intro{margin:40px 0 0;color:var(--muted)}
.boxes{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:20px}
.boxes div{background:#fff;border:1px solid var(--rule);border-radius:16px;padding:24px}
.boxes b{font:300 1.5rem var(--serif);color:var(--petrol);display:block}
.boxes span{display:block;margin-top:8px;font-size:.95rem;color:var(--muted)}
@media (max-width:860px){.boxes{grid-template-columns:1fr 1fr}}

/* quotes */
.pull{background:var(--petrol-mid);color:var(--on-petrol);text-align:center;padding:88px 0}
.pull blockquote{margin:0;font:300 clamp(1.9rem,4.4vw,3rem)/1.25 var(--serif);font-style:italic}
.pull cite{display:block;margin-top:24px;font-style:normal;color:#bfe3df}
.quotes{columns:2;column-gap:40px;margin-top:48px}
.quotes figure{break-inside:avoid;margin:0 0 40px}
.quotes p{margin:0;font-family:var(--serif);font-weight:300;font-size:1.15rem;line-height:1.55}
.quotes figcaption{margin-top:12px;font-size:.92rem;color:var(--muted)}
.quotes figcaption b{color:var(--petrol)}
.context{color:var(--muted);font-size:.95rem;margin-top:10px}
@media (max-width:760px){.quotes{columns:1}}

/* offers */
.offers{background:var(--tint)}
.ladder{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.card{background:#fff;border-radius:20px;padding:32px 28px;display:flex;flex-direction:column;border:1px solid var(--rule)}
.card.featured{border:2px solid var(--accent)}
.card .step{font:600 .78rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text)}
.card .take{font:300 1.45rem/1.3 var(--serif);color:var(--petrol);margin:14px 0 18px}
.card h3{font:600 1.05rem var(--sans);color:var(--text)}
.card ul{list-style:none;padding:0;margin:12px 0 24px;font-size:.95rem;color:var(--muted)}
.card li{padding:6px 0;border-bottom:1px solid var(--rule)}
.card .price{font:300 1.6rem var(--serif);color:var(--petrol);margin-top:auto}
.card .btn{margin-top:18px;justify-content:center}
.ladder-note{margin-top:28px;color:var(--muted);font-size:.95rem}
@media (max-width:860px){.ladder{grid-template-columns:1fr}}

/* enemy / close */
.close{background:var(--petrol);color:var(--on-petrol);padding:120px 0}
.close .eyebrow{color:#7fd3cb}
.close .not{margin-top:36px;font-size:1.15rem;color:#9fbfbc}
.close .not s{text-decoration-thickness:1px}
.close .is{font:300 clamp(2rem,4.6vw,3.3rem)/1.2 var(--serif);margin-top:16px}
.close .is em{color:#7fd3cb}
.close p.body{max-width:620px;margin-top:32px;color:#cfe3e1;font-size:1.1rem}
.close .ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:44px}
.close .btn-ghost{border-color:rgba(245,248,248,.3);color:var(--on-petrol)}
.close .final{margin-top:96px;padding-top:48px;border-top:1px solid rgba(245,248,248,.15);font:300 clamp(1.6rem,3.4vw,2.4rem)/1.3 var(--serif);font-style:italic}

footer{padding:40px 0;font-size:.9rem;color:var(--muted)}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}

/* photos */
.hero-grid{display:grid;grid-template-columns:7fr 5fr;gap:56px;align-items:center}
.hero-photo{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:24px;display:block}
.story-photo{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:20px;display:block;margin-bottom:32px}
.wide-photo{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:20px;display:block;margin-top:48px}
.story .left{position:sticky;top:100px}
.story .left .hook{position:static}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr;gap:40px}.hero-photo{max-width:420px}.story .left{position:static}}

/* reveal */
.reveal{}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}.ab-panel.on{animation:none}}

/* ===== shared subpage components ===== */
nav a.active{color:var(--petrol);font-weight:600}
.text-link{display:inline-block;margin-top:8px;color:var(--accent-text);font-weight:600;text-decoration:none}
.text-link:hover{text-decoration:underline}
.page-hero{padding:80px 0 64px}
.page-hero .lead{font-size:1.25rem;max-width:660px;margin:28px 0 0}
.page-hero .sub{max-width:660px;margin:16px 0 0;color:var(--muted)}
.crumb{font-size:.9rem;color:var(--muted);margin:0 0 24px}
.crumb a{color:var(--accent-text);text-decoration:none}
.meta-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.meta-row span{background:var(--tint);color:var(--petrol);border-radius:999px;padding:7px 14px;font-size:.92rem}
.date-line{margin-top:16px;font-weight:600;color:var(--petrol)}
.tinted{background:var(--tint)}
.dark{background:var(--petrol);color:var(--on-petrol)}
.dark .eyebrow{color:#7fd3cb}
.dark p{color:#cfe3e1}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
@media (max-width:860px){.two-col{grid-template-columns:1fr;gap:32px}}
.take{font:300 clamp(1.5rem,3vw,2.1rem)/1.3 var(--serif);color:var(--petrol);border-left:3px solid var(--accent);padding-left:24px;margin:32px 0}
.dark .take{color:var(--on-petrol)}
.steps{list-style:none;padding:0;margin:40px 0 0;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:64px 1fr;gap:12px;padding:24px 0;border-top:1px solid var(--rule)}
.steps li::before{content:"0" counter(s);font:300 1.5rem var(--serif);color:var(--accent-text)}
.steps b{display:block;font:300 1.35rem/1.3 var(--serif);color:var(--petrol)}
.steps span{display:block;margin-top:6px;color:var(--muted)}
.dark .steps li{border-color:rgba(245,248,248,.18)}
.dark .steps b{color:var(--on-petrol)}
.dark .steps span{color:#cfe3e1}
.dark .steps li::before{color:#7fd3cb}
.chooser{display:grid;gap:14px;margin-top:40px}
.chooser a{display:grid;grid-template-columns:1.4fr 1fr auto;gap:24px;align-items:center;background:#fff;border:1px solid var(--rule);border-radius:16px;padding:22px 26px;text-decoration:none;transition:border-color .2s,transform .2s}
.chooser a:hover{border-color:var(--accent);transform:translateY(-2px)}
.chooser q{font:300 1.25rem/1.35 var(--serif);color:var(--petrol);quotes:"„" "”"}
.chooser .what b{display:block;color:var(--text)}
.chooser .what span{font-size:.92rem;color:var(--muted)}
.chooser .price{font:300 1.3rem var(--serif);color:var(--petrol);white-space:nowrap}
@media (max-width:760px){.chooser a{grid-template-columns:1fr;gap:8px}}
.offer{padding:96px 0;border-top:1px solid var(--rule)}
.offer .num{font:600 .78rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text)}
.offer h2{margin-top:12px}
.note{background:#fff;border:1px solid var(--rule);border-radius:16px;padding:22px 26px;margin-top:32px}
.note b{color:var(--petrol)}
.plain-list{list-style:none;padding:0;margin:16px 0 0}
.plain-list li{padding:10px 0 10px 28px;position:relative;border-bottom:1px solid var(--rule)}
.plain-list li::before{content:"";position:absolute;left:4px;top:20px;width:10px;height:2px;background:var(--accent)}
.relatable{font:300 1.35rem/1.6 var(--serif);color:var(--petrol);margin:24px 0}
.relatable span{display:block}
.comfort{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
.comfort div{background:var(--tint);border-radius:14px;padding:20px;font-family:var(--serif);font-size:1.15rem;color:var(--petrol)}
@media (max-width:760px){.comfort{grid-template-columns:1fr}}
.faq details{border-top:1px solid var(--rule);padding:20px 0}
.faq details:last-child{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;font:300 1.25rem var(--serif);color:var(--petrol);display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent-text);font-family:var(--sans)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:12px 0 0;color:var(--muted);max-width:680px}
.form{display:grid;gap:18px;margin-top:32px;max-width:640px}
.form label{display:grid;gap:6px;font-weight:600;font-size:.95rem;color:var(--petrol)}
.form small{font-weight:400;color:var(--muted)}
.form input[type=text],.form input[type=email],.form textarea,.form select{font:400 1rem var(--sans);padding:14px 16px;border:1px solid var(--rule);border-radius:12px;background:#fff;color:var(--text);width:100%}
.form textarea{min-height:96px;resize:vertical}
.form input:focus,.form textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.form .row{display:grid;grid-template-columns:1fr 2fr;gap:14px}
.form .check{display:flex;gap:12px;align-items:flex-start;font-weight:400;color:var(--text)}
.form .check input{margin-top:5px;accent-color:var(--petrol);width:18px;height:18px;flex:none}
.form fieldset{border:1px solid var(--rule);border-radius:12px;padding:16px 18px;display:grid;gap:12px}
.form legend{font-weight:600;color:var(--petrol);padding:0 6px;font-size:.95rem}
.form .btn{justify-self:start;border:0;cursor:pointer}
.form .after{color:var(--muted);font-size:.95rem;margin:0}
.dark .form label{color:var(--on-petrol)}
@media (max-width:600px){.form .row{grid-template-columns:1fr}}
.inline-form{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;max-width:560px}
.inline-form input{flex:1 1 240px;font:400 1rem var(--sans);padding:15px 18px;border-radius:999px;border:1px solid var(--rule);background:#fff}
.inline-form .btn{border:0;cursor:pointer}
.fine{font-size:.88rem;color:var(--muted);margin-top:12px}
.dark .fine{color:#9fbfbc}
.facts{display:grid;grid-template-columns:160px 1fr;gap:0;margin-top:32px;border-top:1px solid var(--rule)}
.facts dt,.facts dd{padding:14px 0;border-bottom:1px solid var(--rule);margin:0}
.facts dt{font:600 .8rem var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text);padding-top:18px}
@media (max-width:600px){.facts{grid-template-columns:1fr}.facts dt{border-bottom:0;padding-bottom:0}}
.bigquote{font:300 clamp(1.8rem,4vw,2.8rem)/1.25 var(--serif);font-style:italic;color:var(--petrol);margin:32px 0}
.dark .bigquote{color:var(--on-petrol)}
.mail-big{font:300 clamp(1.6rem,4vw,2.6rem) var(--serif);color:var(--petrol);text-decoration:none;word-break:break-all}
.copy-btn{margin-left:4px;vertical-align:middle;font:600 .9rem var(--sans);border:1px solid var(--rule);background:#fff;border-radius:999px;padding:8px 16px;cursor:pointer;color:var(--petrol)}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px}
.compare div{border-radius:18px;padding:28px;background:rgba(245,248,248,.06);border:1px solid rgba(245,248,248,.16)}
.compare b{display:block;font:300 1.5rem var(--serif);color:var(--on-petrol);margin-bottom:8px}
@media (max-width:760px){.compare{grid-template-columns:1fr}}
.sessions{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.sessions div{background:#fff;border:1px solid var(--rule);border-radius:16px;padding:24px}
.sessions .n{font:600 .78rem var(--sans);letter-spacing:.12em;color:var(--accent-text)}
.sessions b{display:block;font:300 1.35rem/1.3 var(--serif);color:var(--petrol);margin:8px 0}
.sessions span{color:var(--muted);font-size:.95rem}
@media (max-width:860px){.sessions{grid-template-columns:1fr}}
.page-photo{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:22px;display:block}
.closing{padding:96px 0;text-align:left}
.closing .final{font:300 clamp(1.8rem,4vw,2.8rem)/1.25 var(--serif);font-style:italic;color:var(--on-petrol);margin:0 0 32px}
footer nav{display:flex;gap:20px}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--petrol)}
.tinted .comfort div{background:#fff;border:1px solid var(--rule)}