diff --git a/styles.css b/styles.css
index f484b33..c3b16d5 100644
--- a/styles.css
+++ b/styles.css
@@ -1239,6 +1239,164 @@ textarea:focus {
 }
 
 @media (max-width: 640px) {
+  body[data-page="setup"] .setup-shell {
+    width: min(100% - 0.5rem, 100%);
+    padding: 0.35rem 0 0.5rem;
+  }
+
+  body[data-page="setup"] .hero {
+    grid-template-columns: 1fr;
+    gap: 0.45rem;
+    padding: 0.75rem;
+  }
+
+  body[data-page="setup"] .hero-copy,
+  body[data-page="setup"] .panel {
+    padding: 0.75rem;
+  }
+
+  body[data-page="setup"] .hero-preview,
+  body[data-page="setup"] .side-panel,
+  body[data-page="setup"] #setupSummary {
+    display: none;
+  }
+
+  body[data-page="setup"] .logo-lockup {
+    gap: 0.7rem;
+    margin-bottom: 0.55rem;
+  }
+
+  body[data-page="setup"] .hero-logo-icon {
+    width: 4rem;
+  }
+
+  body[data-page="setup"] .hero-logo {
+    width: min(11.5rem, 46vw);
+  }
+
+  body[data-page="setup"] .hero .eyebrow {
+    margin-bottom: 0.25rem;
+    font-size: 0.68rem;
+  }
+
+  body[data-page="setup"] .hero-setup h1 {
+    font-size: clamp(1.8rem, 8vw, 2.5rem);
+  }
+
+  body[data-page="setup"] .hero-actions {
+    margin-top: 0.75rem;
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 0.45rem;
+  }
+
+  body[data-page="setup"] .hero-actions .button {
+    min-height: 3rem;
+    padding: 0.75rem 0.7rem;
+    border-radius: 14px;
+    font-size: 0.92rem;
+  }
+
+  body[data-page="setup"] .setup-grid {
+    grid-template-columns: 1fr;
+    gap: 0.45rem;
+    margin-top: 0.45rem;
+  }
+
+  body[data-page="setup"] .panel {
+    border-radius: 24px;
+  }
+
+  body[data-page="setup"] .section-heading {
+    margin-bottom: 0.7rem;
+    gap: 0.45rem;
+  }
+
+  body[data-page="setup"] .section-copy {
+    display: none;
+  }
+
+  body[data-page="setup"] .setup-form {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 0.55rem;
+  }
+
+  body[data-page="setup"] .field {
+    gap: 0.25rem;
+  }
+
+  body[data-page="setup"] .field > span,
+  body[data-page="setup"] legend {
+    font-size: 0.9rem;
+  }
+
+  body[data-page="setup"] input,
+  body[data-page="setup"] textarea {
+    padding: 0.75rem 0.85rem;
+    border-radius: 14px;
+  }
+
+  body[data-page="setup"] textarea {
+    min-height: 4.2rem;
+  }
+
+  body[data-page="setup"] .option-grid,
+  body[data-page="setup"] .timing-grid {
+    gap: 0.45rem;
+  }
+
+  body[data-page="setup"] .option-card {
+    min-height: 0;
+    padding: 0.75rem 0.75rem 0.75rem 2rem;
+    border-radius: 18px;
+    gap: 0.2rem;
+  }
+
+  body[data-page="setup"] .option-card input {
+    top: 0.82rem;
+    left: 0.75rem;
+    width: 0.95rem;
+    height: 0.95rem;
+  }
+
+  body[data-page="setup"] .option-card span {
+    font-size: 0.8rem;
+    line-height: 1.25;
+  }
+
+  body[data-page="setup"] .mode-grid .option-card {
+    min-height: 4.45rem;
+  }
+
+  body[data-page="setup"] .mode-grid .option-card span {
+    display: none;
+  }
+
+  body[data-page="setup"] .preset-grid .option-card {
+    padding: 0.7rem 0.45rem;
+    text-align: center;
+  }
+
+  body[data-page="setup"] .preset-grid .option-card input {
+    position: static;
+    margin: 0 auto 0.2rem;
+  }
+
+  body[data-page="setup"] .setup-actions {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 0.45rem;
+  }
+
+  body[data-page="setup"] .setup-actions .button {
+    min-height: 3rem;
+    padding: 0.75rem 0.7rem;
+  }
+
+  body[data-page="setup"] .setup-actions .button.ghost {
+    display: none;
+  }
+
   .phase-body .phase-shell {
     width: min(100% - 0.45rem, 100%);
     gap: 0.35rem;
@@ -1429,6 +1587,69 @@ textarea:focus {
 }
 
 @media (max-width: 480px) {
+  body[data-page="setup"] .hero-copy,
+  body[data-page="setup"] .panel {
+    padding: 0.65rem;
+  }
+
+  body[data-page="setup"] .logo-lockup {
+    gap: 0.55rem;
+    margin-bottom: 0.4rem;
+  }
+
+  body[data-page="setup"] .hero-logo-icon {
+    width: 3.2rem;
+  }
+
+  body[data-page="setup"] .hero-logo {
+    width: min(9.6rem, 42vw);
+  }
+
+  body[data-page="setup"] .hero-setup h1 {
+    font-size: clamp(1.55rem, 7vw, 2rem);
+  }
+
+  body[data-page="setup"] .hero-actions .button {
+    min-height: 2.75rem;
+    padding: 0.65rem 0.55rem;
+    font-size: 0.84rem;
+  }
+
+  body[data-page="setup"] .setup-form {
+    gap: 0.45rem;
+  }
+
+  body[data-page="setup"] .field > span,
+  body[data-page="setup"] legend {
+    font-size: 0.84rem;
+  }
+
+  body[data-page="setup"] input,
+  body[data-page="setup"] textarea {
+    padding: 0.68rem 0.75rem;
+  }
+
+  body[data-page="setup"] textarea {
+    min-height: 3.6rem;
+  }
+
+  body[data-page="setup"] .option-card {
+    padding: 0.68rem 0.6rem 0.68rem 1.8rem;
+  }
+
+  body[data-page="setup"] .option-card strong {
+    font-size: 0.92rem;
+  }
+
+  body[data-page="setup"] .option-card span {
+    font-size: 0.75rem;
+  }
+
+  body[data-page="setup"] .setup-actions .button {
+    min-height: 2.75rem;
+    font-size: 0.88rem;
+  }
+
   .phase-body .phase-header {
     padding: 0.5rem 0.55rem;
   }