/*!
 * Bytecode – Shopify student offer page (template: bytecode-student-offer.php)
 * Every rule is scoped to #bcso so it never affects the rest of the site.
 * The FAQ uses your existing bytecode/assets/css/faq.css.
 */
#bcso{--blue:#0B66FF; --blue-text:#1A6DFF; --blue-soft:#7FA8FF; --red:#FF4B2B;
  --black:#000; --black-2:#0E0E0F; --card:#0B0C0F; --text:#E8EAEE; --muted:#A6ACB7; --line:rgba(255,255,255,.12);
  --font:'Plus Jakarta Sans',system-ui,sans-serif;}
#bcso *{box-sizing:border-box}
html:has(#bcso){scroll-behavior:smooth}
#bcso{margin:0;background:var(--black);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;overflow-x:clip}
:where(#bcso) a{color:inherit;text-decoration:none}
#bcso .wrap{max-width:1440px;margin:0 auto;padding:0 20px}
#bcso .label{font-size:12px;line-height:1.4;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--red);margin:0 0 14px}
#bcso .h2{margin:0;font-weight:800;text-transform:uppercase;font-size:clamp(32px,4.2vw,48px);line-height:1.04;letter-spacing:-.035em;color:#fff}
#bcso .h2 span,#bcso .blue{color:var(--blue-text)}
#bcso .lead{font-size:16px;line-height:1.7;color:var(--muted);margin:18px 0 0}
#bcso .center{text-align:center}
#bcso .center .lead{max-width:680px;margin-left:auto;margin-right:auto}
#bcso .sec{padding:80px 0}
#bcso .sec.alt {
    background: #0A0D16;
    border-top: 1px solid rgba(255, 255, 255, .05);
    border-bottom: 1px solid rgba(255, 255, 255, .05);
}
#bcso #plans{scroll-margin-top:60px}
/*#bcso .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:700;font-size:14px;letter-spacing:.02em;text-transform:uppercase;padding:15px 26px;min-height:48px;border-radius:999px;border:1.5px solid rgba(255,255,255,.55);color:#fff;background:transparent;cursor:pointer;transition:transform .25s,background .25s,border-color .25s,box-shadow .25s;white-space:nowrap;font-family:inherit}*/
/*#bcso .btn:hover{transform:translateY(-2px);border-color:#fff}*/
/*#bcso .btn-blue{background:var(--blue);border-color:var(--blue);box-shadow:0 10px 30px -10px rgba(11,102,255,.8)}*/
/*#bcso .btn-blue:hover{background:#2a7bff;border-color:#2a7bff}*/
/*#bcso .btn svg{width:16px;height:16px;transition:transform .25s}*/
/*#bcso .btn:hover svg{transform:translateX(3px)}*/
#bcso .ctas{display:flex;gap:14px;flex-wrap:wrap}
#bcso .center .ctas{justify-content:center}
#bcso .rv{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
#bcso .rv.in{opacity:1;transform:none}
#bcso .d1{transition-delay:.08s}
#bcso .d2{transition-delay:.16s}
#bcso .d3{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){#bcso .rv{opacity:1;transform:none;transition:none}
}
#bcso .hero{position:relative;padding:80px 0 80px;overflow:hidden;isolation:isolate}
#bcso .hero::before{content:"";position:absolute;inset:-20% -10% auto;height:120%;z-index:-1;background:radial-gradient(45% 50% at 78% 30%,rgba(11,102,255,.42),transparent 70%),radial-gradient(30% 35% at 10% 80%,rgba(255,75,43,.16),transparent 70%)}
#bcso .hero::after{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:56px 56px;-webkit-mask:radial-gradient(70% 70% at 50% 40%,#000,transparent);mask:radial-gradient(70% 70% at 50% 40%,#000,transparent)}
#bcso .hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center}
#bcso .pill{display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:999px;border:1px solid rgba(127,168,255,.3);background:rgba(11,102,255,.1);font-size:13px;font-weight:600;color:#D7E3FF;margin-bottom:24px}
#bcso .pill b {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255, 75, 43, .12);
    color: var(--red);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    margin: 0;
}
#bcso .hero h1{margin:0;font-weight:800;text-transform:uppercase;font-size:clamp(32px,5.6vw,52px);line-height:1;letter-spacing:-.04em;color:#fff}
#bcso .hero h1 span{display:block;color:var(--blue-text)}
#bcso .hero .lead{font-size:18px;max-width:560px;margin:24px 0 34px}
#bcso .facts{display:flex;flex-wrap:wrap;gap:10px 22px;margin:30px 0 0;padding:0;list-style:none;font-size:14px;color:#C9CED8}
#bcso .facts li{display:flex;align-items:center;gap:8px}
#bcso .facts svg{width:18px;height:18px;color:var(--blue-soft);flex:none}
#bcso .visual{position:relative;min-height:420px}
#bcso .code{position:absolute;inset:0 0 auto 0;border-radius:22px;border:1px solid rgba(127,168,255,.22);background:linear-gradient(160deg,#0D1120,#070910);box-shadow:0 50px 100px -40px rgba(11,102,255,.6);overflow:hidden}
#bcso .code-top{display:flex;align-items:center;gap:7px;padding:14px 18px;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted)}
#bcso .code-top i{width:10px;height:10px;border-radius:50%;background:#2A2F3A}
#bcso .code-top i:first-child{background:var(--red)}
#bcso .code-top span{margin-left:10px}
#bcso .code pre{margin:0;padding:20px 22px 26px;font:500 13.5px/1.75 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#C9CED8;white-space:pre;overflow:hidden}
#bcso .k{color:#FF8A73}
#bcso .s{color:#7FA8FF}
#bcso .c{color:#5F6675}
#bcso .v{color:#fff}
#bcso .store{position:absolute;right:-8px;bottom:0;width:62%;padding:18px;border-radius:20px;background:#fff;color:#0B0F1A;box-shadow:0 40px 80px -30px rgba(0,0,0,.9)}
#bcso .store-img{height:96px;border-radius:12px;background:radial-gradient(60% 80% at 70% 30%,#7FA8FF,transparent 70%),linear-gradient(135deg,#0B66FF,#0B3FB0)}
#bcso .store h4{margin:14px 0 4px;font-size:15px}
#bcso .store p{margin:0;font-size:13px;color:#4A5468}
#bcso .store-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 12px;
    gap: 10px;
}
#bcso .store-row span {
    margin: 0;
    font-size: 13px;
    color: #4A5468;
    display: inline-block;
}
#bcso .store-row b{font-size:24px}
#bcso .store-row a{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:999px;background:var(--blue);color:#fff;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;box-shadow:0 10px 24px -10px rgba(11,102,255,.9);transition:transform .25s,background .25s; margin-left:auto;}
#bcso .store-row a:hover{background:#2a7bff;transform:translateY(-2px)}
#bcso .store-row a svg{width:14px;height:14px}
#bcso .badge{position:absolute;left:-14px;bottom:70px;display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:16px;background:rgba(14,14,15,.92);border:1px solid var(--line);font-size:13px;color:#fff;backdrop-filter:blur(10px)}
#bcso .badge svg{width:22px;height:22px;color:var(--red)}
#bcso .who{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:56px}
#bcso .who div{padding:26px 24px;border-radius:20px;border:1px solid var(--line);background:var(--card)}
#bcso .who b{display:block;font-size:17px;color:#fff;margin-bottom:8px}
#bcso .who p{margin:0;font-size:14px;line-height:1.6;color:var(--muted)}
#bcso .who svg{width:28px;height:28px;color:var(--blue-text);margin-bottom:18px}
#bcso .plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:60px;align-items:stretch}
#bcso .plan{position:relative;display:flex;flex-direction:column;padding:34px 30px 30px;border-radius:26px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01))}
#bcso .plan.pop{border-color:rgba(127,168,255,.55);background:radial-gradient(90% 60% at 100% 0%,rgba(76,141,255,.35),transparent 60%),linear-gradient(170deg,#0B3FB0,#061A4D 75%);box-shadow:0 50px 100px -40px rgba(11,102,255,.75);transform:translateY(-12px)}
#bcso .tag{position:absolute;top:-13px;left:30px;padding:6px 14px;border-radius:999px;background:var(--red);color:#fff;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
#bcso .plan-no{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
#bcso .pop .plan-no{color:#FFB3A5}
#bcso .plan h3{margin:10px 0 8px;font-size:22px;line-height:1.2;font-weight:800;letter-spacing:-.02em;text-transform:uppercase;color:#fff}
#bcso .plan .for{margin:0;font-size:14px;line-height:1.6;color:var(--muted);min-height:45px}
#bcso .pop .for{color:#C9D8FF}
#bcso .price{display:flex;align-items:baseline;gap:10px;margin:24px 0 4px}
#bcso .price b{font-size:48px;font-weight:800;letter-spacing:-.04em;color:#fff;line-height:1}
#bcso .price s{font-size:17px;color:#6C7383}
#bcso .pop .price s{color:#9DB2E6}
#bcso .price-note{font-size:13px;color:var(--muted)}
#bcso .pop .price-note{color:#C9D8FF}
#bcso .meta{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0 0;padding:0;list-style:none}
#bcso .meta li{padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--line);font-size:12px;font-weight:600;color:#D7DBE3}
#bcso .pop .meta li{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);color:#fff}
#bcso .inc{margin:24px 0 28px;padding:24px 0 0;border-top:1px solid var(--line);list-style:none;display:grid;gap:12px;font-size:14.5px;line-height:1.5;color:#D7DBE3}
#bcso .pop .inc{border-color:rgba(255,255,255,.18);color:#fff}
#bcso .inc li{display:flex;gap:10px}
#bcso .inc svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--blue-soft)}
#bcso .pop .inc svg{color:#fff}
#bcso .plan .btn{margin-top:auto;width:100%}
#bcso .pop .btn-blue{background:#fff;border-color:#fff;color:#0B3FB0!important;box-shadow:none}
#bcso .pop .btn-blue:hover{background:#E8EFFF}
#bcso .plans-foot{margin:34px auto 0;max-width:760px;font-size:13px;line-height:1.7;color:var(--muted);text-align:center}
#bcso .topics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:56px}
#bcso .topic{padding:30px 28px;border-radius:22px;border:1px solid var(--line);background:var(--card);transition:border-color .3s,transform .3s}
#bcso .topic:hover{border-color:rgba(127,168,255,.45);transform:translateY(-4px)}
#bcso .topic .n{display:inline-flex;width:44px;height:44px;border-radius:12px;align-items:center;justify-content:center;background:rgba(11,102,255,.14);color:var(--blue-soft);margin-bottom:20px}
#bcso .topic .n svg{width:22px;height:22px}
#bcso .topic h3{margin:0 0 10px;font-size:18px;font-weight:700;color:#fff}
#bcso .topic p{margin:0;font-size:14.5px;line-height:1.65;color:var(--muted)}
#bcso .stack{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:40px}
#bcso .stack span{padding:10px 18px;border-radius:999px;border:1px solid var(--line);font-size:14px;font-weight:600;color:#D7DBE3}
#bcso .steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:56px;counter-reset:s;list-style:none;padding:0}
#bcso .steps li{position:relative;padding:30px 26px;border-radius:22px;border:1px solid var(--line);background:var(--card)}
#bcso .steps li::before{counter-increment:s;content:"0" counter(s);display:block;font-size:44px;font-weight:800;letter-spacing:-.04em;color:var(--blue-text);margin-bottom:16px}
#bcso .steps b{display:block;font-size:17px;color:#fff;margin-bottom:8px}
#bcso .steps p{margin:0;font-size:14px;line-height:1.6;color:var(--muted)}
#bcso .promise{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;margin-top:0}
#bcso .promise .card{padding:36px;border-radius:24px;border:1px solid var(--line);background:var(--card)}
#bcso .promise h3{margin:0 0 18px;font-size:18px;font-weight:800;text-transform:uppercase;letter-spacing:-.01em;color:#fff;display:flex;align-items:center;gap:10px}
#bcso .promise h3 svg{width:22px;height:22px}
#bcso .promise .yes h3 svg{color:var(--blue-soft)}
#bcso .promise .no h3 svg{color:var(--red)}
#bcso .promise ul{margin:0;padding:0;list-style:none;display:grid;gap:12px;font-size:15px;line-height:1.55;color:#D7DBE3}
#bcso .promise li{padding-left:22px;position:relative}
#bcso .promise li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:50%;background:var(--blue)}
#bcso .promise .no li::before{background:var(--red)}
#bcso .cta{position:relative;overflow:hidden;padding:80px 40px;border-radius:32px;text-align:center;background:radial-gradient(60% 80% at 50% 0%,rgba(11,102,255,.35),transparent 70%),#0B0C0F;border:1px solid rgba(127,168,255,.25)}
#bcso .cta .lead{max-width:620px;margin-left:auto;margin-right:auto}
#bcso .cta .ctas{justify-content:center;margin-top:34px}
@media (max-width:1000px){#bcso .hero-grid{grid-template-columns:minmax(0,1fr)}
#bcso .visual{min-height:400px;max-width:560px;width:100%;margin:0 auto}
#bcso .plans{grid-template-columns:minmax(0,1fr);max-width:520px;margin-left:auto;margin-right:auto}
#bcso .plan.pop{transform:none}
#bcso .who,#bcso .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
#bcso .topics{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){#bcso .sec{padding:50px 0}
#bcso .wrap{padding:0 16px}
#bcso .hero{padding:60px 0 70px}
#bcso .hero .lead{font-size:16px}
#bcso .who,#bcso .steps,#bcso .topics,#bcso .promise{grid-template-columns:minmax(0,1fr)}
#bcso .visual{min-height:370px}
#bcso .store{width:78%;right:0}
#bcso .badge{display:none}
#bcso .code pre{font-size:12px;padding:16px}
#bcso .plan{padding:30px 22px 24px}
#bcso .promise .card{padding:28px 22px}
#bcso .cta{padding:56px 20px;border-radius:24px}
#bcso .ctas .btn{width:100%}

}
/* page body (the mobile off-canvas menu sits outside the screen; clip it like the other inner pages) */
body.bcso-page{background:#000;overflow-x:clip}