/* LobeDrive Learn — styles.
   Tokens follow docs/VISUAL_IDENTITY.md (brand v2):
   Zen Green #A5C49F (surfaces only), Soft Sand #F7F4EF, Paper #FCFAF6,
   Deep Ink #1A1A1A, Forest Line #53735B, Morning Mist #E8ECE4, radius 14px.
   Fonts: Zen Maru Gothic (headings) + Atkinson Hyperlegible Next (body),
   self-hosted via ../assets/css/fonts.css. */

:root {
  /* Design tokens (docs/VISUAL_IDENTITY.md §11) */
  --color-bg: #F7F4EF;
  --color-bg-elevated: #FCFAF6;
  --color-bg-container: #E8ECE4;
  --color-text: #1A1A1A;
  --color-text-secondary: #5A6157;
  --color-text-error: #9C5B3C;
  --color-accent: #A5C49F;
  --color-accent-hover: #94B78D;
  --color-accent-active: #86AB7F;
  --color-green-text: #53735B;
  --shadow-xs: 0 1px 2px rgba(26, 26, 26, 0.04);
  --shadow-sm: 0 2px 6px rgba(26, 26, 26, 0.05);
  --shadow-md: 0 6px 18px rgba(26, 26, 26, 0.07);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-full: 9999px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: #1A1A1A;
  background-color: #F7F4EF;
}

.course-title, .module-title, .login-title, .part-heading, .learn-brand {
  font-family: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', 'Rounded Mplus 1c', sans-serif;
}

a { color: #53735B; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid #53735B;
  outline-offset: 2px;
}

/* ---------- view transition ---------- */

/* Animate the content, not the persistent header */
#app.view-enter .learn-main:not(.complete-main),
#app.view-enter .login-card {
  animation: viewfade 0.25s ease-out;
}

@keyframes viewfade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Mandatory per VISUAL_IDENTITY §7 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- header ---------- */

.learn-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #F7F4EF; /* solid — text must never ghost through the sticky header */
  border-bottom: 1px solid #E8ECE4;
}

.learn-header-inner {
  max-width: 680px; /* aligned with the reading column */
  margin: 0 auto;
  height: 64px; /* fixed — the sticky progressbar offset depends on it */
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.learn-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #1A1A1A;
  font-weight: 700;
  font-size: 17px;
}

.learn-brand em {
  font-style: normal;
  font-weight: 400;
  color: #53735B;
}

.learn-header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.learn-user-email {
  font-size: 13px;
  color: #53735B;
}

.learn-link-btn {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 14px;
  color: #53735B;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 10px 8px;
  margin: -6px -4px;
  min-height: 44px; /* touch target per VISUAL_IDENTITY §8.2 */
  display: inline-flex;
  align-items: center;
  white-space: nowrap; /* keep "← lobedrive.com" / "Sign out" on one line */
}

/* ---------- shared layout ---------- */

.learn-main {
  max-width: 680px;
  margin: 0 auto;
  padding: 72px 24px 120px;
}

.course-kicker {
  font-size: 13px;
  font-weight: 700; /* overline step */
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #53735B;
  margin-bottom: 12px;
}

.course-title {
  font-size: 34px; /* heading-1 */
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 20px;
}

.course-intro {
  color: #1A1A1A;
  margin-bottom: 16px;
  max-width: 58ch;
}

.course-meta {
  font-size: 14px;
  color: #5A6157;
  margin: 0 0 20px;
}

/* ---------- login ---------- */

.login-card {
  max-width: 400px;
  margin: 96px auto;
  padding: 48px 40px;
  background: #FCFAF6;
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  text-align: center;
}

.login-logo { height: 56px; margin-bottom: 24px; }

.login-title { font-size: 24px; font-weight: 700; margin-bottom: 8px; }

.login-sub { font-size: 14px; color: #53735B; margin-bottom: 10px; }

.login-note { font-size: 13px; color: #5A6157; margin-bottom: 32px; }

.login-form { display: flex; flex-direction: column; gap: 8px; text-align: left; }

.login-form label {
  font-size: 13px;
  font-weight: 500;
  color: #53735B;
  margin-top: 8px;
}

.login-form input {
  font-family: inherit;
  font-size: 16px;
  padding: 12px 14px;
  border: 1px solid #5A6157; /* Stone — inputs at rest (VISUAL_IDENTITY §6.2) */
  border-radius: 8px;
  background: #FCFAF6;
}

.login-error {
  font-size: 13px;
  font-weight: 500;
  color: #9C5B3C; /* Warm Clay — the system's only attention tone */
  min-height: 1.2em;
  margin-top: 4px;
}

.login-error.login-notice {
  color: #26342C; /* Night Forest — calm, informational; this is success, not error */
}

.demo-entry {
  display: block;
  margin: 20px auto 0;
}

.demo-note {
  margin-top: 16px;
  font-size: 12px;
  color: #53735B;
}

/* ---------- buttons ---------- */

.btn-zen {
  display: inline-block;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  color: #1A1A1A;
  background: #A5C49F;
  border: none;
  border-radius: 14px;
  padding: 14px 32px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background-color 200ms ease-out, border-color 200ms ease-out, box-shadow 200ms ease-out, transform 200ms ease-out;
  margin-top: 12px;
}

.btn-zen:hover:not(:disabled) {
  background: #94B78D;
  box-shadow: 0 2px 6px rgba(26, 26, 26, 0.05); /* ink-tinted, never colored glow */
  transform: translateY(-1px);
}

.btn-zen:active:not(:disabled) {
  background: #86AB7F;
  box-shadow: none;
  transform: translateY(0);
}

.btn-zen:disabled {
  background: #E8ECE4;
  color: #5A6157;
  cursor: default;
}

/* ---------- course progress ---------- */

.course-progress {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 40px 0 48px;
}

.course-progress-track {
  flex: 1;
  height: 6px;
  background: #E8ECE4;
  border-radius: var(--radius-full);
  overflow: hidden;
}

.course-progress-fill {
  height: 100%;
  background: #A5C49F;
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
}

.course-progress-text {
  font-size: 13px;
  color: #53735B;
  white-space: nowrap;
}

.module-progressbar {
  position: sticky;
  top: 65px; /* directly under the sticky header (64px + 1px border) */
  z-index: 19;
  height: 4px;
  background: #E8ECE4;
}

.module-progressbar .course-progress-fill { border-radius: 0; }

/* ---------- dashboard ---------- */

.title-underline {
  display: block;
  width: 240px;
  margin: -6px 0 28px;
  opacity: 0.5;
}

/* "Next up" card — the dashboard's primary action */
.continue-card {
  display: block;
  background: #FCFAF6;
  border: 1px solid #A5C49F;
  border-radius: 14px;
  padding: 20px 24px;
  margin-bottom: 24px;
  text-decoration: none;
  color: #1A1A1A;
  box-shadow: var(--shadow-sm);
  transition: background-color 200ms ease-out, border-color 200ms ease-out, box-shadow 200ms ease-out, transform 200ms ease-out;
}

.continue-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.continue-card-kicker {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #53735B;
  margin-bottom: 4px;
}

.continue-card-title {
  display: block;
  font-family: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', 'Rounded Mplus 1c', sans-serif;
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 4px;
}

.continue-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: #5A6157;
}

.continue-card-arrow {
  font-size: 17px;
  color: #53735B;
}

.part-group { margin-bottom: 64px; }

.part-heading-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 6px;
}

.part-heading {
  font-size: 21px; /* heading-3 step — parts must outrank module rows */
  font-weight: 700;
}

.part-heading span {
  font-weight: 400;
  color: #53735B;
  margin-left: 8px;
}

.part-count {
  font-size: 13px;
  color: #5A6157;
  white-space: nowrap;
}

.part-blurb {
  font-size: 15px;
  color: #5A6157;
  max-width: 56ch;
  margin-bottom: 16px;
}

.module-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.module-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: #FCFAF6;
  border: 1px solid #E8ECE4; /* Morning Mist — card definition per spec */
  border-radius: 14px;
  text-decoration: none;
  color: #1A1A1A;
  transition: background-color 200ms ease-out, border-color 200ms ease-out, box-shadow 200ms ease-out, transform 200ms ease-out;
}

.module-row:hover {
  box-shadow: 0 2px 6px rgba(26, 26, 26, 0.05);
  transform: translateY(-2px);
}

.module-row.current {
  border-color: #A5C49F;
}

.module-row.done .module-row-title {
  color: #5A6157; /* muted via token, not opacity — keeps AA on the goal line */
  font-weight: 400;
}

.module-status {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  color: #53735B;
  background: #E8ECE4;
  border-radius: 50%;
}

.module-row.done .module-status {
  background: #A5C49F;
  color: #1A1A1A;
}

.module-row.current .module-status {
  background: #A5C49F;
  color: #1A1A1A;
  font-weight: 700;
}

.module-row-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.module-row-title { font-size: 16px; font-weight: 500; }

.module-row-goal {
  font-size: 13.5px;
  color: #5A6157;
  line-height: 1.45;
}

.module-row-time {
  font-size: 13px;
  color: #5A6157;
  white-space: nowrap;
}

.module-row.done .module-row-time { visibility: hidden; }

.course-complete-link { margin-top: 8px; }

/* ---------- module page ---------- */

.module-topnav { margin-bottom: 24px; }

.kicker-sep {
  margin: 0 6px;
  color: #5A6157; /* Stone — Zen Green is never text on light surfaces */
}

.module-title {
  font-size: 26px; /* heading-2 */
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 28px;
}

.module-title:focus, .course-title:focus, .login-title:focus { outline: none; }

.module-body {
  margin-bottom: 20px;
  max-width: 62ch;
}

/* The one designed pause per module — set in the brand's display face */
.module-keyline {
  font-family: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', 'Rounded Mplus 1c', sans-serif;
  font-size: 21px; /* heading-3 */
  font-weight: 500;
  line-height: 1.5;
  color: #1A1A1A;
  max-width: 54ch;
  margin: 40px 0;
}

.module-goal {
  font-size: 15px;
  color: #5A6157;
  margin: -16px 0 32px;
  max-width: 58ch;
}

/* ---------- pedagogical figures ---------- */

.module-figure {
  margin: 36px 0;
  padding: 24px 20px 16px;
  background: #FCFAF6;
  border: 1px solid #E8ECE4;
  border-radius: 14px;
}

.module-figure-art svg {
  display: block;
  width: 100%;
  height: auto;
}

.module-figure-art svg text {
  font-family: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', -apple-system, sans-serif;
}

.module-figure-caption {
  font-size: 14px;
  color: #5A6157;
  line-height: 1.55;
  margin-top: 12px;
  padding: 0 4px;
  max-width: 60ch;
}

/* ---------- research block ---------- */

.research-block {
  margin-top: 48px;
  padding: 28px;
  background: #E8ECE4;
  border-radius: 14px;
}

.research-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', 'Rounded Mplus 1c', sans-serif;
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 18px;
}

.research-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.research-finding {
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 6px;
  max-width: 62ch;
}

.research-cite {
  font-size: 13px;
  color: #5A6157;
  line-height: 1.5;
}

.research-cite em { font-style: normal; }

.research-cite a { color: #53735B; white-space: nowrap; }

.research-more {
  margin-top: 18px;
  font-size: 13px;
}

.module-next-hint {
  font-size: 13px;
  color: #53735B;
  margin-top: 24px;
  text-align: right;
}

.continue-gate-note[hidden] { display: none; }

.continue-gate-note {
  display: block;
  margin-left: auto;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 13px;
  color: #53735B;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 8px 0;
  margin-top: 4px;
  text-align: right;
}

/* Gentle attention pull when the gate note scrolls to an open question */
.interactive-nudge {
  animation: nudge 0.9s ease-out;
}

@keyframes nudge {
  0%   { box-shadow: 0 0 0 0 rgba(83, 115, 91, 0); }
  35%  { box-shadow: 0 0 0 2px rgba(83, 115, 91, 0.55); }
  100% { box-shadow: 0 0 0 2px rgba(83, 115, 91, 0); }
}


.module-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 16px;
}

.module-nav-prev {
  max-width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.module-nav-spacer { flex: 1; }

/* ---------- interactives ---------- */

.interactive {
  background: #E8ECE4;
  border-radius: 14px;
  padding: 28px;
  margin: 32px 0;
}

.interactive-label {
  font-weight: 500;
  margin-bottom: 16px;
}

.scenario-situation {
  font-style: normal;
  color: #5A6157; /* Stone — passes AA on Morning Mist */
  margin-bottom: 12px;
}

.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quiz-option-wrap {
  display: flex;
  flex-direction: column;
}

.quiz-option {
  display: block;
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.6;
  text-align: left;
  padding: 14px 18px;
  background: #FCFAF6;
  border: 1px solid transparent;
  border-radius: 14px;
  cursor: pointer;
  transition: background-color 200ms ease-out, border-color 200ms ease-out, box-shadow 200ms ease-out, transform 200ms ease-out;
}

.quiz-option:hover:not(:disabled) {
  box-shadow: var(--shadow-sm);
}

.quiz-option:disabled { cursor: default; color: #1A1A1A; }

.quiz-option.is-correct {
  border-color: #A5C49F;
  background: rgba(165, 196, 159, 0.16);
}

.quiz-option.is-correct::before {
  content: "✓ ";
  color: #53735B;
  font-weight: 700;
}

.quiz-option.is-incorrect { border-color: #E8ECE4; opacity: 0.7; }

.quiz-option.chosen.is-incorrect {
  border-color: #53735B;
  color: #1A1A1A;
  opacity: 1;
}

.quiz-feedback {
  font-size: 14px;
  color: #1A1A1A; /* Deep Ink — Forest Line fails AA on Morning Mist */
  margin: 8px 18px 0;
  animation: viewfade 0.25s ease-out;
}

.quiz-correct-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5A6157;
  margin: 4px 18px 4px;
}

/* ---------- reflection ---------- */

.reflection-input {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.6;
  padding: 14px;
  border: 1px solid #5A6157; /* Stone — inputs at rest */
  border-radius: var(--radius-sm);
  background: #FCFAF6;
  resize: vertical;
}

.saved-note {
  display: inline-block;
  font-size: 13px;
  color: #53735B;
  margin-top: 8px;
}

.saved-note[hidden] { display: none; }

/* ---------- ordering ---------- */

.ordering-pool {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.ordering-item.picked { opacity: 0.4; }

.ordering-answer {
  margin: 0 0 8px 22px;
  font-size: 15px;
  color: #1A1A1A;
}

.ordering-answer li { margin-bottom: 4px; }

.ordering-box.is-correct .ordering-answer { color: #1A1A1A; }
.ordering-box.is-correct .ordering-answer li::marker { color: #53735B; }
/* The pool has served its purpose once solved — the numbered answer is the artifact */
.ordering-box.is-correct .ordering-pool { display: none; }

/* ---------- rating ---------- */

.rating-scale {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.rating-step {
  font-family: inherit;
  font-size: 15px;
  width: 44px;
  height: 44px;
  background: #FCFAF6;
  border: 1px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 200ms ease-out, border-color 200ms ease-out, box-shadow 200ms ease-out, transform 200ms ease-out;
}

.rating-step:hover { box-shadow: var(--shadow-sm); }

.rating-step.selected {
  background: #A5C49F;
  font-weight: 700;
}

.rating-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #5A6157;
  margin-top: 10px;
}

/* ---------- completion ---------- */

.complete-main { text-align: center; }

#app.view-enter .complete-main > * {
  animation: viewfade 0.25s ease-out both;
}

#app.view-enter .complete-main > *:nth-child(2) { animation-delay: 0.08s; }
#app.view-enter .complete-main > *:nth-child(3) { animation-delay: 0.16s; }
#app.view-enter .complete-main > *:nth-child(4) { animation-delay: 0.24s; }
#app.view-enter .complete-main > *:nth-child(n+5) { animation-delay: 0.32s; }

.complete-icon { height: 96px; margin-bottom: 24px; }

.complete-body {
  margin-left: auto;
  margin-right: auto;
}

/* Before/after on the same 1-10 scale the user rated on */
.rating-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 36px 0 12px;
  position: relative;
}

.rating-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #E8ECE4;
}

.rating-dot.dot-before {
  background: #FCFAF6;
  box-shadow: inset 0 0 0 1.5px #53735B;
}

.rating-dot.dot-after {
  background: #A5C49F;
  box-shadow: inset 0 0 0 1.5px #53735B;
}

.rating-legend {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 10px;
}

.rating-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: #5A6157;
}

.rating-dots-caption {
  font-size: 14px;
  color: #5A6157;
  margin-bottom: 36px;
}

.rating-compare {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  margin: 32px 0 40px;
}

.rating-compare-num {
  display: block;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
}

.rating-compare-label {
  font-size: 13px;
  color: #53735B;
}

.rating-compare-divider {
  width: 1px;
  height: 48px;
  background: #E8ECE4;
}

/* ---------- completion: toolkit + plan ---------- */

.toolkit {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 40px 0;
  text-align: left;
}

.toolkit-item {
  background: #FCFAF6;
  border: 1px solid #E8ECE4;
  border-radius: 14px;
  padding: 20px 22px;
}

.toolkit-name {
  font-family: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', 'Rounded Mplus 1c', sans-serif;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
}

.toolkit-line {
  font-size: 14px;
  color: #5A6157;
  line-height: 1.55;
}

.plan-card {
  background: #E8ECE4;
  border-radius: 14px;
  padding: 28px;
  margin: 0 0 40px;
  text-align: left;
}

.plan-title {
  font-family: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', 'Rounded Mplus 1c', sans-serif;
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 16px;
}

.plan-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #53735B;
  margin-bottom: 4px;
}

.plan-text {
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 16px;
}

.plan-text:last-child { margin-bottom: 0; }

.complete-handoff {
  font-size: 16px;
  margin: 8px 0 4px;
}

.complete-back {
  display: block;
  width: fit-content;
  margin: 20px auto 0;
}

/* ---------- responsive ---------- */

@media (max-width: 600px) {
  .learn-main { padding: 48px 20px 96px; }
  .learn-user-email { display: none; } /* keeps the header on one line */
  .learn-header-inner { padding: 0 16px; } /* free up width for the back-to-site link */
  .learn-header-right { gap: 12px; }
  /* The signed-in header now also carries "← lobedrive.com". Drop the "Learn"
     suffix on phones so the wordmark + back-link + Sign out stay on one line
     (the back-link clarity matters more here than the suffix). */
  .learn-brand em { display: none; }
  .course-title { font-size: 26px; }
  .module-title { font-size: 23px; }
  .login-card { margin: 48px 20px; padding: 36px 24px; }
  .interactive { padding: 20px; }
  .module-nav { flex-direction: column-reverse; gap: 16px; align-items: stretch; }
  .module-nav .learn-link-btn { text-align: center; }
  .module-nav-prev { max-width: 100%; }
  .module-next-hint { text-align: left; }
  .continue-gate-note { text-align: left; margin-left: 0; }
  .module-figure { padding: 16px 12px 12px; }
  /* SVG labels scale with the viewBox and get too small on phones — bump them.
     CSS font-size wins over the SVG presentation attributes. */
  .module-figure-art svg text { font-size: 16px; }
  .module-figure-art svg text[font-size="13"],
  .module-figure-art svg text[font-size="14"],
  .module-figure-art svg text[font-size="15"] { font-size: 18px; }
  .research-block, .plan-card { padding: 20px; }
  .toolkit { grid-template-columns: 1fr; }
  .module-row-time { display: none; }
}