:root {
  --bg: #f6f7fb;
  --surface: #ffffff;
  --surface-alt: #eef0f6;
  --text: #14161f;
  --muted: #5d6276;
  --border: #e2e5ee;
  --primary: #4f46e5;
  --primary-strong: #4338ca;
  --primary-soft: #e7e6fd;
  --danger: #dc2626;
  --success: #16a34a;
  --shadow: 0 20px 50px -20px rgba(39, 33, 120, 0.35);
  --radius: 18px;
  /* Demonstração: bolha do usuário sempre com contraste AA para texto branco */
  --bubble-user: #4f46e5;
  --bubble-bot: #eef0f6;
  --panel: #ffffff;
  --panel-border: #dfe2ec;
  --new-bg: #ecebfe;
  --busy: #e9ebf2;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e0f14;
    --surface: #181a22;
    --surface-alt: #232633;
    --text: #f2f3f7;
    --muted: #a3a8ba;
    --border: #2a2d3a;
    --primary: #7c74ff;
    --primary-strong: #9a94ff;
    --primary-soft: #2a2850;
    --danger: #f87171;
    --success: #4ade80;
    --shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.7);
    --bubble-user: #5b52e8;
    --bubble-bot: #2a2e3f;
    --panel: #171922;
    --panel-border: #33384b;
    --new-bg: #26244d;
    --busy: #242838;
    color-scheme: dark;
  }
}

* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: var(--primary);
}
h1,
h2,
h3 {
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
}
h1 {
  font-size: clamp(2.2rem, 5.5vw, 3.6rem);
  font-weight: 800;
}
h2 {
  font-size: clamp(1.7rem, 3.6vw, 2.4rem);
  font-weight: 800;
}
h3 {
  font-size: 1.2rem;
}
p {
  margin: 0 0 1em;
}
.wrap {
  width: min(1120px, 100% - 32px);
  margin-inline: auto;
}
.accent {
  color: var(--primary);
}

/* Botões */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  padding: 14px 24px;
  background: var(--primary);
  color: #fff;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}
.btn:hover {
  background: var(--primary-strong);
  transform: translateY(-1px);
}
.btn:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--primary-soft);
  outline-offset: 2px;
}
.btn[disabled] {
  opacity: 0.6;
  cursor: wait;
  transform: none;
}
.btn-ghost {
  background: transparent;
  color: var(--primary);
  box-shadow: inset 0 0 0 2px var(--primary-soft);
}
.btn-ghost:hover {
  background: var(--primary-soft);
}
.btn-small {
  padding: 9px 16px;
  font-size: 0.92rem;
}
.btn-block {
  width: 100%;
}

/* Topo */
.top {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.top-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 800;
  font-size: 1.1rem;
  text-decoration: none;
}
.brand img {
  border-radius: 8px;
}

/* Hero */
.hero {
  padding: 56px 0 40px;
  background: radial-gradient(1000px 500px at 85% 0%, var(--primary-soft), transparent 70%);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
}
.pill {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 700;
  font-size: 0.85rem;
}
.lead {
  font-size: 1.15rem;
  color: var(--muted);
  max-width: 34em;
}
.lead em {
  color: var(--text);
  font-style: normal;
  font-weight: 600;
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 14px;
}
.fine {
  font-size: 0.88rem;
  color: var(--muted);
}
.hero-visual {
  display: flex;
  justify-content: center;
}
.phone {
  width: min(300px, 80vw);
  border-radius: 40px;
  padding: 10px;
  background: #111;
  box-shadow: var(--shadow);
}
.phone img {
  border-radius: 31px;
}

/* Faixa de benefícios */
.strip {
  border-block: 1px solid var(--border);
  background: var(--surface);
}
.strip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 22px 0;
}
.strip-grid div {
  display: flex;
  flex-direction: column;
}
.strip-grid span {
  color: var(--muted);
  font-size: 0.92rem;
}

/* Seções */
.section {
  padding: 80px 0;
}
.section-alt {
  background: var(--surface);
}
.section-lead {
  color: var(--muted);
  font-size: 1.1rem;
  max-width: 40em;
}

/* Demonstração */
.eyebrow {
  margin: 0 0 8px;
  color: var(--primary);
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.demo-section {
  background: radial-gradient(900px 420px at 20% 0%, var(--primary-soft), transparent 70%);
}
.demo-tabs {
  display: flex;
  gap: 8px;
  margin: 28px 0 18px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px;
  -webkit-overflow-scrolling: touch;
}
.demo-tabs::-webkit-scrollbar {
  display: none;
}
.demo-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--panel-border);
  background: var(--panel);
  color: var(--text);
  border-radius: 999px;
  padding: 10px 16px;
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.demo-tab:hover {
  border-color: var(--primary);
}
.demo-tab[aria-selected='true'] {
  background: var(--bubble-user);
  border-color: var(--bubble-user);
  color: #fff;
}
.demo-tab:focus-visible,
.demo-btn:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

.demo-stage {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
}
.demo-phone,
.demo-side {
  background: var(--panel);
  border: 1.5px solid var(--panel-border);
  border-radius: 24px;
  box-shadow: var(--shadow);
}
.demo-phone {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.demo-phone-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--panel-border);
}
.demo-phone-head img {
  border-radius: 8px;
}
.demo-phone-head div {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.demo-phone-head span {
  color: var(--muted);
  font-size: 0.82rem;
}
.demo-messages {
  height: 330px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  overflow: hidden;
}
.bubble {
  max-width: 88%;
  padding: 12px 16px;
  border-radius: 20px;
  font-size: 1rem;
  line-height: 1.45;
  animation: pop 0.3s ease both;
}
.bubble.user {
  align-self: flex-end;
  background: var(--bubble-user);
  color: #fff;
  border-bottom-right-radius: 6px;
}
.bubble.bot {
  align-self: flex-start;
  background: var(--bubble-bot);
  color: var(--text);
  border: 1px solid var(--panel-border);
  border-bottom-left-radius: 6px;
}
.bubble.thinking {
  padding: 14px 16px;
}
.dots span {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-radius: 50%;
  background: var(--muted);
  animation: bounce 1s infinite;
}
.dots span:nth-child(2) {
  animation-delay: 0.15s;
}
.dots span:nth-child(3) {
  animation-delay: 0.3s;
}
.demo-composer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 14px 14px;
  padding: 8px 8px 8px 16px;
  background: var(--bubble-bot);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  min-height: 48px;
}
.demo-input {
  flex: 1;
  min-width: 0;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.demo-input:empty::before {
  content: 'Escreva um pedido…';
  color: var(--muted);
}
.demo-input.typing::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 1.1em;
  margin-left: 1px;
  vertical-align: text-bottom;
  background: var(--primary);
  animation: blink 1s steps(1) infinite;
}
.demo-send {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bubble-user);
  color: #fff;
  font-weight: 800;
}

.demo-side {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
.demo-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.demo-steps li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.25;
  transition: color 0.3s ease;
}
.demo-steps li::before {
  content: '';
  height: 4px;
  border-radius: 4px;
  background: var(--busy);
  transition: background 0.3s ease;
}
.demo-steps span {
  display: none;
}
.demo-steps li.active,
.demo-steps li.done {
  color: var(--text);
}
.demo-steps li.active::before {
  background: var(--primary);
}
.demo-steps li.done::before {
  background: var(--success);
}
.demo-label {
  margin: 0 0 8px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.demo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 38px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--new-bg);
  color: var(--text);
  font-weight: 600;
  font-size: 0.92rem;
  border: 1.5px solid transparent;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
/* Espaço já reservado (contorno tracejado) para a página não "pular" quando a IA entende o pedido */
.chip.pending {
  background: transparent;
  border: 1.5px dashed var(--panel-border);
}
/* visibility (e não cor transparente): no Safari, emoji com cor transparente some de vez */
.chip.pending span {
  visibility: hidden;
}
.bubble.greeting {
  animation: none;
}

/* Resultado */
.demo-output {
  flex: 1;
  border-top: 1px solid var(--panel-border);
  padding-top: 18px;
  min-height: 300px;
}
.r-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.r-head strong {
  font-size: 1.1rem;
}
.r-head small {
  color: var(--muted);
  font-size: 0.85rem;
}
.r-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.r-row {
  display: grid;
  grid-template-columns: 62px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--busy);
  border-left: 4px solid transparent;
}
.r-row time {
  font-weight: 800;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.r-row b {
  display: block;
}
.r-row small {
  display: block;
  color: var(--muted);
  font-size: 0.85rem;
}
.r-day {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--muted);
}
.tag {
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--bubble-user);
  color: #fff;
  white-space: nowrap;
}
.tag.free {
  background: transparent;
  color: var(--success);
  box-shadow: inset 0 0 0 1.5px var(--success);
}
.prio {
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.prio.alta {
  background: #fde2e2;
  color: #a61b1b;
}
.prio.media {
  background: #fdf0d5;
  color: #8a5300;
}
.prio.baixa {
  background: #dfeefe;
  color: #1d4f91;
}
.r-row.slot-free {
  background: transparent;
  border: 1.5px dashed var(--panel-border);
  border-left-width: 1.5px;
}
.r-row.slot-free time,
.r-row.slot-free b {
  color: var(--success);
}
.r-notif {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px;
  margin-bottom: 14px;
  border-radius: 18px;
  background: var(--bubble-bot);
  border: 1px solid var(--panel-border);
}
.r-notif img {
  border-radius: 8px;
  flex-shrink: 0;
}
.r-notif div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.r-notif small {
  color: var(--muted);
}
.r-caption {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
}

/* Itens novos: discretos antes, destacados quando o resultado aparece */
.demo-output .is-new {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s ease, transform 0.45s ease, background 0.45s ease;
}
.demo-output.reveal .is-new {
  opacity: 1;
  transform: none;
}
.demo-output.reveal .r-row.is-new {
  background: var(--new-bg);
  border-left-color: var(--primary);
}
.demo-output.reveal .r-row.slot-free.is-new {
  background: transparent;
  border-color: var(--success);
}
.demo-output.reveal .r-row.slot-best {
  background: color-mix(in srgb, var(--success) 14%, transparent);
  border: 1.5px solid var(--success);
}
.demo-output .when-revealed {
  display: none;
}
.demo-output.reveal .when-revealed {
  display: grid;
  animation: pop 0.4s ease both;
}
.demo-output.reveal .until-revealed {
  display: none;
}

.demo-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
.demo-btn {
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1.5px solid var(--panel-border);
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: 1.3rem;
  font-weight: 700;
  cursor: pointer;
}
.demo-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.demo-btn-text {
  font-size: 0.95rem;
}
.demo-count {
  min-width: 64px;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.demo-sep {
  width: 1px;
  height: 24px;
  background: var(--panel-border);
  margin: 0 4px;
}
.demo-progress {
  height: 4px;
  max-width: 320px;
  margin: 14px auto 0;
  border-radius: 4px;
  background: var(--busy);
  overflow: hidden;
}
.demo-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--primary);
}
.demo-progress span.run {
  animation: progress linear forwards;
}
.demo-note {
  text-align: center;
  color: var(--muted);
  font-size: 0.88rem;
  margin: 12px auto 0;
  max-width: 44em;
}
.demo-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 36px;
  padding: 28px;
  border-radius: var(--radius);
  background: var(--panel);
  border: 1.5px solid var(--primary);
}
.demo-cta h3 {
  font-size: 1.4rem;
  margin-bottom: 4px;
}
.demo-cta p {
  margin: 0;
  color: var(--muted);
}
.demo-cta-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
@keyframes progress {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@keyframes pop {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}
@keyframes bounce {
  0%,
  60%,
  100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-5px);
  }
}

/* Funcionalidades */
.features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 32px;
}
.feature {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 20px;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
}
.feature img {
  border-radius: 14px;
  border: 1px solid var(--border);
}
.feature p {
  color: var(--muted);
  margin: 0;
}

/* Confiança */
.trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.trust > div {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}
.trust p {
  color: var(--muted);
  margin: 0;
}

/* Formulário */
.section-form {
  background: linear-gradient(180deg, var(--primary-soft), transparent 70%);
}
.form-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 40px;
  align-items: start;
}
.form-intro p {
  color: var(--muted);
  font-size: 1.08rem;
}
.checks {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  display: grid;
  gap: 10px;
}
.checks li::before {
  content: '✓';
  color: var(--success);
  font-weight: 800;
  margin-right: 10px;
}
.card-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 20px;
}
.field {
  display: grid;
  gap: 8px;
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.field > label,
legend {
  font-weight: 700;
  padding: 0;
  margin-bottom: 8px;
}
.hint {
  font-weight: 400;
  color: var(--muted);
  font-size: 0.9rem;
}
input[type='text'],
input[type='email'],
input:not([type]) {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
}
input[aria-invalid='true'] {
  border-color: var(--danger);
}
.choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.choices label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.95rem;
  user-select: none;
}
.choices label:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 600;
}
.choices input {
  accent-color: var(--primary);
  margin: 0;
}
.toggle,
.consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  cursor: pointer;
}
.toggle input,
.consent input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--primary);
}
.consent {
  font-size: 0.9rem;
  color: var(--muted);
}
.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-msg {
  margin: 0;
  min-height: 1.4em;
  color: var(--danger);
  font-weight: 600;
}
.done {
  text-align: center;
  justify-items: center;
}
.done-emoji {
  font-size: 3rem;
  margin: 0;
}

/* FAQ */
.faq {
  max-width: 760px;
}
.faq details {
  border-bottom: 1px solid var(--border);
  padding: 18px 0;
}
.faq summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1.05rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.faq summary::after {
  content: '+';
  color: var(--primary);
  font-size: 1.4rem;
  line-height: 1;
}
.faq details[open] summary::after {
  content: '–';
}
.faq details p {
  color: var(--muted);
  margin: 12px 0 0;
}

.foot {
  border-top: 1px solid var(--border);
  padding: 28px 0;
  color: var(--muted);
  font-size: 0.9rem;
}
.foot-inner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 880px) {
  .demo-stage {
    grid-template-columns: 1fr;
  }
  .demo-messages {
    height: 280px;
  }
  .demo-output {
    min-height: 0;
  }
  .hero-grid,
  .form-grid,
  .features {
    grid-template-columns: 1fr;
  }
  .hero {
    padding-top: 36px;
  }
  .strip-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .trust {
    grid-template-columns: 1fr;
  }
  .section {
    padding: 56px 0;
  }
}
@media (max-width: 520px) {
  /* No celular, conversa e resultado precisam caber juntos na tela */
  .demo-tabs {
    margin: 20px 0 14px;
  }
  .demo-phone-head {
    padding: 10px 14px;
  }
  .demo-messages {
    height: 232px;
    padding: 12px;
    gap: 8px;
  }
  .bubble {
    font-size: 0.95rem;
    padding: 10px 13px;
  }
  .bubble.greeting {
    display: none;
  }
  .demo-composer {
    min-height: 42px;
    margin: 0 10px 10px;
  }
  .demo-stage {
    gap: 12px;
  }
  .demo-side {
    padding: 14px;
    gap: 12px;
  }
  .demo-label {
    margin-bottom: 6px;
  }
  .chip {
    font-size: 0.82rem;
    padding: 5px 10px;
  }
  .demo-output {
    padding-top: 12px;
  }
  .r-head {
    margin-bottom: 8px;
  }
  .r-list {
    gap: 6px;
  }
  /* Celular: só o que muda (item novo, horários livres, lembrete), com uma prévia apagada até o resultado aparecer */
  .demo-output .r-list .r-row:not(.is-new) {
    display: none;
  }
  .demo-output .r-list.until-revealed .r-row,
  .demo-output .r-list.when-revealed .r-row {
    display: grid;
  }
  .demo-output .r-list.until-revealed .r-row:nth-child(n + 4),
  .demo-output .r-list.when-revealed .r-row:nth-child(n + 4) {
    display: none;
  }
  .demo-output:not(.reveal) .is-new {
    opacity: 0.35;
    transform: none;
    outline: 1.5px dashed var(--panel-border);
    outline-offset: -1.5px;
  }
  .demo-output .r-notif {
    margin-bottom: 8px;
    padding: 10px 12px;
  }
  .demo-steps li {
    font-size: 0.75rem;
  }
  .r-row {
    grid-template-columns: 48px 1fr auto;
    gap: 8px;
    padding: 7px 10px;
    font-size: 0.95rem;
  }
  .demo-cta {
    padding: 20px;
  }
  .demo-cta-actions .btn {
    width: 100%;
  }
  .feature {
    grid-template-columns: 110px 1fr;
    gap: 14px;
    padding: 14px;
  }
  .card-form {
    padding: 20px;
  }
  .cta-row .btn {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}