/* Level Up Coaching: site styles. Mobile-first, no framework. */

@font-face{font-family:"DM Serif Display";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/dm-serif-display-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"DM Serif Display";font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/dm-serif-display-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:200 900;font-display:swap;src:url(../fonts/source-sans-3-latin-wght-normal.woff2) format("woff2")}

:root{
  --ink:#121212;--ink-2:#333;--muted:#4d4d4d;--paper:#fff;--cream:#F7F2EC;--line:#e4dcd1;
  --blue:#2949E5;--blue-dark:#1a2f9e;--blue-tint:#eef1ff;--amber:#FFBE5C;--brown:#6b4a36;
  --serif:"DM Serif Display",Georgia,"Times New Roman",serif;
  --sans:"Source Sans 3","Helvetica Neue",Helvetica,Arial,sans-serif;
  --wrap:1200px;--gutter:20px;--radius:0;
}
@media (min-width:768px){:root{--gutter:40px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);font-size:1.0625rem;line-height:1.65;color:var(--ink);background:var(--paper);text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue)}
a:hover{color:var(--blue-dark)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.1;letter-spacing:-.01em;margin:0;text-wrap:balance}
h1{font-size:clamp(2.5rem,1.7rem + 3.4vw,4.25rem)}
h2{font-size:clamp(2rem,1.45rem + 2.3vw,3.125rem)}
h3{font-size:clamp(1.4rem,1.2rem + .7vw,1.75rem);line-height:1.2}
h1 em,h2 em{font-style:italic;color:var(--blue)}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0}
.wrap{width:100%;max-width:calc(var(--wrap) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}
.stack>*+*{margin-top:1.25rem}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:12px 18px;font-weight:700}
.skip-link:focus{top:12px;color:#fff}

/* Eyebrow + lede */
.eyebrow{display:block;font-size:.8125rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--brown)}
.lede{font-size:clamp(1.125rem,1.05rem + .35vw,1.3125rem);line-height:1.6;color:var(--ink-2);max-width:40rem}
.muted{color:var(--muted)}
.placeholder{background:#fff3dc;padding:0 .2em;color:var(--ink)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:1rem 2rem;background:var(--ink);color:#fff;border:2px solid var(--ink);font:700 .875rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .15s,color .15s,border-color .15s;text-align:center}
.btn:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.btn--light{background:#fff;color:var(--ink);border-color:#fff}
.btn--light:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn--amber{background:var(--amber);border-color:var(--amber);color:var(--ink)}
.btn--amber:hover{background:#fff;border-color:#fff;color:var(--ink)}
.btn--small{min-height:46px;padding:.75rem 1.25rem;font-size:.8125rem}
.link-u{color:var(--ink);font-weight:700;font-size:.9375rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;border-bottom:2px solid var(--amber);padding-bottom:2px}
.link-u:hover{color:var(--blue);border-color:var(--blue)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.75rem}

/* Announcement + header */
.announce{background:var(--ink);color:#fff;text-align:center;font-size:.8125rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.7rem var(--gutter)}
.announce a{color:var(--amber);text-decoration:none}
.announce a:hover{color:#fff}
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.site-header__bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:84px}
.brand{display:flex;align-items:center;flex-shrink:0}
.brand img{width:94px;height:62px}
.nav-toggle{display:none;align-items:center;gap:.5rem;min-height:46px;padding:.5rem 1rem;background:#fff;border:2px solid var(--ink);font:700 .8125rem var(--sans);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;color:var(--ink)}
.nav-toggle svg{width:20px;height:20px}
.site-nav ul{list-style:none;display:flex;flex-direction:column;gap:0}
.site-nav a{display:block;padding:.85rem 0;color:var(--ink);text-decoration:none;font-weight:700;font-size:.875rem;letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid var(--line)}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--blue)}
.site-nav .btn{margin-top:1rem;color:#fff;border-bottom:2px solid var(--ink)}
.js .nav-toggle{display:inline-flex}
.js .site-nav{display:none}
.js .site-nav.is-open{display:block;padding-bottom:1.25rem}
.site-header__bar{flex-wrap:wrap}
.site-nav{flex-basis:100%}
@media (min-width:1080px){
  .site-header__bar{flex-wrap:nowrap;min-height:96px}
  .brand img{width:106px;height:70px}
  .js .nav-toggle{display:none}
  .site-nav,.js .site-nav{display:block;flex-basis:auto}
  .site-nav ul{flex-direction:row;align-items:center;gap:1.9rem}
  .site-nav a{border:0;padding:.5rem 0;font-size:.8125rem}
  .site-nav .btn{margin:0 0 0 .5rem;padding:.9rem 1.4rem;min-height:48px;color:#fff}
}

/* Breadcrumbs */
.breadcrumbs{font-size:.875rem;color:var(--muted);padding-top:1.5rem}
.breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem}
.breadcrumbs li+li::before{content:"/";margin-right:.4rem;color:#9a8f82}
.breadcrumbs a{color:var(--muted)}
.breadcrumbs [aria-current]{color:var(--ink);font-weight:600}

/* Sections */
.section{padding-block:clamp(4rem,3rem + 5vw,7rem)}
.section--tight{padding-block:clamp(3rem,2.5rem + 3vw,4.5rem)}
.section--cream{background:var(--cream)}
.section--blue{background:var(--blue);color:#fff}
.section--blue .eyebrow{color:var(--cream)}
.section--blue h2 em{color:var(--amber)}
.section--blue .lede{color:var(--blue-tint)}
.section--dark{background:var(--ink);color:#fff}
.section--dark .eyebrow{color:var(--amber)}
.section--dark h2 em{color:var(--amber)}
/* Golden brown, between the amber and brown brand colors. On #8A5C29: white 5.8:1,
   cream 5.2:1 (all text), amber 3.5:1 (large headings only, never small text). */
.section--golden{background:#8A5C29;color:#fff}
.section--golden .eyebrow,.section--golden .steps .eyebrow{color:var(--cream)}
.section--golden h2 em,.section--golden h3 em,.section--golden .statement em{color:var(--amber)}
.section--golden .lede,.section--golden .muted,.section--golden .dark-split p,.section--golden .steps p,.section--golden .method p{color:var(--cream)}
.section--golden a:not(.btn){color:#fff}
.section--golden .link-u:hover{color:#fff;border-color:#fff}
.section--golden :where(.card,.quote){color:var(--ink)}
.section--golden :where(.card,.quote) a:not(.btn){color:inherit}
.section--amber{background:var(--amber)}
.section--amber .eyebrow{color:var(--ink)}
.section-head{max-width:46rem;margin-bottom:clamp(2rem,1.5rem + 2vw,3.25rem)}
.section-head>*+*{margin-top:1rem}
.section-head--center{margin-inline:auto;text-align:center}
.section-head--split{max-width:none;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1.5rem}
.section-head--center .lede,.center .lede{margin-inline:auto}
.center .actions{justify-content:center}
.narrow{max-width:46rem;margin-inline:auto}
section[id],article[id]{scroll-margin-top:100px}
/* A big closing line in the heading face (not a heading) */
.statement{font-family:var(--serif);font-size:clamp(1.6rem,1.3rem + 1.4vw,2.4rem);line-height:1.2;text-wrap:balance}
.statement--sm{font-size:clamp(1.3rem,1.2rem + .5vw,1.6rem);line-height:1.3}
.statement em{font-style:italic;color:var(--blue)}

/* Grids */
.grid{display:grid;gap:1.5rem}
@media (min-width:720px){.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-2-1{grid-template-columns:2fr 1fr}}
@media (min-width:600px) and (max-width:899px){.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Hero */
.hero{background:var(--cream);overflow:hidden}
.hero__grid{display:grid;gap:2rem;align-items:center;padding-top:clamp(2.5rem,2rem + 3vw,4.5rem)}
.hero__copy>*+*{margin-top:1.4rem}
.hero__copy .actions{margin-top:2rem}
.hero__media{position:relative;display:flex;justify-content:center;align-items:flex-end;min-height:360px}
.hero__ring{position:absolute;width:min(86%,520px);aspect-ratio:1;border:clamp(8px,1.2vw,12px) solid var(--amber);border-radius:50%;top:4%;left:50%;transform:translateX(-50%)}
.hero__media img{position:relative;width:min(100%,520px);height:auto}
.hero__badge{position:absolute;left:0;bottom:12%;background:#fff;padding:.9rem 1.1rem;box-shadow:0 14px 30px rgba(0,0,0,.08);display:flex;flex-direction:column;z-index:2;max-width:15.5rem}
.hero__badge strong{font-family:var(--serif);font-weight:400;font-size:1.75rem;line-height:1.1}
.hero__badge span{font-size:.875rem;font-weight:600;line-height:1.4;color:var(--muted);margin-top:.2rem}
@media (min-width:900px){.hero__grid{grid-template-columns:1.05fr .95fr;gap:3rem;padding-top:0;min-height:640px}.hero__copy{padding-block:4rem}}

/* Press strip */
.press{border-bottom:1px solid var(--line);padding-block:2rem}
.press__inner{display:flex;flex-direction:column;gap:1rem}
.press ul{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.press li{border:1px dashed #b8ad9f;min-height:52px;display:flex;align-items:center;justify-content:center;font-family:var(--serif);color:#5f574e;font-size:1.05rem;padding:.5rem;text-align:center}
@media (min-width:720px){.press ul{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1080px){.press__inner{flex-direction:row;align-items:center;gap:2.5rem}.press__inner>.eyebrow{flex-shrink:0}.press ul{flex-grow:1;grid-template-columns:repeat(6,minmax(0,1fr))}}

/* Lists */
.pain-list{list-style:none;display:grid;gap:1rem}
.pain-list li{border-top:2px solid rgba(255,255,255,.45);padding-top:1rem;font-size:1.125rem;line-height:1.5}
@media (min-width:720px){.pain-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem 1.75rem}}
.num-list{list-style:none;display:grid;gap:1.5rem;counter-reset:n}
.num-list li{counter-increment:n;display:grid;grid-template-columns:48px 1fr;gap:1rem;align-items:start;font-size:1.0625rem;line-height:1.55;color:var(--ink-2)}
.num-list li::before{content:counter(n);width:48px;height:48px;border:3px solid var(--amber);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--ink)}
@media (min-width:720px){.num-list--cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.num-list--cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem 2.5rem}}
.check-list{list-style:none;display:grid;gap:.65rem}
.check-list li{position:relative;padding-left:1.75rem;line-height:1.5}
.check-list li::before{content:"";position:absolute;left:0;top:.45em;width:12px;height:7px;border-left:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(-45deg)}
.skills-list li{font-size:clamp(1.125rem,1.05rem + .35vw,1.3125rem)}

/* Split media */
.split{display:grid;gap:2.5rem;align-items:center}
@media (min-width:900px){.split{grid-template-columns:5fr 6fr;gap:4rem}.split--rev{grid-template-columns:6fr 5fr}.split--rev>:first-child{order:2}}
.portrait{position:relative;max-width:460px;margin-inline:auto;width:100%}
.portrait__block{position:absolute;inset:8% 10% 0 0;background:var(--amber)}
.portrait__ring{position:absolute;right:0;top:0;width:28%;aspect-ratio:1;border:8px solid var(--blue);border-radius:50%}
.portrait img{position:relative;width:100%}
.method{display:grid;gap:1.25rem;margin-top:1.75rem}
.method>div{border-top:3px solid var(--ink);padding-top:.9rem}
.method>div:nth-child(2){border-color:var(--blue)}
.method>div:nth-child(3){border-color:var(--amber)}
.method h3{font-style:italic;font-size:1.75rem}
.method p{margin-top:.4rem;color:var(--muted);font-size:1rem;line-height:1.5}
@media (min-width:600px){.method{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Cards */
.card{background:#fff;padding:clamp(1.75rem,1.4rem + 1vw,2.5rem);display:flex;flex-direction:column;gap:1rem;transition:transform .2s ease,box-shadow .2s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(18,18,18,.08)}
.card__num{font-family:var(--serif);font-size:3rem;line-height:1;color:var(--blue)}
.card h3 a{color:inherit;text-decoration:none}
.card h3 a:hover{color:var(--blue)}
.card p{color:var(--muted)}
.card .link-u{align-self:flex-start;margin-top:auto}
.card--featured{background:var(--blue);color:#fff;position:relative}
.card--featured p,.card--featured .check-list{color:#eef1ff}
.card--featured .card__num{color:var(--amber)}
.tag{display:inline-block;align-self:flex-start;background:var(--amber);color:var(--ink);font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:.35rem .65rem}
.card--featured .tag{position:absolute;top:-.9rem;left:clamp(1.75rem,1.4rem + 1vw,2.5rem)}
.price{font-family:var(--serif);font-size:1.6rem;line-height:1.2}
.card .card__lead{font-family:var(--serif);font-size:1.3rem;line-height:1.3;color:var(--ink)}
.card .card__label{font-weight:700;color:var(--ink)}
.packages .btn{margin-top:auto}
.ways{display:grid;border-top:2px solid var(--ink)}
.ways .card{background:transparent}
@media (min-width:900px){.ways{grid-template-columns:repeat(3,minmax(0,1fr))}.ways .card+.card{border-left:1px solid var(--line)}}
@media (max-width:899px){.ways .card+.card{border-top:1px solid var(--line)}}

/* Testimonials */
.quote{background:#fff;padding:clamp(1.75rem,1.4rem + 1vw,2.25rem);display:flex;flex-direction:column;gap:1rem;margin:0}
.quote__head{display:flex;justify-content:space-between;align-items:center}
.quote__mark{font-family:var(--serif);font-size:4rem;line-height:.6;color:var(--blue)}
.quote blockquote{margin:0;display:flex;flex-direction:column;gap:.75rem;flex-grow:1}
.quote__result{font-family:var(--serif);font-size:1.5rem;line-height:1.25}
.quote blockquote p:not(.quote__result){color:var(--muted)}
.quote figcaption{display:flex;align-items:center;gap:.75rem;border-top:1px solid var(--line);padding-top:1rem}
.avatar{width:44px;height:44px;border-radius:50%;background:#e4dcd1;flex-shrink:0}
.quote figcaption span{display:block;font-size:.9375rem;color:var(--muted)}
.slider{display:grid;grid-auto-flow:column;grid-auto-columns:88%;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1rem;scrollbar-width:thin}
.slider>*{scroll-snap-align:start}
@media (min-width:720px){.slider{grid-auto-columns:calc(50% - .5rem)}}
@media (min-width:1080px){.slider{grid-auto-columns:calc(33.333% - .67rem)}}
.section--dark .quote{background:#1e1e1e;color:#fff}
.section--dark .quote blockquote p:not(.quote__result),.section--dark .quote figcaption span{color:#c9c9c9}
.section--dark .quote__mark{color:var(--amber)}
.section--dark .quote figcaption{border-color:#333}

/* Stats */
.stat-ring{width:min(300px,80vw);aspect-ratio:1;border:10px solid var(--amber);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2.5rem;margin-inline:auto;gap:.4rem}
.stat-ring strong,.stat strong{font-family:var(--serif);font-weight:400;font-size:clamp(3rem,2.4rem + 2.4vw,4.75rem);line-height:1}
.stat-ring span{color:#d4d4d4;line-height:1.4}
.stat-ring cite,.stat cite{font-style:normal;font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:#a8a8a8}
.stats{list-style:none;display:grid;gap:2.5rem}
.stat{text-align:center;display:flex;flex-direction:column;gap:.6rem;align-items:center}
.stat strong{color:var(--blue)}
.stat p{max-width:18rem;color:var(--ink-2)}
.stat cite{color:#6f665c}
@media (min-width:800px){.stats{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Comparison table */
.table-wrap{overflow-x:auto;border:1px solid var(--line);background:#fff}
table{width:100%;border-collapse:collapse;min-width:640px;font-size:1rem}
caption{text-align:left;padding:1rem 1.25rem;font-weight:700;font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brown)}
th,td{padding:1rem 1.25rem;text-align:left;vertical-align:top;border-top:1px solid var(--line)}
thead th{background:var(--ink);color:#fff;font-size:.8125rem;letter-spacing:.12em;text-transform:uppercase}
tbody th{font-weight:700}

/* FAQ */
.faq{border-top:2px solid var(--ink);max-width:52rem}
.faq--center{margin-inline:auto}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.35rem 0;font-family:var(--serif);font-size:clamp(1.25rem,1.15rem + .5vw,1.5rem);line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex-shrink:0;width:36px;height:36px;border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-size:1.25rem;line-height:1;transition:transform .2s}
.faq details[open] summary::after{content:"–";background:var(--amber);border-color:var(--amber)}
.faq summary:hover{color:var(--blue)}
.faq .answer{padding:0 0 1.5rem;max-width:44rem;color:var(--ink-2)}
.faq .answer>*+*{margin-top:.8rem}

/* Steps */
.steps{list-style:none;display:grid;border-top:2px solid var(--ink)}
.steps li{padding:1.5rem 0;display:flex;flex-direction:column;gap:.5rem}
.steps li+li{border-top:1px solid var(--line)}
.steps .eyebrow{color:var(--blue)}
.steps h3{font-size:1.5rem}
.steps p{color:var(--muted)}
@media (min-width:900px){.steps{grid-template-columns:repeat(3,minmax(0,1fr))}.steps li{padding:1.75rem 2rem 0 0}.steps li+li{border-top:0;border-left:1px solid var(--line);padding-left:2rem}}

/* CTA */
.cta{position:relative;overflow:hidden;text-align:center}
.cta__ring{position:absolute;width:640px;aspect-ratio:1;border:14px solid var(--amber);border-radius:50%;opacity:.35;left:-280px;top:-220px;pointer-events:none}
.cta .wrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:2rem}
.cta h2{max-width:56rem}
.cta__body{font-size:clamp(1.125rem,1.05rem + .35vw,1.3125rem);color:var(--ink-2);margin-top:-.75rem}
.cta__body>*+*{margin-top:.2rem}
.cta__note{margin-top:-1rem;font-size:.875rem;font-weight:700;letter-spacing:.08em;color:var(--muted)}

/* Opt-in band */
.optin{display:grid;gap:1.75rem;align-items:center}
.optin h2{font-size:clamp(1.75rem,1.4rem + 1.4vw,2.5rem)}
@media (min-width:900px){.optin{grid-template-columns:1.1fr 1fr;gap:3rem}}
.playbook{list-style:none;display:grid;gap:1.25rem 1.75rem}
.playbook li{border-top:2px solid var(--ink);padding-top:.75rem}
.playbook h3{font-size:1.35rem}
.playbook p{margin-top:.3rem;font-size:1rem;line-height:1.5}
@media (min-width:560px){.playbook{grid-template-columns:repeat(2,minmax(0,1fr))}}
.inline-form{display:flex;flex-direction:column;gap:.5rem}
.inline-form label{font-weight:700;font-size:.9375rem}
.inline-form__row{display:flex;flex-direction:column;gap:.5rem}
@media (min-width:560px){.inline-form__row{flex-direction:row;gap:0}.inline-form__row input{border-right:0}}
.form-success{background:#fff;border:2px solid var(--ink);padding:1.25rem 1.5rem}
.form-success strong{display:block;font-size:1.125rem}
[hidden]{display:none!important}

/* Forms */
.form{display:flex;flex-direction:column;gap:1.75rem}
.field{display:flex;flex-direction:column;gap:.45rem}
.field label,.form legend{font-weight:700;font-size:.9375rem;line-height:1.5}
.field .hint{font-weight:400;color:var(--muted)}
input[type=text],input[type=email],input[type=date],input[type=number],select,textarea{width:100%;min-height:54px;border:2px solid var(--ink);border-radius:0;padding:.75rem 1rem;font:inherit;font-size:1.0625rem;background:#fff;color:var(--ink)}
textarea{min-height:130px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:3px solid var(--blue);outline-offset:1px}
fieldset{border:0;margin:0;padding:0}
.form legend{margin-bottom:.9rem;padding:0}
.choice{display:flex;align-items:center;gap:.85rem;padding:.9rem 1rem;border:2px solid var(--line);background:#fff;cursor:pointer;margin-bottom:.6rem}
.choice:hover{border-color:var(--ink)}
.choice input{width:20px;height:20px;accent-color:var(--blue);margin:0;flex-shrink:0}
.choice:has(input:checked){border-color:var(--blue);background:var(--blue-tint)}
.form-grid{display:grid;gap:1.25rem}
@media (min-width:640px){.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.form-grid .span-2{grid-column:span 2}}
.form-note{font-size:.875rem;color:var(--muted)}
.panel{background:#fff;padding:clamp(1.5rem,1rem + 2.5vw,3.25rem)}
.next-steps{background:var(--ink);color:#fff;padding:1.75rem}
.next-steps ol{list-style:none;counter-reset:s;display:grid;gap:1rem;margin-top:1rem}
.next-steps li{counter-increment:s;display:grid;grid-template-columns:28px 1fr;gap:.75rem;line-height:1.5}
.next-steps li::before{content:counter(s);font-family:var(--serif);font-size:1.5rem;line-height:1;color:var(--amber)}

/* Article */
.article{max-width:46rem;margin-inline:auto}
.article-header>*+*{margin-top:1.1rem}
.byline{display:flex;align-items:center;gap:.9rem;font-size:.9375rem;color:var(--muted);flex-wrap:wrap}
.byline img{width:52px;height:52px;border-radius:50%;background:var(--cream);object-fit:cover;object-position:top}
.byline a{color:var(--ink);font-weight:700}
.takeaways{background:var(--cream);border-top:4px solid var(--amber);padding:1.5rem 1.75rem;margin-block:2rem}
.takeaways h2{font-family:var(--sans);font-size:.8125rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--brown);margin-bottom:.9rem}
.prose>*+*{margin-top:1.15rem}
.prose h2{margin-top:3rem;font-size:clamp(1.75rem,1.4rem + 1.4vw,2.35rem)}
.prose h3{margin-top:2rem;font-size:1.45rem}
.prose ul,.prose ol{padding-left:1.35rem}
.prose li+li{margin-top:.5rem}
.toc{border:1px solid var(--line);padding:1.25rem 1.5rem}
.toc h2{font-family:var(--sans);font-size:.8125rem!important;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin:0 0 .6rem!important;color:var(--brown)}
.toc ol{padding-left:1.2rem}
.author-box{display:grid;grid-template-columns:88px 1fr;gap:1.25rem;align-items:start;border-top:2px solid var(--ink);padding-top:1.75rem;margin-top:3rem}
.author-box img{width:88px;height:88px;border-radius:50%;background:var(--cream);object-fit:cover;object-position:top}
.author-box h2{font-size:1.5rem;margin:0!important}

/* Dark stat split */
.dark-split{display:grid;gap:3rem;align-items:center}
.dark-split p{color:#d4d4d4}
@media (min-width:900px){.dark-split{grid-template-columns:1.4fr 1fr}}
.allowed-list li{font-family:var(--serif);font-size:clamp(1.25rem,1.15rem + .5vw,1.5rem);line-height:1.3}
@media (min-width:720px){.allowed-list{grid-template-columns:1fr}}
.check-close{margin-top:clamp(2.5rem,2rem + 2vw,3.5rem);border-top:2px solid rgba(255,255,255,.45);padding-top:clamp(1.5rem,1.2rem + 1vw,2.25rem)}

/* Gallery: lite YouTube cards (main.js swaps in the player) and Instagram embeds */
.gallery-grid{align-items:start;gap:2rem 1.5rem}
.gallery-card{margin:0;display:flex;flex-direction:column;gap:.9rem;min-width:0}
.gallery-card figcaption{color:var(--ink-2);line-height:1.5}
.yt-frame{position:relative;aspect-ratio:16/9;background:var(--ink)}
.yt,.yt-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt{display:block;overflow:hidden;color:var(--ink)}
.yt img{width:100%;height:100%;object-fit:cover}
.yt__play{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 6px rgba(18,18,18,.35);transition:transform .15s,background .15s}
.yt__play::before{content:"";position:absolute;left:29px;top:23px;border-style:solid;border-width:13px 0 13px 21px;border-color:transparent transparent transparent var(--ink)}
.yt:hover .yt__play,.yt:focus-visible .yt__play{background:#fff;transform:scale(1.08)}
.yt:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.yt__cover{position:absolute;inset:0;background:var(--ink)}
.yt__cover::before{content:"";position:absolute;width:70%;aspect-ratio:1;border:12px solid var(--amber);border-radius:50%;right:-18%;top:-40%;opacity:.55}
.yt__cover .tag{position:absolute;left:1rem;top:1rem}
.ig-card{width:100%;max-width:540px;margin-inline:auto}
.ig-card blockquote{margin:0;min-height:220px;display:flex;align-items:center;justify-content:center;padding:2rem;background:#fff;border:1px solid var(--line)}
.ig-card blockquote a{display:flex;flex-direction:column;align-items:center;gap:.75rem;color:var(--ink);font-weight:700;font-size:.875rem;letter-spacing:.12em;text-transform:uppercase;text-align:center;text-decoration:none}
.ig-card blockquote a span{border-bottom:2px solid var(--amber);padding-bottom:2px}
.ig-card blockquote a:hover{color:var(--blue)}
.ig-card iframe.instagram-media{width:100%!important;max-width:540px!important;min-width:0!important;margin:0!important}
.gallery-note{margin-top:1.75rem;font-size:.9375rem;color:var(--muted)}
.gallery-hint{border:2px dashed #b8ad9f;background:#fff;padding:1.25rem 1.5rem;color:var(--muted);line-height:1.5}

/* Testimonials: recommendation images (Testimonials page) and previews (home) */
.tm-grid{display:grid;gap:1.5rem}
@media (min-width:900px){.tm-grid{display:block;columns:2;column-gap:1.75rem}.tm-grid>.tm-card{break-inside:avoid;margin-bottom:1.75rem}}
.tm-card,.tm-peek{margin:0;background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:0 12px 32px rgba(18,18,18,.06);display:flex;flex-direction:column;min-width:0}
.tm-card__shot{display:block;border-bottom:1px solid var(--line)}
.tm-card__shot img{width:100%}
.tm-card__shot:hover{opacity:.94}
.tm-card__shot:focus-visible{outline-offset:-3px}
.tm-card__cap,.tm-peek__cap{display:flex;flex-direction:column;gap:.1rem;line-height:1.45;padding:1.1rem 1.4rem 0}
.tm-card__cap:last-child{padding-bottom:1.3rem}
.tm-card__cap strong,.tm-peek__cap strong{font-size:1.0625rem}
.tm-card__cap span,.tm-peek__cap span{font-size:.9375rem;color:var(--muted)}
.tm-card__cap .tm-card__rel,.tm-peek__cap .tm-peek__rel{color:var(--brown);font-weight:600;margin-top:.2rem}
.tm-card__text{padding:.9rem 1.4rem 1.3rem}
.tm-card__text summary{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;list-style:none;font-weight:700;font-size:.875rem;letter-spacing:.08em;text-transform:uppercase;border-bottom:2px solid var(--amber);padding-bottom:2px}
.tm-card__text summary::-webkit-details-marker{display:none}
.tm-card__text summary::after{content:"+";font-size:1.1rem;line-height:1}
.tm-card__text[open] summary::after{content:"–"}
.tm-card__text summary:hover{color:var(--blue);border-color:var(--blue)}
.tm-quote{margin:1rem 0 0;display:flex;flex-direction:column;gap:.85rem;color:var(--ink-2);line-height:1.6}
.tm-card--text{padding-top:1.6rem}
.tm-card--text .tm-quote{margin:0;padding-inline:1.4rem}
.tm-card--text .tm-card__cap{margin:1.25rem 1.4rem 0;padding:1rem 0 1.3rem;border-top:1px solid var(--line)}
.tm-card__mark{font-family:var(--serif);font-size:4rem;line-height:.6;color:var(--blue);padding:0 1.4rem .5rem}
.tm-peeks{align-items:stretch}
.tm-peek{padding-bottom:1.4rem}
.tm-peek__shot{position:relative;height:10.5rem;overflow:hidden;border-bottom:1px solid var(--line)}
.tm-peek__shot img{width:100%}
.tm-peek__shot::after{content:"";position:absolute;inset:auto 0 0;height:4.5rem;background:linear-gradient(rgba(255,255,255,0),#fff)}
.tm-peek__quote{margin:1.25rem 1.4rem 0;font-family:var(--serif);font-size:1.3rem;line-height:1.35}
.tm-peek__cap{padding-bottom:1.1rem}
.tm-peek .link-u{align-self:flex-start;margin:auto 1.4rem 0}

/* Footer */
.site-footer{background:var(--ink);color:#d0d0d0;padding-block:4.5rem 2.5rem;font-size:.9875rem}
.site-footer a{color:#fff;text-decoration:none}
.site-footer a:hover{color:var(--amber)}
.footer-grid{display:grid;gap:2.5rem}
.footer-brand img{width:130px;height:86px}
.footer-brand p{margin-top:1.25rem;max-width:26rem;line-height:1.6}
.footer-brand .footer-tagline{margin-top:1rem;font-size:.8125rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}
.footer-col h2{font-family:var(--sans);font-size:.8125rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);margin-bottom:1rem}
.footer-col ul{list-style:none;display:grid;gap:.6rem}
address{font-style:normal;line-height:1.7}
.site-footer address a{overflow-wrap:anywhere}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;border-top:1px solid #333;margin-top:3rem;padding-top:1.5rem;font-size:.875rem;color:#a8a8a8}
.footer-bottom ul{list-style:none;display:flex;flex-wrap:wrap;gap:1.25rem}
.footer-bottom a{color:#a8a8a8}
@media (min-width:720px){.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.footer-grid{grid-template-columns:1.6fr 1fr 1fr 1fr}}

/* Misc */
.logo-row{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.logo-row li{border:1px dashed #b8ad9f;min-height:64px;display:flex;align-items:center;justify-content:center;font-family:var(--serif);color:#5f574e;padding:.5rem;text-align:center}
@media (min-width:800px){.logo-row{grid-template-columns:repeat(4,minmax(0,1fr))}}
.dl{display:grid;gap:0;border-top:2px solid var(--ink)}
.dl>div{display:grid;gap:.25rem;padding:1rem 0;border-bottom:1px solid var(--line)}
.dl dt{font-weight:700;font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brown)}
.dl dd{margin:0}
@media (min-width:640px){.dl>div{grid-template-columns:14rem 1fr;gap:1.5rem}}
.center{text-align:center}
.mt-lg{margin-top:clamp(2rem,1.5rem + 2vw,3rem)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media print{.site-header,.announce,.site-footer,.optin-band,.nav-toggle{display:none}}
.site-nav a.btn,.site-nav a.btn[aria-current],.site-nav a.btn:hover{color:#fff}
.section--amber a:not(.btn){color:var(--ink);text-decoration:underline}

/* CMS section colors. build.py adds these to a section whose colors are set in
   /admin (content.json "styles"): cms-theme always; cms-bg + --sec-bg (and the
   section--<preset> class) for a background; cms-light or cms-dark for the text
   theme that suits it; cms-mono when every text should be the main text color;
   cms-fg + --sec-fg for a custom text color. Text reads the --sec-* variables,
   boxes with their own background reset them, and buttons keep their colors
   (only their edge follows the theme so they stay visible). */
.cms-theme :is(.lede,.dark-split p,.stat-ring span:not([style^="color:#"]),.stat p,.num-list li,.faq .answer){color:var(--sec-soft)!important}
.cms-theme :is(.muted,.form-note,.field .hint,.byline,.steps p,.method p,.stat cite,.stat-ring cite,.logo-row li,.press li,.card p:not(.price)){color:var(--sec-muted)}
.cms-theme :is(.eyebrow,.dl dt,.toc h2,.takeaways h2){color:var(--sec-accent)}
.cms-theme :is(h1,h2) em,.cms-theme :is(.stat strong,.steps .eyebrow,.ways .card__num,.faq summary:hover){color:var(--sec-em)}
.cms-theme a:where(:not(.btn,.link-u)){color:var(--sec-link)}
.cms-theme .byline a,.cms-theme .num-list li::before{color:var(--sec-text)}
.cms-theme.announce a{color:var(--sec-accent)}
.cms-theme .link-u{color:var(--sec-text)!important}
.cms-theme .link-u:hover{color:var(--sec-em)!important}
.cms-theme :is(.faq,.steps,.dl,.author-box,.method>div:first-child),.cms-theme .faq summary::after{border-color:var(--sec-rule)}
.cms-theme :is(.faq details,.steps li+li,.dl>div,.ways .card+.card,.pain-list li){border-color:var(--sec-line)}
.cms-theme .faq details[open] summary::after{color:var(--ink)}
.cms-theme .placeholder{color:var(--ink)!important}
.cms-theme .stat-ring svg{stroke:var(--sec-text)}
.cms-theme .btn:not(.btn--amber):not(:hover){border-color:var(--sec-btn-edge)}
.cms-theme :focus-visible,.cms-theme :is(input,select,textarea):focus{outline-color:var(--sec-focus)}
.cms-theme :is(.card,.quote,.tm-card,.tm-peek,.panel,.table-wrap,.form-success,.choice,.hero__badge,.takeaways){--sec-text:var(--ink);--sec-soft:var(--ink-2);--sec-muted:var(--muted);--sec-accent:var(--brown);--sec-em:var(--blue);--sec-link:var(--blue);--sec-rule:var(--ink);--sec-line:var(--line);--sec-btn-edge:var(--ink);--sec-focus:var(--blue);color:var(--ink)}
.cms-theme :is(.card--featured,.next-steps),.cms-theme.section--dark .quote{--sec-text:#fff;--sec-soft:#eef1ff;--sec-muted:#e3e3e3;--sec-accent:var(--amber);--sec-em:var(--amber);--sec-link:#fff;--sec-rule:rgba(255,255,255,.7);--sec-line:rgba(255,255,255,.3);--sec-btn-edge:#fff;--sec-focus:#fff;color:#fff}
.cms-theme .ways .card{--sec-text:inherit;--sec-soft:inherit;--sec-muted:inherit;--sec-accent:inherit;--sec-em:inherit;--sec-link:inherit;--sec-rule:inherit;--sec-line:inherit;--sec-btn-edge:inherit;--sec-focus:inherit;color:inherit}
.cms-theme.cms-light{--sec-text:var(--ink);--sec-soft:var(--ink-2);--sec-muted:var(--muted);--sec-accent:var(--brown);--sec-em:var(--blue);--sec-link:var(--blue);--sec-rule:var(--ink);--sec-line:var(--line);--sec-btn-edge:var(--ink);--sec-focus:var(--blue)}
.cms-theme.cms-dark{--sec-text:#fff;--sec-soft:#eef1ff;--sec-muted:#e3e3e3;--sec-accent:var(--amber);--sec-em:var(--amber);--sec-link:#fff;--sec-rule:rgba(255,255,255,.7);--sec-line:rgba(255,255,255,.45);--sec-btn-edge:#fff;--sec-focus:#fff}
.cms-theme.cms-light.section--amber{--sec-accent:var(--ink);--sec-em:var(--ink);--sec-link:var(--ink)}
.cms-theme.cms-dark.section--blue{--sec-accent:#ffe3b3;--sec-em:#ffe3b3}
.cms-theme.cms-mono.cms-mono{--sec-soft:var(--sec-text);--sec-muted:var(--sec-text);--sec-accent:var(--sec-text);--sec-em:var(--sec-text);--sec-link:var(--sec-text)}
.cms-theme.cms-fg.cms-fg{--sec-text:var(--sec-fg);--sec-soft:var(--sec-fg);--sec-muted:var(--sec-fg);--sec-accent:var(--sec-fg);--sec-em:var(--sec-fg);--sec-link:var(--sec-fg);--sec-rule:var(--sec-fg)}
.cms-theme.cms-theme{color:var(--sec-text)}
.cms-theme.cms-bg{background:var(--sec-bg)}

/* Text colors picked in /admin (Text color button): build.py only keeps
   <span style="color:#rrggbb">. The inline color wins over theme colors; accent
   words, bold text and links inside a colored span take its color too. */
span[style^="color:#"] :is(em,strong,a:not(.btn)){color:inherit!important}