/* Action - editorial pages (privacy, support). Self-contained, system fonts. */

/* Brand palette taken from the Action app icon: deep navy base, record-red dot,
   silver/white panels. */
:root {
  --paper: #f5f7fa;
  --ink: #0f1a2e;
  --ink-soft: #5b6678;
  --rule: #e0e5ee;
  --accent: #f5184a;
  --card: #ecf0f6;
  --measure: 42rem;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: ui-sans-serif, -apple-system, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --heading: "Afacad", ui-sans-serif, -apple-system, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0b1322;
    --ink: #e9eef6;
    --ink-soft: #97a3b7;
    --rule: #1e293b;
    --accent: #ff5d79;
    --card: #121d31;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--paper);
  /* A faint paper-grain dot texture plus a few soft color washes, fixed to
     the viewport so the whole site reads as sitting on a quietly alive
     surface rather than flat, printer-paper color, without competing with
     any of the page's own content or the bar's glow. */
  background-image:
    radial-gradient(circle at 1px 1px, rgba(15, 26, 46, 0.05) 1px, transparent 0),
    radial-gradient(ellipse 60% 50% at 10% -8%, rgba(245, 24, 74, 0.07), transparent 62%),
    radial-gradient(ellipse 55% 45% at 108% 20%, rgba(15, 26, 46, 0.05), transparent 60%),
    radial-gradient(ellipse 55% 45% at 30% 108%, rgba(245, 24, 74, 0.05), transparent 62%);
  background-size: 24px 24px, auto, auto, auto;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.72;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-color-scheme: dark) {
  body {
    background-image:
      radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, transparent 0),
      radial-gradient(ellipse 60% 50% at 10% -8%, rgba(255, 93, 121, 0.09), transparent 62%),
      radial-gradient(ellipse 55% 45% at 108% 20%, rgba(255, 255, 255, 0.035), transparent 60%),
      radial-gradient(ellipse 55% 45% at 30% 108%, rgba(255, 93, 121, 0.07), transparent 62%);
  }
}

@media (prefers-reduced-motion: reduce), (max-width: 640px) {
  body { background-attachment: scroll; }
}

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 6rem) clamp(1.25rem, 5vw, 2rem) 4rem;
}

/* Masthead */
.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1.25rem;
  margin-bottom: 2.75rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 1.05rem;
  color: var(--ink);
  text-decoration: none;
}

.brand-icon {
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 23%;
  display: block;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

.brand .dot { color: var(--accent); }

.masthead nav a {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  text-decoration: none;
  margin-left: 1.4rem;
}

.masthead nav a:hover { color: var(--accent); }

/* Title block */
.kicker {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--accent);
  margin: 0 0 1rem;
}

h1 {
  font-family: var(--heading);
  font-size: clamp(2.4rem, 7vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  font-weight: 700;
  margin: 0 0 1.25rem;
}

.lede {
  font-size: clamp(1.2rem, 2.6vw, 1.45rem);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 2.5rem;
}

.dateline {
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 2.75rem;
}

/* Sections */
h2 {
  font-size: 1.05rem;
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 3rem 0 0.4rem;
  color: var(--ink);
}

h2 .num {
  color: var(--accent);
  margin-right: 0.6rem;
  font-variant-numeric: tabular-nums;
}

h3 {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
  margin: 1.6rem 0 0.3rem;
}

p { margin: 0.7rem 0; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }

strong { font-weight: 700; }

ul, ol { margin: 0.7rem 0; padding-left: 1.3rem; }
li { margin: 0.35rem 0; padding-left: 0.2rem; }
li::marker { color: var(--accent); }

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 3rem 0;
}

/* Callout card (the short version / contact) */
.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 1.5rem 1.6rem;
  margin: 2rem 0;
}

.card h2 { margin-top: 0; }

.card.tight p:last-child { margin-bottom: 0; }

.tag {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  margin-bottom: 0.9rem;
}

/* Definition list for permissions / shortcuts */
.deflist { margin: 1rem 0; }
.deflist div {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 0.4rem 1.4rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 0.97rem;
  line-height: 1.5;
}
.deflist div:last-child { border-bottom: 1px solid var(--rule); }
.deflist dt { font-weight: 700; }
.deflist dd { margin: 0; color: var(--ink-soft); }

@media (max-width: 33rem) {
  .deflist div { grid-template-columns: 1fr; gap: 0.1rem; }
}

kbd {
  font-family: var(--sans);
  font-size: 0.85em;
  background: var(--card);
  border: 1px solid var(--rule);
  border-bottom-width: 2px;
  border-radius: 6px;
  padding: 0.1rem 0.45rem;
  white-space: nowrap;
}

/* Footer */
footer {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  justify-content: space-between;
}

footer a { color: var(--ink-soft); }
footer a:hover { color: var(--accent); }

/* ---------------------------------------------------------------------------
   Landing page (index.html) - scroll story. Stays within the same narrow
   measure as the rest of the site.
   --------------------------------------------------------------------------- */

/* Scroll progress bar */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--accent), #ff8aa0);
  z-index: 50;
}

/* Hero */
.hero { padding: 1rem 0 1.5rem; }

.hero-icon {
  width: 84px;
  height: 84px;
  border-radius: 23%;
  display: block;
  margin-bottom: 1.6rem;
  box-shadow: 0 10px 30px rgba(15, 26, 46, 0.22);
}

.hero h1 {
  font-size: clamp(2.7rem, 9vw, 4.3rem);
  margin-bottom: 1.1rem;
}

.hero .lede { margin-bottom: 2rem; }

/* Faux floating control bar, echoing the app */
.barmock {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #14203a;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  padding: 0.6rem 0.7rem;
  box-shadow: 0 12px 34px rgba(15, 26, 46, 0.28);
  width: fit-content;
  max-width: 100%;
  flex-wrap: wrap;
}

.barmock .b {
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  background: #243352;
  flex: none;
}

.barmock .b.lit { background: #33456b; }

.barmock .rec {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--accent);
  color: #fff;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  padding: 0.4rem 0.85rem 0.4rem 0.7rem;
  border-radius: 999px;
  margin-left: 0.3rem;
}

.barmock .rec .dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #fff;
}

/* Coming soon page - a holding page shown at "/" while the full marketing
   scrollytelling page (kept at preview.html) waits for launch. Carries the
   same brand energy as the full site: the HUD bar itself, a breathing glow,
   and a staggered entrance rather than a static wall of text. */
main.soon {
  position: relative;
  padding: clamp(3rem, 9vw, 6rem) 0 3.5rem;
  max-width: 36rem;
  margin: 0 auto;
  text-align: center;
}
main.soon .soon-status {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.42rem 0.95rem 0.42rem 0.75rem;
  margin: 0 0 1.5rem;
}
.soon-status-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
  animation: recpulse 1.6s ease-in-out infinite;
}
main.soon .kicker { margin-bottom: 1rem; }
main.soon h1 {
  font-size: clamp(2.6rem, 8vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  font-weight: 600;
  margin: 0 0 1.1rem;
}
main.soon .lede {
  font-size: clamp(1.18rem, 2.5vw, 1.4rem);
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 0.4rem;
}

/* A working-scale taste of the bar itself - same markup and glow treatment
   as the full site's hero, just without the scroll-driven state changes.
   Kept inside the normal column (rather than breaking out to the viewport
   edge) and centered on the same axis as the rest of the page's content,
   so it reads as part of one consistent, centered layout. */
.soon-bar {
  position: relative;
  display: flex;
  justify-content: center;
  margin: 2.4rem 0 2.6rem;
}
.soon-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20rem;
  height: 20rem;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(245, 24, 74, 0.16), rgba(245, 24, 74, 0.04) 42%, transparent 68%);
  filter: blur(10px);
  animation: glowbreathe 7s ease-in-out infinite;
  z-index: -1;
  pointer-events: none;
}
@media (prefers-color-scheme: dark) {
  .soon-glow { background: radial-gradient(circle, rgba(255, 93, 121, 0.22), rgba(255, 93, 121, 0.06) 42%, transparent 68%); }
}

/* A quick staggered rise for every block down the page, so it reads as a
   reveal rather than a flat, static wall of text on load. */
@keyframes soonRise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
main.soon > * { animation: soonRise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
main.soon .soon-status { animation-delay: 0s; }
main.soon .kicker { animation-delay: 0.06s; }
main.soon h1 { animation-delay: 0.12s; }
main.soon .lede { animation-delay: 0.2s; }
main.soon .soon-bar { animation-delay: 0.3s; }
main.soon .notify { animation-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  main.soon > * { animation: none; }
  .soon-status-dot, .soon-glow { animation: none; }
}

.notify { max-width: 27rem; margin: 0 auto; text-align: left; }
.notify-label {
  display: block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.7rem;
}
.notify-row {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.notify-row input {
  flex: 1 1 14rem;
  min-width: 0;
  font-family: var(--sans);
  font-size: 0.98rem;
  padding: 0.75rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--card);
  color: var(--ink);
}
.notify-row input::placeholder { color: var(--ink-soft); }
.notify-row input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.notify-row button {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.92rem;
  border: none;
  border-radius: 999px;
  padding: 0.75rem 1.5rem;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  flex: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.notify-row button:hover { opacity: 0.9; }
.notify-row button:active { transform: scale(0.97); }
.notify-hint {
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin: 0.85rem 0 0;
}

/* Mac App Store download badge - a fixed black pill that stays consistent
   across light and dark mode, matching Apple's own badge convention. */
.appstore-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: #000;
  color: #fff;
  border-radius: 11px;
  padding: 0.55rem 1.1rem 0.55rem 0.85rem;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(15, 26, 46, 0.24);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  margin-top: 0.6rem;
}
.appstore-badge:hover { transform: translateY(-1px); box-shadow: 0 14px 32px rgba(15, 26, 46, 0.3); }
.appstore-badge-icon { width: 1.55rem; height: 1.55rem; flex: none; }
.appstore-badge-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  font-family: var(--sans);
}
.appstore-badge-text small { font-size: 0.6rem; letter-spacing: 0.03em; opacity: 0.85; }
.appstore-badge-text strong { font-size: 1.02rem; font-weight: 600; letter-spacing: 0.005em; }

/* Story */
.story { margin-top: 1rem; }

.step {
  padding: 3.25rem 0;
  border-top: 1px solid var(--rule);
}

.step .step-num {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  color: var(--accent);
  display: block;
  margin-bottom: 0.6rem;
}

.step h2 {
  text-transform: none;
  font-family: var(--heading);
  font-size: clamp(1.7rem, 4.5vw, 2.3rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 0.7rem;
}

.step p { color: var(--ink-soft); font-size: 1.12rem; }

/* Chips */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.2rem;
}

.chip {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
}

.chip.accent {
  color: #fff;
  background: var(--accent);
  border-color: transparent;
}

/* Mode preview tiles (teleprompter) */
.tiles { display: flex; gap: 0.7rem; margin-top: 1.3rem; flex-wrap: wrap; }
.tile {
  flex: 1 1 7rem;
  min-width: 6.5rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 0.9rem;
}
.tile .ln { height: 0.34rem; border-radius: 999px; background: var(--ink-soft); opacity: 0.55; margin: 0.32rem 0; }
.tile .ln.s { width: 60%; }
.tile .ln.a { background: var(--accent); opacity: 0.9; width: 80%; }
.tile .cap {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink);
  margin-top: 0.7rem;
}

/* Closing CTA */
.cta {
  margin-top: 3.5rem;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 2.6rem 1.6rem;
}
.cta h2 {
  text-transform: none;
  font-family: var(--heading);
  font-weight: 700;
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  margin: 0 0 0.6rem;
}
.cta p { color: var(--ink-soft); margin: 0 auto 1.4rem; }
.cta-links { display: inline-flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center; }
.btn {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
  border-radius: 999px;
  padding: 0.7rem 1.4rem;
  display: inline-block;
}
.btn.primary { background: var(--accent); color: #fff; }
.btn.ghost { color: var(--ink); border: 1px solid var(--rule); background: transparent; }
.btn:hover { opacity: 0.9; }

/* Post-recording section - the review screen that opens the moment you stop,
   shown as its own hero feature (breaking out past the narrow text column,
   the same way the bar itself is allowed to run wider than the copy above
   it) rather than a small card folded in beside the text. */
.postrecord {
  margin-top: 5rem;
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}
.postrecord-copy { max-width: 34rem; }
.postrecord-copy .step-num {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  color: var(--accent);
  display: block;
  margin-bottom: 0.55rem;
}
.postrecord-copy h2 {
  text-transform: none;
  font-family: var(--heading);
  font-size: clamp(1.7rem, 4.6vw, 2.3rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 0.7rem;
}
.postrecord-copy p { color: var(--ink-soft); font-size: 1.12rem; margin: 0; }

/* Breaks out to near full viewport width, centered, independent of the
   narrow measure the rest of the page reads at - the same treatment given
   to the hero bar so this reads as an equally important feature rather
   than an afterthought. */
.postrecord-mock {
  margin-left: 50%;
  transform: translateX(-50%);
  width: min(94vw, 62rem);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(20, 28, 45, 0.2);
}

/* A window titlebar, so the mock reads unmistakably as a screenshot of the
   app's own window rather than a generic illustrative card. Sized and
   spaced to match real macOS traffic lights rather than an approximation. */
.pr-chrome {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0 0.7rem 0.9rem;
  background: rgba(20, 28, 45, 0.03);
  border-bottom: 1px solid var(--rule);
}
@media (prefers-color-scheme: dark) {
  .pr-chrome { background: rgba(255, 255, 255, 0.03); }
}
.pr-dot { width: 0.68rem; height: 0.68rem; border-radius: 50%; flex: none; }
.pr-dot.red { background: #ff5f57; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.15); }
.pr-dot.yellow { background: #febc2e; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.15); }
.pr-dot.green { background: #28c840; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.15); }

.pr-body { padding: clamp(1rem, 2.2vw, 1.8rem); }

/* Modeled on the app's own post-record review screen: a captured desktop
   (menu bar, a window, the Dock) with the camera bubble in the corner, the
   saved filename, and the row of black glass action pills (Play, Trim,
   Music, Volume, Reveal + Delete, Close) exactly as they appear after you
   hit Stop. Built from flat shapes rather than a plain gradient so it reads
   as an actual captured screen instead of an abstract placeholder. */
.pr-video {
  position: relative;
  aspect-ratio: 20 / 9;
  border-radius: 8px;
  background: #3a3e46;
  overflow: hidden;
}
.pr-menubar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8%;
  background: rgba(255, 255, 255, 0.16);
}
.pr-win {
  position: absolute;
  top: 20%;
  left: 8%;
  width: 44%;
  padding: 0.55rem 0.7rem 0.7rem;
  border-radius: 7px;
  background: rgba(246, 247, 250, 0.96);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3);
}
.pr-win-dots { display: flex; gap: 0.22rem; margin-bottom: 0.5rem; }
.pr-win-dots span { width: 0.32rem; height: 0.32rem; border-radius: 50%; background: rgba(20, 28, 45, 0.22); display: block; }
.pr-win-ln { display: block; height: 0.28rem; border-radius: 999px; background: rgba(20, 28, 45, 0.16); margin-top: 0.4rem; }
.pr-win-ln.short { width: 62%; }
.pr-dock {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.3rem;
  padding: 0.28rem 0.4rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.14);
}
.pr-dock-icon { width: 0.6rem; height: 0.6rem; border-radius: 4px; background: rgba(255, 255, 255, 0.6); flex: none; }
.pr-dock-icon:nth-child(2) { background: var(--accent); }
.pr-dock-icon:nth-child(3) { background: #febc2e; }
.pr-dock-icon:nth-child(4) { background: #28c840; }

.pr-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 1.1rem 0.1rem 1rem;
}
.pr-name { font-family: var(--sans); font-weight: 700; font-size: 0.95rem; color: var(--ink); }
.pr-saved { font-family: var(--sans); font-size: 0.8rem; color: var(--ink-soft); }

.pr-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.pr-actions::-webkit-scrollbar { display: none; }
.pr-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  height: 2.5rem;
  width: 2.5rem;
  padding: 0;
  border-radius: 999px;
  background: #000;
  color: #fff;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.86rem;
  flex: none;
}
.pr-pill.wide { width: auto; padding: 0 0.95rem; }
.pr-pill svg { width: 1.05rem; height: 1.05rem; flex: none; }

@media (max-width: 640px) {
  .postrecord { margin-top: 3.5rem; }
  .pr-actions { gap: 0.35rem; }
  .pr-pill { height: 2.15rem; width: 2.15rem; font-size: 0.76rem; }
  .pr-pill.wide { padding: 0 0.7rem; }
  .pr-pill svg { width: 0.92rem; height: 0.92rem; }
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------------------------------------------------------------------------
   Scrollytelling - a pinned HUD that stays while chapters scroll past and the
   bar morphs through each state. Recreated from the Figma HUD frame.
   --------------------------------------------------------------------------- */

.scrolly { position: relative; margin-top: 2rem; }

/* Full-height sticky stage. Chapters scroll over it; the bar rests in the
   lower-middle so each chapter's text reads in the space above it. */
.stage {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 52vh;
  pointer-events: none;
}

/* A soft, slowly breathing wash of color behind the HUD so it reads as the
   hero of the page rather than a small widget floating on flat paper. Capped
   at 96vw (never wider than the viewport) so it can't force horizontal
   scrolling on narrow phones - the bar itself is intentionally allowed to
   stay wider than the text column above it, so the stage itself keeps
   overflow visible. */
.stage-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(64rem, 96vw);
  height: min(64rem, 96vw);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(245, 24, 74, 0.16), rgba(245, 24, 74, 0.05) 42%, transparent 68%);
  filter: blur(10px);
  animation: glowbreathe 7s ease-in-out infinite;
  z-index: -1;
  pointer-events: none;
}

@media (prefers-color-scheme: dark) {
  .stage-glow { background: radial-gradient(circle, rgba(255, 93, 121, 0.22), rgba(255, 93, 121, 0.07) 42%, transparent 68%); }
}

@keyframes glowbreathe {
  0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(0.96); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
}

/* Bar + Record sit side by side; Record is its own pill outside the bar. */
.rig {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  max-width: 96vw;
  animation: rigintro 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes rigintro {
  from { opacity: 0; transform: translateY(18px) scale(0.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Once the entrance settles, a slow, continuous bob keeps the bar reading as
   alive rather than a static screenshot underneath the swapping icons. */
.rig.floaty {
  animation: rigfloat 6s ease-in-out infinite;
}

@keyframes rigfloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

/* A quick springy bounce plays on the bar itself every time the chapter
   changes, underlining the moment a new tool switches on. */
.rig.pulse .hud,
.rig.pulse .hud-rec {
  animation: barpulse 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes barpulse {
  0% { transform: scale(1); }
  45% { transform: scale(1.045); }
  100% { transform: scale(1); }
}

/* Feature callout - a small pill that floats above the bar and points at
   whichever tool is lighting up, naming the feature out loud. */
.callout {
  position: absolute;
  bottom: 100%;
  margin-bottom: 16px;
  transform: translateX(-50%) translateY(6px) scale(0.92);
  background: #0f1a2e;
  color: #fff;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 10px 24px rgba(15, 26, 46, 0.28);
  transition: opacity 0.35s ease, transform 0.35s ease, left 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.callout::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 9px;
  height: 9px;
  background: #0f1a2e;
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
  border-radius: 2px;
}
.callout.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

@media (prefers-color-scheme: dark) {
  .callout, .callout::after { background: #f5184a; }
}

/* The HUD bar - frosted white capsule, matching the app's glass material.
   Sizes scale gently with the viewport (via clamp) so it stays a compact,
   true-to-scale control rather than an oversized hero graphic. */
.hud {
  display: inline-flex;
  align-items: center;
  gap: clamp(3px, 0.3vw, 5px);
  padding: clamp(5px, 0.45vw, 8px) clamp(7px, 0.65vw, 11px);
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 20px 50px rgba(20, 28, 45, 0.22), 0 3px 10px rgba(20, 28, 45, 0.1);
  -webkit-backdrop-filter: blur(26px) saturate(170%);
  backdrop-filter: blur(26px) saturate(170%);
}

.hud-icon {
  width: clamp(30px, 2.3vw, 38px);
  height: clamp(30px, 2.3vw, 38px);
  border-radius: 8px;
  flex: none;
  margin: 0 3px;
}

.hud-sep {
  width: 1px;
  height: clamp(23px, 1.9vw, 30px);
  background: rgba(0, 0, 0, 0.12);
  flex: none;
  margin: 0 4px;
}

.hud-spacer { width: 2px; }

/* Icon buttons - the SVG carries its own look (resting glyph, or a black
   circle with a white glyph when selected). */
.hbtn {
  width: clamp(34px, 2.6vw, 44px);
  height: clamp(34px, 2.6vw, 44px);
  border: none;
  background: none;
  padding: 0;
  flex: none;
  display: grid;
  place-items: center;
  transition: opacity 0.4s ease, transform 0.4s ease, filter 0.4s ease;
}
.hbtn img { width: 100%; height: 100%; display: block; }

/* A soft accent glow behind whichever tool is switched on for the current
   chapter, so the highlight reads clearly rather than relying on the small
   black-circle glyph alone. A quick pop plays the moment it switches on. */
.hbtn.on {
  filter: drop-shadow(0 3px 5px rgba(245, 24, 74, 0.4)) drop-shadow(0 0 16px rgba(245, 24, 74, 0.35));
  transform: translateY(-2px);
  animation: hbtnpop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes hbtnpop {
  0% { transform: translateY(-2px) scale(0.82); }
  60% { transform: translateY(-2px) scale(1.14); }
  100% { transform: translateY(-2px) scale(1); }
}

/* Record pill (black), standalone */
.hud-rec {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #000;
  color: #fff;
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(0.86rem, 0.75vw, 1.02rem);
  padding: clamp(0.5rem, 0.55vw, 0.66rem) clamp(1.05rem, 1.05vw, 1.3rem) clamp(0.5rem, 0.55vw, 0.66rem) clamp(0.78rem, 0.78vw, 0.98rem);
  border-radius: 999px;
  flex: none;
  box-shadow: 0 20px 50px rgba(20, 28, 45, 0.22), 0 3px 10px rgba(20, 28, 45, 0.12);
  transition: opacity 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
}
.hud-rec .dot {
  width: 0.92rem;
  height: 0.92rem;
  border-radius: 50%;
  border: 2.2px solid #fff;
  position: relative;
  flex: none;
}
.hud-rec .dot::after {
  content: "";
  position: absolute;
  inset: 2.5px;
  border-radius: 50%;
  background: #fff;
}

/* Recording state: dim the tools, press the record button */
.rig[data-state="recording"] .hbtn { opacity: 0.35; }
.rig[data-state="recording"] .hud-rec { transform: scale(0.96); box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.12), 0 20px 50px rgba(20, 28, 45, 0.22); }
.rig[data-state="recording"] .hud-rec .dot { animation: recpulse 1.4s ease-in-out infinite; }

@keyframes recpulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* Pop-out panel below the bar - frosted to match the bar */
.hud-panel {
  margin-top: 0.9rem;
  width: min(23rem, 92vw);
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(20, 28, 45, 0.18);
  -webkit-backdrop-filter: blur(26px) saturate(170%);
  backdrop-filter: blur(26px) saturate(170%);
  opacity: 0;
  transform: translateY(-8px) scale(0.97);
  transform-origin: top center;
  max-height: 0;
  overflow: hidden;
  padding: 0 1.15rem;
  transition: opacity 0.45s ease, transform 0.45s ease, max-height 0.45s ease, padding 0.45s ease;
}
.hud-panel.show {
  opacity: 1;
  transform: none;
  max-height: 14rem;
  padding: 1.05rem 1.15rem;
}
.hud-panel .ph {
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 0.6rem;
}
.hud-panel .pln {
  height: 0.45rem;
  border-radius: 999px;
  background: rgba(20, 28, 45, 0.16);
  margin: 0.42rem 0;
}
.hud-panel .pln.s { width: 55%; }
.hud-panel .pln.cur { background: var(--accent); opacity: 0.9; }

/* Talking points list inside the panel */
.tp { list-style: none; margin: 0; padding: 0; }
.tp li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--sans);
  font-size: 0.92rem;
  color: var(--ink-soft);
  padding: 0.28rem 0;
}
.tp .box {
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 5px;
  border: 1.5px solid rgba(20, 28, 45, 0.28);
  flex: none;
  display: grid;
  place-items: center;
  transition: background 0.4s ease, border-color 0.4s ease;
}
.tp .box svg { width: 0.7rem; height: 0.7rem; opacity: 0; transition: opacity 0.3s ease; color: #fff; }
.tp li.done { color: var(--ink); }
.tp li.done .box { background: #1db954; border-color: #1db954; }
.tp li.done .box svg { opacity: 1; }

/* Scenes (the scrolling chapters) scroll OVER the sticky stage. Their text
   sits in the upper part of the viewport, leaving the bar resting in the
   blank space below the copy. */
.scenes { position: relative; z-index: 2; margin-top: -100vh; }

/* Gives the final chapter's sticky bar room to hold still for its whole
   scroll span instead of releasing early. See the HTML comment above the
   spacer for why this is needed. */
.scene-spacer { height: 100vh; }

@media (prefers-reduced-motion: reduce) {
  .scene-spacer { display: none; }
}

.scene {
  min-height: 100vh;
  opacity: 0.32;
  transition: opacity 0.5s ease;
}
.scene.active { opacity: 1; }

/* The text itself is pinned near the top of the viewport for as long as its
   chapter is in view, instead of travelling with the scroll. This keeps it at
   a fixed, predictable distance above the HUD no matter how fast someone
   scrolls or how tall a chapter's copy is, so it can never be caught
   mid-flight behind the bar. It un-sticks naturally as the next chapter
   arrives. */
.scene-text {
  position: sticky;
  top: 9vh;
  padding: 0 0 2rem;
}

.scene .step-num {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  color: var(--accent);
  display: block;
  margin-bottom: 0.55rem;
}
.scene h2 {
  text-transform: none;
  font-family: var(--heading);
  font-size: clamp(1.7rem, 4.6vw, 2.3rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 0.7rem;
}
.scene p { color: var(--ink-soft); font-size: 1.12rem; margin: 0; }

/* The first chapter doubles as the hero: big title with the bar resting below.
   It starts active in the markup (so it looks right before JS runs), but must
   still be allowed to fade out like every other chapter once you scroll past
   it - otherwise it stays glued at full strength and visibly collides with
   whichever chapter comes next. */
.hero-scene .kicker { margin: 0 0 1rem; }
.hero-scene h1 {
  font-size: clamp(2.6rem, 8vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  font-weight: 600;
  margin: 0 0 1.1rem;
}
.hero-scene .lede {
  font-size: clamp(1.18rem, 2.5vw, 1.4rem);
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 1.4rem;
}
.hero-scene .appstore-badge { margin-top: 0.4rem; }

@media (prefers-reduced-motion: reduce) {
  .stage { position: static; height: auto; padding-top: 0; }
  .scenes { margin-top: 0; }
  .hud *, .hud-panel, .hbtn, .tp .box, .tp .box svg, .callout { transition: none; }
  .scene { opacity: 1; min-height: auto; }
  .scene-text { position: static; padding: 3vh 0; }
  .hud-rec .dot { animation: none; }
  .rig, .rig.floaty, .rig.pulse .hud, .rig.pulse .hud-rec, .hbtn.on { animation: none; }
  .stage-glow { animation: none; opacity: 0.85; }
}

/* Key phrases called out within the chapter copy - a deliberate, sparing
   highlight rather than a full-sentence bold. */
.scene-text strong {
  color: var(--ink);
  font-weight: 700;
}

/* Mid sizes - shrink the hero bar so it stays on one line within the page. */
@media (max-width: 880px) {
  .hbtn, .hbtn img { width: 30px; height: 30px; }
  .hud-icon { width: 26px; height: 26px; margin: 0 3px; }
  .hud { gap: 3px; padding: 4px 6px; }
  .hud-sep { height: 22px; margin: 0 3px; }
  .hud-rec { font-size: 0.8rem; padding: 0.46rem 0.95rem 0.46rem 0.72rem; }
  .hud-rec .dot { width: 0.85rem; height: 0.85rem; }
  .stage { padding-top: 52vh; }
}

@media (max-width: 640px) {
  .rig { gap: 0.4rem; }
  .hbtn, .hbtn img { width: 26px; height: 26px; }
  .hud-icon { width: 22px; height: 22px; margin: 0 2px; }
  .hud { gap: 1px; padding: 3px 4px; }
  .hud-sep { height: 19px; margin: 0 2px; }
  .hud-rec { font-size: 0.7rem; padding: 0.36rem 0.68rem 0.36rem 0.52rem; }
  .hud-rec .dot { width: 0.72rem; height: 0.72rem; }
}

@media (max-width: 460px) {
  .rig { gap: 0.26rem; max-width: 98vw; }
  .hbtn, .hbtn img { width: 21px; height: 21px; }
  .hud-icon { width: 18px; height: 18px; margin: 0 1px; }
  .hud { gap: 0px; padding: 3px; }
  .hud-sep { margin: 0 1px; }
  .hud-rec .dot { width: 0.64rem; height: 0.64rem; }
  .hud-rec { font-size: 0.62rem; padding: 0.32rem 0.52rem 0.32rem 0.44rem; gap: 0.32rem; }
}

@media (max-width: 400px) {
  .hbtn, .hbtn img { width: 19px; height: 19px; }
  .hud-icon { width: 16px; height: 16px; }
  .hud-sep { height: 16px; }
}