/* Liquid glass theme, shared by every page: the home page, /att, /directv, /vivint, /faq,
   the advisor pages (/ec, /tristan, ...) and /careers.

   Each page links this file LAST, after its own styles, so it changes the material and
   leaves each page's layout alone: a soft colour wash behind the page, translucent cards
   with lit top edges, a floating glass header, glass buttons, and navy panels inset from
   the window edge with rounded corners. Rules the company pages need to override sit in
   home.css with a more specific selector (for example .site-header.nav-header). */
:root{
  --canvas:#EEF2F8;
  --glass:rgba(255,255,255,.6);
  --glass-strong:rgba(255,255,255,.78);
  --glass-fill:linear-gradient(180deg,rgba(255,255,255,.82) 0%,rgba(255,255,255,.58) 100%);
  --glass-edge:rgba(255,255,255,.85);
  --glass-blur:blur(22px) saturate(180%);
  --glass-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.35),
                 0 1px 2px rgba(11,27,51,.05),0 16px 36px -16px rgba(11,27,51,.24);
  --panel:radial-gradient(120% 160% at 0% 0%,#1B3A6B 0%,#0B1B33 58%);
  --panel-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 30px 60px -32px rgba(11,27,51,.6);
  --panel-inset:12px;
  --panel-radius:32px;
}

/* canvas: the colour the glass picks up. Fixed, so it doesn't scroll with the page. */
body{background:var(--canvas)}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(42vmax 42vmax at 4% 6%,rgba(76,127,224,.28),transparent 70%),
    radial-gradient(38vmax 38vmax at 100% 24%,rgba(14,143,201,.2),transparent 70%),
    radial-gradient(44vmax 44vmax at 20% 100%,rgba(52,199,155,.13),transparent 70%),
    radial-gradient(40vmax 40vmax at 92% 94%,rgba(124,108,240,.13),transparent 70%)}

/* header: a floating glass capsule */
.site-header{background:transparent;border-bottom:0;padding:10px 12px 0}
.site-header .wrap{height:72px;padding-left:26px;padding-right:26px;border-radius:999px;
  background:var(--glass-strong);border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.site-header img{height:40px}

/* buttons */
.btn-primary{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(4,20,60,.2),0 10px 22px -10px rgba(10,79,214,.7)}
.btn-secondary{background:var(--glass);border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.btn-secondary:hover{background:var(--glass-strong);border-color:#fff}
.btn-light{background:rgba(255,255,255,.94);box-shadow:inset 0 1px 0 #fff,0 12px 26px -12px rgba(0,0,0,.6)}
.btn-ghost{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.24);box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.btn-ghost:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.42)}

/* light glass cards */
.card,.service,.offer,.speed,.faq details,.guide-list a,.table-scroll,.track,.tool,.apply-card,.steps.light li{
  background:var(--glass-fill);border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow)}
.card,.service,.offer,.track,.tool,.apply-card{border-radius:26px}
.speed,.table-scroll,.steps li{border-radius:22px}
.faq details,.guide-list a{border-radius:20px}
/* cards that sit over navy need more white to stay readable, and blur what's under them */
.hero .offer,.track{background:rgba(255,255,255,.92);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.chip{background:rgba(255,255,255,.7);border-color:var(--glass-edge)}
/* some provider logos carry a white box; multiply drops it into the tinted canvas */
.logos img{mix-blend-mode:multiply}

/* sections that used to be pale grey bands let the canvas through */
.surface,.values,.pay,.apply{background:transparent;border-top-color:transparent;border-bottom-color:transparent}

/* navy panels, inset from the window edge */
.section.dark,.site-footer{margin-left:var(--panel-inset);margin-right:var(--panel-inset);
  border-radius:var(--panel-radius);background:var(--panel);box-shadow:var(--panel-shadow)}
.site-footer{margin-bottom:var(--panel-inset)}
/* dark glass: cards and tiles that sit on a navy panel */
.steps li,.need-item{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.need-item{border-radius:22px}
.pay-item{background:var(--panel);border-radius:26px;box-shadow:var(--panel-shadow),0 18px 40px -20px rgba(11,27,51,.5)}

/* form fields (careers) */
.field input,.opt{background:rgba(255,255,255,.78)}
.field input{border-radius:14px}
.opt{border-radius:16px}
.opt:has(input:checked){background:rgba(233,240,253,.9)}

/* phone-only sticky bar (careers) */
.apply-bar{background:var(--glass-strong);border-top:1px solid var(--glass-edge);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}

@media (max-width:767px){
  :root{--panel-inset:8px;--panel-radius:26px}
  .site-header{padding:8px 8px 0}
  .site-header .wrap{height:auto;min-height:60px;padding:8px 18px 8px 16px;border-radius:24px}
  .site-header img{height:34px}
  .card,.service,.offer,.track,.tool,.apply-card{border-radius:22px}
  /* swipe rows: room below the cards so their soft shadows aren't clipped */
  .service-grid,.tools-list{padding-bottom:22px}
  /* content inside an inset panel keeps clear of its rounded corners */
  .section.dark .wrap,.site-footer .wrap{padding-left:22px;padding-right:22px}
}

/* people who ask for less transparency get solid surfaces */
@media (prefers-reduced-transparency:reduce){
  body::before{display:none}
  .site-header .wrap,.btn-secondary,.card,.service,.offer,.speed,.faq details,.guide-list a,.table-scroll,
  .track,.tool,.apply-card,.steps.light li,.apply-bar{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
}