/* ============================================================
   find.css - Find Your Jewel
   Uses the canonical kit (fb-ui.css). Page adds:
     - dark-mode token override at body level
     - intro grid with explicit flex order on mobile
       (h1 → brief → collage → name+begin → past boards)
     - intro WAVE STRIP collage
     - quiz tiles (red selected) + glass floating nav
     - EDITORIAL BOARD (flex): square jewels with VIEW pill,
       picks flex-fill remaining space
     - share toast + name form + past-board chips
   ============================================================ */

/* ============== DARK-MODE TOKEN OVERRIDES ============== */
body {
  --canvas-bg: #0a0a0a;
  --text: #f6f4ef;
  --text-muted: rgba(246,244,239,0.66);
  --text-faint: rgba(246,244,239,0.42);
  --hover: rgba(255,255,255,0.06);
  --glass-bg: rgba(255,255,255,0.06);
  --glass-bg-strong: rgba(255,255,255,0.10);
  --glass-shadow: 0 2px 8px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.08), inset 0 1px 0 rgba(255,255,255,0.05);
  --control-bg:       rgba(255,255,255,0.08);
  --control-bg-hover: rgba(255,255,255,0.14);
  --control-border:   rgba(255,255,255,0.18);
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f6f4ef' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  --jewel-tile-bg: #ebe7df;            /* beige backdrop for jewel cards */
  --ctrl-h: 44px;                      /* unified height for buttons + inputs */
}

body::before {
  background:
    radial-gradient(60% 60% at 20% 10%, rgba(247,72,39,0.10), transparent 60%) !important,
    radial-gradient(50% 50% at 90% 20%, rgba(254,229,165,0.04), transparent 70%) !important,
    radial-gradient(80% 80% at 60% 110%, rgba(177,155,125,0.06), transparent 70%) !important;
}
body { background: #000; color: var(--text); }

/* ============== WORDMARK (inside the intro text block) ============== */
.wm-logo {
  font-family: futura-pt, sans-serif;
  font-weight: 500;
  font-size: 27px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 var(--s-6);
}
@media (max-width: 640px) {
  .wm-logo { font-size: 21px; letter-spacing: 0.28em; margin-bottom: var(--s-5); }
}

/* ============== STAGES ============== */
.stage {
  display: none;
  min-height: 100vh;
  animation: stage-in 420ms cubic-bezier(.2,.7,.2,1) both;
}
.stage.is-active { display: block; }
@keyframes stage-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ============== ENTRANCE ANIMATIONS ==============
   Subtle editorial motion. Honoured by the kit's prefers-reduced-motion
   rule, which collapses all animation durations to ~0. */
@keyframes fb-rise   { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fb-fade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes fb-settle { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes fb-place  { from { opacity: 0; transform: translateY(18px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* --- intro: text rises in sequence --- */
.intro-text .wm-logo { animation: fb-rise 560ms ease both 40ms; }
.intro-text .eyebrow { animation: fb-rise 600ms ease both 140ms; }
.intro-text h1       { animation: fb-rise 760ms cubic-bezier(.2,.7,.2,1) both 240ms; }
.intro-lede          { animation: fb-rise 700ms ease both 380ms; }
.name-form           { animation: fb-rise 700ms ease both 500ms; }
.past-boards:not([hidden]) { animation: fb-fade 700ms ease both 640ms; }

/* --- intro: wave tiles fade in staggered, then float forever ---
   Two animations per tile: fb-fade (opacity entrance) + wave-float (a slow
   infinite transform loop oscillating around the tile's --wave-y base).
   The negative float delay desyncs the tiles so they bob out of phase. */
@keyframes wave-float {
  0%, 100% { transform: translateY(var(--wave-y)) rotate(var(--wave-rot)); }
  50%      { transform: translateY(calc(var(--wave-y) - 14px)) rotate(var(--wave-rot)); }
}
.intro-collage .wave-tile {
  opacity: 0;
  animation:
    fb-fade 620ms ease both,
    wave-float 8s ease-in-out infinite;
}
.intro-collage .wave-tile img { animation: fb-settle 1000ms cubic-bezier(.2,.7,.2,1) both; }

/* animation-delay maps in order: [fb-fade entrance, wave-float phase offset] */
.intro-collage .wave-tile:nth-child(1) { animation-delay: 280ms,  0.0s; }
.intro-collage .wave-tile:nth-child(2) { animation-delay: 360ms, -1.6s; }
.intro-collage .wave-tile:nth-child(3) { animation-delay: 440ms, -3.2s; }
.intro-collage .wave-tile:nth-child(4) { animation-delay: 520ms, -4.8s; }
.intro-collage .wave-tile:nth-child(5) { animation-delay: 600ms, -6.4s; }
.intro-collage .wave-tile:nth-child(1) img { animation-delay: 280ms; }
.intro-collage .wave-tile:nth-child(2) img { animation-delay: 360ms; }
.intro-collage .wave-tile:nth-child(3) img { animation-delay: 440ms; }
.intro-collage .wave-tile:nth-child(4) img { animation-delay: 520ms; }
.intro-collage .wave-tile:nth-child(5) img { animation-delay: 600ms; }

/* --- results: headline rises in sequence --- */
.stage-results .hero .eyebrow { animation: fb-rise 600ms ease both 80ms; }
.stage-results .hero h1       { animation: fb-rise 720ms cubic-bezier(.2,.7,.2,1) both 180ms; }
.stage-results .hero p        { animation: fb-rise 680ms ease both 320ms; }

/* --- results: board tiles "place" in; per-tile delay is set inline by JS --- */
.result-collage .ed-tile { opacity: 0; animation: fb-place 560ms cubic-bezier(.2,.7,.2,1) both; }

/* ============== INTRO ==============
   Desktop: 2-column grid (text+form left, collage right, past boards full-width below).
   Mobile (<=900px): single flex column with explicit order so the layout reads
   h1 → brief → collage → name → past boards. */
.stage-intro { padding: var(--s-8) 0 var(--s-10); }
/* Single-column at EVERY width. The wave strip is a horizontal band, so a
   2-column layout would crush it into a narrow side column. DOM order is
   already text → collage → name form → past boards. */
.intro-grid {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--s-7);
  display: flex;
  flex-direction: column;
  gap: var(--s-7);
}
.intro-text  { max-width: 720px; }
.name-form   { width: 100%; }
@media (max-width: 640px) {
  .stage-intro { padding: var(--s-6) 0 var(--s-9); }
  .intro-grid { padding: 0 var(--s-4); gap: var(--s-6); }
}

.intro-text .eyebrow {
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 var(--s-4);
}
.intro-text h1 {
  font-family: futura-pt, sans-serif;
  font-weight: 300;
  font-size: clamp(34px, 9vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.005em;
  margin: 0 0 var(--s-5);
  color: #fff;
}
.intro-lede {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 480px;
  margin: 0;
}

.cta-row {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
}
.cta-row .meta-line {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ============== INTRO WAVE STRIP ============== */
.intro-collage {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}
.intro-collage .wave-tile {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 16px;
  background: #1a1a1a;
  box-shadow: 0 14px 28px rgba(0,0,0,0.35);
  /* base wave position lives in CSS vars so the float keyframe can
     oscillate around each tile's own offset */
  --wave-y: 0px;
  --wave-rot: 0deg;
}
.intro-collage .wave-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.intro-collage .wave-tile:nth-child(1) { --wave-y: 10px;  --wave-rot: -1.2deg; }
.intro-collage .wave-tile:nth-child(2) { --wave-y: -10px; --wave-rot: 1.2deg; }
.intro-collage .wave-tile:nth-child(3) { --wave-y: 14px;  --wave-rot: -1.5deg; }
.intro-collage .wave-tile:nth-child(4) { --wave-y: -14px; --wave-rot: 1.5deg; }
.intro-collage .wave-tile:nth-child(5) { --wave-y: 8px;   --wave-rot: -1deg; }
/* On narrow phones 5 tiles get too small to read - show 3, larger. */
@media (max-width: 560px) {
  .intro-collage { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .intro-collage .wave-tile:nth-child(n+4) { display: none; }
}

/* ============== NAME FORM ============== */
.name-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  max-width: 380px;
  margin: 30px 0 20px;
}
/* fb-ui.css ships a `:root input[type=text]` rule with specificity (0,2,1)
   that overrides shorter selectors. Match the specificity by qualifying
   with the element + attribute so our values win. */
input.name-input[type="text"] {
  width: 100%;
  height: var(--ctrl-h);                /* same height as .btn */
  box-sizing: border-box;
  padding: 0 var(--s-5);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: var(--radius-pill);
  color: var(--text);
  font-family: futura-pt, sans-serif;
  font-size: 15px;
  letter-spacing: 0.02em;
  transition: border-color 160ms ease, background 160ms ease;
}
input.name-input[type="text"]:focus {
  outline: none;
  border-color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.10);
}
input.name-input[type="text"]::placeholder { color: rgba(255,255,255,0.45); }
.name-form .cta-row { margin-top: var(--s-1); }

/* ============== PAST BOARDS ============== */
.past-boards { max-width: 520px; }
.past-label {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 500;
  margin: 0 0 var(--s-3);
}
.past-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.past-list li a {
  display: inline-block;
  padding: 6px 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-pill);
  color: var(--text);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease;
}
.past-list li a:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.30);
}

/* ============== BUTTONS ============== */
.btn {
  height: var(--ctrl-h);                /* explicit match to name-input */
  box-sizing: border-box;
  padding: 0 var(--s-6);
  gap: 8px;
  background: var(--text);
  color: var(--canvas-bg);
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.35; cursor: not-allowed; transform: none;
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
/* Begin has a TRAILING chevron - trim right padding so the arrow's gap to
   the edge matches its top/bottom gap (the default 24px reads right-heavy). */
#beginBtn { padding-right: 12px; }
.btn.outline {
  background: transparent;
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.30);
}
/* All buttons hover the same way: red fill, white text + icon, no lift, no
   glow. (Overrides the kit's translateY/opacity hover.) */
.btn:hover,
.btn.outline:hover {
  background: var(--accent, #f74827);
  color: #fff;
  transform: none;
  opacity: 1;
  box-shadow: none;
}
.btn:disabled:hover,
.btn[aria-disabled="true"]:hover {
  background: var(--text);
  color: var(--canvas-bg);
}

/* ============== QUIZ STAGE ============== */
.stage-quiz { padding: var(--s-5) 0 180px; }
.quiz-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px;
  background: rgba(255,255,255,0.18);
  z-index: 60;
  opacity: 0; transition: opacity 240ms ease;
  pointer-events: none;
}
body[data-stage="quiz"] .quiz-progress { opacity: 1; }
.quiz-progress-fill { height: 100%; width: 0; background: #fff; transition: width 420ms cubic-bezier(.2,.7,.2,1); }
.quiz-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--s-6);
  text-align: center;
  color: #fff;
}
.quiz-question {
  font-family: futura-pt, sans-serif;
  font-weight: 300;
  font-size: clamp(26px, 6vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.005em;
  color: #fff;
  margin: var(--s-6) 0 var(--s-3);
}
.quiz-sub {
  color: rgba(255,255,255,0.82);
  font-size: 14px;
  line-height: 1.55;
  margin: 0 auto var(--s-7);
  max-width: 560px;
  padding: 0 var(--s-3);
}

.quiz-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s-4);
  max-width: 1100px;
  margin: 0 auto;
}
@media (min-width: 900px) {
  .quiz-options[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 820px; }
  .quiz-options[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .quiz-options[data-count="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .quiz-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
.opt-tile {
  display: flex;                       /* column so the image stays fixed and
                                          the label flexes to absorb height */
  flex-direction: column;
  padding: 0;
  background: #fff;
  border: 3px solid transparent;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: transform 200ms ease, border-color 160ms ease, box-shadow 200ms ease, background 160ms ease;
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}
.opt-tile:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(0,0,0,0.28); }
/* Selected: red fill + red border only. No outer glow ring. */
.opt-tile.is-selected {
  background: var(--accent, #f74827);
  border-color: var(--accent, #f74827);
  box-shadow: 0 14px 32px rgba(0,0,0,0.4);
}
.opt-tile.is-selected .opt-label { color: #fff; }
/* Image: fixed square, never shrinks - so every card's image is the same
   size and top-aligned regardless of how many lines the label runs. */
.opt-tile .opt-img { aspect-ratio: 1/1; background: #ebe7df; overflow: hidden; flex-shrink: 0; }
.opt-tile .opt-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Label fills whatever height the (grid-equalised) card has left, text
   centred - 1-line and 2-line labels both sit centred in that space. */
.opt-tile .opt-label {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-3) var(--s-4) var(--s-4);
  color: #0a0a0a;
  font-family: futura-pt, sans-serif;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-align: center;
}
@media (max-width: 480px) {
  .opt-tile .opt-label { padding: 10px 8px 12px; font-size: 13px; }
}

/* ============== FLOATING NAV ============== */
.floating-nav {
  position: fixed;
  bottom: var(--s-5);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 40;
  display: none;
  align-items: center;
  gap: var(--s-3);
  padding: 10px 14px;
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  color: var(--text);
  border-radius: var(--radius-pill);
  opacity: 0;
  transition: opacity 240ms ease, transform 320ms cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}
body[data-stage="quiz"] .floating-nav {
  display: flex; opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto;
}
.floating-nav .nav-meta {
  display: flex; flex-direction: column; align-items: center; min-width: 120px; padding: 0 var(--s-3);
}
.nav-counter {
  font-family: futura-pt, sans-serif; font-weight: 500;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text);
}
.nav-sub {
  font-size: 10.5px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-muted); margin-top: 2px;
}
.nav-arrow {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,0.12);
  color: var(--text);
  cursor: pointer;
  display: grid; place-items: center;
  transition: background 160ms ease, opacity 160ms ease, color 160ms ease;
}
.nav-arrow:hover:not(:disabled) { background: var(--accent, #f74827); color: #fff; }
.nav-arrow:disabled { opacity: 0.25; cursor: not-allowed; }
.nav-arrow svg { width: 18px; height: 18px; }
.nav-arrow.is-done { background: var(--accent, #f74827); color: #fff; }
.nav-arrow.is-done:hover:not(:disabled) { background: #ff5a3a; }
@media (max-width: 480px) {
  .floating-nav { gap: 8px; padding: 8px 12px; }
  .floating-nav .nav-meta { min-width: 110px; padding: 0 6px; }
  .nav-arrow { width: 40px; height: 40px; }
}

/* ============== RESULTS - EDITORIAL BOARD (flex) ============== */
.stage-results { padding: var(--s-7) 0 var(--s-10); }
.results-inner { max-width: 1180px; margin: 0 auto; padding: 0 var(--s-6); }
.stage-results .hero { text-align: left; margin-bottom: 0; }
.stage-results .hero h1 { font-size: clamp(30px, 7vw, 60px); margin: 0 0 var(--s-5); color: #fff; line-height: 1.05; }
.stage-results .hero .eyebrow { color: rgba(255,255,255,0.55); }
.stage-results .hero p { color: rgba(255,255,255,0.72); margin-bottom: 0; }
@media (max-width: 480px) {
  .stage-results { padding: var(--s-5) 0 var(--s-9); }
  .results-inner { padding: 0 var(--s-4); }
  .stage-results .hero p { font-size: 14px; }
}

/* Flex container. Jewels are fixed-size squares (always 1:1). Picks flex-grow
   to fill remaining row space. The natural wrap creates a magazine-mosaic feel
   without rigid grid lines. */
.result-collage {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: var(--s-7) 0 0;
  align-items: stretch;
}

/* ----- jewel cards (always square, beige bg, "VIEW" pill) -----
   Sizes are explicit in px-from-percent so flex doesn't shrink them. */
.ed-tile {
  position: relative;
  background: #111;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.ed-tile.is-jewel {
  background: var(--jewel-tile-bg);
  flex: 0 0 auto;                                /* lock dimensions, don't flex */
}
.ed-tile.is-jewel.hero    { width: calc(50% - 6px); aspect-ratio: 1 / 1; }
.ed-tile.is-jewel.runner  { width: calc(25% - 9px); aspect-ratio: 1 / 1; }
.ed-tile.is-jewel img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }

.ed-tile.is-jewel .ed-meta {
  position: absolute;
  inset: auto 0 0 0;
  padding: 14px 16px;
  background: transparent;             /* clean, no gradient, sits on beige */
  font-family: futura-pt, sans-serif;
  pointer-events: none;                /* tile itself is the link */
}
/* Title row: ref+name stacked tight on the left, round VIEW button right. */
.ed-tile.is-jewel .ed-meta .name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ed-tile.is-jewel .ed-meta .text-col {
  display: flex;
  flex-direction: column;
  gap: 0;                              /* no vertical gap: ref hugs the title */
  min-width: 0;
}
.ed-tile.is-jewel .ed-meta .ref {
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--accent, #f74827);
}
.ed-tile.is-jewel .ed-meta .name {
  font-size: 18px;                     /* enlarged */
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: #0a0a0a;                      /* black on beige */
  margin: 0;
  font-weight: 500;
}
.ed-tile.is-jewel .ed-meta .view-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #0a0a0a;
  color: #fff;
  display: grid;
  place-items: center;
  pointer-events: auto;
  transition: background 160ms ease;
}
.ed-tile.is-jewel .ed-meta .view-btn svg { width: 15px; height: 15px; }
.ed-tile.is-jewel:hover .view-btn { background: var(--accent, #f74827); }
@media (max-width: 480px) {
  .ed-tile.is-jewel .ed-meta { padding: 12px 14px; gap: 5px; }
  .ed-tile.is-jewel .ed-meta .name { font-size: 15px; }
  .ed-tile.is-jewel .ed-meta .view-btn { width: 32px; height: 32px; }
}

/* ----- pick cards (mixed aspect, flex-grow to fill space) ----- */
.ed-tile.is-pick {
  flex: 1 1 160px;
  min-height: 160px;
  background: #111;
}
.ed-tile.is-pick img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ed-tile.is-pick .cap-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 10px 12px;
  background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
  color: #fff;
  font-family: futura-pt, sans-serif;
  font-size: 12.5px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  pointer-events: none;
}
.ed-tile.is-pick .cap-bar small {
  display: block;
  font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin-bottom: 4px;
}

/* Mobile collapses jewel widths to bigger halves, picks remain flex */
@media (max-width: 720px) {
  .ed-tile.is-jewel.hero   { width: calc(100% - 0px); }
  .ed-tile.is-jewel.runner { width: calc(50% - 6px); }
  .ed-tile.is-pick { flex-basis: calc(50% - 6px); min-height: 140px; }
}
@media (max-width: 480px) {
  .result-collage { gap: 10px; }
  .ed-tile.is-jewel.runner { width: calc(50% - 5px); }
  .ed-tile.is-pick { flex-basis: calc(50% - 5px); min-height: 130px; }
  .ed-tile.is-jewel .ed-meta { padding: 10px 12px; }
}

.results-empty { color: rgba(255,255,255,0.6); font-size: 14px; line-height: 1.6; padding: var(--s-8) 0; text-align: center; }
.results-cta { margin: var(--s-9) 0 0; justify-content: center; }
@media (max-width: 480px) {
  .results-cta { gap: 10px; }
  .results-cta .btn { padding: 0 var(--s-4); font-size: 11px; }
}

/* ============== SHARE TOAST ============== */
.share-toast {
  position: fixed;
  bottom: var(--s-7);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 60;
  padding: 12px 20px;
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius-pill);
  color: var(--text);
  font-family: futura-pt, sans-serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease, transform 320ms cubic-bezier(.2,.7,.2,1);
}
.share-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============== FOOTER ============== */
.find-foot {
  margin-top: var(--s-10);
  padding-top: var(--s-7);
  border-top: 1px solid rgba(255,255,255,0.12);
  text-align: center;
}
.find-foot .foot-brand {
  font-family: futura-pt, sans-serif;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 6px;
}
.find-foot .foot-tagline { font-size: 12px; letter-spacing: 0.08em; color: rgba(255,255,255,0.55); margin: 0 0 var(--s-3); font-style: italic; }
.find-foot .foot-legal { font-size: 10.5px; letter-spacing: 0.10em; color: rgba(255,255,255,0.4); margin: 0; }