/* =====================================================================
   PINNACLE AUDIOLOGY — VISUAL AUDIT REPAIR CONTRACT · 2026-08-05
   Centralized corrections for the 20-item desktop/mobile audit.
   No copy, medical facts, contact information, or branding is changed.
   ===================================================================== */

:root{
  --pav-orange:#F08647;
  --pav-orange-dark:#A84516;
  --pav-ink:#181511;
  --pav-copy:#4E473F;
  --pav-cream:#F8F3EA;
  --pav-line:#DED4C4;
  --pav-display:clamp(58px,7.2vw,112px);
  --pav-page-title:clamp(48px,5.8vw,88px);
  --pav-section-title:clamp(38px,4.3vw,64px);
  --pav-ease-out:cubic-bezier(.23,1,.32,1);
  --pav-ease-in-out:cubic-bezier(.77,0,.175,1);
}

html,body{max-width:100%;overflow-x:clip}
body.pa-editorial-system main,
body.pa-editorial-system main :where(section,article,div,figure,ul,ol){min-width:0}
body.pa-editorial-system main :where(img,picture,video,iframe,svg){max-width:100%}
body.pa-editorial-system main :where(p,li,a,h1,h2,h3){overflow-wrap:break-word}

/* 11 — Pinnacle orange remains the brand color; dark ink restores contrast. */
:where(.g-book,.btn.accent,.btn.primary,.hac-btn.primary,.mb-book,.mobile-bar .mb-book,
  .pinn-dock .pd-orange,.pinn-dock a[href*="schedule"],.cta .btn.accent){
  background-color:var(--pav-orange)!important;
  color:var(--pav-ink)!important;
  text-shadow:none!important;
}
:where(.g-book,.btn.accent,.btn.primary,.hac-btn.primary,.mb-book,.pinn-dock .pd-orange) :where(svg,path){
  color:currentColor!important;stroke:currentColor;
}

/* 12 — The dock is an accessibility tool, not microcopy. */
.pinn-dock{min-height:64px!important;padding:7px!important;gap:5px!important}
.pinn-dock :where(a,button){min-height:50px!important;min-width:56px!important;font-size:13px!important;line-height:1.1!important;letter-spacing:.035em!important}
body .pinn-dock .pd-btn{font-size:13px!important;line-height:1.1!important;letter-spacing:.035em!important}
body .pinn-dock .pd-btn.pd-orange{background:var(--pav-orange)!important;color:var(--pav-ink)!important}
body .pinn-dock .pd-btn.pd-orange :where(svg,.pd-ic){color:var(--pav-ink)!important;stroke:currentColor!important}
.pinn-dock :where(svg){width:21px!important;height:21px!important}

/* 13 — A stable display scale across old and new page templates. */
body.pa-editorial-system main :where(.display,.hp-h1,.hac-display,.vg-title){font-size:var(--pav-display)!important;line-height:.91!important;letter-spacing:-.018em}
body.pa-editorial-system main :where(.page-hero h1,.hero h1,.mfr-hero h1):not(.display):not(.hp-h1):not(.hac-display){font-size:var(--pav-page-title)!important;line-height:.95!important}
body.pa-editorial-system main :where(.h2,.hac-h2,.section-head h2){font-size:var(--pav-section-title);line-height:1}

/* 1–2 — Hearing protection products preserve their real proportions. */
body[data-pa-route="/protection"] .hp-stage{contain:layout paint;overflow:hidden}
body[data-pa-route="/protection"] .hp-float,
body[data-pa-route="/protection"] .hp-float img,
body[data-pa-route="/protection"] .hp-card-img img{
  object-fit:contain!important;
  object-position:center!important;
}
body[data-pa-route="/protection"] .hp-float img{display:block;width:100%!important;height:100%!important}
body[data-pa-route="/protection"] .hp-why-art{overflow:hidden!important}

/* 3 — Video hub: every grid child can shrink and no brand rail is clipped. */
body[data-pa-route="/hearing-aid-videos"] :where(.vid-hero,.video-index,.bp-grid,.vrow,.sched,.wrap){min-width:0;max-width:100%}
body[data-pa-route="/hearing-aid-videos"] :where(.bp-grid,.vrow,.sched)>*{min-width:0;max-width:100%}

/* 4 — Hearing-aid comparison and cost cards stay inside the viewport. */
body[data-pa-route="/hearing-aids"] :where(.ha-hero-grid,.ha-proof,.cov-grid,.brand-grid,.brand-row,.ha-cost-grid,.ha-cost-included,.g-trust-in)>*{
  min-width:0;max-width:100%;
}
body[data-pa-route="/hearing-aids"] .brand-row{width:100%;overflow:hidden}

/* 5 — Complete layout contract for the previously under-styled Phonak page. */
body[data-pa-route="/phonak-infinio-sphere"] main .container{width:min(1180px,calc(100% - 48px));margin-inline:auto}
body[data-pa-route="/phonak-infinio-sphere"] .page-hero{padding:clamp(54px,8vw,104px) 0}
body[data-pa-route="/phonak-infinio-sphere"] .ph-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:clamp(30px,5vw,72px);align-items:start}
body[data-pa-route="/phonak-infinio-sphere"] :where(.fact-card,.card,.card-grid,.section-head,.hero-ctas){min-width:0;max-width:100%}
body[data-pa-route="/phonak-infinio-sphere"] .fact-card{border:1px solid var(--pav-line);border-radius:22px;background:#fff;padding:clamp(24px,3vw,40px)}
body[data-pa-route="/phonak-infinio-sphere"] .hero-ctas{display:flex;flex-wrap:wrap;gap:12px}

/* 6 + 16 — Two-row, discoverable manufacturer navigation and mobile details. */
.pa-mobile-details{display:none}

/* 8 — Reviews gallery/logo/location components respect their containers. */
body[data-pa-route="/reviews"] :where(.pgal,.pgal-grid,.tap-grid,.tap-card,.tap-logo,.pgal-brand,.pgal-team){min-width:0;max-width:100%}
body[data-pa-route="/reviews"] :where(.tap-logo img,.pgal-brand img,.pgal-brand-ear){height:auto!important;object-fit:contain!important}

/* 9 — One high-risk article: eliminate overflow and protect light-card copy. */
body[data-pa-route="/journal/best-hearing-aids-nyc"] :where(.hero-grid,.tech-grid,.tier-grid,.compare,.card-grid,.brand-quick-grid)>*{min-width:0;max-width:100%}
body[data-pa-route="/journal/best-hearing-aids-nyc"] main :where(.tech-cell,.tier,.bq-card,.card):not(.intro-card-dark) :where(p,li,a,span){color:var(--pav-ink)}

/* 10, 14 + 15 — All generated video pages: compact, legible, overflow-safe. */
body.pa-route-family-video :where(.vg-wrap,.vg-grid,.vg-video,.vg-panel,.vg-sections,.vg-section,.vg-links,.vg-list,.vg-brand){min-width:0;max-width:100%}
body.pa-route-family-video .vg-title{font-size:clamp(48px,6vw,76px);line-height:.98;max-width:16ch}
body.pa-route-family-video .vg-hero{padding-block:clamp(42px,6vw,68px) clamp(34px,5vw,52px);min-height:0!important}
body.pa-route-family-video .vg-grid{padding-block:clamp(30px,4vw,52px)}

/* 17–18 — Long pages/articles gain chapter pacing without fake imagery. */
body.pa-longform main{counter-reset:pav-chapter}
body.pa-longform main :where(article,.prose,.art-body,.article-body) h2{
  counter-increment:pav-chapter;
  position:relative;
  margin-block:clamp(70px,9vw,120px) .55em!important;
  padding-top:26px;
  font-size:clamp(34px,4.4vw,54px)!important;
  line-height:1.08!important;
  text-wrap:balance;
}
body.pa-longform main :where(article,.prose,.art-body,.article-body) h2::before{
  content:"0" counter(pav-chapter);
  position:absolute;top:0;left:0;
  color:var(--pav-orange-dark);
  font:700 10px/1 'JetBrains Mono',ui-monospace,monospace;
  letter-spacing:.18em;
}
body.pa-longform main :where(article,.prose,.art-body,.article-body) h2::after{
  content:"";position:absolute;top:4px;left:34px;width:44px;height:1px;background:var(--pav-orange);
}
body.pa-route-family-journal main :where(article,.prose,.art-body,.article-body) h3{line-height:1.16!important;margin-block:1.8em .55em!important}
body.pa-route-family-journal main :where(article,.prose,.art-body,.article-body) :where(p,li){line-height:1.72}

/* 20 — This file is the final compatibility layer across both shared shells. */

/* Motion system — calm, interruptible, and limited to useful state change. */
@media(min-width:761px) and (prefers-reduced-motion:no-preference){
  body.pa-editorial-system main :where([data-reveal],[data-qcl-reveal],[data-hac-reveal],.reveal){
    filter:none!important;
    transition-property:opacity,transform!important;
    transition-duration:480ms!important;
    transition-timing-function:var(--pav-ease-out)!important;
  }
}

/* Accordion content opens through its intrinsic row instead of max-height. */
body.pa-editorial-system main .acc-a{
  display:grid!important;
  grid-template-rows:0fr;
  max-height:none!important;
  overflow:hidden;
  opacity:0;
  transition:grid-template-rows 200ms var(--pav-ease-out),opacity 200ms var(--pav-ease-out)!important;
}
body.pa-editorial-system main .acc-a>.acc-a-inner{
  min-height:0;
  overflow:hidden;
  padding-bottom:0!important;
}
body.pa-editorial-system main .acc-a>.acc-a-inner::after{
  content:"";
  display:block;
  height:28px;
}
body.pa-editorial-system main .acc-item[open]>.acc-a{grid-template-rows:1fr;opacity:1}
body.pa-editorial-system main details.acc-item>.acc-a{display:grid!important}

/* Manufacturer guides use direct paragraph/list children and an `.acc.open`
   state. Keep their authored display toggle instead of applying the wrapped
   intrinsic-row pattern used by the shared details accordions. */
body.pa-editorial-system main .mfr-page .acc>.acc-a{
  display:none!important;
  grid-template-rows:none!important;
  max-height:none!important;
  opacity:1;
  transition:none!important;
}
body.pa-editorial-system main .mfr-page .acc.open>.acc-a{display:block!important}
body.pa-editorial-system main .acc-q .ic{
  transition:transform 160ms var(--pav-ease-out),background-color 180ms ease,border-color 180ms ease,color 180ms ease!important;
}

/* The shared shell owns the reading-progress indicator. */
body.pa-editorial-system .scroll-prog{display:none!important}

/* Established controls all share the same short, tactile press response. */
body.pa-editorial-system main :where(
  a.btn,button.btn,.hac-btn,.hero-ctas a,.cta-ctas a,
  .q-opt,.quiz-opt,.qz-opt,.quiz-back,.quiz-retake,.chip,.pa-path-card
){
  transition-property:transform,background-color,border-color,color,box-shadow!important;
  transition-duration:160ms,180ms,180ms,180ms,180ms!important;
  transition-timing-function:var(--pav-ease-out),ease,ease,ease,ease!important;
}
@media(hover:hover) and (pointer:fine){
  body.pa-editorial-system main :where(
    .card,.cov,.step,.pcard,.bcard,.tier,.service-card,.feature-card,
    .tap-card,.life-card,.rev-card,.pa-path-card,
    .hero-photo .hp-frame img,.mfr-shot img,.prod-img
  ){
    transition-duration:180ms!important;
    transition-timing-function:var(--pav-ease-out)!important;
  }
}

@media(hover:none),(pointer:coarse){
  body.pa-editorial-system main :where(
    .card,.cov,.step,.pcard,.bcard,.tier,.service-card,.feature-card,
    .tap-card,.life-card,.rev-card,.pa-path-card,
    a.btn,button.btn,.hac-btn,.hero-ctas a,.cta-ctas a,
    .q-opt,.quiz-opt,.qz-opt,.quiz-back,.quiz-retake,.chip
  ):hover{transform:none!important}
  body.pa-editorial-system main :where(.btn,.cov,.pcard):hover :where(.arr,.arrow){transform:none!important}
  body.pa-editorial-system main :where(.hero-photo,.mfr-shot):hover img{transform:none!important}
}
body.pa-editorial-system main :where(
  a.btn,button.btn,.hac-btn,.hero-ctas a,.cta-ctas a,
  .q-opt,.quiz-opt,.qz-opt,.quiz-back,.quiz-retake,.chip,.pa-path-card
):active{transform:scale(.97)!important}

/* Decorative loops rest in their authored first frame. */
body.pa-editorial-system :where(.g-dot,.topbar .dot,.reach-live i){animation:none!important}
body[data-pa-route="/"] :where(.sound-badge .bars i,.lux-word,.rev-track){animation:none!important}
body[data-pa-route="/protection"] :where(.hp-eq span,.hp-float,.hp-track,.hp-why-art img){animation:none!important}
body.flagship-hearing[data-pa-route="/hearing-aids"] #consultation .step .sn{animation:none!important}
.mfr-page :where(.mfr-hero img,.pcard-media img,.acc-media img,.el-stage){animation:none!important}
body[data-pa-route="/reviews"] .tap-card:hover .tap-logo img{animation:none!important}
body[data-pa-route="/journal/best-hearing-aids-nyc"] :where(
  .hero-photo,.hero-photo img,.prod-img,.prod-img-b,.prod-img-c,.prod-img-d,
  .life-card,.brands-photo,.float-dev-a,.float-dev-b,.float-dev-c,.float-dev-d,
  .dm-img-a,.dm-img-b,.dm-img-c,.dm-img-d,.dm-img-e
){animation:none!important}

@media(max-width:760px){
  :root{--pav-display:clamp(46px,13vw,64px);--pav-page-title:clamp(42px,12vw,58px);--pav-section-title:clamp(34px,9.5vw,48px)}

  /* 19 — Mobile must never wait for a reveal observer or retain blur. */
  body :where([data-reveal],[data-qcl-reveal],[data-hac-reveal],.in,.reveal){
    opacity:1!important;filter:none!important;transform:none!important;animation:none!important;transition:none!important;
  }

  /* The dock uses explicit insets at every mobile state. Keeping the geometry
     independent of the reveal/open classes prevents a transform from pushing
     the rail outside the viewport when Ask or Text Size is opened. */
  body .pinn-dock.pinn-dock{left:8px!important;right:8px!important;bottom:calc(10px + env(safe-area-inset-bottom))!important;width:auto!important;max-width:none!important;justify-content:stretch!important;transform:none!important}
  .pinn-dock :where(a,button){flex:1 1 0!important;padding-inline:10px!important}

  body[data-pa-route="/protection"] .hp-stage{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important;
    width:100%!important;max-width:100%!important;min-height:0!important;padding:18px!important;
  }
  body[data-pa-route="/protection"] .hp-float{
    position:static!important;inset:auto!important;transform:none!important;margin:0 auto!important;
    width:100%!important;max-width:100%!important;height:132px!important;padding:10px!important;
  }
  body[data-pa-route="/protection"] .hp-f1{grid-column:1/-1;height:230px!important;max-width:330px!important}

  body[data-pa-route="/hearing-aid-videos"] :where(.vid-hero .wrap,.hero-grid){display:grid!important;grid-template-columns:minmax(0,1fr)!important}
  body[data-pa-route="/hearing-aid-videos"] .bp-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  body[data-pa-route="/hearing-aid-videos"] :where(.vrow,.sched){grid-template-columns:minmax(0,1fr)!important}

  body[data-pa-route="/hearing-aids"] :where(.ha-hero-grid,.ha-proof,.cov-grid,.brand-grid,.ha-cost-grid,.ha-cost-included,.g-trust-in){grid-template-columns:minmax(0,1fr)!important}
  body.flagship-hearing[data-pa-route="/hearing-aids"] #modern .cov-grid,
  body.flagship-hearing[data-pa-route="/hearing-aids"] #brands .brand-grid,
  body.flagship-hearing[data-pa-route="/hearing-aids"] #tech-levels .tier-grid{
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;overflow:visible!important;
    scroll-snap-type:none!important;padding-inline:0!important;
  }
  body.flagship-hearing[data-pa-route="/hearing-aids"] :where(#modern .cov,#brands .bcard,#tech-levels .tier){
    width:100%!important;max-width:100%!important;flex:auto!important;
  }
  body[data-pa-route="/hearing-aids"] .brand-row{grid-template-columns:40px 68px minmax(0,1fr)!important;gap:10px!important;padding-inline:12px!important}
  body[data-pa-route="/hearing-aids"] :where(.ha-hero-visual,.ha-cost-next,.ha-cost-links){position:static!important;transform:none!important;width:100%!important}

  body[data-pa-route="/phonak-infinio-sphere"] main .container{width:min(100% - 36px,1180px)}
  body[data-pa-route="/phonak-infinio-sphere"]{margin:0!important}
  body[data-pa-route="/phonak-infinio-sphere"] main .container{box-sizing:border-box!important;padding-inline:0!important}
  body[data-pa-route="/phonak-infinio-sphere"] :where(.ph-grid,.card-grid,.section-head){grid-template-columns:minmax(0,1fr)!important;display:grid!important}
  body[data-pa-route="/phonak-infinio-sphere"] :where(.ph-grid>*,.card-grid>*,.fact-card){box-sizing:border-box!important;width:100%!important;max-width:100%!important;margin-inline:0!important}
  body[data-pa-route="/phonak-infinio-sphere"] .hero-ctas>.btn{box-sizing:border-box!important;width:100%!important;max-width:100%!important;padding-inline:18px!important}
  body[data-pa-route="/phonak-infinio-sphere"] .pa-pathways .wrap{box-sizing:border-box!important;width:100%!important;max-width:100%!important}
  body[data-pa-route="/phonak-infinio-sphere"] .pa-pathways :where(.pa-path-head,.pa-path-grid,.pa-path-card){box-sizing:border-box!important;width:100%!important;max-width:100%!important}
  body[data-pa-route="/phonak-infinio-sphere"] main section[style*="padding"]{padding-block:56px!important}

  .mfr-page .subnav .wrap{position:relative}
  .mfr-page .subnav-inner{
    display:grid!important;grid-template-rows:repeat(2,auto);grid-auto-flow:column;
    grid-auto-columns:minmax(118px,42vw);gap:5px!important;overflow-x:auto!important;
    scroll-snap-type:x proximity;padding:8px 54px 8px 0!important;
  }
  .mfr-page .subnav-inner a{scroll-snap-align:start;text-align:center;border:1px solid var(--pav-line);background:#fff}
  .mfr-page .subnav .wrap::after{
    content:"SWIPE →";position:absolute;right:0;top:0;bottom:0;z-index:2;display:grid;place-items:center;
    width:58px;color:var(--pav-orange-dark);font:700 9px/1 'JetBrains Mono',monospace;letter-spacing:.08em;
    background:linear-gradient(90deg,rgba(255,255,255,0),#fff 30%);
  }
  .mfr-page .pa-mobile-details{
    display:flex;width:calc(100% - 36px);margin:0 18px 18px;padding:13px 15px;align-items:center;justify-content:space-between;
    border:1px solid var(--pav-line);border-radius:9px;background:var(--pav-cream);color:var(--pav-ink);
    font:700 12px/1.2 'JetBrains Mono',monospace;letter-spacing:.04em;text-transform:uppercase;
  }
  .mfr-page .pa-mobile-details i{width:9px;height:9px;border-right:2px solid var(--pav-orange-dark);border-bottom:2px solid var(--pav-orange-dark);transform:rotate(45deg)}
  .mfr-page .pa-mobile-details[aria-expanded="true"] i{transform:rotate(-135deg)}
  body.pa-details-ready .mfr-page .pcard:not(.is-expanded) :where(.spec-grid,.pcard-sl){display:none!important}

  body.hac-page .hac-jump{position:relative!important;top:auto!important}
  body.hac-page .hac-jump-inner{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;overflow:visible!important}
  body.hac-page .hac-jump-label{grid-column:1/-1}
  body.hac-page .hac-jump-inner a{display:flex!important;width:100%!important;min-width:0!important;justify-content:center;text-align:center;white-space:normal!important}

  body[data-pa-route="/reviews"] .pgal-grid{
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;
    grid-template-areas:"man" "grd" "off" "team" "logo"!important;grid-template-rows:none!important;
    gap:12px!important;width:100%!important;padding-inline:18px!important;overflow:hidden!important;
  }
  body[data-pa-route="/reviews"] .tap-grid{grid-template-columns:minmax(0,1fr)!important}
  body[data-pa-route="/reviews"] :where(.pgal-grid>*,.tap-card,.tap-logo){width:100%!important;max-width:100%!important;transform:none!important}

  body[data-pa-route="/journal/best-hearing-aids-nyc"] :where(.hero-grid,.tech-grid,.tier-grid,.brand-quick-grid,.card-grid){grid-template-columns:minmax(0,1fr)!important}
  body[data-pa-route="/journal/best-hearing-aids-nyc"] :where(table,.compare){display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

  body.pa-route-family-video .vg-title{font-size:clamp(42px,12.5vw,54px)!important;line-height:1.02!important;max-width:100%}
  body.pa-route-family-video :where(.vg-grid,.vg-sections,.vg-links,.vg-list){grid-template-columns:minmax(0,1fr)!important}
  body.pa-route-family-video .vg-wrap{width:min(100% - 32px,1180px)!important}
}

@media(max-width:390px){
  .pinn-dock :where(a,button){font-size:12px!important;min-width:0!important;padding-inline:6px!important}
  body[data-pa-route="/hearing-aid-videos"] .bp-grid{grid-template-columns:minmax(0,1fr)!important}
}

@media(prefers-reduced-motion:reduce){
  body.pa-editorial-system :where([data-reveal],[data-qcl-reveal],[data-hac-reveal],.in,.reveal){
    opacity:1!important;
    filter:none!important;
    transform:none!important;
    animation:none!important;
    transition-property:opacity,background-color,border-color,color,box-shadow!important;
    transition-duration:120ms!important;
    transition-timing-function:ease!important;
  }
  body.pa-editorial-system main :where(
    .card,.cov,.step,.pcard,.bcard,.tier,.service-card,.feature-card,
    .tap-card,.life-card,.rev-card,.pa-path-card,
    .hero-photo .hp-frame img,.mfr-shot img,.prod-img
  ){animation:none!important;transform:none!important}
  body.pa-editorial-system main :where(
    a.btn,button.btn,.hac-btn,.hero-ctas a,.cta-ctas a,
    .q-opt,.quiz-opt,.qz-opt,.quiz-back,.quiz-retake,.chip,.pa-path-card
  ){
    animation:none!important;
    transform:none!important;
    transition-property:background-color,border-color,color,box-shadow!important;
    transition-duration:120ms!important;
    transition-timing-function:ease!important;
  }
  body.pa-editorial-system main .acc-a{transition:opacity 120ms ease!important}
  body.pa-editorial-system main .acc-q .ic{
    transition-property:background-color,border-color,color!important;
    transition-duration:120ms!important;
    transition-timing-function:ease!important;
  }
}