/* Shared readability floor, including compact/mobile views and enlarged text. */
.marketing-demo {
  width: min(960px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 1px solid #b5fff133;
  border-radius: 28px;
  background: #0f1118;
  color: var(--text);
  overflow: auto;
}
.marketing-demo::backdrop {
  background: #03050bea;
  backdrop-filter: blur(14px);
}
.demo-dialog-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.demo-dialog-portrait {
  min-height: 570px;
  position: relative;
  background: #11131c;
}
.demo-dialog-portrait avatar-view {
  position: absolute;
  inset: 0;
}
.demo-dialog-portrait canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.demo-dialog-portrait .tiny-pill {
  position: absolute;
  bottom: 24px;
  left: 20px;
  right: 20px;
  background: #070a10cf;
  text-align: center;
}
.demo-dialog-content {
  padding: 56px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.demo-dialog-content h2 {
  font-size: 2.5rem;
}
.demo-dialog-content > p {
  min-height: 110px;
  font-size: 1rem;
}
.demo-dialog-content > small {
  color: var(--muted);
  font-size: 0.75rem;
}
.demo-dialog-content .demo-questions {
  display: grid;
}
.demo-dialog-content .demo-questions button {
  font-size: 0.875rem;
  text-align: left;
  min-height: 44px;
}
.demo-close {
  position: absolute;
  z-index: 3;
  right: 12px;
  top: 12px;
  background: #0a0c12dc;
}
body:has(.marketing-demo[open]) {
  overflow: hidden;
}
@media (max-width: 640px) {
  .demo-dialog-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-dialog-portrait {
    min-height: 260px;
    height: 34dvh;
  }
  .demo-dialog-portrait canvas {
    object-position: 50% 38%;
  }
  .demo-dialog-portrait .tiny-pill {
    bottom: 12px;
    font-size: 0.65rem;
  }
  .demo-dialog-content {
    padding: 24px;
    gap: 16px;
  }
  .demo-dialog-content h2 {
    font-size: 2rem;
  }
  .demo-dialog-content > p {
    min-height: 0;
  }
}
body {
  font-size: 1rem;
}
.image-tools .segmented > button {
  font-size: 0.875rem;
}
.orbit-label,
.hero-fine,
.mock-person div span,
.mock-input,
.guest-footer {
  color: #a4acbc;
}
p {
  overflow-wrap: anywhere;
}
.button,
.quiet-link,
label,
.checkbox,
.studio-sidebar nav a,
.site-header nav,
.purpose-tabs button,
.provider-tabs button,
.segmented > button,
.voice-option strong,
.link-card-actions .button,
.interview-form [type="submit"],
.guest-text-form input,
.guest-recovery button,
.entry-actions .button {
  font-size: 0.875rem;
}
input,
textarea,
.profile-fields input,
.profile-fields textarea,
.knowledge-card input,
.knowledge-card textarea,
.image-tools textarea,
.interview-form textarea,
.guest-identity-fields input {
  font-size: 1rem;
}
.hero-copy > p,
.section-heading p,
.process-step p,
.purpose-story p,
.trust-cards p,
.check-list li,
.legal-copy p,
.auth-main p,
.page-heading p,
.onboarding-heading > p,
.knowledge-intro p,
.voice-header p,
.interview-turn,
.link-card > p,
.inbox-card > p,
.guest-entry > p,
.guest-ended p,
.transcript-line p {
  font-size: 1rem;
}
.field-hint,
.image-tools .field-hint,
.checkbox small,
.guest-consent small,
.review-banner p,
.interview-aside p,
.next-connection > p,
.privacy-inline p,
.avatar-summary p,
.price-card > p,
.source-row strong,
.knowledge-card label,
.knowledge-card .checkbox,
.interview-aside li,
.interviewer strong,
.interviewer div > span,
.voice-option small,
.guest-consent .checkbox,
.guest-identity p {
  font-size: 0.875rem;
}
.eyebrow,
.tiny-pill,
.brand-ai,
.quiet,
.hero-fine,
.caption-label,
.avatar-label,
.orbit-label,
.proof-strip,
.proof-strip > div,
.step-index,
.root-badge,
.identity-labels span,
.price-tag,
.billing-toggle button,
.price span,
.price > span:first-child,
.pricing-note,
.final-cta > p,
.site-footer > p,
.site-footer > div,
.demo-bar small,
.optional,
.auth-note,
.sidebar-label,
.plan-meter,
.plan-meter small,
.plan-meter a,
.account strong,
.account button,
.studio-topbar > span,
.studio-topbar > a,
.stat-card > span,
.stat-card a,
.flow-actions > span,
.dropzone span,
.polish-tools summary,
.image-tools [data-generate],
.image-tools [data-polish],
.interviewer > .tiny-pill,
.interview-form .field-hint,
.voice-option small,
.review-banner strong,
.compose-header p,
.custom-look > p,
.custom-look > summary,
.link-details,
.guest-brand,
.guest-brand b,
.guest-disclosure,
.guest-disclosure span,
.guest-entry .eyebrow,
.guest-identity-fields label,
.guest-privacy-note,
.guest-footer,
.session-badge,
.session-badge [data-session-time],
.guest-caption > span,
.guest-conversation > small,
.transcript-line strong,
.guest-ended > .quiet-link,
.floating-note strong,
.floating-note span {
  font-size: 0.75rem;
}
.eyebrow,
.guest-footer,
.guest-disclosure {
  letter-spacing: 0.1em;
}
.floating-note {
  max-width: 275px;
}
.floating-note strong,
.floating-note span {
  line-height: 1.55;
}
.stepper button {
  font-size: 0.8125rem;
}
.stepper button > span {
  min-width: 24px;
}
.interviewer div {
  min-width: 0;
}
.interviewer > .tiny-pill {
  margin-left: auto;
}
.interviewer div > span {
  line-height: 1.65;
}
.voice-option small {
  max-width: 200px;
}
.voice-grid,
.links-grid,
.pricing-grid {
  min-width: 0;
}
.source-row > div {
  flex-wrap: wrap;
}
.purpose-display > *,
.process-layout > *,
.hero > *,
.dashboard-grid > * {
  min-width: 0;
}
.purpose-tabs {
  max-width: 100%;
}
.site-footer {
  flex-wrap: wrap;
}
.brand-ai {
  font-size: 0.75rem;
  letter-spacing: 0;
}
.price-card .billing-toggle {
  position: static;
  margin-bottom: 18px;
}
.price-card h3 {
  margin-bottom: 18px;
}
.billing-toggle button {
  min-height: 35px;
  padding: 7px 14px;
}
.price-card {
  display: flex;
  flex-direction: column;
}
.price-card > .button {
  margin-top: 24px;
}
.price-card > .check-list {
  margin-top: auto;
}
.guest-disclosure {
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 220px;
}
.guest-identity {
  max-width: 280px;
}
.guest-entry {
  width: min(480px, 100%);
}
.guest-caption p {
  font-size: 1.2rem;
}
.guest-conversation > small {
  max-width: 480px;
  line-height: 1.8;
}
.guest-recovery p {
  font-size: 0.875rem;
}
.end-button {
  font-size: 0.875rem;
}
.guest-footer {
  gap: 15px;
}
.guest-stage {
  overflow-x: clip;
}
.hero-art .portal-back {
  inset: 18px 6px 0;
}
@media (max-width: 1190px) {
  .site-header nav {
    gap: 20px;
  }
  .site-header .button {
    font-size: 0.8125rem;
  }
  .hero-actions .button {
    font-size: 0.875rem;
  }
  .hero-fine {
    max-width: 380px;
  }
  .floating-note {
    padding: 11px 13px;
    max-width: 240px;
  }
  .note-left {
    left: -25px;
  }
  .note-right {
    right: -20px;
  }
  .process-scene {
    min-height: 650px;
    height: 100%;
  }
  .studio-sidebar nav a {
    font-size: 0.8125rem;
  }
}
@media (max-width: 960px) {
  .hero-art {
    height: 535px;
  }
  .floating-note {
    max-width: 210px;
  }
  .note-left {
    top: 200px;
    left: -15px;
  }
  .note-right {
    bottom: 115px;
    right: -12px;
  }
  .hero-caption {
    bottom: 24px;
  }
  .stepper {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 14px;
  }
  .stepper button {
    flex-direction: row;
    font-size: 0.8125rem;
    padding: 11px 0;
  }
  .voice-grid {
    grid-template-columns: 1fr;
  }
  .studio-sidebar nav a {
    font-size: 0.75rem;
  }
  .interviewer {
    flex-wrap: wrap;
  }
}
@media (max-width: 700px) {
  .site-header {
    padding: 20px;
    gap: 12px;
  }
  .site-header .brand {
    font-size: 1.1rem;
  }
  .site-header .brand-ai {
    display: none;
  }
  .site-header .button {
    font-size: 0.75rem;
    max-width: 153px;
    min-height: 44px;
    padding: 10px 12px;
  }
  .hero-art {
    width: min(360px, calc(100% - 55px));
    height: 520px;
  }
  .hero-art .portal-back {
    transform: rotate(4deg) translate(9px, 0);
    inset: 18px 3px 0;
  }
  .hero-portrait,
  .demo-avatar canvas {
    object-position: 50% 35%;
  }
  .hero-actions {
    gap: 8px;
  }
  .hero-actions .button {
    font-size: 0.8125rem;
    padding: 13px 15px;
  }
  .floating-note {
    max-width: 210px;
    gap: 9px;
    padding: 9px 11px;
  }
  .note-left {
    top: 200px;
    left: -26px;
  }
  .note-right {
    bottom: 120px;
    right: -25px;
  }
  .floating-note span {
    display: none;
  }
  .avatar-label {
    top: 34px;
    font-size: 0.75rem;
    gap: 7px;
  }
  .avatar-label .tiny-pill {
    font-size: 0.75rem;
  }
  .hero-caption {
    left: 15px;
    right: 15px;
  }
  .caption-label {
    font-size: 0.875rem;
    line-height: 1.6;
  }
  .orbit-label {
    position: static;
    padding-top: 540px;
    text-align: center;
    font-size: 0.75rem;
  }
  .hero-art {
    margin-bottom: 45px;
  }
  .proof-strip > div {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 18px;
    font-size: 0.8125rem;
  }
  .process-steps {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .process-step {
    gap: 20px;
  }
  .process-step h3 {
    font-size: 1.4rem;
  }
  .process-step p {
    font-size: 1rem;
  }
  .process-step > div {
    max-width: 430px;
  }
  .process-scene {
    height: 420px;
    min-height: 0;
  }
  .purpose-tabs {
    max-width: calc(100% + 24px);
  }
  .purpose-tabs button {
    font-size: 0.8125rem;
    min-height: 44px;
  }
  .purpose-story .quiet-link {
    font-size: 0.875rem;
  }
  .chat-bubble {
    font-size: 0.875rem;
    max-width: 100%;
  }
  .mock-person strong {
    font-size: 0.875rem;
  }
  .mock-person div span,
  .mock-input,
  .conversation-mock > small {
    font-size: 0.75rem;
  }
  .identity-labels b {
    font-size: 0.8125rem;
  }
  .identity-labels span {
    font-size: 0.75rem;
    line-height: 1.5;
  }
  .identity-labels {
    padding-bottom: 16px;
  }
  .identity-art > img {
    aspect-ratio: 1;
  }
  .identity-labels span {
    overflow-wrap: anywhere;
  }
  .site-footer > div {
    font-size: 0.75rem;
    gap: 14px 20px;
  }
  .site-footer > div > span {
    margin-left: 0;
    width: 100%;
  }
  /* Type size only — the phone nav's columns are laid out in styles.css. A min-width here
     forced the row wider than the screen and pushed the last tab off the edge. */
  .studio-sidebar nav a {
    font-size: 0.7rem;
  }
  .studio-topbar {
    height: auto;
    min-height: 45px;
    padding: 12px 20px;
    flex-wrap: wrap;
    gap: 5px 15px;
  }
  .studio-topbar > span,
  .studio-topbar > a {
    font-size: 0.75rem;
  }
  .step-count {
    display: none;
  }
  .onboarding-heading h1 {
    font-size: 2.1rem;
  }
  .stepper button {
    font-size: 0.75rem;
    gap: 7px;
  }
  .stepper button > span {
    font-size: 0.75rem;
  }
  .flow-actions .button,
  .avatar-summary .button,
  .interview-aside .button {
    font-size: 0.875rem;
  }
  .avatar-summary {
    grid-template-columns: 1fr;
  }
  .summary-portrait {
    height: 340px;
  }
  .summary-portrait:after {
    background: linear-gradient(0deg, #111319, transparent 45%);
  }
  .summary-portrait > .tiny-pill {
    font-size: 0.75rem;
  }
  .avatar-summary > div:last-child {
    padding: 10px 24px 25px;
  }
  .stat-card {
    padding: 20px 16px;
  }
  .stat-card > span,
  .stat-card a {
    font-size: 0.75rem;
  }
  .interview-form .field-hint {
    display: none;
  }
  .interviewer > .tiny-pill {
    font-size: 0.75rem;
  }
  .interview-aside ul {
    grid-template-columns: 1fr;
  }
  .interview-aside li {
    font-size: 0.875rem;
  }
  .knowledge-card > div {
    flex-wrap: wrap;
  }
  .knowledge-card > div .checkbox {
    font-size: 0.8125rem;
  }
  .knowledge-card .tiny-pill {
    font-size: 0.75rem;
  }
  .knowledge-card > .button {
    font-size: 0.8125rem;
  }
  .knowledge-heading {
    flex-wrap: wrap;
  }
  .knowledge-heading h3 {
    font-size: 1rem;
  }
  .knowledge-heading button,
  .upload-label {
    font-size: 0.875rem;
  }
  .provider-tabs span {
    font-size: 0.75rem;
  }
  .voice-option strong {
    font-size: 0.875rem;
  }
  .voice-option small {
    font-size: 0.8125rem;
  }
  .voice-preview {
    width: 44px;
    height: 44px;
  }
  .guest-entry {
    /* Layout (margins, offsets) belongs to styles.css; this file only sets readable sizes. */
    padding: 25px 22px;
  }
  .guest-header {
    padding: 20px;
  }
  .guest-disclosure {
    max-width: 155px;
  }
  .guest-disclosure,
  .guest-disclosure span,
  .guest-brand {
    font-size: 0.75rem;
  }
  .guest-identity .eyebrow {
    font-size: 0.75rem;
  }
  .guest-identity h1 {
    font-size: 2rem;
  }
  .guest-identity p {
    font-size: 0.875rem;
  }
  .guest-identity-fields {
    grid-template-columns: 1fr;
  }
  .guest-identity-fields label,
  .guest-identity-fields .optional {
    font-size: 0.875rem;
  }
  .entry-actions {
    flex-direction: column;
  }
  .entry-actions .button {
    font-size: 0.875rem;
  }
  .guest-consent .checkbox {
    font-size: 0.875rem;
  }
  .guest-consent small {
    font-size: 0.8125rem;
  }
  .guest-privacy-note,
  .guest-footer,
  .guest-caption > span,
  .session-badge,
  .session-badge [data-session-time],
  .guest-conversation > small {
    font-size: 0.75rem;
  }
  .guest-footer {
    flex-wrap: wrap;
    justify-content: center;
  }
  .guest-caption {
    max-height: 26dvh;
  }
  .guest-caption p {
    font-size: 1.125rem;
  }
  .guest-text-form input {
    font-size: 1rem;
  }
  .guest-recovery button {
    font-size: 0.8125rem;
  }
  .guest-transcript {
    top: 95px;
  }
}