:root{
  --sky:#e9f3fc;
  --sky-deep:#dbecfb;
  --card:#ffffff;
  --ink:#122a41;
  --ink-soft:#3c5a79;
  --muted:#596f87;         /* AA on both --card and --sky */
  --line:#c9dcef;
  --line-soft:#e4eff9;

  --honey:#f0a92c;         /* primary action — the hive */
  --honey-deep:#d68d12;    /* action hover + fills, never small text */
  --honey-text:#97630d;    /* the amber that passes AA as text */
  --honey-wash:#fdf0d6;

  --dm:#2f9bf0;            /* secondary, links + system accents */
  --dm-deep:#1f7fd0;
  --dm-bub:#1d78c5;        /* white text on this clears AA */
  --chip:#dbeeff;
  --booked:#2fae63;        /* fills and dots */
  --booked-text:#24874d;   /* AA as text */
  --amber:#9a6212;

  --mono:'JetBrains Mono',ui-monospace,monospace;
  --serif:'Source Serif 4',Georgia,serif;
  --body:'Inter',system-ui,sans-serif;

  /* one radius scale, so nothing is a one-off */
  --r-xs:8px;
  --r-sm:12px;
  --r-md:16px;
  --r-lg:20px;
  --r-xl:26px;
  --r-2xl:36px;
  --r-pill:999px;

  /* three elevations, used in order of importance */
  --sh-1:0 1px 2px rgba(18,42,65,.04),0 4px 12px rgba(18,42,65,.05);
  --sh-2:0 2px 6px rgba(18,42,65,.05),0 14px 30px rgba(18,42,65,.09);
  --sh-3:0 8px 20px rgba(18,42,65,.08),0 32px 74px rgba(18,42,65,.14);

  --comb:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='96' viewBox='0 0 56 96'%3E%3Cpath d='M28 0 L56 16 L56 48 L28 64 L0 48 L0 16 Z M28 64 L28 96' fill='none' stroke='%23c9def2' stroke-width='1.5'/%3E%3C/svg%3E");

  /* the comb cell, as a shape. one motif, reused: eyebrow bullets, icon
     tiles, list markers, timeline nodes. a pointy-top hexagon is √3/2 as
     wide as it is tall, so any box using it wants aspect-ratio .866 */
  --hex:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);

  /* film grain, kept faint enough to read as paper rather than noise */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");

  /* a card is white, but never flat white — a hair of warmth at the top */
  --surface:linear-gradient(180deg,#ffffff,#fcfdff);
  --nectar:linear-gradient(180deg,#f6ba46,#f0a92c 52%,#e39a1c);
  --nectar-hi:linear-gradient(180deg,#f9c65e,#f2b13a 52%,#d68d12);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--sky);
  /* the sky deepens toward the ground, so the page has a horizon rather than
     one flat fill. fixed, so it doesn't slide against the scroll. */
  background-image:linear-gradient(180deg,var(--sky) 0%,var(--sky) 26%,#e3edf8 78%,#dfeaf6 100%);
  background-attachment:fixed;
  color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden
}
/* grain sits on the sky only: it is first in tree order, so every positioned
   thing after it — hero card, sections, footer — paints on top, clean. */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:var(--grain);background-size:180px 180px;opacity:.05;mix-blend-mode:multiply}
::selection{background:var(--honey);color:#20344a}
a{color:inherit}
img{max-width:100%}
.wrap{max-width:1160px;margin:0 auto;padding-left:24px;padding-right:24px}
.skip{position:absolute;left:-9999px;top:0;background:var(--card);color:var(--ink);padding:12px 18px;border-radius:var(--r-xs);font-weight:600;z-index:100}
.skip:focus{left:16px;top:12px}

/* ============ nav ============ */
nav{position:sticky;top:0;z-index:60;background:rgba(233,243,252,.82);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .2s,background .2s,box-shadow .2s}
nav.stuck{border-bottom-color:var(--line);background:rgba(233,243,252,.94);box-shadow:0 10px 30px -18px rgba(18,42,65,.4)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:74px;gap:20px}
.logo{font-family:var(--serif);font-weight:700;letter-spacing:-.015em;font-size:23px;text-decoration:none;display:flex;align-items:center;gap:0;white-space:nowrap}
.logo .mark{margin-right:9px}
.logo .dot{color:var(--honey-text)}
.logo .mark{width:24px;height:24px;flex-shrink:0}
.nav-links{display:flex;gap:30px;align-items:center;margin-left:auto}
.nav-links a{position:relative;text-decoration:none;color:var(--ink-soft);font-size:15px;font-weight:500;transition:color .15s}
.nav-links a:hover{color:var(--ink)}
/* the rule wipes in from the left rather than fading — it reads as a pointer */
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-7px;height:2px;border-radius:2px;background:var(--honey);transition:right .24s cubic-bezier(.2,.7,.3,1)}
.nav-links a:hover::after{right:0}
.nav-actions{display:flex;align-items:center;gap:12px}

/* hamburger — only ever visible under 940px */
.nav-toggle{display:none;width:44px;height:44px;border:1px solid var(--line);background:var(--card);border-radius:var(--r-sm);cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:0;transition:border-color .16s}
.nav-toggle:hover{border-color:var(--honey)}
.nt-bar{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s,opacity .2s}
.nav-toggle[aria-expanded="true"] .nt-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nt-bar:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nt-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* the honey button is lit from above: a gradient body, a white hairline along
   the top edge, and a warm shadow the same hue as the fill */
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--nectar);color:#20344a;text-decoration:none;font-weight:700;font-size:15px;padding:14px 26px;border-radius:var(--r-pill);border:none;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 1px 2px rgba(18,42,65,.10),0 8px 20px rgba(184,120,12,.24);
  transition:transform .16s,box-shadow .16s,background .16s}
.btn:hover{background:var(--nectar-hi);transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 2px 4px rgba(18,42,65,.10),0 14px 30px rgba(184,120,12,.30)}
.btn:active{transform:translateY(0);box-shadow:inset 0 2px 4px rgba(120,76,6,.22),0 2px 6px rgba(184,120,12,.2)}
.btn .arr{transition:transform .16s}
.btn:hover .arr{transform:translateX(3px)}
.btn-sm{padding:11px 20px;font-size:13px;letter-spacing:.05em;text-transform:uppercase}
.btn-ghost{background:var(--surface);border:1px solid var(--line);color:var(--ink);box-shadow:inset 0 1px 0 #fff,var(--sh-1);font-weight:600}
.btn-ghost:hover{background:var(--surface);border-color:var(--honey);box-shadow:inset 0 1px 0 #fff,var(--sh-2)}
.btn-ghost:active{box-shadow:inset 0 1px 3px rgba(18,42,65,.10)}
.btn:focus-visible,a:focus-visible,summary:focus-visible,.ptab:focus-visible,.nav-toggle:focus-visible{outline:2.5px solid var(--honey-text);outline-offset:3px;border-radius:6px}

/* ============ type ============ */
/* every section opens with one comb cell — the same shape as the icon tiles,
   the list markers and the timeline nodes, so the motif reads as structure
   rather than decoration */
.kicker{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--honey-text);margin-bottom:14px;display:flex;align-items:center;gap:11px}
/* aligned to the first line, not the block: at narrow widths an eyebrow wraps
   to two lines and a centred cell floats between them */
.kicker::before{content:"";width:11px;height:13px;flex-shrink:0;align-self:flex-start;margin-top:.45em;background:var(--honey);clip-path:var(--hex)}
.center .kicker,.cta .kicker{justify-content:center}
h1{font-family:var(--serif);font-weight:600;font-size:clamp(38px,4.9vw,68px);line-height:1.05;letter-spacing:-.022em;margin-bottom:22px;text-wrap:balance;font-optical-sizing:auto}
h1 .u{background:linear-gradient(transparent 68%,rgba(240,169,44,.42) 68%)}
h2{font-family:var(--serif);font-weight:600;font-size:clamp(30px,3.9vw,46px);letter-spacing:-.018em;line-height:1.11;margin-bottom:16px;max-width:700px;text-wrap:balance;font-optical-sizing:auto}
h3{text-wrap:balance}
.lead{color:var(--ink-soft);font-size:18px;max-width:620px;text-wrap:pretty}
p{text-wrap:pretty}
section{padding-top:100px;padding-bottom:100px;position:relative;z-index:5}
.center{text-align:center}
.center h2,.center .lead{margin-left:auto;margin-right:auto}

/* headline icon chips */
.chip{display:inline-flex;align-items:center;justify-content:center;width:.92em;height:.92em;border-radius:50%;background:var(--chip);vertical-align:-.1em;margin:0 .05em}
.chip svg{width:54%;height:54%;fill:var(--ink)}

/* ============ scroll reveal ============ */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}

/* ============ bees ============ */
.flightdeck{position:fixed;inset:0;pointer-events:none;z-index:3;overflow:hidden;contain:strict}
/* every content band outranks the swarm, so bees pass behind text and cards.
   the hero is the exception: its art sits at 2 and its copy at 4, so bees
   thread between the hive and the headline. */
.trust,footer{position:relative;z-index:5}
.sbee{position:absolute;top:0;left:0;will-change:transform,opacity;transform-origin:50% 50%}
.sbee-in{transform-origin:50% 50%}
.sbee svg{display:block;width:100%;height:auto;overflow:visible}

/* wings beat at the shoulder, independently of the flight path */
.wing{transform-box:fill-box;animation:flap .15s linear infinite}
.wing.fore{transform-origin:97% 80%}
.wing.hind{transform-origin:97% 78%;animation-delay:.05s}
.wing.far{transform-origin:97% 80%;animation-delay:.075s}
@keyframes flap{0%,100%{transform:rotate(-26deg) scaleY(1)}50%{transform:rotate(14deg) scaleY(.5)}}

/* ============ hero ============ */
.hero-outer{max-width:1440px;margin:0 auto;padding:26px 14px 0}
.hero-card{position:relative;overflow:hidden;background:linear-gradient(180deg,#f3f9fe,#e4f0fb);border:1px solid #dbe9f7;border-radius:var(--r-2xl);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),var(--sh-3)}
.hero-card::before{content:"";position:absolute;inset:0;background-image:var(--comb);opacity:.42;mask-image:radial-gradient(120% 90% at 78% 34%,#000 12%,transparent 68%);-webkit-mask-image:radial-gradient(120% 90% at 78% 34%,#000 12%,transparent 68%);pointer-events:none}
.hero{position:relative;display:block;min-height:730px}
.hero-copy{position:absolute;top:0;left:0;width:50%;height:100%;display:flex;flex-direction:column;justify-content:center;padding:40px 12px 40px 72px;z-index:4}
.hero-copy .kicker{font-size:22px;margin-bottom:18px}
.hero-art{position:absolute;top:0;right:1.5%;bottom:0;width:52%;padding:18px 0;z-index:2;display:flex;align-items:center;justify-content:center}
/* the stage is locked to the artwork's own ratio, so every .part placed in %
   lands on the same pixel of the drawing at any width. do not give it a
   max-height: that would letterbox the img and slide the parts out of register. */
.hero-stage{position:relative;width:100%;aspect-ratio:1100/915;will-change:transform;animation:hover-hive 7s ease-in-out infinite}
.hero-img{width:100%;height:100%;display:block}
.part{position:absolute;display:block;height:auto;pointer-events:none;will-change:transform}
.head-b .head-img{width:100%;height:auto;display:block}

/* --- heads. cut with their antennae attached and hinged at the neck, so the
       whole head turns as one piece. kept under 3deg: the cut edge is healed
       into the base plate underneath, and a wider swing would expose it. --- */
.head-a{left:48.727%;top:5.902%;width:16.727%;transform-origin:53.8% 96.3%;animation:tilt-a 4.3s ease-in-out infinite}
.head-b{left:31.727%;top:17.705%;width:14.636%;transform-origin:47.2% 95.1%;animation:tilt-b 5.3s ease-in-out infinite .7s}
@keyframes tilt-a{
  0%,100%{transform:rotate(-1.5deg)}
  28%{transform:rotate(2.4deg)}   52%{transform:rotate(.6deg)}
  76%{transform:rotate(-2.4deg)}
}
@keyframes tilt-b{
  0%,100%{transform:rotate(1.6deg)}
  22%{transform:rotate(-2.2deg)}  46%{transform:rotate(-.4deg)}
  70%{transform:rotate(2.6deg)}
}

/* --- the two loose wings, hinged at the shoulder --- */
.wing-a{left:62.909%;top:19.672%;width:10.818%;transform-origin:8.4% 64.9%;animation:flap-a 2.4s linear infinite}
.wing-b{left:24.818%;top:35.738%;width:11.455%;transform-origin:92.9% 43.7%;animation:flap-b 2.9s linear infinite .6s}

/* a fast burst of flutter, then a rest — a loop that never stops reads as a
   machine, not a bee. linear, not eased: each beat has to snap.
   the two wings run different periods so they never sync up. */
@keyframes flap-a{
  0%,48%{transform:rotate(0deg)}
  51%{transform:rotate(-8deg)}   54%{transform:rotate(13deg)}
  57%{transform:rotate(-8deg)}   60%{transform:rotate(13deg)}
  63%{transform:rotate(-7deg)}   66%{transform:rotate(11deg)}
  69%{transform:rotate(-6deg)}   72%{transform:rotate(9deg)}
  75%{transform:rotate(-4deg)}   78%{transform:rotate(6deg)}
  81%{transform:rotate(-2deg)}   84%,100%{transform:rotate(0deg)}
}
@keyframes flap-b{
  0%,32%{transform:rotate(0deg)}
  35%{transform:rotate(11deg)}   38%{transform:rotate(-14deg)}
  41%{transform:rotate(10deg)}   44%{transform:rotate(-13deg)}
  47%{transform:rotate(9deg)}    50%{transform:rotate(-11deg)}
  53%{transform:rotate(7deg)}    56%{transform:rotate(-8deg)}
  59%{transform:rotate(5deg)}    62%{transform:rotate(-5deg)}
  65%{transform:rotate(3deg)}    68%,100%{transform:rotate(0deg)}
}

/* --- eyebrows: dark strokes lifted off flat skin, so the hole behind them
       heals invisibly. --br flips the arch for the right-hand brow. --- */
.brow{animation:brow-lift 4.1s ease-in-out infinite}
.brow-c1{left:37.364%;top:61.749%;width:2.455%}
.brow-c2{left:42.182%;top:60.546%;width:4.364%;--br:2deg}
.brow-d1{left:62.545%;top:58.361%;width:6.636%;animation-duration:4.9s;animation-delay:1.6s}
.brow-d2{left:69.273%;top:57.377%;width:4.636%;--br:2deg;animation-duration:4.9s;animation-delay:1.6s}
@keyframes brow-lift{
  0%,58%{transform:translateY(0) rotate(0deg)}
  68%{transform:translateY(-12%) rotate(var(--br,-2deg))}
  84%{transform:translateY(-12%) rotate(var(--br,-2deg))}
  94%,100%{transform:translateY(0) rotate(0deg)}
}

/* --- eyelids. NOT a squashed image: each lid is a 10-frame sprite strip, and
       every frame is drawn properly — the lid edge is a curve interpolated from
       the eye's own top contour down to its bottom contour, so the lid falls
       onto the eye and the eye keeps its shape as it narrows. scaleY was the
       earlier approach and it distorted the skin and thinned the lash line.
       the frames are cut from the eye's real silhouette and filled with skin
       healed from that face, so the fill carries the bee's local shading.
       frame 0 is empty = eye fully open, which is where a lid sits ~93% of the
       time. both lids on a bee must share a duration AND a delay, or it winks.
       bee B's lids live inside .head-b, so they turn with its head. --- */
.lid{background-repeat:no-repeat;background-size:1000% 100%;background-position-x:0%;
     animation:blink 2.7s infinite}
.lid-b1{left:19.255%;top:53.005%;width:32.298%;aspect-ratio:52/46;background-image:url(../assets/parts/lidB1.webp?v=5)}
.lid-b2{left:65.217%;top:49.180%;width:24.224%;aspect-ratio:39/44;background-image:url(../assets/parts/lidB2.webp?v=5)}
.lid-b1,.lid-b2{animation-duration:3.5s;animation-delay:1.1s}
.lid-c1{left:37.727%;top:66.776%;width:4.545%;aspect-ratio:50/54;background-image:url(../assets/parts/lidC1.webp?v=5)}
.lid-c2{left:43.545%;top:65.137%;width:4.091%;aspect-ratio:45/51;background-image:url(../assets/parts/lidC2.webp?v=5)}
.lid-d1{left:63.545%;top:62.514%;width:4.455%;aspect-ratio:49/49;background-image:url(../assets/parts/lidD1.webp?v=5)}
.lid-d2{left:68.727%;top:63.825%;width:5.909%;aspect-ratio:65/59;background-image:url(../assets/parts/lidD2.webp?v=5)}
.lid-d1,.lid-d2{animation-duration:3.1s;animation-delay:1.9s}
/* jump-none is what lands on both end frames — plain steps() skips one of them.
   shutting takes longer than opening, which is how a real blink reads. */
@keyframes blink{
  0%,88%{background-position-x:0%;animation-timing-function:steps(10,jump-none)}
  95%{background-position-x:100%;animation-timing-function:steps(10,jump-none)}
  100%{background-position-x:0%}
}
/* the point the swarm flies home to, sat over the hive mouth in the artwork.
   it carries the same float as the art, so the marker never drifts off the
   entrance mid-cycle and the bees keep landing on the right spot. */
.hive-mouth{position:absolute;left:50%;top:52%;width:1px;height:1px;pointer-events:none;animation:hover-hive 7s ease-in-out infinite}
@keyframes hover-hive{
  0%,100%{transform:translateY(0)     scale(1)}
  50%    {transform:translateY(-12px) scale(1.014)}
}
/* the hive breathes light. z-index:-1 puts the halo *behind* the artwork
   inside .hero-art's stacking context, so it spills around the silhouette
   instead of veiling the drawing. cheap to run: opacity + transform only. */
.hero-art::before{
  content:"";position:absolute;left:50%;top:52%;width:520px;height:520px;
  margin:-260px 0 0 -260px;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,rgba(240,169,44,.62),rgba(240,169,44,.18) 42%,rgba(240,169,44,0) 70%);
  pointer-events:none;
  animation:hive-glow 3.6s ease-in-out infinite
}
@keyframes hive-glow{
  0%,100%{opacity:.16;transform:scale(.9)}
  50%    {opacity:.62;transform:scale(1.08)}
}
.sub{font-size:19px;color:var(--ink-soft);font-weight:500;max-width:520px;margin-bottom:26px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-note{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin-top:22px;display:flex;align-items:center;gap:9px}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--booked);box-shadow:0 0 0 0 rgba(47,174,99,.6);animation:pulse 2.2s infinite;flex-shrink:0}
@keyframes pulse{70%{box-shadow:0 0 0 11px rgba(47,174,99,0)}100%{box-shadow:0 0 0 0 rgba(47,174,99,0)}}
.grass-band{height:170px;position:relative;z-index:3}
.grass-band svg{display:block;width:100%;height:100%}

/* ============ trust marquee ============ */
.trust{padding-top:56px;padding-bottom:8px;overflow:hidden}
.trust-label{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:center;margin-bottom:26px}
.marquee{position:relative;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;gap:56px;width:max-content;animation:slide 34s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.mq-item{font-family:var(--serif);font-weight:600;font-size:21px;letter-spacing:-.01em;color:#6e8faf;white-space:nowrap;display:flex;align-items:center;gap:10px;padding:6px 0}
.mq-item .d{width:7px;height:8px;clip-path:var(--hex);background:var(--line)}

/* ============ numbers ============ */
.nums{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.num{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 28px 28px;box-shadow:inset 0 1px 0 #fff,var(--sh-1);transition:transform .22s,box-shadow .22s,border-color .22s}
.num:hover{transform:translateY(-4px);box-shadow:inset 0 1px 0 #fff,var(--sh-2);border-color:#e3c48a}
/* honey rule along the top edge — the one place the fill tokens are allowed to be loud */
.num::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--honey),var(--honey-deep))}
/* comb texture bleeding out of the top-right corner; reuses the shared --comb tile */
.num::after{content:'';position:absolute;top:-24px;right:-22px;width:150px;height:150px;background:var(--comb);background-size:36px 62px;opacity:.5;pointer-events:none}
.num-ico{position:relative;width:42px;height:48px;clip-path:var(--hex);background:linear-gradient(165deg,#fbe3b6,#fdf3e1);display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.num-ico svg{width:19px;height:19px;fill:none;stroke:var(--honey-text);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.num b{position:relative;display:block;font-family:var(--serif);font-weight:600;font-size:clamp(38px,4.4vw,54px);line-height:1.02;letter-spacing:-.03em;margin-bottom:10px;color:var(--honey-text);font-variant-numeric:tabular-nums}
.num span{position:relative;display:block;font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.num em{position:relative;display:block;font-style:normal;font-size:13.5px;line-height:1.5;color:var(--muted);margin-top:7px;padding-top:12px;border-top:1px solid var(--line-soft)}
.nums-note{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:18px}

/* ============ cards ============ */
/* the cards share their row heights via subgrid, so the icons, the headings
   and — the point of it — the hairline above each payoff line all sit on the
   same baseline across the row, however unequal the copy is. four rows:
   icon / heading / body / payoff. the body row takes the 1fr, so it is the
   one that stretches. row-gap is 0 here because the parent's gap would
   otherwise land between the rows *inside* every card; spacing inside a card
   comes from margins. subgrid is switched off with the single-column layout
   below, where there is nothing to align against. */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto 1fr auto;column-gap:16px;row-gap:0;margin-top:48px}
.card{position:relative;grid-row:span 4;display:grid;grid-template-rows:subgrid;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px 28px;transition:transform .22s,box-shadow .22s,border-color .22s;box-shadow:inset 0 1px 0 #fff,var(--sh-1)}
.card:hover{transform:translateY(-4px);box-shadow:inset 0 1px 0 #fff,var(--sh-2);border-color:#e3c48a}
.card .ico{width:46px;height:53px;clip-path:var(--hex);background:linear-gradient(165deg,#fbe3b6,#fdf3e1);display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.card .ico svg{width:21px;height:21px;fill:none;stroke:var(--honey-text);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-family:var(--serif);font-size:21px;font-weight:600;letter-spacing:-.012em;margin-bottom:10px}
.card p{font-size:14.5px;color:var(--ink-soft)}
.card p+p{margin-top:11px}
.card-body{margin-bottom:18px}
/* the answer to the problem stated above it — same device as .leak .fix,
   marked with a comb cell rather than an arrow because the last card ends on
   a conclusion rather than on something we do */
/* align-self:start, not the auto top margin you would reach for: the payoff
   row is sized to the longest of the three, and an auto margin would drop each
   shorter one to the bottom of it — which is exactly the misalignment the
   subgrid is here to remove */
.card .turn{align-self:start;padding-top:16px;border-top:1px solid var(--line);font-size:14.5px;line-height:1.55;color:var(--ink);display:flex;gap:11px;align-items:baseline}
.card .turn::before{content:"";width:9px;height:10px;margin-bottom:3px;flex-shrink:0;background:var(--honey);clip-path:var(--hex)}

/* ============ proof / conversation ============ */
/* the phone is a tall object and the copy beside it is short — top-aligning
   the two left a 265px hole under the copy. the column stretches instead and
   the three points share the slack, so the two columns end level whichever
   tab is open (the threads differ by ~80px between them). */
.proof-grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(380px,33vw,470px);gap:clamp(36px,4.2vw,60px);align-items:stretch;margin-top:48px}
.proof-copy{display:flex;flex-direction:column}
.phone{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:22px 18px 18px;box-shadow:inset 0 1px 0 #fff,var(--sh-3)}
.phone-head{display:flex;align-items:center;gap:11px;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:16px}
.avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--honey),#f26b6b);flex-shrink:0}
.phone-head .who{font-size:14.5px;font-weight:600}
.phone-head .via{font-size:11.5px;color:var(--muted)}
.phone-head .stat{font-family:var(--mono);font-size:11px;color:var(--booked-text);margin-left:auto}
.thread{display:flex;flex-direction:column;gap:9px;min-height:400px}
.bub{max-width:84%;padding:10px 14px;border-radius:17px;font-size:13.5px;line-height:1.45}
/* with JS on, the bubbles hold until the thread scrolls into view — the typing
   beat is the whole point, and it used to be spent before anyone reached it */
.js .bub{opacity:0;transform:translateY(9px)}
.js .phone.live .pv.on .bub{animation:pop .45s ease forwards}
.bub.them{align-self:flex-start;background:#eef4fa;color:var(--ink);border-bottom-left-radius:5px}
.bub.me{align-self:flex-end;background:var(--dm-bub);color:#fff;border-bottom-right-radius:5px}
.bub.sys{align-self:center;background:transparent;border:1px dashed var(--booked);color:var(--booked-text);font-family:var(--mono);font-size:11.5px;border-radius:var(--r-xs);max-width:100%;text-align:center}
@keyframes pop{to{opacity:1;transform:none}}
.thread .bub:nth-child(1){animation-delay:.2s}.thread .bub:nth-child(2){animation-delay:.7s}
.thread .bub:nth-child(3){animation-delay:1.2s}.thread .bub:nth-child(4){animation-delay:1.7s}
.thread .bub:nth-child(5){animation-delay:2.2s}.thread .bub:nth-child(6){animation-delay:2.7s}
.thread .bub:nth-child(7){animation-delay:3.2s}.thread .bub:nth-child(8){animation-delay:3.7s}
.thread .bub:nth-child(9){animation-delay:4.2s}.thread .bub:nth-child(10){animation-delay:4.7s}
.redact{filter:blur(5px);user-select:none}
.ptabs{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.ptab{font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;padding:9px 15px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--card);color:var(--ink-soft);cursor:pointer;transition:color .16s,border-color .16s,background .16s}
.ptab:hover{color:var(--ink);border-color:var(--honey)}
.ptab.on{background:var(--ink);border-color:var(--ink);color:#fff}
.pv{display:none}
.pv.on{display:block}
.proof-points{list-style:none;margin-top:28px;flex:1;display:flex;flex-direction:column}
/* flex:1 is what spreads them; centred rather than baselined because a row
   is now much taller than its text and a baseline marker would hang at the
   bottom of it */
.proof-points li{flex:1;padding:14px 0;border-top:1px solid var(--line);display:flex;gap:13px;align-items:center;font-size:15px;color:var(--ink-soft)}
/* an empty flex item baselines on its bottom edge, so the margin is what
   lifts the cell up onto the line rather than hanging off it */
.proof-points li::before{content:"";width:9px;height:10px;flex-shrink:0;background:var(--honey);clip-path:var(--hex)}
.proof-points b{color:var(--ink);font-weight:600}

/* ============ leaks ============ */
.leaks{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:48px}
.leak{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 28px;transition:transform .22s,box-shadow .22s,border-color .22s;box-shadow:inset 0 1px 0 #fff,var(--sh-1)}
.leak:hover{transform:translateY(-4px);box-shadow:inset 0 1px 0 #fff,var(--sh-2);border-color:#e3c48a}
/* the leak seals on hover: a honey seam runs down the open edge */
.leak::before{content:"";position:absolute;left:0;top:0;bottom:100%;width:3px;background:linear-gradient(180deg,var(--honey),var(--honey-deep));transition:bottom .3s cubic-bezier(.2,.7,.3,1)}
.leak:hover::before{bottom:0}
.leak .ln{font-family:var(--mono);font-size:11.5px;color:var(--amber);letter-spacing:.07em;text-transform:uppercase;display:block;margin-bottom:12px}
.leak h3{font-family:var(--serif);font-weight:600;font-size:22px;letter-spacing:-.012em;margin-bottom:10px}
.leak p{font-size:14.5px;color:var(--ink-soft)}
.leak .fix{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:13.5px;color:var(--ink);display:flex;gap:9px;align-items:baseline}
.leak .fix::before{content:"\2192";color:var(--honey-text);flex-shrink:0;font-weight:700}
.leak.payoff{grid-column:1/-1;border-color:var(--honey);background:linear-gradient(180deg,var(--honey-wash),var(--card) 62%)}
.leak.payoff::before{bottom:0;background:linear-gradient(180deg,var(--honey),var(--honey-deep))}
.leak.payoff .ln{color:var(--honey-text)}
.leak.payoff p{color:var(--ink);font-size:15.5px}

/* ============ journey ============ */
/* the section used to be one 820px column inside a 1160px wrap, which left a
   third of the row empty and pushed five steps into a very long scroll. the
   copy now holds a sticky rail on the left — same two-column idea as #proof,
   so it reads as the page's pattern rather than a one-off — and the timeline
   gets the width back. #jline still measures .journey, so nothing in JS
   changes. */
.how-grid{display:grid;grid-template-columns:clamp(320px,29vw,410px) minmax(0,1fr);gap:clamp(40px,4.4vw,64px);align-items:start}
.how-intro{position:sticky;top:110px}
.how-intro h2{max-width:none}
.how-intro .lead{font-size:17px}

.journey{position:relative;padding-left:36px}
.journey::before{content:"";position:absolute;left:10px;top:10px;bottom:10px;width:2px;background:var(--line)}
.jline{position:absolute;left:10px;top:10px;width:2px;background:var(--honey);height:0;transition:height 1.1s ease}
.jstep{position:relative;padding-bottom:38px}
.jstep:last-child{padding-bottom:0}
/* comb cells, not dots — the same shape the eyebrows and icon tiles use.
   solid, because a clip-path would cut a ring's border into fragments. */
.jstep::before{content:"";position:absolute;left:-32px;top:5px;width:14px;height:16px;clip-path:var(--hex);background:var(--honey);z-index:2}
.jstep.booked::before{background:var(--booked)}
.jstep .jnum{font-family:var(--mono);font-size:11.5px;color:var(--honey-text);display:block;margin-bottom:7px;letter-spacing:.06em}
.jstep h3{font-family:var(--serif);font-weight:600;font-size:23px;letter-spacing:-.01em;margin-bottom:8px}
.jstep p{color:var(--ink-soft);font-size:15px}
/* an annotation on the step, not another card: no elevation, no full border —
   just a tint and the honey edge. five shadowed boxes in a column read as
   clutter next to the cards above and below this section. */
.jstep .example{margin-top:15px;font-family:var(--mono);font-size:12.5px;line-height:1.65;background:rgba(255,255,255,.55);border-left:3px solid var(--honey);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:14px 18px;color:var(--ink)}
.jstep .example em{color:var(--muted);font-style:normal;display:block;margin-bottom:5px;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em}

/* ============ comparison ============ */
.vs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px;align-items:start}
.vs-col{border-radius:var(--r-lg);padding:30px 28px;border:1px solid var(--line);background:var(--surface);box-shadow:inset 0 1px 0 #fff,var(--sh-1)}
/* our column carries a little more weight — warmer fill, deeper shadow, and
   it sits a step proud of the two beside it */
.vs-col.us{border-color:var(--honey);background:linear-gradient(180deg,var(--honey-wash),var(--card) 60%);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 4px 10px rgba(184,120,12,.08),0 20px 46px rgba(184,120,12,.16);margin-top:-10px;padding-top:40px}
.vs-col .vh{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.vs-col.us .vh{color:var(--honey-text)}
.vs-col h3{font-family:var(--serif);font-weight:600;font-size:23px;letter-spacing:-.012em;margin-bottom:18px}
.vs-col ul{list-style:none}
/* a fixed row height, so the three columns stay rung-for-rung level. without
   it a single item that wraps to two lines drags one column's remaining rows
   out of step with the other two, and the bottoms go ragged. */
.vs-col li{min-height:46px;padding:11px 0;border-top:1px solid var(--line);font-size:14.5px;color:var(--ink-soft);display:flex;gap:11px;align-items:baseline}
.vs-col li::before{content:"";width:8px;height:9px;margin-bottom:3px;flex-shrink:0;background:var(--line);clip-path:var(--hex)}
.vs-col.us li{color:var(--ink)}
.vs-col.us li::before{background:var(--honey)}

/* ============ honest band ============ */
/* translucent, never solid — a solid fill here would black-hole the swarm,
   since bees run at z-index 3 and every content band sits at 5 */
.honest{background:rgba(255,255,255,.82);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}
/* comb wash across the band, faded out from the left so the copy stays clean */
.honest::before{content:"";position:absolute;inset:0;background-image:var(--comb);opacity:.5;pointer-events:none;
  mask-image:linear-gradient(100deg,transparent 38%,#000 100%);-webkit-mask-image:linear-gradient(100deg,transparent 38%,#000 100%)}
.honest>.wrap{position:relative;z-index:1}
.honest-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:40px}
.honest-item h3{font-size:17px;font-weight:600;margin-bottom:10px;display:flex;gap:10px;align-items:baseline}
.honest-item h3::before{content:"";width:9px;height:10px;margin-bottom:2px;flex-shrink:0;background:var(--honey);clip-path:var(--hex)}
.honest-item p{font-size:14.5px;color:var(--ink-soft)}

/* ============ faq ============ */
.faq{margin-top:44px;max-width:820px;margin-left:auto;margin-right:auto;text-align:left}
.faq details{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);margin-bottom:12px;overflow:hidden;box-shadow:inset 0 1px 0 #fff,var(--sh-1);transition:border-color .18s,box-shadow .18s}
.faq details:hover{border-color:#b7d3ec}
.faq details[open]{border-color:var(--honey);box-shadow:inset 0 1px 0 #fff,0 6px 18px rgba(184,120,12,.12)}
.faq summary{cursor:pointer;list-style:none;padding:21px 24px;font-weight:600;font-size:16.5px;display:flex;justify-content:space-between;align-items:center;gap:16px;transition:background .18s}
.faq details[open] summary{background:linear-gradient(180deg,var(--honey-wash),transparent)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--honey-text);font-size:22px;line-height:1;flex-shrink:0;transition:transform .22s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 24px 22px;color:var(--ink-soft);font-size:15px}
.faq .a p+p{margin-top:10px}

/* ============ cta ============ */
.cta{text-align:center;padding-top:116px;padding-bottom:116px;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;background-image:var(--comb);opacity:.5;mask-image:radial-gradient(70% 60% at 50% 50%,#000,transparent 72%);-webkit-mask-image:radial-gradient(70% 60% at 50% 50%,#000,transparent 72%)}
/* warmth under the last ask, so the button sits in its own pool of light */
.cta::after{content:"";position:absolute;left:50%;top:50%;width:min(820px,92%);height:420px;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(240,169,44,.20),rgba(240,169,44,.06) 45%,rgba(240,169,44,0) 72%)}
.cta>*{position:relative;z-index:1}
.cta h2{margin:0 auto 16px}
.cta .lead{margin:0 auto 34px}
.cta-note{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin-top:20px}

/* ============ footer ============ */
footer{background:var(--card);border-top:1px solid var(--line);padding:44px 0 0}
.foot-in{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:20px;padding-bottom:34px}
footer p{font-size:13px;color:var(--muted)}
footer .fine{font-family:var(--mono);font-size:11.5px;max-width:560px;margin-top:8px;line-height:1.7}
.foot-links{display:flex;gap:22px}
.foot-links a{font-size:13px;color:var(--muted);text-decoration:none}
.foot-links a:hover{color:var(--ink)}
.wordmark{overflow:hidden;border-top:1px solid var(--line);padding:18px 0 10px}
.wordmark .marquee-track{gap:40px;animation:slide 26s linear infinite}
.wordmark span{font-family:var(--serif);font-weight:700;font-size:clamp(46px,9vw,120px);letter-spacing:-.03em;white-space:nowrap;line-height:1;
  background:linear-gradient(180deg,#f0f7fd,#e0ecf9);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ============ responsive ============ */
@media (max-width:1200px){.hero-copy{padding-left:48px}}
@media (max-width:940px){
  .nav-toggle{display:flex}
  .nav-links{position:absolute;top:100%;left:0;right:0;margin-left:0;flex-direction:column;align-items:stretch;gap:0;background:rgba(233,243,252,.98);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);padding:4px 24px 16px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s,transform .2s,visibility .2s}
  .nav-links.open{opacity:1;visibility:visible;transform:none}
  .nav-links a{padding:15px 2px;border-top:1px solid var(--line-soft);font-size:16px}
  /* the hover rule belongs to the horizontal bar, not the stacked panel */
  .nav-links a::after{display:none}
  .hero{min-height:0;display:flex;flex-direction:column}
  .hero-copy{position:static;width:auto;height:auto;padding:42px 22px 18px}
  /* .hero-art goes static here, so an absolute ::before would anchor to
     .hero-card and land nowhere near the hive. drop the halo instead. */
  .hero-art{position:static;width:100%;padding:6px 22px 24px;display:block}
  .hero-art::before{display:none}
  /* size the stage, not the img — the img fills it and the parts follow */
  .hero-stage{width:80%;max-width:340px;margin:0 auto}
  .hero-card{border-radius:var(--r-xl)}
  .hero-copy .kicker{font-size:17px;margin-bottom:12px}
  .hero-ctas{flex-direction:column;align-items:stretch}
  .hero-ctas .btn{justify-content:center}
  .grass-band{height:110px}
  /* one column: nothing to stretch against, so the points go back to being
     an ordinary list that hugs its own copy */
  .proof-grid{grid-template-columns:1fr;gap:36px}
  .proof-points{display:block;flex:none}
  .proof-points li{flex:none;align-items:baseline}
  .proof-points li::before{margin-bottom:3px}
  /* three stats — a 2-up here would leave one orphaned on its own row */
  .nums{grid-template-columns:1fr}
  /* one column: nothing to align across, so drop the subgrid and let each
     card be an ordinary block again */
  .grid-3{grid-template-columns:1fr;grid-template-rows:none;row-gap:16px}
  .card{grid-row:auto;display:block}
  .honest-grid{grid-template-columns:1fr}
  /* the sticky rail needs a column beside it to be sticky against */
  .how-grid{grid-template-columns:1fr;gap:40px}
  .how-intro{position:static}
  .how-intro .lead{font-size:18px}
  .vs{grid-template-columns:1fr}
  .vs-col.us{margin-top:0;padding-top:30px}
  .leaks{grid-template-columns:1fr}
  section{padding-top:76px;padding-bottom:76px}
}
@media (max-width:560px){
  /* logo + CTA + hamburger together overrun a phone at full size, and the
     logo is the thing that gives, so shrink all three instead */
  .wrap{padding-left:18px;padding-right:18px}
  .nav-in{height:66px;gap:10px}
  .logo{font-size:19px}
  .logo .mark{width:21px;height:21px;margin-right:7px}
  .nav-actions{gap:8px}
  .nav-links{padding-left:18px;padding-right:18px}
  .btn-sm{padding:9px 14px;font-size:11px}
  .nav-toggle{width:40px;height:40px}
  /* the rail narrows here, so the nodes have to move with it or they sit 6px
     to the left of the line they are supposed to be threaded on */
  .journey{padding-left:30px}
  .jstep::before{left:-26px}
  .foot-links{flex-wrap:wrap;gap:14px 22px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .bub,.js .bub{opacity:1;transform:none}
  .rv{opacity:1;transform:none}
  .flightdeck{display:none}
}