/* STEP 1 — CHOOSE: 2 columns x 2 rows on every phone, 4 in one row from 768px */

.tool-stage #stage1 .tool-cards { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-rows: auto; width: 100% !important; max-width: none !important; min-width: 0; gap: 10px; margin: 24px 0 0 !important; padding: 0; box-sizing: border-box; align-items: stretch; }
@media (min-width: 768px) { .tool-stage #stage1 .tool-cards { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 14px; } }
@media (max-width: 767px) { .tool-stage #stage1 .tool-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; } }
@media (max-width: 480px) { .tool-stage #stage1 .tool-cards { gap: 8px; margin-left: -4px !important; margin-right: -4px !important; width: calc(100% + 8px) !important; } }

/* Cards: stack title above description*/

.tool-stage #stage1 .tool-cards > .tool-card { display: flex !important; flex-direction: column; align-items: center; justify-content: center; width: 100% !important; max-width: none !important; min-width: 0 !important; min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 14px 10px; box-sizing: border-box; text-align: center; overflow-wrap: break-word; word-break: normal; hyphens: auto; }

@media (min-width: 420px) {
  html body #stage1#stage1#stage1#stage1 .tool-cards {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-areas: none !important;
    grid-template-rows: none !important;
    grid-auto-flow: row !important;
    column-count: auto !important;
    width: auto !important;
    max-width: none !important;
    gap: 10px !important;
  }
  html body #stage1#stage1#stage1#stage1 .tool-cards > .tool-card {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    max-width: none !important;
  }
}

@media (max-width: 480px) { .tool-stage #stage1 .tool-cards > .tool-card { padding: 11px 6px; border-radius: 12px; } }



/* Card titles */
#stage1 .tool-card strong { display: block; width: 100%; margin: 0 0 4px; font-size: clamp(.84rem, 1.6vw, 1rem); line-height: 1.25; overflow-wrap: break-word; word-break: normal; }
@media (max-width: 480px) { #stage1 .tool-card strong { font-size: .8rem; } }
@media (max-width: 360px) { #stage1 .tool-card strong { font-size: .76rem; } }


/* Card descriptions */
#stage1 .tool-card small { display: block; width: 100%; margin: 0; color: var(--muted); font-size: clamp(.68rem, 1.3vw, .78rem); line-height: 1.3; overflow-wrap: break-word; word-break: normal; }
@media (max-width: 480px) { #stage1 .tool-card small { font-size: .68rem; line-height: 1.25; } }
@media (max-width: 360px) { #stage1 .tool-card small { font-size: .64rem; } }


/* STEP 2 — OLD BELIEF */
#stage2 .big-input { display: block; width: 100%; min-height: 140px; margin: 24px auto 0; padding: 16px; resize: vertical; border: 1px solid var(--border); border-radius: var(--radius-md); background: #0f1215; color: var(--text); font-family: var(--font); font-size: 1rem; font-weight: 300; line-height: 1.5; outline: none; box-shadow: inset 0 1px 10px rgba(0,0,0,.38); transition: background .2s ease, border-color .2s ease, box-shadow .2s ease; }
#stage2 .big-input::placeholder { color: rgba(234,255,247,.38); }
#stage2 .big-input:focus, #stage2 .big-input:active { background: #0f1215; border-color: var(--purple-1); box-shadow: 0 0 20px rgba(139,92,246,.10), inset 0 1px 10px rgba(0,0,0,.42); }
#stage2 .tool-btn { margin-top: 24px; }


/* STEP 3 + STEP 4 — RESULT CARDS */
#belief-output, #reflection-output { width: 100%; max-width: none; min-width: 0; margin: 24px auto 0; }
.belief-result { display: block; width: 100%; max-width: none; min-width: 0; margin: 0 auto; padding: 30px 34px; }
.belief-result:hover { transform: none; }
.belief-line { display: block; width: 100%; text-align: left; }
.belief-line strong { display: block; margin: 0 0 10px; color: var(--purple-1); font-size: 1.18rem; font-weight: 800; letter-spacing: .08em; line-height: 1.35; }
.belief-line span { display: block; color: var(--text); font-size: 1.02rem; font-weight: 300; line-height: 1.65; }
.old-belief { margin: 0 0 34px; padding: 0 0 24px; color: var(--purple-1); border-bottom: 1px solid rgba(167,139,250,.16); }
.new-belief { margin: 0 0 34px; padding: 0 0 24px; border-bottom: 1px solid rgba(167,139,250,.16); }
.new-belief strong { color: var(--green-1); }


/* BELIEF SOFTENING TEXT */
.belief-softening { display: block; width: 100%; margin: 0; padding: 0; text-align: left; }
.belief-softening p { margin: 0 0 13px; color: var(--text); font-family: var(--font); font-size: 1rem; font-weight: 300; line-height: 1.65; }
.belief-softening p:last-child { margin-bottom: 0; }
.repeat-belief { margin: 0; }
.repeat-belief strong { color: var(--green-1); }
.repeat-belief span { font-size: 1rem; }

/* STEP 3 — REFLECTION BUTTON */
#stage3 #beliefReflectBtn { display: block; margin: 28px auto 0; }


/* COMPLETION + NEXT TOOL */
#completion-area { display: none; width: 100%; max-width: 700px; margin: 32px auto 0; text-align: center; }
#completion-message { margin: 0 0 24px; color: var(--text); font-size: .98rem; font-weight: 300; line-height: 1.6; }
#completion-message strong { color: var(--green-1); font-weight: 800; }
#next-tool { text-align: center; }
#next-tool p { margin: 0 0 12px; color: var(--text); font-size: 1rem; line-height: 1.5; }
#next-tool p strong { font-weight: 800; letter-spacing: .04em; }
#next-tool .tool-btn { display: inline-block; width: auto; min-width: 0; margin: 0 auto; text-decoration: none; }


/* TABLET — RESULT CARD SIZING */
@media (max-width: 768px) { .belief-result { padding: 26px 24px; } .belief-line strong { font-size: 1.08rem; } .belief-line span, .belief-softening p { font-size: .96rem; } }

/* MOBILE — RESULT CARD SIZING */
@media (max-width: 480px) { #stage2 .big-input { min-height: 120px; } .belief-result { padding: 24px 20px; } .belief-line strong { font-size: 1rem; } .belief-line span, .belief-softening p { font-size: .94rem; } #completion-area { margin-top: 28px; } #next-tool .tool-btn { width: auto; max-width: 100%; } }