/* ==========================================================================
   KuduDoc v6 — KuduDoc for home (families). Page overrides on top of theme.css.
   The v5 page CSS sits in the lower "v5" layer, so plain rules here win.
   Language: blue opening with the mark as a poster → pale → white → the closing blue; no section paints
   its own band; surfaces are white cards or flat blue panels.
   24 Sep 2026: the 3D render and the four stat tiles are gone (one facts line instead); the policy
   section moved into the tabs; the household cards became a list; emergency access shows the owner's rules.
   ========================================================================== */

/* ---------------------------------------------------------------- 1 · the opening */
html body #hero.fam-hero {
  position: relative; isolation: isolate; display: flow-root;
  padding: 168px 0 64px !important;
  color: #fff;
  background: #2a64a0;   /* a solid colour, so site.js reads the opening as dark and the nav turns white */
  --c-text-main: #fff; --c-text-secondary: rgba(236, 244, 252, .86); --c-accent: #d6eeff;
  --surface-ink: #fff; --surface-muted: rgba(236, 244, 252, .86); --surface-line: rgba(191, 227, 255, .28);
}
/* the flat KuduDoc-mark poster (the .hero-cu poster) */
html body #hero.fam-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 72'%3E%3Cg transform='translate(40 36) rotate(-8) skewX(-14) translate(-31 -32)' stroke-linecap='round' stroke-width='6.5'%3E%3Cpath d='M13 14V50' stroke='%23004e99' stroke-opacity='.16'/%3E%3Cpath d='M25 9V55' stroke='%23004e99' stroke-opacity='.22'/%3E%3Cpath d='M37 13V51' stroke='%23004e99' stroke-opacity='.13'/%3E%3Cpath d='M49 18V46' stroke='%23004e99' stroke-opacity='.18'/%3E%3C/g%3E%3C/svg%3E") right -6vw center / auto 150% no-repeat;
}
/* copy on the left, as on the landing */
html body #hero .fam-hero-copy { text-align: left; }
html body #hero .kd-eyebrow {
  display: flex; align-items: center; margin: 0 0 24px; color: #d6eeff;
  font: 600 12.5px/1 var(--font-sans); letter-spacing: .15em; text-transform: uppercase;
}
html body #hero .kd-eyebrow::before {
  content: ""; flex: none; width: 3px; height: 13px; margin-right: 10px; border-radius: 2px;
  background: #ff762b; transform: skewX(-14deg) rotate(-8deg) translateY(1px);
}
html body #hero h1 {
  margin: 0; max-width: 20ch; color: #fff; text-wrap: balance;
  font: 650 clamp(46px, 5.6vw, 80px)/.98 var(--font-display); letter-spacing: -.038em;
}
html body #hero h1 .kd-rule { width: 96px; height: 4px; margin: 18px 0 16px; background: #ff762b; }
html body #hero .fam-lead {
  max-width: 34ch; margin: 24px 0 0; color: rgba(236, 244, 252, .86);
  font: 400 clamp(19px, 1.8vw, 24px)/1.42 var(--font-sans); letter-spacing: -.012em;
}
/* the plain-words sentence under the lead: one step quieter, so the H1 and the lead keep the voice */
html body #hero .fam-intro {
  max-width: 54ch; margin: 16px 0 0; color: rgba(236, 244, 252, .86);
  font: 400 17px/1.6 var(--font-sans); letter-spacing: -.005em;
}
html body #hero .fam-actions { justify-content: flex-start; margin-top: 32px; }
html body #hero .btn-ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(191, 227, 255, .45); }
html body #hero .btn-ghost:hover { background: rgba(191, 227, 255, .1); }
html body #hero .fam-micro { color: rgba(236, 244, 252, .78); }

/* the facts line, as on the landing: plain text, the slanted stroke between */
html body #hero .fam-facts-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 64px 0 0; padding: 22px 0 0;
  border-top: 1px solid rgba(191, 227, 255, .28); color: rgba(236, 244, 252, .86); font-size: 13.5px; line-height: 1.5;
}
html body #hero .fam-facts-line i { flex: none; width: 2px; height: 11px; border-radius: 2px; background: #ff762b; transform: skewX(-14deg); opacity: .8; }
html body #hero .fam-facts-line a { color: #fff; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(191, 227, 255, .45); text-underline-offset: 4px; }
/* the blue eases into the pale ground over the next section's first 180px (transparent, so it meets
   whatever the ground is at that height — no seam) */
html body #hero + #tabs {
  background: linear-gradient(180deg, #2a64a0 0, rgba(42, 100, 160, .97) 18px, rgba(42, 100, 160, .9) 36px, rgba(42, 100, 160, .79) 54px,
    rgba(42, 100, 160, .65) 72px, rgba(42, 100, 160, .5) 90px, rgba(42, 100, 160, .35) 108px, rgba(42, 100, 160, .21) 126px,
    rgba(42, 100, 160, .1) 144px, rgba(42, 100, 160, .03) 162px, rgba(42, 100, 160, 0) 180px);
  padding-top: 200px;
}

/* ---------------------------------------------------------------- 2 · type and markers */
html body .families-page .kd-eyebrow { font: 600 12.5px/1.5 var(--font-sans); letter-spacing: .15em; text-transform: uppercase; }
html body .families-page h2 { font-weight: 650; letter-spacing: -.03em; }
html body .families-page h2.kd-h2::before { background: #ff762b; transform: skewX(-14deg) rotate(-8deg); }
html body .families-page :is(h1, h3, h4) { font-weight: 650; }
html body .families-page .fam-link { color: #006bcb; }
/* links inside running copy: the blue, underlined, so a sentence's link reads as a link */
html body .families-page :is(.fam-tab-copy, .fam-feature-copy, .fam-title, .fam-faq-list) p a,
html body .families-page .fam-tasks a { color: #006bcb; text-decoration: underline; text-decoration-color: rgba(0, 107, 203, .35); text-underline-offset: 4px; }
html body .families-page :is(.fam-tab-copy, .fam-feature-copy, .fam-title, .fam-faq-list) p a:hover,
html body .families-page .fam-tasks a:hover { text-decoration-color: #006bcb; }
/* the collections' answer-first paragraph sits under the centred H2 */
html body .families-page #tabs .fam-title > p { max-width: 680px; margin: 18px auto 0; color: #56697f; font-size: 16.5px; line-height: 1.65; }
html body .families-page .fam-tab-copy > p + p { margin-top: 10px; }
/* School & family: three small tasks, on the slanted-stroke markers */
html body .families-page .fam-tasks { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; }
html body .families-page .fam-tasks li { margin: 0; color: #3f5470; font-size: 14.5px; line-height: 1.6; }
/* #records: its two links on one line, wrapping on a phone */
html body .families-page .fam-feature-copy > p + p { margin-top: 14px; }
html body .families-page .fam-links { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 6px !important; }
html body .families-page .fam-links .fam-link { margin-top: 10px; text-decoration: none; }
/* mock labels are not headings: the same look as v5's h4 / h3 */
html body .fam-collection .fam-collection-title { margin: 0 0 18px; color: #102d49; font: 650 22px/1.2 var(--font-display); letter-spacing: -.02em; }
html body .fam-scan-paper .fam-scan-title { margin-top: 9px; color: #102d49; font: 650 19px/1.1 var(--font-display); letter-spacing: -.02em; }
/* centred headings: v5 pins the chapter slash at the box's left edge, so on a narrower first line it
   floated ~50px from the text. Set it inline, in front of the first word. */
html body .families-page :is(#plans, #household, #tabs) h2.kd-h2 { padding-left: 0; }
html body .families-page :is(#plans, #household, #tabs) h2.kd-h2::before {
  position: relative; top: auto; left: auto; display: inline-block; height: .7em; margin-right: .3em; vertical-align: -.04em;
}

/* ---------------------------------------------------------------- 3 · cards: one recipe */
html body :is(.fam-tab-panel, .fam-scan, .fam-policy .kd-ask, .fam-version-pair > div) {
  border: 0; border-radius: 22px; background: #fff;
  box-shadow: inset 0 0 0 1px rgba(16, 45, 73, .07), 0 1px 2px rgba(16, 45, 73, .05), 0 16px 40px -24px rgba(16, 45, 73, .32);
}
html body .fam-version-pair > div { border-radius: 16px; }
/* this year's wording keeps its blue top edge, drawn inside the card */
html body .fam-version-pair > div + div { box-shadow: inset 0 3px 0 #006bcb, inset 0 0 0 1px rgba(16, 45, 73, .07), 0 1px 2px rgba(16, 45, 73, .05), 0 16px 40px -24px rgba(16, 45, 73, .32); }
html body .fam-policy .kd-ask-sources { background: #eef5fc; border-left-color: #006bcb; border-radius: 0 10px 10px 0; }
/* the tab switch: pills */
html body .fam-tabs .kd-chip { border: 0; border-radius: 999px; background: #fff; color: #3f5470; box-shadow: inset 0 0 0 1px rgba(16, 45, 73, .1); }
html body .fam-tabs .kd-chip.is-active { background: #006bcb; color: #fff; box-shadow: none; }
html body .fam-tab-panel .mock-frame { border: 0; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(16, 45, 73, .08), 0 12px 30px -20px rgba(16, 45, 73, .3); }
/* the capture's title bar: outside a .mock the --mock-* variables are undefined, so v5 drew no bar,
   no divider and 17px body text. Give it the light window bar the other captures have. */
html body .fam-tab-panel .capture-frame-titlebar {
  display: flex; align-items: center; justify-content: center; height: 38px; padding: 0 16px;
  background: #f5f8fb; border-bottom: 1px solid #e3eaf2;
  font: 500 12px/16px var(--font-sans); letter-spacing: 0; color: #56697f;
}
html body .fam-collection { border: 0; border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(16, 45, 73, .08), 0 12px 30px -20px rgba(16, 45, 73, .3); overflow: hidden; }
/* polish.js moves a mock's label out to sit under it as a caption: the wrapper keeps it in the mock's column */
html body .fam-tab-media { min-width: 0; }
/* the policy pair and the Ask example, inside the third tab */
html body .fam-tab-panel .fam-policy figcaption { margin-top: 14px; }
html body .fam-scan-paper { border-color: rgba(16, 45, 73, .08); background: #f3f7fb; }
/* the phone grows to fit its footer ("2 pages · one PDF" sat under the frame's edge) */
html body .fam-scan .mock-phone { height: auto; min-height: 267px; }
html body .fam-scan .kd-seal-result { border: 0; border-radius: 16px; background: #eef5fc; }
/* the "Sealed" chip is about the seal, so it takes the one orange (v5 drew it ice-blue) */
html body .kd-chip-sealed { background: #fff1e7; color: #b8480f; }
html body .kd-chip-sealed::before { background: #ff762b; }

/* ---------------------------------------------------------------- 3b · household: the heading on the left, three plain entries on the right */
html body .fam-house { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 72px; align-items: start; }
html body .fam-house-head h2.kd-h2 { margin: 0; }
html body .fam-house-head > p { margin-top: 18px; font-size: 17px; line-height: 1.65; color: #56697f; }
html body .fam-house-list { margin: 0; border-top: 1px solid rgba(16, 45, 73, .1); }
html body .fam-house-list > div { padding: 22px 0; border-bottom: 1px solid rgba(16, 45, 73, .1); }
html body .fam-house-list dt { color: #102d49; font: 650 19px/1.3 var(--font-display); letter-spacing: -.02em; }
html body .fam-house-list dd { margin: 8px 0 0; color: #56697f; font-size: 15.5px; line-height: 1.65; }
html body .fam-house-list .fam-link { margin-top: 0; }

/* ---------------------------------------------------------------- 4 · emergency access: a flat blue panel, not a full-bleed band */
html body #emergency {
  width: min(1240px, calc(100% - 48px)); margin: 32px auto; border-radius: 28px;
  background: #2a64a0; background-image: none;
  --c-text-main: #fff; --c-text-secondary: rgba(236, 244, 252, .86); --c-accent: #d6eeff; --c-border: rgba(191, 227, 255, .26);
  --surface-ink: #fff; --surface-muted: rgba(236, 244, 252, .86); --surface-line: rgba(191, 227, 255, .28);
}
html body #emergency h2 { color: #fff; }
html body #emergency h2 :is(.text-sky, span) { color: #a9dcff; }
html body #emergency .kd-eyebrow { color: #d6eeff; }
html body #emergency p, html body #emergency small { color: rgba(236, 244, 252, .86); }
html body #emergency .fence { color: rgba(236, 244, 252, .86); }
html body #emergency .fence::before { background: #a9dcff; }
html body #emergency .fam-emergency { align-items: center; }
html body #emergency .fam-emergency > div:first-child > p { font-size: 16.5px; line-height: 1.65; }
html body #emergency .fam-ea-rules { margin: 22px 0 0; display: grid; gap: 12px; }
html body #emergency .fam-ea-rules li { margin: 0; color: rgba(236, 244, 252, .86); font-size: 15.5px; line-height: 1.55; }
html body #emergency .fam-ea-rules b { color: #fff; font-weight: 650; }
html body #emergency .btn { margin-top: 28px; }
/* the owner's rules, drawn as a white settings card on the blue (an illustration, labelled under it) */
html body #emergency .fam-ea-media { min-width: 0; }
html body #emergency .fam-ea-mock {
  padding: 26px; border: 0; border-radius: 22px; background: #fff; color: #102d49;
  box-shadow: 0 2px 4px rgba(6, 22, 42, .08), 0 24px 60px -18px rgba(6, 22, 42, .38);
}
html body #emergency .fam-ea-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid #e3eaf2; }
html body #emergency .fam-ea-head b { font: 650 18px/1.2 var(--font-display); letter-spacing: -.02em; color: #102d49; }
html body #emergency .fam-ea-head span { padding: 5px 12px; border-radius: 999px; background: #e3effa; color: #004e99; font: 600 12px/1.2 var(--font-sans); }
html body #emergency .fam-ea-rows { margin: 0; }
html body #emergency .fam-ea-rows > div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid #edf1f6; font-size: 14px; }
html body #emergency .fam-ea-rows dt { color: #56697f; }
html body #emergency .fam-ea-rows dd { margin: 0; color: #102d49; font-weight: 600; text-align: right; }
html body #emergency .fam-ea-request { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; padding: 16px; border-radius: 14px; background: #f3f7fb; }
html body #emergency .fam-ea-request b { display: block; color: #102d49; font-size: 14px; }
html body #emergency .fam-ea-request small { display: block; margin-top: 4px; color: #56697f; font-size: 12.5px; line-height: 1.45; }
html body #emergency .fam-ea-actions { display: flex; gap: 8px; flex: none; }
html body #emergency .fam-ea-actions span { padding: 8px 14px; border-radius: 999px; background: #fff; color: #102d49; font: 600 13px/1 var(--font-sans); box-shadow: inset 0 0 0 1px rgba(16, 45, 73, .14); }
html body #emergency .fam-ea-actions span:first-child { background: #102d49; color: #fff; box-shadow: none; }
html body #emergency .fam-ea-media > .kd-mock-label { margin-top: 14px; color: rgba(236, 244, 252, .86); border-left-color: #a9dcff; }

/* ---------------------------------------------------------------- 5 · plans */
html body .fam-plans .plan {
  border: 0; border-radius: 22px; background: #fff;
  box-shadow: inset 0 0 0 1px rgba(16, 45, 73, .07), 0 1px 2px rgba(16, 45, 73, .05), 0 16px 40px -24px rgba(16, 45, 73, .32);
}
html body .fam-plans .fam-family-plan {
  background: #fff;
  box-shadow: inset 0 0 0 2px #006bcb, 0 1px 2px rgba(16, 45, 73, .05), 0 22px 48px -24px rgba(16, 45, 73, .38);
}
html body .fam-plans .plan .caption { color: #006bcb; font-weight: 600; letter-spacing: .12em; }
html body .fam-price { font-weight: 650; letter-spacing: -.035em; color: #102d49; }
html body .fam-plans .kd-marks li::before { background: #4fb3ff; }
html body .fam-plan-note { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 24px; }
html body .fam-plan-note p { flex-basis: 100%; margin: 0; color: #56697f; }

/* ---------------------------------------------------------------- 6 · FAQ: the questions as cards, like the site's accordions */
html body .fam-faq details {
  margin-bottom: 10px; padding: 0 22px; border: 0; border-radius: 16px; background: #fff;
  box-shadow: inset 0 0 0 1px rgba(16, 45, 73, .07), 0 10px 28px -22px rgba(16, 45, 73, .3);
}
html body .fam-faq details:first-child { border-top: 0; }
html body .fam-faq details[open] summary { color: #006bcb; }
/* the FAQ heading names its topic, so it is longer: the heading column widens a little and the H2 steps down,
   so it holds three or four lines beside the questions rather than six */
@media (min-width: 1101px) {
  html body .fam-faq { grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: 56px; }
  html body .fam-faq h2.kd-h2 { font-size: clamp(34px, 3.2vw, 44px); line-height: 1.08; text-wrap: balance; }
}
/* the "+" is drawn by CSS, so the question text (and the FAQPage built from it) is only the question */
html body .fam-faq summary .fam-plus::before { content: "+"; }
/* the answer's bottom margin collapsed out through the <details>, so the card ended on the last line */
html body .fam-faq details[open] { padding-bottom: 22px; }
html body .fam-faq details p { margin-bottom: 0; }

/* ---------------------------------------------------------------- 7 · the closing: one full-bleed blue into the footer */
html body #closing.fam-section { background: #2a64a0 !important; }
html body #closing.fam-section > .cta-gradient {
  display: block; max-width: 1080px !important; margin: 0 auto !important; padding: 0 !important;
  background: transparent; box-shadow: none;
}
html body #closing .cta-gradient::after { display: none; }
html body #closing .kd-eyebrow, html body #closing .eyebrow { display: flex; align-items: center; color: #d6eeff; font: 600 12.5px/1 var(--font-sans); letter-spacing: .15em; }
html body #closing :is(.kd-eyebrow, .eyebrow)::before { content: ""; flex: none; width: 3px; height: 13px; margin-right: 10px; border-radius: 2px; background: #ff762b; transform: skewX(-14deg) rotate(-8deg) translateY(1px); }
html body #closing h2.kd-h2 { padding-left: 0; font-weight: 650; }
html body #closing h2.kd-h2::before { display: none; }
html body #closing .btn-onblue {
  color: #fff; border: 0; background: linear-gradient(180deg, #ff8f45 0%, #ff6a30 55%, #ff5528 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(160,40,10,.25), 0 1px 2px rgba(120,30,0,.25), 0 8px 22px -6px rgba(255,90,40,.55);
}
html body #closing p { color: rgba(236, 244, 252, .86); }

/* ---------------------------------------------------------------- 8 · tablet and phone */
@media (max-width: 800px) {
  html body #emergency { width: calc(100% - 24px); border-radius: 22px; margin: 16px auto; }
  html body #hero + #tabs { padding-top: 170px; }
  html body .fam-house { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 600px) {
  html body #hero.fam-hero { padding-top: 124px !important; }
  html body #hero.fam-hero::before { background-position: right -40vw center; }
  html body #hero h1 { font-size: clamp(40px, 11vw, 50px); }
  html body #hero h1 > .text-slate { text-wrap: balance; }
  html body #hero .fam-lead { font-size: 18px; margin-left: 0; }
  html body #hero .fam-intro { font-size: 15.5px; }
  html body .fam-collection .fam-collection-title { font-size: 20px; }
  html body .families-page #tabs .fam-title > p { font-size: 15px; margin-left: 0; }
  html body #hero .fam-actions { gap: 10px; }
  html body #hero .fam-facts-line { margin-top: 40px; display: grid; gap: 10px; }
  html body #hero .fam-facts-line i { display: none; }
  html body #emergency .fam-ea-mock { padding: 20px; }
  html body #emergency .fam-ea-request { flex-direction: column; align-items: flex-start; }
  html body #closing.fam-section { padding: 88px 20px 72px !important; }
  html body #closing .btn-row { flex-direction: column; align-items: stretch; }
  /* full-width closing buttons, as on professionals and property */
  html body #closing .cta-copy { align-items: stretch; }
  html body #closing .btn-row .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html body .fam-tabs .kd-chip, html body #closing .btn { transition: none; }
}