/*
 * The voice product only. Shared furniture — tokens, type, tabs, swatches, pills, the unit
 * switch, the toast, the size chips — is in shell.css.
 *
 * Two things here are the product: the record button, and the write-on reveal.
 */
.voiceposter {
  position: relative; overflow: hidden; background: var(--paper, #FBF3E4);
  aspect-ratio: var(--poster-aspect, 7 / 5);
  box-shadow: 0 2px 4px rgba(42, 42, 40, .07), 0 22px 50px -24px rgba(42, 42, 40, .42);
  margin-inline: auto;
}
@media (min-width: 900px) {
  .voiceposter { width: min(100%, calc(74vh * var(--poster-wh, 1.4))); }
}
.voiceposter img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }

/*
 * The write-on.
 *
 * A copy of the finished poster, clipped from the left, with the clip travelling across the
 * span the stroke occupies. `--sweep` is a percentage of the POSTER, and the server supplies
 * the two ends of it, so the mask and the mark cannot disagree about where the stroke starts.
 */
.reveal { position: absolute; inset: 0; pointer-events: none; }
.reveal img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill;
  /* everything right of the sweep is still bare paper: the mark has not been made yet */
  clip-path: inset(0 calc(100% - var(--sweep, 0%)) 0 0);
}
/* the nib: a small dark bead riding the leading edge, which is what sells it as drawing */
.reveal-nib {
  position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%; background: var(--ink); opacity: .82;
  box-shadow: 0 0 0 3px rgba(207, 69, 58, .22);
}

.poster-busy {
  height: 3px; margin-top: 3px; border-radius: 2px; background: var(--tomato);
  transform-origin: left; animation: voicebusy 900ms ease-in-out infinite;
}
@keyframes voicebusy {
  0% { transform: scaleX(0); } 60% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; }
}
.poster-error {
  margin: var(--s3) 0 0; padding: 10px 12px; font-size: 14px;
  background: var(--butter); color: var(--ink); border-radius: var(--r-chip);
}

/* ── the record button ───────────────────────────────────────────────────── */
/* One big thing to press, in the studio's voice. It is the whole of the first tab. */
.recordbtn {
  display: flex; align-items: center; justify-content: center; gap: var(--s3);
  width: 100%; padding: 22px 28px; border: 0; border-radius: var(--r-pill);
  background: var(--forest); color: var(--sheet); cursor: pointer;
  font: inherit; font-size: 19px; font-weight: 600; letter-spacing: 0.01em;
  transition: background-color 140ms ease;
}
.recordbtn:hover { background: var(--forest-2); }
.recordbtn[disabled] { opacity: .5; cursor: not-allowed; }
.recordbtn-dot {
  width: 13px; height: 13px; border-radius: 50%; background: var(--tomato); flex: 0 0 auto;
}
.recordbtn.on { background: var(--tomato); }
.recordbtn.on:hover { background: #B93A30; }
.recordbtn.on .recordbtn-dot { background: var(--sheet); animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.recordbtn-time { font-variant-numeric: tabular-nums; opacity: .85; font-size: 16px; }

.ghostbtn.wide { display: block; width: 100%; padding: 12px 16px; }

/* ── the trim ────────────────────────────────────────────────────────────── */
.wave {
  position: relative; height: 96px; margin-top: var(--s2);
  background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-input);
  overflow: hidden; touch-action: none;
}
.wave canvas { display: block; width: 100%; height: 100%; }
/* the parts outside the kept region are dimmed by a pair of shades, not by redrawing */
.wave::before, .wave::after {
  content: ''; position: absolute; top: 0; bottom: 0; background: rgba(251, 243, 228, .62);
  pointer-events: none;
}
.wave::before { left: 0; width: var(--in, 0%); }
.wave::after { left: var(--out, 100%); right: 0; }

.handle {
  position: absolute; top: 0; bottom: 0; width: 14px; margin-left: -7px;
  cursor: ew-resize; touch-action: none;
}
.handle::before {
  content: ''; position: absolute; left: 6px; top: 0; bottom: 0; width: 2px; background: var(--forest);
}
.handle::after {
  content: ''; position: absolute; left: 1px; top: 50%; margin-top: -11px;
  width: 12px; height: 22px; border-radius: 4px; background: var(--forest);
}
.handle:focus-visible { outline: 2px solid var(--tomato); outline-offset: 1px; }

.playhead {
  position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px;
  background: var(--tomato); pointer-events: none;
}
.trimrow { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s3); flex-wrap: wrap; }
.trimrow .hint { margin: 0; }

/* the voice posters are wide, so their swatches are too */
.wide-swatches { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 620px) { .wide-swatches { grid-template-columns: repeat(3, 1fr); } }
.wide-swatches .swatch img { aspect-ratio: 7 / 5; }

.toggle { display: flex; align-items: center; gap: var(--s3); cursor: pointer; font-size: 15px; }
.toggle input { accent-color: var(--tomato); width: 18px; height: 18px; margin: 0; }

.note { display: flex; gap: var(--s2); align-items: flex-start; }
.i {
  flex: 0 0 auto; display: grid; place-items: center; width: 15px; height: 15px; margin-top: 2px;
  border: 1px solid currentColor; border-radius: 50%;
  font-size: 10px; font-weight: 700; font-style: italic; line-height: 1;
}
.tag {
  display: inline-block; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--tomato); color: var(--sheet); border-radius: var(--r-pill);
  padding: 1px 6px; margin-left: 4px; vertical-align: 1px;
}

@media (prefers-reduced-motion: reduce) {
  /* no write-on, no pulse: the poster is simply there */
  .reveal { display: none; }
  .recordbtn.on .recordbtn-dot { animation: none; }
}

/* ── below the buy area: the playable poster ──────────────────────────────── */
/*
 * Three sections that have to read as three, before anybody reads a heading.
 *
 * Every device here is one the site already owns, and none of them is ornament:
 *
 *   a rule and a step in the spacing scale   marks where the explanation starts, exactly
 *                                            the way `.foot` marks where the footer starts
 *   a full-bleed --sheet-2 band              gives the middle section its own ground, so
 *                                            the eye registers a boundary without reading
 *   a --sheet-2 well                         `.controls` and `.step` are both this already
 *   an image on its own colour tile          landing.css states this as the house rule;
 *                                            a line drawing loose on cream is the thing it
 *                                            was written against
 *
 * The rhythm alternates: cream, band, cream. Two bands in a row would undo it.
 */

/*
 * Where the page stops selling and starts explaining. The product area ends, a hairline
 * and a full step of the scale follow, and everything below is a different kind of reading.
 */
.vx-below {
  margin-top: var(--s12);
  padding-top: var(--s8);
  border-top: 1px solid var(--rule);
}
@media (min-width: 760px) { .vx-below { margin-top: 72px; } }

.vx { margin-top: var(--s12); }
@media (min-width: 760px) { .vx { margin-top: 72px; } }
.vx:first-child { margin-top: 0; }

/* the middle section gets its own ground, breaking out of the sheet's padding to find it */
.vx-band {
  margin-inline: calc(var(--s4) * -1);
  padding: var(--s8) var(--s4);
  background: var(--sheet-2);
}
@media (min-width: 900px) {
  .vx-band { margin-inline: calc(var(--s8) * -1); padding: var(--s12) var(--s8); }
}
.vx-band-inner { max-width: 1000px; margin-inline: auto; }

.vx-split { display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 880px) {
  .vx-split { grid-template-columns: 1.1fr 0.9fr; gap: var(--s12); }
  .vx-split-wide { grid-template-columns: 1fr 0.72fr; align-items: center; }
}
.vx-split > * { min-width: 0; }

.vx-copy { margin: 0; font-size: 16px; line-height: 1.7; max-width: 52ch; color: var(--ink); }
@media (min-width: 760px) { .vx-copy { font-size: 17px; } }

/*
 * The drawings, SEATED. Each one sits on its own tile with its own radius and its own air,
 * which is what turns a line drawing from something floating in leftover space into a
 * plate that was placed there. On cream the tile is --sheet-2; inside the band it is
 * --sheet, so the figure is always the lighter shape of the two.
 */
.vx-figure {
  display: grid; place-items: center;
  background: var(--sheet-2); border-radius: var(--r-panel);
  padding: var(--s6); color: var(--ink);
}
@media (min-width: 880px) { .vx-figure { padding: var(--s8); } }
.vx-band .vx-figure { background: var(--sheet); }
.vx-art { width: 100%; max-width: 300px; height: auto; display: block; }

.vx-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--s6);
}
@media (min-width: 560px) {
  .vx-steps { grid-template-columns: repeat(3, 1fr); gap: var(--s4); grid-template-rows: auto auto auto; }
  .vx-step { grid-row: span 3; grid-template-rows: subgrid; }
}
@media (min-width: 880px) { .vx-steps { gap: var(--s6); } }
.vx-steps > * { min-width: 0; }

.vx-step { display: grid; gap: var(--s2); align-content: start; }
.vx-n {
  margin: 0; font-family: 'Fraunces', Georgia, serif; font-size: 13px; font-weight: 600;
  letter-spacing: 0.14em; color: var(--tomato); font-variant-numeric: tabular-nums;
}
.vx-h { margin: 0; font-size: 17px; line-height: 1.25; align-self: start; }
.vx-p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.6; }

/* the heading wants air under it, the way the home page's steps do */
.vx .section-title { margin-bottom: var(--s6); }
.vx-lede .section-title { margin-bottom: var(--s4); }

/* the questions sit in a narrower measure than the page: a read, not a wall */
.vx-faq { max-width: 760px; }