/* Explainerly hub — shared styles. House style matches football/ (navy outlines, hard offset shadows). */
:root{
  --navy:#1d2b53;--navy-2:#2a3b6e;--gold:#ffc93c;--cream:#fff6e5;--red:#ff5a4e;--red-dark:#d93b30;--blue:#2f6fed;--teal:#2ec4b6;--green:#53b95a;--orange:#ff8a3d;--purple:#7b5cff;--pink:#ff4fa3;
  --ink:#1d2b53;--muted:#4a5578;--radius:22px;--shadow:6px 6px 0 var(--navy);--shadow-sm:4px 4px 0 var(--navy);
  --head:'Lilita One',Impact,'Arial Black',sans-serif;--body:Nunito,system-ui,-apple-system,'Segoe UI',sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--cream);background-image:radial-gradient(circle at 1px 1px,rgba(29,43,83,.09) 1.6px,transparent 0);background-size:24px 24px;font-family:var(--body);font-weight:600;color:var(--ink);line-height:1.55;font-size:17px;overflow-x:hidden}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--blue);font-weight:800;text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--navy)}
:focus-visible{outline:4px solid var(--blue);outline-offset:3px;border-radius:8px}
h1,h2,h3,h4{font-family:var(--head);font-weight:400;letter-spacing:.4px;line-height:1.12;margin:0 0 .5em;color:var(--navy)}
h1{font-size:clamp(34px,5.4vw,60px)}
h2{font-size:clamp(28px,3.6vw,40px)}
h3{font-size:clamp(20px,2.2vw,24px)}
p{margin:0 0 1em}
.skip{position:absolute;left:-9999px;top:8px;background:var(--gold);color:var(--navy);padding:8px 14px;border:3px solid var(--navy);border-radius:12px;z-index:100}
.skip:focus{left:8px}
.wrap{width:min(1180px,100% - 32px);margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,246,229,.94);backdrop-filter:blur(6px);border-bottom:4px solid var(--navy)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:68px}
.logo{display:inline-flex;align-items:center;gap:2px;font-family:var(--head);font-size:28px;color:var(--navy);text-decoration:none;letter-spacing:.5px;font-weight:400}
.logo .badge{background:var(--red);color:#fff;border:4px solid var(--navy);border-radius:14px;padding:0 9px;transform:rotate(-4deg);box-shadow:3px 3px 0 var(--navy);margin-right:3px;line-height:1.25}
.logo:hover{color:var(--navy)}
.nav-toggle{display:none;background:#fff;border:3px solid var(--navy);border-radius:12px;box-shadow:3px 3px 0 var(--navy);width:46px;height:42px;cursor:pointer;padding:0;align-items:center;justify-content:center}
.nav-toggle .bars,.nav-toggle .bars::before,.nav-toggle .bars::after{display:block;width:22px;height:3px;background:var(--navy);border-radius:3px;position:relative;content:""}
.nav-toggle .bars::before{position:absolute;top:-7px}.nav-toggle .bars::after{position:absolute;top:7px}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:6px}
.site-nav a{display:block;color:var(--navy);text-decoration:none;font-weight:900;font-size:16px;padding:8px 12px;border-radius:12px}
.site-nav a:hover,.site-nav a[aria-current="page"]{background:#fff;box-shadow:inset 0 0 0 3px var(--navy)}
.site-nav a.yt{background:var(--red);color:#fff;border:3px solid var(--navy);box-shadow:3px 3px 0 var(--navy);padding:6px 12px;margin-left:6px;color:#fff}
.site-nav a.yt:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--navy)}
@media (max-width:820px){
  .nav-toggle{display:inline-flex}
  .site-nav{position:absolute;left:0;right:0;top:100%;background:var(--cream);border-bottom:4px solid var(--navy);display:none;padding:10px 16px 16px}
  .site-nav.open{display:block}
  .site-nav ul{flex-direction:column;align-items:stretch;gap:4px}
  .site-nav a{font-size:18px;padding:10px 12px}
  .site-nav a.yt{margin:6px 0 0;text-align:center}
}

/* ---------- buttons, chips ---------- */
.btn{font-family:var(--head);font-weight:400;font-size:19px;letter-spacing:.4px;color:var(--navy);background:#fff;border:4px solid var(--navy);border-radius:16px;padding:10px 18px;cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .08s,box-shadow .08s;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;line-height:1.2;text-align:center}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--navy);color:var(--navy)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--navy)}
.btn.primary{background:var(--gold)}
.btn.teal{background:var(--teal)}
.btn.red{background:var(--red);color:#fff}.btn.red:hover{color:#fff}
.btn.lg{font-size:22px;padding:13px 24px}
.btn svg{width:22px;height:22px;flex:none}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.chip{display:inline-flex;align-items:center;gap:6px;font-weight:900;font-size:13px;letter-spacing:.3px;text-transform:uppercase;background:#fff;color:var(--navy);border:3px solid var(--navy);border-radius:999px;padding:2px 10px;line-height:1.5;white-space:nowrap}
.status-live{background:var(--green)}
.status-soon{background:var(--gold)}
.status-idea{background:#fff}
.status-live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--navy);animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.2}}
.eyebrow{display:inline-block;font-weight:900;text-transform:uppercase;letter-spacing:1.2px;font-size:14px;background:var(--navy);color:#fff;border-radius:10px;padding:3px 12px;margin-bottom:14px;transform:rotate(-2deg)}

/* ---------- sections ---------- */
main{display:block}
[id]{scroll-margin-top:86px}
.section{padding:56px 0}
.section:not(.band)+.section:not(.band){padding-top:8px}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.section-head h2{margin:0}
.section-head p{margin:0;color:var(--muted);font-weight:800;max-width:52ch}
.card{background:#fff;border:4px solid var(--navy);border-radius:var(--radius);box-shadow:var(--shadow);position:relative}
.lead{font-size:clamp(18px,2vw,21px);font-weight:800;color:var(--muted);max-width:56ch}

/* hero */
.hero{padding:44px 0 28px}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:28px;align-items:center}
.hero h1 span{color:var(--red)}
.hero .lead{margin-bottom:26px}
.hero-art{width:100%;max-width:600px;margin-inline:auto}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr}.hero-art{max-width:460px;order:-1}}

/* ad slots — unobtrusive, clearly labelled */
.ad-slot{display:flex;align-items:center;justify-content:center;min-height:100px;width:min(970px,100%);margin:24px auto;border:2px dashed rgba(29,43,83,.3);border-radius:14px;background:rgba(255,255,255,.55);color:#5d6788;font-size:12px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase}
.ad-wrap{width:min(1180px,100% - 32px);margin-inline:auto}

/* featured / latest */
.feature{display:grid;grid-template-columns:1.2fr 1fr;overflow:hidden}
.feature-media{position:relative;background:var(--green);border-right:4px solid var(--navy);display:block;min-height:240px}
.feature-media img{width:100%;height:100%;object-fit:cover}
.play-badge{position:absolute;inset:0;margin:auto;width:88px;height:88px;border-radius:50%;background:var(--gold);border:5px solid var(--navy);box-shadow:var(--shadow-sm);display:grid;place-items:center;transition:transform .15s}
.play-badge::after{content:"";border-left:28px solid var(--red);border-top:17px solid transparent;border-bottom:17px solid transparent;margin-left:8px}
.feature-media:hover .play-badge{transform:scale(1.08)}
.feature-body{padding:28px}
.feature-body .chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
@media (max-width:820px){.feature{grid-template-columns:1fr}.feature-media{border-right:0;border-bottom:4px solid var(--navy)}}

/* category grid */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px}
.cat-card{display:flex;flex-direction:column;text-decoration:none;color:var(--navy);overflow:hidden;transition:transform .12s,box-shadow .12s}
.cat-card:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--navy);color:var(--navy)}
.cat-card .art{aspect-ratio:16/10;border-bottom:4px solid var(--navy);background:var(--c,#eee);overflow:hidden}
.cat-card .art img{width:100%;height:100%;object-fit:cover}
.cat-card .body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.cat-card h3{margin:0;font-size:24px}
.cat-card p{margin:0;font-weight:700;color:var(--muted);font-size:15.5px}
.cat-card .meta{margin-top:auto;padding-top:8px;display:flex;gap:8px;flex-wrap:wrap}
.cat-card .stripe{height:10px;background:var(--c)}

/* how it works */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:step}
.step{padding:26px 22px 22px}
.step .num{position:absolute;top:-22px;left:18px;width:48px;height:48px;border-radius:50%;background:var(--gold);border:4px solid var(--navy);display:grid;place-items:center;font-family:var(--head);font-size:24px;box-shadow:3px 3px 0 var(--navy)}
.step .ico{width:64px;height:64px;margin:10px 0 10px}
.step p{margin:0;color:var(--muted);font-weight:700}
@media (max-width:820px){.steps{grid-template-columns:1fr;gap:36px}}

/* commission teaser / dark band */
.band{background:var(--navy);color:#fff;border-top:4px solid var(--navy);border-bottom:4px solid var(--navy);background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.08) 1.6px,transparent 0);background-size:24px 24px}
.band h2,.band h3{color:#fff}
.band p{color:#dfe5f5}
.band .wrap{display:grid;grid-template-columns:1.4fr 1fr;gap:28px;align-items:center}
.band .price{font-family:var(--head);font-size:clamp(34px,4vw,48px);color:var(--gold);line-height:1}
.band .price small{display:block;font-family:var(--body);font-weight:800;font-size:15px;color:#dfe5f5;margin-top:6px}
.band a:not(.btn){color:var(--gold)}
@media (max-width:820px){.band .wrap{grid-template-columns:1fr}}

/* subscribe */
.subscribe{display:grid;grid-template-columns:1fr 1fr;gap:28px;padding:30px;align-items:center}
.sub-form{display:flex;gap:10px;flex-wrap:wrap}
.sub-form label{width:100%;font-weight:900}
.sub-form input{flex:1 1 200px;min-width:0;font:800 17px var(--body);color:var(--navy);padding:11px 14px;border:4px solid var(--navy);border-radius:14px;background:var(--cream)}
.sub-form input:focus-visible{outline:4px solid var(--blue);outline-offset:2px}
.form-note{font-size:14px;color:var(--muted);margin:10px 0 0;font-weight:700;min-height:1.5em}
@media (max-width:820px){.subscribe{grid-template-columns:1fr;padding:22px}}

/* search */
.search-box{padding:22px;margin-bottom:28px}
.search-box label{display:block;font-family:var(--head);font-size:24px;margin-bottom:10px}
.search-row{display:flex;gap:10px;flex-wrap:wrap}
.search-row input{flex:1 1 240px;min-width:0;font:800 18px var(--body);color:var(--navy);padding:12px 16px 12px 46px;border:4px solid var(--navy);border-radius:16px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d2b53' stroke-width='3' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='7'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E") no-repeat 14px center/22px}
.filter-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.filter-chips button{font:900 14px var(--body);color:var(--navy);background:#fff;border:3px solid var(--navy);border-radius:999px;padding:5px 14px;cursor:pointer}
.filter-chips button[aria-pressed="true"]{background:var(--navy);color:#fff}
.search-results{margin-top:18px}
.search-results[hidden]{display:none}
.search-count{font-weight:900;margin:0 0 12px}

/* topic cards */
.topic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}
.topic-card{display:flex;flex-direction:column;gap:8px;padding:18px 18px 16px;text-decoration:none;color:var(--navy);box-shadow:var(--shadow-sm);border-top:12px solid var(--c,var(--navy));transition:transform .12s,box-shadow .12s}
.topic-card:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--navy);color:var(--navy)}
.topic-card h3{font-size:20px;margin:0}
.topic-card p{margin:0;font-weight:700;color:var(--muted);font-size:15px}
.topic-card .meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:6px;align-items:center}
.topic-card .meta .small{font-size:13px;font-weight:800;color:var(--muted)}
.topic-card .cat-name{font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.8px;color:var(--muted)}
.topic-card.is-live{background:#f0fbef}

/* page header (category / topic / static pages) */
.crumbs{font-size:14px;font-weight:800;margin:22px auto 0;color:var(--muted)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.crumbs li+li::before{content:"›";margin-right:6px;color:var(--muted)}
.crumbs a{color:var(--navy)}
.page-hero{padding:22px 0 34px}
.page-hero .wrap{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}
.page-hero .art-frame{overflow:hidden;background:var(--c,#fff)}
.page-hero .art-frame img{width:100%}
.stats{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
@media (max-width:820px){.page-hero .wrap{grid-template-columns:1fr}.page-hero .art-frame{order:-1}}
.simple-hero{padding:22px 0 10px}
.simple-hero .lead{margin-bottom:0}

/* topic page */
.topic-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:30px;align-items:start;padding-bottom:20px}
.video-frame{overflow:hidden;aspect-ratio:16/9;background:var(--navy)}
.video-frame iframe{width:100%;height:100%;border:0;display:block}
.video-soon{position:relative;width:100%;height:100%}
.video-soon img{width:100%;height:100%;object-fit:cover;filter:saturate(.85)}
.video-soon .overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(29,43,83,.74);color:#fff;text-align:center;padding:16px}
.video-soon .overlay strong{font-family:var(--head);font-weight:400;font-size:clamp(22px,3.4vw,38px);text-shadow:3px 3px 0 var(--navy);letter-spacing:.5px}
.video-soon .overlay span{font-weight:800;font-size:clamp(14px,1.6vw,17px);max-width:42ch}
.topic-actions{display:flex;flex-wrap:wrap;gap:14px;margin:24px 0}
.side-card{padding:20px}
.side-card h2{font-size:24px}
.side-card dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 12px;font-weight:800}
.side-card dt{color:var(--muted)}
.side-card dd{margin:0}
.side-card+.side-card{margin-top:22px}
.interactive-card{background:var(--gold)}
.interactive-card p{font-weight:800}
.prose{max-width:72ch}
.prose h2{margin-top:1.4em}
.prose ul,.prose ol{padding-left:1.3em}
.prose li{margin-bottom:.4em}
@media (max-width:900px){.topic-layout{grid-template-columns:1fr}}

/* suggest CTA */
.cta{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:26px 28px;background:var(--teal)}
.cta h2{margin:0 0 4px;font-size:clamp(24px,3vw,32px)}
.cta p{margin:0;font-weight:800}

/* hire page */
.packages{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.pkg{padding:26px 22px;display:flex;flex-direction:column;gap:10px}
.pkg.featured{background:var(--gold);transform:translateY(-8px)}
.pkg .tag{position:absolute;top:-16px;right:18px;background:var(--red);color:#fff;border:3px solid var(--navy);border-radius:12px;padding:2px 10px;font-weight:900;font-size:13px;text-transform:uppercase;letter-spacing:.6px}
.pkg .amount{font-family:var(--head);font-size:46px;line-height:1}
.pkg .amount small{font-family:var(--body);font-size:15px;font-weight:800;color:var(--muted)}
.pkg ul{list-style:none;padding:0;margin:6px 0 14px;display:grid;gap:8px;font-weight:700}
.pkg li{padding-left:28px;position:relative}
.pkg li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;background:var(--green);border:3px solid var(--navy)}
.pkg .btn{margin-top:auto}
@media (max-width:900px){.packages{grid-template-columns:1fr}.pkg.featured{transform:none}}
.features{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px}
.feat{padding:20px}
.feat .dot{width:46px;height:46px;border-radius:14px;border:4px solid var(--navy);display:grid;place-items:center;font-family:var(--head);font-size:22px;margin-bottom:10px;background:var(--c,var(--gold))}
.feat p{margin:0;color:var(--muted);font-weight:700}
.process{list-style:none;padding:0;margin:0;display:grid;gap:16px;counter-reset:proc}
.process li{counter-increment:proc;display:grid;grid-template-columns:56px 1fr;gap:16px;align-items:start;padding:18px}
.process li::before{content:counter(proc);width:52px;height:52px;border-radius:50%;background:var(--teal);border:4px solid var(--navy);display:grid;place-items:center;font-family:var(--head);font-size:24px}
.process h3{margin:0 0 4px}
.process p{margin:0;color:var(--muted);font-weight:700}
.faq details{padding:16px 20px;margin-bottom:14px}
.faq summary{font-family:var(--head);font-size:21px;cursor:pointer;list-style-position:outside}
.faq details p{margin:10px 0 0;font-weight:700;color:var(--muted)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
@media (max-width:820px){.two-col{grid-template-columns:1fr}}

/* footer */
.site-footer{margin-top:56px;background:var(--navy);color:#dfe5f5;border-top:6px solid var(--gold);padding:44px 0 26px}
.site-footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px}
.site-footer h2{color:#fff;font-size:20px;margin-bottom:10px}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.site-footer a{color:#fff;font-weight:800;text-decoration:none}
.site-footer a:hover{color:var(--gold);text-decoration:underline}
.site-footer .logo{color:#fff}
.site-footer p{font-weight:700}
.site-footer .legal{border-top:2px solid rgba(255,255,255,.18);margin-top:28px;padding-top:18px;font-size:14px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
@media (max-width:820px){.site-footer .cols{grid-template-columns:1fr 1fr}.site-footer .cols>:first-child{grid-column:1/-1}}

/* 404 */
.notfound{text-align:center;padding:60px 0}
.notfound .big{font-family:var(--head);font-size:clamp(90px,18vw,180px);line-height:1;color:var(--red);text-shadow:6px 6px 0 var(--navy)}
.notfound .btn-row{justify-content:center}

.band .btn{box-shadow:4px 4px 0 rgba(255,255,255,.4)}
.faq summary{padding-left:4px}
.art-card{border:4px solid var(--navy);border-radius:var(--radius);box-shadow:var(--shadow);background:#fff}
@media (max-width:480px){.video-soon .overlay span{display:none}}
.video-frame video{width:100%;height:100%;display:block;background:#000;object-fit:contain}

/* homepage: two goals, library, ideas, commission */
.goals{display:grid;grid-template-columns:1.3fr 1fr;gap:20px;margin-top:26px}
.goal{padding:24px 26px;position:relative}.goal h2{margin:0 0 6px;font-size:clamp(26px,3vw,34px)}.goal p{margin:0 0 14px}.goal small{display:block;margin-top:10px;color:var(--muted);font-weight:700}
.goal-make{background:#fff}.goal-watch{background:#e8fbf9}
.goal-num{position:absolute;top:-16px;left:22px;width:36px;height:36px;border-radius:50%;background:var(--gold);border:4px solid var(--navy);display:grid;place-items:center;font-family:var(--head);font-size:18px}
.lib-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:22px}
.feature.lib{grid-template-columns:1fr}.feature.lib .feature-media img{aspect-ratio:16/9;object-fit:cover;width:100%}.feature.lib h3{font-size:24px;margin:6px 0}
.idea-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;align-items:start}
.idea{padding:0}.idea summary{list-style:none;cursor:pointer;display:flex;gap:12px;align-items:center;padding:16px 18px}.idea summary::-webkit-details-marker{display:none}
.idea summary b{display:block;font-family:var(--head);font-weight:400;font-size:20px}.idea summary small{display:block;color:var(--muted);font-weight:700}
.idea summary::after{content:'+';margin-left:auto;font-family:var(--head);font-size:26px;color:var(--navy)}.idea[open] summary::after{content:'–'}
.idea-icon{font-size:30px}.idea ul{margin:0;padding:0 18px 4px 46px}.idea li{margin:4px 0}.idea .small-btn{margin:10px 18px 16px;font-size:16px;padding:8px 14px}
.steps.four{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.commission{display:grid;grid-template-columns:1.6fr 1fr;gap:24px;align-items:center;padding:28px}.commission h2{margin:0 0 6px}
.ticks{list-style:none;padding:0;margin:10px 0;display:grid;grid-template-columns:1fr 1fr;gap:4px 18px}.ticks li::before{content:'✓ ';color:var(--green);font-weight:900}
.big-price{text-align:center}
.packages.one{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));max-width:820px}
@media (max-width:800px){.goals,.commission{grid-template-columns:1fr}.ticks{grid-template-columns:1fr}}
.commission .price{font-family:var(--head);font-weight:400;font-size:clamp(52px,7vw,80px);line-height:1;color:var(--navy);display:flex;flex-direction:column;align-items:center;gap:8px}.commission .price small{font-family:var(--body);font-size:15px;font-weight:800;color:var(--muted)}

/* ===== homepage v3: animated, light on text ===== */
.hx{position:relative;overflow:hidden;background:linear-gradient(120deg,#ffc93c 0%,#ff8a3d 45%,#ff4fa3 100%);border-bottom:4px solid var(--navy);padding:56px 0 64px}
.hx-blobs i{position:absolute;border-radius:50%;filter:blur(2px);opacity:.35;animation:float 9s ease-in-out infinite}
.hx-blobs i:nth-child(1){width:380px;height:380px;background:#2ec4b6;left:-120px;top:-140px}
.hx-blobs i:nth-child(2){width:260px;height:260px;background:#7b5cff;right:8%;bottom:-120px;animation-delay:-3s}
.hx-blobs i:nth-child(3){width:160px;height:160px;background:#fff;left:42%;top:12%;animation-delay:-6s;opacity:.25}
@keyframes float{50%{transform:translate(18px,-22px) scale(1.06)}}
.hx-grid{position:relative;display:grid;grid-template-columns:1fr 1.05fr;gap:36px;align-items:center}
.hx-title{font-family:var(--head);font-weight:400;font-size:clamp(46px,7vw,92px);line-height:.95;color:#fff;margin:0;text-shadow:5px 5px 0 var(--navy);-webkit-text-stroke:2px var(--navy)}
.hx-title span{display:inline-block;opacity:0;transform:translateY(40px) rotate(-4deg);animation:wordIn .7s cubic-bezier(.2,1.4,.4,1) forwards}
.hx-title span:nth-child(2){animation-delay:.15s}.hx-title span:nth-child(3){animation-delay:.3s}
.hx-title .hl{color:var(--gold);-webkit-text-stroke:2px var(--navy)}
@keyframes wordIn{to{opacity:1;transform:none}}
.hx-sub{font-size:clamp(19px,2vw,24px);font-weight:800;color:var(--navy);margin:20px 0 26px;opacity:0;animation:fadeUp .6s .55s forwards}
.hx .btn-row{opacity:0;animation:fadeUp .6s .7s forwards;align-items:center}
.hx-small{display:block;margin-top:14px;font-weight:800;color:var(--navy);opacity:0;animation:fadeUp .6s .85s forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.btn.xl{font-size:24px;padding:16px 28px;border-radius:20px;box-shadow:6px 6px 0 var(--navy)}
.btn.xl:hover{transform:translate(-2px,-2px) rotate(-1deg);box-shadow:8px 8px 0 var(--navy)}
.hx-link{font-weight:900;color:var(--navy);text-decoration:none;margin-left:6px}.hx-link:hover{text-decoration:underline}
.hx-stage{opacity:0;animation:popIn .8s .2s cubic-bezier(.2,1.3,.4,1) forwards}
@keyframes popIn{from{opacity:0;transform:scale(.85) rotate(3deg)}to{opacity:1;transform:none}}
.stage-svg{width:100%;height:auto;display:block;overflow:visible}
.st-shadow{fill:var(--navy)}.st-screen{fill:#fff6e5;stroke:var(--navy);stroke-width:5}
.st-rays path{fill:#ffc93c;opacity:.28}.st-rays{transform-origin:280px 170px;animation:spin 30s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.st-chart .bar{fill:#2f6fed;stroke:var(--navy);stroke-width:4;transform-box:fill-box;transform-origin:bottom;transform:scaleY(0);animation:grow 4.8s ease-out infinite}
.st-chart .b2{fill:#2ec4b6;animation-delay:.25s}.st-chart .b3{fill:#ff5a4e;animation-delay:.5s}
@keyframes grow{0%,8%{transform:scaleY(0)}28%,85%{transform:scaleY(1)}100%{transform:scaleY(0)}}
.st-axis{stroke:var(--navy);stroke-width:5;stroke-linecap:round;fill:none}
.st-map .land{fill:#53b95a;stroke:var(--navy);stroke-width:4;opacity:.9}
.st-map .route{fill:none;stroke:#fff;stroke-width:6;stroke-linecap:round;stroke-dasharray:240;stroke-dashoffset:240;animation:draw 4.8s ease-in-out infinite}
@keyframes draw{0%,20%{stroke-dashoffset:240}55%,88%{stroke-dashoffset:0}100%{stroke-dashoffset:240}}
.st-map .pin path{fill:#ff5a4e;stroke:var(--navy);stroke-width:3}.st-map .pin{transform-box:fill-box;transform-origin:bottom;animation:pin 4.8s infinite}
@keyframes pin{0%,52%{opacity:0;transform:translateY(-30px)}60%{opacity:1;transform:translateY(4px)}66%,88%{opacity:1;transform:none}100%{opacity:0}}
.st-title rect{fill:var(--navy)}.st-title text{fill:#fff;font-family:var(--head);font-size:22px}
.st-title{transform-box:fill-box;transform-origin:center;animation:titleIn 4.8s infinite}
@keyframes titleIn{0%{transform:scale(0)}8%{transform:scale(1.1)}12%,90%{transform:scale(1)}100%{transform:scale(0)}}
.st-char .head{fill:#ffd2b3;stroke:var(--navy);stroke-width:4}.st-char circle:not(.head){fill:var(--navy)}.st-char .smile{fill:none;stroke:var(--navy);stroke-width:3;stroke-linecap:round}
.st-char .body{fill:#7b5cff;stroke:var(--navy);stroke-width:4}.st-char .arm{stroke:var(--navy);stroke-width:7;stroke-linecap:round;transform-origin:288px 330px;animation:wave 1.2s ease-in-out infinite}
.st-char{animation:bob 1.2s ease-in-out infinite}
@keyframes wave{50%{transform:rotate(-28deg)}}@keyframes bob{50%{transform:translateY(-6px)}}
.st-pen .pen{fill:#ffc93c;stroke:var(--navy);stroke-width:3}.st-pen{animation:penMove 4.8s ease-in-out infinite}
@keyframes penMove{0%{transform:translate(345px,235px)}20%{transform:translate(345px,235px)}38%{transform:translate(420px,160px)}55%{transform:translate(480px,105px)}75%{transform:translate(180px,125px)}100%{transform:translate(345px,235px)}}
/* sections */
.section.tight{padding:34px 0 10px}
.mini-h{font-size:22px;margin:0 0 12px}
.center-h{text-align:center;font-size:clamp(30px,4vw,44px);margin:0 0 26px}
.watch-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.watch-card{display:flex;gap:14px;align-items:center;padding:10px;text-decoration:none;color:var(--ink);transition:transform .2s,box-shadow .2s}
.watch-card:hover{transform:translate(-3px,-3px) rotate(-.6deg);box-shadow:9px 9px 0 var(--navy)}
.wc-img{position:relative;flex:none;width:150px;border-radius:12px;overflow:hidden;border:3px solid var(--navy)}.wc-img img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .4s}
.watch-card:hover .wc-img img{transform:scale(1.08)}.wc-img .play-badge{transform:scale(.6)}
.wc-body b{display:block;font-family:var(--head);font-weight:400;font-size:20px}.wc-body small{color:var(--muted);font-weight:800}
/* ideas */
.ideas{display:grid;grid-template-columns:260px 1fr;gap:18px;background:#fff;border:4px solid var(--navy);border-radius:26px;box-shadow:8px 8px 0 var(--navy);padding:16px}
.idea-tabs{display:flex;flex-direction:column;gap:6px}
.idea-tab{display:flex;align-items:center;gap:10px;font:inherit;font-weight:900;font-size:16px;color:var(--navy);background:transparent;border:3px solid transparent;border-radius:14px;padding:9px 12px;cursor:pointer;text-align:left;transition:background .2s,transform .15s}
.idea-tab:hover{background:#fff6e5;transform:translateX(4px)}
.idea-tab.on{background:var(--c);border-color:var(--navy);box-shadow:3px 3px 0 var(--navy);color:#fff;text-shadow:1px 1px 0 var(--navy)}
.it-ico{font-size:22px;filter:drop-shadow(1px 1px 0 rgba(29,43,83,.3))}
.idea-panels{position:relative;min-height:300px}
.idea-panel{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1.1fr;gap:20px;align-items:center;border-radius:18px;padding:24px;background:color-mix(in srgb,var(--c) 14%,#fff);opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .35s,transform .35s,visibility .35s}
.idea-panel.on{opacity:1;visibility:visible;transform:none}
.ip-art{position:relative;display:grid;place-items:center;aspect-ratio:1;max-width:240px;margin:auto;width:100%}
.ip-big{font-size:110px;z-index:1;animation:hover 2.4s ease-in-out infinite}
@keyframes hover{50%{transform:translateY(-12px) rotate(-6deg)}}
.ip-ring{position:absolute;inset:8%;border-radius:50%;border:5px dashed var(--c);animation:spin 14s linear infinite}.ip-ring.r2{inset:22%;border-style:solid;border-width:4px;opacity:.5;animation-direction:reverse;animation-duration:9s}
.ip-body h3{font-size:30px;margin:0 0 10px}
.ip-body ul{list-style:none;padding:0;margin:0 0 18px}.ip-body li{font-size:18px;font-weight:800;padding:8px 12px;margin:6px 0;background:#fff;border:3px solid var(--navy);border-radius:12px;opacity:0;transform:translateX(16px)}
.idea-panel.on li{animation:liIn .4s calc(.08s + var(--j)*.08s) forwards}
@keyframes liIn{to{opacity:1;transform:none}}
/* plans + commissions */
.block{display:block}
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.plan{padding:22px 20px;text-align:center;position:relative;transition:transform .2s,box-shadow .2s}
.plan:hover{transform:translateY(-6px);box-shadow:8px 12px 0 var(--navy)}
.plan.pop{background:#fff8e1;border-width:5px}
.plan .tag{position:absolute;top:-14px;left:50%;transform:translateX(-50%);white-space:nowrap}
.plan h3{margin:0;font-size:24px}.plan .amount{font-family:var(--head);font-size:46px;margin:6px 0}.plan .amount small{font-size:18px;color:var(--muted)}
.credits{font-weight:800}.credits b{font-family:var(--head);font-weight:400;font-size:26px;color:var(--red)}
.mins{color:var(--muted);font-weight:800;margin:2px 0 14px}
.plan ul{list-style:none;padding:0;margin:4px 0 16px;font-weight:800}.plan li{padding:4px 0;border-bottom:2px dashed #eadfca}.plan li:last-child{border:0}
.band .plan{color:var(--ink)}
.plans-note{text-align:center;margin-top:18px;font-weight:800}
/* scroll reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .6s,transform .6s cubic-bezier(.2,1,.4,1);transition-delay:calc(var(--i,0)*.08s)}
.reveal.in{opacity:1;transform:none}
@media (max-width:900px){.hx-grid{grid-template-columns:1fr}.plans{grid-template-columns:1fr 1fr}.ideas{grid-template-columns:1fr}.idea-tabs{flex-direction:row;overflow-x:auto;padding-bottom:4px}.idea-tab{flex:none}.idea-panel{grid-template-columns:1fr;position:relative;display:none}.idea-panel.on{display:grid}.idea-panels{min-height:0}}
@media (max-width:560px){.plans{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.reveal,.hx-title span,.hx-sub,.hx .btn-row,.hx-small,.hx-stage{opacity:1!important;transform:none!important}}
.band .wrap.block{display:block}
.band .plan h3,.band .plan .amount,.band .plan .credits{color:var(--navy)}.band .plan .mins{color:var(--muted)}.band .plans-note{color:#fff}
.plan .tag{background:var(--red);color:#fff;border:3px solid var(--navy);border-radius:999px;padding:2px 12px;font-weight:900;font-size:13px;line-height:1.4;box-shadow:2px 2px 0 var(--navy)}
#make{padding-top:40px}
/* ===== hero v4: calm background, the icon illustration animates in, icons react on hover ===== */
.hx{background:transparent;border-bottom:none;padding:46px 0 30px}
.hx-title{color:var(--navy);text-shadow:none;-webkit-text-stroke:0;font-size:clamp(44px,6.4vw,84px)}
.hx-title .hl{color:var(--red);-webkit-text-stroke:0}
.hx-sub{color:var(--muted)}.hx-small{color:var(--muted)}.hx-link{color:var(--navy)}
.hx-stage{animation:none;opacity:1}
.hero-anim{width:100%;height:auto;display:block;overflow:visible}
.hero-anim .hi,.hero-anim .hb{transform-box:fill-box;transform-origin:center}
.hero-anim .hi{opacity:0;animation:hiIn .8s cubic-bezier(.2,1.5,.4,1) forwards}
.h-bg{animation-name:bgIn!important;animation-duration:.7s!important}
.h-screen{animation-delay:.15s!important}
.h-card{--fx:-120px;--fy:-60px;--fr:-30deg;animation-delay:.5s!important}
.h-d20{--fx:120px;--fy:-80px;--fr:40deg;animation-delay:.62s!important}
.h-gear{--fx:-120px;--fy:80px;--fr:-90deg;animation-delay:.74s!important}
.h-knight{--fx:120px;--fy:90px;--fr:20deg;animation-delay:.86s!important}
.h-meeple{--fx:-140px;--fy:0px;--fr:-20deg;animation-delay:.98s!important}
.h-ball{--fx:0px;--fy:120px;--fr:30deg;animation-delay:1.1s!important}
.h-die{--fx:140px;--fy:0px;--fr:60deg;animation-delay:1.22s!important}
.h-spark{--fx:0px;--fy:0px;--fr:0deg;animation-delay:1.4s!important}
@keyframes hiIn{from{opacity:0;transform:translate(var(--fx,0),var(--fy,40px)) rotate(var(--fr,0)) scale(.4)}to{opacity:1;transform:none}}
@keyframes bgIn{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
/* a gentle idle bob once they've landed */
.hero-anim .hb{animation:bobY 4s ease-in-out infinite;animation-delay:calc(1.6s + var(--d,0s))}
.h-d20 .hb{--d:.6s}.h-gear .hb{--d:1.2s}.h-knight .hb{--d:.3s}.h-meeple .hb{--d:.9s}.h-ball .hb{--d:1.5s}.h-die .hb{--d:.45s}
@keyframes bobY{50%{transform:translateY(-7px)}}
.h-spark{animation:hiIn .6s 1.4s forwards,twinkle 2.4s 2s ease-in-out infinite!important}
.h-spark.s2{animation-delay:1.5s,2.6s!important}.h-spark.s3{animation-delay:1.6s,3.1s!important}
@keyframes twinkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.35) rotate(45deg)}}
/* hover: each icon does its own little trick */
.hero-anim .hi:not(.h-bg){cursor:pointer}
/* played once per hover by site.js (class .play), so an icon moving out from under the cursor can't make it stutter */
.hero-anim .hi:not(.h-bg):not(.h-screen){pointer-events:bounding-box}
.h-card.play .hb{animation:flip .7s ease}
.h-d20.play .hb{animation:roll .8s cubic-bezier(.3,1.4,.5,1)}
.h-gear.play .hb{animation:spin360 1s ease-in-out}
.h-knight.play .hb{animation:hop .5s ease 2}
.h-meeple.play .hb{animation:wiggle .5s ease 2}
.h-ball.play .hb{animation:kick .7s ease}
.h-die.play .hb{animation:roll .7s ease}
.h-screen:hover{transform:scale(1.03) rotate(-1deg);transition:transform .25s}
@keyframes flip{50%{transform:scaleX(-1) translateY(-10px)}}
@keyframes roll{to{transform:rotate(360deg)}}
@keyframes spin360{to{transform:rotate(360deg)}}
@keyframes hop{50%{transform:translateY(-18px) rotate(-8deg)}}
@keyframes wiggle{25%{transform:rotate(-14deg)}75%{transform:rotate(14deg)}}
@keyframes kick{40%{transform:translate(-14px,-26px) rotate(-40deg)}}
/* more hover fun elsewhere */
.btn.xl{animation:none}
.btn.primary.xl:hover{animation:nudge .5s ease}
@keyframes nudge{30%{transform:translate(-2px,-3px) rotate(-2deg)}60%{transform:translate(-2px,-3px) rotate(2deg)}}
.plan:hover .amount{animation:nudge .5s ease}
.shape2{font-size:13px;font-weight:800;color:var(--muted);margin:-6px 0 12px}
@media (prefers-reduced-motion:reduce){.hero-anim .hi{opacity:1!important}}
/* ===== hero to examples: scroll cue, layered wave, bigger video cards ===== */
.hx{padding-bottom:10px}
.scroll-cue{display:block;width:34px;height:54px;margin:4px auto 0;border:4px solid var(--navy);border-radius:20px;position:relative;opacity:0;animation:fadeUp .6s 1.8s forwards}
.scroll-cue span{position:absolute;left:50%;top:9px;width:8px;height:12px;margin-left:-4px;border-radius:4px;background:var(--red);animation:cue 1.6s ease-in-out infinite}
@keyframes cue{0%{transform:translateY(0);opacity:1}70%{transform:translateY(18px);opacity:0}100%{opacity:0}}
.hx-wave{line-height:0;margin-top:-6px}.hx-wave svg{display:block;width:100%;height:110px}
.hx-wave .w2{fill:#ffd166;opacity:.55;animation:waveDrift 8s ease-in-out infinite alternate}
.hx-wave .w1{fill:#ffe6a8}
@keyframes waveDrift{to{transform:translateX(-40px)}}
.watch-band{background:#ffe6a8;padding:10px 0 56px;border-bottom:4px solid var(--navy)}
.watch-band .center-h{margin-bottom:28px}
.watch-strip{grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:28px;max-width:1040px;margin:0 auto}
.watch-card{flex-direction:column;align-items:stretch;padding:12px;gap:12px}
.watch-card .wc-img{width:100%;border-radius:16px}
.wc-play{position:absolute;left:50%;top:50%;width:78px;height:78px;margin:-39px 0 0 -39px;border-radius:50%;background:var(--red);color:#fff;border:4px solid var(--navy);box-shadow:4px 4px 0 var(--navy);display:grid;place-items:center;font-size:28px;padding-left:5px;transition:transform .25s}
.watch-card:hover .wc-play{transform:scale(1.15) rotate(-6deg)}
.watch-card .wc-body{padding:2px 6px 6px}.watch-card .wc-body b{font-size:26px}.watch-card .wc-body small{font-size:15px}
@media (max-width:640px){.watch-strip{grid-template-columns:1fr}.hx-wave svg{height:60px}}

/* idea panel: hovering an example swaps the icon for a little animation of it (art in data/idea-art.js) */
.ip-body li{cursor:default;transition:background .2s,box-shadow .2s}
.ip-body li:hover,.ip-body li.on,.ip-body li:focus-visible{background:color-mix(in srgb,var(--c) 22%,#fff);box-shadow:4px 4px 0 var(--navy);outline:none}
.ip-art .ex-art{position:absolute;inset:2%;width:96%;height:96%;display:none;z-index:2;overflow:visible}
.ip-art[data-ex] .ip-big{display:none}
.ip-art[data-ex="0"] .e0,.ip-art[data-ex="1"] .e1,.ip-art[data-ex="2"] .e2{display:block;animation:exIn .45s cubic-bezier(.2,1.4,.4,1)}
@keyframes exIn{from{opacity:0;transform:scale(.6) rotate(-8deg)}}
.ex-art text{font-family:inherit}
.ex-art .o{fill:none;stroke:#1d2b53;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.ex-art .s{stroke:#1d2b53;stroke-width:4;stroke-linejoin:round;stroke-linecap:round}
.ex-art .c,.ex-art .b,.ex-art .t,.ex-art .l{transform-box:fill-box}
.ex-art .c{transform-origin:center}.ex-art .b{transform-origin:50% 100%}.ex-art .t{transform-origin:50% 0}.ex-art .l{transform-origin:0 50%}
.ex-art .d{stroke-dasharray:100}
@keyframes xflow{to{stroke-dashoffset:-28}}
@keyframes xsway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
@keyframes xrise{0%{transform:translateY(0);opacity:0}20%{opacity:1}100%{transform:translateY(-56px);opacity:0}}
@keyframes xpop{0%{transform:scale(0)}12%{transform:scale(1.18)}20%,85%{transform:scale(1)}95%,100%{transform:scale(0)}}
@keyframes xdraw{0%{stroke-dashoffset:100;opacity:1}45%,88%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes xgrow{0%{transform:scaleY(0)}25%,88%{transform:scaleY(1)}100%{transform:scaleY(0)}}
@keyframes xroll{0%{transform:translateY(-70px) rotate(-200deg);opacity:0}10%{opacity:1}38%{transform:translateY(0) rotate(0)}46%{transform:translateY(-12px) rotate(8deg)}54%,90%{transform:none;opacity:1}100%{transform:none;opacity:0}}
@keyframes xtwinkle{0%,100%{transform:scale(.3);opacity:0}50%{transform:scale(1.1) rotate(45deg);opacity:1}}
@keyframes xcoin{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.1)}}
@keyframes xslide{0%{transform:translateX(10px);opacity:0}8%,88%{opacity:1}100%{transform:translateX(-160px);opacity:0}}
@keyframes xjump{0%,40%{transform:translateY(0);animation-timing-function:cubic-bezier(.2,.7,.4,1)}66%{transform:translateY(-62px);animation-timing-function:cubic-bezier(.6,0,.8,.3)}92%,100%{transform:translateY(0)}}
@keyframes xexpT{0%,15%{transform:none}45%,78%{transform:translateY(-46px)}100%{transform:none}}
@keyframes xexpB{0%,15%{transform:none}45%,78%{transform:translateY(40px)}100%{transform:none}}
@keyframes xflag{0%,100%{transform:skewY(0) scaleX(1)}50%{transform:skewY(6deg) scaleX(.85)}}
@keyframes xping{0%{transform:scale(.8);opacity:.9}100%{transform:scale(1.9);opacity:0}}
@keyframes xpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes xlaunch{0%{transform:translateY(60px);opacity:0}15%{opacity:1}35%{transform:translateY(20px)}75%{opacity:1}100%{transform:translateY(-150px);opacity:0}}
@keyframes xflick{from{transform:scaleY(.7)}to{transform:scaleY(1.15)}}
@keyframes xdrop{0%{transform:translateY(-70px);opacity:0}15%{opacity:1}35%{transform:translateY(0)}42%{transform:translateY(-8px)}50%,90%{transform:none;opacity:1}100%{transform:none;opacity:0}}
@keyframes xscrew{0%,50%{transform:rotate(0);opacity:0}55%{opacity:1}80%,90%{transform:rotate(540deg);opacity:1}100%{transform:rotate(540deg);opacity:0}}
@keyframes xbar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes xwave{to{transform:translateX(-100px)}}
@keyframes xtilt{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg) translateY(-4px)}}
@keyframes xflash{0%{transform:scale(.4);opacity:1}12%{transform:scale(1.5);opacity:1}25%,100%{transform:scale(.4);opacity:0}}

/* plans: monthly / yearly switch */
.plans-wrap[data-bill="m"] .y,.plans-wrap[data-bill="y"] .m{display:none}
.bill-toggle{display:flex;align-items:center;justify-content:center;gap:12px;margin:-8px 0 28px;font-weight:900;font-size:18px}
.bill-toggle span{cursor:pointer;opacity:.6;transition:opacity .2s}
.plans-wrap[data-bill="m"] .bt-m,.plans-wrap[data-bill="y"] .bt-y{opacity:1}
.bt-y b{display:inline-block;margin-left:4px;background:#53b95a;color:#fff;border:3px solid var(--navy);border-radius:999px;padding:1px 10px;font-size:14px;box-shadow:2px 2px 0 var(--navy);transform:rotate(-3deg)}
.bt-switch{position:relative;width:64px;height:34px;border-radius:999px;border:3px solid var(--navy);background:#fff;cursor:pointer;padding:0;box-shadow:3px 3px 0 var(--navy);transition:background .25s}
.bt-switch i{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--navy);transition:transform .3s cubic-bezier(.2,1.4,.4,1)}
.plans-wrap[data-bill="y"] .bt-switch{background:var(--gold)}
.plans-wrap[data-bill="y"] .bt-switch i{transform:translateX(30px)}
.plan .billed{margin:-4px 0 8px;font-weight:800;font-size:14px;color:var(--muted);min-height:1.3em}
.plan .billed s{opacity:.6;margin-left:4px}
.plans-wrap[data-bill="y"] .amount .y{animation:nudge .4s ease}

/* plans: credit top-ups */
.topups{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:14px;align-items:center;margin-top:22px;background:#fff;color:var(--ink);border:4px solid var(--navy);border-radius:22px;box-shadow:6px 6px 0 var(--gold);padding:16px 18px}
.tu-head b{display:block;font-family:var(--head);font-weight:400;font-size:24px;color:var(--navy)}
.tu-head span{font-weight:800;color:var(--muted);font-size:15px}
.tu{display:flex;flex-direction:column;align-items:center;font-weight:800;background:#fff8e1;border:3px solid var(--navy);border-radius:16px;padding:10px 8px;transition:transform .2s,box-shadow .2s}
.tu:hover{transform:translateY(-4px);box-shadow:4px 6px 0 var(--navy)}
.tu b{font-family:var(--head);font-weight:400;font-size:28px;color:var(--red);line-height:1}
.tu small{color:var(--muted);font-weight:800}
.tu-price{margin-top:4px;font-family:var(--head);font-size:22px;color:var(--navy)}
@media (max-width:900px){.topups{grid-template-columns:repeat(3,1fr)}.tu-head{grid-column:1/-1;text-align:center}}
@media (max-width:480px){.topups{grid-template-columns:1fr}}
.plan .billed .free{font-style:normal;color:#2e9a3a;font-weight:900}

/* plans: minutes and per-minute rate in their own small tinted card */
.plan .usage{display:flex;flex-direction:column;gap:1px;margin:10px auto 16px;padding:8px 10px;background:#eef3ff;border:2px dashed #b9c6e8;border-radius:12px;max-width:220px}
.plan.pop .usage{background:#fff;border-color:#e8d48a}
.usage .u-min{font-weight:900;color:var(--navy);font-size:15px}
.usage .u-rate{font-weight:700;color:#8a94ad;font-size:13px}