/**
 * AttractLoveNow · My Love Portal. PROTOTYPE (design only).
 * One job per screen. Type and space do the work; no icons, no badges.
 * Phone: one column, three text tabs at the bottom.
 * Desktop (960px+): the menu sits in the dark bar; reading column + side column.
 */

:root {
  --bg: #FAF6F0;
  --bg-alt: #F3ECE2;
  --card: #FFFFFF;
  --text: #28232B;
  --muted: #68616E;
  --subtle: #948C9A;
  --line: #E8DDD2;
  --rose: #B4503A;
  --gold: #B08A45;
  --gold-soft: #FBF5E6;
  --dark: #211D24;
  --ink: #2B2231;
  --green: #1F8A4C;
  --green-d: #197541;
  --yellow: #F2C94C;
  --yellow-d: #E0B53A;
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.65 var(--sans); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
h1, h2, h3 { font-family: var(--serif); line-height: 1.2; margin: 0 0 0.6rem; font-weight: 700; }
h1 { font-size: 2rem; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1rem; }
a { color: inherit; }
button { font: inherit; }

/* ==========================================================================
   The bar, the menu, the page
   ========================================================================== */
.ln-bar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--dark); padding: calc(0.75rem + env(safe-area-inset-top, 0px)) 1rem 0.75rem;
}
.ln-logo { font: 700 1.05rem var(--serif); color: #F6F1F7; letter-spacing: 0.01em; text-decoration: none; white-space: nowrap; }
.ln-right { display: flex; align-items: center; gap: 12px; }
.ln-portal { font: 600 0.78rem var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: #E2C37A; white-space: nowrap; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: #3A2A44; border: 1px solid #6B4E7E; color: #F6F1F7; display: grid; place-items: center; font-weight: 700; font-size: 0.95rem; text-decoration: none; flex: none; }
.ln-nav { display: none; }

.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: #fff; border-top: 1px solid var(--line);
  padding: 0 0 env(safe-area-inset-bottom, 0px);
}
.tabs a { text-align: center; text-decoration: none; color: var(--subtle); font-weight: 600; font-size: 0.9rem; padding: 15px 0 14px; position: relative; }
.tabs a.on { color: var(--text); box-shadow: inset 0 3px 0 var(--gold); }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #D8443A; margin-left: 5px; vertical-align: 3px; }

.page { max-width: 640px; margin: 0 auto; padding: 8px 20px 110px; }
.side { margin-top: 12px; }

@media (min-width: 960px) {
  .tabs { display: none; }
  .ln-bar { padding-left: 32px; padding-right: 32px; }
  .ln-nav { display: flex; gap: 6px; }
  .ln-nav a { color: #BDB3C4; text-decoration: none; font-weight: 600; font-size: 0.98rem; padding: 6px 14px; border-radius: 99px; }
  .ln-nav a:hover { color: #fff; }
  .ln-nav a.on { color: #fff; background: rgba(255, 255, 255, 0.09); }
  .page { max-width: 1080px; display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 48px; padding: 28px 32px 80px; align-items: start; }
  .side { position: sticky; top: 88px; margin-top: 0; }
  .page.solo { grid-template-columns: minmax(0, 720px); justify-content: center; }
}

/* ==========================================================================
   Shared bits
   ========================================================================== */
.btn {
  display: block; width: 100%; text-align: center; text-decoration: none; cursor: pointer;
  border: 0; border-radius: 999px; padding: 16px 22px;
  background: var(--green); color: #fff; font: 700 1.08rem/1.2 var(--sans);
  box-shadow: 0 10px 22px rgba(31, 138, 76, 0.24), inset 0 -3px 0 rgba(0, 0, 0, 0.14);
}
.btn:hover { background: var(--green-d); }
.btn-yellow { background: var(--yellow); color: #3A2E00; box-shadow: 0 8px 18px rgba(224, 181, 58, 0.26), inset 0 -3px 0 rgba(0, 0, 0, 0.1); }
.btn-yellow:hover { background: var(--yellow-d); }
.link { color: var(--rose); font-weight: 600; text-decoration: none; }
.link:hover { text-decoration: underline; }
.fine { color: var(--muted); font-size: 0.88rem; text-align: center; margin: 10px 0 0; }
.kicker { font: 700 0.76rem var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin: 0 0 8px; }
.muted { color: var(--muted); }
.rule { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }
.box { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 22px; margin: 20px 0; }
.back { display: inline-block; margin: 8px 0 18px; color: var(--muted); text-decoration: none; font-weight: 600; }
.sig { font: italic 600 1.35rem var(--serif); margin: 0; }
.date { color: var(--muted); margin: 0 0 4px; }

/* ==========================================================================
   Today: the reading
   ========================================================================== */
.reading-head { padding: 14px 0 4px; }
.reading-head h1 { margin-bottom: 6px; }
.intro { font: italic 500 1.2rem/1.6 var(--serif); color: var(--text); margin: 18px 0 10px; }

.reading p { font-size: 1.08rem; }
.reading .first { font: 600 1.18rem/1.6 var(--serif); }
.weather-line { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 14px 0; margin: 6px 0 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 0.98rem; }
.weather-line b { display: block; font: 700 0.72rem var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.rare-note { background: var(--gold-soft); border: 1px solid #E8D7A8; border-radius: 14px; padding: 16px 18px; margin: 18px 0; }
.rare-note p { margin: 0 0 12px; }
.next-open { color: var(--muted); font-size: 0.95rem; margin-top: 18px; }

/* The sealed message, then the message */
.seal { text-align: center; background: var(--ink); color: #E9E1EE; border-radius: 18px; padding: 44px 26px; margin: 16px 0 10px; box-shadow: 0 20px 44px rgba(43, 34, 49, 0.22); }
.seal h2 { color: #fff; font-size: 1.7rem; }
.seal .muted { color: #CFC4D6; max-width: 420px; margin: 0 auto 22px; }
.seal .btn { max-width: 320px; margin: 0 auto; }
.reading { padding-top: 4px; }
.reading .theme { font-size: 2rem; margin-bottom: 18px; }
.reading h3 { margin-top: 26px; }
.number { display: flex; gap: 18px; align-items: center; border: 1px solid #E3D3B0; background: #FFFDF8; border-radius: 14px; padding: 16px 18px; margin: 26px 0 8px; }
.number span { font: 700 2rem var(--serif); color: var(--gold); letter-spacing: 0.04em; }
.number b { display: block; }
.number.rare { background: linear-gradient(180deg, #FFF9E6, #F6E6B8); border-color: #C9A032; box-shadow: 0 10px 28px rgba(176, 138, 69, 0.3); }
.actions { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; margin: 10px 0 0; }
.actions dt { font: 700 0.76rem var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); padding-top: 4px; }
.actions dd { margin: 0; }
.affirm { margin: 26px 0 18px; padding: 18px 20px; border-left: 3px solid var(--gold); background: var(--gold-soft); font: italic 600 1.2rem/1.5 var(--serif); }

/* Today: the head, the day at a glance, do and don't */
.small { font-size: 0.92rem; }
.today-head { padding: 16px 0 6px; }
.headline { font-size: 2.4rem; line-height: 1.15; margin: 4px 0 10px; }
.lede-line { font: italic 500 1.2rem/1.5 var(--serif); color: var(--muted); margin: 0; }
.glance { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; margin: 24px 0; }
.glance > div { background: var(--card); padding: 14px 12px; }
.glance b { display: block; font: 700 0.7rem var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.glance span { display: block; font: 700 1.7rem/1.25 var(--serif); margin: 4px 0 2px; }
.glance span.sm { font-size: 1.15rem; line-height: 1.5; margin: 8px 0 4px; }
.glance small { font: 600 0.9rem var(--sans); color: var(--subtle); }
.glance i { font-style: normal; color: var(--muted); font-size: 0.85rem; }
.glance .rare { background: linear-gradient(180deg, #FFF9E6, #F6E6B8); }
@media (max-width: 560px) { .glance { grid-template-columns: 1fr 1fr; } }
.dodont { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin: 0 0 30px; }
.dodont h3 { font: 700 0.76rem var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); margin: 0 0 6px; }
.dodont div + div h3 { color: var(--rose); }
.dodont ul { list-style: none; padding: 0; margin: 0; }
.dodont li { padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 1rem; line-height: 1.45; }
@media (max-width: 560px) { .dodont { grid-template-columns: 1fr; gap: 18px; } }

/* You and him today */
.us { display: flex; gap: 18px; align-items: center; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--green); border-radius: 16px; padding: 18px 20px; margin: 30px 0 16px; text-decoration: none; }
.us:hover { box-shadow: 0 10px 24px rgba(40, 35, 43, 0.07); }
.us .kicker { margin-bottom: 2px; }
.us-line { font: 600 1.08rem/1.45 var(--serif); margin: 0 0 4px; }
.mini-ring { width: 74px; height: 74px; flex: none; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--green) calc(var(--p) * 1%), var(--bg-alt) 0); }
.mini-ring span { width: 58px; height: 58px; border-radius: 50%; background: #fff; display: grid; place-items: center; font: 700 1.1rem var(--serif); }

/* Her love cycle */
.cycle { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 20px; margin: 16px 0; }
.cycle h3 { font-size: 1.35rem; margin-bottom: 4px; }
.cycle-bar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin: 6px 0 10px; }
.cycle-bar i { height: 6px; border-radius: 99px; background: var(--bg-alt); }
.cycle-bar i.on { background: var(--gold); }

/* The tools */
.sec { margin: 34px 0 12px; }
.tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 700px) { .tools { grid-template-columns: 1fr; } }
.tools a { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px; text-decoration: none; display: flex; flex-direction: column; }
.tools a:hover { border-color: var(--gold); }
.tools b { font: 700 1.08rem var(--serif); margin-bottom: 4px; }
.tools span { color: var(--muted); font-size: 0.95rem; flex: 1; margin-bottom: 10px; }
.tools em { font-style: normal; font-weight: 700; color: var(--green); font-size: 0.9rem; }

/* Her love rose */
.rose-box { display: grid; grid-template-columns: 120px 1fr; gap: 22px; align-items: center; background: linear-gradient(160deg, #FFF6F3, #FBE6E1); border: 1px solid #F1D3CC; border-radius: 16px; padding: 22px; margin: 34px 0 10px; }
.rose-box h3 { margin-bottom: 4px; }
.rose-box p { color: var(--muted); }
.rose { position: relative; width: 120px; height: 120px; }
.rose i { position: absolute; left: 50%; top: 50%; width: 40px; height: 54px; margin: -54px 0 0 -20px; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; transform-origin: 50% 100%; transform: rotate(var(--r)); background: #F3E3DE; border: 1px solid #E8C9C0; }
.rose i.open { background: radial-gradient(ellipse at 50% 30%, #F2A6A0, #C9453F); border-color: #B23A35; box-shadow: 0 2px 6px rgba(178, 58, 53, 0.25); }
.rose b { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: radial-gradient(circle, #E8C766, #B08A45); box-shadow: 0 0 0 3px #FFF6F3; }
@media (max-width: 480px) { .rose-box { grid-template-columns: 1fr; justify-items: center; text-align: center; } }

/* The oracle, the initial, the calendar */
.oracle-answer { text-align: center; background: var(--ink); color: #E9E1EE; border-radius: 18px; padding: 36px 24px; margin: 20px 0; }
.oracle-answer .q { font: italic 500 1.1rem var(--serif); color: #CFC4D6; }
.oracle-answer h2 { color: #E2C37A; font-size: 2.4rem; margin: 6px 0 8px; }
.initial { text-align: center; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 30px 24px; margin: 20px 0; }
.initial span { display: block; font: 700 6rem/1 var(--serif); color: var(--gold); margin-bottom: 14px; }
.initial.sealed span { color: var(--line); }
.initial.sealed .btn { max-width: 300px; margin: 0 auto; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 12px; }
.cal-h { text-align: center; font: 700 0.75rem var(--sans); color: var(--subtle); }
.cal { aspect-ratio: 1; border-radius: 10px; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 0.95rem; }
.cal small { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.cal.past { color: var(--subtle); background: transparent; }
.cal.locked { color: var(--subtle); filter: blur(1.5px); }
.cal.strong { background: var(--green); color: #fff; }
.cal.good { background: #CFE8D8; }
.cal.quiet { background: var(--bg-alt); }
.cal.today { box-shadow: 0 0 0 2px var(--ink); }
.key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin: 0 4px 0 10px; }
.key.strong { background: var(--green); } .key.good { background: #CFE8D8; } .key.quiet { background: var(--bg-alt); }

/* After a purchase */
.done-head { text-align: center; padding: 20px 0 6px; }
.before { text-align: center; font: italic 600 1.15rem var(--serif); margin: 10px 0 0; }
.upsell { border: 2px solid var(--gold); }
.upsell .price { text-align: center; font: 700 2rem var(--serif); margin: 16px 0 12px; }
.upsell .price small { font: 600 1rem var(--sans); color: var(--muted); }
.no-thanks { text-align: center; margin: 14px 0 0; }
.no-thanks a { color: var(--subtle); font-size: 0.92rem; }
.not-ready { text-align: center; margin: 22px 0 0; color: var(--muted); }

/* ==========================================================================
   The side column
   ========================================================================== */
.side-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; margin-bottom: 18px; }
.side-card .body { padding: 18px; }
.side-card h3 { margin-bottom: 4px; }
.side-card p { color: var(--muted); font-size: 0.98rem; margin-bottom: 14px; }
.thumb { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #EFE6DA; }
.thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; filter: blur(12px) saturate(0.8); transform: scale(1.15); }
.thumb.clear img { filter: none; transform: none; }
.thumb span { position: absolute; top: 12px; right: 12px; background: #FFF9E8; border: 1px solid #EBDCB4; border-radius: 6px; padding: 3px 9px; font-size: 0.8rem; font-weight: 700; transform: rotate(2deg); }
.letter-mini { display: flex; gap: 12px; text-decoration: none; padding: 18px; }
.letter-mini img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.letter-mini h3 { font-size: 1.02rem; margin: 0 0 2px; }
.letter-mini p { margin: 0; font-size: 0.92rem; }

/* ==========================================================================
   Your Path
   ========================================================================== */
.path { list-style: none; padding: 0; margin: 26px 0 0; position: relative; }
.path::before { content: ''; position: absolute; left: 21px; top: 10px; bottom: 30px; width: 1px; background: var(--line); }
.step { position: relative; padding: 0 0 26px 64px; }
.num { position: absolute; left: 0; top: 0; width: 43px; height: 43px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line); display: grid; place-items: center; font: 700 1rem var(--serif); color: var(--subtle); }
.step h3 { margin: 8px 0 2px; color: var(--muted); }
.step .sub { color: var(--subtle); margin: 0; font-size: 0.98rem; }
.step.done .num { background: var(--green); border-color: var(--green); color: #fff; }
.step.done h3 { color: var(--text); }
.step.now .num { background: var(--ink); border-color: var(--ink); color: #E2C37A; box-shadow: 0 0 0 6px rgba(176, 138, 69, 0.18); }
.step.now h3 { color: var(--text); font-size: 1.4rem; }
.step.now .sub { color: var(--text); }
.step-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; margin-top: 14px; box-shadow: 0 14px 34px rgba(40, 35, 43, 0.08); }
.step-card .body { padding: 20px; }
.step-card .thumb { aspect-ratio: 16 / 9; }
.step-card p { color: var(--muted); }
.open-link { display: inline-block; margin-top: 4px; }

.others { margin-top: 20px; }
.others h2 { margin-bottom: 4px; }
.others details { border-bottom: 1px solid var(--line); }
.others summary { list-style: none; cursor: pointer; padding: 18px 30px 18px 0; font: 600 1.12rem var(--serif); position: relative; }
.others summary::-webkit-details-marker { display: none; }
.others summary::after { content: '+'; position: absolute; right: 4px; top: 14px; font: 400 1.5rem var(--sans); color: var(--gold); }
.others details[open] summary::after { content: '–'; }
.offer { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 0 12px; text-decoration: none; border-top: 1px dashed var(--line); }
.offer:first-of-type { border-top: 0; }
.offer.big { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; margin-top: 12px; }
.buy .price small { font: 600 1rem var(--sans); color: var(--muted); }
.offer b { display: block; }
.offer span { color: var(--muted); font-size: 0.95rem; }
.offer em { font-style: normal; color: var(--rose); font-weight: 700; white-space: nowrap; }
.others details > div { padding: 0 0 16px; }

/* ==========================================================================
   Sales pages
   ========================================================================== */
.sp-head { text-align: center; padding: 10px 0 6px; }
.sp-head h1 { font-size: 2.2rem; margin-bottom: 10px; }
.sp-head .lede { font: italic 500 1.2rem/1.55 var(--serif); color: var(--muted); max-width: 560px; margin: 0 auto 8px; }
.sp-image { border-radius: 16px; overflow: hidden; margin: 24px 0; aspect-ratio: 4 / 3; background: #EFE6DA; position: relative; }
.sp-image img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
.sp-image.locked img { filter: blur(16px) saturate(0.8); transform: scale(1.15); }
.sp-image .veil { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 600 1.15rem var(--serif); background: rgba(250, 246, 240, 0.35); text-align: center; padding: 20px; }
.note { display: flex; gap: 16px; align-items: flex-start; margin: 26px 0; }
.note img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.note p { font-size: 1.08rem; }
.receive { list-style: none; padding: 0; margin: 0; }
.receive li { padding: 10px 0 10px 30px; border-bottom: 1px solid var(--line); position: relative; }
.receive li:last-child { border-bottom: 0; }
.receive li::before { content: '✓'; position: absolute; left: 0; top: 10px; color: var(--green); font-weight: 700; }
.proof-slot { border: 2px dashed #D9C8B4; border-radius: 14px; padding: 18px; color: var(--muted); text-align: center; font-size: 0.95rem; margin: 20px 0; }
.buy { text-align: center; }
.buy .price { font: 700 2.2rem var(--serif); margin: 4px 0 14px; }
.moon { display: flex; gap: 14px; align-items: center; background: var(--ink); color: #E9E1EE; border-radius: 14px; padding: 16px 18px; margin: 18px 0; }
.moon .disc { width: 42px; height: 42px; border-radius: 50%; flex: none; background: radial-gradient(circle at 35% 35%, #FFF8E6, #E6D6B8); box-shadow: 0 0 18px rgba(255, 240, 200, 0.5); }
.moon .disc.new { background: radial-gradient(circle at 35% 35%, #4A3A56, #1A141F); box-shadow: inset 0 0 0 1px #6B5A78; }
.moon b { color: #fff; display: block; }
.steps-list { list-style: none; padding: 0; margin: 0; counter-reset: s; }
.steps-list li { position: relative; padding: 0 0 18px 44px; counter-increment: s; }
.steps-list li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; border: 1px solid #E3D3B0; color: var(--gold); display: grid; place-items: center; font: 700 0.95rem var(--serif); }
.steps-list li b { display: block; }
.steps-list li.you::before { background: var(--ink); color: #E2C37A; border-color: var(--ink); }

label { display: block; font-weight: 600; margin: 0 0 6px; }
input[type=email], input[type=date], input[type=text], textarea { width: 100%; padding: 14px; border: 1px solid var(--line); border-radius: 12px; font: inherit; background: #fff; margin-bottom: 14px; }
textarea { min-height: 110px; resize: vertical; }
.examples { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 16px; }
.examples button { background: var(--bg-alt); border: 1px solid var(--line); border-radius: 99px; padding: 6px 12px; cursor: pointer; font-size: 0.92rem; }
.choose { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.choose label { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; cursor: pointer; margin: 0; font-weight: 400; position: relative; }
.choose input { position: absolute; opacity: 0; }
.choose label:has(input:checked) { border: 2px solid var(--green); padding: 11px 13px; background: #F4FAF6; }
.choose b { display: block; }
.choose small { color: var(--muted); }

/* ==========================================================================
   Letters, match, profile, sign-in
   ========================================================================== */
.letters a { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.letters img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; }
.letters h3 { font: 700 1.05rem var(--sans); margin: 0 0 2px; }
.letters p { margin: 0; color: var(--muted); font-size: 0.95rem; }
.letters .when { margin-left: auto; color: var(--subtle); font-size: 0.85rem; white-space: nowrap; }
.letter-head { display: flex; gap: 12px; align-items: center; margin-bottom: 18px; }
.letter-head img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }
.letter-head p { margin: 0; color: var(--muted); font-size: 0.92rem; }
.letter p { font-size: 1.08rem; }
.ps { background: var(--gold-soft); border: 1px solid #E8D7A8; border-radius: 12px; padding: 14px 16px; }

.ring { width: 160px; height: 160px; border-radius: 50%; margin: 10px auto 16px; display: grid; place-items: center; background: conic-gradient(var(--green) calc(var(--p) * 1%), var(--bg-alt) 0); }
.ring > div { width: 128px; height: 128px; border-radius: 50%; background: #fff; display: grid; place-items: center; text-align: center; }
.ring b { font: 700 2.1rem var(--serif); display: block; line-height: 1; }
.ring small { color: var(--muted); }
.blurred { position: relative; overflow: hidden; }
.blurred p { filter: blur(5px); user-select: none; }
.blurred span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #fff; border: 1px solid var(--line); border-radius: 99px; padding: 6px 14px; font-weight: 700; white-space: nowrap; }
.nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; text-align: center; }
.nums div { background: var(--bg); border-radius: 12px; padding: 12px 4px; }
.nums b { display: block; font: 700 1.3rem var(--serif); }
.nums small { color: var(--muted); font-size: 0.82rem; }
.code { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 16px; }
.code input { text-align: center; font: 700 1.4rem var(--sans); padding: 12px 0; margin: 0; }
.signin { max-width: 440px; margin: 8vh auto 0; }
body.auth .tabs, body.auth .side, body.auth .ln-nav, body.auth .ln-bar .avatar { display: none !important; }

.toast { position: fixed; left: 50%; bottom: 80px; transform: translateX(-50%); background: var(--dark); color: #fff; border-radius: 12px; padding: 10px 16px; font-weight: 600; z-index: 50; max-width: 90%; text-align: center; }

/* ==========================================================================
   v4: the daily ritual, Cupid’s Circle locks, Your People, the path, letters
   ========================================================================== */
.ic { display: inline-block; font: 700 0.68rem var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: #8A6D0B; background: var(--gold-soft); border: 1px solid #E8D7A8; border-radius: 99px; padding: 3px 10px; white-space: nowrap; }
.ic::before { content: '✦ '; }
.ic.on { color: #fff; background: var(--ink); border-color: var(--ink); }

/* The ritual */
.ritual { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 22px; margin: 6px 0 16px; box-shadow: 0 14px 34px rgba(40, 35, 43, 0.06); }
.ritual-steps { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0 0 18px; counter-reset: r; }
.ritual-steps li { flex: 1; counter-increment: r; font: 600 0.82rem var(--sans); color: var(--subtle); border-top: 3px solid var(--bg-alt); padding-top: 8px; }
.ritual-steps li::before { content: counter(r) '. '; }
.ritual-steps li.now { color: var(--text); border-color: var(--gold); }
.ritual-steps li.done { color: var(--green); border-color: var(--green); }
.ritual-body { display: grid; grid-template-columns: 150px 1fr; gap: 24px; align-items: center; }
.ritual-body h2 { margin-bottom: 6px; }
.ritual-body p { color: var(--muted); }
@media (max-width: 560px) { .ritual-body { grid-template-columns: 1fr; justify-items: center; text-align: center; } }
.ritual-mini { display: flex; gap: 14px; align-items: center; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.ritual-mini .rose { transform: scale(0.5); margin: -30px; flex: none; }
.ritual-mini p { margin: 0; color: var(--muted); font-size: 0.98rem; }
.rose { position: relative; width: 120px; height: 120px; }
.rose i { position: absolute; left: 50%; top: 50%; width: 40px; height: 54px; margin: -54px 0 0 -20px; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; transform-origin: 50% 100%; transform: rotate(var(--r)); background: #F3E3DE; border: 1px solid #E8C9C0; }
.rose i.open { background: radial-gradient(ellipse at 50% 30%, #F2A6A0, #C9453F); border-color: #B23A35; }
.rose i.next { background: #FBD9D4; border: 2px dashed #C9453F; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.45; } }
.rose b { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: radial-gradient(circle, #E8C766, #B08A45); box-shadow: 0 0 0 3px #fff; }
.ritual.done { padding-bottom: 8px; }
.ritual .reading { border: 0; padding: 0; }

/* The meditation */
.breathe { position: fixed; inset: 0; z-index: 90; background: radial-gradient(circle at 50% 40%, #3A2A44, #15101A 70%); color: #F3ECE2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; }
.orb { width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 214, 200, 0.95), rgba(232, 165, 152, 0.55) 45%, rgba(232, 165, 152, 0) 70%); animation: breath 12s ease-in-out infinite; margin-bottom: 40px; }
@keyframes breath { 0% { transform: scale(0.6); } 33% { transform: scale(1.25); } 50% { transform: scale(1.25); } 100% { transform: scale(0.6); } }
.b-line { font: 600 1.6rem var(--serif); margin: 0 0 10px; }
.b-whisper { color: #CFC4D6; margin: 0 0 30px; min-height: 1.6em; }
.b-bar { width: 220px; height: 3px; background: rgba(255, 255, 255, 0.15); border-radius: 99px; overflow: hidden; }
.b-bar i { display: block; height: 100%; width: 0; background: #E2C37A; transition: width 0.25s linear; }
.b-skip { position: absolute; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); background: none; border: 0; color: #9A8FA3; cursor: pointer; text-decoration: underline; }

/* Locked and unlocked Cupid’s Circle layers */
.locked, .unlocked { border-radius: 16px; padding: 18px 20px; margin: 14px 0; }
.locked { background: var(--bg); border: 1px dashed #D9C8B4; }
.unlocked { background: var(--gold-soft); border: 1px solid #E8D7A8; }
.unlocked p { margin: 0; }
.locked-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px; }
.locked-head .kicker { margin: 0; }
.blur-text { filter: blur(5px); user-select: none; margin: 0 0 10px; }
.locked-cta { color: var(--rose); font-weight: 700; text-decoration: none; }
.locked-cta.block { display: block; text-align: center; margin: -6px 0 18px; }

/* Past messages */
.sec-row { display: flex; justify-content: space-between; align-items: baseline; }
.past { display: grid; grid-template-columns: 110px 1fr auto; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.past span { color: var(--subtle); font-size: 0.92rem; }
.past b { font: 600 1.05rem var(--serif); }
.past em { font-style: normal; color: var(--rose); font-weight: 700; font-size: 0.92rem; }
.past.lockd b { color: var(--subtle); }

/* Your People */
.person-card { display: flex; gap: 16px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; margin: 12px 0; text-decoration: none; }
.person-card:hover { box-shadow: 0 10px 24px rgba(40, 35, 43, 0.07); }
.person-card > div:nth-child(2) { flex: 1; }
.person-card h3 { margin: 0 0 2px; }
.person-card .go { color: var(--subtle); font-size: 1.4rem; }
.person-card.add { border-style: dashed; background: transparent; }
.type { display: inline-block; font: 700 0.66rem var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); background: var(--bg-alt); border-radius: 99px; padding: 3px 9px; vertical-align: 3px; margin-left: 4px; }
.choose.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 480px) { .choose.four { grid-template-columns: 1fr 1fr; } }
.person-hero { display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center; margin: 6px 0 10px; }
@media (max-width: 560px) { .person-hero { grid-template-columns: 1fr; text-align: center; } }
.ring.big { width: 170px; height: 170px; margin: 0 auto; }
.ring.big > div { width: 136px; height: 136px; }
.meters { display: grid; gap: 14px; }
.meter-top { display: flex; justify-content: space-between; margin-bottom: 5px; }
.meter-top span { color: var(--muted); font-weight: 600; }
.meter { height: 8px; border-radius: 99px; background: var(--bg-alt); overflow: hidden; }
.meter i { display: block; height: 100%; background: linear-gradient(90deg, #E8A598, #C9453F); border-radius: 99px; }

/* Your Path */
.sits { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0 8px; }
@media (max-width: 560px) { .sits { grid-template-columns: 1fr; } }
.sit { display: flex; flex-direction: column; justify-content: flex-end; min-height: 130px; border-radius: 16px; padding: 18px; text-decoration: none; color: #fff; position: relative; overflow: hidden; border: 3px solid transparent; }
.sit b { font: 700 1.2rem/1.25 var(--serif); margin-bottom: 4px; }
.sit span { font-size: 0.92rem; opacity: 0.85; }
.sit-looking { background: linear-gradient(150deg, #6B4E7E, #2B2231); }
.sit-back { background: linear-gradient(150deg, #9A4A4A, #3A1E22); }
.sit-unsure { background: linear-gradient(150deg, #4E6B7E, #1F2A33); }
.sit-healing { background: linear-gradient(150deg, #5E7E6B, #1F332A); }
.sit.on { border-color: #E2C37A; box-shadow: 0 12px 30px rgba(40, 35, 43, 0.25); }
.sit.on::after { content: 'Your path'; position: absolute; top: 12px; right: 12px; font: 700 0.66rem var(--sans); letter-spacing: 0.12em; text-transform: uppercase; background: #E2C37A; color: #3A2E00; border-radius: 99px; padding: 3px 9px; }
.your-path { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 22px; margin-top: 20px; }
.psteps { list-style: none; padding: 0; margin: 10px 0 0; }
.pstep { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; padding: 12px 0; border-top: 1px solid var(--line); }
.pstep:first-child { border-top: 0; }
.pstep .num { position: static; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; font: 700 1rem var(--serif); color: var(--subtle); }
.pstep.now .num { background: var(--ink); color: #E2C37A; border-color: var(--ink); }
.pstep.done .num { background: var(--green); color: #fff; border-color: var(--green); }
.pstep a { display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; text-decoration: none; }
.pstep a b { font: 700 1.1rem var(--serif); }
.pstep a span { grid-column: 1; color: var(--muted); font-size: 0.95rem; }
.pstep a em { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-style: normal; color: var(--rose); font-weight: 700; white-space: nowrap; }
.pstep.now a em { color: #fff; background: var(--green); border-radius: 99px; padding: 8px 14px; }
.shelf { margin: 22px 0; }
.shelf h3 { margin: 0; }
.catalog { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 10px; }
@media (max-width: 560px) { .catalog { grid-template-columns: 1fr; } }
.catalog a { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; text-decoration: none; display: flex; flex-direction: column; }
.catalog a:hover { border-color: var(--gold); }
.catalog b { font: 700 1.02rem var(--serif); }
.catalog span { color: var(--muted); font-size: 0.9rem; flex: 1; margin: 2px 0 8px; }
.catalog em { font-style: normal; font-weight: 700; color: var(--rose); }

/* Letters on paper */
.paper { background: #FFFDF7; border: 1px solid #EADFC9; border-radius: 6px; padding: 36px 34px; margin: 10px 0 30px; box-shadow: 0 1px 0 #EADFC9, 0 18px 40px rgba(40, 35, 43, 0.08); font: 1.1rem/1.75 var(--serif); }
.paper h2 { font-size: 1.6rem; margin-bottom: 18px; }
.paper p { margin-bottom: 1.1rem; }
.paper-date { color: var(--subtle); font: 0.92rem var(--sans); text-align: right; }
.sig.big { font-size: 1.9rem; margin: -6px 0 22px; }
@media (max-width: 560px) { .paper { padding: 26px 20px; } }

/* Cupid’s Circle page, thanks */
.circle-hero { text-align: center; background: linear-gradient(160deg, #2B2231, #5A3E6E); color: #E9E1EE; border-radius: 18px; padding: 34px 22px; margin: 6px 0 20px; }
.circle-hero h1 { color: #fff; margin: 14px 0 8px; }
.circle-hero p { color: #CFC4D6; max-width: 480px; margin: 0 auto 18px; }
.circle-hero .btn { max-width: 380px; margin: 0 auto; }
.compare { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.compare th, .compare td { padding: 11px 8px; border-bottom: 1px solid var(--line); text-align: center; }
.compare th:first-child, .compare td:first-child { text-align: left; }
.compare td.y { color: var(--green); font-weight: 700; }
.compare td.n { color: var(--subtle); }
.ic-welcome { margin: 12px 0 0; }
.spread3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.spread3 b { display: block; font: 700 1rem var(--serif); margin-bottom: 4px; }
.spread3 p { font-size: 0.95rem; }
@media (max-width: 560px) { .spread3 { grid-template-columns: 1fr; } }

/* ==========================================================================
   v5: calendar strip, the petal reel, the garden, the journal, better locks
   ========================================================================== */
/* The week at the top */
.calstrip { margin: 22px 0 22px; }
.cs-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
@media (max-width: 700px) { .cs-row { display: flex; overflow-x: auto; margin: 12px -20px 0; padding: 2px 20px 8px; scroll-snap-type: x mandatory; } .cs { flex: 0 0 34%; scroll-snap-align: start; } }
.cs { position: relative; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 10px; text-decoration: none; min-height: 150px; }
.cs-d { font: 700 0.7rem var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--subtle); }
.cs > b { font: 700 1.6rem/1.2 var(--serif); }
.cs .star { position: absolute; top: 10px; right: 10px; font-style: normal; color: var(--gold); font-size: 1.1rem; text-shadow: 0 0 10px rgba(201,160,50,0.5); }
.cs .dotline { display: block; width: 18px; height: 2px; background: var(--line); margin: 4px 0 6px; }
.cs.strong .dotline { display: none; }
.cs-t { font-size: 0.86rem; line-height: 1.35; color: var(--text); margin-top: 6px; }
.cs.today { background: var(--ink); border-color: var(--ink); }
.cs.today .cs-d { color: #E2C37A; } .cs.today > b, .cs.today .cs-t { color: #fff; }
.cs.strong:not(.lk) { border-color: #E3C77E; box-shadow: inset 0 0 0 1px #F1DFA6; }
.cs.lk { background: linear-gradient(180deg, #FFFDF8, #F6EFE3); }
.cs.lk::after { content: ''; position: absolute; bottom: 10px; right: 10px; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #fff 22%, transparent 24%), var(--gold); opacity: 0.7; }
.blurw { filter: blur(4px); user-select: none; }
.cs-hint { margin: 10px 0 0; font-size: 0.95rem; color: var(--muted); }

/* The reel, the gift */
.reel { display: flex; align-items: center; gap: 12px; justify-content: center; border: 2px solid var(--gold); border-radius: 14px; padding: 14px; margin: 4px 0 14px; background: #FFFDF8; font: 700 1.15rem var(--serif); min-height: 64px; }
.reel span, .petal-dot { display: inline-block; width: 30px; height: 40px; flex: none; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: radial-gradient(ellipse at 50% 30%, #fff 0%, var(--c) 55%); box-shadow: 0 3px 8px rgba(0,0,0,0.15); }
.reel.landed { animation: land 0.5s ease; }
.reel.landed.rare { background: linear-gradient(180deg, #FFF9E6, #F6E3AE); box-shadow: 0 0 0 6px rgba(201,160,50,0.2), 0 0 40px rgba(201,160,50,0.45); }
@keyframes land { 0% { transform: scale(0.9); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
.gift { display: flex; gap: 16px; align-items: flex-start; border-radius: 14px; padding: 18px; margin-bottom: 20px; background: #FFFDF8; border: 1px solid #EADFC9; }
.gift .petal-dot { width: 40px; height: 54px; }
.gift h3 { margin: 0 0 6px; }
.gift.uncommon { background: linear-gradient(180deg, #FBF6FF, #F3EAF8); border-color: #DCCBE8; }
.gift.rare { background: linear-gradient(180deg, #FFF9E6, #F6E6B8); border-color: #C9A032; box-shadow: 0 12px 34px rgba(176,138,69,0.3); }
.near { font: italic 600 1rem var(--serif); color: var(--rose); }

/* Keep going: the mini garden */
.tools { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 560px) { .tools { grid-template-columns: 1fr; } }
.mini-garden { display: flex; gap: 5px; margin-top: 4px; }
.mini-garden i { width: 14px; height: 19px; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: var(--c); }

/* A better lock */
.locked { position: relative; background: linear-gradient(180deg, #FFFDF8, #F7F0E4); border: 1px solid #E8D7A8; border-radius: 16px; padding: 18px 20px 20px; margin: 14px 0; overflow: hidden; }
.locked::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 100% 0, rgba(226,195,122,0.25), transparent 45%); pointer-events: none; }
.locked-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.locked-head .ic { margin-left: auto; }
.keyhole { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--ink); position: relative; }
.keyhole::after { content: ''; position: absolute; left: 50%; top: 6px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #E2C37A; box-shadow: 0 5px 0 -1px #E2C37A; }
.lk-text { font: 600 1.05rem/1.55 var(--serif); margin: 0 0 14px; }
.lk-fade { filter: blur(4.5px); user-select: none; font-weight: 400; }
.lk-btn { display: inline-block; width: auto; padding: 11px 20px; font-size: 0.98rem; }
.chakra-link { display: block; text-decoration: none; }

/* The calendar list */
.cal-list { padding-top: 8px; }
.cal-line { display: grid; grid-template-columns: 120px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.cal-line span { color: var(--subtle); font-size: 0.92rem; }
.cal-line p { margin: 0; font: 600 1.02rem var(--serif); }
.cal.hint { position: relative; }
.cal .star { font-style: normal; color: var(--gold); position: absolute; top: 2px; right: 5px; font-size: 0.8rem; filter: none; }
.cal.locked { filter: none; color: var(--subtle); background: repeating-linear-gradient(135deg, #F7F1E7 0 6px, #F2EADD 6px 12px); }
.star { color: var(--gold); }

/* The garden */
.garden { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 20px 0; }
.g-cell { text-align: center; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px 10px; }
.g-cell .petal-dot.big { width: 44px; height: 60px; margin-bottom: 8px; }
.g-cell b { display: block; font: 700 0.98rem var(--serif); }
.g-cell small { color: var(--muted); }
.g-cell.rare { border-color: #E3C77E; }
.g-cell.missing b { color: var(--subtle); }

/* The journal */
.signs { margin-top: 10px; }
.sign-row { display: grid; grid-template-columns: 60px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.sign-row span { color: var(--subtle); font-size: 0.9rem; }
.sign-row p { margin: 4px 0 0; color: var(--muted); }

/* The 12-second breath */
.orb { animation-duration: 6s; }
.cal-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal { min-width: 0; aspect-ratio: auto; height: 58px; position: relative; }

/* Members: Cupid’s Circle home, the week, the chakra steps */
.ic-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 0 0 16px; }
@media (max-width: 560px) { .ic-grid { grid-template-columns: 1fr; } }
.ic-grid a { background: var(--card); border: 1px solid #E8D7A8; border-radius: 14px; padding: 16px; text-decoration: none; display: flex; flex-direction: column; }
.ic-grid a:hover { box-shadow: 0 10px 24px rgba(176,138,69,0.15); }
.ic-grid b { font: 700 1.08rem var(--serif); margin-bottom: 4px; }
.ic-grid span { color: var(--muted); font-size: 0.95rem; flex: 1; margin-bottom: 8px; }
.ic-grid em { font-style: normal; color: var(--rose); font-weight: 700; font-size: 0.92rem; }
.week { list-style: none; padding: 0; margin: 4px 0 0; }
.week li { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 8px 0; border-top: 1px solid #EFE2BF; font: 600 1rem var(--serif); }
.week li:first-child { border-top: 0; }
.week li span { font: 600 0.9rem var(--sans); color: var(--muted); }
.week .star { font-style: normal; }
.chakra-steps { margin: 0 0 10px; padding-left: 20px; }
.chakra-steps li { margin: 6px 0; }
.ln-portal .ic { font-size: 0.72rem; }

/* The love calendar: four days, stacked, with room to breathe */
.calstrip { margin: 34px 0 10px; }
.cd-list { margin-top: 14px; display: grid; gap: 10px; }
.cd { position: relative; display: grid; grid-template-columns: 96px 1fr auto; gap: 18px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; text-decoration: none; }
.cd:hover { border-color: var(--gold); }
.cd-date span { display: block; font: 700 0.72rem var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--subtle); }
.cd-date b { font: 700 1.9rem/1.1 var(--serif); }
.cd p { margin: 0; font: 600 1.12rem/1.4 var(--serif); }
.cd .star { font-style: normal; color: var(--gold); font-size: 1.2rem; text-shadow: 0 0 10px rgba(201,160,50,0.45); }
.cd.today { background: var(--ink); border-color: var(--ink); }
.cd.today .cd-date span { color: #E2C37A; }
.cd.today b, .cd.today p { color: #fff; }
.cd.lk { background: linear-gradient(180deg, #FFFDF8, #F6EFE3); }
.cd.lk .ic { margin-left: 8px; }
.cd.lk .star + .ic { margin-left: 0; }
@media (max-width: 480px) { .cd { grid-template-columns: 70px 1fr; padding: 16px; } .cd .star, .cd .ic { position: absolute; top: 12px; right: 12px; } .cd.lk .star { right: 118px; } }
@media (max-width: 480px) { .cd.lk { padding-top: 40px; } .cd.lk .star { right: 12px; top: 40px; } }

/* ==========================================================================
   v6: the heart rose and the streak
   ========================================================================== */
.ln-streak { color: #F6F1F7; text-decoration: none; font: 700 0.95rem var(--sans); background: rgba(201, 69, 63, 0.35); border: 1px solid rgba(232, 165, 152, 0.5); border-radius: 99px; padding: 4px 11px; white-space: nowrap; }
.ln-streak:hover { background: rgba(201, 69, 63, 0.55); }
.rose-wrap { position: relative; display: block; text-align: center; text-decoration: none; }
.streak-pill { position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); background: var(--ink); color: #fff; border-radius: 99px; padding: 3px 11px; font: 700 0.82rem var(--sans); white-space: nowrap; }
.heart-rose { display: block; margin: 0 auto; }
.rose-line { display: flex; gap: 16px; align-items: center; text-decoration: none; padding: 4px 0 16px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.rose-line .heart-rose { width: 86px; height: 86px; margin: 0; flex: none; }
.rose-line > div { flex: 1; }
.rose-line h3 { margin: 0 0 6px; }
.grow { height: 8px; border-radius: 99px; background: var(--bg-alt); overflow: hidden; margin: 6px 0 6px; }
.grow i { display: block; height: 100%; background: linear-gradient(90deg, #8CC08F, #4E8A56); border-radius: 99px; }
.rose-hero { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; background: linear-gradient(160deg, #FFF6F3, #FBE6E1); border: 1px solid #F1D3CC; border-radius: 18px; padding: 24px; margin-bottom: 18px; }
@media (max-width: 560px) { .rose-hero { grid-template-columns: 1fr; text-align: center; } }
.rose-hero h1 { margin-bottom: 4px; }
.big-streak { font: 700 1.4rem var(--serif); color: #C9453F; margin: 0 0 6px; }
.stages { list-style: none; padding: 0; margin: 0; }
.stages li { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.stages li:first-child { border-top: 0; }
.stages .heart-rose { width: 60px; height: 60px; }
.stages b { display: block; font: 700 1.05rem var(--serif); }
.stages span { color: var(--muted); font-size: 0.92rem; }
.stages em { font-style: normal; font-weight: 700; font-size: 0.88rem; color: var(--muted); }
.stages li.done em { color: var(--green); }
.stages li.now { background: var(--gold-soft); border-radius: 12px; padding-left: 8px; padding-right: 10px; }
.stages li.now em { color: #8A6D0B; }
.stages li.next em { color: var(--rose); }
.stages li.later { opacity: 0.45; }
.celebrate .burst { animation: grow-in 0.9s cubic-bezier(.2, .9, .3, 1.3); margin-bottom: 18px; filter: drop-shadow(0 0 30px rgba(226, 195, 122, 0.45)); }
@keyframes grow-in { from { transform: scale(0.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.celebrate .b-whisper { max-width: 420px; }
@media (max-width: 480px) { .ln-portal { display: none; } }
.hrt { color: #C9453F; }

/* ==========================================================================
   v7: the living rose, Love Sky, the calendar in the right column
   ========================================================================== */
.desk-only { display: none; }
@media (min-width: 960px) { .desk-only { display: block; } .mob-only { display: none; } }

/* The scene: her rose under her own sky */
.scene { border-radius: 22px; padding: 20px 22px 24px; margin: 4px 0 18px; border: 1px solid var(--line); background: var(--card); box-shadow: 0 16px 40px rgba(40, 35, 43, 0.08); }
.scene-grid { display: grid; grid-template-columns: 260px 1fr; gap: 26px; align-items: center; }
@media (max-width: 640px) { .scene-grid { grid-template-columns: 1fr; gap: 16px; } .scene-info { text-align: center; } }
.rose-stage { position: relative; height: 270px; border-radius: 18px; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; }
.sky-dawn .rose-stage { background: linear-gradient(180deg, #F9C9A8 0%, #F8DCCB 45%, #FBEDE3 100%); }
.sky-day .rose-stage { background: linear-gradient(180deg, #BFDDF0 0%, #E1EEF5 55%, #F7F3EC 100%); }
.sky-dusk .rose-stage { background: linear-gradient(180deg, #6B4E7E 0%, #D98E8A 55%, #F6D2BE 100%); }
.sky-night .rose-stage { background: linear-gradient(180deg, #15101F 0%, #2B2240 60%, #3F3150 100%); }
.stars { position: absolute; inset: 0; opacity: 0; background-image: radial-gradient(1.5px 1.5px at 20% 20%, #fff, transparent), radial-gradient(1px 1px at 70% 15%, #fff, transparent), radial-gradient(1.5px 1.5px at 45% 35%, #fff, transparent), radial-gradient(1px 1px at 85% 40%, #fff, transparent), radial-gradient(1px 1px at 10% 50%, #fff, transparent), radial-gradient(1.5px 1.5px at 60% 55%, #fff, transparent); animation: twinkle 3s ease-in-out infinite alternate; }
.sky-night .stars, .sky-dusk .stars { opacity: 0.9; }
.sky-dusk .stars { opacity: 0.35; }
@keyframes twinkle { to { filter: brightness(0.5); } }
.glowball { position: absolute; left: 50%; top: 42%; width: 190px; height: 190px; margin: -95px 0 0 -95px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 214, 170, 0.75), rgba(255, 214, 170, 0) 65%); opacity: 0; transition: opacity 1.2s ease; }
.watered .glowball { opacity: 1; animation: breathe-glow 4s ease-in-out infinite; }
@keyframes breathe-glow { 50% { transform: scale(1.12); } }
.rose-stage .heart-rose { position: relative; z-index: 1; width: 230px; height: 230px; transform-origin: 50% 90%; animation: sway 5s ease-in-out infinite; transition: filter 1.2s ease, transform 1.2s ease; }
@keyframes sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
.thirsty .rose-stage .heart-rose { filter: saturate(0.55) brightness(0.95); animation: droop 5s ease-in-out infinite; }
@keyframes droop { 0%, 100% { transform: rotate(-5deg) translateY(4px); } 50% { transform: rotate(-3deg) translateY(4px); } }
.watered .rose-stage .heart-rose { filter: drop-shadow(0 0 14px rgba(255, 200, 150, 0.8)); }
.sparkles { position: absolute; inset: 0; pointer-events: none; }
.sparkles i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #FFF3C4; box-shadow: 0 0 8px #FFD27A; opacity: 0; }
.watered .sparkles i { animation: rise 3.2s ease-in infinite; }
.sparkles i:nth-child(1) { left: 30%; bottom: 30%; animation-delay: 0s; } .sparkles i:nth-child(2) { left: 62%; bottom: 40%; animation-delay: .6s; }
.sparkles i:nth-child(3) { left: 45%; bottom: 55%; animation-delay: 1.2s; } .sparkles i:nth-child(4) { left: 70%; bottom: 25%; animation-delay: 1.8s; }
.sparkles i:nth-child(5) { left: 38%; bottom: 45%; animation-delay: 2.3s; } .sparkles i:nth-child(6) { left: 55%; bottom: 30%; animation-delay: 2.8s; }
@keyframes rise { 0% { opacity: 0; transform: translateY(0) scale(.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-90px) scale(1); } }
.scene-info h2 { font-size: 1.6rem; margin-bottom: 6px; }
.scene-info p { color: var(--muted); }
.streak-row { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.streak-row .grow { margin: 8px 0 6px; }

/* Watering */
.water-fx { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.water-fx .can { position: absolute; top: 24px; left: 50%; margin-left: -12px; transform-origin: 20% 80%; animation: tip 8s ease-in-out forwards; }
@keyframes tip { 0% { transform: translateX(-60px) rotate(0); opacity: 0; } 10% { opacity: 1; transform: translateX(-30px) rotate(-8deg); } 20%, 85% { transform: translateX(-30px) rotate(28deg); } 100% { transform: translateX(-60px) rotate(0); opacity: 0; } }
.drops i { position: absolute; top: 92px; width: 5px; height: 11px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #8FC4E8; opacity: 0; animation: drop 1s linear infinite; animation-delay: calc(var(--k) * .17s + 1.4s); }
.drops i:nth-child(1) { left: calc(50% + 34px); --k: 0; } .drops i:nth-child(2) { left: calc(50% + 40px); --k: 1; } .drops i:nth-child(3) { left: calc(50% + 30px); --k: 2; }
.drops i:nth-child(4) { left: calc(50% + 44px); --k: 3; } .drops i:nth-child(5) { left: calc(50% + 36px); --k: 4; } .drops i:nth-child(6) { left: calc(50% + 42px); --k: 5; }
@keyframes drop { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(120px); } }
.water-fx .breath { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font: 600 1.1rem var(--serif); color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,0.45); margin: 0; }
.pouring .rose-stage .heart-rose { animation: sway 5s ease-in-out infinite; filter: saturate(0.8); transition: filter 6s ease; }

/* Love Sky, her cycle ring, Do / Don't */
.lovesky { background: linear-gradient(170deg, #FFFFFF, #F8F2FB); border: 1px solid #E6DCEB; border-radius: 18px; padding: 20px; margin: 18px 0; }
.ls-top { display: flex; gap: 16px; align-items: center; }
.ls-top h3 { margin: 0 0 4px; }
.ls-top p { margin: 0; color: var(--muted); }
.moon-disc { width: 58px; height: 58px; flex: none; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFF8E6, #E6D6B8); box-shadow: 0 0 20px rgba(230, 214, 184, 0.9), inset calc(-58px * (1 - var(--lit) / 100%)) 0 0 0 rgba(43, 34, 49, 0.55); }
.cycle2 { display: flex; gap: 16px; align-items: center; margin: 18px 0; padding: 16px 0; border-top: 1px solid #EDE3F1; border-bottom: 1px solid #EDE3F1; }
.cycle2 h3 { margin: 0 0 4px; }
.cycle2 p { margin: 0 0 4px; color: var(--muted); }
.cring { flex: none; }
.cr-n { font: 700 20px var(--serif); fill: var(--text); }
.cr-s { font: 600 10px var(--sans); fill: var(--subtle); }
.dodont2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.dodont2 b { display: block; font: 700 0.76rem var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); margin-bottom: 4px; }
.dodont2 div + div b { color: var(--rose); }
.dodont2 span { display: block; padding: 7px 0; border-bottom: 1px solid #EDE3F1; font: 600 1rem/1.4 var(--serif); }
@media (max-width: 480px) { .dodont2 { grid-template-columns: 1fr; gap: 14px; } }

/* The calendar timeline (right column on desktop, a card on the phone) */
.calrail { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px; margin-bottom: 18px; }
.tl-list { position: relative; margin-top: 12px; }
.tl-list::before { content: ''; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: var(--bg-alt); }
.tl { position: relative; display: grid; grid-template-columns: 14px 1fr; gap: 14px; padding: 9px 0; text-decoration: none; }
.tl-dot { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--line); margin-top: 4px; position: relative; z-index: 1; }
.tl.today .tl-dot { background: var(--ink); border-color: var(--ink); box-shadow: 0 0 0 4px rgba(176,138,69,0.2); }
.tl.strong .tl-dot { border-color: var(--gold); background: #FFF3C4; box-shadow: 0 0 10px rgba(201,160,50,0.6); animation: pulse-star 2.4s ease-in-out infinite; }
@keyframes pulse-star { 50% { box-shadow: 0 0 2px rgba(201,160,50,0.2); } }
.tl-d { font: 700 0.72rem var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--subtle); }
.tl.today .tl-d { color: var(--text); }
.tl p { margin: 2px 0 0; font: 600 1rem/1.35 var(--serif); }
.tl .star { font-style: normal; color: var(--gold); }
.tl.lk p { color: var(--muted); }
.tl-hint { display: block; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--gold-soft); border: 1px solid #E8D7A8; text-decoration: none; font-size: 0.92rem; }
.link.small { font-size: 0.9rem; }
@media (max-width: 480px) { .ln-bar { padding-left: 14px; padding-right: 14px; gap: 8px; } .ln-logo { font-size: 0.95rem; } .ln-right { gap: 8px; } .ln-streak { padding: 3px 9px; font-size: 0.88rem; } }

/* ==========================================================================
   v8: the journey map, weekly quests, the Love Angel Journal
   ========================================================================== */
.chips-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 20px; }
.chipbtn { text-decoration: none; font-weight: 600; font-size: 0.92rem; padding: 7px 14px; border-radius: 99px; border: 1px solid var(--line); background: #fff; color: var(--muted); }
.chipbtn.on { background: var(--ink); border-color: var(--ink); color: #fff; }

.quests { background: linear-gradient(170deg, #FFFFFF, #FFF9EC); border: 1px solid #E8D7A8; border-radius: 18px; padding: 18px 20px; margin-bottom: 22px; }
.quest { display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid #F1E6CB; }
.quest:first-of-type { border-top: 0; margin-top: 8px; }
.q-check { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #E3D3B0; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 0.8rem; }
.quest.ok .q-check { background: var(--green); border-color: var(--green); }
.quest b { font-weight: 600; font-size: 0.98rem; }
.quest .grow { margin: 6px 0 0; height: 6px; }
.quest .grow i { background: linear-gradient(90deg, #E2C37A, #B08A45); }
.quest.ok .grow i { background: var(--green); }
.q-n { font-weight: 700; color: var(--muted); font-size: 0.9rem; }
.q-reward { margin: 10px 0 0; font-size: 0.92rem; color: var(--muted); }

/* The winding road */
.journey { position: relative; margin: 10px auto 0; max-width: 560px; }
.road { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.road-bg { fill: none; stroke: #EADFCF; stroke-width: 14; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.road-done { fill: none; stroke: url(#none); stroke: #E2C37A; stroke-width: 14; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.st { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; text-decoration: none; z-index: 1; width: 190px; }
.st-node { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; font-weight: 700; color: #fff; box-shadow: 0 6px 0 rgba(0,0,0,0.12), 0 10px 24px rgba(40,35,43,0.15); transition: transform .2s ease; }
.st:hover .st-node { transform: translateY(-3px); }
.st.free .st-node { background: #E07A73; }
.st.paid .st-node { background: var(--ink); color: #E2C37A; }
.st.done .st-node { background: var(--green); color: #fff; }
.st.ahead .st-node { background: #EFE7DC; color: #C9BBA8; box-shadow: 0 5px 0 #E0D5C6; }
.st.now .st-node { width: 76px; height: 76px; font-size: 1.8rem; animation: bob 2.2s ease-in-out infinite; box-shadow: 0 0 0 8px rgba(226,195,122,0.35), 0 6px 0 rgba(0,0,0,0.15), 0 14px 30px rgba(40,35,43,0.2); }
@keyframes bob { 50% { transform: translateY(-5px); } }
.st-label { text-align: center; margin-top: 8px; background: rgba(250,246,240,0.92); border-radius: 10px; padding: 2px 8px; }
.st-label b { display: block; font: 700 0.98rem/1.25 var(--serif); }
.st-label small { color: var(--muted); font-weight: 600; font-size: 0.78rem; }
.st.ahead .st-label b { color: var(--subtle); }
.st-card { display: block; margin-top: 8px; width: 230px; background: #fff; border: 2px solid #E2C37A; border-radius: 14px; padding: 10px 12px; text-align: center; box-shadow: 0 12px 28px rgba(40,35,43,0.14); }
.st-card span { display: block; color: var(--muted); font-size: 0.88rem; line-height: 1.4; }
.st-card em { display: inline-block; margin-top: 8px; font-style: normal; font-weight: 700; color: #fff; background: var(--green); border-radius: 99px; padding: 6px 14px; font-size: 0.9rem; }
.st.now { z-index: 3; }
.j-end { position: absolute; left: 50%; transform: translateX(-50%); font: italic 600 1.05rem var(--serif); color: var(--gold); white-space: nowrap; }

/* The journal */
.journal, .journal-mini { position: relative; }
.journal::before { content: ''; position: absolute; left: 19px; top: 10px; bottom: 10px; width: 2px; background: var(--bg-alt); }
.jr { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 14px 0; text-decoration: none; border-bottom: 1px solid var(--line); }
.jr-rail { display: flex; justify-content: center; padding-top: 2px; position: relative; z-index: 1; }
.jr .petal-dot { width: 24px; height: 32px; }
.jr-date { font: 700 0.74rem var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--subtle); }
.jr h3 { margin: 3px 0 4px; }
.jr-ex { margin: 0; color: var(--muted); font-size: 0.98rem; }
.jr-sign { margin: 6px 0 0; font-size: 0.92rem; color: var(--rose); }
.rare-mini { background: linear-gradient(90deg, #C9A032, #E8C766); color: #3A2E00; border-radius: 99px; padding: 1px 7px; font-size: 0.66rem; letter-spacing: 0.08em; margin-left: 4px; }
.jr.lk h3 { color: var(--subtle); }
.jr.lk .ic { margin-top: 6px; }
/* stations: node on the road, label beside it */
.st { flex-direction: row; align-items: flex-start; width: auto; gap: 12px; transform: translate(-31px, -31px); }
.st.now { transform: translate(-38px, -38px); }
.st.flip { flex-direction: row-reverse; transform: translate(calc(-100% + 31px), -31px); }
.st.flip.now { transform: translate(calc(-100% + 38px), -38px); }
.st.flip .st-label { text-align: right; }
.st-node { flex: none; }
.st-label { background: none; padding: 0; margin-top: 10px; text-align: left; width: 180px; }
.st.now .st-label { margin-top: 14px; }
.st-card { width: 210px; text-align: left; margin-top: 10px; }
.st.flip .st-card { margin-left: auto; text-align: right; }
.road-done { stroke: #E2C37A; }
@media (max-width: 480px) { .st-label { width: 130px; } .st-card { width: 160px; } }
.st-card em { white-space: nowrap; } @media (max-width: 480px) { .st-card em { font-size: 0.82rem; padding: 5px 11px; } }

/* ==========================================================================
   v9: the new menu, the Journal (My Heart · Messages · Signs), Tools
   ========================================================================== */
.tabs { grid-template-columns: repeat(5, 1fr); }
.tabs a { font-size: 0.82rem; padding: 14px 0 13px; }
.ln-letters { position: relative; color: #E9E1EE; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; text-decoration: none; }
.ln-letters:hover { background: rgba(255,255,255,0.08); }
.ln-letters i { position: absolute; top: 5px; right: 4px; width: 9px; height: 9px; border-radius: 50%; background: #D8443A; box-shadow: 0 0 0 2px var(--dark); }

.jtabs { display: flex; gap: 6px; background: var(--bg-alt); border-radius: 99px; padding: 4px; margin: 10px 0 22px; width: max-content; max-width: 100%; }
.jtabs a { text-decoration: none; font-weight: 600; font-size: 0.95rem; padding: 8px 18px; border-radius: 99px; color: var(--muted); }
.jtabs a.on { background: #fff; color: var(--text); box-shadow: 0 2px 8px rgba(40,35,43,0.08); }

.week-moods { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; margin-bottom: 16px; }
.wk-row { display: flex; justify-content: space-between; margin-top: 10px; }
.wk { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.wk i { width: 30px; height: 30px; border-radius: 50%; background: var(--c); }
.wk span { font-size: 0.8rem; color: var(--subtle); font-weight: 600; }
.heart-form .prompt { font: italic 600 1.4rem/1.4 var(--serif); margin: 2px 0 18px; }
.moods { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.moods label { margin: 0; cursor: pointer; }
.moods input { position: absolute; opacity: 0; }
.moods span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 99px; border: 1px solid var(--line); background: #fff; font-weight: 600; font-size: 0.95rem; }
.moods span::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--c); }
.moods input:checked + span { border: 2px solid var(--text); padding: 7px 13px; }
.heart-form textarea { min-height: 140px; font: 1.05rem/1.6 var(--serif); }
.heart-entry { background: #FFFDF7; border: 1px solid #EADFC9; border-radius: 14px; padding: 18px 20px; margin: 14px 0; }
.he-top { display: flex; justify-content: space-between; align-items: center; }
.mood-pill { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 0.82rem; }
.mood-pill::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.he-q { font: italic 600 1rem var(--serif); color: var(--muted); margin: 10px 0 4px; }
.he-text { font: 1.08rem/1.65 var(--serif); white-space: pre-wrap; }
.he-reply { display: flex; gap: 12px; align-items: flex-start; background: var(--gold-soft); border-radius: 12px; padding: 12px 14px; margin-top: 10px; }
.he-reply img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; }
.he-reply p { margin: 0 0 4px; font-size: 0.98rem; }

.toolgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
@media (max-width: 760px) { .toolgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .toolgrid { grid-template-columns: 1fr; } }
.tg { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.tg:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(40,35,43,0.1); }
.tg-art { height: 110px; display: block; position: relative; }
.tg b { font: 700 1.12rem var(--serif); margin: 14px 16px 4px; }
.tg > span:not(.tg-art) { color: var(--muted); font-size: 0.93rem; margin: 0 16px; flex: 1; }
.tg em { font-style: normal; font-weight: 700; color: var(--green); font-size: 0.9rem; margin: 10px 16px 16px; }
.tg-oracle .tg-art { background: radial-gradient(circle at 50% 60%, #E2C37A 0 18px, transparent 19px), radial-gradient(circle at 50% 60%, rgba(226,195,122,0.35) 0 40px, transparent 41px), linear-gradient(160deg, #2B2231, #5A3E6E); }
.tg-cal .tg-art { background: repeating-linear-gradient(90deg, transparent 0 34px, rgba(255,255,255,0.5) 34px 36px), linear-gradient(160deg, #F6E3AE, #E8C9A0); }
.tg-rose .tg-art { background: radial-gradient(circle at 50% 50%, #F2A6A0 0 16px, #C9453F 17px 26px, transparent 27px), linear-gradient(180deg, #FBE6E1, #F6D2BE); }
.tg-garden .tg-art { background: radial-gradient(ellipse 9px 13px at 30% 50%, #E07A73 98%, transparent), radial-gradient(ellipse 9px 13px at 50% 50%, #9C6FB0 98%, transparent), radial-gradient(ellipse 9px 13px at 70% 50%, #C9A032 98%, transparent), linear-gradient(160deg, #EEF5EC, #DCEBD8); }
.tg-initial .tg-art { background: linear-gradient(160deg, #FFF9E8, #F3E7C8); }
.tg-initial .tg-art::after { content: '?'; position: absolute; inset: 0; display: grid; place-items: center; font: 700 3.4rem var(--serif); color: var(--gold); }
.tg-chakra .tg-art { background: radial-gradient(circle at 50% 50%, #8CC08F 0 10px, rgba(140,192,143,0.4) 11px 26px, rgba(140,192,143,0.15) 27px 42px, transparent 43px), linear-gradient(160deg, #EAF4EA, #D6E9D7); }

/* ==========================================================================
   v10: trial, quests on top, the new Journal, Readings, her soulmate card
   ========================================================================== */
.trial { display: flex; align-items: center; gap: 12px; background: linear-gradient(90deg, #2B2231, #4A3558); color: #E9E1EE; border-radius: 14px; padding: 12px 16px; text-decoration: none; margin: 14px 0 12px; }
.trial span:nth-child(2) { flex: 1; font-size: 0.95rem; }
.trial b { color: #fff; }
.trial em { font-style: normal; font-weight: 700; color: #E2C37A; white-space: nowrap; }
.trial.ended { background: var(--gold-soft); color: var(--text); border: 1px solid #E8D7A8; }
.trial.ended b { color: var(--text); } .trial.ended em { color: var(--rose); }
.quests.compact { padding: 14px 16px; margin: 0 0 18px; }
.quests.compact .quest { padding: 6px 0; }
.quests.compact .quest b { font-size: 0.92rem; }
.quests.compact .q-reward { font-size: 0.86rem; margin-top: 6px; }
.adapted { font: italic 600 0.98rem var(--serif); color: var(--gold); margin: -8px 0 12px; }

/* The Journal */
.j-head h1 { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.free-tag { font: 700 0.72rem var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: #fff; background: var(--green); border-radius: 99px; padding: 4px 11px; }
.prompt-card { position: relative; overflow: hidden; background: linear-gradient(150deg, #3A2A44, #6B4E7E 60%, #B06A7A); color: #F3ECE2; border-radius: 22px; padding: 28px 26px; margin-bottom: 18px; box-shadow: 0 18px 40px rgba(58,42,68,0.25); }
.prompt-card::after { content: ''; position: absolute; right: -40px; top: -40px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(255,214,200,0.35), transparent 65%); }
.prompt-card .kicker { color: #E2C37A; }
.prompt-card h2 { color: #fff; font: italic 600 1.6rem/1.35 var(--serif); margin: 4px 0 20px; max-width: 520px; }
.prompt-card.done { background: linear-gradient(150deg, #EEF5EC, #DCEBD8); color: var(--text); box-shadow: none; }
.prompt-card.done h2 { color: var(--text); font-style: normal; margin-bottom: 6px; }
.prompt-card.done .kicker { color: var(--green); }
.j-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; margin-bottom: 18px; }
.j-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0 12px; }
.j-stats div { background: var(--bg); border-radius: 12px; padding: 10px 12px; }
.j-stats b { display: block; font: 700 1.4rem var(--serif); }
.j-stats span { color: var(--muted); font-size: 0.82rem; }
.mood-bar { display: flex; height: 8px; border-radius: 99px; overflow: hidden; gap: 2px; margin-bottom: 14px; }
.mood-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.mood-cal > b { text-align: center; font: 700 0.72rem var(--sans); color: var(--subtle); }
.mc { aspect-ratio: 1; border-radius: 50%; background: var(--c); display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line); }
.mc span { font: 600 0.78rem var(--sans); color: var(--muted); font-style: normal; }
.mc[style*="#"] span { color: #fff; }
.mc.today { box-shadow: inset 0 0 0 2px var(--ink); }
.mc.future { opacity: 0.45; }
.week-note { display: flex; gap: 14px; background: var(--gold-soft); border: 1px solid #E8D7A8; border-radius: 18px; padding: 18px; margin-bottom: 18px; }
.week-note img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }
.week-note p { margin: 0 0 6px; }
.entries { display: grid; gap: 12px; }
.entry { display: grid; grid-template-columns: 58px 1fr; gap: 16px; background: #FFFDF7; border: 1px solid #EADFC9; border-left: 5px solid var(--c); border-radius: 16px; padding: 18px; }
.en-date { text-align: center; }
.en-date b { display: block; font: 700 1.8rem/1 var(--serif); }
.en-date span { font: 700 0.72rem var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--subtle); }
.en-reply summary { cursor: pointer; color: var(--gold); font-weight: 700; font-size: 0.9rem; margin-top: 8px; }

/* The writing screen */
.write { max-width: 640px; margin: 0 auto; }
.w-prompt { font: italic 600 2rem/1.3 var(--serif); margin: 6px 0 22px; }
.w-label { font-weight: 700; margin-bottom: 10px; }
.orbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 18px; }
@media (max-width: 480px) { .orbs { grid-template-columns: repeat(3, 1fr); } }
.orbs label { margin: 0; cursor: pointer; }
.orbs input { position: absolute; opacity: 0; }
.orbs span { display: flex; flex-direction: column; align-items: center; gap: 6px; font-weight: 600; font-size: 0.85rem; color: var(--muted); padding: 8px 0; border-radius: 14px; }
.orbs i { width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0, var(--c) 60%); box-shadow: 0 4px 12px rgba(0,0,0,0.12); transition: transform .2s ease; }
.orbs input:checked + span { color: var(--text); background: #fff; box-shadow: 0 0 0 2px var(--text); }
.orbs input:checked + span i { transform: scale(1.15); }
.write textarea { min-height: 280px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; font: 1.2rem/1.8 var(--serif); padding: 18px 0; }
.write textarea:focus { outline: none; }
.w-foot { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding-top: 14px; }
.w-foot .btn { width: auto; padding: 12px 36px; }

/* Her soulmate: first in Your People */
.person-card.soul { background: linear-gradient(150deg, #FFFDF8, #FBEDEA); border-color: #F1D3CC; }
.soul-ava, .sm-ava { width: 74px; height: 74px; flex: none; border-radius: 50%; overflow: hidden; border: 3px solid #fff; box-shadow: 0 0 0 2px #E8A598, 0 6px 16px rgba(201,69,63,0.2); }
.soul-ava img, .sm-ava img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
.soul-ava.blur img, .sm-ava.blur img { filter: blur(6px); transform: scale(1.2); }
.soul-mini { display: block; text-decoration: none; }
.sm-row { display: flex; gap: 12px; align-items: center; margin: 10px 0; }
.sm-row .sm-ava { width: 46px; height: 46px; }
.sm-row b { display: block; font: 700 1rem var(--serif); }
.sm-row span:not(.sm-ava) { color: var(--muted); font-size: 0.88rem; }
.ring-ava { background: conic-gradient(var(--green) calc(var(--p) * 1%), var(--bg-alt) 0); display: grid; place-items: center; box-shadow: none; border: 0; }
.ring-ava i { width: 36px; height: 36px; border-radius: 50%; background: #fff; display: grid; place-items: center; font: 700 0.8rem var(--serif); font-style: normal; }

/* Readings */
.ic-strip { display: flex; gap: 12px; align-items: center; background: var(--gold-soft); border: 1px solid #E8D7A8; border-radius: 14px; padding: 12px 16px; text-decoration: none; margin: 10px 0 8px; font-size: 0.95rem; }
.ic-strip b { color: var(--rose); margin-left: auto; white-space: nowrap; }
.shopgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 760px) { .shopgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .shopgrid { grid-template-columns: 1fr; } }
.sc { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.sc:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(40,35,43,0.1); }
.sc-art { height: 96px; display: block; position: relative; overflow: hidden; }
.sc-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; filter: blur(8px); transform: scale(1.2); }
.sc-kick { font: 700 0.68rem var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin: 12px 16px 2px; }
.sc b { font: 700 1.08rem/1.25 var(--serif); margin: 0 16px 4px; }
.sc-lede { color: var(--muted); font-size: 0.9rem; margin: 0 16px; flex: 1; }
.pt { font-style: normal; font-weight: 700; color: var(--text); margin: 10px 16px 16px; }
.pt span { display: block; font-weight: 600; font-size: 0.8rem; color: var(--gold); }
.pt s { color: var(--subtle); font-weight: 400; margin-right: 4px; }
.pt.inc { color: var(--green); } .pt.own { color: var(--green); }
.sc-inc .sc-art { background: radial-gradient(circle at 30% 60%, rgba(226,195,122,0.5) 0 20px, transparent 21px), linear-gradient(150deg, #FFF9E8, #F3E7C8); }
.sc-soul .sc-art { background: linear-gradient(150deg, #EFE6DA, #E1D0BC); }
.sc-read .sc-art { background: linear-gradient(150deg, #FBE6E1, #F6D2BE); }
.sc-two .sc-art { background: radial-gradient(circle at 42% 55%, rgba(224,122,115,0.55) 0 22px, transparent 23px), radial-gradient(circle at 58% 55%, rgba(156,111,176,0.55) 0 22px, transparent 23px), linear-gradient(150deg, #FFF, #F4EEF8); }
.sc-rit .sc-art { background: radial-gradient(ellipse 8px 16px at 50% 45%, #FFC94A 60%, transparent 62%), linear-gradient(160deg, #2B2231, #6B3A4E); }
.sc-ask .sc-art { background: linear-gradient(150deg, #F7E3F0, #E3D6F5); }
.sc-pick .sc-art { background: linear-gradient(150deg, #3A2A44, #B06A7A); }
/* smaller mood calendar */
.mood-cal { grid-template-columns: repeat(7, 38px); justify-content: space-between; gap: 8px 0; }
.mc { width: 38px; height: 38px; aspect-ratio: auto; }
/* the quests, as a compact strip across the top */
.quests.compact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 16px; }
.quests.compact .sec-row, .quests.compact .q-reward { grid-column: 1 / -1; }
.quests.compact .quest { border: 0; margin: 0; padding: 0; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: start; }
.quests.compact .q-check { width: 20px; height: 20px; font-size: 0.7rem; }
.quests.compact .quest b { font-size: 0.86rem; line-height: 1.3; display: block; }
.quests.compact .q-n { font-size: 0.8rem; }
.quests.compact .q-reward { margin: 2px 0 0; }
@media (max-width: 640px) { .quests.compact { grid-template-columns: 1fr; } }

/* ==========================================================================
   v11: day-5 gift, welcome, soulmate + six numbers, highlights, check-ins,
        heart jar, signs, horoscope, articles
   ========================================================================== */
.gift5 { display: grid; grid-template-columns: 120px 1fr; gap: 20px; align-items: center; background: linear-gradient(150deg, #FFF9E6, #FBE6E1); border: 2px solid #E2C37A; border-radius: 20px; padding: 20px 22px; margin: 14px 0 18px; box-shadow: 0 14px 34px rgba(176,138,69,0.2); animation: land 0.6s ease; }
.gift5 h2 { margin: 2px 0 6px; } .gift5 p { color: var(--muted); }
.gift5 .btn { width: auto; display: inline-block; padding: 13px 30px; }
.gift5 .heart-rose { width: 120px; height: 120px; }
.gift5.small { grid-template-columns: 90px 1fr; text-align: left; }
.gift5.small .heart-rose { width: 90px; height: 90px; }
@media (max-width: 520px) { .gift5 { grid-template-columns: 1fr; text-align: center; justify-items: center; } }
.lk-soon { margin: 0; font-weight: 600; color: var(--muted); font-size: 0.95rem; }

/* the welcome */
.welcome { max-width: 520px; margin: 6vh auto 0; text-align: center; padding: 10px 6px 40px; }
.wl-art { height: 220px; display: grid; place-items: center; margin-bottom: 10px; }
.wl-1 img { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 6px #fff, 0 0 0 8px #E2C37A, 0 18px 40px rgba(40,35,43,0.2); }
.wl-art .heart-rose, .wl-art .jar { animation: grow-in 0.8s cubic-bezier(.2,.9,.3,1.2); }
.wl-dots { display: flex; gap: 8px; justify-content: center; margin: 6px 0 18px; }
.wl-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.wl-dots i.on { background: var(--gold); width: 24px; border-radius: 99px; }
.welcome h1 { font-size: 2rem; }
.welcome p { color: var(--muted); font-size: 1.1rem; margin-bottom: 26px; }
.welcome .btn { max-width: 340px; margin: 0 auto; }

/* her soulmate page */
.soul-hero { display: grid; grid-template-columns: 300px 1fr; gap: 28px; align-items: center; margin: 6px 0 24px; }
@media (max-width: 700px) { .soul-hero { grid-template-columns: 1fr; } }
.trace2 { position: relative; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; background: #EFE6DA; box-shadow: 0 18px 40px rgba(40,35,43,0.18); }
.trace2 img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; filter: blur(10px) saturate(.7); transform: scale(1.12); }
.trace2.open img { filter: none; transform: none; }
.t-glass { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(250,246,240,.55), rgba(250,246,240,.25)), repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 2px, transparent 2px 6px); }
.t-note { position: absolute; top: 14px; right: 14px; background: #FFF9E8; border: 1px solid #EBDCB4; border-radius: 6px; padding: 3px 10px; font-weight: 700; font-size: .85rem; transform: rotate(2deg); }
.t-hint { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; font: 600 1.05rem var(--serif); }
.asked { font: italic 500 1.1rem var(--serif); color: var(--muted); }
.soul-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0 18px; }
.soul-stats div { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.soul-stats b { display: block; font: 700 1.4rem var(--serif); }
.soul-stats span { color: var(--muted); font-size: .82rem; }
.six { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 20px; margin-bottom: 20px; }
.pos6 { display: grid; grid-template-columns: 40px 1fr auto; gap: 14px; align-items: start; padding: 14px 0; border-top: 1px solid var(--line); }
.p6-n { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 700 1rem var(--serif); background: var(--bg-alt); color: var(--muted); }
.pos6.open .p6-n { background: var(--ink); color: #E2C37A; }
.pos6.six-u .p6-n { background: linear-gradient(135deg, #C9A032, #E8C766); color: #3A2E00; }
.pos6 h3 { margin: 4px 0 0; }
.p6-src { font: 700 .7rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--subtle); margin: 2px 0 6px; }
.p6-body { margin: 0; font: 1.02rem/1.55 var(--serif); }
.p6-yours { text-align: center; } .p6-yours small { display: block; font-size: .7rem; color: var(--subtle); text-transform: uppercase; letter-spacing: .1em; } .p6-yours b { font: 700 1.6rem var(--serif); color: var(--gold); }
.redact { background: var(--text); color: transparent; border-radius: 3px; padding: 0 2px; user-select: none; }

/* the two highlights */
.hl-pair { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; margin: 16px 0 10px; }
@media (max-width: 640px) { .hl-pair { grid-template-columns: 1fr; } }
.hl-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 230px; border-radius: 20px; padding: 20px; text-decoration: none; color: #fff; overflow: hidden; background: linear-gradient(160deg, #3A2A44, #6B4E7E 60%, #B06A7A); box-shadow: 0 16px 36px rgba(58,42,68,0.25); margin-bottom: 12px; }
.hl-card.hl-sketch { background: #2B2231; }
.hl-img { position: absolute; inset: 0; }
.hl-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; filter: blur(9px) brightness(.55); transform: scale(1.15); }
.hl-card > span, .hl-card > b, .hl-card > em { position: relative; }
.hl-kick { font: 700 .7rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #E2C37A; }
.hl-card b { font: 700 1.45rem/1.2 var(--serif); margin: 4px 0 6px; }
.hl-card > span:not(.hl-kick):not(.hl-img) { color: #E9E1EE; font-size: .95rem; margin-bottom: 10px; }
.hl-card .pt, .hl-card em { color: #fff; margin: 0; font-style: normal; font-weight: 700; }
.hl-card .pt span { color: #E2C37A; }

/* check-ins */
.checkin { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 22px; margin-bottom: 12px; box-shadow: 0 14px 34px rgba(40,35,43,0.06); }
.checkin h2 { font: italic 600 1.6rem var(--serif); margin: 2px 0 16px; }
.about, .starters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.about label { margin: 0; cursor: pointer; } .about input { position: absolute; opacity: 0; }
.about span { display: inline-block; padding: 7px 13px; border-radius: 99px; border: 1px solid var(--line); background: #fff; font-weight: 600; font-size: .9rem; }
.about input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); }
.starters button { background: var(--gold-soft); border: 1px dashed #D9C39A; border-radius: 99px; padding: 6px 12px; cursor: pointer; font: italic 600 .92rem var(--serif); color: #8A6D0B; }
.starters button:hover { background: #FFF3CC; }
.ck-foot { display: flex; gap: 14px; align-items: center; justify-content: space-between; }
.ck-foot .btn { width: auto; padding: 13px 26px; flex: none; }
@media (max-width: 520px) { .ck-foot { flex-direction: column; align-items: stretch; } }
.heart-btn .hb { display: inline-block; margin-right: 4px; }
.fly { position: absolute; left: 50%; top: 50%; pointer-events: none; }
.fly span { display: block; font-size: 64px; color: var(--c); opacity: 0; transform: translate(-50%, -50%) scale(.3); text-shadow: 0 6px 18px rgba(0,0,0,.2); }
.fly.go span { animation: heartpop 0.95s cubic-bezier(.2,.9,.3,1.3) forwards; }
@keyframes heartpop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); } 35% { opacity: 1; transform: translate(-50%, -50%) scale(1.25); } 60% { transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, 220px) scale(.35); } }
.today-checks { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 16px; }
.tc { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--line); border-radius: 99px; padding: 4px 11px; font-size: .85rem; font-weight: 600; }
.tc i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.jar-card { display: grid; grid-template-columns: 150px 1fr; gap: 20px; align-items: center; background: linear-gradient(160deg, #FFF6F3, #FBE6E1); border: 1px solid #F1D3CC; border-radius: 20px; padding: 18px 22px; margin-bottom: 16px; }
.jar-card h3 { margin: 0 0 6px; font-size: 1.4rem; }
.jar-wrap { display: block; }
.jar-wrap.bump .jar { animation: bump .5s ease; }
@keyframes bump { 40% { transform: scale(1.08) rotate(-2deg); } }
@media (max-width: 520px) { .jar-card { grid-template-columns: 1fr; justify-items: center; text-align: center; } }
.prompt-mini { display: flex; gap: 16px; align-items: center; justify-content: space-between; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; margin-bottom: 16px; }
.prompt-mini .kicker { margin: 0 0 2px; }
.pm-q { margin: 0; font: italic 600 1.1rem var(--serif); }
.prompt-mini .btn { width: auto; padding: 11px 24px; flex: none; }
.en-time { display: block; font-size: .72rem; color: var(--subtle); margin-top: 2px; }
.en-about { font-size: .82rem; color: var(--muted); font-weight: 600; }

/* signs */
.signbox { position: relative; overflow: hidden; text-align: center; background: linear-gradient(160deg, #2B2231, #4A3558); color: #F3ECE2; border-radius: 22px; padding: 26px 22px; margin-bottom: 18px; }
.sgb-glow { position: absolute; inset: 0; background: radial-gradient(circle at 20% 20%, rgba(226,195,122,.25), transparent 40%), radial-gradient(circle at 85% 70%, rgba(232,165,152,.2), transparent 40%); pointer-events: none; }
.signbox .kicker { color: #E2C37A; position: relative; } .signbox h2 { color: #fff; position: relative; }
.sign-chips { position: relative; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 12px 0 16px; }
.sign-chips button { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.08); color: #F3ECE2; border: 1px solid rgba(255,255,255,.18); border-radius: 99px; padding: 8px 14px; cursor: pointer; font: 600 .92rem var(--sans); }
.sign-chips button i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.sign-chips button.on { background: #fff; color: var(--text); }
.signbox input { position: relative; background: rgba(255,255,255,.95); }
.signbox .btn { position: relative; max-width: 320px; margin: 0 auto; }
.sign-cards { display: grid; gap: 12px; }
.sign-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; }
.sgc-top { display: flex; align-items: center; gap: 10px; }
.sgc-top b { flex: 1; font: 700 1.05rem var(--serif); }
.sgc-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.sgc-mean { display: flex; gap: 10px; align-items: flex-start; background: var(--gold-soft); border-radius: 12px; padding: 10px 12px; margin-top: 10px; }
.sgc-mean img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; }
.sgc-mean p { margin: 0; font-size: .95rem; }

/* horoscope, today's read, articles */
.tl-h { margin: 6px 0 0; font-size: .92rem; color: var(--muted); font-family: var(--sans); font-weight: 400; line-height: 1.5; }
.horo { background: linear-gradient(160deg, #FFFFFF, #F8F2FB); border: 1px solid #E6DCEB; border-radius: 18px; padding: 18px 20px; margin: 10px 0 18px; }
.horo p { font: 1.08rem/1.6 var(--serif); }
.read-card { display: block; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 16px; padding: 16px 18px; margin: 16px 0; text-decoration: none; }
.read-card b { display: block; font: 700 1.2rem var(--serif); margin: 2px 0 4px; }
.read-card > span:last-child { color: var(--muted); }
.art-list { display: grid; gap: 12px; margin-top: 16px; }
.art-card { display: block; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; text-decoration: none; }
.art-card.first { background: linear-gradient(160deg, #FFF9E8, #FBE6E1); border-color: #E8D7A8; }
.art-min { font: 700 .7rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.art-card b { display: block; font: 700 1.2rem var(--serif); margin: 4px 0; }
.art-card > span:last-child { color: var(--muted); }
.art-read h1 { font-size: 2rem; }
.tg-reads .tg-art { background: repeating-linear-gradient(180deg, transparent 0 14px, rgba(176,138,69,.18) 14px 16px), linear-gradient(150deg, #FFFDF7, #F3E7C8); }
.angel-mark { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #FFF3C4, #C9A032); color: #fff; font-size: 1rem; box-shadow: 0 0 12px rgba(226,195,122,.6); }
.angel-mark.big { width: 48px; height: 48px; font-size: 1.3rem; }
.he-reply.lockd { background: var(--bg); border: 1px dashed #D9C8B4; margin-top: 10px; }
.hl-card > .hl-img { position: absolute; inset: 0; }
.tl p.tl-h { font: 400 0.9rem/1.5 var(--sans); color: var(--muted); margin-top: 6px; }
/* the calendar: three days, then a haze */
.tl-more { position: relative; max-height: 64px; overflow: hidden; transition: max-height .5s ease; }
.tl-more::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; background: linear-gradient(180deg, rgba(255,255,255,0), #fff 90%); backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px); pointer-events: none; transition: opacity .4s ease; }
.calrail.open .tl-more { max-height: 900px; }
.calrail.open .tl-more::after { opacity: 0; }
.tl-open { display: block; width: 100%; margin: 4px 0 10px; background: none; border: 0; cursor: pointer; font: 700 .95rem var(--sans); color: var(--rose); text-align: center; text-decoration: none; }
.tl-open span { display: inline-block; margin-left: 4px; }
.sg-picked { position: relative; display: inline-block; margin: 0 0 10px; background: #fff; color: var(--text); border-radius: 99px; padding: 6px 16px; font: 700 1rem var(--serif); box-shadow: 0 0 18px rgba(226,195,122,.5); }
.sgc-detail { margin: 6px 0 0 24px; font: 1.02rem/1.5 var(--serif); color: var(--text); }
/* the side column scrolls with the page (no longer pinned), and the sketch card is shorter */
@media (min-width: 960px) { .side { position: static; top: auto; max-height: none; overflow: visible; } }
.side .thumb { aspect-ratio: 16 / 7; }

/* v12: situation line, guided notes, Learn */
.sit-line { font: italic 500 1.12rem/1.5 var(--serif); color: var(--muted); margin: 0; }
.gq { display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding: 18px 0; border-top: 1px solid var(--line); }
.gq-n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #E2C37A; font: 700 .95rem var(--serif); }
.gq-q { font: italic 600 1.2rem/1.4 var(--serif); margin: 2px 0 10px; }
.gq-start { background: var(--gold-soft); border: 1px dashed #D9C39A; border-radius: 99px; padding: 6px 14px; cursor: pointer; font: italic 600 .95rem var(--serif); color: #8A6D0B; margin-bottom: 8px; }
.gq textarea { min-height: 70px; font: 1.05rem/1.6 var(--serif); }
.write .w-foot .btn { width: auto; }
.guides { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 760px) { .guides { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .guides { grid-template-columns: 1fr; } }
.guide { display: flex; flex-direction: column; border-radius: 16px; padding: 16px; text-decoration: none; min-height: 150px; border: 1px solid var(--line); }
.guide b { font: 700 1.1rem/1.25 var(--serif); margin: 4px 0 6px; }
.guide > span:last-child { color: var(--muted); font-size: .92rem; }
.guide.g0 { background: linear-gradient(160deg, #FFF9E8, #FBE6E1); } .guide.g1 { background: linear-gradient(160deg, #F4EEF8, #FFFFFF); } .guide.g2 { background: linear-gradient(160deg, #EEF5EC, #FFFFFF); }
.tabs { grid-template-columns: repeat(6, 1fr); }
.tabs a { font-size: .74rem; }

/* v13: greeting, Love Angel chat, roses and levels */
.greet { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.greet-ic { width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 1.3rem; color: #B08A45; background: radial-gradient(circle at 35% 30%, #FFF9E6, #F6E3AE); box-shadow: 0 0 0 1px #EBDCB4, 0 6px 16px rgba(176,138,69,.2); }
.greet-hi { display: block; font: italic 600 1.2rem/1.2 var(--serif); color: var(--text); }
.greet-date { display: block; font: 700 .72rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-top: 3px; }
.angel-mark.glow { animation: breathe-glow 3.5s ease-in-out infinite; }
.angel-head { display: flex; gap: 16px; align-items: center; margin: 14px 0 18px; }
.angel-head h1 { margin: 2px 0 4px; }
.feels { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 4px 0 18px; }
.feels button { background: #fff; border: 1px solid var(--line); border-radius: 99px; padding: 10px 16px; font: 600 .98rem var(--sans); cursor: pointer; }
.feels button:hover { border-color: var(--gold); background: var(--gold-soft); }
.chat { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.bub { display: flex; gap: 10px; align-items: flex-end; max-width: 86%; }
.bub p { margin: 0; padding: 12px 16px; border-radius: 18px; font: 1.04rem/1.55 var(--serif); }
.bub.me { align-self: flex-end; }
.bub.me p { background: var(--ink); color: #fff; border-bottom-right-radius: 6px; font-family: var(--sans); font-size: 1rem; }
.bub.angel p { background: linear-gradient(160deg, #FFFDF7, #FBF3E2); border: 1px solid #EADFC9; border-bottom-left-radius: 6px; }
.typing p i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); margin: 0 2px; animation: pulse 1s infinite; }
.typing p i:nth-child(2) { animation-delay: .2s; } .typing p i:nth-child(3) { animation-delay: .4s; }
.chat-in { display: flex; gap: 8px; position: sticky; bottom: 70px; background: var(--bg); padding: 8px 0; }
.chat-in input { margin: 0; flex: 1; border-radius: 99px; padding: 14px 18px; }
.chat-in .btn { width: auto; padding: 12px 22px; }
@media (min-width: 960px) { .chat-in { bottom: 0; } }
.angel-door { display: flex; gap: 14px; align-items: center; background: linear-gradient(150deg, #2B2231, #4A3558); color: #F3ECE2; border-radius: 16px; padding: 14px 18px; margin: 18px 0; text-decoration: none; }
.angel-door b { display: block; color: #fff; font: 700 1.05rem var(--serif); }
.angel-door span:not(.angel-mark) { color: #CFC4D6; font-size: .92rem; }
.angel-door div { flex: 1; }
.angel-door em { font-style: normal; color: #E2C37A; font-size: 1.4rem; }
.bed { background: linear-gradient(180deg, #EEF5EC, #FFFFFF); border: 1px solid #D6E9D7; border-radius: 18px; padding: 18px 20px; margin: 10px 0 20px; }
.lvl { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.lvl-badge { width: 52px; height: 52px; flex: none; border-radius: 50%; display: grid; place-items: center; font: 700 1.4rem var(--serif); color: #3A2E00; background: linear-gradient(135deg, #C9A032, #E8C766); box-shadow: 0 0 0 4px rgba(226,195,122,.3); }
.bed-row { display: flex; gap: 10px; overflow-x: auto; padding: 6px 2px 4px; background: linear-gradient(180deg, transparent 70%, rgba(91,67,54,.12) 70%); border-radius: 12px; }
.bed-rose { flex: none; text-align: center; }
.bed-rose .heart-rose { width: 90px; height: 90px; }
.bed-rose small { display: block; color: var(--muted); font-size: .76rem; font-weight: 600; }
.bed-rose.growing small { color: var(--green); }
.tint { display: inline-block; }
.qcard { margin: 0 0 16px; }
.qlist { list-style: none; padding: 0; margin: 6px 0 20px; counter-reset: q; position: relative; }
.qlist li { counter-increment: q; position: relative; padding: 10px 0 10px 44px; font: italic 600 1.22rem/1.4 var(--serif); color: #fff; border-top: 1px solid rgba(255,255,255,.14); }
.qlist li:first-child { border-top: 0; }
.qlist li::before { content: counter(q); position: absolute; left: 0; top: 10px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 700 .9rem var(--sans); font-style: normal; color: #3A2E00; background: linear-gradient(135deg, #C9A032, #E8C766); }
/* the Love Angel composer */
.composer { position: sticky; bottom: 70px; background: #fff; border: 1px solid #E3D3B0; border-radius: 22px; padding: 12px 14px 10px; box-shadow: 0 14px 34px rgba(40,35,43,.1); }
@media (min-width: 960px) { .composer { bottom: 12px; } }
.composer textarea { border: 0; padding: 4px 2px; margin: 0; min-height: 52px; font: 1.05rem/1.5 var(--serif); background: transparent; resize: none; }
.composer textarea:focus { outline: none; }
.cmp-foot { display: flex; justify-content: space-between; align-items: center; }
.send { width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; background: var(--green); color: #fff; font-size: 1.1rem; box-shadow: 0 6px 14px rgba(31,138,76,.3); }
.tabs { grid-template-columns: repeat(7, 1fr); }
.tabs a { font-size: .68rem; }
/* journal sidebar */
.sj-soul { position: relative; display: block; border-radius: 18px; overflow: hidden; min-height: 240px; text-decoration: none; margin-bottom: 16px; box-shadow: 0 16px 36px rgba(40,35,43,.18); }
.sj-img { position: absolute; inset: 0; } .sj-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; filter: blur(9px) brightness(.55); transform: scale(1.15); }
.sj-body { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 240px; padding: 18px; color: #fff; background: linear-gradient(180deg, rgba(43,34,49,0) 30%, rgba(43,34,49,.85)); }
.sj-body b { font: 700 1.35rem var(--serif); margin: 2px 0 8px; }
.sj-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .sj-chips i { font-style: normal; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); border-radius: 99px; padding: 3px 10px; font-size: .82rem; font-weight: 600; text-transform: capitalize; }
.sj-sub { color: #E9E1EE; font-size: .9rem; margin-bottom: 10px; }
.sj-body em { font-style: normal; font-weight: 700; color: #E2C37A; }
.sj-feel { display: block; background: #fff; border: 1px solid var(--line); border-top: 5px solid var(--c); border-radius: 16px; padding: 16px 18px; text-decoration: none; margin-bottom: 16px; }
.sj-feel b { display: block; font: 700 1.1rem var(--serif); margin: 2px 0 4px; } .sj-feel > span:not(.kicker) { color: var(--muted); font-size: .92rem; display: block; }
.sj-feel .pt { display: block; margin: 10px 0 0; }
.ache { font: 600 1.08rem/1.5 var(--serif); color: var(--rose); margin: 4px 0 10px; }
.told { background: var(--gold-soft); border: 1px solid #E8D7A8; border-radius: 14px; padding: 12px 14px; margin: 10px 0 14px; }
.told-chips { display: flex; flex-wrap: wrap; gap: 6px; } .told-chips span { background: #fff; border: 1px solid #E8D7A8; border-radius: 99px; padding: 3px 11px; font-weight: 600; font-size: .9rem; text-transform: capitalize; }
.told-line { margin: 8px 0 0; font: italic 600 1.02rem var(--serif); }
.pictured { background: linear-gradient(150deg, #FBE6E1, #FFF9E8); border: 1px solid #F1D3CC; border-radius: 18px; padding: 18px 20px; margin: 16px 0; }
.pic-main { font: italic 600 1.3rem/1.45 var(--serif); margin: 4px 0 8px; }
.modal-wrap { position: fixed; inset: 0; z-index: 95; background: rgba(21,16,26,.6); display: grid; place-items: center; padding: 20px; }
.modal { max-width: 440px; background: var(--bg); border-radius: 22px; padding: 26px 24px; text-align: center; box-shadow: 0 30px 70px rgba(0,0,0,.4); animation: land .5s ease; }
.modal .heart-rose { width: 120px; height: 120px; margin: 0 auto; }
/* Love Angel: conversations, feelings, the emergency line */
.new-chat { max-width: 380px; margin: 0 0 8px; }
.chat-list { display: grid; gap: 10px; }
.chat-row { display: flex; gap: 12px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; text-decoration: none; }
.chat-row div { flex: 1; min-width: 0; } .chat-row b { display: block; font: 700 1.02rem var(--serif); }
.chat-row span:not(.angel-mark) { color: var(--muted); font-size: .92rem; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-row em { font-style: normal; color: var(--subtle); font-size: .85rem; }
.feel-box { background: linear-gradient(160deg, #FFFFFF, #F8F2FB); border: 1px solid #E6DCEB; border-radius: 20px; padding: 20px; margin-bottom: 16px; }
.sos { text-align: center; font-size: .86rem; color: var(--muted); background: var(--bg-alt); border-radius: 12px; padding: 10px 14px; margin: 14px 0 0; }
/* the welcome, on a soft glowing circle */
.welcome { position: relative; }
.welcome::before { content: ''; position: absolute; left: 50%; top: -30px; width: 520px; height: 520px; margin-left: -260px; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(232,165,152,.35) 0%, rgba(226,195,122,.22) 40%, rgba(250,246,240,0) 70%); animation: breathe-glow 6s ease-in-out infinite; }
.welcome { z-index: 0; }
.wl-art { position: relative; }
.wl-art::before { content: ''; position: absolute; left: 50%; top: 50%; width: 230px; height: 230px; margin: -115px 0 0 -115px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFF9E6, #FBE3DA); box-shadow: 0 0 0 1px #F1D3CC, 0 20px 50px rgba(201,69,63,.15); z-index: -1; }
@media (max-width: 560px) { .welcome::before { width: 380px; height: 380px; margin-left: -190px; } }

/* ==========================================================================
   v15: her love journal as a book
   ========================================================================== */
.page.solo .main { max-width: 1040px; }
.book-cover { position: relative; display: flex; overflow: hidden; border-radius: 10px 20px 20px 10px; margin: 16px 0 18px; min-height: 150px;
  background: linear-gradient(135deg, #5A2F3E, #8A3B4E 55%, #A8505F); color: #F6E9DC; box-shadow: 0 18px 40px rgba(90,47,62,.35), inset 0 0 0 1px rgba(255,255,255,.08); }
.book-cover::after { content: ''; position: absolute; inset: 10px 10px 10px 34px; border: 1px solid rgba(226,195,122,.45); border-radius: 6px 14px 14px 6px; pointer-events: none; }
.bc-spine { width: 24px; flex: none; background: linear-gradient(90deg, #3A1E28, #5A2F3E); box-shadow: inset -2px 0 4px rgba(0,0,0,.3); }
.bc-body { padding: 24px 28px; }
.bc-kick { font: 700 .7rem var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #E2C37A; margin: 0 0 4px; }
.book-cover h1 { color: #FFF3E6; font: italic 700 2.1rem var(--serif); margin: 0 0 12px; }
.bc-stats { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .9rem; color: #EBD8CC; }
.bc-stats b { color: #fff; font-size: 1.05rem; }
.book-cover .free-tag { position: absolute; top: 18px; right: 22px; }
.spread { display: grid; grid-template-columns: 1.35fr 1fr; gap: 0; background: #FFFDF7; border: 1px solid #EADFC9; border-radius: 16px; box-shadow: 0 18px 44px rgba(40,35,43,.1); overflow: hidden; margin-bottom: 26px; }
@media (max-width: 820px) { .spread { grid-template-columns: 1fr; } }
.page-l { padding: 24px 26px; background: linear-gradient(90deg, #FFFDF7 92%, #F4EBDB); }
.page-r { padding: 24px 22px; background: linear-gradient(90deg, #F1E7D6, #FBF6EC 10%); border-left: 1px solid #E8DCC7; }
@media (max-width: 820px) { .page-l { background: #FFFDF7; } .page-r { border-left: 0; border-top: 1px dashed #E8DCC7; } }
.pg-date { font: 700 .72rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin: 0; }
.pg-q { font: italic 600 1.55rem/1.35 var(--serif); margin: 6px 0 4px; }
.pg-shuffle { font-size: .88rem; color: var(--muted); text-decoration: none; }
.page-l .starters { margin: 12px 0 6px; }
textarea.lined { min-height: 230px; border: 0; border-radius: 0; padding: 4px 2px; background: transparent repeating-linear-gradient(180deg, transparent 0 31px, #E6D8C2 31px 32px); font: 1.12rem/32px var(--serif); resize: vertical; }
textarea.lined:focus { outline: none; }
.assist { display: flex; gap: 10px; align-items: flex-start; background: var(--gold-soft); border: 1px solid #E8D7A8; border-radius: 12px; padding: 10px 12px; margin: 8px 0; }
.assist p { margin: 0; font: italic 600 1.02rem var(--serif); }
.assist .dots::after { content: '…'; animation: pulse 1s infinite; font-style: normal; }
.pg-foot { display: flex; gap: 10px; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.pg-foot .btn { width: auto; padding: 12px 24px; }
.help { background: #fff; border: 1px solid #E3D3B0; border-radius: 99px; padding: 10px 16px; font: 700 .92rem var(--sans); color: #8A6D0B; cursor: pointer; box-shadow: 0 0 14px rgba(226,195,122,.35); }
.orbs.sm { grid-template-columns: repeat(6, 1fr); gap: 4px; margin-bottom: 10px; }
.orbs.sm i { width: 32px; height: 32px; }
.orbs.sm span { font-size: .74rem; padding: 6px 0; }
.quick { position: relative; }
.quick h3 { font: italic 600 1.2rem var(--serif); margin: 2px 0 12px; }
.about.sm span { padding: 5px 11px; font-size: .84rem; }
.quick input[type=text] { margin-bottom: 10px; background: #fff; }
.quick .btn { width: 100%; }
.page-r .today-checks { margin: 12px 0 0; }
.jar-mini { display: flex; gap: 12px; align-items: center; margin-top: 16px; padding-top: 14px; border-top: 1px dashed #E0D2BB; text-decoration: none; }
.jar-mini .jar { width: 70px; height: 84px; flex: none; }
.jar-mini b { display: block; font: 700 1rem var(--serif); } .jar-mini span { color: var(--muted); font-size: .86rem; }
.bookpages { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px) { .bookpages { grid-template-columns: 1fr; } }
.bookpage { position: relative; background: #FFFDF7 repeating-linear-gradient(180deg, transparent 0 29px, #F0E6D6 29px 30px); background-position: 0 58px; border: 1px solid #EADFC9; border-radius: 4px 14px 14px 4px; padding: 18px 20px 16px 26px; box-shadow: 0 8px 20px rgba(40,35,43,.06); }
.bookpage::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--c); border-radius: 4px 0 0 4px; }
.bp-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px; }
.bp-date { font: 700 .72rem var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--subtle); }
.bookpage .he-text { line-height: 30px; }
.bookpage .he-reply { margin-top: 12px; }
.en-about { font-size: .84rem; color: var(--muted); font-weight: 600; margin: 4px 0 0; }

/* ---- Your Story: Play mode and the Fate games ---- */
.gm-mode{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:14px 0 10px;font-size:14px;color:#5b5470}
.gm-mode button{border:1px solid #e3dcef;background:#fff;border-radius:99px;padding:6px 14px;font:600 13px inherit;cursor:pointer;color:#2a2340}
.gm-mode button.on{background:#2a2340;color:#fff;border-color:#2a2340}
.gm-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 18px}
.gm-strip a{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center;padding:12px 14px;border-radius:14px;background:linear-gradient(135deg,#2a2340,#4b2d5c);color:#fff;text-decoration:none}
.gm-strip a span{grid-row:span 2;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.14);display:grid;place-items:center;font-size:15px;color:#f2c14e}
.gm-strip a b{font-size:14px}.gm-strip a small{font-size:12px;color:#d9cfe8}
.gm-play{position:relative;width:100%;max-width:460px;margin:0 auto;height:min(80vh,760px);border-radius:22px;overflow:hidden;background:#1d1730 center/cover no-repeat;color:#fff;user-select:none;box-shadow:0 18px 50px rgba(30,20,50,.35)}
.gm-dim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,14,34,.55) 0%,rgba(20,14,34,.15) 35%,rgba(20,14,34,.85) 100%)}
.gm-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:10px;padding:12px 14px;z-index:3}
.gm-x{color:#fff;text-decoration:none;font-size:22px;width:28px}
.gm-love{flex:1;display:flex;align-items:center;gap:8px;font-size:12px}
.gm-love span{white-space:nowrap}.gm-love i{flex:1;height:7px;border-radius:99px;background:rgba(255,255,255,.25);overflow:hidden}.gm-love i b{display:block;height:100%;background:linear-gradient(90deg,#f28aa8,#e0446e);transition:width .5s}
.gm-love em{font-style:normal;font-weight:700}
.gm-spins{font-size:12px;background:rgba(0,0,0,.35);padding:3px 9px;border-radius:99px;white-space:nowrap}
.gm-prog{position:absolute;top:48px;left:14px;right:14px;height:3px;background:rgba(255,255,255,.18);border-radius:99px;z-index:3}.gm-prog i{display:block;height:100%;background:#f2c14e;border-radius:99px}
.gm-stage{position:absolute;inset:60px 0 0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:18px 18px 22px;cursor:pointer}
.gm-face{width:150px;height:150px;border-radius:50%;overflow:hidden;border:3px solid rgba(255,255,255,.75);margin:0 auto auto;margin-top:30px;box-shadow:0 10px 30px rgba(0,0,0,.45);transition:transform .3s}
.gm-face img{width:100%;height:100%;object-fit:cover}.gm-face.veiled img{filter:blur(7px) brightness(.85)}.gm-face.talk{transform:scale(1.04)}
.gm-narr{background:rgba(20,14,34,.6);border-radius:14px;padding:14px 16px;font-style:italic;font-size:16px;line-height:1.5;text-align:center;width:100%}
.gm-line{width:100%;border-radius:16px;padding:12px 16px;font-size:17px;line-height:1.45;margin-top:14px}
.gm-line small{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.75;margin-bottom:3px}
.gm-line.him{background:rgba(255,255,255,.94);color:#2a2340;border-bottom-left-radius:4px}
.gm-line.her{background:#e0446e;color:#fff;border-bottom-right-radius:4px;max-width:85%;margin-left:auto}
.gm-tap{font-size:11px;opacity:.6;margin:10px 0 0;letter-spacing:.06em}
.gm-phone{width:230px;margin:auto;background:#f6f4fa;color:#2a2340;border-radius:24px;padding:10px 12px 16px;box-shadow:0 14px 40px rgba(0,0,0,.5);animation:gmPop .35s ease}
.gp-bar{font-size:11px;text-align:center;color:#8a8399;margin-bottom:8px}.gp-from{font-size:12px;font-weight:700;margin-bottom:6px}
.gp-msg{background:#e9e5f2;border-radius:14px;padding:9px 12px;font-size:15px;display:inline-block}
.gm-choose{width:100%;margin-top:14px}.gm-choose p{text-align:center;font-weight:700;margin:0 0 10px}
.gm-c{display:flex;justify-content:space-between;gap:10px;width:100%;text-align:left;border:0;border-radius:14px;padding:13px 15px;margin:0 0 8px;background:rgba(255,255,255,.94);color:#2a2340;font:600 15px inherit;cursor:pointer}
.gm-c em{font-style:normal;font-size:12px;color:#7a7290;white-space:nowrap;align-self:center}
.gm-c.prem{background:linear-gradient(135deg,#f2c14e,#f7d77f)}.gm-c.prem em{color:#5a4300}
.gm-tarot{width:100%;text-align:center;margin:auto 0 0}.gm-tarot p{font-weight:700;margin:0 0 12px}.gm-tarot small{display:block;opacity:.7;margin-top:10px;font-size:12px}
.gt-cards{display:flex;justify-content:center;gap:12px}
.gt-card{width:92px;height:140px;border-radius:12px;border:2px solid #f2c14e;background:repeating-linear-gradient(45deg,#3a2550,#3a2550 8px,#45305e 8px,#45305e 16px);color:#f2c14e;font-size:26px;cursor:pointer;transition:transform .45s}
.gt-card:hover{transform:translateY(-6px)}.gt-card.flip{transform:rotateY(90deg)}
.gt-card.up{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;background:#fbf6ea;color:#2a2340;width:130px;height:170px;cursor:default;animation:gmPop .4s ease}
.gt-card.up b{font-family:'Cormorant Garamond',serif;font-size:22px}.gt-card.up em{font-style:normal;font-size:11px;background:#f2c14e;color:#2a2340;border-radius:99px;padding:1px 8px}
.gt-card.rare{box-shadow:0 0 0 3px #f2c14e,0 0 30px rgba(242,193,78,.8)}
.gm-end{text-align:center;margin:auto 0;width:100%}.gm-end .ge-k{font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.75;margin:0}
.gm-end h2{font-family:'Cormorant Garamond',serif;font-size:28px;line-height:1.2;margin:8px 0 10px}.gm-end .ge-s{opacity:.85;margin:0 0 16px}
.gm-link{display:block;color:#fff;margin-top:12px;font-size:14px}
@keyframes gmPop{from{transform:scale(.9);opacity:0}to{transform:none;opacity:1}}
/* Fate Wheel */
.gw,.ge{max-width:560px;margin:0 auto;text-align:center}.gw h1,.ge h1{margin:4px 0}.gw-s,.ge-s{color:#5b5470}
.gw-wheel{position:relative;width:min(320px,86vw);margin:18px auto 10px}.gw-wheel svg{width:100%;height:auto;display:block}
.gw-wheel text{fill:#fff;font:600 10.5px sans-serif}.gw-wheel .gw-c{font-size:20px;fill:#f2c14e}
.gw-pin{position:absolute;top:-14px;left:50%;transform:translateX(-50%);font-size:26px;color:#2a2340;z-index:2}
.gw-row{display:flex;justify-content:center;align-items:center;gap:14px;margin:8px 0}.gw-n{font-weight:700}
.gw-out{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0;text-align:left}
.gw-out>div{border:1px solid #e3dcef;border-radius:14px;padding:12px 14px;background:#fff;display:flex;flex-direction:column;gap:6px}.gw-out small{color:#7a7290}
.gw-prize{margin:14px auto;padding:16px 18px;border-radius:16px;background:#fff;border:2px solid #f2c14e;animation:gmPop .4s ease}
.gw-prize b{display:block;font-size:20px;font-family:'Cormorant Garamond',serif;margin-bottom:6px}.gw-letter{font-style:italic;color:#4a4360}
.gw-fine{font-size:12px;color:#8a8399;margin-top:16px}
/* Sealed Envelopes */
.ge-env{position:relative;width:200px;height:130px;margin:22px auto;border-radius:10px;background:linear-gradient(160deg,#f7efe2,#eadcc4);box-shadow:0 12px 30px rgba(60,40,20,.2);overflow:hidden}
.ge-env::before{content:'';position:absolute;inset:0;background:linear-gradient(to bottom right,transparent 49.5%,#dccbad 50%) top left/50% 60% no-repeat,linear-gradient(to bottom left,transparent 49.5%,#dccbad 50%) top right/50% 60% no-repeat;transition:transform .6s}
.ge-seal{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:#a3243f;color:#fff;display:grid;place-items:center;font-size:18px;box-shadow:0 3px 8px rgba(0,0,0,.3);transition:transform .5s,opacity .5s}
.ge-env.open .ge-seal{transform:translate(-50%,-50%) scale(1.6);opacity:0}.ge-env.open::before{transform:translateY(-60%)}
.ge-btns{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.ge-btns small{display:block;font-size:11px;font-weight:500}
.ge-pity{max-width:360px;margin:14px auto 4px;font-size:13px;color:#5b5470}.ge-pity i{display:block;height:7px;border-radius:99px;background:#eee8f5;margin-top:5px;overflow:hidden}.ge-pity i b{display:block;height:100%;background:linear-gradient(90deg,#f2c14e,#e0446e)}
.ge-odds{font-size:12px;color:#8a8399}
.ge-new,.ge-got{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:14px 0;text-align:left}
.ge-card{border-radius:14px;padding:12px 13px;background:#fff;border:1px solid #e3dcef;font-size:13px}
.ge-card em{font-style:normal;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:#7a7290}
.ge-card b{display:block;margin:4px 0;font-size:14px}.ge-card p{margin:0;color:#5b5470}
.ge-card.rare{border:2px solid #8E5BB5}.ge-card.rare em{color:#8E5BB5}
.ge-card.legendary{border:2px solid #f2c14e;background:linear-gradient(160deg,#fffaf0,#fff3d6)}.ge-card.legendary em{color:#a8780a}
.ge-card.new{animation:gmPop .4s ease}
@media(max-width:640px){.gm-strip{grid-template-columns:1fr}.gm-play{height:78vh;border-radius:16px}.gw-out{grid-template-columns:1fr}}
.gw-row .btn,.ge-btns .btn{width:auto;min-width:180px;flex:0 0 auto}.gw-n{white-space:nowrap}

/* ---- Your Story: Watch mode, the simulated mind movie (stills, slow motion, word-by-word captions) */
.wv{position:fixed;inset:0;z-index:300;background:#0d0a14;display:flex;align-items:center;justify-content:center}
.wv-frame{position:relative;height:100%;max-height:100dvh;aspect-ratio:9/16;max-width:100vw;overflow:hidden;background:#000;user-select:none}
.wv-layers,.wv-shot{position:absolute;inset:0}
.wv-shot{opacity:0;transition:opacity 1.1s ease}.wv-shot.show{opacity:1}
.wv-shot img{width:100%;height:100%;object-fit:cover;transform-origin:center;animation:kbIn 9s linear forwards}
.wv-shot.kb-out img{animation-name:kbOut}.wv-shot.kb-left img{animation-name:kbLeft}.wv-shot.kb-right img{animation-name:kbRight}.wv-shot.kb-up img{animation-name:kbUp}
.wv-shot.him img{object-position:center 30%;animation-duration:7s}.wv-shot.him.veiled img{filter:blur(9px) brightness(.8)}
.wv-shot.frozen img{animation:none;transform:scale(1.12);filter:saturate(.35) brightness(.55)}
@keyframes kbIn{from{transform:scale(1.02)}to{transform:scale(1.16)}}
@keyframes kbOut{from{transform:scale(1.18)}to{transform:scale(1.03)}}
@keyframes kbLeft{from{transform:scale(1.14) translateX(3%)}to{transform:scale(1.14) translateX(-3%)}}
@keyframes kbRight{from{transform:scale(1.14) translateX(-3%)}to{transform:scale(1.14) translateX(3%)}}
@keyframes kbUp{from{transform:scale(1.14) translateY(3%)}to{transform:scale(1.14) translateY(-3%)}}
.wv-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55) 0,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 48%,rgba(0,0,0,.78) 100%);pointer-events:none}
.wv-top{position:absolute;left:0;right:0;top:0;padding:calc(10px + env(safe-area-inset-top,0px)) 12px 0;z-index:3}
.wv-segs{display:flex;gap:3px}.wv-segs i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.3);overflow:hidden}
.wv-segs i.done{background:#fff}.wv-segs i b{display:block;height:100%;width:0;background:#fff;animation:wvSeg linear forwards}
@keyframes wvSeg{to{width:100%}}
.wv-bar{display:flex;align-items:center;gap:10px;margin-top:10px;color:#fff}
.wv-x{color:#fff;font-size:26px;line-height:1;text-decoration:none;width:30px}
.wv-t{flex:1;font:600 13px/1.3 inherit;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.wv-voice{background:rgba(0,0,0,.35);color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:20px;padding:5px 10px;font-size:12px;cursor:pointer}
.wv-caps{position:absolute;left:0;right:0;bottom:calc(64px + env(safe-area-inset-bottom,0px));height:40%;z-index:2;pointer-events:none}
.wv-cap{position:absolute;left:22px;right:22px;bottom:0;margin:0;text-align:center;animation:wvLine .8s cubic-bezier(.2,.7,.2,1) .15s both;font-weight:800;font-size:clamp(22px,4.2vh,32px);line-height:1.22;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.55),0 0 18px rgba(0,0,0,.7)}
@keyframes wvLine{from{opacity:0;transform:translateY(10px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.wv-cap.out{animation:wvOut .4s ease forwards!important}@keyframes wvOut{to{opacity:0;transform:translateY(-6px)}}
.wv-cap.close,.wv-cap.breath,.wv-cap.aff{animation-duration:1.4s}
@keyframes wvWord{to{opacity:1;transform:none}}
.wv-cap.title{font-size:clamp(28px,5.4vh,40px);color:#FFD54A}
.wv-cap.hook{font-size:clamp(26px,5vh,38px);color:#FFD54A}.wv-cap.hook span{color:#FFD54A}
.wv-cap.breath,.wv-cap.close{font-weight:600;font-style:italic}.wv-cap.close span,.wv-cap.breath span{color:#fff}
.wv-cap.aff{font-size:clamp(26px,5vh,36px);color:#FFD54A}
.wv-zone{position:absolute;top:70px;bottom:0;z-index:1;background:none;border:0;cursor:pointer;padding:0}
.wv-zone.back{left:0;width:30%}.wv-zone.next{right:0;width:70%}
.wv.ended .wv-zone{display:none}
.wv-end{position:absolute;inset:0;z-index:4;display:flex;align-items:flex-end;pointer-events:none}
.wv-card{pointer-events:auto;width:100%;padding:26px 22px calc(28px + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,rgba(13,10,20,0),rgba(13,10,20,.92) 18%);color:#fff;text-align:center;display:flex;flex-direction:column;gap:10px;animation:wvWord .5s ease-out both}
.wv-card h2{margin:0;font-size:24px;line-height:1.25;color:#FFD54A}.wv-card p{margin:0;opacity:.85;font-size:14px}
.wv-k{font-size:12px;letter-spacing:.04em;opacity:.7}.wv-card .btn{width:100%}.wv-link{color:#fff;opacity:.85;font-size:14px}.wv-soon{font-style:italic}
@media (prefers-reduced-motion:reduce){.wv-shot img{animation:none}.wv-cap{animation-duration:.01s}}

/* Season home: one season, Watch, Play or Read, the Mind Movie, the Fate games */
.sm{margin:6px 0 18px}
.sm-cov{position:relative;border-radius:18px;overflow:hidden;height:220px;color:#fff}
.sm-cov img{width:100%;height:100%;object-fit:cover}
.sm-in{position:absolute;inset:auto 0 0 0;padding:18px;background:linear-gradient(180deg,rgba(10,20,30,0),rgba(10,20,30,.85))}
.sm-in p{margin:0;font-size:12px;opacity:.85}.sm-in h2{margin:2px 0 4px;font-size:26px;color:#fff}.sm-in span{font-size:14px;opacity:.92}
.sm-mode{display:flex;gap:6px;margin:12px 0;background:#f1edf6;padding:4px;border-radius:14px}
.sm-mode button{flex:1;border:0;background:none;padding:10px 6px;border-radius:10px;font-weight:700;font-size:14px;cursor:pointer;color:#4b4260}
.sm-mode button.on{background:#fff;color:#1F8A4C;box-shadow:0 2px 8px rgba(40,30,60,.12)}
.sm-map{position:relative;padding-left:4px}
.sm-ch{display:flex;gap:12px;position:relative;padding-bottom:14px}
.sm-ch:not(:last-child)::before{content:"";position:absolute;left:15px;top:32px;bottom:0;border-left:2px dashed #d8cfe6}
.sm-dot{flex:none;width:32px;height:32px;border-radius:50%;background:#1F8A4C;color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center}
.sm-ch.later .sm-dot{background:#cfc6dc}
.sm-ch>div{flex:1;min-width:0}
.sm-ct{margin:5px 0 8px;font-weight:700;font-size:14px;display:flex;justify-content:space-between;gap:8px}.sm-ct em{font-style:normal;font-weight:600;font-size:12px;color:#1F8A4C}
.sm-ep{display:flex;align-items:center;gap:12px;padding:8px;border-radius:14px;background:#fff;box-shadow:0 2px 10px rgba(40,30,60,.08);margin-bottom:8px;text-decoration:none;color:inherit}
.sm-ep img{width:54px;height:72px;object-fit:cover;border-radius:10px;flex:none}
.sm-ep span{flex:1;min-width:0;display:flex;flex-direction:column}.sm-ep small{font-size:12px;opacity:.65}.sm-ep b{font-size:15px}
.sm-ep em{font-style:normal;width:36px;height:36px;border-radius:50%;background:#F2C14E;color:#2a2140;display:flex;align-items:center;justify-content:center;font-size:14px;flex:none}
.sm-ep.done em{background:#e9e4f0}
.sm-wait{margin:0 0 8px;font-size:13px;opacity:.65}
.sm-mm{display:flex;gap:14px;align-items:center;padding:12px;border-radius:18px;background:linear-gradient(135deg,#2a2140,#4a3466);color:#fff;text-decoration:none;margin:6px 0 12px}
.sm-mmi{position:relative;flex:none;width:70px;height:94px;border-radius:12px;overflow:hidden}.sm-mmi img{width:100%;height:100%;object-fit:cover}
.sm-mmi b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:22px;color:#FFD54A;background:rgba(0,0,0,.25)}
.sm-mm>span:last-child{display:flex;flex-direction:column;gap:2px}.sm-mm small{font-size:12px;color:#FFD54A}.sm-mm b{font-size:17px}.sm-mm span span{font-size:13px;opacity:.85}
.sm-mm.empty{opacity:.8}
.rd-face{width:110px;height:110px;margin:6px auto 14px}
.rd-close{margin:22px 0;padding:18px;border-radius:16px;background:#f6f1fa;text-align:center}.rd-close p{margin:4px 0;font-style:italic}.rd-close .rd-aff{font-style:normal;font-weight:800;font-size:19px;color:#1F8A4C;margin-top:10px}
.rd-next{display:flex;flex-direction:column;gap:10px;align-items:center;margin:10px 0 30px}
.sreader .gm-face.rd-face{width:110px;height:110px;margin:6px auto 14px;display:block}
.sreader .gm-face.rd-face img{width:100%;height:100%;object-fit:cover;max-width:none}

/* Watch: moments she plays inside the film (a choice, press and hold, her own words) */
.wv-acts{position:absolute;inset:0;z-index:5;pointer-events:none}
.wv-act{position:absolute;left:0;right:0;bottom:0;padding:0 18px calc(26px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:center;gap:12px;pointer-events:auto;background:linear-gradient(180deg,rgba(10,6,18,0),rgba(10,6,18,.75) 30%,rgba(10,6,18,.9))}
.wv.acting .wv-zone{display:none}
.wv.acting .wv-caps{bottom:auto;top:96px;height:30%}.wv.acting .wv-cap{bottom:auto;top:0}
.wv.acting .wv-shot.show img{animation-play-state:paused}
.wv-opts{display:flex;flex-direction:column;gap:8px;width:100%;max-width:420px;padding-top:30px}
.wv-opt{opacity:0;transform:translateY(14px);animation:wvOptIn .45s cubic-bezier(.2,.7,.2,1) forwards;display:flex;justify-content:space-between;align-items:center;gap:10px;text-align:left;color:#fff;font:600 15px/1.3 inherit;background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.4);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:14px;padding:12px 14px;cursor:pointer}
.wv-opt em{font-style:normal;font-size:12px;opacity:.8;white-space:nowrap}
.wv-opt.prem{border-color:#F2C14E}.wv-opt.prem em{color:#FFD54A;opacity:1}
@keyframes wvOptIn{to{opacity:1;transform:none}}
.wv-pick.picked .wv-opt:not(.on){opacity:.22!important}
.wv-pick.picked .wv-opt.on{background:#F2C14E;border-color:#F2C14E;color:#2a2140;transform:scale(1.03)}.wv-pick.picked .wv-opt.on em{color:#2a2140}
.wv-ring{display:flex;align-items:center;gap:10px;color:#fff;font-size:13px;opacity:.85}
.wv-ring i{position:relative;width:110px;height:4px;border-radius:2px;background:rgba(255,255,255,.25);overflow:hidden}
.wv-ring i::after{content:"";position:absolute;inset:0;background:#F2C14E;transform-origin:left;animation:wvRing linear forwards;animation-duration:inherit}
.wv-pick.picked .wv-ring i::after,.wv.paused .wv-ring i::after{animation-play-state:paused}
@keyframes wvRing{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.wv-hold{background:none;padding-bottom:calc(120px + env(safe-area-inset-bottom,0px));color:#fff;font-size:14px}
.wv-holdb{position:relative;width:96px;height:96px;border:0;background:rgba(255,255,255,.12);border-radius:50%;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.wv-holdb svg{position:absolute;inset:0;transform:rotate(-90deg)}
.wv-holdb circle{fill:none;stroke:rgba(255,255,255,.35);stroke-width:4}
.wv-holdb circle.f{stroke:#F2C14E;stroke-dasharray:277;stroke-dashoffset:277;transition:stroke-dashoffset .3s}
.wv.holding .wv-holdb circle.f{stroke-dashoffset:0;transition:stroke-dashoffset 2.6s linear}
.wv-holdb b{font-size:34px;color:#FFD54A;transition:transform 2.6s}
.wv.holding .wv-holdb b{transform:scale(1.35)}
.wv-hold>span{animation:wvBreath 2.4s ease-in-out infinite}
@keyframes wvBreath{50%{opacity:.45}}
.wv-shot img{transition:filter 2.6s ease}
.wv.holding .wv-shot.show img{filter:brightness(1.35) saturate(1.2)}
.wv.held .wv-shot.show img{filter:brightness(1.45) saturate(1.25);transition-duration:.8s}
.wv.held .wv-act{opacity:0;transition:opacity .6s}
.wv-write form{display:flex;gap:8px;width:100%;max-width:420px;padding-top:30px}
.wv-write input{flex:1;min-width:0;font:600 16px inherit;padding:12px 14px;border-radius:12px;border:1.5px solid rgba(255,255,255,.5);background:rgba(255,255,255,.14);color:#fff}
.wv-write input::placeholder{color:rgba(255,255,255,.55)}
.wv-write .btn{width:auto;white-space:nowrap}
.wv-sugs{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-width:420px}
.wv-sugs button{font:500 13px inherit;color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.35);border-radius:20px;padding:6px 12px;cursor:pointer}
.wv-cap.recap{font-size:clamp(18px,3.4vh,24px);font-weight:600;font-style:italic;opacity:.92}
.wv-cd{font-size:13px;opacity:.85;margin:-2px 0 0}.wv-cd button{background:none;border:0;color:#fff;text-decoration:underline;cursor:pointer;font:inherit}
.wv.paused .wv-shot img,.wv.paused .wv-segs b{animation-play-state:paused}
.wv-over{margin-right:6px}

/* Watch as a film: one progress line, tap to pause, double-tap for hearts. Recaps stay stories. */
.wv-film{display:block;height:3px;border-radius:2px;background:rgba(255,255,255,.25);overflow:hidden}.wv-film b{display:block;height:100%;width:0;background:#fff}
.wv-zone.full{left:0;right:0;width:auto;top:70px}
.wv-pz{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:42px;color:#fff;background:rgba(0,0,0,.28);opacity:0;pointer-events:none;transition:opacity .2s;z-index:3}
.wv.paused .wv-pz{opacity:1}
.wv.paused .wv-shot img,.wv.paused .wv-cap,.wv.paused .wv-typing i{animation-play-state:paused}
.wv-ic{padding:5px 9px}
.wv-hearts{position:absolute;inset:0;pointer-events:none;z-index:6;overflow:hidden}
.wv-hearts i{position:absolute;font-style:normal;color:#ff5c8a;text-shadow:0 2px 8px rgba(0,0,0,.35);animation:wvHeart 1.4s ease-out forwards;opacity:0}
@keyframes wvHeart{0%{opacity:0;transform:scale(.4)}15%{opacity:1;transform:scale(1.15)}100%{opacity:0;transform:translateY(-160px) scale(.9) rotate(-12deg)}}
.wv-saved{position:absolute;left:50%;top:46%;transform:translateX(-50%);margin:0;background:rgba(0,0,0,.55);color:#fff;font-size:13px;padding:7px 14px;border-radius:20px;z-index:7;animation:wvLine .4s ease both}
.wv-typing{display:flex;gap:6px;justify-content:center;align-items:center;height:40px}
.wv-typing i{width:9px;height:9px;border-radius:50%;background:#fff;opacity:.4;animation:wvDot 1s ease-in-out infinite}
.wv-typing i:nth-child(2){animation-delay:.15s}.wv-typing i:nth-child(3){animation-delay:.3s}
@keyframes wvDot{40%{opacity:1;transform:translateY(-4px)}}
.wv-next{display:flex;gap:12px;align-items:center;text-align:left;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:8px;margin-bottom:4px}
.wv-next span{flex:none;width:54px;height:72px;border-radius:9px;overflow:hidden}.wv-next img{width:100%;height:100%;object-fit:cover;filter:blur(3px) brightness(.8);transform:scale(1.15)}
.wv-next p{margin:0;font-size:14px;font-style:italic;opacity:1}.wv-next small{display:block;font-style:normal;font-size:11px;color:#FFD54A;letter-spacing:.03em}
/* recap stories on the season home */
.sm-stories{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 10px;margin:4px 0 6px;scrollbar-width:none}
.sm-st{flex:none;display:flex;flex-direction:column;align-items:center;gap:5px;text-decoration:none;color:inherit;width:70px}
.sm-st span{position:relative;width:64px;height:64px;border-radius:50%;padding:3px;background:conic-gradient(#F2C14E,#ff5c8a,#8E5BB5,#F2C14E)}
.sm-st.seen span{background:#d8cfe6}
.sm-st img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid #fff;display:block}
.sm-st.next span{background:#1F8A4C}.sm-st b{position:absolute;inset:3px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;background:rgba(0,0,0,.3);font-size:16px}
.sm-st small{font-size:11px;text-align:center;opacity:.8}
.wv-t{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wv.ended .wv-bar [data-wvskip],.wv.ended .wv-bar [data-wvover]{display:none}

/* Watch on desktop: a 16:9 cinema frame with the wide paintings (img/story/s1/wide), not the phone shape */
@media (min-width:760px){
  .wv-frame{aspect-ratio:16/9;height:auto;width:100%;max-height:none}
  .wv-top{padding:16px 22px 0}
  .wv-caps{bottom:11%;height:34%}
  .wv-cap{left:12%;right:12%;font-size:clamp(24px,3.6vh,40px)}
  .wv-cap.hook{font-size:clamp(28px,4.4vh,48px)}.wv-cap.aff{font-size:clamp(28px,4.2vh,44px)}
  .wv.acting .wv-caps{top:84px}
  .wv-act{padding-bottom:5%}
  .wv-opts{max-width:560px}.wv-opt{font-size:16px;padding:14px 16px}
  .wv-hold{padding-bottom:12%}
  .wv-write form,.wv-sugs{max-width:560px}
  .wv-shot.him img{object-fit:contain;object-position:center}
  .wv-shot.him .wv-bgblur{object-fit:cover;filter:blur(28px) brightness(.55);transform:scale(1.2);animation:none}
  .wv-shot.him.veiled img:not(.wv-bgblur){filter:blur(9px) brightness(.8)}
  .wv-shot.him.veiled .wv-bgblur,.wv-shot.him .wv-bgblur{filter:blur(28px) brightness(.5)}
  .wv-end{justify-content:center}.wv.ended .wv-end{background:linear-gradient(90deg,rgba(13,10,20,.2),rgba(13,10,20,.85) 50%,rgba(13,10,20,.2))}
  .wv-card{max-width:560px;background:none;padding-bottom:40px;justify-content:center;align-self:center}
}

/* Watch, YouTube style: the player sits in the page; ⛶ for full screen */
.wv{position:relative;inset:auto;z-index:auto;display:block;background:#000;border-radius:16px;overflow:hidden;box-shadow:0 14px 40px rgba(30,20,50,.25)}
.wv-frame{height:min(76dvh,calc((100vw - 32px) * 16 / 9));width:auto;max-width:100%;margin:0 auto}
@media (min-width:760px){.wv-frame{height:auto;width:100%}}
.wv.wv-fs,.wv:fullscreen{position:fixed;inset:0;z-index:400;border-radius:0;display:flex;align-items:center;justify-content:center;box-shadow:none}
.wv:-webkit-full-screen{position:fixed;inset:0;z-index:400;border-radius:0;display:flex;align-items:center;justify-content:center}
.wv.wv-fs .wv-frame,.wv:fullscreen .wv-frame{height:100dvh;width:auto;max-height:100dvh;aspect-ratio:9/16}
@media (min-aspect-ratio:1/1){.wv.wv-fs .wv-frame,.wv:fullscreen .wv-frame{aspect-ratio:16/9;width:min(100vw,calc(100dvh * 16 / 9));height:auto}}
html.wv-lock,html.wv-lock body{overflow:hidden}
.wvp{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin:8px 0 30px}
@media (min-width:1000px){.wvp{grid-template-columns:minmax(0,1fr) 300px;align-items:start}}
.wvp-info h1{font-size:22px;margin:14px 0 4px;line-height:1.25}
.wvp-info>p{margin:0;font-size:13px;opacity:.65}
.wvp-info .wvp-d{opacity:.85;font-size:14px;margin-top:10px;font-style:italic}
.wvp-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.wvp-b{font-size:13px;font-weight:600;padding:8px 14px;border-radius:20px;background:#f1edf6;color:#2a2140;text-decoration:none}
.wvp-tip{font-size:12px;opacity:.55}
.wvp-next h2{font-size:15px;margin:0 0 10px}
.wvp-it{display:flex;gap:10px;align-items:center;padding:6px;border-radius:12px;text-decoration:none;color:inherit;margin-bottom:6px}
.wvp-it:hover{background:#f6f2fa}.wvp-it.on{background:#f1edf6}
.wvp-th{position:relative;flex:none;width:128px;aspect-ratio:16/9;border-radius:9px;overflow:hidden;background:#2a2140}
.wvp-th img{width:100%;height:100%;object-fit:cover;display:block}
.wvp-th em{position:absolute;right:5px;bottom:5px;font-style:normal;font-size:11px;font-weight:700;color:#fff;background:rgba(0,0,0,.65);padding:2px 6px;border-radius:5px}
.wvp-it b{display:block;font-size:14px;line-height:1.3}.wvp-it small{font-size:12px;opacity:.6}
@media (min-width:760px){.wvp{width:min(1180px,calc(100vw - 48px));margin-left:calc(50% - min(590px,50vw - 24px))}}
@media (min-width:1000px){.wvp{grid-template-columns:minmax(0,1fr) 320px}}
/* Theatre mode: a big player on a black band, details and the playlist below */
@media (min-width:760px){
  .wvp{display:block;width:min(1320px,calc(100vw - 32px));margin-left:calc(50% - min(660px,50vw - 16px))}
  .wvp .wv{border-radius:14px}
  .wvp .wv:not(.wv-fs):not(:fullscreen) .wv-frame{width:min(100%,calc((100dvh - 150px) * 16 / 9))}
  .wvp-info{max-width:1000px}
  .wvp-next{margin-top:22px}
  .wvp-next h2{font-size:17px}
  .wvp-next{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
  .wvp-next h2{grid-column:1/-1;margin:0}
  .wvp-it{flex-direction:column;align-items:stretch;gap:8px;padding:0;margin:0;background:none!important}
  .wvp-it .wvp-th{width:100%}
  .wvp-it.on .wvp-th{outline:3px solid #F2C14E;outline-offset:2px}
}
/* the player fills the page width; only a very short window limits its height */
@media (min-width:760px){
  .wvp .wv:not(.wv-fs):not(:fullscreen) .wv-frame{width:min(100%,calc((100dvh - 70px) * 16 / 9))}
}
/* captions and controls scale with the player itself, never with the window, so they never collide */
.wv-frame{container-type:inline-size}
.wv-cap{font-size:clamp(15px,5.6cqw,32px)}
.wv-cap.hook,.wv-cap.title{font-size:clamp(17px,6.4cqw,38px)}.wv-cap.aff{font-size:clamp(17px,6.2cqw,36px)}
.wv-cap.recap{font-size:clamp(14px,4.6cqw,24px)}
@container (min-aspect-ratio:1/1){}
@media (min-width:760px){
  .wvp .wv-cap{font-size:clamp(15px,3.1cqw,40px);left:10%;right:10%}
  .wvp .wv-cap.hook,.wvp .wv-cap.title{font-size:clamp(17px,3.8cqw,48px)}.wvp .wv-cap.aff{font-size:clamp(17px,3.6cqw,44px)}
  .wvp .wv-cap.recap{font-size:clamp(14px,2.6cqw,28px)}
  .wvp .wv-caps{height:30%;bottom:10%}
  .wvp .wv.acting .wv-caps{top:18%}
}
@container (max-width:620px){
  .wv-bar{gap:6px}.wv-t{font-size:13px}
  .wv-voice{font-size:11px;padding:4px 8px}
  .wv-over{font-size:0!important;padding:4px 8px}.wv-over::before{content:"↺";font-size:13px}
}
@container (max-width:420px){ [data-wvvoice]{font-size:0!important}[data-wvvoice]::before{content:"♪";font-size:13px} }
.wv-again{margin:2px 0 0;font-size:14px}.wv-again button,.wv-again a{background:none;border:0;color:#fff;font:inherit;text-decoration:underline;cursor:pointer;opacity:.9}
/* Watch: a fixed-width player (about 860px), centred, with details and the playlist below at the same width */
@media (min-width:760px){
  .wvp{display:block;width:min(860px,100%);margin:8px auto 30px}
  .wvp .wv:not(.wv-fs):not(:fullscreen) .wv-frame{width:100%}
  .wvp-next{grid-template-columns:repeat(4,1fr);gap:12px}
}
@media (min-width:760px){.wvp{width:min(860px,calc(100vw - 48px));margin-left:calc(50% - min(430px,50vw - 24px));margin-right:0}}
/* Read inside the chapter, and choices in the text */
.sm-read{display:inline-block;margin:2px 0 10px 4px;font-size:13px;color:#6b5d80;text-decoration:underline}
.rd-ch{margin:22px 0;padding:16px;border-radius:16px;background:#f6f1fa;display:flex;flex-direction:column;gap:8px}
.rd-chq{margin:0 0 4px;font-weight:700;font-style:normal}
.rd-opt{display:flex;justify-content:space-between;align-items:center;gap:10px;text-align:left;font:600 15px/1.35 inherit;padding:12px 14px;border-radius:12px;border:1.5px solid #ddd3e8;background:#fff;color:#2a2140;cursor:pointer}
.rd-opt em{font-style:normal;font-size:12px;opacity:.7;white-space:nowrap}.rd-opt.prem{border-color:#F2C14E}.rd-opt.prem em{color:#a77d0c;opacity:1}
.rd-fate{align-self:center;background:none;border:0;font:inherit;font-size:13px;color:#6b5d80;text-decoration:underline;cursor:pointer}
.rd-ch.done{background:none;padding:0 0 0 14px;border-left:3px solid #F2C14E;border-radius:0}
.rd-you{margin:0;font-size:13px;color:#a77d0c;font-weight:600}
/* captions back to the earlier, bigger, bolder look (sized to the player) */
.wv-cap{font-size:clamp(20px,7.4cqw,34px);font-weight:800;line-height:1.22;left:20px;right:20px}
.wv-cap.hook,.wv-cap.title{font-size:clamp(22px,8.4cqw,40px)}.wv-cap.aff{font-size:clamp(22px,8cqw,38px)}
.wv-cap.close,.wv-cap.breath{font-size:clamp(20px,7cqw,32px)}
.wv-cap.recap{font-size:clamp(18px,6cqw,26px)}
@media (min-width:760px){
  .wvp .wv-cap{font-size:clamp(20px,3.6cqw,44px);left:8%;right:8%}
  .wvp .wv-cap.hook,.wvp .wv-cap.title{font-size:clamp(22px,4.2cqw,52px)}.wvp .wv-cap.aff{font-size:clamp(22px,4cqw,48px)}
  .wvp .wv-cap.close,.wvp .wv-cap.breath{font-size:clamp(20px,3.4cqw,40px)}
  .wvp .wv-cap.recap{font-size:clamp(18px,2.8cqw,30px)}
}
.wv-fate{background:none;border:0;color:#fff;opacity:.7;font:500 13px inherit;text-decoration:underline;cursor:pointer;padding:4px 8px}.wv-fate:disabled{text-decoration:none;cursor:default}
.wv.needs-tap .wv-frame::after{content:"🔊 Tap for sound";position:absolute;left:50%;top:84px;transform:translateX(-50%);background:rgba(0,0,0,.6);color:#fff;font-size:13px;padding:7px 14px;border-radius:20px;z-index:8;pointer-events:none;animation:wvBreath 2.4s ease-in-out infinite}
/* the start screen: a big ▶, as on the VSL, so she knows to press play (and the sound comes on) */
.wv-start{position:absolute;inset:0;z-index:9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;color:#fff;font-family:inherit;text-align:center;padding:20px;
  background:radial-gradient(circle at 50% 45%,rgba(20,14,30,.25),rgba(20,14,30,.8))}
.wv-play{width:84px;height:84px;border-radius:50%;background:#F2C14E;color:#2a2140;display:flex;align-items:center;justify-content:center;font-size:32px;padding-left:6px;box-shadow:0 0 0 10px rgba(242,193,78,.25);animation:wvPlayPulse 2s ease-in-out infinite;margin-bottom:6px}
@keyframes wvPlayPulse{50%{box-shadow:0 0 0 18px rgba(242,193,78,.08)}}
.wv-start b{font-size:clamp(18px,4.6cqw,26px);font-weight:800}
.wv-start em{font-style:italic;font-size:clamp(14px,3.4cqw,18px);opacity:.9}
.wv-start small{font-size:13px;opacity:.8;margin-top:4px}
.wv-start:hover .wv-play{transform:scale(1.05)}
@media (min-width:760px){.wvp .wv-start b{font-size:clamp(18px,2.6cqw,30px)}.wvp .wv-start em{font-size:clamp(14px,1.8cqw,20px)}}

/* Your Story: the library (shelf, Today's story, the Adventure Finder, story pages) */
.lib{margin:4px 0 18px}
.lib-today,.fd-top,.lib-hero{position:relative;display:block;border-radius:18px;overflow:hidden;color:#fff;text-decoration:none;min-height:300px;background:#1d1730}
.lib-today>img,.fd-top>img,.lib-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lib-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,10,25,.05) 20%,rgba(15,10,25,.88))}
.lib-tin{position:absolute;left:0;right:0;bottom:0;padding:22px;display:flex;flex-direction:column;gap:6px}
.lib-tin small{color:#FFD54A;font-size:12px;font-weight:600}
.lib-tin b{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(26px,4vw,38px);line-height:1.1}
.lib-tin>span{font-size:15px;opacity:.92;max-width:34em}
.lib-tin em{font-style:normal;font-size:12px;opacity:.75}
.lib-tin .btn{align-self:flex-start;margin-top:6px;font-style:normal;width:auto}
.lib-find{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:12px 0;padding:14px 16px;border-radius:16px;background:#f1edf6}
.lib-find span{display:flex;flex-direction:column}.lib-find small{opacity:.7;font-size:13px}.lib-find .btn{width:auto}
.lib-mm{margin:0 0 6px}
.lib-h{font-size:16px;margin:20px 0 8px}
.lib-row{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x proximity;scrollbar-width:thin}
.lib-card{flex:none;width:140px;text-decoration:none;color:inherit;scroll-snap-align:start}
.lib-poster{position:relative;display:block;aspect-ratio:2/3;border-radius:12px;overflow:hidden;background:#2a2140;box-shadow:0 4px 14px rgba(30,20,50,.15)}
.lib-poster img{width:100%;height:100%;object-fit:cover;transition:transform .3s}.lib-card:hover .lib-poster img{transform:scale(1.04)}
.lib-soon{position:absolute;top:8px;left:8px;font-style:normal;font-size:10px;font-weight:700;background:rgba(0,0,0,.55);color:#fff;padding:2px 7px;border-radius:6px}
.lib-prog{position:absolute;left:0;bottom:0;height:4px;width:30%;background:#F2C14E}
.lib-card b{display:block;font-size:13px;line-height:1.25;margin-top:6px}.lib-card small{font-size:11px;opacity:.6}
.lib-page .lib-hero{min-height:340px}
.lib-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.lib-acts .btn{width:auto}.lib-off{opacity:.65;cursor:default}
.lib-eps{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:6px}
.lib-ep{display:flex;flex-direction:column;align-items:center;padding:8px 4px;border-radius:10px;background:#f1edf6;font-size:12px}.lib-ep b{font-size:15px}.lib-ep.free{background:#e3f3ea;color:#1F8A4C}.lib-ep small{font-size:10px;opacity:.75}
.lib-stc{margin:18px 0;padding:12px 14px;border:1px dashed #cfc2df;border-radius:12px;font-size:13px}
.lib-stc summary{cursor:pointer;font-weight:600;color:#6b5d80}
.lib-stc table{width:100%;border-collapse:collapse;margin-top:8px}.lib-stc td,.lib-stc th{text-align:left;padding:5px 6px;border-bottom:1px solid #eee5f4;vertical-align:top}
.fd h1{font-size:clamp(24px,4vw,32px);margin:8px 0 14px}
.fd-dots{display:flex;gap:6px}.fd-dots i{width:28px;height:4px;border-radius:2px;background:#e3dcec}.fd-dots i.done,.fd-dots i.on{background:#1F8A4C}
.fd-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.fd-opt{position:relative;border:0;padding:0;border-radius:14px;overflow:hidden;aspect-ratio:3/4;cursor:pointer;background:#2a2140;color:#fff;text-align:left;font:inherit}
.fd-opt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .3s}.fd-opt:hover img{transform:scale(1.05)}
.fd-opt span{position:absolute;left:0;right:0;bottom:0;padding:30px 12px 12px;font-weight:700;font-size:15px;line-height:1.25;background:linear-gradient(180deg,rgba(15,10,25,0),rgba(15,10,25,.85))}
.fd-opt.on{outline:3px solid #F2C14E;outline-offset:2px}
.fd-again{margin:16px 0;font-size:14px}.fd-again button{background:none;border:0;color:#1F8A4C;font:inherit;font-weight:600;cursor:pointer;text-decoration:underline}
.fd-why{font-style:italic!important;font-size:14px!important;opacity:.95!important;color:#FFD54A}
@media (max-width:640px){.lib-today,.fd-top{min-height:380px}.lib-card{width:120px}}
/* the library card: Your library on top, Start reading, stars, trailers, the 3-free-stories sheet */
.lib-mine{background:#fff;border-radius:18px;padding:14px 16px 16px;margin-bottom:14px;box-shadow:0 2px 12px rgba(40,30,60,.08)}
.lib-mh{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.lib-mh h2{margin:0 0 8px;font-size:20px}
.lib-cardline{font-size:12px;color:#6b5d80}.lib-cardline b{color:#2a2140}.lib-cardline a{color:#1F8A4C;font-weight:600}
.lib-empty{display:flex;flex-direction:column;gap:4px;padding:18px;border:2px dashed #d8cfe6;border-radius:14px;text-align:center;color:#6b5d80;font-size:14px}.lib-empty b{color:#2a2140;font-size:15px}
.lib-start{display:flex;align-items:center;gap:12px;margin-top:12px;padding:10px;border-radius:14px;background:#f6f1fa}
.lib-start img{width:54px;height:72px;object-fit:cover;border-radius:9px;flex:none}
.lib-start span{flex:1;min-width:0;display:flex;flex-direction:column}.lib-start small{font-size:11px;color:#1F8A4C;font-weight:700}.lib-start b{font-size:15px}
.lib-start em{font-style:normal;font-size:12px;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lib-start .btn{width:auto;flex:none}
.lib-disc{font-size:20px;margin:22px 0 0}
.lib-card{position:relative}.lib-card>a{display:block;text-decoration:none;color:inherit}
.lib-star{position:absolute;top:6px;right:6px;width:30px;height:30px;border-radius:50%;border:0;background:rgba(0,0,0,.45);color:#fff;font-size:16px;line-height:30px;cursor:pointer;z-index:2;padding:0}
.lib-star.on{background:#F2C14E;color:#2a2140}
.lib-soon{left:8px;right:auto}
.lib-trb{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.5)}
.lib-cardp{margin:10px 0 0}
.lib-prev{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.lib-prev a{position:relative;display:block;aspect-ratio:3/4;border-radius:12px;overflow:hidden;text-decoration:none}
.lib-prev img{width:100%;height:100%;object-fit:cover}
.lib-prev span{position:absolute;left:0;right:0;bottom:0;padding:24px 10px 10px;color:#fff;font-size:12px;font-weight:600;line-height:1.3;background:linear-gradient(180deg,rgba(15,10,25,0),rgba(15,10,25,.85))}
.lib-s1bar{display:flex;flex-direction:column;gap:6px;margin:6px 0 10px}.lib-s1bar .lib-trb{color:#2a2140;border-color:#cfc2df;background:#fff}
.wv-card .lib-acts{justify-content:center}
.lib-sheet{position:fixed;inset:0;z-index:500;background:rgba(20,14,30,.6);display:flex;align-items:flex-end;justify-content:center}
@media (min-width:640px){.lib-sheet{align-items:center}}
.lib-sheetin{position:relative;width:min(420px,100%);background:#fff;border-radius:20px 20px 0 0;padding:20px;display:flex;flex-direction:column;gap:10px;text-align:center;animation:wvLine .3s ease both}
@media (min-width:640px){.lib-sheetin{border-radius:20px}}
.lib-sheetin img{width:84px;height:112px;object-fit:cover;border-radius:10px;align-self:center}
.lib-sheetin h3{margin:0;font-size:19px}.lib-sheetin p{margin:0;font-size:14px;opacity:.75}.lib-sheetin .btn{width:100%}
.lib-x{position:absolute;top:8px;right:12px;border:0;background:none;font-size:24px;cursor:pointer;color:#6b5d80}
.lib-not{border:0;background:none;color:#6b5d80;font:inherit;font-size:13px;text-decoration:underline;cursor:pointer}
.wvp-info .lib-trb{color:#2a2140;border-color:#cfc2df;background:#fff}
/* Your library in the side column */
.lib-side .lib-cardline{display:block;margin:-4px 0 8px}
.lib-list{display:flex;flex-direction:column;gap:8px}
.lib-li{position:relative;display:flex;align-items:center}
.lib-li>a{flex:1;min-width:0;display:flex;gap:10px;align-items:center;text-decoration:none;color:inherit;padding-right:36px}
.lib-li img{width:44px;height:60px;object-fit:cover;border-radius:8px;flex:none}
.lib-li span{min-width:0;display:flex;flex-direction:column}.lib-li b{font-size:14px;line-height:1.25}.lib-li small{font-size:11px;opacity:.6}
.lib-li .lib-star{top:50%;transform:translateY(-50%);right:0}
.lib-side .lib-empty{padding:14px}
.lib-sbig{display:block;position:relative;border-radius:12px;overflow:hidden;aspect-ratio:4/3;margin-bottom:10px;text-decoration:none;color:#fff}
.lib-sbig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lib-sbig span{position:absolute;left:0;right:0;bottom:0;padding:30px 12px 10px;display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(15,10,25,0),rgba(15,10,25,.85))}
.lib-sbig b{font-size:16px}.lib-sbig em{font-style:normal;font-size:12px;opacity:.85}
.lib-side .btn{width:100%}

/* ===== Your Story library, redesigned (3 Oct): cinematic hero, title-on-cover posters, rows with arrows, Top 5 */
.lib2{display:flex;flex-direction:column;gap:6px;margin-bottom:24px}
.lh{position:relative;border-radius:20px;overflow:hidden;min-height:380px;color:#fff;background:#1b1426;box-shadow:0 18px 40px rgba(30,20,50,.22)}
.lh-img,.lh-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lh-img img{animation:lhDrift 24s ease-in-out infinite alternate}
@keyframes lhDrift{to{transform:scale(1.08) translateX(-2%)}}
.lh-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,12,28,.92) 0%,rgba(18,12,28,.65) 42%,rgba(18,12,28,.05) 75%),linear-gradient(0deg,rgba(18,12,28,.6),transparent 40%)}
.lh-in{position:relative;padding:34px 30px;max-width:460px;display:flex;flex-direction:column;justify-content:flex-end;min-height:380px;box-sizing:border-box}
.lh-k{margin:0 0 6px;color:#FFD54A;font-size:13px;font-weight:700;letter-spacing:.02em}
.lh h1{color:#fff;font-size:clamp(30px,4vw,44px);line-height:1.05;margin:0 0 10px}
.lh-hook{margin:0 0 12px;font-size:16px;line-height:1.45;opacity:.95}
.lh-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}.lh-chips span{font-size:12px;padding:4px 10px;border-radius:20px;background:rgba(255,255,255,.14);backdrop-filter:blur(4px)}
.lh-acts{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.lh-acts .btn{width:auto}
.lh-ghost{color:#fff;text-decoration:none;font-weight:600;padding:11px 18px;border-radius:999px;border:1.5px solid rgba(255,255,255,.55);font-size:15px}
.lh-ghost:hover{background:rgba(255,255,255,.12)}
.lh-star{width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(255,255,255,.55);background:none;color:#fff;font-size:19px;cursor:pointer}.lh-star.on{background:#F2C14E;border-color:#F2C14E;color:#2a2140}
.lr{margin-top:22px}
.lr-h{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.lr-h h3{margin:0;font-size:21px}.lr-h small{font-size:13px;color:var(--muted)}
.lr-nav{margin-left:auto;display:flex;gap:6px}
.lr-nav button{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:#fff;color:#2a2140;font-size:18px;line-height:1;cursor:pointer}
.lr-nav button:hover{background:#f1edf6}
.lr-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 12px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);mask-image:linear-gradient(90deg,#000 92%,transparent)}
.lr-track::-webkit-scrollbar{display:none}
.lbk{position:relative;flex:none;width:156px;scroll-snap-align:start}
.lbk>a{display:block;text-decoration:none;color:inherit}
.lbk-img{position:relative;display:block;aspect-ratio:2/3;border-radius:14px;overflow:hidden;background:#2a2140;box-shadow:0 6px 18px rgba(30,20,50,.18);transition:transform .25s,box-shadow .25s}
.lbk-img img{width:100%;height:100%;object-fit:cover;display:block}
.lbk:hover .lbk-img{transform:translateY(-3px);box-shadow:0 12px 26px rgba(30,20,50,.28)}
.lbk-t{position:absolute;left:0;right:0;bottom:0;padding:34px 12px 12px;color:#fff;display:flex;flex-direction:column;gap:2px;background:linear-gradient(180deg,rgba(18,12,28,0),rgba(18,12,28,.9))}
.lbk-t small{font-size:10px;letter-spacing:.06em;text-transform:uppercase;opacity:.75;font-weight:700}
.lbk-t b{font-family:var(--serif);font-size:19px;line-height:1.1;font-weight:700}
.lbk-m{display:block;font-size:12px;color:var(--muted);margin-top:7px}
.lbk-now{position:absolute;top:10px;left:10px;font-style:normal;font-size:11px;font-weight:700;background:#F2C14E;color:#2a2140;padding:3px 8px;border-radius:20px}
.lbk-prog{position:absolute;left:0;top:0;height:4px;width:30%;background:#F2C14E;z-index:1}
.lbk-star{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:50%;border:0;background:rgba(18,12,28,.55);color:#fff;font-size:16px;cursor:pointer;z-index:2;opacity:0;transition:opacity .2s}
.lbk:hover .lbk-star,.lbk-star.on,.lbk-star:focus-visible{opacity:1}.lbk-star.on{background:#F2C14E;color:#2a2140}
@media (hover:none){.lbk-star{opacity:1}}
.lbk-wide{width:300px}.lbk-wide .lbk-img{aspect-ratio:16/10}
.lbk-wide .lbk-t b{font-size:21px}.lbk-wide .lbk-t span{font-size:12px;opacity:.85;line-height:1.35}
.lt{flex:none;display:flex;align-items:flex-end;scroll-snap-align:start}
.lt-n{font-family:var(--serif);font-size:120px;line-height:.8;font-weight:700;color:transparent;-webkit-text-stroke:2px #cbbfda;margin-right:-14px;position:relative;z-index:0}
.lt .lbk{z-index:1;width:140px}
/* side column */
.ls .kicker{margin:0}
.ls-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.ls-h small{font-size:12px;font-weight:700;background:#f1edf6;border-radius:20px;padding:2px 9px}
.ls-list{display:flex;flex-direction:column;gap:10px}
.ls-li{position:relative;display:flex;align-items:center}
.ls-li>a{flex:1;min-width:0;display:flex;gap:12px;align-items:center;text-decoration:none;color:inherit;padding-right:40px}
.ls-li img{width:46px;height:69px;object-fit:cover;border-radius:8px;flex:none;box-shadow:0 3px 8px rgba(30,20,50,.18)}
.ls-li span{min-width:0;display:flex;flex-direction:column;gap:2px}.ls-li b{font-family:var(--serif);font-size:16px;line-height:1.15}.ls-li small{font-size:11.5px;color:var(--muted)}
.ls-bar{display:block;height:3px;border-radius:2px;background:#ece6f2;margin-top:4px;width:100%}.ls-bar i{display:block;height:100%;border-radius:2px;background:#F2C14E}
.ls-li .lbk-star{opacity:1;top:50%;transform:translateY(-50%);right:0}
.ls-empty{margin:0;font-size:14px;color:var(--muted)}
.ls-next{position:relative;display:block;aspect-ratio:16/9;color:#fff;text-decoration:none}
.ls-next img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ls-next span{position:absolute;left:0;right:0;bottom:0;padding:28px 16px 12px;display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(18,12,28,0),rgba(18,12,28,.85))}
.ls-next small{color:#FFD54A;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}.ls-next b{font-family:var(--serif);font-size:21px;line-height:1.1}
.ls-hook{margin:0 0 12px!important;font-size:14px}
.ls .btn{width:100%}
.ls-find h3{font-size:19px;margin:6px 0 4px}.ls-find p{font-size:14px}
.ls-mm{display:flex;align-items:center;gap:12px;padding:10px;text-decoration:none;color:inherit}
.ls-mm img{width:56px;height:56px;border-radius:12px;object-fit:cover}.ls-mm span{display:flex;flex-direction:column}.ls-mm small{font-size:11px;color:#1F8A4C;font-weight:700}.ls-mm b{font-size:15px}
@media (max-width:640px){.lh,.lh-in{min-height:440px}.lh-in{padding:24px 20px}.lh-shade{background:linear-gradient(0deg,rgba(18,12,28,.95) 0%,rgba(18,12,28,.55) 55%,rgba(18,12,28,.05))}.lbk{width:132px}.lbk-wide{width:250px}.lt-n{font-size:96px}}
.lr .lt{display:flex;flex-direction:row;align-items:flex-end;flex:none;gap:0;scroll-snap-align:start}
.lr .lt-n{width:74px;text-align:right;font-size:150px;line-height:.78;margin-right:-22px;align-self:flex-end;-webkit-text-stroke:2.5px #b9aacb;color:#f6f1fa}
.lr .lt .lbk{width:138px}
@media (max-width:640px){.lr .lt-n{width:56px;font-size:110px;margin-right:-16px}.lr .lt .lbk{width:118px}}
.lbk-rank{position:absolute;top:2px;left:10px;font-family:var(--serif);font-size:64px;line-height:1;font-weight:700;color:#FFD54A;text-shadow:0 3px 14px rgba(0,0,0,.55);z-index:1}
/* categories, category pages, her library page, the new sidebar */
.lcat{display:flex;gap:8px;overflow-x:auto;padding:14px 2px 2px;scrollbar-width:none}.lcat::-webkit-scrollbar{display:none}
.lcat a{flex:none;font-size:13.5px;font-weight:600;color:#2a2140;text-decoration:none;padding:8px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);white-space:nowrap}
.lcat a:hover{background:#f1edf6}
.lcat-more{flex-wrap:wrap;margin-top:28px;align-items:center}.lcat-more span{font-size:13px;color:var(--muted);margin-right:4px}
.lr-all{margin-left:auto;font-size:13px;font-weight:600;color:#1F8A4C;text-decoration:none;white-space:nowrap}.lr-all+.lr-nav{margin-left:10px}
.lcp h1{font-size:clamp(30px,4vw,42px);margin:4px 0 6px}
.lcp-k{margin:0;color:#B8901F;font-size:13px;font-weight:700}
.lcp-sub{margin:0 0 16px;color:var(--muted);font-size:16px}
.lcp-f{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.lcp-f button{font:600 13.5px inherit;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;color:#2a2140;cursor:pointer}
.lcp-f button.on{background:#2a2140;color:#fff;border-color:#2a2140}
.lcp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:22px 16px}
.lcp-grid .lbk{width:auto}
.lcp-empty{color:var(--muted)}
.ls-find2{position:relative;display:block;overflow:hidden;text-decoration:none;color:#fff;background:#1b1426;min-height:250px}
.lsf-art{position:absolute;inset:0;display:flex}.lsf-art img{flex:1;min-width:0;height:100%;object-fit:cover;opacity:.75}
.ls-find2::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,12,28,.25),rgba(18,12,28,.92) 62%)}
.lsf-in{position:relative;z-index:1;display:flex;flex-direction:column;gap:6px;padding:90px 18px 18px}
.lsf-in small{color:#FFD54A;font-size:12px;font-weight:700}.lsf-in b{font-family:var(--serif);font-size:23px;line-height:1.15}.lsf-in>span{font-size:14px;opacity:.9}
.lsf-in .btn{margin-top:6px;font-style:normal;width:100%}
.ls2-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}.ls2-h .kicker{margin:0}.ls2-h a{font-size:13px;font-weight:600;color:#1F8A4C;text-decoration:none}
.ls2-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ls2-it{text-decoration:none;color:inherit;min-width:0}
.ls2-img{position:relative;display:block;aspect-ratio:2/3;border-radius:10px;overflow:hidden;box-shadow:0 4px 12px rgba(30,20,50,.18)}
.ls2-img img{width:100%;height:100%;object-fit:cover}
.ls2-bar{position:absolute;left:6px;right:6px;bottom:6px;height:4px;border-radius:2px;background:rgba(255,255,255,.4)}.ls2-bar i{display:block;height:100%;border-radius:2px;background:#F2C14E}
.ls2-it b{display:block;font-family:var(--serif);font-size:14px;line-height:1.15;margin-top:6px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ls2-it small{font-size:11px;color:var(--muted)}
/* categories in the sidebar */
.lib-fmt-h{font-size:24px;margin:34px 0 0;padding-top:18px;border-top:1px solid var(--line)}
.lcs .kicker{margin:0 0 8px}.lcs-k2{margin-top:16px!important}
.lcs-list{display:flex;flex-direction:column}
.lcs-a{display:flex;align-items:center;gap:12px;padding:8px 6px;border-radius:10px;text-decoration:none;color:inherit}
.lcs-a:hover,.lcs-a.on{background:#f6f1fa}
.lcs-th{position:relative;flex:none;width:42px;height:44px}
.lcs-th img{position:absolute;width:30px;height:42px;object-fit:cover;border-radius:5px;box-shadow:0 2px 6px rgba(30,20,50,.25)}
.lcs-th img:first-child{left:0;top:2px;transform:rotate(-6deg)}.lcs-th img:nth-child(2){left:12px;top:0;transform:rotate(5deg)}
.lcs-t{flex:1;min-width:0;display:flex;flex-direction:column}.lcs-t b{font-size:14.5px}.lcs-t small{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lcs-a em{font-style:normal;font-size:12px;font-weight:700;color:#6b5d80;background:#f1edf6;border-radius:20px;padding:2px 8px}

/* ---------- Manifest V2 (3 Oct): one promise, one step at a time, the jar as the only progress ---------- */
.m2-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 10px; font-size: .8rem; color: var(--soft); }
.m2-switch > span:first-child { margin-right: 2px; }
.m2-switch button { border: 1px solid var(--hair); background: var(--paper); color: var(--ink-t); border-radius: 999px; padding: 4px 12px; font: inherit; cursor: pointer; }
.m2-switch button.on { background: #1F8A4C; border-color: #1F8A4C; color: #fff; }
.m2-days { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; }
.m2-days button { padding: 4px 9px; }
.m2-hero { text-align: center; padding: 26px 22px 22px; border-radius: var(--r-sheet); color: #FFF4F0;
  background: radial-gradient(ellipse at 50% 0%, rgba(243,201,74,.14), transparent 60%), linear-gradient(180deg, #2B2C60, #1D1E46); }
.m2-hi { margin: 0; color: #D9CBE6; font-size: .95rem; }
.m2-hero h1 { margin: 6px auto 16px; max-width: 520px; color: #FFF6F0; font: 600 1.9rem/1.15 var(--voice); }
.m2-check { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.m2-check li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px 6px 7px; border-radius: 999px; background: rgba(255,255,255,.07); color: #CFC3DD; font-size: .88rem; }
.m2-check li i { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid rgba(243,221,160,.5); display: grid; place-items: center; font-style: normal; font-size: .72rem; }
.m2-check li.now { background: rgba(243,201,74,.16); color: #FFF4DE; box-shadow: inset 0 0 0 1px rgba(243,201,74,.5); }
.m2-check li.done { color: #BFE3C9; } .m2-check li.done i { background: #1F8A4C; border-color: #1F8A4C; color: #fff; }
.m2-left { margin: 12px 0 0; color: #B9AFC8; font-size: .84rem; }
.m2-new { margin: 14px auto 0; max-width: 460px; padding: 9px 14px; border-radius: 10px; background: rgba(243,201,74,.12); color: #F3E3BC; font-size: .88rem; }
.m2-new b { color: #F3C94A; font-weight: 600; }
.m2-step { margin: 14px 0 0; padding: 22px 20px 24px; border-radius: var(--r-sheet); background: var(--paper); border: 1px solid var(--hair); text-align: center; }
.m2-step.ms-table { border: 0; }
.m2-step h2 { margin: 0 0 4px; font: 600 1.55rem var(--voice); }
.m2-sub { margin: 0 auto; max-width: 480px; color: var(--soft); font-size: .92rem; }
.m2-step.ms-table .m2-sub { color: #7A6A4E; }
.m2-step .flow { border: 0; background: none; box-shadow: none; padding: 0; margin: 14px 0 0; text-align: left; }
.m2-step .mj-intf > label { display: none; }
.m2-opt { margin: 12px 0 0; border: 1px dashed var(--hair); border-radius: var(--r-sheet); background: var(--paper); }
.m2-opt > summary { cursor: pointer; padding: 12px 16px; font-size: .9rem; color: var(--ink-t); list-style: none; }
.m2-opt > summary em { font-style: normal; color: var(--soft); margin-left: 6px; font-size: .82rem; }
.m2-opt[open] > summary { border-bottom: 1px solid var(--hair); }
.m2-opt .flow { border: 0; box-shadow: none; margin: 0; }
.m2-done { margin: 14px 0 0; padding: 6px 16px; border-radius: var(--r-sheet); background: var(--paper); border: 1px solid var(--hair); }
.m2-done p { display: flex; gap: 10px; margin: 0; padding: 10px 0; font-size: .9rem; color: var(--soft); }
.m2-done p + p { border-top: 1px solid var(--hair); }
.m2-done i { flex: none; width: 20px; height: 20px; border-radius: 50%; background: #1F8A4C; color: #fff; display: grid; place-items: center; font-style: normal; font-size: .72rem; margin-top: 1px; }
.m2-done b { display: block; color: var(--ink-t); font-weight: 600; }
.m2-fin .m2-sub b { color: var(--ink-t); }
.m2-more { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.m2-more a { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--hair); background: #fff; color: var(--ink-t); text-decoration: none; font-size: .88rem; }
.m2-jar { text-align: center; padding: 18px 18px 14px; border-radius: var(--r-sheet); background: var(--paper); border: 1px solid var(--hair); margin-bottom: 14px; }
.m2-jar .jar { display: block; margin: 0 auto 6px; }
.m2-jar b { display: block; font: 600 1.25rem var(--voice); }
.m2-jar p { margin: 4px 0 0; color: var(--soft); font-size: .86rem; }
.m2-jar .m2-run { color: var(--gold-l); font-weight: 600; }
.m2-jar .jar-how { margin-top: 8px; font-size: .84rem; text-align: left; }
.m2-jar .jar-how summary { cursor: pointer; text-align: center; color: var(--soft); }
.m2-jlink { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 14px 16px; border-radius: var(--r-sheet); background: var(--paper); border: 1px solid var(--hair); color: var(--ink-t); text-decoration: none; }
.m2-jlink > span { font-size: 1.2rem; } .m2-jlink div { flex: 1; } .m2-jlink b { display: block; } .m2-jlink small { color: var(--soft); }
.m2-wel { text-align: center; padding: 8px 4px 4px; }
.m2-wel h2 { margin: 6px 0 8px; font: 600 1.6rem var(--voice); }
.m2-wel p { color: var(--soft); max-width: 340px; margin: 0 auto 18px; }
.m2-dots { display: flex; justify-content: center; gap: 6px; margin: 0 0 8px !important; }
.m2-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--hair); } .m2-dots i.on { background: #1F8A4C; }
@media (max-width: 560px) { .m2-hero h1 { font-size: 1.55rem; } .m2-days { margin-left: 0; } }
@media (max-width: 860px) { .m2-jar { display: grid; grid-template-columns: 70px 1fr; column-gap: 14px; text-align: left; align-items: center; }
  .m2-jar .jar { grid-row: span 3; width: 70px; height: auto; margin: 0; } .m2-jar .jar-how { grid-column: 1 / -1; } .m2-jar .jar-how summary { text-align: left; } }

/* ---------- Journal V2: its own module, opens like a private book ---------- */
.jv2 { padding-top: 14px; }
.jv2-cover { display: flex; align-items: center; gap: 30px; padding: 30px 34px; border-radius: var(--r-sheet); color: #FFF4F0; position: relative; overflow: hidden;
  background: radial-gradient(ellipse at 85% 0%, rgba(243,201,74,.16), transparent 55%), linear-gradient(135deg, #2B2C60, #1D1E46 70%); }
.jv2-cover::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(1px 1px at 20% 30%, #F3DDA0, transparent), radial-gradient(1px 1px at 70% 20%, #fff, transparent), radial-gradient(1.5px 1.5px at 88% 70%, #F3DDA0, transparent), radial-gradient(1px 1px at 55% 80%, #fff, transparent); }
.jv2-book { flex: none; position: relative; width: 108px; height: 140px; border-radius: 4px 12px 12px 4px; display: grid; place-items: center; transform: rotate(-4deg);
  background: linear-gradient(90deg, #4A1F33 0 9px, #7A2E4A 9px 11px, #8E3557 11px), #8E3557;
  box-shadow: 0 18px 30px -12px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.08), 6px 6px 0 -2px #EFE4D2, 6px 6px 0 -1px rgba(0,0,0,.15); }
.jv2-book::before { content: ''; position: absolute; inset: 10px 9px 10px 18px; border: 1.5px solid rgba(243,201,74,.65); border-radius: 3px 8px 8px 3px; }
.jv2-book span { font: 600 2.6rem var(--voice); color: #F3D488; text-shadow: 0 1px 0 rgba(0,0,0,.3); padding-left: 8px; }
.jv2-rib { position: absolute; top: -4px; right: 22px; width: 10px; height: 46px; background: #D9A93B; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%); }
.jv2-txt { position: relative; z-index: 1; }
.jv2-k { margin: 0; font-size: .82rem; color: #D9CBE6; }
.jv2-txt h1 { margin: 4px 0 8px; color: #FFF6F0; font: 600 2.3rem/1.05 var(--voice); }
.jv2-txt > p { margin: 0; max-width: 460px; color: #D9D4F0; }
.jv2-txt .jv2-stats { margin-top: 12px; font-size: .86rem; color: #CFC3DD; } .jv2-stats b { color: #F3D488; }
.jv2-pick { padding: 22px 22px 20px; border-radius: var(--r-sheet); background: var(--paper); border: 1px solid var(--hair); }
.jv2-pick h2, .jv2-h { margin: 0 0 14px; font: 600 1.5rem var(--voice); }
.jv2-h { margin: 26px 0 10px; }
.jv2-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.jv2-t { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 16px 16px 15px; border-radius: 12px; cursor: pointer; font: inherit; color: var(--ink-t);
  border: 1px solid var(--hair); background: #fff; transition: border-color .2s, box-shadow .2s, transform .2s; }
.jv2-t:hover { border-color: var(--gold-l); transform: translateY(-2px); box-shadow: 0 10px 20px -14px rgba(42,34,80,.45); }
.jv2-t.on { border-color: #1F8A4C; box-shadow: inset 0 0 0 1px #1F8A4C; }
.jv2-ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 1.05rem; margin-bottom: 6px; color: #fff; }
.jv2-note .jv2-ic { background: linear-gradient(135deg, #8E3557, #C2476B); }
.jv2-sign .jv2-ic { background: linear-gradient(135deg, #2B2C60, #4B4C98); color: #F3D488; }
.jv2-future .jv2-ic { background: linear-gradient(135deg, #B08A45, #D9A93B); }
.jv2-t b { font: 600 1.2rem var(--voice); }
.jv2-t small { color: var(--soft); font-size: .84rem; line-height: 1.4; }
.jv2-form { margin-top: 16px; }
.jv2-form .qn2 { margin: 0; }
.jv2-form .qn-tabs { display: none; }
@media (max-width: 760px) {
  .jv2-cover { flex-direction: column; text-align: center; gap: 18px; padding: 26px 20px; } .jv2-txt > p { margin: 0 auto; }
  .jv2-txt h1 { font-size: 1.9rem; }
  .jv2-tiles { grid-template-columns: 1fr; } .jv2-t { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 12px; }
  .jv2-t .jv2-ic { margin: 0; } .jv2-t small { flex-basis: 100%; padding-left: 50px; margin-top: -6px; }
  .jv2-pick { padding: 18px 14px; } }
.jv2 .jp-grid { margin-top: 16px; }
@media (max-width: 960px) { .jv2 .jp-main { order: 1; } .jv2 .jside { order: 2; margin-top: 16px; } }
.jv2-book.sm { width: 40px; height: 52px; transform: rotate(-4deg); box-shadow: 0 8px 14px -8px rgba(0,0,0,.5), 3px 3px 0 -1px #EFE4D2; }
.jv2-book.sm::before { inset: 4px 4px 4px 8px; border-width: 1px; }
.jv2-book.sm span { font-size: 1.1rem; padding-left: 4px; }
.jv2-book.sm .jv2-rib { width: 5px; height: 18px; right: 8px; }
.m2-jlink > .jv2-book.sm { font-size: inherit; }
.m2-jlink { gap: 16px; } .m2-jlink b { font: 600 1.2rem var(--voice); } .m2-jlink small { display: block; line-height: 1.4; font-size: .84rem; }
/* The Journal in the menu (V2): its own colour, a soft lilac, beside Manifest's gold and Your Story's pink */
.ln-nav a.nv-jour { position: relative; color: #E3D9FF; border: 1px solid rgba(190,170,255,.42); background: rgba(190,170,255,.1); }
.ln-nav a.nv-jour.on { background: rgba(190,170,255,.24); color: #F6F2FF; }
.nv-pen { font-style: normal; margin-right: 6px; color: #C6B6FF; font-size: .85em; }
.tabs a.nv-jour { color: #6A55B8; font-weight: 700; }
@media (min-width: 960px) { .ln-nav a.nv-jour, .ln-nav a.nv-jour.on { background: none !important; border: 0 !important; border-radius: 0; padding: 6px 12px; } .ln-nav a.nv-jour { color: #D5C9FF; } .ln-nav a.nv-jour.on { color: #F6F2FF; } }
.dr-feat:has(.df-jour) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.df-jour { background: linear-gradient(150deg, #EEE8FF, #D9CEF7); color: #3B2D72 !important; }
.df-jour span { background: #fff; color: #6A55B8; } .df-jour small { color: #5A4A92; }
.nv-book { vertical-align: -2px; margin-right: 6px; color: #C6B6FF; }
.tabs a.nv-jour .nv-book { color: #6A55B8; }
a.sj-write { text-decoration: none; display: inline-flex; align-items: center; }
/* The quick note, inside her journal card on Today (opens from "Write a quick entry") */
.sj-quick { margin-top: 12px; }
.sj-quick .qn2 { margin: 0; padding: 12px; box-shadow: none; }
.sj-quick .qn2-top, .sj-quick .qn-tabs { flex-wrap: wrap; }
.sj-quick .qn-tabs button { font-size: .8rem; padding: 6px 9px; }
.sj-quick .qn-feel { flex-wrap: wrap; } .sj-quick .qf-row { flex-wrap: wrap; gap: 4px; }
.sj-quick .qn-starts { display: none; }
.sj-quick .qn-foot { flex-wrap: wrap; gap: 8px; }
.sj-quick .qn-feel { display: block !important; }
.sj-quick .qn-feel .qf-q { display: block; margin-bottom: 6px; }
.sj-quick .qf-row { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 8px 4px !important; }
.sj-quick .qf-row label > span { display: flex; flex-direction: column; align-items: center; gap: 3px; width: auto !important; }
.sj-quick .qf-row em { font-size: .72rem; white-space: nowrap; }
.sj-quick #qnStarts { display: none !important; }
/* Her journal card on Today: buttons under the week, the last entry as one lean line (Lord, 3 Oct) */
.sj .sj-acts { margin-top: 12px; }
.sj .sj-write { background: #1F8A4C; border-color: #1F8A4C; color: #fff; }
.sj .sj-write[aria-expanded="true"] { background: #fff; color: #1F8A4C; }
.sj .sj-open { background: none !important; border: 0 !important; box-shadow: none !important; color: var(--ink-t) !important; padding-inline: 6px !important; text-decoration: none; }
.sj-last2 { display: flex; align-items: baseline; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--hair); text-decoration: none; color: var(--soft); font-size: .84rem; min-width: 0; }
.sj-last2 small { flex: none; font-size: .76rem; color: var(--soft); }
.sj-last2 span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--voice); font-size: .98rem; color: var(--ink-t); }
.man-top.mt-jour .sj { margin: 0 0 18px; }
/* "Open ›" sits by the title; the green button has the row to itself (Lord, 3 Oct) */
.sj .sj-top { align-items: flex-end; }
.sj-open2 { font-size: .86rem; font-weight: 600; color: #1F8A4C; text-decoration: none; padding: 4px 0; }
.sj .sj-acts .sj-write { flex: 1; width: 100%; justify-content: center; }
.sj .sj-acts { display: flex !important; } .sj .sj-acts .sj-write { flex: 1 1 auto !important; width: 100% !important; display: flex !important; justify-content: center !important; }
.sj .sj-top { align-items: flex-start !important; } .sj-open2 { margin-top: -2px; padding: 2px 0 !important; }
.sj .sj-write:hover { background: #18703D; border-color: #18703D; color: #fff; }
.sj .sj-write[aria-expanded="true"]:hover { background: #F1F8F3; color: #1F8A4C; }
.sj-open2:hover { color: #18703D; text-decoration: underline; }
.sj.sj-top1 { margin: 0 0 16px; }
/* Phone, after her ritual: the journal card is the first thing on Today, and it should pop (Lord, 3 Oct) */
.sj.sj-top1 { position: relative; overflow: hidden; border: 0; color: #FFF4F6; padding: 18px 18px 16px;
  background: radial-gradient(ellipse at 100% 0%, rgba(243,201,74,.28), transparent 55%), linear-gradient(140deg, #9A3A5E 0%, #6E2443 100%);
  box-shadow: 0 18px 34px -18px rgba(110,36,67,.75); }
.sj.sj-top1::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: radial-gradient(1px 1px at 18% 22%, #FFE3A6, transparent), radial-gradient(1.5px 1.5px at 78% 64%, #fff, transparent), radial-gradient(1px 1px at 58% 14%, #fff, transparent); }
.sj.sj-top1 > * { position: relative; z-index: 1; }
.sj.sj-top1 .sj-top { display: flex; align-items: center !important; gap: 14px; }
.sj.sj-top1 .sj-top > div { flex: 1; }
.sj.sj-top1 .jv2-book.sm { flex: none; background: linear-gradient(90deg, #3A1426 0 5px, #F3D488 5px 6px, #FBF3E2 6px); box-shadow: 0 8px 14px -8px rgba(0,0,0,.6); }
.sj.sj-top1 .jv2-book.sm::before { border-color: rgba(154,58,94,.5); }
.sj.sj-top1 .jv2-book.sm span { color: #9A3A5E; }
.sj.sj-top1 .jb2-k { color: #F6CFDB; }
.sj.sj-top1 .sj-top b { color: #fff; font-size: 1.45rem; }
.sj.sj-top1 .sj-open2 { color: #FFE3A6; align-self: flex-start; }
.sj-ask { margin: 10px 0 12px; font: italic 500 1.15rem var(--voice); color: #FFE9EF; }
.sj.sj-top1 .sj-week { background: rgba(255,255,255,.12); }
.sj.sj-top1 .sj-week small { color: #F6CFDB; }
.sj.sj-top1 .sj-d i { background: rgba(255,255,255,.22); }
.sj.sj-top1 .sj-d.has i { background: var(--c); box-shadow: 0 0 0 3px rgba(243,201,74,.25); }
.sj.sj-top1 .sj-write { background: #F3C94A !important; border-color: #F3C94A !important; color: #3A2410 !important; font-size: .95rem; padding: 13px 10px; box-shadow: 0 8px 18px -10px rgba(0,0,0,.5); }
.sj.sj-top1 .sj-write:hover { background: #F6D468 !important; }
.sj.sj-top1 .sj-write[aria-expanded="true"] { background: rgba(255,255,255,.14) !important; border-color: rgba(255,255,255,.4) !important; color: #fff !important; }
.sj.sj-top1 .sj-last2 { border-top-color: rgba(255,255,255,.2); color: #F6CFDB; }
.sj.sj-top1 .sj-last2 small { color: #F6CFDB; } .sj.sj-top1 .sj-last2 span { color: #fff; }
.sj.sj-top1 .sj-quick .qn2 { background: #FBF7F0; border-radius: 12px; }
/* Today's quick note: Save with Close beside it, the privacy line small underneath (Lord, 3 Oct) */
.sj .sj-acts[hidden] { display: none !important; }
.sjq-foot { display: flex !important; flex-direction: column; align-items: stretch !important; gap: 6px !important; }
.sjq-btns { display: flex; gap: 8px; }
.sjq-btns .btn { flex: 1; justify-content: center; }
.sjq-close { flex: none; border: 0; background: none; font: 600 .9rem 'Outfit', sans-serif; color: var(--soft); padding: 10px 12px; cursor: pointer; }
.sjq-close:hover { color: var(--ink-t); }
.sjq-foot .qn-lock { text-align: center; font-size: .74rem; }
.sjq-foot .qn-lock { display: block !important; margin: 0 !important; }

/* v2 of the phone top card (Lord: "is that the best?"): a light blush card in the house palette, ink text, the green button.
   It pops against the cream page and sits apart from the navy ritual card, without a heavy maroon block. */
.sj.sj-top1 { color: var(--ink-t); border: 1px solid #EFC9D5; background: radial-gradient(ellipse at 100% 0%, rgba(243,201,74,.22), transparent 50%), linear-gradient(160deg, #FFF1F5 0%, #F8D9E3 100%);
  box-shadow: 0 14px 30px -18px rgba(154,58,94,.55); }
.sj.sj-top1::after { display: none; }
.sj.sj-top1 .jv2-book.sm { background: linear-gradient(90deg, #4A1F33 0 5px, #7A2E4A 5px 6px, #8E3557 6px); }
.sj.sj-top1 .jv2-book.sm::before { border-color: rgba(243,201,74,.65); }
.sj.sj-top1 .jv2-book.sm span { color: #F3D488; }
.sj.sj-top1 .jb2-k { color: #9A5A72; }
.sj.sj-top1 .sj-top b { color: var(--ink-t); }
.sj.sj-top1 .sj-open2 { color: #1F8A4C; }
.sj.sj-top1 .sj-ask { color: #7A2E4A; }
.sj.sj-top1 .sj-week { background: rgba(255,255,255,.75); }
.sj.sj-top1 .sj-week small { color: var(--soft); }
.sj.sj-top1 .sj-d i { background: #EADDE2; }
.sj.sj-top1 .sj-write { background: #1F8A4C !important; border-color: #1F8A4C !important; color: #fff !important; }
.sj.sj-top1 .sj-write:hover { background: #18703D !important; }
.sj.sj-top1 .sj-last2 { border-top-color: #EFC9D5; color: var(--soft); }
.sj.sj-top1 .sj-last2 small { color: var(--soft); } .sj.sj-top1 .sj-last2 span { color: var(--ink-t); }

/* On a phone, the quick note opens as a sheet from the bottom, so the page does not jump */
.sjq-dim { position: fixed; inset: 0; background: rgba(36,27,46,.45); z-index: 190; opacity: 0; pointer-events: none; transition: opacity .25s; }
body.sjq-open .sjq-dim { opacity: 1; pointer-events: auto; }
body.sjq-open { overflow: hidden; }
.sj.sj-top1 .sj-quick:not([hidden]) { position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; margin: 0; max-height: 88vh; overflow-y: auto;
  background: #FBF7F0; border-radius: 22px 22px 0 0; padding: 22px 14px calc(14px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -18px 40px -20px rgba(36,27,46,.5);
  animation: sjqUp .28s ease-out; }
.sj.sj-top1 .sj-quick:not([hidden])::before { content: ''; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: #D9CDBE; }
.sj.sj-top1 .sj-quick .qn2 { background: none; border: 0; padding: 0; }
@keyframes sjqUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sj.sj-top1 .sj-quick:not([hidden]) { animation: none; } }
/* Desktop: the quick note opens as a pop-up in the middle of the screen */
@media (min-width: 960px) {
  .sj.sj-top1 { margin-bottom: 18px; }
  .sj.sj-top1 .sj-quick:not([hidden]) { left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: min(560px, 92vw); height: fit-content; max-height: 86vh;
    border-radius: 22px; padding: 26px 22px 18px; animation: sjqPop .22s ease-out; }
  .sj.sj-top1 .sj-quick:not([hidden])::before { display: none; }
  .sj-quick .qf-row { grid-template-columns: repeat(6, 1fr) !important; }
  .sj-quick #qnStarts { display: flex !important; }
}
@keyframes sjqPop { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }

/* ---------- The floating journal (docs/milestones/floating-journal.md) ---------- */
.qfab { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 150; display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px 11px 14px; border-radius: 999px; border: 1px solid #EFC9D5; cursor: pointer; font: 600 .92rem 'Outfit', sans-serif; color: #6E2443;
  background: linear-gradient(160deg, #FFF1F5, #F8D9E3); box-shadow: 0 12px 26px -10px rgba(110,36,67,.45), 0 2px 6px rgba(110,36,67,.12); transition: transform .2s, box-shadow .2s; }
.qfab span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #8E3557, #C2476B); color: #fff; font-size: .82rem; }
.qfab:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -10px rgba(110,36,67,.5); }
.qfab:focus-visible { outline: 2px solid #1F8A4C; outline-offset: 3px; }
.qfab[hidden] { display: none !important; }
/* out of the way whenever something covers the screen, or a film is playing */
body.popped .qfab, body.menu-open .qfab, body.qns-open .qfab, body.sjq-open .qfab, body:has(.wv:not(.ended)) .qfab, body:has(.lib-sheet:not([hidden])) .qfab { display: none !important; }
@media (max-width: 959px) { .qfab { padding: 0; width: 54px; height: 54px; justify-content: center; } .qfab b { display: none; } .qfab span { width: 54px; height: 54px; font-size: 1.15rem; } .qfab { border: 0; background: none; } }

.qns { position: fixed; inset: 0; z-index: 200; background: rgba(36,27,46,.45); animation: qnsFade .2s ease-out; }
.qns[hidden] { display: none !important; }
body.qns-open { overflow: hidden; }
.qns-card { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88vh; overflow-y: auto; background: #FBF7F0; border-radius: 22px 22px 0 0;
  padding: 24px 14px calc(14px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -18px 40px -20px rgba(36,27,46,.5); animation: sjqUp .28s ease-out; }
.qns-card::before { content: ''; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: #D9CDBE; }
.qns-card .qn2 { background: none; border: 0; padding: 0; margin: 0; box-shadow: none; }
.qns-card .qn-lock { display: block !important; margin: 0 !important; }
.qns-card .qf-row { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 8px 4px !important; }
.qns-card .qf-row label > span { display: flex; flex-direction: column; align-items: center; gap: 3px; width: auto !important; }
.qns-card .qn-feel { display: block !important; } .qns-card .qn-feel .qf-q { display: block; margin-bottom: 6px; }
.qns-card #qnStarts { display: none !important; }
.qns-from { display: flex; align-items: center; gap: 6px; width: fit-content; margin: 0 0 12px; padding: 4px 6px 4px 12px; border-radius: 999px; background: #F8E3EA; color: #7A2E4A; font-size: .8rem; }
.qns-from[hidden] { display: none; }
.qns-from button { border: 0; background: none; color: #9A5A72; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 4px; }
.qns-card:has(.qr-att) .qn2 { display: none; }
@media (min-width: 960px) {
  .qns-card { left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: min(560px, 92vw); height: fit-content; max-height: 86vh; border-radius: 22px; padding: 24px 22px 18px; animation: sjqPop .22s ease-out; }
  .qns-card::before { display: none; }
  .qns-card .qf-row { grid-template-columns: repeat(6, 1fr) !important; }
  .qns-card #qnStarts { display: flex !important; }
}
@keyframes qnsFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .qns, .qns-card { animation: none; } }
/* in a chat: the ✎ in the message box */
.cmp-jr { border: 1px solid #EFC9D5; background: #FFF1F5; color: #7A2E4A; border-radius: 999px; padding: 4px 10px; font: 600 .76rem 'Outfit', sans-serif; cursor: pointer; margin-right: 8px; flex: none; }
.cmp-jr:hover { background: #F8D9E3; }

/* Floating journal v2 (Lord, 3 Oct): Messenger blue, and a chat-style window docked bottom right. No dimming on desktop,
   so she can keep watching or reading while she writes. */
.qfab { color: #fff; border: 0; background: #1877F2; box-shadow: 0 10px 24px -8px rgba(24,119,242,.55), 0 2px 6px rgba(0,0,0,.12); padding: 10px 18px 10px 10px; }
.qfab span { background: rgba(255,255,255,.2); color: #fff; }
.qfab:hover { background: #166FE5; box-shadow: 0 14px 28px -8px rgba(24,119,242,.6); }
body:has(.wv:not(.ended)) .qfab { display: inline-flex !important; }   /* she may want to write while the film plays */
body:has(.wv:not(.ended)) .qfab[hidden], body.popped .qfab, body.menu-open .qfab, body.qns-open .qfab { display: none !important; }
.qfab { z-index: 160; }
.qns-head { display: flex; align-items: center; gap: 10px; margin: -24px -14px 14px; padding: 12px 12px 12px 14px; background: #1877F2; color: #fff; border-radius: 22px 22px 0 0; position: sticky; top: -24px; z-index: 2; }
.qns-ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.2); flex: none; }
.qns-head div { flex: 1; min-width: 0; } .qns-head b { display: block; font: 700 .98rem 'Outfit', sans-serif; } .qns-head small { font-size: .74rem; opacity: .85; }
.qns-go { color: #fff; font: 600 .82rem 'Outfit', sans-serif; text-decoration: none; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.16); }
.qns-go:hover { background: rgba(255,255,255,.26); }
.qns-x { border: 0; background: none; color: #fff; font-size: 1.5rem; line-height: 1; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; }
.qns-x:hover { background: rgba(255,255,255,.16); }
.qns-card::before { display: none !important; }
.qns-from { background: #E7F0FE; color: #0B5BD3; } .qns-from button { color: #4A86E0; }
.cmp-jr { border-color: #CFE0FC; background: #E7F0FE; color: #0B5BD3; } .cmp-jr:hover { background: #D6E6FD; }
@media (min-width: 960px) {
  .qns { background: none; pointer-events: none; animation: none; inset: auto 24px 0 auto; width: 380px; height: 0; overflow: visible; }
  .qns-card { pointer-events: auto; position: fixed; left: auto; top: auto; right: 24px; bottom: 0; margin: 0; width: 380px; height: auto; max-height: min(640px, 82vh);
    border-radius: 14px 14px 0 0; padding: 24px 16px 14px; box-shadow: 0 -4px 30px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.06); animation: sjqUp .22s ease-out; }
  .qns-head { margin: -24px -16px 14px; border-radius: 14px 14px 0 0; }
  .qns-card .qf-row { grid-template-columns: repeat(3, 1fr) !important; }
  .qns-card #qnStarts { display: none !important; }
  body.qns-open { overflow: auto; }
}

/* Evening check-in, calmer (Lord, 3 Oct: "is gold and purple really the best?"): a plain paper card, questions split by
   hairlines instead of lilac boxes, white chips, and one colour for "yes": soft green with a tick. */
#eveningForm.flow { background: #FFFDF9 !important; border: 1px solid var(--hair) !important; box-shadow: 0 10px 28px -22px rgba(42,34,48,.35) !important; }
#eveningForm .ev-sign, #eveningForm .ev-tom { background: none !important; border: 0 !important; border-top: 1px solid var(--hair) !important; border-radius: 0 !important; padding: 14px 0 6px !important; margin: 10px 0 0 !important; }
#eveningForm .ev-sq, #eveningForm .ev-tq { font: 600 1.05rem var(--voice) !important; color: var(--ink-t) !important; margin: 0 0 10px !important; font-style: normal !important; }
#eveningForm .sg-opts button { background: #fff; border: 1px solid var(--hair); color: var(--ink-t); transition: background .15s, border-color .15s; }
#eveningForm .sg-opts button:hover { border-color: #B9D9C4; }
#eveningForm .sg-opts button:not(.sg-none).on, #eveningForm .ev-tom .sg-opts button.on { background: #E8F5EC !important; border-color: #1F8A4C !important; color: #17663A !important; }
#eveningForm .sg-opts button:not(.sg-none).on::before, #eveningForm .ev-tom .sg-opts button.on::before { content: '✓ '; font-weight: 700; }
#eveningForm .sg-none { border-style: dashed; color: var(--soft); }
#eveningForm .sg-none.on { background: #F1EEEA !important; border-color: #CFC6BA !important; border-style: solid; color: var(--ink-t) !important; }
#eveningForm .orbs input:checked + span { box-shadow: 0 0 0 2px #1F8A4C; background: #F3FAF5; }
#eveningForm .sg-add { color: #1F8A4C; }
#eveningForm .ev-tom { border-left: 0 !important; border-right: 0 !important; border-bottom: 0 !important; box-shadow: none !important; outline: 0 !important; }
#eveningForm .ev-tq::first-letter { color: inherit; }

/* The journal card, leaner (Lord, 3 Oct: "a lot of white space is being wasted") */
.sj.sj-top1 { padding: 12px 14px 12px !important; }
.sj.sj-top1 .sj-top { align-items: center !important; gap: 12px !important; margin: 0 !important; }
.sj.sj-top1 .jv2-book.sm { width: 30px; height: 40px; } .sj.sj-top1 .jv2-book.sm span { font-size: .85rem; }
.sj.sj-top1 .jv2-book.sm .jv2-rib { height: 14px; right: 6px; }
.sj.sj-top1 .sj-top b { font-size: 1.25rem !important; line-height: 1.1; }
.sj.sj-top1 .sj-ask { margin: 2px 0 0 !important; font-size: .95rem !important; line-height: 1.25; }
.sj.sj-top1 .sj-open2 { align-self: center !important; }
.sj.sj-top1 .sj-week { margin-top: 10px !important; padding: 6px 10px !important; }
.sj.sj-top1 .sj-week small { font-size: .62rem; }
.sj.sj-top1 .sj-d i { width: 12px; height: 12px; }
.sj.sj-top1 .sj-acts { margin-top: 10px !important; }
.sj.sj-top1 .sj-write { padding: 10px !important; font-size: .9rem !important; }
.sj.sj-top1 .sj-last2 { margin-top: 10px !important; padding-top: 8px !important; }

/* Lord, 3 Oct: "blueish, not ugly blue" - a soft dusk blue that sits with the night palette; the quick-entry button is gold */
.qfab { background: linear-gradient(160deg, #6F8FD8, #4F6FBF) !important; box-shadow: 0 10px 24px -10px rgba(63,90,170,.55), 0 2px 6px rgba(0,0,0,.1) !important; }
.qfab:hover { background: linear-gradient(160deg, #6A89D2, #4766B4) !important; }
.qns-head { background: linear-gradient(160deg, #6F8FD8, #4F6FBF) !important; }
.qns-from { background: #EAF0FB !important; color: #3F5CA8 !important; } .qns-from button { color: #6F8FD8 !important; }
.cmp-jr { border-color: #D3DEF4 !important; background: #EEF3FC !important; color: #3F5CA8 !important; }
@media (max-width: 959px) {
  .qfab { width: 56px !important; height: 56px !important; padding: 0 !important; border-radius: 50% !important; justify-content: center; }
  .qfab span { width: auto !important; height: auto !important; background: none !important; font-size: 1.25rem !important; }
}
.sj .sj-write, .sj.sj-top1 .sj-write { background: #F3C94A !important; border-color: #F3C94A !important; color: #3A2410 !important; }
.sj .sj-write:hover, .sj.sj-top1 .sj-write:hover { background: #F6D468 !important; border-color: #F6D468 !important; color: #3A2410 !important; }
/* Evening check-in: readable title, aligned number, stronger question headlines (Lord, 3 Oct) */
#eveningForm .fl-head { display: flex !important; align-items: center !important; gap: 14px !important; }
#eveningForm .fl-head .fl-n { flex: none; margin: 0 !important; align-self: center !important; }
#eveningForm .fl-head > div { display: flex; flex-direction: column; justify-content: center; }
#eveningForm .fl-head b { color: var(--ink-t) !important; font: 600 1.45rem/1.15 var(--voice) !important; margin: 0 !important; }
#eveningForm .fl-head small { color: var(--soft) !important; margin: 2px 0 0 !important; font-size: .82rem !important; }
#eveningForm .fl-lab, #eveningForm .ev-sq, #eveningForm .ev-tq { color: var(--ink-t) !important; font: 700 1.22rem/1.25 var(--voice) !important; letter-spacing: .005em; margin: 0 0 12px !important; }
#eveningForm .fl-lab { margin-top: 14px !important; }
#eveningForm .ev-tq { display: flex; align-items: center; gap: 8px; }
/* Lord, 3 Oct: the same night blue as the "Good evening" stage, with gold */
.qfab, .qfab:hover { background: radial-gradient(ellipse at 30% 0%, rgba(243,201,74,.18), transparent 60%), linear-gradient(160deg, #2F3170, #1D1E46) !important; color: #F3DDA0 !important;
  box-shadow: 0 12px 26px -10px rgba(29,30,70,.6), 0 0 0 1px rgba(243,201,74,.25) !important; }
.qfab span { background: rgba(243,201,74,.16) !important; color: #F3C94A !important; }
.qfab:hover { filter: brightness(1.08); }
.qns-head { background: radial-gradient(ellipse at 85% 0%, rgba(243,201,74,.16), transparent 55%), linear-gradient(160deg, #2F3170, #1D1E46) !important; color: #FFF6F0 !important; }
.qns-ic { background: rgba(243,201,74,.16) !important; color: #F3C94A; }
.qns-head small { color: #CFC9EC; opacity: 1 !important; }
.qns-go { background: rgba(243,201,74,.14) !important; color: #F3DDA0 !important; } .qns-go:hover { background: rgba(243,201,74,.24) !important; }
.qns-from { background: #EEEDF8 !important; color: #2F3170 !important; } .qns-from button { color: #6B6CA8 !important; }
.cmp-jr { border-color: #DCDBF0 !important; background: #F1F0FA !important; color: #2F3170 !important; }
@media (max-width: 959px) { .qfab span { background: none !important; } }
/* The S menu (Lord, 3 Oct): the envelope lives in here now */
.ln-letters { display: none !important; }
.ln-right .avatar { position: relative; cursor: pointer; }
.ln-right .avatar.has-new::after { content: ''; position: absolute; top: -1px; right: -1px; width: 10px; height: 10px; border-radius: 50%; background: #D8443A; box-shadow: 0 0 0 2px #1E1A24; }
.pmenu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 120; width: 230px; padding: 6px; border-radius: 14px; background: #FFFDF9; border: 1px solid var(--hair);
  box-shadow: 0 18px 40px -16px rgba(36,27,46,.45); animation: sjqPop .16s ease-out; }
.pmenu[hidden] { display: none !important; }
.pm-me { margin: 0; padding: 10px 12px 10px; border-bottom: 1px solid var(--hair); }
.pm-me b { display: block; font: 600 1.05rem var(--voice); color: var(--ink-t); } .pm-me small { color: var(--soft); font-size: .76rem; }
.pmenu a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--ink-t); text-decoration: none; font: 500 .9rem 'Outfit', sans-serif; }
.pmenu a:hover { background: #F4EFE7; }
.pmenu a i { width: 22px; text-align: center; font-style: normal; color: #4B4C8E; }
.pmenu a em { margin-left: auto; font-style: normal; font-size: .7rem; font-weight: 700; color: #fff; background: #D8443A; border-radius: 999px; padding: 2px 8px; }
.pmenu a.pm-out { margin-top: 4px; border-top: 1px solid var(--hair); border-radius: 0 0 10px 10px; color: var(--soft); }
.pmenu a.pm-out i { color: var(--soft); }
.pmenu::before { content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }   /* a bridge, so the hover holds on the way down */
/* Phone capsule: "✎ Journal", slim (Lord, 3 Oct) */
@media (max-width: 959px) {
  .qfab { width: auto !important; height: 40px !important; padding: 0 14px 0 10px !important; border-radius: 999px !important; gap: 6px !important; font-size: .84rem !important; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .qfab span { width: 24px !important; height: 24px !important; font-size: .78rem !important; background: rgba(243,201,74,.16) !important; }
  .qfab b { display: inline !important; font-size: 0 !important; }
  .qfab b::after { content: 'Journal'; font-size: .84rem; }
}
/* The note on a phone, leaner (Lord, 3 Oct): moods in one row, slimmer header and tabs, a shorter box */
@media (max-width: 959px) {
  .qns-card { padding: 16px 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important; }
  .qns-head { margin: -16px -12px 10px !important; padding: 10px 10px 10px 12px !important; gap: 8px !important; }
  .qns-ic { width: 26px !important; height: 26px !important; font-size: .8rem; }
  .qns-head b { font-size: .92rem !important; } .qns-head small { font-size: .7rem !important; }
  .qns-go { padding: 4px 10px !important; font-size: .76rem !important; }
  .qns-x { width: 28px !important; height: 28px !important; font-size: 1.25rem !important; }
  .qns-from { margin-bottom: 8px !important; font-size: .74rem !important; }
  .qns-card .qn2-top { margin-bottom: 8px !important; }
  .qns-card .qn-tabs button { padding: 5px 10px !important; font-size: .78rem !important; }
  .qns-card .qn-feel { margin: 0 0 8px !important; }
  .qns-card .qn-feel .qf-q { font-size: .82rem !important; margin-bottom: 4px !important; }
  .qns-card .qf-row { grid-template-columns: repeat(6, 1fr) !important; gap: 0 2px !important; }
  .qns-card .qf-row label > span { gap: 2px !important; padding: 2px 0 !important; }
  .qns-card .qn-feel label > span i { width: 30px !important; height: 30px !important; font-size: .82rem !important; }
  .qns-card .qf-row em { font-size: .64rem !important; }
  .qns-card #qnText { min-height: 96px !important; height: 96px; font-size: 1rem; }
  .qns-card .qn-tools { padding: 6px 10px !important; }
  .qns-card .sjq-foot { margin-top: 8px !important; gap: 4px !important; }
  .qns-card .sjq-btns .btn { padding: 11px !important; }
}
/* Journal card: the journal's own navy + gold, as a pale tint, instead of pink (Lord, 3 Oct) */
.sj.sj-top1 { border: 1px solid #DCDBF0 !important; background: radial-gradient(ellipse at 100% 0%, rgba(243,201,74,.16), transparent 50%), linear-gradient(160deg, #F7F6FD 0%, #E9E8F7 100%) !important;
  box-shadow: 0 14px 30px -20px rgba(29,30,70,.45) !important; }
.sj.sj-top1 .jv2-book.sm { background: linear-gradient(90deg, #14153A 0 5px, #C9A032 5px 6px, #2F3170 6px) !important; }
.sj.sj-top1 .jv2-book.sm::before { border-color: rgba(243,201,74,.7) !important; }
.sj.sj-top1 .jv2-book.sm span { color: #F3D488 !important; }
.sj.sj-top1 .sj-top b { color: #1D1E46 !important; }
.sj.sj-top1 .sj-ask { color: #4B4C8E !important; }
.sj.sj-top1 .sj-open2 { color: #2F3170 !important; } .sj.sj-top1 .sj-open2:hover { color: #1D1E46 !important; }
.sj.sj-top1 .sj-week { background: rgba(255,255,255,.8) !important; }
.sj.sj-top1 .sj-d i { background: #E2E1F0 !important; }
.sj.sj-top1 .sj-last2 { border-top-color: #DCDBF0 !important; }
/* Lord, 3 Oct: the journal card goes light blue; once her ritual is done, the "Good evening" card goes rose pink */
.sj.sj-top1 { border-color: #CFDDF3 !important; background: radial-gradient(ellipse at 100% 0%, rgba(243,201,74,.16), transparent 50%), linear-gradient(160deg, #F3F8FF 0%, #E2ECFA 100%) !important; }
.sj.sj-top1 .sj-d i { background: #DCE5F3 !important; } .sj.sj-top1 .sj-last2 { border-top-color: #CFDDF3 !important; }
.scene.compact.watered { background: radial-gradient(ellipse at 15% 0%, rgba(243,201,74,.22), transparent 55%), linear-gradient(150deg, #FCE8EE 0%, #F4CFDB 100%) !important; border: 1px solid #EDC3D1 !important; box-shadow: 0 16px 34px -22px rgba(142,53,87,.55) !important; }
.scene.compact.watered::before, .scene.compact.watered::after { opacity: .25; }
.scene.compact.watered .sc-hi { color: #9A4A68 !important; }
.scene.compact.watered .sc-h { color: #4A1F33 !important; }
.scene.compact.watered .sc-chips span { color: #6E2443 !important; background: rgba(255,255,255,.6) !important; border-color: #EBC2D0 !important; }
.scene.compact.watered .sc-chips span.gold { color: #7A5A10 !important; background: #FFF4D2 !important; border-color: #EAD08A !important; }
.scene.compact.watered .sc-next { background: rgba(255,255,255,.45) !important; border-top-color: #EDC3D1 !important; color: #6E2443 !important; }
.scene.compact.watered .sc-next b { color: #8E3557 !important; }
.scene.compact.watered .sc-moon { color: #C2476B; }
.scene.compact.watered .sc-rose { background: radial-gradient(circle, #fff 0%, #F8DCE5 70%) !important; }
/* Lord, 3 Oct: the journal card in the ritual's night blue and gold */
.sj.sj-top1 { border: 0 !important; color: #FFF4F0 !important;
  background: radial-gradient(ellipse at 85% 0%, rgba(243,201,74,.18), transparent 55%), linear-gradient(160deg, #2F3170 0%, #1D1E46 100%) !important;
  box-shadow: 0 18px 34px -20px rgba(29,30,70,.75) !important; }
.sj.sj-top1::after { display: block !important; opacity: .5 !important; background-image: radial-gradient(1px 1px at 18% 30%, #F3DDA0, transparent), radial-gradient(1px 1px at 62% 18%, #fff, transparent), radial-gradient(1.5px 1.5px at 84% 70%, #F3DDA0, transparent), radial-gradient(1px 1px at 40% 82%, #fff, transparent) !important; }
.sj.sj-top1 .jv2-book.sm { background: linear-gradient(90deg, #4A1F33 0 5px, #F3D488 5px 6px, #FBF3E2 6px) !important; }
.sj.sj-top1 .jv2-book.sm::before { border-color: rgba(47,49,112,.45) !important; }
.sj.sj-top1 .jv2-book.sm span { color: #2F3170 !important; }
.sj.sj-top1 .sj-top b { color: #FFF6F0 !important; }
.sj.sj-top1 .sj-ask { color: #F3DDA0 !important; }
.sj.sj-top1 .sj-open2 { color: #F3DDA0 !important; } .sj.sj-top1 .sj-open2:hover { color: #FFF3C8 !important; }
.sj.sj-top1 .sj-week { background: rgba(255,255,255,.08) !important; }
.sj.sj-top1 .sj-week small { color: #C4C0E2 !important; }
.sj.sj-top1 .sj-d i { background: rgba(255,255,255,.18) !important; }
.sj.sj-top1 .sj-d.has i { background: #F3C94A !important; box-shadow: 0 0 0 3px rgba(243,201,74,.22) !important; }
.sj.sj-top1 .sj-last2 { border-top-color: rgba(255,255,255,.12) !important; color: #C4C0E2 !important; }
.sj.sj-top1 .sj-last2 small { color: #C4C0E2 !important; } .sj.sj-top1 .sj-last2 span { color: #FFF6F0 !important; }
/* Desktop, before her ritual is done: the journal card is light blue, so the navy ritual stage leads (Lord, 3 Oct) */
@media (min-width: 960px) {
  .sj.sj-top1.sj-pre { color: var(--ink-t) !important; border: 1px solid #CFDDF3 !important; background: radial-gradient(ellipse at 100% 0%, rgba(243,201,74,.16), transparent 50%), linear-gradient(160deg, #F3F8FF 0%, #E2ECFA 100%) !important; box-shadow: 0 14px 30px -20px rgba(29,30,70,.4) !important; }
  .sj.sj-top1.sj-pre::after { display: none !important; }
  .sj.sj-top1.sj-pre .jv2-book.sm { background: linear-gradient(90deg, #14153A 0 5px, #C9A032 5px 6px, #2F3170 6px) !important; }
  .sj.sj-top1.sj-pre .jv2-book.sm::before { border-color: rgba(243,201,74,.7) !important; }
  .sj.sj-top1.sj-pre .jv2-book.sm span { color: #F3D488 !important; }
  .sj.sj-top1.sj-pre .sj-top b { color: #1D1E46 !important; }
  .sj.sj-top1.sj-pre .sj-ask { color: #4B4C8E !important; }
  .sj.sj-top1.sj-pre .sj-open2 { color: #2F3170 !important; }
  .sj.sj-top1.sj-pre .sj-week { background: rgba(255,255,255,.8) !important; }
  .sj.sj-top1.sj-pre .sj-week small { color: var(--soft) !important; }
  .sj.sj-top1.sj-pre .sj-d i { background: #DCE5F3 !important; }
  .sj.sj-top1.sj-pre .sj-d.has i { background: #E0B84F !important; }
  .sj.sj-top1.sj-pre .sj-last2 { border-top-color: #CFDDF3 !important; color: var(--soft) !important; }
  .sj.sj-top1.sj-pre .sj-last2 small { color: var(--soft) !important; } .sj.sj-top1.sj-pre .sj-last2 span { color: var(--ink-t) !important; }
}
/* Evening questions stand out (Lord, 3 Oct): a night-blue badge with a gold symbol, and a bold navy headline */
#eveningForm .evq { display: flex !important; align-items: center !important; gap: 12px !important; font: 700 1.45rem/1.2 var(--voice) !important; color: #1D1E46 !important; margin: 4px 0 14px !important; }
#eveningForm .evq-ic { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: .95rem; color: #F3C94A;
  background: radial-gradient(circle at 30% 25%, #3A3C82, #1D1E46); box-shadow: 0 6px 14px -6px rgba(29,30,70,.6), inset 0 0 0 1px rgba(243,201,74,.35); }
#eveningForm .ev-sign, #eveningForm .ev-tom { padding-top: 20px !important; margin-top: 16px !important; }
#eveningForm .sg-opts, #eveningForm .orbs { padding-left: 46px; }
@media (max-width: 560px) { #eveningForm .evq { font-size: 1.22rem !important; gap: 10px !important; } #eveningForm .evq-ic { width: 30px; height: 30px; } #eveningForm .sg-opts, #eveningForm .orbs { padding-left: 0; } }
.fl-jlink { color: #2F3170; font-weight: 600; text-decoration: none; white-space: nowrap; } .fl-jlink:hover { text-decoration: underline; }
.sj.sj-mf { margin-bottom: 14px; }
/* Evening check-in, waiting or done: the warm gold card (Lord, 3 Oct) */
.flows > .flow.later#step4 { opacity: 1 !important; display: block !important; padding: 16px 18px !important; border-radius: 16px !important;
  background: radial-gradient(ellipse at 100% 0%, rgba(243,201,74,.25), transparent 55%), linear-gradient(160deg, #FFF8E6, #F8ECCD) !important;
  border: 1px solid #EBD9A8 !important; box-shadow: 0 12px 26px -20px rgba(122,90,16,.5) !important; }
.later#step4 .fl-head { display: flex !important; align-items: center !important; gap: 12px !important; margin: 0 !important; }
.later#step4 .fl-n { width: 32px !important; height: 32px !important; font-size: .85rem !important; border: 0 !important; color: #F3C94A !important;
  background: radial-gradient(circle at 30% 25%, #3A3C82, #1D1E46) !important; box-shadow: inset 0 0 0 1px rgba(243,201,74,.4); }
.later#step4 .fl-head div { display: flex !important; align-items: baseline; flex-wrap: wrap; gap: 0 10px; }
.later#step4 .fl-head b { font: 700 1.2rem var(--voice) !important; color: #4A3608 !important; }
.later#step4 .fl-head small { margin: 0 !important; display: inline !important; font-weight: 600; color: #8A6A14 !important; background: rgba(255,255,255,.7); border: 1px solid #EAD08A; border-radius: 999px; padding: 2px 10px; font-size: .76rem !important; }
.later#step4 .fl-int { display: block !important; margin: 8px 0 0 44px !important; color: #6B5320 !important; font-size: .9rem; line-height: 1.5; }
.fl-jlink { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 8px 16px; border-radius: 999px; white-space: nowrap; text-decoration: none !important;
  background: radial-gradient(circle at 30% 0%, #3A3C82, #1D1E46); color: #F3DDA0 !important; font: 600 .86rem 'Outfit', sans-serif; box-shadow: 0 8px 16px -10px rgba(29,30,70,.6); }
.fl-jlink:hover { filter: brightness(1.12); }
@media (max-width: 560px) { .later#step4 .fl-int { margin-left: 0 !important; } }
.fl-jlink2 { color: #2F3170; font-weight: 700; font-style: normal; text-decoration: none; white-space: nowrap; margin-left: 4px; } .fl-jlink2:hover { text-decoration: underline; }
.flow.done#step4:not(.show) .fl-jlink2 { display: none; }
.sbn-top { height: auto !important; overflow: hidden; } .sbn-top .sart-img.sm { height: 96px; }
.sbn-top .sart-img { margin: 0 !important; border-radius: 0 !important; display: block; } .sbn-top .sart-img img { display: block; }
/* Today in love (side, opened): the reading on the night card was grey on navy; make it readable (Lord, 3 Oct) */
.slim-full .tl-prev .tl-h, .side .tl-prev .tl-h { color: #ECE8F8 !important; font-size: .95rem !important; line-height: 1.6 !important; padding: 18px 20px !important; border-radius: 16px !important; margin: 8px 0 0 !important; }
/* The note never runs off the screen (Lord, 3 Oct bug: Save hidden on "A Sign" / "To Future Me"):
   header pinned at the top, Close + Save pinned at the bottom, the middle scrolls */
.qns-card { display: flex !important; flex-direction: column; overflow: hidden !important; }
.qns-card > .qns-head { position: relative !important; top: auto !important; flex: none; }
.qns-card > .qns-from { flex: none; }
.qns-card > .qn2 { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.qns-card .qn2 > *:not(.qn-more) { flex: none; }
.qns-card .qn2 { overflow-y: auto !important; overscroll-behavior: contain; }
.qns-card .sjq-foot { position: sticky; bottom: -1px; z-index: 3; background: #FBF7F0; padding: 8px 0 2px; margin-top: 10px !important; box-shadow: 0 -12px 14px -12px rgba(36,27,46,.25); }
@media (min-width: 960px) { .qns-card { max-height: calc(100vh - 96px) !important; } }
@media (max-width: 959px) { .qns-card { max-height: 86vh !important; } }
.qns-card .qn-more { display: contents !important; }
/* Signs in the note: compact chips, four shown, then More (Lord, 3 Oct) */
.qns-card .qn-signs .qs-row { display: flex; flex-wrap: wrap; gap: 6px; }
.qns-card .qn-signs .qs-row.qs-few label:nth-child(n+5):not(:nth-last-child(2)) { display: none; }
.qns-card .qn-signs .qs-row label > span { padding: 5px 10px 5px 5px !important; font-size: .8rem !important; gap: 6px !important; }
.qns-card .qn-signs .qs-row label > span i { width: 22px !important; height: 22px !important; font-size: .7rem !important; }
.qs-more { border: 1px dashed #D9CBA0; background: none; border-radius: 999px; padding: 5px 12px; font: 600 .8rem 'Outfit', sans-serif; color: #8A6A14; cursor: pointer; }
.qs-more:hover { background: #FFF8E6; }

/* Colour roles (Lord, 3 Oct): navy = magic moments (the stage, and the header), gold = the one main action + rewards,
   rose = love, cream paper = reading, green = only ticks. */
.ln-bar { background: radial-gradient(ellipse at 50% -40%, rgba(243,201,74,.10), transparent 60%), linear-gradient(180deg, #23245A, #1D1E46) !important; border-bottom: 1px solid rgba(243,201,74,.12); }
/* (removed: navy drawer header) */
/* The journal card on desktop is light, with a quiet gold button, so it never outshouts the letter */
@media (min-width: 960px) {
  .sj.sj-top1.sj-pre .sj-write { background: #FFF6DC !important; border: 1px solid #E6C76E !important; color: #6B4E00 !important; box-shadow: none !important; }
  .sj.sj-top1.sj-pre .sj-write:hover { background: #FFEFC2 !important; }
}
/* "Ritual done" card: chips sit in rows, not one per line; the title reads as a title (Lord, 3 Oct) */
@media (min-width: 960px) {
  .scene.compact.watered .sc-row { gap: 16px !important; padding: 18px 20px 16px !important; }
  .scene.compact.watered .sc-txt { flex: 1 1 auto; min-width: 0; }
  .scene.compact.watered .sc-h { font-size: 1.45rem !important; margin: 0 0 8px !important; }
  .scene.compact.watered .sc-chips { gap: 5px !important; }
  .scene.compact.watered .sc-chips span { font-size: .72rem !important; padding: 3px 9px !important; }
  .scene.compact.watered .read-now { padding: 10px 18px !important; font-size: .9rem !important; }
}
.lt-seal { display: none !important; }   /* Lord, 3 Oct: no wax seal above the letter */
.scene.compact.watered { margin-bottom: 14px !important; } #msg .lt-letter { margin-top: 0 !important; padding-top: 26px !important; }   /* tighter now the seal is gone */
/* The credits she just earned shimmer on the "ritual done" card (replaces the pop-up) */
.sc-chips .gold.just-earned { animation: scEarn 1.6s ease-out 1; }
@keyframes scEarn { 0% { transform: scale(.8); box-shadow: 0 0 0 0 rgba(243,201,74,.7); } 40% { transform: scale(1.12); box-shadow: 0 0 0 10px rgba(243,201,74,0); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .sc-chips .gold.just-earned { animation: none; } }
/* "Your Message Is Being Unlocked": three soft gold dots while the letter opens */
.um-opening { display: flex; justify-content: center; gap: 8px; margin: 14px 0 4px; }
.um-opening span { width: 9px; height: 9px; border-radius: 50%; background: #F3C94A; opacity: .3; animation: umDot 1s ease-in-out infinite; }
.um-opening span:nth-child(2) { animation-delay: .18s; } .um-opening span:nth-child(3) { animation-delay: .36s; }
@keyframes umDot { 50% { opacity: 1; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .um-opening span { animation: none; opacity: .8; } }
/* "Being unlocked": a gold bar fills (1.6s), then the credits for the message fade in as one line */
.um-bar { width: min(260px, 70%); height: 6px; margin: 16px auto 0; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; }
.um-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #E0B84F, #F3C94A, #FFE7A0); box-shadow: 0 0 12px rgba(243,201,74,.6); animation: umFill 2.8s ease-in-out forwards; }
@keyframes umFill { to { width: 100%; } }
.um-got { margin: 12px 0 0; font: 600 .92rem 'Outfit', sans-serif; color: #F3DDA0; opacity: 0; animation: umGot .6s ease-out 2.9s forwards; }
@keyframes umGot { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .um-bar i { animation: none; width: 100%; } .um-got { animation: none; opacity: 1; } }
/* A rare petal landing: the name was light gold on pale gold. Dark ink on the gold box, with a small "Rare" (Lord, 3 Oct) */
.reel.landed.rare, .reel.landed.rare * { color: #3A2608 !important; text-shadow: none !important; }
.reel.landed.rare b { font-weight: 700; }
.reel.landed.rare b::after { content: 'Rare'; margin-left: 10px; padding: 2px 9px; border-radius: 99px; font: 700 .68rem 'Outfit', sans-serif; letter-spacing: .04em; color: #FFF6DA !important; background: #8A6400; vertical-align: 3px; }
/* The floating pair (Lord, 3 Oct): a round ✎ for the journal, and "Talk to a guide" beside it */
.qfab, .qfab:hover { width: 52px !important; height: 52px !important; padding: 0 !important; border-radius: 50% !important; justify-content: center !important; }
.qfab span { width: auto !important; height: auto !important; background: none !important; font-size: 1.2rem !important; }
.qfab b { display: none !important; }
.qchat { position: fixed; right: 82px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 160; display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px 0 8px; border-radius: 999px;
  background: #fff; color: #1D1E46; text-decoration: none; font: 600 .92rem 'Outfit', sans-serif; border: 1px solid #DCDBF0; box-shadow: 0 12px 26px -12px rgba(29,30,70,.45); transition: transform .2s; }
.qchat:hover { transform: translateY(-2px); }
.qchat[hidden], body.popped .qchat, body.menu-open .qchat, body.qns-open .qchat, body.chatting .qchat { display: none !important; }
.qc-faces { position: relative; display: inline-flex; } .qc-faces > * { width: 30px !important; height: 30px !important; border: 2px solid #fff; border-radius: 50%; margin-left: -9px; flex: none; }
.qc-faces > *:first-child { margin-left: 0; }
.qc-on { position: absolute; right: -2px; bottom: 0; width: 10px; height: 10px; border-radius: 50%; background: #2DBE60; border: 2px solid #fff; }
@media (max-width: 959px) {
  .qfab, .qfab:hover { width: 46px !important; height: 46px !important; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .qfab b::after { content: none !important; }
  .qchat { right: 70px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); height: 46px; padding: 0 14px 0 6px; font-size: .84rem; }
  .qc-faces > * { width: 26px !important; height: 26px !important; }
}
.qc-faces > .qc-on { width: 10px !important; height: 10px !important; margin: 0 !important; border-width: 2px !important; }
.qc-faces { align-items: center; } .qc-faces > .qc-on { position: absolute !important; right: -1px !important; bottom: 1px !important; top: auto !important; }
/* Floating pair v3 (Lord, 3 Oct): pen on the left, Chat on the right; Chat in the night blue with gold-ringed faces */
.qchat { right: 18px !important; width: 172px; height: 54px !important; padding: 0 16px 0 8px !important; gap: 10px !important; border: 0 !important; color: #FFF6F0 !important;
  background: radial-gradient(ellipse at 20% 0%, rgba(243,201,74,.16), transparent 60%), linear-gradient(160deg, #2F3170, #1D1E46) !important;
  box-shadow: 0 12px 26px -10px rgba(29,30,70,.6), 0 0 0 1px rgba(243,201,74,.25) !important; }
.qc-faces > * { width: 30px !important; height: 30px !important; margin-left: -10px !important; border: 2px solid #1D1E46 !important; box-shadow: 0 0 0 1px rgba(243,201,74,.5); }
.qc-faces > *:first-child { margin-left: 0 !important; }
.qc-on { display: none !important; }
.qc-t { display: flex; flex-direction: column; line-height: 1.1; }
.qc-t b { font: 700 1rem 'Outfit', sans-serif; color: #FFF6F0; }
.qc-t small { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; font: 500 .7rem 'Outfit', sans-serif; color: #A9E6BF; }
.qc-t small i { width: 7px; height: 7px; border-radius: 50%; background: #2DBE60; box-shadow: 0 0 0 3px rgba(45,190,96,.2); }
.qfab, .qfab:hover { right: 200px !important; width: 54px !important; height: 54px !important; }
@media (max-width: 959px) {
  .qchat { right: 14px !important; width: 150px; height: 48px !important; padding: 0 12px 0 6px !important; }
  .qc-faces > * { width: 26px !important; height: 26px !important; margin-left: -9px !important; }
  .qfab, .qfab:hover { right: 172px !important; width: 48px !important; height: 48px !important; }
}
body:has(#qnChat[hidden]) .qfab, body.chatting .qfab { right: 18px !important; } @media (max-width: 959px) { body:has(#qnChat[hidden]) .qfab { right: 14px !important; } }
/* Floating pair v4 (Lord, 3 Oct: "how would Intercom do it"): one round brand launcher for Chat, a small quiet pen beside it */
.qchat { right: 20px !important; width: 58px !important; height: 58px !important; padding: 0 !important; border-radius: 50% !important; justify-content: center !important; gap: 0 !important;
  background: #23245A !important; color: #fff !important; box-shadow: 0 8px 24px -6px rgba(29,30,70,.55), 0 2px 6px rgba(0,0,0,.12) !important; border: 0 !important; }
.qchat:hover { transform: scale(1.06) !important; background: #2B2D6E !important; }
.qc-dot { position: absolute; top: 3px; right: 3px; width: 13px; height: 13px; border-radius: 50%; background: #2DBE60; border: 2.5px solid #fff; }
.qfab, .qfab:hover { right: 90px !important; bottom: calc(26px + env(safe-area-inset-bottom, 0px)) !important; width: 42px !important; height: 42px !important;
  background: #fff !important; color: #23245A !important; border: 1px solid #E2DEEA !important; box-shadow: 0 6px 16px -8px rgba(29,30,70,.4) !important; filter: none !important; }
.qfab span { color: #23245A !important; font-size: 1.05rem !important; }
.qfab:hover { transform: scale(1.06); }
@media (max-width: 959px) {
  .qchat { right: 14px !important; width: 52px !important; height: 52px !important; }
  .qfab, .qfab:hover { right: 76px !important; bottom: calc(19px + env(safe-area-inset-bottom, 0px)) !important; width: 40px !important; height: 40px !important; }
}
body:has(#qnChat[hidden]) .qfab, body.chatting .qfab { right: 20px !important; }
.qfab span svg { display: block; } .qfab span { line-height: 0; }

/* Journal card: the light version everywhere, phones included (Lord, 3 Oct) */
.sj.sj-top1.sj-pre { color: var(--ink-t) !important; border: 1px solid #CFDDF3 !important; background: radial-gradient(ellipse at 100% 0%, rgba(243,201,74,.16), transparent 50%), linear-gradient(160deg, #F3F8FF 0%, #E2ECFA 100%) !important; box-shadow: 0 14px 30px -20px rgba(29,30,70,.4) !important; }
.sj.sj-top1.sj-pre::after { display: none !important; }
.sj.sj-top1.sj-pre .jv2-book.sm { background: linear-gradient(90deg, #14153A 0 5px, #C9A032 5px 6px, #2F3170 6px) !important; }
.sj.sj-top1.sj-pre .jv2-book.sm::before { border-color: rgba(243,201,74,.7) !important; } .sj.sj-top1.sj-pre .jv2-book.sm span { color: #F3D488 !important; }
.sj.sj-top1.sj-pre .sj-top b { color: #1D1E46 !important; } .sj.sj-top1.sj-pre .sj-ask { color: #4B4C8E !important; } .sj.sj-top1.sj-pre .sj-open2 { color: #2F3170 !important; }
.sj.sj-top1.sj-pre .sj-week { background: rgba(255,255,255,.8) !important; } .sj.sj-top1.sj-pre .sj-week small { color: var(--soft) !important; }
.sj.sj-top1.sj-pre .sj-d i { background: #DCE5F3 !important; } .sj.sj-top1.sj-pre .sj-d.has i { background: #E0B84F !important; }
.sj.sj-top1.sj-pre .sj-last2 { border-top-color: #CFDDF3 !important; color: var(--soft) !important; } .sj.sj-top1.sj-pre .sj-last2 small { color: var(--soft) !important; } .sj.sj-top1.sj-pre .sj-last2 span { color: var(--ink-t) !important; }
.sj.sj-top1.sj-pre .sj-write { background: #FFF6DC !important; border: 1px solid #E6C76E !important; color: #6B4E00 !important; box-shadow: none !important; }
/* On a chat page the round pen stays, lifted above the message box */
body.chatting .qfab, body.chatting .qfab:hover { right: 18px !important; bottom: calc(110px + env(safe-area-inset-bottom, 0px)) !important; }

/* ---------- The chat dock (docs/notes/NOTES-CHAT-DOCK.md): Intercom-style, bottom right ---------- */
.qchat { position: fixed; }
.qc-badge { position: absolute; top: -4px; left: -4px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: #D8443A; color: #fff; font: 700 .72rem/20px 'Outfit', sans-serif; text-align: center; border: 2px solid #fff; }
.qc-badge[hidden] { display: none; }
.qc-x { display: none; font-size: 1.7rem; line-height: 1; font-weight: 300; }
.qchat.dk-x svg, .qchat.dk-x .qc-dot { display: none; } .qchat.dk-x .qc-x { display: block; }
body.dk-open .qfab { display: none !important; }
.dock { position: fixed; right: 20px; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); z-index: 170; width: 384px; height: min(640px, calc(100vh - 120px)); display: flex; flex-direction: column;
  background: #F7F5FB; border-radius: 18px; overflow: hidden; box-shadow: 0 20px 60px -12px rgba(29,30,70,.45), 0 0 0 1px rgba(29,30,70,.06); animation: dkUp .22s ease-out; font-family: 'Outfit', sans-serif; }
.dock[hidden] { display: none !important; }
@keyframes dkUp { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.dk-min { position: absolute; top: 10px; right: 12px; z-index: 3; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.dk-v-chat .dk-min, .dk-v-messages .dk-min, .dk-v-tools .dk-min { background: transparent; color: #4B4C6E; }
.dk-hero { flex: none; padding: 26px 22px 46px; color: #fff; background: radial-gradient(ellipse at 85% 0%, rgba(243,201,74,.18), transparent 55%), linear-gradient(165deg, #2F3170, #1D1E46); }
.dk-faces { display: flex; margin-bottom: 18px; } .dk-faces > * { width: 36px !important; height: 36px !important; margin-left: -10px; border: 2px solid #23245A; border-radius: 50%; } .dk-faces > *:first-child { margin-left: 0; }
.dk-hero h2 { margin: 0; color: #fff; font: 600 1.7rem/1.15 var(--voice); } .dk-hero h2 span { color: #F3C94A; }
.dk-hero p { margin: 6px 0 0; color: #CFC9EC; font-size: .92rem; line-height: 1.45; }
.dk-body { flex: 1 1 auto; overflow-y: auto; padding: 0 14px 14px; }
.dk-v-home .dk-body { margin-top: -30px; }
.dk-card { display: block; width: 100%; margin: 0 0 12px; padding: 6px; background: #fff; border-radius: 14px; border: 0; box-shadow: 0 2px 10px -4px rgba(29,30,70,.18); text-align: left; font: inherit; color: inherit; }
.dk-h { margin: 8px 10px 4px; font-size: .78rem; font-weight: 700; color: #6B6A85; }
.dk-row, .dk-cont { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border: 0; background: none; border-radius: 10px; cursor: pointer; text-align: left; font: inherit; color: #1D1E46; }
.dk-row:hover, .dk-cont:hover { background: #F3F1F9; }
.dk-row > span, .dk-cont > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dk-row b, .dk-cont b { font-size: .9rem; font-weight: 600; } .dk-row small { font-size: .78rem; color: #6B6A85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-cont { padding: 12px; } .dk-cont small { font-size: .72rem; font-weight: 700; color: #8A6A14; } .dk-cont em { font-style: normal; font-size: .82rem; color: #6B6A85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dk-cont i { color: #9B98B5; font-style: normal; font-size: 1.2rem; }
.dk-row .adv-ava, .dk-cont .adv-ava { width: 38px !important; height: 38px !important; flex: none; }
.dk-on { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #2DBE60; }
.dk-go { font-style: normal; color: #9B98B5; }
.dk-all { display: block; width: 100%; padding: 10px; margin-top: 2px; border: 0; border-top: 1px solid #EEEBF5; background: none; color: #2F3170; font: 600 .84rem 'Outfit', sans-serif; cursor: pointer; border-radius: 0 0 10px 10px; }
.dk-all:hover { background: #F7F5FB; }
.dk-tabs { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); background: #fff; border-top: 1px solid #EEEBF5; }
.dk-tabs button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 0 12px; border: 0; background: none; color: #9B98B5; font: 600 .74rem 'Outfit', sans-serif; cursor: pointer; }
.dk-tabs button.on { color: #23245A; }
.dk-top { flex: none; padding: 16px 52px 14px 18px; background: #fff; border-bottom: 1px solid #EEEBF5; text-align: center; }
.dk-top b { display: block; font-size: 1rem; color: #1D1E46; } .dk-top small { font-size: .76rem; color: #6B6A85; }
.dk-v-messages .dk-body, .dk-v-tools .dk-body { padding-top: 12px; }
.dk-when { font-style: normal; font-size: .7rem; color: #9B98B5; flex: none; }
.dk-empty { text-align: center; padding: 40px 10px; color: #6B6A85; }
.dk-send-btn { margin-top: 8px; padding: 10px 20px; border-radius: 99px; border: 0; background: #23245A; color: #fff; font: 600 .88rem 'Outfit', sans-serif; cursor: pointer; }
.dk-chead { flex: none; display: flex; align-items: center; gap: 10px; padding: 12px 48px 12px 10px; background: #fff; border-bottom: 1px solid #EEEBF5; }
.dk-chead > span { flex: 1; min-width: 0; display: flex; flex-direction: column; } .dk-chead b { font-size: .95rem; color: #1D1E46; }
.dk-chead small { display: flex; align-items: center; gap: 5px; font-size: .74rem; color: #6B6A85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-chead .adv-ava { width: 36px !important; height: 36px !important; }
.dk-back { width: 30px; height: 30px; border: 0; background: none; font-size: 1.6rem; line-height: 1; color: #4B4C6E; cursor: pointer; border-radius: 50%; } .dk-back:hover { background: #F3F1F9; }
.dk-full { color: #6B6A85; text-decoration: none; font-size: 1.05rem; padding: 4px 6px; border-radius: 8px; } .dk-full:hover { background: #F3F1F9; }
.dk-msgs { flex: 1 1 auto; overflow-y: auto; padding: 16px 14px 10px; display: flex; flex-direction: column; gap: 8px; }
.dk-m { display: flex; align-items: flex-end; gap: 8px; max-width: 86%; }
.dk-m.me { align-self: flex-end; }
.dk-m p { margin: 0; padding: 9px 13px; border-radius: 16px; font-size: .9rem; line-height: 1.45; }
.dk-m.them p { background: #fff; color: #1D1E46; border-bottom-left-radius: 4px; box-shadow: 0 1px 3px rgba(29,30,70,.08); }
.dk-m.me p { background: #23245A; color: #fff; border-bottom-right-radius: 4px; }
.dk-m .adv-ava { width: 26px !important; height: 26px !important; flex: none; }
.dk-typing { display: inline-flex; gap: 4px; padding: 13px 14px !important; } .dk-typing i { width: 6px; height: 6px; border-radius: 50%; background: #9B98B5; animation: umDot 1s infinite; } .dk-typing i:nth-child(2) { animation-delay: .15s; } .dk-typing i:nth-child(3) { animation-delay: .3s; }
.dk-in { flex: none; display: flex; align-items: flex-end; gap: 8px; margin: 0 12px; padding: 8px 8px 8px 14px; background: #fff; border-radius: 22px; box-shadow: 0 0 0 1px #E2DEEA; }
.dk-in textarea { flex: 1; border: 0; outline: 0; resize: none; font: 400 .92rem 'Outfit', sans-serif; padding: 6px 0; max-height: 120px; background: none; color: #1D1E46; }
.dk-in button { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 0; background: #23245A; color: #fff; display: grid; place-items: center; cursor: pointer; }
.dk-cost { flex: none; margin: 6px 0 10px; text-align: center; font-size: .7rem; color: #9B98B5; }
@media (max-width: 959px) {
  .dock { left: 0; right: 0; top: 0; bottom: 0; width: auto; height: auto; border-radius: 0; z-index: 210; padding-top: env(safe-area-inset-top, 0px); }
  body.dk-open { overflow: hidden; }
  body.dk-open .qchat { display: none !important; }
  .dk-min { top: calc(10px + env(safe-area-inset-top, 0px)); }
  .dk-tabs { padding-bottom: env(safe-area-inset-bottom, 0px); }
  .dk-cost { margin-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
}
.dock .adv-ava { flex: none !important; border-radius: 50% !important; overflow: hidden !important; display: grid; place-items: center; }
.dock .adv-ava img { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 50%; }
.dk-in textarea { min-height: 0 !important; height: 34px; box-shadow: none !important; border-radius: 0 !important; }
.dk-in { align-items: center; }
/* Phones: the journal card a shade deeper, with a solid gold button (Lord, 3 Oct: "all too light") */
@media (max-width: 959px) {
  .sj.sj-top1.sj-pre { border-color: #B9C8EC !important; background: radial-gradient(ellipse at 100% 0%, rgba(243,201,74,.22), transparent 50%), linear-gradient(160deg, #DCE6FA 0%, #BFCEF0 100%) !important; box-shadow: 0 16px 30px -18px rgba(29,30,70,.5) !important; }
  .sj.sj-top1.sj-pre .sj-week { background: rgba(255,255,255,.6) !important; }
  .sj.sj-top1.sj-pre .sj-d i { background: #B9C6E6 !important; }
  .sj.sj-top1.sj-pre .sj-ask { color: #33357A !important; }
  .sj.sj-top1.sj-pre .sj-write { background: #F3C94A !important; border-color: #F3C94A !important; color: #3A2410 !important; box-shadow: 0 8px 16px -10px rgba(122,90,16,.6) !important; }
  .sj.sj-top1.sj-pre .sj-last2 { border-top-color: #A9BAE4 !important; }
}
/* Dock v2: a simpler Home, and a bottom sheet on phones (Lord, 3 Oct) */
.dk-hero { padding: 24px 22px 40px !important; }
.dk-hero h2 { font-size: 1.55rem !important; }
.dk-faces-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; padding: 4px 4px 8px; }
.dk-faces-row button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; border: 0; background: none; padding: 6px 0; border-radius: 10px; cursor: pointer; font: inherit; }
.dk-faces-row button:hover { background: #F3F1F9; }
.dk-faces-row .adv-ava { width: 40px !important; height: 40px !important; }
.dk-faces-row .dk-on { position: absolute; top: 6px; right: calc(50% - 21px); width: 10px; height: 10px; border: 2px solid #fff; }
.dk-faces-row small { font-size: .68rem; color: #4B4C6E; white-space: nowrap; }
.dk-more span { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #EEEBF5; color: #23245A; font: 700 .8rem 'Outfit', sans-serif; }
.dk-new { align-items: center; } .dk-new b { font-size: .95rem !important; } .dk-new em { white-space: normal !important; }
.dk-send-ic { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid !important; place-items: center; background: #23245A; color: #fff !important; }
.dk-dim { display: none; }
@media (max-width: 959px) {
  .dock { top: auto !important; left: 0 !important; right: 0 !important; bottom: 0 !important; height: min(78vh, 620px) !important; border-radius: 20px 20px 0 0 !important; padding-top: 0 !important; animation: sjqUp .25s ease-out; }
  .dock::before { content: ''; position: absolute; top: 7px; left: 50%; width: 38px; height: 4px; margin-left: -19px; border-radius: 4px; background: rgba(255,255,255,.4); z-index: 4; }
  .dk-v-chat.dock::before, .dk-v-messages.dock::before, .dk-v-tools.dock::before { background: #D9D4E4; }
  .dk-min { top: 12px !important; }
  body.dk-open .dk-dim { display: block; position: fixed; inset: 0; z-index: 205; background: rgba(36,27,46,.45); animation: qnsFade .2s ease-out; }
  .dk-faces-row .adv-ava { width: 36px !important; height: 36px !important; }
}
.dk-body { position: relative; z-index: 1; }
.dk-row { padding: 7px 10px !important; } .dk-row .adv-ava, .dk-cont .adv-ava { width: 34px !important; height: 34px !important; }
.dk-card { margin-bottom: 10px !important; }
.dk-v-home .dk-body { margin-top: 0 !important; padding-top: 12px !important; } .dk-hero { padding: 22px 22px 20px !important; }
/* Floating message preview above the Chat launcher (Intercom-style) */
.dk-peek { position: fixed; right: 20px; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); z-index: 165; width: 300px; cursor: pointer; animation: dkPeekIn .45s cubic-bezier(.2,1.2,.4,1) 1.2s both; }
.dk-peek[hidden], body.dk-open .dk-peek, body.popped .dk-peek, body.menu-open .dk-peek, body.qns-open .dk-peek { display: none !important; }
@keyframes dkPeekIn { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
.dk-pk-card { display: flex; gap: 10px; padding: 14px 14px 14px 12px; background: #fff; border-radius: 16px 16px 4px 16px; box-shadow: 0 14px 34px -10px rgba(29,30,70,.35), 0 0 0 1px rgba(29,30,70,.06); }
.dk-peek:hover .dk-pk-card { box-shadow: 0 18px 40px -10px rgba(29,30,70,.45), 0 0 0 1px rgba(29,30,70,.08); }
.dk-pk-card .adv-ava { flex: none; width: 34px !important; height: 34px !important; border-radius: 50%; overflow: hidden; }
.dk-pk-card .adv-ava img { width: 100%; height: 100%; object-fit: cover; }
.dk-pk-card > div { min-width: 0; }
.dk-pk-n { margin: 0 0 3px; display: flex; align-items: baseline; gap: 6px; font-family: 'Outfit', sans-serif; } .dk-pk-n b { font-size: .86rem; color: #1D1E46; } .dk-pk-n small { font-size: .72rem; color: #9B98B5; }
.dk-pk-t { margin: 0; font: 400 .88rem/1.4 'Outfit', sans-serif; color: #33324A; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dk-pk-x { position: absolute; top: -10px; right: -6px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: #fff; color: #6B6A85; font-size: .95rem; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(29,30,70,.25); opacity: 0; transition: opacity .15s; }
.dk-peek:hover .dk-pk-x, .dk-peek:focus-within .dk-pk-x { opacity: 1; }
@media (max-width: 959px) { .dk-peek { right: 14px; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); width: min(290px, calc(100vw - 28px)); } .dk-pk-x { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dk-peek { animation: none; } }
/* Phones: the journal as one thin line (Lord, 3 Oct) */
.sj-thin { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 12px 12px 12px 14px; border-radius: var(--r-sheet); text-decoration: none; color: var(--ink-t);
  border: 1px solid #B9C8EC; background: radial-gradient(ellipse at 100% 0%, rgba(243,201,74,.2), transparent 55%), linear-gradient(160deg, #DCE6FA, #C9D6F3); box-shadow: 0 10px 22px -16px rgba(29,30,70,.5); }
.scene + .sj-thin { margin-top: 14px; }
.sj-thin .jv2-book.sm { flex: none; width: 28px; height: 38px; background: linear-gradient(90deg, #14153A 0 4px, #C9A032 4px 5px, #2F3170 5px); }
.sj-thin .jv2-book.sm::before { inset: 3px 3px 3px 7px; border: 1px solid rgba(243,201,74,.7); }
.sj-thin .jv2-book.sm span { color: #F3D488; font-size: .8rem; }
.sj-thin .jv2-book.sm .jv2-rib { height: 13px; right: 5px; width: 4px; }
.sj-thin div { flex: 1; min-width: 0; } .sj-thin b { display: block; font: 600 1.08rem/1.15 var(--voice); color: #1D1E46; }
.sj-thin small { display: block; font: italic 500 .86rem var(--voice); color: #33357A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sj-thin-w { flex: none; padding: 8px 14px; border-radius: 999px; border: 0; background: #F3C94A; color: #3A2410; font: 600 .84rem 'Outfit', sans-serif; cursor: pointer; box-shadow: 0 6px 12px -8px rgba(122,90,16,.6); }
/* Dock on desktop: shorter, never under the header (Lord, 3 Oct) */
@media (min-width: 960px) {
  .dock { height: min(540px, calc(100vh - 170px)) !important; width: 360px !important; }
  .dk-hero { padding: 18px 20px 16px !important; } .dk-hero h2 { font-size: 1.35rem !important; } .dk-hero p { font-size: .85rem !important; margin-top: 2px !important; }
  .dk-faces-row .adv-ava { width: 36px !important; height: 36px !important; }
  .dk-cont { padding: 9px 10px !important; }
}
/* The floating preview: a lean chat bubble with a tail toward the launcher */
.dk-peek { width: 250px !important; }
.dk-pk-card { gap: 8px !important; padding: 10px 12px 10px 10px !important; border-radius: 16px 16px 4px 16px !important; position: relative; }
.dk-pk-card::after { content: ''; position: absolute; right: 14px; bottom: -6px; width: 12px; height: 12px; background: #fff; transform: rotate(45deg); border-radius: 0 0 3px 0; box-shadow: 2px 2px 4px -1px rgba(29,30,70,.12); }
.dk-pk-card .adv-ava { width: 28px !important; height: 28px !important; }
.dk-pk-n { margin-bottom: 1px !important; } .dk-pk-n b { font-size: .8rem !important; } .dk-pk-n small { font-size: .66rem !important; }
.dk-pk-t { font-size: .8rem !important; line-height: 1.35 !important; -webkit-line-clamp: 2 !important; }
.dk-pk-x { width: 20px !important; height: 20px !important; font-size: .8rem !important; top: -8px !important; right: -6px !important; }
@media (max-width: 959px) { .dk-peek { width: 230px !important; bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; } }
/* The thin journal line on phones, leaner */
.sj-thin { padding: 8px 10px 8px 12px !important; gap: 10px !important; margin-bottom: 12px !important; }
.sj-thin .jv2-book.sm { width: 22px !important; height: 30px !important; } .sj-thin .jv2-book.sm span { font-size: .68rem !important; } .sj-thin .jv2-book.sm .jv2-rib { height: 10px !important; width: 3px !important; right: 4px !important; }
.sj-thin b { font-size: .98rem !important; } .sj-thin small { font-size: .8rem !important; }
.sj-thin-w { padding: 6px 12px !important; font-size: .78rem !important; }
/* Refinements (Lord, 3 Oct, "fix all") */
.qchat:has(.qc-badge:not([hidden])) .qc-dot { display: none; }   /* one signal at a time */
@media (max-width: 959px) {
  .scene.compact.watered .sc-chips span:not(:first-child):not(.gold) { display: none !important; }   /* two chips on phones */
  .scene.compact.watered .sc-hi { font-size: .82rem !important; }
  .scene.compact.watered .sc-h { font-size: 1.3rem !important; line-height: 1.15 !important; margin: 1px 0 6px !important; }
  .scene.compact.watered .sc-row { padding: 14px 14px 12px !important; gap: 12px !important; }
  .scene.compact.watered .sc-rose { width: 64px !important; height: 64px !important; }
  .scene.compact.watered .sc-next { padding: 6px 14px !important; font-size: .72rem !important; gap: 6px !important; }
  .scene.compact.watered .sc-next .sc-moon { font-size: .8rem; }
  .scene.compact.watered + .sj-thin { margin-top: 0 !important; }
  .ln-credits { font-size: .78rem !important; padding: 4px 10px !important; }
  body::after { content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: 84px; z-index: 140; pointer-events: none;
    background: linear-gradient(to top, rgba(246,239,228,.92), rgba(246,239,228,0)); }
  body.dk-open::after, body.qns-open::after, body.chatting::after { display: none; }
}
/* Today's letter, more readable (Lord, 3 Oct): Cormorant stays for the title, "Dear…" and the signature;
   the paragraphs move to Lora (a text serif made for screens), darker ink, a comfortable measure */
.lt-text p { font: 400 1.08rem/1.75 'Lora', Georgia, serif !important; color: #26223A !important; letter-spacing: 0; }
.lt-letter .lt-text { max-width: 36em; margin-left: auto; margin-right: auto; }
.lt-text .lt-first::first-letter { font: 600 3rem/.9 var(--voice) !important; margin: 4px 8px 0 0 !important; }
.lt-lp p, .lt-lp { font-family: 'Lora', Georgia, serif !important; color: #26223A !important; }
.lt-lp { font-size: 1rem !important; line-height: 1.6 !important; }
.adapted { color: #8A6A14 !important; }
.lt-letter .lt-aff { color: #3A2A10 !important; }
@media (max-width: 600px) { .lt-text p { font-size: 1.02rem !important; line-height: 1.7 !important; } .lt-letter { padding: 30px 20px 24px !important; } }
.lt-num div p, .lt-num div > span:not(:first-child), .lt-num small { font: 400 .95rem/1.5 'Lora', Georgia, serif !important; color: #DCD7F0 !important; }
.lt-num div b { font-size: 1.1rem !important; }
.lt-head > p:not(.lt-k), .lt-sub { color: #4B4766 !important; }
/* Phone menu, fixed and leaner (Lord, 3 Oct) */
.drawer .dr-panel { padding: 14px 14px 20px !important; }
.drawer .dr-top { display: flex !important; align-items: center !important; gap: 12px !important; margin: 0 0 14px !important; padding: 0 0 12px !important; border-bottom: 1px solid var(--hair); background: none !important; }
.drawer .dr-top .dr-me { width: 40px !important; height: 40px !important; flex: none; font: 600 1.05rem 'Outfit', sans-serif !important; color: #F3DDA0 !important; background: #23245A !important; box-shadow: 0 0 0 2px #F3DDA0 !important; }
.drawer .dr-top > div { flex: 1; min-width: 0; }
.drawer .dr-top b { display: block; font: 600 1.15rem/1.1 var(--voice) !important; color: #1D1E46 !important; }
.drawer .dr-top span, .drawer .dr-top small { font-size: .76rem !important; color: var(--soft) !important; }
.drawer .dr-top button { font-size: 1.5rem !important; color: var(--soft) !important; width: 34px; height: 34px; border-radius: 50%; }
.drawer .dr-feat { display: flex !important; flex-direction: column; gap: 8px !important; margin: 0 0 12px !important; }
.drawer .dr-panel .dr-feat a { flex-direction: row !important; align-items: center !important; gap: 12px !important; padding: 10px 12px !important; border-radius: 14px !important; box-shadow: none !important; }
.drawer .dr-feat a span { width: 32px !important; height: 32px !important; margin: 0 !important; flex: none; font-size: .9rem !important; }
.drawer .dr-feat a b { font: 600 1.08rem/1.15 var(--voice) !important; display: block; }
.drawer .dr-feat a small { font-size: .72rem !important; display: block; }
.drawer .dr-feat a > b, .drawer .dr-feat a > small { flex: none; }
.drawer .dr-feat a { display: grid !important; grid-template-columns: 32px 1fr; grid-template-rows: auto auto; column-gap: 12px !important; row-gap: 0 !important; }
.drawer .dr-feat a span { grid-row: 1 / 3; }
.drawer .dr-panel .dr-feat a.df-chat, .drawer .dr-panel .dr-feat a.df-chat.on { background: #fff !important; color: #1D1E46 !important; border: 1px solid #DCDBF0; }
.drawer .dr-panel .dr-feat a.df-chat span { background: #23245A !important; } .drawer .dr-panel .dr-feat a.df-chat small { color: #2E8B57 !important; }
.drawer .dr-panel .dr-feat a.on { box-shadow: 0 0 0 2px #F3C94A !important; }
.drawer .dr-panel > a:not(.dr-sm) { font: 600 1.05rem 'Outfit', sans-serif !important; padding: 10px 12px !important; }
.drawer .dr-panel a.dr-sm { font: 500 .9rem 'Outfit', sans-serif !important; padding: 8px 12px !important; color: #4B4766 !important; }
.drawer .dr-panel hr { margin: 8px 0 !important; }
/* Letter, round 2 (Lord, 3 Oct: "mystical but not easy to read"): only the title and the signature stay in the thin display face;
   every line she reads is in Lora, in plain darker ink, and the wide gold italic line becomes a small quiet note */
.lt-k { font: 600 .82rem 'Outfit', sans-serif !important; font-style: normal !important; color: #8A6A14 !important; letter-spacing: .01em; }
.lt-head { font: italic 400 1.02rem/1.5 'Lora', Georgia, serif !important; color: #4B4766 !important; text-align: center; }
.adapted { font: italic 400 .88rem/1.5 'Lora', Georgia, serif !important; color: #7A6A50 !important; margin: 0 0 14px !important; padding: 8px 12px; background: rgba(243,201,74,.08); border-radius: 8px; }
.lt-dear { font: italic 500 1.08rem 'Lora', Georgia, serif !important; color: #26223A !important; }
.lt-text p { font-weight: 400 !important; color: #1F1B30 !important; }
.lt-text .lt-first::first-letter { color: #A07A12 !important; }
.lt-letter { background: #FFFDF8 !important; }
@media (max-width: 600px) { .lt-head { font-size: .95rem !important; } .lt-text p { font-size: 1.04rem !important; } }
.drawer .dr-feat a { align-content: center; } .drawer .dr-feat a small { margin-top: 1px !important; }
/* Journal: warm paper, not cool blue (Lord, 3 Oct: "the light blue feels a mismatch"). Cream = reading and writing. */
.sj-thin, .sj.sj-top1.sj-pre { background: radial-gradient(ellipse at 100% 0%, rgba(243,201,74,.14), transparent 55%), linear-gradient(160deg, #FFFCF5, #FBF3E2) !important; border: 1px solid #EAD9AE !important; box-shadow: 0 10px 24px -18px rgba(122,90,16,.45) !important; }
.sj-thin small, .sj.sj-top1.sj-pre .sj-ask { color: #7A6A50 !important; }
.sj.sj-top1.sj-pre .sj-week { background: rgba(255,255,255,.75) !important; border: 1px solid #F0E4C8; }
.sj.sj-top1.sj-pre .sj-d i { background: #EADFC8 !important; }
.sj.sj-top1.sj-pre .sj-last2 { border-top-color: #EAD9AE !important; }
@media (max-width: 959px) { .sj.sj-top1.sj-pre { border-color: #EAD9AE !important; } }
/* "Ritual Is Done" back in the ritual's night navy + gold (Lord, 3 Oct: the pink felt like another app) */
.scene.compact.watered { background: radial-gradient(ellipse at 15% 0%, rgba(243,201,74,.16), transparent 55%), linear-gradient(160deg, #2B2C60, #1D1E46) !important; border: 0 !important; box-shadow: 0 16px 34px -22px rgba(29,30,70,.7) !important; }
.scene.compact.watered::before, .scene.compact.watered::after { opacity: 1; }
.scene.compact.watered .sc-hi { color: #C4C0E2 !important; }
.scene.compact.watered .sc-h { color: #FFF6F0 !important; }
.scene.compact.watered .sc-chips span { color: #E3DFF5 !important; background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.14) !important; }
.scene.compact.watered .sc-chips span.gold { color: #F3DDA0 !important; background: rgba(243,201,74,.12) !important; border-color: rgba(243,201,74,.35) !important; }
.scene.compact.watered .sc-next { background: rgba(0,0,0,.18) !important; border-top-color: rgba(255,255,255,.08) !important; color: #D9D4F0 !important; }
.scene.compact.watered .sc-next b { color: #F3DDA0 !important; } .scene.compact.watered .sc-moon { color: #F3DDA0 !important; }
.scene.compact.watered .sc-rose { background: radial-gradient(circle, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 70%) !important; }
/* Write button on the cream journal card: solid, deeper gold so it pops (Lord, 3 Oct) */
.sj.sj-top1.sj-pre .sj-write, .sj-thin-w { background: linear-gradient(180deg, #F2C443, #E0AC2A) !important; border: 1px solid #C9952A !important; color: #2E1E06 !important; font-weight: 700 !important;
  box-shadow: 0 8px 16px -10px rgba(122,90,16,.75), inset 0 1px 0 rgba(255,255,255,.35) !important; }
.sj.sj-top1.sj-pre .sj-write:hover, .sj-thin-w:hover { background: linear-gradient(180deg, #F5CC55, #E6B435) !important; }
/* While the chat is open: a small close on the launcher (like Intercom) and a small × in the header (Lord, 3 Oct) */
.qchat.dk-x { width: 44px !important; height: 44px !important; right: 27px !important; bottom: calc(25px + env(safe-area-inset-bottom, 0px)) !important; }
.qchat.dk-x .qc-x { font-size: 1.3rem !important; }
.dk-min { width: 26px !important; height: 26px !important; font-size: 1rem !important; top: 10px !important; right: 10px !important; }
/* Phones: a conversation goes full screen, like Intercom (Lord, 3 Oct); Home / Messages / Tools stay a sheet */
@media (max-width: 959px) {
  .dock.dk-v-chat { top: 0 !important; height: auto !important; border-radius: 0 !important; padding-top: env(safe-area-inset-top, 0px) !important; animation: none; }
  .dock.dk-v-chat::before { display: none; }
  .dock.dk-v-chat .dk-chead { padding-top: 12px; }
  .dock.dk-v-chat .dk-min { top: calc(14px + env(safe-area-inset-top, 0px)) !important; }
  .dock.dk-v-chat .dk-cost { margin-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  body.dk-open:has(.dock.dk-v-chat) .dk-dim { background: transparent; }
}
/* Desktop: the journal's button quieter - white with a gold edge and gold text (the phone keeps the solid gold) */
@media (min-width: 960px) {
  .sj.sj-top1.sj-pre .sj-write { background: #fff !important; border: 1.5px solid #E0AC2A !important; color: #7A5410 !important; box-shadow: none !important; font-weight: 600 !important; padding: 9px !important; }
  .sj.sj-top1.sj-pre .sj-write:hover { background: #FFF6DC !important; }
}
.pen { display: inline-block; font-style: normal; transform: scaleX(-1); }   /* the pen leans right */
/* Dock: add a photo or screenshot (Lord, 3 Oct) */
.dk-att { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #6B6A85; cursor: pointer; margin-left: -6px; }
.dk-att:hover { background: #F3F1F9; color: #23245A; }
.dk-thumb { flex: none; position: relative; width: 64px; height: 64px; margin: 0 12px 8px; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px #E2DEEA; }
.dk-thumb[hidden] { display: none; }
.dk-thumb img { width: 100%; height: 100%; object-fit: cover; }
.dk-thumb button { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: rgba(29,30,70,.75); color: #fff; font-size: .8rem; line-height: 1; cursor: pointer; }
.dk-m { flex-wrap: wrap; } .dk-m.me { flex-direction: column; align-items: flex-end; }
.dk-mimg { max-width: 200px; border-radius: 14px; display: block; box-shadow: 0 1px 3px rgba(29,30,70,.15); }
.dk-mimg { max-width: 160px !important; max-height: 220px; object-fit: cover; } .dk-m.me .dk-mimg + p { margin-top: 4px; }
/* The note's footer, one lean row: 🔒 on the left, Close + Save on the right (Lord, 3 Oct) */
.qns-card .sjq-foot { flex-direction: row !important; align-items: center !important; gap: 10px !important; padding: 8px 0 0 !important; margin-top: 8px !important; }
.qns-card .sjq-foot .qn-lock { order: -1; flex: 1; text-align: left !important; font-size: .72rem !important; color: var(--soft); }
.qns-card .sjq-btns { flex: none; gap: 4px !important; align-items: center; }
.qns-card .sjq-btns .btn { flex: none !important; width: auto !important; padding: 9px 26px !important; font-size: .92rem !important; min-height: 0 !important; box-shadow: none !important; }
.qns-card .sjq-close { padding: 9px 12px !important; font-size: .86rem !important; }
/* The note on desktop, leaner too: moods in one row, a shorter box */
.qns-card .qf-row { grid-template-columns: repeat(6, 1fr) !important; gap: 0 2px !important; }
.qns-card .qn-feel label > span i { width: 30px !important; height: 30px !important; }
.qns-card .qf-row em { font-size: .66rem !important; }
.qns-card .qn-feel { margin-bottom: 8px !important; }
.qns-card #qnText { min-height: 90px !important; height: 90px; }
/* Find your guide, inside the dock */
.dk-gfind { flex: none; padding: 10px 12px 8px; background: #fff; border-bottom: 1px solid #EEEBF5; }
.dk-gfind input { width: 100%; padding: 9px 14px; border-radius: 999px; border: 1px solid #E2DEEA; background: #F7F5FB; font: 400 .88rem 'Outfit', sans-serif; outline: 0; }
.dk-gfind input:focus { border-color: #23245A; background: #fff; }
.dk-gneeds { display: flex; gap: 6px; overflow-x: auto; padding: 8px 0 2px; scrollbar-width: none; } .dk-gneeds::-webkit-scrollbar { display: none; }
.dk-gneeds button { flex: none; padding: 5px 11px; border-radius: 999px; border: 1px solid #E2DEEA; background: #fff; color: #4B4C6E; font: 600 .76rem 'Outfit', sans-serif; cursor: pointer; white-space: nowrap; }
.dk-gneeds button.on { background: #23245A; border-color: #23245A; color: #fff; }
.dk-glist { padding-top: 10px !important; }
.dk-role { font-style: normal; font-weight: 500; font-size: .74rem; color: #8A6A14; margin-left: 4px; }
/* Signs and dates in the note: smaller chips, no icon bubbles; dates show four, then More (Lord, 3 Oct) */
.qns-card .qs-row { display: flex !important; flex-wrap: wrap; gap: 6px !important; }
.qns-card .qs-row label > span { padding: 6px 12px !important; gap: 0 !important; font: 500 .8rem 'Outfit', sans-serif !important; border-radius: 999px !important; min-height: 0 !important; box-shadow: none !important; }
.qns-card .qs-row label > span i { display: none !important; }
.qns-card .qs-row input:checked + span { background: #23245A !important; color: #fff !important; border-color: #23245A !important; }
.qns-card .qs-row.qs-few .qs-extra { display: none !important; }
.qns-card .qs-more { padding: 6px 12px !important; font-size: .8rem !important; }
.qns-card .qf-q { font-size: .82rem !important; margin: 0 0 6px !important; }
/* Desktop: one close only (the launcher, like Intercom), and the window sits right above it */
@media (min-width: 960px) {
  .dock .dk-min { display: none !important; }
  .dock { bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; }
  .dk-chead { padding-right: 14px !important; } .dk-top { padding-right: 18px !important; }
}
/* Chips on the cream note: white with a soft grey-violet edge, so they stand off the paper (Lord, 3 Oct) */
.qns-card .qs-row label > span { background: #fff !important; border: 1px solid #DCD8E6 !important; color: #2E2A44 !important; box-shadow: 0 1px 2px rgba(29,30,70,.06) !important; }
.qns-card .qs-row label > span:hover { border-color: #23245A !important; }
.qns-card .qs-more { background: #fff !important; border: 1px dashed #B9B4CC !important; color: #23245A !important; }
.qns-card .qn-tabs { background: #EEEAF3 !important; }
.qns-card .qn-tabs button.on { background: #fff !important; color: #23245A !important; box-shadow: 0 1px 3px rgba(29,30,70,.12) !important; }
.qns-card .qn-tabs button:not(.on) { color: #6B6A85 !important; }
/* Lord, 3 Oct: close only from the × at the top; the round launcher hides while the chat is open, and the window drops to the corner */
.dock .dk-min { display: block !important; }
body.dk-open .qchat { display: none !important; }
@media (min-width: 960px) {
  .dock { bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important; height: min(560px, calc(100vh - 110px)) !important; }
  .dk-chead { padding-right: 44px !important; } .dk-top { padding-right: 48px !important; }
}
/* Dock: a leaner conversation header with (i), and the guide profile inside the dock */
.dk-chead { padding: 8px 44px 8px 8px !important; gap: 8px !important; }
.dk-chead .adv-ava { width: 30px !important; height: 30px !important; }
.dk-chead b { font-size: .9rem !important; } .dk-chead small { font-size: .7rem !important; }
.dk-back { width: 28px !important; height: 28px !important; font-size: 1.4rem !important; }
.dk-info { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #9B98B5; background: none; color: #6B6A85; font: italic 700 .72rem Georgia, serif; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; }
.dk-info:hover { border-color: #23245A; color: #23245A; }
.dock .dk-min { top: 9px !important; }
.dk-m.them { flex-wrap: nowrap !important; }
.dk-prof { padding-top: 0 !important; }
.dk-pf-top { text-align: center; padding: 18px 10px 14px; }
.dk-pf-top .adv-ava { width: 84px !important; height: 84px !important; margin: 0 auto 10px; box-shadow: 0 6px 18px -8px rgba(29,30,70,.5); }
.dk-pf-top h3 { margin: 0; font: 600 1.4rem var(--voice); color: #1D1E46; }
.dk-pf-role { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 0; font-size: .8rem; color: #6B6A85; }
.dk-pf-style { margin: 6px 0 0; font: italic 400 .88rem 'Lora', Georgia, serif; color: #4B4766; }
.dk-pf-bio { margin: 0 10px 8px; font: 400 .88rem/1.55 'Lora', Georgia, serif; color: #26223A; }
.dk-pf-cta { flex: none; padding: 10px 12px 12px; background: #fff; border-top: 1px solid #EEEBF5; }
.dk-pf-cta .dk-send-btn { width: 100%; margin: 0; padding: 12px; }
.dock .dk-min { z-index: 6 !important; }
/* Minimise a conversation (Lord, 3 Oct): ⌄ at the top; the launcher wears the guide's face until she comes back */
.dock .dk-mini { display: grid !important; place-items: center; color: #4B4C6E !important; background: #F3F1F9 !important; width: 30px !important; height: 30px !important; }
.qc-face { position: absolute; left: -6px; bottom: -4px; width: 26px; height: 26px; border-radius: 50%; overflow: hidden; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(29,30,70,.3); }
.qc-face .adv-ava { width: 100% !important; height: 100% !important; } .qc-face img { width: 100%; height: 100%; object-fit: cover; }
.dk-chead { padding-right: 10px !important; align-items: center !important; }
.dk-chead .dk-mini { flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; background: #F3F1F9; color: #4B4C6E; display: grid; place-items: center; cursor: pointer; margin-left: 2px; }
.dk-chead .dk-mini:hover { background: #E9E6F2; }
.dk-chead .dk-info { margin-right: 2px; }
/* End chat (Lord, 3 Oct) */
.dk-end { border: 0; background: none; padding: 0; font: 600 .7rem 'Outfit', sans-serif; color: #8A4A5E; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.dk-ended { flex: none; margin: 0 12px 12px; padding: 14px; background: #fff; border-radius: 14px; text-align: center; box-shadow: 0 0 0 1px #E2DEEA; }
.dk-ended p { margin: 0 0 10px; font-size: .86rem; color: #4B4766; }
.dk-ended div { display: flex; gap: 8px; justify-content: center; }
.dk-ended .dk-send-btn { margin: 0; }
.dk-ghost { padding: 10px 16px; border-radius: 99px; border: 1px solid #DCD8E6; background: #fff; color: #23245A; font: 600 .86rem 'Outfit', sans-serif; cursor: pointer; }
.dk-confirm p b { color: #1D1E46; font-size: .95rem; }
/* Chat page, desktop: the pen sits in its normal corner (the message box is centred, so nothing to dodge) */
@media (min-width: 960px) { body.chatting .qfab, body.chatting .qfab:hover { right: 20px !important; bottom: calc(26px + env(safe-area-inset-bottom, 0px)) !important; } }
/* "Good with …" is good news: green, never rose/red (Lord, 3 Oct) */
.lt-w span { color: #17663A !important; background: #E6F4EA !important; border: 1px solid #BFE3CB; }

/* ---------- Manifest: Go Further (the products, from the catalog) ---------- */
.mfs { margin: 28px 0 10px; }
.mfs-head h2 { margin: 0 0 4px; font: 600 1.8rem var(--voice); color: #1D1E46; }
.mfs-head > p { margin: 0; max-width: 560px; color: var(--soft); font-size: .92rem; line-height: 1.5; }
.mfs-how { margin: 10px 0 0; font-size: .86rem; } .mfs-how summary { cursor: pointer; color: #2F3170; font-weight: 600; }
.mfs-how ol { margin: 8px 0 0; padding-left: 20px; color: #4B4766; line-height: 1.55; } .mfs-how li { margin-bottom: 4px; }
.mfs-sec { margin-top: 26px; }
.mfs-sec h3 { margin: 0 0 2px; font: 600 1.25rem var(--voice); color: #1D1E46; }
.mfs-intro { margin: 0 0 12px; font-size: .84rem; color: var(--soft); max-width: 560px; }
.mfs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mfc { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 16px 16px 14px; border-radius: 16px; cursor: pointer; font: inherit; color: var(--ink-t);
  background: #FFFDF8; border: 1px solid #EAD9AE; box-shadow: 0 8px 20px -18px rgba(122,90,16,.5); transition: transform .15s, box-shadow .15s, border-color .15s; }
.mfc:hover { transform: translateY(-2px); border-color: #D9B962; box-shadow: 0 14px 26px -18px rgba(122,90,16,.6); }
.mfc-h { font: 600 1.18rem/1.2 var(--voice); color: #1D1E46; }
.mfc-h q { quotes: '“' '”'; font-style: italic; }
.mfc-n { font: 600 .74rem 'Outfit', sans-serif; color: #8A6A14; }
.mfc-q { font: italic 400 .86rem 'Lora', Georgia, serif; color: #4B4766; margin-top: 2px; }
.mfc-f { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: auto; padding-top: 10px; gap: 8px; }
.mfc-when { font-size: .74rem; color: #4B4C8E; } .mfc-p { font: 700 .86rem 'Outfit', sans-serif; color: #1D1E46; white-space: nowrap; }
.mfc.own { border-color: #BFE3CB; background: #F6FBF7; } .mfc.own .mfc-when { color: #17663A; font-weight: 600; }
.mfc-big { width: 100%; margin-top: 18px; padding: 22px 22px 18px; border: 0; color: #FFF6F0;
  background: radial-gradient(ellipse at 90% 0%, rgba(243,201,74,.2), transparent 55%), linear-gradient(160deg, #2F3170, #1D1E46); box-shadow: 0 18px 34px -20px rgba(29,30,70,.7); }
.mfc-big .mfc-k { font: 700 .72rem 'Outfit', sans-serif; color: #F3C94A; letter-spacing: .02em; }
.mfc-big .mfc-h { font-size: 1.6rem; color: #FFF6F0; } .mfc-big .mfc-n { color: #F3DDA0; } .mfc-big .mfc-q { color: #D9D4F0; font-size: .95rem; }
.mfc-big .mfc-when { color: #F3DDA0; } .mfc-big .mfc-p { color: #1D1E46; background: #F3C94A; padding: 7px 14px; border-radius: 999px; }
.mfs-tiers .mfc:nth-child(2) { border-color: #D9B962; box-shadow: 0 0 0 2px #F3C94A inset; }
.mfs-fine { margin: 22px 0 0; font-size: .72rem; color: var(--soft); text-align: center; }
@media (max-width: 640px) { .mfs-grid { grid-template-columns: 1fr; } .mfs-head h2 { font-size: 1.5rem; } }
/* the product sheet */
.mfp { text-align: left; }
.mfp-k { margin: 0 0 6px; font: 600 .78rem 'Outfit', sans-serif; color: #4B4C8E; }
.mfp h2 { margin: 0; font: 600 1.6rem/1.2 var(--voice); color: #1D1E46; } .mfp h2 q { quotes: '“' '”'; font-style: italic; }
.mfp-n { margin: 4px 0 14px; font-size: .85rem; color: #8A6A14; font-weight: 600; } .mfp-n i { font-family: 'Lora', Georgia, serif; font-weight: 400; color: #4B4766; }
.mfp-h { margin: 14px 0 6px; font: 700 .78rem 'Outfit', sans-serif; color: #6B6A85; }
.mfp-gets { margin: 0; padding: 0; list-style: none; } .mfp-gets li { position: relative; padding: 6px 0 6px 22px; font-size: .9rem; line-height: 1.45; color: #26223A; border-bottom: 1px solid #F0EAE0; }
.mfp-gets li::before { content: '✓'; position: absolute; left: 0; top: 6px; color: #1F8A4C; font-weight: 700; }
.mfp-opts { display: grid; gap: 8px; } .mfp-opts label { cursor: pointer; } .mfp-opts input { position: absolute; opacity: 0; }
.mfp-opts span { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px; border-radius: 12px; border: 1px solid #DCD8E6; background: #fff; }
.mfp-opts b { font-weight: 600; font-size: .9rem; } .mfp-opts em { font-style: normal; font-weight: 700; color: #1D1E46; }
.mfp-opts input:checked + span { border-color: #23245A; box-shadow: inset 0 0 0 1px #23245A; background: #F6F5FC; }
.mfp-price { margin: 12px 0 0; font: 700 1.1rem 'Outfit', sans-serif; color: #1D1E46; }
.mfp-bundle { margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; background: #FFF8E6; color: #6B5320; font-size: .84rem; }
.mfp-adds { margin: 12px 0 0; } .mfp-adds summary { cursor: pointer; font-weight: 600; color: #2F3170; font-size: .88rem; }
.mfp-adds label { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #F0EAE0; cursor: pointer; font-size: .84rem; }
.mfp-adds label span { flex: 1; } .mfp-adds small { display: block; color: var(--soft); } .mfp-adds em { font-style: normal; font-weight: 700; }
.mfp-go { width: 100%; margin-top: 16px; }
.mfp-own { margin: 14px 0 12px; padding: 10px 12px; border-radius: 10px; background: #E6F4EA; color: #17663A; font-size: .88rem; }
.mfp-fine { margin: 10px 0 0; font-size: .7rem; color: var(--soft); text-align: center; }
/* catalogue pictures */
.mfc { padding: 0 !important; overflow: hidden; }
.mfc-img { display: block; width: 100%; aspect-ratio: 16 / 8; overflow: hidden; background: #2B2C60; }
.mfc-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.mfc:hover .mfc-img img { transform: scale(1.04); }
.mfc-body { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 14px; width: 100%; flex: 1; }
.mfc-big { display: grid !important; grid-template-columns: 1.1fr 1fr; padding: 0 !important; }
.mfc-big .mfc-img { aspect-ratio: auto; height: 100%; min-height: 220px; order: 2; }
.mfc-big .mfc-body { padding: 22px 22px 18px; justify-content: center; }
@media (max-width: 640px) { .mfc-big { grid-template-columns: 1fr; } .mfc-big .mfc-img { order: 0; min-height: 0; aspect-ratio: 16 / 8; } }
.mfp-img { margin: -8px -8px 14px; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 7; } .mfp-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-mf { margin-top: 14px; }
.mfc-sketch { text-decoration: none; margin: 0 0 14px !important; }
.mfc-sketch .mfc-img img { filter: blur(6px) saturate(.85); transform: scale(1.08); }
.mfc-sketch .mfc-img { max-height: 240px; min-height: 0 !important; } .mfc-sketch .mfc-img img { object-position: 50% 30%; } .mfc-sketch { grid-template-columns: 1.4fr 1fr !important; }
.mfc-when b { font-weight: 700; color: #8A6A14; }
.mfc-big .mfc-when b { color: #F3C94A; }
.mfc-tag { align-self: flex-start; margin-bottom: 4px; padding: 3px 10px; border-radius: 999px; background: #F3C94A; color: #3A2410; font: 700 .7rem 'Outfit', sans-serif; }
.mfs .mfc-sketch { margin-top: 14px !important; }

/* Manifest/Store catalogue v2 (Lord, 3 Oct): sketch first, packages as one comparison, single items as compact rows */
.mfc-offer { align-self: flex-start; margin-top: 8px; padding: 5px 12px; border-radius: 999px; background: rgba(243,201,74,.16); border: 1px solid rgba(243,201,74,.5); color: #F3DDA0; font: 700 .78rem 'Outfit', sans-serif; }
.mfs-rows { grid-template-columns: 1fr !important; gap: 10px !important; }
.mfs-rows .mfc { flex-direction: row !important; align-items: stretch; }
.mfs-rows .mfc-img { flex: none; width: 168px; aspect-ratio: auto; }
.mfs-rows .mfc-body { padding: 12px 16px; gap: 2px; }
.mfs-rows .mfc-h { font-size: 1.08rem; }
.mfs-rows .mfc-f { padding-top: 8px; }
@media (max-width: 640px) { .mfs-rows .mfc-img { width: 104px; } .mfs-rows .mfc-q { display: none; } .mfs-rows .mfc-h { font-size: 1rem; } }
/* the packages */
.mft { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: stretch; margin-top: 4px; }
.mft-c { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 18px 16px 16px; border-radius: 18px; cursor: pointer; font: inherit; color: var(--ink-t);
  background: #FFFDF8; border: 1px solid #EAD9AE; transition: transform .15s, box-shadow .15s; }
.mft-c:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -18px rgba(122,90,16,.6); }
.mft-hot { color: #FFF6F0; border: 0; transform: translateY(-6px); background: radial-gradient(ellipse at 90% 0%, rgba(243,201,74,.22), transparent 55%), linear-gradient(160deg, #2F3170, #1D1E46); box-shadow: 0 20px 36px -18px rgba(29,30,70,.7); }
.mft-hot:hover { transform: translateY(-8px); }
.mft-h { font: 600 1.12rem/1.2 var(--voice); } .mft-hot .mft-h { color: #FFF6F0; }
.mft-n { font: 600 .72rem 'Outfit', sans-serif; color: #8A6A14; } .mft-hot .mft-n { color: #F3DDA0; }
.mft-p { margin: 10px 0 6px; display: flex; flex-direction: column; } .mft-p b { font: 700 1.7rem 'Outfit', sans-serif; color: #1D1E46; line-height: 1; } .mft-hot .mft-p b { color: #F3C94A; }
.mft-p small { margin-top: 3px; font-size: .74rem; color: var(--soft); } .mft-hot .mft-p small { color: #CFC9EC; }
.mft-c ul { margin: 6px 0 12px; padding: 0; list-style: none; flex: 1; } .mft-c li { position: relative; padding: 4px 0 4px 18px; font-size: .78rem; line-height: 1.4; color: #4B4766; }
.mft-hot li { color: #E3DFF5; } .mft-c li::before { content: '✓'; position: absolute; left: 0; color: #1F8A4C; font-weight: 700; } .mft-hot li::before { color: #7FD9A0; }
.mft-go { align-self: stretch; text-align: center; padding: 9px; border-radius: 999px; font: 700 .82rem 'Outfit', sans-serif; border: 1.5px solid #E0AC2A; color: #7A5410; background: #fff; }
.mft-hot .mft-go { background: #F3C94A; border-color: #F3C94A; color: #2E1E06; }
.mft-c .mfc-tag { position: absolute; top: -10px; left: 16px; }
@media (max-width: 760px) { .mft { grid-template-columns: 1fr; } .mft-hot { transform: none; order: -1; } .mft-hot:hover { transform: none; } }
.mfs > .mfc-sketch { margin-top: 18px !important; }
/* Social proof (placeholders), the "see all" link, a trimmed sketch card */
.mfpr { margin-top: 22px; }
.mfpr-n { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.mfpr-n span { text-align: center; padding: 12px 6px; border-radius: 14px; background: #FFFDF8; border: 1px solid #EAD9AE; }
.mfpr-n b { display: block; font: 700 1.3rem 'Outfit', sans-serif; color: #1D1E46; } .mfpr-n small { font-size: .74rem; color: var(--soft); }
.mfpr-q { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mfpr-q figure { margin: 0; padding: 14px; border-radius: 14px; background: #fff; border: 1px solid #EEE7DA; }
.mfpr-q blockquote { margin: 0 0 8px; font: italic 400 .88rem/1.5 'Lora', Georgia, serif; color: #26223A; }
.mfpr-q figcaption { font: 600 .74rem 'Outfit', sans-serif; color: #8A6A14; }
@media (max-width: 760px) { .mfpr-q { grid-template-columns: 1fr; } }
.mfs-all { display: block; margin: 12px 0 0; padding: 12px; border-radius: 14px; text-align: center; text-decoration: none; font: 700 .9rem 'Outfit', sans-serif; color: #1D1E46; background: #fff; border: 1.5px solid #E0AC2A; }
.mfs-all:hover { background: #FFF6DC; }
.mfc-sketch .mfc-img { max-height: 200px !important; }
.mfs-head h2 { margin-bottom: 2px !important; }
/* Evening check-in, leaner: so the offers below are in view sooner (Lord, 3 Oct) */
#eveningForm.flow { padding: 14px 16px !important; }
#eveningForm .evq { font-size: 1.12rem !important; gap: 8px !important; margin: 0 0 8px !important; }
#eveningForm .evq-ic { width: 26px !important; height: 26px !important; font-size: .78rem !important; }
#eveningForm .ev-sign, #eveningForm .ev-tom { padding-top: 10px !important; margin-top: 8px !important; }
#eveningForm .sg-opts, #eveningForm .orbs { padding-left: 34px !important; gap: 5px !important; }
#eveningForm .sg-opts button { padding: 4px 10px !important; font-size: .76rem !important; }
#eveningForm .orbs label > span { padding: 4px 6px !important; } #eveningForm .orbs i { width: 22px !important; height: 22px !important; }
#eveningForm .fl-head b { font-size: 1.2rem !important; }
@media (max-width: 560px) { #eveningForm .sg-opts, #eveningForm .orbs { padding-left: 0 !important; } }
/* testimonials in the Manifest side column */
.mfps { margin: 0 0 14px; padding: 16px; border-radius: 16px; background: #FFFDF8; border: 1px solid #EAD9AE; }
.mfps-k { margin: 0 0 10px; font: 600 1.1rem var(--voice); color: #1D1E46; }
.mfps-n { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.mfps-n span { text-align: center; padding: 8px 4px; border-radius: 10px; background: #fff; border: 1px solid #F0E6CF; }
.mfps-n b { display: block; font: 700 1rem 'Outfit', sans-serif; color: #1D1E46; } .mfps-n small { font-size: .64rem; color: var(--soft); }
.mfps figure { margin: 0; padding: 10px 0; border-top: 1px solid #F0E6CF; }
.mfps blockquote { margin: 0 0 4px; font: italic 400 .84rem/1.5 'Lora', Georgia, serif; color: #26223A; }
.mfps figcaption { font: 600 .7rem 'Outfit', sans-serif; color: #8A6A14; }
.mfpr-end { margin-top: 14px; }
.mft-p b i { font-style: normal; font-size: .85rem; font-weight: 600; margin-left: 2px; color: var(--soft); }
.mft-alt { margin-top: 4px !important; font-weight: 600; color: #4B4766 !important; }
@media (max-width: 760px) { .mft-hot { order: -1; } }
/* side testimonials: quieter styling, at the bottom of the column */
.mfps { margin: 14px 0 0 !important; background: transparent !important; border: 0 !important; padding: 4px 4px 0 !important; }
.mfps-k { font-style: italic; font-size: 1.05rem !important; color: #4B4766 !important; }
.mfps-n span { background: #FFFDF8 !important; border-color: #EAD9AE !important; }
.mfps figure { position: relative; padding: 12px 0 12px 22px !important; }
.mfps figure::before { content: '“'; position: absolute; left: 0; top: 4px; font: 600 2rem/1 var(--voice); color: #D9B962; }
.mfps blockquote { font-size: .82rem !important; }
/* the sketch as a quiet teaser strip on Manifest (Lord, 3 Oct: the packages are the focus) */
.mfsk { display: flex; align-items: center; gap: 12px; margin: 16px 0 6px; padding: 8px 14px 8px 8px; border-radius: 14px; text-decoration: none; color: var(--ink-t); background: #FFFDF8; border: 1px dashed #D9C08A; }
.mfsk:hover { border-style: solid; }
.mfsk-img { flex: none; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; } .mfsk-img img { width: 100%; height: 100%; object-fit: cover; filter: blur(3px); transform: scale(1.15); }
.mfsk-t { flex: 1; font-size: .86rem; line-height: 1.4; color: #4B4766; } .mfsk-t b { color: #1D1E46; } .mfsk-t em { font-style: normal; font-weight: 700; color: #8A6A14; }
.mfsk-p { flex: none; font: 700 .82rem 'Outfit', sans-serif; color: #2F3170; }
/* the table: the same blocks in every card, small fixed heights so rows line up (Lord, 3 Oct) */
.mft { margin-top: 26px !important; align-items: stretch !important; }
.mft-c { display: flex !important; flex-direction: column; gap: 0 !important; }
.mft-c .mft-h { min-height: 2.5em; }
.mft-c .mft-n { margin: 2px 0 10px; }
.mft-worth { display: block; min-height: 1.2em; font: 600 .78rem 'Outfit', sans-serif; color: var(--soft); text-decoration: line-through; text-decoration-color: #C0392B; }
.mft-none { text-decoration: none; }
.mft-hot .mft-worth { color: #CFC9EC; }
.mft-p { margin: 0 !important; min-height: 4.4em; }
.mft-c ul { flex: 1; margin: 8px 0 14px !important; }
.mft-go { margin-top: auto; }
@media (max-width: 760px) { .mft-c .mft-h, .mft-p { min-height: 0; } }
/* two testimonials under the package table (PLACEHOLDERS, from MF_PROOF) */
.mft-q { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.mft-q figure { margin: 0; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid #EEE7DA; box-shadow: 0 6px 16px -14px rgba(29,30,70,.4); }
.mft-stars { display: block; color: #E0AC2A; font-size: .8rem; letter-spacing: 2px; margin-bottom: 4px; }
.mft-q blockquote { margin: 0 0 6px; font: italic 400 .9rem/1.5 'Lora', Georgia, serif; color: #26223A; }
.mft-q figcaption { font: 600 .74rem 'Outfit', sans-serif; color: #8A6A14; }
@media (max-width: 640px) { .mft-q { grid-template-columns: 1fr; } }
.mft-bonus { display: block; margin: 0 0 10px; font: 700 .76rem 'Outfit', sans-serif; color: #8A6A14; } .mft-hot .mft-bonus { color: #F3C94A; }
.mft-terms { margin: 14px 0 0; text-align: center; font-size: .78rem; color: var(--soft); }
.mfp-bon li::before { content: '✦' !important; color: #C9952A !important; }
/* Store v3 (Lord, 3 Oct): packages first, quieter sections, consistent rhythm */
.st-page .st-sec { margin-top: 44px; }
.st-page .st-pk { margin-top: 18px; }
.st-page .st-h h2, .st-page .mfs-pk h3 { font: 600 1.7rem/1.15 var(--voice) !important; color: #1D1E46; margin: 0 0 4px !important; }
.st-page .st-h p, .st-page .mfs-pk .mfs-intro { font-size: .9rem; color: var(--soft); margin: 0 0 14px; }
.st-page .st-h { margin-bottom: 0; }
.st-page .mfsk { margin: 4px 0 12px; }
.st-page .mfs-rows .mfc { border-color: #EFE5D0; box-shadow: none; }
.st-page .mfs-rows .mfc:hover { border-color: #D9B962; }
.st-page .mfs-rows .mfc-img { width: 132px; }
.st-page .mfs-rows .mfc-h { font-size: 1.12rem; }
.st-page .mfs-rows .mfc-q { font-size: .84rem; }
.st-page .mft-q { margin-top: 12px; }
.mfup { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; padding: 10px 12px; border-radius: 14px; background: #FFF8E6; border: 1px solid #EAD08A; }
.mfup b { font: 600 .86rem 'Outfit', sans-serif; color: #6B5320; margin-right: 4px; }
.mfup button { border: 1px solid #E0AC2A; background: #fff; border-radius: 999px; padding: 6px 12px; font: 600 .8rem 'Outfit', sans-serif; color: #1D1E46; cursor: pointer; }
.mfup em { font-style: normal; color: #8A6A14; margin-left: 4px; } .mfup s { color: var(--soft); font-weight: 400; margin-left: 2px; }
/* My Stars: ask Luna (Lord, 4 Oct) */
.ysg { margin: 14px 0 18px; padding: 14px 16px; border-radius: 16px; background: #fff; border: 1px solid #E2DEEA; box-shadow: 0 8px 20px -18px rgba(29,30,70,.45); }
.ysg-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ysg-h .adv-ava { width: 38px !important; height: 38px !important; border-radius: 50%; overflow: hidden; flex: none; } .ysg-h .adv-ava img { width: 100%; height: 100%; object-fit: cover; }
.ysg-h b { display: block; font: 600 1.12rem var(--voice); color: #1D1E46; } .ysg-h small { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; color: #2E8B57; }
.ysg-q { display: flex; flex-wrap: wrap; gap: 6px; }
.ysg-q button { padding: 8px 12px; border-radius: 999px; border: 1px solid #DCD8E6; background: #F7F5FB; color: #23245A; font: 500 .82rem 'Outfit', sans-serif; cursor: pointer; text-align: left; }
.ysg-q button:hover { border-color: #23245A; background: #fff; }
.ysg-own { margin-top: 10px; border: 0; background: none; padding: 0; font: 700 .84rem 'Outfit', sans-serif; color: #2F3170; cursor: pointer; }
.bt-top + .scheck, .btd.bt-top { margin-top: 0; }
/* Ask Luna, lean: one row */
.ysg { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px !important; padding: 10px 12px !important; margin: 12px 0 18px !important; }
.ysg > .adv-ava { width: 30px !important; height: 30px !important; border-radius: 50%; overflow: hidden; flex: none; } .ysg > .adv-ava img { width: 100%; height: 100%; object-fit: cover; }
.ysg > b { font: 600 1rem var(--voice); color: #1D1E46; margin-right: 4px; }
.ysg > button:not(.ysg-own) { padding: 6px 11px; border-radius: 999px; border: 1px solid #DCD8E6; background: #F7F5FB; color: #23245A; font: 500 .78rem 'Outfit', sans-serif; cursor: pointer; }
.ysg > button:not(.ysg-own):hover { border-color: #23245A; background: #fff; }
.ysg-own { margin: 0 0 0 auto !important; font-size: .8rem !important; }

/* My Stars, 4 Oct: birth time quiet inside the blue box; "yesterday" in light blue; a lovelier Ask Luna */
.yr2 .btd.bt-top { margin: 6px 0 0 !important; padding: 8px 0 0 !important; background: none !important; border: 0 !important; border-top: 1px solid rgba(255,255,255,.08) !important; border-radius: 0 !important; text-align: center; }
.yr2 .btd.bt-top summary { font-size: .78rem !important; color: #A9A6CF !important; }
.yr2 .btd.bt-top summary b { color: #E9E6FA !important; font-weight: 600; } .yr2 .btd.bt-top summary em { color: #F3DDA0 !important; }
.yr2 .btd.bt-top[open] form { margin: 10px auto 4px; max-width: 460px; padding: 12px; border-radius: 12px; background: #FFFDF8; text-align: left; color: var(--ink-t); }
.scheck2 { margin: 14px 0 12px !important; }
.scheck2 .yr-ask { background: linear-gradient(160deg, #EEF3FF, #DCE6FA) !important; border: 1px solid #C9D6F3 !important; border-radius: 16px !important; padding: 16px 18px !important; color: #1D1E46 !important; }
.scheck2 .yr-ask p { color: #1D1E46 !important; font: italic 500 1.25rem/1.35 var(--voice) !important; }
.scheck2 .yr-ask p span { display: block; margin-bottom: 4px; font: 700 .74rem 'Outfit', sans-serif !important; font-style: normal !important; color: #4B5BA8 !important; letter-spacing: .01em; }
.scheck2 .yr-ask button:not(.on) { background: #fff; color: #1D1E46; border-color: #C9D6F3; }
.ysg { display: flex !important; align-items: flex-start !important; gap: 14px !important; padding: 16px 18px !important; margin: 0 0 22px !important; border-radius: 18px !important; border: 0 !important;
  background: radial-gradient(ellipse at 0% 0%, rgba(243,201,74,.12), transparent 50%), linear-gradient(160deg, #FFFFFF, #F4F2FB) !important; box-shadow: 0 10px 26px -18px rgba(29,30,70,.45), 0 0 0 1px #E6E2F0 !important; }
.ysg-ava { position: relative; flex: none; width: 54px; height: 54px; }
.ysg-ava .adv-ava { width: 54px !important; height: 54px !important; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px #fff, 0 0 0 4px #D9C08A; }
.ysg-ava .adv-ava img { width: 100%; height: 100%; object-fit: cover; }
.ysg-ava i { position: absolute; right: 1px; bottom: 1px; width: 12px; height: 12px; border-radius: 50%; background: #2DBE60; border: 2px solid #fff; }
.ysg-b { flex: 1; min-width: 0; }
.ysg-t { margin: 0 0 8px; } .ysg-t b { display: block; font: 600 1.15rem var(--voice); color: #1D1E46; } .ysg-t small { font-size: .74rem; color: #2E8B57; }
.ysg-q { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ysg-q button { padding: 7px 12px; border-radius: 999px; border: 1px solid #DCD8E6; background: #fff; color: #23245A; font: 500 .8rem 'Outfit', sans-serif; cursor: pointer; }
.ysg-q button:hover { border-color: #23245A; }
.ysg-in { display: flex; align-items: center; width: 100%; padding: 8px 8px 8px 14px; border-radius: 999px; border: 1px solid #DCD8E6; background: #fff; cursor: text; font: 400 .86rem 'Outfit', sans-serif; color: #9B98B5; }
.ysg-in span { flex: 1; text-align: left; } .ysg-in i { width: 30px; height: 30px; border-radius: 50%; background: #23245A; color: #fff; display: grid; place-items: center; font-style: normal; font-size: .8rem; }
@media (max-width: 560px) { .ysg-ava, .ysg-ava .adv-ava { width: 42px !important; height: 42px !important; } }
.yr2 .btd.bt-top { grid-column: 1 / -1 !important; width: 100% !important; max-width: none !important; }
.yr2 .btd.bt-top summary { display: block; white-space: nowrap; }
.scheck2 .yr-ask p { font-size: 1.45rem !important; }
.scheck2 .yr-ask { box-shadow: 0 10px 24px -18px rgba(47,49,112,.5); }
/* Yesterday, more subtle (Lord, 4 Oct): one slim line on the page, small buttons on the right */
.scheck2 { margin: 12px 0 12px !important; }
.scheck2 .yr-ask { display: flex !important; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px; padding: 10px 14px !important;
  background: #F4F6FC !important; border: 1px solid #E1E6F4 !important; box-shadow: none !important; border-radius: 14px !important; }
.scheck2 .yr-ask p { margin: 0 !important; flex: 1 1 260px; font: italic 500 1.02rem/1.35 var(--voice) !important; color: #2E2A44 !important; }
.scheck2 .yr-ask p span { display: inline !important; margin: 0 6px 0 0 !important; font: 600 .7rem 'Outfit', sans-serif !important; color: #6B74A8 !important; }
.scheck2 .yr-ask > div { display: flex; gap: 6px; flex: none; }
.scheck2 .yr-ask button { padding: 5px 12px !important; font-size: .78rem !important; min-height: 0 !important; }
.ysg-go { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px; border: 0; background: #23245A; color: #fff; font: 600 .86rem 'Outfit', sans-serif; cursor: pointer; box-shadow: 0 8px 16px -10px rgba(29,30,70,.6); }
.ysg-go:hover { background: #2F3170; }
.ysg-go .nv-dot { width: 7px; height: 7px; border-radius: 50%; background: #2DBE60; box-shadow: 0 0 0 3px rgba(45,190,96,.25); }
.ysg-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.ysg-top .ysg-t { margin: 0; } .ysg-top .ysg-go { flex: none; }
.ysg-q { margin-bottom: 0 !important; }
@media (max-width: 560px) { .ysg-top { flex-direction: column; } }
.dk-sugg { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; padding: 0 12px 10px; max-height: 40%; overflow-y: auto; }
.dk-sugg button { max-width: 88%; text-align: left; padding: 8px 12px; border-radius: 14px 14px 4px 14px; border: 1px solid #C9CDEA; background: #fff; color: #23245A; font: 500 .82rem 'Outfit', sans-serif; cursor: pointer; }
.dk-sugg button:hover { background: #23245A; color: #fff; border-color: #23245A; }
.ysg-hook { margin: 2px 0 4px; font: 600 1.2rem/1.3 var(--voice); color: #1D1E46; }
.ysg-sub { margin: 0 0 12px; font-size: .88rem; line-height: 1.5; color: #4B4766; }
.ysg-b > .ysg-go { display: flex; width: fit-content; margin-left: auto; }
/* Today across her life (Co-Star style) */
.lifea { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 4px 0 14px; }
.la { display: flex; flex-direction: column; gap: 6px; padding: 12px 12px 12px; border-radius: 14px; background: #fff; border: 1px solid #ECE6DA; }
.la > div small { display: block; font: 600 .7rem 'Outfit', sans-serif; color: var(--soft); }
.la > div b { display: block; font: 600 1.05rem var(--voice); color: #1D1E46; margin: 1px 0 4px; }
.la > div p { margin: 0; font-size: .76rem; line-height: 1.4; color: #4B4766; }
.la-g { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; background: #F1EEF8; color: #4B4C8E; }
.la-up .la-g { background: #E6F4EA; color: #1F8A4C; } .la-up b { color: #17663A !important; }
.la-down .la-g { background: #FBEDE6; color: #B5562F; } .la-down b { color: #9A4524 !important; }
@media (max-width: 900px) { .lifea { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* blue box: even space around the birth-time line */
.yr2 .btd.bt-top { margin: 0 !important; padding: 10px 0 14px !important; }
.yr2 .yr-whyb { padding-bottom: 12px !important; }
/* chat suggestions: short one-line pills, no scroll box */
.dk-sugg { flex-direction: row !important; flex-wrap: wrap; justify-content: flex-end; max-height: none !important; overflow: visible !important; gap: 6px !important; }
.dk-sugg button { max-width: 100% !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 6px 11px !important; font-size: .78rem !important; border-radius: 999px !important; }
/* My Stars on a phone, leaner (Lord, 4 Oct): the wheel hides (it is inside "Why the stars say this"), smaller type, the three facts as one compact row */
@media (max-width: 760px) {
  .yr2 .ys-wh { display: none !important; }
  .yr2 .yr-body { padding: 18px 18px 14px !important; }
  .yr2 .yr-k { font-size: .74rem !important; margin-bottom: 2px !important; }
  .yr2 .yr-name { font-size: .74rem !important; margin: 0 0 4px !important; }
  .yr2 h1 { font-size: 1.85rem !important; line-height: 1.1 !important; margin: 0 0 8px !important; }
  .yr2 .yr-mean { font-size: 1rem !important; line-height: 1.4 !important; margin: 0 0 10px !important; }
  .yr2 .ys-inf { font-size: .8rem !important; margin: 0 !important; } .yr2 .ys-inf > span { width: 26px !important; height: 26px !important; font-size: .8rem !important; }
  .yr2 .yr-band { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0 !important; }
  .yr2 .yr-band > div { padding: 10px 14px !important; border: 0 !important; border-top: 1px solid rgba(255,255,255,.08) !important; }
  .yr2 .yr-band > div:first-child { grid-column: 1 / -1; }
  .yr2 .yr-band > div > span { width: 28px !important; height: 28px !important; font-size: .8rem !important; }
  .yr2 .yr-band p { font-size: .9rem !important; line-height: 1.35 !important; }
  .yr2 .yr-band small { font-size: .66rem !important; }
  .yr2 .yr-band em { font-size: 1rem !important; }
  .yr2 .yr-whyb { padding: 10px 0 !important; font-size: .82rem !important; }
}
@media (max-width: 760px) { .yr2 .yr-body { padding-bottom: 14px !important; min-height: 0 !important; } .yr2 .yr-card { display: none !important; } .yr2.ys-day { min-height: 0 !important; } .yr2 > .yr-body + * { margin-top: 0 !important; } }
@media (max-width: 760px) { .yr2.ys-day { display: block !important; grid-template-rows: none !important; } }
/* In a conversation: no floating pen (the message box has its own ✎ Journal) (Lord, 4 Oct) */
body.chatting .qfab, body.chatting .qfab:hover { display: none !important; }
/* Birth time form inside the blue box (Lord, 4 Oct): one tidy row on the night sky, no red focus ring */
.yr2 .btd.bt-top summary { outline: none !important; border: 0 !important; box-shadow: none !important; }
.yr2 .btd.bt-top summary:focus-visible { outline: 1px dashed rgba(243,221,160,.5) !important; outline-offset: 4px; border-radius: 6px; }
.yr2 .btd.bt-top[open] form { display: grid !important; grid-template-columns: 150px 1fr auto; align-items: end; gap: 10px 12px; max-width: 620px !important; margin: 12px auto 4px !important;
  padding: 14px 16px !important; border-radius: 14px !important; background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.12); }
.yr2 .btd.bt-top[open] form label { display: flex; flex-direction: column; gap: 6px; margin: 0; font: 600 .74rem 'Outfit', sans-serif !important; color: #CFC9EC !important; text-align: left; white-space: nowrap; }
.yr2 .btd.bt-top[open] form input { width: 100%; height: 42px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.95); color: #1D1E46; font: 500 .9rem 'Outfit', sans-serif; color-scheme: light; }
.yr2 .btd.bt-top[open] form .btn { height: 42px; margin: 0; padding: 0 22px !important; background: #F3C94A !important; color: #2E1E06 !important; border: 0 !important; box-shadow: none !important; font-size: .9rem; }
.yr2 .btd.bt-top[open] form .link { grid-column: 1 / -1; justify-self: center; margin: 0; background: none; border: 0; color: #A9A6CF; font: 500 .78rem 'Outfit', sans-serif; text-decoration: underline; cursor: pointer; }
@media (max-width: 560px) { .yr2 .btd.bt-top[open] form { grid-template-columns: 1fr; } }
.yr2 .btd.bt-top[open] form label { justify-content: flex-end; } .yr2 .btd.bt-top[open] form label > input { margin-top: 0; }
/* Panchang (Lord, 4 Oct) */
.pnc { margin: 0 0 14px; padding: 16px; border-radius: 16px; background: #FFFDF8; border: 1px solid #EAD9AE; }
.pnc-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; } .pnc-h b { font: 600 1.15rem var(--voice); color: #1D1E46; } .pnc-h small { font-size: .76rem; color: var(--soft); }
.pnc-g { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.pnc-g > div { padding: 10px; border-radius: 12px; background: #fff; border: 1px solid #F0E6CF; }
.pnc-g small { display: block; font: 600 .68rem 'Outfit', sans-serif; color: #8A6A14; } .pnc-g b { display: block; margin: 2px 0; font: 600 .98rem var(--voice); color: #1D1E46; } .pnc-g span { font-size: .72rem; color: var(--soft); line-height: 1.35; }
.pnc-t { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 12px 0 0; font-size: .8rem; color: #4B4766; }
.pnc-t i { font-style: normal; margin-right: 4px; } .pnc-bad b { color: #9A4524; } .pnc-bad i { color: #B5562F; } .pnc-ok b { color: #17663A; } .pnc-ok i { color: #C9952A; }
.pnc-chat { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid #DCD8E6; background: #F4F2FB; cursor: pointer; text-align: left; font: inherit; }
.pnc-chat:hover { border-color: #23245A; }
.pnc-chat .adv-ava { width: 32px !important; height: 32px !important; border-radius: 50%; overflow: hidden; flex: none; } .pnc-chat .adv-ava img { width: 100%; height: 100%; object-fit: cover; }
.pnc-chat span { flex: 1; font-size: .84rem; color: #4B4766; } .pnc-chat span b { color: #1D1E46; } .pnc-chat em { font-style: normal; font: 700 .82rem 'Outfit', sans-serif; color: #2F3170; white-space: nowrap; }
@media (max-width: 760px) { .pnc-g { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* birth form: every label and field on the same lines */
.yr2 .btd.bt-top[open] form > label { display: grid !important; grid-template-rows: 18px 42px; gap: 6px !important; align-self: end; margin: 0 !important; padding: 0 !important; line-height: 18px; }
.yr2 .btd.bt-top[open] form > label > input { margin: 0 !important; height: 42px !important; box-sizing: border-box; }
.yr2 .btd.bt-top[open] form > .btn { align-self: end; height: 42px !important; margin: 0 !important; }
.pnc-g span { display: block; line-height: 1.35 !important; }
/* life stages (Lord, 4 Oct) */
.mfst { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 12px; }
.mfst span { font: 600 .78rem 'Outfit', sans-serif; color: var(--soft); margin-right: 4px; }
.mfst button { padding: 7px 14px; border-radius: 999px; border: 1px solid #DCD8E6; background: #fff; color: #23245A; font: 600 .82rem 'Outfit', sans-serif; cursor: pointer; }
.mfst button.on { background: #23245A; border-color: #23245A; color: #fff; }
.mfst-g { margin-top: 18px; } .mfst-g h3 { margin: 0; font: 600 1.2rem var(--voice); color: #1D1E46; } .mfst-g > p { margin: 2px 0 10px; font-size: .84rem; color: var(--soft); }
/* Store below the packages: list left, testimonials right (sticky) */
.st-two { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; }
.st-proof { position: sticky; top: 88px; }
.st-proof .mfps { margin-top: 44px !important; }
@media (max-width: 960px) { .st-two { grid-template-columns: 1fr; } .st-proof { position: static; } .st-proof .mfps { margin-top: 24px !important; } }
.st-two { grid-template-columns: minmax(0, 1fr) 320px; }
@media (min-width: 961px) { .st-page .st-two { grid-template-columns: minmax(0, 1fr) 320px !important; } }
/* Store: the whole page 850px wide (Lord, 4 Oct); list and testimonials share it */
@media (min-width: 900px) { .page.solo.wide:has(.st-page) { grid-template-columns: minmax(0, 850px) !important; } }
@media (min-width: 961px) { .st-page .st-two { grid-template-columns: minmax(0, 1fr) 260px !important; gap: 24px !important; } }
/* crossed-out retail prices */
s.was { text-decoration: line-through; text-decoration-color: #C0392B; color: var(--soft); font-weight: 500; margin-right: 3px; }
.mfc-big s.was { color: #3A2410; opacity: .6; }
.mfc-p s.was { font-size: .82em; }
/* Life-stage groups in the Store: each a soft panel with its heading inside (Lord, 4 Oct) */
.mfst-g { margin-top: 14px !important; padding: 14px 14px 12px; border-radius: 16px; background: #F7F3FB; border: 1px solid #E8E1F1; }
.mfst-g h3 { display: flex; align-items: center; gap: 8px; font-size: 1.15rem !important; }
.mfst-g h3::before { content: '♥'; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #23245A; color: #F3C94A; font-size: .7rem; }
.mfst-g > p { margin: 2px 0 10px 32px !important; }
.mfst-g .mfs-rows { gap: 8px !important; }
.mfst-g .mfc { background: #fff !important; }
.mfst-g h3 { font: 700 1.38rem/1.15 var(--voice) !important; margin: 0 !important; }
.mfst-g h3::before { width: 26px !important; height: 26px !important; }
.mfst-g > p { margin: 0 0 8px 34px !important; line-height: 1.3; }
/* "Get all three" box under the readings */
.rd3 { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 14px 16px; border-radius: 14px; text-decoration: none; color: #FFF6F0;
  background: radial-gradient(ellipse at 100% 0%, rgba(243,201,74,.2), transparent 55%), linear-gradient(160deg, #2F3170, #1D1E46); box-shadow: 0 12px 24px -18px rgba(29,30,70,.7); }
.rd3-i { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(243,201,74,.18); color: #F3C94A; }
.rd3 > span:nth-child(2) { flex: 1; font-size: .9rem; line-height: 1.4; } .rd3 b { color: #fff; } .rd3 em { font-style: normal; color: #F3DDA0; font-weight: 600; }
.rd3 i { flex: none; font-style: normal; font: 700 .8rem 'Outfit', sans-serif; color: #2E1E06; background: #F3C94A; padding: 7px 12px; border-radius: 999px; }
@media (max-width: 560px) { .rd3 { flex-wrap: wrap; } }
.rd3-top { margin: 0 0 6px; }
.st-page .st-h h2 { margin-bottom: 2px !important; line-height: 1.12 !important; } .st-page .st-h p { margin-top: 0 !important; line-height: 1.45; }
/* the sketch offer: a compact, punchy pill, not a full-width bar (Lord, 4 Oct) */
.mfsk { width: fit-content !important; max-width: 100%; margin-left: auto !important; margin-right: auto !important; padding: 6px 16px 6px 6px !important; gap: 10px !important; border: 1px solid #E6C76E !important; border-radius: 999px !important;
  background: linear-gradient(160deg, #FFF8E6, #FBEFD0) !important; box-shadow: 0 8px 18px -14px rgba(122,90,16,.6); }
.mfsk-img { width: 36px !important; height: 36px !important; }
.mfsk-t { flex: none !important; font-size: .9rem !important; white-space: nowrap; }
.mfsk-t b { font-weight: 700; } .mfsk-t em { color: #8A5A10 !important; }
.mfsk-p { padding-left: 10px; border-left: 1px solid #E6C76E; }
@media (max-width: 640px) { .mfsk { border-radius: 16px !important; } .mfsk-t { white-space: normal; flex: 1 !important; font-size: .84rem !important; } }
/* the sketch row in the readings: quiet, like the other readings */
.mfsk-row { display: flex; flex-direction: row !important; align-items: stretch; text-decoration: none; margin-bottom: 10px; border-style: dashed !important; border-color: #E6C76E !important; }
.mfsk-row .mfc-img { flex: none; width: 132px; } .mfsk-row .mfc-img img { filter: blur(5px) saturate(.85); transform: scale(1.1); object-position: 50% 30%; }
.mfsk-free { color: #8A5A10 !important; font-weight: 700; }
.mfsk-row.flash { animation: skFlash 1.6s ease-out; }
@keyframes skFlash { 0%, 40% { box-shadow: 0 0 0 4px rgba(243,201,74,.55); } 100% { box-shadow: none; } }
@media (max-width: 640px) { .mfsk-row .mfc-img { width: 104px; } }
.st-page .st-h { display: block !important; gap: 0 !important; } .st-page .st-h h2 { margin: 0 0 4px !important; }

/* ---- Intentions with versions (Lord, 4 Oct): five intentions; the versions show on the card, she picks one in the sheet */
.mfc-vs { display: block; margin-top: 4px; font: 600 .74rem 'Outfit', sans-serif; color: #8A6A12; }
.mfc-big .mfc-vs { color: #F3DDA0; font-size: .8rem; }
.mfp-vers { margin-bottom: 4px; }
.mfs-more { margin-top: 12px; }
.mfs-more > summary { list-style: none; cursor: pointer; padding: 12px; border-radius: 14px; text-align: center; font: 700 .9rem 'Outfit', sans-serif; color: #1D1E46; background: #fff; border: 1.5px solid #E0AC2A; }
.mfs-more > summary::-webkit-details-marker { display: none; }
.mfs-more > summary:hover { background: #FFF6DC; }
.mfs-more[open] > summary { margin-bottom: 10px; }

/* ---- Store boxes, leaner (Lord, 4 Oct): the box heading says what it answers, so the card drops its question line */
.st-page .mfst-g .mfc-q { display: none; }
.st-page .mfst-g .mfs-rows .mfc-img { width: 112px; }
.st-page .mfst-g .mfc-body { padding: 10px 14px; }
.st-page .mfst-g .mfsk-row { border: 1px solid #EFE5D0 !important; box-shadow: none !important; background: #fff !important; }
.st-page .mfst-g .st-mf { margin-top: 0; }

/* ---- Store, simpler (Lord, 4 Oct): readings as three small square tiles; intentions in one lilac box with life-stage headings */
.rdt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
.rdt-c { display: flex; flex-direction: column; padding: 0; text-align: left; cursor: pointer; background: #fff; border: 1px solid #EFE5D0; border-radius: 14px; overflow: hidden; font: inherit; color: inherit; }
.rdt-c:hover { border-color: #D9B962; }
.rdt-img { display: block; aspect-ratio: 1 / 1; overflow: hidden; } .rdt-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rdt-b { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 12px; flex: 1; }
.rdt-b b { font: 600 1.02rem/1.2 var(--voice); color: #1D1E46; }
.rdt-b small { font-size: .76rem; line-height: 1.3; color: var(--soft); }
.rdt-b em { margin-top: auto; padding-top: 6px; font: normal 700 .95rem 'Outfit', sans-serif; color: #1D1E46; }
@media (max-width: 560px) { .rdt { gap: 7px; } .rdt-b { padding: 8px; } .rdt-b b { font-size: .86rem; } .rdt-b small { display: none; } }
.mfst-one { margin-top: 14px; padding: 6px 16px 16px; border-radius: 18px; background: #F7F3FB; border: 1px solid #E8E1F1; }
.mfst-s { padding-top: 14px; } .mfst-s + .mfst-s { margin-top: 6px; border-top: 1px solid #E8E1F1; }
.mfst-s h3 { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 1.2rem/1.15 var(--voice); color: #1D1E46; }
.mfst-s h3::before { content: '♥'; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #23245A; color: #F3C94A; font-size: .62rem; flex: none; }
.mfst-s > p { margin: 1px 0 8px 30px; font-size: .82rem; color: var(--soft); }
.mfst-s .st-mf { margin-top: 0; } .mfst-s .mfc { background: #fff !important; } .mfst-s .mfc-q { display: none; }
.st-page .mfst-s .mfs-rows .mfc-img { width: 104px; } .st-page .mfst-s .mfc-body { padding: 10px 14px; }

/* ---- The sketch row in the Store, lean (Lord, 4 Oct) */
.sk-lean { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 8px 14px 8px 8px; border-radius: 14px; background: #fff; border: 1px dashed #D9B962; text-decoration: none; color: inherit; }
.sk-lean:hover { border-style: solid; }
.sk-lean img { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; flex: none; filter: blur(2px); }
.sk-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.sk-t b { font: 600 1rem/1.2 var(--voice); color: #1D1E46; }
.sk-t small { font-size: .76rem; color: var(--soft); } .sk-t em { font-style: normal; font-weight: 700; color: #8A6A12; }
.sk-p { flex: none; font: 700 .95rem 'Outfit', sans-serif; color: #1D1E46; white-space: nowrap; }
@media (max-width: 560px) { .sk-t b { font-size: .9rem; } }

/* ---- Store intentions, lean cards (Lord, 4 Oct) */
.mfst-one { padding: 6px 12px !important; }
.mfi { display: flex; gap: 14px; align-items: center; padding: 12px 4px; cursor: pointer; border-radius: 12px; }
.mfi + .mfi { border-top: 1px solid #E8E1F1; border-radius: 0; }
.mfi:hover .mfi-h { color: #23245A; text-decoration: underline; text-decoration-color: #D9B962; text-underline-offset: 3px; }
.mfi:focus-visible { outline: 2px solid #23245A; outline-offset: 2px; }
.mfi-img { flex: none; width: 88px; height: 88px; border-radius: 12px; overflow: hidden; } .mfi-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mfi-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mfi-k { font: 700 .66rem 'Outfit', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #8A6A12; }
.mfi-h { font: 600 1.12rem/1.2 var(--voice); color: #1D1E46; }
.mfi-f { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.mfi-vs { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.mfi-v { padding: 3px 9px; border-radius: 999px; background: #fff; border: 1px solid #E3DAEE; font: 600 .74rem 'Outfit', sans-serif; color: #23245A; }
.mfi-v:hover { border-color: #23245A; }
.mfi-n { font: 600 .74rem 'Outfit', sans-serif; color: #8A6A12; }
.mfi-p { font: 700 .95rem 'Outfit', sans-serif; color: #1D1E46; white-space: nowrap; margin-left: auto; }
.st-sec[data-cat=intentions] .rd3 { margin-top: 12px; }
@media (max-width: 560px) { .mfi-img { width: 64px; height: 64px; } .mfi-h { font-size: .98rem; } }

/* ---- "Get all three / all five" box, subtler but still navy (Lord, 4 Oct) */
.rd3 { padding: 9px 10px 9px 14px !important; gap: 10px !important; border-radius: 12px !important; background: radial-gradient(120% 160% at 20% 0%, #3B3F7A 0%, #303468 60%, #2A2E5E 100%) !important; box-shadow: none !important; }
.rd3-i { width: auto !important; height: auto !important; background: none !important; font-size: .85rem; }
.rd3 > span:nth-child(2) { font-size: .82rem !important; color: #D9D4F0; } .rd3 b { font-weight: 600; }
.rd3 i { padding: 0 6px !important; background: none !important; color: #F3C94A !important; font-size: .78rem !important; }
.rd3:hover i { text-decoration: underline; text-underline-offset: 3px; }
.st-all { display: block; margin-top: 14px; text-align: center; font: 700 .9rem 'Outfit', sans-serif; color: #23245A; text-decoration: none; }
.st-all:hover { text-decoration: underline; text-decoration-color: #D9B962; text-underline-offset: 3px; }
/* Store: no big gap under the tabs now the packages moved to the bottom (Lord, 4 Oct) */
.st-page .st-tabs { margin-bottom: 18px; }
.st-page .st-main > .st-sec:first-child { margin-top: 0; }
.st-page .st-proof > :first-child { margin-top: 0 !important; padding-top: 0 !important; }

/* ---- Store top, tighter (Lord, 4 Oct): no "The Store" header, shorter tile pictures, a "Most chosen" tag, slim stats */
.st-page { padding-top: 22px; }
.rdt-img { aspect-ratio: 4 / 3 !important; }
.rdt-tag { align-self: flex-start; font: normal 700 .62rem 'Outfit', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: #1F8A4C; padding: 2px 7px; border-radius: 999px; margin-bottom: 2px; }   /* PLACEHOLDER until real sales numbers */
.st-proof .mfps { margin-top: 6px !important; }
.st-proof .mfps-n { gap: 0; margin-bottom: 6px; border-top: 1px solid #F0E6CF; border-bottom: 1px solid #F0E6CF; padding: 8px 0; }
.st-proof .mfps-n span { background: none !important; border: 0 !important; padding: 0 2px; }
.st-proof .mfps-n span + span { border-left: 1px solid #F0E6CF !important; }
.st-proof .mfps-n b { font-size: 1.05rem; } .st-proof .mfps-n small { display: block; white-space: nowrap; font-size: .66rem; }

/* ---- Intentions box: warm white card instead of cool lilac (Lord, 4 Oct; colour roles: no cool pastel blocks) */
.mfst-one { background: #fff !important; border: 1px solid #EFE5D0 !important; }
.mfi + .mfi { border-top-color: #F2EADA !important; }
.mfi-v { background: #FFFBF2 !important; border-color: #EBDDBC !important; }
.mfi-v:hover { border-color: #C9A24A !important; }

/* ---- Manifest: one highlighted link to the packages in the Store (Lord, 4 Oct) */
.mf-topk { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 14px 16px; border-radius: 14px; background: #FFF6DC; border: 1.5px solid #E0AC2A; text-decoration: none; color: #1D1E46; font: 500 .95rem 'Outfit', sans-serif; }
.mf-topk:hover { background: #FFEFC2; }
.mf-topk-i { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #F3C94A; color: #2E1E06; font-size: .85rem; }
.mf-topk > span:nth-child(2) { flex: 1; } .mf-topk b { font-weight: 700; }
.mf-topk i { font-style: normal; font: 700 1.2rem 'Outfit', sans-serif; color: #8A6A12; }

/* ---- Store, Halbert pass (Lord, 4 Oct): left column leads, proof column quieter and lower */
.st-page .st-main > .st-sec:first-child .st-h h2 { font-size: 2.15rem !important; line-height: 1.1 !important; }
@media (min-width: 961px) { .st-page .st-proof { padding-top: 96px; } }
.st-proof .mfps-k { font-size: .9rem; }
.st-proof .mfps figure { padding: 10px 0 !important; }
.st-proof .mfps figure::before { content: none !important; }
.st-proof .mfps blockquote { font-size: .78rem !important; color: #5A5670 !important; }
.st-proof .mfps figcaption { font-size: .66rem; color: #9A8A5A; }
.why { display: block; font: 500 .66rem 'Outfit', sans-serif; color: #9A8A5A; text-align: right; margin-top: 1px; }
.rdt-b .why { text-align: left; }
.mfi-p { text-align: right; }
.mfi-n { display: block; margin-top: 4px; font: 600 .74rem 'Outfit', sans-serif; color: #8A6A12; }
.mfi-q { display: block; margin-top: 5px; font: italic 400 .78rem/1.4 'Lora', Georgia, serif; color: #5A5670; }
.mfi-q b { font: normal 600 .68rem 'Outfit', sans-serif; color: #8A6A12; }
.mft-g { margin: 12px 0 2px; text-align: center; font: 500 .95rem 'Outfit', sans-serif; color: #1D1E46; }
.mft-g b { font-weight: 700; } .mft-g::first-letter { color: #1F8A4C; font-weight: 700; }
.st-ps { margin: 28px 0 0; padding: 16px 18px; border-radius: 14px; background: #fff; border: 1px solid #EFE5D0; font: italic 400 .95rem/1.55 'Lora', Georgia, serif; color: #26223A; }
.st-ps b { font: normal 700 .9rem 'Outfit', sans-serif; color: #8A6A12; margin-right: 4px; }
.st-ps a { color: #23245A; font-weight: 600; text-decoration: underline; text-decoration-color: #D9B962; text-underline-offset: 3px; }
.mft-q:has(figure:only-child) { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }

/* ---- Store top and proof, richer (Lord, 4 Oct): a trust strip under the headline; the proof column is one warm card; no proof column on mobile */
.st-trust { margin: 8px 0 12px; font: 500 .8rem 'Outfit', sans-serif; color: #5A5670; }
.st-trust b { color: #1D1E46; font-weight: 700; } .st-trust-s { color: #E0AC2A; letter-spacing: 1px; }
@media (min-width: 961px) { .st-page .st-proof { padding-top: 150px !important; } }
@media (max-width: 960px) { .st-page .st-proof, .mfps { display: none !important; } }
.pfc { padding: 18px 18px 6px; border-radius: 16px; background: #FFFDF7; border: 1px solid #EAD9AE; box-shadow: 0 10px 30px -18px rgba(90, 64, 20, .35); }
.pfc-h { margin: 0 0 4px; font: 600 1.15rem var(--voice); color: #1D1E46; }
.pfc figure { margin: 0; padding: 12px 0; border-top: 1px solid #F0E6CF; }
.pfc-h + figure { border-top: 0; }
.pfc-st { display: block; color: #E0AC2A; font-size: .72rem; letter-spacing: 1px; }
.pfc blockquote { margin: 4px 0 8px; font: italic 400 .86rem/1.5 'Lora', Georgia, serif; color: #26223A; }
.pfc figcaption { display: flex; align-items: center; gap: 7px; font: 500 .72rem 'Outfit', sans-serif; color: #7A7590; }
.pfc figcaption b { font-weight: 700; color: #1D1E46; margin-right: -3px; }
.pfc-av { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #23245A; color: #F3C94A; font: 700 .7rem 'Outfit', sans-serif; }
.st-page .st-proof > .pfc { padding-top: 16px !important; }
.mfi-sub { font-size: .8rem; color: var(--soft); }
.rdt-tag-in { display: inline-block; margin: 0 6px 0 0; vertical-align: 1px; letter-spacing: .06em; }
/* Readings: tiles on desktop, stacked rows on phones (Lord, 4 Oct) */
.rd-rows { display: none; }
@media (max-width: 640px) { .rd-rows { display: block; margin-top: 10px; } .rdt { display: none !important; } }

/* ---- Phones (Lord, 4 Oct): intentions and readings as separate cards, picture on top, text aligned under it */
@media (max-width: 640px) {
  .mfst-one { background: none !important; border: 0 !important; padding: 0 !important; display: grid; gap: 12px; }
  .mfst-one .mfi { flex-direction: column; align-items: stretch; gap: 0; padding: 0; background: #fff; border: 1px solid #EFE5D0 !important; border-radius: 16px !important; overflow: hidden; box-shadow: 0 8px 22px -16px rgba(90, 64, 20, .35); }
  .mfst-one .mfi-img { width: 100%; height: 132px; border-radius: 0; }
  .mfst-one .mfi-b { padding: 12px 14px 14px; gap: 4px; }
  .mfst-one .mfi-h { font-size: 1.12rem; }
  .mfst-one .mfi-f { align-items: flex-end; margin-top: 6px; }
  .mfst-one .mfi-p { font-size: 1.02rem; }
  .mfst-one .mfi-sub { flex: 1 1 100%; }
  .mfst-one .mfi-n { margin-top: 8px; }
  .mfst-one .mfi-q { margin-top: 8px; padding-top: 8px; border-top: 1px solid #F2EADA; }
}
@media (max-width: 640px) { .mfst-one .mfi-img { height: 92px; } .mfst-one .mfi-b { padding: 10px 14px 12px; } .mfst-one .mfi-h { font-size: 1.06rem; } }   /* smaller picture strip (Lord, 4 Oct) */
@media (max-width: 640px) { .mfst-one .mfi-img { height: 80px; } }
/* Desktop tiles aligned (Lord, 4 Oct): the tag sits on the picture, so all three titles start on the same line; price note on one line */
.rdt-c { position: relative; }
.rdt-c .rdt-tag { position: absolute; top: 10px; left: 10px; margin: 0; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.rdt-b .why { font-size: .66rem; }
.st-top .st-h h2 { font-size: 2.15rem !important; line-height: 1.1 !important; margin: 0; }
.st-top .st-h p { margin: 6px 0 0; }
@media (min-width: 961px) { .st-page .st-proof { padding-top: 0 !important; } }
.st-page .st-main > .st-sec:first-child > :first-child { margin-top: 0 !important; }
/* Phones (Lord, 4 Oct): a smaller Store headline, less space above it, the trust strip on one line */
@media (max-width: 640px) {
  .st-page { padding-top: 10px !important; }
  .st-top .st-h h2 { font-size: 1.55rem !important; line-height: 1.15 !important; }
  .st-top .st-h p { font-size: .85rem; margin-top: 4px; }
  .st-trust { font-size: .68rem; margin: 6px 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .st-trust-s { letter-spacing: 0; }
  .sk-t b { font-size: .88rem; } .sk-t small { font-size: .7rem; }
}
@media (max-width: 640px) { .st-trust-x { display: none; } .st-trust { white-space: normal; overflow: visible; } }
/* The Store's chat launcher is customer care: gold, with a small "Help" label (Lord, 4 Oct) */
.qchat.qc-care:not(.dk-x) { background: linear-gradient(150deg, #E0AC2A, #B07A12); color: #fff; }
.qchat.qc-care:not(.dk-x)::after { content: 'Help'; position: absolute; right: calc(100% + 8px); top: 50%; transform: translateY(-50%); padding: 5px 10px; border-radius: 999px; background: #fff; border: 1px solid #EAD9AE; font: 700 .76rem 'Outfit', sans-serif; color: #1D1E46; white-space: nowrap; box-shadow: 0 4px 12px -6px rgba(0,0,0,.25); }
/* Phones: every Store section headline as tight as the top one (Lord, 4 Oct) */
@media (max-width: 640px) { .st-page .st-h h2 { font-size: 1.45rem !important; line-height: 1.15 !important; } .st-page .st-h p { font-size: .85rem; } .st-page .st-sec { margin-top: 28px; } .st-page .st-main > .st-sec:first-child { margin-top: 0; } }
.qchat.qc-care:not(.dk-x), .qchat.qc-care:not(.dk-x):hover { background: linear-gradient(150deg, #E0AC2A, #B07A12) !important; color: #fff !important; }
body:has(#dkPeek:not([hidden])) .qchat.qc-care::after { display: none; }   /* the bubble already says it */

/* ---- Phones: app-style bottom bar (Lord, 4 Oct). Replaces the floating pen, the floating chat button and the header menu */
.mbar { display: none; }
@media (max-width: 959px) {
  .mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 170; display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); background: rgba(255, 253, 248, .97); border-top: 1px solid #EFE5D0; box-shadow: 0 -8px 24px -18px rgba(29, 30, 70, .45); backdrop-filter: blur(8px); }
  .mbar a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 0 2px; text-decoration: none; color: #7A7590; font: 600 .68rem 'Outfit', sans-serif; }
  .mbar a.on { color: #1D1E46; } .mbar a.on span { font-weight: 700; }
  .mbar a.on::before { content: ''; position: absolute; top: -6px; width: 22px; height: 3px; border-radius: 0 0 3px 3px; background: #E0AC2A; }
  .mbar .mb-spark { display: grid; place-items: center; height: 22px; font-style: normal; font-size: 1.15rem; color: #C9971F; }
  .mbar .mb-dot { position: absolute; top: 3px; left: calc(50% + 7px); width: 8px; height: 8px; border-radius: 50%; background: #1F8A4C; border: 2px solid #FFFDF8; }
  .mbar .mb-store b { display: grid; place-items: center; width: 50px; height: 50px; margin-top: -22px; border-radius: 50%; background: linear-gradient(150deg, #F3C94A, #E0AC2A); color: #2E1E06; box-shadow: 0 6px 16px -6px rgba(176, 122, 18, .7); border: 3px solid #FFFDF8; }
  .mbar .mb-store span { color: #8A6A12; font-weight: 700; }
  .mbar .mb-store.on::before { display: none; }
  body.popped .mbar, body.qns-open .mbar, body.chatting .mbar, body.dk-open .mbar, body:has(.wv:not(.ended)) .mbar { display: none; }
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
  .qfab, .qchat, .ln-burger, .tabs { display: none !important; }
  .dk-peek { bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important; }
}
@media (max-width: 959px) { .ln-store { display: none !important; } }   /* the Store sits in the bottom bar on phones */

/* ---- Phones, revised (Lord, 4 Oct): 4 tabs; the menu back in the header; chat and journal float above the bar, both small and the same size */
@media (max-width: 959px) {
  .mbar.mb4 { grid-template-columns: repeat(4, 1fr); }
  .mbar .mb-heart { display: grid; place-items: center; height: 22px; font-style: normal; font-size: 1.1rem; color: #C2546E; }
  .mbar .mb-store b { width: 44px; height: 44px; margin-top: -16px; }
  .ln-burger { display: inline-flex !important; }
  .qfab:not([hidden]), .qchat:not([hidden]) { display: grid !important; }
  .qfab, .qchat { position: fixed !important; width: 46px !important; height: 46px !important; min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; place-items: center !important;
    bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; box-shadow: 0 6px 16px -6px rgba(29, 30, 70, .5) !important; }
  .qchat { right: 14px !important; } .qfab { right: 68px !important; left: auto !important; }
  .qchat svg { width: 22px !important; height: 22px !important; } .qfab svg { width: 20px !important; height: 20px !important; }
  .qchat .qc-dot { top: 3px !important; right: 3px !important; }
  .qchat.qc-care:not(.dk-x)::after { display: none; }
  .dk-peek { bottom: calc(136px + env(safe-area-inset-bottom, 0px)) !important; }
  body.popped .qfab, body.popped .qchat, body.qns-open .qfab, body.qns-open .qchat, body.menu-open .qfab, body.menu-open .qchat, body.dk-open .qfab { display: none !important; }
}
@media (max-width: 959px) { .ln-right .ln-store { display: none !important; } }   /* the Store is in the bottom bar on phones */

/* ---- Phones, final (Lord, 4 Oct): six tabs incl. Menu; every icon in the same 26px box so labels share one baseline; the Store a floating gold circle centred over its label */
@media (max-width: 959px) {
  .mbar.mb6 { grid-template-columns: repeat(6, 1fr); align-items: stretch; padding-top: 7px; }
  .mbar.mb6 a { gap: 4px; padding: 0; font-size: .64rem; white-space: nowrap; }
  .mbar.mb6 .mb-ic { position: relative; display: grid; place-items: center; width: 26px; height: 26px; font-style: normal; }
  .mbar.mb6 .mb-ic svg { width: 22px; height: 22px; }
  .mbar.mb6 .mb-spark { font-size: 1.15rem; color: #C9971F; } .mbar.mb6 .mb-heart { font-size: 1.1rem; color: #C2546E; } .mbar.mb6 .mb-moon { font-size: 1.2rem; color: #4B4C8E; }
  .mbar.mb6 .mb-store b { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -62%); width: 46px; height: 46px; margin: 0; }
  .mbar.mb6 .mb-store b svg { width: 21px; height: 21px; }
  .mbar.mb6 a.on::before { top: -7px; }
  .ln-burger { display: none !important; }
  body.menu-open .mbar { display: grid !important; }
}

/* ---- Phones: the Store in the exact centre, raised (Lord, 4 Oct) */
@media (max-width: 959px) {
  .mbar.mb6 { display: grid; grid-template-columns: 1fr 64px 1fr; align-items: end; }
  .mbar.mb6.mb-all { grid-template-columns: 1fr 1fr; }
  .mbar.mb6 .mb-side { display: flex; justify-content: space-around; }
  .mbar.mb6 .mb-side a { flex: 1; }
  .mbar.mb6 .mb-i, .mbar.mb6 .mb-ic i { font-style: normal; }
  .mbar.mb6 .mb-ic .mb-spark { font-size: 1.15rem; color: #C9971F; } .mbar.mb6 .mb-ic .mb-heart { font-size: 1.1rem; color: #C2546E; } .mbar.mb6 .mb-ic .mb-moon { font-size: 1.2rem; color: #4B4C8E; }
  .mbar.mb6 .mb-store { display: flex; flex-direction: column; align-items: center; gap: 4px; }
  .mbar.mb6 .mb-store b { position: static; transform: none; width: 54px; height: 54px; margin-top: -26px; }
  .mbar.mb6 .mb-store b svg { width: 23px; height: 23px; }
  .qfab, .qchat { bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important; }
  .dk-peek { bottom: calc(124px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ---- Phones (Lord, 4 Oct): the menu slides in from the left (Menu is the left tab); the Store tab is the same size as the others, only gold */
@media (max-width: 959px) {
  .dr-panel { right: auto !important; left: 0 !important; transform: translateX(-100%); }
  body.menu-open .dr-panel { transform: none; }
  .mbar.mb6 { grid-template-columns: 2fr 1fr 2fr; }
  .mbar.mb6.mb-all { grid-template-columns: 1fr 1fr; }
  .mbar.mb6 .mb-store { gap: 4px; }
  .mbar.mb6 .mb-store b { width: 26px; height: 26px; margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: #C9971F; }
  .mbar.mb6 .mb-store b svg { width: 22px; height: 22px; }
  .mbar.mb6 .mb-store span { color: #8A6A12; font-weight: 700; }
  .mbar.mb6 .mb-store.on::before { display: block; }
}
/* Store raised a little again (Lord, 4 Oct): a small gold circle lifted just above the line, label on the same baseline */
@media (max-width: 959px) {
  .mbar.mb6 .mb-store b { width: 42px; height: 42px; margin-top: -16px; border-radius: 50%; background: linear-gradient(150deg, #F3C94A, #E0AC2A); color: #2E1E06; border: 3px solid #FFFDF8; box-shadow: 0 5px 14px -6px rgba(176, 122, 18, .7); }
  .mbar.mb6 .mb-store b svg { width: 19px; height: 19px; }
}

/* ---- My Stars: the day at a glance, then a sales letter for The Next 12 Months (Lord, 4 Oct) */
.sl { margin-top: 26px; }
.sl-k { margin: 0 0 6px; font: 700 .72rem 'Outfit', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #8A6A12; }
.sl h2 { margin: 0; font: 600 2rem/1.12 var(--voice); color: #1D1E46; }
.sl-sub { margin: 10px 0 0; font: italic 400 1.05rem/1.5 'Lora', Georgia, serif; color: #4B4766; }
.sl-body { margin-top: 18px; font: 400 1rem/1.7 'Lora', Georgia, serif; color: #26223A; }
.sl-body p { margin: 0 0 14px; }
.sl-lead { font: 700 1.05rem 'Outfit', sans-serif !important; color: #1D1E46; margin-top: 22px !important; }
.sl-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.sl-list li { position: relative; padding: 12px 14px 12px 40px; border-radius: 12px; background: #fff; border: 1px solid #EFE5D0; font: 400 .96rem/1.5 'Outfit', sans-serif; color: #3A3652; }
.sl-list li::before { content: '✦'; position: absolute; left: 14px; top: 12px; color: #C9971F; }
.sl-list b { color: #1D1E46; }
.sl-offer { display: flex; gap: 18px; align-items: flex-start; margin: 22px 0 10px; padding: 20px; border-radius: 18px; background: #fff; border: 2px solid #E0AC2A; box-shadow: 0 14px 34px -22px rgba(90, 64, 20, .5); }
.sl-offer img { width: 150px; aspect-ratio: 1; object-fit: cover; border-radius: 12px; flex: none; }
.sl-oh { margin: 0 0 6px; font: 600 1.35rem/1.2 var(--voice); color: #1D1E46; }
.sl-offer ul { margin: 0 0 10px; padding-left: 18px; font: 400 .9rem/1.6 'Outfit', sans-serif; color: #3A3652; }
.sl-offer ul li::marker { color: #1F8A4C; }
.sl-pr { margin: 4px 0 10px; font: 700 1.6rem 'Outfit', sans-serif; color: #1D1E46; } .sl-pr small { font: 500 .78rem 'Outfit', sans-serif; color: #8A6A12; }
.sl-go { width: 100%; }
.sl-g { margin: 10px 0 0; font: 500 .84rem 'Outfit', sans-serif; color: #3A3652; } .sl-g b { color: #1D1E46; }
.sl-pk { display: block; margin: 6px 0 0; text-align: center; font: 500 .88rem 'Outfit', sans-serif; color: #23245A; text-decoration: none; }
.sl-pk:hover { text-decoration: underline; text-decoration-color: #D9B962; }
.sl-ps { margin-top: 22px; padding: 16px 18px; border-radius: 14px; background: #FFFDF7; border: 1px dashed #D9B962; font: italic 400 .95rem/1.6 'Lora', Georgia, serif; color: #26223A; }
.sl-ps p { margin: 0 0 6px; } .sl-ps b { font: normal 700 .88rem 'Outfit', sans-serif; color: #8A6A12; margin-right: 4px; }
.sl-ps a { color: #23245A; font-weight: 600; }
.sla h3 { margin: 0; font: 600 1.15rem var(--voice); color: #1D1E46; } .sla > p { margin: 2px 0 10px; font-size: .8rem; color: var(--soft); }
.sla { margin-top: 16px; padding: 16px; border-radius: 16px; background: #fff; border: 1px solid #EFE5D0; }
@media (max-width: 640px) { .sl h2 { font-size: 1.5rem; } .sl-offer { flex-direction: column; } .sl-offer img { width: 100%; aspect-ratio: 16 / 9; } }
/* The life areas in the side column: one row each */
.sla .lifea { display: grid !important; grid-template-columns: 1fr !important; gap: 0 !important; }
.sla .la { display: flex !important; flex-direction: row !important; align-items: flex-start; gap: 10px; padding: 10px 0 !important; border: 0 !important; border-top: 1px solid #F2EADA !important; border-radius: 0 !important; background: none !important; min-height: 0 !important; }
.sla .la:first-child { border-top: 0 !important; }
.sla .la > div { flex: 1; min-width: 0; }
.sla .la small { display: inline; font: 700 .72rem 'Outfit', sans-serif; color: #1D1E46; }
.sla .la b { display: inline; margin-left: 6px; font: 600 .72rem 'Outfit', sans-serif !important; }
.sla .la p { margin: 2px 0 0 !important; font-size: .78rem !important; line-height: 1.35; color: #5A5670; }
/* Manifest and My Love Story: one line on how they work together (Lord, 4 Oct) */
.mfwhy { display: flex; gap: 12px; align-items: flex-start; margin: 16px 0; padding: 14px 16px; border-radius: 14px; background: #FFFDF7; border: 1px solid #EAD9AE; text-decoration: none; color: #3A3652; font: 400 .9rem/1.5 'Outfit', sans-serif; }
.mfwhy b { display: block; margin-bottom: 2px; font: 600 1.1rem/1.25 var(--voice); color: #1D1E46; }
.mfwhy em { display: block; margin-top: 6px; font-style: normal; font-weight: 700; color: #8A6A12; }
.mfwhy-i { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #23245A; color: #F3C94A; font-size: .85rem; }
.mfwhy:hover em { text-decoration: underline; text-underline-offset: 3px; }

/* ---- My Stars letter on paper (Lord, 4 Oct: in a box, so people read it) */
.sl { position: relative; margin-top: 22px; padding: 30px 32px 26px; border-radius: 20px; background: #FFFDF7; border: 1px solid #EAD9AE; box-shadow: 0 18px 40px -26px rgba(90, 64, 20, .45); }
.sl::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; border-radius: 20px 20px 0 0; background: linear-gradient(90deg, #23245A, #E0AC2A, #23245A); }
.sl-list li { background: #fff; }
.sl-offer { background: #fff; }
.sl-ps { background: #fff; }
@media (max-width: 640px) { .sl { padding: 22px 16px 18px; border-radius: 16px; } }
.sl-story { padding: 12px 16px; border-left: 3px solid #E0AC2A; background: #fff; border-radius: 0 10px 10px 0; font-style: italic; }
.sl-mid { text-align: center; } .sl-go2 { background: none; border: 0; cursor: pointer; font: 700 .95rem 'Outfit', sans-serif; color: #8A6A12; text-decoration: underline; text-decoration-color: #D9B962; text-underline-offset: 4px; }
.sl-trust { font: 500 .85rem 'Outfit', sans-serif !important; color: #5A5670; } .sl-trust b { color: #1D1E46; }
.sl-small { margin: -6px 0 10px; font: italic 400 .86rem 'Lora', Georgia, serif; color: #5A5670; }
/* Letter box tidy (Lord, 4 Oct): the top strip sits inside the rounded edge; a centred, calmer letter head */
.sl { overflow: hidden; border-top: 0; padding-top: 34px; }
.sl::before { left: 0; right: 0; top: 0; height: 4px; border-radius: 0; }
.sl-k, .sl h2, .sl-sub { text-align: center; }
.sl h2 { max-width: 30ch; margin-inline: auto; font-size: 1.85rem; }
.sl-sub { max-width: 46ch; margin: 10px auto 0; }
.sl-body { margin-top: 22px; padding-top: 18px; border-top: 1px solid #EFE5D0; }
@media (max-width: 640px) { .sl h2 { font-size: 1.4rem; } }
.ywhy-ask { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 14px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(243, 201, 74, .35); background: rgba(255, 255, 255, .06); color: inherit; text-align: left; cursor: pointer; font: 400 .84rem/1.4 'Outfit', sans-serif; }
.ywhy-ask span:not(.adv-ava) { flex: 1; } .ywhy-ask b { font-weight: 700; }
.ywhy-ask em { flex: none; font-style: normal; font-weight: 700; color: #F3C94A; white-space: nowrap; }
.ywhy-ask:hover em { text-decoration: underline; text-underline-offset: 3px; }
.ywhy-ask { background: #fff !important; border-color: #EAD9AE !important; color: #3A3652 !important; } .ywhy-ask b { color: #1D1E46; } .ywhy-ask em { color: #8A6A12 !important; }
/* "Not a horoscope" block inside the My Stars letter (Lord, 4 Oct) */
.sl-deep { margin: 22px 0 18px; padding: 20px; border-radius: 16px; background: #23245A; color: #E8E4F6; }
.sl-deep p { color: #D9D4F0; } .sl-deep b { color: #fff; }
.sl-dh { margin: 0 0 8px !important; font: 600 1.35rem/1.2 var(--voice) !important; color: #F3DDA0 !important; }
.sl-vs { display: grid; grid-template-columns: 1fr 1.3fr; gap: 10px; margin: 14px 0; }
.sl-vs > div { padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.06); }
.sl-vs small { display: block; margin-bottom: 6px; font: 700 .7rem 'Outfit', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #9A96B8; }
.sl-vs ul { margin: 0; padding: 0; list-style: none; font: 400 .86rem/1.45 'Outfit', sans-serif; }
.sl-vs li { padding: 3px 0 3px 20px; position: relative; color: #B8B3D2; } .sl-vs li::before { content: '–'; position: absolute; left: 4px; color: #8A86A8; }
.sl-vs .sl-vs-us { background: rgba(243, 201, 74, .12); border: 1px solid rgba(243, 201, 74, .4); } .sl-vs .sl-vs-us small { color: #F3C94A; }
.sl-vs .sl-vs-us li { color: #fff; } .sl-vs .sl-vs-us li::before { content: '✓'; color: #5FD08F; }
.sl-deep .sl-lead { color: #fff !important; }
.sl-ex { display: grid; gap: 8px; }
.sl-ex > div { padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.08); font: 400 .88rem/1.45 'Outfit', sans-serif; }
.sl-ex b { display: block; color: #F3DDA0; } .sl-ex span { color: #E8E4F6; }
.sl-exn { margin: 6px 0 0 !important; font: italic 400 .86rem 'Lora', Georgia, serif; }
@media (max-width: 640px) { .sl-vs { grid-template-columns: 1fr; } }
.ywhy-ask { grid-column: 1 / -1; flex-basis: 100%; }
.sl { margin-bottom: 22px; }   /* space between the letter and the side cards on phones (Lord, 4 Oct) */
.ys-day + .ywhy[hidden] + .sl { margin-top: -6px; }   /* glance box to letter: one normal gap (Lord, 4 Oct) */
.sl-os { margin: -2px 0 8px; font: italic 400 .92rem "Lora", Georgia, serif; color: #8A6A12; }
.mbar .mb-star { color: #4B4C8E; } .mbar a.on .mb-star { color: #1D1E46; }

/* ---- Journal moments (Lord, 4 Oct): a small "write it" line where feelings happen */
.jmom { display: flex; align-items: center; gap: 10px; width: 100%; margin: 12px 0 4px; padding: 10px 14px; border-radius: 12px; border: 1px solid #EAD9AE; background: #FFFBF2; color: #3A3652; text-align: left; cursor: pointer; font: 400 .9rem 'Lora', Georgia, serif; font-style: italic; }
.jmom .pen { flex: none; display: inline-block; font-style: normal; color: #8A6A12; transform: rotate(0deg); }
.jmom span { flex: 1; } .jmom b { flex: none; font: 700 .82rem 'Outfit', sans-serif; font-style: normal; color: #8A6A12; }
.jmom:hover b { text-decoration: underline; text-underline-offset: 3px; }
.wv-card .jmom { background: rgba(255,255,255,.08); border-color: rgba(243,201,74,.35); color: #F3ECE2; } .wv-card .jmom b, .wv-card .jmom .pen { color: #F3C94A; }
/* Phones: no floating journal pen; the journal lives on Today, in Menu, and in these moments */
@media (max-width: 959px) { .qfab, .qfab:not([hidden]) { display: none !important; } }

/* ---- Menu feature cards, leaner (Lord, 4 Oct): slim rows, title and line side by side; My Journal joins them */
.drawer .dr-feat { gap: 6px !important; }
.drawer .dr-panel .dr-feat a { display: grid !important; grid-template-columns: 30px 1fr; grid-template-rows: auto auto; column-gap: 12px !important; row-gap: 0; padding: 8px 12px !important; border-radius: 12px !important; }
.drawer .dr-feat a span { grid-row: 1 / 3; width: 30px !important; height: 30px !important; align-self: center; }
.drawer .dr-feat a b { font-size: 1.05rem !important; line-height: 1.2 !important; margin: 0 !important; }
.drawer .dr-feat a small { margin: 0 !important; font-size: .74rem !important; line-height: 1.3; }
.drawer .dr-feat a.df-jour { background: #FFFBF2 !important; border: 1px solid #EAD9AE !important; color: #1D1E46 !important; }
.drawer .dr-feat a.df-jour span { display: grid; place-items: center; border-radius: 50%; background: #23245A !important; color: #F3C94A !important; }
.drawer .dr-feat a.df-jour small { color: #8A6A12 !important; }
.drawer .dr-panel .dr-feat a { padding: 7px 12px !important; min-height: 0 !important; }
.drawer .dr-feat a b { font-size: 1rem !important; } .drawer .dr-feat a small { margin-top: -1px !important; }
/* The menu slides in from the left and back out to the left (theme.css loads after this file, so these need !important) */
@media (max-width: 959px) {
  .dr-panel { transform: translateX(-100%) !important; }
  body.menu-open .dr-panel { transform: none !important; }
}
/* Manifest letter (Lord, 4 Oct) */
.sl-steps { margin: 0 0 16px; padding-left: 22px; display: grid; gap: 10px; }
.sl-steps li { padding-left: 4px; } .sl-steps li::marker { font: 700 1rem 'Outfit', sans-serif; color: #8A6A12; }
.sl-steps a { color: #23245A; font-weight: 600; }
.mfl .mfst-one { margin-top: 4px; }
.mfl-free { margin: 10px 0 18px; text-align: center; font: 500 .86rem 'Outfit', sans-serif; color: #3A3652; } .mfl-free b { color: #8A6A12; }
.mfl-circle { display: block; }
/* Manifest: "Live it", the story as the everyday part (Lord, 4 Oct) */
.mflive { display: flex; align-items: center; gap: 14px; margin: 14px 0 0; padding: 16px 18px; border-radius: 18px; text-decoration: none; color: #E8E4F6; background: radial-gradient(120% 160% at 15% 0%, #5A2E4E 0%, #2E2152 55%, #1C2040 100%); box-shadow: 0 14px 30px -22px rgba(29, 30, 70, .8); font: 400 .9rem/1.5 'Outfit', sans-serif; }
.mflive-i { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.1); color: #F2A7BC; font-size: 1.1rem; }
.mflive > span:nth-child(2) { flex: 1; } .mflive small { display: block; font: 700 .68rem 'Outfit', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #F3C94A; }
.mflive b { display: block; margin: 2px 0 3px; font: 600 1.2rem/1.2 var(--voice); color: #fff; }
.mflive em { flex: none; font-style: normal; font: 700 .85rem 'Outfit', sans-serif; color: #2E1E06; background: #F3C94A; padding: 9px 14px; border-radius: 999px; white-space: nowrap; }
@media (max-width: 640px) { .mflive { flex-wrap: wrap; } .mflive em { width: 100%; text-align: center; } }
.side .pfc { margin-top: 16px; }

/* ---- Manifest polish (Lord, 4 Oct) */
.n-moon { display: inline-block; margin-left: 10px; font: 600 .82rem 'Outfit', sans-serif; font-style: normal; color: #F3C94A; }
.mf-aff { margin: 12px 0 0; padding: 14px 18px; border-left: 3px solid #E0AC2A; border-radius: 0 12px 12px 0; background: #FFFDF7; font: italic 400 1.05rem/1.55 'Lora', Georgia, serif; color: #26223A; }
.mf-aff small { display: block; margin-bottom: 4px; font: normal 700 .68rem 'Outfit', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #8A6A12; }
.mflive { padding: 12px 16px; } .mflive b { font-size: 1.1rem; margin-bottom: 1px; } .mflive-i { width: 34px; height: 34px; }
.mfjar { border-top: 1px solid #F2EADA; padding: 12px 16px 14px; }
.mfjar .jar-mini { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
@media (max-width: 640px) {
  .ms-table.done-cards .ms-cards, .mf-aff ~ * .ms-cards { transform: scale(.8); }
  .mstage.ms-slim { padding-block: 10px !important; }
}

/* ---- Manifest header: this week's moon, Moonly style; "women manifesting now" (Lord, 4 Oct) */
.mweek { margin-top: 8px; }
.mweek-t { margin: 0 0 6px; text-align: center; font: 500 .8rem 'Outfit', sans-serif; color: #C9C3E6; } .mweek-t b { color: #F3DDA0; font-weight: 700; }
.mweek ol { display: flex; justify-content: center; align-items: flex-end; gap: 14px; margin: 0; padding: 0; list-style: none; }
.mweek li { display: flex; flex-direction: column; align-items: center; gap: 4px; opacity: .75; }
.mweek li.now { opacity: 1; } .mweek li.now .mdisc { filter: drop-shadow(0 0 8px rgba(243, 221, 160, .6)); }
.mweek small { font: 600 .64rem 'Outfit', sans-serif; color: #B8B3D2; } .mweek li.now small { color: #F3C94A; }
.mstage .n-moon { display: none; }
.mfnow { display: flex; align-items: center; gap: 14px; width: 100%; margin: 14px 0 0; padding: 14px 16px; border-radius: 16px; border: 1px solid #EAD9AE; background: #fff; text-align: left; cursor: pointer; font: 400 .86rem/1.45 'Outfit', sans-serif; color: #5A5670; }
.mfnow b { display: flex; align-items: center; gap: 7px; margin-bottom: 2px; font: 700 .95rem 'Outfit', sans-serif; color: #1D1E46; }
.mfnow > span:nth-child(2) { flex: 1; }
.mfnow-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #1F8A4C; box-shadow: 0 0 0 3px rgba(31, 138, 76, .18); animation: mfnowp 2s ease-in-out infinite; }
@keyframes mfnowp { 50% { box-shadow: 0 0 0 6px rgba(31, 138, 76, 0); } }
@media (prefers-reduced-motion: reduce) { .mfnow-dot { animation: none; } }
.mfnow-f { display: flex; flex: none; } .mfnow-f i { display: grid; place-items: center; width: 28px; height: 28px; margin-left: -8px; border-radius: 50%; border: 2px solid #fff; background: #23245A; color: #F3C94A; font: normal 700 .72rem 'Outfit', sans-serif; }
.mfnow-f i:first-child { margin-left: 0; } .mfnow-f i:nth-child(2) { background: #8A4A6B; color: #fff; } .mfnow-f i:nth-child(4) { background: #3F6B53; color: #fff; }
.mfnow em { flex: none; font-style: normal; font: 700 .85rem 'Outfit', sans-serif; color: #2E1E06; background: #F3C94A; padding: 8px 14px; border-radius: 999px; white-space: nowrap; }
@media (max-width: 640px) { .mfnow { flex-wrap: wrap; } .mfnow em { width: 100%; text-align: center; } .mweek ol { gap: 9px; } }
@media (max-width: 640px) { .mstage + .flows, .flows .mf-aff { margin-top: 10px; } }
.mfnow { text-decoration: none; }
.mfl-pk { display: block; }
.mfl-pks { display: grid; gap: 4px; margin: 4px 0 12px; font: 500 .88rem 'Outfit', sans-serif; color: #3A3652; } .mfl-pks b { color: #1D1E46; }
.mfl-pk .sl-go { display: block; text-align: center; text-decoration: none; }
/* Manifest header (Lord, 4 Oct): the next new or full moon leads, then this week's moons */
.mstage .n-moon { display: inline-flex !important; flex-direction: column; align-items: center; gap: 2px; margin: 8px auto 0; padding: 8px 18px; border-radius: 14px; background: rgba(243, 201, 74, .12); border: 1px solid rgba(243, 201, 74, .45); text-decoration: none; }
.mstage .n-hi { display: flex; flex-direction: column; align-items: center; }
.n-moon b { font: 700 1.15rem 'Outfit', sans-serif; color: #F3C94A; letter-spacing: .01em; }
.n-moon span { font: 500 .78rem 'Outfit', sans-serif; font-style: normal; color: #D9D4F0; }
.n-moon:hover span { text-decoration: underline; text-underline-offset: 3px; }
.mweek-t { margin-top: 4px; font-size: .74rem; }
.mfnow-m { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #23245A; box-shadow: 0 0 0 4px rgba(243,201,74,.15); }
/* Moon card (Lord, 4 Oct): the next moon on the left, this week's moons on the right */
.mfmoon { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 14px 0 0; padding: 14px 18px; border-radius: 16px; background: radial-gradient(120% 160% at 15% 0%, #3B3F7A 0%, #262A55 60%, #1C2040 100%); }
.mfmoon .n-moon { display: flex !important; flex-direction: column; align-items: flex-start; gap: 2px; margin: 0; padding: 0; background: none; border: 0; text-decoration: none; }
.mfmoon .n-moon b { font: 700 1.1rem 'Outfit', sans-serif; color: #F3C94A; } .mfmoon .n-moon span { font: 500 .78rem 'Outfit', sans-serif; color: #D9D4F0; }
.mfmoon .mweek { margin: 0; } .mfmoon .mweek ol { gap: 9px; } .mfmoon .mweek-t { margin: 0 0 4px; }
@media (max-width: 640px) { .mfmoon { flex-direction: column; align-items: stretch; } .mfmoon .n-moon { align-items: center; text-align: center; } }
.mfnow { cursor: default; } .mfnow-read { display: block; margin-top: 4px; font-weight: 700; color: #8A6A12; }
.mf-hi { margin: 4px 0 14px; font: italic 500 1.9rem/1.15 var(--voice); color: #1D1E46; } @media (max-width: 640px) { .mf-hi { font-size: 1.5rem; margin-bottom: 10px; } }

/* ---- Manifest, pass 3 (Lord, 4 Oct) */
.mfmoonwrap { margin-top: 14px; border-radius: 16px; overflow: hidden; border: 1px solid #EAD9AE; background: #fff; }
.mfmoonwrap .mfmoon { margin: 0; border-radius: 0; }
.mfmoonwrap .mfnow { margin: 0; border: 0; border-radius: 0; }
.mfi-more > summary { list-style: none; cursor: pointer; padding: 10px 4px 4px; text-align: center; font: 700 .86rem 'Outfit', sans-serif; color: #8A6A12; border-top: 1px solid #F2EADA; }
.mfi-more > summary::-webkit-details-marker { display: none; } .mfi-more[open] > summary { display: none; }
.mfl-now { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: #F6F5FC; font: 500 .86rem 'Outfit', sans-serif; color: #23245A; } .mfl-now b { font-weight: 700; }
@media (min-width: 960px) { #side:has(.pfc) { position: sticky; top: 78px; } }
.mfnow-read { text-align: right; }
.mfl-all { display: flex; align-items: center; gap: 12px; margin: 4px 0 18px; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1.5px solid #E0AC2A; text-decoration: none; color: #3A3652; font: 400 .9rem/1.45 'Outfit', sans-serif; }
.mfl-all b { color: #1D1E46; } .mfl-all > span:nth-child(2) { flex: 1; }
.mfl-all-i { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #F3C94A; color: #2E1E06; }
.mfl-all em { flex: none; font-style: normal; font: 700 .85rem 'Outfit', sans-serif; color: #2E1E06; background: #F3C94A; padding: 8px 14px; border-radius: 999px; white-space: nowrap; }
@media (max-width: 640px) { .mfl-all { flex-wrap: wrap; } .mfl-all em { width: 100%; text-align: center; } }
.mfi-d { font: 400 .84rem/1.45 "Outfit", sans-serif; color: #5A5670; margin-top: 1px; }
/* Intention rows, decluttered (Lord, 4 Oct): label, title, one line, versions and price. The moon deadline lives in the moon card,
   the quotes in the proof column, and "this moon's price" in the sheet */
.mfi .mfi-n, .mfi .mfi-q, .mfi .mfi-p .why { display: none !important; }
.mfi { padding-block: 14px; }
/* Compatibility: Halbert intro under the hero (Lord, 4 Oct) */
.chint { margin: 18px 0 6px; padding: 22px 24px; border-radius: 18px; background: #FFFDF7; border: 1px solid #EAD9AE; }
.chint h2 { margin: 0 0 8px; font: 600 1.6rem/1.15 var(--voice); color: #1D1E46; }
.chint-l { margin: 0 0 14px; font: 400 1rem/1.6 'Lora', Georgia, serif; color: #26223A; }
.chint-s { margin: 0 0 14px; padding-left: 22px; display: grid; gap: 8px; font: 400 .92rem/1.5 'Outfit', sans-serif; color: #3A3652; }
.chint-s li::marker { font-weight: 700; color: #8A6A12; } .chint-s b, .chint-w b { color: #1D1E46; }
.chint-w { margin: 0 0 16px; padding: 10px 14px; border-radius: 12px; background: #fff; border: 1px solid #F0E6CF; font: 400 .9rem/1.5 'Outfit', sans-serif; color: #3A3652; }
.chint-go { display: inline-block; text-decoration: none; }
@media (max-width: 640px) { .chint { padding: 18px 16px; } .chint h2 { font-size: 1.3rem; } .chint-go { display: block; text-align: center; } }

/* ---- Compatibility, first visit (Lord, 4 Oct): the promise in the hero, three steps, one example */
.ch-start h1 { font-size: 2rem !important; line-height: 1.12 !important; }
.ch3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; counter-reset: c3; }
.ch3 li { counter-increment: c3; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid #EFE5D0; font: 400 .82rem/1.45 'Outfit', sans-serif; color: #5A5670; }
.ch3 li::before { content: counter(c3); display: grid; place-items: center; width: 24px; height: 24px; margin-bottom: 6px; border-radius: 50%; background: #23245A; color: #F3C94A; font: 700 .76rem 'Outfit', sans-serif; }
.ch3 b { display: block; font: 600 1rem var(--voice); color: #1D1E46; }
.chex { margin-top: 16px; } .chex-k { margin: 0 0 8px; text-align: center; font: italic 400 .9rem var(--voice); color: #6A6585; }
.chex-c { display: flex; gap: 16px; align-items: center; padding: 14px; border-radius: 16px; background: #fff; border: 1px solid #EFE5D0; }
.chex-c .tc-arch { flex: none; width: 150px; height: 120px; border-radius: 80px 80px 12px 12px; position: relative; display: grid; place-items: center; }
.chex-b h3 { margin: 0; font: italic 600 1.4rem var(--voice); color: #6B2442; } .chex-b .tc-zod { margin: 0 0 8px; }
.chex-b ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font: 400 .88rem 'Outfit', sans-serif; color: #3A3652; } .chex-b ul b { color: #1D1E46; }
.chwhy { padding: 18px; border-radius: 16px; background: #fff; border: 1px solid #EFE5D0; }
.chwhy h3 { margin: 0 0 6px; font: 600 1.15rem var(--voice); color: #1D1E46; } .chwhy p { margin: 0 0 10px; font: 400 .88rem/1.5 'Outfit', sans-serif; color: #5A5670; }
.chwhy a { font: 700 .88rem 'Outfit', sans-serif; color: #8A6A12; text-decoration: none; }
@media (max-width: 640px) { .ch3 { grid-template-columns: 1fr; } .ch-start h1 { font-size: 1.5rem !important; } .chex-c { flex-direction: column; align-items: stretch; } .chex-c .tc-arch { width: 100%; } }
.chex-b ul li:first-child { color: #3A3652; } .chex-b ul { color: #3A3652; } .chex-b ul li { font-family: "Outfit", sans-serif; }
.chex-h { color: #C2476B; }
@media (max-width: 640px) {
  .ch3 { gap: 0; border-radius: 14px; overflow: hidden; border: 1px solid #EFE5D0; background: #fff; }
  .ch3 li { display: grid; grid-template-columns: 28px 1fr; column-gap: 10px; padding: 10px 12px; border: 0; border-radius: 0; }
  .ch3 li + li { border-top: 1px solid #F2EADA; }
  .ch3 li::before { grid-row: 1 / 3; margin: 2px 0 0; }
  .chex-c .tc-arch { height: 90px; }
  .ch-start .ch-art { display: none; }
}
.chben { margin-top: 16px; padding: 20px 22px; border-radius: 16px; background: #FFFDF7; border: 1px solid #EAD9AE; }
.chben h2 { margin: 0 0 10px; font: 600 1.4rem/1.2 var(--voice); color: #1D1E46; }
.chben ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.chben li { position: relative; padding-left: 24px; font: 400 .95rem/1.5 'Outfit', sans-serif; color: #3A3652; }
.chben li::before { content: '♥'; position: absolute; left: 0; top: 1px; color: #C2476B; font-size: .85rem; } .chben li b { color: #1D1E46; }
.chben-f { margin: 12px 0 0; font: italic 400 .95rem 'Lora', Georgia, serif; color: #8A6A12; }
@media (max-width: 640px) { .ch-start .ch-art { display: block !important; } .ch-start .ch-hearts { width: 110px; } .chben { padding: 16px; } .chben h2 { font-size: 1.2rem; } }

/* ---- Compatibility rebuild (Lord, 4 Oct): letter + live preview when empty; Full Bond Report on the bond page */
.chl { margin-top: 0; }
.chl .sl-body { margin-top: 16px; }
.chpv { margin: 6px 0 18px; } .chpv-k { margin: 0 0 8px; text-align: center; font: italic 400 .9rem var(--voice); color: #6A6585; }
.chpv-c { padding: 18px; border-radius: 16px; color: #E8E4F6; background: radial-gradient(120% 140% at 10% 0%, #5A2E4E 0%, #2E2152 55%, #1C2040 100%); box-shadow: 0 16px 34px -22px rgba(29,30,70,.8); }
.chpv-h { display: flex; align-items: center; gap: 12px; }
.chpv-h .tc-pair { position: static; display: flex; } .chpv-h .tc-pair i { width: 40px; height: 40px; }
.chpv-h > div { flex: 1; } .chpv-h small { display: block; font: 500 .72rem 'Outfit', sans-serif; color: #B8B3D2; }
.chpv-h > div > b { display: block; font: italic 600 1.5rem/1.1 var(--voice); color: #fff; } .chpv-h > div > span { font: 500 .76rem 'Outfit', sans-serif; color: #F3DDA0; }
.chpv-h em { flex: none; padding: 8px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.2); text-align: center; font: normal 500 .7rem 'Outfit', sans-serif; color: #B8B3D2; } .chpv-h em b { font: 600 1.1rem var(--voice); color: #fff; }
.chpv-t { margin: 14px 0 2px; font: 600 1.3rem/1.25 var(--voice); color: #fff; } .chpv-m { margin: 0 0 12px; font: italic 400 .92rem 'Lora', Georgia, serif; color: #F3DDA0; } .chpv-m b { font-style: normal; }
.chpv-g { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.chpv-g span { padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.07); font: 400 .84rem 'Outfit', sans-serif; color: #fff; }
.chpv-g small { display: block; margin-bottom: 2px; font: 700 .66rem 'Outfit', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #F3C94A; }
.chl-who { margin-top: 4px !important; } .chl-pick a { box-shadow: none !important; }
.chl-f { margin: 12px 0 0; text-align: center; font: 400 .9rem 'Outfit', sans-serif; color: #5A5670; } .chl-f a { color: #8A6A12; font-weight: 700; }
.chwhy + .chwhy { margin-top: 14px; } .chwhy .btn { width: 100%; } .chwhy-s { margin: 8px 0 0 !important; font-size: .78rem !important; text-align: center; }
.chwhy.flash { box-shadow: 0 0 0 3px #F3C94A; transition: box-shadow .3s; }
.bro { margin-top: 18px; } .bro h2 { font-size: 1.6rem; } .bro .sl-list { margin-top: 14px; }
.bro-buy { text-align: center; margin-top: 8px; } .bro-buy .sl-pr { margin: 0 0 8px; } .bro-buy .sl-g a { color: #23245A; font-weight: 600; }
@media (max-width: 640px) { .chpv-g { grid-template-columns: 1fr; } .chpv-h em { display: none; } .bro h2 { font-size: 1.3rem; } }
.chadd .ch-pick { display: grid; gap: 8px; } .chadd .ch-pick a { padding: 10px 12px !important; font-size: .9rem !important; min-height: 0 !important; }
.chadd .ch-pick a i { width: 28px !important; height: 28px !important; }
@media (min-width: 960px) { .side .chadd { position: sticky; top: 78px; } }
@media (min-width: 960px) { .side .chadd { position: static; } }
.chsplit > div + div { margin-top: 14px; }
.chrp { margin-top: 16px; }
.bond-row { margin-top: 10px; border-style: solid; border-color: #EFE5D0; }
.bond-ic { flex: none; width: 52px; height: 52px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(150deg, #C2476B, #6B2442); color: #FFE0EA; font-size: 1.3rem; }
@media (max-width: 640px) { .rd-rows + .rdt + .bond-row, .bond-row { display: flex; } }
.tc-rep { margin: 6px 0 0; font: 700 .76rem "Outfit", sans-serif; color: #8A6A12; } .tc-rep.on { color: #1F8A4C; }
.bro-all { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: #F6F5FC; font: 400 .86rem/1.5 'Outfit', sans-serif; color: #3A3652; } .bro-all b { color: #1D1E46; }
.bro-allb { margin-left: 6px; background: none; border: 0; cursor: pointer; font: 700 .86rem 'Outfit', sans-serif; color: #8A6A12; text-decoration: underline; text-underline-offset: 3px; }
/* Adding someone, step 1 (Lord, 4 Oct) */
.adb-who h1, .adb-inv h1 { margin: 0 0 4px; font: 600 1.8rem/1.15 var(--voice); color: #1D1E46; } .adb-who > p { margin: 0 0 16px; color: var(--soft); }
.adw { display: grid; gap: 10px; }
.adw a { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; background: #fff; border: 1px solid #EFE5D0; text-decoration: none; color: inherit; }
.adw a:hover { border-color: #D9B962; } .adw a > i { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #F3C94A; color: #2E1E06; font-style: normal; font-size: 1.1rem; }
.adw span { flex: 1; } .adw b { display: block; font: 600 1.15rem var(--voice); color: #1D1E46; } .adw small { font: 400 .84rem 'Outfit', sans-serif; color: var(--soft); }
.adw em { font-style: normal; font: 700 1.2rem 'Outfit', sans-serif; color: #8A6A12; }
.adw-inv { margin: 16px 0 0; text-align: center; font: 400 .9rem 'Outfit', sans-serif; color: #5A5670; } .adw-inv a, .adb-sw, .adb-date small a { color: #8A6A12; font-weight: 700; }
.adb.adb-who, .adb-inv { padding: 24px 26px !important; } .adb-inv h1 { margin-bottom: 8px; }
.cask { margin-bottom: 14px; } .cask-f { display: flex; align-items: center; gap: 0; margin: 0 0 8px; font: 500 .78rem 'Outfit', sans-serif; color: #2F7A4A; }
.cask-f .adv-ava { margin-right: -8px; border: 2px solid #fff; } .cask-f span { margin-left: 16px; display: flex; align-items: center; gap: 5px; }
.cask-r { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid #F2EADA; text-decoration: none; color: inherit; }
.cask-r span { flex: 1; } .cask-r b { display: block; font: 600 .9rem 'Outfit', sans-serif; color: #1D1E46; } .cask-r small { font-size: .74rem; color: var(--soft); }
.cask-r em { font-style: normal; font-weight: 700; color: #8A6A12; } .cask-r:hover b { color: #8A6A12; }
.cask .adv-ava { flex: none !important; width: 32px !important; height: 32px !important; min-width: 0 !important; border-radius: 50% !important; overflow: hidden; }
.cask .adv-ava img { width: 100% !important; height: 100% !important; object-fit: cover; }
.cask-f .adv-ava { width: 26px !important; height: 26px !important; }
.cask-r span:not(.adv-ava) { flex: 1; min-width: 0; }
.cask-t { flex: 1; min-width: 0; }
/* Ask a guide, leaner (Lord, 4 Oct) */
.cask { margin: 14px 0 0 !important; } .cask-s { margin: 0 0 6px; font: 400 .8rem 'Outfit', sans-serif; color: var(--soft); }
.cask-r { padding: 7px 0 !important; gap: 10px !important; } .cask .adv-ava { width: 26px !important; height: 26px !important; }
.cask-t { font: 600 .88rem 'Outfit', sans-serif; color: #1D1E46; }
.side .ssd.cask a.cask-r { display: flex !important; align-items: center !important; padding: 8px 0 !important; min-height: 0 !important; gap: 10px !important; }
.side .ssd.cask a.cask-r .adv-ava { align-self: center !important; margin: 0 !important; }
.bdp { display: grid; grid-template-columns: 1.6fr 1fr 1.2fr; gap: 8px; margin: 6px 0 4px; }
.bdp select { appearance: none; -webkit-appearance: none; width: 100%; padding: 12px 34px 12px 14px; border-radius: 12px; border: 1px solid #EAD9AE; background: #FFFBF2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238A6A12' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center; font: 500 1rem 'Outfit', sans-serif; color: #1D1E46; }
.bdp select:focus { outline: 2px solid #23245A; outline-offset: 1px; }
.adb-date > span { display: block; }
.adb-date > span { font: 700 .78rem "Outfit", sans-serif !important; color: #6B5A1E !important; margin-bottom: 2px; }

/* ---- My Love Story home (Lord, 4 Oct): manifestation first */
.sti { margin: 0 0 16px; } .sti h2 { font-size: 1.75rem; } .sti3 { margin-top: 14px; }
.lh-other { display: inline-block; margin-top: 10px; font: 600 .82rem 'Outfit', sans-serif; color: #F3DDA0; text-decoration: none; } .lh-other:hover { text-decoration: underline; }
.st-all { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 22px 0 8px; font: 600 .84rem 'Outfit', sans-serif; color: #5A5670; }
.st-all a { padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid #EFE5D0; color: #1D1E46; text-decoration: none; } .st-all a:hover { border-color: #D9B962; }
@media (max-width: 640px) { .sti h2 { font-size: 1.35rem; } }
.bd-renew { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: #FFF6DC; border: 1px solid #E0AC2A; font: 500 .88rem "Outfit", sans-serif; color: #3A3652; } .bd-renew a { color: #8A6A12; font-weight: 700; }
/* Chat page, Halbert pass (Lord, 4 Oct) */
.a3-prom { margin: 4px auto 6px; max-width: 560px; text-align: center; font: 400 .95rem/1.5 'Outfit', sans-serif; color: #E8E4F6; }
.a3-proof { margin: 0 auto 12px; text-align: center; font: 600 .76rem 'Outfit', sans-serif; color: #F3DDA0; }
.chq { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0 4px; }
.chq figure { margin: 0; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid #EFE5D0; }
.chq blockquote { margin: 4px 0 6px; font: italic 400 .9rem/1.5 'Lora', Georgia, serif; color: #26223A; } .chq figcaption { font: 600 .72rem 'Outfit', sans-serif; color: #8A6A12; }
.chall { display: block; margin: 16px 0 0; padding: 12px; border-radius: 14px; background: #fff; border: 1.5px solid #E0AC2A; text-align: center; text-decoration: none; font: 700 .9rem 'Outfit', sans-serif; color: #1D1E46; }
@media (max-width: 640px) { .chq { grid-template-columns: 1fr; } }
/* Chat: own pages for all guides and all tools (Lord, 4 Oct) */
.chpage h1 { margin: 0 0 4px; font: 600 2rem/1.15 var(--voice); color: #1D1E46; } .chpage p { margin: 0 0 16px; color: var(--soft); }
.tlc-all { display: block; padding: 12px 0 2px; font: 700 .86rem 'Outfit', sans-serif; color: #8A6A12; text-decoration: none; border-top: 1px solid #F2EADA; }
.tp-g { margin-bottom: 14px; } .tp-l { display: grid; gap: 0; background: #fff; border-radius: 12px; padding: 4px 12px; border: 1px solid #EFE5D0; }
.tp-l { position: relative; } .tp-r { display: flex; align-items: center; gap: 10px; padding: 10px 34px 10px 0; text-decoration: none; color: inherit; border-bottom: 1px solid #F2EADA; }
.tp-l > :nth-last-child(2) { border-bottom: 0; }
.tp-r .adv-ava { flex: none; width: 32px; height: 32px; } .tp-r span { flex: 1; min-width: 0; } .tp-r b { display: block; font: 600 .95rem 'Outfit', sans-serif; color: #1D1E46; } .tp-r small { font-size: .78rem; color: var(--soft); }
.tp-r i { font-style: normal; font-weight: 700; color: #8A6A12; }
.tp-l .tstar { position: absolute; right: 12px; margin-top: -38px; }
/* Day at a glance: the headline is a sentence now, so smaller (Lord, 4 Oct) */
.yr2.ys-day .yr-body h1 { font-size: clamp(1.7rem, 3vw, 2.3rem) !important; line-height: 1.15 !important; max-width: 22ch; }
.yr2.ys-day .yr-mean { font-size: 1.05rem !important; line-height: 1.5 !important; max-width: 46ch; }
@media (max-width: 640px) { .yr2.ys-day .yr-body h1 { font-size: 1.5rem !important; } .yr2.ys-day .yr-mean { font-size: .95rem !important; } }
.sla-pitch { display: block; width: 100%; margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; border: 1.5px solid #E0AC2A; background: #FFF8E6; text-align: left; cursor: pointer; font: 400 .84rem/1.45 'Outfit', sans-serif; color: #3A3652; }
.sla-pitch b { display: block; margin-bottom: 3px; font: 600 1rem/1.25 var(--voice); color: #1D1E46; }
.sla-pitch em { display: block; margin-top: 6px; font-style: normal; font-weight: 700; color: #8A6A12; }
.sla-pitch:hover { background: #FFF1CC; }
.sla-pitch { text-decoration: none; } .sla-pitch b { margin-bottom: 0; }

/* ---- Today, Halbert pass (Lord, 4 Oct) */
.n-prom { margin: 6px auto 0; max-width: 520px; text-align: center; font: italic 400 .95rem/1.45 'Lora', Georgia, serif; color: #E8E4F6; }
.tnx { margin: 16px 0 0; } .tnx-h { margin: 0 0 8px; font: 600 1.15rem var(--voice); color: #1D1E46; }
.tnx-g { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tnx-g a { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid #EFE5D0; text-decoration: none; color: inherit; }
.tnx-g a:hover { border-color: #D9B962; } .tnx-g span { color: #C9971F; font-size: 1.1rem; } .tnx-g b { font: 600 1.05rem var(--voice); color: #1D1E46; } .tnx-g small { font-size: .78rem; color: var(--soft); }
.tnx-offer { display: block; margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: #FFF8E6; border: 1px solid #EAD9AE; text-decoration: none; font: 400 .9rem 'Outfit', sans-serif; color: #3A3652; } .tnx-offer b { color: #8A6A12; }
.tcl { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; padding: 12px 16px; border-radius: 14px; background: #fff; border: 1px solid #EFE5D0; text-decoration: none; color: inherit; }
.tcl span { color: #C2476B; } .tcl b { flex: 1; font: 600 1rem var(--voice); color: #1D1E46; } .tcl small { font: 600 .8rem 'Outfit', sans-serif; color: #8A6A12; }
.tside-stars { margin: 14px 0 0; text-align: center; } .tside-stars a { font: 600 .84rem 'Outfit', sans-serif; color: #23245A; text-decoration: none; } .tside-stars a:hover { text-decoration: underline; }
.side .nx-heavy { margin-top: 14px; }
@media (max-width: 640px) { .tnx-g { grid-template-columns: 1fr; } }
.tnx + .tmt, .tnx ~ .tmt { margin-top: 14px; }
/* The breathing words, clearly readable (Lord, 4 Oct) */
.scene .breath-line { color: #FFF3DA !important; opacity: 1 !important; font-size: 1.85rem !important; font-weight: 600 !important; text-shadow: 0 0 22px rgba(243, 201, 74, .55), 0 1px 3px rgba(0, 0, 0, .4) !important; background: rgba(20, 22, 60, .55) !important; border-color: rgba(243, 201, 74, .6) !important; }
.scene .breath-line .bl-t { color: #FFF3DA !important; transition: opacity .35s ease !important; }
.scene .breath-line .bl-t.fade { opacity: .25 !important; }
@media (max-width: 560px) { .scene .breath-line { font-size: 1.45rem !important; } }
/* Today's side cards, one shape (Lord, 4 Oct): same icon size, title, one tight line, chevron */
.side .dsc .ng-main, .side .nx-heavy { display: flex !important; align-items: center !important; gap: 14px !important; padding: 14px 16px !important; min-height: 0 !important; }
.side .dsc { padding: 0 !important; }
.side .dsc .dsc-ic, .side .nx-heavy > span { flex: none !important; width: 44px !important; height: 44px !important; border-radius: 12px !important; display: grid !important; place-items: center !important; margin: 0 !important; box-shadow: none !important; }
.side .nx-heavy > span { background: #23245A !important; color: #F3C94A !important; }
.side .dsc .ng-main > div, .side .nx-heavy > div { flex: 1; min-width: 0; }
.side .dsc b, .side .nx-heavy b { display: block; font: 600 1.12rem/1.2 var(--voice) !important; color: #1D1E46 !important; margin: 0 0 2px !important; }
.side .dsc small, .side .nx-heavy small { display: block; font: 400 .82rem/1.35 'Outfit', sans-serif !important; color: var(--soft) !important; margin: 0 !important; }
.side .dsc em, .side .nx-heavy em { flex: none; font-style: normal; color: #8A6A12; font-weight: 700; }

/* ---- Sales letters, one page per product (Lord, 4 Oct) */
.ofr { margin-top: 6px; } .ofr h2 { max-width: 26ch; margin-inline: auto; }
.ofr-img { margin: 18px 0 0; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 7; } .ofr-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ofr-box { display: flex; } .ofr-box > img { width: 140px; aspect-ratio: 1; object-fit: cover; border-radius: 12px; flex: none; }
.ofr-box > div { flex: 1; min-width: 0; } .ofr-box .mfp-h { margin: 12px 0 6px; font: 700 .72rem 'Outfit', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #8A6A12; }
.ofr-box .mfp-opts { margin-bottom: 10px; } .ofr-hide { display: none; } .ofr-bon { margin: 0 0 8px; padding-left: 18px; font: 400 .88rem/1.55 'Outfit', sans-serif; color: #3A3652; }
@media (max-width: 640px) { .ofr-box { flex-direction: column; } .ofr-box > img { width: 100%; aspect-ratio: 16 / 9; } }
/* Chat: Find my guide always there; My Messages page; All guides header (Lord, 4 Oct) */
.a3-go { opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
.gt-head:has(.gt-r:only-child) { justify-content: flex-end; }
#gFilter, .gf { flex-wrap: wrap !important; overflow: visible !important; }
.msg-sec { margin-top: 18px; } .msg-l { display: grid; gap: 0; background: #fff; border: 1px solid #EFE5D0; border-radius: 14px; padding: 4px 14px; }
.msg-r { display: flex; align-items: center; gap: 12px; padding: 12px 0; text-decoration: none; color: inherit; border-bottom: 1px solid #F2EADA; } .msg-r:last-child { border-bottom: 0; }
.msg-r .adv-ava { flex: none; width: 44px; height: 44px; } .msg-r span { flex: 1; min-width: 0; }
.msg-r b { display: block; font: 600 1rem 'Outfit', sans-serif; color: #1D1E46; } .msg-r b em { margin-left: 8px; font: normal 500 .74rem 'Outfit', sans-serif; color: var(--soft); }
.msg-r small { display: block; font: italic 400 .88rem/1.45 'Lora', Georgia, serif; color: #3A3652; }
.msg-r i { flex: none; font-style: normal; font: 700 .82rem 'Outfit', sans-serif; color: #8A6A12; }
.msg-r.new b::after { content: ''; display: inline-block; width: 8px; height: 8px; margin-left: 8px; border-radius: 50%; background: #D8443A; vertical-align: 2px; }
/* Letter: links out instead of the extras; Find my guide quiz (Lord, 4 Oct) */
.lt-go { display: flex; flex-direction: column; gap: 8px; margin: 18px 0 6px; }
.lt-go a { padding: 10px 14px; border-radius: 12px; background: #fff; border: 1px solid #EAD9AE; font: 600 .9rem 'Outfit', sans-serif; color: #1D1E46; text-decoration: none; } .lt-go a:hover { border-color: #C9A24A; }
.gm h1 { margin-bottom: 14px; } .gm-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gm-opts button { padding: 16px; border-radius: 14px; border: 1px solid #EFE5D0; background: #fff; text-align: left; cursor: pointer; font: 600 1.05rem var(--voice); color: #1D1E46; }
.gm-opts button:hover { border-color: #C9A24A; background: #FFFBF2; }
.gm-back { margin-top: 14px; background: none; border: 0; cursor: pointer; font: 600 .88rem 'Outfit', sans-serif; color: #8A6A12; }
@media (max-width: 640px) { .gm-opts { grid-template-columns: 1fr; } }
/* "Free" stands out on Compatibility (Lord, 4 Oct) */
.chfree { display: table; margin: 0 auto 10px; padding: 6px 16px; border-radius: 999px; background: #1F8A4C; color: #fff; font: 700 .9rem 'Outfit', sans-serif; letter-spacing: .02em; box-shadow: 0 6px 16px -8px rgba(31, 138, 76, .7); }
.chfree-i { display: inline-block; margin-left: 6px; padding: 2px 10px; border-radius: 999px; background: #E6F4EC; color: #1F8A4C; font: 700 .85rem 'Outfit', sans-serif; vertical-align: 2px; }
/* "Free" in gold, like the rest of the site (Lord, 4 Oct) */
.chfree { background: linear-gradient(150deg, #F3C94A, #E0AC2A) !important; color: #2E1E06 !important; box-shadow: 0 6px 16px -8px rgba(176, 122, 18, .7) !important; }
.chfree-i { background: #FFF1CC !important; color: #8A6A12 !important; border: 1px solid #E0AC2A; }
/* "Free" as a quiet gold line, not a button (Lord, 4 Oct) */
.chfree { display: block !important; margin: 0 0 6px !important; padding: 0 !important; background: none !important; box-shadow: none !important; border-radius: 0 !important; text-align: center; font: 700 .95rem 'Outfit', sans-serif !important; color: #8A6A12 !important; letter-spacing: 0 !important; }
.chfree-i { margin-left: 4px; padding: 0 !important; background: none !important; border: 0 !important; color: #8A6A12 !important; font: 700 1rem 'Outfit', sans-serif !important; }
.chfree2 { display: table; margin: 4px auto 12px !important; }
p.lt-chip.chfree2 { color: #8A6A14 !important; background: rgba(243,201,74,.14) !important; border: 1px solid rgba(201,160,50,.4) !important; font: 700 .95rem 'Outfit', sans-serif !important; padding: 5px 16px !important; margin: 6px auto 14px !important; }
@media (max-width: 640px) {   /* next steps on phones: a lean 2 x 2 (Lord, 4 Oct) */
  .tnx-g { grid-template-columns: 1fr 1fr !important; gap: 8px; }
  .tnx-g a { padding: 10px 12px; gap: 1px; } .tnx-g span { font-size: .95rem; } .tnx-g b { font-size: .92rem; line-height: 1.2; } .tnx-g small { font-size: .7rem; }
}
.tnx-g { grid-template-columns: repeat(3, 1fr) !important; }   /* three next steps, side by side (Lord, 4 Oct) */
@media (max-width: 640px) { .tnx-g { grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; } .tnx-g a { padding: 9px 8px !important; } .tnx-g b { font-size: .84rem !important; } .tnx-g small { font-size: .66rem !important; } }
@media (max-width: 640px) { .tcl { flex-wrap: wrap; row-gap: 2px; } .tcl small { flex-basis: 100%; padding-left: 26px; } }
.bdp input { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid #EAD9AE; background: #FFFBF2; font: 500 1rem 'Outfit', sans-serif; color: #1D1E46; }
.bdp input:focus { outline: 2px solid #23245A; outline-offset: 1px; }
.adb-more label + label { margin-top: 10px; }
.bd-more { margin: 12px 0 0; padding: 12px 14px; border-radius: 14px; background: #FFFBF2; border: 1px solid #EAD9AE; font: 400 .9rem 'Outfit', sans-serif; color: #3A3652; }
.bd-more summary { cursor: pointer; } .bd-more summary b { color: #8A6A12; }
.bd-more-f { display: grid; grid-template-columns: 1fr 2fr auto; gap: 10px; align-items: end; margin-top: 10px; }
.bd-more-f label { display: flex; flex-direction: column; gap: 4px; font: 600 .76rem 'Outfit', sans-serif; color: #6B5A1E; }
.bd-more-f input { padding: 10px 12px; border-radius: 10px; border: 1px solid #EAD9AE; background: #fff; font: 500 .95rem 'Outfit', sans-serif; }
@media (max-width: 640px) { .bd-more-f { grid-template-columns: 1fr; } }
/* Adding someone without a birthday; updating details (Lord, 4 Oct) */
.adb-nob { margin: 10px 0 14px; padding: 12px 14px; border-radius: 14px; background: #FFFBF2; border: 1px solid #EAD9AE; font: 400 .9rem 'Outfit', sans-serif; color: #3A3652; }
.adb-nob summary { cursor: pointer; } .adb-nob summary b { color: #8A6A12; }
.nob-o { margin-top: 12px; padding-top: 12px; border-top: 1px solid #F2EADA; display: flex; flex-direction: column; gap: 6px; }
.nob-h { margin: 0; font: 700 .9rem 'Outfit', sans-serif; color: #1D1E46; }
.nob-o select, .nob-o input { padding: 11px 12px; border-radius: 10px; border: 1px solid #EAD9AE; background: #fff; font: 500 .95rem 'Outfit', sans-serif; color: #1D1E46; }
.nob-o small { font-size: .78rem; color: var(--soft); } .nob-o a { font: 700 .9rem 'Outfit', sans-serif; color: #8A6A12; }
.bd-part { margin: 14px 0; padding: 12px 14px; border-radius: 12px; background: #F6F5FC; font: 500 .9rem/1.5 'Outfit', sans-serif; color: #23245A; }
.bd-up .adb-date > span { display: block; margin: 10px 0 4px; font: 700 .76rem 'Outfit', sans-serif; color: #6B5A1E; }
/* Add form, tidier (Lord, 4 Oct): one height for the date boxes, one style for the two fold-outs, gold main button */
.bdp select, .bdp input { height: 50px !important; padding-top: 0 !important; padding-bottom: 0 !important; box-sizing: border-box; }
.adb-f .adb-nob, .adb-f .adb-more { margin: 12px 0 0 !important; padding: 12px 16px !important; border-radius: 14px !important; background: #FFFBF2 !important; border: 1px solid #EAD9AE !important; font: 400 .9rem 'Outfit', sans-serif !important; color: #3A3652 !important; }
.adb-f .adb-nob summary, .adb-f .adb-more summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.adb-f .adb-nob summary::-webkit-details-marker, .adb-f .adb-more summary::-webkit-details-marker { display: none; }
.adb-f .adb-nob summary b, .adb-f .adb-more summary b { color: #8A6A12 !important; }
.adb-f .adb-nob summary::after, .adb-f .adb-more summary::after { content: '⌄'; margin-left: auto; color: #8A6A12; }
.adb-f .adb-more label { margin-top: 10px; }
.adb-go { display: block; width: 100%; margin-top: 18px !important; }
.adb-f .btn.adb-go { display: block !important; width: 100% !important; }
/* Add-someone card: same height as the bond cards beside it (Lord, 4 Oct) */
.tgrid { align-items: stretch !important; }
.tgrid > .tcard.add { align-self: stretch !important; height: auto !important; min-height: 100%; margin: 0 !important; display: flex !important; flex-direction: column; justify-content: center; align-items: center; }
/* Chat page header, cleaner; guide profile side column (Lord, 4 Oct) */
.cw-prof, .cw-new2 { padding: 7px 12px; border-radius: 999px; text-decoration: none; font: 700 .8rem 'Outfit', sans-serif; white-space: nowrap; }
.cw-prof { color: #23245A; background: #F1EFF8; } .cw-new2 { color: #2E1E06; background: #F3C94A; }
.cw-hr { display: flex; align-items: center; gap: 8px; }
@media (max-width: 640px) { .cw-prof { display: none; } }
.gsd { margin-bottom: 14px; } .gsd-r { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid #F2EADA; text-decoration: none; color: inherit; }
.gsd-r .adv-ava { flex: none; width: 32px; height: 32px; } .gsd-r span:not(.adv-ava) { flex: 1; min-width: 0; }
.gsd-r b { display: block; font: 600 .88rem 'Outfit', sans-serif; color: #1D1E46; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gsd-r small { font-size: .74rem; color: var(--soft); }
.gsd-r em { font-style: normal; font-weight: 700; color: #8A6A12; } .gsd-empty { margin: 4px 0 8px; font-size: .84rem; color: var(--soft); }
.gsd-new { display: block; padding-top: 10px; border-top: 1px solid #F2EADA; font: 700 .86rem 'Outfit', sans-serif; color: #8A6A12; text-decoration: none; }
.myt-all { margin-top: 12px !important; }
.a3-quiz { display: block; margin-top: 12px; text-align: center; font: 500 .88rem 'Outfit', sans-serif; color: #D9D4F0; text-decoration: none; } .a3-quiz b { color: #F3C94A; } .a3-quiz:hover b { text-decoration: underline; text-underline-offset: 3px; }
.a3-f.has .a3-sug { display: flex !important; }
/* Side rows: icon, text and chevron on one line, with or without a photo (Lord, 4 Oct) */
.side .gsd .gsd-r { display: flex !important; align-items: center !important; gap: 12px !important; padding: 12px 0 !important; min-height: 0 !important; }
.side .gsd .gsd-r > span:not(.adv-ava) { flex: 1 !important; min-width: 0; display: block !important; }
.side .gsd .gsd-r b { display: block !important; margin: 0 0 2px !important; line-height: 1.25 !important; }
.side .gsd .gsd-r small { display: block !important; margin: 0 !important; line-height: 1.3 !important; }
.side .gsd .gsd-r em { flex: none !important; align-self: center !important; margin: 0 !important; }
.side .gsd .gsd-r .adv-ava { flex: none !important; width: 36px !important; height: 36px !important; margin: 0 !important; align-self: center !important; }
.side .gsd .ssd-top { margin-bottom: 4px; }
/* Chat: who she is talking to, beside the chat; gifts; balance line (Lord, 4 Oct) */
.tside-h { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; margin-bottom: 8px; }
.tside-h .adv-ava { flex: none; width: 56px !important; height: 56px !important; } .tside-h b { display: block; font: 600 1.2rem var(--voice); color: #1D1E46; }
.tside-h small { display: block; font-size: .8rem; color: var(--soft); } .tside-on { color: #2F7A4A !important; }
.tside-st { margin: 0 0 8px; font: 500 .82rem 'Outfit', sans-serif; color: #5A5670; } .tside-st b { color: #8A6A12; }
.tside-bio { margin: 0 0 10px; font: italic 400 .9rem/1.5 'Lora', Georgia, serif; color: #3A3652; }
.tside-r { margin: 0; padding: 10px 0; border-top: 1px solid #F2EADA; } .tside-r blockquote { margin: 2px 0 4px; font: italic 400 .86rem/1.45 'Lora', Georgia, serif; color: #26223A; } .tside-r figcaption { font: 600 .72rem 'Outfit', sans-serif; color: #8A6A12; }
.gift-s { margin: 0 0 8px; font-size: .82rem; color: var(--soft); } .gift-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gift-g button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 12px; border: 1px solid #EAD9AE; background: #FFFBF2; cursor: pointer; }
.gift-g button:hover { border-color: #C9A24A; } .gift-g span { font-size: 1.3rem; } .gift-g b { font: 600 .84rem 'Outfit', sans-serif; color: #1D1E46; } .gift-g small { font: 700 .72rem 'Outfit', sans-serif; color: #8A6A12; }
.cw-bal { font-weight: 700; color: #1D1E46; } .cw-top { font-weight: 700; color: #8A6A12; }
.page:has(.cw1) .cw { max-width: none; }
.side .ssd.gift { display: block !important; } .side .ssd.gift .ssd-top { display: block; margin-bottom: 4px; } .side .ssd.gift .gift-s { font: 400 .82rem "Outfit", sans-serif !important; }
/* Chat card and the side column start on one line; guide avatar sits at the top of her bubble (Lord, 4 Oct) */
.page:has(.cw1) .cw.cw1 { margin-top: 0 !important; }
.cw-row.bot { align-items: flex-start !important; } .cw-row.bot .cw-slot { margin-top: 2px; }
/* Her conversations with a guide, under the profile (Lord, 4 Oct) */
.gpc { margin-top: 18px; } .gpc .ch-sec { margin: 0 0 10px; }
.gpc-r { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin-bottom: 8px; border-radius: 14px; background: #fff; border: 1px solid #EFE5D0; text-decoration: none; color: inherit; }
.gpc-r:hover { border-color: #D9B962; } .gpc-r .adv-ava { flex: none; width: 40px; height: 40px; } .gpc-r span:not(.adv-ava) { flex: 1; min-width: 0; }
.gpc-r b { display: block; font: 600 .95rem 'Outfit', sans-serif; color: #1D1E46; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gpc-r small { display: block; font: italic 400 .86rem/1.4 'Lora', Georgia, serif; color: #5A5670; }
.gpc-r em { flex: none; font-style: normal; font: 700 .84rem 'Outfit', sans-serif; color: #8A6A12; white-space: nowrap; }
.gpc-r.last { border: 1.5px solid #E0AC2A; background: #FFFBF2; } .gpc-r.last em { color: #2E1E06; background: #F3C94A; padding: 7px 12px; border-radius: 999px; }
/* "Find my guide" only once she types; the quiz link as a darker navy bar like Today's footer (Lord, 4 Oct) */
.a3-go { opacity: 0 !important; pointer-events: none !important; transform: translateX(6px) !important; transition: opacity .2s ease, transform .2s ease !important; }
.a3-f.has .a3-go { opacity: 1 !important; pointer-events: auto !important; transform: none !important; }
.a3-quiz { display: flex !important; align-items: center; justify-content: space-between; gap: 10px; margin: 16px -32px -28px !important; padding: 16px 32px; background: rgba(13, 14, 38, .45); border-top: 1px solid rgba(255, 255, 255, .08); border-radius: 0 0 22px 22px; text-align: left; }
.a3-quiz span { color: #D9D4F0; } .a3-quiz b { color: #F3C94A; white-space: nowrap; }
@media (max-width: 640px) { .a3-quiz { flex-direction: column; align-items: flex-start; gap: 2px; margin: 14px -18px -20px !important; padding: 12px 18px; } }
.a3-quiz { justify-content: flex-end !important; gap: 8px !important; } @media (max-width: 640px) { .a3-quiz { align-items: flex-end !important; text-align: right; } }
/* Ask ideas: one tidy row of three, and "More ideas" (Lord, 4 Oct) */
#askSug { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; } #askSug::-webkit-scrollbar { display: none; }
#askSug > button { flex: none; white-space: nowrap; }
.a3-more { background: none !important; border: 0 !important; color: #F3C94A !important; font: 700 .85rem 'Outfit', sans-serif !important; font-style: normal !important; cursor: pointer; padding: 8px 6px !important; }
#askSug { flex-wrap: wrap !important; overflow: visible; } #askSug > button { white-space: normal; }
#askSug { justify-content: flex-start; margin-top: 8px; } .a3-more { padding: 4px 2px !important; }
.a3-tool, .a3-m { margin-bottom: 4px; } .ask3 .a3-quiz { margin-top: 20px !important; }
/* My Messages: conversation rows as one line each, not a grid (Lord, 4 Oct) */
.rc-list { background: #fff; border: 1px solid #EFE5D0; border-radius: 14px; overflow: hidden; }
.rc-list .rc-row { display: flex !important; grid-template-columns: none !important; align-items: center; gap: 12px; padding: 12px 16px; }
.rc-list .rc-row .adv-ava { flex: none; width: 44px; height: 44px; } .rc-list .rc-row div { flex: 1; min-width: 0; }
.rc-list .rc-row em { flex: none; margin-left: auto; }
.msg-s { margin: -4px 0 10px; font-size: .84rem; color: var(--soft); }
.pgn { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; font: 600 .88rem "Outfit", sans-serif; color: var(--soft); } .pgn a { color: #8A6A12; font-weight: 700; text-decoration: none; }
.ins-link { margin: 18px 0 0; }
.msg-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .msg-h a { font: 700 .86rem "Outfit", sans-serif; color: #8A6A12; text-decoration: none; white-space: nowrap; } .msg-h a:hover { text-decoration: underline; }

/* ---- My Love Story, leaner (Lord, 4 Oct) */
.lh-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; font: 600 .84rem 'Outfit', sans-serif; }
.lh-links a, .lh-links button { background: none; border: 0; padding: 0; cursor: pointer; color: #E8E4F6; text-decoration: none; font: inherit; } .lh-links b { color: #F3C94A; }
.lh-links a:hover, .lh-links button:hover { text-decoration: underline; text-underline-offset: 3px; }
.lh-mine .lh-other { display: none; }
.lr-nav { display: none !important; } .lr:hover .lr-nav { display: flex !important; }
.lr-h small { color: #5A5670 !important; font-style: italic; }
.lbk-m { color: #6A6585 !important; }
.lsp-l { margin: 4px 0 6px; font: italic 500 1.1rem/1.4 var(--voice); color: #1D1E46; } .lsp-s { margin: 0; font-size: .82rem; color: var(--soft); }
@media (max-width: 640px) { .st-all { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; } .st-all a { flex: none; } }
.side .lsp .lsp-l { font: italic 500 1.15rem/1.4 var(--voice) !important; color: #1D1E46 !important; margin: 6px 0 6px !important; }
.side .lsp .lsp-s { font: 400 .82rem/1.45 'Outfit', sans-serif !important; color: var(--soft) !important; margin: 0 !important; }
.side .lsp .kicker { color: #8A6A12 !important; font-style: normal !important; font: 700 .72rem 'Outfit', sans-serif !important; letter-spacing: .06em; text-transform: uppercase; }
/* My Love Story side, fuller (Lord, 4 Oct) */
.lsr-n { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 8px 0; text-align: center; }
.lsr-n span { padding: 8px 4px; border-radius: 10px; background: #FFFBF2; border: 1px solid #F0E6CF; } .lsr-n b { display: block; font: 600 1.4rem var(--voice); color: #1D1E46; } .lsr-n small { font-size: .68rem; color: var(--soft); }
.side .lsr .lsr-s { margin: 4px 0 0 !important; font: italic 400 .88rem 'Lora', Georgia, serif !important; color: #5A5670 !important; }
.side .lsr .kicker, .side .lsf small { color: #8A6A12 !important; font: 700 .72rem 'Outfit', sans-serif !important; letter-spacing: .06em; text-transform: uppercase; font-style: normal !important; }
.lsf { display: block; overflow: hidden; text-decoration: none; color: inherit; padding: 0 !important; }
.lsf img { display: block; width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }
.lsf-b { display: block; padding: 12px 16px 14px; } .lsf-b b { display: block; margin: 4px 0 2px; font: 600 1.15rem var(--voice); color: #1D1E46; } .lsf-b em { font: italic 400 .86rem/1.4 'Lora', Georgia, serif; color: #5A5670; }
.lsf:hover b { text-decoration: underline; text-decoration-color: #D9B962; }
.lsr-n small { display: block; line-height: 1.2; white-space: nowrap; }
/* Shelf arrows: always take their space, fade in on hover, so nothing jumps (Lord, 4 Oct) */
.lr-nav { display: flex !important; opacity: 0; transition: opacity .2s ease; } .lr:hover .lr-nav, .lr-nav:focus-within { opacity: 1; }
@media (hover: none) { .lr-nav { display: none !important; } }
/* Love Film tease and community card (Lord, 4 Oct) */
.lsfm { display: flex; align-items: center; gap: 14px; padding: 16px !important; text-decoration: none; color: #E8E4F6; background: radial-gradient(120% 140% at 10% 0%, #5A2E4E 0%, #2E2152 55%, #1C2040 100%) !important; border: 0 !important; }
.lsfm-p { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: #F3C94A; color: #2E1E06; font-size: 1.1rem; }
.lsfm small { display: block; font: 700 .7rem 'Outfit', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #F3C94A; } .lsfm b { display: block; margin: 2px 0; font: 600 1.15rem var(--voice); color: #fff; } .lsfm em { font: italic 400 .84rem/1.4 'Lora', Georgia, serif; color: #D9D4F0; }
.lsc-r { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid #F2EADA; } .lsc-r:first-of-type { border-top: 0; }
.lsc-a { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #23245A; color: #F3C94A; font: 700 .8rem 'Outfit', sans-serif; }
.lsc-r b { font: 700 .84rem 'Outfit', sans-serif; color: #1D1E46; } .lsc-r small { font-size: .74rem; color: var(--soft); } .lsc-r em { display: block; margin-top: 2px; font: italic 400 .88rem/1.4 'Lora', Georgia, serif; color: #3A3652; }
.side .lsc .kicker { color: #8A6A12 !important; font: 700 .72rem 'Outfit', sans-serif !important; letter-spacing: .06em; text-transform: uppercase; font-style: normal !important; }
.lsc-f { margin: 6px 0 0; font-size: .78rem; color: var(--soft); }
/* My Love Story side column fits on one screen, no scrolling (Lord, 4 Oct) */
.side .lsfm { padding: 12px 14px !important; gap: 12px; } .lsfm-p { width: 38px; height: 38px; font-size: .95rem; } .lsfm b { font-size: 1.05rem; } .lsfm em { font-size: .8rem; line-height: 1.35; }
.side .lsc .body { padding: 12px 16px !important; } .lsc-r { padding: 8px 0; } .lsc-r small { display: block; font-size: .72rem; line-height: 1.3; } .lsc-r em { font-size: .84rem; line-height: 1.35; }
.side .lsc .lsc-f { margin: 4px 0 0 !important; font: 400 .74rem 'Outfit', sans-serif !important; color: var(--soft) !important; }
.side .lsf { display: flex !important; align-items: center; gap: 12px; padding: 10px !important; }
.side .lsf img { flex: none; width: 72px; height: 72px; aspect-ratio: auto; border-radius: 10px; }
.side .lsf .lsf-b { padding: 0; min-width: 0; } .side .lsf .lsf-b b { font-size: 1rem; margin: 2px 0; } .side .lsf .lsf-b em { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .8rem; line-height: 1.35; }
.side .lsfm em { display: block; font: italic 400 .82rem/1.35 'Lora', Georgia, serif !important; }
.side .lsc .kicker { margin: 0 0 4px !important; }
/* My Love Story: short intro, story and buttons above the fold, steps under the story (Lord, 4 Oct) */
.sl.sti { padding: 20px 28px 18px !important; margin: 0 0 14px !important; } .sti h2 { font-size: 1.55rem !important; } .sti .sl-sub { font-size: .98rem; margin-top: 6px; }
.lib2 > .sti3 { margin: 14px 0 0 !important; }
/* My Love Story side: reading streak, covers on what women are reading, a shorter Find my story (Lord, 4 Oct) */
.side .lsr2 .body { padding: 12px 16px !important; }
.side .lsr2 .kicker, .side .ls-find2 small { color: #8A6A12 !important; font: 700 .72rem 'Outfit', sans-serif !important; letter-spacing: .06em; text-transform: uppercase; font-style: normal !important; margin: 0 !important; }
.side .ls-find2 small { color: #FFD54A !important; }
.side .lsr2 .lsr2-n { margin: 4px 0 6px !important; font: 400 .9rem 'Outfit', sans-serif !important; color: var(--soft) !important; } .lsr2-n b { font: 600 1.6rem var(--voice); color: #1D1E46; margin-right: 2px; }
.lsr2-d { display: flex; gap: 6px; } .lsr2-d i { flex: 1; height: 8px; border-radius: 4px; background: #F0E6CF; } .lsr2-d i.on { background: #F3C94A; } .lsr2-d i.td:not(.on) { box-shadow: inset 0 0 0 1.5px #D9B962; background: #FFFBF2; }
.side .lsr2 .lsr2-s { margin: 8px 0 0 !important; font: italic 400 .86rem/1.4 'Lora', Georgia, serif !important; color: #5A5670 !important; }
a.lsc-r { text-decoration: none; color: inherit; } a.lsc-r:hover b { text-decoration: underline; text-decoration-color: #D9B962; }
.lsc-c { flex: none; width: 40px; } .lsc-c img { display: block; width: 40px; height: 60px; object-fit: cover; border-radius: 5px; box-shadow: 0 4px 10px -4px rgba(29, 30, 70, .5); }
.lsc-r > span:last-child { min-width: 0; } .lsc-r b { display: block; font: 600 .95rem/1.2 var(--voice) !important; }
.side .ls-find2 { min-height: 0 !important; } .side .ls-find2 .lsf-in { padding: 64px 16px 14px !important; gap: 4px; } .side .ls-find2 .lsf-in b { font-size: 19px; } .side .ls-find2 .lsf-in > span { font-size: 13px; } .side .ls-find2 .btn { padding-block: 8px; }
.lsr2-n b { font-variant-numeric: lining-nums; }
/* Sending a gift: ask, then a warm "sent" moment (Lord, 4 Oct) */
.gfm { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 16px; background: rgba(20, 18, 46, .55); opacity: 0; transition: opacity .2s; }
.gfm.on { opacity: 1; }
.gfm-c { position: relative; width: min(380px, 100%); padding: 30px 26px 20px; border-radius: 22px; text-align: center; color: #E8E4F6; background: radial-gradient(120% 90% at 50% 0%, #4A2E62 0%, #2A2356 55%, #1C2040 100%); box-shadow: 0 30px 70px -20px rgba(10, 8, 30, .7); transform: translateY(10px) scale(.97); transition: transform .25s; }
.gfm.on .gfm-c { transform: none; }
.gfm-x { position: absolute; top: 10px; right: 14px; border: 0; background: none; color: #B9B3D9; font-size: 1.5rem; cursor: pointer; }
.gfm-ic { width: 84px; height: 84px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; font-size: 2.6rem; background: radial-gradient(circle, rgba(243, 201, 74, .3), rgba(243, 201, 74, .06) 70%); box-shadow: 0 0 0 1px rgba(243, 201, 74, .35); }
.gfm-c h3 { margin: 0 0 6px; font: 600 1.45rem/1.2 var(--voice); color: #fff; }
.gfm-s { margin: 0 0 14px; font: italic 400 .92rem/1.45 'Lora', Georgia, serif; color: #D9D4F0; }
.gfm-p { margin: 0 0 16px; font: 700 1rem 'Outfit', sans-serif; color: #F3C94A; } .gfm-p small { display: block; margin-top: 2px; font-weight: 400; font-size: .8rem; color: #B9B3D9; }
.gfm-w { margin: -8px 0 12px; font-size: .85rem; color: #FFD9A0; }
.gfm-c .btn { display: block; width: 100%; }
.gfm-no { display: block; margin: 10px auto 0; border: 0; background: none; color: #B9B3D9; font: 500 .88rem 'Outfit', sans-serif; cursor: pointer; }
.gfm-c .btn.gfm-no { color: #2E1E06; margin-top: 16px; }
.gfm-burst { position: relative; width: 96px; height: 96px; margin: 0 auto 14px; display: grid; place-items: center; font-size: 3rem; animation: gfmPop .6s cubic-bezier(.2, 1.6, .4, 1); }
.gfm-burst i { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: #F3C94A; animation: gfmFly .9s ease-out forwards; }
.gfm-burst i:nth-child(1) { --dx: -54px; --dy: -30px; } .gfm-burst i:nth-child(2) { --dx: 54px; --dy: -34px; } .gfm-burst i:nth-child(3) { --dx: -60px; --dy: 22px; background: #F7A8B8; } .gfm-burst i:nth-child(4) { --dx: 58px; --dy: 26px; background: #F7A8B8; } .gfm-burst i:nth-child(5) { --dx: -6px; --dy: -62px; } .gfm-burst i:nth-child(6) { --dx: 8px; --dy: 60px; background: #fff; }
@keyframes gfmPop { 0% { transform: scale(.3); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes gfmFly { 0% { transform: none; opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)); opacity: 0; } }
.gfm-th { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; padding: 14px; border-radius: 14px; text-align: left; background: #FFFDF7; color: #1D1E46; }
.gfm-th .adv-ava { flex: none; width: 42px; height: 42px; }
.gfm-th b { display: block; font: 700 .88rem 'Outfit', sans-serif; } .gfm-th em { display: block; margin-top: 2px; font: italic 400 .9rem/1.45 'Lora', Georgia, serif; color: #3A3652; }
@media (prefers-reduced-motion: reduce) { .gfm-burst, .gfm-burst i { animation: none; } .gfm-burst i { display: none; } }
.gfm-left { margin: 12px 0 10px; font-size: .82rem; color: #B9B3D9; }
/* My Love Story: "How it works" link to the three steps (Lord, 4 Oct) */
.sti-how { display: block; margin: 8px auto 0; border: 0; background: none; font: 600 .9rem 'Outfit', sans-serif; color: #1F8A4C; cursor: pointer; } .sti-how:hover { text-decoration: underline; }
.sti3.flash li { animation: stFlash 1.4s ease; } @keyframes stFlash { 0%, 60% { box-shadow: 0 0 0 2px #F3C94A, 0 10px 24px -10px rgba(176, 138, 69, .5); } 100% { box-shadow: none; } }
/* "How it works" is a quiet link, bottom right of the intro card (Lord, 4 Oct) */
.sl.sti .sti-how { position: absolute; right: 18px; bottom: 12px; margin: 0; padding: 0; font: 500 .8rem 'Outfit', sans-serif; color: var(--soft); }
.sl.sti .sti-how:hover { color: #1D1E46; }
@media (max-width: 640px) { .sl.sti .sti-how { position: static; display: block; margin: 8px 0 0 auto; } }
.sl.sti .sti-how { bottom: 21px; line-height: 1.5; }
/* The women on this episode: feelings, comments, hearts (Lord, 4 Oct) */
.ec { margin-top: 22px; padding: 22px 24px 18px; border-radius: 18px; background: #FFFDF7; border: 1px solid #EAD9AE; color: #1D1E46; }
.ec-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.ec h2 { margin: 0; font: 600 1.4rem/1.2 var(--voice); color: #1D1E46; }
.ec-mood { margin: 6px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .82rem; color: var(--soft); }
.ec-mood span, .ec-f { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; background: #F6EED9; color: #5A4512; font: 600 .74rem 'Outfit', sans-serif; white-space: nowrap; }
.ec-love { flex: none; display: grid; justify-items: center; gap: 0; min-width: 104px; padding: 8px 12px; border-radius: 14px; border: 1px solid #EAD9AE; background: #fff; color: #1D1E46; font: 700 1.05rem 'Outfit', sans-serif; cursor: pointer; }
.ec-love small { font: 400 .7rem 'Outfit', sans-serif; color: var(--soft); }
.ec-love.on { background: #23245A; border-color: #23245A; color: #F3C94A; } .ec-love.on small { color: #D9D4F0; }
.ec-new { margin: 18px 0 6px; padding: 16px; border-radius: 14px; background: #FBF5E6; border: 1px solid #F0E3BF; }
.ec-q { margin: 0 0 10px; font: italic 500 1.1rem var(--voice); color: #1D1E46; }
.ec-feels { display: flex; flex-wrap: wrap; gap: 8px; }
.ec-feels button { padding: 7px 12px; border-radius: 999px; border: 1px solid #D9C8A0; background: #fff; color: #1D1E46; font: 500 .86rem 'Outfit', sans-serif; cursor: pointer; transition: transform .12s; }
.ec-feels button:hover { border-color: #23245A; } .ec-feels button.on { background: #23245A; border-color: #23245A; color: #F3C94A; transform: scale(1.04); }
.ec-new textarea { display: block; width: 100%; box-sizing: border-box; margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; border: 1px solid #E3D6B5; background: #fff; font: 400 .95rem/1.45 'Lora', Georgia, serif; color: #1D1E46; resize: vertical; }
.ec-new textarea:focus { outline: 2px solid #F3C94A; outline-offset: 1px; }
.ec-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 12px; } .ec-acts .btn { width: auto; padding: 10px 22px; }
.ec-jr { border: 0; background: none; padding: 0; color: #1D1E46; font: 600 .88rem 'Outfit', sans-serif; cursor: pointer; } .ec-jr:hover { text-decoration: underline; }
.ec-note { margin: 10px 0 0; font-size: .76rem; color: var(--soft); }
.ec-lock .ec-q { margin: 0; } .ec-lock .ec-note { margin-top: 4px; font-size: .84rem; }
.ec-r { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-top: 1px solid #F2EADA; }
.ec-list .ec-r:first-child { border-top: 0; }
.ec-list .ec-r:nth-child(n+5) { display: none; } .ec.all .ec-list .ec-r { display: flex; }
.ec-a { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #23245A; color: #F3C94A; font: 700 .9rem 'Outfit', sans-serif; }
.ec-r.mine .ec-a { background: #F3C94A; color: #2E1E06; } .ec-r.mine { background: linear-gradient(90deg, #FFF7DD, transparent); margin: 0 -10px; padding-inline: 10px; border-radius: 12px; }
.ec-b { flex: 1; min-width: 0; }
.ec-h { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .ec-h b { font: 700 .9rem 'Outfit', sans-serif; } .ec-h small { font-size: .74rem; color: var(--soft); }
.ec-t { margin: 4px 0 0; font: italic 400 .98rem/1.5 'Lora', Georgia, serif; color: #2E2B48; }
.ec-hb { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 999px; border: 1px solid #EADFC9; background: #fff; color: #8C86A6; font: 600 .8rem 'Outfit', sans-serif; cursor: pointer; }
.ec-hb:hover { color: #C2456A; border-color: #E9C3CF; } .ec-hb.on { color: #C2456A; background: #FDEFF3; border-color: #E9C3CF; }
.ec-hb.on, .ec-love.on { animation: ecBeat .35s ease; } @keyframes ecBeat { 50% { transform: scale(1.12); } }
.ec-more { display: block; margin: 6px auto 0; border: 0; background: none; color: #1F8A4C; font: 600 .88rem 'Outfit', sans-serif; cursor: pointer; }
/* On a story's page: how many loved it, and the top line */
.ec-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 14px 0 4px; padding: 12px 16px; border-radius: 14px; background: #FFFDF7; border: 1px solid #EAD9AE; }
.ec-sn { margin: 0; font-size: .86rem; color: var(--soft); } .ec-sn b { font: 700 .95rem 'Outfit', sans-serif; color: #C2456A; }
.ec-sq { margin: 0; flex: 1; min-width: 240px; font: italic 400 .92rem/1.45 'Lora', Georgia, serif; color: #2E2B48; } .ec-sq .ec-f { margin-right: 8px; font-style: normal; } .ec-sq small { font: 400 .76rem 'Outfit', sans-serif; color: var(--soft); font-style: normal; }
@media (max-width: 640px) { .ec { padding: 18px 14px 14px; } .ec-top { flex-direction: column; } .ec-love { display: flex; align-items: baseline; gap: 6px; } }
@media (prefers-reduced-motion: reduce) { .ec-hb.on, .ec-love.on { animation: none; } }
/* "How it works" as the card's footer bar, like the Chat quiz bar (Lord, 4 Oct) */
.sl.sti .sti-how { position: static !important; display: flex !important; justify-content: flex-end; align-items: center; gap: 8px; width: calc(100% + 56px); margin: 16px -28px -18px !important; padding: 12px 28px !important; background: #F6EED9; border-top: 1px solid #EAD9AE; font: 500 .88rem 'Outfit', sans-serif; color: #5A5670; cursor: pointer; }
.sl.sti .sti-how b { color: #8A6A12; white-space: nowrap; } .sl.sti .sti-how:hover b { text-decoration: underline; text-underline-offset: 3px; } .sl.sti .sti-how:hover { color: #5A5670; }
@media (max-width: 640px) { .sl.sti .sti-how { flex-direction: column; align-items: flex-end; gap: 2px; width: calc(100% + 32px); margin: 14px -16px -18px !important; padding: 10px 16px !important; } }
@media (max-width: 640px) { .sl.sti { padding: 20px 16px 18px !important; } }
.ec-new textarea { height: 64px; min-height: 64px; }
.ec-done { display: flex; align-items: center; gap: 12px; } .ec-done .ec-q { margin: 0; } .ec-done .ec-note { margin-top: 2px; }
.ec-tick { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #1F8A4C; color: #fff; font-weight: 700; animation: ecBeat .4s ease; }
/* Why a story works: the science page (Lord, 4 Oct) */
a.sti-how { text-decoration: none; }
.ssci { max-width: 760px; margin: 0 auto 30px; padding: 34px 40px 30px; border-radius: 20px; background: #FFFDF7; border: 1px solid #EAD9AE; color: #1D1E46; }
.ssci-k { margin: 0 0 8px; text-align: center; font: 700 .74rem 'Outfit', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #8A6A12; }
.ssci h1 { margin: 0 auto; max-width: 24ch; text-align: center; font: 600 2rem/1.15 var(--voice); color: #1D1E46; }
.ssci-lede { max-width: 52ch; margin: 12px auto 26px; text-align: center; font: italic 400 1.05rem/1.55 'Lora', Georgia, serif; color: #4B4766; }
.ssci-i { display: flex; gap: 18px; padding: 22px 0; border-top: 1px solid #EFE4C8; }
.ssci-ic { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 1.35rem; background: #23245A; box-shadow: 0 0 0 3px #F6EED9; }
.ssci-i h2 { margin: 0 0 6px; font: 600 1.3rem/1.25 var(--voice); color: #1D1E46; }
.ssci-i p { margin: 0; font: 400 1rem/1.6 'Lora', Georgia, serif; color: #2E2B48; }
.ssci-i .ssci-you { margin-top: 10px; padding: 10px 14px; border-radius: 10px; background: #F6EED9; color: #1D1E46; } .ssci-you b { font: 700 .86rem 'Outfit', sans-serif; color: #8A6A12; }
.ssci-i .ssci-src { margin-top: 8px; font: 400 .76rem 'Outfit', sans-serif; color: var(--soft); }
.ssci-how { padding-top: 22px; border-top: 1px solid #EFE4C8; } .ssci-how h2 { margin: 0 0 4px; text-align: center; font: 600 1.4rem var(--voice); }
.ssci-cta { margin-top: 24px; padding: 20px; border-radius: 16px; text-align: center; background: radial-gradient(120% 140% at 10% 0%, #4A2E62 0%, #2A2356 55%, #1C2040 100%); color: #E8E4F6; }
.ssci-cta p { margin: 0 0 12px; font: italic 400 1rem 'Lora', Georgia, serif; } .ssci-cta b { font: 600 1.15rem var(--voice); color: #fff; font-style: normal; } .ssci-cta .btn { width: auto; padding: 12px 34px; }
@media (max-width: 640px) { .ssci { padding: 24px 16px 20px; } .ssci h1 { font-size: 1.5rem; } .ssci-i { gap: 12px; } .ssci-ic { width: 40px; height: 40px; font-size: 1.1rem; } }
.ssci-cta .btn { display: inline-flex !important; margin: 0 auto; }
/* The science page as a Halbert letter (Lord, 4 Oct) */
.ssl { max-width: 720px; padding: 38px 48px 30px; }
.ssl h1 { max-width: 22ch; }
.ssl .ssci-lede { margin: 8px auto 30px; }
.ssl-body { max-width: 60ch; margin: 0 auto; }
.ssl-body p { margin: 0 0 14px; font: 400 1.08rem/1.7 'Lora', Georgia, serif; color: #2E2B48; }
.ssl-body b { color: #1D1E46; font-weight: 700; }
.ssl-body h2 { margin: 30px 0 12px; font: 600 1.45rem/1.25 var(--voice); color: #1D1E46; }
.ssl .sti3 { margin: 6px 0 22px !important; }
.ssl .ssci-cta { margin: 6px 0 24px; }
.ssl-ps p { font-style: italic; }
.ssl-src { margin: 22px 0 0; padding-top: 14px; border-top: 1px solid #EFE4C8; font: 400 .74rem/1.6 'Outfit', sans-serif; color: var(--soft); }
@media (max-width: 640px) { .ssl { padding: 24px 18px 20px; } .ssl-body p { font-size: 1.02rem; } }
.ssl .ssl-body { max-width: none; }
/* Science footer: one slim line on phones (Lord, 4 Oct) */
@media (max-width: 640px) { .sl.sti .sti-how { flex-direction: row !important; flex-wrap: nowrap; justify-content: flex-end; align-items: center; gap: 6px; padding: 8px 16px !important; margin-top: 12px !important; font-size: .78rem; } .sl.sti .sti-how span, .sl.sti .sti-how b { white-space: nowrap; } }
@media (max-width: 360px) { .sl.sti .sti-how span { display: none; } }
/* My Love Story: the journal floats instead of chat, on phones too (Lord, 4 Oct) */
@media (max-width: 959px) { body.on-story .qfab:not([hidden]) { display: grid !important; place-items: center; right: 14px !important; left: auto !important; bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important; width: 50px !important; height: 50px !important; border-radius: 50% !important; } }
body.on-story.qns-open .qfab, body.on-story.menu-open .qfab, body.on-story.popped .qfab { display: none !important; }
/* After an episode: one quiet line to the love angel */
.ec-talk { display: flex; align-items: center; gap: 10px; margin: 4px 0 8px; padding: 10px 14px; border-radius: 12px; text-decoration: none; color: #5A5670; font: 400 .88rem 'Outfit', sans-serif; border: 1px dashed #E3D6B5; }
.ec-talk .adv-ava { flex: none; width: 30px; height: 30px; } .ec-talk b { color: #1D1E46; font-weight: 600; } .ec-talk:hover b { text-decoration: underline; text-underline-offset: 3px; }
/* A story's page, leaner and warmer (Lord, 4 Oct) */
.lsp-page .lsp-hero { margin: 0 0 16px; }
.lsp-why { padding: 22px 26px; border-radius: 18px; background: #FFFDF7; border: 1px solid #EAD9AE; text-align: center; }
.lsp-k { margin: 0; font: 700 .72rem 'Outfit', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #8A6A12; }
.lsp-feel { margin: 6px 0 4px; font: italic 500 1.9rem/1.2 var(--voice); color: #1D1E46; }
.lsp-sub { max-width: 50ch; margin: 0 auto 18px; font: italic 400 .98rem/1.5 'Lora', Georgia, serif; color: #4B4766; }
.lsp-arc { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; padding: 0; text-align: left; counter-reset: arc; }
.lsp-arc li { position: relative; padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid #F0E3BF; font: 400 .9rem/1.4 'Lora', Georgia, serif; color: #2E2B48; }
.lsp-arc small { display: block; margin-bottom: 3px; font: 700 .7rem 'Outfit', sans-serif; letter-spacing: .05em; text-transform: uppercase; color: #8A6A12; }
.lsp-page .lib-h { margin: 24px 0 10px; font: 600 1.25rem var(--voice); color: #1D1E46; }
.lsp-prev a { aspect-ratio: 4 / 3 !important; }
.lsp-chs { margin-top: 4px; }
.lsp-chh { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; } .lsp-chh .lib-h { margin-bottom: 4px; } .lsp-chh p { margin: 0 0 10px; font-size: .82rem; color: var(--soft); }
.lsp-chg { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 6px; }
.lsp-ch { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-radius: 10px; background: #FBF7EE; border: 1px solid #EFE6D2; color: #8C86A6; }
.lsp-ch b { font: 600 1rem 'Outfit', sans-serif; } .lsp-ch small { font-size: .66rem; }
.lsp-ch.free { background: #23245A; border-color: #23245A; color: #fff; } .lsp-ch.free small { color: #F3C94A; font-weight: 600; }
.lsp-ch.more { background: none; border-style: dashed; }
.lsp-page .lib-stc { margin-top: 22px; }
@media (max-width: 640px) { .lsp-arc { grid-template-columns: 1fr; } .lsp-feel { font-size: 1.5rem; } .lsp-why { padding: 18px 16px; } }
/* Beside it */
.lso-n { margin: 2px 0 6px !important; font-size: .84rem; color: var(--soft); } .lso-n b { font: 700 1rem 'Outfit', sans-serif; color: #C2456A; }
.lso .lsc-r b { display: inline; font: 700 .84rem 'Outfit', sans-serif !important; } .lso .ec-f { margin-left: 4px; }
.lsfind { display: block; padding: 14px 16px !important; text-decoration: none; color: #E8E4F6; background: radial-gradient(120% 140% at 10% 0%, #4A2E62 0%, #2A2356 55%, #1C2040 100%) !important; border: 0 !important; }
.lsfind small { display: block; font: 700 .7rem 'Outfit', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #F3C94A; } .lsfind b { display: block; margin-top: 2px; font: 600 1.1rem var(--voice); color: #fff; } .lsfind:hover b { text-decoration: underline; text-decoration-color: #F3C94A; }
/* "See The Science" sits quietly under the three steps (Lord, 4 Oct) */
.sti-sci { margin: 8px 2px 0; text-align: right; } .sti-sci a { font: 500 .82rem 'Outfit', sans-serif; color: var(--soft); text-decoration: none; } .sti-sci b { color: #8A6A12; font-weight: 600; } .sti-sci a:hover b { text-decoration: underline; text-underline-offset: 3px; }
/* The episode page in two columns (Lord, 4 Oct) */
.wvp2 { display: block !important; margin-top: 0; }
.wvp2 .wvp-info h1 { margin: 16px 0 4px; font: 600 1.45rem/1.2 var(--voice); color: #1D1E46; font-variant-numeric: lining-nums; }
.wvp2 .wvp-meta { margin: 0; font-size: .82rem; color: var(--soft); opacity: 1; }
.wvp-prog { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; } .wvp-prog span { flex: 1; height: 5px; border-radius: 3px; background: #EFE6D2; overflow: hidden; } .wvp-prog i { display: block; height: 100%; background: #F3C94A; border-radius: 3px; } .wvp-prog small { font-size: .74rem; color: var(--soft); white-space: nowrap; }
.wvp2 .wvp-d { margin: 12px 0 0; font: italic 400 .98rem/1.5 'Lora', Georgia, serif; color: #4B4766; opacity: 1; }
.wvp-ql { display: flex; gap: 18px; margin: 10px 0 0; } .wvp-ql a { font: 600 .84rem 'Outfit', sans-serif; color: #1D1E46; text-decoration: none; } .wvp-ql a:hover { text-decoration: underline; text-underline-offset: 3px; }
#wvpBelow > section { margin-top: 18px; }
.wvn { display: flex; gap: 16px; align-items: center; padding: 16px; border-radius: 18px; color: #E8E4F6; background: radial-gradient(120% 140% at 10% 0%, #4A2E62 0%, #2A2356 55%, #1C2040 100%); }
.wvn-img { flex: none; width: 150px; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; } .wvn-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wvn-b small { font: 700 .7rem 'Outfit', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #F3C94A; } .wvn-t { margin: 2px 0 10px; font: italic 500 1.15rem/1.35 var(--voice); color: #fff; }
.wvn .btn { width: auto; padding: 10px 20px; } .wvn-s { margin: 6px 0 0; font-size: .78rem; color: #B9B3D9; }
.wvl { padding: 18px 20px; border-radius: 18px; background: #FFFDF7; border: 1px solid #EAD9AE; }
.wvl-g { display: grid; grid-template-columns: 1.2fr 1fr; gap: 12px; margin-top: 10px; } .wvl-g > div { padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid #F0E3BF; }
.wvl-g small { display: block; font: 700 .7rem 'Outfit', sans-serif; letter-spacing: .05em; text-transform: uppercase; color: #8A6A12; }
.wvl-aff { margin: 4px 0 0; font: italic 500 1.15rem/1.35 var(--voice); color: #1D1E46; }
.wvl-sign { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font: 400 .92rem/1.4 'Lora', Georgia, serif; color: #2E2B48; } .wvl-sign span { font-size: 1.3rem; }
.wvl-j { margin-top: 12px; border: 0; background: none; padding: 0; font: 600 .86rem 'Outfit', sans-serif; color: #1D1E46; cursor: pointer; } .wvl-j:hover { text-decoration: underline; text-underline-offset: 3px; }
.ec-lock { margin-bottom: 0 !important; }
/* Up next, beside it */
.side .wvs .kicker { color: #8A6A12 !important; font: 700 .72rem 'Outfit', sans-serif !important; letter-spacing: .06em; text-transform: uppercase; font-style: normal !important; margin: 0 0 6px !important; }
.wvs .wvp-it { display: flex !important; gap: 10px; align-items: center; padding: 6px 0; text-decoration: none; color: #1D1E46; }
.wvs .wvp-th { position: relative; flex: none; width: 104px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; } .wvs .wvp-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wvs .wvp-th em { position: absolute; right: 4px; bottom: 4px; padding: 1px 6px; border-radius: 6px; background: rgba(20, 18, 46, .8); color: #fff; font: 600 .66rem 'Outfit', sans-serif; font-style: normal; }
.wvs .wvp-it.on .wvp-th { box-shadow: 0 0 0 2px #F3C94A; }
.wvs .wvp-it b { display: block; font: 600 .84rem/1.3 'Outfit', sans-serif; } .wvs .wvp-it small { font-size: .72rem; color: var(--soft); }
@media (max-width: 640px) { .wvn { flex-direction: column; align-items: stretch; } .wvn-img { width: 100%; } .wvl-g { grid-template-columns: 1fr; } }
/* the episode page sits in the main column now; the side column holds Up next (Lord, 4 Oct) */
.wvp.wvp2 { width: 100% !important; margin: 0 0 30px !important; }
.wvp2 .wv:not(.wv-fs):not(:fullscreen) .wv-frame { width: 100% !important; }
.wvs .wvp-it { flex-direction: row !important; align-items: center !important; gap: 10px !important; margin: 0 !important; background: none !important; text-align: left; }
.wvs .wvp-it .wvp-th { width: 104px !important; outline: 0 !important; }
.wvn .btn { display: inline-flex !important; width: auto !important; }
.wvp2 .wvp-ql { margin-top: 12px; }
/* Where she left off (Lord, 4 Oct) */
.lo { display: flex; gap: 20px; align-items: center; margin: 0 0 18px; padding: 18px; border-radius: 18px; color: #E8E4F6; background: radial-gradient(120% 140% at 10% 0%, #4A2E62 0%, #2A2356 55%, #1C2040 100%); }
.lo-img { flex: none; width: 240px; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; } .lo-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lo h2 { margin: 2px 0 4px; font: 600 1.5rem/1.2 var(--voice); color: #fff; } .lo .lsp-k { color: #F3C94A; }
.lo-lead { margin: 0 0 8px; font-size: .9rem; color: #D9D4F0; }
.lo-prev { margin: 0 0 12px; padding: 8px 12px; border-left: 2px solid #F3C94A; font: italic 400 .98rem/1.45 'Lora', Georgia, serif; color: #fff; } .lo-prev small { display: block; font: 700 .68rem 'Outfit', sans-serif; letter-spacing: .06em; text-transform: uppercase; font-style: normal; color: #B9B3D9; }
.lo .btn { display: inline-flex !important; width: auto !important; padding: 11px 22px; }
@media (max-width: 640px) { .lo { flex-direction: column; align-items: stretch; } .lo-img { width: 100%; } }
.wvs .wvp-it.soon { opacity: .7; } .wvs .wvp-it.soon img { filter: grayscale(.4); }
.wvs-all { display: block; margin-top: 8px; padding-top: 10px; border-top: 1px solid #F2EADA; text-align: right; font: 600 .84rem 'Outfit', sans-serif; color: #1F8A4C; text-decoration: none; } .wvs-all:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Manifest: her affirmation as a keepsake (Lord, 4 Oct: the bordered quote box read as generic) */
.mf-aff2 { position: relative; margin: 14px 0 0; padding: 26px 28px 20px; border-radius: 20px; text-align: center; overflow: hidden;
  background: radial-gradient(90% 120% at 50% 0%, #FFF8E4 0%, #FFFDF7 60%); box-shadow: 0 0 0 1px #EFDDAE inset, 0 18px 40px -28px rgba(120, 88, 20, .45); }
.mf-aff2::before { content: '“'; position: absolute; left: 50%; top: -34px; transform: translateX(-50%); font: 400 9rem/1 var(--voice); color: rgba(224, 172, 42, .13); pointer-events: none; }
.mfa-orn { display: flex; align-items: center; justify-content: center; gap: 10px; color: #C9A032; font-size: .8rem; }
.mfa-orn i { width: 46px; height: 1px; background: linear-gradient(90deg, transparent, #D9B962); } .mfa-orn i:last-child { transform: scaleX(-1); }
.mf-aff2 blockquote { position: relative; max-width: 34ch; margin: 12px auto 14px; font: italic 500 1.45rem/1.4 var(--voice); color: #1D1E46; text-wrap: balance; }
.mf-aff2 figcaption { display: inline-flex; align-items: center; gap: 6px; font: 500 .8rem 'Outfit', sans-serif; color: var(--soft); }
.mfa-tick { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: #1F8A4C; color: #fff; font-size: .65rem; font-weight: 700; }
@media (max-width: 640px) { .mf-aff2 { padding: 22px 18px 16px; } .mf-aff2 blockquote { font-size: 1.25rem; } }
.mf-aff2::before { content: none; } .mf-aff2 blockquote { max-width: 40ch; margin-top: 14px; }
/* Watch | Read (Lord, 4 Oct) */
.wvp-mode { display: inline-flex; margin-top: 12px; padding: 3px; border-radius: 999px; background: #F3ECDC; border: 1px solid #EADFC6; }
.wvp-mode > * { padding: 6px 16px; border-radius: 999px; font: 600 .84rem 'Outfit', sans-serif; color: #5A5670; text-decoration: none; }
.wvp-mode .on { background: #23245A; color: #F3C94A; } .wvp-mode a:hover { color: #1D1E46; } .wvp-mode .off { opacity: .55; font-weight: 500; }
.rd-mode { margin: 0 0 12px; }
.lo-read, .lh-read { margin-left: 14px; font: 600 .86rem 'Outfit', sans-serif; color: #F3DDA0; text-decoration: none; } .lo-read:hover, .lh-read:hover { text-decoration: underline; text-underline-offset: 3px; }
.lh-acts { display: flex; align-items: center; flex-wrap: wrap; }
/* Fate, inside the player */
.wvf { margin: 14px auto 6px; max-width: 420px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(243, 201, 74, .35); text-align: center; }
.wvf-k { margin: 0 0 8px; font: 600 .9rem 'Outfit', sans-serif; color: #F3C94A; }
.wvf-go { display: inline-flex; align-items: center; gap: 12px; border: 0; background: none; color: #fff; font: 600 .95rem 'Outfit', sans-serif; cursor: pointer; }
.wvf-wheel { position: relative; width: 54px; height: 54px; border-radius: 50%; background: conic-gradient(#C9A032 0 25%, #C2476B 0 45%, #2C7A7B 0 65%, #4B54A8 0 82%, #8E5BB5 0 100%); box-shadow: 0 0 0 3px rgba(243, 201, 74, .5), 0 0 22px rgba(243, 201, 74, .35); animation: wvfIdle 6s linear infinite; }
.wvf-wheel i { position: absolute; inset: 35%; border-radius: 50%; background: #1C2040; }
.wvf-wheel::after { content: ''; position: absolute; left: 50%; top: -6px; margin-left: -5px; border: 5px solid transparent; border-top: 8px solid #fff; }
.wvf.spinning .wvf-wheel { animation: wvfSpin 1.7s cubic-bezier(.15, .8, .25, 1) forwards; } .wvf.spinning .wvf-go b::after { content: '…'; }
@keyframes wvfIdle { to { transform: rotate(360deg); } } @keyframes wvfSpin { from { transform: rotate(0); } to { transform: rotate(1520deg); } }
.wvf-got { animation: land .5s ease; } .wvf-got small { display: block; font: 700 .72rem 'Outfit', sans-serif; letter-spacing: .05em; text-transform: uppercase; color: #F3C94A; }
.wvf-got p { margin: 6px 0 0; font: italic 400 1rem/1.5 'Lora', Georgia, serif; color: #fff; } .wvf-got .btn { margin-top: 10px; width: auto; display: inline-flex; }
@media (prefers-reduced-motion: reduce) { .wvf-wheel, .wvf.spinning .wvf-wheel { animation: none; } }
/* Lord, 4 Oct: less space between the two columns, everywhere */
@media (min-width: 960px) { .page { column-gap: 30px !important; } }
/* Lord, 4 Oct: the affirmation keepsake, tighter */
.mf-aff2 { padding: 16px 24px 14px; } .mf-aff2 blockquote { max-width: 46ch; margin: 8px auto 10px; font-size: 1.35rem; line-height: 1.35; }
@media (max-width: 640px) { .mf-aff2 { padding: 14px 16px 12px; } .mf-aff2 blockquote { font-size: 1.2rem; } }
.mf-aff2 blockquote { text-wrap: pretty; max-width: 52ch; }
/* The playable story's episodes, in the new page's colours (Lord, 4 Oct) */
.lsp-map { margin-top: 4px; }
.lsp-map .sm-ch:not(:last-child)::before { border-left-color: #E6D7B0; }
.lsp-map .sm-dot { background: #23245A; color: #F3C94A; font: 700 .9rem 'Outfit', sans-serif; } .lsp-map .sm-ch.later .sm-dot { background: #F3ECDC; color: #8C86A6; }
.lsp-map .sm-ct { font: 600 1.02rem 'Outfit', sans-serif; color: #1D1E46; } .lsp-map .sm-ct em { color: #8A6A12; }
.lsp-map .sm-ep { border: 1px solid #F0E3BF; box-shadow: none; background: #FFFDF7; } .lsp-map .sm-ep:hover { border-color: #D9B962; }
.lsp-map .sm-ep img { width: 96px; height: 60px; } .lsp-map .sm-ep b { font: 600 1rem 'Outfit', sans-serif; color: #1D1E46; }
.lsp-map .sm-ep.done em { background: #F3ECDC; color: #5A5670; }
.lsp-map .sm-read { display: inline-block; margin: 2px 0 6px; font: 500 .84rem 'Outfit', sans-serif; color: #5A5670; text-decoration: none; } .lsp-map .sm-read:hover { color: #1D1E46; text-decoration: underline; }
.lsp-map .sm-wait { font-size: .86rem; color: var(--soft); opacity: 1; }
.lsp-page .lo { margin-bottom: 16px; }
/* Lord, 4 Oct: pop-up notes in the brand, not black and white */
.toast { background: linear-gradient(160deg, #2F3170, #1D1E46) !important; color: #F8F1DE !important; border: 1px solid rgba(243, 201, 74, .45); border-radius: 14px !important; padding: 12px 18px !important; font: 500 .92rem/1.4 'Outfit', sans-serif !important; box-shadow: 0 16px 34px -12px rgba(20, 18, 46, .55); }
.toast::before { content: '✦ '; color: #F3C94A; }
/* the story is being made: a note in the hero, not a pop-up */
.lsp-made { display: flex; align-items: center; gap: 10px; max-width: 30rem; margin: 6px 0 0; padding: 10px 14px; border-radius: 14px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(243, 201, 74, .45); font: 400 .9rem/1.4 'Outfit', sans-serif; color: #F1ECFA; }
.lsp-made > span:first-child { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #1F8A4C; color: #fff; font-size: .75rem; font-weight: 700; } .lsp-made b { color: #fff; }
.lo .btn { white-space: nowrap; }
.lh-t { color: inherit; text-decoration: none; } .lh-t:hover { text-decoration: underline; text-decoration-color: rgba(243, 201, 74, .7); text-decoration-thickness: 2px; text-underline-offset: 6px; }
/* Watch or read: two clear buttons (Lord, 4 Oct) */
.lh-acts, .lo-b { gap: 10px; } .lo-b .btn { margin-right: 8px; }
.btn.lh-readb { display: inline-flex !important; width: auto !important; align-items: center; gap: 6px; padding: 11px 22px; border-radius: 999px; background: transparent !important; border: 1.5px solid rgba(243, 201, 74, .8) !important; color: #F3DDA0 !important; box-shadow: none !important; text-decoration: none; font-weight: 700; }
.btn.lh-readb:hover { background: rgba(243, 201, 74, .12) !important; color: #fff !important; }
.rd-mode { float: right; margin: -6px 0 10px !important; } @media (max-width: 640px) { .rd-mode { float: none; display: flex; width: max-content; margin: 0 0 10px auto !important; } }
.rd-mode { margin-top: 4px !important; }
/* A story's chapter 1, placeholder (Lord, 4 Oct) */
.smp-ph { margin: -14px -20px 18px; padding: 8px 14px; border-radius: 10px; background: #FFF3D6; border: 1px dashed #D9B962; font: 500 .8rem 'Outfit', sans-serif; color: #8A6A12; text-align: center; }
.smp-ok { margin: 0; font: 600 .95rem 'Outfit', sans-serif; color: #F3DDA0; }
.smp h1 { margin-bottom: 22px; }
/* Next chapter: the tease first, free tomorrow, binge for credits (Lord, 4 Oct) */
.sm-next { padding: 14px 16px; border-radius: 14px; background: #FFFDF7; border: 1px solid #F0E3BF; }
.sm-tease { margin: 0 0 6px; font: italic 500 1.15rem/1.35 var(--voice); color: #1D1E46; }
.sm-when { margin: 0 0 10px; font: 600 .88rem 'Outfit', sans-serif; color: #5A5670; } .wvn .sm-when, .ssci-cta .sm-when { color: #F1ECFA; }
.sm-binge { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; border: 1.5px solid #D9B962; background: transparent; color: #8A6A12; font: 700 .86rem 'Outfit', sans-serif; cursor: pointer; }
.sm-binge:hover { background: #FFF3D6; }
.wvn .sm-binge, .ssci-cta .sm-binge { color: #F3DDA0; border-color: rgba(243, 201, 74, .8); } .wvn .sm-binge:hover, .ssci-cta .sm-binge:hover { background: rgba(243, 201, 74, .12); }
.smp-k { display: block; font: 700 .7rem 'Outfit', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #F3C94A; }
.ssci-cta .smp-tease { margin: 4px 0 8px; font: italic 500 1.2rem/1.35 var(--voice); color: #fff; }
/* Watch / Read buttons a little leaner, more so on phones (Lord, 4 Oct) */
.lsp-hero .lh-acts .btn { padding: 10px 20px !important; font-size: .95rem !important; }
@media (max-width: 640px) { .lsp-hero .lh-acts { flex-wrap: nowrap; gap: 8px; } .lsp-hero .lh-acts .btn { flex: 1 1 0; justify-content: center; padding: 9px 10px !important; font-size: .88rem !important; min-height: 0 !important; white-space: nowrap; } }
/* Browse all: only the pill under the mouse reacts (Lord, 4 Oct) */
nav.st-all, nav.st-all:hover, nav.st-all a, nav.st-all a:hover, nav.st-all span { text-decoration: none !important; } nav.st-all a:hover { border-color: #D9B962; background: #FFFBF0; }
.smp-c2 { margin-top: 26px; text-align: center; } .ssci-cta .btn[data-smp2] { display: inline-flex; width: auto; }
/* Watch or read marks on story covers (Lord, 4 Oct) */
.lbk-md { position: absolute; top: 8px; left: 8px; padding: 3px 8px; border-radius: 999px; font: 700 .68rem 'Outfit', sans-serif; font-style: normal; background: rgba(20, 18, 46, .78); color: #F1ECFA; backdrop-filter: blur(3px); }
.lbk-md.w { background: #F3C94A; color: #2E1E06; }
.lh-chips .lh-md { background: rgba(243, 201, 74, .22) !important; color: #FFE7A3 !important; }
/* Lord, 4 Oct: shelf arrows always visible on desktop (not only on hover) */
@media (hover: hover) { .lr-nav, .lr .lr-nav { display: flex !important; opacity: 1 !important; } }
/* Lord, 4 Oct: the greeting sits close to her affirmation */
.mf-hi { margin-bottom: 8px !important; } .flows > .mf-aff2:first-child { margin-top: 0 !important; }
/* Watch / Read tags on ranked covers (right side) and on her story's hero (Lord, 4 Oct) */
.lbk-md.r { left: auto; right: 8px; }
.lh .lh-mdt { position: absolute; top: 16px; right: 16px; left: auto; z-index: 3; font-size: .78rem; padding: 4px 11px; }
.lib-tiers { margin: 10px 0 0; font-size: .8rem; color: var(--soft); } .lib-tiers a { color: #1D1E46; font-weight: 600; }
/* Mobile catalogue, leaner (Lord, 4 Oct): icon-only tags, one-line row heads, smaller covers */
.lbk-md i { display: none; font-style: normal; }
@media (max-width: 640px) {
  .lbk-md b { display: none; } .lbk-md i { display: inline; }
  .lbk-md { top: 6px; left: 6px; padding: 2px 7px; font-size: .7rem; letter-spacing: .1em; }
  .lbk-md.r { left: auto; right: 40px; }
  .lr-h small { display: none; } .lr-h h3 { font-size: 1.15rem; white-space: nowrap; }
  .lr { margin-top: 18px; }
  .lbk { width: 118px !important; flex-basis: 118px !important; } .lbk-t b { font-size: .95rem !important; } .lbk-m { font-size: .7rem; }
  .lbk-rank { font-size: 2.4rem !important; }
}
/* Reading a chapter, as refined as the watch page (Lord, 4 Oct) */
.rdp-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .rdp-top .back { margin: 0; } .rdp-top .wvp-mode { margin: 0; }
.rdp-only { font: 600 .8rem 'Outfit', sans-serif; color: var(--soft); }
.rdp-hero { position: relative; margin-top: 14px; aspect-ratio: 16 / 6; border-radius: 18px; overflow: hidden; background: #1C2040; }
.rdp-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rdp-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 18, 46, .05) 30%, rgba(20, 18, 46, .85)); }
.rdp-hin { position: absolute; left: 24px; right: 24px; bottom: 18px; color: #fff; } .rdp-hin small { font: 700 .74rem 'Outfit', sans-serif; letter-spacing: .05em; text-transform: uppercase; color: #F3C94A; } .rdp-hin h1 { margin: 4px 0 0; font: 600 2rem/1.15 var(--voice); color: #fff; }
.rdp-page { margin-top: 18px; padding: 34px 44px 26px; border-radius: 18px; background: #FFFDF7; border: 1px solid #EAD9AE; box-shadow: 0 18px 40px -30px rgba(90, 64, 20, .45); }
.rdp-k { margin: 0 0 14px; text-align: center; font: 600 .8rem 'Outfit', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #8A6A12; }
.rdp-page > p:not(.rdp-k):not(.rdp-end):not(.smp-ph) { max-width: 62ch; margin: 0 auto 16px; font: 400 1.12rem/1.8 'Lora', Georgia, serif; color: #26223A; }
.rdp-first::first-letter { float: left; margin: 6px 10px 0 0; font: 600 3.6rem/.8 var(--voice); color: #8A6A12; }
.rdp-end { margin: 10px 0 0; text-align: center; color: #C9A032; letter-spacing: .6em; }
.rdp-page .smp-ph { margin: 18px auto 0; max-width: 62ch; }
.rdp-lock { margin-top: 18px; padding: 26px; border-radius: 18px; background: #FFFDF7; border: 1px solid #EAD9AE; text-align: center; } .rdp-lock .smp-k { color: #8A6A12; }
.rdp-next .btn { display: inline-flex !important; width: auto !important; }
/* the chapter list beside it */
.rds-it { display: flex; align-items: center; gap: 10px; padding: 7px 0; text-decoration: none; color: #1D1E46; border-top: 1px solid #F2EADA; } .rds-it:first-of-type { border-top: 0; }
.rds-it b { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #F3ECDC; font: 700 .8rem 'Outfit', sans-serif; color: #5A5670; }
.rds-it.on b { background: #23245A; color: #F3C94A; } .rds-it span { font: 600 .88rem 'Outfit', sans-serif; } .rds-it small { display: block; font-weight: 400; font-size: .74rem; color: var(--soft); }
@media (max-width: 640px) { .rdp-hero { aspect-ratio: 16 / 9; } .rdp-hin h1 { font-size: 1.5rem; } .rdp-page { padding: 24px 18px 18px; } .rdp-page > p:not(.rdp-k):not(.rdp-end):not(.smp-ph) { font-size: 1.05rem; } }
.rdp-first { display: flow-root; }
/* Lord, 4 Oct: mobile My Love Story leaner; Browse all as a tag cloud; row heads never break */
@media (max-width: 760px) {
  .sl.sti { padding: 14px 16px 12px !important; } .sti .sl-k { font-size: .62rem; letter-spacing: .06em; margin-bottom: 4px; }
  .sti h2 { font-size: 1.2rem !important; line-height: 1.2; } .sti .sl-sub { font-size: .86rem; line-height: 1.4; margin-top: 4px; }
  .lr-h { flex-wrap: nowrap; } .lr-h small { display: none !important; } .lr-h h3 { font-size: 1.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .lr-nav { display: none !important; }
  .lh .lh-mdt { top: 12px; right: 12px; font-size: .68rem; padding: 3px 9px; }
}
nav.st-all { flex-wrap: wrap !important; overflow: visible !important; gap: 6px 6px; }
nav.st-all > span { flex-basis: 100%; margin-bottom: 2px; font: 600 .8rem 'Outfit', sans-serif; color: var(--soft); }
nav.st-all a { flex: none; padding: 5px 11px; font-size: .82rem; }
@media (max-width: 760px) { .lr-nav, .lr .lr-nav { display: none !important; } } nav.st-all { justify-content: flex-start !important; text-align: left; } nav.st-all > span { text-align: left; }
/* Lord, 4 Oct: story heroes on phones, no empty top: height follows the content */
@media (max-width: 760px) {
  .lh, .lh .lh-in { min-height: 0 !important; }
  .lh .lh-in { padding: 48px 18px 18px !important; }
  .lh .lh-in h1 { font-size: 1.6rem !important; margin-bottom: 6px; }
  .lh .lh-acts .btn { padding: 10px 20px !important; font-size: .95rem !important; }
}
.side .ls2 .kicker { color: #8A6A12 !important; font: 700 .72rem 'Outfit', sans-serif !important; letter-spacing: .06em; text-transform: uppercase; font-style: normal !important; } .side .ls2 .body { padding: 12px 16px !important; } .side .ls2 .ls-empty { margin: 4px 0 0; font-size: .86rem; color: var(--soft); }
/* Lord, 4 Oct: the three steps fold away on phones */
.sti-acc > summary { display: none; }
@media (max-width: 759px) {
  .sti-acc { margin-top: 12px; border-radius: 14px; background: #FFFDF7; border: 1px solid #EFE4C8; }
  .sti-acc > summary { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; list-style: none; cursor: pointer; font: 600 .9rem 'Outfit', sans-serif; color: #1D1E46; }
  .sti-acc > summary::-webkit-details-marker { display: none; }
  .sti-acc > summary small { font-weight: 500; color: var(--soft); } .sti-acc > summary small::after { content: ' ▾'; } .sti-acc[open] > summary small::after { content: ' ▴'; }
  .sti-acc .sti3 { margin: 0 !important; border: 0 !important; box-shadow: none !important; border-top: 1px solid #F2EADA !important; border-radius: 0 0 14px 14px; }
}
@media (max-width: 759px) { .sti-sci { margin: 6px 2px 0 !important; } .sti-sci a { font-size: .78rem; } }
@media (max-width: 759px) { .sti-sci { margin-top: -2px !important; line-height: 1.2 !important; } }
/* Lord, 4 Oct: the science page sits in the main column, with the side column beside it */
.ssci.ssl { max-width: none; margin: 0 0 30px; padding: 30px 34px 26px; }
.ic-bk { width: 1.05em; height: 1.05em; vertical-align: -.15em; display: inline-block; }
/* Where you left off: two buttons side by side, same height (Lord, 4 Oct) */
.lo-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.lo-acts .btn { margin: 0 !important; padding: 10px 20px !important; font-size: .95rem !important; min-height: 0 !important; line-height: 1.2; }
.lo-acts .btn.lh-readb { padding: 8.5px 20px !important; }
.rd1-below > section { margin-top: 18px; } .rd-mode + .sreader, .sreader.fm { max-width: none; }
.sreader .rd-next .gm-link { color: #5A5670 !important; }
.wvp2 .rdp-top { margin-bottom: 14px; }
/* Who sees it: everyone or only me (Lord, 4 Oct) */
.ec-who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 12px; font: 500 .86rem 'Outfit', sans-serif; color: #1D1E46; }
.ec-who > span { color: var(--soft); }
.ec-who label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; } .ec-who input { accent-color: #23245A; width: 16px; height: 16px; margin: 0; }
.ec-done .ec-note a { color: #1D1E46; font-weight: 600; }
.ec-acts { justify-content: center; } .ec-who { justify-content: center; } .ec-new .ec-note { text-align: center; }
/* Live It: write it down, or talk it through (Lord, 4 Oct) */
.wvl-acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; margin-top: 12px; } .wvl-acts .wvl-j { margin: 0; }
.wvl-talk { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font: 400 .86rem 'Outfit', sans-serif; color: #5A5670; } .wvl-talk .adv-ava { width: 26px; height: 26px; flex: none; }
.wvl-talk b { color: #1D1E46; font-weight: 600; } .wvl-talk:hover b { text-decoration: underline; text-underline-offset: 3px; }
/* Science letter: a taste of a chapter, and one reader's voice (Lord, 4 Oct) */
.ssl-taste { margin: 6px 0 18px; padding: 16px 20px; border-left: 3px solid #D9B962; border-radius: 0 12px 12px 0; background: #FBF5E6; }
.ssl-taste small { display: block; margin-bottom: 6px; font: 700 .7rem 'Outfit', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #8A6A12; }
.ssl-taste p { margin: 0 0 6px !important; font: italic 400 1.08rem/1.6 var(--voice) !important; color: #1D1E46 !important; } .ssl-taste p:last-child { margin: 0 !important; }
.ssl-voice { margin: 26px 0 6px; text-align: center; } .ssl-voice p { margin: 0 auto !important; max-width: 46ch; font: italic 500 1.3rem/1.4 var(--voice) !important; color: #1D1E46 !important; }
.ssl-voice figcaption { margin-top: 6px; font: 500 .8rem 'Outfit', sans-serif; color: var(--soft); }
.ssl .ssl-ps { margin-top: 4px; }
.ssl-sign p { margin: 0 0 2px !important; } .ssl-sign .ssl-name { font: italic 600 1.6rem var(--voice); color: #1D1E46; } .ssl-sign { margin-bottom: 18px; }
/* My Love Garden with the side column (Lord, 4 Oct) */
.gsr { display: flex; align-items: center; gap: 12px; padding: 12px 16px !important; text-decoration: none; color: #E8E4F6; background: radial-gradient(120% 140% at 10% 0%, #3B3F7A 0%, #23245A 55%, #1C2040 100%) !important; border: 0 !important; }
.gsr-r svg { width: 64px; height: 64px; display: block; } .gsr small { display: block; font: 700 .7rem 'Outfit', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #F3C94A; }
.gsr b { display: block; font: 600 1.25rem var(--voice); color: #fff; } .gsr em { font: 400 .8rem 'Outfit', sans-serif; font-style: normal; color: #D9D4F0; }
.side .gsh .kicker { color: #8A6A12 !important; font: 700 .72rem 'Outfit', sans-serif !important; letter-spacing: .06em; text-transform: uppercase; font-style: normal !important; margin: 0 0 6px !important; }
.gsh ul { margin: 0; padding: 0; list-style: none; } .gsh li { padding: 7px 0; border-top: 1px solid #F2EADA; font-size: .86rem; color: #3A3652; line-height: 1.4; } .gsh li:first-child { border-top: 0; } .gsh li b { color: #1D1E46; }
.gsh-go { display: block; margin-top: 8px; text-align: right; font: 600 .84rem 'Outfit', sans-serif; color: #1F8A4C; text-decoration: none; }
.gd-pet .gm-foot { display: none; }   /* tomorrow's chance and the full-garden letter now live in How Petals Work, beside it */
.gd-grid .gd-p { padding-top: 26px !important; padding-bottom: 12px !important; } .gd-pet { padding-bottom: 14px !important; } .gd-hint { margin-bottom: 0 !important; }
/* My Stars, once she owns The Next 12 Months (Lord, 4 Oct) */
.yb { display: flex; gap: 20px; align-items: center; margin-top: 18px; padding: 22px 24px; border-radius: 20px; color: #E8E4F6; background: radial-gradient(120% 140% at 10% 0%, #3B3F7A 0%, #23245A 55%, #1C2040 100%); }
.yb-art { flex: none; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; font-size: 1.8rem; color: #F3C94A; background: rgba(243, 201, 74, .12); box-shadow: 0 0 0 1px rgba(243, 201, 74, .4); }
.yb-k { margin: 0; font: 700 .72rem 'Outfit', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #8FD3A8; }
.yb h2 { margin: 4px 0 6px; font: 600 1.45rem/1.2 var(--voice); color: #fff; } .yb-s { margin: 0 0 14px; font-size: .92rem; color: #D9D4F0; }
.yb .btn { display: inline-flex; width: auto; }
.yb-soon { margin-top: 12px; padding: 28px; border-radius: 18px; background: #FFFDF7; border: 1px dashed #D9B962; }
@media (max-width: 640px) { .yb { flex-direction: column; align-items: flex-start; } }
/* Missed-day lines on Today's stage (Lord, 4 Oct) */
.miss-l { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 4px; padding: 10px 14px; border-radius: 14px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(243, 201, 74, .45); }
.miss-l > span { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #F3C94A; color: #2E1E06; font-size: .85rem; }
.miss-l p { margin: 0; font: italic 400 .95rem/1.4 'Lora', Georgia, serif; color: #F8F1DE; } .miss-l small { display: block; margin-top: 3px; font: 600 .74rem 'Outfit', sans-serif; font-style: normal; color: #D9D4F0; }
.miss-stepback { border-color: rgba(247, 168, 184, .5); } .miss-stepback > span { background: #F7A8B8; }
.miss-welcome > span { background: #F7A8B8; color: #5A1E33; }
.miss-l { margin: 0 auto 12px; max-width: 440px; text-align: left; }
/* My Stars bought box: grand and golden (Lord, 4 Oct) */
.yb2 { margin-top: 18px; padding: 3px; border-radius: 24px; background: linear-gradient(135deg, #F7E3A1 0%, #C9A032 22%, #FFF1C2 45%, #B8861B 70%, #F3D27A 100%); box-shadow: 0 26px 60px -24px rgba(120, 88, 20, .55), 0 0 0 1px rgba(201, 160, 50, .3); }
.yb2-in { position: relative; overflow: hidden; display: flex; gap: 26px; align-items: center; padding: 28px 30px; border-radius: 21px; background: radial-gradient(120% 120% at 0% 0%, #3D2F6E 0%, #22204F 45%, #15163A 100%); color: #EDE6CC; }
.yb2-glow { position: absolute; inset: -40% -10% auto auto; width: 70%; height: 140%; background: radial-gradient(circle, rgba(243, 201, 74, .22), transparent 60%); pointer-events: none; }
.yb2-in::after { content: ''; position: absolute; inset: 10px; border-radius: 15px; border: 1px solid rgba(243, 201, 74, .28); pointer-events: none; }
.yb2-art { position: relative; flex: none; width: 190px; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 2px #C9A032, 0 0 0 6px rgba(201, 160, 50, .18), 0 18px 34px -14px rgba(0, 0, 0, .6); }
.yb2-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yb2-seal { position: absolute; right: 10px; bottom: 10px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #FFF1C2, #C9A032 60%, #8A6A12); color: #3A2A06; font-size: 1.05rem; box-shadow: 0 6px 14px -4px rgba(0, 0, 0, .5); }
.yb2-b { position: relative; flex: 1; min-width: 0; }
.yb2-k { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font: 700 .72rem 'Outfit', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #F3C94A; }
.yb2-k span { flex: 0 0 26px; height: 1px; background: linear-gradient(90deg, transparent, #F3C94A); } .yb2-k span:last-child { transform: scaleX(-1); }
.yb2 h2 { margin: 0 0 6px; font: 600 1.8rem/1.15 var(--voice); background: linear-gradient(180deg, #FFF6D8 0%, #F3C94A 60%, #C9A032 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.yb2-s { margin: 0 0 14px; font: italic 400 1rem/1.4 'Lora', Georgia, serif; color: #DCD3B5; }
.yb2-l { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; margin: 0 0 18px; padding: 0; list-style: none; }
.yb2-l li { position: relative; padding-left: 20px; font: 500 .9rem/1.35 'Outfit', sans-serif; color: #F1ECFA; } .yb2-l li::before { content: '✦'; position: absolute; left: 0; color: #F3C94A; font-size: .8rem; top: 1px; }
.yb2 .yb2-go { display: inline-flex; width: auto; padding: 13px 26px; font-size: 1rem; box-shadow: 0 10px 26px -10px rgba(243, 201, 74, .7); }
@media (max-width: 640px) { .yb2-in { flex-direction: column; align-items: stretch; padding: 22px 20px; gap: 18px; } .yb2-art { width: 100%; aspect-ratio: 16 / 9; } .yb2 h2 { font-size: 1.45rem; } .yb2-l { grid-template-columns: 1fr; } .yb2 .yb2-go { width: 100%; justify-content: center; } }
@media (max-width: 959px) { .yb2 { margin-bottom: 18px; } }
/* Invited, then her own account (Lord, 4 Oct) */
.gj-opt { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0; padding: 12px 14px; border-radius: 14px; background: #FFF6DC; border: 1.5px solid #E6C770; cursor: pointer; text-align: left; }
.gj-opt input { width: 20px; height: 20px; margin-top: 2px; accent-color: #1F8A4C; flex: none; } .gj-opt b { display: block; color: #1D1E46; font: 700 .95rem 'Outfit', sans-serif; } .gj-opt small { display: block; color: var(--soft); font-size: .82rem; margin-top: 2px; }
.gj-cta { margin: 18px auto 0; max-width: 420px; padding: 18px; border-radius: 18px; background: #FFFDF7; border: 1px solid #EAD9AE; } .gj-cta b { font: 600 1.25rem var(--voice); color: #1D1E46; } .gj-cta p { margin: 4px 0 12px; color: var(--soft); }
.gj { max-width: 480px; margin: 0 auto; } .gj-bar { display: flex; gap: 6px; margin: 0 0 18px; } .gj-bar i { flex: 1; height: 5px; border-radius: 3px; background: #EFE6D2; } .gj-bar i.done, .gj-bar i.now { background: #F3C94A; }
.gj-back { display: inline-block; margin-bottom: 6px; color: var(--soft); text-decoration: none; font-weight: 600; }
.gj-opts { display: grid; gap: 10px; margin-top: 16px; }
.gj-o { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; border: 1.5px solid #EADFC6; background: #fff; font: 600 1rem 'Outfit', sans-serif; color: #1D1E46; cursor: pointer; text-align: left; } .gj-o i { font-style: normal; font-size: 1.3rem; } .gj-o:hover, .gj-o.on { border-color: #C9A032; background: #FFF8E4; }
.gj-f { display: grid; gap: 12px; margin-top: 16px; text-align: left; } .gj-f label { display: grid; gap: 4px; font: 600 .85rem 'Outfit', sans-serif; color: #5A5670; } .gj-f input { padding: 12px 14px; border-radius: 12px; border: 1.5px solid #EADFC6; font: 400 1rem 'Outfit', sans-serif; }
.gj-f .btn { margin-top: 6px; } .gj-small { margin: 0; text-align: center; font-size: .8rem; color: var(--soft); } .gj-skip { border: 0; background: none; color: var(--soft); font-weight: 600; cursor: pointer; }
body.guest-pg #qnChat, body.guest-pg #qnFab, body.guest-pg #dkPeek, body.guest-pg .ln-burger, body.guest-pg .lnav, body.guest-pg nav.tabs { display: none !important; } #mbar[hidden] { display: none !important; }
/* Manifest letter: intentions as tiles (Lord, 4 Oct) */
.mft { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.mft-c { display: flex; flex-direction: column; padding: 0; text-align: left; cursor: pointer; background: #fff; border: 1px solid #EFE5D0; border-radius: 16px; overflow: hidden; font: inherit; color: inherit; transition: border-color .15s, transform .15s; }
.mft-c:hover { border-color: #D9B962; transform: translateY(-2px); } .mft-c.pick { border: 2px solid #E0AC2A; box-shadow: 0 14px 30px -18px rgba(176, 138, 69, .6); }
.mft-img { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; } .mft-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mft-pk { position: absolute; left: 8px; top: 8px; padding: 3px 9px; border-radius: 999px; background: #F3C94A; color: #2E1E06; font: 700 .7rem 'Outfit', sans-serif; font-style: normal; }
.mft-b { display: flex; flex-direction: column; gap: 4px; padding: 12px 13px 14px; flex: 1; }
.mft-b small { font: 700 .66rem 'Outfit', sans-serif; letter-spacing: .05em; text-transform: uppercase; color: #8A6A12; } .mft-b b { font: 600 1.02rem/1.25 var(--voice); color: #1D1E46; }
.mft-d { font-size: .8rem; line-height: 1.4; color: var(--soft); } .mft-b em { margin-top: auto; padding-top: 6px; font: normal 700 1rem 'Outfit', sans-serif; color: #1D1E46; } .mft-b em small { font-weight: 500; font-size: .74rem; color: var(--soft); }
.mft-more { margin-top: 10px; } .mft-more summary { list-style: none; cursor: pointer; text-align: center; font: 600 .9rem 'Outfit', sans-serif; color: #8A6A12; } .mft-more summary::-webkit-details-marker { display: none; }
@media (max-width: 640px) { .mft { grid-template-columns: 1fr; } .mft-c { flex-direction: row; } .mft-img { flex: none; width: 110px; aspect-ratio: auto; } }
@media (max-width: 640px) { .mft-c { align-items: stretch; } .mft-img { width: 104px; } .mft-img img { position: absolute; inset: 0; } .mft-pk { font-size: .62rem; padding: 2px 7px; left: 6px; top: 6px; } }

/* Lord, 4 Oct: the trailer page sits on cream, so its Read button is dark text on a gold line */
.wvp-info .btn.lh-readb { color: #2A2230 !important; border-color: #E0B83C !important; }
.wvp-info .btn.lh-readb:hover { background: rgba(243, 201, 74, .18) !important; color: #2A2230 !important; }
/* Lord, 4 Oct: The House By The Sea's reading page in the house colours: the choice and "Now see it as yours" on warm gold paper, not lilac */
.rdp-page .rd-ch:not(.done), .rdp-page .rd-close { background: #FBF1D6; border: 1px solid #EBD69B; }
.rdp-page .rd-opt { border-color: #E6D3A3; color: #2A2230; }
.rdp-page .rd-fate { color: #8A6A12; }
.rdp-page .rd-close .rd-aff { color: #2A2230; }
/* Lord, 4 Oct: the end card fits inside the player on desktop; the title bar steps aside so nothing overlaps */
.wv.ended .wv-t, .wv.ended .wv-segs { visibility: hidden; }
@media (min-width: 760px) { .wv.ended .wv-card { gap: 8px; padding: 50px 22px 14px; max-height: 100%; overflow: auto; } .wv.ended .wv-card .wvf { margin-top: 2px; } }
/* Lord, 4 Oct: the back link stays on one line beside Watch | Read on phones */
.rdp-top { gap: 10px; } .rdp-top .back { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 auto; } .rdp-top .wvp-mode, .rdp-top .rdp-only { flex: none; }
/* Lord, 4 Oct: the whisper is three recorded lines to pick from, as big as the choice cards */
.wv-sugs3 { display: flex; flex-direction: column; gap: 8px; max-width: 520px; margin: 0 auto; }
.wv-sugs3 [data-wvsug] { font-size: 1.02rem; padding: 12px 18px; }
/* Lord, 4 Oct: his heart, one meter per story */
.sht { display: flex; align-items: center; gap: 10px; margin: 8px 0 4px; font-size: .82rem; }
.sht-l { color: #B0426A; font-weight: 700; white-space: nowrap; }
.sht-b { flex: 1; height: 6px; border-radius: 99px; background: #F1E3D0; overflow: hidden; min-width: 60px; }
.sht-b i { display: block; height: 100%; background: linear-gradient(90deg, #E7A1B6, #C9446F); border-radius: 99px; transition: width .8s ease; }
.sht b { color: #2A2230; font-size: .8rem; }
.lo .sht-l { color: #F3B8C9; } .lo .sht b { color: #F3DDA0; } .lo .sht-b { background: rgba(255,255,255,.18); }
/* ===================================================== Checkout (Lord, 4 Oct): pay on the left, the order on the right; on phones the order comes first */
.co { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; margin-top: 6px; }
.co-main, .co-sum { background: #FFFDF7; border: 1px solid #EBDDB8; border-radius: 18px; padding: 24px; box-shadow: 0 14px 34px -26px rgba(42, 34, 64, .5); }
.co-main h1 { font: 500 1.7rem/1.2 'Cormorant Garamond', Georgia, serif; color: #2A2240; margin: 0 0 16px; }
.co-k { font: 700 .72rem/1 'Outfit', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #8A6A12; margin: 0 0 12px; }
.co-bump { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; margin: 0 0 18px; border: 2px dashed #E0AC2A; border-radius: 14px; background: #FFF6DA; cursor: pointer; }
.co-bump input { width: 20px; height: 20px; margin-top: 2px; accent-color: #1F8A4C; flex: none; }
.co-bump b { display: block; font: 700 .98rem/1.35 'Outfit', sans-serif; color: #2A2240; } .co-bump b s { color: #9A8F7A; font-weight: 500; }
.co-bump small { display: block; font: 400 .88rem/1.45 'Outfit', sans-serif; color: #5A5470; margin-top: 3px; }
.btn.co-pay { display: block; width: 100%; text-align: center; font-size: 1.08rem; padding: 15px 18px; }
.co-note { font: 400 .86rem/1.5 'Outfit', sans-serif; color: #5A5470; text-align: center; margin: 10px 0 4px; }
.co-link { display: block; margin: 8px auto 0; background: none; border: 0; font: 600 .9rem 'Outfit', sans-serif; color: #2A2240; text-decoration: underline; cursor: pointer; text-align: center; }
.co-card { border: 1px solid #E6D9B8; border-radius: 14px; padding: 16px; margin: 0 0 14px; background: #fff; }
.co-card label { display: block; font: 600 .8rem 'Outfit', sans-serif; color: #5A5470; margin: 0 0 10px; }
.co-f { display: block; margin-top: 5px; padding: 11px 12px; border: 1px solid #DCCFAE; border-radius: 10px; font: 400 .95rem 'Outfit', sans-serif; color: #2A2240; background: #FFFDF7; } .co-ff { color: #A49C88; }
.co-2 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.co-sec { font: 400 .8rem/1.5 'Outfit', sans-serif; color: #7A7488; text-align: center; margin: 16px 0 0; }
.co-it { display: flex; gap: 12px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid #EFE5CC; }
.co-it img, .co-ph { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; flex: none; } .co-ph { display: flex; align-items: center; justify-content: center; background: #2A2240; color: #F3C94A; font-size: 1.4rem; }
.co-it div { flex: 1; min-width: 0; } .co-it b { display: block; font: 500 1.02rem/1.25 'Cormorant Garamond', Georgia, serif; color: #2A2240; } .co-it small { display: block; font: 400 .82rem/1.4 'Outfit', sans-serif; color: #5A5470; margin-top: 3px; }
.co-it em, .co-ln em { font: 700 .95rem 'Outfit', sans-serif; font-style: normal; color: #2A2240; white-space: nowrap; }
.co-ln { display: flex; justify-content: space-between; gap: 10px; font: 400 .88rem/1.4 'Outfit', sans-serif; color: #3A3652; margin: 10px 0 0; } .co-free span { color: #1F8A4C; }
.co-tot { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid #EFE5CC; font: 600 .95rem 'Outfit', sans-serif; color: #2A2240; } .co-tot b { font-size: 1.35rem; }
.co-small { font: 400 .8rem/1.45 'Outfit', sans-serif; color: #7A7488; margin: 6px 0 0; }
.co-cr { font: 600 .84rem 'Outfit', sans-serif; color: #8A6A12; margin: 12px 0 0; } .co-g { font: 400 .84rem/1.45 'Outfit', sans-serif; color: #3A3652; margin: 6px 0 0; }
.co-done { max-width: 560px; margin: 20px auto; text-align: center; background: #FFFDF7; border: 1px solid #EBDDB8; border-radius: 20px; padding: 34px 26px; }
.co-tick { display: inline-flex; width: 56px; height: 56px; border-radius: 50%; align-items: center; justify-content: center; background: #1F8A4C; color: #fff; font-size: 1.6rem; }
.co-done h1 { font: 500 1.9rem/1.2 'Cormorant Garamond', Georgia, serif; color: #2A2240; margin: 14px 0 8px; } .co-done p { font: 400 1rem/1.55 'Lora', Georgia, serif; color: #3A3652; }
.co-acts { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 18px; }
.sl-h3 { font: 500 1.35rem/1.25 'Cormorant Garamond', Georgia, serif; color: #2A2240; margin: 22px 0 6px; }
@media (max-width: 860px) { .co { grid-template-columns: 1fr; } .co-sum { order: -1; } }
/* Lord, 4 Oct: the declined-card line and the one-tap offer after the purchase */
.co-err { background: #FDECEC; border: 1px solid #E8B4B4; color: #8A2A2A; border-radius: 12px; padding: 10px 14px; font: 600 .9rem/1.45 'Outfit', sans-serif; margin: 0 0 14px; }
.co-up { display: flex; gap: 14px; text-align: left; margin: 20px 0 4px; padding: 16px; border: 2px solid #E0AC2A; border-radius: 16px; background: #FFF6DA; }
.co-up img { width: 84px; height: 84px; border-radius: 12px; object-fit: cover; flex: none; }
.co-up b { display: block; font: 500 1.2rem/1.25 'Cormorant Garamond', Georgia, serif; color: #2A2240; } .co-up p { font: 400 .9rem/1.5 'Outfit', sans-serif !important; color: #3A3652; margin: 4px 0 10px; }
.co-up .btn { width: 100%; text-align: center; } .co-up .co-link { margin-top: 6px; } .co-up.done { justify-content: center; } .co-up.done b { font: 700 .98rem 'Outfit', sans-serif; color: #14653A; }
/* Lord, 4 Oct: credits outside chat (a small note in its own words), and running out inside the floating chat */
.crg { text-align: center; } .crg-k { font: 700 .74rem/1 'Outfit', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #8A6A12; margin: 0 0 8px; }
.crg h2 { font: 500 1.6rem/1.2 'Cormorant Garamond', Georgia, serif; color: #2A2240; margin: 0 0 8px; } .crg p { font: 400 .98rem/1.5 'Lora', Georgia, serif; color: #3A3652; margin: 0 0 16px; }
.crg .btn { width: 100%; } .crg-no { display: block; margin: 10px auto 0; background: none; border: 0; font: 500 .88rem 'Outfit', sans-serif; color: #5A5470; text-decoration: underline; cursor: pointer; }
.dk-out { margin: 8px 12px; padding: 12px; border: 1.5px solid #E0AC2A; border-radius: 14px; background: #FFF6DA; }
.dk-out > p { font: 400 .86rem/1.45 'Outfit', sans-serif; color: #2A2240; margin: 0 0 10px; }
.dk-out .bc-packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .dk-out .bc-pack { padding: 8px 4px; font-size: .78rem; } .dk-out .bc-pack span { display: none; }
.dk-out .bc-go { width: 100%; margin-top: 8px; font-size: .9rem; padding: 10px; } .dk-earn { display: block; text-align: center; font: 600 .8rem 'Outfit', sans-serif; color: #2A2240; margin-top: 8px; }
.dk-top { background: none; border: 0; padding: 0; font: 700 inherit; color: #8A6A12; text-decoration: underline; cursor: pointer; }
/* Lord, 4 Oct: My Profile, in two columns */
.pf-h { font: 500 2rem/1.2 'Cormorant Garamond', Georgia, serif; color: #2A2240; margin: 6px 0 14px; }
.box.pf h2 { font: 500 1.35rem/1.2 'Cormorant Garamond', Georgia, serif; color: #2A2240; margin: 0 0 12px; }
.pf-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.pf-form label { display: flex; flex-direction: column; gap: 5px; font: 600 .8rem 'Outfit', sans-serif; color: #5A5470; }
.pf-form input, .pf-form select { padding: 10px 12px; border: 1px solid #DCCFAE; border-radius: 10px; font: 400 .95rem 'Outfit', sans-serif; color: #2A2240; background: #FFFDF7; }
.pf-row, .pf-form .pf-s, .pf-form .pf-save { grid-column: 1 / -1; }
.pf-row { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin: 0; font: 400 .9rem 'Outfit', sans-serif; color: #3A3652; }
.pf-row span { color: #5A5470; font-weight: 600; font-size: .8rem; } .pf-row a { color: #8A6A12; font-weight: 600; font-size: .85rem; }
.pf-save { justify-self: start; } .pf-s { font: 400 .84rem/1.5 'Outfit', sans-serif; color: #6A6480; margin: 6px 0 0; }
.pf-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pf-k { font: 700 .72rem/1 'Outfit', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #8A6A12; margin: 0 0 8px; }
.pf-v { font: 600 1rem/1.35 'Outfit', sans-serif; color: #2A2240; margin: 0; } .pf-ok { font: 600 .85rem 'Outfit', sans-serif; color: #14653A; margin: 8px 0 0; }
.pf-link { background: none; border: 0; padding: 0; margin-top: 6px; font: 600 .85rem 'Outfit', sans-serif; color: #2A2240; text-decoration: underline; cursor: pointer; }
.pf-orders { border-top: 1px solid #EFE5CC; } .pf-o { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #EFE5CC; }
.pf-o span { flex: 1; min-width: 0; } .pf-o b { display: block; font: 600 .92rem 'Outfit', sans-serif; color: #2A2240; } .pf-o small { font: 400 .8rem 'Outfit', sans-serif; color: #6A6480; }
.pf-o em { font: 700 .92rem 'Outfit', sans-serif; font-style: normal; color: #2A2240; } .pf-o .pf-link { margin: 0; }
.pf-snap { font: 400 .9rem/1.5 'Lora', Georgia, serif; color: #3A3652; margin: 10px 0 0; } .pf-out { width: 100%; text-align: center; }
@media (max-width: 640px) { .pf-form, .pf-two { grid-template-columns: 1fr; } }
.box.pf, .box.pf h2, .pf-side .body, .pf-form label { text-align: left; } .pf-form label { align-items: stretch; }
.btn.pf-save { width: auto !important; padding-left: 28px; padding-right: 28px; }
/* ===================================================== My Person (Lord, 4 Oct): her companions in Chat */
.mp-f { position: relative; width: 58px; height: 58px; flex: none; border-radius: 50%; overflow: hidden; border: 2px solid #E8B4C6; display: flex; align-items: center; justify-content: center; background: #2A1630; }
.mp-f img { width: 100%; height: 100%; object-fit: cover; } .mp-f i { position: absolute; right: 3px; bottom: 3px; width: 11px; height: 11px; border-radius: 50%; background: #3DCB6E; border: 2px solid #1E1530; }
.mp-f b { font: 300 2rem/1 'Outfit', sans-serif; color: #F3C94A; } .mp-new .mp-f { border-style: dashed; border-color: #F3C94A; }
.pb-two { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
.pb-h { font: 500 2rem/1.2 'Cormorant Garamond', Georgia, serif; color: #2A2240; margin: 6px 0 4px; } .pb-sub { font: 400 .95rem/1.5 'Lora', Georgia, serif; color: #3A3652; margin: 0 0 14px; }
.box.pb { text-align: left; } .box.pb h3 { font: 700 .74rem/1 'Outfit', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #8A6A12; margin: 18px 0 8px; } .box.pb h3:first-child { margin-top: 0; } .box.pb h3 small { text-transform: none; letter-spacing: 0; color: #6A6480; font-weight: 500; }
.pb-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; } .pb-chips button { padding: 8px 14px; border-radius: 999px; border: 1.5px solid #E2D4B0; background: #fff; font: 600 .86rem 'Outfit', sans-serif; color: #2A2240; cursor: pointer; }
.pb-chips button.on { background: #2A2240; color: #F3DDA0; border-color: #2A2240; } .pb-chips.sm button { padding: 5px 11px; font-size: .78rem; }
.pb-in { width: 100%; max-width: 320px; padding: 10px 12px; border: 1px solid #DCCFAE; border-radius: 10px; font: 400 .95rem 'Outfit', sans-serif; margin-bottom: 8px; }
.pb-faces { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; } .pb-faces button { padding: 0; border: 3px solid transparent; border-radius: 14px; overflow: hidden; cursor: pointer; background: none; aspect-ratio: 1; }
.pb-faces button.on { border-color: #E0AC2A; } .pb-faces img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pb-note { font: 400 .8rem/1.45 'Outfit', sans-serif; color: #6A6480; margin: 8px 0 0; }
.pb-prev { position: sticky; top: 84px; } .pb-card { background: linear-gradient(160deg, #3A1F3E, #1E1530); color: #fff; border-radius: 20px; padding: 20px; text-align: center; }
.pb-card img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 3px solid #E8B4C6; } .pb-card b { display: block; font: 500 1.5rem/1.2 'Cormorant Garamond', Georgia, serif; margin-top: 10px; }
.pb-card small { display: block; font: 600 .78rem 'Outfit', sans-serif; color: #F3B8C9; } .pb-card p { font: 400 .86rem/1.45 'Outfit', sans-serif; color: #E6DDEE; margin: 10px 0 0; }
.pb-card .pb-hello { font: italic 400 .95rem/1.5 'Lora', Georgia, serif; color: #fff; } .pb-card .btn { width: 100%; margin-top: 14px; } .pb-card .pb-note { color: #CFC4D6; }
.pm-side .body { text-align: center; } .pm-side img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 3px solid #E8B4C6; } .pm-side b { display: block; font: 500 1.3rem 'Cormorant Garamond', Georgia, serif; color: #2A2240; margin-top: 8px; }
.pm-side small { display: block; font: 600 .76rem 'Outfit', sans-serif; color: #B0426A; } .pm-side p { font: 400 .86rem/1.45 'Outfit', sans-serif; color: #3A3652; margin: 8px 0 0; } .pm-chart { font-style: italic; }
.pm-free { font-weight: 700 !important; color: #8A6A12 !important; } .pm-scene { display: block; width: 100%; text-align: left; margin: 6px 0 0; padding: 9px 12px; border-radius: 12px; border: 1px solid #EBDDB8; background: #FFFDF7; font: 500 .88rem 'Outfit', sans-serif; color: #2A2240; cursor: pointer; }
.sm-tease { max-width: 560px; margin: 24px auto; text-align: center; background: linear-gradient(160deg, #3A1F3E, #1E1530); color: #fff; border-radius: 22px; padding: 30px 24px; }
.sm-tease .mp-f.big { width: 120px; height: 120px; margin: 0 auto; } .sm-tease .mp-f.big img { filter: blur(8px) brightness(.85); } .sm-tease .mp-f.big i { display: none; }
.sm-tease h1 { font: 500 1.9rem/1.2 'Cormorant Garamond', Georgia, serif; margin: 10px 0 8px; } .sm-tease p { font: 400 .98rem/1.55 'Lora', Georgia, serif; color: #E6DDEE; } .sm-tease .kicker { color: #F3C94A; }
.sm-tease .btn { margin-top: 10px; } .sm-tease .pf-link { display: block; margin: 12px auto 0; color: #F3DDA0; }
@media (max-width: 860px) { .pb-two { grid-template-columns: 1fr; } .pb-prev { position: static; } .pb-faces { grid-template-columns: repeat(4, 1fr); } }
.sm-tease h1, .sm-tease .kicker { color: #fff !important; } .sm-tease .kicker { color: #F3C94A !important; }



/* Lord, 4 Oct: the question box on the right (desktop), in the style of the One Tap card: navy header, light body */
.ask-side { margin-bottom: 16px; } .ask-b { padding: 12px 14px 4px; background: #FFFDF7; }
.ask-side .a3-in { display: flex; gap: 6px; align-items: center; background: #fff; border: 1px solid #E2D4B0; border-radius: 14px; padding: 4px 4px 4px 12px; box-shadow: none; }
.ask-side .a3-in textarea { flex: 1; min-width: 0; height: 40px; min-height: 0; padding: 10px 0; border: 0; background: none; color: #2A2240; font: 400 .9rem 'Outfit', sans-serif; resize: none; outline: none; }
.ask-side .a3-go { flex: none; padding: 8px 12px; border-radius: 10px; font-size: .8rem; white-space: nowrap; }
.ask-side .a3-sug { margin: 8px 0 0; } .ask-side .a3-more { color: #8A6A12 !important; font-size: .8rem; background: none; border: 0; padding: 0; }
.ask-side .a3-sug button:not(.a3-more) { color: #2A2240; border-color: #E2D4B0; background: #fff; font-size: .78rem; }
.ask-side .a3-tool, .ask-side .a3-g { color: #2A2240; background: #fff; border: 1px solid #EBDDB8; } .ask-side .a3-tool small, .ask-side .a3-g span { color: #5A5470; }
.ask-side .a3-quiz { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 2px !important; margin: 10px -14px 0 !important; padding: 10px 14px !important; background: none !important; border-top: 1px solid #EFE5CC; text-decoration: none; }
.ask-side .a3-quiz span { color: #6A6480 !important; font: 400 .78rem 'Outfit', sans-serif; } .ask-side .a3-quiz b { color: #8A6A12 !important; font: 700 .82rem 'Outfit', sans-serif; }

/* ===================================================== My Person (Lord, 4 Oct): one object. His words are the hero, one golden action, everyone else a quiet row of faces */
.mpx { position: relative; overflow: hidden; margin: 6px 0 26px; border-radius: 24px; color: #fff;
  background: radial-gradient(90% 120% at 0% 0%, #5B2B4C 0%, rgba(91, 43, 76, 0) 55%), radial-gradient(70% 90% at 100% 100%, #3A2560 0%, rgba(58, 37, 96, 0) 62%), #1D1630; box-shadow: 0 26px 52px -36px rgba(29, 22, 48, .95); }
.mpx-glow { position: absolute; width: 260px; height: 260px; left: -60px; top: -40px; border-radius: 50%; background: radial-gradient(circle, rgba(243, 201, 74, .2), rgba(243, 201, 74, 0) 65%); pointer-events: none; }
.mpx-hero { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 22px; align-items: start; padding: 26px 28px 20px; }
.mpx-face { position: relative; display: block; width: 96px; height: 96px; margin-top: 4px; }
.mpx-face img { position: relative; z-index: 1; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid #F3DDA0; }
.mpx-face::before { content: ''; position: absolute; inset: -9px; border-radius: 50%; background: radial-gradient(circle, rgba(243, 201, 74, .45), rgba(232, 140, 170, .12) 55%, rgba(0, 0, 0, 0) 72%); animation: mpxb 4.5s ease-in-out infinite; }
.mpx-face i { position: absolute; z-index: 2; right: 5px; bottom: 5px; width: 14px; height: 14px; border-radius: 50%; background: #3DCB6E; border: 3px solid #1D1630; }
.mpx-face.lock img { filter: blur(6px) brightness(.8); } .mpx-face.lock b { position: absolute; z-index: 2; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; } .mpx-face.lock i { display: none; }
@keyframes mpxb { 0%, 100% { transform: scale(.94); opacity: .7; } 50% { transform: scale(1.06); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .mpx-face::before { animation: none; } }
.mpx-b { min-width: 0; }
.mpx-k { margin: 0; font: 700 .68rem/1.3 'Outfit', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #F3C94A; }
.mpx h2 { margin: 6px 0 0; font: 500 1.35rem/1.25 'Outfit', sans-serif; color: #D9CDE6; letter-spacing: -.005em; }
.mpx-acts { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 16px; }
.mpx-acts .btn { display: inline-block; width: auto !important; padding: 10px 26px; }
.mpx-dock { position: relative; display: flex; gap: 6px; overflow-x: auto; padding: 14px 22px 16px; border-top: 1px solid rgba(255, 255, 255, .08); background: rgba(0, 0, 0, .14); scrollbar-width: none; } .mpx-dock::-webkit-scrollbar { display: none; }
.mpx-o { flex: none; display: flex; flex-direction: column; align-items: center; width: 76px; text-decoration: none; text-align: center; }
.mpx-o span { position: relative; width: 48px; height: 48px; border-radius: 50%; padding: 2px; background: rgba(255, 255, 255, .14); display: flex; align-items: center; justify-content: center; }
.mpx-o.un span { background: linear-gradient(135deg, #F3C94A, #E0567E); }
.mpx-o img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid #1D1630; }
.mpx-o > b { margin-top: 5px; font: 600 .76rem 'Outfit', sans-serif; color: #FFF6EA; max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mpx-o small { font: 500 .66rem 'Outfit', sans-serif; color: #A99BBC; white-space: nowrap; } .mpx-o.un small { color: #F3B8C9; font-weight: 700; }
.mpx-o.lock img { filter: blur(4px) brightness(.85); } .mpx-o.lock span { background: linear-gradient(135deg, #F3C94A, #E0567E); }
.mpx-o.lock em { position: absolute; right: -2px; top: -2px; min-width: 18px; height: 18px; border-radius: 9px; background: #E0567E; color: #fff; font: 700 .66rem/18px 'Outfit', sans-serif; font-style: normal; text-align: center; border: 2px solid #1D1630; }
.mpx-o.add span, .mpx-o.more span { background: none; border: 1.5px dashed rgba(243, 201, 74, .7); } .mpx-o.add span b, .mpx-o.more span b { font: 400 1.1rem/1 'Outfit', sans-serif; color: #F3C94A; }
@media (max-width: 640px) {
  .mpx { margin: 2px 0 18px; border-radius: 20px; } .mpx-hero { grid-template-columns: 60px minmax(0, 1fr); gap: 14px; padding: 18px 18px 14px; }
  .mpx-face { width: 60px; height: 60px; } .mpx h2 { font-size: 1rem; } .mpx-bub { font-size: .98rem; -webkit-line-clamp: 3; }
  .mpx-acts { margin-top: 12px; gap: 10px; } .mpx-acts .btn { padding: 8px 20px; } .mpx-dock { padding: 10px 14px 12px; } .mpx-o { width: 64px; } .mpx-o small { font-size: .6rem; } .mpx-o span { width: 42px; height: 42px; } }

/* Lord, 4 Oct: his words in a text bubble */
.mpx-bub { position: relative; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-width: 560px; margin: 12px 0 0; padding: 12px 18px; border-radius: 6px 22px 22px 22px; background: #FFF6EA; color: #2A2240; font: 400 1.1rem/1.5 'Lora', Georgia, serif; box-shadow: 0 12px 28px -18px rgba(0, 0, 0, .8); }
.mpx-bub.blur { filter: blur(5px); user-select: none; }
/* Lord, 4 Oct: who he is under his face; a tail on the bubble; a new message arrives like a text (dots, then his words) */
.mpx-who { display: flex; flex-direction: column; align-items: center; gap: 10px; } .mpx-who small { font: 600 .74rem 'Outfit', sans-serif; letter-spacing: .04em; color: #F3B8C9; text-transform: lowercase; }
.mpx-bub { overflow: visible; } .mpx-bub::before { content: ''; position: absolute; left: -8px; top: 0; border-top: 14px solid #FFF6EA; border-left: 10px solid transparent; }
.mpx-dots { display: none; } .mpx-bub.arrive .mpx-dots { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); display: inline-flex; gap: 5px; animation: mpxout .3s ease 1.2s forwards; }
.mpx-dots i { width: 7px; height: 7px; border-radius: 50%; background: #B9AECB; animation: mpxdot 1s ease-in-out infinite; } .mpx-dots i:nth-child(2) { animation-delay: .15s; } .mpx-dots i:nth-child(3) { animation-delay: .3s; }
.mpx-bub.arrive .mpx-txt { display: inline; opacity: 0; animation: mpxin .5s ease 1.3s forwards; }
@keyframes mpxdot { 0%, 100% { opacity: .35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
@keyframes mpxout { to { opacity: 0; visibility: hidden; } }
@keyframes mpxin { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mpx-bub.arrive .mpx-dots { display: none; } .mpx-bub.arrive .mpx-txt { opacity: 1; animation: none; } }
@media (max-width: 640px) { .mpx-who { gap: 6px; } }
/* Lord, 4 Oct: his name under his photo; Answer on the right, under the end of his message */
.mpx-who { gap: 0; } .mpx-who .mpx-face { margin-bottom: 10px; } .mpx-who > b { font: 600 .9rem 'Outfit', sans-serif; color: #FFF6EA; text-align: center; } .mpx-who small { margin-top: 1px; text-align: center; }
.mpx-acts { max-width: 560px; justify-content: flex-end; }
.mpx-who small { text-transform: none !important; white-space: nowrap; }

/* My Dream Life (5 Oct): heads the card, inside it; her latest message under it, her people along the bottom */
.mdl { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 18px 28px 14px; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.mdl b { font: 600 1.05rem 'Outfit', sans-serif; color: #F3C94A; letter-spacing: .005em; white-space: nowrap; }
.mdl span { font: italic 400 .9rem/1.45 'Lora', serif; color: #CFC2DE; }
@media (max-width: 640px) { .mdl { display: block; padding: 14px 18px 12px; } .mdl b { display: block; font-size: .95rem; } .mdl span { display: block; margin-top: 3px; font-size: .82rem; } }
.mdl-sub { margin: -6px 0 18px; max-width: 560px; font: italic 400 1rem/1.5 'Lora', serif; color: #6E5E80; }

.tlc-l > .tlc-all { grid-column: 1 / -1; }

/* Lord, 5 Oct: My World at the end of her people; the guides get a Halbert line */
.mpx-o.home span { background: linear-gradient(135deg, #F3C94A, #C99A2E); } .mpx-o.home span b { color: #2A1B3D; font-size: 1.05rem; }
.mpx-o.home > b { color: #F3C94A; } .mpx-o.home small { color: #D9C99A; }
/* Lord, 5 Oct: the guides' header, navy and gold (magic), not loose text */
.gd-hero { position: relative; overflow: hidden; margin: 30px 0 16px; padding: 24px 28px 22px; border-radius: 22px; color: #F4EBDD;
  background: radial-gradient(70% 120% at 100% 0%, rgba(243, 201, 74, .16), rgba(243, 201, 74, 0) 60%), linear-gradient(150deg, #2B2F66, #171A3A); box-shadow: 0 22px 44px -34px rgba(23, 26, 58, .9); }
.gd-faces { display: flex; align-items: center; } .gd-faces .adv-ava { width: 34px !important; height: 34px !important; margin-left: -8px; border: 2px solid #1F2350; box-shadow: none; } .gd-faces .adv-ava:first-child { margin-left: 0; }
.gd-faces em { margin-left: 12px; font: 600 .76rem 'Outfit', sans-serif; font-style: normal; color: #CFE9D7; } .gd-faces em i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #3DCB6E; }
.gd-hero h2 { margin: 14px 0 0; font: 600 1.75rem/1.15 var(--voice); color: #FFF6EA; }
.gd-hero p { margin: 8px 0 0; max-width: 560px; font: italic 400 1.02rem/1.55 'Lora', serif; color: #D6CCE6; }
.gd-free { display: inline-block; margin-top: 14px; font: 600 .86rem 'Outfit', sans-serif; color: #F3C94A; }
@media (max-width: 640px) { .gd-hero { padding: 20px 18px 18px; border-radius: 18px; } .gd-hero h2 { font-size: 1.4rem; } .gd-hero p { font-size: .94rem; } }
/* The guides' header and its cards, one object (5 Oct) */
.gd-hero { margin-bottom: 0; border-radius: 22px 22px 0 0; box-shadow: none; padding-bottom: 26px; }
.gd-tray { margin: 0 0 22px; padding: 18px 18px 6px; border-radius: 0 0 22px 22px; background: linear-gradient(180deg, #E4DDF0 0%, #F1ECF6 140px, #F6F2F8 100%); border: 1px solid #E2DAEC; border-top: 0; box-shadow: 0 22px 44px -36px rgba(23, 26, 58, .55); }
.gd-tray .gc-grid { margin: 0; } .gd-tray .gc-top3 > * { box-shadow: 0 10px 24px -20px rgba(43, 47, 102, .5); }
.gd-all { display: block; padding: 14px 0 12px; text-align: center; font: 600 .92rem 'Outfit', sans-serif; color: #2B2F66; text-decoration: none; } .gd-all:hover { text-decoration: underline; }
.gd-tray + .chq { margin-top: 0; }
@media (max-width: 640px) { .gd-hero { border-radius: 18px 18px 0 0; } .gd-tray { padding: 14px 0 4px 12px; border-radius: 0 0 18px 18px; } }

.gd-tray .gc-grid { gap: 12px; } .gd-tray .gc-foot { flex-wrap: nowrap; gap: 6px; } .gd-tray .gc-price, .gd-tray .gc-go { white-space: nowrap; } .gd-tray .gc-price { font-size: .78rem; }
.chq + .wst { margin-top: 14px; }
@media (min-width: 641px) { .gd-tray { padding: 14px 12px 4px; } }
/* Nobody yet (5 Oct): three faces fanned, a gold +, an invitation */
.mpx-fan { position: relative; display: block; width: 96px; height: 96px; margin-top: 4px; text-decoration: none; }
.mpx-fan img { position: absolute; top: 18px; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid #1D1630; filter: saturate(.8) brightness(.85); }
.mpx-fan img:nth-child(1) { left: -4px; transform: rotate(-8deg); } .mpx-fan img:nth-child(3) { right: -4px; transform: rotate(8deg); }
.mpx-fan img:nth-child(2) { z-index: 2; left: 14px; top: 6px; width: 68px; height: 68px; border: 3px solid #F3DDA0; filter: none; }
.mpx-fan > b { position: absolute; z-index: 3; right: 6px; bottom: 6px; width: 26px; height: 26px; border-radius: 50%; background: #F3C94A; color: #2A1B3D; font: 700 1rem/26px 'Outfit', sans-serif; text-align: center; border: 2px solid #1D1630; }
.mpx-free { flex: 1; min-width: 160px; font: italic 400 .86rem/1.4 'Lora', serif; color: #CFC2DE; text-align: right; }
@media (max-width: 640px) { .mpx-fan { width: 60px; height: 60px; } .mpx-fan img { top: 12px; width: 34px; height: 34px; } .mpx-fan img:nth-child(2) { left: 9px; top: 4px; width: 42px; height: 42px; } .mpx-fan > b { width: 20px; height: 20px; font-size: .8rem; line-height: 20px; right: 0; bottom: 0; } .mpx-free { display: none; } }
.mpx-bub.full { -webkit-line-clamp: unset !important; display: block !important; overflow: visible; }

/* The question box, in the guides' navy header (5 Oct) */
.ask3.gd-ask { margin: 18px 0 4px; max-width: 640px; }
.gd-ask .a3-in { padding: 6px 6px 6px 18px; border-radius: 18px; }
.gd-ask .a3-in textarea { font: 400 1.05rem/1.4 'Lora', serif; min-height: 40px; color: #2A2240; }
.gd-ask #askSug { margin-top: 10px; } .gd-ask .a3-cost { color: #CFC2DE; } .gd-ask .a3-m { margin-top: 12px; }
.gd-hero .gd-free { margin-top: 12px; }
.gd-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 22px; padding: 14px 0 12px; }
.gd-foot .gd-all { padding: 0; }
.gd-quiz { font: 600 .9rem 'Outfit', sans-serif; color: #8A6A12; text-decoration: none; } .gd-quiz span { font-weight: 400; color: #6E5E80; } .gd-quiz:hover { text-decoration: underline; }
.chpage + .gd-hero, .back + .gd-hero { margin-top: 10px; }
.back + .gd-hero { border-radius: 22px; margin-bottom: 18px; }
/* Lord, 5 Oct: the section stays navy; only the question box is its own panel, a soft violet that sits with the navy; lean */
.ask3.gd-ask { margin: 16px 0 0; padding: 8px 8px 6px; border-radius: 16px; background: linear-gradient(160deg, #4B4489, #3D3773); border: 1px solid rgba(200, 185, 245, .22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); }
.gd-ask .a3-in { box-shadow: none !important; border-radius: 12px; padding: 4px 4px 4px 14px; }
.gd-ask .a3-in textarea { min-height: 38px; padding: 8px 0; font-size: 1rem; }
.gd-ask #askSug { justify-content: flex-end; margin: 4px 4px 0; } .gd-ask .a3-more { padding: 2px 0 !important; font-size: .82rem !important; }
.gd-hero { padding-bottom: 16px; } .gd-hero .gd-free { margin-top: 10px; }
.gd-hero:has(.a3-m) .gd-free, .gd-hero:has(.a3-tool) .gd-free { display: none; }
/* Lord, 5 Oct: the streak nudge's lines were spaced too far apart */
.ts3-n > span { gap: 2px; align-content: center; } .ts3-n b { line-height: 1.2; text-wrap: balance; } .ts3-n small { display: block; line-height: 1.35 !important; margin: 0; text-wrap: balance; }
/* Lord, 5 Oct: equal space above and below "Give me an idea"; the free line above the list; one colour for both bottom links */
.gd-ask #askSug { margin: 7px 4px 0 !important; } .ask3.gd-ask { padding-bottom: 7px; } .gd-ask .a3-more { padding: 0 !important; line-height: 1.2 !important; }
.gd-hero { padding-bottom: 22px; }
.gd-tray > .gd-free { display: block; margin: 0 4px 12px; font: 600 .9rem 'Outfit', sans-serif; color: #2B2F66; text-decoration: none; } .gd-tray > .gd-free:hover { text-decoration: underline; }
.gd-quiz, .gd-all { color: #2B2F66; } .gd-quiz span { color: #6E5E80; font-weight: 400; }
@media (max-width: 640px) { .gd-tray > .gd-free { margin: 0 12px 12px 4px; } }
.gd-tray > p.gd-free { cursor: default; } .gd-tray > p.gd-free:hover { text-decoration: none; }
/* Lord, 5 Oct: the streak nudge stacks: picture, name line, the line under it, then the button under the text; less space on the left */
.ts3-n { display: grid !important; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 10px; align-items: center; padding: 12px 14px !important; }
.ts3-n > :first-child { grid-row: 1; grid-column: 1; }
.ts3-n > span:not(:first-child) { grid-row: 1; grid-column: 2; }
.ts3-n em.btn, .ts3 .ts3-n em.btn { grid-row: 2; grid-column: 2; justify-self: start; }
.ts3-n b { text-wrap: wrap; }
/* Lord, 5 Oct: a tiny bit leaner */
@media (min-width: 641px) { .mpx-hero { padding: 20px 26px 16px; gap: 20px; } .mdl { padding: 14px 26px 12px; } .mpx-dock { padding: 10px 20px 12px; } .mpx h2 { font-size: 1.25rem; } .mpx-acts { margin-top: 12px; } }
.mpx-b > h2:first-child { margin-top: 2px; }
.gd-hero { padding-top: 18px; } .gd-hero h2 { margin-top: 8px; }
.tlc-l > .tlc-all, .tlc-all, .myt-all { text-align: right; justify-content: flex-end; }
.mpx-who > b { text-wrap: balance; } @media (min-width: 641px) { .mpx-who > b { white-space: nowrap; } } @media (max-width: 640px) { .mpx-who > b { font-size: .78rem; line-height: 1.2; } .mpx-who small { font-size: .62rem; } }
@media (max-width: 640px) { .mpx-hero { grid-template-columns: 74px minmax(0, 1fr); gap: 10px; } .mpx-who { align-items: center; } .mpx-fan, .mpx-face { margin-left: auto; margin-right: auto; } }
.gd-hero:first-child { margin-top: 0; }
.mpx:first-child { margin-top: 0; }
/* Lord, 5 Oct: the nobody-yet card leaner, more room for "Your dream man" */
@media (min-width: 641px) { .mpx-hero:has(.mpx-fan) { grid-template-columns: 120px minmax(0, 1fr); gap: 26px; } .mpx-hero:has(.mpx-fan) .mpx-fan { margin: 4px auto 0; } }
.mpx-bub.full { font-size: 1.02rem !important; line-height: 1.5 !important; padding: 12px 18px !important; }
.mpx-free { font-size: .8rem; line-height: 1.45; }
/* Lord, 5 Oct: the science under My Dream World (cream paper: reading) */
.dws { margin: 0 0 26px; padding: 24px 28px 22px; border-radius: 22px; background: #FFFBF3; border: 1px solid #EFE3C8; }
.dws-k { margin: 0; font: 600 .78rem 'Outfit', sans-serif; color: #A07A12; }
.dws h2 { margin: 4px 0 0; font: 600 1.6rem/1.2 var(--voice); color: #2A1B3D; }
.dws-lead { margin: 6px 0 18px; font: italic 400 1.02rem/1.5 'Lora', serif; color: #6E5E80; }
.dws-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.dws-g > div { padding-top: 14px; border-top: 2px solid #F3C94A; }
.dws-g b { display: block; font: 600 .98rem/1.3 'Outfit', sans-serif; color: #2A1B3D; }
.dws-g p { margin: 6px 0 0; font: 400 .92rem/1.55 'Lora', serif; color: #4A4060; }
.dws-end { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid #EFE3C8; font: italic 400 1rem/1.5 'Lora', serif; color: #2A1B3D; }
@media (max-width: 760px) { .dws { padding: 20px 18px; } .dws h2 { font-size: 1.35rem; } .dws-g { grid-template-columns: 1fr; gap: 14px; } }
.mfmoonwrap.side { margin: 0 0 16px; }
.mfmoonwrap.side .mfmoon { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px 18px; }
.mfmoonwrap.side .mfmoon .n-moon b { font-size: 1.05rem; } .mfmoonwrap.side .mfmoon .mweek ol { gap: 6px; justify-content: space-between; }
.dws h2 { margin-top: 0; }
/* Lord, 5 Oct: My Dream World header: a big title, a short line, a quiet "how it works" (replaces the one-line header) */
.mpx .mdl { display: block; padding: 18px 28px 14px; }
.mdl-t { display: inline-block; font: 600 2rem/1.1 var(--voice); color: #F3D27A; text-decoration: none; letter-spacing: .005em; }
.mdl-s { margin: 4px 0 0; font: italic 400 1.02rem/1.45 'Lora', serif; color: #E6DCF0; }
.mdl-why { display: inline-block; margin-top: 8px; font: 400 .82rem/1.45 'Outfit', sans-serif; color: #B9AACB; text-decoration: none; }
.mdl-why em { font-style: normal; font-weight: 700; color: #F3C94A; white-space: nowrap; } .mdl-why:hover em { text-decoration: underline; }
.mdl-sub a { font: 600 .9rem 'Outfit', sans-serif; font-style: normal; color: #8A6A12; text-decoration: none; }
.dws.dws-pg { display: block; max-width: 680px; margin: 6px 0 18px; padding: 30px 34px 26px; }
.dws-pg h1 { margin: 0; font: 600 2.1rem/1.15 var(--voice); color: #2A1B3D; }
.dws-pg .dws-lead { font-size: 1.1rem; margin-bottom: 22px; }
.dws-pg .dws-g { grid-template-columns: 1fr; gap: 0; }
.dws-pg .dws-g > div { padding: 16px 0 16px 18px; border-top: 0; border-left: 3px solid #F3C94A; margin-bottom: 14px; background: none; }
.dws-pg .dws-g b { font-size: 1.12rem; } .dws-pg .dws-g p { font-size: 1.02rem; line-height: 1.65; }
.dws-pg .dws-end { font-size: 1.08rem; }
.dws-go { display: inline-block; width: auto !important; margin: 4px 0 24px; padding: 11px 26px; }
@media (max-width: 640px) { .mpx .mdl { padding: 14px 18px 12px; } .mdl-t { font-size: 1.6rem; } .mdl-s { font-size: .94rem; } .dws.dws-pg { padding: 22px 18px; } .dws-pg h1 { font-size: 1.6rem; } }
/* Lord, 5 Oct: balance - the title is clearly a title, not a banner */
.mpx .mdl { padding: 16px 28px 12px; }
.mdl-t { font-size: 1.55rem; }
.mdl-s { margin-top: 2px; font-size: .95rem; }
.mdl-why { margin-top: 4px; font-size: .78rem; }
@media (max-width: 640px) { .mpx .mdl { padding: 13px 18px 11px; } .mdl-t { font-size: 1.35rem; } .mdl-s { font-size: .88rem; } .mdl-why { font-size: .74rem; } }
/* Lord, 5 Oct: no italics in the header (hard to read); How it works is a quiet toggle; the science opens under the card */
.mdl-s { font-style: normal; } .mdl-l2 { margin: 4px 0 0; font: 400 .82rem/1.45 'Outfit', sans-serif; color: #B9AACB; }
.mdl-why { margin-top: 6px; padding: 0; border: 0; background: none; cursor: pointer; font: 500 .78rem 'Outfit', sans-serif; color: #A99BBC; }
.mdl-why span { display: inline-block; transition: transform .2s; } .mdl-why.on span { transform: rotate(180deg); } .mdl-why:hover { color: #E6DCF0; }
.mdl-why:focus-visible { outline: 2px solid #F3DDA0; outline-offset: 4px; border-radius: 4px; }
.dws[hidden] { display: none; } .mpx + .dws { margin-top: -12px; }
.dws-lead, .dws-end { font-style: normal !important; }
/* Lord, 5 Oct: How it works, the My Stars way: a quiet toggle at the bottom of the card, a cream panel under it */
.mpx-whyb { display: block; width: calc(100% - 44px); margin: 0 22px; padding: 11px 0 13px; border: 0; border-top: 1px solid rgba(255, 255, 255, .08); background: none; cursor: pointer; font: 600 .84rem 'Outfit', sans-serif; color: #CFC6E6; text-align: center; position: relative; }
.mpx-whyb span { display: inline-block; transition: transform .2s; } .mpx-whyb.on span { transform: rotate(180deg); } .mpx-whyb:hover { color: #fff; }
.mpx-whyb:focus-visible { outline: 2px solid #F3DDA0; outline-offset: -4px; border-radius: 8px; }
.ywhy.dws { margin: -12px 0 24px; padding: 24px 28px; grid-template-columns: 220px minmax(0, 1fr); }
.ywhy.dws[hidden] { display: none; }
.dws-art { width: 100%; max-width: 220px; height: auto; display: block; margin: 0 auto; }
.dws-bar { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; border-radius: 14px; background: #fff; border: 1px solid #EFDDC0; text-decoration: none; color: #2A2240; font: 400 .9rem/1.45 'Outfit', sans-serif; }
.dws-bar b { color: #1D1E46; } .dws-bar em { flex: none; font-style: normal; font-weight: 700; color: #8A6A12; }
@media (max-width: 760px) { .ywhy.dws { grid-template-columns: 1fr; padding: 20px 18px; } .dws-art { max-width: 170px; } .dws-bar { flex-direction: column; align-items: flex-start; gap: 6px; } }
/* Lord, 5 Oct: the programs, as promotion cards, under My Dream World */
.mfpr { margin: 0 0 26px; } .mfpr-h h2 { margin: 0; font: 600 1.5rem/1.2 var(--voice); color: #2A1B3D; } .mfpr-h p { margin: 4px 0 14px; font: 400 .94rem/1.5 'Outfit', sans-serif; color: #6E5E80; }
.mfpr .mfl-all { margin-top: 12px; }
.sl-up { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* the card, a bit leaner */
@media (min-width: 641px) { .mpx-hero { grid-template-columns: 80px minmax(0, 1fr); gap: 18px; padding: 16px 24px 14px; } .mpx-face { width: 80px; height: 80px; } .mpx h2 { font-size: 1.15rem; } .mpx-bub { font-size: 1.02rem; padding: 12px 18px; } .mpx-acts { margin-top: 10px; } .mpx-acts .btn { padding: 8px 22px; } .mpx .mdl { padding: 14px 24px 10px; } .mdl-t { font-size: 1.45rem; } .mpx-dock { padding: 8px 18px 8px; } .mpx-o span { width: 44px; height: 44px; } .mpx-whyb { padding: 9px 0 10px; } }
/* Lord, 5 Oct: the programs as one object, and leaner tiles (only here; the Store keeps its own) */
.mfpr-hero { margin-top: 0; } .mfpr-hero h2 { margin-top: 0; } .mfpr-hero p { margin-top: 6px; }
.mfpr .mft { margin-top: 0 !important; gap: 10px; }
.mfpr .mft-img { aspect-ratio: 16 / 9; }
.mfpr .mft-b { gap: 2px; padding: 10px 12px 12px; }
.mfpr .mft-b small { font-size: .62rem; } .mfpr .mft-b b { font-size: .98rem; line-height: 1.2; }
.mfpr .mft-d { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .8rem !important; line-height: 1.4 !important; }
.mfpr .mft-b em { margin-top: auto; padding-top: 6px; font-size: .95rem; }
.mfpr .mft-more summary { margin: 10px 0 0; }
.mfpr { margin-bottom: 26px; }
.mfpr-hero p { font-style: normal !important; }
/* Lord, 5 Oct: My Manifestation Rituals - warm cream, joined to the flow under My Dream World */
.mfr { margin: 0 0 26px; padding: 20px 20px 8px; border-radius: 22px; background: linear-gradient(180deg, #FFF8EA 0%, #FFFBF3 100%); border: 1px solid #EEDFC0; }
.mfr-h { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.mfr-i { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #1D1E46; color: #F3D27A; font-size: 1rem; }
.mfr-h h2 { margin: 0; font: 600 1.5rem/1.2 var(--voice); color: #1D1E46; }
.mfr-h p { margin: 4px 0 0; max-width: 600px; font: 400 .95rem/1.5 'Outfit', sans-serif; color: #5A5070; }
.mfr .mft { margin-top: 0 !important; gap: 10px; }
.mfr .mft-img { aspect-ratio: 16 / 9; }
.mfr .mft-b { gap: 2px; padding: 10px 12px 12px; } .mfr .mft-b small { font-size: .62rem; } .mfr .mft-b b { font-size: .98rem; line-height: 1.2; }
.mfr .mft-d { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .8rem !important; line-height: 1.4 !important; }
.mfr .mft-b em { margin-top: auto; padding-top: 6px; font-size: .95rem; }
.mfr-f { padding: 12px 0 8px; text-align: center; } .mfr-f a { font: 600 .9rem 'Outfit', sans-serif; color: #1D1E46; text-decoration: none; } .mfr-f a:hover { text-decoration: underline; }
.mfr .mft-more summary { margin-top: 10px; }
@media (max-width: 640px) { .mfr { padding: 16px 14px 6px; } .mfr-h h2 { font-size: 1.3rem; } .mfr-i { width: 32px; height: 32px; } }
/* Lord, 5 Oct: Manifest audit - one dark card, one gold action, a quiet sidebar, no italics or capital labels */
.mpx-k { text-transform: none !important; letter-spacing: 0 !important; font: 600 .8rem 'Outfit', sans-serif !important; color: #E8B8C8 !important; }
.mfmoon-l { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 14px 16px; border-radius: 16px; background: #fff; border: 1px solid #ECE4F0; text-decoration: none !important; color: #1D1E46; }
.mfmoon-l > span:first-child { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #EEF0FA; color: #2B2F66; font-size: 1rem; }
.mfmoon-l > span:nth-child(2) { flex: 1; min-width: 0; display: grid; gap: 1px; } .mfmoon-l b { font: 600 .95rem 'Outfit', sans-serif; color: #1D1E46; } .mfmoon-l small { font: 400 .8rem 'Outfit', sans-serif; color: #6E5E80; }
.mfmoon-l em { font-style: normal; color: #A99BBC; } .mfmoon-l:hover em { color: #2B2F66; }
.mfs-lean .ts3-h p { display: none; } .mfs-lean .ts3-h { align-items: center; } .mfs-lean .ts3-ic { background: #EEF0FA !important; color: #2B2F66 !important; border: 0 !important; }
.mfs-lean li.now small { color: #2B2F66 !important; } .mfs-lean li.on i { background: #2B2F66 !important; color: #F3D27A !important; border-color: #2B2F66 !important; }
.mfs-jar { display: block; padding: 10px 16px 12px; border-top: 1px solid #F0E8E0; font: 500 .8rem 'Outfit', sans-serif; color: #6E5E80; }
.mf-before-letter { margin: 0 0 16px; }
.mfr .mft-b small { text-transform: none !important; letter-spacing: 0 !important; font-size: .74rem !important; color: #8A7F95 !important; }
.mpx-o.home span { background: rgba(255,255,255,.12) !important; border: 1.5px solid rgba(243,201,74,.6); } .mpx-o.home span b { color: #F3D27A !important; } .mpx-o.home > b { color: #FFF6EA !important; }
.mf-later { margin: 18px 0 0; padding: 14px 16px; border: 1.5px dashed #D9C9A8; border-radius: 16px; } .mf-later-n { margin: 0 0 10px; font: 600 .8rem 'Outfit', sans-serif; color: #8A6A12; }
/* Lord, 5 Oct: Make It Real - no icon; all six on desktop; three on phones, then all at once; a subtle packages button */
.mfr-h h2 { font: 600 1.45rem/1.2 var(--voice); color: #1D1E46; } .mfr-h p { margin-top: 2px; }
.mfr-more { display: none; width: 100%; margin: 10px 0 0; padding: 10px; border: 0; border-radius: 12px; background: none; cursor: pointer; font: 600 .9rem 'Outfit', sans-serif; color: #8A6A12; }
@media (max-width: 760px) { .mfr:not(.all) .mft-x { display: none !important; } .mfr:not(.all) .mfr-more { display: block; } }
.mfr-f { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; padding: 14px 2px 10px; }
.mfr-f span { font: 400 .9rem 'Outfit', sans-serif; color: #5A5070; }
.mfr-pk { display: inline-block; padding: 8px 18px; border-radius: 999px; background: #FBEFC8; border: 1px solid #E8CF84; font: 600 .88rem 'Outfit', sans-serif; color: #2A2000 !important; text-decoration: none !important; }
.mfr-pk:hover { background: #F7E3A6; }
@media (max-width: 640px) { .mfr-f { justify-content: center; } }
.mf-before-letter { scroll-margin-top: 90px; }
.mfr-h { display: block !important; }
.mfnow > span:last-child { flex: 1; min-width: 0; }
/* Lord, 5 Oct: one offer; the moon sells it; the letter folds away */
.mfr-moon { margin: 10px 0 0; display: inline-block; padding: 6px 12px; border-radius: 999px; background: #EEF0FA; font: 400 .86rem 'Outfit', sans-serif; color: #2B2F66; } .mfr-moon b { font-weight: 600; }
.mfr-why { display: block; width: 100%; margin: 4px 0 6px; padding: 12px 0 4px; border: 0; border-top: 1px solid #EEDFC0; background: none; cursor: pointer; font: 600 .86rem 'Outfit', sans-serif; color: #5A5070; text-align: center; }
.mfr-why span { display: inline-block; transition: transform .2s; } .mfr-why.on span { transform: rotate(180deg); } .mfr-why:hover { color: #1D1E46; }
.mfl[hidden] { display: none !important; } .mfr + .mfl { margin-top: -12px; scroll-margin-top: 90px; }
/* Lord, 5 Oct: less yellow - the rituals on white, the letter keeps the cream paper; a real moon, and its week opens from the side */
.mfr { background: #fff !important; border-color: #E8E2EE !important; }
.mft-c.pick { border: 2px solid #2B2F66 !important; box-shadow: 0 14px 30px -20px rgba(43, 47, 102, .5) !important; }
.ins-mf { background: #fff !important; border-color: #E8E2EE !important; } .ins-mf .kicker { color: #6E5E80 !important; }
.mfr + .mfl { margin-top: 0; }
.mfmoon-side { margin: 0 0 14px; } .mfmoon-side .mfmoon-l { width: 100%; margin: 0; cursor: pointer; font: inherit; text-align: left; }
.mfmoon-l > span.mfmoon-d { background: #1D1E46 !important; } .mfmoon-d svg { display: block; }
.mfmoon-l em { transition: transform .2s; } .mfmoon-l.on em { transform: rotate(180deg); }
.mfmoon-wk[hidden] { display: none; } .mfmoon-wk { margin-top: 8px; }
.mfmoon-wk .mfmoon { margin: 0; display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 16px; border-radius: 16px; }
.mfmoon-wk .mfmoon .n-moon { align-items: flex-start; text-align: left; } .mfmoon-wk .mfmoon .n-moon b { display: none; }
.mfmoon-wk .mweek ol { gap: 4px; justify-content: space-between; }
.mfr-moon .mfmoon-d { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #1D1E46; vertical-align: -5px; margin-right: 2px; }
.mfmoon-wk .mfmoon .n-moon { display: none !important; }
#side .pfc { background: #fff !important; border-color: #E8E2EE !important; }
.mfl .sl-sign { margin-top: 18px; font: 400 1rem/1.5 'Lora', serif; } .mfl .sl-go { display: block; width: auto !important; margin: 18px auto 6px; padding: 12px 30px; }
/* Lord, 5 Oct: no sparkle icons; the old subtle moon in the side; the moon week inside the letter */
.mfs-lean .ts3-ic { display: none !important; } .mfs-lean .ts3-h { padding-left: 0; }
.mfmoon-l > span:first-child { background: #EEF0FA !important; color: #2B2F66 !important; }
.mfl-moon { margin: 18px 0; padding: 16px 18px; border-radius: 16px; background: linear-gradient(160deg, #2B2F66, #1D1E46); color: #E6E2F4; }
.mfl-moon p { margin: 0 0 10px !important; font: 600 .95rem 'Outfit', sans-serif !important; color: #F3D27A !important; }
.mfl-moon .mweek { margin: 0; } .mfl-moon .mweek ol { justify-content: space-between; gap: 6px; }
/* Lord, 5 Oct: Manifest's side column scrolls with the page; the streak title keeps its padding; the letter's close on the right */
@media (min-width: 960px) { #side:has(.mf-side-flow), .side:has(.mf-side-flow) { position: static !important; } }
.mf-side-flow { display: none; }
.mfs-lean .ts3-h { padding: 16px 18px 6px !important; }
.sl-go-r { display: flex; justify-content: flex-end; } .mfl .sl-go-r .sl-go { margin: 18px 0 6px; }
.mfr > .mfr-moon { display: block; margin: -4px 0 14px; padding: 0 0 12px; border-radius: 0; background: none; border-bottom: 1px solid #EEE8F2; text-align: center; font: 500 .95rem 'Outfit', sans-serif; color: #A07A12; } .mfr > .mfr-moon b { font-weight: 700; color: #A07A12; }
.mfl .mfl-moon2 { margin: 18px 0; } .mfl .mfl-moon2 .n-moon b { font: 700 1.1rem 'Outfit', sans-serif !important; color: #F3C94A !important; } .mfl .mfl-moon2 .n-moon span { font: 500 .78rem 'Outfit', sans-serif !important; color: #D9D4F0 !important; }
/* Lord, 5 Oct: Reviews - every testimonial, filter by product, sort; every product on the side */
.pfc-all { display: block; margin-top: 10px; padding-top: 10px; border-top: 1px solid #EEE8F2; font: 600 .86rem 'Outfit', sans-serif; color: #2B2F66; text-decoration: none; text-align: right; }
.rv-hero h1 { margin: 6px 0 0; font: 600 2rem/1.15 var(--voice); color: #1D1E46; } .rv-hero p { margin: 6px 0 0; max-width: 620px; font: 400 1rem/1.5 'Outfit', sans-serif; color: #5A5070; }
.rv-hero .rv-stat { margin-top: 10px; font-size: .9rem; } .rv-st { color: #E0AC2A; letter-spacing: 1px; }
.rv-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 20px 0 14px; }
.rv-chips { display: flex; flex-wrap: wrap; gap: 6px; } .rv-chips button { padding: 6px 12px; border-radius: 999px; border: 1px solid #E2DAEC; background: #fff; cursor: pointer; font: 500 .82rem 'Outfit', sans-serif; color: #4A4060; }
.rv-chips button.on { background: #1D1E46; border-color: #1D1E46; color: #fff; }
.rv-sort { font: 500 .84rem 'Outfit', sans-serif; color: #6E5E80; } .rv-sort select { margin-left: 6px; padding: 6px 10px; border-radius: 10px; border: 1px solid #E2DAEC; background: #fff; font: inherit; color: #1D1E46; }
.rv-g { columns: 2 300px; column-gap: 12px; }
.rv-c { break-inside: avoid; margin: 0 0 12px; padding: 16px 18px 14px; border-radius: 16px; background: #fff; border: 1px solid #ECE4F0; }
.rv-t { display: flex; justify-content: space-between; align-items: center; } .rv-p { font: 600 .72rem 'Outfit', sans-serif; color: #6E5E80; background: #F4F1F8; padding: 3px 8px; border-radius: 999px; }
.rv-c blockquote { margin: 8px 0 10px; font: 400 1rem/1.55 'Lora', serif; color: #2A2240; }
.rv-c figcaption { display: flex; align-items: center; gap: 6px; font: 400 .82rem 'Outfit', sans-serif; color: #6E5E80; } .rv-c figcaption b { color: #1D1E46; } .rv-c figcaption small { margin-left: auto; color: #A99BBC; }
.spx { padding: 16px; border-radius: 18px; background: #fff; border: 1px solid #ECE4F0; } .spx-h { margin: 0 0 4px; font: 600 1.15rem var(--voice); color: #1D1E46; }
.spx-s { margin: 12px 0 4px; font: 600 .74rem 'Outfit', sans-serif; color: #8A7F95; }
.spx-r { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 10px; text-decoration: none; } .spx-r:hover { background: #F7F4FA; }
.spx-r img, .spx-i { flex: none; width: 40px; height: 40px; border-radius: 8px; object-fit: cover; display: grid; place-items: center; background: #EEF0FA; color: #2B2F66; }
.spx-r b { display: block; font: 600 .85rem/1.25 'Outfit', sans-serif; color: #1D1E46; } .spx-r small { font: 400 .76rem 'Outfit', sans-serif; color: #6E5E80; }
.spx-all { display: block; margin-top: 12px; text-align: center; padding: 9px; border-radius: 999px; background: #FBEFC8; border: 1px solid #E8CF84; font: 600 .86rem 'Outfit', sans-serif; color: #2A2000; text-decoration: none; }
/* Lord, 5 Oct: no floating chat on Reviews */
body.no-float #qnChat, body.no-float #qnFab, body.no-float #dkPeek { display: none !important; }
.rv-c figcaption > span:not(.pfc-av) { flex: none; }
/* Lord, 5 Oct: My World page - her people as cards, a side column */
.mw-hero h1 { margin: 6px 0 0; font: 600 2rem/1.15 var(--voice); color: #1D1E46; } .mw-hero p { margin: 4px 0 18px; font: 400 1rem 'Outfit', sans-serif; color: #5A5070; }
.mw-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mw-c { display: flex; gap: 14px; padding: 16px; border-radius: 18px; color: #fff; text-decoration: none; background: radial-gradient(90% 120% at 0% 0%, #5B2B4C 0%, rgba(91,43,76,0) 55%), #1D1630; transition: transform .15s; }
.mw-c:hover { transform: translateY(-2px); }
.mw-f { position: relative; flex: none; width: 64px; height: 64px; } .mw-f img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid #F3DDA0; }
.mw-f i { position: absolute; right: 2px; bottom: 2px; width: 12px; height: 12px; border-radius: 50%; background: #3DCB6E; border: 2px solid #1D1630; }
.mw-c.un .mw-f img { border-color: #E0567E; box-shadow: 0 0 0 3px rgba(224,86,126,.25); }
.mw-b { flex: 1; min-width: 0; display: flex; flex-direction: column; } .mw-b > b { font: 600 1.05rem 'Outfit', sans-serif; } .mw-b > small { font: 500 .78rem 'Outfit', sans-serif; color: #F3B8C9; }
.mw-q { margin-top: 8px; font: 400 .92rem/1.45 'Lora', serif; color: #E6DCF0; } .mw-q em { font: 600 .74rem 'Outfit', sans-serif; font-style: normal; color: #F3B8C9; }
.mw-f2 { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 10px; font: 400 .76rem 'Outfit', sans-serif; color: #A99BBC; } .mw-go { margin-left: auto; font: 700 .86rem 'Outfit', sans-serif; color: #F3C94A; }
.mw-c.lock .mw-f img { filter: blur(4px) brightness(.85); } .mw-c.lock .mw-f i { display: none; }
.mw-c.add { background: #fff; border: 1.5px dashed #D9CBE6; color: #1D1E46; } .mw-c.add .mw-f { display: grid; place-items: center; border-radius: 50%; border: 1.5px dashed #C9A94A; } .mw-c.add .mw-f b { font: 400 1.6rem 'Outfit', sans-serif; color: #A07A12; }
.mw-c.add .mw-b > small { color: #6E5E80; } .mw-c.add .mw-q { color: #4A4060; }
@media (max-width: 760px) { .mw-g { grid-template-columns: 1fr; } }
.mws { display: block; margin: 0 0 12px; padding: 14px 16px; border-radius: 16px; background: #fff; border: 1px solid #ECE4F0; text-decoration: none; }
.mws b { font: 600 1.05rem var(--voice); color: #1D1E46; } .mws p { margin: 6px 0 0; font: 400 .86rem/1.5 'Outfit', sans-serif; color: #5A5070; } .mws em { display: block; margin-top: 8px; font: 700 .84rem 'Outfit', sans-serif; font-style: normal; color: #2B2F66; }
.pfc-all { font-weight: 500 !important; font-size: .8rem !important; color: #8A7F95 !important; border-top-color: #F2EEF5 !important; } .pfc-all:hover { color: #4A4060 !important; }
/* Lord, 5 Oct: the package cards share .mft-c with the ritual tiles; the tile rules (no padding, white) broke them - restore the packages */
.mfs-pk .mft-c { padding: 18px 16px 16px !important; overflow: visible; background: #FFFDF8; border: 1px solid #EAD9AE; border-radius: 18px; align-items: flex-start; gap: 4px; }
.mfs-pk .mft-c.mft-hot { color: #FFF6F0; border: 0; background: radial-gradient(ellipse at 90% 0%, rgba(243,201,74,.22), transparent 55%), linear-gradient(160deg, #2F3170, #1D1E46) !important; box-shadow: 0 20px 36px -18px rgba(29,30,70,.7); }
.mfs-pk .mft-c .mfc-tag { top: -12px; }
/* Lord, 5 Oct: the moon line, a gold band with dark text */
.mfr > .mfr-moon { display: block !important; margin: -20px -20px 16px !important; padding: 10px 16px !important; border: 0 !important; border-radius: 22px 22px 0 0 !important; background: linear-gradient(90deg, #F3D27A, #E9BE52) !important; color: #2A2000 !important; text-align: center; font: 500 .95rem 'Outfit', sans-serif !important; }
.mfr > .mfr-moon b { color: #2A2000 !important; font-weight: 700; }
@media (max-width: 640px) { .mfr > .mfr-moon { margin: -16px -14px 14px !important; border-radius: 18px 18px 0 0 !important; font-size: .86rem !important; } }
.mfr-pk2 { display: inline-block; width: auto !important; padding: 10px 24px; }
/* Lord, 5 Oct: anything scrolled to lands below the fixed top menu */
html { scroll-padding-top: 96px; } @media (max-width: 959px) { html { scroll-padding-top: 76px; } }
/* Lord, 5 Oct: My World with substance */
.mw-top { position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin: 6px 0 22px; padding: 24px 26px; border-radius: 24px; color: #fff;
  background: radial-gradient(90% 120% at 0% 0%, #5B2B4C 0%, rgba(91,43,76,0) 55%), radial-gradient(70% 90% at 100% 100%, #3A2560 0%, rgba(58,37,96,0) 62%), #1D1630; }
.mw-top-t { position: relative; } .mw-top h1 { margin: 0; font: 600 2rem/1.15 var(--voice); color: #F3D27A; } .mw-top p { margin: 4px 0 0; font: 400 1rem 'Lora', serif; color: #E6DCF0; }
.mw-stats { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 16px; } .mw-stats span { font: 400 .82rem 'Outfit', sans-serif; color: #B9AACB; } .mw-stats b { display: block; font: 700 1.4rem 'Outfit', sans-serif; color: #fff; }
.mw-new { position: relative; display: inline-block; width: auto !important; padding: 10px 22px; }
.mw-sec { margin: 0 0 24px; } .mw-sh h2 { margin: 0; font: 600 1.45rem/1.2 var(--voice); color: #1D1E46; } .mw-sh p { margin: 2px 0 0; font: 400 .92rem 'Outfit', sans-serif; color: #5A5070; } .mw-sh { margin-bottom: 12px; }
.mw-with { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; } .mw-with > span { font: 500 .84rem 'Outfit', sans-serif; color: #6E5E80; margin-right: 4px; }
.mw-with button { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 4px; border-radius: 999px; border: 1px solid #E2DAEC; background: #fff; cursor: pointer; font: 500 .84rem 'Outfit', sans-serif; color: #4A4060; }
.mw-with button img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; } .mw-with button.on { background: #1D1E46; border-color: #1D1E46; color: #fff; }
.mw-sc { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.mw-s { display: flex; flex-direction: column; padding: 16px; border-radius: 16px; background: #fff; border: 1px solid #ECE4F0; text-decoration: none; transition: border-color .15s, transform .15s; } .mw-s:hover { border-color: #C9B8DC; transform: translateY(-2px); }
.mw-si { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #EEF0FA; color: #2B2F66; } .mw-s b { margin-top: 10px; font: 600 .98rem/1.3 'Outfit', sans-serif; color: #1D1E46; }
.mw-s small { flex: 1; margin-top: 4px; font: 400 .86rem/1.45 'Lora', serif; color: #5A5070; } .mw-s em { margin-top: 10px; font: 700 .82rem 'Outfit', sans-serif; font-style: normal; color: #2B2F66; }
.mw-soul { display: flex; gap: 22px; align-items: center; margin: 0 0 24px; padding: 22px 24px; border-radius: 22px; background: #fff; border: 1px solid #ECE4F0; }
.mw-soul-f { position: relative; flex: none; width: 110px; height: 110px; } .mw-soul-f img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; filter: blur(6px) brightness(.9); border: 3px solid #F3DDA0; }
.mw-soul-f em { position: absolute; right: 2px; top: 2px; min-width: 26px; height: 26px; border-radius: 13px; background: #E0567E; color: #fff; font: 700 .8rem/26px 'Outfit', sans-serif; font-style: normal; text-align: center; border: 2px solid #fff; }
.mw-soul-k { margin: 0; font: 600 .8rem 'Outfit', sans-serif; color: #B0506F; } .mw-soul h2 { margin: 4px 0 0; font: 600 1.5rem/1.2 var(--voice); color: #1D1E46; } .mw-soul p { margin: 6px 0 12px; font: 400 .95rem/1.55 'Lora', serif; color: #4A4060; }
.mw-soul .btn { display: inline-block; width: auto !important; padding: 10px 22px; }
.ywhy.dws.mw-why { margin-top: 0; }
@media (max-width: 640px) { .mw-top { padding: 20px 18px; } .mw-top h1 { font-size: 1.6rem; } .mw-soul { flex-direction: column; text-align: center; padding: 20px 18px; } .mw-soul-f { width: 90px; height: 90px; } }
/* Lord, 5 Oct: Chat sidebar - One Tap gets the subtle Today look; the link and the green button sit right; the guides' faces leaner */
#side .tlc-h, .ask-side .tlc-h { position: relative; padding: 14px 16px 14px 64px !important; background: #fff !important; border-bottom: 1px solid #F0EAF4; }
#side .tlc-h::before { content: '\263E'; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: #23265A; color: #F3D27A; font-size: 1rem; }
#side .tlc-h b { color: #1D1E46 !important; font-size: 1.1rem; } #side .tlc-h small { color: #6E5E80 !important; }
.tlc-l > a.tlc-all { display: block !important; padding: 12px 4px 4px !important; border-radius: 0 !important; background: none !important; text-align: right; color: #2B2F66; font-weight: 600; }
.tlc-l > a.tlc-all:hover { background: none !important; text-decoration: underline; }
.ts3-n em.btn, .ts3 .ts3-n em.btn { justify-self: end !important; }
.gd-faces .adv-ava { width: 26px !important; height: 26px !important; margin-left: -6px; border-width: 1.5px !important; } .gd-faces em { font-size: .72rem; margin-left: 8px; }
.gd-hero h2 { margin-top: 6px !important; }
/* Lord, 5 Oct: My World, built like Manifest */
.mw-box { margin: 0 0 22px; padding: 20px; border-radius: 22px; background: #fff; border: 1px solid #E8E2EE; }
.mw-bh h2 { margin: 0; font: 600 1.45rem/1.2 var(--voice); color: #1D1E46; } .mw-bh p { margin: 2px 0 14px; font: 400 .92rem 'Outfit', sans-serif; color: #5A5070; }
.mw2-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mw2 { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 18px 14px 14px; border-radius: 18px; text-decoration: none; background: linear-gradient(180deg, #F6F0FA 0, #F6F0FA 46px, #fff 46px); border: 1px solid #ECE4F0; transition: transform .15s, border-color .15s; }
.mw2:hover { transform: translateY(-2px); border-color: #C9B8DC; }
.mw2-f { position: relative; width: 72px; height: 72px; } .mw2-f img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 6px 14px -8px rgba(29,22,48,.6); }
.mw2-f i { position: absolute; right: 3px; bottom: 3px; width: 12px; height: 12px; border-radius: 50%; background: #3DCB6E; border: 2px solid #fff; }
.mw2 > b { margin-top: 8px; font: 600 1.15rem var(--voice); color: #1D1E46; } .mw2 > small { font: 600 .76rem 'Outfit', sans-serif; color: #B0506F; }
.mw2-q { flex: 1; margin-top: 8px; font: 400 .86rem/1.45 'Lora', serif; color: #4A4060; } .mw2-q em { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 999px; background: #E0567E; color: #fff; font: 700 .66rem 'Outfit', sans-serif; font-style: normal; vertical-align: 2px; }
.mw2-go { margin-top: 10px; font: 700 .84rem 'Outfit', sans-serif; color: #2B2F66; }
.mw2.add { background: #FCFAFD; border-style: dashed; } .mw2.add .mw2-f { display: grid; place-items: center; border-radius: 50%; border: 1.5px dashed #C9A94A; background: #fff; } .mw2.add .mw2-f b { font: 400 1.6rem 'Outfit', sans-serif; color: #A07A12; }
.mw-box .mw-sc { margin-top: 0; } .mw-box .mw-s { background: #FBF9FC; }
@media (max-width: 760px) { .mw2-g { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mw-box { padding: 16px 14px; } }
.mws-free { padding: 16px !important; } .mws-row { display: flex; gap: 12px; align-items: center; } .mws-ic { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: #7A2E4A; color: #fff; }
.mws-row b { display: block; font: 600 1.05rem var(--voice); color: #1D1E46; } .mws-row small { font: 400 .8rem 'Outfit', sans-serif; color: #6E5E80; }
.mws-n { margin: 14px 0 6px !important; font: 400 .9rem 'Outfit', sans-serif !important; color: #5A5070 !important; } .mws-n b { font: 700 1.6rem 'Outfit', sans-serif; color: #1D1E46; margin-right: 2px; }
.mws-bar { display: block; height: 8px; border-radius: 4px; background: #F2ECF5; overflow: hidden; } .mws-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #E0567E, #B0506F); }
.mws-f { margin: 10px 0 0 !important; font-size: .8rem !important; color: #8A7F95 !important; }
.mws-r { display: flex !important; gap: 12px; align-items: center; padding: 10px !important; } .mws-r img { flex: none; width: 64px; height: 64px; border-radius: 12px; object-fit: cover; }
.mws-r small { display: block; font: 600 .74rem 'Outfit', sans-serif; color: #8A7F95; } .mws-r b { display: block; font: 600 .95rem/1.25 var(--voice); color: #1D1E46; } .mws-r em { display: block; margin-top: 4px; font: 600 .78rem 'Outfit', sans-serif; font-style: normal; color: #2B2F66; }
.gd-faces { line-height: 1; height: 26px; } .gd-hero h2 { margin-top: 4px !important; line-height: 1.1 !important; } .gd-hero p { font-style: normal !important; margin-top: 4px !important; }
/* Lord, 5 Oct: the guides' header uses My Dream World's gradient (plum glow on night) */
.gd-hero { background: radial-gradient(90% 120% at 0% 0%, #5B2B4C 0%, rgba(91,43,76,0) 55%), radial-gradient(70% 90% at 100% 100%, #3A2560 0%, rgba(58,37,96,0) 62%), #1D1630 !important; }
.gd-faces .adv-ava { border-color: #2A1D3A !important; }
.ask3.gd-ask { background: rgba(255,255,255,.07) !important; border-color: rgba(255,255,255,.14) !important; }
@media (max-width: 640px) { .mfs-pk .mft-c { flex-direction: column !important; align-items: flex-start !important; } }
/* Lord, 5 Oct: My Love Story opens like Manifest and Chat - the plum-on-night card, gold title, plain cream line */
.sti2 { position: relative; overflow: hidden; margin: 6px 0 18px; padding: 22px 26px; border-radius: 24px; color: #fff;
  background: radial-gradient(90% 120% at 0% 0%, #5B2B4C 0%, rgba(91,43,76,0) 55%), radial-gradient(70% 90% at 100% 100%, #3A2560 0%, rgba(58,37,96,0) 62%), #1D1630; box-shadow: 0 26px 52px -36px rgba(29,22,48,.95); }
.sti2-k { position: relative; margin: 0; font: 600 .8rem 'Outfit', sans-serif; color: #E8B8C8; }
.sti2 h2 { position: relative; margin: 6px 0 0; max-width: 760px; font: 600 1.7rem/1.2 var(--voice); color: #F3D27A; }
.sti2-s { position: relative; margin: 8px 0 0; max-width: 680px; font: 400 1rem/1.55 'Lora', serif; color: #E6DCF0; }
@media (max-width: 640px) { .sti2 { padding: 18px; border-radius: 20px; } .sti2 h2 { font-size: 1.35rem; } .sti2-s { font-size: .93rem; } }
body.no-chatfab #qnChat, body.no-chatfab #dkPeek { display: none !important; }
/* Lord, 5 Oct: My World side - lean free messages, three rituals; One Tap header stronger */
.mws-free { padding: 14px 16px 12px !important; }
.mws-free .mws-n { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 8px !important; }
.mws-free .mws-n span { font: 600 .9rem 'Outfit', sans-serif; color: #1D1E46; } .mws-free .mws-n b { font: 700 1.15rem 'Outfit', sans-serif; color: #B0506F; margin: 0; } .mws-free .mws-n small { font: 500 .8rem 'Outfit', sans-serif; color: #8A7F95; }
.mws-free .mws-bar { height: 6px; } .mws-free .mws-f { margin: 8px 0 0 !important; font-size: .76rem !important; }
.mws-mr { padding: 14px 12px 10px !important; } .mws-t { display: block; padding: 0 4px; font: 600 1.1rem var(--voice); color: #1D1E46; } .mws-st { margin: 2px 0 8px !important; padding: 0 4px; font-size: .8rem !important; }
.mws-mr .mws-r { display: flex; gap: 10px; align-items: center; padding: 6px 4px; border-radius: 10px; text-decoration: none; } .mws-mr .mws-r:hover { background: #F7F4FA; }
.mws-mr .mws-r img { flex: none; width: 52px; height: 52px; border-radius: 10px; object-fit: cover; }
.mws-mr .mws-r b { display: block; font: 600 .88rem/1.25 var(--voice); color: #1D1E46; } .mws-mr .mws-r em { display: block; margin-top: 2px; font: 600 .76rem 'Outfit', sans-serif; font-style: normal; color: #6E5E80; }
.mws-all { display: block; padding: 8px 4px 2px; text-align: right; font: 600 .82rem 'Outfit', sans-serif; color: #2B2F66; text-decoration: none; }
#side .tlc-h b { font-weight: 700 !important; color: #14153A !important; } #side .tlc-h small { color: #3E3656 !important; font-weight: 500; }
.mw-gd { display: flex; align-items: center; gap: 14px; margin: 0 0 24px; padding: 16px 18px; border-radius: 18px; background: #fff; border: 1px solid #E8E2EE; text-decoration: none; }
.mw-gd-f { flex: none; display: flex; } .mw-gd-f .adv-ava { width: 34px !important; height: 34px !important; margin-left: -8px; border: 2px solid #fff; } .mw-gd-f .adv-ava:first-child { margin-left: 0; }
.mw-gd > span:nth-child(2) { flex: 1; min-width: 0; } .mw-gd b { display: block; font: 600 1.05rem var(--voice); color: #1D1E46; } .mw-gd small { display: block; margin-top: 2px; font: 400 .84rem/1.45 'Outfit', sans-serif; color: #5A5070; }
.mw-gd em { flex: none; font: 700 .86rem 'Outfit', sans-serif; font-style: normal; color: #2B2F66; }
@media (max-width: 640px) { .mw-gd { flex-wrap: wrap; } .mw-gd em { width: 100%; text-align: right; } }
/* Lord, 5 Oct: one dark style across the portal - the plum-on-night gradient of Manifest, My Love Story and Chat */
.scene.sky-night, .yr.ys-intro, .chpv-c { background: radial-gradient(90% 120% at 0% 0%, #5B2B4C 0%, rgba(91,43,76,0) 55%), radial-gradient(70% 90% at 100% 100%, #3A2560 0%, rgba(58,37,96,0) 62%), #1D1630 !important; }
/* Lord, 5 Oct: Compatibility's own dark blocks (her circle's hero, a person's page) on the same gradient */
.chero, .bd-hero2, .btd2, .bmx { background: radial-gradient(90% 120% at 0% 0%, #5B2B4C 0%, rgba(91,43,76,0) 55%), radial-gradient(70% 90% at 100% 100%, #3A2560 0%, rgba(58,37,96,0) 62%), #1D1630 !important; }
/* Lord, 5 Oct (prototype): talk to the story's hero, and the book club */
.stk { display: flex; gap: 18px; align-items: center; margin: 18px 0; padding: 20px 22px; border-radius: 22px; color: #fff;
  background: radial-gradient(90% 120% at 0% 0%, #5B2B4C 0%, rgba(91,43,76,0) 55%), radial-gradient(70% 90% at 100% 100%, #3A2560 0%, rgba(58,37,96,0) 62%), #1D1630; }
.stk-f { position: relative; flex: none; width: 84px; height: 84px; } .stk-f img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid #F3DDA0; }
.stk-f i { position: absolute; right: 4px; bottom: 4px; width: 13px; height: 13px; border-radius: 50%; background: #3DCB6E; border: 2px solid #1D1630; }
.stk-k { margin: 0; font: 600 .8rem 'Outfit', sans-serif; color: #E8B8C8; } .stk h3 { margin: 4px 0 0; font: 600 1.35rem/1.2 var(--voice); color: #F3D27A; }
.stk p:not(.stk-k) { margin: 6px 0 12px; font: 400 .95rem/1.5 'Lora', serif; color: #E6DCF0; }
.stk-a { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; } .stk-a .btn { display: inline-block; width: auto !important; padding: 9px 22px; }
.stk-club { font: 600 .88rem 'Outfit', sans-serif; color: #F3C94A; text-decoration: none; } .stk-club:hover { text-decoration: underline; }
@media (max-width: 640px) { .stk { flex-direction: column; text-align: center; } .stk-a { justify-content: center; } }
.cb-top { position: relative; overflow: hidden; margin: 6px 0 14px; padding: 20px 24px; border-radius: 22px; color: #fff;
  background: radial-gradient(90% 120% at 0% 0%, #5B2B4C 0%, rgba(91,43,76,0) 55%), radial-gradient(70% 90% at 100% 100%, #3A2560 0%, rgba(58,37,96,0) 62%), #1D1630; }
.cb-top h1 { position: relative; margin: 10px 0 0; font: 600 1.6rem var(--voice); color: #F3D27A; } .cb-top p { position: relative; margin: 4px 0 0; font: 400 .95rem 'Lora', serif; color: #E6DCF0; }
.cb-faces { position: relative; display: flex; } .cb-faces .cb-av { margin-left: -8px; border: 2px solid #1D1630; } .cb-faces .cb-av:first-child { margin-left: 0; }
.cb-av { flex: none; width: 38px; height: 38px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font: 700 .9rem 'Outfit', sans-serif; color: #fff; background: #7A2E4A; }
.cb-av.cath { background: #A07A12; } .cb-av.mia { background: #2B6A8A; } .cb-av img { width: 100%; height: 100%; object-fit: cover; }
.cb-chat { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 20px; background: #fff; border: 1px solid #E8E2EE; min-height: 280px; }
.cb-row { display: flex; gap: 10px; align-items: flex-start; max-width: 85%; } .cb-row b { font: 600 .84rem 'Outfit', sans-serif; color: #1D1E46; } .cb-row b small { font-weight: 400; color: #8A7F95; }
.cb-row p { margin: 3px 0 0; padding: 10px 14px; border-radius: 4px 16px 16px 16px; background: #F4F1F8; font: 400 .98rem/1.5 'Lora', serif; color: #2A2240; }
.cb-row.me { align-self: flex-end; } .cb-row.me p { margin: 0; border-radius: 16px 4px 16px 16px; background: #1D1E46; color: #fff; }
.cb-typing { display: flex; gap: 4px; } .cb-typing i { width: 7px; height: 7px; border-radius: 50%; background: #A99BBC; animation: mpxdot 1s infinite; } .cb-typing i:nth-child(2) { animation-delay: .15s; } .cb-typing i:nth-child(3) { animation-delay: .3s; }
.cb-f { display: flex; gap: 8px; margin-top: 12px; } .cb-f input { flex: 1; min-width: 0; padding: 12px 16px; border-radius: 14px; border: 1px solid #E2DAEC; font: 400 1rem 'Lora', serif; } .cb-f .btn { width: auto !important; padding: 10px 22px; }
.cb-cost { margin: 8px 2px 0; font: 400 .8rem 'Outfit', sans-serif; color: #8A7F95; }
/* Lord, 5 Oct (prototype): Manifest after delivery - My Rituals */
.mrs { margin: 0 0 24px; padding: 20px; border-radius: 22px; background: #fff; border: 1px solid #E8E2EE; }
.mr { padding: 16px 0 4px; border-top: 1px solid #F0EAF4; } .mrs .mfr-h + .mr { border-top: 0; padding-top: 4px; }
.mr-h { display: flex; gap: 14px; align-items: center; } .mr-h img { flex: none; width: 72px; height: 72px; border-radius: 14px; object-fit: cover; }
.mr-k { margin: 0; font: 600 .78rem 'Outfit', sans-serif; color: #1F8A4C; } .mr-h h3 { margin: 2px 0 0; font: 600 1.25rem/1.25 var(--voice); color: #1D1E46; }
.mr-tl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 16px 0; padding: 0; list-style: none; }
.mr-tl li { position: relative; padding: 10px; border-radius: 12px; background: #FBF9FC; border: 1px solid #F0EAF4; }
.mr-tl i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-style: normal; font-size: .8rem; background: #EEF0FA; color: #2B2F66; }
.mr-tl li.ok i { background: #1F8A4C; color: #fff; } .mr-tl li.now { border-color: #E8CF84; background: #FFFBEF; } .mr-tl li.now i { background: #F3C94A; color: #2A2000; }
.mr-tl b { display: block; margin-top: 6px; font: 600 .86rem/1.25 'Outfit', sans-serif; color: #1D1E46; } .mr-tl small { display: block; margin-top: 2px; font: 400 .74rem/1.35 'Outfit', sans-serif; color: #6E5E80; }
.mr-tonight { padding: 16px 18px; border-radius: 18px; color: #fff; background: radial-gradient(90% 120% at 0% 0%, #5B2B4C 0%, rgba(91,43,76,0) 55%), radial-gradient(70% 90% at 100% 100%, #3A2560 0%, rgba(58,37,96,0) 62%), #1D1630; }
.mr-tk { margin: 0; font: 600 .8rem 'Outfit', sans-serif; color: #E8B8C8; } .mr-tt { margin: 4px 0 12px; font: 400 .98rem/1.5 'Lora', serif; color: #E6DCF0; }
.mr-player { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); }
.mr-pb { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; background: #F3C94A; color: #2A2000; font-size: .9rem; }
.mr-pi { flex: 1; min-width: 0; } .mr-pi b { display: block; font: 600 .86rem 'Outfit', sans-serif; color: #fff; } .mr-bar { display: block; height: 4px; margin-top: 6px; border-radius: 2px; background: rgba(255,255,255,.18); overflow: hidden; } .mr-bar i { display: block; width: 0; height: 100%; background: #F3C94A; }
.mr-time { font: 500 .78rem 'Outfit', sans-serif; color: #CFC2DE; }
.mr-done { display: inline-block; width: auto !important; margin-top: 12px; padding: 9px 20px; } .mr-done.on { border: 0; background: none; color: #7FD9A0; font: 600 .9rem 'Outfit', sans-serif; padding-left: 0; cursor: default; }
.mr-note { display: flex; gap: 12px; margin-top: 12px; padding: 14px; border-radius: 14px; background: #FFFBF3; border: 1px solid #EFE3C8; }
.mr-av { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #A07A12; color: #fff; font: 700 .9rem 'Outfit', sans-serif; }
.mr-note b { font: 600 .82rem 'Outfit', sans-serif; color: #8A6A12; } .mr-note p { margin: 3px 0 0; font: 400 .95rem/1.5 'Lora', serif; color: #2A2240; }
.mr-gets { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 8px; } .mr-gets p { width: 100%; margin: 0; font: 600 .78rem 'Outfit', sans-serif; color: #6E5E80; }
.mr-gets span { padding: 4px 10px; border-radius: 999px; background: #EEF7F1; color: #1F6A3C; font: 500 .78rem 'Outfit', sans-serif; }
@media (max-width: 640px) { .mrs { padding: 16px 14px; } .mr-tl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Lord, 5 Oct: Compatibility with nobody yet - the preview first, the three ways in inside it, then the letter */
.chpv:first-child { margin-top: 0; } .chpv:first-child .chpv-k { display: none; }
.chpv-go { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.12); }
.chpv-go p { margin: 0 0 10px; font: 600 .95rem 'Outfit', sans-serif; color: #F3D27A; }
.chpv-go .ch-pick { margin: 0; }
.chpv + .chl { margin-top: 20px; }
.chpv-go .ch-pick { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: none !important; } .chpv-go .ch-pick a { margin: 0 !important; font-size: .88rem; } @media (max-width: 640px) { .chpv-go .ch-pick { grid-template-columns: 1fr; } }
/* Lord, 6 Oct: Compatibility with nobody added, on phones - leaner: the four blurred boxes in two columns, smaller type, slim buttons */
@media (max-width: 640px) {
  .chpv:first-child .chpv-c { padding: 16px 16px 14px !important; }
  .chpv:first-child .chpv-h .tc-pair i { width: 34px; height: 34px; font-size: .9rem; }
  .chpv:first-child .chpv-h b { font-size: 1.2rem !important; } .chpv:first-child .chpv-h span { font-size: .72rem !important; }
  .chpv:first-child .chpv-t { margin-top: 10px !important; font-size: 1.05rem !important; line-height: 1.3 !important; }
  .chpv:first-child .chpv-m { font-size: .86rem !important; }
  .chpv:first-child .chpv-g { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 6px !important; margin-top: 10px !important; }
  .chpv:first-child .chpv-g > span { padding: 8px 10px !important; } .chpv:first-child .chpv-g small { font-size: .6rem !important; }
  .chpv:first-child .chpv-g .lk-fade { display: none !important; }
  .chpv-go { margin-top: 12px; padding-top: 10px; } .chpv-go p { font-size: .85rem; margin-bottom: 8px; }
  .chpv-go .ch-pick { gap: 6px; } .chpv-go .ch-pick a { padding: 8px 12px !important; min-height: 0 !important; font-size: .86rem !important; }
  .chpv-go .ch-pick a i { width: 26px !important; height: 26px !important; font-size: .8rem !important; }
}
/* Lord, 6 Oct: the hero's card before she starts, and the book club's side */
.stk.lock .stk-f img { filter: blur(5px) brightness(.85); } .stk-lk { font: 500 .82rem 'Outfit', sans-serif; color: #CFC2DE; }
.cbs .cbs-w { display: flex; align-items: center; gap: 10px; padding: 8px 2px; } .cbs-w b { display: block; font: 600 .9rem 'Outfit', sans-serif; color: #1D1E46; } .cbs-w small { font: 400 .78rem 'Outfit', sans-serif; color: #6E5E80; }
.cbs-p { display: flex !important; align-items: center; gap: 12px; } .stk-f.sm { width: 46px; height: 46px; } .stk-f.sm i { width: 10px; height: 10px; right: 1px; bottom: 1px; border-color: #fff; }
.cbs-p b { display: block; font: 600 .95rem var(--voice); color: #1D1E46; } .cbs-p small { font: 600 .8rem 'Outfit', sans-serif; color: #2B2F66; }
.cbs-r { display: flex !important; gap: 12px; align-items: center; padding: 10px !important; } .cbs-r img { flex: none; width: 64px; height: 64px; border-radius: 12px; object-fit: cover; }
.cbs-r small { display: block; font: 600 .74rem 'Outfit', sans-serif; color: #8A7F95; } .cbs-r b { display: block; font: 600 .92rem 'Outfit', sans-serif; color: #2B2F66; } .cbs-r em { display: block; font: 400 .76rem 'Outfit', sans-serif; font-style: normal; color: #6E5E80; }
/* Lord, 6 Oct: the book club as one group-chat window */
.cbw { overflow: hidden; margin-top: 6px; border-radius: 22px; background: #fff; border: 1px solid #E8E2EE; box-shadow: 0 20px 40px -32px rgba(29,22,48,.5); }
.cbw-h { display: flex; align-items: center; gap: 12px; padding: 14px 18px; color: #fff; background: radial-gradient(90% 120% at 0% 0%, #5B2B4C 0%, rgba(91,43,76,0) 55%), radial-gradient(70% 90% at 100% 100%, #3A2560 0%, rgba(58,37,96,0) 62%), #1D1630; }
.cbw-cv { flex: none; width: 46px; height: 46px; border-radius: 12px; overflow: hidden; } .cbw-cv img { width: 100%; height: 100%; object-fit: cover; }
.cbw-h > div { flex: 1; min-width: 0; } .cbw-h b { display: block; font: 600 1.2rem var(--voice); color: #F3D27A; } .cbw-h small { font: 400 .8rem 'Outfit', sans-serif; color: #CFC2DE; }
.cbw-h small i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #3DCB6E; }
.cbw-fs { display: flex; } .cbw-fs .cb-av { width: 30px; height: 30px; margin-left: -8px; border: 2px solid #2A1D3A; }
.cbw-b { height: 52vh; min-height: 340px; max-height: 560px; overflow-y: auto; padding: 14px 18px 8px; background: #FCFBFD; }
.cbw-day { margin: 0 0 12px; text-align: center; font: 500 .74rem 'Outfit', sans-serif; color: #A99BBC; }
.cbw-r { display: flex; gap: 8px; align-items: flex-end; margin: 2px 0; max-width: 78%; } .cbw-r.last { margin-bottom: 12px; }
.cbw-a { flex: none; width: 30px; } .cbw-a .cb-av { width: 30px; height: 30px; }
.cbw-r b { display: block; margin: 0 0 3px 4px; font: 600 .76rem 'Outfit', sans-serif; color: #4A4060; } .cbw-r b small { margin-left: 5px; font-weight: 400; color: #A99BBC; }
.cbw-r p { margin: 0; padding: 9px 14px; border-radius: 18px; font: 400 .97rem/1.45 'Lora', serif; color: #2A2240; background: #F1EEF6; }
.cbw-r.host p { background: #FBF3DF; } .cbw-r.hero p { background: #F7E9EF; }
.cbw-r.me { margin-left: auto; justify-content: flex-end; } .cbw-r.me p { background: #1D1E46; color: #fff; }
.cbw-ideas { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 18px 0; border-top: 1px solid #F0EAF4; }
.cbw-ideas button { padding: 6px 12px; border-radius: 999px; border: 1px solid #E2DAEC; background: #fff; cursor: pointer; font: 500 .82rem 'Outfit', sans-serif; color: #4A4060; } .cbw-ideas button:hover { border-color: #2B2F66; color: #1D1E46; }
.cbw-f { display: flex; gap: 8px; padding: 10px 14px 14px; } .cbw-f input { flex: 1; min-width: 0; padding: 11px 16px; border-radius: 999px; border: 1px solid #E2DAEC; background: #F7F5FA; font: 400 .98rem 'Lora', serif; }
.cbw-f input:focus { outline: none; border-color: #2B2F66; background: #fff; }
.cbw-f button { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; background: #F3C94A; color: #2A2000; font-size: 1rem; }
@media (max-width: 640px) { .cbw-b { height: 58vh; padding: 12px; } .cbw-r { max-width: 88%; } .cbw-fs { display: none; } }
.clc { display: block; margin: 18px 0; padding: 16px 18px; border-radius: 18px; background: #fff; border: 1px solid #E8E2EE; text-decoration: none; transition: border-color .15s; } .clc:hover { border-color: #C9B8DC; }
.clc.side { margin: 0 0 12px; }
.clc-t { display: flex; align-items: center; gap: 12px; } .clc .cbw-fs .cb-av { border-color: #fff; }
.clc-t b { display: block; font: 600 1.1rem var(--voice); color: #1D1E46; } .clc-t small { font: 400 .78rem 'Outfit', sans-serif; color: #6E5E80; } .clc-t small i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #3DCB6E; }
.clc-q { margin: 10px 0 8px; padding: 9px 13px; border-radius: 14px; background: #FBF3DF; font: 400 .92rem/1.45 'Lora', serif; color: #2A2240; }
.clc em { font: 700 .86rem 'Outfit', sans-serif; font-style: normal; color: #2B2F66; }
/* Lord, 6 Oct: lean hero row and book club preview */
.stk2 { display: flex; align-items: center; gap: 12px; margin: 14px 0; padding: 12px 14px; border-radius: 16px; color: #fff; background: radial-gradient(90% 120% at 0% 0%, #5B2B4C 0%, rgba(91,43,76,0) 55%), #1D1630; }
.stk2 > div { flex: 1; min-width: 0; } .stk2 b { display: block; font: 600 1rem 'Outfit', sans-serif; color: #F3D27A; } .stk2 small { display: block; margin-top: 1px; font: 400 .78rem 'Outfit', sans-serif; color: #CFC2DE; }
.stk2 .stk-f.sm i { border-color: #1D1630; } .stk2 .btn { flex: none; width: auto !important; padding: 8px 16px; font-size: .86rem; }
@media (max-width: 640px) { .stk2 { flex-wrap: wrap; } .stk2 .btn { width: 100% !important; text-align: center; } }
.clc2 { display: block; margin: 14px 0; padding: 12px 14px; border-radius: 16px; background: #fff; border: 1px solid #E8E2EE; text-decoration: none; } .clc2:hover { border-color: #C9B8DC; } .clc2.side { margin: 0 0 12px; }
.clc2-h { display: flex; justify-content: space-between; align-items: baseline; } .clc2-h b { font: 600 1.05rem var(--voice); color: #1D1E46; } .clc2-h small { font: 500 .74rem 'Outfit', sans-serif; color: #6E5E80; } .clc2-h small i { display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: #3DCB6E; vertical-align: 1px; }
.clc2-m { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; } .clc2-m .cb-av { width: 26px; height: 26px; flex: none; }
.clc2-m p { margin: 0; padding: 6px 11px; border-radius: 4px 14px 14px 14px; background: #F4F1F8; font: 400 .86rem/1.4 'Lora', serif; color: #2A2240; } .clc2-m p b { font: 600 .78rem 'Outfit', sans-serif; color: #1D1E46; }
.clc2 em { display: block; margin-top: 6px; text-align: right; font: 700 .82rem 'Outfit', sans-serif; font-style: normal; color: #2B2F66; }
/* Lord, 6 Oct: her people in the floating chat */
.dk-pp { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 52px; padding: 0; border: 0; background: none; cursor: pointer; text-decoration: none; }
.dk-pp-f { position: relative; width: 44px; height: 44px; border-radius: 50%; padding: 2px; background: #EDE6F2; display: grid; place-items: center; }
.dk-pp.un .dk-pp-f, .dk-pp.lock .dk-pp-f { background: linear-gradient(135deg, #F3C94A, #E0567E); }
.dk-pp-f img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid #fff; } .dk-pp.lock img { filter: blur(3px); }
.dk-pp-f em { position: absolute; right: -2px; top: -2px; min-width: 16px; height: 16px; border-radius: 8px; background: #E0567E; color: #fff; font: 700 .6rem/16px 'Outfit', sans-serif; font-style: normal; text-align: center; border: 2px solid #fff; }
.dk-pp.un .dk-pp-f em { width: 10px; min-width: 10px; height: 10px; }
.dk-pp small { font: 500 .7rem 'Outfit', sans-serif; color: #4A4060; }
.dk-pp.add .dk-pp-f { background: none; border: 1.5px dashed #C9A94A; } .dk-pp.add b { font: 400 1.1rem 'Outfit', sans-serif; color: #A07A12; }
.dk-pp-n { margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: #E0567E; color: #fff; font: 700 .64rem 'Outfit', sans-serif; vertical-align: 1px; }
/* Lord, 7 Oct: the floating chat's Continue is one lean row; round faces in My Dream World */
.dk-card.dk-cont { padding: 8px 10px !important; gap: 10px; } .dk-cont .adv-ava { width: 32px !important; height: 32px !important; flex: none; }
.dk-cont b { font-size: .86rem; } .dk-cont b small { font: 500 .72rem 'Outfit', sans-serif; color: #8A7F95; }
.dk-cont em { display: block; font-size: .78rem !important; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-pp-f { flex: none; box-sizing: border-box; } .dk-pp-f img { width: 40px; height: 40px; aspect-ratio: 1; }
/* Lord, 7 Oct: My Dream World faces line up (the people are buttons, Soulmate and New are links; the guide-row button styles pushed them down) */
.dk-faces-row .dk-pp { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; gap: 4px !important; position: static !important; width: auto !important; min-width: 52px; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; vertical-align: top; line-height: 1.2; }
.dk-faces-row .dk-pp .dk-pp-f { position: relative !important; width: 44px !important; height: 44px !important; margin: 0 !important; padding: 2px !important; border-radius: 50% !important; }
.dk-faces-row .dk-pp.add .dk-pp-f { padding: 0 !important; }
.dk-faces-row .dk-pp .dk-pp-f img { position: static !important; width: 40px !important; height: 40px !important; margin: 0 !important; }
.dk-faces-row .dk-pp small { margin: 0 !important; position: static !important; }
.dk-faces-row:has(.dk-pp) { align-items: flex-start; }
.dk-ppnone { text-decoration: none; } .dk-ppnone .dk-pp-f { width: 32px; height: 32px; padding: 0; background: #7A2E4A; color: #fff; display: grid; place-items: center; border-radius: 50%; flex: none; } .dk-ppnone .dk-pp-f b { color: #fff; font-size: .9rem; }
.dk-faces-row .dk-pp.add .dk-pp-f b { font: 600 .9rem 'Outfit', sans-serif; }
/* Lord, 7 Oct: suggested replies keep their layout; only gold, so they never look like her own (navy) messages */
.dk-sugg button, .cw-replies button { background: #FFF6DC !important; border-color: #E8CF84 !important; color: #5A4310 !important; }
.dk-sugg button:hover, .cw-replies button:hover { background: #F3C94A !important; border-color: #F3C94A !important; color: #2A2000 !important; }
/* Lord, 7 Oct: the suggested replies are one row (smaller; it scrolls sideways if they don't fit) */
.dk-sugg { flex-wrap: nowrap !important; justify-content: flex-start !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none; padding-bottom: 8px !important; }
.dk-sugg::-webkit-scrollbar { display: none; }
.dk-sugg > button:first-child { margin-left: auto; }
.dk-sugg button { flex: none; padding: 5px 10px !important; font-size: .74rem !important; }
.dk-sugg { gap: 5px !important; padding-left: 10px !important; padding-right: 10px !important; } .dk-sugg button { padding: 5px 9px !important; }
/* Lord, 7 Oct: suggested replies, refined - light white chips with a thin gold line and gold text; airy, clearly "tap me", not a message */
.dk-sugg { gap: 6px !important; padding: 6px 12px 10px !important; }
.dk-sugg button, .cw-replies button { background: #fff !important; border: 1px solid #EBD9A2 !important; color: #8A6A12 !important; font: 600 .76rem 'Outfit', sans-serif !important; padding: 6px 11px !important; border-radius: 999px !important;
  box-shadow: 0 4px 10px -8px rgba(160, 122, 18, .55); transition: background .15s, color .15s, border-color .15s, transform .15s; }
.dk-sugg button:hover, .cw-replies button:hover { background: #FFF6DC !important; border-color: #E0B84F !important; color: #6A4E08 !important; transform: translateY(-1px); }
.cw-replies button { font-size: .86rem !important; padding: 7px 14px !important; }
.dk-sugg button { font-weight: 500 !important; font-size: .74rem !important; padding: 6px 10px !important; } .dk-sugg { gap: 5px !important; padding-left: 10px !important; padding-right: 10px !important; }
/* Lord, 7 Oct: more room - comfortable padding, and they wrap to a second line instead of scrolling */
.dk-sugg { flex-wrap: wrap !important; justify-content: flex-end !important; overflow: visible !important; gap: 8px !important; padding: 8px 14px 12px !important; }
.dk-sugg > button:first-child { margin-left: 0; }
.dk-sugg button { padding: 8px 14px !important; font-size: .8rem !important; }
/* Lord, 7 Oct (prototype): the ritual journey */
.mr-go { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0 6px; padding: 14px 16px; border-radius: 16px; text-decoration: none; color: #fff;
  background: radial-gradient(90% 120% at 0% 0%, #5B2B4C 0%, rgba(91,43,76,0) 55%), #1D1630; } .mr-go span { font: 400 .95rem 'Lora', serif; color: #E6DCF0; } .mr-go em { flex: none; font: 700 .88rem 'Outfit', sans-serif; font-style: normal; color: #F3C94A; }
.rp-proto { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 12px; padding: 8px 10px; border: 1.5px dashed #D9C9A8; border-radius: 12px; } .rp-proto span { font: 600 .74rem 'Outfit', sans-serif; color: #8A6A12; margin-right: 4px; }
.rp-proto button { padding: 4px 10px; border-radius: 999px; border: 1px solid #E2DAEC; background: #fff; cursor: pointer; font: 500 .76rem 'Outfit', sans-serif; color: #4A4060; } .rp-proto button.on { background: #1D1E46; color: #fff; border-color: #1D1E46; }
.rp-top { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 16px; align-items: center; padding: 20px 22px; border-radius: 22px; color: #fff; background: radial-gradient(90% 120% at 0% 0%, #5B2B4C 0%, rgba(91,43,76,0) 55%), radial-gradient(70% 90% at 100% 100%, #3A2560 0%, rgba(58,37,96,0) 62%), #1D1630; }
.rp-top > img { width: 84px; height: 84px; border-radius: 16px; object-fit: cover; } .rp-k { margin: 0; font: 600 .78rem 'Outfit', sans-serif; color: #E8B8C8; } .rp-top h1 { margin: 2px 0 0; font: 600 1.5rem/1.2 var(--voice); color: #F3D27A; } .rp-m { margin: 4px 0 0; font: 400 .82rem 'Outfit', sans-serif; color: #CFC2DE; }
.rp-strip { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; margin: 6px 0 0; padding: 12px 0 0; list-style: none; border-top: 1px solid rgba(255,255,255,.1); }
.rp-strip li { text-align: center; opacity: .55; } .rp-strip li i { display: grid; place-items: center; width: 26px; height: 26px; margin: 0 auto; border-radius: 50%; font-style: normal; font-size: .8rem; color: #F3D27A; background: rgba(255,255,255,.08); }
.rp-strip li span { display: block; margin-top: 4px; font: 500 .68rem 'Outfit', sans-serif; color: #E6DCF0; } .rp-strip li.ok { opacity: .8; } .rp-strip li.now { opacity: 1; } .rp-strip li.now i { background: #F3C94A; color: #2A2000; box-shadow: 0 0 0 4px rgba(243,201,74,.25); } .rp-strip li.now span { font-weight: 700; color: #fff; }
.rp-tonight { margin: 14px 0; padding: 20px 22px; border-radius: 22px; background: #fff; border: 1px solid #E8E2EE; }
.rt-k { margin: 0; font: 600 .78rem 'Outfit', sans-serif; color: #B0506F; } .rp-tonight h3 { margin: 4px 0 0; font: 600 1.45rem/1.2 var(--voice); color: #1D1E46; } .rt-p { margin: 6px 0 14px; font: 400 .95rem/1.5 'Lora', serif; color: #4A4060; } .rt-p.sm { font-size: .82rem; margin-top: 10px; }
.rt-form { display: grid; gap: 10px; } .rt-q { position: relative; display: grid; gap: 6px; } .rt-q > span { font: 600 .9rem 'Outfit', sans-serif; color: #1D1E46; } .rt-q > span i { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; border-radius: 50%; background: #F4F1F8; font: 700 .72rem 'Outfit', sans-serif; font-style: normal; color: #4A4060; }
.rt-q input { padding: 11px 50px 11px 14px; border-radius: 12px; border: 1px solid #E2DAEC; font: 400 1rem 'Lora', serif; } .rt-q input:focus { outline: none; border-color: #2B2F66; }
.rt-timer { position: absolute; right: 12px; bottom: 11px; font: 700 .8rem 'Outfit', sans-serif; font-style: normal; color: #C9B8DC; } .rt-timer.on { color: #B0506F; } .rt-timer.end { color: #1F8A4C; }
.rt-form .btn, .rt-acts .btn { width: auto !important; justify-self: start; padding: 10px 22px; } .rt-acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; }
.rt-ghost { padding: 9px 16px; border-radius: 999px; border: 1px solid #E2DAEC; background: #fff; cursor: pointer; font: 600 .86rem 'Outfit', sans-serif; color: #4A4060; text-decoration: none; }
.rt-btn { margin-top: 10px; padding: 9px 18px; border-radius: 999px; border: 1px solid #E8CF84; background: #FFF8E4; cursor: pointer; font: 600 .86rem 'Outfit', sans-serif; color: #5A4310; }
.rt-done { margin: 10px 0 0; font: 600 .9rem 'Outfit', sans-serif; color: #1F8A4C; } .rt-after { margin: 12px 0 0; font: 400 .86rem 'Outfit', sans-serif; color: #6E5E80; }
.rt-step { margin: 8px 0 4px; padding: 14px 16px; border-radius: 14px; background: #FFF8E4; border: 1px solid #EFE0B4; font: 500 1.08rem/1.45 'Lora', serif; color: #2A2240; }
.rt-check { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: #F7F4FA; } .rt-check[hidden] { display: none; } .rt-check p { margin: 0; font: 400 .9rem/1.5 'Outfit', sans-serif; color: #2A2240; } .rt-res { margin-top: 8px !important; }
.rt-night { margin-top: 18px; padding-top: 14px; border-top: 1px solid #F0EAF4; }
.rp-tonight .mr-player { margin-top: 8px; background: #1D1630; } .rp-tonight .mr-player .mr-pi b { color: #fff; }
.rt-sign { display: flex; gap: 6px; margin-top: 10px; } .rt-sign input { flex: 1; min-width: 0; padding: 9px 14px; border-radius: 999px; border: 1px solid #E2DAEC; font: 400 .92rem 'Lora', serif; } .rt-sign button { width: 38px; border-radius: 50%; border: 0; background: #F3C94A; cursor: pointer; }
.rt-cer { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; } .rt-cer > li { display: flex; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #FBF9FC; border: 1px solid #F0EAF4; }
.rt-cer > li > i { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid #D9CBE6; font-style: normal; color: #fff; } .rt-cer > li.ok > i { background: #1F8A4C; border-color: #1F8A4C; }
.rt-cer b { display: block; font: 600 .95rem 'Outfit', sans-serif; color: #1D1E46; } .rt-cer small { font: 400 .82rem 'Outfit', sans-serif; color: #6E5E80; } .rt-cer > li > div { flex: 1; min-width: 0; }
.rt-int { margin: 8px 0 0; padding: 12px 14px; border-radius: 12px; background: #FFFBF3; border: 1px solid #EFE3C8; font: 400 1rem/1.55 'Lora', serif; color: #2A2240; }
.rt-candle { display: block; margin-top: 8px; width: 44px; height: 70px; border: 0; background: none; cursor: pointer; position: relative; }
.rt-candle span { position: absolute; left: 13px; bottom: 0; width: 18px; height: 44px; border-radius: 4px; background: linear-gradient(#FFF6DC, #EAD9A6); }
.rt-candle span::after { content: ''; position: absolute; left: 50%; top: -18px; width: 10px; height: 16px; margin-left: -5px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 50% 70%, #FFE9A0, #F3A84A 60%, rgba(243,120,40,0)); opacity: 0; transition: opacity .4s; }
.rt-candle.lit span::after { opacity: 1; animation: rtflick 1.6s ease-in-out infinite; } @keyframes rtflick { 50% { transform: scale(1.08, .94); } } @media (prefers-reduced-motion: reduce) { .rt-candle.lit span::after { animation: none; } }
.rt-praise p { margin: 6px 0; padding: 10px 14px; border-radius: 14px 14px 14px 4px; background: #F7E9EF; font: 400 1rem 'Lora', serif; color: #2A2240; }
.rt-form input.burn { animation: rtburn 1.1s ease forwards; } @keyframes rtburn { 40% { background: #FFE2B8; color: #B0506F; } 100% { opacity: 0; transform: translateY(-18px) scale(.96); filter: blur(4px); } }
.rt-letter { margin-top: 8px; padding: 16px 18px; border-radius: 16px; background: #FFFBF3; border: 1px solid #EFE3C8; font: 400 1rem/1.6 'Lora', serif; color: #2A2240; } .rt-letter p { margin: 0 0 10px; }
.rp-box { margin: 0 0 14px; padding: 16px 18px; border-radius: 18px; background: #fff; border: 1px solid #E8E2EE; } .rp-box h3 { margin: 0 0 10px; font: 600 1.15rem var(--voice); color: #1D1E46; }
.rp-int p { margin: 0; font: 400 1rem/1.55 'Lora', serif; color: #2A2240; } .rp-int small { display: block; margin-top: 8px; font: 400 .78rem 'Outfit', sans-serif; color: #8A7F95; }
.rp-steps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; }
.rp-steps li { display: flex; gap: 8px; align-items: flex-start; font: 400 .84rem/1.4 'Outfit', sans-serif; color: #6E5E80; } .rp-steps li i { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #F4F1F8; font: 700 .66rem 'Outfit', sans-serif; font-style: normal; color: #6E5E80; }
.rp-steps li.ok { color: #2A2240; } .rp-steps li.ok i { background: #1F8A4C; color: #fff; } .rp-steps li.now { color: #1D1E46; font-weight: 600; } .rp-steps li.now i { background: #F3C94A; color: #2A2000; } .rp-steps li.praise i { background: #F7E9EF; color: #B0506F; }
.rp-sig { margin: 4px 0; font: 400 .9rem 'Lora', serif; color: #2A2240; } .rp-sig span { margin-right: 8px; font: 600 .74rem 'Outfit', sans-serif; color: #8A7F95; }
.rs-n { display: flex; gap: 14px; margin-top: 8px; } .rs-n span { font: 400 .76rem 'Outfit', sans-serif; color: #6E5E80; } .rs-n b { display: block; font: 700 1.3rem 'Outfit', sans-serif; color: #1D1E46; }
@media (max-width: 640px) { .rp-top { grid-template-columns: 60px minmax(0, 1fr); padding: 16px; } .rp-top > img { width: 60px; height: 60px; } .rp-top h1 { font-size: 1.2rem; } .rp-strip span { font-size: .58rem !important; } .rp-steps { grid-template-columns: 1fr; } .rp-tonight { padding: 16px; } }
/* Lord, 7 Oct: the ritual's moon path, lessons, signs, belief-builders */
.rp-goal { margin: 4px 0 0; font: 600 .86rem 'Outfit', sans-serif; color: #F3D27A; } .rp-built { margin: 6px 0 0; font: 400 .78rem/1.45 'Outfit', sans-serif; color: #CFC2DE; }
.rp-box h3 small { margin-left: 8px; font: 500 .76rem 'Outfit', sans-serif; color: #8A7F95; }
.rp-path ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.rp-path li { padding: 10px 8px; border-radius: 12px; text-align: center; background: #FBF9FC; border: 1px solid #F0EAF4; } .rp-path li i { display: grid; place-items: center; width: 26px; height: 26px; margin: 0 auto 4px; border-radius: 50%; font-style: normal; font: 700 .76rem 'Outfit', sans-serif; background: #F4F1F8; color: #6E5E80; }
.rp-path li b { display: block; font: 600 .86rem 'Outfit', sans-serif; color: #1D1E46; } .rp-path li small { display: block; margin-top: 2px; font: 400 .7rem/1.3 'Outfit', sans-serif; color: #8A7F95; }
.rp-path li.now { border-color: #E8CF84; background: #FFFBEF; } .rp-path li.now i { background: #F3C94A; color: #2A2000; } .rp-path li.ok i { background: #1F8A4C; color: #fff; } .rp-path li.lock { opacity: .6; }
.rp-l { display: flex; gap: 10px; align-items: center; margin: 0; padding: 9px 4px; border-top: 1px solid #F4F0F7; text-decoration: none; } .rp-l:first-of-type { border-top: 0; }
.rp-l i { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-style: normal; font-size: .76rem; background: #1D1630; color: #F3C94A; } .rp-l.ok i { background: #1F8A4C; color: #fff; } .rp-l.lock i { background: #F4F1F8; }
.rp-l b { display: block; font: 600 .92rem 'Outfit', sans-serif; color: #1D1E46; } .rp-l small { font: 400 .76rem 'Outfit', sans-serif; color: #8A7F95; } .rp-l.lock b { color: #8A7F95; }
.rt-lesson { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 12px 14px; border-radius: 16px; text-decoration: none; background: #FFF8E4; border: 1px solid #EFE0B4; }
.rt-lp { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #1D1630; color: #F3C94A; } .rt-lesson small { display: block; font: 600 .74rem 'Outfit', sans-serif; color: #8A6A12; } .rt-lesson b { font: 600 1rem var(--voice); color: #1D1E46; } .rt-lesson > span:nth-child(2) { flex: 1; } .rt-lesson em { font: 700 .86rem 'Outfit', sans-serif; font-style: normal; color: #2B2F66; }
.rt-proof, .rt-strong { margin: 0 0 12px; font: 500 .84rem 'Outfit', sans-serif; color: #4A4060; } .rt-proof i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #3DCB6E; } .rt-strong { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: #F4F1FA; }
.rt-signs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .rt-signs button { display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px; border-radius: 999px; border: 1px solid #E2DAEC; background: #fff; cursor: pointer; font: 500 .82rem 'Outfit', sans-serif; color: #4A4060; }
.rt-signs button span { color: #B0506F; } .rt-signs button.on { background: #1D1E46; border-color: #1D1E46; color: #fff; } .rt-signs button.on span { color: #F3C94A; }
.rt-card { margin-top: 8px; padding: 14px; border-radius: 14px; background: #FFFBF3; border: 1px solid #EFE3C8; } .rt-card p { margin: 0; font: 400 1rem/1.55 'Lora', serif; color: #2A2240; }
.rt-sig { margin-top: 10px !important; font: italic 400 1.5rem 'Cormorant Garamond', Georgia, serif !important; color: #1D1E46 !important; } .rt-sig small { display: block; font: 400 .74rem 'Outfit', sans-serif; font-style: normal; color: #8A7F95; }
.rt-signf { display: flex; gap: 6px; margin-top: 10px; } .rt-signf input { flex: 1; min-width: 0; padding: 9px 12px; border-radius: 10px; border: 1px solid #E2DAEC; font: italic 400 1.1rem Georgia, serif; } .rt-signf button { padding: 8px 16px; border-radius: 10px; border: 0; background: #1D1E46; color: #fff; font: 600 .84rem 'Outfit', sans-serif; cursor: pointer; }
.rt-sign { display: block; margin-top: 10px; } .rt-sk { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; } .rt-sk label { cursor: pointer; } .rt-sk input { display: none; } .rt-sk span { display: inline-block; padding: 5px 10px; border-radius: 999px; border: 1px solid #E2DAEC; font: 500 .78rem 'Outfit', sans-serif; color: #4A4060; } .rt-sk input:checked + span { background: #1D1E46; color: #fff; border-color: #1D1E46; }
.rt-sr { display: flex; gap: 6px; } .rt-sr input { flex: 1; min-width: 0; padding: 9px 14px; border-radius: 999px; border: 1px solid #E2DAEC; font: 400 .92rem 'Lora', serif; } .rt-sr button { width: 38px; border-radius: 50%; border: 0; background: #F3C94A; cursor: pointer; }
.rt-live { display: inline-block; margin-top: 12px; font: 600 .84rem 'Outfit', sans-serif; color: #B0506F; text-decoration: none; }
.rt-story { margin: 16px 0 0; padding: 12px 14px; border-left: 3px solid #E8CF84; background: #FFFBF3; font: 400 .92rem/1.5 'Lora', serif; color: #2A2240; } .rt-story b { display: block; margin-top: 4px; font: 600 .76rem 'Outfit', sans-serif; color: #8A6A12; }
.rt-ai { color: #8A6A12 !important; border-color: #E8CF84 !important; } .rt-q input.ai { background: #FFFBEF; }
.rs-sg { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .rs-sg span { padding: 4px 9px; border-radius: 999px; background: #F4F1F8; font: 500 .74rem 'Outfit', sans-serif; color: #4A4060; } .rs-sg b { color: #B0506F; }
.rl { overflow: hidden; margin-top: 6px; border-radius: 22px; background: #fff; border: 1px solid #E8E2EE; } .rl-img { position: relative; height: 240px; } .rl-img img { width: 100%; height: 100%; object-fit: cover; }
.rl-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(29,22,48,0) 30%, rgba(29,22,48,.9)); } .rl-img > div { position: absolute; left: 22px; right: 22px; bottom: 16px; } .rl-img small { font: 600 .78rem 'Outfit', sans-serif; color: #E8B8C8; } .rl-img h1 { margin: 4px 0 0; font: 600 1.7rem/1.2 var(--voice); color: #F3D27A; }
.rl-b { padding: 18px 22px 22px; } .rl-b .mr-player { background: #1D1630; } .rl-t { margin-top: 14px; } .rl-t p { margin: 0 0 12px; font: 400 1.05rem/1.7 'Lora', serif; color: #2A2240; } .rl-go { display: inline-block; width: auto !important; margin-top: 6px; padding: 10px 24px; }
@media (max-width: 640px) { .rp-path ol { grid-template-columns: repeat(5, minmax(56px, 1fr)); overflow-x: auto; } .rp-path li small { display: none; } .rl-img { height: 180px; } .rl-img h1 { font-size: 1.35rem; } }
.mft-goal { display: inline-block; align-self: flex-start; margin: 2px 0 2px; padding: 2px 9px; border-radius: 999px; background: #F4F1FA; font: 600 .72rem 'Outfit', sans-serif; color: #2B2F66; }
/* Lord, 7 Oct: the lesson format - belief meter, named idea, do it now, the words */
.rl-meter { margin: 0 0 18px; padding: 14px 16px; border-radius: 16px; background: #F7F4FA; } .rl-meter p { margin: 0; font: 400 .86rem 'Outfit', sans-serif; color: #4A4060; }
.rl-bel { margin: 6px 0 10px !important; font: 500 1.08rem/1.4 'Lora', serif !important; color: #1D1E46 !important; }
.rl-scale { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; } .rl-scale button { padding: 8px 0; border-radius: 8px; border: 1px solid #E2DAEC; background: #fff; cursor: pointer; font: 600 .82rem 'Outfit', sans-serif; color: #4A4060; }
.rl-scale button.fill { background: #EEE6F6; border-color: #EEE6F6; } .rl-scale button.on { background: #1D1E46; border-color: #1D1E46; color: #F3C94A; }
.rl-delta { margin-top: 10px !important; font-weight: 600 !important; color: #1F8A4C !important; }
.rl-s { margin: 0 0 18px; padding-top: 16px; border-top: 1px solid #F0EAF4; } .rl-n { margin: 0 0 10px; font: 700 .8rem 'Outfit', sans-serif; color: #B0506F; } .rl-n i { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; border-radius: 50%; background: #B0506F; color: #fff; font-style: normal; font-size: .72rem; }
.rl-idea { padding: 18px 20px; border-radius: 18px; color: #fff; background: radial-gradient(90% 120% at 0% 0%, #5B2B4C 0%, rgba(91,43,76,0) 55%), #1D1630; }
.rl-in { display: inline-block; padding: 4px 12px; border-radius: 999px; background: #F3C94A; color: #2A2000; font: 700 .8rem 'Outfit', sans-serif; } .rl-il { margin: 10px 0 8px; font: 600 1.25rem/1.35 var(--voice); color: #F3D27A; }
.rl-idea ol { margin: 0; padding-left: 20px; } .rl-idea li { margin: 6px 0; font: 400 .95rem/1.5 'Lora', serif; color: #E6DCF0; }
.rl-q { margin: 0 0 10px; font: 600 .95rem 'Outfit', sans-serif; color: #1D1E46; } .rl-q.sm { margin-top: 12px; font-size: .86rem; }
.rl-words { margin: 0; padding: 16px 18px; border-radius: 16px; background: #FFFBF3; border: 1px solid #EFE3C8; font: 500 1.12rem/1.5 'Lora', serif; color: #1D1E46; }
.rl-to { margin: 0; font: 400 .98rem/1.5 'Lora', serif; color: #2A2240; }
.rl-ppp { margin-top: 10px; } .rl-ppp p { display: flex; align-items: center; gap: 6px; margin: 6px 0; } .rl-ppp span { flex: 1; font: 500 .9rem 'Outfit', sans-serif; color: #2A2240; }
.rl-ppp button { padding: 5px 14px; border-radius: 999px; border: 1px solid #E2DAEC; background: #fff; cursor: pointer; font: 600 .8rem 'Outfit', sans-serif; color: #4A4060; } .rl-ppp button.on { background: #1D1E46; border-color: #1D1E46; color: #fff; }
.rl-res { margin-top: 10px !important; padding: 12px 14px; border-radius: 12px; background: #EEF7F1; font: 500 .9rem/1.5 'Outfit', sans-serif !important; color: #1F5A35 !important; display: block !important; }
.rs-n.big { gap: 20px; margin: 4px 0 14px; } .rs-n.big b { font-size: 1.6rem; }
.rs-b { display: flex; gap: 10px; justify-content: space-between; margin: 8px 0 0; font: 400 .82rem/1.4 'Lora', serif; color: #4A4060; } .rs-b b { flex: none; font: 700 .9rem 'Outfit', sans-serif; color: #1F8A4C; }
@media (max-width: 640px) { .rl-scale button { padding: 7px 0; font-size: .74rem; } .rl-idea { padding: 16px; } }
/* Lord, 8 Oct: the cards and the moon jar inside the ritual */
.rp-morning { margin: 14px 0 0; padding: 20px 22px; border-radius: 22px; background: radial-gradient(90% 120% at 0% 0%, #5B2B4C 0%, rgba(91,43,76,0) 55%), radial-gradient(70% 90% at 100% 100%, #3A2560 0%, rgba(58,37,96,0) 62%), #1D1630; color: #fff; }
.rp-morning .rt-k { color: #E8B8C8; } .rp-morning h3 { margin: 4px 0 0; font: 600 1.45rem/1.2 var(--voice); color: #F3D27A; } .rp-morning .rt-p { color: #E6DCF0; }
.rp-morning .ms-cards { margin-top: 6px; } .rp-morning .mf-aff2 { margin: 10px 0 0; } .rp-morning .mf-aff2 blockquote { color: #FFF6EA; } .rp-morning .mf-aff2 figcaption { color: #CFC2DE; }
.rp-morning .mj-affirm { color: #FFF6EA; }
.rj-w { display: flex; gap: 12px; align-items: center; margin-top: 6px; } .rj-w .jar { flex: none; width: 74px; height: 88px; }
.rj-n { margin: 0 !important; font: 400 .86rem 'Outfit', sans-serif !important; color: #4A4060 !important; } .rj-n b { font: 700 1.5rem 'Outfit', sans-serif; color: #B0506F; } .rj .jar-how { margin-top: 8px; }
/* Lord, 8 Oct: day one welcome (Halbert letter) */
.rw { overflow: hidden; margin-top: 6px; border-radius: 22px; background: #fff; border: 1px solid #E8E2EE; }
.rw-top { position: relative; overflow: hidden; padding: 26px 28px 24px; color: #fff; background: radial-gradient(90% 120% at 0% 0%, #5B2B4C 0%, rgba(91,43,76,0) 55%), radial-gradient(70% 90% at 100% 100%, #3A2560 0%, rgba(58,37,96,0) 62%), #1D1630; }
.rw-k { position: relative; margin: 0; font: 600 .84rem 'Outfit', sans-serif; color: #E8B8C8; } .rw-top h1 { position: relative; margin: 6px 0 0; font: 600 1.8rem/1.2 var(--voice); color: #F3D27A; }
.rw-letter { padding: 22px 28px 6px; background: #FFFBF3; font: 400 1.05rem/1.65 'Lora', serif; color: #2A2240; } .rw-letter p { margin: 0 0 14px; } .rw-letter h3 { margin: 22px 0 10px; font: 600 1.3rem var(--voice); color: #1D1E46; }
.rw-plan, .rw-ask { margin: 0 0 14px; padding: 0; list-style: none; } .rw-plan li { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid #EFE3C8; } .rw-plan li:first-child { border-top: 0; }
.rw-plan i { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #1D1630; color: #F3C94A; font: 700 .8rem 'Outfit', sans-serif; font-style: normal; }
.rw-plan b { display: block; font: 600 .95rem 'Outfit', sans-serif; color: #1D1E46; } .rw-plan span { font-size: .98rem; }
.rw-ask li { position: relative; padding: 6px 0 6px 26px; } .rw-ask li::before { content: '\2665'; position: absolute; left: 0; color: #B0506F; }
.rw-ps { padding: 12px 14px; border-left: 3px solid #E8CF84; background: #fff; }
.rw-go { padding: 16px 28px 26px; background: #FFFBF3; } .rw-go .btn { display: inline-block; width: auto !important; padding: 12px 28px; }
@media (max-width: 640px) { .rw-top { padding: 20px 18px; } .rw-top h1 { font-size: 1.4rem; } .rw-letter { padding: 18px; font-size: 1rem; } .rw-go { padding: 14px 18px 22px; } }
.rp-top h1 a, .mr-h h3 a { color: inherit; text-decoration: none; } .rp-top h1 a:hover, .mr-h h3 a:hover { text-decoration: underline; text-underline-offset: 4px; } .rp-letter { display: inline-block; margin-top: 6px; font: 600 .8rem 'Outfit', sans-serif; color: #F3C94A; text-decoration: none; }
/* Lord, 8 Oct: lean ritual - one thing a day; the rest folds away */
details.rp-morning { padding: 0; } details.rp-morning > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 20px; }
details.rp-morning > summary::-webkit-details-marker { display: none; } details.rp-morning > summary span { font: 600 1.05rem var(--voice); color: #F3D27A; } details.rp-morning > summary small { font: 500 .8rem 'Outfit', sans-serif; color: #CFC2DE; }
details.rp-morning[open] { padding-bottom: 18px; } details.rp-morning[open] > *:not(summary) { margin-left: 20px; margin-right: 20px; }
.rt-more { margin-top: 16px; padding-top: 12px; border-top: 1px solid #F0EAF4; } .rt-more summary { cursor: pointer; font: 600 .86rem 'Outfit', sans-serif; color: #6E5E80; }
.rt-back { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: #EEF7F1; font: 500 .9rem 'Outfit', sans-serif; color: #1F5A35; }
.rs-with { margin: 10px 0 0 !important; font: 500 .78rem 'Outfit', sans-serif !important; color: #6E5E80 !important; } .rs-with i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #3DCB6E; }
/* Lord, 8 Oct: the affirmation on the cream card inside the dark morning block must be dark text */
.rp-morning .mf-aff2 blockquote { color: #1D1E46 !important; opacity: 1 !important; } .rp-morning .mf-aff2 figcaption { color: #6E5E80 !important; }
/* Lord, 8 Oct: streaks page and super-score; the ritual's story, the moon feed */
.stk-link { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 16px 12px; border-top: 1px solid #F0E8E0; text-decoration: none; font: 500 .8rem 'Outfit', sans-serif; color: #6E5E80; } .stk-link b { color: #B0506F; font-weight: 700; } .stk-link em { font-style: normal; font-weight: 600; color: #2B2F66; }
.sk-top { position: relative; overflow: hidden; margin: 6px 0 16px; padding: 24px; border-radius: 22px; text-align: center; color: #fff; background: radial-gradient(90% 120% at 0% 0%, #5B2B4C 0%, rgba(91,43,76,0) 55%), radial-gradient(70% 90% at 100% 100%, #3A2560 0%, rgba(58,37,96,0) 62%), #1D1630; }
.sk-k { position: relative; margin: 0; font: 600 .84rem 'Outfit', sans-serif; color: #E8B8C8; } .sk-n { position: relative; margin: 4px 0; font: 700 3.4rem/1 'Outfit', sans-serif; color: #F3D27A; } .sk-sub { position: relative; margin: 0; font: 400 .88rem 'Outfit', sans-serif; color: #CFC2DE; } .sk-sub b { color: #F3C94A; }
.sk-list { display: grid; gap: 8px; } .sk-r { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: #fff; border: 1px solid #E8E2EE; text-decoration: none; }
.sk-i { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #1D1630; color: #F3C94A; } .sk-r.done .sk-i { background: #1F8A4C; color: #fff; }
.sk-t { flex: 1; min-width: 0; } .sk-t b { display: block; font: 600 1rem 'Outfit', sans-serif; color: #1D1E46; } .sk-t small { font: 400 .8rem 'Outfit', sans-serif; color: #6E5E80; }
.sk-d { text-align: center; font: 400 .72rem 'Outfit', sans-serif; color: #8A7F95; } .sk-d b { display: block; font: 700 1.3rem 'Outfit', sans-serif; color: #B0506F; }
.sk-r em { flex: none; min-width: 72px; text-align: right; font: 700 .82rem 'Outfit', sans-serif; font-style: normal; color: #2B2F66; } .sk-r.done em { color: #1F8A4C; }
.sk-how { margin: 14px 4px; font: 400 .82rem 'Outfit', sans-serif; color: #8A7F95; }
.rs-ch { border-top: 1px solid #F4F0F7; } .rs-ch:first-of-type { border-top: 0; } .rs-ch summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 10px 2px; } .rs-ch summary::-webkit-details-marker { display: none; }
.rs-ch summary i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #F7E9EF; color: #B0506F; font: 700 .78rem 'Outfit', sans-serif; font-style: normal; } .rs-ch summary b { font: 600 1rem var(--voice); color: #1D1E46; }
.rs-tx { padding: 0 2px 12px 38px; } .rs-tx p { margin: 0 0 10px; font: 400 1rem/1.65 'Lora', serif; color: #2A2240; } .rs-cliff { font-weight: 600 !important; color: #B0506F !important; }
.mfd-r { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid #F4F0F7; } .mfd-r b { font: 600 .86rem 'Outfit', sans-serif; color: #1D1E46; } .mfd-r b small { margin-left: 6px; font-weight: 400; color: #8A7F95; } .mfd-r p { margin: 2px 0 0; font: 400 .92rem/1.5 'Lora', serif; color: #2A2240; }
.mfd-r.me { background: #FFFBF3; border-radius: 12px; padding: 10px; } .mfd form { margin: 0 0 6px; } .mfd-n { margin: 8px 0 0; font: 400 .74rem 'Outfit', sans-serif; color: #8A7F95; }

/* Lord, 14 Oct: Create My Ritual (her words, her talisman, her sound; Catherine seals it). Light card on Manifest (one dark card there); the ritual page uses the plum night */
.myr-c { margin: 0 0 24px; padding: 20px; border-radius: 22px; background: #fff; border: 1px solid #E8E2EE; }
.myr-pitch { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 20px; align-items: center; background: linear-gradient(180deg, #FFF8EA 0%, #FFFBF3 100%); border-color: #EEDFC0; }
.myr-pitch h2 { margin: 2px 0 6px; font: 600 1.45rem/1.2 var(--voice); color: #1D1E46; }
.myr-pitch p { margin: 0 0 14px; font: 400 .97rem/1.5 'Lora', Georgia, serif; color: #4A4256; max-width: 560px; }
.myr-k { margin: 0; font: 600 .78rem var(--sans); color: var(--gold); }
.myr-mini { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #1D1630; flex: none; }
.myr-mini.big { width: 104px; height: 104px; }
.myr-row { display: flex; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid #F0EAF4; color: inherit; text-decoration: none; }
.myr-row b { display: block; font: 600 1.05rem var(--voice); color: #1D1E46; } .myr-row small { color: var(--muted); }
.myr-row em { margin-left: auto; font: 600 .9rem var(--sans); font-style: normal; color: var(--gold); white-space: nowrap; }
.myr-more { display: inline-block; margin-top: 10px; font: 600 .92rem var(--sans); color: var(--gold); text-decoration: none; }
.myr-page h1, .myr-hero h1, .myr-join h2 { font: 600 1.9rem/1.15 var(--voice); color: #1D1E46; margin: 4px 0 8px; }
.myr-lead { font: 400 1.02rem/1.55 'Lora', Georgia, serif; color: #4A4256; max-width: 620px; margin: 0 0 18px; }
.myr-form fieldset { border: 0; margin: 0 0 18px; padding: 0; }
.myr-form legend { font: 700 .95rem var(--sans); color: #1D1E46; margin-bottom: 8px; }
.myr-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.myr-o { position: relative; cursor: pointer; } .myr-o input { position: absolute; opacity: 0; }
.myr-o span { display: grid; gap: 2px; height: 100%; padding: 12px 14px; border: 1.5px solid #E8E2EE; border-radius: 16px; background: #fff; }
.myr-o small { color: var(--muted); font-size: .8rem; } .myr-o b { font: 600 1.08rem var(--voice); color: #1D1E46; } .myr-o em { font-style: normal; font-size: .85rem; color: #5A5070; }
.myr-o input:checked + span { border-color: var(--gold); background: var(--gold-soft); box-shadow: 0 0 0 2px rgba(176,138,69,.25); }
.myr-o input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.myr-in { width: 100%; max-width: 360px; padding: 12px 14px; border: 1.5px solid #E8E2EE; border-radius: 12px; font: 400 1rem var(--sans); }
.myr-hint { margin: 6px 0 0; font-size: .86rem; color: var(--muted); }
.myr-night { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--gold-soft); border: 1px solid #E8D7A8; font: 600 .98rem var(--sans); color: #6B5320; display: inline-block; }
.myr-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 26px; align-items: center; padding: 26px 28px; border-radius: 24px; color: #fff; margin: 6px 0 22px;
  background: radial-gradient(90% 120% at 0% 0%, #5B2B4C 0%, rgba(91,43,76,0) 55%), radial-gradient(70% 90% at 100% 100%, #3A2560 0%, rgba(58,37,96,0) 62%), #1D1630; }
.myr-hero h1 { color: #F6E2A6; } .myr-hero .myr-k { color: #E7C873; } .myr-seal { margin: 0; font: 400 1rem/1.5 'Lora', Georgia, serif; color: #F4ECF8; }
.myr-join { margin: 0 0 20px; padding: 20px 22px; border-radius: 20px; background: var(--gold-soft); border: 1px solid #E8D7A8; } .myr-join h2 { font-size: 1.45rem; } .myr-join p { font: 400 1rem/1.55 'Lora', Georgia, serif; color: #4A4256; }
.myr-sec { margin: 0 0 18px; padding: 20px 22px; border-radius: 20px; background: #fff; border: 1px solid #E8E2EE; }
.myr-sec h2 { margin: 0 0 4px; font: 600 1.35rem var(--voice); color: #1D1E46; } .myr-how { margin: 0 0 14px; color: #5A5070; font-size: .95rem; }
.myr-words { padding: 18px 20px; border-radius: 14px; background: #FFFBF3; border-left: 3px solid var(--gold); }
.myr-words p { margin: 0 0 8px; font: italic 600 1.25rem/1.45 'Lora', Georgia, serif; color: #2B2231; } .myr-words p:last-child { margin: 0; }
.myr-words.lk p + p { filter: blur(6px); user-select: none; }
.myr-sigbox { display: grid; place-items: center; padding: 18px; border-radius: 18px; background: #1D1630; }
.myr-sec .mr-player { background: #1D1630; color: #fff; }
.myr-tiers { margin-top: 22px; } .myr-tiers h3 { margin: 0 0 10px; font: 600 1.15rem var(--voice); color: #1D1E46; }
.myr-tg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.myr-t { padding: 14px; border-radius: 16px; background: #fff; border: 1px solid #E8E2EE; } .myr-t.on { border: 2px solid var(--gold); background: var(--gold-soft); }
.myr-t b { display: block; font: 600 1rem var(--voice); color: #1D1E46; margin-bottom: 6px; } .myr-t b i { font: 700 .7rem var(--sans); font-style: normal; color: #fff; background: var(--gold); border-radius: 99px; padding: 2px 8px; margin-left: 4px; vertical-align: middle; }
.myr-t ul { margin: 0; padding-left: 18px; font-size: .88rem; color: #4A4256; } .myr-t li { margin: 3px 0; }
.myr-up { display: inline-block; margin-top: 10px; font: 600 .92rem var(--sans); color: var(--gold); text-decoration: none; }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--muted); text-decoration: underline; cursor: pointer; }
@media (max-width: 720px) {
  .myr-pitch { grid-template-columns: 1fr; text-align: left; } .myr-hero { grid-template-columns: 1fr; justify-items: start; padding: 20px; }
  .myr-hero .myr-sig { width: 140px; height: 140px; } .myr-tg { grid-template-columns: 1fr; } .myr-page h1, .myr-hero h1 { font-size: 1.55rem; }
}

/* Lord, 14 Oct: the ritual is done for her. Taps, audios, things to read, messages from him */
.rt-light { display: flex; align-items: center; gap: 16px; margin: 4px 0 12px; padding: 14px 16px; border-radius: 16px; background: #1D1630; }
.rt-light .rt-p, .rt-light .rt-done { margin: 0; color: #F3EAD7; } .rt-light .rt-p b { color: #E7C873; }
.rt-candle.big { flex: none; margin: 0; width: 52px; height: 84px; } .rt-candle.big span { left: 15px; width: 22px; height: 52px; }
.rt-felt { display: table; width: auto; margin: 14px 0 0 auto; }
.rt-saw { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #EEE7F3; }
.rt-saw > span { font: 500 .84rem 'Outfit', sans-serif; color: #6A6080; } .rt-saw .rt-signs { margin: 0; }
.rt-read { padding: 4px 0 2px; } .rt-read p { margin: 0 0 10px; font: 400 1.06rem/1.6 'Lora', serif; color: #2A2240; }
.rt-his { display: flex; gap: 12px; align-items: flex-start; } .rt-his img { flex: none; width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.rt-his p { margin: 0; padding: 12px 14px; border-radius: 4px 16px 16px 16px; background: #F4F1FA; font: 400 1rem/1.55 'Lora', serif; color: #2A2240; }
.rt-reply { display: block; margin: 8px 0 0 58px; font: 600 .88rem 'Outfit', sans-serif; color: #5B2B4C; text-decoration: none; }
.rt-let { display: flex; flex-wrap: wrap; gap: 8px; } .rt-let button { padding: 10px 14px; border-radius: 999px; border: 1px solid #E2DAEC; background: #fff; cursor: pointer; font: 500 .9rem 'Outfit', sans-serif; color: #2A2240; transition: opacity 1s, transform 1s, color .3s, background .3s; }
.rt-let button.burn { background: linear-gradient(#F3A84A, #B0506F); color: #fff; opacity: 0; transform: translateY(-14px) scale(.9); }
@media (prefers-reduced-motion: reduce) { .rt-let button { transition: none; } }
.rt-note { margin-top: 14px; }
.rp-did .rp-dl { display: flex; gap: 10px; margin: 0; padding: 7px 0; border-top: 1px solid #F0EAF4; font: 400 .9rem/1.45 'Outfit', sans-serif; color: #3A3150; } .rp-did .rp-dl:first-of-type { border-top: 0; }
.rp-did .rp-dl i { flex: none; width: 18px; font-style: normal; text-align: center; color: #B08A2E; }
.mfd-h { margin-top: 4px; padding: 2px 10px; border-radius: 999px; border: 1px solid #EEE7F3; background: #fff; cursor: pointer; font: 500 .78rem 'Outfit', sans-serif; color: #8A7F99; } .mfd-h.on { color: #B0506F; border-color: #F0D3DD; background: #FFF4F7; }
.rl-wk { margin: 18px 0 4px; font: 600 .82rem 'Outfit', sans-serif; color: #6A6080; }
@media (max-width: 640px) { .rt-felt { width: 100%; } .rt-reply { margin-left: 0; } }

/* Lord, 14 Oct: the six tiles are gone from Manifest; the moon band stays on its own */
.mfr.mfr-moonly { padding: 0; background: none !important; border: 0 !important; }
.mfr.mfr-moonly > .mfr-moon { margin: 0 !important; border-radius: 999px !important; }
/* Create My Ritual: the full menu, tagged */
.myr-form legend small { margin-left: 6px; font: 500 .8rem var(--sans); color: var(--muted); }
.myr-tag { margin-top: 4px; font: 500 .72rem var(--sans); font-style: normal; color: #8A7F95; }
.myr-all { margin-top: 12px; } .myr-all summary { cursor: pointer; font: 600 .9rem var(--sans); color: #5B2B4C; }
.myr-gh { margin: 14px 0 6px; font: 700 .82rem var(--sans); color: #6A6080; }
/* The daily ritual page: one thing a day from her guide */
.md-hero { grid-template-columns: 120px minmax(0, 1fr); gap: 20px; padding: 22px 24px; }
.md-hero h1 { font-size: 1.6rem !important; } .md-goal { margin: 0 0 6px; font: 600 .9rem var(--sans); color: #E7C873; }
.md-guide { display: flex; align-items: center; gap: 12px; margin: 14px 0 0; padding: 10px 14px; border-radius: 16px; background: #fff; border: 1px solid #E8E2EE; }
.md-guide > img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; } .md-guide b { display: block; font: 600 1rem var(--voice); color: #1D1E46; } .md-guide small { color: var(--muted); font-size: .8rem; }
.md-switch { margin-left: auto; position: relative; } .md-switch summary { cursor: pointer; list-style: none; font: 600 .86rem var(--sans); color: #5B2B4C; } .md-switch summary::-webkit-details-marker { display: none; }
.md-switch > div { position: absolute; right: 0; top: 28px; z-index: 5; width: 250px; padding: 6px; border-radius: 14px; background: #fff; border: 1px solid #E8E2EE; box-shadow: 0 12px 30px rgba(29,22,48,.14); }
.md-switch button { display: grid; grid-template-columns: 34px 1fr; column-gap: 10px; align-items: center; width: 100%; padding: 6px 8px; border: 0; border-radius: 10px; background: none; cursor: pointer; text-align: left; font: 600 .9rem var(--sans); color: #1D1E46; }
.md-switch button img { grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; object-fit: cover; } .md-switch button small { font-weight: 400; } .md-switch button.on { background: #F4F1FA; }
.md-today { margin-top: 14px; padding: 22px 24px; border-radius: 22px; background: #FFFBF3; border: 1px solid #EFE3C8; }
.md-k { margin: 0 0 6px; font: 600 .8rem var(--sans); color: #B0506F; } .md-hi { margin: 0 0 10px; font: 500 1.05rem/1.5 'Lora', serif; color: #5B2B4C; }
.md-today h3 { margin: 0 0 8px; font: 600 1.35rem/1.25 var(--voice); color: #1D1E46; } .md-today .myr-words p { font-style: normal; }
.md-sign { margin: 14px 0 0; font: 400 .95rem 'Lora', serif; color: #4A4060; } .md-sign b { font-family: var(--voice); font-size: 1.1rem; color: #1D1E46; }
.md-acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 16px; } .md-acts .rt-done { margin: 0; }
.md-next { margin: 10px 4px 0; text-align: right; font: 400 .88rem var(--sans); color: #6A6080; } .md-next b { color: #1D1E46; }
.md-earlier { margin-top: 18px; } .md-more { margin-top: 14px; } .md-more > summary { cursor: pointer; font: 600 .88rem var(--sans); color: #6A6080; }
.md-lock { opacity: .9; } .md-sg img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; float: right; }
@media (max-width: 640px) { .md-acts .btn { width: 100% !important; justify-content: center; } .md-hero { grid-template-columns: 1fr; text-align: center; } .md-hero .myr-sig { margin: 0 auto; width: 96px; height: 96px; } .md-today { padding: 18px 16px; } .md-acts { justify-content: stretch; } .md-acts > * { flex: 1 1 100%; text-align: center; } }
.md-today .mr-player { margin-top: 10px; background: #1D1630; } .md-today .mr-player .mr-pi b { color: #fff; }
.md-acts .btn { width: auto !important; display: inline-flex; margin: 0; }
.md-today .myr-sigbox { padding: 14px; } .md-today .myr-sigbox .myr-sig { width: 170px; height: 170px; }
@media (max-width: 640px) { .md-acts .btn { width: 100% !important; justify-content: center; } }