/* ============================================================================
   Avancé Vein Care — R61 "Goldengate Liquid Glass"
   ----------------------------------------------------------------------------
   Layer order: styles → premium-r56 → liquid-glass-r57 → golden-gate-r58 → THIS
   Scope: everything is gated on body.avc-gg so R57 light mode is untouched.

   Architecture (mirrors the iOS 27 Goldengate directive, translated to a
   static site with no framework):
     Layer 0  Ambient WebGL fog canvas   (#lg-ambient, fixed, z:-1)  ← JS
     Layer 0b CSS gradient fallback      (body::before, z:-2)
     Layer 1  Page sections              (translucent slabs, NO backdrop-filter)
     Layer 2  Liquid glass cards         (.lg-card: blur+saturate, chromatic edge,
                                          spring hover, ink text highlight)
     Layer 3  Chrome                     (#site-header, mobile bar, menus: blur)

   Specificity note: R58 uses :is() lists that resolve to (0,3,1); card rules
   here are written as .lg-card.lg-card to sit above them without !important.

   Performance guardrails
     • backdrop-filter only on modular cards + chrome, never on section wrappers
       (an animated backdrop behind a full-width blurred slab re-blurs every
       frame; that is the single biggest thermal cost on ProMotion laptops).
     • will-change is applied by JS on pointerenter and removed on leave, so we
       never hold 40 compositor layers resident.
     • Hover scale uses the independent `scale` property so it cannot fight the
       reveal system's `transform`.
   ========================================================================== */

/* ---------- Phase 1 · Tokens ------------------------------------------------ */
body.avc-gg{
  /* Liquid Glass core */
  --lg-glass-base:rgba(255,255,255,.04);
  --lg-glass-specular:rgba(255,240,220,.65);
  --lg-glass-shadow:rgba(18,12,8,.35);
  /* Goldengate palette */
  --gg-amber-core:#ff5e00;
  --gg-gold-reflection:#ffd073;
  --gg-twilight-depth:#0e0b16;
  --gg-strait-navy:#0b1f3a;           /* brand navy */
  --gg-fog-navy:#1a3a6e;              /* lit navy fog mid-tone (brand navy + light) */
  --gg-fog-violet:#3a2470;            /* twilight violet pooling low-left */
  --gg-violet-edge:#8b7cff;
  /* Material constants */
  --lg-blur:32px;
  --lg-blur-chrome:24px;
  --lg-saturate:165%;   /* directive says 220%; over a live amber/navy fog that reads garish on a clinical site */
  --lg-contrast:105%;
  --lg-radius-xl:36px;
  --lg-radius-md:20px;
  --lg-scale:1.02;
  --lg-spring:linear(0 0%,.0969,.2982,.5143,.7,.8394,.9329,.9886,1.0169,1.0274,1.0276,1.0229,1.0168,1.011,1.0064,1.0031,1.001,.9998,.9993,.9992,.9993,.9994,.9996,.9998,1 100%);
  --lg-spring-ms:600ms;
  --lg-shadow-liquid:0 30px 60px -12px var(--lg-glass-shadow),inset 0 1px 1px 0 rgba(255,255,255,.6),inset 0 -1px 2px 0 rgba(255,140,0,.2);
  --lg-shadow-liquid-sm:0 18px 40px -14px var(--lg-glass-shadow),inset 0 1px 1px 0 rgba(255,255,255,.45),inset 0 -1px 2px 0 rgba(255,140,0,.16);
  --lg-edge-gradient:linear-gradient(var(--lg-angle,135deg),var(--gg-gold-reflection) 0%,#ffffff 28%,var(--gg-amber-core) 58%,var(--gg-violet-edge) 100%);

  /* Re-point the R58 system at the new material */
  --gg-blur:blur(var(--lg-blur-chrome)) saturate(180%);
  --gg-fill:rgb(255 236 214 / calc(var(--gg-tint) * .55));
  --gg-fill-text:rgb(24 22 48 / 34%);
  --gg-fill-inner:rgb(255 255 255 / 4%);
  --gg-edge:rgb(255 244 228 / 16%);
  --gg-spec:inset 0 1px 1px rgb(255 255 255 / 55%),inset 0 -1px 2px rgb(255 140 0 / 18%);
  --gg-shadow:0 30px 60px -12px var(--lg-glass-shadow);
  --gg-shadow-sm:0 14px 30px -10px var(--lg-glass-shadow);
  --gg-radius:var(--lg-radius-md);
  --gg-radius-sm:14px;
  --gg-accent:var(--gg-gold-reflection);
  --gg-gold:var(--gg-gold-reflection);
  --avc-line-gold:rgb(255 208 115 / 45%);
  --avc-focus:var(--gg-gold-reflection);
  --p54-focus:var(--gg-gold-reflection);
}
body.avc-gg :is(.mx-hero-inner,.page-hero-inner,.tp-hero-inner,.finale-inner,.tx-shell,.faq-grid,.mx-split){--gg-radius:var(--lg-radius-xl)}

/* ---------- Layer 0 · Ambient environment ---------------------------------- */
html:has(body.avc-gg){background:var(--gg-twilight-depth,#0e0b16)}
html body.avc-gg{background:transparent;color:#f1f1f1;overflow-x:hidden}
body.avc-gg::before{
  z-index:-2;
  background:
    radial-gradient(60% 50% at 84% 6%,rgb(255 94 0 / 22%),transparent 62%),
    radial-gradient(48% 42% at 10% 88%,rgb(11 31 58 / 85%),transparent 64%),
    radial-gradient(40% 36% at 58% 56%,rgb(70 40 120 / 26%),transparent 62%),
    radial-gradient(34% 30% at 28% 26%,rgb(255 208 115 / 10%),transparent 60%),
    linear-gradient(160deg,#0e0b16 0%,#0b1f3a 42%,#1a1430 66%,#0e0b16 100%);
}
#lg-ambient{
  position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;
  z-index:-1;pointer-events:none;display:block;
  opacity:0;transition:opacity 1.2s ease;
}
#lg-ambient.is-ready{opacity:1}
html[data-glass="solid"] #lg-ambient{display:none}
html[data-glass="solid"] body.avc-gg::before{background:linear-gradient(160deg,#0e0b16,#0b1f3a 55%,#0e0b16)}

/* ---------- Phase 2 · Refraction filter host -------------------------------- */
#lg-filters{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}

/* ---------- Phase 5 · Guardrail: no backdrop-filter on section wrappers ---- */
body.avc-gg :is(.mx-hero-inner,.mx-physician .mx-split,.mx-symptoms .mx-split,.tx-shell,.mx-visit-rail,.mx-coverage .mx-ins-body,.faq-grid,.guide-inner,.finale-inner,footer .gg-footer-inner,.page-hero-inner,.tp-hero-inner,.page-prose,.page-faq,.post-grid,.avc-booking-inner,.contact-inner,.avc-booking .calendly-inline-widget,.mx-ins-head,.tx-head,.mx-visit-head,.tx-switcher){
  -webkit-backdrop-filter:none;backdrop-filter:none;
  background:
    linear-gradient(180deg,rgb(255 255 255 / 5%),rgb(255 255 255 / 0%) 18%),
    var(--gg-fill-text);
  border:1px solid var(--gg-edge);
  box-shadow:inset 0 1px 1px rgb(255 255 255 / 30%),0 40px 80px -30px rgb(0 0 0 / 60%);
}
/* Section slabs get a static chromatic hairline on the top edge only (cheap). */
body.avc-gg :is(.mx-hero-inner,.page-hero-inner,.tp-hero-inner,.finale-inner){
  background-image:
    linear-gradient(90deg,transparent 8%,rgb(255 208 115 / 40%) 30%,rgb(255 255 255 / 70%) 50%,rgb(255 94 0 / 40%) 70%,transparent 92%),
    linear-gradient(180deg,rgb(255 255 255 / 5%),rgb(255 255 255 / 0%) 18%);
  background-size:100% 1px,100% 100%;
  background-repeat:no-repeat;
  background-position:top,center;
}

/* ---------- Phase 3 · LiquidGlassCard ------------------------------------ */
body.avc-gg .lg-card.lg-card{
  isolation:isolate;   /* position is left alone: absolutely-positioned cards (hero badge) keep their placement; JS adds relative only where static */
  background:var(--lg-glass-base);
  -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-saturate)) contrast(var(--lg-contrast));
  backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-saturate)) contrast(var(--lg-contrast));
  border:1px solid rgb(255 244 228 / 12%);
  box-shadow:var(--lg-shadow-liquid-sm);
  scale:1;   /* backdrop-filter + scale already promote the layer; no transform so positioned cards keep theirs */
  transition:scale var(--lg-spring-ms) var(--lg-spring),box-shadow .45s ease,border-color .3s ease;
}
body.avc-gg .lg-card.lg-card.lg-card--lg{box-shadow:var(--lg-shadow-liquid)}
body.avc-gg .lg-card.lg-card.lg-card--wide{--lg-scale:1.008}
body.avc-gg .lg-card.lg-static{scale:1!important}
/* Chromatic dispersion border — 1px ring via mask-composite exclude. */
body.avc-gg .lg-card>.lg-edge{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  padding:1px;
  background:var(--lg-edge-gradient);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.28;transform:translateZ(0);
  transition:opacity .35s ease;
}
body.avc-gg .lg-card>.lg-edge{display:block}

/* Hover physics — only where a hover-capable pointer exists (Phase 5 · touch). */
@media (hover:hover) and (pointer:fine){
  body.avc-gg .lg-card.lg-card:not(.lg-static):hover{scale:var(--lg-scale);box-shadow:var(--lg-shadow-liquid);border-color:rgb(255 244 228 / 22%)}
  body.avc-gg .lg-card:hover>.lg-edge{opacity:.85}
  body.avc-gg .lg-card.lg-refract:hover>.lg-edge{filter:url(#liquid-refraction)}

  /* Ink highlight: the light lives in the type, not on the glass.
     Heading takes a champagne→gold ink that settles in one sweep; body copy lifts to white;
     numerals, eyebrows and icon tiles go full gold. Specificity is pinned above R58's
     `:is(main,#site-header)` colour rules (1,1,3) without !important. */
  html body.avc-gg :is(main,#site-header) .lg-card :is(h2,h3,h4,.faq-q,.tx-view-name,.credential-badge strong,.finale-title){
    transition:color .3s ease,text-shadow .45s ease;
  }
  html body.avc-gg :is(main,#site-header) .lg-card :is(p,li,dd,.faq-body-inner,.tx-view-desc){transition:color .3s ease}
  html body.avc-gg :is(main,#site-header) .lg-card:hover :is(h2,h3,h4,.faq-q,.tx-view-name,.credential-badge strong,.finale-title){
    color:transparent;
    background-image:linear-gradient(100deg,#fff6e3 0%,var(--gg-gold-reflection) 50%,#fff6e3 100%);
    background-size:200% 100%;background-repeat:no-repeat;background-position:0 0;
    -webkit-background-clip:text;background-clip:text;
    text-shadow:none;
    animation:lg-ink .9s cubic-bezier(.22,1,.36,1) both;
  }
  html body.avc-gg :is(main,#site-header) .lg-card:hover :is(p,li,dd,.faq-body-inner,.tx-view-desc){color:#ffffff}
  html body.avc-gg :is(main,#site-header) .lg-card:hover :is(.mx-eyebrow,.eyebrow,.tx-view-abbr,.faq-num,.post-cat){color:#ffe4a8}
  body.avc-gg .lg-card:hover .mx-tile-ico{box-shadow:0 0 0 5px rgb(255 208 115 / 16%),0 8px 20px -8px rgb(255 208 115 / 50%)}
  body.avc-gg .mx-visit-steps>.mx-visit-step:hover::before{background-image:linear-gradient(110deg,#fff3d6,var(--gg-gold-reflection) 60%,#fff3d6)}
  @keyframes lg-ink{from{background-position:100% 0}to{background-position:0 0}}
  html[data-motion="reduced"] body.avc-gg .lg-card:hover :is(h2,h3,h4,.faq-q,.tx-view-name){animation:none;background-position:0 0}
}
@media (hover:none){
  body.avc-gg .lg-card.lg-card{--lg-blur:20px;--lg-saturate:150%}
}

/* Cards that must not scale as a whole (interactive containers). */
body.avc-gg :is(.faq-item,.contact-form-wrap,.tx-view,.quiz-card,.avc-display-panel,.mx-hero-slot,.finale-callback).lg-card{--lg-scale:1.004}

/* ---------- Layer 3 · Chrome ---------------------------------------------- */
body.avc-gg :is(#site-header,.gg-toolbar,.mobile-cta-bar,.mob-overlay,.nav-drop-menu){
  -webkit-backdrop-filter:blur(var(--lg-blur-chrome)) saturate(160%) contrast(104%);
  backdrop-filter:blur(var(--lg-blur-chrome)) saturate(160%) contrast(104%);
  box-shadow:var(--gg-spec),0 20px 50px -20px var(--lg-glass-shadow);
}
body.avc-gg #site-header.lg-card{scale:1!important;transition:none}
body.avc-gg #site-header>.lg-edge{opacity:.35}

/* CTA: gold reflection with an amber inner lip, spring press. */
body.avc-gg :is(.btn-primary,.mobile-cta-book){
  background:linear-gradient(180deg,#ffe0a3 0%,var(--gg-gold-reflection) 48%,#f0b955 100%);
  box-shadow:inset 0 1px 1px rgb(255 255 255 / 75%),inset 0 -2px 3px rgb(255 94 0 / 28%),0 14px 30px -10px rgb(255 140 0 / 45%);
  transition:scale var(--lg-spring-ms) var(--lg-spring),box-shadow .3s ease,filter .3s ease;
}
@media (hover:hover) and (pointer:fine){
  body.avc-gg :is(.btn-primary,.mobile-cta-book):hover{scale:1.03;filter:saturate(1.05)}
}
body.avc-gg :is(.btn-primary,.mobile-cta-book):active{scale:.985}

/* Display headline: gold → white → amber gradient, static (cheap). */
body.avc-gg .mx-hero-h1 .mx-hl{
  background:linear-gradient(110deg,var(--gg-gold-reflection) 0%,#fff6e0 38%,#ffb56b 70%,var(--gg-gold-reflection) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- Phase 5 · Accessibility & fallbacks --------------------------- */
/* The chromatic edge is static (135°): nothing on the glass follows the pointer. */
@property --lg-angle{syntax:"<angle>";inherits:true;initial-value:135deg}

/* Reduced motion (OS or site toggle): no springs, no drift, no highlight fade. */
@media (prefers-reduced-motion:reduce){
  body.avc-gg .lg-card:hover{scale:1}
}
html[data-motion="reduced"] body.avc-gg .lg-card,
html[data-motion="reduced"] body.avc-gg .lg-card>.lg-edge,
html[data-motion="reduced"] body.avc-gg :is(.btn-primary,.mobile-cta-book){transition:none;animation:none}
html[data-motion="reduced"] body.avc-gg .lg-card:hover{scale:1}

/* Solid surfaces (site toggle, prefers-reduced-transparency, contrast, forced colors):
   opaque fills, no blur, no blend, no fog. */
html[data-glass="solid"] body.avc-gg .lg-card.lg-card{
  -webkit-backdrop-filter:none;backdrop-filter:none;
  background:#141a2e;border-color:rgb(255 255 255 / 22%);box-shadow:0 10px 24px rgb(0 0 0 / 35%);
}
html[data-glass="solid"] body.avc-gg .lg-card>.lg-edge{opacity:0;animation:none}
html[data-glass="solid"] body.avc-gg :is(#site-header,.gg-toolbar,.mobile-cta-bar,.mob-overlay,.nav-drop-menu){-webkit-backdrop-filter:none;backdrop-filter:none;background:#0f1424}
html[data-glass="solid"] body.avc-gg :is(.mx-hero-inner,.mx-physician .mx-split,.mx-symptoms .mx-split,.tx-shell,.mx-visit-rail,.mx-coverage .mx-ins-body,.faq-grid,.guide-inner,.finale-inner,footer .gg-footer-inner,.page-hero-inner,.tp-hero-inner,.page-prose,.page-faq,.post-grid,.avc-booking-inner,.contact-inner,.mx-ins-head,.tx-head,.mx-visit-head,.tx-switcher){background:#101527}
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){
  body.avc-gg .lg-card.lg-card{-webkit-backdrop-filter:none;backdrop-filter:none;background:#141a2e}
  body.avc-gg .lg-card>.lg-edge{opacity:0;animation:none}
}
@media (forced-colors:active){
  body.avc-gg .lg-card{border:1px solid CanvasText}
}
/* No backdrop-filter support (rare): give cards enough opacity to stay legible. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  body.avc-gg .lg-card.lg-card{background:rgb(20 26 46 / 88%)}
}
/* No `scale` property support: fall back to a transform-free hover (no jump). */
@supports not (scale:1){
  body.avc-gg .lg-card{transition:box-shadow .45s ease,border-color .3s ease}
}

/* ---------- R61.1 · "What to Expect" step cards ---------------------------
   R57 styled these as an open list (no side padding, hairline top, gold dot);
   R58 re-wrapped them as cards without restoring padding → text flush to the
   edges. Rebuilt here as a proper four-step rail. */
body.avc-gg .mx-visit-rail{padding:clamp(24px,3vw,40px)}
body.avc-gg .mx-visit-steps{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,1.6vw,24px);
  list-style:none;margin:0;padding:0;border:0;counter-reset:avc-step;align-items:stretch;
}
body.avc-gg .mx-visit-steps>.mx-visit-step{
  counter-increment:avc-step;
  display:flex;flex-direction:column;gap:0;min-width:0;
  margin:0;padding:clamp(24px,2.2vw,32px) clamp(22px,2vw,30px) clamp(26px,2.4vw,34px);
  border:1px solid rgb(255 244 228 / 12%);border-top-color:rgb(255 244 228 / 12%);
  border-radius:var(--lg-radius-md);
  background:linear-gradient(180deg,rgb(255 255 255 / 6%),rgb(255 255 255 / 0%) 30%),var(--lg-glass-base);
  box-shadow:var(--lg-shadow-liquid-sm);
}
body.avc-gg .mx-visit-step::after{content:none}                    /* R57 gold dot */
body.avc-gg .mx-visit-step::before{                                 /* numeral + rail */
  content:counter(avc-step,decimal-leading-zero);
  position:static;display:flex;align-items:center;gap:14px;
  width:auto;height:auto;margin:0 0 22px;padding:0;border:0;box-shadow:none;
  font-family:var(--font-display);font-weight:400;font-size:1.75rem;line-height:1;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
  color:transparent;
  background:linear-gradient(110deg,var(--gg-gold-reflection),#fff1cf 55%,var(--gg-gold-reflection));
  -webkit-background-clip:text;background-clip:text;
}
body.avc-gg .mx-visit-step .lg-edge{display:block}
/* Rail line: a hairline from the numeral to the card edge, drawn with a pseudo-free technique
   (border-image on a wrapper is not available), so we use a background on the heading's top margin. */
body.avc-gg .mx-visit-step h3{
  position:relative;display:block;margin:0 0 10px;padding:0;
  font-size:clamp(1.25rem,1.35vw,1.5rem);line-height:1.22;font-weight:500;letter-spacing:-.01em;
  color:#fff;background:none;text-wrap:balance;
}
body.avc-gg .mx-visit-step h3::before,body.avc-gg .mx-visit-step h3::after{content:none}
body.avc-gg .mx-visit-step p{
  margin:0;max-width:none;font-size:1rem;line-height:1.65;color:var(--gg-text-2);
  text-wrap:pretty;
}
/* Rail: one continuous hairline behind the numerals, gold fading to transparent, per card. */
body.avc-gg .mx-visit-steps>.mx-visit-step{
  background-image:
    linear-gradient(90deg,transparent 0,transparent calc(clamp(22px,2vw,30px) + 3.1rem),rgb(255 208 115 / 55%) calc(clamp(22px,2vw,30px) + 3.1rem + 1px),rgb(255 208 115 / 0%) 92%),
    linear-gradient(180deg,rgb(255 255 255 / 6%),rgb(255 255 255 / 0%) 30%);
  background-size:100% 1px,100% 100%;
  background-repeat:no-repeat;
  background-position:0 calc(clamp(24px,2.2vw,32px) + .875rem),0 0;
}
@media (hover:hover) and (pointer:fine){
  body.avc-gg .mx-visit-step:hover{transform:translateZ(0)}   /* R56 translateY hover neutralised; spring scale handles lift */
}
@media (max-width:1024px){
  body.avc-gg .mx-visit-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
}
@media (max-width:768px){
  body.avc-gg .mx-visit-steps{grid-template-columns:minmax(0,1fr);gap:14px;border-left:0;padding-left:0}
  body.avc-gg .mx-visit-steps>.mx-visit-step{padding:22px 22px 24px;border-top:1px solid rgb(255 244 228 / 12%)}
  body.avc-gg .mx-visit-step::before{font-size:1.5rem;margin-bottom:14px}
  body.avc-gg .mx-visit-step::after{content:none}
  body.avc-gg .mx-visit-steps>.mx-visit-step{background-position:0 calc(22px + .75rem),0 0}
}
html[data-glass="solid"] body.avc-gg .mx-visit-steps>.mx-visit-step{background:#141a2e}

/* ---------- R61.3 · Answer-engine quick answer (condition pages) ---------- */
body.avc-gg .qa-summary{
  margin:0 0 8px;padding:clamp(22px,2.4vw,32px) clamp(22px,2.4vw,32px) clamp(20px,2.2vw,28px);
  border:1px solid rgb(255 208 115 / 28%);border-radius:var(--lg-radius-md);
  background:
    linear-gradient(90deg,rgb(255 208 115 / 70%),rgb(255 208 115 / 0%)) 0 0/100% 2px no-repeat,
    linear-gradient(180deg,rgb(255 255 255 / 6%),rgb(255 255 255 / 0%) 40%),
    rgb(255 208 115 / 5%);
  box-shadow:inset 0 1px 1px rgb(255 255 255 / 25%),0 24px 50px -30px rgb(0 0 0 / 60%);
}
body.avc-gg .qa-summary .gg-sec-head{margin-bottom:12px}
body.avc-gg .qa-kicker{margin:0 0 6px;font:600 .8125rem/1.4 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--gg-gold-reflection)}
body.avc-gg .qa-summary h2{font-size:clamp(1.5rem,2.2vw,2rem);margin:0}
body.avc-gg .qa-lede{margin:0 0 18px;font-size:1.0625rem;line-height:1.7;color:#fff}
body.avc-gg .qa-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px;margin:0;padding:0}
body.avc-gg .qa-facts>div{padding:12px 14px;border:1px solid rgb(255 244 228 / 12%);border-radius:14px;background:rgb(255 255 255 / 3%)}
body.avc-gg .qa-facts dt{margin:0 0 4px;font:600 .95rem/1.35 var(--font-body);color:var(--gg-gold-reflection)}
body.avc-gg .qa-facts dd{margin:0;font-size:.95rem;line-height:1.55;color:var(--gg-text-2)}
@media (max-width:640px){body.avc-gg .qa-facts{grid-template-columns:1fr}}
html[data-glass="solid"] body.avc-gg .qa-summary{background:#141a2e}