/* Styles for index.html (Home v4), ported from the Claude Design canvas "Redesign v4". The self-hosted
   fonts, site footer, lead-form fields and skip link stay in shared-ui.css; this file adds the
   scroll story, the product run, the company band and the contact layout on top. */

:root{
  /* Page tokens shared-ui.css reads; index.html used to define these inline. */
  --ink:#050D0C; --ink2:#081513; --ink3:#0D1E1C;
  --teal:#00857B; --teal-lit:#19D9C6; --teal-d:#00615A;
  --paper:#F7F7F7; --card:#FFFFFF; --line:#DEE3E7; --head:#242C39; --body:#47535D; --muted:#5E7F8F;
  --r:10px; --rs:6px; --rl:14px;
  --pad:clamp(22px,4vw,64px); --max:1240px;
  --dsp:'Outfit',ui-sans-serif,system-ui,sans-serif;
  --sans:'Inter',ui-sans-serif,system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  /* Motion identity: premium, no overshoot. One curve for most moves, three durations, rise 24px. */
  --ease:cubic-bezier(.22,1,.36,1); --m-quick:140ms; --m-std:400ms; --m-slow:600ms; --rise:24px;

  /* Product colours. Every value mirrors handoff/tokens/brand.json and gen-design-system.mjs --check
     fails if one drifts: acc = resolved.light.accentText (AA on white), night = night,
     tint = ramp 100, hot = ramp 400 (the hero tile colour). */
  --acc-mzeiq:#008076; --hot-mzeiq:#0BCBBC;
  --acc-mliq:#0A75C2;     --night-mliq:#40AEFC;     --tint-mliq:#DBEAF4;     --hot-mliq:#2B9AE9;
  --acc-paperiq:#1F764B;  --night-paperiq:#3FC98A;  --tint-paperiq:#CFE6DA;  --hot-paperiq:#3F9B6D;
  --acc-prodiq:#795915;   --night-prodiq:#E9A64A;   --tint-prodiq:#F0E9DA;   --hot-prodiq:#C7962C;
  --acc-meetupiq:#4F46E5; --night-meetupiq:#7269F2; --tint-meetupiq:#E5E4F5; --hot-meetupiq:#7972E4;
  --acc-piniq:#B92D44;    --night-piniq:#E9607A;    --tint-piniq:#F3D2D7;    --hot-piniq:#CF4A60;
}
*{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;background:var(--ink);color:#E8F2F0;font:400 15px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,p,ul{margin:0}
a{color:var(--teal-lit);text-decoration:none;transition:color var(--m-quick) var(--ease)}
a:hover{color:#E8F2F0}
img{max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:rgba(25,217,198,.28)}
:focus-visible{outline:2px solid var(--teal-lit);outline-offset:3px;border-radius:6px}
#run:not(.night) :focus-visible{outline-color:var(--teal-d)}
#company :focus-visible{outline-color:#fff}
.btn{transition:transform var(--m-quick) var(--ease),filter var(--m-quick) var(--ease),background-color var(--m-std) var(--ease)}
.btn:hover{filter:brightness(1.12);transform:translateY(-1px)}
.btn:active{transform:none;filter:brightness(.95)}
/* Labels: sentence case in the text face, never spaced mono capitals. */
.lbl{font:600 13px/1.4 var(--sans);letter-spacing:0}

/* ---------- nav ---------- */
#nav{position:sticky;top:0;z-index:50;background:rgba(5,13,12,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid #13302c;--nav-acc:var(--acc-mzeiq)}
#nav[data-active=mliq]{--nav-acc:var(--acc-mliq)}
#nav[data-active=paperiq]{--nav-acc:var(--acc-paperiq)}
#nav[data-active=prodiq]{--nav-acc:var(--acc-prodiq)}
#nav[data-active=meetupiq]{--nav-acc:var(--acc-meetupiq)}
#nav[data-active=piniq]{--nav-acc:var(--acc-piniq)}
.nav-in{max-width:1280px;margin:0 auto;padding:16px 32px;display:flex;flex-wrap:wrap;align-items:center;gap:24px}
.nav-brand{font:800 18px/1.2 var(--dsp);letter-spacing:-.02em;color:#E8F2F0}
.nav-brand span{color:var(--teal-lit)}
.nav-gap{flex:1}
.nav-link{color:#B7C7C4;display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
.nav-link:hover{color:#E8F2F0;text-decoration:underline;text-underline-offset:4px}
.mode{height:44px;padding:0 12px;border:1px solid #4F6D7A;border-radius:8px;color:#B7C7C4;font-size:13px}
.mode:hover{border-color:#B7C7C4}
.nav-cta{min-height:44px;display:inline-flex;align-items:center;background:var(--acc-mzeiq);color:#fff;padding:10px 18px;border:1px solid rgba(255,255,255,.38);border-radius:8px;font-weight:600;transition:background-color var(--m-std) var(--ease),filter var(--m-quick) var(--ease),transform var(--m-quick) var(--ease)}
.nav-cta:hover{color:#fff;filter:brightness(1.12);transform:translateY(-1px)}

/* ---------- hero story ---------- */
/* The hero is one screen; home.js rotates it through seven forms on a timer, so scrolling goes
   straight to the next section. */
#story{position:relative}
#top{position:relative;height:clamp(640px,100vh,900px);overflow:clip;background:var(--ink);--cap-acc:var(--teal-lit)}
#top[data-slot="1"]{--cap-acc:var(--night-mliq)}
#top[data-slot="2"]{--cap-acc:var(--night-paperiq)}
#top[data-slot="3"]{--cap-acc:var(--night-prodiq)}
#top[data-slot="4"]{--cap-acc:var(--night-meetupiq)}
#top[data-slot="5"]{--cap-acc:var(--night-piniq)}
.gf{position:absolute;inset:0;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.gf canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.story-bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(232,242,240,.08);pointer-events:none}
.story-fill{height:100%;background:var(--cap-acc);transform-origin:0 50%;transform:scaleX(0);transition:transform var(--m-slow) var(--ease),background-color var(--m-std) var(--ease)}
.hero-veil{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 36% 32% at 50% 44%,rgba(5,13,12,.84),rgba(5,13,12,0))}
.hero-copy{position:absolute;left:0;right:0;top:0;bottom:190px;pointer-events:none;display:flex;align-items:center;justify-content:center;padding:0 24px}
.hero-in{display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px;max-width:680px;animation:heroIn var(--m-slow) var(--ease) .3s both}
.hero-in .lbl{color:var(--teal-lit)}
.hero-in h1{font:700 clamp(40px,5vw,68px)/1.02 var(--dsp);letter-spacing:-.025em}
.hero-in p{color:#B7C7C4;max-width:520px;text-wrap:pretty}
.hero-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;pointer-events:auto}
.hero-cta a{padding:12px 20px;border-radius:8px;font-weight:600}
.hero-cta .pri{background:var(--acc-mzeiq);color:#fff;border:1px solid rgba(255,255,255,.38)}
.hero-cta .sec{border:1px solid #4F6D7A;color:#E8F2F0;background:rgba(5,13,12,.6)}
.cue{position:absolute;right:32px;bottom:32px;opacity:0;transition:opacity var(--m-std) var(--ease);pointer-events:none;font:600 13px/1 var(--sans);color:#8FA6A2;writing-mode:vertical-rl;animation:cue 1.8s var(--ease) infinite}
#top.live .cue{opacity:1}
.cap{position:absolute;left:0;right:0;bottom:28px;opacity:0;transition:opacity var(--m-std) var(--ease);pointer-events:none;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:0 24px}
#top.live .cap{opacity:1}
.cap-name{font:700 40px/1 var(--dsp);letter-spacing:-.02em;color:#E8F2F0;animation:capSwap var(--m-slow) var(--ease) both}
.cap-name .iq{color:var(--cap-acc);transition:color var(--m-std) var(--ease)}
.cap-claim{font:500 20px/1.3 var(--dsp);color:#B7C7C4}
.cap-link{pointer-events:auto;font:600 13px/1.4 var(--sans);padding:13px 4px}
.ticks{display:flex;gap:8px;margin-top:10px;pointer-events:auto}
.ticks button{width:44px;height:44px;display:flex;align-items:center;justify-content:center}
.ticks span{display:block;height:3px;width:14px;border-radius:2px;background:#4F6D7A;transition:width var(--m-std) var(--ease),background-color var(--m-std) var(--ease)}
.ticks .on span{width:36px;background:var(--cap-acc)}
/* Pause shows two bars; when paused (aria-pressed) it shows a play triangle. Drawn in CSS so no glyph depends on the font subset. */
.ticks .play{width:32px}
.play i{display:block;width:10px;height:10px;border-left:3px solid #8FA6A2;border-right:3px solid #8FA6A2}
.play[aria-pressed="true"] i{width:0;height:0;border-style:solid;border-width:5px 0 5px 9px;border-color:transparent transparent transparent #8FA6A2}
@keyframes heroIn{from{opacity:0;transform:translateY(var(--rise))}to{opacity:1;transform:none}}
@keyframes capSwap{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes cue{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ---------- product run ---------- */
/* Day / night for the run. Night uses the lit accents on the ink field; the product screens stay light. */
#run{--pi:#242C39;--pi2:#47535D;--pl:#DFE4E9;--pbg:#F4F6F8;--pcard:#FFFFFF;--pa:#FFFFFF;--pb:#F4F6F8;--pon:#FFFFFF;--pteal:var(--teal-d)}
#run.night{--pi:#E8F2F0;--pi2:#B7C7C4;--pl:#1c3a36;--pbg:#081513;--pcard:#0D1E1C;--pa:#050D0C;--pb:#081513;--pon:#050D0C;--pteal:var(--teal-lit)}
.band{height:160px;background:linear-gradient(180deg,#050D0C 0%,#0D1E1C 30%,#F4F6F8 100%)}
#run.night .band{background:linear-gradient(180deg,#050D0C 0%,#0D1E1C 30%,#081513 100%)}
#products{background:var(--pbg);color:var(--pi);transition:background-color var(--m-slow) var(--ease),color var(--m-slow) var(--ease)}
.p-head{max-width:1280px;margin:0 auto;padding:48px 32px;display:flex;flex-direction:column;gap:16px}
.p-head .lbl{color:var(--pteal)}
.p-head h2{font:700 clamp(40px,5vw,72px)/1 var(--dsp);letter-spacing:-.03em;text-wrap:balance}
.p-head p{color:var(--pi2);max-width:640px;font-size:16px;text-wrap:pretty}

.pb{overflow-x:clip;transition:background-color var(--m-slow) var(--ease);--a:var(--acc-mliq)}
.pb[data-k=paperiq]{--a:var(--acc-paperiq);--t:var(--tint-paperiq);--nt:var(--night-paperiq)}
.pb[data-k=mliq]{--a:var(--acc-mliq);--t:var(--tint-mliq);--nt:var(--night-mliq)}
.pb[data-k=prodiq]{--a:var(--acc-prodiq);--t:var(--tint-prodiq);--nt:var(--night-prodiq)}
.pb[data-k=meetupiq]{--a:var(--acc-meetupiq);--t:var(--tint-meetupiq);--nt:var(--night-meetupiq)}
.pb[data-k=piniq]{--a:var(--acc-piniq);--t:var(--tint-piniq);--nt:var(--night-piniq)}
#run.night .pb{--a:var(--nt)}
.pb:nth-child(even){background:var(--pa)}
.pb:nth-child(odd){background:var(--pb)}
#products .pb.on{background:var(--t)}
#run.night .pb.on{background:color-mix(in srgb,#050D0C 91%,var(--nt))}
.pb-in{max-width:1280px;margin:0 auto;padding:96px 32px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:48px;row-gap:48px;align-items:start}
.pc{grid-column:1/span 5;grid-row:1;display:flex;flex-direction:column;gap:24px;padding:40px 0 30vh;min-width:0}
.shot{grid-column:6/span 7;grid-row:1;min-width:0;position:sticky;top:96px;align-self:start}
.pb.flip .pc{grid-column:8/span 5}
.pb.flip .shot{grid-column:1/span 7}
.pc-label{display:flex;align-items:center;gap:16px}
/* The rule grows with transform only (no layout), and the label slides with it, so the motion stays on the compositor. */
.pc-label i{flex:none;width:160px;height:2px;background:var(--a);transform-origin:0 50%}
.pc-label .lbl{color:color-mix(in srgb,var(--a) 78%,#10201E)}
#run.night .pc-label .lbl{color:color-mix(in srgb,var(--a) 82%,#fff)}
.pc-name{font:700 clamp(48px,6vw,72px)/.95 var(--dsp);letter-spacing:-.035em}
.pc-name span{color:var(--a)}
/* Animated logos come from logos.js (the design system's LogoMotion marks); each one takes its colour from --acc. */
.pc-mark{display:inline-block;vertical-align:-.1em;margin-right:.16em;--acc:var(--a)}
.pc-mark.mzlogo{display:inline-flex}
.cap-name{display:inline-flex;align-items:center}
.cap-mark{display:inline-flex;margin-right:12px;--acc:var(--cap-acc)}
.pc-claim{font:500 clamp(20px,2.2vw,28px)/1.2 var(--dsp);letter-spacing:-.015em;color:var(--pi);text-wrap:balance;margin-top:16px}
.pc-desc{color:var(--pi2);font-size:16px;text-wrap:pretty}
.pc-feats{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px}
.pc-feats li{display:flex;gap:12px;align-items:baseline;color:var(--pi2);font-size:15px}
.pc-feats li::before{content:"";width:6px;height:6px;border-radius:3px;background:var(--a);flex:none;transform:translateY(-2px)}
.pc-kpi{display:flex;flex-wrap:wrap;border-top:1px solid var(--pl);border-bottom:1px solid var(--pl)}
.pc-kpi div{flex:1 1 0;min-width:120px;padding:16px 16px 16px 0;display:flex;flex-direction:column;gap:4px}
.pc-kpi b{font:700 24px/1 var(--dsp);letter-spacing:-.02em}
.pc-kpi small{font:600 13px/1.4 var(--sans);color:var(--pi2)}
.pc-cta{align-self:flex-start;background:var(--a);color:#fff;padding:14px 24px;border-radius:8px;font-weight:600}
.pc-cta:hover{color:#fff}
#run.night .pc-cta,#run.night .pc-cta:hover{color:var(--pon)}
.shot-frame{border-radius:14px;background:var(--pcard);border:1px solid var(--pl);box-shadow:0 24px 64px -32px color-mix(in srgb,var(--a) 40%,transparent);display:flex;flex-direction:column;overflow:clip}
.shot-bar{height:36px;display:flex;align-items:center;gap:7px;padding:0 12px;border-bottom:1px solid var(--pl);font:400 13px/1 var(--mono);color:var(--pi2)}
.shot-bar i{width:9px;height:9px;border-radius:5px;background:var(--pl);flex:none}
.shot-bar span{margin-left:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shot-bar em{margin-left:auto;font:600 13px/1 var(--sans);font-style:normal;white-space:nowrap}
.ps-frame{background:#fff;overflow:clip}

/* ---------- product screens (HTML rebuilds of each product's sample-data UI) ---------- */
/* Every screen is laid out at 980 x 620 and zoomed to the width its frame gives it, so it shrinks
   like a screenshot instead of reflowing. home.js sets --z. */
.ps{zoom:var(--z,1);font-family:var(--sans);color:#242C39;width:980px;height:620px;display:flex;background:#fff;font-size:13px;line-height:1.4;overflow:clip}
.ps .mono{font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase}
.ps .num{font-variant-numeric:tabular-nums}
.ps svg text{font-family:var(--dsp)}
@keyframes psUp{from{opacity:0;transform:translate(-12px,22px)}to{opacity:1;transform:none}}
@keyframes psGrowX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes psGrowY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes psDraw{from{stroke-dashoffset:var(--len,300)}to{stroke-dashoffset:var(--to,0)}}
@keyframes psPop{0%{opacity:0;transform:scale(.4)}100%{opacity:1;transform:scale(1)}}

/* ---------- company ---------- */
/* A short ink-to-teal ramp softens the seam after the last product block; scroll-margin keeps anchored sections clear of the sticky nav. */
#company{background:linear-gradient(var(--ink),var(--teal-d) 96px);color:#fff}
section[id]{scroll-margin-top:68px}
.skip{padding:12px 14px}
.cta-short{display:none}
.nav-brand{min-height:44px;display:inline-flex;align-items:center}
.co-in{max-width:1280px;margin:0 auto;padding:120px 32px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:64px;align-items:end}
.co-l{display:flex;flex-direction:column;gap:24px}
.co-l .lbl{color:#BFE9E4}
.co-l h2{font:700 clamp(30px,4vw,52px)/1.02 var(--dsp);letter-spacing:-.025em;text-wrap:balance}
.co-l p{font-size:16px;color:#E3F4F2;max-width:520px;text-wrap:pretty}
.co-btn{align-self:flex-start;background:#fff;color:var(--teal-d);padding:14px 24px;border-radius:8px;font-weight:600}
.co-btn:hover{color:var(--teal-d)}
.co-r{display:flex;flex-direction:column;gap:32px}
.co-big{display:flex;flex-direction:column;gap:8px}
.co-big b{font:700 clamp(96px,13vw,184px)/.85 var(--dsp);letter-spacing:-.05em}
.co-row{display:flex;flex-wrap:wrap;gap:48px}
.co-row div{display:flex;flex-direction:column;gap:4px}
.co-row b{font:700 48px/1 var(--dsp);letter-spacing:-.03em}
.co-r span{font-size:15px;color:#E3F4F2}
.co-big span{font-size:16px}

/* ---------- contact ---------- */
#contact.leadform{padding:96px 0}
.ct-in{max-width:1280px;margin:0 auto;padding:0 32px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:48px}
.ct-l{display:flex;flex-direction:column;gap:16px;align-content:start}
.ct-l .lbl{color:var(--teal-lit)}
.ct-l h2{font:700 clamp(32px,4vw,52px)/1.05 var(--dsp);letter-spacing:-.02em}
.ct-l p{color:#B7C7C4}
#contact .lf{max-width:none}
#contact .lf label{font:400 13px/1.4 var(--sans);letter-spacing:0;text-transform:none;color:#B7C7C4}
#contact .lf .lf-alt,#contact .lf .lf-alt a{font-size:13px}
.fErr{display:block;margin-top:6px;font-size:13px;color:#FF8A8A}
.fErr[hidden]{display:none}
#contact .lf input::placeholder,#contact .lf textarea::placeholder{color:#7E948F}
#contact .lf [aria-invalid="true"]{border-color:#FF8A8A}
#contact .lf-submit.sent{background:var(--teal-d)}

/* ---------- footer (shared .sitefoot, set for the dark page at the 13px floor) ---------- */
footer{border-top:1px solid #13302c;background:var(--ink);padding:34px 0 40px;font-size:13px;color:rgba(232,242,240,.62)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad);position:relative}
footer .sf-col h2{font-size:13px;letter-spacing:.04em}
footer .sf-brand .sf-org,footer .sf-base{font-size:13px}
footer .sf-brand .sf-org,footer .sf-col h2,footer .sf-meta{color:rgba(232,242,240,.62)}
footer .sf-meta{opacity:1}

/* ---------- scroll-linked reveals ---------- */
/* The browser ties each animation to the element's position in the scrolling page. Where scroll
   timelines are unsupported nothing is hidden: content simply shows. Ancestors must clip with
   overflow:clip, never hidden, or the view timeline breaks. */
@keyframes rvUp{from{opacity:0;transform:translateY(44px)}to{opacity:1;transform:none}}
@keyframes rvLine{from{transform:scaleX(0)}to{transform:none}}
@keyframes rvSlide{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
@keyframes rvSide{from{opacity:0;transform:translateX(var(--dx,64px)) scale(.94);filter:blur(6px)}60%{opacity:1;filter:none}to{opacity:1;transform:none}}
@keyframes rvFade{to{opacity:0;transform:translateY(-24px) scale(.98)}}
/* The screen is sticky, so its own view timeline stalls; it follows its product block's timeline instead. */
.pb{view-timeline:--pb}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    /* Slow, scroll-scrubbed reveals: linear timing so the motion tracks the scroll exactly; the
       easing lives in the long ranges. Everything in a product block reads that block's timeline,
       because the sticky screen's own timeline stalls while it is pinned. */
    .rv{animation:rvUp linear both;animation-timeline:view();animation-range:entry calc(5% + var(--r0,0%) * .4) cover calc(28% + var(--r1,70%) * .22)}
    .pc-label.rv{animation:none}
    .pc-label i{animation:rvLine linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
    .pc-label .lbl{animation:rvSlide linear both;animation-timeline:view();animation-range:entry 10% cover 42%}
    /* Desktop: the screen is pinned, so it reads its block's timeline in viewport units: the frame
       fades in while the block top travels from 80% to 45% of the window, then the parts build one
       after another until the block top nears the nav. Phones override this below. */
    .rvShot{animation:rvSide linear both,rvFade linear both;animation-timeline:--pb,--pb;animation-range:cover 25vh cover 60vh,exit 35% exit 80%}
    .ps .up{animation:psUp linear both;animation-timeline:--pb;animation-range:cover calc(42vh + var(--i,0) * 3vh) cover calc(62vh + var(--i,0) * 3vh)}
    .ps .gx{transform-origin:0 50%;animation:psGrowX linear both;animation-timeline:--pb;animation-range:cover calc(52vh + var(--i,0) * 3vh) cover calc(72vh + var(--i,0) * 3vh)}
    .ps .gy{transform-origin:50% 100%;animation:psGrowY linear both;animation-timeline:--pb;animation-range:cover calc(52vh + var(--i,0) * 3vh) cover calc(72vh + var(--i,0) * 3vh)}
    .ps .draw{animation:psDraw linear both;animation-timeline:--pb;animation-range:cover 52vh cover 82vh}
    .ps .pop{transform-box:fill-box;transform-origin:center;animation:psPop linear both;animation-timeline:--pb;animation-range:cover calc(52vh + var(--i,0) * 3vh) cover calc(67vh + var(--i,0) * 3vh)}
    /* Phones and tablets stack the screen under the text and do not pin it, so each piece follows
       the screen's own position: it starts once the screen is a third of the way up the window. */
    @media (max-width:960px){
      .rvShot{animation:rvSide linear both;animation-timeline:view();animation-range:entry 20% cover 40%}
      .rvShot{view-timeline:--shot}
      .ps .up,.ps .gx,.ps .gy,.ps .draw,.ps .pop{animation-timeline:--shot}
      .ps .up{animation-range:cover calc(21% + var(--i,0) * 1.2%) cover calc(33% + var(--i,0) * 1.2%)}
      .ps .gx,.ps .gy,.ps .pop{animation-range:cover calc(25% + var(--i,0) * 1.2%) cover calc(37% + var(--i,0) * 1.2%)}
      .ps .draw{animation-range:cover 25% cover 41%}
    }
  }
}

/* ---------- responsive ---------- */
/* Below tablet width each product stacks: text first, then its screen, both full width. */
@media (max-width:960px){
  .pb-in{display:flex;flex-direction:column;gap:40px;padding:72px 20px}
  .pc,.pb.flip .pc{padding:0;width:100%;min-width:0}
  .shot,.pb.flip .shot{position:static;width:100%;min-width:0}
  .co-l h2{font-size:30px}
}
@media (max-width:600px){
  .nav-link[href="#company"]{display:none}
  .cta-long{display:none}
  .cta-short{display:inline}
  .nav-in{gap:6px}
  .nav-link{font-size:14px}
  .nav-in{padding:12px 16px;gap:10px}
  .nav-cta{padding:9px 12px;font-size:14px}
  .hero-in h1{font-size:38px}
  .co-in{padding:88px 20px}
  .p-head,.ct-in{padding-left:20px;padding-right:20px}
  .cap-name{font-size:32px}
  .cap-claim{font-size:17px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .hero-in,.cap-name,.cue{animation:none}
  .btn,.nav-cta,a,.pb,#products,.pc-label i,.ticks span,.story-fill,.cap,.cue{transition:none}
}