/* Homepage hero (spec: docs/superpowers/specs/2026-09-10-homepage-hero-design.md). Loaded only on the homepage,
   after toc.css and header.css. Colour and type come from tokens.css; the only literals are #fff and rgba().
   The legacy theme's .page-template-default h1 / p / a / li / ul / span rules match by tag at (0,1,1), so every
   rule here carries the hero class plus an element or a second class.
   Full bleed is done in CSS against #content: width is 100cqw of #content (which excludes a classic
   scrollbar, so the hero and its 15px column line up with the header at every width), with a 100vw fallback
   for browsers without container query units, rather than the Visual Composer script the old banner used, so
   the hero is the right size from the first paint. The button row and proof list are capped at 760px, inside
   the 1140px column.
   Below 1200px the text column's side padding is 15px to match the mobile header's logo edge. Below 992px the
   video is gated off (see home-hero.html) and the poster becomes the permanent background, so the ::before
   scrim switches from the desktop horizontal gradient to a near-uniform vertical one, keeping full-width text
   lines above AA contrast over the bright glass in the poster. */
body.home #content{overflow-x:clip;container-type:inline-size;}
.pd-home-hero{position:relative;width:100vw;margin-left:calc(50% - 50vw);width:100cqw;margin-left:calc(50% - 50cqw);min-height:640px;overflow:hidden;background:var(--pd-ink);color:#fff;font-family:var(--pd-body);display:flex;align-items:center;}
.pd-home-hero-media{position:absolute;inset:0;z-index:0;}
.pd-home-hero-media img,.pd-home-hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 40%;display:block;margin:0;padding:0;}
.pd-home-hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(17,26,58,.9) 0%,rgba(17,26,58,.72) 45%,rgba(17,26,58,.3) 100%);}
.pd-home-hero-in{position:relative;z-index:2;width:100%;max-width:1140px;margin:0 auto;padding:172px 0 64px;}
.pd-home-hero .pd-eb{display:block;margin:0;padding:0;font:600 11.5px/1.5 var(--pd-label);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.72);}
.pd-home-hero h1{font:400 54px/1.1 var(--pd-display);color:#fff;margin:22px 0 18px;padding:0;max-width:15ch;text-wrap:balance;letter-spacing:-.005em;}
.pd-home-hero .pd-home-hero-sub{font:400 19px/1.55 var(--pd-body);color:rgba(255,255,255,.88);max-width:44ch;margin:0;padding:0;letter-spacing:0;}
.pd-home-hero .pd-home-hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;max-width:760px;}
.pd-home-hero .pd-btn{display:inline-block;font:600 14.5px/1 var(--pd-label);letter-spacing:.02em;padding:13px 20px;border-radius:4px;background:var(--pd-blue);color:#fff;text-decoration:none;white-space:nowrap;transition:background-color .15s ease;}
.pd-home-hero .pd-btn:hover,.pd-home-hero .pd-btn:focus{background:var(--pd-blue-deep);color:#fff;text-decoration:none;}
.pd-home-hero .pd-btn--ghost{background:transparent;border:1px solid rgba(255,255,255,.6);}
.pd-home-hero .pd-btn--ghost:hover,.pd-home-hero .pd-btn--ghost:focus{background:rgba(255,255,255,.14);color:#fff;}
.pd-home-hero .pd-home-hero-proof{list-style:none;margin:34px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 26px;font:600 12px/1.4 var(--pd-label);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.72);max-width:760px;}
.pd-home-hero-proof li{list-style:none;margin:0;padding:0;}
.pd-home-hero-proof b{color:#fff;font-weight:600;}
.pd-home-hero-proof .pd-star{display:inline;color:var(--pd-gold);letter-spacing:.05em;}
.pd-home-hero-proof a{display:inline;padding:0;font:inherit;color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.45);text-underline-offset:3px;}
.pd-home-hero-proof a:hover,.pd-home-hero-proof a:focus{color:#fff;text-decoration:underline;}
.pd-home-hero a:focus-visible{outline:2px solid #fff;outline-offset:2px;}
@media (max-width:1199.98px){
  .pd-home-hero-in{padding:180px 15px 56px;}
}
@media (max-width:991.98px){
  /* No video below 992px: the poster is the permanent background, so the scrim goes vertical and
     nearly uniform to keep the full-width text lines above AA contrast over the bright glass. */
  .pd-home-hero::before{background:linear-gradient(180deg,rgba(17,26,58,.92) 0%,rgba(17,26,58,.84) 100%);}
}
@media (max-width:767.98px){
  .pd-home-hero{min-height:auto;}
  .pd-home-hero-in{padding:120px 15px 48px;}
  .pd-home-hero h1{font-size:36px;line-height:1.15;}
  .pd-home-hero .pd-home-hero-sub{font-size:17px;}
  .pd-home-hero .pd-home-hero-proof{flex-direction:column;gap:8px;}
}
@media (max-width:479.98px){
  .pd-home-hero .pd-home-hero-cta{flex-direction:column;}
  .pd-home-hero .pd-btn{text-align:center;}
}
@media (prefers-reduced-motion:reduce){
  .pd-home-hero .pd-btn{transition:none;}
}

/* Homepage foot (spec 2026-09-16 homepage step 1): the shared appointment band and the directions section in
   one wrapper that breaks out of the Bootstrap container exactly as .pd-home-hero does above (100cqw against
   #content, 100vw fallback). appointment-form.html wraps itself in .pd-frame on this non-frame body and
   map-section.html in .pd-frame > .pd-content, so components.css and page.css style both as on /contact/.
   The band's 48px top margin is for pages where it follows article content; here the logo strip's own
   padding is the gap and the band's hairline the division. (0,2,0) beats components.css's .pd-band. */
.pd-home-foot{width:100vw;margin-left:calc(50% - 50vw);width:100cqw;margin-left:calc(50% - 50cqw);}
.pd-home-foot .pd-band{margin-top:0;}

/* Offers strip under the hero (spec 2026-09-16 homepage step 2; partials/home-offers.html). Full bleed with
   the hero's breakout; paper ground with a hairline above (the boundary with the hero, which has no bottom
   rule) and below. The list is the hero's 1140px column: no side padding at 1200px and up, 15px below it, so
   the first figure sits on the hero eyebrow's left edge. Items take their content width plus an equal share
   of the free space (flex:1 1 auto), so all three sit on one line at 1200px and up; below 768px they stack
   with the hairline moving from the left edge to the top of every item after the first.
   Every rule is .pd-home-offers plus a class or element: the child theme's .page-template-default ul / li / a
   rules match at (0,1,1) and its ul rule zeroes margins, which would cancel the column's auto margins. */
.pd-home-offers{width:100vw;margin-left:calc(50% - 50vw);width:100cqw;margin-left:calc(50% - 50cqw);background:var(--pd-paper);border-top:1px solid var(--pd-hair);border-bottom:1px solid var(--pd-hair);font-family:var(--pd-body);}
.pd-home-offers .pd-home-offers-in{list-style:none;max-width:1140px;margin:0 auto;padding:0;display:flex;}
.pd-home-offers .pd-home-offers-in li{list-style:none;margin:0;padding:0 28px 0 0;flex:1 1 auto;min-width:0;}
.pd-home-offers .pd-home-offers-in li + li{padding-left:28px;border-left:1px solid var(--pd-hair);}
.pd-home-offers .pd-home-offers-in li:last-child{padding-right:0;}
.pd-home-offers .pd-home-offers-in a{display:flex;align-items:baseline;gap:10px;padding:20px 0;font:400 15px/1.4 var(--pd-body);color:var(--pd-text);text-decoration:none;letter-spacing:0;}
.pd-home-offers .pd-home-offers-in a span{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color .15s ease,color .15s ease;}
.pd-home-offers .pd-home-offers-in a:hover,.pd-home-offers .pd-home-offers-in a:focus{color:var(--pd-text);text-decoration:none;}
.pd-home-offers .pd-home-offers-in a:hover span,.pd-home-offers .pd-home-offers-in a:focus span{color:var(--pd-navy);text-decoration-color:rgba(18,58,114,.35);}
.pd-home-offers .pd-home-offers-in a:focus-visible{outline:2px solid var(--pd-navy);outline-offset:2px;}
.pd-home-offers .pd-home-offer-price{flex:none;font:400 22px/1 var(--pd-display);color:var(--pd-ink);font-variant-numeric:tabular-nums;}
@media (max-width:1199.98px){
  .pd-home-offers .pd-home-offers-in{padding:0 15px;}
}
@media (max-width:767.98px){
  .pd-home-offers .pd-home-offers-in{flex-direction:column;}
  .pd-home-offers .pd-home-offers-in li{padding:0;}
  .pd-home-offers .pd-home-offers-in li + li{padding-left:0;border-left:0;border-top:1px solid var(--pd-hair);}
  .pd-home-offers .pd-home-offers-in a{padding:14px 0;}
  .pd-home-offers .pd-home-offer-price{font-size:20px;}
}
@media (prefers-reduced-motion:reduce){
  .pd-home-offers .pd-home-offers-in a span{transition:none;}
}

/* Services cards (spec 2026-09-16 homepage step 3; partials/home-services.html). The section sits in div.pd-frame
   so components.css draws the cards; .pd-home-bleed is the hero's breakout as a class, because inside the
   Bootstrap .container (1110px of content at 1200px and up) a 1140px column would start 15px right of the
   strip above. The second selector is for sections that are also a frame pd-section: page.css's
   .pd-frame .pd-section{margin:0} is (0,2,0) and would otherwise cancel the breakout (measured on the welcome
   band at 315px instead of 150px from the viewport edge). Three even columns at 768px and up, two between
   560px and 767px, and below 560px the component's own phone rows (96px thumbnail, hairlines) take over. */
.pd-home-bleed,.pd-frame .pd-section.pd-home-bleed{width:100vw;margin-left:calc(50% - 50vw);width:100cqw;margin-left:calc(50% - 50cqw);}
.pd-frame .pd-home-services{padding:72px 24px 64px;background:#fff;}
.pd-frame .pd-home-services-in{max-width:1140px;margin:0 auto;}
.pd-frame .pd-home-services-head{max-width:760px;}
.pd-frame .pd-home-services-head .pd-eb{margin-bottom:12px;}
.pd-frame .pd-home-services-head h2{font:400 34px/1.14 var(--pd-display);color:var(--pd-ink);margin:0 0 12px;padding:0;text-wrap:balance;}
.pd-frame .pd-home-services-head p{font:400 16.5px/1.6 var(--pd-body);color:var(--pd-text);margin:0;max-width:60ch;}
.pd-frame .pd-home-services .pd-cards{margin-top:30px;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;}
.pd-frame .pd-home-services-more{font:400 15.5px/1.6 var(--pd-body);color:var(--pd-muted);margin:28px 0 0;padding:0;}
.pd-frame .pd-home-services-more span{padding:0 6px;}
@media (max-width:991.98px){
  .pd-frame .pd-home-services{padding:40px 20px;}
  .pd-frame .pd-home-services-head h2{font-size:26px;}
}
@media (max-width:767.98px){
  .pd-frame .pd-home-services .pd-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}
}
@media (max-width:559.98px){
  .pd-frame .pd-home-services .pd-cards{grid-template-columns:1fr;gap:0;}
}

/* Welcome band (spec 2026-09-16 homepage step 4; partials/home-welcome.html). The band itself is the frame's
   pd-section on paper; only the 20px lead and the facts list are homepage-specific. Both selectors carry
   .pd-content so they out-specify page.css's .pd-frame .pd-content .pd-section-text p (0,3,1) and ul li (0,3,2). */
.pd-frame .pd-content .pd-home-welcome .pd-home-lead{font-size:20px;line-height:1.55;color:var(--pd-ink);}
.pd-frame .pd-content .pd-home-welcome .pd-home-facts{list-style:none;margin:26px 0 0;padding:22px 0 0;border-top:1px solid var(--pd-hair);display:flex;flex-wrap:wrap;gap:12px 26px;}
.pd-frame .pd-content .pd-home-welcome .pd-home-facts li{list-style:none;margin:0;padding:0 0 0 20px;position:relative;font:600 14px/1.35 var(--pd-body);color:var(--pd-ink);letter-spacing:0;}
.pd-frame .pd-content .pd-home-welcome .pd-home-facts li::before{content:"";position:absolute;left:0;top:.34em;width:9px;height:9px;border-radius:50%;border:2px solid var(--pd-navy);box-sizing:border-box;}

/* Dentists and team (spec 2026-09-16 homepage step 5, revised twice on the owner's review; partials/home-team.html).
   Row one: the two staff cards (page.css rules) and a short introduction beside them; row two: the rest of
   the team as a slow row moving left. Two identical tracks sit side by side and each translates by its own
   width (padding-right equals the tile gap, so the seam is one more gap), which loops seamlessly with no
   script. 62s for a 2,160px track at 1200px and up is about 35px per second. The row pauses on hover and
   via the Pause button (.is-paused), and under prefers-reduced-motion the copy is hidden and the first track
   wraps, so every face shows without motion. Selectors carry .pd-content where page.css or components.css
   already style the element. */
.pd-frame .pd-home-team{padding:72px 24px 64px;background:#fff;}
.pd-frame .pd-home-team-in{max-width:1140px;margin:0 auto;}
.pd-frame .pd-home-team-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 300px;gap:56px;align-items:start;}
.pd-frame .pd-content .pd-home-team-tile{align-self:center;padding:0;}
.pd-frame .pd-content .pd-home-team-tile .pd-eb{margin-bottom:12px;}
.pd-frame .pd-content .pd-home-team-tile h3{font:400 24px/1.2 var(--pd-display);color:var(--pd-ink);margin:0 0 10px;padding:0;text-wrap:balance;}
.pd-frame .pd-content .pd-home-team-tile p{font:400 15.5px/1.6 var(--pd-body);color:var(--pd-text);margin:0 0 12px;}
.pd-frame .pd-content .pd-home-team-strip{--pd-tile:132px;--pd-gap:12px;margin:48px 0 0;position:relative;}
.pd-frame .pd-content .pd-home-team-tracks{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.pd-frame .pd-content .pd-home-team-track{list-style:none;margin:0;padding:0 var(--pd-gap) 0 0;display:flex;gap:var(--pd-gap);flex:none;animation:pd-team-marquee 62s linear infinite;will-change:transform;}
.pd-frame .pd-content .pd-home-team-track li{list-style:none;margin:0;padding:0;flex:none;width:var(--pd-tile);}
.pd-frame .pd-content .pd-home-team-track img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:top;border-radius:6px;display:block;margin:0;}
.pd-frame .pd-content .pd-home-team-strip:hover .pd-home-team-track,.pd-frame .pd-content .pd-home-team-strip:focus-within .pd-home-team-track,.pd-frame .pd-content .pd-home-team-strip.is-paused .pd-home-team-track{animation-play-state:paused;}
.pd-frame .pd-content .pd-home-team-pause{display:block;margin:12px 0 0 auto;padding:6px 0;background:transparent;border:0;font:600 11.5px/1 var(--pd-label);letter-spacing:.14em;text-transform:uppercase;color:var(--pd-muted);cursor:pointer;}
.pd-frame .pd-content .pd-home-team-pause:hover,.pd-frame .pd-content .pd-home-team-pause:focus{color:var(--pd-navy);}
.pd-frame .pd-content .pd-home-team-pause:focus-visible{outline:2px solid var(--pd-navy);outline-offset:2px;}
@keyframes pd-team-marquee{from{transform:translateX(0);}to{transform:translateX(-100%);}}
@media (max-width:991.98px){
  .pd-frame .pd-home-team{padding:40px 20px;}
  .pd-frame .pd-home-team-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;}
  .pd-frame .pd-content .pd-home-team-tile{grid-column:1 / -1;align-self:auto;}
  .pd-frame .pd-content .pd-home-team-strip{--pd-tile:112px;--pd-gap:10px;margin-top:32px;}
  .pd-frame .pd-content .pd-home-team-track{animation-duration:52s;}
}
@media (max-width:559.98px){
  /* the two dentist cards stay side by side on phones (owner's review 2026-09-16): smaller type in the
     narrow cards rather than a full-width stack that made the section about 1,700px tall */
  .pd-frame .pd-home-team-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
  .pd-frame .pd-home-team .pd-staff-text{padding-top:12px;}
  .pd-frame .pd-content .pd-home-team .pd-staff-card .pd-eb{font-size:10.5px;letter-spacing:.12em;}
  .pd-frame .pd-content .pd-home-team .pd-staff-card h3{font-size:18px;margin:6px 0 6px;}
  .pd-frame .pd-content .pd-home-team .pd-staff-card p{font-size:14px;line-height:1.5;margin-bottom:10px;}
  .pd-frame .pd-content .pd-home-team-strip{--pd-tile:96px;--pd-gap:8px;}
  .pd-frame .pd-content .pd-home-team-track{animation-duration:44s;}
}
@media (prefers-reduced-motion:reduce){
  .pd-frame .pd-content .pd-home-team-track{animation:none;flex-wrap:wrap;padding-right:0;}
  .pd-frame .pd-content .pd-home-team-track[aria-hidden]{display:none;}
  .pd-frame .pd-content .pd-home-team-tracks{-webkit-mask-image:none;mask-image:none;}
  .pd-frame .pd-content .pd-home-team-pause{display:none;}
}

/* Why patients choose us (spec 2026-09-16 homepage step 6; partials/home-why.html): head left, four claims on
   hairlines right, on paper. Every rule is .pd-frame plus a class or element, as elsewhere in this file. */
.pd-frame .pd-home-why{padding:72px 24px 64px;background:var(--pd-paper);border-top:1px solid var(--pd-hair);border-bottom:1px solid var(--pd-hair);}
.pd-frame .pd-home-why-in{max-width:1140px;margin:0 auto;display:grid;grid-template-columns:380px minmax(0,1fr);gap:90px;align-items:start;}
.pd-frame .pd-home-why-head .pd-eb{margin-bottom:12px;}
.pd-frame .pd-home-why-head h2{font:400 34px/1.14 var(--pd-display);color:var(--pd-ink);margin:0 0 12px;padding:0;text-wrap:balance;}
.pd-frame .pd-home-why-lead{font:italic 400 18px/1.5 var(--pd-body);color:var(--pd-text);margin:0;padding:0;}
.pd-frame .pd-home-why-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;}
.pd-frame .pd-home-why-grid li{list-style:none;margin:0;padding:22px 0 24px;border-top:1px solid var(--pd-hair);}
.pd-frame .pd-home-why-grid h3{font:400 22px/1.2 var(--pd-display);color:var(--pd-ink);margin:0 0 8px;padding:0;}
.pd-frame .pd-home-why-grid p{font:400 15.5px/1.6 var(--pd-body);color:var(--pd-text);margin:0;padding:0;max-width:40ch;letter-spacing:0;}
@media (max-width:991.98px){
  .pd-frame .pd-home-why{padding:40px 20px;}
  .pd-frame .pd-home-why-in{grid-template-columns:1fr;gap:24px;}
  .pd-frame .pd-home-why-head h2{font-size:26px;}
}
@media (max-width:559.98px){
  .pd-frame .pd-home-why-grid{grid-template-columns:1fr;}
}

/* Reviews band (spec 2026-09-16 homepage step 7; partials/home-reviews.html): the one dark beat on the page. The
   video grid takes page.css's .pd-videos rules with white captions; everything else is here, .pd-frame plus a
   class or element as elsewhere in this file. */
.pd-frame .pd-home-reviews{background:var(--pd-ink);color:#fff;padding:80px 24px 76px;font-family:var(--pd-body);}
.pd-frame .pd-home-reviews-in{max-width:1140px;margin:0 auto;}
.pd-frame .pd-home-reviews-top{display:grid;grid-template-columns:360px minmax(0,1fr);gap:90px;align-items:center;}
.pd-frame .pd-home-reviews .pd-home-reviews-eb{display:block;font:600 11.5px/1 var(--pd-label);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.66);margin:0;padding:0;}
.pd-frame .pd-home-reviews-big{font:400 108px/1 var(--pd-display);color:#fff;margin:12px 0 6px;padding:0;letter-spacing:-.01em;font-variant-numeric:tabular-nums;}
.pd-frame .pd-home-reviews-stars{color:var(--pd-gold);font-size:20px;line-height:1;letter-spacing:.14em;margin:0 0 8px;padding:0;}
.pd-frame .pd-home-reviews-from{font:400 17px/1.5 var(--pd-body);color:rgba(255,255,255,.8);margin:0 0 20px;padding:0;}
.pd-frame .pd-home-reviews-src{font:600 11.5px/1.8 var(--pd-label);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55);margin:0;padding:0;}
.pd-frame .pd-home-reviews-quote{margin:0;padding:0;}
.pd-frame .pd-home-reviews-quote blockquote{margin:0;padding:0;background:transparent;border:0;}
.pd-frame .pd-home-reviews-quote blockquote p{font:400 27px/1.4 var(--pd-display);color:#fff;margin:0;padding:0;text-wrap:pretty;letter-spacing:0;}
.pd-frame .pd-home-reviews-quote figcaption{margin:20px 0 0;font:400 15px/1.5 var(--pd-body);color:rgba(255,255,255,.72);}
.pd-frame .pd-home-reviews-quote figcaption b{color:#fff;font-weight:700;}
.pd-frame .pd-home-reviews-more{display:inline-block;margin-top:26px;font:700 15.5px/1.4 var(--pd-body);color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.45);text-underline-offset:4px;}
.pd-frame .pd-home-reviews-more:hover,.pd-frame .pd-home-reviews-more:focus{color:#fff;text-decoration:underline;text-decoration-color:#fff;}
.pd-frame .pd-home-reviews a:focus-visible{outline:2px solid #fff;outline-offset:2px;}
.pd-frame .pd-home-reviews-videos{margin-top:56px;padding-top:44px;border-top:1px solid rgba(255,255,255,.16);}
.pd-frame .pd-home-reviews-videos .pd-home-reviews-eb{margin-bottom:22px;}
.pd-frame .pd-home-reviews .pd-videos{grid-template-columns:repeat(3,minmax(0,1fr));}
.pd-frame .pd-home-reviews .pd-video figcaption{color:#fff;}
@media (max-width:991.98px){
  .pd-frame .pd-home-reviews{padding:48px 20px;}
  .pd-frame .pd-home-reviews-top{grid-template-columns:1fr;gap:28px;}
  .pd-frame .pd-home-reviews-big{font-size:76px;}
  .pd-frame .pd-home-reviews-quote blockquote p{font-size:22px;}
  .pd-frame .pd-home-reviews-videos{margin-top:36px;padding-top:32px;}
  .pd-frame .pd-home-reviews .pd-videos{grid-template-columns:1fr;gap:20px;}
}

/* Insurance and financing (spec 2026-09-16 homepage step 8; partials/home-money.html): head left, the savings
   plan as the band offer card's box on the right, on white between the ink reviews band and the paper close. */
.pd-frame .pd-home-money{padding:72px 24px 64px;background:#fff;}
.pd-frame .pd-home-money-in{max-width:1140px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:90px;align-items:start;}
.pd-frame .pd-home-money-head .pd-eb{margin-bottom:12px;}
.pd-frame .pd-home-money-head h2{font:400 34px/1.15 var(--pd-display);color:var(--pd-ink);margin:0 0 16px;padding:0;text-wrap:balance;max-width:20ch;}
.pd-frame .pd-home-money-head p{font:400 16.5px/1.65 var(--pd-body);color:var(--pd-text);margin:0 0 14px;padding:0;max-width:52ch;letter-spacing:0;}
.pd-frame .pd-home-money-partners{list-style:none;margin:8px 0 22px;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;}
.pd-frame .pd-home-money-partners li{list-style:none;margin:0;padding:0;font:600 11.5px/1.6 var(--pd-label);letter-spacing:.14em;text-transform:uppercase;color:var(--pd-muted);}
.pd-frame .pd-home-money-ticket{border:1px solid var(--pd-hair);border-left:4px solid var(--pd-navy);border-radius:6px;padding:26px 28px;background:var(--pd-paper);margin-top:44px;}
.pd-frame .pd-home-money-ticket .pd-eb{margin-bottom:10px;}
.pd-frame .pd-home-money-ticket h3{font:400 24px/1.2 var(--pd-display);color:var(--pd-ink);margin:0 0 10px;padding:0;}
.pd-frame .pd-home-money-ticket p{font:400 15px/1.55 var(--pd-body);color:var(--pd-text);margin:0 0 14px;padding:0;letter-spacing:0;}
@media (max-width:991.98px){
  .pd-frame .pd-home-money{padding:40px 20px;}
  .pd-frame .pd-home-money-in{grid-template-columns:1fr;gap:24px;}
  .pd-frame .pd-home-money-head h2{font-size:26px;}
  .pd-frame .pd-home-money-ticket{margin-top:0;}
}

/* Smile makeovers with the before-and-after comparison (spec 2026-09-16-homepage-smile-makeover-design.md;
   partials/home-makeover.html). Text left, the comparison frame right on white between the paper why section
   and the ink reviews band. The frame keeps the photos' 352:286 ratio; the after photo is clipped at --pos and
   the range input is invisible but covers the frame, so dragging, touching and the arrow keys all move the
   handle; focus shows on the frame. Below 992px the comparison comes first. */
.pd-frame .pd-home-makeover{padding:72px 24px 64px;background:#fff;}
.pd-frame .pd-home-makeover-in{max-width:1140px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:70px;align-items:center;}
.pd-frame .pd-home-makeover-head .pd-eb{margin-bottom:12px;}
.pd-frame .pd-home-makeover-head h2{font:400 34px/1.14 var(--pd-display);color:var(--pd-ink);margin:0 0 14px;padding:0;text-wrap:balance;max-width:18ch;}
.pd-frame .pd-home-makeover-head p{font:400 16.5px/1.65 var(--pd-body);color:var(--pd-text);margin:0 0 14px;padding:0;max-width:52ch;letter-spacing:0;}
.pd-frame .pd-home-makeover-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:22px;}
.pd-frame .pd-home-makeover .pd-btn{background:var(--pd-blue-deep);}
.pd-frame .pd-home-makeover .pd-btn:hover,.pd-frame .pd-home-makeover .pd-btn:focus{background:var(--pd-ink);}
.pd-frame .pd-home-makeover-media{min-width:0;}
.pd-frame .pd-ba{position:relative;aspect-ratio:352/286;border-radius:8px;overflow:hidden;background:var(--pd-ink);user-select:none;-webkit-user-select:none;touch-action:pan-y;}
.pd-frame .pd-ba[hidden]{display:none;}
.pd-frame .pd-ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;margin:0;border-radius:0;}
.pd-frame .pd-ba-after{clip-path:inset(0 0 0 var(--pos,50%));}
.pd-frame .pd-ba-handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(17,26,58,.25);pointer-events:none;}
.pd-frame .pd-ba-handle::after{content:"";position:absolute;top:50%;left:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5' fill='none' stroke='%23123A72' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/22px no-repeat;border:1px solid var(--pd-hair);box-shadow:0 2px 8px rgba(17,26,58,.28);}
.pd-frame .pd-ba-label{position:absolute;top:12px;font:600 11px/1 var(--pd-label);letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(17,26,58,.72);padding:6px 8px;border-radius:4px;pointer-events:none;}
.pd-frame .pd-ba-label--before{left:12px;}
.pd-frame .pd-ba-label--after{right:12px;}
.pd-frame .pd-ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:transparent;}
.pd-frame .pd-ba:focus-within{outline:2px solid var(--pd-navy);outline-offset:3px;}
.pd-frame .pd-home-makeover-cases{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px;}
.pd-frame .pd-home-makeover-case{font:600 11.5px/1 var(--pd-label);letter-spacing:.14em;text-transform:uppercase;padding:10px 12px;border:1px solid var(--pd-hair);border-radius:4px;background:#fff;color:var(--pd-muted);cursor:pointer;}
.pd-frame .pd-home-makeover-case[aria-pressed="true"]{border-color:var(--pd-navy);color:var(--pd-navy);}
.pd-frame .pd-home-makeover-case:focus-visible{outline:2px solid var(--pd-navy);outline-offset:2px;}
.pd-frame .pd-home-makeover-hint{margin-left:auto;font:400 13.5px/1.4 var(--pd-body);color:var(--pd-muted);}
.pd-frame .pd-home-makeover-fine{font:400 13.5px/1.5 var(--pd-body);color:var(--pd-muted);margin:10px 0 0;padding:0;}
@media (max-width:991.98px){
  .pd-frame .pd-home-makeover{padding:40px 20px;}
  .pd-frame .pd-home-makeover-in{grid-template-columns:1fr;gap:28px;}
  .pd-frame .pd-home-makeover-media{order:-1;}
  .pd-frame .pd-home-makeover-head h2{font-size:26px;}
}