/* =====================================================================
   Marvans "like dialedweb", LIGHT version (Oct 31, 2026).
   Sir: "make marvans like dialedweb also and use our colors, but the carousel and the duo keep same,
   the coloring and the effect like the web" + "keep a WHITE background, not dark".
   So: the page stays white / #f5f5f7 with dark text, Apple-blue links and burgundy #800020. What changes is the FEEL:
   - frosted white glass cards (white gradient fill, bright inner top line + soft inner glow, soft long shadow)
   - a thin shiny glass EDGE on every card: a pseudo-element with padding + mask-composite exclude
     (silver on white cards, faint white on the few dark cards; the repair cards already used this)
   - soft burgundy light behind the hero, the duo and on card hover
   - calm buttons: burgundy pill with a soft glow; outline pills become frosted glass pills
   - no 3D: the extruded headings, thick slab edges and pressable button edges from css/depth.css are switched off
   Layout, sizes, text, photos, the hero carousel, the duo, the scroll movie and all page logic are unchanged.
   Tokens: :root in css/style.css. Loaded in <head> after depth.css on every public page (not staff: builder/build.py).
   Every selector starts with "html" so it beats the page css files that load later with the same weight.
   To undo: delete the dialed.css line in builder/layout.html and rebuild.
   ===================================================================== */

/* ---------- 0. which boxes are glass cards ---------- */
html :is(.stx-card,.hwhy-card,.hhow-card,.hvisit-card,.acx-card,.acx-icard,.cox-card,.cox-box,.cox-preview,.abv-facts li,.abv-dark,
  .bk-step,.bk-sum-box,.bk-done,.stx-half,.acx-media,.st-strip,.st-steps li,#st-latest .st-prod,#pgrid .st-more-card){position:relative}

/* light cards: frosted white glass */
html :is(.stx-card,#st-latest .st-prod,#pgrid .st-more-card,.acx-card,.acx-icard,.cox-card,.cox-box,.cox-preview,.abv-facts li,
  .bk-step,.bk-sum-box,.bk-done,.st-strip,.st-steps li,.stx-half){
  background:var(--glass-fill);box-shadow:var(--glass-shadow)}
@media (hover:hover){
  html :is(.stx-card,#st-latest .st-prod,#pgrid .st-more-card,.acx-card,.acx-icard,.cox-card,.stx-half,.st-steps li):hover{box-shadow:var(--glass-shadow-h)}
}
/* the shiny edge (silver), brighter top-left, like light catching glass */
html :is(.stx-card,#st-latest .st-prod,.acx-card,.acx-icard,.cox-card,.cox-box,.cox-preview,.abv-facts li,
  .bk-step,.bk-sum-box,.bk-done,.st-strip,.st-steps li,.stx-half)::after,
html #pgrid .st-more-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:2;opacity:.9;
  background:var(--glass-edge);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  transition:opacity .3s ease}
@media (hover:hover){
  html :is(.stx-card,#st-latest .st-prod,.acx-card,.acx-icard,.cox-card,.stx-half,.st-steps li):hover::after,html #pgrid .st-more-card:hover::after{background:var(--glass-edge-hot);opacity:1}
}

/* dark cards that were already dark (why / how / visit / store "how" / about "dark" / accessories media):
   stay dark, now with dialedweb's glass: inner white glow + a faint white glass edge */
html :is(.hwhy-card,.hhow-card,.hvisit-card--dark,.sbv-how .stx-half,.abv-dark,.acx-media){
  box-shadow:inset 0 0 72px rgba(255,255,255,.05),0 24px 50px -26px rgba(0,0,0,.55)}
html :is(.hwhy-card,.hhow-card,.hvisit-card--dark,.sbv-how .stx-half,.abv-dark,.acx-media)::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:2;opacity:1;
  background:var(--glass-edge-dark);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
@media (hover:hover){
  html :is(.hwhy-card,.hhow-card,.sbv-how .stx-half-link):hover{box-shadow:inset 0 0 72px rgba(255,255,255,.07),0 30px 60px -28px rgba(128,0,32,.6)}
  
}

/* ---------- 1. no 3D (css/depth.css) ---------- */
html :is(.x3d-dark,.x3d-light),html :is(.x3d-dark,.x3d-light).x3d-s,html :is(.x3d-dark,.x3d-light) .x3d-soft{text-shadow:none}
html :is(.x3d-dark,.x3d-light) .x3d-grad,html .x3d-metal{filter:none}
html :is(.hpm-eyebrow,.hvisit-eyebrow,.cox-eyebrow){text-shadow:none}
html .mfx .mfx-a,html .mfx .mfx-a.x3d-dark,html .mfx .mfx-a *{text-shadow:none!important}
/* thick slab edges -> the glass shadow (light cards) / dark glass (dark cards) */
html .mv-slab.mv-slab{--slab-e:0 0 0 0 transparent;--slab-in:0 0 0 0 transparent;--slab:var(--glass-shadow);--slab-h:var(--glass-shadow-h)}
html .mv-slab.mv-slab.mv-slab-d{--slab:inset 0 0 72px rgba(255,255,255,.05),0 24px 50px -26px rgba(0,0,0,.55);
  --slab-h:inset 0 0 72px rgba(255,255,255,.07),0 30px 60px -28px rgba(128,0,32,.6)}
/* buttons: no 3D press edge */
html .mv-press.mv-press{--ed:0px;--hl:0;--edge:transparent;--glow:transparent}
html .mv-press.mv-press:is(#mv,.mv-press){translate:none}

/* ---------- 2. buttons: a soft burgundy glow ---------- */
html :is(.pill:not(.pill-line),.hgrid-pill:not(.hgrid-pill-2),.hpm-pill,.bk-btn,.cox-pill,.ln-btn,#pgrid .st-add:not(.added),#st-latest .st-add:not(.added)){
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 22px -10px rgba(128,0,32,.65)}
@media (hover:hover){
  html :is(.pill:not(.pill-line),.hgrid-pill:not(.hgrid-pill-2),.hpm-pill,.bk-btn,.cox-pill,.ln-btn):hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 12px 30px -10px rgba(128,0,32,.8)}
}
/* outline pills on light: frosted glass pill, burgundy words */
html :is(.mfx,.duo-tile,.hpm,.stx,.acx,.cox,.bk) :is(.pill-line,.bk-btn-line),html .hgrid-light .hgrid-pill-2{
  background-color:rgba(255,255,255,.8);
  box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(0,0,0,.05),0 8px 20px -12px rgba(0,0,0,.25)}
/* outline pills on dark tiles: frosted dark glass */
html :is(.tile.dark,.hgrid-dark,.hvisit-card--dark) :is(.pill-line,.hgrid-pill-2,.hvisit-pill-line){
  background-color:rgba(255,255,255,.06);box-shadow:inset 0 0 14px rgba(255,255,255,.1)}

/* ---------- 3. bars: frosted glass ---------- */
html .localnav{background:rgba(255,255,255,.72);border-bottom-color:rgba(0,0,0,.08);box-shadow:0 8px 24px -18px rgba(0,0,0,.25)}
html .dock{background:rgba(255,255,255,.72);border-color:rgba(255,255,255,.9);
  box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(0,0,0,.06),0 12px 34px -8px rgba(0,0,0,.22)}
html .bag{background:rgba(255,255,255,.86);box-shadow:inset 1px 0 0 #fff,-20px 0 60px rgba(0,0,0,.14)}

/* ---------- 4. HOME ---------- */
/* hero carousel: same slides and motion; a soft burgundy light behind the stage (the page stays white) */
html .mfx{background:radial-gradient(52% 40% at 50% 60%,rgba(128,0,32,.07),rgba(128,0,32,0) 70%),#fff}
html .mfx-pad{box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
html .mfx-card{box-shadow:inset 0 1px 0 #fff,0 18px 40px rgba(0,0,0,.12),0 2px 6px rgba(0,0,0,.06)}
/* duo: same drawing and motion; a soft burgundy floor light under the phone */
html .duo-tile{background:radial-gradient(50% 36% at 50% 88%,rgba(128,0,32,.08),rgba(128,0,32,0) 70%),#F6F5F8}
/* repair tiles (they already have the silver glass rim): a glass sheen + soft shadow */
html .hgrid-light{background-image:linear-gradient(160deg,rgba(255,255,255,.75),rgba(255,255,255,0) 55%)}
html .hgrid-tile{box-shadow:0 18px 40px -26px rgba(0,0,0,.3)}
html .hgrid-dark{box-shadow:inset 0 0 72px rgba(255,255,255,.05),0 18px 40px -26px rgba(0,0,0,.4)}
/* round arrow buttons */
html :is(.hpm-pad,.hwhy-paddle,.stx-paddle,.acx-paddle,.st-arrow){box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 4px 12px -6px rgba(0,0,0,.25)}
/* why / how sit on white: a faint burgundy light behind the cards */
html .hwhy{background:radial-gradient(60% 50% at 30% 60%,rgba(128,0,32,.045),rgba(128,0,32,0) 70%),#fff}
html .hhow{background:radial-gradient(60% 50% at 70% 60%,rgba(128,0,32,.045),rgba(128,0,32,0) 70%),#fff}

/* ---------- 5. STORE + BOOK A REPAIR (.stx) ---------- */
html .stx{--stx-shadow:var(--glass-shadow);--stx-shadow-h:var(--glass-shadow-h)}
html #st-latest .st-pimg,html #pgrid .st-pimg{border-radius:16px}
html :is(#stx-dev,#st-types) .st-chip[aria-pressed=false]{box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 0 0 1px rgba(0,0,0,.06)}
html .stx-select select,html .stx-other input,html .stx-search input{box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(0,0,0,.04)}

/* ---------- 6. BOOK ---------- */
html .bk-dev:not(:has(input:checked)),html .bk-chip input:not(:checked) + span{background:linear-gradient(180deg,#fff,rgba(255,255,255,.75));box-shadow:inset 0 1px 0 #fff}
html .bk-dev:has(input:checked),html .bk-chip input:checked + span{box-shadow:0 0 0 1px var(--mag),0 8px 22px -12px rgba(128,0,32,.55)}
html .bk-bar{background:rgba(255,255,255,.78);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}

/* ---------- 7. ABOUT / CONTACT / ACCESSORIES ---------- */
html .abv-social a{box-shadow:inset 0 1px 0 #fff,0 4px 12px -6px rgba(0,0,0,.2)}
html .cox-tile span,html .cox-input{box-shadow:inset 0 1px 0 #fff}

@media (prefers-reduced-transparency:reduce){html .localnav,html .dock,html .bag,html .bk-bar{background:rgba(255,255,255,.98);-webkit-backdrop-filter:none;backdrop-filter:none}}
/* the store's "difference" cards sit on a black band: solid white under the glass so they don't turn grey */