/* Example page components — layout + surface only; typography in type-roles.css */
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--white);color:var(--ink)}

nav.page-nav{background:var(--white);border-bottom:0.5px solid var(--rule);padding:18px var(--space-lg);display:flex;align-items:center;justify-content:space-between;position:sticky;top:var(--dl-header-h);z-index:10}
.nsep{width:0.5px;height:14px;background:#ddd;margin:0 12px}
.nbtn{background:var(--ink);color:#fff;padding:9px 20px;border-radius:6px;border:none;cursor:pointer}

/* Hero */
.hero{padding:var(--space-xl) var(--space-lg);display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg);align-items:center;border-bottom:0.5px solid #f0ede6;max-width:var(--max-width);margin:0 auto}
.eyebrow{margin-bottom:var(--space-md)}
.eyebrow-rule{margin-bottom:var(--space-md)}
.h1{margin-bottom:var(--space-sm)}
.h1 em{font-style:italic}
.hsub{margin-bottom:var(--space-md)}
.cta-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.btn-dark{background:var(--ink);color:#fff;padding:12px 24px;border-radius:7px;border:none;cursor:pointer;display:inline-block;text-decoration:none}
.hero-diagram{display:flex;align-items:center;justify-content:center;width:100%;padding:var(--space-sm) 0}
.hero-diagram svg,.hero-diagram img{width:100%;max-width:100%;height:auto;display:block}

/* Founder strip */
.founder-strip{background:var(--paper);border-bottom:0.5px solid var(--rule);padding:var(--space-lg)}
.founder-inner{max-width:var(--max-width);margin:0 auto;display:grid;grid-template-columns:auto 1fr;gap:var(--space-md);align-items:center}
.founder-photo{width:120px;height:120px;border-radius:8px;overflow:hidden;flex-shrink:0}
.founder-photo img{width:100%;height:100%;object-fit:cover;display:block}
.founder-eyebrow{margin-bottom:var(--space-xs)}
.founder-text{max-width:560px}
.founder-text a{color:var(--ink);font-weight:400;text-decoration:none;border-bottom:0.5px solid var(--rule)}

.founder-strip--green{background:var(--green);border-bottom-color:color-mix(in srgb,var(--green) 80%,var(--black))}
.founder-strip--green .founder-eyebrow{color:var(--white)}
.founder-strip--green .founder-text{color:var(--white)}
.founder-strip--green .founder-text a{color:var(--white);border-bottom-color:color-mix(in srgb,var(--white) 45%,transparent)}

.founder-strip--yellow{background:var(--accent-yellow,#E6A739);border-bottom-color:color-mix(in srgb,var(--accent-yellow,#E6A739) 75%,var(--black))}
.founder-strip--yellow .founder-eyebrow{color:var(--black)}
.founder-strip--yellow .founder-text{color:var(--black)}
.founder-strip--yellow .founder-text a{color:var(--black);border-bottom-color:color-mix(in srgb,var(--black) 35%,transparent)}

/* Sections */
.s2,.s4,.s6{padding:var(--space-xl) var(--space-lg);border-bottom:0.5px solid #f0ede6;max-width:var(--max-width);margin:0 auto;overflow:visible}
.sect-ey{margin-bottom:var(--space-sm)}
.rule{margin-bottom:var(--space-md)}
.section-title{margin-bottom:var(--space-sm)}

/* Business cost */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md);margin-top:var(--space-md)}
.cost-block{padding-top:var(--space-md);border-top:0.5px solid var(--rule)}
.cost-block h3{margin-bottom:var(--space-sm)}
.cohort-block .subsection-label{margin-bottom:var(--space-sm)}

/* Subsection label — subordinate to .sect-ey */
.subsection-label{
  font-family:var(--type-body);
  font-size:15px;
  font-weight:600;
  letter-spacing:0.04em;
  color:var(--color-overline-accent,var(--gold));
  text-transform:none;
}

/* What it is */
.s4body{max-width:600px}
.s4body+.s4body{margin-top:var(--space-sm)}
.statement-display+.s4body{margin-top:var(--space-md)}
.s4-split{display:flex;flex-direction:column;gap:var(--space-lg);margin-bottom:var(--space-md)}
.s4-text .s4body{max-width:none}
.cohort-block{margin-top:var(--space-md);margin-bottom:var(--space-md)}
.cohort-block .s4body{max-width:none}
.s4-diagram{width:100%;max-width:none}
.s4-diagram img,.s4-diagram svg{display:block;width:100%;max-width:100%;height:auto;border-radius:8px}
/* Shared 3-col feature columns — What it is pillars + What changes outcomes */
.pillars,
.outcomes {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-md);
  margin-top: 0;
}

.pillar,
.outcome-col {
  border-left: 2px solid var(--gold);
  padding-left: var(--space-sm);
}

.pt,
.ol {
  margin-bottom: 10px;
}

.s4close{margin-top:22px}

/* What changes */
.s5{padding:var(--space-xl) var(--space-lg);border-bottom:0.5px solid #f0ede6;background:var(--paper)}
.s5inner{max-width:var(--max-width);margin:0 auto}
.s5 .opener{margin-top:var(--space-lg)}
.quote{margin-top:var(--space-sm)}
.outcome-num{margin-bottom:var(--space-xs)}
.s5close{margin-top:var(--space-sm)}

/* Proof */
.dark-section{background:var(--dark-section-bg,var(--ink));padding:var(--space-xl) var(--space-lg);color:var(--on-dark,#f0ece2)}
.dark-inner{max-width:var(--max-width);margin:0 auto}
.eyebrow-light{margin-bottom:var(--space-md)}
.logo-row{display:flex;align-items:center;gap:var(--space-md);flex-wrap:wrap;margin-bottom:var(--space-lg);padding-bottom:var(--space-md);border-bottom:0.5px solid var(--on-dark-border,rgba(255,255,255,0.14))}
.logo-row img{height:28px;width:auto;display:block;opacity:0.95}
.logo-placeholder{height:32px;padding:0 20px;border:0.5px solid var(--on-dark-border,rgba(255,255,255,0.14));border-radius:4px;display:flex;align-items:center;justify-content:center}
.logo-row--inline{margin-top:var(--space-lg);margin-bottom:var(--space-sm);padding-bottom:0;border-bottom:none}
.vwrap{width:100%;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#111;margin-bottom:var(--space-sm)}
.vwrap iframe{width:100%;height:100%;border:none;display:block}
.bq{margin-bottom:var(--space-sm)}
.attr strong{font-weight:500}
.pctx{margin-top:var(--space-sm);padding-top:var(--space-sm);border-top:0.5px solid var(--on-dark-border,rgba(255,255,255,0.14));max-width:560px}
.pctx strong{color:var(--on-dark,#f0ece2);font-weight:400}
.gold-rule{height:1px;background:var(--gold);opacity:0.55;margin:var(--space-lg) 0}
.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md);margin-bottom:var(--space-md)}
.mini-card{padding:var(--space-sm);border:0.5px solid var(--on-dark-border,rgba(255,255,255,0.14));border-radius:10px;background:color-mix(in srgb,var(--on-dark) 4%,transparent)}
.mini-v{width:100%;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#111;margin-bottom:var(--space-xs)}
.mini-v iframe{width:100%;height:100%;border:none;display:block}
.mq{margin-top:0;margin-bottom:var(--space-sm)}
.mr{margin-top:2px}
.mli{margin-top:var(--space-xs)}
.dan{margin-top:0;padding:var(--space-sm) var(--space-md) var(--space-md);border:0.5px solid var(--on-dark-border,rgba(255,255,255,0.14));border-radius:10px;background:color-mix(in srgb,var(--on-dark) 5%,transparent)}
.dq{margin-top:0;margin-bottom:var(--space-sm)}

/* Pull quote bands */
.pull-quote-band{padding:var(--space-lg) var(--space-lg)}
.pull-quote-band .dark-inner{max-width:720px}
.pull-quote{position:relative;margin:0;padding:0;border:none}
.pull-quote--feature .pull-quote-mark{
  display:block;
  font-family:var(--type-quote);
  font-size:clamp(64px,12vw,120px);
  line-height:0.45;
  color:var(--green,var(--gold));
  margin-bottom:-10px;
  user-select:none;
}
.pull-quote--feature p{
  font-family:var(--type-quote);
  font-size:clamp(20px,2.8vw,28px);
  font-weight:var(--weight-quote);
  line-height:var(--leading-quote);
  color:var(--color-quote-on-dark);
  max-width:640px;
  margin-top:0;
}
.pull-quote-attr{
  margin-top:var(--space-md);
  font-family:var(--type-body);
  font-size:var(--text-label);
  color:var(--on-dark-muted,rgba(240,236,226,0.78));
}
.pull-quote-attr a{color:inherit;text-decoration:none;border-bottom:0.5px solid var(--on-dark-border,rgba(255,255,255,0.14))}
.pull-quote-attr a:hover{color:var(--on-dark,#f0ece2)}

/* Dark inset pull quote within light section */
.pull-quote-inset{
  width:100vw;
  max-width:100vw;
  margin:var(--space-lg) calc(50% - 50vw);
  padding:var(--space-lg) max(var(--space-lg),calc((100vw - var(--max-width))/2 + var(--space-lg)));
  box-sizing:border-box;
  background:var(--dark-section-bg,var(--ink));
  color:var(--on-dark,#f0ece2);
}
.pull-quote-inset .pull-quote-attr{color:var(--on-dark-muted,rgba(240,236,226,0.78))}
.pull-quote-inset .pull-quote-attr a{color:inherit;border-bottom-color:var(--on-dark-border,rgba(255,255,255,0.14))}

/* Pete video block (between Problem and business cost) */
.s4-pete-video{
  padding:var(--space-xl) var(--space-lg);
  border-bottom:0.5px solid #f0ede6;
  max-width:var(--max-width);
  margin:0 auto;
  overflow:visible;
}
.s4-pete-video .attr--light{margin:0 0 var(--space-sm)}
.s4-pete-video .pctx--light{margin-top:var(--space-sm)}
.s4-pete-video .ts-h3{margin-top:var(--space-sm);margin-bottom:0}
.pctx--light{
  margin-top:0;
  padding-top:0;
  border-top:none;
  max-width:none;
  color:var(--color-body);
}
.pctx--light strong{color:var(--ink);font-weight:600}
.attr--light{
  margin-top:var(--space-sm);
  margin-bottom:var(--space-sm);
  font-family:var(--type-body);
  font-size:var(--text-label);
  color:var(--color-body);
}
.attr--light a{color:var(--ink);text-decoration:none;border-bottom:0.5px solid var(--rule)}
.attr--light a:hover{color:var(--green,var(--gold))}

/* Proof in action — dark surface with pull-quote rhythm */
.proof-in-action .ceo-mini-testimonials{margin-top:var(--space-md)}
.layout-display-led .proof-in-action .ceo-mini-testimonials{gap:var(--space-md)}
.proof-in-action .pull-quote--inline .pull-quote-mark{
  font-size:clamp(48px,8vw,80px);
  line-height:0;
  margin-top:30px;
  margin-bottom:var(--space-xs);
}
.proof-in-action .pull-quote--inline p{
  font-size:var(--text-quote-compact);
  line-height:var(--leading-quote-compact);
  color:var(--color-quote-on-dark);
}
.proof-in-action .pull-quote-attr{margin-top:var(--space-sm)}

/* Testimonial marquee */
.testimonial-marquee{
  background:var(--paper);
  border-top:0.5px solid var(--rule);
  border-bottom:0.5px solid var(--rule);
  padding:var(--space-md) 0;
  overflow:hidden;
}
.testimonial-marquee-viewport{overflow:hidden;width:100%}
.testimonial-marquee-track{
  display:flex;
  gap:var(--space-xl);
  width:max-content;
  padding:0 var(--space-lg);
}
.testimonial-marquee--animated .testimonial-marquee-track{
  animation:testimonial-scroll 40s linear infinite;
}
.testimonial-marquee--animated:hover .testimonial-marquee-track{
  animation-play-state:paused;
}
.testimonial-marquee--static .testimonial-marquee-track{
  flex-direction:column;
  width:100%;
  max-width:var(--max-width);
  margin:0 auto;
  gap:var(--space-sm);
}
.testimonial-marquee-item{
  flex-shrink:0;
  display:inline-flex;
  flex-direction:column;
  gap:0.35em;
  font-family:var(--type-quote);
  font-size:var(--text-quote-compact);
  color:var(--color-quote);
  text-decoration:none;
  white-space:nowrap;
  transition:color 0.15s ease;
}
.testimonial-marquee-quote{white-space:nowrap}
.testimonial-marquee-attr{
  font-family:var(--type-body),system-ui,sans-serif;
  font-size:var(--text-caption,14px);
  font-weight:600;
  color:var(--ink,var(--black));
  opacity:0.55;
  white-space:nowrap;
}
.testimonial-marquee-item:hover{color:var(--green,var(--gold))}
.testimonial-marquee-item:hover .testimonial-marquee-attr{opacity:0.8}
.testimonial-marquee--static .testimonial-marquee-item,
.testimonial-marquee--static .testimonial-marquee-quote,
.testimonial-marquee--static .testimonial-marquee-attr{white-space:normal}
@keyframes testimonial-scroll{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
@media(prefers-reduced-motion:reduce){
  .testimonial-marquee--animated .testimonial-marquee-track{
    animation:none;
    flex-direction:column;
    width:100%;
    max-width:var(--max-width);
    margin:0 auto;
    gap:var(--space-sm);
  }
  .testimonial-marquee--animated .testimonial-marquee-item,
  .testimonial-marquee--animated .testimonial-marquee-quote,
  .testimonial-marquee--animated .testimonial-marquee-attr{white-space:normal}
}

/* About Luke */
.luke-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:var(--space-md);align-items:center}
.luke-img{width:100%;max-width:200px;border-radius:10px;overflow:hidden}
.luke-img img{width:100%;height:auto;display:block;object-fit:contain;border-radius:10px}
.lname{margin-bottom:3px}
.lcred{margin-bottom:var(--space-xs)}
.luke-attr{
  margin-top:0;
  margin-bottom:var(--space-sm);
  font-family:var(--type-body);
  font-size:var(--text-label);
  font-weight:400;
}
.luke-attr a{color:var(--black,#1A1916);text-decoration:none;border-bottom:0.5px solid var(--rule)}
.luke-attr a:hover{color:var(--green,var(--gold))}

/* CTA */
.cta-section{background:var(--dark-section-bg,var(--ink));padding:96px var(--space-lg);text-align:center;color:var(--on-dark,#f0ece2)}
.cta-inner{max-width:520px;margin:0 auto}
.ctah{margin-bottom:var(--space-md)}
.ctaspoiler{font-size:inherit;font-weight:400;color:inherit}
.cta-section .ctaspoiler{display:inline-block;margin-top:var(--space-xs)}
.ctabtn{background:var(--gold);color:var(--ink);padding:15px 36px;border-radius:8px;border:none;cursor:pointer;display:inline-block;text-decoration:none}

@media(max-width:640px){
  nav.page-nav{padding:14px var(--page-margin-mobile)}
  .hero{grid-template-columns:1fr;padding:var(--space-lg) var(--page-margin-mobile);gap:var(--space-md)}
  .hero-diagram{order:2}
  .founder-strip{padding:var(--space-md) var(--page-margin-mobile)}
  .founder-inner{grid-template-columns:1fr;text-align:left}
  .founder-photo{width:80px;height:80px}
  .s2,.s4,.s6,.s4-pete-video{padding:var(--space-lg) var(--page-margin-mobile)}
  .s5{padding:var(--space-lg) var(--page-margin-mobile)}
  .dark-section{padding:var(--space-lg) var(--page-margin-mobile)}
  .split,.mini-grid,.outcomes,.pillars,.luke-grid,.s4-split{grid-template-columns:1fr}
  .pillar,
  .outcome-col{border-left:none;border-top:2px solid var(--gold);padding-left:0;padding-top:var(--space-sm)}
  .pillar:first-child,
  .outcome-col:first-child{border-top:none;padding-top:0}
  .cta-section{padding:64px var(--page-margin-mobile)}
  .luke-img{max-width:160px}
  .pull-quote-inset{
    margin:var(--space-lg) calc(50% - 50vw);
    padding:var(--space-lg) var(--page-margin-mobile);
  }
}

/* Accent theme — color switcher drives page accent tokens */
html.dl-accent--neutral {
  --gold: var(--ink-50, rgba(26, 25, 22, .5));
  --color-label-accent: var(--ink-70, rgba(26, 25, 22, .7));
  --color-label-on-dark: var(--on-dark-muted, rgba(240, 236, 226, 0.78));
  --color-overline-accent: #000000;
  --color-overline-on-dark: var(--on-dark-faint, rgba(240, 236, 226, 0.52));
  --overline-rule-color: var(--ink-50, rgba(26, 25, 22, .5));
  --venn-c1: var(--black, #1A1916);
  --venn-c2: var(--warm, #E8E5DE);
  --venn-c3: var(--ink-70, rgba(26, 25, 22, .7));
  --venn-c4: var(--ink-50, rgba(26, 25, 22, .5));
  --venn-center-fill: var(--black, #1A1916);
  --venn-center-ink: var(--white, #fff);
  --holistic-c1: var(--black, #1A1916);
  --holistic-c2: var(--ink-70, rgba(26, 25, 22, .7));
  --holistic-c3: var(--ink-50, rgba(26, 25, 22, .5));
  --surface-cta-bg: var(--white, #fff);
  --surface-cta-fg: var(--black, #1A1916);
}

html.dl-accent--neutral .founder-strip {
  background: var(--white, #fff);
  border-bottom-color: var(--rule, var(--line));
}

html.dl-accent--neutral .founder-eyebrow {
  color: #000000;
}

html.dl-accent--neutral .founder-text {
  color: var(--ink-70, rgba(26, 25, 22, .7));
}

html.dl-accent--neutral .founder-text a {
  color: var(--black, #1A1916);
  border-bottom-color: var(--rule, var(--line));
}

html.dl-accent--neutral .dl-header-cta,
html.dl-accent--neutral .btn-dark {
  background: var(--black, #1A1916);
  color: var(--white, #fff);
}

html.dl-accent--neutral .ctabtn {
  background: var(--white, #fff);
  color: var(--black, #1A1916);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--white, #fff) 65%, var(--black, #1A1916));
}

html.dl-accent--green {
  --gold: var(--green, #02A86D);
  --color-label-accent: var(--green, var(--gold));
  --color-label-on-dark: var(--green, var(--gold));
  --color-overline-accent: var(--green, var(--gold));
  --color-overline-on-dark: var(--green, var(--gold));
  --overline-rule-color: var(--green, var(--gold));
  --venn-c3: var(--green, var(--gold));
  --venn-c4: var(--green-dark, var(--gold-dark, var(--gold)));
  --venn-center-fill: var(--green-deep, var(--green-dark, var(--gold-deep, var(--gold))));
  --venn-center-ink: var(--white, #fff);
  --holistic-c2: var(--green, var(--gold));
  --holistic-c3: var(--green-dark, var(--gold-dark, var(--gold)));
}

html.dl-accent--yellow {
  --gold: var(--accent-yellow, var(--yellow, #E6A739));
  --color-label-accent: var(--accent-yellow, var(--yellow, var(--gold)));
  --color-label-on-dark: var(--accent-yellow, var(--yellow, var(--gold)));
  --color-overline-accent: var(--accent-yellow, var(--yellow, var(--gold)));
  --color-overline-on-dark: var(--accent-yellow, var(--yellow, var(--gold)));
  --overline-rule-color: var(--accent-yellow, var(--yellow, var(--gold)));
  --venn-c3: var(--accent-yellow, var(--yellow, var(--gold)));
  --venn-c4: color-mix(in srgb, var(--accent-yellow, var(--yellow, #E6A739)) 72%, var(--black, #1A1916));
  --venn-center-fill: var(--accent-yellow, var(--yellow, var(--gold)));
  --venn-center-ink: var(--black, #1A1916);
  --holistic-c2: var(--accent-yellow, var(--yellow, var(--gold)));
  --holistic-c3: color-mix(in srgb, var(--accent-yellow, var(--yellow, #E6A739)) 72%, var(--black, #1A1916));
}

html.dl-accent--green .dl-header-cta,
html.dl-accent--green .btn-dark {
  background: var(--green, var(--gold));
  color: var(--white, #fff);
}

html.dl-accent--green .ctabtn {
  background: var(--green, var(--gold));
  color: var(--white, #fff);
}

html.dl-accent--yellow .dl-header-cta,
html.dl-accent--yellow .btn-dark {
  background: var(--accent-yellow, var(--yellow, var(--gold)));
  color: var(--black, #1A1916);
}

html.dl-accent--yellow .ctabtn {
  background: var(--accent-yellow, var(--yellow, var(--gold)));
  color: var(--black, #1A1916);
}