/* HYPNO.GURU v14 composition reset.
   Mobile: form first, fixed gutters, natural wrapping, no decorative motion.
   Desktop: request form stays fully visible in the first viewport. */

/* Prevent any route-level horizontal crop and restore a reliable content width. */
html,
body {
  overflow-x: hidden !important;
}

/* The request experience is a task surface, not a cinematic transition. */
.request-experience,
.request-experience *,
body:has(.request-experience) .page-view,
body:has(.request-experience) .page-main {
  animation: none !important;
  transition: none !important;
}

body:has(.request-experience) .custom-cursor,
body:has(.request-experience) .custom-cursor * {
  display: none !important;
  pointer-events: none !important;
}

body:has(.request-experience),
body:has(.request-experience) * {
  cursor: auto !important;
}

.request-experience .question-actions .action-primary svg,
.request-experience .review-actions .action-primary svg,
.request-experience .prepared-actions svg {
  display: none !important;
}

.request-experience .question-actions .action-primary,
.request-experience .review-actions .action-primary,
.request-experience .prepared-actions .action-primary {
  gap: 0 !important;
}

.request-experience .question-actions > *,
.request-experience .review-actions > *,
.request-experience .prepared-actions > * {
  transform: none !important;
  animation: none !important;
}

/* Desktop: compact the shell vertically while keeping the card and action visible. */
@media (min-width: 761px) {
  .request-experience {
    min-height: calc(100svh - 76px) !important;
    height: auto !important;
    max-height: none !important;
    padding: clamp(24px, 3.2vw, 48px) 0 40px !important;
    overflow: visible !important;
  }

  .request-experience .request-shell {
    width: min(1320px, calc(100% - clamp(40px, 7vw, 120px))) !important;
    max-width: none !important;
    margin-inline: auto !important;
    align-items: start !important;
    gap: clamp(28px, 4vw, 64px) !important;
  }

  .request-experience .request-stage {
    align-self: start !important;
    min-width: 0 !important;
  }

  .request-experience .question-card {
    max-height: none !important;
    overflow: visible !important;
  }
}

/* Mobile composition: 20px minimum safe gutter, form is the first and only primary task. */
@media (max-width: 760px) {
  :root {
    --mobile-gutter: 20px;
  }

  html,
  body,
  #root,
  .site-shell,
  .page-main,
  .page-view,
  .request-experience,
  .home-page {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .site-header {
    min-height: 70px !important;
    padding-inline: var(--mobile-gutter) !important;
  }

  /* Homepage: no edge-to-edge copy, no nowrap title fragments, no giant art before the CTA. */
  .home-page .hero {
    min-height: calc(100svh - 70px) !important;
    height: auto !important;
    padding: 24px 0 32px !important;
    align-items: start !important;
    overflow: visible !important;
  }

  .home-page .hero > .content-shell.hero-grid,
  .home-page .hero .content-shell {
    display: block !important;
    width: calc(100% - (2 * var(--mobile-gutter))) !important;
    max-width: calc(100% - (2 * var(--mobile-gutter))) !important;
    margin-inline: auto !important;
    padding: 0 !important;
  }

  .home-page .hero-copy {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .home-page .hero h1 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    font-size: clamp(35px, 9.8vw, 46px) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.045em !important;
    text-wrap: balance !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .home-page .hero h1 .title-line,
  .home-page .hero h1 em {
    display: inline !important;
    white-space: normal !important;
  }

  .home-page .hero h1 .title-line::after {
    content: " " !important;
  }

  .home-page .hero-intro {
    max-width: 100% !important;
    margin-top: 22px !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  .home-page .hero-descriptor {
    max-width: 100% !important;
    margin-top: 16px !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
  }

  .home-page .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    width: 100% !important;
    margin-top: 22px !important;
  }

  .home-page .hero-actions .action-link {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
  }

  .home-page .hero-notes {
    margin-top: 26px !important;
    gap: 8px 16px !important;
    font-size: 8px !important;
  }

  .home-page .hero-art,
  .home-page .scroll-cue {
    display: none !important;
  }

  /* Natural wrapping for mobile headings prevents stranded one-word lines. */
  .home-page .section-head h2,
  .home-page .section-head h2 .title-line,
  .home-page .section-head h2 em,
  .home-page .section h2 .title-line,
  .home-page .section h2 em {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    text-wrap: balance !important;
  }

  /* Request route: only the working form occupies the first screen. */
  .request-experience {
    min-height: calc(100svh - 70px) !important;
    height: auto !important;
    max-height: none !important;
    padding: 18px 0 28px !important;
    overflow: visible !important;
  }

  .request-experience .content-shell.request-shell {
    display: block !important;
    width: calc(100% - (2 * var(--mobile-gutter))) !important;
    max-width: calc(100% - (2 * var(--mobile-gutter))) !important;
    margin-inline: auto !important;
    padding: 0 !important;
  }

  .request-experience .request-stage {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .request-experience .request-intro,
  .request-experience .request-visual {
    display: none !important;
  }

  .request-experience .request-progress {
    width: 100% !important;
    margin: 0 0 10px !important;
  }

  .request-experience .question-card,
  .request-experience .review-card,
  .request-experience .prepared-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 18px 16px 16px !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .request-experience .question-card h2,
  .request-experience .review-card h2,
  .request-experience .prepared-panel h2 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 12px !important;
    font-size: clamp(32px, 8.8vw, 40px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.045em !important;
    text-wrap: balance !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .request-experience .question-card h2 .title-line,
  .request-experience .review-card h2 .title-line,
  .request-experience .prepared-panel h2 .title-line {
    display: inline !important;
    max-width: 100% !important;
    white-space: normal !important;
  }

  .request-experience .question-guidance {
    margin: 0 0 12px !important;
    font-size: 10px !important;
    line-height: 1.42 !important;
  }

  .request-experience .question-card textarea {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 112px !important;
    height: 112px !important;
    margin: 0 !important;
    padding: 12px 13px !important;
    box-sizing: border-box !important;
  }

  .request-experience .question-actions,
  .request-experience .review-actions,
  .request-experience .prepared-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 14px 0 0 !important;
  }

  .request-experience .question-actions > *,
  .request-experience .review-actions > *,
  .request-experience .prepared-actions > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
  }

  .request-experience .question-actions .action-primary,
  .request-experience .review-actions .action-primary,
  .request-experience .prepared-actions .action-primary {
    justify-content: center !important;
  }

  .request-experience .request-fields,
  .request-experience .review-fields {
    gap: 14px !important;
  }

  .request-experience .consent-row {
    padding: 12px !important;
  }
}

@media (max-width: 380px) {
  :root {
    --mobile-gutter: 16px;
  }

  .home-page .hero h1 {
    font-size: clamp(33px, 9.5vw, 40px) !important;
  }

  .request-experience .question-card,
  .request-experience .review-card,
  .request-experience .prepared-panel {
    padding-inline: 14px !important;
  }
}

/* No animated expansion of controls, icons, or press states on the request route. */
.request-experience .action-link,
.request-experience .action-link svg,
.request-experience button,
.request-experience button svg,
.request-experience .plain-button,
.request-experience .question-card,
.request-experience .review-card,
.request-experience .prepared-panel {
  transition: none !important;
  animation: none !important;
}

.request-experience .action-link:hover svg,
.request-experience .action-link:active,
.request-experience button:active,
.request-experience .action-link.is-pressed,
.request-experience button.is-pressed,
.request-experience .plain-button.is-pressed {
  transform: none !important;
  animation: none !important;
  filter: none !important;
}