/* Hallmark · v2.0.0 · direction F "Pop-up card" (chosen by the founder from round 2) · genre playful · theme: custom (BeFriends plum #3E065F on cream, Young Serif + Figtree) · signature: the Kozy hug as a 3D greeting card that opens · shape: hero stage, composer, proof strip, what's inside, two free tools, plans, help band, footer mast
   critique: one bold object (the card) and quiet type around it; every number on the site came from the founders (25,000+ joined, 4.5 from 62 Google Play reviews, the IT agency pilot); helplines are on every tool page
   waive F7: every text field shares one recipe on purpose, so forms read as one system
   answered 25: the footer line is a one-sentence lede, 34ch is inside the 28ch floor for ledes
   waive 58: blog articles, the blog index and the pilot and application forms are reading and form pages; the 80-words-a-screen rule holds on home and the tools
   answered 76/34/44d on 404.html: it uses root paths (/assets/) so it works at any depth on the host; opened as a file the lint cannot load them
   answered 62: the card renders open without scripting; JS closes it first and plays the open */

:root{
  --plum:#3E065F; --plum-2:#5A1F85; --plum-3:#7B3FA8;
  --lilac:#E9DDF5; --lilac-2:#F4EEFA; --pink:#F06C9B; --pink-deep:#A8325F;
  --ground:#FFF8F1; --ground-2:#F6ECF8; --surface:#FFFDF9;
  --ink:#2A0E3E; --sub:#5F4F6E; --on-plum:#FFF7FD; --on-plum-sub:#DCCAEB;
  --line:rgba(62,6,95,.16); --foot-rule:rgba(255,247,253,.18); --field-edge:#857596; --star:#F2A900; --fold:rgba(62,6,95,.18); --shadow:rgba(62,6,95,.35);
  --focus:#3E065F; --focus-on-plum:#F7B9D3;
  --c-red:#D7263D; --c-yellow:#F5C518; --c-green:#2E9E5B; --c-blue:#2463B8; --c-black:#1E1A22; --c-white:#F7F4EF; --c-grey:#8A8790; --c-brown:#7A4E2D;
  --ok:#1E6B45; --err:#A3243A;
  --display:'Young Serif',Georgia,serif;
  --body:'Figtree','Segoe UI',system-ui,sans-serif;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --r1:8px; --r2:14px; --r3:20px; --r4:28px; --pill:999px;
  --max:1180px; --col-gap:clamp(24px,4vw,56px); --gutter:clamp(16px,4vw,48px);
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--ground); color:var(--ink); font:400 17px/1.6 var(--body)}
img{max-width:100%; height:auto; display:block}
a{color:var(--plum); text-underline-offset:3px}
h1,h2,h3{font-family:var(--display); font-weight:400; color:var(--plum); margin:0; overflow-wrap:break-word; min-width:0; text-wrap:balance}
h1{font-size:clamp(40px,6.4vw,72px); line-height:1.02; letter-spacing:-1px}
h2{font-size:clamp(30px,4vw,46px); line-height:1.08; letter-spacing:-.5px}
h3{font-size:clamp(21px,2.2vw,25px); line-height:1.2}
p{margin:0}
.wrap{max-width:var(--max); margin:0 auto; padding-inline:var(--gutter)}
.lead{font-size:clamp(18px,2vw,21px); color:var(--sub); max-width:36ch}
.sub{color:var(--sub)}
.small{font-size:15px}
.visually-hidden{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--focus); outline-offset:3px; transition:none}
.on-plum a:focus-visible,.on-plum button:focus-visible{outline-color:var(--focus-on-plum)}

.skip{position:absolute; left:var(--s4); top:-60px; background:var(--plum); color:var(--on-plum); padding:var(--s2) var(--s4); border-radius:var(--r1); z-index:10}
.skip:focus{top:var(--s4)}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:var(--s2); min-height:48px; padding:12px 24px; border:none; border-radius:var(--r2); font:600 16px/1.2 var(--body); white-space:nowrap; text-decoration:none; cursor:pointer; transition:transform .15s var(--ease), background-color .15s var(--ease), box-shadow .15s var(--ease)}
.btn svg{width:20px; height:20px; flex:none}
.btn.pri{background:var(--plum); color:var(--on-plum); box-shadow:0 10px 20px -10px var(--shadow)}
.btn.pri:hover{background:var(--plum-2)}
.btn.sec{background:transparent; color:var(--plum); box-shadow:inset 0 0 0 1.5px var(--plum)}
.btn.sec:hover{background:var(--lilac-2)}
.btn.light{background:var(--on-plum); color:var(--plum)}
.btn.light:hover{background:var(--lilac)}
.btn:active{transform:translateY(2px) scale(.98)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55; cursor:not-allowed; transform:none}
.acts{display:flex; gap:var(--s3); flex-wrap:wrap; align-items:center}
.stores{display:flex; gap:var(--s4); flex-wrap:wrap; margin-top:var(--s4); font-size:15px}

/* ---------- header ---------- */
.top{position:relative; z-index:5}
.nav{display:flex; align-items:center; gap:var(--s5); padding-block:var(--s4)}
.nav .mark img{height:44px; width:auto}
.nav .links{display:flex; gap:var(--s5); margin-left:auto; align-items:center}
.nav .links a{color:var(--ink); text-decoration:none; font-size:16px; padding-block:var(--s2)}
.nav .links a:hover,.nav .links a[aria-current="page"]{color:var(--plum); text-decoration:underline}
.nav .cta{min-height:44px; padding:12px 16px}
.menu{display:none; margin-left:auto; width:48px; height:48px; border:none; background:transparent; border-radius:var(--r1); cursor:pointer; padding:12px}
.menu i{display:block; height:2px; background:var(--plum); border-radius:2px; margin:4px 0; transition:transform .2s var(--ease), opacity .2s var(--ease)}
.menu[aria-expanded="true"] i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu[aria-expanded="true"] i:nth-child(2){opacity:0}
.menu[aria-expanded="true"] i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:860px){
  .nav{flex-wrap:wrap; gap:var(--s3)}
  .nav .mark img{height:38px}
  .menu{display:block}
  .nav .cta{display:none}
  .nav .links{display:none; order:3; flex-basis:100%; flex-direction:column; align-items:stretch; gap:0; margin:0; padding-bottom:var(--s3)}
  .nav .links a{padding:var(--s3) var(--s1); border-top:1px solid var(--line); font-size:18px}
  .nav.open .links{display:flex}
}

/* ---------- hero with the card ---------- */
.hero{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--col-gap); align-items:center; padding-block:clamp(16px,4vw,48px) clamp(32px,5vw,64px)}
.hero .lead{margin:var(--s4) 0 var(--s5)}
.art{perspective:1600px; display:grid; place-items:center; min-height:clamp(300px,36vw,460px)}
.card3d{position:relative; width:min(46%,270px); aspect-ratio:4/5; margin-left:46%; transform-style:preserve-3d; transform:rotateX(10deg) rotateY(-10deg); transition:transform .8s var(--ease)}
.art:hover .card3d{transform:rotateX(4deg) rotateY(-4deg)}
.inside{position:absolute; inset:0; background:var(--surface); border-radius:0 var(--r2) var(--r2) 0; box-shadow:0 40px 60px -30px var(--shadow), inset 14px 0 16px -14px var(--fold); display:grid; grid-template-rows:minmax(0,1fr) auto; padding:var(--s3); text-align:center}
.inside picture,.inside img{min-height:0; width:100%; height:100%; object-fit:contain}
.inside .note{font:400 clamp(17px,2vw,23px)/1.15 var(--display); color:var(--plum)}
.inside .from{color:var(--sub); font-size:13px; margin-top:var(--s1)}
.cover{position:absolute; inset:0; transform-origin:left center; transform:rotateY(-176deg); transition:transform 1.1s cubic-bezier(.6,.05,.25,1); transform-style:preserve-3d}
.cover .front,.cover .back{position:absolute; inset:0; border-radius:0 var(--r2) var(--r2) 0; backface-visibility:hidden; -webkit-backface-visibility:hidden; display:grid; place-items:center}
.cover .front{background:var(--plum); box-shadow:0 30px 40px -30px var(--shadow)}
.cover .front img{position:absolute; top:13%; left:50%; height:54%; width:auto; transform:translateX(-50%)}
.cover .front span{position:absolute; bottom:8%; inset-inline:0; text-align:center; color:var(--on-plum); font:400 17px var(--display)}
.cover .back{transform:rotateY(180deg); background:var(--lilac-2); border-radius:var(--r2) 0 0 var(--r2); box-shadow:inset -14px 0 16px -14px var(--fold); padding:var(--s4); text-align:center; color:var(--plum); font:400 clamp(15px,1.7vw,19px)/1.3 var(--display)}
.card3d.closed .cover{transform:rotateY(0deg)}
.card3d.closed .front{cursor:pointer}
@media (max-width:760px){
  .hero{grid-template-columns:minmax(0,1fr); padding-top:0}
  .hero .art{order:-1; min-height:260px}
  .card3d{width:min(44%,220px); margin-left:48%}
}

/* ---------- composer ---------- */
.composer{background:var(--surface); border-radius:var(--r3); box-shadow:inset 0 0 0 1px var(--line); padding:clamp(20px,3vw,32px); display:grid; gap:var(--s4)}
.composer h2{font-size:clamp(26px,3vw,34px)}
.chips{display:flex; gap:var(--s2); flex-wrap:wrap}
.chip{min-height:44px; padding:12px 16px; border:none; border-radius:var(--pill); background:var(--ground); color:var(--plum); font:600 15px/1.2 var(--body); box-shadow:inset 0 0 0 1px var(--fold); cursor:pointer; transition:background-color .15s var(--ease), color .15s var(--ease)}
.chip:hover{background:var(--lilac-2)}
.chip[aria-pressed="true"]{background:var(--plum); color:var(--on-plum); box-shadow:none}
.crow{display:flex; gap:var(--s4); align-items:end; flex-wrap:wrap}
.crow .field{flex:1 1 220px}
.check{display:flex; align-items:center; gap:var(--s2); min-height:48px; cursor:pointer; font-size:16px}
.check input{width:22px; height:22px; accent-color:var(--plum); margin:0}
.share{display:grid; gap:var(--s3)}
.share[hidden]{display:none}
.linkbox{display:flex; gap:var(--s2); align-items:center; flex-wrap:wrap; background:var(--lilac-2); border-radius:var(--r1); padding:var(--s2) var(--s3); font-size:15px}
.linkbox code{font:500 15px var(--body); overflow-wrap:anywhere; flex:1 1 200px}
.status{min-height:24px; font-size:15px; color:var(--ok)}

/* ---------- fields ---------- */
.field{display:grid; gap:var(--s2)}
.field label,.field legend{font-weight:600; font-size:15px}
.field .hint{font-size:14px; color:var(--sub)}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=url],select,textarea{width:100%; min-height:48px; padding:12px 16px; border:1.5px solid var(--field-edge); border-radius:var(--r1); background:var(--surface); color:var(--ink); font:400 16px/1.4 var(--body); transition:border-color .15s var(--ease)}
textarea{min-height:120px; resize:vertical}
input:hover,select:hover,textarea:hover{border-color:var(--plum)}
input:disabled,select:disabled,textarea:disabled{background:var(--ground-2); color:var(--sub); cursor:not-allowed}
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--err)}
.err{color:var(--err); font-size:14px; min-height:0}
.hp{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.form{display:grid; gap:var(--s4)}
.form .two{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s4)}
@media (max-width:640px){ .form .two{grid-template-columns:minmax(0,1fr)} }
.form-ok{background:var(--lilac-2); border-radius:var(--r2); padding:var(--s5); display:grid; gap:var(--s2)}
.form-ok[hidden]{display:none}

/* ---------- sections ---------- */
.section{padding-block:clamp(48px,8vw,96px)}
.section.tight{padding-block:clamp(32px,5vw,56px)}
.section > .wrap > h2{max-width:20ch}
.section .intro{margin-top:var(--s3); max-width:56ch}
.band{background:var(--ground-2)}
.on-plum{background:var(--plum); color:var(--on-plum)}
.on-plum h2,.on-plum h3{color:var(--on-plum)}
.on-plum .sub,.on-plum .lead,.on-plum .facts p{color:var(--on-plum-sub)}
.on-plum .facts b{color:var(--on-plum)}
.on-plum a{color:var(--on-plum)}

.proof{display:flex; align-items:center; justify-content:space-between; gap:var(--s5); flex-wrap:wrap; padding-block:var(--s6); border-top:1px solid var(--line)}
.facts{display:flex; gap:var(--s6); flex-wrap:wrap}
.facts p{font-size:15px; color:var(--sub)}
.facts b{display:block; font:400 30px/1.1 var(--display); color:var(--plum)}
.logos{display:flex; gap:var(--s5); align-items:center; flex-wrap:wrap}
.logos img{height:34px; width:auto}

.split{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--col-gap); align-items:center}
.split.flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
@media (max-width:820px){ .split,.split.flip{grid-template-columns:minmax(0,1fr)} }
.kozy-frame{background:var(--ground-2); border-radius:var(--r4); aspect-ratio:1; display:grid; place-items:center; padding:var(--s5)}
.kozy-frame img{width:88%}

.rows{display:grid; gap:0; margin-top:var(--s6); border-top:1px solid var(--line)}
.row{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:var(--s5); padding-block:var(--s5); border-bottom:1px solid var(--line)}
.row p{color:var(--sub)}
@media (max-width:640px){ .row{grid-template-columns:minmax(0,1fr); gap:var(--s2)} }

.tools{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s5); margin-top:var(--s6)}
@media (max-width:760px){ .tools{grid-template-columns:minmax(0,1fr)} }
.tool{position:relative; display:grid; grid-template-columns:minmax(0,1fr) 128px; gap:var(--s4); align-items:end; background:var(--surface); border-radius:var(--r3); padding:var(--s5); box-shadow:inset 0 0 0 1px var(--line); text-decoration:none; color:var(--ink); transition:transform .2s var(--ease), box-shadow .2s var(--ease)}
.tool:hover{transform:translateY(-3px); box-shadow:inset 0 0 0 1.5px var(--plum), 0 20px 30px -24px var(--shadow)}
.tool h3{margin-bottom:var(--s2)}
.tool p{color:var(--sub); font-size:16px}
.tool .go{display:inline-block; margin-top:var(--s4); font-weight:600; color:var(--plum)}
.tool img{width:128px}

.plans{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s4); margin-top:var(--s6)}
@media (max-width:980px){ .plans{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .plans{grid-template-columns:minmax(0,1fr)} }
.plan{background:var(--surface); border-radius:var(--r3); padding:var(--s5); box-shadow:inset 0 0 0 1px var(--line); display:grid; gap:var(--s2); align-content:start}
.plan .price{font:400 34px/1 var(--display); color:var(--plum)}
.plan .price small{font:500 15px var(--body); color:var(--sub)}
.plan ul{margin:var(--s2) 0 0; padding-left:20px; color:var(--sub); font-size:16px}
.plan.feature{background:var(--plum); color:var(--on-plum); box-shadow:none}
.plan.feature .price,.plan.feature h3{color:var(--on-plum)}
.plan.feature ul,.plan.feature .price small{color:var(--on-plum-sub)}

.help{border-radius:var(--r3); padding:var(--s5); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s4); align-items:center; background:var(--lilac-2); box-shadow:inset 0 0 0 1px var(--line)}
.help p{color:var(--ink)}
.help strong{color:var(--plum)}
@media (max-width:640px){ .help{grid-template-columns:minmax(0,1fr)} }

.end{text-align:center; display:grid; justify-items:center; gap:var(--s4)}
.end img.kozy{width:180px}
.end .acts{justify-content:center}

/* ---------- footer ---------- */
.foot{background:var(--plum); color:var(--on-plum-sub); padding-block:var(--s5) var(--s4); font-size:14px}
.nav .links a,.foot a{white-space:nowrap}
.foot a{color:var(--on-plum-sub); text-decoration:none; display:inline-block; padding-block:var(--s2)}
.foot a:hover{color:var(--on-plum); text-decoration:underline}
.foot .legal{margin-top:var(--s3); padding-top:var(--s3); border-top:1px solid var(--foot-rule); display:flex; justify-content:space-between; gap:var(--s4); flex-wrap:wrap; font-size:14px}

/* ---------- page heads (inner pages) ---------- */
.pagehead{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--col-gap); align-items:center; padding-block:clamp(24px,4vw,56px)}
.pagehead .lead{margin-top:var(--s4)}
.pagehead .acts{margin-top:var(--s5)}
.pagehead img.kozy{width:min(100%,340px); justify-self:center}
@media (max-width:760px){ .pagehead{grid-template-columns:minmax(0,1fr)} .pagehead img.kozy{width:200px; order:-1} }

/* ---------- stress meter ---------- */
.quiz{display:grid; gap:var(--s4); counter-reset:q}
.q{border:none; margin:0; padding:var(--s5); background:var(--surface); border-radius:var(--r3); box-shadow:inset 0 0 0 1px var(--line); counter-increment:q}
.q legend{float:left; width:100%; padding:0; margin-bottom:var(--s3); font:400 clamp(19px,2vw,22px)/1.3 var(--display); color:var(--plum)}
.q legend::before{content:counter(q) ". "; color:var(--plum-3)}
.opts{clear:both; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s2)}
@media (max-width:640px){ .opts{grid-template-columns:repeat(2,minmax(0,1fr))} }
.opt{position:relative}
.opt input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer}
.opt span{display:grid; place-items:center; min-height:48px; padding:var(--s2); border-radius:var(--r1); background:var(--ground); box-shadow:inset 0 0 0 1px var(--fold); font-weight:600; font-size:15px; text-align:center; transition:background-color .15s var(--ease), color .15s var(--ease)}
.opt input:hover + span{background:var(--lilac-2)}
.opt input:checked + span{background:var(--plum); color:var(--on-plum); box-shadow:none}
.opt input:focus-visible + span{outline:3px solid var(--focus); outline-offset:2px}
.progress{font-size:15px; color:var(--sub)}
.result{display:grid; gap:var(--s5)}
.result[hidden]{display:none}
.meter{position:relative; height:16px; border-radius:var(--pill); background:var(--lilac); overflow:hidden}
.meter i{position:absolute; inset:0; transform-origin:left; background:var(--plum); border-radius:var(--pill); transition:transform .9s var(--ease)}
.meter-scale{display:flex; justify-content:space-between; font-size:14px; color:var(--sub)}
.verdict{font:400 clamp(40px,6vw,64px)/1 var(--display); color:var(--plum)}

/* ---------- colour ---------- */
.swatches{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s3); max-width:560px}
.sw{aspect-ratio:1; border:none; border-radius:var(--r3); cursor:pointer; background:var(--c); box-shadow:inset 0 0 0 1px var(--line); display:grid; place-items:end center; padding:var(--s2); font:600 14px var(--body); color:var(--ink); transition:transform .15s var(--ease)}
.sw span{background:var(--surface); border-radius:var(--pill); padding:var(--s1) var(--s3)}
.sw:hover{transform:translateY(-3px)}
.sw[aria-pressed="true"]{outline:3px solid var(--plum); outline-offset:3px}
.ccard{--c:var(--plum); --t:var(--on-plum); position:relative; overflow:hidden; border-radius:var(--r4); padding:clamp(24px,4vw,40px); background:var(--c); color:var(--t); display:grid; gap:var(--s4); box-shadow:0 30px 50px -30px var(--shadow); max-width:560px}
.ccard h2{color:var(--t); font-size:clamp(34px,5vw,52px)}
.ccard .traits{display:flex; gap:var(--s2); flex-wrap:wrap; list-style:none; margin:0; padding:0}
.ccard .traits li{border-radius:var(--pill); padding:var(--s2) var(--s4); font-weight:600; box-shadow:inset 0 0 0 1.5px var(--t)}
.ccard .ring{position:absolute; right:-60px; top:-60px; width:220px; height:220px; border-radius:50%; box-shadow:0 0 0 24px color-mix(in srgb, var(--t) 14%, transparent), 0 0 0 56px color-mix(in srgb, var(--t) 8%, transparent)}
.ccard .by{font-size:14px; opacity:.85}
.ccard[hidden]{display:none}

/* ---------- articles ---------- */
.prose{max-width:68ch}
.prose h2{font-size:clamp(26px,3vw,34px); margin:var(--s7) 0 var(--s3)}
.prose h3{margin:var(--s5) 0 var(--s2)}
.prose p,.prose ul,.prose ol{margin:0 0 var(--s4)}
.prose li{margin-bottom:var(--s2)}
.prose blockquote{margin:var(--s5) 0; padding:var(--s5); border-radius:var(--r2); background:var(--lilac-2); font:400 21px/1.4 var(--display); color:var(--plum)}
.meta{color:var(--sub); font-size:15px; margin-top:var(--s4)}
.posts{display:grid; gap:0; margin-top:var(--s6); border-top:1px solid var(--line)}
.post{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s4); padding-block:var(--s5); border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink)}
.post h2{font-size:clamp(23px,2.6vw,30px)}
.post p{color:var(--sub); margin-top:var(--s2); max-width:60ch}
.post .min{color:var(--sub); font-size:15px; white-space:nowrap}
.post:hover h2{text-decoration:underline}
.faq details{border-bottom:1px solid var(--line); padding-block:var(--s4)}
.faq summary{cursor:pointer; font-weight:600; font-size:18px; min-height:32px}
.faq details p{margin-top:var(--s2); color:var(--sub)}

/* ---------- Kozy loops: still frame for reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:0s!important; animation-duration:0s!important}
  .card3d,.art:hover .card3d{transform:none}
}

/* ---------- v2: store badges, rating, stat band ---------- */
.badges{display:flex; gap:var(--s3); flex-wrap:wrap; align-items:center; margin-top:var(--s5)}
.badge{display:block; border-radius:var(--r1); transition:transform .15s var(--ease)}
.badge:hover{transform:translateY(-2px)}
.badge img{height:48px; width:auto}
.rating{display:flex; align-items:center; gap:var(--s2); margin-top:var(--s4); color:var(--sub); font-size:15px}
.rating b{color:var(--ink)}
.star{fill:var(--star); flex:none}
.stats{padding-block:clamp(32px,5vw,56px)}
.stat-row{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--col-gap)}
@media (max-width:760px){ .stat-row{grid-template-columns:minmax(0,1fr); gap:var(--s5)} }
.stat{display:grid; gap:var(--s1)}
.stat b{display:flex; align-items:center; gap:var(--s2); font:400 clamp(44px,6vw,72px)/1 var(--display); color:var(--on-plum)}
.stat b .star{width:36px; height:36px}
.stat span{color:var(--on-plum-sub); font-size:17px}
.stat a{color:var(--on-plum)}

/* ---------- v2: what do you need today ---------- */
.feats{list-style:none; margin:var(--s6) 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s5)}
@media (max-width:980px){ .feats{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .feats{grid-template-columns:minmax(0,1fr)} }
.feat{display:grid; grid-template-rows:auto 1fr; background:var(--surface); border-radius:var(--r3); overflow:hidden; box-shadow:inset 0 0 0 1px var(--line)}
.feat-art{aspect-ratio:16/9; background:var(--lilac-2); overflow:hidden}
.feat-art img{width:100%; height:100%; object-fit:cover}
.feat-kozy{height:100%; display:grid; place-items:center}
.feat-kozy img{width:auto; height:92%}
.feat-body{padding:var(--s5); display:grid; gap:var(--s2); align-content:start}
.feat .need{font:400 15px var(--display); color:var(--plum-3)}
.feat p{color:var(--sub); font-size:16px}
.tag{justify-self:start; font-size:14px; font-weight:600; color:var(--ok); background:color-mix(in srgb, var(--ok) 10%, transparent); border-radius:var(--pill); padding:var(--s1) var(--s3); margin-top:var(--s2)}
.tag.app{color:var(--plum); background:var(--lilac-2)}
.feat .go{font-weight:600; margin-top:var(--s2); min-height:44px; display:inline-flex; align-items:center}

/* ---------- v2: teaser ---------- */
.teaser{margin:0; display:grid; gap:var(--s2)}
.teaser video{width:100%; height:auto; aspect-ratio:16/9; border-radius:var(--r3); background:var(--lilac-2); box-shadow:0 30px 50px -30px var(--shadow)}

/* ---------- v2: press, backers, team ---------- */
.press{list-style:none; margin:var(--s6) 0 0; padding:0; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:var(--s3)}
@media (max-width:980px){ .press{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:480px){ .press{grid-template-columns:repeat(2,minmax(0,1fr))} }
.press a{display:grid; justify-items:center; gap:var(--s2); padding:var(--s4) var(--s2); background:var(--surface); border-radius:var(--r2); box-shadow:inset 0 0 0 1px var(--line); text-decoration:none; color:var(--sub); font-size:14px; text-align:center; transition:transform .15s var(--ease), box-shadow .15s var(--ease)}
.press a:hover{transform:translateY(-2px); box-shadow:inset 0 0 0 1.5px var(--plum)}
.press img{height:56px; width:auto; max-width:100%; object-fit:contain}

/* ---------- v2: join ---------- */
.join{list-style:none; margin:var(--s6) 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s4)}
.join.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:980px){ .join,.join.three{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .join,.join.three{grid-template-columns:minmax(0,1fr)} }
.join li{background:var(--surface); border-radius:var(--r3); padding:var(--s5); box-shadow:inset 0 0 0 1px var(--line); display:grid; gap:var(--s3); grid-template-rows:auto 1fr auto}
.join li.hi{box-shadow:inset 0 0 0 2px var(--plum)}
.join li p{color:var(--sub); font-size:16px}
.join .btn{justify-self:start; align-self:end; white-space:normal; text-align:left}

/* ---------- v2: socials, Kozy peeking ---------- */
.social{display:flex; gap:var(--s1)}
.social a{display:grid; place-items:center; width:44px; height:44px; border-radius:var(--pill); box-shadow:inset 0 0 0 1px var(--foot-rule); padding:0}
.social a:hover{background:var(--plum-2); color:var(--on-plum)}
#get{position:relative; overflow:clip}
.peek{position:absolute; right:0; bottom:0; display:flex; align-items:flex-end; text-decoration:none; transform:translateX(38%); transition:transform .35s var(--ease)}
.peek:hover,.peek:focus-visible{transform:translateX(4%)}
.peek-kozy{width:150px}
.peek .bubble{position:absolute; right:85%; bottom:120px; white-space:nowrap; background:var(--surface); color:var(--plum); font-weight:600; font-size:15px; border-radius:var(--r2) var(--r2) 0 var(--r2); padding:var(--s2) var(--s3); box-shadow:0 10px 20px -12px var(--shadow), inset 0 0 0 1px var(--line); opacity:0; transition:opacity .25s var(--ease)}
.peek:hover .bubble,.peek:focus-visible .bubble{opacity:1}
@media (hover:none){ .peek{transform:translateX(22%)} .peek .bubble{opacity:1} }
@media (max-width:620px){ .peek-kozy{width:110px} .peek .bubble{bottom:84px; font-size:14px} #get .end{padding-bottom:120px} }

/* ---------- v3: compact footer ---------- */
.foot-row{display:flex; align-items:center; gap:var(--s5); flex-wrap:wrap}
.foot-mark img{height:36px; width:auto}
.foot nav{flex:1 1 400px}
.foot nav ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:0 var(--s4)}

/* ---------- v3: why, video centred, values below ---------- */
.why{display:grid; justify-items:center; text-align:center; gap:var(--s6)}
.why h2{max-width:22ch}
.why .teaser{width:min(100%,880px)}
.values{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s5); text-align:left; width:100%}
@media (max-width:900px){ .values{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .values{grid-template-columns:minmax(0,1fr)} }
.values li{border-top:2px solid var(--plum); padding-top:var(--s3)}
.values p{color:var(--sub); font-size:16px; margin-top:var(--s1)}

/* ---------- v3: news cards and backers ---------- */
.news{list-style:none; margin:var(--s6) 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s5)}
@media (max-width:900px){ .news{grid-template-columns:minmax(0,1fr)} }
.news li{background:var(--surface); border-radius:var(--r3); padding:var(--s5); box-shadow:inset 0 0 0 1px var(--line); display:grid; gap:var(--s3); grid-template-rows:56px 1fr auto auto}
.news li > img,.news-logos img{height:56px; width:auto}
.news-logos{display:flex; gap:var(--s3)}
.news blockquote{margin:0; font:400 clamp(20px,2vw,23px)/1.3 var(--display); color:var(--plum)}
.news .go{font-weight:600; min-height:44px; display:inline-flex; align-items:center}
.backers-h{margin-top:var(--s7); font-size:22px}
.backers{list-style:none; margin:var(--s4) 0 0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--s3)}
@media (max-width:900px){ .backers{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:520px){ .backers{grid-template-columns:repeat(2,minmax(0,1fr))} }
.backers li{background:var(--surface); border-radius:var(--r2); box-shadow:inset 0 0 0 1px var(--line); padding:var(--s4) var(--s3); display:grid; justify-items:center; gap:var(--s2); text-align:center; font-size:14px; color:var(--sub)}
.backers .logo{height:48px; display:grid; place-items:center}
.backers img{max-height:48px; width:auto}
.team{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:var(--col-gap); align-items:center}
.team img{border-radius:var(--r3)}
@media (max-width:760px){ .team{grid-template-columns:minmax(0,1fr)} .team img{width:min(100%,320px)} }

/* ---------- v3: one screen at a time (scroll snap, large screens only) ---------- */
@media (min-width:1024px) and (min-height:820px) and (prefers-reduced-motion: no-preference){
  html{scroll-snap-type:y mandatory}
  .snap{scroll-snap-align:start; min-height:100svh; display:flex; flex-direction:column; justify-content:center}
  .snap > .wrap{width:100%}
  .section.snap{padding-block:var(--s7)}
  .screen-hero{min-height:calc(100svh - 76px)}
  .screen-hero .hero{flex:1}
  .foot{scroll-snap-align:end}
  .screen-hero{scroll-margin-top:76px}
  .feats{grid-template-columns:repeat(6,minmax(0,1fr)); gap:var(--s3)}
  .feat-art{aspect-ratio:1}
  .feat-body{padding:var(--s3) var(--s3) var(--s4); gap:var(--s1)}
  .feat-body p{font-size:14px; line-height:1.45}
  .feat .need{font-size:14px}
  .feat h3{font-size:19px}
  .feat-body{display:flex; flex-direction:column}
  .feats .feat-foot{margin-top:auto; padding-top:var(--s2); flex-direction:column; align-items:flex-start}
  .feat .go{font-size:15px; min-height:32px}
  #features h2{max-width:none}
}
.feat-foot{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s1) var(--s3); margin-top:var(--s2)}
.feat-foot .tag,.feat-foot .go{margin-top:0}
.dots{position:fixed; right:var(--s4); top:50%; transform:translateY(-50%); z-index:6; display:none; flex-direction:column; gap:var(--s2)}
@media (min-width:1024px) and (min-height:700px){ .dots{display:flex} }
.dots a{position:relative; display:grid; place-items:center; width:24px; height:24px; border-radius:var(--pill)}
.dots a::before{content:""; width:10px; height:10px; border-radius:var(--pill); box-shadow:inset 0 0 0 2px var(--plum); transition:transform .2s var(--ease), background-color .2s var(--ease)}
.dots a[aria-current="true"]::before{background:var(--plum); transform:scale(1.2)}
.dots a span{position:absolute; right:32px; white-space:nowrap; background:var(--plum); color:var(--on-plum); font-size:13px; border-radius:var(--r1); padding:var(--s1) var(--s2); opacity:0; pointer-events:none; transition:opacity .15s var(--ease)}
.dots a:hover span,.dots a:focus-visible span{opacity:1}
@media (max-width:620px){
  .foot{padding-block:var(--s4) var(--s3)}
  .foot-row{gap:var(--s3)}
  .foot nav ul{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 var(--s3)}
  .foot a{padding-block:var(--s1)}
  .foot .legal{flex-direction:column; gap:var(--s1); font-size:13px}
}