:root{
  --teal:#0B363B; --green:#49E8B0; --purple:#C3A1F8; --sky:#6AD1FA;
  --black:#1C1C1C; --white:#FFFFFF; --offwhite:#F5F4F0; --divider:#E8E6E0;
  --bg:var(--offwhite); --fg:var(--black); --muted:rgba(28,28,28,.64);
  --font:'Inter', ui-sans-serif, system-ui, sans-serif; --track:-0.025em;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation-duration:.001ms !important; transition-duration:.001ms !important;} }
body{margin:0; background:var(--bg); color:var(--fg); font-family:var(--font); font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased;}
img{max-width:100%; display:block}
a{color:inherit}
::selection{background:var(--green); color:var(--teal)}
a:focus-visible,button:focus-visible{outline:3px solid var(--sky); outline-offset:3px; border-radius:6px}
.skip{position:absolute; left:-999px; top:8px; background:var(--teal); color:#fff; padding:10px 16px; border-radius:8px; z-index:100; font-weight:700; font-size:13px; text-decoration:none}
.skip:focus{left:12px}

.col{max-width:680px; margin:0 auto; padding:0 24px}
.col-wide{max-width:960px; margin:0 auto; padding:0 24px}
.center{text-align:center}

h1,h2,h3{font-weight:900; letter-spacing:var(--track); margin:0; line-height:1.08; color:var(--teal)}
h1{font-size:clamp(2.2rem,5.6vw,3.7rem)}
h2{font-size:clamp(1.7rem,3.6vw,2.4rem)}
h3{font-size:1.25rem; line-height:1.2}
p{margin:0 0 18px}
.eyebrow{font-weight:700; text-transform:uppercase; font-size:11.5px; letter-spacing:.14em; color:var(--muted); margin:0 0 14px}
.eyebrow::before{content:"\2014\00a0"; color:var(--green); font-weight:800}
.lead{font-size:clamp(1.1rem,1.6vw,1.3rem); line-height:1.6; color:var(--muted)}
.small{font-size:13.5px; color:var(--muted)}
.muted{color:var(--muted)}

/* header */
header{position:sticky; top:0; z-index:40; background:rgba(245,244,240,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--divider)}
.nav{max-width:1100px; margin:0 auto; padding:0 24px; height:72px; display:flex; align-items:center; justify-content:space-between}
.logo{font-weight:900; font-size:17px; letter-spacing:var(--track); text-decoration:none; color:var(--fg)}
.logo .amp{color:var(--teal)}
.nav-links{display:flex; gap:34px}
.nav-links a{font-size:14px; font-weight:600; text-decoration:none; color:var(--fg); opacity:.7; padding-bottom:3px}
.nav-links a:hover{opacity:1}
.nav-links a.active{opacity:1; box-shadow:0 2px 0 var(--green)}
.menu-btn{display:none; background:none; border:1px solid var(--divider); border-radius:8px; width:40px; height:40px; align-items:center; justify-content:center; cursor:pointer}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{content:""; display:block; width:16px; height:2px; background:var(--fg); position:relative}
.menu-btn span::before{position:absolute; top:-5px} .menu-btn span::after{position:absolute; top:5px}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; font-family:inherit; font-weight:800; font-size:14px; letter-spacing:.02em; text-decoration:none; border-radius:999px; padding:17px 34px; background:var(--green); color:var(--teal); border:2px solid transparent; cursor:pointer; transition:transform .15s ease, opacity .15s ease}
.btn:hover{transform:translateY(-1px); opacity:.9}
.btn-ghost{background:transparent; color:var(--teal); border-color:var(--teal)}
.btn-sm{padding:11px 22px; font-size:12.5px}
.cta{text-align:center}
.cta .small{margin:14px 0 0}
.link{font-weight:700; color:var(--teal); text-decoration:none; border-bottom:2px solid var(--green); padding-bottom:1px}
.link:hover{opacity:.8}

/* rhythm */
.block{padding:96px 0}
.block.tight{padding:72px 0}
.block + .block{border-top:1px solid var(--divider)}
.block.first{padding-top:72px}

/* hero */
.hero{padding:64px 0 88px; text-align:center}
.avatar{width:148px; height:148px; border-radius:999px; margin:0 auto 28px; padding:6px; background:var(--teal)}
.avatar img{width:100%; height:100%; object-fit:cover; border-radius:999px}
.hello{font-weight:800; font-size:1.05rem; color:var(--muted); margin:0 0 14px; letter-spacing:-0.01em}
.hero h1{margin-bottom:24px}
.hero .lead{max-width:34em; margin:0 auto 36px}

/* lists */
.ticks{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px}
.ticks li{position:relative; padding-left:34px; font-size:1.05rem; line-height:1.55}
.ticks li::before{content:""; position:absolute; left:0; top:3px; width:22px; height:22px; border-radius:999px; background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B363B' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat}
.trio{display:flex; flex-direction:column; gap:30px}
.trio .t{display:grid; grid-template-columns:48px 1fr; gap:0 18px; align-items:start}
.trio .n{font-weight:900; font-size:1.7rem; color:var(--green); line-height:1; letter-spacing:var(--track); padding-top:4px}
.trio h3{margin:0 0 6px}
.trio p{margin:0; color:var(--muted)}
.pair{display:grid; grid-template-columns:1fr 1fr; gap:36px; margin:8px 0 28px}
.pair h3{margin-bottom:6px}
.pair p{margin:0; color:var(--muted)}
.callout{border-left:3px solid var(--green); padding:2px 0 2px 20px; margin:28px 0; font-weight:700; font-size:1.1rem; color:var(--teal); line-height:1.5}

/* proof */
.proof{text-align:center}
.proof h2{max-width:20em; margin:0 auto 22px}
.proof blockquote{margin:0 auto 14px; max-width:36em; font-size:1.05rem; color:var(--fg); line-height:1.65}
.proof cite{font-style:normal; font-weight:700; font-size:14px; color:var(--muted)}
.proof .more{margin-top:26px}
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:26px 0 0; text-align:center}
.stats .s b{display:block; font-size:clamp(1.6rem,3.4vw,2.2rem); font-weight:900; color:var(--teal); letter-spacing:var(--track); line-height:1.1}
.stats .s span{display:block; font-size:13px; color:var(--muted); margin-top:6px; line-height:1.4}
.story{padding:44px 0; border-top:1px solid var(--divider)}
.story:first-of-type{border-top:none}
.story h3{font-size:1.5rem; margin-bottom:12px; text-align:center}
.story p.d{text-align:center; color:var(--muted); max-width:34em; margin:0 auto}

/* offers (work with me) */
.offer{padding:38px 0; border-top:1px solid var(--divider)}
.offer:first-of-type{border-top:none; padding-top:8px}
.offer .head{display:flex; justify-content:space-between; align-items:baseline; gap:18px; flex-wrap:wrap; margin-bottom:10px}
.offer .price{font-weight:800; color:var(--teal); font-size:1.05rem}
.offer .price small{font-weight:600; color:var(--muted); font-size:.8rem}
.offer p{color:var(--muted); margin:0 0 14px}
.offer .proofline{font-size:13px; color:var(--teal); font-weight:700; margin:0 0 16px}
.offer .tag{font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--teal); background:var(--green); border-radius:999px; padding:4px 12px; margin-left:10px; vertical-align:middle}
.group{font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); margin:36px 0 0}

/* about */
.about-head{text-align:center}
.about-head h1{font-size:clamp(1.8rem,4.4vw,2.7rem); max-width:19em; margin:0 auto}
.principles{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:22px}
.principles li{padding-left:0}
.principles b{display:block; color:var(--teal); font-weight:800; font-size:1.05rem}
.principles span{color:var(--muted); font-size:.98rem}

/* newsletter */
.nl{background:var(--teal); color:#fff; border-radius:22px; padding:48px 40px; text-align:center}
.nl h1,.nl h2{color:#fff; margin-bottom:12px}
.nl p{color:rgba(255,255,255,.75); max-width:34em; margin:0 auto 26px}
.nl .embed{display:flex; justify-content:center}

/* footer */
footer{padding:64px 0 40px; border-top:1px solid var(--divider)}
.foot{max-width:1100px; margin:0 auto; padding:0 24px; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px}
.foot-logo{font-weight:900; font-size:1.25rem; letter-spacing:var(--track)}
.foot-tag{font-size:13px; color:var(--muted); max-width:30ch; margin:10px 0 0}
.foot b{display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-bottom:10px}
.foot a{display:block; font-size:14px; text-decoration:none; margin-bottom:8px}
.foot a:hover{text-decoration:underline}
.foot-bottom{max-width:1100px; margin:36px auto 0; padding:22px 24px 0; border-top:1px solid var(--divider); display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:12px; color:var(--muted)}

.reveal{opacity:0; transform:translateY(12px); transition:opacity .5s ease, transform .5s ease}
.reveal.in-view{opacity:1; transform:none}
.notfound{padding:120px 0 100px; text-align:center}
.notfound .row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:28px}

@media (max-width:820px){
  .nav-links{display:none}
  .menu-btn{display:flex}
  .nav-links.open{display:flex; position:absolute; top:72px; left:0; right:0; background:var(--bg); flex-direction:column; padding:20px 24px 24px; border-bottom:1px solid var(--divider); gap:18px}
  .foot{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  body{font-size:16.5px}
  .block{padding:68px 0}
  .block.tight{padding:56px 0}
  .hero{padding:44px 0 64px}
  .pair{grid-template-columns:1fr; gap:22px}
  .stats{grid-template-columns:1fr}
  .btn{padding:16px 26px}
  .nl{padding:34px 22px}
  .foot{grid-template-columns:1fr}
  .trio .t{grid-template-columns:38px 1fr}
}

/* nav pill: Work with me */
.nav-links{align-items:center}
.nav-links a.pill{background:var(--teal); color:var(--green); opacity:1; padding:10px 20px; border-radius:999px; box-shadow:none}
.nav-links a.pill:hover{transform:translateY(-1px)}
.nav-links a.pill.active{background:var(--green); color:var(--teal); box-shadow:0 0 0 2px var(--teal) inset}
@media (max-width:820px){ .nav-links a.pill{align-self:flex-start} }

/* ===== v2 accents: a little more colour from the palette (Oct 2026) ===== */
:root{--tint-green:rgba(73,232,176,.26); --tint-purple:rgba(195,161,248,.34); --tint-sky:rgba(106,209,250,.30)}
/* brand strip under the header and above the footer */
header{position:sticky}
header::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px; background:linear-gradient(90deg,var(--green),var(--purple),var(--sky))}
footer{border-top:0}
footer::before{content:""; display:block; height:4px; background:linear-gradient(90deg,var(--green),var(--purple),var(--sky)); margin:-64px 0 56px}
/* soft tinted hero per page */
.hero{background:linear-gradient(180deg,var(--tint-purple) 0%,rgba(245,244,240,0) 100%)}
.pg-about .hero{background:linear-gradient(180deg,var(--tint-sky) 0%,rgba(245,244,240,0) 100%)}
.pg-testimonials .hero{background:linear-gradient(180deg,var(--tint-green) 0%,rgba(245,244,240,0) 100%)}
.pg-newsletter .hero,.pg-work-with-me .hero{background:linear-gradient(180deg,var(--tint-purple) 0%,rgba(245,244,240,0) 100%)}
.avatar{box-shadow:0 0 0 6px var(--green)}
/* ticks cycle through the palette */
.ticks li:nth-child(2)::before{background-color:var(--purple)}
.ticks li:nth-child(3)::before{background-color:var(--sky)}
/* callout as a tinted card */
.callout{border-left:4px solid var(--purple); background:var(--tint-purple); padding:18px 24px; border-radius:0 16px 16px 0}
/* growth / independence cards */
.pair>div{border-radius:20px; padding:26px 26px 24px}
.pair>div:nth-child(1){background:var(--tint-green)}
.pair>div:nth-child(2){background:var(--tint-purple)}
.pair p{color:rgba(11,54,59,.82)}
/* numbered chips */
.trio .n{width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; padding:0; color:var(--teal); background:var(--green)}
.trio .t:nth-child(2) .n{background:var(--purple)}
.trio .t:nth-child(3) .n{background:var(--sky)}
/* proof band */
.band-teal{background:var(--teal); color:#fff; border-top:0 !important}
.band-teal h2{color:#fff}
.band-teal blockquote{color:rgba(255,255,255,.9)}
.band-teal cite{color:var(--green)}
.band-teal .link{color:#fff; border-bottom-color:var(--green)}
.block.band-teal + .block{border-top:0}
/* stats tiles */
.stats .s{border-radius:18px; padding:22px 14px; background:var(--tint-green)}
.stats .s:nth-child(2){background:var(--tint-purple)}
.stats .s:nth-child(3){background:var(--tint-sky)}
/* principles */
.principles li{box-shadow:inset 4px 0 0 var(--green); padding-left:22px}
.principles li:nth-child(3n+2){box-shadow:inset 4px 0 0 var(--purple)}
.principles li:nth-child(3n){box-shadow:inset 4px 0 0 var(--sky)}
/* offers */
.offer{box-shadow:inset 4px 0 0 var(--green); padding-left:22px}
.offer:nth-of-type(3n+2){box-shadow:inset 4px 0 0 var(--purple)}
.offer:nth-of-type(3n){box-shadow:inset 4px 0 0 var(--sky)}
/* closing call to action as a tinted card */
.cta.reveal{background:var(--tint-sky); border-radius:26px; padding:44px 24px 40px; width:calc(100% - 48px); max-width:632px; margin:0 auto}
/* newsletter block keeps teal, add a green top edge */
.nl{border-top:6px solid var(--green)}

/* ===== newsletter pop-up ===== */
.nl-pop{position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; transition:opacity .2s ease}
.nl-pop[hidden]{display:none}
.nl-pop.on{opacity:1}
.nl-pop-back{position:absolute; inset:0; background:rgba(11,54,59,.66); backdrop-filter:blur(3px)}
.nl-pop-card{overscroll-behavior:contain; position:relative; background:#fff; border-radius:26px; width:100%; max-width:540px; max-height:calc(100vh - 40px); overflow:auto; padding:44px 40px 30px; box-shadow:0 30px 80px rgba(11,54,59,.4); outline:none; transform:translateY(12px) scale(.98); transition:transform .25s ease}
.nl-pop.on .nl-pop-card{transform:none}
.nl-pop-card::before{content:""; position:absolute; left:0; right:0; top:0; height:6px; background:linear-gradient(90deg,var(--green),var(--purple),var(--sky))}
.nl-pop-card h2{font-size:clamp(1.6rem,4.4vw,2.1rem); margin-bottom:14px}
.nl-pop-card p{color:var(--muted)}
.nl-pop-x{position:absolute; top:14px; right:14px; width:40px; height:40px; border-radius:50%; border:1px solid var(--divider); background:#fff; font-size:24px; line-height:1; cursor:pointer; color:var(--teal)}
.nl-pop-x:hover{background:var(--offwhite)}
.nl-pop-embed{min-height:110px; margin:18px 0 8px; display:flex; justify-content:center}
.nl-pop-foot{display:flex; justify-content:space-between; align-items:center; gap:14px; margin:14px 0 0; flex-wrap:wrap}
.nl-pop-foot a{color:var(--teal); font-weight:700}
.nl-pop-no{background:none; border:0; font:inherit; font-size:13.5px; color:var(--muted); cursor:pointer; text-decoration:underline; padding:6px}
@media (max-width:620px){ .nl-pop-card{padding:40px 22px 24px; border-radius:22px} }
@media (prefers-reduced-motion: reduce){ .nl-pop,.nl-pop-card{transition:none} }

/* newsletter page: direct Beehiiv iframe */
.nl .embed iframe{width:100%; max-width:460px; height:120px; border:0; background:#fff; border-radius:14px}

/* ---- 3am-style structure: pain list, offer summary, why list, compare table, included/not included ---- */
.pain{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0; border-top:1px solid var(--divider)}
.pain li{display:grid; grid-template-columns:104px 1fr; gap:0 20px; padding:18px 0; border-bottom:1px solid var(--divider); align-items:baseline}
.pain .k{font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.12em; color:var(--teal); background:var(--green); border-radius:999px; padding:4px 12px; text-align:center; justify-self:start}
.pain li:nth-child(3n+2) .k{background:var(--purple)}
.pain li:nth-child(3n) .k{background:var(--sky)}
.pain .q{font-weight:700; font-size:1.08rem; line-height:1.45; color:var(--teal); letter-spacing:-.01em}
.osum{display:flex; flex-direction:column; border-top:1px solid var(--divider)}
.osum a{display:grid; grid-template-columns:1fr auto; gap:2px 20px; padding:18px 0 18px 18px; border-bottom:1px solid var(--divider); text-decoration:none; box-shadow:inset 4px 0 0 var(--green)}
.osum a:nth-child(3n+2){box-shadow:inset 4px 0 0 var(--purple)}
.osum a:nth-child(3n){box-shadow:inset 4px 0 0 var(--sky)}
.osum a:hover{background:rgba(255,255,255,.6)}
.osum .nm{font-weight:800; color:var(--teal); letter-spacing:-.01em}
.osum .pr{font-weight:800; color:var(--teal); text-align:right; white-space:nowrap}
.osum .ln{color:var(--muted); font-size:.97rem; line-height:1.5}
.osum .pr small{display:block; font-weight:600; color:var(--muted); font-size:.75rem}
.why{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:26px; counter-reset:why}
.why li{display:grid; grid-template-columns:48px 1fr; gap:0 18px; align-items:start; counter-increment:why}
.why li::before{content:counter(why); font-weight:900; font-size:1.7rem; color:var(--green); line-height:1; padding-top:4px}
.why li:nth-child(2)::before{color:var(--purple)}
.why li:nth-child(3)::before{color:var(--sky)}
.why h3{margin:0 0 4px}
.why p{margin:0; color:var(--muted)}
.cmp-wrap{max-width:1040px; margin:0 auto; padding:0 24px}
.cmp-scroll{overflow-x:auto; border:1px solid var(--divider); border-radius:18px; background:#fff; -webkit-overflow-scrolling:touch}
.cmp{border-collapse:separate; border-spacing:0; width:100%; min-width:860px; font-size:14px; line-height:1.45}
.cmp th,.cmp td{padding:14px 16px; text-align:left; vertical-align:top; border-bottom:1px solid var(--divider)}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:none}
.cmp thead th{font-weight:800; color:var(--teal); font-size:13.5px; background:var(--offwhite); position:sticky; top:0; border-bottom:2px solid var(--green)}
.cmp thead th:nth-child(3n+3){border-bottom-color:var(--purple)}
.cmp thead th:nth-child(3n+4){border-bottom-color:var(--sky)}
.cmp tbody th{font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); width:128px; background:#fff; position:sticky; left:0}
.cmp thead th:first-child{position:sticky; left:0; z-index:2}
.cmp td{color:var(--fg)}
.cmp .yes{color:var(--teal); font-weight:800}
.cmp .no{color:rgba(28,28,28,.4)}
.cmp-hint{display:none; font-size:12.5px; color:var(--muted); text-align:center; margin:0 0 10px}
.incl{display:grid; grid-template-columns:1fr 1fr; gap:22px 34px; margin:6px 0 14px}
.incl h4{margin:0 0 8px; font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.12em; color:var(--teal)}
.incl.no-h h4{color:var(--muted)}
.incl ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px}
.incl li{position:relative; padding-left:24px; font-size:.95rem; line-height:1.5; color:var(--fg)}
.incl .yes li::before{content:""; position:absolute; left:0; top:4px; width:15px; height:15px; border-radius:999px; background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B363B' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/10px no-repeat}
.incl .nope li{color:var(--muted)}
.incl .nope li::before{content:""; position:absolute; left:0; top:4px; width:15px; height:15px; border-radius:999px; background:rgba(28,28,28,.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1C1C' stroke-opacity='.55' stroke-width='3.6' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center/9px no-repeat}
.offer .best{font-size:.93rem; color:var(--teal); margin:0 0 16px}
.offer .best b{font-weight:800}
.honest{text-align:center}
.honest h2{margin-bottom:12px}
.honest p{color:var(--muted); max-width:520px; margin:0 auto 24px}
@media (max-width:640px){
  .pain li{grid-template-columns:1fr; gap:8px}
  .incl{grid-template-columns:1fr}
  .cmp-hint{display:block}
  .osum a{grid-template-columns:1fr; }
  .osum .pr{text-align:left}
  .why li{grid-template-columns:38px 1fr}
}
@media (max-width:640px){
  .cmp{min-width:820px}
  .cmp tbody th{width:92px; padding:12px 10px; font-size:10px; letter-spacing:.08em}
  .cmp thead th:first-child{width:92px}
  .cmp td,.cmp thead th{padding:12px 12px}
}

/* ---- Work with me: five side-by-side cards + offer detail pages ---- */
[class*="pg-work-with-me-"] .hero{background:linear-gradient(180deg,var(--tint-purple) 0%,rgba(245,244,240,0) 100%)}
.ocards-wrap{max-width:1280px; margin:0 auto; padding:0 24px}
.ocards{display:grid; grid-template-columns:repeat(5,1fr); gap:16px; align-items:stretch}
.ocard{display:flex; flex-direction:column; background:#fff; border:1px solid var(--divider); border-radius:20px; padding:26px 22px 24px; position:relative; overflow:hidden}
.ocard::before{content:""; position:absolute; left:0; right:0; top:0; height:6px; background:var(--green)}
.ocard.c-purple::before{background:var(--purple)}
.ocard.c-sky::before{background:var(--sky)}
.ocard .og{font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); margin:6px 0 10px}
.ocard h2{font-size:1.28rem; line-height:1.15; margin-bottom:12px}
.ocard .op{font-weight:900; font-size:1.7rem; color:var(--teal); letter-spacing:var(--track); margin:0 0 14px; line-height:1}
.ocard .op small{display:block; font-size:12px; font-weight:600; color:var(--muted); letter-spacing:0; margin-top:6px}
.ocard .os{font-size:.93rem; line-height:1.55; color:var(--muted); margin:0 0 14px}
.ocard .ob{font-size:.88rem; line-height:1.5; color:var(--teal); margin:0 0 16px}
.ocard .ob b{font-weight:800}
.ocard .oh{list-style:none; margin:0 0 22px; padding:14px 0 0; border-top:1px solid var(--divider); display:flex; flex-direction:column; gap:8px}
.ocard .oh li{position:relative; padding-left:22px; font-size:.88rem; line-height:1.45}
.ocard .oh li::before{content:""; position:absolute; left:0; top:4px; width:14px; height:14px; border-radius:999px; background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B363B' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/9px no-repeat}
.ocard.c-purple .oh li::before{background-color:var(--purple)}
.ocard.c-sky .oh li::before{background-color:var(--sky)}
.ocard .btn{margin-top:auto; padding:13px 16px; font-size:13px; text-align:center}
.crumb{font-size:12.5px; color:var(--muted); margin:0 0 22px}
.crumb a{color:var(--muted)}
.hprice{font-weight:900; font-size:clamp(1.6rem,3vw,2.1rem); color:var(--teal); letter-spacing:var(--track); margin:0}
.hprice small{font-size:.85rem; font-weight:600; color:var(--muted); letter-spacing:0}
.hero .cta{margin-top:30px}
.facts{margin:0; display:flex; flex-direction:column}
.facts>div{display:grid; grid-template-columns:170px 1fr; gap:4px 20px; padding:16px 0; border-bottom:1px solid var(--divider)}
.facts>div:first-child{border-top:1px solid var(--divider)}
.facts dt{font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); padding-top:3px}
.facts dd{margin:0; font-weight:600; color:var(--teal)}
.faqs .q{padding:20px 0; border-top:1px solid var(--divider)}
.faqs .q:last-child{border-bottom:1px solid var(--divider)}
.faqs h3{font-size:1.05rem; margin-bottom:8px}
.faqs p{margin:0; color:var(--muted)}
.others{display:flex; flex-direction:column; border-top:1px solid var(--divider)}
.others a{display:flex; justify-content:space-between; gap:16px; padding:15px 0; border-bottom:1px solid var(--divider); text-decoration:none; font-weight:700; color:var(--teal)}
.others a:hover{opacity:.75}
.others .r{font-weight:600; color:var(--muted); text-align:right}
.others small{font-size:.8em}
@media (max-width:1180px){ .ocards{grid-template-columns:repeat(3,1fr)} }
@media (max-width:820px){ .ocards{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){
  .ocards{grid-template-columns:1fr}
  .facts>div{grid-template-columns:1fr}
  .others a{flex-direction:column; gap:2px}
  .others .r{text-align:left}
}
@supports (grid-template-rows: subgrid){
  .ocards{grid-auto-flow:row}
  .ocard{display:grid; grid-template-rows:subgrid; grid-row:span 7; align-content:start}
  .ocard .btn{margin-top:0; align-self:end}
}
.ocard h2{min-height:2.3em}
@supports (grid-template-rows: subgrid){ .ocard h2{min-height:0} }

/* ---- Insights ---- */
[class*="pg-insights"] .hero{background:linear-gradient(180deg,var(--tint-sky) 0%,rgba(245,244,240,0) 100%)}
.pg-insights .hero h1{max-width:18em; margin-left:auto; margin-right:auto}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 26px}
.chip{font-family:inherit; font-size:13px; font-weight:700; color:var(--teal); background:#fff; border:1.5px solid var(--divider); border-radius:999px; padding:8px 16px; cursor:pointer; transition:background .15s,border-color .15s}
.chip:hover{border-color:var(--teal)}
.chip.on{background:var(--teal); color:#fff; border-color:var(--teal)}
.inslist{display:flex; flex-direction:column; border-top:1px solid var(--divider)}
.ins{display:block; padding:22px 0 22px 18px; border-bottom:1px solid var(--divider); text-decoration:none; box-shadow:inset 4px 0 0 var(--green)}
.ins:nth-child(3n+2){box-shadow:inset 4px 0 0 var(--purple)}
.ins:nth-child(3n){box-shadow:inset 4px 0 0 var(--sky)}
.ins[hidden]{display:none}
.ins:hover{background:rgba(255,255,255,.65)}
.ins .im{display:flex; gap:12px; align-items:center; flex-wrap:wrap; font-size:12px; color:var(--muted); margin-bottom:6px}
.ins .it{font-weight:800; text-transform:uppercase; letter-spacing:.1em; font-size:10.5px; color:var(--teal)}
.ins .ih{display:block; font-weight:800; font-size:1.18rem; line-height:1.28; letter-spacing:-.015em; color:var(--teal)}
.ins .is{display:block; margin-top:6px; color:var(--muted); font-size:.95rem; line-height:1.5}
.byline{font-size:13.5px; color:var(--muted); margin:0}
.prose{font-size:1.06rem; line-height:1.75}
.prose p{margin:0 0 1.15em}
.prose h2{font-size:1.55rem; margin:2.1em 0 .6em; color:var(--teal)}
.prose h3{font-size:1.25rem; margin:1.8em 0 .5em}
.prose h4,.prose h5,.prose h6{font-size:1.05rem; margin:1.6em 0 .5em; color:var(--teal); font-weight:800}
.prose a{color:var(--teal); font-weight:600; text-decoration:underline; text-decoration-color:var(--green); text-decoration-thickness:2px; text-underline-offset:3px; word-break:break-word}
.prose ul,.prose ol{margin:0 0 1.3em; padding-left:1.3em}
.prose li{margin:0 0 .5em}
.prose li p{margin:0}
.prose blockquote{margin:1.8em 0; padding:18px 24px; border-left:4px solid var(--purple); background:var(--tint-purple); border-radius:0 16px 16px 0; font-weight:700; color:var(--teal)}
.prose blockquote p{margin:0}
.prose hr{border:none; border-top:1px solid var(--divider); margin:2.2em 0}
.prose figure{margin:2em 0}
.prose img{width:100%; height:auto; border-radius:16px}
.prose figcaption{font-size:13px; color:var(--muted); margin-top:8px; text-align:center}
.prose mark{background:rgba(73,232,176,.35); color:inherit; padding:0 .15em; border-radius:3px}
.vid{position:relative; padding-top:56.25%; margin:0 0 2em; border-radius:16px; overflow:hidden; background:#000}
.vid iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.author{display:flex; gap:18px; align-items:center; padding:22px; background:#fff; border:1px solid var(--divider); border-radius:18px}
.author img{width:72px; height:72px; border-radius:999px; object-fit:cover; flex:none}
.author p{margin:0; font-size:.93rem; line-height:1.5; color:var(--muted)}
.author b{color:var(--teal)}
@media (max-width:560px){ .author{flex-direction:column; align-items:flex-start} .prose{font-size:1.02rem} }
.pg-insights .hero h1{font-size:clamp(2rem,4.6vw,3.1rem); max-width:19em}

/* ---- Big hero (home) ---- */
.hero-big{text-align:left; padding:56px 0 84px; background:radial-gradient(circle at 1px 1px, rgba(11,54,59,.14) 1.5px, transparent 1.6px) 0 0/22px 22px, linear-gradient(180deg,var(--tint-purple) 0%,rgba(245,244,240,0) 100%)}
.hb-wrap{max-width:1200px; margin:0 auto; padding:0 28px; display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr); gap:40px; align-items:center}
.hero-big h1{font-size:clamp(2.7rem,6.6vw,5.9rem); line-height:.98; letter-spacing:-.045em; margin:0; color:var(--black); font-weight:900}
.hero-big .hl{display:inline-block; background:var(--green); color:var(--teal); padding:.02em .2em .08em; border-radius:.22em; transform:rotate(-1.4deg); margin:.04em .02em}
.hero-big .dot{color:var(--purple)}
.uline{display:block; width:min(100%,640px); height:14px; margin:14px 0 30px}
.tags{margin:0 0 34px; display:flex; flex-direction:column; align-items:flex-start; gap:8px}
.tg{display:inline-block; background:#fff; border:2px solid var(--teal); border-radius:10px; padding:6px 14px; font-weight:600; font-size:clamp(1rem,1.7vw,1.3rem); line-height:1.25; color:var(--black); box-shadow:3px 3px 0 var(--teal); transform:rotate(-.6deg)}
.tg.hand{font-family:'Caveat Brush','Inter',cursive; font-weight:400; font-size:clamp(1.25rem,2.2vw,1.7rem); transform:rotate(.5deg)}
.hb-cta{display:flex; flex-wrap:wrap; align-items:center; gap:18px 30px}
.btn-big{padding:20px 34px; font-size:16px; border:2px solid var(--teal); box-shadow:5px 5px 0 var(--teal); border-radius:18px; transition:transform .12s, box-shadow .12s}
.btn-big:hover{transform:translate(2px,2px); box-shadow:3px 3px 0 var(--teal); opacity:1}
.tl{font-weight:800; color:var(--teal); text-decoration:none; font-size:1.05rem; border-bottom:3px solid var(--green); padding-bottom:3px}
.hb-note{margin:18px 0 0}
.hb-photo{position:relative; justify-self:center; width:100%; max-width:420px}
.hb-photo .ph{border-radius:28px; overflow:hidden; border:2px solid var(--teal); box-shadow:8px 8px 0 var(--purple); background:var(--tint-sky); aspect-ratio:1/1.08; transform:rotate(1.2deg)}
.hb-photo img{width:100%; height:100%; object-fit:cover}
.hb-photo .chip1,.hb-photo .chip2{position:absolute; background:#fff; border:2px solid var(--teal); border-radius:12px; padding:7px 14px; font-weight:800; font-size:.9rem; color:var(--teal); box-shadow:3px 3px 0 var(--teal)}
.hb-photo .chip1{left:-18px; bottom:56px; transform:rotate(-3deg)}
.hb-photo .chip2{right:-10px; top:26px; background:var(--green); transform:rotate(2.5deg)}
@media (max-width:900px){
  .hb-wrap{grid-template-columns:1fr; gap:44px}
  .hb-photo{max-width:320px; justify-self:start; margin-left:10px}
  .hero-big{padding:36px 0 64px}
}
@media (max-width:480px){ .hb-wrap{padding:0 20px} .hb-photo .chip1{left:-8px} .btn-big{width:100%; justify-content:center} }
.btn-big{gap:10px; text-align:center}
@media (max-width:480px){ .btn-big{font-size:15px; padding:18px 20px} }

/* =====================================================================
   NEO STYLE: the hero's design language applied site-wide
   (teal outlines, solid offset shadows, tilted tags, marker highlights,
   hand-drawn underlines, handwritten accents, dot grid)
   ===================================================================== */
:root{--hand:'Caveat Brush','Inter',cursive; --ln:2px solid var(--teal); --sh:4px 4px 0 var(--teal)}

/* heroes on every page: dot grid + highlighted words + hand-drawn underline */
.hero:not(.hero-big){background:radial-gradient(circle at 1px 1px, rgba(11,54,59,.13) 1.5px, transparent 1.6px) 0 0/22px 22px, linear-gradient(180deg,var(--tint-purple) 0%,rgba(245,244,240,0) 100%)}
.pg-about .hero:not(.hero-big){background:radial-gradient(circle at 1px 1px, rgba(11,54,59,.13) 1.5px, transparent 1.6px) 0 0/22px 22px, linear-gradient(180deg,var(--tint-sky) 0%,rgba(245,244,240,0) 100%)}
.pg-testimonials .hero:not(.hero-big){background:radial-gradient(circle at 1px 1px, rgba(11,54,59,.13) 1.5px, transparent 1.6px) 0 0/22px 22px, linear-gradient(180deg,var(--tint-green) 0%,rgba(245,244,240,0) 100%)}
[class*="pg-insights"] .hero:not(.hero-big){background:radial-gradient(circle at 1px 1px, rgba(11,54,59,.13) 1.5px, transparent 1.6px) 0 0/22px 22px, linear-gradient(180deg,var(--tint-sky) 0%,rgba(245,244,240,0) 100%)}
.hero:not(.hero-big) h1{color:var(--black); letter-spacing:-.04em; font-weight:900}
.hl{display:inline-block; background:var(--green); color:var(--teal); padding:.02em .18em .07em; border-radius:.2em; transform:rotate(-1.2deg); margin:.03em .02em}
.hero:not(.hero-big) h1::after{content:""; display:block; width:min(220px,50%); height:12px; margin:20px auto 0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8 C 40 2, 80 11, 120 5 S 190 8, 217 4' fill='none' stroke='%230B363B' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.mk{background:linear-gradient(transparent 56%, rgba(73,232,176,.7) 56%, rgba(73,232,176,.7) 92%, transparent 92%); padding:0 .06em; -webkit-box-decoration-break:clone; box-decoration-break:clone}

/* eyebrows become little taped labels */
.eyebrow{display:inline-flex; align-items:center; background:#fff; border:var(--ln); border-radius:8px; padding:4px 12px; box-shadow:2px 2px 0 var(--teal); transform:rotate(-1deg); font-size:11px; color:var(--teal)}
.eyebrow::before{display:none !important; content:none !important}
.hero .eyebrow{transform:rotate(-1.5deg)}

/* buttons */
.btn{border:2px solid var(--teal); box-shadow:4px 4px 0 var(--teal); border-radius:16px; transition:transform .12s, box-shadow .12s}
.btn:hover{transform:translate(2px,2px); box-shadow:2px 2px 0 var(--teal); opacity:1}
.btn-ghost{background:#fff}
.btn-sm{box-shadow:3px 3px 0 var(--teal)}
.pill{border:2px solid var(--teal) !important; box-shadow:2px 2px 0 var(--teal)}
.chip{border:2px solid var(--teal); box-shadow:2px 2px 0 var(--teal)}
.chip.on{box-shadow:2px 2px 0 var(--green); background:var(--teal)}
.link{border-bottom-width:3px}

/* cards */
.pair>div,.stats .s,.callout,.author,.ocard,.cta.reveal{border:var(--ln); box-shadow:var(--sh)}
.pair>div:nth-child(1){box-shadow:5px 5px 0 var(--green)}
.pair>div:nth-child(2){box-shadow:5px 5px 0 var(--purple)}
.pair>div{transform:rotate(-.5deg)} .pair>div:nth-child(2){transform:rotate(.5deg)}
.stats .s{box-shadow:4px 4px 0 var(--teal)}
.stats .s:nth-child(1){transform:rotate(-.7deg)} .stats .s:nth-child(2){transform:rotate(.5deg)} .stats .s:nth-child(3){transform:rotate(-.4deg)}
.callout{border-left:var(--ln); box-shadow:5px 5px 0 var(--purple)}
.cta.reveal{border-radius:22px; box-shadow:6px 6px 0 var(--teal)}
.ocard{box-shadow:6px 6px 0 var(--green); transition:transform .15s, box-shadow .15s}
.ocard.c-purple{box-shadow:6px 6px 0 var(--purple)} .ocard.c-sky{box-shadow:6px 6px 0 var(--sky)}
.ocard:hover{transform:translate(-2px,-3px) rotate(-.4deg)}
.ocard::before{display:none}
.ocard .og{font-family:var(--hand); font-size:1.15rem; letter-spacing:0; text-transform:none; color:var(--teal)}
.author{box-shadow:5px 5px 0 var(--sky)}
.nl{border:var(--ln); border-top:var(--ln); box-shadow:7px 7px 0 var(--green)}
.band-teal{background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.14) 1.5px, transparent 1.6px); background-size:22px 22px}

/* list rows become outlined cards */
.osum{border-top:none; gap:16px}
.osum a{border:var(--ln); border-radius:16px; background:#fff; padding:18px 20px; box-shadow:4px 4px 0 var(--green); transition:transform .12s, box-shadow .12s}
.osum a:nth-child(3n+2){box-shadow:4px 4px 0 var(--purple)} .osum a:nth-child(3n){box-shadow:4px 4px 0 var(--sky)}
.osum a:hover{background:#fff; transform:translate(2px,2px); box-shadow:2px 2px 0 var(--teal)}
.inslist{border-top:none; gap:16px}
.ins{border:var(--ln); border-radius:16px; background:#fff; padding:18px 20px; box-shadow:4px 4px 0 var(--green); transition:transform .12s, box-shadow .12s}
.ins:nth-child(3n+2){box-shadow:4px 4px 0 var(--purple)} .ins:nth-child(3n){box-shadow:4px 4px 0 var(--sky)}
.ins:hover{background:#fff; transform:translate(2px,2px); box-shadow:2px 2px 0 var(--teal)}
.principles{gap:18px}
.principles li{border:var(--ln); border-radius:16px; background:#fff; padding:16px 20px; box-shadow:4px 4px 0 var(--green)}
.principles li:nth-child(3n+2){box-shadow:4px 4px 0 var(--purple)} .principles li:nth-child(3n){box-shadow:4px 4px 0 var(--sky)}
.others{border-top:none; gap:14px}
.others a{border:var(--ln); border-radius:14px; background:#fff; padding:14px 18px; box-shadow:3px 3px 0 var(--teal)}
.faqs .q{border:var(--ln); border-radius:16px; background:#fff; padding:18px 22px; margin-bottom:14px; box-shadow:4px 4px 0 var(--purple)}
.faqs .q:last-child{border-bottom:var(--ln)}
.facts>div{border:none}
.facts{gap:0}
.pain{border-top:none}
.pain li{border-bottom:2px dashed rgba(11,54,59,.22)}
.pain .k{border:2px solid var(--teal); box-shadow:2px 2px 0 var(--teal); border-radius:8px; transform:rotate(-2deg); letter-spacing:.08em}
.pain li:nth-child(even) .k{transform:rotate(1.5deg)}
.incl .yes li::before,.ticks li::before{box-shadow:1px 1px 0 var(--teal)}

/* numbers in handwriting */
.trio .n,.why li::before{font-family:var(--hand); font-weight:400; font-size:2.4rem; letter-spacing:0; text-shadow:2px 2px 0 var(--teal)}
.hprice,.ocard .op{letter-spacing:-.03em}

/* article + images */
.prose blockquote{border:var(--ln); border-left:var(--ln); box-shadow:5px 5px 0 var(--purple); border-radius:14px; background:#fff}
.prose img{border:var(--ln); box-shadow:6px 6px 0 var(--sky)}
.vid{border:var(--ln); box-shadow:6px 6px 0 var(--purple)}
.prose h2{font-size:1.65rem}

/* popup */
.nl-pop-card{border:var(--ln); box-shadow:8px 8px 0 var(--green)}

/* tables + misc */
.cmp-scroll{border:var(--ln); box-shadow:var(--sh)}
.offer{border-top:none}

@media (max-width:640px){
  .pair>div,.stats .s{transform:none}
  .btn{box-shadow:3px 3px 0 var(--teal)}
}
@media (prefers-reduced-motion: reduce){ .btn,.ocard,.osum a,.ins{transition:none} .ocard:hover{transform:none} }


/* ---- Book a call page ---- */
.bk-tags{display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin:30px 0 0}
.bk-cal{padding:0 0 88px}
.bk-card{background:#fff; border:2px solid var(--teal); border-radius:24px; box-shadow:8px 8px 0 var(--purple); overflow:hidden}
.bk-top{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:16px 24px; border-bottom:2px solid var(--teal); background:var(--offwhite)}
.bk-top strong{font-size:15px; font-weight:900; letter-spacing:-.02em; color:var(--teal)}
.bk-top span{font-size:12.5px; color:var(--muted); font-weight:600}
.bk-frame{display:block; width:100%; height:780px; border:0; background:#fff}
.bk-note{display:flex; justify-content:space-between; gap:12px 20px; flex-wrap:wrap; padding:14px 24px; border-top:2px solid var(--teal); background:var(--offwhite); font-size:13.5px; color:var(--muted)}
@media (max-width:820px){ .bk-frame{height:920px} .bk-card{box-shadow:5px 5px 0 var(--purple)} .bk-cal{padding-bottom:64px} }
@media (max-width:560px){ .bk-top,.bk-note{padding:12px 16px} }


/* ---- persistent "Book a call" button in the header (all screen sizes) ---- */
.nav-right{display:flex; align-items:center; gap:12px}
.nav-book{padding:11px 20px; font-size:13px; white-space:nowrap}
@media (max-width:820px){ .nav{gap:10px} .nav-book{padding:9px 14px; font-size:12.5px; box-shadow:3px 3px 0 var(--teal)} .logo{font-size:15.5px} }
@media (max-width:380px){ .logo{font-size:14px} .nav-book{padding:8px 11px; font-size:12px} .nav-right{gap:8px} }

/* founder-read cards (add_insight.py) */
.prose .nr-card{background:#fff; border:2px solid var(--teal); border-radius:16px; padding:20px 24px 6px; margin:1.6em 0 1.9em; box-shadow:6px 6px 0 var(--green)}
.prose .nr-card.sh-purple{box-shadow:6px 6px 0 var(--purple)}
.prose .nr-card.sh-sky{box-shadow:6px 6px 0 var(--sky)}
.prose .nr-card.sh-teal{box-shadow:6px 6px 0 var(--teal)}
.prose .nr-card.fill-green{background:var(--green)}
.prose .nr-card.fill-purple{background:var(--purple)}
.prose .nr-card .nr-label{font-weight:900; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--teal); margin:0 0 .5em}
.prose .nr-card h2{margin:.1em 0 .45em; font-size:1.45rem}
.prose .nr-card p{margin:0 0 .9em}
.prose img.nr-img{border:0; box-shadow:none; border-radius:0}
.prose figure.nr-sign{max-width:340px}