/* ════════════════════════════════════════════════════════════════════════════
   YourBuddyInTech — one stylesheet for the whole site.

   Every page used to carry its own copy of the colours, the buttons and the
   nav, which is why the site looked like three different products stitched
   together. Change something here and it changes everywhere.
   ════════════════════════════════════════════════════════════════════════════ */

:root{
  --orange:#FF6B35; --orange-dark:#E5541F; --orange-soft:rgba(255,107,53,.09);
  --navy:#1E3A5F; --navy-deep:#14293F; --navy-ink:#0F1D2E;
  --cream:#F8F5F1; --white:#fff;
  --line:#E6E1DA; --line-soft:#F0ECE6;
  --ink:#1A2433; --muted:#5B6676; --faint:#8A94A3;
  --green:#15803D; --green-soft:rgba(21,128,61,.1);
  --red:#B91C1C; --red-soft:rgba(185,28,28,.08);
  --shadow-sm:0 1px 2px rgba(15,29,46,.05), 0 2px 8px rgba(15,29,46,.04);
  --shadow-md:0 2px 4px rgba(15,29,46,.05), 0 12px 32px rgba(15,29,46,.07);
  --r:14px;
  --wrap:1120px;
}
*{margin:0;padding:0;box-sizing:border-box;}
/* An element with `hidden` must stay hidden. Any later rule that sets display —
   flex, grid, block — silently beats the attribute, which is how a "Loading…"
   panel ended up sitting on top of a page that had finished loading. */
[hidden]{display:none !important;}
html{scroll-behavior:smooth;}
body{background:var(--cream);color:var(--ink);font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3,.display{font-family:'Poppins',system-ui,sans-serif;font-weight:700;letter-spacing:-.02em;line-height:1.15;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px;}
.wrap-narrow{max-width:760px;margin:0 auto;padding:0 28px;}
.eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);}
.lede{font-size:18px;color:var(--muted);line-height:1.62;}
.muted{color:var(--muted);}
:focus-visible{outline:2.5px solid var(--orange);outline-offset:3px;border-radius:4px;}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:'Poppins',sans-serif;font-weight:600;font-size:15px;text-decoration:none;
  padding:15px 28px;border-radius:10px;border:2px solid transparent;cursor:pointer;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;}
.btn-primary{background:var(--orange);color:#fff;box-shadow:0 2px 10px rgba(255,107,53,.28);}
.btn-primary:hover{background:var(--orange-dark);transform:translateY(-2px);box-shadow:0 6px 20px rgba(255,107,53,.34);}
.btn-ghost{border-color:rgba(255,255,255,.28);color:#fff;}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.07);}
.btn-outline{border-color:var(--navy);color:var(--navy);background:transparent;}
.btn-outline:hover{background:var(--navy);color:#fff;transform:translateY(-2px);}
.btn-navy{background:var(--navy);color:#fff;}
.btn-navy:hover{background:var(--navy-ink);transform:translateY(-2px);}
.btn-lg{padding:17px 34px;font-size:16px;}
.btn-sm{padding:11px 18px;font-size:14px;}
.btn-block{width:100%;}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:default;transform:none;box-shadow:none;}

/* ── nav ──────────────────────────────────────────────────────────────── */
nav.site{position:sticky;top:0;z-index:60;background:rgba(248,245,241,.88);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);}
nav.site.on-navy{background:rgba(20,41,63,.9);border-bottom-color:rgba(255,255,255,.1);}
.nav-in{max-width:var(--wrap);margin:0 auto;padding:14px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px;}
.logo{font-family:'Poppins',sans-serif;font-weight:700;font-size:19px;color:var(--navy);text-decoration:none;white-space:nowrap;}
.logo .b{color:var(--orange);}
nav.site.on-navy .logo{color:#fff;}
.nav-right{display:flex;align-items:center;gap:26px;}
.nav-link{font-size:14.5px;font-weight:500;color:var(--muted);text-decoration:none;transition:color .15s;}
.nav-link:hover{color:var(--navy);}
nav.site.on-navy .nav-link{color:rgba(255,255,255,.7);}
nav.site.on-navy .nav-link:hover{color:#fff;}
.nav-cta{background:var(--navy);color:#fff;padding:10px 18px;border-radius:8px;font-size:14px;
  font-weight:600;font-family:'Poppins',sans-serif;text-decoration:none;transition:background .2s;white-space:nowrap;}
.nav-cta:hover{background:var(--orange);}
.nav-pill{display:inline-flex;align-items:center;gap:7px;background:var(--white);border:1.5px solid var(--line);
  border-radius:20px;padding:7px 14px;font-size:13px;font-weight:600;color:var(--navy);white-space:nowrap;}
.nav-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex-shrink:0;}
.nav-pill.low .dot{background:var(--orange);}
.nav-pill.empty .dot{background:var(--red);}
@media(max-width:820px){.nav-right .nav-link{display:none;}}

/* ── sections ─────────────────────────────────────────────────────────── */
section.band{padding:88px 0;}
section.band.tight{padding:60px 0;}
section.band.on-white{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.band-head{max-width:680px;margin-bottom:46px;}
.band-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.band-head h2{font-size:clamp(27px,3.1vw,38px);color:var(--navy);margin:14px 0 14px;}

/* page header for inner pages */
.page-head{background:var(--navy);color:#fff;padding:60px 0 66px;position:relative;overflow:hidden;}
.page-head::before{content:"";position:absolute;inset:0;
  background:radial-gradient(800px 360px at 80% -10%, rgba(255,107,53,.18), transparent 62%);}
.page-head .wrap,.page-head .wrap-narrow{position:relative;}
.page-head h1{font-size:clamp(28px,3.6vw,42px);color:#fff;margin:14px 0 14px;}
.page-head p{color:rgba(255,255,255,.74);font-size:17.5px;max-width:620px;line-height:1.6;}

/* ── the funnel rail: where am I in this ──────────────────────────────── */
.rail{display:flex;align-items:center;gap:0;flex-wrap:wrap;margin-top:30px;}
.rail-step{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600;
  color:rgba(255,255,255,.44);white-space:nowrap;}
.rail-step .n{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:700;border:1.5px solid rgba(255,255,255,.26);flex-shrink:0;}
.rail-step.done{color:rgba(255,255,255,.72);}
.rail-step.done .n{background:var(--green);border-color:var(--green);color:#fff;}
.rail-step.now{color:#fff;}
.rail-step.now .n{background:var(--orange);border-color:var(--orange);color:#fff;
  box-shadow:0 0 0 5px rgba(255,107,53,.2);}
.rail-line{flex:1;height:1.5px;background:rgba(255,255,255,.18);margin:0 14px;min-width:20px;}
.rail.on-light .rail-step{color:var(--faint);}
.rail.on-light .rail-step .n{border-color:var(--line);}
.rail.on-light .rail-step.now{color:var(--navy);}
.rail.on-light .rail-line{background:var(--line);}
@media(max-width:700px){
  .rail{flex-direction:column;align-items:flex-start;gap:12px;}
  .rail-line{display:none;}
}

/* ── cards ────────────────────────────────────────────────────────────── */
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;
  box-shadow:var(--shadow-sm);}
.card-lift{box-shadow:var(--shadow-md);}
.grid{display:grid;gap:18px;}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(262px,1fr));}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(232px,1fr));}
.tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:4px 9px;border-radius:5px;}
.tag.free{background:var(--green-soft);color:var(--green);}
.tag.paid{background:var(--orange-soft);color:var(--orange-dark);}
.tag.locked{background:#EFEDE9;color:var(--faint);}

/* ── forms ────────────────────────────────────────────────────────────── */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;}
.field label{font-size:13px;font-weight:600;color:var(--navy);}
.field input,.field textarea,.field select{font-family:'Inter',sans-serif;font-size:16px;
  padding:14px 15px;border:1.5px solid #D9D3CB;border-radius:10px;background:var(--white);
  color:var(--ink);width:100%;transition:border-color .15s, box-shadow .15s;}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(255,107,53,.13);}
.field .hint{font-size:12.5px;color:var(--faint);}
.note{padding:13px 15px;border-radius:10px;font-size:14px;line-height:1.5;}
.note.err{background:var(--red-soft);border:1px solid rgba(185,28,28,.25);color:var(--red);}
.note.ok{background:var(--green-soft);border:1px solid rgba(21,128,61,.25);color:var(--green);}
.note.info{background:var(--orange-soft);border:1px solid rgba(255,107,53,.25);color:var(--orange-dark);}

/* ── footer ───────────────────────────────────────────────────────────── */
footer.site{background:var(--navy-ink);color:rgba(255,255,255,.62);padding:56px 0 34px;font-size:14.5px;}
.f-top{display:flex;justify-content:space-between;gap:34px;flex-wrap:wrap;padding-bottom:30px;
  border-bottom:1px solid rgba(255,255,255,.1);}
.f-logo{font-family:'Poppins',sans-serif;font-weight:700;font-size:19px;color:#fff;}
.f-logo .b{color:var(--orange);}
.f-tag{margin-top:7px;font-size:14px;color:rgba(255,255,255,.45);max-width:290px;}
.f-cols{display:flex;gap:56px;flex-wrap:wrap;}
.f-col h5{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.4);margin-bottom:13px;}
.f-col a{display:block;color:rgba(255,255,255,.7);text-decoration:none;margin-bottom:9px;transition:color .15s;}
.f-col a:hover{color:var(--orange);}
.f-bot{padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:13px;color:rgba(255,255,255,.35);}

/* ── prose (legal pages) ──────────────────────────────────────────────── */
.prose{font-size:16px;line-height:1.72;color:var(--muted);}
.prose h2{font-size:22px;color:var(--navy);margin:38px 0 12px;}
.prose h3{font-size:17px;color:var(--navy);margin:26px 0 8px;}
.prose p{margin-bottom:14px;}
.prose ul{margin:0 0 16px 20px;}
.prose li{margin-bottom:8px;}
.prose a{color:var(--orange-dark);}
.prose strong{color:var(--ink);}
.prose .updated{font-size:13.5px;color:var(--faint);}

@media(max-width:900px){ section.band{padding:66px 0;} }
@media(max-width:520px){
  .wrap,.wrap-narrow,.nav-in{padding-left:18px;padding-right:18px;}
  .btn{width:100%;}
  .nav-in .btn,.nav-cta{width:auto;}
}


/* ════════════════════════════════════════════════════════════════════════════
   THE APP — the control panel behind the login.

   Black, not navy. And a panel, not a page: the person reading it has already
   bought in, so there is nothing here to sell them. Labels, numbers, controls.
   ════════════════════════════════════════════════════════════════════════════ */
:root{
  --k-bg:#000; --k-p:#0C0C0E; --k-p2:#141418; --k-line:#232328; --k-line2:#33333A;
  --k-tx:#F2F2F4; --k-mu:#8A8A94; --k-dim:#5C5C66;
  --k-ok:#3DDC84; --k-warn:#FFB020;
}
body.app{background:var(--k-bg);color:var(--k-tx);}
body.app nav.site{background:rgba(0,0,0,.86);border-bottom:1px solid var(--k-line);}
body.app .logo{color:#fff;}
body.app .nav-link{color:var(--k-mu);font-size:14px;}
body.app .nav-link:hover,body.app .nav-link.on{color:#fff;}
body.app .nav-cta{background:var(--k-p2);color:var(--k-tx);border:1px solid var(--k-line);}
body.app .nav-cta:hover{background:var(--orange);border-color:var(--orange);color:#fff;}
body.app .nav-pill{background:var(--k-p2);border-color:var(--k-line);color:var(--k-tx);font-variant-numeric:tabular-nums;}
body.app footer.site{background:#000;border-top:1px solid var(--k-line);color:var(--k-dim);}
body.app footer.site .f-col a,body.app footer.site .f-tag,body.app footer.site .f-bot{color:var(--k-dim);}
body.app .btn-outline{border-color:var(--k-line2);color:var(--k-tx);}
body.app .btn-outline:hover{background:var(--k-tx);color:#000;}

.dash{max-width:1180px;margin:0 auto;padding:26px 24px 70px;}
.dash-row{display:grid;gap:16px;margin-bottom:16px;}
.dash-2{grid-template-columns:1.35fr 1fr;}
@media(max-width:940px){.dash-2{grid-template-columns:1fr;}}

.panel{background:var(--k-p);border:1px solid var(--k-line);border-radius:12px;padding:20px;}
.panel-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;}
.panel-h h2{font-family:'Inter',sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--k-dim);}
.panel-h a{font-size:12.5px;color:var(--k-mu);text-decoration:none;}
.panel-h a:hover{color:var(--orange);}

/* balance strip */
.bal-strip{display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;
  background:var(--k-p);border:1px solid var(--k-line);border-radius:12px;padding:22px 24px;}
.bal-n{font-family:'Poppins',sans-serif;font-size:46px;font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums;color:#fff;}
.bal-n.low{color:var(--k-warn);} .bal-n.out{color:#FF5A5A;}
.bal-u{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--k-dim);margin-top:7px;}
.bal-stats{display:flex;gap:30px;flex-wrap:wrap;}
.stat .v{font-family:'Poppins',sans-serif;font-size:19px;font-weight:700;color:var(--k-tx);font-variant-numeric:tabular-nums;}
.stat .l{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--k-dim);margin-top:4px;}
.topup{display:flex;gap:9px;flex-wrap:wrap;}
.tu{display:flex;flex-direction:column;align-items:center;gap:2px;padding:11px 16px;border-radius:9px;
  background:var(--k-p2);border:1px solid var(--k-line2);text-decoration:none;color:var(--k-tx);
  transition:border-color .16s,background .16s;min-width:92px;}
.tu:hover{border-color:var(--orange);background:#1A1A20;}
.tu b{font-family:'Poppins',sans-serif;font-size:16px;}
.tu span{font-size:11px;color:var(--k-mu);}
@media(max-width:860px){.bal-strip{grid-template-columns:1fr;gap:18px;}}

/* scenario launcher */
.launch{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px;}
.lx{background:var(--k-p2);border:1px solid var(--k-line);border-radius:10px;padding:14px;
  text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:5px;
  transition:border-color .16s,background .16s;}
.lx:hover{border-color:var(--orange);background:#1A1A20;}
.lx .t{font-size:14px;font-weight:600;color:var(--k-tx);line-height:1.3;}
.lx .s{font-size:11.5px;color:var(--k-dim);display:flex;align-items:center;gap:5px;margin-top:auto;padding-top:8px;}
.lx .s i{width:6px;height:6px;border-radius:50%;background:var(--k-line2);font-style:normal;flex-shrink:0;}
.lx.done .s i{background:var(--k-ok);}
.lx.custom{border-style:dashed;}

/* documents */
.docs{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
@media(max-width:900px){.docs{grid-template-columns:repeat(3,1fr);}}
@media(max-width:680px){.docs{grid-template-columns:repeat(2,1fr);}}
.doc{background:var(--k-p2);border:1px solid var(--k-line);border-radius:10px;overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .16s;}
.doc:hover{border-color:var(--k-line2);}
.doc .shot{position:relative;background:#fff;aspect-ratio:1/1.35;overflow:hidden;}
.doc .shot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;}
.doc.locked .shot img{filter:blur(4px) saturate(.4);}
.doc .lockbadge{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.45);font-size:20px;}
.doc .body{padding:11px 12px 13px;display:flex;flex-direction:column;gap:3px;flex:1;}
.doc .m{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--k-dim);}
.doc .n{font-size:13.5px;font-weight:600;color:var(--k-tx);line-height:1.3;}
.doc .meta{font-size:11.5px;color:var(--k-dim);margin-top:2px;}
.doc .act{margin-top:auto;padding-top:10px;}
.doc .act button,.doc .act a{width:100%;display:block;text-align:center;padding:8px;border-radius:7px;
  font-size:12.5px;font-weight:600;font-family:'Inter',sans-serif;cursor:pointer;border:1px solid var(--k-line2);
  background:transparent;color:var(--k-tx);text-decoration:none;transition:all .16s;}
.doc .act button:hover{background:var(--k-tx);color:#000;}
.doc .act .buy{background:var(--orange);border-color:var(--orange);color:#fff;}
.doc .act .buy:hover{background:var(--orange-dark);color:#fff;}

/* recent calls */
.calls{display:flex;flex-direction:column;}
.call{display:grid;grid-template-columns:1fr auto;gap:10px;padding:11px 0;
  border-bottom:1px solid var(--k-line);font-size:13.5px;}
.call:last-child{border-bottom:none;}
.call .w{color:var(--k-tx);}
.call .d{color:var(--k-dim);font-size:12px;margin-top:2px;}
.call .t{color:var(--k-mu);font-variant-numeric:tabular-nums;font-size:13px;}
.empty-note{font-size:13px;color:var(--k-dim);line-height:1.55;padding:6px 0;}