/*
 * CopyBook's public website (/, /how-it-works, /for-parents, /for-schools,
 * /help, /get-started).
 *
 * The look (CB-SIG-0160): a warm cream page, warm charcoal type, CopyBook
 * orange for the one thing to do next, Nunito at generous sizes, rounded
 * cards and photographs of families, and Pip. The earlier mockups (CB-SIG-0046)
 * set the content and the shape of each page; this raises the finish.
 *
 * A plain stylesheet rather than a Vite build: nothing else on these pages
 * needs one, and the release serves public/ as it is. The fonts are served
 * from here too, so the public pages make no request anywhere else
 * (ThePublicSiteFollowsTheApprovedMockupsTest).
 *
 * Every class the Blade templates use is kept; the markup's contracts live in
 * the tests, not here.
 */

@font-face { font-family: "Nunito"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/nunito/Nunito-400Regular.ttf") format("truetype"); }
@font-face { font-family: "Nunito"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/nunito/Nunito-600SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Nunito"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/nunito/Nunito-700Bold.ttf") format("truetype"); }
@font-face { font-family: "Nunito"; font-weight: 800; font-style: normal; font-display: swap; src: url("/fonts/nunito/Nunito-800ExtraBold.ttf") format("truetype"); }

:root {
    /* Surfaces */
    --cream: #fff8ee;
    --cream-deep: #fbead3;
    --sand: #f7ecd9;
    --paper: #ffffff;
    --line: #efdfc6;
    --line-strong: #e4cfae;

    /* Ink: warm charcoal, not black, not navy */
    --ink: #26231f;
    --ink-soft: #5b5449;
    --ink-mute: #857b6e;
    --charcoal: #1f1c19;
    --charcoal-soft: #2b2724;

    /* Brand */
    --orange: #f59e2e;
    --orange-deep: #cf7109;   /* display text on cream: 3.3:1, enough for large type */
    --orange-dark: #b5630a;
    --orange-text: #a3570a;   /* small text on cream or orange-tint: 4.6-5.1:1 */
    --orange-ink: #8a4908;    /* small text on the deeper card tints: 5.4:1 on --orange-card */
    --orange-tint: #ffe9cf;
    --orange-glow: rgba(245, 158, 46, 0.35);

    /* Tints for cards: one step deeper than CB-SIG-0164 so the five feature
       panels read as colour, not as near-white (CB-SIG-0168). Body text on
       them is --ink-soft, measured at or above 4.5:1 on each. */
    --blue-tint: #dbe7ff;
    --green-tint: #d5efdf;
    --purple-tint: #e6dcff;
    --yellow-tint: #ffeaa8;
    --orange-card: #ffdfb8;

    --shadow-sm: 0 1px 2px rgba(73, 48, 12, 0.06), 0 4px 12px rgba(73, 48, 12, 0.06);
    --shadow: 0 2px 6px rgba(73, 48, 12, 0.05), 0 18px 44px rgba(73, 48, 12, 0.10);
    --shadow-lg: 0 6px 14px rgba(73, 48, 12, 0.08), 0 36px 80px rgba(73, 48, 12, 0.16);

    --radius: 28px;
    --radius-sm: 18px;
    --wrap: 1200px;
    --wrap-narrow: 820px;
    --ease: cubic-bezier(.2, .7, .2, 1);

    /* The old names, kept for anything that still says them. */
    --navy: var(--ink);
    --navy-soft: var(--ink-soft);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font: 400 18px/1.7 "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }
p { margin: 0; }
p + p { margin-top: 1em; }
b, strong { font-weight: 700; }

::selection { background: var(--orange-tint); color: var(--ink); }

:focus-visible { outline: 3px solid var(--orange-deep); outline-offset: 3px; border-radius: 10px; }

.skip {
    position: absolute; left: 12px; top: -60px; z-index: 50;
    background: var(--charcoal); color: var(--cream); padding: 10px 16px; border-radius: 999px; text-decoration: none; font-weight: 700;
}
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }

/* Header: stays with the reader, cream glass over the page. */

.site-header {
    position: sticky; top: 0; z-index: 20;
    background: rgba(255, 248, 238, 0.84);
    backdrop-filter: saturate(1.4) blur(14px);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid rgba(228, 207, 174, 0.55);
}
.site-header .wrap { display: flex; align-items: center; gap: 28px; min-height: 86px; }

.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; font-weight: 800; font-size: 27px; letter-spacing: -0.035em; line-height: 1; }
.brand img { width: 44px; height: auto; }
.brand .wordmark span { color: var(--orange-deep); }
.site-footer .brand .wordmark span { color: var(--orange); }

.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav a {
    text-decoration: none; font-weight: 700; font-size: 16px; padding: 10px 16px; border-radius: 999px; color: var(--ink-soft);
    transition: background .18s var(--ease), color .18s var(--ease);
}
.nav a:hover { background: var(--cream-deep); color: var(--ink); }
.nav a[aria-current="page"] { background: none; color: var(--ink); border-radius: 0; box-shadow: inset 0 -3px 0 var(--orange); }

.nav-actions { display: flex; gap: 10px; align-items: center; }

.menu { display: none; margin-left: auto; position: relative; }
.menu summary {
    list-style: none; cursor: pointer; font-weight: 700; padding: 11px 18px;
    border: 2px solid var(--line-strong); border-radius: 999px; background: var(--paper);
}
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { background: var(--orange-tint); border-color: var(--orange); }
.menu .menu-panel {
    position: absolute; right: 0; top: calc(100% + 12px); width: min(320px, calc(100vw - 32px));
    background: var(--paper); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-lg);
    padding: 12px; display: grid; gap: 4px;
}
.menu .menu-panel a { text-decoration: none; font-weight: 700; padding: 12px 16px; border-radius: 14px; }
.menu .menu-panel a:hover, .menu .menu-panel a[aria-current="page"] { background: var(--orange-tint); }
.menu .menu-panel .btn { margin-top: 8px; justify-content: center; }

/* Room for the web app's button (2026-10-14). Measured in Chrome: beside the
   four nav links, "Open the web app" fits from about 1215px and "Web app"
   from about 1150px; under that the links wrap to two lines - which they
   already did below about 1100px without it. So, with some margin for other
   browsers' fonts: the full label from 1280px, the short one down to 1180px,
   and the menu - which carries the full label - below that. */
.nav-actions .label-short { display: none; }
@media (max-width: 1279px) {
    .nav-actions .label-full { display: none; }
    .nav-actions .label-short { display: inline; }
}
@media (max-width: 1179px) {
    .nav, .nav-actions { display: none; }
    .menu { display: block; }
}

/* Buttons: one orange thing to do, and a quiet one beside it. */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; white-space: nowrap;
    font-weight: 800; font-size: 17px; line-height: 1; padding: 17px 28px; border-radius: 999px;
    border: 2px solid transparent; cursor: pointer;
    transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.btn small { font-weight: 600; font-size: 13px; opacity: .8; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary {
    background: linear-gradient(180deg, #ffb24f 0%, var(--orange) 55%, #ec9120 100%);
    color: var(--charcoal);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 8px 22px var(--orange-glow);
}
.btn-primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 12px 28px rgba(245, 158, 46, 0.45); }
.btn-ghost { background: var(--paper); color: var(--ink); border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.btn-ghost:hover { border-color: var(--orange); }
.btn-small { padding: 12px 20px; font-size: 15px; }

/* Type: generous, warm, never cramped. */

.eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-weight: 800; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-text); margin: 0 0 18px;
}
.eyebrow::before { content: ""; width: 22px; height: 3px; border-radius: 3px; background: var(--orange); }
h1, h2, h3 { margin: 0; color: var(--ink); text-wrap: balance; }
h1 { font-size: clamp(44px, 6.8vw, 88px); font-weight: 800; line-height: 1.0; letter-spacing: -0.04em; }
h2 { font-size: clamp(32px, 4.3vw, 54px); font-weight: 800; line-height: 1.06; letter-spacing: -0.035em; }
h3 { font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -0.015em; }
.lede { font-size: clamp(19px, 1.7vw, 22px); line-height: 1.6; color: var(--ink-soft); max-width: 34em; margin: 26px 0 0; }
.accent { color: var(--orange-deep); }

/* Sections and their rhythm. */

main { display: block; }
.section { padding: 104px 0; }
.section-tight { padding: 56px 0; }
.section-head { max-width: 780px; margin-bottom: 48px; }
.section-head p { color: var(--ink-soft); margin: 18px 0 0; font-size: 20px; line-height: 1.6; }
.section-head .eyebrow { margin: 0 0 18px; }
.center { text-align: center; margin-left: auto; margin-right: auto; }
.center .eyebrow { justify-content: center; }
.section-sand { background: var(--sand); }
.section-paper { background: var(--paper); }

/* Hero: two columns on a desktop, stacked on a phone. */

.hero { position: relative; padding: 40px 0 88px; overflow: hidden; }
.hero::before {
    /* A warm pool of light behind the picture. Decoration only. */
    content: ""; position: absolute; right: -12%; top: -30%; width: 58%; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(245, 158, 46, 0.16), rgba(245, 158, 46, 0));
    pointer-events: none;
}
.hero .wrap { position: relative; display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 64px; align-items: center; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.hero-actions .btn { padding: 21px 36px; font-size: 19px; }
.hero-media { position: relative; }

/* The picture frame: a photograph when there is one, Pip until then. The
   sheet behind it is tilted like a page set down on a table. */
.media-frame {
    position: relative; border-radius: 32px; overflow: hidden;
    background: linear-gradient(160deg, var(--orange-tint), var(--cream-deep));
    padding: 32px; box-shadow: var(--shadow-lg);
}
.media-frame img { margin: 0 auto; }
.media-frame img.pip-portrait { width: min(260px, 70%); }
.media-frame.blue { background: linear-gradient(160deg, var(--blue-tint), #f3f7ff); }
.media-frame.green { background: linear-gradient(160deg, var(--green-tint), #f3fbf5); }
.media-frame.purple { background: linear-gradient(160deg, var(--purple-tint), #f8f4ff); }
.media-frame.photo { padding: 0; aspect-ratio: 3 / 2; background: var(--cream-deep); }
.media-frame.photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-media:has(.media-frame)::before {
    content: ""; position: absolute; inset: 18px -14px -14px 18px; border-radius: 32px;
    background: var(--cream-deep); transform: rotate(2.5deg); z-index: 0; pointer-events: none;
}
.hero-media > * { position: relative; z-index: 1; }

/* Pip says */

.pip-says { display: flex; align-items: flex-end; gap: 14px; }
.pip-says img { width: 78px; flex: none; filter: drop-shadow(0 6px 10px rgba(73, 48, 12, 0.18)); }
.bubble {
    position: relative; background: var(--paper); border: 2px solid var(--line); border-radius: 24px;
    padding: 16px 20px; font-weight: 600; font-size: 17px; line-height: 1.5; box-shadow: var(--shadow); max-width: 30em;
}
.bubble::after {
    content: ""; position: absolute; left: -11px; bottom: 20px; width: 18px; height: 18px;
    background: var(--paper); border-left: 2px solid var(--line); border-bottom: 2px solid var(--line);
    transform: rotate(45deg);
}
.hero-media .pip-says { margin: -26px 0 0 -8px; max-width: 92%; }

/* Cards and panels */

.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.card {
    position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px;
    box-shadow: var(--shadow-sm);
    transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.card p { color: var(--ink-soft); margin: 12px 0 0; }
.card h3 + p { margin-top: 10px; }
.card .icon {
    width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center;
    font-weight: 700; font-size: 24px; margin-bottom: 18px; background: var(--orange-tint); color: var(--orange-dark);
}
a.card { text-decoration: none; display: block; }
a.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line-strong); }
a.card h3::after { content: " \2192"; color: var(--orange-deep); }

.tint-orange { background: var(--orange-tint); border-color: transparent; }
.tint-blue { background: var(--blue-tint); border-color: transparent; }
.tint-green { background: var(--green-tint); border-color: transparent; }
.tint-purple { background: var(--purple-tint); border-color: transparent; }
.tint-yellow { background: var(--yellow-tint); border-color: transparent; }
.tint-orange .icon, .tint-blue .icon, .tint-green .icon, .tint-purple .icon, .tint-yellow .icon { background: rgba(255, 255, 255, 0.8); }
.tint-orange p, .tint-blue p, .tint-green p, .tint-purple p, .tint-yellow p { color: var(--ink-soft); }

/* A short walk in three or four numbered steps, joined by a line. */

.flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; counter-reset: flow; position: relative; }
.flow-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.flow li { list-style: none; position: relative; padding: 30px 28px 28px; }
.flow li::before {
    counter-increment: flow; content: counter(flow);
    width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
    background: var(--charcoal); color: var(--cream); font-weight: 800; font-size: 18px; margin-bottom: 18px;
}
.flow li .icon { position: absolute; top: 22px; right: 22px; margin: 0; width: 48px; height: 48px; border-radius: 16px; }
.flow li h3 { padding-right: 56px; }
.flow li:not(:last-child)::after {
    content: ""; position: absolute; top: 50px; right: -24px; width: 24px; height: 2px; background: var(--line-strong);
}

/* ADAPT: the five letters, as cards on Home and as a walk on How it works. */

.adapt .card { padding: 28px 26px; }
.adapt .letter {
    width: 60px; height: 60px; border-radius: 20px; display: grid; place-items: center;
    font-size: 32px; font-weight: 800; line-height: 1; color: var(--orange-dark); background: rgba(255, 255, 255, 0.8);
}
.adapt h3 { margin-top: 18px; }
.adapt-steps { counter-reset: step; display: grid; gap: 18px; position: relative; }
/* A line runs down through the five tiles; the cards cover it, so it shows
   only in the gaps between them - one walk, not five boxes. */
.adapt-steps::before { content: ""; position: absolute; left: 81px; top: 60px; bottom: 60px; width: 3px; border-radius: 3px; background: var(--line-strong); }
.adapt-step { position: relative; display: grid; grid-template-columns: 104px 1fr; gap: 28px; align-items: center; padding: 26px 30px; }
.adapt-step .aside { color: var(--ink); font-weight: 600; margin-top: 10px; padding-left: 14px; border-left: 3px solid var(--orange); }
.adapt-step .letter-tile { width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center; font-size: 50px; font-weight: 800; color: var(--ink); }
.adapt-step::before {
    content: counter(step); content: counter(step) / ""; counter-increment: step; position: absolute; top: 18px; right: 18px;
    width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
    background: var(--charcoal); color: var(--cream); font-size: 13px; font-weight: 800;
}
.adapt-step ul { margin: 12px 0 0; padding-left: 20px; color: var(--ink-soft); }

/* Notes and callouts */

.band {
    display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap;
    background: var(--paper); border: 2px solid var(--line); border-radius: 30px; padding: 28px 34px; box-shadow: var(--shadow);
}
.band p { margin: 0; max-width: 46em; color: var(--ink-soft); }
.band p b { color: var(--ink); }
.notice { border-left: 6px solid var(--orange); background: var(--paper); border-radius: 18px; padding: 18px 22px; color: var(--ink-soft); }

/* The charcoal band with one thing to do, lit from the corner. */
.cta-panel {
    position: relative; overflow: hidden;
    background: var(--charcoal); color: var(--cream); border-radius: 36px; padding: 56px;
    display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center;
    box-shadow: var(--shadow-lg);
}
.cta-panel::before {
    content: ""; position: absolute; right: -20%; top: -60%; width: 60%; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(245, 158, 46, 0.45), rgba(245, 158, 46, 0)); pointer-events: none;
}
.cta-panel > * { position: relative; }
.cta-panel h2 { color: var(--cream); }
.cta-panel p { color: #e9dfcf; margin: 14px 0 0; font-size: 19px; max-width: 40em; }
.cta-panel :focus-visible { outline-color: var(--orange); }

/* Install steps */

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: s; }
.steps li {
    display: grid; grid-template-columns: 46px 1fr; gap: 18px; align-items: start;
    background: var(--paper); border: 1px solid var(--line); border-radius: 22px; padding: 18px 20px; box-shadow: var(--shadow-sm);
}
.steps li::before {
    counter-increment: s; content: counter(s); width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
    background: var(--orange-tint); color: var(--orange-text); font-weight: 800;
}
.steps p { margin: 0; }
.steps .aside { color: var(--ink-soft); font-size: 15px; margin-top: 6px; }
kbd { font: 700 14px/1 "Nunito", sans-serif; background: var(--cream-deep); border: 1px solid var(--line-strong); border-radius: 8px; padding: 3px 8px; }

/* Price */

.price { font-size: 48px; font-weight: 800; letter-spacing: -0.035em; line-height: 1; }
.price small { font-size: 17px; color: var(--ink-soft); font-weight: 600; letter-spacing: 0; }

/* Footer */

.site-footer { background: var(--charcoal); color: #cfc5b6; margin-top: 56px; padding: 72px 0 44px; }
.site-footer .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.site-footer .brand { color: var(--cream); }
.site-footer .brand + p { margin-top: 18px; max-width: 30em; line-height: 1.6; }
.site-footer h2 { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); margin-bottom: 16px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-footer a { color: #e6dccb; text-decoration: none; }
.site-footer a:hover { color: var(--cream); text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 4px; }
.site-footer .legal-line { grid-column: 1 / -1; border-top: 1px solid rgba(255, 248, 238, 0.12); padding-top: 24px; font-size: 14px; color: #a69b8b; }
.site-footer :focus-visible { outline-color: var(--orange); }

/* Help: the way onward from each area, and the waitlist (CB-SIG-0080) */

.card .card-link { margin-top: 18px; font-weight: 800; }
.card .card-link a { color: var(--ink); text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.card .card-link a::after { content: " \2192"; }
.card .card-link a:hover { color: var(--orange-deep); }

.waitlist { max-width: 720px; }
.waitlist-form { margin-top: 20px; }
.waitlist-form label { display: block; font-weight: 700; margin-bottom: 10px; }
.waitlist-row { display: flex; gap: 12px; }
.waitlist-row input {
    flex: 1; min-width: 0; font: inherit; color: var(--ink); background: var(--paper);
    border: 2px solid var(--line-strong); border-radius: 999px; padding: 15px 22px;
}
.waitlist-row .btn { font-family: inherit; cursor: pointer; }
.waitlist-row input:focus { outline: 3px solid var(--orange); outline-offset: 2px; border-color: var(--orange); }
.waitlist-row input[aria-invalid="true"] { border-color: #b42318; }
.card .form-error { color: #b42318; font-weight: 600; margin-top: 10px; }
.card .form-ok { background: var(--green-tint); color: var(--ink); border-radius: 16px; padding: 16px 18px; margin-top: 14px; }
.card .form-note { font-size: 15px; margin-top: 16px; }

/* Real app screens (CB-SIG-0050), in a phone frame. */

.app-screen { margin: 0; display: grid; justify-items: center; gap: 16px; }
.app-screen .phone {
    width: min(300px, 78vw, 100%); padding: 10px; border-radius: 42px; background: var(--charcoal);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 30px 60px rgba(31, 28, 25, 0.28), 0 6px 14px rgba(31, 28, 25, 0.14);
}
.app-screen .phone img { border-radius: 32px; width: 100%; }
.app-screen figcaption { text-align: center; color: var(--ink-soft); font-weight: 600; display: grid; gap: 8px; justify-items: center; max-width: 320px; }
.app-only {
    text-align: center;
    display: inline-block; background: var(--charcoal); color: var(--cream); font-weight: 700; font-size: 14px;
    padding: 7px 14px; border-radius: 999px; letter-spacing: .01em;
}
.screens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; align-items: start; }
.screens-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Tablets and below */

@media (max-width: 1024px) {
    .nav, .nav-actions { display: none; }
    .menu { display: block; }
    .hero .wrap { grid-template-columns: 1fr; gap: 56px; }
    .hero-media::before { inset: 14px -10px -10px 14px; }
    .grid-3, .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* The same selectors as the rules they switch off: :not() counts for specificity. */
    .adapt .grid-5 .card:not(:last-child)::after, .flow li:not(:last-child)::after { display: none; }
    .flow, .flow-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cta-panel { grid-template-columns: 1fr; padding: 44px; }
    .site-footer .wrap { grid-template-columns: 1fr 1fr; }
    .screens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .section { padding: 80px 0; }
}

@media (max-width: 640px) {
    body { font-size: 17px; }
    .wrap { padding: 0 18px; }
    .site-header .wrap { min-height: 72px; }
    .section { padding: 64px 0; }
    .section-tight { padding: 40px 0; }
    .hero { padding: 24px 0 64px; }
    .hero-actions { margin-top: 28px; }
    .hero-actions .btn { width: 100%; }
    .hero-media .pip-says { margin: -18px 0 0 0; max-width: 100%; }
    .grid-2, .grid-3, .grid-5, .screens, .screens-2, .flow, .flow-4 { grid-template-columns: 1fr; }
    .card { padding: 24px; }
    .waitlist-row { flex-direction: column; }
    .waitlist-row .btn { justify-content: center; }
    .adapt-step { grid-template-columns: 1fr; gap: 14px; padding: 22px; }
    .adapt-steps::before { display: none; }
    .adapt-step .letter-tile { width: 72px; height: 72px; font-size: 36px; border-radius: 22px; }
    .cta-panel { padding: 34px 24px; border-radius: 28px; }
    .band { padding: 24px; }
    .site-footer .wrap { grid-template-columns: 1fr; }
    .brand { font-size: 24px; }
    .media-frame { padding: 22px; border-radius: 26px; }
    .eyebrow { font-size: 12px; letter-spacing: .1em; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .btn, .card { transition: none; }
    .btn:hover, a.card:hover { transform: none; }
}

/*
 * The owner-locked composition (CB-SIG-0168), built first on For parents:
 * photographs lead, the hero picture runs to the right edge of the window,
 * benefits are a strip of pictograms rather than cards, the features are five
 * tall pastel panels carrying the real app screens, and the closing band is
 * warm rather than charcoal. Everything above still applies; this only adds.
 */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[id] { scroll-margin-top: 100px; }

/* Brand: the owner's lockup in the header, the round badge in the footer. */
.brand img.mark { width: auto; height: 46px; }
.brand img.mark-full { display: none; width: auto; height: 62px; }
@media (min-width: 1025px) { .brand img.mark { display: none; } .brand img.mark-full { display: block; } }
.site-footer .brand img.badge { width: 132px; height: auto; }
.site-footer .brand { display: block; }

/* A circular pictogram: a line icon in a warm disc. */
.pictogram {
    width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; flex: none;
    background: linear-gradient(160deg, #ffebd2 0%, #ffd9a6 100%); color: var(--orange-dark);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 6px 14px rgba(73, 48, 12, 0.10);
}
.pictogram svg { width: 28px; height: 28px; }

/* Photo-led hero: the words stay inside the wrap, the picture runs to the right
   edge of the window. A four-track grid does the bleed - no 100vw arithmetic, so
   nothing can overflow sideways. */
.hero-photo { padding: 0 0 64px; overflow: visible; background: linear-gradient(180deg, #fff0da 0%, var(--cream) 72%); }
.hero-photo::before { display: none; }
.hero-photo .wrap {
    max-width: none; padding: 0; align-items: center;
    grid-template-columns: minmax(28px, 1fr) minmax(0, 560px) minmax(0, 660px) minmax(0, 1fr); column-gap: 56px;
}
.hero-photo .hero-copy { grid-column: 2; padding: 56px 0 32px; }
.hero-photo h1 { font-size: clamp(42px, 5.6vw, 72px); }
.hero-note { margin-top: 24px; font-size: 15px; font-weight: 600; color: var(--ink-soft); }
.hero-photo-frame { grid-column: 3 / -1; position: relative; margin: 0; align-self: start; }
.hero-photo-frame > img {
    width: 100%; height: clamp(440px, 52vh, 600px); object-fit: cover; object-position: var(--focus, 50% 45%);
    border-radius: 40px 0 0 40px; box-shadow: var(--shadow-lg);
}
.float-card {
    position: absolute; left: -36px; top: 32px; z-index: 2; margin: 0;
    display: flex; align-items: center; gap: 14px; max-width: 340px;
    background: var(--paper); border-radius: 22px; padding: 14px 20px 14px 14px; box-shadow: var(--shadow-lg);
    font-weight: 700; font-size: 16px; line-height: 1.4; color: var(--ink);
}
.float-card .pictogram { width: 48px; height: 48px; }
.float-card .pictogram svg { width: 24px; height: 24px; }

/* Benefits: four pictograms in a row, a rule above and below, no card chrome. */
.benefits-section { padding: 0; }
.benefits {
    list-style: none; margin: 0; padding: 48px 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 0;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.benefits li { min-width: 0; padding: 0 28px; border-left: 1px solid var(--line); }
.benefits li:first-child { padding-left: 0; border-left: 0; }
.benefits .pictogram { width: 68px; height: 68px; margin-bottom: 18px; }
.benefits h3 { font-size: 20px; letter-spacing: -0.01em; }
.benefits p { color: var(--ink-soft); font-size: 16px; line-height: 1.55; margin: 6px 0 0; }

/* Feature showcase: five tall panels, each its own tint; two hold a real screen,
   pinned to the panel's foot and cropped by it, the others a large tile. */
.features { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
/* Five panels as three and two: at five across a real screen is 150 px wide and cannot be read. */
.features > .feature-card:nth-child(-n+2) { grid-column: span 3; }
.features > .feature-card:nth-child(n+3) { grid-column: span 2; }
/* The real screen beside its words, in the wide first card. */
.feature-card.feature-card--screen { display: grid; grid-template-columns: minmax(0, 1fr) 212px; column-gap: 24px; align-items: start; }
.feature-card.feature-card--screen .feature-copy { padding-bottom: 30px; }
.feature-card.feature-card--screen .app-screen { margin: 0; width: 212px; justify-self: end; }
/* The ADAPT card: the cycle as a ladder of five colour-coded steps - a diagram, not a screen. */
.adapt-ladder { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.adapt-ladder li { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 16px; color: var(--ink); }
.adapt-ladder .dot { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; font-weight: 800; font-size: 16px; color: var(--charcoal); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.75), 0 4px 10px rgba(73, 48, 12, 0.10); }
.dot-orange { background: #ffb55c; } .dot-green { background: #9fe0b8; } .dot-purple { background: #c9b8ff; } .dot-blue { background: #a9c7ff; }
.feature-card .adapt-ladder + .card-link { margin-top: 22px; padding-bottom: 30px; }
.feature-card { display: flex; flex-direction: column; overflow: hidden; padding: 30px 26px 0; min-height: 440px; }
.feature-card .label { font-weight: 800; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--orange-ink); margin: 0 0 12px; }
.feature-card h3 { font-size: 22px; line-height: 1.2; }
.feature-card > p:not(.label) { font-size: 16px; line-height: 1.55; margin-top: 10px; }
.feature-card .card-link { font-size: 16px; }
.feature-card .feature-art { margin-top: auto; padding: 28px 0 32px; display: grid; place-items: center; }
.feature-card .icon-tile { width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center; background: var(--orange); color: var(--charcoal); box-shadow: 0 12px 26px rgba(73, 48, 12, 0.16), inset 0 0 0 4px rgba(255, 255, 255, 0.55); }
.tint-blue .icon-tile { background: #4f8cff; color: #fff; } .tint-green .icon-tile { background: #1f9d5a; color: #fff; } .tint-purple .icon-tile { background: #8b6cf6; color: #fff; } .tint-yellow .icon-tile { background: var(--orange); color: var(--charcoal); }
.feature-card .letters b { flex: 1 1 0; min-width: 0; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.78); color: var(--orange-dark); font-size: 22px; font-weight: 800; box-shadow: var(--shadow-sm); }
.feature-card .feature-art.pip img { width: 132px; filter: drop-shadow(0 10px 16px rgba(73, 48, 12, 0.22)); }
.feature-card .app-screen { display: flex; flex-direction: column-reverse; margin: 24px auto 0; width: min(100%, 224px); gap: 14px; }
.feature-card .app-screen .phone { width: 100%; border-radius: 30px 30px 0 0; padding-bottom: 0; margin-bottom: 0; }
.feature-card .app-screen .phone img { border-radius: 22px 22px 0 0; }
.feature-card figcaption { max-width: none; font-size: 14px; }
.tint-orange { background: var(--orange-card); }

/* Two columns: a photograph beside a short story with a list of pictogram rows. */
.split .wrap { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: center; }
.media-frame.photo.ratio-16-10 { aspect-ratio: 16 / 10; }
.media-frame.photo.ratio-4-3 { aspect-ratio: 4 / 3; }
.media-frame.photo img { object-position: var(--focus, 50% 50%); }
figure.media-frame { margin: 0; }
.support-list { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 20px; }
.support-list li { display: grid; grid-template-columns: 56px 1fr; gap: 18px; align-items: start; }
.support-list .pictogram { width: 56px; height: 56px; }
.support-list h3 { font-size: 18px; }
.support-list p { color: var(--ink-soft); font-size: 16px; line-height: 1.55; margin: 4px 0 0; }

/* The warm band: cream to orange, charcoal words, Pip beside the phone. */
.cta-panel.warm {
    background: linear-gradient(120deg, #fff3e2 0%, var(--orange-tint) 45%, #ffd496 100%);
    color: var(--ink); grid-template-columns: 1.1fr 0.9fr; padding: 56px 64px;
}
.cta-panel.warm::before { background: radial-gradient(closest-side, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)); right: -10%; top: -50%; }
.cta-panel.warm h2 { color: var(--ink); }
.cta-panel.warm p { color: var(--ink-soft); }
.cta-panel.warm .hero-actions { margin-top: 28px; }
.cta-panel p.eyebrow { font-size: 13px; font-weight: 800; letter-spacing: .14em; color: var(--orange-text); margin: 0 0 14px; max-width: none; }
.cta-panel.warm .btn-primary { border-color: rgba(181, 99, 10, 0.35); }
.cta-panel.warm :focus-visible { outline-color: var(--orange-dark); }
.cta-art { position: relative; display: flex; justify-content: center; align-items: flex-end; padding: 0 0 8px 190px; }
.cta-art .app-screen .phone { width: min(236px, 70vw); }
.cta-art .app-screen figcaption { color: var(--ink-soft); }

@media (max-width: 1180px) {
    .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .features > .feature-card:nth-child(n) { grid-column: auto; }
    .features > .feature-card:last-child, .features > .feature-card.feature-card--screen { grid-column: 1 / -1; }
    .feature-card { min-height: 0; }
    .feature-card .feature-art { padding-bottom: 32px; }
}

@media (max-width: 1024px) {
    .hero-photo .wrap { grid-template-columns: 1fr; max-width: var(--wrap); padding: 0 28px; row-gap: 40px; }
    .hero-photo .hero-copy, .hero-photo-frame { grid-column: auto; }
    .hero-photo-frame > img { height: auto; aspect-ratio: 16 / 10; border-radius: 32px; }
    /* Pulled up over the photograph by a negative margin: they must also paint above it (the slot is a positioned box). */
    .float-card { position: relative; z-index: 2; left: auto; top: auto; margin: -28px 18px 0; max-width: none; }
    .brand img.mark { height: 42px; }
    .split .wrap { grid-template-columns: 1fr; gap: 36px; }
    .cta-panel.warm { grid-template-columns: 1fr; padding: 44px; }
    .cta-art { padding: 16px 0 0 160px; width: max-content; max-width: 100%; margin: 0 auto; }
}

@media (max-width: 640px) {
    .brand img.mark { height: 36px; }
    .site-footer .brand img.badge { width: 110px; }
    .hero-photo .wrap { padding: 0 18px; row-gap: 28px; }
    .hero-photo-frame > img { aspect-ratio: 4 / 3; border-radius: 24px; }
    .float-card { margin: -22px 12px 0; font-size: 15px; }
    .hero-note { font-size: 14px; }
    .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 32px 0; gap: 26px 0; }
    ul.benefits li { padding: 0 0 0 16px; }
    ul.benefits li:nth-child(odd) { border-left: 0; padding-left: 0; padding-right: 16px; }
    .feature-card.feature-card--screen { grid-template-columns: 1fr; }
    .feature-card.feature-card--screen .feature-copy { padding-bottom: 0; }
    .feature-card.feature-card--screen .app-screen { margin: 24px auto 0; width: min(220px, 70vw); justify-self: center; }
    .adapt-ladder li { font-size: 15px; }
    .benefits .pictogram { width: 52px; height: 52px; }
    .benefits h3 { font-size: 17px; }
    .benefits p { font-size: 15px; }
    .features { grid-template-columns: 1fr; }
    .features > .feature-card:nth-child(n) { grid-column: auto; }
    .feature-card { padding: 24px 20px 0; }
    .feature-card .app-screen { width: min(220px, 70vw); }
    .support-list li { grid-template-columns: 48px 1fr; gap: 14px; }
    .support-list .pictogram { width: 48px; height: 48px; }
    .cta-panel.warm { padding: 32px 22px; }
    .cta-art { flex-direction: column; align-items: center; padding: 24px 0 0; width: auto; }
}

/* The same language on Home, How it works and For schools (CB-SIG-0168): a
   photograph's slot in the hero until its picture arrives, Pip layered at the
   slot's corner, three-across strips and cards, and the warm band with Pip alone. */

.photo-slot { position: relative; overflow: hidden; border-radius: 32px; background: var(--cream-deep); }
.photo-slot img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); display: block; }
.photo-slot.is-empty {
    background: linear-gradient(160deg, #ffe4c4 0%, var(--sand) 55%, #f1dfc3 100%);
    box-shadow: inset 0 0 0 1px rgba(228, 207, 174, 0.6);
}
.photo-slot.is-empty::before {
    content: ""; position: absolute; inset: 0; opacity: .16;
    background: url("/images/brand/pip-head.webp") center 44% / clamp(120px, 24%, 200px) auto no-repeat;
}
.photo-slot-label {
    position: absolute; right: 18px; top: 18px; width: max-content; max-width: calc(100% - 36px);
    background: rgba(255, 255, 255, 0.92); color: var(--ink-soft); border: 2px dashed var(--line-strong); border-radius: 999px;
    padding: 10px 16px; font-weight: 700; font-size: 13px; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; text-align: center;
}
.ratio-3-2 { aspect-ratio: 3 / 2; }
.ratio-4-3 { aspect-ratio: 4 / 3; }
.ratio-16-10 { aspect-ratio: 16 / 10; }
.hero-photo-frame > .photo-slot { height: clamp(480px, 56vh, 620px); aspect-ratio: auto; border-radius: 0 0 0 48px; box-shadow: var(--shadow-lg); }
.hero-photo-frame::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: 0 0 0 48px;
    background: linear-gradient(90deg, rgba(255, 240, 218, 0.85) 0%, rgba(255, 240, 218, 0) 16%), linear-gradient(180deg, rgba(255, 240, 218, 0) 80%, rgba(255, 240, 218, 0.45) 100%);
}

/* Pip at the slot's bottom-left corner: with a bubble, or alone. */
.hero-photo .pip-says { position: absolute; left: -28px; bottom: 28px; z-index: 2; max-width: 26em; margin: 0; }
.hero-photo .pip-says img { width: 108px; }
.hero-photo .hero-pip { position: absolute; left: -24px; bottom: 28px; z-index: 2; width: 236px; height: auto; aspect-ratio: auto; object-fit: contain; border-radius: 0; box-shadow: none; filter: drop-shadow(0 14px 22px rgba(73, 48, 12, 0.28)); }

.benefits-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.features-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.features-3 > .feature-card:nth-child(n) { grid-column: auto; }
.features-3 .feature-card .app-screen { width: min(100%, 220px); }
.section-sand :focus-visible, .tint-orange :focus-visible, .tint-blue :focus-visible, .tint-green :focus-visible, .tint-purple :focus-visible, .tint-yellow :focus-visible { outline-color: var(--charcoal); }
.cta-pip-solo { width: 230px; justify-self: center; filter: drop-shadow(0 14px 22px rgba(73, 48, 12, 0.28)); }

@media (max-width: 1180px) {
    .features-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .features-3 > .feature-card:last-child { grid-column: 1 / -1; }
}

@media (max-width: 1024px) {
    .hero-photo { padding-top: 0; }
    .hero-photo .hero-copy { padding: 28px 0 0; }
    .hero-photo-frame::after { display: none; }
    .benefits li { padding: 0 18px; }
    .hero-photo-frame { align-self: auto; }
    .hero-photo-frame > .photo-slot { height: auto; min-height: 0; aspect-ratio: 16 / 10; border-radius: 32px; }
    .hero-photo .pip-says { position: relative; z-index: 2; left: auto; bottom: auto; margin: -18px 0 0 8px; max-width: 100%; }
    .hero-photo-frame { display: flex; flex-wrap: wrap; align-items: flex-end; }
    .hero-photo-frame > .photo-slot { flex: 0 0 100%; }
    .hero-photo .pip-says { flex: 0 0 100%; }
    .hero-photo .hero-pip { position: relative; z-index: 2; left: auto; bottom: auto; display: block; flex: 0 0 150px; width: 150px; margin: -48px 0 0 14px; }
    .hero-photo .hero-pip + .float-card { flex: 1 1 200px; margin: 12px 0 0 12px; }
    .cta-pip-solo { width: 190px; justify-self: start; }
}

@media (max-width: 640px) {
    .hero-photo-frame > .photo-slot { aspect-ratio: 4 / 3; border-radius: 24px; }
    .photo-slot-label { font-size: 11px; padding: 8px 12px; }
    .benefits-3, .features-3 { grid-template-columns: 1fr; }
    .hero-photo .hero-pip { width: 140px; margin: -44px 0 0 12px; }
    .cta-pip-solo { width: 150px; justify-self: center; }
}

/* CB-SIG-0176: the eyebrow as a cream pill in the heroes; the band as the references compose it; the five steps in a row. */
.hero-photo .eyebrow { background: #fff; padding: 8px 14px 8px 12px; border-radius: 999px; box-shadow: var(--shadow-sm); }

/* Pip at the left, the message in the centre, the phone at the right. */
.cta-panel.cta-three { grid-template-columns: 220px minmax(0, 1fr) auto; gap: 36px; align-items: center; }
.cta-panel.cta-two { grid-template-columns: 250px minmax(0, 1fr); gap: 40px; align-items: center; }
.cta-panel.cta-two .cta-pip-left { width: 250px; }
.cta-pip-left { width: 220px; justify-self: center; filter: drop-shadow(0 14px 22px rgba(73, 48, 12, 0.28)); }
.cta-art--phone { padding: 0; }

/* A photograph with Pip at the left, the invitation at the right. */
.cta-panel.cta-photo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; padding: 40px; }
.cta-photo-frame { position: relative; margin: 0; }
.cta-photo-frame > img:first-child { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 40%; border-radius: 28px; box-shadow: var(--shadow); display: block; }
.cta-pip-on-photo { position: absolute; right: -20px; bottom: -28px; width: 190px; filter: drop-shadow(0 14px 22px rgba(73, 48, 12, 0.28)); }


@media (max-width: 1024px) {
    .hero-photo .eyebrow { padding: 7px 12px 7px 10px; }
    .cta-panel.cta-three, .cta-panel.cta-two { grid-template-columns: 1fr; gap: 24px; }
    .cta-panel.cta-two .cta-pip-left { width: 170px; }
    .cta-pip-left { order: 3; width: 160px; justify-self: start; }
    .cta-art--phone { padding: 8px 0 0; width: auto; justify-content: flex-start; }
    .cta-panel.cta-photo { grid-template-columns: 1fr; gap: 36px; padding: 32px; }
    .cta-pip-on-photo { width: 150px; right: 8px; bottom: -24px; }
}

@media (max-width: 640px) {
    .cta-pip-left { justify-self: center; }
    .cta-art--phone { justify-content: center; }
    .cta-panel.cta-photo { padding: 24px 18px; }
    .cta-pip-on-photo { width: 120px; right: 0; bottom: -20px; }
}

/* The owner's references (2026-10-08): Pip's line in a bubble above him, three facts under the hero buttons, five tiles in a week. */
.float-card--bubble {
    top: auto; bottom: 262px; left: -36px; max-width: 300px; padding: 16px 20px; border-radius: 24px 24px 24px 8px; font-size: 16px;
}
.float-card--bubble::after {
    content: ""; position: absolute; left: 30px; bottom: -10px; width: 20px; height: 20px; border-radius: 3px;
    background: var(--paper); transform: rotate(45deg); z-index: -1;
}
.hero-trust { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; }
.hero-trust li { display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 1.3; color: var(--ink-soft); min-width: 0; }
.hero-trust b { display: block; color: var(--ink); font-size: 14px; line-height: 1.25; }
.hero-trust .pictogram { width: 42px; height: 42px; }
.hero-trust .pictogram svg { width: 20px; height: 20px; }

/* A short line on the lifestyle photograph's corner. */
.media-frame > .float-card { position: absolute; left: 18px; top: 18px; margin: 0; max-width: 240px; padding: 10px 16px; font-size: 15px; z-index: 2; }

.support-tiles { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 18px; }
.support-tiles li { display: grid; justify-items: start; align-content: start; gap: 8px; min-width: 0; }
.support-tiles .pictogram { width: 56px; height: 56px; margin-bottom: 4px; }
.support-tiles b { font-size: 16px; line-height: 1.25; color: var(--ink); }
.support-tiles span:last-child { font-size: 14px; line-height: 1.45; color: var(--ink-soft); }

/* A conceptual pictogram under each step's title, shown in the row layout at every width (rules with the row, below). */
.step-icon { display: none; }

@media (max-width: 1024px) {
    .float-card--bubble { bottom: auto; left: auto; max-width: none; border-radius: 22px; }
    .float-card--bubble::after { display: none; }
    .support-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .support-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
    .hero-trust { grid-template-columns: 1fr; gap: 12px; }
    .media-frame > .float-card { left: 12px; top: 12px; font-size: 14px; padding: 8px 12px; }
}

@media (max-width: 640px) {
    .hero-photo .hero-pip { flex-basis: 120px; width: 120px; margin: -40px 0 0 6px; }
    .hero-photo .hero-pip + .float-card { margin: 10px 0 0 8px; font-size: 15px; }
}

/* Home's three panels: the whole screen, larger - the owner asked for the entire screenshot (2026-10-08). The base rule pins
   a phone cut at the foot and reverses the column so a caption can sit above it; these cards carry no caption, so the column
   runs the normal way, the phone keeps its whole frame, is pushed to the panel's foot and sits inside the panel's padding.
   The sent-work screen on For parents keeps the base treatment: the strip its badge names is at its foot. */
.features-3 .feature-card { padding-bottom: 26px; }
.features-3 .feature-card > p:not(.label) { padding-bottom: 24px; }
.features-3 .feature-card .app-screen { flex-direction: column; width: min(100%, 284px); margin: auto auto 0; gap: 0; }
.features-3 .feature-card .app-screen .phone { width: 100%; padding: 10px; border-radius: 42px; margin-bottom: 0; }
.features-3 .feature-card .app-screen .phone img { display: block; border-radius: 32px; }
@media (max-width: 1180px) {
    .features-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
    .features-3 > .feature-card:last-child { grid-column: auto; }
    .features-3 .feature-card { padding: 24px 18px 18px; }
    .features-3 .feature-card .app-screen { width: min(100%, 236px); }
    .features-3 .feature-card .app-screen .phone { padding: 8px; border-radius: 34px; }
    .features-3 .feature-card .app-screen .phone img { border-radius: 26px; }
}
@media (max-width: 640px) {
    .features-3 { grid-template-columns: 1fr; }
    .features-3 .feature-card { padding: 24px 20px 20px; }
    .features-3 .feature-card .app-screen { width: min(100%, 284px); }
    .features-3 .feature-card .app-screen .phone { padding: 10px; border-radius: 42px; }
    .features-3 .feature-card .app-screen .phone img { border-radius: 32px; }
}

/* The five ADAPT steps run sideways at every width (CB-SIG-0179 correction, CB-SIG-0181): five across with chevrons on a
   desktop; below 1181 px one horizontal, swipeable, scroll-snapping row - one card prominent and the next peeking on a
   phone, two and a peek on a tablet - with the same chevrons, step numbers and colours. The row is focusable and named,
   so the arrow keys scroll it, and the hint under it says so. The site carries no script, so there are no buttons. */
.adapt-row {
    list-style: none; counter-reset: step;
    display: flex; gap: 18px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: 28px; padding: 10px 28px 22px; margin: 0 -28px;
    scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--orange) transparent;
}
.adapt-row::before { display: none; }
.adapt-row .adapt-step, .adapt-row .adapt-card { position: relative; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; flex: 0 0 min(44%, 340px); scroll-snap-align: start; padding: 26px 22px; margin: 0; }
.adapt-row .adapt-step .letter-tile { width: 64px; height: 64px; border-radius: 50%; font-size: 28px; }
/* The last card snaps by its end: with start-aligned snapping alone, a row whose last cards do not fill the box could never rest
   with the last card fully in view (measured at 768: the end position snapped back to card 3). */
.adapt-row > :last-child { scroll-snap-align: end; }
.adapt-row .adapt-step h3 { font-size: 21px; }
.adapt-row .adapt-step p { font-size: 15px; line-height: 1.5; }
.adapt-row .adapt-step .aside { font-size: 14px; }
.adapt-row .adapt-card h3 { margin-top: 0; }
.adapt-row .adapt-card p { margin: 0; }
.adapt-row .adapt-card::before {
    content: counter(step); content: counter(step) / ""; counter-increment: step; position: absolute; top: 16px; right: 16px;
    width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
    background: var(--charcoal); color: var(--cream); font-size: 12px; font-weight: 800;
}
.adapt-row .adapt-step:not(:last-child)::after, .adapt-row .adapt-card:not(:last-child)::after {
    content: "\2192"; content: "\2192" / ""; position: absolute; right: -26px; top: 44px; z-index: 2;
    width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
    background: var(--orange); color: var(--charcoal); font-weight: 800; font-size: 18px; box-shadow: var(--shadow-sm);
}
/* The text column only: the letter tile is a div too, and must keep its grid centring. */
.adapt-row .adapt-step > div:not(.letter-tile) { display: flex; flex-direction: column; }
.adapt-row .adapt-step > div:not(.letter-tile) > h3 { order: 0; }
.adapt-row .step-icon { order: 1; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; margin: 12px 0 14px; background: var(--cream); color: var(--orange-dark); box-shadow: inset 0 0 0 1px var(--line); }
.adapt-row .adapt-step > div:not(.letter-tile) > p { order: 2; }
/* The row bleeds to the viewport edge, so the ring sits just inside it; on a desktop grid it sits outside as usual. */
.adapt-row:focus-visible { outline: 3px solid var(--orange-deep); outline-offset: -4px; border-radius: 18px; }
@media (min-width: 1181px) { .adapt-row:focus-visible { outline-offset: 4px; } }
.adapt-hint { display: block; margin: 16px 0 0; font-size: 15px; font-weight: 600; color: var(--ink-soft); }
@media (max-width: 640px) {
    .adapt-row { scroll-padding-inline: 18px; padding: 10px 18px 22px; margin: 0 -18px; }
    .adapt-row .adapt-step, .adapt-row .adapt-card { flex-basis: min(82%, 340px); }
    .adapt-row .step-icon { width: 56px; height: 56px; border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .adapt-row { scroll-behavior: auto; }
}

/* The five ADAPT steps on a desktop: five across, no scrolling. Last in the file on purpose: a media query adds no
   specificity, so this override of the base row rule above must come after it in source order. */
@media (min-width: 1181px) {
    .adapt-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; align-items: stretch; overflow: visible; scroll-snap-type: none; scroll-behavior: auto; padding: 0; margin: 0; }
    .adapt-row .adapt-step { padding: 30px 22px 28px; }
    .adapt-row .adapt-card { padding: 28px 24px; }
    .adapt-row .adapt-step .letter-tile { width: 72px; height: 72px; font-size: 30px; }
    .adapt-hint { display: none; }
}