/* v22: mobile layout only. Keep all copy, controls, artwork and native actions. */
@media screen and (max-width:760px), screen and (max-width:960px) and (max-height:500px) {
 /* A phone page scrolls as one document, including intake and paid gates. */
 html[data-mode="journey"]:not([data-intake="welcome"]),
 html[data-mode="journey"]:not([data-intake="welcome"]) body {
  height:auto;min-height:100%;overflow:visible;display:block;
 }
 html[data-mode="journey"]:not([data-intake="welcome"]) #app {
  height:auto;min-height:0;display:block;flex:none;
 }
 html[data-mode="journey"]:not([data-intake="welcome"]) #app>.wrap {
  display:block;flex:none;height:auto;min-height:0;width:calc(100% - 32px);
  max-width:680px;padding:20px 0 calc(24px + env(safe-area-inset-bottom));
 }
 html[data-mode="journey"]:not([data-intake="welcome"]) #reading,
 html[data-mode="journey"]:not([data-intake="welcome"]) .journey-summary {
  display:block;flex:none;height:auto;min-height:0;
 }
 html[data-mode="journey"]:not([data-intake="welcome"]) .guided-screen {
  display:block;height:auto;min-height:0;min-width:0;
 }
 html[data-mode="journey"]:not([data-intake="welcome"]) .guided-screen .guide-panel {
  height:auto;max-height:none;overflow:visible;overscroll-behavior:auto;
  scrollbar-gutter:auto;min-width:0;padding:20px 16px;border-radius:14px;
 }
 /* Two predictable rows instead of an unshrinkable row beside the wordmark. */
 html[data-mode="journey"] .masthead {
  position:relative;top:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:center;gap:4px 8px;min-height:0;padding:12px 16px 8px;
 }
 html[data-mode="journey"] .masthead .brand {grid-column:1/3;grid-row:1;min-width:0;max-width:100%}
 html[data-mode="journey"] .masthead .brand-wordmark {font-size:clamp(17px,4.8vw,23px);letter-spacing:.08em;line-height:1.4}
 html[data-mode="journey"] .masthead-controls {display:contents}
 html[data-mode="journey"] .masthead .guide-utilities {grid-column:1;grid-row:2;min-width:0;flex-wrap:wrap;gap:2px}
 html[data-mode="journey"] .masthead .credit-menu {grid-column:2;grid-row:2}
 html[data-mode="journey"] .masthead .motion-toggle {grid-column:3;grid-row:2}
 html[data-mode="journey"] .masthead :is(.credit-menu,.motion-toggle,.guide-utilities button) {
  justify-content:center;min-width:0;max-width:100%;min-height:44px;
  padding:8px 4px;font-size:12px;line-height:1.5;white-space:normal;overflow-wrap:anywhere;
 }
 html[data-mode="journey"] .masthead .guide-utilities button {flex:1 1 0}
 html[data-mode="journey"] .masthead .motion-toggle [data-motion-label] {max-width:none;white-space:normal}
 html[data-mode="journey"] .masthead .membership-lock-icon {flex:0 0 16px}
 html[data-mode="journey"] .masthead .lang-wrap {
  grid-column:3;grid-row:1;min-width:0;max-width:100%;padding:0 6px;min-height:44px;
 }
 html[data-mode="journey"] .masthead .lang-wrap select {
  width:100%;min-width:0;max-width:100%;font-size:16px;min-height:42px;padding:8px 0;
 }
 /* Home, original four-step indicator and next/back controls. */
 html[data-mode="journey"][data-intake="welcome"] #app>.wrap {width:calc(100% - 32px);max-width:680px}
 html[data-mode="journey"][data-intake="welcome"] .psy-welcome-layout {display:flex;flex-direction:column;min-height:0;gap:20px}
 html[data-mode="journey"][data-intake="welcome"] .psy-welcome-copy {min-width:0;width:100%}
 html[data-mode="journey"][data-intake="welcome"] .psy-welcome h1 {font-size:clamp(30px,8.5vw,42px);line-height:1.45;overflow-wrap:anywhere}
 html[data-mode="journey"] .psy-welcome-art:has(.oraclys-orbit-home) {width:min(360px,100%);max-width:100%;margin:0 auto 12px;order:-1}
 html[data-mode="journey"] .psy-welcome .psy-controls {align-items:stretch;gap:12px}
 html[data-mode="journey"] .psy-welcome .psy-controls .primary {width:100%;min-height:50px;justify-content:center;font-size:16px}
 html[data-mode="journey"] .guide-progress ol {grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
 html[data-mode="journey"] .guide-progress li {flex-direction:column;align-items:flex-start;gap:7px;min-width:0;font-size:12px;line-height:1.5;padding:10px 0}
 html[data-mode="journey"] .guide-progress li b {font-size:12px;overflow-wrap:anywhere}
 html[data-mode="journey"] .guide-progress li span {width:24px;height:24px;flex-basis:24px}
 html[data-mode="journey"]:not([data-intake="welcome"]) .guided-screen .guide-heading {padding:0;margin:18px 0}
 html[data-mode="journey"]:not([data-intake="welcome"]) .guided-screen .guide-heading h1 {font-size:26px;line-height:1.5;overflow-wrap:anywhere}
 html[data-mode="journey"] .guide-kicker {line-height:1.6;flex-wrap:wrap}
 html[data-mode="journey"]:not([data-intake="welcome"]) .guided-screen .guide-dock {
  position:static;display:grid;grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr);
  gap:12px;margin:20px 0 0;padding:16px 0 0;align-items:stretch;
 }
 html[data-mode="journey"]:not([data-intake="welcome"]) .guided-screen .guide-dock>button {
  min-width:0;max-width:100%;width:100%;min-height:48px;padding:12px;
  font-size:15px;line-height:1.6;white-space:normal;overflow-wrap:anywhere;
 }
 html[data-mode="journey"] .guided-screen .guide-dock>button>span {min-width:0}
 .guided-screen .guide-dock>.secondary {grid-column:1;grid-row:1}
 .guided-screen .guide-dock>.primary {grid-column:2;grid-row:1}
 .guided-screen .guide-dock>.guide-navigation-note {grid-column:1/-1;grid-row:2}
 /* Inputs retain their native grouping; controls avoid iOS focus zoom. */
 .guide-panel :is(input:not([type=radio]):not([type=checkbox]),select,textarea),
 .oraclys-checkout :is(input:not([type=checkbox]),select),.psy-nickname input {font-size:16px;max-width:100%;min-width:0}
 html[data-mode="journey"] .guide-panel .birth-fields {grid-template-columns:minmax(0,1fr);gap:22px;margin-top:16px}
 .guide-panel .birth-date-parts {grid-template-columns:minmax(0,1.2fr) repeat(2,minmax(0,1fr));gap:8px}
 .guide-panel .birth-time-parts {grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:8px}
 .guide-panel .birth-field>label,.guide-panel .birth-segment-group>legend {font-size:14px;line-height:1.6;margin-bottom:8px}
 .guide-panel .birth-field small {font-size:12px;line-height:1.7}
 .guide-panel .birth-unknown {align-items:flex-start;font-size:14px;line-height:1.7}
 .guide-panel .birth-unknown input {margin-top:3px}
 .oraclys-birth-presenter {display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
 .oraclys-gender-options {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 .oraclys-gender-options label {min-width:0}
 .oraclys-gender-options span {justify-content:center;min-height:48px;height:100%;padding:10px 8px;font-size:14px;line-height:1.5;text-align:center;overflow-wrap:anywhere}
 .oraclys-presenter-preference {padding:0}
 .oraclys-presenter-preference select {max-width:100%;width:100%;font-size:16px;min-height:48px}
 /* Same three questions, in a single readable column. */
 .guided-screen[data-guide-key^="question-"] .psy-question {min-inline-size:0;max-width:100%}
 .guided-screen[data-guide-key^="question-"] .psy-question legend {max-width:100%;font-size:23px;line-height:1.6;overflow-wrap:anywhere}
 .guided-screen[data-guide-key^="question-"] .psy-choices {grid-template-columns:minmax(0,1fr);gap:12px}
 .guided-screen[data-guide-key^="question-"] .psy-choice {min-width:0;min-height:56px;padding:14px 12px;gap:12px;font-size:16px;line-height:1.75}
 .guided-screen[data-guide-key^="question-"] .psy-choice input {flex:0 0 20px;width:20px;height:20px;margin-top:4px}
 .guided-screen[data-guide-key^="question-"] .psy-choice span {min-width:0;overflow-wrap:anywhere}
 .guided-screen[data-guide-key="topic"][data-guide-index="1"] .topic-grid {grid-template-columns:minmax(0,1fr);gap:12px}
 .guided-screen[data-guide-key="topic"][data-guide-index="1"] .topic-card {min-width:0;padding:16px;gap:6px 12px}
 .guide-panel .circle-journey {grid-template-columns:64px minmax(0,1fr);gap:12px;padding:12px}
 .guide-panel .journey-milestones ol {gap:8px 12px}
 .guide-panel .journey-milestones li {font-size:11px;line-height:1.6}
 /* Full reports keep one outer reading surface and proportional inner spacing. */
 .guide-panel :is(.oraclys-report-section,.combined-reading,.oraclys-reading-main,.analysis-card,.period-month,.period-week,.engine-week) {min-width:0;max-width:100%}
 .guide-panel .combined-reading .oraclys-reading-opening {grid-template-columns:minmax(0,1fr);gap:24px}
 .guide-panel .oraclys-reading-main h2 {font-size:24px;line-height:1.55;margin:8px 0 16px;overflow-wrap:anywhere}
 .guide-panel .combined-lead {font-size:18px;line-height:1.9}
 .guide-panel .oraclys-integrated-body p {font-size:16px;line-height:1.9}
 .guide-panel .oraclys-report-heading {font-size:22px;line-height:1.6;gap:10px;margin-bottom:22px;overflow-wrap:anywhere}
 .guide-panel .oraclys-report-section+.oraclys-report-section {margin-top:32px;padding-top:28px}
 .guide-panel .combined-reading .oraclys-reader-card.is-feature {width:min(230px,100%);max-width:100%;margin-inline:auto}
 .guide-panel :is(.period-month,.period-week,.analysis-period) {padding:18px 14px;margin:20px 0;border-radius:12px}
 .guide-panel .week-segments {grid-template-columns:minmax(0,1fr);gap:12px}
 .guide-panel .week-segments>div {padding:14px}
 .guide-panel .period-month p,.guide-panel .period-week>p,.guide-panel .week-segments p {font-size:16px;line-height:1.9;overflow-wrap:anywhere}
 .guide-panel .analysis-card>p:last-child {font-size:18px;line-height:1.9}
 .guide-panel .analysis-card,.guide-panel .psy-reason-list article {min-width:0}
 .guide-panel .birth-summary dl>div {grid-template-columns:minmax(0,1fr);gap:4px}
 .guide-panel .birth-summary dd {min-width:0;overflow-wrap:anywhere}
 .guide-panel .engine-week {padding:20px 16px;margin:28px 0}
 .engine-week .engine-rituals {grid-template-columns:minmax(0,1fr);gap:20px}
 .engine-week .engine-rituals article>div,.engine-week .engine-tasks span {min-width:0;overflow-wrap:anywhere}
 .engine-week .engine-task-footer {flex-wrap:wrap;gap:8px 16px}
 .engine-week .engine-tasks label {gap:10px;padding:12px 10px}
 .journey-contents :is(.oraclys-reading-contents,.engine-contents) {display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
 .journey-contents :is(.oraclys-reading-contents,.engine-contents)>:is(a,button) {min-width:0;max-width:100%;min-height:44px;white-space:normal;font-size:14px;padding:10px 12px}
 .journey-next {width:100%;max-width:100%;margin-top:22px}
 .journey-next>.journey-forward {width:100%;min-width:0;min-height:50px;white-space:normal}
 .journey-prompt {padding:14px 48px 14px 14px}
 /* Narration, percentage gauge, and the ten objects fit the dialog width. */
 .oraclys-lab-reveal,.oraclys-lab-reveal.is-story,.oraclys-character-dialog,.guide-dialog,.oraclys-checkout {
  width:calc(100% - 24px);max-width:680px;max-height:calc(100dvh - 24px);
  box-sizing:border-box;margin:auto;border-radius:16px;overflow:auto;
 }
 .has-cast .oraclys-lab-reveal-inner {padding:24px 16px 20px}
 .has-cast .oraclys-lab-scene {grid-template-columns:minmax(0,1fr);gap:8px;padding:0;margin:8px 0 20px}
 .oraclys-orbit-analysis {max-width:360px}
 .oraclys-orbit-analysis .oraclys-orbit-stage {height:230px}
 .has-cast .oraclys-lab-ring {width:156px;height:156px;margin:0 auto}
 .has-cast .oraclys-lab-count {font-size:40px;--number-size:40px}
 .has-cast .oraclys-lab-core-label {font-size:11px;line-height:1.4;left:10%;right:10%;top:66%}
 .has-cast .oraclys-lab-steps {grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;font-size:12px;line-height:1.6}
 .has-cast .oraclys-lab-status {font-size:14px;line-height:1.7}
 .oraclys-reveal-story {padding:48px 20px 0}
 .oraclys-reveal-story .oraclys-story-layout {grid-template-columns:minmax(0,1fr);gap:24px;min-height:0}
 .oraclys-reveal-story .oraclys-story-character {width:min(230px,100%);max-width:100%;margin:0 auto}
 .oraclys-story-reading {min-width:0;padding:0}
 .oraclys-reveal-story h2 {font-size:26px;line-height:1.5;overflow-wrap:anywhere}
 .oraclys-story-summary {font-size:17px;line-height:1.85}
 .oraclys-story-body p {font-size:16px;line-height:1.85}
 .oraclys-story-footer {position:static;margin:24px 0 0;padding:18px 0 calc(20px + env(safe-area-inset-bottom))}
 .oraclys-story-continue {width:100%;min-width:0;min-height:50px;padding:14px 16px;font-size:16px;white-space:normal}
 .oraclys-synthesis-framework ol,.oraclys-story-framework ol {grid-template-columns:repeat(5,minmax(0,1fr));gap:18px 8px}
 .oraclys-synthesis-framework .oraclys-artifact {width:100%;max-width:42px;height:auto;aspect-ratio:1}
 .oraclys-synthesis-framework li {font-size:11px;line-height:1.6;overflow-wrap:anywhere}
 .oraclys-character-dialog {padding:48px 20px 0}
 .oraclys-artifact-dialog .oraclys-character-layout {grid-template-columns:minmax(0,1fr);gap:24px}
 .oraclys-artifact-dialog .oraclys-character-layout figure {width:min(220px,100%);max-width:100%;padding:0}
 .oraclys-character-copy h2 {font-size:28px;line-height:1.5;overflow-wrap:anywhere}
 .oraclys-tradition-lead {font-size:18px;line-height:1.85}
 .oraclys-character-navigation {position:static;margin:24px 0 0;padding:14px 0;gap:8px}
 .oraclys-character-navigation button {min-width:0;white-space:normal;overflow-wrap:anywhere;font-size:13px}
 .oraclys-character-navigation .oraclys-tradition-return {font-size:23px}
 .guide-dialog>header {gap:10px;padding:14px 16px;align-items:flex-start}
 .guide-dialog>header h2 {font-size:20px;line-height:1.5;min-width:0;overflow-wrap:anywhere}
 .guide-dialog>header button {flex:none;min-height:44px}
 .guide-dialog-body {padding:20px 16px}
 .guide-dialog .tradition-atlas {grid-template-columns:minmax(0,1fr)}
 .oraclys-tradition-tile {grid-template-columns:56px minmax(0,1fr) 16px;gap:12px;padding:16px 12px}
 .oraclys-tradition-tile>.oraclys-artifact {width:56px;height:56px}
 .oraclys-tradition-tile strong {font-size:20px;line-height:1.5;overflow-wrap:anywhere}
 /* Three original prices remain intact; each plan gets a full-width row. */
 .oraclys-checkout .credit-dialog-inner {padding:28px 20px}
 .oraclys-checkout h2 {font-size:24px;line-height:1.5;padding-right:28px}
 .oraclys-plan-options {grid-template-columns:minmax(0,1fr);gap:10px}
 .oraclys-plan-choice {flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;min-height:64px;padding:16px 30px 16px 16px}
 .oraclys-plan-choice span {font-size:15px;line-height:1.5}
 .oraclys-plan-choice strong {font-size:20px;line-height:1.4}
 .oraclys-plan-check {bottom:auto;top:50%;transform:translateY(-50%)}
 .oraclys-checkout .pass-consent {font-size:14px;line-height:1.75;gap:10px}
 .oraclys-checkout .pass-consent input {flex:0 0 20px;width:20px;height:20px}
 .oraclys-checkout .pass-login {min-width:0}
 .oraclys-checkout .pass-login button {max-width:100%;white-space:normal}
 .oraclys-checkout-action .primary {min-width:0;white-space:normal;font-size:16px;line-height:1.6;padding:14px 16px}
 .oraclys-paid-veil {min-height:0;margin:24px 0;border-radius:16px}
 .oraclys-veil-invitation {padding:30px 16px}
 .oraclys-veil-invitation h3 {line-height:1.5;overflow-wrap:anywhere}
 .oraclys-veil-invitation .oraclys-unlock {box-sizing:border-box;width:100%;min-width:0;max-width:100%;white-space:normal;font-size:15px;line-height:1.6}
 .oraclys-unlock svg {flex:0 0 18px}
}
@media screen and (max-width:480px) {
 .guide-panel .personal-pillars {grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .guide-panel .personal-pillar {min-width:0;padding:14px 10px}
 .guide-panel .personal-chart-heading {align-items:flex-start;flex-wrap:wrap;gap:10px}
 .guide-panel .personal-chart-heading h2 {min-width:0;line-height:1.5}
 .guide-panel .psy-controls {display:flex;flex-wrap:wrap;gap:12px}
 .guide-panel .psy-controls>:is(a,button) {min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere}
}