@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700&family=Hanken+Grotesk:wght@400;500;600&display=swap');

/* Nani's Hands - Night Calming routine
   Reskinned 2026-08-17 from the retired TinyTouch slate/sky system to the
   indigo + marigold night palette (design direction 1, "Ship the Mockup").

   Token NAMES below are inherited from main.css, which this page still loads.
   Their VALUES are overridden here so every shared rule resolves warm without
   the whole stylesheet needing to be rewritten. main.css itself is untouched,
   so routine-gas.html and style-guide.html keep the old sky system. */

:root {
  /* Neutrals - warm paper and sandalwood */
  --cloud:        #F5EFE4;
  --cloud-light:  #FDFAF5;
  --cream:        #FBF3E4;
  --warm-white:   #FDFAF5;

  /* Accent - marigold replaces sky throughout */
  --sky:          #E3A244;
  --sky-light:    #F7E6C8;
  --sky-deep:     #B87420;

  /* Secondary - terracotta replaces blush and lavender */
  --blush:        #EBCFC2;
  --blush-deep:   #C67B5C;
  --lavender:     #C67B5C;
  --lavender-soft:#EBCFC2;

  /* Text */
  --dusk:         #BBAF9E;   /* muted text on indigo - 5.3:1 on #293755 */
  --night:        #3A3028;   /* warm ink, for text on light surfaces */
  --night-soft:   #6B5D50;

  /* Safety */
  --rose:         #C4705E;
  --rose-soft:    #F0D5CD;

  /* Typography - matches the main site */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body:    'Hanken Grotesk', system-ui, sans-serif;
}

/* Bricolage is a grotesque, not a Didone - it needs the site's tighter
   tracking and heavier display weight to read the way headings do on
   index.html. main.css sets these for Playfair, which wanted neither. */
body.routine-page h1,
body.routine-page h2,
body.routine-page h3 {
  font-weight: 600;
  letter-spacing: -0.02em;
}

body.routine-page {
  background: #293755;
  color: var(--cloud);
}

/* ── Routine Header ── */
.routine-header {
  padding: var(--space-xl) 0 var(--space-lg);
  text-align: center;
  position: relative;
  overflow: visible;
  background: linear-gradient(175deg, #1C2740 0%, #293755 100%);
}

.routine-header__brand {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--dusk);
  letter-spacing: 0.05em;
}

.routine-header__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--sky);
  background: rgba(227, 162, 68, 0.08);
  backdrop-filter: blur(10px);
  padding: 0.4rem 1rem;
  border-radius: 9999px;
  margin: var(--space-sm) auto var(--space-md);
  border: 1px solid rgba(227, 162, 68, 0.12);
  letter-spacing: 0.03em;
}

.routine-header h1 {
  color: var(--cloud);
  font-size: clamp(1.6rem, 4.5vw, 2.4rem);
  margin-bottom: var(--space-xs);
}

.routine-header__desc {
  color: var(--dusk);
  margin: var(--space-xs) auto 0;
  font-weight: 300;
  font-size: clamp(0.95rem, 2.5vw, 1.05rem);
  line-height: 1.7;
  max-width: 100%;
}

/* Compact header during routine steps */
.routine-header--compact {
  padding: 0.6rem 0;
  position: sticky;
  top: 0;
  z-index: 20;
  background: #1C2740;
  border-bottom: 1px solid rgba(251, 243, 228, 0.06);
}

.routine-header--compact .routine-header__badge,
.routine-header--compact .routine-header__desc,
.routine-header--compact .routine-header__glow {
  display: none;
}

.routine-header--compact .deco {
  display: none;
}

.routine-header--compact h1 {
  font-size: 1rem;
  margin-top: 0;
  margin-bottom: 0;
  white-space: nowrap;
}

.routine-header--compact .routine-header__brand {
  display: none;
}

.routine-header--compact .container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.routine-header__glow {
  position: absolute;
  bottom: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 160px;
  background: radial-gradient(ellipse, rgba(227, 162, 68, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

/* ── Prep Section ── */
.prep {
  padding: var(--space-md) 0 var(--space-lg);
}

.prep-card {
  background: rgba(251, 243, 228, 0.04);
  border: 1px solid rgba(251, 243, 228, 0.06);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  backdrop-filter: blur(4px);
}

.prep-card h2 {
  color: var(--cloud);
  font-size: 1.3rem;
  margin-bottom: var(--space-md);
}

.prep-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.prep-group__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--space-xs);
}

.prep-group__header i {
  font-size: 1.1rem;
}

.prep-group h3 {
  color: var(--sky);
  font-size: 0.85rem;
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0;
}

.prep-group ul {
  list-style: none;
  padding: 0;
}

.prep-group li {
  padding: 0.35rem 0;
  font-size: 0.95rem;
  color: rgba(245, 239, 228, 0.7);
  font-weight: 300;
  line-height: 1.6;
}

.prep-group li::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sky-deep);
  margin-right: 0.75rem;
  vertical-align: middle;
  opacity: 0.6;
}

.prep-hint {
  font-size: 0.8rem;
  color: var(--dusk);
  margin-top: var(--space-sm);
  font-weight: 300;
}

/* ── Glowing button ── */
.btn--glow {
  box-shadow: 0 4px 24px rgba(184, 116, 32, 0.2);
}

.btn--glow:hover {
  box-shadow: 0 8px 32px rgba(184, 116, 32, 0.3);
}

/* ── Step Progress ── */
.step-progress {
  text-align: center;
  padding-top: var(--space-sm);
}

.step-progress__text {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--dusk);
  letter-spacing: 0.05em;
}

/* ── Step Navigation ── */
.step-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: var(--space-xs) 0 var(--space-sm);
}

.step-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(251, 243, 228, 0.1);
  border: none;
  transition: all 0.4s ease;
  cursor: pointer;
  padding: 0;
  position: relative;
}

.step-dot::after {
  content: '';
  position: absolute;
  inset: -10px;
}

.step-dot.active {
  background: var(--sky);
  width: 28px;
  border-radius: 5px;
  box-shadow: 0 0 12px rgba(227, 162, 68, 0.3);
}

.step-dot.completed {
  background: var(--sky-deep);
}

/* ── Steps ── */
.steps-container {
  min-height: 320px;
  position: relative;
}

.step {
  display: none;
  animation: fadeInUp 0.6s ease forwards;
}

.step.active {
  display: block;
}

.step__inner {
  text-align: center;
  padding: var(--space-xs) 0;
}

.step__number-ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, #FCE3AE, #E3A244 46%, #C67B5C 100%);
  box-shadow: 0 0 44px 6px rgba(227, 162, 68, 0.45);
  border: none;
  position: relative;
}

.step__number {
  color: #1C2740;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35rem;
}

.step__label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dusk);
  margin-top: var(--space-xs);
}

.step__title {
  color: var(--cream);
  font-size: clamp(1.3rem, 3.5vw, 1.8rem);
  margin: 0.2rem 0 0.3rem;
}

.step__why {
  /* Was var(--sky). Under the reskin that resolved to marigold, which turned a
     full italic sentence into a block of accent colour. Body text per
     design-system.md instead; the diya carries the marigold on this screen. */
  color: rgba(245, 239, 228, 0.75);
  font-weight: 400;
  font-size: 0.9rem;
  font-style: italic;
  margin-bottom: var(--space-sm);
  max-width: 100%;
}

.step__instructions {
  list-style: none;
  padding: 0;
  text-align: left;
  max-width: 420px;
  margin: 0 auto;
}

.step__instructions li {
  padding: 0.45rem 0;
  font-size: 1rem;
  color: rgba(245, 239, 228, 0.85);
  font-weight: 300;
  line-height: 1.65;
  border-bottom: 1px solid rgba(251, 243, 228, 0.04);
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.step__instructions li:last-child {
  border-bottom: none;
}

.step__instructions li::before {
  content: '';
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sky-deep);
  margin-top: 0.6rem;
  box-shadow: 0 0 6px rgba(184, 116, 32, 0.3);
}

/* ── Breathing ring (steps 1 & 5) ── */
.step--breathe .step__number-ring {
  animation: breatheRing 6s ease-in-out infinite;
}

.step__ring-pulse {
  position: absolute;
  inset: -22px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(227, 162, 68, 0.34) 0%, rgba(227, 162, 68, 0) 70%);
  opacity: 0;
  animation: ringPulse 6s ease-in-out infinite;
}

@keyframes breatheRing {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

@keyframes ringPulse {
  0%, 100% { transform: scale(0.9); opacity: 0.35; }
  50%      { transform: scale(1.18); opacity: 0.75; }
}

/* ── Step Controls ── */
.step-controls {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  position: sticky;
  bottom: 0;
  background: linear-gradient(to top, #293755 60%, transparent);
  padding: var(--space-md) 0 var(--space-sm);
  z-index: 10;
}

.step-controls .btn {
  padding: 0.7rem 1.5rem;
  font-size: 0.9rem;
  min-height: 44px;
  border-radius: var(--radius-full);
}

.step-controls .btn--primary {
  background: var(--sky-deep);
}

.step-controls .btn--primary:hover {
  background: var(--sky);
  color: var(--night);
}

.step-controls .btn--secondary {
  color: var(--dusk);
  border-color: rgba(251, 243, 228, 0.12);
  padding: 0.7rem 1.25rem;
}

.step-controls .btn--secondary:hover {
  border-color: var(--dusk);
  color: var(--cloud);
}

/* ── Closing / End Screen ── */
.routine-end {
  display: none;
  text-align: center;
  padding: var(--space-2xl) 0;
  animation: fadeIn 1s ease forwards;
}

.routine-end.active {
  display: block;
}

.routine-end__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(227, 162, 68, 0.08);
  border: 1px solid rgba(227, 162, 68, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-md);
}

.routine-end h2 {
  color: var(--cream);
  font-size: clamp(1.6rem, 4vw, 2.2rem);
}

.routine-end p {
  color: var(--dusk);
  margin: var(--space-sm) auto;
  font-weight: 300;
  max-width: 100%;
}

.routine-end__tip {
  background: rgba(251, 243, 228, 0.04);
  border: 1px solid rgba(251, 243, 228, 0.06);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin: var(--space-lg) auto;
  max-width: 400px;
  text-align: left;
}

.routine-end__tip-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--space-xs);
}

.routine-end__tip h3 {
  color: var(--sky);
  font-size: 0.95rem;
  margin-bottom: 0;
}

.routine-end__tip p {
  font-size: 0.9rem;
  line-height: 1.65;
  color: rgba(245, 239, 228, 0.6);
}

.routine-end__actions {
  margin-top: var(--space-md);
}

.routine-end__actions .btn--secondary {
  color: var(--dusk);
  border-color: rgba(251, 243, 228, 0.1);
}

.routine-end__actions .btn--secondary:hover {
  color: var(--cloud);
  border-color: var(--dusk);
}

.routine-end__contact {
  margin-top: var(--space-lg);
  font-size: 0.85rem;
  color: var(--dusk);
  font-weight: 300;
}

.routine-end__contact a {
  color: var(--sky);
  text-decoration: none;
}

.routine-end__contact a:hover {
  color: var(--sky-light);
}

/* ── End screen signup ── */
.routine-end__signup {
  background: rgba(251, 243, 228, 0.04);
  border: 1px solid rgba(251, 243, 228, 0.06);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin: var(--space-lg) auto;
  max-width: 400px;
  text-align: center;
}

.routine-end__signup h3 {
  color: var(--cream);
  font-size: 1.1rem;
  margin-bottom: var(--space-xs);
}

.routine-end__signup > p {
  font-size: 0.9rem;
  color: var(--dusk);
  margin: 0 auto var(--space-md);
  max-width: 100%;
}

.routine-end__form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.routine-end__form input {
  width: 100%;
  padding: 0.9rem 1.25rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--night);
  background: var(--cream);
  border: 1.5px solid rgba(227, 162, 68, 0.3);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  min-height: 48px;
}

.routine-end__form input:focus {
  border-color: var(--sky);
  box-shadow: 0 0 0 3px rgba(227, 162, 68, 0.2);
}

.routine-end__form input::placeholder {
  color: var(--dusk);
  font-weight: 300;
}

.routine-end__form .btn {
  min-height: 48px;
}

/* The note doubles as the error slot when a signup fails, so it has to be
   readable as a warning without moving anything on the screen. */
.routine-end__form-note.is-error {
  color: var(--rose);
  font-weight: 500;
}

.routine-end__form-note {
  font-size: 0.75rem;
  color: var(--dusk);
  margin-top: 0.25rem;
}

/* ── Audio Toggle ── */
.audio-toggle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(227, 162, 68, 0.1);
  border: 1.5px solid rgba(227, 162, 68, 0.15);
  color: var(--sky);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.audio-toggle:hover {
  background: rgba(227, 162, 68, 0.18);
  border-color: var(--sky);
}

.audio-toggle.is-muted {
  color: var(--dusk);
  border-color: rgba(251, 243, 228, 0.08);
  background: rgba(251, 243, 228, 0.04);
}

/* Prep page audio toggle — larger with label */
.prep-audio-toggle {
  margin-bottom: var(--space-md);
}

.audio-toggle--prep {
  width: auto;
  border-radius: var(--radius-full);
  padding: 0.6rem 1.25rem;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
}

/* ── Safety Banner ── */
.safety-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: rgba(196, 112, 94, 0.06);
  border: 1px solid rgba(196, 112, 94, 0.1);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  margin-top: var(--space-lg);
  font-size: 0.85rem;
  color: rgba(240, 213, 205, 0.8);
  font-weight: 300;
  line-height: 1.6;
}

.safety-banner strong {
  font-weight: 600;
  color: var(--rose);
}

/* ══════════════════════════════════════════════
   Decorations — bold Phosphor icons as bg art
   ══════════════════════════════════════════════ */

.deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.deco--header {
  overflow: visible;
}

.routine-header,
.prep,
.routine-steps,
.routine-end {
  position: relative;
}

.routine-header .container,
.prep .container,
.routine-steps .container,
.routine-end .container {
  position: relative;
  z-index: 1;
}

.deco__icon {
  position: absolute;
  line-height: 1;
  opacity: 0;
}

/* ── Animations ── */
@keyframes decoFloat {
  0% { transform: translateY(0) rotate(0deg); opacity: 0; }
  10% { opacity: var(--deco-opacity, 0.5); }
  50% { transform: translateY(-14px) rotate(4deg); }
  100% { transform: translateY(0) rotate(0deg); opacity: var(--deco-opacity, 0.5); }
}

@keyframes decoFloatSm {
  0% { transform: translateY(0); opacity: 0; }
  10% { opacity: var(--deco-opacity, 0.5); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0); opacity: var(--deco-opacity, 0.5); }
}

@keyframes decoTwinkle {
  0% { opacity: 0; transform: scale(0.8) rotate(20deg); }
  10% { opacity: calc(var(--deco-opacity, 0.5) * 0.5); }
  50% { opacity: var(--deco-opacity, 0.5); transform: scale(1) rotate(0deg); }
  100% { opacity: calc(var(--deco-opacity, 0.5) * 0.5); transform: scale(0.8) rotate(20deg); }
}

@keyframes decoDrift {
  0% { transform: translateX(0); opacity: 0; }
  10% { opacity: var(--deco-opacity, 0.2); }
  50% { transform: translateX(12px); }
  100% { transform: translateX(0); opacity: var(--deco-opacity, 0.2); }
}

/* ════════════════════════════════════════════
   All sections use the same layout pattern:
   - 1 big anchor icon (top-right area)
   - 1 medium icon (bottom-left area)
   - 3 accent sparkles/stars scattered
   ════════════════════════════════════════════ */

/* ── HEADER ── */
.deco__moon-1 {
  font-size: 8rem;
  top: 5%;
  right: 8%;
  color: #E3A244;
  --deco-opacity: 0.55;
  animation: decoFloat 12s ease-in-out infinite;
}

.deco__sparkle-1 {
  font-size: 3rem;
  top: 18%;
  left: 12%;
  color: #F7E6C8;
  --deco-opacity: 0.6;
  animation: decoTwinkle 4s ease-in-out infinite;
}

.deco__sparkle-2 {
  font-size: 2.2rem;
  bottom: 15%;
  right: 18%;
  color: #EBCFC2;
  --deco-opacity: 0.55;
  animation: decoTwinkle 5.5s ease-in-out infinite 1.5s;
}

.deco__sparkle-3 {
  font-size: 2.6rem;
  top: 10%;
  left: 35%;
  color: #C67B5C;
  --deco-opacity: 0.5;
  animation: decoTwinkle 6s ease-in-out infinite 3s;
}

.deco__cloud-1 {
  font-size: 5rem;
  bottom: 8%;
  left: 8%;
  color: #E8DCC8;
  --deco-opacity: 0.25;
  animation: decoDrift 18s ease-in-out infinite;
}

/* ── PREP ── */
.deco__cloud-moon {
  font-size: 8rem;
  top: 2%;
  right: 5%;
  color: #F7E6C8;
  --deco-opacity: 0.4;
  animation: decoFloat 14s ease-in-out infinite;
}

.deco__sparkle-4 {
  font-size: 2.4rem;
  top: 12%;
  left: 10%;
  color: #E3A244;
  --deco-opacity: 0.6;
  animation: decoTwinkle 5s ease-in-out infinite;
}

.deco__heart-1 {
  font-size: 2.8rem;
  bottom: 12%;
  left: 10%;
  color: #EBCFC2;
  --deco-opacity: 0.45;
  animation: decoFloatSm 8s ease-in-out infinite 2s;
}

.deco__sparkle-5 {
  font-size: 2rem;
  bottom: 25%;
  right: 15%;
  color: #C67B5C;
  --deco-opacity: 0.5;
  animation: decoTwinkle 6s ease-in-out infinite 1s;
}

.deco__star-1 {
  font-size: 2.2rem;
  top: 45%;
  left: 15%;
  color: #E3A244;
  --deco-opacity: 0.45;
  animation: decoTwinkle 7s ease-in-out infinite 3s;
}

/* ── STEPS ── */
.deco__moon-2 {
  font-size: 8rem;
  top: 1%;
  right: 6%;
  color: #E3A244;
  --deco-opacity: 0.45;
  animation: decoFloat 16s ease-in-out infinite;
}

.deco__sparkle-6 {
  font-size: 2.8rem;
  top: 10%;
  left: 10%;
  color: #F7E6C8;
  --deco-opacity: 0.6;
  animation: decoTwinkle 4s ease-in-out infinite 1s;
}

.deco__sparkle-7 {
  font-size: 2.2rem;
  bottom: 18%;
  right: 12%;
  color: #C67B5C;
  --deco-opacity: 0.55;
  animation: decoTwinkle 5.5s ease-in-out infinite 3s;
}

.deco__heart-2 {
  font-size: 2.4rem;
  bottom: 30%;
  left: 8%;
  color: #C67B5C;
  --deco-opacity: 0.45;
  animation: decoFloatSm 9s ease-in-out infinite 1s;
}

.deco__cloud-2 {
  font-size: 5rem;
  bottom: 8%;
  left: 12%;
  color: #E8DCC8;
  --deco-opacity: 0.25;
  animation: decoDrift 20s ease-in-out infinite;
}

/* ── END ── */
.deco__moon-3 {
  font-size: 10rem;
  top: -2%;
  right: 5%;
  color: #E3A244;
  --deco-opacity: 0.55;
  animation: decoFloat 10s ease-in-out infinite;
}

.deco__cloud-moon-2 {
  font-size: 7rem;
  bottom: 8%;
  left: 6%;
  color: #F7E6C8;
  --deco-opacity: 0.4;
  animation: decoFloat 14s ease-in-out infinite 3s;
}

.deco__sparkle-8 {
  font-size: 3rem;
  top: 10%;
  left: 14%;
  color: #E3A244;
  --deco-opacity: 0.65;
  animation: decoTwinkle 4s ease-in-out infinite;
}

.deco__sparkle-9 {
  font-size: 2.4rem;
  top: 35%;
  right: 16%;
  color: #F7E6C8;
  --deco-opacity: 0.55;
  animation: decoTwinkle 5s ease-in-out infinite 2s;
}

.deco__sparkle-10 {
  font-size: 2.2rem;
  bottom: 22%;
  right: 14%;
  color: #C67B5C;
  --deco-opacity: 0.55;
  animation: decoTwinkle 6s ease-in-out infinite 4s;
}

.deco__heart-3 {
  font-size: 3rem;
  bottom: 18%;
  right: 22%;
  color: #EBCFC2;
  --deco-opacity: 0.5;
  animation: decoFloatSm 8s ease-in-out infinite 2s;
}

.deco__star-2 {
  font-size: 2.6rem;
  top: 22%;
  left: 25%;
  color: #E3A244;
  --deco-opacity: 0.5;
  animation: decoTwinkle 5.5s ease-in-out infinite 1s;
}

.deco__cloud-3 {
  font-size: 5rem;
  top: 50%;
  left: 8%;
  color: #E8DCC8;
  --deco-opacity: 0.22;
  animation: decoDrift 22s ease-in-out infinite;
}

.deco__flame {
  font-size: 3.5rem;
  bottom: 6%;
  left: 22%;
  color: #C67B5C;
  --deco-opacity: 0.45;
  animation: decoFloatSm 10s ease-in-out infinite 4s;
}

/* ── Responsive ── */
@media (min-width: 480px) {
  .prep-columns {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .step__instructions li {
    font-size: 0.975rem;
  }

  .steps-container {
    min-height: 360px;
  }

  .routine-header {
    padding: var(--space-lg) 0 var(--space-md);
  }

  .prep-card {
    padding: var(--space-md);
  }

  /* Scale decorations for mobile — smaller, and dimmer so they don't compete
     with text. Raised from 0.12 to 0.3 on the reskin: the icons now carry the
     marigold warmth, and at 0.12 they were invisible on the primary viewport.
     Still well under the desktop 0.45–0.65, and above the 0.2 floor in
     design-system.md. */
  .deco__icon { --deco-opacity: 0.22 !important; }
  .deco__moon-1 { font-size: 5rem; right: 6%; top: 10%; }
  .deco__cloud-moon { font-size: 5rem; right: 3%; }
  .deco__moon-2 { font-size: 5rem; right: 4%; }
  .deco__moon-3 { font-size: 6rem; right: 4%; top: 2%; }
  .deco__cloud-moon-2 { font-size: 4rem; left: 4%; }
}

@media (prefers-reduced-motion: reduce) {
  .deco__icon {
    animation: none !important;
  }
}