/* ==========================================================================
   numiyo.ai — stylesheet
   Palette (the Numiyo brand kit): pine (ink) · mint (accent surface, never
   text on white) · paper (light wash, ink on dark) · leaf (the spark)
   Type: Instrument Sans throughout — the wordmark's own face — plus Space Mono
   for small labels, matching the portal's Mint theme.
   ========================================================================== */

:root{
  --pine:#0D2C21;
  --pine-2:#153B2C;
  --pine-3:#1A4A38;
  --mint:#60C686;
  --mint-2:#4FBA77;
  --paper:#E9F4ED;
  --paper-2:#F4F9F6;
  --leaf:#2B7F50;
  --leaf-ink:#1F6B42;            /* leaf, darkened to hold AA as small text on paper */
  --white:#FFFFFF;
  --text:#0D2C21;
  --muted:#48594F;
  --line:#DCE5DF;
  --on-dark:#E9F4ED;
  --on-dark-muted:#A4BFAE;
  --line-dark:rgba(233,244,237,.14);
  --focus:#2B7F50;
  --danger:#B3261E;

  --r:10px;
  --r-lg:16px;
  --r-xl:24px;
  --container:1160px;
  --gutter:clamp(16px,4vw,40px);
  --section:clamp(72px,10vw,128px);

  --sans:"Instrument Sans",ui-sans-serif,system-ui,"Helvetica Neue",Arial,sans-serif;
  --mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --shadow-sm:0 1px 2px rgba(13,44,33,.06),0 4px 14px rgba(13,44,33,.06);
  --shadow-md:0 2px 4px rgba(13,44,33,.05),0 18px 44px rgba(13,44,33,.12);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--white);color:var(--text);
  font:400 1.0625rem/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
a{color:inherit}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--sans);font-weight:600;line-height:1.1;letter-spacing:-.025em;text-wrap:balance;color:var(--text)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.container{width:min(var(--container),100% - 2*var(--gutter));margin-inline:auto}
.skip-link{position:absolute;left:16px;top:-100px;z-index:100;background:var(--pine);color:var(--on-dark);padding:10px 14px;border-radius:var(--r);text-decoration:none;font-weight:600}
.skip-link:focus{top:16px}

/* ---------- shared bits ---------- */
.eyebrow{font:400 .74rem/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--leaf-ink)}
.col-label{font:400 .7rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font:600 .98rem/1 var(--sans);padding:15px 22px;border-radius:var(--r);
  border:1px solid transparent;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background-color .18s,border-color .18s,color .18s,transform .18s;
}
.btn:active{transform:translateY(1px)}
.btn-accent{background:var(--mint);color:var(--pine)}
.btn-accent:hover{background:var(--mint-2)}
.btn-primary{background:var(--pine);color:var(--on-dark)}
.btn-primary:hover{background:var(--pine-3)}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--text)}
.btn-ghost:hover{border-color:var(--pine)}
.btn-sm{padding:11px 16px;font-size:.92rem}
.btn .arrow{transition:transform .18s}
.btn:hover .arrow{transform:translateX(3px)}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--white);border-bottom:1px solid transparent;transition:border-color .2s}
.site-header.scrolled{border-bottom-color:var(--line)}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:24px}
.brand{display:inline-flex;align-items:center;text-decoration:none}
.wordmark{height:30px;width:auto}
.site-nav{display:flex;align-items:center;gap:28px}
.site-nav ul{display:flex;gap:26px}
.site-nav ul a{
  text-decoration:none;font-weight:500;font-size:.96rem;color:var(--text);opacity:.82;
  text-underline-offset:7px;text-decoration-thickness:2px;text-decoration-color:var(--mint);
}
.site-nav ul a:hover{opacity:1;text-decoration:underline}
.nav-toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;border:1px solid var(--line);background:var(--white);border-radius:var(--r);cursor:pointer}
.nav-toggle .bars{position:relative;width:18px;height:2px;background:var(--pine);transition:background-color .2s}
.nav-toggle .bars::before,.nav-toggle .bars::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--pine);transition:transform .25s}
.nav-toggle .bars::before{top:-6px}
.nav-toggle .bars::after{top:6px}
.nav-toggle[aria-expanded="true"] .bars{background:transparent}
.nav-toggle[aria-expanded="true"] .bars::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .bars::after{transform:translateY(-6px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{padding:clamp(40px,7vw,96px) 0 clamp(56px,8vw,112px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,5vw,72px);align-items:center}
.hero h1{font-size:clamp(2.75rem,1.2rem + 4.8vw,5.2rem);font-weight:600;line-height:1;letter-spacing:-.04em;margin:18px 0 24px}
.hero h1 .soft{color:var(--leaf)}
.hero .lede{font-size:clamp(1.1rem,.98rem + .5vw,1.3rem);color:var(--muted);max-width:40ch;margin-bottom:34px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* Numi, big — drawn by js/main.js (a port of the portal's NumiPet); press it to play every mood */
.hero-art{position:relative;aspect-ratio:1;width:min(100%,460px);justify-self:center}
.hero-disc{position:absolute;inset:6%;border-radius:50%;background:var(--mint);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.hero-disc::after{content:"";position:absolute;inset:-6%;border-radius:50%;border:1.5px solid var(--mint);opacity:.35}
.numi-btn{
  position:absolute;left:10%;top:5%;width:80%;aspect-ratio:1;padding:0;
  background:none;border:0;border-radius:50%;cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.numi-btn:focus-visible{outline-offset:6px;border-radius:50%}
.hero-numi{width:100%;height:100%;overflow:visible}
.hero-art:has(.numi-btn:hover) .hero-disc{transform:scale(1.02)}
.numi-btn:active .hero-numi{transform:scale(.97)}
.numi-caption{
  position:absolute;left:0;right:0;bottom:-2%;text-align:center;
  font:400 .72rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--leaf-ink);
}

/* ---------- integrations band ---------- */
/* Marks keep their own official brand colour and full opacity — recolouring or
   fading a third-party mark violates most brand guidelines. Only the names,
   set in Numiyo's own typeface, are styled. */
.logos{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(26px,3.4vw,40px) 0}
.logos .col-label{text-align:center;margin:0 0 clamp(16px,2vw,22px)}
.marquee{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%)}
/* Three identical groups, each carrying a trailing gap so all are exactly equal
   in width; translateX(-33.3333%) advances exactly one group -> seamless loop.
   Three, not two: the shift must satisfy container <= (n-1) * groupWidth, and one
   group can be narrower than the container, so n=2 exposes a sliver of empty
   track at the right edge just before each reset. */
.marquee-track{display:flex;width:max-content;animation:marquee 44s linear infinite}
.marquee-group{--g:clamp(32px,4.6vw,60px);display:flex;align-items:center;gap:var(--g);padding-right:var(--g);margin:0;list-style:none}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-33.3333%)}}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
.logo{display:flex;align-items:center;gap:9px;flex:none}
.logo svg{height:clamp(19px,1.9vw,23px);width:auto;display:block;flex:none}
.logo span{font:600 clamp(1rem,1.4vw,1.16rem)/1 var(--sans);letter-spacing:-.02em;white-space:nowrap;color:var(--muted)}

/* ---------- sections ---------- */
.section{padding-block:var(--section)}
.band-2{background:var(--paper-2)}
.section-head{margin-bottom:clamp(40px,6vw,72px)}
.section-head.center{text-align:center;max-width:760px;margin-inline:auto}
.section-head h2{font-size:clamp(2rem,1.2rem + 2.6vw,3.3rem);letter-spacing:-.035em;line-height:1.05;margin-top:14px}
.section-head .lede{font-size:1.15rem;color:var(--muted);margin-top:16px}

/* ---------- what Numi does ---------- */
.features{display:grid;gap:clamp(64px,9vw,120px)}
.feature{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,88px);align-items:center}
.feature.flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.feature.flip .feature-copy{order:2}
.feature .scene{margin-bottom:16px}
.feature-kicker{font:400 .74rem/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--leaf-ink);margin-bottom:12px}
.feature h3{font-size:clamp(1.7rem,1.1rem + 1.7vw,2.5rem);letter-spacing:-.035em;line-height:1.08;margin-bottom:16px}
.feature-copy p:not(.feature-kicker){color:var(--muted);font-size:1.12rem;max-width:40ch}

/* Real portal screens, cropped to the working canvas. Each sits in a paper
   panel and runs off its bottom edge, so crops of different heights line up. */
.shot-panel{
  margin:0;position:relative;overflow:hidden;aspect-ratio:6/5;display:flex;flex-direction:column;
  background:var(--paper);border-radius:var(--r-xl);
  padding:clamp(18px,4vw,44px) clamp(18px,4vw,44px) 0;
}
/* #F7FAF8 is the portal canvas's own ground, so a shorter crop runs on seamlessly */
.shot{flex:1;min-height:0;overflow:hidden;background:#F7FAF8;border:1px solid var(--line);border-bottom:0;border-radius:12px 12px 0 0;box-shadow:var(--shadow-md)}
.shot img{width:100%;height:auto}
.shot.missing img{display:none}
.shot.missing{background:repeating-linear-gradient(135deg,var(--paper-2) 0 12px,var(--white) 12px 24px)}

/* ---------- beyond marketing: a pine band, two shots side by side ---------- */
.band-dark{background:var(--pine);color:var(--on-dark)}
.band-dark h2{color:var(--on-dark)}
.band-dark .eyebrow,.band-dark .feature-kicker{color:var(--mint)}
.band-dark .section-head .lede{color:var(--on-dark-muted)}
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.duo figure{margin:0}
.duo .shot-panel{aspect-ratio:5/6;background:var(--pine-2);border:1px solid var(--line-dark)}
.duo .shot{border-color:transparent;background:var(--white)}
.duo figcaption{margin-top:22px}
.duo figcaption p:not(.feature-kicker){color:var(--on-dark-muted);font-size:1.08rem;max-width:42ch}

/* ---------- how it works ---------- */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.step{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 26px 30px}
.step-num{display:block;font:400 .8rem/1 var(--mono);color:var(--leaf-ink);margin-bottom:22px}
.step h3{font-size:1.35rem;margin-bottom:8px}
.step p{color:var(--muted)}

/* ---------- faq ---------- */
.faq-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px 64px;align-items:start}
.faq-head{position:sticky;top:104px}
.faq-head h2{font-size:clamp(2rem,1.2rem + 2.6vw,3.3rem);letter-spacing:-.035em;line-height:1.05;margin-top:14px}
.faq-head p{color:var(--muted);margin-top:16px;max-width:36ch}
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font:600 1.14rem/1.35 var(--sans);letter-spacing:-.015em}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"";flex:none;width:12px;height:12px;
  background:linear-gradient(var(--text),var(--text)) center/12px 2px no-repeat,
             linear-gradient(var(--text),var(--text)) center/2px 12px no-repeat;
  transition:transform .25s;
}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{color:var(--muted);padding:0 48px 24px 0;max-width:60ch}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px 64px;align-items:start}
.form-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(22px,3.5vw,36px)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:grid;gap:6px;margin-bottom:16px}
.field label{font-weight:600;font-size:.92rem}
.field input,.field textarea{
  font:inherit;color:var(--text);background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);
  padding:12px 14px;width:100%;transition:border-color .15s,box-shadow .15s;
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--pine);box-shadow:0 0 0 3px rgba(96,198,134,.35)}
.field textarea{min-height:124px;resize:vertical}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:6px}
.form-note{font-size:.86rem;color:var(--muted)}
.form-status{margin-top:14px;font-size:.95rem;min-height:1.4em}
.form-status.ok{color:var(--pine);font-weight:600}
.form-status.err{color:var(--danger);font-weight:600}
/* thank-you: replaces the fields in place (the card keeps its height), Numi celebrating on top */
.form-card.sent{display:grid;place-items:center}
.form-card.sent>:not(.form-done){display:none}
.form-done{display:grid;justify-items:center;gap:8px;text-align:center}
.form-done[hidden]{display:none}
.form-done svg{width:132px;height:132px;overflow:visible;margin-bottom:10px}
.form-done h3{font-size:clamp(1.4rem,2.4vw,1.75rem)}
.form-done h3:focus{outline:none}
.form-done p{margin:0;color:var(--muted)}
.contact-aside{display:grid;gap:30px;padding-top:8px}
.contact-aside h3{font-size:1.1rem;margin-bottom:10px}
.contact-aside .email{
  font:600 1.3rem/1.2 var(--sans);letter-spacing:-.015em;text-decoration:none;color:var(--text);
  border-bottom:2px solid var(--mint);width:max-content;max-width:100%;padding-bottom:2px;
}
.next-steps{display:grid;gap:14px}
.next-steps li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;align-items:start;color:var(--muted)}
.next-steps .n{font:400 .8rem/1 var(--mono);color:var(--leaf-ink);padding-top:6px}

/* ---------- footer ---------- */
.site-footer{background:var(--pine);color:var(--on-dark-muted);padding:64px 0 32px}
.footer-grid{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:32px;padding-bottom:36px;border-bottom:1px solid var(--line-dark)}
.site-footer .wordmark{height:34px}
.footer-links{display:flex;flex-wrap:wrap;gap:12px 28px;padding-top:8px}
.footer-links a{text-decoration:none;color:var(--on-dark-muted)}
.footer-links a:hover{color:var(--on-dark);text-decoration:underline;text-decoration-color:var(--mint);text-underline-offset:5px}
.footer-bottom{padding-top:24px;font-size:.86rem}
.footer-legal{margin-top:12px;font-size:.76rem;line-height:1.5;opacity:.72;max-width:96ch}

/* ---------- Numi scenes ----------
   Little CSS-animated Numis, one per section, built from the shared #n-* parts
   in the page's hidden sprite. Decoration only (aria-hidden). js/main.js adds
   .on while a scene is on screen, so the rest sit paused; under reduced motion
   each holds a still frame. */
.n-defs{position:absolute;width:0;height:0;overflow:hidden}
.scene{--ink:var(--pine);--face:#fff;--blush:var(--leaf);--prop:var(--mint);--water:#B5D4F4;position:relative;pointer-events:none;user-select:none}
.scene svg{overflow:visible}
.js .scene:not(.on) *{animation-play-state:paused!important}
.n-fb{transform-box:fill-box;transform-origin:center}
.n-blink{animation:n-blink 4.6s infinite}
.n-spin{transform-box:fill-box;transform-origin:center;animation:n-spin 3s linear infinite}
.n-swing{transform-box:fill-box;transform-origin:50% 0;animation:n-swing 1.6s ease-in-out infinite alternate}
@keyframes n-blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
@keyframes n-spin{to{transform:rotate(360deg)}}
@keyframes n-swing{from{transform:rotate(16deg)}to{transform:rotate(-16deg)}}
@keyframes n-pop{0%,100%{opacity:.2}30%,60%{opacity:1}}

/* notebook: writes three lines, flips the page, looks up at the idea */
.n-w1,.n-w2,.n-w3{stroke-dasharray:1;animation:n-w1 6s linear infinite}
.n-w2{animation-name:n-w2}
.n-w3{animation-name:n-w3}
.n-pen{transform:translate(86px,96px);animation:n-pen 6s linear infinite}
.n-wiggle{animation:n-wiggle .16s ease-in-out infinite alternate}
.n-page{opacity:0;transform-origin:61px 95px;animation:n-page 6s ease-in-out infinite}
.n-look{animation:n-look 6s ease-in-out infinite}
.n-aha{transform-box:fill-box;transform-origin:center;animation:n-aha 6s infinite}
@keyframes n-w1{0%{stroke-dashoffset:1;opacity:1}22%,80%{stroke-dashoffset:0;opacity:1}86%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes n-w2{0%,24%{stroke-dashoffset:1;opacity:1}46%,80%{stroke-dashoffset:0;opacity:1}86%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes n-w3{0%,48%{stroke-dashoffset:1;opacity:1}70%,80%{stroke-dashoffset:0;opacity:1}86%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes n-pen{0%{transform:translate(65px,90.5px)}22%{transform:translate(89px,87.3px)}24%{transform:translate(65px,94.5px)}46%{transform:translate(89px,91.3px)}48%{transform:translate(65px,98.5px)}70%{transform:translate(86px,96px)}76%,88%{transform:translate(98px,80px)}100%{transform:translate(65px,90.5px)}}
@keyframes n-wiggle{from{transform:translateY(-.8px)}to{transform:translateY(.8px)}}
@keyframes n-page{0%,79%{opacity:0;transform:scaleX(1)}80%{opacity:1;transform:scaleX(1)}90%{opacity:1;transform:scaleX(-1)}91%,100%{opacity:0;transform:scaleX(-1)}}
@keyframes n-look{0%,72%,92%,100%{transform:translate(0,0)}76%,88%{transform:translate(3px,-6px)}}
@keyframes n-aha{0%,74%,90%,100%{opacity:0;transform:scale(.3)}78%,86%{opacity:1;transform:scale(1)}}

/* juggling: three stars on one loop, a third of a turn apart */
.n-juggle .n-spin{animation-duration:2s}
.n-toss{animation:n-toss .6s ease-in-out infinite alternate}
.n-track{animation:n-track .9s ease-in-out infinite alternate}
.n-jx{animation:n-jx .9s ease-in-out infinite alternate}
.n-jy{animation:n-jy .9s ease-in-out infinite alternate}
@keyframes n-toss{from{transform:translateY(0)}to{transform:translateY(-6px)}}
@keyframes n-track{from{transform:translateX(-2px)}to{transform:translateX(2px)}}
@keyframes n-jx{from{transform:translateX(-36px)}to{transform:translateX(36px)}}
@keyframes n-jy{from{transform:translateY(-34px)}to{transform:translateY(34px)}}

/* fishing: waits, a bite, reels a star into the bucket (+1) */
.n-fish .n-spin{animation-duration:2s}
.n-wave{animation:n-wave 1.6s linear infinite}
.n-bob{animation:n-bob 1.4s ease-in-out infinite alternate}
.n-dip{animation:n-dip 7s infinite}
.n-rod{transform-origin:90px 72px;animation:n-rod 7s infinite}
.n-cx{opacity:0;animation:n-cx 7s linear infinite}
.n-cy{animation:n-cy 7s infinite}
.n-plus{opacity:0;animation:n-plus 7s infinite}
.n-wide{animation:n-wide 7s infinite}
.n-fe{animation:n-fe 7s infinite}
.n-fh{opacity:0;animation:n-fh 7s infinite}
@keyframes n-wave{to{transform:translateX(20px)}}
@keyframes n-bob{from{transform:translateY(-1.5px)}to{transform:translateY(1.5px)}}
@keyframes n-dip{0%,62%,74%,100%{transform:translateY(0)}64%{transform:translateY(5px)}66%{transform:translateY(1px)}68%,72%{transform:translateY(6px)}}
@keyframes n-rod{0%,72%,86%,100%{transform:rotate(0deg)}75%{transform:rotate(-14deg)}}
@keyframes n-cx{0%,75%{opacity:0;transform:translateX(0)}76%{opacity:1;transform:translateX(0)}90%{opacity:1;transform:translateX(-209px)}92%,100%{opacity:0;transform:translateX(-209px)}}
@keyframes n-cy{0%,76%{transform:translateY(0);animation-timing-function:cubic-bezier(.2,.7,.4,1)}83%{transform:translateY(-80px);animation-timing-function:cubic-bezier(.6,0,.8,.3)}90%,100%{transform:translateY(-18px)}}
@keyframes n-plus{0%,89%{opacity:0;transform:translateY(0)}91%,97%{opacity:1;transform:translateY(-6px)}100%{opacity:0;transform:translateY(-8px)}}
@keyframes n-wide{0%,62%,76%,100%{transform:scale(1)}64%,74%{transform:scale(1.25)}}
@keyframes n-fe{0%,83.9%{opacity:1}84%,97.9%{opacity:0}98%,100%{opacity:1}}
@keyframes n-fh{0%,83.9%{opacity:0}84%,97.9%{opacity:1}98%,100%{opacity:0}}

/* somersaults along the tops of the how-it-works steps; its floor is the cards' top edge */
.n-tumble{
  --roll:12s;height:96px;margin-top:calc(8px - clamp(40px,6vw,72px));overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.n-roll{position:absolute;bottom:-12px;left:-80px;width:72px;height:72px;animation:n-across var(--roll) linear infinite}
.n-flip{transform-origin:50% 53%;animation:n-flip 1.1s infinite}
.n-shadow{position:absolute;left:16px;right:16px;bottom:10px;height:6px;border-radius:50%;background:var(--ink);opacity:.14;animation:n-shadow 1.1s infinite}
.n-trail{position:absolute;animation:n-pop 1.1s infinite}
@keyframes n-across{from{left:-80px}to{left:calc(100% + 10px)}}
@keyframes n-flip{0%{transform:translateY(0) rotate(0deg) scale(1.1,.88)}12%{transform:translateY(0) rotate(0deg) scale(1,1);animation-timing-function:cubic-bezier(.2,.7,.4,1)}50%{transform:translateY(-30px) rotate(180deg) scale(1,1);animation-timing-function:cubic-bezier(.6,0,.8,.3)}88%{transform:translateY(0) rotate(360deg) scale(1,1)}100%{transform:translateY(0) rotate(360deg) scale(1.1,.88)}}
@keyframes n-shadow{0%,12%,88%,100%{transform:scaleX(1);opacity:.14}50%{transform:scaleX(.45);opacity:.05}}

/* thinking chair: rocks while the bubble cycles */
.faq-head .scene{margin-bottom:22px}
.n-rock{transform-origin:60px 116px;animation:n-rock 5s ease-in-out infinite}
.n-dot{animation:n-pop 2.4s infinite}
.n-idea{transform-box:fill-box;transform-origin:center;opacity:0;animation:n-idea 8s infinite}
@keyframes n-rock{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes n-idea{0%{opacity:0;transform:scale(.5)}5%,22%{opacity:1;transform:scale(1)}27%,100%{opacity:0;transform:scale(.5)}}

/* paper plane: thrown, loops, turns round, comes back */
.n-airmail{height:104px}
.n-airmail>svg{position:absolute;left:0;bottom:-2px}
.n-plane{position:absolute;left:52px;top:66px;animation:n-plane 8s ease-in-out infinite}
.n-loop{animation:n-loop 8s linear infinite}
.n-turn{animation:n-turn 8s ease-in-out infinite}
.n-throw{transform-box:fill-box;transform-origin:50% 15%;animation:n-throw 8s ease-in-out infinite}
.n-pe{animation:n-pe 8s infinite}
.n-ph{opacity:0;animation:n-ph 8s infinite}
@keyframes n-plane{0%,12%{left:52px;transform:translateY(0)}22%{transform:translateY(-30px)}30%{transform:translateY(-22px)}38%{transform:translateY(-32px)}45%,60%{left:calc(100% - 80px);transform:translateY(-26px)}75%{transform:translateY(-34px)}90%,100%{left:52px;transform:translateY(0)}}
@keyframes n-loop{0%,45%{transform:translate(0,0) rotate(0deg)}48.75%{transform:translate(18px,-18px) rotate(-90deg)}52.5%{transform:translate(0,-36px) rotate(-180deg)}56.25%{transform:translate(-18px,-18px) rotate(-270deg)}60%,100%{transform:translate(0,0) rotate(-360deg)}}
@keyframes n-turn{0%,12%{transform:scaleX(1) rotate(0deg)}16%,42%{transform:scaleX(1) rotate(-6deg)}45%,60%{transform:scaleX(1) rotate(0deg)}63%,90%{transform:scaleX(-1) rotate(0deg)}92%,100%{transform:scaleX(1) rotate(0deg)}}
@keyframes n-throw{0%,100%{transform:rotate(0deg)}8%{transform:rotate(40deg)}12%{transform:rotate(-50deg)}18%,86%{transform:rotate(0deg)}90%,96%{transform:rotate(-40deg)}}
@keyframes n-pe{0%,11.9%{opacity:1}12%,21.9%{opacity:0}22%,89.9%{opacity:1}90%,100%{opacity:0}}
@keyframes n-ph{0%,11.9%{opacity:0}12%,21.9%{opacity:1}22%,89.9%{opacity:0}90%,100%{opacity:1}}

/* detective (404): walks in, peers, "?", peers again, "!", walks off */
/* clip only sideways (hidden where clip is unsupported), so Numi's feet can stand on the line */
.n-search{height:104px;overflow:hidden;overflow:clip visible;border-bottom:1px solid var(--line)}
.n-det{position:absolute;bottom:-12px;left:-80px;width:72px;height:72px;animation:n-det 11s linear infinite}
.n-peer{width:100%;height:100%;transform-origin:50% 95%;animation:n-peer 11s ease-in-out infinite}
.n-waddle{width:100%;height:100%;transform-origin:50% 95%;animation:n-waddle .5s ease-in-out infinite alternate}
.n-kick{transform-box:fill-box;transform-origin:50% 0;animation:n-kick 1s ease-in-out infinite}
.n-mark{position:absolute;top:-6px;right:2px;font:600 18px/1 var(--sans);color:var(--ink);opacity:0;animation:n-mark1 11s infinite}
.n-mark+.n-mark{animation-name:n-mark2}
@keyframes n-det{0%{left:-80px}28%,40%{left:28%}62%,74%{left:60%}100%{left:calc(100% + 10px)}}
@keyframes n-peer{0%,29%,42%,63%,76%,100%{transform:rotate(0deg) translateY(0)}32%,39%,66%,73%{transform:rotate(12deg) translateY(3px)}}
@keyframes n-waddle{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
@keyframes n-kick{0%,50%,100%{transform:translateY(0) rotate(0deg)}25%{transform:translateY(-4px) rotate(-20deg)}}
@keyframes n-mark1{0%,31%{opacity:0;transform:translateY(4px)}33%,40%{opacity:1;transform:translateY(0)}42%,100%{opacity:0;transform:translateY(0)}}
@keyframes n-mark2{0%,65%{opacity:0;transform:translateY(4px)}67%,74%{opacity:1;transform:translateY(0)}76%,100%{opacity:0;transform:translateY(0)}}

/* ---------- 404 ---------- */
.lost{min-height:calc(100vh - 72px);display:grid;place-items:center;padding:40px 0 96px;text-align:center}
.lost-inner{max-width:560px}
.lost .n-search{margin-bottom:40px}
.lost h1{font-size:clamp(2.2rem,1.4rem + 3vw,3.4rem);letter-spacing:-.035em;margin:14px 0}
.lost .lede{color:var(--muted);font-size:1.15rem;margin-bottom:30px}

/* ---------- reveal on scroll ---------- */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .65s cubic-bezier(.2,.7,.2,1),transform .65s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*80ms)}
.js .reveal.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr}
  .hero-art{width:min(100%,380px);margin-top:8px}
  .feature,.feature.flip{grid-template-columns:1fr}
  .feature.flip .feature-copy{order:0}
  .feature-copy{max-width:560px}
  .n-tumble{--roll:9s}
}
@media (max-width:860px){
  .faq-grid,.contact-grid{grid-template-columns:1fr}
  .faq-head{position:static}
  .steps{grid-template-columns:1fr}
  .duo{grid-template-columns:1fr;max-width:560px;margin-inline:auto;gap:48px}
  .site-nav{
    display:none;position:absolute;top:72px;left:0;right:0;
    background:var(--white);border-bottom:1px solid var(--line);
    padding:12px var(--gutter) 24px;flex-direction:column;align-items:stretch;gap:14px;box-shadow:var(--shadow-md);
  }
  .site-nav.open{display:flex}
  .site-nav ul{flex-direction:column;gap:0}
  .site-nav ul a{display:block;padding:12px 2px;font-size:1.1rem}
  .nav-toggle{display:inline-flex}
}
@media (max-width:640px){
  .wordmark{height:26px}
  .hero-art{width:min(100%,300px)}
  .cta-row{flex-direction:column;align-items:stretch}
  .cta-row .btn{width:100%}
  .form-row{grid-template-columns:1fr}
  .faq-item p{padding-right:0}
  .shot-panel{border-radius:var(--r-lg)}
  .n-tumble{--roll:6.5s}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  /* no scroll: show one static, centred, wrapped row and drop the clones */
  .marquee{overflow:visible;-webkit-mask-image:none;mask-image:none}
  .marquee-track{animation:none;width:auto;justify-content:center}
  .marquee-group{flex-wrap:wrap;justify-content:center;row-gap:clamp(18px,2.5vw,26px);padding-right:0}
  .marquee-group[aria-hidden="true"]{display:none}
  .js .reveal{opacity:1;transform:none;transition:none}
  .hero-disc{transition:none}
  .btn{transition:none}
  /* scenes hold one still frame each */
  .scene *{animation:none!important}
  .n-roll{left:6%}
  .n-trail{display:none}
  .n-det{left:30%}
  .n-ponder .n-q{opacity:1}
  .n-j1 .n-jy{transform:translateY(-30px)}
  .n-j2 .n-jx{transform:translateX(-30px)}
  .n-j3 .n-jx{transform:translateX(30px)}
  .n-j2 .n-jy,.n-j3 .n-jy{transform:translateY(-10px)}
}