/* One shell geometry, independent of the currently enabled view stylesheet. */
:root{--primo-gutter:48px;--primo-width:1240px}
html{scrollbar-gutter:stable}
body{margin:0;background:#0b0e16;color:#f5f6fa;font:16px/1.6 var(--font-text)}
[hidden]{display:none!important}
body .portal-top{position:static;top:auto;z-index:20;background:#0b0e16}
body .notice{box-sizing:border-box;margin:0;padding:8px 20px;background:#1b263a;color:#d0daeb;text-align:center;font:12px/1.4 var(--font-text);border:0}
body .portal-top .banner{box-sizing:border-box;position:relative;display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:30px;min-height:116px;margin:0;padding:24px max(var(--primo-gutter),calc((100% - var(--primo-width))/2));background:#000;color:#fff;border:0;border-image:none}
body .portal-top .banner::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:4px;background:linear-gradient(90deg,#087caf 0 20%,#aa519f 20% 40%,#e5232b 40% 60%,#ffcd43 60% 80%,#35a643 80%)}
body .portal-top .brand-original{display:flex;flex:none;align-items:center;gap:18px;max-width:none;margin:0;padding:0;text-decoration:none;color:white;background:#000}
body .portal-top .brand-original img{display:block;width:240px;height:auto;max-width:none;margin:0;background:#000}
body .portal-top .brand-original .online-label{display:block;margin:0;border-left:1px solid #646464;padding:0 0 0 18px;font:12px/1.6 var(--font-text);letter-spacing:.17em;color:#f5f6fa}
body .portal-top .banner .product-nav{display:flex;align-items:center;justify-content:flex-end;flex-wrap:nowrap;width:auto;gap:24px;margin:0 0 0 auto;padding:0;border:0;background:transparent}
body .portal-top .banner .product-nav>a{box-sizing:border-box;display:inline-flex!important;align-items:center;gap:5px;min-height:48px;margin:0;padding:8px 0;border:0;border-bottom:2px solid transparent;background:transparent;color:#d9e2ef;font:14px/1.6 var(--font-text);letter-spacing:0;text-decoration:none;white-space:nowrap}
body .portal-top .banner .product-nav>a[aria-current="page"]{color:white;border-bottom-color:white}
body .portal-top .banner .product-nav>a:hover{color:#fff}
body .portal-top .banner .product-nav>a:focus-visible{outline:2px solid #fff;outline-offset:4px}
body .session-bar{box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 20px;min-height:64px;margin:0;padding:8px max(var(--primo-gutter),calc((100% - var(--primo-width))/2));background:#111b2b;border-bottom:1px solid #303c51;color:#b9c3d5;font:12px/1.4 var(--font-text)}
body .session-bar>div{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
body .session-bar button{box-sizing:border-box;min-height:48px!important;padding:8px 12px!important;margin:0;border:1px solid #536783;border-radius:4px;background:#20324a;color:#f5f6fa;font:12px/1.4 var(--font-text);font-weight:600;cursor:pointer;max-width:100%;white-space:normal}
body .reviewer-area.shell{box-sizing:border-box;width:min(var(--primo-width),calc(100% - var(--primo-gutter)*2));max-width:none;margin:0 auto;padding:8px 0 0;font:12px/1.5 var(--font-text)}
body .reviewer-tools{border:0;background:transparent;font:12px/1.5 var(--font-text)}
body .reviewer-tools>summary{display:list-item;min-height:36px;margin:0;padding:8px 0;font:12px/1.5 var(--font-text);color:#b9c3d5;cursor:pointer;list-style:disclosure-closed}
body .reviewer-tools[open]>summary{list-style:disclosure-open}
body .reviewer-tools>summary::after{content:none}
body .reviewer-tools>summary::-webkit-details-marker{display:revert}
body .reviewer-tools button{min-height:48px;padding:8px 12px;border:1px solid #536783;border-radius:4px;background:#20324a;color:white;font:13px var(--font-text)}
body #status{box-sizing:border-box;margin:10px 0 20px;padding:0;border:0;background:transparent;color:#b9c3d5;font:12px/1.5 var(--font-text);overflow-wrap:anywhere}
body.home-mode #status{width:min(var(--primo-width),calc(100% - var(--primo-gutter)*2));margin:10px auto 0}
body #workspace.shell,body #workspace.container{box-sizing:border-box;width:min(var(--primo-width),calc(100% - var(--primo-gutter)*2));max-width:none;margin:0 auto;padding:24px 0 0}
body.home-mode #workspace{width:100%;max-width:none;padding:0}
body .parent-strip{margin:0;border-bottom:1px solid #303c51;background:#0b0e16}
body .parent-strip nav{box-sizing:border-box;display:flex;align-items:center;flex-wrap:wrap;width:min(var(--primo-width),calc(100% - var(--primo-gutter)*2));max-width:none;margin:auto;padding:0;gap:28px}
body .parent-strip nav a{display:inline-flex;align-items:center;min-height:56px;padding:8px 0;color:#b9c3d5;border:0;border-bottom:2px solid transparent;text-decoration:none;font:14px/1.6 var(--font-text)}
body .parent-strip nav a[aria-current="page"]{color:white;border-bottom-color:#fff}
body>footer.shell{box-sizing:border-box;display:block;width:min(var(--primo-width),calc(100% - var(--primo-gutter)*2));max-width:none;margin:32px auto 0;padding:0 0 30px;color:#b9c3d5;font:12px/1.6 var(--font-text)}
.public-entry{background:transparent;color:#d9e2ef;border:0;padding:0;cursor:pointer;text-decoration:underline}
body.player-expanded .portal-top,body.player-expanded>.notice{visibility:hidden}
@media(max-width:1120px){:root{--primo-gutter:32px}body .portal-top .banner{padding-block:22px}}
@media(max-width:760px){:root{--primo-gutter:20px}body .portal-top .banner{min-height:98px;padding-block:20px;gap:12px;flex-wrap:wrap}body .portal-top .brand-original{gap:12px}body .portal-top .brand-original img{width:195px}body .portal-top .brand-original .online-label{font-size:11px;padding-left:12px}body .portal-top .banner .product-nav{width:100%;justify-content:flex-start;gap:20px;margin:0}body .portal-top .banner .product-nav>a{font-size:14px}body .session-bar{align-items:flex-start;flex-direction:column}body .parent-strip nav{gap:20px}body .parent-strip nav a{font-size:13px;min-height:48px}body #workspace.shell,body #workspace.container{padding-top:20px}}
.session-dialog{color:#f1f5fc;background:#182235;border:1px solid #66758d;border-radius:8px;max-width:560px;width:calc(100% - 32px);padding:42px;box-shadow:0 24px 100px #0008;font:15px/1.55 var(--font-text)}.session-dialog::backdrop{background:#030711d9}.session-dialog h2{font-size:30px;line-height:1.2}.session-dialog .close{position:absolute;right:12px;top:10px;background:transparent;color:white;border:0;font-size:28px;width:48px;height:48px}.session-dialog label{display:block;margin:14px 0 9px}.session-dialog input[type=email]{min-width:0;width:100%;min-height:52px;background:#0e1726;color:white;border:1px solid #71819b;border-radius:4px;padding:12px 14px}.session-dialog .checkbox{display:flex;align-items:flex-start;gap:12px;cursor:pointer;margin-top:20px}.session-dialog .checkbox input{width:20px;height:20px;flex:none;margin-top:3px}.session-dialog .micro{font-size:12px;color:#b9c3d5}.session-dialog .button{display:inline-flex;align-items:center;padding:14px 20px;min-height:48px;border:1px solid #71819b;border-radius:4px;font-weight:600;cursor:pointer;background:#f1f5fc;color:#101725}.session-dialog .secondary{background:transparent;color:#f1f5fc}
.session-dialog{font-family:var(--font-text)}.session-dialog .checkbox{min-height:48px}@media(max-width:760px){.session-dialog{padding:36px 24px}}
/* Cart count is shell text, not a Learning-specific badge. */
body .portal-top .banner .product-nav>a .cart-count{display:inline;margin:0;padding:0;border:0;font:inherit;letter-spacing:inherit;line-height:inherit}
/* aria-current="false" is an inactive link, not a second active tab. */
body .portal-top .banner .product-nav>a:not([aria-current="page"]){border-bottom:2px solid transparent;color:#d9e2ef;text-decoration:none}
body .portal-top .banner .product-nav>a[aria-current="page"]{border-bottom:2px solid #fff;color:#fff;text-decoration:none}
/* DEC-109 typography: Plus Jakarta Sans headings, Source Sans 3 text; self-hosted OFL fonts, Arial fallback. */
@font-face{font-family:"Plus Jakarta Sans";src:url(assets/fonts/PlusJakartaSans-latin-var.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url(assets/fonts/SourceSans3-latin-var.woff2) format("woff2");font-weight:200 900;font-display:swap}
:root{--font-display:"Plus Jakarta Sans",Arial,Helvetica,sans-serif;--font-text:"Source Sans 3",Arial,Helvetica,sans-serif}
body,body .portal-top,body .portal-top *,dialog,.session-dialog{font-family:var(--font-text)}
body h1,body h2,body h3,body h1 em,body h2 em,body .film-word,body .price,body dialog h2,body .portal-top h1,body .portal-top h2,body .portal-top h3{font-family:var(--font-display)}
body h1,body h2,body .portal-top h1,body .portal-top h2{word-spacing:.08em}
body .parent-screen button:not(.event-dot),body .parent-screen .button,body .parent-screen .timeline-track button.event-dot{font-family:var(--font-text)}
/* Sprint 01: grown-ups gate (PP-ST-029). */
.session-dialog #gate-input{width:100%;min-height:52px;background:#0e1726;color:white;border:1px solid #71819b;border-radius:4px;padding:12px 14px;font:inherit}
.session-dialog .gate-error{color:#ffb4b4;min-height:1.5em;margin:8px 0}
.session-dialog .actions{display:flex;gap:10px;flex-wrap:wrap}
/* Grown-ups gate v2: PIN row, show/hide toggle, countdown and nudge. All targets at least 44px. */
.session-dialog .pin-row{display:flex;gap:10px;align-items:stretch}.session-dialog .pin-row #gate-input{flex:1 1 auto;min-width:0;letter-spacing:.3em}
.session-dialog .pin-reveal{min-width:72px;min-height:52px;justify-content:center}
.session-dialog .actions .button{min-height:48px;min-width:44px}
.session-dialog #gate-input:disabled{opacity:.55}
.session-dialog .gate-countdown{font-weight:600;min-height:1.5em;margin:0 0 8px}
.session-dialog 
/* S-4: visual masking for PIN fields, which are type="text" so password managers do not offer to save them. */
.pin-mask{-webkit-text-security:disc}

/* PP-ST-033 setup checklist and resume card (03-design.md). Layout only: every colour is an existing token
   (--bg #0b0e16, --panel #141b29, --line #303c51, --ink #f5f6fa, --muted #b9c3d5, field #0e1726/#71819b). */
.parent-screen .setup-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:48px;align-items:start}
.parent-screen .setup-steps{list-style:none;margin:0;padding:0}
.parent-screen .setup-steps>li{margin:0;padding:0}
.parent-screen .setup-step .row{flex-wrap:wrap}
.parent-screen .setup-chip-skipped{color:#b9c3d5}
.parent-screen .setup-label-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:14px 0 6px}
.parent-screen .setup-label-row .note{margin:0}
.parent-screen .setup-form input[type="text"]{box-sizing:border-box;width:100%;min-height:52px;padding:12px 14px;border:1px solid #71819b;border-radius:4px;background:#0e1726;color:#f5f6fa;font:inherit}
.parent-screen .setup-footer{margin:24px 0 0}
.parent-screen .setup-done h2{margin-bottom:12px}
.setup-resume{box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;background:#141b29;border:1px solid #303c51;border-radius:7px;padding:20px 24px;color:#f5f6fa}
.setup-resume h2{margin:0;font-size:22px;line-height:1.3}
.setup-resume p{margin:4px 0 0;color:#b9c3d5}
.setup-resume .actions{display:flex;flex-wrap:wrap;gap:12px}
.setup-resume .button{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 20px;border:1px solid #536783;border-radius:4px;background:#20324a;color:#f5f6fa;font:600 14px/1.5 var(--font-text);text-decoration:none;cursor:pointer}
.setup-resume .button.primary{background:#f5f6fa;color:#101725;border-color:#f5f6fa}
.setup-resume-wrap{margin-top:24px;margin-bottom:8px}
@media(max-width:800px){.parent-screen .setup-layout{grid-template-columns:minmax(0,1fr);gap:0}}
@media(max-width:480px){.parent-screen .setup-step .actions .button,.parent-screen .setup-done .actions .button,.parent-screen .setup-footer .actions .button,.setup-resume .actions,.setup-resume .button{flex-basis:100%;width:100%}.parent-screen .setup-step{padding:20px}.setup-resume{flex-direction:column;align-items:stretch}}
.parent-screen .setup-skip-choice{margin:16px 0;padding:20px 24px;background:#141b29;border:1px solid #303c51;border-radius:7px}
.parent-screen .setup-skip-choice h2{font-size:22px;margin:0 0 8px}
@media(max-width:480px){.parent-screen .setup-skip-choice .actions .button{flex-basis:100%;width:100%}}
/* Packages (DEC-165): DEC-148 labels as neutral chips (ink text, no colour fill, 14px), and a nav that wraps on phones. */
.pp-chip{display:inline-block;font-size:14px;font-weight:600;line-height:1.3;padding:1px 8px;border:1px solid #b9c3d5;border-radius:3px;color:#f5f6fa;background:transparent;white-space:nowrap;vertical-align:baseline}
@media(max-width:760px){body .portal-top .banner .product-nav{flex-wrap:wrap;column-gap:20px;row-gap:0}}
/* Layout pattern (prototype layout review, 5 Nov 2026). Spacing scale 4/8/12/16/24/32/48; gaps 24; body lines about 64 characters.
   One column under 1100px; two columns 7/5 from 1100px. Wide items span both. */
.parent-screen .pp-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
.parent-screen .pp-grid>.card,.parent-screen .pp-grid>.fine,.parent-screen .pp-grid>details.card{margin:0}
.parent-screen .pp-grid p{max-width:64ch}
.parent-screen .pp-grid .pp-details{margin-top:16px;border-top:1px solid #303c51}
.parent-screen .pp-grid .pp-details>summary{font-size:14px;font-weight:600}
.parent-screen .pp-grid .pp-details>p,.parent-screen .pp-grid .pkg-working>p{font-size:15px}
@media(min-width:1100px){
 .parent-screen .pp-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
 .parent-screen .pp-grid>#other-packages,.parent-screen .pp-grid>#package-payments,.parent-screen .pp-grid>.fine,.parent-screen .pp-grid>.pp-wide{grid-column:1/-1}
}
/* Other packages: offer left; the panel ("If you change now") right, Pay and Not now at its foot. */
.parent-screen .pkg-option+.pkg-option{margin-top:24px;padding-top:24px;border-top:1px solid #303c51}
.parent-screen .pkg-option.pp-has-panel{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
.parent-screen .pkg-summary{background:#0e1726;border:1px solid #303c51;border-radius:7px;padding:24px;margin:0}
.parent-screen .pkg-summary .pkg-strip{font-size:20px;margin:0 0 12px}
.parent-screen .pkg-pay-actions{justify-content:flex-end}
@media(min-width:1100px){.parent-screen .pkg-option.pp-has-panel{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
@media(max-width:480px){.parent-screen .pkg-summary{padding:16px}.parent-screen .pkg-pay-actions .button{flex-basis:100%}}
.parent-screen .pkg-check{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:16px 0}
.parent-screen .pkg-check .checkbox{display:flex;align-items:center;gap:12px;min-height:48px;margin:0;cursor:pointer}
.parent-screen .pkg-check .checkbox input{width:24px;height:24px;min-height:0;flex:none;margin:0}
.parent-screen .pkg-check .chip{margin:0}

/* ---- Layout PR 3 (prototype layout review, 5 Nov 2026): the pattern applied to the remaining pages. ---- */
/* Packages and prices: from 1100px a section is a row (heading left, content right); cards and the table stay full width. */
.pricing .pp-body{min-width:0}
.pricing .pp-body>p,.pricing .pp-body>ul,.pricing .pp-body>ol,.pricing .pp-body>h3,.pricing .pp-body>.questions{max-width:780px}
.pricing .pp-details{margin-top:16px;border-top:1px solid #303c51;max-width:none}
.pricing .pp-details>summary{font-size:15px;font-weight:600;padding:12px 0;min-height:48px;box-sizing:border-box;cursor:pointer}
.pricing .pp-cols>div>h3:first-child{margin-top:16px}
.pricing .pp-hero{max-width:none}
@media(min-width:1100px){
 .pricing .pp-hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:start}
 .pricing .pp-hero-side{padding-top:88px}.pricing .pp-hero-side .pp-note:first-child{margin-top:0}
 .pricing .pp-section.pp-row{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:0 48px;align-items:start}
 .pricing .pp-row>h2{position:sticky;top:24px;margin:0;font-size:28px}
 .pricing .pp-row .questions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 32px;align-items:start;max-width:none}
 .pricing .pp-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 32px}
 .pricing .pp-section{padding-top:48px}
}
/* Account & support: cards flow in two balanced columns from 1100px, so short cards leave no gaps. */
.parent-screen .pp-masonry>*{margin:0 0 24px;break-inside:avoid}
.parent-screen .pp-masonry p{max-width:64ch}
@media(min-width:1100px){.parent-screen .pp-masonry{column-count:2;column-gap:24px}}
.parent-screen .pp-masonry .card h3{margin:24px 0 8px;font-size:20px}
/* Overview: the tutor card sits beside the child's heading (aside), everything else full width. */
.parent-screen .pp-details{margin:0 0 16px;border-top:1px solid #303c51}
.parent-screen .pp-details>summary{font-size:14px;font-weight:600;padding:12px 0;min-height:48px;box-sizing:border-box;cursor:pointer}
@media(min-width:1100px){
 .parent-screen .child-panel{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:24px;grid-template-rows:auto auto 1fr;align-items:start}
 .parent-screen .child-panel>*{grid-column:1/-1}
 .parent-screen .child-panel>h1,.parent-screen .child-panel>.intro,.parent-screen .child-panel>.chips{grid-column:1}
 .parent-screen .child-panel>.tutor-card{grid-column:2;grid-row:1/span 3;margin:0}
}
/* Children: one card per child, side by side from 720px; the buttons sit under the name and chips. */
.parent-screen .kids-list{background:transparent;border:0;padding:0;margin:24px 0}
.parent-screen .kids-list>.list-row{background:#141b29;border:1px solid #303c51;border-radius:7px;padding:24px;margin:0 0 24px;min-width:0}
.parent-screen .kids-list>.list-row>.row{display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin:0}
.parent-screen .kids-list .kid-head p{margin:12px 0 0}
.parent-screen .kids-list .kid-row .actions{display:flex;flex-wrap:wrap;gap:8px}
@media(min-width:720px){.parent-screen .kids-list{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:stretch}.parent-screen .kids-list>.list-row{margin:0}.parent-screen .kids-list>:not(.list-row){grid-column:1/-1}}
@media(max-width:480px){.parent-screen .kids-list>.list-row{padding:16px}}
/* Home: the Packages block uses the width (intro left, labels right; actions left, change and extra-child lines right). */
@media(min-width:1100px){
 .packages .pp-head{max-width:none;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:0 48px;align-items:start}
 .packages .pp-head>.eyebrow,.packages .pp-head>h2,.packages .pp-head>.intro{grid-column:1}
 .packages .pp-head>.pp-notes{grid-column:2;grid-row:1/span 3;padding-top:24px}.packages .pp-head>.pp-notes>.pp-note:first-child{margin-top:0}
 .packages .pp-below{max-width:none;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:0 48px;align-items:start}
 .packages .pp-below>.actions{grid-column:1;grid-row:1}.packages .pp-below>.text-link{grid-column:1;grid-row:2}.packages .pp-below>p{grid-column:2;max-width:64ch;margin-top:0}
}
/* Help, Contact and Notifications (two columns from 1100px; one column below). */
@media(min-width:1100px){
 .parent-screen .pp-grid.pp-grid-even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .parent-screen .pp-grid.pp-grid-even>.pp-wide{grid-column:1/-1}
 .parent-screen .pp-grid.pp-grid-form{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
}
.parent-screen .pp-grid .pp-side>.intro{margin:0 0 24px}
.parent-screen .pp-grid .pp-side>.card{margin:0}
.parent-screen .pp-grid .contact-card .contact-form{max-width:none}
@media(min-width:1100px){.parent-screen .pp-grid .service-emails{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 24px;align-items:start}}
/* Package colours (John, 9 Nov 2026): one colour per package everywhere, the same as the Packages page cards (#488).
   Tokens: design-system/tokens.json package-*. The status chip (Active, Cancelling) keeps its own colour. */
:root{--pkg-t1:#2bb6ee;--pkg-t1-bg:#0f3550;--pkg-t2:#c45fb8;--pkg-t2-bg:#3f1f48;--pkg-t3:#ffd02c;--pkg-t3-bg:#453a10}
.pkg-chip{--tone:var(--pkg-t1);background:var(--tone);border-color:var(--tone);color:#0b0e16;font-weight:700}
.pkg-chip.pkg-t2{--tone:var(--pkg-t2)}.pkg-chip.pkg-t3{--tone:var(--pkg-t3)}
.sub-chips{display:inline-flex;flex-wrap:wrap;gap:8px;align-items:center}.sub-chips .chip{margin:0}
.parent-screen .family-package{border-left:6px solid var(--pkg-t1)}
.parent-screen .family-package .row{align-items:center;gap:16px;flex-wrap:wrap}
.parent-screen .family-package .fp-line{font-size:18px;margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.parent-screen .family-package .fp-line .chip{margin:0}
.parent-screen .family-package .fine{margin:8px 0 0}
.parent-screen .kids-package .pkg-chip{margin:0 4px}
.parent-screen .kid-add{border:1px solid var(--pkg-t1);border-left:6px solid var(--pkg-t1);background:var(--pkg-t1-bg);border-radius:8px;padding:20px;margin-top:16px}
.parent-screen .kid-add h3{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.parent-screen .kid-add h3 .chip{margin:0}
.parent-screen .kid-add-price{font-size:17px}