/* =========================================================
   "Where to start": the guided question flow.

   Layered on top of styles.css, which supplies the palette, the
   type scale, .wrap, .btn, .eyebrow and .vh. Only what is unique
   to this page lives here.

   Kept in its own file rather than an inline <style> for the same
   reason as 404.css and noscript.css: the site's
   Content-Security-Policy sets style-src 'self' with no
   'unsafe-inline', so there are no style="..." attributes
   anywhere and one-off rules have to be real classes.
   ========================================================= */

/* ---------- hero ---------- */
.start-hero{
  position:relative;overflow:hidden;
  padding:clamp(2.6rem,6vw,4.4rem) 0 clamp(2rem,4vw,3rem);
  background:
    radial-gradient(58% 60% at 88% 4%,rgba(231,216,240,.9),rgba(231,216,240,0) 70%),
    radial-gradient(52% 55% at 4% 94%,rgba(239,217,229,.72),rgba(239,217,229,0) 72%),
    linear-gradient(180deg,#fff,var(--cream));
}
.start-hero .wrap{position:relative;z-index:1;max-width:820px}
.start-hero h1{font-size:clamp(2.2rem,5vw,3.6rem);margin-bottom:1rem}
.start-hero h1 em{font-style:italic;color:var(--plum)}
.start-hero .lead{max-width:60ch}

/* A standing crisis note, not something hidden behind a step. It
   sits above the questions so nobody has to answer anything to
   find it. */
.start-crisis{
  display:flex;gap:.85rem;align-items:flex-start;
  background:#fff;border:1px solid var(--line);border-left:5px solid var(--plum);
  border-radius:16px;padding:1rem 1.15rem;margin:1.6rem 0 0;
  font-size:.95rem;color:var(--ink-soft);box-shadow:var(--shadow-soft);
}
.start-crisis svg{width:22px;height:22px;flex:0 0 auto;color:var(--plum);margin-top:.15rem}
.start-crisis p{margin:0}
.start-crisis strong{color:var(--plum-deep)}

/* ---------- the quiz panel ---------- */
.quiz-section{padding:clamp(2.4rem,5vw,4rem) 0 clamp(3rem,7vw,5rem)}
.quiz{
  max-width:820px;margin:0 auto;background:#fff;
  border:1px solid var(--line-soft);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:clamp(1.5rem,4vw,2.8rem);
}
.quiz-bar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-bottom:1.1rem;margin-bottom:1.6rem;border-bottom:1px solid var(--line-soft);
}
.quiz-step-count{
  font-weight:700;text-transform:uppercase;letter-spacing:.18em;
  font-size:.72rem;color:var(--teal-deep);
}
.quiz-back{
  background:none;border:0;padding:.3rem .1rem;cursor:pointer;font-family:var(--ff-body);
  font-weight:600;font-size:.92rem;color:var(--plum);display:inline-flex;align-items:center;gap:.4rem;
}
.quiz-back:hover{color:var(--plum-deep);gap:.6rem}
.quiz-back svg{width:16px;height:16px}

.q-step{border:0;margin:0;padding:0;min-width:0}
.q-legend{
  font-family:var(--ff-display);font-weight:500;line-height:1.12;color:var(--plum-deep);
  font-size:clamp(1.55rem,3.2vw,2.15rem);padding:0;margin:0 0 .5rem;
}
.q-hint{color:var(--ink-soft);font-size:.96rem;margin:0 0 1.5rem}

.q-options{display:grid;gap:.7rem}
.q-opt{
  display:block;width:100%;text-align:left;cursor:pointer;
  font-family:var(--ff-body);font-size:1.04rem;font-weight:500;line-height:1.4;color:var(--ink);
  background:var(--cream);border:1.5px solid var(--line-soft);border-radius:16px;
  padding:1.05rem 1.2rem;position:relative;padding-left:3.1rem;
  transition:border-color .2s,background .2s,transform .15s,box-shadow .2s;
}
/* The marker is drawn with ::before so each option needs no extra
   markup and no inline styling. */
.q-opt::before{
  content:"";position:absolute;left:1.15rem;top:50%;transform:translateY(-50%);
  width:19px;height:19px;border-radius:50%;
  border:2px solid var(--lavender-2);background:#fff;transition:border-color .2s,background .2s,box-shadow .2s;
}
.q-opt:hover{border-color:var(--plum);background:#fff;transform:translateY(-1px);box-shadow:var(--shadow-soft)}
.q-opt:hover::before{border-color:var(--plum)}
.q-opt[aria-pressed="true"]{border-color:var(--plum);background:var(--mist)}
.q-opt[aria-pressed="true"]::before{
  border-color:var(--plum);background:var(--plum);box-shadow:inset 0 0 0 3.5px #fff;
}
/* The safety answer is set apart so it does not read as one more
   product choice in the list. */
.q-opt--safety{
  margin-top:.5rem;border-style:dashed;border-color:var(--line);
  background:#fff;color:var(--plum-deep);font-weight:600;
}
.q-opt--safety:hover{border-style:solid;border-color:var(--plum-deep);background:var(--mist)}

@media (prefers-reduced-motion:reduce){
  .q-opt,.q-opt::before,.quiz-back{transition:none}
  .q-opt:hover{transform:none}
}

/* ---------- the answer ---------- */
.quiz-result{outline:none}
.r-head{max-width:64ch;margin-bottom:2rem}
.r-head h2{font-size:clamp(1.9rem,4vw,2.7rem);margin-bottom:.7rem}
.r-head .lead{color:var(--ink-soft)}
.r-mirror{
  color:var(--plum-deep);font-weight:500;border-left:3px solid var(--lavender-2);
  padding-left:1rem;margin:0
}

.r-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem;align-items:start}
.r-grid--single{grid-template-columns:1fr;max-width:760px}

.r-card{
  background:var(--cream);border:1px solid var(--line-soft);border-radius:20px;
  padding:clamp(1.25rem,2.6vw,1.8rem);
}
.r-card h3{font-size:clamp(1.2rem,2.1vw,1.5rem);margin-bottom:.55rem}
.r-card p{color:var(--ink-soft);font-size:1rem;margin:0 0 1rem}
.r-card p:last-child{margin-bottom:0}
.r-card--lead{grid-column:1/-1;background:#fff;box-shadow:var(--shadow-soft);border-color:var(--line)}
.r-kicker{
  display:inline-block;font-weight:700;text-transform:uppercase;letter-spacing:.16em;
  font-size:.7rem;color:var(--teal-deep);margin-bottom:.7rem;
}
.r-card--care{background:linear-gradient(135deg,var(--mist),var(--lavender));border-color:transparent}
.r-card--care .r-kicker{color:var(--violet)}
.r-card--care p{color:var(--indigo)}

/* The crisis card. White on deep plum so it does not read as one
   more suggestion, and --focus is swapped to white because plum
   only lands about 2:1 on this background. */
.r-card--urgent{
  --focus:#fff;
  background:linear-gradient(135deg,var(--plum-deep),var(--indigo));
  border-color:transparent;color:#fff;box-shadow:var(--shadow-plum);
}
.r-card--urgent h3{color:#fff;font-size:clamp(1.6rem,3vw,2.1rem)}
.r-card--urgent p{color:rgba(255,255,255,.88)}
.r-card--urgent .r-kicker{color:var(--lotus)}
.r-card--urgent .r-note{color:rgba(255,255,255,.7);border-top-color:rgba(255,255,255,.2)}

.r-list{margin:0 0 1.2rem;padding:0;display:grid;gap:.4rem}
.r-list li{
  list-style:none;background:#fff;border:1px solid var(--line-soft);border-radius:100px;
  padding:.5rem .95rem;font-size:.93rem;font-weight:500;color:var(--plum-deep);
}
.r-card--lead .r-list li{background:var(--cream)}

.r-cta{margin:.2rem 0 0}
.r-note{
  font-size:.86rem;color:var(--ink-soft);margin:1.1rem 0 0;
  padding-top:.9rem;border-top:1px solid var(--line-soft);
}

.r-books{display:grid;gap:1rem;margin-top:1.3rem}
.r-book{
  display:grid;grid-template-columns:78px 1fr;gap:1.1rem;align-items:center;
  background:#fff;border:1px solid var(--line-soft);border-radius:16px;padding:.85rem;
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.r-book:hover{transform:translateY(-2px);box-shadow:var(--shadow-soft);border-color:var(--plum)}
.r-book img{width:78px;height:auto;aspect-ratio:2/3;object-fit:cover;border-radius:8px;display:block;box-shadow:var(--shadow-soft)}
/* Stand-in cover for the one title with no cover photograph. Same box as
   .r-book img so the row lines up with the books either side of it. */
.r-book-tile{
  width:78px;aspect-ratio:2/3;border-radius:8px;display:grid;align-content:center;
  padding:.5rem .45rem;box-shadow:var(--shadow-soft);
  background:linear-gradient(160deg,var(--leaf-deep),#3f4a2c);
}
.rbt-title{
  font-family:var(--ff-display);font-weight:500;color:#fff;
  font-size:.62rem;line-height:1.15;text-align:center;
}
.r-book-body h4{font-family:var(--ff-display);font-weight:500;color:var(--plum-deep);font-size:1.02rem;line-height:1.2;margin:0 0 .3rem}
.r-book-body p{font-size:.88rem;color:var(--ink-soft);margin:0 0 .4rem}
.r-go{display:inline-flex;align-items:center;gap:.35rem;font-weight:600;font-size:.88rem;color:var(--plum)}
.r-book:hover .r-go{color:var(--plum-deep)}
@media (prefers-reduced-motion:reduce){.r-book{transition:none}.r-book:hover{transform:none}}

.r-again{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--line-soft);text-align:center}
.r-again-note{font-size:.92rem;color:var(--ink-soft);margin:0 0 1rem}

/* ---------- no-JS fallback ---------- */
/* Hidden here, unhidden by noscript.css. The directory below the
   quiz is real markup either way, so a visitor without JS still
   gets every title on the page. */
.quiz-noscript{display:none;text-align:center}
.quiz-noscript h2{font-size:clamp(1.5rem,3vw,2rem)}
.quiz-noscript p{color:var(--ink-soft);max-width:54ch;margin:0 auto 1.2rem}

/* ---------- the plain directory ---------- */
/* Always in the HTML: it serves the no-JS case, it gives the page
   real indexable content, and some people would simply rather
   browse than answer questions. */
.directory{
  background:
    radial-gradient(60% 55% at 8% 4%,rgba(226,169,196,.26),transparent 64%),
    radial-gradient(56% 56% at 95% 92%,rgba(42,141,160,.14),transparent 68%),
    var(--cream);
}
/* Six topic cards, so three fixed columns rather than auto-fit: auto-fit
   fits four across a wide page and leaves the last two sitting alone on the
   left. Three, then two, then one keeps every row full. */
.dir-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;margin-top:2.2rem}
@media (max-width:1000px){.dir-groups{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.dir-groups{grid-template-columns:1fr}}
.dir-group{background:#fff;border:1px solid var(--line-soft);border-radius:20px;padding:1.4rem 1.5rem;box-shadow:var(--shadow-soft)}
.dir-group h3{font-size:1.15rem;margin-bottom:.3rem}
.dir-group > p{font-size:.92rem;color:var(--ink-soft);margin:0 0 1rem}
.dir-list{margin:0;padding:0;display:grid;gap:.35rem}
.dir-list li{list-style:none;font-size:.93rem;color:var(--ink-soft);padding-left:1.1rem;position:relative}
.dir-list li::before{
  content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--lotus);
}

/* Six tiles, same reasoning as .dir-groups above. */
.dir-rest{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem;margin-top:1.2rem}
@media (max-width:1000px){.dir-rest{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.dir-rest{grid-template-columns:1fr}}
.dir-tile{
  display:block;background:#fff;border:1px solid var(--line-soft);border-radius:18px;
  padding:1.2rem 1.3rem;transition:transform .2s,box-shadow .2s,border-color .2s;
}
.dir-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-soft);border-color:var(--plum)}
.dir-tile h3{font-size:1.05rem;margin-bottom:.35rem}
.dir-tile p{font-size:.9rem;color:var(--ink-soft);margin:0 0 .6rem}
@media (prefers-reduced-motion:reduce){.dir-tile{transition:none}.dir-tile:hover{transform:none}}

/* ---------- responsive ---------- */
@media (max-width:760px){
  .r-grid{grid-template-columns:1fr}
  .r-card--lead{grid-column:auto}
  .quiz{border-radius:20px}
  .q-opt{font-size:1rem;padding:.95rem 1.1rem .95rem 2.9rem}
}
@media (max-width:460px){
  .quiz{padding:1.2rem 1rem;border-radius:18px}
  .r-book{grid-template-columns:62px 1fr;gap:.85rem}
  .r-book img,.r-book-tile{width:62px}
}