/* ═══════════════════════════════════════════════
   UFORIYA LANDING PAGE
   Headings: Cabinet Grotesk | Body: Outfit | Utility: Fira Code

   Consolidated: the old "append below" block has been merged into the
   rules it was overriding, and selectors for markup that no longer
   exists (hamburger nav, roadmap phases, platinum plan) are gone.
═══════════════════════════════════════════════ */

:root {
  /* Colour */
  --purple:        #7b5ff5;
  --purple-light:  #9b7ff7;
  --purple-faint:  rgba(123, 95, 245, 0.14);
  --cyan:          #00f0ff;
  --bg:            #050507;
  --surface:       rgba(13, 13, 20, 0.72);
  --surface-raised:rgba(20, 20, 30, 0.86);
  --line:          rgba(255, 255, 255, 0.08);
  --line-strong:   rgba(255, 255, 255, 0.16);
  --line-accent:   rgba(123, 95, 245, 0.32);
  --ink:           #f2f2f7;
  --ink-2:         #9299aa;
  --ink-3:         #62697a;

  /* Type */
  --f-display: 'Cabinet Grotesk', system-ui, sans-serif;
  --f-body:    'Outfit', system-ui, sans-serif;
  --f-mono:    'Fira Code', ui-monospace, monospace;

  /* Radius */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;

  /* Layout */
  --max: 1160px;
  --gutter: 24px;
  --nav-h: 78px;
  --section-y: 116px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
}

body {
  font-family: var(--f-body);
  font-weight: 400;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--purple-light);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Keyboard users get past the nav without tabbing through it */
.skip-link {
  position: absolute;
  top: -60px;
  left: var(--gutter);
  z-index: 200;
  padding: 10px 18px;
  font-size: 14px;
  color: #fff;
  background: var(--purple);
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: top 0.2s ease;
}

.skip-link:focus { top: 12px; }

/* ── Starfield ──
   No fade mask here: the blackhole is drawn onto this same canvas and
   lives at the bottom of the page, so masking the lower half would hide it. */
#starfield {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════
   LAYOUT PRIMITIVES
═══════════════════════════════════════════════ */

.section-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  z-index: 1;
  padding-block: var(--section-y);
  border-top: 1px solid var(--line);
}

.section-head {
  max-width: 720px;
  margin-bottom: 64px;
}

/* Wide heads carry more copy, so they get a little more room */
.section-head-wide { max-width: 780px; }

/* Label: sentence case with a small Saturn in front. The planet is
   painted as the background so the ring and moon can layer over it.
   Planet centre sits at 12px, 10px; every value below keys off that. */
.eyebrow {
  position: relative;
  display: inline-block;
  padding-left: 32px;
  margin-bottom: 20px;
  font-family: var(--f-body);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 20px;
  color: var(--ink-2);
  background:
    radial-gradient(circle 3px at 10.5px 8.5px, rgba(226, 216, 255, 0.95), transparent),
    radial-gradient(circle 5px at 12px 10px, var(--purple) 0, #4a33b8 80%, #3d2a9e 92%, transparent 100%),
    radial-gradient(circle 11px at 12px 10px, rgba(123, 95, 245, 0.35), transparent);
  background-repeat: no-repeat;
}

/* Ring. The mask hides only the back arc where it passes behind the
   planet, so the front arc still crosses over it. */
.eyebrow::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 24px;
  height: 8px;
  border: 1px solid rgba(155, 127, 247, 0.7);
  border-radius: 50%;
  transform: rotate(-18deg);
  -webkit-mask:
    radial-gradient(circle 6px at 50% 50%, transparent 5.5px, #000 6px),
    linear-gradient(to bottom, transparent 50%, #000 50%);
  mask:
    radial-gradient(circle 6px at 50% 50%, transparent 5.5px, #000 6px),
    linear-gradient(to bottom, transparent 50%, #000 50%);
}

/* Moon riding the ring. First half of the path is the far side,
   second half the near side. */
.eyebrow::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #e9e3ff;
  box-shadow: 0 0 6px rgba(155, 127, 247, 0.9);
  offset-path: path("M 1.06 13.55 A 11.5 3.5 -18 1 1 22.94 6.45 A 11.5 3.5 -18 1 1 1.06 13.55");
  offset-rotate: 0deg;
  offset-distance: 80%;
  animation: moon-orbit 6s linear infinite;
}

@keyframes moon-orbit {
  0%   { offset-distance: 0%; opacity: 0.5; scale: 0.75; }
  14%  { opacity: 0.5; }
  17%  { opacity: 0; }     /* behind the planet */
  33%  { opacity: 0; }
  36%  { opacity: 0.5; }
  50%  { opacity: 0.5; scale: 0.75; }
  58%  { opacity: 1; scale: 1; }   /* near side, crosses in front */
  92%  { opacity: 1; scale: 1; }
  100% { offset-distance: 100%; opacity: 0.5; scale: 0.75; }
}
.section-title {
  max-width: 20ch;
  font-family: var(--f-display);
  font-size: clamp(32px, 4.4vw, 52px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.032em;
  color: var(--ink);
  text-wrap: balance;
}

.section-sub {
  max-width: 60ch;
  font-size: 16px;
  color: var(--ink-2);
  line-height: 1.7;
  margin-top: 20px;
}

.inline-link {
  color: var(--purple-light);
  text-decoration: none;
  border-bottom: 1px solid var(--line-accent);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.inline-link:hover { color: #fff; border-bottom-color: var(--purple-light); }

/* ═══════════════════════════════════════════════
   NAVBAR
   Logo left, quiet links and one loud button right. Nothing collapses,
   so there is no hamburger.
═══════════════════════════════════════════════ */

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-h);
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
}

.navbar.scrolled {
  background: rgba(5, 5, 7, 0.9);
  border-bottom-color: var(--line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* The navbar spans the full viewport rather than the content column, so the
   brand anchors to the left edge instead of sitting indented. */
.nav-inner {
  width: 100%;
  height: 100%;
  padding-inline: 30px;
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: space-between;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  flex-shrink: 0;
}

.nav-logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(123, 95, 245, 0.5));
}

/* ═══════════════════════════════════════════════
   ORBIT RING — add to style.css
   Apply after the existing .nav-logo and .cta-logo rules.
   Pure CSS, no markup changes needed — the ring is a pseudo-element on
   the existing logo, so nothing in the HTML has to change.
═══════════════════════════════════════════════ */

/* ── Nav logo ── */




@keyframes orbit-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ── Final CTA logo ── */
/* .cta-logo already animates a hover-drift; the ring sits underneath it on
   a wrapper so the two motions don't fight over the same transform. */

.nav-wordmark {
  font-family: var(--f-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

.nav-link-quiet {
  font-size: 14px;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.nav-link-quiet:hover { color: var(--ink); }

.btn-open-app {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 9px 20px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--r-sm);
  text-decoration: none;
  white-space: nowrap;
  background-image: linear-gradient(100deg, #6b4ff0 0%, #8b6bf7 50%, #5b7ff5 100%);
  background-size: 200% 100%;
  background-position: 0% 50%;
  transition: background-position 0.55s ease;
}

.btn-open-app:hover { background-position: 100% 50%; }

/* ═══════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════ */

/* Gradient fill sits on a wide background so hover can slide it, and a
   highlight sweeps across on top. */
.btn-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 28px;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  border-radius: var(--r-sm);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  background-image: linear-gradient(100deg, #6b4ff0 0%, #8b6bf7 45%, #5b7ff5 100%);
  background-size: 200% 100%;
  background-position: 0% 50%;
  box-shadow: 0 6px 22px rgba(123, 95, 245, 0.28);
  transition: background-position 0.55s ease, transform 0.18s ease, box-shadow 0.3s ease;
}

.btn-primary:hover {
  background-position: 100% 50%;
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(123, 95, 245, 0.42);
}

.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 20%,
    rgba(255, 255, 255, 0.24) 50%,
    transparent 80%
  );
  transform: translateX(-120%);
  transition: transform 0.7s ease;
  pointer-events: none;
}

.btn-primary:hover::after { transform: translateX(120%); }

.btn-primary.btn-large { padding: 15px 34px; font-size: 16px; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 26px;
  background: transparent;
  color: var(--ink-2);
  font-size: 15px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.btn-ghost:hover { color: var(--ink); border-color: rgba(255,255,255,0.3); }

/* ═══════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════ */

.hero {
  position: relative;
  z-index: 1;
  padding: calc(var(--nav-h) + 92px) var(--gutter) 0;
  text-align: center;
}

.hero-inner {
  max-width: 720px;
  margin: 0 auto;
}

/* ── Status readout ──
   A single point of light travels the border on a conic gradient, so the
   chip reads as transmitting rather than sitting still. The dark inner body
   masks everything except the 1px edge. */
.status-readout {
  position: relative;
  display: inline-flex;
  padding: 1px;
  margin-bottom: 32px;
  border-radius: 100px;
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.09);
}

/* Not a link any more, so no hover response */
.status-readout-static { cursor: default; }

.readout-sweep {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Square and oversized so the cone covers the full pill as it turns */
  width: 220%;
  aspect-ratio: 1;
  translate: -50% -50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 250deg,
    rgba(123, 95, 245, 0.9) 300deg,
    #00f0ff 335deg,
    rgba(123, 95, 245, 0.9) 350deg,
    transparent 360deg
  );
  animation: sweep 4.5s linear infinite;
}

@keyframes sweep {
  to { rotate: 360deg; }
}

.readout-body {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 8px 16px 8px 15px;
  border-radius: 100px;
  background: #07070d;
}

/* Live indicator: solid core with an expanding echo */
.readout-ping {
  position: relative;
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.9);
}

.readout-ping::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--cyan);
  animation: echo 2.4s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}

@keyframes echo {
  0%        { transform: scale(1);   opacity: 0.9; }
  70%, 100% { transform: scale(4.2); opacity: 0; }
}

.readout-stage {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  background: linear-gradient(96deg, #b9a6ff 0%, #00f0ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.readout-text {
  font-size: 13px;
  letter-spacing: 0.005em;
  color: var(--ink-2);
  padding-left: 11px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-title {
  font-family: var(--f-display);
  font-size: clamp(40px, 6.4vw, 74px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin-bottom: 24px;
}

.hero-sub {
  font-size: clamp(15.5px, 1.5vw, 18px);
  color: var(--ink-2);
  line-height: 1.72;
  max-width: 560px;
  margin: 0 auto 14px;
}

.hero-sub-detail {
  font-size: clamp(13.5px, 1.3vw, 15px);
  color: var(--ink-3);
  margin-bottom: 34px;
}

.hero-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.hero-note {
  font-size: 13px;
  color: var(--ink-3);
}

/* Hero screenshot */
.hero-shot {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1040px;
  margin: 76px auto 0;
  padding-inline: var(--gutter);
}

.hero-shot::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -6%;
  width: 78%;
  height: 60%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(123, 95, 245, 0.22) 0%, transparent 70%);
  filter: blur(30px);
  pointer-events: none;
  z-index: -1;
}

.hero-shot-img {
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-accent);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.65);
}

/* ═══════════════════════════════════════════════
   AUDIENCE BAR
═══════════════════════════════════════════════ */

.audience-bar {
  position: relative;
  z-index: 1;
  margin-top: 96px;
  padding-block: 40px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}

.audience-label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 18px;
}

.audience-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.audience-tags span {
  padding: 6px 15px;
  font-size: 13px;
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 100px;
}

/* Audience bar already draws the rule, so the next section skips its own */
.audience-bar + .section { border-top: none; }

/* ═══════════════════════════════════════════════
   REVEAL
═══════════════════════════════════════════════ */

/* Only decorative cards fade in. The tool explorer, the steps and the FAQ
   are never hidden this way: if JS fails they must still be on the page. */
.feature-card,
.plan,
.showcase-item,
.access-card {
  opacity: 0;
  transform: translateY(14px);
}

.feature-card.revealed,
.plan.revealed,
.showcase-item.revealed,
.access-card.revealed {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* ═══════════════════════════════════════════════
   FEATURES
   Two by two reads calmer than four in a row at this width.
═══════════════════════════════════════════════ */

.features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

.feature-card {
  background: var(--bg);
  padding: 32px 28px;
  transition: background 0.25s ease;
}

.feature-card.revealed:hover { background: var(--surface-raised); }

.feature-icon {
  display: block;
  font-size: 22px;
  color: var(--purple-light);
  margin-bottom: 18px;
  line-height: 1;
}

.feature-card h3 {
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 9px;
}

.feature-card p {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.68;
}

/* ═══════════════════════════════════════════════
   SHOWCASE
   Lead shot runs full width, then two supporting shots sit side by side.
   Captions sit below the frame so no image has to stretch to fill a cell.
═══════════════════════════════════════════════ */

/* ── Library switch ──
   Reads like the tab bar inside the app: quiet labels with a count pill,
   the active one underlined. */
.library-switch {
  display: flex;
  gap: 4px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.lib-tab {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 16px;
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-3);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.lib-tab:hover { color: var(--ink-2); }

.lib-tab.is-active {
  color: var(--ink);
  border-bottom-color: var(--purple);
}

.lib-count {
  padding: 2px 9px;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-3);
  background: rgba(255, 255, 255, 0.05);
  border-radius: 100px;
  transition: color 0.2s ease, background 0.2s ease;
}

.lib-tab.is-active .lib-count {
  color: var(--purple-light);
  background: var(--purple-faint);
}

.showcase-lead { margin-bottom: 20px; }

.showcase-pair {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  align-items: start;
}

.showcase-item { margin: 0; }

.showcase-frame {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.4);
  transition: border-color 0.3s ease;
}

.showcase-item:hover .showcase-frame { border-color: var(--line-accent); }

.showcase-frame img {
  width: 100%;
  height: auto;
  transition: transform 0.6s ease;
}

.showcase-item:hover .showcase-frame img { transform: scale(1.012); }

.showcase-item figcaption {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 10px;
  padding-top: 14px;
}

.shot-title {
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.shot-desc {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.6;
}

/* The lead caption gets more room, so let the description breathe */
.showcase-lead figcaption { padding-top: 16px; }
.showcase-lead .shot-title { font-size: 16px; }

.showcase-cta {
  display: flex;
  justify-content: center;
  margin-top: 44px;
}

/* ═══════════════════════════════════════════════
   TOOLS: EXPLORER
   A rail of seven tools beside a detail panel. Below 900px the rail turns
   into a horizontally scrolling strip and the panel sits under it.
═══════════════════════════════════════════════ */

.tools-shot { margin-bottom: 48px; }

/* Panel stretches to the rail height, so moving between tools with different
   amounts of copy does not make the section jump. */
.tools-explorer {
  display: grid;
  grid-template-columns: 288px 1fr;
  gap: 20px;
  align-items: stretch;
}

/* ── Rail ── */

.tool-rail {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.tool-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  font-family: var(--f-body);
  text-align: left;
  color: var(--ink-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.tool-tab:hover {
  background: rgba(255, 255, 255, 0.03);
  color: var(--ink);
}

.tool-tab.is-active {
  background: var(--purple-faint);
  border-color: var(--line-accent);
  color: var(--ink);
}

.tool-tab-icon {
  flex-shrink: 0;
  font-size: 17px;
  line-height: 1;
  color: var(--ink-3);
  transition: color 0.2s ease;
}

.tool-tab:hover .tool-tab-icon,
.tool-tab.is-active .tool-tab-icon { color: var(--purple-light); }

.tool-tab-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.tool-tab-name {
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: inherit;
}

.tool-tab-desc {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-3);
}

/* Access marker: cyan means it runs with no account, purple means sign in */
.tool-dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.tool-dot-open    { background: var(--cyan);        box-shadow: 0 0 6px rgba(0, 240, 255, 0.5); }
.tool-dot-account { background: var(--purple-light); box-shadow: 0 0 6px rgba(155, 127, 247, 0.5); }

/* ── Panel ── */

.tool-panels { min-width: 0; height: 100%; }

.tool-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 32px 30px;
  background: var(--surface);
  border: 1px solid var(--line-accent);
  border-radius: var(--r-md);
}

/* display:flex above outranks the browser's [hidden] rule, so the inactive
   panels have to be hidden explicitly or all seven stack up. */
.tool-panel[hidden] { display: none; }

.tool-panel:focus-visible { outline-offset: 0; }

.tool-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.tool-panel-head h3 {
  font-family: var(--f-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.tool-badge {
  flex-shrink: 0;
  padding: 4px 12px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 100px;
  white-space: nowrap;
}

.tool-badge-open {
  color: var(--cyan);
  background: rgba(0, 240, 255, 0.07);
  border: 1px solid rgba(0, 240, 255, 0.22);
}

.tool-badge-account {
  color: var(--purple-light);
  background: var(--purple-faint);
  border: 1px solid var(--line-accent);
}

.tool-panel-lead {
  font-size: 15.5px;
  color: var(--ink-2);
  line-height: 1.75;
  max-width: 60ch;
}

.tool-uses {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 22px 0;
}

.tool-uses li {
  position: relative;
  padding-left: 20px;
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.6;
}

.tool-uses li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 1px;
  background: var(--purple-light);
}

.tool-meta {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

/* ═══════════════════════════════════════════════
   TOOLS: ACCESS
═══════════════════════════════════════════════ */

.access-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 20px;
}

.access-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.access-card-featured {
  border-color: var(--line-accent);
  background: rgba(123, 95, 245, 0.07);
}

.access-title {
  font-family: var(--f-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}

.access-desc {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.65;
}

.access-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 26px;
}

.access-list li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px 5px 11px;
  font-size: 13px;
  border: 1px solid var(--line);
  border-radius: 100px;
}

.access-list li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

.access-list .is-on {
  color: var(--ink);
  border-color: var(--line-accent);
}

.access-list .is-on::before {
  background: var(--cyan);
  box-shadow: 0 0 6px rgba(0, 240, 255, 0.6);
}

/* Unavailable to signed-out users: quiet, struck through, still readable */
.access-list .is-off {
  color: var(--ink-3);
  text-decoration: line-through;
  text-decoration-color: var(--line-strong);
}

.access-list .is-off::before { background: var(--ink-3); opacity: 0.5; }

.access-card .btn-plan { margin-top: auto; }

/* ═══════════════════════════════════════════════
   TOOLS: STEPS
═══════════════════════════════════════════════ */

.steps {
  list-style: none;
  max-width: 760px;
  border-top: 1px solid var(--line);
}

.tools-steps { margin-top: 56px; }

.step {
  display: flex;
  gap: 28px;
  padding-block: 30px;
  border-bottom: 1px solid var(--line);
}

.step-index {
  flex-shrink: 0;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  padding-top: 5px;
  min-width: 30px;
}

.step-body h3 {
  font-family: var(--f-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}

.step-body p {
  font-size: 15.5px;
  color: var(--ink-2);
  line-height: 1.72;
}

/* ═══════════════════════════════════════════════
   PRICING
═══════════════════════════════════════════════ */

.pricing-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 44px;
}

.toggle-label {
  font-size: 14.5px;
  color: var(--ink-3);
  transition: color 0.2s ease;
}

.toggle-label.active { color: var(--ink); }

.toggle-btn {
  position: relative;
  width: 42px;
  height: 23px;
  background: rgba(255,255,255,0.1);
  border: 1px solid var(--line);
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.toggle-btn.active { background: var(--purple); border-color: var(--purple); }

.toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 17px;
  height: 17px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.25s ease;
}

.toggle-btn.active .toggle-thumb { transform: translateX(19px); }

.save-badge {
  font-style: normal;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--cyan);
  padding: 3px 10px;
  background: rgba(0, 240, 255, 0.07);
  border: 1px solid rgba(0, 240, 255, 0.22);
  border-radius: 100px;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  align-items: stretch;
  max-width: 760px;
}

.plan {
  position: relative; /* anchors the pinned plan badge */
  display: flex;
  flex-direction: column;
  padding: 30px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.plan-featured {
  border-color: var(--line-accent);
  background: rgba(123, 95, 245, 0.07);
}

/* Pinned to the card's top edge. Sitting in the flow pushed the plan name
   down and broke alignment with the other cards. The solid fill stops the
   card border showing through the badge. */
.plan-badge {
  position: absolute;
  top: 0;
  left: 24px;
  transform: translateY(-50%);
  padding: 4px 12px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--purple-light);
  background: #120f22;
  border: 1px solid var(--line-accent);
  border-radius: 100px;
  white-space: nowrap;
}

.plan-name {
  font-family: var(--f-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}

.plan-price { display: flex; align-items: baseline; }

.price-amount {
  font-family: var(--f-display);
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
}

.plan-period {
  font-size: 13px;
  color: var(--ink-3);
  margin-top: 8px;
  min-height: 20px;
}

.plan-desc {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.62;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.plan-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 20px 0 26px;
}

.plan-features li {
  position: relative;
  padding-left: 19px;
  font-size: 13.5px;
  color: var(--ink-2);
}

.plan-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--purple-light);
}

.btn-plan {
  display: block;
  margin-top: auto;
  padding: 11px 20px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.btn-plan:hover {
  color: var(--ink);
  border-color: rgba(255,255,255,0.32);
}

.btn-plan-primary {
  color: #fff;
  background: var(--purple);
  border-color: var(--purple);
}

.btn-plan-primary:hover {
  color: #fff;
  background: var(--purple-light);
  border-color: var(--purple-light);
}

.pricing-note {
  max-width: 620px;
  margin-top: 34px;
  font-size: 13.5px;
  color: var(--ink-3);
  line-height: 1.7;
}

/* ═══════════════════════════════════════════════
   FAQ
   Native details and summary, so it works with no JS, opens on keyboard,
   and every answer is in the DOM for crawlers.
═══════════════════════════════════════════════ */

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 780px;
}

.faq-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color 0.25s ease;
}

.faq-item[open] { border-color: var(--line-accent); }

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 22px;
  font-family: var(--f-display);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-2);
  cursor: pointer;
  list-style: none;
  transition: color 0.2s ease;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary:hover,
.faq-item[open] summary { color: var(--ink); }

/* Plus that rotates into a cross when the answer opens */
.faq-item summary::after {
  content: '';
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  background:
    linear-gradient(var(--ink-3), var(--ink-3)) center / 100% 1px no-repeat,
    linear-gradient(var(--ink-3), var(--ink-3)) center / 1px 100% no-repeat;
  transition: transform 0.25s ease, background 0.25s ease;
}

.faq-item[open] summary::after {
  transform: rotate(135deg);
  background:
    linear-gradient(var(--purple-light), var(--purple-light)) center / 100% 1px no-repeat,
    linear-gradient(var(--purple-light), var(--purple-light)) center / 1px 100% no-repeat;
}

.faq-answer {
  padding: 0 22px 20px;
}

.faq-answer p {
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.75;
  max-width: 68ch;
}

.faq-answer a {
  color: var(--purple-light);
  text-decoration: none;
  border-bottom: 1px solid var(--line-accent);
}

.faq-answer a:hover { color: #fff; border-bottom-color: var(--purple-light); }

/* ═══════════════════════════════════════════════
   FEEDBACK FORM
═══════════════════════════════════════════════ */

.feedback-form {
  max-width: 620px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.field-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field > label {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.field-hint {
  font-family: var(--f-body);
  font-size: 11.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
  opacity: 0.75;
}

.field input[type="text"],
.field input[type="email"],
.field textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--f-body);
  font-size: 15px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.field input::placeholder,
.field textarea::placeholder { color: var(--ink-3); }

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--line-accent);
  background: var(--surface-raised);
}

.field textarea {
  min-height: 140px;
  line-height: 1.65;
  resize: vertical;
}

/* ── Attachments ── */

.file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.file-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 28px 20px;
  text-align: center;
  cursor: pointer;
  background: rgba(123, 95, 245, 0.03);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.file-drop:hover,
.file-drop.dragging {
  border-color: var(--line-accent);
  background: rgba(123, 95, 245, 0.07);
}

.file-drop i {
  font-size: 20px;
  color: var(--purple-light);
  line-height: 1;
  margin-bottom: 2px;
}

.file-drop-main {
  font-size: 14.5px;
  color: var(--ink);
}

.file-drop-sub {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

.file-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.file-list:empty { display: none; }

.file-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

.file-item-name {
  font-size: 13.5px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-item-size {
  font-family: var(--f-mono);
  font-size: 11.5px;
  color: var(--ink-3);
  white-space: nowrap;
}

.file-item-remove {
  padding: 0;
  font-family: var(--f-body);
  font-size: 12.5px;
  color: var(--ink-3);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s ease;
}

.file-item-remove:hover { color: #ff4d4d; }

/* ── Bot trap ──
   Off screen rather than display none, since some bots skip
   anything that is not rendered. */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Actions and status ── */

.form-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.form-actions .btn-primary { flex-shrink: 0; }

.form-actions .btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.form-status {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
}

.form-status:empty { display: none; }

.form-status.error   { color: #ff4d4d; }
.form-status.success { color: var(--cyan); }

.form-note {
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.6;
}

.form-note a {
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
}

.form-note a:hover { color: var(--ink); }

/* ═══════════════════════════════════════════════
   FINAL CTA + SINGULARITY
   The blackhole is drawn on the starfield canvas and anchored to this
   section via the data-blackhole-anchor attribute. Leave the markup and
   the logo above it alone.
═══════════════════════════════════════════════ */

.final-cta {
  position: relative;
  z-index: 1;
  padding-block: 150px 130px;
  border-top: 1px solid var(--line);
  text-align: center;
  overflow: hidden;
}

.final-cta-inner {
  position: relative;
  z-index: 1;
}

.cta-logo {
  width: 150px;
  height: 150px;
  object-fit: contain;
  margin: 0 auto 26px;
  filter: drop-shadow(0 0 18px rgba(123, 95, 245, 0.55));
  animation: hover-drift 5.5s ease-in-out infinite;
}

@keyframes hover-drift {
  0%, 100% { transform: translateY(0) rotate(-1.2deg); }
  50%      { transform: translateY(-10px) rotate(1.2deg); }
}

.final-cta h2 {
  font-family: var(--f-display);
  font-size: clamp(28px, 4.2vw, 46px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: 16px;
}

.final-cta p {
  max-width: 470px;
  margin: 0 auto 32px;
  font-size: 16px;
  color: var(--ink-2);
  line-height: 1.7;
}

.cta-sub {
  margin-top: 18px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
}

/* The generic .final-cta p rule sets a wider max-width, so pull
   this one back in line under the button. */
.final-cta .cta-sub { max-width: none; margin-bottom: 0; }

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

.footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--line);
  padding-block: 52px 44px;
  background: var(--bg);
}

.footer-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}

.footer-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.footer-logo { width: 26px; height: 26px; object-fit: contain; }

.footer-brand span {
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}

.footer-tagline {
  font-size: 13px;
  color: var(--ink-3);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 24px;
}

.footer-links a {
  font-size: 13px;
  color: var(--ink-3);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-links a:hover { color: var(--ink); }

.footer-copy {
  font-size: 12px;
  color: var(--ink-3);
  padding-top: 6px;
  border-top: 1px solid var(--line);
  width: 100%;
  max-width: 320px;
}

/* ═══════════════════════════════════════════════
   HANDHELD
   The arc is four figures in a grid, each pushed down and rotated by its
   position, so the two outer ones sit lower and lean away. Hover pulls one
   upright and forward. Rotations can reach past the content column, so the
   section clips its own overflow.
═══════════════════════════════════════════════ */

.handheld { overflow: hidden; }

.phone-arc {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: end;
  padding-top: 26px;
}

/* Same glow that sits under the hero shot, widened for the row */
.phone-arc::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 6%;
  width: 84%;
  height: 68%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(123, 95, 245, 0.2) 0%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: -1;
}

.phone {
  position: relative;
  margin: 0;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.phone:nth-child(1) { transform: translateY(30px) rotate(-4.5deg); }
.phone:nth-child(2) { transform: translateY(6px)  rotate(-1.5deg); }
.phone:nth-child(3) { transform: translateY(6px)  rotate(1.5deg); }
.phone:nth-child(4) { transform: translateY(30px) rotate(4.5deg); }

/* Later than the nth rules, so it wins on equal specificity */
.phone:hover {
  transform: translateY(-12px) rotate(0deg);
  z-index: 2;
}

.phone-frame {
  position: relative;
  padding: 6px;
  border-radius: 30px;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.03));
  box-shadow:
    0 0 0 1px rgba(123, 95, 245, 0.16),
    0 28px 56px rgba(0, 0, 0, 0.62);
  transition: box-shadow 0.35s ease;
}

.phone:hover .phone-frame {
  box-shadow:
    0 0 0 1px rgba(123, 95, 245, 0.4),
    0 36px 72px rgba(0, 0, 0, 0.7),
    0 0 46px rgba(123, 95, 245, 0.18);
}

.phone-frame img {
  width: 100%;
  height: auto;
  border-radius: 24px;
  background: #000;
}

.phone figcaption {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 16px;
  text-align: center;
}

.phone .shot-title { font-size: 14.5px; }
.phone .shot-desc  { font-size: 12.5px; line-height: 1.5; }

.phone-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 46px;
  font-size: 13.5px;
  color: var(--ink-3);
  text-align: center;
}

.phone-ping {
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.8);
}

/* ── Arc flattens into a swipeable strip ──
   The negative margin lets the strip bleed to the screen edges, so the
   fourth phone is visibly cut off and reads as scrollable. */
@media (max-width: 900px) {
  .phone-arc {
    display: flex;
    gap: 14px;
    padding: 4px var(--gutter) 10px;
    margin-inline: calc(var(--gutter) * -1);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .phone-arc::-webkit-scrollbar { display: none; }
  .phone-arc::before { display: none; }

  .phone-arc > .phone {
    flex: 0 0 58%;
    max-width: 250px;
    scroll-snap-align: center;
    transform: none;
  }

  .phone-arc > .phone:hover { transform: none; }

  .phone-frame { padding: 5px; border-radius: 26px; }
  .phone-frame img { border-radius: 21px; }
}

@media (max-width: 480px) {
  .phone-arc > .phone { flex: 0 0 70%; }
  .phone-note { margin-top: 34px; font-size: 12.5px; }
}

/* ═══════════════════════════════════════════════
   SHARE
   Wide shot and phone in one row, bottom aligned so they read as one
   image. Below 900px they stack, phone under desktop and centred.
   Neither figure uses .showcase-item, so nothing here depends on the
   reveal observer running.
═══════════════════════════════════════════════ */

.share-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 248px;
  gap: 26px;
  align-items: end;
}

/* Same purple wash that sits under the hero shot */
.share-stage::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 4%;
  width: 82%;
  height: 66%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(123, 95, 245, 0.18) 0%, transparent 70%);
  filter: blur(38px);
  pointer-events: none;
  z-index: -1;
}

.share-stage figure { margin: 0; min-width: 0; }

.share-desktop .showcase-frame img { width: 100%; height: auto; }
.share-desktop:hover .showcase-frame { border-color: var(--line-accent); }

.share-phone:hover .phone-frame {
  box-shadow:
    0 0 0 1px rgba(123, 95, 245, 0.4),
    0 36px 72px rgba(0, 0, 0, 0.7),
    0 0 46px rgba(123, 95, 245, 0.18);
}

.share-stage figcaption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 14px;
}

.share-stage .shot-desc { font-size: 13px; }

/* Second paragraph in the share head: the privacy boundary, quieter than
   the pitch above it. Mirrors .hero-sub-detail. */
.share-sub-note {
  font-size: 14.5px;
  color: var(--ink-3);
  margin-top: 12px;
}

/* ── Stacked and centred ──
   Desktop shot leads, since copying the link is the first step, then the
   phone sits centred beneath it. Both captions centre with their shot. */
@media (max-width: 900px) {
  .share-stage { display: block; }
  .share-stage::before { display: none; }

  .share-desktop > figcaption { padding-top: 14px; }

  /* Specificity note: .share-stage figure sets margin: 0 and would beat a
     bare .share-phone, so the centring has to match it. */
  .share-stage .share-phone {
    width: 62%;
    max-width: 230px;
    margin: 40px auto 0;
  }

  .share-phone .phone-frame { padding: 5px; border-radius: 24px; }
  .share-phone .phone-frame img { border-radius: 19px; }

  .share-stage figcaption { align-items: center; text-align: center; }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════ */

@media (max-width: 1000px) {
  .nav-wordmark { display: none; }
}

@media (max-width: 960px) {
  :root { --section-y: 88px; }
}

/* ── Tool explorer stacks ──
   The rail becomes a horizontal strip that scrolls with snap points, and
   each tab shrinks to its name and access dot. */
@media (max-width: 900px) {
  .tools-explorer { grid-template-columns: 1fr; gap: 14px; }

  .tool-rail {
    flex-direction: row;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .tool-rail::-webkit-scrollbar { display: none; }

  /* 13px of padding puts the tab at roughly 44px tall, which is the
     smallest comfortable tap target on a phone. */
  .tool-tab {
    width: auto;
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: 13px 16px;
    gap: 9px;
  }

  .tool-tab-desc { display: none; }
  .tool-tab-name { font-size: 14.5px; white-space: nowrap; }
}

@media (max-width: 880px) {
  .pricing-grid { grid-template-columns: 1fr; max-width: 420px; }
}

@media (max-width: 760px) {
  .access-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  :root { --nav-h: 66px; --gutter: 20px; --section-y: 72px; }

  .nav-logo { width: 60px; height: 60px; }

  /* Ring follows the smaller logo — centre at 30px, ring 12px wider than it */

  .nav-actions { gap: 12px; }

  .hero { padding-top: calc(var(--nav-h) + 52px); }
  .hero-shot { margin-top: 52px; }
  .audience-bar { margin-top: 64px; padding-block: 32px; }

  .section-head { margin-bottom: 44px; }

  .features-grid { grid-template-columns: 1fr; }

  .pricing-toggle { flex-wrap: wrap; row-gap: 10px; }

  .showcase-pair { grid-template-columns: 1fr; gap: 26px; }
  .showcase-lead { margin-bottom: 26px; }
  .tools-shot { margin-bottom: 34px; }

  /* Stack the caption so long descriptions do not squeeze into a thin column */
  .showcase-item figcaption { grid-template-columns: 1fr; gap: 4px; }

  .showcase-cta .btn-primary { width: 100%; }

  .tool-panel { padding: 24px 20px; }
  .tool-panel-head { gap: 12px; padding-bottom: 16px; margin-bottom: 18px; }
  .tool-panel-head h3 { font-size: 21px; }
  .tool-panel-lead { font-size: 15px; }

  .access-card { padding: 26px 22px; }

  .tools-steps { margin-top: 40px; }
  .step { gap: 18px; padding-block: 24px; }
  .step-index { min-width: 24px; font-size: 11px; }
  .step-body h3 { font-size: 17px; }
  .step-body p { font-size: 14.5px; }

  .faq-item summary { padding: 16px 18px; font-size: 14.5px; }
  .faq-answer { padding: 0 18px 18px; }

  .final-cta { padding-block: 110px 96px; }
  .cta-logo { width: 116px; height: 116px; }

  /* Stacked, so each link gets padding rather than a bare line of text */
  .footer-links { flex-direction: column; gap: 0; }
  .footer-links a { padding-block: 9px; }

    .lib-tab { padding: 11px 12px; font-size: 14px; }
}

@media (max-width: 560px) {
  .field-row { grid-template-columns: 1fr; }
  .form-actions .btn-primary { width: 100%; }
}

@media (max-width: 480px) {
  .nav-link-quiet { display: none; }
}

@media (max-width: 420px) {
  .nav-logo { width: 54px; height: 54px; }
 
  .hero-cta { flex-direction: column; align-items: stretch; }
  .btn-primary, .btn-ghost { width: 100%; }

  /* Readout drops to a tighter size so it never wraps awkwardly */
  .readout-text { font-size: 11px; padding-inline: 11px; }
}

/* ═══════════════════════════════════════════════
   REDUCED MOTION
═══════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}