/* =====================================================================
   Label Craft — landing page stylesheet
   Hand-written. No framework, no preprocessor, no build step.

   Contents
   01 Tokens          06 Hero + parallax
   02 Reset           07 Sections
   03 Type            08 Pricing
   04 Primitives      09 FAQ + footer
   05 Motion          10 Responsive
   ===================================================================== */

/* -- 01 Tokens -------------------------------------------------------- */
:root {
  /* Brand */
  --brand:        #1A51E5;
  --brand-700:    #1140B8;
  --brand-600:    #1747C4;
  --brand-400:    #5B87FF;
  --brand-300:    #8FADFF;
  --brand-100:    #DCE6FF;
  --brand-50:     #EEF3FF;

  /* Neutrals — "light black" + "light gray" from the brand palette */
  --ink:          #14161B;
  --ink-2:        #2A2F3A;
  --ink-3:        #565E6E;
  --ink-4:        #8A93A5;
  --line:         #E4E7EE;
  --line-soft:    #EFF1F5;
  --paper:        #FFFFFF;
  --paper-2:      #F6F7F9;
  --paper-3:      #EDEFF3;

  /* Dark surfaces (hero, CTA band, footer) */
  --night:        #080C18;
  --night-2:      #0D1425;
  --night-3:      #151E33;
  --night-line:   rgba(255,255,255,.10);
  --night-text:   #C3CBDC;

  /* Accents */
  --mint:         #12B981;
  --amber:        #F5A524;
  --rose:         #E5484D;

  /* Shape */
  --r-sm: 8px;  --r-md: 14px;  --r-lg: 20px;  --r-xl: 28px;  --r-pill: 999px;

  /* Elevation — tuned so cards feel printed on paper, not floating in space */
  --sh-1: 0 1px 2px rgba(20,22,27,.05), 0 1px 3px rgba(20,22,27,.05);
  --sh-2: 0 2px 4px rgba(20,22,27,.04), 0 8px 20px -6px rgba(20,22,27,.10);
  --sh-3: 0 4px 8px rgba(20,22,27,.05), 0 24px 48px -12px rgba(20,22,27,.16);
  --sh-brand: 0 8px 24px -6px rgba(26,86,232,.42);

  /* Rhythm */
  --pad: clamp(20px, 5vw, 40px);
  --wrap: 1200px;
  --wrap-narrow: 780px;
  --sec: clamp(72px, 10vw, 136px);

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);

  --font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* -- 02 Reset --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
:focus-visible { outline: 3px solid var(--brand-400); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--brand); color: #fff; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--brand); color: #fff; padding: 12px 20px; border-radius: 0 0 var(--r-md) 0;
}
.skip:focus { left: 0; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* -- 03 Type ---------------------------------------------------------- */
h1, h2, h3, h4 {
  color: var(--ink);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.028em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 6.4vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); letter-spacing: -.018em; line-height: 1.25; }
h4 { font-size: 1.02rem; letter-spacing: -.01em; }
p  { text-wrap: pretty; }

.lede { font-size: clamp(1.06rem, 1.7vw, 1.28rem); line-height: 1.62; color: var(--ink-3); }
.mono { font-family: var(--mono); font-size: .82em; letter-spacing: -.02em; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand);
}
.eyebrow::before {
  content: ""; width: 22px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--brand));
}

/* Gradient emphasis on a single word — used sparingly.
   The stops are repeated so the gradient tiles seamlessly, then the whole
   band is slid one full tile width. Because start and end are identical the
   loop has no visible seam, and animating background-position (not the
   gradient itself) keeps it off the main thread. */
.grad {
  background: linear-gradient(100deg,
    var(--brand-400) 0%, #FFFFFF 22%, var(--brand-300) 42%,
    var(--brand-400) 58%, #FFFFFF 78%, var(--brand-300) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gradFlow 7s linear infinite;
}
@keyframes gradFlow {
  from { background-position:   0% 50%; }
  to   { background-position: 200% 50%; }
}
.grad-ink {
  background: linear-gradient(100deg, var(--brand) 0%, #6D4AE8 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* -- 04 Primitives ---------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.narrow { max-width: var(--wrap-narrow); margin-inline: auto; }
.section { padding-block: var(--sec); position: relative; }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }
.center { text-align: center; }

.sec-head { max-width: 720px; margin-bottom: clamp(40px, 5vw, 68px); }
.sec-head.center { margin-inline: auto; }
.sec-head h2 { margin: 14px 0 16px; }

/* Buttons */
.btn {
  --bg: var(--brand); --fg: #fff;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 26px; border-radius: var(--r-pill);
  background: var(--bg); color: var(--fg);
  font-weight: 700; font-size: .96rem; letter-spacing: -.01em;
  white-space: nowrap; isolation: isolate; overflow: hidden;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), background .2s;
}
.btn--primary { box-shadow: var(--sh-brand); }
.btn--primary:hover { background: var(--brand-600); transform: translateY(-2px); box-shadow: 0 14px 34px -8px rgba(26,86,232,.55); }
.btn--primary:active { transform: translateY(0); }

/* A light sheen sweeps across on hover — a nod to a printhead pass */
.btn--primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .7s var(--ease-out);
}
.btn--primary:hover::after { transform: translateX(120%); }

.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink-4); background: var(--paper-2); transform: translateY(-2px); }

.btn--onDark { background: rgba(255,255,255,.08); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.18); backdrop-filter: blur(10px); }
.btn--onDark:hover { background: rgba(255,255,255,.15); transform: translateY(-2px); }

.btn--white { background: #fff; color: var(--brand); }
.btn--white:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -10px rgba(0,0,0,.4); }

.btn--sm { padding: 10px 18px; font-size: .88rem; }
.btn--lg { padding: 17px 34px; font-size: 1.02rem; }
.btn--block { display: flex; width: 100%; }

.btn svg { width: 17px; height: 17px; flex: none; transition: transform .3s var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }

/* Pills / chips */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 15px 7px 11px; border-radius: var(--r-pill);
  font-size: .8rem; font-weight: 600; letter-spacing: -.005em;
  background: var(--brand-50); color: var(--brand-700);
  box-shadow: inset 0 0 0 1px var(--brand-100);
}
.pill--dark { background: rgba(255,255,255,.07); color: #DCE6FF; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); backdrop-filter: blur(10px); }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 0 rgba(18,185,129,.6); animation: pulse 2.4s var(--ease) infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(18,185,129,0); } 100% { box-shadow: 0 0 0 0 rgba(18,185,129,0); } }

/* Cards */
.card {
  position: relative;
  background: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-1);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.card--hover:hover { transform: translateY(-5px); box-shadow: inset 0 0 0 1px var(--brand-100), var(--sh-3); }

/* Cursor-tracking spotlight; --mx/--my are set in JS */
.spot::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgba(26,86,232,.09), transparent 62%);
  opacity: 0; transition: opacity .4s var(--ease);
}
.spot:hover::before { opacity: 1; }

/* Icon tile */
.ico {
  display: grid; place-items: center; flex: none;
  width: 46px; height: 46px; border-radius: var(--r-md);
  background: linear-gradient(150deg, var(--brand-50), #fff);
  box-shadow: inset 0 0 0 1px var(--brand-100);
  color: var(--brand);
}
.ico svg { width: 22px; height: 22px; }
.ico--dark { background: linear-gradient(150deg, rgba(91,135,255,.20), rgba(255,255,255,.04)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); color: var(--brand-300); }

/* Grid helpers */
.grid { display: grid; gap: 20px; }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }

/* Hairline separators that fade at both ends */
.rule { height: 1px; background: linear-gradient(90deg, transparent, var(--line) 15%, var(--line) 85%, transparent); border: 0; }

/* Media placeholder chip — visible only while stock art is still in place */
.ph {
  position: absolute; z-index: 4; left: 12px; bottom: 12px;
  padding: 5px 11px; border-radius: var(--r-pill);
  background: rgba(8,12,24,.78); color: #fff; backdrop-filter: blur(8px);
  font-family: var(--mono); font-size: .66rem; letter-spacing: .01em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  opacity: .5; transition: opacity .25s;
}
.ph:hover { opacity: 1; }

/* -- 05 Motion -------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
[data-reveal].in { opacity: 1; transform: none; }

/* Safety net: reveal animations are progressive enhancement. If scripting
   is off the content must still be on screen, not invisibly waiting for an
   observer that will never run. main.js carries an equivalent guard for the
   case where scripting is on but something threw. */
.no-js [data-reveal] { opacity: 1 !important; transform: none !important; }
[data-reveal="scale"] { transform: translateY(26px) scale(.97); }
[data-reveal="left"]  { transform: translateX(-30px); }
[data-reveal="right"] { transform: translateX(30px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .parallax__layer { transform: none !important; }
  /* Continuous loops, not just entrance animations: the moving headline
     gradient and the video sheen both need pinning, and main.js leaves the
     product video paused. */
  .grad { animation: none !important; background-position: 0 50% !important; }
  .b-feature__sheen { display: none !important; }
}

/* -- Header ----------------------------------------------------------- */
.hdr {
  position: fixed; inset: 0 0 auto; z-index: 100;
  transition: background .35s var(--ease), box-shadow .35s var(--ease), backdrop-filter .35s;
}
.hdr__in { display: flex; align-items: center; gap: 20px; height: 74px; }
.hdr.is-stuck {
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  box-shadow: 0 1px 0 var(--line), 0 6px 24px -14px rgba(20,22,27,.35);
}

.brand { display: flex; align-items: center; gap: 11px; margin-right: auto; font-weight: 800; letter-spacing: -.03em; font-size: 1.12rem; color: #fff; transition: color .35s; }
.hdr.is-stuck .brand { color: var(--ink); }
/* No border-radius here: logo-mark.svg carries its own rounded corners
   (rx 87.74 on a 1241 viewBox). Adding CSS radius on top clips the corners
   twice and the mark reads as squashed. */
.brand img { width: 34px; height: 34px; }
.brand small { display: block; font-size: .6rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .6; margin-top: -2px; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  position: relative; padding: 9px 14px; border-radius: var(--r-pill);
  font-size: .92rem; font-weight: 600; color: rgba(255,255,255,.82);
  transition: color .25s, background .25s;
}
.nav a:hover { color: #fff; background: rgba(255,255,255,.10); }
.hdr.is-stuck .nav a { color: var(--ink-3); }
.hdr.is-stuck .nav a:hover { color: var(--ink); background: var(--paper-2); }

.hdr__cta { display: flex; align-items: center; gap: 10px; }
.hdr.is-stuck .btn--onDark { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); backdrop-filter: none; }
.hdr.is-stuck .btn--onDark:hover { background: var(--paper-2); }

/* Scroll progress hairline */
.progress { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; transform: scaleX(var(--p, 0)); transform-origin: 0 50%; background: linear-gradient(90deg, var(--brand), #6D4AE8); opacity: 0; transition: opacity .3s; }
.hdr.is-stuck .progress { opacity: 1; }

.burger { display: none; width: 42px; height: 42px; border-radius: var(--r-md); place-items: center; color: #fff; }
.hdr.is-stuck .burger { color: var(--ink); }
.burger span { display: block; width: 19px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s var(--ease), opacity .2s; }
.burger span + span { margin-top: 5px; }
body.menu-open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { opacity: 0; }
body.menu-open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* -- 06 Hero + parallax ----------------------------------------------- */
.hero {
  position: relative;
  min-height: min(104vh, 1020px);
  padding-top: clamp(130px, 17vh, 190px);
  padding-bottom: clamp(90px, 12vh, 150px);
  background: var(--night);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

.parallax { position: absolute; inset: -12% 0 -6%; z-index: -1; pointer-events: none; }
.parallax__layer { position: absolute; inset: 0; will-change: transform; }

/* L1 — video/photo bed, heavily darkened so type stays readable */
.p-media { inset: -8% -4%; }
.p-media img, .p-media video { width: 100%; height: 100%; object-fit: cover; opacity: .30; filter: saturate(.55) contrast(1.05); }
.p-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 85% at 50% 0%, rgba(8,12,24,.30), rgba(8,12,24,.86) 62%, var(--night) 100%),
    linear-gradient(180deg, rgba(8,12,24,.72) 0%, rgba(8,12,24,.55) 40%, var(--night) 96%);
}

/* L2 — brand aurora */
.p-glow { inset: -20%; }
.p-glow i {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(90px); opacity: .5; mix-blend-mode: screen;
}
.p-glow i:nth-child(1) { width: 46vw; height: 46vw; left: -6%;  top: 4%;   background: #1A51E5; }
.p-glow i:nth-child(2) { width: 38vw; height: 38vw; right: -4%; top: 20%;  background: #6D4AE8; opacity: .38; }
.p-glow i:nth-child(3) { width: 30vw; height: 30vw; left: 38%;  bottom: 2%; background: #0FA3B1; opacity: .26; }

/* L3 — engineering grid, the substrate a label is set out on */
.p-grid {
  inset: -30% -10%;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(115% 78% at 50% 32%, #000 20%, transparent 76%);
  -webkit-mask-image: radial-gradient(115% 78% at 50% 32%, #000 20%, transparent 76%);
}

/* L4 — drifting label chips */
.p-chips { inset: 0; }
.chip {
  position: absolute;
  padding: 11px 15px; border-radius: 12px;
  background: rgba(255,255,255,.055);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.13), 0 18px 42px -20px rgba(0,0,0,.9);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  font-size: .72rem; font-weight: 600; color: #E7ECF8; white-space: nowrap;
  display: flex; align-items: center; gap: 9px;
  animation: drift 9s var(--ease) infinite alternate;
}
.chip svg { width: 15px; height: 15px; color: var(--brand-300); flex: none; }
.chip b { color: #fff; font-weight: 700; }
.chip--1 { left: 3%;  top: 20%;  animation-delay: -.4s; }
.chip--2 { right: 4%; top: 15%;  animation-delay: -2.6s; }
.chip--3 { left: 7%;  bottom: 24%; animation-delay: -4.9s; }
.chip--4 { right: 6%; bottom: 30%; animation-delay: -1.7s; }
.chip--5 { right: 15%; top: 46%;  animation-delay: -6.2s; }
@keyframes drift { from { transform: translateY(-9px); } to { transform: translateY(9px); } }

/* Hero content */
.hero__in { position: relative; z-index: 2; text-align: center; }
.hero h1 { color: #fff; margin: 22px 0 22px; }
.hero h1 em { font-style: normal; position: relative; white-space: nowrap; }
.hero h1 em::after {
  content: ""; position: absolute; left: -2%; right: -2%; bottom: .06em; height: .30em;
  background: linear-gradient(90deg, rgba(26,86,232,.0), rgba(91,135,255,.55), rgba(109,74,232,.0));
  border-radius: 4px; z-index: -1;
  transform: scaleX(0); transform-origin: 0 50%;
  animation: sweep 1.1s .55s var(--ease-out) forwards;
}
@keyframes sweep { to { transform: scaleX(1); } }

.hero .lede { color: #B8C2D8; max-width: 660px; margin-inline: auto; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 13px; justify-content: center; margin-top: 34px; }
.hero__note { margin-top: 18px; font-size: .84rem; color: #7C88A3; }

/* Trust ticks under the fold */
.ticks { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin-top: 30px; font-size: .85rem; color: #97A2BA; }
.ticks li { display: flex; align-items: center; gap: 8px; }
.ticks svg { width: 15px; height: 15px; color: var(--mint); flex: none; }

/* The app screenshot — rises and levels out as you scroll */
.showcase { position: relative; z-index: 2; margin-top: clamp(48px, 7vw, 84px); perspective: 2200px; }
.showcase__frame {
  position: relative; border-radius: clamp(12px, 1.4vw, 18px); overflow: hidden;
  background: #0F1626;
  box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 60px 130px -40px rgba(0,0,0,.95), 0 0 90px -30px rgba(26,86,232,.55);
  transform: rotateX(var(--rx, 15deg)) scale(var(--sc, .92)) translateY(var(--ty, 0px));
  transform-origin: 50% 0%;
  transition: transform .12s linear;
}
.showcase__bar { display: flex; align-items: center; gap: 8px; padding: 11px 14px; background: rgba(255,255,255,.04); border-bottom: 1px solid rgba(255,255,255,.07); }
.showcase__bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.16); }
.showcase__bar span { margin-left: 10px; font-family: var(--mono); font-size: .68rem; color: #7C88A3; }
.showcase__frame img { width: 100%; }

/* Glow puddle beneath the frame */
.showcase::after {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: -46px; height: 90px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(26,86,232,.42), transparent 70%);
  filter: blur(26px); z-index: -1;
}

/* -- Marquee ---------------------------------------------------------- */
.marquee { overflow: hidden; padding-block: 28px; mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.marquee__track { display: flex; gap: 56px; width: max-content; animation: slide 38s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.02rem; letter-spacing: -.02em; color: var(--ink-4); white-space: nowrap; }
.marquee__track svg { width: 19px; height: 19px; opacity: .55; }
@keyframes slide { to { transform: translateX(-50%); } }

/* -- 07 Sections ------------------------------------------------------ */

/* Stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-2); }
.stat { background: var(--paper); padding: 30px 26px; text-align: center; }
.stat b { display: block; font-size: clamp(2rem, 3.4vw, 2.9rem); font-weight: 800; letter-spacing: -.04em; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
.stat b i { font-style: normal; color: var(--brand); }
.stat span { display: block; margin-top: 9px; font-size: .86rem; color: var(--ink-3); }

/* Before / after */
.vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; align-items: stretch; }
.vs__col { padding: 34px; }
.vs__col--old { background: var(--paper-2); border-radius: var(--r-lg) 0 0 var(--r-lg); box-shadow: inset 0 0 0 1px var(--line); }
.vs__col--new { background: linear-gradient(160deg, #0D1425, #131C31); color: #fff; border-radius: 0 var(--r-lg) var(--r-lg) 0; box-shadow: var(--sh-3); }
.vs__col--new h3 { color: #fff; }
.vs__mid { display: grid; place-items: center; width: 66px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); }
.vs__mid b { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--brand); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .04em; box-shadow: var(--sh-brand); }
.vs__col h3 { margin-bottom: 20px; }
.vs__list li { display: flex; gap: 12px; padding: 11px 0; font-size: .95rem; line-height: 1.5; border-top: 1px solid var(--line); }
.vs__col--new .vs__list li { border-color: rgba(255,255,255,.09); color: var(--night-text); }
.vs__list li:first-child { border-top: 0; }
.vs__list svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.vs__col--old svg { color: var(--rose); }
.vs__col--new svg { color: var(--mint); }

/* Bento feature grid */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.bento .card { padding: 28px; display: flex; flex-direction: column; overflow: hidden; }
.bento .card h3 { margin: 18px 0 9px; }
.bento .card p { font-size: .95rem; color: var(--ink-3); }
.b-4 { grid-column: span 4; }
.b-3 { grid-column: span 3; }
.b-2 { grid-column: span 2; }

/* Wide hero card inside the bento: copy left, product loop right.
   Scoped to .bento so it outranks the generic `.bento .card` rule above,
   which would otherwise win on specificity and force display:flex back. */
.bento .b-feature {
  grid-column: span 6;
  background: linear-gradient(150deg, var(--brand) 0%, #2E63EE 45%, #6D4AE8 100%);
  color: #fff;
  box-shadow: var(--sh-3);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 340px);
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
  padding: clamp(28px, 3.4vw, 40px);
}
.bento .b-feature__text { display: flex; flex-direction: column; min-width: 0; }
.bento .b-feature h3 { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2rem); }
/* Full white, not 86%: against this gradient the tinted version read as
   washed out rather than as deliberate hierarchy. */
.bento .b-feature p { color: #fff; max-width: 52ch; }
.bento .b-feature .ico { background: rgba(255,255,255,.15); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); color: #fff; }

/* Video panel.
   The source is a square clip in its own colours. `luminosity` keeps its
   motion and detail but takes hue from the card underneath, so it reads as
   part of the gradient instead of a rectangle pasted on top. A radial mask
   softens the edges so there is no hard seam. */
.b-feature__video {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.20), 0 24px 60px -24px rgba(6,10,30,.85);
  isolation: isolate;
  /* No watermark behind the video. The clip is itself a logo animation, so a
     logo underneath it ghosted through as a grey second mark. The panel's
     frosted fill, tint and sheen carry it on their own if the video is ever
     held back by reduced-motion or a blocked autoplay. */
}
/* Explicit stacking inside the panel: video -> colour tint -> sheen.
   Without the z-indexes the tint paints under the video and the blend
   does nothing. */
.b-feature__video video { position: relative; z-index: 1; }
.b-feature__video video {
  width: 100%; height: 100%; object-fit: cover;
  mix-blend-mode: luminosity;
  transform: scale(1.02);            /* hides any edge fringing from the mask */
}
/* Re-tints the blended result back towards brand blue and feathers the edges */
.b-feature__video::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    radial-gradient(120% 120% at 50% 40%, transparent 52%, rgba(26,81,229,.55) 100%),
    linear-gradient(150deg, rgba(26,81,229,.28), rgba(109,74,232,.34));
  mix-blend-mode: overlay;
}
/* Slow diagonal sheen — a printhead pass across the panel */
.b-feature__sheen {
  position: absolute; inset: -40%; pointer-events: none; z-index: 3;
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.16) 50%, transparent 58%);
  transform: translateX(-60%);
  animation: sheen 6.5s var(--ease) infinite;
}
@keyframes sheen { 0%, 55% { transform: translateX(-60%); } 100% { transform: translateX(60%); } }

/* Animated barcode motif */
.barcode { display: flex; align-items: flex-end; gap: 3px; height: 52px; margin-top: 24px; }
.barcode i { display: block; width: 3px; border-radius: 1px; background: currentColor; opacity: .35; animation: scan 2.6s var(--ease) infinite; }
@keyframes scan { 0%, 100% { opacity: .22; } 50% { opacity: .9; } }

/* Feature deep-dive tabs */
.tabs { display: grid; grid-template-columns: 380px 1fr; gap: 44px; align-items: start; }
.tabs__list { display: flex; flex-direction: column; gap: 6px; position: sticky; top: 104px; }
.tab {
  position: relative; text-align: left; padding: 18px 20px 18px 22px; border-radius: var(--r-md);
  transition: background .3s var(--ease);
}
.tab::before {
  content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 3px;
  background: var(--brand); transform: scaleY(0); transform-origin: 50% 0;
  transition: transform .4s var(--ease-out);
}
.tab h3 { font-size: 1.06rem; color: var(--ink-3); transition: color .25s; }
.tab p { font-size: .9rem; color: var(--ink-4); margin-top: 6px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .45s var(--ease-out), opacity .35s, margin .35s; }
.tab[aria-selected="true"] { background: var(--paper-2); }
.tab[aria-selected="true"]::before { transform: scaleY(1); }
.tab[aria-selected="true"] h3 { color: var(--ink); }
.tab[aria-selected="true"] p { max-height: 120px; opacity: 1; }

.tabs__panels { position: relative; }
.panel { display: none; }
.panel.is-active { display: block; animation: fadeUp .55s var(--ease-out); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.panel__shot { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line), var(--sh-3); }
.panel__shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.panel__pts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 26px; margin-top: 26px; }
.panel__pts li { display: flex; gap: 11px; font-size: .93rem; color: var(--ink-3); }
.panel__pts svg { width: 17px; height: 17px; color: var(--brand); flex: none; margin-top: 3px; }

/* Speed strip */
.speed { background: var(--night); color: #fff; border-radius: var(--r-xl); padding: clamp(38px, 5vw, 64px); position: relative; overflow: hidden; }
.speed::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 120% at 12% 0%, rgba(26,86,232,.42), transparent 62%);
}
.speed > * { position: relative; }
.speed h2 { color: #fff; }
.speed .lede { color: var(--night-text); }
.speed__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 42px; }
.speed__cell { padding: 24px; border-radius: var(--r-md); background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.10); }
.speed__cell b { display: block; font-size: 2rem; font-weight: 800; letter-spacing: -.04em; color: #fff; font-variant-numeric: tabular-nums; }
.speed__cell b i { font-style: normal; font-size: .55em; color: var(--brand-300); margin-left: 2px; }
.speed__cell span { display: block; margin-top: 7px; font-size: .85rem; color: #93A0BA; }

/* Steps */
.steps { counter-reset: s; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }

/* The rule sits on the top edge, the numeral is pushed clear of it.
   Previously the numeral's negative offset let its ascenders collide with
   the line, which read as a rendering fault rather than a design choice. */
.step { position: relative; padding-top: 92px; }
.step__line { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line); }
.step::before {
  counter-increment: s; content: "0" counter(s);
  position: absolute; top: 26px; left: 0;
  line-height: 1;
  font-family: var(--mono); font-size: 2.6rem; font-weight: 500;
  color: var(--brand); opacity: .2; letter-spacing: -.06em;
}
.step h3 { margin-bottom: 10px; }
.step p { font-size: .95rem; color: var(--ink-3); }
.step__line::after { content: ""; position: absolute; inset: 0; width: var(--fill, 0%); background: var(--brand); transition: width 1.2s var(--ease-out); }

/* Use-case cards */
.uses { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.use { position: relative; border-radius: var(--r-lg); overflow: hidden; min-height: 340px; display: flex; align-items: flex-end; box-shadow: var(--sh-2); isolation: isolate; }
.use img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .8s var(--ease-out); }
.use::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8,12,24,.05) 20%, rgba(8,12,24,.82) 78%, rgba(8,12,24,.94)); }
.use:hover img { transform: scale(1.07); }
.use__body { padding: 24px; color: #fff; }
.use__body h3 { color: #fff; font-size: 1.15rem; }
.use__body p { font-size: .88rem; color: rgba(255,255,255,.78); margin-top: 7px; }

/* Testimonials */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.quote { padding: 30px; display: flex; flex-direction: column; gap: 20px; }
.quote blockquote { font-size: 1.02rem; line-height: 1.55; color: var(--ink); letter-spacing: -.012em; flex: 1; }
.quote figcaption { display: flex; align-items: center; gap: 12px; }
.quote .av { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-50); color: var(--brand-700); font-weight: 800; font-size: .9rem; box-shadow: inset 0 0 0 1px var(--brand-100); flex: none; }
.quote cite { font-style: normal; font-weight: 700; font-size: .92rem; color: var(--ink); display: block; }
.quote small { color: var(--ink-4); font-size: .82rem; }
.stars { display: flex; gap: 2px; color: var(--amber); }
.stars svg { width: 15px; height: 15px; }

/* -- 08 Pricing ------------------------------------------------------- */
/* stretch, not start: the four cards share a row, so they share a height.
   With `start` each card sized to its own content and the bottoms ragged. */
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: stretch; }
.plan { padding: 30px 26px; display: flex; flex-direction: column; height: 100%; }

/* The featured card sits flush with the other three. It previously lifted
   10px, which is exactly what knocked its CTA out of line with the rest —
   and the dark fill, badge and glow already mark it out without moving it. */
.plan--featured {
  background: linear-gradient(170deg, #0D1425, #16203A);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,.10), var(--sh-3), 0 0 70px -30px rgba(26,86,232,.8);
}
.plan--featured h3, .plan--featured .plan__price b { color: #fff; }
.plan--featured .plan__blurb, .plan--featured .plan__limits { color: #A9B4CB; }
.plan__badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  padding: 5px 14px; border-radius: var(--r-pill); background: var(--brand); color: #fff;
  font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
  box-shadow: var(--sh-brand);
}
.plan h3 { font-size: 1.2rem; }
.plan__price { display: flex; align-items: baseline; gap: 7px; margin: 16px 0 4px; }
.plan__price b { font-size: 2.5rem; font-weight: 800; letter-spacing: -.045em; color: var(--ink); line-height: 1; }
.plan__price span { font-size: .85rem; color: var(--ink-4); }
/* These two blocks are the only variable-height content above the button.
   Reserving the taller case in both means every CTA lands on the same line
   whatever each plan's wording happens to be. Blurb: 3 lines. Limits: 2. */
.plan__blurb { font-size: .9rem; color: var(--ink-3); margin: 12px 0 16px; min-height: 3.4em; }
.plan__limits {
  font-size: .8rem; font-weight: 600; color: var(--ink-3);
  padding: 10px 12px; border-radius: var(--r-sm); background: var(--paper-2);
  margin-bottom: 20px;
  min-height: calc(3.2em + 20px);   /* 2 lines at 1.6 line-height + padding */
  display: flex; align-items: center;
}
.plan--featured .plan__limits { background: rgba(255,255,255,.06); }
.plan .btn { margin-bottom: 22px; }
.plan__feats { display: flex; flex-direction: column; gap: 10px; font-size: .87rem; }
.plan__feats li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-3); }
.plan--featured .plan__feats li { color: var(--night-text); }
.plan__feats svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--mint); }
.plan__feats li.off { opacity: .42; text-decoration: line-through; text-decoration-color: var(--ink-4); }
.plan__feats li.off svg { color: var(--ink-4); }

/* True row alignment across the four cards.
   The min-heights above get the common cases lined up, but they cannot cover
   every wrap — at ~1100px the Group card's limits run to three lines while
   the rest take two, and the CTAs drift apart again. Subgrid fixes it
   properly: each card adopts the parent's row tracks, so every band (name,
   price, blurb, limits, CTA, features) is sized by the tallest card and all
   four stay locked together whatever the copy does.

   Scoped to the four-across breakpoint, where the cards occupy exactly one
   grid row so the parent needs exactly six tracks. row-gap is zeroed because
   the elements already carry their own margins. */
@media (min-width: 1081px) {
  @supports (grid-template-rows: subgrid) {
    .plans {
      grid-template-rows: auto auto auto auto auto 1fr;
      column-gap: 18px;
      row-gap: 0;
    }
    .plan {
      display: grid;
      grid-row: span 6;
      grid-template-rows: subgrid;
      row-gap: 0;
      height: auto;
    }
  }
}

/* Price note */
.price-note { margin-top: 30px; padding: 20px 24px; border-radius: var(--r-md); background: var(--brand-50); box-shadow: inset 0 0 0 1px var(--brand-100); font-size: .9rem; color: var(--brand-700); display: flex; gap: 13px; align-items: flex-start; }
.price-note svg { width: 19px; height: 19px; flex: none; margin-top: 2px; }

/* Comparison table */
/* min-width forces the table to scroll inside .table-scroll on a phone
   rather than squashing four columns into 375px and becoming unreadable. */
.cmp { width: 100%; min-width: 660px; border-collapse: collapse; font-size: .92rem; }
.cmp th, .cmp td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--line); }
.cmp thead th { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); font-weight: 700; }
.cmp tbody th { font-weight: 600; color: var(--ink); }
.cmp td { text-align: center; width: 130px; }
.cmp .yes { color: var(--mint); font-weight: 700; }
.cmp .no  { color: var(--ink-4); }

/* The icons carry no width/height attributes, so without this they fall back
   to the SVG default box and tower over the row. Sized down and centred, with
   a slightly heavier stroke so they stay crisp at 15px. */
.cmp td span { display: inline-flex; align-items: center; justify-content: center; }
.cmp td svg  { width: 15px; height: 15px; stroke-width: 2.6; }
.cmp .no svg { stroke-width: 2.2; opacity: .55; }
.cmp .col-us { background: var(--brand-50); }
.cmp thead .col-us { color: var(--brand-700); border-radius: var(--r-md) var(--r-md) 0 0; }
.cmp tbody tr:last-child td, .cmp tbody tr:last-child th { border-bottom: 0; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--line); }

/* -- 09 FAQ + CTA + footer -------------------------------------------- */
.faq { display: grid; gap: 0; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; gap: 18px; justify-content: space-between;
  padding: 22px 4px; cursor: pointer; list-style: none;
  font-weight: 700; font-size: 1.04rem; color: var(--ink); letter-spacing: -.015em;
  transition: color .2s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--brand); }
.faq summary i {
  position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--paper-2); transition: background .3s, transform .4s var(--ease-spring);
}
.faq summary i::before, .faq summary i::after {
  content: ""; position: absolute; inset: 50% 7px auto; height: 2px; border-radius: 2px; background: var(--ink-3); transform: translateY(-50%); transition: transform .35s var(--ease), background .3s;
}
.faq summary i::after { transform: translateY(-50%) rotate(90deg); }
.faq details[open] summary { color: var(--brand); }
.faq details[open] summary i { background: var(--brand); transform: rotate(180deg); }
.faq details[open] summary i::before, .faq details[open] summary i::after { background: #fff; }
.faq details[open] summary i::after { transform: translateY(-50%) rotate(0deg); }
.faq__a { padding: 0 60px 24px 4px; color: var(--ink-3); font-size: .97rem; line-height: 1.65; animation: fadeUp .4s var(--ease-out); }

/* CTA band */
.cta {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--night); color: #fff; border-radius: var(--r-xl);
  padding: clamp(46px, 7vw, 88px) clamp(28px, 5vw, 72px); text-align: center;
}
.cta::before {
  content: ""; position: absolute; inset: -50% -10%; z-index: -1;
  background: conic-gradient(from 180deg at 50% 50%, rgba(26,86,232,.55), rgba(109,74,232,.35), rgba(15,163,177,.30), rgba(26,86,232,.55));
  filter: blur(80px); opacity: .65;
  animation: spin 28s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.cta::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(90% 70% at 50% 50%, #000, transparent 78%);
  -webkit-mask-image: radial-gradient(90% 70% at 50% 50%, #000, transparent 78%);
}
.cta h2 { color: #fff; }
.cta p { color: var(--night-text); max-width: 56ch; margin: 16px auto 0; }
.cta__row { display: flex; flex-wrap: wrap; gap: 13px; justify-content: center; margin-top: 32px; }

/* Lead form */
.lead { max-width: 520px; margin: 28px auto 0; }
.lead__row { display: flex; gap: 10px; }
.lead input {
  flex: 1; min-width: 0; padding: 15px 18px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.08); color: #fff;
  border: 1.5px solid rgba(255,255,255,.16);
  transition: border-color .25s, background .25s;
}
.lead input::placeholder { color: #7C88A3; }
.lead input:focus { outline: none; border-color: var(--brand-400); background: rgba(255,255,255,.13); }
.lead__msg { margin-top: 12px; font-size: .86rem; min-height: 1.3em; }
.lead__msg.ok { color: #6EE7B7; }
.lead__msg.err { color: #FCA5A5; }
.lead__fine { margin-top: 12px; font-size: .76rem; color: #6E7A94; }
.hp { position: absolute; left: -9999px; opacity: 0; }

/* Footer */
/* Footer carries the hero's measurement grid, so the page opens and closes on
   the same surface. Masked from the top edge downwards so it fades out rather
   than fighting the link columns. */
.ftr {
  position: relative;
  background: var(--night);
  color: var(--night-text);
  padding-top: clamp(56px, 7vw, 88px);
  isolation: isolate;
  overflow: hidden;
}
.ftr::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(120% 92% at 50% 0%, #000 12%, transparent 74%);
  -webkit-mask-image: radial-gradient(120% 92% at 50% 0%, #000 12%, transparent 74%);
}
/* A single brand glow behind the grid, matching the hero's aurora layer */
.ftr::after {
  content: ""; position: absolute; z-index: -2; pointer-events: none;
  left: 50%; top: -30%; width: min(760px, 90vw); aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(26,81,229,.30), transparent 62%);
  filter: blur(50px);
}
.ftr__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; }
.ftr h4 { color: #fff; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 16px; }
.ftr ul { display: flex; flex-direction: column; gap: 11px; }
.ftr a { font-size: .92rem; color: #93A0BA; transition: color .2s; }
.ftr a:hover { color: #fff; }
.ftr__brand { max-width: 320px; }
.ftr__brand .brand { color: #fff; margin-bottom: 16px; }
.ftr__brand p { font-size: .9rem; color: #7C88A3; }
.ftr__social { display: flex; gap: 9px; margin-top: 20px; }
.ftr__social a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r-sm); background: rgba(255,255,255,.06); color: #A9B4CB; transition: background .25s, color .25s, transform .25s; }
.ftr__social a:hover { background: var(--brand); color: #fff; transform: translateY(-2px); }
.ftr__social svg { width: 17px; height: 17px; }
.ftr__bar { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; padding: 22px 0 30px; border-top: 1px solid var(--night-line); font-size: .84rem; color: #6E7A94; }
.ftr__bar nav { display: flex; gap: 20px; flex-wrap: wrap; }

/* Back to top */
.top {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: #fff; box-shadow: var(--sh-3);
  opacity: 0; visibility: hidden; transform: translateY(12px) scale(.85);
  transition: all .35s var(--ease-out);
}
.top.show { opacity: 1; visibility: visible; transform: none; }
.top:hover { background: var(--brand); }
.top svg { width: 19px; height: 19px; }

/* -- 10 Responsive ---------------------------------------------------- */
@media (max-width: 1080px) {
  .tabs { grid-template-columns: 1fr; }
  .tabs__list { position: static; flex-direction: row; overflow-x: auto; padding-bottom: 6px; gap: 8px; scrollbar-width: none; }
  .tabs__list::-webkit-scrollbar { display: none; }
  .tab { flex: none; width: 240px; padding-left: 20px; }
  .tab::before { top: auto; bottom: 0; left: 14px; right: 14px; width: auto; height: 3px; transform: scaleX(0); transform-origin: 0 50%; }
  .tab[aria-selected="true"]::before { transform: scaleX(1); }
  .tab p { display: none; }
  .plans { grid-template-columns: repeat(2, 1fr); }
  .uses, .stats, .speed__grid { grid-template-columns: repeat(2, 1fr); }
  .b-4, .b-3, .b-2 { grid-column: span 3; }
  .bento .b-feature { grid-template-columns: 1fr; }
  .b-feature__video { max-width: 300px; margin-inline: auto; width: 100%; }
}

@media (max-width: 860px) {
  body { font-size: 16px; }
  .nav, .hdr__cta .btn--onDark { display: none; }
  .burger { display: grid; }

  /* Mobile drawer */
  .nav.is-open {
    display: flex; flex-direction: column; align-items: stretch; gap: 4px;
    position: fixed; inset: 74px 0 auto; padding: 18px var(--pad) 26px;
    background: rgba(255,255,255,.97); backdrop-filter: blur(20px);
    box-shadow: 0 20px 40px -20px rgba(20,22,27,.4); border-top: 1px solid var(--line);
    animation: fadeUp .3s var(--ease-out);
  }
  .nav.is-open a { color: var(--ink); padding: 13px 14px; font-size: 1.02rem; }

  .vs { grid-template-columns: 1fr; }
  .vs__col--old { border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .vs__col--new { border-radius: 0 0 var(--r-lg) var(--r-lg); }
  .vs__mid { width: auto; height: 58px; }
  .steps, .quotes, .panel__pts { grid-template-columns: 1fr; }
  .b-4, .b-3, .b-2, .b-feature { grid-column: span 6; }
  .b-feature__video { max-width: 240px; }
  .faq__a { padding-right: 8px; }
  .chip--3, .chip--4, .chip--5 { display: none; }
  .chip--1 { left: -2%; top: 12%; }
  .chip--2 { right: -2%; top: 8%; }
  .ftr__top { grid-template-columns: 1fr 1fr; }
  .ftr__brand { grid-column: span 2; }
  .lead__row { flex-direction: column; }
}

@media (max-width: 560px) {
  .plans, .uses, .stats, .speed__grid { grid-template-columns: 1fr; }
  .hero { min-height: auto; }
  .hero__cta .btn { width: 100%; }
  .p-chips { display: none; }
}

/* Print — nobody prints a landing page, but if they do, make it readable */
@media print {
  .hdr, .top, .parallax, .marquee, .cta::before { display: none !important; }
  body { color: #000; background: #fff; }
  .hero, .speed, .ftr, .plan--featured { background: #fff !important; color: #000 !important; }
}