/* Blume's platform site: what it adds to the Notebook site's sheet (site.css,
   copied in at build), which it wears unchanged so the two read as one. The
   tokens, the faces, the bar, the buttons, the phone and the report are all
   there; this sheet is the platform's own parts: the menu, the hero's browser,
   the apps, the quote, the contact form. Every arrival moves as brand/graphics.md's
   chapter graphics do: 700 ms on the emphasized curve, and not at all under
   reduced motion. */

:root {
  --emphasized: cubic-bezier(.2, 0, 0, 1);
  --notebook: #775496; --admin: #557187; --academy: #647551;
}
:root[data-theme="dark"] { --notebook: #D3ADF5; --admin: #AEBECC; --academy: #AAB574; }

/* The bar: the apps and the two doors, the menu on a phone. */
.top nav.bar-nav { gap: 26px; margin-left: 40px; margin-right: auto; }
.top nav.bar-nav a { position: relative; }
.top nav.bar-nav a[aria-current="page"] { color: var(--ink); }
.top nav.bar-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: -10px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--accent); }
.bar-sign { color: var(--muted); text-decoration: none; font-weight: 600; font-size: .95rem; white-space: nowrap; }
.bar-sign:hover { color: var(--ink); }
.menu-toggle { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; margin-right: -8px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink); font-size: 22px; cursor: pointer; }
.menu-toggle:hover { background: var(--wash); }
.menu-toggle .when-open, .menu-toggle[aria-expanded="true"] .when-shut { display: none; }
.menu-toggle[aria-expanded="true"] .when-open { display: block; }
.top nav.menu { display: block; margin: 0; border-top: 1px solid var(--line); background: var(--paper); }
.top nav.menu[hidden] { display: none; }
.top .menu .wrap { display: flex; flex-direction: column; align-items: stretch; gap: 4px; height: auto; padding-block: 12px 24px; }
.top .menu a:not(.btn) { display: flex; align-items: center; justify-content: space-between; padding: 14px 4px; border-bottom: 1px solid var(--line); color: var(--ink); font-weight: 600; font-size: 1.08rem; text-decoration: none; }
.top .menu a:not(.btn) .ico { color: var(--muted); }
.top .menu .btn { margin-top: 16px; color: var(--on-accent); padding-block: 14px; font-size: 1rem; }
@media (max-width: 1000px) {
  .top nav.bar-nav, .top .bar-sign { display: none; }
  .top .theme-toggle { margin-left: auto; }
  .menu-toggle { display: inline-flex; }
  .top .wrap { gap: 18px; }
}
@media (max-width: 380px) { .top .btn { padding-inline: 14px; } .top .wrap { gap: 12px; } }

/* Arrivals: a block rises into place as it comes into view (platform.js marks it). */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--emphasized), transform 700ms var(--emphasized); transition-delay: var(--after, 0ms); }
.js [data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; } }
/* The hero's words arrive from the first paint, needing no script. */
[data-rise] { animation: rise 700ms var(--emphasized) var(--after, 0ms) both; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@media (max-width: 480px) { .apps-pill .wide { display: none; } }

/* The hero: one line, two doors, and the platform drawn beneath. */
.pl-hero { position: relative; isolation: isolate; overflow: clip; padding-block: clamp(40px, 7vw, 88px) 0; text-align: center; }
.pl-hero::before { content: ""; position: absolute; z-index: -1; left: 50%; top: -140px; width: min(1200px, 140vw); height: 900px; transform: translateX(-50%); background: radial-gradient(closest-side, var(--glow), transparent 72%); pointer-events: none; }
.pl-hero .wrap { display: flex; flex-direction: column; align-items: center; }
.hero-mark { display: block; width: clamp(88px, 11vw, 128px); margin: 0 auto; }
.hero-mark img { width: 100%; height: auto; filter: drop-shadow(0 18px 36px color-mix(in srgb, var(--accent) 28%, transparent)); }
.apps-line { display: flex; justify-content: center; margin: 8px 0 0; }
.apps-pill { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--raised); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--muted); font-size: .9rem; font-weight: 600; text-decoration: none; }
.apps-pill .trio { display: flex; }
.apps-pill .trio img { width: 26px; height: 26px; border-radius: 8px; box-shadow: 0 0 0 2px var(--raised); }
.apps-pill .trio img + img { margin-left: -7px; }
.apps-pill b { color: var(--ink); font-weight: 700; }
a.apps-pill:hover { border-color: var(--accent); }
.pl-hero h1 { font-size: clamp(2.9rem, 7.4vw, 5.8rem); line-height: 1.12; font-weight: 700; letter-spacing: -.024em; margin-top: 26px; max-width: 12em; }
.pl-hero h1 span, .pl-hero h1 em { display: block; }
.pl-hero h1 em { font-style: normal; color: var(--accent); }
.pl-hero .lede { font-size: clamp(1.15rem, 2vw, 1.38rem); max-width: 31em; margin: 22px auto 0; text-wrap: balance; }
.doors { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.btn.big { padding: 15px 28px; font-size: 1.05rem; }
/* The Notebook's page (built from its own site): Start free beside the sample. */
.hero-doors { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 720px) { .hero-doors { flex-direction: column; align-items: center; } }
.free-line { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-top: 18px; color: var(--muted); font-size: .95rem; }
.free-line span { display: inline-flex; align-items: center; gap: 6px; }
.free-line .ico { color: var(--success); font-size: 17px; }

/* The showcase: the web platform in its browser, the Notebook in front of it. */
.showcase { position: relative; width: 100%; max-width: 1080px; margin: clamp(48px, 7vw, 80px) auto 0; padding-bottom: 72px; }
.showcase .phone { position: absolute; z-index: 2; right: -28px; bottom: 0; width: 264px; text-align: left; }
.showcase .phone .screen { min-height: 520px; }
.showcase .float { position: absolute; z-index: 3; left: -36px; bottom: 120px; }
@media (max-width: 1180px) { .showcase .phone { right: 8px; } .showcase .float { left: 8px; } }
@media (max-width: 860px) {
  .showcase { padding-bottom: 0; }
  .showcase .browser { display: none; }
  .showcase .phone { position: relative; right: auto; margin-inline: auto; width: 300px; }
  .showcase .float { left: 50%; bottom: 64px; transform: translateX(-190px); }
}
@media (max-width: 480px) { .showcase .float { display: none; } }

/* A small card that floats over a picture: a moment worth seeing. */
.float { display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 18px; background: var(--raised); border: 1px solid var(--line); box-shadow: var(--lift); text-align: left; }
.float b { display: block; font-size: .95rem; }
.float small { display: block; color: var(--muted); font-size: .8rem; }
.float .badge { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #4D7A43; background-image: linear-gradient(160deg, rgba(255,255,255,.28), rgba(255,255,255,0) 55%); }
.float .badge path { fill: none; stroke: #fff; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
/* The check, drawn on along its stroke once the card is in (brand/graphics.md, The check). */
.js .float[data-reveal] .badge path { stroke-dashoffset: 1; transition: stroke-dashoffset 490ms cubic-bezier(.215, .61, .355, 1) calc(var(--after, 0ms) + 500ms); }
.js .float[data-reveal].in .badge path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .js .float[data-reveal] .badge path { stroke-dashoffset: 0; } }

/* The drawn browser: the web platform, as it is. */
/* The browser clips what overhangs it, so its Example label sits in the bar, on the right. */
.browser[data-example]::before { top: 8px; left: auto; right: 14px; transform: none; }
@media (max-width: 640px) { .browser[data-example] .br-url { display: none; } }
.browser { border-radius: 16px; background: var(--raised); border: 1px solid var(--line); box-shadow: var(--lift); overflow: hidden; text-align: left; font-size: 12px; line-height: 1.4; }
.br-bar { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; background: var(--sunk); border-bottom: 1px solid var(--line); }
.br-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.br-url { display: flex; align-items: center; gap: 6px; margin: 0 auto; padding: 4px 14px; border-radius: 8px; background: var(--raised); color: var(--muted); font-size: 11px; }
.br-url .ico { font-size: 11px; }
.br-body { display: grid; grid-template-columns: 196px minmax(0, 1fr); min-height: 460px; }
.br-side { display: flex; flex-direction: column; gap: 1px; padding: 16px 10px; border-right: 1px solid var(--line); background: var(--paper); }
.br-side img { width: 54px; margin: 0 0 14px 8px; }
.br-group { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 12px 10px 6px; }
.br-group:first-of-type { padding-top: 0; }
.br-side span:not(.br-group) { display: flex; align-items: center; gap: 9px; padding: 6px 10px; border-radius: 9px; color: var(--muted); font-size: 12px; }
.br-side span .ico { font-size: 15px; }
.br-side span.on { background: var(--wash); color: var(--accent); font-weight: 700; }
.br-main { padding: 22px 26px; min-width: 0; }
.br-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.br-title { font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1.15; margin-top: 2px; }
.br-doing { color: var(--muted); margin-top: 4px; }
.br-glance { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 14px; margin-top: 18px; }
.br-card { border-radius: 14px; background: var(--raised); border: 1px solid var(--line); padding: 14px; min-width: 0; }
.br-card .ev { margin-bottom: 6px; }
.br-card .ph-h { margin-top: 0; }
.br-card .ph-over { margin-top: 10px; }
.month-head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 13px; }
.month-head span { display: flex; gap: 6px; color: var(--muted); }
.month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; margin-top: 10px; text-align: center; font-size: 10.5px; font-variant-numeric: tabular-nums; }
.month b { font-size: 9px; font-weight: 700; color: var(--muted); padding-bottom: 4px; }
.month span { position: relative; padding: 5px 0 8px; border-radius: 8px; }
.month span.out { color: var(--line-strong); }
.month span.dot::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--accent); }
.month span.late::after { background: var(--danger); }
.month span.today { background: var(--accent); color: var(--on-accent); font-weight: 700; }
.month span.today::after { background: var(--on-accent); }
.br-chart { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.br-chart p { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 700; font-size: 11.5px; }
.br-chart svg { display: block; width: 100%; height: auto; margin-top: 6px; }
@media (max-width: 1000px) { .br-body { grid-template-columns: 150px minmax(0, 1fr); } .br-main { padding: 18px; } }

/* Blume Admin's browser, in its slate. */
.browser.admin { --accent: #557187; --wash: #EFF2F4; --on-accent: #FFFFFF; }
:root[data-theme="dark"] .browser.admin { --accent: #AEBECC; --wash: #35383A; --on-accent: #1A1A1A; }
.browser.admin .ad-hero b { font-size: 44px; }
.browser.admin .ad-hero span { font-size: 13px; }
.ad-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.ad-cols .ad-high { margin-top: 0; flex-direction: column; align-items: flex-start; gap: 4px; }
.ad-schools { margin-top: 12px; }
.ad-schools .ph-h { margin: 0 0 8px; }
.ad-schools .ad-rows p { grid-template-columns: minmax(0, 1fr) 40% 34px; font-size: 11.5px; }

/* Trust: the districts and the press, quiet under the hero. */
.trusted { padding-block: clamp(48px, 6vw, 72px) 0; text-align: center; }
.trusted p.k { font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.press { display: inline-flex; align-items: center; gap: 14px; margin-top: 18px; padding: 10px 18px 10px 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--raised); color: var(--ink); text-decoration: none; text-align: left; transition: border-color .2s, transform .2s; }
.press:hover { border-color: var(--accent); transform: translateY(-2px); }
.press img { width: 44px; height: auto; border-radius: 6px; background: #fff; padding: 3px; }
.press span { display: flex; flex-direction: column; line-height: 1.3; }
.press small { color: var(--muted); font-size: .82rem; }
.press b { font-size: .98rem; }
.press .ico { color: var(--muted); font-size: 18px; }

/* The apps: one card each, in its own colour. */
.apps-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.app-card { --app: var(--accent); position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 10px; padding: 28px; border-radius: 28px; background: var(--raised); border: 1px solid var(--line); box-shadow: var(--shadow); color: inherit; text-decoration: none; overflow: hidden; min-width: 0; transition: border-color .2s, transform .2s; }
.app-card::before { content: ""; position: absolute; z-index: -1; inset: 0 0 auto; height: 160px; background: radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--app) 18%, transparent), transparent 70%); }
.app-card[data-app="notebook"] { --app: var(--notebook); }
.app-card[data-app="admin"] { --app: var(--admin); }
.app-card[data-app="academy"] { --app: var(--academy); }
a.app-card:hover { border-color: var(--app); transform: translateY(-3px); }
.app-card img { width: 64px; height: 64px; border-radius: 26.5%; box-shadow: var(--lift); margin-bottom: 10px; }
.app-card h3 { font-size: 1.5rem; }
.app-card p { color: var(--muted); }
.app-card .for { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--app); }
.app-card .go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; font-weight: 700; color: var(--app); }
.app-card .go .ico { transition: transform .2s; }
a.app-card:hover .go .ico { transform: translateX(4px); }
.app-card .soon { position: absolute; top: 24px; right: 24px; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--app) 16%, transparent); color: var(--app); }
.everywhere { margin-top: 28px; text-align: center; color: var(--muted); font-size: .98rem; }
.everywhere b { color: var(--ink); font-weight: 600; }
@media (max-width: 1000px) { .apps-grid { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; } }

/* The four steps, on the home page: the map, and a way into the Notebook's page. */
.p-four .goal-card { margin-bottom: 36px; }
.p-four .steps p:not(.plain) { font-size: .95rem; }
.p-four .more { margin-top: 44px; text-align: center; }

/* The method: Allan, and a team that uses it, in their own words. */
.method .wrap { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: clamp(36px, 6vw, 80px); align-items: center; }
.method h2 { font-size: clamp(1.9rem, 3.8vw, 2.7rem); margin-top: 10px; }
.method .copy { display: flex; flex-direction: column; gap: 16px; }
.method .copy > p:not(.eyebrow) { font-size: 1.12rem; color: var(--muted); max-width: 36em; }
.quote { margin: 12px 0 0; padding: 26px 28px; border-radius: 24px; background: var(--raised); border: 1px solid var(--line); box-shadow: var(--shadow); }
.quote blockquote { margin: 0; font-family: var(--display); font-size: clamp(1.08rem, 1.8vw, 1.25rem); line-height: 1.55; }
.quote blockquote::before { content: "\201C"; display: block; height: .55em; font-size: 3.4em; line-height: 1; color: var(--accent); }
.quote figcaption { margin-top: 14px; color: var(--muted); font-size: .92rem; }
.quote figcaption b { display: block; color: var(--ink); font-size: 1rem; }
@media (max-width: 1000px) { .method .wrap { grid-template-columns: minmax(0, 1fr); } .method .portrait { max-width: 300px; } }

/* A team's way in, between the trust and the close. */
/* Meet the apps: one section each near the foot, the way to each app's own site. */
.app-heroes { padding-block: 24px 104px; }
.app-heroes .wrap { display: grid; gap: 28px; }
.app-heroes .head { margin-bottom: 12px; }
.app-hero { --app: var(--accent); --on-app: #FFFFFF; position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 40px; padding: clamp(32px, 5vw, 64px); border-radius: 32px; background: var(--raised); border: 1px solid var(--line); box-shadow: var(--shadow); scroll-margin-top: 88px; }
.app-hero::before { content: ""; position: absolute; z-index: -1; right: -12%; top: 50%; width: 620px; height: 620px; transform: translateY(-50%); background: radial-gradient(closest-side, color-mix(in srgb, var(--app) 22%, transparent), transparent 72%); pointer-events: none; }
.app-hero.flip::before { right: auto; left: -12%; }
.app-hero[data-app="notebook"] { --app: var(--notebook); }
.app-hero[data-app="admin"] { --app: var(--admin); }
.app-hero[data-app="academy"] { --app: var(--academy); }
:root[data-theme="dark"] .app-hero { --on-app: #1A1A1A; }
.app-hero.flip .ah-art { order: -1; }
.ah-name { display: flex; align-items: center; gap: 14px; margin: 0; }
.ah-name img { width: 56px; height: 56px; border-radius: 26.5%; box-shadow: var(--lift); }
.ah-name span { display: flex; flex-direction: column; line-height: 1.25; }
.ah-name small { color: var(--app); font-weight: 700; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.ah-name b { font-size: 1.1rem; }
.app-hero h2 { font-size: clamp(2.1rem, 4.4vw, 3.3rem); font-weight: 700; line-height: 1.12; letter-spacing: -.02em; margin-top: 26px; }
.app-hero h2 span, .app-hero h2 em { display: block; }
.app-hero h2 em { font-style: normal; color: var(--app); }
.ah-text > p:not(.ah-name) { color: var(--muted); font-size: 1.12rem; max-width: 30em; margin-top: 16px; }
.ah-doors { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 30px; }
.btn.app { background-color: var(--app); color: var(--on-app); padding: 13px 24px; font-size: 1rem; }
.ah-link { display: inline-flex; align-items: center; gap: 8px; color: var(--app); font-weight: 700; text-decoration: none; }
.ah-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.ah-soon { display: inline-flex; padding: 8px 14px; border-radius: 999px; background: color-mix(in srgb, var(--app) 16%, transparent); color: var(--app); font-weight: 700; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; }
.ah-art { position: relative; justify-self: center; width: min(100%, 400px); aspect-ratio: 1; }
.ah-art img { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); width: 40%; height: auto; border-radius: 26.5%; box-shadow: 0 24px 48px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.12); }
.ah-art .chip { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--lift); font-weight: 600; font-size: .92rem; white-space: nowrap; }
.ah-art .chip .ico { color: var(--app); font-size: 18px; }
.ah-art .c1 { left: 0; top: 4%; }
.ah-art .c2 { right: 0; top: 68%; }
.ah-art .c3 { left: 6%; top: 83%; }
.js .app-hero[data-reveal] .chip { opacity: 0; transform: translateY(10px); transition: opacity 600ms var(--emphasized), transform 600ms var(--emphasized); }
.js .app-hero[data-reveal].in .chip { opacity: 1; transform: none; }
.js .app-hero[data-reveal].in .c1 { transition-delay: 300ms; }
.js .app-hero[data-reveal].in .c2 { transition-delay: 420ms; }
.js .app-hero[data-reveal].in .c3 { transition-delay: 540ms; }
@media (prefers-reduced-motion: reduce) { .js .app-hero[data-reveal] .chip { opacity: 1; transform: none; } }
@media (max-width: 860px) {
  .app-hero { grid-template-columns: 1fr; gap: 28px; }
  .app-hero.flip .ah-art { order: 0; }
  .ah-art { width: min(100%, 340px); aspect-ratio: 1 / 1.25; }
  .ah-art img { top: 20%; }
  .ah-art .c2 { top: 62%; }
  .ah-art .c3 { top: 82%; }
}
@media (max-width: 1000px) { .app-heroes { padding-bottom: 72px; } }

.p-teams { padding-block: 0 104px; }
.p-teams .d-cta { margin-top: 0; padding: clamp(28px, 4vw, 48px); position: relative; isolation: isolate; overflow: hidden; }
.p-teams .d-cta::before { content: ""; position: absolute; z-index: -1; right: -120px; top: -160px; width: 520px; height: 520px; background: radial-gradient(closest-side, rgba(174,190,204,.22), transparent 72%); }
.p-teams .d-cta h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.p-teams .d-cta p { max-width: 34em; }
.d-cta .doors { margin-top: 0; justify-content: flex-start; }
.btn.ghost { background: transparent; background-image: none; color: var(--band-ink); box-shadow: inset 0 0 0 1.5px var(--band-line); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1.5px var(--band-muted); filter: none; }
@media (max-width: 1000px) { .p-teams { padding-bottom: 72px; } }

/* For teams: the page. */
.t-hero { padding-bottom: 0; }
.t-hero .showcase { max-width: 980px; padding-bottom: 0; }
.t-hero .showcase .browser { display: block; }
.t-hero .lede { color: var(--muted); }
@media (max-width: 860px) { .t-hero .showcase .browser .br-side { display: none; } .t-hero .br-body { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .ad-cols { grid-template-columns: minmax(0, 1fr); } }
.t-values { padding-block: clamp(72px, 9vw, 112px) 0; }
.t-values .teams-values { margin-bottom: 0; }
.t-steps { counter-reset: t; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.t-steps li { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 28px; border-radius: 24px; background: var(--raised); border: 1px solid var(--line); min-width: 0; }
.t-steps li::before { counter-increment: t; content: counter(t); display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 8px; border-radius: 50%; background: var(--wash); color: var(--accent); font-family: var(--display); font-weight: 700; font-size: 1.2rem; }
.t-steps h3 { font-size: 1.2rem; }
.t-steps p { color: var(--muted); }
@media (max-width: 1000px) { .t-steps { grid-template-columns: minmax(0, 1fr); } }
.t-samples .samples-row { max-width: 1040px; margin-inline: auto; }
.t-ferpa { display: flex; gap: 18px; align-items: flex-start; max-width: 860px; margin: 56px auto 0; padding: 24px 28px; border-radius: 24px; background: var(--wash); }
.t-ferpa .glyph { background: var(--raised); }
.t-ferpa b { display: block; font-size: 1.08rem; margin-bottom: 4px; }
.t-ferpa p { color: var(--muted); }

/* Talk to us: the form, beside what happens next. */
.c-page { position: relative; isolation: isolate; padding-block: clamp(40px, 6vw, 80px) clamp(72px, 9vw, 112px); }
.c-page::before { content: ""; position: absolute; z-index: -1; left: 20%; top: -140px; width: 900px; height: 700px; max-width: 120vw; transform: translateX(-50%); background: radial-gradient(closest-side, var(--glow), transparent 72%); pointer-events: none; }
.c-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 80px); align-items: start; }
.c-intro h1 { font-size: clamp(2.6rem, 6vw, 4.2rem); font-weight: 900; line-height: 1.1; letter-spacing: -.02em; margin-top: 14px; }
.c-intro h1 em { font-style: normal; color: var(--accent); }
.c-intro .lede { font-size: 1.18rem; }
.c-next { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.c-next li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; }
.c-next .glyph { width: 44px; height: 44px; font-size: 20px; }
.c-next b { display: block; }
.c-next p { color: var(--muted); font-size: .97rem; }
.c-alt { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); }
.c-alt a { font-weight: 700; }
.form-card { padding: clamp(24px, 3.4vw, 40px); border-radius: 28px; background: var(--raised); border: 1px solid var(--line); box-shadow: var(--lift); }
.form { display: flex; flex-direction: column; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label, .field legend { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .95rem; padding: 0; }
.opt { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: var(--sunk); color: var(--muted); }
.field input, .field textarea { width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: var(--paper); border: 1px solid var(--line-strong); border-radius: 14px; padding: 13px 15px; transition: border-color .15s, box-shadow .15s; }
.field textarea { min-height: 132px; resize: vertical; line-height: 1.5; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--glow); }
.field[data-error] input, .field[data-error] textarea { border-color: var(--danger); }
.field .err { color: var(--danger); font-size: .9rem; font-weight: 600; }
.field .err:empty { display: none; }
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.chips label { cursor: pointer; }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chips span { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--paper); font-weight: 600; font-size: .95rem; color: var(--muted); transition: border-color .15s, background .15s, color .15s; }
.chips input:checked + span { border-color: var(--accent); background: var(--wash); color: var(--accent); }
.chips input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form .btn { align-self: flex-start; padding: 14px 26px; font-size: 1rem; }
.form .btn[disabled] { opacity: .7; cursor: progress; }
.form .fine { color: var(--muted); font-size: .88rem; }
.form-failed { padding: 14px 16px; border-radius: 14px; background: var(--danger-wash); color: var(--danger); font-weight: 600; }
.form-failed[hidden], .form-done[hidden] { display: none; }
.form-done { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 12px 0; }
.form-done .badge { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #4D7A43; background-image: linear-gradient(160deg, rgba(255,255,255,.28), rgba(255,255,255,0) 55%); }
.form-done .badge path { fill: none; stroke: #fff; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; animation: gp-draw 490ms cubic-bezier(.215, .61, .355, 1) 200ms both; }
.form-done h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.form-done p { color: var(--muted); }
@media (max-width: 1000px) { .c-grid { grid-template-columns: minmax(0, 1fr); } }

/* The footer: the apps, the company and the legal, over the line. */
footer.foot .wrap.foot-top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px; align-items: start; padding-block: 56px 32px; }
.foot-brand { display: flex; flex-direction: column; gap: 14px; }
.foot-brand img { width: 84px; }
.foot-brand p { max-width: 22em; }
.social { display: flex; gap: 8px; }
.social a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); color: var(--muted); font-size: 18px; }
.social a:hover { color: var(--ink); border-color: var(--line-strong); }
footer.foot nav { display: flex; flex-direction: column; gap: 10px; }
footer.foot nav b { color: var(--ink); font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
footer.foot nav .link { text-align: left; }
footer.foot .soon-tag { font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; margin-left: 6px; border-radius: 999px; background: var(--sunk); color: var(--muted); }
footer.foot .wrap.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 20px 40px; border-top: 1px solid var(--line); }
@media (max-width: 1000px) { footer.foot .wrap.foot-top { grid-template-columns: repeat(3, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { footer.foot .wrap.foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* For teams: where the data counts, six moments, two across on a tablet. */
@media (min-width: 640px) and (max-width: 1000px) { .t-moments { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Academy: the page. Its hero has no picture beneath, so it keeps its foot. */
.a-hero { padding-bottom: clamp(48px, 7vw, 88px); }
.a-split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; padding: clamp(28px, 4vw, 48px); border-radius: 28px; background: var(--raised); border: 1px solid var(--line); }
.a-split h2 { margin-block: 8px 14px; }
.a-split p:not(.eyebrow) { color: var(--muted); }
.a-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.a-points li { display: flex; gap: 12px; align-items: flex-start; font-weight: 600; }
.a-points .ico { flex: none; margin-top: 3px; color: var(--accent); }
.teams-values.a-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.a-course-list { list-style: none; margin: 0 auto; padding: 0; max-width: 920px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.a-course-list li { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--raised); border: 1px solid var(--line); font-weight: 600; }
.a-course-list .ico { color: var(--accent); }
.a-people-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.a-people-grid li { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 28px 20px; border-radius: 24px; background: var(--raised); border: 1px solid var(--line); text-align: center; min-width: 0; }
.a-people-grid img { width: 104px; height: 104px; margin-bottom: 10px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px var(--wash); }
.a-people-grid b { color: var(--ink); }
.a-people-grid span { color: var(--muted); font-size: .92rem; }
@media (max-width: 1000px) { .teams-values.a-four { grid-template-columns: repeat(2, minmax(0, 1fr)); } .a-split { grid-template-columns: minmax(0, 1fr); } .a-people-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .teams-values.a-four { grid-template-columns: minmax(0, 1fr); } .a-people-grid { gap: 12px; } .a-people-grid li { padding: 20px 12px; } .a-people-grid img { width: 76px; height: 76px; } .a-people-grid span { font-size: .85rem; } }

/* Get the app (/download): one narrow column, the phone's own panel, its steps
   numbered on the page, and the web beneath. */
.dl { position: relative; isolation: isolate; padding-block: clamp(40px, 7vw, 88px) clamp(72px, 9vw, 112px); text-align: center; }
.dl::before { content: ""; position: absolute; z-index: -1; left: 50%; top: -140px; width: 900px; height: 700px; max-width: 120vw; transform: translateX(-50%); background: radial-gradient(closest-side, var(--glow), transparent 72%); pointer-events: none; }
.dl .wrap { max-width: 640px; }
.dl-icon { width: 88px; height: 88px; border-radius: 22px; box-shadow: var(--lift); margin: 0 auto 22px; }
.dl h1 { font-size: clamp(2.4rem, 7vw, 3.8rem); font-weight: 900; line-height: 1.12; letter-spacing: -.02em; margin-top: 12px; }
.dl h1 em { display: block; font-style: normal; color: var(--accent); }
.dl .lede { margin: 18px auto 0; text-wrap: balance; }
/* The two badges are the page's choice: larger than the site's, a button
   reset for iPhone's, and the one chosen ringed in the accent. */
.dl-stores { justify-content: center; margin-top: 32px; }
.dl .store { min-width: 210px; padding: 12px 22px 12px 18px; border-radius: 14px; font: inherit; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.dl .store svg { width: 30px; height: 30px; }
.dl .store small { font-size: .74rem; }
.dl .store b { font-size: 1.32rem; }
.dl .store:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.dl .store.chosen { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--accent); }
.dl-stores + .dl-note { margin-top: 28px; }
.dl-panel { margin-top: 28px; }
/* Where the site sets its badges two abreast, the page stacks them, full size. */
@media (max-width: 720px) {
  .dl-stores { grid-template-columns: 1fr; max-width: 300px; margin-top: 24px; }
  .dl .store { min-width: 0; justify-content: center; padding: 12px 20px; }
  .dl .store small { font-size: .74rem; }
  .dl .store b { font-size: 1.32rem; }
  .dl .store svg { width: 30px; height: 30px; }
}
.dl-note { color: var(--muted); font-size: 1.05rem; text-wrap: balance; }
.dl-note b { color: var(--ink); font-weight: 600; }
.dl-steps { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 14px; text-align: left; }
.dl-steps li { display: flex; gap: 16px; align-items: flex-start; padding: 20px; border-radius: 18px; background: var(--raised); border: 1px solid var(--line); box-shadow: var(--shadow); }
.dl-steps b { display: block; font-size: 1.08rem; }
.dl-steps p { color: var(--muted); margin: 4px 0 0; }
.dl-steps .btn { margin-top: 14px; }
.dl-num { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--wash); color: var(--accent); font-weight: 700; }
.dl-after { color: var(--muted); font-size: .95rem; margin-top: 18px; }
.dl-web { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.dl-web.quiet { margin-top: 22px; }
.dl-web.quiet .btn { background: transparent; color: var(--accent); background-image: none; padding-inline: 8px; }
.dl-web.quiet .btn:not(:first-child) { display: none; }
@media (max-width: 560px) { .dl-web .btn { width: 100%; } .dl-web.quiet .btn { width: auto; } }
/* On a phone the first step is on the first screen: the icon smaller, and the
   lede left out while there are steps to follow. */
@media (max-width: 560px) {
  .dl { padding-top: 24px; }
  .dl-icon { width: 60px; height: 60px; border-radius: 15px; margin-bottom: 14px; }
  .dl h1 { font-size: 2.3rem; }
  .dl.ready .lede { display: none; }
  .dl-panel { margin-top: 20px; }
  .dl-steps li { padding: 16px; gap: 14px; }
}