/* V5: owner corrections R08-C01–20 and the three V5 additions. */
.v5-home-banner { background:linear-gradient(180deg,#c2bafa 0%,#e4dfff 60%,#efedff 100%); }
.v5-home-banner .v2-hero { background:transparent; padding-bottom:32px; }
.v5-home-banner .v4-hero-support { background:transparent; padding:0 0 30px; }
.v5-home-standards { padding:20px 0 38px; }
.v5-standard-strip { display:grid; grid-template-columns:repeat(14,minmax(0,1fr)); gap:24px 18px; padding:0; margin:0; list-style:none; align-items:center; }
.v5-standard-strip li { grid-column:span 2; min-width:0; }
/* standards-count:start: written by tools/sync_standards.py for 12 entries, never by hand */
.v5-standard-strip li:nth-child(8) { grid-column:3 / span 2; }
/* standards-count:end */
.v5-standard-strip a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; min-height:74px; text-align:center; text-decoration:none; font-size:13px; line-height:1.3; color:var(--navy); }
.v5-standard-strip a:hover span { text-decoration:underline; text-underline-offset:4px; }
.v5-standard-strip img { height:48px; width:auto; max-width:124.8px; object-fit:contain; }
.v5-standard-strip .v5-standard-symbol { height:45.6px; width:45.6px; color:var(--v2-purple); }
.v5-strip-hint { display:none; }
.v5-relationship-section { padding-block:26px; }
.v5-relationship-section .v4-relationships { margin:0; }
.v5-assurance-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; list-style:none; padding:0; margin:0; }
.v5-assurance-card { display:grid; grid-template-columns:64px minmax(0,1fr); grid-template-rows:64px 1fr auto; align-content:start; gap:16px; border:1px solid var(--v2-line); border-radius:20px; padding:24px; background:#fff; }
.v5-assurance-card .v5-assurance-art { width:64px; height:64px; display:flex; align-items:center; justify-content:center; }
.v5-assurance-art img { width:64px; height:58px; object-fit:contain; }
.v5-assurance-art .v5-standard-symbol { width:58px; height:58px; color:var(--v2-purple); }
/* Typographic tile: the standard's own number or short name, set in the site's type.
   Used where the standard publishes no mark this company may show. Numbers and words
   are not trademarks, so nothing here can read as a certification badge.
   Rights note: reports/v9-standards-mark-rights.md */
.v5-standard-tile { display:flex; flex-direction:column; align-items:center; justify-content:center; background:#efedff; border:1px solid #d9d4f2; color:var(--navy); font-weight:700; letter-spacing:-.025em; line-height:1; }
.v5-standard-tile .v5-tile-family { font-weight:600; letter-spacing:.1em; color:var(--v2-purple); }
.v5-assurance-art .v5-standard-tile { width:58px; height:58px; border-radius:15px; }
.v5-assurance-art .v5-standard-tile .v5-tile-name { font-size:15px; }
.v5-assurance-art .v5-standard-tile--4 .v5-tile-name { font-size:17px; }
.v5-assurance-art .v5-standard-tile--3 .v5-tile-name { font-size:19px; }
.v5-assurance-art .v5-standard-tile .v5-tile-family { font-size:7px; margin-top:3px; }
.v5-standard-strip .v5-standard-tile { width:45.6px; height:45.6px; border-radius:10px; }
.v5-standard-strip .v5-standard-tile .v5-tile-name { font-size:10px; }
.v5-standard-strip .v5-standard-tile--4 .v5-tile-name { font-size:11.5px; }
.v5-standard-strip .v5-standard-tile--3 .v5-tile-name { font-size:13px; }
.v5-standard-strip .v5-standard-tile .v5-tile-family { display:none; }
.v5-assurance-card h3 { font-size:19px; line-height:1.35; margin:0; letter-spacing:-.02em; align-self:center; }
.v5-assurance-card p { grid-column:1 / -1; font-size:15px; line-height:1.65; margin:0; }
.v5-assurance-card a { grid-column:1 / -1; font-size:13px; text-underline-offset:4px; }
.v5-quote-emphasis { color:var(--v2-purple); }
.v3-combined .v3-route-phone { height:151.44px; margin:14px auto; }
.v3-combined .v3-route-phone--inset { height:212.12px; margin:-16.34px auto; }
.v3-combined > .v3-route-card { padding:24px; }
.v4-commissioner { width:100%; max-width:760px; padding:0; margin:32px auto 0; border-radius:0; background:transparent; }
.v4-commissioner > h2,.v4-commissioner > p,.v4-commissioner > .v2-heading { text-align:center; }
.v4-contact-kit .v4-commissioner { margin:0 auto; }
.v4-commissioner form { margin-inline:0; }
.v5-contact-banner { padding:72px 0 64px; text-align:center; background:linear-gradient(180deg,#aaa2f4 0%,#c6c0ff 70%,#e8e4ff 100%); }
.v5-contact-banner h1 { margin:0 0 20px; }
.v5-contact-banner .v2-content-lead { margin:0 auto; max-width:760px; font-size:18px; }
.v5-contact-banner .v2-contact-email { font-size:24px; line-height:1.5; margin:24px auto !important; overflow-wrap:anywhere; }
.v5-contact-banner .actions { margin:0; }
.v2-family-page .v2-hero { padding-bottom:0; }
.v5-family-art { width:min(820px,100%); aspect-ratio:1080 / 1035; overflow:hidden; margin:36px auto 0; }
.v2-family-page .v5-family-art .v2-family-phones { display:block; width:100%; max-width:none; max-height:none; margin:0; border-radius:0; }
.v2-family-page .v2-hero + .v4-hero-support { padding-top:48px; }
.v5-pricing-setup { padding:24px 28px; border:1px solid var(--v2-line); border-radius:20px; background:#efedff; margin:0 0 32px; }
.v5-pricing-setup h3,.v5-step-two { margin:0 0 12px; font-size:24px; }
.v5-pricing-setup .v5-capacity-intro { margin:0 0 20px; font-size:16px; }
.v2-pricing .v5-pricing-setup .v2-pricing-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
.v2-pricing .v5-pricing-setup .v2-pricing-field { display:flex; flex-direction:column; align-items:stretch; }
.v2-pricing .v5-pricing-setup .v2-pricing-field + .v2-pricing-field { margin-top:0; }
.v5-pricing-setup .v2-pricing-field label { font-size:16px; font-weight:600; }
.v5-pricing-setup .v2-pricing-field p { font-size:14px; margin:8px 0 12px; }
.v5-pricing-setup .v2-pricing-stepper { max-width:none; margin-top:auto; }
.v2-pricing .v5-pricing-setup .v2-pricing-intervals { margin:22px 0 0; max-width:none; width:100%; align-items:center; gap:10px; }
.v5-pricing-setup .v2-pricing-intervals label { flex:0 1 150px; }
.v5-pricing-setup #pricing-annual-saving { flex:1 1 260px; margin:0 0 0 10px; min-height:0; font-size:14px; }
.v5-rounded-allowance { color:var(--v2-purple); font-weight:600; }
.v5-step-two { margin-bottom:20px; }
.v4-plan-setups,.v4-plan-actions { grid-template-columns:25% 35% 40%; }
.v4-plan-actions .v4-action--starter { grid-column:2; }
.v4-plan-actions .v4-action--professional { grid-column:3; }
.v4-plan-setup { padding:24px; display:flex; flex-direction:column; align-items:flex-start; gap:18px; }
.v4-plan-setup h4 { font-size:26px; font-weight:500; margin:0; }
.v4-plan-setup .v2-pricing-total { font-size:48px; }
.v4-plan-setup .btn { margin-top:auto; }
.v5-starter-description { font-size:16px; margin:0; }
.v4-comparison col:nth-child(1) { width:25%; }
.v4-comparison col:nth-child(2) { width:35%; }
.v4-comparison col:nth-child(3) { width:40%; }
.v4-comparison .v5-table-head { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.v4-comparison th,.v4-comparison td { padding:18px 22px; }
.v4-plan-actions .v3-plan-action { padding:20px 24px; }
@media(max-width:1000px) {
 .v5-assurance-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .v5-assurance-card { padding:24px 20px; grid-template-columns:58px minmax(0,1fr); gap:16px; }
 .v5-assurance-card:last-child { grid-column:auto; }
 .v5-assurance-card .v5-assurance-art { width:58px; }
 .v5-assurance-art img { width:58px; }
 .v5-standard-strip { grid-auto-flow:row; grid-template-rows:none; grid-template-columns:repeat(auto-fit,minmax(124px,1fr)); grid-auto-columns:auto; overflow:visible; padding:4px 0 12px; gap:24px 12px; }
 .v5-standard-strip li,.v5-standard-strip li:nth-child(8) { grid-column:auto; }
 .v5-strip-hint { display:none; }
}
@media(max-width:700px) {
 .v5-home-banner .v2-hero { padding-bottom:24px; }
 .v5-home-standards { padding-bottom:24px; }
 .v5-assurance-grid { grid-template-columns:1fr; }
 .v5-assurance-card { padding:24px 20px; }
 .v5-contact-banner { padding:48px 0; }
 .v5-contact-banner .v2-contact-email { font-size:20px; }
 .v5-contact-banner .v2-content-lead { font-size:16px; }
 .v2-family-page .v2-hero + .v4-hero-support { padding-top:32px; }
 .v4-commissioner { padding:0; }
 .v5-pricing-setup { padding:22px 18px; }
 .v2-pricing .v5-pricing-setup .v2-pricing-controls { grid-template-columns:1fr; gap:20px; }
 .v5-pricing-setup #pricing-annual-saving { flex-basis:100%; margin:4px 0 0; }
 .v5-pricing-setup .v2-pricing-intervals label { flex:1 1 0; }
 .v4-plan-setups { grid-template-columns:1fr 1fr; gap:10px; }
 .v4-plan-setup { grid-column:auto; padding:18px 14px; gap:14px; border-radius:16px; }
 .v4-plan-setup h4 { font-size:20px; }
 .v4-plan-setup .v2-pricing-total { font-size:clamp(24px,6vw,36px); white-space:nowrap; }
 .v4-plan-setup .v3-plan-price p:not(.v2-pricing-total) { font-size:13px; }
 .v4-plan-setup .btn { padding:10px 12px; font-size:13px; width:100%; text-align:center; }
 .v4-comparison .v5-table-head { display:table-header-group; }
 .v4-comparison { margin-top:20px; }
 .v4-plan-actions { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:40px; }
 .v4-plan-actions .v4-action--starter { grid-column:1; }
 .v4-plan-actions .v4-action--professional { grid-column:2; }
}
@media(max-width:380px) {
 .v4-plan-setups { grid-template-columns:1fr; }
 .v4-plan-setup { display:grid; grid-template-columns:1fr; padding:18px; gap:12px; }
 .v4-plan-setup .v2-pricing-total { font-size:32px; }
 .v4-plan-setup .btn { width:auto; justify-self:start; }
}

/* V6: R09 corrections. Existing media and standard marks are retained. */
.v5-home-banner { background:#f7faff; }
.v5-home-banner .v2-hero { background:linear-gradient(180deg,#c2bafa 0%,#eeecff 60%,#f7faff 100%); }
.v6-contact-opening { background:#e8e4ff; }
.v6-contact-opening .v4-contact-kit { background:linear-gradient(180deg,#e8e4ff 0%,#f7faff 100%); }
.v2-rachel .v6-quote-highlight { font-family:inherit; font-size:1.6em; font-style:normal; font-weight:700; line-height:1.08; color:var(--v2-purple); white-space:normal; }
.v3-combined > .v3-route-card--dashboard { align-self:center; justify-content:flex-start; gap:20px; }
.v3-combined > .v3-route-card--dashboard > h3,
.v3-combined > .v3-route-card--dashboard > p,
.v3-combined > .v3-route-card--dashboard > img { margin:0; }
.v6-capacity-heading { font-size:24px; margin:0 0 12px; }
.v5-capacity-intro { margin:0 0 20px; font-size:16px; }
.v2-pricing { --v6-price-size:48px; }
.v2-pricing .v4-plan-setup .v2-pricing-total,
.v2-pricing .v5-pricing-setup .v2-pricing-stepper input { font-size:var(--v6-price-size); font-weight:700; line-height:1.1; }
.v2-pricing .v5-pricing-setup .v2-pricing-stepper input { min-width:0; width:100%; padding:12px 4px; }
.v2-pricing .v4-plan-setup--professional .v2-pricing-intervals { display:flex; flex:0 0 auto; flex-wrap:wrap; width:100%; max-width:none; margin:0; padding:0; gap:8px; }
.v4-plan-setup--professional .v2-pricing-intervals label { flex:1 1 0; min-width:0; }
.v4-plan-setup--professional .v2-pricing-intervals label span { padding:9px 12px; font-size:15px; }
.v4-plan-setup--professional #pricing-annual-saving { flex-basis:100%; font-size:13px; line-height:1.5; margin:4px 0 0; min-height:0; }
.v4-plan-setup--starter { align-self:start; }
@media(min-width:901px) {
 .v3-combined > div:first-child::after,.v3-combined > div:last-child::before { top:50%; transform:translateY(-50%); line-height:1; }
}
@media(max-width:700px) {
 .v2-pricing { --v6-price-size:clamp(24px,6vw,36px); }
 .v4-plan-setup--professional .v2-pricing-intervals { gap:6px; }
 .v4-plan-setup--professional .v2-pricing-intervals label span { padding:8px 4px; font-size:13px; }
 .v4-plan-setup--professional #pricing-annual-saving { font-size:12px; }
}
@media(max-width:380px) { .v2-pricing { --v6-price-size:32px; } }

/* V6 R10: hero actions, the white trust section and comparison-table actions. */
.v2-hero .v6-hero-actions,
.v5-contact-banner .v6-hero-actions { justify-content:center; margin:0 auto 32px; }
.v6-home-trust { background:#fff; }
.v4-plan-actions .v3-plan-action { display:flex; flex-direction:column; align-items:stretch; padding:20px 24px; }
.v4-plan-actions .v3-plan-action > .btn { display:flex; align-items:center; justify-content:center; margin:0; }
@media(max-width:700px) {
 .v2-hero .v6-hero-actions,
 .v5-contact-banner .v6-hero-actions { margin-bottom:24px; }
 .v4-plan-actions .v3-plan-action { padding:16px 8px; }
 .v4-plan-actions .v3-plan-action > .btn { min-height:64px; padding:10px 8px; font-size:13px; }
}

/* V7 R1: the first two produced illustrations replace their image-direction
   placeholders. The Evidence hero reuses the site's own .v2-hero__image, so only
   the loop picture needs a rule: the same white block on a tinted band that
   .v2-loop__dashboard already is, so it reads as a card and not as a gap. */
.v2-loop__art { display:block; width:100%; height:auto; border-radius:16px; background:#fff; box-shadow:0 22px 70px #4c388d20; }

/* V7 R2: the six key-number cards under the Home hero, in the owner's slide-18 style.
   A row heading, then three cards each with a small label, one figure and one sentence
   that carries its own qualification. Purple #6352c9 on white measures 5.86:1, so both
   the label and the figure clear the 4.5 bar at any size. */
.v7-kpi-strip { padding:56px 0 8px; background:#fff; }
.v7-kpi-row + .v7-kpi-row { margin-top:40px; }
.v7-kpi-row__heading { margin:0 0 20px; font-size:clamp(20px,2.2vw,26px); font-weight:600; line-height:1.2; color:var(--v2-purple); }
.v7-kpi-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:0; padding:0; list-style:none; }
.v7-kpi-card { display:flex; flex-direction:column; gap:12px; padding:24px; border:1px solid var(--v2-line); border-top:4px solid var(--v2-purple); border-radius:0 0 14px 14px; background:#fff; }
.v7-kpi-card__label { margin:0; text-transform:uppercase; letter-spacing:.11em; font-size:12px; font-weight:600; color:var(--v2-purple); }
.v7-kpi-card__figure { margin:0; font-size:clamp(34px,4vw,50px); font-weight:600; line-height:1.05; letter-spacing:-.035em; color:var(--v2-purple); }
.v7-kpi-card__note { margin:0; font-size:15px; line-height:1.5; color:var(--v2-ink); }
.v7-kpi-card--quotes { gap:18px; }
.v7-kpi-card__quote { margin:0; }
.v7-kpi-card__quote blockquote { margin:0; }
.v7-kpi-card__quote blockquote p { margin:0; font-size:16px; line-height:1.5; font-style:italic; color:var(--v2-ink); }
.v7-kpi-card__who { margin:8px 0 0; font-size:13px; font-weight:600; color:var(--v2-purple); font-style:normal; }
.v7-kpi-strip__more { margin:28px 0 0; }
@media(max-width:900px) {
 .v7-kpi-cards { grid-template-columns:1fr; gap:14px; }
 .v7-kpi-strip { padding:36px 0 4px; }
 .v7-kpi-row + .v7-kpi-row { margin-top:28px; }
 .v7-kpi-card { padding:20px; }
}

/* V7 R2: a council in the clients list carries no NHS lozenge. The NHS mark is the NHS
   identity and belongs only to an NHS organisation, so a non-NHS client gets the same
   wordmark block in the site's own navy with the mark left out. */
.logo-cell.org-wordmark { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:0; padding:18px; text-align:left; background:transparent; border:0; border-radius:0; font-family:Arial,Helvetica,sans-serif; }
.org-wordmark .org-wordmark__name { color:#212b32; font-size:18px; line-height:1.15; font-weight:700; }
.org-wordmark .org-wordmark__type { color:var(--v2-purple); font-size:18px; line-height:1.15; font-weight:700; }
@media(max-width:700px) {
 .logo-cell.org-wordmark { padding:12px; }
 .org-wordmark__name,.org-wordmark__type { font-size:16px; line-height:1.15; }
}

/* V7 R2: the one feature line the two plan cards now carry. Both plans include it, so it
   sits on both cards and as a row in the comparison table below them. */
.v7-plan-features { margin:14px 0 0; padding:0; list-style:none; }
.v7-plan-features li { position:relative; padding-left:24px; font-size:15px; line-height:1.45; color:var(--v2-ink); }
.v7-plan-features li::before { content:""; position:absolute; left:0; top:.55em; width:14px; height:8px; border-left:2px solid var(--v2-purple); border-bottom:2px solid var(--v2-purple); transform:rotate(-45deg); }

/* V7 R2 design review: three fixes the renders showed.
   1. A figure that wraps to two lines pushed its own sentence down while its neighbours'
      started higher, so a row read as three cards rather than one band. The figure block
      now reserves two lines at the three-up width, but only in a row that actually has a
      long value: reserving it in a row of short figures leaves a hole instead. Nothing is
      reserved on mobile, where the cards stack and there is no neighbour to line up with.
   2. A client cell with no NHS mark floated above its NHS neighbours, because the mark is
      what sets their height. A non-NHS cell now reserves the same box and leaves it empty. */
@media(min-width:901px) { .v7-kpi-row--tall-figures .v7-kpi-card__figure { min-height:2.1em; } }
.org-wordmark::before { content:""; display:block; width:60px; height:24px; margin:0 0 5px; }
@media(max-width:700px) { .org-wordmark::before { margin-bottom:5px; } }

/* V7 R6, media. Two videos land in this release: the five minute overview film on Home and on
   Clinics and Schools, and the mascot welcome loop in the Home hero.
   The film is content, so it keeps the browser's own controls, like every other film on the
   site. The mascot is artwork: a permanent player bar across it read as a broken embed in the
   first review renders, so it carries its own labelled pause button instead, which is the
   pause mechanism WCAG 2.2.2 asks for on motion that runs past five seconds. Nothing
   autoplays from the markup. /js/v2.js starts the loop and reveals the button together, and
   only for a reader who has not asked for less motion, so a reduced-motion reader and a
   reader with no JavaScript both get the still poster frame and no control that does nothing. */
.v7-hero-mascot { width:clamp(104px,13vw,152px); margin:0 auto 20px; text-align:center; }
.v7-hero-mascot video { width:100%; height:auto; display:block; border-radius:26px; background:#c9c1fb; }
.v7-hero-mascot__pause { margin-top:8px; padding:3px 10px; border:1px solid #ffffff00; border-radius:999px;
 background:#ffffff8c; color:#3a3170; font:inherit; font-size:12px; line-height:1.4; cursor:pointer; }
.v7-hero-mascot__pause:hover { background:#fff; }
.v7-hero-mascot__pause:focus-visible { outline:3px solid var(--v2-purple); outline-offset:2px; }
.v7-film-block { max-width:940px; margin:0 auto; }
.v7-film video { width:100%; height:auto; display:block; border-radius:20px; background:#191640; }
/* The both-routes film sits inside the One plan, both routes section,
   under the three-column diagram, rather than in a film block of its own: the diagram and the
   film are the same explanation twice, once to read and once to watch. The introduction line
   is a sentence above the player, not a heading, because the section already has one. The
   transcript is a native disclosure closed on load, in the same shape as the question rows
   elsewhere on the site, so a reader who cannot use sound gets the whole script without the
   page carrying three minutes of words in front of everyone else. */
.v7-film--inline { max-width:940px; margin:44px auto 0; }
.v7-film__intro { margin:0 0 16px; text-align:center; }
/* Captions are off until the reader asks for them, and every browser hides its own caption
   control somewhere different: Chromium puts it inside the three-dot menu, so turning captions
   on there costs two taps. This button is the one tap the checklist asks for, in the same shape
   as the pause button on the mascot loop and the play buttons on the six feature clips. It is
   hidden in markup and shown by the script, so a reader with no JavaScript is never offered a
   dead control and still reaches the captions through the browser's own menu. */
.v7-film__captions { margin-top:12px; padding:7px 16px; min-height:36px; border:1px solid var(--v2-line);
 border-radius:999px; background:#f6f4ff; color:#3a3170; font:inherit; font-size:14px; line-height:1.4; cursor:pointer; }
.v7-film__captions:hover { background:#ebe7ff; }
.v7-film__captions:focus-visible { outline:3px solid var(--v2-purple); outline-offset:2px; }
.v7-film-transcript { margin-top:18px; border-top:1px solid var(--v2-line); }
.v7-film-transcript > summary { padding:18px 44px 18px 0; min-height:44px; position:relative;
 cursor:pointer; list-style:none; font-weight:600; }
.v7-film-transcript > summary::-webkit-details-marker { display:none; }
.v7-film-transcript > summary::after { content:"+"; position:absolute; right:4px; top:50%;
 transform:translateY(-50%); color:var(--v2-purple); font-size:30px; line-height:1; }
.v7-film-transcript[open] > summary::after { content:"\2212"; }
.v7-film-transcript__body { padding:0 0 22px; max-width:760px; }
.v7-film-transcript__body p + p { margin-top:14px; }

@media(max-width:700px) {
 .v7-hero-mascot { width:96px; margin-bottom:14px; }
 .v7-film video { border-radius:14px; }
 .v7-film--inline { margin-top:32px; }
}

/* V7 R7, the six family topic pages under /resources/. Each page is one topic from the app:
   the family question as the H1, the animation the app plays, the topic text as it stands, and
   a short reading block. Three things need their own rules.
   1. The animation is 720 by 900, a phone-shaped film in a 960 pixel reading column. Left at the
      column width it would stand nine hundred pixels tall and push the words off the screen, so
      it is capped and centred, with the caption under it. The owner asked on 18 September for a
      bigger picture than the first 380 pixel cut, so the cap is now 560 pixels, and a second cap
      of 64vh keeps the film inside a short laptop screen: at four by five, 64vh of width is 80vh
      of height, so the question above it and the first words below it stay in view.
   2. The limits line is the one sentence on the page that is not the app's words: what this topic
      cannot tell a family. It is marked as a quiet aside so a reader skimming still meets it.
   3. The reading block closes every topic with the NHS, NICE and RCSLT links and the claims
      sentence, on the recessed surface the rest of the site uses for a quiet panel. */
/* the shared article rule sets figure margins, so the topic film needs the same reach to centre */
.v3-source-richtext .v7-topic-film { max-width:min(560px,64vh); margin:8px auto 36px; }
/* the site clears every list marker by default, which suits its card and grid lists. A topic's
   own numbered steps and bullet points are ordinary prose lists and need their markers back,
   or a numbered list of five reasons reads as five unrelated paragraphs. */
.v7-topic .v3-source-richtext ul { list-style:disc; padding-left:22px; margin:16px 0; }
.v7-topic .v3-source-richtext ol { list-style:decimal; padding-left:24px; margin:16px 0; }
.v7-topic .v3-source-richtext li { margin-bottom:10px; }
.v7-topic-film video { width:100%; height:auto; display:block; border-radius:20px; background:#191640; }
.v7-topic-film figcaption { margin-top:10px; color:var(--navy-quiet); font-size:15px; line-height:1.5; text-align:left; }
.v7-topic-byline { margin-block:16px; }
.v7-topic-limits { border-left:4px solid var(--lavender); padding:2px 0 2px 16px; color:var(--navy-quiet); }
.v7-topic-reading { margin-top:40px; padding:24px 28px; background:var(--tint); border:1px solid var(--edge);
 border-radius:var(--radius-sm); }
.v7-topic-reading h2 { margin:0 0 12px; font-size:clamp(20px,2.2vw,26px); }
.v7-topic-reading ul { margin:0 0 16px; padding-left:20px; }
.v7-topic-reading li { margin-bottom:8px; }
.v7-topic-reading p { margin:0; color:var(--navy-quiet); }
@media(max-width:700px) {
 .v3-source-richtext .v7-topic-film { max-width:100%; }
 .v7-topic-film video { border-radius:14px; }
 .v7-topic-reading { padding:20px; }
}
.v7-topic-list { margin:20px 0 0; padding-left:20px; max-width:68ch; }
.v7-topic-list li { margin-bottom:12px; }

/* V7 R8, the six feature boxes on Clinics and Schools. The page used to give each feature a
   full width band with a thirty second silent film in a player beside the words. The owner
   asked on 15 September for "those 6 features as text in a box and then to it another box with
   the gif", and Ronan's six short clips are what those boxes hold.
   Three things follow from that, and each one is a rule below.
   1. A pair of boxes, not a band. Each feature is one white card on a tinted run, holding the
      words on the left and the clip on the right, the same way round every time. The old page
      swapped sides on every other feature, which suited six tall bands and reads as restlessness
      once they are cards. The card is the .v2-card language the rest of the site already uses.
   2. The clip is nine to fifteen seconds, silent and loops, so it is artwork rather than a film
      and it carries no scrubber once JavaScript is running: /js/v2.js takes the browser controls
      off and gives it one labelled button instead, on the same reasoning the mascot loop records
      above. The markup ships WITH controls so a reader with no JavaScript still has a working
      player rather than a dead picture, which is the one place this differs from the mascot.
   3. Nothing plays by itself, at any width and whatever the reader has asked for in the way of
      motion. The brief for this page is explicit that the six clips must not autoplay, so the
      still poster frame is what everybody meets and the first frame of every clip is a readable
      picture of the screen it is about. data-demo keeps the six of them to one at a time.
   One treatment at every width, deliberately. On a phone the clip is about 350 pixels across and
   the dashboard inside it is small either way, so putting the browser's player back would buy a
   full screen button at the price of a dark bar over the lower third of every picture. The
   sentence above each clip is what carries the detail on a small screen, and a reader with no
   JavaScript keeps the native player, full screen button and all. */
.v7-feature-boxes { background:var(--v2-pale); padding:76px 0; }
.v7-feature-boxes .v2-section { padding:0; }
.v7-feature-boxes .v2-section + .v2-section { padding-top:24px; }
.v7-feature-box { display:grid; grid-template-columns:minmax(0,1fr); gap:28px; text-align:center;
 align-items:center; padding:30px; border:1px solid var(--v2-line); border-radius:20px; background:#fff; }
.v7-feature-box > * { min-width:0; }
.v7-feature-box__text > * + * { margin-top:18px; }
.v7-feature-box__text h2 { font-size:clamp(23px,2.1vw,31px); line-height:1.15; letter-spacing:-.03em; }
.v7-feature-box__text p { line-height:1.6; }
.v7-feature-box__text p + p { color:#4a4370; font-size:15px; }
.v7-feature-box__clip { margin:0; display:flex; flex-direction:column; align-items:center; width:100%; }
.v7-feature-box__text { width:100%; max-width:900px; margin-inline:auto; }
/* Ronan's clips carry their own pale lilac frame, which is all but the colour of the run behind
   the cards, so without a line the clip reads as a hole in the card rather than a picture in it. */
.v7-feature-boxes .v2-feature video { width:100%; height:auto; display:block; border-radius:14px;
 border:1px solid var(--v2-line); background:var(--v2-pale); box-shadow:none; }
.v7-feature-box__play { margin-top:12px; padding:7px 16px; min-height:36px; border:1px solid var(--v2-line);
 border-radius:999px; background:#f6f4ff; color:#3a3170; font:inherit; font-size:14px; line-height:1.4; cursor:pointer; }
.v7-feature-box__play:hover { background:#ebe7ff; }
.v7-feature-box__play:focus-visible { outline:3px solid var(--v2-purple); outline-offset:2px; }

@media(max-width:900px) {
 .v7-feature-boxes { padding:56px 0; }
 .v7-feature-boxes .v2-section + .v2-section { padding-top:18px; }
 .v7-feature-box { grid-template-columns:1fr; gap:24px; padding:22px 0; }
 .v7-feature-box__text { padding-inline:22px; }
 .v7-feature-box__clip { align-items:stretch; }
 .v7-feature-box__play { align-self:center; }
}

/* V7 R9: the two Home solution cards now carry produced illustrations in their
   declared slots. Left in the stock .v2-card__media box, a 3:2 picture is drawn
   small and its own white field reads as an undressed rectangle floating on the
   lavender band, the same fault QA round 1 found on the Home loop picture. So the
   media box takes the picture's own 3:2 shape and the picture fills it: the white
   becomes the card's picture panel, as .v2-loop__art already does on this page,
   and nothing is cropped because box and image share one aspect ratio. */
.v2-card__media:has(img) { height:auto; aspect-ratio:3 / 2; }
.v2-card__media:has(img) img { padding:0; object-fit:cover; }

/* V7 R9: the Home connector slot now carries its produced picture. The stock rule
   beside it sized an inline SVG, so the picture takes the same full column width and
   keeps its own proportion. Its background is transparent, so it reads as a connector
   drawn on the page band instead of a bare white rectangle between two rounded cards,
   which is how the first render of it read. The session panel needs no rule of its
   own: once its box holds a picture the page's own .v2-loop__dashboard card comes
   back, which is what that panel was drawn for. Each of the three panels ends with
   its own label, so the row is bottom-aligned and the three labels sit on one line
   whatever height each picture takes, and the connector stays centred between them. */
.v2-loop__connector { display:block; width:100%; height:auto; }
.v2-loop:has(.v2-loop__connector) { align-items:end; }
.v2-loop:has(.v2-loop__connector) .v2-loop__arrows { align-self:center; }

/* Owner review 20 September: distinct pricing cards and full-width landscape films. */
.v2-pricing-routes { gap:24px; align-items:stretch; }
.v2-pricing-routes article { display:flex; flex-direction:column; padding:28px; border:1px solid var(--v2-line); border-radius:20px; background:var(--paper,#f7faff); }
.v2-pricing-routes article > h3 { text-align:center; }
.v2-pricing-routes .v8-pricing-route-image { width:100%; height:auto; aspect-ratio:4 / 3; object-fit:contain; margin:12px 0 24px; border-radius:12px; }
.v2-pricing-routes article > .link { margin-top:auto; padding-top:20px; }
.v7-film-block,.v7-film--inline,.v2-family-film { width:100%; max-width:100%; }
.v7-film { margin-inline:0; }
.v2-routes { align-items:stretch; }
.v2-routes > .v2-card { height:100%; }
.v2-routes > .v2-card > h3 { text-align:center; }
.v4-hero-support .actions { justify-content:center; margin-top:24px; }

/* Marketing hero order: heading, existing artwork, supporting copy, action. */
.v8-marketing-image { width:min(760px,100%); margin:32px auto; max-height:560px; object-fit:contain; }
.newsletter-page .v8-marketing-image { width:min(360px,80%); }
.v2-content-hero .v2-content-lead { margin:28px auto 24px; max-width:760px; }
.v2-content-hero .actions { justify-content:center; }
.v2-pricing-jump { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }

/* Owner comments 1, 2 and 16: complete art-directed home/clinic composition. */
.home-support-loop { display:block; width:100%; max-width:1140px; margin:32px auto 0; }
.home-support-loop img { display:block; width:100%; height:auto; }
@media (max-width:700px) { .home-support-loop { max-width:650px; } }

/* Equal handset scale across Public Organisations. Tier 4 assets share a 1:2
   canvas and approximately 90% handset height, including their transparent margins. */
#main-content.public-organisations-page img.po-phone {
  display:block; float:none; width:150px; height:300px; max-width:100%; max-height:none;
  object-fit:contain; margin:16px auto; background:transparent; border-radius:0;
}
#main-content.public-organisations-page .v2-routes img.po-phone { margin:0 auto; }
@media (max-width:600px) {
  #main-content.public-organisations-page .v2-flow > li { display:block; text-align:center; }
}

/* Owner Home spacing correction. */
.v5-home-banner .v2-hero { padding-top:32px; }
@media (max-width:700px) { .v5-home-banner .v2-hero { padding-top:24px; } }

/* Owner-requested original group illustration at the end of Home and Contact. */
.community-closing { background: #fff; padding: 32px 0 0; }
.community-closing img { display: block; width: 100%; height: auto; margin: 0 auto; }
@media (max-width: 700px) { .community-closing { padding-top: 20px; } .community-closing > .wrap { width: 100%; } }

/* OWNER-HOME-FIXED-SCENE: one stationary scene, two foreground states. */
.hb { --hb-ink:#191640; --hb-quiet:#3b3663; --hb-accent:#6352c9; --hb-rule:rgba(25,22,64,.16);
  background:linear-gradient(180deg,#c2bafa 0%,#eeecff 60%,#f7faff 100%); }
.hb .hb-wrap { padding-top:64px; padding-bottom:40px; }
.hb .hb-h1 { margin:0 0 22px; font-size:clamp(38px,5.2vw,70px); line-height:1.06; letter-spacing:-.05em; color:var(--hb-ink); }
.hb .hb-lede { font-size:clamp(18px,2vw,22px); line-height:1.6; color:var(--hb-quiet); margin:0 0 28px; }
.hb .hb-actions { display:flex; gap:14px; flex-wrap:wrap; margin:24px 0 0; }

/* Text tabs stay distinct from the two action buttons. */
.hb-tablist { display:flex; gap:26px; box-shadow:inset 0 -1px 0 var(--hb-rule); }
.hb-tab { appearance:none; -webkit-appearance:none; background:none; border:0; border-bottom:3px solid transparent;
  margin:0; padding:8px 2px 9px; font:inherit; font-size:clamp(15px,1.25vw,17px); font-weight:600; line-height:1.3;
  color:var(--hb-quiet); cursor:pointer; }
.hb-tab:hover { color:var(--hb-ink); border-bottom-color:var(--hb-rule); }
.hb-tab[aria-selected="true"] { color:var(--hb-ink); border-bottom-color:var(--hb-accent); }
.hb-tab:focus-visible { outline:3px solid var(--hb-ink); outline-offset:3px; border-radius:3px; }

/* Both panels occupy the same grid cell and retain identical tracks, including
   the phone's reserved product space. Inactive content is inert and hidden from
   accessibility APIs, but contributes its height so text and actions never jump. */
.hb-panels { --hb-scene-track:38%; --hb-column-gap:40px; position:relative; display:grid; }
.hb-panels > .hb-panel { grid-area:1 / 1; display:grid; column-gap:var(--hb-column-gap); row-gap:12px;
  grid-template-columns:var(--hb-scene-track) minmax(0,1fr); grid-template-rows:auto minmax(70px,auto); }
.hb-panel[hidden] { display:grid !important; visibility:hidden; pointer-events:none; }
.hb-panel:focus-visible { outline:3px solid var(--hb-ink); outline-offset:6px; border-radius:8px; }
.hb-setting { grid-column:1; grid-row:1; margin:0; align-self:center; font-size:12px; letter-spacing:.09em;
  text-transform:uppercase; font-weight:700; line-height:1.4; color:var(--hb-ink); text-align:center; }
.hb-scene-space { grid-column:1; grid-row:1; width:100%; aspect-ratio:5 / 4; align-self:start; }
.hb-value { grid-column:1; grid-row:2; margin:0; font-size:17px; line-height:1.5; color:var(--hb-quiet); text-align:center; }
.hb-product { grid-column:2; grid-row:1 / 3; min-width:0; min-height:400px; display:flex; align-items:center; justify-content:center; }
.hb-screen { display:block; width:100%; max-width:800px; height:auto; border-radius:14px;
  box-shadow:0 18px 44px rgba(25,22,64,.20); background:#fff; }
.hb-screen--phone { width:auto; height:400px; max-width:100%; object-fit:contain; border-radius:0; box-shadow:none; background:none; }

/* This element never switches or remounts. Only the transparent people layers
   fade, so clock, plant and rug keep exactly the same pixels and coordinates. */
.hb-scene { position:absolute; z-index:1; top:0; left:0; width:var(--hb-scene-track); aspect-ratio:5 / 4; pointer-events:none; }
.hb-scene img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; }
.hb-scene-people { transition:opacity 180ms ease; }
.hb-scene-people--home { opacity:0; }
.hb[data-service="home"] .hb-scene-people--pro { opacity:0; }
.hb[data-service="home"] .hb-scene-people--home { opacity:1; }
@media (prefers-reduced-motion:reduce) { .hb-scene-people { transition:none; } }
body:has(.motion-control[aria-label="Resume animations"]) .hb-scene-people { transition:none; }

.hb--centred .hb-wrap { text-align:center; max-width:1180px; }
.hb--centred .hb-h1 { max-width:960px; margin-left:auto; margin-right:auto; }
.hb--centred .hb-lede { max-width:820px; margin-left:auto; margin-right:auto; }
.hb--centred .hb-tablist { justify-content:center; width:fit-content; max-width:100%; margin:0 auto 28px; }
.hb--centred .hb-actions { justify-content:center; }
.hb--centred .hb-screen:not(.hb-screen--app) { max-width:520px; }
.hb-screen--app { width:100%; max-width:390px; max-height:400px; object-fit:contain; border-radius:0; box-shadow:none; background:none; }

/* Retained split comparison uses the same stationary scene and tab behaviour. */
.hb--split .hb-wrap { display:grid; gap:0 40px; align-items:start;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  grid-template-areas:"title visual" "lede visual" "actions visual" ". tabs"; }
.hb--split .hb-h1 { grid-area:title; align-self:end; }
.hb--split .hb-lede { grid-area:lede; }
.hb--split .hb-panels { grid-area:visual; --hb-scene-track:44%; --hb-column-gap:20px; }
.hb--split .hb-tabs { grid-area:tabs; }
.hb--split .hb-actions { grid-area:actions; align-self:start; margin-top:0; }
.hb--split .hb-tablist { justify-content:flex-start; margin:20px 0 0; }
.hb--split .hb-product { min-height:300px; }
.hb--split .hb-screen--phone { height:300px; }

@media (max-width:1000px) {
  .hb--split .hb-wrap { display:block; }
  .hb--split .hb-tablist { width:fit-content; margin:0 0 28px; }
  .hb--split .hb-panels { --hb-scene-track:38%; --hb-column-gap:40px; }
  .hb--split .hb-actions { margin-top:24px; }
}
@media (max-width:700px) {
  .hb .hb-wrap { padding-top:48px; padding-bottom:32px; }
  .hb-tablist { gap:18px; }
  .hb-panels, .hb--split .hb-panels { --hb-scene-track:100%; --hb-column-gap:0px; max-width:440px; margin:0 auto; }
  .hb-panels > .hb-panel { grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(58px,auto) 320px; }
  .hb-value { font-size:16px; }
  .hb-product, .hb--split .hb-product { grid-column:1; grid-row:3; min-height:0; height:320px; }
  .hb-screen--phone, .hb--split .hb-screen--phone { height:320px; }
  .hb-screen--app { max-width:306px; max-height:320px; }
}

/* Owner Home feedback: keep marketing titles clear of the mobile navigation. */
@media (max-width:700px) {
  #main-content > .v2-hero:first-child,
  #main-content > .v2-content-hero:first-child,
  #main-content > .v2-pricing-hero:first-child { padding-top:48px; }
}

/* Owner review: room below navigation, tighter spacing around marketing artwork. */
#main-content > .v2-hero:first-child,
#main-content > .v2-content-hero:first-child,
#main-content > .v2-pricing-hero:first-child,
#main-content > .v5-contact-banner:first-child { padding-top:72px; padding-bottom:32px; }
#main-content > .v2-hero:first-child figure { margin:0; }
#main-content > .v2-hero:first-child .v2-hero__image,
#main-content > .v2-content-hero:first-child .v8-marketing-image { margin:24px auto 0; max-height:460px; width:auto; max-width:100%; object-fit:contain; }
#main-content > .v2-hero:first-child + .v4-hero-support { padding-top:24px; padding-bottom:48px; }
.v5-contact-banner .v7-contact-mascot { width:min(440px,82vw); margin:-24px auto -72px; }
.v5-contact-banner .v2-contact-email { margin:16px auto 0 !important; }
@media (max-width:700px) {
  #main-content > .v2-hero:first-child,
  #main-content > .v2-content-hero:first-child,
  #main-content > .v2-pricing-hero:first-child,
  #main-content > .v5-contact-banner:first-child { padding-top:48px; padding-bottom:24px; }
  #main-content > .v2-hero:first-child .v2-hero__image,
  #main-content > .v2-content-hero:first-child .v8-marketing-image { max-height:360px; margin-top:20px; }
  .v5-contact-banner .v7-contact-mascot { width:min(300px,82vw); margin:-12px auto -40px; }
}

/* Owner feedback round 13: proportional product images and aligned route cards. */
.hb-screen--app { max-width:430px; max-height:440px; }
#main-content.public-organisations-page img.po-phone { width:120px; height:240px; }
#two-routes > .wrap > .v2-heading { max-width:none; }
#two-routes > .wrap > .v2-heading > p,
#two-routes .referral-oversight { text-align:center; font-weight:700; }
#two-routes .v2-flow > li { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:240px 90px minmax(66px,auto); gap:16px; align-items:start; }
#two-routes .v2-flow > li > img { grid-row:1; width:100%; height:240px; margin:0 auto; }
#main-content #two-routes .v2-flow > li > h3,
#main-content #two-routes .v2-routes > .v2-card > h3 { font-size:24px; line-height:1.25; letter-spacing:-.02em; font-weight:500; }
#two-routes .v2-flow > li > h3 { grid-row:2; margin:0; }
#two-routes .v2-flow > li > p { grid-row:3; margin:0; align-self:end; }
.public-organisations-page .v2-triangle { display:grid; grid-template-columns:minmax(0,1fr); grid-auto-rows:1fr; justify-items:center; align-items:stretch; }
.public-organisations-page .v2-tier { min-height:240px; height:100%; box-sizing:border-box; grid-template-columns:minmax(0,1fr) 183px; }
.public-organisations-page .v2-tier:first-child img { width:183px; height:auto; max-height:176px; }
#main-content.public-organisations-page .v2-tier img.po-phone { width:auto; height:176px; max-width:100%; margin:0 auto; }
#main-content.public-organisations-page .v2-tier:last-child img.po-phone { height:166px; }
.v2-family-page .v5-family-art { width:min(440px,100%); aspect-ratio:auto; overflow:visible; margin:20px auto 0; }
#main-content.v2-family-page > .v2-hero:first-child { padding-bottom:12px; }
#main-content.v2-family-page > .v2-hero:first-child + .v4-hero-support { padding-top:12px; padding-bottom:28px; }
.v2-family-page .v5-family-art .v2-family-phones { width:100%; height:auto; max-height:none; margin:0; }
#introducing-superpenguin { padding-top:24px; }
@media(max-width:700px) {
  .hb-screen--app { max-width:336px; max-height:350px; }
  .hb-panels > .hb-panel { grid-template-rows:auto minmax(58px,auto) 350px; }
  .hb-product, .hb--split .hb-product { height:350px; }
  .v2-family-page .v5-family-art { width:min(330px,100%); }
}
@media(max-width:900px) {
  #two-routes .v2-flow > li { grid-template-rows:240px auto auto; }
  #two-routes .v2-flow > li > img { grid-column:1; grid-row:1; }
}
@media(max-width:600px) {
  .public-organisations-page .v2-tier,
  .public-organisations-page .v2-tier:nth-child(1),
  .public-organisations-page .v2-tier:nth-child(2) { width:100%; grid-template-columns:minmax(0,1fr); grid-template-rows:1fr 176px; min-height:0; gap:18px; }
}
/* Shared learning-hours metric and the Evidence chart. */
.v3-kpis .family-usage-card { color:var(--v2-ink,#171440); text-decoration:none; }
.v3-kpis .family-usage-card:hover { border-color:#7464c5; }
.v3-kpis .family-usage-card:hover > span { text-decoration:underline; text-underline-offset:3px; }
.v3-kpis .family-usage-card:focus-visible { outline:3px solid #5d43b2; outline-offset:4px; }
.evidence-app-review { padding-block:36px; }
.evidence-app-review__card { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; padding:clamp(24px,4vw,40px); border:1px solid #d9d2ec; border-radius:20px; background:#f3f0ff; }
.evidence-app-review__card > div { flex:1 1 380px; }
.evidence-app-review__card h2 { font-size:clamp(24px,3vw,32px); margin:0 0 12px; }
.evidence-app-review__card p { max-width:62ch; margin:0; }
.evidence-app-review__card > a { flex:0 1 auto; text-align:center; }
.family-usage { background:#f3f0ff; scroll-margin-top:100px; }
.family-usage__intro { max-width:760px; margin:0 0 44px; }
.family-usage__intro h2 { margin:0 0 18px; }
.family-usage__intro > p { font-size:20px; line-height:1.6; margin:0; }
.family-usage__layout { display:grid; grid-template-columns:minmax(230px,.7fr) minmax(0,1.6fr); gap:48px; align-items:center; }
.family-usage__number { font-size:clamp(76px,8vw,112px); line-height:1; font-weight:500; letter-spacing:-.05em; color:#5d43b2; margin:0 0 20px; }
.family-usage__label { max-width:22ch; font-size:24px; line-height:1.4; margin:0; }
.family-usage__peak { font-size:16px; line-height:1.5; margin:28px 0 0; font-weight:600; }
.family-usage__figure { margin:0; padding:30px; background:#fff; border:1px solid #d9d2ec; border-radius:20px; min-width:0; }
.family-usage__figure > figcaption { text-align:left; font-size:20px; font-weight:600; margin:0 0 24px; }
.family-usage-chart__axis,.family-usage-chart__time { font-size:13px; line-height:1.4; color:#514b63; margin:0 0 16px; }
.family-usage-chart__time { text-align:center; margin:12px 0 0; }
.family-usage-chart__plot { display:grid; grid-template-columns:34px minmax(0,1fr); gap:8px; }
.family-usage-chart__ticks { display:flex; flex-direction:column; justify-content:space-between; text-align:right; font-size:12px; line-height:1; color:#514b63; margin:-6px 0; }
.family-usage-chart__plot > svg { width:100%; height:260px; overflow:visible; }
.family-usage-grid { stroke:#dad6e5; stroke-width:1; }
.family-usage-bar { fill:#7663ce; }
.family-usage-bar--daytime { fill:#d0c8ee; stroke:#887cab; stroke-width:1; }
.family-usage-chart__hours { margin:12px 0 0 42px; display:flex; justify-content:space-between; gap:5px; font-size:12px; color:#514b63; }
.family-usage-legend { display:flex; justify-content:center; gap:12px 24px; flex-wrap:wrap; list-style:none; padding:0; margin:24px 0 0; font-size:14px; }
.family-usage-legend > li { display:flex; align-items:center; gap:8px; margin:0; }
.family-usage-legend__swatch { display:inline-block; width:12px; height:12px; border-radius:2px; background:#7663ce; flex-shrink:0; }
.family-usage-legend__swatch--daytime { background:#d0c8ee; border:1px solid #887cab; }
.family-usage__method { margin:32px 0 10px; font-size:15px; line-height:1.6; max-width:86ch; }
.family-usage__source { margin:0; font-size:13px; line-height:1.6; color:#514b63; max-width:105ch; }
@media (max-width:800px) {
 .family-usage__layout { grid-template-columns:1fr; gap:30px; }
 .family-usage__intro { margin-bottom:32px; }
 .family-usage__headline { text-align:center; }
 .family-usage__number { font-size:86px; margin-bottom:14px; }
 .family-usage__label { margin-inline:auto; font-size:22px; }
 .family-usage__peak { margin-top:18px; }
}
@media (max-width:480px) {
 .family-usage__intro > p { font-size:18px; }
 .family-usage__figure { padding:22px 14px; border-radius:16px; }
 .family-usage__figure > figcaption { font-size:18px; }
 .family-usage-chart__plot > svg { height:220px; }
 .family-usage-chart__hours { font-size:10px; margin-left:34px; }
 .family-usage-chart__plot { grid-template-columns:28px minmax(0,1fr); gap:6px; }
 .family-usage-legend { gap:12px; font-size:12px; }
}

/* OWNER-HOME-DASHBOARD-CLOSEUP: the dashboard in its tablet, still, with a looping close-up of
   the labelled waveform hanging off its lower right corner. The tablet never moves or zooms, so
   its frame never leaves the picture. Everything is sized from the block's own width, except
   the 34px the pause button needs, so the two parts keep their overlap at every width. */
.hb-device { position:relative; width:100%; max-width:600px; margin:0 auto; }
.hb-device__stage { position:relative; padding:0 14% calc(9.7% + 34px) 0; }
.hb-device__tablet { position:relative; }
.hb-device__tablet img { display:block; width:100%; height:auto; filter:drop-shadow(0 18px 30px rgba(25,22,64,.24)); }
/* The ring marks the part of the screen the close-up magnifies, and the lead joins the two.
   The lead is longer than the gap on purpose: the card sits above it and covers the rest, so
   the join holds at every width without a second set of numbers. */
.hb-device__ring { position:absolute; left:17.02%; top:37%; width:77.99%; height:13.11%; border:2px solid var(--hb-accent);
  border-radius:6px; box-shadow:0 0 0 4px rgba(99,82,201,.20); pointer-events:none; }
.hb-device__lead { position:absolute; left:72%; top:50.1%; width:2px; height:30%; background:var(--hb-accent); pointer-events:none; }
.hb-closeup { position:absolute; z-index:2; right:0; bottom:0; width:54%; margin:0; text-align:right; }
.hb-closeup__frame { overflow:hidden; border:2px solid var(--hb-accent); border-radius:14px; background:#f6faf4;
  box-shadow:0 18px 44px rgba(25,22,64,.28); aspect-ratio:9 / 5; }
.hb-closeup__frame video { display:block; width:100%; height:100%; object-fit:cover; background:#f6faf4; }
.hb-closeup__pause { margin:6px 0 0; min-height:28px; padding:3px 12px; border:1px solid rgba(25,22,64,.18); border-radius:999px;
  background:#ffffffd9; color:var(--hb-ink); font:inherit; font-size:12px; line-height:1.4; cursor:pointer; }
.hb-closeup__pause:hover { background:#fff; }
.hb-closeup__pause:focus-visible { outline:3px solid var(--hb-ink); outline-offset:2px; }
@media (max-width:700px) {
  /* The phone block is a fixed 350px tall, so the tablet takes the full width and the close-up
     grows to 72 per cent of it: that keeps a label at about 11px on a 390px phone. */
  .hb-device__stage { padding:0 0 calc(22.9% + 34px) 0; }
  .hb-closeup { width:72%; }
  .hb-closeup__frame { border-radius:12px; }
}

/* Final owner feedback: equal full-wrap films and centred Clinics invitation. */
#overview-video, #both-routes-video, #film-heading { width:100%; max-width:none; margin-inline:0; }
#overview-film, #both-routes-film, #introduction-film { width:100%; max-width:none; height:auto; }
.clinics-closing { text-align:center; }
.clinics-closing .v2-heading { margin-inline:auto; }
.clinics-closing .actions { justify-content:center; }