/* ============================================================================
   SRE subscriber wizard — full "Silk Road Express App Concept" style
   Sarah 2026-09-05 · source: https://drive.ntlofnyc.com/demos/sre-express/
   (41,218 chars / 425 rules read; translated, not copied — see WHY below)

   WHY THIS IS A TRANSLATION AND NOT THEIR STYLESHEET
   Their CSS targets THEIR markup. Measured against this file:
       .btn    17 uses here, 0 in theirs (they use .btn-gold / .btn-line)
       .input  24 here, 0 there.  .t-node / .t-seg  3 and 2 here, 0 there.
   Dropping their 41 KB in would have styled almost nothing. So every visual
   decision below is lifted from their CSS and re-expressed against the classes
   this page actually uses. Your markup, your wizard logic, your data — their look.

   TO REVERT: delete the <link>. Nothing else changes.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --cream:#FCFAF3; --ivory:#F7F1E2; --stone:#F2EBDA; --espresso:#221B10;
  --charcoal:#16130D; --charcoal-2:#211C13; --charcoal-line:#332B1D; --ink:#0B0B0C;
  --gold:#BC9C22; --gold-bright:#E8C74D; --gold-soft:#D8B84A; --gold-deep:#8C7016;
  --line:#E4DAC1; --line-soft:#EFE7D3; --muted:#7C7060; --muted-2:#9A8E78;
  --ok:#2E7D53; --ok-bg:#E4F1E8; --alert:#B23B2E; --alert-bg:#F8E6E1;
  --r-sm:12px; --r-md:18px; --r-lg:24px; --r-xl:30px;
  --shadow-sm:0 1px 2px rgba(34,27,16,.06),0 2px 8px rgba(34,27,16,.05);
  --shadow-md:0 4px 14px rgba(34,27,16,.10),0 10px 34px rgba(34,27,16,.08);
  --shadow-lg:0 10px 30px rgba(34,27,16,.16),0 24px 60px rgba(11,11,12,.18);
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --serif:"Cormorant Garamond",Georgia,serif;
  --gold-wash:rgba(188,156,34,.14); --sh-1:var(--shadow-sm); --sh-2:var(--shadow-md);
}

body{background:var(--ivory);color:var(--espresso);font-family:var(--sans)}
h1,h2,h3,.section-t,.price-big{font-family:var(--serif);font-weight:600;letter-spacing:.01em}
.mono-num,.price-big,.dims{font-variant-numeric:tabular-nums}

/* buttons — their .gbtn gold gradient + .btn-line outline */
.btn{border-radius:13px;font-family:var(--sans);font-weight:600;font-size:13.5px;
     padding:12px 17px;box-shadow:var(--shadow-sm);border:1px solid transparent;
     transition:transform .16s ease,box-shadow .16s ease}
.btn:not(.ghost):not(.line){background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:#1c1608}
.btn:hover{box-shadow:var(--shadow-md)} .btn:active{transform:translateY(1px)}
.btn.ghost,.btn.line{background:var(--cream);border-color:var(--line);color:var(--espresso)}
.btn.dark{background:var(--espresso);color:var(--gold-bright);border-color:var(--espresso)}
.btn.sm{padding:9px 13px;font-size:12.5px;border-radius:11px}

/* cards — cream on soft line, 24px, layered. dark panel for money. */
.card{background:var(--cream);border:1px solid var(--line-soft);border-radius:var(--r-lg);
      padding:16px;box-shadow:var(--shadow-md)}
.card:hover{box-shadow:var(--shadow-lg)}
.card.quote-box,.card.bk-quote,.hub-banner{
      background:linear-gradient(135deg,#1B1710,#2c2416);border-color:var(--charcoal-line);
      color:#F1E8D5;box-shadow:var(--shadow-lg)}
.card.quote-box strong,.card.bk-quote strong,.price-big{color:var(--gold-bright)}
.need-card,.qrow{background:var(--cream);border:1px solid var(--line-soft);
      border-radius:var(--r-md);padding:13px;box-shadow:var(--shadow-sm);transition:.2s}
.need-card:hover,.qrow:hover{box-shadow:var(--shadow-md)}
.need-card.on,.qrow.on{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-wash)}

/* fields — their .opt / form treatment */
.input,input,select,textarea{border-radius:var(--r-sm);border:1px solid var(--line);
      background:var(--cream);font-family:var(--sans);font-size:14px;padding:12px;color:var(--espresso)}
.input:focus,input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);
      box-shadow:0 0 0 3px var(--gold-wash)}
.form-label{font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.02em}
.form-group{margin-bottom:14px}

/* rows and lists — their .row / .detail-row / .jobrow hairline rhythm */
.info-row,.rv,.ship-list>*,.svc-p{display:flex;align-items:center;gap:12px;
      padding:14px 4px;border-bottom:1px solid var(--line-soft)}
.info-row:last-child,.rv:last-child{border-bottom:none}
.section-t{font-size:19px;margin:18px 16px 8px}
.svc-h{font-weight:600} .svc-k{color:var(--muted);font-size:12.5px}

/* pills and chips */
.pill,.tier-tag,.stat-check,.lang-pills>*{font-size:11px;font-weight:700;padding:5px 11px;
      border-radius:999px;letter-spacing:.02em;display:inline-flex;align-items:center;gap:5px}
.tier-tag{background:var(--stone);color:var(--espresso)}
.stat-check{background:var(--ok-bg);color:var(--ok)}
.nudge{background:var(--alert-bg);color:var(--alert);border-radius:var(--r-sm);padding:10px 12px;font-size:12.5px}

/* the 4-step wizard — YOUR structure, their stepper look */
.wiz-step{border-radius:var(--r-lg)}
.t-node{border-radius:50%;background:var(--line);transition:background .25s ease,box-shadow .25s ease}
.t-node.done{background:var(--gold);box-shadow:0 0 0 4px var(--gold-wash)}
.t-seg{background:var(--line-soft);transition:background .3s ease}
.t-seg.done{background:var(--gold)}
.dot.on{background:var(--gold)}

/* tabs — their .tab bottom-nav treatment */
.tab-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0;
      color:var(--muted-2);font-size:10.5px;font-weight:600;cursor:pointer}
.tab-item.on{color:var(--espresso)}
.screen{background:var(--ivory)}
.chev,.need-ico,.info-ico{color:var(--muted-2)}

@media (prefers-reduced-motion:reduce){*{transition:none!important}.btn:active{transform:none}}