/* ============================================================
   Configure your PharmGrowth stack — /pricing
   Full-screen stepped configurator: live preview left, steps right.
   ============================================================ */

.cfg{position:fixed;inset:0;z-index:200;display:grid;grid-template-columns:1fr 480px;background:var(--cream);overflow:hidden}
body.cfg-on{overflow:hidden}

/* ── top rail ───────────────────────────────────────────── */
.cfg-rail{position:absolute;top:0;left:0;right:480px;z-index:12;display:flex;align-items:center;gap:1rem;height:66px;padding:0 clamp(1rem,2.5vw,2rem);
  background:linear-gradient(180deg,rgba(11,40,21,.55),transparent)}
.cfg-rail .brand{display:flex;align-items:center;gap:.55rem;color:#fff;font-weight:700;letter-spacing:-.03em}
.cfg-rail .brand b{color:var(--mint)}
.cfg-rail .exit{margin-left:auto;color:rgba(255,255,255,.78);font-size:.86rem;display:inline-flex;align-items:center;gap:.45rem}
.cfg-rail .exit:hover{color:#fff}
.cfg-steps{display:flex;gap:.4rem;align-items:center}
.cfg-steps i{display:block;width:34px;height:3px;border-radius:2px;background:rgba(255,255,255,.26);transition:background .3s}
.cfg-steps i.done{background:rgba(255,255,255,.6)}
.cfg-steps i.on{background:var(--mint)}
@media(max-width:1080px){.cfg-rail{right:0;background:linear-gradient(180deg,rgba(11,40,21,.75),transparent)}}

/* ── live preview (left) ────────────────────────────────── */
.cfg-stage{position:relative;overflow:hidden;background:linear-gradient(165deg,#0A2413,#12481F 55%,#14512B);display:grid;place-items:center;padding:clamp(3.6rem,5vw,4rem) clamp(1.5rem,4vw,3.5rem) clamp(1.5rem,4vw,3rem)}
.cfg-stage .glow{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none}
.cfg-stage .g1{width:60vw;height:44vw;left:-16%;top:-14%;background:radial-gradient(closest-side,rgba(46,158,91,.6),transparent);animation:cdrift1 30s var(--ease) infinite alternate}
.cfg-stage .g2{width:46vw;height:34vw;right:-12%;bottom:-16%;background:radial-gradient(closest-side,rgba(53,208,127,.36),transparent);animation:cdrift2 36s var(--ease) infinite alternate}
@keyframes cdrift1{to{transform:translate3d(6vw,4vw,0) scale(1.14)}}
@keyframes cdrift2{to{transform:translate3d(-5vw,-4vw,0) scale(1.1)}}
.cfg-stage .mesh{position:absolute;inset:-10%;background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:28px 28px;
  mask-image:radial-gradient(110% 80% at 50% 30%,#000 8%,transparent 70%);-webkit-mask-image:radial-gradient(110% 80% at 50% 30%,#000 8%,transparent 70%)}
@media(prefers-reduced-motion:reduce){.cfg-stage .glow{animation:none}}

/* browser mock — a convincing miniature of the site being built */
.mock{position:relative;z-index:3;width:min(820px,100%);border-radius:16px;overflow:hidden;background:#fff;
  box-shadow:0 70px 140px -55px rgba(0,0,0,.75),0 20px 50px -30px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.1);
  transition:transform .6s var(--ease)}
.mock-bar{display:flex;align-items:center;gap:.45rem;height:38px;padding:0 .85rem;background:linear-gradient(180deg,#F6F7F4,#EDEFEA);border-bottom:1px solid #E0E4DE}
.mock-bar i{width:9px;height:9px;border-radius:50%;background:#E5776A;flex:none}
.mock-bar i:nth-child(2){background:#E9B94C}.mock-bar i:nth-child(3){background:#62C27A}
.mock-bar .url{margin-left:.7rem;flex:1;max-width:340px;height:22px;border-radius:6px;background:#fff;border:1px solid #E0E4DE;display:flex;align-items:center;padding:0 .6rem;
  font-family:var(--mono);font-size:.62rem;color:var(--ink);white-space:nowrap;overflow:hidden;box-shadow:0 1px 2px rgba(11,40,21,.04)}
.mock-bar .url em{font-style:normal;color:#8FA398}
.mock-bar .tabs{margin-left:auto;display:flex;gap:.3rem}
.mock-bar .tabs b{width:16px;height:4px;border-radius:2px;background:#D8DDD6;display:block}
.mock-body{max-height:min(70vh,700px);overflow:hidden;position:relative}

/* announcement */
.mk-ann{background:var(--forest);color:rgba(255,255,255,.9);font-size:.56rem;letter-spacing:.02em;text-align:center;padding:.4rem}

/* site nav */
.mk-nav{display:flex;align-items:center;gap:.7rem;padding:.7rem 1.1rem;border-bottom:1px solid #EEF1EE;background:#fff}
.mk-logo{width:28px;height:28px;border-radius:8px;background:var(--green);display:grid;place-items:center;color:#fff;font-size:.75rem;font-weight:700;flex:none;overflow:hidden;transition:background .3s}
.mk-logo.img{background:transparent;border-radius:0;width:auto;max-width:110px;height:28px}
.mk-logo.img img{width:auto;height:100%;object-fit:contain}
.mk-name{font-weight:700;font-size:.88rem;letter-spacing:-.025em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}
.mk-links{display:flex;gap:.75rem;margin-left:1rem;font-size:.6rem;color:var(--slate)}
.mk-links span{white-space:nowrap}
.mk-tel{margin-left:auto;font-size:.58rem;color:var(--mute);font-family:var(--mono)}
.mk-cta{background:var(--green);color:#fff;border-radius:999px;padding:.32rem .68rem;font-size:.58rem;font-weight:600;white-space:nowrap}

/* hero */
.mk-hero{padding:1.5rem 1.1rem 1.3rem;background:linear-gradient(170deg,#F6FBF7 0%,#fff 70%)}
.mk-hero .eb{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--mono);font-size:.53rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.mk-hero .eb i{width:5px;height:5px;border-radius:50%;background:var(--green);display:block}
.mk-hero h4{font-size:1.5rem;letter-spacing:-.04em;margin:.45rem 0 .4rem;color:var(--ink);line-height:1.08}
.mk-hero p{font-size:.66rem;color:var(--slate);max-width:24rem;line-height:1.55}
.mk-hero .btns{display:flex;gap:.4rem;margin-top:.8rem}
.mk-hero .btns b{background:var(--green);color:#fff;border-radius:999px;padding:.34rem .8rem;font-size:.58rem;font-weight:600;box-shadow:0 6px 14px -8px rgba(31,122,69,.8)}
.mk-hero .btns s{text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:.34rem .8rem;font-size:.58rem;color:var(--ink)}
.mk-trust{display:flex;gap:.7rem;margin-top:.9rem;font-size:.52rem;color:var(--mute)}
.mk-hero-in{display:grid;grid-template-columns:1.02fr .98fr;gap:1.1rem;align-items:center}
.mk-shot{margin:0;border-radius:10px;overflow:hidden;aspect-ratio:16/11;position:relative;box-shadow:0 18px 36px -22px rgba(11,40,21,.5)}
.mk-shot img{width:100%;height:100%;object-fit:cover}
.mk-float{position:absolute;left:.5rem;bottom:.5rem;background:rgba(255,255,255,.95);backdrop-filter:blur(6px);border-radius:7px;padding:.3rem .55rem;
  font-size:.52rem;color:var(--ink);display:flex;align-items:center;gap:.3rem;box-shadow:0 6px 14px -8px rgba(11,40,21,.5)}
.mk-float .dot{width:5px;height:5px;border-radius:50%;background:#3FBF63;display:block}

/* stats strip */
.mk-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem;padding:0 1.1rem .9rem;background:#fff}
.mk-strip span{border:1px solid var(--line);border-radius:8px;padding:.45rem .55rem;font-size:.5rem;color:var(--mute);line-height:1.3}
.mk-strip b{display:block;font-size:.78rem;color:var(--ink);letter-spacing:-.02em;margin-bottom:.05rem}

/* sections */
.mk-sec{padding:.2rem 1.1rem 1rem;background:#fff}
.mk-sec-h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:.5rem}
.mk-sec-h b{font-size:.7rem;letter-spacing:-.02em;color:var(--ink)}
.mk-sec-h s{text-decoration:none;font-size:.52rem;color:var(--green)}
.mk-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}
.mk-card{margin:0;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#fff;transition:opacity .45s var(--ease),transform .45s var(--ease);box-shadow:0 4px 10px -8px rgba(11,40,21,.4)}
.mk-card img{width:100%;aspect-ratio:14/10;object-fit:cover}
.mk-card .tx{padding:.4rem .45rem .5rem}
.mk-card b{display:block;font-size:.57rem;color:var(--ink);letter-spacing:-.01em}
.mk-card s{text-decoration:none;display:block;font-size:.49rem;color:var(--mute);margin-top:.08rem}
.mk-card.off{opacity:0;transform:translateY(6px) scale(.97);pointer-events:none}

/* stack modules */
.mk-modsec{background:linear-gradient(180deg,#fff,#F7FAF8);border-top:1px solid #EEF1EE;padding-bottom:1.1rem}
.mk-mods{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem}
.mk-mod{border:1px solid var(--line);border-radius:9px;padding:.5rem .55rem;display:flex;gap:.45rem;align-items:flex-start;background:#fff;
  opacity:0;transform:translateY(8px) scale(.97);transition:opacity .45s var(--ease),transform .45s var(--ease);min-height:44px}
.mk-mod.on{opacity:1;transform:none}
.mk-mod .ic{width:18px;height:18px;border-radius:5px;background:var(--sage);color:var(--green);display:grid;place-items:center;flex:none}
.mk-mod .ic svg{width:11px;height:11px}
.mk-mod b{display:block;font-size:.55rem;color:var(--ink);line-height:1.25}
.mk-mod s{text-decoration:none;font-size:.47rem;color:var(--mute);line-height:1.3;display:block}
.mk-mod.acc{background:var(--sage);border-color:var(--sage-2)}
.mk-mod.acc .ic{background:#fff}

/* mock footer */
.mk-foot{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 1.1rem;background:var(--forest);color:rgba(255,255,255,.62);font-size:.5rem}
.mk-foot span:first-child{color:#fff;font-weight:600}

/* satellites */
.sats{position:absolute;z-index:4;inset:0;pointer-events:none}
.sat{position:absolute;background:#fff;border-radius:12px;box-shadow:0 30px 60px -28px rgba(0,0,0,.6);padding:.7rem .85rem;display:flex;align-items:center;gap:.6rem;
  opacity:0;transform:translateY(14px) scale(.94);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.sat.on{opacity:1;transform:none}
.sat .ic{width:30px;height:30px;border-radius:9px;background:var(--sage);color:var(--green);display:grid;place-items:center;flex:none}
.sat .ic svg{width:15px;height:15px}
.sat b{display:block;font-size:.72rem;color:var(--ink)}
.sat s{text-decoration:none;font-size:.62rem;color:var(--mute)}
.sat-app{right:1.5%;top:9%}
.sat-routly{left:1%;bottom:26%}
.sat-ledger{right:2%;bottom:8%}
.sat-seo{left:1%;top:9%}
@media(max-width:1500px){.sat{display:none}}

/* phone mock for the patient app */
.mk-phone{position:absolute;right:1.5%;bottom:3%;width:124px;z-index:5;border-radius:18px;background:#fff;box-shadow:0 40px 70px -30px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.1);
  overflow:hidden;opacity:0;transform:translateY(20px) scale(.94);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.mk-phone.on{opacity:1;transform:none}
.mk-phone .top{height:16px;background:#111;border-radius:0 0 8px 8px;width:52px;margin:0 auto}
.mk-phone .b{padding:.6rem}
.mk-phone .b .l{height:6px;border-radius:3px;background:var(--sage-2);margin-bottom:.35rem}
.mk-phone .b .l.s{width:60%}
.mk-phone .b .card{background:var(--sage);border-radius:8px;height:40px;margin-top:.5rem}
@media(max-width:1340px){.mk-phone{display:none}}

/* ── panel (right) ──────────────────────────────────────── */
.cfg-panel{background:var(--paper);border-left:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden;position:relative}
.cfg-scroll{flex:1;overflow-y:auto;padding:clamp(1.4rem,2.4vw,2.2rem) clamp(1.2rem,2.2vw,2rem) 1rem;scrollbar-width:thin}
.cfg-head{margin-bottom:1.4rem}
.cfg-head .n{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.cfg-head h2{font-size:clamp(1.5rem,2.4vw,1.95rem);letter-spacing:-.035em;margin:.5rem 0 .4rem}
.cfg-head p{font-size:.93rem;color:var(--slate)}

/* fields */
.cfg-f{margin-bottom:1.1rem}
.cfg-f label{display:block;font-size:.8rem;font-weight:600;margin-bottom:.4rem}
.cfg-f label em{font-style:normal;font-weight:400;color:var(--mute)}
.cfg-f input,.cfg-f select,.cfg-f textarea{width:100%;font-family:inherit;font-size:.98rem;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:10px;padding:.75rem .85rem;transition:border-color var(--fast),box-shadow var(--fast)}
.cfg-f input:focus,.cfg-f select:focus{outline:0;border-color:var(--green);box-shadow:0 0 0 3px rgba(46,158,91,.14)}
.cfg-f .hint{font-size:.78rem;color:var(--mute);margin-top:.4rem}

/* choice chips */
.chips-row{display:flex;gap:.45rem;flex-wrap:wrap}
.chip-b{border:1px solid var(--line);background:#fff;border-radius:10px;padding:.6rem .95rem;font-family:inherit;font-size:.9rem;font-weight:500;color:var(--ink);cursor:pointer;transition:all var(--fast)}
.chip-b:hover{border-color:var(--green)}
.chip-b.on{background:var(--forest);border-color:var(--forest);color:#fff}

/* option cards */
.opts{display:grid;gap:.6rem}
.opt{border:1px solid var(--line);background:#fff;border-radius:14px;padding:1rem 1.05rem;cursor:pointer;transition:border-color var(--fast),box-shadow var(--fast),background var(--fast);position:relative}
.opt:hover{border-color:var(--green-2)}
.opt.on{border-color:var(--green);box-shadow:0 0 0 1px var(--green),0 14px 30px -22px rgba(31,122,69,.6)}
.opt.locked{opacity:.62;cursor:not-allowed;background:var(--sage)}
.opt-top{display:flex;align-items:flex-start;gap:.8rem}
.opt .box{width:22px;height:22px;border-radius:7px;border:1.5px solid var(--line-2);flex:none;display:grid;place-items:center;margin-top:.1rem;transition:all var(--fast)}
.opt .box svg{width:13px;height:13px;color:#fff;opacity:0;transition:opacity var(--fast)}
.opt.on .box{background:var(--green);border-color:var(--green)}
.opt.on .box svg{opacity:1}
.opt .req{background:var(--forest);border-color:var(--forest)}
.opt h4{font-size:1rem;letter-spacing:-.02em;margin-bottom:.15rem}
.opt p{font-size:.85rem;color:var(--slate);line-height:1.5}
.opt .price{margin-left:auto;text-align:right;flex:none}
.opt .price b{display:block;font-size:1rem;font-weight:600;letter-spacing:-.02em;white-space:nowrap}
.opt .price s{text-decoration:none;display:block;font-size:.68rem;color:var(--mute)}
.opt .badge-sm{display:inline-block;font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;background:var(--sage);color:var(--green);border-radius:5px;padding:.15rem .4rem;margin-left:.4rem;vertical-align:2px}
.opt .extra{margin-top:.85rem;padding-top:.85rem;border-top:1px solid var(--line);display:none}
.opt.on .extra{display:block}
.opt .extra .chips-row{margin-top:.5rem}
.bundle-note{background:var(--sage);border-radius:10px;padding:.7rem .9rem;font-size:.83rem;color:var(--forest-3);margin-top:.6rem}
.bundle-note b{font-weight:700}

/* upload */
.drop{border:1.5px dashed var(--line-2);border-radius:12px;padding:1.2rem;text-align:center;cursor:pointer;transition:border-color var(--fast),background var(--fast)}
.drop:hover{border-color:var(--green);background:var(--sage)}
.drop p{font-size:.88rem;color:var(--slate)}
.drop .up{width:34px;height:34px;border-radius:10px;background:var(--sage);color:var(--green);display:grid;place-items:center;margin:0 auto .6rem}
.drop.has{border-style:solid;border-color:var(--green);background:#fff}
.drop img{max-height:54px;margin:0 auto .5rem}

/* summary rows */
.sum{display:grid;gap:.05rem;margin-top:.4rem}
.sum-r{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--line);font-size:.92rem}
.sum-r span{color:var(--slate)}
.sum-r b{font-weight:600;white-space:nowrap}
.sum-r.q b{color:var(--green)}
.sum-empty{color:var(--mute);font-size:.9rem;padding:.8rem 0}
.sum-tot{display:flex;justify-content:space-between;align-items:baseline;padding-top:.9rem;margin-top:.3rem;border-top:2px solid var(--ink)}
.sum-tot span{font-size:.9rem;color:var(--slate)}
.sum-tot b{font-size:1.7rem;font-weight:600;letter-spacing:-.04em}
.sum-tot b small{font-size:.85rem;font-weight:500;color:var(--mute)}
.save-note{background:var(--sage);border-radius:10px;padding:.6rem .85rem;font-size:.84rem;color:var(--forest-3);margin-top:.7rem}

/* billing toggle */
.bill{display:inline-flex;background:var(--sage);border-radius:999px;padding:.22rem;margin-bottom:1.2rem}
.bill button{border:0;background:none;font-family:inherit;font-size:.85rem;font-weight:600;color:var(--slate);padding:.45rem 1rem;border-radius:999px;cursor:pointer;transition:all var(--fast)}
.bill button.on{background:#fff;color:var(--ink);box-shadow:0 2px 6px -2px rgba(11,40,21,.2)}
.bill button em{font-style:normal;color:var(--green);font-size:.72rem;margin-left:.25rem}

/* footer bar */
.cfg-foot{border-top:1px solid var(--line);background:#fff;padding:.9rem clamp(1.2rem,2.2vw,2rem);display:flex;align-items:center;gap:.8rem}
.cfg-foot .tot{margin-right:auto}
.cfg-foot .tot span{display:block;font-size:.68rem;font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.cfg-foot .tot b{font-size:1.25rem;font-weight:600;letter-spacing:-.03em}
.cfg-foot .tot b small{font-size:.78rem;color:var(--mute);font-weight:500}
.cfg-back{background:none;border:0;font-family:inherit;font-size:.9rem;font-weight:600;color:var(--slate);cursor:pointer;padding:.7rem .9rem;border-radius:10px}
.cfg-back:hover{background:var(--sage);color:var(--ink)}
.cfg-next{border:0;font-family:inherit;cursor:pointer}

/* mobile */
@media(max-width:1080px){
  .cfg{grid-template-columns:1fr;grid-template-rows:38vh 1fr}
  .cfg-stage{padding:3.4rem 1rem 1rem}
  .mock{width:min(420px,100%)}
  .mock-body{max-height:24vh}
  .cfg-panel{border-left:0;border-top:1px solid var(--line)}
}
@media(max-width:560px){
  .cfg{grid-template-rows:30vh 1fr}
  .cfg-rail{height:56px}
  .opt .price b{font-size:.9rem}
}

/* success */
.cfg-done{text-align:center;padding:2rem 0}
.cfg-done .tick{width:64px;height:64px;border-radius:50%;background:var(--sage);color:var(--green);display:grid;place-items:center;margin:0 auto 1.2rem}
.cfg-done .tick svg{width:30px;height:30px}
.cfg-done h2{font-size:1.6rem;margin-bottom:.6rem}
.cfg-done p{color:var(--slate);max-width:24rem;margin:0 auto}
.cfg-err{background:#FDECEA;color:#9F2D20;border-radius:10px;padding:.7rem .9rem;font-size:.88rem;margin-bottom:.9rem;display:none}
.cfg-err.on{display:block}
.cfg-h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media(max-width:1080px){
  .mk-hero-in{grid-template-columns:1fr}.mk-shot,.mk-strip,.mk-modsec,.mk-foot,.mk-ann{display:none}
  .mk-cards{grid-template-columns:repeat(2,1fr)}.mk-links{display:none}
}