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

  :root {
    --dark: #3D2B4A;
    --accent: #C17BA0;
    --accent-soft: #E8C9DA;
    --body-color: #5C4A6B;
    --muted: #9B8CAB;
    --card-bg: rgba(255,255,255,0.85);
    --card-border: rgba(193,123,160,0.15);

    /* THE BOOK IS ONE OBJECT. Its dimensions were written as literals in three rules
       (#book-wrap, .shelf-spine, .shelf-spine-text's max-width cap) and they have to agree:
       the spine is the same book seen edge-on, and the cap bounds a name rotated ALONG that
       spine. Three literals that must agree is the shape that produced the two week-clamps
       and then produced itself again the same day the rule against it was written. A variable
       makes the disagreement unrepresentable, which a written rule did not.
       Anything else that needs the book's size reads these. Do not restate the values. */
    /* PORTRAIT, 2026-08-31. Was landscape min(360px,88vw) x min(240px,58vw) — a 3:2 object she
       met once at the reveal, while the book she returns to for 40 weeks was portrait cream.
       Two different objects for one thing. Portrait is what a keepsake book is, and it is the
       one she keeps seeing. The cover colour follows in .cover-front and matches .mb-page, so
       opening the book is continuous instead of a colour jump.
       AND IT HOLDS MORE TEXT, not less, which was the cost this change was expected to pay:
       brTypeWordsWithLines breaks on a CHARACTER COUNT and .page-line's height is a fixed 26px,
       so a narrower page loses characters per line and gains more lines than it loses. */
    --book-w: min(260px, 68vw);
    --book-h: min(360px, 92vw);
    /* The Memory Book cover is the SAME object, smaller. It was width:200px with a
       padding-driven height, so it rendered 200x161 — LANDSCAPE, 1.24:1 — which nobody had
       measured, because a content-sized box does not announce its shape. Both books were
       landscape and differently landscape. Deriving it from one scale keeps the shape shared
       by construction; a fourth literal would only recreate the problem --book-h just solved. */
    --mb-cover-scale: 0.77;
  }

  html, body {
    min-height: 100vh;
    font-family: 'DM Sans', sans-serif;
    color: var(--dark);
    background: linear-gradient(160deg, #FDF6EE 0%, #EEF0F9 100%);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    -webkit-font-smoothing: antialiased;
  }

  .phone {
    width: 100%;
    max-width: 390px;
    min-height: 100vh;
    padding: 0 0 64px;
  }

  /* NAV */
  .nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px 0;
  }

  .logo {
    font-family: 'DM Serif Display', serif;
    font-size: 20px;
    color: var(--dark);
    letter-spacing: -0.2px;
  }

  .logo em {
    color: var(--accent);
    font-style: normal;
  }

  .sign-in-btn {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: var(--dark);
    border: 1.5px solid rgba(61,43,74,0.22);
    border-radius: 100px;
    padding: 7px 16px;
    background: rgba(255,255,255,0.55);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
    letter-spacing: 0.1px;
  }

  .sign-in-btn:hover {
    background: rgba(255,255,255,0.85);
    border-color: rgba(61,43,74,0.35);
  }

  /* CONTENT */
  .content {
    padding: 16px 24px 0;
  }

  /* Tribe pill */
  .tribe-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 400;
    color: var(--body-color);
    background: rgba(255,255,255,0.62);
    border: 1.5px solid rgba(193,123,160,0.22);
    border-radius: 100px;
    padding: 6px 14px 6px 10px;
    margin-bottom: 14px;
    opacity: 0;
    animation: fadeUp 0.5s ease 0.1s forwards;
  }

  .tribe-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
  }

  /* HEADLINE */
  .headline {
    font-family: 'DM Serif Display', serif;
    font-size: 32px;
    line-height: 1.18;
    color: var(--dark);
    letter-spacing: -0.5px;
    margin-bottom: 10px;
    opacity: 0;
    animation: fadeUp 0.55s ease 0.22s forwards;
  }

  /* SUBHEAD */
  .subhead {
    font-family: 'DM Serif Display', serif;
    font-style: italic;
    font-size: 24px;
    line-height: 1.28;
    color: var(--accent);
    letter-spacing: -0.2px;
    margin-bottom: 12px;
    opacity: 0;
    animation: fadeUp 0.55s ease 0.34s forwards;
  }

  /* BODY */
  .body-copy {
    font-size: 15px;
    line-height: 1.62;
    color: var(--body-color);
    margin-bottom: 12px;
    opacity: 0;
    animation: fadeUp 0.5s ease 0.44s forwards;
  }

  /* CONTEXTUAL ITALIC */
  .contextual {
    font-size: 14px;
    line-height: 1.62;
    color: var(--muted);
    font-style: italic;
    margin-bottom: 16px;
    opacity: 0;
    animation: fadeUp 0.5s ease 0.52s forwards;
  }

  /* SOCIAL PROOF */
  .social-proof {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    opacity: 0;
    animation: fadeUp 0.5s ease 0.6s forwards;
  }

  .avatar-stack {
    display: flex;
    flex-direction: row;
  }

  .avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #FDF6EE;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    margin-left: -9px;
    flex-shrink: 0;
  }

  .avatar:first-child { margin-left: 0; }

  .avatar-s { background: #8B6FA8; }
  .avatar-m { background: #C17BA0; }
  .avatar-a { background: #7A9EBE; }
  .avatar-plus {
    background: rgba(61,43,74,0.12);
    color: var(--muted);
    font-size: 11px;
  }

  .social-text {
    font-size: 13px;
    line-height: 1.45;
    color: var(--body-color);
  }

  .social-text strong {
    color: var(--dark);
    font-weight: 500;
  }

  /* QUOTE CARD */
  .quote-card {
    background: var(--card-bg);
    border: 1.5px solid var(--card-border);
    border-radius: 18px;
    padding: 18px 20px 16px;
    margin-bottom: 24px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 20px rgba(61,43,74,0.06);
    opacity: 0;
    animation: fadeUp 0.55s ease 0.7s forwards;
  }

  .quote-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 11px;
  }

  .quote-label span {
    color: var(--muted);
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .quote-text {
    font-family: 'DM Serif Display', serif;
    font-style: italic;
    font-size: 15px;
    line-height: 1.58;
    color: var(--dark);
    margin-bottom: 14px;
  }

  .quote-attribution {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .quote-attr-left {
    display: flex;
    align-items: center;
    gap: 9px;
  }

  .quote-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, #C17BA0 0%, #8B6FA8 100%);
    flex-shrink: 0;
  }

  .quote-name {
    font-size: 13px;
    color: var(--muted);
  }

  .quote-name strong {
    color: var(--body-color);
    font-weight: 500;
  }

  .week-badge {
    font-size: 12px;
    font-weight: 500;
    color: var(--accent);
    background: rgba(193,123,160,0.1);
    border: 1px solid rgba(193,123,160,0.22);
    border-radius: 100px;
    padding: 3px 10px;
    white-space: nowrap;
  }

  /* CTA */
  .cta-wrap {
    opacity: 0;
    animation: fadeUp 0.5s ease 0.82s forwards;
  }

  .cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 18px 24px;
    background: var(--dark);
    color: #fff;
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.1px;
    border: none;
    border-radius: 100px;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.2s ease, transform 0.15s ease;
    margin-bottom: 12px;
  }

  .cta-btn:hover {
    opacity: 0.88;
    transform: translateY(-1px);
  }

  .cta-btn:active {
    transform: translateY(0);
  }

  .trust-signal {
    text-align: center;
    font-size: 12.5px;
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }

  .lock-icon {
    font-size: 11px;
    opacity: 0.7;
  }

  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ── LETTER ─────────────────────────────── */

  .letter {
    padding: 0 24px 80px;
  }

  .letter-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(193,123,160,0.25), transparent);
    margin: 48px 0 52px;
  }

  .letter-section {
    margin-bottom: 44px;
  }

  .letter-section:last-child {
    margin-bottom: 0;
  }

  .letter p {
    font-size: 15px;
    line-height: 1.75;
    color: var(--body-color);
    margin-bottom: 18px;
  }

  .letter p:last-child {
    margin-bottom: 0;
  }

  .letter p em {
    font-style: italic;
    color: var(--muted);
  }

  /* Pull quotes inside letter */
  .letter-pull {
    font-family: 'DM Serif Display', serif;
    font-style: italic;
    font-size: 18px;
    line-height: 1.52;
    color: var(--dark);
    padding: 4px 0 4px 20px;
    border-left: 2.5px solid var(--accent-soft);
    margin: 28px 0;
  }

  /* Section heading — not a heading tag, just a label */
  .letter-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 18px;
    display: block;
  }

  /* Testimonial block */
  .testimonial {
    background: var(--card-bg);
    border: 1.5px solid var(--card-border);
    border-radius: 16px;
    padding: 20px 20px 16px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    margin-bottom: 14px;
  }

  .testimonial p {
    font-family: 'DM Serif Display', serif;
    font-style: italic;
    font-size: 15px;
    line-height: 1.6;
    color: var(--dark);
    margin-bottom: 12px;
  }

  .testimonial .attr {
    font-size: 12px;
    color: var(--muted);
    font-style: normal;
    font-family: 'DM Sans', sans-serif;
    margin-bottom: 0;
  }

  .composite-note {
    font-size: 11px;
    color: var(--muted);
    font-style: italic;
    text-align: center;
    margin-top: 6px;
    margin-bottom: 0;
  }

  /* Halbert list — "This is not" */
  .not-list {
    list-style: none;
    padding: 0;
    margin: 20px 0 20px;
  }

  .not-list li {
    font-size: 15px;
    line-height: 1.6;
    color: var(--muted);
    padding: 6px 0;
    font-style: italic;
    font-family: 'DM Serif Display', serif;
    border-bottom: 1px solid rgba(193,123,160,0.1);
  }

  .not-list li:last-child {
    border-bottom: none;
  }

  /* Mid-letter soft CTA */
  .soft-cta {
    text-align: center;
    padding: 28px 0;
    border-top: 1px solid rgba(193,123,160,0.12);
    border-bottom: 1px solid rgba(193,123,160,0.12);
    margin: 40px 0;
  }

  .soft-cta-text {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 12px;
    font-style: italic;
  }

  .soft-cta-link {
    font-family: 'DM Serif Display', serif;
    font-style: italic;
    font-size: 17px;
    color: var(--accent);
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
  }

  .soft-cta-link:hover { opacity: 0.75; }

  /* Final section closing statement */
  .letter-closing {
    font-family: 'DM Serif Display', serif;
    font-style: italic;
    font-size: 14px;
    line-height: 1.65;
    color: var(--muted);
    text-align: center;
    margin-top: 24px;
  }

  /* Final CTA — same as above fold */
  .letter-cta-wrap {
    margin-top: 36px;
  }

  /* Homepage footer — the legal surface's only entrance.
     HOMEPAGE ONLY, and deliberately not persistent: legal chrome under the field
     where she is writing about her body changes what she is willing to write. It
     belongs where she is deciding whether to trust us, not where she is trusting us. */
  .home-footer {
    margin-top: 44px;
    padding-top: 22px;
    border-top: 1px solid rgba(58, 42, 24, 0.10);
    text-align: center;
  }
  .home-footer-lead {
    font-size: 13px;
    line-height: 1.55;
    color: var(--muted);
    margin-bottom: 14px;
  }
  .home-footer-links {
    font-size: 13px;
    line-height: 1.9;
    color: var(--muted);
  }
  .home-footer-links a {
    color: var(--muted);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .home-footer-links a:hover { color: var(--dark); }
  .home-footer-sep { opacity: 0.45; padding: 0 6px; }
  /* Its own line on purpose. A crisis resource sitting in a row of policy links
     reads as boilerplate and does not get used. The separation IS the function. */
  .home-footer-safety { margin-top: 12px; font-size: 13px; }
  .home-footer-safety a {
    color: var(--muted);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .home-footer-safety a:hover { color: var(--dark); }
  .home-footer-org {
    margin-top: 18px;
    font-size: 12px;
    color: var(--muted);
    opacity: 0.8;
  }
  .home-footer-org a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

  /* ── QUIZ OVERLAY ────────────────────────────────── */
  #quiz-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  #quiz-overlay.active { display: block; }

  #quiz-overlay .q-phone {
    width: 100%;
    max-width: 390px;
    min-height: 100vh;
    margin: 0 auto;
    padding: 0 0 80px;
    background: linear-gradient(160deg, #FDF6EE 0%, #EEF0F9 100%);
    transition: background 0.8s ease;
  }
  #quiz-overlay .q-phone.bg-ttc        { background: linear-gradient(160deg, #EEE8F0 0%, #D8D2EC 100%); }
  #quiz-overlay .q-phone.bg-pregnant   { background: linear-gradient(160deg, #FEF0E4 0%, #E4DCFA 100%); }
  #quiz-overlay .q-phone.bg-postpartum { background: linear-gradient(160deg, #E4DCFA 0%, #D0E4F4 100%); }
  #quiz-overlay .q-phone.bg-youngchild { background: linear-gradient(160deg, #FEFAE0 0%, #D8F0E4 100%); }

  .q-nav { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px 0; min-height: 52px; }
  .q-logo { font-family: 'DM Serif Display', serif; font-size: 20px; color: var(--dark); }
  .q-logo em { color: var(--accent); font-style: normal; }
  .q-back { font-size: 13px; color: var(--muted); cursor: pointer; display: none; align-items: center; gap: 4px; user-select: none; }
  .q-back.visible { display: flex; }

  .q-progress-wrap { padding: 14px 24px 0; }
  .q-progress-bar { height: 2px; background: rgba(193,123,160,0.15); border-radius: 2px; overflow: hidden; }
  .q-progress-fill { height: 100%; background: var(--accent); border-radius: 2px; width: 12%; transition: width 0.6s cubic-bezier(0.4,0,0.2,1); }

  .q-screen { display: none; padding: 0 24px; }
  .q-screen.active { display: block; animation: fadeUp 0.42s cubic-bezier(0.4,0,0.2,1) both; }

  .q-stage-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--dark); color: #fff; font-size: 12px; font-weight: 500; letter-spacing: 0.3px; padding: 6px 12px 6px 8px; border-radius: 100px; margin-bottom: 16px; opacity: 0; transform: translateY(4px); transition: opacity 0.4s ease, transform 0.4s ease; }
  .q-stage-badge.show { opacity: 1; transform: translateY(0); }
  .q-stage-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }

  .q-recognition { margin-top: 28px; margin-bottom: 30px; }
  .q-recognition h1 { font-family: 'DM Serif Display', serif; font-size: 26px; line-height: 1.28; color: var(--dark); letter-spacing: -0.4px; margin-bottom: 12px; min-height: 66px; }
  .q-cursor { display: inline-block; width: 2px; height: 1.05em; background: var(--accent); margin-left: 2px; vertical-align: text-bottom; animation: blink 0.65s step-end infinite; }
  @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
  .q-cursor.hidden { display: none; }
  .q-recognition-sub { font-size: 15px; line-height: 1.65; color: var(--body-color); font-style: italic; font-family: 'DM Serif Display', serif; opacity: 0; transform: translateY(7px); transition: opacity 0.6s ease, transform 0.6s ease; min-height: 28px; }
  .q-recognition-sub.show { opacity: 1; transform: translateY(0); }
  .q-pulse-ellipsis { display: none; align-items: center; gap: 5px; height: 22px; margin-top: 14px; }
  .q-pulse-ellipsis.show { display: flex; }
  .q-pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: 0.3; animation: pulseDot 1.1s ease-in-out infinite; }
  .q-pulse-dot:nth-child(2) { animation-delay: 0.18s; }
  .q-pulse-dot:nth-child(3) { animation-delay: 0.36s; }
  @keyframes pulseDot { 0%,100%{opacity:0.25;transform:scale(1)} 50%{opacity:1;transform:scale(1.35)} }

  .q-qlabel { font-size: 13px; font-weight: 600; color: var(--dark); letter-spacing: 0.3px; margin-bottom: 14px; transition: opacity 0.4s ease; }

  .q-stage-cards { display: flex; flex-direction: column; gap: 10px; }
  .q-stage-card { background: var(--card-bg); border: 1.5px solid var(--card-border); border-radius: 16px; padding: 18px 20px; cursor: pointer; transition: all 0.35s cubic-bezier(0.4,0,0.2,1); backdrop-filter: blur(8px); user-select: none; }
  .q-stage-card:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(61,43,74,0.09); border-color: rgba(193,123,160,0.32); }
  .q-stage-card.selected { background: var(--dark); border-color: var(--dark); transform: translateY(-1px); box-shadow: 0 8px 28px rgba(61,43,74,0.24); pointer-events: none; }
  .q-stage-card.selected .q-card-title { color: #fff; }
  .q-stage-card.selected .q-card-sub { color: rgba(255,255,255,0.52); }
  .q-card-title { font-family: 'DM Serif Display', serif; font-size: 18px; color: var(--dark); margin-bottom: 3px; transition: color 0.35s ease; }
  .q-card-sub { font-size: 13px; color: var(--muted); transition: color 0.35s ease; }

  .q-confirmed-strip { display: flex; align-items: center; gap: 8px; margin-top: 24px; margin-bottom: 24px; padding: 10px 14px; background: var(--dark); border-radius: 12px; color: #fff; }
  .q-cs-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
  .q-cs-text { font-size: 13px; font-weight: 500; }
  .q-cs-check { font-size: 12px; opacity: 0.5; margin-left: auto; }

  .q-detail-headline { font-family: 'DM Serif Display', serif; font-size: 24px; line-height: 1.3; color: var(--dark); letter-spacing: -0.3px; margin-bottom: 6px; }
  .q-detail-subtext { font-size: 14px; color: var(--muted); line-height: 1.55; margin-bottom: 20px; }
  .q-stage-note { font-size: 14px; color: var(--muted); font-style: italic; font-family: 'DM Serif Display', serif; line-height: 1.55; margin-bottom: 22px; }

  .q-date-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
  .q-date-input { flex: 1; padding: 13px 16px; border-radius: 12px; border: 1.5px solid var(--card-border); background: var(--card-bg); font-family: 'DM Sans', sans-serif; font-size: 15px; color: var(--dark); outline: none; transition: border-color 0.2s ease; -webkit-appearance: none; }
  .q-date-input:focus { border-color: var(--accent); }
  .q-date-tap-hint { font-size: 12px; color: var(--accent); margin-bottom: 8px; font-style: italic; opacity: 0.8; }
  .q-dont-know { font-size: 13px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; white-space: nowrap; user-select: none; }

  .q-agegate { margin-top: 56px; text-align: center; }
  .q-agegate-heading { font-family: 'DM Serif Display', serif; font-size: 24px; line-height: 1.38; color: var(--dark); letter-spacing: -0.3px; margin-bottom: 30px; }
  .q-agegate-link { display: inline-block; margin-top: 22px; font-size: 13px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-style: italic; user-select: none; }
  .q-agegate-under-msg { font-family: 'DM Serif Display', serif; font-size: 17px; line-height: 1.62; color: var(--dark); }
  /* Statutory notice, not product voice. Muted enough not to shout over the heading, but it must
     stay CLEAR AND CONSPICUOUS per SB 243 §22604 — do not shrink it further, drop its contrast,
     or move it into a collapsed section. Guarded by npm run check:agegate-resource. */
  .q-agegate-ai-notice { font-size: 13.5px; line-height: 1.5; color: var(--body-color); margin-bottom: 26px; }
  /* Assent. Quieter than the SB 243 notice above the button and quieter than the button,
     but legible — conspicuousness is what makes an arbitration clause enforceable, and
     concealment is what makes it void. Underlined links, not colour alone: the reviewer
     is colourblind and so are ~8% of the men who will ever read this. */
  .q-agegate-assent { margin-top: 16px; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
  .q-agegate-assent a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
  .q-agegate-assent a:hover { color: var(--dark); }
  .q-waitlist { margin: 22px 0 4px; }
  .q-waitlist-prompt { font-family: 'DM Serif Display', serif; font-size: 16px; line-height: 1.55; color: var(--dark); margin-bottom: 14px; }
  .q-waitlist-input { width:100%; box-sizing:border-box; font-family:'DM Sans',sans-serif; font-size:16px; color:var(--dark); background:var(--card-bg); border:1.5px solid var(--card-border); border-radius:12px; padding:14px 16px; outline:none; transition:border-color 0.2s ease; margin-bottom:12px; -webkit-appearance:none; }
  .q-waitlist-input:focus { border-color:var(--accent); }
  .q-waitlist-msg { font-family:'DM Sans',sans-serif; font-size:14px; line-height:1.5; color:var(--accent); margin-top:10px; }
  .q-waitlist-success { font-family: 'DM Serif Display', serif; font-size: 17px; line-height: 1.62; color: var(--dark); margin: 22px 0 4px; }

  .q-week-display { display: none; margin-top: 10px; padding: 10px 14px; background: rgba(193,123,160,0.1); border-radius: 10px; border: 1px solid rgba(193,123,160,0.25); }
  .q-week-display.show { display: block; }
  .q-week-display-text { font-size: 14px; color: var(--body-color); }
  .q-week-display-text strong { color: var(--dark); font-weight: 500; }

  .q-fallback-wrap { display: none; margin-top: 16px; }
  .q-fallback-wrap.visible { display: block; animation: fadeUp 0.3s ease both; }
  .q-fallback-note { font-size: 13px; color: var(--muted); font-style: italic; margin-bottom: 10px; }

  .q-week-stepper { display: flex; align-items: center; border: 1.5px solid var(--card-border); border-radius: 12px; background: var(--card-bg); overflow: hidden; width: fit-content; }
  .q-stepper-btn { width: 48px; height: 48px; border: none; background: none; font-size: 22px; color: var(--dark); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s ease; user-select: none; flex-shrink: 0; }
  .q-stepper-btn:hover { background: rgba(193,123,160,0.1); }
  .q-stepper-val { min-width: 72px; text-align: center; font-family: 'DM Serif Display', serif; font-size: 22px; color: var(--dark); border-left: 1px solid var(--card-border); border-right: 1px solid var(--card-border); padding: 8px 0; }

  .q-pill-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
  .q-pill { padding: 9px 16px; border-radius: 100px; border: 1.5px solid var(--card-border); background: var(--card-bg); font-size: 13px; color: var(--body-color); cursor: pointer; transition: all 0.2s ease; backdrop-filter: blur(6px); user-select: none; }
  .q-pill:hover { border-color: rgba(193,123,160,0.42); color: var(--dark); }
  .q-pill.selected { background: var(--dark); border-color: var(--dark); color: #fff; }
  .q-pill.special { border-color: rgba(193,123,160,0.38); color: var(--accent); font-style: italic; }
  .q-pill.special.selected { background: var(--accent); border-color: var(--accent); color: #fff; font-style: normal; }

  .q-sub-detail { display: none; margin-top: 6px; }
  .q-sub-detail.visible { display: block; animation: fadeUp 0.32s ease both; }

  .q-follow-up-wrap { display: none; margin-top: 6px; padding: 16px; border-radius: 14px; background: rgba(255,255,255,0.6); border: 1.5px solid var(--card-border); backdrop-filter: blur(6px); }
  .q-follow-up-wrap.visible { display: block; animation: fadeUp 0.3s ease both; }
  .q-follow-up-q { font-family: 'DM Serif Display', serif; font-size: 15px; color: var(--dark); line-height: 1.4; margin-bottom: 4px; }
  .q-follow-up-sub { font-size: 12px; color: var(--muted); margin-bottom: 14px; line-height: 1.4; }

  .q-sibling-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
  .q-sibling-card { background: rgba(255,255,255,0.75); border: 1.5px solid var(--card-border); border-radius: 12px; padding: 12px 14px; animation: fadeUp 0.28s ease both; }
  .q-sibling-card-row { display: flex; align-items: center; gap: 8px; }
  .q-sibling-date { flex: 1; padding: 10px 12px; border-radius: 10px; border: 1.5px solid var(--card-border); background: rgba(255,255,255,0.9); font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--dark); outline: none; -webkit-appearance: none; min-width: 0; }
  .q-sibling-date:focus { border-color: var(--accent); }
  .q-sibling-remove { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--card-border); background: rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--muted); font-size: 16px; flex-shrink: 0; user-select: none; }
  .q-sibling-remove:hover { border-color: #e57373; color: #e57373; }
  .q-sibling-name { width: 100%; margin-top: 8px; padding: 9px 12px; border-radius: 10px; border: 1.5px solid transparent; background: transparent; font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--muted); outline: none; }
  .q-sibling-name:focus { border-color: var(--card-border); background: rgba(255,255,255,0.9); color: var(--dark); }
  .q-sibling-name::placeholder { color: var(--muted); font-style: italic; }
  .q-sibling-age-label { font-size: 11px; color: var(--accent); font-weight: 500; margin-top: 6px; min-height: 16px; }
  .q-add-sibling-btn { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 100px; border: 1.5px dashed rgba(193,123,160,0.4); background: transparent; cursor: pointer; font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--accent); user-select: none; width: fit-content; }
  .q-add-sibling-btn:hover { border-color: var(--accent); background: rgba(193,123,160,0.06); }

  .q-ttc-secondary { display: none; margin-top: 6px; }
  .q-ttc-secondary.visible { display: block; animation: fadeUp 0.3s ease both; }
  .q-ttc-secondary-q { font-size: 14px; color: var(--muted); font-style: italic; font-family: 'DM Serif Display', serif; line-height: 1.5; margin-bottom: 12px; padding-top: 16px; border-top: 1px solid var(--card-border); }

  .q-reflection-prompt { font-family: 'DM Serif Display', serif; font-size: 22px; line-height: 1.35; color: var(--dark); letter-spacing: -0.3px; margin-bottom: 8px; }
  .q-reflection-nudge { font-size: 13px; color: var(--muted); line-height: 1.55; margin-bottom: 20px; font-style: italic; }
  .q-reflection-nudge strong { color: var(--accent); font-style: normal; font-weight: 500; }
  .q-ai-disclosure {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  line-height: 1.5;
  margin-bottom: 12px;
  padding: 0 2px;
}

  .q-ai-disclaimer,
  .q-surface-disclaimer {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  line-height: 1.5;
  margin-top: 14px;
  padding: 0 2px;
}

  /* Foot-of-surface medical disclaimer, cards screen and feed. Grouped with
     .q-ai-disclaimer above rather than copied, so the muted treatment cannot
     drift between surfaces. Only the space above differs: this one closes a
     whole surface instead of sitting inside a card. */
  .q-surface-disclaimer {
  margin-top: 22px;
}

  .q-reflection-textarea { width: 100%; min-height: 160px; padding: 16px; border-radius: 16px; border: 1.5px solid var(--card-border); background: var(--card-bg); font-family: 'DM Sans', sans-serif; font-size: 15px; line-height: 1.65; color: var(--dark); resize: none; outline: none; transition: border-color 0.25s ease, box-shadow 0.25s ease; backdrop-filter: blur(8px); }
  .q-reflection-textarea:focus { border-color: rgba(193,123,160,0.5); box-shadow: 0 0 0 3px rgba(193,123,160,0.08); }
  .q-reflection-textarea::placeholder { color: var(--muted); font-style: italic; }

  .q-reflection-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding: 0 2px; }
  .q-talk-hint { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
  .q-talk-hint svg { width: 13px; height: 13px; opacity: 0.6; }
  .q-char-count { font-size: 12px; color: var(--muted); transition: color 0.2s; }
  .q-char-count.ready { color: var(--accent); }

  .q-reflection-submit { width: 100%; margin-top: 20px; background: var(--dark); color: #fff; border: none; border-radius: 100px; padding: 18px 24px; font-family: 'DM Sans', sans-serif; font-size: 16px; font-weight: 500; cursor: pointer; transition: all 0.22s ease; opacity: 0.28; pointer-events: none; }
  .q-reflection-submit.ready { opacity: 1; pointer-events: all; box-shadow: 0 4px 20px rgba(61,43,74,0.18); }
  .q-reflection-submit.ready:hover { transform: translateY(-1px); }
  .q-privacy-line { text-align: center; font-size: 12px; color: var(--muted); margin-top: 12px; line-height: 1.5; }

  /* Consent bar — homepage only, non-modal, both choices equal weight (C6) */
  .consent-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 400; display: none; padding: 18px 20px 22px; background: rgba(253,246,238,0.97); backdrop-filter: blur(8px); border-top: 1px solid var(--card-border); }
  .consent-bar.visible { display: block; }
  .consent-inner { max-width: 390px; margin: 0 auto; }
  .consent-head { font-family: 'Lora', serif; font-style: italic; font-size: 16px; color: var(--dark); margin-bottom: 8px; }
  .consent-body { font-size: 13.5px; line-height: 1.55; color: var(--body-color); margin-bottom: 14px; }
  .consent-actions { display: flex; gap: 10px; }
  /* Deliberately identical styling — neither choice is the primary CTA. Test 52
     asserts this in CI, because "let's make Allow stand out a bit" is exactly how
     a no-dark-pattern promise erodes later. */
  .consent-btn { flex: 1; padding: 13px 16px; border-radius: 100px; border: 1.5px solid var(--accent); background: transparent; color: var(--dark); font-family: 'DM Sans', sans-serif; font-size: 14px; cursor: pointer; }
  .consent-btn:hover { background: rgba(193,123,160,0.07); }

  .q-ai-thinking { display: flex; align-items: center; gap: 10px; padding: 16px; border-radius: 16px; background: var(--card-bg); border: 1.5px solid var(--card-border); margin-bottom: 20px; }
  .q-ai-thinking-dots { display: flex; gap: 5px; }
  .q-ai-thinking-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); opacity: 0.3; animation: pulseDot 1.1s ease-in-out infinite; }
  .q-ai-thinking-dot:nth-child(2) { animation-delay: 0.18s; }
  .q-ai-thinking-dot:nth-child(3) { animation-delay: 0.36s; }
  .q-ai-thinking-text { font-size: 13px; color: var(--muted); font-style: italic; }

  .q-ai-card { background: var(--card-bg); border: 1.5px solid var(--card-border); border-radius: 20px; padding: 22px 20px; backdrop-filter: blur(8px); opacity: 0; transform: translateY(10px); transition: opacity 0.6s ease, transform 0.6s ease; margin-bottom: 16px; }
  .q-ai-card.show { opacity: 1; transform: translateY(0); }
  .q-ai-card-label { font-size: 10px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
  /* pre-wrap because the Tier-3 crisis block is the one AI response with deliberate line structure,
     and textContent + white-space:normal collapsed all nine of its newlines into spaces: it rendered
     as a single paragraph with the bullets sitting mid-sentence and the three phone numbers running
     together. Measured 2026-08-31 in a real browser — 9 newlines in, 0 out — and confirmed
     independently against live d38eee5. That is what a mother in crisis had been reading.
     check:crisis-copy passed throughout: it compares bytes across three files and cannot see
     rendering. Byte-identity is not a rendering guarantee. */
  .q-ai-card-text { font-family: 'DM Serif Display', serif; font-size: 15px; line-height: 1.65; color: var(--dark); white-space: pre-wrap; }

  /* .q-journey-entry* removed 2026-09-01 with the element it styled. Deleted rather than left
     in place: orphaned CSS is how .mb-ai-* ended up looking like a feature that exists. If the
     entry preview ever returns it should be designed again, not resurrected from a stylesheet. */

  .q-first-page-note { opacity: 0; transform: translateY(10px); transition: opacity 0.6s ease 0.45s, transform 0.6s ease 0.45s; margin-bottom: 16px; font-size: 14px; line-height: 1.6; color: var(--muted); }
  .q-first-page-note.show { opacity: 1; transform: translateY(0); }
  .q-first-page-note-lead { font-family: 'DM Serif Display', serif; font-size: 16px; color: var(--dark); margin-bottom: 6px; }

  /* Scroll cue. This screen is ~995px tall in a ~680px viewport, so the save action sits some
     315px below the fold and nothing signalled it — she said on 13 Aug she did not know to
     scroll, and nothing had changed since. NON-TEXTUAL BY DESIGN: it is an affordance, not copy,
     so it carries no claim and needs no Core 9 pass. The aria-label is a control label for
     assistive tech, not product voice. */
  .q-scroll-cue { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 120; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1.5px solid var(--card-border); background: var(--card-bg); backdrop-filter: blur(8px); box-shadow: 0 4px 16px rgba(61,43,74,0.14); cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
  .q-scroll-cue.show { opacity: 1; pointer-events: auto; }
  .q-scroll-cue::after { content: ''; width: 9px; height: 9px; border-right: 2px solid var(--dark); border-bottom: 2px solid var(--dark); transform: translateY(-3px) rotate(45deg); animation: qCueNudge 1.8s ease-in-out infinite; }
  @keyframes qCueNudge { 0%, 100% { transform: translateY(-3px) rotate(45deg); } 50% { transform: translateY(1px) rotate(45deg); } }
  @media (prefers-reduced-motion: reduce) { .q-scroll-cue::after { animation: none; } }

  .q-save-prompt { opacity: 0; transform: translateY(10px); transition: opacity 0.6s ease 0.6s, transform 0.6s ease 0.6s; }
  .q-save-prompt.show { opacity: 1; transform: translateY(0); }
  .q-save-headline { font-family: 'DM Serif Display', serif; font-size: 20px; line-height: 1.3; color: var(--dark); margin-bottom: 6px; }
  .q-save-sub { font-size: 14px; color: var(--muted); margin-bottom: 20px; line-height: 1.5; }
  .q-save-options { display: flex; flex-direction: column; gap: 10px; }
  .q-save-btn { width: 100%; padding: 16px 20px; border-radius: 14px; border: 1.5px solid var(--card-border); background: var(--card-bg); font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 500; color: var(--dark); cursor: pointer; transition: all 0.22s ease; display: flex; align-items: center; gap: 12px; text-align: left; backdrop-filter: blur(8px); }
  .q-save-btn:hover { border-color: rgba(193,123,160,0.4); box-shadow: 0 4px 16px rgba(61,43,74,0.08); transform: translateY(-1px); }
  .q-save-btn.primary { background: var(--dark); color: #fff; border-color: var(--dark); box-shadow: 0 4px 20px rgba(61,43,74,0.2); }
  .q-save-btn.primary:hover { box-shadow: 0 6px 28px rgba(61,43,74,0.28); }
  .q-save-btn-icon { font-size: 20px; flex-shrink: 0; }
  .q-save-btn-content { display: flex; flex-direction: column; }
  .q-save-btn-label { font-size: 15px; font-weight: 500; }
  .q-save-btn-sub { font-size: 12px; opacity: 0.6; font-weight: 400; margin-top: 1px; }
  .q-save-skip { text-align: center; font-size: 13px; color: var(--muted); margin-top: 14px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
  .q-save-skip-note { text-align: center; font-size: 11px; color: var(--muted); margin-top: 6px; opacity: 0.7; }

  .q-cta-wrap { margin-top: 32px; }
  .q-cta-btn { width: 100%; background: var(--dark); color: #fff; border: none; border-radius: 100px; padding: 18px 24px; font-family: 'DM Sans', sans-serif; font-size: 16px; font-weight: 500; cursor: pointer; transition: all 0.22s ease; opacity: 0.28; pointer-events: none; }
  .q-cta-btn.ready { opacity: 1; pointer-events: all; box-shadow: 0 4px 20px rgba(61,43,74,0.18); }
  .q-cta-btn.ready:hover { transform: translateY(-1px); }
  .q-trust-note { text-align: center; font-size: 12px; color: var(--muted); margin-top: 14px; }

  /* ── CARDS SCREEN ─────────────────────────────────── */
  .q-section-label { font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; opacity: 0; animation: fadeUp 0.5s ease 0.1s forwards; }
  .q-card { background: var(--card-bg); border: 1.5px solid var(--card-border); border-radius: 18px; padding: 20px; backdrop-filter: blur(8px); box-shadow: 0 2px 24px rgba(61,43,74,0.07); margin-bottom: 14px; opacity: 0; }
  .q-card.s1 { animation: fadeUp 0.5s ease 0.15s forwards; }
  .q-card.s2 { animation: fadeUp 0.5s ease 0.3s forwards; }
  .q-card.s3 { animation: fadeUp 0.5s ease 0.45s forwards; }
  .q-card.s4 { animation: fadeUp 0.5s ease 0.6s forwards; }
  .q-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: 100px; margin-bottom: 10px; }
  .q-badge-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
  .q-badge-expert { background: rgba(122,158,190,0.15); color: #4A7A9B; }
  .q-badge-expert .q-badge-dot { background: #4A7A9B; }
  .q-badge-mama { background: rgba(193,123,160,0.12); color: var(--accent); }
  .q-badge-mama .q-badge-dot { background: var(--accent); }
  .q-card-source { font-size: 11px; color: var(--muted); margin-bottom: 10px; letter-spacing: 0.02em; }
  .q-card-text { font-size: 14px; line-height: 1.72; color: var(--body-color); }
  .q-card-text strong { color: var(--dark); font-weight: 500; }
  .q-card-mama-name { font-size: 12px; color: var(--muted); margin-top: 12px; font-style: italic; }
  .q-pool-indicator { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 12px; color: var(--muted); opacity: 0; animation: fadeUp 0.5s ease 0.3s forwards; }
  .q-pool-dots { display: flex; gap: 4px; }
  .q-pool-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(193,123,160,0.2); }
  .q-pool-dot.filled { background: var(--accent); }
  .q-your-turn-btn { width: 100%; background: var(--dark); color: #fff; border: none; border-radius: 100px; padding: 18px 24px; font-family: 'DM Sans', sans-serif; font-size: 16px; font-weight: 400; cursor: pointer; margin-top: 8px; transition: all 0.22s ease; opacity: 0; animation: fadeUp 0.5s ease 0.7s forwards; }
  .q-your-turn-btn:hover { opacity: 0.88; transform: translateY(-1px); }

  /* ── BOOK REVEAL OVERLAY ─────────────────────────── */
  #book-reveal-overlay { display: none; position: fixed; inset: 0; z-index: 200; background: linear-gradient(160deg, #1A0F24 0%, #120818 100%); overflow-y: auto; -webkit-overflow-scrolling: touch; }
  #book-reveal-overlay.active { display: block; }

  #book-stage { display: flex; flex-direction: column; align-items: center; padding-top: 52px; padding-bottom: 0; }

  #book-wrap { position: relative; width: var(--book-w); height: var(--book-h); perspective: 1000px; flex-shrink: 0; }

  #book-pages { position: absolute; inset: 0; border-radius: 4px 12px 12px 4px; background: linear-gradient(90deg, #D4C8B2 0%, #EAE2D0 10%, #F6F1E8 35%, #FAF6EE 60%, #F2EDE3 85%, #E6DFD0 100%); box-shadow: inset 10px 0 24px rgba(0,0,0,0.14), 0 24px 64px rgba(0,0,0,0.6); overflow: hidden; opacity: 0; transition: opacity 0.5s ease 0.5s; }
  #book-pages.visible { opacity: 1; }

  .page-gutter { position: absolute; left:0; top:0; bottom:0; width: 48px; background: linear-gradient(90deg, #C4B49A 0%, #D8CAAE 100%); border-right: 1px solid rgba(100,78,48,0.18); }
  .page-content { position: absolute; left: 56px; right: 16px; top: 16px; bottom: 14px; display: flex; flex-direction: column; overflow: hidden; }
  .page-meta { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; flex-shrink: 0; }
  .page-week-label { font-family: 'DM Sans', sans-serif; font-size: 8px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); opacity: 0; transition: opacity 0.5s ease; }
  .page-week-label.visible { opacity: 1; }
  .page-date-label { font-family: 'DM Sans', sans-serif; font-size: 7.5px; color: #8C7B68; letter-spacing: 0.04em; opacity: 0; transition: opacity 0.5s ease 0.15s; }
  .page-date-label.visible { opacity: 1; }
  #page-writing { flex: 1; overflow: hidden; font-family: 'DM Serif Display', serif; font-size: 12px; line-height: 1px; color: #2E2416; font-style: italic; word-break: break-word; }
  .page-line { display: block; border-bottom: 1px solid rgba(120,100,78,0.22); min-height: 26px; line-height: 26px; white-space: pre-wrap; font-family: 'DM Serif Display', serif; font-size: 12px; color: #2E2416; font-style: italic; overflow: hidden; }
  .page-footer-row { display: flex; align-items: center; margin-top: 8px; flex-shrink: 0; opacity: 0; transition: opacity 0.5s ease; height: 14px; }
  .page-footer-row.visible { opacity: 1; }
  .page-logo { font-family: 'DM Serif Display', serif; font-size: 8px; color: #8C7B68; letter-spacing: 0.06em; }
  .page-num { font-size: 7.5px; color: #8C7B68; margin-left: auto; font-family: 'DM Sans', sans-serif; }

  #book-cover { position: absolute; inset: 0; transform-origin: left center; transform-style: preserve-3d; transition: transform 1.0s cubic-bezier(0.645, 0.045, 0.355, 1.000); border-radius: 4px 12px 12px 4px; }
  #book-cover.open   { transform: rotateY(-172deg); }
  #book-cover.closed { transform: rotateY(0deg); }
  #book-cover.shelf  { transform: rotateY(-90deg); }

  /* CREAM, and the geometry copied from .mb-cover-book rather than approximated: same gradient
     and angle, same 4px 12px 12px 4px radius, same 16px #3A2A18 spine edge, same hairline inset
     at left:16px. She meets this book at the reveal and returns to that one for 40 weeks — they
     have to be the same object, and "similar" is how they drifted apart in the first place.
     The cream also matches .mb-page, so opening the book is continuous rather than a colour jump.
     The texture gradients survive: they read as cloth at any colour. The shadow is lightened
     because the old one was tuned to sit under a dark gold cover. */
  .cover-front { position: absolute; inset: 0; border-radius: 4px 12px 12px 4px; border-left: 16px solid #3A2A18; background: repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(180deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 12px), linear-gradient(160deg, #EDE5D8 0%, #D4C8B8 100%); box-shadow: inset 1px 0 6px rgba(255,255,255,0.25), inset -2px 0 8px rgba(0,0,0,0.08), 8px 12px 40px rgba(0,0,0,0.6); backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 22px; gap: 10px; }
  .cover-front::after { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 1.5px; background: rgba(58,42,24,0.12); }
  .cover-top-rule { width: 44px; height: 1.5px; background: linear-gradient(90deg, transparent, #3A2A18, transparent); }
  .cover-title-text { font-family: 'DM Serif Display', serif; font-size: 17px; color: #3A2A18; text-align: center; line-height: 1.4; letter-spacing: 0.02em; }
  .cover-stage-text { font-family: 'DM Sans', sans-serif; font-size: 11px; color: rgba(58,42,24,0.65); text-align: center; letter-spacing: 0.05em; line-height: 1.5; }
  .cover-bottom-rule { width: 28px; height: 1px; background: linear-gradient(90deg, transparent, #3A2A18, transparent); }
  .cover-lumama-mark { position: absolute; bottom: 14px; font-family: 'DM Serif Display', serif; font-size: 9px; color: rgba(58,42,24,0.42); letter-spacing: 0.1em; }
  .cover-spine { position: absolute; left: -24px; top: 0; bottom: 0; width: 24px; background: linear-gradient(90deg, #2A1E0E 0%, #4A3420 40%, #5C4228 70%, #3E2C14 100%); border-radius: 3px 0 0 3px; box-shadow: -3px 0 10px rgba(0,0,0,0.5); }
  .cover-back { position: absolute; inset: 0; border-radius: 4px 12px 12px 4px; background: linear-gradient(90deg, #D4C8B0, #E4DACC); backface-visibility: hidden; transform: rotateY(180deg); }

  #shelf-view { display: none; flex-direction: column; align-items: center; gap: 12px; opacity: 0; transition: opacity 0.7s ease; }
  #shelf-view.visible { display: flex; opacity: 1; }
  .shelf-spine { width: 28px; height: var(--book-h); background: linear-gradient(180deg, #2A1E0E 0%, #4A3420 20%, #5C4228 50%, #4A3420 80%, #2A1E0E 100%); border-radius: 4px; box-shadow: -4px 0 12px rgba(0,0,0,0.6), 4px 0 8px rgba(0,0,0,0.3), inset 2px 0 4px rgba(255,255,255,0.06); position: relative; flex-shrink: 0; }
  #shelf-view.visible .shelf-spine { animation: spineSettle 1.1s cubic-bezier(0.34, 1.2, 0.64, 1) forwards; }
  @keyframes spineSettle { 0% { transform: translateY(-20px); opacity: 0; } 55% { transform: translateY(5px); opacity: 1; } 78% { transform: translateY(-3px); } 100% { transform: translateY(0); opacity: 1; } }
  .shelf-spine::before { content: ''; position: absolute; top: 16px; bottom: 16px; left: 4px; right: 4px; border: 1px solid rgba(255,255,255,0.06); border-radius: 2px; }
  /* Size AND contrast both failed independently at 7px / 0.35 alpha, and fixing either alone
     leaves the name unreadable: she said on 13 Aug that she could not see it. The spine is 28px
     wide, so the rotated text had a 28px channel and was using a quarter of it. 12px chosen by
     rendered measurement, not arithmetic off the channel - 13 and 14 also fit, so there is
     headroom if she still cannot read it.
     max-width is load-bearing, not decoration. The element is rotated 90deg, so its width runs
     ALONG the spine, and brConfirmName assigns the RAW input value here - maxlength 36. Only the
     COVER splits at >16 chars; the spine never has. At 7px a 36-char name still fit, so raising
     the size INTRODUCES an overflow that did not previously exist: measured at 12px a 36-char
     name runs 244.6px along a 226.2px spine and escapes it. The cap tracks the spine's own
     height rule so it holds at every viewport, and ellipsis degrades a long name instead of
     spilling it across the shelf. Guarded by test 70. */
  .shelf-spine-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(90deg); font-family: 'DM Serif Display', serif; font-size: 12px; color: rgba(255,255,255,0.80); white-space: nowrap; max-width: calc(var(--book-h) - 32px); overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.08em; pointer-events: none; }
  .shelf-shadow { width: 44px; height: 6px; background: radial-gradient(ellipse, rgba(0,0,0,0.55) 0%, transparent 70%); border-radius: 50%; opacity: 0; transition: opacity 0.7s ease 0.5s; }
  #shelf-view.visible .shelf-shadow { opacity: 1; }

  #below-book { width: 100%; max-width: min(360px, 88vw); margin: 0 auto; padding: 32px 20px 56px; display: flex; flex-direction: column; align-items: center; gap: 0; }

  #name-section { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; }
  #name-section.visible { opacity: 1; transform: translateY(0); }
  #name-section.fading { opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease; }
  .name-heading { font-family: 'DM Serif Display', serif; font-size: 22px; color: white; line-height: 1.3; }
  .name-sub { font-size: 13px; color: rgba(255,255,255,0.38); line-height: 1.6; max-width: 280px; }
  .name-row { display: flex; gap: 8px; width: 100%; margin-top: 4px; }
  .name-input { flex: 1; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14); border-radius: 100px; padding: 14px 18px; font-family: 'DM Sans', sans-serif; font-size: 14px; color: white; outline: none; transition: border-color 0.2s; min-width: 0; }
  .name-input::placeholder { color: rgba(255,255,255,0.28); }
  .name-input:focus { border-color: var(--accent); }
  .name-save-btn { background: var(--accent); color: white; border: none; border-radius: 100px; padding: 14px 20px; font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: opacity 0.2s; }
  .name-save-btn:hover { opacity: 0.85; }
  .name-skip-btn { background: none; border: none; color: rgba(255,255,255,0.3); font-family: 'DM Sans', sans-serif; font-size: 12px; cursor: pointer; padding: 4px; transition: color 0.2s; }
  .name-skip-btn:hover { color: rgba(255,255,255,0.52); }

  #save-section { width: 100%; display: none; flex-direction: column; align-items: center; gap: 12px; text-align: center; opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; }
  #save-section.visible { display: flex; opacity: 1; transform: translateY(0); }
  .save-what { width: 100%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 16px 20px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
  .save-what-book-name { font-family: 'DM Serif Display', serif; font-size: 16px; color: white; }
  .save-what-meta { font-size: 11px; color: rgba(255,255,255,0.38); letter-spacing: 0.05em; }
  .save-what-divider { width: 32px; height: 1px; background: rgba(255,255,255,0.1); border-radius: 1px; margin: 2px 0; }
  .save-what-preview { font-family: 'DM Serif Display', serif; font-size: 13px; color: rgba(255,255,255,0.48); font-style: italic; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 280px; }
  .save-heading { font-family: 'DM Serif Display', serif; font-size: 20px; color: white; line-height: 1.3; }
  .br-save-btn { width: 100%; padding: 16px 20px; border-radius: 100px; border: none; font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: space-between; transition: transform 0.15s; text-align: left; }
  .br-save-btn:hover { transform: translateY(-1px); }
  .br-save-btn-primary { background: white; color: var(--dark); }
  .br-save-btn-secondary { background: rgba(255,255,255,0.07); color: white; border: 1px solid rgba(255,255,255,0.13); }
  .br-save-btn-ghost { background: transparent; color: rgba(255,255,255,0.3); font-size: 13px; width: 100%; border: none; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: color 0.2s; padding: 8px; }
  .br-save-btn-ghost:hover { color: rgba(255,255,255,0.52); }
  .br-save-btn-sub { font-size: 11px; opacity: 0.5; font-weight: 400; text-align: right; flex-shrink: 0; margin-left: 8px; }
  .br-inline-capture { width: 100%; display: flex; flex-direction: column; gap: 8px; }
  .br-inline-input { width: 100%; background: rgba(255,255,255,0.07); border: 1px solid var(--accent); border-radius: 100px; padding: 15px 20px; font-family: 'DM Sans', sans-serif; font-size: 15px; color: white; outline: none; }
  .br-inline-input::placeholder { color: rgba(255,255,255,0.3); }
  .br-inline-submit { width: 100%; background: var(--accent); color: white; border: none; border-radius: 100px; padding: 16px 20px; font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 500; cursor: pointer; transition: opacity 0.2s; }
  .br-inline-submit:hover { opacity: 0.88; }
  .br-saved-confirm { font-family: 'DM Serif Display', serif; font-size: 20px; color: white; text-align: center; }
  .br-saved-sub { font-size: 13px; color: rgba(255,255,255,0.38); text-align: center; line-height: 1.6; }

  /* ── FEED SCREEN ─────────────────────────────────── */
  #feed-overlay { display: none; position: fixed; inset: 0; z-index: 150; overflow-y: auto; -webkit-overflow-scrolling: touch; background: linear-gradient(160deg, #FDF6EE 0%, #EEF0F9 100%); }
  #feed-overlay.active { display: block; }
  .feed-phone { width: 100%; max-width: 390px; margin: 0 auto; padding: 0 0 80px; }
  .feed-nav { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px 0; }
  .feed-logo { font-family: 'DM Serif Display', serif; font-size: 20px; color: var(--dark); }
  .feed-logo em { color: var(--accent); font-style: normal; }
  .feed-week-badge { font-size: 12px; font-weight: 500; color: var(--accent); background: rgba(193,123,160,0.1); border: 1px solid rgba(193,123,160,0.22); border-radius: 100px; padding: 5px 12px; }
  .feed-content { padding: 24px 24px 0; }
  .feed-return-prompt { margin-bottom: 28px; opacity: 0; animation: fadeUp 0.5s ease 0.1s forwards; }
  .feed-return-label { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
  .feed-return-headline { font-family: 'DM Serif Display', serif; font-size: 22px; line-height: 1.32; color: var(--dark); letter-spacing: -0.3px; }
  .feed-section-label { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
  .feed-card { background: var(--card-bg); border: 1.5px solid var(--card-border); border-radius: 18px; padding: 20px; backdrop-filter: blur(8px); box-shadow: 0 2px 24px rgba(61,43,74,0.07); margin-bottom: 14px; opacity: 0; }
  .feed-card.f1 { animation: fadeUp 0.5s ease 0.2s forwards; }
  .feed-card.f3 { animation: fadeUp 0.5s ease 0.5s forwards; }
  .feed-card.f5 { animation: fadeUp 0.5s ease 0.8s forwards; }
  .feed-book-preview { background: linear-gradient(135deg, rgba(193,123,160,0.1) 0%, rgba(61,43,74,0.05) 100%); border: 1.5px solid rgba(193,123,160,0.2); border-radius: 18px; padding: 20px; margin-bottom: 14px; opacity: 0; animation: fadeUp 0.5s ease 0.95s forwards; }
  .feed-book-label { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
  .feed-book-label::before { content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
  .feed-book-entry { font-family: 'DM Serif Display', serif; font-size: 14px; line-height: 1.65; color: var(--dark); font-style: italic; margin-bottom: 12px; }
  .feed-book-meta { font-size: 12px; color: var(--muted); }
  .feed-reflect-btn { width: 100%; background: var(--dark); color: #fff; border: none; border-radius: 100px; padding: 18px 24px; font-family: 'DM Sans', sans-serif; font-size: 16px; font-weight: 400; cursor: pointer; margin-top: 8px; transition: all 0.22s ease; opacity: 0; animation: fadeUp 0.5s ease 1.1s forwards; }
  .feed-reflect-btn:hover { opacity: 0.88; transform: translateY(-1px); }
  .feed-safety-link { display: block; text-align: center; font-size: 12px; color: var(--muted); text-decoration: none; margin-top: 24px; padding-bottom: 20px; opacity: 0; animation: fadeUp 0.5s ease 1.3s forwards; }
  .feed-safety-link:hover { color: var(--dark); }
  .q-share-opt-in { background: var(--card-bg); border: 1.5px solid var(--card-border); border-radius: 18px; padding: 20px; margin-top: 16px; opacity: 0; transition: opacity 0.4s ease; }
  .q-share-opt-in.visible { opacity: 1; }
  .q-share-opt-in-headline { font-family: 'Lora', serif; font-style: italic; font-size: 16px; color: var(--dark); margin-bottom: 10px; }
  .q-share-opt-in-body { font-size: 14px; color: var(--muted); line-height: 1.55; margin-bottom: 16px; }
  .q-share-opt-in-buttons { display: flex; gap: 10px; }
  /* The decline-side truth. Quieter than the question, and never hidden behind a
     disclosure: a reader who takes "no" to mean "nothing of mine is used" has been
     misled by omission, and that is the one thing this block must not do. */
  .q-share-opt-in-note { margin-top: 14px; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
  .q-share-yes-btn { flex: 1; padding: 13px 16px; border-radius: 100px; border: 1.5px solid var(--accent); color: var(--accent); background: transparent; font-family: 'DM Sans', sans-serif; font-size: 14px; cursor: pointer; transition: opacity 0.2s; }
  .q-share-no-btn { flex: 1; padding: 13px 16px; border-radius: 100px; border: none; color: var(--muted); background: transparent; font-family: 'DM Sans', sans-serif; font-size: 14px; cursor: pointer; transition: opacity 0.2s; }
  .q-share-yes-btn:hover, .q-share-no-btn:hover { opacity: 0.7; }
  @media (max-width: 360px) { .q-share-opt-in-buttons { flex-direction: column; } }

  /* NAV BOOK BUTTON */
  .nav-book-btn { background:rgba(255,255,255,0.55); border:1.5px solid rgba(61,43,74,0.22); border-radius:100px; width:36px; height:36px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--dark); transition:background 0.2s ease,border-color 0.2s ease; flex-shrink:0; }
  .nav-book-btn:hover { background:rgba(255,255,255,0.85); border-color:rgba(61,43,74,0.35); }

  /* RETURN VISIT OVERLAY */
  #return-visit-overlay { display:none; position:fixed; inset:0; z-index:200; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  #return-visit-overlay.active { display:block; }
  .rv-bg { min-height:100vh; }
  .rv-phone { width:100%; max-width:390px; margin:0 auto; padding:0 0 80px; }
  .rv-nav { display:flex; justify-content:space-between; align-items:center; padding:20px 24px 0; }
  .rv-logo { font-family:'DM Serif Display',serif; font-size:20px; color:var(--dark); }
  .rv-logo em { color:var(--accent); font-style:normal; }
  .rv-content { padding:36px 24px 0; }
  .rv-welcome { opacity:0; animation:fadeUp 0.6s ease 0.1s forwards; }
  .rv-welcome-name { font-family:'DM Serif Display',serif; font-size:28px; line-height:1.2; color:var(--dark); letter-spacing:-0.5px; margin-bottom:6px; }
  .rv-welcome-stage { font-size:14px; color:var(--muted); margin-bottom:32px; }
  .rv-book-card { background:var(--card-bg); border:1.5px solid var(--card-border); border-radius:20px; padding:20px; backdrop-filter:blur(8px); box-shadow:0 2px 24px rgba(61,43,74,0.07); margin-bottom:20px; cursor:pointer; opacity:0; animation:fadeUp 0.6s ease 0.25s forwards; transition:transform 0.2s ease,box-shadow 0.2s ease; }
  .rv-book-card:hover { transform:translateY(-2px); box-shadow:0 6px 32px rgba(61,43,74,0.12); }
  .rv-book-card-inner { display:flex; align-items:center; gap:16px; }
  .rv-book-icon { width:48px; height:60px; flex-shrink:0; background:linear-gradient(135deg,#EDE5D8 0%,#D4C8B8 100%); border-radius:3px 8px 8px 3px; border-left:5px solid #3A2A18; display:flex; align-items:center; justify-content:center; box-shadow:2px 2px 8px rgba(58,42,24,0.2); position:relative; }
  .rv-book-icon::after { content:''; position:absolute; left:5px; top:8px; bottom:8px; width:1.5px; background:rgba(58,42,24,0.15); }
  .rv-book-page-count { font-family:'DM Serif Display',serif; font-size:13px; color:#3A2A18; text-align:center; line-height:1.2; }
  .rv-book-info { flex:1; }
  .rv-book-title { font-family:'DM Serif Display',serif; font-size:16px; color:var(--dark); margin-bottom:4px; }
  .rv-book-since { font-size:12px; color:var(--muted); margin-bottom:6px; }
  .rv-book-update { font-size:13px; color:var(--body-color); font-style:italic; }
  .rv-book-arrow { color:var(--muted); font-size:18px; flex-shrink:0; }
  .rv-waiting-card { background:var(--card-bg); border:1.5px solid var(--card-border); border-radius:20px; padding:20px; backdrop-filter:blur(8px); margin-bottom:20px; opacity:0; animation:fadeUp 0.6s ease 0.4s forwards; }
  .rv-waiting-label { font-size:10px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; display:flex; align-items:center; gap:6px; }
  .rv-waiting-label::before { content:''; display:block; width:5px; height:5px; border-radius:50%; background:var(--accent); }
  .rv-waiting-prompt { font-family:'DM Serif Display',serif; font-size:17px; line-height:1.45; color:var(--dark); font-style:italic; }
  /* The prompt creates the motivation and the next step was a separate hunt for a button. The
     arrow mirrors .rv-book-arrow on the book row above, so this screen keeps ONE visual language
     for "this row is a door" — and it is static, because hover does not exist on a phone. */
  .rv-waiting-card.tappable { cursor:pointer; position:relative; padding-right:46px; transition:border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease; }
  .rv-waiting-card.tappable::after { content:'\2192'; position:absolute; right:20px; bottom:18px; color:var(--muted); font-size:18px; line-height:1; }
  .rv-waiting-card.tappable:hover { border-color:rgba(193,123,160,0.45); box-shadow:0 4px 16px rgba(61,43,74,0.08); transform:translateY(-1px); }
  .rv-waiting-card.tappable:hover::after { color:var(--accent); }
  .rv-waiting-card.tappable:active { transform:translateY(0); }
  .rv-waiting-card.tappable:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
  .rv-cta { opacity:0; animation:fadeUp 0.6s ease 0.55s forwards; }
  .rv-reflect-btn { width:100%; background:var(--dark); color:#fff; border:none; border-radius:100px; padding:18px 24px; font-family:'DM Sans',sans-serif; font-size:16px; cursor:pointer; transition:all 0.22s ease; margin-bottom:12px; }
  .rv-reflect-btn:hover { opacity:0.88; transform:translateY(-1px); }
  .rv-open-book-link { display:block; text-align:center; font-size:14px; color:var(--accent); cursor:pointer; font-style:italic; text-decoration:underline; text-underline-offset:3px; padding:4px 0; }

  /* SIGN IN OVERLAY */
  #signin-overlay { display:none; position:fixed; inset:0; z-index:500; background:rgba(61,43,74,0.55); backdrop-filter:blur(4px); align-items:flex-end; justify-content:center; }
  #signin-overlay.active { display:flex; }
  .signin-sheet { width:100%; max-width:390px; background:#FDF6EE; border-radius:24px 24px 0 0; padding:32px 28px 48px; }
  .signin-close { position:absolute; top:16px; right:20px; background:none; border:none; font-size:22px; color:var(--muted); cursor:pointer; line-height:1; }
  .signin-heading { font-family:'DM Serif Display',serif; font-size:24px; color:var(--dark); margin-bottom:6px; }
  .signin-subhead { font-size:14px; color:var(--muted); margin-bottom:24px; line-height:1.5; }
  .signin-input { width:100%; font-family:'DM Sans',sans-serif; font-size:16px; color:var(--dark); background:rgba(255,255,255,0.85); border:1.5px solid var(--card-border); border-radius:12px; padding:14px 16px; outline:none; transition:border-color 0.2s ease; margin-bottom:14px; }
  .signin-input:focus { border-color:var(--accent); }
  .signin-submit { width:100%; font-family:'DM Sans',sans-serif; font-size:15px; font-weight:500; color:#fff; background:var(--accent); border:none; border-radius:100px; padding:14px; cursor:pointer; transition:opacity 0.2s ease; }
  .signin-submit:disabled { opacity:0.55; cursor:default; }
  .signin-confirm { font-size:15px; color:var(--dark); text-align:center; padding:8px 0; line-height:1.5; }
  /* Above the input, not below the button: the thing she has to change is the field, so the
     reason sits where her eye already is. The delete confirmation puts its error next to the
     button for the opposite reason — there, the button IS the retry. */
  .signin-error { font-size:13px; line-height:1.5; color:#8C3A3A; margin-bottom:12px; }

  /* RETURN VISIT — UNSAVED BANNER */
  #rv-unsaved-banner { background:rgba(193,123,160,0.12); border:1.5px solid rgba(193,123,160,0.25); border-radius:14px; margin:16px 24px 0; padding:14px 18px; font-size:13px; color:var(--body-color); cursor:pointer; line-height:1.5; }

  /* BIRTH TRANSITION */
  #bt-rv-affordance { margin-top:20px; }
  .bt-headsup-text { font-size:14px; color:var(--body-color); line-height:1.65; margin-bottom:16px; font-style:italic; padding:0 2px; }
  .bt-here-btn { width:100%; background:rgba(193,123,160,0.12); color:var(--accent); border:1.5px solid rgba(193,123,160,0.35); border-radius:100px; padding:16px 24px; font-family:'DM Sans',sans-serif; font-size:15px; font-weight:500; cursor:pointer; transition:all 0.22s ease; }
  .bt-here-btn:hover { background:rgba(193,123,160,0.2); }
  #bt-quiz-affordance { margin-top:16px; }
  .bt-quiz-link { font-size:13px; color:var(--accent); cursor:pointer; text-align:center; display:block; padding:8px 0; text-decoration:underline; text-underline-offset:3px; font-style:italic; }
  #bt-sheet { display:none; position:fixed; inset:0; z-index:500; background:rgba(61,43,74,0.55); backdrop-filter:blur(4px); align-items:flex-end; justify-content:center; }
  #bt-sheet.active { display:flex; }
  .bt-sheet-inner { width:100%; max-width:390px; background:#FDF6EE; border-radius:24px 24px 0 0; padding:32px 28px 48px; position:relative; }
  .bt-sheet-close { position:absolute; top:16px; right:20px; background:none; border:none; font-size:22px; color:var(--muted); cursor:pointer; line-height:1; }
  .bt-sheet-heading { font-family:'DM Serif Display',serif; font-size:24px; color:var(--dark); margin-bottom:6px; }
  .bt-sheet-subhead { font-size:14px; color:var(--muted); margin-bottom:24px; line-height:1.5; }
  .bt-sheet-date { width:100%; font-family:'DM Sans',sans-serif; font-size:16px; color:var(--dark); background:rgba(255,255,255,0.85); border:1.5px solid var(--card-border); border-radius:12px; padding:14px 16px; outline:none; transition:border-color 0.2s ease; margin-bottom:14px; box-sizing:border-box; }
  .bt-sheet-date:focus { border-color:var(--accent); }
  .bt-sheet-confirm { width:100%; font-family:'DM Sans',sans-serif; font-size:15px; font-weight:500; color:#fff; background:var(--accent); border:none; border-radius:100px; padding:14px; cursor:pointer; transition:opacity 0.2s ease; }
  .bt-sheet-confirm:disabled { opacity:0.55; cursor:default; }
  #bt-transition-text { font-size:15px; color:var(--dark); text-align:center; padding:8px 0; line-height:1.65; font-style:italic; }

  /* MEMORY BOOK OVERLAY */
  #memory-book-overlay { display:none; position:fixed; inset:0; z-index:300; overflow:hidden; background:#1A0F24; }
  #memory-book-overlay.active { display:flex; flex-direction:column; }
  .mb-nav { display:flex; justify-content:space-between; align-items:center; padding:20px 24px 16px; flex-shrink:0; }
  .mb-back-btn { font-family:'DM Sans',sans-serif; font-size:14px; color:rgba(237,229,216,0.6); background:none; border:none; cursor:pointer; padding:4px 0; transition:color 0.2s ease; }
  .mb-back-btn:hover { color:rgba(237,229,216,0.9); }
  .mb-logo { font-family:'DM Serif Display',serif; font-size:16px; color:rgba(237,229,216,0.7); }
  .mb-logo em { color:#C17BA0; font-style:normal; }
  .mb-page-count-label { font-size:12px; color:rgba(237,229,216,0.4); font-family:'DM Sans',sans-serif; }
  #mb-cover-view { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; cursor:pointer; }
  .mb-cover-book { width:calc(var(--book-w) * var(--mb-cover-scale)); min-height:calc(var(--book-h) * var(--mb-cover-scale)); box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; background:linear-gradient(160deg,#EDE5D8 0%,#D4C8B8 100%); border-radius:4px 12px 12px 4px; border-left:16px solid #3A2A18; padding:32px 24px; box-shadow:8px 12px 40px rgba(0,0,0,0.6); text-align:center; margin-bottom:32px; position:relative; }
  .mb-cover-book::after { content:''; position:absolute; left:16px; top:12px; bottom:12px; width:1.5px; background:rgba(58,42,24,0.12); }
  .mb-cover-name { font-family:'DM Serif Display',serif; font-size:18px; color:#3A2A18; line-height:1.3; margin-bottom:12px; }
  .mb-cover-divider { width:40px; height:1px; background:rgba(58,42,24,0.25); margin:0 auto 12px; }
  .mb-cover-stage-info { font-family:'DM Sans',sans-serif; font-size:11px; color:#5C4040; letter-spacing:0.05em; margin-bottom:6px; }
  .mb-cover-pages { font-family:'DM Sans',sans-serif; font-size:12px; color:#7A5A40; margin-top:16px; }
  .mb-cover-lumama { font-family:'DM Serif Display',serif; font-size:10px; letter-spacing:0.12em; color:rgba(58,42,24,0.45); text-transform:uppercase; margin-top:20px; }

  /* THE FOOT OF THE BOOK — two controls, one surface.
     The account ID is the only identification route that works for an anonymous user,
     and the sharing toggle is what makes the opt-in's "you can switch this any time"
     a true sentence. They ship together or that sentence is false. */
  .mb-foot { width:100%; max-width:320px; margin:28px auto 0; padding-top:20px; border-top:1px solid rgba(237,229,216,0.14); cursor:default; }
  .mb-foot-label { font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:rgba(237,229,216,0.42); margin-bottom:8px; }
  .mb-account-row { display:flex; align-items:center; gap:8px; }
  .mb-account-id { flex:1; font-family:'Courier New',monospace; font-size:11.5px; color:rgba(237,229,216,0.82); background:rgba(237,229,216,0.06); border:1px solid rgba(237,229,216,0.14); border-radius:8px; padding:8px 10px; overflow-wrap:anywhere; user-select:all; }
  .mb-account-copy { flex-shrink:0; font-family:'DM Sans',sans-serif; font-size:12.5px; color:rgba(237,229,216,0.8); background:transparent; border:1px solid rgba(237,229,216,0.28); border-radius:100px; padding:8px 14px; cursor:pointer; transition:opacity 0.2s ease; }
  .mb-account-copy:hover { opacity:0.75; }
  .mb-foot-help { font-size:11.5px; line-height:1.5; color:rgba(237,229,216,0.42); margin-top:8px; }
  .mb-sharing { margin-top:22px; }
  .mb-sharing-state { font-size:12.5px; line-height:1.5; color:rgba(237,229,216,0.62); }
  /* A link, not a button: revoking must not look heavier than granting did. */
  .mb-sharing-toggle { display:inline-block; margin-top:8px; font-family:'DM Sans',sans-serif; font-size:12.5px; color:rgba(237,229,216,0.82); background:none; border:none; padding:0; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
  .mb-sharing-toggle:hover { color:#EDE5D8; }
  .mb-sharing-error { margin-top:8px; font-size:12px; color:#E8A0A0; }
  .mb-cover-tap-hint { font-size:12px; color:rgba(237,229,216,0.35); font-style:italic; }
  .mb-export-btn { font-family:'DM Sans',sans-serif; font-size:13px; color:rgba(237,229,216,0.4); background:none; border:1px solid rgba(237,229,216,0.15); border-radius:100px; padding:8px 20px; cursor:pointer; margin-top:16px; transition:all 0.2s ease; }
  #mb-pages-view { display:none; flex:1; flex-direction:column; overflow:hidden; }
  #mb-pages-view.active { display:flex; }
  .mb-page-container { flex:1; position:relative; overflow:hidden; }
  .mb-page { position:absolute; inset:0; background:#EDE5D8; padding:28px 28px 24px; overflow-y:auto; -webkit-overflow-scrolling:touch; display:flex; flex-direction:column; transition:transform 0.45s cubic-bezier(0.25,0.46,0.45,0.94),opacity 0.35s ease; }
  .mb-page.hidden-right { transform:translateX(105%); opacity:0; pointer-events:none; }
  .mb-page.hidden-left { transform:translateX(-105%); opacity:0; pointer-events:none; }
  .mb-page.active-page { transform:translateX(0); opacity:1; pointer-events:auto; }
  .mb-page-stamp { font-family:'DM Sans',sans-serif; font-size:11px; font-weight:500; letter-spacing:0.06em; text-transform:uppercase; color:rgba(92,64,64,0.55); margin-bottom:16px; display:flex; justify-content:space-between; align-items:center; }
  .mb-page-num { font-size:11px; color:rgba(92,64,64,0.35); }
  .mb-reflection-text { font-family:'Lora',serif; font-size:15px; line-height:1.75; color:#3A2A18; font-style:italic; flex:1; margin-bottom:16px; }
  .mb-ai-response { background:rgba(193,123,160,0.06); border-left:2px solid rgba(193,123,160,0.3); border-radius:0 8px 8px 0; padding:12px 14px; margin-bottom:16px; }
  .mb-ai-label { font-family:'DM Serif Display',serif; font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:#C17BA0; margin-bottom:7px; }
  .mb-ai-text { font-family:'DM Sans',sans-serif; font-size:13px; line-height:1.65; color:#5C4A6B; }
  .mb-page-footer { display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding-top:12px; border-top:1px solid rgba(58,42,24,0.1); }
  .mb-plus-preview-btn { font-family:'DM Sans',sans-serif; font-size:11px; color:#C17BA0; background:rgba(193,123,160,0.1); border:1px solid rgba(193,123,160,0.25); border-radius:100px; padding:5px 12px; cursor:pointer; }
  .mb-plus-preview-btn.used-up { color:rgba(92,74,107,0.35); background:none; border-color:rgba(92,74,107,0.12); cursor:default; pointer-events:none; }
  .mb-back-cover { position:absolute; inset:0; background:#EDE5D8; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 32px; transition:transform 0.45s cubic-bezier(0.25,0.46,0.45,0.94),opacity 0.35s ease; }
  .mb-back-cover.hidden-right { transform:translateX(105%); opacity:0; pointer-events:none; }
  .mb-back-cover.active-page { transform:translateX(0); opacity:1; pointer-events:auto; }
  .mb-next-page-text { font-family:'Lora',serif; font-size:20px; color:rgba(58,42,24,0.4); font-style:italic; text-align:center; margin-bottom:24px; line-height:1.5; }
  .mb-add-to-book-btn { background:#3A2A18; color:#EDE5D8; border:none; border-radius:100px; padding:14px 32px; font-family:'DM Sans',sans-serif; font-size:15px; cursor:pointer; }
  .mb-thumbnail-strip { flex-shrink:0; padding:10px 16px 16px; display:flex; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .mb-thumbnail-strip::-webkit-scrollbar { display:none; }
  .mb-thumb { flex-shrink:0; width:36px; height:44px; background:rgba(237,229,216,0.15); border:1px solid rgba(237,229,216,0.2); border-radius:4px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:9px; color:rgba(237,229,216,0.4); font-family:'DM Sans',sans-serif; }
  .mb-thumb.active-thumb { background:rgba(237,229,216,0.3); border-color:rgba(237,229,216,0.5); color:rgba(237,229,216,0.8); }
  .mb-thumb-back { flex-shrink:0; width:36px; height:44px; background:none; border:1px dashed rgba(237,229,216,0.15); border-radius:4px; }
  /* ── "Something not right?" — SPECS_report-an-issue.md ──
     A quiet persistent LINK, never a badge. z-index 320 sits above every overlay
     (quiz 100, feed 150, memory book 300) and deliberately BELOW the consent bar at 400,
     so a consent decision is never competed with.
     The strip is pointer-events:none and only the link itself is clickable, so it can never
     swallow a tap meant for a control underneath it. Test 82 asserts it does not overlap
     the reflection screen's submit button, because "it is present" is not "it is out of
     the way". */
  .ri-strip { position:fixed; left:0; right:0; bottom:0; z-index:320; text-align:center; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); pointer-events:none; background:linear-gradient(to top, rgba(253,246,238,0.92), rgba(253,246,238,0)); }
  .ri-trigger { pointer-events:auto; display:inline-block; font-family:'DM Sans',sans-serif; font-size:12px; color:var(--muted); background:none; border:none; cursor:pointer; padding:4px 10px; text-decoration:underline; }
  .ri-trigger:hover { color:var(--dark); }
  .ri-panel { position:fixed; inset:0; z-index:420; background:rgba(61,43,74,0.55); display:none; align-items:flex-end; justify-content:center; }
  .ri-panel.active { display:flex; }
  .ri-card { background:#FDF6EE; width:100%; max-width:420px; border-radius:18px 18px 0 0; padding:26px 22px calc(22px + env(safe-area-inset-bottom)); max-height:88vh; overflow-y:auto; }
  .ri-head { font-family:'DM Serif Display',serif; font-size:21px; color:var(--dark); margin-bottom:8px; }
  .ri-body { font-family:'DM Sans',sans-serif; font-size:14px; line-height:1.6; color:var(--muted); margin-bottom:16px; }
  .ri-textarea { width:100%; min-height:120px; font-family:'DM Sans',sans-serif; font-size:16px; line-height:1.5; color:var(--dark); background:rgba(255,255,255,0.85); border:1.5px solid var(--card-border); border-radius:12px; padding:14px 16px; outline:none; resize:vertical; }
  .ri-textarea:focus { border-color:var(--accent); }
  /* Cialdini: the line that earns the report. It sits UNDER the box she is typing into, so
     she reads it while deciding what to write, not after she has sent it. */
  .ri-assurance { font-family:'DM Sans',sans-serif; font-size:12px; line-height:1.5; color:var(--muted); margin:10px 0 18px; }
  .ri-email-label { font-family:'DM Sans',sans-serif; font-size:13px; color:var(--muted); display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
  .ri-optional { font-size:11px; opacity:0.75; }
  .ri-email { width:100%; font-family:'DM Sans',sans-serif; font-size:16px; color:var(--dark); background:rgba(255,255,255,0.85); border:1.5px solid var(--card-border); border-radius:12px; padding:12px 16px; outline:none; margin-bottom:18px; }
  .ri-email:focus { border-color:var(--accent); }
  .ri-error { font-family:'DM Sans',sans-serif; font-size:13px; line-height:1.5; color:#8C3A3A; margin-bottom:12px; }
  .ri-actions { display:flex; align-items:center; justify-content:flex-end; gap:16px; }
  .ri-cancel { background:none; border:none; font-family:'DM Sans',sans-serif; font-size:15px; color:var(--muted); cursor:pointer; padding:12px 6px; }
  .ri-send { background:var(--dark); color:#FDF6EE; border:none; border-radius:100px; padding:13px 30px; font-family:'DM Sans',sans-serif; font-size:15px; cursor:pointer; }
  .ri-send[disabled] { opacity:0.45; cursor:default; }
  .ri-done { font-family:'DM Sans',sans-serif; font-size:15px; line-height:1.6; color:var(--dark); text-align:center; padding:18px 0 6px; }
  /* The delete affordance and its confirmation — SPECS_delete-confirmation.md.
     .mb-delete-page-btn is deliberately the SAME 11px as .mb-plus-preview-btn, its peer on
     the same footer row. The test of "not visually suppressed" is weight relative to the
     control beside it, not an absolute size, and the spec forbids greying or hiding it. */
  .mb-page-foot-right { display:flex; align-items:center; gap:14px; }
  .mb-delete-page-btn { font-family:'DM Sans',sans-serif; font-size:11px; color:#8C3A3A; background:none; border:none; padding:5px 2px; cursor:pointer; text-decoration:underline; }
  .mb-page-mark { font-size:10px; color:rgba(58,42,24,0.25); }
  .mb-confirm { position:absolute; inset:0; background:rgba(26,15,36,0.62); display:none; align-items:center; justify-content:center; padding:24px; z-index:50; }
  .mb-confirm.active { display:flex; }
  .mb-confirm-card { background:#EDE5D8; border-radius:14px; padding:26px 24px 22px; width:100%; max-width:320px; box-shadow:0 18px 44px rgba(26,15,36,0.35); }
  .mb-confirm-head { font-family:'DM Serif Display',serif; font-size:21px; color:#3A2A18; margin-bottom:10px; }
  .mb-confirm-body { font-family:'DM Sans',sans-serif; font-size:14px; line-height:1.6; color:rgba(58,42,24,0.78); margin-bottom:22px; }
  /* "Keep it" is the filled pill and the larger target, which protects a mis-fire.
     "Delete it" is full size, full contrast and never disabled for longer than the request
     takes — suppressing it is the dark pattern this screen exists not to be. */
  .mb-confirm-actions { display:flex; align-items:center; justify-content:flex-end; gap:16px; }
  .mb-confirm-keep { background:#3A2A18; color:#EDE5D8; border:none; border-radius:100px; padding:13px 28px; font-family:'DM Sans',sans-serif; font-size:15px; cursor:pointer; }
  .mb-confirm-delete { background:none; border:none; color:#8C3A3A; font-family:'DM Sans',sans-serif; font-size:15px; padding:13px 8px; cursor:pointer; text-decoration:underline; }
  .mb-confirm-delete[disabled] { opacity:0.55; cursor:default; }
  .mb-confirm-error { font-family:'DM Sans',sans-serif; font-size:13px; line-height:1.5; color:#8C3A3A; margin-top:16px; text-align:right; }