/* NimbleBee site layer: page-level rules on top of tokens.css and base.css.
   Port 1 holds the page shell and the hero (kinetic headline, "I need..." bubble). Ports 2 and 3 add their sections below.
   Values point at the design-system tokens; nothing is hard-coded from the mock-up. */

/* ---------- page shell ---------- */
html{scroll-behavior:smooth}
body{overflow-x:clip}
h1,h2,h3,h4,p,ol,ul{margin:0}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
.wrap{max-width:1120px;margin:0 auto;padding-inline:var(--gut)}
section{scroll-margin-top:90px}
[hidden]{display:none!important}
/* nav: keep the logomark at its set height and the button on one line (the bar never squeezes the logo) */
.brand{flex:none}
.btn{white-space:nowrap}
/* the design system steps the logo down to 30px under 370px; at 375px (iPhone) the burger then touches the bar's edge, so step down under 390px */
@media(max-width:389px){.brand img{height:30px}}
/* 320px phones: the bar is 288px wide inside the gutter, so the logo, Let's talk and the burger need a tighter fit */
@media(max-width:339px){.navin{padding-left:12px;gap:6px}.brand img{height:26px}.navr{gap:6px}}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -5px}}

/* ---------- hero ---------- */
.hero{padding-top:clamp(96px,14vw,128px);padding-bottom:40px}
.hgrid{display:grid;gap:32px;align-items:center;grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.hgrid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:24px;align-items:start}.hgrid>.gcol{margin-top:calc(13px*1.3 + 14px + 22px)}}
.htext{display:flex;flex-direction:column;gap:22px;min-width:0}
.htext .chip{align-self:flex-start;rotate:-2deg;animation:pop 560ms var(--ease) both}
.lede{font-size:clamp(18px,2.4vw,20px);line-height:1.5;font-weight:500;max-width:34em;animation:pop 560ms var(--ease) .5s both}
.ctas{display:flex;flex-wrap:wrap;gap:14px;animation:pop 560ms var(--ease) .5s both}

/* kinetic headline: the h1 uses .display-h1 for size, weight and tracking */
.kin{margin:0}
.kin .ln{display:block;white-space:nowrap;position:relative;isolation:isolate}
.kin .ln+.ln{margin-top:.04em}
.kin .wd{display:inline-block;white-space:nowrap}
.kin .ch{display:inline-block;transition:transform 320ms var(--ease);animation:chin 640ms var(--ease) calc(var(--i)*38ms) backwards}
.kin .ch:hover{transform:translateY(-.09em) rotate(-7deg) scale(1.08)}
.hlw .sw .ch{animation:none}
.hlw .sw.init .ch{animation:chin 640ms var(--ease) calc(var(--i)*38ms) backwards}
@keyframes chin{from{opacity:0;transform:translateY(.55em) rotate(10deg) scale(.8)}}
.hlw{position:relative;display:inline-block;vertical-align:baseline;white-space:nowrap}
.hlw .mk{position:absolute;left:-.16em;width:calc(100% + .36em);bottom:-.04em;height:.7em;z-index:-1;overflow:visible;pointer-events:none;rotate:var(--mr,-1deg);transform-origin:left center}
.mk path{fill:none;stroke:var(--hc,var(--mint));stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.mk .p1{stroke-width:var(--sw,34px)}
.mk .p2{stroke-width:calc(var(--sw,34px)*.4);opacity:.9}
.mk g{filter:url(#nb-dry)}
.mk.draw .p1{animation:mkd 560ms cubic-bezier(.5,.08,.2,1) both}
.mk.draw .p2{animation:mkd 300ms cubic-bezier(.4,.1,.3,1) 380ms both}
.mk.draw{animation:mksq 220ms ease-out 520ms both}
.mk.erase path{animation:mke 260ms cubic-bezier(.6,0,.9,.5) both}
.mk.hid path{stroke-dashoffset:1}
@keyframes mkd{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes mke{to{stroke-dashoffset:-1}}
@keyframes mksq{40%{transform:scaleY(1.1)}}
.hlw .sws{position:relative;z-index:1;display:inline-block}
.hlw .sw{position:absolute;left:0;top:0;visibility:hidden;white-space:nowrap}
.hlw .sw.on{position:relative;visibility:visible}
.hlw .sw.out{visibility:visible;animation:swout 260ms cubic-bezier(.6,0,.9,.5) both}
.hlw .sw.on:not(.init) .ch{animation:chin 560ms var(--ease) calc(var(--j)*34ms) backwards}
@keyframes swout{to{opacity:0;transform:translateY(-.5em) rotate(-5deg)}}

/* ---------- hero graphic: the "I need..." bubble ---------- */
.gcol{min-width:0;display:flex;flex-direction:column;align-items:center;gap:12px}
.gwrap{container-type:inline-size;position:relative;width:100%;max-width:440px;aspect-ratio:1/1;touch-action:pan-y;animation:pop 640ms var(--ease) .3s both}
.bub{position:absolute;left:0;right:0;top:0;min-height:36cqw;padding:5cqw 6cqw;border:var(--line) solid var(--ink);border-radius:7cqw;background:var(--paper);box-shadow:var(--sh-lg);display:flex;align-items:center;transition:translate 400ms cubic-bezier(.2,.7,.3,1);cursor:pointer;text-align:left;font-family:inherit;color:inherit;width:100%}
.bub::after{content:"";position:absolute;left:14cqw;bottom:-4.2cqw;width:7cqw;height:7cqw;background:var(--paper);border-right:var(--line) solid var(--ink);border-bottom:var(--line) solid var(--ink);rotate:45deg;border-radius:0 0 1.6cqw 0;box-shadow:4px 4px 0 var(--ink);clip-path:polygon(100% 0,100% 100%,0 100%)}
.bub .t{font-size:max(19px,7cqw);font-weight:800;letter-spacing:-.035em;line-height:1.08;min-height:2.16em;display:block;margin:0}
.bub .caret{display:inline-block;width:.09em;height:.95em;margin-left:.06em;background:var(--coral);vertical-align:-.1em;animation:blink 900ms steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.bhint{position:absolute;right:0;top:41cqw;margin:0;font-size:max(13px,3.2cqw);font-weight:500;line-height:1.2;text-align:right}
.tiles{position:absolute;left:0;right:0;bottom:0;top:49cqw;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:3.4cqw}
.slot{position:relative;min-width:0;min-height:0}
.slot::before{content:"";position:absolute;inset:0;border:var(--line-dash);border-radius:5cqw}

/* hero on phones: more room above and between the eyebrow, headline and body; everything centred (desktop layout is unchanged) */
@media(max-width:699px){
  .hero{padding-top:128px}
  .htext{align-items:center;text-align:center;gap:30px}
  .htext .chip{align-self:center}
  .lede{margin-inline:auto}
  .htext .ctas{display:grid;grid-template-columns:1fr auto 1fr;justify-items:center;gap:0;width:100%}
  .htext .ctas>.btn:not(.pausebtn){grid-column:2}
  .htext .ctas>.pausebtn{grid-column:3;justify-self:end;align-self:center}
}

/* pause controls (hero and ticker): a small paper circle with the icon only; the label lives in aria-label. The ::after keeps a 44px touch target. */
.btn.icon.sm.pausebtn{position:relative;width:36px;min-height:36px;padding:0;border-radius:50%;background:var(--paper)}
.btn.icon.sm.pausebtn .ic{font-size:16px}
.pausebtn::after{content:"";position:absolute;inset:-4px}


/* paused: the hero pause control stops every animation on the page */
.nb-paused *{animation-play-state:paused!important}
.nb-off,.nb-off *{animation-play-state:paused!important}

/* ---------- reduced motion (page layer) ---------- */
@media (prefers-reduced-motion: reduce){
  .bub .caret{opacity:0}
  [data-pause],.tapebar{display:none}
}

/* ---------- footer ---------- */
.ft{padding-block:48px}
.ftin{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 32px}
.ftco{font-size:15px;font-weight:600}
.ftl{display:flex;flex-wrap:wrap;gap:0 24px}
.ftl a{display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:600}

/* ---------- sections: shared ---------- */
.sec{padding-block:0}
.sechead{display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:36px}
.sep{display:flex;align-items:center;gap:14px;max-width:1120px;margin:clamp(48px,7vw,88px) auto;padding-inline:var(--gut)}
.sep::before,.sep::after{content:"";flex:1;border-top:var(--line-dash)}
.sep .hex{rotate:var(--r,0deg)}

/* ---------- problem ---------- */
.pgrid{display:grid;gap:32px;align-items:start}
@media(min-width:900px){.pgrid{grid-template-columns:.9fr 1.1fr;gap:56px}}
.ptext{display:flex;flex-direction:column;gap:20px;min-width:0}
.ptext .chip{align-self:flex-start}
.toggle{display:inline-flex;align-items:center;gap:14px;align-self:flex-start;min-height:56px;padding:6px 20px 6px 8px;border:var(--line) solid var(--ink);border-radius:var(--r-pill);background:var(--paper);box-shadow:var(--sh-md);font-weight:800;font-size:17px;cursor:pointer;transition:transform 180ms var(--ease),box-shadow 180ms var(--ease)}
.toggle:hover{transform:translate(-2px,-2px);box-shadow:var(--sh-lg)}
.toggle:active{transform:translate(2px,2px);box-shadow:var(--sh-0)}
.knob{position:relative;display:block;width:60px;height:38px;border:var(--line) solid var(--ink);border-radius:var(--r-pill);background:color-mix(in srgb,var(--ink) 14%,var(--bg));transition:background 300ms;flex:none}
.knob::after{content:"";box-sizing:border-box;position:absolute;top:-2px;left:-2px;width:38px;height:38px;border-radius:50%;border:var(--line) solid var(--ink);background:var(--pink);transition:transform 360ms var(--ease),background 300ms}
.toggle[aria-pressed="true"] .knob{background:var(--mint)}
.toggle[aria-pressed="true"] .knob::after{transform:translateX(22px);background:var(--ok)}
.board{border:var(--line) dashed var(--ink);border-radius:var(--r-card);background:color-mix(in srgb,var(--paper) 60%,transparent);padding:clamp(18px,3vw,32px);display:flex;flex-direction:column;gap:22px;min-width:0}
.mess{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px}
@media(min-width:560px){.mess{grid-template-columns:repeat(3,minmax(0,1fr))}}
.note{display:flex;align-items:center;gap:10px;padding:14px 12px;border:var(--line) solid var(--ink);border-radius:16px;background:var(--f);box-shadow:var(--sh-md);font-weight:800;font-size:15px;line-height:1.2;min-height:68px;min-width:0;overflow-wrap:break-word;rotate:var(--r);translate:var(--x) var(--y);transition:rotate 800ms var(--ease),translate 800ms var(--ease);animation:jig var(--jd,1s) ease-in-out var(--jl,0s) infinite}
/* willpower state: every note sits well away from its tidy cell, in places that make the paths cross (percentages are of the note's own size), and keeps jiggling */
.n1{--r:-11deg;--x:14%;--y:235%;--jd:.9s;--jl:0s}.n2{--r:9deg;--x:-8%;--y:110%;--jd:1.15s;--jl:-.3s}.n3{--r:7deg;--x:85%;--y:125%;--jd:1s;--jl:-.6s}.n4{--r:-8deg;--x:-40%;--y:-115%;--jd:.85s;--jl:-.2s}.n5{--r:10deg;--x:24%;--y:-235%;--jd:1.2s;--jl:-.7s}.n6{--r:-12deg;--x:-90%;--y:-125%;--jd:.95s;--jl:-.45s}
@media(min-width:560px){
  .n1{--r:-10deg;--x:195%;--y:110%}.n2{--r:8deg;--x:10%;--y:118%}.n3{--r:-7deg;--x:-205%;--y:135%}.n4{--r:9deg;--x:210%;--y:-115%}.n5{--r:-9deg;--x:-12%;--y:-122%}.n6{--r:11deg;--x:-200%;--y:-128%}
}
@keyframes jig{0%,100%{transform:translate(0,0) rotate(0)}20%{transform:translate(3px,-4px) rotate(2deg)}45%{transform:translate(-4px,2px) rotate(-2.5deg)}70%{transform:translate(2px,4px) rotate(1.5deg)}}
.board.tidy .note{rotate:0deg;translate:0 0;animation:none}
.verdict{display:flex;align-items:center;gap:16px;min-height:96px}
.verdict .big{font-size:clamp(28px,5vw,44px);font-weight:800;letter-spacing:-.04em;line-height:1}
.verdict .b{display:none}
.board.tidy .verdict .a{display:none}
.board.tidy .verdict .b{display:inline-block}
.sys{opacity:0;scale:.3;transition:opacity 300ms,scale 600ms var(--ease)}
.sys .ic{font-size:34px}
.board.tidy .sys{opacity:1;scale:1;transition-delay:.2s}
@media (prefers-reduced-motion: reduce){
  .board .note,.sys,.knob,.knob::after{transition:none}
  .board .note{animation:none}
}

/* ---------- offers ---------- */
.ogrid{display:grid;gap:36px;grid-template-columns:minmax(0,1fr)}
@media(min-width:760px){.ogrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}}
.ohead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.ogrid .card p{margin:0}
.ogrid .card .btn{align-self:flex-start;margin-top:auto}
.soon{margin-top:44px;font-size:18px;max-width:34em}
.also{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:20px}
.also .lbl{margin:0;font-size:18px;font-weight:800}
.chiprow{display:contents;list-style:none;margin:0;padding:0}

/* ---------- who it's for ---------- */
.whogrid{display:grid;gap:8px 56px;align-items:start}
@media(min-width:900px){.whogrid{grid-template-columns:1.1fr .9fr}.whogrid .sechead{margin-bottom:0}.whotext{padding-top:calc(13px*1.3 + 14px + 16px)}}
.whotext{display:flex;flex-direction:column;gap:20px;min-width:0}
.whotext .also{margin-top:0}

/* ---------- contact ---------- */
.cta{position:relative;overflow:hidden;border:var(--line) solid var(--ink);border-radius:var(--r-card);background:var(--peach);box-shadow:var(--sh-xl);padding:clamp(32px,7vw,80px) clamp(22px,5vw,64px);display:flex;flex-direction:column;gap:22px;align-items:center;text-align:center}
.cta>*{position:relative}
.cta h2{max-width:11em}
.cta p{max-width:30em}
.cta .ctas{animation:none;align-items:center;justify-content:center}
.deco{position:absolute!important;pointer-events:none;animation:bob 5s ease-in-out infinite}
.deco.d1{right:5%;top:8%;rotate:12deg}
.deco.d2{right:24%;bottom:-6%;rotate:-8deg;animation-delay:-1.5s}
.deco.d3{right:2%;bottom:12%;rotate:20deg;animation-delay:-3s}
.deco.d4{right:30%;top:-4%;rotate:-14deg;animation-delay:-2s}
@media(max-width:699px){.deco{opacity:.55}.deco.d1{display:none}}

/* ---------- proof ---------- */
.pcards{display:grid;gap:36px;grid-template-columns:minmax(0,1fr)}
@media(min-width:760px){.pcards{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}}
.pcards .card p{margin:0}
.pcards .ohead{flex-wrap:wrap}
/* flip cards: the front is the card, the back plays the showreel. Both faces share one grid cell so the card keeps one height. */
.flip{display:grid;perspective:1400px;min-width:0}
.flip-in{display:grid;grid-template-columns:minmax(0,1fr);transform-style:preserve-3d;transition:transform 640ms var(--ease)}
.flip.open .flip-in{transform:rotateY(180deg)}
.face{grid-area:1/1;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.face.back{transform:rotateY(180deg);justify-content:center;visibility:hidden}
.nbjs .face.back{visibility:visible}
.flipbtn{display:none;align-self:flex-start;margin-top:auto}
.nbjs .flipbtn{display:inline-flex}
.vid{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--ink)}
.vbar{display:flex;align-items:center;gap:12px}
.vbar .vback{margin-left:auto}
@media (prefers-reduced-motion: reduce){.flip-in{transition:none}}
.stats{display:grid;gap:20px;margin-top:44px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
@media(min-width:760px){.stats{grid-template-columns:repeat(2,minmax(0,280px))}}
.card.stat{gap:2px;padding:20px 18px 16px;border-radius:22px;box-shadow:var(--sh-lg)}
.stat .n{font-size:clamp(42px,6vw,60px);font-weight:800;letter-spacing:-.05em;line-height:1}
.stat .l{font-size:16px;font-weight:600}

/* tool ticker */
.tapewrap{overflow:hidden;padding-block:26px 30px;margin-top:42px}
.tape{background:var(--ink);color:var(--paper);rotate:-1.4deg;margin-inline:-3%;border-block:var(--line) solid var(--ink);overflow:hidden}
.tape .track{display:flex;width:max-content;animation:slide 38s linear infinite}
.tape:hover .track,.tape:focus-within .track,.tape.stop .track{animation-play-state:paused}
.tape :focus-visible{outline-color:var(--paper)}
.tape .item{display:inline-flex;align-items:center;gap:16px;padding:10px 16px 10px 0;font-weight:800;font-size:clamp(14px,2.25vw,19.5px);letter-spacing:-.02em;white-space:nowrap}
.tape .item a,.tape .item a:hover{color:var(--pink);text-decoration:none}
.tapebar{display:flex;justify-content:flex-end;margin-top:6px}
@keyframes slide{to{transform:translateX(-50%)}}
@media (pointer:coarse) and (prefers-reduced-motion: no-preference){
  .tape{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
  .tape::-webkit-scrollbar{display:none}
  .tape .track{animation:none}
}
@media (prefers-reduced-motion: reduce){
  /* nothing moves, so the ticker becomes a wrapped list: every tool and the contact link stay reachable */
  .tapebar{display:none}
  .tape .track{width:auto;flex-wrap:wrap;justify-content:center;padding:8px 16px}
  .tape .item[aria-hidden="true"]{display:none}
  .tape .item{padding-right:0;gap:12px}
  .tape .item+.item{margin-left:16px}
}

/* ---------- how it works ---------- */
.hw{padding:0}
.hwtop{display:flex;flex-direction:column;gap:28px;margin-bottom:26px}
.hwtop .chip{align-self:flex-start}
.hwtabs{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.cue{font-size:14px;font-weight:500;line-height:1.2;padding:0 4px}
.cue.d{display:none}
.slides{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px var(--gut) 24px;margin-inline:calc(var(--gut)*-1);scrollbar-width:none}
.slides::-webkit-scrollbar{display:none}
.slide{flex:0 0 min(88%,520px);scroll-snap-align:center;display:grid;gap:22px;align-content:start;min-width:0}
.sc.card{gap:12px}
.sc h3{line-height:1}
.sc p{margin:0}
.vis{display:none}
.hwbar{display:none}
@media(min-width:900px){
  .cue.m{display:none}.cue.d{display:inline-block}
  .hwpin{height:300svh;position:relative}
  .hwstick{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:72px}
  .hwtop{margin-bottom:18px}
  .slides{display:grid;overflow:visible;padding:0;margin:0;scroll-snap-type:none}
  .slide{grid-area:1/1;flex:none;grid-template-columns:1fr .7fr;gap:36px;align-items:center;align-content:center;opacity:0;visibility:hidden;transform:translateY(28px) scale(.98);transition:opacity 420ms,transform 560ms var(--ease),visibility 0s .42s}
  .slide.on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .vis{display:block;position:relative;height:240px}
  .vis .hex{position:absolute}
  .vis .hex:nth-child(1){left:18%;top:0;rotate:-6deg}
  .vis .hex:nth-child(2){left:54%;top:34%;rotate:8deg}
  .vis .hex:nth-child(3){left:6%;top:62%;rotate:-12deg}
  .hwbar{display:block;height:10px;border:var(--line) solid var(--ink);border-radius:var(--r-pill);background:var(--paper);overflow:hidden;margin-top:22px}
  .hwbar i{display:block;height:100%;background:var(--pink);border-right:var(--line) solid var(--ink);transform-origin:left;transform:scaleX(0)}
}
@media(min-width:900px) and (prefers-reduced-motion:reduce){
  .hwpin{height:auto}.hwstick{position:static;height:auto;padding-top:0}
  .slides{display:flex;flex-direction:column;gap:56px}
  .slide{opacity:1!important;visibility:visible!important;transform:none!important}
  .hwtabs .tabpill,.cue,.hwbar{display:none!important}
}