/*
Theme Name: MergeHDR
Theme URI: https://mergehdr.app/
Author: Sandro Gumz
Description: MergeHDR marketing + guides theme — sunset bracket-stack hero, light/dark.
Version: 1.0.13
Requires at least: 6.4
Requires PHP: 8.1
License: Proprietary
Text Domain: mergehdr
*/

:root {
  --bg:#ffffff; --bg-soft:#faf6f0; --surface:#ffffff;
  --border:rgba(43,26,61,.10); --border-strong:rgba(43,26,61,.18);
  --ink:#2b1a3d; --ink-2:#4a3a55; --muted:#7a6a78;
  --accent:#c94f2e; --accent-ink:#ffffff; --accent-soft:rgba(201,79,46,.08);
  /* exposure ramp (shadow -> highlight); replaces the old rainbow tokens */
  --ev-1:#101625; --ev-2:#243a5e; --ev-3:#5077a8; --ev-4:#c94f2e; --ev-5:#ffb35c; --ev-6:#fff1d6;
  --radius-s:10px; --radius:16px; --radius-l:22px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --maxw:1120px;
  /* Prism/beam accents recolored from the old violet accent to the new sunset
     accent (#c94f2e) — same structure/opacities, sunset hue instead of violet. */
  --prism-line: rgba(201,79,46,.62); --prism-line-2: rgba(201,79,46,.34);
  --prism-line-3: rgba(201,79,46,.18); --prism-fill: rgba(255,179,92,.06);
  --entry-ray: rgba(201,79,46,.5);
  /* App bg.canvasGradient (Theme/CosmicGradient) — warm cream radial light. */
  --canvas-1:#fffdf6; --canvas-2:#f4ede2; --canvas-3:#e9ddcb;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0b0f1a; --bg-soft:#101625; --surface:#141a2a;
    --border:rgba(255,241,214,.10); --border-strong:rgba(255,241,214,.18);
    --ink:#f3ede6; --ink-2:#d9cfc4; --muted:#9a8f9b;
    --accent:#ff8a3d; --accent-ink:#2b1a3d; --accent-soft:rgba(255,138,61,.14);
    --prism-line: rgba(255,138,61,.85); --prism-line-2: rgba(255,138,61,.45);
    --prism-line-3: rgba(255,138,61,.25); --prism-fill: rgba(255,179,92,.05);
    --entry-ray: rgba(255,241,214,.7);
    /* App bgCanvas dark — neutral dark navy/black, faint radial lift. */
    --canvas-1:#17161d; --canvas-2:#0b0a12; --canvas-3:#050409;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font: 17px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  color: var(--ink);
  background: var(--bg);
}
@media (min-width: 768px) { body { font-size: 18px; } }

.container { max-width: var(--maxw); padding-inline: 24px; margin-inline: auto; }

h1 { font-size: clamp(40px, 6vw, 64px); font-weight: 700; letter-spacing: -.02em; line-height: 1.04; margin: 0 0 22px; }
h2 { font-size: clamp(26px, 3.4vw, 32px); font-weight: 700; letter-spacing: -.01em; line-height: 1.15; margin: 0; }
.dim { color: var(--muted); }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

section { padding-block: 48px; }
@media (min-width: 768px) { section { padding-block: 72px; } }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip { position: absolute; left: -9999px; z-index: 20; background: var(--bg); color: var(--accent); padding: 10px 16px; }
.skip:focus { left: 16px; top: 12px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--bg) 75%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  /* Border is transparent at the top of the page (no layout shift) and fades in
     once scrolled — toggled by the .is-scrolled class from site.js. */
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
}
/* Once scrolled, the header goes fully opaque. The hero scene is scaled 1.9x
   with overflow:visible, so its animated frames extend up behind the header;
   through a 75%-transparent frosted bar they were visible drifting under the nav
   (z-index is not the culprit — the scene is z-1 against the header's z-10, it
   was simply showing through). At the top of the page nothing sits behind the
   bar, so it keeps the lighter translucent treatment there. */
.site-header.is-scrolled {
  border-bottom-color: var(--border);
  background: var(--bg);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 16px; }
.brand { display: inline-flex; align-items: center; gap: 8px; }
.logo-mark { display: block; flex-shrink: 0; }
.wordmark { font-size: 17px; letter-spacing: -.01em; white-space: nowrap; }
.wordmark strong { font-weight: 700; }
.site-nav { display: none; align-items: baseline; gap: 28px; }
@media (min-width: 640px) { .site-nav { display: flex; } }
.site-nav a { font-size: 15px; color: var(--ink-2); }
.header-right { display: flex; align-items: baseline; gap: 28px; }
.get-app { font-size: 15px; font-weight: 500; color: var(--accent); white-space: nowrap; }

/* ---------- Hero ---------- */
/* Immersive full-bleed scene: the logo's light path drawn across the whole
   hero — beam enters from the page edge, refracts through the prism, the
   spectrum fans out to the right. Text floats above it. GSAP animates the
   entrance + idle life; without JS (or with reduced motion) the markup is
   the finished still. */
.hero { position: relative; overflow: hidden; padding-block: 20px 48px; }
/* Top margin removed up to <1200px (mobile + iPad): the card sits flush under
   the header. padding-top matches the card's top bleed per breakpoint (-20 below
   900, -36 at/above) so it's flush, not tucked. Full top padding returns ≥1200. */
@media (min-width: 768px) { .hero { padding-bottom: 72px; } }
@media (min-width: 900px) { .hero { padding-top: 36px; } }
@media (min-width: 1200px) { .hero { padding-top: 72px; } }
.hero .container { position: relative; display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .hero .container { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: 40px; } }
/* App-style "bg light" card: a rounded warm canvas panel (CosmicGradient)
   aligned to the container and pushed a little past its edges with negative
   insets. It sits behind the copy + prism; the rainbow spills out beyond it
   onto the page, exactly like the app's prism card. */
.hero .container::before {
  content: ""; position: absolute; z-index: 0; inset: -20px -8px;
  border-radius: 0; /* mobile: square corners; desktop (≥900px) restores the radius */
  background: radial-gradient(130% 130% at 22% 8%, var(--canvas-1) 0%, var(--canvas-2) 52%, var(--canvas-3) 100%);
  border: 1px solid var(--border);
  box-shadow: 0 1px 50px rgba(15, 12, 40, .05);
}
@media (min-width: 900px) { .hero .container::before { inset: -36px -48px; border-radius: 28px; } }
.hero-scene, .hero-copy { position: relative; z-index: 1; }
.hero-scene { order: -1; aspect-ratio: 720/560; pointer-events: none; }
@media (min-width: 900px) { .hero-scene { order: 2; } }
.hero-scene svg { width: 100%; height: 100%; display: block; overflow: visible; }
/* Hero bracket-merge animation, enlarged ~2x on the desktop banner. Transform
   only (no layout reflow); the scene is decorative (aria-hidden) and already
   overflows visibly. .hero clips the horizontal axis so the enlarged scene can
   spill outward without ever creating a horizontal page scrollbar. The scale is
   scoped to >=900px; on mobile the scene is already full-width. */
.hero { overflow-x: clip; }
@media (min-width: 900px) { .hero-scene { transform: scale(1.9); transform-origin: center; } }
.hero-copy { max-width: 620px; }
.hero-copy p { font-size: 18px; line-height: 1.6; color: var(--ink-2); max-width: 540px; margin: 0; }
@media (min-width: 768px) { .hero-copy p { font-size: 19px; } }
.hero-ctas { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 14px; }
.hero-cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 26px; border-radius: 999px; font-size: 16px; font-weight: 600;
  text-decoration: none; white-space: nowrap;
}
.hero-cta-primary { background: var(--accent); color: var(--accent-ink); }
.hero-cta-primary:hover { filter: brightness(1.05); }
.hero-cta-secondary { background: transparent; color: var(--ink); border: 1.5px solid var(--border-strong); }
.hero-cta-secondary:hover { border-color: var(--accent); color: var(--accent); }
.hero-meta { margin: 16px 0 0; font-size: 14px; color: var(--muted); }
.cta { margin-top: 36px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.cta-meta { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--muted); }

/* App Store rating badge — pricing buy panel only (template-parts/
   appstore-rating-badge.php). The hero shows the rating inline in .cta-meta
   instead. Absent entirely when there is no rating yet, so no extra spacing
   rules are needed for a hidden state. */
.appstore-badge {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 14px 0 0; font-size: 14px; color: var(--ink-2);
}
.appstore-badge-star { color: var(--ev-5); font-size: 15px; line-height: 1; }
.appstore-badge-text { font-weight: 500; }

/* Hero scene — the bracket-merge animation, all CSS.
   Three exposure frames (drop shadow via #frameShadow) settle behind a central
   merged frame carrying the full ramp. The markup is the finished, converged
   still; everything below is a settle-in layer over it, so no-JS and
   reduced-motion visitors see the completed scene rather than an empty box.

   Only two properties are animated — opacity and translate/scale — because both
   are composited, so the whole scene stays off the main thread. That matters
   here: the scene is scaled 1.9x on desktop, and repainting an area that size
   every frame is what makes a hero feel expensive.

   The one infinite animation is the glow's breathe. site.js adds .out-of-view
   when the scene leaves the viewport and this pauses it there; the default is
   running, so no-JS still animates. */
.hero-scene { --hero-play: running; }
.hero-scene.out-of-view { --hero-play: paused; }

/* The flash was a GSAP-era reveal on top of the merged frame. The frames now
   fade in rather than being punched in, so it stays hidden. */
.hero-scene .merge-flash { opacity: 0; }

/* The exposures drop in from above and settle onto the shared pivot, staggered
   so they arrive one after another. Offsets use the `translate` property, which
   composes *before* each frame's own transform="translate(360 280) rotate(...)"
   attribute, so the base placement and fan rotation in the markup are untouched
   — and it leaves the frame's `transform` free, which is what lets the hover
   scatter live on a separate wrapper without the two fighting. */
.hero-scene .frame-under  { animation: heroFrameIn .85s cubic-bezier(.22,.61,.36,1) .05s both; --from-x: -86px; --from-y: -168px; }
.hero-scene .frame-normal { animation: heroFrameIn .85s cubic-bezier(.22,.61,.36,1) .17s both; --from-x: 18px;  --from-y: -196px; }
.hero-scene .frame-over   { animation: heroFrameIn .85s cubic-bezier(.22,.61,.36,1) .29s both; --from-x: 88px;  --from-y: -150px; }
@keyframes heroFrameIn {
  from { opacity: 0; translate: var(--from-x) var(--from-y); }
  to   { opacity: 1; translate: 0 0; }
}

/* The merged result arrives last, with a scale so slight it reads as settling
   rather than popping. fill-box puts the origin at the frame's own centre —
   the rect is drawn around 0,0 — instead of the middle of the viewBox. */
.hero-scene .frame-merged {
  transform-box: fill-box; transform-origin: center;
  animation: heroMergedIn .6s cubic-bezier(.22,.61,.36,1) .72s both;
}
@keyframes heroMergedIn {
  from { opacity: 0; scale: .985; }
  to   { opacity: 1; scale: 1; }
}

/* Sparks fade up and stay put. They used to drift on a pair of infinite tweens
   each, which is most of what the old scene cost; holding still costs nothing
   and reads calmer. */
.hero-scene .spark { fill: var(--ev-6); opacity: 0; }
.hero-scene .spark { animation: heroSparkIn .7s ease-out 1.05s both; }
@keyframes heroSparkIn {
  from { opacity: 0; }
  to   { opacity: .55; }
}

/* The only thing still moving once the scene has settled. */
.hero-scene .merge-glow { animation: heroGlow 7s ease-in-out 1.2s infinite; }
@keyframes heroGlow {
  0%, 100% { opacity: .55; }
  50% { opacity: .78; }
}

/* Must sit after every `animation:` shorthand above — the shorthand resets
   animation-play-state to running, so declaring the pause earlier silently does
   nothing. This is what actually stops the glow when the hero is off screen. */
.hero-scene .bracket-frame,
.hero-scene .spark,
.hero-scene .merge-glow { animation-play-state: var(--hero-play); }

/* Hover scatter. Each frame sits inside a transform-free .frame-shift wrapper so
   the scatter never touches the frame's own translate — the entrance animation
   owns that, and animating both on one element makes them fight (the original
   GSAP version wrapped the frames at runtime for the same reason).

   Randomness has to come from JS, but only once per hover: site.js writes four
   custom properties per frame on pointerenter and the transition below does the
   moving, so nothing is recomputed per frame. On pointerleave the class drops and
   the same transition carries them home.

   fill-box puts the origin at the wrapper's own bbox centre — the frames' shared
   pivot — so rotate and scale turn about the stack rather than the viewBox. */
.hero-scene .frame-shift {
  transform-box: fill-box; transform-origin: center;
  translate: 0 0; rotate: 0deg; scale: 1;
  transition: translate .5s cubic-bezier(.22,.61,.36,1),
              rotate .5s cubic-bezier(.22,.61,.36,1),
              scale .5s cubic-bezier(.22,.61,.36,1);
}
.hero-scene.is-scattered .frame-shift {
  translate: var(--sx, 0px) var(--sy, 0px);
  rotate: var(--sr, 0deg);
  scale: var(--ss, 1);
}

/* The scene is click-through so the frames can overlap the copy without eating
   the CTAs; this fixed rect opts back in as the hover target. It never moves, so
   a scattering frame can't slip out from under the cursor and cause enter/leave
   jitter. */
.hero-scene .hero-hit { pointer-events: all; }

/* Reduced motion: no settle, no breathe — just the finished scene. */
@media (prefers-reduced-motion: reduce) {
  .hero-scene .bracket-frame,
  .hero-scene .merge-glow { animation: none; opacity: 1; }
  .hero-scene .spark { animation: none; opacity: .55; }
  .hero-scene .merge-glow { opacity: .65; }
  .hero-scene .frame-shift { transition: none; }
  .hero-scene.is-scattered .frame-shift { translate: 0 0; rotate: 0deg; scale: 1; }
}

/* ---------- Proof ---------- */
.proof { font-size: clamp(26px, 3.4vw, 32px); font-weight: 700; letter-spacing: -.01em; line-height: 1.15; margin: 0; max-width: 720px; }
.proof-mono { font-family: var(--mono); font-size: 14px; color: var(--muted); margin: 12px 0 0; }
.spectrum-rule {
  width: 120px; height: 2px; border-radius: 999px; margin-top: 20px;
  background: linear-gradient(90deg, var(--ev-1), var(--ev-2), var(--ev-3), var(--ev-4), var(--ev-5), var(--ev-6));
}

/* ---------- How it works ---------- */
.platform-tabs { display: flex; gap: 28px; margin-top: 28px; border-bottom: 1px solid var(--border); }
.platform-tabs button {
  appearance: none; background: none; border: 0; font: inherit;
  font-size: 15px; font-weight: 600; color: var(--muted);
  padding: 0 2px 12px; cursor: pointer; position: relative;
}
.platform-tabs button[aria-selected="true"] { color: var(--ink); }
.platform-tabs button[aria-selected="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--accent); border-radius: 2px;
}
.platform-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.steps { display: grid; gap: 44px; margin-top: 44px; }
.steps[hidden] { display: none; }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
.step { display: flex; flex-direction: column; }
.step-num { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.step h3 { font-size: 19px; font-weight: 700; margin: 10px 0 6px; }
.step p { font-size: 16px; line-height: 1.55; color: var(--ink-2); margin: 0 0 22px; max-width: 320px; }
.step img {
  /* Fill the grid column like the /convert/<format>/ step figures — the
     width/height attrs keep the aspect ratio (CLS-safe), height:auto lets
     landscape Mac shots take their natural proportion. */
  display: block; width: 100%; height: auto;
  align-self: flex-start; margin-top: auto;
  border-radius: var(--radius); border: 1px solid var(--border-strong);
}
.how-more { margin: 52px 0 0; text-align: center; }
.how-more a {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 28px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink);
  font-size: 16px; font-weight: 600; text-decoration: none;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.how-more a:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgb(124 92 255 / .35); }

/* ---------- Scroll reveal (micro animations) ---------- */
/* .reveal is added by site.js only (post reduced-motion check), so these
   rules never hide content for no-JS or motion-sensitive visitors. */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease-out, transform .7s ease-out; }
.reveal.in-view { opacity: 1; transform: none; }

/* ---------- Originals, protected ---------- */
.protected p.intro { font-size: 18px; line-height: 1.6; color: var(--ink-2); margin: 18px 0 0; }
.guarantees { list-style: none; margin: 32px 0 0; padding: 0; }
.guarantees li { padding-block: 15px; border-top: 1px solid var(--border); color: var(--ink); }
.guarantees li:last-child { border-bottom: 1px solid var(--border); }
.protected h3 { font-size: 20px; font-weight: 700; margin: 56px 0 14px; }
.formats { font-family: var(--mono); font-size: 13.5px; line-height: 2; color: var(--ink-2); margin: 0; }
.formats-more { margin: 16px 0 0; }
.formats-more a { font-size: 14px; font-weight: 500; color: var(--accent); }
.req { font-size: 15px; color: var(--muted); margin: 14px 0 0; }

/* ---------- App Store reviews (template-parts/section-reviews.php) ---------- */
/* Section is entirely absent from the DOM when there are no >=4-star reviews
   on record — no empty-state rules needed. */
.appstore-reviews-grid { display: grid; gap: 24px; margin-top: 28px; }
@media (min-width: 800px) { .appstore-reviews-grid { grid-template-columns: repeat(3, 1fr); } }
.appstore-review {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px 24px; background: var(--surface);
}
.appstore-review-stars { display: block; margin: 0 0 12px; color: var(--ev-5); font-size: 15px; letter-spacing: 2px; }
.appstore-review-title { font-size: 16px; font-weight: 700; color: var(--ink); margin: 0 0 8px; }
.appstore-review-body { font-size: 15px; line-height: 1.6; color: var(--ink-2); margin: 0 0 16px; }
.appstore-review-attr {
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin: 0;
}

/* ---------- Try / Buy ---------- */
.panels { display: grid; gap: 24px; }
@media (min-width: 800px) { .panels { grid-template-columns: 1fr 1fr; } }
.panel { border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; display: flex; flex-direction: column; align-items: flex-start; }
.panel h3 { font-size: 20px; font-weight: 700; margin: 0 0 10px; }
.panel p { font-size: 16px; line-height: 1.6; color: var(--ink-2); margin: 0 0 26px; max-width: 400px; }
.panel .clip-code { display: block; border-radius: 50%; box-shadow: 0 0 0 1px var(--border-strong); }
/* The code links to the /clip page; desktop-only (mobile uses .clip-try). */
.clip-code-link { display: none; margin-top: auto; transition: transform 200ms ease; }
.clip-code-link:hover { transform: translateY(-2px); }
.clip-copy-desktop { display: none; }
.clip-try {
  margin-top: auto; display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 24px; border-radius: 999px; background: var(--accent); color: var(--accent-ink);
  font-size: 16px; font-weight: 600; text-decoration: none;
}
.clip-try:hover { filter: brightness(1.05); }
@media (min-width: 768px) {
  .clip-copy-mobile { display: none; }
  .clip-copy-desktop { display: block; }
  .clip-try { display: none; }
  .clip-code-link { display: block; }
}

/* The buy panel keeps the production site's color moment: spectrum hairline,
   violet corner glow, gradient price — the one deliberately colorful card. */
/* The color moment, without a flat tinted fill: spectrum hairline across the
   top, a soft violet light spilling from the corner, gradient price — on the
   plain page background like every other panel. */
.panel.buy {
  position: relative; overflow: hidden;
}
.panel.buy::before {
  content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ev-1), var(--ev-2), var(--ev-3), var(--ev-4), var(--ev-5), var(--ev-6), transparent);
  opacity: .8;
}
.panel.buy::after {
  content: ""; position: absolute; top: -140px; right: -140px; width: 360px; height: 360px;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--ev-5) 22%, transparent), transparent);
  pointer-events: none;
}
.panel .price-line {
  font-size: 52px; font-weight: 720; letter-spacing: -.035em; line-height: 1;
  margin: 0 0 22px;
  background: linear-gradient(135deg, var(--ink), color-mix(in oklab, var(--accent) 55%, var(--ink)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.price-once { font-size: 18px; font-weight: 500; letter-spacing: 0; color: var(--muted); -webkit-text-fill-color: var(--muted); }
.facts { list-style: none; padding: 0; margin: 0 0 28px; color: var(--ink-2); font-size: 16px; }
.facts li { padding-block: 5px; }
.panel .badge-link { margin-top: auto; }

/* ---------- FAQ ---------- */
.faq-list { margin-top: 28px; }
.faq-list details { border-top: 1px solid var(--border); }
.faq-list details:last-of-type { border-bottom: 1px solid var(--border); }
.faq-list summary {
  cursor: pointer; padding-block: 18px;
  font-size: 17px; font-weight: 500;
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+"; flex: none;
  font-size: 22px; font-weight: 300; line-height: 1; color: var(--muted);
  transition: transform .2s ease;
}
.faq-list details[open] summary::after { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .faq-list summary::after { transition: none; } }
.faq-list details p { margin: 0 0 22px; font-size: 16px; line-height: 1.6; color: var(--ink-2); max-width: 880px; }

/* ---------- Blog ---------- */
.posts { list-style: none; margin: 28px 0 0; padding: 0; }
.posts li {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 24px;
  padding-block: 17px; border-top: 1px solid var(--border);
}
.posts li:last-child { border-bottom: 1px solid var(--border); }
.posts a { font-size: 18px; font-weight: 500; }
.post-meta { font-family: var(--mono); font-size: 13px; color: var(--muted); white-space: nowrap; }
.all-articles { display: inline-block; margin-top: 26px; font-size: 16px; font-weight: 500; color: var(--accent); }

/* ---------- Footer ---------- */
.site-footer { position: relative; margin-top: 24px; }
/* Spectrum hairline across the top of the footer — fades out at the edges,
   echoing the hero prism and the .feature-media::after motif. */
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ev-1), var(--ev-2), var(--ev-3), var(--ev-4), var(--ev-5), var(--ev-6), transparent);
  opacity: .8;
}
.site-footer .container { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px; padding-block: 36px; }
.footer-links { display: flex; gap: 24px; font-size: 14px; color: var(--ink-2); }
.legal { width: 100%; font-size: 13px; color: var(--muted); margin-top: 6px; }

/* ---------- Blog + prose (not in the prototype home) ---------- */

/* Post card — blog listing card matching the page's hairline/card language */
.post-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  transition: transform 220ms ease, border-color 220ms ease;
}
.post-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
}
.post-card-media {
  display: block;
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
  margin-bottom: 0;
}
.post-card-media img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
/* Branded fallback when a post has no featured image: cosmic gradient + the
   prism light motif. A real featured image overrides it. Used by blog cards
   (.post-card-media) and the single-post hero (.post-hero). */
.post-card-media.is-placeholder,
.post-hero.is-placeholder {
  background: linear-gradient(135deg, #2a1260, #0b0a30 58%, #05040f);
}
.post-card-media.is-placeholder { aspect-ratio: 16 / 9; }
.prism-banner {
  width: 100%;
  height: 100%;
  display: block;
}

/* Single-post hero image */
.post-hero {
  margin: 4px 0 2em;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
}
.post-hero img { width: 100%; height: auto; display: block; }
.post-hero.is-placeholder { aspect-ratio: 16 / 9; }
.post-card-body {
  padding: 20px 22px 24px;
}
.post-card-body .post-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  letter-spacing: -.01em;
  display: block;
  margin-bottom: 8px;
}
.post-card-body .post-title:hover {
  color: var(--accent);
  text-decoration: none;
}
.post-card-body .post-excerpt {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 8px 0 0;
}

/* Post meta — category chip + date + reading time */
.post-meta {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  white-space: nowrap;
}
.post-meta .post-category-chip {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid color-mix(in oklab, var(--accent) 20%, transparent);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-family: var(--mono);
}
.post-meta .post-meta-sep {
  color: var(--border-strong);
}

/* Blog grid layout */
.post-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  margin-top: 36px;
}
@media (min-width: 640px) {
  .post-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .post-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Tighten the gap above "More articles": drop the related section's top padding
   so the post CTA's own section padding is the only space before it. */
.related-section { padding-block-start: 0; }

/* Blog index page heading */
.blog-heading {
  font-size: clamp(28px, 3.4vw, 36px);
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0 0 8px;
}

/* Prose — single-post body */
.prose {
  max-width: 720px;
  color: var(--ink-2);
  line-height: 1.7;
  font-size: 17px;
}
@media (min-width: 768px) {
  .prose { font-size: 18px; }
}
/* Legal pages (page.php): center the body like the Support page's centered body,
   while the .page-intro header stays left-aligned at the container edge. */
.page-prose { max-width: 760px; margin-inline: auto; }
.prose h2 {
  font-size: clamp(21px, 2.4vw, 26px);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.015em;
  line-height: 1.2;
  margin: 1.8em 0 .5em;
}
.prose h3 {
  font-size: clamp(18px, 1.8vw, 21px);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
  line-height: 1.3;
  margin: 1.5em 0 .4em;
}
.prose p {
  margin: 0 0 1.1em;
  color: var(--ink-2);
}
.prose ul, .prose ol {
  margin: 0 0 1.1em 1.4em;
  padding: 0;
}
.prose li {
  margin: .35em 0;
  color: var(--ink-2);
}
.prose blockquote {
  margin: 1.4em 0;
  padding: .6em 0 .6em 20px;
  border-left: 3px solid var(--accent);
  color: var(--muted);
  font-style: italic;
}
.prose blockquote p { margin: 0; }
.prose code {
  font-family: var(--mono);
  font-size: .9em;
  background: var(--accent-soft);
  color: var(--accent);
  padding: .1em .38em;
  border-radius: 5px;
  border: 1px solid color-mix(in oklab, var(--accent) 15%, transparent);
}
.prose pre {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  padding: 18px 20px;
  overflow-x: auto;
  margin: 0 0 1.1em;
}
.prose pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: .88em;
  color: var(--ink-2);
}
.prose img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin: 1.4em 0;
}
.prose a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.prose a:hover {
  text-decoration-thickness: 2px;
}
.prose hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2em 0;
}

/* Pagination / nav-links (the_posts_pagination output) */
.pagination,
.nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 48px;
  font-family: var(--mono);
  font-size: 14px;
}
.pagination .page-numbers,
.nav-links .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  color: var(--ink-2);
  transition: border-color 160ms ease, color 160ms ease;
}
.pagination .page-numbers:hover,
.nav-links .page-numbers:hover {
  border-color: var(--accent);
  color: var(--accent);
  text-decoration: none;
}
.pagination .page-numbers.current,
.nav-links .page-numbers.current {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.pagination .page-numbers.dots,
.nav-links .page-numbers.dots {
  border-color: transparent;
  color: var(--muted);
}

/* Copy-link button on single posts */
/* Share row on single posts — plain share-intent links + clipboard copy */
.share-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.share-row-label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 4px;
}
.share-btn {
  position: relative;
  appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--ink-2);
  background: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: border-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.share-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
  text-decoration: none;
}
.share-btn.copied {
  border-color: var(--accent);
  color: var(--accent);
}
.share-btn.copied::after {
  content: "Copied!";
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--bg);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .02em;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
}

/* Post navigation (prev/next on single posts) */
.post-navigation {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
  font-size: 15px;
}
.post-navigation a {
  color: var(--accent);
}
.post-navigation a:hover {
  text-decoration: underline;
}

/* About page — the story behind the app */
/* Everything — photos, CTA, and the essay text — spans the full home width.
   .prose is the narrow single-post body measure (720px); on these full-width
   pages we lift that cap so the body text fills the wrap too (blog stays narrow). */
.about-wrap { max-width: var(--maxw); margin-inline: auto; }
.about .prose, .convert .prose { max-width: none; }
.about-eyebrow {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid color-mix(in oklab, var(--accent) 20%, transparent);
  border-radius: 999px;
  padding: 2px 9px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.about h1 {
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0 0 22px;
}
.about-lead {
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0 0 8px;
}
.about-figure {
  margin-block: 30px;
  /* Break out past the page max-width like the hero panel (.hero .container::before,
     which insets -48px → +48px each side of the 1120 container). Capped to the
     viewport (minus a 24px gutter each side) so it never causes horizontal scroll;
     on phones the cap wins, so the figure simply fills the column. */
  --about-bleed: min(calc(var(--maxw) + 96px), calc(100vw - 48px));
  width: var(--about-bleed);
  margin-inline: calc((100% - var(--about-bleed)) / 2);
}
.about-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-l);
  border: 1px solid var(--border);
  margin: 0;
}
.about-figure--wide { margin-top: 34px; }
.about-figure figcaption {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
}
.about-photo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  aspect-ratio: 16 / 10;
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-l);
  background: var(--bg-soft);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .04em;
  text-align: center;
  padding: 24px;
}
.about-photo-placeholder code { font-size: 12px; color: var(--ink-2); }
.about-cta {
  margin-top: 46px;
  padding: 34px 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  background: var(--bg-soft);
  text-align: center;
}
.about-cta h2 { margin: 0 0 10px; font-size: clamp(20px, 2.4vw, 26px); color: var(--ink); }
.about-cta p { color: var(--ink-2); margin: 0 0 20px; }
.about-cta-try { font-size: 15px; color: var(--muted); margin: 22px 0 6px !important; }
.about-cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.about-try { display: inline-block; font-size: 16px; font-weight: 500; color: var(--accent); }
.about-badge { display: inline-flex; line-height: 0; }
.about-badge img { display: block; height: 48px; width: auto; }
.about-cta-meta {
  margin: 18px 0 0 !important;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--muted);
}
.about-sign {
  margin-top: 30px;
  font-style: italic;
  color: var(--muted);
}

/* ---------- Features page ---------- */
/* A spectrum-tinted card grid: each card carries one exposure-ramp color
   (--card-tint, set on .feature-card), cycling shadow→highlight across the
   grid so the page reads as a dispersed dynamic range. The media panel floats
   a device screenshot (object-fit:
   contain) on a cosmic gradient when present, else an inline glyph. */
.features-intro { max-width: 720px; }
/* Shared interior-page header cap (Privacy, Terms, About): same 720 measure as
   .features-intro so their title blocks match the Support/Features header. */
.page-intro { max-width: 720px; }
.page-intro h1 { margin-top: 0; }
.page-intro { margin-bottom: 28px; }
.features-eyebrow {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid color-mix(in oklab, var(--accent) 20%, transparent);
  border-radius: 999px;
  padding: 2px 9px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.features-lead {
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
  max-width: 640px;
}

.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 44px;
}
@media (min-width: 640px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } }

.feature-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.feature-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: 0 10px 34px rgba(15, 12, 40, .07);
}
@media (prefers-reduced-motion: reduce) {
  .feature-card { transition: none; }
  .feature-card:hover { transform: none; }
}

.feature-media {
  position: relative;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  background:
    radial-gradient(120% 110% at 78% 4%, color-mix(in oklab, var(--card-tint) 26%, transparent), transparent 58%),
    radial-gradient(120% 120% at 18% 102%, color-mix(in oklab, var(--card-tint) 13%, transparent), transparent 60%),
    radial-gradient(135% 135% at 22% 8%, var(--canvas-1), var(--canvas-2) 52%, var(--canvas-3));
}
/* Spectrum hairline across the top of every media panel. */
.feature-media::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--card-tint) 85%, transparent), transparent);
}
/* Screenshots fill the panel edge-to-edge and crop (object-fit: cover); the
   per-card object-position (set inline) picks which part stays in frame. */
.feature-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* App-icon-style tile: the glyph floats on the gradient panel with the same
   shadow language as the screenshot cards, so glyph + screenshot cards read as
   one family. */
.feature-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 22px;
  color: color-mix(in oklab, var(--card-tint) 72%, var(--ink));
  background: linear-gradient(160deg, color-mix(in oklab, var(--card-tint) 20%, var(--surface)), color-mix(in oklab, var(--card-tint) 7%, var(--surface)));
  border: 1px solid color-mix(in oklab, var(--card-tint) 28%, transparent);
  box-shadow: 0 12px 30px rgba(15, 12, 40, .13);
}
.feature-glyph svg { width: 52px; height: 52px; display: block; }

.feature-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  padding: 18px 20px 22px;
  flex: 1;
}
.feature-tag {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--card-tint) 52%, var(--ink));
  background: color-mix(in oklab, var(--card-tint) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--card-tint) 24%, transparent);
  border-radius: 999px;
  padding: 2px 9px;
}
/* On the Features page each card is a sibling section under the page H1, so
   card titles are H2. On the homepage the cards sit inside one H2 section, so
   section-features.php uses H3 for cards instead — same visual treatment,
   correct heading outline either way. */
.feature-card h2, .feature-card h3 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.25;
  color: var(--ink);
  margin: 2px 0 0;
}
/* Inline outbound link in body copy — used sitewide for RAWtoHEIC mentions
   (mergehdr_rawtoheic_link()). Underlined at rest, and the rule drops away on
   hover rather than thickening. */
.inline-link {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.inline-link:hover { text-decoration: none; }

.feature-card p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}

.features-cta { margin-top: 52px; }

/* ---------- Problem/solution (homepage) ---------- */
.problem p {
  margin-top: 18px;
  max-width: 760px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-2);
}

/* ---------- Before/after compare slider (homepage) ---------- */
/* Default state: a plain two-column side-by-side grid — the no-JS and
   reduced-motion fallback required by the brief. site.js adds .js-active only
   after checking prefers-reduced-motion, so this is what those visitors see. */
.compare-lead { margin: 14px 0 0; color: var(--ink-2); font-size: 17px; }
.compare-slider {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin-top: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  overflow: hidden;
  background: var(--border);
  aspect-ratio: 16 / 9;
}
.compare-frame { position: relative; overflow: hidden; }
.compare-frame svg { display: block; width: 100%; height: 100%; }
.compare-label {
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  font-family: var(--mono); font-size: 12px; letter-spacing: .04em;
  color: #fff; background: rgba(10, 8, 20, .55);
  padding: 5px 11px; border-radius: 999px;
}
.compare-handle { display: none; }

/* JS-enhanced overlay mode: both frames stack full-bleed, the "after" frame is
   clipped to the reveal position, and a draggable handle sits on the seam. */
.compare-slider.js-active { display: block; touch-action: pan-y; }
.compare-slider.js-active .compare-frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.compare-slider.js-active .compare-after { clip-path: inset(0 0 0 50%); }
.compare-slider.js-active .compare-handle {
  display: flex; align-items: center; justify-content: center;
  position: absolute; top: 0; bottom: 0; left: 50%; z-index: 3;
  width: 44px; margin-left: -22px; cursor: ew-resize;
}
.compare-slider.js-active .compare-handle::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
  width: 2px; margin-left: -1px; background: #fff; opacity: .85;
}
.compare-handle-grip {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: #fff; color: var(--ink);
  box-shadow: 0 6px 20px rgba(15, 12, 40, .28);
}
.compare-handle-grip::before { content: "◂ ▸"; font-size: 13px; letter-spacing: 2px; }
.compare-slider.js-active .compare-handle:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
/* Belt-and-braces: even if .js-active were ever applied, reduced-motion
   visitors still get the plain side-by-side grid, not the drag overlay. */
@media (prefers-reduced-motion: reduce) {
  .compare-slider.js-active { display: grid; }
  .compare-slider.js-active .compare-frame { position: static; inset: auto; width: auto; height: auto; }
  .compare-slider.js-active .compare-after { clip-path: none; }
  .compare-slider.js-active .compare-handle { display: none; }
}

/* ---------- Privacy band (homepage) ---------- */
.privacy p {
  margin-top: 18px;
  max-width: 760px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-2);
}

/* ---------- Footer CTA repeat (homepage) ---------- */
.cta-repeat { text-align: center; }
.cta-repeat h2 { margin: 0 auto; max-width: 640px; }
.cta-repeat p { margin: 16px auto 0; max-width: 520px; font-size: 18px; line-height: 1.6; color: var(--ink-2); }
.cta-repeat .hero-ctas { margin-top: 32px; justify-content: center; }

/* ---------- Convert / format landing pages ---------- */
/* Stealth links in the formats list: identical to the surrounding mono text at
   rest (inherits color, no underline), underline appears on hover. */
.format-link { color: inherit; text-decoration: none; }
.format-link:hover { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* The whole page — including the intro/prose text — spans the full home width. */
.convert-wrap { max-width: var(--maxw); margin-inline: auto; }
.convert-eyebrow {
  display: inline-block;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid color-mix(in oklab, var(--accent) 20%, transparent);
  border-radius: 999px; padding: 2px 9px;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; margin: 0 0 14px;
}
.convert-lead { font-size: clamp(18px, 2.2vw, 21px); line-height: 1.5; color: var(--ink-2); margin: 0 0 28px; }
.convert-cta-top { margin: 0 0 8px; }
.convert-hub-formats { font-size: 15px; line-height: 2.1; margin: 28px 0 0; }

/* Case-study size strip */
.convert-stat {
  margin: 34px 0; padding: 26px 28px;
  border: 1px solid var(--border); border-radius: var(--radius-l);
  background: radial-gradient(135% 135% at 22% 8%, var(--canvas-1), var(--canvas-2) 60%, var(--canvas-3));
}
.convert-stat-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 16px; }
.convert-stat-from {
  font-size: clamp(26px, 5vw, 38px); font-weight: 700; letter-spacing: -.02em;
  color: var(--muted); text-decoration: line-through; text-decoration-thickness: 2px;
}
.convert-stat-arrow { font-size: 22px; color: var(--muted); }
.convert-stat-to {
  font-size: clamp(26px, 5vw, 38px); font-weight: 720; letter-spacing: -.02em;
  background: linear-gradient(135deg, var(--ink), color-mix(in oklab, var(--accent) 55%, var(--ink)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.convert-stat-pct { font-family: var(--mono); font-size: 13px; letter-spacing: .04em; color: var(--accent); align-self: center; }
.convert-stat figcaption { margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.convert-stat .spectrum-rule { margin-top: 18px; }

.convert-h2 { font-size: clamp(22px, 2.6vw, 28px); font-weight: 700; letter-spacing: -.01em; color: var(--ink); margin: 48px 0 10px; }
.convert-sub { font-size: 16px; line-height: 1.6; color: var(--ink-2); margin: 0 0 22px; }

.convert-steps { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
.convert-steps figure { margin: 0; }
.convert-steps img { display: block; width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--border-strong); }
.convert-steps figcaption { margin-top: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: .03em; color: var(--muted); text-align: center; }
@media (max-width: 560px) { .convert-steps { grid-template-columns: 1fr; max-width: 300px; margin-inline: auto; } }

.convert-cameras { display: flex; flex-wrap: wrap; gap: 8px; }
.camera-chip {
  font-size: 13px; color: var(--ink-2);
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 999px; padding: 5px 12px;
}
.convert-related { margin-top: 40px; font-family: var(--mono); font-size: 13px; color: var(--muted); }
.convert-cta { margin-top: 48px; }

/* Support page (/support/) */
.support { padding: 72px 0 96px; }
.support .features-intro { margin-bottom: 40px; }
.support-faq { max-width: 760px; margin: 72px auto 56px; }
.support-faq h2,
.support-contact h2 { font-size: 22px; margin: 0 0 18px; }
.support-contact { max-width: 760px; margin: 0 auto; }
.support-checklist { margin: 8px 0 18px; padding-left: 1.2em; color: var(--ink-2); line-height: 1.7; }
.support-checklist li { margin: 4px 0; }
.support-bigfiles { color: var(--ink-2); }
.support-cta { margin: 24px 0 8px; }
/* Primary pill, matching .clip-try (no global .btn-primary exists in this theme). */
.support-cta .btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 24px; border-radius: 999px; background: var(--accent); color: var(--accent-ink);
  font-size: 16px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.support-cta .btn-primary:hover { filter: brightness(1.05); }
.support-cta-note { font-size: 15px; color: var(--ink-2); }
.support-cta-block { margin-top: 64px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.screen-reader-text:focus { position: fixed; top: 12px; left: 12px; z-index: 1000; width: auto; height: auto; clip: auto; padding: 10px 16px; background: #0b0a30; color: #fff; border-radius: 8px; white-space: normal; }

/* ---------- Download page (/download/) ---------- */
.download-grid { display: grid; gap: 24px; margin: 8px 0 40px; }
@media (min-width: 800px) { .download-grid { grid-template-columns: 1fr 1fr; } }
.download-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; }
.download-card h2 { margin: 0 0 10px; font-size: 20px; }
.download-card p { color: var(--ink-2); margin: 0 0 22px; }
.download-req { font-size: 14px; color: var(--muted); margin: 14px 0 0 !important; }
.format-list { columns: 2; column-gap: 24px; color: var(--ink-2); }
@media (min-width: 560px) { .format-list { columns: 3; } }

/* ---------- Pricing page (/pricing/) ---------- */
.pricing-card-section { padding: 8px 0 0; }
.pricing-panels { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
/* Three pricing tiers: stack on mobile, 3-up from 860px. Free/Yearly are plain
   .panel cards; Lifetime adds .panel.buy (spectrum hairline + corner glow +
   gradient price) and a "Best value" badge as the featured card. */
.pricing-tiers { grid-template-columns: 1fr; max-width: 400px; margin-inline: auto; gap: 18px; }
@media (min-width: 860px) {
  .pricing-tiers { grid-template-columns: repeat(3, 1fr); max-width: 980px; gap: 20px; align-items: stretch; }
}
.tier { position: relative; padding: 28px; }
.tier .tier-name { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin: 0 0 12px; }
.tier .price-line { font-size: 40px; margin: 0 0 20px; }
.tier .price-once { margin-left: 6px; }
.tier .facts { margin-bottom: 0; font-size: 15px; }
.tier-featured { border-color: var(--border-strong); }
.tier-badge {
  position: absolute; top: 18px; right: 18px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
  color: var(--accent-ink); background: var(--accent); padding: 5px 10px; border-radius: 999px;
}
.pricing-note { text-align: center; color: var(--muted); font-size: 15px; max-width: 520px; margin: 26px auto 20px; }
.pricing-ctas { justify-content: center; }
.compare-table-wrap { overflow-x: auto; margin: 24px 0; border: 1px solid var(--border); border-radius: var(--radius); }
.compare-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.compare-table th, .compare-table td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.compare-table thead th { background: var(--bg-soft); font-weight: 700; color: var(--ink); }
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-links { color: var(--ink-2); }
.pricing-faq { margin-top: 56px; }

/* ---------- Shared interior-page footer link row (How it works, Download,
   Pricing, FAQ, Support) ---------- */
.page-footer-links { margin-top: 56px; color: var(--muted); font-size: 15px; }
.page-footer-links a { color: var(--accent); }

/* ---------- Guides/Compare hub index cards (/guides/, /compare/) ---------- */
.hub-grid { display: grid; gap: 24px; margin: 8px 0 40px; }
@media (min-width: 700px) { .hub-grid { grid-template-columns: repeat(3, 1fr); } }
.hub-card { display: block; border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; text-decoration: none; color: inherit; transition: transform 200ms ease, border-color 200ms ease; }
.hub-card:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.hub-card-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--accent); margin: 0 0 10px; }
.hub-card h2 { margin: 0 0 10px; font-size: 20px; color: var(--ink); }
.hub-card p { color: var(--ink-2); margin: 0; font-size: 15px; line-height: 1.6; }
@media (prefers-reduced-motion: reduce) { .hub-card { transition: none; } }

/* ---------- Support page additions (/support/) ---------- */
.support-faq-more { margin-top: 20px; color: var(--ink-2); font-size: 15px; max-width: 880px; }
.support-changelog { max-width: 760px; margin: 0 auto 56px; }