/* Shared surface and type for guides, articles and both family tools. */
.interior {
  --display:system-ui,-apple-system,"Segoe UI",sans-serif;
  --inner-width:min(72rem,calc(100vw - clamp(2rem,6vw,5rem)));
  --inner-ink:#071033;
  --inner-muted:#4b5563;
  --inner-accent:#2251ff;
  --inner-edge:#dce2ed;
  --inner-surface:#f4f6fa;
  --inner-action:linear-gradient(110deg,#071033,#0a1a4d);
  overflow-x:clip;
  color:var(--inner-ink);
  background:#f8f9fc;
}
.interior .breadcrumbs {
  width:var(--inner-width); max-width:100%; margin-inline:auto; flex-wrap:nowrap; gap:.45rem;
  align-items:center; min-height:2.85rem; padding-block:.52rem; color:#526075;
  font:500 .79rem/1.4 var(--body);
}
.interior .breadcrumbs a { flex:none; color:#233c78; text-underline-offset:.2em; }
.interior .breadcrumbs [aria-current] { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.interior > .wrap:has(> .breadcrumbs), .interior > .kiz-crumb { width:var(--inner-width); max-width:100%; margin:auto; }
.interior .page-intro {
  position:relative; isolation:isolate;
  width:var(--inner-width); max-width:100%; margin-inline:auto;
  padding-block:clamp(1.55rem,3.7vw,3rem); color:var(--inner-ink);
}
.page-intro::before {
  content:""; position:absolute; z-index:-1; top:0; bottom:0; left:50%; width:100vw; transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(circle at 1px 1px,#7484b11b .7px,transparent .95px) left top/20px 20px,
    radial-gradient(ellipse at 90% 10%,#2251ff0c,transparent 47%),#f4f6fa;
  border-block:1px solid #e0e5ef;
}
.interior .page-badge {
  display:inline-flex; align-items:center; gap:.47rem; width:fit-content; max-width:100%;
  padding:.38rem .8rem; margin:0; border:1px solid #2251ff33; border-radius:99px;
  background:#e8edff; color:#142958; font:640 .81rem/1.42 var(--body);
  letter-spacing:0; text-transform:none;
}
.page-badge > svg { flex:none; color:#2251ff; }
.page-badge:not(:has(> svg))::before { content:""; width:.43rem; height:.43rem; flex:none; border-radius:50%; background:#2251ff; }
.interior .page-intro h1 {
  max-width:28ch; margin:clamp(.85rem,2vw,1.25rem) 0 .65rem;
  color:var(--inner-ink); font:700 clamp(2.1rem,4.2vw,3.15rem)/1.14 var(--display);
  letter-spacing:-.045em; overflow-wrap:break-word; text-wrap:pretty;
}
.page-intro h1 em { color:var(--inner-accent); font-style:normal; }
.interior .page-lead { max-width:65ch; margin:0; color:var(--inner-muted); font:400 1.1rem/1.6 var(--body); }
.interior .page-note { display:flex; align-items:baseline; gap:.45rem; max-width:72ch; margin:.8rem 0 0; color:#4d5c74; font:500 .86rem/1.52 var(--body); }
.page-note svg { flex:none; align-self:center; color:#2245ae; }
.interior :target { scroll-margin-block-start:1rem; }
.interior a:focus-visible, .interior summary:focus-visible { outline:3px solid #2251ff; outline-offset:3px; }
@media (max-width:730px) {
  .interior { --inner-width:min(100% - 2rem,42rem); }
  .interior .breadcrumbs { font-size:.74rem; gap:.32rem; min-height:2.3rem; }
  .interior .page-intro { padding-block:1.2rem 1.35rem; }
  .interior .page-intro h1 { font-size:clamp(1.68rem,5.6vw + .4rem,2.75rem); margin:.75rem 0 .5rem; }
  .interior .page-lead { font-size:1rem; line-height:1.52; }
  .interior .page-note { margin-top:.62rem; font-size:.81rem; }
  .interior > .wrap > .breadcrumbs, .interior > .kiz-crumb > .breadcrumbs, .interior .doc > .breadcrumbs { width:100%; }
}
@media (forced-colors:active) { .page-intro::before { background:Canvas; } .page-badge::before { border:1px solid CanvasText; } }
@media print {
  .interior { overflow:visible; background:white; }
  .page-intro::before,.interior .breadcrumbs { display:none; }
  .interior .page-intro { width:100%; padding:0 0 1rem; }
  .interior .page-badge { padding:0; color:black; background:white; border:0; }
}