/* Tiny Makers. Direction: bright workshop. Navy ink, orange action, teal and yellow as spark colours.
   Layout idea: big rounded sections, one live circuit in the hero, diagrams on white "bench" panels. */
:root{
  --bg:#F5F7FB; --surface:#FFFFFF; --ink:#14213D; --muted:#53607A; --line:#E0E6F1;
  --brand:#C2410C; --brand-hi:#FF7A1A; --wa:#15803D; --on-brand:#FFFFFF; --teal:#0B8F8E; --yellow:#FFC933;
  --soft:#FFF0E2; --soft-teal:#E3F6F5; --navy:#14213D; --bench:#FFFFFF; --shadow:0 10px 30px rgba(20,33,61,.10);
  --display:'Fredoka','Trebuchet MS',system-ui,sans-serif; --body:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r:22px; --max:1120px; color-scheme:light;
 --badge:#14213D; --on-badge:#FFFFFF; --tick:#0B8F8E; --hdr-shadow:0 6px 20px rgba(20,33,61,.06); --lab-bg:#14213D; --lab-edge:transparent; --final-a:#14213D; --final-b:#1E3A6E; --chip-tile:#FFFFFF;
 --edge:#14213D; --pop:#14213D; --dot:rgba(20,33,61,.07); --band:#FFF6EC; --band-2:#E9F7F6; --sticker-y:#FFE07A;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0B1324; --surface:#131E36; --ink:#F1F5FB; --muted:#A8B4CC; --line:#26334F; --brand:#FF8A33; --brand-hi:#FF9A4D; --wa:#4ADE80; --on-brand:#1A1205;
  --teal:#35C8C6; --soft:#2A2118; --soft-teal:#10282B; --bench:#E9EEF6; --shadow:0 10px 30px rgba(0,0,0,.35);
  --badge:#FF8A33; --on-badge:#1A1205; --tick:#0E9C9A; --hdr-shadow:0 6px 20px rgba(0,0,0,.35); --lab-bg:#101B33; --lab-edge:#26334F;
  --final-a:#14213D; --final-b:#1B3460; --chip-tile:#E9EEF6; --edge:#3B4D7A; --pop:#02060F; --dot:rgba(255,255,255,.05); --band:#16213C; --band-2:#102A30; --sticker-y:#5A4A12; color-scheme:dark;}}
:root[data-theme="dark"]{
  --bg:#0B1324; --surface:#131E36; --ink:#F1F5FB; --muted:#A8B4CC; --line:#26334F; --brand:#FF8A33; --brand-hi:#FF9A4D; --wa:#4ADE80; --on-brand:#1A1205;
  --teal:#35C8C6; --soft:#2A2118; --soft-teal:#10282B; --bench:#E9EEF6; --shadow:0 10px 30px rgba(0,0,0,.35);
  --badge:#FF8A33; --on-badge:#1A1205; --tick:#0E9C9A; --hdr-shadow:0 6px 20px rgba(0,0,0,.35); --lab-bg:#101B33; --lab-edge:#26334F;
  --final-a:#14213D; --final-b:#1B3460; --chip-tile:#E9EEF6; --edge:#3B4D7A; --pop:#02060F; --dot:rgba(255,255,255,.05); --band:#16213C; --band-2:#102A30; --sticker-y:#5A4A12; color-scheme:dark;}

*{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block} a{color:inherit}
h1,h2,h3{font-family:var(--display);line-height:1.08;margin:0;text-wrap:balance;letter-spacing:-.02em}
h1{font-size:clamp(2.5rem,6.4vw,4.6rem);font-weight:800} h2{font-size:clamp(1.9rem,4.2vw,3rem);font-weight:800} h3{font-size:1.3rem;font-weight:700;letter-spacing:-.01em}
p{margin:0 0 1em;text-wrap:pretty} .lead{font-size:clamp(1.05rem,2vw,1.25rem);color:var(--muted);max-width:56ch}
.wrap{width:min(var(--max),100% - 32px);margin-inline:auto} section{padding:clamp(56px,8vw,104px) 0}
.eyebrow{display:inline-flex;gap:.5rem;align-items:center;font:700 .8rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin-bottom:14px}
.eyebrow::before{content:"";width:22px;height:3px;border-radius:3px;background:var(--brand)}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:8px}
.skip{position:absolute;left:-999px;top:8px;background:var(--navy);color:#fff;padding:10px 14px;border-radius:10px;z-index:100} .skip:focus{left:8px}

/* header */
.hdr{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
.hdr.scrolled{border-color:var(--line);box-shadow:var(--hdr-shadow)}
.hdr .wrap{display:flex;align-items:center;gap:20px;min-height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:800 1.35rem/1 var(--display);letter-spacing:-.03em}
.brand img{width:44px;height:auto} .brand b{color:var(--brand)} .brand sup{font:600 .55rem/1 var(--body);margin-left:2px;vertical-align:top;color:var(--muted)}
.only-dark{display:none} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .only-light{display:none} :root:not([data-theme="light"]) .only-dark{display:block}}
:root[data-theme="dark"] .only-light{display:none} :root[data-theme="dark"] .only-dark{display:block}
nav.main{margin-left:auto;display:flex;gap:6px;align-items:center}
nav.main a{text-decoration:none;font-weight:600;font-size:.97rem;padding:9px 13px;border-radius:999px;color:var(--muted);transition:background .2s,color .2s}
nav.main a:hover,nav.main a[aria-current="page"]{background:var(--surface);color:var(--ink)}
.menu-btn{display:none;margin-left:auto;background:var(--surface);border:1px solid var(--line);border-radius:12px;width:44px;height:44px;font-size:1.2rem;color:var(--ink);cursor:pointer}

/* buttons */
.btn{--bg-b:var(--brand);display:inline-flex;align-items:center;justify-content:center;gap:.6rem;padding:15px 26px;border-radius:999px;border:2px solid transparent;font:700 1rem/1 var(--body);text-decoration:none;cursor:pointer;position:relative;overflow:hidden;background:var(--bg-b);color:var(--on-brand);box-shadow:0 8px 20px rgba(242,106,11,.28);transition:transform .18s,box-shadow .18s}
.btn:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(242,106,11,.34)} .btn:active{transform:translateY(0)}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);transform:translateX(-120%)}
.btn:hover::after{transform:translateX(120%);transition:transform .7s}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line);box-shadow:none} .btn.ghost:hover{border-color:var(--ink);box-shadow:none}
.btn.small{padding:11px 18px;font-size:.92rem} .btn svg{width:20px;height:20px;flex:none}
.btn.wa{--bg-b:#1FAF5A;color:#fff;box-shadow:0 8px 20px rgba(31,175,90,.3)} .btn.wa:hover{box-shadow:0 14px 28px rgba(31,175,90,.38)}

/* hero */
.hero{padding-top:clamp(28px,5vw,64px);padding-bottom:clamp(40px,6vw,80px);position:relative}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,5vw,64px);align-items:center}
.hero h1 .hl{color:var(--brand);position:relative;white-space:nowrap}
.hero h1 .hl svg{position:absolute;left:0;bottom:-.18em;width:100%;height:.3em;overflow:visible}
.hero h1 .hl path{stroke:var(--yellow);stroke-width:10;fill:none;stroke-linecap:round;stroke-dasharray:420;stroke-dashoffset:420;animation:draw 1.1s .5s forwards ease-out}
@keyframes draw{to{stroke-dashoffset:0}}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 22px}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.chips li{background:var(--surface);border:1px solid var(--line);padding:8px 14px;border-radius:999px;font-weight:600;font-size:.9rem;display:flex;gap:8px;align-items:center}
.chips li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--teal)}
.bench{background:var(--surface);border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow);padding:18px;position:relative}
.bench .tag{position:absolute;top:16px;left:18px;font:700 .72rem/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.circuit{width:100%;height:auto;display:block;margin-top:18px}
.circuit .w{fill:none;stroke:var(--ink);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.circuit .flow{fill:none;stroke:var(--yellow);stroke-width:5;stroke-linecap:round;stroke-dasharray:1 16;opacity:0;filter:drop-shadow(0 0 4px var(--yellow))}
.circuit.on .flow{opacity:1;animation:flow 1s linear infinite} @keyframes flow{to{stroke-dashoffset:-34}}
.circuit .glow{fill:#FFC933;opacity:0;transform-origin:center;transform-box:fill-box;transition:opacity .3s} .circuit.on .glow{opacity:.55;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.25);opacity:.3}}
.circuit .lever{transform-origin:196px 250px;transition:transform .35s cubic-bezier(.3,1.5,.5,1)} .circuit.on .lever{transform:rotate(0deg)} .circuit:not(.on) .lever{transform:rotate(-28deg)}
.circuit text{font:600 12px var(--body);fill:var(--muted)} .circuit .ledfill{fill:var(--surface);stroke:var(--ink);stroke-width:5;transition:fill .3s} .circuit.on .ledfill{fill:#FFD84D}
.sw-btn{margin:10px auto 0;display:flex}
.hint{text-align:center;color:var(--muted);font-size:.95rem;margin:12px 0 0}

/* strip / marquee */
.strip{padding:0;border-block:1px solid var(--line);background:var(--surface);overflow:hidden}
.marq{display:flex;gap:48px;width:max-content;padding:22px 0;animation:marq 38s linear infinite} .strip:hover .marq{animation-play-state:paused}
.marq figure{margin:0;display:flex;align-items:center;gap:12px;font-weight:700;white-space:nowrap} .marq img{width:58px;height:58px;padding:6px;background:var(--chip-tile);border:1px solid var(--line);border-radius:14px}
@keyframes marq{to{transform:translateX(-50%)}}

/* cards */
.grid{display:grid;gap:20px} .g3{grid-template-columns:repeat(3,1fr)} .g2{grid-template-columns:repeat(2,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:28px;transition:transform .25s,box-shadow .25s,border-color .25s}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--brand) 40%,var(--line))}
.card .ic{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:var(--soft);margin-bottom:16px;font:800 1.4rem var(--display);color:var(--brand)}
.card:nth-child(2) .ic{background:var(--soft-teal);color:var(--teal)} .card p{color:var(--muted);margin:0}
.head{max-width:680px;margin-bottom:40px} .head h2{margin-bottom:16px} .head p{color:var(--muted);font-size:1.1rem}

/* sessions rail */
.rail{display:flex;gap:18px;overflow-x:auto;padding:6px 16px 28px;margin-inline:calc((100vw - min(var(--max),100vw - 32px))/-2);scroll-snap-type:x proximity;scrollbar-width:thin}
.rail::before,.rail::after{content:"";flex:0 0 calc((100vw - min(var(--max),100vw - 32px))/2 - 16px)}
.srail{flex:0 0 min(300px,80vw);scroll-snap-align:start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .25s,box-shadow .25s;text-decoration:none;display:flex;flex-direction:column}
.srail:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.srail .pic{background:var(--bench);height:170px;display:grid;place-items:center;padding:14px;border-bottom:1px solid var(--line)} .srail .pic img{max-height:140px;max-width:100%;width:auto;object-fit:contain}
.srail .tx{padding:18px 20px 22px} .num{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;color:#fff;font:800 .95rem var(--display);margin-bottom:10px}
.srail h3{font-size:1.12rem;margin-bottom:6px} .srail p{color:var(--muted);font-size:.95rem;margin:0}

/* lab */
.lab{background:var(--lab-bg);border:1px solid var(--lab-edge);color:#F1F5FB;border-radius:36px;padding:clamp(24px,5vw,56px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,48px);align-items:center;position:relative;overflow:hidden}
.lab h2{color:#fff} .lab .lead{color:#B8C4DC} .lab .eyebrow{color:var(--yellow)}
.lab-panel{background:#0E1830;border:1px solid #2A3A5E;border-radius:26px;padding:26px}
.lab label{display:flex;justify-content:space-between;font-weight:700;margin:0 0 10px;font-size:.95rem}
.lab output{font-variant-numeric:tabular-nums;color:var(--yellow)}
.seg{display:flex;background:#16254A;border-radius:999px;padding:4px;margin-bottom:22px} .seg button{flex:1;border:0;background:transparent;color:#B8C4DC;font:700 .92rem var(--body);padding:11px 8px;border-radius:999px;cursor:pointer;transition:background .2s,color .2s} .seg button[aria-pressed="true"]{background:var(--yellow);color:#14213D}
input[type=range]{width:100%;accent-color:var(--brand);height:34px}
.bulb-row{display:flex;align-items:center;gap:20px;margin-top:20px}
.bulb{width:84px;height:84px;border-radius:50%;background:#2B3A5E;border:4px solid #3A4C78;flex:none;transition:background .06s,box-shadow .06s} .bulb.on{background:#FFD84D;border-color:#FFE48A;box-shadow:0 0 40px 10px rgba(255,201,51,.65)}
.readout{font-size:.98rem;color:#C9D3E8} .readout strong{color:#fff;font:800 1.5rem var(--display);display:block}
.sun{display:flex;align-items:center;gap:10px;font-size:.9rem;color:#B8C4DC}

/* split */
.tabs{display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:5px;margin-bottom:28px}
.tabs button{border:0;background:transparent;padding:12px 22px;border-radius:999px;font:700 1rem var(--body);color:var(--muted);cursor:pointer;transition:all .2s} .tabs button[aria-selected="true"]{background:var(--brand);color:var(--on-brand);box-shadow:0 6px 14px rgba(242,106,11,.25)}
.panel[hidden]{display:none} .panel{animation:rise .4s ease both} @keyframes rise{from{transform:translateY(12px)}}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:14px} .ticks li{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start;background:var(--surface);border:1px solid var(--line);padding:16px 18px;border-radius:18px}
.ticks li::before{content:"";width:26px;height:26px;border-radius:50%;background:var(--tick) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
.ticks b{display:block}.ticks span{color:var(--muted);font-size:.95rem}

/* handouts */
.fan{position:relative;height:clamp(300px,44vw,470px);display:flex;justify-content:center}
.fan img{position:absolute;width:min(300px,52%);border-radius:14px;border:1px solid var(--line);box-shadow:var(--shadow);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.fan img:nth-child(1){transform:translateX(-62%) rotate(-9deg)} .fan img:nth-child(2){z-index:2;transform:translateY(-14px)} .fan img:nth-child(3){transform:translateX(62%) rotate(9deg)}
.fan:hover img:nth-child(1){transform:translateX(-72%) rotate(-12deg)} .fan:hover img:nth-child(3){transform:translateX(72%) rotate(12deg)} .fan:hover img:nth-child(2){transform:translateY(-26px) scale(1.03)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,64px);align-items:center}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:8px} .stat{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:22px;text-align:left}
.stat b{display:block;font:800 clamp(2.2rem,5vw,3.4rem)/1 var(--display);color:var(--brand);font-variant-numeric:tabular-nums} .stat span{color:var(--muted);font-weight:600}

/* faq */
details{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:0 22px;transition:border-color .2s} details+details{margin-top:12px} details[open]{border-color:color-mix(in srgb,var(--brand) 50%,var(--line))}
summary{list-style:none;cursor:pointer;font:700 1.08rem var(--display);padding:20px 0;display:flex;justify-content:space-between;gap:16px;align-items:center} summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:700 1.6rem/1 var(--body);color:var(--brand);transition:transform .25s} details[open] summary::after{transform:rotate(45deg)} details p{color:var(--muted);padding-bottom:20px;margin:0}

/* final cta */
.final{background:linear-gradient(135deg,var(--final-a),var(--final-b));border:1px solid var(--lab-edge);border-radius:36px;color:#fff;padding:clamp(32px,6vw,72px);text-align:center;position:relative;overflow:hidden}
.final h2{color:#fff;max-width:18ch;margin-inline:auto} .final p{color:#C9D3E8;max-width:52ch;margin:16px auto 28px;font-size:1.1rem} .final .cta-row{justify-content:center;margin:0}
.final .btn.ghost{color:#fff;border-color:#5B6C94} .final .btn.ghost:hover{border-color:#fff}
.sparks i{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--yellow);opacity:.8;animation:float 6s ease-in-out infinite} @keyframes float{50%{transform:translateY(-18px)}}

/* footer */
footer{padding:56px 0 110px;border-top:1px solid var(--line);margin-top:40px;color:var(--muted);font-size:.95rem}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px} footer h4{font:700 .8rem var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin:0 0 12px}
footer a{display:block;text-decoration:none;padding:4px 0} footer a:hover{color:var(--brand)} .legal{margin-top:36px;padding-top:20px;border-top:1px solid var(--line);font-size:.82rem}

/* sticky mobile cta */
.sticky{position:fixed;left:12px;right:12px;bottom:12px;z-index:60;display:none;transform:translateY(140%);transition:transform .35s}
.sticky.show{transform:none} .sticky .btn{width:100%;box-shadow:0 12px 30px rgba(0,0,0,.28)}

/* inner pages */
.phero{padding:clamp(36px,6vw,72px) 0 clamp(20px,4vw,40px)} .phero h1{font-size:clamp(2.2rem,5.4vw,3.8rem);max-width:18ch} .phero .lead{margin-top:16px}
.srow{display:grid;grid-template-columns:90px 1fr 1fr;gap:clamp(16px,3vw,36px);align-items:center;padding:30px 0;border-top:1px solid var(--line)} .srow:first-child{border-top:0}
.srow .big{font:800 clamp(3rem,7vw,5.2rem)/1 var(--display)} .srow .bench{padding:16px;background:var(--bench);border-radius:22px;box-shadow:none} .srow .bench img{margin:auto;max-height:230px;width:auto}
.srow h3{font-size:1.6rem;margin-bottom:8px} .srow dl{margin:14px 0 0;display:grid;gap:6px;font-size:.98rem} .srow dt{font-weight:700;color:var(--ink);display:inline} .srow dd{display:inline;margin:0;color:var(--muted)}
.srow dd::after{content:"";display:block}
.srow:nth-child(even) .bench{order:-1}
.pill{display:inline-block;font:700 .78rem var(--body);padding:5px 12px;border-radius:999px;background:var(--soft);color:var(--brand);margin:0 6px 6px 0}
.part{display:grid;grid-template-columns:96px 1fr;gap:18px;align-items:center} .part img{width:96px;height:96px;background:var(--bench);border-radius:20px;padding:10px;border:1px solid var(--line)}
.part h3{margin-bottom:4px} .part p{margin:0;color:var(--muted);font-size:.97rem}
.callout{background:var(--soft);border-radius:var(--r);padding:28px;border:1px solid color-mix(in srgb,var(--brand) 25%,transparent)}
.steps{counter-reset:s;display:grid;gap:14px;list-style:none;margin:0;padding:0} .steps li{counter-increment:s;display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px}
.steps li::before{content:counter(s);width:44px;height:44px;border-radius:50%;background:var(--badge);color:var(--on-badge);display:grid;place-items:center;font:800 1.1rem var(--display)} .steps b{display:block}.steps span{color:var(--muted)}
form.enroll{background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:clamp(22px,4vw,40px);box-shadow:var(--shadow)}
.field{margin-bottom:18px} .field label{display:block;font-weight:700;margin-bottom:8px} .field input,.field select,.field textarea{width:100%;font:inherit;color:var(--ink);background:var(--bg);border:2px solid var(--line);border-radius:14px;padding:14px 16px;transition:border-color .2s} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand)}
.note{font-size:.88rem;color:var(--muted)} .phone-big{font:800 clamp(1.8rem,5vw,2.8rem) var(--display);letter-spacing:.02em}

@media (max-width:900px){
  .hero .wrap,.lab,.split{grid-template-columns:1fr} .g3,.g4{grid-template-columns:1fr 1fr} .stats{grid-template-columns:1fr 1fr} footer .cols{grid-template-columns:1fr 1fr}
  .srow{grid-template-columns:1fr} .srow .big{font-size:3rem} .srow:nth-child(even) .bench{order:0}
  nav.main{display:none;position:absolute;left:0;right:0;top:68px;background:var(--bg);flex-direction:column;align-items:stretch;padding:12px 16px 20px;border-bottom:1px solid var(--line)} nav.main.open{display:flex} nav.main a{padding:14px} .menu-btn{display:block}
  .sticky{display:block}
}
@media (max-width:560px){.g3,.g4,.g2{grid-template-columns:1fr} .part{grid-template-columns:76px 1fr} .part img{width:76px;height:76px}}
/* phones: balanced labels, full-width hero buttons, readable wrapped buttons, roomier footer */
.eyebrow{text-wrap:balance}
@media (max-width:560px){
  .eyebrow{letter-spacing:.08em;line-height:1.3}
  .hero .cta-row .btn{flex:1 1 100%}
  .btn{line-height:1.25;text-align:center}
  footer .cols{gap:28px 20px} footer .cols>:first-child,footer .cols>:last-child{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important} .hero h1 .hl path{stroke-dashoffset:0}}
[data-reveal]{transform:translateY(18px);transition:transform .7s cubic-bezier(.2,.8,.2,1)} [data-reveal].in{transform:none}

.pm{font:700 18px var(--body)!important;fill:var(--ink)!important}
.circuit .ray{fill:none;stroke:var(--yellow);stroke-width:5;stroke-linecap:round;opacity:0;transition:opacity .3s} .circuit.on .ray{opacity:1}
.circuit .lever{transition:transform .35s cubic-bezier(.3,1.4,.5,1)} .circuit.on .lever{transform:rotate(0deg)} .circuit:not(.on) .lever{transform:rotate(-30deg)}
.out{text-align:center} .out .anim{height:120px;display:grid;place-items:center;margin-bottom:10px;background:var(--soft);border-radius:18px} .out svg{width:96px;height:96px;overflow:visible}
.a-light .g{opacity:.45;transform-origin:50px 42px;animation:pulse2 1.8s ease-in-out infinite} @keyframes pulse2{50%{transform:scale(1.2);opacity:.2}}
.a-spin .blades{transform-origin:50px 50px;animation:spin 1.1s linear infinite} @keyframes spin{to{transform:rotate(360deg)}}
.a-blink .dome{fill:#4ADE80;animation:bl 1.4s steps(1) infinite} .a-blink .g{transform-origin:50px 42px;animation:bg 1.4s steps(1) infinite;opacity:0}
@keyframes bl{0%{fill:#4ADE80}50%{fill:#D1D5DB}} @keyframes bg{0%{opacity:.5}50%{opacity:0}}
.a-beep .w1,.a-beep .w2,.a-beep .w3{opacity:0;animation:wave 1.5s ease-out infinite} .a-beep .w2{animation-delay:.25s} .a-beep .w3{animation-delay:.5s} @keyframes wave{0%{opacity:0}25%{opacity:1}70%,100%{opacity:0}}
.out:hover .anim{background:var(--soft-teal)}

/* theme toggle */
.theme-btn{flex:none;position:relative;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;display:grid;place-items:center;overflow:hidden;transition:border-color .2s,transform .18s}
.theme-btn:hover{border-color:var(--brand);transform:translateY(-2px)} .theme-btn:active{transform:none}
.theme-btn svg{grid-area:1/1;width:22px;height:22px;transition:transform .5s cubic-bezier(.3,1.4,.5,1),opacity .3s}
.theme-btn .i-sun{color:var(--brand)} .theme-btn .i-moon{color:var(--yellow)}
.theme-btn .i-moon{transform:rotate(90deg) scale(.4);opacity:0}
:root[data-theme="dark"] .theme-btn .i-sun{transform:rotate(-90deg) scale(.4);opacity:0} :root[data-theme="dark"] .theme-btn .i-moon{transform:none;opacity:1}
@media (max-width:900px){.theme-btn{margin-left:auto} .menu-btn{margin-left:0}}
/* smooth cross-fade only while switching, so page load and hovers are unaffected */
.theme-anim,.theme-anim *,.theme-anim *::before,.theme-anim *::after{transition:background-color .4s ease,border-color .4s ease,color .4s ease,fill .4s ease,stroke .4s ease,box-shadow .4s ease,transform .5s cubic-bezier(.3,1.4,.5,1),opacity .3s!important}
@media (prefers-reduced-motion:reduce){.theme-anim,.theme-anim *,.theme-anim *::before,.theme-anim *::after,.theme-btn svg{transition:none!important}}

/* ===== Kid-friendly layer: chunky outlined "sticker" shapes, press-down buttons, breadboard dots ===== */
body{background-image:radial-gradient(var(--dot) 1.6px,transparent 1.8px);background-size:24px 24px}
h1,h2,h3,summary{font-weight:700;letter-spacing:-.01em} h1{font-size:clamp(2.4rem,6vw,4.3rem)}
.card,.stat,.ticks li,details,.bench,.steps li,.srail,form.enroll,.chips li,.callout,.part img,.panel-card{border:2.5px solid var(--edge);box-shadow:5px 5px 0 var(--pop)}
.card:hover,.srail:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--pop);border-color:var(--edge)}
details[open]{border-color:var(--edge)}
.btn{border:2.5px solid var(--edge);box-shadow:0 5px 0 var(--edge);font-family:var(--display);font-weight:600;font-size:1.05rem;letter-spacing:.01em}
.btn:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--edge)} .btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--edge)}
.btn.wa{box-shadow:0 5px 0 var(--edge)} .btn.wa:hover{box-shadow:0 7px 0 var(--edge)}
.btn.ghost{background:var(--surface);border-color:var(--edge);box-shadow:0 5px 0 var(--edge)} .btn.ghost:hover{box-shadow:0 7px 0 var(--edge)}
.btn.small{font-size:.95rem}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none}
.card .ic{border:2.5px solid var(--edge);transform:rotate(-5deg);border-radius:18px} .card:nth-child(2) .ic{transform:rotate(4deg)}
.card:nth-child(3) .ic{background:var(--sticker-y);color:var(--ink)}
.eyebrow{background:var(--surface);border:2px solid var(--edge);padding:7px 12px;border-radius:999px;color:var(--ink);box-shadow:3px 3px 0 var(--pop)}
.eyebrow::before{width:10px;height:10px;border-radius:50%}
.hero h1 .hl{color:var(--brand)}
.out .anim{border:2.5px solid var(--edge)}
.stat:nth-child(2) b{color:var(--teal)} .stat:nth-child(3) b{color:#7C3AED} .stat:nth-child(4) b{color:#E11D48}
:root[data-theme="dark"] .stat:nth-child(3) b{color:#B794F6} :root[data-theme="dark"] .stat:nth-child(4) b{color:#FB7185}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .stat:nth-child(3) b{color:#B794F6} :root:not([data-theme="light"]) .stat:nth-child(4) b{color:#FB7185}}
.tabs{border:2.5px solid var(--edge);box-shadow:4px 4px 0 var(--pop)} .tabs button[aria-selected="true"]{box-shadow:none}
.final{border:2.5px solid var(--edge);box-shadow:8px 8px 0 var(--pop)}
nav.main .login{color:var(--ink);font-weight:700} nav.main .login svg{width:18px;height:18px;vertical-align:-3px;margin-right:4px}
.band{background:var(--band);border-block:2.5px solid var(--edge)} .band.teal{background:var(--band-2)}

/* Sparky the mascot */
.sparky{position:absolute;width:clamp(92px,13vw,138px);right:-14px;top:-62px;z-index:3;filter:drop-shadow(4px 5px 0 rgba(20,33,61,.18))}
.bubble{position:absolute;right:clamp(92px,12vw,134px);top:-44px;z-index:3;background:var(--surface);border:2.5px solid var(--edge);border-radius:18px 18px 4px 18px;padding:8px 12px;font:600 .95rem/1.2 var(--display);box-shadow:3px 3px 0 var(--pop);max-width:17ch}
.bench{margin-top:60px}
.sparky-inline{width:84px;height:auto;flex:none}

/* showcase teaser + member area */
.show-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.ptile{background:var(--surface);border:2.5px solid var(--edge);border-radius:var(--r);box-shadow:5px 5px 0 var(--pop);overflow:hidden;display:flex;flex-direction:column;min-width:0}
.ptile .pic{background:var(--bench);aspect-ratio:4/3;display:grid;place-items:center;border-bottom:2.5px solid var(--edge)}
.ptile .pic img{width:100%;height:100%;object-fit:cover} .ptile .pic img.art{width:56%;height:auto;object-fit:contain}
.ptile .tx{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;min-width:0}
.ptile h3{font-size:1.12rem;overflow-wrap:anywhere} .ptile p{margin:0;color:var(--muted);font-size:.95rem;overflow-wrap:anywhere}
.maker{display:inline-flex;align-items:center;gap:8px;font:600 .95rem var(--display);text-decoration:none;color:var(--ink);min-width:0}
.maker .av{width:34px;height:34px;border-radius:50%;border:2px solid var(--edge);display:grid;place-items:center;font-size:1.05rem;flex:none;background:var(--sticker-y)}
.reacts{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.react{border:2px solid var(--edge);background:var(--surface);color:var(--ink);border-radius:999px;padding:6px 10px;min-height:40px;font:600 .9rem var(--body);cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.react[aria-pressed="true"]{background:var(--sticker-y)} .react:disabled{cursor:default;opacity:.7}
.safe-note{display:flex;gap:16px;align-items:center;background:var(--surface);border:2.5px dashed var(--edge);border-radius:22px;padding:16px 20px;margin-top:28px}
.safe-note p{margin:0;color:var(--muted)} .safe-note b{color:var(--ink)}
.badge-chip{display:inline-flex;align-items:center;gap:6px;background:var(--sticker-y);color:var(--ink);border:2px solid var(--edge);border-radius:999px;padding:4px 10px;font:600 .85rem var(--display)}
.status{display:inline-block;font:700 .78rem var(--body);padding:4px 10px;border-radius:999px;border:2px solid var(--edge)}
.status.pending{background:var(--sticker-y);color:var(--ink)} .status.approved{background:var(--soft-teal);color:var(--ink)} .status.rejected,.status.hidden{background:var(--soft);color:var(--ink)}
.msg{min-height:1.5em;font-weight:600} .msg.err{color:#B42318} :root[data-theme="dark"] .msg.err{color:#FDA29B}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .msg.err{color:#FDA29B}}
.panel-card{background:var(--surface);border-radius:var(--r);padding:clamp(18px,3vw,28px)}
.stack{display:grid;gap:20px} .row{display:flex;flex-wrap:wrap;gap:12px;align-items:center} .row>*{min-width:0}
.field input,.field select,.field textarea{font-size:16px;border-color:var(--edge)} .field small{display:block;color:var(--muted);margin-top:6px}
.gbtn{background:#fff;color:#1F1F1F;border-color:#1F1F1F} .gbtn svg{width:20px;height:20px}
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:30px 10px;color:var(--muted)}
.table-scroll{overflow-x:auto;border:2.5px solid var(--edge);border-radius:18px;background:var(--surface)}
table.data{border-collapse:collapse;width:100%;font-size:.94rem} table.data th,table.data td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top} table.data th{font-family:var(--display);font-weight:600;white-space:nowrap}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.comments{display:grid;gap:8px;margin-top:6px;font-size:.92rem} .comments p{margin:0}
.comments form{display:flex;gap:8px} .comments input{flex:1;min-width:0;font:inherit;font-size:16px;padding:8px 10px;border:2px solid var(--edge);border-radius:12px;background:var(--bg);color:var(--ink)}
@media (max-width:900px){.show-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .sparky{right:-6px} .bench{margin-top:72px}}
@media (max-width:560px){.show-grid{grid-template-columns:minmax(0,1fr)} .bubble{font-size:.85rem} .safe-note{flex-direction:column;align-items:flex-start}}
.av.big{width:52px;height:52px;font-size:1.6rem;border-radius:50%;border:2.5px solid var(--edge);display:grid;place-items:center;background:var(--sticker-y);flex:none}
.pin-input{max-width:200px;font:inherit;font-size:16px;padding:10px 12px;border:2px solid var(--edge);border-radius:12px;background:var(--bg);color:var(--ink)}
.mtabs{display:inline-flex;flex-wrap:wrap;background:var(--surface);border:2.5px solid var(--edge);box-shadow:4px 4px 0 var(--pop);border-radius:999px;padding:5px;margin-bottom:24px;gap:4px}
.mtabs button{border:0;background:transparent;padding:11px 18px;min-height:44px;border-radius:999px;font:600 1rem var(--display);color:var(--muted);cursor:pointer}
.mtabs button[aria-selected="true"]{background:var(--brand);color:var(--on-brand)}
.mtabs button:focus-visible{outline-offset:-3px}
.profile-head{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.profile-head .av{width:84px;height:84px;font-size:2.6rem;border-radius:50%;border:3px solid var(--edge);display:grid;place-items:center;background:var(--sticker-y);box-shadow:4px 4px 0 var(--pop)}
#preview img{max-height:260px;width:auto;border-radius:16px;border:2.5px solid var(--edge);margin-top:12px}
.rules{display:grid;gap:14px;list-style:none;margin:0;padding:0}
.rules li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;align-items:center;background:var(--surface);border:2.5px solid var(--edge);box-shadow:5px 5px 0 var(--pop);border-radius:20px;padding:14px 16px}
.rules li span{font-size:2rem;text-align:center}
.prose h2{font-size:1.5rem;margin:28px 0 10px} .prose p,.prose li{color:var(--muted);max-width:70ch}
/* the hidden attribute always wins over display rules such as .btn, .empty, .row and .stack */
[hidden]{display:none!important}
.stack>.mtabs{justify-self:start}
/* member links show only where the member API answers (see site.js); the Pi has no API yet */
html:not(.has-members) [data-members]{display:none!important}

/* ===== Hover, focus and contrast pass (audited: text >= 4.5:1 at rest and on hover, both themes) ===== */
nav.main a:hover,nav.main a[aria-current="page"]{background:transparent}
nav.main a.btn,nav.main a.btn:hover{background:var(--brand);color:var(--on-brand)} nav.main a.btn:hover{background:color-mix(in srgb,var(--brand) 86%,#000)}
nav.main a:not(.btn):hover{background:var(--soft);color:var(--ink)}
nav.main a:not(.btn)[aria-current="page"]{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 2px var(--edge)}
nav.main a.btn,nav.main a.btn:hover{color:var(--on-brand)}
.btn:hover{background:color-mix(in srgb,var(--bg-b) 86%,#000)}
.btn.ghost:hover{background:var(--soft);color:var(--ink)}
.btn.wa{--bg-b:var(--wa);color:#fff} :root[data-theme="dark"] .btn.wa{color:#052E16}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn.wa{color:#052E16}}
.btn:focus-visible,.react:focus-visible,.mtabs button:focus-visible,.tabs button:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.final .btn.ghost{background:transparent} .final .btn.ghost:hover{background:rgba(255,255,255,.12);color:#fff}
.tabs button:not([aria-selected="true"]):hover,.mtabs button:not([aria-selected="true"]):hover{background:var(--soft);color:var(--ink)}
.react:hover:not(:disabled){background:var(--soft)} .react[aria-pressed="true"]:hover{background:var(--sticker-y)}
footer a:hover{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
a.maker:hover{text-decoration:underline;text-underline-offset:3px}
summary:hover{color:var(--brand)}
.theme-btn:hover{background:var(--soft)}

/* levels (home cards + program page) */
.lv-spark{--lv:#BE123C;--lv-soft:#FFE4E6} .lv-circuit{--lv:#15803D;--lv-soft:#DCFCE7} .lv-pro{--lv:#6D28D9;--lv-soft:#EDE9FE}
:root[data-theme="dark"] .lv-spark{--lv:#FDA4AF;--lv-soft:#3B1520} :root[data-theme="dark"] .lv-circuit{--lv:#86EFAC;--lv-soft:#0F2A1B} :root[data-theme="dark"] .lv-pro{--lv:#C4B5FD;--lv-soft:#241A40}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lv-spark{--lv:#FDA4AF;--lv-soft:#3B1520} :root:not([data-theme="light"]) .lv-circuit{--lv:#86EFAC;--lv-soft:#0F2A1B} :root:not([data-theme="light"]) .lv-pro{--lv:#C4B5FD;--lv-soft:#241A40}}
.lv-pill{display:inline-block;font:700 .82rem/1 var(--body);letter-spacing:.04em;padding:7px 12px;border-radius:999px;background:var(--lv-soft);color:var(--lv);border:2px solid var(--lv)}
.level-card{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--ink);border-top:10px solid var(--lv)}
.level-card p{color:var(--muted)} .level-card .lv-more{margin-top:auto;font:600 1rem var(--display);color:var(--lv)}
.level-card:hover .lv-more{text-decoration:underline;text-underline-offset:4px}
.level-jump{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px} .level-jump a{text-decoration:none;font:600 .98rem var(--display);padding:10px 16px;min-height:44px;display:inline-flex;align-items:center;border-radius:999px;background:var(--lv-soft);color:var(--lv);border:2.5px solid var(--lv)}
.level-jump a:hover{background:var(--lv);color:var(--surface)}
.level-sec{padding:clamp(40px,6vw,72px) 0;scroll-margin-top:70px} .level-sec:nth-of-type(odd){background:var(--band);border-block:2.5px solid var(--edge)}
.level-head{max-width:760px;margin-bottom:26px} .level-head h2{margin:14px 0 10px} .level-head .chips{margin-top:16px}
.projects{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.projects li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start;background:var(--surface);border:2.5px solid var(--edge);box-shadow:4px 4px 0 var(--pop);border-radius:18px;padding:14px 16px}
.projects .pn{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font:700 1.05rem var(--display);background:var(--lv-soft);color:var(--lv);border:2px solid var(--lv)}
.projects b{display:block;font-family:var(--display);font-weight:600;font-size:1.08rem} .projects span:not(.pn){color:var(--muted);font-size:.96rem}
.safe-line{margin:22px 0 0;padding:14px 18px;border-radius:16px;border:2.5px dashed var(--lv);color:var(--muted);max-width:900px} .safe-line b{color:var(--ink)}

/* articles */
.art-share{display:flex;flex-direction:column;gap:6px;padding:18px;background:var(--band-2);border-bottom:2.5px solid var(--edge);text-decoration:none;color:var(--ink);min-height:140px;justify-content:center}
.art-share b{font:700 1.15rem/1.2 var(--display)} .art-share span:not(.art-tag){color:var(--muted);font-size:.95rem}
a.art-share:hover b{text-decoration:underline;text-underline-offset:3px}
.art-tag{align-self:flex-start;display:inline-block;font:700 .78rem/1 var(--body);letter-spacing:.04em;padding:6px 10px;border-radius:999px;background:var(--surface);color:var(--ink);border:2px solid var(--edge)}
.art-tag.level-spark{background:#FFE4E6;color:#9F1239;border-color:#9F1239} .art-tag.level-circuit{background:#DCFCE7;color:#166534;border-color:#166534} .art-tag.level-pro{background:#EDE9FE;color:#5B21B6;border-color:#5B21B6}
.art-card h3 a{text-decoration:none;color:var(--ink)} .art-card h3 a:hover{text-decoration:underline;text-underline-offset:3px;color:var(--brand)}
.reader{max-width:760px} .reader-title{font-size:clamp(2rem,5vw,3.1rem);margin:14px 0 8px}
.reader-body h2{font-size:1.5rem;margin:30px 0 10px;color:var(--ink)} .reader-body p,.reader-body li{font-size:1.08rem;color:var(--ink);max-width:68ch} .reader-body ul{padding-left:1.3em}
#a-like[aria-pressed="true"]{--bg-b:#BE123C;color:#fff}
@media (max-width:760px){.projects{grid-template-columns:minmax(0,1fr)}}
.reader{padding-top:clamp(28px,5vw,56px)}
/* article diagrams, code and cards */
.mtabs button small{display:block;font:500 .74rem/1.1 var(--body);opacity:.85}
.diagram{margin:26px 0;padding:10px;background:#FFFFFF;border:2.5px solid var(--edge);border-radius:20px;box-shadow:5px 5px 0 var(--pop)}
.diagram img{width:100%;height:auto;border-radius:12px} .diagram figcaption{color:#53607A;font-size:.92rem;text-align:center;padding:8px 6px 2px}
.reader-body pre{background:#0F172A;color:#E2E8F0;border-radius:16px;border:2.5px solid var(--edge);padding:16px 18px;overflow-x:auto;font:500 .9rem/1.55 ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;margin:18px 0}
.reader-body pre code{white-space:pre}
.art-card .pic{display:block;aspect-ratio:16/9;background:#FFFFFF;border-bottom:2.5px solid var(--edge);padding:8px}
.art-card .pic img{width:100%;height:100%;object-fit:contain}
.art-card{border-top:8px solid var(--lv,var(--edge))}
.kit-grid .part img{background:#FFFFFF}
.kit-foot{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;margin-top:34px} .kit-foot .safe-line{margin:0;flex:1 1 420px}
/* hero quick class picker (goes straight to the pre-filled enrol form) */
.level-pick{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 18px}
.level-pick span{font-weight:700;color:var(--ink);margin-right:4px}
.level-pick a{text-decoration:none;font:600 .95rem var(--display);padding:9px 14px;min-height:44px;display:inline-flex;align-items:center;border-radius:999px;background:var(--lv-soft);color:var(--lv);border:2.5px solid var(--lv)}
.level-pick a:hover{background:var(--lv);color:var(--surface)}
/* the Google button keeps Google's own look on hover (it never takes the orange .btn hover) */
.gbtn,.gbtn:hover{--bg-b:#FFFFFF;background:#FFFFFF;color:#1F1F1F} .gbtn:hover{background:#F1F3F4}

/* enquiry form: per-field errors, consent tick, success panel */
.field-err{display:block;color:#B42318;font-weight:600;margin-top:6px} .field-err:empty{display:none}
:root[data-theme="dark"] .field-err{color:#FDA29B}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .field-err{color:#FDA29B}}
.field [aria-invalid="true"]{border-color:#B42318}
.check{display:flex!important;gap:12px;align-items:flex-start;font-weight:500!important;cursor:pointer}
.check input{width:24px!important;height:24px;flex:none;margin:2px 0 0;accent-color:var(--brand)}
.check input:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
#send[aria-busy="true"]{opacity:.7;cursor:progress}
.sent:focus{outline:none} .sent h2{font-size:1.5rem;margin-bottom:10px}

/* contact list with icons (footer and enquiry page) */
.contact-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.contact-list a.contact-link{display:flex;align-items:center;gap:12px;min-height:44px;padding:6px 0;color:var(--ink);text-decoration:none}
.contact-list svg{width:22px;height:22px;flex:none;color:var(--brand)}
.contact-text{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.contact-text small{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.contact-text span{overflow-wrap:anywhere}
.contact-list a.contact-link:hover .contact-text span{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.contact-card .contact-list svg{width:40px;height:40px;padding:9px;border-radius:12px;background:var(--soft)}
footer .contact-list a.contact-link{padding:4px 0}