/* Lextron-inspired refinements, loaded after theme.css. Still white/grey type, navy only in background. */
.btn,.chip,.menu-btn{border-radius:999px}
.btn.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.btn.ghost:hover{background:rgba(255,255,255,.06)}
.kicker{text-transform:uppercase;letter-spacing:.14em;font-size:12px}

/* arch-framed hero: the ASCII field sits inside a soft arch, like a tunnel opening */
.hero.arch .hero-copy{text-align:center;margin-inline:auto;max-width:860px;display:flex;flex-direction:column;align-items:center}
.hero.arch .hero-copy p{margin-inline:auto}
.hero.arch .hero-row{justify-content:center;flex-wrap:wrap}
.hero.arch::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(1100px,94vw);height:92%;
  border-radius:50% 50% 0 0/38% 38% 0 0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),0 -40px 120px -40px rgba(29,67,216,.35);pointer-events:none}

/* every step has a status: numbered vertical timeline */
.timeline{list-style:none;margin:40px 0 0;padding:0;max-width:760px;position:relative}
.timeline::before{content:"";position:absolute;left:19px;top:8px;bottom:8px;width:1px;background:rgba(255,255,255,.14)}
.timeline li{position:relative;padding:0 0 32px 64px}
.timeline .n{position:absolute;left:0;top:0;width:39px;height:39px;border-radius:50%;display:grid;place-items:center;
  background:#0a0e1c;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);font:500 13px 'Geist Mono',monospace;color:#fff}
.timeline h3{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.timeline .state{font:500 11px 'Geist Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:#999;padding:3px 10px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.timeline p{color:#999;margin-top:6px;line-height:1.55}

/* fair questions */
.faq{margin-top:32px;max-width:820px}
.faq details{border-top:1px solid rgba(255,255,255,.12);padding:22px 0}
.faq details:last-child{border-bottom:1px solid rgba(255,255,255,.12)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:24px;font-size:18px;font-weight:500;color:#fff}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400;color:#999;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:#999;margin-top:12px;line-height:1.6}
h1 em,h2 em{font-style:normal}
/* original Blue Sun wordmark (Sep 2026 site) */
.brand{display:inline-flex;flex-direction:column;align-items:center;line-height:1;text-decoration:none}
.brand .word{font-family:'Clash Display',sans-serif;font-weight:700;font-size:26px;letter-spacing:-.02em;text-transform:lowercase}
.brand .word b{color:#fff;font-weight:700}
.brand .word i{font-style:normal;color:#FFC400}
.brand .tag{font-family:Inter,sans-serif;font-size:8px;font-weight:700;letter-spacing:.42em;color:rgba(255,255,255,.7);text-transform:uppercase;margin-top:3px;margin-left:.42em}
/* brand fonts from the original site: Clash Display headings, Satoshi text */
:root{--sans:'Satoshi',system-ui,sans-serif}
h1,h2,.metrics .v,.win .big{font-family:'Clash Display',sans-serif;font-weight:600}
h3{font-family:'Satoshi',system-ui,sans-serif;font-weight:700}
.hero h1,.plain-hero h1{letter-spacing:-.6px;line-height:1.1;font-weight:500}
h2,.cta h2{font-weight:500}
h2,.cta h2{letter-spacing:-.8px}
h3{letter-spacing:-.1px}
.marquee .tile,.face-media .play,.brand .tag{font-family:'Satoshi',system-ui,sans-serif}

/* ---------- motion (Lextron-inspired) ---------- */
/* hero: staggered entrance */
.hero-copy>*{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.hero-copy>*:nth-child(2){animation-delay:.12s}.hero-copy>*:nth-child(3){animation-delay:.26s}
.hero-copy>*:nth-child(4){animation-delay:.4s}.hero-copy>*:nth-child(5){animation-delay:.52s}
@keyframes rise{from{opacity:0;transform:translateY(22px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
#ascii{will-change:transform}
.btn svg{transition:transform .25s}.btn:hover svg{transform:translate(2px,-2px)}

/* sticky live card + scroll-driven steps */
.stages{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;margin-top:40px;align-items:start}
.stages-card{position:sticky;top:120px;height:330px;border-radius:18px;padding:22px;overflow:hidden;
  background:linear-gradient(160deg,#10131f,#070a14 45%);box-shadow:0 0 0 1px rgba(255,255,255,.12),0 30px 80px -40px rgba(29,67,216,.55)}
.sc-head{display:flex;align-items:center;gap:8px;font:500 12px 'Geist Mono',monospace;text-transform:uppercase;letter-spacing:.08em;color:#ededed;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.08)}
.sc-note{margin-left:auto;white-space:nowrap;color:#777;text-transform:none;letter-spacing:0}
.frame{position:absolute;left:22px;right:22px;top:70px;display:flex;flex-direction:column;gap:12px;opacity:0;transform:translateY(12px);transition:opacity .45s,transform .45s;pointer-events:none}
.frame.on{opacity:1;transform:none}
.frame>*{opacity:0;transform:translateY(10px)}
.frame.on>*{animation:rowin .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--d)*.28s + .15s)}
@keyframes rowin{to{opacity:1;transform:none}}
.frame .row{display:flex;justify-content:space-between;gap:16px;padding:11px 14px;border-radius:10px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);font-size:14px}
.frame .row span{color:#888}.frame .row b{font-weight:500;color:#fff;text-align:right}
.frame .bar{height:3px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:6px}
.frame .bar i{display:block;height:100%;width:0;background:#fff}
.frame.on .bar i{animation:fill 1.6s ease-out both;animation-delay:1.3s}
@keyframes fill{to{width:100%}}
.frame .cap{font:500 12px 'Geist Mono',monospace;color:#888}
.bubble{max-width:85%;padding:12px 14px;border-radius:14px;font-size:14px;line-height:1.45}
.bubble.out{align-self:flex-end;background:#fff;color:#0a0e1c;border-bottom-right-radius:4px}
.bubble.in{align-self:flex-start;background:rgba(255,255,255,.08);color:#ededed;border-bottom-left-radius:4px}
.approve{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-radius:10px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);font-size:14px;color:#888}
.approve b{font-weight:500;color:#0a0e1c;background:#fff;padding:6px 12px;border-radius:999px}
.cal{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;font:500 12px 'Geist Mono',monospace;color:#777;text-align:center}
.cal span{padding:8px 0;border-radius:8px;background:rgba(255,255,255,.04)}.cal span:nth-child(2){background:#fff;color:#0a0e1c}
.slot{padding:14px;border-radius:12px;background:rgba(255,255,255,.06);box-shadow:inset 3px 0 0 #fff;display:flex;flex-direction:column;gap:4px;font-size:14px;color:#ededed}
.slot b{font-weight:500;color:#fff}.slot small{color:#888;font-size:12px}
.join{padding:20px;border-radius:14px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);display:flex;flex-direction:column;gap:6px}
.join small{font:500 12px 'Geist Mono',monospace;color:#888;text-transform:uppercase}.join b{font-weight:500;font-size:17px}
.join .btn{align-self:flex-start;margin-top:10px;pointer-events:none}
.stages-steps{margin-top:0}
.stages-steps li{min-height:46vh;padding-top:4px;opacity:.32;transition:opacity .4s}
.stages-steps li:last-child{min-height:0}
.stages-steps li.on{opacity:1}
.stages-steps li.on .n{background:#fff;color:#0a0e1c}
.timeline .n{transition:background .3s,color .3s}
@media(max-width:860px){
  .stages{grid-template-columns:1fr;gap:20px}
  .stages-card{top:72px;height:280px;padding:16px;z-index:3}
  .sc-head{white-space:nowrap}.sc-note{font-size:11px}
  .frame{left:16px;right:16px;top:58px;gap:8px}.frame .row{padding:8px 12px;font-size:13px}.bubble{font-size:13px;padding:9px 12px}
  .stages-steps li{min-height:52vh}
}
@media(prefers-reduced-motion:reduce){
  .hero-copy>*,.frame.on>*,.frame.on .bar i{animation:none;opacity:1;transform:none;filter:none}
  .frame.on .bar i{width:100%}
}

/* playbook card pieces */
.chk{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:10px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);font-size:14px;color:#ededed}
.chk i{font-style:normal;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;flex:none}
.chk.ok i{background:#fff;color:#0a0e1c}
.chk.no{color:#777;text-decoration:line-through;text-decoration-color:rgba(255,255,255,.25)}
.chk.no i{box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);color:#888}
.frame .path{display:flex;flex-direction:column;align-items:stretch}
.frame .path>*{opacity:0;transform:translateY(8px)}
.frame.on .path>*{animation:rowin .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--d)*.3s + .15s)}
.node{padding:11px 14px;border-radius:12px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);display:flex;flex-direction:column;gap:2px}
.node b{font-weight:500;font-size:14px;color:#fff}.node small{font-size:12px;color:#888}
.node:last-child{background:#fff}.node:last-child b{color:#0a0e1c}.node:last-child small{color:#555}
.link{height:18px;width:1px;margin-left:22px;background:linear-gradient(#fff,rgba(255,255,255,.2));transform-origin:top}
.frame.on .path .link{animation:grow .35s ease-out both;animation-delay:calc(var(--d)*.3s + .15s)}
@keyframes grow{from{opacity:1;transform:scaleY(0)}to{opacity:1;transform:none}}
.bubble.doc{align-self:stretch;max-width:none;background:transparent;color:#ededed;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);border-radius:10px;font:500 12px 'Geist Mono',monospace;line-height:1.5}
.bubble.doc::before{content:"▤ ";color:#fff}
@media(max-width:860px){.chk{padding:7px 12px;font-size:13px}.node{padding:8px 12px}.link{height:10px}}

/* written client quotes (no video) */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
@media(max-width:900px){.quotes{grid-template-columns:1fr}}
.quote{padding:28px;margin:0;display:flex;flex-direction:column;gap:20px}
.quote blockquote{font-size:20px;line-height:1.4;color:#fff;font-weight:500;margin:0}
.quote figcaption{margin-top:auto;display:flex;flex-direction:column;gap:2px}
.quote figcaption b{font-weight:500;color:#fff}.quote figcaption span{font:12px 'Geist Mono',monospace;color:#999}
.engage{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.engage{grid-template-columns:1fr}}
.engage .card{min-height:0;padding:24px}.engage .card h3{margin-top:14px}

/* phones: phases as a plain readable list; the sticky animated card is desktop-only */
@media(max-width:860px){
  .stages-card{display:none}
  .stages-steps li{min-height:0;opacity:1;padding-bottom:28px}
  .stages-steps li .n{background:#fff;color:#0a0e1c}
}

/* alternate light sections; cards stay navy so they pop on white */
section[style*="padding-top:40px"]:nth-of-type(even){background:#f4f6fb;color:#0b1a4a;padding-bottom:96px;margin-top:48px}
section[style*="padding-top:40px"]:nth-of-type(even) :is(h2,h3,b,strong,summary,li,blockquote,figcaption,.big,.client):not(.card,.card *,.stages-card *){color:#0b1a4a}
section[style*="padding-top:40px"]:nth-of-type(even) :is(p,.lede,.kicker,small,span,.fine):not(.card,.card *,.stages-card *,.n){color:#4a5a8a}
section[style*="padding-top:40px"]:nth-of-type(even) a:not(.btn,.card,.card *){color:#1D43D8}
section[style*="padding-top:40px"]:nth-of-type(even) .timeline li .n{background:#0b1a4a;color:#fff;box-shadow:none}
section[style*="padding-top:40px"]:nth-of-type(even) .stages-steps li.on .n{background:#1D43D8;color:#fff}
section[style*="padding-top:40px"]:nth-of-type(even) :is(.timeline,.timeline li,.faq,.faq details){border-color:rgba(11,26,74,.15)}
section[style*="padding-top:40px"]:nth-of-type(even) .card{color:#fff;background:linear-gradient(160deg,#1a2f7a 0%,#0b1a4a 45%,#06102e 100%)}

/* nothing may widen the page: stops the empty strip on the right when zooming out on phones */
html,body{overflow-x:clip;max-width:100%}

/* grid cards may not grow past the screen; long example lines wrap instead */
@media(max-width:860px){.bento,.two,.engines,.quotes,.wins,.faces{grid-template-columns:minmax(0,1fr)}.bento>*,.two>*,.engines>*{min-width:0}.rowline>*{min-width:0;overflow-wrap:anywhere}}
/* dark result strips keep light text even inside white sections */
section[style*="padding-top:40px"]:nth-of-type(even) :is(.wins,.metrics) :is(.big,.v,.client,b,small,strong){color:#fff}
section[style*="padding-top:40px"]:nth-of-type(even) :is(.wins,.metrics) :is(p,.l,span){color:#a9b3d1}
section[style*="padding-top:40px"]:nth-of-type(even) .chip:not(.card *,.wins *,.metrics *){color:#0b1a4a;background:rgba(29,67,216,.08);box-shadow:inset 0 0 0 1px rgba(11,26,74,.18)}