/* Pearl Reef: the kids' world. Loaded after pearl.css on every page except the teacher workspace,
   the admin console and Upskilling (see core/context_processors.py), and scoped to body.kid.
   Bright sea colours, chunky navy outlines, sticker shadows, squishy buttons, bubbles.
   Text stays navy on every bright colour (white only on cobalt), so it is easy to read. */
@font-face{font-family:'Fredoka';font-weight:300 700;font-style:normal;font-display:swap;src:url("../fonts/Fredoka-latin.f927be6ddd92.woff2") format('woff2')}
body.kid{
  --paper:#FFF8E7;--surface:#FFFFFF;--ink:#14233A;--muted:#4A5568;
  --border:#14233A;--border-2:#14233A;
  --coral:#FF7A59;--sun:#FFC93C;--cobalt:#3B6EE0;--meadow:#3CCB7F;--blossom:#FF8FC7;--lilac:#B89CFF;
  --aqua:#4FD1E8;--sea:#BDF1FF;--sea-2:#8FE3F5;--sand:#FFE29A;
  --tint-sun:#FFF1B8;--tint-blossom:#FFE3F0;--tint-lilac:#EEE6FF;--tint-meadow:#DDF8E8;--tint-sea:#DDF7FF;--tint-coral:#FFE4DA;
  --icon-bg:#E9F8FF;
  --display:'Fredoka','Hanken Grotesk',system-ui,sans-serif;
  --line:3px;--pop:0 5px 0 var(--navy);--pop-sm:0 3px 0 var(--navy);--pop-lg:0 8px 0 var(--navy);
  --r-card:24px;--r-tile:28px;--r-input:16px;
  --bounce:cubic-bezier(.34,1.56,.64,1);
  background:var(--paper);
}
.kid h1,.kid h2,.kid h3,.kid h4,.kid .sec-title,.kid .wordmark b,.kid .btn,.kid .try-opt,.kid .stat .value{font-family:var(--display);letter-spacing:0}
.kid h1,.kid h2,.kid h3{font-weight:600;color:var(--navy)}
.kid .t-cobalt h3,.kid .t-cobalt h2{color:#fff}
.kid .label{font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.04em;color:var(--navy)}

/* ---- Buttons: chunky, outlined, squish when pressed ---- */
.kid .btn{background:var(--sun);color:var(--navy);border:var(--line) solid var(--navy);box-shadow:var(--pop);font-weight:600;font-size:17px;min-height:48px;padding:10px 24px;
  transition:transform .18s var(--bounce),box-shadow .18s var(--bounce),background-color .15s}
.kid .btn:hover{background:#FFD45E;color:var(--navy);border-color:var(--navy);transform:translateY(-2px);box-shadow:0 7px 0 var(--navy)}
.kid .btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--navy)}
.kid .btn.ghost{background:var(--surface);color:var(--navy)}.kid .btn.ghost:hover{background:var(--tint-sea)}
.kid .btn.danger{background:var(--coral);color:var(--navy)}
.kid .btn.sm{min-height:38px;padding:5px 16px;font-size:15px;box-shadow:var(--pop-sm)}
.kid .btn.sm:hover{box-shadow:0 5px 0 var(--navy)}.kid .btn.sm:active{box-shadow:0 0 0 var(--navy);transform:translateY(3px)}
.kid .btn.lg{min-height:58px;padding:14px 30px;font-size:19px}
.kid .btn:disabled,.kid .btn[disabled]{box-shadow:none;transform:none}

/* ---- Top of the page ---- */
.kid .audience-bar{background:var(--navy)}
.kid .audience-bar a{font-family:var(--display);font-size:14px}
.kid .topbar{background:var(--surface);border-bottom:var(--line) solid var(--navy)}
.kid .topbar a.nav{font-family:var(--display);font-size:17px;font-weight:500;color:var(--navy);border:0;padding:6px 14px;border-radius:999px;transition:background-color .15s}
.kid .topbar a.nav:hover{background:var(--tint-sea)}
.kid .topbar a.nav.on{background:var(--sun);box-shadow:inset 0 0 0 2.5px var(--navy)}
.kid .main-nav{gap:6px}
.kid .nav-menu summary{border:var(--line) solid var(--navy);box-shadow:var(--pop-sm)}
.kid .nav-sheet{background:var(--surface);border-bottom:var(--line) solid var(--navy)}
.kid .nav-sheet a:not(.btn){font-family:var(--display);border-bottom:2px dashed #CDEAF2}
.kid .brand .logo-mark{transition:transform .4s var(--bounce)}
.kid .brand:hover .logo-mark{transform:rotate(-12deg) scale(1.08)}

/* ---- Everyday boxes: white stickers with a navy outline ---- */
.kid .tile,.kid .course-card,.kid .teacher,.kid .review,.kid .pay-steps li,.kid .faq details,.kid .goal,.kid .try-card,.kid .empty{
  border:var(--line) solid var(--navy);box-shadow:var(--pop)}
.kid .tile{border-radius:var(--r-tile)}
.kid .messages li{border:2.5px solid var(--navy);border-radius:var(--r-input);font-weight:500}
.kid .note{border:2px solid var(--navy);border-radius:var(--r-input)}
.kid .pill,.kid .chip-label{border:2px solid var(--navy);background:var(--surface);color:var(--navy);font-weight:600;letter-spacing:.02em}
.kid .soon{border:1.5px solid var(--navy)}
.kid .bar{height:16px;background:var(--surface);border:2.5px solid var(--navy)}
.kid .bar>i{background:repeating-linear-gradient(-45deg,var(--sun) 0 10px,#FFB020 10px 20px);border-right:2.5px solid var(--navy)}
.kid input:not([type=checkbox]):not([type=radio]),.kid select,.kid textarea{border:2.5px solid var(--navy)!important;border-radius:var(--r-input)!important}
.kid input:focus,.kid select:focus,.kid textarea:focus{box-shadow:0 0 0 4px var(--sea-2)!important;outline:0}

/* ---- Course cards: coloured top with the subject's reef friend ---- */
.kid .course-card{transition:transform .25s var(--bounce),box-shadow .25s var(--bounce)}
.kid .course-card:hover{transform:translateY(-6px) rotate(-1deg);box-shadow:var(--pop-lg);border-color:var(--navy)}
.kid .course-card:nth-child(even):hover{transform:translateY(-6px) rotate(1deg)}
.kid .cc-thumb{height:150px;border-bottom:var(--line) solid var(--navy);overflow:hidden;
  background-image:radial-gradient(circle at 18% 30%,rgba(255,255,255,.55) 0 7px,transparent 8px),radial-gradient(circle at 30% 62%,rgba(255,255,255,.45) 0 4px,transparent 5px),radial-gradient(circle at 52% 22%,rgba(255,255,255,.4) 0 5px,transparent 6px)}
.kid .cc-subject{top:12px;bottom:auto;border:2px solid var(--navy);font-family:var(--display);font-size:14px;z-index:1}
.kid .cc-body h3{font-size:23px;font-weight:600}
.kid .cc-price{font-family:var(--display)}

/* ---- Footer: the deep sea, with a wave on top ---- */
.kid .site-foot{position:relative;margin-top:60px;background:#0F2A4A;border-top:0}
.kid .site-foot::before{content:"";position:absolute;left:0;right:0;top:-38px;height:40px;background:#0F2A4A;-webkit-mask:var(--wave) 0 0/600px 100% repeat-x;mask:var(--wave) 0 0/600px 100% repeat-x}
.kid .site-foot h4{font-family:var(--display);font-size:18px;color:var(--sun)}
.kid{--wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V22C50 0 100 0 150 20S250 40 300 20 400 0 450 20 550 40 600 22V40Z'/%3E%3C/svg%3E")}

/* ---- Phone tab bar ---- */
.kid .tabs{border-top:var(--line) solid var(--navy)}
.kid .tabs a,.kid .tabs label{font-family:var(--display);position:relative}
.kid .tabs a.on{color:var(--navy)}
.kid .tabs a.on .icon{background:var(--sun);border-radius:999px;box-shadow:inset 0 0 0 2px var(--navy)}

/* ---- Reef friends (partials/critter.html) ---- */
.critter{display:block;overflow:visible}
@media (prefers-reduced-motion:no-preference){
  .kid .bob{animation:bob 3.2s ease-in-out infinite}
  .kid .bob.slow{animation-duration:4.4s}.kid .bob.late{animation-delay:-1.4s}.kid .bob.later{animation-delay:-2.6s}
  @keyframes bob{0%,100%{transform:translateY(0) rotate(var(--tilt,0deg))}50%{transform:translateY(-10px) rotate(calc(var(--tilt,0deg) * -1))}}
  .kid .wiggle-hover:hover .critter{animation:wiggle .5s var(--bounce)}
  @keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-10deg) scale(1.08)}75%{transform:rotate(8deg) scale(1.08)}}
}

/* Sections that sit on a band of colour, with wavy edges top and bottom */
.kid .band{position:relative;background:var(--band);z-index:1}
.kid .band::before,.kid .band::after{content:"";position:absolute;left:0;right:0;height:40px;background:var(--band);-webkit-mask:var(--wave) 0 0/600px 100% repeat-x;mask:var(--wave) 0 0/600px 100% repeat-x;pointer-events:none}
.kid .band::before{top:-38px}
.kid .band::after{bottom:-38px;transform:scaleY(-1)}
.kid .band-sun{--band:var(--tint-sun)}.kid .band-blossom{--band:var(--tint-blossom)}.kid .band-lilac{--band:var(--tint-lilac)}
.kid .band-meadow{--band:var(--tint-meadow)}.kid .band-sea{--band:var(--tint-sea)}

/* Bubbles that float up (decoration only) */
.bubbles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.bubbles i{position:absolute;bottom:-30px;left:var(--x);width:var(--s,16px);height:var(--s,16px);border-radius:50%;border:2.5px solid rgba(255,255,255,.95);background:radial-gradient(circle at 32% 30%,#fff 0 22%,rgba(255,255,255,.15) 26%)}
@media (prefers-reduced-motion:no-preference){
  .bubbles i{animation:rise var(--d,9s) linear infinite;animation-delay:var(--w,0s)}
  @keyframes rise{0%{transform:translate(0,0);opacity:0}10%{opacity:1}50%{transform:translate(12px,-260px)}100%{transform:translate(-6px,-560px);opacity:0}}
}
@media (prefers-reduced-motion:reduce){.bubbles i{bottom:auto;top:var(--y,40%)}}

/* ---- Student dashboard ---- */
.hello{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;background:var(--sea);border:var(--line) solid var(--navy);border-radius:var(--r-tile);box-shadow:var(--pop);padding:18px 26px;margin:8px 0 26px;overflow:hidden}
.hello h1{margin:0;font-size:clamp(28px,4vw,40px)}
.hello p{margin:4px 0 0;font-size:17px}
.hello .critter{width:96px;height:96px;position:relative;z-index:1}
.hello>div,.hello>.btn{position:relative;z-index:1}
.kid .stat.t-sun,.kid .stat.t-lilac,.kid .stat.t-meadow{color:var(--navy)}
.kid .stat .label{color:var(--navy)}
.kid .stat .value{font-size:2.2rem}
.my-course{display:grid;grid-template-columns:84px 1fr minmax(180px,240px);gap:18px;align-items:center}
.my-course .mc-pal{width:84px;height:84px;border-radius:22px;border:var(--line) solid var(--navy);display:grid;place-items:center}
.my-course .mc-pal .critter{width:66px;height:66px}
.my-course h3 a{color:var(--navy);text-decoration:none}.my-course h3 a:hover{text-decoration:underline}
@media (max-width:640px){
  .hello{grid-template-columns:auto 1fr;padding:16px}
  .hello .btn{grid-column:1/-1}
  .hello .critter{width:72px;height:72px}
  .my-course{grid-template-columns:64px 1fr}
  .my-course .mc-pal{width:64px;height:64px}.my-course .mc-pal .critter{width:50px;height:50px}
  .my-course>div:last-child{grid-column:1/-1}
}

/* ---- Lessons stay calmer: the same shapes, less going on ---- */
.kid.lesson-page .tile{box-shadow:var(--pop-sm)}

/* ================= Home: Pearl Reef ================= */
.kid .home .sec-title{font-size:clamp(30px,4vw,46px);font-weight:600}
.kid .home .label{display:inline-block;padding:4px 14px;border-radius:999px;background:var(--surface);border:2.5px solid var(--navy);font-size:14px}

/* Hero: a sunny sea with the reef on the right */
.reef-hero{position:relative;padding:48px 0 84px;background:linear-gradient(180deg,#8FE3F5 0%,#BDF1FF 60%,var(--paper) 100%);overflow:hidden}
.reef-hero .hero-grid{display:grid;grid-template-columns:5fr 6fr;gap:40px;align-items:center}
.reef-hero h1{margin:18px 0 0;font-size:clamp(44px,6.4vw,78px);line-height:1;font-weight:700;color:var(--navy);text-wrap:balance}
.kid .reef-hero .accent{font-style:normal;color:var(--navy);background:none;position:relative;white-space:nowrap;z-index:0}
.kid .reef-hero .accent::after{content:"";position:absolute;left:-4px;right:-6px;bottom:.06em;height:.32em;background:var(--sun);border:2.5px solid var(--navy);border-radius:999px;z-index:-1;transform:rotate(-1.5deg)}
.reef-hero .hero-sub{margin-top:18px!important;font-size:19px;line-height:1.55;color:var(--navy);max-width:44ch}
.reef-hero .hero-actions{margin-top:28px}
.reef-hero .hero-note{color:var(--navy)}
.kid .eyebrow-pill{border:2.5px solid var(--navy);box-shadow:var(--pop-sm);font-family:var(--display);font-size:13px;letter-spacing:.03em;padding:4px 14px 4px 6px}
.kid .eyebrow-pill .critter{width:30px;height:30px}
.reef{position:relative;aspect-ratio:560/480;border:var(--line) solid var(--navy);border-radius:48% 52% 44% 56% / 40% 42% 58% 60%;box-shadow:0 10px 0 var(--navy);
  background:radial-gradient(circle at 30% 20%,#7FE0F2 0,#3FBEDB 60%,#22A2C6 100%);overflow:hidden;isolation:isolate}
.reef-scene{position:absolute;inset:0;width:100%;height:100%}
.reef .pal{position:absolute;display:block;z-index:2}
.reef .pal .critter{width:100%;height:auto}
.pal-finn{left:9%;top:13%;width:19%}
.pal-bubbles{left:41%;top:5%;width:16%}
.pal-ollie{right:9%;top:9%;width:21%}
.pal-tia{left:6%;top:43%;width:20%}
.pal-stella{left:13%;bottom:4%;width:19%;transform:rotate(-12deg)}
.pal-coco{right:15%;bottom:3%;width:20%}
.pal-pip{left:36%;bottom:6%;width:30%;z-index:3}
.say{position:absolute;z-index:4;left:56%;top:37%;padding:10px 14px;border-radius:20px;background:var(--surface);border:var(--line) solid var(--navy);font:600 clamp(12px,1.5vw,16px)/1.25 var(--display);color:var(--navy);box-shadow:var(--pop-sm)}
.say::after{content:"";position:absolute;left:18px;bottom:-12px;width:16px;height:16px;background:var(--surface);border-right:var(--line) solid var(--navy);border-bottom:var(--line) solid var(--navy);transform:rotate(45deg)}
@media (prefers-reduced-motion:no-preference){
  .say{animation:pop-in .5s var(--bounce) .6s both}
  @keyframes pop-in{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
}

/* Pearl path: the five steps as a string of bubbles */
.path-sec{position:relative;z-index:2;margin-top:-44px}
.pearl-path{list-style:none;margin:0;padding:18px 20px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;background:var(--surface);border:var(--line) solid var(--navy);border-radius:var(--r-tile);box-shadow:var(--pop);position:relative}
.pearl-path::before{content:"";position:absolute;left:8%;right:8%;top:60px;border-top:3px dashed var(--navy);z-index:0}
.pearl-path li{position:relative;z-index:1;display:grid;grid-template-rows:84px auto auto;align-items:center;justify-items:center;text-align:center;gap:4px}
.kid .subject-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.pearl-path li .pearl{background:var(--c);border-radius:50%;padding:6px;box-sizing:content-box;border:2.5px solid var(--navy)}
.pearl-path b{font:600 18px/1.2 var(--display);color:var(--navy)}
.pearl-path span{font-size:14px;color:var(--muted);line-height:1.3}

/* Subject cards: a reef friend peeks out of every card */
.kid .subject-card{border:var(--line) solid var(--navy);box-shadow:var(--pop);min-height:270px;transition:transform .25s var(--bounce),box-shadow .25s var(--bounce)}
.kid .subject-card:hover{transform:translateY(-6px) rotate(-1.5deg);box-shadow:var(--pop-lg)}
.kid .subject-card:nth-child(even):hover{transform:translateY(-6px) rotate(1.5deg)}
.kid .subject-card h3{font-size:27px;padding-right:0;color:inherit}
.sc-friend{font:500 15px var(--display);opacity:.9}
.kid .subject-card p{max-width:20ch;font-size:15px}
.kid .sc-count{margin-top:auto;border:2px solid var(--navy);font-family:var(--display);font-size:14px}
.sc-pal{position:absolute;right:-6px;bottom:-10px;width:118px;transform:rotate(-6deg);filter:drop-shadow(0 4px 0 rgba(20,35,58,.25))}
.subject-card:nth-child(even) .sc-pal{transform:rotate(7deg)}
.sc-pal .critter{width:100%;height:auto}
.kid .subject-card.t-cobalt .sc-count{color:var(--navy)}

/* Goals */
.kid .goal{border-radius:var(--r-card);transition:transform .25s var(--bounce),box-shadow .25s var(--bounce)}
.kid .goal:hover{border-color:var(--navy);transform:translateY(-5px);box-shadow:var(--pop-lg)}
.goal-pal{width:72px;height:72px;border-radius:22px;background:var(--c);border:2.5px solid var(--navy);display:grid;place-items:center}
.goal-pal .critter{width:58px;height:58px}
.kid .goal h3{font-size:21px}
.kid .goal p{color:var(--ink)}
.kid .goal-go{font-family:var(--display);font-size:16px}
.kid .goal-grown{font-family:var(--font)}.kid .goal-grown h3{color:#fff;font-family:var(--font)}

/* How it works */
.kid .how{position:relative;border:var(--line) solid var(--navy);box-shadow:var(--pop);padding-top:34px;overflow:visible}
.kid .how .label{background:var(--surface);opacity:1;justify-self:start}
.kid .how h3{font-size:25px}
.how-pal{position:absolute;right:14px;top:-34px;width:88px}
.how-pal .critter{width:100%;height:auto}
.kid .step-pill{border:2px solid var(--navy);font-family:var(--display);font-size:14px}
.kid .how-grid{margin-top:56px;gap:28px}

/* Try a pearl */
.kid .try-card{border-radius:var(--r-tile)}
.kid .try-tag{border:2px solid var(--navy);background:var(--sea);font-family:var(--display);font-size:13px}
.kid .try-q{font-family:var(--display);font-weight:500;font-size:clamp(24px,3vw,32px)}
.kid .try-opt{border:var(--line) solid var(--navy);box-shadow:var(--pop);background:var(--surface);font-size:30px;min-height:72px;min-width:96px;transition:transform .18s var(--bounce),box-shadow .18s var(--bounce)}
.kid .try-opt:nth-child(1){background:var(--tint-sea)}.kid .try-opt:nth-child(2){background:var(--tint-sun)}.kid .try-opt:nth-child(3){background:var(--tint-blossom)}
.kid .try-opt:hover:not(:disabled){border-color:var(--navy);transform:translateY(-3px);box-shadow:0 8px 0 var(--navy)}
.kid .try-opt:active:not(:disabled){transform:translateY(4px);box-shadow:0 1px 0 var(--navy)}
.kid .try-opt.try-again{background:#EEF0F3;color:var(--muted);box-shadow:var(--pop-sm)}
.kid .try-opt.right{background:var(--sun);animation:bounce-in .5s var(--bounce)}
@keyframes bounce-in{0%{transform:scale(.8)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
.kid .try-feedback>div{border:2.5px solid var(--navy)}
.kid .try-hint{background:var(--tint-sea)}
.kid .try-hint .critter{width:64px;height:64px;flex:none}
.kid .ring-card{border:var(--line) solid var(--navy);box-shadow:var(--pop)}
.kid .ring-card h3{font-size:24px}
.kid .ring-pearl{border-width:3px}

/* Course tabs and FAQ chips */
.kid .ctab-labels label,.kid .fq-chips label{border:2.5px solid var(--navy);font-family:var(--display);font-size:16px;font-weight:500;box-shadow:var(--pop-sm);transition:transform .15s var(--bounce)}
.kid .ctab-labels label:hover,.kid .fq-chips label:hover{transform:translateY(-2px)}
.kid #ctab-picked:checked~.ctab-labels label[for=ctab-picked],.kid #ctab-new:checked~.ctab-labels label[for=ctab-new],
.kid #ctab-free:checked~.ctab-labels label[for=ctab-free],.kid #ctab-popular:checked~.ctab-labels label[for=ctab-popular],
.kid #fq-pay:checked~.fq-chips label[for=fq-pay],.kid #fq-refund:checked~.fq-chips label[for=fq-refund],.kid #fq-learn:checked~.fq-chips label[for=fq-learn],
.kid #fq-safe:checked~.fq-chips label[for=fq-safe],.kid #fq-acct:checked~.fq-chips label[for=fq-acct]{background:var(--cobalt);border-color:var(--navy);color:#fff}
.kid .faq details{border-radius:22px}
.kid .faq summary{font-family:var(--display);font-weight:500;font-size:18px}
.kid .faq summary::after{background:var(--sun);border:2px solid var(--navy)}
.kid .faq details p{color:var(--ink)}

/* Teachers, reviews, paying */
.kid .teachers-photo{background:var(--lilac);border:var(--line) solid var(--navy);box-shadow:var(--pop);padding:12px}
.kid .teachers-photo .photo img{border:var(--line) solid var(--navy);border-radius:20px}
.teach-pal{position:absolute;right:-22px;top:-38px;width:96px}
.teach-pal .critter{width:100%;height:auto}
.kid .avatar{border:2.5px solid var(--navy);font-family:var(--display)}
.kid .teacher:nth-child(3n+2) .avatar{background:var(--sun)}.kid .teacher:nth-child(3n) .avatar{background:var(--aqua)}
.kid .stars{color:#F5A400;-webkit-text-stroke:1px var(--navy)}
.kid .review blockquote{font-family:var(--display);font-weight:400;font-size:19px}
.kid .pay-steps .num{border:2.5px solid var(--navy);font-family:var(--display);width:46px;height:46px;font-size:22px}
.kid .pay-steps li:nth-child(2) .num{background:var(--blossom)}.kid .pay-steps li:nth-child(3) .num{background:var(--aqua)}
.kid .pay-steps p,.kid .sec-foot{color:var(--ink)}

@media (max-width:860px){
  .reef-hero .hero-grid{grid-template-columns:1fr;gap:28px}
  .reef{max-width:560px;width:100%;justify-self:center}
  .pearl-path{grid-template-columns:1fr;padding:14px 18px;gap:10px}
  .pearl-path::before{left:48px;right:auto;top:30px;bottom:30px;border-top:0;border-left:3px dashed var(--navy)}
  .pearl-path li{grid-template-rows:auto auto;grid-template-columns:76px 1fr;justify-items:start;text-align:left;align-items:center;column-gap:12px}
  .pearl-path li .pearl{grid-row:span 2;justify-self:center}
  .pearl-path b{align-self:end}.pearl-path span{align-self:start}
  .kid .how-grid{gap:48px}
}
@media (max-width:600px){
  .reef-hero{padding:28px 0 70px}
  .reef-hero .hero-sub{font-size:17px}
  .say{left:52%;top:30%}
  .kid .subject-card h3{font-size:21px}
  .sc-friend{font-size:13px}
  .sc-pal{width:84px}
  .kid .subject-card{min-height:200px}
  .kid .subject-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .teach-pal{right:-6px;width:76px}
}

/* ================= Demo tour: pick a role, then sign in with the accounts beside the form ================= */
.role-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.role-card{position:relative;display:flex;flex-direction:column;gap:12px;padding:28px 26px 26px;border:var(--line) solid var(--navy);border-radius:var(--r-tile);box-shadow:var(--pop);text-decoration:none;color:var(--navy);transition:transform .25s var(--bounce),box-shadow .25s var(--bounce)}
.role-card:hover{transform:translateY(-6px);box-shadow:var(--pop-lg);color:var(--navy)}
.role-card h2{margin:0;font-size:32px;color:var(--navy)}
.role-card p{margin:0;font-size:16px;line-height:1.5;flex:1}
.role-pal{width:110px;align-self:flex-start}
.role-pal .critter{width:100%;height:auto}
.role-count{align-self:flex-start;padding:4px 12px;border-radius:999px;background:var(--surface);border:2px solid var(--navy);font:500 14px var(--display)}
.role-card .btn{align-self:stretch;background:var(--surface)}
.demo-more{margin:0;font-size:17px}.demo-more a{font-weight:600}
.role-tabs{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.role-tabs a{padding:6px 16px;border-radius:999px;border:2.5px solid var(--navy);background:var(--surface);color:var(--navy);text-decoration:none;font:500 16px var(--display);box-shadow:var(--pop-sm)}
.role-tabs a.on{background:var(--sun)}
.role-tabs a:first-child{border-color:transparent;box-shadow:none;background:none;padding-left:0}
.signin-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;align-items:start}
.signin-card{position:sticky;top:20px;background:var(--surface);border:var(--line) solid var(--navy);border-radius:var(--r-tile);box-shadow:var(--pop);padding:28px;display:grid;gap:12px}
.signin-card h1{margin:0;font-size:clamp(28px,3vw,36px)}
.signin-card p{margin:0}
.signin-pal{width:84px;height:84px;border-radius:24px;border:var(--line) solid var(--navy);display:grid;place-items:center}
.signin-pal .critter{width:68px;height:68px}
.signin-form{display:grid;gap:8px;margin:6px 0}
.signin-form label{font:500 16px var(--display);color:var(--navy)}
.signin-form input{width:100%;padding:12px 14px;font-size:16px}
.signin-form .btn{margin-top:8px}
.signin-todo{border-top:2px dashed #CDEAF2;padding-top:12px}
.signin-todo h2{font-size:20px;margin:0 0 8px}
.signin-todo ul{margin:0;padding-left:18px;display:grid;gap:8px;font-size:15px;line-height:1.45}
.acct-list{display:grid;gap:16px}
.acct-row{display:grid;grid-template-columns:52px 1fr auto;gap:16px;align-items:start;background:var(--surface);border:var(--line) solid var(--navy);border-radius:var(--r-card);box-shadow:var(--pop);padding:18px 20px;transition:background-color .2s}
.acct-row.on{background:var(--tint-sun)}
.acct-row h3{margin:0 0 6px;font-size:20px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.acct-row .acct-avatar{border:2.5px solid var(--navy);font-family:var(--display)}
.acct-row .acct-status{border:2px solid var(--navy);font-size:11px}
.acct-creds{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin:0 0 8px;font-size:14px}
.acct-creds dt{font-weight:600;color:var(--muted)}
.acct-creds dd{margin:0;font-family:ui-monospace,Consolas,monospace;user-select:all;color:var(--navy)}
.acct-row p{margin:0;font-size:15px;color:var(--muted);line-height:1.45}
.acct-actions{display:grid;gap:8px}
.acct-actions form{margin:0}.acct-actions .btn{width:100%;white-space:nowrap}
@media (max-width:900px){
  .role-grid{grid-template-columns:1fr}
  .signin-split{grid-template-columns:1fr}
  .signin-card{position:static}
}
@media (max-width:600px){
  .acct-row{grid-template-columns:44px 1fr}
  .acct-actions{grid-column:1/-1;grid-template-columns:1fr 1fr}
}

/* Demo copy of the site (/demo/): a banner on every page with one-click role switching */
.demo-bar{background:var(--sun);border-bottom:2.5px solid var(--navy);font-size:14px;color:var(--navy)}
.demo-bar .wrap{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:space-between;align-items:center;min-height:38px;padding-top:4px;padding-bottom:4px}
.demo-bar-roles{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.demo-bar-roles a{padding:2px 12px;border-radius:999px;border:2px solid var(--navy);background:var(--surface);color:var(--navy);text-decoration:none;font:500 14px var(--display)}
.demo-bar-roles a:hover{background:var(--tint-sea)}
/* Live site: "Try the demo" says who to contact */
.demo-contact{max-width:640px;margin:32px auto 0;text-align:center;display:grid;justify-items:center;gap:16px}
.demo-contact h1{margin:0;font-size:clamp(32px,4.4vw,48px)}
.demo-contact .demo-sub{font-size:18px;line-height:1.6;color:var(--ink);margin:0}
.demo-contact-ways{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:8px 0}

/* ================= Signed-in students: Ternah-navy sidebar, reef accents =================
   Layout (sliding, sidebar width, focus mode) is shared with teachers in pearl.css; this is only the students' look. */
.student-app .app-top{background:var(--surface);border-bottom:var(--line) solid var(--navy)}
.student-app .app-toggle{border:2.5px solid var(--navy);background:var(--sun);color:var(--navy);box-shadow:var(--pop-sm);font:600 15px var(--display)}
.student-app .app-side{background:var(--navy);color:var(--nav-text);border-right:var(--line) solid var(--navy)}
.student-app .app-close{border:2.5px solid var(--nav-text);color:#fff}
.app-me{display:flex;align-items:center;gap:10px;padding:10px 12px;margin-bottom:14px;border-radius:18px;background:var(--navy-2);border:2.5px solid transparent;color:#fff;text-decoration:none}
.app-me:hover{border-color:var(--sun)}
.app-me .critter{width:40px;height:40px;flex:none}
.app-me b{display:block;font:600 16px/1.2 var(--display)}
.app-me small{color:var(--nav-text);font-size:13px}
.student-app .app-nav a,.student-app .app-signout{border:2.5px solid transparent;border-radius:16px;color:var(--nav-text);font:500 16px var(--display)}
.student-app .app-nav a:hover,.student-app .app-signout:hover{background:var(--navy-2);color:#fff}
.student-app .app-nav a.on{background:var(--sun);color:var(--navy);border-color:var(--sun)}
.student-app .app-nav hr{border:0;border-top:2px dashed rgba(255,255,255,.18);margin:8px 4px}
.student-app .app-count{background:var(--coral);color:var(--navy);border:2px solid var(--navy);font-family:var(--display)}
.tabs .app-count{position:absolute;top:0;right:18%;min-width:20px;height:20px;font-size:11px;margin:0}
.tabs label{margin:0}  /* not a form label: no form spacing */
.stat .label{display:block}