/* ==========================================================================
   TechDesk — design system
   --------------------------------------------------------------------------
   One scale, one palette, one set of components, used by every page.

   The rules here are deliberately few. Everything is built from four
   surfaces (page, raised, sunken, inverted), one accent, a 4px spacing
   scale and two shadows. A page that needs something new should almost
   always be able to say it with what is already below.

   Class names that JavaScript reaches for -- .platform-tile, .quiz-*,
   .carousel-*, .status-msg, .hq-msg, .scrolled, .selected, .active -- are
   part of the contract with app.js and hq.js and must keep their names.
   ========================================================================== */

/* ---- Tokens -------------------------------------------------------------- */

:root {
  /* Neutrals carry a faint blue cast, the same direction as the accent, so
     the greys read as chosen rather than left at default. */
  --ink: #0b0d12;
  --ink-2: #3c4250;
  --ink-3: #6b7280;
  --ink-4: #9aa1ad;

  --page: #ffffff;
  --page-2: #f6f7f9;
  --raised: #ffffff;
  --sunken: #f1f3f6;
  --line: rgba(11, 13, 18, 0.09);
  --line-2: rgba(11, 13, 18, 0.06);

  --accent: #2563eb;
  --accent-ink: #1d4ed8;
  --accent-tint: rgba(37, 99, 235, 0.09);
  --accent-contrast: #ffffff;

  --green: #067647;
  --green-tint: rgba(6, 118, 71, 0.1);
  --amber: #8a5a10;
  --amber-tint: rgba(214, 158, 46, 0.14);

  --inverted: #0b0d12;
  --inverted-ink: #ffffff;

  /* Two shadows. A third would only blur the difference between them. */
  --shadow-sm: 0 1px 2px rgba(11, 13, 18, 0.06), 0 1px 1px rgba(11, 13, 18, 0.04);
  --shadow-md: 0 14px 40px -18px rgba(11, 13, 18, 0.28), 0 2px 8px rgba(11, 13, 18, 0.05);

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Glass, as three values rather than a look copied between rules.
     Used on the things that float -- the navbar, a screenshot frame, a
     device -- and deliberately not on ordinary content, which stays on
     solid surfaces so the page reads calm and the text stays legible. */
  --glass: rgba(255, 255, 255, 0.72);
  --glass-line: rgba(255, 255, 255, 0.75);
  --glass-blur: saturate(180%) blur(20px);
  --glass-shadow: 0 24px 60px -28px rgba(11, 13, 18, 0.35),
                  0 2px 10px rgba(11, 13, 18, 0.05);

  --gutter: 24px;
  --container: 1200px;
  --section-y: 96px;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

:root[data-theme="dark"] {
  --glass: rgba(22, 26, 34, 0.7);
  --glass-line: rgba(255, 255, 255, 0.1);
  --glass-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.7),
                  0 2px 10px rgba(0, 0, 0, 0.3);
  --ink: #f2f4f8;
  --ink-2: #c3c9d4;
  --ink-3: #939bab;
  --ink-4: #6d7585;

  --page: #0a0c10;
  --page-2: #0e1116;
  --raised: #14181f;
  --sunken: #1a1f28;
  --line: rgba(255, 255, 255, 0.1);
  --line-2: rgba(255, 255, 255, 0.06);

  --accent: #5b8cff;
  --accent-ink: #7ea3ff;
  --accent-tint: rgba(91, 140, 255, 0.14);
  --accent-contrast: #07090d;

  --green: #4ade80;
  --green-tint: rgba(74, 222, 128, 0.14);
  --amber: #f0c26b;
  --amber-tint: rgba(240, 194, 107, 0.14);

  --inverted: #f2f4f8;
  --inverted-ink: #0a0c10;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 18px 44px -20px rgba(0, 0, 0, 0.8), 0 2px 10px rgba(0, 0, 0, 0.4);
}

@media (max-width: 760px) {
  :root { --gutter: 20px; --section-y: 64px; }
}

/* ---- Base ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

/* The hidden attribute has to beat a component's own display. .callout sets
   display:flex, so a callout marked hidden stayed on screen -- the buy page
   showed "you started an order here before" to everyone, including the shops
   that had not. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; }
img { height: auto; display: block; }

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.021em;
  text-wrap: balance;
  font-weight: 700;
}
h1 { font-size: clamp(2.1rem, 1.3rem + 3.4vw, 3.6rem); letter-spacing: -0.03em; }
h2 { font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.35rem); letter-spacing: -0.025em; }
h3 { font-size: 1.24rem; }
h4 { font-size: 1.02rem; letter-spacing: -0.012em; }
p { margin: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-ink); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.wrap-narrow { max-width: 720px; }

section { padding-block: var(--section-y); }
section.tight { padding-block: calc(var(--section-y) * 0.6); }
section.alt { background: var(--page-2); }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--inverted); color: var(--inverted-ink);
  padding: 10px 16px; border-radius: var(--r-sm); font-weight: 600;
}
.skip-link:focus { top: 12px; color: var(--inverted-ink); }

/* ---- Type helpers -------------------------------------------------------- */

.eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.lead { font-size: 1.08rem; color: var(--ink-2); }
.muted { color: var(--ink-3); }
.note { font-size: 0.875rem; color: var(--ink-3); }

.section-head { max-width: 640px; margin-bottom: 48px; }
.section-head .eyebrow { margin-bottom: 12px; }
.section-head h2 { margin-bottom: 14px; }
.section-head p { color: var(--ink-2); font-size: 1.05rem; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--accent-contrast); }
.btn-primary:hover { background: var(--accent-ink); color: var(--accent-contrast); }
.btn-secondary {
  background: var(--raised);
  color: var(--ink);
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.btn-secondary:hover { background: var(--sunken); color: var(--ink); }
.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--sunken); color: var(--ink); }
.btn-sm { height: 38px; padding: 0 16px; font-size: 0.875rem; }
.btn-block { display: flex; width: 100%; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn svg { flex: none; }

/* ---- Cards --------------------------------------------------------------- */

.card {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.card-pad { padding: 28px; }

/* Cards that are a destination (a feature, a tier, a platform tile) get a
   gentle lift on hover -- content cards like .note or .callout stay put. */
a.feature.card:hover, .feature.card:hover,
.tier-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--accent) 25%, var(--line));
}
@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  a.feature.card:hover, .feature.card:hover, .tier-card:hover { transform: none; }
}

/* Glass is spent in three places only: the header, the hero's product
   frame, and the phone frame. Everywhere else is a plain surface. */
.glass {
  background: color-mix(in srgb, var(--raised) 72%, transparent);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
}

/* ---- Header -------------------------------------------------------------- */

header {
  position: sticky;
  top: 0;
  z-index: 60;
  border-bottom: 1px solid transparent;
  background: color-mix(in srgb, var(--page) 76%, transparent);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  transition: border-color 0.2s ease, background 0.2s ease;
}
header.scrolled { border-bottom-color: var(--line); }

/* Anchor targets (in-page jump links, and links from other pages like
   hq.html#monitor) land with their top edge at the viewport top, which the
   sticky 66px header then covers -- so the section looks like it landed
   mid-page instead of at its own top. Push the scroll stop past the header. */
section[id],
main[id] { scroll-margin-top: 90px; }

header nav {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 66px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  flex: none;
}
.logo:hover { color: var(--ink); }
.logo-mark {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: block;
  flex: none;
}

.nav-links { display: flex; align-items: center; gap: 2px; margin-left: 8px; }
.nav-links a {
  padding: 8px 13px;
  border-radius: var(--r-pill);
  font-size: 0.92rem;
  font-weight: 550;
  color: var(--ink-2);
}
.nav-links a:hover { background: var(--sunken); color: var(--ink); }
.nav-links a.current { color: var(--ink); background: var(--sunken); }

.nav-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.icon-btn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--raised);
  color: var(--ink-2);
  cursor: pointer;
  padding: 0;
}
.icon-btn:hover { background: var(--sunken); color: var(--ink); }
.theme-toggle .moon { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .moon { display: block; }

.nav-burger { display: none; }

/* ---- Mobile drawer ------------------------------------------------------- */

.drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
}
.drawer[data-open="true"] { display: block; }
.drawer-scrim {
  position: absolute; inset: 0;
  background: rgba(8, 10, 14, 0.44);
  border: 0; width: 100%; padding: 0;
  animation: fade-in 0.18s ease;
}
.drawer-panel {
  position: absolute;
  top: 0; right: 0;
  width: min(340px, 86vw);
  height: 100%;
  background: var(--page);
  border-left: 1px solid var(--line);
  padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 4px;
  animation: slide-in 0.22s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.drawer-panel a.drawer-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 12px;
  border-radius: var(--r-sm);
  font-size: 1rem;
  font-weight: 550;
  color: var(--ink);
  min-height: 48px;
}
.drawer-panel a.drawer-link:hover { background: var(--sunken); }
.drawer-panel a.drawer-link.current { background: var(--accent-tint); color: var(--accent-ink); }
.drawer-panel a.drawer-link svg { color: var(--ink-3); flex: none; }
.drawer-cta { margin-top: auto; padding-top: 16px; display: grid; gap: 10px; }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-in { from { transform: translateX(14px); opacity: 0.4; } to { transform: none; opacity: 1; } }

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-burger { display: grid; }
  .nav-actions .label-full { display: none; }
  .nav-desktop-cta { display: none; }
}

/* ---- Hero ---------------------------------------------------------------- */

.hero { padding-block: clamp(48px, 6vw, 88px) 0; }
.hero-inner { max-width: 780px; }
.hero .eyebrow { margin-bottom: 18px; }
.hero h1 { margin-bottom: 20px; }
/* A page that isn't the homepage doesn't need the full marketing-headline
   scale -- About and a sub-page's own "Download X" don't carry the same
   weight as "Run your entire shop from one place." */
.hero h1.h1-sm { font-size: clamp(1.8rem, 1.1rem + 2.2vw, 2.6rem); }
.hero p.lead { max-width: 60ch; margin-bottom: 30px; font-size: 1.15rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Positioning strip: three words, no counters. The old animated numbers
   started at "0 Platforms supported", which is the first thing a visitor
   read if the script had not finished. */
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--raised);
  font-size: 0.83rem; font-weight: 600; color: var(--ink-2);
}
.pill svg { color: var(--ink-3); }

/* ---- Product frame (screenshots) ----------------------------------------- */

.frame {
  position: relative;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--raised);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.frame-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-2);
  background: color-mix(in srgb, var(--sunken) 60%, transparent);
}
.frame-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-4); opacity: 0.45; }
.frame-bar span {
  margin-left: 8px; font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-4);
}
.frame img { width: 100%; display: block; }

.hero-shot { margin-top: 52px; text-align: center; }

/* One real shot -- a laptop and a phone side by side -- swapped for the
   theme the page is actually in (app.js sets its src, not this file; see
   applyHeroTheme there). The Web App already gets its own plain "Open Web
   App" link; it looks the same as the desktop app, so there is nothing a
   second screenshot would show that this one doesn't already say. */
.hero-devices {
  display: block;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  border-radius: var(--r-lg);
}

/* ---- Feature grid -------------------------------------------------------- */

/* Six features, so three across rather than four-then-two with a hole in
   the row. */
.features {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .features { grid-template-columns: repeat(3, 1fr); } }
.feature { padding: 26px; }
.feature .icon {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--accent-tint);
  color: var(--accent);
  margin-bottom: 16px;
}
.feature .icon svg { width: 19px; height: 19px; }
.feature h4 { margin-bottom: 7px; }
.feature p { color: var(--ink-3); font-size: 0.93rem; }

/* ---- Flow diagram (offline + HQ) ----------------------------------------- */

/* Stacked on a phone, a row on anything wider. Flex rather than grid so the
   arrows take only the space an arrow needs and the four nodes share the
   rest evenly. */
.flow { display: grid; gap: 10px; }
@media (min-width: 720px) {
  .flow { display: flex; align-items: stretch; gap: 0; }
  .flow-node { flex: 1 1 0; min-width: 0; }
  .flow-arrow { flex: 0 0 auto; }
}
.flow-node {
  text-align: center;
  padding: 22px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--raised);
}
.flow-node .icon {
  width: 36px; height: 36px; margin: 0 auto 12px;
  display: grid; place-items: center;
  border-radius: 10px; background: var(--sunken); color: var(--ink-2);
}
.flow-node strong { display: block; font-size: 0.95rem; }
.flow-node span { font-size: 0.83rem; color: var(--ink-3); }
.flow-node.accent { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.flow-node.accent .icon { background: var(--accent-tint); color: var(--accent); }
.flow-arrow {
  display: grid; place-items: center;
  color: var(--ink-4);
  padding: 0 10px;
}
.flow-arrow svg { transform: rotate(90deg); }
@media (min-width: 720px) { .flow-arrow svg { transform: none; } }

/* ---- Editions ------------------------------------------------------------ */

.editions {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: start;
}
.tier-card { padding: 28px; display: flex; flex-direction: column; height: 100%; }
.tier-card.featured { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.tier-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
.tier-icon {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--sunken); color: var(--ink-2);
}
.tier-badge {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 11px; border-radius: var(--r-pill);
  background: var(--accent-tint); color: var(--accent-ink);
}
.tier-badge.ok { background: var(--green-tint); color: var(--green); }
.tier-badge.soon { background: var(--amber-tint); color: var(--amber); }
.tier-card h3 { margin-bottom: 6px; }
.tier-card .tagline { color: var(--ink-3); font-size: 0.93rem; margin-bottom: 20px; }
.tier-card ul { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 11px; }
.tier-card li { display: flex; gap: 10px; font-size: 0.92rem; color: var(--ink-2); }
.check { color: var(--green); font-weight: 700; flex: none; }
.tier-card .btn { margin-top: auto; }
.tier-meta {
  margin: -6px 0 20px;
  font-size: 0.82rem; color: var(--ink-3);
  display: flex; flex-wrap: wrap; gap: 6px 12px;
}

/* ---- Edition detail panel (home) ----------------------------------------- */

.edition-panel { padding: 28px; }
.edition-panel h3 { margin-bottom: 8px; }
.edition-lead { color: var(--ink-2); margin-bottom: 20px; }
.edition-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.edition-points li { display: flex; gap: 10px; font-size: 0.93rem; color: var(--ink-2); }

/* ---- Steps --------------------------------------------------------------- */

.steps-panel { padding: 30px; }
.steps-list { display: grid; gap: 4px; margin-bottom: 28px; }
.step-row { display: flex; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line-2); }
.step-row:last-child { border-bottom: 0; }
.step-row .num {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 9px;
  display: grid; place-items: center;
  background: var(--sunken); color: var(--ink-2);
  font-size: 0.82rem; font-weight: 700;
}
.step-row b { display: block; font-size: 0.97rem; margin-bottom: 2px; }
.step-row .muted { font-size: 0.9rem; }

.steps-numbered { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.step-card { padding: 24px; }
.step-card .num {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em;
  color: var(--accent); margin-bottom: 12px; display: block;
}
.step-card h4 { margin-bottom: 7px; }
.step-card p { font-size: 0.92rem; color: var(--ink-3); }

/* ---- Phone frame (Monitor) ----------------------------------------------- */

.phone {
  width: 268px;
  max-width: 78vw;
  margin: 0 auto;
  border-radius: 34px;
  padding: 9px;
  background: color-mix(in srgb, var(--raised) 70%, transparent);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.phone img { border-radius: 26px; width: 100%; display: block; }

.monitor-split { display: grid; gap: 40px; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .monitor-split { grid-template-columns: 1.05fr 0.95fr; gap: 56px; } }

/* ---- Download picker ----------------------------------------------------- */

.platform-grid-label {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px;
}
.platform-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 10px;
  margin-bottom: 26px;
}
.platform-tile {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 18px 10px;
  min-height: 92px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--raised);
  color: var(--ink-2);
  font: inherit; font-size: 0.82rem; font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.platform-tile svg { width: 22px; height: 22px; }
.platform-tile:hover { background: var(--sunken); color: var(--ink); }
.platform-tile.selected {
  border-color: var(--accent);
  background: var(--accent-tint);
  color: var(--accent-ink);
}
.platform-tile.disabled, .platform-tile:disabled { opacity: 0.4; cursor: not-allowed; }
.download-confirm-label {
  margin-top: 10px; text-align: center;
  font-size: 0.82rem; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* ---- Forms --------------------------------------------------------------- */

.field { display: block; margin-bottom: 18px; }
.field > span {
  display: block;
  font-size: 0.82rem; font-weight: 600;
  color: var(--ink-2); margin-bottom: 7px;
}
.field > span em { font-weight: 400; font-style: normal; color: var(--ink-4); }
.field input,
.hq-field input {
  width: 100%;
  padding: 13px 15px;
  font: inherit; font-size: 0.97rem;
  color: var(--ink);
  background: var(--sunken);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.field input:focus,
.hq-field input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--raised);
}
.hq-field { display: block; margin-bottom: 18px; }
.hq-field > span {
  display: block; font-size: 0.82rem; font-weight: 600;
  color: var(--ink-2); margin-bottom: 7px;
}
.hq-field > span em { font-weight: 400; font-style: normal; color: var(--ink-4); }
.field-hint { font-size: 0.82rem; color: var(--ink-3); margin: -8px 0 18px; }

.code-input {
  text-align: center;
  letter-spacing: 0.5em;
  font-size: 1.3rem !important;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Status messages: same shape for both scripts. */
.status-msg, .hq-msg {
  display: none;
  margin: 0 0 16px;
  padding: 12px 15px;
  border-radius: var(--r-sm);
  font-size: 0.9rem;
  border: 1px solid transparent;
}
.status-msg.show, .hq-msg.show { display: block; }
.status-msg.ok { background: var(--green-tint); color: var(--green); border-color: color-mix(in srgb, var(--green) 25%, transparent); }
.status-msg.err, .hq-msg.bad { background: rgba(220, 38, 38, 0.1); color: #b91c1c; border-color: rgba(220, 38, 38, 0.24); }
:root[data-theme="dark"] .status-msg.err,
:root[data-theme="dark"] .hq-msg.bad { color: #fca5a5; }

.result-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 14px 16px;
  border-radius: var(--r-sm);
  background: var(--sunken);
  border: 1px dashed var(--line);
  margin-bottom: 10px;
  word-break: break-all;
}

.hq-done { text-align: center; }
.hq-done .tick {
  width: 46px; height: 46px; margin: 0 auto 16px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--green-tint); color: var(--green);
}

/* ---- Recommender (editions page) ----------------------------------------- */

.quiz { overflow: hidden; }
.quiz-toggle {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 20px 24px;
  background: transparent; border: 0; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--ink);
  text-align: left;
}
.quiz-toggle-text { display: inline-flex; align-items: center; gap: 10px; }
.quiz-toggle-text svg { color: var(--ink-3); flex: none; }
.quiz-chevron { transition: transform 0.2s ease; color: var(--ink-3); flex: none; }
.quiz[data-open="true"] .quiz-chevron { transform: rotate(180deg); }
.quiz-body { padding: 0 24px 24px; }
.quiz-progress { height: 3px; border-radius: 3px; background: var(--sunken); margin-bottom: 22px; overflow: hidden; }
.quiz-progress span { display: block; height: 100%; background: var(--accent); width: 0; transition: width 0.3s ease; }
.quiz-question { font-size: 1.06rem; font-weight: 650; margin-bottom: 4px; }
.quiz-hint { font-size: 0.82rem; color: var(--ink-3); margin-bottom: 18px; }
.quiz-options { display: grid; gap: 10px; }
.quiz-option {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 50px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--raised);
  font: inherit; font-size: 0.93rem; color: var(--ink);
  cursor: pointer; text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.quiz-option:hover { border-color: var(--accent); background: var(--accent-tint); }
.quiz-option .arrow { color: var(--ink-4); flex: none; }
.quiz-result .badge {
  display: inline-block; margin-bottom: 12px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 11px; border-radius: var(--r-pill);
  background: var(--accent-tint); color: var(--accent-ink);
}
.quiz-result h4 { font-size: 1.22rem; margin-bottom: 8px; }
.quiz-result p { color: var(--ink-2); margin-bottom: 20px; }
.quiz-result-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.quiz-restart {
  background: transparent; border: 0; cursor: pointer;
  font: inherit; font-size: 0.86rem; color: var(--ink-3); padding: 0;
  text-decoration: underline;
}
.quiz-step-in { animation: fade-up 0.25s ease; }
@keyframes fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---- Final CTA row ------------------------------------------------------- */

.next-steps {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--raised);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
/* Four ways in now, so two across before four -- three columns with a
   fourth item wrapping underneath left a hole in the row. */
@media (min-width: 720px) { .next-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .next-steps { grid-template-columns: repeat(4, 1fr); } }
.next-step {
  display: block;
  padding: 26px;
  color: var(--ink);
  border-bottom: 1px solid var(--line-2);
  transition: background 0.15s ease;
}
.next-step:last-child { border-bottom: 0; }
@media (min-width: 720px) {
  .next-step { border-right: 1px solid var(--line-2); }
  .next-step:nth-child(2n) { border-right: 0; }
  .next-step:nth-last-child(-n + 2) { border-bottom: 0; }
}
@media (min-width: 1080px) {
  .next-step { border-bottom: 0; border-right: 1px solid var(--line-2); }
  .next-step:nth-child(2n) { border-right: 1px solid var(--line-2); }
  .next-step:last-child { border-right: 0; }
}
.next-step:hover { background: var(--sunken); color: var(--ink); }
.next-step .icon {
  width: 34px; height: 34px; margin-bottom: 14px;
  display: grid; place-items: center;
  border-radius: 10px; background: var(--accent-tint); color: var(--accent);
}
.next-step h4 { margin-bottom: 5px; }
.next-step p { font-size: 0.9rem; color: var(--ink-3); margin-bottom: 12px; }
.next-step .go { font-size: 0.87rem; font-weight: 600; color: var(--accent); }

/* ---- Footer -------------------------------------------------------------- */

footer {
  border-top: 1px solid var(--line);
  background: var(--page-2);
  padding-block: 56px 32px;
}
.footer-grid {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
  margin-bottom: 40px;
}
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; } }
.footer-brand p { font-size: 0.9rem; color: var(--ink-3); margin-top: 12px; max-width: 30ch; }
.footer-col h5 {
  margin: 0 0 14px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-col a { font-size: 0.92rem; color: var(--ink-2); }
.footer-col a:hover { color: var(--ink); }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 12px 20px;
  align-items: center; justify-content: space-between;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-size: 0.85rem; color: var(--ink-3);
}
.contact-row { display: flex; flex-wrap: wrap; gap: 8px; }
.contact-item {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--raised);
  font-size: 0.85rem; font-weight: 550; color: var(--ink-2);
}
.contact-item:hover { background: var(--sunken); color: var(--ink); }
.contact-item svg { color: var(--ink-3); flex: none; }

/* ---- Misc ---------------------------------------------------------------- */

.back-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.87rem; font-weight: 600; color: var(--ink-3);
  margin-bottom: 18px;
}
.back-link:hover { color: var(--ink); }

.callout {
  display: flex; gap: 14px;
  padding: 18px 20px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--raised);
  border-left: 3px solid var(--accent);
}
.callout svg { flex: none; color: var(--accent); margin-top: 2px; }
.callout p { font-size: 0.92rem; color: var(--ink-2); }
.callout b { color: var(--ink); }

.split { display: grid; gap: 40px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: 56px; } }

/* Hidden-until-revealed only applies once JS has actually armed it (see
   app.js) -- with JS off, or if it errors before that point, .reveal
   content must never be the thing that's invisible. */
html.js-anim .reveal { opacity: 0; transform: translateY(10px); }
html.js-anim .reveal.in { opacity: 1; transform: none; transition: opacity 0.5s ease, transform 0.5s ease; }
@media (prefers-reduced-motion: reduce) { html.js-anim .reveal { opacity: 1; transform: none; } }
@media print { html.js-anim .reveal, html.js-anim .reveal .features > *, html.js-anim .reveal .steps-numbered > * { opacity: 1 !important; transform: none !important; } }

/* A list of plain statements, no card around each one. */
.plain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.plain-list li { display: flex; gap: 10px; font-size: 0.95rem; color: var(--ink-2); }

/* ---- Ecosystem tree ------------------------------------------------------ */
/* One picture of the whole product, drawn with borders rather than an image
   so it reads in both themes and at any width. */
.tree-root {
  display: flex; align-items: center; gap: 9px;
  font-size: 1.02rem; margin-bottom: 22px;
}
.tree-root svg { color: var(--accent); }
.tree-branches {
  display: grid; gap: 18px;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .tree-branches { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
.tree-branch { padding-left: 18px; border-left: 2px solid var(--line); }
.tree-head {
  display: flex; align-items: center; gap: 8px;
  font-weight: 650; font-size: 0.95rem; margin-bottom: 10px;
}
.tree-head svg { color: var(--ink-3); }
.tree-branch ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.tree-branch li { font-size: 0.92rem; }
.tree-branch a { color: var(--ink-2); }
.tree-branch a:hover { color: var(--accent); }

/* An install command a shop can copy, for the one platform that needs one.
   Ubuntu's App Center hangs on downloaded .deb files, so the terminal line
   is the fix -- and a fix nobody can read is not a fix. */
.note details > summary { cursor: pointer; color: var(--ink-2); }
.note details > summary:hover { color: var(--accent); }
.note details[open] > summary { margin-bottom: 4px; }
.codeblock {
  margin: 10px 0 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--sunken);
  border: 1px solid var(--line);
  overflow-x: auto;
  font-size: 0.86rem;
  line-height: 1.6;
}
.codeblock code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; }
.note code {
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--sunken);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
}

/* ---- glass ------------------------------------------------------------
   A surface that sits above the page rather than in it. Kept to floating
   things on purpose: making every panel translucent turns a calm page into
   a muddy one, and puts text on an unpredictable ground. */
.glass {
  background: var(--glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-shadow);
  border-radius: var(--r-xl);
}

/* Where a browser cannot blur, the surface becomes opaque instead of
   see-through -- otherwise the text sits on whatever is behind it. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--raised); }
}

/* A product screenshot, framed like a window rather than dropped on the
   page. The image keeps its own edge so the UI inside stays readable --
   the frame is around the product, never over it. */
.shot-frame {
  position: relative;
  padding: 10px;
  border-radius: var(--r-xl);
}
.shot-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--r-xl) - 10px);
  border: 1px solid var(--line);
  background: var(--raised);
}
.shot-frame.phone { max-width: 300px; margin-inline: auto; padding: 8px; }
.shot-frame.phone img { border-radius: calc(var(--r-xl) - 8px); }

/* The dots are a window, not decoration: they say "this is the app" without
   a caption. Hidden from assistive tech, which has the alt text instead. */
.shot-bar {
  display: flex;
  gap: 6px;
  padding: 2px 4px 10px;
}
.shot-bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line);
}

/* ---- product and feature rows -----------------------------------------
   Alternating copy/visual rows. Grid with a gap rather than margins on the
   children, so the two sides cannot drift apart when one of them is a phone
   frame and the other is a paragraph. */
.products-list {
  display: grid;
  gap: 72px;
}
.product-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 48px;
  align-items: center;
}
/* Every other row reads right-to-left on a wide screen, and top-to-bottom on
   a narrow one -- where reversing would put the picture before the heading
   that explains it. */
.product-row.alt .product-copy { order: 2; }
.product-row h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 10px;
  font-size: 1.5rem;
}
.product-row h2 svg { color: var(--accent); flex: none; }
.product-copy .lead { margin-bottom: 14px; }
.product-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.pill-quiet {
  background: var(--sunken);
  color: var(--ink-3);
  border: 1px solid var(--line-2);
  font-variant-numeric: tabular-nums;
}
/* A real screenshot, not one stretched to fill however wide its grid
   column happens to be -- capped so it reads as a product shot rather
   than a wall of UI. */
.product-media { min-width: 0; max-width: 460px; }
.product-row.alt .product-media { margin-left: auto; }

.tick-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}
.tick-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.95rem;
  color: var(--ink-2);
}
.tick-list svg { color: var(--green); flex: none; margin-top: 2px; }

.hero-actions.center { justify-content: center; }

@media (max-width: 900px) {
  .products-list { gap: 56px; }
  .product-row {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  /* The heading comes first at every width. */
  .product-row.alt .product-copy { order: 0; }
  .product-row h2 { font-size: 1.3rem; }
}

/* A heading that names a section for a screen reader without adding one to
   the visual design. Clipped rather than display:none, which would remove it
   from the accessibility tree along with the page outline it exists for. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* The plan picker on the buy page. Same surface as the text inputs beside
   it -- a select that looks like a different species of control makes the
   form read as two forms. */
.hq-field select {
  width: 100%;
  padding: 13px 15px;
  font: inherit;
  font-size: 0.97rem;
  color: var(--ink);
  background: var(--sunken);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.hq-field select:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--raised);
}

/* ---- FAQ ------------------------------------------------------------------
   Native <details>/<summary>: no JS needed to open one, and a screen reader
   already knows what a disclosure widget is without any aria- added by hand.
*/
.faq {
  max-width: 760px;
  margin-inline: auto;
  display: grid;
  gap: 10px;
}
.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--raised);
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 22px;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .chev {
  flex: none;
  color: var(--ink-4);
  transition: transform 0.15s ease;
}
.faq-item[open] summary .chev { transform: rotate(180deg); }
.faq-item summary:hover { color: var(--accent); }
.faq-item summary:hover .chev { color: var(--accent); }
.faq-item .faq-a {
  padding: 0 22px 20px;
  color: var(--ink-2);
  font-size: 0.95rem;
  max-width: 62ch;
}

/* ==========================================================================
   Stage -- the glowing panel the home page opens with
   --------------------------------------------------------------------------
   Follows the site's theme: dark with white accents in dark mode, and a
   bright version in light mode, each with the hero picture taken on the
   same background so the devices sit flush in it.
   ========================================================================== */

.stage {
  --st-bg: #0a0c10;   /* the dark hero shot's own background, so it sits flush */
  --st-ink: #f2f4f8;
  --st-ink-2: #a8b0bf;
  --st-line: rgba(255, 255, 255, 0.1);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--st-bg);
  color: var(--st-ink);
  /* On a dark page the panel is the page's own colour; the hairline is what
     keeps it a panel, so the glows read as inside it rather than cut off. */
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 40px 80px -40px rgba(7, 9, 14, 0.55);
}
/* Light mode: the same stage, bright. The light hero shot's background is
   #fefefe, so the panel matches it. */
:root[data-theme="light"] .stage {
  --st-bg: #fefefe;
  --st-ink: #0b0d12;
  --st-ink-2: #4b5563;
  --st-line: rgba(15, 23, 42, 0.1);
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 40px 80px -48px rgba(30, 41, 59, 0.35);
}
:root[data-theme="light"] .stage .eyebrow { color: #4f46e5; }
:root[data-theme="light"] .stage .pill { background: rgba(15, 23, 42, 0.04); color: #374151; }
:root[data-theme="light"] .stage .pill svg { color: #4f46e5; }
:root[data-theme="light"] .stage .btn-primary { background: #0b0d12; color: #ffffff; }
:root[data-theme="light"] .stage .btn-primary:hover { background: #1f2937; color: #ffffff; }
:root[data-theme="light"] .stage .btn-secondary { background: rgba(15, 23, 42, 0.05); color: #0b0d12; border-color: rgba(15, 23, 42, 0.14); }
:root[data-theme="light"] .stage .btn-secondary:hover { background: rgba(15, 23, 42, 0.09); color: #0b0d12; }
:root[data-theme="light"] .stage-glow.g1 { background: radial-gradient(circle, rgba(99, 102, 241, 0.22), transparent 65%); }
:root[data-theme="light"] .stage-glow.g2 { background: radial-gradient(circle, rgba(56, 189, 248, 0.2), transparent 65%); }
:root[data-theme="light"] .stage-glow.g3 { background: radial-gradient(circle, rgba(52, 211, 153, 0.16), transparent 65%); }
:root[data-theme="light"] .stage-grid { background-image: radial-gradient(rgba(15, 23, 42, 0.08) 1px, transparent 1px); }
:root[data-theme="light"] .shine { background-image: linear-gradient(90deg, #4f46e5, #0ea5e9, #059669, #4f46e5); }
:root[data-theme="light"] .float-note { background: rgba(255, 255, 255, 0.9); border-color: rgba(15, 23, 42, 0.1); box-shadow: 0 14px 30px -14px rgba(30, 41, 59, 0.35); }
:root[data-theme="light"] .float-note b { color: #0b0d12; }
:root[data-theme="light"] .float-note small { color: #6b7280; }
.stage-wrap { padding-top: 12px; }
.hero.stage { padding: clamp(40px, 6vw, 80px) clamp(20px, 5vw, 64px) clamp(28px, 4vw, 48px); }
.stage h1, .stage h2 { color: var(--st-ink); }
.stage .eyebrow { color: #7dd3fc; }
.stage p.lead, .stage .lead { color: var(--st-ink-2); }
.stage .pill { background: rgba(255, 255, 255, 0.06); border-color: var(--st-line); color: #d6dbe4; }
.stage .pill svg { color: #7dd3fc; }
.stage .btn-primary { background: #ffffff; color: #07090e; }
.stage .btn-primary:hover { background: #e6ebf5; color: #07090e; }
.stage .btn-secondary { background: rgba(255, 255, 255, 0.08); color: #fff; border-color: rgba(255, 255, 255, 0.16); }
.stage .btn-secondary:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.stage > *:not(.stage-glow):not(.stage-grid) { position: relative; z-index: 1; }

.stage-glow {
  position: absolute; z-index: 0; pointer-events: none;
  border-radius: 50%;
  filter: blur(10px);
}
.stage-glow.g1 { width: 520px; height: 520px; left: -160px; top: -200px; background: radial-gradient(circle, rgba(99, 102, 241, 0.55), transparent 65%); animation: st-drift 16s ease-in-out infinite alternate; }
.stage-glow.g2 { width: 460px; height: 460px; right: -140px; top: 30%; background: radial-gradient(circle, rgba(56, 189, 248, 0.4), transparent 65%); animation: st-drift 19s ease-in-out -6s infinite alternate-reverse; }
.stage-glow.g3 { width: 380px; height: 380px; left: 35%; bottom: -220px; background: radial-gradient(circle, rgba(52, 211, 153, 0.28), transparent 65%); animation: st-drift 22s ease-in-out -11s infinite alternate; }
@keyframes st-drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(60px, 40px) scale(1.12); }
}
.stage-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 75%);
}

/* The headline's last words catch the light. */
.shine {
  background: linear-gradient(90deg, #7dd3fc, #a5b4fc, #6ee7b7, #7dd3fc);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: st-shine 8s linear infinite;
}
@keyframes st-shine { to { background-position: 300% 0; } }

/* Entrance: each piece rises in turn. `backwards` so the resting state is
   what stays -- a screenshot mid-load still shows everything. */
.hero.stage .eyebrow, .hero.stage h1, .hero.stage .lead, .hero.stage .hero-actions, .hero.stage .pill-row {
  animation: st-rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
.hero.stage h1 { animation-delay: 0.08s; }
.hero.stage .lead { animation-delay: 0.16s; }
.hero.stage .hero-actions { animation-delay: 0.24s; }
.hero.stage .pill-row { animation-delay: 0.32s; }
@keyframes st-rise { from { opacity: 0; transform: translateY(16px); } }

.hero.stage .hero-shot { position: relative; margin-top: 44px; }
.hero.stage .hero-devices {
  max-width: 700px;
  /* Feathered edges: the shot's own background melts into the panel
     instead of sitting on it as a box where the glows pass behind. */
  mask-image: radial-gradient(ellipse 72% 78% at 50% 50%, #000 62%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 72% 78% at 50% 50%, #000 62%, transparent 100%);
  animation: st-rise 1s 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) backwards, st-float 7s 1.3s ease-in-out infinite;
}
@keyframes st-float { 50% { transform: translateY(-8px); } }

/* Notifications floating around the devices: the product's newest trick,
   shown rather than described. */
.float-note {
  position: absolute; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  max-width: 280px;
  padding: 10px 14px 10px 10px;
  border-radius: 16px;
  text-align: left;
  background: rgba(20, 24, 33, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.7);
  animation: st-pop 0.7s cubic-bezier(0.2, 1.3, 0.3, 1) backwards, st-float 6s ease-in-out infinite;
}
.float-note b { display: block; font-size: 0.84rem; color: #fff; line-height: 1.25; }
.float-note small { display: block; font-size: 0.75rem; color: #a8b0bf; margin-top: 2px; }
.float-note.n1 { left: 2%; top: 14%; animation-delay: 0.9s, 1.6s; }
.float-note.n2 { right: 1%; top: 36%; animation-delay: 1.5s, 2.4s; }
.float-note.n3 { left: 10%; bottom: 6%; animation-delay: 2.1s, 3.1s; }
@keyframes st-pop { from { opacity: 0; transform: translateY(14px) scale(0.9); } }

.fn-icon {
  flex: none; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 11px;
}
.fn-icon.sky { background: rgba(56, 189, 248, 0.16); color: #38bdf8; }
.fn-icon.violet { background: rgba(167, 139, 250, 0.16); color: #a78bfa; }
.fn-icon.green { background: rgba(52, 211, 153, 0.16); color: #34d399; }
.fn-icon.amber { background: rgba(251, 191, 36, 0.16); color: #f59e0b; }

@media (max-width: 760px) {
  .float-note { max-width: 230px; padding: 8px 12px 8px 8px; }
  .float-note .fn-icon { width: 28px; height: 28px; border-radius: 9px; }
  .float-note.n1 { left: -4px; top: -6%; }
  .float-note.n2 { right: -4px; top: auto; bottom: 2%; }
  .float-note.n3 { display: none; }
}

/* ---- Ticker -------------------------------------------------------------- */

.ticker {
  overflow: hidden;
  margin-top: 28px;
  padding-block: 14px;
  border-block: 1px solid var(--line-2);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.ticker-track { display: flex; width: max-content; animation: st-ticker 40s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker span {
  display: inline-flex; align-items: center; gap: 28px;
  padding-right: 28px;
  font-size: 0.92rem; font-weight: 600; color: var(--ink-3); white-space: nowrap;
}
.ticker span::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: 0.6; }
@keyframes st-ticker { to { transform: translateX(-50%); } }

/* ---- Feature cards: a light that follows the cursor ---------------------- */

.card.spot { position: relative; overflow: hidden; }
.card.spot::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, -40%), var(--accent-tint), transparent 60%);
  opacity: 0; transition: opacity 0.3s ease;
}
.card.spot:hover::before { opacity: 1; }
.card.spot > * { position: relative; }
.card.spot .icon { transition: transform 0.35s cubic-bezier(0.2, 1.3, 0.3, 1), background 0.3s ease, color 0.3s ease; }
.card.spot:hover .icon { transform: translateY(-2px) rotate(-6deg) scale(1.08); background: var(--accent); color: var(--accent-contrast); }

/* Cards in a grid arrive one after another. */
html.js-anim .reveal .features > *, html.js-anim .reveal .steps-numbered > * { opacity: 0; transform: translateY(14px); }
html.js-anim .reveal.in .features > *, html.js-anim .reveal.in .steps-numbered > * {
  opacity: 1; transform: none;
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal.in .features > :nth-child(2), .reveal.in .steps-numbered > :nth-child(2) { transition-delay: 0.08s; }
.reveal.in .features > :nth-child(3), .reveal.in .steps-numbered > :nth-child(3) { transition-delay: 0.16s; }
.reveal.in .features > :nth-child(4) { transition-delay: 0.24s; }
.reveal.in .features > :nth-child(5) { transition-delay: 0.32s; }
.reveal.in .features > :nth-child(6) { transition-delay: 0.4s; }

/* How it works: the numbers become lit badges, joined by a line that draws
   itself across when the section arrives. */
.steps-numbered { position: relative; }
.step-card .num {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px; margin-bottom: 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, #6366f1, #38bdf8);
  color: #fff; font-weight: 800; font-size: 0.85rem;
  box-shadow: 0 8px 20px -8px rgba(56, 189, 248, 0.6);
}
@media (min-width: 900px) {
  .steps-numbered::before {
    content: ""; position: absolute; z-index: 0;
    left: 44px; right: 44px; top: 43px; height: 2px;
    background: linear-gradient(90deg, #6366f1, #38bdf8, #34d399);
    transform-origin: left; transform: scaleX(0);
    transition: transform 1.2s 0.3s cubic-bezier(0.6, 0, 0.2, 1);
    opacity: 0.5;
  }
  .reveal.in .steps-numbered::before, html:not(.js-anim) .steps-numbered::before { transform: scaleX(1); }
  .steps-numbered > * { position: relative; z-index: 1; }
}

/* ---- Notifications section ----------------------------------------------- */

.notify-grid {
  display: grid; gap: clamp(32px, 6vw, 72px);
  grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 900px) { .notify-grid { grid-template-columns: 1.05fr 0.95fr; } }
.notify-copy h2 { margin-block: 12px 16px; }
.notify-copy .lead { margin-bottom: 26px; max-width: 54ch; }
.notify-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.notify-list li { display: flex; gap: 14px; align-items: flex-start; color: var(--ink-3); font-size: 0.95rem; }
.notify-list b { display: block; color: var(--ink); font-size: 1rem; margin-bottom: 2px; }

.lock { position: relative; display: grid; place-items: center; padding-block: 12px; }
.lock-glow {
  position: absolute; inset: 8% 10%; border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.35), rgba(99, 102, 241, 0.2) 40%, transparent 70%);
  filter: blur(20px);
  animation: st-drift 14s ease-in-out infinite alternate;
}
.lock-phone {
  position: relative;
  width: min(330px, 100%);
  aspect-ratio: 9 / 18.5;
  padding: 58px 14px 20px;
  border-radius: 44px;
  background:
    radial-gradient(120% 60% at 20% 0%, rgba(99, 102, 241, 0.55), transparent 60%),
    radial-gradient(90% 50% at 100% 100%, rgba(56, 189, 248, 0.4), transparent 60%),
    #0b0e16;
  border: 8px solid #1b1f2a;
  box-shadow: 0 50px 90px -40px rgba(7, 9, 14, 0.8), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  color: #fff; text-align: center; overflow: hidden;
}
.lock-notch { position: absolute; top: 12px; left: 50%; width: 92px; height: 26px; margin-left: -46px; border-radius: 99px; background: #000; }
.lock-time { font-size: 3.6rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.lock-date { font-size: 0.85rem; color: rgba(255, 255, 255, 0.72); margin: 6px 0 26px; }
.lock-notes { display: grid; gap: 8px; text-align: left; }
.lock-note {
  padding: 11px 13px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.lock-note .ln-app { display: flex; align-items: center; gap: 6px; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.65); margin-bottom: 3px; }
.lock-note b { display: block; font-size: 0.86rem; }
.lock-note small { display: block; font-size: 0.76rem; color: rgba(255, 255, 255, 0.72); margin-top: 1px; }
html.js-anim .reveal .lock-note { opacity: 0; transform: translateY(-18px) scale(0.96); }
html.js-anim .reveal.in .lock-note { opacity: 1; transform: none; transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 1.3, 0.3, 1); }
.reveal.in .lock-note:nth-child(1) { transition-delay: 0.3s; }
.reveal.in .lock-note:nth-child(2) { transition-delay: 0.9s; }
.reveal.in .lock-note:nth-child(3) { transition-delay: 1.5s; }

/* ---- Final call ---------------------------------------------------------- */

.cta-stage { padding: clamp(40px, 6vw, 72px) clamp(20px, 5vw, 48px); text-align: center; }
.cta-stage .wrap-narrow { margin-inline: auto; }
.cta-stage .stage-glow.g1 { left: 10%; top: -260px; }
.cta-stage .stage-glow.g2 { right: 5%; top: auto; bottom: -260px; }

@media (prefers-reduced-motion: reduce) {
  .stage-glow, .shine, .ticker-track, .hero.stage .hero-devices, .float-note, .lock-glow { animation: none !important; }
  html.js-anim .reveal .features > *, html.js-anim .reveal .steps-numbered > *, html.js-anim .reveal .lock-note { opacity: 1; transform: none; }
  .steps-numbered::before { transform: scaleX(1) !important; }
}

/* ---- Plans ---------------------------------------------------------------
   Three cards, the middle one lifted: most shops that pay want Business, and
   the page should say so without shouting. Prices in tabular figures so the
   three amounts line up. */

.plans {
  display: grid; gap: 18px; align-items: stretch;
  grid-template-columns: 1fr;
  margin-top: 8px;
}
@media (min-width: 880px) { .plans { grid-template-columns: repeat(3, 1fr); } }
.plan { position: relative; display: flex; flex-direction: column; padding: 28px; }
.plan h3 { font-size: 1.2rem; margin-bottom: 4px; }
.plan-for { color: var(--ink-3); font-size: 0.93rem; margin-bottom: 18px; }
.plan-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 20px; }
.plan-price .amt { font-size: 2.2rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.plan-price .per { color: var(--ink-3); font-weight: 600; }
.plan-list { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 10px; flex: 1; }
.plan-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.93rem; color: var(--ink-2); }
.plan-list svg { flex: none; margin-top: 3px; color: var(--green); }
.plan-featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-md); }
@media (min-width: 880px) { .plan-featured { transform: translateY(-8px); } }
.plan-badge {
  position: absolute; top: -12px; left: 28px;
  padding: 4px 12px; border-radius: var(--r-pill);
  background: var(--accent); color: var(--accent-contrast);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em;
}
.plan-notes { max-width: 68ch; margin: 28px auto 0; text-align: center; color: var(--ink-3); font-size: 0.93rem; line-height: 1.6; }
.plan-notes b { color: var(--ink); }
html.js-anim .reveal .plans > * { opacity: 0; transform: translateY(14px); }
html.js-anim .reveal.in .plans > * { opacity: 1; transform: none; transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1); }
html.js-anim .reveal.in .plans > .plan-featured { transform: none; }
@media (min-width: 880px) { html.js-anim .reveal.in .plans > .plan-featured { transform: translateY(-8px); } }
.reveal.in .plans > :nth-child(2) { transition-delay: 0.08s; }
.reveal.in .plans > :nth-child(3) { transition-delay: 0.16s; }
@media (prefers-reduced-motion: reduce) { html.js-anim .reveal .plans > * { opacity: 1; transform: none; } }
.plan-list { margin-bottom: 0; }
.plan-how {
  max-width: 680px; margin: 22px auto 0; padding: 20px 24px;
  border-radius: var(--r-lg); background: var(--sunken); border: 1px solid var(--line-2);
  text-align: center; color: var(--ink-2); font-size: 0.95rem; line-height: 1.6;
}
.plan-how b { color: var(--ink); }
.plan-how .btn { display: inline-flex; margin-top: 14px; }

/* Privacy, terms and delete-account: long reading pages. */
.legal { max-width: 720px; margin: 0 auto; padding-block: 8px 72px; }
.legal h2 { font-size: 1.35rem; margin: 2.2em 0 .5em; text-wrap: balance; }
.legal h3 { font-size: 1.05rem; margin: 1.6em 0 .4em; }
.legal p, .legal li { color: var(--text-2, inherit); line-height: 1.7; }
.legal ul { padding-left: 1.2em; display: grid; gap: .35em; }
.legal .updated { font-size: .9rem; opacity: .7; }
.legal table { width: 100%; border-collapse: collapse; font-size: .95rem; margin: 1em 0; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: .6em .5em; border-bottom: 1px solid rgba(127,127,127,.25); }
.legal-box { border: 1px solid rgba(127,127,127,.3); border-radius: 16px; padding: 20px; margin: 1.5em 0; display: grid; gap: 12px; }
.legal-box label { display: grid; gap: 6px; font-weight: 600; font-size: .95rem; }
.legal-box input { font: inherit; padding: 11px 13px; border-radius: 12px; border: 1px solid rgba(127,127,127,.4); background: transparent; color: inherit; }
.legal-box .msg { min-height: 1.4em; font-size: .95rem; }
.legal-box .msg.bad { color: #ef4444; }
.legal-box .msg.good { color: #10b981; }
.footer-legal { display: flex; gap: 14px; flex-wrap: wrap; }
.footer-legal a { color: inherit; opacity: .8; }

/* The one line of small print under the plans: prices are in dollars, the
   charge is made in Naira. */
.price-note {
  margin: 14px auto 0; max-width: 62ch; text-align: center;
  font-size: 0.86rem; color: var(--ink-3); line-height: 1.6;
}

/* ==========================================================================
   The Assistant story: the hero mockup, the "just say it" grid, the offline
   split, the morning brief and the branch row. Everything here follows the
   same tokens as the rest of the site, so it themes with it.
   ========================================================================== */

/* ---- Hero: the Assistant preparing a sale -------------------------------- */

.hero-assistant { display: grid; place-items: center; }
.asst {
  width: min(430px, 100%); text-align: left;
  border-radius: var(--r-xl); overflow: hidden;
  background: var(--raised); border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}
.asst-top {
  display: flex; align-items: center; gap: 12px; padding: 16px 18px;
  background: linear-gradient(135deg, #4f46e5, #0ea5e9); color: #fff;
}
.asst-bot {
  display: grid; place-items: center; width: 38px; height: 38px; flex: none;
  border-radius: 12px; background: rgba(255, 255, 255, 0.18); color: #fff;
}
.asst-name { display: grid; line-height: 1.3; }
.asst-name b { font-size: 0.98rem; }
.asst-name small { font-size: 0.78rem; opacity: 0.85; }
.asst-body { padding: 16px; display: grid; gap: 12px; background: var(--page-2); }
.asst-said {
  justify-self: end; max-width: 92%;
  padding: 11px 14px; border-radius: 16px 16px 4px 16px;
  background: linear-gradient(135deg, #4f46e5, #0ea5e9); color: #fff;
  font-size: 0.9rem; line-height: 1.5;
}
.asst-tag {
  display: inline-flex; align-items: center; gap: 5px; margin-bottom: 4px;
  font-size: 0.64rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
  opacity: 0.85;
}
.asst-draft {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--raised); padding: 14px;
}
.asst-draft-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.asst-chip {
  font-size: 0.64rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--green); background: var(--green-tint);
  padding: 4px 9px; border-radius: var(--r-pill);
}
.asst-cust { font-weight: 700; font-size: 0.92rem; color: var(--ink); }
.asst-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 0; font-size: 0.88rem; color: var(--ink-2);
  border-top: 1px solid var(--line-2);
}
.asst-row .num, .asst-total .num { font-variant-numeric: tabular-nums; color: var(--ink-3); }
.asst-total {
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line);
  font-weight: 800; font-size: 0.98rem; color: var(--ink);
}
.asst-total .num { color: var(--ink); }
.asst-save {
  text-align: center; padding: 12px; border-radius: var(--r-md);
  background: var(--inverted); color: var(--inverted-ink);
  font-weight: 700; font-size: 0.92rem;
}
.asst-foot { margin: 0; text-align: center; font-size: 0.78rem; color: var(--ink-3); }

/* ---- The statement under the hero ---------------------------------------- */

.statement {
  max-width: 820px; margin-inline: auto; text-align: center;
  padding-block: clamp(16px, 4vw, 32px);
}
.statement h2 { margin-bottom: 14px; }
.statement p { color: var(--ink-2); font-size: clamp(1rem, 2.4vw, 1.14rem); line-height: 1.65; }

/* ---- "Just tell TechDesk what you need" ---------------------------------- */

.say-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 680px) { .say-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .say-grid { grid-template-columns: repeat(3, 1fr); } }
.say { padding: 24px; display: grid; gap: 10px; align-content: start; }
.say-q {
  margin: 0; font-weight: 650; font-size: 1rem; line-height: 1.5; color: var(--ink);
  text-wrap: balance;
}
.say-mic {
  display: inline-grid; place-items: center; width: 24px; height: 24px;
  margin-right: 9px; vertical-align: -6px; flex: none;
  border-radius: 8px; color: #fff;
  background: linear-gradient(135deg, #4f46e5, #0ea5e9);
}
.say-mic.cam { background: linear-gradient(135deg, #7c3aed, #ec4899); }
.say-a { margin: 0; color: var(--ink-3); font-size: 0.93rem; line-height: 1.6; }
.say-note {
  margin: 28px auto 0; max-width: 70ch; text-align: center;
  font-size: 0.88rem; color: var(--ink-3); line-height: 1.6;
}

/* ---- Offline: what keeps working, and what waits ------------------------- */

.offline-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .offline-grid { grid-template-columns: 1fr 1fr; } }
.off-card { padding: 26px; }
.off-card h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-size: 1.05rem; }
.off-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.off-card li {
  position: relative; padding-left: 26px;
  color: var(--ink-2); font-size: 0.94rem; line-height: 1.55;
}
.off-card li::before {
  content: ""; position: absolute; left: 4px; top: 0.56em;
  width: 7px; height: 7px; border-radius: 50%;
}
.off-yes li::before { background: var(--green); }
.off-no li::before { background: var(--amber); }
.off-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.off-dot.green { background: var(--green); box-shadow: 0 0 0 4px var(--green-tint); }
.off-dot.amber { background: var(--amber); box-shadow: 0 0 0 4px var(--amber-tint); }
.off-note { margin: 16px 0 0; font-size: 0.86rem; color: var(--ink-3); line-height: 1.55; }
.off-back {
  margin: 24px auto 0; max-width: 60ch; text-align: center;
  font-size: 0.92rem; color: var(--ink-2);
}
.off-back span { color: var(--green); font-weight: 700; margin-right: 6px; }

/* ---- Morning brief ------------------------------------------------------- */

.brief-grid { display: grid; gap: clamp(32px, 6vw, 64px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .brief-grid { grid-template-columns: 1fr 1fr; } }
.brief-copy h2 { margin-block: 12px 16px; }
.brief-copy .lead { max-width: 52ch; }
.brief-aside { margin-top: 18px; font-size: 0.9rem; color: var(--ink-3); }
.brief-card { padding: 24px; }
.brief-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.brief-head b { font-size: 1.05rem; }
.brief-eg {
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3); background: var(--sunken);
  padding: 4px 9px; border-radius: var(--r-pill);
}
.brief-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.brief-stats > div {
  padding: 14px; border-radius: var(--r-md);
  background: var(--sunken); display: grid; gap: 3px;
}
.bs-n { font-size: 1.22rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.bs-l { font-size: 0.8rem; color: var(--ink-3); }
.brief-best {
  display: flex; align-items: center; gap: 11px; margin-top: 16px;
  padding-top: 16px; border-top: 1px solid var(--line-2);
  font-size: 0.92rem; color: var(--ink-2);
}

/* ---- Branches ------------------------------------------------------------ */

.branch-row { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .branch-row { grid-template-columns: repeat(3, 1fr); } }
.branch { padding: 24px; text-align: center; }
.branch h3 { font-size: 1rem; color: var(--ink-3); font-weight: 600; margin-bottom: 8px; }
.br-amt { font-size: clamp(1.4rem, 3.4vw, 1.75rem); font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.branch p { margin: 6px 0 0; font-size: 0.86rem; color: var(--ink-3); }
.branch-note {
  margin: 26px auto 0; max-width: 68ch; text-align: center;
  font-size: 0.9rem; color: var(--ink-3); line-height: 1.6;
}
.branch-note .brief-eg { margin-right: 8px; }

/* ---- Why TechDesk -------------------------------------------------------- */

.why-row { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .why-row { grid-template-columns: repeat(3, 1fr); } }
.why { padding: 26px; }
.why h3 { font-size: 1.05rem; margin-bottom: 10px; }
.why p { color: var(--ink-3); font-size: 0.94rem; line-height: 1.6; }

.cta-plats { margin-top: 20px; text-align: center; font-size: 0.85rem; color: var(--ink-3); }

/* The Assistant hero puts the words and the mockup side by side on a wide
   screen, so the thing that makes TechDesk different is visible at a glance
   without scrolling. Below that it stacks, words first. */
@media (min-width: 1000px) {
  .hero-ai {
    display: grid; align-items: center;
    grid-template-columns: 1.02fr 0.98fr;
    gap: clamp(36px, 5vw, 68px);
    text-align: left;
  }
  .hero-ai .hero-inner { margin: 0; max-width: none; }
  .hero-ai .hero-actions, .hero-ai .pill-row { justify-content: flex-start; }
  .hero-ai.hero.stage .hero-shot { margin-top: 0; }
  .hero-ai .asst { width: 100%; max-width: 460px; margin-inline: auto; }
}
.hero-ai .asst { animation: st-rise 1s 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }

/* ---- Assistant page ------------------------------------------------------ */

.asst-page-grid { display: grid; gap: clamp(32px, 6vw, 64px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 940px) { .asst-page-grid { grid-template-columns: 1fr 0.9fr; } }
.asst-page-copy h2 { margin-bottom: 14px; }
.tick-list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 11px; }
.tick-list li { position: relative; padding-left: 28px; color: var(--ink-2); font-size: 0.96rem; }
.tick-list li::before {
  content: ""; position: absolute; left: 0; top: 0.3em;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--green-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23067647' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat;
}

/* The Assistant's own home screen, rebuilt in HTML so it themes and stays sharp. */
.asst-ui {
  width: min(430px, 100%); margin-inline: auto; text-align: left;
  border-radius: var(--r-xl); overflow: hidden;
  background: var(--raised); border: 1px solid var(--line); box-shadow: var(--shadow-md);
}
.asst-practice {
  margin-left: auto; flex: none;
  font-size: 0.72rem; font-weight: 700; color: #fff;
  background: rgba(255, 255, 255, 0.2); padding: 5px 11px; border-radius: var(--r-pill);
}
.asst-tabs { display: flex; gap: 6px; padding: 10px 12px 0; background: var(--page-2); }
.asst-tab {
  flex: 1; text-align: center; padding: 8px 4px; border-radius: var(--r-sm) var(--r-sm) 0 0;
  font-size: 0.82rem; font-weight: 600; color: var(--ink-3);
}
.asst-tab.on { background: var(--raised); color: var(--ink); box-shadow: var(--shadow-sm); }
.asst-greet {
  margin: 0; padding: 10px 13px; border-radius: 16px 16px 16px 4px;
  background: var(--sunken); color: var(--ink); font-size: 0.89rem;
}
.asst-h {
  margin: 0 0 9px; font-size: 0.65rem; font-weight: 800;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3);
}
.asst-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-bottom: 18px; }
.asst-quick span {
  display: grid; justify-items: center; gap: 6px; padding: 10px 3px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--raised);
  font-size: 0.64rem; font-weight: 600; color: var(--ink-2); text-align: center; line-height: 1.25;
}
/* Each quick action carries its own icon in its own colour, as in the app --
   a grid of plain coloured squares reads as a placeholder, not a product. */
.asst-quick .qi { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; }
.qi.em { background: rgba(16, 185, 129, 0.15); color: #059669; }
.qi.sky { background: rgba(14, 165, 233, 0.15); color: #0284c7; }
.qi.vi { background: rgba(139, 92, 246, 0.15); color: #7c3aed; }
.qi.in { background: rgba(99, 102, 241, 0.15); color: #4f46e5; }
.qi.am { background: rgba(245, 158, 11, 0.18); color: #b45309; }
.qi.te { background: rgba(20, 184, 166, 0.15); color: #0d9488; }
.qi.fu { background: rgba(217, 70, 239, 0.15); color: #c026d3; }
.qi.ro { background: rgba(244, 63, 94, 0.15); color: #e11d48; }
:root[data-theme="dark"] .qi.em, :root:not([data-theme="light"]) .qi.em { color: #34d399; }
:root[data-theme="dark"] .qi.sky, :root:not([data-theme="light"]) .qi.sky { color: #38bdf8; }
:root[data-theme="dark"] .qi.vi, :root:not([data-theme="light"]) .qi.vi { color: #a78bfa; }
:root[data-theme="dark"] .qi.in, :root:not([data-theme="light"]) .qi.in { color: #818cf8; }
:root[data-theme="dark"] .qi.am, :root:not([data-theme="light"]) .qi.am { color: #fbbf24; }
:root[data-theme="dark"] .qi.te, :root:not([data-theme="light"]) .qi.te { color: #2dd4bf; }
:root[data-theme="dark"] .qi.fu, :root:not([data-theme="light"]) .qi.fu { color: #e879f9; }
:root[data-theme="dark"] .qi.ro, :root:not([data-theme="light"]) .qi.ro { color: #fb7185; }

.asst-hello { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 16px; }
.asst-face {
  flex: none; display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 50%; color: #fff; background: linear-gradient(135deg, #4f46e5, #0ea5e9);
}
.asst-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.asst-chips span {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.72rem; font-weight: 600; color: var(--ink-2);
  background: var(--sunken); padding: 6px 11px; border-radius: var(--r-pill);
}
.asst-chips svg { color: var(--ink-3); flex: none; }

/* Worked examples: what you ask, and what comes back. */
.ex-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .ex-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .ex-grid { grid-template-columns: repeat(3, 1fr); } }
.ex { padding: 22px; display: grid; gap: 14px; align-content: start; }
.ex-q { margin: 0; font-weight: 650; font-size: 0.98rem; line-height: 1.5; color: var(--ink); }
.ex-you {
  display: inline-block; margin-right: 9px; padding: 3px 8px; border-radius: var(--r-pill);
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-ink); background: var(--accent-tint); vertical-align: 2px;
}
.ex-mic, .ex-cam {
  display: inline-grid; place-items: center; width: 22px; height: 22px;
  margin-right: 9px; vertical-align: -5px; border-radius: 7px; color: #fff;
  background: linear-gradient(135deg, #4f46e5, #0ea5e9);
}
.ex-cam { background: linear-gradient(135deg, #7c3aed, #ec4899); }
.ex-a { display: grid; gap: 11px; }
.ex-lead { margin: 0; font-size: 0.92rem; font-weight: 650; color: var(--ink); }
.ex-body { margin: 0; font-size: 0.89rem; color: var(--ink-3); line-height: 1.6; }
.ex-rows { list-style: none; padding: 0; margin: 0; display: grid; }
.ex-rows li {
  display: flex; justify-content: space-between; gap: 12px; padding: 7px 0;
  font-size: 0.88rem; color: var(--ink-2); border-bottom: 1px solid var(--line-2);
}
.ex-rows li:last-child { border-bottom: 0; }
.ex-rows .num { font-variant-numeric: tabular-nums; color: var(--ink-3); flex: none; }
.ex-rows .num.out { color: var(--amber); font-weight: 700; }
.ex-btn {
  display: block; text-align: center; padding: 9px; border-radius: var(--r-md);
  font-size: 0.85rem; font-weight: 700;
  color: var(--accent-ink); background: var(--accent-tint);
}
.ex-btn.wa { color: var(--green); background: var(--green-tint); }
.ex-btn.dark { color: var(--inverted-ink); background: var(--inverted); }
.ex-note { margin: 0; font-size: 0.8rem; color: var(--ink-3); line-height: 1.55; }

.safe-row { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .safe-row { grid-template-columns: repeat(3, 1fr); } }
.safe { padding: 26px; }
.safe h3 { font-size: 1.05rem; margin-bottom: 10px; }
.safe p { color: var(--ink-3); font-size: 0.94rem; line-height: 1.6; }

/* ---- Product page: numbered groups --------------------------------------- */

.grp-head { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 36px; }
.grp-num {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 13px; font-size: 0.86rem; font-weight: 800;
  color: var(--accent-ink); background: var(--accent-tint);
  font-variant-numeric: tabular-nums;
}
.grp-head h2 { margin-bottom: 6px; }
.grp-head p { color: var(--ink-3); font-size: 1rem; }
.feature p a { font-weight: 600; white-space: nowrap; }

/* ---- For Shops ----------------------------------------------------------- */

.shop-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .shop-grid { grid-template-columns: repeat(2, 1fr); } }
.shop { padding: 28px; }
.shop h2 { font-size: 1.25rem; margin-bottom: 10px; }
.shop > p { color: var(--ink-3); font-size: 0.96rem; line-height: 1.6; }
.shop .tick-list { margin-top: 18px; }

/* The chain of what one sale sets off. */
.flowline { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; max-width: 760px; margin-inline: auto; }
.flowline li { display: flex; gap: 18px; padding-bottom: 26px; position: relative; }
.flowline li:not(:last-child)::before {
  content: ""; position: absolute; left: 17px; top: 40px; bottom: 0;
  width: 2px; background: linear-gradient(var(--line), var(--line-2));
}
.fl-n {
  flex: none; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 50%; font-size: 0.82rem; font-weight: 800;
  color: var(--accent-contrast); background: var(--accent);
}
.flowline b { display: block; font-size: 1.02rem; color: var(--ink); margin-bottom: 4px; padding-top: 7px; }
.flowline p { margin: 0; color: var(--ink-3); font-size: 0.94rem; line-height: 1.6; }

.mb-points { display: grid; gap: 22px; grid-template-columns: 1fr; margin-top: 40px; }
@media (min-width: 720px) { .mb-points { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .mb-points { grid-template-columns: repeat(3, 1fr); } }
.mb-points b { display: block; color: var(--ink); font-size: 0.98rem; margin-bottom: 5px; }
.mb-points p { margin: 0; color: var(--ink-3); font-size: 0.92rem; line-height: 1.6; }

/* ---- Pricing page -------------------------------------------------------- */

.plan h2 { font-size: 1.3rem; margin-bottom: 6px; }
.plan-cta { margin-top: 22px; }
.faq-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 740px) { .faq-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .faq-grid { grid-template-columns: repeat(3, 1fr); } }
.faq { padding: 24px; }
.faq h3 { font-size: 1.02rem; margin-bottom: 9px; }
.faq p { color: var(--ink-3); font-size: 0.93rem; line-height: 1.62; }
.hero-inner.center { margin-inline: auto; text-align: center; }
.hero-inner.center .lead { margin-inline: auto; }

/* ---- Download: three ways to get it -------------------------------------- */

.get-grid { display: grid; gap: 20px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .get-grid { grid-template-columns: 1.25fr 1fr 1fr; } }
.get { padding: 26px; display: flex; flex-direction: column; }
.get-top { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px; }
.get-icon {
  flex: none; display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 13px; color: var(--accent-ink); background: var(--accent-tint);
}
.get-top h2 { font-size: 1.15rem; margin-bottom: 4px; }
.get-top p { color: var(--ink-3); font-size: 0.9rem; line-height: 1.5; }
.get .platform-grid { margin-bottom: 16px; }
.get .btn-block { margin-top: auto; }
.get-sub {
  margin: 10px 0 0; text-align: center;
  font-size: 0.82rem; color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.get-note { margin: 14px 0 0; font-size: 0.84rem; color: var(--ink-3); line-height: 1.55; }

.monitor-block { text-align: center; }
.monitor-block h2 { margin-block: 12px 14px; }
.monitor-block .lead { margin-inline: auto; }
.monitor-block .hero-actions { justify-content: center; }

/* Installation help: closed until someone needs it. */
.help { display: grid; gap: 10px; }
.help details {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--raised); overflow: hidden;
}
.help summary {
  padding: 16px 20px; cursor: pointer; list-style: none;
  font-weight: 600; font-size: 0.96rem; color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.help summary::-webkit-details-marker { display: none; }
.help summary::after {
  content: ""; flex: none; width: 9px; height: 9px;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.2s;
}
.help details[open] summary::after { transform: rotate(-135deg); }
.help summary:hover { background: var(--sunken); }
.help summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.help details p { margin: 0; padding: 0 20px 18px; color: var(--ink-2); font-size: 0.93rem; line-height: 1.65; }
@media (prefers-reduced-motion: reduce) { .help summary::after { transition: none; } }

/* ---- Home: the value strip under the hero -------------------------------- */

.strip-sec { padding-block: clamp(28px, 5vw, 44px); border-bottom: 1px solid var(--line-2); }
.vstrip { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .vstrip { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .vstrip { grid-template-columns: repeat(4, 1fr); gap: 28px; } }
.vstrip > div { display: grid; gap: 5px; align-content: start; }
.vstrip b {
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent-ink);
}
.vstrip span { color: var(--ink-2); font-size: 0.93rem; line-height: 1.55; }
.hero-plats { margin-top: 22px; font-size: 0.85rem; color: var(--ink-3); }

/* How the parts of the shop hang together. */
.conn-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .conn-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .conn-grid { grid-template-columns: repeat(5, 1fr); } }
.conn { padding: 22px 18px; text-align: center; display: grid; gap: 8px; align-content: start; }
.conn h3 { font-size: 1.02rem; }
.conn-arrow { color: var(--ink-4); font-size: 1.05rem; line-height: 1; }
.conn p { margin: 0; color: var(--ink-3); font-size: 0.88rem; line-height: 1.5; }
.conn-asst { border-color: var(--accent); }
.conn-asst h3 { color: var(--accent-ink); }

/* Plan summary on the home page; the full comparison lives on /pricing. */
.plan-mini { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 880px) { .plan-mini { grid-template-columns: repeat(3, 1fr); } }
.pm { padding: 26px; position: relative; }
.pm h3 { font-size: 1.15rem; margin-bottom: 3px; }
.pm-for { color: var(--ink-3); font-size: 0.88rem; margin-bottom: 16px; }
.pm-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; }
.pm-price > span { font-size: 1.7rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.pm-price small { color: var(--ink-3); font-size: 0.85rem; }
.pm-what { color: var(--ink-2); font-size: 0.93rem; line-height: 1.6; }
.pm-featured { border-color: var(--accent); }