[hidden]{display:none!important}
/* =========================================================
   Legacy Roots Media · onboarding + add-on pages
   Builds on lrm-base.css (same tokens, type, buttons, nav)
   ========================================================= */
.pnav .wrap{height:68px}
.pnav .help{font-size:13px;color:var(--gray);text-decoration:none;white-space:nowrap}
.pnav .help b{color:#fff;font-weight:700}
.pnav .help:hover b{color:var(--magenta)}
.pnav .back{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:#c7c7cf;border:1px solid var(--line-d2);padding:10px 12px;white-space:nowrap}
.pnav .back:hover{border-color:#fff;color:#fff}

/* page hero */
.phero{position:relative;overflow:hidden;background:
  radial-gradient(55% 60% at 85% 30%,rgba(168,85,247,.16),transparent 70%),
  radial-gradient(40% 40% at 70% 80%,rgba(255,46,154,.10),transparent 70%),var(--black);
  padding:clamp(56px,8vw,110px) 0 clamp(56px,7vw,96px)}
.phero::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:80px 80px;mask-image:radial-gradient(70% 70% at 70% 40%,#000,transparent);-webkit-mask-image:radial-gradient(70% 70% at 70% 40%,#000,transparent);pointer-events:none}
.phero .wrap{position:relative;z-index:1}
.phero-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(32px,6vw,90px);align-items:center}
.phero h1{font-size:clamp(46px,6.6vw,96px);font-stretch:72%;font-weight:900;text-transform:uppercase;line-height:.9;letter-spacing:-.02em;margin:0 0 24px}
.phero h1.sm{font-size:clamp(40px,5.4vw,76px)}
.phero .sub{font-size:clamp(17px,1.5vw,20px);color:#c9c9d1;max-width:54ch}
.phero .sub + .sub{margin-top:14px}
.phero .sub b{color:#fff}
.phero .btns{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:34px}
.btn.xl{font-size:17px;padding:21px 30px}
.chip{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--mag-line);padding:7px 12px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:24px}
.chip i{width:8px;height:8px;border-radius:50%;background:var(--magenta)}
.chip.ok i{background:#57e08f}
.chip[hidden]{display:none}
.textlink.lt{color:#fff}

/* progress card in hero */
.pcard{background:rgba(15,17,22,.92);border:1px solid var(--line-d2);padding:clamp(22px,3vw,34px);box-shadow:0 30px 70px -30px rgba(0,0,0,.8)}
.pcard .k{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--gray);display:flex;justify-content:space-between;gap:10px}
.pcard .k b{color:var(--magenta)}
.pbar{height:3px;background:rgba(255,255,255,.12);margin:14px 0 8px}
.pbar span{display:block;height:100%;background:var(--grad);width:20%;transition:width .8s var(--ease)}
.plist{list-style:none;margin:0;padding:0}
.plist li{display:grid;grid-template-columns:28px 1fr;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line-d);font-weight:700;font-size:15px;color:#6f6f7a}
.plist li:last-child{border-bottom:0}
.plist .dot{width:28px;height:28px;border-radius:50%;border:1.5px solid #3a3a42;display:grid;place-items:center;font-size:11px;font-weight:800}
.plist li.done{color:#c7c7cf}
.plist li.done .dot{background:#57e08f;border-color:#57e08f;color:#08080A}
.plist li.now{color:#fff}
.plist li.now .dot{background:var(--magenta);border-color:var(--magenta);color:#fff;box-shadow:0 0 0 5px rgba(255,46,154,.18)}
.plist li small{display:block;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--magenta);margin-top:2px}

/* journey */
.journey-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,5vw,80px);align-items:end;margin-bottom:clamp(36px,5vw,60px)}
.jsteps{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--black)}
.jstep{display:grid;grid-template-columns:clamp(70px,10vw,140px) minmax(0,1fr) auto;gap:clamp(16px,3vw,40px);align-items:center;padding:clamp(22px,3vw,34px) 0;border-bottom:1px solid var(--line-strong)}
.jstep .n{font-family:var(--display);font-stretch:70%;font-weight:900;font-size:clamp(56px,7vw,100px);line-height:.8;color:transparent;-webkit-text-stroke:1.5px rgba(8,8,10,.25)}
.jstep h3{font-size:clamp(24px,2.8vw,38px);font-stretch:76%;font-weight:900;text-transform:uppercase;line-height:1}
.jstep p{margin-top:10px;color:var(--ink-soft);max-width:60ch}
.jstep .state{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gray-d);display:block;margin-bottom:8px}
.jstep .go{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--black);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px;white-space:nowrap}
.jstep .go:hover{color:var(--magenta)}
.jstep.now{background:var(--black);color:#fff;border-bottom:0;padding-left:clamp(18px,3vw,40px);padding-right:clamp(18px,3vw,40px);margin:0 0 0;box-shadow:0 30px 60px -30px rgba(8,8,10,.55)}
.jstep.now .n{-webkit-text-stroke:0;color:var(--magenta)}
.jstep.now p{color:#c7c7cf}
.jstep.now .state{color:var(--magenta)}
.jstep.next .n{-webkit-text-stroke-color:rgba(8,8,10,.18)}
.jstep.next h3{color:#3a3a42}

/* strip */
.strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line-d)}
.strip > div{padding:26px 24px 0 0}
.strip > div + div{padding-left:24px;border-left:1px solid var(--line-d)}
.strip .d{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--magenta)}
.strip h3{font-size:clamp(34px,4vw,56px);font-stretch:70%;font-weight:900;text-transform:uppercase;margin:8px 0 10px;line-height:.85}
.strip p{color:#c2c2ca;font-size:15px}

/* add-on rows */
.arows{border-top:1px solid var(--black)}
.arow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:clamp(14px,3vw,36px);align-items:center;padding:22px 0;border-bottom:1px solid var(--line)}
.arow b{display:block;font-family:var(--display);font-stretch:80%;font-weight:900;font-size:22px;text-transform:uppercase;line-height:1.05}
.arow span{font-size:14.5px;color:var(--ink-soft)}
.arow .pr{font-family:var(--display);font-stretch:74%;font-weight:900;font-size:30px;white-space:nowrap;text-align:right}
.arow .pr small{display:block;font-family:var(--sans);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-d)}
.btn.sm{padding:11px 16px;font-size:12px;background:var(--black);color:#fff;white-space:nowrap}
.btn.sm:hover{background:var(--magenta)}

/* help band */
.helpband{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.helpband p.big{font-family:var(--display);font-stretch:78%;font-weight:900;text-transform:uppercase;font-size:clamp(24px,3vw,40px);line-height:1}
.contact{display:flex;flex-wrap:wrap;gap:12px 30px}
.contact a{text-decoration:none;font-weight:700;font-size:16px}
.contact a:hover{color:var(--magenta)}
.contact small{display:block;font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gray);margin-bottom:2px}

/* step pages */
.stepper{display:flex;gap:6px;margin-bottom:26px;flex-wrap:wrap}
.stepper a,.stepper span{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#6f6f7a;text-decoration:none;border:1px solid var(--line-d);padding:7px 10px}
.stepper .on{color:#fff;border-color:var(--magenta);background:rgba(255,46,154,.12)}
.stepper a:hover{color:#fff}
.panel{background:#fff;border:1px solid var(--line-strong);padding:clamp(24px,3.4vw,44px)}
.panel h2{font-size:clamp(28px,3.2vw,44px);font-stretch:76%;font-weight:900;text-transform:uppercase;margin-bottom:14px}
.panel .k{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--gray-d);margin-bottom:10px}
.state-box{border-left:3px solid var(--magenta);background:var(--off);padding:18px 20px;margin:20px 0}
.state-box b{display:block;font-size:17px;margin-bottom:4px}
.state-box p{color:var(--ink-soft)}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,60px);align-items:start}
.topics{list-style:none;margin:0;padding:0;counter-reset:t}
.topics li{counter-increment:t;display:grid;grid-template-columns:40px 1fr;padding:14px 0;border-bottom:1px solid var(--line)}
.topics li::before{content:counter(t,decimal-leading-zero);font-family:var(--display);font-weight:900;color:var(--magenta)}
.topics b{display:block;font-size:16px}
.topics span{font-size:14px;color:var(--ink-soft)}
.checks{list-style:none;margin:0;padding:0}
.checks label{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line);cursor:pointer}
.checks input{width:18px;height:18px;accent-color:var(--magenta);margin-top:3px;flex:0 0 auto}
.checks b{display:block;font-size:15.5px}
.checks span{font-size:13.5px;color:var(--ink-soft)}
.nextrow{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:34px;padding-top:22px;border-top:1px solid var(--line)}
.nextrow a.textlink{color:var(--black);text-decoration:none}
.dark-link{color:#fff}

/* add-on page */
.aprice{font-family:var(--display);font-stretch:72%;font-weight:900;font-size:clamp(64px,8vw,110px);line-height:.85}
.aprice small{font-size:.24em;font-stretch:100%;color:#a9a9b3;font-weight:700;margin-left:6px}

.foot .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.foot .tag{font-family:var(--display);font-stretch:78%;font-weight:900;text-transform:uppercase;font-size:clamp(18px,2vw,24px)}
.foot .tag span{color:var(--magenta)}
.foot .meta{font-size:13px;color:var(--gray)}
.foot .meta a{text-decoration:none;color:#d0d0d7}
.foot{border-top:1px solid var(--line-d);padding:30px 0 40px;background:var(--black)}

@media (max-width:900px){
  .phero-grid,.journey-head,.two{grid-template-columns:minmax(0,1fr)}
  .strip{grid-template-columns:minmax(0,1fr)}
  .strip > div + div{padding-left:0;border-left:0;border-top:1px solid var(--line-d);margin-top:22px}
}
@media (max-width:640px){
  .jstep{grid-template-columns:minmax(0,1fr)}
  .jstep .n{font-size:56px}
  .arow{grid-template-columns:minmax(0,1fr) auto}
  .arow .btn{grid-column:1 / -1;justify-self:start}
  .pnav .help{display:none}
  .brand .wm b{font-size:15px;white-space:nowrap}
  .pnav .back{padding:8px 9px;font-size:10.5px}
  .brand .mk{display:none}
  .btn.xl{width:100%}
  .brand .wm small{display:none}
}

.arow.incart{background:linear-gradient(90deg,var(--mag-soft),transparent 70%);border-left:3px solid var(--magenta);padding-left:14px}
.arow .btn.primary{background:var(--magenta)}
.cartnote{margin-top:20px;border-left:3px solid var(--magenta);background:var(--off);padding:14px 16px;font-size:15px}
.cartnote b{display:block}
