/* tp-next: the concept-based home (direction change 2026-07-09).
   The motion concept IS the design now - one coherent system, TP brand fonts,
   its own minimal nav. No Webflow CSS on this page. */

/* ---- brand fonts (self-hosted, same files the rest of the site uses) ---- */
@font-face{font-family:'Satoshi';src:url('/webflow/fonts/Satoshi-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Satoshi';src:url('/webflow/fonts/Satoshi-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Satoshi';src:url('/webflow/fonts/Satoshi-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Satoshi';src:url('/webflow/fonts/Satoshi-Black.woff2') format('woff2');font-weight:900;font-display:swap}
@font-face{font-family:'Zodiak';src:url('/webflow/fonts/Zodiak-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Zodiak';src:url('/webflow/fonts/Zodiak-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}

.tpx{--blue:#3D52FF;--ink:#0e0f14;--muted:#6f7284;--line:#e9eaf2;--bg:#ffffff;--soft:#f6f7fb;
  margin:0;background:var(--bg);color:var(--ink);
  /* clip, not hidden: an overflow-x:hidden ancestor disables position:sticky
     (the how-we-work photobox); clip prevents sideways scroll without
     creating a scroll container. */
  font-family:'Satoshi',-apple-system,BlinkMacSystemFont,sans-serif;line-height:1.5;
  overflow-x:hidden;overflow-x:clip}

/* ---- fixed minimal nav ---- */
.tpx-nav{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;
  justify-content:space-between;padding:7px 5vw;background:#ffffffdd;backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.tpx-nav .tpx-logo img{height:18px;display:block}
.tpx-burger{width:44px;height:44px;border:0;background:none;cursor:pointer;display:flex;
  flex-direction:column;justify-content:center;gap:7px;padding:8px}
.tpx-burger span{display:block;height:2px;background:var(--ink);transition:transform .3s,opacity .3s}
.tpx-menu{position:fixed;inset:0;z-index:19;background:var(--bg);display:flex;flex-direction:column;
  justify-content:center;padding:0 8vw;gap:6px;opacity:0;pointer-events:none;transition:opacity .35s}
body.tpx-menu-open .tpx-menu{opacity:1;pointer-events:auto}
body.tpx-menu-open .tpx-burger span:nth-child(1){transform:translateY(9px) rotate(45deg)}
body.tpx-menu-open .tpx-burger span:nth-child(2){opacity:0}
body.tpx-menu-open .tpx-burger span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
body.tpx-menu-open{overflow:hidden}
.tpx-menu a{font-size:clamp(2.2rem,6vw,4rem);font-weight:900;letter-spacing:-.03em;color:var(--ink);
  text-decoration:none;line-height:1.2;width:fit-content}
.tpx-menu a:hover{color:var(--blue)}
.tpx-menu .tpx-menu-note{margin-top:28px;color:var(--muted);font-size:.95rem}

/* ---- fixed spine layer ---- */
#tpx-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#tpx-spine{position:absolute;inset:0;width:100%;height:100%}
#tpx-spine .tpx-rail{fill:none;stroke:var(--line);stroke-width:3}
#tpx-spine .tpx-draw{fill:none;stroke:var(--blue);stroke-width:4;stroke-linecap:round;
  filter:drop-shadow(0 2px 10px rgba(61,82,255,.35))}
#tpx-spine .tpx-tipdot{fill:var(--ink);opacity:.15;transition:fill .45s ease,opacity .45s ease}
#tpx-spine .tpx-tipdot.tpx-lit{fill:var(--blue);opacity:1}
#tpx-traveler{position:absolute;width:18px;height:18px;border-radius:50%;background:var(--blue);
  box-shadow:0 0 0 8px rgba(61,82,255,.15),0 0 24px rgba(61,82,255,.5);top:0;left:0;will-change:transform}

/* ---- stations ---- */
.tpx main{position:relative;z-index:1}
.tpx-station{min-height:104svh;display:flex;flex-direction:column;justify-content:center;
  padding:12vh 7vw 10vh;max-width:1280px;box-sizing:border-box}
.tpx-station.tpx-right{margin-left:auto}
.tpx-station.tpx-center{align-items:center;text-align:center;margin:0 auto}
.tpx-chip{display:inline-block;align-self:flex-start;font-size:.7rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--blue);background:#eef0ff;border:1px solid #dfe3ff;
  border-radius:999px;padding:4px 12px;margin-bottom:16px}
.tpx-center .tpx-chip{align-self:center}
.tpx h1{font-size:clamp(2.6rem,5.6vw,4.6rem);font-weight:900;letter-spacing:-.03em;line-height:1.02;margin:0 0 14px}
.tpx h2{font-size:clamp(1.8rem,3.6vw,2.9rem);font-weight:900;letter-spacing:-.02em;line-height:1.08;margin:0 0 12px}
.tpx-accent{color:var(--blue)}
.tpx-quote{font-family:'Zodiak',Georgia,serif;font-style:italic;font-weight:400;
  font-size:clamp(1.15rem,2.1vw,1.6rem);color:var(--ink);margin:0 0 10px}
.tpx-lead{color:var(--muted);font-size:1.08rem;max-width:580px;margin:0}
.tpx-flow{will-change:transform,opacity}
.tpx-down{display:inline-flex;align-items:center;gap:12px;margin-top:34px;color:var(--ink);font-weight:700}
.tpx-down .tpx-down-dot{width:44px;height:44px;border-radius:50%;background:var(--blue);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:1.2rem}

/* clients line */
.tpx-linewrap{position:relative;width:min(1500px,96vw);margin:4vh auto 0}
.tpx-stage{position:relative;width:100%;aspect-ratio:1100/430;min-height:240px}
.tpx-stage svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tpx-stage .tpx-path{fill:none;stroke:var(--line);stroke-width:3;stroke-linecap:round}
.tpx-stage .tpx-hot{fill:none;stroke:var(--blue);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:70 1400;animation:tpx-hot 16s linear infinite;opacity:.5}
@keyframes tpx-hot{from{stroke-dashoffset:0}to{stroke-dashoffset:-1470}}
.tpx-stage .tpx-dot{fill:var(--ink)}
.tpx-tile{position:absolute;top:0;left:0;width:140px;height:74px;background:transparent;
  display:flex;align-items:center;justify-content:center;
  offset-rotate:0deg;opacity:0;animation:tpx-ride 18s linear infinite;will-change:offset-distance,opacity}
.tpx-tile img{max-width:86%;max-height:72%;object-fit:contain;
  filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 2px #fff)}
@keyframes tpx-ride{
  0%{offset-distance:0%;opacity:0;transform:scale(.92)}
  7%{opacity:1;transform:scale(1)}
  46%{offset-distance:46%}
  88%{opacity:1}
  100%{offset-distance:100%;opacity:0;transform:scale(1.04)}
}

/* testimonials (page cards + home station) */
.tpx-testis{display:grid;gap:26px;margin-top:8px;max-width:860px}
.tpx-testi{margin:0;background:#fff;border:1px solid var(--line);border-radius:20px;padding:34px 38px;
  box-shadow:0 18px 44px rgba(14,15,20,.07)}
.tpx-testi-logo{height:44px;width:auto;max-width:180px;object-fit:contain;margin-bottom:18px;display:block}
.tpx-testi-logo-foot{height:30px;margin:16px auto 0}
.tpx-testi .tpx-quote{font-family:'Satoshi',sans-serif;font-style:normal;font-weight:400;
  color:var(--ink);font-size:clamp(1.02rem,1.5vw,1.18rem);line-height:1.6;margin:0}
.tpx-testi-face{width:96px;height:96px;border-radius:50%;object-fit:cover;display:block;margin:0 auto 12px;
  border:3px solid #fff;box-shadow:0 10px 26px rgba(14,15,20,.18)}
.tpx-testi figcaption{display:flex;flex-direction:column;gap:2px;text-align:center;margin-bottom:14px}
.tpx-testi figcaption b{font-weight:700}
.tpx-testi figcaption span{color:var(--muted);font-size:.95rem}
.tpx-carousel{overflow:hidden;width:min(1100px,94vw);margin-top:8px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.tpx-car-track{display:flex;gap:26px;width:max-content;animation:tpx-car 55s linear infinite}
.tpx-carousel:hover .tpx-car-track{animation-play-state:paused}
@keyframes tpx-car{to{transform:translateX(calc(-50% - 13px))}}
.tpx-car-track .tpx-testi{width:min(480px,82vw);flex:0 0 auto;padding:28px 30px}
.tpx-car-track .tpx-testi .tpx-quote{font-size:1.02rem}
@media (prefers-reduced-motion:reduce){.tpx-car-track{animation:none}}

/* what we do */
.tpx-split{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.tpx-atmo{border-radius:22px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 24px 60px rgba(14,15,20,.16);aspect-ratio:4/3;background:#fff}
.tpx-atmo img{width:100%;height:100%;object-fit:cover;display:block}
.tpx-cards{display:grid;grid-template-columns:1fr;gap:18px;margin-top:30px;max-width:640px}
.tpx-ico{flex:0 0 auto;width:46px;height:46px;border-radius:13px;background:var(--soft);
  display:flex;align-items:center;justify-content:center;color:var(--blue)}
.tpx-ico svg{width:24px;height:24px}
.tpx-card{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 24px;
  box-shadow:0 8px 24px rgba(14,15,20,.05)}
.tpx-card h3{margin:0 0 5px;font-size:1.15rem;font-weight:700}
.tpx-card p{margin:0;color:var(--muted);font-size:.98rem}

/* how we work */
.tpx-hww{display:grid;grid-template-columns:.92fr 1.08fr;gap:56px;margin-top:4vh}
.tpx-photobox{position:sticky;top:16vh;aspect-ratio:4/3;border-radius:22px;overflow:hidden;
  border:1px solid var(--line);box-shadow:0 24px 60px rgba(14,15,20,.16);background:#000}
.tpx-photobox img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity .55s ease;transform:scale(1.03)}
.tpx-photobox img.tpx-active{opacity:1;transform:scale(1)}
.tpx-photobox .tpx-cap{position:absolute;left:14px;bottom:12px;z-index:2;background:#ffffffe6;
  border-radius:999px;padding:5px 14px;font-size:.78rem;font-weight:700;color:var(--ink)}
.tpx-step{min-height:52vh;display:flex;flex-direction:column;justify-content:center;opacity:.35;transition:opacity .4s}
.tpx-step.tpx-on{opacity:1}
.tpx-step .tpx-num{font-size:2.6rem;font-weight:900;letter-spacing:-.03em;color:var(--blue);line-height:1}
.tpx-step h3{margin:6px 0 8px;font-size:1.35rem;font-weight:700}
.tpx-step p{margin:0;max-width:460px;color:var(--muted)}

/* stats */
.tpx-stats{display:flex;gap:22px;flex-wrap:wrap;margin-top:36px}
.tpx-stat{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px 30px;
  min-width:180px;box-shadow:0 8px 24px rgba(14,15,20,.07)}
.tpx-stat .tpx-n{font-size:2.4rem;font-weight:900;letter-spacing:-.03em;color:var(--blue)}
.tpx-stat .tpx-l{color:var(--muted);font-size:.9rem;margin-top:2px}

/* case studies */
.tpx-cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-top:34px;width:100%}
.tpx-case{display:block;background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;
  text-decoration:none;color:var(--ink);box-shadow:0 8px 24px rgba(14,15,20,.05);
  transition:transform .25s,box-shadow .25s,border-color .25s;
  position:relative;overflow:hidden;isolation:isolate}
/* each card carries its case's hero, faded behind the text (--tpx-case-img) */
.tpx-case::before{content:"";position:absolute;inset:0;z-index:-1;
  background-image:linear-gradient(rgba(255,255,255,.82),rgba(255,255,255,.94)),var(--tpx-case-img,none);
  background-size:cover;background-position:center;transition:transform .5s ease,opacity .3s}
.tpx-case:hover{transform:translate(4px,-5px);box-shadow:0 18px 44px rgba(14,15,20,.14);
  border-color:var(--blue)}
.tpx-case:hover::before{transform:scale(1.05)}
.tpx-case:hover .tpx-read span{transform:translateX(4px)}
.tpx-case .tpx-read span{display:inline-block;transition:transform .25s}
.tpx-case h3{margin:0 0 6px;font-size:1.06rem;font-weight:700}
.tpx-case p{margin:0 0 14px;color:var(--muted);font-size:.9rem}
.tpx-case .tpx-read{color:var(--blue);font-weight:700;font-size:.9rem}
.tpx-all{display:inline-block;margin-top:26px;font-family:'Zodiak',Georgia,serif;font-style:italic;
  font-size:1.1rem;color:var(--ink);text-decoration:underline}

/* team */
.tpx-avatars{display:flex;margin:26px 0 6px}
.tpx-avatars img{width:68px;height:68px;border-radius:50%;object-fit:cover;border:3px solid #fff;
  box-shadow:0 6px 18px rgba(14,15,20,.18);margin-left:-16px;background:#fff}
.tpx-avatars img:first-child{margin-left:0}

/* buttons */
.tpx-cta{display:inline-flex;align-self:flex-start;align-items:center;gap:10px;margin-top:30px;
  background:var(--blue);color:#fff;font-weight:700;border-radius:999px;padding:15px 30px;
  text-decoration:none;font-size:1.05rem;box-shadow:0 14px 34px rgba(61,82,255,.35);cursor:pointer;border:0}
.tpx-center .tpx-cta{align-self:center}
.tpx-cta span{display:inline-block;transform:rotate(-45deg);font-size:1.2rem}
/* "Your Turn" closes at hero scale (Oriel 2026-07-15) */
#tpx-cta h2{font-size:clamp(3rem,6.5vw,5.6rem);letter-spacing:-.03em}
#tpx-cta .tpx-lead{font-size:1.18rem;max-width:560px}
#tpx-cta .tpx-cta{font-size:1.2rem;padding:16px 32px;margin-top:38px;gap:12px}

/* footer strip */
.tpx-foot{position:relative;z-index:1;border-top:1px solid var(--line);padding:26px 7vw;display:flex;
  flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between;color:var(--muted);font-size:.85rem}
.tpx-foot a{color:var(--muted);text-decoration:none}
.tpx-foot a:hover{color:var(--ink)}

/* throw-left exit */
body.tpx-throw .tpx main,body.tpx-throw #tpx-bg{transition:transform .55s cubic-bezier(.3,.75,.25,1),opacity .5s ease;
  transform:translateX(-40vw);opacity:0}

/* ---- sub-pages (team, cases, contact, legal): the calm destination ---- */
.tpx-sub .tpx-arrival{transition:transform .6s cubic-bezier(.25,.8,.25,1),opacity .5s ease}
.tpx-sub .tpx-arrival.tpx-arriving{transform:translateX(58vw);opacity:0;transition:none}
.tpx-subhero{padding:20vh 7vw 6vh;max-width:1100px}
.tpx-subhero h1{margin-bottom:10px}
.tpx-subhero .tpx-quote{margin-bottom:14px}
.tpx-rise{opacity:0;transform:translate(-34px,44px);transition:transform .8s cubic-bezier(.16,.84,.28,1),opacity .6s ease}
.tpx-rise.tpx-in{opacity:1;transform:translate(0,0)}
/* first screen enters at PAINT, not at JS boot: sub-pages used to sit blank-white
   for ~0.5s per navigation while the IO engine woke up (Omer QA: "jump lag").
   Pure CSS animation, backwards fill; the later JS .tpx-in is a no-op on these. */
.tpx-subhero .tpx-quote{font-family:'Satoshi',sans-serif;font-style:normal;font-weight:500;color:var(--muted)}
.tpx-subhero .tpx-rise,.tpx-article>.tpx-rise{opacity:1;transform:none;
  animation:tpxRiseIn .55s cubic-bezier(.16,.84,.28,1) backwards}
.tpx-subhero .tpx-rise:nth-child(2),.tpx-article>.tpx-rise:nth-child(2){animation-delay:.09s}
.tpx-subhero .tpx-rise:nth-child(3),.tpx-article>.tpx-rise:nth-child(3){animation-delay:.18s}
.tpx-subhero .tpx-rise:nth-child(4),.tpx-article>.tpx-rise:nth-child(4){animation-delay:.27s}
@keyframes tpxRiseIn{from{opacity:0;transform:translate(-34px,44px)}to{opacity:1;transform:none}}
.tpx-members{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:22px;
  padding:4vh 7vw 8vh;max-width:1280px;box-sizing:border-box}
.tpx-member{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;
  box-shadow:0 10px 30px rgba(14,15,20,.08);display:flex;flex-direction:column}
.tpx-member img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;background:var(--soft)}
/* info fills the card so the LinkedIn icon can pin to the bottom-right of every
   card identically, regardless of name/role length (cards equalize height per row). */
.tpx-member-info{padding:12px 16px;flex:1;display:flex;flex-direction:column}
.tpx-member-info b{display:block;font-size:.98rem}
.tpx-member-info span{color:var(--muted);font-size:.83rem}
.tpx-li{align-self:flex-end;margin-top:auto;padding-top:10px;display:inline-flex;
  color:var(--muted);transition:color .2s;line-height:0}
.tpx-li:hover{color:#0a66c2}
.tpx-li svg{width:20px;height:20px;fill:currentColor;display:block}
.tpx-substrip{padding:10vh 7vw 12vh;max-width:1100px;display:flex;flex-direction:column;align-items:flex-start}
@media (prefers-reduced-motion:reduce){
  .tpx-rise{opacity:1 !important;transform:none !important;transition:none;animation:none !important}
}

/* ---- article pages (case studies, legal) ---- */
.tpx-article{padding:18vh 7vw 6vh;max-width:820px;box-sizing:border-box}
.tpx-article h1{margin-bottom:22px}
.tpx-article-hero{border-radius:22px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 20px 50px rgba(14,15,20,.14);margin:8px 0 30px}
.tpx-article-hero img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.tpx-article-body h2,.tpx-article-body h3{font-size:1.35rem;font-weight:700;letter-spacing:-.01em;
  margin:34px 0 10px;line-height:1.2}
.tpx-article-body p{color:#3c3f4d;font-size:1.04rem;line-height:1.75;margin:0 0 16px}
.tpx-article-body ul{color:#3c3f4d;font-size:1.02rem;line-height:1.7;margin:0 0 16px;padding-left:22px}
.tpx-article-body li{margin-bottom:6px}
.tpx-article-body img{max-width:100%;border-radius:14px}
.tpx-article-body a{color:var(--blue)}
.tpx-article .tpx-all{margin-top:30px}
/* legal articles: same shell, denser text, Hebrew block keeps its own direction.
   The lifted content keeps its ORIGINAL markup/classes (verbatim, under legal
   review) - these rules style those carried-over class names. */
.tpx-legal [dir="rtl"]{text-align:right}
.tpx-legal .tp-legal-title,.tpx-legal .heading-style-h2{font-size:clamp(1.9rem,3.6vw,2.9rem);
  font-weight:900;letter-spacing:-.02em;line-height:1.06;margin:0 0 8px}
.tpx-legal .tp-legal-lead{font-family:'Zodiak',Georgia,serif;font-style:italic;
  color:var(--muted);font-size:1.1rem;margin-bottom:26px}
.tpx-legal .tp-legal-body{color:#3c3f4d;font-size:1rem;line-height:1.78}
.tpx-legal .tp-legal-body a,.tpx-legal a{color:var(--blue)}
.tpx-legal .heading-style-h4{font-size:1.22rem;font-weight:700;margin-top:2.4rem;line-height:1.25}
.tpx-legal .text-size-medium{color:#3c3f4d;font-size:1rem;line-height:1.75}

/* ---- cases index ---- */
.tpx-caselist{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;
  padding:2vh 7vw 6vh;max-width:1280px;box-sizing:border-box}

/* ---- contact form ---- */
.tpx-formwrap{padding:2vh 7vw 10vh;max-width:1100px;box-sizing:border-box}
.tpx-formbox{background:#fff;border:1px solid var(--line);border-radius:22px;padding:34px;
  box-shadow:0 18px 44px rgba(14,15,20,.08)}
.tpx-formgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;margin-bottom:26px}
.tpx-field{display:flex;flex-direction:column;gap:6px}
.tpx-field-wide{grid-column:1 / -1}
.tpx-field span{font-size:.82rem;font-weight:700;letter-spacing:.02em;color:var(--ink)}
.tpx-field input,.tpx-field select,.tpx-field textarea{
  font-family:inherit;font-size:1rem;color:var(--ink);background:var(--soft);
  border:1px solid var(--line);border-radius:12px;padding:12px 14px;outline:none;
  transition:border-color .2s,box-shadow .2s;box-sizing:border-box;width:100%}
.tpx-field textarea{resize:vertical;min-height:120px}
.tpx-field input:focus,.tpx-field select:focus,.tpx-field textarea:focus{
  border-color:var(--blue);box-shadow:0 0 0 3px rgba(61,82,255,.15)}
.tpx-field input:invalid:not(:placeholder-shown){border-color:#e0362c}
.tpx-form-done,.tpx-form-fail{display:none;margin-top:18px;border-radius:14px;padding:16px 20px;font-size:1rem}
.tpx-form-done{background:#eaf7ef;border:1px solid #cdeadd;color:#256e46}
.tpx-form-fail{background:#fdeceb;border:1px solid #f5c9c5;color:#a3271e}

/* ---- mobile ---- */
@media (max-width:900px){
  .tpx-split,.tpx-hww{grid-template-columns:1fr;display:block}
  .tpx-atmo{margin-top:26px}
  .tpx-photobox{display:none}
  .tpx-step{min-height:0;padding:5vh 0;opacity:.5}
  .tpx-stepimg{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:18px;display:block;
    border:1px solid var(--line);box-shadow:0 14px 34px rgba(14,15,20,.14);margin:0 0 14px}
  .tpx-stage{min-height:170px}
  .tpx-tile{width:240px;height:127px}
  .tpx-station{min-height:auto;padding:9vh 6vw 7vh}
  .tpx-linewrap{margin-top:2vh}
  .tpx-formgrid{grid-template-columns:1fr}
  .tpx-formbox{padding:22px}
  .tpx-subhero{padding-top:16vh}
}
@media (prefers-reduced-motion:reduce){
  .tpx-tile,.tpx-stage .tpx-hot{animation:none !important}
  .tpx-tile{opacity:1;offset-distance:50%}
  .tpx-flow{transform:none !important;opacity:1 !important}
}

/* ===================================================================
   V1 "Follow the line" hero + CTA (Omer + Oriel pick, 2026-07-15).
   The copy is split at sentence boundaries into standalone indexed
   blocks that live in the white pockets the fixed V spine creates -
   never touching the line.

   Registration: tp-next.js draws the spine with preserveAspectRatio=
   "xMidYMid slice" over a 1440x900 viewBox (portrait 390x844 <=900px).
   That maps design point (X,Y) to screen at scale s=max(vw/VBW,vh/VBH),
   centered. --tpxu (the scale) + --tpx-ox/--tpx-oy (the centering
   offsets) reproduce that mapping in CSS per aspect-ratio regime, so a
   .tpx-pin block anchored at --px/--py in DESIGN coordinates tracks
   the line at every viewport size, exactly. Widths (--pw) map through
   the same factor so pocket blocks scale with their pockets.
   =================================================================== */
.tpx{--tpxu:calc(100vw/1440);--tpx-ox:0px;--tpx-oy:calc(50vh - 450*var(--tpxu));--tpx-foot-h:47px}
@media (max-aspect-ratio:8/5){
  .tpx{--tpxu:calc(100vh/900);--tpx-ox:calc(50vw - 720*var(--tpxu));--tpx-oy:0px}
}
@media (max-width:900px){
  .tpx{--tpxu:calc(100vh/844);--tpx-ox:calc(50vw - 195*var(--tpxu));--tpx-oy:0px}
}
@media (max-width:900px) and (min-aspect-ratio:195/422){
  .tpx{--tpxu:calc(100vw/390);--tpx-ox:0px;--tpx-oy:calc(50vh - 422*var(--tpxu))}
}

/* the two pocket stations drop the flex/padding shell: children are pinned */
#tpx-hero,#tpx-cta{position:relative;display:block;max-width:none;width:100%;padding:0}
#tpx-hero{min-height:0;height:104svh}
/* CTA height = viewport minus footer, so at FULL scroll the station top sits
   exactly at the viewport top and the pins register with the drawn line +
   lit tip dot (the last station otherwise rests 4svh+footer above the frame) */
#tpx-cta{min-height:0;height:calc(100svh - var(--tpx-foot-h))}

.tpx-pin{position:absolute;margin:0;
  left:calc(var(--tpx-ox) + var(--px)*var(--tpxu));
  /* clamped: whatever the window shape, a pin can never slide under the
     fixed nav (74px) or past the fold (per-block reserve --pb; the fold
     failure = wide-short windows driving --tpx-oy negative, Omer 07-15) */
  top:clamp(74px, calc(var(--tpx-oy) + var(--py)*var(--tpxu)), calc(100svh - var(--pb,180px)))}
.tpx-pocket{width:calc(var(--pw)*var(--tpxu));box-sizing:border-box;
  /* readability plate: lets a block sit near (or on) the line at odd window
     shapes without the stroke cutting through the words */
  background:rgba(255,255,255,.92);border-radius:14px;padding:14px 16px;
  backdrop-filter:blur(2px)}

.tpx-pocket .tpx-quote{font-size:clamp(1.05rem,1.5vw,1.35rem);line-height:1.5;margin:0}
.tpx-pocket .tpx-lead,#tpx-cta .tpx-pocket .tpx-lead{font-size:1.05rem;line-height:1.55;max-width:none}

/* hero pins (design coords on the 1440x900 spine grid; line-y samples:
   x0:314 x294:458 x447:566 valley~(620,700) dot(640,742) x898:514 x1074:383) */
.tpx-hero-h1{--px:86;--py:148;left:max(calc(var(--tpx-ox) + var(--px)*var(--tpxu)),24px)}
.tpx-hero-down{--px:86;--py:267;margin-top:0;left:max(calc(var(--tpx-ox) + var(--px)*var(--tpxu)),24px)}
.tpx-hero-q{--px:120;--py:600;--pw:300;--pb:200px}
.tpx-hero-s1{--px:470;--py:796;--pw:340;--pb:120px;text-align:center}
.tpx-hero-s2{--px:1010;--py:535;--pw:360;--pb:190px}
/* the under-dot block rests in the engine's enter-fade zone (q~0.08): the
   moment the rest-at-top gate releases (scrollY=80) it would pop to ~46%
   opacity. Pin it static; the other blocks rest above the zone and keep
   the fly grammar. */
.tpx-hero-s1{transform:none !important;opacity:1 !important}

/* CTA pins */
.tpx-cta-head{--px:240;--py:90;width:calc(960*var(--tpxu));text-align:center}
.tpx-cta-head .tpx-chip{margin-bottom:18px}
.tpx-cta-head h2{margin:0}
.tpx-cta-s1{--px:120;--py:600;--pw:300;--pb:230px}
.tpx-cta-s2{--px:1010;--py:535;--pw:360;--pb:220px}
/* plumb beneath the lit dot; translateX is safe here because the button
   wrapper is NOT a .tpx-flow (the engine overwrites flow transforms) */
.tpx-cta-btn{--px:640;--py:788;transform:translateX(-50%)}
#tpx-cta .tpx-pin .tpx-cta{margin-top:0}
/* the pill also caps against the viewport bottom: while the cookie consent
   bar is up (html.tp-consent-open, tp-a11y.js) it reserves the bar's height
   and briefly leaves plumb rather than sink under the bar; post-consent the
   cap is slack and the mapped anchor wins (gate fix 2026-07-15) */
.tpx{--tpx-consent-h:0px}
html.tp-consent-open .tpx{--tpx-consent-h:60px}
.tpx-cta-btn{top:min(calc(var(--tpx-oy) + var(--py)*var(--tpxu)),calc(100svh - 64px - max(var(--tpx-foot-h), var(--tpx-consent-h))))}

/* wide-aspect regime (>=1.65, e.g. 16:9): the slice mapping pushes the dot
   toward the viewport bottom, so the under-dot anchors switch from the raw
   design-grid y to a fixed 14px gap below the dot's mapped bottom (757) -
   at 1920x1080 the raw mapping sank the pill into the consent bar/footer */
@media (min-width:901px) and (min-aspect-ratio:33/20){
  /* wide-short: no room between dot and footer - the pill moves under the
     heading instead (Omer's call, mirrors the mobile arrangement) */
  .tpx-cta-btn{top:330px}
  .tpx-hero-s1{top:clamp(74px, calc(var(--tpx-oy) + 757*var(--tpxu) + 14px), calc(100svh - var(--pb,180px)))}
}
/* right-pocket blocks: never spill past the viewport on narrow desktop ratios */
.tpx-hero-s2,.tpx-cta-s2{left:min(calc(var(--tpx-ox) + var(--px)*var(--tpxu)),calc(100vw - var(--pw)*var(--tpxu) - 24px))}

/* compact footer on the home page: the CTA's final frame includes it, so it
   gets a FIXED height equal to --tpx-foot-h (station + footer = exactly one
   viewport at full scroll). Fixed, not content-driven: the wrapped height
   used to change when Satoshi swapped in, shifting the whole registration. */
.tpx:has(#tpx-cta) .tpx-foot{height:var(--tpx-foot-h);box-sizing:border-box;
  padding:10px 7vw;font-size:.8rem;align-items:center;align-content:center}

/* portrait (<=900px): NORMAL FLOW, no pins. Real phones resize the viewport
   (URL bar, dvh) and pinned design-grid math can always be broken by some
   browser chrome combination (Omer's iPhone screenshot 2026-07-16: pill over
   heading, texts over footer). Stacked flow cannot overlap, the V line stays
   as background, plates keep text readable. Desktop keeps the pinned design. */
@media (max-width:900px){
  .tpx{--tpx-foot-h:72px}
  html.tp-consent-open .tpx{--tpx-consent-h:115px}
  .tpx-pocket .tpx-lead,#tpx-cta .tpx-pocket .tpx-lead{font-size:.95rem;line-height:1.55}
  #tpx-hero,#tpx-cta{position:relative;display:flex;flex-direction:column;align-items:flex-start;
    justify-content:flex-start;height:auto;min-height:100svh;max-width:none;
    padding:calc(58px + 7svh) 6vw 6svh;gap:16px}
  #tpx-hero .tpx-pin,#tpx-cta .tpx-pin{position:static;left:auto;top:auto;
    transform:none !important;opacity:1 !important}
  .tpx-pocket{width:auto;max-width:560px}
  .tpx-hero-down{margin-top:2px}
  .tpx-hero-q{margin-top:4svh}
  .tpx-cta-head{width:auto;text-align:left}
  .tpx-cta-head .tpx-chip{margin-bottom:14px}
  .tpx-cta-btn{order:1;margin-top:2px}
  .tpx-cta-s1{order:2;margin-top:4svh}
  .tpx-cta-s2{order:3}
  #tpx-cta{min-height:calc(100svh - var(--tpx-foot-h))}
}