/*
Theme Name: RawToHEIC Prism
Theme URI: https://rawtoheic.app/
Author: Sandro Gumz
Description: Redesigned marketing + blog theme for RawToHEIC — immersive prism hero, light/dark.
Version: 1.3.19
Requires at least: 6.4
Requires PHP: 8.1
License: Proprietary
Text Domain: rawtoheic-prism
*/

:root {
  --bg: #ffffff; --bg-soft: #f6f5f9; --surface: #ffffff;
  --border: rgba(15,12,40,.09); --border-strong: rgba(15,12,40,.16);
  --ink: #0b0a30; --ink-2: #30304a; --muted: #6a6a85;
  --accent: #4a1ecb; --accent-ink: #ffffff; --accent-soft: rgba(74,30,203,.08);
  --ray-red:#ff3d5a; --ray-orange:#ff8533; --ray-yellow:#ffd60a;
  --ray-green:#34d168; --ray-blue:#3da0ff; --ray-violet:#8858ff;
  --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-line: rgba(74,30,203,.62); --prism-line-2: rgba(74,30,203,.34);
  --prism-line-3: rgba(74,30,203,.18); --prism-fill: rgba(120,88,224,.06);
  --entry-ray: rgba(74,30,203,.5);
  /* App bg.canvasGradient (Theme/CosmicGradient) — warm cream radial light. */
  --canvas-1:#fdfbf6; --canvas-2:#f4f1ea; --canvas-3:#ebe6db;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0b0a12; --bg-soft:#131218; --surface:#16151c;
    --border:rgba(255,255,255,.08); --border-strong:rgba(255,255,255,.16);
    --ink:#f3f1ff; --ink-2:#d9d6ef; --muted:#9a9ab6;
    --accent:#a78bff; --accent-ink:#0b0a30; --accent-soft:rgba(167,139,255,.14);
    --prism-line: rgba(216,205,255,.85); --prism-line-2: rgba(216,205,255,.45);
    --prism-line-3: rgba(216,205,255,.25); --prism-fill: rgba(200,225,255,.05);
    --entry-ray: rgba(235,228,255,.7);
    /* App bgCanvas dark (#0b0a12) — neutral dark gray/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;
}
.site-header.is-scrolled { border-bottom-color: var(--border); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 16px; }
.wordmark { font-size: 17px; letter-spacing: -.01em; white-space: nowrap; }
.wordmark strong { font-weight: 700; }
.wordmark .to { font-style: italic; font-weight: 300; opacity: .5; }
.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: 1fr 1fr; 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: 820/640; pointer-events: none; }
@media (min-width: 900px) { .hero-scene { order: 2; } }
.hero-scene svg { width: 100%; height: 100%; display: block; overflow: visible; }
.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; } }
.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(--ray-yellow); font-size: 15px; line-height: 1; }
.appstore-badge-text { font-weight: 500; }

.hero-scene .prism-glow { fill: var(--prism-fill); opacity: .9; }
.hero-scene .beam-line { fill: var(--entry-ray); }
.hero-scene .beam-core { fill: var(--prism-line); opacity: .55; }
.hero-scene .impact { fill: var(--prism-line); opacity: .8; }
.hero-scene .t1 { stroke: var(--prism-line); fill: var(--prism-fill); stroke-linejoin: round; }
.hero-scene .t2 { stroke: var(--prism-line-2); }
.hero-scene .t3 { stroke: var(--prism-line-3); }
.hero-scene .spark { fill: var(--prism-line); opacity: .9; }
.hero-scene .dust circle { fill: var(--entry-ray); opacity: 0; }
.hero-scene .beam { mask: url(#beamMaskWide); }
.hero-scene .rays-sheet { opacity: .5; }
.hero-scene .rays-soft { opacity: .92; }
/* CSS fallback shimmer when GSAP is unavailable; GSAP takes over otherwise. */
.hero-scene.css-idle .rays-soft { animation: shimmer 8s ease-in-out infinite; }
@keyframes shimmer {
  0%, 100% { opacity: .62; }
  50% { opacity: .82; }
}
@media (prefers-reduced-motion: reduce) { .hero-scene.css-idle .rays-soft { animation: none; } }

/* ---------- 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(--ray-red), var(--ray-orange), var(--ray-yellow), var(--ray-green), var(--ray-blue), var(--ray-violet));
}

/* ---------- 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(--ray-yellow); 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(--ray-red), var(--ray-orange), var(--ray-yellow), var(--ray-green), var(--ray-blue), var(--ray-violet), 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(--ray-violet) 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(--ray-red), var(--ray-orange), var(--ray-yellow), var(--ray-green), var(--ray-blue), var(--ray-violet), 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 ray color (--ray, set on
   .feature-card), cycling red→violet across the grid so the page reads as a
   dispersed spectrum. 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(--ray) 26%, transparent), transparent 58%),
    radial-gradient(120% 120% at 18% 102%, color-mix(in oklab, var(--ray) 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(--ray) 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(--ray) 72%, var(--ink));
  background: linear-gradient(160deg, color-mix(in oklab, var(--ray) 20%, var(--surface)), color-mix(in oklab, var(--ray) 7%, var(--surface)));
  border: 1px solid color-mix(in oklab, var(--ray) 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(--ray) 52%, var(--ink));
  background: color-mix(in oklab, var(--ray) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--ray) 24%, transparent);
  border-radius: 999px;
  padding: 2px 9px;
}
/* Each feature is a sibling section under the page H1; card titles are H2 so the
   heading outline doesn't skip a level. The smaller size keeps the card visual. */
.feature-card h2 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.25;
  color: var(--ink);
  margin: 2px 0 0;
}
.feature-card p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}

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

/* ---------- 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; }