/* =============================================================================
   PHONE POLISH (2026-09-22). One shared file, loaded LAST on every funnel page, so phone sizing lives
   in one place instead of five copies. Everything here applies only at phone width (600px and under).

   Measured on the home page at 390x844 before this file (switchboard "Mobile fit" re-measures it):
   - primary buttons 56 to 72px tall in five different widths (190 to 313px)   (Steve 09-22: "the buttons were
     all very big and the spacing was weird")
   - the header phone icon a 13x13px tap target; page toggles 20px tall; footer links 34px
   - two form fields at 15px text (iPhone Safari zooms the page when a field under 16px is tapped)
   - 91px of empty space above the headline; about 67px of padding at the top and bottom of every section
   Targets: one button shape (full width, 48px on one line, about 56px on two); tap targets at least 24px
   (WCAG 2.2, 2.5.8) and 44px where the layout allows (Apple HIG); form text 16px; 48px section padding.
   ============================================================================= */
@media (max-width: 600px) {

  /* ---- one button shape ---- */
  .cta-primary{display:flex;width:100%;max-width:440px;justify-content:space-between;align-items:center;gap:12px;padding:11px 18px;min-height:48px;text-align:left;box-sizing:border-box;}
  .cta-primary .cta-stack{gap:2px;}
  .cta-primary .cta-sub{font-size:9.5px;}
  .cta-primary .arrow{flex:none;}
  .page-header .cta-primary,.visit-nav .cta-primary,.deep-nav .cta-primary{display:inline-flex;width:auto;max-width:none;min-height:44px;padding:0 16px;justify-content:center;}   /* buttons inside a top bar stay compact */
  .q-pay-btn,.q-call-btn{min-height:48px;padding-top:12px;padding-bottom:12px;}
  .q-next{min-height:48px;}

  /* ---- tap targets ---- */
  .page-header-phone{min-width:44px;min-height:44px;justify-content:center;}
  .page-header-left > a:first-child,.deep-nav-left > a:first-child,.visit-nav-left > a:first-child{display:inline-flex;align-items:center;min-height:44px;}
  .page-toggle-btn,.deep-toggle-btn{display:inline-block;padding-top:9px;padding-bottom:9px;}
  body .footer-col a{padding-top:11px;padding-bottom:11px;}   /* "body" outranks page styles placed after this file */
  body .footer-col h4 + a{margin-top:-11px;}   /* QC 09-22: the tap padding pushed each link column 11px below the address column; this lines the first rows up */
  body .page-header-inner > a:first-child{display:inline-flex;align-items:center;min-height:44px;}
  .foot-links a{display:inline-block;padding-top:11px;padding-bottom:11px;}
  .who-more summary,.tlog-more summary,.faq-item summary{min-height:44px;}
  .faq-item summary{padding-right:4px;}   /* QC 09-22: the turned chevron poked 2px past the rule line */

  /* ---- form text: 16px so iPhone does not zoom ---- */
  .q-other-input,.q-textarea,.q-specific input,.q-fields input{font-size:16px;}

  /* ---- section rhythm ---- */
  .proof,.zirconia,.pricing,.who,.gallery,.faq,.walkin-sec,.tiers,.np-sec,.trip{padding-top:48px;padding-bottom:48px;}   /* .trip added 09-22: the switchboard's layout check found 76px on the visit guide */
  .next-step{padding-top:56px;padding-bottom:56px;}
  .deep{padding-top:28px;padding-bottom:48px;}
  .deep-nav{margin-bottom:24px;}
  .deep-copy{gap:16px;}
  .hero-fineprint{margin-top:4px !important;}
}



/* -----------------------------------------------------------------------------
   2026-09-23, round two. Steve on a phone again, four things.
   ----------------------------------------------------------------------------- */
@media (max-width: 600px) {

  /* The double gold rule. The active section tab already draws a gold underline
     directly above the headline, so the 56px rule reads as a second bar 30px
     below the first. One line is a mark; two stacked is a stutter. */
  .deep-copy::before{display:none;}
  .deep-copy .rule{display:none;}

  /* "FULL-ARCH DENTAL IMPLANTS (ALL-ON-X)" was competing with the headline it
     introduces. It stays, because the tab above it only says the jargon, but it
     goes back to being a kicker. */
  .deep h1 .h1-lead{font-size:11px;font-weight:500;letter-spacing:.1em;opacity:.78;margin-bottom:10px;}

  /* The Yomi photo. At 2:1 it was 195px tall on a phone and the gold badge sat
     on a third of it, so the robot never read. Taller frame, quieter badge. */
  .yomi-media{aspect-ratio:4/3;}
  .yomi-media img{object-position:center 30%;}
  .yomi-badge{left:14px;bottom:12px;font-size:12.5px;padding:6px 12px;}

  /* The thank-you and booking banners, nudged right so both people are in frame. */
  .conf::before{background-position:34% 38%;}
  .hop::before{background-position:34% 38%;}
}

/* -----------------------------------------------------------------------------
   PHONE TYPE SCALE (2026-09-23). Steve: "the sub-heading is too big compared to
   the header" and "text size should be slightly smaller so we have more visible
   language on screen in a single scroll."

   Measured at 390px before this block, home page alone: paragraphs rendering at
   16, 15.5, 14.5, 14, 13.5, 13, 12.5, 12, 11.5 and 10.5px. Ten sizes, no scale.
   Headings at 30, 27, 26, 24 and 20.

   This collapses it to five steps. Body drops 16 to 15 with a tighter leading,
   which is about 8% more copy per screen across the 35 body paragraphs on the
   home page. Form fields are deliberately untouched: anything under 16px makes
   iPhone Safari zoom the page when the field is tapped.
   ----------------------------------------------------------------------------- */
@media (max-width: 600px) {

  /* step 1, the anchor */
  h1{font-size:30px !important;line-height:1.14 !important;}

  /* step 2 */
  h2, .h2{font-size:22px !important;line-height:1.2 !important;}
  h3{font-size:18px !important;line-height:1.25 !important;}

  /* step 3, the subheading under a headline. was 15.5/1.55 against a 30px h1 */
  .deck, .lead, .desk-lead, .known-intro, .tourism-hero-lead{font-size:14.5px !important;line-height:1.5 !important;}

  /* step 4, body copy */
  p, li{font-size:15px !important;line-height:1.6 !important;}

  /* step 5, notes and small print. Re-asserted after the body rule above, so the
     things that are meant to be quiet do not get pushed up to 15px with it. */
  .who-bio, .who-stack p, .body, .walkin-facts, .pc-step2-body{font-size:14px !important;line-height:1.55 !important;}
  .tlog-guide, .pc-invest-note{font-size:13px !important;line-height:1.5 !important;}
  .attr, .pc-note, .pricing-cta-note, .roh-c-txt, .disc, .fine, .hero-fineprint{font-size:11.5px !important;line-height:1.45 !important;}
  .quotes-disclaimer{font-size:10.5px !important;line-height:1.4 !important;}

  /* never shrink what a thumb types into. This one is a floor, not a preference. */
  input, select, textarea{font-size:16px !important;}
}



/* 2026-09-23: second instance of the same defect Steve flagged on the Yomi photo.
   The traditional-patient card's photo strip is 32:9, which is 97px tall on a phone,
   and the gold badge wrapped to two lines across 60 of them. Taller frame, one-line badge. */
@media (max-width: 600px) {
  .pc-soft-media{aspect-ratio:3/2 !important;}
  .pc-soft-media img{object-position:center 30% !important;}
  .pc-soft-badge{font-size:12px !important;padding:6px 12px !important;left:12px !important;bottom:12px !important;white-space:nowrap !important;}
}

/* =============================================================================
   ONE QUESTION, ONE SCREEN (2026-09-23, design preview). Steve: every question
   should fit a phone without scrolling to see the answers.

   Measured at 390x844 before this block: the card started 214px down the page and
   question 1 ran 996px, so its last answers sat 366px below the fold. Question 3
   was over by 118. Two changes: the page header above the card gives back its
   space once the questions are open, and an answer row goes from 102px to about 70.
   The last screen is deliberately exempt. It is two priced choices and the legal
   line, not a question, and squeezing it would hide the thing being chosen.
   ============================================================================= */
@media (max-width: 600px) {
  .apply-desk .desk-head h1{font-size:24px !important;line-height:1.1 !important;}
  .apply-desk .desk-lead{display:none !important;}   /* the 01 of 05 counter already says how long it is */
  .apply-desk .desk-head{margin-bottom:14px !important;}
  .desk-main .qual-card, .qual-card{padding:20px 16px !important;}
  .q-step h3{font-size:18px !important;line-height:1.18 !important;}
  .q-help{font-size:13px !important;line-height:1.4 !important;margin-bottom:10px !important;}
  .q-options{gap:6px !important;}
  .q-option{padding:10px 13px !important;font-size:13.5px !important;line-height:1.32 !important;border-radius:12px !important;gap:10px !important;}
  .qual-progress{margin-bottom:12px !important;}
  .qual-top{margin-bottom:10px !important;}
}

/* =============================================================================
   FLUID TYPE SCALE (2026-09-23). Replaces the two fixed-pixel blocks that shipped
   earlier today. Steve: "the splash screen text is now super small on desktop and
   mobile. I wish it were closer to the way it was before, but more flexible."

   Two things were wrong. The scale was written as fixed pixels per breakpoint, so
   it snapped between two sizes instead of breathing. And the rule for a page's
   lead paragraph also caught .lead inside the entry splash, which was never a
   paragraph: it is sized at .62em of the splash headline, so slamming it to a
   pixel value shrank it to a third of what it should be.

   One scale now, from phone to desktop, with the splash left to size itself.
   ============================================================================= */

/* 2026-09-23, Steve: "I want the font size changes to the apply page the same for
   similar sized fonts across the entire site, minus the header/hero."
   The application card landed at question headings 16.5 to 21, help text 12 to 13.5,
   body 13 to 14.5 and notes at 11. The steps below are those same numbers, applied
   everywhere. h1 is untouched on purpose: heroes and the entry splash keep their size. */
h1{font-size:clamp(30px, 5.2vw, 54px) !important;line-height:1.1 !important;}   /* hero, unchanged */
h2, .h2{font-size:clamp(20px, 2.6vw, 28px) !important;line-height:1.18 !important;}
h3{font-size:clamp(16.5px, 1.9vw, 21px) !important;line-height:1.22 !important;}

.deck, :not(.roh-gate-confirm) > .lead, .desk-lead, .known-intro, .tourism-hero-lead,
.belief-lead, .belief-close{font-size:clamp(13px, 1.2vw, 15px) !important;line-height:1.55 !important;}

p, li{font-size:clamp(13.5px, 1.05vw, 14.5px) !important;line-height:1.6 !important;}

.who-bio, .who-stack p, .body, .walkin-facts, .pc-step2-body{font-size:clamp(13px, 1vw, 14px) !important;line-height:1.55 !important;}
.tlog-guide, .pc-invest-note, .roh-c-txt{font-size:clamp(12px, .95vw, 12.5px) !important;line-height:1.5 !important;}
.attr, .pc-note, .pricing-cta-note, .disc, .fine, .hero-fineprint{font-size:clamp(11px, .85vw, 11.5px) !important;line-height:1.45 !important;}
.quotes-disclaimer{font-size:clamp(10.5px, .85vw, 11px) !important;line-height:1.44 !important;}

/* the entry splash sizes itself: its lead is .62em of its own headline, not body copy */
.roh-gate-confirm{font-size:clamp(26px, 4vw, 46px) !important;line-height:1.16 !important;}
.roh-gate-confirm .lead{font-size:.62em !important;line-height:1.2 !important;}

/* never shrink what a thumb types into: under 16px, iPhone Safari zooms the page */
input, select, textarea{font-size:16px !important;}

/* =============================================================================
   SCROLL RHYTHM (2026-09-23, restored). This block was written this morning and
   then deleted by accident when the type scale was rewritten. Restored and
   re-verified against the live address, not localhost.

   Measured at 390x844 before it: the fixed header wrapped onto three rows, 106px,
   and the Biological/All-on-X toggle added 33px under it. 139px of an 844px screen
   gone at every scroll position. A doctor portrait ran 344x459, over half a screen
   for a photo that supports a paragraph.
   ============================================================================= */
@media (max-width: 600px) {
  .page-header-inner{height:56px !important;flex-wrap:nowrap !important;row-gap:0 !important;padding:0 18px !important;gap:12px !important;}
  .page-header-left{display:flex !important;align-items:center !important;gap:12px !important;min-width:0 !important;}
  .page-header .logo{height:15px !important;}   /* 178px wide left 12px of air beside the phone icon and the button; 150 gives it room */
  .page-header .cta-primary{padding:10px 16px !important;font-size:11px !important;letter-spacing:.1em !important;min-height:44px !important;}
  .page-header-phone{width:40px !important;height:40px !important;justify-content:center !important;}

  /* the bar's copy of the section toggle is redundant on a phone: the hero carries
     the same two links in .deep-nav, and that one scrolls away like nav should */
  .page-header .page-toggle{display:none !important;}

  /* supporting portraits, half what they were */
  .who-photo{aspect-ratio:4/3 !important;max-width:none !important;margin-bottom:16px !important;}
  .who-photo img{object-position:center 18% !important;}

  /* the hero stack on the dark pages */
  .deep{padding-top:64px !important;padding-bottom:clamp(40px,6vh,64px) !important;}
  .deep-nav{margin-bottom:22px !important;}
  .deep-copy{gap:14px !important;}

  /* the legal line stops competing with the button it sits under */
  .hero-fineprint{margin-top:10px !important;opacity:.6 !important;}

  /* the double gold rule: the active tab already draws one right above the headline */
  .deep-copy::before{display:none !important;}
  .deep-copy .rule{display:none !important;}

  /* the All-on-X kicker goes back to being a kicker */
  .deep h1 .h1-lead{font-size:11px !important;font-weight:500 !important;letter-spacing:.1em !important;opacity:.78 !important;margin-bottom:10px !important;}
}

/* 2026-09-23, from Steve's screenshots: the number was still rendering inside a
   40px icon slot on every page, so it wrapped to two lines and ran off the right
   edge. The icon is the tap target on a phone; the number belongs to the call page. */
@media (max-width: 600px) {
  .page-header-phone span{display:none !important;}
  .page-header-phone{width:44px !important;height:44px !important;min-width:44px !important;flex:none !important;gap:0 !important;}
  .page-header-actions{gap:10px !important;flex:none !important;}
  .page-header-inner{overflow:hidden !important;}

  /* the pinned Continue on screen 1 was sitting on top of the last answers.
     The gradient behind it is 96px tall, so the list has to clear that much. */
  .q-step[data-step="1"] .q-options{padding-bottom:0 !important;}
  /* 32px of air between the last answer and Continue. It was 8. */
  .q-nav{margin-top:32px !important;padding-top:0 !important;}
}

/* 2026-09-23, Steve: "all the text and boxes still feel so big on mobile, like it's
   scaled up too much." Measured at 390: answer rows were 62 to 75px tall carrying
   13.5px text, the card had 20px of padding and the heading sat at 18. This takes
   the whole question card down about 15% so it reads at phone scale, not tablet. */
@media (max-width: 600px) {
  .qual-card, .desk-main .qual-card{padding:16px 14px !important;}
  .q-step h3{font-size:16.5px !important;line-height:1.2 !important;margin-bottom:4px !important;}
  .q-help{font-size:12px !important;line-height:1.38 !important;margin-bottom:12px !important;}
  .q-options{gap:5px !important;}
  .q-option{min-height:46px !important;padding:8px 12px !important;font-size:13px !important;line-height:1.3 !important;border-radius:10px !important;gap:9px !important;}
  .q-option .marker{width:15px !important;height:15px !important;flex:none !important;}
  .q-howheard-finish .q-option{min-height:42px !important;}
  .qual-top{margin-bottom:8px !important;}
  .qual-count{font-size:10px !important;letter-spacing:.16em !important;}
  .qual-progress{margin-bottom:10px !important;height:2px !important;}
  .q-next, .q-back{font-size:11.5px !important;}
  .q-next{padding:13px 22px !important;min-height:46px !important;}
  .q-fields input{min-height:46px !important;padding:11px 13px !important;}
  .q-fields label{font-size:10px !important;margin-bottom:4px !important;}
  .q-fields > div{margin-bottom:11px !important;}
  .q-ack span{font-size:12.5px !important;line-height:1.45 !important;}
  .q-nav{margin-top:24px !important;min-height:0 !important;}
  #qualifier{min-height:480px !important;}
}

/* =============================================================================
   APPLICATION DENSITY, 2026-09-23. Steve, on the desktop screenshot: "I want to
   see more on desktop and mobile", arrows at the contact fields, and "all too big"
   at the right rail.

   Measured at 1440 before this: each contact field occupied 78px (a 55px input,
   a 17px label and the gap), the rail ran 16px/25.9 line-height and 574px tall,
   the help line under each question was 16px. That is tablet scale on a laptop.
   This block applies at every width, unlike the phone-only rules above it.
   ============================================================================= */
.q-fields > div{margin-bottom:12px !important;}
.q-fields input{min-height:44px !important;padding:10px 13px !important;font-size:16px !important;}
.q-fields label{font-size:10px !important;letter-spacing:.16em !important;margin-bottom:4px !important;}
.q-step h3{font-size:clamp(16.5px,1.9vw,21px) !important;line-height:1.2 !important;}
.q-help{font-size:clamp(12px,1.05vw,13.5px) !important;line-height:1.45 !important;}
.desk-lead{font-size:clamp(12.5px,1.1vw,14.5px) !important;line-height:1.5 !important;}

/* the right rail: it is supporting copy, not body copy */
.desk-rail{font-size:13px !important;}
.desk-rail p, .desk-rail li, .desk-rail span, .desk-rail div{font-size:13px !important;line-height:1.45 !important;}
.desk-rail h3, .desk-rail h4, .desk-rail strong{font-size:13px !important;}
.desk-rail [class*="eyebrow"], .desk-rail [class*="label"]{font-size:10px !important;letter-spacing:.16em !important;}
.desk-rail > *{padding:14px 16px !important;}
.desk-rail{gap:10px !important;}

/* 2026-09-23, Steve: the review section headline is too small on a laptop and that
   section needs to carry weight. It was sitting at the same 28px as every other
   section heading. This lifts only that one headline, and only from tablet width up,
   so the phone stack is untouched. */
@media (min-width: 861px) {
  .proof-head h2, .proof h2{font-size:clamp(30px, 3.1vw, 42px) !important;line-height:1.12 !important;letter-spacing:-.018em !important;}
}


/* TAP TARGET (2026-09-24). The "Get directions" link in a /new-patients/ FAQ answer
   rendered 21px tall, under the 24px floor in WCAG 2.5.8, and the switchboard's
   Mobile-fit row failed on it. Padding lifts it without moving anything around it. */
a[data-beacon="np-directions"]{display:inline-block;padding:10px 0;min-height:44px;line-height:1.45;box-sizing:border-box;}   /* 44px tap floor, 2026-09-24 */