/* Slap Alert. Colours are the monkey's own palette (Sources/Sprites.swift) and the note's paper. */
:root {
  --ink: #2a1708;
  --ink-soft: #5b4636;
  --outline: #3a200e;
  --fur: #7a4a24;
  --paper: #fff8ec;
  --card: #ffffff;
  --note: #ffe45c;
  --note-shade: #d6a014;
  --vine: #3e8e3a;
  --line: rgba(58, 32, 14, 0.14);
  --code-bg: rgba(58, 32, 14, 0.07);
  --wall-a: #ffd7a8;
  --wall-b: #f59e7b;
  --wall-c: #7f6cc4;
  --shadow: 4px 4px 0 rgba(0, 0, 0, 0.28);
  --edge-glow: 0 0 0 0 transparent;
  color-scheme: light;
}
/* Always the cream look (2026-10-15): no automatic dark mode. The dark colours below are kept,
   and apply only if a page opts in with <html data-theme="dark">. */
:root[data-theme="dark"] {
  --ink: #f6ead9;
  --outline: #0b0603;
  --edge-glow: 0 0 0 2px rgba(246, 234, 217, 0.22);
  --ink-soft: #c9b7a3;
  --paper: #1d140d;
  --card: #2a1e15;
  --line: rgba(246, 234, 217, 0.14);
  --code-bg: rgba(246, 234, 217, 0.08);
  --wall-a: #3a2a5c;
  --wall-b: #7a3e52;
  --wall-c: #1d2b4a;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}
/* height: auto keeps a width/height pair from locking the height when max-width shrinks the image. */
img { max-width: 100%; height: auto; }
a { color: inherit; }
code, pre { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.86em; }
code { background: var(--code-bg); padding: 0.1em 0.35em; border-radius: 4px; }
pre { background: var(--code-bg); padding: 14px 16px; border-radius: 8px; overflow-x: auto; line-height: 1.45; }
pre code { background: none; padding: 0; }
.muted { color: var(--ink-soft); }
.fine { color: var(--ink-soft); font-size: 0.85rem; margin-top: 14px; }

main, .top, footer { max-width: 1080px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
@media (min-width: 720px) { main, .top, footer { padding-left: 32px; padding-right: 32px; } }

.top { display: flex; align-items: center; justify-content: space-between; gap: 12px 18px; flex-wrap: wrap; padding-top: 18px; padding-bottom: 18px; }
.site-nav { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 14px 18px; margin-left: auto; }
.site-nav a:not(.button) { font-weight: 700; text-decoration: none; }
.site-nav a:not(.button):hover { text-decoration: underline; }
.site-nav a:not(.button):focus-visible { outline: 3px solid var(--vine); outline-offset: 3px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.15rem; text-decoration: none; }
.brand img { image-rendering: pixelated; }

/* Chunky pixel buttons, like the note's border and drop shadow. */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--note); color: #2a1708; text-decoration: none; font-weight: 800;
  padding: 13px 20px; border: 4px solid var(--outline); box-shadow: var(--edge-glow), var(--shadow);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.button:hover { transform: translate(-1px, -1px); box-shadow: var(--edge-glow), 5px 5px 0 rgba(0, 0, 0, 0.28); }
.button:active { transform: translate(3px, 3px); box-shadow: var(--edge-glow), 1px 1px 0 rgba(0, 0, 0, 0.28); }
.button:focus-visible { outline: 3px solid var(--vine); outline-offset: 3px; }
.button.ghost { background: var(--card); color: var(--ink); }
.button.small { padding: 6px 14px; border-width: 3px; box-shadow: var(--edge-glow), 3px 3px 0 rgba(0, 0, 0, 0.28); }
.button.wide { width: 100%; }
button.button { font: inherit; font-weight: 800; line-height: inherit; cursor: pointer; appearance: none; border-radius: 0; }
.buy-form { margin: 0; }
.ctas .buy-form { display: inline-flex; }
.card .buy-form { display: block; }
.price-tag:not(:empty) { background: rgba(58, 32, 14, 0.12); padding: 1px 8px; border-radius: 3px; }
.price-was { text-decoration: line-through; font-weight: 700; opacity: 0.72; margin-right: 0.35em; }
.big-price .price-was { font-size: 0.55em; vertical-align: 0.45em; }

.hero { position: relative; display: grid; gap: 36px; align-items: center; padding: 24px 0 64px; }
@media (min-width: 900px) { .hero { grid-template-columns: 1fr 1.15fr; gap: 48px; padding-top: 40px; } }
/* Wide screens: pull the hero out to the window edges and leave a gutter on the left
   for the slapped signup note, between the window edge and the headline. */
@media (min-width: 1200px) {
  .hero {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding-top: 28px;
    padding-bottom: 36px;
    padding-left: 360px;
    padding-right: max(32px, calc((100vw - 1080px) / 2));
  }
  .hero h1 { font-size: clamp(2.15rem, 3.2vw, 3rem); margin-bottom: 12px; }
  .hero .lede { font-size: 1.05rem; margin-bottom: 16px; }
}
@media (max-width: 1199px) {
  .hero { padding-top: 12px; }
  .hero h1 { font-size: clamp(1.9rem, 8vw, 2.4rem); margin-bottom: 10px; }
  .hero .lede { font-size: 1.05rem; margin-bottom: 14px; }
  .hero.has-hero-note .hero-stage { margin-top: var(--hero-note-space, 0px); }
  .hero.has-hero-note .hero-copy .app-store-offer { margin-top: calc(var(--hero-note-space, 0px) + 22px); }
}
h1 { font-size: clamp(2.4rem, 7vw, 3.9rem); line-height: 1.02; letter-spacing: -0.03em; margin: 0 0 18px; }
h2 { font-size: clamp(1.5rem, 4vw, 2rem); letter-spacing: -0.02em; margin: 0 0 18px; }
h3 { margin: 0 0 6px; font-size: 1.12rem; }
.lede { font-size: 1.2rem; color: var(--ink-soft); margin: 0 0 26px; max-width: 34em; }
.ctas { display: flex; flex-wrap: wrap; gap: 14px; }
/* Official badge at its authored 40px height. Clear space is one quarter of that height. */
.app-store-offer { margin: 22px 0; max-width: 40em; }
.app-store-offer .app-store-line { margin: 0; max-width: 40em; }
.app-store-badge { display: inline-block; margin: 10px; line-height: 0; text-decoration: none; }
.app-store-badge:focus-visible { outline: 3px solid var(--vine); outline-offset: 3px; }
.app-store-badge img { display: block; height: 40px; width: auto; max-width: none; }

/* The pretend Mac screen the monkey lives in. */
.screen {
  position: relative; width: 100%; aspect-ratio: 380 / 238; overflow: hidden;
  /* Size as if empty, so the canvas bitmap (set by monkey.js) can't grow this box. */
  contain: size;
  border: 4px solid var(--outline); border-radius: 10px; box-shadow: var(--edge-glow), 6px 6px 0 rgba(0, 0, 0, 0.25);
  background:
    radial-gradient(120% 90% at 85% 10%, var(--wall-a), transparent 60%),
    radial-gradient(120% 120% at 10% 100%, var(--wall-c), transparent 65%),
    var(--wall-b);
}
.screen canvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; }  /* above the note: the hand lands on it */
.menubar {
  position: absolute; left: 0; right: 0; top: 0; z-index: 2; height: 24px;
  display: flex; align-items: center; gap: 14px; padding: 0 12px;
  background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font-size: 12px; color: #1c1c1e;
}
.menubar .apple { width: 11px; height: 13px; background: #1c1c1e; border-radius: 5px 5px 6px 6px; }
.menubar .spacer { flex: 1; }
.menubar .menu-icon { width: 15px; height: 15px; image-rendering: pixelated; }
@media (max-width: 480px) { .menubar span:not(.apple):not(.spacer) { display: none; } .menubar span:last-child { display: inline; } }
.note {
  position: absolute; z-index: 0; image-rendering: pixelated; transform-origin: 50% 50%;
  rotate: -2deg; pointer-events: none;
}
.note.slap-in { animation: slap-in 0.3s linear both; }
.note.fall { animation: fall 0.28s ease-in both; }
@keyframes slap-in {
  0% { opacity: 0; scale: 1.18; rotate: -9deg; }
  15% { opacity: 1; }
  45% { scale: 0.95; }
  60% { rotate: -0.9deg; }
  75% { scale: 1.02; }
  100% { opacity: 1; scale: 1; rotate: -2deg; }
}
@keyframes fall { to { opacity: 0; translate: 0 28px; } }

section { padding: 56px 0; border-top: 2px dashed var(--line); }
.hero { border-top: 0; }

.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: 22px; }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li { counter-increment: step; background: var(--card); border: 3px solid var(--outline); box-shadow: var(--edge-glow), var(--shadow); padding: 22px 22px 14px; }
.steps li::before {
  content: counter(step); display: inline-grid; place-items: center; width: 34px; height: 34px; margin-bottom: 12px;
  background: var(--note); color: #2a1708; border: 3px solid var(--outline); font-weight: 900;
}
.steps p { margin: 0 0 10px; }

.note-grid { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.note-grid figure { margin: 0; }
.note-grid img { display: block; width: 100%; max-width: 280px; height: auto; image-rendering: pixelated; }
.note-grid figcaption { color: var(--ink-soft); font-size: 0.92rem; margin-top: 6px; }

.private { display: grid; gap: 40px; }
@media (min-width: 900px) { .private { grid-template-columns: 1fr 1fr; } }
.private p { margin: 0 0 14px; }
.private > div, .hero > * { min-width: 0; }   /* let the code block scroll instead of widening the page */

.buy { display: grid; place-items: center; }
.card { width: 100%; max-width: 440px; background: var(--card); border: 4px solid var(--outline); box-shadow: var(--edge-glow), 8px 8px 0 rgba(0, 0, 0, 0.25); padding: 28px; text-align: center; }
.card h2 { margin-bottom: 4px; }
.big-price { font-size: 3rem; font-weight: 900; letter-spacing: -0.03em; margin: 4px 0 0; line-height: 1.1; }
.big-price [data-pending] { font-size: 1.6rem; letter-spacing: -0.01em; }
.card ul { text-align: left; margin: 22px 0 26px; padding: 0; list-style: none; }
.card li { padding: 7px 0 7px 30px; position: relative; border-bottom: 1px solid var(--line); }
.card li::before { content: ""; position: absolute; left: 4px; top: 13px; width: 12px; height: 12px; background: var(--note); border: 3px solid var(--outline); }

.faq details { border-bottom: 1px solid var(--line); padding: 14px 0; }
.faq summary { cursor: pointer; font-weight: 700; }
.faq details p { margin: 10px 0 0; color: var(--ink-soft); }

.about .lede { margin-bottom: 0; max-width: 46em; }

/* "Get updates" signup: an inline card in the page flow, never a dialog or overlay.
   On a narrow column (blog, thanks, download) it sits with the text. Elsewhere it is centered. */
.updates { display: grid; place-items: center; }
main:has(.blog) > .updates,
main:has(.thanks) > .updates { place-items: start; }
main:has(.blog) > .updates .signup,
main:has(.thanks) > .updates .signup { max-width: 40rem; }
.signup { width: 100%; max-width: 640px; background: var(--card); border: 4px solid var(--outline); box-shadow: var(--edge-glow), var(--shadow); padding: 24px; }
.signup h2 { margin-bottom: 6px; }
.signup > p { margin: 0 0 18px; }
.signup-row { display: flex; flex-wrap: wrap; gap: 12px; }
.signup-row input {
  flex: 1 1 220px; min-width: 0; font: inherit; color: var(--ink); background: var(--paper);
  border: 3px solid var(--outline); border-radius: 0; padding: 10px 12px;
}
.signup-row input:focus-visible { outline: 3px solid var(--vine); outline-offset: 2px; }
.signup-row .button { font: inherit; font-weight: 800; cursor: pointer; }
.signup-row .button:disabled { opacity: 0.6; cursor: progress; }
@media (max-width: 480px) { .signup-row .button { flex-basis: 100%; } }
.consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: 0.95rem; cursor: pointer; }
.consent input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--vine); }
.signup-status { margin: 14px 0 0; padding: 10px 14px; border: 3px dashed var(--line); font-weight: 700; }
.signup-status:empty { display: none; }
.signup-status.ok { border-color: var(--vine); }
.signup-status.error { border-color: #c42828; color: #c42828; }
.signup .fine { margin-bottom: 0; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }   /* bots fill it in, people never see it */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Homepage sticky note. Out of the text flow. On a wide window it sits in the left gutter.
   On a narrow window the hero reserves a gap under the buttons, and closing the note removes it. */
.hero-signup { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.hero-signup.is-gone { display: none; }
.hero-slap { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; }
.hero-slap canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-slap canvas.is-gone { visibility: hidden; }
.hero-note {
  position: absolute; z-index: 2; width: min(320px, calc(100% - 20px)); margin: 0;
  padding: 12px 12px 10px; background: var(--note); color: #2a1708;
  border: 4px solid var(--outline); box-shadow: var(--edge-glow), 4px 4px 0 rgba(0, 0, 0, 0.28);
  rotate: -2deg; visibility: hidden; pointer-events: none;
}
.hero-note.is-ready { visibility: visible; pointer-events: auto; animation: slap-in 0.3s linear both; }
.hero-note::before {
  content: ""; position: absolute; top: -11px; left: 50%; width: 44px; height: 14px;
  transform: translateX(-50%); background: #fffef8; border: 3px solid var(--outline);
}
.sticky-title { margin: 0 36px 8px 0; font-weight: 900; font-size: 1rem; line-height: 1.2; }
.hero-note .signup-row { flex-wrap: nowrap; gap: 8px; }
.hero-note .signup-row input { flex: 1 1 auto; padding: 7px 8px; line-height: 1.2; }
.hero-note .signup-row .button { flex: none; flex-basis: auto; padding: 7px 10px; }
.hero-note .consent { margin-top: 8px; font-size: 0.78rem; line-height: 1.3; gap: 8px; }
.hero-note .fine { margin: 6px 0 0; font-size: 0.72rem; line-height: 1.35; }
.hero-note .signup-status { margin-top: 8px; }
.hero-note .hp { left: 0; top: 0; clip: rect(0 0 0 0); }
.note-close {
  position: absolute; top: 6px; right: 6px; z-index: 1; width: 32px; height: 32px; padding: 0;
  display: grid; place-items: center; background: #fff; color: #2a1708;
  border: 3px solid var(--outline); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.28);
  font: inherit; font-weight: 900; font-size: 1.15rem; line-height: 1; cursor: pointer;
}
.note-close:hover { transform: translate(-1px, -1px); }
.note-close:focus-visible,
.hero-note a:focus-visible,
.hero-note .consent input:focus-visible { outline: 3px solid var(--vine); outline-offset: 2px; }
@media (min-width: 1200px) {
  .hero-note { width: 300px; }
  .hero-note .signup-row { flex-wrap: wrap; }
  .hero-note .signup-row input,
  .hero-note .signup-row .button { flex: 1 1 100%; }
}
@media (max-width: 1199px) {
  .hero-note { width: calc(100% - 24px); padding: 10px 10px 8px; }
  .sticky-title { font-size: 0.95rem; margin-bottom: 6px; }
  .hero-note .consent { font-size: 0.78rem; margin-top: 6px; }
  .hero-note .fine { font-size: 0.72rem; margin-top: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slap { display: none !important; }
  .hero-note,
  .hero-note.is-ready { animation: none !important; }
}

footer { padding-top: 32px; padding-bottom: 48px; color: var(--ink-soft); font-size: 0.9rem; border-top: 2px dashed var(--line); }
/* Homepage SaaSearch badge. style-src stays 'self', so the img style attribute does not apply; this does. */
footer img { display: block; height: 48px; width: auto; max-width: none; }

/* Thanks page */
.thanks { max-width: 720px; padding: 32px 0 64px; border-top: 0; }
.license-box {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.82rem; word-break: break-all;
  background: var(--card); border: 3px solid var(--outline); padding: 16px; margin: 16px 0; user-select: all;
}
.row { display: flex; flex-wrap: wrap; gap: 14px; margin: 18px 0; }
.status { padding: 14px 16px; border: 3px dashed var(--line); }
.status.error { border-color: #c42828; color: #c42828; }
.thanks ol { padding-left: 1.2em; }
.thanks li { margin-bottom: 8px; }
.prose h2 { font-size: 1.25rem; margin: 30px 0 8px; }
.prose p { margin: 0 0 12px; }
.prose ul, .prose ol { margin: 0 0 14px; padding-left: 1.2em; }
.prose li { margin-bottom: 8px; }

/* Comparison table on /stripe. The wrap scrolls sideways on a phone. */
.table-wrap { overflow-x: auto; max-width: 100%; border: 3px solid var(--outline); background: var(--card); }
.table-wrap:focus-visible { outline: 3px solid var(--vine); outline-offset: 2px; }
.compare table { border-collapse: collapse; width: 100%; min-width: 920px; font-size: 0.92rem; line-height: 1.4; }
.compare th, .compare td { border-bottom: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.compare thead th { background: var(--note); color: #2a1708; font-weight: 800; }
.compare tbody th { font-weight: 700; white-space: nowrap; }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }

/* The trial zip loads here so the install steps stay on screen. */
.download-frame { position: absolute; width: 0; height: 0; border: 0; opacity: 0; }

/* Real win card from Slap Alert 1.5. The img width and height reserve its box. */
.hero-stage { display: grid; gap: 18px; align-content: start; min-width: 0; }
.win-card { margin: 0; max-width: 100%; }
.win-card img { display: block; width: 100%; height: auto; }
.win-card figcaption { margin: 10px 0 0; color: var(--ink-soft); font-size: 0.85rem; line-height: 1.4; }

.feature-grid { display: grid; gap: 22px; }
@media (min-width: 820px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } }
.feature-grid article { background: var(--card); border: 3px solid var(--outline); box-shadow: var(--edge-glow), var(--shadow); padding: 22px; min-width: 0; }
.feature-grid p { margin: 0; }

/* Blog. The measure stays narrow so a long article is readable. The title is the only h1. */
.blog { max-width: 40rem; border-top: 0; padding-top: 12px; }
.blog h1 { font-size: clamp(2.1rem, 5vw, 3rem); }
.crumbs { color: var(--ink-soft); font-size: 0.92rem; margin: 0 0 18px; }
.crumbs a { color: inherit; }
.crumbs span[aria-hidden] { margin: 0 0.35em; }
.byline { margin: 0 0 4px; font-weight: 700; }
.updated { margin: 0 0 22px; }
.post-list { list-style: none; padding: 0; margin: 8px 0 0; }
.post-list li { padding: 22px 0; border-top: 2px dashed var(--line); }
.post-list h2 { font-size: 1.45rem; margin: 0 0 6px; }
.post-list h2 a { text-decoration: none; }
.post-list h2 a:hover { text-decoration: underline; }
.post-date { margin: 0 0 4px; }
.article { font-size: 1.0625rem; line-height: 1.7; }
.article h2 { font-size: 1.55rem; line-height: 1.25; margin: 2rem 0 0.6rem; }
.article h3 { font-size: 1.2rem; margin: 1.6rem 0 0.45rem; }
.article p { margin: 0 0 1rem; }
.article ul, .article ol { margin: 0 0 1rem; padding-left: 1.3em; }
.article li { margin: 0.3rem 0; }
.article a { text-decoration: underline; text-underline-offset: 0.15em; }
.article blockquote { margin: 0 0 1rem; padding: 0.15rem 0 0.15rem 1rem; border-left: 4px solid var(--note-shade); color: var(--ink-soft); }
.article blockquote p { margin: 0; }
.article img { display: block; height: auto; margin: 0 0 1rem; border: 3px solid var(--outline); }
.article-table { overflow-x: auto; max-width: 100%; margin: 0 0 1rem; }
.article table { border-collapse: collapse; width: 100%; font-size: 0.95rem; line-height: 1.45; }
.article th, .article td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.article th { background: var(--note); color: #2a1708; }
.article pre { margin: 0 0 1rem; }
.blog-note { margin-top: 2.2rem; padding: 16px 18px; background: var(--card); border: 3px solid var(--outline); box-shadow: var(--edge-glow), var(--shadow); }
.blog-note p { margin: 0; }
.empty { margin-top: 8px; }

/* The homepage sticky note, in the blog column. Hidden until its script places it.
   Wide windows open a left gutter when the column still fits; otherwise it stays
   in flow under the heading. .is-gone (dismiss or a signup elsewhere) leaves no gap. */
.blog > .hero-signup {
  display: none;
  position: relative;
  inset: auto;
  z-index: auto;
  margin: 0;
  pointer-events: none;
}
.blog > .hero-signup.is-placed { display: block; margin: 0 0 18px; }
.blog > .hero-signup.is-placed.is-gone { display: none; margin: 0; }
.blog .hero-note {
  position: relative;
  width: 100%;
  max-width: 100%;
  left: auto;
  top: auto;
  right: auto;
  bottom: auto;
}
.blog .hero-slap {
  position: absolute;
  inset: auto;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
}
.blog .hero-slap canvas { pointer-events: none; }
.blog.is-side {
  position: relative;
  max-width: none;
  box-sizing: border-box;
  padding-left: var(--blog-note-pad, 360px);
  padding-right: max(32px, calc((100vw - 1080px) / 2));
}
.blog.is-side:has(> .hero-signup.is-gone) {
  width: auto;
  max-width: 40rem;
  margin-left: 0;
  padding-left: 0;
  padding-right: 0;
}
.blog.is-side > h1,
.blog.is-side > .crumbs,
.blog.is-side > .byline,
.blog.is-side > .updated,
.blog.is-side > p,
.blog.is-side > .article-body,
.blog.is-side > .blog-note,
.blog.is-side > .post-list {
  max-width: 40rem;
  min-width: 0;
}
.blog.is-side > .hero-signup.is-placed {
  position: absolute;
  inset: 0;
  z-index: 4;
  margin: 0;
  pointer-events: none;
}
.blog.is-side .hero-note,
.blog.is-side .hero-note.is-ready {
  position: absolute;
  width: 300px;
  max-width: 300px;
  margin: 0;
}
.blog.is-side .hero-note .signup-row { flex-wrap: wrap; }
.blog.is-side .hero-note .signup-row input,
.blog.is-side .hero-note .signup-row .button { flex: 1 1 100%; }
figure.sound { margin: 1.6rem 0 2rem; padding: 16px 18px; background: var(--card); border: 3px solid var(--outline); box-shadow: var(--edge-glow), var(--shadow); }
figure.sound h2 { margin-top: 0; }
figure.sound audio { display: block; width: min(100%, 420px); margin: 0.6rem 0; }
figure.sound p { margin: 0.4rem 0 0; }

/* First sale card maker. The hidden attribute has to win over .button and .updates,
   which set display and would otherwise keep a closed control on screen. */
.card-maker [hidden],
.updates[hidden] { display: none !important; }
#club-cards:target { display: grid !important; }
#club-cards { scroll-margin-top: 16px; }
.club-step { width: min(100%, 920px); margin-top: 28px; }
.club-step h3 { margin: 0 0 8px; }
.club-step > p { margin: 0 0 16px; max-width: 40em; }
.club-choices { border: 0; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 16px; }
.club-choices legend { font-weight: 800; width: 100%; padding: 0; margin: 0 0 4px; }
.club-choices label { display: flex; gap: 8px; align-items: center; font-weight: 800; cursor: pointer; }
.club-choices input { width: 20px; height: 20px; margin: 0; accent-color: var(--vine); }
.club-step .maker-preview { margin: 0 0 14px; }
.club-step .maker-actions { margin-bottom: 14px; }
.card-maker { border-top: 0; padding-top: 4px; padding-bottom: 28px; }
.card-maker h1 { font-size: clamp(2rem, 6vw, 3.2rem); margin-bottom: 10px; }
.card-maker .lede { margin-bottom: 16px; }
.maker-grid { display: grid; gap: 28px; align-items: start; }
.maker-form, .maker-preview, .app-pitch { min-width: 0; }
@media (max-width: 859px) { .maker-preview { order: -1; } }
@media (min-width: 860px) { .maker-grid { grid-template-columns: minmax(260px, 380px) minmax(0, 1fr); } }
.maker-form .stack { display: grid; gap: 6px; margin: 0 0 12px; }
.maker-form .field-label { font-weight: 800; }
.maker-form input[type="text"] {
  width: 100%; font: inherit; color: var(--ink); background: var(--card);
  border: 3px solid var(--outline); border-radius: 0; padding: 10px 12px;
}
.maker-form input[type="file"] { max-width: 100%; font: inherit; }
.maker-form input:focus-visible,
.maker-preview:focus-visible { outline: 3px solid var(--vine); outline-offset: 3px; }
.maker-form .toggle { display: flex; gap: 10px; align-items: flex-start; font-weight: 700; cursor: pointer; }
.maker-form .toggle input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--vine); flex: none; }
.maker-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.maker-actions .button { text-align: center; }
.field-error { color: #c42828; font-weight: 700; margin: 0; }
.field-error:empty { display: none; }
.maker-preview { margin: 0; }
.maker-preview canvas {
  display: block; width: 100%; max-width: 100%; height: auto; background: #ffe45c;
  box-shadow: var(--edge-glow), 6px 6px 0 rgba(0, 0, 0, 0.25);
}
.maker-preview figcaption { margin: 10px 0 0; color: var(--ink-soft); font-size: 0.85rem; }
.app-pitch { margin-top: 36px; }
.app-pitch p { margin: 0 0 16px; max-width: 40em; }
@media (prefers-reduced-motion: reduce) {
  .card-maker .button { transition: none; }
  .club-step .button { transition: none; }
}