/* V4 ownership: shared banner/support order, regional cards and requested layouts. */
.btn[data-cta="demo"] { background:var(--v2-purple); border-color:var(--v2-purple); color:#fff; }
.btn[data-cta="demo"]:hover { background:#4f3fac; border-color:#4f3fac; color:#fff; }
.nav-desktop a[aria-current="page"],.nav-mobile a[aria-current="page"],.v4-current-section,.nav-desktop a[data-current-section="resources"],.nav-mobile a[data-current-section="resources"] { text-decoration:underline; text-underline-offset:7px; text-decoration-thickness:2px; }
.v4-hero-support { padding:36px 0 44px; background:#f7faff; text-align:center; }
.v4-hero-support p { max-width:760px; margin:0 auto 22px; }
.v4-hero-support p:last-child { margin-bottom:0; }
.v4-hero-support .lede,.v4-hero-support .v2-content-lead { font-size:clamp(18px,2vw,22px); line-height:1.6; }
.v4-hero-support .v3-article-column { text-align:left; }
.v4-hero-support .v3-article-column p { max-width:none; }
.v2-rachel figure { text-align:center; }
.v2-rachel blockquote { margin-inline:auto; }
.v2-quotes__controls { margin:0; transform:translateY(-50%); }
.v4-regulations { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; text-align:left; }
.v4-regulation-card { padding:28px; border:1px solid var(--v2-line); border-radius:20px; background:#f7faff; }
.v4-regulation-card h3 { margin:0 0 24px; }
.v4-regulation-card ul { display:flex; flex-wrap:wrap; align-content:flex-start; gap:12px; list-style:none; margin:0; padding:0; }
.v4-regulation-card li { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; max-width:100%; padding:12px; border:1px solid var(--v2-line); border-radius:12px; background:#fff; text-align:center; font-size:15px; }
.v4-regulation-card img { width:auto; max-width:112px; height:46px; object-fit:contain; }
.v4-international { margin-top:28px; padding:28px; border:1px solid var(--v2-line); border-radius:20px; text-align:center; }
.v4-international h3 { margin:0 0 22px; }
.v4-international ul { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; list-style:none; padding:0; margin:0; }
.v4-international li { padding:12px 18px; border-radius:12px; background:var(--v2-pale); }
.v4-relationships { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:32px; margin-top:28px; }
.v4-relationships p { margin:0; }
.v4-procurement { display:flex; align-items:center; gap:16px; }
.v4-procurement img { width:100px; height:86px; object-fit:contain; }
.v4-relationships .v2-nhs-backed { display:flex; align-items:center; gap:16px; }
.v4-relationships .v2-nhs-backed img { width:150px; height:auto; }
.v4-relationships .v2-nhs-backed span { max-width:200px; text-align:left; }
.v4-start-state { display:block; font-size:12px; line-height:1.35; max-width:190px; margin:5px auto 0; }
.v4-start-retry { font:inherit; border:0; padding:0; color:var(--v2-purple); text-decoration:underline; background:transparent; cursor:pointer; }
[data-cta="signup"][aria-busy="true"] { opacity:.65; }
/* Core review prompts expose complete directions without generating final artwork. */
.v4-prompt { min-width:0; text-align:left; }
.v4-prompt .v3-image-direction__label { margin:0 0 12px; font-size:12px; line-height:1.5; }
.v4-prompt > p:last-child { margin:0; font-size:14px; line-height:1.55; }
.v2-loop { grid-template-columns:minmax(0,1fr) minmax(160px,.6fr) minmax(0,1fr); max-width:1140px; }
.v2-loop__arrows { display:flex; align-items:center; }
.v2-loop__arrows .v4-prompt { padding:16px; }
.v3-ai-workflow .v4-prompt { padding:18px; margin:0 0 24px; }
.v4-solution-hero { max-width:820px; margin:36px auto 0; }
.v2-hero .v2-family-phones { width:min(940px,100%); max-height:none; }
#clinician-dashboard > .v2-split,#service-insights > .v2-split,#client-analytics > .v2-split { grid-template-columns:1fr 1fr; align-items:center; gap:48px; }
#service-insights .v2-split__copy { grid-column:2; grid-row:1; }
#service-insights .v2-family-dashboard-screen { grid-column:1; grid-row:1; }
.v2-family-dashboard,.v2-family-dashboard-screen { width:100%; min-width:0; }
.v2-flow > li:first-child { background:#e4dcff; border-color:#b9a9ed; }
.v2-flow > li:first-child h3 { font-size:25px; }
.v2-flow img { object-fit:contain; }
.v3-combined .v3-route-phone { float:none; display:block; width:auto; height:210px; margin:20px auto; object-fit:contain; }
.v3-combined > .v3-route-card { display:flex; flex-direction:column; align-items:center; text-align:center; }
.v3-route-detail { width:100%; margin-top:auto; }
.v3-route-badge { margin-bottom:18px; }
.v2-tier { grid-template-columns:minmax(0,1fr) 280px; }
.v2-tier:first-child img { width:280px; height:auto; max-height:none; }
.v2-support__tables table { table-layout:fixed; width:100%; }
.v2-support__tables col:nth-child(1) { width:34%; }
.v2-support__tables col:nth-child(2) { width:12%; }
.v2-support__tables col:nth-child(3),.v2-support__tables col:nth-child(4) { width:27%; }
.v3-service-experience .v2-split__copy > img { display:block; width:190px; max-width:55%; margin:28px auto 0; }
.v4-commissioner { background:#eae7ff; padding:36px; border-radius:22px; margin:32px 0; }
.v4-contact-kit { padding:48px 0; background:#f7faff; }
.v4-contact-kit .v4-commissioner { margin:0; }
.v2-contact-details__grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; }
.v2-contact-details__grid > div { min-width:0; }
.v2-contact-details__grid .v4-prompt { padding:18px; margin:0 0 24px; }
.v2-contact-details__grid a { overflow-wrap:anywhere; }
/* V7 R1: the four produced Contact illustrations replace their image-direction
   placeholders. Each picture carries its own white ground, so it gets the same
   white block with a soft shadow that .v2-loop__art already uses on Home, sized
   to the placeholder's own 18px radius so the row keeps its shape. */
.v4-contact-card__art { display:block; width:100%; height:auto; border-radius:18px; background:#fff; box-shadow:0 14px 40px #4c388d1f; }
@media(max-width:1000px) {
 .v4-regulations { grid-template-columns:1fr; }
 .v2-loop { grid-template-columns:1fr; max-width:650px; }
 .v2-loop__arrows { display:block; max-width:330px; margin:auto; }
 .v2-contact-details__grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .v2-tier { grid-template-columns:minmax(0,1fr) 220px; }
 .v2-tier:first-child img { width:220px; }
}
@media(max-width:700px) {
 #clinician-dashboard > .v2-split,#service-insights > .v2-split,#client-analytics > .v2-split { grid-template-columns:1fr; gap:28px; }
 #service-insights .v2-split__copy,#service-insights .v2-family-dashboard-screen { grid-column:auto; grid-row:auto; }
 .v2-contact-details__grid { grid-template-columns:1fr; }
 .v4-commissioner { padding:24px 18px; }
 .v2-support__tables th,.v2-support__tables td { padding:12px 6px; font-size:13px; overflow-wrap:break-word; }
 .v4-relationships { flex-direction:column; }
 .v2-tier,.v2-tier:nth-child(1),.v2-tier:nth-child(2) { grid-template-columns:1fr; }
 .v2-tier:first-child img { width:min(320px,100%); }
}
/* Optical sizes measured from the unchanged original phone assets. */
.v2-flow img[src$="triangle-phone-check-in-original.png"] { height:277px; margin-top:-18px; margin-bottom:5px; }
.v2-tier img[src$="triangle-phone-check-in-original.png"] { height:219px; max-height:none; width:auto; }
.v2-tier img[src$="triangle-phone-content-original.png"] { height:190px; max-height:none; width:auto; }
@media (min-width:601px) and (max-width:1000px) {
 .v2-flow img[src$="triangle-phone-check-in-original.png"] { height:242px; margin:0; }
}
@media (max-width:600px) {
 .v2-flow img[src$="triangle-phone-check-in-original.png"] { height:288px; margin-top:-19px; margin-bottom:5px; }
 .v2-tier img[src$="triangle-phone-check-in-original.png"] { height:219px; }
 .v2-tier img[src$="triangle-phone-content-original.png"] { height:190px; }
}
.v3-combined .v3-route-phone--inset { height:294px; margin:-22px auto; }
/* One shared comparison owns every row, using the requested 25/25/50 tracks. */
.v2-pricing .v2-practice { background:#f7faff; }
.v4-plan-setups,.v4-plan-actions { display:grid; grid-template-columns:1fr 1fr 2fr; gap:0; }
.v4-plan-setup { min-width:0; padding:28px; border:1px solid var(--v2-line); border-radius:20px 20px 0 0; background:#fff; }
.v4-plan-setup--starter,.v4-action--starter { grid-column:2; }
.v4-plan-setup--professional,.v4-action--professional { grid-column:3; background:#efedff; }
.v4-plan-setup h3 { margin:0 0 22px; font-size:28px; }
.v4-plan-setup .v3-plan-price { min-height:0; }
.v4-plan-setup .v2-pricing-total { font-size:clamp(36px,4vw,58px); }
.v4-plan-setup .v3-plan-calculator { padding-bottom:0; }
.v2-pricing .v4-plan-setup .v2-pricing-controls { display:grid; grid-template-columns:1fr; gap:28px; }
.v4-plan-setup .v2-pricing-field + .v2-pricing-field { margin-top:0; }
.v4-plan-setup .v2-pricing-field { display:block; }
.v4-plan-setup .v2-pricing-stepper { max-width:100%; }
.v4-plan-setup .v2-pricing-field label { font-size:18px; }
.v4-comparison { width:100%; table-layout:fixed; border-collapse:collapse; margin:0; }
.v4-comparison col:nth-child(1),.v4-comparison col:nth-child(2) { width:25%; }
.v4-comparison col:nth-child(3) { width:50%; }
.v4-comparison th,.v4-comparison td { padding:22px; border-bottom:1px solid var(--v2-line); vertical-align:middle; line-height:1.5; }
.v4-comparison thead th { font-weight:600; font-size:18px; }
.v4-comparison th:first-child { text-align:left; }
.v4-comparison td,.v4-comparison thead th:not(:first-child) { text-align:center; }
.v4-comparison tbody th { font-size:17px; font-weight:400; }
.v4-comparison tbody tr:first-child th { font-weight:600; }
.v4-comparison td:nth-child(2),.v4-comparison thead th:nth-child(2) { background:#fff; }
.v4-comparison td:nth-child(3),.v4-comparison thead th:nth-child(3) { background:#efedff; }
.v4-feature-value > [aria-hidden="true"] { font-size:26px; color:var(--v2-purple); }
.v4-mobile-plan { display:none; }
.v4-plan-actions .v3-plan-action { padding:28px; border-radius:0 0 20px 20px; }
.v4-action--starter { background:#fff; }
.v4-plan-actions { margin-bottom:64px; }
@media(max-width:700px) {
 .v4-plan-setups,.v4-plan-actions { grid-template-columns:1fr; gap:24px; }
 .v4-plan-setup--starter,.v4-plan-setup--professional,.v4-action--starter,.v4-action--professional { grid-column:1; }
 .v4-plan-setup { border-radius:18px; padding:24px; }
 .v4-comparison { display:block; margin-top:32px; }
 .v4-comparison colgroup,.v4-comparison thead { display:none; }
 .v4-comparison tbody { display:block; }
 .v4-comparison tr { display:grid; grid-template-columns:1fr 1fr; margin-bottom:20px; border:1px solid var(--v2-line); border-radius:16px; overflow:hidden; }
 .v4-comparison tbody th { grid-column:1 / -1; padding:16px; text-align:center; font-weight:600; background:#f7faff; }
 .v4-comparison td { padding:18px 12px; border-bottom:0; }
 .v4-mobile-plan { display:block; font-size:13px; margin-bottom:12px; }
 .v4-feature-value { font-size:18px; }
 .v4-plan-actions .v3-plan-action { border-radius:18px; }
}

/* Shared outer-card title track keeps the actual phone bodies centred together. */
@media(min-width:1001px) {
 .v3-route-card--local > h3,.v3-route-card--nhs > h3 { min-height:2.8em; line-height:1.4; }
}
/* The four help cards used subgrid to line their pictures, headings, text and
   action links up with each other, spanning four rows the parent grid never
   declared. Firefox sizes that case differently from Chromium and WebKit: the
   section came out 82% taller on desktop and twice as tall on a phone, with
   every heading and paragraph floating in the middle of an oversized band.
   A flex column says the same thing without subgrid. The cards are still all
   the same height, because the grid stretches them; the pictures share a
   height because they share an aspect; the titles share a track so the
   sentences start together; and the auto margin drops every action link to the
   bottom edge, which is the row readers actually scan across. */
.v2-contact-details__grid > div { display:flex; flex-direction:column; gap:22px; }
.v2-contact-details__grid > div > * { margin:0; }
.v2-contact-details__grid > div > p:last-child { margin-top:auto; }
/* Two of the four titles wrap to a second line while the cards sit side by
   side, so the titles keep a two line track there and the four sentences start
   together. In one column the cards are read one after another and the track
   would only add empty space. */
@media(min-width:701px) { .v2-contact-details__grid > div > h2 { min-height:2.4em; } }
.v2-contact-details__grid .v4-prompt { margin:0; }
/* PRJ-250: the six produced illustrations on Clinics and Schools (AI-01, V4-AI-01 to 04, AI-02). */
.v2-hero figure { margin:0; }
.v4-ai-card__art { display:block; width:100%; height:auto; margin:0; border-radius:14px; background:#fff; }
.v2-feature__art { display:block; width:100%; height:auto; border-radius:18px; background:#fff; box-shadow:0 14px 40px #4c388d1f; }
/* Owner comments 7–8 replace the old wide composition with square artwork.
   Preserve the complete illustration at every viewport width. */
#clinics-schools-intro figure .v2-hero__image { height:auto; aspect-ratio:1; object-fit:contain; }

/* The support tables carry four columns of real data, and at 390px they have 350px to do it in.
   v2.css already sizes these cells down to 12px/5px on a phone, but the 700px rule above names
   .v2-support__tables and loads later, so that phone size never arrived and the columns stayed
   2px too narrow for their own words: "Ages" came out as "Age" over "s" and "Social
   Communication" split mid-word. Restoring the phone size below 600px gives every word the room
   it needs. Hyphenation was tried here and taken out again: WebKit applies hyphens:auto far
   more eagerly than Chromium and Firefox, and turned "Postcode Access" into "Postcode Ac-cess"
   in a column that had room to wrap between the two words. */
@media(max-width:600px) {
  .v2-support__tables th,.v2-support__tables td { padding:12px 5px; font-size:12px; }
}

/* S08: the commissioner kit audience choice (contract 2.1). One radio group inside the form's
   fieldset, laid out like the newsletter opt-in: a 24px control whose label extends the target to
   44px. Nothing is preselected. While unanswered after a send, its message sits under the legend and
   the group carries an error edge, so the state never rests on colour alone. */
.site-form__choices { display:grid; min-width:0; }
.site-form__legend { margin:0 0 6px; font-size:16px; font-weight:600; line-height:1.4; color:var(--navy); }
.site-form__choices > .form-error { margin:0 0 4px; }
.site-form__choice { display:grid; grid-template-columns:24px minmax(0,1fr); column-gap:12px; align-items:start; }
.site-form__choice input[type="radio"] { width:24px; height:24px; margin:10px 0 0; accent-color:var(--navy); }
.site-form__choice label { padding-block:10px; font-weight:400; }
.site-form__choices[aria-invalid="true"] { padding-left:14px; border-left:4px solid var(--error); }