/* Frame templates only (spec: docs/superpowers/specs/2026-09-11-default-pages-design.md): the .pd-doc body
   grid, section bands, people, staff, partners, reviews, videos, listing pagination, offer block and map
   section. Loaded after components.css. Colour and type from tokens.css; .pd-frame plus a class on every
   rule, see components.css for why. Later tasks append their component blocks below the frame block. */

/* ---------- frame body ---------- */
.pd-frame{--pd-doc-cols:minmax(20px,1fr) minmax(0,760px) minmax(20px,1fr);}
.pd-doc{color:var(--pd-text);font-family:var(--pd-body);}
.pd-frame .pd-doc-body{display:grid;grid-template-columns:var(--pd-doc-cols);padding:48px 0 0;}
.pd-frame .pd-doc-body > *{grid-column:2;min-width:0;}
.pd-frame .pd-doc-body > .pd-content{grid-column:1 / -1;display:grid;grid-template-columns:var(--pd-doc-cols);}
.pd-frame .pd-content > *{grid-column:2;min-width:0;}
.pd-frame .pd-doc-body > .pd-cards-wrap,.pd-frame .pd-content > .pd-section,.pd-frame .pd-content > .pd-reviews,.pd-frame .pd-content > .pd-videos-wrap,.pd-frame .pd-doc--hub .pd-content > .pd-section-head{grid-column:1 / -1;}
/* a full-span grid item with auto side margins is sized fit-content, not stretched: width:100% lets max-width cap a stretched box */
.pd-frame .pd-content > .pd-reviews,.pd-frame .pd-content > .pd-videos-wrap{width:100%;}
/* grid items do not collapse margins, so headings after a paragraph give back the paragraph's 18px */
.pd-frame .pd-doc .pd-content > h2{margin-top:34px;}
.pd-frame .pd-doc .pd-content > p:first-of-type + h2{margin-top:22px;}
.pd-frame .pd-doc .pd-content > p:first-of-type:not(.pd-section ~ p){font-size:20px;line-height:1.55;color:var(--pd-ink);}
.pd-frame .pd-doc-body > .faq{margin-bottom:8px;}
/* .pd-frame .pd-doc .pd-band{margin-top:48px;} moved to .pd-band in components.css: it only reached
   the 14 pages where the band is a descendant of .pd-doc; the 72 where it is a sibling kept 16px. */
/* band_position: above-faq puts the appointment band between the article and the FAQ. As a direct
   child of .pd-doc-body it misses the .pd-content > .pd-band breakout, so it spans the frame here;
   content follows it now, so it closes with a rule the way .pd-section--paper does. */
.pd-frame .pd-doc-body > .pd-band,.pd-frame .pd-content > .pd-band{grid-column:1 / -1;border-bottom:1px solid var(--pd-hair);}
/* When the article ends with a --pd-paper section the band's own top margin painted a white stripe
   between two identical surfaces, reading as a seam. The band keeps its border-top hairline, which is
   the intended division. */
.pd-frame .pd-doc-body:has(> .pd-content > .pd-section--paper:last-child) > .pd-band{margin-top:0;}

/* ---------- section bands (image-and-text-layout, video-and-text-layout, feature, paragraph-head) ---------- */
.pd-frame .pd-section{padding:64px 24px;margin:0;}
.pd-frame .pd-section--paper{background:var(--pd-paper);border-top:1px solid var(--pd-hair);border-bottom:1px solid var(--pd-hair);}
.pd-frame .pd-section--paper + .pd-section--paper{border-top:0;}
/* media at the top of the band, not floating mid-column beside long copy (spec 2026-09-11-team-financing-hub-lead-design.md) */
.pd-frame .pd-section-in{max-width:1140px;margin:0 auto;display:grid;grid-template-columns:470px minmax(0,1fr);gap:70px;align-items:start;}
.pd-frame .pd-section--media-last .pd-section-in{grid-template-columns:minmax(0,1fr) 470px;}
.pd-frame .pd-section--media-last .pd-section-media{order:2;}
.pd-frame .pd-section--text .pd-section-in{grid-template-columns:minmax(0,760px);justify-content:center;}
.pd-frame .pd-section-media{margin:0;}
.pd-frame .pd-section-media img{width:100%;height:auto;border-radius:8px;display:block;}
.pd-frame .pd-section-video,.pd-frame .pd-section-map{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:var(--pd-ink);}
.pd-frame .pd-section-map{aspect-ratio:16/10;}
.pd-frame .pd-section-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.pd-frame .pd-section-text > .pd-eb{margin-bottom:12px;}
.pd-frame .pd-content .pd-section-text h2{font:400 30px/1.2 var(--pd-display);color:var(--pd-ink);margin:0 0 14px;padding:0;text-wrap:balance;}
.pd-frame .pd-content .pd-section-text h3{font:400 24px/1.25 var(--pd-display);color:var(--pd-ink);margin:0 0 10px;padding:0;}
.pd-frame .pd-content .pd-section-text p + h3,.pd-frame .pd-content .pd-section-text ul + h3{margin-top:22px;}
.pd-frame .pd-content .pd-section-text p{font:400 17px/1.65 var(--pd-body);color:var(--pd-text);margin:0 0 16px;}
.pd-frame .pd-content .pd-section-text ul li{font-size:16.5px;}
.pd-frame .pd-content .pd-section-text > :last-child{margin-bottom:0;}
.pd-frame .pd-content .pd-section-text .pd-btn{margin-top:8px;}
.pd-frame .pd-content .pd-section-head{margin:0 0 8px;}
.pd-frame .pd-content .pd-section-head .pd-eb{margin-bottom:12px;}
.pd-frame .pd-content .pd-section-head h2{margin-top:0;}
.pd-frame .pd-content > .pd-section-head + .pd-section{margin-top:24px;}
/* hub lead: on the service hubs the paragraph-head intro spans the container as two columns, eyebrow and heading
   left, the paragraphs right, so the body opens as wide as the hero and the first band. The left column floats
   and the paragraphs take a left margin, which holds for any number of paragraphs
   (spec 2026-09-11-team-financing-hub-lead-design.md). */
.pd-frame .pd-doc--hub .pd-content > .pd-section-head{width:100%;max-width:1188px;justify-self:center;margin:0 0 40px;padding:8px 24px 0;display:flow-root;}
.pd-frame .pd-doc--hub .pd-section-head .pd-eb,.pd-frame .pd-doc--hub .pd-content .pd-section-head h2{float:left;clear:left;width:calc(41.667% - 35px);}
.pd-frame .pd-doc--hub .pd-content .pd-section-head h2{margin:0;}
.pd-frame .pd-doc--hub .pd-content .pd-section-head p{margin-left:calc(41.667% + 35px);font-size:18px;line-height:1.6;color:var(--pd-ink);}
.pd-frame .pd-doc--hub .pd-content .pd-section-head p:last-child{margin-bottom:0;}
.pd-frame .pd-doc--hub .pd-content > .pd-section-head + .pd-section{margin-top:0;}
@media (max-width:991.98px){
  .pd-frame .pd-doc--hub .pd-content > .pd-section-head{padding:0 20px;margin-bottom:24px;}
  .pd-frame .pd-doc--hub .pd-section-head .pd-eb,.pd-frame .pd-doc--hub .pd-content .pd-section-head h2{float:none;width:auto;}
  .pd-frame .pd-doc--hub .pd-content .pd-section-head h2{margin:0 0 14px;}
  .pd-frame .pd-doc--hub .pd-content .pd-section-head p{margin-left:0;font-size:17px;}
}
@media (max-width:991.98px){
  .pd-frame .pd-section{padding:40px 20px;}
  .pd-frame .pd-section-in,.pd-frame .pd-section--media-last .pd-section-in{grid-template-columns:1fr;gap:24px;}
  .pd-frame .pd-section--media-last .pd-section-media{order:0;}
  .pd-frame .pd-content .pd-section-text h2{font-size:26px;}
}

/* ---------- listings (layout: listing) ---------- */
.pd-frame .pd-listing{padding:8px 24px 8px;}
.pd-frame .pd-cards--3{grid-template-columns:repeat(3,1fr);max-width:806px;margin-left:auto;margin-right:auto;}
.pd-frame .pd-pagination{margin:40px auto 0;display:flex;justify-content:center;}
.pd-frame .pd-pagination .pagination{display:flex;gap:6px;list-style:none;margin:0;padding:0;border:0;border-radius:0;background:transparent;flex-wrap:wrap;justify-content:center;row-gap:6px;}
.pd-frame .pd-pagination .page-item{list-style:none;margin:0;padding:0;}
.pd-frame .pd-pagination .page-link{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 12px;border:1px solid var(--pd-hair);border-radius:4px;font:400 15px/1 var(--pd-body);color:var(--pd-navy);text-decoration:none;background:#fff;}
.pd-frame .pd-pagination .page-link:hover,.pd-frame .pd-pagination .page-link:focus{border-color:var(--pd-navy);color:var(--pd-navy);background:#fff;text-decoration:none;}
.pd-frame .pd-pagination .active .page-link{color:var(--pd-ink);font-weight:700;background:var(--pd-paper);border-color:var(--pd-hair);}
.pd-frame .pd-pagination .disabled .page-link{color:var(--pd-muted);opacity:.6;pointer-events:none;}
@media (max-width:767.98px){
  .pd-frame .pd-cards--3{grid-template-columns:1fr 1fr;}
}
@media (max-width:559.98px){
  .pd-frame .pd-cards--3{grid-template-columns:1fr;}
}

/* ---------- people (staff-cards, team-grid, team-member) ----------
   All in the article measure, so the intro, the headings, the dentist cards and the profile rows share one
   left edge (spec 2026-09-11-team-financing-hub-lead-design.md). The article-list rules in components.css
   skip these lists (they carry a class), so the rows keep their padding and take no dot. */
.pd-frame .pd-staff{margin:8px 0 8px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:28px;}
.pd-frame .pd-staff-card{display:block;}
.pd-frame .pd-staff-card img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:top;border-radius:8px;display:block;}
.pd-frame .pd-staff-text{padding-top:16px;}
.pd-frame .pd-content .pd-staff-card h3{font:400 24px/1.2 var(--pd-display);color:var(--pd-ink);margin:8px 0 8px;padding:0;}
.pd-frame .pd-content .pd-staff-card p{font:400 15.5px/1.55 var(--pd-body);color:var(--pd-text);margin:0 0 12px;}
.pd-frame .pd-people{list-style:none;margin:8px 0 8px;padding:0;}
.pd-frame .pd-person{list-style:none;display:grid;grid-template-columns:160px minmax(0,1fr);gap:26px;align-items:start;padding:26px 0;margin:0;border-top:1px solid var(--pd-hair);}
.pd-frame .pd-people .pd-person:last-child{border-bottom:1px solid var(--pd-hair);}
.pd-frame .pd-person img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:8px;display:block;}
.pd-frame .pd-content .pd-person h3{font:400 24px/1.2 var(--pd-display);color:var(--pd-ink);margin:0 0 6px;padding:0;}
.pd-frame .pd-person .pd-eb{margin-bottom:12px;}
.pd-frame .pd-content .pd-person p{font:400 16px/1.6 var(--pd-body);color:var(--pd-text);margin:0 0 12px;}
.pd-frame .pd-content .pd-person p:last-child{margin-bottom:0;}
@media (max-width:559.98px){
  .pd-frame .pd-staff{grid-template-columns:1fr;}
  .pd-frame .pd-person{grid-template-columns:1fr;gap:16px;}
  .pd-frame .pd-person img{max-width:200px;}
}

/* ---------- financing partners and the offer block ----------
   Cards in the article measure, two abreast, each ending in a block "Apply with …" button pinned to the
   bottom (spec 2026-09-11-team-financing-hub-lead-design.md). */
.pd-frame .pd-partners-wrap{margin:8px 0 8px;padding:0;}
.pd-frame .pd-partners{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.pd-frame .pd-partner{list-style:none;margin:0;background:#fff;border:1px solid var(--pd-hair);border-radius:8px;padding:24px;display:flex;flex-direction:column;gap:16px;}
.pd-frame .pd-partner-logo{height:40px;display:flex;align-items:center;}
.pd-frame .pd-partner-logo img{max-height:34px;max-width:100%;width:auto;height:auto;display:block;}
.pd-frame .pd-partner-logo img.is-badge{max-height:40px;border-radius:4px;}
.pd-frame .pd-partner dl{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.pd-frame .pd-partner dl div{min-width:0;}
.pd-frame .pd-partner dt{font:600 11px/1.4 var(--pd-label);letter-spacing:.14em;text-transform:uppercase;color:var(--pd-muted);margin:0;}
.pd-frame .pd-partner dd{margin:4px 0 0;font:700 15.5px/1.4 var(--pd-body);color:var(--pd-ink);font-variant-numeric:tabular-nums;}
.pd-frame .pd-content .pd-partner .pd-btn{display:block;margin-top:auto;padding:14px 16px;text-align:center;white-space:normal;}
.pd-frame .pd-content .pd-fine{font:400 13.5px/1.5 var(--pd-body);color:var(--pd-muted);margin:18px 0 0;max-width:70ch;}
@media (max-width:599.98px){
  .pd-frame .pd-partners{grid-template-columns:1fr;}
}
.pd-frame .pd-offer{margin:0 0 24px;}
.pd-frame .pd-content .pd-offer-price{font:400 34px/1 var(--pd-display);color:var(--pd-ink);margin:0 0 8px;}
.pd-frame .pd-content .pd-offer-service{font:400 17px/1.5 var(--pd-body);color:var(--pd-text);margin:0 0 10px;}
.floatingEstimator-desktopValueProps-2LreO{display:none !important;}

/* ---------- reviews and video testimonials ---------- */
.pd-frame .pd-reviews{max-width:1140px;margin:8px auto 24px;padding:0 24px;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:0 32px;}
.pd-frame .pd-review{padding:22px 0;margin:0;border-top:1px solid var(--pd-hair);}
.pd-frame .pd-content .pd-review-name{font:700 16px/1.3 var(--pd-body);color:var(--pd-ink);margin:0 0 4px;padding:0;}
.pd-frame .pd-content .pd-review-stars{color:var(--pd-gold);font-size:13px;letter-spacing:.1em;margin:0 0 10px;}
.pd-frame .pd-content .pd-review-text p{font:400 15.5px/1.6 var(--pd-body);color:var(--pd-text);margin:0 0 10px;}
.pd-frame .pd-content .pd-review-source{display:flex;align-items:center;gap:8px;font:600 11.5px/1 var(--pd-label);letter-spacing:.12em;text-transform:uppercase;color:var(--pd-muted);margin:6px 0 0;}
.pd-frame .pd-review-source img{width:18px;height:18px;display:block;}
.pd-frame .pd-videos-wrap{max-width:1140px;margin:8px auto 24px;padding:0 24px;}
.pd-frame .pd-videos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:28px;}
.pd-frame .pd-videos li{list-style:none;margin:0;padding:0;}
.pd-frame .pd-video{margin:0;}
.pd-frame .pd-video-frame{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:var(--pd-ink);}
.pd-frame .pd-video figcaption{font:700 15px/1.4 var(--pd-body);color:var(--pd-ink);margin-top:10px;}

/* ---------- appointment band, frame contexts (the band itself lives in components.css) ----------
   .pd-band-in and .pd-section-in are 1140px CONTENT boxes; .pd-reviews and .pd-videos-wrap were 1140px
   BORDER boxes with 24px of padding, i.e. 1092 of content. Widening the band to 1140 makes that 24px
   per-side seam visible on /reviews/, where the band sits directly under the reviews grid. */
.pd-frame .pd-reviews,.pd-frame .pd-videos-wrap{max-width:1188px;}