/* =====================================================================
   TiltLab, makepill edition: phone pass.
   Linked with media="(max-width:860px)", so nothing in here can touch the desktop layout.
   One type scale for every page (hero excluded):
     section heading 24px  ·  card / item title 17px  ·  body 14px  ·  small 12px
   ===================================================================== */

/* ---------- one scale ---------- */
main .h2,main .copy h2,main .final h2,main .start-copy .h2,main .after-quote h2,main .sec-head .h2{font-size:24px;line-height:1.12;letter-spacing:-.035em}
main .lede,main .chain-note,main .lead,main .emph,main .after-quote p,main .offer p:not(.meta),main .sub,
main .value-list p,main .phase-list li,main .doc-list li,main .get p,main .acc-a p,main .credit-note,
main .legal-body p,main .legal-body li,main .confirm-box p,main .before-call p,main .deeper p,main .diagnosis,
main .impact-card p,main .persona-result-list span,main .apply-side .lede{font-size:14px;line-height:1.5}
main .cell h3,main .offer h3,main .persona-toggle,main .get-t,main .value-list strong,main .phase-name,
main .deeper h3,main .legal-body h2,main .leak-name,main .impact-card h4,main .apply-price{font-size:17px;line-height:1.2;letter-spacing:-.025em}
main .quote blockquote{font-size:14px;line-height:1.4}
main .persona-result-list strong{font-size:14px}
main .acc-q{font-size:15px;padding:16px 0}
main .meta,main .who,main .note,main .eyebrow,main .mono-label,main .booking-risk,main .form-micro,main .legal-updated{font-size:12px}
main .who b{font-size:13px}
/* heroes keep their own, slightly larger lede */
main .coach-copy .lede,main .call-main .lede{font-size:15px;line-height:1.45}

/* ---------- header on a phone: no bar, only the logo (home) and the three-line burger ---------- */
.top{background:transparent;border-bottom:0;-webkit-backdrop-filter:none;backdrop-filter:none}
.top .mark{text-shadow:0 1px 14px rgba(15,15,15,.75)}
.menu-btn{width:44px;height:44px;display:grid;place-items:center;margin-right:-10px;padding:0;text-shadow:0 1px 14px rgba(15,15,15,.75)}
.menu-btn svg{display:block}

/* the last call-to-action block: the beach lunch stays visible under the button */
.finale>.final,.finale>.start{padding-top:56px;padding-bottom:180px}
.finale .final-bg,.finale .start-bg{overflow:hidden}
.finale .final-bg img,.finale .start-bg img{object-position:74% 50%;transform:translateY(10%)}
.finale .final-bg::after,.finale .start-bg::after{background:linear-gradient(var(--bg),rgba(15,15,15,0) 24%,rgba(15,15,15,0) 68%,var(--bg) 100%)}

/* ---------- burger menu ---------- */
.sheet nav a{font-size:16px;line-height:1.2;letter-spacing:-.01em;padding:10px 0}
.sheet .x,.menu-btn{font-size:13px}
/* a menu item lights up lime under the cursor and while it is being pressed */
.sheet nav a,.sheet .x,.menu-btn{-webkit-tap-highlight-color:transparent;transition:color .2s var(--ease)}
.sheet nav a:hover,.sheet nav a:active,.sheet nav a:focus-visible,.sheet .x:hover,.sheet .x:active,.menu-btn:hover,.menu-btn:active{color:var(--acid)}
.sheet .pill{width:100%;justify-content:space-between}

/* ---------- buttons: one height, one size ---------- */
.btn,.pill,.pill--lg{height:48px;font-size:15px}
.btn svg{width:32px;height:32px}
main .btn.btn--line,main .pill--ghost{font-weight:500}

/* ---------- small helpers used by the markup ---------- */
br.m-br{display:inline}
.m-hide{display:none}
.br-m{display:block}

/* ---------- home: "What shapes your performance" as 3 x 2, tap to open ---------- */
.bento{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.cell:nth-child(n){grid-column:auto;min-height:150px;padding:14px;justify-content:flex-end}
.cell h3{margin:0;font-size:15px;line-height:1.15;letter-spacing:-.02em}
.cell p{max-height:0;margin:0;overflow:hidden;opacity:0;font-size:12.5px;line-height:1.4;max-width:none;transition:max-height .45s var(--ease),opacity .3s,margin .3s}
.cell.open p{max-height:11em;margin-top:8px;opacity:1}
.cell{cursor:pointer;-webkit-tap-highlight-color:transparent}

/* ---------- home: "Your day doesn't end" with the video as the block background ---------- */
.after{position:relative;isolation:isolate;overflow:hidden;min-height:440px;display:flex;align-items:flex-end;padding:0 0 22px}
.after .grid{width:min(100% - 2*var(--m),var(--maxw))}
.after-clip{position:absolute;inset:0;z-index:-2;grid-column:auto;max-width:none;margin:0;aspect-ratio:auto;border-radius:0}
.after-clip video{width:100%;height:100%;object-fit:cover}
.after::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(15,15,15,.9),rgba(15,15,15,.3) 55%,rgba(15,15,15,.45))}
.after-quote{grid-column:1/-1;padding:0 0 0 12px}
main .after-quote h2{font-size:18px;line-height:1.15}
main .after-quote p{margin-top:6px;font-size:12.5px;color:rgba(242,241,237,.8)}

/* ---------- home: about. The name sits on the photo top-right, the poker line bottom-left ---------- */
#about .copy{display:contents}
#about .copy>*{grid-column:1/-1}
#about .portrait{grid-row:1;position:relative;margin-bottom:0}
#about .portrait::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(15,15,15,.6),rgba(15,15,15,0) 30%,rgba(15,15,15,0) 55%,rgba(15,15,15,.88));pointer-events:none}
#about .copy h2{grid-row:1;align-self:start;justify-self:end;margin:14px 16px 0 0;position:relative;z-index:1;font-size:20px;text-align:right}
#about .role{grid-row:1;align-self:start;justify-self:end;margin:40px 16px 0 0;position:relative;z-index:1;font-size:12px;text-align:right;color:rgba(242,241,237,.8)}
#about .role+.lead{grid-row:1;align-self:end;justify-self:start;margin:0 16px 14px;position:relative;z-index:1;max-width:none;font-size:11.5px;line-height:1.35;color:var(--fg)}
#about .role+.lead+.lead{margin-top:24px}

/* ---------- performance review ---------- */
.booking-note{margin-top:8px;text-align:center}
.cell:nth-child(1) img{object-position:58% 50%!important}
.cell:nth-child(2) img{object-position:50% 30%!important}
.cell:nth-child(3) img{object-position:85% 50%!important}
.cell:nth-child(4) img{object-position:40% 50%!important}
.cell:nth-child(5) img{object-position:65% 50%!important}
.cell:nth-child(6) img{object-position:52% 50%!important}
.call-host{display:none}
.booking-risk .dot{display:none}
main .booking-risk,main .booking-risk a{display:block;color:var(--dim);border:0;font-size:12px;line-height:1.5}
.how .h2{margin-bottom:20px}
main .value-list>li,main .plan-phase{padding:14px 0}
main .value-list .num,main .phase-num{font-size:12px;width:52px}
main .value-list strong,main .phase-name{font-size:17px}
main .phase-result{font-size:13px;line-height:1.35;margin-top:4px;color:var(--dim)}
main .phase-name{display:block}
main .value-list p,main .phase-list li,main .doc-list li{font-size:13px;line-height:1.45}
main .inline-link{font-size:12px}
main .value-credit{font-size:12px}

/* ---------- coaching ---------- */
.coach-host img{filter:grayscale(.15) brightness(.72) contrast(1.05)}
.coach-host::after{background:linear-gradient(rgba(15,15,15,.66),rgba(15,15,15,.58) 60%,var(--bg))}
.coach-meta{flex-direction:column;flex-wrap:nowrap;gap:6px;margin-bottom:24px}
.coach-meta li{display:flex;align-items:baseline;gap:12px;font-size:14px;white-space:nowrap}
.coach-meta span{display:inline-block;width:68px;margin:0;font-size:12px}
.persona-result-card{padding:16px}
.persona-result-list li{padding:10px 0}
.get{padding:16px 0;grid-template-columns:36px 1fr}
.get .ico svg{width:24px;height:24px}
/* the "what you get" text appears as each item scrolls into the middle of the screen */
.gets .get p{max-height:0;margin-top:0;opacity:0;overflow:hidden;transition:max-height .5s var(--ease),opacity .4s,margin .4s}
.gets .get.show p{max-height:7em;margin-top:4px;opacity:1}
.q-dots{display:none}
.imp-dots{display:none}
.diagnosis{display:none}
.gauge{margin-bottom:12px}
.capture .ml-form-embedSubmit{flex:1 1 100%;display:flex;justify-content:center}
.capture .ml-form-formContent .btn{width:auto;min-width:200px}
.apply-form{padding:18px}

/* ---------- assessment ---------- */
.equation{flex-wrap:nowrap;gap:4px;margin-bottom:28px;white-space:nowrap}
.equation .node,.equation .node:last-of-type{padding:0;box-shadow:none;background:none;color:var(--fg);font-size:clamp(10px,3.1vw,12px)}
.equation .node:last-of-type{color:var(--acid)}
.equation .arrow{font-size:clamp(10px,3.1vw,12px)}
.trust{font-size:12px;line-height:1.5}
.q-text{font-size:15px;line-height:1.3;letter-spacing:-.02em}
.block-tag{font-size:12px}
.option{padding:12px 14px;gap:12px;font-size:13px;line-height:1.35}
.option .opt-index{width:24px;height:24px;font-size:12px}
.score-eyebrow,.section-label{font-size:12px}
.score-number{font-size:72px}
.leak-row{padding:14px 16px}
.leak-detail{font-size:12px;line-height:1.45}
.review-link{font-size:13px;line-height:1.5}
.review-link a{display:block;margin-top:2px}
.impact-card{padding:16px}
.impact-card p{font-size:12.5px;line-height:1.45}
.protocol-strip{font-size:12px;line-height:1.5}
.protocol-strip .ps-i{display:block;margin-bottom:6px;color:var(--dim)}
.protocol-strip .ps-sep{display:none}
.protocol-strip .ps-i span{color:var(--acid)}
.result-inner{display:flex;flex-direction:column}
.result-inner>*{order:0}
.result-inner .capture{order:20}
.result-inner .restart-link{order:30}
.premium-line{order:40;margin-top:28px;font-size:11px;color:var(--dim);opacity:.65;text-align:center;letter-spacing:0}
.capture{padding:20px}
.capture>p,.capture-fine{font-size:13px}