:root {
  --navy: #121d7d;
  --navy-deep: #0c1460;
  --cyan: #4dd6ff;
  --red: #f7455f;
  --green: #08e8a8;
  --yellow: #fdf08a;

  --bg: #f5f6fb;
  --surface: #ffffff;
  --text: #1a1f3d;
  --muted: #5a6080;
  --border: #e2e4f0;
  --ghost-bg: #eef0fa;
  --ghost-text: var(--navy);
  --focus: var(--red);
  --step-bg: var(--navy);
  --step-fg: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0f2e;
    --surface: #151b45;
    --text: #eef0fb;
    --muted: #a9afd3;
    --border: #262e66;
    --ghost-bg: #222a63;
    --ghost-text: #ffffff;
    --step-bg: var(--cyan);
    --step-fg: var(--navy);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
}

.wrap {
  width: 100%;
  max-width: 40rem;
  margin: 0 auto;
  padding: 0 16px;
}

a { color: inherit; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }

/* Hero */
.hero {
  background: var(--navy);
  color: #fff;
  padding: 1.5rem 0 2.5rem;
}
.logo img { display: block; width: 96px; height: 96px; }
.hero h1 {
  font-size: clamp(2.1rem, 7vw, 3rem);
  line-height: 1.1;
  margin: 1.25rem 0 .75rem;
  letter-spacing: -0.01em;
}
.lede { font-size: 1.15rem; margin: 0 0 1.75rem; color: #dfe3ff; max-width: 32rem; }

.stripe { display: flex; height: 8px; }
.stripe i { flex: 1; }
.stripe i:nth-child(1) { background: var(--cyan); }
.stripe i:nth-child(2) { background: var(--yellow); }
.stripe i:nth-child(3) { background: var(--green); }
.stripe i:nth-child(4) { background: var(--red); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: .7rem 1.4rem;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform .08s ease, filter .15s ease;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--cyan);
  color: var(--navy-deep);
  font-size: 1.25rem;
  min-height: 3.75rem;
  padding: .9rem 2.2rem;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .18);
}
.btn-ghost { background: var(--ghost-bg); color: var(--ghost-text); }
.btn-small { min-height: 2.25rem; padding: .3rem 1rem; font-size: .95rem; background: var(--navy); color: #fff; }

.row { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Cards */
main.wrap { padding-top: 1.5rem; padding-bottom: 1rem; }
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.25rem 1.25rem .5rem;
  margin-bottom: 1rem;
}
.card h2 { font-size: 1.2rem; margin: 0 0 .5rem; }
.card p { margin: 0 0 1rem; }
.why { border-left: 6px solid var(--green); }
.own-time { border-left: 6px solid var(--yellow); }
.reassure { margin: 1.25rem 0 0; color: #dfe3ff; font-size: .95rem; }

.address {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  background: var(--ghost-bg);
  border-radius: 12px;
  padding: .6rem .6rem .6rem 1rem;
  margin-bottom: 1rem;
}
.address code {
  font-family: inherit;
  font-weight: 600;
  font-size: 1.1rem;
  overflow-wrap: anywhere;
}

details summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; }
details summary::-webkit-details-marker { display: none; }
details summary::before { content: "+"; font-weight: 700; font-size: 1.3rem; width: 1rem; color: var(--red); }
details[open] summary::before { content: "–"; }
details summary h2 { margin: 0; }

.foot { color: var(--muted); font-size: .9rem; padding-bottom: 2rem; }

/* Printable QR cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; max-width: 60rem; padding-top: 2rem; padding-bottom: 2rem; }
.print-card {
  background: #fff;
  color: var(--navy);
  border: 2px solid var(--navy);
  border-radius: 16px;
  padding: 1.25rem;
  text-align: center;
  break-inside: avoid;
}
.print-card h2 { margin: .25rem 0 .75rem; font-size: 1.4rem; }
.print-card .mark { display: block; margin: 0 auto; }
.print-card .qr svg { width: 100%; max-width: 200px; height: auto; }
.print-card .url { font-weight: 600; margin: .5rem 0 0; }
.print-card .small { font-size: .85rem; margin: .5rem 0 0; }

@media print {
  body { background: #fff; }
  .print-card .small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}

/* Chat button waits for Crisp - some school filters block it */
.chat-btn { display: none; }
html[data-chat="ready"] .chat-btn { display: inline-flex; }
.talk { border-left: 6px solid var(--cyan); }

.btn .icon { width: 1.35em; height: 1.35em; margin-right: .55rem; flex: none; }

/* "Why email us first" animation (src/journey.js) */
.journey { margin: .25rem 0 1.25rem; }
.journey-stage svg, .journey-stage img { display: block; width: 100%; height: auto; border-radius: 12px; }
.journey-stage { aspect-ratio: 600 / 260; }
.journey-stage .j-label { fill: #fff; fill-opacity: .9; font: 600 17px Poppins, system-ui, sans-serif; text-anchor: middle; }
.journey-stage .j-pill { font: 700 15px Poppins, system-ui, sans-serif; text-anchor: middle; }
.journey-cap { display: flex; gap: .75rem; align-items: flex-start; min-height: 4.2em; margin-top: .75rem; line-height: 1.45; }
.journey-cap:empty { display: none; }
.journey-step {
  flex: none; display: inline-grid; place-items: center;
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: var(--step-bg); color: var(--step-fg); font-weight: 700;
}

/* Bare /journey page - fixed 800px frame for GIF/MP4 capture */
.journey-solo { width: 800px; max-width: 100%; margin: 0 auto; padding: 24px; background: var(--navy); color: #fff; }
.journey-solo .journey { margin: 0; }
.journey-solo .journey-stage svg { border-radius: 0; }
.journey-solo .journey-cap { font-size: 1.3rem; min-height: 4.6em; }
.journey-solo .journey-step { background: var(--cyan); color: var(--navy); }

body:has(.journey-solo) { background: var(--navy); }

/* "In your own time" scene - 12s loop, all .ot-* share the cycle */
.own-time-art { display: block; width: 100%; height: auto; margin: .25rem 0 1rem; border-radius: 12px; }
.own-time-art * { animation-duration: 12s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
.own-time-art .ot-sky { animation-name: ot-sky; fill: #8fe3ff; }
.own-time-art .ot-sun { animation-name: ot-sun; }
.own-time-art .ot-night { animation-name: ot-night; opacity: 0; }
.own-time-art .ot-hour, .own-time-art .ot-min { transform-box: view-box; transform-origin: 290px 52px; }
.own-time-art .ot-hour { animation-name: ot-hour; transform: rotate(97deg); }
.own-time-art .ot-min { animation-name: ot-min; transform: rotate(180deg); }
.own-time-art .ot-t1 { animation-name: ot-t1; }
.own-time-art .ot-t2 { animation-name: ot-t2; opacity: 0; }
.own-time-art .ot-t3 { animation-name: ot-t3; opacity: 0; }
.own-time-art .ot-arm { animation-name: ot-arm; animation-timing-function: linear; }
.own-time-art .ot-pen { transform-box: fill-box; transform-origin: 0 100%; animation-name: ot-pen; }
.own-time-art .ot-flat { animation-name: ot-flat; }
.own-time-art .ot-smile { animation-name: ot-smile; opacity: 0; }
.own-time-art .ot-b6 { animation-name: ot-b6; } .own-time-art .ot-b5 { animation-name: ot-b5; }
.own-time-art .ot-b4 { animation-name: ot-b4; } .own-time-art .ot-b3 { animation-name: ot-b3; }
.own-time-art .ot-b2 { animation-name: ot-b2; }
.own-time-art .ot-steam { animation-name: ot-steam; opacity: 0; }
.own-time-art .ot-screen { transform-box: fill-box; transform-origin: 50% 100%; animation-name: ot-screen; transform: scaleY(0); }
.own-time-art .ot-heart { transform-box: view-box; animation-name: ot-heart; transform: translate(238px, 112px) scale(0); }

@keyframes ot-sky { 0%, 28% { fill: #8fe3ff; } 46% { fill: #ff9e7a; } 62%, 92% { fill: #121d7d; } 100% { fill: #8fe3ff; } }
@keyframes ot-sun { 0%, 28% { transform: translateY(0); opacity: 1; } 55% { transform: translateY(70px); opacity: 0; } 94% { transform: translateY(70px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes ot-night { 0%, 52% { opacity: 0; } 62%, 92% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes ot-hour { 0% { transform: rotate(97deg); } 66%, 92% { transform: rotate(277deg); } 100% { transform: rotate(457deg); } }
@keyframes ot-min { 0% { transform: rotate(180deg); } 66%, 92% { transform: rotate(2340deg); } 100% { transform: rotate(4500deg); } }
@keyframes ot-t1 { 0%, 22% { opacity: 1; } 26%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ot-t2 { 0%, 22% { opacity: 0; } 26%, 46% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes ot-t3 { 0%, 46% { opacity: 0; } 50%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes ot-pen {
  0%, 6%, 12%, 18%, 24%, 30%, 36%, 42%, 48%, 54%, 60%, 64% { transform: rotate(0deg) translateX(0); }
  3%, 9%, 15%, 21%, 27%, 33%, 39%, 45%, 51%, 57%, 62% { transform: rotate(-14deg) translateX(2px); }
  66%, 100% { transform: rotate(0deg); }
}
@keyframes ot-arm { 0%, 64% { transform: translate(0, 0); } 68%, 94% { transform: translate(-6px, 4px); } 100% { transform: translate(0, 0); } }
@keyframes ot-flat { 0%, 68% { opacity: 1; } 72%, 94% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes ot-smile { 0%, 68% { opacity: 0; } 72%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes ot-b6 { 0%, 9% { opacity: 1; } 11%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ot-b5 { 0%, 21% { opacity: 1; } 23%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ot-b4 { 0%, 33% { opacity: 1; } 35%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ot-b3 { 0%, 45% { opacity: 1; } 47%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ot-b2 { 0%, 57% { opacity: 1; } 59%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ot-steam { 0%, 68% { opacity: 0; transform: translateY(4px); } 74% { opacity: .9; transform: translateY(0); } 84% { opacity: .5; transform: translateY(-3px); } 90% { opacity: .9; transform: translateY(0); } 95%, 100% { opacity: 0; } }
@keyframes ot-screen { 0%, 66% { transform: scaleY(0); } 71%, 94% { transform: scaleY(1); } 98%, 100% { transform: scaleY(0); } }
@keyframes ot-heart { 0%, 74% { transform: translate(238px, 112px) scale(0); } 77% { transform: translate(238px, 104px) scale(1.25); } 79%, 93% { transform: translate(238px, 104px) scale(1); } 96%, 100% { transform: translate(238px, 98px) scale(0); } }

/* Reduced motion: freeze on the relaxed frame (tea, laptop open, smile). */
@media (prefers-reduced-motion: reduce) {
  .own-time-art * { animation-play-state: paused; animation-delay: -9.8s; }
}