/* CogniPage — "Forget Score" check (/check) + shareable result (/check/r/…).
   Builds on /static/brand.css (fonts + tokens).

   Palette: every accent is derived from the two brand colours — the indigo
   --primary (#3f496f) and the muted rose --secondary (#d0a9aa) — so this
   surface reads as part of the site rather than a separate product. Accents
   stay desaturated and mature; depth comes from layering, shadow and motion
   rather than from bright hues. */

:root {
  --maxw: 1080px;
  --radius: 18px;
  --shadow: 0 24px 60px -24px rgba(31, 35, 64, 0.35);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Indigo family, one step brighter than --primary so it reads as an accent. */
  --accent: #55639b;
  /* Deep muted rose — the brand --secondary darkened for contrast on light bg. */
  --rose: #b8878a;
  /* Supporting hues: a slate-teal for positive signals, warm sand for highlights. */
  --sage: #4f7d73;
  --sand: #c3a077;
  --grad-brand: linear-gradient(100deg, var(--primary), var(--accent) 45%, var(--rose));
  --grad-deep: linear-gradient(120deg, var(--primary), var(--accent) 55%, #7c88b5);
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent: #8f9cd0;
    --rose: #d0a9aa;
    --sage: #7fa89e;
    --sand: #d4b58e;
    --shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.6);
  }
}

html { scroll-behavior: smooth; }
.check-body {
  overflow-x: hidden; line-height: 1.6; min-height: 100vh;
  display: flex; flex-direction: column;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

/* ── Animated background orbs ─────────────────────────────────────────────── */
.bg-orbs { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.2; }
.orb-1 { width: 520px; height: 520px; background: var(--accent); top: -140px; left: -120px; animation: float1 18s var(--ease) infinite; }
.orb-2 { width: 420px; height: 420px; background: var(--secondary); top: 20%; right: -140px; animation: float2 22s var(--ease) infinite; }
.orb-3 { width: 360px; height: 360px; background: var(--sage); bottom: -160px; left: 25%; animation: float1 26s var(--ease) infinite reverse; }
.orb-4 { width: 300px; height: 300px; background: var(--rose); top: 55%; left: -120px; opacity: 0.3; animation: float2 30s var(--ease) infinite reverse; }
@keyframes float1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(40px,60px) scale(1.12); } }
@keyframes float2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-50px,-40px) scale(1.08); } }

/* ── Nav / footer ─────────────────────────────────────────────────────────── */
.ck-nav {
  display: flex; align-items: center; justify-content: space-between;
  max-width: var(--maxw); width: 100%; margin: 0 auto; padding: 1.25rem 1.5rem;
}
.nav-brand { display: flex; align-items: center; position: relative; text-decoration: none; }
.beta-badge {
  position: absolute; top: 8px; left: 100%; transform: translateX(-2px);
  padding: 0.1rem 0.35rem; border-radius: 5px; background: var(--primary); color: #fff;
  font-size: 0.55rem; font-weight: 700; letter-spacing: 0.08em; line-height: 1.4;
}
.ck-nav-cta {
  font-weight: 700; font-size: 0.9rem; text-decoration: none; color: #fff;
  padding: 0.55rem 1.1rem; border-radius: 999px; background: var(--grad-deep);
  box-shadow: 0 10px 22px -10px var(--accent);
  transition: transform 0.2s var(--pop), filter 0.2s;
}
.ck-nav-cta:hover { transform: translateY(-2px) scale(1.03); filter: brightness(1.08); }
.ck-sound {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface); font-size: 1.1rem; cursor: pointer;
  box-shadow: 0 8px 18px -10px rgba(31,35,64,0.4);
  transition: transform 0.2s var(--pop);
}
.ck-sound:hover { transform: scale(1.1) rotate(-8deg); }
.ck-footer {
  max-width: var(--maxw); width: 100%; margin: 0 auto; padding: 1.5rem;
  color: var(--muted); font-size: 0.85rem; border-top: 1px solid var(--border);
  text-align: center;
}
.ck-footer a { color: var(--muted); text-decoration: none; }
.ck-footer a:hover { color: var(--fg); }

/* ── Screens ──────────────────────────────────────────────────────────────── */
.ck-main {
  flex: 1; width: 100%; max-width: 760px; margin: 0 auto;
  padding: 1.5rem 1.5rem 3rem; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
}
.ck-screen { display: none; width: 100%; text-align: center; }
.ck-screen.is-active { display: block; animation: screenIn 0.55s var(--ease) both; }
@keyframes screenIn { from { opacity: 0; transform: translateY(22px) scale(0.98); } to { opacity: 1; transform: none; } }

/* ── Intro: 3D floating brain cube ────────────────────────────────────────── */
.ck-hero3d { position: relative; height: 170px; margin: 0.5rem auto 1.25rem; perspective: 700px; }
.ck-cube {
  position: relative; width: 128px; height: 128px; margin: 0 auto;
  transform-style: preserve-3d; animation: cubeBob 5s ease-in-out infinite;
}
.ck-cube-face {
  position: absolute; inset: 0; display: grid; place-items: center; font-size: 4rem;
  border-radius: 28px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 24%, var(--surface)), var(--surface) 60%),
    var(--surface);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  box-shadow:
    0 30px 50px -20px color-mix(in srgb, var(--accent) 65%, transparent),
    inset 0 2px 0 rgba(255,255,255,0.55),
    inset 0 -10px 22px -12px color-mix(in srgb, var(--accent) 45%, transparent);
  transform: rotateX(10deg) rotateY(-14deg);
}
/* Radial gradient rather than a blurred solid: a `filter` inside this
   preserve-3d subtree would rasterise the whole cube onto an opaque layer,
   showing a pale rectangle over the background orbs (see .rs-gauge). */
.ck-cube-glow {
  position: absolute; left: 10%; right: 10%; bottom: -32px; height: 28px;
  background: radial-gradient(
    50% 50% at 50% 50%,
    color-mix(in srgb, var(--accent) 42%, transparent),
    transparent 70%
  );
  animation: glowPulse 5s ease-in-out infinite;
}
@keyframes cubeBob {
  0%,100% { transform: translateY(0) rotateX(8deg) rotateY(-12deg); }
  50%     { transform: translateY(-16px) rotateX(-6deg) rotateY(12deg); }
}
@keyframes glowPulse { 0%,100% { opacity: 0.9; transform: scaleX(1); } 50% { opacity: 0.5; transform: scaleX(0.8); } }
.ck-float { position: absolute; font-size: 1.6rem; opacity: 0.9; animation: floatEmoji 6s ease-in-out infinite; }
.ck-float-1 { left: 22%; top: 8%; animation-delay: -1s; }
.ck-float-2 { right: 22%; top: 16%; animation-delay: -2.5s; }
.ck-float-3 { left: 30%; bottom: 0; animation-delay: -4s; }
.ck-float-4 { right: 28%; bottom: 8%; animation-delay: -5s; }
@keyframes floatEmoji { 0%,100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-14px) rotate(8deg); } }

.ck-eyebrow {
  display: inline-block; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  padding: 0.4rem 0.9rem; border-radius: 999px; margin-bottom: 1.1rem;
}
.ck-title {
  font-size: clamp(1.8rem, 5.5vw, 3rem); line-height: 1.1; font-weight: 800;
  letter-spacing: -0.02em; margin: 0 0 1rem;
}
/* Gradient text needs to separate clearly from the near-black body ink, so it
   starts at the lighter accent rather than at --primary. */
.grad-brand {
  background: linear-gradient(100deg, var(--accent), var(--secondary) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.grad { background: linear-gradient(100deg, var(--primary), var(--secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ck-lead { max-width: 560px; margin: 0 auto 1.9rem; color: var(--muted); font-size: 1.05rem; }
.ck-lead strong { color: var(--fg); }

.ck-start {
  position: relative; display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 1.05rem 2.1rem; font-size: 1.12rem; font-weight: 800; font-family: inherit;
  color: #fff; border: none; border-radius: 999px; cursor: pointer;
  background: var(--grad-brand); background-size: 180% 180%;
  box-shadow: 0 18px 36px -14px var(--rose), inset 0 2px 0 rgba(255,255,255,0.35);
  animation: gradShift 5s ease infinite;
  transition: transform 0.25s var(--pop), box-shadow 0.25s;
}
.ck-start:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 24px 44px -14px var(--rose); }
.ck-start:active { transform: translateY(0) scale(0.98); }
.ck-start-arrow { transition: transform 0.25s var(--pop); }
.ck-start:hover .ck-start-arrow { transform: translateX(5px); }
@keyframes gradShift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.ck-meta {
  list-style: none; padding: 0; margin: 1.6rem 0 0;
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: center;
  color: var(--muted); font-size: 0.88rem; font-weight: 600;
}

/* ── Quiz: progress ───────────────────────────────────────────────────────── */
.ck-progress { display: flex; align-items: center; gap: 0.9rem; margin: 0.4rem 0 1.6rem; }
.ck-progress-track {
  flex: 1; height: 12px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--fg) 8%, transparent);
  box-shadow: inset 0 2px 4px rgba(31,35,64,0.15);
}
.ck-progress-fill {
  height: 100%; width: 0%; border-radius: 999px;
  background: var(--grad-brand); background-size: 200% 100%;
  animation: gradShift 3s linear infinite;
  transition: width 0.6s var(--pop);
  box-shadow: 0 0 12px color-mix(in srgb, var(--rose) 60%, transparent);
}
.ck-progress-label { font-size: 0.82rem; font-weight: 700; color: var(--muted); white-space: nowrap; }

/* ── Quiz: 3D question card ───────────────────────────────────────────────── */
.ck-card-stage { perspective: 1200px; min-height: 340px; }
.ck-card {
  position: relative; text-align: left;
  background: var(--surface);
  border: 1px solid transparent; border-radius: 22px;
  background-clip: padding-box;
  padding: 1.9rem 1.8rem 1.6rem;
  box-shadow: var(--shadow), inset 0 2px 0 rgba(255,255,255,0.45);
  transform-style: preserve-3d;
  animation: cardIn 0.5s var(--pop) both;
}
.ck-card::before {   /* gradient border */
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: 23px;
  background: var(--grad-deep); opacity: 0.55;
}
.ck-card::after {    /* glow underneath = 3D lift */
  content: ""; position: absolute; left: 6%; right: 6%; bottom: -28px; height: 34px; z-index: -2;
  background: radial-gradient(
    50% 50% at 50% 50%,
    color-mix(in srgb, var(--accent) 34%, transparent),
    transparent 70%
  );
}
.ck-card.is-out { animation: cardOut 0.35s var(--ease) both; }
@keyframes cardIn  { from { opacity: 0; transform: translateY(30px) rotateX(-14deg); } to { opacity: 1; transform: none; } }
@keyframes cardOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-26px) rotateX(10deg); } }

.ck-card-emoji {
  width: 62px; height: 62px; display: grid; place-items: center; font-size: 1.9rem;
  border-radius: 18px; margin-bottom: 0.9rem;
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 18%, var(--surface)), var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
  box-shadow: 0 12px 22px -12px color-mix(in srgb, var(--accent) 60%, transparent), inset 0 2px 0 rgba(255,255,255,0.5);
  animation: floatEmoji 4s ease-in-out infinite;
}
.ck-card-cat {
  display: inline-block; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--sage); margin-bottom: 0.5rem;
  padding: 0.2rem 0.6rem; border-radius: 999px;
  background: color-mix(in srgb, var(--sage) 12%, transparent);
}
.ck-card-prompt { margin: 0 0 1.25rem; font-size: 1.28rem; font-weight: 700; line-height: 1.4; }

.ck-choices { display: grid; gap: 0.7rem; }
.ck-choice {
  display: flex; align-items: center; gap: 0.8rem; width: 100%; text-align: left;
  padding: 0.95rem 1.1rem; font-size: 1rem; font-weight: 600; font-family: inherit;
  color: var(--fg); background: var(--bg);
  border: 1.5px solid var(--border); border-radius: 14px; cursor: pointer;
  transition: transform 0.2s var(--pop), border-color 0.2s, box-shadow 0.2s, background 0.2s;
  animation: choiceIn 0.45s var(--pop) both; animation-delay: calc(var(--i) * 70ms);
}
@keyframes choiceIn { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
.ck-choice-key {
  flex: none; width: 28px; height: 28px; display: grid; place-items: center;
  font-size: 0.78rem; font-weight: 800; border-radius: 9px; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}
.ck-choice:hover {
  transform: translateY(-2px) scale(1.012);
  border-color: var(--accent);
  box-shadow: 0 14px 26px -14px color-mix(in srgb, var(--accent) 70%, transparent);
}
.ck-choice.is-picked {
  border-color: var(--sage); background: color-mix(in srgb, var(--sage) 10%, var(--bg));
  transform: scale(1.02);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sage) 25%, transparent);
}
.ck-choice:disabled { cursor: default; opacity: 0.7; }
.ck-choice.is-picked:disabled { opacity: 1; }

.ck-quip { min-height: 1.4em; margin: 1rem 0 0; font-size: 0.92rem; font-weight: 600; color: var(--muted); }
.ck-quip.pop { animation: quipPop 0.4s var(--pop) both; }
@keyframes quipPop { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }

/* ── AI thinking interstitial ─────────────────────────────────────────────── */
.ck-thinking { padding: 3rem 1rem; text-align: center; animation: screenIn 0.3s var(--ease) both; }
.ck-thinking-orb { display: flex; gap: 0.55rem; justify-content: center; margin-bottom: 1.1rem; }
.ck-thinking-orb span {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--grad-brand); animation: dotBounce 1s var(--ease) infinite;
  box-shadow: 0 6px 12px -4px var(--rose);
}
.ck-thinking-orb span:nth-child(2) { animation-delay: 0.15s; background: var(--grad-deep); }
.ck-thinking-orb span:nth-child(3) { animation-delay: 0.3s; }
@keyframes dotBounce { 0%,100% { transform: translateY(0) scale(1); } 40% { transform: translateY(-14px) scale(1.15); } }
.ck-thinking p { color: var(--muted); font-weight: 600; }

/* ── Computing screen ─────────────────────────────────────────────────────── */
.ck-compute { padding-top: 2.5rem; }
.ck-compute-ring { position: relative; width: 130px; height: 130px; margin: 0 auto 1.4rem; }
.ck-compute-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ck-compute-ring .ring-bg { fill: none; stroke: color-mix(in srgb, var(--fg) 10%, transparent); stroke-width: 10; }
.ck-compute-ring .ring-spin {
  fill: none; stroke: var(--accent); stroke-width: 10; stroke-linecap: round;
  stroke-dasharray: 90 240; animation: ringSpin 1.1s linear infinite;
}
@keyframes ringSpin { to { stroke-dashoffset: -330; } }
.ck-compute-emoji { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.4rem; animation: floatEmoji 3s ease-in-out infinite; }
.ck-compute-title { font-size: 1.6rem; font-weight: 800; margin: 0 0 0.5rem; }
.ck-compute-msg { color: var(--muted); font-weight: 600; min-height: 1.5em; }

.ck-error { margin-top: 1.2rem; color: #d14343; font-weight: 600; text-align: center; }
.ck-retry {
  font: inherit; font-weight: 700; color: var(--accent); background: none; border: none;
  text-decoration: underline; cursor: pointer;
}

/* ══ RESULT PAGE ════════════════════════════════════════════════════════════ */
.ck-result { max-width: 860px; }
#ck-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 50; }

.rs-hero { text-align: center; animation: screenIn 0.55s var(--ease) both; }

/* Score gauge */
/* The gauge deliberately avoids `transform-style: preserve-3d`, `perspective`
   and CSS `filter` on its children. Together those force the subtree onto a
   rasterised compositing layer, and WebKit backs that layer with opaque white —
   which paints a visible pale rectangle over the page's blurred background
   orbs, exactly the size of the gauge. Depth here comes from the halo element
   and the ring's own gradient instead, which composite cleanly. */
.rs-gauge-wrap { margin: 0.8rem 0 0.4rem; }
.rs-gauge {
  position: relative; width: clamp(200px, 46vw, 250px); height: clamp(200px, 46vw, 250px);
  margin: 0 auto;
}
.rs-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.rs-ring-bg { fill: none; stroke: color-mix(in srgb, var(--fg) 9%, transparent); stroke-width: 16; }
.rs-ring {
  fill: none; stroke-width: 16; stroke-linecap: round;
  stroke-dasharray: 603; stroke-dashoffset: 603;
  transition: stroke-dashoffset 1.8s var(--ease);
}
.rs-gauge-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.rs-score {
  font-size: clamp(3.4rem, 10vw, 4.6rem); font-weight: 800; line-height: 1;
  background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rs-outof { font-size: 1rem; font-weight: 700; color: var(--muted); }
/* Soft ground shadow. A radial gradient is already soft, so no blur filter is
   needed — and avoiding the filter keeps this out of its own paint layer. */
.rs-gauge-halo {
  position: absolute; left: 12%; right: 12%; bottom: -22px; height: 26px;
  background: radial-gradient(
    50% 50% at 50% 50%,
    color-mix(in srgb, var(--primary) 26%, transparent),
    transparent 70%
  );
}

.rs-band {
  display: inline-block; margin: 1.2rem 0 0.8rem; padding: 0.5rem 1.2rem;
  font-size: 1.05rem; font-weight: 800; color: #fff; border-radius: 999px;
  background: var(--grad-deep); background-size: 180% 180%;
  animation: gradShift 5s ease infinite;
  box-shadow: 0 14px 28px -12px var(--accent);
}
.rs-headline { font-size: clamp(1.5rem, 4.5vw, 2.2rem); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 0.8rem; }
.rs-summary { max-width: 620px; margin: 0 auto 1.8rem; color: var(--muted); font-size: 1.02rem; }

/* Share row */
.rs-share { margin: 0 0 2.4rem; }
.rs-share-label { display: block; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.7rem; }
.rs-share-btns { display: flex; flex-wrap: wrap; gap: 0.55rem; justify-content: center; }
.rs-sbtn {
  display: inline-flex; align-items: center; gap: 0.45rem;
  height: 46px; min-width: 46px; padding: 0 0.9rem; border-radius: 999px;
  font-family: inherit; font-size: 0.88rem; font-weight: 700; color: var(--fg);
  background: var(--surface); border: 1px solid var(--border); cursor: pointer;
  box-shadow: 0 10px 20px -12px rgba(31,35,64,0.45);
  transition: transform 0.2s var(--pop), border-color 0.2s, color 0.2s;
}
.rs-sbtn svg { width: 18px; height: 18px; }
.rs-sbtn:hover { transform: translateY(-3px) scale(1.05); border-color: var(--accent); color: var(--accent); }
/* Labelled buttons (Copy link, Share, Download report) get roomier sides than
   the icon-only circles. */
.rs-sbtn-wide { padding: 0 1.15rem; }

/* Analytics */
.rs-analytics { margin-top: 0.6rem; animation: screenIn 0.6s var(--ease) 0.1s both; }
.rs-h2 { text-align: center; font-size: 1.45rem; font-weight: 800; margin: 0 0 1.4rem; }
.rs-dims {
  display: grid; gap: 1rem; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1.5rem;
}
.rs-dim { animation: screenIn 0.5s var(--ease) both; animation-delay: calc(var(--i) * 90ms); }
.rs-dim-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.4rem; }
.rs-dim-name { font-weight: 700; font-size: 0.98rem; }
.rs-dim-score { font-weight: 800; font-size: 1.05rem; color: var(--accent); }
/* Score-banded colour so a weak dimension reads as weak at a glance — the same
   thresholds the PDF report uses, so the two artefacts agree. */
.rs-dim-score.is-low  { color: var(--rose); }
.rs-dim-score.is-high { color: var(--sage); }
.rs-dim-track {
  height: 12px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--fg) 8%, transparent);
  box-shadow: inset 0 2px 4px rgba(31,35,64,0.14);
}
.rs-dim-fill {
  height: 100%; width: 0%; border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transition: width 1.2s var(--ease);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 35%, transparent);
}
.rs-dim-fill.is-low {
  background: linear-gradient(90deg, var(--primary), var(--rose));
  box-shadow: 0 0 10px color-mix(in srgb, var(--rose) 35%, transparent);
}
.rs-dim-fill.is-high {
  background: linear-gradient(90deg, var(--primary), var(--sage));
  box-shadow: 0 0 10px color-mix(in srgb, var(--sage) 35%, transparent);
}
.rs-dim-insight { margin: 0.45rem 0 0; font-size: 0.88rem; color: var(--muted); }

.rs-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; text-align: left; }
.rs-panel {
  border-radius: var(--radius); padding: 1.3rem 1.4rem; border: 1px solid var(--border);
  background: var(--surface); box-shadow: var(--shadow);
}
.rs-panel h3 { margin: 0 0 0.7rem; font-size: 1.02rem; }
.rs-panel ul { margin: 0; padding-left: 1.1rem; color: var(--muted); font-size: 0.94rem; display: grid; gap: 0.35rem; }
.rs-panel-good { border-top: 4px solid var(--sage); }
.rs-panel-risk { border-top: 4px solid var(--rose); }

.rs-tips {
  margin-top: 1rem; text-align: left; border-radius: var(--radius); padding: 1.3rem 1.4rem;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 8%, var(--surface)), var(--surface));
  box-shadow: var(--shadow);
}
.rs-tips h3 { margin: 0 0 0.7rem; font-size: 1.02rem; }
.rs-tips ol { margin: 0; padding-left: 1.2rem; color: var(--muted); font-size: 0.95rem; display: grid; gap: 0.45rem; }

/* Closing download CTA */
.rs-cta { margin: 2.4rem 0 0; animation: screenIn 0.6s var(--ease) 0.15s both; }
.rs-cta-card {
  position: relative; overflow: hidden; border-radius: 24px; padding: 2rem 1.8rem;
  color: #fff; text-align: left;
  background: var(--grad-deep); background-size: 200% 200%;
  animation: gradShift 8s ease infinite;
  box-shadow: 0 30px 60px -22px var(--accent);
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 1.8rem; align-items: center;
}
.rs-cta-card::before {
  content: ""; position: absolute; top: -60%; right: -20%; width: 70%; height: 160%;
  background: radial-gradient(closest-side, rgba(255,255,255,0.22), transparent);
  pointer-events: none;
}
.rs-cta-gift { font-size: 2rem; display: inline-block; animation: floatEmoji 4s ease-in-out infinite; }
.rs-cta-copy h2 { margin: 0.4rem 0 0.6rem; font-size: clamp(1.3rem, 3.5vw, 1.7rem); font-weight: 800; letter-spacing: -0.01em; }
.rs-cta-copy p { margin: 0; opacity: 0.92; font-size: 0.98rem; }
.rs-cta-copy strong { color: #ffe9a8; }
.rs-cta-actions { display: grid; gap: 0.6rem; justify-items: stretch; }
.rs-cta-btn {
  display: block; text-align: center; text-decoration: none;
  padding: 0.95rem 1.2rem; font-size: 1.02rem; font-weight: 800; font-family: inherit;
  color: var(--primary); background: #fff; border: none; border-radius: 12px; cursor: pointer;
  box-shadow: 0 14px 28px -12px rgba(0,0,0,0.45);
  transition: transform 0.2s var(--pop), filter 0.2s;
}
.rs-cta-btn:hover { transform: translateY(-2px) scale(1.02); }
.rs-cta-note { margin: 0; font-size: 0.85rem; font-weight: 600; opacity: 0.82; text-align: center; }

.rs-again { text-align: center; margin: 2rem 0 0; color: var(--muted); font-weight: 600; }
.rs-again a { color: var(--accent); font-weight: 800; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .rs-cta-card { grid-template-columns: 1fr; padding: 1.6rem 1.3rem; }
  .rs-cards { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .brand-logo { height: 56px; }
  .ck-main { padding: 1rem 1rem 2.5rem; }
  .ck-title br { display: none; }  /* let the headline reflow naturally */
  .ck-title { font-size: clamp(1.55rem, 7vw, 2rem); }
  .ck-card { padding: 1.4rem 1.2rem 1.2rem; }
  .ck-card-prompt { font-size: 1.12rem; }
  .ck-choice { padding: 0.85rem 0.9rem; font-size: 0.94rem; }
  .ck-hero3d { height: 140px; }
  .ck-cube { width: 104px; height: 104px; }
  .ck-cube-face { font-size: 3.2rem; }
  .rs-share-btns { gap: 0.45rem; }
}

/* Reduced motion: keep it calm */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.15s !important; }
}

/* ── Print (Save as PDF) ──────────────────────────────────────────────────── */
@media print {
  .bg-orbs, #ck-confetti, .rs-share, .rs-cta, .rs-again, .ck-nav-cta, .ck-footer { display: none !important; }
  .check-body { background: #fff; color: #111; }
  .rs-gauge { animation: none; }
  .rs-ring { transition: none; }
  .rs-dims, .rs-panel, .rs-tips { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  .rs-hero, .rs-analytics { animation: none; }
}