/* tokens.css */
/* Design tokens - taken from the app's styles.css (:root) so the site and the product read as one family.
   Light: single blue accent. Dark: the app's warm ink + ember orange (decisions 51, 123(9)). */
@font-face{font-family:'Assistant';font-style:normal;font-weight:200 800;font-display:swap;
  src:url(assets/fonts/assistant-2sDcZGJYnIjSi6H75xkzamW5O7w.woff2) format('woff2');
  unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;}
@font-face{font-family:'Assistant';font-style:normal;font-weight:200 800;font-display:swap;
  src:url(assets/fonts/assistant-2sDcZGJYnIjSi6H75xkzaGW5.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;
  src:url(assets/fonts/plusjakartasans-LDIbaomQNQcsA88c7O9yZ4KMCoOg4IA6-91aHEjcWuA_KUn9TR_V.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+2000-206F;}

:root{
  color-scheme:light;
  --bg:#f8fafc;
  --bg-raised:#ffffff;
  --bg-sunk:#eef2f7;
  --line:#e2e8f0;
  --line-strong:#cbd5e1;
  --text:#0f172a;
  --text-dim:#475569;
  --text-faint:#667085;
  --accent:#2563eb;
  --accent-ink:#ffffff;
  --accent-soft:rgba(37,99,235,.10);
  --cactus:#2fbfa5;
  --good:#2e7d32;
  --notify:#f5b400;
  --night:#0b1530;
  --night-2:#121f43;
  --night-text:#e6ecf8;
  --night-dim:#97a3bf;

  --shadow-sm:0 4px 6px -1px rgba(15,23,42,.06);
  --shadow:0 12px 24px -8px rgba(15,23,42,.14);
  --shadow-lg:0 40px 80px -24px rgba(15,23,42,.28), 0 12px 24px -12px rgba(15,23,42,.12);
  --radius:16px;
  --radius-lg:28px;

  --ease-out:cubic-bezier(.2,.8,.3,1);
  --ease-in-out:cubic-bezier(.42,0,.4,1);
  --ease-spring:cubic-bezier(.34,1.4,.64,1);
  --dur-quick:.14s;
  --dur-base:.28s;
  --dur-slow:.6s;

  --font:'Assistant','Segoe UI',Arial,sans-serif;
  --font-mark:'Plus Jakarta Sans','Assistant',Arial,sans-serif;
  --wrap:1180px;
  --gutter:clamp(16px,4vw,40px);
  --nav-h:64px;
}
/* (24.10.2026) האתר תמיד בהיר - אין כאן מצב כהה לפי מערכת ההפעלה או לפי data-theme. לשינוי צבעים: בטוקנים בבהיר בלבד. */

/* base.css */
/* Base: reset, type scale, layout primitives, buttons, phone frame, reveal states. */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 12px);}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--font); font-size:1.0625rem; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip;}
img,svg{display:block; max-width:100%;}
a{color:inherit;}
button{font:inherit; color:inherit;}
h1,h2,h3,p{margin:0;}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px;}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.skip{position:fixed; inset-inline-start:16px; top:-60px; z-index:100; background:var(--accent); color:var(--accent-ink);
  padding:10px 16px; border-radius:10px; text-decoration:none; font-weight:700; transition:top var(--dur-base) var(--ease-out);}
.skip:focus{top:12px;}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter);}
.section{position:relative; padding-block:clamp(88px,12vw,160px);}

.eyebrow{display:inline-flex; align-items:center; gap:10px; font-size:.8125rem; font-weight:700; letter-spacing:.08em;
  color:var(--accent); text-transform:uppercase;}
.display{font-size:clamp(2.5rem,5.4vw,4.75rem); line-height:1.02; font-weight:800; letter-spacing:-.025em; text-wrap:balance;}
.headline{font-size:clamp(2rem,4.4vw,3.5rem); line-height:1.08; font-weight:800; letter-spacing:-.02em; text-wrap:balance;}
.headline .dim,.display .dim{color:var(--text-faint);}
.lede{font-size:clamp(1.0625rem,1.5vw,1.25rem); line-height:1.65; color:var(--text-dim); max-width:38em; text-wrap:pretty;}
.icon{width:1.15em; height:1.15em; flex:none;}

/* Buttons */
.btn{--h:48px; display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:var(--h); padding:0 22px;
  border-radius:999px; border:1px solid transparent; font-weight:700; font-size:1rem; text-decoration:none; cursor:pointer;
  transition:transform var(--dur-quick) var(--ease-out), background-color var(--dur-base), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base);
  -webkit-tap-highlight-color:transparent;}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--accent); color:var(--accent-ink); box-shadow:0 8px 20px -8px color-mix(in srgb,var(--accent) 70%,transparent);}
.btn-primary:hover{box-shadow:0 14px 28px -10px color-mix(in srgb,var(--accent) 80%,transparent); transform:translateY(-1px);}
.btn-primary:active{transform:translateY(0) scale(.97);}
.btn-ghost{background:transparent; border-color:var(--line-strong); color:var(--text);}
.btn-ghost:hover{background:var(--bg-raised); border-color:var(--text-faint);}
.btn .icon{transition:transform var(--dur-base) var(--ease-out);}
.btn:hover .icon-lead{transform:translateX(-4px);}     /* RTL: "forward" points left */
.btn:hover .icon-down{transform:translateY(3px);}
.btn-sm{--h:40px; padding:0 16px; font-size:.9375rem;}

/* Real product screens inside a phone frame */
.phone{position:relative; width:var(--pw,300px); aspect-ratio:390/844; border-radius:calc(var(--pw,300px)*.14); padding:calc(var(--pw,300px)*.028);
  background:linear-gradient(160deg,#1e293b,#0b1220 60%); box-shadow:var(--shadow-lg), inset 0 0 0 1px rgba(255,255,255,.08);}
.phone::after{content:""; position:absolute; top:calc(var(--pw,300px)*.05); left:50%; width:28%; height:calc(var(--pw,300px)*.06);
  transform:translateX(-50%); border-radius:999px; background:#05080f; z-index:2; pointer-events:none;}
.phone .screen{position:relative; width:100%; height:100%; border-radius:calc(var(--pw,300px)*.115); overflow:hidden; background:#f8fafc;}
.phone .screen img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top;}
.sample-note{font-size:.8125rem; color:var(--text-faint);}

/* Reveal on scroll - content is visible by default; JS opts in by adding .js on <html>. */
.js [data-reveal]{opacity:0; transform:translate3d(0,28px,0); transition:opacity .8s var(--ease-out), transform .9s var(--ease-out);
  transition-delay:calc(var(--i,0) * 90ms);}
.js [data-reveal].is-in{opacity:1; transform:none;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; transition-delay:0s !important;}
  .js [data-reveal]{opacity:1; transform:none;}
}

/* WhatsApp: brand green is a call to talk, so it keeps its own colour on every surface. */
.btn-wa{background:#25d366; color:#06210f; box-shadow:0 8px 20px -8px rgba(37,211,102,.6);}
.btn-wa:hover{background:#2be074; transform:translateY(-1px); box-shadow:0 14px 28px -10px rgba(37,211,102,.7);}
.btn-wa:active{transform:translateY(0) scale(.97);}
.btn-wa .icon{width:1.3em; height:1.3em;}
.btn-ghost-night{background:rgba(255,255,255,.7); border-color:rgba(15,23,42,.22); color:#0f172a;}
.btn-ghost-night:hover{background:#fff; border-color:rgba(15,23,42,.45);}
.wa-fab{position:fixed; z-index:40; inset-inline-end:max(16px,env(safe-area-inset-right)); bottom:max(16px,env(safe-area-inset-bottom)); display:grid; place-items:center;
  width:56px; height:56px; padding:0; border-radius:50%; background:#25d366; color:#fff; text-decoration:none;
  box-shadow:0 14px 32px -10px rgba(0,0,0,.45), 0 0 0 0 rgba(37,211,102,.5); transform:translateY(90px); opacity:0;
  transition:transform .6s var(--ease-spring), opacity .4s;}
.wa-fab .icon{width:28px; height:28px;}
.wa-fab-label{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.wa-fab.is-shown{transform:none; opacity:1; animation:waRing 3.2s ease-out 1.2s 3;}
.wa-fab:hover{transform:scale(1.06);}
.wa-fab:active{transform:scale(.95);}
@keyframes waRing{0%{box-shadow:0 14px 32px -10px rgba(0,0,0,.45),0 0 0 0 rgba(37,211,102,.5);} 70%,100%{box-shadow:0 14px 32px -10px rgba(0,0,0,.45),0 0 0 18px rgba(37,211,102,0);}}
.icon.flip{transform:scaleX(-1);}

/* nav.css */
/* Sticky navigation: transparent at the top, gains a blurred surface + hairline after scrolling. */
.nav{position:fixed; inset-inline:0; top:0; z-index:50; height:var(--nav-h);
  transition:background-color var(--dur-base), box-shadow var(--dur-base), backdrop-filter var(--dur-base);}
/* The blurred surface lives on a pseudo-element: backdrop-filter on .nav itself would make it the containing block of the
   fixed mobile menu, shrinking the open menu to the 64px bar. */
.nav::before{content:""; position:absolute; inset:0; z-index:-1; opacity:0; pointer-events:none; transition:opacity var(--dur-base);
  background:color-mix(in srgb,var(--bg) 78%,transparent); backdrop-filter:saturate(1.6) blur(14px); -webkit-backdrop-filter:saturate(1.6) blur(14px); box-shadow:0 1px 0 var(--line);}
.nav.is-scrolled::before{opacity:1;}
.nav.on-dark{--text:var(--night-text); --text-dim:var(--night-dim); --bg-sunk:rgba(255,255,255,.08); --bg-raised:rgba(255,255,255,.06); --line-strong:rgba(255,255,255,.2);}
.nav.on-dark::before{opacity:1; background:color-mix(in srgb,var(--night) 70%,transparent); box-shadow:0 1px 0 rgba(255,255,255,.08);}
.nav-inner{height:100%; display:flex; align-items:center; gap:24px;}
.mark{display:inline-flex; align-items:center; text-decoration:none; min-height:44px;}
.mark b,.mark-static{font-family:var(--font-mark); font-weight:800; font-size:1.375rem; letter-spacing:.005em; direction:ltr; color:var(--text);}
.mark:hover b{color:var(--accent); transition:color var(--dur-base);}
/* (30.10.2026) הלוגו הרשמי: SVG בצבע הטקסט (currentColor) במקום הכיתוב; גובה ב-em כדי שיגדל עם הטקסט */
.mark b,.mark-static{line-height:0; display:inline-block;}
.mark b .wm,.mark-static .wm{display:block; height:1.6em; width:auto; aspect-ratio:2.997; overflow:visible;}

.nav-links{display:flex; gap:4px; margin-inline-start:auto; margin-inline-end:auto;}
.nav-links a{position:relative; padding:10px 14px; border-radius:999px; text-decoration:none; font-weight:600; font-size:.9688rem; color:var(--text-dim);
  transition:color var(--dur-base), background-color var(--dur-base);}
.nav-links a:hover{color:var(--text); background:var(--bg-sunk);}
.nav-links a::after{content:""; position:absolute; bottom:4px; inset-inline:14px; height:2px; border-radius:2px; background:var(--accent);
  transform:scaleX(0); transition:transform var(--dur-slow) var(--ease-out);}
.nav-links a.is-current{color:var(--text);}
.nav-links a.is-current::after{transform:scaleX(1);}
.nav-end{display:flex; align-items:center; gap:8px;}

.nav-toggle{display:none; position:relative; width:44px; height:44px; border-radius:12px; border:1px solid var(--line-strong); background:var(--bg-raised); cursor:pointer;}
.nav-toggle span{position:absolute; left:13px; right:13px; height:2px; border-radius:2px; background:var(--text);
  transition:transform var(--dur-base) var(--ease-out);}
.nav-toggle span:first-child{top:17px;}
.nav-toggle span:last-child{top:25px;}
.nav-toggle[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg);}

.mobile-menu{position:fixed; inset:var(--nav-h) 0 0; background:var(--bg); overflow-y:auto; padding-block:16px 40px;}
.mobile-menu nav{display:flex; flex-direction:column;}
.mobile-menu a:not(.btn){display:flex; align-items:center; justify-content:space-between; min-height:64px; border-bottom:1px solid var(--line);
  text-decoration:none; font-size:1.625rem; font-weight:800; letter-spacing:-.01em;}
.mobile-menu a:not(.btn) .icon{color:var(--text-faint); transition:transform var(--dur-base) var(--ease-out), color var(--dur-base);}
.mobile-menu a:not(.btn):active .icon{transform:translateX(-6px); color:var(--accent);}
.mm-cta{margin-top:28px; --h:56px; font-size:1.0625rem;}
.mobile-menu.is-open a{animation:mmIn .5s var(--ease-out) both; animation-delay:calc(60ms + var(--i) * 55ms);}
@keyframes mmIn{from{opacity:0; transform:translateY(14px);}}
.mobile-menu.is-open{animation:mmFade .25s ease both;}
@keyframes mmFade{from{opacity:0;}}

@media (max-width:860px){
  .nav-links,.nav-cta{display:none;}
  .nav-toggle{display:block;}
  .nav-end{margin-inline-start:auto;}
  .nav.menu-open::before{opacity:1; background:var(--bg); backdrop-filter:none; -webkit-backdrop-filter:none;}
}
.mobile-menu nav:focus{outline:none;}

/* hero.css */
/* Hero: headline + three real screens in a layered rig (pointer tilt + scroll parallax from js/hero.js). */
.hero{--hp-main:clamp(230px,24vw,320px); --hp-side:clamp(190px,19vw,260px);
  position:relative; padding-top:calc(var(--nav-h) + clamp(28px,4vw,48px)); overflow:clip;}
.hero::before{content:""; position:absolute; inset:0 0 auto; height:120%; pointer-events:none; z-index:-1;
  background:
    radial-gradient(60% 50% at 50% 62%, var(--accent-soft), transparent 70%),
    linear-gradient(to bottom, transparent 0, var(--bg) 92%);}
.hero::after{content:""; position:absolute; inset:0; z-index:-2; pointer-events:none; opacity:.55;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px; mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent 75%); -webkit-mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent 75%);}
.hero-copy{text-align:center; display:flex; flex-direction:column; align-items:center; gap:18px;}
.hero-copy .display{max-width:14em;}
.hero-stage{padding-top:64px;}
.hero-copy .lede{max-width:34em;}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:6px;}
.hero-facts{display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px; list-style:none; padding:0; margin:4px 0 0; font-size:.9375rem; color:var(--text-faint);}
.hero-facts li{display:inline-flex; align-items:center; gap:8px;}
.hero-facts li::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--cactus);}

/* Page entrance: pure CSS so text never waits for JS. */
.hero-in{animation:heroIn .9s var(--ease-out) both; animation-delay:calc(var(--d) * 90ms + 60ms);}
@keyframes heroIn{from{opacity:0; transform:translateY(22px); filter:blur(6px);}}

.hero-stage{position:relative; margin-top:clamp(12px,2vw,24px); perspective:1600px;}
.hero-rig{position:relative; display:flex; justify-content:center; align-items:flex-start; gap:0; height:calc(var(--hp-main) * 2.164 * .78);
  transform-style:preserve-3d; transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .5s var(--ease-out);}
.hero-phone{margin:0; position:relative; transform-style:preserve-3d;}
.hero-phone .phone{transform:translate3d(var(--px,0),var(--py,0),0);}
.hp-center{z-index:3;}
.hp-side{z-index:1; margin-top:clamp(48px,6vw,84px);}
.hp-start{margin-inline-end:calc(var(--hp-side) * -.22);}
.hp-end{margin-inline-start:calc(var(--hp-side) * -.22);}
.hp-side .phone{filter:saturate(.95);}
.hp-start{animation:phoneIn 1.1s var(--ease-out) .55s both; --from:translate3d(60px,60px,0) rotate(4deg);}
.hp-center{animation:phoneIn 1.1s var(--ease-out) .4s both; --from:translate3d(0,90px,0);}
.hp-end{animation:phoneIn 1.1s var(--ease-out) .7s both; --from:translate3d(-60px,60px,0) rotate(-4deg);}
@keyframes phoneIn{from{opacity:0; transform:var(--from);}}
.hero-stage::after{content:""; position:absolute; inset:auto 0 0; height:45%; pointer-events:none; z-index:5;
  background:linear-gradient(to bottom,transparent,var(--bg) 85%);}

.hero-note{position:relative; z-index:6; text-align:center; margin-top:-28px; padding-bottom:8px;}

@media (max-width:720px){
  .hero{--hp-main:min(62vw,250px); --hp-side:min(46vw,190px);}
  .hp-start{margin-inline-end:calc(var(--hp-side) * -.55);}
  .hp-end{margin-inline-start:calc(var(--hp-side) * -.55);}
  .hp-side{margin-top:56px; opacity:.9;}
  .hero-actions .btn{flex:1 1 220px;}
}
@media (prefers-reduced-motion:reduce){ .hero-rig{transform:none !important;} .hero-phone .phone{transform:none !important;} }

/* opener.css */
/* "Opener": a list card that opens into its detail screen. --k (0..1) is written by js/opener.js (scroll or timed).
   The detail layer is clipped to the card's rectangle (--ot/--or/--ob/--ol, % of the screen) and grows to the full screen. */
.opener{--k:0; position:absolute; inset:0; cursor:default;}
.op-base,.op-detail{position:absolute; inset:0;}
.op-base{transform:scale(calc(1 - var(--k) * .035)); filter:brightness(calc(1 - var(--k) * .12)); transform-origin:50% 40%;}
.op-detail{opacity:calc(var(--k) * 4); transform:scale(calc(.94 + var(--k) * .06)); transform-origin:50% 36%;
  clip-path:inset(calc(var(--ot) * (1 - var(--k))) calc(var(--or) * (1 - var(--k))) calc(var(--ob) * (1 - var(--k))) calc(var(--ol) * (1 - var(--k))) round calc(18px * (1 - var(--k))));}
.op-base picture,.op-detail picture,.op-base img,.op-detail img{position:absolute; inset:0; width:100%; height:100%;}
.opener[role=button]{cursor:pointer;}
.opener[role=button]:focus-visible{outline:3px solid var(--accent); outline-offset:-3px;}
/* tap hint: a ring on the row before it opens */
.op-tap{position:absolute; left:var(--tx,50%); top:var(--ty,50%); width:44px; height:44px; margin:-22px 0 0 -22px; border-radius:50%; pointer-events:none;
  background:rgba(37,99,235,.28); box-shadow:0 0 0 2px rgba(37,99,235,.55); opacity:0; transform:scale(.4);}
.opener.is-hint .op-tap{animation:tapHint 1.1s var(--ease-out) both;}
@keyframes tapHint{0%{opacity:0; transform:scale(.4);} 30%{opacity:1; transform:scale(1);} 70%{opacity:1; transform:scale(.82);} 100%{opacity:0; transform:scale(1.5);}}
html:not(.js) .opener{--k:1;}
@media (prefers-reduced-motion:reduce){ .opener{--k:1 !important;} .op-tap{display:none;} }

/* Callouts: a dot on the screen, a line out of the phone, a chip at the end. Lines draw in after the phones land. */
.callout{position:absolute; z-index:6; pointer-events:none; --len:clamp(36px,5vw,84px);}
.co-dot{position:absolute; width:12px; height:12px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft), 0 0 0 1px #fff inset;
  animation:coPulse 2.6s ease-out 2.2s infinite;}
.co-line{position:absolute; height:2px; background:var(--accent); transform-origin:left center; border-radius:2px; transform:scaleX(0); animation:coDraw .7s var(--ease-out) 1.5s forwards;}
.co-chip{position:absolute; white-space:nowrap; padding:8px 14px; border-radius:999px; background:var(--bg-raised); border:1px solid var(--line); box-shadow:var(--shadow);
  font-size:.875rem; font-weight:800; color:var(--text); opacity:0; animation:coChip .5s var(--ease-spring) 2s forwards;}
@keyframes coDraw{to{transform:scaleX(1);}}
@keyframes coChip{from{opacity:0; transform:translateY(8px) scale(.92);} to{opacity:1; transform:none;}}
@keyframes coPulse{0%{box-shadow:0 0 0 0 var(--accent-soft), 0 0 0 1px #fff inset;} 70%,100%{box-shadow:0 0 0 14px transparent, 0 0 0 1px #fff inset;}}
/* out to the right (physical): dot at --dx, line runs right across the phone edge, chip beyond it */
.co-r{left:0; top:var(--ty); width:100%;}
.co-r .co-dot{left:var(--dx); top:-6px; margin-left:-6px;}
.co-r .co-line{left:var(--dx); top:-1px; width:calc(100% - var(--dx) + var(--len));}
.co-r .co-chip{left:calc(100% + var(--len)); top:0; transform:translateY(-50%); animation-name:coChipY;}
.co-l{left:0; top:var(--ty); width:100%;}
.co-l .co-dot{left:var(--dx); top:-6px; margin-left:-6px;}
.co-l .co-line{right:calc(100% - var(--dx)); left:auto; top:-1px; width:calc(var(--dx) + var(--len)); transform-origin:right center;}
.co-l .co-chip{right:calc(100% + var(--len)); top:0; transform:translateY(-50%); animation-name:coChipY;}
.callout{--ph:calc(var(--pw) * 2.164);}
.co-t{left:var(--dx); top:0; height:0;}
.co-t .co-dot{left:-6px; top:calc(var(--ph) * var(--dy) - 6px);}
.co-t .co-line{width:2px; left:-1px; top:-30px; height:calc(var(--ph) * var(--dy) + 30px); transform-origin:bottom center; transform:scaleY(0); animation-name:coDrawY;}
.co-t .co-chip{left:0; top:-30px; transform:translate(-50%,-100%); animation-name:coChipT;}
@keyframes coChipY{from{opacity:0; transform:translateY(-50%) scale(.92);} to{opacity:1; transform:translateY(-50%);}}
@keyframes coChipT{from{opacity:0; transform:translate(-50%,calc(-100% + 8px)) scale(.92);} to{opacity:1; transform:translate(-50%,-100%);}}
@keyframes coDrawY{to{transform:scaleY(1);}}
@media (max-width:720px){ .callout{display:none;} }
@media (prefers-reduced-motion:reduce){ .co-line{transform:none !important;} .co-chip{opacity:1 !important; transform:none;} .co-r .co-chip,.co-l .co-chip{transform:translateY(-50%) !important;} .co-t .co-chip{transform:translate(-50%,-100%) !important;} .co-t .co-line{transform:none !important;} }

/* in-card hint: sits on the empty part of the list screen and fades out as the card opens */
.op-hint{position:absolute; left:50%; top:58%; transform:translateX(-50%); z-index:2; display:flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; white-space:nowrap;
  background:var(--accent); color:var(--accent-ink); font-size:.8125rem; font-weight:800; box-shadow:0 10px 24px -8px color-mix(in srgb,var(--accent) 70%,transparent);
  opacity:calc(1 - var(--k) * 5); pointer-events:none;}
.op-hint .icon{animation:hintBob 1.4s ease-in-out infinite;}
@keyframes hintBob{50%{transform:translateY(4px);}}
html:not(.js) .op-hint,.opener[data-opener=timed] .op-hint{display:none;}
@media (prefers-reduced-motion:reduce){ .op-hint{display:none;} }

/* problem.css */
/* Problem chapter: a tall section with a sticky stage. js/problem.js writes --p (0..1 scroll progress), --o (0..1 "order")
   and --dark (1..0) on .problem, and moves the fragments with transforms. Without JS: a calm, readable static version. */
.problem{--alarm:#ff5a5f; --pain-1:#4a0f17; --pain-2:#14070b; --o:0; --dark:1; position:relative; height:340vh; color:var(--night-text);}
.problem-sticky{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; display:flex; align-items:center;}
.problem-night{position:absolute; inset:0; background:
  radial-gradient(60% 60% at 30% 40%, var(--pain-1), var(--pain-2) 72%); opacity:var(--dark);}
.problem-night::after{content:""; position:absolute; inset:-10%; background:radial-gradient(50% 50% at 50% 50%, rgba(255,40,60,.22), transparent 70%);
  opacity:.6; animation:alarmPulse 2.4s ease-in-out infinite;}
@keyframes alarmPulse{50%{opacity:.18;}}
.problem::before{content:""; position:absolute; inset:0; background:var(--bg); z-index:-1;}
.problem-grid{position:relative; width:100%; display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(24px,5vw,72px); align-items:center;}
.problem-copy{position:relative;}
.problem .eyebrow{color:color-mix(in srgb,var(--accent) calc(var(--o)*100%),var(--alarm));}
.pstep .alarm{color:color-mix(in srgb,var(--text-faint) calc(var(--o)*100%),var(--alarm));}
.problem-steps{list-style:none; margin:20px 0 0; padding:0; display:grid;}
/* Captions hand over without overlapping: the outgoing one leaves fast, the incoming one starts after it. */
.pstep{grid-area:1/1; opacity:0; transform:translateY(-12px); transition:opacity .22s ease, transform .3s ease; pointer-events:none;}
.pstep.is-on{opacity:1; transform:none; transition:opacity .5s var(--ease-out) .18s, transform .6s var(--ease-out) .18s;}
.pstep.is-on ~ .pstep:not(.is-on){transform:translateY(18px);}
.pstep .headline{color:color-mix(in srgb,var(--text) calc(var(--o)*100%),var(--night-text));}
.pstep .headline .dim{color:var(--text-faint);}
.pstep p{margin-top:16px; font-size:clamp(1.0625rem,1.5vw,1.25rem); line-height:1.65; max-width:30em;
  color:color-mix(in srgb,var(--text-dim) calc(var(--o)*100%),#e8c9cc);}

.problem-field{position:relative; height:min(72vh,600px);}
.frag{--w:clamp(220px,24vw,300px); position:absolute; top:50%; left:50%; width:var(--w); margin-left:calc(var(--w) / -2); translate:0 -50%; min-height:54px;
  display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:12px; padding:12px 16px; border-radius:14px;
  font-size:.9688rem; font-weight:600; line-height:1.35; will-change:transform;
  background:color-mix(in srgb,var(--bg-raised) calc(var(--o)*100%),#3f1219);
  color:color-mix(in srgb,var(--text) calc(var(--o)*100%),#ffe3e5);
  border:1px solid color-mix(in srgb,var(--line) calc(var(--o)*100%),rgba(255,90,95,.55));
  box-shadow:0 18px 40px -18px rgba(0,0,0,.55);}
.frag .icon{grid-row:1; width:20px; height:20px; color:color-mix(in srgb,var(--accent) calc(var(--o)*100%),#ff8f93);}
.frag-chat{border-radius:18px 18px 18px 4px; background:color-mix(in srgb,var(--bg-raised) calc(var(--o)*100%),#55151d);}
.frag-note{background:color-mix(in srgb,var(--bg-raised) calc(var(--o)*100%),#f4b4a6); color:color-mix(in srgb,var(--text) calc(var(--o)*100%),#3d0a0f);}
.frag-note .icon{color:color-mix(in srgb,var(--accent) calc(var(--o)*100%),#8f1d26);}
.f-chaos,.f-order{grid-row:1; grid-column:2;}
.f-chaos{opacity:calc(1 - var(--o) * 2.2);}
.f-order{opacity:calc(var(--o) * 2.2 - 1.1); font-weight:700;}
.frag::after{content:""; position:absolute; inset-inline-end:14px; top:50%; width:18px; height:18px; margin-top:-9px; border-radius:50%;
  background:var(--good) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/12px no-repeat;
  opacity:calc(var(--o) * 3 - 2); transform:scale(calc(.6 + var(--o) * .4));}

.problem-field{--row:62px;}
.order-panel{ position:absolute; top:50%; left:50%; width:calc(clamp(220px,24vw,300px) + 48px); height:calc(6 * var(--row) + 92px);
  margin-left:calc((clamp(220px,24vw,300px) + 48px) / -2); margin-top:calc((6 * var(--row) + 92px) / -2);   /* 72px header + 20px bottom padding around the rows */
  border-radius:var(--radius-lg); background:var(--bg-sunk); border:1px solid var(--line); box-shadow:var(--shadow-lg);
  opacity:calc(var(--o) * 1.6 - .5); transform:scale(calc(.92 + var(--o) * .08)); display:flex; flex-direction:column; align-items:center; padding-top:16px; gap:0;}
.op-mark{font-family:var(--font-mark); font-weight:800; font-size:1.125rem; direction:ltr; color:var(--text);}
.op-sub{font-size:.8125rem; color:var(--text-faint);}

.scene-rail{position:absolute; inset-inline-start:var(--gutter); bottom:28px; width:120px; height:2px; border-radius:2px; overflow:hidden;
  background:color-mix(in srgb,var(--line) calc(var(--o)*100%),rgba(255,90,95,.35));}
.scene-rail i{position:absolute; inset:0; background:color-mix(in srgb,var(--accent) calc(var(--o)*100%),var(--alarm)); transform-origin:right; transform:scaleX(var(--p,0));}

@media (max-width:860px){
  .problem{height:300vh;}
  .problem-grid{grid-template-columns:1fr; gap:8px; align-content:center; height:100%; padding-top:var(--nav-h);}
  .problem-steps{margin-top:10px; min-height:9.5em;}
  .pstep p{font-size:1rem; margin-top:10px;}
  .problem-field{height:min(50svh,420px); transform:scale(calc(1 - var(--o) * .17)); transform-origin:50% 100%;}   /* the ordered list is taller than the field: shrink it so it never covers the solution text */
  .frag{--w:min(78vw,280px); font-size:.875rem; min-height:46px; padding:9px 12px;}
  .order-panel{width:calc(min(78vw,280px) + 32px); margin-left:calc((min(78vw,280px) + 32px) / -2); height:calc(6 * var(--row) + 76px); margin-top:calc((6 * var(--row) + 76px) / -2); padding-top:12px;}
}

/* No JS / reduced motion: the final, ordered state with all four messages readable in sequence. */
html:not(.js) .problem,.problem.is-static{height:auto; --o:1; --dark:0;}
html:not(.js) .problem-sticky,.problem.is-static .problem-sticky{position:relative; height:auto; padding-block:120px;}
html:not(.js) .pstep,.problem.is-static .pstep{grid-area:auto; opacity:1; transform:none; margin-bottom:28px;}
html:not(.js) .problem-field,.problem.is-static .problem-field{display:none;}
html:not(.js) .scene-rail,.problem.is-static .scene-rail{display:none;}
.fname{white-space:nowrap;}

/* system.css */
/* Section heads shared by system / managers / how */
.sec-head{display:flex; flex-direction:column; gap:18px; max-width:46rem; margin-bottom:clamp(48px,7vw,88px);}

/* System showcase: steps scroll, one sticky phone swaps screens (js/showcase.js toggles .is-active). */
.system{--sc-pw:clamp(260px,24vw,320px);}
.showcase{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,6vw,96px);}
.showcase-stage{grid-column:2; grid-row:1; position:sticky; top:calc(50vh - var(--sc-pw) * 1.082); align-self:start;
  display:flex; align-items:center; justify-content:center; gap:28px; height:calc(var(--sc-pw) * 2.164);}
.showcase-phone .sc-screen{position:absolute; inset:0; clip-path:inset(100% 0 0 0 round 0); transform:scale(1.04);
  transition:clip-path .75s var(--ease-out), transform .9s var(--ease-out);}
.showcase-phone .sc-screen.is-active{clip-path:inset(0 0 0 0); transform:none; z-index:2;}
.showcase-phone .sc-screen.was-active{clip-path:inset(0 0 0 0); transform:scale(.96); z-index:1; transition:transform .75s var(--ease-out);}
.sc-rail{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px;}
.sc-rail li{width:4px; height:28px; border-radius:4px; background:var(--line-strong); transition:background-color var(--dur-base), height var(--dur-slow) var(--ease-out);}
.sc-rail li.is-active{background:var(--accent); height:48px;}

.showcase-steps{grid-column:1; grid-row:1; list-style:none; margin:0; padding:0;}
.sc-step{min-height:78vh; display:flex; flex-direction:column; justify-content:center; gap:14px; padding-block:24px;
  opacity:.28; transition:opacity .5s var(--ease-out);}
.sc-step.is-active{opacity:1;}
.sc-step:first-child{min-height:60vh; justify-content:flex-start; padding-top:8vh;}
.sc-num{font-family:var(--font-mark); font-weight:800; font-size:.875rem; color:var(--accent); letter-spacing:.06em;}
.sc-step h3{font-size:clamp(1.75rem,3vw,2.5rem); line-height:1.12; font-weight:800; letter-spacing:-.015em;}
.sc-step p{font-size:1.125rem; color:var(--text-dim); max-width:30em;}
.sc-inline{display:none;}

/* Phones: the same experience as desktop. The phone stays pinned under the nav and swaps its screen as each step passes.
   One scroll container (.showcase), so sticky has room to work on iOS. */
@media (max-width:860px){
  .showcase{display:block;}
  .showcase-stage{position:sticky; top:calc(var(--nav-h) + 14px); z-index:3; display:flex; height:auto; margin:0 auto; width:fit-content; gap:0; padding:0;
    --sc-pw:min(40vw,168px);}
  .showcase-phone{--pw:var(--sc-pw);}
  .showcase-phone .sc-screen{transition:clip-path .6s var(--ease-out), transform .7s var(--ease-out);}
  .sc-rail{display:none;}
  .showcase-steps{margin-top:-6px;}
  /* the phone sits at the top; each step's text lives in the lower part of the screen, under the phone */
  .sc-step,.sc-step:first-child{min-height:62svh; opacity:.3; justify-content:flex-start; padding:0; gap:10px;}
  .sc-step.is-active{opacity:1;}
  .sc-step h3{font-size:clamp(1.5rem,6vw,1.9rem);}
  .sc-step p{font-size:1.0625rem;}
  .sc-inline{display:none;}
}

/* managers.css */
/* Managers: a 3D carousel on a dark stage, the same on desktop and phones.
   js/carousel3d.js (GSAP) places each card by its offset from the active one: x, rotateY (cards turn inward like the
   inside of a cylinder), z depth, shade. Drag (mouse / finger), arrows, dots and the keyboard all move one card. */
.managers{--c3d-w:clamp(170px, min(21vw, calc((100svh - var(--nav-h) - 290px) / 2.164)), 270px); position:relative; overflow-x:clip;}
.managers .sec-head{margin-bottom:clamp(24px,4vw,48px);}

/* Scroll drives the carousel: a tall track, the carousel stays on screen while it is scrolled through (js adds .c3d-scroll). */
.c3d-scroll .c3d-pin{height:calc(100svh + 3 * 70svh);}
.c3d-scroll .c3d-sticky{position:sticky; top:var(--nav-h); height:calc(100svh - var(--nav-h)); display:flex; flex-direction:column; justify-content:center;}
.c3d-progress{display:none;}
.c3d-scroll .c3d-progress{display:block; position:absolute; inset-inline:0; bottom:-14px; margin-inline:auto; width:120px; height:3px; border-radius:3px; background:var(--line); overflow:hidden;}
.c3d-progress i{position:absolute; inset:0; background:var(--accent); transform-origin:right; transform:scaleX(var(--t,0));}

.c3d{position:relative; outline:none;}
.c3d:focus-visible .c3d-stage{outline:2px solid var(--accent); outline-offset:8px; border-radius:24px;}
.c3d-stage{position:relative; height:calc(var(--c3d-w) * 2.164 + 40px); perspective:1100px; perspective-origin:50% 40%;
  touch-action:pan-y; user-select:none; -webkit-user-select:none; cursor:grab;}
.c3d-stage.is-dragging{cursor:grabbing;}
.c3d-card{position:absolute; left:50%; top:10px; width:var(--c3d-w); margin-left:calc(var(--c3d-w) / -2);
  transform-style:preserve-3d; will-change:transform; backface-visibility:hidden;}
.c3d-card .phone{box-shadow:var(--shadow-lg);}
.c3d-card img{pointer-events:none; -webkit-user-drag:none;}
.c3d-shade{position:absolute; inset:0; border-radius:calc(var(--c3d-w) * .14); background:var(--bg); opacity:0; pointer-events:none;}
.c3d-label{position:absolute; inset:auto 0 0; z-index:6; display:flex; flex-direction:column; align-items:center; gap:2px; padding:44px 10px 18px;
  background:linear-gradient(to top,rgba(5,9,20,.88),rgba(5,9,20,.55) 55%,transparent); color:#fff; font-weight:800; font-size:clamp(.9375rem,1.4vw,1.125rem); text-align:center;}
.c3d-label b{font-family:var(--font-mark); font-size:clamp(1.5rem,2.4vw,2rem); line-height:1; letter-spacing:-.02em; color:#9db8ff;}
.c3d-floor{position:absolute; left:50%; bottom:0; width:min(90%,820px); height:70px; transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%, color-mix(in srgb,var(--accent) 22%,transparent), transparent 70%); filter:blur(6px);}

.c3d-nav{position:relative; display:flex; align-items:center; justify-content:center; gap:16px; margin-top:8px;}
.c3d-dots{display:flex; gap:6px; align-items:center;}
.c3d-dot{width:30px; height:30px; padding:0; border:0; background:none; cursor:pointer; display:grid; place-items:center;}
.c3d-dot::before{content:""; width:8px; height:8px; border-radius:999px; background:var(--line-strong); transition:width .35s var(--ease-out), background-color .35s;}
.c3d-dot[aria-current="true"]::before{width:26px; background:var(--accent);}
.c3d-dot:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:8px;}
.c3d-arrow{width:46px; height:46px; border-radius:50%; border:1px solid var(--line-strong); background:var(--bg-raised); color:var(--text); display:grid; place-items:center; cursor:pointer;
  transition:transform var(--dur-quick) var(--ease-out), background-color .2s, opacity .2s;}
.c3d-arrow:hover{background:var(--bg-sunk);}
.c3d-arrow:active{transform:scale(.92);}
.c3d-arrow[disabled]{opacity:.3; cursor:default;}
.c3d-arrow .icon{width:20px; height:20px;}

.c3d-caps{display:grid; max-width:40rem; margin:20px auto 0; text-align:center; min-height:8em;}
.c3d-cap{grid-area:1/1;}
.c3d-cap[hidden]{display:block; visibility:hidden; opacity:0;}
.c3d-cap h3{font-size:clamp(1.25rem,2.4vw,1.875rem); font-weight:800; line-height:1.2;}
.c3d-cap p{margin-top:8px; color:var(--text-dim); font-size:clamp(.9375rem,1.4vw,1.0625rem); line-height:1.55;}
.c3d-cap .push-btn{margin-top:12px;}

/* No JS: the cards as a plain sideways-scrolling row (only the first caption shows). */
html:not(.js) .c3d-stage{display:flex; overflow-x:auto; gap:16px; height:auto; perspective:none; padding:10px 0;}
html:not(.js) .c3d-card{position:relative; left:auto; margin:0; flex:none;}

@media (max-width:640px){
  .managers{--c3d-w:clamp(140px, min(46vw, calc((100svh - var(--nav-h) - 280px) / 2.164)), 210px);}
  .c3d-stage{perspective:800px; height:calc(var(--c3d-w) * 2.164 + 24px);}
  .c3d-caps{min-height:9.5em; margin-top:12px;}
  .c3d-cap p{font-size:.9063rem;}
  .c3d-arrow{width:42px; height:42px;}
}

/* k-pin.css */
/* k-pin.css: engine look for the two scroll-pinned sections (menu exam, onboarding): the scroll position picks one step at a time,
   a rail + caption above the illustration say which. Recreated 25.10.2026 for the animated stages (k-layers.css, k-flow.css). */
.k-pin{position:relative; height:calc(100svh + var(--kn) * 62svh);}
.k-sticky{position:sticky; top:var(--nav-h); height:calc(100svh - var(--nav-h)); display:flex; align-items:center; overflow:clip;}
.k-in{width:100%; display:grid; gap:clamp(8px,1.8svh,18px); padding-block:clamp(8px,1.6svh,18px);}
.k-rail{display:flex; gap:clamp(6px,1.5vw,16px); position:relative; margin:0; padding:0; list-style:none}
.k-rail li{flex:1; display:block; font-weight:700; font-size:.9375rem; color:var(--text-faint); transition:color var(--dur-slow) var(--ease-out); min-width:0;}
.k-rail li b{width:30px; height:30px; flex:none; border-radius:50%; display:grid; place-items:center; font-size:.8125rem; background:var(--bg-sunk); border:1px solid var(--line-strong); transition:background-color var(--dur-slow), color var(--dur-slow), transform var(--dur-slow) var(--ease-spring), border-color var(--dur-slow);}
.k-rail li span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.k-rail li.k-is-on{color:var(--text);} .k-rail li.k-is-on b{background:var(--accent); color:var(--accent-ink); border-color:var(--accent); transform:scale(1.12);}
.k-rail li.k-is-done b{background:var(--text); color:#fff; border-color:var(--text);}
.k-rail-line{height:3px; border-radius:3px; background:var(--line); overflow:hidden; margin-top:-4px;} .k-rail-line i{display:block; height:100%; width:calc(var(--kp,0) * 100%); background:var(--accent); transform-origin:right;}
.k-rb{display:flex; align-items:center; gap:10px; width:100%; min-height:44px; padding:0; background:none; border:0; font:inherit; color:inherit; cursor:pointer; text-align:start;}
.k-rb:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:999px;}
.k-caps{position:relative; min-height:5.4em;}
.k-cap{position:absolute; inset:0 0 auto 0; opacity:0; transform:translateY(10px); transition:opacity .45s var(--ease-out), transform .55s var(--ease-out); pointer-events:none;}
.k-cap.k-is-on{opacity:1; transform:none; pointer-events:auto;}
.k-cap h3{font-size:clamp(1.15rem,2vw,1.5rem); font-weight:800; letter-spacing:-.01em; margin:0}
.k-cap p{color:var(--text-dim); font-size:clamp(.9375rem,1.3vw,1.0625rem); max-width:52em; margin:2px 0 0;}
.k-in ol,.k-in ul{margin:0; padding:0; list-style:none;}
.k-in .sample-note{margin:0}
@media (max-width:640px){
  .k-rail li span{display:none;} .k-rb{justify-content:center;}
  .k-caps{min-height:7.2em;} .k-cap p{font-size:.875rem; line-height:1.45;} .k-cap h3{font-size:1.05rem;}
  .k-in .sample-note{display:none;} .k-in{gap:6px;}
}
/* "less motion": no pinning; the rail buttons switch the step instantly */
.k-static{height:auto;}
.k-static .k-sticky{position:static; height:auto; padding-block:clamp(56px,8vw,96px);}

/* k-mx.css */
/* k-mx.css: shared look of the two animated, non-scroll sections (menu exam in layers, onboarding as a live flow).
   Local aliases map the sketch tokens onto the site tokens (tokens.css). */
.mx{--raised:var(--bg-raised); --sunk:var(--bg-sunk); --dim:var(--text-dim); --faint:var(--text-faint); --spring:var(--ease-spring); --mark:var(--font-mark);
  --good-soft:#e8f5e9; --warn:#d97706; --warn-soft:#fff4e0; --bad:#c62828; --bad-soft:#fdecec; --wa:#25d366; --ease:var(--ease-out);}
.mx .num{font-family:var(--mark); font-variant-numeric:tabular-nums}
.mx-head{padding-top:clamp(56px,8vw,96px); padding-bottom:clamp(14px,2.4vw,28px)}
.mx-head .sec-head{display:grid; gap:6px; margin:0}
.mx-head .headline{font-size:clamp(1.6rem,3.4vw,2.7rem)}
.mx-lead{color:var(--text-dim); max-width:62ch; margin-top:10px; font-size:clamp(1rem,1.4vw,1.125rem)}
.mx-ctl{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.mx-btn{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line-strong); background:var(--bg-raised); border-radius:999px; padding:8px 16px; font:inherit; font-weight:700; font-size:.9375rem; cursor:pointer; color:var(--text)}
.mx-btn:hover{border-color:var(--accent); color:var(--accent)}
.mx-btn:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
.mx-cap{margin-top:18px; min-height:5.6em; max-width:62ch}
.mx-cap h3{font-size:clamp(1.15rem,2vw,1.5rem); font-weight:800; letter-spacing:-.01em}
.mx-cap p{color:var(--text-dim); margin-top:4px; font-size:clamp(.9375rem,1.3vw,1.0625rem)}
.mx-steps{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:20px 0 0; padding:0; list-style:none}
.mx-step{border:1px solid var(--line); background:var(--bg-raised); border-radius:16px; padding:14px 16px; transition:border-color .4s, box-shadow .4s}
.mx-step h3{font-size:1.0625rem; font-weight:800}
.mx-step p{color:var(--text-dim); font-size:.9375rem; margin-top:2px}
.mx-step.on{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.mx-step b{display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--bg-sunk); font-size:.8125rem; margin-inline-end:8px; transition:background .3s, color .3s}
.mx-step.on b{background:var(--accent); color:#fff}
@media (max-width:760px){ .mx-steps{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ .mx *,.mx *::before,.mx *::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; transition-delay:0s!important} }

/* k-layers.css */
/* k-layers.css: the menu exam built in 3D layers (js/layers.js). */
/* ---------- SKETCH 1: the exam in layers ---------- */
@property --rx{syntax:'<angle>'; inherits:true; initial-value:0deg}
@property --rz{syntax:'<angle>'; inherits:true; initial-value:0deg}
.s1-stage{position:relative; height:clamp(230px, calc(100svh - var(--nav-h) - 255px), 540px); perspective:1700px; overflow:hidden; border-radius:28px; border:1px solid var(--line);
  background:radial-gradient(60% 55% at 50% 45%, #e9f0ff 0%, var(--bg) 70%);}
.s1-stage::after{content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:40px 40px; opacity:.45; mask-image:radial-gradient(closest-side, #000, transparent);}
.s1-fit{position:absolute; left:50%; top:57%; width:380px; height:330px; transform:translate(-50%,-50%) scale(var(--fit,1)); z-index:1}
.s1-world{position:absolute; inset:0; transform-style:preserve-3d; --px:0deg; --py:0deg;
  transform:rotateX(calc(var(--rx) + var(--py))) rotateY(var(--px)) rotateZ(var(--rz));
  transition:--rx 1.2s var(--ease), --rz 1.2s var(--ease);}
.s1-stage[data-ch="1"]{--rx:56deg; --rz:-34deg}
.s1-stage[data-ch="2"]{--rx:52deg; --rz:-26deg}
.s1-layer{position:absolute; inset:0; transform-style:preserve-3d; transition:transform 1.2s var(--ease), opacity .7s var(--ease)}
.s1-l2,.s1-l3{opacity:0}
.s1-stage[data-ch="1"] .s1-l2,.s1-stage[data-ch="2"] .s1-l2{opacity:1; transform:translateZ(80px)}
.s1-stage[data-ch="2"] .s1-l3{opacity:1; transform:translateZ(160px)}
.s1-stage[data-ch="3"] .s1-l1,.s1-stage[data-ch="3"] .s1-l2{opacity:0; transform:translateZ(-80px)}
.s1-stage[data-ch="3"] .s1-l3{opacity:1; transform:none}
.s1-label{position:absolute; inset-inline-end:-118px; top:12px; font-size:12px; font-weight:800; letter-spacing:.05em; color:var(--accent);
  background:var(--raised); border:1px solid var(--line); border-radius:999px; padding:3px 10px; opacity:0; transition:opacity .5s .5s; white-space:nowrap}
.s1-stage[data-ch="1"] .s1-label,.s1-stage[data-ch="2"] .s1-label{opacity:1}

/* layer 1: the menu */
.s1-menu{position:absolute; inset:0; background:var(--raised); border-radius:22px; box-shadow:var(--shadow-lg); padding:18px 18px 14px; overflow:hidden}
.s1-menu h4{margin:0 0 10px; font-size:15px; font-weight:800; display:flex; justify-content:space-between; align-items:center}
.s1-menu h4 small{font-size:12px; font-weight:700; color:var(--faint)}
.s1-row{position:relative; display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 10px; border-radius:12px; font-size:14px; font-weight:700}
.s1-row + .s1-row{margin-top:4px}
.s1-row small{display:block; font-size:11.5px; font-weight:600; color:var(--faint)}
.s1-row em{font-style:normal; font-size:11px; font-weight:800; color:var(--dim); background:var(--sunk); border-radius:999px; padding:2px 8px; white-space:nowrap}
.s1-row::after{content:""; position:absolute; inset:0; border-radius:12px; border:2px solid var(--accent); background:var(--accent-soft); opacity:0}
.s1-stage[data-ch="0"] .s1-row::after{animation:s1hit 3.6s var(--ease) infinite; animation-delay:calc(.35s + var(--i) * .5s)}
@keyframes s1hit{0%{opacity:0} 8%{opacity:1} 40%{opacity:1} 55%,100%{opacity:0}}
.s1-beam{position:absolute; inset-inline:0; top:0; height:3px; background:linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow:0 0 24px 6px rgba(37,99,235,.35); opacity:0}
.s1-stage[data-ch="0"] .s1-beam{animation:s1beam 3.6s var(--ease) infinite}
@keyframes s1beam{0%{top:14%; opacity:0} 8%{opacity:1} 80%{opacity:1} 92%,100%{top:96%; opacity:0}}
.s1-read{position:absolute; inset-inline:14px; bottom:12px; display:flex; justify-content:space-between; align-items:center; font-size:12.5px; font-weight:800;
  background:var(--text); color:#fff; border-radius:12px; padding:8px 12px; transform:translateY(140%); transition:transform .6s var(--spring) .2s}
.s1-stage[data-ch="0"] .s1-read{transform:none}
.s1-read .dot{width:8px; height:8px; border-radius:50%; background:var(--cactus); display:inline-block; margin-inline-end:6px; animation:mxBlink 1s infinite}
@keyframes mxBlink{50%{opacity:.25}}

/* layer 2: facts lifted out of the menu */
.s1-plane{position:absolute; inset:0; border-radius:22px; border:2px dashed rgba(37,99,235,.45); background:rgba(37,99,235,.05); transform-style:preserve-3d}
.s1-chip{position:absolute; left:var(--x); top:var(--y); display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:999px; font-size:13px; font-weight:800;
  background:var(--raised); box-shadow:0 6px 14px -6px rgba(15,23,42,.3); white-space:nowrap;
  transform:translateZ(-120px) scale(.5); opacity:0; transition:transform .9s var(--spring), opacity .5s; transition-delay:calc(.35s + var(--i) * .09s)}
.s1-chip small{font-size:10.5px; font-weight:800; border-radius:999px; padding:1px 7px}
.s1-chip.al small{background:var(--bad-soft); color:var(--bad)}
.s1-chip.in small{background:var(--accent-soft); color:var(--accent)}
.s1-chip.fit small{background:var(--good-soft); color:var(--good)}
.s1-stage[data-ch="1"] .s1-chip,.s1-stage[data-ch="2"] .s1-chip{transform:translateZ(18px); opacity:1}

/* layer 3: the exam */
.s1-exam{position:absolute; inset:0; background:var(--raised); border-radius:22px; box-shadow:var(--shadow-lg); padding:16px 16px 12px; display:grid; gap:9px; align-content:start}
.s1-exam-h{display:flex; justify-content:space-between; align-items:center; font-size:14px; font-weight:800}
.s1-exam-h span{font-size:12px; color:var(--faint); font-weight:700}
.s1-q{border:1px solid var(--line); border-radius:14px; padding:10px 12px 8px}
.s1-q > b{display:block; font-size:14px; margin-bottom:6px}
.s1-opts{display:grid; grid-template-columns:1fr 1fr; gap:6px}
.s1-opt{position:relative; font-size:12.5px; font-weight:700; padding:6px 9px; border-radius:9px; background:var(--sunk); display:flex; align-items:center; justify-content:space-between; gap:4px;
  transition:background .4s, color .4s}
.s1-opt .icon{opacity:0; transform:scale(.3); transition:transform .45s var(--spring), opacity .3s}
.s1-stage[data-ch="3"] .s1-opt.ok{background:var(--good-soft); color:var(--good); transition-delay:.9s}
.s1-stage[data-ch="3"] .s1-opt.ok .icon{opacity:1; transform:none; transition-delay:.95s}
.s1-mini{display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; color:var(--dim); padding:6px 10px; border-radius:10px; background:var(--bg);
  opacity:0; transform:translateY(8px); transition:opacity .4s, transform .5s var(--ease); transition-delay:calc(.5s + var(--i) * .18s)}
.s1-mini .tag{margin-inline-start:auto; font-size:10.5px; font-weight:800; color:var(--accent); background:var(--accent-soft); border-radius:999px; padding:1px 8px}
.s1-mini .ck{width:18px; height:18px; border-radius:50%; display:grid; place-items:center; background:var(--sunk); color:transparent; font-size:11px; transition:background .35s, color .35s; transition-delay:calc(1.2s + var(--i) * .2s)}
.s1-stage[data-ch="2"] .s1-mini,.s1-stage[data-ch="3"] .s1-mini{opacity:1; transform:none}
.s1-stage[data-ch="3"] .s1-mini .ck{background:var(--good); color:#fff}
.s1-foot{display:flex; justify-content:space-between; align-items:center; font-size:12.5px; font-weight:800}
.s1-foot .num{font-size:15px}
.s1-approve{display:inline-flex; align-items:center; gap:6px; background:var(--accent); color:#fff; border-radius:999px; padding:5px 12px; font-size:12px; font-weight:800;
  opacity:.35; transition:opacity .4s 1.8s}
.s1-stage[data-ch="3"] .s1-approve{opacity:1; animation:mxPulse 1.6s 2.2s infinite}
@keyframes mxPulse{0%{box-shadow:0 0 0 0 rgba(37,99,235,.45)} 100%{box-shadow:0 0 0 12px rgba(37,99,235,0)}}


@media (max-width:760px){
  .s1-stage{height:clamp(230px, calc(100svh - var(--nav-h) - 275px), 440px); border-radius:20px}
  .s1-label{display:none}
}

/* k-flow.css */
/* k-flow.css: onboarding as a live flow (js/flow.js). One design canvas scaled to fit the pinned screen, the same
   triangle on desktop and phone: board on top, the cactus in the middle, checklist and WhatsApp side by side below. Every beam goes through the cactus. */
.s2-view{position:relative; height:clamp(240px, calc(100svh - var(--nav-h) - 255px), 640px); overflow:hidden}
.s2-canvas{position:absolute; left:50%; top:50%; width:440px; padding:8px 10px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-areas:"board board" "hub hub" "docs wa"; gap:24px 14px; transform:translate(-50%,-50%) scale(var(--fit,1)); transform-origin:center center; flex:none}
.s2-svg{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; overflow:visible}
.s2-svg .base{fill:none; stroke:var(--line-strong); stroke-width:1.5; stroke-dasharray:3 5}
.s2-svg .trail{fill:none; stroke-width:3; stroke-linecap:round}
.s2-node{position:relative; z-index:1; background:var(--raised); border:1px solid var(--line); border-radius:16px; padding:10px 12px; box-shadow:var(--shadow); min-width:0;
  transition:box-shadow .4s, border-color .4s, transform .5s var(--spring)}
.s2-node.ping{border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft), var(--shadow); transform:scale(1.03)}
.s2-cap{font-size:11.5px; font-weight:800; letter-spacing:.04em; color:var(--faint); margin-bottom:6px}

.s2-board{grid-area:board; justify-self:center; width:300px; display:grid; gap:6px}
.s2-erow{display:flex; align-items:center; gap:10px; opacity:0; transform:translateY(8px); transition:opacity .45s, transform .5s var(--ease)}
.s2-erow.on{opacity:1; transform:none}
.s2-ring{position:relative; width:40px; height:40px; flex:none}
.s2-ring svg{width:100%; height:100%; transform:rotate(-90deg)}
.s2-ring circle{fill:none; stroke-width:5}
.s2-ring .tr{stroke:var(--sunk)}
.s2-ring .fl{stroke:var(--accent); stroke-linecap:round; stroke-dasharray:138.2; stroke-dashoffset:138.2; transition:stroke-dashoffset .8s var(--ease), stroke .4s}
.s2-ring b{position:absolute; inset:0; display:grid; place-items:center; font-size:10.5px}
.s2-nm{flex:1; min-width:0; font-weight:800; font-size:13.5px; line-height:1.25}
.s2-nm small{display:block; font-weight:600; font-size:11px; color:var(--faint)}
.s2-chip{font-size:11px; font-weight:800; border-radius:999px; padding:2px 9px; background:var(--accent-soft); color:var(--accent); white-space:nowrap; transition:background .3s, color .3s}
.s2-chip.warn{background:var(--warn-soft); color:var(--warn)}
.s2-chip.bad{background:var(--bad-soft); color:var(--bad)}
.s2-chip.ok{background:var(--good); color:#fff}

.s2-hub{grid-area:hub; justify-self:center; width:112px; height:112px; border-radius:50%; padding:0; display:grid; place-items:center; align-content:center; gap:1px; text-align:center;
  background:radial-gradient(circle at 50% 40%, #fff 0%, #f1fbf8 70%); border:1px solid rgba(47,191,165,.4)}
.s2-hub img{width:46px; height:46px; object-fit:contain}
.s2-hub b{font-family:var(--mark); font-size:13px}
.s2-day{font-size:11.5px; font-weight:800; color:var(--dim); background:var(--sunk); border-radius:999px; padding:1px 9px; transition:background .3s, color .3s}
.s2-day.warn{background:var(--warn-soft); color:var(--warn)}
.s2-day.bad{background:var(--bad-soft); color:var(--bad)}
.s2-hub::after{content:""; position:absolute; inset:-8px; border-radius:50%; border:2px solid var(--cactus); opacity:0}
.s2-hub.ping::after{animation:mxRing 1s var(--ease)}
@keyframes mxRing{0%{opacity:.8; transform:scale(.9)} 100%{opacity:0; transform:scale(1.25)}}

.s2-docs{grid-area:docs; display:grid; gap:5px; align-content:start}
.s2-doc{display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; padding:5px 8px; border-radius:10px; background:var(--bg); transition:background .4s}
.s2-doc .icon{color:var(--faint); font-size:14px}
.s2-doc .st{margin-inline-start:auto; font-size:10.5px; font-weight:800; border-radius:999px; padding:1px 8px; background:var(--sunk); color:var(--faint); transition:background .3s, color .3s; white-space:nowrap}
.s2-doc[data-s="sent"] .st{background:var(--accent-soft); color:var(--accent)}
.s2-doc[data-s="done"]{background:var(--good-soft)}
.s2-doc[data-s="done"] .st{background:var(--good); color:#fff}
.s2-doc[data-s="done"] .icon{color:var(--good)}

.s2-wa{grid-area:wa; padding:0; overflow:hidden; display:flex; flex-direction:column}
.s2-wa-h{display:flex; align-items:center; gap:8px; background:#075e54; color:#fff; padding:7px 12px; font-size:13px; font-weight:700}
.s2-wa-h .icon{font-size:17px; color:var(--wa)}
.s2-wa-b{background:#efe7dd; padding:8px; display:flex; flex-direction:column; gap:5px; height:auto; min-height:104px; flex:1; justify-content:flex-end; overflow:hidden}
.s2-bub{align-self:flex-start; max-width:94%; background:#fff; border-radius:9px 9px 9px 2px; padding:4px 8px; font-size:11.5px; line-height:1.35; box-shadow:0 1px 1px rgba(0,0,0,.08); animation:mxBub .45s var(--spring)}
.s2-bub em{display:block; font-style:normal; font-size:10px; font-weight:800; color:var(--accent)}
.s2-bub.warn em{color:var(--warn)} .s2-bub.ok em{color:var(--good)} .s2-bub.bad{border-inline-start:3px solid var(--bad)} .s2-bub.bad em{color:var(--bad)}
@keyframes mxBub{from{opacity:0; transform:translateY(10px) scale(.95)}}

/* desktop: the same triangle (board on top, cactus in the middle, checklist and WhatsApp side by side below), spread over the whole width */
@media (min-width:861px){
  #onboardingPin .k-in{gap:8px; padding-block:8px}
  #onboardingPin .k-rb{min-height:36px}
  #onboardingPin .k-caps{min-height:4.4em}
  #onboardingPin .sample-note{display:none}
  #onboardingPin .s2-view{height:calc(100svh - var(--nav-h) - 190px)}
  .s2-canvas{width:900px; gap:30px 70px; padding:10px 20px}
  .s2-board{width:440px}
  .s2-hub{width:128px; height:128px}
  .s2-hub img{width:54px; height:54px}
}

/* closing.css */
/* Benefits (editorial list), How it works (scroll-drawn line), Contact, Footer. */
.benefits-grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(32px,6vw,96px); align-items:start;}
.benefits-head{position:sticky; top:calc(var(--nav-h) + 48px); display:flex; flex-direction:column; gap:18px;}
.benefit-list{list-style:none; margin:0; padding:0; border-top:1px solid var(--line-strong);}
.benefit-list li{position:relative; display:grid; grid-template-columns:auto 1fr; gap:24px; padding:30px 0; border-bottom:1px solid var(--line-strong);}
.benefit-list li::after{content:""; position:absolute; inset-inline:0; bottom:-1px; height:1px; background:var(--accent); transform:scaleX(0); transform-origin:right;
  transition:transform .7s var(--ease-out);}
.benefit-list li:hover::after{transform:scaleX(1);}
.b-num{font-family:var(--font-mark); font-weight:800; font-size:.875rem; color:var(--text-faint); padding-top:6px; transition:color var(--dur-base);}
.benefit-list li:hover .b-num{color:var(--accent);}
.benefit-list h3{font-size:clamp(1.25rem,2vw,1.625rem); font-weight:800; line-height:1.2;}
.benefit-list p{margin-top:8px; color:var(--text-dim); max-width:32em;}

/* How it works */
.how-track{position:relative; --prog:0;}
.how-steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(20px,3vw,44px); position:relative;}
.how-line{position:absolute; top:31px; inset-inline:calc(100% / 8); width:calc(100% * 3 / 4); height:2px; overflow:visible;}
.how-line path{fill:none; stroke:var(--accent); stroke-width:2; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:calc(1 - var(--prog));}
.how-track::before{content:""; position:absolute; top:31px; inset-inline:calc(100% / 8); height:2px; background:var(--line-strong); border-radius:2px;}
.how-step{display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px;}
.how-node{position:relative; z-index:1; width:64px; height:64px; display:grid; place-items:center; border-radius:20px;
  background:var(--bg-raised); border:1px solid var(--line-strong); color:var(--text-faint); box-shadow:var(--shadow-sm);
  transition:color .4s, border-color .4s, transform .6s var(--ease-spring), box-shadow .4s;}
.how-node .icon{width:26px; height:26px;}
.how-step.is-lit .how-node{color:var(--accent); border-color:var(--accent); transform:translateY(-4px); box-shadow:0 14px 28px -12px color-mix(in srgb,var(--accent) 60%,transparent);}
.how-step h3{margin-top:8px; font-size:1.375rem; font-weight:800;}
.how-step p{color:var(--text-dim); max-width:22em;}

/* Contact: bright and warm on purpose, it is the moment of decision */
.contact{padding-block:clamp(40px,6vw,80px) clamp(80px,10vw,140px);}
.contact-card{position:relative; overflow:hidden; border-radius:clamp(24px,3vw,40px); padding:clamp(44px,7vw,96px) clamp(24px,6vw,96px);
  background:radial-gradient(70% 60% at 85% 0%, #fff3c9 0%, transparent 60%), radial-gradient(60% 60% at 10% 100%, #c9f4e6 0%, transparent 60%), linear-gradient(160deg,#eaf3ff,#f4faff 55%,#fff7e6);
  color:#0f172a; display:flex; flex-direction:column; align-items:center; text-align:center; gap:20px; box-shadow:var(--shadow-lg); border:1px solid rgba(15,23,42,.06);}
.contact-card .display{max-width:13em; color:#0f172a;}
.contact-card .display .dim{color:#2563eb;}
.contact-card .lede{color:#334155;}
.contact-cactus{width:clamp(120px,14vw,170px); height:auto; filter:drop-shadow(0 18px 22px rgba(15,23,42,.22));}
.contact-actions{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:10px;}
.btn-lg{--h:56px; padding:0 28px; font-size:1.0625rem;}
.copy-mail{display:inline-flex; align-items:center; gap:12px; min-height:56px; padding:0 8px 0 20px; padding-inline:20px 8px; border-radius:999px; cursor:pointer;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); color:var(--night-text); transition:background-color var(--dur-base), border-color var(--dur-base);}
.copy-mail:hover{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.3);}
.cm-addr{font-weight:600;}
.cm-state{min-width:70px; padding:8px 12px; border-radius:999px; background:rgba(255,255,255,.1); font-size:.875rem; font-weight:700;}
.copy-mail.is-copied .cm-state{background:var(--good); color:#fff;}

.footer{border-top:1px solid var(--line); padding-block:36px 48px;}
.footer-inner{display:flex; flex-wrap:wrap; align-items:center; gap:16px 32px;}
.footer-brand{display:flex; align-items:baseline; gap:12px; color:var(--text-faint); font-size:.9375rem;}
.footer-links{display:flex; flex-wrap:wrap; gap:4px 20px; margin-inline-start:auto;}
.footer-links a{color:var(--text-dim); text-decoration:none; font-size:.9375rem; padding:8px 6px; min-height:44px; min-width:44px; justify-content:center; display:inline-flex; align-items:center;}
.footer-links a:hover{color:var(--text); text-decoration:underline; text-underline-offset:4px;}
.footer-copy{color:var(--text-faint); font-size:.875rem; width:100%;}

@media (max-width:860px){
  .benefits-grid{grid-template-columns:1fr;}
  .benefits-head{position:static;}
  .how-steps{grid-template-columns:1fr; gap:40px;}
  .how-step{display:grid; grid-template-columns:64px 1fr; text-align:start; align-items:start; column-gap:20px; row-gap:6px;}
  .how-step .how-node{grid-row:1/3;}
  .how-step h3{margin-top:14px;}
  .how-line,.how-track::before{display:none;}
  .footer-links{margin-inline-start:0;}
}
@media (prefers-reduced-motion:reduce){ .how-track{--prog:1 !important;} .contact-cactus{--cy:0px !important; --cr:0deg !important;} }

.contact-alt{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 14px; color:var(--night-dim); font-weight:600; margin-top:4px;}
.contact-alt .copy-mail{min-height:44px; padding:0 6px 0 14px; font-size:.9375rem;}
.contact-actions .btn-wa{min-width:min(100%,300px);}
.mm-cta2{margin-top:12px; --h:56px; font-size:1.0625rem;}

/* extras.css */
/* Goal card, "what is it" heading, shift clock (idea 2), push demo (idea 5), video (idea 9), cactus guide (idea 6), living cactus. */
.what{font-size:clamp(2rem,4vw,3rem);}
.lede-lg{font-size:clamp(1.125rem,1.6vw,1.3125rem); line-height:1.65; max-width:36em; color:var(--text-dim);}
/* goal: large type that lights word by word with the scroll */
.goal{padding-block:clamp(72px,10vw,140px);}
.goal-wrap{display:flex; flex-direction:column; gap:20px; max-width:62rem;}
.goal-label{font-size:.9375rem; font-weight:800; letter-spacing:.08em; color:var(--accent);}
.goal-text{font-size:clamp(1.75rem,3.8vw,3.25rem); line-height:1.3; font-weight:800; letter-spacing:-.015em; text-wrap:balance;}
.gw{color:var(--line-strong); transition:color .5s ease;}
.gw.is-lit{color:var(--text);}
html:not(.js) .gw{color:var(--text);}

/* shift clock in the problem scene */
.problem-top{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.shift-clock{display:inline-flex; align-items:baseline; gap:10px; padding:6px 12px; border-radius:999px; opacity:calc(1 - var(--o) * 2.5);
  background:color-mix(in srgb,var(--bg-raised) calc(var(--o)*100%),rgba(255,90,95,.14)); border:1px solid color-mix(in srgb,var(--line) calc(var(--o)*100%),rgba(255,90,95,.5));
  color:color-mix(in srgb,var(--text) calc(var(--o)*100%),#ffd7da);}
.shc-label{font-size:.8125rem; font-weight:700; letter-spacing:.04em;}
.shc-time{font-family:var(--font-mark); font-size:1.125rem; font-weight:800; font-variant-numeric:tabular-nums;}

/* push demo (idea 5) */
.mgr-phone .screen{position:relative;}
.push-note{position:absolute; top:8%; inset-inline:6%; z-index:5; display:flex; flex-direction:column; gap:3px; padding:12px 14px; border-radius:16px;
  background:rgba(255,255,255,.96); color:#0f172a; box-shadow:0 14px 30px -10px rgba(0,0,0,.45); transform:translateY(-140%); opacity:0;}
.push-note:not([hidden]){animation:pushIn .6s var(--ease-spring) both;}
.push-note[hidden]{display:none;}
.pn-app{font-size:.6875rem; letter-spacing:.04em; color:#475569;} .pn-title{font-size:.8438rem; font-weight:800;} .pn-state{font-size:.75rem; font-weight:700; color:#b45309;}
.push-note.is-read .pn-state{color:var(--good);}
.push-note.is-read .pn-state::before{content:"✓ ";}
@keyframes pushIn{from{transform:translateY(-140%); opacity:0;} to{transform:none; opacity:1;}}
.push-btn{margin-top:18px;}

/* video (idea 9) */
.video-frame{position:relative; max-width:960px; margin-inline:auto; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); background:#0b1530; aspect-ratio:16/9;}
.video-frame video{width:100%; height:100%; display:block; object-fit:cover;}
.video-play{position:absolute; inset:0; display:grid; place-items:center; background:linear-gradient(to top,rgba(11,21,48,.35),transparent 50%); border:0; cursor:pointer; transition:opacity .3s;}
.video-play span{width:88px; height:88px; border-radius:50%; display:grid; place-items:center; background:#fff; color:#0b1530; box-shadow:0 14px 40px rgba(0,0,0,.4); transition:transform .4s var(--ease-spring);}
.video-play .icon{width:34px; height:34px; margin-inline-start:-4px; fill:currentColor;}
.video-play:hover span{transform:scale(1.08);}
.video-play:active span{transform:scale(.95);}
.video-frame.is-playing .video-play{opacity:0; pointer-events:none;}

/* living cactus (contact) */
.cactus-live{display:block; margin:0 auto -6px; padding:0; border:0; background:none; cursor:pointer; -webkit-tap-highlight-color:transparent; transform-origin:50% 100%;}
.cactus-live .contact-cactus{margin:0; transform-origin:50% 100%; animation:cactusBreathe 4.2s ease-in-out infinite; transition:transform .6s var(--ease-spring);}
@keyframes cactusBreathe{0%,100%{transform:scale(1,1) rotate(-1.2deg);} 50%{transform:scale(1.025,1.045) rotate(1.2deg);}}
.cactus-live.is-happy .contact-cactus{animation:cactusHop .9s var(--ease-spring);}
@keyframes cactusHop{0%{transform:scale(1.04,.9);} 30%{transform:translateY(-34px) scale(.96,1.08) rotate(-6deg);} 60%{transform:translateY(0) scale(1.06,.94) rotate(4deg);} 100%{transform:none;}}
.cactus-live img{--cy:0px; --cr:0deg;}

/* guide cactus (idea 6): desktop only */
.guide{position:fixed; z-index:30; inset-inline-start:max(18px,env(safe-area-inset-left)); bottom:14px; width:84px; pointer-events:none; opacity:0; transform:translateY(40px); transition:opacity .5s, transform .7s var(--ease-spring);}
.guide.is-shown{opacity:1; transform:none;}
.guide img{width:84px; height:84px; transform-origin:50% 100%; animation:cactusBreathe 4.2s ease-in-out infinite; filter:drop-shadow(0 10px 14px rgba(0,0,0,.28));}
.guide-bubble{position:absolute; bottom:78px; inset-inline-start:34px; width:max-content; max-width:220px; padding:10px 14px; border-radius:16px 16px 4px 16px; background:var(--bg-raised); color:var(--text);
  border:1px solid var(--line); box-shadow:var(--shadow); font-size:.9375rem; font-weight:700; opacity:0; transform:translateY(8px) scale(.94); transform-origin:bottom right; transition:opacity .3s, transform .45s var(--ease-spring);}
.guide.has-line .guide-bubble{opacity:1; transform:none;}
@media (max-width:1099px){ .guide{display:none;} }
@media (prefers-reduced-motion:reduce){ .cactus-live .contact-cactus,.guide img{animation:none;} .push-note:not([hidden]){animation:none; transform:none; opacity:1;} }

/* dancing cactus: a loop of squash, hop and sway, with little confetti around him. Starts when the card is on screen. */
.cactus-live{position:relative;}
.cactus-live.is-dancing .contact-cactus{animation:cactusDance 1.3s ease-in-out infinite;}
@keyframes cactusDance{
  0%,100%{transform:translateY(0) rotate(-7deg) scale(1.04,.94);}
  25%{transform:translateY(-26px) rotate(0deg) scale(.96,1.06);}
  50%{transform:translateY(0) rotate(7deg) scale(1.04,.94);}
  75%{transform:translateY(-26px) rotate(0deg) scale(.96,1.06);}
}
.confetti{position:absolute; inset:-30px -70px 0; pointer-events:none; opacity:0; transition:opacity .4s;}
.cactus-live.is-dancing .confetti{opacity:1;}
.confetti i{position:absolute; width:9px; height:9px; border-radius:2px; top:60%; left:50%; background:var(--c,#2563eb); opacity:0;}
.cactus-live.is-dancing .confetti i{animation:confettiPop 2.2s ease-out infinite; animation-delay:calc(var(--n) * .27s);}
.confetti i:nth-child(1){--n:0; --c:#2563eb; --dx:-90px; --dy:-90px;} .confetti i:nth-child(2){--n:1; --c:#25d366; --dx:80px; --dy:-100px;}
.confetti i:nth-child(3){--n:2; --c:#f5b400; --dx:-60px; --dy:-130px;} .confetti i:nth-child(4){--n:3; --c:#ff5a5f; --dx:100px; --dy:-60px;}
.confetti i:nth-child(5){--n:4; --c:#2fbfa5; --dx:-110px; --dy:-40px;} .confetti i:nth-child(6){--n:5; --c:#a855f7; --dx:50px; --dy:-140px;}
.confetti i:nth-child(7){--n:6; --c:#f5b400; --dx:-30px; --dy:-110px;} .confetti i:nth-child(8){--n:7; --c:#2563eb; --dx:120px; --dy:-110px;}
@keyframes confettiPop{0%{opacity:0; transform:translate(0,0) rotate(0);} 15%{opacity:1;} 100%{opacity:0; transform:translate(var(--dx),var(--dy)) rotate(260deg);}}
@media (prefers-reduced-motion:reduce){ .cactus-live.is-dancing .contact-cactus,.cactus-live.is-dancing .confetti i{animation:none;} .confetti{display:none;} }