diff --git a/docs/images/answer_loop.gif b/docs/images/answer_loop.gif
index 36c9373..e2ac234 100644
Binary files a/docs/images/answer_loop.gif and b/docs/images/answer_loop.gif differ
diff --git a/docs/images/end_screen.png b/docs/images/end_screen.png
index b7f66b1..806acbe 100644
Binary files a/docs/images/end_screen.png and b/docs/images/end_screen.png differ
diff --git a/docs/images/home.png b/docs/images/home.png
index 27d2175..e43f008 100644
Binary files a/docs/images/home.png and b/docs/images/home.png differ
diff --git a/docs/images/model_answer.png b/docs/images/model_answer.png
index a921c54..43d5be0 100644
Binary files a/docs/images/model_answer.png and b/docs/images/model_answer.png differ
diff --git a/docs/images/plan.png b/docs/images/plan.png
index 0a4d40e..0f99930 100644
Binary files a/docs/images/plan.png and b/docs/images/plan.png differ
diff --git a/docs/images/preflight.png b/docs/images/preflight.png
index ace1a2a..9b4b41f 100644
Binary files a/docs/images/preflight.png and b/docs/images/preflight.png differ
diff --git a/docs/images/review_hypercorrection.png b/docs/images/review_hypercorrection.png
index f2dc3e8..1923ada 100644
Binary files a/docs/images/review_hypercorrection.png and b/docs/images/review_hypercorrection.png differ
diff --git a/docs/images/runner_free_recall.png b/docs/images/runner_free_recall.png
index 373f943..52dd2e3 100644
Binary files a/docs/images/runner_free_recall.png and b/docs/images/runner_free_recall.png differ
diff --git a/docs/images/runner_mcq.png b/docs/images/runner_mcq.png
index 64b2261..3c5cf98 100644
Binary files a/docs/images/runner_mcq.png and b/docs/images/runner_mcq.png differ
diff --git a/src/app/achievements/page.tsx b/src/app/achievements/page.tsx
index 8ffea60..1521119 100644
--- a/src/app/achievements/page.tsx
+++ b/src/app/achievements/page.tsx
@@ -103,7 +103,7 @@ export default function AchievementsPage() {
               <h2 style={{ ...sectionHeadingStyle, color: catInfo.color, margin: 0 }}>{catInfo.label}</h2>
               <span style={{ fontSize: "0.75rem", color: "var(--color-text-dim)" }}>{earned}/{badges.length}</span>
             </div>
-            <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
+            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))", gap: 16 }}>
               {badges.map((badge) => {
                 const isEarned = earnedSet.has(badge.key);
                 const earnedDate = earnedMap.get(badge.key);
@@ -116,8 +116,8 @@ export default function AchievementsPage() {
                     style={{
                       display: "flex",
                       alignItems: "center",
-                      gap: "0.75rem",
-                      padding: "0.75rem 1rem",
+                      gap: "0.85rem",
+                      padding: "1.25rem",
                       background: isEarned ? "var(--color-bg-done)" : "var(--color-bg-card)",
                       border: `1px solid ${isEarned ? "var(--color-border-done)" : "var(--color-border)"}`,
                       borderRadius: "var(--radius)",
@@ -198,9 +198,9 @@ export default function AchievementsPage() {
 // ---- Styles ----
 
 const mainStyle: React.CSSProperties = {
-  maxWidth: 700,
+  maxWidth: 1100,
   margin: "0 auto",
-  padding: "1.5rem 1rem",
+  padding: "1.5rem clamp(24px, 4vw, 32px)",
   fontFamily: "var(--font-body)",
   color: "var(--color-text)",
   backgroundColor: "var(--color-bg)",
@@ -227,7 +227,7 @@ const overviewCardStyle: React.CSSProperties = {
   border: "1px solid var(--color-border-subtle)",
   borderRadius: "var(--radius)",
   boxShadow: "var(--shadow-card)",
-  padding: "1.25rem",
+  padding: "1.5rem",
   marginBottom: "2rem",
 };
 
diff --git a/src/app/chat/page.tsx b/src/app/chat/page.tsx
index 7ca6756..96fdbd9 100644
--- a/src/app/chat/page.tsx
+++ b/src/app/chat/page.tsx
@@ -244,6 +244,7 @@ export default function ChatPage() {
           <h1 style={titleStyle}>Chat</h1>
           {messages.length > 0 && (
             <button
+              className="compact-btn"
               onClick={clearChat}
               style={clearButton}
               type="button"
@@ -289,6 +290,7 @@ export default function ChatPage() {
 
       {/* Messages */}
       <div style={messagesContainer} role="log" aria-live="polite">
+        <div style={threadColumn}>
         {hasMore && (
           <div style={{ textAlign: "center", paddingBottom: "0.75rem" }}>
             <button
@@ -345,7 +347,7 @@ export default function ChatPage() {
               >
                 {msg.role === "user" ? "YOU" : "STUDY BOT"}
               </div>
-              <div style={{ fontSize: "0.9rem", lineHeight: 1.6, whiteSpace: "pre-wrap" }}>
+              <div style={{ fontSize: "0.95rem", lineHeight: 1.65, whiteSpace: "pre-wrap" }}>
                 {renderAnswerWithCitations(msg.content, msg.citations)}
               </div>
             </div>
@@ -462,6 +464,7 @@ export default function ChatPage() {
         )}
 
         <div ref={messagesEndRef} />
+        </div>
       </div>
 
       {/* Input area */}
@@ -477,7 +480,7 @@ export default function ChatPage() {
               : "Ask a question about your materials..."
           }
           disabled={courses.length === 0 || loading}
-          rows={2}
+          rows={3}
           style={inputStyle}
           onKeyDown={(e) => {
             if (e.key === "Enter" && !e.shiftKey) {
@@ -487,6 +490,7 @@ export default function ChatPage() {
           }}
         />
         <button
+          className="compact-btn"
           onClick={sendMessage}
           disabled={!input.trim() || !selectedCourse || loading || courses.length === 0}
           aria-label="Send message"
@@ -537,14 +541,21 @@ const pageContainer: React.CSSProperties = {
   display: "flex",
   flexDirection: "column",
   height: "calc(100vh - 52px)",
-  maxWidth: 700,
+  maxWidth: 1100,
   margin: "0 auto",
-  padding: "0 1rem",
+  padding: "0 clamp(1.5rem, 4vw, 2rem)",
   fontFamily: "var(--font-body)",
   color: "var(--color-text)",
 };
 
+const threadColumn: React.CSSProperties = {
+  width: "100%",
+  maxWidth: 900,
+  margin: "0 auto",
+};
+
 const headerStyle: React.CSSProperties = {
+  ...threadColumn,
   padding: "1.25rem 0 1rem",
   borderBottom: "1px solid var(--color-border-subtle)",
   flexShrink: 0,
@@ -565,16 +576,16 @@ const userBubble: React.CSSProperties = {
   background: "var(--color-bg-selected)",
   border: "1px solid var(--color-border)",
   borderRadius: "var(--radius)",
-  padding: "0.75rem 1rem",
-  marginLeft: "min(2rem, 10%)",
+  padding: "1rem 1.25rem",
+  marginLeft: "min(3rem, 12%)",
 };
 
 const assistantBubble: React.CSSProperties = {
   background: "var(--color-bg-card)",
   border: "1px solid var(--color-border-subtle)",
   borderRadius: "var(--radius)",
-  padding: "0.75rem 1rem",
-  marginRight: "min(2rem, 10%)",
+  padding: "1rem 1.25rem",
+  marginRight: "min(3rem, 12%)",
 };
 
 const citationButton: React.CSSProperties = {
@@ -582,8 +593,8 @@ const citationButton: React.CSSProperties = {
   alignItems: "center",
   gap: "0.5rem",
   width: "100%",
-  padding: "0.4rem 0.6rem",
-  fontSize: "0.75rem",
+  padding: "0.55rem 0.8rem",
+  fontSize: "0.8rem",
   fontFamily: "inherit",
   background: "var(--color-bg)",
   color: "var(--color-text-muted)",
@@ -629,14 +640,15 @@ const citationExpanded: React.CSSProperties = {
   border: "1px solid var(--color-border-subtle)",
   borderTop: "none",
   borderRadius: "0 0 var(--radius-sm) var(--radius-sm)",
-  padding: "0.5rem 0.6rem",
+  padding: "0.6rem 0.8rem",
   color: "var(--color-text-secondary)",
 };
 
 const inputContainer: React.CSSProperties = {
+  ...threadColumn,
   display: "flex",
-  gap: "0.5rem",
-  padding: "0.75rem 0",
+  gap: "0.6rem",
+  padding: "0.85rem 0",
   borderTop: "1px solid var(--color-border-subtle)",
   flexShrink: 0,
   position: "sticky",
@@ -646,8 +658,8 @@ const inputContainer: React.CSSProperties = {
 
 const inputStyle: React.CSSProperties = {
   flex: 1,
-  padding: "0.6rem 0.75rem",
-  fontSize: "0.85rem",
+  padding: "0.75rem 0.9rem",
+  fontSize: "0.95rem",
   fontFamily: "inherit",
   background: "var(--color-bg-input)",
   color: "var(--color-text)",
@@ -657,8 +669,8 @@ const inputStyle: React.CSSProperties = {
 };
 
 const sendButton: React.CSSProperties = {
-  padding: "0.5rem 1rem",
-  fontSize: "0.85rem",
+  padding: "0.7rem 1.5rem",
+  fontSize: "0.95rem",
   fontFamily: "var(--font-display)",
   fontWeight: 700,
   background: "var(--color-primary)",
diff --git a/src/app/flashcards/page.tsx b/src/app/flashcards/page.tsx
index 6c6787b..44bcf45 100644
--- a/src/app/flashcards/page.tsx
+++ b/src/app/flashcards/page.tsx
@@ -350,6 +350,7 @@ export default function FlashcardsPage() {
           @keyframes xp-float { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-30px); } }
         `}</style>
 
+        <div style={studyColumn}>
         <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "1rem" }}>
           <div style={{ display: "flex", gap: "0.5rem" }}>
             <button onClick={() => setView("list")} style={backBtn}>
@@ -371,14 +372,14 @@ export default function FlashcardsPage() {
           </div>
         </div>
 
-        <h2 style={{ ...titleStyle, fontSize: "1.3rem", marginBottom: "0.5rem" }}>{studyData.deck.title}</h2>
+        <h2 style={{ ...titleStyle, fontSize: "1.45rem", marginBottom: "0.5rem" }}>{studyData.deck.title}</h2>
 
         {/* Stats bar */}
         <div style={{ display: "flex", gap: "0.5rem", marginBottom: "0.75rem", flexWrap: "wrap" }}>
           {(["new", "learning", "review", "mastered"] as const).map((s) => {
             const count = studyData.stats[`${s}Count` as keyof typeof studyData.stats];
             return (
-              <span key={s} style={{ fontSize: "0.7rem", color: STATUS_COLORS[s], background: STATUS_TINTS[s], padding: "0.15rem 0.5rem", borderRadius: 3 }}>
+              <span key={s} style={{ fontSize: "0.75rem", color: STATUS_COLORS[s], background: STATUS_TINTS[s], padding: "0.2rem 0.6rem", borderRadius: 3 }}>
                 {STATUS_LABELS[s]}: {count}
               </span>
             );
@@ -389,10 +390,10 @@ export default function FlashcardsPage() {
         <div style={progressBarBg}>
           <div style={{ ...progressBarFill, width: `${progressPct}%` }} />
         </div>
-        <p style={{ fontSize: "0.75rem", color: "var(--color-text-dim)", marginBottom: "0.5rem", textAlign: "center" }}>
+        <p style={{ fontSize: "0.8rem", color: "var(--color-text-dim)", marginBottom: "0.5rem", textAlign: "center" }}>
           Card {cardIndex + 1} of {total}
         </p>
-        <p style={{ fontSize: "0.65rem", color: "var(--color-text-dim)", marginBottom: "1rem", textAlign: "center" }}>
+        <p style={{ fontSize: "0.7rem", color: "var(--color-text-dim)", marginBottom: "1rem", textAlign: "center" }}>
           <kbd style={kbdStyle}>Space</kbd> flip &nbsp;
           <kbd style={kbdStyle}>1</kbd> Again &nbsp;
           <kbd style={kbdStyle}>2</kbd> Hard &nbsp;
@@ -425,15 +426,15 @@ export default function FlashcardsPage() {
             }}
           >
             <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "0.75rem" }}>
-              <span style={{ fontSize: "0.65rem", color: flipped ? "var(--color-info)" : "var(--color-text-muted)", letterSpacing: "0.08em" }}>
+              <span style={{ fontSize: "0.75rem", color: flipped ? "var(--color-info)" : "var(--color-text-muted)", letterSpacing: "0.08em" }}>
                 {flipped ? "ANSWER" : "QUESTION"}
               </span>
-              <span style={{ fontSize: "0.6rem", color: STATUS_COLORS[card.status], background: STATUS_TINTS[card.status], padding: "0.1rem 0.4rem", borderRadius: 3 }}>
+              <span style={{ fontSize: "0.7rem", color: STATUS_COLORS[card.status], background: STATUS_TINTS[card.status], padding: "0.15rem 0.5rem", borderRadius: 3 }}>
                 {STATUS_LABELS[card.status]}
                 {card.intervalDays > 0 && ` · ${card.intervalDays}d`}
               </span>
             </div>
-            <div aria-live="polite" style={{ fontSize: "1.05rem", lineHeight: 1.7, whiteSpace: "pre-wrap" }}>
+            <div aria-live="polite" style={{ fontSize: "1.25rem", lineHeight: 1.7, whiteSpace: "pre-wrap" }}>
               {flipped ? card.back : card.front}
             </div>
             {card.tags && card.tags.length > 0 && (
@@ -447,18 +448,18 @@ export default function FlashcardsPage() {
         </div>
 
         {!flipped && (
-          <p style={{ fontSize: "0.7rem", color: "var(--color-text-dim)", textAlign: "center", margin: "0.5rem 0" }}>
+          <p style={{ fontSize: "0.8rem", color: "var(--color-text-dim)", textAlign: "center", margin: "0.75rem 0" }}>
             Tap card or press Space to flip
           </p>
         )}
 
         {/* Rating buttons — only show when flipped */}
         {flipped && !sessionComplete && (
-          <div style={{ marginTop: "0.75rem" }}>
-            <p style={{ fontSize: "0.7rem", color: "var(--color-text-dim)", textAlign: "center", marginBottom: "0.5rem" }}>
+          <div style={{ marginTop: "1rem" }}>
+            <p style={{ fontSize: "0.8rem", color: "var(--color-text-dim)", textAlign: "center", marginBottom: "0.6rem" }}>
               How well did you know this?
             </p>
-            <div style={{ display: "flex", gap: "0.4rem" }}>
+            <div style={{ display: "flex", gap: "0.6rem" }}>
               {(["AGAIN", "HARD", "GOOD", "EASY"] as const).map((rating, i) => (
                 <button
                   key={rating}
@@ -473,7 +474,7 @@ export default function FlashcardsPage() {
                     opacity: reviewing ? 0.5 : 1,
                   }}
                 >
-                  <span style={{ fontSize: "0.7rem", opacity: 0.6 }}>{i + 1}</span>
+                  <span style={{ fontSize: "0.75rem", opacity: 0.6 }}>{i + 1}</span>
                   <span>{rating.charAt(0) + rating.slice(1).toLowerCase()}</span>
                 </button>
               ))}
@@ -511,6 +512,7 @@ export default function FlashcardsPage() {
         )}
 
         {error && <p role="alert" style={{ color: "var(--color-error)", fontSize: "0.85rem", marginTop: "0.5rem" }}>{error}</p>}
+        </div>
       </div>
       </ErrorBoundary>
     );
@@ -525,7 +527,7 @@ export default function FlashcardsPage() {
       </div>
 
       {courses.length > 0 ? (
-        <div style={{ marginBottom: "1.5rem" }}>
+        <div style={{ marginBottom: "2rem", maxWidth: 640 }}>
           <label style={labelStyle}>Course</label>
           <select
             aria-label="Select course"
@@ -592,35 +594,38 @@ export default function FlashcardsPage() {
       {decks.length > 0 && (
         <div>
           <h2 style={{ ...sectionTitleStyle, color: "var(--color-text-muted)", fontWeight: 600, textTransform: "uppercase" }}>YOUR DECKS</h2>
-          {decks.map((deck) => (
-            <div key={deck.id} style={{ display: "flex", gap: "0.5rem", marginBottom: "0.5rem" }}>
-              <button
-                onClick={() => openStudyMode(deck.id)}
-                disabled={loadingDeck}
-                style={{ ...deckCard, flex: 1 }}
-              >
-                <div style={{ flex: 1, textAlign: "left" }}>
-                  <div style={{ fontSize: "0.9rem", fontWeight: 600, marginBottom: "0.2rem" }}>
-                    {deck.title}
-                  </div>
-                  <div style={{ fontSize: "0.75rem", color: "var(--color-text-dim)" }}>
-                    {deck.card_count} cards · {new Date(deck.created_at).toLocaleDateString("en-US", { month: "short", day: "numeric" })}
+          <div style={deckGrid}>
+            {decks.map((deck) => (
+              <div key={deck.id} style={deckCard}>
+                <div style={{ display: "flex", alignItems: "flex-start", gap: "0.75rem" }}>
+                  <div style={{ flex: 1 }}>
+                    <div style={{ fontSize: "1rem", fontWeight: 600, marginBottom: "0.3rem", lineHeight: 1.4 }}>
+                      {deck.title}
+                    </div>
+                    <div style={{ fontSize: "0.8rem", color: "var(--color-text-dim)" }}>
+                      {deck.card_count} cards · {new Date(deck.created_at).toLocaleDateString("en-US", { month: "short", day: "numeric" })}
+                    </div>
                   </div>
+                  <button
+                    className="compact-btn"
+                    onClick={() => handleDeleteDeck(deck.id)}
+                    disabled={deleting === deck.id}
+                    aria-label={`Delete ${deck.title}`}
+                    style={{ ...deleteBtnStyle, padding: "0.05rem 0.5rem" }}
+                  >
+                    {deleting === deck.id ? "..." : "×"}
+                  </button>
                 </div>
-                <span style={{ color: "var(--color-primary)", fontSize: "0.85rem", fontWeight: 600 }}>
+                <button
+                  onClick={() => openStudyMode(deck.id)}
+                  disabled={loadingDeck}
+                  style={studyDeckBtn}
+                >
                   Study →
-                </span>
-              </button>
-              <button
-                onClick={() => handleDeleteDeck(deck.id)}
-                disabled={deleting === deck.id}
-                aria-label={`Delete ${deck.title}`}
-                style={deleteBtnStyle}
-              >
-                {deleting === deck.id ? "..." : "×"}
-              </button>
-            </div>
-          ))}
+                </button>
+              </div>
+            ))}
+          </div>
         </div>
       )}
     </div>
@@ -630,30 +635,53 @@ export default function FlashcardsPage() {
 // --- Styles ---
 
 const pageContainer: React.CSSProperties = {
-  maxWidth: 700,
+  maxWidth: 1100,
   margin: "0 auto",
-  padding: "1.5rem 1rem",
+  padding: "1.5rem clamp(1.5rem, 4vw, 2rem)",
   fontFamily: "var(--font-body)",
   color: "var(--color-text)",
 };
 
+const studyColumn: React.CSSProperties = {
+  width: "100%",
+  maxWidth: 760,
+  margin: "0 auto",
+};
+
+const deckGrid: React.CSSProperties = {
+  display: "grid",
+  gridTemplateColumns: "repeat(auto-fill, minmax(min(320px, 100%), 1fr))",
+  gap: 16,
+};
+
 const deckCard: React.CSSProperties = {
   display: "flex",
-  alignItems: "center",
-  padding: "0.85rem 1rem",
+  flexDirection: "column",
+  padding: "1.25rem 1.5rem",
   fontFamily: "inherit",
   background: "var(--color-bg-card)",
   color: "var(--color-text)",
   border: "1px solid var(--color-border)",
   borderRadius: "var(--radius)",
-  cursor: "pointer",
   textAlign: "left",
 };
 
+const studyDeckBtn: React.CSSProperties = {
+  marginTop: "auto",
+  padding: "0.85rem 0 0",
+  alignSelf: "flex-start",
+  fontFamily: "inherit",
+  fontSize: "0.9rem",
+  fontWeight: 600,
+  color: "var(--color-primary)",
+  background: "none",
+  border: "none",
+  cursor: "pointer",
+};
 
 const cardStyle: React.CSSProperties = {
-  minHeight: 200,
-  padding: "1.5rem",
+  minHeight: 280,
+  padding: "2rem 2.25rem",
   borderRadius: "var(--radius-lg)",
   boxShadow: "var(--shadow-card)",
   border: "2px solid var(--color-border)",
@@ -683,9 +711,9 @@ const ratingBtn: React.CSSProperties = {
   display: "flex",
   flexDirection: "column",
   alignItems: "center",
-  gap: "0.15rem",
-  padding: "0.6rem 0.3rem",
-  fontSize: "0.8rem",
+  gap: "0.2rem",
+  padding: "0.85rem 0.4rem",
+  fontSize: "0.9rem",
   fontFamily: "inherit",
   fontWeight: 600,
   background: "var(--color-bg-card)",
@@ -695,13 +723,13 @@ const ratingBtn: React.CSSProperties = {
 };
 
 const backBtn: React.CSSProperties = {
-  fontSize: "0.8rem",
+  fontSize: "0.85rem",
   fontFamily: "inherit",
   color: "var(--color-text-dim)",
   background: "none",
   border: "1px solid var(--color-border-subtle)",
   borderRadius: "var(--radius-sm)",
-  padding: "0.3rem 0.6rem",
+  padding: "0.4rem 0.75rem",
   cursor: "pointer",
 };
 
diff --git a/src/app/guides/page.tsx b/src/app/guides/page.tsx
index 3911f65..e16b2e4 100644
--- a/src/app/guides/page.tsx
+++ b/src/app/guides/page.tsx
@@ -168,7 +168,7 @@ export default function GuidesPage() {
 
       {/* Course selector + guide type picker */}
       {courses.length > 0 ? (
-        <div style={{ marginBottom: "1.5rem" }}>
+        <div style={{ marginBottom: "2rem", maxWidth: 640 }}>
           <label style={labelStyle}>Course</label>
           <select
             value={selectedCourse}
@@ -259,34 +259,36 @@ export default function GuidesPage() {
       {guides.length > 0 && (
         <div>
           <h2 style={{ ...sectionTitleStyle, color: "var(--color-text-muted)", fontWeight: 600, textTransform: "uppercase" }}>YOUR GUIDES</h2>
+          <div style={guidesGrid}>
           {guides.map((guide) => (
-            <div key={guide.id} style={{ marginBottom: "0.75rem" }}>
-              <div style={{ display: "flex", gap: "0.35rem" }}>
+            <div key={guide.id} style={expandedGuide === guide.id ? { gridColumn: "1 / -1" } : undefined}>
+              <div style={{ position: "relative" }}>
                 <button
                   aria-expanded={expandedGuide === guide.id}
                   onClick={() =>
                     setExpandedGuide(expandedGuide === guide.id ? null : guide.id)
                   }
-                  style={{ ...guideHeader, flex: 1 }}
+                  style={{ ...guideHeader, paddingRight: "3.5rem" }}
                 >
-                  <div style={{ flex: 1, textAlign: "left" }}>
-                    <span style={guideTypeTag}>{guide.guide_type.replace(/_/g, " ")}</span>
-                    <span style={{ fontSize: "0.9rem" }}>{guide.title}</span>
-                  </div>
-                  <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
-                    <span style={{ fontSize: "0.7rem", color: "var(--color-text-dim)" }}>
+                  <div style={{ flex: 1, textAlign: "left", minWidth: 0 }}>
+                    <div style={{ marginBottom: "0.4rem" }}>
+                      <span style={guideTypeTag}>{guide.guide_type.replace(/_/g, " ")}</span>
+                    </div>
+                    <div style={{ fontSize: "0.95rem", fontWeight: 600, lineHeight: 1.4 }}>{guide.title}</div>
+                    <div style={{ fontSize: "0.75rem", color: "var(--color-text-dim)", marginTop: "0.4rem" }}>
                       {new Date(guide.created_at).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })}
-                    </span>
-                    <span style={{ color: "var(--color-text-dim)" }}>
-                      {expandedGuide === guide.id ? "▼" : "▶"}
-                    </span>
+                    </div>
                   </div>
+                  <span style={{ color: "var(--color-text-dim)", marginLeft: "0.5rem" }}>
+                    {expandedGuide === guide.id ? "▼" : "▶"}
+                  </span>
                 </button>
                 <button
+                  className="compact-btn"
                   onClick={() => handleDeleteGuide(guide.id)}
                   disabled={deleting === guide.id}
                   aria-label={`Delete ${guide.title}`}
-                  style={deleteBtnStyle}
+                  style={{ ...deleteBtnStyle, position: "absolute", top: 12, right: 12, padding: "0.05rem 0.5rem" }}
                 >
                   {deleting === guide.id ? "..." : "×"}
                 </button>
@@ -294,6 +296,7 @@ export default function GuidesPage() {
 
               {expandedGuide === guide.id && (
                 <div style={guideContent}>
+                  <div style={guideProse}>
                   {renderGuideContent(guide)}
                   <div style={{ marginTop: "1rem", borderTop: "1px solid var(--color-border-subtle)", paddingTop: "0.75rem", textAlign: "right" }}>
                     <button
@@ -334,10 +337,12 @@ export default function GuidesPage() {
                       Download as Markdown
                     </button>
                   </div>
+                  </div>
                 </div>
               )}
             </div>
           ))}
+          </div>
         </div>
       )}
     </div>
@@ -357,16 +362,16 @@ function renderGuideContent(guide: StudyGuide): React.ReactNode {
         <div>
           {guide.sections.map((s, i) => (
             <div key={`concept-${i}`} style={conceptCard}>
-              <h3 style={{ margin: "0 0 0.4rem", fontSize: "0.95rem", color: "var(--color-primary)" }}>
+              <h3 style={{ margin: "0 0 0.4rem", fontSize: "1.05rem", color: "var(--color-primary)" }}>
                 {s.concept || `Concept ${i + 1}`}
               </h3>
               {s.explanation && (
-                <p style={{ margin: "0 0 0.3rem", fontSize: "0.85rem", lineHeight: 1.6 }}>
+                <p style={{ margin: "0 0 0.3rem", fontSize: "0.9rem", lineHeight: 1.65 }}>
                   {s.explanation}
                 </p>
               )}
               {s.importance && (
-                <p style={{ margin: 0, fontSize: "0.75rem", color: "var(--color-info)", fontStyle: "italic" }}>
+                <p style={{ margin: 0, fontSize: "0.8rem", color: "var(--color-info)", fontStyle: "italic" }}>
                   Why it matters: {s.importance}
                 </p>
               )}
@@ -380,11 +385,11 @@ function renderGuideContent(guide: StudyGuide): React.ReactNode {
         <div>
           {guide.sections.map((s, i) => (
             <div key={`faq-${i}`} style={conceptCard}>
-              <p style={{ margin: "0 0 0.4rem", fontSize: "0.9rem", fontWeight: 600, color: "var(--color-text)" }}>
+              <p style={{ margin: "0 0 0.4rem", fontSize: "0.95rem", fontWeight: 600, color: "var(--color-text)" }}>
                 Q: {s.question || `Question ${i + 1}`}
               </p>
               {s.answer && (
-                <p style={{ margin: 0, fontSize: "0.85rem", lineHeight: 1.6, color: "var(--color-text-secondary)" }}>
+                <p style={{ margin: 0, fontSize: "0.9rem", lineHeight: 1.65, color: "var(--color-text-secondary)" }}>
                   {s.answer}
                 </p>
               )}
@@ -398,12 +403,12 @@ function renderGuideContent(guide: StudyGuide): React.ReactNode {
         <div>
           {guide.sections.map((s, i) => (
             <div key={`cheat-${i}`} style={conceptCard}>
-              <h3 style={{ margin: "0 0 0.4rem", fontSize: "0.9rem", color: "var(--color-warning)" }}>
+              <h3 style={{ margin: "0 0 0.4rem", fontSize: "1rem", color: "var(--color-warning)" }}>
                 {s.topic || `Topic ${i + 1}`}
               </h3>
               {s.content && (
                 <div
-                  style={{ fontSize: "0.8rem", lineHeight: 1.6, whiteSpace: "pre-wrap", fontFamily: "var(--font-mono)" }}
+                  style={{ fontSize: "0.85rem", lineHeight: 1.6, whiteSpace: "pre-wrap", fontFamily: "var(--font-mono)", overflowX: "auto" }}
                 >
                   {s.content}
                 </div>
@@ -421,13 +426,20 @@ function renderGuideContent(guide: StudyGuide): React.ReactNode {
 // --- Styles ---
 
 const pageContainer: React.CSSProperties = {
-  maxWidth: 700,
+  maxWidth: 1100,
   margin: "0 auto",
-  padding: "1.5rem 1rem",
+  padding: "1.5rem clamp(1.5rem, 4vw, 2rem)",
   fontFamily: "var(--font-body)",
   color: "var(--color-text)",
 };
 
+const guidesGrid: React.CSSProperties = {
+  display: "grid",
+  gridTemplateColumns: "repeat(auto-fill, minmax(min(320px, 100%), 1fr))",
+  gap: 16,
+  alignItems: "start",
+};
+
 const typeButton: React.CSSProperties = {
   flex: "1 1 auto",
   minWidth: 0,
@@ -443,8 +455,8 @@ const guideHeader: React.CSSProperties = {
   display: "flex",
   alignItems: "center",
   width: "100%",
-  padding: "0.75rem 1rem",
-  fontSize: "0.85rem",
+  padding: "1.25rem 1.5rem",
+  fontSize: "0.9rem",
   fontFamily: "inherit",
   background: "var(--color-bg-card)",
   color: "var(--color-text)",
@@ -470,15 +482,20 @@ const guideContent: React.CSSProperties = {
   border: "1px solid var(--color-border)",
   borderTop: "none",
   borderRadius: "0 0 var(--radius) var(--radius)",
-  padding: "1rem 1.25rem",
+  padding: "1.75rem clamp(1rem, 4vw, 2.5rem) 1.5rem",
   boxShadow: "var(--shadow-card)",
 };
 
+const guideProse: React.CSSProperties = {
+  width: "100%",
+  maxWidth: 820,
+  margin: "0 auto",
+};
 
 const conceptCard: React.CSSProperties = {
   background: "var(--color-bg-card)",
   border: "1px solid var(--color-border)",
   borderRadius: "var(--radius-sm)",
-  padding: "0.75rem 1rem",
-  marginBottom: "0.5rem",
+  padding: "1rem 1.25rem",
+  marginBottom: "0.75rem",
 };
diff --git a/src/app/learn/page.tsx b/src/app/learn/page.tsx
index 386d1fa..35ef045 100644
--- a/src/app/learn/page.tsx
+++ b/src/app/learn/page.tsx
@@ -220,12 +220,12 @@ export default function LearnPage() {
               ))}
             </div>
           )}
-          <div style={{ display: "flex", alignItems: "center", gap: "0.5rem", marginBottom: "0.3rem" }}>
-            <span style={{ color: "var(--color-primary)", fontWeight: 700, fontSize: "0.95rem" }}>
+          <div style={{ display: "flex", alignItems: "center", gap: "0.5rem", marginBottom: "0.4rem" }}>
+            <span style={{ color: "var(--color-primary)", fontWeight: 700, fontSize: "1.35rem", fontFamily: "var(--font-display)" }}>
               Recommended: {modeLabel(recs.next_session.mode)}
             </span>
           </div>
-          <p style={{ color: "var(--color-text-dim)", fontSize: "0.8rem", margin: "0 0 0.5rem", lineHeight: 1.4 }}>
+          <p style={{ color: "var(--color-text-dim)", fontSize: "0.95rem", margin: "0 0 0.75rem", lineHeight: 1.5, maxWidth: "60ch" }}>
             {recs.next_session.reason}
           </p>
           {recs.overdue_objectives.length > 0 && (
@@ -241,7 +241,7 @@ export default function LearnPage() {
           <button
             onClick={startRecommendedSession}
             disabled={startingSession}
-            style={{ ...primaryBtnStyle, display: "inline-block", marginTop: "0.5rem", fontSize: "0.85rem", padding: "0.5rem 1.25rem", opacity: startingSession ? 0.6 : 1, cursor: startingSession ? "wait" : "pointer", border: "none" }}
+            style={{ ...primaryBtnStyle, display: "inline-block", marginTop: "0.6rem", fontSize: "0.95rem", padding: "0.6rem 1.5rem", opacity: startingSession ? 0.6 : 1, cursor: startingSession ? "wait" : "pointer", border: "none" }}
           >
             {startingSession ? "Creating session..." : `Start ${modeLabel(recs.next_session.mode)} Session`}
           </button>
@@ -254,51 +254,51 @@ export default function LearnPage() {
       {/* Quick actions — focused on what matters now */}
       <section style={{ marginBottom: "1.5rem" }}>
         <h3 style={sectionLabelStyle}>Quick Actions</h3>
-        <div style={{ display: "flex", flexDirection: "column", gap: "0.6rem" }}>
+        <div style={quickActionsGridStyle}>
           {course.deckCount > 0 && course.dueCardCount > 0 && (
             <Link href="/flashcards" style={{ ...quickActionStyle, borderLeftColor: "var(--color-warning)" }}>
               <div style={{ flex: 1 }}>
-                <div style={{ fontWeight: 600, color: "var(--color-text)", fontSize: "0.95rem" }}>Review Due Cards</div>
-                <div style={{ fontSize: "0.8rem", color: "var(--color-text-faint)", marginTop: "0.1rem" }}>
+                <div style={{ fontWeight: 600, color: "var(--color-text)", fontSize: "1.05rem" }}>Review Due Cards</div>
+                <div style={{ fontSize: "0.85rem", color: "var(--color-text-faint)", marginTop: "0.25rem", lineHeight: 1.4 }}>
                   {course.dueCardCount} card{course.dueCardCount !== 1 ? "s" : ""} ready for spaced repetition review
                 </div>
               </div>
-              <span style={{ color: "var(--color-warning)", fontWeight: 700, fontSize: "0.9rem", flexShrink: 0 }}>Review</span>
+              <span style={{ color: "var(--color-warning)", fontWeight: 700, fontSize: "0.9rem" }}>Review →</span>
             </Link>
           )}
           {course.processedDocCount > 0 && course.deckCount === 0 && (
             <Link href="/flashcards" style={{ ...quickActionStyle, borderLeftColor: "var(--color-info)" }}>
               <div style={{ flex: 1 }}>
-                <div style={{ fontWeight: 600, color: "var(--color-text)", fontSize: "0.95rem" }}>Generate Flashcards</div>
-                <div style={{ fontSize: "0.8rem", color: "var(--color-text-faint)", marginTop: "0.1rem" }}>
+                <div style={{ fontWeight: 600, color: "var(--color-text)", fontSize: "1.05rem" }}>Generate Flashcards</div>
+                <div style={{ fontSize: "0.85rem", color: "var(--color-text-faint)", marginTop: "0.25rem", lineHeight: 1.4 }}>
                   {course.processedDocCount} doc{course.processedDocCount !== 1 ? "s" : ""} processed and ready
                 </div>
               </div>
-              <span style={{ color: "var(--color-info)", fontWeight: 700, fontSize: "0.9rem", flexShrink: 0 }}>Generate</span>
+              <span style={{ color: "var(--color-info)", fontWeight: 700, fontSize: "0.9rem" }}>Generate →</span>
             </Link>
           )}
           {course.guideCount === 0 && course.processedDocCount > 0 && (
             <Link href="/guides" style={{ ...quickActionStyle, borderLeftColor: "var(--color-review)" }}>
               <div style={{ flex: 1 }}>
-                <div style={{ fontWeight: 600, color: "var(--color-text)", fontSize: "0.95rem" }}>Create Study Guide</div>
-                <div style={{ fontSize: "0.8rem", color: "var(--color-text-faint)", marginTop: "0.1rem" }}>
+                <div style={{ fontWeight: 600, color: "var(--color-text)", fontSize: "1.05rem" }}>Create Study Guide</div>
+                <div style={{ fontSize: "0.85rem", color: "var(--color-text-faint)", marginTop: "0.25rem", lineHeight: 1.4 }}>
                   Key concepts, FAQs, or cheat sheets from your materials
                 </div>
               </div>
-              <span style={{ color: "var(--color-review)", fontWeight: 700, fontSize: "0.9rem", flexShrink: 0 }}>Create</span>
+              <span style={{ color: "var(--color-review)", fontWeight: 700, fontSize: "0.9rem" }}>Create →</span>
             </Link>
           )}
           <Link href="/chat" style={{ ...quickActionStyle, borderLeftColor: "var(--color-success)" }}>
             <div style={{ flex: 1 }}>
-              <div style={{ fontWeight: 600, color: "var(--color-text)", fontSize: "0.95rem" }}>Ask a Question</div>
-              <div style={{ fontSize: "0.8rem", color: "var(--color-text-faint)", marginTop: "0.1rem" }}>
+              <div style={{ fontWeight: 600, color: "var(--color-text)", fontSize: "1.05rem" }}>Ask a Question</div>
+              <div style={{ fontSize: "0.85rem", color: "var(--color-text-faint)", marginTop: "0.25rem", lineHeight: 1.4 }}>
                 Chat with your {course.courseName} materials
               </div>
             </div>
-            <span style={{ color: "var(--color-success)", fontWeight: 700, fontSize: "0.9rem", flexShrink: 0 }}>Chat</span>
+            <span style={{ color: "var(--color-success)", fontWeight: 700, fontSize: "0.9rem" }}>Chat →</span>
           </Link>
           {course.dueCardCount === 0 && course.deckCount > 0 && (
-            <div style={{ textAlign: "center", padding: "0.75rem", color: "var(--color-success)", fontSize: "0.85rem", background: "var(--color-bg-done)", borderRadius: "var(--radius)", border: "1px solid var(--color-border-done)" }}>
+            <div style={{ gridColumn: "1 / -1", textAlign: "center", padding: "1rem", color: "var(--color-success)", fontSize: "0.9rem", background: "var(--color-bg-done)", borderRadius: "var(--radius)", border: "1px solid var(--color-border-done)" }}>
               All caught up! No cards due for review right now.
             </div>
           )}
@@ -311,7 +311,7 @@ export default function LearnPage() {
       {!(course.processedDocCount > 0 && course.deckCount > 0) && (
       <section style={{ marginBottom: "1.5rem" }}>
         <h3 style={sectionLabelStyle}>Suggested Learning Path</h3>
-        <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
+        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))", gap: 16 }}>
           <LearningStep
             step={1}
             title="Upload Course Materials"
@@ -368,7 +368,7 @@ function LearningStep({ step, title, description, done, href }: {
       display: "flex",
       alignItems: "center",
       gap: "0.75rem",
-      padding: "0.75rem 1rem",
+      padding: "1rem 1.25rem",
       background: done ? "var(--color-bg-done)" : "var(--color-bg-card)",
       border: `1px solid ${done ? "var(--color-border-done)" : "var(--color-border)"}`,
       borderRadius: "var(--radius)",
@@ -411,9 +411,9 @@ function LearningStep({ step, title, description, done, href }: {
 // ---- Styles ----
 
 const mainStyle: React.CSSProperties = {
-  maxWidth: 700,
+  maxWidth: 1100,
   margin: "0 auto",
-  padding: "1.5rem 1rem",
+  padding: "1.5rem clamp(24px, 4vw, 32px)",
   fontFamily: "var(--font-body)",
   color: "var(--color-text)",
   backgroundColor: "var(--color-bg)",
@@ -421,7 +421,7 @@ const mainStyle: React.CSSProperties = {
 };
 
 const headingStyle: React.CSSProperties = {
-  fontSize: "1.5rem",
+  fontSize: "2rem",
   margin: "0 0 1.5rem",
   color: "var(--color-primary)",
   fontWeight: 700,
@@ -450,22 +450,29 @@ const recommendationStyle: React.CSSProperties = {
   border: "1px solid var(--color-border)",
   borderLeft: "3px solid var(--color-border)",
   borderRadius: "var(--radius)",
-  padding: "1rem 1.25rem",
+  padding: "1.5rem clamp(1.25rem, 3vw, 2rem)",
   marginBottom: "1.5rem",
   boxShadow: "var(--shadow-card)",
 };
 
+const quickActionsGridStyle: React.CSSProperties = {
+  display: "grid",
+  gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))",
+  gap: 16,
+};
+
 const quickActionStyle: React.CSSProperties = {
   display: "flex",
-  alignItems: "center",
+  flexDirection: "column",
   gap: "0.75rem",
-  padding: "0.85rem 1rem",
+  padding: "1.25rem 1.5rem",
   background: "var(--color-bg-card)",
   border: "1px solid var(--color-border)",
   borderLeft: "3px solid var(--color-border)",
   borderRadius: "var(--radius)",
   textDecoration: "none",
   cursor: "pointer",
+  boxShadow: "var(--shadow-card)",
 };
 
 const emptyCardStyle: React.CSSProperties = {
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 7ded8b4..22a9e1f 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -268,8 +268,8 @@ export default function DashboardPage() {
       <section style={{ marginBottom: "2rem" }}>
         <h2 style={sectionHeadingStyle}>Today</h2>
         {todaySessions.length === 0 ? (
-          <div style={emptyCardStyle}>
-            <p style={{ fontSize: "1.1rem", marginBottom: "0.5rem" }}>
+          <div style={plans.length === 0 ? { ...emptyCardStyle, padding: "3.5rem 2rem" } : emptyCardStyle}>
+            <p style={{ fontSize: plans.length === 0 ? "1.25rem" : "1.1rem", marginBottom: "0.5rem" }}>
               {plans.length === 0 ? "Welcome to Study Bot" : "No sessions today"}
             </p>
             <p style={{ color: "var(--color-text-dim)", fontSize: "0.9rem", margin: 0 }}>
@@ -284,33 +284,61 @@ export default function DashboardPage() {
             )}
           </div>
         ) : (
-          <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
+          <div
+            style={
+              todaySessions.length === 1
+                ? { display: "flex", flexDirection: "column", gap: 16 }
+                : { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(320px, 1fr))", gap: 16 }
+            }
+          >
             {todaySessions.map((item) => {
+              const single = todaySessions.length === 1;
               const mc = MODE_COLORS[item.mode] || "var(--color-info)";
               const actionable = item.status === "SCHEDULED" || item.status === "IN_PROGRESS";
-              const cardContent = (
+              const actionLabel = item.status === "IN_PROGRESS" ? "Continue" : "Start";
+              const cardContent = single ? (
+                  // Single session: one wide row so the lone card feels substantial.
                   <div style={{ display: "flex", alignItems: "center", gap: "0.75rem", flexWrap: "wrap" }}>
                     <span style={{ color: "var(--color-text-dim)", fontSize: "0.9rem", minWidth: "6rem" }}>
                       {formatTime(item.start_time)} - {formatTime(item.end_time)}
                     </span>
-                    <span style={{ fontWeight: 600, color: "var(--color-text)" }}>
+                    <span style={{ fontWeight: 600, color: "var(--color-text)", fontSize: "1.15rem" }}>
                       {MODE_LABELS[item.mode] || item.mode}
                     </span>
                     <span style={{ color: "var(--color-text-muted)", flex: 1, minWidth: 0, fontSize: "0.95rem", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
                       {formatScope(item.topic_scope)}
                     </span>
-                    {actionable && (
-                      <span style={primaryBtnStyle}>
-                        {item.status === "IN_PROGRESS" ? "Continue" : "Start"}
-                      </span>
-                    )}
+                    {actionable && <span style={primaryBtnStyle}>{actionLabel}</span>}
                     {item.status === "DONE" && (
                       <span style={{ color: "var(--color-success)", fontSize: "0.85rem" }}>Done</span>
                     )}
                   </div>
+              ) : (
+                  // Grid cards: stacked layout that reads cleanly at ~320px wide.
+                  <div style={{ display: "flex", flexDirection: "column", gap: "0.4rem", flex: 1 }}>
+                    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: "0.75rem" }}>
+                      <span style={{ color: "var(--color-text-dim)", fontSize: "0.9rem" }}>
+                        {formatTime(item.start_time)} - {formatTime(item.end_time)}
+                      </span>
+                      {item.status === "DONE" && (
+                        <span style={{ color: "var(--color-success)", fontSize: "0.85rem" }}>Done</span>
+                      )}
+                    </div>
+                    <span style={{ fontWeight: 600, color: "var(--color-text)" }}>
+                      {MODE_LABELS[item.mode] || item.mode}
+                    </span>
+                    <span style={{ color: "var(--color-text-muted)", fontSize: "0.95rem", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
+                      {formatScope(item.topic_scope)}
+                    </span>
+                    {actionable && (
+                      <span style={{ ...primaryBtnStyle, alignSelf: "flex-start", marginTop: "auto" }}>{actionLabel}</span>
+                    )}
+                  </div>
               );
               const cardStyle = {
                 ...sessionCardStyle,
+                padding: single ? "1.75rem 2rem" : "1.25rem 1.5rem",
+                ...(single ? {} : { display: "flex" as const, flexDirection: "column" as const }),
                 textDecoration: "none" as const,
                 cursor: actionable ? "pointer" as const : "default" as const,
                 borderLeft: `3px solid ${mc}`,
@@ -370,7 +398,7 @@ export default function DashboardPage() {
               </Link>
             </div>
             {gameState && gameState.achievements.length > 0 ? (
-              <div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
+              <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(110px, 1fr))", gap: "0.6rem" }}>
                 {gameState.achievements.map((a) => {
                   const info = BADGE_MAP[a.badgeType];
                   if (!info) return null;
@@ -507,8 +535,8 @@ function OnboardingFlow({
           border: "1px solid var(--color-border)",
           borderRadius: "var(--radius-lg)",
           boxShadow: "var(--shadow-card)",
-          padding: "2rem",
-          maxWidth: 480,
+          padding: "2.5rem",
+          maxWidth: 560,
           width: "100%",
           textAlign: "center",
           fontFamily: "var(--font-body)",
@@ -686,10 +714,18 @@ function ActivityHeatmap({ activity }: { activity: ActivityDay[] }) {
   const cellGap = 2;
   const step = cellSize + cellGap;
 
+  // Natural drawing size; the SVGs scale up to fill the container on wide
+  // viewports (via viewBox + width 100%) and scroll horizontally on narrow ones.
+  const naturalWidth = weeks.length * step;
+
   return (
     <div style={{ overflowX: "auto", WebkitOverflowScrolling: "touch" }}>
-      <div style={{ display: "flex", marginBottom: "0.2rem", marginLeft: 0, height: 14, minWidth: weeks.length * step }}>
-        <svg width={weeks.length * step} height={14} style={{ display: "block" }}>
+      <div style={{ minWidth: naturalWidth }}>
+        <svg
+          viewBox={`0 0 ${naturalWidth} 14`}
+          width="100%"
+          style={{ display: "block", marginBottom: "0.2rem" }}
+        >
           {monthLabels.map((m, i) => (
             <text
               key={`${m.label}-${i}`}
@@ -703,38 +739,38 @@ function ActivityHeatmap({ activity }: { activity: ActivityDay[] }) {
             </text>
           ))}
         </svg>
-      </div>
-      <svg
-        width={weeks.length * step}
-        height={7 * step}
-        style={{ display: "block" }}
-      >
-        {weeks.map((week, wi) =>
-          week.map((day) => (
-            <rect
-              key={day.date}
-              x={wi * step}
-              y={day.dayOfWeek * step}
-              width={cellSize}
-              height={cellSize}
-              rx={2}
-              fill={getColor(day.count)}
-              stroke="var(--color-bg)"
-              strokeWidth={0.5}
-            >
-              <title>{day.date}: {day.count} session{day.count !== 1 ? "s" : ""}</title>
-            </rect>
-          ))
-        )}
-      </svg>
-      <div style={{ display: "flex", alignItems: "center", gap: "0.3rem", marginTop: "0.4rem", justifyContent: "flex-end" }}>
-        <span style={{ fontSize: "0.55rem", color: "var(--color-text-dim)" }}>Less</span>
-        {[0, 1, 2, 3, 5].map((n) => (
-          <svg key={n} width={cellSize} height={cellSize}>
-            <rect width={cellSize} height={cellSize} rx={2} fill={getColor(n)} />
-          </svg>
-        ))}
-        <span style={{ fontSize: "0.55rem", color: "var(--color-text-dim)" }}>More</span>
+        <svg
+          viewBox={`0 0 ${naturalWidth} ${7 * step}`}
+          width="100%"
+          style={{ display: "block" }}
+        >
+          {weeks.map((week, wi) =>
+            week.map((day) => (
+              <rect
+                key={day.date}
+                x={wi * step}
+                y={day.dayOfWeek * step}
+                width={cellSize}
+                height={cellSize}
+                rx={2}
+                fill={getColor(day.count)}
+                stroke="var(--color-bg)"
+                strokeWidth={0.5}
+              >
+                <title>{day.date}: {day.count} session{day.count !== 1 ? "s" : ""}</title>
+              </rect>
+            ))
+          )}
+        </svg>
+        <div style={{ display: "flex", alignItems: "center", gap: "0.3rem", marginTop: "0.4rem", justifyContent: "flex-end" }}>
+          <span style={{ fontSize: "0.55rem", color: "var(--color-text-dim)" }}>Less</span>
+          {[0, 1, 2, 3, 5].map((n) => (
+            <svg key={n} width={cellSize} height={cellSize}>
+              <rect width={cellSize} height={cellSize} rx={2} fill={getColor(n)} />
+            </svg>
+          ))}
+          <span style={{ fontSize: "0.55rem", color: "var(--color-text-dim)" }}>More</span>
+        </div>
       </div>
     </div>
   );
@@ -743,9 +779,9 @@ function ActivityHeatmap({ activity }: { activity: ActivityDay[] }) {
 // ---- Styles ----
 
 const mainStyle: React.CSSProperties = {
-  maxWidth: 700,
+  maxWidth: 1100,
   margin: "0 auto",
-  padding: "1.5rem 1rem",
+  padding: "1.5rem 1.75rem",
   fontFamily: "var(--font-body)",
   color: "var(--color-text)",
   backgroundColor: "var(--color-bg)",
@@ -753,7 +789,7 @@ const mainStyle: React.CSSProperties = {
 };
 
 const headingStyle: React.CSSProperties = {
-  fontSize: "1.5rem",
+  fontSize: "1.6rem",
   margin: "0 0 1.5rem",
   color: "var(--color-text)",
   fontWeight: 700,
diff --git a/src/app/plan/page.tsx b/src/app/plan/page.tsx
index 88d053d..a73a162 100644
--- a/src/app/plan/page.tsx
+++ b/src/app/plan/page.tsx
@@ -475,8 +475,8 @@ export default function PlanPage() {
             </button>
           )}
         </div>
-        <form onSubmit={handleSubmit} style={{ maxWidth: 500 }}>
-          <div style={{ marginBottom: "1.25rem" }}>
+        <form onSubmit={handleSubmit} style={{ maxWidth: 720 }}>
+          <div style={formRowStyle}>
             <label style={labelStyle}>
               Course
               <input
@@ -489,8 +489,6 @@ export default function PlanPage() {
                 style={inputStyle}
               />
             </label>
-          </div>
-          <div style={{ marginBottom: "1.25rem" }}>
             <label style={labelStyle}>
               Exam
               <input
@@ -503,7 +501,7 @@ export default function PlanPage() {
               />
             </label>
           </div>
-          <div style={{ marginBottom: "1.25rem" }}>
+          <div style={formRowStyle}>
             <label style={labelStyle}>
               Exam date
               <input
@@ -515,8 +513,8 @@ export default function PlanPage() {
               />
             </label>
           </div>
-          <div style={{ marginBottom: "1.5rem", display: "flex", gap: "1rem" }}>
-            <label style={{ ...labelStyle, flex: 1 }}>
+          <div style={{ ...formRowStyle, marginBottom: "1.5rem" }}>
+            <label style={labelStyle}>
               Study from
               <input
                 type="time"
@@ -525,7 +523,7 @@ export default function PlanPage() {
                 style={inputStyle}
               />
             </label>
-            <label style={{ ...labelStyle, flex: 1 }}>
+            <label style={labelStyle}>
               Until
               <input
                 type="time"
@@ -681,13 +679,14 @@ export default function PlanPage() {
               {formatDayLabel(dayItems[0].start_time, tz)}
               {isToday && <span style={{ color: "var(--color-primary)" }}> · Today</span>}
             </h2>
+            <div style={cardGridStyle}>
             {dayItems.map((item) => (
               <a
                 key={item.id || item.session_id}
                 href={item.session_url}
                 target="_blank"
                 rel="noopener noreferrer"
-                style={sessionCardStyle}
+                style={dayItems.length === 1 ? { ...sessionCardStyle, gridColumn: "1 / -1" } : sessionCardStyle}
               >
                 <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: "0.25rem" }}>
                   <span style={{ fontWeight: "bold", color: "var(--color-text)" }}>
@@ -710,6 +709,7 @@ export default function PlanPage() {
                 </div>
               </a>
             ))}
+            </div>
           </div>
         );
       })}
@@ -724,12 +724,14 @@ export default function PlanPage() {
       {otherPlans.length > 0 && (
         <div style={{ marginTop: "2rem" }}>
           <h2 style={dayHeadingStyle}>Other plans</h2>
-          {otherPlans.map((p) => (
-            <button key={p.plan_id} onClick={() => switchPlan(p.plan_id)} style={otherPlanRowStyle}>
-              <span>{p.course_name} · {p.exam_name}</span>
-              <span style={{ color: "var(--color-text-dim)", fontSize: "0.85rem" }}>{formatCalendarDate(p.exam_date)}</span>
-            </button>
-          ))}
+          <div style={cardGridStyle}>
+            {otherPlans.map((p) => (
+              <button key={p.plan_id} onClick={() => switchPlan(p.plan_id)} style={otherPlanRowStyle}>
+                <span>{p.course_name} · {p.exam_name}</span>
+                <span style={{ color: "var(--color-text-dim)", fontSize: "0.85rem" }}>{formatCalendarDate(p.exam_date)}</span>
+              </button>
+            ))}
+          </div>
         </div>
       )}
     </div>
@@ -743,8 +745,8 @@ const pageStyle: React.CSSProperties = {
   background: "var(--color-bg)",
   color: "var(--color-text)",
   minHeight: "100vh",
-  padding: "1.5rem 1rem",
-  maxWidth: 700,
+  padding: "1.5rem clamp(1.5rem, 4vw, 2rem)",
+  maxWidth: 1100,
   margin: "0 auto",
 };
 
@@ -766,6 +768,21 @@ const dayHeadingStyle: React.CSSProperties = {
   fontFamily: "var(--font-display)",
 };
 
+// Responsive grid for peer cards (sessions within a day, other plans)
+const cardGridStyle: React.CSSProperties = {
+  display: "grid",
+  gridTemplateColumns: "repeat(auto-fit, minmax(320px, 1fr))",
+  gap: 16,
+};
+
+// Two-column form row on desktop, collapses to one column on narrow screens
+const formRowStyle: React.CSSProperties = {
+  display: "grid",
+  gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))",
+  gap: "1rem",
+  marginBottom: "1.25rem",
+};
+
 const labelStyle: React.CSSProperties = {
   display: "flex",
   flexDirection: "column",
@@ -788,6 +805,7 @@ function dropZoneStyle(busy: boolean): React.CSSProperties {
   return {
     background: "transparent",
     fontFamily: "inherit",
+    width: "100%",
     border: "2px dashed var(--color-border)",
     borderRadius: "var(--radius)",
     padding: "1.25rem",
@@ -867,8 +885,8 @@ function googleBtnStyle(disabled: boolean): React.CSSProperties {
 const sessionCardStyle: React.CSSProperties = {
   display: "block",
   background: "var(--color-bg-card)",
-  padding: "0.75rem 1rem",
-  marginBottom: "0.4rem",
+  padding: "1.25rem 1.5rem",
+  minWidth: 0,
   border: "1px solid var(--color-border-subtle)",
   borderLeft: "3px solid var(--color-primary)",
   textDecoration: "none",
@@ -877,7 +895,7 @@ const sessionCardStyle: React.CSSProperties = {
 
 const examRowStyle: React.CSSProperties = {
   background: "var(--color-bg-card)",
-  padding: "0.75rem 1rem",
+  padding: "1.25rem 1.5rem",
   border: "1px solid var(--color-border-subtle)",
   borderLeft: "3px solid var(--color-warning)",
   borderRadius: "var(--radius-sm)",
@@ -894,8 +912,8 @@ const otherPlanRowStyle: React.CSSProperties = {
   textAlign: "left",
   background: "var(--color-bg-card)",
   color: "var(--color-text-secondary)",
-  padding: "0.6rem 1rem",
-  marginBottom: "0.4rem",
+  padding: "1.25rem 1.5rem",
+  minWidth: 0,
   border: "1px solid var(--color-border-subtle)",
   borderRadius: "var(--radius-sm)",
   fontFamily: "inherit",
diff --git a/src/app/s/[sessionId]/screens/break-screen.tsx b/src/app/s/[sessionId]/screens/break-screen.tsx
index d3bfdb4..480a63a 100644
--- a/src/app/s/[sessionId]/screens/break-screen.tsx
+++ b/src/app/s/[sessionId]/screens/break-screen.tsx
@@ -27,13 +27,13 @@ export function BreakScreen({ breakState, onBreakEnd }: Props) {
   const seconds = remaining % 60;
 
   return (
-    <div style={{ textAlign: "center", padding: "3rem 0" }}>
+    <div style={{ textAlign: "center", padding: "4rem 0" }}>
       <div
         style={{
-          fontSize: "0.85rem",
-          letterSpacing: "0.1em",
+          fontSize: "1rem",
+          letterSpacing: "0.12em",
           color: "var(--color-warning)",
-          marginBottom: "1rem",
+          marginBottom: "1.25rem",
           fontFamily: "var(--font-display)",
         }}
       >
@@ -42,38 +42,42 @@ export function BreakScreen({ breakState, onBreakEnd }: Props) {
 
       <div
         style={{
-          fontSize: "3.5rem",
+          fontSize: "5rem",
           fontWeight: 700,
           fontVariantNumeric: "tabular-nums",
-          marginBottom: "1.5rem",
+          marginBottom: "2rem",
           color: "var(--color-warning)",
           fontFamily: "var(--font-display)",
+          lineHeight: 1,
         }}
       >
         {String(minutes).padStart(2, "0")}:{String(seconds).padStart(2, "0")}
       </div>
 
+      {/* Checklist stays a comfortable reading column, centered on the
+          wider stage rather than stretched across it. */}
       <div
         style={{
           background: "var(--color-bg-card)",
           border: "1px solid var(--color-border)",
           borderRadius: "var(--radius)",
-          padding: "1.25rem",
-          marginBottom: "2rem",
+          padding: "1.5rem 1.75rem",
+          margin: "0 auto 2rem",
+          maxWidth: 560,
           textAlign: "left",
         }}
       >
         <p
           style={{
             margin: "0 0 0.75rem",
-            fontSize: "0.9rem",
+            fontSize: "0.95rem",
             fontWeight: 600,
             color: "var(--color-info)",
           }}
         >
           DO THIS NOW:
         </p>
-        <ul style={{ margin: 0, paddingLeft: "1.25rem", fontSize: "0.95rem", lineHeight: 1.8 }}>
+        <ul style={{ margin: 0, paddingLeft: "1.25rem", fontSize: "1.05rem", lineHeight: 1.9 }}>
           <li>Stand up and stretch</li>
           <li>Get water</li>
           <li>Look at something far away (20-20-20 rule)</li>
@@ -81,15 +85,15 @@ export function BreakScreen({ breakState, onBreakEnd }: Props) {
         </ul>
       </div>
 
-      <p style={{ fontSize: "0.85rem", color: "var(--color-text-dim)", marginBottom: "1rem" }}>
+      <p style={{ fontSize: "0.95rem", color: "var(--color-text-dim)", marginBottom: "1.25rem" }}>
         Cycle {breakState.current_cycle + 1} of {breakState.total_cycles}
       </p>
 
       <button
         onClick={onBreakEnd}
         style={{
-          padding: "0.5rem 1.5rem",
-          fontSize: "0.9rem",
+          padding: "0.6rem 1.75rem",
+          fontSize: "0.95rem",
           fontFamily: "var(--font-body)",
           background: "transparent",
           color: "var(--color-text-dim)",
diff --git a/src/app/s/[sessionId]/screens/end-screen.tsx b/src/app/s/[sessionId]/screens/end-screen.tsx
index 3dd3154..c531574 100644
--- a/src/app/s/[sessionId]/screens/end-screen.tsx
+++ b/src/app/s/[sessionId]/screens/end-screen.tsx
@@ -154,10 +154,10 @@ export function EndScreen({ run, session, onNewRun }: Props) {
         >
           SESSION COMPLETE
         </div>
-        <h1 style={{ fontSize: "1.6rem", margin: "0 0 0.25rem", fontFamily: "var(--font-display)", color: "var(--color-primary)" }}>
+        <h1 style={{ fontSize: "2rem", margin: "0 0 0.35rem", fontFamily: "var(--font-display)", color: "var(--color-primary)" }}>
           {session.course_name} | {session.exam_name}
         </h1>
-        <p style={{ color: "var(--color-text-muted)", margin: 0 }}>
+        <p style={{ color: "var(--color-text-muted)", margin: 0, fontSize: "1.05rem" }}>
           {session.mode_label}: {session.topic_scope}
         </p>
       </div>
@@ -182,13 +182,13 @@ export function EndScreen({ run, session, onNewRun }: Props) {
         </div>
       )}
 
-      {/* Stats grid */}
+      {/* Stats grid: 4-across on desktop, 2x2 on phones (auto-fit grid) */}
       <div
         style={{
           display: "grid",
-          gridTemplateColumns: "1fr 1fr",
-          gap: "0.75rem",
-          marginBottom: "1.5rem",
+          gridTemplateColumns: "repeat(auto-fit, minmax(160px, 1fr))",
+          gap: "1rem",
+          marginBottom: "1.75rem",
         }}
       >
         <StatCard label="Accuracy" value={`${accuracyPct}%`} color={accuracyColor(metrics.accuracy)} />
@@ -211,12 +211,12 @@ export function EndScreen({ run, session, onNewRun }: Props) {
             background: "var(--color-bg-card)",
             border: "1px solid var(--color-border)",
             borderRadius: "var(--radius)",
-            padding: "1rem",
+            padding: "1.5rem 1.75rem",
             marginBottom: "1.5rem",
           }}
         >
           <h2 style={sectionTitle}>RECOMMENDED FOLLOW-UPS</h2>
-          <ul style={{ margin: 0, paddingLeft: "1.25rem", fontSize: "0.95rem", lineHeight: 1.8 }}>
+          <ul style={{ margin: 0, paddingLeft: "1.25rem", fontSize: "1rem", lineHeight: 1.9 }}>
             {followups.map((f, i) => (
               <li key={i}>
                 {f.label} — <span style={{ color: "var(--color-info)" }}>{f.date}</span>
@@ -280,10 +280,10 @@ function CalibrationDashboard({ attempts }: { attempts?: RunData["attempts"] })
   const color = gap < 0.15 ? "var(--color-success)" : gap < 0.3 ? "var(--color-warning)" : "var(--color-error)";
 
   return (
-    <div style={{ background: "var(--color-bg-card)", border: "1px solid var(--color-border)", borderRadius: "var(--radius)", padding: "1rem", marginBottom: "1.5rem" }}>
+    <div style={{ background: "var(--color-bg-card)", border: "1px solid var(--color-border)", borderRadius: "var(--radius)", padding: "1.5rem 1.75rem", marginBottom: "1.5rem" }}>
       <h2 style={sectionTitle}>CONFIDENCE CALIBRATION</h2>
       <div style={{ display: "flex", alignItems: "center", gap: "0.75rem", marginBottom: overconfidentCount > 0 || underconfidentCount > 0 ? "0.5rem" : 0 }}>
-        <span style={{ fontSize: "1.05rem", color, fontWeight: 600 }}>{label}</span>
+        <span style={{ fontSize: "1.15rem", color, fontWeight: 600 }}>{label}</span>
         <span style={{ fontSize: "0.85rem", color: "var(--color-text-dim)" }}>({(gap * 100).toFixed(0)}% gap)</span>
       </div>
       {overconfidentCount > 0 && (
@@ -307,12 +307,12 @@ function StatCard({ label, value, color }: { label: string; value: string; color
         background: "var(--color-bg-card)",
         border: "1px solid var(--color-border)",
         borderRadius: "var(--radius)",
-        padding: "0.85rem",
+        padding: "1.25rem 1rem",
         textAlign: "center",
       }}
     >
-      <div style={{ fontSize: "1.5rem", fontWeight: 700, color, fontFamily: "var(--font-display)" }}>{value}</div>
-      <div style={{ fontSize: "0.8rem", color: "var(--color-text-muted)", marginTop: "0.25rem" }}>{label}</div>
+      <div style={{ fontSize: "1.9rem", fontWeight: 700, color, fontFamily: "var(--font-display)" }}>{value}</div>
+      <div style={{ fontSize: "0.85rem", color: "var(--color-text-muted)", marginTop: "0.35rem" }}>{label}</div>
     </div>
   );
 }
@@ -324,10 +324,10 @@ function accuracyColor(accuracy: number): string {
 }
 
 const sectionTitle: React.CSSProperties = {
-  fontSize: "0.8rem",
+  fontSize: "0.85rem",
   letterSpacing: "0.08em",
   color: "var(--color-info)",
-  margin: "0 0 0.5rem",
+  margin: "0 0 0.65rem",
   fontFamily: "var(--font-display)",
 };
 
@@ -347,8 +347,8 @@ const secondaryBtn: React.CSSProperties = {
 
 const primaryBtn: React.CSSProperties = {
   width: "100%",
-  padding: "0.75rem 1.5rem",
-  fontSize: "1.05rem",
+  padding: "1rem 1.5rem",
+  fontSize: "1.15rem",
   fontFamily: "var(--font-body)",
   fontWeight: 600,
   background: "var(--color-primary)",
diff --git a/src/app/s/[sessionId]/screens/preflight.tsx b/src/app/s/[sessionId]/screens/preflight.tsx
index 27ba571..5cf04f5 100644
--- a/src/app/s/[sessionId]/screens/preflight.tsx
+++ b/src/app/s/[sessionId]/screens/preflight.tsx
@@ -15,34 +15,42 @@ export function PreflightScreen({ session, onStart, loading, hasActiveRun }: Pro
 
   return (
     <div>
-      <h1 style={{ fontSize: "1.8rem", margin: "0 0 0.25rem", fontFamily: "var(--font-display)", color: "var(--color-primary)" }}>
+      <h1 style={{ fontSize: "2.1rem", margin: "0 0 0.35rem", fontFamily: "var(--font-display)", color: "var(--color-primary)" }}>
         {session.course_name} | {session.exam_name}
       </h1>
-      <p style={{ color: "var(--color-text-muted)", margin: "0 0 1.5rem", fontSize: "1rem" }}>
+      <p style={{ color: "var(--color-text-muted)", margin: "0 0 1.75rem", fontSize: "1.05rem" }}>
         {session.mode_label}: {session.topic_scope}
       </p>
 
-      <div style={{ display: "flex", gap: "1.5rem", flexWrap: "wrap", marginBottom: "1.5rem", fontSize: "0.95rem" }}>
+      {/* Meta stats: 4-across on desktop, 2x2 on phones (auto-fit grid) */}
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fit, minmax(150px, 1fr))",
+          gap: "0.75rem",
+          marginBottom: "1.75rem",
+        }}
+      >
         {outcome?.prompt_count != null && (
-          <div>
+          <div style={metaCell}>
             <span style={metaLabel}>Prompts</span>
-            <span>{outcome.prompt_count as number}</span>
+            <span style={metaValue}>{outcome.prompt_count as number}</span>
           </div>
         )}
         {outcome?.target_accuracy != null && (
-          <div>
+          <div style={metaCell}>
             <span style={metaLabel}>Target</span>
-            <span>{((outcome.target_accuracy as number) * 100).toFixed(0)}%</span>
+            <span style={metaValue}>{((outcome.target_accuracy as number) * 100).toFixed(0)}%</span>
           </div>
         )}
-        <div>
+        <div style={metaCell}>
           <span style={metaLabel}>Duration</span>
-          <span>{session.planned_minutes} min</span>
+          <span style={metaValue}>{session.planned_minutes} min</span>
         </div>
         {breaks && (
-          <div>
+          <div style={metaCell}>
             <span style={metaLabel}>Breaks</span>
-            <span>
+            <span style={metaValue}>
               {breaks.type === "25_5" ? "25/5" : breaks.type === "50_10" ? "50/10" : breaks.type === "90_15" ? "90/15" : breaks.type === "12_3" ? "12/3" : String(breaks.type)}
               {breaks.cycles ? ` x${breaks.cycles}` : ""}
             </span>
@@ -53,7 +61,7 @@ export function PreflightScreen({ session, onStart, loading, hasActiveRun }: Pro
       {/* Deck composition contract: the student sees exactly what the deck
           holds before starting — no surprise session growth. */}
       {session.deck_preview && (
-        <div style={{ display: "flex", gap: "0.4rem", flexWrap: "wrap", marginBottom: "1.5rem", alignItems: "center" }}>
+        <div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap", marginBottom: "1.75rem", alignItems: "center" }}>
           <span style={{ ...metaLabel, marginBottom: 0 }}>Deck</span>
           {session.deck_preview.new_count > 0 && (
             <span style={deckChip("var(--color-info)")}>
@@ -97,12 +105,25 @@ const metaLabel: React.CSSProperties = {
   textTransform: "uppercase",
   letterSpacing: "0.06em",
   display: "block",
-  marginBottom: "0.15rem",
+  marginBottom: "0.3rem",
+};
+
+const metaCell: React.CSSProperties = {
+  background: "var(--color-bg-card)",
+  border: "1px solid var(--color-border)",
+  borderRadius: "var(--radius)",
+  padding: "1rem 1.25rem",
+};
+
+const metaValue: React.CSSProperties = {
+  fontSize: "1.35rem",
+  fontWeight: 600,
+  fontFamily: "var(--font-display)",
 };
 
 const deckChip = (color: string): React.CSSProperties => ({
-  padding: "0.15rem 0.55rem",
-  fontSize: "0.78rem",
+  padding: "0.3rem 0.8rem",
+  fontSize: "0.85rem",
   color,
   border: `1px solid ${color}`,
   borderRadius: "999px",
@@ -113,16 +134,16 @@ const examBanner: React.CSSProperties = {
   background: "var(--color-bg-review-tint)",
   border: "1px solid var(--color-review)",
   borderRadius: "var(--radius)",
-  padding: "0.75rem 1rem",
-  marginBottom: "1.5rem",
-  fontSize: "0.95rem",
+  padding: "1rem 1.25rem",
+  marginBottom: "1.75rem",
+  fontSize: "1rem",
   color: "var(--color-review)",
 };
 
 const buttonStyle: React.CSSProperties = {
   width: "100%",
-  padding: "0.75rem 1.5rem",
-  fontSize: "1.05rem",
+  padding: "1rem 1.5rem",
+  fontSize: "1.15rem",
   fontFamily: "var(--font-body)",
   fontWeight: 600,
   background: "var(--color-primary)",
diff --git a/src/app/s/[sessionId]/screens/runner.tsx b/src/app/s/[sessionId]/screens/runner.tsx
index 709b296..53d614c 100644
--- a/src/app/s/[sessionId]/screens/runner.tsx
+++ b/src/app/s/[sessionId]/screens/runner.tsx
@@ -644,20 +644,20 @@ export function RunnerScreen({ run, session, onSubmit, onComplete }: Props) {
           background: "var(--color-bg-info-tint)",
           border: "1px solid var(--color-info)",
           borderRadius: "var(--radius)",
-          padding: "1rem",
+          padding: "1.25rem 1.5rem",
           marginBottom: "1rem",
           opacity: dimmed ? 0.7 : 1,
         }}
         data-testid="model-answer"
       >
-        <p style={{ margin: "0 0 0.5rem", fontSize: "0.72rem", fontWeight: 600, color: "var(--color-info)", letterSpacing: "0.05em" }}>
+        <p style={{ margin: "0 0 0.5rem", fontSize: "0.75rem", fontWeight: 600, color: "var(--color-info)", letterSpacing: "0.05em" }}>
           MODEL ANSWER — compare before you score
         </p>
-        <p style={{ margin: 0, fontSize: "0.9rem", lineHeight: 1.6, whiteSpace: "pre-wrap" }}>
+        <p style={{ margin: 0, fontSize: "1rem", lineHeight: 1.6, whiteSpace: "pre-wrap" }}>
           {reveal.model_answer}
         </p>
         {reveal.key_points && reveal.key_points.length > 0 && (
-          <ul style={{ margin: "0.6rem 0 0", paddingLeft: "1.1rem", fontSize: "0.82rem", lineHeight: 1.6, color: "var(--color-text-secondary)" }}>
+          <ul style={{ margin: "0.6rem 0 0", paddingLeft: "1.1rem", fontSize: "0.9rem", lineHeight: 1.6, color: "var(--color-text-secondary)" }}>
             {reveal.key_points.map((kp, i) => (
               <li key={i}>{kp}</li>
             ))}
@@ -749,13 +749,13 @@ export function RunnerScreen({ run, session, onSubmit, onComplete }: Props) {
           border: "1px solid var(--color-border)",
           borderRadius: "var(--radius)",
           boxShadow: "var(--shadow-card)",
-          padding: "1.25rem",
+          padding: "1.5rem 1.75rem",
           marginBottom: "1.25rem",
         }}
       >
         <div
           style={{
-            fontSize: "0.68rem",
+            fontSize: "0.72rem",
             color: "var(--color-info)",
             marginBottom: "0.5rem",
             letterSpacing: "0.08em",
@@ -770,7 +770,7 @@ export function RunnerScreen({ run, session, onSubmit, onComplete }: Props) {
               : "Diagnostic — being wrong is useful"}
           </div>
         )}
-        <p style={{ margin: 0, fontSize: "1.1rem", lineHeight: 1.55, whiteSpace: "pre-wrap" }}>
+        <p style={{ margin: 0, fontSize: "1.35rem", lineHeight: 1.5, whiteSpace: "pre-wrap" }}>
           {displayText}
         </p>
       </div>
@@ -782,9 +782,9 @@ export function RunnerScreen({ run, session, onSubmit, onComplete }: Props) {
           style={{
             background: "var(--color-bg-card)",
             borderRadius: "var(--radius)",
-            padding: "1rem",
+            padding: "1.25rem 1.5rem",
             marginBottom: "1rem",
-            fontSize: "0.85rem",
+            fontSize: "0.95rem",
             lineHeight: 1.6,
           }}
         >
@@ -807,8 +807,8 @@ export function RunnerScreen({ run, session, onSubmit, onComplete }: Props) {
                 aria-pressed={mcqConfidence === val}
                 aria-keyshortcuts={key.toLowerCase()}
                 style={{
-                  padding: "0.2rem 0.55rem",
-                  fontSize: "0.72rem",
+                  padding: "0.35rem 0.8rem",
+                  fontSize: "0.8rem",
                   fontFamily: "inherit",
                   background: mcqConfidence === val ? "var(--color-bg-selected)" : "transparent",
                   color: mcqConfidence === val ? "var(--color-info)" : "var(--color-text-muted)",
@@ -841,13 +841,13 @@ export function RunnerScreen({ run, session, onSubmit, onComplete }: Props) {
                   style={{
                     display: "flex",
                     alignItems: "flex-start",
-                    gap: "0.75rem",
-                    padding: "0.85rem 1rem",
+                    gap: "0.85rem",
+                    padding: "1.1rem 1.25rem",
                     background: isSelected ? "var(--color-bg-selected)" : "var(--color-bg-card)",
                     border: `2px solid ${isSelected ? "var(--color-primary)" : "var(--color-border)"}`,
                     borderRadius: "var(--radius-lg)",
                     color: "var(--color-text)",
-                    fontSize: "0.9rem",
+                    fontSize: "1rem",
                     lineHeight: 1.5,
                     cursor: submitting ? "wait" : "pointer",
                     textAlign: "left",
@@ -859,8 +859,8 @@ export function RunnerScreen({ run, session, onSubmit, onComplete }: Props) {
                   <span style={{
                     fontWeight: 700,
                     color: "var(--color-info)",
-                    minWidth: "1.5rem",
-                    fontSize: "0.95rem",
+                    minWidth: "1.6rem",
+                    fontSize: "1.05rem",
                   }}>{label}.</span>
                   <span style={{ flex: 1 }}>{choice}</span>
                   <span aria-hidden="true" style={{ fontSize: "0.7rem", color: "var(--color-text-dim)", alignSelf: "center" }}>{idx + 1}</span>
@@ -882,7 +882,7 @@ export function RunnerScreen({ run, session, onSubmit, onComplete }: Props) {
             value={answer}
             onChange={(e) => setAnswer(e.target.value)}
             placeholder="Type your answer from memory..."
-            rows={6}
+            rows={9}
             style={textareaStyle}
             onKeyDown={(e) => {
               if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
@@ -897,15 +897,15 @@ export function RunnerScreen({ run, session, onSubmit, onComplete }: Props) {
                 background: "var(--color-bg-card)",
                 border: "1px solid var(--color-border)",
                 borderRadius: "var(--radius)",
-                padding: "0.75rem 1rem",
+                padding: "1rem 1.25rem",
                 marginBottom: "0.75rem",
               }}
             >
-              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "0.4rem" }}>
-                <span style={{ fontSize: "0.8rem", color: "var(--color-text-secondary)" }}>How confident are you? (optional)</span>
+              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "0.5rem" }}>
+                <span style={{ fontSize: "0.88rem", color: "var(--color-text-secondary)" }}>How confident are you? (optional)</span>
                 <span
                   style={{
-                    fontSize: "0.8rem",
+                    fontSize: "0.88rem",
                     fontWeight: confidenceTouched ? 600 : 400,
                     color: confidenceTouched ? confidenceColors[confidence - 1] : "var(--color-text-faint)",
                   }}
@@ -924,8 +924,8 @@ export function RunnerScreen({ run, session, onSubmit, onComplete }: Props) {
                       aria-pressed={selected}
                       style={{
                         flex: 1,
-                        padding: "0.4rem",
-                        fontSize: "0.8rem",
+                        padding: "0.6rem 0.4rem",
+                        fontSize: "0.9rem",
                         fontWeight: selected ? 700 : 400,
                         background: selected ? confidenceTints[level - 1] : "var(--color-bg-card)",
                         color: selected ? confidenceColors[level - 1] : "var(--color-text-faint)",
@@ -955,7 +955,7 @@ export function RunnerScreen({ run, session, onSubmit, onComplete }: Props) {
               style={{
                 ...primaryBtn,
                 width: "auto",
-                padding: "0.6rem 1.5rem",
+                padding: "0.75rem 1.75rem",
                 opacity: answer.trim() && !submitting ? 1 : 0.4,
               }}
             >
@@ -973,9 +973,9 @@ export function RunnerScreen({ run, session, onSubmit, onComplete }: Props) {
               style={{
                 background: "var(--color-bg-card)",
                 borderRadius: "var(--radius)",
-                padding: "1rem",
+                padding: "1.25rem 1.5rem",
                 marginBottom: "1rem",
-                fontSize: "0.85rem",
+                fontSize: "0.95rem",
                 lineHeight: 1.6,
               }}
             >
@@ -1008,17 +1008,17 @@ export function RunnerScreen({ run, session, onSubmit, onComplete }: Props) {
                       style={{
                         display: "flex",
                         alignItems: "flex-start",
-                        gap: "0.75rem",
-                        padding: "0.85rem 1rem",
+                        gap: "0.85rem",
+                        padding: "1.1rem 1.25rem",
                         background: isCorrectChoice ? "var(--color-bg-done)" : isPicked ? "var(--color-bg-error-tint)" : "var(--color-bg-card)",
                         border: `2px solid ${isCorrectChoice ? "var(--color-success)" : isPicked ? "var(--color-error)" : "var(--color-border)"}`,
                         borderRadius: "var(--radius-lg)",
                         color: "var(--color-text)",
-                        fontSize: "0.9rem",
+                        fontSize: "1rem",
                         lineHeight: 1.5,
                       }}
                     >
-                      <span style={{ fontWeight: 700, color: isCorrectChoice ? "var(--color-success)" : "var(--color-info)", minWidth: "1.5rem", fontSize: "0.95rem" }}>{label}.</span>
+                      <span style={{ fontWeight: 700, color: isCorrectChoice ? "var(--color-success)" : "var(--color-info)", minWidth: "1.6rem", fontSize: "1.05rem" }}>{label}.</span>
                       <span style={{ flex: 1 }}>{choice}</span>
                       {isCorrectChoice && <span style={{ color: "var(--color-success)", fontWeight: 700 }}>✓</span>}
                       {isPicked && !isCorrectChoice && <span style={{ color: "var(--color-error)", fontWeight: 700 }}>your pick</span>}
@@ -1026,7 +1026,7 @@ export function RunnerScreen({ run, session, onSubmit, onComplete }: Props) {
                   );
                 })}
               </div>
-              <p style={{ fontSize: "0.85rem", color: reviewMcqCorrect ? "var(--color-success)" : "var(--color-error)", marginBottom: "0.75rem", fontWeight: 600 }}>
+              <p style={{ fontSize: "0.95rem", color: reviewMcqCorrect ? "var(--color-success)" : "var(--color-error)", marginBottom: "0.75rem", fontWeight: 600 }}>
                 {reviewMcqCorrect ? "✓ You picked the correct answer." : "✗ You picked a different answer."}
               </p>
               <button
@@ -1039,14 +1039,14 @@ export function RunnerScreen({ run, session, onSubmit, onComplete }: Props) {
             </div>
           ) : (
             <div>
-              <p style={{ fontSize: "0.85rem", color: "var(--color-text-secondary)", marginBottom: "0.75rem" }}>
+              <p style={{ fontSize: "0.95rem", color: "var(--color-text-secondary)", marginBottom: "0.75rem" }}>
                 {isPretest
                   ? "How close were you? (Diagnostic only — this doesn't count against you.)"
                   : reveal?.model_answer
                     ? "Score yourself against the model answer."
                     : "How did you do? Be honest."}
               </p>
-              <div style={{ display: "flex", gap: "0.5rem" }}>
+              <div style={{ display: "flex", gap: "0.75rem", flexWrap: "wrap" }}>
                 <button onClick={() => handleScore("CORRECT")} disabled={submitting} aria-keyshortcuts="1" style={scoreBtn("var(--color-success)", submitting)}>
                   ✓ Correct <span aria-hidden="true" style={{ opacity: 0.5, fontWeight: 400 }}>1</span>
                 </button>
@@ -1072,11 +1072,11 @@ export function RunnerScreen({ run, session, onSubmit, onComplete }: Props) {
               background: score === "INCORRECT" ? "var(--color-bg-error-tint)" : "var(--color-bg-warning-tint)",
               border: `1px solid ${score === "INCORRECT" ? "var(--color-error)" : "var(--color-warning)"}`,
               borderRadius: "var(--radius)",
-              padding: "1rem",
+              padding: "1.25rem 1.5rem",
               marginBottom: "1rem",
             }}
           >
-            <p style={{ margin: "0 0 0.75rem", fontSize: "0.85rem", fontWeight: 600 }}>
+            <p style={{ margin: "0 0 0.75rem", fontSize: "0.95rem", fontWeight: 600 }}>
               {score === "INCORRECT" ? "✗ Incorrect" : "~ Partial"} — Log the error
             </p>
 
@@ -1139,7 +1139,7 @@ export function RunnerScreen({ run, session, onSubmit, onComplete }: Props) {
                 background: "var(--color-bg-review-tint)",
                 border: "1px solid var(--color-review)",
                 borderRadius: "var(--radius)",
-                padding: "0.75rem 1rem",
+                padding: "1rem 1.25rem",
                 marginBottom: "1rem",
               }}
               data-testid="hypercorrection-badge"
@@ -1147,7 +1147,7 @@ export function RunnerScreen({ run, session, onSubmit, onComplete }: Props) {
               <p style={{ margin: 0, fontSize: "0.82rem", color: "var(--color-review)", fontWeight: 600 }}>
                 High-confidence miss
               </p>
-              <p style={{ margin: "0.3rem 0 0", fontSize: "0.8rem", lineHeight: 1.5, color: "var(--color-text-secondary)" }}>
+              <p style={{ margin: "0.3rem 0 0", fontSize: "0.88rem", lineHeight: 1.5, color: "var(--color-text-secondary)" }}>
                 You were sure about this one. Read the correction closely —
                 confidently-held errors, once corrected, are the ones that stick best.
                 This will come back for review.
@@ -1162,14 +1162,14 @@ export function RunnerScreen({ run, session, onSubmit, onComplete }: Props) {
                 background: "var(--color-bg-card)",
                 border: "1px solid var(--color-border)",
                 borderRadius: "var(--radius)",
-                padding: "0.75rem 1rem",
+                padding: "1rem 1.25rem",
                 marginBottom: "1rem",
               }}
             >
               <p style={{ margin: 0, fontSize: "0.82rem", color: "var(--color-warning)", fontWeight: 600 }}>
                 Diagnostic complete
               </p>
-              <p style={{ margin: "0.3rem 0 0", fontSize: "0.8rem", lineHeight: 1.5, color: "var(--color-text)" }}>
+              <p style={{ margin: "0.3rem 0 0", fontSize: "0.88rem", lineHeight: 1.5, color: "var(--color-text)" }}>
                 You haven&apos;t studied this yet — attempting it first primes your
                 brain to encode the real material better. It&apos;s coming up in this course.
               </p>
@@ -1183,21 +1183,21 @@ export function RunnerScreen({ run, session, onSubmit, onComplete }: Props) {
                 background: "var(--color-bg-card)",
                 border: "1px solid var(--color-border)",
                 borderRadius: "var(--radius)",
-                padding: "1rem",
+                padding: "1.25rem 1.5rem",
                 marginBottom: "1rem",
               }}
               data-testid="mcq-result"
             >
-              <p style={{ margin: "0 0 0.5rem", fontSize: "0.85rem", fontWeight: 600, color: mcqResult.is_correct ? "var(--color-success)" : "var(--color-error)" }}>
+              <p style={{ margin: "0 0 0.5rem", fontSize: "0.95rem", fontWeight: 600, color: mcqResult.is_correct ? "var(--color-success)" : "var(--color-error)" }}>
                 {mcqResult.is_correct
                   ? `✓ Correct — ${String.fromCharCode(65 + mcqResult.correct_index)}`
                   : `✗ Incorrect — the answer is ${String.fromCharCode(65 + mcqResult.correct_index)}`}
               </p>
-              <p style={{ margin: 0, fontSize: "0.85rem", lineHeight: 1.5 }}>
+              <p style={{ margin: 0, fontSize: "0.95rem", lineHeight: 1.5 }}>
                 <strong>{mcqResult.correct_choice}</strong>
               </p>
               {!mcqResult.is_correct && mcqResult.rationale && (
-                <p style={{ margin: "0.5rem 0 0", fontSize: "0.8rem", lineHeight: 1.5, color: "var(--color-text-secondary)" }}>
+                <p style={{ margin: "0.5rem 0 0", fontSize: "0.88rem", lineHeight: 1.5, color: "var(--color-text-secondary)" }}>
                   Why your pick was tempting: {mcqResult.rationale}
                 </p>
               )}
@@ -1211,44 +1211,44 @@ export function RunnerScreen({ run, session, onSubmit, onComplete }: Props) {
                 background: "var(--color-bg-card)",
                 border: "1px solid var(--color-border)",
                 borderRadius: "var(--radius)",
-                padding: "1rem",
+                padding: "1.25rem 1.5rem",
                 marginBottom: "1rem",
               }}
             >
-              <p style={{ margin: "0 0 0.75rem", fontSize: "0.85rem", fontWeight: 600, color: "var(--color-success)" }}>
+              <p style={{ margin: "0 0 0.75rem", fontSize: "0.95rem", fontWeight: 600, color: "var(--color-success)" }}>
                 Nice work!
               </p>
               {fb.reinforcement && (
-                <p style={{ margin: "0 0 0.5rem", fontSize: "0.85rem", lineHeight: 1.6 }}>
+                <p style={{ margin: "0 0 0.5rem", fontSize: "0.95rem", lineHeight: 1.6 }}>
                   {fb.reinforcement}
                 </p>
               )}
               {fb.deeper_insight && (
                 <div style={insightBox}>
-                  <p style={{ margin: 0, fontSize: "0.8rem", fontWeight: 600, color: "var(--color-info)", marginBottom: "0.3rem" }}>
+                  <p style={{ margin: 0, fontSize: "0.85rem", fontWeight: 600, color: "var(--color-info)", marginBottom: "0.3rem" }}>
                     Deeper Insight
                   </p>
-                  <p style={{ margin: 0, fontSize: "0.8rem", lineHeight: 1.5 }}>
+                  <p style={{ margin: 0, fontSize: "0.88rem", lineHeight: 1.5 }}>
                     {fb.deeper_insight}
                   </p>
                 </div>
               )}
               {fb.concept_connection && (
                 <div style={insightBox}>
-                  <p style={{ margin: 0, fontSize: "0.8rem", fontWeight: 600, color: "var(--color-review)", marginBottom: "0.3rem" }}>
+                  <p style={{ margin: 0, fontSize: "0.85rem", fontWeight: 600, color: "var(--color-review)", marginBottom: "0.3rem" }}>
                     Connection
                   </p>
-                  <p style={{ margin: 0, fontSize: "0.8rem", lineHeight: 1.5 }}>
+                  <p style={{ margin: 0, fontSize: "0.88rem", lineHeight: 1.5 }}>
                     {fb.concept_connection}
                   </p>
                 </div>
               )}
               {fb.socratic_followup && (
                 <div style={insightBox}>
-                  <p style={{ margin: 0, fontSize: "0.8rem", fontWeight: 600, color: "var(--color-primary)", marginBottom: "0.3rem" }}>
+                  <p style={{ margin: 0, fontSize: "0.85rem", fontWeight: 600, color: "var(--color-primary)", marginBottom: "0.3rem" }}>
                     Think Deeper
                   </p>
-                  <p style={{ margin: 0, fontSize: "0.85rem", lineHeight: 1.5, fontStyle: "italic" }}>
+                  <p style={{ margin: 0, fontSize: "0.95rem", lineHeight: 1.5, fontStyle: "italic" }}>
                     {fb.socratic_followup}
                   </p>
                 </div>
@@ -1263,11 +1263,11 @@ export function RunnerScreen({ run, session, onSubmit, onComplete }: Props) {
                 background: "var(--color-bg-card)",
                 border: "1px solid var(--color-border)",
                 borderRadius: "var(--radius)",
-                padding: "1rem",
+                padding: "1.25rem 1.5rem",
                 marginBottom: "1rem",
               }}
             >
-              <p style={{ margin: 0, fontSize: "0.85rem", fontWeight: 600, color: "var(--color-success)" }}>
+              <p style={{ margin: 0, fontSize: "0.95rem", fontWeight: 600, color: "var(--color-success)" }}>
                 {feedbackLoading ? "Generating insight..." : "Correct!"}
               </p>
             </div>
@@ -1280,11 +1280,11 @@ export function RunnerScreen({ run, session, onSubmit, onComplete }: Props) {
                 background: "var(--color-bg-card)",
                 border: "1px solid var(--color-border)",
                 borderRadius: "var(--radius)",
-                padding: "1rem",
+                padding: "1.25rem 1.5rem",
                 marginBottom: "1rem",
               }}
             >
-              <p style={{ margin: "0 0 0.75rem", fontSize: "0.85rem", fontWeight: 600, color: "var(--color-success)" }}>
+              <p style={{ margin: "0 0 0.75rem", fontSize: "0.95rem", fontWeight: 600, color: "var(--color-success)" }}>
                 REVIEW (from your materials)
               </p>
 
@@ -1295,14 +1295,14 @@ export function RunnerScreen({ run, session, onSubmit, onComplete }: Props) {
                     background: "var(--color-bg-card)",
                     border: "1px solid var(--color-border)",
                     borderRadius: "var(--radius-sm)",
-                    padding: "0.75rem",
+                    padding: "1rem 1.1rem",
                     marginBottom: "0.75rem",
                   }}
                 >
                   <p style={{ margin: "0 0 0.5rem", fontSize: "0.75rem", fontWeight: 600, color: "var(--color-info)" }}>
                     Professor&apos;s Explanation
                   </p>
-                  <div style={{ margin: 0, fontSize: "0.85rem", lineHeight: 1.6 }}>
+                  <div style={{ margin: 0, fontSize: "0.95rem", lineHeight: 1.6 }}>
                     {renderExplanationWithCitations(fb.explanation, feedbackExcerpts, (idx) => {
                       setHighlightedCitation(idx === highlightedCitation ? null : idx);
                       const el = excerptRefs.current.get(idx);
@@ -1318,7 +1318,7 @@ export function RunnerScreen({ run, session, onSubmit, onComplete }: Props) {
                         marginTop: "0.5rem",
                       }}
                     >
-                      <p style={{ margin: 0, fontSize: "0.8rem", fontWeight: 600, color: "var(--color-primary)" }}>
+                      <p style={{ margin: 0, fontSize: "0.85rem", fontWeight: 600, color: "var(--color-primary)" }}>
                         Key Takeaway: {fb.key_takeaway}
                       </p>
                     </div>
@@ -1343,7 +1343,7 @@ export function RunnerScreen({ run, session, onSubmit, onComplete }: Props) {
                       background: isHighlighted ? "var(--color-bg-selected)" : "var(--color-bg-card)",
                       border: isHighlighted ? "1px solid var(--color-info)" : "1px solid var(--color-border)",
                       borderRadius: "var(--radius-sm)",
-                      padding: "0.75rem",
+                      padding: "1rem 1.1rem",
                       marginBottom: i < feedbackExcerpts.length - 1 ? "0.5rem" : 0,
                       transition: "border-color 0.2s, background 0.2s",
                       cursor: "pointer",
@@ -1358,7 +1358,7 @@ export function RunnerScreen({ run, session, onSubmit, onComplete }: Props) {
                       {excerpt.page_number && <span>p. {excerpt.page_number}</span>}
                     </div>
                     <p
-                      style={{ margin: 0, fontSize: "0.8rem", lineHeight: 1.5 }}
+                      style={{ margin: 0, fontSize: "0.88rem", lineHeight: 1.5 }}
                       dangerouslySetInnerHTML={{
                         __html: escapeHtml(stripMarkdownForDisplay(excerpt.snippet))
                           .replace(/&lt;&lt;(.*?)&gt;&gt;/g, '<mark style="background:rgba(110,168,254,0.22);color:var(--color-primary)">$1</mark>'),
@@ -1386,10 +1386,10 @@ export function RunnerScreen({ run, session, onSubmit, onComplete }: Props) {
               {/* Concept connection */}
               {fb.concept_connection && (
                 <div style={{ ...insightBox, marginTop: "0.75rem" }}>
-                  <p style={{ margin: 0, fontSize: "0.8rem", fontWeight: 600, color: "var(--color-review)", marginBottom: "0.3rem" }}>
+                  <p style={{ margin: 0, fontSize: "0.85rem", fontWeight: 600, color: "var(--color-review)", marginBottom: "0.3rem" }}>
                     Connection
                   </p>
-                  <p style={{ margin: 0, fontSize: "0.8rem", lineHeight: 1.5 }}>
+                  <p style={{ margin: 0, fontSize: "0.88rem", lineHeight: 1.5 }}>
                     {fb.concept_connection}
                   </p>
                 </div>
@@ -1398,10 +1398,10 @@ export function RunnerScreen({ run, session, onSubmit, onComplete }: Props) {
               {/* Mnemonic / memory aid */}
               {fb.mnemonic && (
                 <div style={{ ...insightBox, marginTop: "0.5rem" }}>
-                  <p style={{ margin: 0, fontSize: "0.8rem", fontWeight: 600, color: "var(--color-success)", marginBottom: "0.3rem" }}>
+                  <p style={{ margin: 0, fontSize: "0.85rem", fontWeight: 600, color: "var(--color-success)", marginBottom: "0.3rem" }}>
                     Memory Aid
                   </p>
-                  <p style={{ margin: 0, fontSize: "0.8rem", lineHeight: 1.5 }}>
+                  <p style={{ margin: 0, fontSize: "0.88rem", lineHeight: 1.5 }}>
                     {fb.mnemonic}
                   </p>
                 </div>
@@ -1410,10 +1410,10 @@ export function RunnerScreen({ run, session, onSubmit, onComplete }: Props) {
               {/* Mistake pattern advice */}
               {fb.pattern_advice && (
                 <div style={{ ...insightBox, marginTop: "0.5rem" }}>
-                  <p style={{ margin: 0, fontSize: "0.8rem", fontWeight: 600, color: "var(--color-warning)", marginBottom: "0.3rem" }}>
+                  <p style={{ margin: 0, fontSize: "0.85rem", fontWeight: 600, color: "var(--color-warning)", marginBottom: "0.3rem" }}>
                     Pattern Noticed
                   </p>
-                  <p style={{ margin: 0, fontSize: "0.8rem", lineHeight: 1.5 }}>
+                  <p style={{ margin: 0, fontSize: "0.88rem", lineHeight: 1.5 }}>
                     {fb.pattern_advice}
                   </p>
                 </div>
@@ -1422,10 +1422,10 @@ export function RunnerScreen({ run, session, onSubmit, onComplete }: Props) {
               {/* Socratic follow-up */}
               {fb.socratic_followup && (
                 <div style={{ ...insightBox, marginTop: "0.5rem" }}>
-                  <p style={{ margin: 0, fontSize: "0.8rem", fontWeight: 600, color: "var(--color-primary)", marginBottom: "0.3rem" }}>
+                  <p style={{ margin: 0, fontSize: "0.85rem", fontWeight: 600, color: "var(--color-primary)", marginBottom: "0.3rem" }}>
                     Think Deeper
                   </p>
-                  <p style={{ margin: "0 0 0.5rem", fontSize: "0.85rem", lineHeight: 1.5, fontStyle: "italic" }}>
+                  <p style={{ margin: "0 0 0.5rem", fontSize: "0.95rem", lineHeight: 1.5, fontStyle: "italic" }}>
                     {fb.socratic_followup}
                   </p>
                   {/* Close the loop: an unanswered Socratic question is decoration.
@@ -1457,7 +1457,7 @@ export function RunnerScreen({ run, session, onSubmit, onComplete }: Props) {
                     background: "var(--color-bg-card)",
                     border: "1px solid var(--color-border)",
                     borderRadius: "var(--radius-sm)",
-                    padding: "0.75rem",
+                    padding: "1rem 1.1rem",
                     marginTop: "0.75rem",
                   }}
                 >
@@ -1509,11 +1509,11 @@ export function RunnerScreen({ run, session, onSubmit, onComplete }: Props) {
                 background: "var(--color-bg-card)",
                 border: "1px solid var(--color-border)",
                 borderRadius: "var(--radius)",
-                padding: "0.75rem 1rem",
+                padding: "1rem 1.25rem",
                 marginBottom: "0.75rem",
               }}
             >
-              <p style={{ margin: "0 0 0.5rem", fontSize: "0.8rem", fontWeight: 600, color: "var(--color-text)" }}>
+              <p style={{ margin: "0 0 0.5rem", fontSize: "0.85rem", fontWeight: 600, color: "var(--color-text)" }}>
                 Now explain this in your own words (optional):
               </p>
               <textarea
@@ -1525,7 +1525,7 @@ export function RunnerScreen({ run, session, onSubmit, onComplete }: Props) {
               />
               {lastScore === "CORRECT" && (
                 <>
-                  <p style={{ margin: "0.75rem 0 0.5rem", fontSize: "0.8rem", fontWeight: 600, color: "var(--color-text)" }}>
+                  <p style={{ margin: "0.75rem 0 0.5rem", fontSize: "0.85rem", fontWeight: 600, color: "var(--color-text)" }}>
                     Create your own example of this concept (optional):
                   </p>
                   <textarea
@@ -1609,14 +1609,14 @@ const insightBox: React.CSSProperties = {
   background: "var(--color-bg-card)",
   border: "1px solid var(--color-border)",
   borderRadius: "var(--radius-sm)",
-  padding: "0.75rem",
+  padding: "0.9rem 1rem",
   marginTop: "0.5rem",
 };
 
 const primaryBtn: React.CSSProperties = {
   width: "100%",
-  padding: "0.75rem",
-  fontSize: "0.9rem",
+  padding: "0.9rem 1.5rem",
+  fontSize: "1rem",
   fontFamily: "inherit",
   fontWeight: 600,
   // Primary actions use the accent everywhere (preflight/end-screen parity)
@@ -1629,8 +1629,9 @@ const primaryBtn: React.CSSProperties = {
 
 const scoreBtn = (color: string, disabled = false): React.CSSProperties => ({
   flex: 1,
-  padding: "0.75rem",
-  fontSize: "0.85rem",
+  padding: "1rem 0.75rem",
+  fontSize: "1rem",
+  whiteSpace: "nowrap",
   fontFamily: "inherit",
   fontWeight: 600,
   background: "transparent",
@@ -1643,8 +1644,8 @@ const scoreBtn = (color: string, disabled = false): React.CSSProperties => ({
 
 const textareaStyle: React.CSSProperties = {
   width: "100%",
-  padding: "0.75rem",
-  fontSize: "0.85rem",
+  padding: "0.85rem 1rem",
+  fontSize: "0.95rem",
   fontFamily: "inherit",
   background: "var(--color-bg-card)",
   color: "var(--color-text)",
@@ -1657,8 +1658,8 @@ const textareaStyle: React.CSSProperties = {
 
 const selectStyle: React.CSSProperties = {
   width: "100%",
-  padding: "0.5rem",
-  fontSize: "0.85rem",
+  padding: "0.6rem",
+  fontSize: "0.95rem",
   fontFamily: "inherit",
   background: "var(--color-bg-card)",
   color: "var(--color-text)",
diff --git a/src/app/s/[sessionId]/session-runner.tsx b/src/app/s/[sessionId]/session-runner.tsx
index 50c7d74..6fb1357 100644
--- a/src/app/s/[sessionId]/session-runner.tsx
+++ b/src/app/s/[sessionId]/session-runner.tsx
@@ -457,9 +457,10 @@ export function SessionRunner({ session }: Props) {
   return (
     <main
       style={{
-        maxWidth: 700,
+        maxWidth: 900,
         margin: "0 auto",
-        padding: "1.5rem 1rem",
+        // 32px sides on desktop, tapering to 16px at phone widths.
+        padding: "1.5rem clamp(1rem, 3vw, 2rem) 3rem",
         fontFamily: "var(--font-body)",
         color: "var(--color-text)",
         backgroundColor: "var(--color-bg)",
diff --git a/src/app/settings/page.tsx b/src/app/settings/page.tsx
index 0a56929..103b10a 100644
--- a/src/app/settings/page.tsx
+++ b/src/app/settings/page.tsx
@@ -205,126 +205,161 @@ export default function SettingsPage() {
 
   return (
     <div id="main-content" style={pageStyle} role="form" aria-label="User settings">
+      <style>{`
+        .settings-row { display: grid; grid-template-columns: 1fr; gap: 0.5rem 2.5rem; align-items: center; }
+        @media (min-width: 720px) { .settings-row { grid-template-columns: minmax(220px, 280px) 1fr; } }
+      `}</style>
       <h1 style={headingStyle}>Settings</h1>
 
-      <section style={{ marginBottom: "2rem" }}>
-        <h2 style={sectionStyle}>Study hours</h2>
-        <p style={hintStyle}>Sessions will be scheduled between these times.</p>
-        <div style={{ display: "flex", alignItems: "center", gap: "0.75rem" }}>
-          <input type="time" value={studyStart} onChange={(e) => setStudyStart(e.target.value)} aria-label="Study start time" style={timeInputStyle} />
-          <span style={{ color: "var(--color-text-muted)" }}>to</span>
-          <input type="time" value={studyEnd} onChange={(e) => setStudyEnd(e.target.value)} aria-label="Study end time" style={timeInputStyle} />
+      <section style={sectionCardStyle}>
+        <div className="settings-row">
+          <div>
+            <h2 style={sectionStyle}>Study hours</h2>
+            <p style={hintStyle}>Sessions will be scheduled between these times.</p>
+          </div>
+          <div style={{ display: "flex", alignItems: "center", gap: "0.75rem", flexWrap: "wrap" }}>
+            <input type="time" value={studyStart} onChange={(e) => setStudyStart(e.target.value)} aria-label="Study start time" style={timeInputStyle} />
+            <span style={{ color: "var(--color-text-muted)" }}>to</span>
+            <input type="time" value={studyEnd} onChange={(e) => setStudyEnd(e.target.value)} aria-label="Study end time" style={timeInputStyle} />
+          </div>
         </div>
       </section>
 
-      <section style={{ marginBottom: "2rem" }}>
-        <h2 style={sectionStyle}>Timezone</h2>
-        <p style={hintStyle}>Used for streak day boundaries. Leave empty for UTC.</p>
-        <div style={{ display: "flex", gap: "0.5rem" }}>
-          <input
-            type="text"
-            value={timezone}
-            onChange={(e) => setTimezone(e.target.value)}
-            placeholder="e.g. America/New_York"
-            list="timezone-options"
-            aria-label="Timezone"
-            style={{ ...textInputStyle, flex: 1 }}
-          />
-          <button
-            type="button"
-            onClick={handleDetectTimezone}
-            title="Use your browser's timezone"
-            style={detectBtnStyle}
-          >
-            Detect
-          </button>
+      <section style={sectionCardStyle}>
+        <div className="settings-row">
+          <div>
+            <h2 style={sectionStyle}>Timezone</h2>
+            <p style={hintStyle}>Used for streak day boundaries. Leave empty for UTC.</p>
+          </div>
+          <div style={{ minWidth: 0 }}>
+            <div style={{ display: "flex", gap: "0.5rem" }}>
+              <input
+                type="text"
+                value={timezone}
+                onChange={(e) => setTimezone(e.target.value)}
+                placeholder="e.g. America/New_York"
+                list="timezone-options"
+                aria-label="Timezone"
+                style={{ ...textInputStyle, flex: 1, minWidth: 0 }}
+              />
+              <button
+                type="button"
+                className="compact-btn"
+                onClick={handleDetectTimezone}
+                title="Use your browser's timezone"
+                style={detectBtnStyle}
+              >
+                Detect
+              </button>
+            </div>
+            <datalist id="timezone-options">
+              {TIMEZONE_OPTIONS.map((tz) => (
+                <option key={tz} value={tz} />
+              ))}
+            </datalist>
+            <p
+              aria-live="polite"
+              style={{
+                fontSize: "0.85rem",
+                margin: "0.5rem 0 0",
+                overflowWrap: "break-word",
+                color: zonePreview ? "var(--color-text-muted)" : "var(--color-error)",
+              }}
+            >
+              {zonePreview
+                ? `Current time in ${effectiveZone}: ${zonePreview}`
+                : `"${timezone.trim()}" is not a recognized timezone (expected an IANA name like America/New_York).`}
+            </p>
+          </div>
         </div>
-        <datalist id="timezone-options">
-          {TIMEZONE_OPTIONS.map((tz) => (
-            <option key={tz} value={tz} />
-          ))}
-        </datalist>
-        <p
-          aria-live="polite"
-          style={{
-            fontSize: "0.85rem",
-            margin: "0.5rem 0 0",
-            color: zonePreview ? "var(--color-text-muted)" : "var(--color-error)",
-          }}
-        >
-          {zonePreview
-            ? `Current time in ${effectiveZone}: ${zonePreview}`
-            : `"${timezone.trim()}" is not a recognized timezone (expected an IANA name like America/New_York).`}
-        </p>
       </section>
 
-      <section style={{ marginBottom: "2rem" }}>
-        <h2 style={sectionStyle}>Daily study cap</h2>
-        <p style={hintStyle}>Maximum study time per day.</p>
-        <div style={{ display: "flex", alignItems: "center", gap: "0.75rem" }}>
-          <input
-            type="range"
-            min={30}
-            max={480}
-            step={15}
-            value={dailyCap}
-            onChange={(e) => setDailyCap(Number(e.target.value))}
-            aria-label="Daily study cap in minutes"
-            style={{ flex: 1, accentColor: "var(--color-primary)" }}
-          />
-          <span style={{ color: "var(--color-primary)", fontWeight: "bold", minWidth: "4rem", textAlign: "right" }}>
-            {Math.floor(dailyCap / 60)}h{dailyCap % 60 > 0 ? ` ${dailyCap % 60}m` : ""}
-          </span>
+      <section style={sectionCardStyle}>
+        <div className="settings-row">
+          <div>
+            <h2 style={sectionStyle}>Daily study cap</h2>
+            <p style={hintStyle}>Maximum study time per day.</p>
+          </div>
+          <div style={{ display: "flex", alignItems: "center", gap: "0.75rem" }}>
+            <input
+              type="range"
+              min={30}
+              max={480}
+              step={15}
+              value={dailyCap}
+              onChange={(e) => setDailyCap(Number(e.target.value))}
+              aria-label="Daily study cap in minutes"
+              style={{ flex: 1, minWidth: 0, accentColor: "var(--color-primary)" }}
+            />
+            <span style={{ color: "var(--color-primary)", fontWeight: "bold", minWidth: "4rem", textAlign: "right" }}>
+              {Math.floor(dailyCap / 60)}h{dailyCap % 60 > 0 ? ` ${dailyCap % 60}m` : ""}
+            </span>
+          </div>
         </div>
       </section>
 
-      <section style={{ marginBottom: "2rem" }}>
-        <h2 style={sectionStyle}>Daily XP goal</h2>
-        <p style={hintStyle}>Your daily XP target shown on the dashboard.</p>
-        <div style={{ display: "flex", alignItems: "center", gap: "0.75rem" }}>
-          <input
-            type="range"
-            min={10}
-            max={200}
-            step={10}
-            value={dailyXpGoal}
-            onChange={(e) => setDailyXpGoal(Number(e.target.value))}
-            aria-label="Daily XP goal"
-            style={{ flex: 1, accentColor: "var(--color-primary)" }}
-          />
-          <span style={{ color: "var(--color-primary)", fontWeight: "bold", minWidth: "3rem", textAlign: "right" }}>
-            {dailyXpGoal} XP
-          </span>
+      <section style={sectionCardStyle}>
+        <div className="settings-row">
+          <div>
+            <h2 style={sectionStyle}>Daily XP goal</h2>
+            <p style={hintStyle}>Your daily XP target shown on the dashboard.</p>
+          </div>
+          <div style={{ display: "flex", alignItems: "center", gap: "0.75rem" }}>
+            <input
+              type="range"
+              min={10}
+              max={200}
+              step={10}
+              value={dailyXpGoal}
+              onChange={(e) => setDailyXpGoal(Number(e.target.value))}
+              aria-label="Daily XP goal"
+              style={{ flex: 1, minWidth: 0, accentColor: "var(--color-primary)" }}
+            />
+            <span style={{ color: "var(--color-primary)", fontWeight: "bold", minWidth: "3rem", textAlign: "right" }}>
+              {dailyXpGoal} XP
+            </span>
+          </div>
         </div>
       </section>
 
-      <section style={{ marginBottom: "2rem" }}>
-        <h2 style={sectionStyle}>Google Calendar</h2>
-        {googleStatus === "loading" ? (
-          <p style={hintStyle}>Checking connection...</p>
-        ) : googleStatus === "connected" ? (
-          <div style={{ display: "flex", alignItems: "center", gap: "0.75rem" }}>
-            <span style={{ color: "var(--color-success)", fontSize: "0.95rem" }}>Connected</span>
-            <span style={{ color: "var(--color-text-dim)", fontSize: "0.9rem" }}>Plans can be published to your calendar.</span>
-          </div>
-        ) : googleConfigured ? (
+      <section style={sectionCardStyle}>
+        <div className="settings-row">
           <div>
-            <p style={hintStyle}>Connect to publish study sessions to your calendar and auto-detect busy times.</p>
-            <button onClick={handleGoogleConnect} style={connectBtnStyle}>
-              Connect Google Calendar
-            </button>
+            <h2 style={sectionStyle}>Google Calendar</h2>
+            <p style={hintStyle}>Publish study sessions to your calendar.</p>
           </div>
-        ) : (
-          <p style={hintStyle}>Google Calendar sync is not configured on this server.</p>
-        )}
+          <div style={{ minWidth: 0 }}>
+            {googleStatus === "loading" ? (
+              <p style={{ ...hintStyle, margin: 0 }}>Checking connection...</p>
+            ) : googleStatus === "connected" ? (
+              <div style={{ display: "flex", alignItems: "center", gap: "0.75rem", flexWrap: "wrap" }}>
+                <span style={{ color: "var(--color-success)", fontSize: "0.95rem" }}>Connected</span>
+                <span style={{ color: "var(--color-text-dim)", fontSize: "0.9rem" }}>Plans can be published to your calendar.</span>
+              </div>
+            ) : googleConfigured ? (
+              <div>
+                <p style={{ ...hintStyle, margin: "0 0 0.75rem" }}>Connect to publish study sessions to your calendar and auto-detect busy times.</p>
+                <button onClick={handleGoogleConnect} style={connectBtnStyle}>
+                  Connect Google Calendar
+                </button>
+              </div>
+            ) : (
+              <p style={{ ...hintStyle, margin: 0 }}>Google Calendar sync is not configured on this server.</p>
+            )}
+          </div>
+        </div>
       </section>
 
       {aiMock === true && (
-        <section style={{ marginBottom: "2rem" }}>
-          <h2 style={sectionStyle}>AI provider</h2>
-          <p style={hintStyle}>
-            Mock provider active. Set AI_PROVIDER and OPENAI_API_KEY in .env for real AI.
-          </p>
+        <section style={sectionCardStyle}>
+          <div className="settings-row">
+            <div>
+              <h2 style={sectionStyle}>AI provider</h2>
+            </div>
+            <p style={{ ...hintStyle, margin: 0 }}>
+              Mock provider active. Set AI_PROVIDER and OPENAI_API_KEY in .env for real AI.
+            </p>
+          </div>
         </section>
       )}
 
@@ -350,11 +385,20 @@ const pageStyle: React.CSSProperties = {
   background: "var(--color-bg)",
   color: "var(--color-text)",
   minHeight: "100vh",
-  padding: "2rem",
-  maxWidth: 600,
+  padding: "2rem clamp(24px, 4vw, 32px)",
+  maxWidth: 900,
   margin: "0 auto",
 };
 
+const sectionCardStyle: React.CSSProperties = {
+  background: "var(--color-bg-card)",
+  border: "1px solid var(--color-border-subtle)",
+  borderRadius: "var(--radius)",
+  boxShadow: "var(--shadow-card)",
+  padding: "1.25rem 1.5rem",
+  marginBottom: "1rem",
+};
+
 const headingStyle: React.CSSProperties = {
   color: "var(--color-primary)",
   fontSize: "2rem",
@@ -374,7 +418,7 @@ const sectionStyle: React.CSSProperties = {
 const hintStyle: React.CSSProperties = {
   color: "var(--color-text-faint)",
   fontSize: "0.9rem",
-  margin: "0 0 0.75rem",
+  margin: "0.25rem 0 0",
 };
 
 const textInputStyle: React.CSSProperties = {