/* Children's orthodontics: Figma409:2; mobile hero delta410:46.
   Source-safe layout; no hero image animation, clinical slider or fixed text heights.
   Contract: _redesign-2026-09/20260911-orthodontics-details/children/IMPLEMENTATION-CONTRACT.md */
main.children-orthodontics-redesign {
  --ch-ink: var(--ink, #162852);
  --ch-text: var(--ink-soft, #22303f);
  --ch-muted: var(--muted, #51606f);
  --ch-line: var(--line, #e2e6eb);
  --ch-paper: var(--paper, #fff);
  --ch-subtle: var(--bg, #f7f8fa);
  --ch-blue: var(--primary, #2f5fa8);
  padding: calc(var(--header-height, 64px) + 64px) 0 96px;
  color: var(--ch-text);
  background: var(--ch-paper);
  font: 400 16px/26px var(--font-body, Inter, sans-serif);
  overflow-wrap: anywhere;
}
.children-orthodontics-redesign * { box-sizing: border-box; min-width: 0; }
.children-orthodontics-redesign :where(h1,h2,h3,h4,p,figure,dl,dd,ul,ol) { margin: 0; }
.children-orthodontics-redesign :where(h1,h2,h3,h4) {
  color: var(--ch-ink);
  font-family: var(--font-display, 'Schibsted Grotesk', sans-serif);
  font-weight: 600;
  text-wrap: pretty;
}
.children-orthodontics-redesign h1 { font-size: 56px; line-height: 60px; letter-spacing: -1px; font-weight: 700; }
.children-orthodontics-redesign h2 { max-width: 900px; font-size: 38px; line-height: 44px; letter-spacing: -.5px; }
.children-orthodontics-redesign :where(h3,h4) { font-size: 20px; line-height: 26px; letter-spacing: -.2px; }
.children-orthodontics-redesign p { font-size: 16px; line-height: 26px; }
.children-orthodontics-redesign details { border: 0; border-radius: 0; background: transparent; overflow: visible; }
.children-orthodontics-redesign details p { padding: 0; }
.children-orthodontics-redesign a { color: var(--ch-ink); text-underline-offset: 5px; }
.children-orthodontics-redesign :where(a,button,summary) { -webkit-tap-highlight-color: transparent; }
.children-orthodontics-redesign :where(a,button,summary,[tabindex]):focus-visible {
  outline: 3px solid var(--primary-focus, #0353e9);
  outline-offset: 4px;
}
.children-orthodontics-redesign [hidden] { display: none !important; }
.children-orthodontics-redesign [id] { scroll-margin-top: calc(var(--header-height, 64px) + 24px); }
.children-orthodontics-redesign .ch-wrap { width: calc(100% - 160px); max-width: 1280px; margin-inline: auto; }
.children-orthodontics-redesign .ch-section { display: flex; flex-direction: column; gap: 24px; padding-block: 64px; }
.children-orthodontics-redesign .ch-section > p { max-width: 1100px; }
.children-orthodontics-redesign :where(.ch-copy,.ch-concern-copy,.ch-appliance-copy,.ch-care-copy) { display: flex; flex-direction: column; gap: 16px; }
.children-orthodontics-redesign :where(.ch-label,.ch-overline) { color: var(--ch-muted); font: 600 15px/24px var(--font-body, Inter, sans-serif); }
.children-orthodontics-redesign :where(.ch-small,figcaption,.ch-caption,.ch-limitations) { color: var(--ch-muted); font: 400 14px/21px var(--font-body, Inter, sans-serif); }
.children-orthodontics-redesign .ch-number { color: var(--ch-muted); font: 500 13px/20px var(--font-mono, 'IBM Plex Mono', monospace); }
.children-orthodontics-redesign :where(.ch-treatment-link,.ch-qualifications,.ch-concern-links a,.ch-family-links a) {
  display: inline-flex; align-items: center; min-height: 44px; padding-block: 8px;
  font: 600 15px/24px var(--font-body, Inter, sans-serif);
}

/* Semantic order is heading, full-frame figure, then summary. */
.children-orthodontics-redesign .ch-hero {
  display: grid; grid-template-columns: repeat(2,minmax(0,1fr));
  grid-template-rows: auto 1fr; gap: 24px 64px; align-items: start; padding-bottom: 64px;
}
.children-orthodontics-redesign .ch-heading { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.children-orthodontics-redesign .ch-hero-media { grid-column: 2; grid-row: 1 / span 2; }
.children-orthodontics-redesign .ch-summary { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; gap: 24px; }
.children-orthodontics-redesign .ch-chips { display: flex; flex-direction: column; gap: 4px; padding: 0; list-style: none; font-weight: 600; color: var(--ch-muted); }
.children-orthodontics-redesign .ch-contents { padding-block: 12px; border-block: 1px solid var(--ch-line); }
.children-orthodontics-redesign .ch-contents-wide { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.children-orthodontics-redesign :where(.ch-contents-wide,.ch-contents-compact nav) a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 8px; color: var(--ch-ink); font-size: 15px; line-height: 24px; font-weight: 600; text-decoration: none; }
.children-orthodontics-redesign .ch-contents-compact { display: none; }
.children-orthodontics-redesign .ch-contents-compact summary { display: list-item; min-height: 44px; padding-block: 10px; color: var(--ch-ink); font-weight: 600; cursor: pointer; }
.children-orthodontics-redesign .ch-contents-compact nav { display: flex; flex-direction: column; gap: 4px; padding-top: 8px; }

/* Approved pixels are injected by the getter. No CSS crop or stock fallback. */
.children-orthodontics-redesign :where(.ch-education,.ch-photo) { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; width: 100%; }
.children-orthodontics-redesign :where(.ch-education,.ch-photo,.ch-record) img { display: block; max-width: 100%; height: auto; object-fit: contain; }
.children-orthodontics-redesign .ch-education img { width: 100%; background: var(--ch-subtle); }
.children-orthodontics-redesign .ch-figure-title { color: var(--ch-muted); font: 400 14px/21px var(--font-body, Inter, sans-serif); }
.children-orthodontics-redesign .ch-photo { max-width: min(100%,var(--ch-native-width,100%)); }
.children-orthodontics-redesign .ch-photo img { width: 100%; }
.children-orthodontics-redesign .ch-education figcaption { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.children-orthodontics-redesign .ch-education-badge { color: var(--ch-muted); font: 500 13px/20px var(--font-mono, 'IBM Plex Mono', monospace); }
.children-orthodontics-redesign figure[data-image-failed] img { color: var(--ch-ink); background: var(--ch-subtle); border: 1px dashed var(--ch-muted); }
.children-orthodontics-redesign .ch-facts { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; }
.children-orthodontics-redesign .ch-facts > div { display: flex; flex-direction: column; gap: 16px; }
.children-orthodontics-redesign .ch-facts dt { color: var(--ch-muted); font: 500 13px/20px var(--font-mono, 'IBM Plex Mono', monospace); }
.children-orthodontics-redesign .ch-facts dd { display: flex; flex-direction: column; gap: 16px; }
.children-orthodontics-redesign .ch-fact-value { color: var(--ch-ink); font: 600 20px/26px var(--font-display, 'Schibsted Grotesk', sans-serif); }

/* Two editorial columns, not a sequence of identical image cards. */
.children-orthodontics-redesign .ch-concerns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 40px 64px; align-items: start; }
.children-orthodontics-redesign .ch-concern-column { display: flex; flex-direction: column; gap: 40px; }
.children-orthodontics-redesign .ch-concern { display: flex; flex-direction: column; gap: 16px; }
.children-orthodontics-redesign .ch-concern-links { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.children-orthodontics-redesign .ch-concern-links a { padding-inline: 16px; }
.children-orthodontics-redesign :where(.ch-assessment,.ch-mechanism,.ch-real-models) { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 64px; align-items: start; }
.children-orthodontics-redesign .ch-pathways { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px; }
.children-orthodontics-redesign .ch-pathways > article { display: flex; flex-direction: column; gap: 16px; padding: 24px; background: var(--ch-subtle); }
.children-orthodontics-redesign .ch-planning { display: flex; flex-direction: column; gap: 24px; }
.children-orthodontics-redesign .ch-planning > article { display: flex; flex-direction: column; gap: 12px; }
.children-orthodontics-redesign .ch-real-models { gap: 32px; }

/* Native, independent appliance disclosure. Never group with a shared name. */
.children-orthodontics-redesign .ch-appliances { display: flex; flex-direction: column; gap: 24px; }
.children-orthodontics-redesign .ch-appliance { border-bottom: 1px solid var(--ch-line); padding-block: 24px; }
.children-orthodontics-redesign .ch-appliance > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 48px; padding: 0 0 16px; color: var(--ch-ink);
  font: 600 15px/24px var(--font-body, Inter, sans-serif); cursor: pointer; list-style: none;
}
.children-orthodontics-redesign .ch-appliance > summary::-webkit-details-marker { display: none; }
.children-orthodontics-redesign .ch-appliance-heading { display: flex; flex-direction: column; gap: 16px; flex: 1; }
.children-orthodontics-redesign .ch-toggle { flex: 0 0 24px; text-align: center; color: var(--ch-blue); font-size: 24px; line-height: 24px; }
.children-orthodontics-redesign .ch-toggle::before { content: '+'; }
.children-orthodontics-redesign .ch-appliance[open] > summary .ch-toggle::before { content: '−'; }
.children-orthodontics-redesign .ch-appliance[open] > .ch-appliance-body {
  display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 64px; align-items: start;
}
.children-orthodontics-redesign .ch-appliance:not([open]) > .ch-appliance-body { display: none; }

/* Two actual records need an editorial grid, not a carousel. */
.children-orthodontics-redesign .ch-records { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 40px 32px; align-items: start; }
.children-orthodontics-redesign .ch-record { display: flex; flex-direction: column; gap: 16px; }
.children-orthodontics-redesign .ch-record figure { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.children-orthodontics-redesign .ch-record img { width: min(100%,var(--ch-native-width)); }
.children-orthodontics-redesign .ch-record-tags { display: flex; flex-wrap: wrap; gap: 6px 12px; color: var(--ch-muted); font-size: 14px; line-height: 21px; }
.children-orthodontics-redesign .ch-care { display: flex; flex-direction: column; gap: 40px; }
.children-orthodontics-redesign .ch-care-phase { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 64px; align-items: start; }
.children-orthodontics-redesign .ch-care-copy ul { display: flex; flex-direction: column; gap: 12px; padding-inline-start: 20px; }
.children-orthodontics-redesign .ch-safety { display: flex; flex-direction: column; gap: 16px; max-width: 1000px; padding-top: 16px; }

/* Complete public credentials and five source questions. */
.children-orthodontics-redesign .ch-doctors { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px; align-items: start; }
.children-orthodontics-redesign .ch-doctor { display: flex; flex-direction: column; gap: 24px; padding: 24px; background: var(--ch-subtle); }
.children-orthodontics-redesign .ch-doctor-head { display: grid; grid-template-columns: 96px minmax(0,1fr); gap: 24px; align-items: start; }
.children-orthodontics-redesign .ch-doctor-head img { display: block; width: 96px; height: 120px; object-fit: contain; background: var(--ch-paper); }
.children-orthodontics-redesign .ch-doctor-name { display: flex; flex-direction: column; gap: 12px; }
.children-orthodontics-redesign .ch-credentials { display: flex; flex-direction: column; gap: 16px; list-style: none; padding: 0; font-size: 14px; line-height: 21px; }
.children-orthodontics-redesign .ch-doctor-checklist { display: flex; flex-direction: column; gap: 16px; }
.children-orthodontics-redesign .ch-doctor-checklist ul { display: flex; flex-direction: column; gap: 16px; padding-inline-start: 20px; }
.children-orthodontics-redesign .ch-doctor-meta { display: flex; flex-direction: column; gap: 12px; color: var(--ch-muted); font-size: 14px; line-height: 21px; }
.children-orthodontics-redesign .ch-faq-layout { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr); gap: 64px; align-items: start; }
.children-orthodontics-redesign .ch-faq { display: flex; flex-direction: column; }
.children-orthodontics-redesign .ch-faq details { padding-block: 24px; border-bottom: 1px solid var(--ch-line); }
.children-orthodontics-redesign .ch-faq summary { display: list-item; min-height: 44px; padding-block: 10px; font-weight: 600; color: var(--ch-ink); cursor: pointer; }
.children-orthodontics-redesign .ch-faq-answer { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; }
.children-orthodontics-redesign .ch-team-aside { display: flex; flex-direction: column; gap: 24px; }
.children-orthodontics-redesign .ch-reply-note { display: flex; flex-direction: column; gap: 16px; max-width: 900px; padding-top: 24px; }
.children-orthodontics-redesign .ch-family-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding-block: 24px; border-top: 1px solid var(--ch-line); }
.children-orthodontics-redesign .ch-family-links [aria-current=page] { color: var(--ch-muted); font-weight: 600; }

@media (max-width: 1200px) {
  .children-orthodontics-redesign .ch-wrap { width: calc(100% - 80px); }
  .children-orthodontics-redesign :where(.ch-hero,.ch-concerns,.ch-assessment,.ch-mechanism,.ch-care-phase,.ch-faq-layout) { column-gap: 32px; }
  .children-orthodontics-redesign .ch-appliance[open] > .ch-appliance-body { column-gap: 32px; }
}
@media (max-width: 1024px) {
  main.children-orthodontics-redesign { padding-top: calc(var(--header-height,64px) + 48px); }
  .children-orthodontics-redesign .ch-wrap { width: calc(100% - 64px); }
  .children-orthodontics-redesign h1 { font-size: 36px; line-height: 40px; letter-spacing: -.6px; }
  .children-orthodontics-redesign h2 { font-size: 26px; line-height: 32px; letter-spacing: -.3px; }
  .children-orthodontics-redesign .ch-section { padding-block: 48px; }
  .children-orthodontics-redesign .ch-hero { grid-template-columns: minmax(0,1fr); grid-template-rows: auto; gap: 32px; padding-bottom: 48px; }
  .children-orthodontics-redesign :is(.ch-heading,.ch-hero-media,.ch-summary) { grid-column: auto; grid-row: auto; }
  .children-orthodontics-redesign .ch-contents-wide { display: none; }
  .children-orthodontics-redesign .ch-contents-compact { display: block; }
  .children-orthodontics-redesign .ch-facts { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .children-orthodontics-redesign :is(.ch-concerns,.ch-assessment,.ch-pathways,.ch-mechanism,.ch-real-models,.ch-records,.ch-care-phase,.ch-doctors,.ch-faq-layout) { grid-template-columns: minmax(0,1fr); gap: 32px; }
  .children-orthodontics-redesign .ch-appliance[open] > .ch-appliance-body { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .children-orthodontics-redesign .ch-education { max-width: 704px; }
}
@media (max-width: 767px) {
  main.children-orthodontics-redesign { padding-top: calc(var(--header-height,64px) + 40px); padding-bottom: calc(96px + env(safe-area-inset-bottom,0px)); }
  .children-orthodontics-redesign .ch-wrap { width: calc(100% - 40px); }
  .children-orthodontics-redesign .ch-facts { gap: 24px; }
}
@media (max-width: 860px) {
  html.d12-mobile-enhanced .children-orthodontics-redesign .ch-contents { display: none; }
}
@media (hover:hover) and (pointer:fine) {
  .children-orthodontics-redesign a:hover { color: var(--ch-blue); }
  .children-orthodontics-redesign :where(.ch-appliance > summary,.ch-faq summary):hover { color: var(--ch-blue); }
}
html:lang(zh-TW) .children-orthodontics-redesign :where(p,li,dd,figcaption) { line-height: 1.75; }
html:lang(th) .children-orthodontics-redesign :where(p,li,dd,figcaption) { line-height: 1.8; }
html:lang(zh-TW) .children-orthodontics-redesign :where(h1,h2,h3,h4),
html:lang(th) .children-orthodontics-redesign :where(h1,h2,h3,h4) { letter-spacing: 0; line-height: 1.3; }
@media (prefers-reduced-motion:reduce) {
  .children-orthodontics-redesign *, .children-orthodontics-redesign *::before, .children-orthodontics-redesign *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}