/* CEO coaching pages: The Full-Time CEO Test and Become a full-time CEO. Load after service-pages.css.
   The package's header rules are left out: every page uses the site's one header and footer (site-chrome.css). */
/* ===== CEO coaching pages: loaded after style.css ===== */

/* focus stays visible on lime cards that sit in dark sections */
.pt-card :focus-visible,.ticket :focus-visible{outline-color:var(--ink)}

/* big type wraps in even lines, so no word sits alone on the last line */
.hook span,.hook em,.display,.talk,.book h2,.r-t,.t-name{text-wrap:balance}

/* hero: the line that names what you get */
.facts .facts-k{padding:6px 0;border:0;color:var(--muted);font-weight:700}

/* hero: what happens to your email and answers, right under the main button (hero() 'assure').
   Wide screens: under both buttons. Phones, where the buttons stack: between them, so it stays on the first screen. */
.assure{order:1;flex-basis:100%;display:grid;gap:7px;max-width:560px}
.assure li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:10px;font-size:15.5px;line-height:1.45;color:var(--soft)}
.assure svg{margin-top:3px;color:var(--lemon)}
.assure~.cta-note{order:2;max-width:560px;text-wrap:pretty}
@media (max-width:540px){.assure{order:0}}
/* past client proof under the buttons (style.css .hero-proof): its label reads first */
.hero-proof b{color:var(--paper)}

/* hero visual: your company on paper, and in practice */
.org{position:relative;margin:0;padding:22px 24px 24px;border:1px solid var(--line);border-radius:10px;background:var(--panel);box-shadow:0 40px 70px -40px rgba(0,0,0,.7);--oc:var(--red)}
.org>input{position:absolute;top:0;left:0;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.org-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}
.org-tog{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:6px;background:var(--ink)}
.org-tog label{display:block;padding:7px 12px;border-radius:4px;font-size:14px;font-weight:700;line-height:1.2;color:var(--soft);cursor:pointer;transition:background .2s,color .2s}
.org-tog label:hover{color:var(--paper)}
#org-paper:checked~.org-top [for="org-paper"],#org-real:checked~.org-top [for="org-real"]{background:var(--lemon);color:var(--ink)}
#org-paper:focus-visible~.org-top [for="org-paper"],#org-real:focus-visible~.org-top [for="org-real"]{outline:2px solid var(--lemon);outline-offset:2px}
.org .o-paper{display:none}
#org-paper:checked~* .o-paper{display:block}
#org-paper:checked~* .o-real{display:none}
#org-paper:checked~.org-chart{--oc:#5f685f}
.org-chart{margin-top:24px}
.org-you{position:relative;z-index:1;width:min(250px,72%);margin:0 auto 30px;padding:14px 16px 16px;border:2px solid var(--oc);border-radius:8px;background:var(--ink);text-align:center;transition:border-color .3s,box-shadow .3s}
#org-real:checked~.org-chart .org-you{box-shadow:0 0 0 6px rgba(227,38,82,.14)}
.org-you b{display:block;font-family:var(--display);font-weight:400;font-size:36px;line-height:1;text-transform:uppercase}
.org-you .o-paper{margin-top:6px;font-size:14px;font-weight:700;color:var(--muted)}
.org-badge{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:5px 10px;border-radius:2px;background:rgba(227,38,82,.16);border:1px solid rgba(227,38,82,.5);color:#ff9fb4;font-size:13.5px;font-weight:700;line-height:1.2}
.org-badge i{width:8px;height:8px;border-radius:50%;background:var(--red)}
/* the line between the team and you; in practice an arrow points into you */
.org-you::after{content:"";position:absolute;left:50%;top:100%;width:2px;height:32px;margin-left:-1px;background:var(--oc);transform-origin:50% 100%}
.org-you::before{content:"";position:absolute;left:50%;top:100%;margin:2px 0 0 -6px;border:6px solid transparent;border-top:0;border-bottom:9px solid var(--oc);z-index:1}
#org-paper:checked~.org-chart .org-you::before{display:none}
.org-team{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr);row-gap:12px}
.org-n{position:relative;padding:12px 14px 13px;border:1px solid var(--line);border-radius:8px;background:#1a1f1b}
.org-n.l{grid-column:1}
.org-n.r{grid-column:3}
.org-n b{display:block;font-size:13px;font-weight:700;line-height:1.3;color:var(--muted)}
.org-n .o-real{display:block;margin-top:5px;font-family:var(--serif);font-weight:300;font-size:18px;line-height:1.2;letter-spacing:-.01em;color:var(--paper)}
.org-n .o-paper{margin-top:5px;font-size:15.5px;line-height:1.35;color:var(--soft)}
#org-paper:checked~.org-chart .org-n b{color:var(--paper)}
/* each person is joined to the line in the middle; left cards draw that line */
.org-c{position:absolute;top:50%;width:20px;height:2px;margin-top:-1px;background:var(--oc)}
.l>.org-c{left:100%;transform-origin:0 50%}
.r>.org-c{right:100%;transform-origin:100% 50%}
.org-c::after{content:"";position:absolute;top:50%;margin-top:-5px;border:5px solid transparent;display:none}
.l>.org-c::after{left:-1px;border-left:0;border-right:7px solid var(--oc)}
.r>.org-c::after{right:-1px;border-right:0;border-left:7px solid var(--oc)}
#org-paper:checked~.org-chart .org-c::after{display:block}
.org-n.l::before{content:"";position:absolute;left:calc(100% + 19px);top:-6px;bottom:-6px;width:2px;background:var(--oc);transform-origin:50% 100%}
.org-n.l:first-child::before{top:0}
.org-n.l:nth-last-child(2)::before{bottom:50%}
.org-cap{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font-family:var(--serif);font-weight:300;font-size:clamp(20px,1rem + .4vw,24px);line-height:1.2}
/* one moment on load: the asks arrive, the lines draw in toward you */
@keyframes org-x{from{transform:scaleX(0)}}
@keyframes org-y{from{transform:scaleY(0)}}
@keyframes org-in{from{opacity:0;transform:translateY(8px)}}
#org-real:checked~.org-chart .org-n .o-real{animation:org-in .5s var(--ease) calc(.25s + var(--i) * .12s) both}
#org-real:checked~.org-chart .org-c{animation:org-x .3s var(--ease) calc(.45s + var(--i) * .12s) both}
#org-real:checked~.org-chart .org-n.l::before{animation:org-y .28s linear calc(1.05s + (4 - var(--i)) * .07s) both}
#org-real:checked~.org-chart .org-you::after{animation:org-y .2s linear 1.45s both}
#org-real:checked~.org-chart .org-you::before{animation:org-in .3s var(--ease) 1.6s both}
#org-real:checked~.org-chart .org-badge{animation:org-in .4s var(--ease) 1.7s both}
@media (max-width:720px){
  .org{padding:18px 14px 18px}
  .org-chart{margin-top:20px}
  .org-you{margin-bottom:26px}
  .org-you::after{height:28px}
  .org-team{grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr);row-gap:10px}
  .org-c{width:11px}
  .org-n.l::before{left:calc(100% + 10px);top:-5px;bottom:-5px}
  .org-n{padding:10px 10px 11px}
  .org-n b{font-size:12.5px}
  .org-n .o-real{font-size:16.5px}
  .org-n .o-paper{font-size:14.5px}
  .org-cap{margin-top:16px;padding-top:14px}
}

/* patterns: pick the line you'd say, see the pattern in the lime card */
.pt{margin-top:44px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:24px;align-items:start}
.pt-list{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);overflow:hidden}
.pt-tab{display:block;width:100%;padding:16px 22px 15px;border:0;border-top:1px solid var(--line);background:none;color:var(--paper);text-align:left;cursor:pointer;transition:background .2s}
.pt-tab:first-child{border-top:0}
.pt-tab:hover{background:#151916}
.pt-tab:focus-visible{outline-offset:-3px}
.pt-line{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(20px,1rem + .4vw,24px);line-height:1.2;letter-spacing:-.012em}
.pt-name{display:block;margin-top:5px;font-size:14px;font-weight:700;line-height:1.3;color:var(--muted)}
.pt-tab[aria-selected="true"]{background:var(--panel-2);box-shadow:inset 4px 0 0 var(--lemon)}
.pt-tab[aria-selected="true"] .pt-name{color:var(--lemon)}
.pt-out{position:sticky;top:24px}
.pt-card{padding:30px;border-radius:var(--r);background:var(--lemon);color:var(--ink)}
.pt-card .r-t{margin-top:10px}
.pt-q{display:none;margin-top:10px;font-family:var(--serif);font-weight:300;font-size:22px;line-height:1.2}
.pt-two{margin-top:18px;border-top:1px solid rgba(8,10,9,.3)}
.pt-two div{padding:14px 0;border-bottom:1px solid rgba(8,10,9,.18)}
.pt-two h4{font-size:15px;font-weight:700;line-height:1.3}
.pt-two p{margin-top:4px;font-size:17px;line-height:1.5}
.pt-card .btn{margin-top:22px}
.pt-note{margin-top:24px;max-width:760px}
@media (max-width:1180px){.pt{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:980px){
  .pt{grid-template-columns:minmax(0,1fr);gap:18px}
  .pt-out{position:static}
  .pt-list{display:flex;flex-wrap:wrap;gap:8px;border:0;background:none;overflow:visible}
  .pt-tab,.pt-tab:first-child{width:auto;padding:10px 13px;border:1px solid var(--muted-2);border-radius:4px}
  .pt-line,.pt-the{display:none}
  .pt-name{margin:0;font-size:15px;color:var(--paper)}
  .pt-tab[aria-selected="true"]{background:var(--lemon);border-color:var(--lemon);box-shadow:none}
  .pt-tab[aria-selected="true"] .pt-name{color:var(--ink)}
  .pt-q{display:block}
  .pt-card{padding:24px 22px}
}

/* example report */
.rep{position:relative;max-width:900px;margin:44px auto 0;padding:clamp(26px,4vw,52px) clamp(20px,4.5vw,60px);border-radius:4px;background:var(--card);color:var(--ink);box-shadow:0 1px 0 var(--paper-line),0 40px 70px -40px rgba(8,10,9,.45)}
.rep::before{content:"";position:absolute;top:0;right:0;width:46px;height:46px;background:linear-gradient(225deg,var(--paper) 50%,var(--paper-2) 50%)}
.rep-h{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding:0 40px 18px 0;border-bottom:2px solid var(--ink)}
.rep-stamp{padding:6px 10px 5px;border:2px solid var(--red-btn);border-radius:3px;color:var(--red-btn);font-size:13px;font-weight:700;line-height:1.2;letter-spacing:.12em;text-transform:uppercase;transform:rotate(-3deg)}
.rep-title{font-family:var(--display);font-weight:400;font-size:clamp(28px,1rem + 1.2vw,38px);line-height:1;text-transform:uppercase}
.rep-meta{margin-top:5px;font-size:15px;line-height:1.4;color:var(--ink-soft)}
.rep-part{display:grid;grid-template-columns:44px minmax(0,1fr);gap:0 14px;padding:26px 0;border-bottom:1px solid var(--paper-line)}
.rep-part:last-child{padding-bottom:0;border-bottom:0}
.rep-n{font-family:var(--display);font-size:28px;line-height:1;color:var(--red-btn)}
.rep-part h3{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;font-size:20px;line-height:1.3}
.rep-part h3 small{font-family:var(--serif);font-style:italic;font-weight:300;font-size:19px;color:var(--ink-soft)}
.rep-big{margin-top:12px;font-family:var(--display);font-weight:400;font-size:clamp(42px,1.2rem + 2.2vw,62px);line-height:.95;text-transform:uppercase}
.rep-big.sm{font-size:clamp(34px,1rem + 1.6vw,46px)}
.rep-say{margin-top:12px;font-family:var(--serif);font-weight:300;font-size:clamp(22px,1rem + .55vw,27px);line-height:1.22;letter-spacing:-.012em}
.rep-p{margin-top:10px;max-width:680px;font-size:17px;line-height:1.55;color:var(--ink-soft);text-wrap:pretty}
.rep-p b{color:var(--ink)}
.rep-cost{margin-top:14px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.rep-cost div{padding:16px 16px 18px;border-radius:4px;background:var(--paper)}
.rep-cost b{display:block;font-size:15px;line-height:1.3}
.rep-cost p{margin-top:6px;font-size:15.5px;line-height:1.45;color:var(--ink-soft)}
/* example numbers, from the two number questions; the third cost has no number, so it runs full width */
.rep-cost .rep-num{margin:0 0 6px;font-family:var(--display);font-weight:400;font-size:clamp(36px,1rem + 1.6vw,50px);line-height:.95;text-transform:uppercase;color:var(--red-btn)}
.rep-cost .rep-wide{grid-column:1/-1}
.rep-band{margin-top:14px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:14.5px;font-weight:700;color:var(--ink-soft)}
.rep-tog{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--paper-line);border-radius:6px;background:var(--paper)}
.rep-tog button{padding:7px 12px;border:0;border-radius:4px;background:none;font-size:14.5px;font-weight:700;line-height:1.2;color:var(--ink-soft);cursor:pointer}
.rep-tog button:hover{color:var(--ink)}
.rep-tog button[aria-selected="true"]{background:var(--ink);color:var(--paper)}
.rep-dl{display:grid;grid-template-columns:128px minmax(0,1fr)}
.rep-dl dt,.rep-dl dd{padding:13px 0;border-top:1px solid var(--paper-line);font-size:16.5px;line-height:1.5}
.rep-dl dt{padding-right:18px;font-weight:700}
.rep-dl dd{color:var(--ink-soft)}
.rep-kl{margin-top:14px;border-bottom:1px solid var(--paper-line)}
.rep-kl>.rep-dl:first-of-type dt,.rep-kl>.rep-dl:first-of-type dd{border-top-color:var(--ink)}
.rep-dl q{font-family:var(--serif);font-weight:300;font-size:20px;line-height:1.3;color:var(--ink);quotes:"\201C" "\201D"}
.rep-next{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}
.rep-cta{margin-top:30px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 22px;text-align:center}
.rep-cta p{font-size:17px;color:var(--ink-soft)}
@media (max-width:720px){
  .rep-part{grid-template-columns:minmax(0,1fr);gap:8px}
  .rep-cost{grid-template-columns:minmax(0,1fr)}
  .rep-dl{grid-template-columns:minmax(0,1fr)}
  .rep-dl dt{padding-bottom:0}
  .rep-dl dd{padding-top:2px;border-top:0}
  .rep-h{padding-right:30px}
}

/* stages: what you hand over first depends on your revenue */
.stages{margin-top:36px;display:grid;grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);align-items:stretch;border-top:2px solid var(--ink)}
.stage{padding:24px 0 6px}
.stage-band{font-family:var(--display);font-weight:400;font-size:clamp(40px,1.2rem + 2.4vw,64px);line-height:.95;text-transform:uppercase;color:var(--red-btn)}
.stage-move{margin-top:10px;max-width:560px;font-family:var(--serif);font-weight:300;font-size:clamp(24px,1rem + .9vw,32px);line-height:1.18;letter-spacing:-.015em}
.stage-arrow{align-self:center;justify-self:center;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--paper)}
@media (max-width:720px){
  .stages{grid-template-columns:minmax(0,1fr)}
  .stage-arrow{justify-self:start;margin-top:8px;transform:rotate(90deg)}
}
/* under the stages, on the test page: most founders are a bit of both */
.stage-both{margin-top:18px;padding-top:16px;border-top:1px solid var(--paper-line);font-size:18px;line-height:1.5;color:var(--ink-soft)}
.stage-both b{color:var(--ink)}

/* how it works: what you leave the call with, and the program's terms under the steps */
.step .leave-k{color:var(--paper)}
.after-main{flex:1 1 520px;max-width:780px}
.after-dl{margin-top:16px;display:flex;flex-wrap:wrap;gap:12px 34px}
.after-dl dt{font-size:13px;font-weight:700;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.after-dl dd{margin-top:4px;font-size:16.5px;font-weight:700;line-height:1.35;color:var(--paper)}

/* who's behind the test */
.jose{margin-top:40px;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:36px 56px;align-items:start}
.jose .bio2{margin-top:0}
.jose-proof{display:grid;gap:14px}
.jose-proof>.ink-k{grid-column:1/-1}
.ink .qcard{background:var(--panel);border:1px solid var(--line)}
.win{padding:28px 30px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.win-num{font-family:var(--display);font-weight:400;font-size:clamp(40px,1rem + 2vw,56px);line-height:.95;text-transform:uppercase;color:var(--lemon)}
.win-t{margin-top:12px;font-size:17px;line-height:1.5;color:var(--soft)}
.win figcaption{margin-top:18px;display:flex;align-items:center;gap:14px;font-size:14.5px;line-height:1.4;color:var(--muted)}
.win figcaption b{display:block;font-size:15.5px;color:var(--paper)}
/* a client's words, under the number from their own company (test page) */
.win-q{margin-top:18px;padding-left:16px;border-left:2px solid var(--lemon)}
.win-q p{font-family:var(--serif);font-weight:300;font-size:clamp(20px,1rem + .3vw,23px);line-height:1.28;letter-spacing:-.01em;color:var(--paper)}
@media (max-width:1180px){.jose{grid-template-columns:minmax(0,1fr)}.jose-proof{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}}

/* the last call to action: the test as a ticket, the call as the second choice */
.start .sec-in{align-items:center}
.start h2 em{font-style:normal;color:var(--red)}
.start-call{margin-top:30px;padding-top:22px;border-top:1px solid var(--line);max-width:520px}
.start-call p{font-size:17px;line-height:1.5;color:var(--soft)}
.start-call b{color:var(--paper)}
.start-call .btn{margin-top:16px}
.start .ticket{width:100%;max-width:520px;justify-self:end}
.start .t-bot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 20px}
.start .t-bot .btn{margin-top:0}
@media (max-width:1180px){.start .ticket{justify-self:start}}