/* =====================================================================
   dr-site.css — shared look for every Digit Relay page except index.html
   ---------------------------------------------------------------------
   index.html (the new home page) is the reference design. This file
   brings the older pages onto that look without touching their logic:

     1. design tokens (--dr-*)                 the new palette + fonts
     2. page-variable remap                    old names (--navy, --green,
                                               --muted, --font-d …) now
                                               point at the new palette
     3. base                                   background, type, selection
     4. site nav  (.drn-*)                     same links/order as index
     5. site footer (.drf-*)                   legal links + disclosure
     6. per-page layers  html[data-dr-page=…]  small fixes per page

   Linked from each page AFTER the page's own <style> blocks so it wins.
   Every selector in sections 4-5 is prefixed (drn-/drf-) so it can't
   collide with page classes such as .btn, .card, .hero or .chip.
   ===================================================================== */

/* ---------- 1. tokens ---------- */
:root{
  --dr-bg:#050a1c;          /* page background                     */
  --dr-bg2:#0a1230;         /* raised surface (menus, inputs)      */
  --dr-bg3:#0d1638;         /* input fill                          */
  --dr-g:#0be26f;           /* brand green                         */
  --dr-g2:#00b857;          /* deep green                          */
  --dr-g3:#3dff9a;          /* bright green (gradient start)       */
  --dr-b:#4d8dff;           /* accent blue (links)                 */
  --dr-b2:#0b4fd6;          /* deep blue                           */
  --dr-t:#eef3ff;           /* main text                           */
  --dr-m:#93a1c6;           /* muted text  (7.4:1 on --dr-bg)      */
  --dr-l:rgba(255,255,255,.1);   /* hairline border                */
  --dr-card:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  --dr-r:20px;
  --dr-fd:'Space Grotesk',Inter,system-ui,sans-serif;   /* headings  */
  --dr-fb:Inter,system-ui,-apple-system,'Segoe UI',sans-serif; /* body */
}

/* ---------- 2. old page variables -> new palette ----------
   Only names whose meaning is the same on every page are remapped
   here. Names that mean different things on different pages
   (--ink, --card, --line, --paper …) are remapped per page in §6. */
:root{
  --navy:#050a1c; --navy-mid:#0a1230; --navy-lt:#16224d; --navy2:#0a1230;
  --green:#0be26f; --green-dim:#00b857; --green2:#00b857;
  --green-sub:rgba(11,226,111,.08); --green-glow:rgba(11,226,111,.16);
  --white:#eef3ff; --muted:#93a1c6; --muted-lt:#c3cde6; --sub:#93a1c6;
  --border:rgba(255,255,255,.1); --border-g:rgba(11,226,111,.32);
  --blue:#4d8dff;
  --font-d:var(--dr-fd); --font-b:var(--dr-fb);
}

/* ---------- 3. base ---------- */
html{background:#050a1c;}
html,body{overflow-x:clip;}           /* no sideways scroll, keeps sticky nav working */
body{
  background-color:#050a1c!important;
  background-image:
    radial-gradient(700px 500px at 100% 0,rgba(11,226,111,.10),transparent 60%),
    radial-gradient(800px 600px at 0 40%,rgba(11,79,214,.18),transparent 60%),
    radial-gradient(700px 500px at 100% 85%,rgba(11,226,111,.08),transparent 60%)!important;
  background-attachment:fixed!important;
  -webkit-font-smoothing:antialiased;
  margin:0;
}
::selection{background:rgba(11,226,111,.35);color:#fff;}
h1 em{
  font-style:normal;
  background:linear-gradient(90deg,#4d8dff,#0be26f 70%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- 4. site nav ---------- */
.drn{
  position:sticky;top:0;z-index:1000;display:block;
  margin:0;padding:0;
  font:400 16px/1.65 var(--dr-fb);color:var(--dr-t);text-align:left;
  background:rgba(5,10,28,.72);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.drn *,.drf *{box-sizing:border-box;}
.drn a,.drf a{color:inherit;text-decoration:none;}
.drn-w{max-width:1120px;margin:0 auto;padding:0 24px;}
.drn-nb{display:flex;align-items:center;justify-content:space-between;height:72px;gap:12px;}
.drn-logo{display:block;flex-shrink:0;}
.drn-logo img,.drf-ft img{
  display:block;height:52px;width:auto;max-width:none;
  background:#fff;border-radius:14px;padding:5px 14px;
  box-shadow:0 0 28px -6px rgba(11,226,111,.55);
}
.drn-nl{display:flex;align-items:center;gap:6px;margin:0;padding:0;}
.drn-nl>a,.drn-ddb{
  font:500 15px/1.65 var(--dr-fb);color:var(--dr-m);
  padding:8px 14px;margin:0;border-radius:10px;
  background:none;border:0;cursor:pointer;white-space:nowrap;
  transition:color .2s,background .2s;
}
.drn-nl>a:hover,.drn-ddb:hover,.drn-ddb[aria-expanded="true"]{color:var(--dr-t);background:rgba(255,255,255,.07);}
.drn-nl>a.on,.drn-ddb.on{color:var(--dr-t);background:rgba(11,226,111,.1);box-shadow:inset 0 0 0 1px rgba(11,226,111,.32);}
.drn-dd{position:relative;}
.drn-dm{
  position:absolute;top:110%;left:0;z-index:1001;width:340px;
  background:#0a1230;border:1px solid rgba(255,255,255,.12);border-radius:var(--dr-r);
  padding:10px;box-shadow:0 30px 80px -10px #000;display:none;
}
.drn-dd.open .drn-dm{display:block;}
.drn-h{font:600 11px/1.4 var(--dr-fd);letter-spacing:.14em;text-transform:uppercase;color:var(--dr-m);padding:8px 12px;}
.drn-dm a{display:block;padding:10px 12px;border-radius:12px;line-height:1.5;}
.drn-dm a:hover{background:rgba(255,255,255,.06);}
.drn-dm a.on{background:rgba(11,226,111,.1);box-shadow:inset 0 0 0 1px rgba(11,226,111,.3);}
.drn-dm b{display:block;font-weight:600;color:var(--dr-t);}
.drn-dm small{display:block;font-size:13px;color:var(--dr-m);}
.drn-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:600 15px/1.2 var(--dr-fd);letter-spacing:-.01em;
  padding:14px 26px;border-radius:999px;border:0;cursor:pointer;white-space:nowrap;
  background:linear-gradient(135deg,#3dff9a,#0be26f);color:#04170c!important;
  box-shadow:0 0 34px -4px rgba(11,226,111,.55);
  transition:transform .25s,box-shadow .25s;
}
.drn-btn:hover{transform:translateY(-2px);box-shadow:0 0 44px -2px rgba(11,226,111,.7);}
.drn-burger{
  display:none;flex-shrink:0;width:42px;height:42px;padding:0;margin:0;
  background:none;color:var(--dr-t);border:1px solid rgba(255,255,255,.18);border-radius:10px;
  font:20px/1 var(--dr-fb);cursor:pointer;
}
.drn-mm{display:none;border-top:1px solid rgba(255,255,255,.09);padding:12px 24px 20px;background:#080e26;}
.drn-mm.open{display:block;}
.drn-mm a{display:block;padding:10px 0;font-weight:500;}
.drn-mm a.on{color:var(--dr-g3);}
.drn-mm .drn-sec{font:600 11px/1.4 var(--dr-fd);letter-spacing:.14em;text-transform:uppercase;color:var(--dr-m);margin-top:10px;}
.drn-mm a.drn-btn{display:flex;margin-top:10px;padding:14px 26px;}
.drn :focus-visible,.drf :focus-visible{outline:2px solid var(--dr-g);outline-offset:2px;}
@media(max-width:900px){
  .drn-nl,.drn-nb>.drn-btn{display:none;}
  .drn-burger{display:block;}
}
@media(max-width:400px){
  .drn-w{padding:0 16px;}
  .drn-mm{padding:12px 16px 20px;}
}

/* ---------- 5. site footer ---------- */
.drf{
  display:block;clear:both;margin:0;
  background:rgba(255,255,255,.02);border-top:1px solid rgba(255,255,255,.09);
  padding:56px 0 32px;
  font:400 14px/1.65 var(--dr-fb);color:var(--dr-m);text-align:left;
}
.drf-ft{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center;margin-bottom:28px;}
.drf-ft>div{max-width:560px;}
.drf b{color:var(--dr-t);font-weight:600;}
.drf a:hover{color:var(--dr-t);}
.drf a.drf-l{color:var(--dr-b);font-weight:600;}
.drf-disc{border-top:1px solid rgba(255,255,255,.09);padding-top:22px;display:grid;gap:10px;}
.drf-disc a{text-decoration:underline;text-decoration-color:rgba(147,161,198,.4);text-underline-offset:3px;}

@media print{ .drn,.drf{display:none!important;} }
@media(prefers-reduced-motion:reduce){ .drn *,.drf *{transition:none!important;} }


/* ---------- 4b. page hero (index.html style) ----------
   Markup: <header class="drh"> orbs + .drh-in grid: .drh-txt (the page's
   own hero block, unchanged) + .drh-ill (inline SVG illustration).      */
html{scroll-padding-top:88px;}
.drh{position:relative;overflow:hidden;padding:88px 0 72px;isolation:isolate;}
.drh:before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 25%,#000 10%,transparent 70%);mask-image:radial-gradient(ellipse at 50% 25%,#000 10%,transparent 70%);
  animation:drGrid 16s linear infinite;
}
@keyframes drGrid{to{background-position:64px 64px;}}
.drh-orb{position:absolute;z-index:-1;border-radius:50%;filter:blur(90px);pointer-events:none;animation:drFloat 12s ease-in-out infinite alternate;}
.drh-o1{width:480px;height:480px;background:rgba(11,226,111,.26);top:-140px;right:-80px;}
.drh-o2{width:520px;height:520px;background:rgba(43,102,255,.30);top:60px;left:-180px;animation-delay:-5s;}
@keyframes drFloat{to{transform:translate(50px,40px) scale(1.12);}}
.drh-in{position:relative;z-index:2;max-width:1120px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;}
.drh-txt{min-width:0;text-align:left;}
.drh .drh-txt>div:first-child{max-width:none;margin:0;padding:0;text-align:left;background:none;border:0;box-shadow:none;}
.drh .drh-txt>div:first-child::before,.drh .drh-txt>div:first-child::after,.drh .hero-glow{display:none;}
/* eyebrow -> glowing pill */
.drh :is(.hero-label,.hero-eyebrow,.hero-badge,.bd-hero-badge){
  display:inline-flex;align-items:center;gap:10px;max-width:100%;margin:0 0 4px;
  padding:7px 16px;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 0 30px -8px rgba(11,226,111,.5);
  font:600 12px/1.45 var(--dr-fd);letter-spacing:.1em;text-transform:uppercase;color:#c9ffe2;
  animation:drIn .9s cubic-bezier(.2,.7,.2,1) backwards;
}
.drh :is(.hero-label,.hero-badge,.bd-hero-badge)::before{
  content:"";flex-shrink:0;width:8px;height:8px;border-radius:50%;background:var(--dr-g);
  box-shadow:0 0 0 4px rgba(11,226,111,.25);animation:drPulse 2s infinite;
}
@keyframes drPulse{50%{box-shadow:0 0 0 8px rgba(11,226,111,0);}}
.drh :is(h1,h2){
  font:700 clamp(36px,4.8vw,62px)/1.04 var(--dr-fd);letter-spacing:-.025em;color:var(--dr-t);
  margin:22px 0 18px;max-width:none;text-align:left;
  animation:drIn .9s .12s cubic-bezier(.2,.7,.2,1) backwards;
}
.drh .drh-txt>div:first-child>p{
  color:var(--dr-m);font:400 18px/1.65 var(--dr-fb);max-width:580px;margin:0;text-align:left;
  animation:drIn .9s .26s cubic-bezier(.2,.7,.2,1) backwards;
}
.drh-cta{margin-top:30px;animation:drIn .9s .4s cubic-bezier(.2,.7,.2,1) backwards;}
.drh-cta .drn-btn{position:relative;}
.drh-cta .drn-btn::after{content:"";position:absolute;inset:0;border-radius:inherit;animation:drRing 2.6s ease-out infinite;pointer-events:none;}
@keyframes drRing{0%{box-shadow:0 0 0 0 rgba(61,255,154,.55);}70%,100%{box-shadow:0 0 0 16px rgba(61,255,154,0);}}
@keyframes drIn{from{opacity:0;translate:0 26px;}}
.drh-ill,html[data-dr-page] .drh-ill{
  display:block;border-radius:24px;padding:8px;min-width:0;
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.01));
  box-shadow:0 30px 80px -30px rgba(11,226,111,.35);
  animation:drIn 1s .3s cubic-bezier(.2,.7,.2,1) backwards;
}
.drh-ill svg{display:block;width:100%;height:auto;border-radius:18px;}
.drh-ill .drs-flow{animation:drDash 3s linear infinite;}
@keyframes drDash{to{stroke-dashoffset:-44;}}
.drh-ill .drs-needle{animation:drNeedle 4s ease-in-out infinite alternate;}
@keyframes drNeedle{from{transform:rotate(-70deg);}to{transform:rotate(0deg);}}
.drh-anchor{display:block;height:0;}
@media(max-width:900px){
  .drh{padding:56px 0 48px;}
  .drh-in{grid-template-columns:1fr;gap:32px;}
  .drh-ill{max-width:520px;width:100%;margin:0 auto;}
}
@media(max-width:400px){ .drh-in{padding:0 16px;} }

/* ---------- 4c. shared component polish (glass cards, pills, focus glow) ---------- */
html[data-dr-page]:not([data-dr-page="ai-concierge"]):not([data-dr-page="validate"]) :is(input[type=text],input[type=number],input[type=email],input[type=tel],input[type=search],input:not([type]),select,textarea):not(.drn *){
  border-radius:12px;border:1.5px solid rgba(255,255,255,.14);
  background-color:rgba(5,10,28,.6);color:var(--dr-t);
  transition:border-color .2s,box-shadow .2s;
}
html[data-dr-page] :is(input,select,textarea):focus{outline:0;border-color:var(--dr-g)!important;box-shadow:0 0 0 4px rgba(11,226,111,.15)!important;}
html[data-dr-page] select option,html[data-dr-page] select optgroup{background:#0a1230;color:#eef3ff;}
html[data-dr-page] ::placeholder{color:#7f8db4;}
html[data-dr-page] input[type=range]{accent-color:var(--dr-g);}
html[data-dr-page] input[type=checkbox],html[data-dr-page] input[type=radio]{accent-color:var(--dr-g);}

/* neutral glass cards on the tool pages */
html[data-dr-page] :is(.tool-card,.form-panel,.breakdown-card,.payback-card,.projection-card,.score-section,.cs-card,.plan-card,.bd-card,.req-card,.value-card,.verdict-card.verdict-empty,.how-score,.factor,.carrier-card){
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-radius:20px;
}
html[data-dr-page] :is(.tool-card,.form-panel,.breakdown-card,.payback-card,.projection-card,.score-section,.cs-card,.bd-card,.req-card,.value-card,.how-score):not(.featured){border-color:rgba(255,255,255,.1);}
/* hover lift on cards people click or scan */
html[data-dr-page] :is(.tool-card,.cs-card,.value-card,.ptype-card,.plan-card,.deal-card,.carrier-card,.factor){transition:translate .3s,border-color .3s,box-shadow .3s;}
html[data-dr-page] :is(.tool-card:not(.coming-soon),.cs-card,.value-card,.ptype-card,.plan-card,.deal-card,.carrier-card:not(.disabled),.factor):hover{
  translate:0 -4px;border-color:var(--dr-g);
  box-shadow:0 0 0 1px rgba(11,226,111,.5),0 24px 70px -20px rgba(11,226,111,.45);
}
/* pill buttons */
html[data-dr-page] :is(.btn-primary,.tool-btn,.btn-cta-primary:not(.purple):not(.amber),.deal-cta){
  border-radius:999px;border:0;
  background:linear-gradient(135deg,#3dff9a,#0be26f);color:#04170c;
  font-family:var(--dr-fd);font-weight:700;
  box-shadow:0 0 34px -4px rgba(11,226,111,.55);
  transition:transform .25s,box-shadow .25s;
}
html[data-dr-page] :is(.btn-primary,.tool-btn,.btn-cta-primary,.deal-cta):hover{transform:translateY(-2px);box-shadow:0 0 44px -2px rgba(11,226,111,.7);}
html[data-dr-page] :is(.btn-secondary,.btn-outline,.tool-btn-outline,.btn-cta-outline,.filter-reset){
  border-radius:999px;background:rgba(255,255,255,.03);color:var(--dr-t);border:1px solid rgba(255,255,255,.18);font-family:var(--dr-fd);
}
html[data-dr-page] :is(.btn-secondary,.btn-outline,.btn-cta-outline,.filter-reset):hover{border-color:var(--dr-g);color:#fff;}
/* section eyebrows glow like index .eye */
html[data-dr-page] :is(.section-label,.sec-label,.journey-label){color:var(--dr-g);text-shadow:0 0 18px rgba(11,226,111,.5);font-family:var(--dr-fd);}
/* section headings use the display face */
html[data-dr-page] :is(h2,h3).section-title,html[data-dr-page] .section h2{font-family:var(--dr-fd);letter-spacing:-.02em;}

/* scroll reveal (dr-site.js adds .drr / .drr-in; off when reduced motion) */
.drr{opacity:0;translate:0 34px;transition:opacity .9s cubic-bezier(.2,.7,.2,1),translate .9s cubic-bezier(.2,.7,.2,1);}
.drr.drr-in{opacity:1;translate:0 0;}

@media(prefers-reduced-motion:reduce){
  .drh *,.drh:before,.drh-orb,.drh-ill,.drh-ill *{animation:none!important;}
  .drr{opacity:1!important;translate:none!important;transition:none!important;}
  html[data-dr-page] *{transition-duration:0s!important;}
}
@media print{ .drr{opacity:1!important;translate:none!important;} }

/* gradient emphasis like index (text-fill beats page colours on em) */
html[data-dr-page] :is(h1,.drh h2) em{
  font-style:normal;
  background:linear-gradient(90deg,#4d8dff,#0be26f 50%,#4d8dff);background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 0 28px rgba(11,226,111,.35));
  animation:drShine 5s ease-in-out infinite alternate;
}
@keyframes drShine{to{background-position:100% 0;}}
@media(prefers-reduced-motion:reduce){ html[data-dr-page] h1 em{animation:none;} }
.drn-btn,.drn-btn:hover{text-decoration:none!important;}

/* =====================================================================
   6. per-page layers
   ===================================================================== */

/* --- shared: the old in-page brand words are now redundant with the nav logo --- */
html[data-dr-page="deal-finder"] .hdr .brand,
html[data-dr-page="concierge"] .topbar .brand,
html[data-dr-page="port-wizard"] .topbar .brand{visibility:hidden;}
html[data-dr-page^="checkout"] .brandbar{display:none;}

/* --- plan comparison: tabs as pills, no sideways scroll on phones --- */
html[data-dr-page="plan"] .tool-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:18px 16px;max-width:100%;}
html[data-dr-page="plan"] .tool-tab{border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:10px 22px;font-size:1rem;background:rgba(255,255,255,.04);transition:border-color .2s,box-shadow .2s;}
html[data-dr-page="plan"] .tool-tab.active{color:var(--dr-t);border-color:var(--dr-g);background:rgba(11,226,111,.12);box-shadow:0 0 30px -8px rgba(11,226,111,.6);}
html[data-dr-page="plan"] .bd-toggle-btn,html[data-dr-page="plan"] .sort-btn{border-radius:999px;}
@media(max-width:520px){ html[data-dr-page="plan"] .tool-tab{padding:8px 14px;font-size:.92rem;} }

/* --- deals: pills + glass deal cards --- */
html[data-dr-page="deals"] .deal-card{border-radius:20px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);}
html[data-dr-page="deals"] :is(.chip,.sort-btn,.filter-reset){border-radius:999px;}
html[data-dr-page="deals"] .hero-stats{justify-content:flex-start;gap:28px;flex-wrap:wrap;margin-top:28px;padding-top:24px;}
html[data-dr-page="deals"] .hero-stat{text-align:left;}
html[data-dr-page="deals"] .hero-stat-val{font-family:var(--dr-fd);}

/* --- upgrade intelligence: stats sit left in the hero --- */
html[data-dr-page="upgrade"] .hero-stats{justify-content:flex-start;flex-wrap:wrap;margin-top:24px;}
html[data-dr-page="upgrade"] .hero .purple{color:#a9a3ff;}

/* --- partners: hero buttons as pills --- */
html[data-dr-page="partners"] .hero-ctas{justify-content:flex-start;margin-top:28px;}
html[data-dr-page="partners"] .ptype-card{border-radius:20px;background:linear-gradient(160deg,rgba(11,226,111,.08),rgba(255,255,255,.02));}

/* --- deal finder (was light cards): dark glass, readable chips --- */
html[data-dr-page="deal-finder"]{--card:#0d1638;--ink:#eef3ff;--ink-soft:#a3afcf;--line:rgba(255,255,255,.12);--gold:#ffd34d;}
html[data-dr-page="deal-finder"] .wrap{max-width:900px;}
html[data-dr-page="deal-finder"] .hero{display:grid;grid-template-columns:1fr 300px;column-gap:36px;align-items:center;text-align:left;margin:8px 0 28px;}
html[data-dr-page="deal-finder"] .hero>*:not(.drh-ill){grid-column:1;}
html[data-dr-page="deal-finder"] .hero>.drh-ill{grid-column:2;grid-row:1 / span 2;}
html[data-dr-page="deal-finder"] .hero h1{font-size:clamp(1.9rem,4.4vw,2.9rem);line-height:1.06;letter-spacing:-.025em;}
html[data-dr-page="deal-finder"] .hero h1 .hl{background:linear-gradient(90deg,#4d8dff,#0be26f);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
html[data-dr-page="deal-finder"] .hero p{margin:0;max-width:44ch;color:#c3cde6;font-size:1.05rem;}
@media(max-width:720px){
  html[data-dr-page="deal-finder"] .hero{grid-template-columns:1fr;text-align:center;}
  html[data-dr-page="deal-finder"] .hero p{margin:0 auto;}
  html[data-dr-page="deal-finder"] .hero>.drh-ill{grid-column:1;grid-row:auto;max-width:360px;width:100%;margin:22px auto 0;}
}
html[data-dr-page="deal-finder"] :is(.qcard,.deal){background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.025)),#0a1230;border:1px solid rgba(255,255,255,.1);border-radius:20px;box-shadow:0 30px 80px -40px rgba(11,226,111,.35);}
html[data-dr-page="deal-finder"] .deal{transition:translate .3s,border-color .3s,box-shadow .3s;}
html[data-dr-page="deal-finder"] .deal:hover{translate:0 -4px;border-color:var(--dr-g);}
html[data-dr-page="deal-finder"] .deal-cta{border-radius:999px;}
html[data-dr-page="deal-finder"] .req-free{background:rgba(11,226,111,.14);color:#7dffb8;}
html[data-dr-page="deal-finder"] .req-switch{background:rgba(77,141,255,.16);color:#a9c6ff;}
html[data-dr-page="deal-finder"] .req-trade{background:rgba(255,138,80,.16);color:#ffc09e;}
html[data-dr-page="deal-finder"] .req-plan{background:rgba(255,255,255,.08);color:#c3cde6;}
html[data-dr-page="deal-finder"] .req-bundle{background:rgba(255,211,77,.14);color:#ffe08a;}
html[data-dr-page="deal-finder"] .deal-score{background:#050a1c;border:1px solid rgba(255,255,255,.12);}
html[data-dr-page="deal-finder"] .deal-big{color:#3dff9a;}
html[data-dr-page="deal-finder"] #vBar{background:rgba(10,18,48,.95);}

/* --- checkout + sandbox checkout (payment logic untouched) --- */
html[data-dr-page^="checkout"]{--ink:#eef3ff;--ink-soft:#a3afcf;--line:rgba(255,255,255,.1);--purple:#7fb0ff;--purple-lt:#7fb0ff;}
html[data-dr-page^="checkout"] body{display:block!important;height:auto;padding:0!important;}
html[data-dr-page^="checkout"] .wrap{max-width:460px;margin:0 auto;padding:28px 16px 48px;}
html[data-dr-page^="checkout"] .wrap::before{
  content:"";display:block;aspect-ratio:520/400;max-height:240px;margin:0 auto 18px;border-radius:22px;
  background:url("data:image/svg+xml,%3Csvg viewBox=%220 0 520 400%22 role=%22img%22 aria-label=%22Illustration: a secure card payment with a padlock%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cdefs%3E%3ClinearGradient id=%22dsk2g%22 x1=%220%22 x2=%221%22 y1=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%234d8dff%22/%3E%3Cstop offset=%221%22 stop-color=%22%230be26f%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22dsk2c%22 x1=%220%22 x2=%220%22 y1=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%2316224d%22/%3E%3Cstop offset=%221%22 stop-color=%22%230b1538%22/%3E%3C/linearGradient%3E%3CradialGradient id=%22dsk2r%22%3E%3Cstop offset=%220%22 stop-color=%22%230be26f%22 stop-opacity=%22.35%22/%3E%3Cstop offset=%221%22 stop-color=%22%230be26f%22 stop-opacity=%220%22/%3E%3C/radialGradient%3E%3CradialGradient id=%22dsk2b%22%3E%3Cstop offset=%220%22 stop-color=%22%234d8dff%22 stop-opacity=%22.35%22/%3E%3Cstop offset=%221%22 stop-color=%22%234d8dff%22 stop-opacity=%220%22/%3E%3C/radialGradient%3E%3Cpattern id=%22dsk2p%22 width=%2226%22 height=%2226%22 patternUnits=%22userSpaceOnUse%22%3E%3Cpath d=%22M26 0H0V26%22 fill=%22none%22 stroke=%22%23ffffff%22 stroke-opacity=%22.05%22/%3E%3C/pattern%3E%3C/defs%3E%3Crect width=%22520%22 height=%22400%22 rx=%2222%22 fill=%22%2308102b%22/%3E%3Crect width=%22520%22 height=%22400%22 rx=%2222%22 fill=%22url(%23dsk2p)%22/%3E%3Ccircle cx=%22450%22 cy=%2250%22 r=%22170%22 fill=%22url(%23dsk2r)%22/%3E%3Ccircle cx=%2240%22 cy=%22380%22 r=%22190%22 fill=%22url(%23dsk2b)%22/%3E%3Ccircle cx=%2226%22 cy=%2224%22 r=%225%22 fill=%22%23ff5a62%22/%3E%3Ccircle cx=%2244%22 cy=%2224%22 r=%225%22 fill=%22%23ffbf3c%22/%3E%3Ccircle cx=%2262%22 cy=%2224%22 r=%225%22 fill=%22%230be26f%22/%3E%3Crect x=%22130%22 y=%22120%22 width=%22260%22 height=%22170%22 rx=%2216%22 fill=%22url(%23dsk2c)%22 stroke=%22%230be26f%22 stroke-opacity=%220.45%22/%3E%3Crect x=%22152%22 y=%22150%22 width=%2260%22 height=%2240%22 rx=%228%22 fill=%22url(%23dsk2g)%22 fill-opacity=%22.85%22/%3E%3Cpath d=%22M152 165h60M182 150v40%22 stroke=%22%2308102b%22 stroke-width=%222%22/%3E%3Crect x=%22152%22 y=%22214%22 width=%22140%22 height=%229%22 rx=%224.5%22 fill=%22%23fff%22 fill-opacity=%220.2%22/%3E%3Crect x=%22152%22 y=%22232%22 width=%22100%22 height=%229%22 rx=%224.5%22 fill=%22%23fff%22 fill-opacity=%220.2%22/%3E%3Crect x=%22152%22 y=%22252%22 width=%22216%22 height=%2220%22 rx=%2210%22 fill=%22%23ffffff%22 fill-opacity=%22.06%22/%3E%3Cg transform=%22translate(372 104)%22%3E%3Ccircle r=%2246%22 fill=%22%230a1230%22 stroke=%22%230be26f%22 stroke-width=%222.5%22/%3E%3Crect x=%22-18%22 y=%22-6%22 width=%2236%22 height=%2228%22 rx=%226%22 fill=%22%230be26f%22/%3E%3Cpath d=%22M-11 -6v-9a11 11 0 0 1 22 0v9%22 fill=%22none%22 stroke=%22%230be26f%22 stroke-width=%224.5%22/%3E%3Ccircle cx=%220%22 cy=%228%22 r=%224%22 fill=%22%2304170c%22/%3E%3C/g%3E%3Cg transform=%22translate(90 316)%22%3E%3Crect x=%220%22 y=%220%22 width=%22200%22 height=%2246%22 rx=%2216%22 fill=%22url(%23dsk2c)%22 stroke=%22%23ffffff%22 stroke-opacity=%220.12%22/%3E%3Ccircle cx=%2224%22 cy=%2223%22 r=%2210%22 fill=%22%230be26f%22/%3E%3Cpath d=%22M19.8 23l3.0 3.2 5.5 -6.2%22 fill=%22none%22 stroke=%22%2304170c%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Crect x=%2244%22 y=%2218%22 width=%22120%22 height=%228%22 rx=%224.0%22 fill=%22%23fff%22 fill-opacity=%220.2%22/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
  box-shadow:0 30px 80px -30px rgba(11,226,111,.35);
}
html[data-dr-page="checkout-test"] .drn{top:34px;}
html[data-dr-page^="checkout"] .gold-field{
  position:relative;border-radius:28px;padding:1.5rem 1.4rem;
  background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.03)),#0a1230;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 0 0 1px rgba(11,226,111,.15),0 40px 100px -30px rgba(11,226,111,.45);
}
html[data-dr-page^="checkout"] .gold-field::before{content:"";position:absolute;left:30px;right:30px;top:0;height:3px;background:linear-gradient(90deg,transparent,#3dff9a,transparent);}
html[data-dr-page^="checkout"] .eyebrow{background:rgba(11,226,111,.12);color:#3dff9a;border:1px solid rgba(11,226,111,.35);}
html[data-dr-page^="checkout"] .gold-field h1{color:#eef3ff;font-size:1.6rem;letter-spacing:-.02em;}
html[data-dr-page^="checkout"] :is(.fieldsub,.pnote,.trust .secure,.instant){color:#c3cde6;}
html[data-dr-page^="checkout"] .gold-field [style*="#5a4a10"]{color:#c3cde6!important;}
html[data-dr-page^="checkout"] .white-card{background:rgba(5,10,28,.55);border:1px solid rgba(255,255,255,.1);box-shadow:none;border-radius:18px;}
html[data-dr-page^="checkout"] .feat .ic{background:rgba(11,226,111,.12);color:#3dff9a;}
html[data-dr-page^="checkout"] .guarantee{background:rgba(11,226,111,.08);border-color:rgba(11,226,111,.3);}
html[data-dr-page^="checkout"] :is(.guarantee .gic,.guarantee .gt b){color:#3dff9a;}
html[data-dr-page^="checkout"] :is(.plabel,.pamt){color:#eef3ff;}
html[data-dr-page^="checkout"] .pay{border-radius:999px;background:linear-gradient(135deg,#3dff9a,#0be26f);color:#04170c;box-shadow:0 0 34px -4px rgba(11,226,111,.55);}
html[data-dr-page^="checkout"] .pay:hover{filter:none;box-shadow:0 0 44px -2px rgba(11,226,111,.7);}
html[data-dr-page^="checkout"] .chip{color:#c3cde6;border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.04);}
html[data-dr-page^="checkout"] .voice-bar{background:#0a1230;border-color:rgba(255,255,255,.14);}

/* --- validate (porting/payment logic untouched; result cards stay light "paper") --- */
html[data-dr-page="validate"]{--lsu-purple:#0a1230;--burnt:#4d8dff;--lsu-gold:#3dff9a;}
html[data-dr-page="validate"] header.hero{position:relative;padding:3.4rem 0 2.6rem;}
@media(min-width:980px){
  html[data-dr-page="validate"] header.hero .wrap{max-width:1080px;display:grid;grid-template-columns:1fr 380px;column-gap:48px;align-items:center;}
  html[data-dr-page="validate"] header.hero .wrap>*{grid-column:1;}
  html[data-dr-page="validate"] header.hero .wrap::after{
    content:"";grid-column:2;grid-row:1 / span 4;aspect-ratio:520/400;border-radius:24px;
    background:url("data:image/svg+xml,%3Csvg viewBox=%220 0 520 400%22 role=%22img%22 aria-label=%22Illustration: a step-by-step path moving a number from the old carrier to the new one%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cdefs%3E%3ClinearGradient id=%22dsvg%22 x1=%220%22 x2=%221%22 y1=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%234d8dff%22/%3E%3Cstop offset=%221%22 stop-color=%22%230be26f%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22dsvc%22 x1=%220%22 x2=%220%22 y1=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%2316224d%22/%3E%3Cstop offset=%221%22 stop-color=%22%230b1538%22/%3E%3C/linearGradient%3E%3CradialGradient id=%22dsvr%22%3E%3Cstop offset=%220%22 stop-color=%22%230be26f%22 stop-opacity=%22.35%22/%3E%3Cstop offset=%221%22 stop-color=%22%230be26f%22 stop-opacity=%220%22/%3E%3C/radialGradient%3E%3CradialGradient id=%22dsvb%22%3E%3Cstop offset=%220%22 stop-color=%22%234d8dff%22 stop-opacity=%22.35%22/%3E%3Cstop offset=%221%22 stop-color=%22%234d8dff%22 stop-opacity=%220%22/%3E%3C/radialGradient%3E%3Cpattern id=%22dsvp%22 width=%2226%22 height=%2226%22 patternUnits=%22userSpaceOnUse%22%3E%3Cpath d=%22M26 0H0V26%22 fill=%22none%22 stroke=%22%23ffffff%22 stroke-opacity=%22.05%22/%3E%3C/pattern%3E%3C/defs%3E%3Crect width=%22520%22 height=%22400%22 rx=%2222%22 fill=%22%2308102b%22/%3E%3Crect width=%22520%22 height=%22400%22 rx=%2222%22 fill=%22url(%23dsvp)%22/%3E%3Ccircle cx=%22450%22 cy=%2250%22 r=%22170%22 fill=%22url(%23dsvr)%22/%3E%3Ccircle cx=%2240%22 cy=%22380%22 r=%22190%22 fill=%22url(%23dsvb)%22/%3E%3Ccircle cx=%2226%22 cy=%2224%22 r=%225%22 fill=%22%23ff5a62%22/%3E%3Ccircle cx=%2244%22 cy=%2224%22 r=%225%22 fill=%22%23ffbf3c%22/%3E%3Ccircle cx=%2262%22 cy=%2224%22 r=%225%22 fill=%22%230be26f%22/%3E%3Crect x=%2260%22 y=%22110%22 width=%2284%22 height=%22150%22 rx=%2216%22 fill=%22url(%23dsvc)%22 stroke=%22%234d8dff%22 stroke-width=%222%22/%3E%3Crect x=%2270%22 y=%22128%22 width=%2264%22 height=%22104%22 rx=%226%22 fill=%22%23050a1c%22 fill-opacity=%22.7%22/%3E%3Ccircle cx=%22102%22 cy=%22248%22 r=%225%22 fill=%22%234d8dff%22 fill-opacity=%22.6%22/%3E%3Crect x=%2280%22 y=%22146%22 width=%2244%22 height=%226%22 rx=%223.0%22 fill=%22%23fff%22 fill-opacity=%220.2%22/%3E%3Crect x=%2280%22 y=%22160%22 width=%2230%22 height=%226%22 rx=%223.0%22 fill=%22%23fff%22 fill-opacity=%220.2%22/%3E%3Crect x=%2280%22 y=%22174%22 width=%2238%22 height=%226%22 rx=%223.0%22 fill=%22%23fff%22 fill-opacity=%220.2%22/%3E%3Crect x=%22380%22 y=%22110%22 width=%2284%22 height=%22150%22 rx=%2216%22 fill=%22url(%23dsvc)%22 stroke=%22%230be26f%22 stroke-width=%222%22/%3E%3Crect x=%22390%22 y=%22128%22 width=%2264%22 height=%22104%22 rx=%226%22 fill=%22%23050a1c%22 fill-opacity=%22.7%22/%3E%3Ccircle cx=%22422%22 cy=%22248%22 r=%225%22 fill=%22%230be26f%22 fill-opacity=%22.6%22/%3E%3Crect x=%22400%22 y=%22146%22 width=%2244%22 height=%226%22 rx=%223.0%22 fill=%22%23fff%22 fill-opacity=%220.2%22/%3E%3Crect x=%22400%22 y=%22160%22 width=%2230%22 height=%226%22 rx=%223.0%22 fill=%22%23fff%22 fill-opacity=%220.2%22/%3E%3Crect x=%22400%22 y=%22174%22 width=%2238%22 height=%226%22 rx=%223.0%22 fill=%22%23fff%22 fill-opacity=%220.2%22/%3E%3Ccircle cx=%22422%22 cy=%22210%22 r=%2215%22 fill=%22%230be26f%22/%3E%3Cpath d=%22M415.7 210l4.5 4.8 8.25 -9.3%22 fill=%22none%22 stroke=%22%2304170c%22 stroke-width=%223.0%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Ctext x=%22102%22 y=%22290%22 text-anchor=%22middle%22 font-family=%22Space Grotesk,Inter,sans-serif%22 font-size=%2212%22 font-weight=%22600%22 fill=%22%2393a1c6%22%3EOld carrier%3C/text%3E%3Ctext x=%22422%22 y=%22290%22 text-anchor=%22middle%22 font-family=%22Space Grotesk,Inter,sans-serif%22 font-size=%2212%22 font-weight=%22600%22 fill=%22%2393a1c6%22%3ENew carrier%3C/text%3E%3Cpath d=%22M150 185 C200 110 250 260 300 170 S350 150 374 185%22 fill=%22none%22 stroke=%22url(%23dsvg)%22 stroke-width=%223%22 stroke-dasharray=%226 7%22 class=%22drs-flow%22/%3E%3Ccircle cx=%22196%22 cy=%22146%22 r=%2216%22 fill=%22%230a1230%22 stroke=%22%230be26f%22 stroke-width=%222%22/%3E%3Ctext x=%22196%22 y=%22151%22 text-anchor=%22middle%22 font-family=%22Space Grotesk,Inter,sans-serif%22 font-size=%2213%22 font-weight=%22700%22 fill=%22%23eef3ff%22%3E1%3C/text%3E%3Ccircle cx=%22262%22 cy=%22196%22 r=%2216%22 fill=%22%230a1230%22 stroke=%22%230be26f%22 stroke-width=%222%22/%3E%3Ctext x=%22262%22 y=%22201%22 text-anchor=%22middle%22 font-family=%22Space Grotesk,Inter,sans-serif%22 font-size=%2213%22 font-weight=%22700%22 fill=%22%23eef3ff%22%3E2%3C/text%3E%3Ccircle cx=%22322%22 cy=%22158%22 r=%2216%22 fill=%22%230a1230%22 stroke=%22%234d8dff%22 stroke-width=%222%22/%3E%3Ctext x=%22322%22 y=%22163%22 text-anchor=%22middle%22 font-family=%22Space Grotesk,Inter,sans-serif%22 font-size=%2213%22 font-weight=%22700%22 fill=%22%23eef3ff%22%3E3%3C/text%3E%3Cg transform=%22translate(150 316)%22%3E%3Crect x=%220%22 y=%220%22 width=%22220%22 height=%2250%22 rx=%2216%22 fill=%22url(%23dsvc)%22 stroke=%22%23ffffff%22 stroke-opacity=%220.12%22/%3E%3Ccircle cx=%2226%22 cy=%2225%22 r=%2211%22 fill=%22%230be26f%22/%3E%3Cpath d=%22M21.38 25l3.3 3.52 6.050000000000001 -6.82%22 fill=%22none%22 stroke=%22%2304170c%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Crect x=%2248%22 y=%2218%22 width=%22140%22 height=%227%22 rx=%223.5%22 fill=%22%23fff%22 fill-opacity=%220.2%22/%3E%3Crect x=%2248%22 y=%2232%22 width=%2296%22 height=%227%22 rx=%223.5%22 fill=%22%23fff%22 fill-opacity=%220.2%22/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
    border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 80px -30px rgba(11,226,111,.35);
  }
}
html[data-dr-page="validate"] .hero .eyebrow{display:inline-flex;align-items:center;gap:10px;padding:7px 16px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);box-shadow:0 0 30px -8px rgba(11,226,111,.5);color:#c9ffe2;justify-self:start;}
html[data-dr-page="validate"] .hero .eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--dr-g);box-shadow:0 0 0 4px rgba(11,226,111,.25);}
html[data-dr-page="validate"] .hero h1{font-size:clamp(2.1rem,5vw,3.6rem);}
html[data-dr-page="validate"] .scope{background:rgba(11,226,111,.07);border-color:rgba(11,226,111,.32);border-radius:14px;}
html[data-dr-page="validate"] .panel{border-radius:24px;background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border-color:rgba(255,255,255,.14);box-shadow:0 0 0 1px rgba(11,226,111,.12),0 40px 100px -30px rgba(11,226,111,.35);}
html[data-dr-page="validate"] .panel :is(input,select){background-color:rgba(5,10,28,.6);color:#eef3ff;border-color:rgba(255,255,255,.18);border-radius:12px;}
html[data-dr-page="validate"] .protect{color:#ffe2a0;}
html[data-dr-page="validate"] .cta{border-radius:999px;background:linear-gradient(135deg,#3dff9a,#0be26f);color:#04170c;box-shadow:0 0 34px -4px rgba(11,226,111,.55);}
html[data-dr-page="validate"] .cta:hover{background:linear-gradient(135deg,#3dff9a,#0be26f);box-shadow:0 0 44px -2px rgba(11,226,111,.7);}
html[data-dr-page="validate"] #vInputStart{background:linear-gradient(135deg,#3dff9a,#0be26f)!important;color:#04170c!important;border-radius:999px!important;}
html[data-dr-page="validate"] .unlock-btn{border-radius:999px;color:#04170c;}
html[data-dr-page="validate"] .verdict{border-radius:20px 20px 0 0;}

/* --- concierge + port wizard (logic untouched; gold button stays gold — the voice script names it) --- */
html[data-dr-page="concierge"],html[data-dr-page="port-wizard"]{--font-d:var(--dr-fb);--font-b:var(--dr-fd);--ink:#eef3ff;}
html[data-dr-page="concierge"] .wrap::before{
  content:"";display:block;aspect-ratio:520/400;max-height:230px;margin:0 auto 22px;border-radius:22px;
  background:url("data:image/svg+xml,%3Csvg viewBox=%220 0 520 400%22 role=%22img%22 aria-label=%22Illustration: a step-by-step path moving a number from the old carrier to the new one%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cdefs%3E%3ClinearGradient id=%22dsvg%22 x1=%220%22 x2=%221%22 y1=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%234d8dff%22/%3E%3Cstop offset=%221%22 stop-color=%22%230be26f%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22dsvc%22 x1=%220%22 x2=%220%22 y1=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%2316224d%22/%3E%3Cstop offset=%221%22 stop-color=%22%230b1538%22/%3E%3C/linearGradient%3E%3CradialGradient id=%22dsvr%22%3E%3Cstop offset=%220%22 stop-color=%22%230be26f%22 stop-opacity=%22.35%22/%3E%3Cstop offset=%221%22 stop-color=%22%230be26f%22 stop-opacity=%220%22/%3E%3C/radialGradient%3E%3CradialGradient id=%22dsvb%22%3E%3Cstop offset=%220%22 stop-color=%22%234d8dff%22 stop-opacity=%22.35%22/%3E%3Cstop offset=%221%22 stop-color=%22%234d8dff%22 stop-opacity=%220%22/%3E%3C/radialGradient%3E%3Cpattern id=%22dsvp%22 width=%2226%22 height=%2226%22 patternUnits=%22userSpaceOnUse%22%3E%3Cpath d=%22M26 0H0V26%22 fill=%22none%22 stroke=%22%23ffffff%22 stroke-opacity=%22.05%22/%3E%3C/pattern%3E%3C/defs%3E%3Crect width=%22520%22 height=%22400%22 rx=%2222%22 fill=%22%2308102b%22/%3E%3Crect width=%22520%22 height=%22400%22 rx=%2222%22 fill=%22url(%23dsvp)%22/%3E%3Ccircle cx=%22450%22 cy=%2250%22 r=%22170%22 fill=%22url(%23dsvr)%22/%3E%3Ccircle cx=%2240%22 cy=%22380%22 r=%22190%22 fill=%22url(%23dsvb)%22/%3E%3Ccircle cx=%2226%22 cy=%2224%22 r=%225%22 fill=%22%23ff5a62%22/%3E%3Ccircle cx=%2244%22 cy=%2224%22 r=%225%22 fill=%22%23ffbf3c%22/%3E%3Ccircle cx=%2262%22 cy=%2224%22 r=%225%22 fill=%22%230be26f%22/%3E%3Crect x=%2260%22 y=%22110%22 width=%2284%22 height=%22150%22 rx=%2216%22 fill=%22url(%23dsvc)%22 stroke=%22%234d8dff%22 stroke-width=%222%22/%3E%3Crect x=%2270%22 y=%22128%22 width=%2264%22 height=%22104%22 rx=%226%22 fill=%22%23050a1c%22 fill-opacity=%22.7%22/%3E%3Ccircle cx=%22102%22 cy=%22248%22 r=%225%22 fill=%22%234d8dff%22 fill-opacity=%22.6%22/%3E%3Crect x=%2280%22 y=%22146%22 width=%2244%22 height=%226%22 rx=%223.0%22 fill=%22%23fff%22 fill-opacity=%220.2%22/%3E%3Crect x=%2280%22 y=%22160%22 width=%2230%22 height=%226%22 rx=%223.0%22 fill=%22%23fff%22 fill-opacity=%220.2%22/%3E%3Crect x=%2280%22 y=%22174%22 width=%2238%22 height=%226%22 rx=%223.0%22 fill=%22%23fff%22 fill-opacity=%220.2%22/%3E%3Crect x=%22380%22 y=%22110%22 width=%2284%22 height=%22150%22 rx=%2216%22 fill=%22url(%23dsvc)%22 stroke=%22%230be26f%22 stroke-width=%222%22/%3E%3Crect x=%22390%22 y=%22128%22 width=%2264%22 height=%22104%22 rx=%226%22 fill=%22%23050a1c%22 fill-opacity=%22.7%22/%3E%3Ccircle cx=%22422%22 cy=%22248%22 r=%225%22 fill=%22%230be26f%22 fill-opacity=%22.6%22/%3E%3Crect x=%22400%22 y=%22146%22 width=%2244%22 height=%226%22 rx=%223.0%22 fill=%22%23fff%22 fill-opacity=%220.2%22/%3E%3Crect x=%22400%22 y=%22160%22 width=%2230%22 height=%226%22 rx=%223.0%22 fill=%22%23fff%22 fill-opacity=%220.2%22/%3E%3Crect x=%22400%22 y=%22174%22 width=%2238%22 height=%226%22 rx=%223.0%22 fill=%22%23fff%22 fill-opacity=%220.2%22/%3E%3Ccircle cx=%22422%22 cy=%22210%22 r=%2215%22 fill=%22%230be26f%22/%3E%3Cpath d=%22M415.7 210l4.5 4.8 8.25 -9.3%22 fill=%22none%22 stroke=%22%2304170c%22 stroke-width=%223.0%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Ctext x=%22102%22 y=%22290%22 text-anchor=%22middle%22 font-family=%22Space Grotesk,Inter,sans-serif%22 font-size=%2212%22 font-weight=%22600%22 fill=%22%2393a1c6%22%3EOld carrier%3C/text%3E%3Ctext x=%22422%22 y=%22290%22 text-anchor=%22middle%22 font-family=%22Space Grotesk,Inter,sans-serif%22 font-size=%2212%22 font-weight=%22600%22 fill=%22%2393a1c6%22%3ENew carrier%3C/text%3E%3Cpath d=%22M150 185 C200 110 250 260 300 170 S350 150 374 185%22 fill=%22none%22 stroke=%22url(%23dsvg)%22 stroke-width=%223%22 stroke-dasharray=%226 7%22 class=%22drs-flow%22/%3E%3Ccircle cx=%22196%22 cy=%22146%22 r=%2216%22 fill=%22%230a1230%22 stroke=%22%230be26f%22 stroke-width=%222%22/%3E%3Ctext x=%22196%22 y=%22151%22 text-anchor=%22middle%22 font-family=%22Space Grotesk,Inter,sans-serif%22 font-size=%2213%22 font-weight=%22700%22 fill=%22%23eef3ff%22%3E1%3C/text%3E%3Ccircle cx=%22262%22 cy=%22196%22 r=%2216%22 fill=%22%230a1230%22 stroke=%22%230be26f%22 stroke-width=%222%22/%3E%3Ctext x=%22262%22 y=%22201%22 text-anchor=%22middle%22 font-family=%22Space Grotesk,Inter,sans-serif%22 font-size=%2213%22 font-weight=%22700%22 fill=%22%23eef3ff%22%3E2%3C/text%3E%3Ccircle cx=%22322%22 cy=%22158%22 r=%2216%22 fill=%22%230a1230%22 stroke=%22%234d8dff%22 stroke-width=%222%22/%3E%3Ctext x=%22322%22 y=%22163%22 text-anchor=%22middle%22 font-family=%22Space Grotesk,Inter,sans-serif%22 font-size=%2213%22 font-weight=%22700%22 fill=%22%23eef3ff%22%3E3%3C/text%3E%3Cg transform=%22translate(150 316)%22%3E%3Crect x=%220%22 y=%220%22 width=%22220%22 height=%2250%22 rx=%2216%22 fill=%22url(%23dsvc)%22 stroke=%22%23ffffff%22 stroke-opacity=%220.12%22/%3E%3Ccircle cx=%2226%22 cy=%2225%22 r=%2211%22 fill=%22%230be26f%22/%3E%3Cpath d=%22M21.38 25l3.3 3.52 6.050000000000001 -6.82%22 fill=%22none%22 stroke=%22%2304170c%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Crect x=%2248%22 y=%2218%22 width=%22140%22 height=%227%22 rx=%223.5%22 fill=%22%23fff%22 fill-opacity=%220.2%22/%3E%3Crect x=%2248%22 y=%2232%22 width=%2296%22 height=%227%22 rx=%223.5%22 fill=%22%23fff%22 fill-opacity=%220.2%22/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
}
@media(min-width:900px){
  html[data-dr-page="port-wizard"] .hero{display:grid;grid-template-columns:1fr 300px;column-gap:36px;align-items:center;text-align:left;}
  html[data-dr-page="port-wizard"] .hero>*{grid-column:1;}
  html[data-dr-page="port-wizard"] .hero::after{content:"";grid-column:2;grid-row:1 / span 2;aspect-ratio:520/400;border-radius:22px;background:url("data:image/svg+xml,%3Csvg viewBox=%220 0 520 400%22 role=%22img%22 aria-label=%22Illustration: a step-by-step path moving a number from the old carrier to the new one%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cdefs%3E%3ClinearGradient id=%22dsvg%22 x1=%220%22 x2=%221%22 y1=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%234d8dff%22/%3E%3Cstop offset=%221%22 stop-color=%22%230be26f%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22dsvc%22 x1=%220%22 x2=%220%22 y1=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%2316224d%22/%3E%3Cstop offset=%221%22 stop-color=%22%230b1538%22/%3E%3C/linearGradient%3E%3CradialGradient id=%22dsvr%22%3E%3Cstop offset=%220%22 stop-color=%22%230be26f%22 stop-opacity=%22.35%22/%3E%3Cstop offset=%221%22 stop-color=%22%230be26f%22 stop-opacity=%220%22/%3E%3C/radialGradient%3E%3CradialGradient id=%22dsvb%22%3E%3Cstop offset=%220%22 stop-color=%22%234d8dff%22 stop-opacity=%22.35%22/%3E%3Cstop offset=%221%22 stop-color=%22%234d8dff%22 stop-opacity=%220%22/%3E%3C/radialGradient%3E%3Cpattern id=%22dsvp%22 width=%2226%22 height=%2226%22 patternUnits=%22userSpaceOnUse%22%3E%3Cpath d=%22M26 0H0V26%22 fill=%22none%22 stroke=%22%23ffffff%22 stroke-opacity=%22.05%22/%3E%3C/pattern%3E%3C/defs%3E%3Crect width=%22520%22 height=%22400%22 rx=%2222%22 fill=%22%2308102b%22/%3E%3Crect width=%22520%22 height=%22400%22 rx=%2222%22 fill=%22url(%23dsvp)%22/%3E%3Ccircle cx=%22450%22 cy=%2250%22 r=%22170%22 fill=%22url(%23dsvr)%22/%3E%3Ccircle cx=%2240%22 cy=%22380%22 r=%22190%22 fill=%22url(%23dsvb)%22/%3E%3Ccircle cx=%2226%22 cy=%2224%22 r=%225%22 fill=%22%23ff5a62%22/%3E%3Ccircle cx=%2244%22 cy=%2224%22 r=%225%22 fill=%22%23ffbf3c%22/%3E%3Ccircle cx=%2262%22 cy=%2224%22 r=%225%22 fill=%22%230be26f%22/%3E%3Crect x=%2260%22 y=%22110%22 width=%2284%22 height=%22150%22 rx=%2216%22 fill=%22url(%23dsvc)%22 stroke=%22%234d8dff%22 stroke-width=%222%22/%3E%3Crect x=%2270%22 y=%22128%22 width=%2264%22 height=%22104%22 rx=%226%22 fill=%22%23050a1c%22 fill-opacity=%22.7%22/%3E%3Ccircle cx=%22102%22 cy=%22248%22 r=%225%22 fill=%22%234d8dff%22 fill-opacity=%22.6%22/%3E%3Crect x=%2280%22 y=%22146%22 width=%2244%22 height=%226%22 rx=%223.0%22 fill=%22%23fff%22 fill-opacity=%220.2%22/%3E%3Crect x=%2280%22 y=%22160%22 width=%2230%22 height=%226%22 rx=%223.0%22 fill=%22%23fff%22 fill-opacity=%220.2%22/%3E%3Crect x=%2280%22 y=%22174%22 width=%2238%22 height=%226%22 rx=%223.0%22 fill=%22%23fff%22 fill-opacity=%220.2%22/%3E%3Crect x=%22380%22 y=%22110%22 width=%2284%22 height=%22150%22 rx=%2216%22 fill=%22url(%23dsvc)%22 stroke=%22%230be26f%22 stroke-width=%222%22/%3E%3Crect x=%22390%22 y=%22128%22 width=%2264%22 height=%22104%22 rx=%226%22 fill=%22%23050a1c%22 fill-opacity=%22.7%22/%3E%3Ccircle cx=%22422%22 cy=%22248%22 r=%225%22 fill=%22%230be26f%22 fill-opacity=%22.6%22/%3E%3Crect x=%22400%22 y=%22146%22 width=%2244%22 height=%226%22 rx=%223.0%22 fill=%22%23fff%22 fill-opacity=%220.2%22/%3E%3Crect x=%22400%22 y=%22160%22 width=%2230%22 height=%226%22 rx=%223.0%22 fill=%22%23fff%22 fill-opacity=%220.2%22/%3E%3Crect x=%22400%22 y=%22174%22 width=%2238%22 height=%226%22 rx=%223.0%22 fill=%22%23fff%22 fill-opacity=%220.2%22/%3E%3Ccircle cx=%22422%22 cy=%22210%22 r=%2215%22 fill=%22%230be26f%22/%3E%3Cpath d=%22M415.7 210l4.5 4.8 8.25 -9.3%22 fill=%22none%22 stroke=%22%2304170c%22 stroke-width=%223.0%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Ctext x=%22102%22 y=%22290%22 text-anchor=%22middle%22 font-family=%22Space Grotesk,Inter,sans-serif%22 font-size=%2212%22 font-weight=%22600%22 fill=%22%2393a1c6%22%3EOld carrier%3C/text%3E%3Ctext x=%22422%22 y=%22290%22 text-anchor=%22middle%22 font-family=%22Space Grotesk,Inter,sans-serif%22 font-size=%2212%22 font-weight=%22600%22 fill=%22%2393a1c6%22%3ENew carrier%3C/text%3E%3Cpath d=%22M150 185 C200 110 250 260 300 170 S350 150 374 185%22 fill=%22none%22 stroke=%22url(%23dsvg)%22 stroke-width=%223%22 stroke-dasharray=%226 7%22 class=%22drs-flow%22/%3E%3Ccircle cx=%22196%22 cy=%22146%22 r=%2216%22 fill=%22%230a1230%22 stroke=%22%230be26f%22 stroke-width=%222%22/%3E%3Ctext x=%22196%22 y=%22151%22 text-anchor=%22middle%22 font-family=%22Space Grotesk,Inter,sans-serif%22 font-size=%2213%22 font-weight=%22700%22 fill=%22%23eef3ff%22%3E1%3C/text%3E%3Ccircle cx=%22262%22 cy=%22196%22 r=%2216%22 fill=%22%230a1230%22 stroke=%22%230be26f%22 stroke-width=%222%22/%3E%3Ctext x=%22262%22 y=%22201%22 text-anchor=%22middle%22 font-family=%22Space Grotesk,Inter,sans-serif%22 font-size=%2213%22 font-weight=%22700%22 fill=%22%23eef3ff%22%3E2%3C/text%3E%3Ccircle cx=%22322%22 cy=%22158%22 r=%2216%22 fill=%22%230a1230%22 stroke=%22%234d8dff%22 stroke-width=%222%22/%3E%3Ctext x=%22322%22 y=%22163%22 text-anchor=%22middle%22 font-family=%22Space Grotesk,Inter,sans-serif%22 font-size=%2213%22 font-weight=%22700%22 fill=%22%23eef3ff%22%3E3%3C/text%3E%3Cg transform=%22translate(150 316)%22%3E%3Crect x=%220%22 y=%220%22 width=%22220%22 height=%2250%22 rx=%2216%22 fill=%22url(%23dsvc)%22 stroke=%22%23ffffff%22 stroke-opacity=%220.12%22/%3E%3Ccircle cx=%2226%22 cy=%2225%22 r=%2211%22 fill=%22%230be26f%22/%3E%3Cpath d=%22M21.38 25l3.3 3.52 6.050000000000001 -6.82%22 fill=%22none%22 stroke=%22%2304170c%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Crect x=%2248%22 y=%2218%22 width=%22140%22 height=%227%22 rx=%223.5%22 fill=%22%23fff%22 fill-opacity=%220.2%22/%3E%3Crect x=%2248%22 y=%2232%22 width=%2296%22 height=%227%22 rx=%223.5%22 fill=%22%23fff%22 fill-opacity=%220.2%22/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;}
}
html[data-dr-page="port-wizard"] .hero h1{font-size:clamp(1.9rem,4.4vw,2.8rem);letter-spacing:-.025em;}
html[data-dr-page="port-wizard"] .hero .accent{background:linear-gradient(90deg,#4d8dff,#0be26f);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
html[data-dr-page="concierge"] .card,html[data-dr-page="port-wizard"] .card{
  border-radius:24px;background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  border-color:rgba(255,255,255,.12);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 30px 90px -40px rgba(11,226,111,.35);
}
html[data-dr-page="concierge"] .btn,html[data-dr-page="port-wizard"] .btn{border-radius:999px;}
html[data-dr-page="concierge"] .btn-primary,html[data-dr-page="port-wizard"] .btn-primary{background:linear-gradient(135deg,#3dff9a,#0be26f);color:#04170c;box-shadow:0 0 34px -4px rgba(11,226,111,.5);}

/* --- AI concierge: full-screen chat app; keep its light chat panel, fit it under the nav --- */
html[data-dr-page="ai-concierge"]{--muted:#5b6683;}
html[data-dr-page="ai-concierge"] body{display:flex;flex-direction:column;}
html[data-dr-page="ai-concierge"] .drn{flex-shrink:0;}
html[data-dr-page="ai-concierge"] .app{height:auto;flex:1;min-height:0;width:100%;border-radius:22px 22px 0 0;overflow:hidden;box-shadow:0 0 80px -20px rgba(11,226,111,.35);}
html[data-dr-page="upgrade"] .drh h1{font-size:clamp(34px,4vw,52px);}
html[data-dr-page="deals"] .drh h1{font-size:clamp(38px,5vw,64px);}
.drh .drh-txt>div:first-child{display:block;min-height:0;overflow:visible;}
html[data-dr-page="partners"] .drh h1{font-size:clamp(34px,4.2vw,54px);}
html[data-dr-page="partners"] .hero-ctas{display:flex;justify-content:flex-start;}

/* --- contrast fixes found by the AA audit (style only) --- */
html[data-dr-page="deals"] .tier-bar:is(.hot,.good){color:#ffcf6b;}
html[data-dr-page="deals"] .value-was{color:#8e9cc2;}
html[data-dr-page="deals"] .deal-fine{color:#a3afcf;}
html[data-dr-page="deals"] .network-chip{filter:brightness(1.8) saturate(.85);}
html[data-dr-page="etf"] .disclaimer,html[data-dr-page="plan"] .disclaimer{color:#a3afcf;}
html[data-dr-page="plan"] .bd-toggle-btn.active.no{color:#ff8a8a;}
html[data-dr-page="upgrade"] .analyze-btn{background:linear-gradient(135deg,#3dff9a,#0be26f);color:#04170c;border-radius:999px;box-shadow:0 0 34px -4px rgba(11,226,111,.55);}
html[data-dr-page="validate"] #vInputSkip{color:#c3cde6!important;}
html[data-dr-page="validate"] .lf-guarantee{color:#c3cde6;}

/* ---------- 4d. vendor photos (.dr-photo) ----------
   Small source images (max 342px wide): never rendered wider than their
   natural size (--pw). Inset over the hero illustration on desktop; in
   normal flow, full width up to natural size, on phones.               */
.drh-ill{position:relative;}
.dr-photo{
  --pw:220px;
  position:absolute;left:-30px;bottom:-40px;z-index:3;
  width:var(--pw);max-width:min(var(--pw),360px);margin:0;
  transform:perspective(1000px) rotateY(-6deg) rotateX(3deg);
  transition:transform .45s cubic-bezier(.2,.7,.2,1),filter .45s;
}
.dr-photo::before{ /* soft glow blob behind the photo */
  content:"";position:absolute;inset:-18%;z-index:-1;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(11,226,111,.38),rgba(34,211,238,.12) 55%,transparent 75%);
  filter:blur(14px);
}
.dr-photo-frame{ /* 2px green-to-teal gradient border via padding */
  position:relative;padding:2px;border-radius:20px;
  background:linear-gradient(135deg,#3dff9a,#0be26f 40%,#22d3ee);
  box-shadow:0 30px 80px -20px rgba(34,197,94,.45),0 0 0 1px rgba(255,255,255,.08);
  transition:box-shadow .45s;
}
.dr-photo-frame img{display:block;width:100%;height:auto;aspect-ratio:var(--pr,342/230);object-fit:cover;border-radius:18px;background:#0a1230;}
.dr-photo-frame::after{ /* dark gradient at the bottom for the caption */
  content:"";position:absolute;left:2px;right:2px;bottom:2px;height:46%;border-radius:0 0 18px 18px;pointer-events:none;
  background:linear-gradient(to top,rgba(5,10,28,.88),rgba(5,10,28,0));
}
.dr-photo-cap{
  position:absolute;left:14px;right:14px;bottom:11px;z-index:1;
  font:600 13px/1.3 var(--dr-fd);color:#eef3ff;letter-spacing:-.01em;text-shadow:0 1px 8px rgba(0,0,0,.6);
}
.dr-photo:hover{transform:perspective(1000px) rotateY(0) rotateX(0) translateY(-6px);}
.dr-photo:hover .dr-photo-frame{box-shadow:0 40px 100px -18px rgba(34,197,94,.7),0 0 0 1px rgba(255,255,255,.14);}
.dr-chip{
  position:absolute;z-index:2;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  padding:8px 13px;border-radius:14px;
  background:rgba(10,18,48,.78);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.18);box-shadow:0 14px 34px -10px rgba(0,0,0,.7);
  font:600 12.5px/1.2 var(--dr-fd);color:#eef3ff;
  animation:drChip 4.5s ease-in-out infinite alternate;
}
.dr-chip i{font-style:normal;width:24px;height:24px;border-radius:8px;display:grid;place-items:center;background:rgba(11,226,111,.18);font-size:13px;}
.dr-chip-a{top:14px;right:-34px;}
.dr-chip-b{bottom:52px;left:-26px;animation-delay:-2s;}
@keyframes drChip{to{translate:0 -7px;}}
/* fade + rise on scroll (dr-site.js adds .dr-in) */
.dr-photo.dr-pre{opacity:0;translate:0 30px;}
.dr-photo.dr-pre.dr-in{opacity:1;translate:0 0;transition:opacity .9s cubic-bezier(.2,.7,.2,1),translate .9s cubic-bezier(.2,.7,.2,1),transform .45s;}
@media(max-width:900px){
  .dr-photo{position:relative;left:auto;bottom:auto;width:100%;max-width:min(var(--pw),100%);margin:22px auto 0;transform:none;}
  .dr-photo:hover{transform:translateY(-4px);}
  .dr-chip-a{top:10px;right:10px;}
  .dr-chip-b{bottom:auto;top:52px;left:10px;}
  .dr-chip{font-size:11.5px;padding:6px 10px;max-width:calc(100% - 20px);white-space:normal;}
}
@media(prefers-reduced-motion:reduce){
  .dr-photo,.dr-photo:hover{transform:none!important;transition:none!important;}
  .dr-chip{animation:none!important;}
  .dr-photo.dr-pre{opacity:1!important;translate:none!important;}
}
@media(max-width:900px){
  .dr-photo--sm{width:auto;max-width:100%;display:flex;flex-direction:column;align-items:center;gap:10px;}
  .dr-photo--sm .dr-photo-frame{width:var(--pw);}
  .dr-photo--sm .dr-chip{position:static;}
}

/* =====================================================================
   7. depth pass ("3D-ish"): layered card shadows, gradient borders,
      pointer tilt (dr-site.js adds .dr-tilt), hover sheen, 3D score
      medallions, raised CTAs, hook strips, glass hook chips, CTA band.
   Scoped to content pages: never the payment / validate / AI chat pages.
   Transforms + opacity only for motion; every overlay is pointer-events:none.
   ===================================================================== */
html[data-dr-page]:not([data-dr-page^="checkout"]):not([data-dr-page="validate"]):not([data-dr-page="ai-concierge"]){
  --dr-depth:0 1px 0 rgba(255,255,255,.07) inset,0 2px 4px rgba(0,0,0,.28),0 14px 28px -10px rgba(0,0,0,.55),0 36px 70px -36px rgba(11,226,111,.28);
  --dr-depth-h:0 1px 0 rgba(255,255,255,.12) inset,0 4px 8px rgba(0,0,0,.3),0 24px 44px -12px rgba(0,0,0,.6),0 44px 90px -30px rgba(11,226,111,.45);
}
:is(html[data-dr-page="tools"],html[data-dr-page="plan"],html[data-dr-page="deals"],html[data-dr-page="partners"],html[data-dr-page="etf"],html[data-dr-page="upgrade"],html[data-dr-page="simswap"],html[data-dr-page="deal-finder"],html[data-dr-page="engine"],html[data-dr-page="engine-kroger"])
  :is(.tool-card,.plan-card,.deal-card,.ptype-card,.value-card,.factor,.breakdown-card,.payback-card,.projection-card,.form-panel,.deal,.qcard,.wstat,.carrier-card){
  position:relative;box-shadow:var(--dr-depth);
}
/* gradient hairline border (masked pseudo, never catches clicks) */
:is(html[data-dr-page="tools"],html[data-dr-page="plan"],html[data-dr-page="deals"],html[data-dr-page="partners"],html[data-dr-page="etf"],html[data-dr-page="upgrade"],html[data-dr-page="simswap"],html[data-dr-page="deal-finder"],html[data-dr-page="engine"],html[data-dr-page="engine-kroger"])
  :is(.tool-card,.plan-card,.deal-card,.ptype-card,.value-card,.factor,.breakdown-card,.payback-card,.projection-card,.form-panel,.deal,.qcard,.wstat)::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:3;
  background:linear-gradient(140deg,rgba(61,255,154,.55),rgba(77,141,255,.28) 38%,rgba(255,255,255,.04) 62%,rgba(61,255,154,.22));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  opacity:.55;transition:opacity .3s;
}
:is(html[data-dr-page="tools"],html[data-dr-page="plan"],html[data-dr-page="deals"],html[data-dr-page="partners"],html[data-dr-page="upgrade"],html[data-dr-page="deal-finder"])
  :is(.tool-card:not(.coming-soon),.plan-card,.deal-card,.ptype-card,.value-card,.factor,.deal):hover{box-shadow:var(--dr-depth-h);}
:is(html[data-dr-page="tools"],html[data-dr-page="plan"],html[data-dr-page="deals"],html[data-dr-page="partners"],html[data-dr-page="upgrade"],html[data-dr-page="deal-finder"])
  :is(.tool-card,.plan-card,.deal-card,.ptype-card,.value-card,.factor,.deal):hover::after{opacity:1;}
/* light sheen that sweeps across on hover (clipped by the card) */
:is(html[data-dr-page="tools"],html[data-dr-page="plan"],html[data-dr-page="deals"],html[data-dr-page="partners"],html[data-dr-page="deal-finder"])
  :is(.tool-card:not(.coming-soon),.plan-card,.deal-card,.ptype-card,.deal)::before{
  content:"";position:absolute;top:0;bottom:0;left:0;width:42%;z-index:2;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.07) 40%,rgba(255,255,255,.14) 50%,rgba(255,255,255,.07) 60%,transparent);
  transform:translateX(-130%) skewX(-14deg);opacity:0;
}
:is(html[data-dr-page="tools"],html[data-dr-page="plan"],html[data-dr-page="deals"],html[data-dr-page="partners"],html[data-dr-page="deal-finder"])
  :is(.tool-card:not(.coming-soon),.plan-card,.deal-card,.ptype-card,.deal):hover::before{
  transform:translateX(330%) skewX(-14deg);opacity:1;transition:transform 1s cubic-bezier(.2,.7,.2,1),opacity .25s;
}
html[data-dr-page="partners"] .ptype-card{overflow:hidden;}
/* pointer tilt (dr-site.js sets --dr-rx/--dr-ry, max 6deg; mouse only, never with reduced motion) */
html[data-dr-page] .dr-tilt{
  transform:perspective(900px) rotateX(var(--dr-rx,0deg)) rotateY(var(--dr-ry,0deg)) translateY(-2px)!important;
  transition:transform .12s ease-out,box-shadow .3s,border-color .3s!important;will-change:transform;
}
html[data-dr-page] .dr-untilt{transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s!important;}

/* deal score badge -> raised 3D medallion */
html[data-dr-page="deals"] .donut{
  border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#26356e 0%,#111b45 42%,#060b22 78%);
  box-shadow:inset 0 2px 2px rgba(255,255,255,.22),inset 0 -5px 10px rgba(0,0,0,.55),0 0 0 2px rgba(255,255,255,.06),0 10px 18px -6px rgba(0,0,0,.75),0 0 26px -6px rgba(11,226,111,.55);
  transform:translateZ(0);
}
html[data-dr-page="deals"] .donut::after{ /* specular highlight */
  content:"";position:absolute;left:18%;top:9%;width:46%;height:30%;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.28),rgba(255,255,255,0) 70%);
}
html[data-dr-page="deals"] .donut-num{text-shadow:0 1px 0 rgba(0,0,0,.6),0 0 14px currentColor;}
html[data-dr-page="deal-finder"] .deal-score{
  border-radius:50%!important;
  background:radial-gradient(circle at 34% 28%,#26356e 0%,#111b45 45%,#060b22 80%)!important;
  box-shadow:inset 0 2px 2px rgba(255,255,255,.22),inset 0 -5px 10px rgba(0,0,0,.55),0 10px 18px -6px rgba(0,0,0,.75),0 0 22px -6px rgba(11,226,111,.55);
}
html[data-dr-page="deal-finder"] .deal-score .n{text-shadow:0 1px 0 rgba(0,0,0,.6),0 0 12px rgba(61,255,154,.6);}

/* deal / plan CTAs: bold, raised, with a press effect */
:is(html[data-dr-page="deals"] .btn-deal.btn-primary,html[data-dr-page="deal-finder"] .deal-cta,html[data-dr-page="plan"] .btn-card,html[data-dr-page="tools"] .tool-btn){
  font-weight:800;letter-spacing:.01em;
  background:linear-gradient(180deg,#5dffad 0%,#14e874 48%,#03c45e 100%)!important;color:#03150a!important;
  border:0;border-radius:999px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -3px 0 rgba(0,0,0,.18),0 4px 0 #028a42,0 12px 24px -8px rgba(11,226,111,.65)!important;
  transition:transform .15s,box-shadow .15s!important;
}
:is(html[data-dr-page="deals"] .btn-deal.btn-primary,html[data-dr-page="deal-finder"] .deal-cta,html[data-dr-page="plan"] .btn-card):hover{
  transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -3px 0 rgba(0,0,0,.18),0 5px 0 #028a42,0 18px 30px -8px rgba(11,226,111,.8)!important;
}
:is(html[data-dr-page="deals"] .btn-deal.btn-primary,html[data-dr-page="deal-finder"] .deal-cta,html[data-dr-page="plan"] .btn-card,html[data-dr-page="tools"] .tool-btn):active{
  transform:translateY(3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 2px 6px rgba(0,0,0,.25),0 1px 0 #028a42,0 4px 10px -6px rgba(11,226,111,.6)!important;
}
html[data-dr-page="plan"] .btn-card{position:relative;z-index:4;}
html[data-dr-page="deals"] .card-foot,html[data-dr-page="deal-finder"] .deal-cta{position:relative;z-index:4;}

/* section headings: gradient accent like index */
html[data-dr-page]:not([data-dr-page^="checkout"]):not([data-dr-page="validate"]) :is(.section-title,.sec-title,.how-score>h3,.dr-band h2,.cta-band h2){
  background:linear-gradient(92deg,#ffffff 0%,#e3ecff 55%,#8fffc4 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#eef3ff;
}
html[data-dr-page]:not([data-dr-page^="checkout"]):not([data-dr-page="validate"]) :is(.section-title,.sec-title,.dr-band h2,.cta-band h2,.bd-hero h2) em{
  font-style:normal;background:linear-gradient(90deg,#4d8dff,#0be26f 60%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

/* hook strip under the heroes */
.dr-hooks{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px;animation:drIn .9s .5s cubic-bezier(.2,.7,.2,1) backwards;}
.dr-hooks li{
  display:inline-flex;align-items:center;gap:8px;margin:0;padding:7px 14px 7px 10px;border-radius:999px;
  font:600 13.5px/1.3 var(--dr-fd);color:#e6fff1;letter-spacing:-.005em;
  background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
  border:1px solid rgba(61,255,154,.28);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 20px -10px rgba(0,0,0,.6);
}
.dr-hooks li::before{
  content:"✓";display:grid;place-items:center;width:20px;height:20px;border-radius:50%;flex-shrink:0;
  font:800 11px/1 var(--dr-fb);color:#04170c;background:linear-gradient(135deg,#3dff9a,#0be26f);
  box-shadow:0 0 12px -2px rgba(11,226,111,.7);
}
.dr-hooks--sm{gap:8px;margin-top:14px;}
.dr-hooks--sm li{font-size:12.5px;padding:5px 12px 5px 8px;}
html[data-dr-page="deal-finder"] .dr-hooks,html[data-dr-page="port-wizard"] .dr-hooks{justify-content:flex-start;}
html[data-dr-page="concierge"] .dr-hooks{justify-content:center;margin:14px 0 4px;}
@media(max-width:720px){
  html[data-dr-page="deal-finder"] .dr-hooks{justify-content:center;}
}
@media(max-width:899px){ html[data-dr-page="port-wizard"] .dr-hooks{justify-content:center;} }

/* third floating glass chip on hero illustrations */
.dr-chip-c{top:-16px;left:22px;animation-delay:-3.2s;z-index:4;pointer-events:none;}
.dr-chip-c i{background:rgba(77,141,255,.22);}

/* hero illustration: gentle float + scroll parallax (dr-site.js sets --dr-par) */
.drh-ill{transform:translate3d(0,var(--dr-par,0px),0);}
.drh-ill>svg{animation:drFloatY 7s ease-in-out infinite alternate;}
@keyframes drFloatY{from{transform:translateY(-4px) rotate(-.4deg);}to{transform:translateY(6px) rotate(.4deg);}}

/* end-of-page CTA band */
.dr-band{padding:56px 24px 72px;}
.dr-band-in{
  position:relative;max-width:1072px;margin:0 auto;padding:40px 44px;border-radius:28px;overflow:hidden;
  display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
  background:radial-gradient(600px 260px at 100% 0,rgba(11,226,111,.20),transparent 70%),radial-gradient(500px 260px at 0 100%,rgba(43,102,255,.24),transparent 70%),linear-gradient(160deg,#0f1b4a,#0a1230);
  border:1px solid rgba(61,255,154,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 30px 80px -30px rgba(11,226,111,.45),0 20px 40px -20px rgba(0,0,0,.7);
}
.dr-band-txt{flex:1 1 420px;min-width:0;}
.dr-band-eye{display:block;font:600 12px/1.4 var(--dr-fd);letter-spacing:.14em;text-transform:uppercase;color:var(--dr-g);text-shadow:0 0 18px rgba(11,226,111,.5);margin-bottom:10px;}
.dr-band h2{font:700 clamp(26px,3.2vw,38px)/1.12 var(--dr-fd);letter-spacing:-.02em;margin:0 0 12px;}
.dr-band p{margin:0;color:#c3cde6;font:400 16px/1.6 var(--dr-fb);max-width:620px;}
.dr-band-btn{flex-shrink:0;position:relative;}
.dr-band-btn::after{content:"";position:absolute;inset:0;border-radius:inherit;animation:drRing 2.6s ease-out infinite;pointer-events:none;}
@media(max-width:640px){
  .dr-band{padding:40px 16px 52px;}
  .dr-band-in{padding:28px 22px;border-radius:22px;}
  .dr-band-btn{width:100%;white-space:normal;text-align:center;}
}

/* staggered reveal extras + reduced motion */
@media(prefers-reduced-motion:reduce){
  .dr-tilt{transform:none!important;}
  .drh-ill,.drh-ill>svg,.dr-hooks,.dr-band-btn::after{animation:none!important;transform:none!important;}
  :is(.tool-card,.plan-card,.deal-card,.ptype-card,.deal)::before{display:none!important;}
}
@media print{ .dr-band,.dr-hooks{display:none!important;} }
/* deals: on phones the filter panel is taller than half the screen, so it must not stick
   over the deal cards (it hid the "View Deal" buttons while scrolling) */
@media(max-width:900px){ html[data-dr-page="deals"] .filter-bar{position:static;} }
/* partners: stat tiles now hold short phrases ("1 business day") — keep them on 1–2 lines */
html[data-dr-page="partners"] .wstat-n{font-size:clamp(1.45rem,2.3vw,1.95rem);line-height:1.12;}
html[data-dr-page="partners"] #contact>.sec-label{text-align:center;}
@media(max-width:900px){ .dr-chip-c{display:none;} }

/* ===== §8 Mobile hardening (phones & tablets) ===== */
/* iOS zooms the page when a field under 16px is focused */
@media (max-width:900px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:16px!important}
}
/* Very narrow phones (320–360px): cards with a 300px minimum were clipped */
@media (max-width:380px){
  .tools-grid,.value-grid{grid-template-columns:minmax(0,1fr)!important}
  .tool-card,.value-card{min-width:0!important;max-width:100%}
  .sort-row{flex-wrap:wrap;max-width:100%}
  .dim-bar-bg{overflow:hidden}
  .dr-band-btn,.drn-btn.dr-band-btn{max-width:100%;white-space:normal;text-align:center}
}
/* Readable small labels on phones */
@media (max-width:600px){
  .legend-title,.filter-label,.tier-bar,.carrier-name-sm,.network-chip,.score-bars-title,.ribbon,
  .tool-step-badge,.soon-badge,.drpfaq-eyebrow,.deal-fine{font-size:11.5px!important}
  .dim-lbl,.score-grade{font-size:11px!important}
  .donut-lbl{font-size:9.5px!important}
  html[data-dr-page] .l{font-size:10.5px!important}
}
/* Comfortable tap targets (Apple/Google guidance ≈44px) */
@media (max-width:900px){
  #backLink,#exitLink,.back-link,.backlink,#vInputSkip{display:inline-flex;align-items:center;min-height:44px;padding-top:6px;padding-bottom:6px}
  #vInputSkip{margin-left:auto;margin-right:auto}
  .vb-replay,#vReplay,#vbReplay,#grabReplay,#vMute{min-height:44px}
  .drn-burger{min-width:44px;min-height:44px}
}
/* Plan comparison: a 127px sticky tab bar ate too much of a small screen */
@media (max-width:480px){
  .tool-tabs{position:static!important}
}
@media (max-width:380px){
  .partner-types{grid-template-columns:minmax(0,1fr)!important}
  .ptype-card{min-width:0!important;max-width:100%}
  html[data-dr-page] [style*="min-width:280px"]{min-width:0!important}
}
@media (max-width:900px){
  .sort-btn{min-height:40px}
  .honest,.aff-note,.affiliate-note{font-size:12.5px!important}
}
/* Checkout: leave room so the floating voice bar never sits on the Pay button */
@media (max-width:900px){
  html[data-dr-page="checkout"] body,html[data-dr-page="checkout-test"] body{padding-bottom:96px}
}