/* ==========================================================================
   SITE-SUBPAGE-UNIFY.css — v3 (2026-05-13)
   Makes every sub-page look + feel like the HOMEPAGE (cream / ink / ember
   palette). Previous v2 made subpages dark-teal + peach-glass; v3 flips
   to cream + ink + ember so the entire site reads as one continuous
   editorial surface.

   Structural rules preserved (mega-pill, hero, cards, sticky CTAs, mobile
   layout, footer). Only colors and surface treatments changed.
   ========================================================================== */

/* ----- Tokens — match homepage exactly ----- */
:root{
  --udsf-cream:#FBFAF5;       /* page background (same as --ab2-cream on home) */
  --udsf-ink:#1A1A1A;         /* primary text + dark sections */
  --udsf-ink-2:#3A3A3A;       /* secondary body text */
  --udsf-ember:#FF5C39;       /* primary CTA orange/coral */
  --udsf-ember-text:#D54822;  /* ember when used as text on light */
  --udsf-peach:#FFCBB8;       /* peach accent (italic on dark, fill on cream eyebrows) */
  --udsf-soft-peach:#FFE4D9;  /* soft section background */
  --udsf-line:#EAE5DA;        /* hairlines, borders */
}

/* ----- 1. Page body — cream, ink text ----- */
html body.has-udsf-ambient{
  background:#FBFAF5 !important;
  color:#1A1A1A;
}
html body.has-udsf-ambient::before{
  content:"";
  position:fixed; inset:0;
  background:linear-gradient(180deg, #FBFAF5 0%, #FBFAF5 100%);
  z-index:-3;
  pointer-events:none;
}

/* ----- 2. Bgc-video — hide on subpages (homepage doesn't use it under
   content; it's only the hero video). The previous v2 used it as an
   ambient overlay on dark teal — irrelevant on cream. ----- */
html body > .ab2-bgc-video,
html body main > .ab2-bgc-video{
  display:none !important;
}

/* ----- 3. Ambient blobs — soft peach + cream wash. Painted BEHIND content
   (z-index:-2) so the layer adds warmth to the cream page without obscuring
   it. Original v2 sat at z-index:1 but content was inside a mega-pill at
   z-index:2; on cream there's no mega-pill stacking context isolating
   content, so the ambient must go behind. ----- */
html body .ud-ambient-layer{
  position:fixed !important;
  top:0 !important; left:0 !important; right:0 !important; bottom:0 !important;
  width:100vw !important; height:100vh !important;
  z-index:-2 !important;
  pointer-events:none !important;
  opacity:.55;
  background:
    radial-gradient(45vmin 45vmin at 12% 4%,  rgba(255,228,217,.55) 0%, transparent 65%),
    radial-gradient(55vmin 55vmin at 86% 9%,  rgba(255,203,184,.45) 0%, transparent 65%),
    radial-gradient(60vmin 60vmin at 78% 36%, rgba(255,228,217,.50) 0%, transparent 65%),
    radial-gradient(45vmin 45vmin at 22% 56%, rgba(255,203,184,.40) 0%, transparent 60%),
    radial-gradient(45vmin 45vmin at 15% 84%, rgba(255,228,217,.45) 0%, transparent 65%);
}

/* ----- 4. Mega-pill — soft cream card, hairline border, subtle shadow.
   No backdrop-filter glass since the page is already cream — glass over
   cream looks muddy. ----- */
html body .ab2-mega-pill,
html body .udsf-mega-pill-wrap{
  position:relative !important;
  z-index:2 !important;
  max-width:1280px !important;
  width:calc(100% - 40px) !important;
  margin:30px auto 0 !important;
  padding:48px 0 60px !important;
  background:#FBFAF5 !important;
  border:1px solid #EAE5DA !important;
  border-bottom:0 !important;
  border-radius:48px 48px 0 0 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:0 -10px 40px rgba(26,26,26,.04) !important;
  overflow:visible !important;
}

/* ----- 5. Sections inside the pill — transparent so cream shows through ----- */
html body .ab2-mega-pill > section,
html body .ab2-mega-pill > div > section,
html body .ab2-mega-pill > main,
html body .ab2-mega-pill > main > section,
html body .udsf-mega-pill-wrap > section,
html body .udsf-mega-pill-wrap > div > section,
html body .udsf-mega-pill-wrap > main,
html body .udsf-mega-pill-wrap > main > section{
  position:relative;
  z-index:1;
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  isolation:auto !important;
}

/* Inline-styled cream/peach sections stay transparent (pill is already cream) */
html body .ab2-mega-pill section[style*="background:var(--ab2-cream)"],
html body .ab2-mega-pill section[style*="background: var(--ab2-cream)"],
html body .ab2-mega-pill section[style*="--ab2-cream"],
html body .ab2-mega-pill section[style*="background:var(--shell)"],
html body .ab2-mega-pill section[style*="background: var(--shell)"],
html body .ab2-mega-pill section[style*="--shell"],
html body .ab2-mega-pill section[style*="background:var(--ab2-soft-peach)"],
html body .ab2-mega-pill section[style*="--ab2-soft-peach"],
html body .udsf-mega-pill-wrap section[style*="--ab2-cream"],
html body .udsf-mega-pill-wrap section[style*="--shell"],
html body .udsf-mega-pill-wrap section[style*="--ab2-soft-peach"]{
  background:transparent !important;
}

/* Headings — ink, like the homepage */
html body .ab2-mega-pill h1,
html body .ab2-mega-pill h2,
html body .ab2-mega-pill .head h1,
html body .ab2-mega-pill .head h2,
html body .udsf-mega-pill-wrap h1,
html body .udsf-mega-pill-wrap h2{
  color:#1A1A1A !important;
}
html body .ab2-mega-pill h1 em,
html body .ab2-mega-pill h2 em,
html body .udsf-mega-pill-wrap h1 em,
html body .udsf-mega-pill-wrap h2 em{
  color:#FF5C39 !important;
}
html body .ab2-mega-pill h3:not(.feature-card h3):not(.ab2-acc-h3):not(.afd-card h3):not(.ab2-st-h3):not(.ab-eight-h3),
html body .udsf-mega-pill-wrap h3:not(.feature-card h3):not(.ab2-acc-h3):not(.afd-card h3):not(.ab2-st-h3):not(.ab-eight-h3){
  color:#1A1A1A !important;
}
html body .ab2-mega-pill > section .eyebrow,
html body .ab2-mega-pill > section > .wrap .eyebrow,
html body .udsf-mega-pill-wrap > section .eyebrow,
html body .udsf-mega-pill-wrap > section > .wrap .eyebrow{
  color:#D54822 !important;
}

/* Body text — ink/secondary, no longer peach */
html body .ab2-mega-pill > section > .wrap > p,
html body .ab2-mega-pill > section > .wrap > div > p,
html body .ab2-mega-pill > section > .wrap > .two-col > div > p,
html body .ab2-mega-pill > section > .wrap > div > ul,
html body .ab2-mega-pill > section > .wrap > div > ul li,
html body .udsf-mega-pill-wrap > section > .wrap > p,
html body .udsf-mega-pill-wrap > section > .wrap > div > p,
html body .udsf-mega-pill-wrap > section > .wrap > .two-col > div > p,
html body .udsf-mega-pill-wrap > section > .wrap > div > ul,
html body .udsf-mega-pill-wrap > section > .wrap > div > ul li{
  color:#3A3A3A !important;
}

/* ----- 6. Feature / step / info / price / plan cards — soft surface
   cards on cream. NOT glass-on-dark anymore. ----- */
html body .ab2-mega-pill .feature-card,
html body .ab2-mega-pill .step-card,
html body .ab2-mega-pill .info-card,
html body .ab2-mega-pill .price-card,
html body .ab2-mega-pill .plan-card,
html body .udsf-mega-pill-wrap .feature-card,
html body .udsf-mega-pill-wrap .step-card,
html body .udsf-mega-pill-wrap .info-card,
html body .udsf-mega-pill-wrap .price-card,
html body .udsf-mega-pill-wrap .plan-card{
  background:#FFFFFF !important;
  border:1px solid #EAE5DA !important;
  border-radius:24px !important;
  padding:32px 28px !important;
  box-shadow:0 6px 22px rgba(26,26,26,.04) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  color:#1A1A1A !important;
}
html body .ab2-mega-pill .feature-card h3,
html body .ab2-mega-pill .step-card h3,
html body .ab2-mega-pill .info-card h3,
html body .ab2-mega-pill .price-card h3,
html body .ab2-mega-pill .plan-card h3,
html body .udsf-mega-pill-wrap .feature-card h3,
html body .udsf-mega-pill-wrap .step-card h3,
html body .udsf-mega-pill-wrap .info-card h3{
  color:#1A1A1A !important;
}
html body .ab2-mega-pill .feature-card .feature-num,
html body .udsf-mega-pill-wrap .feature-card .feature-num{
  color:#FF5C39 !important;
}
html body .ab2-mega-pill .feature-card p,
html body .ab2-mega-pill .step-card p,
html body .ab2-mega-pill .info-card p,
html body .udsf-mega-pill-wrap .feature-card p,
html body .udsf-mega-pill-wrap .step-card p{
  color:#3A3A3A !important;
}

/* Two-col content — ink everywhere */
html body .ab2-mega-pill .two-col h1,
html body .ab2-mega-pill .two-col h2,
html body .ab2-mega-pill .two-col h3,
html body .udsf-mega-pill-wrap .two-col h1,
html body .udsf-mega-pill-wrap .two-col h2,
html body .udsf-mega-pill-wrap .two-col h3{
  color:#1A1A1A !important;
}
html body .ab2-mega-pill .two-col p,
html body .ab2-mega-pill .two-col li,
html body .udsf-mega-pill-wrap .two-col p,
html body .udsf-mega-pill-wrap .two-col li{
  color:#3A3A3A !important;
}

/* Lead paragraphs */
html body .ab2-mega-pill .lead,
html body .ab2-mega-pill .rich-bullets li,
html body .udsf-mega-pill-wrap .lead,
html body .udsf-mega-pill-wrap .rich-bullets li{
  color:#3A3A3A !important;
}
html body .ab2-mega-pill .rich-bullets li strong,
html body .udsf-mega-pill-wrap .rich-bullets li strong{
  color:#1A1A1A !important;
}

/* ----- 7. Hide "Ready when you are" peach CTA section everywhere ----- */
html body section.cta-band,
html body section.ud-ready-cta,
html body section.ready-when-you-are,
html body section[aria-label="Ready when you are"]{
  display:none !important;
}

/* ----- 8. Hide V3 floating hamburger ----- */
html body .v3-hamburger-fixed,
html body .v3-hamburger-fixed *{
  display:none !important;
}
@media (max-width:900px){
  html body .v3-hamburger-fixed{display:none !important;}
}

/* ----- 8b. Promo ticker — match homepage exactly (no orange pill) ----- */
html body .promo-ticker .promo-ticker-cta,
html body .promo-ticker a.promo-ticker-cta{
  display:none !important;
}
html body main#main-content .promo-ticker .promo-ticker-track,
html body .promo-ticker .promo-ticker-track,
html body main#main-content .promo-ticker .promo-ticker-item,
html body .promo-ticker .promo-ticker-item,
html body main#main-content .promo-ticker-status,
html body .promo-ticker-status{
  text-transform:uppercase !important;
  letter-spacing:.1em !important;
  font-family:'Unbounded', sans-serif !important;
  font-weight:600 !important;
}
html body .promo-ticker-status em,
html body .promo-ticker-status em#open-status{
  font-family:'Unbounded', sans-serif !important;
  font-weight:900 !important;
  font-size:12px !important;
}

/* On mobile: fixed promo + glass-cream header (matches home v3 mobile) */
@media (max-width:760px){
  html body .promo-ticker{
    position:fixed !important;
    top:0 !important; left:0 !important; right:0 !important;
    z-index:60 !important;
    min-height:42px !important;
    background:#1A1A1A !important;
    border-bottom:1px solid #EAE5DA !important;
  }
  html body .promo-ticker .promo-ticker-status,
  html body .promo-ticker .promo-ticker-window,
  html body .promo-ticker .promo-ticker-track,
  html body .promo-ticker .promo-ticker-item{
    background:transparent !important;
    background-color:transparent !important;
    background-image:none !important;
    color:#FFE4D9 !important;
  }
  /* Header glass wrapper: fixed pill, cream-translucent, sits below promo */
  html body .ab2-header-glass-wrapper{
    background:transparent !important;
    padding:14px 20px !important;
    position:fixed !important;
    top:62px !important; left:0 !important; right:0 !important;
    z-index:50 !important;
    pointer-events:none;
    will-change:transform;
  }
  html body .ab2-header-glass{
    pointer-events:auto;
    max-width:1280px;
    margin:0 auto;
    padding:16px 0 0 !important;
    background:transparent !important;
    border:1px solid #EAE5DA !important;
    border-radius:36px !important;
    box-shadow:0 18px 48px rgba(26,26,26,.10),
               inset 0 1px 0 rgba(255,255,255,.85) !important;
    overflow:visible !important;
    position:relative !important;
    isolation:isolate !important;
  }
  html body .ab2-header-glass::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    border-radius:inherit !important;
    background:rgba(251,250,245,.90) !important;
    backdrop-filter:blur(20px) saturate(1.6) !important;
    -webkit-backdrop-filter:blur(20px) saturate(1.6) !important;
    z-index:-1 !important;
    pointer-events:none !important;
  }
  html body .ab2-header-glass nav.top{
    background:transparent !important;
    height:auto !important;
    position:static !important;
    border-bottom:0 !important;
    box-shadow:none !important;
  }
  html body header.ab2hero,
  html body header[class*="-hero"]{
    padding-top:0 !important;
  }
  html body header.ab2hero .ab2hero-content,
  html body header[class*="-hero"] .ab2hero-content{
    padding-top:200px !important;
  }
}

/* ----- 9. Mobile: hide desktop nav chrome that's leaking through ----- */
@media (max-width:900px){
  html body nav.top .nav-links{display:none !important;}
  html body nav.top .nav-cta .btn-ghost{display:none !important;}
  html body nav.top .nav-cta .btn-primary{display:none !important;}
  html body nav.top .nav-cta{display:none !important;}
  html body nav.top .row{justify-content:center !important;}
  html body nav.top{height:60px !important;}
  html body nav.top .row{height:60px !important;}
  html body nav.top .brand img{height:36px !important;}
  html body .nav-mini{display:none !important;}
}

/* ----- 10. Mobile mega-pill ----- */
@media (max-width:760px){
  html body .ab2-mega-pill,
  html body .udsf-mega-pill-wrap{
    width:calc(100% - 16px) !important;
    padding:32px 0 48px !important;
    border-radius:32px 32px 0 0 !important;
  }
  html body .ab2-mega-pill > section,
  html body .ab2-mega-pill > div > section,
  html body .ab2-mega-pill > main > section,
  html body .udsf-mega-pill-wrap > section,
  html body .udsf-mega-pill-wrap > div > section,
  html body .udsf-mega-pill-wrap > main > section{
    padding-left:20px !important;
    padding-right:20px !important;
  }
  html body .ab2-mega-pill .feature-card,
  html body .udsf-mega-pill-wrap .feature-card{
    padding:24px 20px !important;
    border-radius:20px !important;
  }
}
@media (min-width:761px){
  html body .ab2-mega-pill > section,
  html body .ab2-mega-pill > div > section,
  html body .ab2-mega-pill > main > section,
  html body .udsf-mega-pill-wrap > section,
  html body .udsf-mega-pill-wrap > div > section,
  html body .udsf-mega-pill-wrap > main > section{
    padding-left:48px !important;
    padding-right:48px !important;
  }
}

/* ----- 11. Hide duplicate Invisalign disclaimer ----- */
html body section.ud-tm-disclaimer{
  display:none !important;
}

/* ----- 12. Sticky CTA bar above everything ----- */
html body .udsf-mobile-cta-bar,
html body .ab2-sub-cta-bar{
  z-index:1000;
}

/* ----- 13. Footer area on sub-pages — ink text on cream ----- */
html body footer.udsf-footer-wrap{
  position:relative;
  z-index:3;
  background:transparent !important;
  margin-top:0 !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
}
html body footer.udsf-footer-wrap .foot-info{
  background:transparent !important;
}
html body footer.udsf-footer-wrap .foot-contact-item,
html body footer.udsf-footer-wrap .foot-contact-item span{
  color:#1A1A1A !important;
}
html body footer.udsf-footer-wrap .foot-legal-left a,
html body footer.udsf-footer-wrap .foot-legal-right{
  color:#3A3A3A !important;
}
html body footer.udsf-footer-wrap .foot-tagline{
  color:#3A3A3A !important;
}
html body footer.udsf-footer-wrap .foot-tm-disclaimer{
  color:rgba(26,26,26,.55) !important;
}
html body footer.udsf-footer-wrap a{
  color:#D54822 !important;
}
html body footer.udsf-footer-wrap a:hover{
  color:#FF5C39 !important;
}

/* ----- 14. ab2hero — full-bleed video hero matching homepage ----- */
/* Dark video-hero treatment for synthetic about/page/team heros.
   Excludes (a) heros that have their own page-specific cream design
   (.loc-hero, .udsf-article-hero), (b) the homepage hero (.ab2hero),
   (c) virtual smile + contact hero variants. */
html body header.mt-hero,
html body header.about-hero,
html body header.page-hero{
  position:relative !important;
  min-height:92vh !important;
  overflow:hidden !important;
  background:#000 !important;
  z-index:1;
}
html body header[class*="-hero"] .ab2hero-cta{
  display:flex !important;
  gap:14px !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  margin-top:24px !important;
}
html body header[class*="-hero"] .ab2hero-cta .ab2-btn-primary{
  background:#FF5C39 !important;
  color:#fff !important;
  padding:16px 30px !important;
  border-radius:999px !important;
  font-family:'Unbounded',sans-serif !important;
  font-weight:700 !important;
  font-size:14px !important;
  box-shadow:0 14px 32px rgba(255,92,57,.42) !important;
  text-decoration:none !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  border:0 !important;
}
html body header[class*="-hero"] .ab2hero-cta .ab2-btn-ghost{
  color:#fff !important;
  border:1.5px solid rgba(255,255,255,.55) !important;
  padding:15px 28px !important;
  border-radius:999px !important;
  font-family:'Albert Sans',sans-serif !important;
  font-weight:700 !important;
  font-size:14px !important;
  text-decoration:none !important;
  backdrop-filter:blur(8px) !important;
  background:transparent !important;
  display:inline-flex !important;
  align-items:center !important;
  box-sizing:border-box !important;
}
html body .ab2hero{
  position:relative;
  min-height:92vh;
  overflow:hidden;
  background:#000;
  z-index:1;
}
html body .ab2hero .ab2hero-video,
html body .ab2hero video.ab2hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.55;
}
html body .ab2hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.35) 0%, transparent 40%, rgba(0,0,0,.7) 100%);
  pointer-events:none;
}
html body .ab2hero .ab2hero-content{
  position:relative;
  z-index:2;
  padding:140px 28px 120px;
  max-width:1280px;
  margin:0 auto;
}
html body .ab2hero .ab2hero-eyebrow{
  font-family:'Josefin Sans',sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.3em;
  font-size:13px;
  color:#FFCBB8;
}
html body .ab2hero h1{
  font-family:'Unbounded',sans-serif;
  font-weight:900;
  font-size:clamp(40px,5.4vw,76px);
  line-height:1.02;
  letter-spacing:-.02em;
  color:#fff !important;
  margin:18px 0 22px;
  max-width:880px;
}
html body .ab2hero h1 em{
  font-family:'Josefin Sans',sans-serif;
  font-weight:600;
  font-style:italic;
  color:#FFCBB8 !important;
  letter-spacing:0;
}
html body .ab2hero p{
  color:rgba(255,255,255,.88) !important;
  font-size:18px;
  max-width:620px;
  margin:0 0 28px;
  font-weight:300;
  line-height:1.6;
}
html body .ab2hero .ab2hero-cta{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
}
html body .ab2hero .ab2hero-cta .ab2-btn-primary,
html body .ab2hero .ab2hero-cta .btn-primary{
  background:#FF5C39 !important;
  color:#fff !important;
  padding:16px 30px !important;
  border-radius:999px !important;
  font-family:'Unbounded',sans-serif !important;
  font-weight:700 !important;
  font-size:14px !important;
  box-shadow:0 14px 32px rgba(255,92,57,.42) !important;
  text-decoration:none !important;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:transform .15s, background .15s;
}
html body .ab2hero .ab2hero-cta .ab2-btn-primary:hover,
html body .ab2hero .ab2hero-cta .btn-primary:hover{
  transform:translateY(-2px);
  background:#FF7253 !important;
}
html body .ab2hero .ab2hero-cta .ab2-btn-ghost,
html body .ab2hero .ab2hero-cta .btn-ghost{
  color:#fff !important;
  border:1.5px solid rgba(255,255,255,.55);
  padding:15px 28px;
  border-radius:999px;
  font-family:'Albert Sans',sans-serif;
  font-weight:700;
  font-size:14px;
  text-decoration:none;
  backdrop-filter:blur(8px);
}
html body .ab2hero .ab2hero-cta .ab2-btn-ghost:hover,
html body .ab2hero .ab2hero-cta .btn-ghost:hover{
  background:#fff;
  color:#1A1A1A !important;
  border-color:#fff;
}
@media (max-width:760px){
  html body .ab2hero{ min-height:72vh; }
  html body .ab2hero .ab2hero-content{ padding:96px 18px 84px; }
  html body .ab2hero h1{ font-size:clamp(32px,8.5vw,52px); }
  html body .ab2hero p{ font-size:16px; }
}
html body section.udsf-hero-replaced{ display:none !important; }

/* ----- 15. Reduced-motion ----- */
@media (prefers-reduced-motion: reduce){
  html body .ud-ambient-layer{ animation:none !important; opacity:.55; }
}

/* ==========================================================================
   v3 article layout (cream palette, 2026-05-13 v2)
   Used by long-form pages re-written in v3 boutique editorial style. Now
   on cream/ink/ember to match the homepage exactly. Mirrors the location-
   page (loc-*) pattern.
   ========================================================================== */

html body .udsf-article{
  position:relative;
  z-index:2;
  padding:0;
}
html body .udsf-article-hero{
  padding:120px 28px 72px;
  text-align:center;
  background:radial-gradient(900px 500px at 80% 20%, rgba(255,92,57,.12), transparent 60%),
             #FBFAF5;
}
html body .udsf-article-hero-inner{ max-width:880px; margin:0 auto; }
html body .udsf-article-eyebrow{
  font-family:'Josefin Sans',sans-serif;
  font-style:italic; font-weight:600;
  color:#D54822;
  font-size:15px; letter-spacing:.18em; text-transform:uppercase;
}
html body .udsf-article-hero h1{
  font-family:'Unbounded',sans-serif; font-weight:900;
  font-size:clamp(44px, 7.5vw, 96px);
  line-height:.94; letter-spacing:-.02em;
  margin-top:18px; color:#1A1A1A;
}
html body .udsf-article-hero h1 em{
  font-family:'Josefin Sans',sans-serif; font-style:italic;
  font-weight:600; color:#FF5C39;
}
html body .udsf-article-hero .lead{
  font-size:21px; line-height:1.55; margin:28px auto 0; max-width:720px;
  color:#3A3A3A;
}
html body .udsf-article-cta{
  display:flex; gap:14px; justify-content:center; margin-top:36px; flex-wrap:wrap;
}
html body .udsf-article-cta .udsf-article-cta-primary{
  display:inline-flex; align-items:center; gap:8px;
  background:#FF5C39; color:#fff !important;
  font-family:'Unbounded',sans-serif; font-weight:700; font-size:14px; letter-spacing:.04em;
  padding:15px 26px; border-radius:999px; text-decoration:none;
  box-shadow:0 14px 32px rgba(255,92,57,.32);
  transition:transform .2s, background .2s;
}
html body .udsf-article-cta .udsf-article-cta-primary:hover{ background:#FF7253; transform:translateY(-1px); }
html body .udsf-article-cta .udsf-article-cta-ghost{
  display:inline-flex; align-items:center; gap:8px;
  color:#1A1A1A !important; border:1.5px solid #EAE5DA;
  font-family:'Albert Sans',sans-serif; font-weight:700; font-size:14px;
  padding:15px 24px; border-radius:999px; text-decoration:none;
  background:#fff;
  transition:background .2s, color .2s, border-color .2s;
}
html body .udsf-article-cta .udsf-article-cta-ghost:hover{ background:#1A1A1A; color:#fff !important; border-color:#1A1A1A; }

html body .udsf-article-sec{ padding:72px 28px; background:#FBFAF5; }
html body .udsf-article-sec.alt{ background:#FFFFFF; }
html body .udsf-article-sec-inner{ max-width:1080px; margin:0 auto; }
html body .udsf-article-sec h2{
  font-family:'Unbounded',sans-serif; font-weight:900;
  font-size:clamp(32px, 4.6vw, 60px); line-height:1.02;
  letter-spacing:-.01em; color:#1A1A1A;
}
html body .udsf-article-sec h2 em{
  font-family:'Josefin Sans',sans-serif; font-style:italic;
  font-weight:600; color:#FF5C39;
}
html body .udsf-article-sec p,
html body .udsf-article-sec li{
  font-family:'Albert Sans',sans-serif;
  font-size:17px; line-height:1.7;
  color:#3A3A3A; margin-top:18px; max-width:780px;
}
html body .udsf-article-sec p strong{ color:#1A1A1A; }
html body .udsf-article-sec p a,
html body .udsf-article-sec li a{
  color:#D54822; font-weight:700;
  border-bottom:1.5px solid rgba(213,72,34,.35); text-decoration:none;
}
html body .udsf-article-sec p a:hover,
html body .udsf-article-sec li a:hover{ color:#FF5C39; border-bottom-color:#FF5C39; }
html body .udsf-article-sec ul{ margin-top:18px; padding-left:22px; }
html body .udsf-article-sec ul li::marker{ color:#FF5C39; }

html body .udsf-article-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; margin-top:36px;
}
html body .udsf-article-card{
  background:#FFFFFF; border:1px solid #EAE5DA;
  border-radius:20px; padding:28px 24px;
  box-shadow:0 6px 22px rgba(26,26,26,.04);
}
html body .udsf-article-card .num{
  font-family:'Unbounded',sans-serif; font-weight:800;
  color:#FF5C39; font-size:12px; letter-spacing:.08em;
}
html body .udsf-article-card h3{
  font-family:'Unbounded',sans-serif; font-weight:800;
  font-size:21px; margin-top:8px; color:#1A1A1A;
}
html body .udsf-article-card p{
  margin-top:12px; font-size:15px; line-height:1.6;
  color:#3A3A3A;
}

html body .udsf-article-faq{ padding:80px 28px; background:#FBFAF5; }
html body .udsf-article-faq-inner{ max-width:880px; margin:0 auto; }
html body .udsf-article-faq h2{
  font-family:'Unbounded',sans-serif; font-weight:900;
  font-size:clamp(32px, 4.6vw, 60px); color:#1A1A1A; line-height:1.02;
}
html body .udsf-article-faq h2 em{
  font-family:'Josefin Sans',sans-serif; font-style:italic;
  font-weight:600; color:#FF5C39;
}
html body .udsf-article-faq details{
  border-top:1px solid #EAE5DA;
  padding:20px 0;
}
html body .udsf-article-faq details:last-of-type{ border-bottom:1px solid #EAE5DA; }
html body .udsf-article-faq summary{
  list-style:none; cursor:pointer;
  font-family:'Unbounded',sans-serif; font-weight:700; font-size:18px;
  color:#1A1A1A; display:flex; justify-content:space-between; gap:16px;
}
html body .udsf-article-faq summary::-webkit-details-marker{ display:none; }
html body .udsf-article-faq summary::after{
  content:"+"; color:#FF5C39; font-weight:700; font-size:22px; line-height:1;
}
html body .udsf-article-faq details[open] summary::after{ content:"–"; }
html body .udsf-article-faq details p{
  font-family:'Albert Sans',sans-serif;
  font-size:16px; line-height:1.7; margin-top:14px;
  color:#3A3A3A;
}

html body .udsf-article-final{
  background:linear-gradient(135deg, #1A1A1A 0%, #FF5C39 100%);
  color:#fff; padding:120px 28px; text-align:center;
}
html body .udsf-article-final h2{
  font-family:'Unbounded',sans-serif; font-weight:900;
  font-size:clamp(44px, 6.5vw, 88px); line-height:.96; color:#fff;
}
html body .udsf-article-final h2 em{
  font-family:'Josefin Sans',sans-serif; font-style:italic;
  font-weight:600; color:#FFE4D9;
}
html body .udsf-article-final p{
  font-size:19px; line-height:1.6; margin:22px auto 0; max-width:640px;
  color:rgba(255,255,255,.92);
}
html body .udsf-article-final a{
  display:inline-block; margin-top:34px;
  background:#fff; color:#1A1A1A !important;
  font-family:'Unbounded',sans-serif; font-weight:700; font-size:15px;
  padding:18px 36px; border-radius:999px; text-decoration:none;
  transition:transform .2s, background .2s;
}
html body .udsf-article-final a:hover{ background:#FFE4D9; transform:translateY(-1px); }

@media (max-width:760px){
  html body .udsf-article-hero{ padding:96px 22px 56px; }
  html body .udsf-article-sec{ padding:56px 22px; }
  html body .udsf-article-grid{ grid-template-columns:1fr; gap:14px; }
  html body .udsf-article-final{ padding:90px 22px; }
}

/* ==========================================================================
   Article overrides — site-subpage-unify.js auto-wraps content in
   .udsf-mega-pill-wrap and may strip the original <main>. The transparent-
   everywhere rule above kills section backgrounds inside the pill. These
   selectors target the article classes directly (with enough specificity
   + !important) to keep the article surfaces visible.
   ========================================================================== */

html body .udsf-mega-pill-wrap .udsf-article-hero,
html body .ab2-mega-pill .udsf-article-hero,
html body header.udsf-article-hero,
html body .udsf-article-hero{
  background:radial-gradient(900px 500px at 80% 20%, rgba(255,92,57,.12), transparent 60%), #FBFAF5 !important;
}
html body .udsf-mega-pill-wrap section.udsf-article-sec,
html body .ab2-mega-pill section.udsf-article-sec,
html body section.udsf-article-sec{
  background:#FBFAF5 !important;
}
html body .udsf-mega-pill-wrap section.udsf-article-sec.alt,
html body .ab2-mega-pill section.udsf-article-sec.alt,
html body section.udsf-article-sec.alt{
  background:#FFFFFF !important;
}
html body .udsf-mega-pill-wrap section.udsf-article-faq,
html body .ab2-mega-pill section.udsf-article-faq,
html body section.udsf-article-faq{
  background:#FBFAF5 !important;
}
html body .udsf-mega-pill-wrap section.udsf-article-final,
html body .ab2-mega-pill section.udsf-article-final,
html body section.udsf-article-final{
  background:linear-gradient(135deg, #1A1A1A 0%, #FF5C39 100%) !important;
  color:#fff !important;
}
/* Final CTA H2 + paragraph stay white-on-gradient */
html body .udsf-mega-pill-wrap section.udsf-article-final h2,
html body section.udsf-article-final h2{
  color:#fff !important;
}
html body .udsf-mega-pill-wrap section.udsf-article-final h2 em,
html body section.udsf-article-final h2 em{
  color:#FFE4D9 !important;
}
html body .udsf-mega-pill-wrap section.udsf-article-final p,
html body section.udsf-article-final p{
  color:rgba(255,255,255,.92) !important;
}
/* Hero H1 + lede stay ink (cream-section pill could turn them peach via cascade) */
html body .udsf-mega-pill-wrap header.udsf-article-hero h1,
html body header.udsf-article-hero h1{
  color:#1A1A1A !important;
}
html body .udsf-mega-pill-wrap header.udsf-article-hero h1 em,
html body header.udsf-article-hero h1 em{
  color:#FF5C39 !important;
}
html body .udsf-mega-pill-wrap header.udsf-article-hero .lead,
html body header.udsf-article-hero .lead{
  color:#3A3A3A !important;
}
html body .udsf-mega-pill-wrap header.udsf-article-hero .udsf-article-eyebrow,
html body header.udsf-article-hero .udsf-article-eyebrow{
  color:#D54822 !important;
}

/* ==========================================================================
   Logo color fix on cream subpages (third agent — 2026-05-13)
   Reason: §15 flipped subpages to cream, but `site.css:83-84` still applies
   `filter: brightness(0) invert(1)` to nav/footer .brand img — that filter
   was correct on the old dark-teal subpages (made the SVG WHITE), but on
   cream it makes the white-fill SVG render WHITE → invisible.
   Scoping: this file is ONLY loaded on subpages (homepage doesn't link it),
   so no body-class scoping needed. Homepage's white-on-dark-video logos are
   untouched.
   Fix: brightness(0) ONLY → solid black logo on cream.
   See CLAUDE.md §17. Coordinated with DOMy via AGENT_INBOX.md.
   ========================================================================== */
html body nav.top .brand img,
html body footer .brand img,
html body .ab2-footer-glass-wrapper .brand img,
html body nav.bottom .brand img{
  filter: brightness(0) !important;
}
/* GleamBar nav/footer logo — `gleambar_logo_white.svg` is pure white.
   Same fix: force solid black on cream subpages. */
html body nav.top .gleam-nav-logo,
html body .gleam-right .gleam-nav-logo,
html body .ab2-footer-glass-wrapper .gleam-nav-logo,
html body nav.bottom .gleam-nav-logo{
  filter: brightness(0) !important;
}
/* Drawer (mobile menu) opens over a dark scrim — keep its GleamBar/UNO logos white. */
html body .v3-drawer-gleam-top,
html body .v3-drawer .gleam-nav-logo,
html body .v3-drawer .brand img,
html body .v3-drawer img{
  filter: none !important;
}

/* ==========================================================================
   Article hero top-padding restore (third agent — 2026-05-13)
   Reason: line 331-333 above sets `header[class*="-hero"]{padding-top:0}`
   on mobile to clear the way for `.ab2hero-content { padding-top:200px }`
   (line 334-337). That works for .ab2hero pages but breaks Real Dom's
   `.udsf-article-hero` pages because their inner is `.udsf-article-hero-inner`
   (different class) — so the 200px push never fires and the H1 ends up
   behind the fixed nav pill.
   Fix: explicitly restore top-padding on `.udsf-article-hero` AND match the
   .ab2hero pattern by pushing `.udsf-article-hero-inner` down on mobile.
   See CLAUDE.md §17. AGENT_INBOX.md S-next.
   ========================================================================== */
@media (max-width:760px){
  html body header.udsf-article-hero{
    padding-top:96px !important;  /* restored from line 772 */
  }
  html body header.udsf-article-hero .udsf-article-hero-inner{
    padding-top:120px !important;  /* push the H1 below the fixed nav pill */
  }
}
@media (max-width:900px) and (min-width:761px){
  html body header.udsf-article-hero{
    padding-top:120px !important;
  }
  html body header.udsf-article-hero .udsf-article-hero-inner{
    padding-top:100px !important;
  }
}