/* NZT-98 members area. One flat accent on white, same cyan and type as the
   lesson slides, so the dashboard and the videos read as one product. */
:root{
  --ink:#121417; --muted:#68707A; --go:#0E7490; --go-dk:#0B5A70;
  --line:#E3E7EC; --wash:#F5F7FA; --ok:#129D5F; --warn:#B5730B;
  --w:1080px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:#fff; color:var(--ink);
  font:400 18px/1.6 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--w);margin:0 auto;padding:0 20px}
a{color:var(--go)}
h1,h2,h3{line-height:1.15;margin:0;letter-spacing:-.02em}
h1{font-size:clamp(30px,5vw,44px);font-weight:800}
h2{font-size:clamp(22px,3.2vw,28px);font-weight:700}
h3{font-size:19px;font-weight:700}
.kicker{font:700 13px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--go)}
.muted{color:var(--muted)}
.small{font-size:15px}

/* ---- chrome -------------------------------------------------------------- */
.top{border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:30}
.top .wrap{display:flex;align-items:center;gap:14px;height:68px}
.mark{width:30px;height:30px;border-radius:7px;flex:none}
.brand{font:800 16px/1 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.top .spacer{flex:1}
.signout{font-size:15px;color:var(--muted);text-decoration:none}

/* ---- buttons ------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:60px;padding:16px 30px;border:0;border-radius:10px;
  background:var(--go);color:#fff;font:700 19px/1 Inter,sans-serif;
  cursor:pointer;text-decoration:none;
}
.btn:hover{background:var(--go-dk)}
.btn.ghost{background:#fff;color:var(--ink);border:2px solid var(--line)}
.btn.ghost:hover{border-color:var(--go);background:#fff}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.wide{width:100%}

/* ---- quiz ---------------------------------------------------------------- */
.quiz{max-width:640px;margin:0 auto;padding:44px 20px 80px}
.qcount{font:700 14px/1 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.qbar{height:4px;background:var(--line);border-radius:3px;margin:14px 0 36px;overflow:hidden}
.qbar i{display:block;height:100%;background:var(--go);transition:width .35s ease}
.q h1{margin-bottom:10px}
.qnote{color:var(--muted);font-size:16px;margin:0 0 26px}
.opts{display:grid;gap:12px;margin-top:26px}
.opt{
  display:flex;align-items:center;gap:14px;width:100%;min-height:66px;
  padding:16px 20px;border:2px solid var(--line);border-radius:12px;background:#fff;
  font:600 18px/1.35 Inter,sans-serif;color:var(--ink);text-align:left;cursor:pointer;
}
.opt:hover{border-color:var(--go)}
.opt.sel{border-color:var(--go);background:#EDF9FC}
.opt .tick{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);flex:none}
.opt.sel .tick{border-color:var(--go);background:var(--go);box-shadow:inset 0 0 0 4px #fff}
.opt .sub{display:block;font-weight:400;font-size:15px;color:var(--muted);margin-top:3px}
.qfoot{margin-top:30px;display:flex;gap:12px;align-items:center}
.back{background:none;border:0;color:var(--muted);font:600 16px Inter,sans-serif;cursor:pointer;padding:10px}

/* ---- building (the pause that makes the plan feel computed) -------------- */
.build{max-width:600px;margin:0 auto;padding:90px 20px;text-align:left}
.bstep{display:flex;gap:14px;align-items:flex-start;padding:14px 0;opacity:.25;transition:opacity .4s}
.bstep.on{opacity:1}
.bstep .dot{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);flex:none;margin-top:3px}
.bstep.on .dot{border-color:var(--ok);background:var(--ok);box-shadow:inset 0 0 0 4px #fff}

/* ---- dashboard ----------------------------------------------------------- */
.hero{padding:40px 0 28px;border-bottom:1px solid var(--line)}
.line{display:inline-flex;align-items:center;gap:9px;background:#EAF3E9;color:var(--ok);
  font:700 12px/1 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;
  padding:8px 12px;border-radius:999px}
.line i{width:8px;height:8px;border-radius:50%;background:var(--ok);display:block}
.hero h1{margin:16px 0 8px}
.stats{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:14px;color:var(--muted);font-size:16px}
.stats b{color:var(--ink)}

/* today's lesson is the one dominant thing on the page */
.today{display:grid;grid-template-columns:260px 1fr;gap:26px;align-items:center;
  border:2px solid var(--go);border-radius:16px;padding:22px;margin:30px 0 38px}
.today .thumb{aspect-ratio:16/9;border-radius:10px;background:var(--wash) center/cover no-repeat;border:1px solid var(--line)}
.today h2{margin:8px 0 6px}
@media(max-width:720px){.today{grid-template-columns:1fr;padding:18px}}

/* the 90-day pad */
.pad{margin:0 0 40px}
.padgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(20px,1fr));gap:5px;margin-top:14px}
.padgrid b{height:20px;border-radius:3px;background:var(--line);display:block}
.padgrid b.done{background:var(--go)}
.padgrid b.now{background:var(--warn);box-shadow:0 0 0 2px #fff,0 0 0 3px var(--warn)}

/* modules */
.mod{border-top:1px solid var(--line);padding:22px 0}
.mod .mhead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.mod .prog{color:var(--muted);font-size:15px}
.rows{margin-top:14px;display:grid;gap:8px}
.row{display:flex;align-items:center;gap:14px;min-height:66px;padding:12px 16px;
  border:1px solid var(--line);border-radius:10px;background:#fff;text-decoration:none;color:inherit}
.row:hover{border-color:var(--go)}
.row .num{font:700 14px/1 Inter,sans-serif;color:var(--muted);width:26px;flex:none}
.row .t{flex:1;font-weight:600}
.row .tag{font:700 11px/1 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;
  padding:6px 9px;border-radius:5px;background:var(--wash);color:var(--muted);white-space:nowrap}
.row .tag.ready{background:#E2F4F8;color:var(--go)}
.row .tag.done{background:#EAF3E9;color:var(--ok)}

/* ---- lesson -------------------------------------------------------------- */
.lesson{padding:30px 0 70px}
.player{width:100%;aspect-ratio:16/9;background:#0b0d10;border-radius:12px;display:block}
.notyet{width:100%;aspect-ratio:16/9;border:2px dashed var(--line);border-radius:12px;
  display:flex;align-items:center;justify-content:center;text-align:center;padding:30px;color:var(--muted)}
.script{margin-top:30px;border-top:1px solid var(--line);padding-top:24px;max-width:70ch;white-space:pre-wrap}
.crumbs{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:15px;margin-bottom:14px}
.crumbs a{color:var(--muted)}

/* ---- partner banner ------------------------------------------------------
   Slim promo strip that sits directly above the video on the dashboard,
   the welcome screen and any lesson. Same accent, border and type scale as
   the rows and cards around it; the blue left edge is the only thing that
   marks it as not-the-course. One line of copy, one button, one dismiss. */
.promo{
  position:relative;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin:18px 0 26px;padding:13px 44px 13px 15px;
  border:1px solid var(--line);border-left:4px solid var(--go);
  border-radius:10px;background:var(--wash);
}
.promo .bolt{
  width:36px;height:36px;border-radius:8px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:#E2F4F8;color:var(--go)}
.promo .bolt svg{width:20px;height:20px;fill:currentColor;display:block}
.promo .pt{flex:1 1 320px;min-width:0}
.promo .pk{
  display:block;font:700 11px/1.3 Inter,sans-serif;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted)}
.promo .ph{
  display:block;margin-top:4px;font:600 16px/1.35 Inter,sans-serif;
  letter-spacing:-.01em;color:var(--ink)}
.promo .ph b{color:var(--go);font-weight:700}
.promo .pgo{
  flex:none;min-height:46px;padding:12px 20px;border-radius:8px;
  font-size:16px;white-space:nowrap}
.promo .px{
  position:absolute;top:7px;right:7px;width:30px;height:30px;padding:0;
  border:0;background:none;color:var(--muted);cursor:pointer;
  display:flex;align-items:center;justify-content:center;border-radius:7px}
.promo .px:hover{background:#E9EDF2;color:var(--ink)}
.promo .px svg{width:16px;height:16px;fill:currentColor;display:block}

@media(max-width:720px){
  /* the button takes its own full-width row; only the kicker needs to keep
     clear of the dismiss cross, so the right padding comes back off */
  .promo{padding:13px 15px;gap:12px}
  .promo .pt{flex:1 1 190px}
  .promo .pk{padding-right:30px}
  .promo .ph{font-size:15.5px}
  .promo .pgo{flex:1 1 100%;width:100%;white-space:normal}
}
@media(max-width:420px){
  .promo .bolt{width:32px;height:32px}
  .promo .bolt svg{width:18px;height:18px}
}

/* ---- gate ---------------------------------------------------------------- */
.gate{max-width:420px;margin:0 auto;padding:90px 20px}
.gate input{width:100%;min-height:62px;padding:14px 18px;border:2px solid var(--line);
  border-radius:10px;font:500 19px Inter,sans-serif;margin:18px 0 14px}
.gate input:focus{outline:0;border-color:var(--go)}
.err{color:#B4232A;font-size:15px;min-height:22px}
.hide{display:none !important}

/* ============================================================ members shell
   Sidebar + content, sidebar + content, on NZT-98's own palette.
   The sidebar is empty until the gate is passed, so it collapses to nothing
   on the login screen without needing a second layout. */
.shell{display:flex;align-items:flex-start;min-height:100vh}
.col{flex:1 1 auto;min-width:0}
.side:empty{display:none}
.side{flex:0 0 232px;position:sticky;top:0;align-self:stretch;min-height:100vh;
  background:#10141c;color:#c6cfdd;padding:18px 12px 20px;display:flex;flex-direction:column;gap:14px}
.s-brand{display:flex;align-items:center;gap:10px;padding:2px 8px 0}
.s-brand img{width:30px;height:30px;border-radius:8px}
.s-brand b{font-size:13px;line-height:1.2;color:#fff;letter-spacing:.01em}
.s-line{display:flex;align-items:center;gap:7px;margin:0 8px;padding:7px 10px;border-radius:8px;
  background:#182030;font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#4ade9b}
.s-line i{width:7px;height:7px;border-radius:50%;background:#2ecc71;box-shadow:0 0 0 3px rgba(46,204,113,.18)}
.s-nav{display:flex;flex-direction:column;gap:2px}
.s-item{display:flex;align-items:center;gap:10px;padding:10px 11px;border-radius:9px;
  text-decoration:none;color:#c6cfdd;font-size:14.5px;font-weight:600}
.s-item i{font-style:normal;font-size:16px;line-height:1;width:20px;text-align:center}
.s-item span{flex:1 1 auto}
.s-item:hover{background:#1a2230;color:#fff}
.s-item.on{background:#fff;color:#10141c}
.s-lock{font-size:11px;opacity:.75;font-weight:400}
.s-foot{margin-top:auto;display:flex;flex-wrap:wrap;gap:6px;padding:0 6px}
.s-foot .chip{background:#182030;border-radius:999px;padding:5px 10px;font-size:12px;
  color:#c6cfdd;text-decoration:none}

/* ------------------------------------------------- ways your line earns --- */
.kicker.sec{display:flex;align-items:baseline;justify-content:space-between;margin:30px 0 10px}
.kicker .cnt{font-size:12px;font-weight:600;color:var(--muted,#6b7687);text-transform:none;letter-spacing:0}
.earns{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.earn{position:relative;display:block;text-decoration:none;color:inherit;background:#fff;
  border:1px solid #e3e7ec;border-radius:13px;padding:14px 14px 13px}
.earn:hover{border-color:#c9d3df;box-shadow:0 6px 18px rgba(16,20,28,.07)}
.earn.has{border-color:#bfe3cd;background:#fbfffc}
.earn .ic{font-size:21px;line-height:1;display:block;margin-bottom:9px}
.earn .st{position:absolute;top:13px;right:13px;font-size:11px;font-weight:700;color:#8a93a0}
.earn.has .st{color:#129D5F}
.earn b{display:block;font-size:15.5px;line-height:1.25;margin-bottom:3px}
.earn .sub{display:block;font-size:13px;color:#5f6b7a;line-height:1.35;margin-bottom:9px}
.earn .tg{display:inline-block;background:#fff3e2;border:1px solid #f2d2a4;color:#B5730B;
  border-radius:5px;padding:2px 7px;font-size:10.5px;font-weight:800;letter-spacing:.05em}
.earn.has .tg{background:#e9f7ee;border-color:#bfe3cd;color:#0C7247}
.earn .act{display:block;margin-top:10px;font-size:13px;font-weight:800;color:#0F6FEF}
@media (max-width:620px){.earns{grid-template-columns:1fr}}

.library{display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid #e3e7ec;
  border-radius:13px;padding:14px 16px}
.library b{display:block;font-size:15.5px;margin-bottom:2px}
.library span{font-size:13px;color:#5f6b7a}

/* ------------------------------------------------------ deliverable page --- */
.crumb{display:inline-block;margin:4px 0 12px;font-size:13.5px;color:#0F6FEF;text-decoration:none}
.ohead{margin:0 0 18px}
.ohead h1{margin:8px 0 5px;font-size:27px;line-height:1.18}
.otag{display:inline-block;background:#eef1f5;color:#5f6b7a;border-radius:5px;padding:3px 8px;
  font-size:10.5px;font-weight:800;letter-spacing:.06em}
.otag.on{background:#e9f7ee;color:#0C7247}
.olock{background:#fff;border:1px solid #e3e7ec;border-radius:14px;padding:20px 18px}
.olock .pitch{margin:0 0 18px;font-size:15.5px;line-height:1.5;color:#36414f}
.obody h2{margin:26px 0 9px;font-size:19px;line-height:1.25}
.obody p{margin:0 0 12px;font-size:15px;line-height:1.5;color:#36414f}
.obody .note{background:#f6f8fa;border-left:3px solid #c9d3df;border-radius:0 8px 8px 0;
  padding:11px 13px;font-size:14px;color:#4a5561}
.sheet{width:100%;border-collapse:collapse;margin:0 0 14px;font-size:14px;background:#fff;
  border:1px solid #e3e7ec;border-radius:10px;overflow:hidden}
.sheet th{text-align:left;background:#f6f8fa;font-size:12px;letter-spacing:.04em;
  text-transform:uppercase;color:#6b7687;padding:9px 11px}
.sheet td{padding:10px 11px;border-top:1px solid #eef1f5;vertical-align:top}
.sheet td.empty{color:#8a93a0;text-align:center;font-style:italic}
.pill{display:inline-block;border-radius:999px;padding:2px 9px;font-size:11.5px;font-weight:700}
.pill.go{background:#e9f7ee;color:#0C7247}
.pill.wait{background:#fff4e0;color:#B5730B}
.ticks,.steps{margin:0 0 14px;padding:0 0 0 2px;list-style:none;counter-reset:s}
.ticks li{position:relative;padding:5px 0 5px 26px;font-size:15px;line-height:1.45;color:#36414f}
.ticks li:before{content:"\2713";position:absolute;left:2px;top:5px;color:#129D5F;font-weight:800}
.steps li{position:relative;padding:5px 0 5px 30px;font-size:15px;line-height:1.45;color:#36414f;counter-increment:s}
.steps li:before{content:counter(s);position:absolute;left:0;top:6px;width:19px;height:19px;
  border-radius:50%;background:#0F6FEF;color:#fff;font-size:11.5px;font-weight:800;
  display:grid;place-items:center}
.action{background:#eef5ff;border:1px solid #c9ddfb;border-radius:13px;padding:17px 16px;margin:0 0 8px}
.action h2{margin:0 0 7px}
.action .subject{display:flex;flex-wrap:wrap;align-items:center;gap:9px;background:#fff;
  border:1px solid #c9ddfb;border-radius:9px;padding:10px 12px;margin:0 0 14px}
.action .subject span{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#6b7687}
.action .subject b{font-size:14.5px;color:#16324f}
.netgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 14px}
.net{background:#fff;border:1px solid #e3e7ec;border-radius:11px;padding:12px 13px}
.net b{display:block;font-size:15px;margin-bottom:3px}
.net span{display:block;font-size:13px;color:#5f6b7a;line-height:1.35;margin-bottom:8px}
.net .lnk{font-size:13px;font-weight:700;color:#0F6FEF;text-decoration:none}
@media (max-width:620px){.netgrid{grid-template-columns:1fr}}

/* the sidebar becomes a top strip on a phone */
@media (max-width:760px){
  .shell{display:block}
  .side{position:static;min-height:0;flex:none;width:auto;padding:12px}
  .s-nav{flex-direction:row;overflow-x:auto;gap:6px;-webkit-overflow-scrolling:touch}
  .s-item{flex:0 0 auto;padding:8px 12px;font-size:13.5px}
  .s-item span{white-space:nowrap}
  .s-foot{margin-top:12px}
}

/* ----------------------------------------------------- a locked upsell ---
   A paragraph and a button was too thin to read as an offer. The page now
   says what you get and then SHOWS the real deliverable, blurred, so the
   thing being sold is visible rather than described. */
.olock .pitch{margin:0 0 16px;font-size:16px;line-height:1.55;color:#2c3744}
.getsbox{background:#f6f9fc;border:1px solid #e1e9f2;border-radius:12px;padding:14px 16px 10px;margin:0 0 16px}
.getsbox .kicker{margin:0 0 6px}
.getsbox .ticks li{padding:5px 0 5px 26px;font-size:14.5px}

.peek{position:relative;max-height:300px;overflow:hidden;border:1px solid #e3e7ec;
  border-radius:12px;background:#fff;margin:0 0 18px}
.peekin{padding:16px 16px 0;filter:blur(3.5px);opacity:.8;pointer-events:none;user-select:none;
  transform:scale(.995)}
/* the blurred preview must never be reachable by keyboard or a screen reader */
.peekin a,.peekin button{pointer-events:none}
.peekfade{position:absolute;left:0;right:0;bottom:0;height:160px;
  background:linear-gradient(rgba(255,255,255,0),#fff 78%)}
.peekchip{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
  background:#10141c;color:#fff;border-radius:999px;padding:7px 14px;
  font-size:12.5px;font-weight:700;white-space:nowrap;box-shadow:0 6px 18px rgba(16,20,28,.22)}
.guar{margin:10px 0 0;text-align:center;font-size:12.5px;color:#6b7687}
@media (prefers-reduced-motion:reduce){.peekin{filter:blur(3.5px)}}