/* Web presentation consumes the governed palette. Clinical text and rules remain in the activity runtime. */
:root { color-scheme:light; --web-rail:238px; --web-display:clamp(2rem,3.65vw,3.65rem); --web-editorial:Georgia,'Times New Roman',serif; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--soft); color:var(--ink); font:var(--type-body-size)/1.5 var(--font); }
button,input,select,textarea { font:inherit; }
button,a,input,select { -webkit-tap-highlight-color:transparent; }
button,a { touch-action:manipulation; }
button { cursor:pointer; }
button { color:inherit; }
button:disabled { cursor:wait; opacity:.65; }
a { color:var(--action); text-underline-offset:4px; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible { outline:var(--focus-ring); outline-offset:4px; }
button:focus:not(:focus-visible) { outline:0; }
button { border:0; }
svg.icon { width:24px; height:24px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.skip-link { position:fixed; left:16px; top:-100px; z-index:100; background:var(--surface); padding:16px; }
.skip-link:focus { top:12px; }
.sidebar { width:var(--web-rail); position:fixed; inset:0 auto 0 0; padding:36px 22px 24px; border-right:1px solid var(--line); background:var(--surface); display:flex; flex-direction:column; z-index:40; }
.brand { display:flex; gap:10px; align-items:center; color:var(--action-dark); text-decoration:none; font-size:var(--type-section-size); font-weight:750; letter-spacing:-.8px; }
.brand-aunty { font-weight:450; }
.brand small { display:block; color:var(--muted); font-size:var(--type-support-size); font-weight:400; letter-spacing:-.6px; margin-top:2px; white-space:nowrap; }
.brand img { width:40px; height:40px; }
#desktop-nav { margin-top:64px; display:grid; gap:10px; }
.nav-link { display:flex; align-items:center; gap:14px; min-height:56px; width:100%; padding:12px 16px; text-align:left; color:var(--muted); background:transparent; border-radius:var(--radius-control); font-size:var(--type-body-size); text-decoration:none; }
.nav-link:hover { background:var(--soft); color:var(--action-dark); }
.nav-link[aria-current="page"] { color:var(--action-dark); background:var(--action-soft); font-weight:650; }
.nav-link.urgent-link { color:var(--danger); margin-top:22px; border-top:1px solid var(--line); border-radius:0; padding-top:24px; }
.nav-link.urgent-link[aria-current="page"] { background:var(--danger-soft); border-radius:var(--radius-control); }
.sidebar-bottom { margin-top:auto; padding-top:40px; }
.sidebar-note { font-family:var(--web-editorial); font-size:var(--type-section-size); line-height:1.4; color:var(--action-dark); margin:0 8px 20px; }
.sidebar-talk { width:100%; display:flex; align-items:center; justify-content:center; gap:8px; min-height:56px; background:var(--action-dark); color:var(--on-action); border-radius:var(--radius-control); font-size:var(--type-support-size); font-weight:650; padding:12px; }
.page-shell { margin-left:var(--web-rail); padding:0 clamp(24px,4vw,64px); max-width:1600px; }
.topbar { min-height:100px; display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid var(--line); }
.welcome-note { color:var(--muted); font-size:var(--type-support-size); }
.utility { display:flex; gap:14px; align-items:center; }
.utility-button { display:flex; align-items:center; gap:8px; min-height:48px; padding:8px 10px; background:transparent; font-size:var(--type-support-size); border-radius:var(--radius-control); }
.utility-button:hover { background:var(--strip); }
.prototype-notice { display:block; color:var(--on-aid); font-size:var(--type-support-size); padding:12px 0; }
.connection-notice { padding:12px 16px; background:var(--aid-soft); color:var(--on-aid); border-radius:var(--radius-control); margin:0 0 16px; }
main { outline:none; min-height:55vh; }
.hero { display:grid; grid-template-columns:1.04fr 1fr; overflow:hidden; border-radius:var(--radius-frame); background:var(--paper); min-height:400px; }
.hero-copy { padding:38px 12px 34px 38px; position:relative; z-index:1; }
.eyebrow { display:flex; align-items:center; gap:8px; font-size:var(--type-support-size); letter-spacing:1.4px; font-weight:650; color:var(--action); margin:0 0 16px; }
.eyebrow svg { width:18px; height:18px; }
.hero h1 { font-family:var(--web-editorial); font-weight:400; font-size:var(--web-display); line-height:1.06; letter-spacing:-1.9px; color:var(--action-dark); margin:0 0 20px; white-space:pre-line; }
.hero-copy > p:not(.eyebrow) { max-width:430px; margin:0 0 22px; color:var(--muted); font-size:var(--type-body-size); }
.hero-image { min-width:0; position:relative; min-height:100%; }
.hero-image img { width:100%; height:100%; object-fit:cover; object-position:69% 50%; position:absolute; inset:0; }
.hero-image::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,var(--paper),transparent 22%); pointer-events:none; }
.hero-image .image-fallback { position:absolute; inset:0; display:grid; place-content:center; color:var(--action-dark); padding:32px; }
.primary,.secondary,.text-button { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:56px; padding:12px 20px; font-size:var(--type-body-size); font-weight:650; border-radius:var(--radius-control); text-decoration:none; }
.primary { background:var(--action-dark); color:var(--on-action); }
.primary:hover { background:var(--action); }
.secondary { color:var(--action-dark); background:var(--surface); border:1px solid var(--line-strong); }
.secondary:hover { background:var(--action-soft); }
.text-button { padding:10px 0; min-height:48px; color:var(--action); background:transparent; text-align:left; justify-content:flex-start; font-size:var(--type-support-size); }
.hero .screen-help { display:flex; gap:8px; font-size:var(--type-support-size); margin-top:6px; }
.voice-hint { font-size:var(--type-support-size); color:var(--muted); margin:10px 0 0; }
.section-heading { display:flex; gap:16px; align-items:flex-end; justify-content:space-between; margin:36px 0 18px; }
.section-heading h2 { font-size:var(--type-section-size); color:var(--action-dark); font-weight:650; margin:0; letter-spacing:-.5px; }
.section-heading p { font-size:var(--type-support-size); color:var(--muted); margin:5px 0 0; }
.stage-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.stage-card { display:grid; grid-template-columns:1fr 104px; align-items:center; text-align:left; overflow:hidden; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-card); padding:0; min-height:154px; transition:transform .18s,border-color .18s; }
.stage-card:hover { transform:translateY(-3px); border-color:var(--action); }
.stage-copy { padding:22px 0 20px 20px; }
.stage-card strong { font-size:var(--type-body-size); display:block; color:var(--action-dark); font-weight:650; line-height:1.3; }
.stage-card .card-description { display:block; color:var(--muted); font-size:var(--type-support-size); margin:8px 0 12px; line-height:1.4; }
.stage-card img { width:104px; height:154px; object-fit:cover; object-position:50% 30%; align-self:stretch; mask-image:linear-gradient(90deg,transparent,black 20%); }
.stage-copy>.icon { color:var(--action); width:21px; height:21px; }
.family-link { display:flex; align-items:center; justify-content:flex-start; gap:12px; margin:12px 0 0; padding:10px 0; background:transparent; color:var(--muted); min-height:48px; font-size:var(--type-support-size); text-align:left; }
.family-link span { color:var(--action); }
.activity-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.activity-card { display:flex; flex-direction:column; align-items:stretch; text-align:left; padding:24px; min-width:0; min-height:185px; border:1px solid var(--line); border-radius:var(--radius-card); color:var(--ink); background:var(--surface); transition:border-color .18s,transform .18s; }
.activity-card:hover { border-color:var(--action); transform:translateY(-2px); }
.activity-card .activity-icon { display:grid; place-items:center; width:44px; height:44px; color:var(--action); background:var(--action-soft); border-radius:var(--radius-control); margin-bottom:18px; }
.activity-card .activity-type { font-size:var(--type-support-size); color:var(--muted); margin-bottom:6px; }
.activity-card strong { font-size:var(--type-body-size); font-weight:650; line-height:1.4; color:var(--action-dark); }
.activity-card .activity-summary { font-size:var(--type-support-size); color:var(--muted); margin:8px 0 0; line-height:1.5; }
.activity-card .card-arrow { margin-top:auto; padding-top:18px; color:var(--action); align-self:flex-end; }
.support-strip { display:grid; grid-template-columns:1fr 1fr; gap:32px; border-top:1px solid var(--line); margin-top:36px; padding:28px 0; }
.support-item { display:flex; gap:16px; }
.support-item>svg { margin-top:4px; color:var(--action); }
.support-item strong { font-weight:650; font-size:var(--type-body-size); color:var(--action-dark); }
.support-item p { font-size:var(--type-support-size); color:var(--muted); margin:6px 0 0; }
.page-footer { border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:24px; align-items:center; padding:18px 0 30px; color:var(--muted); font-size:var(--type-support-size); }
.page-footer>span { max-width:440px; }
.footer-actions { display:flex; gap:20px; align-items:center; flex-wrap:wrap; }
.footer-actions button { background:transparent; min-height:48px; color:var(--action); font-size:var(--type-support-size); padding:0; }
.page-intro { max-width:780px; margin:24px 0 28px; }
.page-intro h1 { font-family:var(--web-editorial); font-size:clamp(2rem,3vw,2.8rem); line-height:1.15; color:var(--action-dark); font-weight:400; letter-spacing:-1px; margin:10px 0 14px; }
.page-intro p { color:var(--muted); margin:0; }
.back-button { background:transparent; display:flex; align-items:center; gap:8px; color:var(--action); padding:6px 0; min-height:48px; font-size:var(--type-support-size); }
.search-form { position:relative; display:flex; max-width:740px; margin:22px 0; }
.search-form>svg { position:absolute; top:19px; left:18px; color:var(--muted); }
.search-form input { width:100%; padding:16px 62px 16px 54px; min-height:62px; border:1px solid var(--line-strong); border-radius:var(--radius-control); background:var(--surface); color:var(--ink); }
.search-form button { position:absolute; right:6px; top:6px; background:var(--action-dark); color:var(--on-action); min-width:48px; min-height:48px; display:grid; place-items:center; border-radius:var(--radius-control); }
.filter-row { display:flex; gap:10px; flex-wrap:wrap; margin:20px 0 28px; }
.filter-button { border:1px solid var(--line); border-radius:var(--radius-pill); background:var(--surface); padding:10px 18px; min-height:48px; color:var(--muted); font-size:var(--type-support-size); }
.filter-button[aria-pressed="true"] { background:var(--action-dark); border-color:var(--action-dark); color:var(--on-action); }
.browse-intro { display:flex; gap:28px; align-items:center; }
.browse-intro img { width:100px; height:100px; object-fit:cover; border-radius:var(--radius-pill); }
.browse .activity-grid { margin-bottom:32px; }
.empty-state { max-width:720px; background:var(--paper); padding:32px; border-radius:var(--radius-card); margin:24px 0; }
.empty-state h2 { color:var(--action-dark); font-size:var(--type-section-size); margin:0 0 12px; }
.empty-state p { color:var(--muted); }
.urgent-intro { border-left:4px solid var(--danger); padding-left:24px; }
.urgent-intro h1 { color:var(--danger-ink); }
.urgent-choices { display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:800px; }
.urgent-choice { display:flex; align-items:center; gap:16px; min-height:84px; padding:20px; border:1px solid var(--line-strong); border-radius:var(--radius-card); color:var(--ink); background:var(--surface); text-align:left; }
.urgent-choice:hover { border-color:var(--danger); background:var(--danger-soft); }
.urgent-choice .icon { color:var(--danger); }
.urgent-notice { color:var(--danger-ink); background:var(--danger-soft); padding:20px; border-radius:var(--radius-control); max-width:800px; margin:28px 0; }
.workspace-head { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:8px; }
.workspace-head h1 { font-size:var(--type-section-size); font-weight:650; color:var(--action-dark); margin:0; }
.workspace-note { color:var(--muted); font-size:var(--type-support-size); margin:10px 0; }
.workspace { width:100%; border:1px solid var(--line); border-radius:var(--radius-card); background:var(--surface); min-height:640px; display:block; }
.workspace-frame-wrap { position:relative; }
.activity-loading { position:absolute; inset:0; background:var(--surface); display:flex; justify-content:center; align-items:flex-start; padding:100px 24px; border-radius:var(--radius-card); z-index:2; }
.activity-loading .icon { animation:spin 1.8s linear infinite; }
.activity-loading>div { display:flex; gap:14px; align-items:center; }
.workspace-failure { margin:0; }
.mobile-nav { display:none; }
dialog { width:min(570px,calc(100% - 32px)); max-height:calc(100dvh - 40px); border:1px solid var(--line); border-radius:var(--radius-frame); background:var(--soft); color:var(--ink); padding:32px; box-shadow:var(--elev-float); overflow:auto; }
dialog::backdrop { background:color-mix(in srgb,var(--action-dark) 45%,transparent); backdrop-filter:blur(4px); }
.dialog-close { display:flex; align-items:center; justify-content:center; min-width:48px; min-height:48px; margin:-14px -14px 2px auto; background:transparent; color:var(--muted); border-radius:var(--radius-pill); }
dialog h2 { color:var(--action-dark); font-family:var(--web-editorial); font-weight:400; font-size:var(--type-task-size); line-height:1.2; margin:8px 0 16px; }
dialog p { margin:12px 0 24px; }
.dialog-actions { display:flex; flex-direction:column; gap:12px; margin-top:24px; }
.dialog-note { font-size:var(--type-support-size); color:var(--muted); }
.language-choice { width:100%; justify-content:space-between; }
.voice-emblem { display:grid; place-content:center; width:88px; height:88px; margin:0 0 24px; background:var(--action-soft); border-radius:var(--radius-pill); color:var(--action); }
.voice-emblem .icon { width:40px; height:40px; }
.voice-state { display:flex; gap:6px; justify-content:center; align-items:center; height:60px; margin:14px auto; }
.voice-state i { display:block; width:5px; height:18px; background:var(--action); border-radius:var(--radius-pill); animation:wave 1.3s ease-in-out infinite; }
.voice-state i:nth-child(2n) { animation-delay:.2s; height:34px; }
.voice-state i:nth-child(3n) { animation-delay:.4s; height:24px; }
.phone-alternative { border-top:1px solid var(--line); padding-top:20px; margin-top:26px; }
.phone-alternative p { margin:0 0 8px; font-size:var(--type-support-size); color:var(--muted); }
.call-controls { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.call-controls .end-call { background:var(--danger); color:var(--on-danger); }
.call-status { text-align:center; color:var(--action-dark); }
.call-error { padding:16px; background:var(--aid-soft); color:var(--on-aid); border-radius:var(--radius-control); }
.pause-screen { margin:60px auto; max-width:600px; text-align:center; padding:36px; }
.pause-screen>svg { width:48px; height:48px; color:var(--action); }
.pause-screen h1 { font:400 var(--type-task-size)/1.2 var(--web-editorial); color:var(--action-dark); }
.initial-state { min-height:400px; display:grid; place-items:center; }
.noscript { position:fixed; inset:20%; z-index:100; background:var(--surface); padding:36px; }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes wave { 50% { transform:scaleY(.5); } }
@media(min-width:1600px) { .hero { min-height:440px; } .hero-copy { padding:48px; } }
@media(max-width:1200px) { :root { --web-rail:208px; } .sidebar { padding-inline:16px; } .brand small { white-space:normal; font-size:var(--type-support-size); line-height:1.2; } .page-shell { padding-inline:28px; } .stage-grid { gap:12px; } .stage-card { grid-template-columns:1fr 72px; } .stage-card img { width:72px; height:100%; } .stage-copy { padding:18px 0 18px 16px; } .hero-copy { padding:28px; padding-right:0; } .hero { min-height:390px; } .activity-grid { gap:14px; } .activity-card { padding:20px; } }
@media(max-width:960px) { .stage-grid { grid-template-columns:1fr; } .stage-card { grid-template-columns:1fr 120px; min-height:112px; } .stage-card img { height:126px; width:120px; } .stage-copy { padding:18px 24px; } .stage-copy .card-description { margin:6px 0 0; } .stage-copy>.icon { display:none; } .activity-grid { grid-template-columns:1fr 1fr; } .hero { grid-template-columns:1fr; position:relative; } .hero-copy { max-width:100%; padding:30px; padding-right:28%; } .hero-image { position:absolute; right:0; top:0; width:48%; height:100%; opacity:.27; } .hero-image::after { background:linear-gradient(90deg,var(--paper),transparent); } .hero h1 { font-size:2.65rem; } .support-strip { grid-template-columns:1fr; gap:22px; } .welcome-note { display:none; } .topbar { justify-content:flex-end; } }
@media(max-width:700px) { :root { --web-rail:0px; } .sidebar { display:none; } .page-shell { margin:0; padding:0 20px; } .topbar { min-height:76px; justify-content:space-between; gap:8px; } .welcome-note { display:flex; align-items:center; gap:8px; color:var(--action-dark); font-size:var(--type-section-size); font-weight:650; letter-spacing:-1px; } .welcome-note::before { content:''; width:32px; height:32px; background:url('/assets/mark.svg') center/contain no-repeat; flex:none; } .utility { gap:2px; } .utility-button { font-size:var(--type-support-size); gap:5px; padding-inline:7px; } .utility-button .icon { width:20px; height:20px; } .hide-button>span { display:none; } .prototype-notice { font-size:var(--type-support-size); line-height:1.4; padding:12px 0 16px; } .hero { min-height:0; border-radius:var(--radius-frame); display:flex; flex-direction:column; } .hero-copy { padding:28px 24px 20px; max-width:none; } .eyebrow { letter-spacing:1px; margin-bottom:18px; font-size:var(--type-support-size); } .hero h1 { font-size:2.7rem; margin-bottom:18px; letter-spacing:-1.8px; } .hero-copy>p:not(.eyebrow) { margin-bottom:22px; } .hero .primary { width:100%; } .hero .screen-help { justify-content:center; width:100%; } .voice-hint { text-align:center; } .hero-image { position:relative; width:100%; height:192px; min-height:192px; opacity:1; order:-1; } .hero-image img { object-position:60% 47%; } .hero-image::after { background:linear-gradient(0deg,var(--paper),transparent 25%); } .section-heading { margin-top:30px; gap:12px; align-items:center; } .section-heading h2 { font-size:var(--type-section-size); } .section-heading p { margin-top:6px; } .section-heading>.text-button { font-size:var(--type-support-size); max-width:120px; text-align:right; justify-content:flex-end; } .stage-grid { gap:12px; } .stage-card { grid-template-columns:1fr 118px; } .stage-card img { width:118px; height:142px; } .stage-copy { padding:20px 6px 20px 20px; } .stage-card strong { font-size:var(--type-section-size); } .stage-card .card-description { font-size:var(--type-support-size); margin-top:8px; } .family-link { font-size:var(--type-support-size); align-items:flex-start; gap:10px; } .family-link>.icon { margin-top:3px; } .activity-grid { grid-template-columns:1fr; gap:12px; } .activity-card { min-height:108px; display:grid; grid-template-columns:46px 1fr 22px; column-gap:16px; padding:20px; } .activity-card .activity-icon { grid-row:1/4; margin:0; align-self:center; } .activity-card .activity-type { grid-column:2; margin-bottom:4px; } .activity-card strong { grid-column:2; } .activity-card .activity-summary { grid-column:2; font-size:var(--type-support-size); margin-top:6px; } .activity-card .card-arrow { grid-column:3; grid-row:1/4; align-self:center; margin:0; padding:0; width:20px; } .support-strip { margin-top:28px; padding-block:24px; } .page-footer { flex-direction:column; align-items:flex-start; gap:8px; padding-bottom:100px; } .footer-actions { gap:24px; } .mobile-nav { position:fixed; inset:auto 0 0; display:grid; grid-template-columns:repeat(5,1fr); background:var(--surface); border-top:1px solid var(--line); padding:8px 8px max(10px,env(safe-area-inset-bottom)); z-index:40; box-shadow:var(--elev-card); } .mobile-nav .nav-link { flex-direction:column; justify-content:center; gap:3px; padding:6px 2px; min-height:60px; font-size:var(--type-support-size); border-radius:var(--radius-control); line-height:1.3; } .mobile-nav .nav-link .icon { width:23px; height:23px; } .mobile-nav .nav-link.urgent-link { margin:0; padding:6px 2px; border:0; } .page-intro { margin-top:18px; } .page-intro h1 { font-size:2.1rem; } .browse-intro { gap:16px; } .browse-intro img { width:72px; height:72px; } .search-form { margin-top:18px; } .filter-row { gap:8px; margin:18px 0 22px; } .filter-button { padding:10px 14px; } .urgent-choices { grid-template-columns:1fr; } .urgent-choice { min-height:76px; } .urgent-intro { padding-left:18px; } .workspace-head { align-items:flex-start; } .workspace-head h1 { font-size:var(--type-body-size); } .workspace { min-height:650px; border-radius:var(--radius-control); } .workspace-note { font-size:var(--type-support-size); } dialog { padding:24px; } .pause-screen { padding:24px 0; margin-top:40px; } }
@media(max-width:360px) { .page-shell { padding-inline:14px; } .hero-copy { padding:24px 20px 20px; } .hero h1 { font-size:2.3rem; } .hero-image { height:168px; min-height:168px; } .stage-card { grid-template-columns:1fr 95px; } .stage-card img { width:95px; } .stage-copy { padding-left:16px; } .mobile-nav .nav-link { font-size:var(--type-support-size); } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }
@media print { .sidebar,.topbar,.prototype-notice,.mobile-nav,.page-footer { display:none; } .page-shell { margin:0; padding:0; } }

@media(max-width:700px) { .hero h1 { font-size:2.25rem; letter-spacing:-1.3px; } .hero-image { height:144px; min-height:144px; } }

.compact-talk { color:var(--action); }
@media(max-width:700px) { .utility-button { padding-inline:6px; } #language-button>.icon { display:none; } .welcome-note { font-size:var(--type-body-size); } }

.topbar { position:sticky; top:0; z-index:35; background:var(--soft); }