/* StickerMatchCut — landing page styles.
   Same design system as TextMatchCut, with a lime sticker accent. */

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* ── Brand tokens ──────────────────────────────────────── */
:root {
  --ink:       #0A0A0A;
  --paper:     #FAFAF7;
  --highlight: #B8F34A;
  --rule:      #1A1A1A;
  --mute:      #6B6B66;
  --card:      #FFFFFF;
  --success:   #0F8A4F;
  --danger:    #C53030;

  --radius:  12px;
  --radius-sm: 8px;
  --radius-lg: 16px;

  --easing: cubic-bezier(0.2, 0.9, 0.2, 1);
  --t-ui:   220ms;
  --t-hero: 480ms;

  --content-max: 1200px;
  --hero-max:    880px;
}

/* ── Base typography ───────────────────────────────────── */
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
}

h1, h2, h3, h4 { color: var(--ink); }
p { color: var(--ink); }

/* Display / H1 — Instrument Serif */
.h1 {
  font-family: 'Instrument Serif', 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(2.5rem, 8vw, 4.5rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
}

/* H2 / section headers */
.h2 {
  font-family: 'Instrument Serif', 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.h3 {
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.subhead {
  color: var(--mute);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.5;
}

.eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
}

.mono {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
  font-feature-settings: 'tnum';
}

/* ── Utilities ─────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px);
}
.hidden { display: none !important; }
:focus-visible {
  outline: 3px solid var(--highlight);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Skip link ─────────────────────────────────────────── */
.skip {
  position: absolute; top: -100px; left: 16px;
  background: var(--ink); color: var(--paper);
  padding: 10px 14px; border-radius: var(--radius-sm);
  font-weight: 600; font-size: 0.875rem;
  transition: top 150ms var(--easing);
  z-index: 1000;
}
.skip:focus { top: 12px; }

/* ── Nav ───────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  height: 64px;
  background: rgba(250, 250, 247, 0.78);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid rgba(26, 26, 26, 0.08);
}
.nav-inner {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}
.logo {
  font-family: 'Instrument Serif', 'Times New Roman', serif;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.01em;
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
}
.logo-cut {
  /* hairline gap separating the word `Cut` */
  margin-left: 2px;
  position: relative;
}
.logo-cut::before {
  content: '';
  position: absolute;
  inset-block: 4% 14%;
  left: -2px;
  width: 1px;
  background: var(--ink);
}

.nav-links {
  display: flex; gap: 28px; align-items: center;
  font-size: 0.9375rem; font-weight: 500;
  color: var(--mute);
}
.nav-links a { transition: color 150ms var(--easing); }
.nav-links a:hover { color: var(--ink); }

@media (max-width: 640px) {
  .nav-links a.nav-secondary { display: none; }
}

/* ── Hero ──────────────────────────────────────────────── */
.hero {
  padding: clamp(48px, 10vw, 96px) 0 clamp(48px, 8vw, 80px);
}
.hero-inner {
  max-width: var(--hero-max);
  margin-inline: auto;
  text-align: left;
}
.hero h1 { margin-bottom: 1.25rem; }

/* The signature highlight on "match cut" — yellow draw-in on load. */
.match-cut-accent {
  position: relative;
  background-image: linear-gradient(
    transparent 65%,
    var(--highlight) 65%,
    var(--highlight) 92%,
    transparent 92%
  );
  background-repeat: no-repeat;
  background-size: 0% 100%;
  animation: highlight-draw 600ms var(--easing) 220ms forwards;
  padding-inline: 0.05em;
}
@keyframes highlight-draw { to { background-size: 100% 100%; } }
@media (prefers-reduced-motion: reduce) {
  .match-cut-accent { animation: none; background-size: 100% 100%; }
}

.hero .subhead { margin-bottom: 2rem; max-width: 30em; }

/* ── Hero form (textbox + CTA) ─────────────────────────── */
.hero-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 560px;
}

.input-shell {
  position: relative;
  width: 100%;
}
.hero-input {
  display: block;
  width: 100%;
  height: 56px;
  padding: 0 96px 0 20px;
  background: var(--card);
  border: 1.5px solid var(--rule);
  border-radius: var(--radius);
  font: 500 1.0625rem 'Inter', system-ui, sans-serif;
  color: var(--ink);
  caret-color: var(--ink);
  transition: border-color 150ms var(--easing), box-shadow 150ms var(--easing);
  appearance: none;
  -webkit-appearance: none;
}
.hero-input::placeholder { color: #a5a39c; }
.hero-input:focus {
  outline: none;
  border-color: var(--highlight);
  box-shadow: 0 0 0 4px rgba(184, 243, 74, 0.25);
}

.input-hint {
  position: absolute; right: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--mute);
  font-size: 0.75rem; font-weight: 500;
  pointer-events: none;
  display: inline-flex; align-items: center; gap: 6px;
  transition: opacity 120ms var(--easing);
}
.input-hint kbd {
  font: inherit;
  background: rgba(26,26,26,0.06);
  border: 1px solid rgba(26,26,26,0.10);
  border-radius: 4px;
  padding: 1px 6px;
  line-height: 1.2;
}
.hero-input:focus ~ .input-hint,
.hero-input:not(:placeholder-shown) ~ .input-hint { opacity: 0; }

.char-count {
  position: absolute; right: 4px; bottom: -22px;
  font-size: 0.75rem; color: var(--mute);
  font-weight: 500;
  font-feature-settings: 'tnum';
}
.char-count.low { color: var(--danger); }

.cta {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  height: 56px;
  min-width: 220px;
  padding: 0 28px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius);
  font: 600 1.0625rem 'Inter', system-ui, sans-serif;
  letter-spacing: -0.005em;
  transition: transform 120ms var(--easing),
              box-shadow 220ms var(--easing),
              background 150ms var(--easing);
  align-self: flex-start;
}
.cta:hover:not(:disabled) {
  background: #161616;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.14);
}
.cta:active:not(:disabled) { transform: translateY(0); box-shadow: 0 2px 6px rgba(0,0,0,0.10); }
.cta:disabled { background: var(--mute); cursor: not-allowed; opacity: 0.85; }
.cta .arrow { transition: transform 200ms var(--easing); }
.cta:hover:not(:disabled) .arrow { transform: translateX(3px); }
.cta .spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(250,250,247,0.35);
  border-top-color: var(--paper);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.cta-note {
  margin-top: 0.625rem;
  font-size: 0.8125rem;
  color: var(--mute);
}

.social-proof {
  margin-top: 1.75rem;
  font-size: 0.8125rem;
  color: var(--mute);
  display: inline-flex; align-items: center; gap: 8px;
}
.social-proof .pulse {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--success);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(15, 138, 79, 0.6);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(15,138,79,0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(15,138,79,0); }
  100% { box-shadow: 0 0 0 0 rgba(15,138,79,0); }
}
@media (prefers-reduced-motion: reduce) {
  .social-proof .pulse { animation: none; }
}

/* ── Editor reveal panel ───────────────────────────────── */
.editor {
  margin-top: clamp(40px, 5vw, 56px);
  max-width: 560px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 480ms var(--easing), opacity 320ms ease 60ms;
}
.editor.visible { max-height: 2400px; opacity: 1; }

.editor-inner {
  display: flex; flex-direction: column; gap: 28px;
  padding-top: 8px;
}

.field { display: flex; flex-direction: column; gap: 10px; }
.field-label {
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--mute);
}

/* aspect ratio toggle */
.ratio-group {
  display: flex; gap: 4px;
  background: rgba(26,26,26,0.05);
  border-radius: var(--radius-sm);
  padding: 4px;
}
.ratio-btn {
  flex: 1; padding: 9px 0;
  border-radius: 6px;
  font: 500 0.875rem 'Inter', system-ui, sans-serif;
  color: var(--mute);
  transition: background 150ms var(--easing), color 150ms var(--easing), box-shadow 150ms var(--easing);
}
.ratio-btn:hover { color: var(--ink); }
.ratio-btn.active {
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* sound row */
.sound-row { display: flex; gap: 10px; }
.select-wrap { position: relative; flex: 1; }
.select-wrap::after {
  content: ''; position: absolute; right: 14px; top: 50%;
  transform: translateY(-50%);
  width: 10px; height: 6px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b6b66'/%3E%3C/svg%3E") no-repeat center/contain;
}
.select {
  width: 100%;
  height: 44px;
  padding: 0 36px 0 14px;
  background: var(--card);
  border: 1.5px solid rgba(26,26,26,0.12);
  border-radius: var(--radius-sm);
  font: 500 0.9375rem 'Inter', system-ui, sans-serif;
  color: var(--ink);
  appearance: none; -webkit-appearance: none;
  transition: border-color 150ms var(--easing);
}
.select:focus { outline: none; border-color: var(--ink); }
.icon-btn {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--card);
  border: 1.5px solid rgba(26,26,26,0.12);
  border-radius: var(--radius-sm);
  color: var(--mute);
  transition: border-color 150ms, color 150ms, background 150ms;
}
.icon-btn:hover { border-color: var(--ink); color: var(--ink); background: rgba(26,26,26,0.03); }

/* advanced toggle */
.adv-toggle {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--mute);
  transition: color 150ms var(--easing);
}
.adv-toggle:hover { color: var(--ink); }
.adv-toggle .chev {
  width: 9px; height: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'%3E%3Cpath d='M0 0l4.5 6L9 0z' fill='%236b6b66'/%3E%3C/svg%3E") no-repeat center/contain;
  transition: transform 220ms var(--easing);
}
.adv-toggle.open .chev { transform: rotate(180deg); }

#advanced {
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 380ms var(--easing), opacity 280ms ease 40ms;
}
#advanced.visible { max-height: 600px; opacity: 1; }
.adv-inner { padding-top: 18px; display: flex; flex-direction: column; gap: 22px; }

/* sliders */
.slider-row { display: flex; align-items: center; gap: 14px; }
input[type="range"] {
  flex: 1;
  -webkit-appearance: none; appearance: none;
  height: 3px; background: rgba(26,26,26,0.15);
  border-radius: 2px; outline: none; cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  background: var(--ink); border-radius: 50%;
  cursor: pointer; transition: transform 120ms var(--easing);
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.18); }
input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border: 0;
  background: var(--ink); border-radius: 50%; cursor: pointer;
}
.slider-readout {
  display: inline-flex; align-items: baseline; gap: 4px;
  min-width: 5ch;
}
.slider-readout .val { font: 600 0.875rem 'Inter', sans-serif; color: var(--ink); }
.slider-readout .unit { font-size: 0.72rem; color: var(--mute); }

/* progress / result / error */
#progress {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid rgba(26,26,26,0.10);
  border-radius: var(--radius-sm);
  color: var(--mute);
  font-size: 0.875rem;
}
.progress-bar {
  flex: 1; height: 4px; border-radius: 2px;
  background: rgba(26,26,26,0.08);
  overflow: hidden;
}
.progress-bar > i {
  display: block; height: 100%;
  background: var(--ink);
  width: 0%;
  transition: width 120ms linear;
}

#error {
  color: var(--danger);
  font-size: 0.875rem;
  padding: 12px 14px;
  background: rgba(197, 48, 48, 0.06);
  border-radius: var(--radius-sm);
}

#result { display: flex; flex-direction: column; gap: 10px; }
#preview {
  width: 100%;
  border-radius: var(--radius);
  background: #000;
  border: 1px solid rgba(26,26,26,0.10);
}
#downloadBtn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  height: 48px;
  background: var(--card);
  color: var(--ink);
  border: 1.5px solid var(--rule);
  border-radius: var(--radius);
  font: 600 0.9375rem 'Inter', sans-serif;
  transition: background 150ms var(--easing), transform 100ms var(--easing);
}
#downloadBtn:hover { background: rgba(26,26,26,0.04); }
#downloadBtn:active { transform: translateY(1px); }

.field-hint {
  font-size: 0.75rem;
  color: var(--mute);
  margin-top: 4px;
}

.regen-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.regen-note { font-size: 0.8125rem; color: var(--mute); }
.regen-btn {
  height: 48px;
  padding: 0 22px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius);
  font: 600 0.9375rem 'Inter', sans-serif;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background 150ms var(--easing);
}
.regen-btn:hover:not(:disabled) { background: #161616; }
.regen-btn:disabled { background: var(--mute); cursor: not-allowed; }

/* ── Section scaffolding ───────────────────────────────── */
.section {
  padding: clamp(64px, 10vw, 120px) 0;
  border-top: 1px solid rgba(26,26,26,0.08);
}
.section-head {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: clamp(32px, 5vw, 56px);
  max-width: 720px;
}
.section-head .eyebrow + .h2 { margin-top: 4px; }
.section-head p {
  color: var(--mute);
  font-size: 1.0625rem;
  max-width: 56ch;
}

/* ── Examples grid ─────────────────────────────────────── */
.examples-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.example-card {
  display: flex; flex-direction: column;
  gap: 14px;
  padding: 20px;
  background: var(--card);
  border: 1px solid rgba(26,26,26,0.08);
  border-radius: var(--radius-lg);
  transition: transform 220ms var(--easing), box-shadow 220ms var(--easing), border-color 220ms;
}
.example-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
  border-color: rgba(26,26,26,0.18);
}
.example-prompt {
  font-family: 'Instrument Serif', 'Times New Roman', serif;
  font-size: 1.375rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.example-prompt mark {
  background-image: linear-gradient(transparent 60%, var(--highlight) 60%, var(--highlight) 92%, transparent 92%);
  background-repeat: no-repeat;
  color: inherit;
  padding-inline: 0.05em;
}
.example-media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #0e0e0e;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
}
/* Subtle play hint that fades when the card is engaged. */
.example-media::after {
  content: '';
  position: absolute;
  right: 12px; bottom: 12px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(10, 10, 10, 0.75);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FAFAF7'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 55% 50%;
  background-size: 18px 18px;
  pointer-events: none;
  opacity: 1;
  transition: opacity 180ms var(--easing);
}
.example-card:hover .example-media::after,
.example-card:focus-within .example-media::after {
  opacity: 0;
}
.example-media video,
.example-media .placeholder {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.example-media video {
  object-fit: contain;
  background: #0e0e0e;
}
.example-media video:not([src]),
.example-media.no-video video { display: none; }
.example-media .placeholder { z-index: 0; }
.example-media video { z-index: 1; }
.example-media .placeholder {
  display: flex; align-items: center; justify-content: center;
  color: rgba(250,250,247,0.4);
  font: 500 0.75rem 'JetBrains Mono', monospace;
  letter-spacing: 0.08em; text-transform: uppercase;
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,0.02) 0 12px,
      rgba(255,255,255,0.05) 12px 13px);
}
.example-try {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.875rem; font-weight: 600;
  color: var(--ink);
  padding: 6px 0;
  border-bottom: 1.5px solid transparent;
  transition: border-color 150ms;
}
.example-try:hover { border-bottom-color: var(--ink); }

@media (max-width: 960px) {
  .examples-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .examples-grid { grid-template-columns: 1fr; }
}

/* ── How it works ──────────────────────────────────────── */
.steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  counter-reset: step;
}
.step {
  display: flex; flex-direction: column; gap: 12px;
  border-top: 1px solid var(--rule);
  padding-top: 22px;
}
.step-num {
  font-family: 'Instrument Serif', 'Times New Roman', serif;
  font-size: clamp(2.75rem, 5vw, 3.5rem);
  line-height: 0.9;
  color: var(--ink);
  letter-spacing: -0.03em;
}
.step h3 {
  font-weight: 600; font-size: 1.25rem;
  letter-spacing: -0.01em;
}
.step p { color: var(--mute); font-size: 1rem; }
@media (max-width: 800px) {
  .steps { grid-template-columns: 1fr; gap: 24px; }
}

/* ── Platforms ─────────────────────────────────────────── */
.platforms-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.platform-card {
  display: flex; flex-direction: column;
  gap: 8px;
  padding: 28px;
  background: var(--card);
  border: 1px solid rgba(26,26,26,0.08);
  border-radius: var(--radius-lg);
  transition: border-color 220ms var(--easing), transform 220ms var(--easing);
  position: relative;
}
.platform-card:hover {
  border-color: var(--rule);
  transform: translateY(-2px);
}
.platform-meta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--mute);
}
.platform-name {
  font-family: 'Instrument Serif', 'Times New Roman', serif;
  font-size: 1.75rem; line-height: 1.05;
  letter-spacing: -0.02em;
}
.platform-card p { color: var(--mute); font-size: 0.9375rem; margin-top: 4px; }
.platform-action {
  margin-top: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.875rem; font-weight: 600;
  color: var(--ink);
  padding: 6px 0;
  border-bottom: 1.5px solid transparent;
  transition: border-color 150ms;
  align-self: flex-start;
}
.platform-action:hover { border-bottom-color: var(--ink); }
@media (max-width: 760px) {
  .platforms-grid { grid-template-columns: 1fr; }
}

/* ── Comparison table ──────────────────────────────────── */
.compare {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border: 1px solid rgba(26,26,26,0.10);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.compare th, .compare td {
  text-align: left;
  padding: 16px 20px;
  font-size: 0.9375rem;
  border-bottom: 1px solid rgba(26,26,26,0.08);
}
.compare thead th {
  background: rgba(26,26,26,0.03);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mute);
}
.compare thead th.us {
  color: var(--ink);
  background: var(--highlight);
}
.compare td.us { font-weight: 600; }
.compare tr:last-child td { border-bottom: 0; }
.compare tbody th {
  font-weight: 500; color: var(--mute);
  background: rgba(26,26,26,0.02);
  font-size: 0.875rem;
}
.compare-wrap { overflow-x: auto; }
.footnote {
  margin-top: 14px;
  font-size: 0.8125rem;
  color: var(--mute);
}

/* ── FAQ ───────────────────────────────────────────────── */
.faq-list {
  display: flex; flex-direction: column;
  border-top: 1px solid rgba(26,26,26,0.12);
}
.faq-item { border-bottom: 1px solid rgba(26,26,26,0.12); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 0;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
  font-weight: 600;
  font-size: 1.0625rem;
  transition: color 150ms;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-family: 'Instrument Serif', serif;
  font-size: 1.75rem; line-height: 1;
  color: var(--mute);
  transition: transform 220ms var(--easing), color 150ms;
}
.faq-item[open] summary::after { content: '–'; color: var(--ink); }
.faq-item summary:hover { color: var(--ink); }
.faq-answer {
  padding: 0 0 22px;
  color: var(--mute);
  font-size: 1rem;
  max-width: 64ch;
}

/* ── Final CTA ─────────────────────────────────────────── */
.final-cta {
  background: var(--ink);
  color: var(--paper);
  text-align: center;
  padding: clamp(72px, 12vw, 128px) 0;
}
.final-cta h2 {
  font-family: 'Instrument Serif', 'Times New Roman', serif;
  font-weight: 400;
  color: var(--paper);
  font-size: clamp(2rem, 5.5vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 18ch;
  margin: 0 auto 28px;
}
.final-cta .cta {
  background: var(--paper);
  color: var(--ink);
}
.final-cta .cta:hover:not(:disabled) {
  background: var(--highlight);
  color: var(--ink);
  box-shadow: 0 6px 20px rgba(184,243,74,0.25);
}

/* ── Footer ────────────────────────────────────────────── */
.footer {
  padding: 56px 0 32px;
  background: var(--paper);
  border-top: 1px solid rgba(26,26,26,0.10);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 40px;
}
.footer-brand .logo { font-size: 1.75rem; }
.footer-tagline {
  margin-top: 10px;
  color: var(--mute); font-size: 0.9375rem;
  max-width: 28ch;
}
.footer h4 {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 14px;
}
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer li a {
  color: var(--ink);
  font-size: 0.9375rem;
  transition: color 150ms;
}
.footer li a:hover { color: var(--mute); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid rgba(26,26,26,0.08);
  color: var(--mute);
  font-size: 0.8125rem;
}
.footer-bottom .socials { display: flex; gap: 14px; }
.footer-bottom .socials a { transition: color 150ms; }
.footer-bottom .socials a:hover { color: var(--ink); }
/* Follow card: avatar beside the handle, contact links beneath. */
.footer-made-by .made-by-link {
  display: inline-flex; align-items: center;
  gap: 12px;
  padding: 10px 16px 10px 10px;
  border: 1px solid rgba(26,26,26,0.12);
  border-radius: var(--radius-sm);
  background: var(--card);
  transition: border-color 150ms var(--easing),
              transform 150ms var(--easing),
              box-shadow 220ms var(--easing);
  color: var(--ink);
}
.footer-made-by .made-by-link:hover {
  border-color: var(--ink);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
  color: var(--ink);
}
.made-by-name {
  font-family: 'Instrument Serif', 'Times New Roman', serif;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  line-height: 1;
}
.made-by-tag {
  font-size: 0.75rem;
  color: var(--mute);
  letter-spacing: 0.01em;
}
.made-by-avatar {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--paper);
}
.made-by-text { display: flex; flex-direction: column; gap: 3px; }
.made-by-secondary {
  margin-top: 12px;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--mute);
  max-width: 240px;
}
.made-by-secondary a {
  color: var(--ink);
  border-bottom: 1px solid rgba(26,26,26,0.25);
  transition: border-color 150ms;
}
.made-by-secondary a:hover { border-bottom-color: var(--ink); }
.footer-bottom a {
  color: var(--ink);
  border-bottom: 1.5px solid transparent;
  transition: border-color 150ms;
}
.footer-bottom a:hover { border-bottom-color: var(--ink); }

@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-made-by { grid-column: 1 / -1; }
  .footer-made-by .made-by-link { display: inline-flex; }
}

/* ── Long-form article (SEO pages) ─────────────────────── */
.article {
  padding: clamp(48px, 8vw, 96px) 0 clamp(64px, 10vw, 120px);
}
.article-head {
  max-width: 760px;
  margin: 0 auto clamp(40px, 6vw, 64px);
}
.article-head .eyebrow + .h1 { margin-top: 14px; }
.article-head .h1 {
  font-family: 'Instrument Serif', 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(2.25rem, 6.5vw, 4rem);
  line-height: 1.0;
  letter-spacing: -0.025em;
}
.article-head .lede {
  margin-top: 20px;
  font-size: 1.25rem;
  line-height: 1.45;
  color: var(--mute);
  max-width: 56ch;
}
.article-meta {
  margin-top: 22px;
  display: flex; gap: 16px;
  font-size: 0.8125rem;
  color: var(--mute);
}
.article-meta time { font-family: 'JetBrains Mono', monospace; }

.prose {
  max-width: 680px;
  margin: 0 auto;
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--ink);
}
.prose > * + * { margin-top: 1.1em; }
.prose h2 {
  font-family: 'Instrument Serif', 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(1.75rem, 3.4vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-top: 2.4em;
}
.prose h2 + p { margin-top: 0.7em; }
.prose h3 {
  font-weight: 600; font-size: 1.25rem; line-height: 1.3;
  margin-top: 2em;
  letter-spacing: -0.01em;
}
.prose h3 + p { margin-top: 0.4em; }
.prose p { color: var(--ink); }
.prose a {
  color: var(--ink);
  border-bottom: 1.5px solid var(--ink);
  transition: color 150ms, border-color 150ms, background 150ms;
  padding-bottom: 1px;
}
.prose a:hover {
  background: var(--highlight);
  border-bottom-color: var(--highlight);
}
.prose ul, .prose ol {
  padding-left: 1.5em;
}
.prose li { margin-top: 0.35em; }
.prose li::marker { color: var(--mute); }
.prose mark {
  background-image: linear-gradient(transparent 60%, var(--highlight) 60%, var(--highlight) 92%, transparent 92%);
  background-repeat: no-repeat;
  color: inherit;
  padding-inline: 0.05em;
}
.prose blockquote {
  border-left: 2px solid var(--ink);
  margin-left: -2em;
  padding-left: calc(2em - 2px);
  font-family: 'Instrument Serif', 'Times New Roman', serif;
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--ink);
}
.prose blockquote cite {
  display: block;
  margin-top: 12px;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mute);
}
.prose .callout {
  margin-top: 2em;
  padding: 22px 24px;
  background: var(--card);
  border: 1px solid rgba(26,26,26,0.10);
  border-radius: var(--radius-sm);
  font-size: 1rem;
}
.prose .callout p { margin-top: 0; }

/* Secondary pages use the same .cta as the hero so the primary action looks
   and behaves identically everywhere. These rules only undo the prose link
   styling that would otherwise bleed into it. */
.prose .cta,
.article .cta {
  color: var(--paper) !important;
  border-bottom: 0 !important;
  margin-top: 2em;
}
.prose .cta:hover,
.article .cta:hover { color: var(--paper) !important; }

@media (max-width: 640px) {
  .prose blockquote { margin-left: 0; padding-left: 1em; }
}

/* ── Sticky mobile CTA ─────────────────────────────────── */
.sticky-cta {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(250, 250, 247, 0.92);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(26,26,26,0.10);
  z-index: 40;
  transform: translateY(110%);
  transition: transform 280ms var(--easing);
  display: none;
}
.sticky-cta.visible { transform: translateY(0); }
.sticky-cta .cta { width: 100%; min-width: 0; }
@media (max-width: 768px) {
  .sticky-cta { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .sticky-cta { transition: none; }
}

/* ── Legal footer column ───────────────────────────────── */
.footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; }
@media (max-width: 1000px) {
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

/* ── Focus: lime is too light on paper for a ring ───────── */
:focus-visible { outline-color: var(--ink); }

/* ── Hero accent: "match cut" slapped on like a sticker ── */
.sticker-accent {
  display: inline-block;
  padding: 0.02em 0.22em 0.08em;
  background: var(--highlight);
  border: 0.06em solid #fff;
  border-radius: 0.18em;
  box-shadow: 0 0.04em 0 rgba(0,0,0,0.12), 0 0.12em 0.3em rgba(0,0,0,0.18);
  transform: rotate(-3deg);
  animation: slap 420ms cubic-bezier(0.3, 1.6, 0.5, 1) 200ms both;
}
@keyframes slap {
  from { transform: rotate(-9deg) scale(1.45); opacity: 0; }
  to   { transform: rotate(-3deg) scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .sticker-accent { animation: none; } }

/* ── Dropzone ──────────────────────────────────────────── */
.dropzone {
  display: flex; align-items: center; gap: 18px;
  padding: 18px 20px;
  min-height: 104px;
  background: var(--card);
  border: 1.5px dashed rgba(26,26,26,0.35);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 150ms var(--easing), background 150ms var(--easing), box-shadow 150ms var(--easing);
}
.dropzone:hover, .dropzone.dragging {
  border-color: var(--ink);
  background: #fdfff7;
  box-shadow: 0 0 0 4px rgba(184,243,74,0.35);
}
.dropzone.has-sticker { border-style: solid; border-color: var(--rule); }
.drop-thumb {
  flex: none;
  width: 68px; height: 68px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  background: rgba(26,26,26,0.05);
  color: var(--mute);
}
.drop-thumb canvas { max-width: 60px; max-height: 60px; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.25)); }
.has-sticker .drop-thumb {
  background:
    repeating-conic-gradient(rgba(26,26,26,0.06) 0 25%, transparent 0 50%) 0 0 / 12px 12px;
}
.drop-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.drop-title { font-weight: 600; font-size: 1.0625rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drop-note { color: var(--mute); font-size: 0.875rem; line-height: 1.45; }

/* ── Live preview ──────────────────────────────────────── */
.preview-frame {
  display: flex; justify-content: center;
  background: #0e0e0e;
  border-radius: var(--radius);
  padding: 12px;
}
.preview-frame canvas {
  display: block;
  max-width: 100%;
  max-height: min(62vh, 560px);
  width: auto; height: auto;
  border-radius: 6px;
}
.preview-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-btn, .upload-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 14px;
  background: var(--card);
  border: 1.5px solid rgba(26,26,26,0.12);
  border-radius: var(--radius-sm);
  font-size: 0.875rem; font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 150ms;
  align-self: flex-start;
}
.chip-btn:hover, .upload-btn:hover { border-color: var(--ink); }

/* ── Music ─────────────────────────────────────────────── */
.music-info { display: flex; align-items: center; gap: 12px; font-size: 0.875rem; }
.music-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-btn { color: var(--mute); text-decoration: underline; text-underline-offset: 3px; font-size: 0.8125rem; }
.link-btn:hover { color: var(--ink); }
.slider-readout .unit + .val { margin-left: 4px; }

/* ── Example cards render to canvas instead of video ───── */
.example-media canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

#error { margin-top: 20px; max-width: 560px; }
.inline-link { color: var(--ink); border-bottom: 1.5px solid var(--ink); }
.final-cta .cta { align-self: center; }

/* ── Page-wide drop overlay (blur + icon, WeTransfer style) ── */
.drop-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 24px;
  background: rgba(250, 250, 247, 0.55);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  opacity: 0; visibility: hidden;
  transition: opacity 180ms var(--easing), visibility 0s linear 180ms;
  pointer-events: none;
  text-align: center;
}
body.dragging .drop-overlay {
  opacity: 1; visibility: visible;
  transition: opacity 180ms var(--easing);
}
.drop-overlay-icon {
  width: 132px; height: 132px;
  display: flex; align-items: center; justify-content: center;
  background: var(--highlight);
  color: var(--ink);
  border: 6px solid #fff;
  border-radius: 50%;
  box-shadow: 0 18px 50px rgba(0,0,0,0.18);
  transform: scale(0.8) rotate(-8deg);
  transition: transform 320ms cubic-bezier(0.3, 1.6, 0.5, 1);
}
body.dragging .drop-overlay-icon { transform: scale(1) rotate(-4deg); animation: drop-bob 1.6s ease-in-out 320ms infinite; }
@keyframes drop-bob {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-8px) rotate(-1deg); }
}
.drop-overlay-title {
  font-family: 'Instrument Serif', 'Times New Roman', serif;
  font-size: clamp(2.25rem, 6vw, 3.75rem);
  line-height: 1; letter-spacing: -0.02em;
}
.drop-overlay-note { color: var(--mute); font-size: 1rem; }
@media (prefers-reduced-motion: reduce) {
  body.dragging .drop-overlay-icon { animation: none; }
  .drop-overlay, .drop-overlay-icon { transition: none; }
}


/* ── No letterboxing: preview and result take the video's own shape ── */
.preview-frame {
  background: none;
  padding: 0;
  justify-content: flex-start;
}
.preview-frame canvas {
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0,0,0,0.14);
}
#result { align-items: flex-start; }
#preview {
  width: auto; height: auto;
  max-width: 100%;
  max-height: min(62vh, 560px);
  background: transparent;
  border: 0;
  box-shadow: 0 10px 30px rgba(0,0,0,0.14);
}
/* Download is the payoff, so it gets the primary button. */
#downloadBtn {
  height: 56px; padding: 0 28px;
  background: var(--ink); color: var(--paper);
  border-color: var(--ink);
  font-size: 1.0625rem;
}
#downloadBtn:hover { background: #161616; }

/* Download straight from the preview */
.chip-btn.chip-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip-btn.chip-primary:hover { background: #161616; }
.chip-btn:disabled { opacity: 0.55; cursor: progress; }

/* After a render: a quiet confirmation, the preview stays the star */
#result { flex-direction: row; align-items: center; gap: 14px; flex-wrap: wrap; }
.result-note { color: var(--success); font-size: 0.875rem; font-weight: 600; }
#downloadBtn {
  height: 38px; padding: 0 14px;
  background: var(--card); color: var(--ink);
  border: 1.5px solid rgba(26,26,26,0.12);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
}
#downloadBtn:hover { background: var(--card); border-color: var(--ink); }

/* Templates page */
.template-grid { max-width: 1000px; margin: 32px auto 8px; }
.template-media {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1; border-radius: var(--radius);
  background: repeating-conic-gradient(rgba(26,26,26,0.05) 0 25%, transparent 0 50%) 0 0 / 20px 20px;
}
.template-media img { width: 62%; height: auto; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.2)); }
.template-idea { color: var(--mute); font-size: 0.9375rem; }
.article .sticker-accent { font-size: 0.92em; }

/* Highlighted words use the same slapped-on sticker look as the hero's
   "match cut", not TextMatchCut's highlighter stroke. */
.example-prompt mark,
.prose mark {
  display: inline-block;
  padding: 0.02em 0.22em 0.06em;
  margin: 0 0.06em;
  background: var(--highlight);
  background-image: none;
  color: var(--ink);
  border: 0.08em solid #fff;
  border-radius: 0.2em;
  box-shadow: 0 0.04em 0 rgba(0,0,0,0.12), 0 0.1em 0.25em rgba(0,0,0,0.16);
  transform: rotate(-2deg);
  line-height: 1.15;
}

/* Scoreboard: our row is the sticker */
.compare tr.us-row th, .compare tr.us-row td { background: var(--highlight); color: var(--ink); font-weight: 600; }
.prose .compare th, .prose .compare td { font-size: 0.9375rem; }


/* ── Breadcrumbs: always show where the reader is ──────── */
.breadcrumbs ol {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: 6px;
  font-size: 0.8125rem; font-weight: 500;
  color: var(--mute);
  margin-bottom: 18px;
}
.breadcrumbs li + li::before { content: '/'; margin-right: 6px; color: rgba(26,26,26,0.3); }
.breadcrumbs a { color: var(--mute); border-bottom: 1px solid transparent; transition: color 150ms, border-color 150ms; }
.breadcrumbs a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.breadcrumbs [aria-current] { color: var(--ink); }

/* ── Related posts / from the blog ─────────────────────── */
.related { max-width: 1000px; margin: clamp(56px, 8vw, 88px) auto 0; padding-top: 40px; border-top: 1px solid rgba(26,26,26,0.1); }
.related-h { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 2rem; letter-spacing: -0.02em; margin-bottom: 20px; }
.related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.related-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 20px;
  background: var(--card);
  border: 1px solid rgba(26,26,26,0.08);
  border-radius: var(--radius-lg);
  transition: transform 220ms var(--easing), border-color 220ms;
}
.related-card:hover { transform: translateY(-2px); border-color: var(--rule); }
.related-tool { background: var(--highlight); border-color: transparent; }
.related-kicker { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }
.related-tool .related-kicker { color: var(--ink); }
.related-title { font-family: 'Instrument Serif', serif; font-size: 1.35rem; line-height: 1.15; letter-spacing: -0.01em; }
.related-excerpt { font-size: 0.875rem; color: var(--mute); }
.related-tool .related-excerpt { color: var(--ink); }
.related-back { margin-top: 20px; font-size: 0.875rem; color: var(--mute); }
.related-back a { color: var(--ink); border-bottom: 1px solid rgba(26,26,26,0.3); }
@media (max-width: 900px) { .related-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .related-grid { grid-template-columns: 1fr; } }

/* ── Blog index ────────────────────────────────────────── */
.post-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.post-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 24px 26px;
  background: var(--card);
  border: 1px solid rgba(26,26,26,0.08);
  border-radius: var(--radius-lg);
  transition: transform 220ms var(--easing), border-color 220ms;
}
.post-card:hover { transform: translateY(-2px); border-color: var(--rule); }
.post-meta { font: 500 0.75rem 'JetBrains Mono', monospace; color: var(--mute); }
.post-title { font-family: 'Instrument Serif', serif; font-size: 1.75rem; line-height: 1.1; letter-spacing: -0.015em; }
.post-excerpt { color: var(--mute); font-size: 0.9375rem; }
.post-more { display: inline-flex; align-items: center; gap: 6px; font-size: 0.875rem; font-weight: 600; margin-top: 4px; }

/* ── Sticker editor dialog ─────────────────────────────── */
body.modal-open { overflow: hidden; }
dialog.edit-panel {
  width: min(720px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  color: var(--ink);
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(0,0,0,0.3);
  overflow: hidden;
}
dialog.edit-panel[open] { display: flex; flex-direction: column; }
dialog.edit-panel::backdrop {
  background: rgba(10,10,10,0.6);
  backdrop-filter: blur(4px);
}
.edit-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 4px; }
.edit-title { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 1.75rem; letter-spacing: -0.02em; }
.edit-close { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--mute); }
.edit-close:hover { background: rgba(26,26,26,0.06); color: var(--ink); }
.edit-hint { padding: 0 20px 12px; color: var(--mute); font-size: 0.9375rem; }
.edit-stage {
  position: relative;
  flex: 1 1 auto; min-height: 0;
  margin: 0 20px;
  display: grid; place-items: center;
  border-radius: var(--radius);
  background: repeating-conic-gradient(rgba(26,26,26,0.06) 0 25%, transparent 0 50%) 0 0 / 18px 18px;
  overflow: hidden;
}
.edit-stage canvas {
  grid-area: 1 / 1;
  max-width: 100%; max-height: min(56dvh, 520px);
  width: auto; height: auto;
}
#editBg { transition: filter 240ms var(--easing); }
/* Everything outside the sticker recedes. */
.edit-stage.has-selection #editBg { filter: blur(6px) brightness(0.42) saturate(0.8); }
/* A filtered element paints above plain siblings, so the sharp layer needs
   its own stacking position to stay on top of the blurred one. */
#editFg { position: relative; z-index: 1; cursor: crosshair; touch-action: none; }
.edit-controls { display: flex; align-items: flex-end; gap: 18px; padding: 16px 20px 4px; flex-wrap: wrap; }
.edit-controls .field { flex: 1 1 260px; }
/* The generate button is pinned: no edit is required to use it. */
.edit-foot {
  position: sticky; bottom: 0;
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
  background: var(--card);
  border-top: 1px solid rgba(26,26,26,0.08);
}
.edit-foot .chip-btn { align-self: center; height: 48px; padding: 0 18px; }
.edit-generate { height: 48px; min-width: 0; align-self: center; white-space: nowrap; padding: 0 20px; }
@media (max-width: 560px) {
  dialog.edit-panel { width: calc(100% - 24px); max-height: calc(100dvh - 24px); }
  .edit-generate { flex: 1; }
}

/* ── Uploaded sticker preview in the upload box ────────── */
.drop-copy { text-align: left; background: none; padding: 0; cursor: pointer; }
.drop-thumb { position: relative; overflow: hidden; }
.drop-thumb .thumb-img { display: none; }
.has-sticker .drop-icon { display: none; }
.dropzone.has-sticker .drop-thumb { width: 132px; height: 132px; cursor: default; }
.has-sticker .thumb-img { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 10px; }
.has-sticker .thumb-img canvas {
  max-width: 100%; max-height: 100%;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.25));
  transition: filter 200ms var(--easing);
}

/* Badge on the image: always say what drawing does */
.stage-badge {
  position: absolute; left: 50%; top: 12px; z-index: 2;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px 6px 30px;
  background: rgba(10,10,10,0.78) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B8F34A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E") no-repeat 10px 50% / 14px 14px;
  color: #fff;
  border-radius: 999px;
  font-size: 0.8125rem; font-weight: 600;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity 160ms var(--easing);
}
.edit-stage.is-drawing .stage-badge { opacity: 0; }
.edit-stage.is-selected .stage-badge { background-color: rgba(10,10,10,0.6); }

/* Switch */
.switch { display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 500; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track {
  position: relative; width: 34px; height: 20px; flex: none;
  background: rgba(26,26,26,0.18); border-radius: 999px;
  transition: background 150ms var(--easing);
}
.switch-track::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.25);
  transition: transform 150ms var(--easing);
}
.switch input:checked + .switch-track { background: var(--ink); }
.switch input:checked + .switch-track::after { transform: translateX(14px); }
.switch input:focus-visible + .switch-track { outline: 3px solid var(--ink); outline-offset: 2px; }

/* While drawing a new loop the whole photo comes back into focus, so the
   user can see what they are tracing. */
.edit-stage.is-drawing #editBg { filter: none; }


/* While the AI works: pulse the badge */
.edit-stage.is-thinking .stage-badge { animation: think 900ms ease-in-out infinite alternate; }
@keyframes think { from { opacity: 1; } to { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .edit-stage.is-thinking .stage-badge { animation: none; } }

/* Uploaded sticker: Cancel and Edit on the right side of the box */
.box-actions { display: none; margin-left: auto; gap: 8px; flex: none; }
.dropzone.has-sticker .box-actions { display: flex; }
.dropzone.has-sticker { cursor: default; }
.dropzone.has-sticker .drop-copy { flex: 1 1 auto; min-width: 0; cursor: default; }
.box-actions { align-items: center; gap: 10px; }
.box-btn {
  position: relative;
  width: 44px; height: 44px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--card);
  border: 1.5px solid rgba(26,26,26,0.14);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  transition: transform 150ms var(--easing), background 150ms var(--easing),
              border-color 150ms var(--easing), color 150ms var(--easing), box-shadow 150ms var(--easing);
}
.box-btn svg { width: 18px; height: 18px; }
.box-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
.box-btn:active { transform: translateY(0); }
#clearSticker:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
#editBtn { background: var(--ink); border-color: var(--ink); color: var(--paper); }
#editBtn:hover { background: var(--highlight); border-color: var(--highlight); color: var(--ink); }
/* Label under each circle on hover or keyboard focus */
.box-btn::after {
  content: attr(data-tip);
  position: absolute; top: calc(100% + 6px); left: 50%;
  transform: translate(-50%, -2px);
  padding: 3px 8px;
  background: var(--ink); color: var(--paper);
  border-radius: 6px;
  font-size: 0.72rem; font-weight: 600; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity 120ms var(--easing), transform 120ms var(--easing);
}
.box-btn:hover::after, .box-btn:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.dropzone.has-sticker { overflow: visible; }

/* Footer: brand + three short columns */
.footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; }
@media (max-width: 1000px) { .footer-grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

/* Long sticker labels in headlines must wrap on phones, not push the page
   wider than the screen. */
.sticker-accent { max-width: 100%; overflow-wrap: anywhere; }
.article-head, .prose { min-width: 0; }
@media (max-width: 480px) {
  .article-head .h1 { font-size: clamp(2rem, 9vw, 2.5rem); }
}
/* A tilted full-width label pokes a few px past the edge; never let it
   create sideways scrolling. */
main.article, .hero { overflow-x: clip; }

/* Footer with the Legal column: brand + four short columns */
.footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr; }
@media (max-width: 1000px) { .footer-grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

/* ── Cookie consent banner ─────────────────────────────── */
.smc-consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1200;
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  background: var(--card);
  border-top: 1px solid rgba(26,26,26,0.12);
  box-shadow: 0 -8px 32px rgba(0,0,0,0.08);
  transform: translateY(100%);
  transition: transform 320ms var(--easing);
}
.smc-consent.is-in { transform: translateY(0); }
.smc-consent-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex; align-items: center; gap: 24px;
  flex-wrap: wrap;
}
.smc-consent-copy { flex: 1 1 420px; min-width: 0; }
.smc-consent-title {
  font-weight: 600;
  font-size: 0.9375rem;
  margin-bottom: 2px;
}
.smc-consent-text {
  color: var(--mute);
  font-size: 0.8125rem;
  line-height: 1.5;
}
.smc-consent-text a {
  color: var(--ink);
  border-bottom: 1px solid rgba(26,26,26,0.3);
}
.smc-consent-text a:hover { border-bottom-color: var(--ink); }
.smc-consent-actions {
  display: flex; gap: 10px; flex: 0 0 auto;
}
.smc-consent-btn,
.consent-reopen {
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 600;
  border: 1px solid var(--ink);
  transition: background-color 150ms var(--easing),
              color 150ms var(--easing),
              transform 150ms var(--easing);
}
.smc-consent-decline,
.consent-reopen {
  background: transparent;
  color: var(--ink);
}
.smc-consent-decline:hover,
.consent-reopen:hover { background: rgba(26,26,26,0.06); }
.smc-consent-accept {
  background: var(--ink);
  color: var(--paper);
}
.smc-consent-accept:hover { transform: translateY(-1px); }
.smc-consent-btn:focus-visible,
.consent-reopen:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
@media (max-width: 620px) {
  .smc-consent-inner { gap: 14px; }
  .smc-consent-actions { width: 100%; }
  .smc-consent-btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .smc-consent { transition: none; }
  .smc-consent-accept:hover { transform: none; }
}