/* ============================================================
   Airo Popups
   Warm light canvas, rounded friendly type, blob characters
   ============================================================ */
:root{
  --bg:#FCFBFA;
  --card:#F5F1ED;
  --card-2:#EFEAE4;
  --surface:#FFFFFF;

  --ink:#281D1A;
  --ink-2:#352521;
  --muted:#746A66;
  --faint:#9A908B;
  --line:#E9E5E2;

  --primary:#A97BF5;
  --primary-h:#8D5BE5;
  --primary-soft:#F3ECFF;
  --primary-deep:#6E42BE;
  --highlight:#FFE39A;
  --highlight-2:#F0C04E;
  --sand:#E7DCCB;

  --r-pill:999px;
  --r-sm:14px;
  --r-md:20px;
  --r-lg:28px;
  --r-xl:36px;

  --sh-1:0 1px 2px rgba(23,22,20,.04);
  --sh-2:0 2px 6px rgba(23,22,20,.05),0 14px 30px -20px rgba(23,22,20,.24);
  --sh-3:0 4px 12px rgba(23,22,20,.06),0 28px 56px -30px rgba(23,22,20,.34);
  --sh-blob:0 16px 30px -14px rgba(23,22,20,.22);

  --wrap:1200px;
  --ease:cubic-bezier(.22,.72,.24,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --font:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-d:"Chillax",var(--font);
  --font-s:var(--font);                  /* subheadings, same face */

  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
/* eased scrolling: the library owns the wheel, so the native one lets go */
html.lenis{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font);font-size:1rem;line-height:1.6;letter-spacing:-.004em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;
}
img,svg{max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
svg{stroke-width:2}
::selection{background:var(--primary-soft);color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;border-radius:0 0 10px 0;z-index:200}
.skip:focus{left:0}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--font-d);font-weight:500;margin:0;color:var(--ink);text-wrap:balance}
h1{font-size:clamp(2.5rem,5.2vw,4.35rem);line-height:1.08;letter-spacing:-.028em}
.h2{font-size:clamp(2rem,3.9vw,3.3rem);line-height:1.1;letter-spacing:-.026em}
.h3{font-size:clamp(1.5rem,2.4vw,2.05rem);line-height:1.15;letter-spacing:-.022em}
h3{font-size:1.42rem;letter-spacing:-.02em;line-height:1.2;font-weight:500}
p{margin:0}
.lede{font-family:var(--font-s);font-weight:400;font-size:clamp(1rem,1.18vw,1.14rem);line-height:1.6;letter-spacing:-.003em;color:var(--muted)}
.sub{color:var(--muted);font-size:.98rem;line-height:1.6}
.dim{color:var(--faint)}

/* ---------- layout ---------- */
.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}
section{position:relative}
.pad{padding:76px 0}
.pad-lg{padding:104px 0}
.center{text-align:center}
.center .lede{margin-inline:auto}

/* ---------- buttons ---------- */
.btn{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--font);font-size:.92rem;font-weight:500;letter-spacing:-.006em;
  padding:6px 20px 6px 6px;border-radius:var(--r-pill);border:0;text-decoration:none;cursor:pointer;
  min-height:46px;
  transition:background .24s var(--ease),color .24s var(--ease),transform .24s var(--ease);
}
.btn>i{
  width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;
  display:grid;place-items:center;flex:none;transition:transform .34s var(--ease-out)
}
.btn>i svg{width:12px;height:12px}
.btn--dark{background:var(--ink);color:#fff;padding:6px 22px 6px 46px;transition:padding .58s var(--ease),background .3s var(--ease)}
.btn--dark i{position:absolute;left:6px;top:50%;margin-top:-17px;background:#fff;color:var(--ink);
  transition:left .58s var(--ease),color .34s var(--ease)}
.btn--dark::before,.btn--violet::before{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;
  transform:translateX(-101%);transition:transform .58s var(--ease)
}
.btn--dark::before{background:var(--primary-h)}
.btn--violet::before{background:var(--ink)}
.btn--dark:hover::before,.btn--violet:hover::before{transform:none}
.btn--dark:hover{padding-left:22px;padding-right:46px}
.btn--dark:hover i{left:calc(100% - 40px);color:var(--primary-h)}
.plan .btn{justify-content:center}
.plan .btn--dark{width:100%}
.btn--plain{background:transparent;color:var(--ink);padding-left:6px}
.btn--plain:hover i{transform:translateX(3px)}
.btn--soft{background:var(--card);color:var(--ink);padding:12px 22px;transition:background .34s var(--ease),color .34s var(--ease),transform .34s var(--ease)}
.btn--soft::before{
  content:"";position:absolute;left:50%;top:50%;width:0;height:0;border-radius:50%;z-index:-1;
  background:var(--primary-soft);transform:translate(-50%,-50%);
  transition:width .52s var(--ease),height .52s var(--ease)
}
.btn--soft:hover::before{width:260%;height:600%}
.btn--soft:hover{color:var(--primary-deep)}

/* the label rolls, and a fresh one takes its place */
.roll{display:block;flex:none;overflow:hidden;height:1.45em;line-height:1.45em;white-space:nowrap;width:max-content}
.roll i{display:block;font-style:normal;white-space:nowrap;transition:transform .46s var(--ease)}
.btn:hover .roll i{transform:translateY(-100%)}
.btn--violet{background:var(--primary-h);color:#fff;padding-right:22px}
.btn--violet i{background:#fff;color:var(--primary-h)}
.btn--violet:hover{background:var(--primary-deep)}
.btn--sm{font-size:.88rem;padding:5px 17px 5px 5px;min-height:40px}
.btn--sm>i{width:28px;height:28px}
.btn--dark.btn--sm{padding:6px 19px 6px 39px}
.btn--dark.btn--sm i{width:28px;height:28px;left:6px;margin-top:-14px}
.btn--dark.btn--sm:hover{padding-left:19px;padding-right:39px}
.btn--dark.btn--sm:hover i{left:calc(100% - 34px)}
.btn--sm.btn--soft{padding:8px 17px}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:120;transition:background .3s var(--ease),box-shadow .3s var(--ease)}
.nav.is-stuck{background:rgba(247,247,244,.86);-webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px);box-shadow:0 1px 0 var(--line)}
.nav__inner{width:min(100% - 40px,var(--wrap));margin-inline:auto;display:flex;align-items:center;gap:22px;padding:16px 0}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;flex:none}
.brand img{height:41px;width:auto;display:block}
.nav__links{position:relative;display:flex;gap:2px;margin-inline:auto}
.nav__links a{
  position:relative;z-index:1;text-decoration:none;font-size:.95rem;color:var(--muted);
  padding:9px 14px;border-radius:var(--r-pill);
  transition:color .28s var(--ease)
}
.nav__links a:hover,.nav__links a:focus-visible,.nav__links a[aria-current="page"]{color:#000}
.nav__links a[aria-current="page"]{font-weight:500}
/* one pane of frosted glass that slides from link to link, the way the
   selected segment travels on a phone */
.nav__glass,.toggle__glass{
  position:absolute;z-index:0;left:0;top:50%;height:40px;width:0;margin-top:-20px;
  border-radius:var(--r-pill);opacity:0;pointer-events:none;
  /* barely any fill, so what you see is mostly the page bending behind it */
  background:linear-gradient(146deg,rgba(255,255,255,.76),rgba(255,255,255,.5) 52%,rgba(255,255,255,.7));
  -webkit-backdrop-filter:blur(12px) saturate(190%) brightness(1.04);
  backdrop-filter:blur(12px) saturate(190%) brightness(1.04);
  box-shadow:0 1px 2px rgba(0,0,0,.035),0 10px 22px -12px rgba(0,0,0,.24);
  transform:translateX(0);
  transition:
    transform .52s cubic-bezier(.3,1.26,.4,1),
    width .52s cubic-bezier(.3,1.26,.4,1),
    opacity .3s var(--ease)
}
/* one hairline rim, bright where the light lands and almost gone on the far
   side, which is what makes it read as an edge rather than an outline */
.nav__glass::after,.toggle__glass::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(146deg,
    rgba(255,255,255,1) 0%,rgba(255,255,255,.88) 24%,
    rgba(0,0,0,.045) 56%,rgba(0,0,0,.06) 78%,rgba(255,255,255,.96) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude
}
/* hovering somewhere else: thinner, more of the page showing through */
.nav__glass.is-hover,.toggle__glass.is-hover{
  background:linear-gradient(146deg,rgba(255,255,255,.4),rgba(255,255,255,.13) 52%,rgba(255,255,255,.3));
  box-shadow:0 1px 2px rgba(0,0,0,.025),0 7px 16px -12px rgba(0,0,0,.17)
}
.nav__glass.is-hover::after,.toggle__glass.is-hover::after{
  background:linear-gradient(146deg,
    rgba(255,255,255,.86) 0%,rgba(255,255,255,.54) 24%,
    rgba(0,0,0,.03) 56%,rgba(0,0,0,.04) 78%,rgba(255,255,255,.7) 100%)
}
.nav__links.is-live .nav__glass{opacity:1}
.nav__actions{display:flex;align-items:center;gap:9px;flex:none;margin-left:auto}
.burger{display:none;width:42px;height:42px;border:0;background:var(--card);border-radius:var(--r-pill);align-items:center;justify-content:center;flex-direction:column;gap:4px;cursor:pointer}
.burger span{display:block;width:15px;height:1.7px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease)}
.burger[aria-expanded="true"] span:first-child{transform:translateY(2.85px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-2.85px) rotate(-45deg)}
.drawer{position:fixed;inset:76px 18px auto;z-index:119;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-3);padding:14px}
.drawer[hidden]{display:none}
.drawer a{display:block;text-decoration:none;padding:12px 14px;border-radius:12px;color:var(--ink);transition:background .22s var(--ease),color .22s var(--ease)}
.drawer a:hover,.drawer a:focus-visible{background:var(--card);color:var(--primary-deep)}
/* the drawer's own padding was landing on the button and pushing the label
   under its chevron */
.drawer .btn{display:inline-flex;width:100%;justify-content:center;padding:6px 22px 6px 46px}
.drawer .btn--dark,.drawer .btn--dark:hover{color:#fff;background:var(--ink)}
.drawer .btn--dark:hover{padding-left:22px;padding-right:46px}
.drawer .btn{margin-top:8px;width:100%;justify-content:center}

/* ---------- blob characters ---------- */
.blob{position:absolute;pointer-events:none;overflow:visible;z-index:1}
.blob>svg{filter:drop-shadow(0 14px 26px rgba(40,29,26,.15))}
.blob svg{width:100%;height:100%;display:block}
.grain{position:absolute;inset:0;background-image:var(--grain);mix-blend-mode:overlay;opacity:.5;pointer-events:none;border-radius:inherit}
@keyframes float{0%,100%{transform:translateY(0) rotate(var(--rot,0deg))}50%{transform:translateY(-14px) rotate(var(--rot,0deg))}}

/* ---------- reveal ---------- */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease-out) var(--d,0ms),transform .9s var(--ease-out) var(--d,0ms)}
.js .reveal.in{opacity:1;transform:none}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding:128px 0 96px;overflow:hidden;text-align:center}
.hero__dots{
  position:absolute;inset:0 0 auto;height:720px;pointer-events:none;z-index:0;
  background-image:radial-gradient(rgba(40,29,26,.13) 1.1px,transparent 1.1px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(#000 0%,#000 46%,transparent 78%);
  mask-image:linear-gradient(#000 0%,#000 46%,transparent 78%);
}
.hero__inner{position:relative;z-index:2}
.rating{display:inline-flex;align-items:center;gap:10px;font-size:.92rem;color:var(--ink)}
.stars{display:inline-flex;gap:2px;color:var(--ink)}
.stars svg{width:13px;height:13px}
.hero h1{margin:20px auto 0;max-width:19ch}
.swap{display:inline-block;position:relative;transition:color .5s var(--ease)}
.swap>span{display:inline-block;transition:opacity .42s var(--ease),transform .48s var(--ease-out)}
.swap.out>span{opacity:0;transform:translateY(-30%)}
.swap.in>span{opacity:0;transform:translateY(30%)}
.swap[data-c="1"]{color:var(--primary-h)}
.swap[data-c="2"]{color:#A8791A}
.swap[data-c="3"]{color:var(--ink)}
.swap[data-c="0"]{color:var(--primary-deep)}
.hero .lede{margin:20px auto 0;max-width:50ch;font-size:clamp(.94rem,.95vw,1rem);line-height:1.6;color:var(--muted)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:34px}

.hero .blob--a{left:7%;top:126px;width:130px;height:130px;--rot:-5deg;animation:float 8.4s ease-in-out infinite}
.hero .blob--b{right:8%;top:146px;width:102px;height:102px;--rot:0deg;animation:float 9s ease-in-out .7s infinite}
.hero .blob--c{right:5.5%;top:392px;width:154px;height:auto;--rot:6deg;animation:float 9.6s ease-in-out 1.3s infinite}

/* a popup, a bar and a wheel: the three things Airo actually makes */
.fpop{display:block;position:relative;width:152px;background:var(--surface);border-radius:15px;padding:13px 14px 12px;text-align:left;
  box-shadow:0 6px 14px rgba(40,29,26,.05),0 22px 42px -22px rgba(40,29,26,.42)}
.fpop b{display:block;font-size:7.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--primary-h);margin-bottom:6px}
.fpop p{font-family:var(--font-d);font-size:13.5px;line-height:1.14;letter-spacing:-.022em;color:var(--ink);margin-bottom:10px}
.fpop i{display:block;background:var(--ink);color:#fff;border-radius:8px;font-size:8.5px;font-style:normal;text-align:center;padding:6px 4px;
  animation:fpress 4.6s ease-in-out infinite}
@keyframes fpress{
  0%,34%{transform:scale(1);background:var(--ink)}
  42%{transform:scale(.94);background:var(--primary-h)}
  50%{transform:scale(1);background:var(--primary-h)}
  70%{background:var(--primary-h)}
  80%,100%{background:var(--ink)}
}
.fcur{position:absolute;left:0;top:0;width:21px;height:21px;pointer-events:none;z-index:3;
  animation:fcursor 4.6s ease-in-out infinite}
.fcur svg{width:100%;height:100%;display:block;filter:drop-shadow(0 2px 4px rgba(40,29,26,.4))}
/* the tip of the arrow sits 4px in and 2px down, so the click lands dead centre */
@keyframes fcursor{
  0%{opacity:0;transform:translate(150px,132px) scale(1)}
  9%{opacity:1}
  34%{opacity:1;transform:translate(70px,81px) scale(1)}
  42%{transform:translate(70px,81px) scale(.78)}
  50%{transform:translate(70px,81px) scale(1)}
  70%{opacity:1;transform:translate(70px,81px) scale(1)}
  100%{opacity:0;transform:translate(150px,132px) scale(1)}
}
.fbar{display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:#fff;border-radius:var(--r-pill);
  padding:7px 7px 7px 15px;font-size:10px;white-space:nowrap;
  box-shadow:0 6px 14px rgba(40,29,26,.06),0 22px 42px -22px rgba(40,29,26,.5)}
.fbar u{text-decoration:none;color:#D5BDF9}
.fbar i{background:#fff;color:var(--ink);border-radius:var(--r-pill);padding:4px 10px;font-style:normal;font-size:9px;font-weight:600}
.fwheel{display:block;width:100%;height:100%;position:relative}
.fwheel img{
  display:block;width:100%;height:100%;object-fit:contain;transform-origin:center center;
  animation:wheelspin 4.2s cubic-bezier(.14,.86,.2,1) infinite
}
@keyframes wheelspin{0%{transform:rotate(0)}72%{transform:rotate(1128deg)}100%{transform:rotate(1128deg)}}
.fwheel i{position:absolute;z-index:2;left:50%;top:-5px;margin-left:-5px;width:10px;height:13px;background:var(--ink);clip-path:polygon(50% 100%,0 0,100% 0)}

/* ---------- format tabs ---------- */
.tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin-top:60px;position:relative;z-index:2}
.tabs button{
  display:inline-flex;align-items:center;gap:9px;border:0;background:transparent;cursor:pointer;
  padding:7px 20px;min-height:40px;height:40px;border-radius:100px;font-size:1rem;color:var(--muted);
  transition:background .34s var(--ease),color .34s var(--ease)
}
.tabs button svg{width:19px;height:19px;stroke-width:2.5;opacity:.8;transition:opacity .3s var(--ease)}
.tabs button:hover{color:var(--ink)}
.tabs button:hover svg{opacity:1}
/* the pill is the one the reference uses: neutral, fully round, no border */
.tabs button[aria-selected="true"]{background:#F0EEEB;color:var(--ink)}
.tabs button[aria-selected="true"] svg{opacity:1}

/* ---------- the product frame ---------- */
.frame{
  position:relative;margin-top:38px;border-radius:32px;
  padding:16px;overflow:hidden;
  background:linear-gradient(160deg,#EFE5FF,#D5BDF9 55%,#BE9BF3);
  transition:background .7s var(--ease)
}
.frame[data-tone="sky"]{background:linear-gradient(160deg,#EDF2FF,#C6D5F8 55%,#A2BAF0)}
.frame[data-tone="blush"]{background:linear-gradient(160deg,#FEEFF4,#F6CFDE 55%,#EDAEC7)}
.frame[data-tone="deep"]{background:linear-gradient(160deg,#EDE3FF,#C9AEF7 55%,#A97BF5)}
.frame[data-tone="mint"]{background:linear-gradient(160deg,#EAF7F1,#C3E3D4 55%,#9CD2BB)}
.frame[data-tone="peach"]{background:linear-gradient(160deg,#FFF3E8,#F8D6B8 55%,#EFB98C)}
.frame__inner{
  position:relative;z-index:1;border-radius:22px;background:var(--surface);
  box-shadow:0 1px 0 rgba(255,255,255,.55),0 14px 32px -24px rgba(23,22,20,.35);
  overflow:hidden;text-align:left
}

/* the storefront being edited.
   layer 1 the container, layer 2 the shot, layer 3 the cool wash; the popup sits above all three */
.shop{position:relative;z-index:0;width:100%;height:720px;overflow:hidden;display:block;background:#FBFAF8}
.shop__shot{
  position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block;
  object-fit:cover;object-position:center center;
  /* the blur pulls the edges inward, so the shot grows a hair to cover its own frame */
  filter:blur(2.5px);transform:scale(1.02);transform-origin:center center
}
.shop::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:rgba(241,238,255,.12)}
.shop__bar{display:flex;align-items:center;gap:16px;padding:15px 22px;border-bottom:1px solid var(--line);flex:none}
.shop__word{font-family:var(--font-d);font-size:16px;font-weight:600;letter-spacing:-.014em}
.shop__nav{display:flex;gap:18px;margin-inline:auto;font-size:11.5px;color:var(--muted)}
.shop__icons{display:flex;gap:12px;color:var(--faint)}
.shop__icons svg{width:14px;height:14px}
.shop__promo{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 22px;background:var(--card);font-size:11.5px;color:var(--muted);flex:none}
.shop__promo b{font-weight:600;color:var(--ink)}
.shop__ship{background:var(--surface);border-radius:var(--r-pill);padding:5px 12px;font-size:10.5px;white-space:nowrap}
.shop__grid{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:18px 22px 22px;min-height:0}
.pcard{display:flex;flex-direction:column;min-height:0}
.pcard__ph{flex:1;border-radius:13px;overflow:hidden;position:relative;min-height:0;display:block}
.pcard__ph svg{position:absolute;inset:0;width:100%;height:100%}
.pcard b{display:block;font-size:11px;font-weight:500;margin-top:10px;letter-spacing:-.012em;color:var(--ink)}
.pcard>span:last-child{display:block;font-size:11px;color:var(--muted);margin-top:2px}

.scrim{position:absolute;inset:0;background:rgba(20,16,12,.10);opacity:0;transition:opacity .5s var(--ease);pointer-events:none;z-index:1}
.scene.dim .scrim{opacity:1}
.stage{position:absolute;inset:0;pointer-events:none;z-index:2}
.slot{position:absolute;opacity:0;visibility:hidden;transition:opacity .42s var(--ease-out),transform .58s var(--ease-out),visibility 0s .58s}
.slot.on{opacity:1;visibility:visible;transition:opacity .44s var(--ease-out) .08s,transform .62s var(--ease-out) .08s,visibility 0s 0s}
.slot--center{left:50%;top:50%;transform:translate(-50%,-44%) scale(.95)}
.slot--center.on{transform:translate(-50%,-50%) scale(1)}
.slot--top{left:0;right:0;top:16px;display:flex;justify-content:center;transform:translateY(-24px)}
.slot--top.on{transform:none}

/* ---------- the popup ---------- */
.pop{
  --accent:var(--ink);
  position:relative;width:400px;background:var(--surface);border-radius:var(--r-md);overflow:hidden;
  box-shadow:0 8px 20px rgba(23,22,20,.07),0 34px 66px -30px rgba(23,22,20,.42);text-align:left
}
.pop--split{width:470px;display:grid;grid-template-columns:39% 1fr}
.pop__media{position:relative;overflow:hidden;background:#EDE7DD}
.pop__media img,.pop__media svg{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;object-position:center;
  border-radius:var(--r-md) 0 0 var(--r-md)
}
.pop__body{padding:21px 21px 19px}
.pop__x{position:absolute;top:10px;right:10px;width:22px;height:22px;border:0;background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer;z-index:3;border-radius:50%}
.pop__x:hover{background:rgba(23,22,20,.06)}
.pop__kicker{font-size:9px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.pop__title{font-family:var(--font-d);font-size:21px;line-height:1.14;letter-spacing:-.02em;font-weight:500;margin-bottom:8px;text-wrap:balance}
.pop__sub{font-size:11.5px;line-height:1.45;color:var(--muted);margin-bottom:14px}
.pop__field{display:flex;flex-direction:column;gap:8px}
.pop__input{height:36px;border-radius:11px;background:#F6F5F2;border:1px solid var(--line);display:flex;align-items:center;padding:0 12px;font-size:11.5px;color:var(--faint)}
.pop__cta{height:36px;border-radius:11px;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:500;font-size:12px;border:0;cursor:pointer;width:100%}
.pop__foot{margin-top:10px;font-size:9.5px;color:var(--faint)}
.pop__decline{display:block;text-align:center;margin-top:10px;font-size:10.5px;color:var(--muted);text-decoration:underline;text-underline-offset:2px}

.pop--bar{width:min(470px,90%);border-radius:var(--r-pill);padding:10px 10px 10px 20px;display:flex;align-items:center;gap:13px;background:var(--ink);color:#fff}
.pop--bar .bar__txt{font-size:12.5px;flex:1}
.pop--bar .bar__txt b{font-weight:500;color:#D5BDF9}
.pop--bar .bar__clock{font-family:var(--font-d);font-size:11.5px;background:rgba(255,255,255,.14);padding:5px 10px;border-radius:9px}
.pop--bar .bar__cta{background:#fff;color:var(--ink);border:0;border-radius:var(--r-pill);padding:8px 15px;font-size:12px;font-weight:500;cursor:pointer;flex:none}

.wheel{position:relative;width:150px;height:150px;margin:2px auto 8px}
.wheel__disc{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:contain;transform-origin:center center;
  transition:transform 3.6s cubic-bezier(.15,.85,.2,1)
}
.wheel.spin .wheel__disc{transform:rotate(1148deg)}
.wheel__pin{position:absolute;left:50%;top:-7px;margin-left:-6px;width:12px;height:16px;background:var(--ink);clip-path:polygon(50% 100%,0 0,100% 0);z-index:2}
.wheel__hub{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:#fff;box-shadow:0 3px 8px rgba(23,22,20,.2)}

.quizsteps{display:flex;gap:5px;margin-bottom:12px;margin-right:28px}
.quizsteps i{height:3px;flex:1;border-radius:2px;background:var(--line);transition:background .3s}
.quizsteps i.on{background:var(--ink)}
.quizopts{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:12px}
.quizopts span{border:1px solid var(--line);border-radius:10px;padding:9px 10px;font-size:11px;transition:.3s var(--ease)}
.quizopts span.picked{border-color:var(--ink);background:var(--card)}

/* scratch card: the prize sits under a foil that wipes away (script.js adds .done) */
.scratch{position:relative;height:96px;margin:2px 0 12px;border-radius:12px;overflow:hidden;border:1px dashed #E3C9A8;background:#FFF8EF}
.scratch__prize{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:3px}
.scratch__prize b{font-family:var(--font-d);font-size:22px;font-weight:600;letter-spacing:-.02em;color:#B4572A}
.scratch__prize i{font-style:normal;font-size:10.5px;color:var(--muted);letter-spacing:.04em}
.scratch__foil{
  position:absolute;inset:0;display:grid;place-items:center;
  background:repeating-linear-gradient(135deg,#CFC8BF 0 6px,#DDD7CF 6px 12px);
  clip-path:inset(0 0 0 0);transition:clip-path 1.1s cubic-bezier(.6,.05,.3,1)
}
.scratch__foil em{font-style:normal;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#6E665D}
.scratch.done .scratch__foil{clip-path:inset(0 0 0 100%)}

/* ============================================================
   BENEFIT CARDS
   ============================================================ */
/* The row is one object: point at a card and it takes the room it needs.
   Only flex-grow moves. The text column is pinned to a fixed width (script.js
   measures it), so not a single word rewraps while the cards slide. */
.bene{
  background:var(--card);border-radius:var(--r-xl);padding:10px;
  display:flex;gap:10px;--open:2;--slide:cubic-bezier(.4,0,.2,1)
}
.benecard{
  flex:1 1 0;min-width:0;overflow:hidden;
  background:var(--surface);border-radius:var(--r-lg);min-height:330px;
  display:flex;align-items:stretch;padding-left:22px;outline:0;cursor:default;
  transition:flex-grow .5s var(--slide)
}
.benecard.is-open{flex-grow:var(--open)}
.benecard:focus-visible{box-shadow:0 0 0 2px var(--primary-h)}

.benecard__txt{
  flex:0 0 var(--txtw,214px);box-sizing:border-box;padding:24px 22px 24px 0;
  display:flex;flex-direction:column;justify-content:flex-start;gap:26px
}
.benecard__ico{width:52px;height:52px;flex:none;display:grid;place-items:center;border-radius:16px;
  background:var(--tint,#F1E9FF);color:var(--accent,var(--ink));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),0 8px 18px -12px rgba(23,22,20,.3)}
.benecard__ico svg{width:23px;height:23px;display:block}
/* two lines of room either way, so every heading and every paragraph below
   it starts at the same height across the row */
.benecard h3{margin:0 0 10px;min-height:2.36em;transition:color .45s var(--ease)}
.benecard.is-open h3{color:var(--accent,var(--ink))}
.benecard p{font-size:.92rem;color:var(--muted);line-height:1.55}

/* the panel simply takes whatever the text column leaves over */
.benecard__vis{
  flex:1 1 0;min-width:0;margin:22px 0;position:relative;overflow:hidden;
  border-radius:var(--r-md) 0 0 var(--r-md);
  background:linear-gradient(165deg,#DCEBFE,#B9D8FC);
  opacity:0;transition:opacity .34s linear
}
.benecard.is-open .benecard__vis{opacity:1;transition:opacity .34s linear .1s}
.benecard__vis--rules{background:linear-gradient(165deg,#F1E9FF,#D8C6F8)}
.benecard__vis--earn{background:linear-gradient(165deg,#E9F6F0,#C3E3D4)}
.benecard__vis--setup{background:linear-gradient(165deg,#FDEFF4,#F3CEDD)}

/* the three supplied vectors, centred in their own panel with room to breathe */
.benecard__vis--rules,.benecard__vis--earn,.benecard__vis--setup{
  display:grid;place-items:center;padding:0;overflow:hidden
}
/* Each file carries its own empty margin inside the 560x420 canvas. The nudge
   puts the drawing dead centre and the scale eats that margin, so the artwork
   fills the panel without a single pixel of it being cut. */
.bvec{
  width:100%;height:100%;object-fit:contain;object-position:center;display:block;
  transform-origin:center
}
.bvec--suppression{transform:translate(-5.3%,-1.1%) scale(1.15)}
.bvec--attributed{transform:translate(-2.6%,-1.4%) scale(1.03)}
.bvec--live{transform:translate(-2.5%,-.5%) scale(1.14)}

/* panel contents keep a fixed width too, so they never reflow mid slide */
.vwrap{
  position:absolute;top:0;left:0;bottom:0;width:var(--panw,210px);min-width:0;
  padding:22px 18px;display:flex;flex-direction:column;gap:10px;justify-content:center
}
.task{
  display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.92);border-radius:11px;
  padding:10px 12px;font-size:10.5px;color:var(--ink);box-shadow:0 8px 18px -14px rgba(23,22,20,.5)}
.task svg{width:14px;height:14px;flex:none;color:var(--faint)}
.task.is-done{color:var(--muted)}
.task.is-done svg{color:#4C7A22}
.task:not(.is-done){background:#fff;font-weight:500;box-shadow:0 10px 22px -12px rgba(23,22,20,.45)}
.task:not(.is-done) svg{color:var(--accent,var(--primary-h))}
.task i{margin-left:auto;font-style:normal;font-size:9.5px;color:var(--accent,var(--faint))}
.benecard__vis .note{
  position:absolute;background:#fff;border-radius:12px;padding:11px 12px;width:172px;
  box-shadow:0 10px 24px -12px rgba(23,22,20,.35);font-size:10.5px;line-height:1.4;color:var(--ink)
}
.benecard__vis .note b{display:inline-block;font-size:8.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;border-radius:5px;margin-bottom:7px}
.benecard__vis .note small{display:flex;gap:10px;margin-top:8px;color:var(--faint);font-size:9px}
.note--1{top:18px;left:14px;transform:rotate(-4deg)}
.note--2{top:98px;left:44px;transform:rotate(2deg)}
.note--3{top:178px;left:8px;transform:rotate(-3deg)}

/* card two: the rules that keep a popup polite */
.rule{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:rgba(255,255,255,.92);border-radius:11px;padding:10px 12px;
  font-size:10.5px;color:var(--ink);box-shadow:0 8px 18px -14px rgba(23,22,20,.5)
}
.rule i{font-style:normal;font-size:9.5px;color:var(--faint);white-space:nowrap}
.rule--live{background:#fff;box-shadow:0 10px 22px -12px rgba(23,22,20,.45)}
.rule--live i{color:#4C7A22}
.rule--live i::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:#65A22E;margin-right:6px;vertical-align:1px}

/* card three: what each campaign brought back */
.earn{background:rgba(255,255,255,.92);border-radius:11px;padding:9px 12px 11px;position:relative;
  box-shadow:0 8px 18px -14px rgba(23,22,20,.5)}
.earn b{font-size:10.5px;font-weight:500}
.earn u{position:absolute;right:12px;top:9px;text-decoration:none;font-size:10.5px;font-weight:600;font-variant-numeric:tabular-nums}
.earn span{display:block;height:4px;border-radius:3px;margin-top:7px;background:#DFE6E2;position:relative;overflow:hidden}
.earn span::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--p,50%);border-radius:3px;
  background:linear-gradient(90deg,#7CC7A6,#3E9B76)}

/* ============================================================
   LOGO WALL
   ============================================================ */
/* ============================================================
   FAQ: one answer open at a time
   ============================================================ */
.accent{color:var(--primary-h)}
.faq{max-width:820px;margin:46px auto 0;text-align:left;display:grid;gap:12px}
.faq__item{
  background:var(--surface);border:1px solid var(--line);border-radius:20px;
  transition:border-color .4s var(--ease),box-shadow .4s var(--ease)
}
.faq__item.is-open{border-color:transparent;box-shadow:0 1px 2px rgba(23,22,20,.04),0 20px 44px -30px rgba(23,22,20,.45)}
.faq__q{
  width:100%;display:flex;align-items:center;gap:20px;text-align:left;cursor:pointer;
  background:none;border:0;padding:24px 26px;font-family:var(--font-d);
  font-size:clamp(1rem,1.25vw,1.12rem);font-weight:600;letter-spacing:-.018em;color:var(--ink)
}
.faq__q span{flex:1}
.faq__q i{
  flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--card);color:var(--ink);
  transition:background .4s var(--ease),color .4s var(--ease),transform .45s var(--ease)
}
.faq__q i svg{width:16px;height:16px}
.faq__item.is-open .faq__q i{background:var(--primary-h);color:#fff;transform:rotate(135deg)}
.faq__a{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .48s var(--ease),opacity .34s var(--ease);opacity:0
}
.faq__item.is-open .faq__a{grid-template-rows:1fr;opacity:1}
.faq__a>p{
  overflow:hidden;margin:0;padding:0 84px 0 26px;font-size:.96rem;line-height:1.65;color:var(--muted)
}
.faq__item.is-open .faq__a>p{padding-bottom:26px}

/* ============================================================
   MOBILE CAROUSEL: one format per card, shown on a phone
   ============================================================ */
.mhead{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:40px}
.mhead__right{display:flex;align-items:flex-end;justify-content:space-between;gap:28px}
.mcar__arrows{display:flex;gap:10px;flex:none;padding-bottom:2px}
.mhead .eyebrow{margin-left:0}
.mhead .lede{margin:0 0 4px}

.mcar{position:relative}
.mcar__win{overflow:hidden;width:100%;padding:6px 0 14px}
.mcar__track{display:flex;gap:16px;transition:transform .6s var(--ease);will-change:transform;touch-action:pan-y}
.mcar__track.is-dragging{transition:transform .2s var(--ease);cursor:grabbing}
.mcar__nav{
  flex:none;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:var(--surface);
  display:grid;place-items:center;cursor:pointer;color:var(--ink);
  box-shadow:0 8px 18px -14px rgba(23,22,20,.5);transition:background .3s var(--ease),color .3s var(--ease),opacity .3s var(--ease)
}
.mcar__nav svg{width:16px;height:16px}
.mcar__nav--prev svg{transform:rotate(180deg)}
.mcar__nav:hover{background:var(--ink);color:#fff}
.mcar__nav[disabled]{opacity:.35;cursor:default}
.mcar__nav[disabled]:hover{background:var(--surface);color:var(--ink)}

.mcard{
  flex:0 0 calc((100% - 48px) / 4);border-radius:var(--r-lg);padding:24px 24px 0;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);
  display:flex;flex-direction:column;min-height:520px;
  box-shadow:
    0 1px 2px rgba(23,22,20,.03),
    0 4px 9px rgba(23,22,20,.026),
    0 11px 22px rgba(23,22,20,.022),
    0 24px 44px rgba(23,22,20,.02)
}
.mcard__ico{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:var(--primary-soft);color:var(--primary-h);margin-bottom:18px;
  transition:background .5s var(--ease),color .5s var(--ease)
}
.mcard__ico svg{width:19px;height:19px}
.mcard h3{font-size:1.22rem;font-weight:600;letter-spacing:-.022em;margin-bottom:9px}
/* three lines of room in every card, so the phone below starts at the same height */
.mcard p{font-size:.88rem;line-height:1.55;min-height:4.65em;color:var(--muted);margin-bottom:16px;transition:color .5s var(--ease)}


/* the phone, cut off by the bottom of the card */
/* the supplied phone mockups, placed as they are */
.mshot{
  width:100%;max-width:250px;aspect-ratio:280/429;height:auto;display:block;
  object-fit:contain;object-position:bottom center;
  margin:auto auto 0;
}

/* ============================================================
   TEMPLATE WALL: columns of popups drifting past
   ============================================================ */
.tpl{display:grid;grid-template-columns:0.82fr 1.18fr;gap:56px;align-items:stretch;--wallh:470px}
.tpl__txt{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-height:var(--wallh)}
/* the wall matches whatever the text column comes out at, never taller */
.tpl__wall{position:relative;min-height:var(--wallh)}
.tpl__txt .eyebrow{margin-left:0}
.tpl__list{list-style:none;padding:0;margin:20px 0 24px;display:grid;gap:9px}
.tpl__list li{display:flex;align-items:center;gap:10px;font-size:.9rem;color:var(--muted)}
.tpl__list svg{width:16px;height:16px;flex:none;color:var(--primary-h)}

.pwall{
  position:absolute;inset:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.35) 9%,#000 22%,#000 78%,rgba(0,0,0,.35) 91%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.35) 9%,#000 22%,#000 78%,rgba(0,0,0,.35) 91%,transparent 100%)
}
.pwall__col{overflow:hidden}
.pwall__lane{display:flex;flex-direction:column;gap:14px;animation:pwall 34s linear infinite;will-change:transform}
.pwall__col--down .pwall__lane{animation-direction:reverse}
/* it never stops, it only repeats */
.pwall__lane img{
  width:100%;height:auto;display:block;border-radius:14px;
  box-shadow:0 1px 2px rgba(23,22,20,.05),0 14px 30px -22px rgba(23,22,20,.45)
}
/* half the lane plus half a gap: the exact distance from one copy to the next,
   so the loop lands on itself instead of nudging up 7px every lap */
@keyframes pwall{from{transform:translateY(0)}to{transform:translateY(calc(-50% - 7px))}}

/* ============================================================
   INTEGRATIONS: a coverflow of the tools Airo talks to
   ============================================================ */

.cover{margin-top:46px}
.cover__row{
  position:relative;overflow:hidden;padding:18px 0;touch-action:pan-y;user-select:none;-webkit-user-select:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent)
}
.cover__track{display:flex;gap:26px;width:max-content;transition:transform .36s var(--ease);will-change:transform}
.cover.is-fast .cover__track{transition-duration:.32s}
.cover.is-fast .tile{transition-duration:.32s}
.tile{
  flex:none;width:116px;height:116px;padding:0;border:0;cursor:pointer;
  border-radius:26px;background:var(--surface);display:grid;place-items:center;
  /* four soft layers instead of one hard one, so the light falls off gradually */
  box-shadow:
    0 1px 2px rgba(23,22,20,.035),
    0 3px 7px rgba(23,22,20,.03),
    0 8px 18px rgba(23,22,20,.026),
    0 18px 36px rgba(23,22,20,.022);
  transform:scale(.8) rotate(var(--r,0deg));opacity:.6;
  transition:transform .42s var(--ease-out),opacity .34s var(--ease),box-shadow .42s var(--ease-out)
}
.tile:nth-child(odd){--r:-5deg}
.tile:nth-child(even){--r:5deg}
.tile.is-on{--r:0deg;transform:scale(1);opacity:1;
  box-shadow:
    0 1px 2px rgba(23,22,20,.045),
    0 5px 11px rgba(23,22,20,.04),
    0 13px 26px rgba(23,22,20,.035),
    0 28px 52px rgba(23,22,20,.03),
    0 46px 84px rgba(23,22,20,.026)}
/* the mark inside the middle tile gives a soft wobble as it lands, damped so it
   reads like weight settling rather than a shake */
.tile.is-on b{animation:covwob .62s cubic-bezier(.22,.72,.24,1) both}
@keyframes covwob{
  0%{transform:rotate(0deg) scale(.94)}
  22%{transform:rotate(-5deg) scale(1.07)}
  42%{transform:rotate(3deg) scale(1.005)}
  60%{transform:rotate(-1.6deg) scale(1.026)}
  78%{transform:rotate(.7deg) scale(.997)}
  100%{transform:rotate(0deg) scale(1)}
}
.tile:hover{opacity:.9}
.tile.is-on:hover{opacity:1}
.tile b{
  display:grid;place-items:center;width:54px;height:54px;border-radius:16px;
  background:var(--mark,var(--ink));color:var(--markfg,#fff);overflow:hidden
}
.tile b svg{width:56%;height:56%;display:block}
.tile b img{width:62%;height:auto;display:block}

.cover__meta{position:relative;margin-top:26px;min-height:74px}
.cover__card{
  position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s var(--ease),transform .26s var(--ease-out),visibility 0s .26s
}
.cover__card.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .22s var(--ease) .03s,transform .28s var(--ease-out) .03s,visibility 0s 0s}
.cover__card b{display:block;font-family:var(--font-d);font-size:1.34rem;font-weight:600;letter-spacing:-.024em}
.cover__card p{max-width:44ch;margin:7px auto 0;font-size:.94rem;line-height:1.55;color:var(--muted)}
.cover__dots{display:flex;justify-content:center;gap:7px;margin-top:6px}
.cover__dots button{
  width:6px;height:6px;padding:0;border:0;border-radius:50%;background:#DCD7D2;cursor:pointer;
  transition:width .3s var(--ease),background .3s var(--ease)
}
.cover__dots button.is-on{width:20px;border-radius:var(--r-pill);background:var(--primary-h)}

/* the little badge that names a section */
.eyebrow{
  display:inline-flex;align-items:center;gap:7px;margin:0 auto 16px;
  background:var(--primary-soft);color:var(--primary-deep);border-radius:var(--r-pill);
  padding:7px 15px 7px 13px;font-size:.76rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase
}
.eyebrow svg{width:15px;height:15px;color:var(--primary-h)}
.center .eyebrow,section .eyebrow{display:flex;width:max-content}
.wall__t{text-align:center;color:var(--muted);font-size:1rem}
/* the platform row drifts along, fading out at both ends */
.marq{margin-top:38px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.marq__track{display:flex;width:max-content;animation:marq 38s linear infinite}
.marq:hover .marq__track{animation-play-state:paused}
.marq__lane{display:flex;align-items:center;gap:54px;padding-right:54px;flex:none}
.marq__lane span{display:inline-flex;align-items:center;gap:11px;white-space:nowrap;
  font-family:var(--font-d);font-size:1.22rem;font-weight:600;letter-spacing:-.024em;color:var(--faint)}
.marq__lane svg{width:23px;height:23px;flex:none;opacity:.8}
@keyframes marq{to{transform:translateX(-50%)}}

/* ============================================================
   FEATURE BLOCKS
   ============================================================ */
/* ============================================================
   PRODUCT TOUR: numbered steps on a rail, one panel at a time
   ============================================================ */
/* the section pins itself and the steps follow the scroll */
.tour{position:relative;margin-top:54px;--stepvh:76vh}
.js .tour{height:calc(var(--steps,4) * var(--stepvh))}
.tour__stick{position:sticky;top:88px}
.tour__grid{display:grid;grid-template-columns:0.82fr 1.18fr;gap:56px;align-items:center}
.tour__rail{position:relative;padding-left:24px}
.tour__rail::before{content:"";position:absolute;left:0;top:4px;bottom:52px;width:2px;border-radius:2px;background:#E2DDD7}
.tour__num{
  display:block;margin-top:22px;font-family:var(--font-d);font-size:2.6rem;font-weight:500;
  letter-spacing:.04em;color:rgba(40,29,26,.16);line-height:1;font-variant-numeric:tabular-nums
}

.step{position:relative;padding:2px 0}
.step+.step{margin-top:4px}
.step::before{
  content:"";position:absolute;left:-24px;top:6px;width:2px;height:0;border-radius:2px;
  background:var(--primary-h);transition:height .5s var(--ease)
}
.step.is-on::before{height:calc(100% - 12px)}
.step__hd{
  display:flex;align-items:center;gap:12px;width:100%;padding:10px 0;border:0;background:none;
  cursor:pointer;text-align:left;color:var(--faint);font-family:var(--font);
  transition:color .35s var(--ease)
}
.step__hd:hover{color:var(--ink)}
.step__no{font-size:.78rem;font-weight:600;letter-spacing:.08em;font-variant-numeric:tabular-nums;opacity:.75}
.step__hd b{
  font-family:var(--font-d);font-size:clamp(1.05rem,1.4vw,1.25rem);font-weight:500;
  letter-spacing:-.02em;line-height:1.25
}
.step.is-on .step__hd{color:var(--ink)}
.step.is-on .step__no{color:var(--primary-h);opacity:1}
.step__in{
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .5s var(--ease),opacity .34s var(--ease)
}
.step.is-on .step__in{max-height:260px;opacity:1;transition:max-height .55s var(--ease),opacity .4s var(--ease) .1s}
.step__in ul{list-style:none;padding:0 0 0 34px;margin:0}
.step__in li{position:relative;font-size:.92rem;color:var(--muted);line-height:1.5;padding:3px 0}
.step__in li::before{content:"";position:absolute;left:-14px;top:12px;width:5px;height:5px;border-radius:50%;background:var(--primary-h);opacity:.55}
.step__in .btn{margin:16px 0 14px 34px}

.tour__stage{display:grid;align-items:center;justify-self:end;width:100%;max-width:580px;min-width:0}
.tour__panel{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .42s var(--ease),transform .5s var(--ease-out),visibility 0s .5s}
.tour__panel.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .45s var(--ease) .06s,transform .55s var(--ease-out) .06s,visibility 0s 0s}

/* the format picker that opens the tour */
.fmts{display:flex;flex-direction:column;gap:8px}
.fmt{
  display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:12px;
  border:1px solid var(--line);font-size:.82rem;color:var(--muted);background:var(--surface)
}
.fmt svg{width:16px;height:16px;opacity:.6;flex:none}
.fmt.is-on{background:var(--primary-soft);border-color:transparent;color:var(--primary-deep)}
.fmt.is-on svg{opacity:1;color:var(--primary-h)}
.fmts__foot{margin-top:14px;font-size:.78rem;color:var(--faint);line-height:1.5}


.pane{position:relative}
.pane .grain{display:none}
.pane__in{
  position:relative;border-radius:var(--r-lg);background:var(--surface);overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(23,22,20,.03),0 24px 48px -32px rgba(23,22,20,.35)
}

/* the little app windows inside the panes */
/* all four panels are the same card, so they hold one height and one width */
.mini{padding:18px 18px 20px;height:374px;display:flex;flex-direction:column}
.mini__top{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.mini__top b{font-family:var(--font-d);font-size:1rem;font-weight:600;letter-spacing:-.018em}
.mini__pill{margin-left:auto;background:var(--card);border-radius:var(--r-pill);padding:5px 11px;font-size:10.5px;color:var(--muted)}
.mini__row{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:12px;border:1px solid var(--line);margin-bottom:8px;font-size:.82rem;color:var(--muted);transition:.35s var(--ease)}
.mini__row svg{width:16px;height:16px;opacity:.6;flex:none}
.mini__row.on{background:var(--card);border-color:transparent;color:var(--ink)}
.mini__row.on svg{opacity:1}
.mini__sw{margin-left:auto;width:32px;height:18px;border-radius:var(--r-pill);background:#E2E0DA;position:relative;flex:none;transition:background .35s var(--ease)}
.mini__sw::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:left .35s var(--ease)}
.mini__row.on .mini__sw{background:var(--ink)}
.mini__row.on .mini__sw::after{left:16px}
/* the trigger list is the whole card, so the rows share the height between them */
#trig .mini__row{flex:1 1 auto}
#trig .mini__row:last-child{margin-bottom:0}

.swatches{display:flex;gap:8px;margin-top:14px}
.swatches i{width:26px;height:26px;border-radius:9px;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(23,22,20,.08);transition:transform .22s var(--ease)}
.swatches i:hover{transform:scale(1.1)}
.builder{display:grid;grid-template-columns:1fr 150px;gap:16px;align-items:start}
/* the bar a builder carries at the bottom: viewport, save state, publish */
.mini__foot{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:15px;border-top:1px solid var(--line)}
.mini__seg{display:inline-flex;background:var(--card);border-radius:var(--r-pill);padding:3px}
.mini__seg b{font-size:11px;font-weight:500;color:var(--muted);padding:5px 13px;border-radius:var(--r-pill)}
.mini__seg b.on{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1)}
.mini__save{display:inline-flex;align-items:center;gap:7px;margin-left:auto;font-size:11.5px;color:var(--faint)}
.mini__save::before{content:"";width:6px;height:6px;border-radius:50%;background:#65A22E}
.mini__pub{background:var(--ink);color:#fff;border-radius:var(--r-pill);padding:7px 16px;font-size:11.5px;font-weight:500}
.builder .pop{width:100%;box-shadow:0 10px 24px -14px rgba(23,22,20,.4)}
.builder .pop__title{font-size:17px}
.builder .pop__body{padding:16px 16px 15px}
.blocklist{display:flex;flex-direction:column;gap:4px}
.blocklist div{display:flex;align-items:center;gap:9px;font-size:.78rem;color:var(--muted);padding:7px 9px;border-radius:9px;transition:.3s var(--ease)}
.blocklist div svg{width:15px;height:15px;opacity:.6}
.blocklist div.hot{background:var(--card);color:var(--ink)}

.chart__head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}
.chart__head b{font-family:var(--font-d);font-size:1rem;font-weight:600;letter-spacing:-.018em}
.chart__badge{background:var(--primary-soft);color:var(--primary-deep);border-radius:var(--r-pill);padding:5px 12px;font-size:.8rem;font-weight:500;font-family:var(--font-d);font-variant-numeric:tabular-nums}
.chart__plot{position:relative;flex:1;min-height:118px}
.chart__plot svg{width:100%;height:100%;display:block}
/* the box is stretched, so strokes opt out of the scale and the dot is real markup */
.chart__grid line{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.chart__line{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.chart__area{fill:url(#chFade)}
.chart__dot{
  position:absolute;left:96.77%;top:13%;width:10px;height:10px;margin:-5px 0 0 -5px;
  border-radius:50%;background:var(--ink);
  box-shadow:0 0 0 3px var(--surface),0 0 0 5px rgba(169,123,245,.4)
}
/* what the revenue is made of, so the card ends on numbers rather than air */
.chart__stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:auto;padding-top:15px;border-top:1px solid var(--line)}
.chart__stats b{display:block;font-family:var(--font-d);font-size:1.06rem;font-weight:600;letter-spacing:-.022em;font-variant-numeric:tabular-nums}
.chart__stats span{display:block;margin-top:2px;font-size:.72rem;line-height:1.3;color:var(--faint)}

/* the plot keeps 20 of its 620 units clear on the right for the dot, so the axis does too */
.chart__axis{display:flex;justify-content:space-between;margin-top:12px;padding-right:3.23%;font-size:.7rem;color:var(--faint);font-variant-numeric:tabular-nums}

/* it draws itself once, left to right */
.js .chart .chart__line{stroke-dasharray:1200;stroke-dashoffset:1200}
.js .chart.in .chart__line{stroke-dashoffset:0;transition:stroke-dashoffset 1.6s var(--ease-out) .15s}
.js .chart .chart__area{opacity:0}
.js .chart.in .chart__area{opacity:1;transition:opacity 1s var(--ease) .5s}
.js .chart .chart__dot{opacity:0;transform:scale(.4)}
.js .chart.in .chart__dot{opacity:1;transform:none;transition:opacity .4s var(--ease) 1.3s,transform .5s var(--ease-out) 1.3s}
.js .chart__line{stroke-dasharray:560;stroke-dashoffset:560;transition:stroke-dashoffset 1.6s var(--ease-out)}
.js .chart__area,.js .chart__dot{opacity:0;transition:opacity .8s var(--ease-out) .5s}
.js .chart.in .chart__line{stroke-dashoffset:0}
.js .chart.in .chart__area,.js .chart.in .chart__dot{opacity:1}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px;align-items:start}
.quotes>div:nth-child(2){margin-top:-28px}
.qcard{
  position:relative;background:var(--surface);border-radius:var(--r-lg);padding:26px;
  min-height:230px;display:flex;flex-direction:column;justify-content:space-between;
  box-shadow:var(--sh-1);margin-bottom:20px
}
.qcard:last-child{margin-bottom:0}
.qcard__mark{position:absolute;top:20px;right:22px;font-family:var(--font-d);font-size:2.6rem;line-height:.6;color:var(--line)}
.qcard p{font-size:1.01rem;line-height:1.45;letter-spacing:-.012em;padding-right:34px}
.qcard__who{display:flex;align-items:center;gap:12px;margin-top:24px}
.qcard__av{width:42px;height:42px;border-radius:12px;overflow:hidden;flex:none;background:var(--card)}
.qcard__av svg{width:100%;height:100%;display:block}
.qcard__who b{display:block;font-size:.88rem;font-weight:600}
.qcard__who span{display:block;font-size:.83rem;color:var(--faint)}
.qcard__who>div{margin-right:auto}

/* ============================================================
   INTEGRATION ORBIT
   ============================================================ */
.orbit{position:relative;height:330px;margin-top:44px;overflow:hidden}
.orbit__ring{position:absolute;left:50%;bottom:0;border-radius:50%;border:1px solid var(--line);transform:translateX(-50%)}
.orbit__ring--1{width:420px;height:420px}
.orbit__ring--2{width:660px;height:660px}
.orbit__ring--3{width:920px;height:920px}
.orbit__sun{position:absolute;left:50%;bottom:-30px;width:112px;height:112px;margin-left:-56px;z-index:2;
  border-radius:50%;background:var(--surface);display:grid;place-items:center;
  box-shadow:0 10px 26px -10px rgba(40,29,26,.24)}
.orbit__sun svg{width:52px;height:52px}
.orbit__ico{
  position:absolute;width:52px;height:52px;border-radius:50%;background:var(--surface);
  display:grid;place-items:center;box-shadow:0 4px 12px rgba(23,22,20,.09);z-index:1;
  font-family:var(--font-d);font-weight:700;font-size:.95rem
}
.orbit__ico svg{width:24px;height:24px}

/* ============================================================
   STORIES
   ============================================================ */
.stories__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px}
.stories__head h2{max-width:16ch}
.storycards{background:var(--card);border-radius:var(--r-xl);padding:10px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:40px}
.storycard{background:var(--surface);border-radius:var(--r-lg);padding:24px;min-height:300px;display:flex;flex-direction:column;justify-content:space-between;transition:transform .38s var(--ease)}
.storycard:hover{transform:translateY(-4px)}
.storycard__brand{display:flex;align-items:center;gap:10px;font-family:var(--font-d);font-weight:600;font-size:1.05rem;letter-spacing:-.02em}
.storycard__brand svg{width:22px;height:22px}
.storycard p{font-size:.95rem;color:var(--muted);line-height:1.5}
.storycard b{display:block;font-family:var(--font-d);font-size:1.9rem;font-weight:600;letter-spacing:-.03em;color:var(--ink);margin-bottom:8px}

/* ============================================================
   CLOSING + FOOTER
   ============================================================ */
/* ============================================================
   CLOSING CTA: one lined card
   ============================================================ */
.cta{
  position:relative;overflow:hidden;border-radius:var(--r-xl);
  background:var(--card);padding:80px 40px;text-align:center
}
.cta__lines{
  position:absolute;inset:-30% -10%;pointer-events:none;opacity:.55;
  background-image:repeating-linear-gradient(115deg,transparent 0 26px,rgba(40,29,26,.055) 26px 27px);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 40%,#000 30%,transparent 78%);
  mask-image:radial-gradient(120% 90% at 50% 40%,#000 30%,transparent 78%)
}
.cta__in{position:relative;z-index:1}
.cta__btns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:32px}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{position:relative;overflow:hidden;padding:76px 0 0;background:var(--card)}
.foot__top{display:grid;grid-template-columns:1.35fr 1.65fr;gap:60px;align-items:start}
.foot__brand img{height:44px;width:auto;display:block;margin:0 0 20px -3px}
.foot__brand h3{font-size:clamp(1.5rem,2.2vw,1.95rem);line-height:1.18;letter-spacing:-.026em;margin:0 0 14px}
.foot__brand p{font-size:.94rem;line-height:1.6;color:var(--muted);max-width:34ch;margin:0}
.foot__social{display:flex;gap:9px;margin-top:26px}
.foot__social a{width:38px;height:38px;border-radius:11px;background:var(--surface);display:grid;place-items:center;color:var(--muted);transition:.24s var(--ease)}
.foot__social a:hover{background:var(--ink);color:#fff}
.foot__social svg{width:17px;height:17px}

.foot__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.foot h5{margin:0 0 18px;font-size:.72rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);font-family:var(--font)}
.foot ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:13px}
.foot a{text-decoration:none;font-size:.95rem;transition:color .22s var(--ease)}
.foot ul a{
  position:relative;display:inline-block;color:var(--muted);
  background-image:linear-gradient(var(--primary-h),var(--primary-h));
  background-size:0 1.5px;background-position:0 100%;background-repeat:no-repeat;
  transition:color .22s var(--ease),background-size .3s var(--ease)
}
.foot ul a:hover,.foot ul a:focus-visible{color:var(--ink);background-size:100% 1.5px}
/* the name, big and faint, cut off by the bottom of the page */
.foot__word{
  display:block;position:relative;z-index:0;margin:calc(34px - .25em) 0 0;padding:.25em 0 .17em;
  font-family:var(--font-d);font-weight:600;letter-spacing:-.05em;line-height:.78;
  font-size:clamp(4.2rem,18vw,16.5rem);text-align:center;white-space:nowrap;
  color:rgba(148,101,232,.26);pointer-events:none;user-select:none;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 44%,rgba(0,0,0,.5) 78%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0,#000 44%,rgba(0,0,0,.5) 78%,transparent 100%)
}

/* ============================================================
   PRICING
   ============================================================ */
.toggle{position:relative;display:inline-flex;align-items:center;gap:5px;background:var(--card);border-radius:var(--r-pill);padding:5px;margin-top:28px}
.toggle button{
  position:relative;z-index:1;border:0;background:transparent;border-radius:var(--r-pill);
  padding:9px 20px;font-size:.9rem;color:var(--muted);cursor:pointer;
  transition:color .28s var(--ease)
}
.toggle button[aria-pressed="true"]{color:#000;font-weight:500}
.toggle button:hover{color:#000}
/* the glass sits on whichever period is chosen and slides across on the switch */
.toggle__glass{height:38px;margin-top:-19px;opacity:0}
.toggle.is-live .toggle__glass{opacity:1}
.toggle .save{background:#E2F2EA;color:#2F7A5C;font-size:.78rem;border-radius:var(--r-pill);padding:6px 13px;margin-left:4px}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px;text-align:left;align-items:stretch}
.plan{
  background:var(--surface);border-radius:var(--r-lg);padding:28px 26px;
  display:flex;flex-direction:column;position:relative;
  border:1px solid var(--line);
  box-shadow:
    0 1px 2px rgba(23,22,20,.035),
    0 4px 9px rgba(23,22,20,.03),
    0 12px 24px rgba(23,22,20,.026),
    0 26px 48px rgba(23,22,20,.022);
  transition:box-shadow .42s var(--ease-out),border-color .42s var(--ease),transform .42s var(--ease-out)
}
/* once the reveal has finished, the card owns its own transform again */
.js .plans .reveal.in{transition:box-shadow .42s var(--ease-out),border-color .42s var(--ease),transform .42s var(--ease-out)}
.plan:hover{
  transform:translateY(-5px);border-color:rgba(169,123,245,.34);
  box-shadow:
    0 2px 4px rgba(23,22,20,.04),
    0 7px 15px rgba(23,22,20,.035),
    0 18px 36px rgba(23,22,20,.03),
    0 38px 70px rgba(23,22,20,.028)
}
.plan--hi{background:var(--card);border-color:rgba(169,123,245,.28)}
.plan__flag{position:absolute;top:-12px;left:26px;background:var(--primary-h);color:#fff;font-size:.76rem;padding:5px 13px;border-radius:var(--r-pill)}
.plan__name{font-family:var(--font-d);font-size:1.12rem;font-weight:600;letter-spacing:-.018em}
.plan__desc{font-size:.86rem;color:var(--faint);margin-top:4px}
.plan__price{display:flex;align-items:baseline;gap:5px;margin:20px 0 0}
.plan__price b{font-family:var(--font-d);font-size:2.6rem;font-weight:600;letter-spacing:-.035em;line-height:1}
.plan__price span{font-size:.9rem;color:var(--muted)}
.plan ul{margin:22px 0 24px;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;flex:1}
.plan li{display:flex;gap:10px;font-size:.9rem;color:var(--muted)}
.plan li svg{width:16px;height:16px;flex:none;margin-top:3px;color:var(--ink)}
.plan__note{margin-top:14px;font-size:.82rem;color:var(--faint);text-align:center}

@media (max-width:1020px){
  .plans{grid-template-columns:1fr;max-width:440px;margin-inline:auto}
}
@media (max-width:760px){
  .toggle button{padding:9px 15px;font-size:.85rem}
  .plan{padding:24px 22px}
  .plan__price b{font-size:2.2rem}
}

/* ============================================================
   HERO ENTRANCE
   ============================================================ */
.js .hero [data-in]{
  opacity:0;
  transition:opacity .85s var(--ease-out) var(--d,0ms),
             transform 1s cubic-bezier(.16,1,.3,1) var(--d,0ms),
             filter .95s var(--ease-out) var(--d,0ms);
}
.js .hero:not(.in) [data-in]{will-change:transform,opacity}
.js .hero [data-in="up"]{transform:translateY(24px)}
.js .hero [data-in="rise"]{transform:translateY(48px) scale(.975);filter:blur(6px)}
.js .hero.in [data-in]{opacity:1;transform:none;filter:none}

.hero h1 .ln{display:block;overflow:clip;padding-bottom:.18em;margin-bottom:-.18em}
.hero h1 .ln>i{display:block;font-style:normal}
.js .hero h1 .ln>i{transform:translateY(112%);transition:transform 1.1s cubic-bezier(.16,1,.3,1) var(--d,0ms)}
.js .hero.in h1 .ln>i{transform:none}

.js .hero .blob{opacity:0;transition:opacity .8s var(--ease-out) var(--d,0ms),transform .95s cubic-bezier(.34,1.4,.5,1) var(--d,0ms);animation:none}
.js .hero .blob{transform:scale(.5) rotate(var(--rot,0deg))}
.js .hero.in .blob{opacity:1;transform:scale(1) rotate(var(--rot,0deg))}
.js .hero.in .blob.settled{animation:float var(--dur,8s) ease-in-out var(--del,0s) infinite}

.js .hero .shop{opacity:0;transition:opacity .75s var(--ease-out) 1180ms}
.js .hero.in .shop{opacity:1}

@media (max-height:680px){
  .js .tour{height:auto}
  .tour__stick{position:static}
}
@media (prefers-reduced-motion:reduce){
  .js .hero [data-in],.js .hero h1 .ln>i,.js .hero .blob,.js .hero .shop,.js .reveal,
  .js .chart__line,.js .chart__area,.js .chart__dot{
    opacity:1 !important;transform:none !important;filter:none !important;
    stroke-dashoffset:0 !important;transition:none !important
  }
  .blob,.slot,.fwheel img,.fpop i,.fcur{animation:none !important;transition:none !important}
  .marq__track{animation:none !important}
  .pwall__lane{animation:none !important}
  .tile.is-on b{animation:none !important}
  .marq{-webkit-mask-image:none;mask-image:none}
  .marq__lane:last-child{display:none}
  .marq__lane{flex-wrap:wrap;justify-content:center;gap:24px 34px;padding:0}
  .bene,.benecard,.benecard__vis,.benecard h3{transition:none !important}
  .fcur{opacity:0}
  html{scroll-behavior:auto}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1400px){
  .benecard{min-height:310px}
  .benecard__txt{padding:22px 22px 22px 0}
  .benecard__vis{margin:22px 0}
}
/* below this the sliding row leaves the panel too thin to read, so each card
   simply carries its own panel underneath */
@media (max-width:1180px){
  .bene{display:grid;grid-template-columns:1fr 1fr;padding:8px;gap:8px}
  .benecard,.benecard.is-open{display:flex;flex-direction:column;gap:18px;padding:22px;flex-grow:0;min-height:0}
  .benecard__txt{flex:0 0 auto;width:auto;padding:0}
  .benecard h3{min-height:0}
  .benecard__vis{opacity:1;margin:0;border-radius:var(--r-md);min-height:250px;flex:1 1 auto}
  .benecard__vis--rules,.benecard__vis--earn,.benecard__vis--setup{padding:0}
  /* the three tilted notes need a touch more room than the other panels */
  .benecard__vis--notes{min-height:292px}
  .vwrap{position:static;min-width:0}
  .benecard .note--1{transform:rotate(-4deg)}
  .benecard .note--2{transform:rotate(2deg)}
  .benecard .note--3{transform:rotate(-3deg)}
}
@media (max-width:1160px){
  .hero .blob--a{left:2%}
  .hero .blob--b{right:2%}
  .hero .blob--c{right:1%;top:386px}
}
@media (max-width:1020px){
  .shop{height:620px}
  .nav__links{display:none}
  .burger{display:flex}
  .js .tour{height:auto}
  .tour__stick{position:static}
  .tour__grid{grid-template-columns:1fr;gap:32px}
  .mini{height:auto;min-height:300px}
  .chart__stats{grid-template-columns:1fr 1fr;gap:12px 10px}
  .tour__stage{justify-self:stretch;max-width:none}
  .tour__rail{padding-left:20px}
  .step::before{left:-20px}
  .quotes{grid-template-columns:1fr 1fr}
  .quotes>div:nth-child(2){margin-top:0}
  .storycards{grid-template-columns:1fr}
  .foot__card{grid-template-columns:1fr 1fr;gap:30px}
  .foot__social{margin-top:24px}
  .orbit{height:270px}
  .orbit__ring--3{display:none}
}
@media (max-width:760px){
  .wrap{width:min(100% - 28px,var(--wrap))}
  .pad{padding:52px 0}.pad-lg{padding:64px 0}
  .hero{padding-top:100px}
  .hero h1{max-width:none;font-size:clamp(2.05rem,8.4vw,2.9rem)}
  .nav__actions .btn--soft{display:none}
  /* the mini popups have nowhere to sit beside a 390px headline */
  .blob{display:none}

  .tabs{margin-top:38px;flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scrollbar-width:none;padding-bottom:2px}
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{flex:none;white-space:nowrap}
  .frame{margin-top:26px;padding:10px;border-radius:24px}
  .frame__inner{border-radius:16px}
  .hero{padding-bottom:56px}
  .frame__inner{border-radius:16px}
  .hero{padding-bottom:64px}
  .shop{height:520px}

  .shop__nav{display:none}
  .shop__grid{grid-template-columns:1fr 1fr;gap:10px;padding:12px 14px 14px}
  .shop__promo{padding:9px 14px;font-size:10.5px}
  .shop__ship{display:none}
  /* vw, not %, or the width resolves against a shrink to fit slot and comes out tiny */
  .pop{width:min(316px,84vw)}
  .pop--split{width:min(300px,84vw);grid-template-columns:1fr}
  .pop--split .pop__media{display:none}
  .pop__title{font-size:18px}
  .bene{grid-template-columns:1fr}
  .benecard{min-height:0}
  .benecard__vis{border-radius:var(--r-md);min-height:230px}
  .marq__lane{gap:38px;padding-right:38px}
  .marq__lane span{font-size:1.05rem}
  .foot__top{grid-template-columns:1fr;gap:40px}
  .cta{padding:56px 24px}
  .faq__q{padding:20px;gap:14px}
  .faq__a>p{padding:0 20px}
  .faq__item.is-open .faq__a>p{padding-bottom:20px}
  .mhead{grid-template-columns:1fr;gap:16px;align-items:start}
  .mcard{flex-basis:calc((100% - 16px) / 2)}
  .tpl{grid-template-columns:1fr;gap:36px;--wallh:430px}
  .tpl__txt{min-height:0}
  .cover__track{gap:16px}
  .tile{width:92px;height:92px;border-radius:22px}
  .tile b{width:44px;height:44px}
  .cover__meta{min-height:96px}
  .cover__meta{min-height:166px}
  .cover__card p{font-size:.9rem}
  .mcar__nav{width:38px;height:38px}
  .mcard{flex-basis:calc((100% - 32px) / 3);min-height:430px;padding:20px 20px 0}
  .mshot{max-width:210px}
  .foot__cols{grid-template-columns:1fr 1fr;gap:28px}
  .cta{padding:44px 20px}
  .mcard{flex-basis:100%}
  .pwall{grid-template-columns:repeat(2,1fr);--wallh:400px}
  .pwall__col:last-child{display:none}
  .tour{margin-top:34px}
  .tour__num{font-size:2rem}
  .step__in .btn{margin-left:30px}
  .quotes{grid-template-columns:1fr;margin-top:36px}
  .qcard{min-height:0}
  .orbit{height:210px}
  .orbit__ring--2{display:none}
  .orbit__sun{width:88px;height:88px;margin-left:-44px}
  .orbit__ico{width:44px;height:44px}
  .storycards{padding:8px;gap:8px}
  .storycard{min-height:0;padding:20px}

  .foot__card{grid-template-columns:1fr;padding:28px;border-radius:var(--r-lg)}
  .btn{font-size:.92rem}
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.phero{position:relative;isolation:isolate;overflow:hidden;padding:150px 0 62px}
.phero__glow{
  position:absolute;z-index:-1;left:50%;top:-260px;width:900px;height:620px;margin-left:-450px;
  background:radial-gradient(closest-side,rgba(169,123,245,.20),rgba(169,123,245,0) 72%);
  pointer-events:none
}
.phero__in{display:grid;justify-items:start;gap:16px}
.phero h1{max-width:16ch;font-size:clamp(2.3rem,4.6vw,3.9rem)}
.phero .lede{max-width:54ch}
.phero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
/* contact hero: the copy keeps its column, the illustration takes the empty half */
.chero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(30px,4vw,64px);align-items:center}
.chero__art{margin:0;display:flex;justify-content:center;align-items:center}
.chero__art img{
  width:100%;max-width:660px;height:auto;display:block;object-fit:contain
  /* it sits straight on the page: no card, no border, no glow, no shadow */
}
.crumb{display:inline-flex;align-items:center;gap:8px;font-size:.76rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--primary-deep)}
.crumb svg{width:13px;height:13px;color:var(--faint)}

/* --- book a call --- */
.book{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(30px,4.4vw,64px);align-items:start}
.book__copy{display:grid;justify-items:start;gap:14px}
.book__copy .eyebrow{margin:0 0 2px}
.book__copy .lede{max-width:46ch}
.book__list{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:11px}
.book__list li{display:flex;gap:11px;font-size:.96rem;color:var(--muted);line-height:1.5}
.book__list svg{width:17px;height:17px;flex:none;margin-top:4px;color:var(--primary-h)}
.book__facts{display:grid;gap:10px;width:100%;margin-top:8px}
.fact{display:flex;align-items:center;gap:13px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;box-shadow:var(--sh-1);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease)}
.fact:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:#E1DAD4}
.fact__i{width:38px;height:38px;border-radius:11px;background:var(--primary-soft);
  color:var(--primary-h);display:grid;place-items:center;flex:none}
.fact__i svg{width:17px;height:17px}
.fact b{display:block;font-size:.86rem;font-weight:600;letter-spacing:-.014em}
.fact span{font-size:.82rem;color:var(--faint)}
.fact a{color:var(--primary-deep);text-decoration:none;border-bottom:1px solid rgba(169,123,245,.45)}

.book__embed{position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-2);min-height:700px}
.book__embed .calendly-inline-widget{position:relative;z-index:2}
.book__fallback{position:absolute;inset:0;z-index:1;display:none;place-content:center;
  justify-items:center;text-align:center;gap:12px;padding:34px}
.book__embed.is-stuck .book__fallback{display:grid}
.book__embed.is-stuck .calendly-inline-widget{display:none}
.book__fallback b{font-family:var(--font-d);font-size:1.15rem;font-weight:500;letter-spacing:-.02em}
.book__fallback p{color:var(--muted);font-size:.92rem;max-width:36ch}

/* --- write to us --- */
.write{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);gap:clamp(24px,3vw,40px);align-items:start}
.write__form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(24px,3vw,38px);box-shadow:var(--sh-2)}
.write__form .eyebrow{margin:0}
/* three cards, one height, the link always on the same line at the bottom */
.write__side{display:grid;gap:14px;grid-auto-rows:1fr}
.sidecard{
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px;box-shadow:var(--sh-1);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease)
}
.sidecard:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:#E1DAD4}
.sidecard__i{width:40px;height:40px;border-radius:12px;background:var(--primary-soft);
  color:var(--primary-h);display:grid;place-items:center;flex:none}
.sidecard__i svg{width:18px;height:18px}
.sidecard h4{font-family:var(--font-d);font-size:1.12rem;font-weight:500;letter-spacing:-.02em;margin:14px 0 0}
.sidecard p{color:var(--muted);font-size:.9rem;line-height:1.55;margin-top:7px}
.sidecard__a{display:inline-flex;align-self:flex-start;align-items:center;gap:6px;margin-top:auto;padding-top:14px;
  font-size:.88rem;font-weight:600;color:var(--primary-deep);text-decoration:none}
.sidecard__a svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.sidecard__a:hover svg{transform:translateX(3px)}

.cform{display:grid;gap:14px;margin-top:22px}
.cf__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cf__f{display:grid;gap:7px}
.cf__f>span{font-size:.82rem;font-weight:600;letter-spacing:-.01em;color:var(--ink-2)}
.cf__f>span em{font-style:normal;font-weight:500;color:var(--faint)}
.cf__f input,.cf__f select,.cf__f textarea{
  font:inherit;font-size:.94rem;color:var(--ink);background:var(--bg);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;width:100%;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease)
}
.cf__f textarea{resize:vertical;min-height:120px;line-height:1.55}
.cf__f select{appearance:none;cursor:pointer;padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23746A66' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:15px}
.cf__f input::placeholder,.cf__f textarea::placeholder{color:var(--faint)}
.cf__f input:focus,.cf__f select:focus,.cf__f textarea:focus{
  outline:none;background:var(--surface);border-color:var(--primary);}
.cf__f.is-bad input,.cf__f.is-bad textarea{border-color:#E08A7A !important;}
.cf__pot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.cf__foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:4px}
.cf__note{flex:1;min-width:220px;font-size:.8rem;line-height:1.5;color:var(--faint)}
.cf__said{margin:0;font-size:.9rem;color:var(--primary-deep);background:var(--primary-soft);
  border-radius:var(--r-sm);padding:12px 15px}

@media (max-width:980px){
  .chero{grid-template-columns:1fr;gap:28px}
  .chero__art img{max-width:420px}
  .book{grid-template-columns:1fr}
  .book__embed{min-height:640px}
  .write{grid-template-columns:1fr}
}
@media (max-width:640px){
  .phero{padding:118px 0 44px}
  .cf__row{grid-template-columns:1fr}
  .book__embed{min-height:600px;border-radius:var(--r-md)}
}

/* ============================================================
   LEGAL DOCUMENTS
   ============================================================ */
.phero--doc{padding:150px 0 54px}
.phero--doc .eyebrow{margin:0}
.phero--doc h1{max-width:14ch}
.phero--doc .lede{max-width:62ch}
.phero--doc time{font-weight:600;color:var(--ink)}

.doc{display:grid;grid-template-columns:252px minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}
.doc__side{position:sticky;top:104px;display:grid;gap:18px}
.doc__t{margin:0 0 4px;font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.doc__toc{display:grid;gap:1px;max-height:56vh;overflow:auto;padding-right:4px}
.doc__toc::-webkit-scrollbar{width:4px}
.doc__toc::-webkit-scrollbar-thumb{background:#E2DDD8;border-radius:4px}
.doc__toc a{
  display:flex;gap:10px;align-items:baseline;text-decoration:none;color:var(--muted);
  font-size:.88rem;line-height:1.35;padding:8px 10px;border-radius:10px;
  transition:background .25s var(--ease),color .25s var(--ease)
}
.doc__toc a i{font-style:normal;font-size:.72rem;font-weight:600;color:var(--faint);flex:none;font-variant-numeric:tabular-nums}
.doc__toc a:hover{background:var(--card);color:var(--ink)}
.doc__toc a.is-here{background:var(--primary-soft);color:var(--primary-deep)}
.doc__toc a.is-here i{color:var(--primary-h)}
.doc__ask{background:var(--card);border-radius:var(--r-md);padding:18px 18px 16px}
.doc__ask b{display:block;font-family:var(--font-d);font-size:1rem;font-weight:500;letter-spacing:-.02em}
.doc__ask p{margin:6px 0 10px;font-size:.86rem;line-height:1.5;color:var(--muted)}
.doc__ask a{font-size:.86rem;font-weight:600;color:var(--primary-deep);text-decoration:none;
  border-bottom:1px solid rgba(169,123,245,.45)}

.prose{max-width:72ch}
.prose h2{
  display:flex;gap:14px;align-items:baseline;scroll-margin-top:110px;
  font-family:var(--font-d);font-size:1.32rem;font-weight:500;letter-spacing:-.022em;
  margin:44px 0 12px;padding-top:26px;border-top:1px solid var(--line)
}
.prose h2:first-child{margin-top:0;padding-top:0;border-top:0}
.prose__n{font-family:var(--font);font-size:.74rem;font-weight:700;letter-spacing:.04em;
  color:var(--primary-h);flex:none;font-variant-numeric:tabular-nums}
.prose p{margin:0 0 14px;font-size:1rem;line-height:1.72;color:var(--ink-2)}
.prose ul{margin:0 0 14px;padding:0;list-style:none;display:grid;gap:11px}
.prose li{position:relative;padding-left:22px;font-size:1rem;line-height:1.68;color:var(--ink-2)}
.prose li::before{content:"";position:absolute;left:2px;top:.66em;width:7px;height:7px;
  border-radius:50%;background:var(--primary);opacity:.55}
.prose strong{font-weight:600;color:var(--ink)}
.prose a{color:var(--primary-deep);text-decoration:none;border-bottom:1px solid rgba(169,123,245,.45)}
.prose a:hover{border-bottom-color:var(--primary-h)}

@media (max-width:980px){
  .doc{grid-template-columns:1fr;gap:30px}
  .doc__side{position:static;max-width:none}
  .doc__toc{max-height:none;grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .phero--doc{padding:118px 0 38px}
  .doc__toc{grid-template-columns:1fr}
  .prose h2{font-size:1.18rem;margin-top:34px;padding-top:20px}
}

/* ============================================================
   ABOUT
   ============================================================ */
.pad-sm{padding:26px 0 12px}
.phero--about{padding:140px 0 40px}
.ab__hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:clamp(30px,4vw,64px);align-items:center}
.ab__heroTxt{display:grid;justify-items:start;gap:16px}
.ab__heroTxt h1{max-width:15ch;font-size:clamp(2.2rem,4.2vw,3.55rem)}
.ab__heroTxt .lede{max-width:52ch}
.ab__art{margin:0;display:flex;justify-content:center;align-items:center}
.ab__art img{
  width:100%;max-width:620px;height:auto;display:block;
  object-fit:contain
  /* nothing behind it: no card, no border, no shadow, no glow */
}

.ab__nums{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ab__nums div{background:var(--card);border-radius:var(--r-md);padding:22px 22px 20px}
.ab__nums b{display:block;font-family:var(--font-d);font-size:clamp(1.8rem,2.6vw,2.4rem);font-weight:600;
  letter-spacing:-.03em;line-height:1;color:var(--ink)}
.ab__nums span{display:block;margin-top:9px;font-size:.87rem;line-height:1.5;color:var(--muted)}

.ab__two{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(28px,4vw,64px);align-items:start}
.ab__two .eyebrow{margin:0 0 14px}
.ab__two .h2{max-width:15ch}
.ab__twoTxt{display:grid;gap:14px;padding-top:6px}
.ab__twoTxt .lede{max-width:56ch}

/* the targeting rule, set as a sentence you can read out loud */
.trule{margin-top:48px;padding:clamp(30px,4vw,54px) clamp(24px,4vw,56px);
  background:var(--card);border-radius:var(--r-xl);position:relative;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr) clamp(260px,28vw,400px);gap:clamp(32px,4.5vw,64px);align-items:center}
.trule__txt{position:relative;z-index:1}
.trule__art{margin:0;position:relative;z-index:1}
.trule__art img{
  width:100%;max-width:470px;height:auto;display:block;margin-inline:auto;
  object-fit:contain;
  /* no card, no frame, no glow: only a natural shadow under the artwork */
  filter:drop-shadow(0 18px 34px rgba(23,22,20,.10))
}
.trule__art figcaption{margin-top:-22px;text-align:center;font-size:.8rem;color:var(--faint)}
.trule::after{content:"";position:absolute;right:-90px;top:-90px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(169,123,245,.16),rgba(169,123,245,0) 70%);pointer-events:none}
.trule__k{font-size:.72rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--faint)}
.trule__s{
  margin-top:20px;max-width:30ch;
  font-family:var(--font-d);font-weight:500;letter-spacing:-.018em;
  font-size:clamp(1.3rem,2.05vw,1.82rem);line-height:1.95;color:var(--ink)
}
.chip{
  display:inline-block;padding:1px 14px 3px;margin:0 1px;border-radius:var(--r-pill);
  background:var(--surface);box-shadow:0 1px 2px rgba(23,22,20,.05);
  font-family:var(--font);font-weight:500;letter-spacing:-.01em;font-size:.74em;color:var(--ink-2);
  vertical-align:2px;white-space:nowrap
}
.chip--v{background:var(--primary-h);color:#fff;box-shadow:0 6px 16px -10px rgba(110,66,190,.9)}
.trule__e{
  margin-top:26px;font-family:var(--font-d);font-weight:500;letter-spacing:-.022em;
  font-size:clamp(1.5rem,2.5vw,2.2rem);line-height:1.2;color:var(--primary-h)
}
.trule__e i{font-style:normal;color:var(--faint)}
.trule__f{margin-top:22px;padding-top:20px;border-top:1px solid #E3DCD5;max-width:52ch;
  font-size:.95rem;line-height:1.62;color:var(--muted);position:relative;z-index:1}

.ab__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:44px}
.pcard{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px 22px 22px;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.pcard__n{position:absolute;top:22px;right:22px;font-size:.74rem;font-weight:700;letter-spacing:.06em;color:var(--faint)}
.pcard__i{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;
  background:var(--primary-soft);color:var(--primary-h)}
.pcard__i svg{width:20px;height:20px}
.pcard h3{font-family:var(--font-d);font-size:1.14rem;font-weight:500;letter-spacing:-.02em;margin:15px 0 0}
.pcard p{margin-top:8px;font-size:.9rem;line-height:1.6;color:var(--muted)}

.ab__mark{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,56px);
  align-items:center;background:var(--card);border-radius:var(--r-xl);padding:clamp(28px,4vw,52px)}
.ab__mark img{width:100%;max-width:340px;height:auto;display:block}
.ab__mark h2{margin-bottom:12px}
.ab__mark p{font-size:.98rem;line-height:1.65;color:var(--muted);max-width:50ch}
.ab__mark2{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:16px;font-size:.84rem;color:var(--faint)}
.ab__mark2 i{width:13px;height:13px;border-radius:4px;display:inline-block}
.ab__mark2 b{font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums}

@media (max-width:980px){
  .ab__hero{grid-template-columns:1fr;gap:34px}
  .ab__art{order:0}
  .ab__art img{max-width:420px}
  .ab__two{grid-template-columns:1fr;gap:18px}
  .ab__two .h2{max-width:20ch}
  .ab__nums{grid-template-columns:repeat(2,1fr)}
  .ab__grid{grid-template-columns:repeat(2,1fr)}
  .trule{grid-template-columns:1fr;gap:30px}
  .trule__art img{max-width:340px}
  .ab__mark{grid-template-columns:1fr;text-align:left}
}
@media (max-width:640px){
  .phero--about{padding:112px 0 30px}
  .ab__nums{grid-template-columns:1fr 1fr}
  .ab__grid{grid-template-columns:1fr}
  .trule{padding:26px 22px;border-radius:var(--r-lg);grid-template-columns:1fr;gap:26px}
  .trule__art img{max-width:300px}
  .trule__s{line-height:1.85;max-width:none}
  .chip{padding:1px 11px 2px;vertical-align:1px}
}

/* ============================================================
   HONESTY LABELS, EXTRA PLATFORMS, DOCS CODE
   ============================================================ */
.chart__head b{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.chart__note{font-family:var(--font-b,inherit);font-size:.66rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--card);border:1px solid var(--line);border-radius:var(--r-pill);padding:3px 8px}
.cover__also{margin:22px auto 0;max-width:62ch;font-size:.9rem;line-height:1.6;color:var(--muted)}
.cover__also a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.prose pre{margin:14px 0 18px;padding:16px 18px;border-radius:14px;background:var(--ink);color:#F4F1EC;font-size:.8rem;line-height:1.65;overflow-x:auto;white-space:pre}
.prose pre code{background:none;padding:0;color:inherit;font-size:inherit}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.86em;background:var(--card);border:1px solid var(--line);border-radius:6px;padding:1px 6px;word-break:break-word}
.prose table{width:100%;border-collapse:collapse;margin:12px 0 20px;font-size:.88rem}
.prose th,.prose td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.prose th{font-weight:600;color:var(--ink);background:var(--card)}
.prose .tbl{overflow-x:auto}