/* Honeypot landing page. Clean and dark, structured after Finmax. Honey is a light touch: amber accent, glow, hex icons. */
:root {
  --bg: #0A0A0C;
  --s1: #121215;                       /* cards */
  --s2: #1A1A1E;                       /* inner panels */
  --s3: #242429;                       /* chips, inactive */
  --line: rgba(255, 255, 255, .07);
  --line-2: rgba(255, 255, 255, .13);
  --text: #F5F5F7;
  --text-2: #A1A1AA;                   /* ~7.6:1 on bg */
  --text-3: #7A7A82;                   /* ~4.7:1 on bg */
  --amber: #FAAB1C;
  --amber-hi: #FFC24D;
  --amber-deep: #E8890B;
  --cream: #FFEBC8;                    /* the light end of the hero fade */
  --display: "Rubik", system-ui, sans-serif;
  --body: "Instrument Sans", system-ui, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --pop: cubic-bezier(.3, 1.4, .5, 1);
  --max: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 17px/1.5 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ol, ul { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--amber); color: var(--bg); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 10px; }

.skip { position: absolute; left: 16px; top: -64px; z-index: 50; background: var(--amber); color: var(--bg); padding: 10px 16px; border-radius: 10px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- type ---------- */
.display { font: 600 clamp(42px, 5.6vw, 80px)/1.02 var(--display); letter-spacing: -0.035em; text-wrap: balance; }
.title { font: 600 clamp(32px, 3.8vw, 52px)/1.06 var(--display); letter-spacing: -0.03em; text-wrap: balance; }
.title--lg { font-size: clamp(36px, 4.6vw, 64px); }
.sub { color: var(--text-2); font-size: clamp(16px, 1.3vw, 18px); line-height: 1.5; text-wrap: balance; }
.lede { max-width: 38rem; color: var(--text-2); font-size: clamp(17px, 1.35vw, 19px); line-height: 1.55; text-wrap: pretty; }
.muted { color: var(--text-3); }

/* ---------- buttons: rounded. Orange ones are full of honey; on hover it drains out and drips off the bottom, leaving a honey outline.
   Grey ones fill up with a rolling white wave on hover. ---------- */
.btn {
  --wave: var(--amber);
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px; border: 0; border-radius: 14px;
  background: #1A1206; color: #1A1206; font: 600 16px var(--display); text-decoration: none; cursor: pointer;
  box-shadow: inset 0 0 0 1.5px var(--amber), 0 10px 30px -14px rgba(250,171,28,.7);
  transition: color .3s ease .25s, transform .12s ease, box-shadow .3s ease;
}
.btn--ghost { --wave: #F5F5F7; background: var(--s2); color: var(--text); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.16); transition-delay: 0s; }
/* the honey: a block with a rolling sine-wave surface; full in orange buttons, empty in grey ones */
.btn__honey { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none; }
.btn__honey::before {
  content: ""; position: absolute; left: 0; top: -30%; width: calc(100% + 80px); height: 170%; background: var(--wave);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 16'%3E%3Cpath d='M0 9C10 3 30 3 40 9S70 15 80 9V15H0Z'/%3E%3C/svg%3E") 0 0 / 80px 16px repeat-x, linear-gradient(#000, #000) 0 14px / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 16'%3E%3Cpath d='M0 9C10 3 30 3 40 9S70 15 80 9V15H0Z'/%3E%3C/svg%3E") 0 0 / 80px 16px repeat-x, linear-gradient(#000, #000) 0 14px / 100% 100% no-repeat;
  transition: top .8s cubic-bezier(.45, 0, .3, 1);
}
.btn--ghost .btn__honey::before { top: 108%; }
@keyframes wave-roll { to { transform: translateX(-80px); } }
/* orange: the honey drains out of the bottom, the text turns white once the level drops past it */
.btn:hover .btn__honey::before, .btn:focus-visible .btn__honey::before { top: 108%; animation: wave-roll 1.3s linear infinite; }
/* orange buttons: the honey drains down and settles in the bottom of the button with a small slosh,
   then floats there, its surface rolling and bobbing a couple of pixels. The text turns white as it passes */
.btn:not(.btn--ghost):hover .btn__honey::before, .btn:not(.btn--ghost):focus-visible .btn__honey::before {
  top: 70%; transition: top 1.6s cubic-bezier(.35, 0, .2, 1.2);
  animation: wave-roll 2.6s linear infinite, honey-bob 2.4s ease-in-out 1.4s infinite;
}
@keyframes honey-bob { 50% { translate: 0 -2px; } }
.btn:not(.btn--ghost):hover, .btn:not(.btn--ghost):focus-visible { transition-delay: .5s, 0s, 0s; }
.btn:hover, .btn:focus-visible { color: var(--text); box-shadow: inset 0 0 0 1.5px var(--amber), 0 14px 36px -14px rgba(250,171,28,.6); }
/* grey: a white wave rises and fills it */
.btn--ghost:hover .btn__honey::before, .btn--ghost:focus-visible .btn__honey::before { top: -30%; }
.btn--ghost:hover, .btn--ghost:focus-visible { color: #0A0A0C; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4), 0 14px 36px -16px rgba(255,255,255,.35); }
.btn:active { transform: scale(.97); }
.btn__clip { display: block; line-height: 1.25; }
.btn--lg { min-height: 56px; padding: 0 30px; font-size: 17px; border-radius: 16px; }
.btn--nav { min-height: 42px; padding: 0 20px; font-size: 15px; border-radius: 12px; }
.btn--block { width: 100%; }
.ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 6px; }

/* ---------- small parts ---------- */
.hexi {
  display: inline-grid; place-items: center; flex: none; width: 24px; height: 21px;
  background: var(--amber); color: var(--bg); font: 700 13px/1 var(--display);
  -webkit-mask: url("assets/honeypot-cell.svg") center / contain no-repeat; mask: url("assets/honeypot-cell.svg") center / contain no-repeat;
}
.hexi--lg { width: 46px; height: 41px; font-size: 16px; }
.av { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--s3); color: var(--text); font: 600 13px/1 var(--display); font-style: normal; }
.tag { display: inline-flex; justify-self: start; padding: 4px 10px; border-radius: 999px; background: rgba(250,171,28,.14); color: var(--amber); font-size: 12px; font-weight: 600; }
.tag--new { background: var(--amber); color: var(--bg); }
.tag--muted { background: var(--s3); color: var(--text-2); }
.thumb { display: block; width: 34px; height: 42px; flex: none; border-radius: 8px; background: radial-gradient(90% 60% at 70% 20%, rgba(250,171,28,.7), transparent 65%), #222226; }
.thumb--b { background: linear-gradient(160deg, var(--amber-hi), var(--amber-deep)); }
.thumb--lg { width: 64px; height: 80px; border-radius: 12px; }
.pill {
  position: relative; display: grid; place-items: center; min-height: 46px; padding: 0 20px; border-radius: 14px;
  background: var(--s2); color: var(--text); font: 600 15px/1 var(--display); box-shadow: inset 0 0 0 1px var(--line-2);
}
.pill--yes { background: var(--amber); color: var(--bg); box-shadow: 0 10px 26px -12px rgba(250,171,28,.7); }
.pill--sm { min-height: 40px; font-size: 14px; }
.pill__label, .pill__done { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 6px; }
.pill__done { opacity: 0; }

/* ---------- brand ---------- */
.brand { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.mark { width: 34px; height: 34px; flex: none; overflow: visible; }
.mark use { transform-box: fill-box; transform-origin: center; }
.brand__word { width: 104px; }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 30; background: rgba(10,10,12,.72); backdrop-filter: saturate(160%) blur(20px); -webkit-backdrop-filter: saturate(160%) blur(20px); border-bottom: 1px solid var(--line); }
.nav__inner { max-width: var(--max); margin: 0 auto; height: 72px; padding: 0 24px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.nav__links { display: flex; gap: 36px; }
.nav__links a { position: relative; color: var(--text-2); font-size: 15px; text-decoration: none; transition: color .2s; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: var(--amber); transform: scaleX(0); transition: transform .3s var(--ease); }
.nav__links a:hover { color: var(--text); }
.nav__links a:hover::after { transform: scaleX(1); }
.nav .btn { justify-self: end; }
/* Client login (2026-11-13): clients sign in to the app at honeypot.media */
.nav__end { justify-self: end; display: flex; align-items: center; gap: 22px; }
.nav__login { color: var(--text-2); font-size: 15px; text-decoration: none; transition: color .2s; white-space: nowrap; }
.nav__login:hover { color: var(--text); }

/* ================= HERO ================= */
.hero { position: relative; overflow: hidden; isolation: isolate; min-height: min(calc(100svh - 72px), 1160px); padding: clamp(32px, 5.5vh, 80px) 0 clamp(84px, 14vh, 170px); text-align: center; display: flex; flex-direction: column; }
.hero .display { font-size: clamp(40px, min(5.4vw, 7.6vh), 80px); }
.hero .lede { text-shadow: 0 1px 14px rgba(0,0,0,.7); }

/* backlit honeycomb: the video in the bottom half of the hero, the still image above the footer */
.horizon { position: absolute; left: 50%; width: min(100%, 2400px); translate: -50% 0; z-index: -1; pointer-events: none; overflow: hidden; mix-blend-mode: lighten; }
.horizon video, .horizon img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
/* the hero honeycomb is sized from the video card, not the window, so it keeps the same framing
   on any screen and never blows up when the browser is fullscreen or very wide */
.hero .horizon { top: calc(var(--v) * -.16); height: calc(var(--v) * .9); width: calc(var(--v) * 2.4); -webkit-mask: linear-gradient(to bottom, transparent 0%, #000 24%, #000 86%, transparent 100%), linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); -webkit-mask-composite: source-in; mask: linear-gradient(to bottom, transparent 0%, #000 24%, #000 86%, transparent 100%), linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); mask-composite: intersect; }
.hero .horizon video { object-position: 50% 72%; }
/* hero-fit.js slides the honeycomb down so its fade ends at the bottom of the first screen */
.hero .horizon { translate: -50% var(--hz-shift, 0px); }
.hero h1 { text-shadow: 0 2px 28px rgba(10, 10, 12, .7); }
/* soft shade behind the headline, so the copy stays readable when the honey is brightest */
.hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(62% 44% at 50% 20%, rgba(10,10,12,.8), rgba(10,10,12,.42) 55%, transparent 80%); }
.horizon--close { bottom: 0; height: clamp(320px, 36vw, 540px); -webkit-mask: linear-gradient(to bottom, transparent 0%, #000 38%, #000 72%, transparent 100%); mask: linear-gradient(to bottom, transparent 0%, #000 38%, #000 72%, transparent 100%); }
.horizon--close img { object-position: 50% 58%; scale: 1.12; transform-origin: 50% 32%; } /* a touch larger; grows from the comb's top edge so it still starts under the text */
/* zoomed out or very wide screens: the honeycomb stops growing at 2400px and its sides fade into the page */
@media (min-width: 2400px) {
  .horizon--close { -webkit-mask: linear-gradient(to bottom, transparent 0%, #000 38%, #000 72%, transparent 100%), linear-gradient(to right, transparent, #000 14%, #000 86%, transparent); -webkit-mask-composite: source-in; mask: linear-gradient(to bottom, transparent 0%, #000 38%, #000 72%, transparent 100%), linear-gradient(to right, transparent, #000 14%, #000 86%, transparent); mask-composite: intersect; }
}
.hero__copy { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 0 24px; display: grid; justify-items: center; gap: 22px; }

.stage { --v: clamp(400px, min(64vw, calc((100svh - 580px) * 1.85)), 940px); position: relative; height: calc(var(--v) * .5625 + 16px); margin-top: clamp(28px, 4.5vh, 56px); }
/* VSL: the video sits fully visible in the honey glow; the fade to cream happens below it */
.vsl {
  position: absolute; left: 50%; top: 0; z-index: 3; width: var(--v); translate: -50% 0; container-type: inline-size;
  padding: 8px; border-radius: 28px;
  background: rgba(22, 22, 26, .7); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 50px 120px -30px rgba(0,0,0,.7);
}
.vsl__poster {
  position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 21px;
  background:
    radial-gradient(60% 80% at 75% 20%, rgba(250,171,28,.38), transparent 65%),
    radial-gradient(50% 60% at 15% 100%, rgba(250,171,28,.16), transparent 70%),
    linear-gradient(160deg, #222227, #0c0c0e 70%);
}
.vsl__brand { position: absolute; top: 20px; left: 22px; display: inline-flex; align-items: center; gap: 6px; font: 700 15px/1 var(--display); color: var(--text); }
.vsl__brand .mark { width: 26px; height: 26px; }
.vsl__mark { --t: 1.1s; } /* waits for the video card to rise in */
.vsl__brand .vsl__word { width: 78px; height: auto; }
/* play button: a honeycomb cell with a soft halo cell around it; on hover the cell turns a sixth while the arrow stays put */
.vsl__play {
  position: relative; isolation: isolate; display: grid; place-items: center; width: 96px; height: 83px; padding: 0 0 0 4px; border: 0;
  background: none; color: #1A1206; cursor: pointer; filter: drop-shadow(0 18px 28px rgba(250,171,28,.45));
  transition: transform .3s var(--ease);
}
.vsl__hex { position: absolute; inset: -12px -14px; z-index: -1; width: calc(100% + 28px); height: calc(100% + 24px); overflow: visible; transition: rotate .5s var(--ease); }
.vsl__halo { fill: rgba(250, 171, 28, .2); }
.vsl__core { fill: var(--amber); }
.vsl__play:hover { transform: scale(1.06); }
.vsl__play:hover .vsl__hex { rotate: 60deg; }
.vsl__title { position: absolute; left: 24px; bottom: 22px; text-align: left; }
.vsl__title b { display: block; font: 600 clamp(17px, 1.6vw, 22px)/1.2 var(--display); letter-spacing: -0.01em; }
.vsl__title span { display: block; margin-top: 4px; color: var(--text-2); font-size: 14px; }
/* the video fills the poster box; a scrim keeps the brand, play button and title readable over the poster frame.
   Playing: the overlay fades out, the native controls take over, and the player sits above the floating hero cards */
.vsl__video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; background: #0A0A0C; border-radius: inherit; }
.vsl__poster::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(10,10,12,.4), rgba(10,10,12,.08) 22%, rgba(10,10,12,.08) 62%, rgba(10,10,12,.72)); transition: opacity .35s var(--ease); }
.vsl__brand, .vsl__title { z-index: 2; }
.vsl__play { z-index: 2; }
.vsl__brand, .vsl__play, .vsl__title { transition: opacity .35s var(--ease), visibility .35s, transform .3s var(--ease); }
.vsl.is-playing { z-index: 6; }
.vsl.is-playing .vsl__video { z-index: 3; }
.vsl.is-playing .vsl__poster::after, .vsl.is-playing .vsl__brand, .vsl.is-playing .vsl__play, .vsl.is-playing .vsl__title { opacity: 0; visibility: hidden; pointer-events: none; }
/* VSL open (vsl.js puts .vsl-on on the hero; .vsl-seen stays after the first play so closing animates too):
   the video grows a little and shoves both sides out. On the left, the white cell slides in, pushing the orange cell up
   and the grey one down, into a column along the video. On the right, the cards fold down to their icon cells, the same
   size, in a matching column; each lights up when the video reaches its step (the left cells light on theirs too) */
.hero.vsl-seen .vsl { transition: scale .6s cubic-bezier(.3, 1.3, .5, 1); }
.hero.vsl-seen .hexc { transition: left .7s cubic-bezier(.3, 1.25, .5, 1), scale .6s var(--ease); }
.hero.vsl-seen .hexc > .hexm { transition: left .55s cubic-bezier(.3, 1.3, .5, 1), top .5s cubic-bezier(.3, 1.45, .5, 1), filter .45s, scale .45s cubic-bezier(.3, 1.6, .5, 1); }
.hero.vsl-seen .flow { transition: left .7s cubic-bezier(.3, 1.25, .5, 1), scale .6s var(--ease); }
.hero.vsl-seen .flow__card { transition: background .35s, box-shadow .35s; }
.hero.vsl-seen .flow__card::before, .hero.vsl-seen .flow__card::after, .hero.vsl-seen .flow__card > :not(.hxa) { transition: opacity .3s var(--ease); }
.hero.vsl-seen .flow__line { transition: opacity .3s var(--ease); }
.hero.vsl-seen .flow .hxa { transition: left .5s var(--ease), top .5s var(--ease), translate .5s var(--ease), width .5s var(--ease), height .5s var(--ease), filter .45s, scale .45s cubic-bezier(.3, 1.6, .5, 1); }
.hero.vsl-seen .flow .hxa :is(b, .hxa__icon) { transition: font-size .5s var(--ease), width .5s var(--ease), height .5s var(--ease); }
@media (min-width: 1101px) { .hero.vsl-on .vsl { scale: 1.08; } }
/* both stacks: cells 22px apart, scaled by --stack (vsl.js sets it from the video's height) so they always fit beside it,
   18px off the video's edge at any scale */
.hero.vsl-on .hexc { left: calc(50% - var(--v) * .54 - 236px + 34px * var(--stack, 1)); scale: var(--stack, 1); }
.hero.vsl-on .hexc > .hexm:nth-child(2) { left: 64px; top: 56px; }
.hero.vsl-on .hexc > .hexm:nth-child(1) { left: 64px; top: -70px; transition-delay: .22s, .06s, 0s, 0s; }
.hero.vsl-on .hexc > .hexm:nth-child(3) { left: 64px; top: 182px; transition-delay: .22s, .06s, 0s, 0s; }
.hero.vsl-on .flow { left: calc(50% + var(--v) * .54 + 18px); scale: var(--stack, 1); transform-origin: 0 50%; }
.hero.vsl-on .flow__card { height: 104px; padding: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.hero.vsl-on .flow__card::before, .hero.vsl-on .flow__card::after, .hero.vsl-on .flow__card > :not(.hxa) { opacity: 0; }
.hero.vsl-on .flow__line { flex: none; height: 22px; min-height: 22px; max-height: 22px; opacity: 0; }
.hero.vsl-on .flow .hxa { left: 0; top: 0; translate: 0 0; width: 120px; height: 104px; filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .55)) grayscale(.7) brightness(.55); scale: .96; }
.hero.vsl-on .flow .hxa b { font-size: 38px; }
.hero.vsl-on .flow .hxa .hxa__icon { width: 32px; height: 32px; }
.hero.vsl-on .flow__card.is-lit .hxa { filter: drop-shadow(0 0 22px rgba(250, 171, 28, .75)) drop-shadow(0 18px 26px rgba(0, 0, 0, .55)); scale: 1.05; }
.hero.vsl-on .hexc > .hexm { filter: drop-shadow(0 0 22px rgba(250, 171, 28, .6)) drop-shadow(0 18px 26px rgba(0, 0, 0, .55)); }
.hero.vsl-on .hexc > .hexm.is-lit { filter: drop-shadow(0 0 26px rgba(250, 171, 28, .85)) drop-shadow(0 18px 26px rgba(0, 0, 0, .55)); scale: 1.05; }
/* the calls to action sit under the video */
.ctas--hero { position: relative; z-index: 4; margin-top: clamp(26px, 4vh, 44px); }

/* floating glass cards around the video */
.float-card {
  position: absolute; z-index: 4; text-align: left;
  background: rgba(30, 30, 34, .74); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 30px 60px -24px rgba(0,0,0,.8);
  backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
}
/* honeycomb cluster on the left: an orange, a white and a grey cell locked together like comb */
.hexc { position: absolute; z-index: 4; left: calc(50% - var(--v) / 2 - 200px); top: calc(50% - 108px); width: 218px; height: 216px; scale: 1.15; transform-origin: 100% 50%; }
.hexm { position: absolute; isolation: isolate; width: 120px; height: 104px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-align: center; line-height: 1.05; filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .55)); }
/* a touch bigger next to the larger video on big screens */
@media (min-width: 1600px) and (min-height: 960px) { .hexc { scale: 1.4; } .flow { scale: 1.12; transform-origin: 0 50%; } }
.hexc > .hexm:nth-child(1) { left: 0; top: 0; }
.hexc > .hexm:nth-child(2) { left: 98px; top: 56px; }
.hexc > .hexm:nth-child(3) { left: 0; top: 112px; }
.hexm__bg { position: absolute; left: -8px; top: -8px; width: 136px; height: 120px; z-index: -1; overflow: visible; }
.hexm b { font: 700 26px/1 var(--display); letter-spacing: -0.03em; }
.hexm small { font-size: 10.5px; font-weight: 600; }
.hexm--orange { color: #1A1206; }
.hexm--orange .hexm__fill { fill: url(#hx-honey); }
.hexm__icon { color: #1A1206; }
.hexm--white { color: #0A0A0C; }
.hexm--white b { font-size: 32px; }
.hexm--white small { color: #4A4A52; }
.hexm--white .hexm__fill { fill: url(#hx-white); }
.hexm--grey b { font-size: 30px; color: var(--amber); }
.hexm--grey small { color: var(--text-2); }
.hexm--grey .hexm__fill { fill: url(#hx-grey); }
/* right side: glass cards with a hexagon docked on the left edge, three steps spread evenly down the VSL */
/* liquid glass: clear and lightly frosted, a bright specular rim that catches light top-left and bottom-right,
   light pooling inside the edges, and a soft sheen across the top. Only the cards; the hexagons stay solid */
.hcard {
  position: absolute; z-index: 4; margin: 0; text-align: left;
  background: linear-gradient(160deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .05) 34%, rgba(255, 255, 255, .015) 62%, rgba(255, 255, 255, .07)), rgba(16, 16, 20, .26);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5), inset 1px 0 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(255, 255, 255, .12),
    inset 12px 14px 22px -16px rgba(255, 255, 255, .34), inset -14px -16px 24px -18px rgba(255, 255, 255, .2),
    0 30px 60px -24px rgba(0, 0, 0, .75), 0 10px 22px -12px rgba(0, 0, 0, .45);
  backdrop-filter: blur(18px) saturate(115%) brightness(1.03); -webkit-backdrop-filter: blur(18px) saturate(115%) brightness(1.03);
}
/* the rim: a thin edge that's bright where the light hits and fades out along the sides */
.flow__card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .2) 20%, rgba(255, 255, 255, .04) 42%, rgba(255, 255, 255, .04) 60%, rgba(255, 255, 255, .22) 82%, rgba(255, 255, 255, .6));
  -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 exclude, linear-gradient(#000 0 0);
}
/* the sheen: a highlight over the top left, a faint diagonal streak, and light bouncing up from the bottom right */
.flow__card::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(90% 65% at 14% -14%, rgba(255, 255, 255, .24), transparent 60%),
    linear-gradient(112deg, transparent 40%, rgba(255, 255, 255, .055) 47%, transparent 55%),
    radial-gradient(70% 55% at 96% 118%, rgba(255, 255, 255, .1), transparent 62%);
}
.flow { position: absolute; z-index: 4; left: calc(50% + var(--v) / 2 - clamp(40px, var(--v) * .12, 96px)); top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; align-items: stretch; width: max-content; }
/* shorter screens have a shorter video: drop the small note line, then tighten the cards, so all three steps fit beside it */
@media (max-height: 960px) { .flow .hcard__note { display: none; } }
@media (max-height: 800px) { .flow__card { padding: 10px 16px 10px 44px; } .hcard__pool { margin-top: 9px; } .flow__ink { padding: 10px 16px 10px 44px; } .flow .hcard__big { margin-top: 6px; font-size: 24px; } .flow .hcard__quote { margin-top: 5px; font-size: 17px; } .flow .hxa { left: -26px; width: 52px; height: 45px; } }
.flow__card { position: relative; flex: none; min-width: 236px; padding: 14px 20px 14px 46px; border-radius: 20px; }
/* the gap between steps: honey drips off the bottom of one card onto the next, then off the last card and away */
.flow__line { position: relative; z-index: -1; display: block; flex: 1; min-height: 18px; max-height: 40px; width: 2px; align-self: flex-start; margin-left: 40px; }
.flow__card { isolation: isolate; }
/* the honey: each card fills all the way up with honey, one card after another, its surface rolling as it rises.
   A dark copy of the card's text rides inside the honey, held still by moving
   opposite to it, so the text is orange and white on the glass and turns dark exactly where the honey covers it */
.flow .hcard__quote, .flow .hcard__big { margin-top: 0; }
.flow__honey { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.flow__body { position: absolute; inset: 0; background: linear-gradient(#FFCB2F, #F6AE17); clip-path: inset(100% 0 0 0); } /* empty until the pour starts */
.flow__ink { position: absolute; inset: 0; padding: 14px 20px 14px 46px; }
.flow .flow__ink b, .flow .flow__ink small, .flow .flow__ink .hcard__head { color: #1A1206; }
.flow .flow__ink .hcard__note { color: rgba(26, 18, 6, .72); }
@keyframes ink-bob { 50% { translate: 0 2px; } }
/* the cards' honey surface is an uneven 240px wave (not a perfect repeat), so one roll moves a whole 240px */
@keyframes pool-roll { to { -webkit-mask-position: -240px 0, 0 14px; mask-position: -240px 0, 0 14px; } }
/* the text: orange and white on the glass, dark once the honey covers it (via the copy above) */
.hcard__pool { display: block; margin-top: 12px; }
.flow .hcard__head { display: block; color: var(--text); font-weight: 600; }
.flow .hcard__note { margin-top: 3px; color: rgba(245, 245, 247, .82); }
.flow__card::before { z-index: 1; }
.flow .hxa { z-index: 2; }
.hcard__quote { display: block; margin-top: 7px; color: var(--amber); font: 700 20px/1 var(--display); letter-spacing: -0.01em; }
.hxa { position: absolute; left: -30px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 62px; height: 54px; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .5)); }
.hxa svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; fill: url(#hx-honey); }
.hxa b { position: relative; font: 700 22px/1 var(--display); color: #1A1206; }
.hxa--white svg:first-child { fill: url(#hx-white); }
.hxa--grey svg:first-child { fill: url(#hx-grey); } /* same grey as the left cell */
.hxa--grey .hxa__icon { color: var(--amber); }
.hxa__icon { position: relative; color: #0A0A0C; }
.hcard__head { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 13px; font-weight: 500; }
.hcard__big { display: block; margin-top: 8px; color: var(--amber); font: 700 30px/1 var(--display); letter-spacing: -0.03em; white-space: nowrap; }
.hcard__big small { font-size: 14px; font-weight: 600; color: var(--text); letter-spacing: 0; }
.hcard__note { display: block; margin-top: 8px; color: rgba(245, 245, 247, .82); font-size: 12px; white-space: nowrap; }

/* ================= SECTIONS ================= */
.section { position: relative; max-width: var(--max); margin: 0 auto; padding: clamp(80px, 10vw, 128px) 24px 0; }
.section--flush { max-width: none; padding-left: 0; padding-right: 0; }
.head { display: grid; justify-items: center; gap: 16px; max-width: 760px; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; }

/* features bento */
.bento { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tile {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  min-height: 460px; padding: 36px 36px 0; border-radius: 28px;
  background: var(--s1); box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow .3s ease, transform .3s var(--ease);
}
.tile:hover { box-shadow: inset 0 0 0 1px var(--line-2); transform: translateY(-3px); }
.tile__title { font: 600 clamp(22px, 2vw, 28px)/1.15 var(--display); letter-spacing: -0.02em; }
.tile__sub { margin-top: 10px; color: var(--text-2); font-size: 15.5px; max-width: 34em; }
.tile--wide { grid-column: 1 / -1; min-height: 0; flex-direction: row; align-items: center; gap: 40px; padding: 48px 0 0 48px; }
.tile__copy { flex: 0 0 34%; align-self: center; padding-bottom: 48px; }
.mock { flex: 1; display: flex; align-items: flex-end; justify-content: center; margin-top: 32px; }

.mock--content { gap: 14px; }
.mini-reel, .mini-carousel { border-radius: 18px 18px 0 0; background: var(--s2); box-shadow: inset 0 0 0 1px var(--line); }
.mini-reel {
  position: relative; width: 44%; height: 250px; overflow: hidden;
  background: radial-gradient(120% 70% at 75% 15%, rgba(250,171,28,.45), transparent 60%), linear-gradient(170deg, #2a2a30, #0c0c0e 75%);
}
.mini-reel__tag, .mini-carousel__tag { position: absolute; top: 14px; left: 14px; font: 600 12px/1 var(--display); color: var(--text-2); }
.mini-reel__tag { color: #fff; }
.mini-reel__t { position: absolute; left: 16px; right: 16px; bottom: 20px; height: 1.1em; font: 700 22px/1 var(--display); letter-spacing: -0.02em; }
.mini-reel__t span { position: absolute; inset: 0; opacity: 0; }
.mini-carousel { position: relative; width: 48%; height: 210px; padding: 40px 14px 0; overflow: hidden; }
.mini-carousel__track { display: flex; gap: 8px; width: max-content; }
.mini-carousel__track i { width: 120px; height: 130px; border-radius: 12px; background: linear-gradient(160deg, var(--amber-hi), var(--amber-deep)); }
.mini-carousel__track i:nth-child(2) { background: radial-gradient(90% 60% at 70% 20%, rgba(250,171,28,.6), transparent 65%), #26262b; }
.mini-carousel__track i:nth-child(3) { background: #2e2e34; }
.dots { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 5px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--s3); }

.dm { width: min(100%, 360px); padding: 22px 20px 26px; border-radius: 20px 20px 0 0; background: var(--s2); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 10px; font-size: 14px; }
.dm__comment { justify-self: start; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: var(--s3); }
.dm__comment b { font-weight: 600; margin-right: 6px; color: var(--text-2); }
.dm__typing { justify-self: end; display: flex; gap: 4px; padding: 12px 14px; border-radius: 16px 16px 4px 16px; background: rgba(250,171,28,.16); }
.dm__typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }
.dm__reply { justify-self: end; max-width: 85%; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: var(--amber); color: var(--bg); line-height: 1.4; }
.dm__link { justify-self: end; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(250,171,28,.5); color: var(--amber); font-weight: 600; font-size: 13px; }

.mock--log { margin-top: 0; justify-content: flex-end; }
.log { width: 100%; padding: 8px 0 0; border-radius: 20px 0 0 0; background: var(--s2); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; }
.log__head, .log__row { display: grid; grid-template-columns: 1.3fr 1fr 1fr .8fr; align-items: center; gap: 12px; padding: 12px 24px; }
.log__head { color: var(--text-3); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.log__row { border-top: 1px solid var(--line); color: var(--text-2); }
.log__row span:first-child { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-weight: 500; }
.log__row .av { width: 28px; height: 28px; font-size: 12px; }

/* stats */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.stat { padding: 28px 30px 32px; border-radius: 24px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .3s ease; }
.stat:hover { box-shadow: inset 0 0 0 1px rgba(250,171,28,.35); }
.stat__label { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border-radius: 999px; background: var(--s2); font-size: 14px; font-weight: 500; }
.stat__num { display: flex; align-items: flex-start; margin: 26px 0 14px; font: 600 clamp(56px, 6vw, 80px)/1 var(--display); letter-spacing: -0.04em; }
.stat__num sup { font-size: .5em; line-height: 1; margin-left: 2px; color: var(--amber); }
.stat p { color: var(--text-2); font-size: 15px; max-width: 22em; }
.odo { display: inline-block; height: 1em; overflow: hidden; }
/* the digit window fades at its top and bottom edges, so rolling digits slide in and out softly instead of being sliced */
.odo { -webkit-mask: linear-gradient(transparent, #000 14%, #000 86%, transparent); mask: linear-gradient(transparent, #000 14%, #000 86%, transparent); }
.odo__s { display: block; transform: translateY(calc((10 + var(--n)) * -1em)); } /* two runs of 0 to 9: it spins one full turn into place */
.odo__s i { display: block; height: 1em; font-style: normal; }

/* split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 88px); align-items: center; }
.split__visual { padding: 40px; border-radius: 28px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); }
.stack { display: grid; gap: 12px; }
.stack__card { padding: 18px; border-radius: 18px; background: var(--s2); box-shadow: inset 0 0 0 1px var(--line); transition: transform .35s var(--ease); }
.split__visual:hover .stack__card:nth-child(1) { transform: translateY(-4px) rotate(-1deg); }
.split__visual:hover .stack__card:nth-child(2) { transform: translateX(6px); }
.stack__label { color: var(--text-2); font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.stack__post { display: flex; gap: 14px; }
.stack__cap { display: block; margin-top: 8px; color: var(--text-2); font-size: 13px; }
.stack__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.stack__card--note { display: flex; align-items: center; gap: 14px; }
.stack__card--row { display: flex; justify-content: space-between; align-items: center; color: var(--text-2); font-size: 14px; }
.stack__count { color: var(--text-3); }
.stack__count b { display: inline; color: var(--amber); font-size: 20px; }
.split__copy { display: grid; gap: 20px; justify-items: start; }
.points { display: grid; margin: 8px 0 12px; }
.points li { display: flex; gap: 18px; padding: 22px 0; border-top: 1px solid var(--line); }
.points li:first-child { border-top: 0; padding-top: 4px; }
.points h3 { font: 600 19px/1.2 var(--display); margin-bottom: 6px; }
.points p { color: var(--text-2); font-size: 15.5px; }

/* ticker */
.ticker { padding: clamp(80px, 10vw, 128px) 0 0; overflow: hidden; text-align: center; }
.ticker__label { color: var(--text-3); font-size: 14px; margin-bottom: 22px; }
.ticker__wrap { -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.ticker__track { display: flex; width: max-content; }
.ticker__list { display: flex; gap: 12px; padding-right: 12px; }
.ticker__list li { display: inline-flex; align-items: center; gap: 10px; padding: 18px 28px; border-radius: 16px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); font: 600 18px/1 var(--display); color: var(--text-2); white-space: nowrap; }
.ticker__list li::before { content: ""; width: 14px; height: 12px; background: url("assets/honeypot-cell.svg") center / contain no-repeat; }

/* how it works */
.how { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px); align-items: stretch; }
.how__copy { display: grid; gap: 18px; align-content: start; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.steps li { display: grid; gap: 6px; justify-items: start; align-content: start; padding: 20px; border-radius: 20px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .3s ease, transform .3s var(--ease); }
.steps li:hover { box-shadow: inset 0 0 0 1px rgba(250,171,28,.35); transform: translateY(-3px); }
.steps li:hover .hexi { animation: wiggle .5s var(--ease); }
.steps .hexi { margin-bottom: 8px; }
.steps b { font: 600 17px/1.2 var(--display); }
.steps small { color: var(--text-2); font-size: 13.5px; line-height: 1.4; }
.how__visual {
  position: relative; overflow: hidden; min-height: 460px; border-radius: 28px;
  background: radial-gradient(90% 70% at 50% 110%, rgba(250,171,28,.55), rgba(250,171,28,.12) 50%, transparent 75%), var(--s1);
  box-shadow: inset 0 0 0 1px var(--line);
}
.week { position: absolute; left: 28px; right: 28px; top: 36px; padding: 18px; border-radius: 20px; background: rgba(26,26,30,.85); box-shadow: inset 0 0 0 1px var(--line-2); backdrop-filter: blur(12px); }
.week__head { display: flex; justify-content: space-between; margin-bottom: 14px; font-size: 14px; }
.week__head span { color: var(--amber); font-weight: 600; }
.week__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.week__grid span { display: grid; gap: 6px; justify-items: center; }
.week__grid small { color: var(--text-3); font-size: 11px; }
.week__grid i { width: 100%; height: 64px; border-radius: 10px; background: var(--s3); }
.week__grid .w-reel { background: radial-gradient(90% 60% at 70% 20%, rgba(250,171,28,.6), transparent 65%), #26262b; }
.week__grid .w-car { background: linear-gradient(160deg, var(--amber-hi), var(--amber-deep)); }
.week__grid .w-story { background: #33333a; }
.week__grid .is-best { box-shadow: 0 0 0 2px var(--amber); }
.float-card { display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; border-radius: 16px; white-space: nowrap; }
.float-card--trend { left: 28px; bottom: 120px; }
.float-card--time { right: 28px; bottom: 44px; }

/* testimonials: three cards, amber accents */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.quote {
  position: relative; display: flex; flex-direction: column; gap: 22px; margin: 0; padding: 30px 28px 24px; border-radius: 24px; overflow: hidden;
  background: radial-gradient(90% 60% at 0% 0%, rgba(250,171,28,.14), transparent 60%), var(--s1);
  box-shadow: inset 0 0 0 1px rgba(250,171,28,.22);
  transition: box-shadow .3s ease, transform .3s var(--ease);
}
.quote::before { content: ""; position: absolute; left: 28px; right: 28px; top: 0; height: 2px; border-radius: 0 0 2px 2px; background: linear-gradient(90deg, var(--amber), transparent); }
.quote:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(250,171,28,.5), 0 30px 60px -36px rgba(250,171,28,.45); }
.quote__mark { width: 30px; height: 23px; color: var(--amber); }
.quote blockquote { flex: 1; margin: 0; color: var(--text); font-size: 17px; line-height: 1.55; text-wrap: pretty; }
.quote figcaption { display: flex; align-items: center; gap: 14px; padding-top: 20px; border-top: 1px solid var(--line); }
.quote__logo { display: grid; place-items: center; flex: none; width: 52px; height: 52px; padding: 9px; border-radius: 14px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-2); }
.quote__logo img { width: 100%; height: 100%; object-fit: contain; }
.quote figcaption b { display: block; font: 600 16px/1.2 var(--display); }
.quote figcaption small { display: block; margin-top: 3px; color: var(--amber); font-size: 13px; font-weight: 500; }
/* client name links to their site: name and arrow go amber on hover */
.quote__who { display: flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; border-radius: 14px; }
.quote__go { margin-left: 6px; vertical-align: -1px; color: var(--text-2); transition: color .2s ease, translate .2s ease; }
.quote__who b { transition: color .2s ease; }
.quote__who:hover b, .quote__who:focus-visible b, .quote__who:hover .quote__go, .quote__who:focus-visible .quote__go { color: var(--amber); }
.quote__who:hover .quote__go, .quote__who:focus-visible .quote__go { translate: 2px -2px; }
.quote__who:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }

/* pricing */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.plan { position: relative; display: grid; gap: 24px; padding: 14px 14px 22px; border-radius: 26px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); transition: rotate .4s var(--ease), translate .4s var(--ease), box-shadow .3s ease; }
.plan--l { rotate: -2deg; translate: 0 22px; }
.plan--r { rotate: 2deg; translate: 0 22px; }
.plan:hover { rotate: 0deg; translate: 0 0; box-shadow: inset 0 0 0 1px var(--line-2); }
.plan--pop { background: linear-gradient(180deg, rgba(250,171,28,.16), rgba(250,171,28,.03) 55%), var(--s1); box-shadow: inset 0 0 0 1px rgba(250,171,28,.45), 0 30px 80px -40px rgba(250,171,28,.5); }
.plan--pop:hover { box-shadow: inset 0 0 0 1px rgba(250,171,28,.7), 0 30px 80px -40px rgba(250,171,28,.6); }
.plan__badge { position: absolute; top: 34px; right: 30px; padding: 5px 11px; border-radius: 999px; background: var(--amber); color: var(--bg); font-size: 12px; font-weight: 600; }
.plan__top { padding: 22px 20px 24px; border-radius: 18px; background: var(--s2); box-shadow: inset 0 0 0 1px var(--line); }
.plan--pop .plan__top { background: rgba(10,10,12,.55); }
.plan__name { font: 700 15px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--amber); }
.plan__for { margin-top: 10px; color: var(--text-2); font-size: 15px; }
.plan__price { display: flex; align-items: baseline; gap: 6px; margin-top: 22px; }
.plan__price b { font: 600 46px/1 var(--display); letter-spacing: -0.035em; }
.plan__price span { color: var(--text-2); font-size: 15px; }
.plan__fine { margin-top: 8px; color: var(--text-3); font-size: 13.5px; }
.plan__list { display: grid; gap: 12px; padding: 0 8px; }
.plan__list li { display: flex; gap: 10px; color: var(--text-2); font-size: 15px; line-height: 1.4; }
.plan__list li::before { content: ""; flex: none; width: 16px; height: 14px; margin-top: 3px; background: url("assets/honeypot-cell.svg") center / contain no-repeat; }
.plan .btn { margin: 0 4px; width: auto; }


/* closing call to action over the honeycomb */
.close { position: relative; overflow: hidden; isolation: isolate; padding: clamp(110px, 12vw, 170px) 24px clamp(280px, 28vw, 400px); text-align: center; }
.close::before { content: ""; position: absolute; inset: auto 0 0; height: 70%; z-index: -2; pointer-events: none; background: radial-gradient(60% 70% at 50% 85%, rgba(250,171,28,.30), transparent 72%); }
.close__copy { position: relative; display: grid; justify-items: center; gap: 22px; max-width: 760px; margin: 0 auto; }
.close .title { max-width: 14ch; }
.close .sub { max-width: 34rem; }
.assure { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin-top: 4px; color: var(--text-2); font-size: 14.5px; }
.assure li { display: inline-flex; align-items: center; gap: 8px; }
.assure li::before { content: ""; width: 14px; height: 12px; flex: none; background: url("assets/honeypot-cell.svg") center / contain no-repeat; }

/* footer */
.foot { position: relative; overflow: hidden; border-top: 1px solid var(--line); }
.foot__inner { max-width: var(--max); margin: 0 auto; padding: 56px 24px 0; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.foot__brand { display: grid; gap: 14px; align-content: start; justify-items: start; color: var(--text-2); font-size: 15px; }
.foot__fine { color: var(--text-3); font-size: 13px; }
.foot__col { display: grid; gap: 12px; align-content: start; }
.foot__col h3 { font: 600 15px/1 var(--display); margin-bottom: 6px; }
.foot__col a { color: var(--text-2); font-size: 15px; text-decoration: none; transition: color .2s; }
.foot__col a:hover { color: var(--amber); }
.foot__giant {
  width: min(92vw, 1200px); margin: 48px auto -2.5vw;
  -webkit-mask: linear-gradient(to bottom, rgba(0,0,0,.22), transparent 85%); mask: linear-gradient(to bottom, rgba(0,0,0,.22), transparent 85%);
}

/* ================= MOTION: load, loops and hover only. Nothing is scroll-triggered. ================= */
.hero .load { animation: settle .9s var(--ease) both; }
.hero h1.load { animation-delay: .1s; }
.hero .lede.load { animation-delay: .25s; }
.hero .ctas.load { animation-delay: .4s; }
@keyframes settle { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* load-in: the cells and the white comb fly in from scattered spots, spin and snap into place */
.mark__cell, .mark__ring { animation: assemble .8s cubic-bezier(.2, .9, .3, 1.15) calc(var(--t, 0s) + var(--i) * .1s + .1s) both; }
.mk1 { --i: 0; --x: -30px; --y: 30px; --a: -120deg; }
.mk2 { --i: 1; --x: -34px; --y: -22px; --a: 90deg; }
.mk3 { --i: 2; --x: 0px; --y: 40px; --a: 120deg; }
.mk4 { --i: 3; --x: 34px; --y: 12px; --a: -90deg; }
.mk5 { --i: 4; --x: 30px; --y: -36px; --a: 180deg; }
@keyframes assemble { from { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--a)) scale(.5); } }
/* honey drips under the mark are SVG shape animations in the markup: the left cell drips on a loop, the middle cell drips once */
.hero .horizon { animation: dawn 1.2s var(--ease) both; }
@keyframes dawn { from { opacity: 0; } }

.vsl { animation: rise 1.1s var(--ease) .45s both; }
@keyframes rise { from { opacity: 0; transform: translateY(70px); } to { opacity: 1; transform: none; } }
.hexm { animation: hx-assemble .9s cubic-bezier(.2, .9, .3, 1.15) both, sway-l 3.6s ease-in-out -1.8s infinite alternate; }
.hexc > .hexm:nth-child(1) { --x: -70px; --y: -46px; --a: -120deg; }
.hexc > .hexm:nth-child(2) { --x: 64px; --y: -34px; --a: 90deg; }
.hexc > .hexm:nth-child(3) { --x: -56px; --y: 52px; --a: 120deg; }
.flow .hxa { animation: hx-assemble .8s cubic-bezier(.2, .9, .3, 1.15) 1.05s both; }
.flow__card:nth-child(1) .hxa { --x: -46px; --y: -30px; --a: -150deg; }
.flow__card:nth-child(3) .hxa { --x: -58px; --y: 12px; --a: 120deg; animation-delay: 1.4s; }
.flow__card:nth-child(5) .hxa { --x: -40px; --y: 40px; --a: -90deg; animation-delay: 1.75s; }
@keyframes hx-assemble { from { opacity: 0; transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--a, 0deg)) scale(.4); } }
/* the flow: each card pops in, then the line under it grows; the whole flow bobs as one */
/* the two sides sway as groups, in opposite directions: both start centred, then as the hexagons on the left rise the
   cards on the right sink, and back, alternating (translate only, so it doesn't fight the video's scale and position) */
.flow { animation: sway-r 3.6s ease-in-out -1.8s infinite alternate; }
@keyframes sway-l { from { translate: 0 10px; } to { translate: 0 -10px; } }
@keyframes sway-r { from { translate: 0 -10px; } to { translate: 0 10px; } }
.flow__card { animation: pop .7s var(--pop) .8s both; }
.flow__card:nth-child(3) { animation-delay: 1.15s; }
.flow__card:nth-child(5) { animation-delay: 1.5s; }
.hexc > .hexm:nth-child(1) { animation-delay: 1.1s, -1.8s; }
.hexc > .hexm:nth-child(2) { animation-delay: 1.22s, -1.8s; }
.hexc > .hexm:nth-child(3) { animation-delay: 1.34s, -1.8s; }
@keyframes pop { from { opacity: 0; transform: translateY(18px) scale(.85); } to { opacity: 1; transform: none; } }
@keyframes bob { 0%, 100% { transform: none; } 50% { transform: translateY(-9px); } }

@keyframes caption { 0% { opacity: 0; transform: translateY(10px); } 4%, 30% { opacity: 1; transform: none; } 34%, 100% { opacity: 0; transform: translateY(-6px); } }
.mini-reel__t span { animation: caption 9s infinite; }
.mini-reel__t span:nth-child(2) { animation-delay: 3s; }
.mini-reel__t span:nth-child(3) { animation-delay: 6s; }

/* approve click */
@keyframes tap { 0% { opacity: 0; transform: translate(90px, 70px); } 10% { opacity: 1; } 40% { transform: none; } 45% { transform: scale(.85); } 50% { transform: none; } 75% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: translate(60px, 50px); } }
@keyframes press { 0%, 44%, 52%, 100% { transform: none; } 47% { transform: scale(.94); } }
@keyframes label-out { 0%, 46% { opacity: 1; } 49%, 88% { opacity: 0; } 92%, 100% { opacity: 1; } }
@keyframes done-in { 0%, 46% { opacity: 0; } 49%, 88% { opacity: 1; } 92%, 100% { opacity: 0; } }

/* carousel slides, dots */
.mini-carousel__track { animation: slide 9s var(--ease) infinite; }
@keyframes slide { 0%, 28% { transform: none; } 33%, 61% { transform: translateX(-128px); } 66%, 94% { transform: translateX(-256px); } 100% { transform: none; } }
.dots i { animation: dot 9s infinite; }
.dots i:nth-child(2) { animation-delay: 3s; }
.dots i:nth-child(3) { animation-delay: 6s; }
@keyframes dot { 0%, 30% { background: var(--amber); } 33%, 100% { background: var(--s3); } }

/* DM: comment, typing, reply, link */
.dm__comment { animation: dm-a 8s var(--ease) infinite both; }
.dm__typing  { animation: dm-b 8s var(--ease) infinite both; }
.dm__reply   { animation: dm-c 8s var(--ease) infinite both; }
.dm__link    { animation: dm-d 8s var(--ease) infinite both; }
@keyframes dm-a { 0% { opacity: 0; transform: translateY(8px); } 6%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes dm-b { 0%, 10% { opacity: 0; } 14%, 30% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes dm-c { 0%, 32% { opacity: 0; transform: translateY(8px); } 38%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes dm-d { 0%, 44% { opacity: 0; transform: translateY(8px); } 50%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.dm__typing i { animation: typing 1s ease-in-out infinite; }
.dm__typing i:nth-child(2) { animation-delay: .15s; }
.dm__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 100% { opacity: .35; transform: none; } 50% { opacity: 1; transform: translateY(-3px); } }

/* lead log: the new row flashes in */
.log__row--new { animation: lead 6s var(--ease) infinite; }
@keyframes lead { 0% { background: rgba(250,171,28,.18); } 30%, 100% { background: transparent; } }

/* odometer, "clean roll" (Brian 2026-11-13): each digit spins up once from 0 through a full turn and clicks into place,
   left to right (the later digits just take a little longer). No blur, so it stays sharp, and it plays once only:
   hovering never restarts it (re-rolling mid-roll broke the numbers). */
.odo__s { animation: odo 1.5s cubic-bezier(.16, 1, .3, 1) .3s both; }
.odo:nth-child(2) .odo__s { animation-duration: 1.64s; }
.odo:nth-child(3) .odo__s { animation-duration: 1.78s; }
/* with honey-cards.js running, the numbers wait off to the side until their card scrolls into view, then roll in
   while the honey fills (the card's --fill-delay staggers them like the honey) */
.honey-js .stat:not(.is-seen) .stat__num { opacity: 0; }
.honey-js .stat .stat__num { transition: opacity .3s ease var(--fill-delay, 0s); }
.honey-js .stat:not(.is-seen) .odo__s { animation: none; }
.honey-js .stat.is-seen .odo__s { animation-delay: calc(var(--fill-delay, 0s) + .2s); }
/* the % and + fade in as the digits land */
.honey-js .stat .stat__num sup { opacity: 0; transition: opacity .5s ease; }
.honey-js .stat.is-seen .stat__num sup { opacity: 1; transition-delay: calc(var(--fill-delay, 0s) + 1.4s); }
@keyframes odo { from { transform: translateY(0); } }

.colon { animation: tick 1s steps(1) infinite; }
@keyframes tick { 50% { opacity: .15; } }

.ticker__track { animation: marquee 32s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

.float-card--trend { animation: bob 6s ease-in-out infinite; }
.float-card--time { animation: bob 7s ease-in-out 1s infinite; }
.week__grid i { transition: transform .3s var(--ease); }
.how__visual:hover .week__grid span:nth-child(odd) i { transform: translateY(-4px); }
@keyframes wiggle { 0%, 100% { rotate: 0deg; } 30% { rotate: -12deg; } 60% { rotate: 8deg; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .dm__typing { display: none; }
  .mark__drips { display: none; }
  /* still frame instead of the honeycomb loop */
  .hero .horizon { background: url(assets/bee-visit-end.webp) 50% 72% / cover no-repeat; }
  .hero .horizon video { visibility: hidden; }
}

/* small VSL (short laptop screens, phones): compact player chrome */
@container (max-width: 600px) {
  .vsl__play { width: 64px; height: 55px; }
  .vsl__play svg:not(.vsl__hex) { width: 22px; height: 22px; }
  .vsl__title { left: 14px; bottom: 12px; }
  .vsl__title b { font-size: 14px; }
  .vsl__title span { display: none; }
  .vsl__brand { top: 12px; left: 14px; font-size: 12px; }
  .vsl__brand .mark { width: 20px; height: 20px; }
  .vsl__brand .vsl__word { width: 60px; height: auto; }
}

/* ================= RESPONSIVE ================= */
@media (max-width: 1100px) {
  .stage { --v: calc(100vw - 96px); }
  .hexc, .flow { display: none; }
  .tile--wide { flex-direction: column; align-items: stretch; padding: 36px 0 0 36px; gap: 24px; }
  .tile__copy { padding: 0 36px 0 0; }
  .how { grid-template-columns: 1fr; }
  .plans { gap: 14px; }
}
@media (max-width: 900px) {
  .nav__inner { grid-template-columns: 1fr auto; }
  .nav__links { display: none; }
  .stage { --v: calc(100vw - 48px); }
  .bento, .stats, .split, .plans { grid-template-columns: 1fr; }
  .quotes { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .plan--l, .plan--r { rotate: 0deg; translate: 0 0; }
  .plans { max-width: 480px; margin: 0 auto; }
  .split__visual { order: 2; }
  .foot__inner { grid-template-columns: 1fr 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .nav__inner { height: 62px; padding: 0 16px; }
  .section { padding-left: 16px; padding-right: 16px; }
  .section--flush { padding-left: 0; padding-right: 0; }
  .stage { --v: calc(100vw - 32px); margin-top: 24px; }
  .hero { padding-top: 24px; }
  .hero .display { font-size: 36px; }
  .hero__copy { gap: 16px; }
  .hero::before { background: radial-gradient(120% 62% at 50% 28%, rgba(10,10,12,.86), rgba(10,10,12,.58) 60%, transparent 88%); }
  .horizon { height: 58%; }
  .vsl { padding: 6px; border-radius: 22px; }
  .vsl__poster { border-radius: 17px; }
  .vsl__play { width: 64px; height: 55px; }
  .vsl__play svg:not(.vsl__hex) { width: 22px; height: 22px; }
  .vsl__title { left: 14px; bottom: 12px; }
  .vsl__title b { font-size: 14px; }
  .vsl__title span { display: none; }
  .vsl__brand { top: 12px; left: 14px; font-size: 12px; }
  .vsl__brand .mark { width: 20px; height: 20px; }
  .vsl__brand .vsl__word { width: 60px; height: auto; }
  .tile { min-height: 0; padding: 28px 22px 0; }
  .tile--wide { padding: 28px 0 0 22px; }
  .tile__copy { padding-right: 22px; }
  .log__head, .log__row { grid-template-columns: 1.3fr 1fr .8fr; padding: 12px 16px; }
  .log__head span:nth-child(3), .log__row span:nth-child(3) { display: none; }
  .mini-reel { height: 210px; }
  .split__visual { padding: 18px; }
  .steps { grid-template-columns: 1fr 1fr; }
  .how__visual { min-height: 400px; }
  .week { left: 14px; right: 14px; padding: 14px; }
  .week__grid { gap: 4px; }
  .week__grid i { height: 52px; }
  .float-card--trend { left: 14px; }
  .float-card--time { right: 14px; }
  .ctas { flex-direction: column; width: 100%; }
  .ctas .btn { width: 100%; max-width: 340px; }
  .foot__inner { grid-template-columns: 1fr 1fr; }
}

/* ============ CHAT ============
   The honey pot sits in a dark hexagon in the bottom-right corner. It opens a small glass chat with a greeting,
   quick replies and a booking link. Answers are canned for now; chat.js has the spot where the Honeypot brain plugs in. */
.chat { position: fixed; right: 24px; bottom: 24px; z-index: 60; font-family: var(--body); }
.chat__launch { position: relative; display: grid; place-items: center; width: 74px; height: 64px; padding: 0; border: 0; background: none; cursor: pointer; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .55)); transition: translate .25s var(--ease), scale .15s ease; }
.chat__hex { position: absolute; inset: 0; width: 100%; height: 100%; fill: url(#hx-grey); }
.chat__pot { position: relative; display: block; width: 46px; height: 46px; }
.chat__launch:hover, .chat__launch:focus-visible { translate: 0 -3px; }
.chat__launch:active { scale: .95; }
.chat__launch:focus-visible { outline: none; }
.chat__launch:focus-visible .chat__hex { stroke: var(--amber); stroke-width: 4px; }
/* a label slides out to the left on hover so the pot reads as a chat */
.chat__hint { position: absolute; right: calc(100% + 10px); top: 50%; translate: 6px -50%; padding: 8px 12px; border-radius: 12px; background: var(--s2); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text); font: 600 13px/1 var(--body); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s ease, translate .2s var(--ease); }
.chat__launch:hover .chat__hint, .chat__launch:focus-visible .chat__hint { opacity: 1; translate: 0 -50%; }
.chat.is-open .chat__hint { display: none; }

.chat__window {
  --jensen-height: 190px; --chat-clearance: 128px;
  position: absolute; right: 0; bottom: 80px; width: 360px; padding-top: var(--jensen-height);
  isolation: isolate;
}
.chat__window[hidden] { display: none; }
.chat__mascot { position: absolute; inset: 0 0 auto; height: var(--jensen-height); overflow: hidden; pointer-events: none; z-index: 0; }
.chat__mascot svg { display: block; width: 100%; height: 100%; }
.chat__panel {
  position: relative; z-index: 1; display: flex; flex-direction: column; width: 100%;
  height: min(500px, calc(100svh - var(--chat-clearance) - var(--jensen-height)));
  height: min(500px, calc(100dvh - var(--chat-clearance) - var(--jensen-height)));
  border-radius: 22px; overflow: hidden; transform-origin: 100% 100%;
  background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02) 40%), rgba(18, 18, 22, .9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(255, 255, 255, .1), 0 30px 70px -20px rgba(0, 0, 0, .8);
  backdrop-filter: blur(20px) saturate(115%); -webkit-backdrop-filter: blur(20px) saturate(115%);
  animation: chat-in .22s var(--ease) both;
}
@keyframes chat-in { from { opacity: 0; transform: translateY(8px) scale(.97); } }
.chat__head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; border-bottom: 1px solid var(--line); }
.chat__avatar { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--s3); }
.chat__avatar img { display: block; width: 30px; height: 30px; }
.chat__who { flex: 1; min-width: 0; }
.chat__who b { display: block; color: var(--text); font: 600 15px/1.2 var(--display); }
.chat__who small { display: block; margin-top: 2px; color: var(--text-2); font-size: 12.5px; }
.chat__close, .chat__motion { display: grid; place-items: center; flex: none; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--text-2); cursor: pointer; }
.chat__close:hover, .chat__motion:hover { background: var(--s3); color: var(--text); }
.chat__close:focus-visible, .chat__motion:focus-visible { background: var(--s3); color: var(--text); outline: 2px solid var(--amber); outline-offset: 1px; }
.chat__close svg, .chat__motion svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chat__play-mark, .chat__motion[aria-pressed="true"] .chat__pause-mark { display: none; }
.chat__motion[aria-pressed="true"] .chat__play-mark { display: block; }

.chat__log { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 16px; overflow-y: auto; overscroll-behavior: contain; }
.msg { max-width: 86%; margin: 0; padding: 10px 13px; border-radius: 16px; font-size: 14px; line-height: 1.45; }
.msg--bot { align-self: flex-start; border-bottom-left-radius: 6px; background: var(--s3); color: var(--text); }
.msg--me { align-self: flex-end; border-bottom-right-radius: 6px; background: linear-gradient(#FFCB2F, #F6AE17); color: #1A1206; font-weight: 500; }
.msg a { color: var(--amber); font-weight: 600; }
.msg--typing { display: flex; gap: 4px; padding: 13px 14px; }
.msg--typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-2); animation: chat-dot 1s ease-in-out infinite; }
.msg--typing i:nth-child(2) { animation-delay: .15s; } .msg--typing i:nth-child(3) { animation-delay: .3s; }
@keyframes chat-dot { 30% { translate: 0 -3px; opacity: 1; } 0%, 60%, 100% { opacity: .45; } }
.chat__quick { display: flex; flex-wrap: wrap; gap: 8px; }
.chat__chip { padding: 9px 13px; border: 0; border-radius: 12px; background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text); font: 500 13.5px/1.2 var(--body); text-decoration: none; cursor: pointer; transition: box-shadow .2s ease, background .2s ease; }
.chat__chip:hover, .chat__chip:focus-visible { background: var(--s2); box-shadow: inset 0 0 0 1px rgba(250, 171, 28, .55); outline: none; }
.chat__chip--book { background: linear-gradient(#FFCB2F, #F6AE17); box-shadow: none; color: #1A1206; font-weight: 600; }
.chat__chip--book:hover, .chat__chip--book:focus-visible { background: linear-gradient(#FFCB63, #F49E1E); box-shadow: 0 8px 20px -10px rgba(250, 171, 28, .7); }

.chat__form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
.chat__input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--s2); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); font: 15px var(--body); }
.chat__input::placeholder { color: var(--text-3); }
.chat__input:focus { outline: none; box-shadow: inset 0 0 0 1.5px rgba(250, 171, 28, .6); }
.chat__send { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: linear-gradient(#FFCB2F, #F6AE17); color: #1A1206; cursor: pointer; }
.chat__send svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.chat__send:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

@media (max-width: 560px) {
  .chat { right: 14px; bottom: 14px; }
  .chat__window { --jensen-height: 145px; --chat-clearance: 110px; position: fixed; left: 10px; right: 10px; bottom: 88px; width: auto; }
  .chat__head { gap: 8px; padding-left: 12px; padding-right: 10px; }
}
@media (max-height: 650px) { .chat__window { --jensen-height: 70px; } }
@media (max-height: 460px) {
  .chat { right: 14px; bottom: 10px; }
  .chat__launch { width: 60px; height: 52px; }
  .chat__pot { width: 38px; height: 38px; }
  .chat__window { --chat-clearance: 88px; bottom: 64px; }
  .chat__head { padding-top: 8px; padding-bottom: 8px; }
  .chat__form { padding: 8px; }
  .chat__input, .chat__send { height: 36px; }
  .chat__send { width: 36px; }
  .chat__log { padding: 10px 14px; }
}
@media (prefers-reduced-motion: reduce) { .chat__motion { display: none; } }

/* ============ REST OF THE PAGE, IN THE HERO'S FORMAT ============
   Rounded honey hexagons, glass cards with a bright rim (light catching the top-left and bottom-right), and text cards
   that fill with honey by themselves once they're on screen; clickable cards fill slowly on hover instead
   (honey-cards.js adds the honey and decides which is which). */
:root { --rim: 1.2px; --hex-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 104'%3E%3Cpath d='M23.5 11.3Q30 0 43 0L77 0Q90 0 96.5 11.3L113.5 40.7Q120 52 113.5 63.3L96.5 92.7Q90 104 77 104L43 104Q30 104 23.5 92.7L6.5 63.3Q0 52 6.5 40.7Z'/%3E%3C/svg%3E"); }

/* hexagon icons: the same rounded cell and soft honey gradient as the hero */
.hexi { background: linear-gradient(#FFCB2F, #F6AE17); color: #1A1206; -webkit-mask: var(--hex-mask) center / contain no-repeat; mask: var(--hex-mask) center / contain no-repeat; }
.hexi--lg { width: 48px; height: 42px; }
/* avatars and client logos become cells too: grey ones, like the hero's grey hexagon */
.av { border-radius: 0; width: 32px; height: 28px; background: linear-gradient(#2F2F36, #1B1B20); -webkit-mask: var(--hex-mask) center / contain no-repeat; mask: var(--hex-mask) center / contain no-repeat; }
.quote__logo { width: 60px; height: 52px; padding: 11px 13px; border-radius: 0; box-shadow: none; background: linear-gradient(#2F2F36, #1B1B20); -webkit-mask: var(--hex-mask) center / contain no-repeat; mask: var(--hex-mask) center / contain no-repeat; }
/* the stat labels lose their bubble: just the hexagon and the words */
.stat__label { padding: 0; background: none; gap: 10px; color: var(--text); }

/* glass cards: solid dark glass with a gradient rim (the page behind them is flat, so they stay opaque) */
.tile, .stat, .steps li, .quote, .plan, .faq__item, .split__visual, .stack__card {
  border: var(--rim) solid transparent;
  background:
    linear-gradient(160deg, #1F1F24, #151519 38%, #121215 66%, #18181C) padding-box,
    linear-gradient(135deg, rgba(255,255,255,.5), rgba(255,255,255,.12) 22%, rgba(255,255,255,.04) 45%, rgba(255,255,255,.04) 62%, rgba(255,255,255,.14) 82%, rgba(255,255,255,.36)) border-box;
  box-shadow: inset 12px 14px 24px -18px rgba(255,255,255,.13), 0 30px 60px -32px rgba(0,0,0,.85);
}
.stack__card {
  background:
    linear-gradient(160deg, #26262C, #1C1C21 45%, #1A1A1F) padding-box,
    linear-gradient(135deg, rgba(255,255,255,.34), rgba(255,255,255,.08) 30%, rgba(255,255,255,.03) 60%, rgba(255,255,255,.22)) border-box;
  box-shadow: inset 10px 12px 20px -16px rgba(255,255,255,.1);
}
.quote {
  background:
    radial-gradient(90% 60% at 0% 0%, rgba(250,171,28,.13), transparent 60%) padding-box,
    linear-gradient(160deg, #1F1F24, #151519 38%, #121215 66%, #18181C) padding-box,
    linear-gradient(135deg, rgba(255,194,77,.7), rgba(250,171,28,.18) 24%, rgba(255,255,255,.04) 48%, rgba(255,255,255,.04) 64%, rgba(255,255,255,.14) 84%, rgba(255,255,255,.34)) border-box;
}
.quote::before { display: none; }
.plan--pop {
  background:
    linear-gradient(180deg, rgba(250,171,28,.16), rgba(250,171,28,.03) 55%) padding-box,
    linear-gradient(160deg, #1F1F24, #151519 38%, #121215 66%, #18181C) padding-box,
    linear-gradient(135deg, #FFC24D, rgba(250,171,28,.35) 26%, rgba(250,171,28,.12) 55%, rgba(250,171,28,.45) 85%, #F0950C) border-box;
  box-shadow: inset 12px 14px 24px -18px rgba(255,255,255,.13), 0 30px 80px -40px rgba(250,171,28,.5);
}
/* hover: an amber glow instead of the old outline */
.tile:hover, .stat:hover, .steps li:hover, .quote:hover, .faq__item.is-open, .plan:hover { box-shadow: inset 12px 14px 24px -18px rgba(255,255,255,.13), 0 30px 60px -30px rgba(250,171,28,.35); }
.plan--pop:hover { box-shadow: inset 12px 14px 24px -18px rgba(255,255,255,.13), 0 30px 80px -36px rgba(250,171,28,.65); }

/* the see-through glass over the honey glow in "How it works": same treatment as the hero cards */
.week, .float-card {
  background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.05) 34%, rgba(255,255,255,.015) 62%, rgba(255,255,255,.07)), rgba(16,16,20,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 1px 0 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(255,255,255,.1), inset 12px 14px 22px -16px rgba(255,255,255,.28), 0 30px 60px -24px rgba(0,0,0,.75);
  backdrop-filter: blur(18px) saturate(115%); -webkit-backdrop-filter: blur(18px) saturate(115%);
}

/* honey fill: honey rises to the top, rolling, and a dark copy of the card rides inside it held still,
   so the text turns dark exactly where the honey covers it (the same trick as the hero cards) */
.stat, .steps li { position: relative; }
.honey { position: absolute; inset: calc(-1 * var(--rim)); z-index: 2; overflow: hidden; border-radius: inherit; pointer-events: none; }
.honey__body {
  position: absolute; left: 0; top: 100%; width: 100%; height: calc(100% + 32px);
  background: linear-gradient(#FFCB2F, #F6AE17);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 16'%3E%3Cpath d='M0 9C8 5 26 4 38 8S60 13 74 9S92 2 110 7S128 12 140 10S160 5 176 8S200 14 214 9S232 13 240 9V15H0Z'/%3E%3C/svg%3E") 0 0 / 240px 16px repeat-x, linear-gradient(#000, #000) 0 14px / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 16'%3E%3Cpath d='M0 9C8 5 26 4 38 8S60 13 74 9S92 2 110 7S128 12 140 10S160 5 176 8S200 14 214 9S232 13 240 9V15H0Z'/%3E%3C/svg%3E") 0 0 / 240px 16px repeat-x, linear-gradient(#000, #000) 0 14px / 100% 100% no-repeat;
  animation: pool-roll 7.8s linear infinite, honey-bob 2.4s ease-in-out infinite;
  transition: top 1.1s cubic-bezier(.4, 0, .35, 1);
}
.honey .honey__ink {
  position: absolute; left: 0; top: calc(-100% + 32px); width: 100%; height: calc(100% - 32px); margin: 0; overflow: hidden;
  transform: none; translate: none; rotate: none; background: none; box-shadow: none; border-color: transparent;
  animation: ink-bob 2.4s ease-in-out infinite;
  transition: top 1.1s cubic-bezier(.4, 0, .35, 1);
}
.is-honeyed:not(.is-auto):is(:hover, :focus-within) .honey__body { top: -16px; }
.is-honeyed:not(.is-auto):is(:hover, :focus-within) .honey .honey__ink { top: 16px; }
/* clickable cards: the honey rises slowly while you hover and drains a little quicker when you leave */
.is-honeyed:not(.is-auto):is(:hover, :focus-within) .honey__body, .is-honeyed:not(.is-auto):is(:hover, :focus-within) .honey .honey__ink { transition: top 1.9s cubic-bezier(.4, .05, .3, 1); }
/* auto cards: once a card reaches its spot on screen (honey-cards.js adds .is-full), it fills to the top by itself,
   slowly, a beat after the card before it (--fill-delay), and stays full */
.is-auto .honey__body { top: 0; height: 100%; -webkit-mask: none; mask: none; animation: none; transition: none; clip-path: inset(100% 0 0 0); }
.is-auto .honey .honey__ink { top: 0; height: 100%; animation: none; transition: none; }
.honey__ink, .honey__ink * { color: #1A1206 !important; }
.honey__ink * { background-color: transparent !important; box-shadow: none !important; border-color: rgba(26, 18, 6, .22) !important; }
.honey__ink small, .honey__ink p { color: rgba(26, 18, 6, .78) !important; }
.honey__ink .hexi { background: #1A1206 !important; }
.honey__ink .hexi, .honey__ink .hexi * { color: #FFC24D !important; }
.honey__ink .quote__logo { background: #1A1206 !important; }
.honey__ink::before, .honey__ink::after { display: none !important; }
/* the stat counters in the dark copy sit on their final number; the honey covers the copy, so it never has to roll */
.honey__ink .odo__s { animation: none !important; }

/* pricing: Pour is the biggest card, wider and taller, in the middle. Drip and Hive are the same size on either side:
   both stretch to the row and give up the same margin top and bottom, and their buttons sit at the bottom */
.plan { display: flex; flex-direction: column; }
.plan .btn { margin-top: auto; }
@media (min-width: 901px) {
  .plans { grid-template-columns: 1fr 1.14fr 1fr; align-items: stretch; }
  .plan--l, .plan--r { margin: 34px 0; translate: none; }
  .plan--pop { padding: 18px 18px 26px; z-index: 1; }
  .plan--pop .plan__price b { font-size: 54px; }
}
/* small cards with a bold title and a smaller line under it: keep them on two lines */
.stack__post b, .stack__post small, .stack__card--note b, .stack__card--note small, .float-card b, .float-card small { display: block; }
.stack__post small, .stack__card--note small, .float-card small { margin-top: 2px; color: var(--text-2); font-size: 13px; }

/* ============ FAQ: STEADY ACCORDION ============
   Each question has a numbered honey hexagon and a honey hexagon toggle (plus when closed, minus when open); the open
   one gets an amber rim, like the Pour card. With faq.js: one answer is always open at its own height, and clicking
   another question closes the old one while the new one opens at the same speed, so the section glides to its new
   height instead of jumping. Without JS every answer simply shows. */
.faq { display: grid; gap: 10px; max-width: 760px; margin: 0 auto; }
.faq__item { border-radius: 18px; transition: box-shadow .35s ease; }
.faq__item.is-open {
  background:
    linear-gradient(160deg, rgba(250,171,28,.09), rgba(250,171,28,.02) 50%) padding-box,
    linear-gradient(160deg, #1F1F24, #151519 38%, #121215 66%, #18181C) padding-box,
    linear-gradient(135deg, #FFC24D, rgba(250,171,28,.3) 28%, rgba(255,255,255,.05) 58%, rgba(250,171,28,.5)) border-box;
}
.faq__h { margin: 0; font: inherit; }
.faq__btn { display: flex; align-items: center; gap: 16px; width: 100%; padding: 18px 20px; border: 0; border-radius: 18px; background: none; color: inherit; text-align: left; cursor: pointer; font: 600 17px/1.3 var(--display); }
.faq__btn:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }
.faq__n { width: 42px; height: 37px; font: 700 13px/1 var(--display); letter-spacing: .02em; }
.faq__q { flex: 1; }
.faq__tg {
  flex: none; width: 32px; height: 28px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' stroke='%231A1206' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 13px no-repeat, linear-gradient(#FFCB2F, #F6AE17);
  -webkit-mask: var(--hex-mask) center / contain no-repeat; mask: var(--hex-mask) center / contain no-repeat;
  transition: scale .3s var(--pop);
}
.faq__item.is-open .faq__tg { scale: 1.08; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12h12' stroke='%231A1206' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 13px no-repeat, linear-gradient(#FFCB2F, #F6AE17); }
.faq__btn:hover .faq__tg { scale: 1.08; }
.faq__a p { margin: 0; padding: 0 24px 22px 78px; color: var(--text-2); font-size: 15.5px; max-width: 46em; }
/* the accordion (faq.js adds .faq-js and moves .is-open) */
.faq-js .faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s cubic-bezier(.45, 0, .2, 1); }
.faq-js .faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq-js .faq__a-in { min-height: 0; overflow: hidden; }
.faq-js .faq__a p { opacity: 0; translate: 0 -6px; transition: opacity .3s ease, translate .45s var(--ease); }
.faq-js .faq__item.is-open .faq__a p { opacity: 1; translate: 0 0; transition-delay: .15s; }
@media (max-width: 600px) {
  .faq__btn { gap: 12px; padding: 16px 14px; font-size: 16px; }
  .faq__n { width: 36px; height: 31px; font-size: 12px; }
  .faq__a p { padding: 0 18px 18px 62px; }
}

/* ============ CLOSING HONEYCOMB FADE ============
   The honeycomb under "Let's get your fleet booked" now melts into the page like the hero's: a long, soft fade over
   the comb's top edge (instead of a hard horizon line), soft sides at every width, and a fade out at the bottom so it
   runs into the footer with no seam. The amber glow behind it fades out before the section ends too. */
.horizon--close {
  --fade-y: linear-gradient(to bottom, transparent 0%, transparent 14%, rgba(0,0,0,.3) 30%, rgba(0,0,0,.85) 50%, #000 60%, #000 68%, rgba(0,0,0,.45) 86%, transparent 100%);
  --fade-x: linear-gradient(to right, transparent, #000 16%, #000 84%, transparent);
  -webkit-mask: var(--fade-y), var(--fade-x); -webkit-mask-composite: source-in;
          mask: var(--fade-y), var(--fade-x); mask-composite: intersect;
}
.close::before {
  background: radial-gradient(60% 60% at 50% 72%, rgba(250,171,28,.26), transparent 72%);
  -webkit-mask: linear-gradient(to bottom, #000 55%, transparent 100%); mask: linear-gradient(to bottom, #000 55%, transparent 100%);
}
.foot { border-top: 0; }

/* ============ NOTEPAD: ON OUR PLATE ============
   Replaces the scrolling ticker. A glass notepad with a row of honeycomb punch holes along the top, ruled lines,
   and a honey hexagon check for each thing we handle every week. Two columns on wide screens, one on phones. */
.plate { padding: clamp(80px, 10vw, 128px) 24px 0; }
.plate__pad {
  position: relative; max-width: 820px; margin: 0 auto; padding: 58px clamp(24px, 5vw, 60px) 30px; border-radius: 26px;
  border: var(--rim) solid transparent;
  background:
    linear-gradient(160deg, #1F1F24, #151519 38%, #121215 66%, #18181C) padding-box,
    linear-gradient(135deg, rgba(255,255,255,.5), rgba(255,255,255,.12) 22%, rgba(255,255,255,.04) 45%, rgba(255,255,255,.04) 62%, rgba(255,255,255,.14) 82%, rgba(255,255,255,.36)) border-box;
  box-shadow: inset 12px 14px 24px -18px rgba(255,255,255,.13), 0 30px 60px -32px rgba(0,0,0,.85);
}
/* the punch holes: the white ring hexagon from the logo, in a row */
.plate__holes { position: absolute; left: 50%; top: 18px; translate: -50% 0; width: min(42%, 230px); height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1.4 -44.27 50.4 27.92'%3E%3Cpath fill='%23F5F5F7' fill-rule='evenodd' d='M42.15 -31.092Q42.6 -30.313 42.15 -29.533L35.05 -17.236Q34.6 -16.456 33.7 -16.456L19.5 -16.456Q18.6 -16.456 18.15 -17.236L11.05 -29.533Q10.6 -30.313 11.05 -31.092L18.15 -43.39Q18.6 -44.169 19.5 -44.169L33.7 -44.169Q34.6 -44.169 35.05 -43.39ZM37.25 -31.179Q37.75 -30.313 37.25 -29.447L32.675 -21.523Q32.175 -20.657 31.175 -20.657L22.025 -20.657Q21.025 -20.657 20.525 -21.523L15.95 -29.447Q15.45 -30.313 15.95 -31.179L20.525 -39.103Q21.025 -39.969 22.025 -39.969L31.175 -39.969Q32.175 -39.969 32.675 -39.103Z'/%3E%3C/svg%3E") center / 36px 20px space no-repeat; opacity: .92; }
.plate__title { position: relative; font: 600 clamp(22px, 2.2vw, 28px)/1.15 var(--display); letter-spacing: -0.02em; padding-bottom: 16px; }
.plate__title::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(250, 171, 28, .45); transform-origin: left; }
.plate__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(28px, 5vw, 56px); }
.plate__list li { position: relative; display: flex; align-items: center; gap: 14px; padding: 15px 0; font: 500 17px/1.2 var(--display); }
.plate__list li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); }
.plate__list .hexi { width: 28px; height: 25px; }
/* writing it in: once the pad is on screen (notepad.js adds .is-seen), the amber rule draws, then each line sweeps
   in left to right with its ruled line while its honey check pops in, one after another (--i is its place in the list) */
.plate-js .plate:not(.is-seen) .plate__title::after { transform: scaleX(0); }
.plate-js .plate:not(.is-seen) .plate__list li { clip-path: inset(-6px 100% -6px -6px); }
.plate-js .plate:not(.is-seen) .plate__list .hexi { opacity: 0; }
.plate.is-seen .plate__title::after { animation: pad-rule .7s cubic-bezier(.6, 0, .3, 1) both; }
.plate.is-seen .plate__list li { animation: pad-write .75s cubic-bezier(.55, 0, .3, 1) calc(.45s + var(--i, 0) * .17s) both; }
.plate.is-seen .plate__list .hexi { animation: pad-assemble .8s cubic-bezier(.2, .9, .3, 1.15) calc(.5s + var(--i, 0) * .17s) both; }
@keyframes pad-rule { from { transform: scaleX(0); } }
@keyframes pad-write { from { clip-path: inset(-6px 100% -6px -6px); } to { clip-path: inset(-6px -6px -6px -6px); } }
/* the binding rings assemble: notepad.js splits the row into one ring each (the row's own background is hidden and
   each ring inherits its artwork). Each one starts a few pixels off its spot, turned and small, and snaps into place
   with the logo cells' little overshoot, one after another, left to right. The list's honey checks do the same */
.plate-js .plate__holes { display: flex; justify-content: space-between; background-size: 0 0; }
.plate__ring { flex: none; width: 36px; height: 20px; background-image: inherit; background-size: 36px 20px; background-repeat: no-repeat; background-position: center; }
.plate-js .plate:not(.is-seen) .plate__ring { opacity: 0; }
.plate.is-seen .plate__ring { animation: pad-assemble .8s cubic-bezier(.2, .9, .3, 1.15) calc(.05s + var(--i, 0) * 55ms) both; }
@keyframes pad-assemble { from { opacity: 0; transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--a, 0deg)) scale(.4); } }
@media (prefers-reduced-motion: reduce) { .plate.is-seen .plate__ring { animation: none; } .plate-js .plate:not(.is-seen) .plate__ring { opacity: 1; } }
@media (max-width: 600px) {
  .plate__list { grid-template-columns: 1fr; }
  .plate__pad { padding-top: 52px; }
}

/* ============ HERO BOTTOM FADE ============
   The hero clips its honeycomb at the section's bottom edge, which left a hard line where the hero meets the next
   section. This fades the bottom of the hero into the page colour, so the honeycomb melts away like the closing one.
   It sits on the honeycomb's layer (z-index -1, later in the page), so it never covers the video, cards or buttons. */
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(160px, 22vh, 280px); z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(10, 10, 12, 0), rgba(10, 10, 12, .55) 45%, rgba(10, 10, 12, .9) 75%, var(--bg)); }

/* ============ NOTEPAD: ONE COLUMN ============
   All ten jobs in a single column, top to bottom, like a real notepad page with ruled lines; they still write in one
   after another with their honey checks assembling. The pad is narrower so the page reads like a note, not a table. */
.plate__pad { max-width: 560px; }
.plate__list { grid-template-columns: 1fr; }
.plate__list li { padding: 13px 0; }

/* ============ AND MORE ============
   The notepad and the Hive plan list only the headline promises, then end on "And more", so the rest is
   for the strategy call. That last line is quieter: muted text, and a plus in the hexagon instead of a check. */
.plate__more { color: var(--text-2); }
.plate__plus { font: 700 16px/1 var(--display); }
.plan__list .plan__more { color: var(--amber); font-weight: 700; font-style: normal; text-shadow: 0 0 14px rgba(250, 171, 28, .55), 0 0 2px rgba(250, 171, 28, .35); } /* Hive's "And more": the bullets' orange, bold, glowing (Brian 2026-11-13) */

/* ============ VSL IN AND OUT: NO WHITE FLASH ============
   The hero cards' white text sits under their honey (the honey's dark copy is what you read). Fading every child
   separately let the white show through the half-faded honey, so: going into the video the card's own text hides at
   once and only the honey layer fades; coming back, the honey fades in first and the text returns under it after. */
.hero.vsl-seen .flow__card > :not(.hxa):not(.flow__honey) { transition: opacity 0s linear .32s; }
.hero.vsl-on .flow__card > :not(.hxa):not(.flow__honey) { transition: opacity 0s; } /* after the line above, so it wins while the video is open */

/* ============ NOTEPAD: HONEY TOP (see-through honey) ============
   Two layers of honey hang from the top edge of the pad, each with a long soft wave along its lower edge, rolling
   slowly in opposite directions. The back layer is the deep brand amber (--amber to --amber-deep). The front layer is
   the site's honey (#FFCB2F to #F6AE17) made slightly see-through, like real honey, so the deeper layer glows through
   it. It pours in when the pad comes into view; the title sits under it. */
.plate__pad { overflow: hidden; padding-top: 44px; }
.plate__honey { position: absolute; left: -2px; right: -2px; top: -4px; height: 30px; pointer-events: none; transform-origin: 50% 0; }
.plate__honey::before, .plate__honey::after { content: ""; position: absolute; left: 0; right: 0; top: 0; }
.plate__honey::before {
  height: 30px; background: linear-gradient(var(--amber), var(--amber-deep));
  -webkit-mask: linear-gradient(#000, #000) 0 0 / 100% calc(100% - 12px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 16'%3E%3Cpath d='M0 9C30 13 100 13 130 9S230 5 260 9V1H0Z'/%3E%3C/svg%3E") 0 100% / 260px 16px repeat-x;
          mask: linear-gradient(#000, #000) 0 0 / 100% calc(100% - 12px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 16'%3E%3Cpath d='M0 9C30 13 100 13 130 9S230 5 260 9V1H0Z'/%3E%3C/svg%3E") 0 100% / 260px 16px repeat-x;
  animation: plate-roll-back 9s linear infinite;
}
.plate__honey::after {
  height: 24px; background: linear-gradient(rgba(255, 203, 47, .82), rgba(246, 174, 23, .72));
  -webkit-mask: linear-gradient(#000, #000) 0 0 / 100% calc(100% - 12px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 16'%3E%3Cpath d='M0 8C40 12 120 12 160 8S280 4 320 8V1H0Z'/%3E%3C/svg%3E") 0 100% / 320px 16px repeat-x;
          mask: linear-gradient(#000, #000) 0 0 / 100% calc(100% - 12px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 16'%3E%3Cpath d='M0 8C40 12 120 12 160 8S280 4 320 8V1H0Z'/%3E%3C/svg%3E") 0 100% / 320px 16px repeat-x;
  animation: plate-roll-front 12s linear infinite;
}
@keyframes plate-roll-back { to { -webkit-mask-position: 0 0, 260px 100%; mask-position: 0 0, 260px 100%; } }
@keyframes plate-roll-front { to { -webkit-mask-position: 0 0, -320px 100%; mask-position: 0 0, -320px 100%; } }
@media (prefers-reduced-motion: reduce) { .plate__honey::before, .plate__honey::after { animation: none; } }
/* pouring in on arrival */
.plate-js .plate:not(.is-seen) .plate__honey { transform: scaleY(0); }
.plate.is-seen .plate__honey { animation: pad-pour .9s cubic-bezier(.3, .9, .3, 1) both; }
@keyframes pad-pour { from { transform: scaleY(0); } }

/* ============ HERO CARD SMALL TEXT ============
   The label and the small line on the hero's honey cards were hard to read; they're a size up and fill the card more.
   (Same classes in the honey's dark copy, so the copy stays lined up.) */
.flow .hcard__head { font-size: 14.5px; }
.flow .hcard__note { margin-top: 4px; font-size: 13.5px; }
@media (max-height: 800px) { .flow .hcard__head { font-size: 13.5px; } }

/* ============ JENSEN IN THE CHAT HEADER ============
   Jensen used to float above the chat window, over the page (and over the hero cards). He now sits at the top of the
   chat itself, on a stage with a warm honey glow behind him, so nothing of his ever sits outside the chat. The window
   loses its empty space on top and the panel grows by the stage's height. */
.chat .chat__window { --jensen-height: 0px; --stage: 136px; padding-top: 0; }
.chat .chat__panel { height: min(630px, calc(100svh - var(--chat-clearance))); height: min(630px, calc(100dvh - var(--chat-clearance))); }
.chat .chat__mascot {
  position: relative; inset: auto; z-index: auto; flex: none; height: var(--stage);
  background: radial-gradient(70% 95% at 50% 100%, rgba(250, 171, 28, .34), transparent 70%), linear-gradient(#24242A, #17171B);
  border-bottom: 1px solid var(--line);
}
.chat .chat__mascot svg { position: absolute; left: 0; right: 0; bottom: -2px; height: calc(100% + 6px); }
@media (max-width: 560px) { .chat .chat__window { --stage: 116px; } }
@media (max-height: 650px) { .chat .chat__window { --stage: 86px; } }
@media (max-height: 460px) { .chat .chat__window { --stage: 64px; } }

/* ============ HONEY POUR (climbs the glass) ============
   Hero, stat and step cards fill like honey poured into a glass. A stream with a rounded tip runs down the lane on the
   right; the moment it touches the bottom, the honey heaps up under it, spreads across the card, curls up each side
   and levels out as it fills to the top. honey-cards.js draws the honey's surface every frame (a clip-path on the honey layer), and the dark
   copy of the card inside that layer is clipped with it, so the text turns dark exactly where the honey covers it.
   The stream sits behind the honey, so the honey swallows it right at the surface.
   Clickable cards (testimonials) still fill on hover, with no stream. */
.flow__body, .honey__body { z-index: 1; }
.flow__stream, .honey__stream {
  position: absolute; top: 0; right: var(--lane); z-index: 0; width: var(--stream); height: 100%; pointer-events: none;
  transform: translateY(-101%); border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, #F3A914, #FFD24A 45%, #F7B21C); box-shadow: 0 0 8px rgba(250, 171, 28, .35);
}
.honey__stream { right: calc(var(--lane) + var(--rim)); } /* the stat and step honey layer reaches over the card's rim */
/* once a hero card is full, its glass blur is hidden under the honey anyway, so drop it (honey-cards.js adds .is-filled):
   blurring what's behind a moving card every frame is what made the hero feel heavy */
.flow__card.is-filled { backdrop-filter: none; -webkit-backdrop-filter: none; }

/* ============ HONEY SAFE ZONE (rule: honey never crosses text) ============
   Every card's safe zone is its own left margin (--lane). The stream runs that far in from the card's right edge, and
   the text stops that far short of the stream: margin, stream, margin, text. Hero cards 14px (the gap between the
   hexagon and the text), steps 20px, stats 30px. The dark copies use the same classes, so they stay lined up. */
:root { --stream: 10px; }
.flow__card { --lane: 14px; }
.steps li { --lane: 20px; }
.stat { --lane: 30px; }
.flow__card, .flow__ink, .steps li, .stat { padding-right: calc(var(--lane) * 2 + var(--stream)); }

/* ============ HONEY BUTTONS ============
   Buttons use the same honey as the cards (honey-cards.js draws it). Orange buttons are full of honey; on hover it
   drains and settles in the bottom of the button, clinging to its sides, under the text, then pours back in (a stream
   in the right-hand padding, heaping and climbing the glass) when you leave. Grey buttons fill with honey the same
   way on hover. A dark copy of the label rides in the honey, so the text is dark exactly where the honey covers it.
   The stream sits in the middle of the button's right padding, so it never crosses the label.
   Without JS the old rolling wave below still works. */
.btn { --pad-x: 24px; }
.btn--lg { --pad-x: 30px; }
.btn--nav { --pad-x: 20px; }
.honey-js .btn, .honey-js .btn:hover, .honey-js .btn:focus-visible { color: var(--text); transition: transform .12s ease, box-shadow .3s ease; }
.honey-js .btn__honey { z-index: 1; }
.honey-js .btn__honey::before { content: none; }
.btn__body { position: absolute; inset: 0; z-index: 1; background: linear-gradient(#FFCB2F, #F6AE17); clip-path: inset(100% 0 0 0); }
.btn:not(.btn--ghost) .btn__body { clip-path: none; }
.btn__ink { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 var(--pad-x); color: #1A1206; }
.btn__stream {
  position: absolute; top: 0; right: calc((var(--pad-x) - 8px) / 2); z-index: 0; width: 8px; height: 100%;
  transform: translateY(-101%); opacity: 0; transition: opacity .2s ease; border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, #F3A914, #FFD24A 45%, #F7B21C);
}
.honey-js .btn--ghost:hover, .honey-js .btn--ghost:focus-visible { box-shadow: inset 0 0 0 1.5px rgba(250,171,28,.55), 0 14px 36px -16px rgba(250,171,28,.45); }

/* ============ TWO-TONE WAVES (Brian 2026-11-13) ============
   The same two-layer wave as the notepad's honey top, flipped so it rises from the bottom: a deeper back layer rolls
   one way and leads, and a slightly see-through front layer rolls the other way just behind it.
   - Grey buttons: two-tone WHITE rises on hover and the label turns dark (no honey pour on these).
   - Client cards (testimonials): two-tone HONEY rises on hover. The back layer (brand amber to amber-deep) sits
     under the card's text; the front honey layer carries the dark copy of the text, as before. */
.honey-js .btn--ghost { transition: color .2s ease .25s, transform .12s ease, box-shadow .3s ease; }
.honey-js .btn--ghost .btn__honey { z-index: -1; }
.honey-js .btn--ghost .btn__honey::before, .honey-js .btn--ghost .btn__honey::after {
  content: ""; position: absolute; left: 0; top: auto; bottom: 0; width: 100%; height: calc(100% + 18px);
  transform: translateY(100%); transition: transform .7s cubic-bezier(.4, 0, .6, 1);
}
.honey-js .btn--ghost .btn__honey::before {
  background: linear-gradient(#E9E9EE, #C9C9D1);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 16'%3E%3Cpath d='M0 9C30 5 100 5 130 9S230 13 260 9V16H0Z'/%3E%3C/svg%3E") 0 0 / 260px 16px repeat-x, linear-gradient(#000, #000) 0 14px / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 16'%3E%3Cpath d='M0 9C30 5 100 5 130 9S230 13 260 9V16H0Z'/%3E%3C/svg%3E") 0 0 / 260px 16px repeat-x, linear-gradient(#000, #000) 0 14px / 100% 100% no-repeat;
  animation: two-roll-back 9s linear infinite;
}
.honey-js .btn--ghost .btn__honey::after {
  height: calc(100% + 12px); background: linear-gradient(rgba(255, 255, 255, .94), rgba(244, 244, 247, .86));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 16'%3E%3Cpath d='M0 8C40 4 120 4 160 8S280 12 320 8V16H0Z'/%3E%3C/svg%3E") 0 0 / 320px 16px repeat-x, linear-gradient(#000, #000) 0 14px / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 16'%3E%3Cpath d='M0 8C40 4 120 4 160 8S280 12 320 8V16H0Z'/%3E%3C/svg%3E") 0 0 / 320px 16px repeat-x, linear-gradient(#000, #000) 0 14px / 100% 100% no-repeat;
  animation: two-roll-front 12s linear infinite;
}
.honey-js .btn--ghost:is(:hover, :focus-visible) .btn__honey::before,
.honey-js .btn--ghost:is(:hover, :focus-visible) .btn__honey::after { top: auto; transform: translateY(0); transition: transform 1.1s cubic-bezier(.35, 0, .2, 1); }
.honey-js .btn--ghost:is(:hover, :focus-visible) .btn__honey::before { animation: two-roll-back 9s linear infinite; }
.honey-js .btn--ghost:is(:hover, :focus-visible) .btn__honey::after { animation: two-roll-front 12s linear infinite; transition-delay: .12s; }
.honey-js .btn--ghost:hover, .honey-js .btn--ghost:focus-visible {
  color: #0A0A0C; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .4), 0 14px 36px -16px rgba(255, 255, 255, .35);
  transition: color .3s ease .35s, transform .12s ease, box-shadow .3s ease;
}
@keyframes two-roll-back { to { -webkit-mask-position: 260px 0, 0 14px; mask-position: 260px 0, 0 14px; } }
@keyframes two-roll-front { to { -webkit-mask-position: -320px 0, 0 14px; mask-position: -320px 0, 0 14px; } }

.quote.is-honeyed { isolation: isolate; }
.quote.is-honeyed::before {
  display: block; content: ""; position: absolute; left: 0; right: 0; top: 100%; height: calc(100% + 40px); z-index: -1; border-radius: 0; pointer-events: none;
  background: linear-gradient(var(--amber), var(--amber-deep));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 16'%3E%3Cpath d='M0 9C30 5 100 5 130 9S230 13 260 9V16H0Z'/%3E%3C/svg%3E") 0 0 / 260px 16px repeat-x, linear-gradient(#000, #000) 0 14px / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 16'%3E%3Cpath d='M0 9C30 5 100 5 130 9S230 13 260 9V16H0Z'/%3E%3C/svg%3E") 0 0 / 260px 16px repeat-x, linear-gradient(#000, #000) 0 14px / 100% 100% no-repeat;
  animation: two-roll-back 9s linear infinite;
  transition: top 1.1s cubic-bezier(.4, 0, .35, 1);
}
.quote.is-honeyed:is(:hover, :focus-within)::before { top: -22px; transition: top 1.9s cubic-bezier(.4, .05, .3, 1); }
.is-honeyed:not(.is-auto) .honey__body {
  background: linear-gradient(rgba(255, 203, 47, .86), rgba(246, 174, 23, .8));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 16'%3E%3Cpath d='M0 8C40 4 120 4 160 8S280 12 320 8V16H0Z'/%3E%3C/svg%3E") 0 0 / 320px 16px repeat-x, linear-gradient(#000, #000) 0 14px / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 16'%3E%3Cpath d='M0 8C40 4 120 4 160 8S280 12 320 8V16H0Z'/%3E%3C/svg%3E") 0 0 / 320px 16px repeat-x, linear-gradient(#000, #000) 0 14px / 100% 100% no-repeat;
  animation: two-roll-front 12s linear infinite, honey-bob 2.4s ease-in-out infinite;
}

/* ============ CURSOR (Brian 2026-11-13) ============
   The Honeypot cursor everywhere: a honey arrow with a small white comb cell on its tail (assets/honeypot-cursor.svg,
   the VSL's cursor D; its tip is at 3 2). Clickable things use it too (their honey hover says "click"); text fields keep
   the text caret. If the image can't load, the browser's own cursor shows.
   With a mouse, cursor-cell.js takes over (.cursor-js): while you move, the cursor is just the arrow and the cell trails
   behind it; when you stop, the page draws the arrow (.cursor-arrow) so the cell can circle round and pop in front of
   it once it's clear (.cursor-cell.is-front). It sets --hp-cursor inline for each step. */
:root { --hp-cursor: url("assets/honeypot-cursor.svg") 3 2, auto; }
html.cursor-js { --hp-cursor: url("assets/honeypot-cursor-arrow.svg") 3 2, auto; }
html, body, a, button, [role="button"], label, summary, .btn, .faq__btn, .chat__launch, .chat__chip, .chat__send, .chat__close, .chat__motion, .quote, .vsl__play {
  cursor: var(--hp-cursor);
}
input, textarea, [contenteditable="true"] { cursor: text; }
/* with the script, every element uses it (so nothing shows a hand on top of the page-drawn arrow) */
.cursor-js, .cursor-js * { cursor: var(--hp-cursor) !important; }
.cursor-js :is(input, textarea, select, [contenteditable="true"]) { cursor: text !important; }
/* the floating cell: the same size as the cell drawn in the cursor image */
.cursor-cell { position: fixed; left: 0; top: 0; z-index: 2147483000; width: 9.49px; height: 8.43px; pointer-events: none; opacity: 0; transition: opacity .3s ease; will-change: transform; }
.cursor-cell.is-on { opacity: 1; }
.cursor-cell.is-front { z-index: 2147483002; }
.cursor-cell svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cursor-arrow { position: fixed; left: 0; top: 0; z-index: 2147483001; width: 24px; height: 32px; pointer-events: none; display: none; }
.cursor-arrow.is-on { display: block; }

/* ============ REEL AND CAROUSEL PREVIEWS (Brian 2026-11-13) ============
   The reel looks like a real Instagram reel: honey dripping (the site's own footage) behind a Honeypot header, kinetic
   lines ("Your fleet." "Posted for you." "Booked from the DMs.") that end on the logo lockup, the like, comment and
   send icons and a progress line, on a 9 s loop. The carousel is four slides: an intro, then Drip, Pour (most popular)
   and Hive. No prices here: those wait for the pricing section near the bottom. Each plan's honeycomb cell holds a bit
   more honey, its surface slowly rolling. */
.mini-reel { isolation: isolate; height: 250px; }
.mini-reel__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 56% 0; }
.mini-reel::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 10, 12, .5), rgba(10, 10, 12, 0) 24%, rgba(10, 10, 12, .1) 46%, rgba(10, 10, 12, .9) 82%); }
.mini-reel::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: rgba(10, 10, 12, .72); opacity: 0; animation: reel-dim 9s ease infinite; }
@keyframes reel-dim { 0%, 64% { opacity: 0; } 70%, 94% { opacity: 1; } 100% { opacity: 0; } }
.mini-reel__head { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; align-items: center; gap: 7px; font: 600 11px/1 var(--display); color: #fff; }
.mini-reel__av { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; padding: 2px; background: linear-gradient(135deg, #FFCB2F, #E8890B); }
.mini-reel__av img { width: 100%; height: 100%; border-radius: 50%; background: #0A0A0C; padding: 2px; }
.mini-reel__follow { padding: 3px 7px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55); font-size: 9.5px; }
.mini-reel__lines { position: absolute; left: 12px; right: 36px; bottom: 30px; height: 2.2em; font: 800 21px/1.05 var(--display); letter-spacing: -0.02em; color: #fff; }
.mini-reel__lines span { position: absolute; left: 0; right: 0; bottom: 0; opacity: 0; animation: reel-l 9s cubic-bezier(.2, .8, .2, 1) infinite; text-shadow: 0 2px 14px rgba(0, 0, 0, .55); }
.mini-reel__lines span:nth-child(2) { animation-delay: 2s; }
.mini-reel__lines span:nth-child(3) { animation-delay: 4s; }
.mini-reel__lines em { font-style: normal; color: #FFCB2F; }
@keyframes reel-l { 0% { opacity: 0; transform: translateY(16px) scale(.96); } 3%, 19% { opacity: 1; transform: none; } 23%, 100% { opacity: 0; transform: translateY(-10px); } }
.mini-reel__lock { position: absolute; left: 10px; right: 10px; top: 50%; translate: 0 -50%; display: grid; justify-items: center; gap: 9px; text-align: center; opacity: 0; animation: reel-lock 9s cubic-bezier(.3, 1.2, .5, 1) infinite; }
.mini-reel__mark { width: 46px; height: 46px; }
.mini-reel__word { width: 62%; height: auto; }
.mini-reel__lock small { font: 700 11.5px/1.2 var(--display); color: #FFCB2F; }
@keyframes reel-lock { 0%, 66% { opacity: 0; transform: scale(.86); } 72%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.mini-reel__side { position: absolute; right: 9px; bottom: 34px; display: grid; gap: 11px; color: #fff; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .6)); }
.mini-reel__side svg { width: 17px; height: 17px; }
.mini-reel__prog { position: absolute; left: 10px; right: 10px; bottom: 10px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.mini-reel__prog i { display: block; height: 100%; width: 100%; background: #fff; transform-origin: 0 50%; animation: reel-prog 9s linear infinite; }
@keyframes reel-prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.mini-carousel { height: 250px; }
.mini-carousel__track { gap: 10px; }
.mini-carousel__track .cs { position: relative; flex: none; width: 150px; height: 176px; padding: 14px; border-radius: 14px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; overflow: hidden;
  background: linear-gradient(160deg, #2a2a30, #18181c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); color: var(--text); }
.cs b { font: 700 26px/1 var(--display); letter-spacing: -0.02em; }
.cs small { font-size: 11.5px; line-height: 1.3; color: var(--text-2); }
.cs__n { position: absolute; top: 13px; left: 14px; font: 700 10px/1 var(--display); letter-spacing: .02em; color: var(--amber); }
.cs__cell { position: absolute; top: 30px; right: 14px; width: 54px; height: 48px; overflow: visible; }
.cs__honey { animation: cs-roll 3.2s linear infinite; }
@keyframes cs-roll { to { transform: translateX(-60px); } }
.mini-carousel__track .cs--intro { justify-content: center; align-items: flex-start; gap: 10px;
  background: linear-gradient(180deg, rgba(10, 10, 12, .2), rgba(10, 10, 12, .85) 70%), url("assets/honeycomb-loop-poster.webp") 50% 100% / cover; }
.cs--intro .cs__mark { width: 34px; height: 34px; }
.cs--intro b { font-size: 19px; line-height: 1.08; }
.cs--intro .cs__word { width: 74px; height: auto; opacity: .85; }
.mini-carousel__track .cs--pop { background: linear-gradient(160deg, #FFD24A, #F6AE17 55%, #E8890B); box-shadow: none; color: #1A1206; }
.cs--pop small { color: rgba(26, 18, 6, .78); }
.cs--pop .cs__n { color: #1A1206; }
.mini-carousel__track { animation-name: slide4; animation-duration: 12s; }
@keyframes slide4 { 0%, 21% { transform: none; } 25%, 46% { transform: translateX(-160px); } 50%, 71% { transform: translateX(-320px); } 75%, 96% { transform: translateX(-480px); } 100% { transform: none; } }
.dots i { animation-name: dot4; animation-duration: 12s; }
.dots i:nth-child(2) { animation-delay: 3s; }
.dots i:nth-child(3) { animation-delay: 6s; }
.dots i:nth-child(4) { animation-delay: 9s; }
@keyframes dot4 { 0%, 23% { background: var(--amber); } 25%, 100% { background: var(--s3); } }
@media (max-width: 760px) { .mini-reel, .mini-carousel { height: 230px; } }

/* ============ APPROVALS AND THE WEEK, MOVING (Brian 2026-11-13) ============
   - Weekend lineup's thumbnail is a little Honeypot post (mark and wordmark).
   - Approved this week: on an 8 s loop the Approve button is pressed, it turns to "Approved", the count ticks from
     6 to 7 and the honey bar fills to 7 of 7, then it all resets.
   - This week: six notifications slide in one after another (a new one every 2 s, four on screen), filling the panel
     under the calendar. */
.thumb--hp { display: grid; place-items: center; align-content: center; gap: 5px; background: radial-gradient(90% 60% at 50% 15%, rgba(250, 171, 28, .45), transparent 70%), #1b1b1f; box-shadow: inset 0 0 0 1px var(--line); }
.thumb--hp img:first-child { width: 26px; height: 26px; }
.thumb--hp img:last-child { width: 46px; height: auto; }
.stack .pill--yes { animation: press 8s infinite; }
.stack .pill__label { animation: label-out 8s infinite; }
.stack .pill__done { animation: done-in 8s infinite; }
.stack__card--row { flex-wrap: wrap; row-gap: 12px; }
.stack__count .stack__n { display: inline-block; height: 1.1em; overflow: hidden; vertical-align: bottom; line-height: 1.1; }
.stack__n span { display: block; animation: tick67 8s cubic-bezier(.3, 1.3, .5, 1) infinite; }
@keyframes tick67 { 0%, 47% { transform: none; } 53%, 88% { transform: translateY(-100%); } 94%, 100% { transform: none; } }
.stack__bar { flex-basis: 100%; height: 6px; border-radius: 999px; background: var(--s3); overflow: hidden; }
.stack__bar i { display: block; height: 100%; width: 85.7%; border-radius: inherit; background: linear-gradient(90deg, #FFCB2F, #F6AE17); box-shadow: 0 0 12px rgba(250, 171, 28, .5); animation: fill67 8s cubic-bezier(.45, 0, .2, 1) infinite; }
@keyframes fill67 { 0%, 48% { width: 85.7%; } 58%, 88% { width: 100%; } 95%, 100% { width: 85.7%; } }
.feed { position: absolute; left: 28px; right: 28px; top: 206px; height: 280px; pointer-events: none; }
.feed .feed__n { position: absolute; left: 0; top: 0; padding: 10px 16px 10px 10px; opacity: 0; animation: feed 12s cubic-bezier(.3, .8, .3, 1) infinite; }
.feed__n .hexi { width: 28px; height: 25px; color: #1A1206; }
.feed__n:nth-child(2) { animation-delay: -10s; }
.feed__n:nth-child(3) { animation-delay: -8s; }
.feed__n:nth-child(4) { animation-delay: -6s; }
.feed__n:nth-child(5) { animation-delay: -4s; }
.feed__n:nth-child(6) { animation-delay: -2s; }
/* each one: slides in at the top, steps down a slot every 2 s, then fades out at the bottom */
@keyframes feed {
  0% { opacity: 0; transform: translateY(-16px) scale(.96); }
  4%, 16% { opacity: 1; transform: none; }
  21%, 33% { opacity: 1; transform: translateY(70px); }
  38%, 50% { opacity: 1; transform: translateY(140px); }
  55%, 66% { opacity: 1; transform: translateY(210px); }
  71%, 100% { opacity: 0; transform: translateY(228px) scale(.96); }
}
@media (max-width: 760px) { .feed { left: 14px; right: 14px; top: 186px; } .how__visual { min-height: 500px; } }