:root {
  --mauve: #9B5B5C;
  --mauve-600: #844C4D;
  --mauve-800: #6B3D3E;
  --blush: #F4B4A8;
  --blush-100: #FBDED7;
  --mist: #C5DDE2;
  --charcoal: #333333;
  --ink: #2A2A2A;
  --cream: #FEFCFB;
  --paper: #F1EDE9;
  --slate-700: #5A5350;
  --slate-500: #837B77;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
}

body { margin: 0; background: var(--paper); color: var(--charcoal); font-family: 'Figtree', system-ui, sans-serif; font-size: 18px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
a { color: var(--mauve-800); text-underline-offset: .18em; }
a:hover { color: var(--mauve); }
*:focus-visible { outline: 3px solid var(--mauve); outline-offset: 2px; }
input::placeholder, textarea::placeholder { color: var(--slate-500); }
input:focus, textarea:focus { outline: 3px solid var(--mauve); outline-offset: 2px; }

@keyframes vmRise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes vmPop { from { opacity: 0; transform: scale(.6) rotate(var(--r, 0deg)); } to { opacity: 1; transform: scale(1) rotate(var(--r, 0deg)); } }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; } }

/* Design-system Button: hard shadow, lifts on hover, settles on press */
.vm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; cursor: pointer; font-family: 'Montserrat', system-ui, sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; padding: 14px 22px; border-radius: 8px; border: 1.5px solid var(--charcoal); background: var(--mauve); color: #fff; box-shadow: 4px 4px 0 var(--charcoal); transition: background 200ms var(--ease-out), color 200ms var(--ease-out), transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out); }
.vm-btn:hover { background: var(--mauve-600); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--charcoal); color: #fff; }
.vm-btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--charcoal); }
.vm-btn.lg { padding: 16px 26px; }
.vm-btn.mist { background: var(--mist); color: var(--ink); }
.vm-btn.mist:hover, .vm-btn.mist:active { background: var(--charcoal); color: var(--cream); }

.hov-dark:hover { background: #1F1F1F; }
.hov-blush:hover { background: var(--blush-100) !important; }
.hov-link:hover { color: var(--mauve) !important; }
.hov-fade:hover { opacity: 1 !important; }

/* Grids that the design sized from window width */
.opt-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .opt-grid.two { grid-template-columns: 1fr 1fr; } }
.map-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; margin-top: 34px; align-items: stretch; }
@media (min-width: 420px) { .map-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 720px) { .map-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* The question number already sits above the card; drop the nav copy where it would push the page wider than the screen. */
@media (max-width: 479px) { .nav-step { display: none; } }

/* Speed round chips: wrap on desktop, two columns on a phone so every chip is an easy tap. */
.tool-grid { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 560px) { .tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .tool-grid > button { padding: 14px 10px; } }