/* PassKub — Official website
   Clean, minimal, single (green) brand tone. Brand tokens mirror
   design/brand.md exactly — keep them in sync if that file changes. */

:root {
  --icon-green: #4caf50;
  --green-500: #22c55e;
  --green-600: #16a34a;
  --green-700: #15803d;
  --green-50: #f0fdf4;

  --ink-900: #0b1220;
  --ink-600: #475569;
  --ink-400: #94a3b8;

  --surface: #ffffff;
  --surface-alt: #f7faf8;
  --surface-card: #ffffff;
  --border: #e6ebe8;

  --danger: #ef4444;
  --warn: #f59e0b;
  --ok: #22c55e;

  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-tap: 150ms;
  --dur-enter: 250ms;
  --dur-page: 350ms;

  --shadow-sm: 0 1px 2px rgba(11, 18, 32, 0.06);
  --shadow-md: 0 8px 24px rgba(11, 18, 32, 0.08);
  --shadow-lg: 0 24px 48px rgba(11, 18, 32, 0.12);

  --header-h: 72px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: #0b1220;
    --surface-alt: #0e1524;
    --surface-card: #131c2b;
    --border: #1f2937;
    --ink-900: #f1f5f9;
    --ink-600: #b7c2d0;
    --ink-400: #7c8aa0;
    --green-50: #0f2417;
    color-scheme: dark;
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: "Google Sans Text", "Google Sans", Roboto, "Segoe UI", Arial, sans-serif;
  color: var(--ink-900);
  background: var(--surface);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: "Google Sans", "Google Sans Text", Roboto, "Segoe UI", Arial, sans-serif;
  line-height: 1.2;
  margin: 0 0 var(--space-3);
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 var(--space-4);
  color: var(--ink-600);
}

a {
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
}

.muted {
  color: var(--ink-600);
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--green-600);
  color: #fff;
  padding: var(--space-2) var(--space-4);
  border-radius: 0 0 var(--radius-sm) 0;
  z-index: 1000;
}
.skip-link:focus {
  left: 0;
}

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.wrap-narrow {
  max-width: 760px;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-enter) var(--ease), box-shadow var(--dur-enter) var(--ease);
}
.site-header.scrolled {
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-sm);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  font-weight: 700;
  font-size: 18px;
  color: var(--ink-900);
}
.brand-mark {
  border-radius: 8px;
}

.site-nav {
  display: flex;
  gap: var(--space-6);
}
.site-nav a {
  text-decoration: none;
  color: var(--ink-600);
  font-weight: 500;
  font-size: 15px;
  padding: var(--space-2) 0;
  position: relative;
  transition: color var(--dur-tap) var(--ease);
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -2px;
  height: 2px;
  background: var(--green-600);
  border-radius: 2px;
  transition: right var(--dur-enter) var(--ease);
}
.site-nav a:hover,
.site-nav a.active {
  color: var(--ink-900);
}
.site-nav a:hover::after,
.site-nav a.active::after {
  right: 0;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
  padding: 0;
}
.nav-toggle span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--ink-900);
  transition: transform var(--dur-tap) var(--ease), opacity var(--dur-tap) var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border-radius: var(--radius-sm);
  padding: 12px 22px;
  font-family: inherit;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-tap) var(--ease), box-shadow var(--dur-tap) var(--ease),
    background var(--dur-tap) var(--ease), border-color var(--dur-tap) var(--ease), opacity var(--dur-tap) var(--ease);
}
.btn:active {
  transform: scale(0.97);
}
.btn-sm {
  padding: 8px 16px;
  font-size: 14px;
}
.btn-lg {
  padding: 14px 28px;
  font-size: 16px;
}
.btn-block {
  width: 100%;
}
.btn-primary {
  background: var(--green-600);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
  background: var(--green-700);
  box-shadow: var(--shadow-md);
}
.btn-outline {
  background: transparent;
  border-color: var(--border);
  color: var(--ink-900);
}
.btn-outline:hover {
  border-color: var(--green-600);
  color: var(--green-600);
}
.btn-ghost {
  background: transparent;
  color: var(--ink-900);
}
.btn-ghost:hover {
  color: var(--green-600);
}
.btn[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}
.btn svg {
  width: 16px;
  height: 16px;
  flex: none;
}

/* ---------- Premium icon "chip" buttons (used in the live demos) ---------- */
.btn-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  color: var(--ink-900);
  border-radius: 999px;
  padding: 8px 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-tap) var(--ease), border-color var(--dur-tap) var(--ease),
    color var(--dur-tap) var(--ease), transform var(--dur-tap) var(--ease), box-shadow var(--dur-tap) var(--ease);
}
.btn-chip svg {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--green-600);
  transition: color var(--dur-tap) var(--ease);
}
.btn-chip:hover {
  background: var(--green-50);
  border-color: color-mix(in srgb, var(--green-500) 45%, var(--border));
  color: var(--green-700);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.btn-chip:active {
  transform: scale(0.97);
}
.btn-chip-xs {
  padding: 4px 10px;
  font-size: 12px;
  gap: 4px;
}
.btn-chip-xs svg {
  width: 13px;
  height: 13px;
}

/* ---------- Hero ---------- */
.hero {
  padding: 64px 0 40px;
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-8);
  align-items: center;
}
.eyebrow {
  color: var(--green-600);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 var(--space-3);
}
.hero h1 {
  font-size: clamp(32px, 5vw, 52px);
}
.hero-sub {
  font-size: 17px;
  max-width: 52ch;
}
.hero-actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin: var(--space-6) 0 var(--space-6);
}
.trust-strip {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  padding: 0;
  margin: 0;
  font-size: 13px;
  color: var(--ink-600);
}
.trust-strip li {
  position: relative;
  padding-left: var(--space-4);
}
.trust-strip li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green-500);
}

.hero-art {
  position: relative;
  min-height: 320px;
}
.hero-glyph {
  position: absolute;
  right: 8%;
  bottom: 0;
  width: 120px;
  opacity: 0.9;
  filter: drop-shadow(var(--shadow-lg));
  animation: floaty 6s ease-in-out infinite;
}
.hero-card {
  position: absolute;
  width: 220px;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-4);
  animation: floaty 7s ease-in-out infinite;
}
.hero-card-1 {
  left: 4%;
  top: 6%;
}
.hero-card-2 {
  left: 22%;
  top: 46%;
  animation-delay: 1.2s;
}
.hero-card-row {
  font-size: 13px;
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
}
.hero-card-row.muted {
  color: var(--ink-600);
  font-weight: 500;
}
.hero-card-row.mono {
  font-family: inherit;
  color: var(--ink-400);
  letter-spacing: 0.1em;
}
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.dot-ok {
  background: var(--ok);
}
.dot-warn {
  background: var(--warn);
}

@keyframes floaty {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.hero-locale-note {
  margin-top: var(--space-3);
  font-size: 13px;
}

/* ---------- Platform strip ---------- */
.platform-strip {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface-alt);
}
.platform-strip-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  font-weight: 600;
  color: var(--ink-600);
  font-size: 14px;
}
.platform-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform 250ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 250ms cubic-bezier(0.22, 1, 0.36, 1);
}
.platform-item img {
  width: 22px;
  height: 22px;
  flex: none;
}
.platform-item:hover {
  transform: translateY(-2px);
  opacity: 0.85;
}
@media (prefers-reduced-motion: reduce) {
  .platform-item {
    transition: none;
  }
  .platform-item:hover {
    transform: none;
  }
}

/* ---------- Product preview (real device mockups) ---------- */
.showcase-tabs,
.demo-mode-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.showcase-tab,
.demo-mode-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--surface-card);
  border: 1px solid var(--border);
  color: var(--ink-600);
  border-radius: 999px;
  padding: 10px 18px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-tap) var(--ease), border-color var(--dur-tap) var(--ease),
    color var(--dur-tap) var(--ease), box-shadow var(--dur-tap) var(--ease);
}
.demo-mode-tabs {
  margin: var(--space-3) 0;
}
.showcase-tab-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  background: var(--surface-alt);
  color: var(--ink-400);
  font-size: 12px;
  font-weight: 700;
  transition: background var(--dur-tap) var(--ease), color var(--dur-tap) var(--ease);
}
.showcase-tab:hover,
.demo-mode-tab:hover {
  border-color: color-mix(in srgb, var(--green-500) 40%, var(--border));
  color: var(--ink-900);
}
.showcase-tab.is-active,
.demo-mode-tab.is-active {
  background: var(--green-600);
  border-color: var(--green-600);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.showcase-tab.is-active .showcase-tab-num {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.showcase-caption {
  text-align: center;
  max-width: 52ch;
  margin: 0 auto var(--space-8);
  color: var(--ink-600);
  min-height: 44px;
}

.showcase-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(28px, 6vw, 72px);
  padding: var(--space-4) 0;
}

/* Shared "device" chrome */
.device {
  position: relative;
  filter: drop-shadow(var(--shadow-lg));
}

/* Desktop mockup — Surface Laptop-style: metallic lid + keyboard deck. */
.device-laptop {
  flex: 1 1 560px;
  max-width: 640px;
  width: 100%;
}
.device-laptop-lid {
  position: relative;
  background: linear-gradient(155deg, #4a4f57, #1d2025);
  border-radius: 16px 16px 5px 5px;
  padding: 16px 16px 20px;
}
.device-laptop-cam {
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #0a0c0e;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.05);
}
.device-laptop-screen {
  position: relative;
  aspect-ratio: 1134 / 669;
  border-radius: 4px;
  overflow: hidden;
  background: #0b1220;
}
.device-laptop-base {
  height: 16px;
  margin: 0 -10px;
  background: linear-gradient(180deg, #e4e7ea, #b7bcc2);
  border-radius: 0 0 12px 12px;
  position: relative;
}
.device-laptop-base::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100px;
  height: 7px;
  transform: translateX(-50%);
  background: inherit;
  border-radius: 0 0 10px 10px;
  box-shadow: inset 0 3px 4px rgba(0, 0, 0, 0.22);
}

/* Mobile mockup — Google Pixel-style: rounded polycarbonate frame. */
.device-phone {
  flex: 0 0 auto;
  width: min(240px, 58vw);
  background: linear-gradient(160deg, #33373e, #121316);
  border-radius: 36px;
  padding: 10px;
}
.device-phone-cam {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #05070a;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.05);
  z-index: 2;
}
.device-phone-screen {
  position: relative;
  aspect-ratio: 321 / 672;
  border-radius: 27px;
  overflow: hidden;
  background: #fff;
}
.device-phone-btn {
  position: absolute;
  background: linear-gradient(160deg, #3a3f47, #1a1c20);
  border-radius: 3px;
}
.device-phone-btn-power {
  top: 130px;
  right: -3px;
  width: 3px;
  height: 46px;
}
.device-phone-btn-vol {
  top: 90px;
  left: -3px;
  width: 3px;
  height: 62px;
}

/* Slide crossfade — same stage, swap the visible screenshot per tab. */
.showcase-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--dur-page) var(--ease);
}
.showcase-img.is-active {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .showcase-img {
    transition: none;
  }
}

/* ---------- Sections ---------- */
.section {
  padding: 88px 0;
}
.section-alt {
  background: var(--surface-alt);
}
.section-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--space-8);
}
.section-head h2 {
  font-size: clamp(26px, 3.4vw, 36px);
}
.section-sub {
  font-size: 16px;
}

.grid {
  display: grid;
  gap: var(--space-6);
}
.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}
.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
.span-2 {
  grid-column: span 2;
}

.card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  transition: transform var(--dur-enter) var(--ease), box-shadow var(--dur-enter) var(--ease),
    border-color var(--dur-enter) var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--green-500) 40%, var(--border));
}

.feature-card h3 {
  font-size: 18px;
}
.feature-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--green-50);
  color: var(--green-600);
  margin-bottom: var(--space-4);
}
.feature-icon svg {
  width: 24px;
  height: 24px;
}

/* ---------- Live demos (encryption playground + Quick Fill) ---------- */
.demo-intro,
.demo-grid {
  /* This section must render in Google Sans only — no monospace fallback
     anywhere, even for code-like content (ciphertext preview, mono fields). */
  font-family: "Google Sans", "Google Sans Text", Roboto, "Segoe UI", Arial, sans-serif;
}
.demo-intro {
  text-align: center;
  max-width: 640px;
  margin: 72px auto var(--space-8);
}
.demo-intro h3 {
  font-size: clamp(20px, 2.6vw, 26px);
}
.demo-grid {
  /* Override .grid-2's default 1fr (= minmax(auto, 1fr)) tracks so these
     content-heavy cards can shrink with the viewport instead of forcing
     horizontal scroll before the single-column breakpoint kicks in. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.demo-grid[hidden] {
  /* .demo-grid's own display:grid (equal specificity to the UA [hidden]
     rule) would otherwise win the cascade and keep this panel visible
     while its "This device" tab isn't selected — same fix pattern as
     .qf-idle[hidden]/.qf-wait-shape[hidden] below. */
  display: none;
}

.demo-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}
.demo-card[hidden] {
  /* Same [hidden]-vs-own-display cascade collision as .demo-grid[hidden]
     above — #webtestCard is a .demo-card and gets toggled via the This
     device/Cross devices tab switch, so it needs this override too. */
  display: none;
}
.demo-card-head {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}
.demo-card-head .feature-icon {
  margin-bottom: 0;
  flex: none;
}
.demo-card-head h3 {
  font-size: 18px;
  margin-bottom: var(--space-1);
}
.demo-card-head p {
  margin: 0;
  font-size: 14px;
}

.demo-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}
.demo-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-900);
  margin-top: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.demo-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 50%;
  background: var(--green-600);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.demo-field-row {
  display: flex;
  gap: var(--space-2);
  align-items: stretch;
  flex-wrap: wrap;
}
.demo-input {
  flex: 1;
  min-width: 0;
  font-family: inherit;
  font-size: 14px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-900);
  transition: border-color var(--dur-tap) var(--ease), box-shadow var(--dur-tap) var(--ease);
}
.demo-input:focus {
  outline: none;
  border-color: var(--green-600);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-500) 20%, transparent);
}

/* Premium floating-label field: the hint sits inside the box until the
   field is focused or filled, then floats to the top-left as a small
   label — instead of a placeholder that just vanishes on typing. Works
   via the native :placeholder-shown pseudo-class, so every field only
   needs an (even blank) placeholder=" " attribute, no JS required. */
.field-float {
  position: relative;
}
.field-float .demo-input {
  width: 100%;
}
.field-float-label {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  transform-origin: left center;
  font-size: 14px;
  line-height: 1;
  color: var(--ink-400);
  pointer-events: none;
  max-width: calc(100% - 54px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 0 3px;
  border-radius: 3px;
  transition: top var(--dur-tap) var(--ease), transform var(--dur-tap) var(--ease),
    color var(--dur-tap) var(--ease), background var(--dur-tap) var(--ease),
    max-width var(--dur-tap) var(--ease);
}
.field-float input:focus ~ .field-float-label,
.field-float input:not(:placeholder-shown) ~ .field-float-label {
  top: 0;
  transform: translateY(-50%) scale(0.8);
  color: var(--green-600);
  font-weight: 700;
  background: var(--surface);
  max-width: calc(100% - 20px);
}

.demo-input-wrap {
  position: relative;
}
.demo-input-wrap .demo-input {
  padding-right: 40px;
}
.demo-field-row .field-float {
  flex: 1;
  min-width: 0;
}
.demo-input-icon-btn {
  position: absolute;
  top: 7px;
  right: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: none;
  border: none;
  border-radius: 50%;
  background: var(--surface-alt);
  color: var(--green-600);
  font-family: inherit;
  cursor: pointer;
  transition: background var(--dur-tap) var(--ease), color var(--dur-tap) var(--ease),
    transform var(--dur-tap) var(--ease);
}
.demo-input-icon-btn svg {
  width: 15px;
  height: 15px;
  flex: none;
}
.demo-input-icon-btn:hover {
  background: var(--green-50);
  color: var(--green-700);
  transform: translateY(-1px);
}
.demo-input-icon-btn:active {
  transform: scale(0.92);
}

.demo-dropzone {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  text-align: center;
  padding: var(--space-4);
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-alt);
  transition: border-color var(--dur-tap) var(--ease), background var(--dur-tap) var(--ease);
}
.demo-dropzone svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--green-600);
}
.demo-dropzone-text {
  margin: 0;
  font-size: 13px;
  color: var(--ink-600);
}
.demo-dropzone-filename {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-900);
  word-break: break-all;
}
.demo-dropzone.dragover {
  border-color: var(--green-600);
  background: var(--green-50);
}

.demo-btn-wide {
  width: 100%;
  margin-top: var(--space-2);
}

.demo-status {
  font-size: 13px;
  min-height: 18px;
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}
.demo-status:empty {
  display: block;
}
.demo-status-icon {
  display: inline-flex;
  flex: none;
  margin-top: 1px;
}
.demo-status-icon svg {
  width: 15px;
  height: 15px;
  flex: none;
}
.demo-status.ok {
  color: var(--green-700);
  font-weight: 600;
}
.demo-status.err {
  color: var(--danger);
  font-weight: 600;
}
.demo-status.pending {
  color: var(--warn);
  font-weight: 600;
}

.demo-code {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  font-size: 12px;
  color: var(--ink-600);
  overflow-wrap: break-word;
  word-break: break-all;
  max-height: 120px;
  overflow-y: auto;
  margin: 0;
}

.demo-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--space-4) 0 var(--space-2);
}

/* Quick Fill cross-device demo */
.qf-devices {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--space-4);
  align-items: stretch;
  margin-top: var(--space-2);
}
#qfResetBtn {
  /* Match the Encryption card's trailing whitespace: its last element
     (#encDecryptStatus) reserves min-height:18px plus the demo-body's
     gap:var(--space-2) below the Unlock row, giving 26px of quiet space
     before the card's own padding. The Reset button has no status
     placeholder after it, so add the same 26px here to keep both cards'
     bottom margins visually equal. */
  margin-bottom: 26px;
}
.qf-device {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}
.qf-device-label {
  font-weight: 700;
  font-size: 13px;
  margin: 0;
  color: var(--ink-900);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.qf-device-label svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--green-600);
}
.qf-fake-form {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  font-size: 13px;
  min-width: 0;
}
.qf-fake-site {
  font-weight: 600;
  margin: 0 0 var(--space-2);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.qf-fake-field {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
  color: var(--ink-600);
  min-width: 0;
}
.qf-fake-field .mono {
  font-weight: 600;
  color: var(--ink-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;
}
.qf-idle {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  color: var(--ink-400);
  font-size: 13px;
  text-align: center;
  padding: var(--space-4) 0;
}
.qf-idle[hidden] {
  display: none;
}
.qf-request-card {
  background: var(--green-50);
  border: 1px solid color-mix(in srgb, var(--green-500) 40%, var(--border));
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  font-size: 13px;
}
.qf-request-card p {
  margin: 0 0 var(--space-2);
}
.qf-shape-hint {
  font-size: 12px;
  color: var(--ink-600);
  text-align: center;
  margin: 0 0 var(--space-2);
}
.qf-shape-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin: 0 0 var(--space-3);
}
.qf-shape-btn {
  border: none;
  background: transparent;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  flex: none;
  font-family: inherit;
  transition: transform var(--dur-tap) var(--ease);
}
.qf-shape-btn:hover {
  transform: translateY(-2px) scale(1.05);
}
.qf-shape-btn:active {
  transform: scale(0.94);
}
.qf-deny-link {
  width: 100%;
  justify-content: center;
}
.qf-wait-shape {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) 0 0;
}
.qf-wait-shape[hidden] {
  display: none;
}
.qf-shape {
  position: relative;
  display: inline-flex;
  flex: none;
}
.qf-shape svg {
  display: block;
}
.qf-shape-code {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.qf-transfer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
}
.qf-transfer-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border);
  transition: background var(--dur-tap) var(--ease);
}
.qf-transfer.active .qf-transfer-dot {
  background: var(--green-500);
  animation: qfPulse 700ms var(--ease) infinite;
}
@keyframes qfPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.6);
    opacity: 0.5;
  }
}

/* Real cross-device test (webtest.js) */
.wt-card {
  max-width: 760px;
  margin: 0 auto;
}
.wt-step + .wt-step {
  margin-top: var(--space-4);
}
.wt-providers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.wt-providers + .demo-status {
  margin-top: var(--space-2);
}
.wt-provider-btn {
  flex: 1 1 140px;
  gap: var(--space-2);
}
.wt-provider-btn svg {
  flex: none;
}
.wt-account-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 13px;
  font-weight: 600;
  color: var(--green-700);
  background: var(--green-50);
  border: 1px solid color-mix(in srgb, var(--green-500) 40%, var(--border));
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
  word-break: break-all;
}
.wt-role-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.wt-role-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-1);
  text-align: left;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-family: inherit;
  cursor: pointer;
  min-width: 0;
  transition: border-color var(--dur-tap) var(--ease), transform var(--dur-tap) var(--ease),
    background var(--dur-tap) var(--ease);
}
.wt-role-btn svg {
  width: 20px;
  height: 20px;
  color: var(--green-600);
  flex: none;
}
.wt-role-btn strong {
  font-size: 14px;
  color: var(--ink-900);
}
.wt-role-btn .muted {
  font-size: 12px;
  margin: 0;
}
.wt-role-btn:hover {
  border-color: var(--green-500);
  background: var(--green-50);
  transform: translateY(-1px);
}
.wt-preflight {
  margin-top: var(--space-3);
}
.wt-hint {
  font-size: 12px;
  color: var(--ink-600);
  margin: var(--space-2) 0 0;
}
/* #wtSenderPanel/#wtReceiverPanel are plain blocks (not flex containers),
   so without this their stacked children (fake form, button, idle note/
   request card, wait-shape, result) would butt directly against each
   other with zero gap. */
#wtSenderPanel > * + *,
#wtReceiverPanel > * + * {
  margin-top: var(--space-3);
}
.qf-fake-form .demo-field-row + .demo-field-row {
  margin-top: var(--space-3);
}

/* ---------- Download ---------- */
.version-badge {
  display: inline-block;
  font-weight: 600;
  color: var(--green-600);
}
.platform-card h3 {
  font-size: 20px;
  margin-bottom: var(--space-1);
}
.platform-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.platform-buttons-row {
  gap: var(--space-4);
}
.download-note {
  text-align: center;
  font-size: 13px;
  margin-top: var(--space-2);
}
.download-note code {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  padding: 1px 6px;
  border-radius: 6px;
}

/* ---------- Pricing ---------- */
.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
}
.pricing-head {
  margin-bottom: var(--space-4);
}
.pricing-tagline {
  font-size: 14px;
  margin: 0;
}
.pricing-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-6);
  flex: 1;
}
.pricing-list li {
  padding: 8px 0 8px var(--space-5);
  position: relative;
  font-size: 14.5px;
  color: var(--ink-900);
  border-top: 1px solid var(--border);
}
.pricing-list li:first-child {
  border-top: none;
}
.pricing-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--green-600);
  font-weight: 700;
}
.pricing-card-featured {
  border-color: var(--green-600);
  box-shadow: var(--shadow-md);
}
.pricing-badge {
  position: absolute;
  top: -12px;
  right: 24px;
  background: var(--green-600);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
}
.pricing-card .btn-block + .btn-block {
  margin-top: var(--space-2);
}

/* ---------- Business "Offer" dialog (self-serve seat-pool checkout) ---------- */
.offer-dialog {
  width: min(560px, calc(100vw - var(--space-6)));
  max-height: calc(100vh - var(--space-6));
  overflow-y: auto;
  border: none;
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-lg);
  background: var(--surface-card);
  color: var(--ink-900);
}
.offer-dialog::backdrop {
  background: rgba(11, 18, 32, 0.55);
}
.offer-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.offer-dialog-head h3 {
  margin: 0 0 var(--space-2);
}
.offer-dialog-head .muted {
  margin: 0;
  font-size: 13.5px;
}
.offer-form > * + * {
  margin-top: var(--space-3);
}
.offer-address-field label {
  display: block;
  font-size: 13px;
  color: var(--ink-600);
  margin-bottom: var(--space-1);
}
.offer-address-field textarea.demo-input {
  width: 100%;
  resize: vertical;
  font-family: inherit;
}
.offer-qty-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-start;
}
.offer-qty-field {
  flex: 1 1 160px;
  min-width: 0;
}
.offer-toggle {
  display: flex;
  gap: 6px;
  border: none;
  padding: 0;
  margin: 0;
}
.offer-toggle legend {
  width: 100%;
  font-size: 12px;
  color: var(--ink-600);
  margin-bottom: var(--space-1);
  padding: 0;
}
.offer-toggle-opt {
  position: relative;
}
.offer-toggle-opt input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.offer-toggle-opt span {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-600);
  cursor: pointer;
  transition: background var(--dur-tap) var(--ease), color var(--dur-tap) var(--ease),
    border-color var(--dur-tap) var(--ease);
}
.offer-toggle-opt input:checked ~ span {
  background: var(--green-600);
  border-color: var(--green-600);
  color: #fff;
}
.offer-toggle-opt input:focus-visible ~ span {
  outline: 2px solid var(--green-600);
  outline-offset: 2px;
}
.offer-summary {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  font-size: 14px;
}
.offer-summary-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 3px 0;
}
.offer-summary-row.total {
  font-weight: 700;
  font-size: 16px;
  border-top: 1px solid var(--border);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
}
.offer-summary-discount {
  color: var(--green-700);
  font-weight: 600;
}
.offer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: flex-end;
}
.offer-actions .btn {
  flex: 1 1 auto;
  min-width: 180px;
  text-align: center;
}

/* ---------- FAQ ---------- */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.faq-item {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
}
.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::after {
  content: "+";
  color: var(--green-600);
  font-size: 20px;
  transition: transform var(--dur-enter) var(--ease);
}
.faq-item[open] summary::after {
  transform: rotate(45deg);
}
.faq-item p {
  margin: var(--space-3) 0 0;
}

/* ---------- CTA banner ---------- */
.cta-banner {
  background: linear-gradient(135deg, var(--green-600), var(--green-700));
  color: #fff;
  padding: 72px 0;
}
.cta-inner {
  text-align: center;
}
.cta-banner h2 {
  color: #fff;
}
.cta-banner p {
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: var(--space-6);
}
.cta-banner .btn-primary {
  background: #fff;
  color: var(--green-700);
}
.cta-banner .btn-primary:hover {
  background: var(--green-50);
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  padding-top: 56px;
  background: var(--surface-alt);
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: var(--space-8);
  flex-wrap: wrap;
  padding-bottom: 40px;
}
.footer-brand {
  max-width: 280px;
}
.footer-cols {
  display: flex;
  gap: var(--space-8);
  flex-wrap: wrap;
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 120px;
}
.footer-col h4 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-400);
  margin-bottom: var(--space-1);
}
.footer-col a {
  text-decoration: none;
  color: var(--ink-600);
  font-size: 14px;
  transition: color var(--dur-tap) var(--ease);
}
.footer-col a:hover {
  color: var(--green-600);
}
.footer-bottom {
  border-top: 1px solid var(--border);
  padding: 20px var(--space-6);
  font-size: 13px;
  color: var(--ink-400);
}

/* ---------- Back to top ---------- */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-card);
  color: var(--ink-900);
  font-family: inherit;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity var(--dur-enter) var(--ease), transform var(--dur-enter) var(--ease);
  z-index: 90;
}
.back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-page) var(--ease), transform var(--dur-page) var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero-inner {
    grid-template-columns: 1fr;
  }
  .hero-art {
    min-height: 240px;
    order: -1;
  }
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .qf-devices {
    grid-template-columns: 1fr;
  }
  .qf-transfer {
    width: auto;
    padding: var(--space-2) 0;
  }
  .qf-transfer .qf-transfer-dot {
    transform: rotate(90deg);
  }
  .device-laptop {
    flex-basis: 100%;
    max-width: 480px;
  }
}

@media (max-width: 720px) {
  .showcase-tab {
    font-size: 13px;
    padding: 8px 14px 8px 8px;
  }
  .showcase-tab-num {
    width: 20px;
    height: 20px;
  }
  .device-phone {
    width: min(210px, 66vw);
  }
}

@media (max-width: 720px) {
  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    padding: var(--space-4) var(--space-6) var(--space-6);
    gap: var(--space-2);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-enter) var(--ease), transform var(--dur-enter) var(--ease);
  }
  .site-nav.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .nav-toggle {
    display: flex;
  }
  .header-actions .btn-sm {
    display: none;
  }
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
  }
  .span-2 {
    grid-column: span 1;
  }
  .platform-buttons-row {
    flex-direction: column;
  }
}