/* Mobile storytelling, layered over the approved landing. Desktop stays intact. */
.stage-story, .evidence-story, .hero-capture { display: none; }
@media (max-width: 700px) {
  .wrap { width: calc(100% - 40px); }
  .hero { padding-top: 26px; gap: 20px; }
  .hero-product { order: -1; width: 100%; gap: 0; }
  .hero-product .browser { display: none; }
  .hero-capture { display: block; text-align: center; margin-top: 12px; }
  .hero-capture summary { font-size: 16px; }
  .hero-ascle {
    width: clamp(210px, 63vw, 280px);
    justify-self: center;
    aspect-ratio: 1312 / 1199;
    height: auto;
  }
  .hero h1 { font-size: clamp(38px, 10.5vw, 48px); line-height: 1.1; }
  .hero h1 span { padding-inline: 5px; }
  .hero .lead { font-size: 18px; line-height: 1.6; max-width: 28ch; margin-block: 24px; }
  .hero .actions { max-width: 380px; margin-inline: auto; }
  .hero .button, .feature-copy .button, .final-inner .button {
    font-size: 18px; min-height: 54px; width: 100%; padding: 14px 18px;
  }
  .hero-note { max-width: 26ch; margin: 24px auto 4px; }
  .study-sequence { margin: 0; padding-block: 24px; justify-content: center; }
  .section { padding-block: 64px; }
  .section-intro, .intro, .feature-copy { text-align: center; }
  h2 { font-size: clamp(34px, 9.4vw, 44px); line-height: 1.13; }
  .section-intro > p, .intro > p, .feature-copy > p {
    max-width: 32ch; margin-inline: auto; font-size: 18px; line-height: 1.65;
  }
  .section-intro { margin-bottom: 36px; }
  .stage-grid { gap: 28px; }
  .stage {
    display: flex; flex-direction: column; align-items: stretch;
    padding: 40px 22px; border-radius: 28px;
    text-align: center; min-height: min(700px, calc(100svh - 100px));
  }
  .stage-number { font-size: 14px; margin-bottom: 12px; }
  .stage h3 { font-size: clamp(36px, 10vw, 46px); line-height: 1.1; }
  .stage > p { font-size: 18px; line-height: 1.65; margin: 20px auto 0; max-width: 26ch; }
  .stage > img { display: none; }
  .stage-story {
    display: grid; place-items: center; gap: 14px;
    padding: 28px 0 20px; color: #2e6796;
  }
  .stage-story svg {
    width: 154px; height: 142px; overflow: visible;
    filter: drop-shadow(0 8px 0 #183c600a);
  }
  .stage-story > span {
    display: block; font-size: 20px; line-height: 1.35; font-weight: 600;
    color: #183c60; max-width: 20ch;
  }
  .residente .stage-story { color: #317c72; }
  .consejo .stage-story { color: #7356a2; }
  .stage ul {
    text-align: left; padding-left: 22px; font-size: 17px;
    line-height: 1.7; margin: 8px auto 24px; max-width: 100%;
  }
  .stage li + li { margin-top: 8px; }
  .stage > .capture-detail { order: 8; margin-top: 18px; }
  .stage > .text-link {
    margin-top: auto; width: 100%; justify-content: center;
    padding: 15px 12px; border-radius: 14px; background: #2e6796;
    color: white; font-size: 18px; min-height: 54px;
  }
  .stage .capture-detail summary { font-size: 16px; text-align: center; }
  .feature { gap: 32px; }
  .feature-copy .pulso-lockup { justify-content: center; }
  .feature-copy > .button, .feature-copy > .text-link { margin-top: 12px; }
  .feature-copy .actions { align-items: stretch; }
  .feature-copy .actions > .text-link { justify-content: center; }
  .visual { padding: 24px 18px; border-radius: 28px; }
  .visual > .capture { display: none; }
  .visual-label { display: block; text-align: center; }
  .evidence-story { display: grid; gap: 14px; margin: 24px 0; }
  .evidence-story > div {
    display: flex; align-items: center; gap: 18px;
    background: #fff; border: 1px solid #dcebe6; border-radius: 18px;
    padding: 20px 16px; font-size: 21px; font-weight: 600;
  }
  .evidence-story span {
    display: grid; place-items: center; width: 44px; height: 44px;
    border-radius: 14px; color: #317c72; background: #eff9f6;
    flex-shrink: 0; font-size: 24px;
  }
  .mini-steps { justify-content: center; }
  .question-options { margin-block: 24px; }
  .question-options a { min-height: 84px; border-radius: 18px; font-size: 18px; }
  .question-options b { font-size: 40px; }
  .tool-cards { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .tool-cards > a { padding: 28px 22px; }
  .tool-cards h3 { font-size: 30px; }
  .tool-cards p { font-size: 17px; }
  .library-path { padding: 28px 20px; }
  .book-mark { width: 130px; height: auto; margin-inline: auto; }
  .library-row { padding-block: 22px; }
  .library-row h3 { font-size: 26px; }
  .ascle-study .ascle { width: min(280px, 85%); height: auto; }
  .ascle-study { text-align: center; }
  .guide-preview { text-align: left; margin-top: 28px; }
  .route-demo, .rhythm { padding: 28px 22px; border-radius: 28px; }
  .route-heading h3 { font-size: 30px; }
  .badge-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .badge-grid article { padding: 32px 24px; }
  .badge-grid svg { height: 170px; }
  .badge-grid h3 { font-size: 28px; }
  .badge-grid p { font-size: 17px; }
  .celebration { width: min(300px, 90%); height: auto; }
  .final-inner { gap: 36px; }
  .footer { padding-block: 36px; }
  /* Menu links remain available if the enhancement script cannot run. */
  html:not(.landing-enhanced) .menu-toggle { display: none; }
  html:not(.landing-enhanced) .guide-tabs { display: none; }
  html:not(.landing-enhanced) #public-nav {
    display: flex; position: static; grid-column: 1 / -1;
    flex-direction: row; flex-wrap: wrap; padding: 8px 0;
  }
  html:not(.landing-enhanced) .account-nav { grid-column: 2 / 4; grid-row: 1; justify-self: end; }
}

/* Readable, native mobile study overview; no miniature dashboard text. */
.mobile-study { display: none; }
@media (max-width: 700px) {
 .hero-copy { order: 1; }
 .mobile-study { order: 2; display: block; width: 100%; min-width: 0; border: 1px solid #d7e4ee; border-radius: 24px; padding: 24px 20px; margin-top: 28px; background: #f3f8fc; text-align: left; }
 .mobile-study-top { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; font-size: 14px; line-height: 1.5; color: #46627a; margin-bottom: 28px; }
 .study-example { background: #fff; padding: 4px 8px; border-radius: 8px; }
 .mobile-study .eyebrow { margin-bottom: 8px; }
 .mobile-study h2 { font-size: clamp(28px, 8vw, 34px); line-height: 1.15; }
 .mobile-study > p:not(.eyebrow) { font-size: 17px; line-height: 1.6; margin-top: 16px; }
 .mobile-study nav { display: grid; gap: 12px; margin-top: 24px; }
 .mobile-study nav a { display: grid; grid-template-columns: 28px minmax(0,1fr) 20px; gap: 10px; align-items: center; min-height: 72px; padding: 14px; border: 1px solid #c4d6e6; border-radius: 16px; background: #e6f0fb; color: #244e78; }
 .mobile-study nav a:nth-child(2) { background: #e8f6ef; color: #28665d; border-color: #c1ddd2; }
 .mobile-study nav a:nth-child(3) { background: #f0eafa; color: #674892; border-color: #d9cce9; }
 .mobile-study nav strong { font-size: 21px; line-height: 1.3; }
 .mobile-study nav span { font-size: 14px; }
 .mobile-study-note { color: #46627a; }
 .study-sequence { order: 3; }
 .hero-capture { display: none; }
}