/* V1.5.26: shared surfaces and appointment cards; explicit roles in templates. */
:root { --muted: #526677; --praxis-pale: #eff8fb; --praxis-soft: #f7fbfc; }
.praxis-surface { color: #243746; }
.praxis-surface :where(div,article,aside,figure) { min-width: 0; }
.praxis-surface :is(h1,h2,h3,p,li) { overflow-wrap: break-word; hyphens: auto; }
.praxis-surface :is(h1,h2,h3) { min-width: 0; max-width: 100%; }
.praxis-surface .actions { flex-wrap: wrap; }
.praxis-surface.praxis-surface-white { background: #fff; }
.praxis-surface.praxis-surface-pale { background: var(--praxis-pale); }
.praxis-surface.praxis-surface-soft { background: var(--praxis-soft); }
.praxis-surface:is(.section,.team-section,.gkv-info-section) {
 max-width: none; margin-inline: 0;
 padding-inline: max(32px,calc((100% - 1176px)/2));
}
.praxis-surface:is(.section,.diagnostics,.oct-section,.eidon-section,.function-section,
 .biometry-section,.explain-section,.experience-section,.profile-section,.focus-section,
 .path-section,.exam-section,.risk-section,.interval-section,.lens-section,.nano-section,
 .experience,.slt-section,.approach-section,.topics-section,.laser-section,.operative-section,
 .development-section,.adult-section,.private-section,.process-section,.bring-section,
 .practice-section,.team-section,.visit-section,.rooms-section,.values-section,.doctors-section,
 .access-section,.routes-section,.signals-section,.firstaid-section,.billing-section,
 .services-section,.faq-section,.faq,.steps-section,.limits,.coverage-section,.aftercare) {
 padding-top: 80px; padding-bottom: 80px;
}
.praxis-surface:is(.diagnostics,.explain-section) { min-height: 0; }
.praxis-surface .explain-copy { padding-block: 0; }
.praxis-surface.explain-section.preview-no-photo .explain-copy { padding-block: 0; }
.praxis-surface :is(h1,h2,h3,blockquote) { color: #243746; }
.praxis-surface p:not(.eyebrow,.card-tag,.price,.range),
.praxis-surface :is(.sub-diagnostics,.diagnostic-note,.explain-steps span,
 .profile-facts span,.experience-card p,.diagnostic-list p,.diagnostic-grid p) {
 color: var(--muted) !important;
}
.praxis-surface :is(.eyebrow,.eyebrow.light,.card-tag,.text-link,.experience-number) { color: #1266b1; }
.praxis-surface :is(.sub-diagnostics b,.care-number,.step-number,.fact strong) { color: #1266b1; }
.praxis-surface:is(.key-message,.important,.schedule-banner,.principles,.facts) span { color: var(--muted); }
.praxis-surface:is(.key-message,.important) > b { color: #1266b1; }
.praxis-surface:is(.limits,.position-section) strong { color: #243746; }
.praxis-surface .diagnostic-note { background: #fff; border-left: 3px solid #1266b1; }
.praxis-surface :is(.diagnostic-cards article,.diagnostic-grid article,.diagnostic-list article,
 .experience-card,.exam-card,.firstaid-card,.focus-card,.doctor-card,.biometry-facts article) {
 background: #fff; border: 1px solid #dce8ee;
}
.praxis-surface:is(.key-message,.schedule-banner,.principles,.facts) { border-block: 1px solid #dce8ee; }
.praxis-surface.gkv-strip { border-color: #dce8ee; }
.praxis-surface.gkv-strip :is(strong,.text-link) { color: #1266b1; }
.praxis-surface .gkv-key { background: #fff; }
.praxis-surface .gkv-key p { color: #243746 !important; }
.praxis-surface.content-section { padding: 40px 32px; margin-bottom: 28px; border: 1px solid #dce8ee; border-radius: 8px; }
.praxis-surface.position-section { border-block: 1px solid #dce8ee; }
/* Whitespace and hierarchy match the already approved booking cards. */
.praxis-surface.contact-section {
 padding-block: 80px; gap: 20px; align-items: stretch;
 grid-template-columns: 1.08fr .92fr;
}
.praxis-surface .praxis-appointment-card {
 background: #fff; border: 1px solid #dce8ee; border-radius: 8px;
 padding: 42px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start;
}
.praxis-surface .praxis-appointment-card.featured { background: #eff8fb; border-color: #bde4ee; }
.praxis-surface .praxis-appointment-card :is(h2,h3) {
 font-size: 29px; line-height: 1.2; letter-spacing: -.02em;
}
.praxis-surface .praxis-appointment-card p:not(.eyebrow,.card-tag) { font-size: 16px; line-height: 1.7; }
.praxis-surface .praxis-appointment-card .actions { margin-top: auto; padding-top: 18px; flex-wrap: wrap; }
.praxis-surface .praxis-appointment-card > .outline-button { margin-top: auto; }
.praxis-surface .praxis-appointment-card .gkv-actions { margin-top: auto; }
.praxis-surface.contact-section .contact-intro { max-width: 850px; margin: 0 auto 24px; text-align: center; }
.praxis-surface.contact-section .contact-intro h2 { font-size: clamp(32px,4.5vw,52px); line-height: 1.12; }
.praxis-surface.contact-section .private-direct-contact { border-top-color: #dce8ee; }
.praxis-surface.contact-section .private-direct-contact :is(h3,.private-direct-phone) { color: var(--muted); }
.praxis-surface.contact-section .private-direct-contact p { color: var(--muted) !important; }
.praxis-surface.contact-section .booking-options { height: auto; }
.praxis-surface.contact-section .booking-option { padding: 28px; }
.praxis-surface.contact-section .booking-option h3 { font-size: 23px; }
.praxis-surface.contact-section .booking-option p { font-size: 14px; }
.praxis-surface.contact-section .booking-option .button { margin-top: auto; }
.praxis-surface :is(.button,.outline-button) {
 max-width: 100%; padding: 12px 20px; text-align: center; line-height: 1.5;
 height: auto; min-height: 46px; white-space: normal;
}
.praxis-surface .button { background: #1266b1; color: #fff; border: 1px solid #1266b1; }
.praxis-surface .outline-button { background: #fff; color: #1266b1; border: 1px solid #1266b1; }
.praxis-surface .button:hover { background: #0b4e8d; color: #fff; border-color: #0b4e8d; }
.praxis-surface .outline-button:hover { background: #eff8fb; color: #0b4e8d; }
.praxis-surface a:focus-visible { outline: 3px solid #1266b1; outline-offset: 4px; }
/* Preserve warning colors, emergency actions and diagnostic image content. */
.warning.praxis-medical-warning { background: #fff5f4; color: #243746; border-block: 1px solid #eccfcb; }
.warning.praxis-medical-warning strong { color: #a33434; }
.warning.praxis-medical-warning span { color: #526677; }
.warning.praxis-medical-warning a { color: #1266b1; }
.praxis-surface .alert-button { color: #fff; }
.praxis-surface .firstaid-card strong { color: #b73333; }
.praxis-surface .acute-guidance { border-color: #dce8ee; }
.praxis-surface .acute-guidance a { color: #1266b1; }
/* Image and price must not compete for a narrow horizontal column. */
.hero > .hero-card:has(.praxis-check-price) {
 display: flex; flex-direction: column; align-items: stretch; gap: 22px; padding: 32px;
}
.hero-card:has(.praxis-check-price) > figure.preview-service-uniform {
 width: 100% !important; max-width: none !important; margin: 0 !important;
}
.praxis-check-price { padding: 28px; width: 100%; overflow-wrap: normal; }
.praxis-check-price .eyebrow { font-size: 11px; overflow-wrap: normal; letter-spacing: .1em; }
.praxis-check-booking-card {
 grid-column: 1/-1; display: grid; grid-template-columns: 1fr auto; gap: 36px;
 align-items: center; padding: 42px; background: #eff8fb; border: 1px solid #bde4ee; border-radius: 8px;
}
.praxis-surface.cta { padding-block: 80px; }
.praxis-booking-card > p:not(.eyebrow), .praxis-booking-note, .praxis-booking-phone span,
.praxis-booking-phone-link, .praxis-booking-heading > p:not(.eyebrow) { color: #526677; }
@media(max-width:980px) {
 .praxis-surface .service-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .praxis-surface.contact-section { grid-template-columns: minmax(0,1fr); }
 .praxis-surface.contact-section .contact-intro { grid-column: 1; }
}
@media(max-width:760px) {
 .praxis-surface .service-grid { grid-template-columns: minmax(0,1fr); }
 .praxis-surface:is(.section,.team-section,.gkv-info-section) { padding-inline: 22px; }
 .praxis-surface:is(.section,.diagnostics,.oct-section,.eidon-section,.function-section,
 .biometry-section,.explain-section,.experience-section,.profile-section,.focus-section,
 .path-section,.exam-section,.risk-section,.interval-section,.lens-section,.nano-section,
 .experience,.slt-section,.approach-section,.topics-section,.laser-section,.operative-section,
 .development-section,.adult-section,.private-section,.process-section,.bring-section,
 .practice-section,.team-section,.visit-section,.rooms-section,.values-section,.doctors-section,
 .access-section,.routes-section,.signals-section,.firstaid-section,.billing-section,
 .services-section,.faq-section,.faq,.steps-section,.limits,.coverage-section,.aftercare) {
  padding-top: 54px; padding-bottom: 54px;
 }
 .praxis-surface.contact-section,.praxis-surface.cta { padding: 54px 22px; }
 .praxis-surface .praxis-appointment-card { padding: 32px 25px; }
 .praxis-surface .praxis-appointment-card :is(h2,h3) { font-size: 27px; }
 .praxis-surface.content-section { padding: 28px 20px; }
 .praxis-check-booking-card { grid-template-columns: minmax(0,1fr); padding: 32px 25px; gap: 20px; }
 .hero > .hero-card:has(.praxis-check-price) { padding: 24px 22px; }
}

/* V1.5.27: quieter typography, editorial detail groups and proportional spacing.
   Content order, booking destinations, original images and surface roles are retained. */
.praxis-surface :is(h1,h2,h3,h4,p,li) {
 hyphens: none; -webkit-hyphens: none;
 overflow-wrap: normal; word-break: normal;
}
.praxis-surface :is(a,address) { overflow-wrap: anywhere; }
.praxis-surface h1 {
 font-size: clamp(36px,4.3vw,56px); line-height: 1.1;
 font-weight: 600; letter-spacing: -.032em; text-wrap: balance;
}
.praxis-surface h2 {
 font-size: clamp(30px,3.3vw,42px); line-height: 1.16;
 font-weight: 600; letter-spacing: -.025em; text-wrap: balance;
}
.praxis-surface h3 {
 font-size: 23px; line-height: 1.25; font-weight: 600; letter-spacing: -.015em;
}
.praxis-surface :is(.eyebrow,.card-tag) { letter-spacing: .1em; line-height: 1.5; }
.praxis-surface .lead { font-size: 19px; line-height: 1.7; }
.praxis-surface .section-heading { max-width: 800px; margin-bottom: 34px; }
.praxis-surface .section-heading.centered { margin-bottom: 38px; }
.praxis-surface .section-heading > p:not(.eyebrow) { font-size: 17px; }
.praxis-surface:is(.section,.diagnostics,.oct-section,.eidon-section,.function-section,
 .biometry-section,.experience-section,.profile-section,.focus-section,
 .path-section,.exam-section,.risk-section,.interval-section,.lens-section,.nano-section,
 .experience,.slt-section,.approach-section,.laser-section,.operative-section,
 .development-section,.adult-section,.private-section,.process-section,.bring-section,
 .practice-section,.team-section,.visit-section,.rooms-section,.values-section,.doctors-section,
 .access-section,.routes-section,.signals-section,.firstaid-section,.services-section) {
 padding-top: 64px; padding-bottom: 64px;
}
.praxis-surface:is(.explain-section,.topics-section,.billing-section,.faq-section,.faq,
 .steps-section,.limits,.coverage-section,.aftercare) { padding-block: 52px; }
.praxis-surface:is(.key-message,.important) { padding-block: 20px; }
.praxis-surface .hero-copy,.praxis-surface .sub-hero-copy { padding-top: 68px; padding-bottom: 56px; }
.praxis-surface.sub-hero.preview-no-photo .sub-hero-copy { padding-top: 64px; padding-bottom: 56px; }
.praxis-surface .trust { margin-top: 32px; }
.praxis-surface.legal-hero h1 { font-size: clamp(36px,4vw,48px); }
.praxis-surface .legal-card h2 { font-size: 25px; line-height: 1.25; }
/* The practice's exceptional organisational notice stays deliberately red. */
.praxis-surface.gkv-strip {
 background: #fff2f3; border-color: #edccd0; padding-block: 20px;
}
.praxis-surface.gkv-strip p { font-size: 16px; color: #243746 !important; }
.praxis-surface.gkv-strip :is(strong,.text-link) { color: #9b343d; }
.praxis-surface.gkv-strip .text-link { font-size: 14px; }
.praxis-surface.gkv-strip .text-link:hover { color: #77232b; text-decoration: underline; }
/* Portraits support the physician's introduction instead of appearing as a small icon. */
.praxis-surface.sub-hero > .preview-original-photo[data-photo-kind="portrait"] {
 width: 280px; max-width: calc(100% - 64px); margin: 32px auto;
}
.praxis-surface .doctor-card > .preview-original-photo { width: 190px; margin-top: 26px; }
.praxis-surface .doctor-card > div:last-child { padding: 28px; }
.praxis-surface .doctor-card h3 { font-size: 27px; }
.praxis-surface .focus-copy { padding: 26px; }
.praxis-surface .focus-copy h3 { font-size: 25px; }
.praxis-surface .service-grid article > div:last-child { padding: 26px 22px; }
.praxis-surface .service-grid h3 { font-size: 23px; }
/* Informative details are open groups with a quiet rule. Choice, pricing, warning,
   physician and booking cards retain their more explicit boundaries. */
.praxis-surface :is(.diagnostic-grid,.diagnostic-list,.exam-grid,.overview-grid,
 .function-grid,.biometry-facts,.nano-facts,.profile-facts,.experience-grid,
 .approach-grid,.risk-list) > :is(article,div) {
 background: transparent; border: 0; border-top: 1px solid #bfd5df;
 border-radius: 0; padding: 20px 0 12px; box-shadow: none;
}
.praxis-surface :is(.diagnostic-grid,.diagnostic-list,.exam-grid,.overview-grid,
 .function-grid,.biometry-facts,.nano-facts,.profile-facts,.experience-grid,
 .approach-grid,.risk-list) { column-gap: 30px; row-gap: 16px; }
.praxis-surface :is(.diagnostic-grid,.diagnostic-list,.exam-grid,.overview-grid,
 .experience-grid) h3 { font-size: 21px; }
.praxis-surface :is(.diagnostic-grid,.diagnostic-list,.exam-grid,.overview-grid,
 .experience-grid) p { font-size: 15px; line-height: 1.7; }
.praxis-surface .profile-facts span { font-size: 14px; }
.praxis-surface :is(.steps,.path-grid) > :is(article,div) {
 background: transparent; border: 0; border-top: 2px solid #b8d3e1;
 border-radius: 0; box-shadow: none; padding: 20px 0 8px;
}
.praxis-surface .benefit-row { padding-inline: 0; gap: 24px; }
.praxis-surface .benefit-row span {
 border: 0; border-top: 1px solid #bfd5df; border-radius: 0;
 background: transparent; box-shadow: none; padding: 18px 0 0; font-size: 14px;
}
.praxis-surface .benefit-row i { color: #1266b1; }
/* Compact appointments without changing the approved hierarchy of the two routes. */
.praxis-surface:is(.praxis-booking-section,.contact-section,.cta) { padding-block: 60px; }
.praxis-surface .praxis-booking-heading { max-width: 850px; margin-bottom: 32px; }
.praxis-surface .praxis-booking-heading h2,
.praxis-surface.contact-section .contact-intro h2 { font-size: clamp(30px,3.3vw,42px); line-height: 1.16; }
.praxis-surface :is(.praxis-booking-card,.praxis-appointment-card) { padding: 32px; }
.praxis-surface :is(.praxis-booking-card,.praxis-appointment-card) :is(h2,h3) {
 font-size: 26px; line-height: 1.25; letter-spacing: -.02em;
}
.praxis-surface .praxis-booking-card > p:not(.eyebrow) { min-height: 0; margin-bottom: 14px; }
.praxis-surface .praxis-booking-note { margin: 14px 0 18px; }
.praxis-surface .praxis-booking-phone { min-height: 62px; padding-top: 12px; }
.praxis-surface .praxis-booking-number { font-size: 30px; top: 18px; right: 22px; }
.praxis-surface .praxis-booking-card > .button { margin-bottom: 20px; }
.praxis-surface .praxis-check-booking-card { padding: 32px; }
.praxis-surface .praxis-check-booking-card h2 { font-size: 32px; }
.praxis-surface .praxis-appointment-card .booking-option h3 { font-size: 23px; }
@media(min-width:981px) {
 .praxis-surface.hero:has(.hero-photo) { grid-template-columns: .96fr 1.04fr; }
 .praxis-surface.hero:has(.hero-photo) .hero-copy { padding-right: 40px; }
 .praxis-surface.private-section h2 { max-width: 30ch; font-size: 44px; }
 .praxis-surface.sub-hero:has([data-photo-kind="portrait"]) { grid-template-columns: 1.12fr .88fr; }
}
@media(max-width:760px) {
 .praxis-surface h1 { font-size: clamp(32px,7.8vw,44px); line-height: 1.12; }
 .praxis-surface h2 { font-size: 30px; line-height: 1.2; }
 .praxis-surface h3 { font-size: 22px; }
 .praxis-surface .lead { font-size: 17px; }
 .praxis-surface.costs h2 { font-size: clamp(21px,6.6vw,30px); }
 /* Compound terms in confined legal/detail cards may wrap on phones. Large
    promotional and introductory headings retain complete, unhyphenated words. */
 .praxis-surface .legal-card h2,
 .praxis-surface :is(.focus-copy,.focus-card,.diagnostic-grid,.price-card,.private-card,.team-card,.booking-option) h3 {
  hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word;
 }
 .praxis-surface:is(.section,.diagnostics,.oct-section,.eidon-section,.function-section,
 .biometry-section,.experience-section,.profile-section,.focus-section,.path-section,
 .exam-section,.risk-section,.interval-section,.lens-section,.nano-section,.experience,
 .slt-section,.approach-section,.laser-section,.operative-section,.development-section,
 .adult-section,.private-section,.process-section,.bring-section,.practice-section,
 .team-section,.visit-section,.rooms-section,.values-section,.doctors-section,
 .access-section,.routes-section,.signals-section,.firstaid-section,.services-section,
 .explain-section,.topics-section,.billing-section,.faq-section,.faq,.steps-section,
 .limits,.coverage-section,.aftercare) { padding-block: 44px; }
 .praxis-surface .hero-copy,.praxis-surface .sub-hero-copy,
 .praxis-surface.sub-hero.preview-no-photo .sub-hero-copy { padding-top: 44px; padding-bottom: 36px; }
 .praxis-surface:is(.praxis-booking-section,.contact-section,.cta) { padding-block: 46px; }
 .praxis-surface .section-heading { margin-bottom: 28px; }
 .praxis-surface .praxis-booking-heading { margin-bottom: 28px; }
 .praxis-surface :is(.praxis-booking-card,.praxis-appointment-card,.praxis-check-booking-card) { padding: 28px 22px; }
 .praxis-surface :is(.praxis-booking-card,.praxis-appointment-card) :is(h2,h3) { font-size: 24px; }
 .praxis-surface .praxis-check-booking-card h2 { font-size: 28px; }
 .praxis-surface.sub-hero > .preview-original-photo[data-photo-kind="portrait"] {
  width: 240px; max-width: calc(100% - 44px); margin: 0 auto 32px;
 }
 .praxis-surface .doctor-card > .preview-original-photo { width: 180px; }
 .praxis-surface .benefit-row { gap: 16px; }
}
@media(max-width:380px) {
 .praxis-surface h1 { font-size: 32px; }
 .praxis-surface h2 { font-size: 28px; }
 .praxis-surface .service-grid h3 { font-size: 20px; }
 .praxis-surface :is(.praxis-booking-card,.praxis-appointment-card) :is(h2,h3) { font-size: 22px; }
 .praxis-surface.audience h2 { font-size: 25px; }
}
/* Neutralise the old inline !important mobile size without affecting desktop. */
@media(max-width:420px) {
 .praxis-surface h1 { font-size: clamp(28px,8.5vw,36px) !important; }
}
@media(min-width:761px) and (max-width:980px) {
 .praxis-surface .legal-card h2 { font-size: 20px; overflow-wrap: break-word; }
}
@media(min-width:761px) and (max-width:1100px) {
 .praxis-surface .experience-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}