/* PlayBook Kids Studio – light, playful salepage theme (Fredoka + Nunito) */
:root{
  --ink:#1e293b;--ink2:#344054;--muted:#667085;--line:#e6ebf2;
  --teal:#0c769a;--pink:#d42f5c;--pink2:#ff7aa2;--sun:#ffd166;--sun2:#f5b301;--mint:#06d6a0;--purple:#6d4dff;
  --sky:#e8f6ff;--cream:#fffaf0;--blush:#fff3f6;--lav:#f4f1ff;--navy:#1e293b;
  --radius:24px;--sh:0 14px 40px rgba(30,41,59,.09);--sh2:0 6px 18px rgba(30,41,59,.07);
}
*{box-sizing:border-box}
html{font-synthesis:none}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink2);font:500 17px/1.7 'Plus Jakarta Sans',Nunito,"Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--teal)}
h1,h2,h3,h4{font-family:Poppins,Fredoka,"Baloo 2",'Plus Jakarta Sans',Nunito,sans-serif;color:var(--ink);line-height:1.1;margin:0 0 .45em;font-weight:800;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:clamp(34px,5vw,56px)}
h2{font-size:clamp(28px,4vw,46px)}
h3{font-size:22px}
p{margin:0 0 1em}
b,strong{color:var(--ink)}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.narrow{max-width:860px;margin:0 auto;padding:0 20px}
section{padding:80px 0}
.center{text-align:center}
.muted{color:var(--muted)}
.lead{font-size:19px;color:var(--ink2)}
.hl{color:var(--pink);background:linear-gradient(transparent 62%,#ffe08a 62%);padding:0 .08em}
.teal{color:var(--teal)}
.kicker,.pill-top{display:inline-flex;align-items:center;gap:8px;font:800 13px/1.2 'Plus Jakarta Sans',Nunito,sans-serif;letter-spacing:.12em;text-transform:uppercase;border-radius:99px;padding:10px 18px;margin-bottom:18px}
.kicker{color:#a15c00;background:#fff5d6;border:1.5px solid #ffd98a}
.pill-top{color:#fff;background:linear-gradient(90deg,#ef476f,#ff6b8b);box-shadow:0 8px 20px rgba(239,71,111,.3)}
.subhead{font:800 clamp(18px,2.2vw,22px)/1.4 Poppins,Fredoka,sans-serif;color:var(--pink);margin-bottom:16px}
/* top bars */
.launch{background:linear-gradient(90deg,#118ab2,#06a3c9);color:#fff;font-weight:800;font-size:15px;text-align:center;padding:10px 16px}
.launch b{color:#fff7c2}.launch a{color:#fff;margin-left:8px}
.ticker{background:#fff;color:var(--ink);overflow:hidden;white-space:nowrap;font:800 15px Poppins,Fredoka,sans-serif;padding:12px 0;border-bottom:1px solid var(--line)}
.ticker div{display:inline-block;animation:tick 40s linear infinite}
.ticker span{margin:0 24px}.ticker span::before{content:"★";color:var(--pink);margin-right:10px}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker div{animation:none}}
.wait{background:var(--pink);color:#fff;text-align:center;font:800 18px Poppins,Fredoka,sans-serif;padding:12px 16px}
.progress{max-width:560px;margin:0 auto 24px;display:flex;gap:6px}
.progress i{flex:1;height:10px;border-radius:99px;background:#d7e3ee}.progress i.on{background:var(--pink)}
.callout{display:inline-block;background:#fff;color:var(--pink);border:2px solid #ffc2d1;font:800 14px/1.3 'Plus Jakarta Sans',Nunito,sans-serif;letter-spacing:.06em;text-transform:uppercase;padding:9px 16px;border-radius:99px;margin-bottom:18px}
/* hero */
.hero{background:linear-gradient(180deg,#d9f1ff 0,#eef9ff 45%,#fff 100%);padding:56px 0 70px;position:relative;overflow:hidden}
.hero h1{color:var(--teal)}
.hero h1 em{font-style:normal;color:var(--pink);background:linear-gradient(transparent 60%,#ffe08a 60%)}
.hero .sub{font-size:18px;color:var(--ink2);max-width:820px;margin:0 auto 14px}
.hero .chips{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:18px 0 26px}
.hero .chips span{background:#fff;border:1px solid var(--line);border-radius:99px;padding:6px 14px;font-weight:800;font-size:15px;color:var(--ink);box-shadow:var(--sh2)}
.dots{display:none}
.hero-split{display:grid;grid-template-columns:1.05fr 1fr;gap:26px;margin-top:40px;text-align:left;align-items:start}
.vcard{background:#fff;border-radius:26px;box-shadow:var(--sh);padding:20px}
.vcard h3{margin:4px 6px 12px}
.vcard .note{font-size:14px;color:var(--muted);text-align:center;margin-top:10px}
.fcards{display:grid;gap:14px}
.fcard{display:grid;grid-template-columns:56px 1fr;gap:14px;background:#fff;border-radius:20px;padding:16px 18px;box-shadow:var(--sh2);border-bottom:5px solid var(--c,#bfe7ff)}
.fcard .ic{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:28px;background:var(--t,#e8f6ff)}
.fcard b{display:block;font:800 19px Poppins,Fredoka,sans-serif;color:var(--pc,var(--purple));margin-bottom:2px}
.fcard span{font-size:15.5px;color:var(--ink2)}
/* buttons */
.cta{display:inline-flex;flex-direction:column;align-items:center;gap:8px;margin-top:6px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:linear-gradient(90deg,#ef476f,#ff6b8b);color:#fff;font:800 21px/1 Poppins,Fredoka,sans-serif;letter-spacing:.02em;text-decoration:none;padding:21px 38px;border-radius:99px;box-shadow:0 12px 28px rgba(239,71,111,.35);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(239,71,111,.42)}
.btn:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.btn.gold{background:linear-gradient(90deg,#ffd166,#ffbe0b);color:#1e293b;box-shadow:0 12px 28px rgba(255,190,11,.35)}
.btn-note{font-weight:700;font-size:13.5px;color:var(--muted)}
.nothanks{display:block;margin-top:20px;color:var(--muted);font-size:15.5px}
/* device / shots */
.device{background:#fff;border-radius:16px;box-shadow:0 20px 50px rgba(30,41,59,.18);overflow:hidden;border:1px solid var(--line)}
.device .bar{height:30px;background:#f2f5f9;display:flex;align-items:center;gap:7px;padding:0 12px}
.device .bar i{width:11px;height:11px;border-radius:50%;background:#ff6159}.device .bar i:nth-child(2){background:#ffbd2e}.device .bar i:nth-child(3){background:#28c941}
.device .bar span{margin-left:10px;background:#fff;border-radius:7px;flex:1;height:18px;font:600 11px/18px 'Plus Jakarta Sans',Nunito;color:#667085;padding:0 10px}
.hero-shot{position:relative;max-width:1000px;margin:40px auto 0}
.hero-shot .float{display:none}
.shot{border-radius:16px;box-shadow:var(--sh);border:1px solid var(--line)}
/* sections tones */
.tone-cream{background:var(--cream)}.tone-blush{background:linear-gradient(180deg,#fff3f6,#fffaf0)}.tone-sky{background:var(--sky)}.tone-lav{background:var(--lav)}
.band{background:var(--lav)}
.box{background:#fff;border-radius:var(--radius);box-shadow:var(--sh);padding:30px 34px}
.yellowbox{background:linear-gradient(180deg,#fff6d8,#ffefbf);border-radius:var(--radius);padding:26px 30px;text-align:center}
.yellowbox h3{color:#b07a00;font-size:26px;margin:0}
/* grids & cards */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}.g5{grid-template-columns:repeat(5,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--sh2)}
.card h3{margin-bottom:.35em}
.tile{width:62px;height:62px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:30px;margin:0 auto 14px;background:var(--t,#e7fbf3)}
.ico{font-size:32px;line-height:1;margin-bottom:10px}
.game{background:#fff;border-radius:20px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--sh2)}
.game img{aspect-ratio:16/9;object-fit:cover;width:100%}
.game div{padding:14px 18px 18px}.game b{font:800 19px Poppins,Fredoka,sans-serif;display:block;color:var(--ink)}.game span{color:var(--muted);font-size:15.5px}
.tag{display:inline-block;font:800 12px 'Plus Jakarta Sans',Nunito;letter-spacing:.08em;text-transform:uppercase;background:#e6fbf4;color:#047857;border-radius:99px;padding:5px 12px;margin-top:8px}
/* dark CTA band */
.ctaband{background:radial-gradient(600px 200px at 50% 0,#334155,#1e293b);color:#fff;border-radius:28px;padding:40px 30px;text-align:center;max-width:860px;margin:0 auto;box-shadow:var(--sh)}
.ctaband h3{color:#fff;font-size:clamp(22px,2.6vw,28px);margin:0}
.ctaband h3 span{color:#ffd166}
.ctaband .btn{margin-top:22px}
/* traps */
.trap{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center;background:#fff;border-radius:28px;padding:32px;box-shadow:var(--sh);margin-bottom:26px}
.trap:nth-child(even) .tx{order:2}
.trap .lab{display:inline-block;font:800 12px 'Plus Jakarta Sans',Nunito;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--lc,#1e293b);border-radius:8px;padding:6px 12px;margin-bottom:12px}
.chips-x{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.chips-x span{background:#fff1f3;color:#c01048;border-radius:12px;padding:10px 12px;font-weight:800;font-size:14.5px}
.chips-x span::before{content:"✕ ";}
.trap .art{border-radius:20px;min-height:220px;display:flex;align-items:center;justify-content:center;font-size:90px;background:var(--ab,#eef6ff);overflow:hidden}
.trap .art img{width:100%;height:100%;object-fit:cover}
/* letter */
.letter{background:#fff;border-radius:22px;box-shadow:var(--sh);padding:40px 46px;position:relative;overflow:hidden}
.letter::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:repeating-linear-gradient(135deg,#ef476f 0 22px,#fff 22px 34px,#118ab2 34px 56px,#fff 56px 68px)}
.letter .dear{font:700 34px "Caveat",cursive;color:var(--teal);margin:6px 0 10px}
.letter .label{display:inline-block;font:800 12px 'Plus Jakarta Sans',Nunito;letter-spacing:.1em;text-transform:uppercase;background:#f2f4f7;color:var(--muted);border-radius:99px;padding:5px 12px}
.letter mark{background:#ffe08a;color:var(--ink);padding:0 .15em;font-weight:800}
/* myth / truth */
.myth{background:#fff1f3;border:1px solid #ffd0d8;border-radius:16px;padding:16px 20px;margin:0 0 14px;font-weight:700;color:var(--ink)}
.myth b{color:#c01048}
.truth{background:#ecfdf5;border:1px solid #b7efd9;border-radius:16px;padding:16px 20px;margin:0 0 22px;font-weight:700;color:var(--ink)}
.truth b{color:#047857}
.secret-h{display:flex;gap:16px;align-items:flex-start;margin-bottom:18px}
.secret-h .n{flex:none;background:var(--pink);color:#fff;font:800 14px 'Plus Jakarta Sans',Nunito;letter-spacing:.1em;text-transform:uppercase;border-radius:10px;padding:8px 12px;margin-top:6px}
.domino{background:#fff;border:3px dashed #ffb3c6;border-radius:24px;padding:30px 34px;font:800 clamp(21px,2.5vw,26px)/1.4 Poppins,Fredoka,sans-serif;text-align:center;color:var(--ink)}
.domino small{display:block;font:800 13px 'Plus Jakarta Sans',Nunito;letter-spacing:.14em;text-transform:uppercase;color:var(--pink);margin-bottom:10px}
/* steps & flow */
.step{display:grid;grid-template-columns:1fr 1.25fr;gap:40px;align-items:center;margin-bottom:50px}
.step:nth-child(even) .txt{order:2}
.step .num{display:inline-flex;width:48px;height:48px;border-radius:14px;background:var(--teal);color:#fff;font:800 22px Poppins,Fredoka;align-items:center;justify-content:center;margin-bottom:12px}
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.flow figure{margin:0}.flow img{border-radius:14px;box-shadow:var(--sh2)}.flow figcaption{font:800 15px Poppins,Fredoka,sans-serif;color:var(--ink);text-align:center;margin-top:8px}
.pipe{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:36px}
.pipe .card{text-align:center;position:relative;padding:22px 14px}
.pipe .card:not(:last-child)::after{content:"→";position:absolute;right:-15px;top:42%;font-size:22px;color:var(--pink);font-weight:900}
.pipe b{display:block;font:800 18px Poppins,Fredoka,sans-serif;color:var(--ink);margin:6px 0}.pipe span{font-size:14.5px;color:var(--muted)}
.flags{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:24px 0}
.flags span{background:#fff;border:1px solid var(--line);border-radius:99px;padding:8px 16px;font-weight:800;color:var(--ink)}
/* compare + tables */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.vs ul{list-style:none;padding:0;margin:0}.vs li{padding:10px 0 10px 32px;position:relative;border-bottom:1px dashed var(--line)}
.vs .bad li::before{content:"✕";position:absolute;left:4px;color:#e5304f;font-weight:900}
.vs .good{background:#f1fdf8;border-color:#b7efd9}.vs .good li::before{content:"✓";position:absolute;left:4px;color:#059669;font-weight:900}
table.math{width:100%;border-collapse:collapse;background:#fff;border-radius:20px;overflow:hidden;box-shadow:var(--sh)}
table.math th,table.math td{text-align:left;padding:15px 18px;border-bottom:1px solid var(--line);vertical-align:top}
table.math th{background:var(--navy);color:#fff;font:800 15px Poppins,Fredoka,sans-serif;letter-spacing:.03em}
table.math tr.us td{background:#fff8e1;font-weight:800;color:var(--ink)}
.tblwrap{overflow-x:auto}
/* stack / price */
.price{max-width:680px;margin:0 auto;background:#fff;border-radius:30px;box-shadow:0 26px 70px rgba(30,41,59,.16);overflow:hidden}
.price .head{background:radial-gradient(500px 200px at 80% 0,#7c3aed,transparent 70%),linear-gradient(120deg,#1e1b4b,#4c1d95);color:#ffd166;text-align:center;padding:30px 20px 26px;font:800 clamp(24px,3vw,32px) Poppins,Fredoka}
.price .head small{display:block;color:#e9e5ff;font:600 16px 'Plus Jakarta Sans',Nunito;margin-top:6px}
.price .body{padding:26px 30px 32px;background:#f8fafc}
.stack{width:100%;border-collapse:separate;border-spacing:0 10px;font-size:16.5px}
.stack td{background:#fff;padding:14px 16px;vertical-align:middle}
.stack td:first-child{border-radius:14px 0 0 14px;font-weight:800;color:var(--ink)}
.stack td:first-child::before{content:"✓";display:inline-flex;width:24px;height:24px;border-radius:7px;background:#d1fae5;color:#059669;font-size:14px;align-items:center;justify-content:center;margin-right:10px;font-weight:900;vertical-align:middle}
.stack td:last-child{border-radius:0 14px 14px 0;text-align:right;white-space:nowrap;font-weight:800;color:#64748b;font-variant-numeric:tabular-nums}
.stack small{display:block;color:var(--muted);font-size:13.5px;font-weight:600;margin:3px 0 0 34px}
.total{display:flex;justify-content:center;align-items:center;gap:12px;background:linear-gradient(180deg,#fff6d8,#ffe7a3);border:2px dashed #f5b301;border-radius:16px;padding:16px;margin:14px 0 18px;font:800 20px Poppins,Fredoka;color:#8a5a00}
.total s{color:#e5304f}
.amt{text-align:center;margin:10px 0 18px}
.amt .deal{display:inline-block;background:var(--navy);color:#fff;font:800 12.5px 'Plus Jakarta Sans',Nunito;letter-spacing:.12em;text-transform:uppercase;border-radius:99px;padding:6px 14px}
.amt s{color:var(--muted);font-size:24px;margin-right:10px}
.amt b{display:block;font:800 78px/1.05 Poppins,Fredoka;color:var(--ink);margin-top:8px}
.amt b sup{font-size:34px;color:var(--teal);vertical-align:top;position:relative;top:10px}
.save{display:inline-block;background:#e6fbf4;color:#047857;font-weight:800;border-radius:99px;padding:5px 12px;font-size:14.5px}
.secure{font-size:14px;color:var(--muted);margin-top:10px}
/* policy */
.policy{background:linear-gradient(180deg,#effdf6,#fff);border:2px dashed #7be0b8;border-radius:28px;padding:56px 34px 32px;text-align:center;position:relative}
.policy .seal{position:absolute;left:50%;top:-34px;transform:translateX(-50%);width:68px;height:68px;border-radius:50%;background:#10b981;color:#fff;display:flex;align-items:center;justify-content:center;font-size:30px;box-shadow:0 0 0 8px #d1fae5}
.policy h3{font-size:clamp(24px,3vw,32px);color:#065f46;text-transform:uppercase}
/* bonus */
.bonus-wrap[hidden]{display:none!important}
.bcard{position:relative;background:#fff;border-radius:24px;box-shadow:var(--sh);padding:26px;overflow:hidden;text-align:center}
.bcard .rib{position:absolute;right:-34px;top:18px;transform:rotate(45deg);background:var(--rc,#2563eb);color:#fff;font:800 12px 'Plus Jakarta Sans',Nunito;letter-spacing:.08em;padding:6px 40px}
/* faq */
details{background:#fff;border:1px solid var(--line);border-radius:18px;padding:0 22px;margin-bottom:12px;box-shadow:var(--sh2)}
summary{cursor:pointer;font:800 18.5px Poppins,Fredoka,sans-serif;color:var(--ink);padding:18px 30px 18px 0;list-style:none;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:0;top:12px;font-size:28px;color:var(--pink)}
details[open] summary::after{content:"–"}
/* fit / paths */
.fit .card h3{display:flex;align-items:center;gap:10px}
.fit ul{padding-left:20px;margin:0}.fit li{margin:8px 0}
.paths{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.transition{font:800 22px Poppins,Fredoka,sans-serif;text-align:center;color:var(--teal);margin:0 auto 16px;max-width:760px}
.big-quote{font:800 clamp(24px,3.2vw,34px)/1.3 Poppins,Fredoka,sans-serif;text-align:center;color:var(--ink);max-width:860px;margin:0 auto}
/* side nav */
.sidenav{position:fixed;right:max(14px,env(safe-area-inset-right,0px));top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;z-index:20}
.sidenav a{width:46px;height:46px;border-radius:50%;background:#fff;box-shadow:var(--sh2);display:flex;align-items:center;justify-content:center;font-size:19px;text-decoration:none;border:1px solid var(--line)}
.sidenav a.cart{background:var(--pink);color:#fff;border-color:var(--pink)}
/* footer */
footer{background:#0f172a;color:#94a3b8;font-size:14px;padding:46px 0;text-align:center}
footer a{color:#cbd5e1}
.disc{max-width:900px;margin:0 auto 18px;font-size:13px;line-height:1.6}
@media (max-width:900px){
  section{padding:56px 0}
  .hero-split,.trap,.vs,.step,.g2,.paths{grid-template-columns:1fr}
  .trap:nth-child(even) .tx,.step:nth-child(even) .txt{order:0}
  .g3,.g4,.g5{grid-template-columns:repeat(2,1fr)}
  .pipe,.flow{grid-template-columns:repeat(2,1fr)}.pipe .card::after{display:none}
  .sidenav{display:none}
  .letter{padding:34px 22px}
}
@media (max-width:560px){
  body{font-size:16.5px}
  .g3,.g4,.g5{grid-template-columns:1fr}
  .btn{font-size:18px;padding:18px 24px}
  .price .body{padding:20px 14px 26px}
  .chips-x{grid-template-columns:1fr}
  .trap{padding:22px}
}

/* ===== polish pass (icons, browser surfaces, measure) ===== */
svg.i{width:1em;height:1em;flex:none;vertical-align:-.14em}
.fcard .ic svg.i{width:28px;height:28px;color:var(--pc,var(--teal))}
.tile svg.i{width:30px;height:30px;color:var(--teal)}
.ico svg.i{width:32px;height:32px;color:var(--pink)}
.trap .art svg.i{width:96px;height:96px;color:var(--lc,var(--teal));opacity:.85;stroke-width:1.6}
.policy .seal{box-shadow:none;border:8px solid #d1fae5;background-clip:padding-box}
.policy .seal svg.i{width:30px;height:30px}
.btn svg.i,.btn-play svg.i{width:.95em;height:.95em}
h2 svg.i,h3 svg.i{color:var(--pink);margin-right:.25em}
.kicker svg.i,.pill-top svg.i{width:1.1em;height:1.1em}
.sidenav svg.i,nav svg.i{width:20px;height:20px}
.nochips span::before{content:"";display:inline-block;width:.8em;height:.8em;margin-right:8px;background:var(--pink);-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M18%206%206%2018%22%20/%3E%20%3Cpath%20d%3D%22m6%206%2012%2012%22%20/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M18%206%206%2018%22%20/%3E%20%3Cpath%20d%3D%22m6%206%2012%2012%22%20/%3E%3C/svg%3E") center/contain no-repeat;vertical-align:-.05em}
.lead,.hero .sub{max-width:68ch;margin-left:auto;margin-right:auto}
::selection{background:#ffe08a;color:var(--ink)}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:8px}
html{accent-color:var(--pink);scrollbar-color:#9fd8ee #eef8fd;caret-color:var(--pink)}
a{text-underline-offset:3px}
summary::marker{color:var(--pink)}
.uses{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0 40px;max-width:980px;margin-left:auto;margin-right:auto}
.use{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--line)}
.use .ui{flex:none;width:48px;height:48px;border-radius:14px;background:var(--blush);color:var(--pink);display:flex;align-items:center;justify-content:center}
.use:nth-child(4n+2) .ui{background:var(--sky);color:var(--teal)}.use:nth-child(4n+3) .ui{background:#fff6dc;color:#b07a00}.use:nth-child(4n) .ui{background:#e9fbf4;color:#059669}
.use .ui svg.i{width:24px;height:24px}
.use h3{font-size:19px;margin:2px 0 4px}.use p{font-size:16px}