/* ==========================================================================
   Banora — Design System
   ========================================================================== */

:root {
  --cream: #F4ECD8;
  --cream-soft: #EDE3CC;
  --cream-dim: rgba(21, 8, 41, 0.03);
  --aubergine: #150829;
  --aubergine-2: #1F0D38;
  --violet: #4D2BA8;
  --violet-light: #B89BE8;
  --violet-mid: #7A5DC9;
  --blue: #5BA3D8;
  --coral: #D85A30;
  --pink: #FF5C8A;
  --peach-1: #F4D5BA;
  --peach-2: #F0C9A8;
  --peach-text: #5A2410;

  --text: #150829;
  --text-60: rgba(21, 8, 41, 0.6);
  --text-55: rgba(21, 8, 41, 0.55);
  --text-45: rgba(21, 8, 41, 0.45);
  --text-40: rgba(21, 8, 41, 0.4);
  --text-30: rgba(21, 8, 41, 0.3);
  --border: rgba(21, 8, 41, 0.08);

  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'SF Mono', ui-monospace, 'Menlo', monospace;

  --max-w: 1080px;
  --reading-w: 720px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--cream);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  min-height: 100vh;
}

img, svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ==========================================================================
   Site chrome — nav + footer (shared)
   ========================================================================== */

.site-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 40px;
  border-bottom: 1px solid var(--border);
  max-width: var(--max-w);
  margin: 0 auto;
}

.site-nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.site-nav__brand svg {
  width: 24px;
  height: 24px;
}

.site-nav__wordmark {
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--text);
}

.site-nav__links {
  display: flex;
  gap: 32px;
  align-items: center;
}

.site-nav__links a {
  font-size: 14px;
  color: var(--text-55);
  transition: color 0.15s ease;
}

.site-nav__links a:hover,
.site-nav__links a:focus-visible {
  color: var(--text);
}

.site-footer {
  padding: 40px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  max-width: var(--max-w);
  margin: 0 auto;
}

.site-footer__meta {
  color: var(--text-40);
  font-size: 13px;
}

.site-footer__links {
  display: flex;
  gap: 24px;
}

.site-footer__links a {
  color: var(--text-55);
  font-size: 13px;
  transition: color 0.15s ease;
}

.site-footer__links a:hover,
.site-footer__links a:focus-visible {
  color: var(--text);
}

/* ==========================================================================
   App Store badge
   ========================================================================== */

.appstore-badge {
  display: inline-block;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.appstore-badge:hover,
.appstore-badge:focus-visible {
  transform: translateY(-1px);
  opacity: 0.92;
}

.appstore-badge svg {
  height: 52px;
  width: auto;
}

/* ==========================================================================
   Landing page (index.html)
   ========================================================================== */

.hero {
  padding: 80px 40px 64px;
  text-align: center;
  max-width: var(--max-w);
  margin: 0 auto;
}

.hero__mark {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}

.hero__mark svg {
  width: 380px;
  height: 380px;
}

.hero__title {
  font-family: var(--font-serif);
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 400;
  letter-spacing: -0.028em;
  line-height: 1.0;
  color: var(--text);
  margin: 0 0 24px;
}

.hero__lede {
  color: var(--text-60);
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.55;
  max-width: 500px;
  margin: 0 auto 40px;
}

.hero__cta {
  display: flex;
  justify-content: center;
}

.step {
  padding: 96px 40px;
  max-width: var(--max-w);
  margin: 0 auto;
}

.step--shaded {
  background: var(--cream-dim);
  max-width: none;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.step--shaded > * {
  max-width: var(--max-w);
  margin-left: auto;
  margin-right: auto;
}

.step__head {
  text-align: center;
  margin-bottom: 56px;
}

.step__eyebrow {
  color: var(--text-45);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  margin: 0 0 14px;
}

.step__title {
  font-family: var(--font-serif);
  font-size: clamp(30px, 4.5vw, 42px);
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: 1.1;
  margin: 0;
}

.step__sub {
  color: var(--text-60);
  font-size: 15px;
  line-height: 1.6;
  max-width: 460px;
  margin: 18px auto 0;
}

/* Step 1 — recording sheet */

.recording-sheet {
  max-width: 460px;
  margin: 0 auto;
  background: linear-gradient(180deg, var(--peach-1) 0%, var(--peach-2) 100%);
  border-radius: 36px;
  padding: 32px 28px 36px;
  box-shadow: 0 30px 60px rgba(216, 90, 48, 0.18), 0 8px 16px rgba(21, 8, 41, 0.08);
}

.recording-sheet__handle {
  display: flex;
  justify-content: center;
  margin-bottom: 22px;
}

.recording-sheet__handle div {
  width: 44px;
  height: 4px;
  background: rgba(21, 8, 41, 0.15);
  border-radius: 3px;
}

.recording-sheet__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
}

.lang-pill {
  background: rgba(255, 255, 255, 0.55);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--peach-text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.lang-pill__flag {
  font-size: 14px;
  line-height: 1;
}

.timer {
  font-family: var(--font-mono);
  font-size: 17px;
  color: rgba(21, 8, 41, 0.55);
  letter-spacing: 0.06em;
  font-weight: 400;
  min-width: 60px;
  text-align: right;
}

.listening-label {
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.32em;
  color: rgba(21, 8, 41, 0.5);
  margin: 28px 0 24px;
  font-weight: 500;
}

.waveform {
  margin: 0 0 20px;
}

.waveform svg {
  width: 100%;
  height: 44px;
}

.transcript {
  min-height: 44px;
  padding: 0 4px;
  margin-bottom: 24px;
  text-align: center;
}

.transcript p {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.45;
  color: rgba(21, 8, 41, 0.7);
  font-style: italic;
}

.transcript .tw {
  display: inline-block;
}

.recording-sheet__controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.btn-cancel {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-record {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-record__inner {
  width: 22px;
  height: 22px;
  background: var(--coral);
  border-radius: 5px;
}

.step__caption {
  text-align: center;
  color: rgba(21, 8, 41, 0.5);
  font-size: 13px;
  margin: 28px 0 0;
  line-height: 1.5;
  font-style: italic;
}

/* Step 2 — category bars */

.bars {
  max-width: 640px;
  margin: 0 auto;
}

.bars__row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  justify-content: center;
  padding: 32px 16px 0;
  height: 280px;
}

.bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  position: relative;
}

.bar {
  width: 64px;
  border-radius: 14px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 10px;
  transform-origin: bottom center;
  height: var(--target-h, 200px);
}

.bar svg {
  width: 22px;
  height: 22px;
}

.bar-label {
  font-size: 11px;
  color: var(--text-55);
  font-weight: 500;
}

.bar-label--active {
  color: var(--text);
  font-weight: 600;
}

.drop-seed {
  position: absolute;
  top: 0;
  left: 50%;
  width: 12px;
  height: 12px;
  background: var(--pink);
  border-radius: 50%;
  border: 2px solid var(--cream);
  z-index: 3;
  opacity: 1;
  transform: translate(-50%, 0);
}

.drop-seed.pending {
  opacity: 0;
  transform: translate(-50%, -160px);
}

.drop-seed.in-view {
  animation: seed-drop 3.2s cubic-bezier(0.5, 0, 0.5, 1) 1.4s infinite;
}

/* Step 3 — nudge card */

.nudge-wrap {
  max-width: 480px;
  margin: 0 auto;
}

.nudge-card {
  background: var(--aubergine);
  border-radius: 22px;
  padding: 26px 26px 22px;
  box-shadow: 0 20px 40px rgba(21, 8, 41, 0.15);
}

.nudge-card__top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.nudge-card__dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--pink);
  border-radius: 50%;
}

.nudge-card__eyebrow {
  color: rgba(244, 236, 216, 0.5);
  font-size: 11px;
  letter-spacing: 0.18em;
  margin: 0;
  font-weight: 500;
}

.nudge-card__quote {
  font-family: var(--font-serif);
  color: var(--cream);
  font-size: 26px;
  line-height: 1.35;
  margin: 0 0 22px;
  letter-spacing: -0.005em;
}

.nudge-card__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid rgba(244, 236, 216, 0.08);
}

.nudge-card__cat {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nudge-card__cat-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--violet-light);
  border-radius: 50%;
}

.nudge-card__cat-label {
  color: rgba(244, 236, 216, 0.75);
  font-size: 12px;
}

/* Step 4 — pricing CTA */

.cta-final {
  padding: 96px 40px;
  text-align: center;
  max-width: var(--max-w);
  margin: 0 auto;
}

.cta-final__title {
  font-family: var(--font-serif);
  font-size: clamp(32px, 5vw, 46px);
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: 1.1;
  margin: 0 0 28px;
}

.price-line {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin: 0 0 12px;
  flex-wrap: wrap;
}

.price {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 400;
}

.price-unit {
  color: var(--text-55);
  font-size: 16px;
}

.price-sep {
  color: var(--text-30);
  font-size: 14px;
  margin: 0 12px;
}

.price-note {
  color: var(--text-55);
  font-size: 13px;
  margin: 0 0 32px;
}

/* ==========================================================================
   Legal pages (privacy / terms / impressum)
   ========================================================================== */

.legal {
  max-width: var(--reading-w);
  margin: 0 auto;
  padding: 64px 40px 96px;
}

.legal__eyebrow {
  color: var(--text-45);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  margin: 0 0 14px;
}

.legal h1 {
  font-family: var(--font-serif);
  font-size: clamp(34px, 5vw, 46px);
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: 1.1;
  margin: 0 0 16px;
  color: var(--text);
}

.legal h2 {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.2;
  margin: 48px 0 16px;
  color: var(--text);
  scroll-margin-top: 24px;
}

.legal h2 a {
  color: inherit;
}

.legal h3 {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.35;
  margin: 28px 0 10px;
  color: var(--text);
}

.legal p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
  margin: 0 0 16px;
}

.legal ul, .legal ol {
  margin: 0 0 16px;
  padding-left: 24px;
}

.legal li {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
  margin: 0 0 8px;
}

.legal strong {
  font-weight: 600;
  color: var(--text);
}

.legal a {
  color: var(--violet);
  border-bottom: 1px solid rgba(77, 43, 168, 0.3);
  transition: border-color 0.15s ease;
}

.legal a:hover,
.legal a:focus-visible {
  border-bottom-color: var(--violet);
}

.legal__updated {
  color: var(--text-55);
  font-size: 14px;
  margin: 0 0 48px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.legal hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 40px 0;
}

.legal .address {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  white-space: pre-line;
  color: var(--text);
  margin: 8px 0 24px;
  padding: 16px 20px;
  background: var(--cream-dim);
  border-radius: 8px;
}

.legal__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-55);
  font-size: 14px;
  margin-bottom: 24px;
  border: 0;
  transition: color 0.15s ease;
}

.legal__back:hover,
.legal__back:focus-visible {
  color: var(--text);
}

/* ==========================================================================
   Pricing page
   ========================================================================== */

.pricing {
  max-width: 760px;
  margin: 0 auto;
  padding: 64px 40px 96px;
  text-align: center;
}

.pricing h1 {
  font-family: var(--font-serif);
  font-size: clamp(36px, 5.5vw, 52px);
  font-weight: 400;
  letter-spacing: -0.024em;
  line-height: 1.1;
  margin: 0 0 20px;
  color: var(--text);
}

.pricing__lede {
  color: var(--text-60);
  font-size: 17px;
  line-height: 1.55;
  max-width: 520px;
  margin: 0 auto 56px;
}

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin: 0 0 40px;
}

.plan {
  background: var(--cream-dim);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px 28px;
  text-align: left;
  display: flex;
  flex-direction: column;
}

.plan--featured {
  background: var(--aubergine);
  border-color: var(--aubergine);
  color: var(--cream);
}

.plan__badge {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 5px 10px;
  background: rgba(255, 92, 138, 0.15);
  color: var(--pink);
  border-radius: 999px;
  margin-bottom: 16px;
  width: fit-content;
}

.plan__name {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}

.plan__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 0 0 6px;
}

.plan__price-amount {
  font-family: var(--font-serif);
  font-size: 40px;
  font-weight: 400;
}

.plan__price-unit {
  font-size: 15px;
  opacity: 0.7;
}

.plan__price-detail {
  font-size: 13px;
  opacity: 0.7;
  margin: 0 0 28px;
}

.plan__list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  flex: 1;
}

.plan__list li {
  font-size: 14px;
  line-height: 1.55;
  padding: 8px 0;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  opacity: 0.85;
}

.plan__list li::before {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  background: currentColor;
  border-radius: 50%;
  margin-top: 9px;
  flex-shrink: 0;
  opacity: 0.5;
}

.pricing__legal {
  max-width: 580px;
  margin: 24px auto 0;
  font-size: 13px;
  color: var(--text-55);
  line-height: 1.6;
  text-align: center;
}

.pricing__legal a {
  color: var(--violet);
  border-bottom: 1px solid rgba(77, 43, 168, 0.3);
}

/* ==========================================================================
   Motion
   ========================================================================== */

@keyframes seed-orbit {
  0% { offset-distance: 0%; }
  100% { offset-distance: 100%; }
}

.hero__seed {
  offset-path: path('M 110 120 L 32.0577 75 A 90 90 0 0 1 65 42.0577 L 110 120 L 110 30 A 90 90 0 0 1 155 42.0577 L 110 120 L 187.9423 75 A 90 90 0 0 0 32.0577 75 L 110 120');
  offset-rotate: 0deg;
  animation: seed-orbit 8s linear infinite;
}

@keyframes wave-active {
  0%   { d: path('M 0 30 Q 25 30, 50 30 T 100 30 T 150 30 T 200 30 T 250 30 T 300 30 T 350 30 T 400 30'); }
  20%  { d: path('M 0 30 Q 25 12, 50 30 T 100 30 Q 125 8, 150 30 T 200 30 T 250 30 T 300 30 T 350 30 T 400 30'); }
  40%  { d: path('M 0 30 Q 25 30, 50 30 T 100 18 Q 125 30, 150 8 T 200 30 Q 225 14, 250 30 T 300 30 T 350 30 T 400 30'); }
  55%  { d: path('M 0 30 Q 25 14, 50 30 T 100 30 Q 125 4, 150 30 T 200 16 T 250 22 Q 275 6, 300 30 T 350 30 T 400 30'); }
  70%  { d: path('M 0 30 Q 25 30, 50 18 T 100 8 T 150 30 Q 175 12, 200 30 T 250 12 Q 275 24, 300 14 T 350 30 Q 375 18, 400 30'); }
  85%  { d: path('M 0 30 Q 25 22, 50 30 T 100 30 Q 125 18, 150 24 T 200 30 Q 225 26, 250 30 T 300 30 T 350 28 T 400 30'); }
  100% { d: path('M 0 30 Q 25 30, 50 30 T 100 30 T 150 30 T 200 30 T 250 30 T 300 30 T 350 30 T 400 30'); }
}

.wave-line { animation: wave-active 8s ease-in-out infinite; }

@keyframes timer-tick {
  0%, 12%   { content: "00:00"; }
  13%, 25%  { content: "00:01"; }
  26%, 38%  { content: "00:02"; }
  39%, 51%  { content: "00:03"; }
  52%, 64%  { content: "00:04"; }
  65%, 77%  { content: "00:05"; }
  78%, 90%  { content: "00:06"; }
  91%, 100% { content: "00:07"; }
}

.timer::after {
  content: "00:00";
  animation: timer-tick 8s linear infinite;
}

@keyframes transcript-fade {
  0%, 8%   { opacity: 0; }
  20%      { opacity: 1; }
  90%      { opacity: 1; }
  100%     { opacity: 0; }
}

.transcript p { animation: transcript-fade 8s linear infinite; }

@keyframes type-word {
  0%, var(--start, 20%)  { opacity: 0; transform: translateY(4px); }
  var(--end, 25%), 95%   { opacity: 1; transform: translateY(0); }
  100%                   { opacity: 0; }
}

@keyframes tw1 { 0%, 20% { opacity: 0; transform: translateY(4px); } 25%, 95% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; } }
@keyframes tw2 { 0%, 28% { opacity: 0; transform: translateY(4px); } 33%, 95% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; } }
@keyframes tw3 { 0%, 38% { opacity: 0; transform: translateY(4px); } 43%, 95% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; } }
@keyframes tw4 { 0%, 48% { opacity: 0; transform: translateY(4px); } 53%, 95% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; } }
@keyframes tw5 { 0%, 58% { opacity: 0; transform: translateY(4px); } 63%, 95% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; } }
@keyframes tw6 { 0%, 68% { opacity: 0; transform: translateY(4px); } 73%, 95% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; } }
@keyframes tw7 { 0%, 78% { opacity: 0; transform: translateY(4px); } 83%, 95% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; } }
@keyframes tw8 { 0%, 84% { opacity: 0; transform: translateY(4px); } 88%, 95% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; } }

.tw-1 { animation: tw1 8s linear infinite; }
.tw-2 { animation: tw2 8s linear infinite; }
.tw-3 { animation: tw3 8s linear infinite; }
.tw-4 { animation: tw4 8s linear infinite; }
.tw-5 { animation: tw5 8s linear infinite; }
.tw-6 { animation: tw6 8s linear infinite; }
.tw-7 { animation: tw7 8s linear infinite; }
.tw-8 { animation: tw8 8s linear infinite; }

@keyframes record-pulse {
  0%, 100% { box-shadow: 0 8px 20px rgba(216, 90, 48, 0.35), 0 0 0 0 rgba(216, 90, 48, 0.4); }
  50%      { box-shadow: 0 8px 20px rgba(216, 90, 48, 0.45), 0 0 0 14px rgba(216, 90, 48, 0); }
}

.btn-record { animation: record-pulse 1.6s ease-in-out infinite; }

@keyframes bar-rise {
  0%   { height: 0; }
  100% { height: var(--target-h, 200px); }
}

@keyframes bar-bump {
  0%, 78%  { transform: scaleY(1); }
  86%      { transform: scaleY(1.04); }
  100%     { transform: scaleY(1); }
}

/* Default state: bars always visible at target height.
   When JS+scroll-trigger is active, the .pending class hides them until .in-view */
.bar.pending {
  height: 0;
}

.bar.in-view {
  animation: bar-rise 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: var(--delay, 0.1s);
}

.bar.in-view.bar--active {
  animation: bar-rise 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) both,
             bar-bump 3.2s ease-in-out 1.4s infinite;
}

@keyframes seed-drop {
  0%, 35%  { transform: translate(-50%, -160px) scale(1); opacity: 0; }
  40%      { transform: translate(-50%, -160px) scale(1); opacity: 1; }
  78%      { transform: translate(-50%, 0) scale(1); opacity: 1; }
  86%      { transform: translate(-50%, -4px) scale(1.2); opacity: 1; }
  92%      { transform: translate(-50%, 0) scale(1); opacity: 1; }
  100%     { transform: translate(-50%, 0) scale(0.55); opacity: 0; }
}

@keyframes nudge-rise {
  0%   { opacity: 0; transform: translateY(28px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes nudge-dot-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.25); }
}

.nudge-card {
  opacity: 1;
  transform: none;
}

.nudge-card.pending {
  opacity: 0;
  transform: translateY(28px) scale(0.96);
}

.nudge-card.in-view {
  animation: nudge-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.nudge-card__dot { animation: nudge-dot-pulse 2.4s ease-in-out infinite; }

/* Respect motion preferences */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .hero__seed,
  .wave-line,
  .timer::after,
  .transcript p,
  .btn-record,
  .nudge-card__dot,
  .drop-seed { animation: none !important; }

  .nudge-card { opacity: 1; transform: none; }
  .bar { height: var(--target-h, 200px); }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 720px) {
  .site-nav, .site-footer { padding: 24px 24px; }
  .site-nav__links { gap: 20px; }
  .hero, .step, .cta-final { padding-left: 24px; padding-right: 24px; }
  .hero { padding-top: 56px; padding-bottom: 48px; }
  .step { padding-top: 72px; padding-bottom: 72px; }
  .hero__mark svg { width: 240px; height: 240px; }
  .step { padding-left: 20px; padding-right: 20px; }
  .legal, .pricing { padding-left: 24px; padding-right: 24px; padding-top: 48px; }
  .bars__row { padding: 24px 4px 0; gap: 8px; height: 240px; }
  .bar { width: 52px; border-radius: 12px; }
  .bar svg { width: 18px; height: 18px; }
  .bar-label { font-size: 10px; }
  .recording-sheet { padding: 24px 22px 28px; border-radius: 28px; }
  .nudge-card__quote { font-size: 22px; }
  .cta-final__title { font-size: clamp(28px, 7vw, 36px); }
  .site-footer { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ==========================================================================
   Print (legal pages)
   ========================================================================== */

@media print {
  body { background: white; color: black; }
  .site-nav__links, .site-footer__links, .legal__back { display: none; }
  .legal { max-width: none; padding: 0; }
  .legal a { color: black; border-bottom: 0; }
  .legal h2 { page-break-after: avoid; }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 3px;
  border-radius: 4px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}