* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #14100e;
  --panel: #1e1815;
  --ink: #f2e9df;
  --ink-dim: #b7a998;
  --accent: #e8875b;       /* warm terracotta */
  --accent-ink: #21130c;
  --line: #35291f;
  --crisis: #7a2e2e;
  --me: #2a2019;
}

html, body { height: 100%; }

/* No html{scroll-behavior:smooth} — in engines where smooth scrolling is a
   no-op it suppresses the plain jump too, so the anchor lands nowhere. The
   smoothness is requested from JS, which can detect that and fall back. */
[id] { scroll-margin-top: 20px; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1.6;
}

.hidden { display: none !important; }

/* ------------------------------ landing ------------------------------ */
#landing { max-width: 880px; margin: 0 auto; padding: 48px 24px 32px; }

.brand {
  font-family: ui-sans-serif, -apple-system, sans-serif;
  font-weight: 700; letter-spacing: -0.5px; font-size: 20px;
}
.brand span { color: var(--accent); }
.brand.small { font-size: 16px; }

.hero { padding: 40px 0 56px; }
.hero h1 { font-size: clamp(38px, 7vw, 64px); line-height: 1.1; margin: 28px 0 20px; font-weight: 400; }
.hero .sub { font-size: 19px; color: var(--ink-dim); max-width: 560px; margin-bottom: 32px; }

.cta {
  background: var(--accent); color: var(--accent-ink);
  border: 0; border-radius: 10px; padding: 16px 28px;
  font-size: 18px; font-family: ui-sans-serif, -apple-system, sans-serif;
  font-weight: 700; cursor: pointer;
}
.cta:hover { filter: brightness(1.08); }
.cta:disabled { opacity: 0.6; cursor: wait; }
.cta-note { color: var(--ink-dim); font-size: 14px; margin-top: 12px; }
.cta-note.soon { color: var(--accent); font-size: 16px; }

.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px; padding: 24px 0 8px; border-top: 1px solid var(--line); }
@media (max-width: 700px) { .cols { grid-template-columns: 1fr; } }

.col { align-self: start; }
.col summary {
  font-size: 16px; text-transform: uppercase; letter-spacing: 2px; color: var(--accent);
  font-family: ui-sans-serif, sans-serif; cursor: pointer; list-style: none;
  padding: 10px 0; display: flex; align-items: center; gap: 10px;
}
.col summary::-webkit-details-marker { display: none; }
.col summary::before {
  content: "+"; font-size: 18px; line-height: 1; width: 14px;
  color: var(--accent); transition: transform 0.15s ease;
}
.col[open] summary::before { content: "–"; }
.col summary:hover { filter: brightness(1.15); }

.col ul { list-style: none; padding-bottom: 8px; }
.col li { padding: 8px 0 8px 22px; position: relative; color: var(--ink); }
.col li::before { content: "—"; position: absolute; left: 0; color: var(--accent); }

.crisis-line {
  color: var(--ink-dim); font-size: 15px; font-family: ui-sans-serif, sans-serif;
  padding: 16px 0 4px; max-width: 680px;
}
.crisis-line strong { color: var(--ink); }

.privacy { border-top: 1px solid var(--line); padding: 20px 0; color: var(--ink-dim); }
.privacy p { max-width: 680px; font-size: 12px; line-height: 1.7; font-family: ui-sans-serif, -apple-system, sans-serif; }

footer { border-top: 1px solid var(--line); padding: 24px 0 8px; color: var(--ink-dim); font-size: 14px; }

/* ---------------------------- safety check ---------------------------- */
.overlay {
  position: fixed; inset: 0; background: rgba(10, 7, 5, 0.82);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; z-index: 50;
}
.sheet {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 32px 28px; max-width: 520px; width: 100%;
}
.sheet h2 { font-weight: 400; font-size: 26px; margin-bottom: 14px; }
.sheet p { color: var(--ink-dim); margin-bottom: 18px; }
.sheet p.small { font-size: 14px; }
.sheet-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.ghost {
  background: transparent; color: var(--ink-dim); border: 1px solid var(--line);
  border-radius: 10px; padding: 15px 22px; cursor: pointer;
  font-family: ui-sans-serif, sans-serif; font-size: 16px;
}
.ghost:hover { color: var(--ink); }

.helplines { list-style: none; margin-bottom: 18px; }
.helplines li { padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.helplines li:last-child { border-bottom: 0; }
.helplines a { color: var(--accent); font-size: 19px; text-decoration: none; font-weight: 700; }
.helplines span { color: var(--ink-dim); font-size: 13px; margin-left: 6px; }

/* ------------------------------ session ------------------------------ */
#session { position: fixed; inset: 0; background: var(--bg); display: flex; }

.chat-shell { display: flex; flex-direction: column; width: 100%; max-width: 760px; margin: 0 auto; height: 100%; }

.chat-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
}
.timer { font-family: ui-monospace, monospace; font-size: 15px; color: var(--ink-dim); }
.timer.low { color: var(--accent); }

.end {
  background: transparent; color: var(--ink-dim); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 14px; cursor: pointer;
  font-family: ui-sans-serif, sans-serif; font-size: 13px;
}
.end:hover { color: var(--ink); }

.crisis {
  background: var(--crisis); color: #ffe9e9; padding: 12px 18px;
  font-size: 14px; font-family: ui-sans-serif, sans-serif;
}

.messages { flex: 1; overflow-y: auto; padding: 24px 18px; display: flex; flex-direction: column; gap: 16px; }

.msg { max-width: 85%; white-space: pre-wrap; font-size: 17px; }
.msg.user { align-self: flex-end; background: var(--me); padding: 12px 16px; border-radius: 14px 14px 4px 14px; }
.msg.bot  { align-self: flex-start; color: var(--ink); }

.composer { display: flex; gap: 10px; padding: 14px 18px 30px; border-top: 1px solid var(--line); align-items: flex-end; }
.composer-field { flex: 1; position: relative; }
.composer textarea {
  width: 100%; resize: none; background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px;
  font-family: inherit; font-size: 16px; max-height: 140px; display: block;
}
.wordcount {
  position: absolute; right: 12px; bottom: -18px;
  font-size: 12px; font-family: ui-sans-serif, sans-serif; color: var(--ink-dim);
}
.wordcount.over { color: var(--accent); }
.composer textarea:focus { outline: 1px solid var(--accent); }
.composer button {
  background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 10px;
  padding: 0 22px; font-weight: 700; font-family: ui-sans-serif, sans-serif; cursor: pointer;
}
.composer button:disabled { opacity: 0.5; }

/* ------------------------------ takeaway ------------------------------ */
#takeaway { position: fixed; inset: 0; background: var(--bg); overflow-y: auto; }
.card-shell { max-width: 560px; margin: 0 auto; padding: 40px 20px; text-align: center; }
.card-shell h2 { font-weight: 400; margin-bottom: 6px; }
.card-note { color: var(--ink-dim); font-size: 14px; margin-bottom: 20px; }
#cardCanvas { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,0.5); }
.card-actions { display: flex; gap: 12px; justify-content: center; margin-top: 20px; }

.sitelinks { margin-top: 12px; }
.sitelinks a { color: var(--accent); margin-right: 18px; display: inline-block; }

/* One circular button: mic when the box is empty, send when it isn't —
   the WhatsApp pattern. Scoped under .composer to beat `.composer button`. */
.composer button.action {
  flex: 0 0 auto;
  width: 46px; height: 46px; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  font-size: 19px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, transform 0.1s ease;
}
.composer button.action:hover { filter: brightness(1.08); }
.composer button.action:active { transform: scale(0.94); }
.composer button.action:disabled { opacity: 0.45; cursor: default; }

/* Mic state is quieter than send — speaking is the offer, sending is the act. */
.composer button.action.mic-mode {
  background: var(--panel); color: var(--ink-dim);
  box-shadow: inset 0 0 0 1px var(--line);
}
.composer button.action.mic-mode:hover { color: var(--ink); }

.composer button.action.listening {
  background: var(--accent); color: var(--accent-ink); box-shadow: none;
  animation: mic-pulse 1.4s ease-in-out infinite;
}
@keyframes mic-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .composer button.action.listening { animation: none; } }

/* Strapline under the brand mark. Quiet — it says what the product does, and
   the headline below it is what should carry the weight. */
.tagline {
  color: var(--ink-dim);
  font-family: ui-sans-serif, -apple-system, sans-serif;
  font-size: 13.5px;
  letter-spacing: 0.4px;
  margin-top: 6px;
}

/* ------------------------- "what are you carrying?" -------------------------
   A reflection, not an assessment. The styling has to carry that too: no
   progress bar racing to a score, no percentages, no result badge. */
#quiz-page { max-width: 680px; margin: 0 auto; padding: 40px 24px 32px; }
.quiz-head { padding-bottom: 40px; }
#quiz-page h1 { font-size: clamp(32px, 6vw, 46px); font-weight: 400; line-height: 1.15; margin-bottom: 18px; }
#quiz-page h2 { font-size: clamp(24px, 4.5vw, 32px); font-weight: 400; line-height: 1.25; margin-bottom: 24px; }
#quiz-page .sub { font-size: 18px; color: var(--ink-dim); margin-bottom: 30px; }

.progress {
  font-family: ui-sans-serif, sans-serif; font-size: 13px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--accent); margin-bottom: 14px;
}

.choices { display: flex; flex-direction: column; gap: 10px; margin-bottom: 26px; }
.choice {
  text-align: left; background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 18px; font-family: inherit; font-size: 17px; cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.choice:hover { border-color: var(--accent); background: #241c17; }

.ghost.small { padding: 9px 16px; font-size: 14px; }

.rbody { font-size: 18px; color: var(--ink-dim); margin-bottom: 18px; max-width: 620px; }
.result-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 28px 0 6px; }
.result-actions .cta { text-decoration: none; display: inline-block; }

/* The brand is a <div> in the hero and an <a> on inner pages. Without this the
   anchor takes the browser default and renders blue and underlined. */
a.brand { color: var(--ink); text-decoration: none; }
a.brand:hover { filter: brightness(1.15); }

/* The step between arriving and paying. Quiet — it must read as an offer, not
   as a way to avoid the price. */
.cta-alt { color: var(--ink-dim); font-size: 15px; margin-top: 18px;
           font-family: ui-sans-serif, -apple-system, sans-serif; }
.cta-alt a { color: var(--accent); }

/* ------------------------------ situation pages ------------------------- */
#situation { max-width: 680px; margin: 0 auto; padding: 40px 24px 32px; }
#situation h1 { font-size: clamp(30px, 5.5vw, 44px); font-weight: 400; line-height: 1.15; margin-bottom: 26px; }
#situation h2 { font-size: 24px; font-weight: 400; margin-bottom: 14px; }
.sit-body { font-size: 18px; color: var(--ink-dim); margin-bottom: 20px; }
.sit-cta { border-top: 1px solid var(--line); margin-top: 34px; padding-top: 28px; }
.sit-cta p { color: var(--ink-dim); margin-bottom: 22px; }
.sit-cta .cta { text-decoration: none; display: inline-block; }
.sit-more { border-top: 1px solid var(--line); margin-top: 30px; padding-top: 22px; }
.sit-more ul { list-style: none; }
.sit-more li { padding: 7px 0; }
.sit-more a { color: var(--accent); }

/* Situation cards on the landing page.
   The marks are geometric on purpose. An illustration of a sad person on the
   grief card would be a decision about how someone feels, made before they
   have said a word — and this whole product is built on not doing that. */
.bring { border-top: 1px solid var(--line); padding: 24px 0 6px; }
.bring-grid {
  display: grid; gap: 10px; margin-top: 14px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 760px) { .bring-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .bring-grid { grid-template-columns: 1fr; } }

.bring-card {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 16px 18px; text-decoration: none;
  transition: border-color 0.14s ease, background 0.14s ease, transform 0.1s ease;
}
.bring-card:hover { border-color: var(--accent); background: #241c17; transform: translateY(-1px); }
.bring-card svg {
  width: 26px; height: 26px; margin-bottom: 8px;
  fill: none; stroke: var(--accent); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.bc-label {
  font-family: ui-sans-serif, -apple-system, sans-serif;
  font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: -0.2px;
}
.bc-hook { font-size: 14.5px; color: var(--ink-dim); line-height: 1.45; }
@media (prefers-reduced-motion: reduce) { .bring-card:hover { transform: none; } }

/* "Not here" badges. Platform NAMES, not their logos — reproducing Apple's,
   Google's or Meta's marks to announce that we are absent from their platform
   is outside what their brand guidelines permit. Naming them truthfully is
   not. The glyphs are generic shapes for the same reason. */
.notthere { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; align-items: stretch; }
.nt-badge {
  display: flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 14px 11px; text-decoration: none; background: transparent;
  min-width: 132px; opacity: 0.62;
  transition: opacity 0.14s ease, border-color 0.14s ease;
}
.nt-badge:hover { opacity: 1; border-color: var(--accent); }
.nt-badge svg {
  width: 18px; height: 18px; margin-bottom: 3px;
  fill: none; stroke: var(--ink-dim); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.nt-badge:hover svg { stroke: var(--accent); }
.nt-name {
  font-family: ui-sans-serif, -apple-system, sans-serif; font-size: 14.5px;
  font-weight: 700; color: var(--ink-dim); text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.nt-not {
  font-family: ui-sans-serif, -apple-system, sans-serif;
  font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--accent);
}
.nt-why { flex-basis: 100%; margin-top: 2px; font-size: 14.5px;
          font-family: ui-sans-serif, -apple-system, sans-serif; }
.nt-why a { color: var(--ink-dim); }
.nt-why a:hover { color: var(--accent); }

/* "Why there is no app", as a dialog.
   Opening is :target, so it works with JavaScript disabled and the copy stays
   in the DOM for crawlers. It was an inline section first — clicking a badge
   scrolled 1,460px past every situation card to sit above the footer, which is
   a strange thing to do to someone who has just asked a question. */
.noapp-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 60;
  background: rgba(10, 7, 5, 0.86);
  padding: 20px; overflow-y: auto;
}
.noapp-overlay:target { display: flex; align-items: flex-start; justify-content: center; }
/* Escape and the backdrop close via this, because clearing the hash with
   history.replaceState does not re-evaluate :target. */
.noapp-overlay.dismissed { display: none !important; }
.noapp-sheet {
  position: relative; margin: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 30px 28px 26px; max-width: 620px; width: 100%;
}
.noapp-sheet .progress { margin-bottom: 6px; }
.noapp-sheet h2 { font-size: clamp(21px, 3.4vw, 27px); font-weight: 400;
                  line-height: 1.28; margin: 6px 40px 18px 0; }
.noapp-sheet p { color: var(--ink-dim); margin-bottom: 15px; font-size: 17px; }
.noapp-sheet p:last-child { margin-bottom: 0; }
.noapp-close {
  position: absolute; top: 14px; right: 18px;
  color: var(--ink-dim); text-decoration: none; font-size: 30px; line-height: 1;
  font-family: ui-sans-serif, -apple-system, sans-serif;
}
.noapp-close:hover { color: var(--ink); }

/* The free reflection, as a real second action. Outlined rather than filled:
   it must be easy to find without competing with the paid button beside it. */
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.cta-second {
  display: inline-block; text-decoration: none;
  background: transparent; color: var(--ink);
  border: 1px solid var(--accent); border-radius: 10px;
  padding: 16px 24px; font-size: 17px; font-weight: 700;
  font-family: ui-sans-serif, -apple-system, sans-serif;
  transition: background 0.14s ease;
}
.cta-second:hover { background: rgba(232, 135, 91, 0.12); }
.cta-second small { display: block; font-weight: 400; font-size: 13px;
                    color: var(--ink-dim); margin-top: 2px; }