/* ============================================================
   YTS-HUB v2 — design system
   Style DNA: 5ive.co.il — light base, full-screen color-block
   sections, huge condensed uppercase type, echo marquees,
   autoplay looping videos, black hero + black contact section.
   Vanilla CSS, no framework, no build step.
   ============================================================ */

:root{
  /* surfaces */
  --ink:      #101113;
  --ink-soft: #1b1c20;
  --paper:    #ffffff;
  --paper-2:  #f7f7f8;
  --line:     rgba(16,17,19,.12);
  --line-inv: rgba(255,255,255,.16);

  /* text */
  --t-ink:  #101113;
  --t-mid:  #4c4e55;
  --t-inv:  #ffffff;
  --t-inv2: rgba(255,255,255,.72);

  /* product accents (one vivid block per tool — the 5ive move) */
  --indigo: #6E5DF6;   /* Terminal Manager  */
  --teal:   #0FB89B;   /* Packet Generator  */
  --amber:  #F7AB00;   /* Serial Generator  */
  --cyan:   #40D9EE;   /* YTS brand mark    */

  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body:    "Barlow", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", "Roboto Mono", Consolas, monospace;

  --wrap: 1240px;
  --nav-h: 72px;

  --ease-out:   cubic-bezier(.16,1,.3,1);
  --ease-swift: cubic-bezier(.65,.05,0,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html:focus-within{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  font-size:17px;line-height:1.6;
  color:var(--t-ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
/* color:inherit matters — without it buttons keep the UA's black `buttontext`, so the burger
   (drawn with currentColor) stays black even when .nav.inv sets white on dark sections. */
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
::selection{background:var(--ink);color:#fff}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(20px,4vw,48px)}

/* ============ TYPOGRAPHY ============ */
.display{
  font-family:var(--font-display);
  font-weight:700;text-transform:uppercase;
  font-size:clamp(3.4rem,11vw,10.5rem);
  line-height:.92;letter-spacing:-.005em;
}
.display-md{
  font-family:var(--font-display);
  font-weight:700;text-transform:uppercase;
  font-size:clamp(2.4rem,6.5vw,5.6rem);
  line-height:.95;
}
.display-sm{
  font-family:var(--font-display);
  font-weight:600;text-transform:uppercase;
  font-size:clamp(1.6rem,3.4vw,2.6rem);
  line-height:1.02;
}
.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.22em;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.eyebrow .sep{opacity:.45}
.lead{font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.55;max-width:38em}
.small{font-size:.85rem}

/* split-headline entrance */
[data-split] .w{display:inline-block;overflow:hidden;vertical-align:top}
[data-split] .w>span{display:inline-block;transform:translateY(115%);transition:transform 1s var(--ease-out)}
[data-split].in .w>span{transform:translateY(0)}
[data-split] .w:nth-child(2)>span{transition-delay:.06s}
[data-split] .w:nth-child(3)>span{transition-delay:.12s}
[data-split] .w:nth-child(4)>span{transition-delay:.18s}
[data-split] .w:nth-child(5)>span{transition-delay:.24s}
[data-split] .w:nth-child(6)>span{transition-delay:.3s}
[data-split] .w:nth-child(7)>span{transition-delay:.36s}
[data-split] .w:nth-child(8)>span{transition-delay:.42s}

/* scroll reveal */
.rv{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.1s}.rv-d2{transition-delay:.2s}.rv-d3{transition-delay:.3s}.rv-d4{transition-delay:.42s}

/* ============ PRELOADER ============ */
#loader{
  position:fixed;inset:0;z-index:1000;background:var(--ink);
  display:flex;align-items:center;justify-content:center;
  transition:transform .8s var(--ease-swift);
}
#loader.done{transform:translateY(-101%)}
#loader .ld{
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(2rem,6vw,4rem);color:#fff;display:flex;overflow:hidden;
}
/* stagger covers up to 12 characters — keep it ahead of the longest loader word, otherwise the
   extra letters all fire at once (or the word gets truncated to fit, which is worse) */
#loader .ld span{display:inline-block;transform:translateY(110%);animation:ldup .7s var(--ease-out) forwards}
#loader .ld span:nth-child(2){animation-delay:.05s}
#loader .ld span:nth-child(3){animation-delay:.1s}
#loader .ld span:nth-child(4){animation-delay:.15s}
#loader .ld span:nth-child(5){animation-delay:.2s}
#loader .ld span:nth-child(6){animation-delay:.25s}
#loader .ld span:nth-child(7){animation-delay:.3s}
#loader .ld span:nth-child(8){animation-delay:.35s}
#loader .ld span:nth-child(9){animation-delay:.4s}
#loader .ld span:nth-child(10){animation-delay:.45s}
#loader .ld span:nth-child(11){animation-delay:.5s}
#loader .ld span:nth-child(12){animation-delay:.55s}
#loader .ld em{font-style:normal;color:var(--cyan)}
@keyframes ldup{to{transform:translateY(0)}}

/* top progress bar */
#progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--ink);z-index:900;transition:width .1s linear}
.on-dark #progress{background:var(--cyan)}

/* ============ NAV ============ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:800;height:var(--nav-h);
  display:flex;align-items:center;
  transition:transform .45s var(--ease-out),background .3s,border-color .3s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{background:rgba(255,255,255,.86);backdrop-filter:blur(14px);border-color:var(--line)}
.nav.hidden{transform:translateY(-100%)}
.nav-in{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(20px,4vw,48px);display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:flex;align-items:center;gap:11px}
.logo svg{width:34px;height:31px;flex:none}
.logo .lg-t{font-family:var(--font-display);font-weight:700;font-size:1.35rem;text-transform:uppercase;letter-spacing:.02em;line-height:1}
.logo .lg-t small{display:block;font-family:var(--font-mono);font-weight:400;font-size:.5rem;letter-spacing:.28em;opacity:.55;margin-top:3px}
.nav-links{display:flex;align-items:center;gap:clamp(16px,2.6vw,34px)}
.nav-links a{
  font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;
  position:relative;padding:6px 0;
}
.nav-links a:not(.nav-cta)::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--ease-out);
}
.nav-links a:not(.nav-cta):hover::after{transform:scaleX(1);transform-origin:left}
.nav-cta{
  border:1px solid currentColor;padding:10px 20px!important;border-radius:100px;
  transition:background .3s,color .3s;
}
/* nav colorway on dark sections */
.nav{color:var(--ink)}
.nav.inv{color:#fff}
.nav.inv.scrolled{background:rgba(16,17,19,.82);border-color:var(--line-inv)}
.nav-cta:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.nav.inv .nav-cta:hover{background:#fff;color:var(--ink);border-color:#fff}
.nav-burger{display:none;width:40px;height:40px;position:relative;z-index:60}
.nav-burger i,.nav-burger::before,.nav-burger::after{
  content:"";position:absolute;left:8px;right:8px;height:2px;background:currentColor;transition:.35s var(--ease-out);
}
.nav-burger::before{top:14px}.nav-burger i{top:19px}.nav-burger::after{top:24px}

@media(max-width:860px){
  .nav-burger{display:block}
  .nav-links{
    position:fixed;inset:0;background:var(--ink);color:#fff;
    flex-direction:column;justify-content:center;gap:8vh;
    clip-path:circle(0 at calc(100% - 40px) 36px);
    transition:clip-path .7s var(--ease-swift);
  }
  .nav-links a{font-size:1.4rem;font-family:var(--font-display);font-weight:600;letter-spacing:.06em}
  body.menu-open .nav-links{clip-path:circle(150% at calc(100% - 40px) 36px)}
  body.menu-open .nav-burger{color:#fff}
  body.menu-open .nav-burger::before{top:19px;transform:rotate(45deg)}
  body.menu-open .nav-burger i{opacity:0}
  body.menu-open .nav-burger::after{top:19px;transform:rotate(-45deg)}
  body.menu-open{overflow:hidden}
}

/* ============ SECTIONS / SNAP ============ */
section{position:relative}
.panel{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-block:calc(var(--nav-h) + 24px) 24px}
@media(min-width:1024px) and (prefers-reduced-motion:no-preference){
  html.snap{scroll-snap-type:y proximity}
  html.snap .panel{scroll-snap-align:start}
}

/* color blocks */
.block{color:#fff}
.block.indigo{background:var(--indigo)}
.block.teal{background:var(--teal)}
.block.amber{background:var(--amber);color:var(--ink)}
.block.dark{background:var(--ink)}
.block.light{background:var(--paper-2);color:var(--t-ink)}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--font-mono);font-size:.78rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.16em;
  padding:17px 34px;border-radius:100px;border:1px solid currentColor;
  position:relative;overflow:hidden;isolation:isolate;
  transition:color .35s var(--ease-out),border-color .35s;
  will-change:transform;
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:currentColor;transform:scaleY(0);transform-origin:bottom;
  transition:transform .45s var(--ease-swift);
}
.btn:hover::before{transform:scaleY(1)}
.btn span,.btn i{position:relative;transition:color .35s}
.btn:hover span,.btn:hover i{color:var(--btn-hover-ink,#fff)}
/* the hover fill is currentColor — the label must flip to a contrasting ink:
   white buttons (dark/colored sections) → ink label; ink buttons (light + on-ink) → white label.
   KEEP THIS LIST IN SYNC with the .btn-solid list below when adding a new dark section, or its
   buttons render white-on-white on hover. */
.hero .btn,.final .btn,.legal-hero .btn,.block.indigo .btn,.block.teal .btn,.block.dark .btn{--btn-hover-ink:var(--ink)}
.btn.on-ink{--btn-hover-ink:#fff}
.btn i{font-style:normal;transition:transform .35s var(--ease-out),color .35s}
.btn:hover i{transform:translateX(5px)}
.btn-solid{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-solid::before{background:#fff}
.btn-solid:hover{border-color:var(--ink)}
.btn-solid:hover span,.btn-solid:hover i{color:var(--ink)}
/* On dark sections the default ink-on-ink solid button would be invisible — invert it to white. */
.block.dark .btn-solid,.on-dark .btn-solid,.hero .btn-solid,.final .btn-solid,.legal-hero .btn-solid{background:#fff;border-color:#fff;color:var(--ink)}
.block.dark .btn-solid::before,.on-dark .btn-solid::before,.hero .btn-solid::before,.final .btn-solid::before,.legal-hero .btn-solid::before{background:var(--cyan)}
.block.dark .btn-solid:hover span,.on-dark .btn-solid:hover span,.hero .btn-solid:hover span,.final .btn-solid:hover span,.legal-hero .btn-solid:hover span,
.block.dark .btn-solid:hover i,.on-dark .btn-solid:hover i,.hero .btn-solid:hover i,.final .btn-solid:hover i,.legal-hero .btn-solid:hover i{color:var(--ink)}

/* ============ HERO (black) ============ */
/* padding-bottom reserves a clear zone for .hero-hint so the centred copy can't run into it */
.hero{background:var(--ink);color:#fff;min-height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding-bottom:clamp(104px,15vh,150px)}
.hero .wrap{position:relative;z-index:2}
.hero .grid-lines{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:110px 110px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 40%,#000 30%,transparent 100%);
}
.hero-counter{
  display:flex;align-items:flex-start;gap:clamp(10px,2vw,26px);
  font-family:var(--font-display);font-weight:700;line-height:.85;
  margin-bottom:clamp(28px,5vh,64px);
}
.hero-counter .digits{
  font-size:clamp(6rem,20vw,17rem);letter-spacing:-.02em;display:flex;
}
.hero-counter .digit{display:block;height:1em;overflow:hidden}
.hero-counter .digit .roll{display:flex;flex-direction:column;transform:translateY(0);transition:transform 2s var(--ease-swift)}
.hero-counter .digit .roll span{height:1em;display:block}
.hero-counter .unit{font-size:clamp(2.6rem,8vw,7rem);color:var(--cyan);align-self:flex-start;margin-top:.12em}
.hero-counter .stack{
  display:flex;flex-direction:column;font-size:clamp(1rem,2.6vw,2rem);
  letter-spacing:.1em;line-height:1.06;margin-top:.3em;color:rgba(255,255,255,.9);
}
/* rotating hero trio — a smaller cyan kicker above the (dominant) H1 */
.hero-rotator{
  position:relative;
  font-family:var(--font-display);font-weight:600;text-transform:uppercase;
  font-size:clamp(1.3rem,2.8vw,2.2rem);line-height:1.15;letter-spacing:.04em;
  color:var(--cyan);
  height:1.35em;margin-bottom:clamp(14px,2.4vh,24px);
}
.hero-rotator .rot-line{
  position:absolute;left:0;top:0;white-space:nowrap;
  opacity:0;transform:translateY(.4em);
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);
  will-change:opacity,transform;
}
.hero-rotator .rot-line.is-active{opacity:1;transform:translateY(0)}
.hero-rotator .rot-line.is-exit{opacity:0;transform:translateY(-.4em)}
@media(max-width:520px){.hero-rotator{font-size:clamp(1.05rem,5vw,1.5rem)}}

/* cyan accent woven into the hero headline */
.hero h1 .hl-cyan{color:var(--cyan)}

.hero-sub{max-width:44em;color:var(--t-inv2);font-size:clamp(1rem,1.5vw,1.25rem)}
.hero-hint{
  position:absolute;z-index:2;bottom:16px;left:50%;transform:translateX(-50%);
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.5);
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.hero-hint::after{content:"";width:1px;height:34px;background:linear-gradient(#fff,transparent);animation:drip 1.8s var(--ease-out) infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ============ ECHO MARQUEE ============ */
.echo{
  overflow:hidden;white-space:nowrap;pointer-events:none;user-select:none;
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(4rem,13vw,12rem);line-height:1;
}
.echo .track{display:inline-flex;gap:.6em;animation:echo-move 26s linear infinite;will-change:transform}
.echo b{font-weight:700}
.echo .ghost{color:transparent;-webkit-text-stroke:1.5px currentColor;opacity:.55}
.echo.faint{opacity:.22}
@keyframes echo-move{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.echo .track{animation:none}}

/* ============ PRODUCT PANEL (home overview blocks) ============ */
.prod-panel{overflow:hidden}
.prod-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(28px,5vw,72px);align-items:center;
}
@media(max-width:960px){.prod-grid{grid-template-columns:1fr}}
.prod-copy .eyebrow{margin-bottom:clamp(18px,3vh,30px)}
/* .display's 11vw keeps growing while this grid column is capped by the 1240px wrap, so the
   longest single word ("GENERATOR") outgrows its column and slides under the media card.
   Cap it to a size that always fits the column. */
.prod-copy h2{margin-bottom:clamp(16px,2.6vh,26px);font-size:clamp(2.4rem,9vw,7.2rem)}
.prod-copy p{max-width:34em;font-size:clamp(1rem,1.4vw,1.2rem);line-height:1.55}
.block .prod-copy p{color:rgba(255,255,255,.86)}
.block.amber .prod-copy p{color:rgba(16,17,19,.78)}
.prod-cta{margin-top:clamp(26px,4vh,40px);display:flex;gap:16px;flex-wrap:wrap}
.prod-index{
  position:absolute;top:calc(var(--nav-h) + 18px);right:clamp(20px,4vw,48px);
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.2em;opacity:.6;
}

/* media card — video with poster fallback.
   The clips/screenshots are of the real app, which already has its own window chrome, so the card
   adds NO frame of its own (no radius, border or panel background) — just a soft drop shadow to
   lift it off the colour block. */
.media-card{
  position:relative;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.35));
  transform:perspective(1200px) rotateY(0) rotateX(0);
  transition:transform .6s var(--ease-out);
}
/* The card adopts the media's OWN aspect ratio (--media-ratio, set from natural dimensions by
   site.js) so nothing is ever cropped and no letterbox bars appear. 16/10 is just the fallback. */
.media-card video{width:100%;height:auto;aspect-ratio:var(--media-ratio,16/10);object-fit:cover}
/* posters are real screenshots of varying shape (some portrait) — contain them so no UI gets
   cropped away. No background: any letterbox stays transparent rather than reading as a frame. */
.media-card img.poster{display:none;width:100%;height:auto;aspect-ratio:var(--media-ratio,16/10);object-fit:contain}
.media-card.no-video video{display:none}
.media-card.no-video img.poster{display:block}
.media-tilt:hover{transform:perspective(1200px) rotateY(-3deg) rotateX(2deg) scale(1.015)}

/* ============ STATS (5ive trio) ============ */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,4vw,60px);text-align:center}
@media(max-width:720px){.stats{grid-template-columns:1fr;gap:34px}}
.stat b{
  font-family:var(--font-display);font-weight:700;font-size:clamp(4rem,9vw,8rem);line-height:.9;display:block;
}
.stat b em{font-style:normal;color:var(--indigo)}
.stat:nth-child(2) b em{color:var(--teal)}
.stat:nth-child(3) b em{color:var(--amber)}
.stat span{font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.2em;color:var(--t-mid);display:block;margin-top:14px}

/* ============ CARDS ============ */
.cards{display:grid;gap:clamp(16px,2vw,28px)}
.cards.g2{grid-template-columns:repeat(2,1fr)}
.cards.g3{grid-template-columns:repeat(3,1fr)}
.cards.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.cards.g4{grid-template-columns:repeat(2,1fr)}.cards.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.cards.g2,.cards.g3,.cards.g4{grid-template-columns:1fr}}
.card{
  background:var(--paper);border:1px solid var(--line);border-radius:16px;
  padding:clamp(22px,2.6vw,34px);
  transition:transform .5s var(--ease-out),box-shadow .5s,border-color .3s;
}
.card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(16,17,19,.25);border-color:rgba(16,17,19,.3)}
.card h4{font-family:var(--font-display);font-weight:600;text-transform:uppercase;font-size:1.25rem;letter-spacing:.03em;margin:14px 0 8px}
.card p{font-size:.95rem;color:var(--t-mid)}
.card .ico{
  width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;background:var(--paper-2);border:1px solid var(--line);
}
.card.accent-top{border-top:3px solid var(--accent,var(--ink))}
/* protocol chips inside role cards */
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.chips .chip{
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 11px;border-radius:100px;border:1px solid var(--line);color:var(--t-mid);background:var(--paper-2);
}

/* ============ SECTION HEADS ============ */
.sec-head{margin-bottom:clamp(36px,6vh,64px)}
.sec-head .eyebrow{margin-bottom:20px;color:var(--t-mid)}
.sec-head h2{max-width:14em}
.sec-head p{margin-top:18px;color:var(--t-mid);max-width:42em}
.sec-head.center{text-align:center}
.sec-head.center .eyebrow{justify-content:center}
.sec-head.center h2,.sec-head.center p{margin-inline:auto}

/* ============ QUOTES ============ */
.quote{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:clamp(24px,3vw,36px)}
.quote .stars{color:var(--amber);letter-spacing:3px;margin-bottom:14px}
.quote p{font-size:1rem;line-height:1.6}
.quote .who{display:flex;align-items:center;gap:12px;margin-top:20px}
.quote .who .av{
  width:42px;height:42px;border-radius:50%;background:var(--ink);color:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:.72rem;
}
.quote .who b{display:block;font-size:.9rem}
.quote .who span{font-size:.78rem;color:var(--t-mid)}

/* ============ LEGAL PAGES (privacy / terms) ============ */
.legal-hero{
  background:var(--ink);color:#fff;position:relative;overflow:hidden;
  padding-block:calc(var(--nav-h) + clamp(56px,10vh,104px)) clamp(38px,6vh,72px);
}
.legal-hero .eyebrow{color:var(--t-inv2);margin-bottom:20px}
.legal-hero .legal-meta{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cyan);margin-top:20px;
}
.legal{max-width:820px;margin-inline:auto}
.legal .lead-in{font-size:clamp(1.02rem,1.5vw,1.2rem);color:var(--t-ink);margin-bottom:16px;line-height:1.6}
.legal h2{
  font-family:var(--font-display);font-weight:600;text-transform:uppercase;
  font-size:clamp(1.35rem,2.3vw,1.85rem);letter-spacing:.02em;line-height:1.15;
  margin:clamp(34px,5vh,52px) 0 14px;padding-top:clamp(18px,3vh,26px);border-top:1px solid var(--line);
}
.legal h2 .n{color:var(--indigo);margin-right:.5em}
.legal h2:first-of-type{margin-top:clamp(8px,1.5vh,16px)}
.legal p{color:var(--t-mid);margin-bottom:14px;line-height:1.7}
.legal ul{margin:0 0 18px;padding:0}
.legal li{position:relative;padding-left:24px;color:var(--t-mid);margin-bottom:10px;line-height:1.6}
.legal li::before{
  content:"";position:absolute;left:2px;top:.62em;width:9px;height:2px;border-radius:2px;background:var(--indigo);
}
.legal li ul{margin:10px 0 0}
/* :not(.btn) so a .btn placed in an article (e.g. a blog-post CTA) keeps its own colour/border and
   doesn't inherit the indigo underline — otherwise .legal a out-specifies .btn-solid. */
.legal a:not(.btn){color:var(--indigo);text-decoration:underline;text-underline-offset:3px}
.legal a:not(.btn):hover{color:var(--ink)}
.legal strong{color:var(--t-ink);font-weight:600}
.legal-contact{
  margin-top:clamp(34px,5vh,52px);background:var(--paper-2);border:1px solid var(--line);
  border-radius:16px;padding:clamp(22px,2.6vw,32px);
}
.legal-contact h3{font-family:var(--font-display);font-weight:600;text-transform:uppercase;font-size:1.2rem;margin-bottom:14px}
.legal-contact .spec td:first-child{width:30%}

/* ============ BLOG ============
   Index cards reuse .card (whole card is the link); posts reuse the .legal article column, so the
   body typography, dark hero and dark-section button lists all stay in one place. */
.post-card{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.post-card:hover{text-decoration:none}
.pc-meta{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--t-mid);display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-bottom:12px}
.pc-meta .tag{color:var(--indigo)}
.pc-meta .sep{opacity:.4}
.post-card h4{margin-top:0;font-size:1.4rem;line-height:1.2}
.post-card p{flex:1}
.pc-more{margin-top:18px;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);display:inline-flex;align-items:center;gap:8px}
.pc-more i{font-style:normal;transition:transform .35s var(--ease-out)}
.post-card:hover .pc-more i{transform:translateX(5px)}
.post-back{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--t-inv2);text-decoration:none}
.post-back:hover{color:#fff}
/* comments — giscus mounts its own iframe into #giscus-thread (loader in site.js). Sits in a light
   block so the rhythm stays white(article) -> light(comments) -> dark(footer); with the section
   hidden (giscus unconfigured) it collapses to white(article) -> dark(footer), which is still a
   valid alternation, so no neighbour needs flipping either way. */
.giscus-mount{min-height:60px}

/* ============ MULTI-SCREEN ILLUSTRATION (terminal-manager page) ============
   The app UI rebuilt in CSS rather than shipped as a PNG: stays sharp at any DPI, weighs nothing,
   and the copy inside it can be edited. Sized for the ~1144px wrap (two ~540px "monitors"). */
.ms-scene{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,56px);align-items:end}
@media(max-width:820px){.ms-scene{grid-template-columns:1fr;gap:38px}.ms-arrow{display:none}}
.ms-bezel{
  background:#202127;border-radius:12px;padding:8px 8px 20px;position:relative;
  box-shadow:0 34px 70px -26px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.07);
}
.ms-bezel::after{content:"";position:absolute;bottom:7px;left:50%;transform:translateX(-50%);width:28px;height:3px;border-radius:2px;background:#3a3c44}
.ms-screen{background:#141519;border-radius:4px;overflow:hidden;height:clamp(230px,25vw,320px);display:flex;flex-direction:column}
.ms-stand{width:92px;height:13px;background:linear-gradient(180deg,#25262c,#181920);margin:0 auto;border-radius:0 0 3px 3px}
.ms-foot{width:176px;height:8px;background:#22232a;border-radius:5px;margin:0 auto;box-shadow:0 8px 18px rgba(0,0,0,.5)}
.ms-tag{text-align:center;margin-top:16px;font-family:var(--font-mono)}
.ms-tag b{display:block;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;font-weight:500;margin-bottom:5px}
.ms-tag span{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--t-inv2)}
/* app chrome */
.ms-title{background:#1e1f23;height:23px;display:flex;align-items:center;gap:7px;padding:0 9px;flex:none;border-bottom:1px solid #000}
.ms-title .i{width:11px;height:11px;border-radius:2px;background:linear-gradient(135deg,var(--indigo),var(--cyan));flex:none}
.ms-title .n{font-size:9.5px;color:#d7d9df}
.ms-title .w{margin-left:auto;display:flex;gap:10px;color:#b9bcc4;font-size:8.5px}
.ms-menu{background:#1e1f23;height:19px;display:flex;align-items:center;gap:13px;padding:0 10px;font-size:8.5px;color:#b9bcc4;flex:none;border-bottom:1px solid #101114}
.ms-main{flex:1;display:flex;min-height:0}
.ms-rail{width:30px;background:#1e1f23;border-right:1px solid #101114;flex:none;display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:9px;font-size:10px;color:#c7cad2;opacity:.6}
.ms-panes{flex:1;padding:6px;min-width:0;display:flex}
.ms-pane{
  flex:1;min-width:0;background:#141519;border:1px solid #3b6fd4;box-shadow:0 0 0 1px #3b6fd4;
  border-radius:5px;display:flex;flex-direction:column;overflow:hidden;
}
.ms-ph{height:23px;display:flex;align-items:center;gap:7px;padding:0 8px;background:#26272c;flex:none;border-bottom:1px solid #101114}
.ms-dot{width:6px;height:6px;border-radius:50%;background:#3ddc84;box-shadow:0 0 5px #3ddc84;flex:none}
.ms-ph .t{font-size:9.5px;color:#e6e8ee;font-weight:500}
.ms-ph .x{margin-left:auto;color:#8a8d96;font-size:9px}
.ms-tb{height:25px;display:flex;align-items:center;gap:10px;padding:0 8px;background:#26272c;flex:none;border-bottom:1px solid #101114}
.ms-pill{background:rgba(61,220,132,.14);color:#3ddc84;border-radius:3px;font-size:8px;padding:3px 7px;font-weight:600}
.ms-tools{margin-left:auto;display:flex;gap:8px;color:#aeb2bb;font-size:8.5px}
/* bottom-anchored like a real terminal; content MUST sit in one .tw child or flex breaks `pre` */
.ms-term{
  flex:1;min-height:0;background:#0d0e11;padding:7px 9px;overflow:hidden;
  font-family:var(--font-mono);font-size:8.5px;line-height:1.5;color:#d7d9df;
  display:flex;flex-direction:column;justify-content:flex-end;
}
.ms-term .tw{white-space:pre}
.ms-term .d{color:#8a8d96}
.ms-cur{display:inline-block;width:5px;height:9px;background:#7aa2f7;vertical-align:-1px}
/* claude pane */
.ms-cl{color:#d97757}
.ms-clbox{border:1px solid rgba(217,119,87,.45);border-radius:4px;padding:7px 8px;margin-bottom:7px;text-align:center}
.ms-clq{border-left:2px solid rgba(217,119,87,.5);padding-left:8px;margin-bottom:7px;color:#c8cbd3}
.ms-clin{border-top:1px solid #33353c;padding:6px 9px;font-family:var(--font-mono);font-size:8.5px;color:#8a8d96;background:#0f1013;flex:none}
/* detach arrow */
.ms-arrow{
  position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:7px;pointer-events:none;
}
.ms-arrow svg{filter:drop-shadow(0 6px 14px rgba(0,0,0,.7))}
.ms-arrow .cap{
  background:var(--indigo);color:#fff;border-radius:100px;padding:6px 13px;white-space:nowrap;
  font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  box-shadow:0 8px 22px rgba(110,93,246,.5);
}
/* section heads sitting on a dark block need light copy */
.block.dark .sec-head p{color:var(--t-inv2)}
.block.dark .sec-head .eyebrow{color:var(--t-inv2)}

/* ============ RELEASE NOTES / CHANGELOG ============ */
.rel-stats{display:flex;flex-wrap:wrap;gap:clamp(22px,4vw,56px);margin-top:clamp(24px,4vh,38px)}
.rel-stat b{font-family:var(--font-display);font-weight:700;font-size:clamp(1.5rem,2.8vw,2.2rem);line-height:1;display:block;color:#fff}
.rel-stat b em{font-style:normal;color:var(--cyan)}
.rel-stat span{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--t-inv2);display:block;margin-top:8px}
.rel-hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:clamp(26px,4vh,38px)}

.rel-layout{display:grid;grid-template-columns:170px minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:start}
@media(max-width:900px){.rel-layout{grid-template-columns:1fr}.rel-index{display:none}}
.rel-index{position:sticky;top:calc(var(--nav-h) + 20px)}
.rel-index h5{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--t-mid);margin-bottom:14px}
.rel-index a{
  display:block;font-family:var(--font-mono);font-size:.76rem;color:var(--t-mid);
  padding:6px 0 6px 12px;border-left:2px solid var(--line);
  transition:color .25s,border-color .25s,padding-left .25s;
}
.rel-index a:hover{color:var(--t-ink);border-color:var(--indigo);padding-left:16px}
.rel-index a.is-latest{color:var(--indigo);font-weight:500}

.rel{padding-bottom:clamp(34px,5vh,54px);margin-bottom:clamp(34px,5vh,54px);border-bottom:1px solid var(--line);scroll-margin-top:calc(var(--nav-h) + 24px)}
.rel:last-child{border-bottom:0;margin-bottom:0}
.rel-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.rel-ver{font-family:var(--font-display);font-weight:700;font-size:clamp(1.7rem,3.2vw,2.5rem);line-height:1;letter-spacing:.01em}
.rel-date{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--t-mid)}
.rel-badge{
  font-family:var(--font-mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;
  background:var(--indigo);color:#fff;border-radius:100px;padding:4px 10px;align-self:center;
}
.rel-title{
  font-family:var(--font-display);font-weight:600;text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(1.1rem,1.9vw,1.45rem);color:var(--t-ink);margin-bottom:8px;
}
.rel-sec{margin-top:22px}
.rel-gh{
  font-family:var(--font-mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--indigo);margin-bottom:12px;
}
.rel-sec.fix .rel-gh{color:#b3541e}
.rel-sub{
  font-family:var(--font-display);font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  font-size:.95rem;color:var(--t-ink);margin:16px 0 8px;
}
.rel ul{margin:0;padding:0}
.rel li{position:relative;padding-left:24px;color:var(--t-mid);margin-bottom:9px;line-height:1.62}
.rel li::before{content:"";position:absolute;left:2px;top:.62em;width:9px;height:2px;border-radius:2px;background:var(--indigo)}
.rel-sec.fix li::before{background:#b3541e}
.rel li b{color:var(--t-ink);font-weight:600}

/* ============ REVIEW FORM ============ */
/* Simple display toggle + entrance animation. (An 0fr→1fr grid-row reveal resolved the track to
   ~79px instead of the content height and clipped the form, so it's deliberately not used here.) */
.rev-wrap{display:none;max-width:780px;margin-inline:auto}
.rev-wrap.open{display:block;margin-top:clamp(26px,4vh,42px);animation:rev-in .5s var(--ease-out) both}
@keyframes rev-in{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.rev-wrap.open{animation:none}}
.rev-form{
  background:var(--paper);border:1px solid var(--line);border-radius:16px;
  padding:clamp(24px,3vw,40px);text-align:left;
}
.rev-form h4{font-family:var(--font-display);font-weight:600;text-transform:uppercase;font-size:1.5rem;letter-spacing:.02em}
.rev-form .rf-intro{color:var(--t-mid);font-size:.92rem;margin:6px 0 26px}
.rf-field{margin-bottom:18px;border:0;padding:0;min-width:0}
.rf-field>label,.rf-legend{
  display:block;font-family:var(--font-mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.16em;
  color:var(--t-mid);margin-bottom:9px;padding:0;
}
.rf-field input[type=text],.rf-field input[type=email],.rf-field textarea{
  width:100%;font:inherit;font-size:.95rem;color:var(--t-ink);
  background:var(--paper-2);border:1px solid var(--line);border-radius:10px;padding:13px 15px;
  transition:border-color .25s,box-shadow .25s,background .25s;
}
.rf-field textarea{min-height:132px;resize:vertical;display:block}
.rf-field input::placeholder,.rf-field textarea::placeholder{color:rgba(76,78,85,.5)}
.rf-field input:focus,.rf-field textarea:focus{
  outline:none;background:var(--paper);border-color:var(--indigo);box-shadow:0 0 0 3px rgba(110,93,246,.16);
}
.rf-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
@media(max-width:640px){.rf-grid{grid-template-columns:1fr}}

/* star rating input — row-reverse so `~` can fill the stars to the left on hover/check */
.stars-input{display:inline-flex;flex-direction:row-reverse;justify-content:flex-end;gap:5px}
.stars-input input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.stars-input label{
  font-size:1.9rem;line-height:1;color:#d8d9dd;cursor:pointer;
  transition:color .2s var(--ease-out),transform .2s var(--ease-out);
}
.stars-input label:hover,.stars-input label:hover~label,.stars-input input:checked~label{color:var(--amber)}
.stars-input label:active{transform:scale(.9)}
.stars-input input:focus-visible+label{outline:2px solid var(--indigo);outline-offset:3px;border-radius:4px}

.rf-check{display:flex;align-items:flex-start;gap:11px}
.rf-check input{margin-top:3px;width:16px;height:16px;accent-color:var(--indigo);flex:none;cursor:pointer}
.rf-check label{font-size:.85rem;color:var(--t-mid);line-height:1.45;cursor:pointer}
.rf-consent{margin-bottom:24px}

.rf-err{display:none;color:#b3261e;font-size:.78rem;margin-top:7px}
.rf-field.invalid .rf-err{display:block}
.rf-field.invalid input[type=text],.rf-field.invalid input[type=email],.rf-field.invalid textarea{
  border-color:#b3261e;background:rgba(179,38,30,.04);
}
.rf-submit{margin-top:2px}
.rf-note{margin-top:16px;font-size:.8rem;color:var(--t-mid)}
.rf-status{display:none;margin-top:18px;padding:14px 16px;border-radius:10px;font-size:.9rem;line-height:1.5}
.rf-status.show{display:block}
.rf-status.ok{background:rgba(15,184,155,.1);border:1px solid rgba(15,184,155,.45);color:#0a6b5b}
.rf-status.warn{background:rgba(247,171,0,.12);border:1px solid rgba(247,171,0,.5);color:#7a5600}
.rf-status.err{background:rgba(179,38,30,.08);border:1px solid rgba(179,38,30,.4);color:#8c1d18}
.rf-status a{text-decoration:underline;font-weight:600}

/* ============ FAQ ============ */
.faq{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:22px 0;font-family:var(--font-display);font-weight:600;font-size:1.25rem;text-transform:uppercase;letter-spacing:.02em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.6rem;font-weight:400;transition:transform .35s var(--ease-out);flex:none}
.faq[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 24px;color:var(--t-mid);max-width:56em}

/* ============ TRUST band ============ */
.trust{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.trust .tb{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:100px;padding:12px 22px;background:var(--paper);
}
/* Chips inherit their section's text colour but carry their own --paper background, so on any dark
   section they must go transparent — otherwise it's white text on a white pill. Keep .final,
   .legal-hero and .hero in this list alongside the .block variants. */
.on-dark .trust .tb,.block.dark .trust .tb,.final .trust .tb,.hero .trust .tb,.legal-hero .trust .tb{
  border-color:var(--line-inv);background:transparent;color:var(--t-inv2);
}

/* ============ COMPARISON TABLE ============ */
.cmp-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:var(--paper)}
.cmp{width:100%;border-collapse:collapse;min-width:760px;font-size:.92rem}
.cmp th,.cmp td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--line)}
.cmp thead th{font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;color:var(--t-mid)}
.cmp tbody tr:last-child td{border-bottom:0}
.cmp .hl{background:rgba(110,93,246,.07);border-inline:1px solid rgba(110,93,246,.25)}
.cmp thead .hl{color:var(--indigo);font-weight:700}
.cmp .yes{color:#0d8a63;font-weight:600}
.cmp .no{color:#b3541e}

/* ============ SHOTS GALLERY ============ */
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px)}
@media(max-width:900px){.shots{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.shots{grid-template-columns:1fr}}
.shot{border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--paper);cursor:zoom-in;
  transition:transform .5s var(--ease-out),box-shadow .5s}
.shot:hover{transform:translateY(-5px);box-shadow:0 26px 60px -28px rgba(16,17,19,.35)}
.shot img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
/* .fit — for a capture whose shape isn't ~16:10. Keeps the 16:10 box (so the gallery grid stays
   even) but contains the image instead of cover-cropping it, which would slice off real UI. */
.shot.fit img{object-fit:contain;background:var(--ink-soft)}
/* .nat — capture shown at its OWN aspect ratio, no 16:10 letterbox box and no dark backing.
   For portrait/near-square app shots where .fit would leave big black side-bars. Tiles size to
   the image, so a row of these will be taller than a .fit row — that's intended. */
.shot.nat img{aspect-ratio:auto;height:auto;background:transparent}
/* ---- auto-rotating stills: two shots crossfading in one frame ----
   Both images share grid cell 1/1, so the frame is sized by the TALLER one and never jumps as
   they swap (these two have different aspect ratios). Neither is cropped or letterboxed. */
.arot{display:grid;filter:drop-shadow(0 26px 55px rgba(0,0,0,.3))}
.arot img{
  grid-area:1/1;align-self:center;width:100%;height:auto;display:block;border-radius:10px;
  opacity:0;transition:opacity .9s var(--ease-out);
}
.arot img.is-active{opacity:1}
.arot-dots{display:flex;justify-content:center;gap:9px;margin-top:18px}
.arot-dots button{
  width:9px;height:9px;padding:0;border:0;border-radius:50%;background:var(--line);
  cursor:pointer;transition:background .3s,transform .3s var(--ease-out);
}
.arot-dots button:hover{background:var(--t-mid)}
.arot-dots button[aria-current="true"]{background:var(--indigo);transform:scale(1.3)}
@media (prefers-reduced-motion:reduce){.arot img{transition:none}}

/* ---- contact page: the email CTA sits between the copy and the tips ---- */
.contact-cta{margin:clamp(22px,3vh,30px) 0 clamp(26px,4vh,36px)}
.contact-cta .btn{font-size:.82rem}

/* ---- embedded JotForm ---- */
.jf-wrap{
  max-width:820px;margin-inline:auto;background:var(--paper);
  border:1px solid var(--line);border-radius:16px;overflow:hidden;
  box-shadow:0 26px 55px -30px rgba(16,17,19,.25);
}
.jf-wrap iframe{
  display:block;width:1px;min-width:100%;border:0;
  /* fallback height for when JotForm's auto-resize handler can't load; it overrides this inline */
  height:1000px;
}

/* ---- protocol roster: grouped chips naming every supported type ---- */
.proto{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:clamp(16px,2vw,26px)}
.proto-grp{border-top:2px solid var(--accent,var(--indigo));padding-top:16px}
.proto-grp h5{
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--t-mid);margin-bottom:12px;
}
.proto-grp .row{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:10px}
.proto-grp .row b{
  font-family:var(--font-mono);font-size:.72rem;font-weight:500;letter-spacing:.06em;
  background:var(--paper);border:1px solid var(--line);border-radius:100px;padding:6px 12px;color:var(--t-ink);
}
.proto-grp p{font-size:.85rem;color:var(--t-mid);line-height:1.55}
.block.dark .proto-grp .row b{background:transparent;border-color:var(--line-inv);color:#fff}
.block.dark .proto-grp p,.block.dark .proto-grp h5{color:var(--t-inv2)}

/* ---- view-mode gallery: one frame, the views swap in place ---- */
.vg{max-width:900px;margin-inline:auto}
.vg-tabs{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:clamp(20px,3vh,30px)}
.vg-tab{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:100px;padding:10px 18px;color:var(--t-mid);
  background:var(--paper);cursor:pointer;transition:.3s var(--ease-out);
}
.vg-tab:hover{border-color:var(--t-ink);color:var(--t-ink)}
.vg-tab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.vg-tab[disabled]{opacity:.42;cursor:default}
.vg-tab[disabled]:hover{border-color:var(--line);color:var(--t-mid)}
.vg-tab .soon{font-size:.85em;opacity:.7;margin-left:6px;text-transform:none;letter-spacing:0}
/* the stage holds every view stacked; only the active one is shown, so the frame never jumps */
.vg-stage{position:relative;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--ink-soft)}
.vg-stage figure{margin:0;position:relative;display:none}
.vg-stage figure.is-active{display:block;animation:vg-in .45s var(--ease-out) both}
@keyframes vg-in{from{opacity:0;transform:scale(.99)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.vg-stage figure.is-active{animation:none}}
.vg-stage img{width:100%;height:auto;display:block;cursor:zoom-in}
.vg-cap{
  padding:13px 18px;border-top:1px solid var(--line);background:var(--paper);
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--t-mid);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.vg-cap b{color:var(--t-ink);font-weight:500;letter-spacing:.1em}
.shot figcaption{padding:12px 16px;font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;color:var(--t-mid)}

/* lightbox */
#lightbox{position:fixed;inset:0;z-index:950;background:rgba(10,10,14,.92);display:none;align-items:center;justify-content:center;padding:4vw;cursor:zoom-out}
#lightbox.open{display:flex}
#lightbox img{max-width:100%;max-height:100%;border-radius:10px;box-shadow:0 40px 120px rgba(0,0,0,.6)}

/* ============ SPEC TABLE ============ */
.spec{width:100%;border-collapse:collapse;font-size:.95rem}
.spec td{padding:13px 0;border-bottom:1px solid var(--line);vertical-align:top}
.spec td:first-child{font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--t-mid);width:38%;padding-right:18px}
.spec tr:last-child td{border-bottom:0}

/* ============ FEATURE SPLIT (detail pages) ============ */
.split{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(30px,5vw,80px);align-items:center}
.split.flip{grid-template-columns:1.1fr 1fr}
.split.flip .split-copy{order:2}
@media(max-width:920px){.split,.split.flip{grid-template-columns:1fr}.split.flip .split-copy{order:0}}
.split-copy .eyebrow{margin-bottom:18px;color:var(--t-mid)}
.split-copy h3{margin-bottom:16px}
.split-copy>p{color:var(--t-mid);max-width:34em}
.feat-li{display:flex;gap:16px;margin-top:22px}
.feat-li .fi{flex:none;width:40px;height:40px;border-radius:10px;background:var(--paper-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:1.05rem}
.feat-li h5{font-family:var(--font-display);font-weight:600;text-transform:uppercase;font-size:1.05rem;letter-spacing:.03em;margin-bottom:3px}
.feat-li p{font-size:.92rem;color:var(--t-mid)}

/* ============ TOOL HERO (detail pages, colored) ============ */
.tool-hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:0;overflow:hidden}
.tool-hero .th-copy{padding-top:calc(var(--nav-h) + 6vh)}
.tool-hero .eyebrow{margin-bottom:22px}
.tool-hero h1{margin-bottom:20px}
.tool-hero .lead{margin-bottom:30px}
.tool-hero .th-ctas{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:clamp(34px,6vh,60px)}
.tool-hero .media-card{margin-inline:auto;max-width:1020px;filter:drop-shadow(0 -20px 60px rgba(0,0,0,.4))}
/* hero with NO media beneath it: .tool-hero is bottom-aligned with padding-bottom:0 so a media card
   can meet the section edge — without one, the copy must be centred and the padding restored. */
.tool-hero-plain{justify-content:center;padding-bottom:clamp(50px,9vh,96px)}
.tool-hero.on-amber .lead{color:rgba(16,17,19,.78)}
.tool-hero:not(.on-amber) .lead{color:rgba(255,255,255,.88)}

/* ---- split variant: copy left, media aside on the right, both vertically centred ---- */
.tool-hero-split{justify-content:center;padding-block:calc(var(--nav-h) + 4vh) clamp(40px,7vh,80px)}
/* copy column gets the larger share: the eyebrow and the CTA row are fixed-width content that
   must stay on ONE line each, and they don't shrink with the viewport the way the media does */
.tool-hero-split .th-grid{
  display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,1fr);
  gap:clamp(24px,3.5vw,56px);align-items:center;
}
/* keep the protocol list on a single line — tighter tracking/gap than the default eyebrow */
.tool-hero-split .eyebrow{
  flex-wrap:nowrap;white-space:nowrap;
  gap:clamp(6px,.7vw,10px);letter-spacing:.1em;font-size:clamp(.56rem,.85vw,.68rem);
}
/* the CTA row must not break either */
.tool-hero-split .th-ctas{flex-wrap:nowrap}
.tool-hero-split .th-ctas .btn{white-space:nowrap;padding-inline:clamp(18px,2.2vw,30px)}
.tool-hero-split .th-copy{padding-top:0}
.tool-hero-split .th-ctas{margin-bottom:0}
/* .display's 11vw outgrows this column (same trap as the home tool blocks) — cap it to fit */
.tool-hero-split .th-copy h1{font-size:clamp(2.4rem,9vw,7.2rem)}
.tool-hero-split .media-card{margin-inline:0;max-width:none;filter:drop-shadow(0 30px 60px rgba(0,0,0,.35))}
@media(max-width:960px){
  .tool-hero-split .th-grid{grid-template-columns:1fr;gap:clamp(26px,5vh,44px)}
  .tool-hero-split{padding-block:calc(var(--nav-h) + 5vh) clamp(36px,6vh,64px)}
}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px)}
@media(max-width:960px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}
.step .n{
  font-family:var(--font-display);font-weight:700;font-size:3.4rem;line-height:1;color:transparent;
  -webkit-text-stroke:1.5px var(--accent,var(--ink));display:block;margin-bottom:12px;
}
.step h4{font-family:var(--font-display);font-weight:600;text-transform:uppercase;font-size:1.15rem;margin-bottom:6px}
.step p{font-size:.92rem;color:var(--t-mid)}

/* ============ CONTACT / DOWNLOAD final block ============ */
.final{background:var(--ink);color:#fff;overflow:hidden}
.final .lead{color:var(--t-inv2)}
.final .contact-line{font-family:var(--font-mono);font-size:.8rem;letter-spacing:.1em;color:var(--t-inv2);margin-top:26px}
.final .contact-line a{color:var(--cyan);border-bottom:1px solid transparent;transition:border-color .3s}
.final .contact-line a:hover{border-color:var(--cyan)}

/* footer */
footer{background:var(--ink);color:rgba(255,255,255,.6);border-top:1px solid var(--line-inv)}
.foot{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px;padding-block:56px}
@media(max-width:820px){.foot{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot{grid-template-columns:1fr}}
.foot h5{font-family:var(--font-mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.22em;color:#fff;margin-bottom:16px}
.foot a{display:block;font-size:.9rem;padding:5px 0;transition:color .25s}
.foot a:hover{color:#fff}
.foot-base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:22px;border-top:1px solid var(--line-inv);font-size:.8rem}
.foot .logo .lg-t{color:#fff}

/* utilities */
.mt-1{margin-top:clamp(20px,3vh,32px)}
.mt-2{margin-top:clamp(36px,6vh,64px)}
.mb-1{margin-bottom:clamp(20px,3vh,32px)}
.center{text-align:center}
.pad-sec{padding-block:clamp(80px,12vh,150px)}
.pad-sec-sm{padding-block:clamp(56px,8vh,100px)}
.mono{font-family:var(--font-mono)}
.tag-new{
  display:inline-block;font-family:var(--font-mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;
  background:var(--indigo);color:#fff;border-radius:100px;padding:3px 9px;vertical-align:middle;margin-left:8px;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .rv,[data-split] .w>span{opacity:1!important;transform:none!important}
}