/* ======================================
   RELATIONAL ROOTS™ VERSION 3
   RESPONSIVE STYLES
====================================== */


/* ======================================
   01. TABLET STYLES
====================================== */

@media (max-width: 900px) {

  /* Section Spacing */
  :root {
    --section-padding: 56px;
  }

  /* Global Grids */
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
  }

  /* Navbar */
  .navbar-links,
  .navbar-actions {
    display: none;
  }

  .mobile-menu-btn {
    display: flex;
  }

  .navbar-container {
    height: 76px;
  }

  .navbar-logo img {
    height: 42px;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

 /* Four Column Grid */
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

    /* Process Timeline */
  .process-timeline {
    grid-template-columns: repeat(2, 1fr);
  }


/* ======================================
   OTHERS INTRO FORM
====================================== */

.profile-card {
  padding: 32px 24px;
}

.form-grid,
.purpose-grid,
.assessment-summary {
  grid-template-columns: 1fr;
}

  /* Results Page */
  .results-list {
    grid-template-columns: 1fr;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
  }

    /* ======================================
     FREE RESULTS DASHBOARD - TABLET
  ====================================== */

  .free-primary-card,
  .premium-preview-card {
    grid-template-columns: 1fr;
  }

  .free-top-roots-grid {
    grid-template-columns: 1fr;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
  }

}

 

/* ======================================
   02. MOBILE STYLES
====================================== */

@media (max-width: 600px) {

  /* Section Spacing */
  :root {
    --section-padding: 44px;
  }

  /* Container */
  .container {
    width: 92%;
  }

  /* Typography */
  h1 {
    font-size: 2.7rem;
  }

  h2 {
    font-size: 2.2rem;
  }

  h3 {
    font-size: 1.55rem;
  }

  /* Cards */
  .card {
    padding: 26px;
  }

  /* Footer */
  .footer {
    padding-top: 56px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-bottom-inner {
    flex-direction: column;
    align-items: flex-start;
  }

    /* Four Column Grid */
  .grid-4 {
    grid-template-columns: 1fr;
  }

  /* About Relational ROOTS */

.roots-info-grid {
    grid-template-columns: 1fr;
}

/* ======================================
   ROOT MATRIX
====================================== */

.root-matrix{

    grid-template-columns:1fr;

}

.blank{

    display:none;

}

.side-heading{

    justify-content:flex-start;

}

.matrix-cell{

    border-right:none;

}

  /* Process Timeline */
  .process-timeline {
    grid-template-columns: 1fr;
  }

  .assessment-note {
    padding: 32px 26px;
  }

    /* Results Page */
  .results-page {
    align-items: flex-start;
  }

  .result-root-card {
    padding: 26px;
  }

   /* Section Headers */
  .section-header {
    margin-bottom: 36px;
  }

  .section-header p {
    font-size: 1rem;
  }

  /* Feature Cards */
  .feature-card {
    padding: 28px;
  }

  /* Assessment Cards */
  .assessment-card {
    padding: 28px;
  }

  /* CTA Banners */
  .cta-banner {
    padding: 36px 28px;
  }

  /* Quote Blocks */
  .quote-block {
    padding-left: 18px;
  }

    /* Seven ROOTS Chart */
  .root-display-card {
    padding: 30px 24px;
  }

  .root-display-header h3 {
    font-size: 2.3rem;
  }

  .root-question-grid {
    grid-template-columns: 1fr;
  }

    /* ======================================
     FREE RESULTS DASHBOARD - MOBILE
  ====================================== */

  .free-primary-identity,
  .free-primary-content,
  .premium-preview-card {
    padding: 34px 26px;
  }

  .free-primary-identity h2 {
    font-size: 3.2rem;
  }

  .free-top-root-card {
    padding: 28px;
  }

  .protective-behavior-card,
  .free-reflection-card {
    padding: 36px 26px;
  }

  .protective-behavior-text {
    font-size: 1.7rem;
  }

  .premium-preview-card {
    gap: 30px;
  }

}

/* ======================================
   GOD RESULTS PAGE
====================================== */

@media (
  max-width:
    900px
) {

  .god-top-three-grid,
  .god-reflection-grid,
  .god-unlock-benefits {

    grid-template-columns:
      1fr;

  }

  .god-about-grid {

    grid-template-columns:
      1fr;

  }

  .god-score-key {

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

  }

  .god-unlock-preview ul {

    grid-template-columns:
      1fr;

  }

}


@media (
  max-width:
    650px
) {

  .god-results-hero {

    padding:
      82px 0 60px;

  }

  .god-primary-reveal-section,
  .god-top-three-section,
  .god-profile-section,
  .god-about-section,
  .god-reflection-section,
  .god-unlock-section {

    padding:
      64px 0;

  }

  .god-primary-reveal {

    padding:
      40px 22px;

    border-radius:
      22px;

  }

  .god-primary-reveal h2 {

    font-size:
      3.7rem;

  }

  .god-primary-score-circle {

    width:
      130px;

    height:
      130px;

  }

  .god-profile-card,
  .god-reflection-card {

    padding:
      28px 20px;

    border-radius:
      20px;

  }

  .god-score-key {

    grid-template-columns:
      1fr;

  }

  .god-about-card {

    min-height:
      auto;

    padding:
      26px 22px;

  }

  .god-unlock-panel {

    border-radius:
      22px;

  }

  .god-unlock-header {

    padding:
      40px 22px 28px;

  }

  .god-unlock-preview {

    padding:
      30px 22px 36px;

  }

  .god-unlock-actions {

    flex-direction:
      column;

  }

  .god-unlock-actions .btn {

    width:
      100%;

    min-width:
      0;

  }

}


/* ======================================
   GOD RESULTS FOOTER
====================================== */

@media (
  max-width:
    900px
) {

  .god-results-footer-inner {

    grid-template-columns:
      1fr;

    justify-items:
      center;

    text-align:
      center;

  }

  .god-results-footer-links {

    justify-content:
      center;

    flex-wrap:
      wrap;

  }

}


@media (
  max-width:
    650px
) {

  .god-results-footer {

    padding:
      38px 0;

  }

  .god-results-footer-logo img {

    width:
      165px;

  }

}

/* ======================================
   RELATIONAL ROOTS™
   BETA MOBILE REFLOW
====================================== */

@media (max-width: 700px) {

  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  img,
  svg,
  canvas,
  video,
  iframe {
    max-width: 100%;
    height: auto;
  }

  /* Shared navbar/footer: same geometry on every page */
  .navbar .navbar-container {
    width: 100%;
    min-height: 76px;
    padding-inline: 18px;
  }

  .mobile-nav {
    width: 100%;
    padding-inline: 20px;
  }

  .footer-grid,
  .footer-bottom-inner,
  .footer-legal {
    min-width: 0;
  }

  /* Assessment landing page: cards stay boxed, facts stack */
  .assessment-facts {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 38px;
  }

  .assessment-facts .fact {
    width: 100%;
    min-width: 0;
    padding: 22px 18px;
  }

  .assessment-facts .fact strong,
  .assessment-facts .fact p {
    max-width: 100%;
    overflow-wrap: break-word;
  }

  .assessment-paths .grid-3 {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .assessment-card {
    width: 100%;
    min-width: 0;
  }

  .assessment-card .btn {
    width: 100%;
    white-space: normal;
  }

  /* Results: reflow instead of shrinking the desktop layout */
  .god-results-page,
  .god-results-page section {
    width: 100%;
    max-width: 100%;
  }

  .god-results-page .container {
    width: calc(100% - 32px);
    max-width: 100%;
    margin-inline: auto;
  }

  .god-results-hero {
    padding: 96px 0 54px;
  }

  .god-results-hero-inner,
  .god-primary-reveal,
  .god-profile-card,
  .god-reflection-card,
  .god-about-card,
  .god-unlock-panel,
  .god-premium-offer {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .god-results-hero h1 {
    font-size: clamp(2.5rem, 10vw, 3.35rem);
    line-height: 1.04;
    overflow-wrap: break-word;
  }

  .god-primary-reveal {
    padding: 34px 20px;
  }

  .god-primary-reveal h2 {
    font-size: clamp(2.8rem, 12vw, 3.7rem);
    line-height: 1;
    overflow-wrap: break-word;
  }

  .god-primary-reveal blockquote,
  .god-primary-root-definition,
  .god-about-card p,
  .god-reflection-question p,
  .god-premium-offer p,
  .god-premium-offer li {
    overflow-wrap: break-word;
    word-break: normal;
  }

  .god-top-three-grid,
  .god-about-grid,
  .god-reflection-grid,
  .god-score-key,
  .god-premium-features,
  .god-unlock-benefits {
    grid-template-columns: 1fr !important;
  }

  .god-top-three-card,
  .god-about-card,
  .god-reflection-question,
  .god-premium-features article {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .god-root-bar-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: baseline;
  }

  .god-root-bar-heading strong {
    min-width: 0;
    overflow-wrap: break-word;
  }

  .god-primary-score-wrap,
  .god-unlock-actions,
  .god-premium-actions {
    width: 100%;
    min-width: 0;
  }

  .god-unlock-actions,
  .god-premium-actions {
    flex-direction: column;
  }

  .god-unlock-actions .btn,
  .god-premium-actions .btn,
  .god-premium-unlock-button,
  #unlockFullInsightBtn,
  #retakeAssessmentBtn {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    white-space: normal;
  }

  .god-premium-price-block {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  /* Journey browser view stays readable on phone; downloaded PDF remains unchanged */
  .journey-body {
    width: 100%;
    overflow-x: hidden;
    background: #f3eee3;
  }

  .journey-toolbar {
    position: sticky;
    top: 0;
    z-index: 50;
    width: 100%;
    padding: 12px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    background: rgba(250, 249, 246, .96);
    backdrop-filter: blur(10px);
  }

  .journey-toolbar .btn,
  .journey-home-button {
    width: 100%;
    margin: 0;
    white-space: normal;
    text-align: center;
  }

  .journey-document {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 14px !important;
    transform: none !important;
  }

  .journey-page {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: auto !important;
    height: auto !important;
    margin: 0 0 16px !important;
    padding: 28px 20px !important;
    overflow: visible !important;
    box-shadow: 0 10px 28px rgba(59, 42, 31, .10);
    border-radius: 18px;
    break-after: auto;
    page-break-after: auto;
  }

  .journey-page *,
  .journey-cover *,
  .journey-toc-page * {
    max-width: 100%;
    min-width: 0;
  }

  .journey-page h1,
  .journey-page h2,
  .journey-page h3,
  .journey-page h4,
  .journey-page p,
  .journey-page li,
  .journey-page blockquote {
    overflow-wrap: break-word;
    word-break: normal;
  }

  .journey-page h1 {
    font-size: clamp(2.05rem, 9vw, 3rem) !important;
  }

  .journey-page h2 {
    font-size: clamp(1.75rem, 8vw, 2.5rem) !important;
  }

  .journey-page h3 {
    font-size: clamp(1.3rem, 6vw, 1.85rem) !important;
  }

  .cover-content,
  .cover-participant-details,
  .journey-page-header,
  .journey-page-footer,
  .journey-toc-grid,
  .journey-grid,
  .reflection-grid,
  .growth-grid,
  .practice-grid {
    width: 100%;
    max-width: 100%;
    grid-template-columns: 1fr !important;
  }

  .cover-logo {
    width: min(220px, 78vw) !important;
    height: auto;
  }

  .cover-root-panel,
  .cover-detail,
  .journey-card,
  .reflection-card,
  .growth-card {
    width: 100%;
    max-width: 100%;
  }
}

.mobile-beta-notice {
  display: none;
}

@media (max-width: 768px) {

  .mobile-beta-notice {
    display: block;
    width: calc(100% - 32px);
    max-width: 680px;
    margin: 20px auto;
    padding: 18px 20px;
    border: 1px solid rgba(62, 78, 60, 0.18);
    border-radius: 14px;
    background: #f3eee3;
    box-sizing: border-box;
  }

  .mobile-beta-notice strong {
    display: block;
    margin-bottom: 6px;
    font-family: "Inter", sans-serif;
    font-size: 0.92rem;
    color: #3e4e3c;
  }

  .mobile-beta-notice p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: #5a4b43;
  }

}

@media (max-width: 768px) {

  .founder-section {
    padding: 65px 0;
  }

  .founder-grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .founder-image {
    max-width: 340px;
    margin: 0 auto;
  }

  .founder-content {
    text-align: left;
  }

  .founder-content h2 {
    font-size: 2.35rem;
  }

  .founder-quote {
    padding: 20px;
  }

}


@media (max-width: 600px) {
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .btn {
    width: 100%;
    text-align: center;
  }
}


/* ======================================
   RELATIONSHIP WITH SELF RESULTS
======================================= */

@media (max-width: 700px) {

  .self-results-page section {
    padding: 60px 0;
  }

  .self-results-hero h1,
  .self-primary-reveal h2,
  .self-centered-heading h2 {
    overflow-wrap: break-word;
  }

  .self-method-panel,
  .self-profile-card,
  .self-reflection-card,
  .self-primary-reveal,
  .self-unlock-preview,
  .self-premium-offer {
    padding: 26px 20px;
    border-radius: 20px;
  }

  .self-primary-score-wrap {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .self-primary-score-circle {
    width: 112px;
    height: 112px;
  }

  .self-start-path article {
    grid-template-columns: 1fr;
  }

  .self-unlock-actions,
  .self-premium-price-block {
    align-items: stretch;
    flex-direction: column;
  }

  .self-unlock-actions .btn,
  #unlockFullInsightBtn,
  #retakeAssessmentBtn {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

}


/* ======================================
   ASSESSMENTS LANDING PAGE RESPONSIVE
====================================== */
@media (max-width:900px){.assessment-report-callout{align-items:flex-start;flex-direction:column}}
@media (max-width:650px){.assessment-landing-hero{padding-top:96px;padding-bottom:70px}.assessment-hero-actions{align-items:stretch;flex-direction:column}.assessment-hero-actions .btn,.assessment-report-callout .btn,.assessment-final-actions .btn{width:100%}.assessment-report-callout{padding:28px 22px}.assessment-interpretation-emphasis{padding:20px}}


/* ======================================
   RELATIONAL ROOTS™
   MOBILE EXPERIENCE HARDENING
   Desktop styles remain unchanged.
====================================== */


/* ======================================
   TABLET REFLOW — 1024PX
====================================== */

@media (max-width: 1024px) {

  .container {
    width: min(92%, 1120px);
  }

  .hero-grid,
  .resources-split-grid,
  .learn-split-grid,
  .research-split-grid,
  .assessment-interpretation-layout,
  .resources-access-grid,
  .research-card-grid,
  .learn-domain-grid,
  .learn-library-grid {
    grid-template-columns: 1fr !important;
  }

  .resources-card-grid,
  .resource-category-grid,
  .assessment-card-grid,
  .assessment-benefit-grid,
  .assessment-process-grid,
  .report-chapter-grid,
  .report-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}


/* ======================================
   MOBILE REFLOW — 768PX
====================================== */

@media (max-width: 768px) {

  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  body {
    min-width: 0;
  }

  *,
  *::before,
  *::after {
    min-width: 0;
    box-sizing: border-box;
  }

  img,
  picture,
  video,
  svg,
  canvas,
  iframe {
    max-width: 100%;
    height: auto;
  }

  .container {
    width: calc(100% - 32px);
    max-width: 100%;
    margin-inline: auto;
  }

  main,
  section,
  article,
  aside,
  header,
  footer {
    max-width: 100%;
  }

  h1 {
    font-size: clamp(2.2rem, 10vw, 3rem);
    line-height: 1.05;
  }

  h2 {
    font-size: clamp(1.8rem, 8vw, 2.4rem);
    line-height: 1.1;
  }

  h3 {
    font-size: clamp(1.28rem, 6vw, 1.7rem);
    line-height: 1.18;
  }

  p,
  li,
  label,
  legend,
  summary,
  .resource-card h3,
  .account-purchase-card h3 {
    overflow-wrap: break-word;
    word-break: normal;
  }

  /* --------------------------------------
     BUTTONS + PILLS
  -------------------------------------- */

  .hero-actions,
  .cta-actions,
  .assessment-hero-actions,
  .assessment-final-actions,
  .research-paper-actions,
  .resources-hero-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .hero-actions .btn,
  .cta-actions .btn,
  .assessment-hero-actions .btn,
  .assessment-final-actions .btn,
  .research-paper-actions .btn,
  .resources-hero-actions .btn {
    width: 100%;
    min-width: 0;
    white-space: normal;
    text-align: center;
  }

  .roots-tabs,
  .resource-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    width: 100%;
  }

  .root-tab,
  .resource-tab {
    width: 100%;
    min-width: 0;
    padding-inline: 10px;
    white-space: normal;
    text-align: center;
    overflow-wrap: break-word;
  }

  /* --------------------------------------
     HOME
  -------------------------------------- */

  .hero-grid,
  .founder-grid,
  .roots-info-grid,
  .root-question-grid,
  .process-timeline,
  .research-card-grid {
    grid-template-columns: 1fr !important;
  }

  .hero-content,
  .hero-visual,
  .hero-card,
  .main-card,
  .small-card,
  .assessment-note,
  .journey-banner,
  .root-display-card {
    width: 100%;
    max-width: 100%;
  }

  .hero-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .root-display-card {
    padding: 26px 18px;
  }

  .root-domain-list {
    grid-template-columns: 1fr !important;
  }

  /* --------------------------------------
     ASSESSMENT LANDING
  -------------------------------------- */

  .assessment-card-grid,
  .assessment-benefit-grid,
  .assessment-process-grid,
  .assessment-preparation-grid,
  .assessment-quick-facts,
  .report-chapter-grid,
  .report-summary-grid {
    grid-template-columns: 1fr !important;
  }

  .assessment-choice-card,
  .assessment-benefit-card,
  .assessment-report-callout,
  .report-chapter-card,
  .report-summary-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .assessment-choice-card .btn,
  .assessment-report-callout .btn {
    width: 100%;
    min-width: 0;
    white-space: normal;
  }

  /* --------------------------------------
     ASSESSMENT QUESTIONS
  -------------------------------------- */

  .questions-page,
  .question-frame,
  .question-shell,
  .question-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .questions-page {
    padding-inline: 16px;
  }

  .question-card {
    padding: 26px 18px;
  }

  .answer-list {
    width: 100%;
    gap: 10px;
  }

  .answer-option {
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 54px;
    padding: 13px 14px;
    white-space: normal;
    overflow-wrap: break-word;
  }

  .question-navigation {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    gap: 10px;
  }

  .question-navigation .btn {
    width: 100%;
    min-width: 0;
    white-space: normal;
  }

  /* --------------------------------------
     RESOURCES
  -------------------------------------- */

  .resources-split-grid,
  .resources-access-grid,
  .resources-card-grid,
  .resource-category-grid {
    grid-template-columns: 1fr !important;
  }

  .resource-category-card,
  .resource-display-card,
  .resource-card,
  .resources-account-panel,
  .resources-boundary-panel,
  .resources-access-grid article {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .resource-display-card,
  .resources-account-panel,
  .resources-boundary-panel {
    padding: 24px 18px;
  }

  .resource-card {
    padding: 22px 18px;
  }

  .resource-card-top,
  .resource-card-footer,
  .resource-category-view-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
  }

  .resource-learn-link,
  .resource-category-link {
    width: 100%;
    min-width: 0;
    white-space: normal;
    text-align: center;
  }

  .resource-dialog {
    width: calc(100% - 24px);
    max-width: 100%;
    max-height: calc(100dvh - 24px);
    margin: auto;
    padding: 24px 18px;
    overflow-y: auto;
  }

  .resource-dialog-access {
    align-items: stretch;
    flex-direction: column;
  }

  .resource-dialog-access .btn {
    width: 100%;
  }

  /* --------------------------------------
     LEARN + RESEARCH
  -------------------------------------- */

  .learn-split-grid,
  .learn-card-grid,
  .learn-domain-grid,
  .learn-library-grid,
  .research-split-grid,
  .research-card-grid,
  .research-status-list {
    grid-template-columns: 1fr !important;
  }

  .learn-root-row,
  .research-status-row {
    grid-template-columns: 1fr !important;
    gap: 8px;
  }

  /* --------------------------------------
     MY RELATIONAL ROOTS
  -------------------------------------- */

  .account-page,
  .account-library,
  .account-library-header,
  .account-library-panel,
  .account-settings-panel,
  .account-purchase-grid,
  .account-purchase-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .account-library-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
  }

  .account-header-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    gap: 10px;
  }

  .account-header-actions > * {
    width: 100%;
    min-width: 0;
    justify-content: center;
    text-align: center;
  }

  .account-settings-panel,
  .account-library-panel {
    padding: 24px 18px;
  }

  .account-settings-form,
  .account-purchase-grid,
  .account-purchase-details {
    grid-template-columns: 1fr !important;
  }

  .account-purchase-top,
  .account-purchase-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .account-purchase-actions {
    display: grid;
    gap: 9px;
  }

  .account-purchase-actions .btn,
  .account-purchase-actions button,
  .account-purchase-actions a,
  .account-explore-resources-pill {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    text-align: center;
  }

  .account-purchase-card h3,
  .account-purchase-card p,
  .account-purchase-details span,
  .account-settings-field input {
    overflow-wrap: anywhere;
  }

  /* --------------------------------------
     RESULTS
  -------------------------------------- */

  .self-top-three-grid,
  .self-about-grid,
  .self-reflection-grid,
  .self-score-key,
  .self-unlock-benefits,
  .god-top-three-grid,
  .god-about-grid,
  .god-reflection-grid,
  .god-score-key,
  .god-unlock-benefits,
  .results-list {
    grid-template-columns: 1fr !important;
  }

  .self-primary-reveal,
  .self-profile-card,
  .self-reflection-card,
  .self-about-card,
  .self-unlock-panel,
  .god-primary-reveal,
  .god-profile-card,
  .god-reflection-card,
  .god-about-card,
  .god-unlock-panel,
  .result-root-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .self-unlock-actions,
  .god-unlock-actions {
    flex-direction: column;
  }

  .self-unlock-actions .btn,
  .god-unlock-actions .btn {
    width: 100%;
  }

  /* --------------------------------------
     PERSONALIZED JOURNEY
  -------------------------------------- */

  .journey-toolbar {
    padding: 10px 12px;
  }

  .journey-dashboard-pill,
  .journey-resource-button {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    text-align: center;
  }

  .journey-resource-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

}


/* ======================================
   SMALL MOBILE — 480PX
====================================== */

@media (max-width: 480px) {

  .container {
    width: calc(100% - 24px);
  }

  h1 {
    font-size: clamp(2rem, 11vw, 2.55rem);
  }

  h2 {
    font-size: clamp(1.65rem, 9vw, 2.15rem);
  }

  .roots-tabs,
  .resource-tabs,
  .hero-facts,
  .question-navigation {
    grid-template-columns: 1fr;
  }

  .card,
  .feature-card,
  .assessment-card,
  .assessment-note,
  .cta-banner,
  .resource-card,
  .resource-display-card,
  .resources-account-panel,
  .resources-boundary-panel,
  .account-library-panel,
  .account-settings-panel,
  .account-purchase-card {
    padding-left: 16px;
    padding-right: 16px;
  }

  .navbar .navbar-container {
    padding-inline: 12px;
  }

  .mobile-nav {
    padding-inline: 14px;
  }

}



/* ======================================
   MY RELATIONAL ROOTS — LIBRARY TABS
====================================== */

@media (max-width: 768px) {

  .account-library-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 9px;
  }

  .account-library-tab {
    width: 100%;
    min-width: 0;
    padding-inline: 10px;
    white-space: normal;
    text-align: center;
  }

}

@media (max-width: 480px) {

  .account-library-tabs {
    grid-template-columns: 1fr;
  }

}



/* ======================================
   RELATIONAL ROOTS™
   MOBILE POLISH ROUND 2
   Desktop remains unchanged.
====================================== */

@media (max-width: 768px) {

  /* HOME — FOUNDER / CREATOR */
  .founder-section {
    padding: 92px 0 54px;
    overflow: hidden;
  }

  .founder-section .founder-grid {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 28px;
    width: 100%;
  }

  .founder-section .founder-image-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .founder-section .founder-image {
    width: min(100%, 320px);
    max-width: 320px;
    margin: 0 auto;
  }

  .founder-section .founder-content {
    width: 100%;
    max-width: none;
    text-align: left;
  }

  .founder-section .founder-content .section-label {
    text-align: left;
  }

  .founder-section .founder-content h1 {
    max-width: 100%;
    margin: 0 0 18px;
    font-size: clamp(2.55rem, 12vw, 3.45rem);
    line-height: 1;
    text-align: left;
  }

  .founder-section .founder-content .title-break {
    display: inline;
  }

  .founder-section .founder-role {
    margin-bottom: 18px;
    font-size: 1rem;
    line-height: 1.65;
  }

  .founder-section .founder-content p {
    font-size: 1rem;
    line-height: 1.72;
  }

  .founder-section .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    gap: 10px;
    margin-top: 24px;
  }

  .founder-section .hero-actions .btn {
    width: 100%;
  }

  /* ABOUT */
  .about-page {
    overflow-x: clip;
  }

  .about-hero {
    padding: 108px 0 62px;
  }

  .about-hero h1 {
    max-width: 100%;
    font-size: clamp(2.5rem, 11vw, 3.35rem);
    line-height: 1.02;
  }

  .about-hero-lead {
    margin-top: 20px;
    font-size: 1rem;
    line-height: 1.7;
  }

  .about-split-grid,
  .about-principle-grid,
  .about-founder-grid,
  .about-boundary-panel {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 26px;
    width: 100%;
  }

  .about-heading-column,
  .about-copy-column,
  .about-section-heading,
  .about-domain-list,
  .about-founder-content,
  .about-boundary-panel > * {
    width: 100%;
    max-width: 100%;
  }

  .about-heading-column h2,
  .about-section-heading h2,
  .about-founder-content h2,
  .about-boundary-panel h2 {
    max-width: 100%;
    font-size: clamp(2rem, 9vw, 2.7rem);
  }

  .about-principle-card {
    width: 100%;
    min-height: 0;
    padding: 24px 18px;
  }

  .about-domain-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 22px 0;
  }

  .about-founder {
    overflow: hidden;
  }

  .about-founder-image-wrap {
    width: calc(100% - 18px);
    max-width: 320px;
    margin: 0 auto 12px;
  }

  .about-founder-image-wrap::after {
    right: -12px;
    bottom: -12px;
  }

  .about-founder-image {
    width: 100%;
    max-width: 320px;
  }

  .about-founder-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
  }

  .about-founder-actions .btn {
    width: 100%;
  }

  .about-boundaries p {
    font-size: 1rem;
    line-height: 1.72;
  }

  /* RESEARCH */
  .research-page {
    overflow-x: clip;
  }

  .research-hero {
    padding: 108px 0 62px;
  }

  .research-hero h1 {
    max-width: 100%;
    font-size: clamp(2.45rem, 10.5vw, 3.3rem);
    line-height: 1.03;
  }

  .research-hero-lead {
    margin-top: 20px;
    font-size: 1rem;
    line-height: 1.7;
  }

  .research-status-row {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    gap: 8px;
    margin-top: 24px;
  }

  .research-status-row span {
    width: 100%;
    text-align: center;
  }

  .research-split-grid,
  .research-card-grid,
  .research-boundary-panel,
  .research-paper-panel {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 26px;
    width: 100%;
  }

  .research-heading-column,
  .research-copy-column,
  .research-section-heading,
  .research-status-list,
  .research-boundary-copy,
  .research-paper-copy,
  .research-paper-note {
    width: 100%;
    max-width: 100%;
  }

  .research-heading-column h2,
  .research-section-heading h2,
  .research-paper-copy h2,
  .research-boundary-panel h2 {
    max-width: 100%;
    font-size: clamp(2rem, 9vw, 2.7rem);
  }

  .research-card {
    min-height: 0;
    padding: 24px 18px;
  }

  .research-paper-panel {
    padding: 24px 18px;
  }

  .research-paper-meta {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .research-paper-meta span {
    width: 100%;
    overflow-wrap: anywhere;
  }

  .research-paper-actions,
  .research-paper-actions .btn {
    width: 100%;
  }

  /* RESOURCES — YOUR RESULTS CARD */
  .resources-account {
    padding-block: 44px;
  }

  .resources-account .resources-account-panel {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 26px 20px;
    border-radius: 22px;
    text-align: left;
  }

  .resources-account-panel > div {
    width: 100%;
    max-width: none;
  }

  .resources-account-panel .section-label {
    display: inline-flex;
    width: auto;
    margin-bottom: 10px;
    padding: 7px 11px;
    border-radius: 999px;
    background: var(--rr-soft-sage);
  }

  .resources-account-panel h2 {
    max-width: 100%;
    margin: 0;
    font-size: clamp(1.9rem, 8.5vw, 2.45rem);
    line-height: 1.08;
  }

  .resources-account-panel p:not(.section-label) {
    margin-top: 14px;
    font-size: 1rem;
    line-height: 1.68;
  }

  .resources-account-panel .btn {
    width: 100%;
    margin: 0;
    white-space: normal;
  }

  /* RESULTS NAVBAR */
  .self-results-body .navbar {
    width: 100vw;
    max-width: 100vw;
    overflow: hidden;
  }

  .self-results-body .navbar .navbar-container {
    width: 100%;
    max-width: 100%;
    height: 72px;
    min-height: 72px;
    margin: 0;
    padding: 0 16px;
    justify-content: space-between;
  }

  .self-results-body .navbar-logo {
    flex: 0 1 auto;
    max-width: calc(100% - 58px);
    margin-right: 12px;
    overflow: hidden;
  }

  .self-results-body .navbar-logo img {
    width: auto;
    max-width: 180px;
    height: 38px;
    object-fit: contain;
  }

  .self-results-body .mobile-menu-btn {
    display: flex;
    flex: 0 0 42px;
    width: 42px;
    margin-left: auto;
  }

  .self-results-body .mobile-nav {
    width: 100%;
    max-width: 100%;
    padding: 22px 18px 28px;
  }

}

@media (max-width: 480px) {

  .founder-section .founder-content h1 {
    font-size: clamp(2.35rem, 12.5vw, 3rem);
  }

  .founder-section .founder-image,
  .about-founder-image,
  .about-founder-image-wrap {
    max-width: 280px;
  }

  .about-hero h1,
  .research-hero h1 {
    font-size: clamp(2.25rem, 11vw, 2.85rem);
  }

  .resources-account .resources-account-panel {
    padding: 23px 17px;
  }

  .self-results-body .navbar .navbar-container {
    padding-inline: 12px;
  }

  .self-results-body .navbar-logo img {
    max-width: 160px;
    height: 36px;
  }

}



/* ======================================
   MOBILE INTERACTION HARDENING
   Desktop remains unchanged.
====================================== */

@media (max-width: 900px) {

  a,
  button,
  input[type="button"],
  input[type="submit"],
  [role="button"],
  .btn,
  .root-tab,
  .resource-tab,
  .account-library-tab,
  .answer-option,
  .exit-assessment-btn,
  .mobile-menu-btn {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(62, 78, 60, 0.12);
  }

  button:not(:disabled),
  a[href],
  [role="button"]:not([aria-disabled="true"]),
  .answer-option:not(:disabled),
  .account-library-tab:not(:disabled) {
    pointer-events: auto;
  }

  .exit-assessment-btn {
    position: relative;
    z-index: 1001;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
  }

  .assessment-topbar {
    pointer-events: none;
  }

  .assessment-topbar .exit-assessment-btn {
    pointer-events: auto;
  }

  .account-library-tabs,
  .account-purchase-actions,
  .question-navigation,
  .answer-list {
    position: relative;
    z-index: 2;
  }

  .account-library-tab,
  .account-purchase-actions .btn,
  .account-purchase-actions button,
  .question-navigation .btn,
  .answer-option {
    position: relative;
    z-index: 3;
  }

  .mobile-nav:not(.active) {
    display: none !important;
    pointer-events: none !important;
  }

  .mobile-nav.active {
    pointer-events: auto;
  }

}


/* ======================================
   RESULTS — NEXT STEPS MOBILE
====================================== */

@media (max-width: 768px) {

  .self-results-next-steps {
    width: 100%;
    margin-top: 1.5rem;
    padding: 1.25rem 1rem;
    border-radius: 1.1rem;
  }

  .self-results-next-steps h3 {
    font-size: 1.45rem;
  }

  .self-results-next-steps > p {
    font-size: 0.95rem;
    line-height: 1.65;
  }

  .self-results-next-path {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }

  .self-results-next-path > div {
    width: 100%;
  }

}

@media (max-width: 480px) {

  .self-results-next-steps {
    padding: 1.1rem 0.9rem;
  }

  .self-results-next-path span {
    font-size: 0.82rem;
  }

}