/* ================================================================
   PhotoEditRocket — shared design system (extracted from homepage v980)
   ================================================================ */

/* Price typography: smaller cents so "$19.99" doesn't read as "1999".
   No left margin and no letter-spacing so "9" and ".99" sit flush. */
.price-cents {
  font-size: .62em;
  font-weight: inherit;
  vertical-align: 0.32em;
  letter-spacing: 0;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}
:root {
  --bg:        #0a0b10;
  --bg-soft:   #11131c;
  --surface:   #13151d;
  --surface-2: #1c1f29;
  --border:    rgba(255, 255, 255, .08);
  --border-2:  rgba(255, 255, 255, .14);
  --ink:       #f1f5f9;
  --ink-soft:  #cbd5e1;
  --ink-mute:  #94a3b8;
  --ink-dim:   #64748b;

  /* 4-color primary palette — Google-inspired but our own shades */
  --pe-blue:   #2563EB;
  --pe-red:    #EF4444;
  --pe-yellow: #F59E0B;
  --pe-green:  #10B981;
  --teal:    #10B981;
  --teal-2:  #0E9E70;
  --coral:   #EF4444;
  --coral-2: #D63939;
  --violet:  #2563EB;
  --grad:    linear-gradient(95deg, #2563EB 0%, #EF4444 35%, #F59E0B 68%, #10B981 100%);
  --grad-alt: linear-gradient(95deg, #7EE0D4 0%, #34D4B5 45%, #8B5CF6 100%);

  --r-xs: 8px;
  --r-s:  12px;
  --r-m:  18px;
  --r-l:  24px;
  --r-xl: 32px;

  --shadow-glow: 0 24px 80px -20px rgba(37, 99, 235, .25), 0 12px 40px -16px rgba(16, 185, 129, .22);
  --shadow-lift: 0 12px 36px -12px rgba(0, 0, 0, .6);

  /* v1.9.9 — modern design-system scale: 4px-based spacing rhythm, motion
     tokens, and layout container. Mirrors
     design-system/photoeditrocket-website.tokens.json. New/updated components
     reference these instead of one-off pixel values. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --ease-standard: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.2, 1.5, .4, 1);
  --dur-fast: .18s;
  --dur-base: .3s;
  --container: 1280px;
  --gutter: 28px;

  --font: "Inter", -apple-system, BlinkMacSystemFont, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Inter", system-ui, sans-serif;
}

/* ===== PhotoEditRocket Design System — shared tokens (v1.0, non-breaking) =====
   Namespaced --pe-* so they never collide with the site's existing variables.
   ADDITIVE ONLY: nothing above is rewired, so there is zero visual change. New
   and refactored components reference these. Full docs: design-system/. */
:root {
  --pe-blue:#2563EB; --pe-blue-rgb:37,99,235; --pe-red:#EF4444; --pe-amber:#F59E0B; --pe-green:#10B981;
  --pe-grad:linear-gradient(95deg,#2563EB 0%,#EF4444 35%,#F59E0B 68%,#10B981 100%);
  --pe-grad-alt:linear-gradient(95deg,#7EE0D4 0%,#34D4B5 45%,#8B5CF6 100%);
  --pe-grad-blue:linear-gradient(180deg,#4f86f0 0%,#2563EB 55%,#1b4fc2 100%);
  --pe-accent:var(--pe-blue); --pe-accent-rgb:var(--pe-blue-rgb); --pe-accent-light:#4f86f0; --pe-accent-deep:#1b4fc2;
  --pe-accent-fg:#ffffff; --pe-accent-tint:#cfe0ff; --pe-accent-soft:rgba(37,99,235,.14); --pe-accent-2:#f0bd62;
  --pe-bg:#0a0b10; --pe-bg-soft:#11131c; --pe-surface:#13151d; --pe-surface-2:#1c1f29; --pe-surface-3:#202832; --pe-workspace:#0b0e12;
  --pe-border:rgba(255,255,255,.08); --pe-border-strong:rgba(255,255,255,.14); --pe-line:rgba(255,255,255,.065);
  --pe-control:#202832; --pe-control-hover:#2c3543; --pe-control-active:#333e4d;
  --pe-ink:#f1f5f9; --pe-ink-soft:#cbd5e1; --pe-ink-muted:#94a3b8; --pe-ink-dim:#64748b;
  --pe-success:var(--pe-green); --pe-warning:var(--pe-amber); --pe-danger:#dd5f5f;
  --pe-font:"Inter",-apple-system,BlinkMacSystemFont,system-ui,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --pe-font-display:"Inter",system-ui,sans-serif; --pe-font-mono:ui-monospace,"SF Mono","Cascadia Code",Consolas,monospace;
  --pe-display-1:clamp(48px,7.6vw,104px); --pe-display-2:clamp(40px,6vw,80px);
  --pe-title:clamp(34px,4vw,56px); --pe-title-sm:clamp(24px,2.4vw,34px); --pe-lead:clamp(17px,1.5vw,21px);
  --pe-text-2xs:10px; --pe-text-xs:11px; --pe-text-sm:12px; --pe-text-md:13px; --pe-text-base:14px; --pe-text-lg:15px; --pe-text-xl:16px; --pe-text-2xl:18px; --pe-text-3xl:22px;
  --pe-w-medium:500; --pe-w-semibold:600; --pe-w-bold:700; --pe-w-extrabold:800; --pe-w-black:900;
  --pe-lh-tight:1.02; --pe-lh-snug:1.2; --pe-lh-normal:1.5; --pe-lh-relaxed:1.55;
  --pe-ls-tight:-.04em; --pe-ls-snug:-.02em; --pe-ls-normal:-.005em; --pe-ls-wide:.04em; --pe-ls-wider:.08em;
  --pe-space-1:4px; --pe-space-2:8px; --pe-space-3:12px; --pe-space-4:16px; --pe-space-5:24px; --pe-space-6:32px; --pe-space-7:48px; --pe-space-8:64px; --pe-space-9:96px;
  --pe-r-xs:8px; --pe-r-sm:12px; --pe-r-md:18px; --pe-r-lg:24px; --pe-r-xl:32px; --pe-r-pill:999px;
  --pe-r-app-sm:6px; --pe-r-app-md:8px; --pe-r-app-lg:11px;
  --pe-shadow-soft:0 10px 28px rgba(0,0,0,.26); --pe-shadow-lift:0 12px 36px -12px rgba(0,0,0,.6); --pe-shadow-modal:0 24px 70px rgba(0,0,0,.48);
  --pe-shadow-card:0 1px 0 rgba(255,255,255,.05) inset,0 20px 48px -28px rgba(0,0,0,.78),0 4px 12px -6px rgba(0,0,0,.5);
  --pe-shadow-glow:0 24px 80px -20px rgba(37,99,235,.25),0 12px 40px -16px rgba(16,185,129,.22);
  --pe-ring:0 0 0 3px rgba(37,99,235,.35);
  --pe-ease-standard:cubic-bezier(.2,.8,.2,1); --pe-ease-spring:cubic-bezier(.2,1.5,.4,1); --pe-ease-out:cubic-bezier(.22,.61,.36,1);
  --pe-dur-fast:.14s; --pe-dur-base:.3s; --pe-dur-slow:.5s;
  --pe-container:1280px; --pe-gutter:28px; --pe-control-h:36px;
}

/* ===== Component migration — converge legacy names onto the --pe-* source =====
   Every pair below is VALUE-IDENTICAL to what the site already used, so this is a
   zero-visual-change migration to a single source of truth: existing components
   (which reference --bg, --ink, --grad, --space-*, …) now resolve through --pe-*.
   Durations and --teal-2/--coral-2 are intentionally NOT bridged (no exact
   --pe-* equivalent). */
:root {
  --bg:var(--pe-bg); --bg-soft:var(--pe-bg-soft); --surface:var(--pe-surface); --surface-2:var(--pe-surface-2);
  --border:var(--pe-border); --border-2:var(--pe-border-strong);
  --ink:var(--pe-ink); --ink-soft:var(--pe-ink-soft); --ink-mute:var(--pe-ink-muted); --ink-dim:var(--pe-ink-dim);
  --teal:var(--pe-green); --coral:var(--pe-red); --violet:var(--pe-blue);
  --grad:var(--pe-grad); --grad-alt:var(--pe-grad-alt);
  --r-xs:var(--pe-r-xs); --r-s:var(--pe-r-sm); --r-m:var(--pe-r-md); --r-l:var(--pe-r-lg); --r-xl:var(--pe-r-xl);
  --space-1:var(--pe-space-1); --space-2:var(--pe-space-2); --space-3:var(--pe-space-3); --space-4:var(--pe-space-4);
  --space-5:var(--pe-space-5); --space-6:var(--pe-space-6); --space-7:var(--pe-space-7); --space-8:var(--pe-space-8); --space-9:var(--pe-space-9);
  --shadow-glow:var(--pe-shadow-glow); --shadow-lift:var(--pe-shadow-lift);
  --ease-standard:var(--pe-ease-standard); --ease-spring:var(--pe-ease-spring);
  --font:var(--pe-font); --font-display:var(--pe-font-display);
}
@supports (font-variation-settings: normal) {
  :root { --font: "Inter var", system-ui, sans-serif; }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-feature-settings: "cv11", "ss01", "ss03";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  /* clip (not hidden) prevents horizontal scroll without creating a
     scroll container that would break the sticky nav. */
  overflow-x: clip;
}

/* v1479 — grain overlay removed. Was breaking up button-card shadows
   and adding visible noise to showcase imagery. Buttons and product
   images now render cleanly as designed. */
body::before { display: none; }

/* scroll progress bar */
#scrollBar {
  position: fixed; top: 0; left: 0; height: 2px;
  width: 0%; z-index: 9999;
  background: var(--grad);
  transition: width .12s linear;
  will-change: width;
}

/* ============= nav (always-light, edge-to-edge) ============= */
.nav {
  position: sticky; top: 0; z-index: 100;
  display: grid; grid-template-columns: auto 1fr auto auto;
  align-items: center; gap: 20px;
  padding: 14px 28px;
  margin: 0;
  max-width: none;
  width: 100%;
  background: #ffffff;
  border: 0;
  border-bottom: 1px solid rgba(10, 11, 16, .07);
  border-radius: 0;
  box-shadow:
    inset 0 -1px 0 rgba(10, 11, 16, .04),
    0 1px 0 rgba(10, 11, 16, .03);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.nav.scrolled {
  background: #ffffff;
  border-bottom-color: rgba(10, 11, 16, .1);
  box-shadow:
    inset 0 -1px 0 rgba(10, 11, 16, .04),
    0 10px 28px -16px rgba(10, 11, 16, .14);
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: #0a0b10; text-decoration: none; font-weight: 700;
  letter-spacing: -.01em; font-size: 16px;
}
/* v1514 — split wordmark: "Photo Edit" in solid black, "Rocket" in brand gradient.
   Uniform 6px gap between the two halves to match editor + splash. */
.brand { gap: 0; }
.brand .brand-mark { margin-right: 8px; }
.brand .bw-white, .brand .bw-grad { font-size: 16px; font-weight: 700; letter-spacing: -.01em; line-height: 1; }
.brand .bw-white { color: #0a0b10; margin-right: 4px; }
.brand .bw-grad {
  /* Match the CTA button gradient (var(--grad)) exactly. */
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.brand-mark {
  /* v1514 — use the exact same icon file as the editor's app-title.
     Clean PNG render, no fallback gradient bleeding through. */
  width: 32px; height: 32px; border-radius: 9px;
  background: #0a0b10 url("assets/brand-mark.png") center/cover no-repeat;
  box-shadow: 0 4px 16px -2px rgba(160, 32, 240, .35);
  display: inline-block;
  color: transparent;
  font-size: 0;
  flex-shrink: 0;
}
/* Only blank out children of the icon swatch itself (.brand-mark), not the
   sibling .bw-white / .bw-grad wordmark spans that live on .brand. */
.brand-mark > * { display: none !important; }
.brand > .bw-white, .brand > .bw-grad { display: inline-block !important; }
/* New gradient on .brand-mark — match Buy button + new SVG. */
/* v1514 — override to pure icon image; no underlying gradient washing it out. */
.brand-mark { background: #0a0b10 url("assets/brand-mark.png") center/cover no-repeat !important; }
.nav-links {
  display: flex; gap: 2px; justify-content: center;
  font-size: 14px;
}
.nav-links a {
  position: relative;
  color: #4b5563; text-decoration: none;
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 500;
  transition: color .18s ease, background .18s ease, box-shadow .2s ease;
}
.nav-links a:hover {
  color: #0a0b10;
  background: rgba(10, 11, 16, .055);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    inset 0 -1px 0 rgba(10, 11, 16, .04),
    0 1px 2px rgba(10, 11, 16, .04);
}
.nav-links a:active { background: rgba(10, 11, 16, .08); }
.nav-links a[aria-current] {
  color: #0a0b10;
  background: rgba(10, 11, 16, .07);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .85),
    inset 0 0 0 1px rgba(10, 11, 16, .05);
}
.nav-links a:focus-visible {
  outline: 2px solid var(--pe-blue, #2563EB);
  outline-offset: 2px;
}
.nav-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 18px; border-radius: 999px;
  background: var(--grad); color: #ffffff;
  text-shadow: 0 1px 2px rgba(10, 11, 16, .38);
  text-decoration: none; font-weight: 700; font-size: 14px;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 4px 14px -4px rgba(37, 99, 235, .35);
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -6px rgba(37, 99, 235, .45); }
.nav-cta { white-space: nowrap; }

/* hamburger — hidden on desktop */
.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.6);
  border-radius: 10px;
  cursor: pointer; padding: 0;
  align-items: center; justify-content: center;
}
.nav-toggle:focus-visible { outline: 2px solid #2563EB; outline-offset: 2px; }
.nav-toggle .bars { position: relative; width: 18px; height: 14px; display: block; }
.nav-toggle .bars::before,
.nav-toggle .bars::after,
.nav-toggle .bars span {
  content: ""; position: absolute; left: 0; right: 0; height: 2px;
  background: #0a0b10; border-radius: 2px;
  transition: transform .25s ease, top .2s ease, opacity .15s ease;
}
.nav-toggle .bars::before { top: 0; }
.nav-toggle .bars span    { top: 6px; }
.nav-toggle .bars::after  { top: 12px; }
.nav.menu-open .nav-toggle .bars::before { top: 6px; transform: rotate(45deg); }
.nav.menu-open .nav-toggle .bars::after  { top: 6px; transform: rotate(-45deg); }
.nav.menu-open .nav-toggle .bars span    { opacity: 0; }

@media (max-width: 880px) {
  .nav {
    grid-template-columns: auto 1fr auto auto;
    gap: 10px; padding: 12px 16px;
  }
  .nav-toggle { display: inline-flex; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 4px;
    padding: 12px 16px 18px;
    background: rgba(255,255,255,.98);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 16px 32px -16px rgba(0,0,0,.18);
    font-size: 16px;
    transform: translateY(-8px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: transform .22s ease, opacity .22s ease, visibility .22s;
  }
  .nav-links a { padding: 12px 14px; border-radius: 10px; width: 100%; }
  .nav.menu-open .nav-links {
    transform: translateY(0); opacity: 1;
    visibility: visible; pointer-events: auto;
  }
  .nav-cta { padding: 7px 14px; font-size: 13px; }
}
@media (max-width: 380px) {
  .brand { font-size: 14px; }
  .nav-cta { padding: 6px 12px; font-size: 12px; }
}

/* ============= sections ============= */
section {
  position: relative; z-index: 2;
  padding: var(--space-9) var(--gutter); /* 96px / 28px — on the 4px grid */
  max-width: var(--container);
  margin: 0 auto;
}
@media (max-width: 760px) {
  section { padding: var(--space-8) var(--space-4); } /* 64px / 16px */
}

/* ============= page hero (inner pages) ============= */
.page-hero {
  padding-top: 80px; padding-bottom: 56px;
  text-align: center;
}
.page-hero .eyebrow { justify-content: center; }
.page-hero .h2 {
  font-size: clamp(40px, 6vw, 80px);
  font-weight: 700; letter-spacing: -.04em; line-height: 1.02;
  margin: 0 0 20px;
}
.page-hero .h2 .grad,
.page-hero .h1 .grad {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.page-hero .lede {
  font-size: clamp(16px, 1.4vw, 20px);
  color: var(--ink-mute); max-width: 600px; margin: 0 auto 32px;
}

/* ============= eyebrow pill ============= */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 12px 6px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--border);
  font-size: 13px; color: var(--ink-soft);
  margin: 0 0 24px;
}
.eyebrow .dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, .14);
  animation: dot-pulse 2.4s ease-in-out infinite;
}
@keyframes dot-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .5; }
}
.eyebrow .tag {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 999px;
  background: var(--coral); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}

/* ============= headings ============= */
.h1 {
  margin: 0 0 24px;
  font-size: clamp(48px, 7.6vw, 104px);
  line-height: .98; letter-spacing: -.04em; font-weight: 700;
}
.h1 .grad, .grad-text {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.lede {
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.5; color: var(--ink-mute);
  max-width: 640px; margin: 0 0 36px;
}

/* ============= buttons ============= */
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-5); border-radius: 999px;
  text-decoration: none; font-weight: 600; font-size: 15px;
  letter-spacing: -.005em;
  border: 1px solid transparent;
  transition: transform .15s, box-shadow .15s, background .15s, border-color .15s;
  cursor: pointer;
}
.btn-primary {
  background: var(--ink); color: #07090d;
  box-shadow: 0 4px 14px -4px rgba(241, 245, 249, .3);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 28px -8px rgba(241, 245, 249, .45); }
.btn-ghost {
  background: rgba(255, 255, 255, .04); color: var(--ink);
  border-color: var(--border-2);
}
.btn-ghost:hover { background: rgba(255, 255, 255, .08); border-color: var(--ink-mute); }
.btn-grad {
  background: var(--grad); color: #ffffff;
  text-shadow: 0 1px 2px rgba(10, 11, 16, .38);
  box-shadow: 0 8px 24px -6px rgba(37, 99, 235, .45), 0 4px 12px -4px rgba(239, 68, 68, .35);
}
.btn-grad .price-cents { color: #ffffff; }
.btn-grad:hover { transform: translateY(-1px); }
.btn-sm { padding: var(--space-2) var(--space-4); font-size: 14px; border-radius: 999px; }

/* ============= section heading ============= */
.section-head { max-width: 760px; margin: 0 0 var(--space-8); }
.section-eyebrow {
  font-size: 13px; font-weight: 600;
  color: var(--teal); letter-spacing: .04em; text-transform: uppercase;
  margin: 0 0 var(--space-4);
}
.section-title {
  margin: 0 0 var(--space-4);
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.05; letter-spacing: -.03em; font-weight: 700;
}
.section-sub {
  font-size: clamp(16px, 1.3vw, 19px);
  color: var(--ink-mute); max-width: 620px;
}

/* ============= bento grid ============= */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(220px, auto);
  gap: var(--space-4);
}
.cell {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-l);
  padding: 28px; overflow: hidden;
  transition: border-color .2s, transform .2s;
}
.cell:hover { border-color: var(--border-2); transform: translateY(-2px); }
.cell::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(120% 80% at var(--mx,50%) var(--my,50%), rgba(37, 99, 235,.12), transparent 60%);
  opacity: 0; transition: opacity .25s; pointer-events: none;
}
.cell:hover::after { opacity: 1; }
.cell h3 { margin: 0 0 8px; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.cell p { margin: 0; color: var(--ink-mute); font-size: 14px; line-height: 1.55; }
.cell .icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(37, 99, 235,.12); color: var(--teal);
  margin-bottom: 18px;
  border: 1px solid rgba(16, 185, 129,.18);
}
.cell svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cell.x-2 { grid-column: span 2; }
.cell.x-3 { grid-column: span 3; }
.cell.x-4 { grid-column: span 4; }
.cell.x-6 { grid-column: span 6; }
.cell.y-2 { grid-row: span 2; }
.cell-hero {
  background:
    radial-gradient(80% 60% at 80% 20%, rgba(16, 185, 129,.18), transparent 60%),
    radial-gradient(80% 60% at 20% 100%, rgba(239, 68, 68,.14), transparent 60%),
    var(--surface);
}
@media (max-width: 980px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .cell.x-2, .cell.x-3, .cell.x-4, .cell.x-6 { grid-column: span 2; }
  .cell.y-2 { grid-row: auto; }
}
@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; }
  .cell.x-2, .cell.x-3, .cell.x-4, .cell.x-6 { grid-column: 1; }
}

/* ============= comparison table ============= */
.compare-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.compare-wrap table { width: 100%; border-collapse: collapse; }
.compare-wrap th, .compare-wrap td {
  padding: 16px 18px; text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: 14px; color: var(--ink-soft);
}
.compare-wrap th { font-weight: 600; color: var(--ink-mute); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; background: var(--bg-soft); }
.compare-wrap td.us { color: var(--ink); font-weight: 500; }
.compare-wrap td.them { color: var(--ink-mute); }
.compare-wrap .row-name { font-weight: 500; color: var(--ink); }
@media (max-width: 720px) { .compare-wrap th, .compare-wrap td { padding: 12px; font-size: 13px; } }

/* ============= pricing card ============= */
.price-card {
  position: relative;
  padding: 40px 36px;
  background: linear-gradient(180deg, var(--surface), var(--bg-soft));
  border: 1px solid var(--border-2);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-glow);
}
.price-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: var(--grad);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .35; pointer-events: none;
}
.price-amount {
  font-size: clamp(64px, 7vw, 96px);
  font-weight: 800; letter-spacing: -.04em; line-height: 1; margin: 0 0 6px;
}
.price-amount s { font-size: .4em; color: var(--ink-dim); font-weight: 500; margin-left: 12px; vertical-align: middle; }
.price-list {
  list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 15px;
  align-content: start; /* keep features top-aligned + evenly spaced instead of
                           stretching to fill the equal-height card (fixes the
                           uneven gaps in the shorter Free / Team columns). */
}
.price-list li {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 14px; line-height: 1.45; color: var(--ink-soft);
}
.price-list li::before {
  content: ""; flex: 0 0 18px; height: 18px; margin-top: 2px;
  border-radius: 50%; background: rgba(16, 185, 129,.15);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310B981' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 12px; background-repeat: no-repeat; background-position: center;
}

/* ============= faq ============= */
.faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-m); }
.faq-item summary {
  list-style: none; cursor: pointer;
  padding: 20px var(--space-5); font-weight: 600; font-size: 16px; color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--ink-mute); font-weight: 400; transition: transform .2s; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .body { padding: 0 var(--space-5) 22px; color: var(--ink-mute); font-size: 14px; line-height: 1.6; }
.faq-item .body a { color: var(--teal); }
@media (max-width: 720px) { .faq-grid { grid-template-columns: 1fr; } }

/* ============= cta strip ============= */
.cta-strip {
  text-align: center; padding: 80px 28px;
  background:
    radial-gradient(60% 100% at 50% 0%, rgba(37, 99, 235,.15), transparent 60%),
    radial-gradient(60% 100% at 50% 100%, rgba(239, 68, 68,.12), transparent 60%),
    var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  max-width: none;
}
.cta-strip h2 { font-size: clamp(36px, 5vw, 64px); letter-spacing: -.03em; line-height: 1.05; margin: 0 0 18px; font-weight: 700; }
.cta-strip p { font-size: 18px; color: var(--ink-mute); margin: 0 0 28px; }

/* ============= legal / prose ============= */
.legal-panel {
  max-width: 780px; margin: 0 auto;
}
.legal-panel h1 { font-size: clamp(34px, 4vw, 52px); letter-spacing: -.03em; font-weight: 700; margin: 0 0 8px; }
.legal-panel .meta { font-size: 13px; color: var(--ink-dim); margin: 0 0 48px; }
.legal-panel h3 { font-size: 18px; font-weight: 600; letter-spacing: -.01em; margin: 40px 0 10px; color: var(--ink); }
.legal-panel p { color: var(--ink-mute); font-size: 15px; line-height: 1.7; margin: 0 0 14px; }
.legal-panel a { color: var(--teal); text-decoration: none; }
.legal-panel a:hover { text-decoration: underline; }
.legal-panel ul { padding-left: 20px; color: var(--ink-mute); font-size: 15px; line-height: 1.7; }
.legal-panel ul li { margin-bottom: 8px; }
.legal-panel strong { color: var(--ink-soft); }

/* ============= contact grid ============= */
.contact-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start;
}
.contact-info h2 { font-size: clamp(28px, 3vw, 42px); letter-spacing: -.02em; font-weight: 700; margin: 0 0 16px; color: var(--ink); }
.contact-info p { color: var(--ink-mute); font-size: 16px; line-height: 1.6; margin: 0 0 24px; }
.contact-info .detail { display: grid; gap: 12px; }
.contact-info .detail-item {
  display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start;
  padding: 14px; border: 1px solid var(--border); border-radius: var(--r-m);
  background: rgba(255,255,255,.02); color: var(--ink-soft); font-size: 14px;
}
.contact-info .detail-item strong { display: block; color: var(--ink); margin-bottom: 2px; }
.contact-info .detail-item a { color: var(--ink-soft); text-decoration: none; word-break: break-word; }
.contact-info .detail-item a:hover { color: var(--ink); text-decoration: underline; }
.contact-form {
  display: grid; gap: 14px;
  padding: 28px; border: 1px solid var(--border); border-radius: var(--r-l);
  background: var(--surface);
}
.contact-form label { display: grid; gap: 6px; font-size: 13px; color: var(--ink-mute); font-weight: 600; }
.contact-form input,
.contact-form textarea {
  width: 100%; box-sizing: border-box;
  padding: 12px 14px; font: inherit; font-size: 15px;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--border-2); border-radius: var(--r-s);
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--pe-blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .18);
}
.contact-form textarea { min-height: 140px; resize: vertical; }
.contact-form button[type="submit"] { justify-self: start; margin-top: 4px; }
@media (max-width: 760px) {
  .contact-grid { grid-template-columns: 1fr; gap: 28px; }
  .contact-form { padding: 20px; }
}

/* ============= footer (shared across all pages) ============= */
footer {
  position: relative; z-index: 2;
  padding: 60px 28px 40px;
  border-top: 1px solid var(--border);
  max-width: 1280px; margin: 0 auto;
  color: var(--ink-mute); font-size: 13px;
}
.foot-grid {
  display: flex; gap: 24px;
  justify-content: space-between; flex-wrap: wrap;
  margin-bottom: 24px;
}
.foot-links {
  display: flex; flex-wrap: wrap; gap: 18px;
}
.foot-links a { color: var(--ink-mute); text-decoration: none; transition: color .15s ease; }
.foot-links a:hover, .foot-links a:focus-visible { color: var(--ink); }
.foot-tm {
  font-size: 11px; color: var(--ink-dim);
  line-height: 1.5; max-width: 800px;
}
/* Columned footer: grouped link columns, each under a heading. */
.foot-cols { display: flex; flex-wrap: wrap; gap: 28px 56px; align-items: flex-start; }
.foot-col { display: flex; flex-direction: column; gap: 9px; }
.foot-col-h { font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ink); margin-bottom: 3px; }
.foot-col a { color: var(--ink-mute); text-decoration: none; font-size: 13px; transition: color .15s ease; }
.foot-col a:hover, .foot-col a:focus-visible { color: var(--ink); }
@media (max-width: 600px) {
  footer { padding: 40px 18px 28px; }
  .foot-grid { flex-direction: column; gap: 16px; }
  .foot-links { gap: 12px 18px; }
  .foot-cols { gap: 22px 32px; }
}

/* ===== Footer — premium redesign ===== */
footer { position: relative; overflow: hidden; padding-top: 72px; }
footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--grad); opacity: .6;
}
footer::after {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 760px; height: 300px; max-width: 100%; pointer-events: none; z-index: 0;
  background: radial-gradient(58% 100% at 50% 0%, rgba(37,99,235,.10), transparent 72%);
}
.foot-main, .foot-bottom, footer > .foot-tm { position: relative; z-index: 1; }

.foot-main {
  display: flex; justify-content: space-between;
  gap: clamp(40px, 7vw, 104px); flex-wrap: wrap; margin-bottom: 46px;
}
.foot-brand { flex: 1 1 100%; max-width: 820px; margin: 0 auto; text-align: center; }
.foot-logo { display: inline-flex; align-items: center; justify-content: center; gap: 16px; text-decoration: none; margin-bottom: 14px; }
.foot-logo .brand-mark { width: 36px; height: 36px; border-radius: 10px; box-shadow: 0 3px 9px -6px rgba(124,77,255,.30); }
.foot-wordmark { display: inline-flex; align-items: baseline; white-space: nowrap; font-size: 26px; font-weight: 800; letter-spacing: -.015em; line-height: 1; }
.foot-wordmark .bw-white { color: var(--ink); margin-right: 4px; }
.foot-wordmark .bw-grad {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.foot-tagline { color: var(--ink-mute); font-size: 14.5px; line-height: 1.7; margin: 0 auto 18px; max-width: 640px; }
.foot-platforms { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin: 0 0 20px; }
.foot-platforms .plat {
  font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--ink-soft);
  padding: 4px 11px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.foot-social { display: flex; justify-content: center; gap: 9px; }
.foot-ico {
  width: 38px; height: 38px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-mute);
  transition: transform .15s ease, border-color .15s ease, color .15s ease, background .15s ease;
}
.foot-ico:hover, .foot-ico:focus-visible { transform: translateY(-2px); border-color: var(--teal); color: var(--ink); background: rgba(16,185,129,.10); }
.foot-ico svg { width: 17px; height: 17px; }

.foot-cols { display: flex; flex-wrap: wrap; gap: 30px clamp(34px, 4.5vw, 66px); align-items: flex-start; }
.foot-col { display: flex; flex-direction: column; gap: 11px; }
.foot-col-h { font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 4px; }
.foot-col a { color: var(--ink-mute); text-decoration: none; font-size: 13.5px; line-height: 1.2; width: fit-content; transition: color .15s ease, transform .15s ease; }
.foot-col a:hover, .foot-col a:focus-visible { color: var(--ink); transform: translateX(2px); }

.foot-bottom {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px 32px; flex-wrap: wrap;
  border-top: 1px solid var(--border); padding-top: 24px; margin-bottom: 18px;
}
.foot-copy { color: var(--ink-dim); font-size: 12.5px; }
.foot-legal { display: flex; flex-wrap: wrap; gap: 18px; }
.foot-legal a { color: var(--ink-mute); text-decoration: none; font-size: 12.5px; transition: color .15s ease; }
.foot-legal a:hover, .foot-legal a:focus-visible { color: var(--ink); }
footer > .foot-tm { font-size: 11px; color: var(--ink-dim); line-height: 1.6; max-width: 920px; margin: 0; }

@media (max-width: 600px) {
  footer { padding-top: 52px; }
  .foot-main { flex-direction: column; gap: 32px; margin-bottom: 34px; }
  .foot-cols { gap: 26px 38px; }
  .foot-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ============= small utility / shared section helpers ============= */
.section-eyebrow {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  color: var(--ink-mute);
  font-size: 12px; font-weight: 600;
  letter-spacing: .02em;
  margin: 0 0 14px;
}
.h2 {
  font-size: clamp(40px, 6vw, 80px);
  font-weight: 700; letter-spacing: -.04em; line-height: 1.02;
  margin: 0 0 20px; color: var(--ink);
}
.grad {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ============================================================
   v1812 — premium polish pass (additive; refines without
   changing layout/structure).
   ============================================================ */
:root {
  --ease: cubic-bezier(.22, .61, .36, 1);
  --shadow-card:        0 1px 0 rgba(255,255,255,.045) inset, 0 18px 44px -26px rgba(0,0,0,.72), 0 2px 8px -4px rgba(0,0,0,.5);
  --shadow-card-hover:  0 1px 0 rgba(255,255,255,.07) inset,  0 30px 64px -28px rgba(0,0,0,.78), 0 8px 22px -10px rgba(37,99,235,.22);
}

/* Consistent, refined motion */
.btn, .cell, .price-card, .nav-cta, .nav-links a, .cta-strip, .cell .icon {
  transition-timing-function: var(--ease);
}

/* Premium typography — balanced headlines, tidy paragraphs */
.h1, .h2, .section-title, .page-hero .h1, .page-hero .h2, .cell h3, .price-card h3 {
  text-wrap: balance;
}
.lede, .section-sub, .page-hero .lede, .cell p { text-wrap: pretty; }

/* Buttons — tactile press + crisp focus ring */
.btn { will-change: transform; }
.btn:active { transform: translateY(0) scale(.985); }
.btn-grad:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -10px rgba(37,99,235,.5), 0 8px 20px -8px rgba(239,68,68,.4);
}
.btn:focus-visible, .nav-cta:focus-visible, .nav-links a:focus-visible {
  outline: 2px solid #5b8cff;
  outline-offset: 3px;
}

/* Cards — quiet, layered elevation that lifts on hover */
.cell, .price-card { box-shadow: var(--shadow-card); }
.cell { transition: border-color .25s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); }
.cell:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); border-color: var(--border-2); }
.price-card { transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .25s var(--ease); }
.price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }

/* Feature icon — softer, more deliberate */
.cell .icon { box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 6px 16px -8px rgba(37,99,235,.35); }

/* Nav CTA — subtle top sheen for depth */
.nav-cta { box-shadow: 0 6px 18px -6px rgba(37,99,235,.4), 0 1px 0 rgba(255,255,255,.28) inset; }

/* Eyebrow pill — glassy */
.eyebrow { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* A touch more breathing room under section heads */
.section-head { margin-bottom: 56px; }

@media (prefers-reduced-motion: reduce) {
  .btn, .cell, .price-card, .nav-cta { transition: none !important; }
  .btn:active, .cell:hover, .price-card:hover, .btn-grad:hover { transform: none !important; }
}

/* ============================================================
   Apple-inspired polish — match the homepage treatment.
   Stronger card elevation/lift, brighter secondary text, and
   more air beneath section heads. Color-preserving, additive.
   ============================================================ */
:root {
  --card-shadow:       0 1px 0 rgba(255,255,255,.05) inset, 0 20px 48px -28px rgba(0,0,0,.78), 0 4px 12px -6px rgba(0,0,0,.5);
  --card-shadow-hover: 0 1px 0 rgba(255,255,255,.09) inset, 0 34px 72px -30px rgba(0,0,0,.82), 0 10px 26px -12px rgba(37,99,235,.30);
}

.cell, .price-card {
  box-shadow: var(--card-shadow);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .25s var(--ease);
}
.cell { border-radius: 26px; padding: 30px; }
.cell:hover, .price-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--card-shadow-hover);
  border-color: var(--border-2);
}
.cell .icon { box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 8px 20px -10px rgba(37,99,235,.45); }

.section-title { letter-spacing: -.035em; }
.cell h3 { font-size: 23px; letter-spacing: -.025em; }
.cell p { font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.section-sub, .page-hero .lede { color: var(--ink-soft); }

.section-head { margin-bottom: var(--space-8); }

@media (prefers-reduced-motion: reduce) {
  .cell, .price-card { transition: none !important; }
  .cell:hover, .price-card:hover { transform: none !important; }
}

/* Readable inline links on dark surfaces — emails, phone, and the
   contact/identity blocks that previously fell back to the browser's
   dark default blue (invisible on a dark background). */
a[href^="mailto:"],
a[href^="tel:"],
.contact-info a,
.detail a,
.section-sub a,
.section-head a,
.lede a {
  color: #6ea8fe;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(110, 168, 254, .5);
}
a[href^="mailto:"]:hover,
a[href^="tel:"]:hover,
.contact-info a:hover,
.detail a:hover,
.section-sub a:hover,
.section-head a:hover,
.lede a:hover {
  color: #9cc0ff;
  text-decoration-color: #9cc0ff;
}

/* ===== Modern polish (site-wide) — reveal, cascade, frosted nav, card depth ===== */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }
body:not(.js-ready) .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } }
@media (prefers-reduced-motion: no-preference) {
  .reveal .cell { opacity: 0; transform: translateY(20px); transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); }
  .reveal.in .cell { opacity: 1; transform: none; }
  .reveal.in .cell:nth-child(2) { transition-delay: .05s; }
  .reveal.in .cell:nth-child(3) { transition-delay: .10s; }
  .reveal.in .cell:nth-child(4) { transition-delay: .15s; }
  .reveal.in .cell:nth-child(5) { transition-delay: .20s; }
  .reveal.in .cell:nth-child(6) { transition-delay: .25s; }
}
body:not(.js-ready) .reveal .cell { opacity: 1 !important; transform: none !important; }
.nav.scrolled { background: rgba(255,255,255,.72); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); }
.cell { transition: transform .38s cubic-bezier(.22,.61,.36,1), box-shadow .38s ease, border-color .25s ease; }
.cell:hover { transform: translateY(-5px); box-shadow: 0 34px 66px -32px rgba(0,0,0,.45), 0 10px 26px -14px rgba(37,99,235,.2); }

/* Modern giant centered wordmark at the bottom of the footer */
.foot-bigmark { display: block; text-align: center; text-decoration: none; white-space: nowrap; overflow: hidden; margin: 34px 0 8px; line-height: .9; font-weight: 900; letter-spacing: -.038em; font-size: clamp(36px, 9.5vw, 152px); }
.foot-bigmark .bw-white { color: var(--ink); font-size: inherit; margin-right: 0.18em; }
.foot-bigmark .bw-grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-size: inherit; }


/* ============================================================
   v1.9.9 — White glow behind the top-nav links + logo, so the glass /
   translucent nav stays legible over dark hero imagery. On light areas
   the white halo sits on white and is invisible, so it is safe everywhere.
   ============================================================ */
.nav-links > a,
.nav-mega-trigger {
  text-shadow: 0 0 9px rgba(255,255,255,.85), 0 0 20px rgba(255,255,255,.5);
}
.brand .bw-white {
  text-shadow: 0 0 10px rgba(255,255,255,.9), 0 0 22px rgba(255,255,255,.55);
}
/* Keep the gradient "Rocket" crisp — a white halo behind its transparent
   letters washes the colours out and looks faded. */
.brand .bw-grad { text-shadow: none; }
.brand-mark {
  box-shadow: 0 0 0 1px rgba(255,255,255,.4), 0 0 18px rgba(255,255,255,.5), 0 4px 16px -2px rgba(160,32,240,.35);
}

/* anarecnirp */


/* =====================================================================
   v2187 — .app-shot : the editor screenshot shown in the homepage hero,
   reused in every footer CTA so the two never drift apart.

   Single source of truth: BOTH the hero and every CTA point at
   assets/ss_photoeditrocket4.jpg. Swap that one file and the whole site
   updates — hero and all 31 footer CTAs together.

   This mirrors the hero's browser chrome (traffic lights + URL bar +
   "Open full editor" pill) so the CTA reads as the same product shot
   rather than a bare screenshot.
   ===================================================================== */
.app-shot {
  display: block;
  position: relative;
  max-width: 880px;
  margin: 4px auto 26px;
  text-decoration: none;
  border-radius: 16px;
  padding: 8px;
  background: linear-gradient(180deg, var(--surface), var(--bg-soft));
  border: 1px solid var(--border);
  box-shadow: 0 44px 100px -34px rgba(0,0,0,.7), 0 14px 40px -18px rgba(37,99,235,.35);
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s;
}
.app-shot:hover,
.app-shot:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 54px 120px -34px rgba(0,0,0,.78), 0 16px 46px -18px rgba(37,99,235,.45);
  outline: none;
}
.app-shot-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
}
.app-shot-chrome .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-2); }
.app-shot-chrome .dot.r { background: #ff5f56; }
.app-shot-chrome .dot.y { background: #ffbd2e; }
.app-shot-chrome .dot.g { background: #27c93f; }
.app-shot-chrome .url {
  margin-left: 10px;
  font-size: 12px;
  color: var(--ink-mute);
  font-family: ui-monospace, SF Mono, Menlo, monospace;
}
.app-shot-chrome .open {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--teal);
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(16,185,129,.10);
  border: 1px solid rgba(16,185,129,.25);
  white-space: nowrap;
}
.app-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2895 / 1759;
  object-fit: cover;
  object-position: top center;
  border-radius: 10px;
  pointer-events: none;
}
@media (max-width: 640px) {
  .app-shot-chrome .url { display: none; }
  .app-shot { padding: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .app-shot, .app-shot:hover { transform: none; transition: none; }
}


/* v2193 — Consumer disclosure shown BEFORE the buy click.
   Buy buttons now go straight to Stripe (1 click), skipping buy.html — which
   was where the one-time-payment / VAT / 14-day-withdrawal / refund info lived.
   EU pre-contractual info (Consumer Rights Directive Art. 6) must reach the
   consumer before they are bound, so it now sits next to the CTA itself and in
   the footer of every page that has a buy button. */
.buy-terms {
  margin: 12px auto 0;
  max-width: 640px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-mute);
  text-align: center;
}
.buy-terms a { color: var(--ink-mute); text-decoration: underline; }
.buy-terms a:hover { color: var(--ink); }
.foot-bottom .buy-terms { max-width: 780px; margin-top: 10px; text-align: left; opacity: .8; }


/* v2200 — .buy-terms inside a CTA strip.
   `.cta-strip p` (specificity 0,1,1) was beating `.buy-terms` (0,1,0), so its
   `margin: 0 0 28px` overrode `margin: 12px auto 0` — the auto side-margins were
   lost and the 640px block sat hard against the left edge instead of centring.
   Its `font-size: 18px` was winning too. Match the specificity to fix both. */
.cta-strip .buy-terms,
.hero .buy-terms {
  margin: 14px auto 0;
  max-width: 640px;
  font-size: 12px;
  line-height: 1.55;
  text-align: center;
  color: var(--ink-mute);
}

/* ===== TEMP free-license announcement bar (remove this block + the .flbar <a> in each page's body to end the campaign) ===== */
body:has(.flbar) { padding-top: 40px; }
body:has(.flbar) .nav { top: 40px !important; }
body:has(.flbar) #scrollBar { top: 40px !important; }
.flbar { position: fixed; top: 0; left: 0; right: 0; z-index: 400; height: 40px; display: flex; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(90deg, #0f766e, #10B981); color: #fff; font: 800 13.5px/1 system-ui; text-decoration: none; padding: 0 14px; box-sizing: border-box; }
.flbar:hover { filter: brightness(1.06); }
.flbar .flbar-badge { background: rgba(255,255,255,.22); border-radius: 999px; padding: 3px 8px; font-size: 11px; font-weight: 800; letter-spacing: .03em; }
.flbar .arw { font-weight: 900; }
@media (max-width: 620px) { body:has(.flbar) { padding-top: 54px; } body:has(.flbar) .nav { top: 54px !important; } body:has(.flbar) #scrollBar { top: 54px !important; } .flbar { height: 54px; font-size: 12px; line-height: 1.3; padding: 0 12px; text-align: center; } .flbar .flbar-badge { display: none; } }