/* ==========================================================================
   VPNDX — components.css
   Cross-page components: tabs, toc, faq, plan cards, node table,
   platform cards, article cards, callouts, promo block, float CTA,
   hero device, stats band, preview helpers.
   ========================================================================== */

/* ------------------------------------------------------------------ tabs */
.tabs{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-bottom:0;
}
.tab{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:64px;
  padding:14px 18px;
  background:var(--panel);
  color:var(--text);
  border:0;
  border-radius:var(--r);
  cursor:pointer;
  font:700 18px/1.25 var(--font-display);
  letter-spacing:-.01em;
  text-align:center;
  transition:background-color .15s ease, color .15s ease;
}
.tab:hover{background:var(--panel-2)}
.tab[aria-selected="true"]{background:var(--cyan);color:var(--text)}
.tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tab-panel[hidden]{display:none}
.tab-panel{
  background:var(--panel);
  border-radius:var(--r);
  box-shadow:var(--shadow-soft);
  padding:32px;
  margin-top:12px;
}

/* --------------------------------------------------------------- feature */
.feature-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:40px;
  align-items:start;
}
.feature-list{display:block}
.feature-item{
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:16px;
  padding:22px 0;
  border-bottom:1px solid var(--border);
}
.feature-item:first-child{padding-top:0}
.feature-item:last-child{border-bottom:0;padding-bottom:0}
.feature-ico{
  width:44px;
  height:44px;
  border-radius:var(--r-sm);
  background:var(--candy-blue);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--accent-dark);
  flex:none;
}
.feature-ico svg{width:20px;height:20px}
.feature-item h3{margin:0 0 8px;font-size:19px}
.feature-item p{margin:0 0 14px;font-size:15px;line-height:1.65;color:var(--muted)}
.feature-more{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:8px 14px;
  background:var(--text);
  color:var(--panel);
  border-radius:var(--r-sm);
  font:600 11px/1 var(--font-mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
}
.feature-more:hover{background:var(--accent-dark);color:var(--panel);text-decoration:none}

/* ------------------------------------------------------- window mockups */
.stage{position:relative;min-width:0;padding-bottom:56px}
.window{
  position:relative;
  background:var(--panel);
  border-radius:var(--r);
  box-shadow:var(--shadow-accent);
  overflow:hidden;
}
.window-bar{
  display:flex;
  align-items:center;
  gap:6px;
  padding:10px 14px;
  background:var(--panel-2);
  border-bottom:1px solid var(--border);
}
.window-bar i{display:block;width:9px;height:9px;border-radius:50%;flex:none}
.window-bar i:nth-child(1){background:var(--error)}
.window-bar i:nth-child(2){background:var(--warn)}
.window-bar i:nth-child(3){background:var(--success)}
.window-bar span{
  margin-left:auto;
  font:600 10px/1 var(--font-mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.window-body{padding:6px 0}
.line-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 16px;
  border-bottom:1px solid var(--border-soft);
  font-size:13px;
}
.line-row:last-child{border-bottom:0}
.line-row .flag-svg{flex:none}
.line-name{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.line-tier{
  margin-left:auto;
  flex:none;
  font:600 10px/1 var(--font-mono);
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:4px 8px;
  border-radius:var(--r-sm);
  background:var(--panel-2);
  color:var(--text);
}
.line-tier--iepl{background:var(--candy-orange)}
.line-tier--relay{background:color-mix(in srgb, var(--accent) 16%, var(--panel));color:var(--accent-dark)}
.line-tier--direct{background:var(--candy-blue)}
.dot{
  width:8px;
  height:8px;
  border-radius:50%;
  flex:none;
  background:var(--success);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--success) 18%, transparent);
}
.dot--warn{background:var(--warn);box-shadow:0 0 0 3px color-mix(in srgb, var(--warn) 18%, transparent)}
.term{
  position:absolute;
  left:0;
  bottom:0;
  z-index:3;
  width:min(300px, 88%);
  padding:9px 14px 12px;
  background:var(--terminal);
  color:var(--terminal-text);
  border-radius:var(--r);
  font:500 12px/1.75 var(--font-mono);
  box-shadow:var(--shadow-deep);
}
.term-bar{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.term-bar i{display:block;width:8px;height:8px;border-radius:50%;flex:none}
.term-bar i:nth-child(1){background:var(--error)}
.term-bar i:nth-child(2){background:var(--warn)}
.term-bar i:nth-child(3){background:var(--success)}
.term-bar span{
  margin-left:auto;
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:color-mix(in srgb, var(--terminal-text) 55%, transparent);
}
.term p{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-prompt{color:var(--cyan)}
.t-ok{color:var(--success)}

/* ------------------------------------------------------------ toc tabs */
.toc-tabs{
  position:sticky;
  top:0;
  z-index:12;
  display:flex;
  gap:8px;
  overflow-x:auto;
  max-width:100%;
  -webkit-overflow-scrolling:touch;
  padding:10px 0;
  margin-bottom:24px;
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--border);
}
.toc-tabs a{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:8px 14px;
  border-radius:var(--r-pill);
  background:var(--panel);
  color:var(--muted);
  font-size:13px;
  font-weight:500;
  white-space:nowrap;
  flex:none;
  text-decoration:none;
}
.toc-tabs a:hover{color:var(--text);text-decoration:none}
.toc-tabs a.is-current{background:var(--cyan);color:var(--text);font-weight:600}
body:has(.toc-tabs) section[id],
body:has(.toc-tabs) h2[id],
body:has(.toc-tabs) h3[id]{scroll-margin-top:calc(var(--header-h) + 76px)}

/* ------------------------------------------------------------------ faq */
.faq{border-top:1px solid var(--border)}
.faq details{
  border-bottom:1px solid var(--border);
  padding:4px 0;
}
.faq summary{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:52px;
  padding:14px 0;
  cursor:pointer;
  font:700 17px/1.4 var(--font-display);
  color:var(--text);
  list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";
  margin-left:auto;
  flex:none;
  font:600 20px/1 var(--font-mono);
  color:var(--accent);
  transition:transform .2s ease;
}
.faq details[open] summary::after{content:"−"}
.faq .faq-body{padding:0 0 20px;font-size:15px;line-height:1.7;color:var(--muted);max-width:62em}
.faq .faq-body p:last-child{margin-bottom:0}

/* ------------------------------------------------------------ plan card */
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.plan-grid > *{min-width:0}
.plan{
  position:relative;
  background:var(--panel);
  border-radius:var(--r);
  padding:28px;
  box-shadow:var(--shadow-soft);
  display:flex;
  flex-direction:column;
  min-width:0;
}
.plan::before{
  content:"";
  position:absolute;
  top:0;left:28px;
  width:64px;height:3px;
  border-radius:0 0 2px 2px;
  background:var(--accent);
}
.plan--featured{background:var(--candy-blue)}
.plan--current{box-shadow:inset 0 0 0 2px var(--accent), var(--shadow-soft)}
.plan-badge{
  position:absolute;
  top:14px;right:14px;
  padding:5px 10px;
  border-radius:var(--r-sm);
  background:var(--text);
  color:var(--panel);
  font:600 10px/1 var(--font-mono);
  letter-spacing:.14em;
  text-transform:uppercase;
}
.plan-name{margin:0 0 6px;font-size:18px;font-weight:700}
.plan-price{
  margin:0 0 4px;
  font:800 44px/1 var(--font-display);
  letter-spacing:-.03em;
}
.plan-price small{font:600 15px/1 var(--font-mono);letter-spacing:.02em;margin-left:4px}
.plan-cycle{font-size:13px;color:var(--muted);margin:0 0 18px}
.plan-list{margin:0 0 22px;display:grid;gap:10px}
.plan-list li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:14px;
  line-height:1.5;
}
.plan-list svg{width:16px;height:16px;flex:none;margin-top:2px}
.plan .btn{margin-top:auto}

/* --------------------------------------------------------- node tables */
.node-group{margin-bottom:32px}
.node-group h3{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:17px;
  margin:0 0 12px;
}
.node-group h3 svg{width:20px;height:20px;flex:none}
.pill-note{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:30px;
  padding:6px 12px;
  border-radius:var(--r-pill);
  background:var(--panel-2);
  font-size:13px;
  color:var(--text);
}
.pill-note svg{width:14px;height:14px;flex:none}

/* ------------------------------------------------------ platform cards */
.platform-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.platform-grid > *{min-width:0}
.platform-card{
  background:var(--panel);
  border-radius:var(--r);
  padding:20px 16px;
  box-shadow:var(--shadow-soft);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  text-align:center;
  min-width:0;
}
.platform-card svg{width:28px;height:28px;color:var(--accent-dark);flex:none}
.platform-card .pc-name{font-size:14px;font-weight:600}
.platform-card .btn{margin-top:auto}

/* -------------------------------------------------------- article card */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.post-grid > *{min-width:0}
.post-card{
  background:var(--panel);
  border-radius:var(--r);
  padding:24px;
  box-shadow:var(--shadow-soft);
  display:flex;
  flex-direction:column;
  min-width:0;
}
.post-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  font:500 12px/1 var(--font-mono);
  letter-spacing:.06em;
  color:var(--muted);
  margin-bottom:12px;
}
.post-meta .sep{color:var(--border)}
.post-card h3{font-size:18px;margin:0 0 10px}
.post-card h3 a{color:var(--text);text-decoration:none}
.post-card h3 a:hover{color:var(--accent-dark)}
.post-card p{font-size:14px;line-height:1.65;color:var(--muted);margin:0 0 16px}
.post-card .post-more{
  margin-top:auto;
  font:600 11px/1 var(--font-mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent-dark);
}
.tag{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:3px 9px;
  border-radius:var(--r-pill);
  background:var(--panel-2);
  color:var(--text);
  font:600 11px/1 var(--font-mono);
  letter-spacing:.1em;
  text-transform:uppercase;
  max-width:100%;
  overflow:hidden;
  white-space:nowrap;
}
.tag--cyan{background:var(--cyan)}
.tag--pink{background:var(--candy-pink)}
.tag--orange{background:var(--candy-orange)}

/* ------------------------------------------------------------- callout */
.callout{
  position:relative;
  background:var(--panel-3);
  border-left:3px solid var(--accent);
  border-radius:0 var(--r) var(--r) 0;
  padding:18px 22px;
  margin:24px 0;
  font-size:15px;
  line-height:1.7;
  color:var(--text);
}
.callout p:last-child{margin-bottom:0}
.callout--warn{border-left-color:var(--warn);background:color-mix(in srgb, var(--candy-orange) 45%, var(--panel))}
.callout--ok{border-left-color:var(--success);background:color-mix(in srgb, var(--candy-blue) 40%, var(--panel))}
.callout-title{font-weight:700;margin:0 0 6px}

/* --------------------------------------------------------- promo block */
.promo-block{
  position:relative;
  margin:48px 0 0;
  padding:32px;
  border-radius:var(--r);
  background:var(--panel);
  box-shadow:var(--shadow-accent);
  overflow-x:clip;
}
.promo-block::before{
  content:"";
  position:absolute;
  top:0;left:32px;
  width:88px;height:3px;
  border-radius:0 0 2px 2px;
  background:linear-gradient(90deg, var(--blue), var(--accent));
}
.promo-block h3{font-size:22px;margin:0 0 10px}
.promo-block p{font-size:15px;line-height:1.7;color:var(--muted);margin:0 0 20px;max-width:52em}
.promo-block .btn{flex-shrink:0;white-space:nowrap}

/* ------------------------------------------------------------ float cta */
.float-cta{
  position:fixed;
  right:24px;
  bottom:calc(24px + env(safe-area-inset-bottom, 0px));
  z-index:50;
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:10px 20px;
  background:var(--text);
  color:var(--panel);
  font:600 13px/1 var(--font-mono);
  letter-spacing:.1em;
  text-transform:uppercase;
  border-radius:var(--r-sm);
  text-decoration:none;
  box-shadow:var(--shadow-deep);
}
.float-cta::before{
  content:"";
  width:7px;height:7px;
  flex:none;
  border-radius:50%;
  background:var(--cyan);
}
.float-cta:hover{background:var(--accent-dark);color:var(--panel);text-decoration:none}
body:has(.float-cta)::after{
  content:"";
  display:block;
  height:calc(88px + env(safe-area-inset-bottom, 0px));
}

/* ------------------------------------------------------- hero (device) */
.hero{position:relative;z-index:1;overflow-x:clip;max-width:100%;padding:56px 0 40px}
.hero-grid{
  display:grid;
  grid-template-columns:52fr 48fr;
  gap:40px;
  align-items:center;
}
.hero-grid > *{min-width:0}
.device{position:relative;z-index:1;min-width:0}
.device::before{
  content:"";
  position:absolute;
  left:8%;right:8%;bottom:4%;height:26%;
  z-index:0;
  pointer-events:none;
  background:radial-gradient(ellipse at center, color-mix(in srgb, var(--accent) 14%, transparent) 0%, transparent 72%);
}
.device-svg{position:relative;z-index:1;width:100%;height:auto;overflow:visible}
.device-svg text{font-family:var(--font-mono)}
.region{font-size:13px;font-weight:600;fill:var(--text);letter-spacing:.02em;text-anchor:middle}
.anno text{font-size:12px;font-weight:600;fill:var(--text);letter-spacing:.08em}
.anno rect{fill:var(--text)}
.anno polyline,.anno line{fill:none;stroke:var(--text);stroke-width:1}
.anno circle{fill:var(--text)}
.disc-hl{fill:none;stroke:var(--panel);stroke-opacity:.9;stroke-width:1.2}
.disc-ticks{fill:none;stroke:var(--blue-dark);stroke-opacity:.42;stroke-width:1.2;stroke-dasharray:1.5 8}
.beam-hl{stroke:var(--panel);stroke-width:1.4;stroke-opacity:.85;animation:breathe 4s ease-in-out infinite}
.plate-edge{stroke:var(--panel);stroke-opacity:.7;stroke-width:1}
.plate-side-a{fill:var(--glass-edge)}
.plate-side-b{fill:var(--accent-dark)}
.plate-side-c{fill:color-mix(in srgb, var(--warn) 68%, var(--text))}
.plate-txt{font-size:12px;font-weight:700;letter-spacing:.08em;text-anchor:middle;fill:var(--text)}
.plate-txt--light{fill:var(--panel)}
.plates{filter:drop-shadow(0 10px 14px color-mix(in srgb, var(--accent-dark) 22%, transparent))}
.float-a{animation:floatY 8s ease-in-out infinite}
.st-blue{stop-color:var(--blue)}
.st-accent{stop-color:var(--accent)}
.st-accent-dark{stop-color:var(--accent-dark)}
.st-blue-dark{stop-color:var(--blue-dark)}
.st-glass1{stop-color:var(--glass-1)}
.st-glass2{stop-color:var(--glass-2)}
.st-edge{stop-color:var(--glass-edge)}
.st-white{stop-color:var(--panel)}
.st-warn{stop-color:var(--warn)}
.st-corange{stop-color:var(--candy-orange)}
.st-cblue{stop-color:var(--candy-blue)}

.hero-copy{position:relative;z-index:2;min-width:0}
.hero-title{
  margin:0 0 28px;
  font:800 clamp(52px, 4.6vw, 60px)/1.12 var(--font-display);
  letter-spacing:-.03em;
  color:var(--text);
}
.hero .lede{margin:0 0 24px}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 24px}
.trust{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px 12px;
  margin:0 0 8px;
}
.trust li{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:32px;
  font-size:13px;
  font-weight:500;
  color:var(--text);
}
.trust svg{width:16px;height:16px;flex:none}
.ck-bg{fill:var(--candy-blue)}
.ck{fill:none;stroke:var(--accent-dark);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* glass pill (floating over device) */
.pill{
  position:absolute;
  right:0;
  bottom:6%;
  z-index:3;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:34px;
  padding:6px 14px 6px 10px;
  border-radius:var(--r-pill);
  background:color-mix(in srgb, var(--panel) 80%, transparent);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:var(--shadow-accent), inset 0 0 0 1px color-mix(in srgb, var(--panel) 92%, transparent);
  font:600 12px/1 var(--font-body);
  color:var(--text);
  white-space:nowrap;
  max-width:100%;
}
.pill i{
  display:block;
  width:8px;height:8px;
  flex:none;
  border-radius:50%;
  background:var(--success);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--success) 18%, transparent);
}

/* identity walls under hero */
.walls{margin-top:48px;border-top:1px solid var(--border)}
.wall{display:grid;grid-template-columns:132px 1fr;align-items:center;min-height:52px}
.wall + .wall{border-top:1px solid var(--border-soft)}
.wall-label{font:600 11px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.wall-items{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px 20px;
  padding-right:24px;
}
.wall-items li{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--muted)}
.platform svg{width:20px;height:20px;color:var(--muted);flex:none}
.flag-svg{width:24px;height:17px;flex:none}
.flag-ring{fill:none;stroke:var(--text);stroke-opacity:.14;stroke-width:1}
.f-red{fill:var(--flag-red)}
.f-blue{fill:var(--flag-blue)}
.f-green{fill:var(--flag-green)}
.f-white{fill:var(--flag-white)}

/* --------------------------------------------------------- stats cards */
.stats{position:relative;z-index:1;padding:32px 0 64px}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.stats-grid > *{min-width:0}
.stat{
  position:relative;
  border-radius:var(--r);
  padding:28px 28px 32px;
  min-height:224px;
  box-shadow:var(--shadow-soft);
}
.stat::before{
  content:"";
  position:absolute;
  top:0;left:28px;
  width:72px;height:3px;
  background:var(--accent);
  border-radius:0 0 2px 2px;
}
.stat--blue{background:var(--candy-blue)}
.stat--pink{background:var(--candy-pink)}
.stat--orange{background:var(--candy-orange)}
.stat-num{
  margin:20px 0 8px;
  font:800 clamp(40px, 4.2vw, 56px)/1 var(--font-display);
  letter-spacing:-.03em;
  color:var(--text);
}
.stat-num small{font:600 18px/1 var(--font-mono);letter-spacing:.04em;margin-left:6px}
.stat p{margin:0;font-size:14px;line-height:1.6;color:var(--text)}

/* ----------------------------------------------------- data / fact row */
.fact-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0;
}
.fact-row li{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:34px;
  padding:7px 14px;
  border-radius:var(--r-pill);
  background:var(--panel);
  box-shadow:var(--shadow-soft);
  font-size:13px;
  font-weight:600;
  color:var(--text);
}
.fact-row svg{width:15px;height:15px;flex:none;color:var(--accent-dark)}

/* --------------------------------------------------- server status box */
#server-status{
  display:block;
  width:100%;
  max-width:100%;
  overflow:hidden;
  margin:0 0 20px;
  min-height:64px;
}

/* ------------------------------------------------------- prose (docs) */
.prose{max-width:74ch}
.prose h2{margin:40px 0 14px}
.prose h3{margin:28px 0 10px}
.prose p,.prose li{font-size:16px;line-height:1.75;color:var(--text)}
.prose ul,.prose ol{margin:0 0 18px;padding-left:22px}
.prose ul li{list-style:disc}
.prose ol li{list-style:decimal}
.prose li{margin-bottom:8px}
.prose blockquote{
  margin:20px 0;
  padding:14px 20px;
  border-left:3px solid var(--border);
  background:var(--panel-3);
  color:var(--muted);
  font-size:15px;
}
.prose > .data-table{
  display:block;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  max-width:100%;
  min-width:0;
}
.prose table{width:100%;border-collapse:collapse;min-width:520px}
.prose th,.prose td{
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  text-align:left;
  font-size:14px;
  word-break:keep-all;
}
.prose th{font:600 12px/1.4 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.prose img{max-width:100%;height:auto}

/* ------------------------------------------------------- preview page */
.preview-section{padding-top:56px;padding-bottom:56px}
.preview-section + .preview-section{border-top:1px solid var(--border)}
.preview-head{margin:0 0 28px}
.preview-head .mono-label{display:block;margin-bottom:10px}
.swatch-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.swatch-grid > *{min-width:0}
.swatch{
  background:var(--panel);
  border-radius:var(--r);
  padding:12px;
  box-shadow:var(--shadow-soft);
  min-width:0;
}
.swatch i{display:block;height:56px;border-radius:var(--r-sm);margin-bottom:10px;box-shadow:inset 0 0 0 1px var(--border)}
.swatch code{display:block;font-size:12px;color:var(--text);overflow-wrap:anywhere}
.swatch span{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.type-sample{display:grid;gap:20px}
.type-sample .ts-row{
  display:grid;
  grid-template-columns:150px minmax(0,1fr);
  gap:20px;
  align-items:baseline;
  padding-bottom:16px;
  border-bottom:1px solid var(--border-soft);
}
.type-sample .ts-row > *{min-width:0}
.preview-note{font-size:14px;color:var(--muted);margin:0 0 18px}
.preview-canvas{background:var(--panel);border-radius:var(--r);padding:24px;box-shadow:var(--shadow-soft)}
.preview-inline{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ------------------------------------------------------ responsive bits */
@media (max-width:960px){
  .feature-layout{grid-template-columns:1fr;gap:28px}
  .plan-grid,.post-grid{grid-template-columns:1fr 1fr}
  .platform-grid{grid-template-columns:repeat(3,1fr)}
  .swatch-grid{grid-template-columns:repeat(2,1fr)}
  .hero-grid{grid-template-columns:1fr;gap:32px}
  .device{max-width:640px;margin:0 auto;width:100%}
  .wall{grid-template-columns:1fr;gap:12px;padding:14px 0}
  .wall-items{justify-content:flex-start;padding-right:0}
  .type-sample .ts-row{grid-template-columns:1fr;gap:8px}
}
@media (max-width:768px){
  .tabs{
    display:flex;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    gap:8px;
    padding-bottom:4px;
  }
  .tab{flex:none;min-width:200px;font-size:16px;min-height:56px}
  .tab-panel{padding:22px}
  .term{position:static;width:100%;margin-top:14px}
  .stage{padding-bottom:0}
  .anno{display:none}
  .pill{position:static;bottom:auto;margin-top:12px}
  .trust{grid-template-columns:repeat(2,1fr)}
  .stats-grid{grid-template-columns:1fr}
  .platform-grid{grid-template-columns:repeat(2,1fr)}
  .plan-grid,.post-grid{grid-template-columns:1fr}
  .promo-block{padding:24px}
  .float-cta{right:16px;bottom:calc(16px + env(safe-area-inset-bottom, 0px))}
}
@media (max-width:640px){
  .trust li{white-space:normal;min-height:32px;height:auto}
  .swatch-grid{grid-template-columns:1fr}
  .feature-item{grid-template-columns:36px minmax(0,1fr);gap:12px}
  .feature-ico{width:36px;height:36px}
}

@keyframes floatY{
  0%,100%{transform:translateY(6px)}
  50%{transform:translateY(-6px)}
}
@keyframes breathe{
  0%,100%{opacity:.3}
  50%{opacity:.95}
}
@media (prefers-reduced-motion:reduce){
  .float-a,.beam-hl{animation:none}
  .toc-tabs{scroll-behavior:auto}
}