/* Bambynos site. Brand: Deep Purple #4B2D8F, Vivid Yellow #F5C900, white. Helvetica (fallback Arial, Inter). Editorial, type-led. */
:root{--purple:#4B2D8F;--yellow:#F5C900;--white:#FFFFFF;--ink:#1D1538;--ink-2:#5E5680;--line:#E9E5F2;--paper:#F7F5FB;
  --font:"Helvetica Neue",Helvetica,Arial,"Inter",system-ui,sans-serif;--max:1280px;--gutter:clamp(20px,4vw,48px)}
*{box-sizing:border-box}
html{color-scheme:light;scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--ink);font:400 17px/1.55 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.02em;line-height:1.05;text-wrap:balance;color:var(--purple)}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.eyebrow{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--purple)}
.h-display{font-size:clamp(2.7rem,7.4vw,6.6rem);line-height:.94;letter-spacing:-.04em;text-transform:uppercase}
.h-section{font-size:clamp(2rem,4.4vw,3.8rem);line-height:.98;letter-spacing:-.035em}
.h-sub{font-size:clamp(1.4rem,2.6vw,2.1rem);line-height:1.1;letter-spacing:-.025em}
.lead{font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.5;color:var(--ink-2);max-width:40em}
.muted{color:var(--ink-2)}
.section{padding-block:clamp(72px,9vw,128px)}
.section--tight{padding-block:clamp(40px,6vw,72px)}
.section--purple{background:var(--purple);color:var(--white)}
.section--purple h2,.section--purple h3,.section--purple .eyebrow{color:var(--white)}
.section--purple .eyebrow{color:var(--yellow)}
.section--purple .lead,.section--purple .muted{color:rgba(255,255,255,.78)}
.section--paper{background:var(--paper)}
.section-head{display:grid;gap:14px;margin-bottom:clamp(32px,5vw,56px);max-width:52em}
.btn{display:inline-flex;align-items:center;gap:.6em;padding:1em 1.6em;font:700 .95rem/1 var(--font);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .15s ease,background .15s ease,color .15s ease}
.btn--yellow{background:var(--yellow);color:var(--purple);border-color:var(--yellow)}
.btn--yellow:hover{background:#ffd81f}
.btn--purple{background:var(--purple);color:var(--white);border-color:var(--purple)}
.btn--outline{background:transparent;color:var(--purple);border-color:var(--purple)}
.btn--white{background:transparent;color:var(--white);border-color:var(--white)}
.btn--white:hover{background:var(--white);color:var(--purple)}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.arrow::after{content:"→"}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:76px}
.logo{display:flex;align-items:center;text-decoration:none}
.logo img{height:38px;width:auto}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{text-decoration:none;font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--purple);box-shadow:0 2px 0 var(--yellow)}
.nav-right{display:flex;align-items:center;gap:18px}
.lang{display:flex;gap:2px;border:1.5px solid var(--line);padding:3px}
.lang a{text-decoration:none;font-size:.72rem;font-weight:800;letter-spacing:.1em;padding:6px 9px;color:var(--ink-2)}
.lang a[aria-current="true"]{background:var(--purple);color:var(--white)}
.nav-toggle{display:none;border:0;background:transparent;width:44px;height:44px;cursor:pointer;position:relative}
.nav-toggle span{position:absolute;left:10px;right:10px;height:2px;background:var(--purple);transition:transform .2s,opacity .2s}
.nav-toggle span:nth-child(1){top:15px}.nav-toggle span:nth-child(2){top:21px}.nav-toggle span:nth-child(3){top:27px}
.menu{display:none}
@media (max-width:980px){
  .nav-links,.header-cta{display:none}
  .nav-toggle{display:block}
  body.menu-open .nav-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  body.menu-open .nav-toggle span:nth-child(2){opacity:0}
  body.menu-open .nav-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  body.menu-open .menu{display:flex}
  .menu{position:fixed;inset:76px 0 0 0;background:var(--purple);color:var(--white);z-index:40;flex-direction:column;justify-content:space-between;padding:32px var(--gutter) calc(32px + env(safe-area-inset-bottom,0px));overflow:auto}
  .menu a{color:var(--white);text-decoration:none}
  .menu-links a{display:block;font-size:clamp(2rem,8vw,3rem);font-weight:800;letter-spacing:-.03em;text-transform:uppercase;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.15)}
  .menu-foot{display:grid;gap:16px;margin-top:32px}
  body.menu-open{overflow:hidden}
}

/* hero */
.hero{padding-block:clamp(56px,8vw,112px) clamp(48px,6vw,88px)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,80px);align-items:end}
.hero-copy{display:grid;gap:26px}
.hero-media{position:relative;margin-top:12px}
.hero-media img,.hero-media .fallback{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.hero-media::after{content:"";position:absolute;right:-14px;bottom:-14px;width:58%;height:46%;background:var(--yellow);z-index:-1}
.hero-media--wide img,.hero-media--wide .fallback{aspect-ratio:16/10}
.fallback{background:var(--purple);position:relative;overflow:hidden}
.fallback::before{content:"";position:absolute;inset:0;background-image:var(--mark);background-size:72px 72px;opacity:.16}
.fallback span{position:absolute;left:24px;bottom:20px;color:var(--yellow);font-weight:800;font-size:clamp(2rem,5vw,4rem);letter-spacing:-.04em;line-height:.95;text-transform:uppercase}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr}.hero-media{max-width:520px}}

/* marquee */
.marquee{border-block:1px solid var(--line);padding-block:20px;overflow:hidden}
.marquee .label{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);font-weight:700;margin-bottom:12px}
.marquee-track{display:flex;gap:72px;width:max-content;animation:marquee 36s linear infinite}
.marquee-track span{font-weight:800;font-size:clamp(1.3rem,2.4vw,1.9rem);letter-spacing:.02em;text-transform:uppercase;color:var(--purple);white-space:nowrap;display:flex;align-items:center;gap:72px}
.marquee-track span::after{content:"";width:10px;height:10px;background:var(--yellow);border-radius:50%}
@keyframes marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none;flex-wrap:wrap;width:auto}}

/* problem */
.problem-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:start}
.problem-list li{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.18);font-size:1.1rem;display:flex;gap:16px;align-items:baseline}
.problem-list li::before{content:"";width:8px;height:8px;background:var(--yellow);flex:0 0 8px;transform:translateY(-3px)}
.solution{font-size:clamp(1.6rem,3.4vw,2.8rem);font-weight:800;letter-spacing:-.03em;line-height:1.05;color:var(--yellow)}
@media (max-width:860px){.problem-grid{grid-template-columns:1fr}}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.step{display:grid;gap:14px;padding-top:22px;border-top:3px solid var(--purple)}
.step .num{font-size:clamp(2.6rem,4vw,3.6rem);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--purple)}
.step h3{font-size:1.15rem;text-transform:uppercase;letter-spacing:.04em}
.step p{color:var(--ink-2)}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.steps{grid-template-columns:1fr}}

/* creators */
.creators{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.creator{display:grid;grid-template-rows:auto 1fr;background:var(--paper);min-width:0}
.creator-media{aspect-ratio:4/5;position:relative;overflow:hidden;background:var(--purple);color:var(--yellow)}
.creator.tone-yellow .creator-media{background:var(--yellow);color:var(--purple)}
.creator-media img{width:100%;height:100%;object-fit:cover}
.creator-media .big{position:absolute;left:-3%;bottom:-20%;font-size:15rem;font-weight:800;letter-spacing:-.07em;line-height:1;opacity:.16;pointer-events:none}
.creator-media .name{position:absolute;left:22px;bottom:20px;font-size:2.1rem;font-weight:800;letter-spacing:-.03em;line-height:1}
.creator-media .chip{position:absolute;left:22px;top:20px}
.chip{display:inline-block;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;padding:.5em .9em;border:1.5px solid currentColor;background:transparent}
.creator-body{padding:20px 22px 26px;display:grid;gap:8px;align-content:start}
.creator-body .meta{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--purple)}
.creator-body .desc{color:var(--ink-2)}
.creator-body .format{font-size:.9rem;font-weight:700}
@media (max-width:900px){.creators{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.creators{grid-template-columns:1fr}}
.cta-line{display:flex;flex-wrap:wrap;align-items:center;gap:18px 32px;margin-top:40px;padding-top:28px;border-top:1px solid var(--line)}
.cta-line strong{font-size:1.3rem;letter-spacing:-.02em}

/* categories */
.cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.cat{padding:clamp(18px,3vw,30px) 14px clamp(18px,3vw,30px) 0;border-bottom:1px solid var(--line);font-size:clamp(1.15rem,2.2vw,1.9rem);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;color:var(--purple);position:relative}
.cat::before{content:"";position:absolute;left:0;bottom:-1px;height:4px;width:0;background:var(--yellow);transition:width .25s ease}
.cat:hover::before{width:100%}
@media (max-width:760px){.cats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* work */
.cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.case{display:grid;gap:14px;padding:26px;border:1.5px solid var(--line);min-width:0;text-decoration:none;color:inherit;background:var(--white)}
.case--placeholder{border-style:dashed;color:var(--ink-2)}
.case .client{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:var(--purple)}
.case h3{font-size:1.25rem;letter-spacing:-.02em;line-height:1.2}
.case .facts{display:grid;gap:6px;font-size:.92rem;color:var(--ink-2)}
.case .facts b{color:var(--ink);font-weight:700}
.case-full{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5vw,72px);padding-block:40px;border-top:1px solid var(--line)}
.case-full dl{display:grid;grid-template-columns:max-content 1fr;gap:10px 24px;margin:0}
.case-full dt{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--purple);padding-top:4px}
.case-full dd{margin:0;color:var(--ink-2)}
@media (max-width:900px){.cases{grid-template-columns:1fr}.case-full{grid-template-columns:1fr}}

/* why */
.why{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 32px}
.why h3{font-size:.9rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px;padding-top:16px;border-top:2px solid var(--yellow);display:inline-block}
.why p{color:var(--ink-2)}
@media (max-width:860px){.why{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.why{grid-template-columns:1fr}}

/* services / benefits */
.services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;background:var(--line);border:1px solid var(--line)}
.service{background:var(--white);padding:28px 26px;display:grid;gap:10px;align-content:start;min-width:0}
.service .n{font-size:.72rem;letter-spacing:.18em;font-weight:800;color:var(--purple)}
.service h3{font-size:1.1rem;letter-spacing:-.01em}
.service p{color:var(--ink-2);font-size:.98rem}
@media (max-width:860px){.services{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.services{grid-template-columns:1fr}}

/* faq */
.faq{max-width:52em}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;align-items:center;padding:22px 0;font-weight:700;font-size:1.1rem;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.6rem;font-weight:300;color:var(--purple);flex:0 0 auto}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 0 24px;color:var(--ink-2);max-width:46em}

/* pricing / statement */
.statement{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(24px,5vw,80px);align-items:center}
@media (max-width:860px){.statement{grid-template-columns:1fr}}

/* forms */
.form{display:grid;gap:26px;max-width:760px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px 32px}
.form-grid .full{grid-column:1/-1}
@media (max-width:640px){.form-grid{grid-template-columns:1fr}}
.field{display:grid;gap:8px}
.field label{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--purple)}
.field input,.field select,.field textarea{font:inherit;color:var(--ink);background:transparent;border:0;border-bottom:1.5px solid var(--ink);padding:10px 0;width:100%;min-width:0;border-radius:0}
.field textarea{min-height:120px;resize:vertical}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--purple) 50%),linear-gradient(135deg,var(--purple) 50%,transparent 50%);background-position:calc(100% - 14px) 50%,calc(100% - 8px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:28px}
.checks{display:flex;flex-wrap:wrap;gap:10px}
.check{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--line);padding:9px 14px;font-size:.92rem;cursor:pointer;user-select:none}
.check input{accent-color:var(--purple)}
.check:has(input:checked){background:var(--purple);color:var(--white);border-color:var(--purple)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-msg{display:none;padding:16px 18px;background:var(--paper);border-left:4px solid var(--yellow)}
.form-msg.show{display:block}
.section--purple .form-msg{background:rgba(255,255,255,.1);color:var(--white)}

/* contact */
.paths{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.path{padding:32px;border:1.5px solid var(--line);display:grid;gap:16px;align-content:start}
.path h2{font-size:1.5rem}
.email-line{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:36px}
.email-line code{font:800 1.3rem/1 var(--font);letter-spacing:-.01em;color:var(--purple);user-select:all}
.copy{border:1.5px solid var(--line);background:transparent;font:700 .72rem var(--font);letter-spacing:.14em;text-transform:uppercase;padding:9px 12px;cursor:pointer;color:var(--ink)}
@media (max-width:760px){.paths{grid-template-columns:1fr}}

/* about */
.blocks{display:grid;gap:clamp(32px,5vw,56px)}
.block{display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,1fr);gap:24px;padding-top:28px;border-top:1px solid var(--line)}
.block h2{font-size:1.1rem;letter-spacing:.14em;text-transform:uppercase}
.block p{font-size:clamp(1.05rem,1.6vw,1.35rem);line-height:1.45;max-width:36em}
.values{display:flex;flex-wrap:wrap;gap:10px}
.values span{border:1.5px solid var(--purple);color:var(--purple);font-weight:800;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;padding:10px 14px}
@media (max-width:760px){.block{grid-template-columns:1fr}}

/* method list */
.method{display:grid;gap:0;counter-reset:m}
.method li{display:grid;grid-template-columns:72px 1fr;gap:24px;padding:24px 0;border-top:1px solid rgba(255,255,255,.18)}
.method li::before{counter-increment:m;content:"0" counter(m);font-size:2rem;font-weight:800;letter-spacing:-.04em;color:var(--yellow);line-height:1}
.method h3{font-size:1.15rem;margin-bottom:6px}
.method p{color:rgba(255,255,255,.8)}

/* final */
.final{text-align:left}
.final .h-section{max-width:14em}

/* footer */
.site-footer{background:var(--purple);color:var(--white);padding-block:56px 40px}
.site-footer a{color:var(--white)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;align-items:start}
.foot-grid img{height:40px;width:auto;margin-bottom:18px}
.foot-grid .small{font-size:.92rem;color:rgba(255,255,255,.75);max-width:30em}
.foot-links{display:grid;gap:10px}
.foot-links a{text-decoration:none;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.18);font-size:.82rem;color:rgba(255,255,255,.7)}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr}}

/* page hero (inner pages) */
.page-hero{padding-block:clamp(48px,7vw,96px) clamp(32px,5vw,64px)}
.page-hero .h-display{font-size:clamp(2.3rem,6vw,5.4rem)}

@media (prefers-reduced-motion:no-preference){
  .btn:hover{transform:translateY(-1px)}
}

/* ===== v2.1: dual CTAs, paths, logos, proof, reveal ===== */
.header-cta--creators{margin-right:-6px}
@media (max-width:1180px){.header-cta--creators{display:none}}
.cta-bar{display:none}
@media (max-width:980px){
  .cta-bar{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:45;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-top:1px solid var(--line)}
  .cta-bar .btn{justify-content:center;padding:.9em .6em;font-size:.78rem;letter-spacing:.06em}
  body{padding-bottom:76px}
  body.menu-open .cta-bar{display:none}
}
.oneliner{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink-2);margin-top:4px}
.paths-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.path-card{display:grid;gap:14px;align-content:start;padding:clamp(24px,3.5vw,40px);text-decoration:none;min-height:220px;transition:transform .2s ease}
.path-card h2{font-size:clamp(1.25rem,2.2vw,1.7rem);line-height:1.15;letter-spacing:-.02em}
.path-card .btn{width:max-content;margin-top:auto}
.path-card--purple{background:var(--purple);color:var(--white)}
.path-card--purple h2,.path-card--purple .eyebrow{color:var(--white)}
.path-card--purple .eyebrow{color:var(--yellow)}
.path-card--yellow{background:var(--yellow);color:var(--purple)}
.path-card--yellow h2,.path-card--yellow .eyebrow{color:var(--purple)}
.path-card:hover{transform:translateY(-3px)}
@media (max-width:720px){.paths-grid{grid-template-columns:1fr}.path-card{min-height:0}}
.logos{border-block:1px solid var(--line)}
.logos .label{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);font-weight:700;margin-bottom:22px}
.logo-wall{display:flex;flex-wrap:wrap;align-items:center;gap:28px clamp(32px,5vw,72px)}
.logo-wall li{display:flex;align-items:center}
.logo-wall img{width:auto;max-width:180px;opacity:.85;transition:opacity .2s}
.logo-wall img:hover{opacity:1}
.logo-wall .more{font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--purple)}
.proof-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.proof-tile{display:grid;gap:8px;padding:28px 26px;border:1.5px solid rgba(255,255,255,.22);background:rgba(255,255,255,.04)}
.proof-tile .val{font-size:clamp(2.6rem,5vw,4.2rem);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--yellow);font-variant-numeric:tabular-nums}
.proof-tile .lbl{font-size:1.05rem;color:#fff}
.proof-tile .who{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.7)}
@media (max-width:860px){.proof-grid{grid-template-columns:1fr}}
.agencies{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;padding-block:12px;border-top:1px solid var(--line)}
.agencies .h-sub{max-width:32em}
.creator-body .stat{font-size:.9rem;font-weight:700;color:var(--purple)}
.creator-body .collabs{font-size:.85rem;color:var(--ink-2)}
.creator-body .collabs span{font-weight:700;color:var(--purple)}
.foot-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.site-header.scrolled{box-shadow:0 6px 24px rgba(75,45,143,.08)}
@media (prefers-reduced-motion:no-preference){
  .reveal{animation:rise .6s cubic-bezier(.2,.7,.2,1) both}
  @keyframes rise{from{transform:translateY(14px)}to{transform:translateY(0)}}
}

/* v2.1 header density fix */
.nav-links a,.btn{white-space:nowrap}
.nav-links{gap:20px}
.header-cta{padding:.8em 1.1em;font-size:.78rem}
.logo img{height:34px}
@media (max-width:1280px){.nav-links{gap:14px}.nav-links a{font-size:.74rem;letter-spacing:.1em}}

.faq-group{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);margin:34px 0 6px}
.faq-group:first-child{margin-top:0}

/* v2.2: logo marquee, email reach, quick brief */
.logos{padding-block:26px 22px}
.logo-track{gap:clamp(40px,6vw,88px)}
.logo-track span{gap:clamp(40px,6vw,88px)}
.logo-track img{width:auto;max-width:200px;opacity:.9}
.logo-track .more{font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--purple)}
.header-mail{text-decoration:none;font-size:.8rem;font-weight:700;color:var(--purple);border-bottom:2px solid var(--yellow);padding-bottom:1px}
@media (max-width:1380px){.header-mail{display:none}}
.menu-mail{font-size:1.1rem;font-weight:700;text-decoration:none;color:var(--yellow)}
.cta-bar{grid-template-columns:1fr 1fr auto}
.cta-bar .bar-mail{padding:.9em 1em;font-size:1.05rem;font-weight:800}
.quick{display:grid;gap:18px;padding:clamp(22px,3vw,32px);border:1.5px solid var(--line);background:var(--paper)}
.quick-head{display:grid;gap:6px}
.quick-row{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:16px;align-items:end}
.quick label{display:grid;gap:6px;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--purple)}
.quick select{font:inherit;text-transform:none;letter-spacing:0;font-weight:400;color:var(--ink);background:var(--white);border:1.5px solid var(--line);padding:12px 36px 12px 12px;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--purple) 50%),linear-gradient(135deg,var(--purple) 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 10px) 50%;background-size:6px 6px;background-repeat:no-repeat;min-width:0;width:100%}
.quick .btn{justify-content:center}
@media (max-width:900px){.quick-row{grid-template-columns:1fr 1fr}.quick .btn{grid-column:1/-1}}
@media (max-width:560px){.quick-row{grid-template-columns:1fr}}

/* v2.3: brands-first */
.hero-mail{font-size:1.05rem;color:var(--ink-2)}
.hero-mail a{font-weight:800;color:var(--purple);text-decoration:none;border-bottom:2px solid var(--yellow)}
.nav-links .nav-minor{color:var(--ink-2);font-weight:600}
.creators-note{margin-top:28px;color:rgba(255,255,255,.8);max-width:46em}
.creators-note a{color:var(--yellow);font-weight:700;text-decoration:none}
.cta-bar{grid-template-columns:1fr auto}
.cta-bar .bar-mail{font-size:.72rem;letter-spacing:.04em;text-transform:none;padding:.9em .9em}
.quick-row--4{grid-template-columns:1.2fr 1fr 1fr .9fr auto}
.quick input[type="date"]{font:inherit;color:var(--ink);background:var(--white);border:1.5px solid var(--line);padding:11px 12px;width:100%;min-width:0;text-transform:none;letter-spacing:0;font-weight:400}
@media (max-width:1100px){.quick-row--4{grid-template-columns:1fr 1fr}.quick .btn{grid-column:1/-1}}
@media (max-width:560px){.quick-row--4{grid-template-columns:1fr}}
@media (max-width:1380px){.header-mail{display:inline}}
@media (max-width:1180px){.header-mail{display:none}}

/* v2.4: launch polish */
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--yellow);color:var(--purple);padding:10px 14px;font-weight:800}
.skip:focus{left:12px}
.trust{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:4px}
.trust li{font-size:.86rem;color:var(--ink-2);display:flex;align-items:center;gap:8px}
.trust li::before{content:"";width:8px;height:8px;background:var(--yellow);border:1.5px solid var(--purple);border-radius:50%;flex:0 0 8px}
.timeline{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;list-style:none;margin:0;padding:0;border-top:1px solid var(--line);padding-top:22px}
.timeline li{display:grid;gap:4px;min-width:0}
.timeline .day{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--purple)}
.timeline strong{font-size:1rem}
.timeline .muted{font-size:.9rem}
@media (max-width:900px){.timeline{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.timeline{grid-template-columns:1fr}}
.req-note{margin-bottom:-8px;font-size:.92rem}
.submit-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.submit-row .small{font-size:.82rem}
.submit-row a{color:var(--purple)}
.case--img{padding:0;overflow:hidden}
.case--img .case-img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block}
.case--img .client{margin:20px 24px 0}
.case--img h3{margin:0 24px}
.case--img .facts{margin:0 24px 24px}
.case-full .case-img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;margin-bottom:18px}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:-16px 0 24px}
.filter{border:1.5px solid var(--line);background:var(--white);color:var(--ink);font:700 .76rem var(--font);letter-spacing:.12em;text-transform:uppercase;padding:9px 13px;cursor:pointer}
.filter.is-on{background:var(--purple);color:var(--white);border-color:var(--purple)}
.creator.is-hidden{display:none}
.problem-list--ink li{border-bottom-color:var(--line);color:var(--ink)}
.steps--light .step{border-top-color:var(--yellow)}
.steps--light .num{color:var(--yellow)}
.steps--light h3{color:var(--white)}
.steps--light p{color:rgba(255,255,255,.8)}
.dm-note{margin-top:18px}
.dm-note a{color:var(--purple);font-weight:700}
.consent{position:fixed;left:12px;right:12px;bottom:12px;z-index:70;background:var(--purple);color:var(--white);padding:16px 18px;display:grid;gap:12px;max-width:560px;box-shadow:0 12px 40px rgba(29,21,56,.3)}
.consent p{font-size:.8rem;line-height:1.35}
.consent{grid-template-columns:1fr auto;align-items:center;padding:10px 12px;gap:10px} /* founder 2026-11-03: compact, one row with the buttons */
.consent a{color:var(--yellow)}
.consent-actions{display:flex;gap:10px;flex-wrap:wrap}
.consent .btn{padding:.6em .9em;font-size:.74rem}
.consent-actions{flex-wrap:nowrap;gap:6px}
@media (max-width:980px){.consent{bottom:84px}}

.consent[hidden]{display:none}

/* v2.5: clean hero, what we do */
.hero{padding-block:clamp(48px,7vw,96px) clamp(24px,4vw,40px)}
.hero-grid,.page-hero .hero-grid{grid-template-columns:1fr}
.hero-copy{max-width:60rem}
.hero .h-display{font-size:clamp(2.6rem,7vw,6rem)}
.page-hero .hero-copy{max-width:52rem}
.wedo-wrap{padding-block:clamp(28px,4vw,48px) clamp(40px,6vw,64px)}
.wedo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;background:var(--line);border:1px solid var(--line)}
.wedo-item{background:var(--white);padding:26px 24px 28px;display:grid;gap:8px;align-content:start;min-width:0}
.wedo-item .n{font-size:.72rem;letter-spacing:.18em;font-weight:800;color:var(--purple)}
.wedo-item h2{font-size:1.35rem;letter-spacing:-.02em}
.wedo-item p{color:var(--ink-2);font-size:.98rem}
@media (max-width:760px){.wedo{grid-template-columns:1fr}}
.trust{display:none}

[id]{scroll-margin-top:92px}

/* v2.8: open portfolio cards */
.creator-media video.clip{width:100%;height:100%;object-fit:cover;display:block;background:#000}
.creator-media .views{position:absolute;right:14px;bottom:18px;background:rgba(29,21,56,.78);color:#fff;font:700 .7rem/1 var(--font);letter-spacing:.08em;text-transform:uppercase;padding:7px 9px;backdrop-filter:blur(4px)}
.creator-media .chip{background:rgba(0,0,0,.35);border-color:rgba(255,255,255,.7);color:#fff}
.creator-media .name{text-shadow:0 2px 12px rgba(0,0,0,.45)}
.creator-media::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(to top,rgba(0,0,0,.55),transparent);pointer-events:none}
.creator-media .name,.creator-media .chip,.creator-media .views{z-index:2}
.creator-body .plat{font-size:.86rem;color:var(--ink-2)}
.creator-body .plat span{font-weight:700;color:var(--purple)}
.creator-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px}
.creator-foot .req{padding:.7em 1em;font-size:.72rem}
.clip-2{position:relative;width:52px;flex:0 0 52px;aspect-ratio:9/16;overflow:hidden;display:block}
.clip-2 img{width:100%;height:100%;object-fit:cover}
.clip-2 span{position:absolute;left:0;right:0;bottom:0;background:rgba(29,21,56,.8);color:#fff;font:700 .6rem/1 var(--font);text-align:center;padding:4px 2px}

/* ===== v3: pro pass (nav, hero stage, numbers, real vs bought, products, stepper, platforms, work wall, quotes, search) ===== */
.site-header.v3 .wrap.nav3{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;min-height:84px;transition:min-height .25s ease}
.site-header.v3.scrolled .wrap.nav3{min-height:66px}
.site-header.v3 .logo img{height:36px;transition:height .25s ease}
.site-header.v3.scrolled .logo img{height:30px}
.nav-left{justify-self:start}
.site-header.v3 .nav-right{justify-self:end;gap:14px}
.site-header.v3 .nav-links{gap:clamp(14px,2vw,28px)}
.site-header.v3 .nav-links a{position:relative;padding:8px 0;font-size:.78rem;letter-spacing:.12em;box-shadow:none;color:var(--ink);transition:color .2s}
.site-header.v3 .nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:3px;background:var(--yellow);transform:scaleX(0);transform-origin:left;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.site-header.v3 .nav-links a:hover,.site-header.v3 .nav-links a[aria-current="page"]{color:var(--purple);box-shadow:none}
.site-header.v3 .nav-links a:hover::after,.site-header.v3 .nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.site-header.v3 .nav-links a.nav-minor{color:var(--ink-2)}
.nav-contact{text-decoration:none;font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--purple);padding:8px 0;position:relative;white-space:nowrap}
.nav-contact::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:3px;background:var(--yellow);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.nav-contact:hover::after,.nav-contact[aria-current="page"]::after{transform:scaleX(1)}
@media (max-width:1180px){.site-header.v3 .wrap.nav3{grid-template-columns:auto 1fr}.site-header.v3 .nav-left,.site-header.v3 .nav-contact,.site-header.v3 .header-cta{display:none}.site-header.v3 .logo{order:-1}}
@media (max-width:1280px){.site-header.v3 .nav-links a{font-size:.72rem;letter-spacing:.1em}}

/* hero with rotating stage */
.hero3{padding-block:clamp(36px,5vw,72px) clamp(36px,5vw,64px);overflow:hidden}
.hero3-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,80px);align-items:center}
.hero3 .hero-copy{max-width:44rem;gap:22px}
.hero3 .h-display{font-size:clamp(2.4rem,5.6vw,5.2rem)}
.hero-stage{position:relative;justify-self:center;width:min(100%,330px);padding:24px 0 10px}
.phone{position:relative;aspect-ratio:9/16;border-radius:30px;overflow:hidden;background:var(--purple);box-shadow:0 34px 70px rgba(75,45,143,.28);outline:6px solid #1D1538;outline-offset:-1px}
.phone video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s ease}
.phone video.is-on{opacity:1}
.stage-dots{position:absolute;left:0;right:0;bottom:14px;display:flex;justify-content:center;gap:6px;z-index:3}
.stage-dots .dot{width:8px;height:8px;border-radius:50%;border:0;background:rgba(255,255,255,.45);padding:0;cursor:pointer;transition:transform .2s,background .2s}
.stage-dots .dot.is-on{background:var(--yellow);transform:scale(1.25)}
.stage-badge{position:absolute;left:-28px;bottom:64px;z-index:4;background:var(--yellow);color:var(--purple);padding:14px 16px 12px;max-width:210px;line-height:1.15;font-size:.78rem;font-weight:700;box-shadow:0 18px 40px rgba(29,21,56,.25)}
.stage-badge .sv{display:block;font-size:2rem;letter-spacing:-.04em;line-height:1;margin-bottom:4px;font-variant-numeric:tabular-nums}
.stage-badge .sf{font-size:1.1rem}
.stage-name{position:absolute;right:-10px;top:10px;z-index:4;background:#fff;border:1.5px solid var(--line);padding:7px 10px;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--purple);box-shadow:0 10px 24px rgba(29,21,56,.08)}
@media (prefers-reduced-motion:no-preference){.hero-stage .phone{animation:float 7s ease-in-out infinite}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}}
@media (max-width:980px){.hero3-grid{grid-template-columns:1fr}.hero-stage{width:min(100%,280px);justify-self:start;margin-left:28px}.stage-badge{left:-28px}}
@media (max-width:480px){.stage-badge{max-width:180px;padding:12px 12px 10px}.stage-badge .sv{font-size:1.6rem}}

/* search with suggestions */
.hero-search{display:grid;gap:10px;margin-top:4px}
.search-label{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--purple)}
.hsearch{display:flex;gap:8px;max-width:640px;flex-wrap:wrap}
.hsearch-field{flex:1 1 280px;display:flex;align-items:center;gap:10px;border:1.5px solid var(--purple);background:#fff;padding:0 14px;min-width:0}
.hsearch-field input{border:0;outline:0;font:inherit;padding:13px 0;width:100%;min-width:0;background:transparent;color:var(--ink)}
.hsearch-field input::placeholder{color:#8a83a8}
.hsearch-field .ico{width:20px;height:20px;color:var(--purple);flex:0 0 20px}
.hsearch .btn{flex:0 0 auto}
.qchips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;max-width:640px}
.qchips .small{font-size:.8rem}
.qchip{border:1.5px solid var(--line);background:var(--paper);font:700 .72rem var(--font);letter-spacing:.06em;padding:7px 11px;cursor:pointer;color:var(--ink);transition:transform .15s,border-color .15s,color .15s,background .15s}
.qchip:hover{border-color:var(--purple);color:var(--purple);background:#fff;transform:translateY(-1px)}
.search-wrap{margin-top:28px;max-width:760px}
.hsearch--inline{max-width:560px}
.ico{display:inline-flex;width:24px;height:24px;color:var(--purple);flex:0 0 auto}
.ico svg{width:100%;height:100%}
.ico--big{width:44px;height:44px}
.btn .ico{width:18px;height:18px;color:currentColor}

/* numbers band */
.stats3{border-block:1px solid var(--line);padding-block:clamp(32px,4vw,48px)}
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:22px}
.stat{display:grid;gap:8px;align-content:start;padding-left:16px;border-left:3px solid var(--yellow)}
.stat .num{font-size:clamp(2.3rem,4.4vw,3.8rem);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--purple);font-variant-numeric:tabular-nums}
.stat .lbl{color:var(--ink-2);font-size:.95rem;max-width:22em;line-height:1.4}
@media (max-width:900px){.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* products */
.prods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.prod{padding:30px 28px 32px;background:var(--paper);display:grid;gap:14px;align-content:start;border-top:4px solid var(--yellow);transition:transform .2s ease,box-shadow .2s ease;min-width:0}
.prod:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(75,45,143,.12)}
.prod h3{font-size:1.3rem;letter-spacing:-.02em}
.prod p{color:var(--ink-2)}
@media (max-width:860px){.prods{grid-template-columns:1fr}}

/* stepper */
.stepper{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;list-style:none;margin:0;padding:0}
.hstep{position:relative;display:grid;gap:10px;padding-top:34px;min-width:0}
.hstep::before{content:"";position:absolute;left:0;right:-28px;top:19px;height:2px;background:rgba(255,255,255,.22)}
.hstep:last-child::before{right:0}
.hnum{position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;background:var(--yellow);color:var(--purple);display:grid;place-items:center;font-weight:800;font-size:1rem;box-shadow:0 0 0 6px var(--purple)}
.hstep .ico{color:var(--yellow);width:30px;height:30px;margin-top:10px}
.hstep h3{color:#fff;font-size:1.15rem;letter-spacing:-.01em}
.hstep p{color:rgba(255,255,255,.82)}
.cta-line--light{border-top-color:rgba(255,255,255,.2)}
@media (max-width:900px){.stepper{grid-template-columns:repeat(2,minmax(0,1fr))}.hstep:nth-child(2)::before{right:0}}
@media (max-width:540px){.stepper{grid-template-columns:1fr;gap:22px}.hstep::before{display:none}.hstep{padding-top:0;padding-left:56px}.hnum{top:0}}

/* real vs bought */
.realfake{background:#fff}
.real-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,80px);align-items:center}
.real-copy{display:grid;gap:18px}
.real-chart{display:grid;gap:18px;padding:clamp(20px,3vw,32px);background:var(--paper);border:1px solid var(--line)}
.rf-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--ink-2)}
.lg::before{content:"";display:inline-block;width:12px;height:12px;margin-right:6px;vertical-align:-1px}
.lg-f::before{background:#C9C2DE}.lg-m::before{background:var(--purple)}.lg-t::before{background:var(--yellow)}
.rf-row{display:grid;grid-template-columns:118px 1fr;gap:14px;align-items:center}
.rf-name b{display:block;color:var(--purple);font-size:1.05rem}
.rf-name span{font-size:.7rem;color:var(--ink-2);text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.rf-bars{display:grid;gap:5px;min-width:0}
.rf-bar{display:flex;align-items:center;gap:8px;min-width:0}
.rf-bar i{display:block;height:12px;width:var(--w);max-width:calc(100% - 64px);transform-origin:left;transform:scaleX(0);transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.rf-row.is-in .rf-bar i{transform:scaleX(1)}
.rf-f i{background:#C9C2DE}.rf-m i{background:var(--purple)}.rf-t i{background:var(--yellow)}
.rf-bar span{font-size:.82rem;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.rf-note{font-size:.78rem}
@media (max-width:900px){.real-grid{grid-template-columns:1fr}.rf-row{grid-template-columns:92px 1fr}}
@media (prefers-reduced-motion:reduce){.rf-bar i{transform:none}}

/* platforms */
.platforms{padding-block:clamp(48px,6vw,80px)}
.plat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.plat-card{background:#fff;border:1.5px solid var(--line);padding:26px 22px;display:grid;gap:10px;justify-items:start;align-content:start;transition:transform .2s,box-shadow .2s,border-color .2s;min-width:0}
.plat-card:hover{transform:translateY(-4px);border-color:var(--purple);box-shadow:0 18px 40px rgba(75,45,143,.1)}
.plat-card img{width:40px;height:40px;object-fit:contain}
.plat-card h3{font-size:1.1rem}
.plat-card p{color:var(--ink-2);font-size:.92rem}
@media (max-width:760px){.plat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* work pieces */
.section-head--row{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;max-width:none}
.pieces{display:grid;gap:16px}
.pieces--6{grid-template-columns:repeat(6,minmax(0,1fr))}
.pieces--wall{grid-template-columns:repeat(5,minmax(0,1fr))}
.piece{background:#fff;border:1.5px solid var(--line);min-width:0;display:grid;grid-template-rows:auto 1fr;transition:transform .2s,box-shadow .2s}
.piece:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(75,45,143,.12)}
.piece-media{position:relative;aspect-ratio:9/16;overflow:hidden;background:#000}
.piece-media video{width:100%;height:100%;object-fit:cover;display:block}
.piece-media .views{position:absolute;left:10px;bottom:10px;background:rgba(29,21,56,.84);color:#fff;font:700 .64rem/1 var(--font);letter-spacing:.06em;text-transform:uppercase;padding:6px 8px;backdrop-filter:blur(4px)}
.piece-media .play{position:absolute;right:10px;top:10px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--purple);display:grid;place-items:center;transition:opacity .2s}
.piece-media .play svg{width:16px;height:16px}
.piece.is-playing .play{opacity:0}
.piece-body{padding:14px 14px 16px;display:grid;gap:4px;align-content:start}
.piece-brand{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--purple)}
.piece-brand.own{color:var(--ink-2)}
.piece-body h3{font-size:.95rem;line-height:1.25;letter-spacing:-.01em;color:var(--ink)}
.piece-who{font-size:.8rem;color:var(--ink-2)}
.piece.is-hidden{display:none}
@media (max-width:1100px){.pieces--6,.pieces--wall{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:760px){.pieces--6,.pieces--wall{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:480px){.pieces--6,.pieces--wall{grid-template-columns:repeat(2,minmax(0,1fr))}}
.wall-tools{display:grid;gap:14px;margin-bottom:10px}
.wall-tools .filters{margin:0}
.count{margin-bottom:16px}
.none-msg{padding:24px 0}

/* quotes */
.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.quote{margin:0;padding:30px 26px 26px;background:#fff;border:1.5px solid var(--line);display:grid;gap:16px;align-content:start;position:relative;min-width:0}
.quote::before{content:"\201C";position:absolute;right:18px;top:2px;font-size:4.4rem;line-height:1;color:var(--yellow);font-weight:800}
.quote blockquote{margin:0;font-size:1.05rem;line-height:1.5;padding-right:28px}
.quote figcaption{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--purple)}
.quote--ph{border-style:dashed;color:var(--ink-2)}
@media (max-width:860px){.quotes{grid-template-columns:1fr}}

/* final band with quick brief */
.final-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,72px);align-items:center}
.final3 .lead{color:rgba(255,255,255,.82)}
.quick--final{background:#fff;border:0;color:var(--ink);box-shadow:0 24px 60px rgba(29,21,56,.3)}
.hero-mail--light{color:rgba(255,255,255,.8);margin-top:14px}
.hero-mail--light a{color:var(--yellow);border-bottom-color:var(--yellow)}
.final3 .creators-note{margin-top:36px}
@media (max-width:980px){.final-grid{grid-template-columns:1fr}}

/* creator card numbers */
.nums{display:grid;gap:4px;padding:10px 12px;background:#fff;border:1px solid var(--line);font-size:.8rem;line-height:1.35}
.nums-l{font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--purple)}
.num-row b{color:var(--purple)}
.fits{font-size:.85rem;color:var(--ink-2)}
.fits span{font-weight:700;color:var(--purple)}
.creator.is-hidden{display:none}

/* motion polish */
@media (prefers-reduced-motion:no-preference){
  .btn{transition:transform .15s ease,background .15s ease,color .15s ease,box-shadow .15s ease}
  .btn--yellow:hover{box-shadow:0 10px 24px rgba(245,201,0,.35)}
  .btn--purple:hover{box-shadow:0 10px 24px rgba(75,45,143,.3)}
}
/* v3.1 fixes */
.final-grid{grid-template-columns:.8fr 1.2fr}
.quick--final .quick-row--4{grid-template-columns:1fr 1fr}
.quick--final .btn{grid-column:1/-1}
@media (max-width:560px){.quick--final .quick-row--4{grid-template-columns:1fr}}

/* ===== v4: calmer type scale, bigger logo, hooked first screen, page covers, typewriter search ===== */
.btn{text-transform:none;letter-spacing:0;font-weight:700;font-size:.95rem;padding:.9em 1.45em}
.header-cta{padding:.8em 1.2em;font-size:.9rem}
.site-header.v3 .logo img{height:46px}
.site-header.v3.scrolled .logo img{height:40px}
.site-header.v3 .nav-links a,.site-header.v3 .nav-links a.nav-minor{text-transform:none;letter-spacing:0;font-size:.98rem;font-weight:600}
.nav-contact{text-transform:none;letter-spacing:0;font-size:.98rem;font-weight:600}
@media (max-width:1280px){.site-header.v3 .nav-links a{font-size:.92rem;letter-spacing:0}}
@media (max-width:1180px){.site-header.v3 .logo img{height:42px}}
.h-display{text-transform:none;font-size:clamp(2.5rem,5vw,4.5rem);letter-spacing:-.035em;line-height:1.02}
.hero .h-display,.hero3 .h-display,.page-hero .h-display{font-size:clamp(2.4rem,4.8vw,4.3rem)}
.eyebrow{font-size:.7rem;letter-spacing:.16em}
.lead{font-size:clamp(1.05rem,1.35vw,1.22rem)}
.menu-links a{text-transform:none;letter-spacing:-.01em;font-size:clamp(1.8rem,7vw,2.4rem)}
.filter,.qchip{text-transform:none;letter-spacing:0;font-size:.86rem;font-weight:600;padding:9px 14px}
.chip{text-transform:none;letter-spacing:.02em;font-size:.72rem}
.cat{text-transform:none;letter-spacing:-.01em}
.step h3,.why h3,.block h2{text-transform:none;letter-spacing:0;font-size:1.05rem}
.foot-links a{text-transform:none;letter-spacing:0;font-size:.98rem;font-weight:600}
.creator-foot .req{text-transform:none;letter-spacing:0;font-size:.86rem}
.copy,.consent .btn{text-transform:none;letter-spacing:0}
.hsearch .btn{text-transform:none}

/* hero 4: hooked first screen */
.hero4{position:relative;padding-block:clamp(28px,4vw,56px) 0;background:linear-gradient(180deg,#F7F5FB 0%,#FFFFFF 75%);overflow:hidden}
.hero4-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,64px);align-items:center;padding-bottom:clamp(28px,4vw,56px)}
.hero4 .hero-copy{gap:18px;max-width:42rem}
.hsearch--hero .hsearch-field{border-width:2px;background:#fff;box-shadow:0 14px 34px rgba(75,45,143,.10)}
.hsearch--hero .hsearch-field input{padding:15px 0;font-size:1.05rem}
.proof-row{display:flex;flex-wrap:wrap;gap:10px 28px;margin:4px 0 0;padding:0;list-style:none}
.proof-row li{font-size:.92rem;color:var(--ink-2);display:flex;align-items:baseline;gap:6px}
.proof-row b{color:var(--purple);font-size:1.15rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.mosaic{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}
.mcol{display:grid;gap:12px}
.mcol--shift{margin-top:48px}
.mtile{margin:0;position:relative;aspect-ratio:9/16;overflow:hidden;border-radius:14px;background:var(--purple);box-shadow:0 18px 40px rgba(29,21,56,.16)}
.mtile video{width:100%;height:100%;object-fit:cover;display:block}
.mtile figcaption{position:absolute;left:8px;right:8px;bottom:8px;background:rgba(29,21,56,.84);color:#fff;font-size:.72rem;line-height:1.2;padding:6px 8px;border-radius:6px;backdrop-filter:blur(4px)}
.mtile figcaption b{color:var(--yellow);font-size:.9rem}
@media (prefers-reduced-motion:no-preference){.mtile{animation:float 9s ease-in-out infinite;animation-delay:var(--d,0s)}}
@media (max-width:980px){
  .hero4-grid{grid-template-columns:1fr}
  .mosaic{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 0 10px;margin-inline:calc(-1*var(--gutter));padding-inline:var(--gutter);-webkit-overflow-scrolling:touch}
  .mcol{display:contents}
  .mcol--shift{margin-top:0}
  .mtile{flex:0 0 46%;max-width:220px;scroll-snap-align:start;animation:none}
}
.ticker{background:var(--yellow);color:var(--purple);overflow:hidden;padding:11px 0}
.ticker-track{display:flex;gap:40px;width:max-content;animation:marquee 46s linear infinite}
.ticker-track span{font-weight:700;font-size:.9rem;white-space:nowrap;display:flex;align-items:center;gap:40px;letter-spacing:0;text-transform:none;color:var(--purple)}
.ticker-track span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--purple)}
.ticker-track .lbl{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800;opacity:.75}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none;flex-wrap:wrap;width:auto}}

/* page covers */
.page-hero{padding-block:clamp(40px,6vw,80px) clamp(32px,5vw,64px);overflow:hidden}
.page-hero .hero-grid--2{grid-template-columns:1.05fr .95fr;align-items:center;gap:clamp(24px,4vw,64px)}
@media (max-width:980px){.page-hero .hero-grid--2{grid-template-columns:1fr}}
.page-hero--dark{background:var(--ink);color:#fff;padding-bottom:0}
.page-hero--dark h1,.page-hero--dark .h-display{color:#fff}
.page-hero--dark .eyebrow{color:var(--yellow)}
.page-hero--dark .lead{color:rgba(255,255,255,.8)}
.strip{overflow:hidden;margin-top:clamp(24px,4vw,40px);padding-bottom:clamp(24px,4vw,40px)}
.strip-track{gap:10px;animation-duration:70s}
.strip-track span{display:block;width:110px;aspect-ratio:9/16;overflow:hidden;border-radius:8px;gap:0;flex:0 0 110px}
.strip-track span::after{display:none}
.strip-track img{width:100%;height:100%;object-fit:cover;display:block}
.page-hero--yellow{background:var(--yellow);color:var(--purple)}
.page-hero--yellow .lead{color:#3a2a6b}
.page-hero--yellow .hsearch-field{border-color:var(--purple);background:#fff}
.page-hero--yellow .hero-stage{padding-top:0}
.page-hero--yellow .stage-badge{background:var(--purple);color:#fff}
.page-hero--yellow .stage-badge .sv,.page-hero--yellow .stage-badge .sf{color:var(--yellow)}
.page-hero--purple{background:var(--purple);color:#fff}
.page-hero--purple h1,.page-hero--purple .h-display{color:#fff}
.page-hero--purple .eyebrow{color:var(--yellow)}
.page-hero--purple .lead{color:rgba(255,255,255,.82)}
.page-hero--paper{background:var(--paper);padding-bottom:0}
.page-hero--paper .hero-grid{padding-bottom:clamp(32px,5vw,64px)}
.page-hero .ticker{margin-top:clamp(24px,4vw,40px)}
.page-hero--paper .ticker{margin-top:0}
.proof-card{background:#fff;color:var(--ink);padding:clamp(20px,3vw,30px);border-radius:16px;display:grid;gap:18px;box-shadow:0 28px 70px rgba(29,21,56,.35)}
.proof-card .eyebrow{color:var(--ink-2)}
.logo-rotator{position:relative;height:64px}
.logo-rotator img{position:absolute;left:0;top:50%;transform:translateY(-50%);width:auto;max-width:240px;opacity:0;transition:opacity .6s ease}
.logo-rotator img.is-on{opacity:1}
.proof-card .stats-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:0;gap:14px}
.proof-card .stat{padding-left:12px}
.proof-card .stat .num{font-size:clamp(1.6rem,2.4vw,2.1rem)}
.proof-card .stat .lbl{font-size:.78rem}
.rot-word{display:inline-block;color:var(--purple);transition:opacity .35s ease,transform .35s ease;border-bottom:4px solid var(--yellow)}
.rot-word.is-out{opacity:0;transform:translateY(8px)}
.big-mail{font-size:clamp(1.4rem,3.2vw,2.4rem);font-weight:800;color:var(--yellow);text-decoration:none;letter-spacing:-.02em;border-bottom:3px solid rgba(245,201,0,.4)}
.big-mail:hover{border-bottom-color:var(--yellow)}
.search-wrap{max-width:640px;margin-top:22px}
.hsearch--inline{max-width:640px}
/* v4.1: hero headline fits on two lines */
.hero4 .h-display{font-size:clamp(2.2rem,3.6vw,3.3rem)}
.hero4-grid{grid-template-columns:1.15fr .85fr}
@media (max-width:980px){.hero4-grid{grid-template-columns:1fr}}

/* ===== v5: colour system, rounded cards, one-action hero, stat card, mobile simplification ===== */
:root{--ink-purple:#2B1A5E;--purple-deep:#3A2275;--r:16px;--r-s:10px}
.btn{border-radius:var(--r-s)}
.btn--outline{border-color:rgba(75,45,143,.35)}
.btn--outline:hover{border-color:var(--purple)}
.prod,.plat-card,.piece,.creator,.quote,.case,.service,.quick,.path,.nums,.proof-card,.real-chart,.cmp{border-radius:var(--r)}
.piece-media{border-radius:var(--r) var(--r) 0 0}
.creator-media{border-radius:var(--r) var(--r) 0 0}
.filter,.qchip{border-radius:999px}
.lang{border-radius:8px;overflow:hidden}
.hsearch-field{border-radius:var(--r-s)}
.field input,.field select,.field textarea{border-radius:0}
.quick select,.quick input[type="date"]{border-radius:8px}
.form-msg{border-radius:8px}
.stat{border-left-width:3px}

/* hero 5: dark purple, one action */
.hero5{position:relative;background:radial-gradient(900px 500px at 85% 10%,rgba(245,201,0,.14),transparent 60%),linear-gradient(165deg,var(--purple-deep) 0%,var(--purple) 55%,var(--ink-purple) 100%);color:#fff;padding-block:clamp(36px,5vw,72px) clamp(120px,14vw,170px);overflow:hidden}
.hero5-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,72px);align-items:center}
.hero5 .hero-copy{gap:18px;max-width:40rem}
.hero5 .eyebrow{color:var(--yellow)}
.hero5 .h-display{color:#fff;font-size:clamp(2.3rem,4vw,3.6rem)}
.hero5 .h-display .hl{color:var(--yellow)}
.hero5 .lead{color:rgba(255,255,255,.84);max-width:34em}
.scard{display:grid;gap:10px;background:#fff;color:var(--ink);padding:12px;border-radius:var(--r);box-shadow:0 24px 60px rgba(20,10,50,.35)}
.scard .hsearch{max-width:none;gap:8px}
.scard .hsearch-field{border:1.5px solid var(--line);background:var(--paper);box-shadow:none}
.scard .hsearch-field input{padding:14px 0;font-size:1rem}
.scard .btn .ico{width:18px;height:18px;margin-left:2px}
.or-line{font-size:.86rem;color:var(--ink-2);padding:0 4px 2px}
.or-line a{color:var(--purple);font-weight:700;text-decoration:none;border-bottom:2px solid var(--yellow)}
.assure{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px}
.assure li{display:flex;align-items:center;gap:8px;font-size:.9rem;color:rgba(255,255,255,.88)}
.assure .ico{width:18px;height:18px;color:var(--yellow)}
.pills{display:grid;gap:8px;margin-top:4px}
.pills-l{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:rgba(255,255,255,.6)}
.pills-row{display:flex;flex-wrap:wrap;gap:8px}
.pills-row span{font-size:.8rem;font-weight:600;color:#fff;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);padding:6px 11px;border-radius:999px;white-space:nowrap}
.hero5 .mtile{box-shadow:0 20px 50px rgba(10,5,30,.45);outline:1px solid rgba(255,255,255,.12)}
.hero5 .mtile figcaption{background:rgba(20,12,48,.86)}
@media (max-width:980px){
  .hero5{padding-block:28px 110px}
  .hero5-grid{grid-template-columns:1fr;gap:22px}
  .hero5 .h-display{font-size:2.15rem}
  .hero5 .lead{font-size:1rem}
  .scard .hsearch .btn{width:100%;justify-content:center}
  .assure{gap:6px 16px}
  .assure li{font-size:.84rem}
  .pills-row{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(-1*var(--gutter));padding-inline:var(--gutter);padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .pills-row::-webkit-scrollbar{display:none}
  .mosaic{margin-top:4px}
}

/* stat card overlapping the hero */
.statband{background:var(--paper);padding-bottom:clamp(24px,4vw,40px)}
.statcard{background:#fff;border-radius:var(--r);padding:clamp(20px,3vw,32px);margin-top:clamp(-96px,-10vw,-120px);position:relative;z-index:2;box-shadow:0 24px 60px rgba(29,21,56,.14);display:grid;gap:18px}
.stats-grid--3{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:4px}
.statcard .stat .num{font-size:clamp(1.9rem,3.4vw,3rem)}
.statcard .stat .lbl{font-size:.88rem}
.logos--card{border:0;padding:14px 0 0;border-top:1px solid var(--line);margin-top:4px}
.logos--card .label{margin-bottom:12px}
@media (max-width:640px){.stats-grid--3{grid-template-columns:1fr 1fr}.stats-grid--3 .stat:last-child{grid-column:1/-1}.statcard{margin-top:-86px}}

/* comparison cards */
.cmp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cmp{background:#fff;border:1.5px solid var(--line);padding:26px 24px;display:grid;gap:14px;align-content:start;min-width:0}
.cmp h3{font-size:1.15rem}
.cmp ul{display:grid;gap:10px;padding:0;margin:0;list-style:none}
.cmp li{position:relative;padding-left:18px;color:var(--ink-2);font-size:.95rem}
.cmp li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:#C9C2DE}
.cmp--us{background:var(--purple);color:#fff;border-color:var(--purple);box-shadow:0 24px 50px rgba(75,45,143,.25)}
.cmp--us h3{color:var(--yellow)}
.cmp--us li{color:rgba(255,255,255,.9)}
.cmp--us li::before{background:var(--yellow)}
@media (max-width:860px){.cmp-grid{grid-template-columns:1fr}}

/* header and mobile bar simplification */
@media (max-width:1180px){
  .site-header.v3 .lang,.site-header.v3 .spa-back{display:none!important}
  .site-header.v3 .wrap.nav3{min-height:68px}
  .site-header.v3 .logo img{height:38px}
  .site-header.v3.scrolled .logo img{height:34px}
  .cta-bar{grid-template-columns:1fr 52px;gap:8px}
  .cta-bar .btn{border-radius:var(--r-s)}
  .cta-bar .bar-mail{padding:0;justify-content:center;width:52px}
  .cta-bar .bar-mail .ico{width:22px;height:22px;color:#fff}
  .section{padding-block:clamp(48px,9vw,72px)}
  .section-head{margin-bottom:24px}
  .h-section{font-size:clamp(1.7rem,6vw,2.4rem)}
  .lead{font-size:1rem}
  .eyebrow{font-size:.66rem}
  .creator-body .plat,.creator-body .format{display:none}
  .creator-body{padding:16px 16px 20px;gap:7px}
  .real-chart{padding:16px}
  .rf-row{grid-template-columns:84px 1fr;gap:10px}
  .rf-bar i{height:10px}
  .quick{padding:16px}
  .final3 .creators-note{margin-top:24px}
}
.menu-foot .lang{justify-self:start}
/* v5.1 */
.page-hero--yellow .hsearch .btn{background:var(--purple);color:#fff;border-color:var(--purple)}
.page-hero--yellow .hsearch .btn:hover{background:#3A2275}
@media (max-width:640px){.page-hero .cta-row .btn:nth-child(2){display:none}}
/* v6: cover without search */
.hero5 .cta-row{margin-top:4px}
.hero5 .btn--white{border-color:rgba(255,255,255,.55)}
.hero5 .btn--white .ico{color:currentColor}
@media (max-width:640px){.hero5 .cta-row .btn:nth-child(2){display:none}}
.hero5 .pills{opacity:.92}
/* v6.1: creators shown by vibe label and number, never by name */
.creator-media .name--label{font-size:1.25rem;line-height:1.15;letter-spacing:-.02em;right:22px;max-width:70%}
.creator-media .chip{max-width:75%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage-name{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* v6.2: card label keeps its own row above the views badge (no overlap on one-line labels) */
.creator-media .name--label{bottom:62px;right:22px;max-width:calc(100% - 44px)}
.creator.tone-yellow .creator-media .name--label{color:var(--yellow)}

/* ===== v7: categories not brands, five pages, one ask per page ===== */
.pills-row a{font-size:.8rem;font-weight:600;color:#fff;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);padding:6px 11px;border-radius:999px;white-space:nowrap;text-decoration:none;transition:background .2s,color .2s,border-color .2s}
.pills-row a:hover{background:var(--yellow);color:var(--purple);border-color:var(--yellow)}
.plat-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;padding-top:14px;border-top:1px solid var(--line)}
.plat-row .label{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);font-weight:800;margin-right:6px}
.plat-row span{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.92rem;color:var(--purple)}
.plat-row img{width:22px;height:22px;object-fit:contain}
.catgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.catcard{display:grid;grid-template-columns:60px 1fr;gap:14px;align-items:center;padding:14px;background:#fff;border:1.5px solid var(--line);border-radius:var(--r);text-decoration:none;color:inherit;min-width:0;transition:transform .2s,box-shadow .2s,border-color .2s}
.catcard:hover{transform:translateY(-3px);border-color:var(--purple);box-shadow:0 18px 40px rgba(75,45,143,.12)}
.catcard img,.catcard .cc-ph{width:60px;aspect-ratio:9/16;object-fit:cover;border-radius:8px;background:var(--purple);display:block}
.cc-body{min-width:0}
.catcard h3{font-size:1.05rem;letter-spacing:-.01em}
.catcard .cc-who{font-size:.8rem;color:var(--ink-2);margin-top:4px;line-height:1.3}
.catcard .cc-best{font-size:.8rem;color:var(--ink);margin-top:3px}
.catcard .cc-best b{color:var(--purple)}
@media (max-width:1100px){.catgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.catgrid{grid-template-columns:1fr 1fr;gap:10px}.catcard{grid-template-columns:44px 1fr;padding:10px;gap:10px}.catcard img,.catcard .cc-ph{width:44px}.catcard h3{font-size:.95rem}.catcard .cc-who,.catcard .cc-best{font-size:.74rem}}
.bestfor{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.bestfor .bf-l{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--purple);margin-right:2px}
.bestfor span:not(.bf-l){font-size:.78rem;font-weight:600;color:var(--purple);background:#fff;border:1.5px solid var(--line);padding:4px 9px;border-radius:999px}
.worked{font-size:.85rem;color:var(--ink-2)}
.worked span{font-weight:700;color:var(--purple)}
.cards-sub{margin-bottom:22px}
.wall-head{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin:clamp(40px,6vw,64px) 0 18px;padding-top:28px;border-top:1px solid var(--line)}
.wall-head h2{font-size:clamp(1.5rem,3vw,2.2rem);margin-top:8px}
.wall-head .muted{max-width:34em}
.final-cta{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,72px);align-items:center}
.final-cta .lead{color:rgba(255,255,255,.82)}
.final-cta .cta-row{justify-content:flex-start}
@media (max-width:860px){.final-cta{grid-template-columns:1fr}}
.page-hero--purple .assure{margin-top:4px}
.contact-band .big-mail{display:inline-block}
@media (max-width:640px){.hero5 .pills{display:none}}
.route{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:18px}
.route a,.route .route-link{color:#fff;font-weight:700;text-decoration:none;border-bottom:2px solid rgba(245,201,0,.5)}
.route a:hover{border-bottom-color:var(--yellow)}
.statcard .stat:first-child .num{font-size:clamp(1.6rem,2.6vw,2.4rem)}
/* v7.2: six categories, three nav items */
.catgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:700px){.catgrid{grid-template-columns:1fr 1fr}}
.page-hero--purple .final-cta{align-items:center}
.page-hero--purple .route a{color:#fff}

/* v7.4: brands page that sells on sight (video-led cover, per-piece ask, yellow services, purple price band) */
.section--yellow{background:var(--yellow);color:var(--purple)}
.section--yellow .eyebrow,.section--yellow h2,.section--yellow h3{color:var(--purple)}
.brands-hero{padding-bottom:clamp(40px,6vw,72px);background:linear-gradient(180deg,#1D1538 0%,#2B1A5E 100%)}
.brands-hero .hero-copy{max-width:46rem}
.brands-hero .assure li{color:rgba(255,255,255,.85)}
.series-head{display:grid;gap:8px;margin:clamp(36px,5vw,56px) 0 20px;max-width:46em}
.series-head h2{color:#fff}
.series-head .eyebrow{color:var(--yellow)}
.series-head .muted{color:rgba(255,255,255,.75)}
.piece--series{border:0;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.piece-cta{justify-content:center;width:100%;font-size:.8rem;padding:.75em .6em;margin-top:8px;text-align:center}
.piece-cta .ico{width:16px;height:16px;flex:0 0 16px}
.svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.svc{display:grid;grid-template-columns:36px 1fr;gap:14px;align-items:start;background:#fff;border-radius:var(--r);padding:20px 20px 22px;min-width:0}
.svc .ico{width:34px;height:34px;color:var(--purple)}
.svc h3{font-size:1.05rem;margin-bottom:6px}
.svc p{color:var(--ink-2);font-size:.95rem}
@media (max-width:900px){.svc-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.svc-grid{grid-template-columns:1fr}}
.pricing-band .statement{align-items:center}
@media (max-width:640px){.brands-hero .cta-row .btn:nth-child(2){display:flex}}
@media (max-width:480px){.series.pieces--6{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1*var(--gutter));padding:4px var(--gutter) 12px;-webkit-overflow-scrolling:touch}.series .piece{flex:0 0 72%;scroll-snap-align:start}}
.piece--series .piece-body{display:flex;flex-direction:column;gap:4px}
.piece--series .piece-cta{margin-top:auto;white-space:normal;line-height:1.2;padding-top:.8em;padding-bottom:.8em}
.piece--series .piece-cta .ico{margin-left:2px}

/* v7.5: creators by first name, rotating best pieces on the card */
.creator-media--stage video.rot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#000;opacity:0;transition:opacity .7s ease}
.creator-media--stage video.rot.is-on{opacity:1}
.creator-media .name--name{font-size:2rem;letter-spacing:-.03em;bottom:56px}
.stage-dots--card{position:absolute;left:22px;right:auto;bottom:24px;justify-content:flex-start;z-index:3}
.stage-dots--card .dot{width:9px;height:9px;background:rgba(255,255,255,.55)}
.stage-dots--card .dot.is-on{background:var(--yellow)}
.creator-body .who{font-weight:700;color:var(--purple);font-size:1.02rem;line-height:1.25}
.creator-media .views .sv{color:var(--yellow)}
@media (max-width:1180px){.creator-body .plat{display:block}}

/* ===== v8: three pages; creators live on the home page with swipeable pieces; category tiles are the filters ===== */
.catbar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;margin-bottom:22px}
.cattile{display:grid;grid-template-columns:44px 1fr;gap:10px;align-items:center;text-align:left;padding:10px 12px;background:#fff;border:1.5px solid var(--line);border-radius:var(--r);cursor:pointer;font:inherit;color:var(--ink);min-width:0;transition:transform .2s,border-color .2s,box-shadow .2s}
.cattile img,.cattile .ct-ph{width:44px;aspect-ratio:9/16;object-fit:cover;border-radius:8px;background:var(--purple);display:grid;place-items:center;color:var(--yellow)}
.cattile .ct-ph .ico{width:22px;height:22px;color:var(--yellow)}
.cattile .ct-name{display:block;font-weight:800;color:var(--purple);font-size:.98rem;letter-spacing:-.01em;line-height:1.15}
.cattile .ct-sub{display:block;font-size:.74rem;color:var(--ink-2);margin-top:3px;line-height:1.25}
.cattile:hover{transform:translateY(-2px);border-color:var(--purple)}
.cattile.is-on{background:var(--purple);border-color:var(--purple);color:#fff;box-shadow:0 14px 30px rgba(75,45,143,.25)}
.cattile.is-on .ct-name{color:var(--yellow)}
.cattile.is-on .ct-sub{color:rgba(255,255,255,.8)}
@media (max-width:1100px){.catbar{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:700px){.catbar{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1*var(--gutter));padding:4px var(--gutter) 10px;-webkit-overflow-scrolling:touch;scrollbar-width:none}.catbar::-webkit-scrollbar{display:none}.cattile{flex:0 0 46%;scroll-snap-align:start}}
.cstage{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r) var(--r) 0 0;background:var(--purple)}
.ctrack{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ctrack::-webkit-scrollbar{display:none}
.cslide{flex:0 0 100%;margin:0;position:relative;scroll-snap-align:start;height:100%}
.cslide video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
.cslide figcaption{position:absolute;right:12px;bottom:14px;background:rgba(29,21,56,.82);color:#fff;font:700 .68rem/1 var(--font);letter-spacing:.06em;text-transform:uppercase;padding:7px 9px;border-radius:6px;backdrop-filter:blur(4px)}
.cslide figcaption b{color:var(--yellow);font-size:.82rem}
.cstage::after{content:"";position:absolute;inset:auto 0 0 0;height:42%;background:linear-gradient(to top,rgba(0,0,0,.55),transparent);pointer-events:none}
.cname{position:absolute;left:18px;bottom:44px;z-index:2;color:#fff;font-size:1.9rem;font-weight:800;letter-spacing:-.03em;line-height:1;text-shadow:0 2px 12px rgba(0,0,0,.45);pointer-events:none}
.cnav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.9);color:var(--purple);font:700 22px/1 var(--font);cursor:pointer;display:grid;place-items:center;padding:0 0 3px;opacity:0;transition:opacity .2s,background .2s}
.cnav--prev{left:10px}.cnav--next{right:10px}
.cstage:hover .cnav{opacity:1}
.cnav:hover{background:var(--yellow)}
@media (hover:none){.cnav{opacity:.9;width:30px;height:30px}}
.cdots{position:absolute;left:18px;bottom:18px;z-index:2;display:flex;gap:6px}
.cdots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.5)}
.cdots i.is-on{background:var(--yellow);transform:scale(1.25)}
.cstage--empty{display:grid;place-items:end start;padding:18px}
.creator-body{gap:10px;padding:18px 18px 22px}
.creator-body .cnums{font-size:.86rem;color:var(--ink-2)}
.creator-body .req{justify-content:center;width:100%;margin-top:4px}
.creator-body .req .ico{width:16px;height:16px}
.creator-line{font-size:1.05rem}
.creator-line a{color:var(--purple);font-weight:700;text-decoration:none;border-bottom:2px solid var(--yellow)}
@media (max-width:1180px){.creator-body{padding:16px 16px 20px}}
.cattile{grid-template-columns:38px 1fr;gap:9px;padding:9px 10px}
.cattile img,.cattile .ct-ph{width:38px}
.cattile .ct-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.7rem}
.cattile .ct-name{font-size:.94rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (min-width:1200px){.creators{grid-template-columns:repeat(4,minmax(0,1fr))}.cname{font-size:1.6rem}}
.cattile .ct-text{min-width:0;display:block}

/* v8.1: cards aligned (equal height, button pinned to the bottom), brand tag on slides */
.creator{display:flex;flex-direction:column}
.creator .cstage{flex:0 0 auto}
.creator-body{flex:1 1 auto;display:flex;flex-direction:column;gap:10px}
.creator-body .who{min-height:2.5em;line-height:1.25}
.creator-body .bestfor{min-height:4.6em;align-content:flex-start}
.creator-body .cnums{margin-top:auto}
.creator-body .req{margin-top:0}
.cslide figcaption .for{display:block;margin-top:4px;color:var(--yellow);font-size:.62rem;letter-spacing:.08em}

/* ===== v9: watch everything with sound ===== */
.creator-body .more{display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;padding:0;font:700 .88rem var(--font);color:var(--purple);cursor:pointer;text-align:left;border-bottom:2px solid var(--yellow);align-self:flex-start}
.creator-body .more .ico{width:18px;height:18px;color:var(--purple)}
.creator-body .more:hover{color:#3A2275}
.cstage .ctrack{cursor:pointer}
body.lb-open{overflow:hidden}
.lb{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:16px}
.lb[hidden]{display:none}
.lb-backdrop{position:absolute;inset:0;background:rgba(20,12,48,.86);backdrop-filter:blur(6px)}
.lb-panel{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:0;width:min(100%,980px);max-height:calc(100vh - 32px);background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:0 40px 90px rgba(0,0,0,.5)}
.lb-player{position:relative;background:#000;aspect-ratio:9/16;max-height:calc(100vh - 32px)}
.lb-player video{width:100%;height:100%;object-fit:contain;display:block;background:#000}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.9);color:var(--purple);font:700 24px/1 var(--font);cursor:pointer;display:grid;place-items:center;padding:0 0 3px}
.lb-nav[hidden]{display:none}
.lb-prev{left:10px}.lb-next{right:10px}
.lb-close{position:absolute;right:10px;top:10px;z-index:2;width:38px;height:38px;border-radius:50%;border:0;background:var(--yellow);color:var(--purple);font:700 24px/1 var(--font);cursor:pointer;display:grid;place-items:center;padding:0 0 2px}
.lb-side{display:flex;flex-direction:column;gap:10px;padding:26px 24px 22px;overflow:auto;min-width:0}
.lb-name{font-size:1.7rem;font-weight:800;letter-spacing:-.03em;color:var(--purple);line-height:1}
.lb-label{font-weight:700;color:var(--ink-2)}
.lb-title{font-size:1.1rem;margin-top:6px}
.lb-meta{font-size:.92rem;color:var(--ink-2)}
.lb-meta b{color:var(--purple)}
.lb-brand{color:var(--purple);font-weight:700}
.lb-thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.lb-thumb{position:relative;width:64px;aspect-ratio:9/16;border:2px solid transparent;border-radius:8px;overflow:hidden;padding:0;background:#000;cursor:pointer}
.lb-thumb img{width:100%;height:100%;object-fit:cover;display:block;opacity:.85}
.lb-thumb span{position:absolute;left:0;right:0;bottom:0;background:rgba(29,21,56,.85);color:#fff;font:700 .6rem/1 var(--font);text-align:center;padding:4px 2px}
.lb-thumb i{position:absolute;left:0;right:0;top:0;background:var(--yellow);color:var(--purple);font:700 .52rem/1.1 var(--font);text-align:center;padding:3px 2px;font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-thumb.is-on{border-color:var(--yellow)}
.lb-thumb.is-on img{opacity:1}
.lb-req{margin-top:auto;justify-content:center}
.lb-hint{font-size:.78rem}
@media (max-width:820px){
  .lb{padding:0}
  .lb-panel{grid-template-columns:1fr;width:100%;max-height:100vh;height:100vh;border-radius:0}
  .lb-player{aspect-ratio:auto;height:58vh;max-height:none}
  .lb-side{padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px));gap:8px}
  .lb-name{font-size:1.4rem}
  .lb-thumbs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}
  .lb-thumb{flex:0 0 52px}
}
.cslide--img img{width:100%;height:100%;object-fit:cover;display:block}
.lb-img{width:100%;height:100%;object-fit:contain;display:block;background:#000}
.lb-img[hidden]{display:none}

/* ===== v10: covers that hook ===== */
.hero5{padding-bottom:0}
.hero5 .hero5-grid{padding-bottom:clamp(40px,6vw,72px);grid-template-columns:1fr 1.05fr}
.mosaic--wall{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;transform:rotate(-5deg) scale(1.06);transform-origin:center;margin-right:-6%}
.mosaic--wall .mtile{border-radius:12px}
.mosaic--wall .mtile figcaption{font-size:.68rem;padding:5px 7px}
.mosaic--wall .mcol--shift{margin-top:40px}
.strip--big{margin-top:0;padding:18px 0 26px;background:linear-gradient(180deg,rgba(0,0,0,.25),transparent);border-top:1px solid rgba(255,255,255,.1)}
.strip--big .strip-track{gap:12px;animation-duration:90s}
.strip--big .strip-track span{width:150px;flex:0 0 150px;border-radius:10px;position:relative}
.strip--big .strip-track em{position:absolute;left:6px;right:6px;bottom:6px;background:rgba(29,21,56,.84);color:#fff;font:400 .66rem/1.2 var(--font);font-style:normal;padding:4px 6px;border-radius:5px;display:block;text-align:left}
.strip--big .strip-track em b{color:var(--yellow)}
.page-hero--paper .strip--big,.page-hero--purple .strip--big{border-top-color:rgba(75,45,143,.12)}
.page-hero--paper{padding-bottom:0}
.page-hero--purple.contact-band{padding-bottom:0}
.page-hero--purple .final-cta{padding-bottom:clamp(32px,5vw,56px)}
@media (max-width:980px){
  .mosaic--wall{transform:none;margin-right:0}
  .hero5 .hero5-grid{grid-template-columns:1fr}
  .strip--big .strip-track span{width:120px;flex:0 0 120px}
}

/* v10.2: one tidy row of category tiles, tighter rhythm, CTA in the section head */
.statband{padding-bottom:clamp(16px,2vw,24px)}
.creators-sec{padding-top:clamp(40px,5vw,64px)}
.creators-sec .section-head{margin-bottom:22px;align-items:center}
.creators-sec .section-head .lead{margin-top:10px}
.creators-sec .section-head .btn{flex:0 0 auto}
.catbar{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;margin-bottom:18px}
.cattile{grid-template-columns:32px 1fr;gap:9px;padding:8px 10px;border-radius:12px}
.cattile img,.cattile .ct-ph{width:32px;border-radius:6px}
.cattile .ct-ph .ico{width:18px;height:18px}
.cattile .ct-name{font-size:.86rem}
.cattile .ct-sub{font-size:.64rem;margin-top:2px}
@media (max-width:1100px){.catbar{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:700px){.catbar{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1*var(--gutter));padding:4px var(--gutter) 10px;scrollbar-width:none}.catbar::-webkit-scrollbar{display:none}.cattile{flex:0 0 44%;scroll-snap-align:start}.creators-sec .section-head{flex-direction:column;align-items:flex-start}}

/* ===== v10.3: how it works with real graphic elements and motion ===== */
.how2 .section-head{align-items:center;margin-bottom:clamp(28px,4vw,44px)}
.flow{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;list-style:none;margin:0;padding:0}
.flow-line{position:absolute;left:0;right:0;top:calc(150px + 26px);height:2px;background:rgba(255,255,255,.16);z-index:0}
.flow-line::after{content:"";position:absolute;inset:0;background:var(--yellow);transform:scaleX(0);transform-origin:left;transition:transform 2.2s cubic-bezier(.2,.7,.2,1)}
.flow.is-in .flow-line::after{transform:scaleX(1)}
.flow-dot{position:absolute;top:-6px;left:0;width:14px;height:14px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 7px rgba(245,201,0,.22);opacity:0}
.flow.is-in .flow-dot{opacity:1;animation:travel 7s linear 2.2s infinite}
@keyframes travel{0%{left:0}100%{left:calc(100% - 14px)}}
.fstep{position:relative;z-index:1;display:grid;gap:10px;min-width:0;animation-delay:calc(var(--i,0)*.18s)}
.fart{position:relative;height:150px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);overflow:hidden;display:grid;place-items:center}
.fhead{display:flex;align-items:center;gap:10px;margin-top:14px}
.fnum{width:40px;height:40px;border-radius:50%;background:var(--yellow);color:var(--purple);display:grid;place-items:center;font-weight:800;box-shadow:0 0 0 6px var(--purple)}
.fday{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--yellow)}
.fstep h3{color:#fff;font-size:1.15rem;letter-spacing:-.01em}
.fstep p{color:rgba(255,255,255,.82)}
.how-foot{margin-top:28px;color:rgba(255,255,255,.75)}
.how-foot a{color:var(--yellow);font-weight:700;text-decoration:none;border-bottom:2px solid rgba(245,201,0,.4)}
/* art 1: a brief being typed */
.fform{width:72%;display:grid;gap:9px}
.fform .fl{display:block;height:9px;border-radius:5px;background:rgba(255,255,255,.28);width:var(--w,80%);transform:scaleX(0);transform-origin:left}
.fform .fl-1{--w:52%}.fform .fl-2{--w:86%}.fform .fl-3{--w:66%}.fform .fl-4{--w:40%}
.fform .fbtn{display:block;height:22px;width:46%;border-radius:7px;background:var(--yellow);margin-top:4px;transform:scale(.6);opacity:0}
.flow.is-in .fform .fl{animation:typeline .7s cubic-bezier(.2,.7,.2,1) forwards}
.flow.is-in .fform .fl-2{animation-delay:.25s}.flow.is-in .fform .fl-3{animation-delay:.5s}.flow.is-in .fform .fl-4{animation-delay:.75s}
.flow.is-in .fform .fbtn{animation:pop .5s cubic-bezier(.2,.7,.2,1) 1.1s forwards}
.fcursor{position:absolute;right:16px;top:16px;width:2px;height:16px;background:var(--yellow);animation:blink 1s steps(2) infinite}
@keyframes typeline{to{transform:scaleX(1)}}
@keyframes pop{to{transform:scale(1);opacity:1}}
@keyframes blink{50%{opacity:0}}
/* art 2: a fanned shortlist of real faces */
.fart--shortlist .fp{position:absolute;width:54px;height:96px;object-fit:cover;border-radius:8px;box-shadow:0 10px 24px rgba(0,0,0,.35);top:27px;left:50%;opacity:0}
.flow.is-in .fart--shortlist .fp-1{animation:fan1 .7s cubic-bezier(.2,.7,.2,1) .3s forwards}
.flow.is-in .fart--shortlist .fp-2{animation:fan2 .7s cubic-bezier(.2,.7,.2,1) .45s forwards}
.flow.is-in .fart--shortlist .fp-3{animation:fan3 .7s cubic-bezier(.2,.7,.2,1) .6s forwards}
@keyframes fan1{from{transform:translate(-50%,30px) rotate(0)}to{transform:translate(-110%,0) rotate(-12deg);opacity:1}}
@keyframes fan2{from{transform:translate(-50%,30px)}to{transform:translate(-50%,-6px);opacity:1}}
@keyframes fan3{from{transform:translate(-50%,30px) rotate(0)}to{transform:translate(10%,0) rotate(12deg);opacity:1}}
.fcheck{position:absolute;right:14px;bottom:12px;width:30px;height:30px;border-radius:50%;background:var(--yellow);display:grid;place-items:center;transform:scale(0)}
.fcheck .ico{width:18px;height:18px;color:var(--purple)}
.flow.is-in .fcheck{animation:pop .4s cubic-bezier(.2,.7,.2,1) 1.2s forwards;transform:scale(0);opacity:0}
/* art 3: a phone with the labeled video and the approval */
.fphone{position:relative;width:62px;height:112px;border-radius:12px;border:3px solid #fff;overflow:hidden;background:#000;box-shadow:0 12px 26px rgba(0,0,0,.35)}
.fphone img{width:100%;height:100%;object-fit:cover;display:block}
.ftag{position:absolute;left:5px;bottom:6px;background:rgba(29,21,56,.85);color:#fff;font:700 .5rem/1 var(--font);padding:3px 5px;border-radius:4px}
.fapproved{position:absolute;right:12px;top:50%;transform:translate(30px,-50%);opacity:0;display:inline-flex;align-items:center;gap:5px;background:var(--yellow);color:var(--purple);padding:6px 9px;border-radius:999px;font:800 .66rem/1 var(--font)}
.fapproved .ico{width:14px;height:14px;color:var(--purple)}
.fapproved em{font-style:normal}
.flow.is-in .fapproved{animation:slidein .5s cubic-bezier(.2,.7,.2,1) 1s forwards}
@keyframes slidein{to{transform:translate(0,-50%);opacity:1}}
/* art 4: report bars and a rising line */
.fbars{position:absolute;left:18%;right:18%;bottom:22px;height:92px;display:flex;align-items:flex-end;gap:12px}
.fbars i{flex:1;height:var(--h);background:rgba(255,255,255,.3);border-radius:6px 6px 2px 2px;transform:scaleY(0);transform-origin:bottom}
.fbars i:last-child{background:var(--yellow)}
.flow.is-in .fbars i{animation:grow .8s cubic-bezier(.2,.7,.2,1) forwards}
.flow.is-in .fbars i:nth-child(2){animation-delay:.2s}.flow.is-in .fbars i:nth-child(3){animation-delay:.4s}
@keyframes grow{to{transform:scaleY(1)}}
.fline{position:absolute;left:14%;right:14%;top:20px;height:70px;width:72%;color:var(--yellow);stroke-dasharray:160;stroke-dashoffset:160}
.flow.is-in .fline path{animation:draw 1.6s ease .5s forwards;stroke-dasharray:160;stroke-dashoffset:160}
@keyframes draw{to{stroke-dashoffset:0}}
@media (max-width:980px){.flow{grid-template-columns:repeat(2,minmax(0,1fr))}.flow-line,.flow-dot{display:none}}
@media (max-width:540px){.flow{grid-template-columns:1fr}.fart{height:130px}}
@media (prefers-reduced-motion:reduce){.flow .fl,.flow .fbtn,.flow .fp,.flow .fcheck,.flow .fapproved,.flow .fbars i{animation:none!important;transform:none!important;opacity:1!important}.flow-dot{animation:none!important}}
/* v10.4: straight wall, no tilt */
.mosaic--wall{transform:none;margin-right:0;gap:12px}
.mosaic--wall .mcol--shift{margin-top:36px}

/* ===== v10.5: icons drawn from the logo mark (lobe + stem), two-tone ===== */
.ico .pf{fill:var(--yellow)}
.ico .pm{fill:var(--purple)}
.ico .ps,.ico .ps2{fill:none;stroke:var(--purple);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ico .ps2{stroke:var(--yellow);stroke-width:1.6}
.btn--yellow .ico .pf,.fcheck .ico .pf,.fapproved .ico .pf{fill:var(--purple)}
.btn--yellow .ico .pm,.fcheck .ico .pm,.fapproved .ico .pm{fill:var(--yellow)}
.btn--yellow .ico .ps,.fcheck .ico .ps,.fapproved .ico .ps{stroke:var(--yellow)}
.btn--yellow .ico .ps2,.fcheck .ico .ps2{stroke:var(--purple)}
.assure .ico{width:20px;height:20px}
.ico--big{width:48px;height:48px}
.ct-ph--mark{background:transparent!important;aspect-ratio:1!important;width:32px!important;height:32px;align-self:center}
.ct-ph--mark img{width:32px;height:32px;border-radius:50%;object-fit:cover;display:block}
.cattile.is-on .ct-ph--mark img{box-shadow:0 0 0 2px var(--yellow)}
.piece-media .play .pf{fill:var(--yellow)}

/* ===== v10.6: header in the brand's own colours ===== */
.site-header,.site-header.v3{background:linear-gradient(180deg,#1D1538 0%,#2B1A5E 100%);border-bottom:1px solid rgba(255,255,255,.08);backdrop-filter:none}
.site-header::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--yellow) 0%,var(--yellow) 35%,#A78BFA 55%,var(--yellow) 80%,var(--yellow) 100%);background-size:220% 100%;animation:stripe 9s linear infinite;z-index:2}
@keyframes stripe{to{background-position:-220% 0}}
.site-header.scrolled{box-shadow:0 10px 30px rgba(10,5,30,.45)}
.site-header.v3 .nav-links a,.site-header.v3 .nav-links a.nav-minor{color:rgba(255,255,255,.82);font-weight:600}
.site-header.v3 .nav-links a:hover,.site-header.v3 .nav-links a[aria-current="page"]{color:#fff}
.site-header.v3 .nav-links a::after{height:3px;background:var(--yellow)}
.site-header .logo img{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.site-header .logo:hover img{transform:scale(1.04) rotate(-2deg)}
.site-header .lang{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.06)}
.site-header .lang a{color:rgba(255,255,255,.7)}
.site-header .lang a[aria-current="true"]{background:var(--yellow);color:var(--purple)}
.site-header .nav-toggle span{background:var(--yellow)}
.site-header .header-cta{position:relative;overflow:hidden}
.site-header .header-cta::after{content:"";position:absolute;top:-40%;bottom:-40%;left:-30%;width:28%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);animation:shine 5.5s ease-in-out infinite}
@keyframes shine{0%,70%{left:-30%}100%{left:130%}}
.spa-back{background:rgba(255,255,255,.12)!important;border-color:rgba(255,255,255,.25)!important;color:#fff!important}
.hero5{padding-top:clamp(28px,4vw,56px)}
@media (max-width:980px){.menu{inset:76px 0 0 0;background:linear-gradient(180deg,#2B1A5E,var(--purple))}}
@media (prefers-reduced-motion:reduce){.site-header::before,.site-header .header-cta::after{animation:none}}

/* ===== v11: entry sequence, living pixel field, hero play-in ===== */
.intro{position:fixed;inset:0;z-index:200;display:grid;place-items:center;overflow:hidden;cursor:pointer}
.intro-cols{position:absolute;inset:0;display:grid;grid-template-columns:repeat(12,1fr)}
.intro-cols i{display:block;background:var(--yellow);transition:transform .55s cubic-bezier(.65,0,.35,1)}
.intro.is-out .intro-cols i{transform:translateY(-102%)}
.intro.is-out .intro-cols i:nth-child(2){transition-delay:.04s}.intro.is-out .intro-cols i:nth-child(3){transition-delay:.08s}.intro.is-out .intro-cols i:nth-child(4){transition-delay:.12s}.intro.is-out .intro-cols i:nth-child(5){transition-delay:.16s}.intro.is-out .intro-cols i:nth-child(6){transition-delay:.2s}.intro.is-out .intro-cols i:nth-child(7){transition-delay:.24s}.intro.is-out .intro-cols i:nth-child(8){transition-delay:.28s}.intro.is-out .intro-cols i:nth-child(9){transition-delay:.32s}.intro.is-out .intro-cols i:nth-child(10){transition-delay:.36s}.intro.is-out .intro-cols i:nth-child(11){transition-delay:.4s}.intro.is-out .intro-cols i:nth-child(12){transition-delay:.44s}
.intro-px{position:absolute;inset:0;width:100%;height:100%}
.intro.is-out .intro-px,.intro.is-out .intro-mark{opacity:0;transition:opacity .3s}
.intro-mark{position:relative;width:clamp(96px,16vw,180px);height:auto;border-radius:50%;transform:scale(.4) rotate(-18deg);opacity:0;box-shadow:0 30px 70px rgba(75,45,143,.35)}
.intro.mark-in .intro-mark{animation:markin .7s cubic-bezier(.2,.9,.2,1.15) forwards}
@keyframes markin{to{transform:scale(1) rotate(0);opacity:1}}
body.intro-on{overflow:hidden}
.pixfield{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.hero5 .wrap{position:relative;z-index:1}
.hero5 .strip{position:relative;z-index:1}
html.js .hero5 .hero-copy>*{opacity:0;transform:translateY(18px)}
html.js .hero5.is-in .hero-copy>*{animation:copyin .7s cubic-bezier(.2,.7,.2,1) forwards}
html.js .hero5.is-in .hero-copy>*:nth-child(2){animation-delay:.08s}html.js .hero5.is-in .hero-copy>*:nth-child(3){animation-delay:.18s}html.js .hero5.is-in .hero-copy>*:nth-child(4){animation-delay:.28s}html.js .hero5.is-in .hero-copy>*:nth-child(5){animation-delay:.36s}html.js .hero5.is-in .hero-copy>*:nth-child(6){animation-delay:.44s}
@keyframes copyin{to{opacity:1;transform:none}}
html.js .hero5 .h-display .hl{background:linear-gradient(90deg,rgba(245,201,0,.35),rgba(245,201,0,.35)) no-repeat 0 85%/0% 28%;transition:background-size .9s cubic-bezier(.2,.7,.2,1) .5s}
html.js .hero5.is-in .h-display .hl{background-size:100% 28%}
html.js .hero5 .mosaic--wall .mtile{opacity:0;transform:translateY(26px) scale(.94)}
html.js .hero5.is-in .mosaic--wall .mtile{animation:tilein .7s cubic-bezier(.2,.8,.2,1) forwards,float 9s ease-in-out infinite;animation-delay:calc(.15s + var(--d,0s) * .35),calc(1s + var(--d,0s))}
@keyframes tilein{to{opacity:1;transform:none}}
.mosaic--wall .mcol{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){html.js .hero5 .hero-copy>*,html.js .hero5 .mosaic--wall .mtile{opacity:1;transform:none;animation:none}.intro{display:none}}

/* v11.1: every piece on the cover opens the creator's work with sound; closing lands on the creators grid */
.strip-item,.mtile[data-id]{cursor:pointer}
.strip-item:hover img,.mtile[data-id]:hover video{filter:brightness(1.08)}
.strip:hover .strip-track,.strip:focus-within .strip-track{animation-play-state:paused}
.strip-item:focus-visible,.mtile:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.strip-cta{display:inline-flex;align-items:center;gap:8px;margin:0 var(--gutter) 12px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:.82rem;font-weight:600;padding:7px 12px 7px 8px;border-radius:999px}
.strip-cta .ico{width:18px;height:18px}
.hero5 .strip--big{padding-top:12px}
.hero5 + .statband .statcard{margin-top:20px}
@media (max-width:640px){.strip-cta{font-size:.76rem}}
.hero-creator{margin-top:6px;font-size:.88rem}
.hero-creator a{color:rgba(255,255,255,.85);text-decoration:none;border-bottom:1.5px solid rgba(245,201,0,.6);font-weight:600}
.hero-creator a:hover{color:#fff;border-bottom-color:var(--yellow)}
@media (max-width:640px){.hero5 .hero-creator{display:none}}
/* v11.4: header controls as brand pixels (square units, yellow on violet) */
.site-header .lang,.menu-foot .lang{border:0;border-radius:0;background:transparent;padding:0;gap:3px;overflow:visible}
.site-header .lang a,.menu-foot .lang a{width:38px;height:38px;display:grid;place-items:center;padding:0;border-radius:0;font:800 .74rem/1 var(--font);letter-spacing:.08em;background:rgba(255,255,255,.1);color:rgba(255,255,255,.8);transition:background .2s,color .2s,transform .2s}
.site-header .lang a:hover,.menu-foot .lang a:hover{background:rgba(255,255,255,.2);color:#fff}
.site-header .lang a[aria-current="true"],.menu-foot .lang a[aria-current="true"]{background:var(--yellow);color:var(--purple)}
.spa-back{width:38px!important;height:38px!important;border-radius:0!important;border:0!important;background:var(--yellow)!important;color:var(--purple)!important;font:400 20px/1 var(--font)!important;display:none;transition:background .2s,color .2s}
body.has-history .spa-back{display:inline-flex!important}
.spa-back:hover{background:#fff!important;color:var(--purple)!important}

/* ===== v12: ways to work with us ===== */
.ways-head{display:grid;gap:8px;margin:clamp(40px,6vw,64px) 0 20px;padding-top:28px;border-top:1px solid var(--line)}
.ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.way{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start;padding:20px 20px 22px;background:#fff;border:1.5px solid var(--line);border-radius:var(--r);min-width:0;transition:transform .2s,border-color .2s,box-shadow .2s;animation-delay:calc(var(--i,0)*.08s)}
.way:hover{transform:translateY(-3px);border-color:var(--purple);box-shadow:0 18px 40px rgba(75,45,143,.12)}
.way .ico{width:36px;height:36px}
.way h3{font-size:1.05rem;letter-spacing:-.01em;margin-bottom:6px}
.way p{color:var(--ink-2);font-size:.95rem}
#what .cta-line{border-top:0;padding-top:0;margin-top:28px}
@media (max-width:900px){.ways{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ways{grid-template-columns:1fr}}

/* ===== v13: the intro as a short film ===== */
.intro-movie{position:absolute;inset:0;opacity:0;transition:opacity .35s;background:#1D1538}
.intro.movie-on .intro-movie{opacity:1}
.intro.movie-on .intro-px,.intro.movie-on .intro-mark{opacity:0;transition:opacity .3s}
.iclip{position:absolute;inset:0;opacity:0;transform:scale(1.08);transition:opacity .28s ease,transform 1.1s linear}
.iclip.is-on{opacity:1;transform:scale(1)}
.iclip video{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.78)}
.iclip::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(29,21,56,.15),rgba(29,21,56,.65))}
.iword{position:absolute;left:7vw;right:7vw;bottom:14vh;z-index:1;color:#fff;font-size:clamp(2.6rem,8.5vw,7.4rem);font-weight:800;letter-spacing:-.045em;line-height:.95;transform:translateY(34px);opacity:0;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .4s}
.iword b{color:var(--yellow)}
.iclip.is-on .iword{transform:none;opacity:1;transition-delay:.12s}
.intro-end{position:absolute;inset:0;display:grid;place-items:center;text-align:center;background:var(--yellow);color:var(--purple);opacity:0;transition:opacity .4s;padding:24px}
.intro.end-on .intro-end{opacity:1}
.intro-end img{width:clamp(80px,12vw,120px);height:auto;border-radius:50%;margin:0 auto 18px;display:block;transform:scale(.6);opacity:0}
.intro.end-on .intro-end img{animation:markin .6s cubic-bezier(.2,.9,.2,1.15) .1s forwards}
.iline{font-size:clamp(2rem,6vw,4.4rem);font-weight:800;letter-spacing:-.04em;line-height:1;max-width:14em;margin:0 auto 22px;transform:translateY(20px);opacity:0}
.intro.end-on .iline{animation:copyin .6s cubic-bezier(.2,.7,.2,1) .25s forwards}
.icta{transform:translateY(16px);opacity:0}
.intro.end-on .icta{animation:copyin .6s cubic-bezier(.2,.7,.2,1) .45s forwards}
.iskip{position:absolute;right:18px;top:calc(18px + env(safe-area-inset-top,0px));z-index:3;border:1.5px solid rgba(255,255,255,.55);background:rgba(29,21,56,.35);color:#fff;font:700 .78rem var(--font);padding:8px 12px;border-radius:999px;cursor:pointer;opacity:0;transition:opacity .3s}
.intro.movie-on .iskip{opacity:1}
.intro.end-on .iskip{border-color:rgba(75,45,143,.5);color:var(--purple);background:rgba(255,255,255,.4)}
.intro.is-out .intro-movie,.intro.is-out .intro-end,.intro.is-out .iskip{opacity:0;transition:opacity .25s}
html.js .section-head{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
html.js .section-head.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.js .section-head{opacity:1;transform:none}}

/* ===== v14: welcome screen in the Headspace spirit: breathe, read two lines, one button ===== */
.intro--breathe{--breath:1;cursor:default}
.intro--breathe .intro-center{position:relative;z-index:2;display:grid;justify-items:center;text-align:center;gap:14px;padding:0 24px;transform:translateY(calc(-8vh));max-width:40rem}
.intro--breathe .intro-mark{position:static;width:clamp(96px,16vw,170px);transform:scale(.4);opacity:0;box-shadow:0 20px 60px rgba(75,45,143,.25);transition:none}
.intro--breathe.mark-in .intro-mark{animation:markin .9s cubic-bezier(.2,.9,.2,1.1) forwards,breathe 4.4s ease-in-out 1s infinite}
@keyframes breathe{0%,100%{transform:scale(.94)}50%{transform:scale(1.06)}}
.intro--breathe .iline{color:var(--purple);font-size:clamp(1.3rem,3.2vw,2.2rem);font-weight:800;letter-spacing:-.03em;line-height:1.1;max-width:16em;margin:0;opacity:0;transform:translateY(14px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.intro--breathe .iline-1{margin-top:22px}
.intro--breathe .iline-2{font-weight:600;color:#3A2275;font-size:clamp(1.05rem,2.2vw,1.45rem);letter-spacing:-.01em}
.intro--breathe.l1-in .iline-1,.intro--breathe.l2-in .iline-2{opacity:1;transform:none}
.intro--breathe .icta{margin-top:12px;opacity:0;transform:translateY(12px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1);box-shadow:0 14px 34px rgba(75,45,143,.25)}
.intro--breathe.cta-in .icta{opacity:1;transform:none}
.intro--breathe .iskip{opacity:1;border-color:rgba(75,45,143,.45);color:var(--purple);background:rgba(255,255,255,.35)}
.intro--breathe.is-out .intro-center,.intro--breathe.is-out .intro-px,.intro--breathe.is-out .iskip{opacity:0;transition:opacity .3s}
.intro--breathe{background:var(--yellow)}
.intro--breathe.is-out{background:transparent;transition:background 0s .05s}
.intro--breathe .intro-cols i{margin-right:-1px}

/* ===== v15: brands band under the hero, 8-hour promise, verified ===== */
.logo-band{background:#fff;color:var(--ink);margin-top:clamp(28px,4vw,48px);padding:16px 0 14px;overflow:hidden;position:relative;z-index:1}
.logo-band .label{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);font-weight:800;margin-bottom:12px}
.logo-band .logo-track{gap:clamp(40px,5vw,72px);animation-duration:60s}
.logo-band .logo-track span{gap:0;display:flex;align-items:center}
.logo-band .logo-track span::after{display:none}
.logo-band .logo-track img{width:auto;max-width:180px;opacity:.92}
.logo-band:hover .logo-track{animation-play-state:paused}
.hero5 .strip--big{border-top:0}
.assure li:first-child{color:var(--yellow);font-weight:800}
.assure li:first-child .ico .pf{fill:#fff}
.mosaic--wall{grid-template-columns:repeat(3,minmax(0,1fr))}

/* v15.1: brands band in the brand's own language: one colour, one height, even rhythm */
.logo-band{background:linear-gradient(180deg,#1D1538,#2B1A5E);color:#fff;margin-top:clamp(28px,4vw,48px);padding:18px 0 16px;border-top:1px solid rgba(255,255,255,.08)}
.logo-band-head .eyebrow{color:var(--yellow);margin-bottom:14px}
.logo-band .logo-track{gap:0;animation-duration:70s}
.logo-band .lg-cell{display:flex;align-items:center;justify-content:center;height:56px;width:190px;flex:0 0 190px;gap:0;border-right:1px solid rgba(255,255,255,.1)}
.logo-band .lg-cell::after{display:none}
.logo-band .lg-cell img{height:26px;max-width:140px;width:auto;object-fit:contain;filter:brightness(0) invert(1);opacity:.85;transition:opacity .2s}
.logo-band .lg-cell:hover img{opacity:1}
@media (max-width:640px){.logo-band .lg-cell{width:140px;flex-basis:140px;height:48px}.logo-band .lg-cell img{height:20px;max-width:104px}}

/* ===== v16: first-open screen in the Headspace spirit, in our shapes ===== */
.intro--hs{background:#1D1538;cursor:default;overflow:hidden}
.intro--hs .intro-cols i{background:#1D1538;transition:background .4s,transform .55s cubic-bezier(.65,0,.35,1)}
.intro--hs.welcome .intro-cols i{background:var(--yellow)}
.ibreath{position:absolute;left:0;right:0;top:calc(14vh + env(safe-area-inset-top,0px));z-index:2;text-align:center;color:#fff;font-size:clamp(1.5rem,3.4vw,2.3rem);font-weight:800;letter-spacing:-.02em;height:1.2em}
.ibreath span{position:absolute;left:0;right:0;opacity:0;animation:ibin 7.4s ease-in-out infinite}
.ibreath .ib-out{animation-name:ibout}
@keyframes ibin{0%,6%{opacity:0}14%,44%{opacity:1}52%,100%{opacity:0}}
@keyframes ibout{0%,52%{opacity:0}60%,92%{opacity:1}100%{opacity:0}}
.idome{position:absolute;left:-12vw;right:-12vw;bottom:0;height:72vh;z-index:1;transform:translateY(58%);animation:idome 7.4s ease-in-out infinite;will-change:transform}
.idome svg:first-child{position:absolute;inset:0;width:100%;height:100%;display:block}
.istem{position:absolute;left:50%;top:14%;width:min(34vw,240px);height:auto;transform:translateX(-50%)}
@keyframes idome{0%{transform:translateY(58%)}46%{transform:translateY(8%)}54%{transform:translateY(8%)}100%{transform:translateY(58%)}}
.iwelcome{position:absolute;inset:0;z-index:3;display:grid;align-content:center;justify-items:center;text-align:center;gap:10px;padding:24px;opacity:0;pointer-events:none;transition:opacity .5s}
.intro--hs.welcome{background:var(--yellow)}
.intro--hs.welcome .idome,.intro--hs.welcome .ibreath{opacity:0;transition:opacity .4s}
.intro--hs.welcome .iwelcome{opacity:1;pointer-events:auto}
.iwelcome .intro-mark{position:static;width:clamp(110px,18vw,170px);transform:scale(.5);opacity:0;box-shadow:0 24px 60px rgba(75,45,143,.25);transition:none}
.intro--hs.welcome .iwelcome .intro-mark{animation:markin .8s cubic-bezier(.2,.9,.2,1.12) .1s forwards}
.iwel{color:var(--purple);font-size:clamp(1.6rem,4.2vw,2.8rem);font-weight:800;letter-spacing:-.035em;line-height:1;margin-top:18px;opacity:0;transform:translateY(12px)}
.itag{color:#3A2275;font-size:clamp(1rem,2vw,1.3rem);font-weight:600;max-width:24em;opacity:0;transform:translateY(12px)}
.iwelcome .icta{margin-top:10px;opacity:0;transform:translateY(12px);box-shadow:0 14px 34px rgba(75,45,143,.25)}
.ilink{color:var(--purple);font-weight:700;text-decoration:none;border-bottom:2px solid rgba(75,45,143,.35);opacity:0;transform:translateY(12px);font-size:.92rem}
.intro--hs.welcome .iwel{animation:copyin .6s cubic-bezier(.2,.7,.2,1) .35s forwards}
.intro--hs.welcome .itag{animation:copyin .6s cubic-bezier(.2,.7,.2,1) .5s forwards}
.intro--hs.welcome .icta{animation:copyin .6s cubic-bezier(.2,.7,.2,1) .65s forwards}
.intro--hs.welcome .ilink{animation:copyin .6s cubic-bezier(.2,.7,.2,1) .8s forwards}
.intro--hs .iskip{opacity:1;border-color:rgba(255,255,255,.5);color:#fff;background:rgba(255,255,255,.12)}
.intro--hs.welcome .iskip{border-color:rgba(75,45,143,.45);color:var(--purple);background:rgba(255,255,255,.35)}
.intro--hs.is-out{background:transparent}
.intro--hs.is-out .iwelcome,.intro--hs.is-out .idome,.intro--hs.is-out .ibreath,.intro--hs.is-out .iskip{opacity:0;transition:opacity .25s}
@media (prefers-reduced-motion:reduce){.intro--hs{display:none}}
/* v16.1: brands band on white, true colours, one height, equal cells */
.logo-band{background:#fff;color:var(--ink);border-top:0}
.logo-band-head .eyebrow{color:var(--purple)}
.logo-band .lg-cell{border-right:1px solid var(--line);height:60px}
.logo-band .lg-cell img{filter:none;opacity:1;height:24px;max-width:120px}
.logo-band .lg-cell img[src$="bite.svg"],.logo-band .lg-cell img[src$="zoopark.svg"],.logo-band .lg-cell img[src$="redcross.svg"],.logo-band .lg-cell img[src$="vilnius.svg"],.logo-band .lg-cell img[src$="emeraldparfums.png"],.logo-band .lg-cell img[src$="fashionrevolution.svg"]{height:34px}
.logo-band .lg-cell img[src$="rccola.svg"],.logo-band .lg-cell img[src$="ricola.svg"]{height:30px}
@media (max-width:640px){.logo-band .lg-cell img{height:20px}}

/* ===== v16.2: "Created for" logo grid inside the proof card, calm and even ===== */
.made-for{padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--line)}
.made-for .eyebrow{margin-bottom:14px}
.made-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:10px 16px;align-items:center}
.made-grid span{display:flex;align-items:center;justify-content:center;height:44px;min-width:0}
.made-grid img{max-height:22px;max-width:92px;width:auto;height:auto;object-fit:contain;filter:grayscale(1);opacity:.7;transition:filter .25s,opacity .25s,transform .25s}
.made-grid img[src$="bite.svg"],.made-grid img[src$="zoopark.svg"],.made-grid img[src$="redcross.svg"],.made-grid img[src$="vilnius.svg"],.made-grid img[src$="emeraldparfums.png"],.made-grid img[src$="fashionrevolution.svg"],.made-grid img[src$="uogauoga.png"]{max-height:30px}
.made-grid span:hover img{filter:none;opacity:1;transform:translateY(-1px)}
@media (max-width:640px){.made-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 10px}.made-grid span{height:38px}.made-grid img{max-height:18px;max-width:80px}}

/* v16.3: sixteen logos, always full rows */
.made-grid{grid-template-columns:repeat(8,minmax(0,1fr));gap:8px 14px}
.made-grid img{opacity:.8}
@media (max-width:900px){.made-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:640px){.made-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px 8px}.made-grid span{height:36px}.made-grid img{max-height:16px;max-width:70px}}

/* ===== v16.4: "Created for" as its own moving band: two rows of logos gliding in opposite directions ===== */
.madeband{background:var(--paper);padding:clamp(28px,4vw,44px) 0 clamp(32px,5vw,56px);overflow:hidden}
.madeband .eyebrow{margin-bottom:18px}
.made-rows{display:grid;gap:18px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.logo-track--big{gap:clamp(56px,7vw,110px);animation-duration:48s;align-items:center}
.logo-track--big span{display:flex;align-items:center;gap:0;height:48px}
.logo-track--big span::after{display:none}
.logo-track--big img{height:28px;width:auto;max-width:170px;object-fit:contain}
.logo-track--big img[src$="bite.svg"],.logo-track--big img[src$="zoopark.svg"],.logo-track--big img[src$="redcross.svg"],.logo-track--big img[src$="vilnius.svg"],.logo-track--big img[src$="emeraldparfums.png"],.logo-track--big img[src$="fashionrevolution.svg"],.logo-track--big img[src$="uogauoga.png"]{height:40px}
.logo-track--big img[src$="rccola.svg"],.logo-track--big img[src$="ricola.svg"]{height:34px}
.logo-track--rev{animation-direction:reverse;animation-duration:56s}
.made-rows:hover .marquee-track{animation-play-state:paused}
.made-for,.made-grid{display:none}
@media (max-width:640px){.logo-track--big{gap:40px}.logo-track--big img{height:22px;max-width:120px}.logo-track--big span{height:40px}}

/* ===== v16.5: brands right under the hero; cards without numbers ===== */
.hero5 + .madeband{padding-top:clamp(22px,3vw,34px);padding-bottom:clamp(24px,3.5vw,40px)}
.madeband + .statband .statcard{margin-top:clamp(8px,1.5vw,16px)}
.creator-body .req{margin-top:auto}
.cslide figcaption{font-size:.62rem;padding:6px 8px}
.cattile .ct-sub{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ===== v16.6: strip on its own under the brands; nothing stops moving under the mouse ===== */
.hero5{padding-bottom:clamp(32px,4vw,52px)}
.hero5 + .madeband{padding-top:clamp(28px,4vw,44px);padding-bottom:clamp(28px,4vw,44px)}
.stripband{position:relative;background:linear-gradient(180deg,var(--purple-deep) 0%,var(--purple) 55%,var(--ink-purple) 100%);color:#fff;padding:0 0 clamp(118px,14vw,150px);overflow:hidden}
.stripband .strip{position:relative;z-index:1}
.stripband .strip--big{border-top:0;padding-top:clamp(18px,2.4vw,28px);background:none}
.strip:hover .strip-track{animation-play-state:running}
.made-rows:hover .marquee-track{animation-play-state:running}
@media (max-width:640px){.stripband{padding-bottom:108px}}

/* ===== v16.7: the cover strip scrolls (drag, trackpad, swipe, arrows) and still drifts on its own ===== */
.strip-view{position:relative}
.strip-scroll{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;cursor:grab;padding:2px 0 6px}
.strip-scroll::-webkit-scrollbar{display:none}
.strip-scroll.is-drag{cursor:grabbing;user-select:none}
.strip-scroll .strip-track{animation:none;width:max-content}
.strip-scroll img{-webkit-user-drag:none;user-select:none;pointer-events:none}
.strip-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.94);color:var(--purple);font:400 1.7rem/1 var(--font);display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.28);opacity:.9;transition:opacity .2s,transform .2s,background .2s;padding:0 0 3px}
.strip-arrow--prev{left:14px}.strip-arrow--next{right:14px}
.strip-arrow:hover{opacity:1;background:var(--yellow);transform:translateY(-50%) scale(1.06)}
.strip-arrow:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
@media (max-width:640px){.strip-arrow{display:none}}
@media (prefers-reduced-motion:reduce){.strip-arrow{transition:none}}
.strip-scroll{scroll-behavior:auto}

/* ===== v16.9: eight-tile wall with big numbers, strip without numbers, one number per card ===== */
.mosaic--wall{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.mosaic--wall .mcol{gap:10px}
.mosaic--wall .mcol--shift{margin-top:30px}
.mosaic--wall .mtile figcaption{left:6px;right:6px;bottom:6px;padding:5px 7px 5px;font-size:.6rem;line-height:1.15;border-radius:7px}
.mosaic--wall .mtile figcaption b{font-size:1.08rem;letter-spacing:-.02em;line-height:1;vertical-align:-1px}
.mosaic--wall .mtile figcaption span{opacity:.9}
.mosaic--wall .mtile figcaption small{display:block;font-size:.6rem;opacity:.85;margin-top:2px}
@media (max-width:900px){.mosaic--wall .mtile figcaption{font-size:.62rem}.mosaic--wall .mtile figcaption b{font-size:1rem}}
.strip--big .strip-track em{text-align:center;font-weight:600;letter-spacing:.02em}
.cslide--lead figcaption b{font-size:1.02rem;color:var(--yellow);letter-spacing:-.02em;margin-right:2px;vertical-align:-1px}

/* ===== v16.9b: no platform chip on slides; channel icons on every card ===== */
.cslide figcaption{top:12px;right:12px;bottom:auto;left:auto;max-width:72%;text-align:right}
.cslide figcaption .for{margin-top:0}
.cslide figcaption b + .for{margin-top:4px}
.chans{display:flex;gap:9px;align-items:center;margin:-2px 0 0}
.chans img{width:22px;height:22px;display:block}

/* ===== v17.2: book a call (info@ for now, booking page when set) ===== */
.call-line{margin-top:10px;color:var(--ink-2);font-size:.98rem}
.call-link{font-weight:700;color:var(--purple);border-bottom:2px solid var(--yellow);text-decoration:none}
.call-link:hover{color:#3A2275}
.form-call{margin:12px 0 0;font-weight:600;color:var(--purple)}
.form-call[hidden]{display:none}
.lb-callwrap{margin:8px 0 0;text-align:center;font-size:.86rem}
.lb-call{color:var(--purple);font-weight:600;border-bottom:2px solid var(--yellow);text-decoration:none}
.route a:last-child{margin-left:0}

/* ===== v17.3: the call CTA gets attention (founder) ===== */
.btn--sm{padding:.75em 1.1em;font-size:.82rem}
.btn .ico{width:18px;height:18px;flex:0 0 18px}
.btn--white .ico .pf{fill:var(--yellow)}.btn--white .ico .pm,.btn--white .ico .ps{fill:#fff;stroke:#fff}
.btn--yellow .ico .pf{fill:#fff}
.call-line{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:14px}
.call-line .muted a{color:var(--purple);font-weight:600}
.form-call{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.lb-callwrap{margin:10px 0 0}
.lb-callwrap .btn{width:100%;justify-content:center}
.route-call{margin-top:16px}
.call-fab{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:60;display:inline-flex;align-items:center;gap:8px;padding:12px 18px 12px 14px;background:var(--yellow);color:var(--purple);font:700 .86rem/1 var(--font);letter-spacing:.04em;text-transform:uppercase;text-decoration:none;border-radius:999px;box-shadow:0 14px 36px rgba(29,21,56,.3);transform:translateY(90px);opacity:0;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .3s;pointer-events:none}
.call-fab.is-on{transform:none;opacity:1;pointer-events:auto}
.call-fab:hover{transform:translateY(-2px)}
.call-fab .ico{width:20px;height:20px}.call-fab .ico .pf{fill:#fff}
@media (max-width:640px){.call-fab{right:12px;left:12px;justify-content:center;bottom:calc(12px + env(safe-area-inset-bottom,0px));font-size:.8rem}}
@media (prefers-reduced-motion:reduce){.call-fab{transition:none}}

/* ===== v18: the booking page ===== */
.page-hero--book .hero-copy{max-width:760px}
.page-hero--paper .assure{margin-top:18px}.page-hero--paper .assure li{color:var(--ink)}.page-hero--paper .assure li:first-child{color:var(--purple)}
.booking{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);align-items:start}
.bk-step{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--purple);margin:0 0 12px}
.bk-step b{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--yellow);color:var(--purple);font-size:.9rem}
.bk-days{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.bk-day{display:grid;gap:2px;min-width:84px;padding:10px 12px;border:1.5px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font:600 .8rem/1.2 var(--font);cursor:pointer;text-align:left;transition:border-color .15s,transform .15s}
.bk-day span{text-transform:uppercase;letter-spacing:.06em;font-size:.66rem;color:var(--ink-2)}
.bk-day b{font-size:.95rem}
.bk-day:hover{border-color:var(--purple);transform:translateY(-1px)}
.bk-day.is-on{background:var(--purple);border-color:var(--purple);color:#fff}.bk-day.is-on span{color:var(--yellow)}
.bk-day:disabled{opacity:.4;cursor:not-allowed;transform:none}
.bk-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin-bottom:12px}
.bk-slot{padding:12px 8px;border:1.5px solid var(--purple);border-radius:999px;background:#fff;color:var(--purple);font:700 .95rem/1 var(--font);cursor:pointer;transition:background .15s,color .15s}
.bk-slot:hover{background:var(--yellow)}
.bk-slot.is-on{background:var(--purple);color:var(--yellow)}
.bk-slot.is-taken{border-color:var(--line);color:var(--ink-2);text-decoration:line-through;cursor:not-allowed;background:transparent}
.bk-summary{margin:0 0 14px;padding:10px 14px;border-left:4px solid var(--yellow);background:#fff;font-weight:700;color:var(--purple)}
.bk-summary[hidden]{display:none}
.bk-form .form{margin-top:0}
.bk-alt{margin-top:14px}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
@media (max-width:900px){.booking{grid-template-columns:1fr}}

/* ===== v18.1: reading page ===== */
.ins-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ins{padding:22px 22px 20px;background:#fff;border:1.5px solid var(--line);border-radius:var(--r);display:grid;gap:10px;align-content:start}
.ins h2{font-size:1.1rem;letter-spacing:-.01em}
.ins p{color:var(--ink-2);font-size:.95rem}
.ins-stat{display:flex;align-items:baseline;gap:10px;color:var(--purple)}
.ins-stat b{font-size:1.9rem;letter-spacing:-.03em;line-height:1}
.ins-stat span{font-size:.8rem;color:var(--ink-2)}
.ins-src a{font-weight:700;color:var(--purple);border-bottom:2px solid var(--yellow);text-decoration:none;font-size:.9rem}
.ins-note{margin-top:18px}
@media (max-width:720px){.ins-grid{grid-template-columns:1fr}}

/* ===== v18.4: logo intro (yellow, purple lockup, pixel dissolve) ===== */
.intro--logo{background:var(--yellow);cursor:default}
.intro--logo.is-out{background:transparent}
.intro-logo{position:relative;z-index:1;width:clamp(220px,46vw,640px);height:auto;transform:scale(.86);opacity:0;animation:logoin .55s cubic-bezier(.2,.9,.2,1.1) .05s forwards}
@keyframes logoin{to{transform:scale(1);opacity:1}}
.intro--logo.is-out .intro-logo{animation:none;opacity:0;transition:opacity .2s}
.intro-px2{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
@media (prefers-reduced-motion:reduce){.intro--logo{display:none}}

/* v18.5: no ghost logo while the intro leaves; hero can never stay hidden behind a stalled intro */
.intro--logo.is-out .intro-logo{opacity:0 !important;transition:none}
.intro--logo.is-out{pointer-events:none}

/* ===== v19: motion pass (3D pixel cubes, cursor light, wall tilt, magnetic buttons, card tilt, interactive intro) ===== */
.intro-tilt{display:block;position:relative;z-index:1;transform-style:preserve-3d;transition:transform .18s ease-out;will-change:transform}
.intro-tilt .intro-logo{display:block}
.intro-px2{z-index:0}
.hero5{perspective:1400px}
.hero5 .glow{position:absolute;left:0;top:0;width:640px;height:640px;border-radius:50%;background:radial-gradient(circle,rgba(245,201,0,.22) 0%,rgba(245,201,0,.08) 35%,transparent 68%);pointer-events:none;z-index:0;opacity:0;transition:opacity .4s;mix-blend-mode:screen;will-change:transform}
.hero5 .cubes{position:absolute;inset:0;pointer-events:none;z-index:0;transform-style:preserve-3d;will-change:transform}
.cube{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);transform-style:preserve-3d;animation:cubespin var(--t,26s) linear infinite,cubefloat 9s ease-in-out infinite;animation-delay:var(--d,0s),calc(var(--d,0s) * .6);opacity:.9}
.cube b{position:absolute;inset:0;display:block;border-radius:2px}
.cube--y b{background:#F5C900}.cube--y b:nth-child(2),.cube--y b:nth-child(4){background:#D9B100}.cube--y b:nth-child(5){background:#B89600}.cube--y b:nth-child(6){background:#FFDD3D}
.cube--p b{background:#8B6FD6}.cube--p b:nth-child(2),.cube--p b:nth-child(4){background:#7156BD}.cube--p b:nth-child(5){background:#5B44A0}.cube--p b:nth-child(6){background:#A58EE6}
.cube b:nth-child(1){transform:translateZ(calc(var(--s) / 2))}
.cube b:nth-child(2){transform:rotateY(90deg) translateZ(calc(var(--s) / 2))}
.cube b:nth-child(3){transform:rotateY(180deg) translateZ(calc(var(--s) / 2))}
.cube b:nth-child(4){transform:rotateY(-90deg) translateZ(calc(var(--s) / 2))}
.cube b:nth-child(5){transform:rotateX(-90deg) translateZ(calc(var(--s) / 2))}
.cube b:nth-child(6){transform:rotateX(90deg) translateZ(calc(var(--s) / 2))}
@keyframes cubespin{from{transform:rotateX(0deg) rotateY(0deg)}to{transform:rotateX(360deg) rotateY(360deg)}}
@keyframes cubefloat{0%,100%{margin-top:0}50%{margin-top:-14px}}
.hero5 .hero-copy,.hero5 .mosaic--wall{position:relative;z-index:1}
.mosaic--wall{transform-style:preserve-3d;transition:transform .2s ease-out;will-change:transform}
.mosaic--wall .mtile{transition:box-shadow .3s}
.mosaic--wall .mtile video{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.mosaic--wall .mtile:hover video{transform:scale(1.06)}
.mosaic--wall .mtile:hover{box-shadow:0 30px 70px rgba(5,0,20,.6),0 0 0 2px var(--yellow)}
.btn.is-mag{transform:translate(var(--mx,0px),var(--my,0px))}
.call-fab.is-mag{transform:translate(var(--mx,0px),var(--my,0px))}
.creator{transition:transform .25s ease-out,box-shadow .25s}
.creator:hover{box-shadow:0 26px 60px rgba(29,21,56,.18)}
.strip-item img{transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.strip-item:hover img{transform:scale(1.05)}
@media (max-width:900px){.hero5 .cubes{display:none}.hero5 .glow{display:none}}
@media (prefers-reduced-motion:reduce){.cube{animation:none}.hero5 .glow{display:none}}

/* ===== v20 (2026-10-29): intro = mark tessellation on yellow that stirs under the cursor and shrinks away pixel by pixel; back links; compact header on scroll ===== */
.intro--logo{background:var(--yellow);cursor:default}
.intro--logo.is-out{background:transparent;pointer-events:none}
.intro-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.intro-mark{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none}
.backwrap{padding-top:16px}
.back{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--purple);text-decoration:none;font-size:.92rem;line-height:1;padding:9px 14px 9px 10px;border-radius:999px;background:rgba(75,45,143,.08);transition:background .2s,transform .2s}
.back:hover{background:rgba(75,45,143,.15);transform:translateX(-2px)}
.back svg{width:17px;height:17px;flex:none}
.site-header .nav3{transition:padding .25s ease}
.site-header.is-scrolled .nav3{padding-top:6px;padding-bottom:6px}
.site-header.is-scrolled .logo img{height:50px;width:auto;transition:height .25s ease}
@media (max-width:900px){.backwrap{padding-top:12px}}

/* v20b: the dock (call + email doors on every page), three-door mobile bar, pixel glyphs on category tiles */
.dock{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none}
.dock-pills{display:flex;gap:8px;transform:translateY(120px);opacity:0;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .3s;pointer-events:none}
.dock.is-on .dock-pills{transform:none;opacity:1;pointer-events:auto}
.dock-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 18px 12px 14px;border-radius:999px;font:700 .84rem/1 var(--font);letter-spacing:.04em;text-transform:uppercase;text-decoration:none;cursor:pointer;border:0;box-shadow:0 14px 36px rgba(29,21,56,.28);transition:transform .2s,box-shadow .2s}
.dock-btn:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(29,21,56,.32)}
.dock-btn--call{background:var(--yellow);color:var(--purple)}
.dock-btn--mail{background:#fff;color:var(--purple);box-shadow:0 14px 36px rgba(29,21,56,.22),inset 0 0 0 1.5px rgba(75,45,143,.18)}
.dock-btn .ico{width:20px;height:20px}.dock-btn--call .ico .pf{fill:#fff}
.dock-card{pointer-events:auto;width:min(360px,calc(100vw - 36px));background:#fff;border-radius:18px;padding:18px 18px 16px;box-shadow:0 24px 60px rgba(29,21,56,.3);border:1.5px solid rgba(75,45,143,.12);animation:dockin .25s cubic-bezier(.2,.8,.2,1)}
.dock-card[hidden]{display:none}
@keyframes dockin{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.dock-title{font-weight:800;color:var(--purple);font-size:1.05rem;margin:0 0 4px;letter-spacing:-.01em}
.dock-sub{margin:0 0 12px;color:var(--ink-2);font-size:.9rem}
.dock-row{display:flex;gap:8px}
.dock-row input{flex:1;min-width:0;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;font:inherit;font-size:.95rem;color:var(--ink);background:#fff}
.dock-row input:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px rgba(75,45,143,.12)}
.dock-row .btn{white-space:nowrap}
.dock-alt{margin:12px 0 0;font-size:.82rem;color:var(--ink-2);display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.dock-alt a{color:var(--purple);font-weight:700;text-decoration:none}
.dock-alt a:hover{text-decoration:underline}
.dock .form-msg{margin-top:8px;font-size:.88rem;color:var(--purple);font-weight:700}
.dock .form{margin:0}
@media (max-width:900px){
  .dock{left:12px;right:12px;bottom:calc(76px + env(safe-area-inset-bottom,0px));align-items:stretch}
  .dock-pills{display:none}
  .dock-card{width:auto}
  .cta-bar{grid-template-columns:1fr 1fr 48px;gap:6px}
  .cta-bar .btn{font-size:.7rem;padding:.9em .4em;letter-spacing:.02em}
  .cta-bar .bar-call .ico{display:none}
  .cta-bar .bar-mail{width:48px;padding:0;justify-content:center;border:0;cursor:pointer}
  body.menu-open .dock{display:none}
}
.cattile .ct-ph--px{display:grid;place-items:center;background:var(--purple);transition:background .2s}
.ct-px{width:26px;height:26px;overflow:visible;display:block}
.ct-px rect{fill:var(--yellow);opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.2);transition:transform .32s cubic-bezier(.2,.9,.2,1.25),opacity .25s,fill .2s;transition-delay:calc(var(--i)*18ms)}
.catbar.is-in .ct-px rect,html:not(.js) .ct-px rect{opacity:1;transform:none}
.catbar.is-in .ct-px rect.g{animation:pxglint 3.4s ease-in-out infinite;animation-delay:calc(1.2s + var(--i)*140ms)}
@keyframes pxglint{0%,72%,100%{opacity:1}86%{opacity:.3}}
.cattile:hover .ct-px{animation:pxbob .55s cubic-bezier(.2,.8,.2,1)}
@keyframes pxbob{0%{transform:none}35%{transform:translateY(-4px) rotate(-7deg)}70%{transform:translateY(1px) rotate(2deg)}100%{transform:none}}
.cattile.is-on .ct-ph--px{background:var(--yellow)}
.cattile.is-on .ct-px rect{fill:var(--purple)}
.cattile .ct-ph--mark img{transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.cattile:hover .ct-ph--mark img{transform:rotate(90deg)}
@media (max-width:1180px){.ct-px{width:22px;height:22px}}
@media (max-width:700px){.ct-px{width:20px;height:20px}}
@media (prefers-reduced-motion:reduce){.ct-px rect{opacity:1;transform:none;transition:none;animation:none !important}.cattile:hover .ct-px{animation:none}.dock-pills{transition:none}}

/* v20c (founder 2026-10-30): minimal category tiles, no boxes, animated two-frame pixel illustrations */
.cattile{grid-template-columns:32px 1fr;gap:12px;padding:10px 14px;background:#fff;border:1.5px solid var(--line)}
.cattile .ct-ph,.cattile .ct-ph--px,.cattile .ct-ph--mark{width:32px;height:32px;aspect-ratio:1;border-radius:50%;background:transparent;display:grid;place-items:center}
.cattile .ct-ph--mark{background:var(--yellow)}
.cattile .ct-ph--mark img{width:20px;height:20px}
.ct-px{width:30px;height:30px}
.ct-px rect{fill:var(--purple);opacity:1;transform:scale(0);transition:transform .32s cubic-bezier(.2,.9,.2,1.25),fill .2s;transition-delay:calc(var(--i)*16ms)}
.catbar.is-in .ct-px rect,html:not(.js) .ct-px rect{transform:none}
.catbar.is-in .ct-px rect.g{animation:none}
.catbar.is-in .ct-px rect.a{animation:pxa 1.9s steps(1) infinite}
.catbar.is-in .ct-px rect.b{animation:pxb 1.9s steps(1) infinite}
@keyframes pxa{0%,56%{opacity:1}57%,100%{opacity:0}}
@keyframes pxb{0%,56%{opacity:0}57%,100%{opacity:1}}
.cattile.is-on{background:var(--purple)}
.cattile.is-on .ct-ph--px{background:transparent}
.cattile.is-on .ct-px rect{fill:var(--yellow)}
.cattile:hover .ct-px{animation:pxbob .55s cubic-bezier(.2,.8,.2,1)}
@media (max-width:1180px){.cattile{grid-template-columns:28px 1fr;gap:10px;padding:9px 12px}.cattile .ct-ph,.cattile .ct-ph--px,.cattile .ct-ph--mark{width:28px;height:28px}.ct-px{width:26px;height:26px}.cattile .ct-ph--mark img{width:18px;height:18px}}
@media (max-width:700px){.cattile{grid-template-columns:26px 1fr}.cattile .ct-ph,.cattile .ct-ph--px,.cattile .ct-ph--mark{width:26px;height:26px}.ct-px{width:24px;height:24px}}
@media (prefers-reduced-motion:reduce){.ct-px rect{transform:none;transition:none;animation:none !important}.ct-px rect.b{opacity:0 !important}}

/* v20d (founder 2026-10-30): header = mark + wordmark left, links and one CTA right; category glyphs levitate and shimmer; Everyone = pixel blocks */
.site-header.v20 .wrap.nav3{grid-template-columns:auto 1fr auto;gap:28px;min-height:76px}
.site-header.v20 .logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none;order:0}
.site-header.v20 .logo-mark{width:38px;height:38px;display:block;border-radius:6px;transition:width .25s,height .25s}
.site-header.v20 .logo img.logo-word{display:block;height:16px;width:auto;border-radius:0;transition:height .25s}
.site-header.v20.is-scrolled .logo img.logo-word{height:13px}
.site-header.v20 .logo img.logo-mark{height:38px;width:38px}
.site-header.v20.is-scrolled .logo img.logo-mark{height:30px;width:30px}
.site-header.v20 .nav-links{justify-content:flex-end;gap:26px}
.site-header.v20 .nav-links a{font-size:.98rem;letter-spacing:0;text-transform:none;font-weight:600;color:rgba(255,255,255,.88)}
.site-header.v20 .nav-links a:hover,.site-header.v20 .nav-links a[aria-current]{color:#fff}
.site-header.v20 .nav-links a::after{bottom:-2px}
.site-header.v20 .nav-right{gap:12px}
.site-header.v20.is-scrolled .wrap.nav3{min-height:62px}
.site-header.v20.is-scrolled .logo-mark{width:30px;height:30px}
.site-header.v20.is-scrolled .logo img{height:30px}
@media (max-width:1180px){.site-header.v20 .wrap.nav3{grid-template-columns:auto 1fr;gap:12px}.site-header.v20 .logo img.logo-word{height:13px}.site-header.v20 .logo-mark{width:34px;height:34px}}
.catbar.is-in .ct-px{animation:pxfloat 3.8s ease-in-out infinite;animation-delay:calc(var(--k,0)*-.47s)}
@keyframes pxfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.catbar.is-in .ct-px rect{animation:pxshimmer 2.9s ease-in-out infinite;animation-delay:calc(var(--i)*-.19s)}
.catbar.is-in .ct-px rect.a{animation:pxshimmer 2.9s ease-in-out infinite,pxva 1.9s steps(1) infinite;animation-delay:calc(var(--i)*-.19s),0s}
.catbar.is-in .ct-px rect.b{animation:pxshimmer 2.9s ease-in-out infinite,pxvb 1.9s steps(1) infinite;animation-delay:calc(var(--i)*-.19s),0s}
@keyframes pxshimmer{0%,100%{opacity:1}50%{opacity:.42}}
@keyframes pxva{0%,56%{visibility:visible}57%,100%{visibility:hidden}}
@keyframes pxvb{0%,56%{visibility:hidden}57%,100%{visibility:visible}}
.cattile:hover .ct-px{animation:pxbob .55s cubic-bezier(.2,.8,.2,1)}
.cattile.is-on .ct-ph--px{background:transparent}
@media (prefers-reduced-motion:reduce){.catbar.is-in .ct-px,.catbar.is-in .ct-px rect{animation:none !important}.ct-px rect.b{visibility:hidden}}

/* v20.5 creator deep link: ?creator=Name scrolls to the card and spotlights it */
.creator.is-spot{box-shadow:0 0 0 4px #F5C900,0 24px 60px rgba(0,0,0,.35);animation:spotpulse 1.4s ease-out 3}
@keyframes spotpulse{0%{box-shadow:0 0 0 0 rgba(245,201,0,.9),0 24px 60px rgba(0,0,0,.35)}100%{box-shadow:0 0 0 14px rgba(245,201,0,0),0 24px 60px rgba(0,0,0,.35)}}

/* ===== v21 (founder 2026-11-01): one door, calm home, crisp category glyphs ===== */
.site-header.v21 .nav-right{display:flex;align-items:center;gap:12px;justify-content:flex-end}
.site-header.v21 .header-cta{display:inline-flex!important;white-space:nowrap}
@media (max-width:1180px){.site-header.v21 .header-cta{padding:.72em 1em;font-size:.82rem;border-radius:12px}.site-header.v21 .wrap.nav3{grid-template-columns:auto 1fr;gap:10px}}
@media (max-width:380px){.site-header.v21 .header-cta{padding:.66em .8em;font-size:.76rem}}
.btn--lg{padding:1.05em 1.75em;font-size:1.05rem}
.hero5--calm .hero-copy .cta-row{margin-top:8px;margin-bottom:6px}
.hero5--calm .assure{margin-top:14px}
.req--link{background:none;border:0;padding:0;margin-top:auto;font:700 .95rem/1.3 var(--font);color:var(--purple);cursor:pointer;display:inline-flex;align-items:center;gap:8px;align-self:flex-start;border-bottom:2px solid var(--yellow);border-radius:0;width:auto;justify-content:flex-start}
.req--link .ico{width:16px;height:16px;transition:transform .2s}
.req--link:hover .ico{transform:translateX(4px)}
.creator-body .req.req--link{width:auto;justify-content:flex-start;margin-top:auto}
.route .route-link{background:none;padding:0;font:inherit;font-weight:700;cursor:pointer;color:#fff;text-align:left;border:0;border-bottom:2px solid rgba(245,201,0,.5);border-radius:0}
.route .route-link:hover{border-bottom-color:var(--yellow)}
/* category tiles: one solid glyph each, purple field with yellow pixels (selected: yellow field, purple pixels); the two-frame flip stays, the shimmer and float go */
.cattile{grid-template-columns:38px 1fr;gap:12px;padding:10px 12px;border-radius:14px}
.cattile .ct-ph,.cattile .ct-ph--px{width:38px;height:38px;aspect-ratio:1;border-radius:11px;background:var(--purple);display:grid;place-items:center;transition:background .2s,transform .2s}
.ct-px{width:26px;height:26px;display:block;overflow:visible}
.ct-px rect{fill:var(--yellow);opacity:1;transform:scale(0);transform-box:fill-box;transform-origin:center;transition:transform .32s cubic-bezier(.2,.9,.2,1.25) calc(var(--i)*14ms),fill .2s}
.catbar.is-in .ct-px rect,html:not(.js) .ct-px rect{transform:none}
.catbar.is-in .ct-px,.catbar.is-in .ct-px rect{animation:none}
.catbar.is-in .ct-px rect.a{animation:pxva 2.2s steps(1) infinite}
.catbar.is-in .ct-px rect.b{animation:pxvb 2.2s steps(1) infinite}
.cattile:hover .ct-ph--px{transform:translateY(-2px)}
.cattile.is-on .ct-ph--px{background:var(--yellow)}
.cattile.is-on .ct-px rect{fill:var(--purple)}
@media (max-width:1180px){.cattile{grid-template-columns:32px 1fr;gap:10px;padding:9px 11px}.cattile .ct-ph,.cattile .ct-ph--px{width:32px;height:32px;border-radius:9px}.ct-px{width:22px;height:22px}}
@media (max-width:700px){.cattile{grid-template-columns:30px 1fr}.cattile .ct-ph,.cattile .ct-ph--px{width:30px;height:30px}.ct-px{width:20px;height:20px}}
@media (prefers-reduced-motion:reduce){.catbar.is-in .ct-px rect.a,.catbar.is-in .ct-px rect.b{animation:none !important}.ct-px rect.b{visibility:hidden}}

/* v21 fixes */
.qz-next[hidden],.qz-skip[hidden],.qz-back[hidden]{display:none!important}
@media (max-width:560px){.site-header.v21 .logo img.logo-word{height:12px}.site-header.v21 .header-cta{font-size:.72rem;padding:.62em .8em}.site-header.v21 .nav-right{gap:8px}.site-header.v21 .wrap.nav3{gap:8px}.site-header.v21 .logo{gap:8px}}
@media (max-width:360px){.site-header.v21 .logo img.logo-word{display:none}}

/* v21.2: back arrow in the sticky header, two clear paths in the nav */
.site-header.v21 .nav-brand{display:flex;align-items:center;gap:10px;min-width:0}
.hback{width:38px;height:38px;flex:0 0 38px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;text-decoration:none;transition:background .15s,transform .15s}
.hback svg{width:20px;height:20px}
.hback:hover{background:var(--yellow);color:var(--purple);transform:translateX(-2px)}
.site-header.v21.is-scrolled .hback{width:32px;height:32px;flex-basis:32px}
@media (max-width:560px){.hback{width:34px;height:34px;flex-basis:34px}.site-header.v21 .nav-brand{gap:6px}}
@media (max-width:400px){body:not([data-page="home"]) .site-header.v21 .logo img.logo-word{display:none}}
.backwrap{display:none}

/* v21.3 (founder 2026-11-01): language switch and back arrow in the same language as the category tiles */
.site-header.v21 .lang{display:inline-flex;gap:2px;padding:3px;border:0;border-radius:999px;background:rgba(255,255,255,.12)}
.site-header.v21 .lang a{font:800 .68rem/1 var(--font);letter-spacing:.08em;padding:8px 11px;border-radius:999px;color:rgba(255,255,255,.75);text-decoration:none;transition:background .15s,color .15s}
.site-header.v21 .lang a:hover{color:#fff}
.site-header.v21 .lang a[aria-current="true"]{background:var(--yellow);color:var(--purple)}
.menu .lang{border:0;border-radius:999px;background:rgba(255,255,255,.12);padding:3px}
.menu .lang a{border-radius:999px;padding:8px 11px;color:rgba(255,255,255,.75)}
.menu .lang a[aria-current="true"]{background:var(--yellow);color:var(--purple)}
.hback{background:rgba(255,255,255,.12)}
.spa-back{display:none!important}
.site-header.v21 .lang a,.menu .lang a{width:auto;height:auto;display:inline-block;background:transparent}
.site-header.v21 .lang a[aria-current="true"],.menu .lang a[aria-current="true"]{background:var(--yellow)}

/* v21.6 (founder 2026-11-02): less empty space in creator cards on phones; the hero says one thing */
.creator-body .who{min-height:0}
@media (max-width:640px){.creator-body{padding:14px 16px 18px;gap:8px}.creator-body .req.req--link{margin-top:4px}}

/* v21.6 (founder 2026-11-02): wall in strict view order, straight columns, no staircase */
.mosaic--wall .mcol--shift{margin-top:0}
@media (max-width:980px){.mosaic--wall .mtile{order:var(--o,0)}}

/* v21.6 (founder 2026-11-02): lightbox = the creator's content full screen; close, name, dots, one button; no labels, titles or hints */
.lb{padding:0;background:#000}
.lb-backdrop{background:#000;backdrop-filter:none}
.lb-panel{display:block;width:100%;height:100dvh;max-height:none;background:#000;border-radius:0;box-shadow:none}
.lb-player{aspect-ratio:auto;height:100%;max-height:none;width:100%;background:#000}
.lb-player video,.lb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.lb-tap{position:absolute;inset:0;border:0;background:transparent;padding:0;cursor:pointer}
.lb.is-paused .lb-tap::after{content:"";position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(255,255,255,.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234B2D8F' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/28px no-repeat}
.lb-close{top:calc(12px + env(safe-area-inset-top,0px));right:12px;width:40px;height:40px}
.lb-nav{width:40px;height:40px;background:rgba(255,255,255,.85)}
.lb-bar{position:absolute;left:0;right:0;bottom:0;padding:48px 16px calc(14px + env(safe-area-inset-bottom,0px));background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,0));display:grid;gap:10px;pointer-events:none}
.lb-bar>*{pointer-events:auto}
.lb-name{color:#fff;font-size:1.5rem;font-weight:800;letter-spacing:-.03em;line-height:1;margin:0;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.lb-dots{display:flex;gap:5px;min-height:4px}
.lb-dots i{display:block;height:4px;flex:1 1 0;max-width:36px;border-radius:99px;background:rgba(255,255,255,.4)}
.lb-dots i.is-on{background:var(--yellow)}
.lb-req{margin:0;justify-content:center;width:100%}
@media (min-width:821px){
  .lb-panel{width:min(100%,calc(100dvh * 9 / 16));margin:0 auto}
  .lb-prev{left:calc(50% - min(50%,100dvh * 9 / 32) - 56px)}
  .lb-next{right:calc(50% - min(50%,100dvh * 9 / 32) - 56px)}
  .lb-close{right:calc(50% - min(50%,100dvh * 9 / 32) - 56px);top:16px}
  .lb-nav{position:fixed}
  .lb-close{position:fixed}
  .lb-req{width:auto;justify-self:start}
}
/* v21.6 (founder 2026-11-02): the creators section heading steps back, the cards lead */
.creators-sec .section-head{margin-bottom:14px}
.creators-sec .h-section{font-size:clamp(1.35rem,2.4vw,1.9rem)}
.creators-sec .eyebrow{display:none}

/* ===== v22 (founder 2026-11-02): one screen per idea, no dead space. Smaller section gaps everywhere; on phones the long stacks become compact grids ===== */
.section{padding-block:clamp(44px,5.5vw,84px)}
.section-head{margin-bottom:clamp(18px,2.6vw,32px)}
.madeband{padding-block:clamp(20px,2.6vw,36px)}
.statband{padding-block:0 clamp(20px,3vw,40px)}
@media (max-width:700px){
  .section{padding-block:34px}
  .section-head{gap:8px;margin-bottom:16px}
  .h-section{font-size:clamp(1.45rem,6.4vw,1.9rem);line-height:1.05}
  .lead{font-size:.95rem;line-height:1.45}
  /* hero: one tight block, the wall starts on the first screen */
  .hero5 .hero-copy{gap:12px}
  .hero5 .h-display{font-size:clamp(2rem,9vw,2.5rem)}
  .hero5 .lead{font-size:.95rem}
  .hero5 .assure{display:flex;flex-wrap:wrap;gap:4px 12px}
  .hero5 .assure li{font-size:.78rem}
  .hero5 .assure .ico{width:14px;height:14px}
  /* logos: one quiet row */
  .madeband .eyebrow{margin-bottom:6px}
  .madeband .made-rows .logo-track--rev{display:none}
  .madeband .logo-track img{max-height:28px}
  /* numbers: three small figures in one row, platform icons only */
  .statcard{padding:16px 14px}
  .statcard>.eyebrow{display:none}
  .stats-grid--3{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:0}
  .stats-grid--3 .stat{padding-left:8px;border-left-width:2px;gap:4px}
  .stats-grid--3 .stat .num{font-size:1.25rem!important}
  .stats-grid--3 .stat .lbl{font-size:.68rem;line-height:1.3}
  .plat-row{gap:12px;padding-top:10px;margin-top:12px;justify-content:center}
  .plat-row .label{display:none}
  .plat-row span{font-size:0;gap:0}
  .plat-row img{width:22px;height:22px}
  /* creators: two per row, the video leads, one line under it */
  .creators-sec .section-head .lead{display:none}
  .creators{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important}
  .creator{border-radius:14px;overflow:hidden}
  .creator .cstage{aspect-ratio:9/14}
  .creator .cname{font-size:1.05rem!important;left:10px!important;bottom:22px!important}
  .creator .cnav{display:none}
  .creator .cdots{bottom:8px}
  .creator .cdots i{width:4px;height:4px}
  .creator .cslide figcaption{font-size:.62rem;padding:3px 6px;top:8px;right:8px}
  .creator-body{padding:8px 10px 12px!important;gap:6px!important}
  .creator-body .who{font-size:.78rem;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .creator-body .chans,.creator-body .more,.creator-body .bestfor{display:none!important}
  .creator-body .req{font-size:.78rem}
  /* what we do: three compact rows */
  .prods{gap:8px}
  .prod{grid-template-columns:34px 1fr;display:grid;gap:2px 12px;padding:12px 14px;align-items:start}
  .prod .ico--big{width:30px;height:30px;grid-row:span 2}
  .prod h3{font-size:1rem}
  .prod p{font-size:.84rem;line-height:1.4}
  /* how it works: 2 x 2 steps, no illustrations */
  .flow{display:grid!important;grid-template-columns:1fr 1fr;gap:16px 12px}
  .flow-line,.fart{display:none!important}
  .fstep{padding:0!important}
  .fstep h3{font-size:1rem;margin-top:6px}
  .fstep p{font-size:.82rem;line-height:1.4}
  .fhead{gap:8px}
  .fnum{width:28px!important;height:28px!important;font-size:.85rem!important}
  /* real vs bought: the chart carries it, the paragraph steps back */
  .real-copy .lead{display:none}
  .real-chart{padding:14px;gap:10px}
  .rf-row{grid-template-columns:76px 1fr;gap:8px}
  .rf-name b{font-size:.9rem}
  .rf-note{display:none}
  /* faq */
  .faq summary{padding:14px 0;font-size:.98rem}
  .faq-group{margin:18px 0 2px}
}
@media (max-width:700px){.statcard .stats-grid.stats-grid--3{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important}.statcard .stats-grid--3 .stat{grid-column:auto!important}}
.creators-sec{padding-top:clamp(28px,3.5vw,48px)}
@media (max-width:700px){
  .steps{grid-template-columns:1fr 1fr!important;gap:16px 12px}
  .step{gap:4px;padding-top:10px}
  .step .num{font-size:1.6rem}
  .step h3{font-size:.98rem}
  .step p{font-size:.82rem;line-height:1.4}
  .problem-list li{padding:9px 0;font-size:.92rem;gap:12px}
  .two{gap:10px}
}
/* own articles (2026-11-04) */
.prose{max-width:68ch}
.prose h2{font-size:clamp(1.25rem,2.4vw,1.6rem);margin:1.8em 0 .5em}
.prose h3{font-size:1.05rem;margin:1.4em 0 .3em}
.prose p{margin:0 0 .9em;line-height:1.6}
.art-h1{font-size:clamp(2rem,5vw,3.6rem)}
.art-list{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.art-list a{display:block;padding:18px 20px;border:1px solid currentColor;border-radius:14px;text-decoration:none;color:inherit}
.art-list a:hover{background:var(--yellow,#F5C900);color:#1a1a1a}
.art-list b{display:block;font-size:1.1rem;margin-bottom:4px}
.art-list span{opacity:.75;font-size:.92rem}
/* creator card actions (founder 2026-11-04): one yellow CTA + a quiet round play button, pinned to the card bottom so rows align */
.creator .creator-body{display:flex;flex-direction:column;gap:10px}
.creator-actions{margin-top:auto;padding-top:10px;display:flex;align-items:center;gap:10px}
.creator-body .req--pill{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;margin:0;padding:.85em 1.1em;border:0;border-radius:999px;background:var(--yellow);color:var(--purple);font:800 .92rem/1.1 var(--font);cursor:pointer;transition:background .15s,transform .15s}
.creator-body .req--pill:hover{background:#FFD83A;transform:translateY(-1px)}
.creator-body .req--pill .ico{width:16px;height:16px;transition:transform .2s}.creator-body .req--pill:hover .ico{transform:translateX(3px)}
.creator-body .more--ico{flex:0 0 auto;width:44px;height:44px;display:inline-grid;place-items:center;padding:0;border:2px solid rgba(75,45,143,.2);border-radius:50%;background:#fff;color:var(--purple);cursor:pointer;align-self:center}
.creator-body .more--ico:hover{border-color:var(--purple)}
.creator-body .more--ico .ico{width:18px;height:18px}
@media (max-width:640px){.creator-body .req--pill{padding:.62em .7em;font-size:.76rem}.creator-actions{padding-top:6px}}
/* founder 2026-11-04: consent as a centred pop-up (more visible = more yes). The page stays usable behind it and Decline sits on the same layer: a hard cookie wall is not valid consent under GDPR/ePrivacy. */
.consent{left:50%;right:auto;top:50%;bottom:auto;transform:translate(-50%,-50%);width:min(460px,calc(100% - 32px));max-width:none;grid-template-columns:1fr;gap:16px;padding:26px 26px 22px;border-radius:18px;background:#fff;color:var(--ink);box-shadow:0 0 0 100vmax rgba(29,21,56,.42),0 24px 60px rgba(29,21,56,.35);animation:consent-in .35s cubic-bezier(.2,.9,.3,1.2) both .6s}
.consent p{font-size:.98rem;line-height:1.45;color:var(--ink)}
.consent a{color:var(--purple);font-weight:700}
.consent-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.consent .btn{padding:.95em 1.5em;font-size:.86rem;border-radius:12px}
.consent-no{background:none;border:0;padding:.4em 0;font:600 .86rem var(--font);color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.consent-no:hover{color:var(--purple)}
@keyframes consent-in{from{opacity:0;transform:translate(-50%,-44%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%)}}
/* consent v3 (founder 2026-11-04, after the best-practice examples): brand card, equal Accept / Reject, Settings layer, phone bottom sheet */
.consent{gap:12px;padding:24px 24px 18px;width:min(480px,calc(100% - 32px))}
.consent-t{font:800 1.15rem/1.2 var(--font)!important;color:var(--purple)!important;letter-spacing:-.01em}
.consent p{font-size:.95rem}
.consent-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.consent .btn{justify-content:center;width:100%;padding:.95em 1em;font-size:.86rem;border-radius:12px;min-height:48px}
.consent .consent-rej{background:#fff;color:var(--purple);border:2px solid var(--purple)}
.consent .consent-rej:hover{background:var(--paper)}
.consent-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:28px}
.consent-link{background:none;border:0;padding:.3em 0;font:700 .85rem var(--font);color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.consent-link:hover{color:var(--purple)}
.consent-save{width:auto!important;min-height:40px!important;padding:.7em 1.1em!important}
.consent-prefs{display:grid;gap:2px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:6px 0;max-height:42vh;overflow:auto}
.consent-prefs[hidden]{display:none}
.cpref{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0;cursor:pointer}
.cpref span{display:grid;gap:2px}.cpref b{font-size:.92rem;color:var(--purple)}.cpref small{font-size:.8rem;line-height:1.35;color:var(--ink-2)}
.cpref input{position:absolute;opacity:0;width:1px;height:1px}
.cpref i{flex:0 0 46px;height:28px;border-radius:999px;background:#D9D3EA;position:relative;transition:background .2s}
.cpref i::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.cpref input:checked+i{background:var(--purple)}.cpref input:checked+i::after{transform:translateX(18px)}
.cpref input:disabled+i{background:#B7A9DD;opacity:.7}
.cpref input:focus-visible+i{outline:3px solid var(--yellow);outline-offset:2px}
.consent.is-prefs .consent-actions{grid-template-columns:1fr 1fr}
.foot-cookie{background:none;border:0;padding:0;font:inherit;color:inherit;opacity:.8;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
@media (max-width:640px){
  .consent{left:0;right:0;top:auto;bottom:0;transform:none;width:100%;border-radius:20px 20px 0 0;padding:20px 16px calc(14px + env(safe-area-inset-bottom));animation:consent-up .35s cubic-bezier(.2,.9,.3,1) both .5s}
  .consent p{font-size:.9rem}
  @keyframes consent-up{from{transform:translateY(100%)}to{transform:none}}
}
@media (max-width:340px){.consent-actions{grid-template-columns:1fr}}
.consent [hidden]{display:none!important}
@media (max-width:340px){.h-display{font-size:clamp(2rem,10.5vw,2.6rem)}.h-section{font-size:clamp(1.6rem,8.5vw,2rem)}}
.foot-logo{display:inline-flex;align-items:center;gap:10px;margin-bottom:14px}
.foot-cookie{text-align:left;text-decoration:none;font-weight:inherit;opacity:1;align-self:flex-start;justify-self:start;font-size:inherit;color:inherit;padding:0}
.foot-cookie:hover{text-decoration:underline}
.foot-grid .foot-logo img{margin:0;width:auto}.foot-grid .foot-logo img:first-child{height:40px}.foot-grid .foot-logo img:last-child{height:16px}
.foot-links .foot-cookie{font-family:var(--font);font-size:.98rem;font-weight:600;letter-spacing:0;line-height:inherit}
/* v23 (founder 2026-11-05, 361px screenshot): on narrow phones the wordmark collided with the header CTA on home and creator pages; below 400px the header shows the mark, the CTA and the menu only */
@media (max-width:400px){.site-header.v21 .logo img.logo-word{display:none}}
/* consent v4 (founder 2026-11-05): a centred pop-up on every screen; the page does not scroll until the visitor chooses.
   One big "Sutinku"; a small x in the corner = necessary cookies only (said in the text, Esc does the same); Settings for the detail. */
html.consent-open,html.consent-open body{overflow:hidden!important;overscroll-behavior:none}
.consent-back{position:fixed;inset:0;z-index:69;background:rgba(29,21,56,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);touch-action:none}
.consent-back[hidden]{display:none}
.consent,.consent[class]{left:50%!important;right:auto!important;top:50%!important;bottom:auto!important;transform:translate(-50%,-50%)!important;width:min(420px,calc(100% - 32px))!important;border-radius:22px!important;padding:30px 24px 18px!important;text-align:center;box-shadow:0 30px 80px rgba(29,21,56,.45)!important;max-height:calc(100dvh - 32px);overflow:auto;animation:consent-pop .4s cubic-bezier(.2,.9,.3,1.2) both .5s!important}
@keyframes consent-pop{from{opacity:0;transform:translate(-50%,-46%) scale(.94)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.consent-t{font-size:1.45rem!important;margin:0 0 2px}
.consent p{font-size:.92rem!important;line-height:1.45}
.consent-x{position:absolute;top:8px;right:8px;width:30px;height:30px;border:0;border-radius:50%;background:transparent;color:#A69EC0;font:400 20px/30px var(--font);cursor:pointer;padding:0}
.consent-x:hover,.consent-x:focus-visible{color:var(--purple);background:var(--paper)}
.consent-actions,.consent.is-prefs .consent-actions{display:block!important}
.consent .consent-yes{width:100%;min-height:54px;font-size:1rem!important;border-radius:14px;box-shadow:0 8px 22px rgba(245,201,0,.45)}
.consent-foot{justify-content:center!important}
.consent.is-prefs .consent-foot{justify-content:space-between!important}
.consent .cpref{text-align:left}
@media (prefers-reduced-motion:reduce){.consent{animation:none!important}}
/* header on phones (founder 2026-11-05: wordmark ran into the CTA, language switch missing): mark + language + CTA + menu, never touching */
@media (max-width:560px){.site-header.v21 .logo img.logo-word{display:none}.site-header.v21 .nav-right .lang{display:inline-flex!important}.site-header.v21 .lang a{padding:7px 9px;font-size:.64rem}}
.header-cta .cta-s{display:none}
@media (max-width:400px){.header-cta .cta-l{display:none}.header-cta .cta-s{display:inline}.site-header.v21 .nav-right{gap:6px}.site-header.v21 .nav-brand{gap:6px}}
@media (max-width:340px){.site-header.v21 .lang a{padding:6px 7px}.site-header.v21 .header-cta{padding:.6em .7em}}
/* consent sits above everything, the creator lightbox included (creator links from emails open straight into it) */
.consent-back{z-index:9998!important}.consent{z-index:9999!important}
/* consent v5 (founder 2026-11-05: shorter and witty, like a retro system window, in our brand): purple title bar with the small x, pixel cookie with a bite, one line, one big button */
.consent,.consent[class]{padding:0!important;overflow:hidden;border:3px solid var(--purple);border-radius:14px!important;width:min(340px,calc(100% - 40px))!important;box-shadow:8px 8px 0 var(--yellow),0 30px 70px rgba(29,21,56,.45)!important;gap:0!important;display:block!important}
.consent-bar{display:flex;align-items:center;justify-content:space-between;background:var(--purple);color:#fff;padding:7px 8px 7px 14px;font:800 .72rem/1 var(--font);letter-spacing:.06em;text-align:left}
.consent-bar>span::before{content:"";display:inline-block;width:8px;height:8px;background:var(--yellow);margin-right:8px;vertical-align:0}
.consent .consent-x{position:static;width:26px;height:26px;border-radius:6px;color:#fff;background:rgba(255,255,255,.14);font:700 17px/26px var(--font)}
.consent .consent-x:hover,.consent .consent-x:focus-visible{background:var(--yellow);color:var(--purple)}
.consent-body{padding:20px 22px 14px;display:grid;justify-items:center;gap:6px}
.consent-cookie{width:64px;height:64px;margin-bottom:4px;animation:cookie-bob 2.4s ease-in-out infinite}
@keyframes cookie-bob{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-5px) rotate(6deg)}}
.consent .consent-t{font:800 1.6rem/1.1 var(--font)!important;color:var(--purple)!important;margin:0}
.consent .consent-body>p:not(.consent-t):not(.consent-note){font-size:.95rem!important;color:var(--ink);margin:0 0 8px}
.consent .consent-actions{width:100%}
.consent .consent-yes{min-height:52px}
.consent-foot{gap:8px!important;margin-top:4px}
.consent-dot{color:var(--ink-2)}
.consent a.consent-link{color:var(--ink-2);font-weight:700}
.consent-note{font-size:.72rem!important;color:var(--ink-2)!important;margin:2px 0 0!important}
.consent.is-prefs .consent-note,.consent.is-prefs .consent-cookie{display:none}
.consent.is-prefs .consent-foot{width:100%}
.consent .consent-prefs{width:100%}
@media (prefers-reduced-motion:reduce){.consent-cookie{animation:none}}
/* consent v6 (founder 2026-11-05, later the same day): no pop-up. A small card in the bottom-left corner; the page scrolls and works;
   whoever ignores it is simply not tracked (nothing loads until "Sutinku"). x = necessary only. */
html.consent-open,html.consent-open body{overflow:visible!important}
.consent-back{display:none!important}
.consent,.consent[class]{left:max(14px,env(safe-area-inset-left,0px))!important;right:auto!important;top:auto!important;bottom:calc(14px + env(safe-area-inset-bottom,0px))!important;transform:none!important;width:min(268px,calc(100% - 28px))!important;border-width:2px;border-radius:12px!important;box-shadow:5px 5px 0 var(--yellow),0 12px 30px rgba(29,21,56,.3)!important;animation:consent-slide .45s cubic-bezier(.2,.9,.3,1.1) both 1.2s!important;max-height:none}
@keyframes consent-slide{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.consent-bar{padding:5px 6px 5px 11px;font-size:.66rem}
.consent .consent-x{width:22px;height:22px;font-size:15px;line-height:22px}
.consent-body{grid-template-columns:auto 1fr;justify-items:start;align-items:center;text-align:left;gap:2px 12px;padding:12px 14px 12px}
.consent-cookie{grid-row:1/3;width:40px;height:40px;margin:0}
.consent .consent-t{font-size:1.05rem!important}
.consent .consent-body>p:not(.consent-t):not(.consent-note){font-size:.8rem!important;line-height:1.35;margin:0}
.consent .consent-actions{grid-column:1/-1;margin-top:10px}
.consent .consent-yes{min-height:40px;font-size:.88rem!important;border-radius:10px;box-shadow:none}
.consent-foot{grid-column:1/-1;justify-content:flex-start!important;margin-top:6px;font-size:.78rem}
.consent .consent-link{font-size:.76rem}
.consent-note{display:none}
.consent.is-prefs .consent-body{grid-template-columns:1fr}
@media (max-width:640px){.consent,.consent[class]{bottom:calc(84px + env(safe-area-inset-bottom,0px))!important}}
@media (max-width:640px){.consent,.consent[class]{width:min(220px,calc(100% - 28px))!important}.consent .consent-body>p:not(.consent-t):not(.consent-note){display:none}.consent-cookie{grid-row:auto;width:30px;height:30px}.consent .consent-t{font-size:.98rem!important}.consent-body{padding:10px 12px}.consent .consent-yes{min-height:38px}}
/* consent v7 (founder 2026-11-05 17:27): tiny one-line pill, bottom right: cookie, "Gal slapuką?", Sutinku, x. Settings live in the footer link. */
.consent:not(.is-prefs),.consent:not(.is-prefs)[class]{left:auto!important;right:max(14px,env(safe-area-inset-right,0px))!important;bottom:calc(14px + env(safe-area-inset-bottom,0px))!important;width:auto!important;max-width:calc(100% - 28px);display:flex!important;align-items:center;gap:8px;padding:6px 6px 6px 10px!important;border-width:2px;border-radius:999px!important;box-shadow:3px 3px 0 var(--yellow),0 8px 22px rgba(29,21,56,.28)!important}
.consent:not(.is-prefs) .consent-bar,.consent:not(.is-prefs) .consent-body{display:contents}
.consent:not(.is-prefs) .consent-bar>span,.consent:not(.is-prefs) .consent-body>p:not(.consent-t),.consent:not(.is-prefs) .consent-foot,.consent:not(.is-prefs) .consent-note{display:none!important}
.consent:not(.is-prefs) .consent-cookie{order:1;width:22px;height:22px;flex:0 0 22px;animation-duration:3s}
.consent:not(.is-prefs) .consent-t{order:2;font-size:.86rem!important;white-space:nowrap}
.consent:not(.is-prefs) .consent-actions{order:3;margin:0;width:auto}
.consent:not(.is-prefs) .consent-yes{min-height:30px;padding:.45em .95em!important;font-size:.78rem!important;border-radius:999px;width:auto}
.consent:not(.is-prefs) .consent-x{order:4;width:20px;height:20px;font-size:13px;line-height:20px;border-radius:50%;background:transparent;color:var(--ink-2)}
.consent:not(.is-prefs) .consent-x:hover,.consent:not(.is-prefs) .consent-x:focus-visible{background:var(--paper);color:var(--purple)}
@media (max-width:640px){.consent:not(.is-prefs),.consent:not(.is-prefs)[class]{width:auto!important;bottom:calc(84px + env(safe-area-inset-bottom,0px))!important}}
/* opened from the footer link: the full settings card, bottom right */
.consent.is-prefs{left:auto!important;right:max(14px,env(safe-area-inset-right,0px))!important}
@media (min-width:641px){body:has(.dock.is-on) .consent:not(.is-prefs){bottom:calc(84px + env(safe-area-inset-bottom,0px))!important}}
.consent{transition:bottom .3s ease}
/* v7.1 (founder: "per mažas dabar"): one step bigger, still one line */
.consent:not(.is-prefs),.consent:not(.is-prefs)[class]{gap:12px;padding:9px 9px 9px 14px!important;box-shadow:4px 4px 0 var(--yellow),0 10px 26px rgba(29,21,56,.3)!important}
.consent:not(.is-prefs) .consent-cookie{width:34px;height:34px;flex-basis:34px}
.consent:not(.is-prefs) .consent-t{font-size:1.08rem!important}
.consent:not(.is-prefs) .consent-yes{min-height:40px;padding:.6em 1.3em!important;font-size:.92rem!important}
.consent:not(.is-prefs) .consent-x{width:26px;height:26px;font-size:16px;line-height:26px}
@media (max-width:640px){.consent:not(.is-prefs),.consent:not(.is-prefs)[class]{gap:10px}.consent:not(.is-prefs) .consent-cookie{width:30px;height:30px;flex-basis:30px}.consent:not(.is-prefs) .consent-t{font-size:1rem!important}}
/* v23 (founder 2026-11-05: "nepatinka toks lygus statinis išdėstymas, padaryk kaip buvo seniau"): staggered columns again on wide screens,
   each column drifts on its own rhythm; the order stays by views (1-4 top row). Phones keep the swipe strip. */
@media (min-width:981px){
  .mosaic--wall{align-items:start;padding-bottom:56px}
  .mosaic--wall .mcol:nth-child(2){margin-top:56px}
  .mosaic--wall .mcol:nth-child(3){margin-top:18px}
  .mosaic--wall .mcol:nth-child(4){margin-top:74px}
}
@media (min-width:981px) and (prefers-reduced-motion:no-preference){
  .mosaic--wall .mcol{animation:coldrift 11s ease-in-out infinite}
  .mosaic--wall .mcol:nth-child(2){animation-duration:13s;animation-delay:-4s}
  .mosaic--wall .mcol:nth-child(3){animation-duration:10s;animation-delay:-7s}
  .mosaic--wall .mcol:nth-child(4){animation-duration:12s;animation-delay:-2s}
  @keyframes coldrift{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
}

/* founder 2026-11-06: between 981 and 1180px the main links were hidden with no menu button, so Insights (and the other pages) could not be reached; show the menu button there too */
@media (min-width:981px) and (max-width:1180px){
  .site-header .nav-toggle{display:block}
  body.menu-open .nav-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  body.menu-open .nav-toggle span:nth-child(2){opacity:0}
  body.menu-open .nav-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  body.menu-open .menu{display:flex}
  .menu{position:fixed;inset:76px 0 0 0;background:linear-gradient(180deg,#2B1A5E,var(--purple));color:var(--white);z-index:40;flex-direction:column;justify-content:space-between;padding:32px var(--gutter) 32px;overflow:auto}
  .menu a{color:var(--white);text-decoration:none}
  .menu-links a{display:block;font-size:clamp(2rem,5vw,3rem);font-weight:800;letter-spacing:-.03em;text-transform:uppercase;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.15)}
  .menu-foot{display:grid;gap:16px;margin-top:32px}
  body.menu-open{overflow:hidden}
  body.menu-open .dock{display:none}
}
/* founder 2026-11-06: same positions on every page and every quiz step */
.hback--ph{visibility:hidden;pointer-events:none;background:none!important}
/* founder 2026-11-06: the creator CTA was wider than the brand CTA, so the language switch moved on the join page; one short label and one width everywhere */
.header-cta .cta-l{display:none}.header-cta .cta-s{display:inline}
.site-header .header-cta{min-width:152px;justify-content:center;text-align:center}
@media (max-width:560px){.site-header .header-cta{min-width:110px}}
/* founder 2026-11-06 ("susigrūdęs, elementai lipa vienas ant kito"): an older rule forced gap:0; even breathing room inside the pill */
.consent:not(.is-prefs),.consent:not(.is-prefs)[class]{gap:14px!important;padding:8px 12px 8px 16px!important}
.consent:not(.is-prefs) .consent-x{margin-left:-2px}
@media (max-width:640px){.consent:not(.is-prefs),.consent:not(.is-prefs)[class]{gap:10px!important;padding:7px 10px 7px 12px!important}}
@media (max-width:360px){.consent:not(.is-prefs) .consent-t{font-size:.9rem!important}.consent:not(.is-prefs) .consent-yes{padding:.55em 1em!important}}
/* founder 2026-11-06 (phone screenshot): the invisible back slot left a hole before the logo on the home page. The logo now always sits first
   at the left edge; the back arrow comes right after it, and its slot stays reserved on the home page so nothing moves between pages. */
.site-header .nav-brand .logo{order:1}.site-header .nav-brand .hback{order:2}
/* phones: the cookie pill becomes one tidy bar across the bottom, never off the screen edge */
@media (max-width:640px){
  .consent:not(.is-prefs),.consent:not(.is-prefs)[class]{left:12px!important;right:12px!important;max-width:none;width:auto!important;justify-content:flex-start}
  .consent:not(.is-prefs) .consent-t{flex:1 1 auto;min-width:0}
}

/* v23.2 phone calm-down (founder 2026-11-06: "ikonos ir grafiniai elementai perstambūs, atrodo apkrautai, nėra tvarkos ... nemaloni kelionė į CTA").
   One loud thing per screen: the yellow CTA. Everything else gets quieter and smaller, one spacing rhythm (8/12/16/24). */
@media (max-width:640px){
  /* creator cards: one quiet text link instead of nine yellow buttons; the yellow stays for the main CTA */
  .creator-body .req--pill{flex:0 0 auto;justify-content:flex-start;background:transparent!important;color:var(--purple)!important;padding:6px 0!important;min-height:0;font-size:.82rem!important;font-weight:800;box-shadow:none!important;border-radius:0}
  .creator-body .req--pill .ico{width:14px;height:14px}
  .creator-actions{padding-top:4px;gap:8px;align-items:center}
  .creator-body .chans img{width:16px;height:16px}
  .creator .cslide figcaption{font-size:.56rem!important;padding:3px 6px!important;letter-spacing:.04em}
  .creator .cslide figcaption b{font-size:.78rem}
  /* hero ticks smaller */
  .assure li{font-size:.82rem}.assure .ico{width:14px!important;height:14px!important}
  /* category tiles become slim chips */
  .catbar{gap:8px!important}
  .cattile{padding:7px 12px 7px 8px!important;border-radius:999px!important;gap:8px!important;min-height:0!important;grid-template-columns:22px auto!important}
  .cattile .ct-ph,.cattile .ct-ph--px{width:22px!important;height:22px!important;flex:0 0 22px;border-radius:7px!important}
  .cattile .ct-px{width:14px!important;height:14px!important}
  .cattile .ct-text>*:not(:first-child),.cattile small{display:none!important}
  .cattile .ct-text>*:first-child{font-size:.84rem;white-space:nowrap}
  /* the numbers card: three tidy rows, number left, label right */
  .statcard .stats-grid.stats-grid--3{grid-template-columns:1fr!important;gap:0!important}
  .statcard .stat{display:grid!important;grid-template-columns:96px 1fr;align-items:center;gap:12px;padding:10px 0!important;border:0!important;border-top:1px solid var(--line)!important;text-align:left}
  .statcard .stat:first-child{border-top:0!important}
  .statcard .stat .num{font-size:1.35rem!important;line-height:1}
  .statcard .stat .lbl{font-size:.8rem!important;line-height:1.35;margin:0!important}
  .statcard .plat-row img{width:18px;height:18px}
}
@media (max-width:700px){.catbar .cattile{flex:0 0 auto!important;width:auto!important;min-width:0!important;max-width:none!important}}
/* bug fix 2026-11-06: the pill's display:flex!important beat [hidden], so the bar stayed after a choice. Hidden always wins; the quiz hides it too */
.consent[hidden],.consent[hidden]:not(.is-prefs)[class],body.qz-open .consent:not(.is-prefs)[class],body.qz-open .consent[class]{display:none!important}
/* creators hero (founder 2026-11-06: match the home page): staggered poster wall on desktop, the swipe strip on phones */
.hero5--creators .mtile--c img{display:block;width:100%;height:100%;object-fit:cover}
.hero5--creators .mtile--c figcaption b{display:none}
@media (max-width:980px){.hero5--creators .cwall{display:none!important}}
@media (min-width:981px){.hero5--creators .strip{display:none}}

.cr-stripsec{background:var(--paper);padding:18px 0 8px}
@media (max-width:900px){
  .cr-grid{grid-template-columns:1fr;gap:8px}
  .cr-fan{height:330px;margin-top:8px}
  .cr-card{width:138px}
  .cr-card--0{transform:translate(-112%,-50%) rotate(-8deg)}.cr-card--2{transform:translate(12%,-50%) rotate(8deg)}
  .cr-chip{font-size:.74rem;padding:6px 10px}
  .cr-chip--0{top:2%;left:0}.cr-chip--1{top:12%;right:0}.cr-chip--2{bottom:10%;left:0}.cr-chip--3{bottom:0;right:2%}
}
@media (max-width:560px){.cr-ticks{flex-direction:column;gap:8px}.cr-h1 span{text-shadow:2px 2px 0 var(--purple)}}
.cr-stripsec .strip,.cr-stripsec .strip--big{background:transparent!important;margin-top:0}
.cr-stripsec .strip-cta{color:var(--purple)!important;background:#fff!important;border:1px solid var(--line)!important}
.cr-stripsec .strip-cta *{color:inherit}

/* ===== creators hero v3 (founder 2026-11-06: "sumatchink fontus ir stilistiką", "paminimalizuok"): the home hero5 with the colours flipped ===== */
.hero5--yellow{background:var(--yellow)!important;color:var(--purple)}
.hero5--yellow::before,.hero5--yellow::after{display:none!important}
.hero5--yellow .eyebrow{color:var(--purple)}
.hero5--yellow .h-display{color:var(--purple)}
.hero5--yellow .h-display .hl{color:var(--purple)}
html.js .hero5--yellow .h-display .hl{background-image:linear-gradient(90deg,rgba(255,255,255,.75),rgba(255,255,255,.75))}
.hero5--yellow .lead{color:#2B1A5E}
.hero5--yellow .assure li,.hero5--yellow .assure li:first-child{color:var(--purple)}
.hero5--yellow .assure li:first-child{font-weight:800}
.hero5--yellow .assure .ico .pf,.hero5--yellow .assure li:first-child .ico .pf{fill:var(--purple)}
.hero5--yellow .assure .ico .ps{stroke:var(--yellow)}
.hero5--yellow .btn--purple:hover{background:#2B1A5E}
/* five real faces, fanned, calm */
.cr-fan{position:relative;height:clamp(360px,34vw,480px);z-index:1}
.cr-card{position:absolute;top:50%;left:50%;width:clamp(120px,11.5vw,168px);aspect-ratio:9/16;margin:0;border-radius:16px;overflow:hidden;background:var(--purple);box-shadow:0 18px 40px -18px rgba(43,26,94,.55);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.cr-card img{display:block;width:100%;height:100%;object-fit:cover}
.cr-card figcaption{position:absolute;left:8px;bottom:8px;padding:3px 8px;border-radius:999px;background:rgba(29,21,56,.72);color:#fff;font-size:.66rem;font-weight:700}
.cr-card--0{transform:translate(-205%,-44%) rotate(-10deg)}
.cr-card--1{transform:translate(-128%,-50%) rotate(-5deg);z-index:2}
.cr-card--2{transform:translate(-50%,-54%);z-index:3}
.cr-card--3{transform:translate(28%,-50%) rotate(5deg);z-index:2}
.cr-card--4{transform:translate(105%,-44%) rotate(10deg)}
@media (hover:hover){.cr-fan:hover .cr-card--0{transform:translate(-215%,-46%) rotate(-12deg)}.cr-fan:hover .cr-card--4{transform:translate(115%,-46%) rotate(12deg)}}
@media (max-width:980px){
  .cr-fan{height:300px;margin-top:6px}
  .cr-card{width:104px;border-radius:12px}
  .cr-card figcaption{font-size:.58rem;padding:2px 6px}
}
@media (max-width:400px){.cr-card{width:92px}.cr-fan{height:270px}}
@media (max-width:980px){
  .cr-card{width:96px}
  .cr-card--0{transform:translate(-185%,-44%) rotate(-9deg)}.cr-card--1{transform:translate(-118%,-50%) rotate(-4deg)}
  .cr-card--3{transform:translate(18%,-50%) rotate(4deg)}.cr-card--4{transform:translate(85%,-44%) rotate(9deg)}
  .cr-fan{height:250px}
}
@media (max-width:360px){.cr-card{width:84px}}
/* founder 2026-11-06 (4th): back to the first fan look: purple frames and the floating stickers for what we do for the creator */
.cr-card{border:4px solid var(--purple);box-shadow:6px 8px 0 rgba(43,26,94,.9)}
.cr-chip{position:absolute;z-index:6;display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;background:var(--purple);color:#fff;font-size:.82rem;font-weight:800;box-shadow:3px 3px 0 #fff;white-space:nowrap}
.cr-chip i{width:16px;height:16px;border-radius:50%;background:var(--yellow);position:relative;flex:0 0 16px}
.cr-chip i::after{content:"";position:absolute;left:5px;top:3px;width:4px;height:7px;border:solid var(--purple);border-width:0 2px 2px 0;transform:rotate(45deg)}
.cr-chip--0{top:4%;left:6%}.cr-chip--1{top:12%;right:2%}.cr-chip--2{bottom:8%;left:2%}.cr-chip--3{bottom:2%;right:8%}
@media (prefers-reduced-motion:no-preference){
  .cr-chip{animation:crbob 4s ease-in-out infinite}.cr-chip--1{animation-delay:-1s}.cr-chip--2{animation-delay:-2s}.cr-chip--3{animation-delay:-3s}
  @keyframes crbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
}
@media (max-width:980px){
  .cr-card{border-width:3px;box-shadow:4px 5px 0 rgba(43,26,94,.9)}
  .cr-fan{height:290px}
  .cr-chip{font-size:.7rem;padding:5px 9px;gap:5px;box-shadow:2px 2px 0 #fff}.cr-chip i{width:13px;height:13px;flex-basis:13px}.cr-chip i::after{left:4px;top:2px;width:3px;height:6px}
  .cr-chip--0{top:0;left:0}.cr-chip--1{top:6%;right:0}.cr-chip--2{bottom:4%;left:0}.cr-chip--3{bottom:0;right:0}
}
/* founder 2026-11-06: less empty yellow, tighter spacing */
.hero5--yellow{padding-top:clamp(28px,3.5vw,48px)!important;padding-bottom:clamp(24px,3vw,40px)!important}
.hero5--yellow .hero5-grid{padding-bottom:0!important;gap:clamp(20px,3vw,48px)}
.cr-fan{height:clamp(320px,28vw,390px)}
@media (max-width:980px){.hero5--yellow .hero5-grid{gap:4px}.hero5--yellow .cr-fan{height:250px;margin-top:0}.hero5--yellow .hero-copy{gap:12px}}
.cr-stripsec{padding:12px 0 0}
@media (min-width:981px){.cr-chip--2{top:46%;bottom:auto;left:-3%}}
@media (max-width:980px){.hero5--yellow .cr-fan{margin-top:22px}.cr-chip--2{bottom:auto;top:46%;left:0}}
/* founder 2026-11-06 (tablet screenshot): the fan stretched to the full width on tablets, so the stickers floated far from the cards. The fan is now a fixed-size block in the middle; the stickers sit on its edges. */
@media (max-width:980px){.hero5--yellow .cr-fan{width:min(100%,430px);margin-inline:auto}}
@media (min-width:600px) and (max-width:980px){
  .hero5--yellow .cr-fan{width:540px;height:330px}
  .hero5--yellow .cr-card{width:128px}
  .cr-chip{font-size:.78rem;padding:7px 11px}
}
/* the language switch shows on tablets too (it was hidden between 561 and 980 px) */
@media (min-width:561px) and (max-width:980px){.site-header .nav-right .lang{display:inline-flex!important}}
/* founder 2026-11-06: the only promise on the page, shown as a bold sticker next to the button */
.cr-ctarow{display:flex;align-items:center;flex-wrap:wrap;gap:14px 18px}
.cr-promise{display:inline-flex;align-items:center;gap:10px;margin:0;padding:6px 16px 6px 8px;border-radius:999px;background:#fff;color:var(--purple);box-shadow:4px 4px 0 var(--purple);transform:rotate(-2deg)}
.cr-promise b{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--purple);color:var(--yellow);font-size:1.5rem;font-weight:800;line-height:1}
.cr-promise span{font-size:.92rem;font-weight:800;line-height:1.15;max-width:12ch}
@media (prefers-reduced-motion:no-preference){.cr-promise{animation:crwob 5s ease-in-out infinite}@keyframes crwob{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(1deg) translateY(-2px)}}}
@media (max-width:560px){.cr-promise b{width:38px;height:38px;font-size:1.3rem}.cr-promise span{font-size:.84rem}}
/* creators "Kaip tai veikia" (from the email mock the founder liked) */
.hw{padding:clamp(48px,6vw,88px) 0;background:#fff}
.hw h2{font-size:clamp(1.9rem,3.4vw,2.8rem);color:var(--purple);margin:0 0 clamp(28px,4vw,44px);letter-spacing:-.02em;text-align:center}
.hw-steps{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;position:relative;max-width:900px}
.hw-steps::before{content:"";position:absolute;top:32px;left:16%;right:16%;height:2px;background:var(--line)}
.hw-steps li{position:relative;text-align:center}
.hw-ic{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin:0 auto 14px;background:var(--paper);color:var(--purple);position:relative;z-index:1}
.hw-steps li:first-child .hw-ic{background:var(--yellow)}
.hw-ic svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.hw-when{font-weight:700;font-size:.72rem;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.hw-t{font-weight:800;font-size:1.15rem;line-height:1.3;color:var(--purple);margin-top:4px}
.hw-need{margin:clamp(36px,5vw,52px) 0 0;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center}
.hw-need span{background:var(--paper);color:var(--purple);font-weight:700;font-size:.92rem;line-height:1;padding:11px 16px;border-radius:999px}
.hw-need b{font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-right:4px}
.hw-cta{text-align:center;margin-top:clamp(28px,4vw,40px)}
@media (max-width:560px){.hw-t{font-size:.95rem}.hw-ic{width:52px;height:52px}.hw-steps::before{top:26px}.hw-ic svg{width:24px;height:24px}.hw-when{font-size:.6rem;letter-spacing:.06em}.hw-need{justify-content:flex-start}.hw-need b{width:100%}}
/* founder 2026-11-06: the promise must not look like a second button: plain text under the CTA, the number marked like the headline */
.cr-note{display:flex;align-items:center;gap:8px;margin:2px 0 0;color:var(--purple);font-size:1rem;font-weight:600}
.cr-note svg{width:20px;height:20px;flex:0 0 20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cr-note mark{background:linear-gradient(transparent 58%,rgba(255,255,255,.8) 58%);color:inherit;font-weight:800;padding:0 2px}
/* founder 2026-11-06 ("kodėl čia irgi tiek tuščio fono?"): three bottom paddings stacked under the home wall; keep one small one */
.hero5:not(.hero5--yellow){padding-bottom:clamp(20px,2.4vw,32px)!important}
.hero5:not(.hero5--yellow) .hero5-grid{padding-bottom:0!important}
@media (min-width:981px){.mosaic--wall{padding-bottom:16px!important}}
.hw-needs{margin:clamp(36px,5vw,52px) auto 0;max-width:900px;display:grid;gap:14px}
.hw-needs .hw-need{margin:0;justify-content:flex-start}
.hw-needs .hw-need b{min-width:110px}
.hw-chip--plat{display:inline-flex;align-items:center;gap:7px}
.hw-chip--plat img{width:18px;height:18px;border-radius:4px}
@media (max-width:560px){.hw-needs .hw-need b{min-width:0}}
/* founder 2026-11-06 ("kas tokioj vietoj deda rodyklę grįžti"): the back arrow sits LEFT of the logo, in the page margin, so the logo stays on the same spot on every page.
   Where the margin is too narrow for it (below 1360 px, phones) it is hidden: the logo leads home and the browser has its own back. */
.site-header .nav-brand .logo{order:0}
.site-header .nav-brand{position:relative}
.site-header .hback{display:none!important}
@media (min-width:1360px){
  .site-header .hback{display:grid!important;position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%)}
  .site-header .hback:hover{transform:translate(-2px,-50%)}
}
/* founder 2026-11-06: as alive as the brand page: the fanned cards float gently, each on its own beat */
@media (prefers-reduced-motion:no-preference){
  .cr-card{animation:crfloat 6s ease-in-out infinite}
  .cr-card--1{animation-delay:-1.2s}.cr-card--2{animation-delay:-2.4s;animation-duration:7s}.cr-card--3{animation-delay:-3.6s}.cr-card--4{animation-delay:-4.8s;animation-duration:6.6s}
  @keyframes crfloat{0%,100%{translate:0 0}50%{translate:0 -9px}}
}
/* founder 2026-11-06 (phone): match the desktop rhythm.
   1) swipe rows start at the text edge, not the screen edge (snap used to pull the first card to x=0), and run to the screen edge on the right */
@media (max-width:980px){
  .hero5 .mosaic--wall,.catbar,.strip-scroll{scroll-padding-inline:var(--gutter,20px)}
  .hero5 .mosaic--wall{margin-right:calc(-1*var(--gutter,20px))!important}
}
/* 2) the stat card's top margin collapsed through its band and left a white seam under the logo band */
.statband{display:flow-root}
/* 3) no empty gap at the bottom of the stat card */
@media (max-width:640px){.statcard{row-gap:6px!important}.statcard .stats-grid{margin-bottom:0!important}.statcard .plat-row{margin-top:6px!important}}
/* founder 2026-11-06 ("šitos ikonėlės neaiškios"): icons are plain circles with a check or a play mark, big enough to read at a glance */
.creator-body .more--ico{border:0!important;background:var(--purple)!important;color:#fff}
.creator-body .more--ico .ico{width:24px!important;height:24px!important}
.creator-body .more--ico .ico .pf{fill:var(--purple)!important}
.creator-body .more--ico .ico .pm{fill:#fff!important;transform:translateX(.5px)}
.creator-body .more--ico:hover{background:#2B1A5E!important}
.assure .ico,.strip-cta .ico{width:18px!important;height:18px!important}
/* founder 2026-11-06: the "Ieškome / Platformos / Kategorijos" rows were a mess (chips wrapped under the labels). Now a real two-column grid: label column, chips column; chips wrap inside their own column only. */
.hw-needs{display:grid!important;grid-template-columns:max-content 1fr;column-gap:28px;row-gap:16px;max-width:860px;margin:clamp(36px,5vw,52px) auto 0;align-items:start}
.hw-row{display:contents}
.hw-lab{padding-top:11px;font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.hw-chips{display:flex;flex-wrap:wrap;gap:10px}
.hw-chips span{display:inline-flex;align-items:center;gap:7px;background:var(--paper);color:var(--purple);font-weight:700;font-size:.92rem;line-height:1;padding:11px 16px;border-radius:999px;white-space:nowrap}
.hw-chips img{width:18px;height:18px;border-radius:4px}
@media (max-width:640px){
  .hw-needs{grid-template-columns:1fr;row-gap:8px}
  .hw-lab{padding-top:14px}
  .hw-chips{gap:8px}.hw-chips span{font-size:.86rem;padding:10px 13px}
}
/* founder 2026-11-06: the fan pushed past the screen on some laptop widths (page scrolled sideways, header and strip looked shifted). The cards now size to the fan's own width and the hero never overflows. */
.hero5--yellow{overflow:hidden}
.cr-fan{container-type:inline-size}
@media (min-width:981px){.hero5--yellow .cr-card{width:min(168px,21cqw)}}
html,body{overflow-x:clip}
/* founder 2026-11-06: the brands hero was stretched; keep it close to the creators hero height. Categories already sit right below as filters, so not in the hero; the video wall is capped and fades out. */
.hero5:not(.hero5--yellow) .pills{display:none}
.hero5:not(.hero5--yellow){padding-bottom:clamp(28px,3.5vw,48px)}
@media (min-width:901px){
  .hero5:not(.hero5--yellow) .mosaic--wall{max-width:440px;margin-left:auto}   /* all eight videos stay whole; a narrower wall keeps the hero low (no cropping, founder 2026-11-06) */
}
/* founder 2026-11-06: too much empty space between sections; tighter rhythm site-wide (desktop) */
@media (min-width:901px){ .section{padding-block:clamp(40px,4.2vw,64px)} .section--tight{padding-block:clamp(28px,3vw,44px)} }
/* same section rhythm as the rest of the site (founder 2026-11-06 via EMAIL work: less empty space between sections) */
@media (min-width:901px){.hw{padding-block:clamp(40px,4.2vw,64px)}}
/* "Tau čia vieta, jei" cards + one quiet logo row (founder 2026-11-06) */
.hw-fit{max-width:860px;margin:clamp(36px,5vw,52px) auto 0;text-align:center}
.hw-fit h3{font-weight:800;font-size:clamp(1.25rem,2vw,1.55rem);line-height:1.2;color:var(--purple);margin:0 0 18px}
.hw-fit ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px;text-align:left}
.hw-fit li{background:var(--paper);border-radius:16px;padding:16px 18px;display:flex;gap:14px;align-items:center;font-weight:600;font-size:.98rem;line-height:1.4;color:var(--ink)}
.hw-fit li i{flex:0 0 40px;height:40px;border-radius:11px;background:var(--yellow);display:grid;place-items:center;color:var(--purple)}
.hw-fit li svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.hw-logos{display:flex;justify-content:center;align-items:center;gap:22px;margin-top:24px}
.hw-logos img{width:32px;height:32px;border-radius:8px;opacity:.9}
@media (max-width:640px){.hw-fit ul{grid-template-columns:1fr}.hw-fit li{font-size:.92rem;padding:14px 14px}.hw-logos{gap:18px}.hw-logos img{width:28px;height:28px}}
.lb-req[hidden]{display:none!important}

/* Own articles and the guides list (ar-). Highlights sweep in, numbers count up, covers draw themselves, the story plays like a reel. */
.ar-hero{background:var(--paper);padding-block:clamp(48px,7vw,96px)}
.ar-hero-grid{display:grid;gap:clamp(24px,4vw,56px);align-items:center}
@media(min-width:900px){.ar-hero-grid{grid-template-columns:1.15fr .85fr}}
.ar-h1{font-size:clamp(2rem,5vw,3.8rem);text-transform:none;line-height:1.02}
.ar-hl{background:linear-gradient(var(--yellow),var(--yellow)) no-repeat 0 88%/0% 38%;color:inherit;padding:0 .08em;transition:background-size .9s cubic-bezier(.2,.7,.2,1)}
.ar-hl.is-in,.ar-static .ar-hl{background-size:100% 38%}
.ar-h1 .ar-hl,.ar-sbig .ar-hl{background-position:0 92%;background-size:0% 46%}
.ar-h1 .ar-hl.is-in,.ar-sbig .is-on .ar-hl,.ar-slide.is-on .ar-hl,.ar-static .ar-h1 .ar-hl{background-size:100% 46%}
.ar-prose h2 .ar-hl{background-size:0% 30%}.ar-prose h2 .ar-hl.is-in{background-size:100% 30%}
.ar-hl:hover{background-size:100% 100%}
.ar-num{font-variant-numeric:tabular-nums}
.ar-cover{border-radius:var(--r,16px);overflow:hidden;box-shadow:0 30px 60px -30px rgba(43,26,94,.45);aspect-ratio:3/2;background:var(--purple)}
.ar-cover-svg{display:block;width:100%;height:100%}
.ar-bg{fill:var(--purple)}.ar-dot{fill:rgba(255,255,255,.12)}
.ar-y{fill:var(--yellow)}.ar-w{fill:#fff}.ar-p{fill:var(--purple)}.ar-screen{fill:#2B1A5E}.ar-chip{fill:rgba(255,255,255,.18)}
.ar-t{font:800 20px/1 var(--font);fill:var(--purple)}.ar-t--big{font-size:64px}.ar-t--s{font-size:13px;fill:#fff}.ar-t--sw{font-size:12px;fill:#fff}
.ar-cover .ar-drop,.ar-cover .ar-rise,.ar-cover .ar-pop,.ar-cover .ar-tag,.ar-cover .ar-heart,.ar-cover .ar-plus{transform-box:fill-box;transform-origin:center}
.ar-js .ar-cover .ar-drop{opacity:0;transform:translateY(-60px)}
.ar-js .ar-cover .ar-rise{opacity:0;transform:translateY(40px)}
.ar-js .ar-cover .ar-pop,.ar-js .ar-cover .ar-tag,.ar-js .ar-cover .ar-plus{opacity:0;transform:scale(.4)}
.ar-js .ar-cover .ar-heart{opacity:0}
.ar-cover.is-in .ar-drop{animation:ar-drop .7s cubic-bezier(.3,1.4,.5,1) forwards;animation-delay:calc(var(--i)*.22s)}
.ar-cover.is-in .ar-rise{animation:ar-rise .8s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i)*.2s)}
.ar-cover.is-in .ar-pop,.ar-cover.is-in .ar-tag,.ar-cover.is-in .ar-plus{animation:ar-pop .5s cubic-bezier(.3,1.6,.5,1) forwards;animation-delay:calc(var(--i)*.18s + .3s)}
.ar-cover.is-in .ar-heart{animation:ar-heart 2.8s ease-in infinite;animation-delay:calc(var(--i)*.45s + .6s)}
.ar-cover.is-in .ar-tag{animation:ar-pop .5s cubic-bezier(.3,1.6,.5,1) forwards,ar-swing 3s ease-in-out 1.8s infinite}
.ar-cover.is-in .ar-plus{animation:ar-pop .5s cubic-bezier(.3,1.6,.5,1) forwards 1.2s,ar-pulse 1.6s ease-in-out 2s infinite}
@keyframes ar-drop{to{opacity:1;transform:none}}@keyframes ar-rise{to{opacity:1;transform:none}}@keyframes ar-pop{to{opacity:1;transform:none}}
@keyframes ar-heart{0%{opacity:0;transform:translateY(0) scale(.6)}20%{opacity:1}100%{opacity:0;transform:translateY(-70px) scale(1.1)}}
@keyframes ar-swing{0%,100%{transform:rotate(0)}50%{transform:rotate(-4deg)}}@keyframes ar-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
.ar-grid{display:grid;gap:clamp(32px,5vw,72px)}
@media(min-width:980px){.ar-grid{grid-template-columns:minmax(0,1fr) 340px;align-items:start}.ar-side{position:sticky;top:96px}}
@media(max-width:979px){.ar-side{order:-1;max-width:300px;margin-inline:auto;width:100%}}
.ar-prose h2{color:var(--purple)}
/* the story: a 9:16 kinetic reel made of the article (hand-drawn marks, words flying in, colour cuts) */
.ar-story{position:relative;margin:0;aspect-ratio:9/16;border-radius:22px;overflow:hidden;background:var(--purple);color:#fff;box-shadow:0 30px 60px -28px rgba(43,26,94,.55);user-select:none;container-type:inline-size;--dur:4.6s}
.ar-bars{position:absolute;top:12px;left:12px;right:12px;display:flex;gap:4px;z-index:5}
.ar-bars i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden;mix-blend-mode:normal}
.ar-bars b{display:block;height:100%;width:0;background:#fff}
.ar-bars i.is-done b{width:100%}
.ar-bars i.is-now b{animation:ar-bar var(--dur) linear forwards}
.ar-story.is-paused .ar-bars i.is-now b,.ar-story:not(.is-playing) .ar-bars i.is-now b{animation-play-state:paused}
@keyframes ar-bar{to{width:100%}}
.ar-slide{position:absolute;inset:0;padding:16cqw 8cqw 20cqw;display:flex;flex-direction:column;justify-content:center;gap:5cqw;visibility:hidden;clip-path:circle(0% at 85% 85%);transition:clip-path .55s cubic-bezier(.7,0,.2,1),visibility 0s .55s}
.ar-slide.is-on{visibility:visible;clip-path:circle(150% at 85% 85%);transition:clip-path .6s cubic-bezier(.7,0,.2,1),visibility 0s;z-index:2}
.ar-slide.is-out{visibility:visible;z-index:1}
.ar-th-p{background:var(--purple);color:#fff}.ar-th-y{background:var(--yellow);color:var(--purple)}.ar-th-w{background:#fff;color:var(--purple)}
.ar-sk{display:flex;align-items:center;gap:3cqw;font:800 3.4cqw/1 var(--font);letter-spacing:.2em}
.ar-sk i{flex:0 0 0;height:.5cqw;background:currentColor;opacity:.5;transition:flex-basis .6s ease .2s}
.ar-slide.is-on .ar-sk i{flex-basis:18cqw}
.ar-th-p .ar-sk{color:var(--yellow)}
.ar-sbig{font:800 10.5cqw/1.02 var(--font);letter-spacing:-.03em;text-wrap:balance}
.ar-fx-hook .ar-sbig{font-size:12.5cqw}
.ar-ssmall{font:500 4.6cqw/1.4 var(--font);opacity:.9}
.ar-w{display:inline-block;opacity:0;transform:translateY(.6em) rotate(4deg) scale(.9);filter:blur(4px)}
.ar-slide.is-on .ar-w{animation:ar-word .5s cubic-bezier(.2,1.4,.4,1) forwards;animation-delay:calc(var(--w)*.09s + .35s)}
@keyframes ar-word{to{opacity:1;transform:none;filter:none}}
.ar-story .ar-hl{position:relative;background:none;padding:0;color:inherit;white-space:nowrap}
.ar-th-p .ar-hl{color:var(--yellow)}
.ar-scrib,.ar-circ,.ar-arrow{position:absolute;pointer-events:none;overflow:visible}
.ar-scrib{left:-3%;right:-3%;width:106%;bottom:-.22em;height:.4em}
.ar-circ{left:-14%;top:-22%;width:128%;height:144%}
.ar-scrib path,.ar-circ path,.ar-arrow path{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.ar-scrib path{stroke:var(--yellow);stroke-width:3.2}
.ar-th-y .ar-scrib path,.ar-th-w .ar-scrib path{stroke:var(--purple)}
.ar-th-w .ar-hl{background:linear-gradient(var(--yellow),var(--yellow)) no-repeat 0 85%/0% 40%;transition:background-size .5s ease calc(var(--w)*.09s + .7s)}
.ar-th-w .is-on .ar-hl,.ar-th-w.is-on .ar-hl{background-size:100% 40%}
.ar-circ path{stroke:var(--yellow);stroke-width:3}
.ar-th-y .ar-circ path{stroke:#fff}
.ar-slide.is-on .ar-scrib path,.ar-slide.is-on .ar-circ path{animation:ar-draw .7s cubic-bezier(.6,0,.2,1) forwards;animation-delay:calc(var(--w,1)*.09s + .55s)}
.ar-big-n{position:relative;font-size:1.5em;margin-right:.1em}
.ar-big-n .ar-circ{--w:1}
@keyframes ar-draw{to{stroke-dashoffset:0}}
.ar-arrow{right:7cqw;bottom:22cqw;width:26cqw;height:16cqw;transform:rotate(-8deg)}
.ar-arrow path{stroke:currentColor;stroke-width:3.2;opacity:.85}
.ar-slide.is-on .ar-arrow path{animation:ar-draw .6s ease forwards 1.4s}
.ar-slide.is-on .ar-arrow path+path{animation-delay:1.9s}
.ar-stickers{position:absolute;inset:0;pointer-events:none}
.ar-st{position:absolute;width:6cqw;height:6cqw;opacity:0;transform:scale(0) rotate(-30deg)}
.ar-st:nth-child(1){left:8cqw;top:12cqw}.ar-st:nth-child(2){right:10cqw;top:24cqw}.ar-st:nth-child(3){left:12cqw;bottom:16cqw}.ar-st:nth-child(4){right:14cqw;bottom:34cqw;width:4cqw;height:4cqw}
.ar-st--sq{background:var(--yellow);border-radius:1.4cqw}.ar-th-y .ar-st--sq{background:var(--purple)}
.ar-st--dot{background:#fff;border-radius:50%}.ar-th-w .ar-st--dot{background:var(--purple)}
.ar-st--star{background:var(--yellow);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}.ar-th-y .ar-st--star{background:#fff}
.ar-slide.is-on .ar-st{animation:ar-stick .5s cubic-bezier(.3,1.7,.5,1) forwards,ar-float 3.2s ease-in-out infinite;animation-delay:calc(var(--j)*.15s + .2s),calc(var(--j)*.15s + .8s)}
@keyframes ar-stick{to{opacity:1;transform:none}}@keyframes ar-float{0%,100%{translate:0 0}50%{translate:0 -1.6cqw}}
.ar-fx-hook.is-on .ar-sbig{animation:ar-shake .5s ease 1.6s 2}
@keyframes ar-shake{0%,100%{transform:none}25%{transform:rotate(-1.2deg)}75%{transform:rotate(1.2deg)}}
.ar-tapme{position:absolute;left:50%;bottom:30cqw;width:16cqw;height:16cqw;margin-left:-8cqw;border-radius:50%;border:.8cqw solid var(--yellow);opacity:0}
.ar-tapme i{position:absolute;inset:30%;border-radius:50%;background:var(--yellow)}
.ar-slide.is-on .ar-tapme{animation:ar-ring 1.4s ease-out 1.2s infinite}
@keyframes ar-ring{0%{opacity:.9;transform:scale(.5)}100%{opacity:0;transform:scale(1.5)}}
.ar-fx-cta .ar-sbig{font-size:11.5cqw}
.ar-tap{position:absolute;top:0;bottom:0;width:38%;background:none;border:0;cursor:pointer;z-index:4}
.ar-tap--prev{left:0}.ar-tap--next{right:0;width:62%}
.ar-play{position:absolute;left:50%;bottom:7cqw;transform:translateX(-50%);z-index:6;display:inline-flex;align-items:center;gap:10px;padding:.85em 1.25em;border:0;border-radius:999px;background:var(--purple);color:#fff;font:800 .82rem/1 var(--font);letter-spacing:.04em;cursor:pointer;white-space:nowrap;box-shadow:0 10px 24px -10px rgba(0,0,0,.5)}
.ar-play-ico{width:0;height:0;border-left:11px solid var(--yellow);border-top:7px solid transparent;border-bottom:7px solid transparent}
.ar-story.is-playing .ar-play{opacity:0;pointer-events:none;transition:opacity .3s}
.ar-brand{position:absolute;bottom:7cqw;left:8cqw;z-index:3;font:800 2.6cqw/1 var(--font);letter-spacing:.24em;opacity:.6;mix-blend-mode:difference;color:#fff}
.ar-story:not(.is-playing) .ar-brand{opacity:0}
/* reel mode: the story alone, full frame, for recording 1080x1920 videos */
.ar-reel-page{margin:0;background:#000;overflow:hidden}
.ar-reel-page .ar-story{width:100vw;height:100vh;aspect-ratio:auto;border-radius:0;box-shadow:none}
.ar-reel-page .ar-play,.ar-reel-page .ar-tap{display:none}
.ar-reel-page .ar-brand{opacity:.6}
.ar-end .ar-sbig{font-size:9cqw}.ar-end .ar-ssmall{font-weight:800;color:var(--yellow);opacity:1}
/* guides list on the insights page */
.ar-cards{list-style:none;margin:0;padding:0;display:grid;gap:clamp(16px,2.4vw,28px)}
@media(min-width:760px){.ar-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ar-card{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--line);border-radius:var(--r,16px);overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}
.ar-card:hover{transform:translateY(-4px);box-shadow:0 24px 48px -28px rgba(43,26,94,.45)}
.ar-card .ar-cover{border-radius:0;box-shadow:none}
.ar-card-body{display:grid;gap:8px;padding:20px 22px 24px}
.ar-card-body b{font-size:1.3rem;line-height:1.15;color:var(--purple);letter-spacing:-.01em}
.ar-card-body span{color:var(--ink-2);font-size:.95rem}
.ar-card-body em{font-style:normal;font-weight:700;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--purple)}
@media(prefers-reduced-motion:reduce){.ar-hl{transition:none}.ar-cover *{animation:none!important;opacity:1!important;transform:none!important}}
@media(prefers-reduced-motion:reduce){.ar-hl{transition:none}.ar-cover *,.ar-story *{animation:none!important;opacity:1!important;transform:none!important;filter:none!important}.ar-scrib path,.ar-circ path,.ar-arrow path{stroke-dashoffset:0}}
/* giant outlined glyph behind each slide (the step number, ? on the hook, an arrow on the CTA) */
.ar-ghost{position:absolute;right:-6cqw;bottom:-14cqw;font:800 92cqw/1 var(--font);letter-spacing:-.06em;-webkit-text-fill-color:transparent;-webkit-text-stroke:3px var(--purple);opacity:0;transform:translateY(20cqw) rotate(-8deg);pointer-events:none;z-index:0}
.ar-slide.is-on .ar-ghost{animation:ar-ghost .9s cubic-bezier(.2,.9,.2,1) forwards .1s,ar-drift 6s ease-in-out 1s infinite alternate}
@keyframes ar-ghost{to{opacity:.16;transform:none}}@keyframes ar-drift{to{translate:-3cqw -2cqw}}
.ar-th-y .ar-ghost{opacity:0}.ar-th-y.is-on .ar-ghost{animation-name:ar-ghost-y,ar-drift}@keyframes ar-ghost-y{to{opacity:.22;transform:none}}
.ar-slide>.ar-sk,.ar-slide>.ar-sbig,.ar-slide>.ar-ssmall{position:relative;z-index:1}
.ar-big-n .ar-circ{left:-34%;width:168%;top:-12%;height:124%}
.ar-th-p .ar-ghost{-webkit-text-stroke-color:var(--yellow)}

/* ===== v21: the one door (warm-up questions, then the email) ===== */
.qz{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:20px}
.qz[hidden]{display:none}
.qz-backdrop{position:absolute;inset:0;background:rgba(29,21,56,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.qz-panel{position:relative;width:min(640px,100%);max-height:min(92vh,860px);overflow:auto;background:#fff;color:var(--ink);border-radius:22px;box-shadow:0 40px 90px rgba(29,21,56,.45);display:flex;flex-direction:column;animation:qzin .32s cubic-bezier(.2,.8,.2,1)}
@keyframes qzin{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
.qz-close{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:50%;border:0;background:var(--paper);color:var(--purple);font:400 26px/1 var(--font);cursor:pointer;display:grid;place-items:center;z-index:2}
.qz-close:hover{background:var(--yellow)}
.qz-head{padding:30px 32px 0}
.qz-head .eyebrow{margin-bottom:8px}
.qz-title{font-size:clamp(1.5rem,3.2vw,2rem);letter-spacing:-.025em;line-height:1.08;color:var(--purple);margin:0 44px 8px 0}
.qz-sub{color:var(--ink-2);font-size:.95rem;line-height:1.5;margin:0 0 18px;max-width:34em}
.qz-bar{height:4px;border-radius:99px;background:var(--line);overflow:hidden}
.qz-bar i{display:block;height:100%;width:0;background:var(--purple);transition:width .35s cubic-bezier(.2,.8,.2,1)}
.qz-body{padding:22px 32px 8px;flex:1}
.qz-count{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--ink-2);margin:0 0 8px}
.qz-q{font-size:clamp(1.15rem,2.4vw,1.45rem);letter-spacing:-.02em;line-height:1.2;color:var(--ink);margin:0 0 16px}
.qz-q--sub{font-size:1rem;margin:20px 0 10px;color:var(--purple)}
.qz-hint{color:var(--ink-2);font-size:.92rem;line-height:1.5;margin:-6px 0 16px}
.qz-opts{display:grid;gap:8px}
.qz-opts--row{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.qz-opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;font:600 .98rem/1.3 var(--font);color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:14px 16px;cursor:pointer;transition:border-color .15s,background .15s,color .15s,transform .15s}
.qz-opt::before{content:"";width:16px;height:16px;border-radius:5px;border:2px solid rgba(75,45,143,.35);flex:0 0 auto;transition:background .15s,border-color .15s;background:#fff}
.qz-opt:hover{border-color:var(--purple);transform:translateY(-1px)}
.qz-opt.is-on{background:var(--purple);border-color:var(--purple);color:#fff}
.qz-opt.is-on::before{background:var(--yellow);border-color:var(--yellow)}
.qz-opts--row .qz-opt{padding:11px 13px;font-size:.9rem}
.qz-read{margin:0 0 16px;padding:14px 16px;background:var(--paper);border-left:4px solid var(--yellow);border-radius:0 12px 12px 0}
.qz-read-t{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--purple);margin:0 0 6px}
.qz-read-p{margin:0;font-size:.95rem;line-height:1.5;color:var(--ink)}
.qz-ctx{margin:0 0 10px;font-size:.9rem;color:var(--purple);font-weight:700}
.qz-fields{display:grid;gap:10px;margin:4px 0 12px}
.qz-fields input{font:inherit;font-size:1.02rem;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:14px 16px;width:100%;min-width:0;outline:0}
.qz-fields input:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(75,45,143,.12)}
.qz-submit{display:grid;gap:10px;margin-top:6px}
.qz-submit .btn{justify-content:center;width:100%}
.qz-submit .small{font-size:.8rem;line-height:1.45}
.qz-submit .small a{color:var(--purple)}
.qz .form-msg{margin:0 0 12px;border-radius:0 12px 12px 0}
.qz-foot{display:flex;align-items:center;gap:12px;padding:14px 32px 26px;border-top:1px solid var(--line);margin-top:8px}
.qz-foot[hidden]{display:none}
.qz-back,.qz-skip{background:none;border:0;font:600 .9rem/1 var(--font);color:var(--ink-2);cursor:pointer;padding:10px 6px;border-radius:8px}
.qz-back:hover,.qz-skip:hover{color:var(--purple)}
.qz-skip{margin-left:auto}
.qz-next{min-width:120px;justify-content:center}
.qz-next:disabled{opacity:.45;cursor:not-allowed;transform:none}
.qz-step--done .btn{margin-top:8px}
body.qz-open{overflow:hidden}
@media (max-width:640px){
  .qz{padding:0;align-items:end}
  .qz-panel{width:100%;max-height:100dvh;height:100dvh;border-radius:0}
  .qz-head{padding:22px 20px 0}
  .qz-body{padding:18px 20px 8px}
  .qz-foot{padding:12px 20px calc(16px + env(safe-area-inset-bottom,0px))}
  .qz-opt{padding:13px 14px;font-size:.95rem}
}
@media (prefers-reduced-motion:reduce){.qz-panel{animation:none}.qz-bar i{transition:none}}

/* v21.1: fun, no-commitment quiz; glyph options; the mail icon pops before the email */
.qz-head{padding-top:26px}
.qz-head .eyebrow{color:var(--purple);background:var(--paper);display:inline-block;padding:6px 10px;border-radius:999px;margin-bottom:12px;letter-spacing:.12em}
.qz-title{margin-bottom:16px}
.qz-opts--grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.qz-opt--g{padding:12px 14px}
.qz-opt--g::before{display:none}
.qz-g{width:34px;height:34px;flex:0 0 34px;border-radius:9px;background:var(--purple);display:grid;place-items:center;transition:background .15s}
.qz-g .ct-px{width:22px;height:22px}
.qz-g .ct-px rect{fill:var(--yellow);transform:none;opacity:1;transition:fill .15s}
.qz-opt--g.is-on .qz-g{background:var(--yellow)}
.qz-opt--g.is-on .qz-g .ct-px rect{fill:var(--purple)}
.qz-opt--g.is-on::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--yellow);margin-left:auto}
.qz-pop{width:64px;height:64px;border-radius:50%;background:var(--yellow);display:grid;place-items:center;margin:0 0 14px;box-shadow:0 14px 34px rgba(245,201,0,.4);transform:scale(0)}
.qz-pop .ico{width:30px;height:30px}
.qz-pop .ico .pf{fill:var(--purple)}.qz-pop .ico .ps{stroke:var(--yellow)}
.qz-pop.is-pop{animation:qzpop .6s cubic-bezier(.2,1.4,.3,1) forwards}
@keyframes qzpop{0%{transform:scale(0) rotate(-20deg)}70%{transform:scale(1.12) rotate(4deg)}100%{transform:scale(1) rotate(0)}}
.qz-step--final .qz-q{font-size:clamp(1.4rem,2.8vw,1.8rem);color:var(--purple)}
@media (max-width:640px){.qz-opts--grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.qz-pop{transform:none}.qz-pop.is-pop{animation:none}}

.qz-opt--g.is-on::after{margin-left:auto}
.creator-line .btn{vertical-align:middle}

/* v21.3: options without form ticks; a pixel dot like the category tiles */
.qz-opt{border-radius:14px;gap:14px}
.qz-opt::before{width:12px;height:12px;border-radius:3px;border:0;background:var(--line);transition:background .15s,transform .15s}
.qz-opt:hover::before{background:var(--purple)}
.qz-opt.is-on::before{background:var(--yellow);transform:rotate(45deg) scale(1.1)}
.qz-opt--g::before{display:none}
.qz-opt--g.is-on::after{content:"";width:12px;height:12px;border-radius:3px;background:var(--yellow);transform:rotate(45deg);margin-left:auto;flex:0 0 12px}

.qz-fields--2{grid-template-columns:1fr 1fr}
@media (max-width:640px){.qz-fields--2{grid-template-columns:1fr}}

.qz-fields textarea{font:inherit;font-size:1rem;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:12px 16px;width:100%;min-width:0;outline:0;resize:vertical;min-height:58px}
.qz-fields textarea:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(75,45,143,.12)}
.qz-fields .full{grid-column:1/-1}
.qz-fields [hidden]{display:none}

/* v21.6 (founder 2026-11-02): fewer elements, one screen. Head is a thin progress line, the question leads, answers sit two per row, the footer never leaves the screen. */
.qz{padding:16px}
.qz-panel{max-height:min(94vh,760px);overflow:hidden}
.qz-head{padding:18px 24px 0}
.qz-head .qz-bar{height:3px}
.qz-body{padding:16px 24px 6px;flex:1 1 auto;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch}
.qz-q{font-size:clamp(1.1rem,2.2vw,1.3rem);margin:0 0 12px}
.qz-q--sub{font-size:.85rem;margin:12px 0 8px;color:var(--ink-2);letter-spacing:.02em}
.qz-hint{font-size:.88rem;margin:-4px 0 12px}
.qz-opts{gap:6px}
.qz-opts--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.qz-opts--row{grid-template-columns:repeat(2,minmax(0,1fr))}
.qz-opt{gap:10px;padding:10px 12px;font-size:.9rem;line-height:1.25;min-height:44px;border-radius:12px}
.qz-opts--row .qz-opt{padding:9px 12px;font-size:.86rem;min-height:40px}
.qz-opt--g{padding:8px 10px}
.qz-g{width:30px;height:30px;flex:0 0 30px;border-radius:8px}
.qz-g .ct-px{width:20px;height:20px}
.qz-fields{grid-template-columns:1fr 1fr;gap:8px;margin:0 0 10px}
.qz-fields input,.qz-fields textarea{padding:11px 14px;font-size:.98rem;border-radius:12px}
.qz-fields textarea{min-height:48px}
.qz-submit{gap:8px;margin-top:0}
.qz-priv{font-size:.78rem;text-align:center;color:var(--ink-2)}
.qz-step--final .qz-q{font-size:clamp(1.2rem,2.4vw,1.5rem)}
.qz-foot{flex:0 0 auto;padding:10px 24px 16px;margin-top:0;gap:8px}
.qz-next{min-width:108px;padding-top:12px;padding-bottom:12px}
.qz-step--done{padding:18px 0}
@media (max-width:640px){
  .qz{padding:0}
  .qz-panel{height:100dvh;max-height:100dvh}
  .qz-head{padding:16px 18px 0;padding-right:64px}
  .qz-body{padding:14px 18px 6px}
  .qz-foot{padding:10px 18px calc(12px + env(safe-area-inset-bottom,0px))}
  .qz-close{top:8px;right:10px;width:36px;height:36px}
  .qz-opts--2{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:360px){.qz-opt{font-size:.84rem;padding:9px 10px}}
@media (max-width:640px){
  /* the quiz is a sheet from the bottom, as tall as its content, never a blank white screen */
  .qz-panel{height:auto;max-height:100dvh;border-radius:22px 22px 0 0;animation:qzup .32s cubic-bezier(.2,.8,.2,1)}
  @keyframes qzup{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
  .qz-head{padding-top:18px}
}
/* v21.6: the creator's name above the question when a brand picked one */
.qz-who{margin:12px 0 0;font-size:.8rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--purple)}
.qz-who[hidden]{display:none}
.qz-who+.qz-body,.qz-head:has(.qz-who:not([hidden]))+.qz-body{padding-top:10px}
/* v21.6: step counter small on the left of the top row, progress line beside it, close on the right; the question right below */
.qz-head{padding:16px 24px 0;padding-right:72px}
.qz-top{display:flex;align-items:center;gap:12px;min-height:36px}
.qz-count{font-size:.72rem;font-weight:700;letter-spacing:.06em;color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.qz-count:empty{display:none}
.qz-top .qz-bar{flex:1 1 auto;height:3px}
.qz-close{top:14px;right:16px;width:36px;height:36px;font-size:22px}
.qz-who{margin:8px 0 0}
.qz-body{padding-top:8px}
@media (max-width:640px){
  .qz-head{padding:12px 18px 0;padding-right:62px}
  .qz-top{min-height:36px}
  .qz-close{top:12px;right:12px}
}

/* v22.1 (founder 2026-11-02): the quiz is a full page, not a pop-up; content sits in a calm centred column */
.qz{padding:0!important;place-items:stretch!important;align-items:stretch!important}
.qz-backdrop{display:none}
.qz-panel{width:100%!important;max-width:none!important;height:100dvh!important;max-height:none!important;border-radius:0!important;box-shadow:none!important;animation:qzpage .25s ease-out}
@keyframes qzpage{from{opacity:0}to{opacity:1}}
.qz-head,.qz-body,.qz-foot{width:100%;max-width:640px;margin-inline:auto}
.qz-head{padding-top:clamp(18px,4vh,40px)!important}
.qz-body{flex:1;display:flex;flex-direction:column;justify-content:flex-start;padding-top:clamp(16px,6vh,64px)!important}
.qz-foot{border-top:0!important;justify-content:space-between}
.qz-pop{display:none}
.qz-step--final .qz-q{margin-bottom:6px}
.qz-step--final .qz-hint{margin:0 0 18px}

/* founder 2026-11-06: footer buttons never move between steps. Back lines up with the answers, the row keeps one height even when Next is gone on the last step */
.qz-foot{min-height:76px;box-sizing:border-box}
.qz-back{padding-left:0;min-height:46px}
.qz-skip{min-height:46px}
/* founder 2026-11-06: creator consent checkbox in the last step */
.qz-check{display:flex;align-items:flex-start;gap:10px;font-size:.86rem;line-height:1.4;color:var(--ink);cursor:pointer;padding:4px 2px}
.qz-check input{flex:0 0 20px;width:20px;height:20px;margin:1px 0 0;accent-color:var(--purple)}
.qz-fields input[type=number]{-moz-appearance:textfield}
.qz-terms{font-size:.8rem;color:var(--ink-2);margin:-2px 0 4px 32px}
.qz-terms summary{cursor:pointer;font-weight:700;color:var(--purple);list-style:none}
.qz-terms summary::-webkit-details-marker{display:none}
.qz-terms summary::after{content:" +"}.qz-terms[open] summary::after{content:" -"}
.qz-terms ul{margin:6px 0 0;padding-left:16px;display:grid;gap:4px}
/* the cookie bar never covers the quiz; Next always sits on the right even when Back and Skip are hidden */
body.qz-open .consent{display:none!important}
.qz-next{margin-left:auto}
.qz-skip:not([hidden])~.qz-next{margin-left:0}

/* founder 2026-11-06 (via HQ): multi-select is obvious (pill + counter + a checkbox on every card), "Kita" opens a text field, one card per channel */
.qz-multi{display:flex;align-items:center;gap:10px;margin:-4px 0 12px}
.qz-multi-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--paper);color:var(--purple);font-size:.76rem;font-weight:800}
.qz-multi-pill::before{content:"";width:12px;height:12px;border-radius:3px;border:2px solid var(--purple);box-sizing:border-box}
.qz-multi-n{font-size:.76rem;font-weight:700;color:var(--ink-2)}
.qz-step[data-multi] .qz-opt{position:relative;padding-right:40px}
.qz-step[data-multi] .qz-opt::after{content:"";position:absolute;right:12px;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:5px;border:2px solid var(--line);background:#fff;box-sizing:border-box}
.qz-step[data-multi] .qz-opt.is-on::after{border-color:#fff;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%234B2D8F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.qz-step[data-multi] .qz-opt.is-on .qz-dot,.qz-step[data-multi] .qz-opt::before{display:none}
.qz-other{display:block;width:100%;box-sizing:border-box;margin-top:10px;padding:12px 14px;border:1.5px solid var(--purple);border-radius:12px;font:inherit;font-size:.96rem;color:var(--ink);background:#fff}
.qz-other[hidden]{display:none}
.qz-ch{display:grid;gap:12px}
.qz-chcard{border:1.5px solid var(--line);border-radius:14px;padding:14px;display:grid;gap:8px;background:#fff}
.qz-chname{margin:0;font-weight:800;color:var(--purple);font-size:.95rem}
.qz-chhandle{width:100%;box-sizing:border-box;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;font:inherit;font-size:.95rem}
.qz-chhandle:focus{outline:none;border-color:var(--purple)}
.qz-chlab{margin:4px 0 0;font-size:.74rem;font-weight:700;color:var(--ink-2);letter-spacing:.02em}
.qz-chips{display:flex;flex-wrap:wrap;gap:6px}
.qz-chip{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:7px 12px;font:inherit;font-size:.82rem;font-weight:700;color:var(--ink);cursor:pointer}
.qz-chip.is-on{background:var(--purple);border-color:var(--purple);color:#fff}
.qz-step[data-multi] .qz-opt{padding-right:42px!important}
.qz-step[data-multi] .qz-opt::after,.qz-step[data-multi] .qz-opt.is-on::after{transform:none!important;animation:none!important;border-radius:5px!important;width:18px!important;height:18px!important}
.qz-step[data-multi] .qz-opt{padding-right:34px!important}
.qz-step[data-multi] .qz-opt::after{right:10px!important;width:16px!important;height:16px!important;margin-top:-8px!important}
.qz-step[data-multi] .qz-opt>span{min-width:0}
@media (max-width:420px){.qz-step[data-multi] .qz-opt--g{font-size:.84rem;gap:8px}}
/* real platform logos (founder 2026-11-06 via HQ) */
.qz-logo{width:30px;height:30px;flex:0 0 30px;object-fit:contain}
.qz-chname{display:flex;align-items:center;gap:12px;font-size:1rem}
.qz-chlogo{width:48px;height:48px;flex:0 0 48px;object-fit:contain}
.qz-multi-n{display:none}
/* accounts step (founder 2026-11-06 via HQ): one row per channel, the logo and one link field; we pull followers and views ourselves */
.qz-chrow{display:flex;align-items:center;gap:12px;border:1.5px solid var(--line);border-radius:14px;padding:10px 12px;background:#fff}
.qz-chrow:focus-within{border-color:var(--purple)}
.qz-chrow .qz-chhandle{flex:1;min-width:0;border:0;padding:10px 4px;font-size:1rem}
.qz-chrow .qz-chhandle:focus{outline:none}
/* round 3: invalid profile = red border only; free text step; a quiet "Sąlygos" toggle */
.qz-chrow:has(.qz-chhandle.is-bad){border-color:#D93A3A}
.qz-textq{display:block;width:100%;box-sizing:border-box;padding:14px;border:1.5px solid var(--line);border-radius:14px;font:inherit;font-size:1rem;resize:vertical;min-height:96px}
.qz-textq:focus{outline:none;border-color:var(--purple)}
.qz-terms{margin:-6px 0 4px 30px!important;font-size:.78rem}
.qz-terms summary{display:inline-flex;align-items:center;gap:5px;font-weight:600!important;color:var(--ink-2)!important;opacity:.8}
.qz-terms summary::after{content:""!important;width:6px;height:6px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.qz-terms[open] summary::after{transform:rotate(-135deg) translateY(-1px)}
.qz-terms summary:hover{opacity:1}
/* country code + phone number (founder 2026-11-06) */
.qz-phone{display:grid;grid-template-columns:118px 1fr;gap:8px}
.qz-phone select{padding:11px 10px;border:1.5px solid var(--line);border-radius:12px;font:inherit;font-size:.98rem;background:#fff;color:var(--ink)}
.qz-phone select:focus{outline:none;border-color:var(--purple)}
.qz-submit button:disabled,.qz-submit button.is-locked{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}
.qz-phone{grid-template-columns:128px 1fr}
.qz-phone select{font-size:1rem}

/* ===== Reading page (rd-): hero frame cube, study cards with pixel illustrations, tilt, closing. Markup: site/reading_page.py. Motion: src/js/reading.js ===== */
.rd-hero{background:var(--paper);padding-bottom:clamp(32px,5vw,64px);position:relative}
.rd-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,64px);align-items:center}
.rd-hero-copy{gap:20px;position:relative;z-index:1}
.rd-hero .h-display{font-size:clamp(2.3rem,4.6vw,4.2rem)}
.rd-stage{position:relative;min-height:340px;perspective:1100px;--u:60px;--s:50px}
.rd-vox-wrap{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;transition:transform .25s ease-out;will-change:transform}
.rd-vox{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;transform:rotateX(-24deg) rotateY(-32deg);animation:rd-spin 38s linear infinite}
@keyframes rd-spin{from{transform:rotateX(-24deg) rotateY(0deg)}to{transform:rotateX(-24deg) rotateY(360deg)}}
.rd-c{position:absolute;left:calc(var(--s) / -2);top:calc(var(--s) / -2);width:var(--s);height:var(--s);transform-style:preserve-3d;transform:translate3d(calc(var(--cx,0) * var(--u)),calc(var(--cy,0) * var(--u)),calc(var(--cz,0) * var(--u)))}
.rd-c b{position:absolute;inset:0;display:block;border-radius:4px}
.rd-c--y b{background:#F5C900}.rd-c--y b:nth-child(2),.rd-c--y b:nth-child(4){background:#D9B100}.rd-c--y b:nth-child(5){background:#B89600}.rd-c--y b:nth-child(6){background:#FFDD3D}
.rd-c--p b{background:#8B6FD6}.rd-c--p b:nth-child(2),.rd-c--p b:nth-child(4){background:#7156BD}.rd-c--p b:nth-child(5){background:#5B44A0}.rd-c--p b:nth-child(6){background:#A58EE6}
.rd-c b:nth-child(1){transform:translateZ(calc(var(--s) / 2))}
.rd-c b:nth-child(2){transform:rotateY(90deg) translateZ(calc(var(--s) / 2))}
.rd-c b:nth-child(3){transform:rotateY(180deg) translateZ(calc(var(--s) / 2))}
.rd-c b:nth-child(4){transform:rotateY(-90deg) translateZ(calc(var(--s) / 2))}
.rd-c b:nth-child(5){transform:rotateX(-90deg) translateZ(calc(var(--s) / 2))}
.rd-c b:nth-child(6){transform:rotateX(90deg) translateZ(calc(var(--s) / 2))}
.rd-float{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);transform-style:preserve-3d;animation:rd-spin2 var(--t,26s) linear infinite,rd-bob 8s ease-in-out infinite;animation-delay:var(--d,0s),calc(var(--d,0s) * .5);opacity:.85}
.rd-float .rd-c{left:0;top:0;transform:none}
@keyframes rd-spin2{from{transform:rotateX(0deg) rotateY(0deg)}to{transform:rotateX(360deg) rotateY(360deg)}}
@keyframes rd-bob{0%,100%{margin-top:0}50%{margin-top:-12px}}

/* studies */
.rd-studies{padding-top:clamp(40px,6vw,72px)}
.rd-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.rd-item{display:block;min-width:0;max-width:100%}
.rd-item--wide{grid-column:1/-1}
.rd-card{position:relative;height:100%;background:#fff;border:1.5px solid var(--line);border-radius:var(--r);display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;max-width:100%;overflow:hidden;transform:perspective(1000px) rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg)) translateY(var(--ty,0px));transition:transform .2s ease-out,box-shadow .3s ease,border-color .3s ease}
.rd-item--wide .rd-card{grid-template-rows:none;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.rd-art{position:relative;min-width:0;max-width:100%;grid-template-columns:minmax(0,1fr);background:var(--paper);background-image:radial-gradient(var(--line) 1.2px,transparent 1.3px);background-size:14px 14px;background-position:7px 7px;display:grid;place-items:center;padding:30px 24px 24px;aspect-ratio:16/9}
.rd-item--wide .rd-art{aspect-ratio:auto;min-height:280px}
.rd-item--wide .rd-svg{max-width:440px}
html.rd-js .rd-art{cursor:pointer}
.rd-svg{width:100%;max-width:360px;min-width:0;height:auto;display:block;overflow:visible;justify-self:center}
.rd-idx{position:absolute;left:18px;top:14px;font-size:.72rem;letter-spacing:.18em;font-weight:800;color:var(--purple);opacity:.7}
.rd-body{padding:24px 26px 26px;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-content:start;min-width:0;max-width:100%}
.rd-stat{display:grid;gap:6px;color:var(--purple);min-width:0;max-width:100%}
.rd-num{font-size:clamp(2.4rem,3.4vw,3.6rem);font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;min-width:0;max-width:100%;overflow-wrap:anywhere}
.rd-stat span{font-size:.86rem;line-height:1.4;color:var(--ink-2);max-width:30em}
.rd-card h2{font-size:1.22rem;line-height:1.2;letter-spacing:-.015em;margin-top:4px}
.rd-item--wide .rd-card h2{font-size:clamp(1.3rem,1.8vw,1.6rem)}
.rd-sum{font-size:.97rem;line-height:1.6;color:var(--ink-2);max-width:62ch}
.rd-src a{font-weight:700;color:var(--purple);border-bottom:2px solid var(--yellow);text-decoration:none;font-size:.9rem}

/* pixels inside the illustrations */
.rd-y{fill:var(--yellow)}.rd-p{fill:var(--purple)}.rd-pl{fill:var(--purple);opacity:.5}.rd-pd{fill:var(--purple);opacity:.13}
.rd-gap{fill:var(--paper)}.rd-ln{fill:var(--ink);opacity:.22}
.rd-tile{fill:#fff;stroke:var(--purple);stroke-width:2.2}
.rd-ring{fill:none;stroke:var(--yellow);stroke-width:2.5;opacity:0;transform-box:fill-box;transform-origin:center}
.rd-cursor{fill:var(--ink);stroke:#fff;stroke-width:1.3;stroke-linejoin:round;transform:translate(140px,48px)}
.rd-part{opacity:var(--o,.5)}
.rd-pop,.rd-drop,.rd-grow,.rd-growx,.rd-growx-r,.rd-fade{transform-box:fill-box;transition:transform .55s cubic-bezier(.2,.8,.2,1) calc(var(--i,0) * 26ms),opacity .35s ease calc(var(--i,0) * 26ms)}
.rd-pop{transform-origin:center}
.rd-grow{transform-origin:bottom center}
.rd-growx{transform-origin:left center}
.rd-growx-r{transform-origin:right center}
/* before a card scrolls in (only when reading.js is alive, so the page reads fully without it) */
html.rd-js .rd-item:not(.is-in) .rd-pop{transform:scale(.05);opacity:0}
html.rd-js .rd-item:not(.is-in) .rd-drop{transform:translateY(-28px);opacity:0}
html.rd-js .rd-item:not(.is-in) .rd-grow{transform:scaleY(.02)}
html.rd-js .rd-item:not(.is-in) .rd-growx,html.rd-js .rd-item:not(.is-in) .rd-growx-r{transform:scaleX(.02)}
html.rd-js .rd-item:not(.is-in) .rd-fade{opacity:0}
html.rd-js .rd-item:not(.is-in) .rd-cursor{transform:translate(52px,96px)}
html.rd-js .rd-item.is-in .rd-cursor{animation:rd-click 1.6s cubic-bezier(.2,.7,.2,1) .15s both}
@keyframes rd-click{0%{transform:translate(52px,96px)}55%{transform:translate(140px,48px)}66%{transform:translate(140px,48px) scale(.78)}78%{transform:translate(140px,48px) scale(1)}100%{transform:translate(140px,48px)}}
html.rd-js .rd-item.is-in .rd-ring{animation:rd-ring 1s ease-out 1.1s both}
@keyframes rd-ring{0%{opacity:.9;transform:scale(.92)}100%{opacity:0;transform:scale(1.18)}}
html.rd-js .rd-item{opacity:0;transform:translateY(22px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
html.rd-js .rd-item.is-in{opacity:1;transform:none}
.rd-item.rd-reset,.rd-item.rd-reset *{transition:none!important;animation:none!important}

/* hover: 3D tilt toward the pointer and a soft yellow light (fine pointers only) */
@media (hover:hover) and (pointer:fine){
  .rd-card:hover{--ty:-4px;box-shadow:0 26px 60px rgba(29,21,56,.16);border-color:rgba(75,45,143,.35)}
  .rd-card::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(245,201,0,.22),transparent 55%);opacity:0;transition:opacity .35s;pointer-events:none;z-index:2}
  .rd-card:hover::after{opacity:1}
}

/* closing */
.rd-close{margin-top:clamp(32px,5vw,56px);padding:clamp(28px,4vw,44px);background:var(--paper);border-radius:var(--r);display:grid;justify-items:center;text-align:center;gap:18px}
.rd-close-px{display:flex;gap:6px}
.rd-close-px i{width:10px;height:10px;border-radius:2px;background:var(--purple)}
.rd-close-px i:nth-child(2){background:var(--yellow)}
.rd-close-px i:nth-child(3){opacity:.35}
.rd-note{font-size:.92rem;max-width:44em}

@media (max-width:980px){.rd-hero-grid{grid-template-columns:1fr}.rd-stage{min-height:230px;--u:40px;--s:32px}}
@media (max-width:760px){.rd-grid{grid-template-columns:1fr}.rd-item--wide .rd-card{grid-template-columns:1fr}.rd-item--wide .rd-art{min-height:0;aspect-ratio:16/10}.rd-body{padding:20px 20px 24px}.rd-stage{min-height:200px}}

/* no motion: reduced-motion users, ?nomotion, or no IntersectionObserver. Everything sits in its final state */
html.rd-static .rd-vox,html.rd-static .rd-float{animation:none}
html.rd-static .rd-card,html.rd-static .rd-vox-wrap{transition:none}
@media (prefers-reduced-motion:reduce){.rd-vox,.rd-float{animation:none}.rd-card,.rd-vox-wrap{transition:none}}
.rd-close{grid-template-columns:minmax(0,1fr)}.rd-close .btn,.rd-note{max-width:100%;white-space:normal;text-align:center;justify-content:center}