/* Baukasten: shared styles for the Teloriva homepage and audience pages (design prototype).
   One rule: filled shapes + colour = a kind of learning card (six families). Ink outline containers = people and places.
   Deliberately single-theme (light). Fonts are self-hosted (fonts_baukasten.css). Ported from docs/design/homepage-redesign/site; docs/landing-page.md. */
:root{
  --paper:#F3EEE3; --paper-2:#EAE3D4; --card:#FBF8F1; --ink:#1B1B1F; --soft:#57544E; --line:#D9D1C1;
  --brick:#C23B26; --ochre:#E2A63B; --cobalt:#2D4FA1; --sage:#5E8C6B;
  --plum:#7B4A93; --brick-ink:#FFF4EE; --ochre-ink:#2A1E05; --cobalt-ink:#F1F4FF; --sage-ink:#F1F8F2; --plum-ink:#F7F0FA;
  --f-d:"Funnel Display",ui-sans-serif,system-ui,sans-serif; --f-b:Lexend,ui-sans-serif,system-ui,sans-serif; --f-m:"JetBrains Mono",ui-monospace,monospace;
  --r:18px; color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1rem/1.6 var(--f-b);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--f-d);margin:0;letter-spacing:-.03em;line-height:1;text-wrap:balance;font-weight:800}
p{margin:0;text-wrap:pretty}
a{color:inherit}
:focus-visible{outline:3px solid var(--cobalt);outline-offset:3px;border-radius:6px}
.wrap{max-width:1200px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
.mono{font-family:var(--f-m);font-weight:500;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:16px;top:-60px;background:var(--ink);color:var(--paper);padding:.6rem 1rem;border-radius:8px;z-index:50}
.skip:focus{top:12px}

/* THE LEARNING ALPHABET: filled shapes + colour mean a kind of card, and nothing else.
   explain = square/brick · organise = triangle/sage · check = arch/ochre · maths & science = circle/cobalt
   language & subjects = diamond/plum · play & do = bowl/ink.
   PEOPLE & PLACES are never filled and never coloured: ink outline containers (.ctr). */
.shp{display:inline-block;flex:none;width:var(--s,1.2rem);height:var(--s,1.2rem)}
.f-ex{background:var(--brick);border-radius:3px;color:var(--brick-ink)}
.f-or{background:var(--sage);clip-path:polygon(50% 0,100% 100%,0 100%);color:var(--sage-ink)}
.f-ck{background:var(--ochre);border-radius:999px 999px 3px 3px;color:var(--ochre-ink)}
.f-ms{background:var(--cobalt);border-radius:50%;color:var(--cobalt-ink)}
.f-la{background:var(--plum);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);color:var(--plum-ink)}
.f-pl{background:var(--ink);border-radius:3px 3px 999px 999px;color:var(--paper)}
.ctr{display:inline-block;flex:none;width:var(--s,1.4rem);height:var(--s,1.4rem);color:var(--ink)}
.ctr svg{display:block;width:100%;height:100%;overflow:visible}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid transparent;transition:border-color .2s}
.nav.stuck{border-bottom-color:var(--line)}
.nav .wrap{display:flex;align-items:center;gap:1.4rem;min-height:4.2rem}
.logo{display:inline-flex;align-items:center;gap:.5rem;font:800 1.4rem var(--f-d);letter-spacing:-.03em;text-decoration:none}
.logo .shp{--s:1rem;border-radius:999px 999px 2px 2px;background:var(--brick)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.55rem;font:600 .98rem var(--f-b);padding:.85rem 1.3rem;border-radius:999px;border:0;cursor:pointer;text-decoration:none;background:var(--ink);color:var(--paper);min-height:48px;white-space:nowrap}
.btn:hover{background:#000}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.btn.sm{padding:.55rem 1rem;min-height:40px;font-size:.9rem}
.btn .arr{transition:transform .2s}
.btn:hover .arr{transform:translateX(3px)}

/* hero */
.hero{padding-block:clamp(2.5rem,6vw,5rem) 2rem}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(1.6rem,4vw,3.4rem);align-items:center}
.hero h1{font-size:clamp(2.7rem,6.4vw,5.4rem);letter-spacing:-.045em;line-height:.93}
.hero h1 span{color:var(--cobalt)}
.hero .sub{font-size:clamp(1.05rem,1.6vw,1.2rem);line-height:1.6;color:#33322F;max-width:42ch;margin-top:1.3rem}
.topic{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:1.5rem;align-items:center}
.topic .mono{margin-right:.3rem}
.topic button{font:500 .9rem var(--f-b);padding:.5rem .9rem;border-radius:999px;border:1.5px solid var(--ink);background:transparent;cursor:pointer;color:var(--ink);min-height:40px}
.topic button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.cta-row{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.4rem}
.fine{margin-top:1.1rem;font-size:.84rem;color:var(--soft);display:flex;flex-wrap:wrap;gap:.3rem 1rem}
.fine span{display:inline-flex;align-items:center;gap:.4rem}
.fine span::before{content:"";width:.45rem;height:.45rem;background:var(--sage);border-radius:50%}

.yard{position:relative;aspect-ratio:1/.86;background:var(--paper-2);border-radius:28px;overflow:hidden}
.yard::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#D4CBB8 1.2px,transparent 1.2px);background-size:22px 22px;opacity:.7}
.blk{position:absolute;display:grid;place-items:center;text-align:center;font:600 .8rem var(--f-b);padding:.4rem;transition:left .9s cubic-bezier(.34,1.3,.5,1),top .9s cubic-bezier(.34,1.3,.5,1),width .9s,height .9s,transform .9s cubic-bezier(.34,1.3,.5,1),border-radius .6s;box-shadow:0 10px 18px -12px rgb(40 30 10/.5)}
.blk.f-ex{border-radius:8px} .blk.f-ms{border-radius:50%} .blk.f-ck{border-radius:999px 999px 8px 8px} .blk.f-pl{border-radius:8px 8px 999px 999px}
.blk.f-or{padding-top:1.6rem;box-shadow:none} .blk.f-la{box-shadow:none}
.blk small{display:block;font:500 .64rem var(--f-m);letter-spacing:.06em;opacity:.8;margin-top:.15rem}
.yard-top{position:absolute;left:5%;right:5%;top:4.5%;display:flex;justify-content:space-between;align-items:center;opacity:0;transition:opacity .4s .7s;z-index:2}
.yard.built .yard-top{opacity:1}
.yard-top .mono{color:var(--ink)}
.yard .play{position:absolute;right:5%;bottom:5%;opacity:0;transition:opacity .4s .9s;z-index:2}
.yard.built .play{opacity:1}
.yard .hint{position:absolute;left:5%;bottom:6%;font:500 .82rem var(--f-b);color:var(--soft);z-index:2;text-decoration:underline;text-underline-offset:.25em}
.yard .build{position:absolute;left:5%;bottom:5%;z-index:3}
.yard.built .build{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.yard.built .build:hover{background:var(--ink);color:var(--paper)}

/* pilot doors */
.doors{padding-block:1rem 3.5rem}
.doors-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.doors-head h2{font-size:clamp(1.4rem,2.6vw,1.9rem);letter-spacing:-.02em}
.door-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.9rem}
.door{position:relative;display:grid;grid-template-rows:auto 1fr auto;gap:.8rem;padding:1.2rem;border-radius:var(--r);background:var(--card);text-decoration:none;min-height:13rem;transition:transform .25s cubic-bezier(.3,1.4,.5,1),background .2s;overflow:hidden;border:1.5px solid transparent}
.door:hover{transform:translateY(-4px)}
.door .ctr{--s:4.4rem}
.door b{font:800 1.3rem/1.05 var(--f-d);letter-spacing:-.025em}
.door p{font-size:.88rem;color:var(--soft);line-height:1.45}
.door .go{font:600 .9rem var(--f-b);display:flex;align-items:center;gap:.4rem}
.door:hover{border-color:var(--ink)}

/* chapters */
.ch{padding-block:clamp(4rem,9vw,7rem);border-top:1px solid var(--line)}
.ch-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem;align-items:end;margin-bottom:clamp(2rem,4vw,3rem)}
.ch-head h2{font-size:clamp(2.2rem,5vw,4rem);letter-spacing:-.04em;line-height:.95}
.ch-head p{font-size:1.06rem;color:#33322F;max-width:46ch}
.ch-head .mono{display:block;margin-bottom:1rem}

/* families (inventory) */
.fam{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(1.4rem,3vw,3rem);align-items:start}
.fam-board{display:grid;grid-template-columns:repeat(18,minmax(0,1fr));gap:4px;padding:1.2rem;background:var(--card);border-radius:24px}
.fam-board i{aspect-ratio:1;display:block;transition:opacity .25s,transform .25s}
.fam-board.dim i{opacity:.15}
.fam-board.dim i.on{opacity:1;transform:scale(1.08)}
.fam-list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.fam-list button{all:unset;cursor:pointer;display:grid;grid-template-columns:2rem minmax(0,1fr) auto;gap:.8rem;align-items:center;width:100%;padding:.75rem .9rem;border-radius:14px;box-sizing:border-box}
.fam-list button:hover,.fam-list button[aria-pressed="true"]{background:var(--card)}
.fam-list button:focus-visible{outline:3px solid var(--cobalt);outline-offset:0}
.fam-list b{font:700 1.05rem var(--f-d);letter-spacing:-.01em;display:block}
.fam-list small{font-size:.82rem;color:var(--soft);display:block;line-height:1.35}
.fam-list em{font:600 1.3rem var(--f-d);font-style:normal;font-variant-numeric:tabular-nums}
.fam-total{margin-top:1rem;display:flex;align-items:baseline;gap:.6rem}
.fam-total b{font:800 3.4rem/1 var(--f-d);letter-spacing:-.04em;font-variant-numeric:tabular-nums}

/* life of a lesson: three panels */
.life{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.lp{background:var(--card);border-radius:24px;padding:1.4rem;display:grid;gap:1rem;align-content:start;min-width:0}
.lp .art{aspect-ratio:4/3;border-radius:16px;background:var(--paper-2);position:relative;overflow:hidden;display:grid;place-items:center}
.lp h3{font-size:1.6rem;letter-spacing:-.03em}
.lp p{color:#33322F;font-size:.95rem}
.lp .mono{color:var(--soft)}
/* teach art */
.proj{width:82%;aspect-ratio:16/10;background:#FFFDF7;border:3px solid var(--ink);border-radius:6px;position:relative;display:flex;flex-direction:column;justify-content:center;padding:.8rem;gap:.4rem}
.proj b{font:800 1.05rem var(--f-d);letter-spacing:-.02em}
.proj .row{display:flex;gap:.3rem}
.proj .row{align-items:center;gap:.4rem}
.proj .row .shp{--s:1.15rem}
.proj.held::after{content:"You have the class";position:absolute;inset:0;background:rgb(27 27 31/.9);color:var(--paper);display:grid;place-items:center;font:700 1rem var(--f-d);border-radius:3px}
.console{display:flex;gap:.4rem;flex-wrap:wrap}
.console button{font:600 .82rem var(--f-b);padding:.5rem .8rem;border-radius:999px;border:1.5px solid var(--ink);background:transparent;cursor:pointer;min-height:38px;color:var(--ink)}
.console button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
/* continue art: path */
.path svg{width:88%;height:auto}
/* see art: bars */
.bars{display:flex;align-items:flex-end;gap:.6rem;height:7.5rem}
.bars span{width:2.2rem;border-radius:999px 999px 4px 4px;display:block;transition:height .8s cubic-bezier(.34,1.3,.5,1)}
.legend{display:flex;gap:.8rem;flex-wrap:wrap;font-size:.8rem;color:var(--soft)}
.legend span{display:inline-flex;align-items:center;gap:.35rem}
.legend i{width:.7rem;height:.7rem;border-radius:3px;display:inline-block}

/* trust */
.trust{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:1.2rem;align-items:start}
.panel{background:var(--card);border-radius:24px;overflow:hidden}
.panel-hd{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.3rem;background:var(--ink);color:var(--paper)}
.panel-hd b{font:700 .78rem var(--f-m);letter-spacing:.12em;text-transform:uppercase}
.panel-hd span{font:500 .78rem var(--f-m);color:#BDB6A6}
.panel-hd button{all:unset;cursor:pointer;font:600 .78rem var(--f-m);letter-spacing:.06em;color:var(--paper);text-decoration:underline;text-underline-offset:.25em}
.panel-hd button:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
.set{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.3rem 1rem;align-items:center;padding:1rem 1.3rem;border-top:1px solid var(--line)}
.set:first-of-type{border-top:0}
.set label{font:700 1rem var(--f-d);letter-spacing:-.01em;cursor:pointer}
.set .why{grid-column:1/-1;font-size:.88rem;color:var(--soft);line-height:1.45;min-height:2.6em}
.set .def{font:500 .68rem var(--f-m);letter-spacing:.08em;text-transform:uppercase;color:var(--soft);margin-left:.5rem;white-space:nowrap}
.sw{position:relative;width:3.2rem;height:1.8rem;border-radius:999px;border:2px solid var(--ink);background:var(--paper);cursor:pointer;padding:0;flex:none;transition:background .2s}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:1.2rem;height:1.2rem;border-radius:50%;background:var(--ink);transition:transform .25s cubic-bezier(.3,1.4,.5,1),background .2s}
.sw[aria-checked="true"]{background:var(--ink)}
.sw[aria-checked="true"]::after{transform:translateX(1.4rem);background:var(--paper)}
.sw:focus-visible{outline:3px solid var(--cobalt);outline-offset:3px}
.always{display:grid;gap:.7rem}
.always-hd{font:700 .78rem var(--f-m);letter-spacing:.12em;text-transform:uppercase;padding:0 .2rem .2rem;display:flex;align-items:center;gap:.5rem}
.always-hd .lock{width:.95rem;height:.95rem}
.fact{display:grid;grid-template-columns:2.4rem minmax(0,1fr);gap:.8rem;align-items:start;background:var(--card);border-radius:18px;padding:1rem 1.1rem}
.fact b{font:700 1.02rem var(--f-d);display:block;letter-spacing:-.01em}
.fact span{font-size:.88rem;color:var(--soft);line-height:1.45}
.fact .ic{width:2rem;height:2rem;color:var(--ink)}
.fact .ic svg{width:100%;height:100%;display:block}
.summary{background:var(--paper-2);border-radius:18px;padding:1rem 1.1rem;font-size:.92rem;line-height:1.5}
.summary b{font-family:var(--f-d)}

/* pilots */
.pilots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.pilot{background:var(--card);border-radius:24px;padding:1.4rem;display:flex;flex-direction:column;gap:1rem;position:relative;overflow:hidden;min-width:0}
.pilot .top{display:flex;justify-content:space-between;align-items:flex-start}
.pilot .ctr{--s:4.6rem}
.pilot .len{font:600 .74rem var(--f-m);letter-spacing:.08em;text-transform:uppercase;padding:.3rem .55rem;border-radius:6px;background:var(--paper-2)}
.pilot h3{font-size:1.55rem;letter-spacing:-.03em}
.pilot .who{font-size:.88rem;color:var(--soft);margin-top:-.4rem}
.pilot h4{font:700 .74rem var(--f-m);letter-spacing:.12em;text-transform:uppercase;color:var(--soft);margin-bottom:.4rem}
.pilot ul{margin:0;padding-left:1.05rem;display:grid;gap:.35rem;font-size:.9rem}
.pilot li::marker{color:var(--ink)}
.pilot .btn{margin-top:auto;justify-content:center}

/* apply */
.apply{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(1.4rem,3vw,3rem);align-items:start}
.apply-intro h2{font-size:clamp(2.2rem,5vw,3.8rem);letter-spacing:-.04em;line-height:.95}
.apply-intro p{margin-top:1rem;color:#33322F;max-width:42ch}
.steps{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:.8rem;counter-reset:s}
.steps li{display:grid;grid-template-columns:2.2rem minmax(0,1fr);gap:.7rem;counter-increment:s;font-size:.95rem}
.steps li::before{content:counter(s);width:2.2rem;height:2.2rem;border-radius:50%;border:2px solid var(--ink);display:grid;place-items:center;font:700 .9rem var(--f-d)}
form.card{background:var(--card);border-radius:28px;padding:clamp(1.2rem,3vw,2rem);display:grid;gap:1.1rem}
.roles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.5rem}
.roles button{all:unset;cursor:pointer;display:grid;justify-items:center;gap:.45rem;padding:.8rem .4rem;border-radius:14px;border:1.5px solid var(--line);text-align:center;font:600 .82rem/1.2 var(--f-b);box-sizing:border-box}
.roles button .ctr{--s:2.4rem}
.roles button[aria-checked="true"]{border-color:var(--ink);background:var(--paper)}
.roles button:focus-visible{outline:3px solid var(--cobalt);outline-offset:2px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.fld{display:grid;gap:.35rem;min-width:0}
.fld.full{grid-column:1/-1}
.fld label{font:600 .84rem var(--f-b)}
.fld input,.fld select,.fld textarea{font:400 .95rem var(--f-b);padding:.7rem .85rem;border-radius:12px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);min-height:46px;width:100%}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--cobalt);box-shadow:0 0 0 3px rgb(45 79 161/.18)}
.fld[hidden]{display:none!important}
.consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.84rem;color:var(--soft)}
.consent input{width:1.15rem;height:1.15rem;margin-top:.15rem;accent-color:var(--ink)}
.form-foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.form-foot small{color:var(--soft);font-size:.8rem}
.done{display:none;gap:.8rem;text-align:center;justify-items:center;padding:2rem 1rem}
.done .ctr{--s:4rem}
form.card.sent > :not(.done){display:none}
form.card.sent .done{display:grid}

/* faq */
.faq{display:grid;gap:.6rem;max-width:860px}
.faq details{background:var(--card);border-radius:18px;padding:0 1.2rem}
.faq summary{cursor:pointer;list-style:none;padding:1.1rem 0;font:700 1.08rem var(--f-d);letter-spacing:-.01em;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 1.5rem/1 var(--f-b);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding-bottom:1.1rem;color:#33322F;font-size:.95rem;max-width:70ch}

/* footer */
footer{background:var(--ink);color:#CFC8B8;padding-block:3.5rem 2rem;margin-top:2rem}
footer .grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:2rem}
footer h4{font:700 .76rem var(--f-m);letter-spacing:.12em;text-transform:uppercase;color:var(--paper);margin-bottom:.8rem}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem;font-size:.9rem}
footer a{text-decoration:none} footer a:hover{text-decoration:underline}
footer .logo{color:var(--paper)}
footer .base{margin-top:2.5rem;padding-top:1.2rem;border-top:1px solid #34343A;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.82rem}
footer .tagline{margin-top:.8rem;max-width:30ch;font-size:.92rem}
.foot-shapes{display:flex;gap:.45rem;margin-top:1rem;align-items:center}
.foot-shapes .f-pl{background:var(--paper)}

/* responsive */
@media (max-width:1020px){
    .hero .wrap,.fam,.trust,.apply,.ch-head{grid-template-columns:1fr}
  .door-grid,.pilots{grid-template-columns:1fr 1fr}
  .life{grid-template-columns:1fr}
  footer .grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .door-grid,.pilots{grid-template-columns:1fr}
  .door{min-height:auto;grid-template-columns:auto 1fr;grid-template-rows:auto auto;align-items:center}
  .door p{grid-column:1/-1}.door .go{grid-column:1/-1}
  .roles{grid-template-columns:1fr 1fr}
  .fields{grid-template-columns:1fr}
  .blk{font-size:.6rem;padding:.2rem}.blk small{display:none}
  .fam-board{grid-template-columns:repeat(13,minmax(0,1fr));padding:.8rem}
  .set{padding:.9rem 1rem}
  .nav .btn{padding:.5rem .8rem;font-size:.85rem}
  footer .grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}html{scroll-behavior:auto}}


/* ---------- audience pages ---------- */
.page-hero{padding-block:clamp(2.5rem,6vw,5rem) clamp(2rem,5vw,3.5rem)}
.page-hero .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(1.6rem,4vw,3.4rem);align-items:center}
.page-hero h1{font-size:clamp(2.5rem,5.8vw,4.8rem);letter-spacing:-.045em;line-height:.95}
.page-hero h1 span{color:var(--cobalt)}
.page-hero .sub{font-size:clamp(1.05rem,1.6vw,1.2rem);line-height:1.6;color:#33322F;max-width:46ch;margin-top:1.3rem}
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1.3rem;font:600 .8rem var(--f-m);letter-spacing:.12em;text-transform:uppercase}
.eyebrow .ctr{--s:1.7rem}
.hero-art{position:relative;background:var(--paper-2);border-radius:28px;aspect-ratio:1/.92;display:grid;place-items:center;overflow:hidden}
.hero-art::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#D4CBB8 1.2px,transparent 1.2px);background-size:22px 22px;opacity:.7}
.hero-art .ctr{position:relative;--s:min(64%,320px)}
.hero-art .cap{position:absolute;left:6%;bottom:6%;font:500 .8rem var(--f-b);color:var(--soft)}
.lede-2{font-size:1.06rem;color:#33322F;max-width:56ch}
.timeline{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.timeline li{background:var(--card);border-radius:20px;padding:1.3rem;display:grid;gap:.55rem;align-content:start}
.timeline .wk{font:600 .74rem var(--f-m);letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}
.timeline b{font:700 1.2rem/1.15 var(--f-d);letter-spacing:-.015em}
.timeline p{font-size:.92rem;color:#33322F}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.tiles.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.tile{background:var(--card);border-radius:20px;padding:1.3rem;display:grid;gap:.6rem;align-content:start;min-width:0}
.tile .ic{width:2.2rem;height:2.2rem;color:var(--ink)}
.tile .ic svg{width:100%;height:100%;display:block}
.tile b{font:700 1.15rem/1.15 var(--f-d);letter-spacing:-.015em}
.tile p{font-size:.92rem;color:#33322F}
.tile .big{font:800 2.6rem/1 var(--f-d);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.checklist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.checklist li{display:grid;grid-template-columns:1.6rem minmax(0,1fr);gap:.7rem;background:var(--card);border-radius:16px;padding:1rem 1.1rem;font-size:.94rem}
.checklist li svg{width:1.4rem;height:1.4rem;color:var(--ink)}
.checklist b{display:block;font:700 1rem var(--f-d)}
.checklist span{color:var(--soft);font-size:.88rem}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.4rem,3vw,3rem);align-items:center}
.split + .split{margin-top:clamp(2.5rem,5vw,4rem)}
.split .txt{display:grid;gap:1rem;min-width:0}
.split .txt h3{font-size:clamp(1.6rem,3vw,2.3rem);letter-spacing:-.035em}
.split .txt p{color:#33322F;max-width:48ch}
.split ul{margin:0;padding-left:1.1rem;display:grid;gap:.45rem;font-size:.95rem}
.split .art{background:var(--card);border-radius:24px;padding:1.6rem;min-height:15rem;display:grid;place-items:center;min-width:0}
.split.flip .art{order:-1}
.steps-row{display:flex;align-items:flex-start;gap:.35rem;flex-wrap:nowrap;justify-content:center;width:100%}
.steps-row .st{display:grid;justify-items:center;gap:.4rem;font-size:.76rem;line-height:1.3;text-align:center;flex:1 1 0;min-width:0}
.steps-row .st .box{width:3.6rem;height:3.6rem;border-radius:14px;background:var(--paper-2);display:grid;place-items:center}
.steps-row .arr{font-size:1.1rem;color:var(--soft);padding-top:1.2rem}
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.55rem}
.day{background:var(--card);border-radius:16px;padding:.9rem .8rem;display:grid;gap:.55rem;align-content:start;min-height:9.5rem}
.day .d{font:600 .72rem var(--f-m);letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}
.day .shp{--s:1.5rem}
.day p{font-size:.84rem;line-height:1.4}
.day.rest{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line)}
.bubbles{display:grid;gap:.6rem;width:100%;max-width:24rem}
.bub{padding:.75rem 1rem;border-radius:16px;font-size:.92rem;line-height:1.4;max-width:85%}
.bub.me{justify-self:end;background:var(--ink);color:var(--paper);border-bottom-right-radius:4px}
.bub.ai{background:var(--paper-2);border-bottom-left-radius:4px}
.bub small{display:block;font:500 .66rem var(--f-m);letter-spacing:.08em;text-transform:uppercase;opacity:.7;margin-bottom:.2rem}
.audlinks{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}
.audlink{display:inline-flex;gap:.55rem;align-items:center;padding:.55rem 1rem;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--ink);text-decoration:none;font:600 .9rem var(--f-b);min-height:44px}
.audlink:hover{background:var(--ink);color:var(--paper)}
.audlink .ctr{--s:1.25rem;color:currentColor}
.note{font-size:.8rem;color:var(--soft);margin-top:.8rem}
.margin-note{display:grid;gap:.3rem;font-size:.92rem}
.margin-note .tagx{justify-self:start;font:600 .7rem var(--f-m);letter-spacing:.12em;text-transform:uppercase;padding:.25rem .5rem;border:1.5px solid var(--ink);border-radius:6px}
.margin-note b{font:800 3.2rem/1 var(--f-d);letter-spacing:-.03em}
.ex-line{background:var(--paper);border-radius:12px;padding:.9rem 1rem;font-size:1rem;border:1.5px solid var(--line)}
@media (max-width:1020px){
  .page-hero .wrap,.split{grid-template-columns:1fr}
  .split.flip .art{order:0}
  .timeline,.tiles,.tiles.three{grid-template-columns:1fr 1fr}
  .week{grid-template-columns:repeat(4,minmax(0,1fr))}
  .checklist{grid-template-columns:1fr}
}
@media (max-width:560px){
  .timeline,.tiles,.tiles.three{grid-template-columns:1fr}
  .week{grid-template-columns:1fr 1fr}
  .hero-art{aspect-ratio:1/.75}
}

/* ---------- lesson plan (home: build it) ---------- */
.plan{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(1.2rem,3vw,2.4rem);align-items:start}
.prompt{background:var(--ink);color:var(--paper);border-radius:24px;padding:1.5rem;display:grid;gap:1rem;position:sticky;top:6rem}
.prompt .field{background:#2A2A30;border-radius:14px;padding:1rem 1.1rem;font:500 1.15rem/1.35 var(--f-b);margin:0}
.prompt .caret{display:inline-block;width:2px;height:1.1em;background:var(--paper);margin-left:3px;vertical-align:-.15em;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.pchips{display:flex;gap:.45rem;flex-wrap:wrap}
.pchips button{font:500 .9rem var(--f-b);padding:.5rem .9rem;border-radius:999px;border:1.5px solid #5A5850;background:transparent;color:var(--paper);cursor:pointer;min-height:40px}
.pchips button[aria-pressed="true"]{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.pchips button:focus-visible{outline:3px solid var(--ochre);outline-offset:2px}
.pnote{font-size:.86rem;color:#BDB6A6}
.sheet{background:var(--card);border-radius:24px;overflow:hidden}
.sheet-hd{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:1.1rem 1.3rem;border-bottom:1.5px solid var(--ink)}
.sheet-hd b{font:800 1.35rem var(--f-d);letter-spacing:-.02em}
.pl{list-style:none;margin:0;padding:0}
.pl li{display:grid;grid-template-columns:2.8rem 1.4rem minmax(0,1fr);gap:.9rem;align-items:start;padding:.85rem 1.3rem;border-top:1px solid var(--line);animation:plin .45s cubic-bezier(.2,.8,.2,1) both}
.pl li:first-child{border-top:0}
@keyframes plin{from{opacity:0;transform:translateY(6px)}}
.pl .min{font:600 .85rem var(--f-m);color:var(--soft);font-variant-numeric:tabular-nums;padding-top:.15rem}
.pl .shp{--s:1.15rem;margin-top:.2rem}
.pl b{display:block;font:700 1.02rem/1.3 var(--f-d);letter-spacing:-.01em}
.pl span.do{display:block;font-size:.86rem;color:var(--soft);margin-top:.15rem}
.sheet-ft{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding:1rem 1.3rem;border-top:1.5px solid var(--ink);font:700 1rem var(--f-d)}
@media (max-width:1020px){.plan{grid-template-columns:1fr}.prompt{position:static}}
@media (prefers-reduced-motion:reduce){.prompt .caret,.pl li{animation:none}}

/* ---------- the original Teloriva wordmark ---------- */
.logo img{display:block;height:25px;width:auto}
.lopt{background:var(--card);border-radius:24px;padding:1.4rem;display:grid;gap:1rem}
.lhead{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}.lhead h3{font-size:1.5rem;letter-spacing:-.025em}
.lhead .len{font:600 .74rem var(--f-m);letter-spacing:.08em;text-transform:uppercase;padding:.3rem .55rem;border-radius:6px;background:var(--ink);color:var(--paper)}
.lrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:1rem}
.lbox{border-radius:16px;display:grid;place-items:center;padding:2rem 1.6rem;min-height:9rem}
.lbox img{width:100%;max-width:400px;height:auto}
.lbox.light{background:var(--paper)}.lbox.dark{background:var(--ink)}.lbox.icon{background:var(--paper-2);padding:1.4rem}.lbox.icon img{width:7.5rem}
.lopt p{color:#33322F;max-width:70ch;font-size:.95rem}
@media (max-width:820px){.lrow{grid-template-columns:1fr}}
footer .logo img{height:28px}
@media (max-width:560px){.logo img{height:21px}}

/* ---------- gamification: worlds gallery, guardrails, homepage strip ---------- */
.worlds{display:grid;gap:1rem}
.wtabs{display:flex;gap:.5rem;flex-wrap:wrap}
.wtabs button{font:600 .92rem var(--f-b);padding:.6rem 1.1rem;border-radius:999px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;min-height:44px}
.wtabs button[aria-selected="true"]{background:var(--ink);color:var(--paper)}
.wframe{margin:0;background:var(--ink);border-radius:24px;padding:clamp(.5rem,1.4vw,.9rem);display:grid;gap:.8rem}
.wframe img{width:100%;height:auto;display:block;border-radius:14px;transition:opacity .25s}
.wframe img.fade{opacity:.15}
.wframe figcaption{color:#CFC8B8;font-size:.92rem;padding:0 .4rem .3rem}
.wframe figcaption b{color:var(--paper);font-family:var(--f-d)}
img.shot{width:100%;height:auto;display:block;border-radius:14px;box-shadow:0 18px 40px -22px rgb(40 30 10/.45)}
.guard{margin-top:1.4rem;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;font-size:.9rem}
.guard b{font-family:var(--f-d);margin-right:.3rem}
.guard span{padding:.35rem .75rem;border-radius:999px;background:var(--card);border:1.5px solid var(--line)}
.game-strip{margin-top:1rem;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1.4rem;align-items:center;background:var(--ink);color:var(--paper);border-radius:24px;padding:1.1rem 1.4rem;text-decoration:none}
.game-strip .thumbs{display:flex}
.game-strip .thumbs img{width:6.4rem;height:auto;border-radius:10px;border:2px solid var(--ink);box-shadow:0 6px 14px -6px #000}
.game-strip .thumbs img+img{margin-left:-2.2rem}
.game-strip .thumbs img:nth-child(1){transform:rotate(-5deg)} .game-strip .thumbs img:nth-child(3){transform:rotate(5deg)}
.game-strip .gs-txt{display:grid;gap:.25rem}
.game-strip b{font:800 1.3rem var(--f-d);letter-spacing:-.02em}
.game-strip .gs-txt>span{color:#CFC8B8;font-size:.92rem}
.game-strip .go{font:600 .95rem var(--f-b);white-space:nowrap}
.game-strip:hover .go{text-decoration:underline;text-underline-offset:.25em}
@media (max-width:820px){.game-strip{grid-template-columns:1fr;gap:1rem}.game-strip .thumbs img{width:5.4rem}}

/* ---------- shell: nav, Products menu, phone sheet, language switch ---------- */
.nav-links{display:flex;align-items:center;gap:.3rem;margin:0 0 0 auto;font-size:.92rem}
.nav-links > a,.nav-prod__btn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .8rem;border-radius:999px;font:500 .92rem var(--f-b);text-decoration:none}
.nav-links > a:hover,.nav-prod__btn:hover{background:var(--paper-2)}
.nav-links > a[aria-current="page"],.nav-prod.is-here > .nav-prod__btn{font-weight:700;text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:2px}
.nav-links > a:focus-visible,.nav-prod__btn:focus-visible,.nav-burger:focus-visible,.lang button:focus-visible{outline:3px solid var(--cobalt);outline-offset:2px}
.nav .wrap{position:relative}
.nav-prod{position:static}
.nav-prod__caret{transition:transform .2s}
.nav-prod__btn[aria-expanded="true"] .nav-prod__caret{transform:rotate(180deg)}
.nav-prod__panel{position:absolute;top:calc(100% - .2rem);right:clamp(16px,4vw,40px);width:min(58rem,calc(100vw - 32px));background:var(--card);border:1.5px solid var(--ink);border-radius:var(--r);padding:1.2rem;display:none;grid-template-columns:minmax(0,.75fr) minmax(0,1.5fr);gap:1.4rem;box-shadow:0 18px 40px -20px rgb(27 27 31/.35)}
.nav-prod__btn[aria-expanded="true"] + .nav-prod__panel{display:grid}
.nav-prod__panel h3{font:600 .74rem var(--f-m);letter-spacing:.12em;text-transform:uppercase;color:var(--soft);margin-bottom:.7rem}
.nav-prod__panel ul{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.nav-prod__panel a{text-decoration:none;display:flex;align-items:center;gap:.7rem;padding:.55rem .6rem;border-radius:12px}
.nav-prod__panel a:hover{background:var(--paper)}
.nav-prod__panel a b{display:block;font:600 .95rem/1.2 var(--f-b)}
.nav-prod__panel a em{display:block;font-style:normal;font-size:.82rem;color:var(--soft);line-height:1.3}
.nav-prod__panel .ctr{--s:2.1rem}
.nav-prod__what a{display:block}
.nav-prod__pilots ul{grid-template-columns:1fr 1fr}
.term{margin-left:auto;font:600 .68rem var(--f-m);letter-spacing:.06em;text-transform:uppercase;border:1.5px solid var(--ink);border-radius:999px;padding:.12rem .5rem;white-space:nowrap;align-self:flex-start}
.lang{display:inline-flex;margin:0}
.lang > div{display:inline-flex;border:1.5px solid var(--ink);border-radius:999px;overflow:hidden;font:600 .78rem var(--f-m)}
.lang button{all:unset;cursor:pointer;padding:.3rem .55rem}
.lang button[aria-current="true"]{background:var(--ink);color:var(--paper)}
.lang button:focus-visible{outline:3px solid var(--cobalt);outline-offset:-3px}
.nav-burger{all:unset;box-sizing:border-box;display:none;cursor:pointer;width:44px;height:44px;border-radius:999px;align-items:center;justify-content:center;border:1.5px solid var(--ink)}
.nav-burger svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.nav-sheet{position:fixed;inset:0;z-index:25;background:var(--paper);padding:5.6rem clamp(16px,4vw,40px) 2rem;overflow-y:auto;display:none}
.nav-sheet.is-open{display:block}
html.sheet-open{overflow:hidden}
.nav-sheet details{border-bottom:1px solid var(--line)}
.nav-sheet summary,.nav-sheet__row{display:flex;justify-content:space-between;align-items:center;padding:1rem .2rem;font:600 1.1rem var(--f-d);text-decoration:none;cursor:pointer;list-style:none}
.nav-sheet summary::-webkit-details-marker{display:none}
.nav-sheet details ul{list-style:none;margin:0 0 .8rem;padding:0;display:grid;gap:.1rem}
.nav-sheet details a{display:flex;align-items:center;gap:.8rem;padding:.6rem .4rem;text-decoration:none;border-radius:12px}
.nav-sheet details a .ctr{--s:1.9rem}
.nav-sheet details a b{display:block;font:600 .98rem/1.2 var(--f-b)}
.nav-sheet details a em{display:block;font-style:normal;font-size:.82rem;color:var(--soft)}
.nav-sheet__row{border-bottom:1px solid var(--line)}
.nav-sheet .lang{margin-top:1.4rem}
@media (max-width:1020px){
  .nav-links,.nav .nav-cta-long,.nav .lang{display:none}
  .nav-burger{display:inline-flex;margin-left:auto}
  .nav .wrap{gap:.8rem}
  .nav-sheet .lang{display:inline-flex}
}
@media (max-width:560px){.nav .btn{padding:.5rem .8rem;font-size:.85rem}}

/* footer additions: legal row, cookie-settings button */
footer .foot-legal{display:flex;gap:1.2rem;flex-wrap:wrap}
footer .foot-legal button{all:unset;cursor:pointer;text-decoration:underline;text-underline-offset:.2em}
footer .foot-legal button:focus-visible,footer a:focus-visible{outline:3px solid var(--ochre);outline-offset:3px}
footer .foot-id{display:flex;gap:1.2rem;flex-wrap:wrap;margin:0}
footer .grid{grid-template-columns:1.3fr repeat(4,1fr)}
@media (max-width:1020px){footer .grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){footer .grid{grid-template-columns:1fr}}

/* pilot form: server-rendered, so labels and errors are real */
.roles label{cursor:pointer;display:grid;justify-items:center;gap:.45rem;padding:.8rem .4rem;border-radius:14px;border:1.5px solid var(--line);text-align:center;font:600 .82rem/1.2 var(--f-b)}
.roles label .ctr{--s:2.4rem}
.roles input{position:absolute;opacity:0;width:1px;height:1px}
.roles input:checked + label{border-color:var(--ink);background:var(--paper)}
.roles input:focus-visible + label{outline:3px solid var(--cobalt);outline-offset:2px}
.fld .errorlist{list-style:none;margin:.2rem 0 0;padding:0;color:var(--brick);font-size:.84rem}
.form-errors{color:var(--brick);font-size:.88rem}
.consent .errorlist{list-style:none;margin:.3rem 0 0;padding:0;color:var(--brick);font-size:.84rem}
@media (max-width:760px){.roles{grid-template-columns:1fr 1fr}}

/* the consent banner (core/partials/consent.html) was written for Toy Box tokens: restate them here */
body.bk .tl-consent{background:var(--card);color:var(--ink);border:1.5px solid var(--ink);border-radius:var(--r);box-shadow:0 18px 40px -20px rgb(27 27 31/.35);font-family:var(--f-b)}
body.bk .tl-consent .chip-btn{all:unset;box-sizing:border-box;cursor:pointer;font:600 .92rem var(--f-b);padding:.55rem 1.3rem;border-radius:999px;border:1.5px solid var(--ink);min-height:44px;display:inline-flex;align-items:center}
body.bk .tl-consent .chip-btn[data-consent="yes"]{background:var(--ink);color:var(--paper)}
body.bk .tl-consent .chip-btn:focus-visible{outline:3px solid var(--cobalt);outline-offset:2px}
.consent[hidden]{display:none!important}