/* Liquid Web Solutions — shared chrome: header, buttons, glass, helper, results, modals, steppers */

/* ================= header ================= */
.hdr{position:fixed;left:0;right:0;top:var(--sy);height:calc(78*var(--u));z-index:30;pointer-events:none}
.hdr>*{pointer-events:auto}
.hdr .bar{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(240,247,255,.6));box-shadow:0 1px 0 rgba(255,255,255,.7),0 calc(8*var(--u)) calc(30*var(--u)) rgba(40,100,200,.12)}
.hdr--home .bar{display:none}
.hdr .brand{position:absolute;display:block}
.hdr .brand img{position:absolute;display:block;height:auto}
.hdr .brand .mk{left:0;top:0}
.hdr .brand .wm{}
.hdr nav{position:absolute;display:flex;align-items:baseline;gap:calc(38*var(--u));font-weight:500;color:#0a1a4e}
.hdr nav a,.hdr nav .soon{position:relative;white-space:nowrap;padding:calc(6*var(--u)) 0;font-size:max(12px,calc(15.6*var(--u)))}
.hdr nav a:hover{color:var(--blue)}
.hdr nav a[aria-current=page]{font-weight:700;color:var(--navy)}
.hdr nav a[aria-current=page]::after{content:"";position:absolute;left:0;right:0;bottom:calc(-3*var(--u));height:calc(3*var(--u));border-radius:3px;background:linear-gradient(90deg,#1f6bff,#3cc8ff);box-shadow:0 0 calc(10*var(--u)) rgba(40,150,255,.8)}
.hdr nav .soon{background:none;border:0;color:#0a1a4e;cursor:pointer;font-family:inherit;font-weight:500}
.hdr nav .soon:hover{color:var(--blue)}
.hdr .cta{position:absolute}
.hdr .acct{position:absolute;display:flex;align-items:center;gap:calc(12*var(--u));padding:0 calc(18*var(--u)) 0 calc(14*var(--u));color:#fff;border-radius:999px;background:linear-gradient(180deg,#0c2a86,#061a5e);box-shadow:0 0 0 calc(2*var(--u)) rgba(130,200,255,.85),0 0 calc(22*var(--u)) rgba(50,150,255,.6)}
.hdr .acct .av{width:calc(36*var(--u));height:calc(36*var(--u));border-radius:50%;background:radial-gradient(circle at 40% 30%,#fff,#bcd7ff);display:grid;place-items:center}
.hdr .acct b{display:block;font-size:max(11px,calc(15*var(--u)));font-weight:600;line-height:1.15}
.hdr .acct span{display:block;font-size:max(10px,calc(13.5*var(--u)));opacity:.9}

/* ================= buttons ================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:calc(10*var(--u));color:#fff;font-weight:600;white-space:nowrap;border-radius:999px;position:relative;
  background:linear-gradient(180deg,#2b78ff 0%,#0a44e6 52%,#062aba 100%);
  box-shadow:0 0 0 calc(2.2*var(--u)) rgba(150,215,255,.92),0 0 calc(26*var(--u)) rgba(50,150,255,.85),inset 0 calc(1.5*var(--u)) 0 rgba(255,255,255,.45),inset 0 calc(-8*var(--u)) calc(14*var(--u)) rgba(0,20,120,.35);
  transition:transform .25s var(--ease),filter .25s,box-shadow .25s}
.btn:hover{transform:translateY(calc(-1.5*var(--u)));filter:brightness(1.1)}
.btn:active{transform:translateY(calc(1*var(--u)))}
.btn[disabled],.btn[aria-disabled=true]{filter:grayscale(.5) brightness(.92);cursor:not-allowed;transform:none}
.btn svg{width:1.15em;height:1.15em;flex:none}
.btn--ghost{background:rgba(8,26,90,.55);box-shadow:0 0 0 calc(1.6*var(--u)) rgba(130,200,255,.85),0 0 calc(18*var(--u)) rgba(50,150,255,.5);backdrop-filter:blur(8px)}

/* ================= glass ================= */
.gd{color:#fff;background:var(--glass-dk);border:calc(1.6*var(--u)) solid var(--glass-dk-edge);border-radius:calc(var(--r,18)*var(--u));
  box-shadow:0 0 calc(26*var(--u)) rgba(50,150,255,.5),inset 0 0 calc(22*var(--u)) rgba(90,170,255,.2),inset 0 calc(1.5*var(--u)) 0 rgba(255,255,255,.35);
  backdrop-filter:blur(calc(13*var(--u))) saturate(1.45);-webkit-backdrop-filter:blur(calc(13*var(--u))) saturate(1.45)}
.gl{color:var(--navy);background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(240,247,255,.84));border:calc(1.6*var(--u)) solid rgba(255,255,255,.95);border-radius:calc(var(--r,18)*var(--u));
  box-shadow:0 0 calc(26*var(--u)) rgba(90,170,255,.45),0 calc(18*var(--u)) calc(50*var(--u)) rgba(30,80,170,.16);backdrop-filter:blur(calc(14*var(--u)));-webkit-backdrop-filter:blur(calc(14*var(--u)))}

/* ================= helper (guide message) ================= */
.guide{position:absolute;display:flex;align-items:center;gap:calc(12*var(--u));padding:calc(10*var(--u)) calc(16*var(--u)) calc(10*var(--u)) calc(12*var(--u));color:#fff;
  background:linear-gradient(160deg,rgba(14,40,120,.9),rgba(6,22,80,.94));border:calc(1.6*var(--u)) solid rgba(130,200,255,.8);border-radius:calc(18*var(--u));
  box-shadow:0 0 calc(24*var(--u)) rgba(50,150,255,.65),inset 0 0 calc(14*var(--u)) rgba(80,160,255,.22);backdrop-filter:blur(10px);
  font-size:max(11px,calc(15.4*var(--u)));line-height:1.28;opacity:0;transform:translateY(calc(8*var(--u)));transition:opacity .6s,transform .6s var(--ease)}
.guide>div{min-width:0;flex:1}
.screen.in .guide{opacity:1;transform:none;transition-delay:1.1s}
.guide{padding-right:calc(32*var(--u))}
.guide .rb{flex:none;width:calc(38*var(--u));height:calc(38*var(--u))}
.guide b{color:#6fd8ff;font-weight:600}
.guide .x{position:absolute;right:calc(8*var(--u));top:calc(8*var(--u));width:calc(24*var(--u));height:calc(24*var(--u));display:grid;place-items:center;border-radius:50%;color:#fff;opacity:.9}
.guide .x:hover{background:rgba(255,255,255,.18)}
.guide .x svg{width:62%;height:62%}
.guide.gone{display:none}
.rb{display:block;filter:drop-shadow(0 0 calc(8*var(--u)) rgba(80,190,255,.85))}

/* ================= breadcrumb + stepper ================= */
.crumbs{font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-size:max(9px,calc(13*var(--u)));color:#0836c8;display:flex;gap:calc(12*var(--u));align-items:center}
.crumbs i{font-style:normal;opacity:.7}
.stepper{display:flex;align-items:flex-start}
.stepper .st{display:grid;grid-template-columns:auto;justify-items:start;position:relative}
.stepper .dot{width:calc(34*var(--u));height:calc(34*var(--u));border-radius:50%;display:grid;place-items:center;position:relative;z-index:1;
  background:radial-gradient(circle at 35% 30%,#fff,#d9ecff);box-shadow:0 0 0 calc(2*var(--u)) rgba(80,150,255,.85),0 0 calc(12*var(--u)) rgba(60,160,255,.6)}
.stepper .dot i{width:34%;height:34%;border-radius:50%;background:#1b64ff;box-shadow:0 0 6px rgba(40,140,255,.9)}
.stepper .done .dot{background:radial-gradient(circle at 35% 30%,#2f6fe0,#0a1a60);box-shadow:0 0 0 calc(2*var(--u)) #bfe6ff,0 0 calc(14*var(--u)) rgba(70,170,255,.9)}
.stepper .done .dot svg{width:56%;height:56%}
.stepper .now .dot{background:radial-gradient(circle at 35% 30%,#bfe8ff,#1b6bff);box-shadow:0 0 0 calc(3*var(--u)) #fff,0 0 0 calc(6*var(--u)) rgba(30,123,255,.45),0 0 calc(24*var(--u)) rgba(30,150,255,.95);animation:pulse 2.6s ease-in-out infinite}
.stepper .now .dot i{background:#fff}
@keyframes pulse{50%{box-shadow:0 0 0 calc(3*var(--u)) #fff,0 0 0 calc(11*var(--u)) rgba(30,123,255,.16),0 0 calc(32*var(--u)) rgba(30,160,255,1)}}
.stepper .tx{color:var(--navy)}
.stepper .dot svg{width:56%;height:56%;color:#fff}
.stepper .tx b{display:block;font-weight:700;font-size:max(10px,calc(15*var(--u)));line-height:1.15}
.stepper .tx h3{font-weight:700;font-size:max(10px,calc(15.6*var(--u)));line-height:1.2;letter-spacing:-.015em;white-space:nowrap}
.stepper .tx p{overflow-wrap:anywhere;margin-top:calc(4*var(--u));font-weight:400;font-size:max(9px,calc(13*var(--u)));line-height:1.26;color:#1b2a5a;letter-spacing:-.005em}
.stepper .bar{position:absolute;height:calc(3*var(--u));background:linear-gradient(90deg,rgba(40,130,255,.9),rgba(80,190,255,.7));box-shadow:0 0 8px rgba(60,170,255,.8);border-radius:2px}
.stepper .bar.off{background:rgba(70,140,230,.5);box-shadow:none}

/* ================= domain results overlay ================= */
.scrim{position:fixed;inset:0;z-index:70;background:rgba(190,215,246,.62);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);animation:fade .25s}
@keyframes fade{from{opacity:0}}
.results{position:fixed;z-index:75;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:20px 22px 18px;border-radius:24px;color:var(--navy);
  background:#f8fbff;box-shadow:0 0 0 1px rgba(150,190,245,.8),0 30px 80px rgba(20,70,170,.35);animation:rise .35s var(--ease)}
@keyframes rise{from{opacity:0;transform:translateY(10px) scale(.98)}}
body.noscroll{overflow:hidden}
.res-head{display:flex;align-items:center;gap:12px;position:sticky;top:-20px;z-index:1;margin:-20px -22px 0;padding:20px 22px 10px;background:#f8fbff}
.res-head h3{font-size:16px;font-weight:700;flex:1}
.res-x{width:32px;height:32px;border-radius:50%;background:#e6eefb;display:grid;place-items:center}
.res-note{margin-top:10px;padding:10px 14px;border-radius:12px;background:#fff6dc;border:1px solid #f1d98c;color:#6b5210;font-size:13.5px;line-height:1.45}
.res-sec{margin:14px 2px 6px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--mute)}
.res-list{display:grid;gap:8px;margin-top:10px}
.res-row{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:14px;background:#f1f6ff;border:1px solid transparent}
.res-row.first{background:#fff;border-color:rgba(30,123,255,.45);box-shadow:0 6px 20px rgba(30,100,230,.14)}
.res-dom{font-weight:700;font-size:17px;flex:1;overflow-wrap:anywhere}
.res-dom small{display:block;font-weight:500;font-size:12.5px;color:var(--mute);margin-top:2px}
.pill{font-size:12px;font-weight:600;padding:5px 10px;border-radius:999px;background:#e5ebf6;color:#46526b;white-space:nowrap}
.pill.demo{background:#fff1c9;color:#7a5a05}
.res-price{font-weight:700;font-size:15px;min-width:78px;text-align:right}
.res-price small{font-weight:500;color:var(--mute)}
.res-go{height:40px;padding:0 18px;font-size:14px}
.res-foot{margin-top:12px;font-size:12px;color:var(--mute)}
.res-err{color:#9b1c1c;font-weight:600;font-size:14px;margin-top:10px}

/* ================= modal (quiz / coming soon) ================= */
.modal{position:fixed;z-index:80;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,calc(100vw - 28px));max-height:calc(100vh - 28px);overflow:auto;padding:30px 30px 26px;color:#fff;border-radius:26px;
  background:linear-gradient(160deg,rgba(18,52,140,.94),rgba(6,22,80,.96));border:2px solid rgba(130,200,255,.85);box-shadow:0 0 50px rgba(50,150,255,.65),0 30px 80px rgba(0,10,60,.5);animation:rise .35s var(--ease)}
.modal h2{font-family:var(--fh);font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.modal p{margin-top:10px;font-size:15.5px;line-height:1.5;color:#dbeaff}
.modal .m-x{position:absolute;right:14px;top:14px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12)}
.modal .m-x:hover{background:rgba(255,255,255,.25)}
.modal .row{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.modal .btn{height:48px;padding:0 24px;font-size:16px}
.modal .opt{display:block;width:100%;text-align:left;margin-top:10px;padding:13px 16px;border-radius:14px;background:rgba(255,255,255,.08);border:1.5px solid rgba(130,200,255,.45);font-size:15.5px;font-weight:500;color:#fff}
.modal .opt:hover,.modal .opt:focus-visible{background:rgba(80,160,255,.28);border-color:#8fd4ff}
.modal .meter{display:flex;gap:6px;margin-top:6px}
.modal .meter i{flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.2)}
.modal .meter i.on{background:#5ccaff}

/* toast (locked / demo-only actions) */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:90;padding:14px 22px;border-radius:16px;color:#fff;font-size:15px;font-weight:500;max-width:min(520px,calc(100vw - 28px));text-align:center;
  background:linear-gradient(160deg,rgba(18,52,140,.96),rgba(6,22,80,.98));border:1.6px solid rgba(130,200,255,.85);box-shadow:0 0 30px rgba(50,150,255,.6);animation:rise .3s var(--ease)}

/* header: stage-aligned inner layer */
.hdr-in{position:absolute;left:var(--sx);top:0;width:var(--sw);height:100%;pointer-events:none}
.hdr-in>*{pointer-events:auto}
.hdr .brand{display:block}
.hdr .cta{display:flex}
.hdr .cta .fs{font-size:max(12px,calc(var(--fs)*var(--u)))}

.hdr .acct svg{flex:none;width:calc(18*var(--u));height:calc(18*var(--u))}
.hdr .acct .av svg{width:calc(20*var(--u));height:calc(20*var(--u));color:#1f4fb8}
.hdr .acct>div{flex:1;white-space:nowrap}
.hdr--dash .acct{height:calc(54*var(--u))}

/* ================= standard header: Configure "flow" geometry on every screen =================
   Scoped to .hdr--flow (header.js emits it for all screens). Desktop: comp coordinates inside the stage-aligned
   .hdr-in (--u / --sx / --sy come from the page's inline layout script). No backdrop blur anywhere in the header.
   The `html` prefix out-ranks the older .dash .hdr rules in screens.css without editing that file. */
html .hdr.hdr--flow>.bar{display:block}
html .hdr.hdr--flow .brand{left:calc(168*var(--u));top:calc(7*var(--u));width:calc(273*var(--u));height:calc(54*var(--u))}
html .hdr.hdr--flow .brand .mk{left:0;top:0;width:calc(54*var(--u))}
html .hdr.hdr--flow .brand .wm{left:calc(63*var(--u));top:calc(15*var(--u));width:calc(210*var(--u))}
html .hdr.hdr--flow nav{left:calc(540*var(--u));top:calc(27*var(--u))}
/* CTA: production is 246x46u at x1310 (right edge 1556u). The label is longer, so the pill grows leftwards from the same right edge. */
html .hdr.hdr--flow .cta{right:calc(116*var(--u));top:calc(19*var(--u));height:calc(46*var(--u));min-width:calc(246*var(--u));padding:0 calc(22*var(--u));font-size:max(12px,calc(17.5*var(--u)))}
/* dashboard section controls (data-tab): compact strip under the bar, preserved from the old dash header */
html .hdr.hdr--flow .hdr-tabs{position:absolute;left:calc(540*var(--u));top:calc(84*var(--u));display:flex;gap:calc(8*var(--u))}
html .hdr.hdr--flow .dtab{padding:calc(4*var(--u)) calc(14*var(--u));border-radius:999px;font-size:max(11px,calc(13*var(--u)));font-weight:500;white-space:nowrap;color:#0a1a4e;background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 1px rgba(130,170,230,.55)}
html .hdr.hdr--flow .dtab:hover{color:var(--blue)}
html .hdr.hdr--flow .dtab[aria-current=page]{color:#fff;font-weight:600;background:linear-gradient(180deg,#2b78ff,#0a3fd6);box-shadow:inset 0 calc(1.5*var(--u)) 0 rgba(255,255,255,.4)}

/* Narrow or short viewports: a real top bar in CSS px (no tiny scaled comp). --u is reset to 1px inside the header so the
   existing u-based bar shadow, pill ring/glow and logo proportions keep their production look at 1:1. */
@media (max-width:1099px),(max-height:618px){
  html .hdr.hdr--flow{--u:1px;top:0;height:auto}
  html .hdr.hdr--flow .hdr-in{position:relative;left:0;top:auto;width:auto;height:auto;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 16px;padding:10px 24px}
  html .hdr.hdr--flow .brand{position:relative;left:auto;top:auto;grid-column:1;grid-row:1}
  html .hdr.hdr--flow nav{position:static;left:auto;top:auto;grid-column:1/-1;grid-row:2;display:flex;justify-content:space-between;align-items:center;gap:8px}
  html .hdr.hdr--flow nav a,html .hdr.hdr--flow nav .soon{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 4px;font-size:14px}
  html .hdr.hdr--flow nav a[aria-current=page]::after{bottom:4px;height:3px}
  html .hdr.hdr--flow .cta{position:relative;right:auto;top:auto;grid-column:2;grid-row:1;min-width:0;height:46px;padding:0 22px;font-size:15px}
  html .hdr.hdr--flow .hdr-tabs{position:static;left:auto;top:auto;grid-column:1/-1;grid-row:3;overflow-x:auto;padding-bottom:2px}
  html .hdr.hdr--flow .dtab{min-height:40px;padding:0 14px;font-size:13px;flex:none}
}
@media (max-width:640px){
  html .hdr.hdr--flow{--u:.85px}
  html .hdr.hdr--flow .hdr-in{grid-template-columns:minmax(0,1fr);gap:10px;padding:12px 20px}
  html .hdr.hdr--flow nav{grid-row:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 10px}
  html .hdr.hdr--flow nav a,html .hdr.hdr--flow nav .soon{font-size:13px}
  html .hdr.hdr--flow .cta{grid-column:1;grid-row:3;width:100%}
  html .hdr.hdr--flow .hdr-tabs{grid-row:4}
}
@media (max-width:359px){
  html .hdr.hdr--flow .hdr-in{padding-left:16px;padding-right:16px}
}

/* Keep light-glass content readable over the artwork on every viewport. */
html .screen .gl,
html .screen .gl *{color:#fff !important}
html .screen .gl{background:transparent}