:root{
  --ink:#213b35;
  --ink-soft:#4b645d;
  --paper:#f7f1e8;
  --paper-soft:#fbf7ef;
  --card:#fffaf2;
  --line:#dfd4c4;
  --accent:#c26f3f;
  --accent-soft:#f1d7c4;
  --green:#2f6a61;
  --shadow:0 24px 60px rgba(33,59,53,.18);
  --sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:var(--sans);background:linear-gradient(135deg,var(--paper),#efe4d3);color:var(--ink)}
button,input,textarea{font:inherit}
button{cursor:pointer}
.app-shell{min-height:100vh}
.screen{min-height:100vh;padding:18px 18px calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:18px;max-width:720px;margin:0 auto}
.hero-screen{max-width:none;padding:0;background-size:cover;background-position:center;position:relative;color:white;justify-content:flex-end}
.hero-screen:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.75))}
.hero-content{position:relative;padding:28px 22px calc(30px + env(safe-area-inset-bottom));max-width:720px;margin:0 auto;width:100%}
.logo{width:190px;max-width:70%;display:block;margin-bottom:22px;filter:drop-shadow(0 3px 16px rgba(0,0,0,.35))}
.kicker{text-transform:uppercase;letter-spacing:.16em;font-weight:800;font-size:12px;color:rgba(255,255,255,.78);margin:0 0 8px}
h1{font-family:var(--serif);font-size:clamp(42px,12vw,72px);line-height:.96;letter-spacing:-.045em;font-weight:500;margin:0 0 14px}
.lead{font-size:18px;line-height:1.45;margin:0 0 20px;color:rgba(255,255,255,.92);max-width:34em}
.hero-copy{font-size:15px;line-height:1.55;color:rgba(255,255,255,.86);margin:0 0 22px;max-width:42em}
.primary,.secondary,.ghost,.icon-card{border:0;border-radius:24px;padding:15px 18px;font-weight:800;min-height:54px;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.primary{background:white;color:var(--ink);box-shadow:0 16px 36px rgba(0,0,0,.2);width:100%}
.secondary{background:rgba(255,255,255,.14);color:white;border:1px solid rgba(255,255,255,.35)}
.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.primary:active,.secondary:active,.ghost:active,.icon-card:active{transform:scale(.985)}
.topbar{display:flex;align-items:center;gap:12px;padding-top:env(safe-area-inset-top)}
.back-btn{border:1px solid var(--line);background:rgba(255,250,242,.9);color:var(--ink);border-radius:999px;padding:10px 14px;font-weight:800}
.top-title{font-weight:900;letter-spacing:-.02em;color:var(--ink);font-size:16px}
.section-heading{font-family:var(--serif);font-size:38px;line-height:1;letter-spacing:-.04em;font-weight:500;margin:4px 0 0}
.section-lead{color:var(--ink-soft);line-height:1.5;margin:0 0 4px}
.section-grid{display:grid;gap:14px}
.icon-card{background:var(--card);border:1px solid rgba(33,59,53,.12);box-shadow:0 16px 44px rgba(33,59,53,.11);text-align:left;display:grid;grid-template-columns:56px 1fr auto;gap:14px;align-items:center;color:var(--ink);padding:16px}
.icon-card.disabled{opacity:.72;background:#f4eadb}
.icon{width:54px;height:54px;border-radius:22px;display:grid;place-items:center;background:var(--accent-soft);font-size:27px;color:var(--ink)}
.icon-card:nth-child(2n) .icon{background:#d9e8df}.icon-card:nth-child(3n) .icon{background:#f1e4ac}.icon-card:nth-child(4n) .icon{background:#ded8f0}.icon-card:nth-child(5n) .icon{background:#cfe7ec}
.card-title{display:block;font-weight:900;font-size:18px;line-height:1.12;letter-spacing:-.02em}
.card-sub{display:block;color:var(--ink-soft);font-size:14px;line-height:1.35;margin-top:4px;font-weight:600}
.count-pill{border-radius:999px;padding:7px 10px;background:#edf3ef;color:var(--green);font-weight:900;font-size:12px;white-space:nowrap}
.placeholder{background:var(--card);border:1px solid var(--line);border-radius:26px;padding:22px;box-shadow:var(--shadow);line-height:1.55}
.question-screen{max-width:none;padding:0;background-size:cover;background-position:center;color:white;position:relative;overflow:hidden}
.question-screen:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.32),rgba(0,0,0,.82))}
.question-wrap{position:relative;min-height:100vh;display:flex;flex-direction:column;gap:16px;max-width:780px;margin:0 auto;padding:calc(18px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom));width:100%}
.question-top{display:flex;align-items:center;justify-content:space-between;gap:12px;color:rgba(255,255,255,.86);font-weight:800}
.question-top button{border:1px solid rgba(255,255,255,.38);background:rgba(255,255,255,.12);color:white;border-radius:999px;padding:10px 13px;font-weight:900;backdrop-filter:blur(12px)}
.progress{font-size:13px;text-align:center;line-height:1.3}
.fav{width:46px;height:46px;border-radius:999px;font-size:23px;display:grid;place-items:center}.fav.active{background:white;color:#c94b4b}
.question-card{flex:1;text-align:left;padding:clamp(22px,8vh,70px) 2px 0;overflow:hidden}
.cat-kicker{text-transform:uppercase;letter-spacing:.16em;font-weight:900;color:rgba(255,255,255,.72);font-size:12px;margin:0 0 13px}
.question-text{font-family:var(--serif);font-size:clamp(38px,10vw,66px);line-height:1.04;letter-spacing:-.045em;font-weight:500;margin:0;text-shadow:0 3px 24px rgba(0,0,0,.35)}
.followups{margin-top:24px;display:grid;gap:14px}
.followup{margin:0;color:rgba(255,255,255,.96);font-weight:750;line-height:1.35;font-size:clamp(24px,6.5vw,44px);font-family:var(--serif);letter-spacing:-.03em;text-shadow:0 3px 18px rgba(0,0,0,.32)}
.follow-btn{background:rgba(255,255,255,.92);color:var(--ink);border:0;border-radius:999px;padding:13px 18px;font-weight:900;justify-self:center;box-shadow:0 10px 26px rgba(0,0,0,.18)}
.question-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}.question-actions button{border:1px solid rgba(255,255,255,.34);background:rgba(255,255,255,.14);color:white;border-radius:999px;padding:14px 14px;font-weight:900}.question-actions button:disabled{opacity:.4;cursor:not-allowed}
.end-card{text-align:center;margin:auto 0;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.26);border-radius:34px;padding:28px 20px;backdrop-filter:blur(18px)}
.end-card h2{font-family:var(--serif);font-size:46px;line-height:1;letter-spacing:-.04em;margin:0 0 12px;font-weight:500}.end-card p{line-height:1.5;color:rgba(255,255,255,.86)}
.favourite-list{display:grid;gap:12px}.favourite-item{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:14px;line-height:1.4}.small-note{font-size:13px;color:var(--ink-soft);line-height:1.45}
@media (min-width:760px){.screen{padding-left:32px;padding-right:32px}.hero-content{padding-left:32px;padding-right:32px}.section-grid{grid-template-columns:1fr 1fr}.question-wrap{padding-left:32px;padding-right:32px}}


/* v2 family-card layout adjustments */
.hero-centred{text-align:center}
.hero-logo{width:min(410px,86vw);max-width:86vw;margin:0 auto 18px;filter:drop-shadow(0 4px 22px rgba(0,0,0,.38))}
.hero-title{font-size:clamp(48px,13vw,86px);margin-bottom:12px;text-align:center}
.hero-subtitle{font-size:clamp(20px,5vw,26px);font-weight:800;line-height:1.25;margin-left:auto;margin-right:auto;max-width:18em;color:rgba(255,255,255,.96)}
.hero-centred .hero-copy{margin-left:auto;margin-right:auto;max-width:32em}
.hero-centred .primary{max-width:420px;margin:0 auto;display:block}
.follow-button-row{min-height:58px;display:grid;place-items:center}
.favourite-item{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
.fav-list-btn{width:46px;height:46px;border-radius:999px;border:1px solid var(--line);background:white;color:#c94b4b;font-size:23px;display:grid;place-items:center;font-weight:900}
.fav-list-btn:active{transform:scale(.985)}


/* ─────────────────────────────────────────────
   BIG FEELINGS — additions to styles.css
   Add these rules to the end of the existing
   styles.css file. Do not replace anything.
   ───────────────────────────────────────────── */

/* Guided screen wrapper */
.bf-guide-screen {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: #faf9f7;
  --step-colour: #4a7c94;
}

/* Top bar for guided mode */
.bf-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem 0.5rem;
}

.bf-step-dots {
  display: flex;
  gap: 0.4rem;
}

.bf-step-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ddd;
  transition: background 0.2s;
}

.bf-step-dot.active {
  background: var(--step-colour);
}

/* Step header */
.bf-step-header {
  padding: 1.25rem 1.5rem 0.75rem;
  border-bottom: 3px solid var(--step-colour);
}

.bf-step-number {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--step-colour);
  font-weight: 600;
}

.bf-step-name {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0.15rem 0 0.2rem;
  color: #1a1a1a;
}

.bf-step-subtitle {
  font-size: 0.875rem;
  color: #666;
  margin: 0;
}

/* Prompt card */
.bf-prompt-card {
  flex: 1;
  margin: 1rem 1.25rem;
  background: #fff;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.bf-prompt-type {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--step-colour);
  font-weight: 600;
  margin: 0;
}

.bf-prompt-text {
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.4;
  color: #1a1a1a;
  margin: 0;
}

.bf-followups {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.bf-followup {
  font-size: 0.875rem;
  color: #555;
  background: #f5f4f2;
  border-radius: 8px;
  padding: 0.6rem 0.85rem;
  line-height: 1.45;
}

/* Avoid list (Step 4 reminder card) */
.bf-prompt-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  color: #b94a4a;
  margin: 0;
}

.bf-avoid-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.bf-avoid-list li {
  font-size: 0.9rem;
  color: #b94a4a;
  background: #fdf2f2;
  border-radius: 8px;
  padding: 0.5rem 0.8rem;
  font-style: italic;
}

.bf-avoid-note {
  font-size: 0.8rem;
  color: #888;
  margin: 0.25rem 0 0;
  font-style: italic;
  line-height: 1.45;
}

/* Prompt progress indicator */
.bf-prompt-progress {
  text-align: center;
  font-size: 0.75rem;
  color: #aaa;
  padding: 0.25rem 0;
}

/* Guide action buttons */
.bf-guide-actions {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem 1rem;
  justify-content: flex-end;
}

.bf-guide-actions button {
  padding: 0.75rem 1.4rem;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  background: #eee;
  color: #333;
}

.bf-guide-actions button.primary {
  background: var(--step-colour);
  color: #fff;
}

/* Step 5 caution note */
.bf-step-note {
  font-size: 0.8rem;
  color: #888;
  text-align: center;
  padding: 0 1.5rem 1rem;
  font-style: italic;
}

/* Calm-time card variant (uses existing question-card styles + this override) */
.bf-calm-card {
  border-top: 4px solid #7a6db0;
}



/* v3 Big Feelings merge adjustments */
.fav-spacer{width:46px;height:46px;display:block}
.bf-calm-card{border-top:0}
.bf-calm-screen .followup{font-size:clamp(24px,6.5vw,44px)}
.bf-calm-screen .follow-button-row{min-height:58px;display:grid;place-items:center}

.info-card{border:1px solid rgba(107,122,92,.18);background:rgba(254,252,247,.78);border-radius:22px;padding:18px;margin:16px 0;box-shadow:0 10px 24px rgba(38,34,28,.05)}
.info-card p{margin:0 0 12px;line-height:1.5}.info-card p:last-child{margin-bottom:0}

/* v1.3 family image-library and learn-more additions */
.icon-card.has-thumb{grid-template-columns:74px 1fr auto}
.card-thumb{width:72px;height:66px;border-radius:18px;background-size:cover;background-position:center;display:block;box-shadow:inset 0 0 0 1px rgba(33,59,53,.08)}
.learn-more-family{margin-top:4px;display:grid;gap:8px}
.learn-more-label{margin:0;color:var(--ink-soft);font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.learn-more-family-buttons{display:grid;gap:10px}
.text-link{text-decoration:none;display:flex;align-items:center;justify-content:center;text-align:center;font-weight:800}
@media (max-width:420px){.icon-card.has-thumb{grid-template-columns:62px 1fr auto;gap:11px}.card-thumb{width:60px;height:58px;border-radius:16px}}