@view-transition{navigation:auto;}
:root{
  --paper:#fff8ec;
  --yellow:#ffe14d;
  --pink:#ff4fa3;
  --blue:#2f4fd8;
  --ink:#1f2f8f;
  --ink-soft:#3c4a9e;
  --display:"Syne","Arial Black",Arial,sans-serif;
  --text:"Rethink Sans","Helvetica Neue",Arial,sans-serif;
  --gutter:clamp(16px,5vw,64px);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--text);font-size:1.0625rem;line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased;}
body::after{
  content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.22;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .15 0 0 0 0 .2 0 0 0 0 .5 0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
}
::selection{background:var(--pink);color:var(--paper);}
a{color:inherit;}
:focus-visible{outline:3px solid var(--pink);outline-offset:3px;}
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--gutter);}

.top{position:absolute;top:0;left:0;right:0;z-index:10;}
.top .wrap{display:flex;align-items:center;height:80px;}
.brand{font-family:var(--display);font-weight:800;font-size:1.25rem;letter-spacing:-.02em;text-decoration:none;color:var(--ink);text-shadow:2px 2px 0 var(--pink);}

.riso{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.riso .blob{position:absolute;will-change:transform;}
.riso .b1{width:62vmax;height:62vmax;right:-18vmax;top:-22vmax;color:var(--pink);animation:drift1 22s ease-in-out infinite alternate;}
.riso .b2{width:44vmax;height:44vmax;right:2vmax;bottom:-26vmax;color:var(--blue);animation:drift2 26s ease-in-out infinite alternate;}
.riso .b3{width:26vmax;height:26vmax;left:-14vmax;top:58%;color:var(--pink);animation:drift1 30s ease-in-out infinite alternate-reverse;}
.riso svg{display:block;width:100%;height:100%;}
@keyframes drift1{to{transform:translate(-4vmax,3vmax) rotate(24deg) scale(1.06);}}
@keyframes drift2{to{transform:translate(5vmax,-3vmax) rotate(-30deg) scale(.95);}}
.halftone{position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;opacity:.35;background-image:radial-gradient(var(--blue) 1.1px,transparent 1.5px);background-size:9px 9px;-webkit-mask-image:linear-gradient(115deg,transparent 30%,#000 75%);mask-image:linear-gradient(115deg,transparent 30%,#000 75%);}
.gusts{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.gusts path{fill:none;stroke:var(--paper);stroke-width:6;stroke-linecap:round;stroke-dasharray:240 1400;animation:gust 7s linear infinite;}
.gusts path:nth-child(2){animation-delay:-2.3s;animation-duration:9s;stroke-width:3;}
.gusts path:nth-child(3){animation-delay:-4.6s;animation-duration:8s;}
.gusts path:nth-child(4){animation-delay:-1.2s;animation-duration:11s;stroke-width:2;}
@keyframes gust{from{stroke-dashoffset:1640;}to{stroke-dashoffset:0;}}

.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;background:var(--yellow);}
.hero .wrap{position:relative;z-index:2;width:100%;padding-top:120px;padding-bottom:80px;}
.page-head{position:relative;overflow:hidden;background:var(--yellow);}
.page-head .wrap{position:relative;z-index:2;padding-top:clamp(140px,18vw,210px);padding-bottom:clamp(60px,9vw,120px);}

.hero h1,.page-head h1{
  max-width:15.5em;
  margin:0;
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(2.1rem,1rem + 3.9vw,4.9rem);
  line-height:1;
  letter-spacing:-.035em;
  color:var(--ink);
  text-shadow:.045em .04em 0 var(--pink);
  text-wrap:balance;
  hyphens:auto;
  overflow-wrap:break-word;
  animation:misreg 1.6s cubic-bezier(.2,.7,.1,1) both;
}
.page-head h1{font-size:clamp(2rem,1rem + 3.6vw,4.6rem);}
@keyframes misreg{from{text-shadow:.6em .3em 0 rgba(255,79,163,0);opacity:0;transform:translateX(-.15em);}to{text-shadow:.045em .04em 0 var(--pink);opacity:1;transform:none;}}

.lede-band{position:relative;background:var(--paper);padding:clamp(56px,8vw,110px) 0 clamp(20px,3vw,36px);}
.lede{max-width:34em;margin:0;font-family:var(--display);font-weight:600;font-size:clamp(1.25rem,1rem + 1.2vw,2rem);line-height:1.32;letter-spacing:-.015em;text-wrap:pretty;hyphens:auto;}

.text-link{
  color:var(--ink);
  font-weight:800;
  text-decoration:none;
  background:linear-gradient(var(--pink),var(--pink)) no-repeat 0 88%/100% .38em;
  padding:0 .08em;
  transition:background-size .3s cubic-bezier(.2,.7,.1,1),color .3s ease;
}
.text-link:hover,.text-link:focus-visible{background-size:100% 100%;color:var(--paper);}

.article{padding:clamp(24px,4vw,48px) 0 clamp(56px,9vw,120px);}
.article section{display:grid;grid-template-columns:minmax(0,4.6fr) minmax(0,7.4fr);gap:clamp(16px,4vw,72px);padding:clamp(40px,6vw,80px) 0;}
.article h2{
  margin:0;
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.5rem,1rem + 1.5vw,2.45rem);
  line-height:1.05;
  letter-spacing:-.025em;
  text-wrap:balance;
  hyphens:auto;
  overflow-wrap:break-word;
}
.article section > div{min-width:0;}
.article p{max-width:60ch;margin:0 0 1em;color:var(--ink-soft);font-size:clamp(1.06rem,1rem + .3vw,1.2rem);text-wrap:pretty;hyphens:auto;overflow-wrap:break-word;}
.article p:last-child{margin-bottom:0;}
.article section:nth-child(3n+2) h2{text-shadow:3px 3px 0 var(--yellow);}
.article section:nth-child(3n) h2{text-shadow:3px 3px 0 var(--pink);}

.slots{list-style:none;margin:0;padding:0;display:grid;gap:14px;}
.slots li{
  position:relative;
  padding:22px 24px 22px 24px;
  background:var(--yellow);
  color:var(--ink);
  font-size:clamp(1.02rem,.98rem + .2vw,1.1rem);
  box-shadow:6px 6px 0 var(--pink);
  transition:transform .25s cubic-bezier(.2,.7,.1,1),box-shadow .25s ease;
}
.slots li:nth-child(2){background:#ffd3e8;box-shadow:6px 6px 0 var(--blue);}
.slots li:nth-child(3){background:#d9e0ff;box-shadow:6px 6px 0 var(--yellow);}
.slots li:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--pink);}
.slots strong{font-family:var(--display);font-weight:800;font-size:1.22rem;letter-spacing:-.02em;}

.compare{width:100%;margin:0 0 1.6em;border-collapse:separate;border-spacing:0 10px;font-size:1rem;line-height:1.5;}
.compare th{padding:0 16px 4px;text-align:left;font-family:var(--display);font-weight:800;font-size:1.02rem;letter-spacing:-.01em;}
.compare th:last-child{color:var(--pink);}
.compare td{width:50%;padding:14px 16px;vertical-align:top;}
.compare td:first-child{background:var(--yellow);font-weight:700;}
.compare td:last-child{background:#ffd3e8;color:var(--ink);}

.steps{list-style:none;counter-reset:step;margin:0 0 1.6em;padding:0;display:grid;gap:12px;}
.steps li{
  counter-increment:step;
  position:relative;
  padding:18px 20px 18px 74px;
  background:#d9e0ff;
  color:var(--ink);
  font-size:clamp(1.02rem,.98rem + .25vw,1.12rem);
}
.steps li:nth-child(even){background:var(--yellow);}
.steps li::before{
  content:counter(step);
  position:absolute;left:18px;top:12px;
  font-family:var(--display);font-weight:800;font-size:2.4rem;line-height:1;
  color:var(--pink);
  text-shadow:2px 2px 0 var(--ink);
}

.closing{position:relative;overflow:hidden;background:var(--blue);color:var(--paper);}
.closing .halftone{background-image:radial-gradient(var(--pink) 1.3px,transparent 1.7px);opacity:.5;mix-blend-mode:screen;-webkit-mask-image:linear-gradient(90deg,transparent 40%,#000 100%);mask-image:linear-gradient(90deg,transparent 40%,#000 100%);}
.closing .wrap{position:relative;z-index:2;padding-top:clamp(64px,9vw,120px);padding-bottom:clamp(64px,9vw,120px);}
.closing section{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(16px,4vw,72px);}
.closing h2{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,1rem + 2.6vw,3.5rem);line-height:1;letter-spacing:-.03em;color:var(--yellow);text-shadow:.05em .05em 0 var(--pink);}
.closing p{max-width:60ch;margin:0 0 1em;color:#e8ebff;font-size:clamp(1.04rem,.98rem + .25vw,1.16rem);text-wrap:pretty;hyphens:auto;}
.closing p:last-child{margin-bottom:0;}

footer{background:var(--pink);color:var(--ink);}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px 40px;padding-top:26px;padding-bottom:26px;font-size:.95rem;}
footer nav{display:flex;flex-wrap:wrap;gap:8px 26px;font-family:var(--display);font-weight:700;}
footer a{color:var(--ink);text-decoration:none;}
footer nav a{background:linear-gradient(var(--yellow),var(--yellow)) no-repeat 0 100%/0 .35em;transition:background-size .3s ease;}
footer nav a:hover,footer nav a:focus-visible,footer nav a[aria-current="page"]{background-size:100% .35em;}
footer p{margin:0;}
footer p a{font-weight:700;}

.compare.three td{width:auto;}
.compare.three td:first-child{background:var(--ink);color:var(--yellow);font-family:var(--display);font-weight:700;letter-spacing:-.01em;}
.compare.three td:nth-child(2){background:var(--yellow);font-weight:400;}
.compare.three th:nth-child(2){color:var(--ink-soft);}

.fact{
  position:relative;
  margin:1.6em 0;
  padding:26px 26px 26px 30px;
  background:var(--pink);
  color:var(--paper);
  box-shadow:8px 8px 0 var(--blue);
}
.fact b{display:inline-block;margin-bottom:8px;padding:2px 10px;background:var(--yellow);color:var(--ink);font-family:var(--display);font-weight:800;font-size:.95rem;letter-spacing:-.01em;transform:rotate(-2deg);}
.article .fact p{margin:0;color:var(--paper);font-size:clamp(1.08rem,1rem + .4vw,1.26rem);line-height:1.55;font-weight:500;}

.dots{list-style:none;margin:0 0 1.2em;padding:0;display:grid;gap:10px;}
.dots li{position:relative;padding:12px 16px 12px 46px;background:#d9e0ff;color:var(--ink);font-size:clamp(1.02rem,.98rem + .25vw,1.12rem);}
.dots li:nth-child(even){background:#ffd3e8;}
.dots li::before{content:"";position:absolute;left:16px;top:1.05em;width:14px;height:14px;border-radius:50%;background:var(--pink);box-shadow:3px 3px 0 var(--ink);}
.dots li:nth-child(even)::before{background:var(--yellow);}

@media (max-width:820px){
  .article section,.closing section{grid-template-columns:1fr;gap:16px;}
}
@media (max-width:640px){
  .compare thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  .compare,.compare tbody,.compare tr,.compare td{display:block;width:100%;}
  .compare{border-spacing:0;}
  .compare tbody tr{margin-bottom:12px;}
  .compare td::before{content:attr(data-label);display:block;margin-bottom:2px;font-family:var(--display);font-size:.78rem;font-weight:800;color:var(--pink);}
  .compare td:first-child::before{color:var(--ink-soft);}
  .compare.three td:first-child::before{display:none;}
  .compare.three td:nth-child(2)::before{color:var(--ink-soft);}
  .steps li{padding-left:62px;}
  .steps li::before{left:14px;font-size:2rem;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation:none !important;transition:none !important;}
}