/* The Exit Pack: shared design system, loaded by all 18 pages after styles.css.
   The homepage adds home.css on top. Inner pages carry body.inner, and the five
   pillar guides also carry body.pillar.
   Safety rule, same as home.css: nothing here hides content by default. The
   only hiding rule is .ep-pre, set by an inline head script only when JS runs
   and motion is allowed, and cleared by system.js or by a 2.6s timeout. */

/* ---------- self-hosted display face (SIL OFL 1.1, see /assets/fonts/OFL.txt) ---------- */
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/instrument-serif-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{--ease:cubic-bezier(.22,1,.36,1)}
html.dark{--acc-2:#8EC1FF}

/* ---------- shared: focus, buttons, header ---------- */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--acc,#5BA4FF);outline-offset:3px;border-radius:8px}
.band a:focus-visible,.band button:focus-visible,.band input:focus-visible{outline-color:#fff}
.btn{transition:transform .5s var(--ease),box-shadow .5s var(--ease),background .3s ease,border-color .3s ease,color .3s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(0,102,204,.7)}
.btn:active{transform:translateY(0)}
.site-head nav a.lnk[aria-current="page"]{color:var(--text,#fff)}
.site-head nav a.lnk[aria-current="page"]::after{right:0}

/* reading progress (pillar and long pages; built by system.js) */
.sys-progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:60;pointer-events:none;background:transparent}
.sys-progress span{display:block;height:100%;background:linear-gradient(90deg,#0066cc,var(--acc,#5BA4FF));transform-origin:0 50%;transform:scaleX(0)}

/* intro pre-state (JS and motion only) */
.ep-pre body.inner main h1,.ep-pre body.inner main .kicker,.ep-pre body.inner .sec:first-child .eyebrow,.ep-pre body.inner>.sec h1{opacity:0}

/* =====================================================================
   INNER PAGES
   ===================================================================== */
body.inner{overflow-x:hidden}
body.inner .wrap{max-width:1200px;padding:0 28px}
@media(max-width:600px){body.inner .wrap{padding:0 18px}}
body.inner .sec{padding:96px 0}
@media(max-width:820px){body.inner .sec{padding:64px 0}}
body.inner .eyebrow,body.inner .kicker,body.inner .article .kicker,body.inner .cta-box p.eyebrow{letter-spacing:.16em;font-size:12px;font-weight:700;text-transform:uppercase;margin-bottom:18px}

/* page title block */
body.inner h1{font-size:clamp(40px,5.2vw,72px);line-height:1.02;letter-spacing:-.028em}
body.inner .article h1{margin-bottom:22px}
body.inner .article .meta,body.inner main>.sec:first-child .meta{font-size:13.5px;line-height:1.6;color:var(--mute);margin-bottom:34px;padding-bottom:26px;border-bottom:1px solid var(--line)}
body.inner .lead{font-size:clamp(17px,1.5vw,20px);line-height:1.6}

/* long-form reading */
body.inner .article{max-width:720px}
body.inner .article p,body.inner .article li{font-size:17.5px;line-height:1.75}
body.inner .article p{margin-bottom:18px}
body.inner .article h2{font-size:clamp(30px,3.2vw,44px);line-height:1.08;letter-spacing:-.02em;margin:72px 0 18px;scroll-margin-top:100px}
body.inner .article h3{font-size:20px;margin:34px 0 10px;scroll-margin-top:100px}
body.inner .article a:not(.btn){text-decoration:underline;text-decoration-color:rgba(91,164,255,.45);text-underline-offset:3px;transition:text-decoration-color .3s ease,color .3s ease}
body.inner .article a:not(.btn):hover{text-decoration-color:var(--acc)}
body.inner .article .callout{position:relative;background:var(--ink-3);border:1px solid var(--line);border-left:0;border-radius:16px;padding:24px 28px 24px 32px;margin:32px 0;overflow:hidden}
body.inner .article .callout::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--acc),#0066cc)}
body.inner .article .callout p{font-size:17px;color:var(--text)}
body.inner .article .callout p:last-child{margin-bottom:0}
body.inner .article figure{margin:40px 0}
body.inner .article figure img{border-radius:14px}

/* "skip to the kit" note near the top of each guide */
body.inner .jump{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 22px;background:linear-gradient(90deg,rgba(0,102,204,.16),rgba(0,102,204,.04));border:1px solid rgba(91,164,255,.28);border-left:1px solid rgba(91,164,255,.28);border-radius:16px;padding:18px 22px;margin:0 0 40px}
body.inner .jump p{margin:0!important;font-size:15.5px!important;line-height:1.55!important;color:var(--text-2);flex:1 1 320px}
body.inner .jump a{font-weight:700;white-space:normal;text-decoration:none!important;display:inline-flex;align-items:center;min-height:44px}
body.inner .jump a:hover{color:var(--acc-2)}

/* ---------- the kit offer (pillar pages) ---------- */
body.inner .cta-box{position:relative;overflow:hidden;text-align:left;border-radius:24px;padding:40px 44px;margin:64px 0 0;border:1px solid rgba(91,164,255,.4);background:radial-gradient(80% 80% at 100% 100%,rgba(0,102,204,.26),rgba(0,102,204,0) 70%),var(--ink-3);box-shadow:0 30px 70px -40px rgba(0,0,0,.9)}
body.inner .cta-box h2,body.inner .cta-box h3{font-family:'Instrument Serif',Georgia,serif;font-weight:400;letter-spacing:-.02em;font-size:clamp(30px,3.4vw,46px);line-height:1.05;margin:0 0 14px;color:var(--text)}
body.inner .cta-box p{font-size:16.5px;line-height:1.65;color:var(--text-2);margin:0 0 20px}
body.inner .cta-box .btn{min-height:52px;display:inline-flex;align-items:center;justify-content:center;padding:14px 28px;font-size:16px}
body.inner .cta-box p:has(>.btn){margin-bottom:12px}
body.inner .cta-box .meta{border:0!important;padding:0!important;margin:0 0 4px!important;color:var(--text)!important;font-size:15px!important;font-weight:600}
body.inner .cta-box .pay-note,body.inner .cta-box .fine{font-size:13px!important;color:var(--mute)!important;margin:0!important}
body.inner .cta-box.offer{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:40px;align-items:center}
body.inner .offer-page{position:relative;align-self:stretch;min-height:300px;margin:-40px -44px -40px 0}
body.inner .offer-page img{position:absolute;left:0;top:46px;width:120%;max-width:none;height:auto;border-radius:8px;background:#fff;box-shadow:0 30px 60px -20px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.08);transform:rotate(-4deg);transform-origin:0 0;transition:transform .9s var(--ease)}
body.inner .cta-box.offer:hover .offer-page img{transform:rotate(-2deg) translateY(-10px)}
/* when the offer sits in its own section, give it the full column */
body.inner main>.sec>.wrap>.cta-box{max-width:980px;margin:0 auto}
@media(max-width:760px){
  body.inner .cta-box{padding:30px 22px;border-radius:20px}
  body.inner .cta-box.offer{grid-template-columns:1fr}
  body.inner .offer-page{display:none}
  body.inner .cta-box .btn{width:100%}
}

/* ---------- section heads, FAQ, band, cards ---------- */
body.inner .head.center{margin-bottom:44px}
body.inner .head h2,body.inner .sec>.wrap>h2{font-size:clamp(34px,4.2vw,56px);line-height:1.04;letter-spacing:-.025em}
body.inner .faq details{border-radius:16px;margin-bottom:12px;transition:border-color .4s ease}
body.inner .faq details:hover{border-color:var(--line-2)}
body.inner .faq details[open]{border-color:rgba(91,164,255,.35)}
body.inner .faq summary{padding:22px 24px;font-size:16.5px;min-height:44px}
body.inner .faq .a{padding:18px 24px 22px}
body.inner .faq .a p{font-size:16px;line-height:1.7}
body.inner .band{position:relative;overflow:hidden;border-radius:26px;padding:56px;gap:48px;background:radial-gradient(60% 90% at 100% 0%,rgba(255,255,255,.14),rgba(255,255,255,0) 60%),linear-gradient(135deg,#0066cc,#0a4c96)}
body.inner .band h1,body.inner .band h2{font-size:clamp(32px,3.4vw,48px);line-height:1.05}
body.inner .band input{min-height:52px;background:#fff!important;color:#0B1626!important;border:0!important}
body.inner .band input::placeholder{color:#566573}
body.inner .band .btn{min-height:52px}
@media(max-width:760px){body.inner .band{padding:32px 22px;border-radius:20px}}
body.inner .rev{border-radius:18px;transition:transform .6s var(--ease),border-color .4s ease}
body.inner .rev:hover{transform:translateY(-3px);border-color:var(--line-2)}
body.inner .split{gap:64px}
body.inner .split h2{font-size:clamp(32px,3.6vw,50px);line-height:1.05;margin-bottom:10px}
body.inner .split ul li{padding:14px 0 14px 32px;border-top:1px solid var(--line)}
body.inner .split ul li:before{top:19px;background:var(--acc)}
body.inner .split img{border-radius:20px}
@media(max-width:820px){body.inner .split{gap:28px}}

/* ---------- pillar reading layout: contents rail + article (built by system.js) ---------- */
body.pillar .reading{display:grid;grid-template-columns:230px minmax(0,720px);gap:72px;justify-content:center}
body.pillar .reading .article{margin:0}
body.pillar .toc{position:sticky;top:104px;align-self:start;max-height:calc(100vh - 130px);overflow:auto;padding-top:8px}
body.pillar .toc-label{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:14px}
body.pillar .toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--line-2)}
body.pillar .toc li{margin:0}
body.pillar .toc ol a{display:block;position:relative;padding:8px 0 8px 18px;margin-left:-1px;border-left:2px solid transparent;color:var(--mute);font-size:14px;line-height:1.4;text-decoration:none;transition:color .4s ease,border-color .4s ease}
body.pillar .toc ol a:hover{color:var(--text)}
body.pillar .toc ol a[aria-current="true"]{color:var(--text);border-left-color:var(--acc)}
body.pillar .toc-kit{margin-top:28px;padding:18px;border:1px solid rgba(91,164,255,.3);border-radius:14px;background:rgba(0,102,204,.1)}
body.pillar .toc-kit p{font-size:13.5px;line-height:1.5;color:var(--text-2);margin:0 0 10px}
body.pillar .toc-kit a{padding:0;border:0;font-weight:700;font-size:14px;color:var(--acc);text-decoration:none;display:inline-flex;min-height:44px;align-items:center}
body.pillar .toc-kit a:hover{color:var(--acc-2)}
@media(max-width:1099px){body.pillar .reading{display:block}body.pillar .toc{display:none}}

/* ---------- small pages ---------- */
body.inner .wrap[style*="text-align:center"] h1{margin-bottom:6px}
body.inner .rf h1,body.inner .calc-page h1{font-size:clamp(36px,4.6vw,60px)}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .btn,.btn:hover,body.inner .rev:hover{transition:none!important;transform:none!important}
  body.inner .cta-box.offer:hover .offer-page img{transform:rotate(-4deg)}
  body.inner *,body.inner *::before,body.inner *::after{transition:none!important}
}
html.dark .mono,html.dark .mono *{color:#fff!important}
body.inner .wrap.rf{max-width:640px}
