/* Pearl-educate home page, built to the UI specification (23 Oct 2026).
   Page order: hero with the pearl path, subject cards, how it works, courses, teachers we have checked, how paying works.
   Every colour comes from a token; colour blocks use their approved text colour from pearl.css (.t-*). */

.home{padding:0}
.home h2,.home h3{margin:0}
.home p{margin:0}
.sec{padding:var(--sp-16) 0}
.sec-title{font-size:clamp(28px,3.6vw,40px);line-height:1.1;letter-spacing:-.02em;font-weight:600;text-wrap:balance;margin-top:var(--sp-2)!important}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-6);flex-wrap:wrap;margin-bottom:var(--sp-8)}
.sec-foot{margin-top:var(--sp-6)!important;color:var(--muted);max-width:68ch}
.sec-foot a{font-weight:600}
.empty{background:var(--surface);border:1px dashed var(--border-2);border-radius:var(--r-card);padding:var(--sp-12);color:var(--muted);text-align:center}

/* ---- Hero: padding 56/64, columns 5fr/6fr, 48px gap ---- */
.hero{padding:56px 0 64px}
.hero-grid{display:grid;grid-template-columns:5fr 6fr;gap:var(--sp-12);align-items:center}
.hero-copy{min-width:0}
.hero h1{margin:20px 0 0;font-size:clamp(38px,5.4vw,64px);line-height:1.04;letter-spacing:-.025em;font-weight:600;text-wrap:balance}
.hero-sub{margin-top:20px!important;font-size:18px;line-height:1.6;color:var(--muted);max-width:46ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--sp-8)}
.hero-note{margin-top:20px!important;font-size:14px;color:var(--muted)}
.hero-note a{color:var(--navy);font-weight:600}
.hero-art{min-width:0}

/* Pearl path, desktop: diameters 44/60/76/88/112, 2.5px navy outline, labels below-right */
.pp{display:block;width:100%;height:auto;overflow:visible}
.pp-back{fill:var(--icon-bg)}
.pp-sun{fill:var(--sun)}.pp-lilac{fill:var(--lilac)}
.pp-ring{fill:none;stroke:var(--surface);stroke-width:6}
.pp-spark{fill:none;stroke:var(--muted);stroke-width:1.6;stroke-linejoin:round;opacity:.7}
.pp-string{fill:none;stroke:var(--navy);stroke-width:2.5;stroke-linecap:round}
.pp-pearl{fill:var(--surface);stroke:var(--navy);stroke-width:2.5}
.pp-pearl.goal{fill:var(--navy)}
.pp-gloss{fill:none;stroke:var(--border-2);stroke-width:2.5;stroke-linecap:round}
.pp-gloss.goal{stroke:var(--navy-2)}
.pp-eye{fill:var(--navy)}.pp-eye.goal{fill:var(--paper)}
.pp-smile{fill:none;stroke:var(--navy);stroke-width:2.4;stroke-linecap:round}.pp-smile.goal{stroke:var(--paper)}
.pp-chip{fill:var(--surface);stroke:var(--border-2);stroke-width:1}
.pp-chip.goal{fill:var(--navy);stroke:var(--navy)}
.pp-label{font:500 14px var(--font);fill:var(--navy)}
.pp-label.goal{fill:#fff}
/* Motion: each pearl fades and scales from .9 to 1 over 300ms, 80ms apart. No looping. */
@media (prefers-reduced-motion:no-preference){
  .pp-step{animation:pp-in .3s var(--ease) both;animation-delay:calc(var(--i) * 80ms + 100ms);transform-box:fill-box;transform-origin:center}
  @keyframes pp-in{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
}

/* Pearl path, phone: runs down the screen with 17px labels and a one-line description each */
.pp-v{display:none;list-style:none;margin:0;padding:0;position:relative}
.pp-v::before{content:"";position:absolute;left:35px;top:24px;bottom:36px;border-left:2.5px solid var(--navy)}
.pp-v li{position:relative;display:grid;grid-template-columns:72px 1fr;align-items:center;gap:var(--sp-4);padding:6px 0}
.pp-v li .pearl{justify-self:center;position:relative;z-index:1}
.pp-v .pearl-body{fill:var(--surface)}
.pp-v b{display:block;font-size:17px;font-weight:600;color:var(--navy)}
.pp-v span{display:block;font-size:15px;color:var(--muted);line-height:1.4}

/* Phone: the two photos sit as circles above the vertical path */
.hero-faces{display:none;align-items:flex-end;gap:12px;margin-bottom:var(--sp-6)}
.hero-faces .photo img{display:block;border-radius:50%;object-fit:cover;border:5px solid var(--surface)}
.hero-faces .face-big img{width:150px;height:150px;box-shadow:10px 10px 0 var(--sun)}
.hero-faces .face-small img{width:104px;height:104px;box-shadow:8px 8px 0 var(--lilac)}

/* ---- Teachers: photo tile on a flat colour block, then the teacher cards ---- */
.teachers-split{display:grid;grid-template-columns:5fr 7fr;gap:var(--sp-12);align-items:center}
.teachers-photo{position:relative;border-radius:var(--r-tile);background:var(--lilac);padding:0 0 14px 14px}
.teachers-photo .photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-tile)}
.teachers-photo .sticker{right:-10px;top:-14px;transform:rotate(7deg)}
.teachers-split .teacher-grid{margin-top:var(--sp-6)}

/* ---- What brings you here today? (audience goals, like Coursera's) ---- */
.goal-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-4);margin-top:var(--sp-8)}
.goal{display:flex;flex-direction:column;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:22px;color:var(--ink);text-decoration:none;transition:border-color .15s var(--ease),transform .15s var(--ease)}
.goal:hover{border-color:var(--navy);transform:translateY(-2px);color:var(--ink)}
.goal h3{font-size:19px;line-height:1.2}
.goal p{font-size:15px;color:var(--muted);line-height:1.5}
.goal .soon{vertical-align:middle;margin-left:4px}
.chip-ic{width:44px;height:44px;border-radius:50%;background:var(--icon-bg);color:var(--navy);display:grid;place-items:center}
.chip-ic .icon{width:22px;height:22px}
.goal-go{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--navy)}
.goal-go .icon{width:16px;height:16px}
/* The grown-ups card previews Upskilling's own look: Ternah navy on off-white */
.goal-grown{background:var(--navy);border-color:var(--navy);color:#fff}
.goal-grown:hover{color:#fff;border-color:var(--navy-2)}
.goal-grown p{color:var(--nav-text)}.goal-grown .goal-go{color:#fff}
.goal-grown .chip-ic{background:var(--navy-2);color:#fff}

/* ---- Course tabs (CSS only, so they work without JavaScript) ---- */
.ctab-radio{position:absolute;opacity:0;pointer-events:none}
.ctab-labels{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--sp-6)}
.ctab-labels label{cursor:pointer;min-height:40px;display:inline-flex;align-items:center;padding:6px 16px;border-radius:var(--r-chip);border:1px solid var(--border-2);background:var(--surface);font-size:14px;font-weight:600;color:var(--navy)}
.ctab-panel{display:none}
#ctab-picked:checked~.panel-picked,#ctab-new:checked~.panel-new,#ctab-free:checked~.panel-free,#ctab-popular:checked~.panel-popular{display:block}
#ctab-picked:checked~.ctab-labels label[for=ctab-picked],#ctab-new:checked~.ctab-labels label[for=ctab-new],
#ctab-free:checked~.ctab-labels label[for=ctab-free],#ctab-popular:checked~.ctab-labels label[for=ctab-popular]{background:var(--navy);border-color:var(--navy);color:#fff}
.ctab-radio:focus-visible~.ctab-labels{outline:3px solid rgba(59,110,224,.45);outline-offset:4px;border-radius:var(--r-chip)}

/* ---- What learners say (real ratings only) ---- */
.review-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--sp-4);margin-top:var(--sp-8)}
.review{margin:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:24px;display:grid;gap:12px;align-content:start}
.stars{color:var(--navy);font-size:18px;letter-spacing:2px}.stars .off{color:var(--border-2)}
.review blockquote{margin:0;font-size:17px;line-height:1.5}
.review figcaption{font-size:14px;color:var(--muted)}

/* ---- FAQ ---- */
.faq-wrap{display:grid;grid-template-columns:4fr 8fr;gap:var(--sp-12);align-items:start}
.faq{display:grid;gap:10px}
.faq details{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:0 22px}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:60px;font-size:17px;font-weight:600;color:var(--navy)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:30px;height:30px;border-radius:50%;background:var(--icon-bg);display:grid;place-items:center;font-size:20px;font-weight:500;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq details p{padding:0 0 20px;color:var(--muted);font-size:16px;line-height:1.6;max-width:68ch}
.faq details a{font-weight:600}

/* ---- Subject cards: radius 24, padding 22, min-height 260, title 24/600 ---- */
.subject-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-6);margin-top:var(--sp-8)}
.subject-card{position:relative;overflow:hidden;min-height:260px;border-radius:var(--r-tile);padding:22px;display:flex;flex-direction:column;gap:10px;text-decoration:none;transition:transform .15s var(--ease)}
.subject-card:hover{transform:translateY(-3px)}
.subject-card.t-cobalt:hover{color:#fff}.subject-card:not(.t-cobalt):hover{color:var(--navy)}
.subject-card h3{font-size:24px;line-height:1.1;font-weight:600;padding-right:44px;text-wrap:balance}
.subject-card p{font-size:15px;line-height:1.45;max-width:24ch;position:relative;z-index:1}
.sc-count{align-self:flex-start;margin-top:4px;padding:5px 12px;border-radius:var(--r-chip);background:var(--surface);color:var(--navy);font-size:12px;font-weight:600;position:relative;z-index:1}
.sc-arrow{position:absolute;right:16px;top:16px;width:36px;height:36px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center}
.sc-arrow .icon{width:18px;height:18px}
.sc-art{position:absolute;right:-18px;bottom:-22px;opacity:.22}
.sc-art .icon{width:150px;height:150px;stroke-width:1.4}
.subject-card .sticker{position:relative;margin-top:auto;transform:rotate(-6deg)}
.subject-card:nth-child(even) .sticker{transform:rotate(7deg)}

/* ---- How it works strip ---- */
.how-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-6);margin-top:var(--sp-8)}
.how{border-radius:var(--r-tile);padding:28px;display:grid;gap:10px;align-content:start}
.how .label{color:inherit;opacity:.85}
.how h3{font-size:22px;line-height:1.15}
.how p{font-size:16px;line-height:1.55;max-width:34ch}
.how-steps{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px!important}
.step-pill{padding:5px 12px;border-radius:var(--r-chip);background:var(--surface);color:var(--navy);font-size:13px;font-weight:600}
.step-pill.goal{background:var(--navy);color:#fff}

/* ---- Teachers we have checked ---- */
.teacher-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--sp-4);margin-top:var(--sp-8)}
.teacher{display:flex;gap:var(--sp-4);align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:18px 20px}
.avatar{width:52px;height:52px;flex:none;border-radius:50%;background:var(--lilac);color:var(--navy);display:grid;place-items:center;font-size:20px;font-weight:700}
.teacher b{display:block;font-size:17px}
.teacher div span{display:block;font-size:14px;color:var(--muted)}
.teacher .verified{display:inline-flex;margin-top:4px;font-size:13px;color:var(--meadow-ink)}

/* ---- How paying works ---- */
.pay-steps{list-style:none;margin:var(--sp-8) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-6)}
.pay-steps li{display:flex;gap:var(--sp-4);align-items:flex-start;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:24px}
.pay-steps .num{width:40px;height:40px;flex:none;border-radius:50%;background:var(--sun);color:var(--navy);display:grid;place-items:center;font-size:18px;font-weight:700;font-variant-numeric:tabular-nums}
.pay-steps h3{font-size:19px;line-height:1.2;margin-bottom:6px}
.pay-steps p{font-size:15px;color:var(--muted);line-height:1.5}

/* ---- Responsive: breakpoints 600 / 860 / 1200, mobile first rules where they diverge ---- */
@media (max-width:1200px){.subject-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-4)}}
@media (max-width:1024px){.goal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){
  .faq-wrap{grid-template-columns:1fr;gap:var(--sp-6)}
  .hero-grid{grid-template-columns:1fr;gap:var(--sp-8)}
  .teachers-split{grid-template-columns:1fr;gap:var(--sp-8)}
  .teachers-photo{max-width:520px}
  .hero-art{max-width:560px}
  .subject-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .how-grid,.pay-steps{grid-template-columns:1fr}
  .sec{padding:var(--sp-12) 0}
}
@media (max-width:600px){
  .hero{padding:32px 0 40px}
  .hero-actions .btn{flex:1 1 100%}
  .pp{display:none}
  .pp-v{display:block}
  .hero-faces{display:flex}
  .subject-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .goal-grid{grid-template-columns:1fr}
  .subject-card{min-height:190px;padding:16px}
  .subject-card h3{font-size:18px;padding-right:34px}
  .subject-card p{display:none}
  .sc-arrow{width:32px;height:32px;right:12px;top:12px}
  .subject-card .sticker{width:44px;height:44px}
  .sc-art .icon{width:110px;height:110px}
  .sec{padding:40px 0}
}

/* Cartoon mascot in the hero (partials/pearl_scholar.html): a pearl in a graduation cap on an open book */
.ps-bg{fill:var(--cobalt)}
.ps-spark{fill:var(--surface);opacity:.9}
.ps-cover{fill:var(--sun);stroke:var(--navy);stroke-width:2;stroke-linejoin:round}
.ps-page{fill:var(--surface);stroke:var(--navy);stroke-width:2;stroke-linejoin:round}
.ps-line{fill:none;stroke:var(--border-2);stroke-width:1.6;stroke-linecap:round}
.ps-pearl{fill:var(--surface);stroke:var(--navy);stroke-width:2.5}
.ps-gloss{fill:none;stroke:var(--border-2);stroke-width:2.5;stroke-linecap:round}
.ps-cheek{fill:var(--blossom);opacity:.7}
.ps-eye{fill:var(--navy)}
.ps-smile{fill:none;stroke:var(--navy);stroke-width:2.2;stroke-linecap:round}
.ps-cap{fill:var(--navy);stroke:var(--navy);stroke-width:1.5;stroke-linejoin:round}
.ps-tassel{fill:none;stroke:var(--sun);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.ps-tassel-end{fill:var(--sun)}
.hero-faces svg.face-small{border-radius:50%;border:5px solid var(--surface);box-shadow:8px 8px 0 var(--lilac);box-sizing:content-box}

/* ---- Make your first pearl: an interactive practice question (wrong answers get a hint pearl, never a red cross) ---- */
.try-grid{display:grid;grid-template-columns:7fr 5fr;gap:var(--sp-6);margin-top:var(--sp-8);align-items:stretch}
.try-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-tile);padding:32px;display:grid;gap:var(--sp-6);align-content:start}
.try-tag{display:inline-block;justify-self:start;padding:5px 12px;border-radius:var(--r-chip);background:var(--icon-bg);color:var(--navy);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.try-q{margin:0;font-size:clamp(22px,2.6vw,28px);font-weight:600;line-height:1.25;letter-spacing:-.01em;text-wrap:balance}
.try-options{display:flex;flex-wrap:wrap;gap:12px}
.try-opt{min-width:88px;min-height:64px;padding:0 24px;border-radius:var(--r-card);border:2px solid var(--border-2);background:var(--paper);color:var(--navy);font:700 26px var(--font);cursor:pointer;transition:transform .15s var(--ease),border-color .15s var(--ease),background-color .15s var(--ease)}
.try-opt:hover:not(:disabled){border-color:var(--navy);transform:translateY(-2px)}
.try-opt.try-again{background:var(--icon-bg);border-color:var(--border-2);color:var(--muted)}
.try-opt.right{background:var(--sun);border-color:var(--navy)}
.try-opt:disabled{cursor:default}
.try-feedback>div{display:flex;gap:14px;align-items:center;padding:14px 18px;border-radius:var(--r-card)}
.try-feedback>div[hidden]{display:none}
.try-hint{background:var(--icon-bg)}
.try-yes{background:var(--sun)}
.try-feedback p{margin:0;font-size:16px;line-height:1.5}
.ring-card{background:var(--lilac);color:var(--navy);border-radius:var(--r-tile);padding:32px;display:grid;gap:var(--sp-4);align-content:start}
.ring-card .try-tag{background:var(--surface)}
.ring-card h3{font-size:22px;line-height:1.2}
.ring-days{list-style:none;margin:0;padding:0;display:grid;gap:10px;position:relative}
.ring-days::before{content:"";position:absolute;left:13px;top:14px;bottom:14px;border-left:2.5px solid var(--navy)}
.ring-days li{display:grid;grid-template-columns:28px 70px 1fr;align-items:center;gap:10px;position:relative}
.ring-pearl{width:28px;height:28px;border-radius:50%;background:var(--surface);border:2.5px solid var(--navy);transition:transform .2s var(--ease)}
.ring-pearl.last{background:var(--navy)}
.ring-days li:hover .ring-pearl{transform:scale(1.15)}
.ring-days b{font-size:16px;font-variant-numeric:tabular-nums}
.ring-days span:last-child{font-size:15px}
.ring-note{margin:0;font-size:15px;line-height:1.5}

/* ---- FAQ grouped by topic (CSS-only chips) ---- */
.faq-side{display:grid;gap:var(--sp-4);position:sticky;top:24px}
.faq-lead{color:var(--muted);font-size:16px;line-height:1.6}
.fq-radio{position:absolute;opacity:0;pointer-events:none}
.fq-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--sp-4)}
.fq-chips label{cursor:pointer;min-height:40px;display:inline-flex;align-items:center;padding:6px 16px;border-radius:var(--r-chip);border:1px solid var(--border-2);background:var(--surface);font-size:14px;font-weight:600;color:var(--navy)}
.fq-group{display:none;gap:10px}
#fq-pay:checked~.g-pay,#fq-refund:checked~.g-refund,#fq-learn:checked~.g-learn,#fq-safe:checked~.g-safe,#fq-acct:checked~.g-acct{display:grid}
#fq-pay:checked~.fq-chips label[for=fq-pay],#fq-refund:checked~.fq-chips label[for=fq-refund],#fq-learn:checked~.fq-chips label[for=fq-learn],
#fq-safe:checked~.fq-chips label[for=fq-safe],#fq-acct:checked~.fq-chips label[for=fq-acct]{background:var(--navy);border-color:var(--navy);color:#fff}
.fq-radio:focus-visible~.fq-chips{outline:3px solid rgba(59,110,224,.45);outline-offset:4px;border-radius:var(--r-chip)}

@media (max-width:860px){
  .try-grid{grid-template-columns:1fr}
  .faq-side{position:static}
}
@media (max-width:600px){
  .try-card,.ring-card{padding:22px}
  .try-opt{flex:1 1 0;min-width:0}
}