/* ==========================================================================
   BUSINESS
   The page's own stylesheet, ported with it, plus the rules it still uses
   from the prototype's shared base.css that nothing else here needed.
   Kept per page on purpose: these carry names like .thumb, .d and .m that
   would collide the moment they went global.
   ========================================================================== */
.sec{padding:44px 0}
@media(min-width:768px){
.sec{padding:60px 0}
}
@media(min-width:1024px){
.sec{padding:76px 0}
}
#whyget .whylead{display:grid;gap:22px;grid-template-columns:1fr;margin-top:32px}
@media(min-width:768px){
#whyget .whylead{grid-template-columns:repeat(3,1fr);gap:32px}
}
#whyget .whypoint{border-top:2px solid var(--brand-200);padding-top:16px}
#whyget .whypoint .n{font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:13px;letter-spacing:.08em;color:var(--brand-700);margin-bottom:10px}
#whyget .whypoint p{font-size:.96rem;color:var(--slate-600)}
#whyget .whatget{max-width:64ch;margin-top:56px}
#whyget .whatget h3{font-size:1.5rem;color:var(--navy-900);letter-spacing:-.02em}
#whyget .whatget p{margin-top:12px;color:var(--slate-600);font-size:1.0625rem}
#hiw .stepper{margin-top:44px}
#hiw .srail{display:flex;align-items:flex-start;gap:0;position:relative}
#hiw .stab{flex:1 1 0;min-width:0;background:none;border:none;font:inherit;cursor:pointer;padding:0 8px;display:flex;flex-direction:column;align-items:center;gap:10px;position:relative;color:var(--slate-600)}
#hiw .stab::before{content:'';position:absolute;top:19px;left:-50%;width:100%;height:1px;background:var(--slate-300);z-index:0}
#hiw .stab:first-child::before{display:none}
#hiw .stab .d{width:38px;height:38px;border-radius:var(--r-pill);border:1px solid var(--slate-300);background:var(--white);color:var(--slate-600);font-family:'IBM Plex Mono',monospace;font-size:13px;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;transition:all .16s ease-out}
#hiw .stab .t{font-family:'Inter Tight';font-weight:600;font-size:.9rem;color:var(--slate-600);text-align:center;line-height:1.25;letter-spacing:-.01em;transition:color .16s ease-out}
#hiw .stab:hover .d{border-color:var(--navy-800)}
#hiw .stab.on .d{background:var(--navy-900);border-color:var(--navy-900);color:var(--white);font-weight:600}
#hiw .stab.on .t{color:var(--navy-900);font-weight:700}
#hiw .stab.on::after{content:'';position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);width:26px;height:2px;background:var(--accent-500);border-radius:2px}
#hiw .spager{margin-top:34px;display:flex;align-items:stretch;gap:14px}
#hiw .spager:focus-visible{outline:2px solid var(--accent-800);outline-offset:5px;border-radius:var(--r-panel)}
#hiw .sview{flex:1 1 auto;min-width:0;overflow:hidden}
#hiw .strack{display:flex;gap:20px;will-change:transform;transition:transform .32s cubic-bezier(.4,0,.2,1)}
#hiw .spanel{flex:0 0 calc((100% - 20px) / 2);box-sizing:border-box;border:1px solid var(--slate-500);border-radius:var(--r-panel);background:var(--white);overflow:hidden;box-shadow:var(--sh-rest);display:flex;flex-direction:column}
#hiw .sviz{background:var(--paper-100);position:relative;min-height:168px;display:flex;align-items:center;justify-content:center;padding:28px;border-bottom:1px solid var(--slate-200)}
#hiw .hicon{width:96px;height:96px;border-radius:var(--r-pill);background:var(--brand-50);border:1px solid var(--brand-200);display:flex;align-items:center;justify-content:center}
#hiw .hicon svg{width:44px;height:44px;color:var(--brand-600)}
#hiw .sbody{padding:26px 28px;display:flex;flex-direction:column;flex:1 1 auto}
#hiw .sbody .sk{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-700)}
#hiw .sbody h3{font-size:1.3rem;margin-top:8px;color:var(--navy-900)}
#hiw .sbody p{font-size:.96rem;margin-top:12px;max-width:46ch;color:var(--slate-600)}
#hiw .sarrow{flex:0 0 auto;align-self:center;width:46px;height:46px;border-radius:var(--r-pill);border:1px solid var(--accent-800);background:var(--white);color:var(--accent-800);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .16s ease-out,color .16s ease-out,border-color .16s ease-out}
#hiw .sarrow svg{width:20px;height:20px}
#hiw .sarrow:hover:not(:disabled){background:var(--accent-500);color:var(--navy-900);border-color:var(--accent-500)}
#hiw .sarrow:focus-visible{outline:2px solid var(--accent-800);outline-offset:2px}
#hiw .sarrow:disabled{border-color:var(--slate-300);color:var(--slate-400);cursor:not-allowed}
@media(max-width:760px){
#hiw .stab{padding:0 3px;gap:8px}
#hiw .stab .d{width:30px;height:30px;font-size:11.5px}
#hiw .stab::before{top:15px}
#hiw .stab .t{font-size:.74rem;line-height:1.2}
#hiw .stab.on::after{width:20px}
#hiw .sarrow{display:none}
#hiw .sview{overflow:visible}
#hiw .strack{display:flex;flex-direction:column;gap:20px;transform:none!important;transition:none}
#hiw .spanel{flex:0 0 auto}
#hiw .sviz{min-height:150px;padding:22px}
#hiw .hicon{width:84px;height:84px}
#hiw .hicon svg{width:38px;height:38px}
#hiw .sbody{padding:22px 20px}
}
@media(min-width:1040px){
.pgrid.three{grid-template-columns:repeat(3,1fr)}
}
.acred{margin-top:40px}
.acred-marks{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin:0;padding:0}
.acred-marks li{display:flex;align-items:center;gap:28px}
.acred-marks li+li::before{content:"";width:1px;height:34px;background:var(--slate-300);flex:0 0 auto}
.acred-marks img{display:block;height:var(--acred-h,72px);width:auto}
.acred.center .acred-marks{justify-content:center}
@media(max-width:600px){
.acred-marks{gap:12px 18px}
.acred-marks img{--acred-h:52px}
.acred-marks li+li::before{display:none}
.acred-marks li{gap:18px}
}
.curr .pm{flex-shrink:0;width:20px;height:20px;color:var(--slate-500);transition:transform .16s ease-out}
.curr details[open] summary .pm{transform:rotate(45deg)}
@media(prefers-reduced-motion:reduce){
.curr .pm{transition:none}
}
.stars{display:inline-flex;gap:2px;line-height:0}
.stars svg{width:14px;height:14px;fill:var(--warning-700)}
.rgrid{display:grid;gap:20px;grid-template-columns:1fr;margin-top:40px}
@media(min-width:720px){
.rgrid{grid-template-columns:1fr 1fr}
}
@media(min-width:1080px){
.rgrid{grid-template-columns:repeat(3,1fr)}
}
.rcard{background:var(--white);border:1px solid var(--slate-500);border-radius:var(--r-card);padding:22px;box-shadow:var(--sh-rest);display:flex;flex-direction:column}
.rtop{display:flex;gap:12px;align-items:center}
.ravatar{width:44px;height:44px;border-radius:50%;background:var(--brand-100);color:var(--brand-700);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:'Inter Tight';font-weight:700}
.rname{font-family:'Inter Tight',sans-serif;font-weight:600;font-size:.95rem;color:var(--navy-900);line-height:1.3}
.rrole{font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--slate-600);margin-top:5px;line-height:1.45}
.rcard blockquote{margin-top:15px;font-size:.9rem;color:var(--slate-600);line-height:1.6;flex:1}
.rcard .rdate{margin-top:14px;padding-top:14px;border-top:1px solid var(--slate-200);font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--slate-600)}
.cart-empty .ic{width:64px;height:64px;border-radius:50%;background:var(--paper-100);color:var(--slate-500);display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.cart-empty .ic svg{width:30px;height:30px}
.final .nodegrid{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:
    radial-gradient(circle at 0 0, rgba(140,138,229,.5) 1.6px, transparent 2px),
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:44px 44px,44px 44px,44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 40%,#000 0%,transparent 75%);
  mask-image:radial-gradient(ellipse 80% 80% at 50% 40%,#000 0%,transparent 75%)}
.brand>span{display:flex;flex-direction:column}
.brand br{display:none}
