/* 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 11 entries, never by hand */
.v5-standard-strip li:nth-child(8) { grid-column:4 / 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; }
/* The Stay in the loop box borrows the Newsletter page's panel, which centres
   itself in the column. On Contact its heading and sentence were left at the
   edge of the wrap, so the words sat 280px away from the box they introduce.
   They are centred with it now, like the commissioner kit above and the
   company details below. */
.v7-contact-newsletter > .wrap > h2,
.v7-contact-newsletter > .wrap > p { text-align:center; }
.v7-contact-newsletter > .wrap > p { max-width:46ch; margin-inline:auto; }
.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:stretch; }
@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. */
.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; }

@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; }
}

/* Keep native video controls clear of contact and deletion links. */
.v5-contact-banner .v7-contact-mascot:has(video[controls]) { margin-bottom:16px; }

/* 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__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; }
/* Design QA of 8 October 2026 (DQA-R2-02): stacked on screens up to 800px wide, the label sat
   nearer the chart card than its own number, so it read as the chart's lead-in. The number now
   sits about 32px above its label and the label about 53px above the card. The shared
   .v2-section p rule gives every paragraph in a section a 1.6 line height and outranks the
   number's own, so the rule that tightens the number names its section. */
@media (max-width:800px) {
 .family-usage__layout { grid-template-columns:1fr; gap:48px; }
 .family-usage__intro { margin-bottom:32px; }
 .family-usage__headline { text-align:center; }
 .family-usage .family-usage__number { font-size:86px; line-height:1.3; margin-bottom:0; }
 .family-usage__label { margin-inline:auto; font-size:22px; }
}
@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.
     The block's own height is its width times 0.8618 plus the 34px the pause button needs
     (0.6328 of that for the tablet picture, 0.229 for the close-up hanging below it). A width
     over 366px therefore makes it taller than the 350px block and it hangs out of the bottom.
     The panels are capped at 440px wide, so that happened on every screen from 420px up. */
  .hb-device { max-width:366px; }
  .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. */
#both-routes-video, #film-heading { width:100%; max-width:none; margin-inline:0; }
#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; }
/* Home's quote carousel, below 600px. The controls are pinned to the wrap's inline
   edges, and at 390px the wrap has no outside gutter left, so both buttons sat hard
   against the screen: squashed to 32x40 and drawn as half circles cut by the page
   edge. The clients carousel directly above them keeps 48x48 inside the page gutter,
   so one page showed two sizes and two shapes of the same control. Below 600px the
   arrows now sit in a row under the quotes at that same 48x48, and the quote text
   gets the page's ordinary gutter back instead of the 36px that made room for them.
   The transform is reset because v4 keeps the overlay centred vertically. */
@media (max-width: 600px) {
  .v2-quotes > .wrap { padding-inline: var(--gutter); }
  .v2-quotes__controls {
    position: static;
    transform: none;
    margin: 24px 0 0;
    justify-content: flex-end;
    gap: 12px;
    pointer-events: auto;
  }
  .v2-quotes__controls button { width: 48px; height: 48px; font-size: 20px; }
}

/* Newsletter (/newsletter/), QA round 1. The page block in site.css composes the
   title, the supporting sentence and the form panel as one section, but the page
   renders three, so its spacing lands in the wrong places: at 1440 the title is
   followed by 153.6px of empty lavender, the sentence by 152px of empty white
   (the panel's own 56px margin stacked on the section's 96px padding), and the
   panel meets the navy footer after 96px, the shortest gap of the three. The
   brief asks for the generous run at the footer and the form directly below the
   sentence, and on a 1366x768 laptop the stacked gap pushed the email field and
   Subscribe below the fold. These two lines put the same numbers where the block
   meant them, without touching site.css or the Home reference it is hashed into. */
.section.newsletter-page { padding-bottom: var(--section); }
.newsletter-page__panel { margin-top: 0; margin-bottom: calc(var(--section) * 0.6); }

/* Legacy release-note arrivals (/product-updates/), QA round 1. The page forwards a
   reader with JavaScript, so the only people who read it are the ones without: someone
   following an old release-note link from a mail client, a cached page or a reader with
   scripts off. They arrived at a sentence with three underlined lines stuck to it, all
   four separated by the same 4px, so the sentence read as the first item of its own list
   and the three destinations read as one run-on block. These four lines give the list its
   own space, set the items apart from each other, and make each link a full-size target
   on a phone. No new colour, no new type size: the page keeps the shared body style. */
.legacy-arrival__links { margin-top: 28px; display: grid; gap: 4px; justify-items: start; }
.legacy-arrival__links a { display: inline-block; padding: 6px 0; }

/* Family access hero. Owner request, 7 October 2026: the App Store and Google Play badges are the
   page's main call to action, under the app picture and above the introduction. The two files are
   the old superpenguin.com badges, byte for byte, so the artwork is never redrawn, recoloured or
   animated here. Both are drawn 48px tall: over Apple's 40px and Google's 28px onscreen minimums
   and the 44px touch target, and one height, so the Google Play badge is never the smaller one.
   The 16px gap and the 24px above keep the quarter of the badge height both stores ask to stay
   clear. They sit side by side down to a 353px screen and otherwise wrap to one centred badge
   per row. */
.v2-family-page .v7-store-badges { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:16px; margin:24px 0 0; padding:0; }
.v2-family-page .v7-store-badge { display:block; flex:none; border-radius:10px; }
.v2-family-page .v7-store-badge img { display:block; width:auto; height:48px; max-width:none; }
/* Design QA of 7 October 2026 (DQA-01): at 48px the pair needs a 366px screen to share a row, so
   on a 360px phone, almost always an Android one, Google Play wrapped under App Store and off the
   first screen. Below 366px both badges are drawn 46px tall, still over the 44px touch target and
   the stores' minimums, the same 16px apart, so they share a row down to a 353px screen. */
@media (max-width:365px) {
  .v2-family-page .v7-store-badge img { height:46px; }
}
/* Design QA of 7 October 2026 (DQA-01): the badges stay on the first screen of shorter windows,
   720px to 1000px tall on a laptop and 600px to 800px tall on a phone. There the picture loses
   the empty transparent bands above and below the phones, rows 0 to 139 and 1020 to 1126 of the
   1080x1127 file, where the shadow is at most 1% opaque, so no visible pixel is cut. Its width is
   also capped by the window height. 534px is everything above the picture on a laptop (header,
   hero padding, eyebrow and three heading lines) plus the 24px gap, the 48px badges and 16px to
   spare below them, and 436px is the same on a phone with four heading lines. The picture never
   drops under 240px (laptop) or 200px (phone) wide. Shorter views, such as a page zoomed to 200%
   or a phone on its side, cannot fit the badges anyway, so they keep the full picture, as do
   taller windows such as 1680x1050. Phones taller than 800px, among them the 390x844 phone the
   renders use, lose only the transparent foot, in the last rule of the file. */
@media (min-width:701px) and (min-height:720px) and (max-height:1000px) {
  #main-content.v2-family-page > .v2-hero:first-child .v5-family-art { width:min(100%, clamp(240px, calc((100vh - 534px) * 1080 / 880), 440px)); width:min(100%, clamp(240px, calc((100svh - 534px) * 1080 / 880), 440px)); }
}
@media (max-width:700px) and (min-height:600px) and (max-height:800px) {
  #main-content.v2-family-page > .v2-hero:first-child .v5-family-art { width:min(100%, clamp(200px, calc((100vh - 436px) * 1080 / 880), 330px)); width:min(100%, clamp(200px, calc((100svh - 436px) * 1080 / 880), 330px)); }
}
@media (min-width:701px) and (min-height:720px) and (max-height:1000px), (max-width:700px) and (min-height:600px) and (max-height:800px) {
  #main-content.v2-family-page > .v2-hero:first-child .v5-family-art .v2-family-phones { width:100%; height:auto; max-height:none; aspect-ratio:1080 / 880; object-fit:cover; object-position:50% 56.68%; }
}
/* Design QA of 8 October 2026 (DQA-R2-01): on phones taller than 800px the picture kept its
   transparent foot, rows 1020 to 1126 of the file, so about 60px of blank space showed above the
   badges and 30px below them. There only that foot is trimmed, as the shorter phones above trim
   it too, so about 30px shows on each side. The picture keeps its width, and the 600px to 800px
   phone fit and every desktop window are unchanged. */
@media (max-width:700px) and (min-height:801px) {
  #main-content.v2-family-page > .v2-hero:first-child .v5-family-art .v2-family-phones { width:100%; height:auto; max-height:none; aspect-ratio:1080 / 1020; object-fit:cover; object-position:50% 0; }
}

/* Official funder artwork on research news, with clear space and unchanged proportions. */
.v3-resource-article .funding-logo { max-width: 400px; margin: 24px auto; padding: 32px; background: #fff; }
.v3-resource-article .funding-logo img { display: block; width: 100%; height: auto; }

.v2-resource-card__image.funding-logo-card { background: #fff; }