/* ============================================================================
   Design system: the wave.js site's visual language
   (github.com/iOSDevSK/wave.js -> website/web/react), carried onto html2wp.dev.

   From wave.js, verbatim: the #07070f void, the 40px grid overlay that sits over
   the whole page, glass panels on rgba(10,10,10,.6), 1px-hairline bento grids on
   #0a0a0a, the teal -> blue -> purple accent gradient, and Space Grotesk display
   over Inter body over JetBrains Mono. The animated sine-wave background it is
   named for is deliberately NOT carried over: the hero is flat void.

   From html2wp.dev, unchanged: every word of copy, every anchor, every measured
   number, the five signature interactions and the whole JSON-LD graph.
   ========================================================================== */
:root{
  --void:#07070f; --void-2:#0d111d; --surface:#151928; --surface-2:#1e2438;
  --panel:#0a0a0a; --panel-2:#050505;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);

  --fg:#f0f0f5; --fg-2:#d4d4d8; --muted:#8a8f98; --muted-2:#71767f;
  --teal:#00f0ff; --blue:#4d7cff; --purple:#8b5cf6;

  --font-display:'Space Grotesk',system-ui,-apple-system,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --r-sm:6px; --r:10px; --r-lg:16px; --r-xl:24px; --r-full:999px;

  --rail:1280px; --pad:24px;
  --section-y:clamp(64px,7.5vw,128px);
  --nav-h:64px;

  --grad-accent:linear-gradient(135deg,#00f0ff 0%,#4d7cff 50%,#8b5cf6 100%);
  --grid-lines:linear-gradient(to right,rgba(255,255,255,.03) 1px,transparent 1px),
               linear-gradient(to bottom,rgba(255,255,255,.03) 1px,transparent 1px);
  --dots:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);
}
@media (max-width:900px){ :root{ --pad:18px; } }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--void)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--void);color:var(--fg);
  font:400 15px/1.65 var(--font-body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;max-width:100vw;
}
img,video{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);margin:0}
h1{font-weight:700;font-size:clamp(36px,4.3vw,60px);line-height:1.0;letter-spacing:-.035em}
h2{font-weight:700;font-size:clamp(28px,3.4vw,48px);line-height:1.06;letter-spacing:-.03em}
h3{font-weight:600;font-size:18px;line-height:1.35;letter-spacing:-.01em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:rgba(0,240,255,.2);color:#fff}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--void)}
::-webkit-scrollbar-thumb{background:var(--surface-2);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--blue)}

/* ---- the page-wide grid overlay (wave.js signature) ---- */
.gridbg{position:fixed;inset:0;z-index:0;pointer-events:none;
        background-size:40px 40px;background-image:var(--grid-lines)}

/* ---- rail ---- */
.wrap{position:relative;z-index:10;max-width:var(--rail);margin:0 auto;padding:var(--section-y) var(--pad)}
main{position:relative;z-index:10}

/* ---- type helpers ---- */
.lead{color:var(--muted);font-size:clamp(16px,1.3vw,19px);line-height:1.6;font-weight:300}
.small{color:#a1a1aa;font-size:14px;line-height:1.65}
.meta{color:var(--muted);font-size:13px;line-height:1.55}
.eyebrow{font:500 10px/1 var(--font-mono);letter-spacing:.2em;text-transform:uppercase;
         color:var(--muted);display:block;margin-bottom:16px}
.grad-w{background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.92) 45%,rgba(255,255,255,.32) 100%);
        -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
/* section headings wrap to two lines far more often than the hero does, and the hero's
   deep fade leaves a second line looking half-rendered. Shallower ramp for h2. */
h2.grad-w,.pagehead h1.grad-w{background-image:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.72) 100%)}
.grad-a{background-image:var(--grad-accent);
        -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.shead{max-width:760px;margin-bottom:clamp(40px,4.5vw,64px)}
.shead h2{margin-bottom:16px}
.shead.center{margin-left:auto;margin-right:auto;text-align:center}
.shead.center .lead{margin-left:auto;margin-right:auto;max-width:560px}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;text-align:center;gap:8px;
  min-height:46px;padding:0 24px;border-radius:var(--r-sm);
  font:600 14px/1 var(--font-body);letter-spacing:.01em;text-decoration:none;cursor:pointer;
  border:1px solid transparent;transition:background .2s ease,border-color .2s ease,color .2s ease,box-shadow .3s ease,transform .2s ease;
}
.btn-white{background:#fff;color:#000;box-shadow:0 0 30px -5px rgba(255,255,255,.35)}
.btn-white:hover{background:#e4e4e7;box-shadow:0 0 42px -5px rgba(255,255,255,.5)}
.btn-outline{background:rgba(255,255,255,.03);color:var(--fg);border-color:rgba(255,255,255,.14)}
.btn-outline:hover{border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.06)}
.btn-sm{min-height:36px;padding:0 16px;font-size:13px}
.btn-link{display:inline-flex;align-items:center;gap:7px;color:var(--teal);
          font-size:14px;font-weight:500;text-decoration:none}
.btn-link:hover{text-decoration:underline;text-underline-offset:3px}
.btn-link::after{content:"\2192";transition:transform .2s ease}
.btn-link:hover::after{transform:translateX(3px)}
.icn{width:20px;height:20px;flex:none;stroke:currentColor;stroke-width:1.6;fill:none;
     stroke-linecap:round;stroke-linejoin:round}

/* ---- nav ---- */
.nav{position:fixed;top:0;left:0;width:100%;z-index:50;
     background:rgba(10,10,10,.6);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
     border-bottom:1px solid rgba(255,255,255,.06)}
.nav .bar{max-width:var(--rail);margin:0 auto;height:var(--nav-h);padding:0 var(--pad);
          display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--fg);
       font:700 17px/1 var(--font-display);letter-spacing:-.02em}
.brand i{font-style:normal;color:var(--muted);font-weight:500}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a:not(.btn):not(.ghlink){position:relative;color:var(--muted);font-size:14px;font-weight:500;
                       text-decoration:none;white-space:nowrap;padding:2px 0;transition:color .2s ease}
.nav-links a:not(.btn):not(.ghlink):hover{color:#fff}
.nav-links a:not(.btn):not(.ghlink)::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;border-radius:2px;
                              background:linear-gradient(to right,var(--teal),var(--blue));transition:width .3s ease}
.nav-links a:not(.btn):not(.ghlink):hover::after{width:100%}
/* the version chip carries the plugin's real published version */
.vchip{display:inline-flex;align-items:center;padding:4px 9px;border-radius:5px;
       font:500 10px/1 var(--font-mono);letter-spacing:.06em;color:#d4d4d8;white-space:nowrap;
       background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
/* six links plus the chip plus the CTA: the band between 940 and 1100 needs the
   spacing tightened or the wordmark and the links end up touching */
@media (max-width:1100px){ .nav-links{gap:20px} }
@media (max-width:940px){ .nav-links a:not(.btn):not(.ghlink){display:none} .nav-links{gap:12px} }
@media (max-width:620px){ .vchip{display:none} }
/* the pinch: six links, the chip, the GitHub mark and the CTA only just fit above
   1010px. Below 940 the text links fold away and the room comes back, so the chip
   steps aside for that band alone rather than for every small screen. */
@media (min-width:941px) and (max-width:1010px){ .vchip{display:none} }

/* ---- hero ---- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;
      padding:calc(var(--nav-h) + 56px) 0 72px;border-bottom:1px solid var(--line)}
.hero .gridlocal{position:absolute;inset:0;z-index:1;pointer-events:none;
                 background-size:40px 40px;background-image:var(--grid-lines)}
.hero .wrap{padding-top:0;padding-bottom:0;width:100%;z-index:20}
/* One centred column. The hero used to carry a product panel on the right; with that
   gone a two-track grid would only leave a hole, so the type takes the full stage. */
.herogrid{display:grid;grid-template-columns:1fr;justify-items:center;text-align:center;
          max-width:1020px;margin:0 auto}

.pill{display:inline-flex;align-items:center;gap:10px;border-radius:var(--r-full);
      padding:7px 16px 7px 12px;margin-bottom:28px;white-space:nowrap;max-width:100%;
      font:400 11.5px/1.4 var(--font-mono);color:var(--teal);
      background:rgba(77,124,255,.1);border:1px solid rgba(77,124,255,.2)}
.pill b{color:#fff;font-weight:500}
.pill .pill-more{color:#aeb3ba}
.pill .dot{position:relative;display:inline-flex;height:8px;width:8px;flex:none}
.pill .dot::before,.pill .dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--teal)}
.pill .dot::before{animation:ping 1.8s cubic-bezier(0,0,.2,1) infinite;opacity:.75}
@keyframes ping{75%,100%{transform:scale(2.2);opacity:0}}
/* The pill used to sit in a half-width column, so it shed its second sentence early.
   Centred and full-width it keeps the whole beta sentence down to a phone. */
@media (max-width:760px){ .pill .pill-more{display:none} }

.hero h1{margin:0 auto 28px;max-width:13em;
         font-size:clamp(40px,6.2vw,86px);line-height:.98;letter-spacing:-.04em}
.hero .lead{max-width:40em;margin:0 auto 40px;color:#c8ccd2;font-size:clamp(17px,1.5vw,21px)}
.hero .cmd{margin:0 auto}
.cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
@media (max-width:520px){ .cta{flex-direction:column;align-items:stretch} .cta .btn{width:100%} }

.trustbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 26px;margin-top:40px;
          font:400 10.5px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;
          color:rgba(138,143,152,.72)}
.trustbar span{display:inline-flex;align-items:center;gap:8px}
.trustbar .icn{width:14px;height:14px;color:rgba(0,240,255,.55)}

/* hero panel: the product shots, in the slot the wave.js hero gives its parameters panel */
.panel{border-radius:var(--r-lg);border:1px solid var(--line);overflow:hidden;
       background:rgba(10,10,10,.62);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
       box-shadow:0 0 60px -20px rgba(77,124,255,.4)}
.panel .phead{display:flex;align-items:center;justify-content:space-between;gap:12px;
              padding:11px 14px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}
.panel .phead span{font:500 10px/1 var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.dots{display:inline-flex;gap:6px}
.dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.14);display:block}
.tabbar{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}
.tabbar button{
  appearance:none;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;
  padding:13px 6px;cursor:pointer;font:500 12px/1.3 var(--font-body);color:var(--muted);
  transition:color .2s ease,border-color .2s ease,background .2s ease;
}
.tabbar button:hover{color:#fff;background:rgba(255,255,255,.03)}
.tabbar button[aria-selected="true"]{color:var(--teal);border-bottom-color:var(--teal);background:rgba(0,240,255,.05)}
@media (max-width:520px){ .tabbar{grid-template-columns:repeat(2,1fr)} }
.tabframe{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--panel-2)}
.tabframe img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;
              opacity:0;transition:opacity .25s ease}
.tabframe img.on{opacity:1}
.tabnote{padding:12px 14px;border-top:1px solid var(--line);background:rgba(255,255,255,.02)}

.scrollhint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:20;
            display:flex;flex-direction:column;align-items:center;gap:6px;
            font:400 9.5px/1 var(--font-mono);letter-spacing:.24em;text-transform:uppercase;color:rgba(138,143,152,.5)}
.scrollhint svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;
                animation:bob 2.2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@media (max-width:1139px){ .scrollhint{display:none} }

/* ---- proof strip ---- */
.proof .wrap{padding-top:clamp(40px,4vw,64px);padding-bottom:clamp(40px,4vw,64px)}
.proof-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
            border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.proof-grid > div{background:var(--panel);padding:30px 24px}
.num{display:block;margin-bottom:10px;font:700 clamp(32px,3.4vw,52px)/1 var(--font-display);letter-spacing:-.04em;
     background:linear-gradient(160deg,#fff 0%,#71767f 100%);
     -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.num em{font-style:normal;background-image:var(--grad-accent);
        -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* The verified figures rise in sequence. They ride the standard .reveal hook (not a
   bespoke class) so the no-JS path and the screenshot tool's reveal-fix both restore them;
   the stagger is pure CSS. The VALUE itself is never animated: see the note in the script. */
#proof > .reveal:nth-child(2),.stats > .reveal:nth-child(2){transition-delay:70ms}
#proof > .reveal:nth-child(3),.stats > .reveal:nth-child(3){transition-delay:140ms}
#proof > .reveal:nth-child(4),.stats > .reveal:nth-child(4){transition-delay:210ms}
@media (max-width:860px){ .proof-grid{grid-template-columns:repeat(2,1fr)} .proof-grid > div{padding:22px 16px} }

/* Grid and flex children default to min-width:auto, so a wide <pre> refuses to shrink and
   pushes the whole rail past the viewport. Every track child opts out of that here. */
.bento > *,.row > *,.tri > *,.tri .col > *,.split > *,.proc > *,.stack > *,
.stats > *,.proof-grid > *,.paths > *,.track > *,.foot > *,.faq > *,.stage > *{min-width:0}
.codewin,.mini,pre{max-width:100%}

/* ---- hairline bento (wave.js signature) ---- */
.bento{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
       border-radius:var(--r-lg);overflow:hidden}
.bento > *{background:var(--panel);padding:clamp(24px,2.4vw,34px);transition:background .3s ease}
.bento > *:hover{background:#0f1012}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){ .g2,.g3{grid-template-columns:1fr} }

/* ---- code window ---- */
.codewin{border:1px solid var(--line);border-radius:12px;overflow:hidden;
         background:rgba(10,10,10,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
         box-shadow:0 0 40px -12px rgba(77,124,255,.22)}
.codewin .cbar{display:flex;align-items:center;gap:12px;padding:10px 14px;
               border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}
.codewin .fname{font:500 10.5px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
pre{margin:0;padding:18px 20px;font:400 12.5px/1.75 var(--font-mono);color:#d4d4d8;
    white-space:pre;overflow-x:auto}
pre .c{color:#6b7280;font-style:italic}
pre .k{color:#10b981}
pre .x{color:#f97362}
.mini{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:var(--r-sm);
      padding:12px 14px;font:400 12px/1.7 var(--font-mono);color:#a1a1aa;overflow-x:auto}
.mini b{color:var(--teal);font-weight:400}

/* ---- segmented toggle ---- */
.toggle{display:inline-flex;align-self:center;gap:6px;padding:4px;border-radius:10px;
        background:rgba(255,255,255,.03);border:1px solid var(--line)}
.toggle button{appearance:none;border:1px solid transparent;background:none;cursor:pointer;border-radius:7px;
               padding:8px 16px;font:500 12.5px/1 var(--font-body);color:var(--muted);
               transition:background .2s,color .2s,border-color .2s}
.toggle button:hover{color:#fff}
.toggle button[aria-pressed="true"]{background:rgba(0,240,255,.1);border-color:rgba(0,240,255,.3);color:var(--teal)}

/* ---- transform section: problems | stage | results ---- */
.tri{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:1px;background:var(--line);
     border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.tri .col{display:grid;grid-template-rows:repeat(3,1fr);gap:1px;background:var(--line)}
.tri .col > div{background:var(--panel);padding:26px clamp(20px,2vw,30px)}
.tri .col h3{font-size:15px;margin-bottom:9px;color:#fff}
.tri .stage{background-color:var(--panel-2);background-image:var(--dots);background-size:16px 16px;
            padding:32px clamp(18px,2vw,28px);display:flex;flex-direction:column;justify-content:center;gap:18px}
.tri .arrow{text-align:center;font:400 11px/1.4 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;
            color:var(--muted-2)}
@media (max-width:1000px){ .tri{grid-template-columns:1fr} .tri .stage{order:-1} }

/* ---- output rows ---- */
.rows{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
      border-radius:var(--r-lg);overflow:hidden}
.row{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.row > *{background:var(--panel)}
.rowtext{padding:clamp(26px,3vw,46px);display:flex;flex-direction:column;justify-content:center;
         gap:14px;align-items:flex-start}
.rowtext h3{font-size:20px;color:#fff}
.rowtext ul{display:grid;gap:10px}
.rowtext li{position:relative;padding-left:20px;color:#a1a1aa;font-size:14px;line-height:1.6}
.rowtext li::before{content:"";position:absolute;left:2px;top:9px;width:5px;height:5px;border-radius:50%;
                    background:var(--blue);box-shadow:0 0 8px rgba(77,124,255,.7)}
.stage{background-color:var(--panel-2);background-image:var(--dots);background-size:16px 16px;
       display:grid;place-items:center;padding:clamp(22px,3vw,46px)}
.stage.ar{aspect-ratio:4/3}
.stage > *{max-width:100%;max-height:100%;width:auto;height:auto}
.shot{border:1px solid var(--line-2);border-radius:12px;overflow:hidden;background:var(--panel);
      box-shadow:0 0 60px -22px rgba(77,124,255,.5)}
.stage .codewin{overflow:auto;width:100%}
@media (max-width:900px){
  .row{grid-template-columns:1fr}
  .row.flip .stage{order:-1}
  .stage.ar{aspect-ratio:auto;min-height:260px}
}

/* ---- demo band ---- */
.videoframe{max-width:1060px;margin:0 auto;aspect-ratio:856/374;overflow:hidden;
            border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--panel);
            box-shadow:0 0 80px -24px rgba(0,240,255,.35)}
.videoframe video{width:100%;height:100%;object-fit:cover}
.demo-cta{display:flex;gap:14px;justify-content:center;margin-top:32px;flex-wrap:wrap}

/* ---- inputs ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
       border:1px solid var(--line);border-radius:var(--r-lg) var(--r-lg) 0 0;overflow:hidden}
.chipstage{background-color:var(--panel-2);background-image:var(--dots);background-size:16px 16px;
           padding:clamp(26px,3vw,44px);display:flex;flex-wrap:wrap;gap:10px;align-content:center;justify-content:center}
.chip{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.04);
      border:1px solid var(--line);border-radius:var(--r-full);padding:9px 15px;
      font:400 13px/1 var(--font-body);color:#d4d4d8;backdrop-filter:blur(6px);transition:border-color .2s,background .2s}
.chip:hover{border-color:rgba(0,240,255,.3);background:rgba(0,240,255,.06)}
.chip .dot{width:6px;height:6px;border-radius:50%;background:var(--teal);flex:none;
           box-shadow:0 0 8px rgba(0,240,255,.8)}
.stack{background:var(--line);display:grid;gap:1px}
.stack > div{background:var(--panel);padding:24px clamp(20px,2.4vw,34px)}
.stack h3{font-size:15px;margin-bottom:8px;display:flex;align-items:center;gap:10px;color:#fff}
.stack h3 .icn{color:var(--teal)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
       border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r-lg) var(--r-lg);overflow:hidden}
.stats > div{background:var(--panel);padding:32px 20px}
@media (max-width:900px){
  .split{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
}

/* ---- spotlight cards (wave.js FeatureGrid) ---- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:1000px){ .cards{grid-template-columns:repeat(2,1fr)} }
@media (max-width:680px){ .cards{grid-template-columns:1fr} }
.shell{border:1px solid var(--line);border-radius:var(--r-xl);
       background:rgba(21,25,40,.4);padding:clamp(28px,3.2vw,56px)}
.card{position:relative;overflow:hidden;border-radius:var(--r-xl);background:var(--surface);
      transition:box-shadow .3s ease}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
              box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);transition:box-shadow .3s ease}
.card:hover::before{box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
             opacity:0;transition:opacity .3s ease;
             background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(77,124,255,.16),transparent 70%)}
.card:hover{box-shadow:0 12px 40px -20px rgba(0,0,0,.8)}
.card:hover::after{opacity:1}
.card .in{position:relative;z-index:1;padding:30px}
.ring{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
      background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);
      color:var(--teal);transition:background .3s ease,box-shadow .3s ease}
.card:nth-child(3n+2) .ring{color:var(--blue)}
.card:nth-child(3n+3) .ring{color:var(--purple)}
.card:hover .ring{background:rgba(0,240,255,.1);box-shadow:inset 0 0 0 1px rgba(0,240,255,.4)}
.card:nth-child(3n+2):hover .ring{background:rgba(77,124,255,.1);box-shadow:inset 0 0 0 1px rgba(77,124,255,.4)}
.card:nth-child(3n+3):hover .ring{background:rgba(139,92,246,.1);box-shadow:inset 0 0 0 1px rgba(139,92,246,.4)}
.card h3{margin:20px 0 8px;font-weight:500;font-size:17px;color:#fff}
.card .small{color:var(--muted)}
.card .mini{margin-top:16px}

/* ---- process ---- */
.proc{display:grid;grid-template-columns:1fr 1.25fr;gap:1px;background:var(--line);
      border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.proc .side{background:var(--panel);padding:clamp(26px,3vw,46px)}
.proc .side .sticky{position:sticky;top:calc(var(--nav-h) + 40px)}
.proc .side h2{margin-bottom:16px}
.proc .side ol{margin:30px 0 0;display:grid;gap:2px}
.proc .side ol li{padding:12px 0 12px 18px;border-left:2px solid rgba(255,255,255,.1);
                  color:var(--muted-2);font-size:14px;transition:color .25s ease,border-color .25s ease}
.proc .side ol li.on{color:#fff;border-left-color:var(--teal);box-shadow:-2px 0 12px -4px rgba(0,240,255,.6)}
.proc .steps{background-color:var(--panel-2);background-image:var(--dots);background-size:16px 16px;
             padding:clamp(24px,3vw,46px);display:grid;gap:20px;align-content:center}
.step{background:rgba(10,10,10,.8);border:1px solid var(--line);border-radius:12px;
      padding:26px 28px;display:grid;gap:10px;backdrop-filter:blur(6px)}
.step .n{font:500 12px/1 var(--font-mono);letter-spacing:.14em;color:var(--teal)}
.step h3{font-size:17px;color:#fff}
@media (max-width:1000px){ .proc{grid-template-columns:1fr} .proc .side .sticky{position:static} }

/* ---- tools track ---- */
.track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(248px,1fr);gap:1px;background:var(--line);
       border:1px solid var(--line);border-radius:var(--r-lg);overflow-x:auto;scroll-snap-type:x mandatory}
.track .tool{background:var(--panel);padding:28px 26px;display:grid;gap:10px;align-content:start;
             scroll-snap-align:start;transition:background .3s ease}
.track .tool:hover{background:#0f1012}
.track .tool h3{font-size:17px;color:#fff}
.tool .wordmark{display:inline-flex;align-items:center;gap:10px;margin-bottom:6px;
                font:600 15px/1 var(--font-display);letter-spacing:-.02em;color:#fff}
.tool .wordmark span{width:24px;height:24px;border-radius:6px;display:grid;place-items:center;
                     font:600 10px/1 var(--font-display);color:#000;background:linear-gradient(135deg,var(--teal),var(--blue))}
.pending{font:400 11px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}

/* ---- licence statement ---- */
.statement{position:relative;text-align:center;max-width:860px;margin:0 auto;
           border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;
           padding:clamp(40px,5vw,72px) clamp(24px,4vw,64px);
           background:radial-gradient(120% 140% at 50% 0%,rgba(77,124,255,.1) 0%,rgba(7,7,15,0) 60%),rgba(10,10,10,.6)}
.statement q{display:block;quotes:none;font-family:var(--font-display);font-weight:500;
             font-size:clamp(20px,2.2vw,32px);line-height:1.35;letter-spacing:-.02em;margin:18px 0 24px;color:#fff}
.statement .rule{width:48px;height:1px;margin:0 auto 22px;
                 background:linear-gradient(to right,transparent,var(--teal),transparent)}

/* ---- two paths ---- */
.paths{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:1060px;margin:0 auto}
.path{position:relative;display:flex;flex-direction:column;gap:16px;overflow:hidden;
      border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);
      padding:clamp(28px,3vw,44px)}
.path.lit{background:radial-gradient(120% 120% at 50% 0%,rgba(77,124,255,.14) 0%,rgba(21,25,40,0) 55%),var(--surface);
          border-color:rgba(77,124,255,.28)}
.path .ribbon{margin:calc(-1 * clamp(28px,3vw,44px)) calc(-1 * clamp(28px,3vw,44px)) 6px;
              padding:10px;text-align:center;color:#000;background-image:var(--grad-accent);
              font:600 12px/1 var(--font-body);letter-spacing:.02em}
.path .kicker{font:500 10px/1 var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.path h3{font-size:23px;line-height:1.25;color:#fff}
.path ul{display:grid;gap:9px;margin-top:auto}
.path li{position:relative;padding-left:20px;color:var(--muted);font-size:14px}
.path li::before{content:"";position:absolute;left:2px;top:8px;width:5px;height:5px;border-radius:50%;
                 background:var(--blue)}
.path .btn{align-self:flex-start;margin-top:6px}
@media (max-width:900px){ .paths{grid-template-columns:1fr} }

/* ---- FAQ ---- */
.faq{display:grid;grid-template-columns:1fr 1.35fr;gap:clamp(28px,4vw,72px);align-items:start}
.faq h2{margin-bottom:16px}
.faqlist{display:grid;gap:12px}
.qa{border:1px solid var(--line);border-radius:12px;background:rgba(21,25,40,.5);overflow:hidden;
    transition:border-color .25s ease}
.qa:hover{border-color:rgba(255,255,255,.16)}
.qa[open]{border-color:rgba(0,240,255,.22);background:rgba(21,25,40,.8)}
.qa button{width:100%;appearance:none;background:none;border:0;cursor:pointer;text-align:left;
           display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 22px;
           font:500 15px/1.4 var(--font-display);color:#fff}
.qa .sign{position:relative;width:14px;height:14px;flex:none}
.qa .sign::before,.qa .sign::after{content:"";position:absolute;background:var(--teal);
  transition:transform .26s cubic-bezier(.16,1,.3,1),opacity .26s}
.qa .sign::before{left:0;top:6px;width:14px;height:1.5px}
.qa .sign::after{top:0;left:6px;width:1.5px;height:14px}
.qa[open] .sign::after{transform:scaleY(0);opacity:0}
.qa .ans{overflow:hidden;height:0;transition:height .26s cubic-bezier(.16,1,.3,1)}
.qa .ans p{padding:0 22px 20px;color:var(--muted);font-size:14.5px;line-height:1.7;max-width:62ch}
@media (max-width:1000px){ .faq{grid-template-columns:1fr} }

/* ---- the closing band (.wl): install commands, lit from below ---- */
.wl{position:relative;text-align:center;overflow:hidden;border:1px solid var(--line);
    border-radius:var(--r-xl);padding:clamp(44px,5.5vw,84px) clamp(22px,4vw,64px);
    background:radial-gradient(100% 130% at 50% 100%,rgba(0,240,255,.1) 0%,rgba(7,7,15,0) 60%),rgba(10,10,10,.6)}
.wl .shead{margin-left:auto;margin-right:auto;margin-bottom:0;text-align:center}
.form{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:30px}
.form label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.form input[type=email]{
  min-width:290px;flex:1 1 290px;max-width:360px;height:46px;padding:0 16px;
  border:1px solid rgba(255,255,255,.14);border-radius:var(--r-sm);background:rgba(255,255,255,.04);
  font:400 14px/1 var(--font-body);color:var(--fg);transition:border-color .2s,box-shadow .2s,background .2s;
}
.form input[type=email]::placeholder{color:var(--muted-2)}
.form input[type=email]:focus{outline:none;border-color:rgba(0,240,255,.5);background:rgba(255,255,255,.06);
                              box-shadow:0 0 0 3px rgba(0,240,255,.12)}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.formnote{margin-top:16px;text-align:center;min-height:20px;color:var(--muted)}
.formnote.err{color:#f97362}
.formnote.ok{color:#34d399}

/* ---- footer ---- */
footer{position:relative;z-index:10;background:#000;border-top:1px solid rgba(255,255,255,.05);margin-top:0}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(28px,3vw,56px)}
.foot .fbrand{max-width:340px}
.foot .brand{margin-bottom:14px}
.foot .form{justify-content:flex-start;margin-top:22px}
.foot .form input[type=email]{min-width:0;flex:1 1 180px;max-width:240px;height:42px}
.foot .formnote{text-align:left}
.foot h4{font:500 10px/1 var(--font-mono);letter-spacing:.2em;text-transform:uppercase;
         color:var(--muted);margin:0 0 18px}
.fcol ul{display:grid;gap:11px}
.fcol a{color:var(--muted);font-size:14px;text-decoration:none;transition:color .2s ease}
.fcol a:hover{color:var(--teal)}
.legal{max-width:var(--rail);margin:0 auto;padding:22px var(--pad) 34px;
       border-top:1px solid rgba(255,255,255,.05);
       display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.legal .meta{color:var(--muted-2)}
@media (max-width:900px){ .foot{grid-template-columns:1fr 1fr} .foot .fbrand{grid-column:1/-1} }
@media (max-width:560px){ .foot{grid-template-columns:1fr} .foot .fbrand{grid-column:auto} }

/* ---- motion ---- */
.reveal{opacity:0;transform:translateY(16px);
        transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1 !important;transform:none !important;transition:none !important}
  .tabframe img,.qa .ans,.btn,.toggle button,.scrollhint svg,.pill .dot::before{
    transition:none !important;animation:none !important}
}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:3px}

/* ============================================================================
   Added for the multi-page site (2026-08-26): the install command box, the
   host switch, comparison tables, callouts, the subpage head and the prose
   column the documentation pages are set in.
   ========================================================================== */

/* ---- install command box (one line, one enter) ---- */
/* text-align:left is not cosmetic here: the closing band centres its column, and a
   centred shell command is unreadable and uncopyable by eye. */
.cmd{position:relative;display:grid;gap:1px;background:var(--line);text-align:left;
     border:1px solid var(--line);border-radius:12px;overflow:hidden;max-width:640px}
.cmd .cbar{display:flex;align-items:center;justify-content:space-between;gap:12px;
           background:rgba(255,255,255,.02);padding:9px 12px}
.cmd .host{display:inline-flex;gap:4px;padding:3px;border-radius:8px;background:rgba(255,255,255,.04)}
.cmd .host button{appearance:none;border:1px solid transparent;background:none;cursor:pointer;
                  border-radius:6px;padding:6px 12px;color:var(--muted);
                  font:500 11.5px/1 var(--font-body);transition:background .2s,color .2s,border-color .2s}
.cmd .host button:hover{color:#fff}
.cmd .host button[aria-pressed="true"]{background:rgba(0,240,255,.1);border-color:rgba(0,240,255,.3);color:var(--teal)}
.cmd .lines{background:var(--panel);padding:14px 16px;display:grid;gap:7px}
/* pre-wrap, not pre: a clone URL with a continuation backslash is longer than the
   column on any width, and a clipped command is worse than a wrapped one. */
.cmd code{display:block;font:400 13px/1.6 var(--font-mono);color:#d4d4d8;
          white-space:pre-wrap;overflow-wrap:break-word}
.cmd code::before{content:"$ ";color:var(--muted-2)}
.cmd code.plain::before{content:""}
.copy{appearance:none;border:1px solid var(--line);background:rgba(255,255,255,.04);cursor:pointer;
      border-radius:6px;padding:6px 11px;color:var(--muted);
      font:500 11px/1 var(--font-body);transition:color .2s,border-color .2s,background .2s}
.copy:hover{color:#fff;border-color:rgba(255,255,255,.28)}
.copy.done{color:var(--teal);border-color:rgba(0,240,255,.35);background:rgba(0,240,255,.08)}
.cmd + .cmdnote{margin-top:12px}

/* ---- callout ---- */
.callout{border:1px solid var(--line);border-left:2px solid var(--teal);border-radius:0 12px 12px 0;
         background:rgba(0,240,255,.04);padding:22px 26px;display:grid;gap:10px}
.callout h3{font-size:16px;color:#fff}
.callout.warn{border-left-color:#f59e0b;background:rgba(245,158,11,.05)}
.callout p{color:#a1a1aa;font-size:14.5px;line-height:1.7}

/* ---- comparison table ---- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg)}
table.cmp{width:100%;border-collapse:collapse;min-width:520px;background:var(--panel)}
table.cmp th,table.cmp td{padding:15px 20px;text-align:left;border-bottom:1px solid var(--line);
                          font-size:14px;color:#a1a1aa;vertical-align:top}
table.cmp thead th{font:500 10px/1 var(--font-mono);letter-spacing:.18em;text-transform:uppercase;
                   color:var(--muted);background:rgba(255,255,255,.02)}
table.cmp tbody th{color:#fff;font-weight:500;font-family:var(--font-body);font-size:14px}
table.cmp tr:last-child th,table.cmp tr:last-child td{border-bottom:0}
table.cmp td.yes{color:var(--teal)}
table.cmp td.no{color:var(--muted-2)}
table.cmp col.lit{background:rgba(77,124,255,.05)}

/* ---- subpage head ---- */
.pagehead{position:relative;border-bottom:1px solid var(--line);overflow:hidden}
.pagehead .wrap{padding-top:calc(var(--nav-h) + 72px);padding-bottom:56px}
.pagehead .gridlocal{position:absolute;inset:0;z-index:1;pointer-events:none;
                     background-size:40px 40px;background-image:var(--grid-lines)}
.pagehead h1{font-size:clamp(32px,3.8vw,54px);margin-bottom:18px;max-width:16em}
.pagehead .lead{max-width:44em;color:#c8ccd2}
.crumb{display:flex;align-items:center;gap:8px;margin-bottom:22px;
       font:400 11px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--teal)}

/* ---- documentation layout: sticky contents, prose column ---- */
.doc{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}
.doc nav.toc{position:sticky;top:calc(var(--nav-h) + 32px);display:grid;gap:2px}
.doc nav.toc b{display:block;margin-bottom:10px;
               font:500 10px/1 var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.doc nav.toc a{padding:8px 0 8px 14px;border-left:2px solid rgba(255,255,255,.1);
               color:var(--muted-2);font-size:13.5px;text-decoration:none;
               transition:color .2s ease,border-color .2s ease}
.doc nav.toc a:hover{color:#fff}
.doc nav.toc a.on{color:#fff;border-left-color:var(--teal)}
@media (max-width:900px){ .doc{grid-template-columns:1fr} .doc nav.toc{position:static;
  grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;gap:8px;padding-bottom:8px}
  .doc nav.toc b{display:none}
  .doc nav.toc a{border-left:0;border-bottom:2px solid rgba(255,255,255,.1);padding:8px 2px;white-space:nowrap}
  .doc nav.toc a.on{border-bottom-color:var(--teal)}
}

.prose{max-width:74ch;display:grid;gap:20px}
.prose > section{display:grid;gap:16px;scroll-margin-top:calc(var(--nav-h) + 28px)}
.prose h2{font-size:clamp(24px,2.6vw,34px);margin-top:26px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:17px;color:#fff;margin-top:10px}
.prose p{color:#a1a1aa;font-size:15px;line-height:1.75}
.prose p strong,.prose li strong{color:#fff;font-weight:500}
.prose a:not(.btn):not(.btn-link){color:var(--teal);text-decoration:underline;text-underline-offset:3px}
.prose ul{display:grid;gap:10px}
.prose li{position:relative;padding-left:20px;color:#a1a1aa;font-size:15px;line-height:1.7}
.prose li::before{content:"";position:absolute;left:2px;top:10px;width:5px;height:5px;border-radius:50%;
                  background:var(--blue)}
.prose code:not(.cmd code){background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:4px;
      padding:2px 6px;font:400 12.5px/1 var(--font-mono);color:#d4d4d8}
.prose .hr{height:1px;background:var(--line);margin:14px 0}
.prose .meta{color:var(--muted-2)}

/* ============================================================================
   The key request form. Closed beta access runs through it, and the agency's
   own website is the qualifying field, so it is required and validated.
   ========================================================================== */
.reqform{display:grid;grid-template-columns:1fr 1fr;gap:18px;text-align:left;
         max-width:640px;margin:32px auto 0}
.reqform .field{display:grid;gap:8px}
.reqform .field.full{grid-column:1/-1}
.reqform label{display:flex;align-items:baseline;gap:8px;
               font:500 12px/1 var(--font-body);color:#d4d4d8}
.reqform label .req{font:400 10px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;
                    color:var(--teal)}
.reqform label .opt{font:400 10px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;
                    color:var(--muted-2)}
.reqform input[type=url],.reqform input[type=email],.reqform input[type=text]{
  width:100%;height:46px;padding:0 16px;
  border:1px solid rgba(255,255,255,.14);border-radius:var(--r-sm);background:rgba(255,255,255,.04);
  font:400 14px/1 var(--font-body);color:var(--fg);
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.reqform input::placeholder{color:var(--muted-2)}
.reqform input:focus{outline:none;border-color:rgba(0,240,255,.5);background:rgba(255,255,255,.06);
                     box-shadow:0 0 0 3px rgba(0,240,255,.12)}
.reqform input[aria-invalid="true"]{border-color:#f97362;box-shadow:0 0 0 3px rgba(249,115,98,.12)}
.reqform .err{grid-column:1/-1;margin-top:-8px;color:#f97362;font-size:13px;line-height:1.5}
.reqform .actions{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:4px}
.reqform .actions .btn{min-width:180px}
.reqform .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
@media (max-width:640px){ .reqform{grid-template-columns:1fr} }
.reqform .formnote{grid-column:1/-1;text-align:left;margin-top:0;min-height:20px}

/* ---- the request page: two cards, equal width, equal height ---- */
.reqgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.2vw,32px);align-items:stretch}
/* grid children default to min-width:auto, so the comparison table's own min-width
   would push the whole page sideways instead of sitting inside its column. */
.reqgrid > *{min-width:0}
.reqcard{display:flex;flex-direction:column;gap:20px;overflow:hidden;
         border:1px solid var(--line);border-radius:var(--r-xl);
         padding:clamp(28px,3vw,44px);
         background:radial-gradient(120% 130% at 50% 0%,rgba(77,124,255,.07) 0%,rgba(7,7,15,0) 60%),rgba(10,10,10,.6)}
.reqcard > .eyebrow{margin-bottom:0}
.reqcard .fill{flex:1;min-height:0}
.reqcard .reqform{max-width:none;margin:0}
/* inside a half-width card the table frames itself against the card, not a second box */
.reqcard .tablewrap{border:0;border-radius:0;overflow:visible}
.reqcard table.cmp{min-width:0;background:none}
.reqcard table.cmp th,.reqcard table.cmp td{padding:13px 0;vertical-align:baseline}
.reqcard table.cmp thead{display:none}
.reqcard table.cmp tbody tr:first-child th,.reqcard table.cmp tbody tr:first-child td{padding-top:0}
.reqcard h3{font-size:16px;color:#fff;margin-bottom:8px}
.reqcard p{color:#a1a1aa;font-size:14.5px;line-height:1.7}
.reqcard .hr{height:1px;background:var(--line)}
@media (max-width:960px){ .reqgrid{grid-template-columns:1fr} }

/* ---- scroll to top (wave.js: fixed, appears once you are past the fold) ---- */
.totop{position:fixed;right:clamp(16px,2vw,32px);bottom:clamp(16px,2vw,32px);z-index:60;
       width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
       color:var(--blue);background:rgba(77,124,255,.14);border:1px solid rgba(77,124,255,.3);
       backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
       box-shadow:0 8px 30px -10px rgba(0,0,0,.8);
       opacity:0;transform:translateY(14px) scale(.94);pointer-events:none;
       transition:opacity .45s ease,transform .45s ease,background .2s ease,border-color .2s ease}
.totop.on{opacity:1;transform:none;pointer-events:auto}
.totop:hover{background:rgba(77,124,255,.26);border-color:rgba(77,124,255,.55);
             transform:translateY(-2px) scale(1.06)}
.totop svg{width:20px;height:20px;stroke:currentColor;stroke-width:2.5;fill:none;
           stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){
  .totop{transition:opacity .01s linear}
  .totop.on,.totop:hover{transform:none}
}
/* the contents read as the two halves the page actually has: get it running, then run it */
.doc nav.toc b.next{margin-top:26px}

/* ============================================================================
   Documentation legibility: every section announces itself, and the page's two
   halves are visible while scrolling rather than only in the contents.
   ========================================================================== */
.prose{counter-reset:sec}
.prose > section{counter-increment:sec;margin-top:18px;padding-top:50px;border-top:1px solid var(--line)}
.prose > section:first-child{margin-top:0;padding-top:0;border-top:0}
.prose > section > h2{margin-top:0}
.prose > section > h2::before{
  content:counter(sec,decimal-leading-zero);
  display:block;margin-bottom:12px;
  font:500 11px/1 var(--font-mono);letter-spacing:.22em;color:var(--teal);
  -webkit-text-fill-color:var(--teal);
}
/* the first paragraph of a section is its summary, so it is set like one */
.prose > section > h2 + p{color:#c8ccd2;font-size:16.5px;line-height:1.7}

/* the part heading owns the rule above it, so the section after it does not */
.part{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 16px;
      padding-top:62px;margin-top:26px;border-top:1px solid var(--line-2)}
.part:first-child{padding-top:0;margin-top:0;border-top:0}
.part span{font:500 10px/1 var(--font-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--muted-2)}
.part b{font:600 20px/1.2 var(--font-display);letter-spacing:-.02em;color:#fff}
.part + section{border-top:0;margin-top:0;padding-top:30px}
.reqform .hint{font:400 12.5px/1.55 var(--font-body);color:var(--muted-2)}
.reqform .hint.full{grid-column:1/-1;margin-top:-8px}

/* the fidelity claim: the one thing the hero has to land before anything else */
.hero .claim{margin:-6px auto 24px;max-width:22em;
             font:500 clamp(19px,2vw,27px)/1.3 var(--font-display);letter-spacing:-.02em;color:#fff}
.hero .claim em{font-style:normal;background-image:var(--grad-accent);
                -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* ============================================================================
   Pricing: four plans side by side, price first, then what the plan is for.
   ========================================================================== */
/* subgrid: every card shares the same six row tracks, so the state chip, the name,
   the price, the list, the rule above the descriptor and the button all sit on one
   line across the row. A reserved min-height cannot do this, because how many lines
   a descriptor takes changes with the column width. */
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
       border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.plans > *{min-width:0}
.plan{background:var(--panel);padding:clamp(22px,2.2vw,30px);gap:16px;
      display:grid;grid-template-rows:subgrid;grid-row:span 6;align-content:start;
      position:relative;transition:background .3s ease}
.plan:hover{background:#0f1012}
.plan.lit{background:radial-gradient(120% 120% at 50% 0%,rgba(77,124,255,.12) 0%,rgba(10,10,10,0) 55%),var(--panel)}
.plan .pname{font:600 16px/1 var(--font-display);letter-spacing:-.01em;color:#fff}
.plan .tag{position:absolute;top:0;right:0;padding:5px 12px;border-bottom-left-radius:10px;
           font:600 10px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;
           color:#000;background-image:var(--grad-accent)}
.plan .price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.plan .price b{font:700 clamp(30px,3vw,40px)/1 var(--font-display);letter-spacing:-.03em;color:#fff}
.plan .price span{font:400 12.5px/1.3 var(--font-mono);color:var(--muted)}
.plan ul{display:grid;gap:9px;margin-top:2px}
.plan li{position:relative;padding-left:20px;color:#a1a1aa;font-size:13.5px;line-height:1.55}
.plan li::before{content:"";position:absolute;left:2px;top:8px;width:5px;height:5px;border-radius:50%;
                 background:var(--blue)}
.plan li.no{color:var(--muted-2)}
.plan li.no::before{background:rgba(255,255,255,.18)}
/* stretch, not end: the rule is this box's top border, so the box has to fill its
   row track or a two-line descriptor pulls its rule up above the others. */
.plan .who{align-self:stretch;padding-top:14px;border-top:1px solid var(--line);
           font:400 12.5px/1.5 var(--font-body);color:var(--muted)}
@media (max-width:1000px){ .plans{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .plans{grid-template-columns:1fr} }

/* ============================================================================
   Showcase: a rail of conversions. It scrolls natively, so touch, trackpad and
   keyboard all work with the arrow buttons switched off; the buttons are a
   convenience on a mouse, not the mechanism.
   ========================================================================== */
.rail{position:relative}
.showcase{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 48px) / 3);gap:24px;
          overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
          scrollbar-width:none;-ms-overflow-style:none;padding:2px;
          /* swipe: momentum on older iOS, and contain so a flick past the last card
             does not hand the gesture to the browser's back-navigation */
          -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;touch-action:pan-x pan-y}
.showcase::-webkit-scrollbar{display:none}
.showcase:focus-visible{outline:2px solid var(--teal);outline-offset:6px;border-radius:var(--r-xl)}
.conv{scroll-snap-align:start;display:flex;flex-direction:column;overflow:hidden;
      border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);
      transition:border-color .3s ease,box-shadow .3s ease}
.conv:hover{border-color:rgba(255,255,255,.16);box-shadow:0 14px 44px -22px rgba(0,0,0,.9)}
.conv .shot{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--panel-2);
            border-bottom:1px solid var(--line)}
.conv .shot img{width:100%;height:100%;object-fit:cover;object-position:top center}
.conv .shot.empty{background-color:var(--panel-2);background-image:var(--dots);background-size:16px 16px;
                  display:grid;place-items:center}
.conv .shot.empty > span:first-child{font:400 10px/1 var(--font-mono);letter-spacing:.2em;
                                     text-transform:uppercase;color:var(--muted-2)}
.conv .badge{position:absolute;top:12px;right:12px;padding:5px 11px;border-radius:var(--r-full);
             font:500 10.5px/1 var(--font-mono);letter-spacing:.08em;
             color:#000;background-image:var(--grad-accent)}
.conv .body{padding:22px clamp(18px,1.8vw,24px);display:grid;gap:12px;flex:1;align-content:start}
.conv h3{font-size:16px;color:#fff;word-break:break-word}
.conv .when{font:400 12.5px/1 var(--font-mono);color:var(--muted)}
.conv .pills{display:flex;flex-wrap:wrap;gap:7px}
.conv .pills span{padding:5px 10px;border-radius:var(--r-full);border:1px solid var(--line);
                  background:rgba(255,255,255,.03);font:400 11.5px/1 var(--font-mono);color:#a1a1aa}
.conv .acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:auto;padding-top:6px}

/* the controls sit under the rail, centred, so they do not sit on top of a card */
.railnav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:26px}
.rn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
    color:var(--blue);background:rgba(77,124,255,.12);border:1px solid rgba(77,124,255,.3);
    transition:background .2s ease,border-color .2s ease,color .2s ease,opacity .2s ease}
.rn:hover:not(:disabled){background:rgba(77,124,255,.24);border-color:rgba(77,124,255,.55)}
.rn:disabled{opacity:.3;cursor:default;color:var(--muted-2);
             background:rgba(255,255,255,.03);border-color:var(--line)}
.rn svg{width:18px;height:18px;stroke:currentColor;stroke-width:2.5;fill:none;
        stroke-linecap:round;stroke-linejoin:round}
.railcount{font:400 12px/1 var(--font-mono);color:var(--muted);min-width:44px;text-align:center}
.railcount b{color:#fff;font-weight:400}

@media (max-width:1000px){ .showcase{grid-auto-columns:calc((100% - 24px) / 2)} }
/* On a phone the cards stack. The horizontal rail carried one card at 86% so
   the next one peeked in as a hint that it scrolls — but with no arrows and no
   dots, that hint reads as a card sliced off by the edge of the screen. Six
   cards down the page is longer and leaves nothing half-shown. */
@media (max-width:680px){
  .showcase{grid-auto-flow:row;grid-auto-columns:auto;overflow-x:visible;
            scroll-snap-type:none;gap:18px}
  .conv{scroll-snap-align:none}
  /* Nothing scrolls once the cards stack, so the pager has nothing to page. */
  .railnav{display:none}
}
@media (prefers-reduced-motion:reduce){ .showcase{scroll-behavior:auto} }
/* demo credentials read as something you type, not as emphasis. They sit on a line
   of their own so a wrap can never leave them dangling at the start of a sentence. */
.creds{display:grid;justify-items:center;gap:16px;margin-top:30px;text-align:center}
.creds .meta{max-width:58ch;margin:0}
.credline{display:inline-flex;align-items:center;gap:10px;margin:0;
          padding:8px 8px 8px 16px;border-radius:var(--r-full);
          border:1px solid var(--line);background:rgba(255,255,255,.03)}
.credlabel{font:500 10px/1 var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.credsep{color:var(--muted-2);font:400 13px/1 var(--font-mono)}
.cred{font:400 13px/1 var(--font-mono);color:var(--teal);
      padding:5px 10px;border-radius:6px;background:rgba(0,240,255,.08);border:1px solid rgba(0,240,255,.22)}

/* the GitHub mark sits between the version chip and the CTA, as on the wave.js nav */
.ghlink{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex:none;
        border-radius:8px;color:var(--muted);text-decoration:none;
        transition:color .2s ease,background .2s ease}
.ghlink:hover{color:#fff;background:rgba(255,255,255,.07)}
.ghlink svg{width:19px;height:19px;fill:currentColor}
/* the origin moved to the title, so the photo's top-right corner is free again */
.conv .badge.woo{background-image:none;background:rgba(139,92,246,.92);color:#fff;letter-spacing:.06em}
.conv .pills span.hot{color:var(--teal);border-color:rgba(0,240,255,.28);background:rgba(0,240,255,.07)}
/* which tier you can actually take today, said on the card itself */
.plan .state{align-self:start;justify-self:start;padding:5px 11px;border-radius:var(--r-full);
             font:500 10px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase}
.plan .state.open{color:var(--teal);background:rgba(0,240,255,.1);border:1px solid rgba(0,240,255,.28)}
.plan .state.beta{color:#f0b429;background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.28)}
/* the whole thumbnail opens the live site. It is a mouse convenience: the same
   destination already has a named link below, so this one is out of the tab order
   and hidden from assistive tech rather than repeated to it. */
.conv .shotlink{display:block;width:100%;height:100%}
.conv .shot img{transition:transform .55s cubic-bezier(.16,1,.3,1)}
.conv:hover .shot img{transform:scale(1.04)}
.conv .badge{pointer-events:none}
@media (prefers-reduced-motion:reduce){ .conv:hover .shot img{transform:none} }
/* the origin mark sits with the name, not on the photo: it says where the site came
   from, which belongs with what it is called, and it leaves the photo's corners for
   what the converted site itself carries */
.conv h3{display:flex;align-items:center;gap:9px}
.conv h3 .mark{width:15px;height:15px;flex:none;border-radius:3px;display:block}

/* --- the promo video: one automatic play, then a button --- */
.vonce{position:relative;display:block;line-height:0}
.vonce video{display:block;width:100%;height:auto;border-radius:inherit}
.vonce-btn{
  position:absolute;inset:0;margin:auto;width:64px;height:64px;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.28);border-radius:999px;
  background:rgba(10,12,20,.62);color:#fff;cursor:pointer;
  backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .18s ease,transform .18s ease;
}
.vonce-btn svg{transform:translateX(2px)}
.vonce.paused .vonce-btn{opacity:1;visibility:visible}
.vonce-btn:hover{transform:scale(1.06);background:rgba(10,12,20,.78)}
.vonce-btn:focus-visible{outline:2px solid #4ea1ff;outline-offset:3px}
@media (prefers-reduced-motion: reduce){
  .vonce-btn{transition:none}
}

/* --- the small-screen menu ---
   Below 940px the inline links are hidden (see above). Hiding navigation and
   putting nothing in its place is what this replaces: Docs, Pricing and
   Licences were unreachable on a phone.

   A full-screen dialog rather than a dropdown, in the same shape the converted
   demo sites use: numbered items, one Close, and enough room that a thumb is
   not aiming at a 13px line. */
/* Just the bars. No box: the button is 42px of tap target either way, and a
   border around three lines is a second thing to look at where one was asked
   for. justify-content is set explicitly — place-items carries align-items in
   a column flex but leaves the main axis alone, which stacked the bars at the
   top of the button rather than in the middle of it. */
.navburger{display:none;width:42px;height:42px;padding:0;margin-left:auto;
  background:transparent;border:0;border-radius:0;
  cursor:pointer;align-items:center;justify-content:center;gap:5px;flex-direction:column}
.navburger span{display:block;width:20px;height:2px;border-radius:2px;background:#fff;
  transition:transform .18s ease,opacity .18s ease}
.navburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.navburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.navburger:focus-visible{outline:2px solid #4ea1ff;outline-offset:3px}

.navmenu{position:fixed;inset:0;z-index:60;background:#0a0c12;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  animation:navmenu-in .22s ease}
@keyframes navmenu-in{from{opacity:0}to{opacity:1}}
.navmenu[hidden]{display:none}

.navmenu-close{position:absolute;top:22px;right:var(--pad);z-index:2;
  background:transparent;border:0;cursor:pointer;padding:8px;
  color:var(--muted);font:inherit;font-size:12px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase}
.navmenu-close:hover{color:#fff}
.navmenu-close:focus-visible{outline:2px solid #4ea1ff;outline-offset:3px}

.navmenu-inner{max-width:var(--rail);margin:0 auto;padding:88px var(--pad) 48px}
.navmenu ul{list-style:none;margin:0;padding:0}
.navmenu li + li{margin-top:4px}
.navmenu li a{display:flex;align-items:baseline;gap:16px;padding:12px 0;
  color:#e9edf5;font-size:30px;font-weight:600;letter-spacing:-.01em;line-height:1.15;
  text-decoration:none}
.navmenu li a .n{font-size:11px;font-weight:600;letter-spacing:.14em;
  color:var(--muted);min-width:22px}
.navmenu li a:hover{color:#fff}
.navmenu li a[aria-current="page"] .n{color:#4ea1ff}

.navmenu-foot{margin-top:38px;padding-top:26px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.navmenu-foot a:not(.btn){color:var(--muted);font-size:14px;font-weight:500;text-decoration:none}
.navmenu-foot a:not(.btn):hover{color:#fff}
.navmenu-foot .btn{margin-left:auto}

/* The panel takes over the viewport, so the page behind it must not scroll. */
body.navmenu-open{overflow:hidden}

@media (max-width:940px){ .navburger{display:flex} .nav-links .btn-sm{display:none} }
@media (max-width:420px){ .navmenu li a{font-size:26px} }
@media (prefers-reduced-motion:reduce){
  .navburger span{transition:none}
  .navmenu{animation:none}
}