/* ── iny theme — homepage ──────────────────────────────────────────────
   Design tokens mirror the inyme theme. All homepage-specific styles
   live here; Bootstrap utilities from main.php still apply.
   ────────────────────────────────────────────────────────────────────── */

/* ── Global page foundation ──────────────────────────────────────────── */
html, body {
  background: var(--im-bg);
  color: var(--im-ink);
  font-family: var(--im-font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-color, var(--im-accent)); border-radius: 999px; }
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar-color, var(--im-accent)) transparent; }

/* ── Tokens ───────────────────────────────────────────────────────────── */
/*
  Maps admin theme settings → iny design tokens:
    --body          (Body Color)                → --im-surface
    --body-color    (Body Text Color)           → --im-ink + derived
    --bs-primary    (Primary Color)             → --im-accent
    --bg-primary    (Primary Background Color)  → --im-bg
    --bs-dark-rgb   (Dark Background Color)     → dark-mode --im-bg
    --scrollbar-color (Scrollbar Color)         → scrollbar thumb
*/
:root {
  --im-bg:         var(--bg-primary, #fafaf9);
  --im-ink:        var(--body-color, #0a0a0a);
  --im-ink-muted:  color-mix(in oklab, var(--body-color, #0a0a0a) 55%, transparent);
  --im-ink-subtle: color-mix(in oklab, var(--body-color, #0a0a0a) 38%, transparent);
  --im-surface:    var(--body, #ffffff);
  --im-surface-hi: color-mix(in oklab, var(--body, #ffffff) 60%, var(--bg-primary, #f5f5f4));
  --im-border:     color-mix(in oklab, var(--body-color, #0a0a0a) 8%, transparent);
  --im-border-hi:  color-mix(in oklab, var(--body-color, #0a0a0a) 16%, transparent);
  --im-accent:     var(--bs-primary, #3b5bff);
  --im-accent-ink: #ffffff;
  --im-font-ui:    'Geist', system-ui, sans-serif;
  --im-font-mono:  'Geist Mono', ui-monospace, monospace;
}
[data-theme="dark"] {
  --im-bg:         rgb(var(--bs-dark-rgb, 11,11,12));
  --im-ink:        #f5f5f4;
  --im-ink-muted:  rgba(245,245,244,.58);
  --im-ink-subtle: rgba(245,245,244,.38);
  --im-surface:    color-mix(in oklab, rgb(var(--bs-dark-rgb, 11,11,12)) 97.5%, white);
  --im-surface-hi: color-mix(in oklab, rgb(var(--bs-dark-rgb, 11,11,12)) 76%, white);
  --im-border:     rgba(255,255,255,.08);
  --im-border-hi:  rgba(255,255,255,.16);
}

/* ── Glass utility ────────────────────────────────────────────────────── */
.im-glass {
  background: color-mix(in oklab, var(--im-surface) 62%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border: 0.5px solid color-mix(in oklab, var(--im-ink) 12%, transparent);
  box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 14px 40px -16px rgba(0,0,0,.18);
}
[data-theme="dark"] .im-glass {
  background: color-mix(in oklab, var(--im-surface) 55%, transparent);
  border-color: rgba(255,255,255,.1);
  box-shadow: 0 1px 0 rgba(255,255,255,.07) inset, 0 14px 40px -16px rgba(0,0,0,.5);
}

/* ── Card — unified glass card class ──────────────────────────────────── */
.im-card {
  background: color-mix(in oklab, var(--im-surface) 62%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border: 0.5px solid color-mix(in oklab, var(--im-ink) 12%, transparent);
  box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 14px 40px -16px rgba(0,0,0,.18);
}
[data-theme="dark"] .im-card {
  background: color-mix(in oklab, var(--im-surface) 55%, transparent);
  border-color: rgba(255,255,255,.1);
  box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 14px 40px -16px rgba(0,0,0,.5);
}
/* ── Hero section ─────────────────────────────────────────────────────── */
.iny-hero {
  position: relative; overflow: hidden;
  padding: 100px 24px 96px; min-height: 90vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}

/* Aurora blobs — fixed so they cover the full page, not just the hero */
.iny-aurora { position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0; }
.iny-blob {
  position: absolute; border-radius: 50%; filter: blur(100px);
  will-change: transform; animation: inyBlobFloat 22s ease-in-out infinite;
}
.iny-blob-a { width:520px;height:520px;top:-160px;left:-120px;background:var(--im-accent);opacity:.28; }
.iny-blob-b { width:460px;height:460px;top:30%;right:-140px;background:#f0abfc;opacity:.35;animation-delay:-7s; }
.iny-blob-c { width:540px;height:540px;bottom:-200px;left:25%;background:#67e8f9;opacity:.32;animation-delay:-14s; }
[data-theme="dark"] .iny-blob-a { opacity:.45; }
[data-theme="dark"] .iny-blob-b { background:#a21caf;opacity:.4; }
[data-theme="dark"] .iny-blob-c { background:#0e7490;opacity:.5; }
@keyframes inyBlobFloat {
  0%,100% { transform:translate(0,0) scale(1); }
  33%      { transform:translate(40px,-30px) scale(1.08); }
  66%      { transform:translate(-30px,30px) scale(0.96); }
}

/* Dot grid — fixed so it covers the full page */
.iny-grid {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(10,10,10,.055) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
[data-theme="dark"] .iny-grid {
  background-image: radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
}

/* Stage */
.iny-stage {
  position: relative; z-index: 1;
  width: 100%; max-width: 720px;
  display: flex; flex-direction: column; align-items: stretch; gap: 28px;
}

/* Trusted badge */
.iny-badge {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 7px 16px; border-radius: 999px; font-size: 13px;
  background: color-mix(in oklab, var(--im-accent) 10%, transparent);
  color: var(--im-ink-muted); text-align: center;
}
.iny-badge strong { color: var(--im-accent); font-weight: 600; }

/* Hero title */
.iny-title {
  font-size: clamp(40px, 6vw, 64px); line-height: 1.02;
  letter-spacing: -0.035em; font-weight: 600;
  text-align: center; margin: 0; text-wrap: balance;
  color: var(--im-ink); font-family: var(--im-font-ui);
}
.iny-title-em { color:var(--im-ink-muted);font-style:normal;font-weight:500; }

/* ── Shorten form ─────────────────────────────────────────────────────── */
.iny-form { display:flex;flex-direction:column;gap:14px; }

.iny-field {
  display: flex; align-items: center; height: 68px;
  border-radius: 16px; padding: 0 6px 0 0;
  transition: box-shadow .2s; position: relative;
}
.iny-field:focus-within {
  box-shadow:
    0 0 0 4px color-mix(in oklch, var(--im-ink) 8%, transparent),
    0 8px 28px -10px rgba(0,0,0,.12) !important;
}
.iny-field-input {
  flex: 1; min-width: 0;
  border: 0 !important; outline: 0 !important; background: transparent !important;
  color: var(--im-ink) !important; font-family: var(--im-font-mono) !important;
  font-size: 18px !important; letter-spacing: -0.01em;
  padding: 0 8px 0 22px; height: 100%;
  box-shadow: none !important; border-radius: 0 !important;
}
.iny-field-input::placeholder { color:var(--im-ink-subtle);opacity:1; }

.iny-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: calc(100% - 12px); padding: 0 18px; margin: 6px 0;
  background: var(--im-accent); color: var(--im-accent-ink) !important;
  border: 0; border-radius: 11px; font-weight: 600; font-size: 14.5px;
  cursor: pointer; flex-shrink: 0; transition: filter .15s, transform .12s;
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 1px 3px rgba(0,0,0,.18);
  white-space: nowrap; text-decoration: none; font-family: var(--im-font-ui);
}
.iny-btn:hover:not(:disabled) { filter:brightness(1.08);transform:translateY(-0.5px);color:var(--im-accent-ink) !important; }
.iny-btn:active:not(:disabled) { transform:translateY(0.5px); }
.iny-btn:disabled { opacity:.42;cursor:not-allowed; }

/* Copy button (Bootstrap .btn-warning revealed by JS after shortening) */
.iny-form .btn-warning {
  display: none;
  height: calc(100% - 12px) !important; margin: 6px 0 !important; padding: 0 18px !important;
  border-radius: 11px !important; background: #16a34a !important; color: #fff !important;
  border: 0 !important; font-weight: 600; font-size: 14px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset !important;
  transition: filter .15s !important; white-space: nowrap; flex-shrink: 0; align-items: center;
  font-family: var(--im-font-ui);
}
.iny-form .btn-warning:not(.d-none) { display: inline-flex !important; }
.iny-form .btn-warning:hover { filter:brightness(1.08) !important; }

.iny-subline {
  text-align: center; font-size: 13.5px; color: var(--im-ink-subtle);
  margin: 0; letter-spacing: 0.01em;
}

/* Advanced options panel */
#iny-adv {
  background: color-mix(in oklab, var(--im-surface) 70%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 0.5px solid var(--im-border-hi); border-radius: 12px; padding: 20px;
}
#iny-adv .control-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--im-ink-muted); font-weight: 600; margin-bottom: 6px; display: block;
}
#iny-adv .form-control {
  font-family: var(--im-font-mono); font-size: 14px; border-radius: 8px;
  border: 0.5px solid var(--im-border-hi) !important;
  background: var(--im-surface) !important; color: var(--im-ink) !important;
}

/* ── Result container ─────────────────────────────────────────────────── */
#output-result {
  display: flex; align-items: center; gap: 20px;
  border-radius: 16px !important; padding: 20px 24px !important;
  border: none !important;
  animation: inyFadeUp .35s cubic-bezier(.16,1,.3,1);
}
#output-result.d-none { display:none !important; }
#qr-result { flex-shrink: 0; }
#qr-result img, #qr-result canvas { border-radius: 10px; width: 80px; height: 80px; object-fit: cover; display: block; }
#text-result { flex: 1; text-align: left; }
#text-result p { color: var(--im-ink-muted); font-size: 14px; margin: 0 0 12px; line-height: 1.5; }
#text-result .btn {
  display: inline-flex; align-items: center; height: 32px;
  padding: 0 14px !important; border-radius: 9px !important;
  font-size: 13px !important; font-weight: 600; font-family: var(--im-font-ui);
}
#text-result .btn-primary {
  background: var(--im-accent) !important; border-color: var(--im-accent) !important;
  color: var(--im-accent-ink) !important;
}
@keyframes inyFadeUp {
  from { opacity:0;transform:translateY(8px); }
  to   { opacity:1;transform:translateY(0); }
}

/* ── Trust bar ────────────────────────────────────────────────────────── */
.iny-trust {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; flex-wrap: wrap; padding: 14px 8px 0;
  border-top: 0.5px dashed var(--im-border);
}
.iny-trust-item { display:inline-flex;align-items:center;gap:8px;padding:6px 14px;font-size:12.5px;color:var(--im-ink-muted);white-space:nowrap; }
.iny-trust-item svg { color:var(--im-ink-muted);flex-shrink:0; }
.iny-trust-lbl  { color:var(--im-ink);font-weight:600; }
.iny-trust-sub  { color:var(--im-ink-subtle); }
.iny-trust-dot  { color:var(--im-ink-subtle);opacity:.7; }

/* ── Recent links history ─────────────────────────────────────────────── */
.iny-hist { width:100%;max-width:560px;margin-top:56px; }
.iny-hist-head { display:flex;justify-content:space-between;align-items:baseline;padding:0 4px 10px; }
.iny-hist-title { font-size:11px;text-transform:uppercase;letter-spacing:0.12em;color:var(--im-ink-subtle);font-weight:600; }
.iny-hist-list { list-style:none;margin:0;padding:0;border-top:0.5px solid var(--im-border); }
.iny-hist-item {
  display: grid; grid-template-columns: auto auto 1fr; align-items: center;
  gap: 12px; padding: 12px 8px; border-bottom: 0.5px solid var(--im-border);
  font-size: 13.5px; cursor: pointer; transition: background .15s, padding-left .15s;
  color: var(--im-ink); text-decoration: none;
}
.iny-hist-item:hover { background:var(--im-surface);padding-left:14px;color:var(--im-ink);text-decoration:none; }
.iny-hist-code  { font-family:var(--im-font-mono);font-weight:500;letter-spacing:-0.01em; }
.iny-hist-arrow { color:var(--im-ink-subtle);font-family:var(--im-font-mono); }
.iny-hist-url   { color:var(--im-ink-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }

/* ── All page sections sit above the fixed aurora/grid ───────────────── */
#mainfeatures, #features, section { position: relative; z-index: 1; }
.iny-hero { background: transparent; }

/* ── Replaces .bg-dark in #mainfeatures ──────────────────────────────── */
.iny-section-card {
  background: color-mix(in oklab, var(--im-surface) 88%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border: 0.5px solid var(--im-border);
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 32px 80px -24px rgba(0,0,0,.10);
}
[data-theme="dark"] .iny-section-card {
  background: color-mix(in oklab, var(--im-surface) 82%, transparent);
  border-color: var(--im-border-hi);
}

/* ── Replaces .bg-primary on feature carousel section ────────────────── */
.iny-features-section {
  background: color-mix(in oklab, var(--im-accent) 5%, var(--im-bg));
  color: var(--im-ink);
}
[data-theme="dark"] .iny-features-section {
  background: color-mix(in oklab, var(--im-accent) 8%, var(--im-surface));
}

/* ── Replaces .bg-primary on integrations box ────────────────────────── */
.iny-neutral-card {
  background: color-mix(in oklab, var(--im-surface) 85%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border: 0.5px solid var(--im-border);
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 24px 60px -20px rgba(0,0,0,.08);
}
[data-theme="dark"] .iny-neutral-card {
  background: color-mix(in oklab, var(--im-surface) 80%, transparent);
}
.iny-neutral-card .card { background: var(--im-surface); color: var(--im-ink); }

/* ── Replaces .bg-primary on testimonials section ────────────────────── */
.iny-testimonials-section {
  background: color-mix(in oklab, var(--im-accent) 4%, var(--im-bg));
}
.iny-testimonials-section .h1,
.iny-testimonials-section h2 { color: var(--im-ink); }

/* ── Section label pill ───────────────────────────────────────────────── */
.iny-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: color-mix(in oklab, var(--im-accent) 10%, transparent);
  color: var(--im-accent); padding: 6px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  margin-bottom: 4px;
}

/* ── CTA button (used in feature sections) ───────────────────────────── */
.iny-cta-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 24px;
  background: var(--im-accent); color: var(--im-accent-ink) !important;
  font-weight: 700; border: 0; border-radius: 12px; font-size: 14.5px; cursor: pointer;
  transition: filter .15s, transform .12s; text-decoration: none; font-family: var(--im-font-ui);
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 1px 3px rgba(0,0,0,.18);
}
.iny-cta-btn:hover { filter:brightness(1.08);transform:translateY(-0.5px);color:var(--im-accent-ink) !important;text-decoration:none; }
.iny-cta-btn:active { transform:translateY(0.5px); }
.iny-ghost-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 24px;
  background: transparent; color: var(--im-ink) !important;
  font-weight: 600; border: 1px solid var(--im-border-hi); border-radius: 12px;
  font-size: 14.5px; cursor: pointer; text-decoration: none; font-family: var(--im-font-ui);
  transition: border-color .15s, background .15s;
}
.iny-ghost-btn:hover { border-color: var(--im-ink); background: color-mix(in oklab, var(--im-ink) 5%, transparent); color: var(--im-ink) !important; text-decoration: none; }

/* ── Stats cards ──────────────────────────────────────────────────────── */
.iny-stat {
  text-align: center; border-radius: 20px; padding: 40px 24px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 160px;
}
.iny-stat-head  { font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--im-accent);margin-bottom:10px; }
.iny-stat-num   { font-size:clamp(32px,4vw,48px);font-weight:700;letter-spacing:-0.03em;color:var(--im-ink);line-height:1; }
.iny-stat-label { font-size:13px;color:var(--im-ink-muted);font-weight:500;margin-top:6px; }

/* ── Final CTA section ────────────────────────────────────────────────── */
.iny-cta-wrap {
  background: var(--im-accent); border-radius: 24px; padding: 60px 48px;
  position: relative; overflow: hidden; color: var(--im-accent-ink);
}
.iny-cta-wrap::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 72% 50%, rgba(255,255,255,.15) 0%, transparent 60%);
}
.iny-cta-wrap h2 { color: var(--im-accent-ink); font-weight: 700; letter-spacing: -0.02em; position: relative; z-index: 1; }
.iny-cta-wrap p  { color: rgba(255,255,255,.75); position: relative; z-index: 1; }
.iny-cta-btn--light {
  background: #ffffff; color: var(--im-accent) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 2px 8px rgba(0,0,0,.12);
}
.iny-cta-btn--light:hover { filter: none; opacity: .94; color: var(--im-accent) !important; }

/* ── Mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .iny-hero  { padding: 90px 16px 56px; min-height: auto; }
  .iny-stage { gap: 20px; }
  .iny-title { font-size: clamp(32px, 9vw, 44px); }
  .iny-field {
    flex-direction: column; height: auto !important; padding: 0; gap: 0;
  }
  .iny-field-input { padding: 14px 18px 8px 18px !important; height: auto; }
  .iny-btn {
    width: calc(100% - 12px); margin: 0 6px 6px !important;
    height: 52px; justify-content: center;
  }
  .iny-form .btn-warning:not(.d-none) {
    width: calc(100% - 12px) !important; margin: 0 6px 6px !important;
    height: 52px !important; justify-content: center !important;
  }
  .iny-trust { flex-direction: column; align-items: stretch; padding: 10px 8px 0; }
  .iny-trust-item { border-bottom: 0.5px dashed var(--im-border); padding: 8px 6px; }
  .iny-trust-item:last-child { border-bottom: 0; }
  .iny-cta-wrap { padding: 40px 24px; border-radius: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   HEADER
   ════════════════════════════════════════════════════════════════════════ */

/* ── Header: position:fixed applied directly to the element ─────────────
   Avoids sticky-inside-grid lock issues entirely. The old theme JS adds
   body.fixed { padding-top:120px } at scroll>250px — we neutralise that
   below so the content never jumps.
   Combined ID+class specificity (1-1-0) beats old theme's pure #id (1-0-0) */

/* Kill the old theme's scroll-triggered content jump */
body.fixed { padding-top: 0 !important; }

#menu-top.iny-hdr,
#main-header.iny-hdr {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 16px 32px !important;
  min-height: 0 !important; /* old theme adds min-height:80px via .affix — block it */
  /* Fixed to viewport — left:0/right:0 + margin:auto centres the pill */
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  margin: 12px auto 0 !important;
  max-width: 1280px !important;
  width: calc(100% - 24px) !important;
  border-radius: 16px !important;
  z-index: 100 !important;
  box-sizing: border-box !important;
  transition: none !important;
  /* Glass */
  background: color-mix(in oklab, var(--im-surface) 62%, transparent) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  border: 0.5px solid color-mix(in oklab, var(--im-ink) 12%, transparent) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.45) inset,
    0 1px 2px rgba(0,0,0,.04),
    0 14px 40px -16px rgba(0,0,0,.18) !important;
}
[data-theme="dark"] #menu-top.iny-hdr,
[data-theme="dark"] #main-header.iny-hdr {
  background: color-mix(in oklab, var(--im-surface) 58%, transparent) !important;
  border-color: color-mix(in oklab, #fff 14%, transparent) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 1px 2px rgba(0,0,0,.4),
    0 14px 40px -16px rgba(0,0,0,.5) !important;
}

/* Fallback for when neither ID is set */
.iny-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 32px;
  position: fixed;
  top: 0; left: 0; right: 0;
  margin: 12px auto 0;
  max-width: 1280px;
  width: calc(100% - 24px);
  border-radius: 16px;
  z-index: 100;
  box-sizing: border-box;
  transition: none;
}

/* Desktop: show the collapse as a flex row filling the header */
@media (min-width: 992px) {
  .iny-nav-collapse {
    display: flex !important;
    align-items: center;
    gap: 0;
    flex: 1;
  }
  /* Center the main nav links between logo and auth */
  #main-menu.iny-nav-group {
    flex: 1;
    justify-content: center;
  }
}

/* Logo */
.iny-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--im-ink);
  flex-shrink: 0;
}
.iny-logo:hover { color: var(--im-ink); text-decoration: none; }

/* Light/dark logo swap — driven purely by CSS so it updates instantly on toggle */
.iny-logo-dark { display: none; }
.iny-logo-light { display: inline-block; }
[data-theme="dark"] .iny-logo-light { display: none; }
[data-theme="dark"] .iny-logo-dark { display: inline-block; }

.iny-logo-text {
  font-family: var(--im-font-mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--im-ink);
}

/* Mobile toggle */
.iny-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 9px;
  border: 0.5px solid var(--im-border);
  background: transparent;
  color: var(--im-ink-muted);
  cursor: pointer;
  padding: 0;
  transition: background .15s, color .15s;
}
.iny-nav-toggle:hover { background: var(--im-surface); color: var(--im-ink); }

/* Nav groups */
.iny-nav-group {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.navbar-collapse.collapse.show .iny-nav-group,
.navbar-collapse.collapsing .iny-nav-group {
  flex-direction: column;
  align-items: flex-start;
  padding: 8px 0;
  gap: 2px;
}

/* Nav link */
.iny-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 10px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--im-ink-muted);
  letter-spacing: 0.01em;
  text-decoration: none;
  border-radius: 8px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--im-font-ui);
  transition: color .15s, background .15s;
  white-space: nowrap;
}
.iny-nav-link:hover { color: var(--im-ink); background: color-mix(in oklab, var(--im-ink) 5%, transparent); text-decoration: none; }

/* Solutions / Resources dropdown trigger */
.iny-sol-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  font-family: var(--im-font-ui);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--im-ink-muted);
  letter-spacing: 0.01em;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, background .15s;
}
.iny-sol-trigger:hover,
.iny-sol-trigger.show,
.iny-sol-trigger[aria-expanded="true"] {
  color: var(--im-accent);
  background: color-mix(in oklab, var(--im-accent) 6%, transparent);
}

/* Dropdown menu */
.iny-sol-menu {
  min-width: 260px;
  padding: 8px !important;
  border-radius: 14px !important;
  border: none !important;
  margin-top: 8px !important;
  box-shadow: 0 8px 32px -8px rgba(0,0,0,.18), 0 0 0 0.5px var(--im-border) !important;
}
.iny-sol-menu.show { animation: inySolIn .15s ease-out; }
@keyframes inySolIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Dropdown items */
.iny-sol-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--im-ink);
  text-decoration: none;
  transition: background .15s;
}
.iny-sol-item:hover {
  background: color-mix(in oklab, var(--im-accent) 8%, transparent);
  color: var(--im-ink);
  text-decoration: none;
}
.iny-sol-icon {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: color-mix(in oklab, var(--im-accent) 12%, transparent);
  color: var(--im-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s;
}
.iny-sol-item:hover .iny-sol-icon {
  background: color-mix(in oklab, var(--im-accent) 20%, transparent);
}
.iny-sol-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.iny-sol-title { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--im-ink); }
.iny-sol-desc  { font-size: 12px; color: var(--im-ink-muted); }

/* Theme toggle */
.iny-theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 8px;
  border: 0.5px solid var(--im-border);
  background: transparent;
  color: var(--im-ink-muted);
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
  flex-shrink: 0;
}
.iny-theme-btn:hover { color: var(--im-ink); border-color: var(--im-border-hi); background: var(--im-surface); }
.iny-icon-sun  { display: none; }
.iny-icon-moon { display: block; }
[data-theme="dark"] .iny-icon-sun  { display: block; }
[data-theme="dark"] .iny-icon-moon { display: none; }

/* User avatar */
.iny-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid var(--im-border-hi);
  object-fit: cover;
  display: block;
  transition: border-color .15s;
}
.iny-avatar:hover { border-color: var(--im-accent); }

/* User dropdown */
.iny-user-dropdown {
  min-width: 200px;
  border-radius: 14px !important;
  border: none !important;
  padding: 8px !important;
  margin-top: 8px !important;
  box-shadow: 0 8px 32px -8px rgba(0,0,0,.18), 0 0 0 0.5px var(--im-border) !important;
}
.iny-user-dropdown .dropdown-item {
  border-radius: 8px;
  font-size: 13.5px;
  color: var(--im-ink);
  padding: 7px 12px;
  transition: background .15s;
}
.iny-user-dropdown .dropdown-item:hover {
  background: color-mix(in oklab, var(--im-accent) 8%, transparent);
  color: var(--im-ink);
}
.iny-user-dropdown .dropdown-divider { border-color: var(--im-border); margin: 4px 0; }

/* ════════════════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════════════════ */

.iny-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 20px 24px;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  font-family: var(--im-font-mono);
  font-size: 12px;
  color: var(--im-ink-subtle);
}
.iny-footer a {
  color: var(--im-ink-subtle);
  text-decoration: none;
  transition: color .15s;
}
.iny-footer a:hover { color: var(--im-ink); }
.iny-ftr-copy  { color: var(--im-ink-subtle); }
.iny-ftr-dot   { opacity: 0.5; }
.iny-ftr-spacer { flex: 1; min-width: 16px; }
.iny-ftr-right { color: var(--im-ink-muted) !important; }

/* ════════════════════════════════════════════════════════════════════════
   PAGE GRID — header + content + footer
   ════════════════════════════════════════════════════════════════════════ */
.iny-page {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: minmax(0, 1fr);
}

/* Scroll-to-top button override */
#scroll-to-top {
  background: var(--im-surface) !important;
  border: 0.5px solid var(--im-border-hi) !important;
  color: var(--im-ink) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.10) !important;
}

/* ── Header + Footer mobile ──────────────────────────────────────────── */
@media (max-width: 991px) {
  .iny-hdr { margin: 8px 8px 0 !important; width: calc(100% - 16px) !important; padding: 12px 18px !important; border-radius: 14px !important; }
  .iny-nav-collapse {
    position: absolute;
    top: calc(100% + 8px);
    left: 0; right: 0;
    border-radius: 14px;
    padding: 12px 16px 16px;
    background: color-mix(in oklab, var(--im-surface) 88%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    border: 0.5px solid var(--im-border);
    box-shadow: 0 8px 32px -8px rgba(0,0,0,.2);
  }
  .iny-nav-group { flex-direction: column; align-items: stretch; width: 100%; padding: 4px 0; }
  .iny-sol-trigger, .iny-nav-link { width: 100%; justify-content: flex-start; }
  .iny-sol-menu { position: static !important; transform: none !important; margin-top: 4px !important; box-shadow: none !important; border: 0.5px solid var(--im-border) !important; }
  #login-menu { border-top: 0.5px solid var(--im-border); padding-top: 8px; margin-top: 4px; }
  .iny-cta-btn { width: 100%; justify-content: center; }
}
@media (max-width: 640px) {
  .iny-footer { padding: 16px 20px; gap: 8px; }
}

/* ── Bio page ─────────────────────────────────────────────────────────── */
.im-bio-root {
  --ink:        var(--im-ink);
  --ink-muted:  var(--im-ink-muted);
  --ink-subtle: var(--im-ink-subtle);
  --surface:    var(--im-surface);
  --bg:         var(--im-bg);
  --accent:     var(--im-accent);
  --accent-ink: var(--im-accent-ink);
  --font-mono:  var(--im-font-mono);
  --border:     var(--im-border);
  --border-hi:  var(--im-border-hi);
  --surface-hi: color-mix(in oklab, var(--im-surface) 80%, var(--im-ink) 10%);
  color: var(--ink);
  display: flex; flex-direction: column; align-items: center; width: 100%;
  padding-top: 96px;
}

.im-bio-root .prod {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 64px; align-items: center;
  width: 100%; max-width: 1100px; margin: 24px auto; padding: 24px;
}
.im-bio-root .prod-left  { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.im-bio-root .prod-right { display: flex; justify-content: center; align-items: center; }

.im-bio-root .prod-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink-muted); font-weight: 600; font-family: var(--font-mono);
}
.im-bio-root .prod-eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 22%, transparent);
}
.im-bio-root h1, .im-bio-root h2, .im-bio-root h3, .im-bio-root h4 { color: var(--ink); }
.im-bio-root .prod-title {
  margin: 0; color: var(--ink);
  font-size: clamp(40px, 5vw, 60px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 600;
}
.im-bio-root .prod-title-em { color: var(--ink); font-weight: 500; opacity: .72; }
.im-bio-root .prod-lede {
  margin: 0; font-size: 17px; line-height: 1.55;
  color: var(--ink-muted); max-width: 460px; letter-spacing: -0.005em;
}

/* Claim form */
.im-bio-root .prod-cta {
  display: flex; align-items: center;
  border-radius: 14px; padding: 0 5px 0 0; height: 56px; max-width: 460px;
  background: color-mix(in oklab, var(--surface) 62%, transparent);
  backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 0.5px solid color-mix(in oklab, var(--ink) 12%, transparent);
  box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 1px 2px rgba(0,0,0,.04), 0 14px 40px -16px rgba(0,0,0,.18);
  transition: border-color .15s, box-shadow .2s;
}
.im-bio-root .prod-cta:focus-within {
  border-color: var(--ink);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--ink) 8%, transparent);
}
.im-bio-root .prod-cta-prefix {
  padding-left: 20px; padding-right: 4px;
  color: var(--ink-subtle); font-family: var(--font-mono); font-size: 14px;
  user-select: none; white-space: nowrap;
}
.im-bio-root .prod-cta-input {
  flex: 1 1 0; min-width: 0; border: 0; outline: 0;
  background: transparent; color: var(--ink);
  font-family: var(--font-mono); font-size: 15px; padding: 0 8px; height: 100%;
}
.im-bio-root .prod-cta-input::placeholder { color: var(--ink-subtle); }
.im-bio-root .prod-cta-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: calc(100% - 12px); padding: 0 18px; margin: 6px 0;
  background: var(--accent); color: var(--accent-ink);
  border: 0; border-radius: 11px; font-weight: 600; font-size: 14.5px;
  cursor: pointer; white-space: nowrap; font-family: var(--font-mono);
  transition: filter .15s, transform .1s;
}
.im-bio-root .prod-cta-btn:hover { filter: brightness(1.08); transform: translateY(-0.5px); }
.im-bio-root .prod-meta { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 4px; }
.im-bio-root .prod-meta-item { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-muted); }
.im-bio-root .prod-meta-item svg { color: var(--accent); }

/* Phone preview */
.im-bio-root .phone-wrap { display: flex; flex-direction: column; align-items: center; }
.im-bio-root .phone {
  position: relative; width: 320px; border-radius: 44px; padding: 14px 14px 18px;
  background: color-mix(in oklab, var(--surface) 62%, transparent);
  backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 0.5px solid color-mix(in oklab, var(--ink) 12%, transparent);
  box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 20px 60px -20px rgba(0,0,0,.25);
}
.im-bio-root .phone-notch {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: 100px; height: 26px; background: #0a0a0a; border-radius: 999px; z-index: 3;
}
.im-bio-root .phone-screen {
  border-radius: 32px; padding: 44px 20px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  min-height: 540px; position: relative; overflow: hidden; transition: background .25s, color .25s;
}
.im-bio-root .phone-screen--light { background: #fafaf9; color: #0a0a0a; }
.im-bio-root .phone-screen--dark  { background: #0a0a0a; color: #fafaf9; }
.im-bio-root .phone-screen--neon  { background: radial-gradient(at top, #5b21b6, #1e1b4b 60%, #020617); color: #fafaf9; }
.im-bio-root .phone-cover { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 8px; }
.im-bio-root .phone-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 22px; letter-spacing: -0.02em;
  background: linear-gradient(135deg, #fb923c, #db2777); color: white; border: 2px solid currentColor;
}
.im-bio-root .phone-screen--neon .phone-avatar { border-color: rgba(255,255,255,.5); }
.im-bio-root .phone-name  { font-weight: 600; font-family: var(--font-mono); font-size: 14.5px; }
.im-bio-root .phone-bio   { font-size: 12.5px; text-align: center; opacity: 0.7; max-width: 220px; line-height: 1.4; }
.im-bio-root .phone-links { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.im-bio-root .phone-link {
  appearance: none; border: 1px solid currentColor; background: transparent;
  color: inherit; font: inherit; font-weight: 500; text-align: left;
  padding: 14px 16px; border-radius: 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  cursor: pointer; font-size: 13.5px;
  animation: imLinkIn .35s cubic-bezier(.16,1,.3,1) forwards; opacity: 0; transition: transform .12s;
}
.im-bio-root .phone-screen--neon .phone-link {
  border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.06); backdrop-filter: blur(20px);
}
.im-bio-root .phone-link:hover { transform: translateY(-1px); }
.im-bio-root .phone-link:nth-child(1) { animation-delay: .08s }
.im-bio-root .phone-link:nth-child(2) { animation-delay: .16s }
.im-bio-root .phone-link:nth-child(3) { animation-delay: .24s }
.im-bio-root .phone-link:nth-child(4) { animation-delay: .32s }
.im-bio-root .phone-link-arrow { opacity: 0.4; }
.im-bio-root .phone-footer {
  margin-top: auto; font-family: var(--font-mono); font-size: 11px;
  opacity: 0.5; letter-spacing: 0.04em; padding-top: 16px;
}
@keyframes imLinkIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.im-bio-root .phone-controls {
  display: flex; gap: 4px; justify-content: center; margin-top: 14px;
  padding: 4px; background: rgba(0,0,0,.06); border-radius: 10px; align-self: center;
}
[data-theme="dark"] .im-bio-root .phone-controls { background: rgba(255,255,255,.08); }
.im-bio-root .phone-tab {
  appearance: none; border: 0; background: transparent; font: inherit;
  font-size: 12px; font-weight: 500; color: var(--ink-muted);
  padding: 6px 14px; border-radius: 7px; cursor: pointer; transition: background .15s, color .15s;
}
.im-bio-root .phone-tab--on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* Marketing sections */
.im-bio-root .section { width: 100%; max-width: 1100px; margin: 80px auto; padding: 0 24px; }
.im-bio-root .section--wide { max-width: 1200px; }
.im-bio-root .section-grid {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 64px; align-items: center;
}
.im-bio-root .section--rev .section-grid { direction: rtl; }
.im-bio-root .section--rev .section-grid > * { direction: ltr; }
.im-bio-root .section-text { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.im-bio-root .section-head {
  display: flex; flex-direction: column; gap: 14px;
  text-align: center; align-items: center; margin-bottom: 36px;
  max-width: 640px; margin-left: auto; margin-right: auto;
}
.im-bio-root .section-title {
  margin: 0; font-size: clamp(32px, 4vw, 44px); line-height: 1.04;
  letter-spacing: -0.03em; font-weight: 600; color: var(--ink);
}
.im-bio-root .kw { font-style: normal; color: var(--accent); }
.im-bio-root .section-lede { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-muted); max-width: 480px; letter-spacing: -0.005em; }
.im-bio-root .section-head .section-lede { text-align: center; }
.im-bio-root .bullets { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.im-bio-root .bullets li {
  display: grid; grid-template-columns: 18px 1fr; gap: 14px;
  align-items: start; padding: 12px 0; border-top: 0.5px solid var(--border);
}
.im-bio-root .bullets li:last-child { border-bottom: 0.5px solid var(--border); }
.im-bio-root .bullet-mark { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; color: var(--accent); margin-top: 1px; }
.im-bio-root .bullet-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.im-bio-root .bullet-title { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.im-bio-root .bullet-desc  { font-size: 13.5px; color: var(--ink-muted); line-height: 1.4; }

/* Stacked creator cards */
.im-bio-root .stack {
  position: relative; width: 100%; max-width: 720px;
  margin: 28px auto 16px; height: 480px; perspective: 1400px;
}
.im-bio-root .stack-card {
  position: absolute; top: 0; left: 50%; width: 280px; height: 440px;
  padding: 28px 22px 22px; border-radius: 28px;
  color: #fff; display: flex; flex-direction: column; align-items: center; gap: 10px;
  cursor: pointer; user-select: none; outline: none;
  transition: transform .5s cubic-bezier(.16,1,.3,1), filter .35s, opacity .35s, box-shadow .35s;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.4), 0 10px 20px -10px rgba(0,0,0,.2); overflow: hidden;
}
.im-bio-root .stack-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(circle at 30% -10%, rgba(255,255,255,.35), transparent 50%),
              linear-gradient(180deg, rgba(255,255,255,.12), transparent 30%);
  pointer-events: none; mix-blend-mode: soft-light;
}
.im-bio-root .stack-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  border: 0.5px solid rgba(255,255,255,.18); pointer-events: none;
}
.im-bio-root .stack-card--left   { transform: translate(-50%, 24px) translateX(-180px) rotate(-6deg) scale(0.88); z-index: 1; filter: saturate(.85) brightness(.85); }
.im-bio-root .stack-card--right  { transform: translate(-50%, 24px) translateX(180px)  rotate(6deg)  scale(0.88); z-index: 2; filter: saturate(.85) brightness(.85); }
.im-bio-root .stack-card--center { transform: translate(-50%, 0); z-index: 3; cursor: default; box-shadow: 0 40px 80px -20px rgba(0,0,0,.45), 0 12px 24px -8px rgba(0,0,0,.25); }
.im-bio-root .stack-card--left:hover  { filter: saturate(.95) brightness(.95); transform: translate(-50%, 12px) translateX(-180px) rotate(0deg) scale(0.92); }
.im-bio-root .stack-card--right:hover { filter: saturate(.95) brightness(.95); transform: translate(-50%, 12px) translateX(180px)  rotate(0deg) scale(0.92); }
.im-bio-root .stack-avatar {
  width: 72px; height: 72px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 22px; letter-spacing: -0.02em; color: white;
  box-shadow: 0 0 0 3px rgba(255,255,255,.4), 0 6px 18px -4px rgba(0,0,0,.3); position: relative; z-index: 2;
}
.im-bio-root .stack-name    { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; position: relative; z-index: 2; }
.im-bio-root .stack-bio     { font-size: 12.5px; opacity: .78; text-align: center; max-width: 200px; line-height: 1.4; position: relative; z-index: 2; }
.im-bio-root .stack-socials { display: flex; gap: 8px; margin-top: 4px; position: relative; z-index: 2; }
.im-bio-root .stack-social  {
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,.18); backdrop-filter: blur(10px);
  border: 0.5px solid rgba(255,255,255,.22); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px;
}
.im-bio-root .stack-links { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 12px; position: relative; z-index: 2; }
.im-bio-root .stack-link {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 10px; padding: 9px 14px; border-radius: 999px;
  background: rgba(255,255,255,.16); backdrop-filter: blur(14px) saturate(150%);
  border: 0.5px solid rgba(255,255,255,.22);
  color: #fff; font-size: 13px; font-weight: 500; cursor: pointer; transition: background .15s, transform .15s;
}
.im-bio-root .stack-card--center .stack-link:hover { background: rgba(255,255,255,.26); transform: translateX(2px); }
.im-bio-root .stack-link-arrow { opacity: .55; font-size: 12px; }
.im-bio-root .stack-handle { margin-top: auto; font-family: var(--font-mono); font-size: 11px; opacity: .55; letter-spacing: .02em; position: relative; z-index: 2; }

/* Analytics panel */
.im-bio-root .ana {
  border-radius: 20px; padding: 22px;
  display: flex; flex-direction: column; gap: 18px; width: 100%;
}
.im-bio-root .ana-head    { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; }
.im-bio-root .ana-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-subtle); font-weight: 600; }
.im-bio-root .ana-stat    { display: inline-flex; align-items: baseline; gap: 10px; margin-top: 4px; }
.im-bio-root .ana-num     { font-family: var(--font-mono); font-size: 36px; font-weight: 600; letter-spacing: -0.035em; color: var(--ink); }
.im-bio-root .ana-delta   { font-size: 12px; font-weight: 600; color: #16a34a; background: color-mix(in oklab, #16a34a 16%, transparent); padding: 2px 7px; border-radius: 999px; }
.im-bio-root .ana-sub     { font-size: 12.5px; color: var(--ink-muted); margin-top: 2px; }
.im-bio-root .ana-spark   { display: flex; align-items: flex-end; gap: 6px; height: 80px; }
.im-bio-root .ana-bar-col { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; height: 100%; }
.im-bio-root .ana-bar {
  width: 100%; max-width: 16px; background: var(--accent); border-radius: 3px; display: block;
  opacity: .85; transform-origin: bottom; animation: imBarIn .55s cubic-bezier(.16,1,.3,1) backwards;
}
.im-bio-root .ana-bar-col:nth-child(1) .ana-bar { animation-delay: .05s }
.im-bio-root .ana-bar-col:nth-child(2) .ana-bar { animation-delay: .10s }
.im-bio-root .ana-bar-col:nth-child(3) .ana-bar { animation-delay: .15s }
.im-bio-root .ana-bar-col:nth-child(4) .ana-bar { animation-delay: .20s }
.im-bio-root .ana-bar-col:nth-child(5) .ana-bar { animation-delay: .25s }
.im-bio-root .ana-bar-col:nth-child(6) .ana-bar { animation-delay: .30s }
.im-bio-root .ana-bar-col:nth-child(7) .ana-bar { animation-delay: .35s }
@keyframes imBarIn { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: .85; } }
.im-bio-root .ana-bar-lbl  { font-size: 10px; font-family: var(--font-mono); color: var(--ink-subtle); }
.im-bio-root .ana-divider  { height: 0.5px; background: var(--border); }
.im-bio-root .ana-foot     { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; }
.im-bio-root .ana-col-h    { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-subtle); font-weight: 600; margin-bottom: 10px; }
.im-bio-root .ana-col-h--gap { margin-top: 16px; }
.im-bio-root .ana-list     { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.im-bio-root .ana-list li  { display: grid; grid-template-columns: 1fr 60px auto; gap: 10px; align-items: center; font-size: 12.5px; }
.im-bio-root .ana-list-lbl { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.im-bio-root .ana-list-bar { height: 5px; background: color-mix(in oklab, var(--ink) 8%, transparent); border-radius: 999px; overflow: hidden; display: block; }
.im-bio-root .ana-list-bar > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; animation: imAnaBar .8s cubic-bezier(.16,1,.3,1) backwards; }
@keyframes imAnaBar { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); } }
.im-bio-root .ana-list-num { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-muted); text-align: right; }
.im-bio-root .ana-tags, .im-bio-root .ana-flags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.im-bio-root .ana-tags li, .im-bio-root .ana-flags li {
  font-size: 12px; padding: 4px 10px; border-radius: 999px;
  background: color-mix(in oklab, var(--ink) 5%, transparent);
  color: var(--ink-muted); display: inline-flex; align-items: baseline; gap: 6px;
}
.im-bio-root .ana-tags b, .im-bio-root .ana-flags b { color: var(--ink); font-weight: 600; }

/* Widget marquee */
.im-bio-root .strip { width: 100%; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 8px 0; }
.im-bio-root .strip-row {
  overflow-x: clip; overflow-y: visible; min-width: 0; max-width: 100%; padding: 10px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.im-bio-root .strip-track { display: flex; width: max-content; animation: imStripScroll var(--dur, 50s) linear infinite; }
@keyframes imStripScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.im-bio-root .strip-row:hover .strip-track { animation-play-state: paused; }
.im-bio-root .strip-group { display: flex; gap: 10px; padding-right: 10px; flex-shrink: 0; }
.im-bio-root .strip-chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px 10px 8px; border-radius: 999px;
  background: color-mix(in oklab, var(--surface) 60%, transparent);
  backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 0.5px solid var(--border);
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 4px 18px -8px rgba(0,0,0,.15);
  white-space: nowrap; flex-shrink: 0; transition: transform .25s cubic-bezier(.16,1,.3,1), border-color .15s;
}
.im-bio-root .strip-chip:hover { transform: translateY(-2px) scale(1.04); border-color: var(--ink); }
.im-bio-root .widget-ico      { width: 30px; height: 30px; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.im-bio-root .widget-ico-img  { width: 30px; height: 30px; object-fit: contain; display: block; }
.im-bio-root .widget-ico-letter { width: 30px; height: 30px; border-radius: 8px; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.im-bio-root .strip-chip-name { font-size: 13.5px; color: var(--ink); font-weight: 500; letter-spacing: -.01em; }
@media (prefers-reduced-motion: reduce) { .im-bio-root .strip-track { animation: none; } }

/* Closing CTA */
.im-bio-root .closer { width: 100%; max-width: 1100px; margin: 80px auto 60px; padding: 0 24px; }
.im-bio-root .closer-card {
  text-align: center; padding: 56px 32px; border-radius: 28px;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.im-bio-root .closer-title { margin: 0; font-size: clamp(32px,4vw,44px); line-height: 1.05; letter-spacing: -.03em; font-weight: 600; color: var(--ink); }
.im-bio-root .closer-lede  { margin: 0 0 8px; font-size: 16px; color: var(--ink-muted); max-width: 440px; }
.im-bio-root .closer-foot  { font-size: 12px; color: var(--ink-subtle); letter-spacing: .04em; font-family: var(--font-mono); }
.im-bio-root .closer-card .prod-cta { width: 100%; max-width: 460px; margin: 4px 0; }

/* Bio responsive */
@media (max-width: 960px) {
  .im-bio-root .prod { grid-template-columns: minmax(0,1fr); gap: 40px; padding: 16px; margin: 12px auto; }
  .im-bio-root .prod-right { order: -1; }
  .im-bio-root .phone { transform: scale(0.92); transform-origin: top center; }
  .im-bio-root .prod-title { font-size: clamp(32px,8vw,44px); }
  .im-bio-root .section { margin: 56px auto; }
  .im-bio-root .section-grid { grid-template-columns: minmax(0,1fr); gap: 32px; direction: ltr !important; }
  .im-bio-root .ana-foot { grid-template-columns: 1fr; gap: 18px; }
  .im-bio-root .closer-card { padding: 40px 24px; }
}
@media (max-width: 720px) {
  .im-bio-root { padding-top: 80px; }
  .im-bio-root .phone { width: 280px; transform: scale(0.85); }
  .im-bio-root .stack {
    height: auto; display: flex; flex-direction: row; align-items: stretch; gap: 12px;
    padding: 8px 16%; margin: 8px 0 0; width: 100%; max-width: 100%;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; scroll-padding-inline: 16%; scrollbar-width: none;
  }
  .im-bio-root .stack::-webkit-scrollbar { display: none; }
  .im-bio-root .stack-card {
    position: relative; left: auto; flex: 0 0 68%; max-width: 260px;
    min-width: 0; width: auto; height: 400px; padding: 22px 18px 18px;
    transform: none !important; filter: none !important;
    scroll-snap-align: center; scroll-snap-stop: always;
  }
}

/* ── QR page ──────────────────────────────────────────────────────────── */
.im-qr-root {
  --ink:        var(--im-ink);
  --ink-muted:  var(--im-ink-muted);
  --ink-subtle: var(--im-ink-subtle);
  --surface:    var(--im-surface);
  --surface-hi: var(--im-surface-hi);
  --bg:         var(--im-bg);
  --accent:     var(--im-accent);
  --accent-ink: var(--im-accent-ink);
  --font-mono:  var(--im-font-mono);
  --font-ui:    var(--im-font-ui);
  --border:     var(--im-border);
  --border-hi:  var(--im-border-hi);
  color: var(--ink);
  padding-top: 96px;
}

/* Generator header */
.im-qr-root .qrg-header { text-align: center; padding: 48px 24px 40px; }
.im-qr-root .qrg-title {
  font-size: clamp(30px, 5vw, 48px); font-weight: 600;
  letter-spacing: -.04em; line-height: 1.1; color: var(--ink); margin: 0 0 10px;
}
.im-qr-root .qrg-title em { color: var(--ink-muted); font-style: normal; font-weight: 500; }
.im-qr-root .qrg-sub { font-size: 16px; color: var(--ink-muted); max-width: 440px; margin: 0 auto; line-height: 1.55; }

/* Generator grid */
.im-qr-root .qrg-wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px 80px; }
.im-qr-root .qrg-grid { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; }
@media (max-width: 860px) {
  .im-qr-root .qrg-grid { grid-template-columns: 1fr; }
  .im-qr-root .qrg-right { order: -1; }
}

/* Left form panel */
.im-qr-root .qrg-left {
  display: flex; flex-direction: column; gap: 14px;
  border-radius: 20px; padding: 24px;
}

/* Mode toggle */
.im-qr-root .qrg-mode {
  display: inline-flex; align-items: center;
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 24%, transparent);
  border-radius: 100px; padding: 3px; gap: 1px; align-self: flex-start;
}
.im-qr-root .qrg-mode-static {
  padding: 6px 14px; background: var(--surface); border-radius: 100px;
  font-size: 13px; font-weight: 600; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.im-qr-root .qrg-mode-dynamic {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 14px; font-size: 13px; color: color-mix(in oklab, var(--ink) 70%, var(--accent));
  text-decoration: none; border-radius: 100px; transition: color .12s, background .12s;
}
.im-qr-root .qrg-mode-dynamic:hover { color: var(--ink); background: color-mix(in oklab, var(--accent) 8%, transparent); text-decoration: none; }
.im-qr-root .qrg-mode-dynamic svg { width: 11px; height: 11px; flex-shrink: 0; }

/* Type tabs */
.im-qr-root .qrg-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.im-qr-root .qrg-tab {
  padding: 6px 12px; background: transparent;
  border: 0.5px solid var(--border-hi); border-radius: 7px;
  font-family: var(--font-ui); font-size: 12.5px; font-weight: 500;
  color: var(--ink-muted); cursor: pointer; white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.im-qr-root .qrg-tab:hover { border-color: var(--ink-subtle); color: var(--ink); }
.im-qr-root .qrg-tab.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* Form panels */
.im-qr-root .qrg-panels { min-height: 90px; }
.im-qr-root .qrg-panel { display: flex; flex-direction: column; gap: 10px; }

/* Form fields */
.im-qr-root .qrf { display: flex; flex-direction: column; gap: 5px; }
.im-qr-root .qrf-lbl { font-size: 11px; font-weight: 500; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .08em; }
.im-qr-root .qrf-input,
.im-qr-root .qrf-textarea,
.im-qr-root .qrf-select {
  width: 100%; padding: 9px 12px;
  background: color-mix(in oklab, var(--surface) 70%, transparent);
  border: 0.5px solid var(--border-hi); border-radius: 9px;
  font-family: var(--font-ui); font-size: 14px; color: var(--ink);
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.im-qr-root .qrf-input:focus,
.im-qr-root .qrf-textarea:focus,
.im-qr-root .qrf-select:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ink) 8%, transparent);
}
.im-qr-root .qrf-input::placeholder,
.im-qr-root .qrf-textarea::placeholder { color: var(--ink-subtle); }
.im-qr-root .qrf-textarea { resize: vertical; min-height: 72px; }
.im-qr-root .qrf-select {
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; padding-right: 32px;
}
.im-qr-root .qrf-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* vCard expandable */
.im-qr-root .qrg-expand-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.im-qr-root .qrg-expand-toggle {
  padding: 5px 11px; background: transparent;
  border: 0.5px solid var(--border-hi); border-radius: 6px;
  font-family: var(--font-ui); font-size: 12px; color: var(--ink-muted);
  cursor: pointer; transition: border-color .12s, color .12s;
}
.im-qr-root .qrg-expand-toggle:hover { border-color: var(--ink-subtle); color: var(--ink); }
.im-qr-root .qrg-expand-body {
  display: none; margin-top: 10px; padding: 14px;
  background: color-mix(in oklab, var(--surface) 60%, transparent);
  border: 0.5px solid var(--border); border-radius: 10px;
  flex-direction: column; gap: 10px;
}
.im-qr-root .qrg-expand-body.open { display: flex; }

/* Customization collapsible */
.im-qr-root .qrg-custom { border: 0.5px solid var(--border-hi); border-radius: 10px; overflow: hidden; }
.im-qr-root .qrg-custom summary {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 14px; cursor: pointer;
  font-size: 13px; font-weight: 500; color: var(--ink-muted);
  list-style: none; user-select: none; transition: color .12s, background .12s;
}
.im-qr-root .qrg-custom summary:hover { color: var(--ink); background: color-mix(in oklab, var(--ink) 3%, transparent); }
.im-qr-root .qrg-custom summary::-webkit-details-marker { display: none; }
.im-qr-root .qrg-custom summary svg { transition: transform .2s; }
.im-qr-root .qrg-custom[open] summary svg { transform: rotate(180deg); }
.im-qr-root .qrg-custom-body { padding: 14px; border-top: 0.5px solid var(--border); display: flex; flex-direction: column; gap: 12px; }
.im-qr-root .qrg-color-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.im-qr-root .qrg-color-item { display: flex; flex-direction: column; gap: 5px; }
.im-qr-root .qrg-color-swatch { width: 100%; height: 36px; border: 0.5px solid var(--border-hi); border-radius: 8px; padding: 3px; cursor: pointer; background: none; }
.im-qr-root .qrg-lock {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px;
  background: color-mix(in oklab, var(--accent) 6%, transparent);
  border: 0.5px solid color-mix(in oklab, var(--accent) 18%, transparent);
  border-radius: 9px; font-size: 12.5px; color: var(--ink-muted);
  text-decoration: none; transition: background .12s;
}
.im-qr-root .qrg-lock:hover { background: color-mix(in oklab, var(--accent) 10%, transparent); color: var(--ink); text-decoration: none; }
.im-qr-root .qrg-lock svg { color: var(--accent); flex-shrink: 0; }

/* Submit */
.im-qr-root .qrg-submit {
  width: 100%; padding: 11px; background: var(--accent); color: #fff;
  border: none; border-radius: 10px; font-family: var(--font-ui);
  font-size: 14.5px; font-weight: 600; cursor: pointer;
  transition: filter .15s; letter-spacing: -.01em; margin-top: 2px;
}
.im-qr-root .qrg-submit:hover { filter: brightness(1.08); }

/* Right preview panel */
.im-qr-root .qrg-right { position: sticky; top: 80px; }
.im-qr-root .qr-stage {
  padding: 20px; border-radius: 20px;
  display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%;
}
.im-qr-root .qr-stage-card {
  background: white; padding: 16px; border-radius: 14px;
  box-shadow: 0 0 0 0.5px rgba(0,0,0,.06), 0 6px 20px -6px rgba(0,0,0,.15);
  display: flex; justify-content: center; align-items: center;
  width: 100%; min-height: 200px;
}
.im-qr-root .qr-stage-card img,
.im-qr-root .qr-stage-card svg { display: block; width: 100%; height: auto; }
.im-qr-root .qr-stage-foot { display: flex; flex-direction: column; align-items: center; gap: 2px; font-family: var(--font-mono); text-align: center; width: 100%; }
.im-qr-root .qr-stage-host { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-subtle); }
.im-qr-root .qr-stage-tgt { font-size: 12.5px; color: var(--ink-muted); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.im-qr-root .qrg-actions { display: flex; gap: 6px; width: 100%; }
.im-qr-root .qrg-action-btn {
  flex: 1; padding: 8px 0; background: transparent;
  border: 0.5px solid var(--border-hi); border-radius: 8px;
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted);
  cursor: pointer; transition: border-color .12s, color .12s;
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.im-qr-root .qrg-action-btn:hover { border-color: var(--ink-subtle); color: var(--ink); }
.im-qr-root .qrg-preview-cta { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; padding-top: 2px; }
.im-qr-root .qrg-preview-cta p { font-size: 12px; color: var(--ink-subtle); text-align: center; line-height: 1.5; margin: 0; }
.im-qr-root .qrg-preview-cta a {
  display: block; width: 100%; padding: 9px;
  background: var(--ink); color: var(--bg);
  border-radius: 9px; font-size: 13px; font-weight: 600;
  text-align: center; text-decoration: none; transition: filter .15s;
}
.im-qr-root .qrg-preview-cta a:hover { filter: brightness(1.1); color: var(--bg); text-decoration: none; }

/* Marketing hero (publicqr=false) */
.im-qr-root .qr-hero-section { padding: 60px 24px 60px; text-align: center; max-width: 700px; margin: 0 auto; }
.im-qr-root .qr-hero-h1 { font-size: clamp(40px, 6vw, 64px); font-weight: 600; letter-spacing: -.04em; line-height: 1.08; color: var(--ink); margin: 0 0 18px; }
.im-qr-root .qr-hero-p  { font-size: 18px; color: var(--ink-muted); line-height: 1.55; max-width: 500px; margin: 0 auto 32px; }
.im-qr-root .qr-hero-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.im-qr-root .qr-hero-btn {
  display: inline-flex; align-items: center; height: 46px; padding: 0 22px;
  background: var(--accent); color: #fff; border-radius: 12px;
  font-size: 15px; font-weight: 600; text-decoration: none; transition: filter .15s;
}
.im-qr-root .qr-hero-btn:hover { filter: brightness(1.08); color: #fff; text-decoration: none; }
.im-qr-root .qr-hero-ghost {
  display: inline-flex; align-items: center; height: 46px; padding: 0 22px;
  background: transparent; color: var(--ink);
  border: 1px solid var(--border-hi); border-radius: 12px;
  font-size: 15px; font-weight: 500; text-decoration: none; transition: border-color .15s;
}
.im-qr-root .qr-hero-ghost:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }

/* Marketing sections */
.im-qr-root .qr-mkt { padding: 72px 24px; }
.im-qr-root .qr-mkt-inner { max-width: 1080px; margin: 0 auto; }
.im-qr-root .qr-mkt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.im-qr-root .qr-mkt-grid.reverse .qr-mkt-visual { order: -1; }
@media (max-width: 860px) {
  .im-qr-root .qr-mkt-grid,
  .im-qr-root .qr-mkt-grid.reverse { grid-template-columns: 1fr; gap: 36px; }
  .im-qr-root .qr-mkt-grid.reverse .qr-mkt-visual { order: 0; }
}
.im-qr-root .qr-mkt-content { display: flex; flex-direction: column; gap: 18px; }
.im-qr-root .qr-mkt-h2 { font-size: clamp(26px, 3.5vw, 38px); font-weight: 600; letter-spacing: -.03em; line-height: 1.15; color: var(--ink); margin: 0; }
.im-qr-root .qr-mkt-p  { font-size: 15.5px; color: var(--ink-muted); line-height: 1.6; margin: 0; }
.im-qr-root .qr-feat-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.im-qr-root .qr-feat-item { display: flex; align-items: flex-start; gap: 12px; }
.im-qr-root .qr-feat-icon {
  width: 32px; height: 32px; flex-shrink: 0;
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--accent);
}
.im-qr-root .qr-feat-icon svg { width: 15px; height: 15px; }
.im-qr-root .qr-feat-body strong { font-size: 13.5px; font-weight: 600; color: var(--ink); display: block; margin-bottom: 1px; }
.im-qr-root .qr-feat-body p     { font-size: 13px; color: var(--ink-muted); margin: 0; line-height: 1.5; }
.im-qr-root .qr-mkt-link {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px;
  background: var(--accent); color: #fff; border-radius: 10px;
  font-size: 13.5px; font-weight: 600; text-decoration: none;
  transition: filter .15s; align-self: flex-start;
}
.im-qr-root .qr-mkt-link:hover { filter: brightness(1.08); color: #fff; text-decoration: none; }

/* Visual glass card */
.im-qr-root .qr-mkt-visual {
  border-radius: 20px; padding: 28px; min-height: 300px;
  display: flex; flex-direction: column; justify-content: center; gap: 12px;
}
.im-qr-root .qr-feat-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.im-qr-root .qr-feat-card {
  padding: 18px 16px; border-radius: 14px;
  background: color-mix(in oklab, var(--accent) 7%, var(--surface));
  border: 0.5px solid color-mix(in oklab, var(--accent) 18%, transparent);
  display: flex; flex-direction: column; gap: 8px;
}
.im-qr-root .qr-feat-card-icon {
  width: 34px; height: 34px; background: var(--accent); border-radius: 9px;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.im-qr-root .qr-feat-card-icon svg { width: 15px; height: 15px; }
.im-qr-root .qr-feat-card-lbl { font-size: 12.5px; font-weight: 600; color: var(--ink); }

/* Scan analytics visual */
.im-qr-root .qr-scan-bars  { display: flex; flex-direction: column; gap: 10px; }
.im-qr-root .qr-scan-row   { display: flex; align-items: center; gap: 10px; }
.im-qr-root .qr-scan-label { font-size: 12px; color: var(--ink-muted); font-family: var(--font-mono); width: 60px; flex-shrink: 0; }
.im-qr-root .qr-scan-track { flex: 1; height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.im-qr-root .qr-scan-fill  { height: 100%; background: var(--accent); border-radius: 3px; opacity: .75; }
.im-qr-root .qr-scan-count { font-size: 12px; color: var(--ink-subtle); font-family: var(--font-mono); width: 30px; text-align: right; }
.im-qr-root .qr-scan-title { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-subtle); font-family: var(--font-mono); margin-bottom: 4px; }

@media (max-width: 720px) { .im-qr-root { padding-top: 80px; } }
@media (max-width: 640px) {
  .im-qr-root .qrf-row2     { grid-template-columns: 1fr; }
  .im-qr-root .qr-feat-cards { grid-template-columns: 1fr; }
  .im-qr-root .qrg-color-row { grid-template-columns: 1fr; }
}

/* ── Shared section utilities (link, bio, qr) ────────────────────────────── */
.iny-section-eyebrow {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  background: color-mix(in oklab, var(--im-accent) 10%, transparent);
  color: var(--im-accent); padding: 6px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
}
.kw { font-style: normal; color: var(--im-accent); }
.iny-section-head { margin-bottom: 40px; }
.iny-section-title {
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 700; letter-spacing: -0.03em;
  color: var(--im-ink); margin: 12px 0 10px;
}
.iny-section-sub { font-size: 16px; color: var(--im-ink-muted); }

/* ── Global container width — consistent with bio/qr pages ──────────────── */
.iny-page .container { max-width: 1100px; }

/* ── Link page ───────────────────────────────────────────────────────────── */

/* Hero: no blobs/grid, plain bg */
.im-link-hero {
  background: var(--im-bg);
  min-height: auto;
  padding: 160px 24px 100px;
}
[data-theme="dark"] .im-link-hero { background: var(--im-bg); }

/* Section wrappers */
.im-link-section { padding: 80px 0; }

/* Two-column split grid */
.im-link-split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.im-link-split-grid--flip .im-link-split-text { order: 2; }
.im-link-split-grid--flip .im-link-geo-card   { order: 1; }

/* Text column */
.im-link-split-h {
  font-size: clamp(26px, 3.2vw, 42px);
  font-weight: 700; letter-spacing: -0.03em; line-height: 1.1;
  color: var(--im-ink); margin: 12px 0 16px;
}
.im-link-split-p {
  color: var(--im-ink-muted); font-size: 15.5px; line-height: 1.65; margin-bottom: 24px;
}

/* Feature bullet list */
.im-link-feat-list { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 14px; }
.im-link-feat-item { display: flex; align-items: flex-start; gap: 12px; }
.im-link-feat-icon {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 9px;
  background: color-mix(in oklab, var(--im-accent) 12%, transparent);
  color: var(--im-accent); display: inline-flex; align-items: center; justify-content: center; font-size: 13px;
}
.im-link-feat-item > span { display: flex; flex-direction: column; gap: 2px; }
.im-link-feat-item strong { font-size: 14px; font-weight: 600; color: var(--im-ink); }
.im-link-feat-item > span > span { font-size: 13.5px; color: var(--im-ink-muted); }

/* Cards column — side-by-side stacked glassmorphism */
.im-link-cards {
  position: relative;
  height: 420px;
}
.im-link-card {
  position: absolute;
  border-radius: 18px;
  padding: 22px;
}
/* Branded Domain — left, behind */
.im-link-card--a {
  width: 47%; left: 0; top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  animation: imLinkFloatA 7s ease-in-out infinite;
}
/* Geo Targeting — right, behind */
.im-link-card--b {
  width: 47%; right: 0; top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  animation: imLinkFloatA 7s ease-in-out infinite 2.3s;
}
/* Analytics Dashboard — center, dominant front card */
.im-link-card--c {
  width: 60%; left: 50%; top: 50%; z-index: 3;
  transform: translate(-50%, -50%);
  animation: imLinkFloatC 7s ease-in-out infinite 4.6s;
}
@keyframes imLinkFloatA {
  0%, 100% { transform: translateY(-50%); }
  50%       { transform: translateY(calc(-50% - 10px)); }
}
@keyframes imLinkFloatC {
  0%, 100% { transform: translate(-50%, -50%); }
  50%       { transform: translate(-50%, calc(-50% - 10px)); }
}

.im-link-card-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.im-link-card-head > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.im-link-card-head strong { font-size: 13px; font-weight: 600; color: var(--im-ink); }
.im-link-card-head small  { font-size: 11px; color: var(--im-ink-muted); }
.im-link-card-icon {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px;
  background: color-mix(in oklab, var(--im-accent) 12%, transparent);
  color: var(--im-accent); display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
}
.im-link-badge {
  flex-shrink: 0; font-size: 11px; font-weight: 600; white-space: nowrap;
  padding: 3px 8px; border-radius: 999px;
  background: color-mix(in oklab, var(--im-accent) 10%, transparent);
  color: var(--im-accent);
}
.im-link-badge--green { background: rgba(34,197,94,.12); color: #16a34a; }

.im-link-stat-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--im-ink); margin-bottom: 8px; }
.im-link-stat-row strong { font-weight: 700; font-size: 15px; }
.im-link-bar-track { height: 6px; border-radius: 999px; background: color-mix(in oklab, var(--im-accent) 12%, transparent); overflow: hidden; }
.im-link-bar-fill  { height: 100%; border-radius: 999px; background: var(--im-accent); }
.im-link-geo-row   { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--im-ink); margin-bottom: 6px; }
.im-link-stat-box  {
  background: color-mix(in oklab, var(--im-accent) 6%, var(--im-surface));
  border: 1px solid var(--im-border); border-radius: 10px;
  padding: 10px 12px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center;
}
.im-link-stat-box strong { font-weight: 700; color: var(--im-accent); font-size: 15px; }
.im-link-stat-box small  { font-size: 11px; color: var(--im-ink-muted); }

/* Geo card */
.im-link-geo-card { border-radius: 20px; padding: 24px; }

/* Feature cards (LFC = Link Feature Card) */
.im-lfc-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.im-lfc-grid > :nth-child(1),
.im-lfc-grid > :nth-child(2) { grid-column: span 3; }
.im-lfc-grid > :nth-child(3),
.im-lfc-grid > :nth-child(4),
.im-lfc-grid > :nth-child(5) { grid-column: span 2; }

.im-lfc-card {
  border-radius: 18px; padding: 22px;
  display: flex; flex-direction: column; gap: 16px;
  overflow: hidden;
}
.im-lfc-head {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 12px;
}
.im-lfc-brand { display: flex; align-items: center; gap: 12px; }
.im-lfc-ico {
  width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; color: #fff;
}
.im-lfc-meta { display: flex; flex-direction: column; gap: 3px; }
.im-lfc-name { font-size: 14px; font-weight: 600; color: var(--im-ink); line-height: 1.2; }
.im-lfc-sub  {
  font-size: 10.5px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--im-ink-subtle);
}
.im-lfc-live {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; color: #16a34a;
  background: color-mix(in oklab, #16a34a 12%, transparent);
  border-radius: 20px; padding: 4px 9px; white-space: nowrap; flex-shrink: 0;
}
.im-lfc-live::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; display: block;
}
.im-lfc-desc {
  font-size: 13.5px; color: var(--im-ink-muted); line-height: 1.58; margin: 0;
}
.im-lfc-widget {
  margin-top: auto; border-radius: 12px; overflow: hidden;
  background: var(--im-surface-hi); border: 1px solid var(--im-border);
}

/* Domain widget */
.im-lfc-domain { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.im-lfc-domain-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-family: var(--im-font-mono);
}
.im-lfc-domain-short {
  color: var(--im-accent); font-weight: 500;
  background: color-mix(in oklab, var(--im-accent) 8%, transparent);
  padding: 3px 8px; border-radius: 6px; white-space: nowrap; flex-shrink: 0;
}
.im-lfc-domain-arrow { color: var(--im-ink-subtle); font-size: 11px; flex-shrink: 0; }
.im-lfc-domain-dest  { color: var(--im-ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Bar chart widget */
.im-lfc-chart { padding: 14px 14px 0; }
.im-lfc-chart-label { font-size: 11px; color: var(--im-ink-subtle); margin-bottom: 10px; font-weight: 500; }
.im-lfc-bars { display: flex; align-items: flex-end; gap: 6px; height: 72px; }
.im-lfc-bar {
  flex: 1; border-radius: 5px 5px 0 0;
  background: color-mix(in oklab, var(--im-accent) 18%, transparent);
  height: var(--h);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 4px;
  font-size: 10px; color: var(--im-ink-subtle); font-family: var(--im-font-mono);
}
.im-lfc-bar--hi { background: var(--im-accent); color: rgba(255,255,255,.9); }

/* Events widget */
.im-lfc-events { padding: 4px 12px; display: flex; flex-direction: column; }
.im-lfc-event-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 0; border-bottom: 1px solid var(--im-border); font-size: 12px;
}
.im-lfc-event-row:last-child { border-bottom: 0; }
.im-lfc-event-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: #16a34a;
  box-shadow: 0 0 0 3px color-mix(in oklab, #16a34a 18%, transparent);
}
.im-lfc-event-name { font-weight: 500; color: var(--im-ink); flex: 1; font-family: var(--im-font-mono); }
.im-lfc-event-time { font-size: 11px; color: var(--im-ink-subtle); }

/* Geo widget */
.im-lfc-geo { padding: 4px 12px; display: flex; flex-direction: column; }
.im-lfc-geo-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 0; border-bottom: 1px solid var(--im-border); font-size: 12px;
}
.im-lfc-geo-row:last-child { border-bottom: 0; }
.im-lfc-geo-name { flex: 1.4; color: var(--im-ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.im-lfc-geo-bar  { flex: 1.5; height: 4px; background: var(--im-border-hi); border-radius: 2px; overflow: hidden; }
.im-lfc-geo-fill { height: 100%; background: var(--im-accent); border-radius: 2px; }
.im-lfc-geo-pct  { font-size: 11px; font-weight: 600; color: var(--im-ink); font-family: var(--im-font-mono); width: 28px; text-align: right; }

/* API code widget */
.im-lfc-code-wrap { padding: 12px 14px; overflow: auto; }
.im-lfc-code {
  font-family: var(--im-font-mono); font-size: 11.5px; line-height: 1.65;
  color: var(--im-ink-muted); margin: 0; white-space: pre;
}
.im-lfc-code-kw  { color: var(--im-accent); font-weight: 600; }
.im-lfc-code-str { color: #16a34a; }
.im-lfc-code-key { color: var(--im-ink); font-weight: 500; }

@media (max-width: 900px) {
  .im-lfc-grid { grid-template-columns: repeat(2, 1fr); }
  .im-lfc-grid > :nth-child(n) { grid-column: span 1; }
  .im-lfc-grid > :nth-child(1),
  .im-lfc-grid > :nth-child(2) { grid-column: span 2; }
}
@media (max-width: 540px) {
  .im-lfc-grid { grid-template-columns: 1fr; }
  .im-lfc-grid > :nth-child(n) { grid-column: span 1; }
}

/* History modal promo */
.im-link-hist-promo {
  margin-top: 16px; padding: 14px; border-radius: 12px;
  background: color-mix(in oklab, var(--im-accent) 6%, transparent);
  border: 1px solid var(--im-border);
}

@media (max-width: 991px) {
  .im-link-split-grid { grid-template-columns: 1fr; gap: 40px; }
  .im-link-split-grid--flip .im-link-split-text { order: 0; }
  .im-link-split-grid--flip .im-link-geo-card   { order: 0; }
  .im-link-section { padding: 56px 0; }
}
@media (max-width: 640px) {
  .im-link-cards { display: none; }
}

/* ── Shared form utilities (contact, report) ─────────────────────────────── */
.im-form-group { display: flex; flex-direction: column; gap: 6px; }
.im-form-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; color: var(--im-ink-muted); display: block;
}
.im-form-label .im-form-req { color: var(--im-accent); margin-left: 2px; }
.im-form-control {
  width: 100%; padding: 10px 14px;
  background: color-mix(in oklab, var(--im-surface) 70%, transparent);
  border: 0.5px solid var(--im-border-hi); border-radius: 10px;
  font-family: var(--im-font-ui); font-size: 14px; color: var(--im-ink);
  outline: none; transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}
.im-form-control:focus {
  border-color: var(--im-ink);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--im-ink) 8%, transparent);
}
.im-form-control::placeholder { color: var(--im-ink-subtle); }
textarea.im-form-control { resize: vertical; min-height: 140px; line-height: 1.6; }
select.im-form-control {
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px;
}
.im-form-submit {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 24px;
  background: var(--im-accent); color: var(--im-accent-ink) !important;
  font-weight: 700; border: 0; border-radius: 11px; font-size: 14px;
  cursor: pointer; font-family: var(--im-font-ui);
  transition: filter .15s, transform .12s;
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 1px 3px rgba(0,0,0,.18);
}
.im-form-submit:hover { filter: brightness(1.08); transform: translateY(-0.5px); }
.im-form-submit:active { transform: translateY(0.5px); }

/* ── Contact page ─────────────────────────────────────────────────────────── */
.im-contact-root {
  padding: 140px 0 96px;
  min-height: 80vh;
  display: flex; align-items: center;
}
.im-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 64px; align-items: center;
}
.im-contact-eyebrow { margin-bottom: 16px; }
.im-contact-h1 {
  font-size: clamp(32px, 4vw, 50px); font-weight: 700;
  letter-spacing: -0.035em; line-height: 1.06; color: var(--im-ink);
  margin: 0 0 14px;
}
.im-contact-p { font-size: 15.5px; color: var(--im-ink-muted); line-height: 1.65; margin: 0 0 28px; }
.im-contact-socials { display: flex; gap: 8px; }
.im-contact-social {
  width: 36px; height: 36px; border-radius: 10px;
  border: 0.5px solid var(--im-border-hi);
  background: transparent; color: var(--im-ink-muted);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; text-decoration: none;
  transition: color .15s, border-color .15s, background .15s;
}
.im-contact-social:hover { color: var(--im-ink); border-color: var(--im-border-hi); background: var(--im-surface); text-decoration: none; }
.im-contact-card { border-radius: 20px; padding: 32px; }
.im-contact-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.im-contact-form-rows { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 880px) {
  .im-contact-root { padding: 120px 0 64px; align-items: flex-start; }
  .im-contact-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 640px) {
  .im-contact-form-grid { grid-template-columns: 1fr; }
}

/* ── Report page ─────────────────────────────────────────────────────────── */
.im-report-root {
  padding: 140px 0 96px;
  min-height: 80vh;
  display: flex; align-items: center;
}
.im-report-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 64px; align-items: center;
}
.im-report-h1 {
  font-size: clamp(30px, 4vw, 46px); font-weight: 700;
  letter-spacing: -0.035em; line-height: 1.06; color: var(--im-ink);
  margin: 0 0 14px;
}
.im-report-p { font-size: 15.5px; color: var(--im-ink-muted); line-height: 1.65; margin: 0; }
.im-report-card { border-radius: 20px; padding: 32px; }
.im-report-form-rows { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 880px) {
  .im-report-root { padding: 120px 0 64px; align-items: flex-start; }
  .im-report-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ── Affiliate page ───────────────────────────────────────────────────────── */
.im-affiliate-root { padding-top: 120px; padding-bottom: 96px; }
.im-affiliate-hero {
  text-align: center; padding: 60px 24px 72px;
  max-width: 700px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.im-affiliate-rate {
  font-size: clamp(56px, 8vw, 96px); font-weight: 700;
  letter-spacing: -0.04em; line-height: 1; color: var(--im-accent);
  font-family: var(--im-font-mono);
}
.im-affiliate-h1 {
  font-size: clamp(26px, 3.5vw, 40px); font-weight: 700;
  letter-spacing: -0.03em; line-height: 1.1; color: var(--im-ink);
  margin: 0;
}
.im-affiliate-p { font-size: 16px; color: var(--im-ink-muted); line-height: 1.65; margin: 0; max-width: 520px; }
.im-affiliate-faqs { max-width: 760px; margin: 0 auto; padding: 0 24px 48px; }
.im-affiliate-faqs-head { text-align: center; margin-bottom: 32px; }
.im-affiliate-faqs-h2 { font-size: clamp(22px, 3vw, 32px); font-weight: 700; letter-spacing: -0.03em; color: var(--im-ink); margin: 0 0 10px; }
.im-affiliate-faqs-p  { font-size: 15px; color: var(--im-ink-muted); margin: 0 0 6px; }
.im-affiliate-faq {
  border-radius: 14px; overflow: hidden; margin-bottom: 8px;
  background: color-mix(in oklab, var(--im-surface) 62%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border: 0.5px solid var(--im-border);
  box-shadow: 0 1px 0 rgba(255,255,255,.55) inset, 0 2px 8px rgba(0,0,0,.05), 0 12px 28px -10px rgba(0,0,0,.10);
}
[data-theme="dark"] .im-affiliate-faq {
  box-shadow: 0 1px 0 rgba(255,255,255,.07) inset, 0 4px 12px rgba(0,0,0,.3), 0 20px 40px -10px rgba(0,0,0,.45);
}
.im-affiliate-faq-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; cursor: pointer; user-select: none;
  font-size: 14px; font-weight: 600; color: var(--im-ink);
  list-style: none;
}
.im-affiliate-faq-header::-webkit-details-marker { display: none; }
.im-affiliate-faq-header:hover { color: var(--im-ink); }
.im-affiliate-faq-chevron { color: var(--im-ink-muted); flex-shrink: 0; transition: transform .2s; font-size: 12px; }
.im-affiliate-faq[open] .im-affiliate-faq-chevron { transform: rotate(180deg); }
.im-affiliate-faq-body {
  padding: 0 20px 18px; font-size: 14px; color: var(--im-ink-muted);
  line-height: 1.65; border-top: 0.5px solid var(--im-border); padding-top: 14px;
  margin: 0 20px 18px;
}

/* ── Pricing page ────────────────────────────────────────────────────────── */
.pricing {
  width: 100%; max-width: 1100px; margin: 0 auto; padding: 140px 24px 0;
}
.pricing-head {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  text-align: center; max-width: 720px; margin: 0 auto 64px;
}
.pricing-title {
  margin: 0; font-size: clamp(40px,5vw,60px); line-height: 1.02;
  letter-spacing: -0.035em; font-weight: 600; color: var(--im-ink);
}
.pricing-title em { font-style: normal; color: var(--im-accent); }
.pricing-lede { margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--im-ink-muted); max-width: 520px; }

/* Billing toggle */
.pricing-toggle { display: inline-flex; padding: 4px; border-radius: 999px; margin-top: 8px; }
.pricing-toggle-btn {
  appearance: none; border: 0; background: transparent;
  font-family: var(--im-font-ui); font-size: 13.5px; font-weight: 500;
  color: var(--im-ink-muted); padding: 8px 22px; border-radius: 999px;
  cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  transition: color .15s, background .25s cubic-bezier(.16,1,.3,1);
}
.pricing-toggle-btn--on,
.pricing-toggle .pricing-toggle-btn.btn-primary { background: var(--im-ink); color: var(--im-bg); }
.pricing-save {
  font-family: var(--im-font-mono); font-size: 10.5px; letter-spacing: 0.04em;
  padding: 2px 6px; border-radius: 999px;
  background: color-mix(in oklab, var(--im-accent) 22%, transparent); color: var(--im-accent);
}
.pricing-toggle-btn--on .pricing-save,
.pricing-toggle .pricing-toggle-btn.btn-primary .pricing-save { background: color-mix(in oklab, var(--im-accent) 28%, transparent); color: white; }

/* Tier grid */
.tiers { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; align-items: start; margin-bottom: 40px; }
.tier { position: relative; border-radius: 22px; overflow: hidden; }
.tier-inner { display: flex; flex-direction: column; gap: 22px; padding: 36px 28px; }
.tier--featured {
  background: radial-gradient(at top, color-mix(in oklab, var(--im-accent) 30%, transparent), transparent 60%), color-mix(in oklab, #0a0a0a 92%, transparent);
  border: 0.5px solid color-mix(in oklab, var(--im-accent) 30%, transparent);
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 30px 60px -20px color-mix(in oklab, var(--im-accent) 30%, transparent), 0 12px 30px -10px rgba(0,0,0,.4);
  transform: translateY(-12px);
}
.tier--featured .tier-inner { padding-top: 56px; }
.tier-banner {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 20px; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.18em; font-weight: 600; font-family: var(--im-font-mono); color: var(--im-accent);
  background: linear-gradient(180deg, color-mix(in oklab, var(--im-accent) 28%, transparent), transparent);
  border-bottom: 0.5px solid color-mix(in oklab, var(--im-accent) 25%, transparent);
}
.tier-head { display: flex; flex-direction: column; gap: 4px; }
.tier-name { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--im-ink); }
.tier--featured .tier-name { color: var(--im-accent); }
.tier-tag { font-size: 13px; color: var(--im-ink-muted); }
.tier--featured .tier-tag { color: rgba(255,255,255,.6); }
.tier-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tier-strike { font-family: var(--im-font-mono); text-decoration: line-through; color: var(--im-ink-subtle); font-size: 18px; }
.tier--featured .tier-strike { color: rgba(255,255,255,.4); }
.tier-amount { font-family: var(--im-font-mono); font-size: 44px; font-weight: 600; letter-spacing: -0.04em; color: var(--im-ink); }
.tier--featured .tier-amount { color: #fff; }
.tier-period { font-size: 13.5px; color: var(--im-ink-muted); font-family: var(--im-font-mono); }
.tier--featured .tier-period { color: rgba(255,255,255,.5); }
.tier-cta {
  appearance: none; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; height: 46px; padding: 0 18px; border-radius: 12px;
  border: 0.5px solid var(--im-border-hi);
  background: color-mix(in oklab, var(--im-surface) 70%, transparent);
  color: var(--im-ink) !important; font-family: var(--im-font-ui); font-weight: 600;
  font-size: 14px; cursor: pointer; text-decoration: none; width: 100%;
  transition: background .15s, transform .12s, border-color .15s;
}
.tier-cta:hover { background: var(--im-surface); border-color: var(--im-ink); color: var(--im-ink) !important; text-decoration: none; }
.tier-cta:active { transform: translateY(0.5px); }
.tier-cta--filled { background: white; color: #0a0a0a !important; border: 0; }
.tier-cta--filled:hover { background: #f0f0ef; color: #0a0a0a !important; text-decoration: none; }
.tier-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tier-features li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; align-items: start; font-size: 13.5px; color: var(--im-ink-muted); }
.tier-features li svg { color: var(--im-accent); margin-top: 2px; }
.tier--featured .tier-features li { color: rgba(255,255,255,.78); }
.tier--featured .tier-features li svg { color: var(--im-accent); }

/* Pricing footer + custom CTA */
.pricing-foot { text-align: center; font-size: 12.5px; color: var(--im-ink-subtle); font-family: var(--im-font-mono); letter-spacing: 0.01em; margin: 0 0 64px; }
.pricing-custom { padding: 32px 36px; border-radius: 24px; margin-bottom: 64px; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; }
.pricing-custom-title { margin: 0 0 8px; font-size: clamp(22px,2.5vw,28px); font-weight: 600; letter-spacing: -0.02em; color: var(--im-ink); }
.pricing-custom-lede { margin: 0; font-size: 14.5px; color: var(--im-ink-muted); line-height: 1.5; }

/* Pardy.one bundle card */
.pardy-card {
  position: relative;
  border-radius: 26px;
  isolation: isolate;
  --pardy-border: 2px;
  overflow: hidden;
  margin-bottom: 64px;
  background:
    radial-gradient(ellipse at 80% 0%, color-mix(in oklab, #c084fc 22%, transparent) 0%, transparent 50%),
    radial-gradient(ellipse at 0% 100%, color-mix(in oklab, #38bdf8 20%, transparent) 0%, transparent 55%),
    #0c0d12;
  color: #ededed;
}
.pardy-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--pardy-border);
  background: conic-gradient(
    from var(--pardy-angle, 0deg),
    #ff5e7e 0%, #ffae42 14%, #ffe066 28%, #4ade80 42%, #38bdf8 56%,
    #818cf8 70%, #c084fc 84%, #ff5e7e 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: pardySpin 14s linear infinite;
  z-index: 1;
  pointer-events: none;
}
@property --pardy-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes pardySpin { to { --pardy-angle: 360deg; } }
.pardy-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.04) 0.5px, transparent 0.5px),
    linear-gradient(to bottom, rgba(255,255,255,.04) 0.5px, transparent 0.5px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  pointer-events: none;
  z-index: 0;
}
.pardy-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: center;
  gap: 0;
  border-radius: calc(26px - var(--pardy-border));
  margin: var(--pardy-border);
  overflow: hidden;
  background: rgba(255,255,255,.02);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
          backdrop-filter: blur(12px) saturate(140%);
}
.pardy-text {
  padding: 40px 44px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pardy-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 10px;
  font-family: var(--im-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.06);
  border: 0.5px solid rgba(255,255,255,.14);
  border-radius: 999px;
  align-self: flex-start;
}
.pardy-eyebrow-orb {
  width: 10px; height: 10px; flex-shrink: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #ff5e7e, #ffae42, #4ade80, #38bdf8, #c084fc, #ff5e7e);
  box-shadow: 0 0 10px color-mix(in oklab, #ff5e7e 60%, transparent);
  display: block;
}
.pardy-title {
  margin: 0;
  font-size: clamp(26px, 3vw, 34px);
  letter-spacing: -0.028em;
  line-height: 1.08;
  font-weight: 600;
  color: white;
}
.pardy-title-em {
  background: linear-gradient(120deg, #ff5e7e, #ffae42 30%, #4ade80 55%, #38bdf8 75%, #c084fc);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-style: italic;
  font-weight: 500;
}
.pardy-lede {
  margin: 0 0 6px;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255,255,255,.65);
  letter-spacing: -0.005em;
  max-width: 460px;
}
.pardy-rail { display: flex; flex-wrap: wrap; gap: 6px; }
.pardy-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px 5px 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 0.5px solid color-mix(in oklab, var(--pm) 40%, rgba(255,255,255,.12));
  font-size: 12px;
  font-weight: 500;
  color: white;
  letter-spacing: -0.005em;
}
.pardy-pill--current {
  background: color-mix(in oklab, var(--pm) 22%, rgba(255,255,255,.05));
  border-color: color-mix(in oklab, var(--pm) 70%, transparent);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--pm) 22%, transparent);
}
.pardy-pill-mark {
  width: 18px; height: 18px;
  border-radius: 5px;
  background: var(--pm);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--im-font-mono);
  font-weight: 600;
  font-size: 11px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.14) inset;
}
.pardy-price-card {
  padding: 36px 32px;
  background: rgba(255,255,255,.04);
  border-left: 0.5px solid rgba(255,255,255,.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.pardy-tier-label {
  font-family: var(--im-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.pardy-price-row {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 2px;
}
.pardy-price-amt {
  font-size: 60px;
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1;
  color: white;
  font-variant-numeric: tabular-nums;
}
.pardy-price-per {
  font-family: var(--im-font-mono);
  font-size: 14px;
  color: rgba(255,255,255,.6);
}
.pardy-billed {
  font-family: var(--im-font-mono);
  font-size: 11.5px;
  color: rgba(255,255,255,.45);
  letter-spacing: -0.005em;
}
.pardy-cta {
  margin-top: 14px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 11px;
  background: white;
  color: #0c0d12;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.005em;
  transition: filter .15s, transform .12s;
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 1px 3px rgba(0,0,0,.3);
}
.pardy-cta:hover { transform: translateY(-1px); filter: brightness(1.05); color: #0c0d12; }
.pardy-note {
  font-family: var(--im-font-mono);
  font-size: 11px;
  color: rgba(255,255,255,.45);
  letter-spacing: -0.005em;
}
@media (max-width: 820px) {
  .pardy-inner { grid-template-columns: 1fr; }
  .pardy-text  { padding: 32px 24px; }
  .pardy-price-card {
    border-left: 0;
    border-top: 0.5px solid rgba(255,255,255,.1);
    padding: 28px 24px;
  }
}

/* FAQ */
.faq { max-width: 720px; margin: 0 auto 80px; }
.faq-title { margin: 0 0 28px; font-size: clamp(28px,3.4vw,36px); letter-spacing: -0.03em; text-align: center; font-weight: 600; color: var(--im-ink); }
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-top: 0.5px solid var(--im-border); padding: 4px 0; }
.faq-item:last-of-type { border-bottom: 0.5px solid var(--im-border); }
.faq-q {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; list-style: none; cursor: pointer; padding: 18px 4px;
  font-size: 16px; font-weight: 500; letter-spacing: -0.01em; color: var(--im-ink);
}
.faq-q::-webkit-details-marker { display: none; }
.faq-chev {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; font-size: 18px; color: var(--im-ink-muted);
  border: 0.5px solid var(--im-border-hi); border-radius: 50; flex-shrink: 0;
  transition: transform .25s ease, background .15s; border-radius: 50%;
}
.faq-item[open] .faq-chev { transform: rotate(45deg); background: color-mix(in oklab, var(--im-surface) 80%, transparent); }
.faq-a { padding: 0 4px 18px; color: var(--im-ink-muted); font-size: 14.5px; line-height: 1.55; max-width: 600px; }

/* Compare table */
.compare-toggle-row { display: flex; justify-content: center; margin: 8px 0 18px; }
.compare-toggle {
  appearance: none; background: transparent; border: 0.5px solid var(--im-border-hi);
  color: var(--im-ink); font-family: var(--im-font-ui); font-size: 13.5px; font-weight: 500;
  padding: 10px 18px; border-radius: 999px; display: inline-flex;
  align-items: center; gap: 8px; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.compare-toggle:hover { border-color: var(--im-ink); background: color-mix(in oklab, var(--im-ink) 4%, transparent); }
.compare-toggle[aria-expanded="true"] { background: var(--im-ink); color: var(--im-bg); border-color: var(--im-ink); }
.compare-toggle-chev { display: inline-flex; transition: transform .2s ease; }
.compare-toggle[aria-expanded="true"] .compare-toggle-chev { transform: rotate(180deg); }
.compare { margin: 8px auto 32px; border-radius: 20px; overflow: hidden; }
.compare-head {
  display: grid; grid-template-columns: var(--comp-grid, 1.6fr 1fr 1fr 1fr); align-items: stretch;
  background: color-mix(in oklab, var(--im-surface) 80%, transparent);
  border-bottom: 0.5px solid var(--im-border-hi);
}
.compare-head-lead {
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  padding: 18px 24px; border-right: 0.5px solid var(--im-border);
}
.compare-head-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--im-ink); font-weight: 600; font-family: var(--im-font-mono); }
.compare-head-sub { font-size: 12px; color: var(--im-ink-subtle); font-family: var(--im-font-mono); }
.compare-head-tier { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 16px 14px; border-right: 0.5px solid var(--im-border); text-align: center; }
.compare-head-tier:last-child { border-right: 0; }
.compare-head-tier--featured { background: color-mix(in oklab, var(--im-accent) 6%, transparent); }
.compare-head-name { font-size: 14px; font-weight: 600; color: var(--im-ink); }
.compare-head-tier--featured .compare-head-name { color: var(--im-accent); }
.compare-head-price { font-family: var(--im-font-mono); font-size: 12px; color: var(--im-ink-muted); }
.compare-head-cta {
  appearance: none; border: 0.5px solid var(--im-border-hi);
  background: color-mix(in oklab, var(--im-surface) 70%, transparent);
  color: var(--im-ink) !important; font-family: var(--im-font-ui); font-size: 12px; font-weight: 600;
  padding: 7px 14px; border-radius: 8px; cursor: pointer; margin-top: 4px;
  text-decoration: none; display: inline-block;
  transition: background .15s, border-color .15s;
}
.compare-head-cta:hover { border-color: var(--im-ink); text-decoration: none; color: var(--im-ink) !important; }
.compare-head-cta--filled { background: var(--im-accent); color: var(--im-accent-ink) !important; border-color: var(--im-accent); }
.compare-head-cta--filled:hover { filter: brightness(1.08); color: var(--im-accent-ink) !important; }
.compare-group + .compare-group { border-top: 0.5px solid var(--im-border); }
.compare-group-head { display: flex; align-items: center; gap: 12px; padding: 22px 24px 12px; }
.compare-group-ico { width: 28px; height: 28px; border-radius: 8px; background: color-mix(in oklab, var(--im-accent) 12%, transparent); color: var(--im-accent); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.compare-group-label { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--im-ink); font-family: var(--im-font-mono); }
.compare-group-rule { flex: 1; height: 0.5px; background: var(--im-border); }
.compare-grid { display: flex; flex-direction: column; }
.compare-row { display: grid; grid-template-columns: var(--comp-grid, 1.6fr 1fr 1fr 1fr); align-items: stretch; border-top: 0.5px solid var(--im-border); }
.compare-row:first-child { border-top: 0; }
.compare-cell { padding: 14px 18px; border-right: 0.5px solid var(--im-border); display: flex; align-items: center; font-size: 13.5px; color: var(--im-ink); min-width: 0; }
.compare-cell:last-child { border-right: 0; }
.compare-cell--name { gap: 8px; font-weight: 500; }
.compare-cell--val { justify-content: center; text-align: center; font-family: var(--im-font-mono); font-size: 13px; }
.compare-cell--featured { background: color-mix(in oklab, var(--im-accent) 5%, transparent); }
.compare-cell-lbl { display: none; }
.compare-feat { font-size: 13.5px; color: var(--im-ink); }
.compare-yes { color: var(--im-accent); display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: color-mix(in oklab, var(--im-accent) 12%, transparent); }
.compare-no { color: var(--im-ink-subtle); font-family: var(--im-font-mono); font-size: 16px; line-height: 1; }
.compare-text { color: var(--im-ink); font-family: var(--im-font-mono); font-size: 12.5px; font-weight: 500; }
.compare-unlimited { color: var(--im-accent); display: inline-flex; align-items: center; }

/* Pricing responsive */
@media (max-width: 920px) {
  .tiers { grid-template-columns: minmax(0,1fr); gap: 14px; }
  .tier--featured { transform: none; order: -1; }
  .tier--featured .tier-inner { padding-top: 56px; }
}
@media (max-width: 760px) {
  .compare-head, .compare-row { grid-template-columns: var(--comp-grid-mobile, 1fr 1fr 1fr); }
  .compare-head-lead { flex-direction: row; justify-content: space-between; align-items: center; grid-column: 1 / -1; border-right: 0; border-bottom: 0.5px solid var(--im-border); padding: 14px 18px; }
  .compare-cell--name { border-right: 0; border-bottom: 0.5px dashed var(--im-border); padding: 0 16px 12px; font-size: 13.5px; font-weight: 600; grid-column: 1 / -1; }
  .compare-cell--val { padding: 12px 6px 14px; flex-direction: column; gap: 4px; }
  .compare-cell--val:last-child { border-right: 0; }
  .compare-cell-lbl { display: inline-block; font-family: var(--im-font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--im-ink-subtle); font-weight: 600; }
}
@media (max-width: 640px) {
  .pricing { padding: 0 16px; }
  .tier-inner { padding: 28px 22px; }
  .tier-amount { font-size: 38px; }
  .pricing-toggle-btn { padding: 8px 16px; font-size: 13px; }
  .pricing-custom { grid-template-columns: 1fr; padding: 28px 22px; gap: 20px; }
}

/* ── Help Center ─────────────────────────────────────────────────────────── */

/* Hero */
.help-hero {
  width: 100%; max-width: 760px; margin: 100px auto 56px; padding: 0 24px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px;
}
.help-title {
  margin: 0; font-size: clamp(40px, 5.4vw, 60px); line-height: 1.02;
  letter-spacing: -0.035em; font-weight: 600; color: var(--im-ink);
}
.help-title em { font-style: normal; color: var(--im-accent); }
.help-lede { margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--im-ink-muted); max-width: 520px; }

/* Big glass search */
.help-search {
  display: flex; align-items: center; gap: 12px;
  width: 100%; max-width: 560px; height: 64px;
  padding: 0 8px 0 22px; border-radius: 18px; margin-top: 8px;
  background: color-mix(in oklab, var(--im-surface) 62%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border: 0.5px solid color-mix(in oklab, var(--im-ink) 12%, transparent);
  box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 14px 40px -16px rgba(0,0,0,.18);
  transition: border-color .15s, box-shadow .2s;
}
[data-theme="dark"] .help-search {
  border-color: rgba(255,255,255,.1);
  box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 14px 40px -16px rgba(0,0,0,.5);
}
.help-search:focus-within {
  border-color: var(--im-ink);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--im-ink) 8%, transparent), 0 1px 0 rgba(255,255,255,.45) inset;
}
.help-search-ico { display: inline-flex; color: var(--im-ink-subtle); flex-shrink: 0; }
.help-search-input {
  flex: 1 1 0; min-width: 0; border: 0; outline: 0; background: transparent;
  color: var(--im-ink); font-family: var(--im-font-ui); font-size: 16px;
  letter-spacing: -0.005em; height: 100%;
}
.help-search-input::placeholder { color: var(--im-ink-subtle); }
.help-search-kbd {
  font-family: var(--im-font-mono); font-size: 11px; font-weight: 600;
  color: var(--im-ink-muted); background: color-mix(in oklab, var(--im-ink) 6%, transparent);
  border: 0.5px solid var(--im-border-hi); border-radius: 6px;
  padding: 3px 8px; flex-shrink: 0;
}

/* Suggestion chips */
.help-suggest {
  display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center; justify-content: center; margin-top: 4px;
}
.help-suggest-lbl {
  font-size: 12px; color: var(--im-ink-subtle); letter-spacing: 0.04em;
  text-transform: uppercase; font-family: var(--im-font-mono); margin-right: 4px;
}
.help-suggest-chip {
  display: inline-flex; border: 0.5px solid var(--im-border-hi);
  background: color-mix(in oklab, var(--im-surface) 55%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  color: var(--im-ink-muted); font-family: var(--im-font-ui);
  font-size: 12.5px; padding: 6px 12px; border-radius: 999px;
  text-decoration: none; transition: background .15s, border-color .15s, color .15s;
}
.help-suggest-chip:hover { border-color: var(--im-ink); color: var(--im-ink); text-decoration: none; }

/* Section wrapper */
.help-section { width: 100%; max-width: 1100px; margin: 0 auto 64px; padding: 0 24px; }
.help-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 20px; gap: 16px;
}
.help-section-title { margin: 0; font-size: clamp(20px,2.4vw,24px); font-weight: 600; letter-spacing: -0.02em; color: var(--im-ink); }
.help-section-more { font-size: 13px; color: var(--im-ink-muted); text-decoration: none; transition: color .15s; }
.help-section-more:hover { color: var(--im-ink); text-decoration: none; }

/* Topic cards */
.topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 12px; }
.topic {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 14px; padding: 18px; border-radius: 16px;
  color: var(--im-ink); text-decoration: none;
  transition: transform .15s, border-color .15s;
}
.topic:hover { transform: translateY(-2px); border-color: var(--im-ink); text-decoration: none; }
.topic:hover .topic-arrow { transform: translateX(2px); color: var(--im-ink); }
.topic-ico {
  width: 44px; height: 44px; border-radius: 12px;
  background: color-mix(in oklab, var(--im-accent) 14%, transparent);
  color: var(--im-accent);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.topic-ico svg { width: 20px; height: 20px; }
.topic-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.topic-title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--im-ink); }
.topic-desc { font-size: 12.5px; color: var(--im-ink-muted); line-height: 1.4; }
.topic-count { font-size: 11px; color: var(--im-ink-subtle); font-family: var(--im-font-mono); letter-spacing: 0.04em; text-transform: uppercase; margin-top: 4px; }
.topic-arrow { color: var(--im-ink-subtle); font-size: 14px; transition: transform .15s, color .15s; }

/* Article list (flat, border-separated) */
.articles { display: flex; flex-direction: column; }
.article {
  display: flex; flex-direction: column; gap: 8px;
  padding: 22px 4px; border-top: 0.5px solid var(--im-border);
  color: var(--im-ink); text-decoration: none;
  transition: padding-left .15s ease;
}
.article:last-child { border-bottom: 0.5px solid var(--im-border); }
.article:hover { padding-left: 12px; text-decoration: none; }
.article:hover .article-go { color: var(--im-accent); }
.article-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.article-title { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.015em; color: var(--im-ink); }
.article-topic { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--im-accent); font-weight: 600; font-family: var(--im-font-mono); flex-shrink: 0; }
.article-snippet { margin: 0; font-size: 14px; color: var(--im-ink-muted); line-height: 1.55; max-width: 720px; }
.article-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; gap: 12px; }
.article-updated { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-family: var(--im-font-mono); color: var(--im-ink-subtle); }
.article-go { font-size: 12.5px; color: var(--im-ink-muted); font-weight: 500; transition: color .15s; }

/* Breadcrumb */
.help-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--im-ink-subtle); margin-bottom: 28px; flex-wrap: wrap; }
.help-breadcrumb a { color: var(--im-ink-muted); text-decoration: none; transition: color .12s; }
.help-breadcrumb a:hover { color: var(--im-ink); }
.help-breadcrumb-sep { opacity: .4; }

/* Category header */
.help-cat-header { display: flex; align-items: center; gap: 18px; margin-bottom: 32px; }
.help-cat-header-icon { font-size: 40px; line-height: 1; flex-shrink: 0; }
.help-cat-header-title { font-size: clamp(24px,3vw,36px); font-weight: 600; letter-spacing: -.02em; color: var(--im-ink); margin: 0 0 4px; }
.help-cat-header-desc { font-size: 15px; color: var(--im-ink-muted); margin: 0; }

/* Single article */
.help-single-grid { display: grid; grid-template-columns: 1fr 260px; gap: 40px; align-items: start; }
.help-single-article { padding: 32px; border-radius: 20px; }
.help-single-h { font-size: clamp(22px,3vw,30px); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; color: var(--im-ink); margin: 0 0 10px; }
.help-single-meta { font-size: 11.5px; color: var(--im-ink-subtle); font-family: var(--im-font-mono); margin-bottom: 28px; display: flex; align-items: center; gap: 6px; }
.help-single-body { font-size: 15px; color: var(--im-ink-muted); line-height: 1.75; }
.help-single-body h1,.help-single-body h2,.help-single-body h3 { color: var(--im-ink); margin-top: 28px; }
.help-single-body a { color: var(--im-accent); }
.help-single-body code { background: color-mix(in oklab, var(--im-ink) 8%, transparent); padding: 2px 6px; border-radius: 5px; font-family: var(--im-font-mono); font-size: .875em; }
.help-single-body pre { background: color-mix(in oklab, var(--im-ink) 6%, transparent); padding: 16px; border-radius: 10px; overflow-x: auto; font-family: var(--im-font-mono); font-size: 13px; margin: 16px 0; }
.help-single-cta { text-align: center; padding: 24px; border-radius: 16px; margin-top: 16px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.help-single-cta p { font-size: 13.5px; color: var(--im-ink-muted); margin: 0; }

/* Sidebar related */
.help-sidebar-h { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--im-ink-subtle); margin-bottom: 12px; }
.help-related { display: flex; flex-direction: column; gap: 4px; }
.help-related a {
  display: block; padding: 10px 14px; border-radius: 10px;
  font-size: 13.5px; color: var(--im-ink-muted); text-decoration: none;
  border: 0.5px solid transparent;
  transition: border-color .12s, color .12s, background .12s;
}
.help-related a:hover { color: var(--im-ink); border-color: var(--im-border-hi); background: color-mix(in oklab, var(--im-surface) 60%, transparent); text-decoration: none; }

/* Empty state */
.help-empty { width: 100%; max-width: 720px; margin: 0 auto 64px; padding: 0 24px; }
.help-empty-card { text-align: center; padding: 40px 32px; border-radius: 22px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.help-empty-title { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: var(--im-ink); }
.help-empty-lede { margin: 0; font-size: 14.5px; color: var(--im-ink-muted); max-width: 380px; }
.help-empty-actions { display: flex; gap: 10px; margin-top: 4px; flex-wrap: wrap; justify-content: center; }

/* Closing CTA */
.help-closer { width: 100%; max-width: 1100px; margin: 24px auto 60px; padding: 0 24px; }
.help-closer-card { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 32px; padding: 32px 36px; border-radius: 24px; }
.help-closer-body { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.help-closer-title { margin: 0; font-size: clamp(22px,2.6vw,28px); letter-spacing: -0.02em; line-height: 1.15; font-weight: 600; color: var(--im-ink); }
.help-closer-lede { margin: 0; font-size: 14.5px; color: var(--im-ink-muted); line-height: 1.5; max-width: 480px; }
.help-closer-actions { display: flex; gap: 10px; flex-shrink: 0; }

/* Responsive */
@media (max-width: 720px) {
  .help-hero { margin-top: 80px; margin-bottom: 40px; }
  .help-search { height: 56px; padding-left: 18px; }
  .help-search-input { font-size: 15px; }
  .topics { grid-template-columns: minmax(0,1fr); }
  .topic { padding: 16px; }
  .article-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .article-title { font-size: 16px; }
  .help-single-grid { grid-template-columns: 1fr; }
  .help-closer-card { grid-template-columns: 1fr; padding: 28px 22px; gap: 20px; }
  .help-closer-actions { flex-wrap: wrap; }
  .help-closer-actions .iny-cta-btn,
  .help-closer-actions .iny-ghost-btn { flex: 1 0 100%; justify-content: center; }
}