/* ===========================================================================
   AstroChat · Sell report from Today — demo
   Tokens are the Astrostar library values quoted in the brief.
   =========================================================================== */
:root{
  --brand:#F06A3A; --brand-dk:#D9572A; --brand50:#FDF0EB;
  --g900:#101828; --g800:#1D2939; --g700:#344054; --g600:#475467; --g500:#667085; --g400:#98A2B3;
  --g300:#D0D5DD; --g200:#EAECF0; --g100:#F2F4F7; --g50:#F9FAFB;
  --w900:#7A2E0E; --w700:#B54708; --w500:#F79009; --w100:#FEF0C7; --w50:#FFFAEB; --w25:#FFFCF5;
  --s700:#027A48; --s50:#ECFDF3;
  --purple:#6941C6; --purple50:#F4EBFF;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --serif:'Cormorant Infant',Georgia,serif;
  --dev:'Noto Sans Devanagari','Inter',sans-serif;
  --sbh:26px;            /* status bar height */
}
*{box-sizing:border-box}
/* Several things toggled with [hidden] are flex containers, which would otherwise win. */
[hidden]{display:none!important}
html,body{margin:0;padding:0;height:100%}
body{
  font-family:var(--sans);color:var(--g700);background:#EDEFF3;
  -webkit-font-smoothing:antialiased;
  /* The demo chrome must never be the thing that scrolls — each screen scrolls on its own. */
  overflow:hidden;
}
button{font-family:inherit;cursor:pointer}
img{display:block}

/* ---------- Desktop stage + phone frame ---------- */
.stage{height:100dvh;display:grid;place-items:center;padding:24px}
/* No max-height: that used to squash the frame on short laptop screens and
   break the 9:20 ratio. fitPhone() in app.js zooms the whole frame instead. */
.phone{
  position:relative;width:360px;height:800px;
  background:#fff;border-radius:40px;
  /* clip, not hidden: the parked sheet and the off-screen screens create scrollable
     overflow, and `hidden` would let a focus/scrollIntoView drag the whole frame. */
  overflow:hidden;overflow:clip;
  box-shadow:0 0 0 10px #1A1D23,0 0 0 12px #35393F,0 30px 60px -20px rgba(16,24,40,.45);
}
.screens{position:absolute;inset:0;overflow:hidden;overflow:clip}

/* ---------- Entry switcher (demo chrome, outside the phone) ---------- */
.switcher{
  position:fixed;left:24px;top:24px;width:252px;z-index:5;
  background:#fff;border:1px solid var(--g200);border-radius:16px;padding:14px;
  box-shadow:0 8px 24px -12px rgba(16,24,40,.25);
}
.switcher b{display:block;font-size:12px;line-height:18px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--g400);margin-bottom:10px}
.switcher button{display:block;width:100%;text-align:left;border:1px solid var(--g200);background:#fff;
  border-radius:10px;padding:9px 11px;margin-bottom:6px;font-size:14px;line-height:20px;font-weight:600;color:var(--g700)}
.switcher button small{display:block;font-size:12px;line-height:18px;font-weight:400;color:var(--g500);margin-top:1px}
.switcher button.on{border-color:var(--brand);background:var(--brand50);color:var(--w900)}
.switcher hr{border:0;border-top:1px solid var(--g200);margin:10px 0}
/* Touchpoint chips: docked under the selected day's card, they continue it —
   the day button loses its bottom corners and the panel carries them instead. */
.switcher button.on.has-tp{border-bottom-left-radius:0;border-bottom-right-radius:0;margin-bottom:0}
.tp-wrap{margin:0 0 6px;padding:0 11px 10px;background:var(--brand50);
  border:1px solid var(--brand);border-top:0;border-radius:0 0 10px 10px}
.tp-wrap::before{content:"";display:block;border-top:1px dashed #F0C4AD;margin:0 0 8px}
.tp-note{margin:0 0 7px;font:500 11px/15px var(--sans);color:var(--g500)}
.tp-tabs{display:flex;flex-wrap:wrap;gap:6px}
.switcher .tp-tabs button{display:inline-block;width:auto;margin:0;padding:5px 10px;
  border-radius:999px;font-size:12px;line-height:17px;font-weight:600;color:var(--g700)}
.switcher .tp-tabs button:hover{border-color:var(--brand);color:var(--brand)}
.switcher .ghost{text-align:center;color:var(--brand);border-color:#F6C3AE}
.switcher .sw-link{display:block;margin-top:8px;text-align:center;
  font:500 12px/18px var(--sans);color:var(--g500);text-decoration:none}
.switcher .sw-link:hover{color:var(--brand)}
@media (max-width:900px){ .switcher{position:static;width:auto;margin:0 auto 16px;max-width:360px} .stage{height:auto} }

/* ---------- Status bar ---------- */
.sbar{position:absolute;top:0;left:0;right:0;height:var(--sbh);z-index:40;
  display:flex;align-items:center;justify-content:space-between;padding:0 18px;pointer-events:none}
.sb-t{font:600 14px/20px var(--sans);color:var(--g900)}
.sb-i{display:flex;align-items:center;gap:5px}

/* ---------- Screens + transitions ---------- */
.screen{
  position:absolute;inset:0;display:flex;flex-direction:column;background:#fff;
  visibility:hidden;transform:translateX(100%);
  transition:transform .32s cubic-bezier(.32,.72,0,1),opacity .32s ease,visibility .32s;
}
.screen.on{visibility:visible;transform:none;opacity:1;z-index:2}
.screen.behind{visibility:visible;transform:translateX(-24%);opacity:.6;z-index:1}
.screen.fade-in{transform:none;opacity:0}
.screen.fade-in.on{opacity:1}
@media (prefers-reduced-motion:reduce){ .screen{transition:none} }

/* Every screen scrolls; only its chrome is fixed. */
.scroll{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.pad-nav{height:78px}
.pad-buy{height:88px}

/* ---------- App header (Today / Timeline) ---------- */
.head{position:relative;z-index:12;display:flex;align-items:center;gap:10px;
  padding:calc(var(--sbh) + 8px) 16px 10px;background:#fff;flex:none}
.head.compact{border-bottom:1px solid var(--g200)}
.head.hero-head{background:transparent;border:0;position:absolute;top:0;left:0;right:0;transition:background .2s,box-shadow .2s}
.head.hero-head.scrolled{background:rgba(255,255,255,.94);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--g200)}
/* The greeting only appears once the hero's own "Namaste Mansi" has scrolled away. */
.head-name{flex:1;line-height:1;opacity:0;transition:opacity .2s}
.head.scrolled .head-name{opacity:1}
.head-name small{display:block;font:500 10px/14px var(--sans);color:var(--g600)}
.head-name b{font-family:var(--serif);font-size:22px;line-height:26px;font-weight:700;color:var(--g800)}
.head-r{margin-left:auto;display:flex;align-items:center;gap:12px}
.ic-btn{border:0;background:none;padding:4px;display:flex;align-items:center;border-radius:10px}
.ic-btn:active{background:rgba(16,24,40,.06)}
.wallet{display:flex;align-items:center;gap:6px;height:32px;padding:0 3px 0 9px;border-radius:16px;
  border:1px solid var(--g300);background:#fff;font:700 12px/16px var(--sans);color:var(--g800);
  font-variant-numeric:tabular-nums}
.gift{width:26px;height:26px;border-radius:50%;background:var(--s50);border:1px solid #ABEFC6;
  display:grid;place-items:center;font-size:14px;font-style:normal}

/* ---------- Report top nav ---------- */
.topnav{position:relative;z-index:12;flex:none;display:flex;align-items:center;gap:12px;
  padding:calc(var(--sbh) + 8px) 16px 10px;background:#fff;border-bottom:1px solid var(--g200)}
.topnav h2{flex:1;margin:0;font-size:20px;line-height:30px;font-weight:600;color:var(--g900);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip{height:32px;padding:0 13px;border-radius:999px;border:1px solid var(--w100);background:var(--w50);
  font:600 12px/18px var(--sans);color:var(--w700);display:flex;align-items:center;gap:4px;flex:none}
.chip.pdf{border-color:#F6C3AE;background:var(--brand50);color:var(--brand)}
/* Sample chip on the report hero nav — small, out of the prose's way. */
.chip.samp{border-color:#F6C3AE;background:#fff;color:var(--brand)}

/* ---------- Bottom nav ---------- */
.bnav{flex:none;position:relative;z-index:12;display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--g200);background:#fff;padding:8px 0 calc(8px + env(safe-area-inset-bottom,0px))}
.bnav button{position:relative;border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:3px;
  font:500 12px/16px var(--sans);color:var(--g500);padding:2px 0}
.bnav button.on{color:var(--brand);font-weight:600}
.bnav svg{display:block}
/* The morning's free chapter waits in History — the badge counts it. */
.bnav .ndot{position:absolute;top:-4px;left:calc(50% + 4px);min-width:17px;height:17px;
  padding:0 4px;border-radius:9px;background:#F04438;border:1.5px solid #fff;
  display:flex;align-items:center;justify-content:center;
  font:700 10px/1 var(--sans);font-style:normal;color:#fff}

/* ---------- Buttons ---------- */
.btn{height:48px;border-radius:12px;border:1px solid transparent;font:600 16px/24px var(--sans);
  display:flex;align-items:center;justify-content:center;gap:6px;width:100%;transition:transform .08s ease,filter .15s ease}
.btn:active{transform:scale(.985)}
.btn.primary{background:var(--brand);color:#fff;box-shadow:0 1px 2px rgba(16,24,40,.06)}
.btn.primary:hover{background:var(--brand-dk)}
.btn.outline{background:#fff;border-color:var(--brand);color:var(--brand)}
.btn.text{height:44px;background:none;color:var(--g700);font-weight:600}
.btn.sm{height:36px;width:auto;padding:0 16px;font-size:14px;border-radius:10px}
.btn.grow{flex:1;width:auto}

/* ---------- Shared bits ----------
   Today's sections sit 40px apart, with 12px between a heading and its content —
   the rhythm the daily-reward prototype uses. */
.content{display:flex;flex-direction:column;gap:40px;padding:24px 16px 0}
.sec{display:flex;flex-direction:column;gap:12px}
.sec-head{display:flex;align-items:center;justify-content:space-between}
.sec-head span{font:500 14px/20px var(--sans);text-transform:uppercase;color:var(--g600)}
.sec-head em{font-style:normal;font:500 12px/18px var(--sans);color:var(--s700)}
.sec-head .lnk{display:inline-flex;align-items:center;gap:4px;font:400 12px/18px var(--sans);
  color:var(--g500);cursor:pointer;text-decoration:none;white-space:nowrap}
.eyebrow{margin:0;font:600 12px/18px var(--sans);color:var(--w700)}
.card{background:#fff;border:1px solid var(--g200);border-radius:14px}
.lnk-btn{border:0;background:none;padding:0;font:600 14px/20px var(--sans);color:var(--brand)}
.lnk-btn.strong{font-size:14px}
hr.thin{border:0;border-top:1px solid var(--g200);margin:12px 0}

/* ---------- Coin ladder (Today) ----------
   Same build as the daily-reward prototype: the amount lives inside the coin, the
   day sits under a rail, and the seventh column has its own gold panel. */
.ladder{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(6,1fr) 1.3fr}
.ladder::before,.ladder::after{content:"";position:absolute;top:69px;height:2px;left:6.85%;z-index:1}
.ladder::before{right:8.9%;background:#EDE4DC}
.ladder::after{width:calc(100% / 7.3 * var(--f,0) * 6);background:var(--brand)}
.ladder .col{position:relative;display:flex;flex-direction:column;align-items:center;
  padding:6px 0 8px;border-radius:14px}
.ladder .goal::before{content:"";position:absolute;inset:0;border-radius:14px;z-index:-1;
  background:linear-gradient(180deg,#FFFAEB 0,#FEF0C7 100%)}
.ladder .ic{height:48px;display:flex;align-items:flex-end;justify-content:center}
.coin{border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(180deg,#FEF0C7 0,#FEC84B 100%);
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.1),0 6px 14px -6px rgba(224,138,0,.22);
  color:var(--w900);text-shadow:0 1px 0 rgba(255,236,170,.6)}
.coin .cv{display:inline-flex;align-items:baseline;line-height:1}
.coin small,.coin b{font:600 12px/18px var(--sans)}
.coin.got{opacity:.5}
.ladder .goal .coin.got{opacity:1}
.ladder .tr{position:relative;z-index:2;height:18px;margin-top:8px;display:grid;place-items:center}
.ladder .dot{width:10px;height:10px;border-radius:50%;background:#fff;border:2px solid #E4DAD2;
  display:grid;place-items:center;font-style:normal}
.ladder .done .dot{width:16px;height:16px;border:0;background:var(--brand)}
.ladder .done .dot svg{width:9px;height:9px}
.ladder .goal .dot{border-color:#F5C77E}
.ladder .lb{display:flex;flex-direction:column;align-items:center;margin-top:6px;
  font:400 12px/18px var(--sans);color:var(--g400)}
.ladder .lb b{font:600 14px/20px var(--sans);color:var(--g700)}
.ladder .done .lb b{color:var(--g400)}
.ladder .goal .lb{color:var(--w700);font-weight:600}
.ladder .goal .lb b{color:#93370D;font-weight:700}

/* ---------- Merged daily-reward card ---------- */
.merged{border:1px solid #F6D9CB;border-radius:16px;padding:16px;
  background:linear-gradient(180deg,var(--brand50) 0,#FFFFFF 35%)}
.rh-t{margin:0 0 12px;font-size:16px;line-height:24px;font-weight:600;color:var(--g700)}
.rh-t .amt{font-weight:700;color:var(--s700)}
.merged .q{margin:0 0 10px;font:500 14px/20px var(--sans);color:var(--g600)}
.mood-row{display:flex;justify-content:flex-end;margin-bottom:10px}
.mood-chip{background:#FCE4D8;border-radius:12px 12px 2px 12px;padding:8px 14px;
  font:500 14px/20px var(--sans);color:var(--w900)}
/* The bubble is tall once it carries the offer, so the avatar anchors its top
   and the tail moves to the top-left corner to meet it. */
.reply-row{display:flex;align-items:flex-start;gap:8px;margin-bottom:12px}
.reply-row .av{width:34px;height:34px;border-radius:50%;object-fit:cover;object-position:50% 22%;flex:none}
.bubble{flex:1;min-width:0;background:#fff;border:1px solid var(--g200);
  border-radius:2px 12px 12px 12px;padding:12px 14px}
.bubble b{display:block;font:600 13px/18px var(--sans);color:#B42318;margin-bottom:4px}
.bubble p{margin:0;font:400 14px/22px var(--sans);color:var(--g700)}

/* ---------- The report cover ----------
   The artwork from the visual-identity file (watercolour hearts), framed as a
   book: the page leaves on the right and the spine crease on the left are what
   make a 40px thumbnail read as a book rather than a photo. */
.bk3{position:relative;flex:none;display:block;width:var(--bw,40px);height:var(--bh,54px);
  border-radius:2px 4px 4px 2px;
  background:#F7DCE1 url(assets/hearts.png) center/cover no-repeat;
  box-shadow:0 2px 7px rgba(122,46,14,.22)}
/* Page leaves. */
.bk3::after{content:'';position:absolute;right:-3px;top:4%;bottom:4%;width:3px;
  border-radius:0 2px 2px 0;
  background:repeating-linear-gradient(90deg,#FFFDF7 0 1px,#E3D4BF 1px 2px)}
/* Spine shadow, then the hinge crease just inside it. */
.bk3::before{content:'';position:absolute;left:0;top:0;bottom:0;width:18%;
  border-radius:2px 0 0 2px;
  background:linear-gradient(90deg,rgba(146,62,86,.42),rgba(146,62,86,0))}

/* ---------- Entry A · the report, offered inside Hemali's bubble ----------
   She made it during the chat, so it belongs to her message: a divider inside
   the bubble, not a card of its own floating underneath. The bubble is already
   hers, so there is no speaker label and no eyebrow — cover, hook, button. The
   discount lives on the report page; a struck price here is just noise. */
.offer{margin:11px -14px -12px;padding:11px 14px 12px;
  border-top:1px dashed #F0CFBD;border-radius:0 0 12px 12px;
  background:linear-gradient(180deg,#FFF7F2 0,#FFFFFF 72%)}
/* Scoped to .bubble so it beats `.bubble b`{display:block;font:700 15px/20px var(--sans);color:var(--g900)}
.offer .btn{margin-top:10px}

/* ---------- Day 1 · the report on the expert card ----------
   Day 1 has no Hemali bubble, because the check-in is still unanswered. The
   expert card is the only surface already in her name, so the report sits
   inside it under a divider, rather than floating as a card of its own. */
.ex-report{margin-top:10px;padding-top:10px;border-top:1px dashed #E7DAF5}
/* One tappable row — the reading happens on the report page, so the card
   carries no button of its own, just a pill and a chevron. */
.ex-tap{display:flex;gap:10px;align-items:center;cursor:pointer}
.ex-tap .bk3{--bw:30px;--bh:40px}
.ex-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ex-t b{font:700 13px/17px var(--sans);color:var(--g900);
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ex-sub{font:400 11px/15px var(--sans);color:var(--g500);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ex-sub s{color:var(--g400)}
/* The PM card's sub-line is the reason this report was picked, so it has to
   finish its sentence — one ellipsis there and the card stops explaining. */
.ex-sub.wrap{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical}
.ex-pill{flex:none;font:700 10px/14px var(--sans);font-style:normal;
  padding:2px 7px;border-radius:6px;background:#ECFDF3;color:#067647}
.ex-tap .ex-chev{flex:none;font:400 20px/20px var(--sans);color:var(--g400)}

/* ---------- Day 1 · check-in, not yet answered ----------
   Three moods and no reply. This is why the report cannot sit in a bubble on
   day 1: there is no bubble until she taps one of these. */
.mood-row.pick{display:flex;gap:8px;flex-wrap:wrap}
.mood-row.pick .mood-chip{border:1px solid var(--g300);background:#fff;
  padding:7px 13px;border-radius:999px;font:500 14px/20px var(--sans);color:var(--g700)}
.mood-row.pick .mood-chip:active{background:var(--brand50);border-color:var(--brand)}
.social{display:flex;align-items:center;gap:8px;margin:13px 0 0;padding-top:12px;
  border-top:1px solid var(--g200);font:400 13px/19px var(--sans);color:var(--g500)}
.social b{font-weight:700;color:var(--g700)}
.faces{display:flex;flex:none}
.faces i{width:20px;height:20px;border-radius:50%;border:1.5px solid #fff;
  background:#E9D7FE url('assets/hemali.png') center/cover}
.faces i+i{margin-left:-7px}
/* The focus ring from the daily reward board: 2.6s after "Answer now". */
.merged.focus{box-shadow:0 0 0 3px var(--brand),0 8px 22px rgba(240,106,58,.22)}

/* ---------- Day 1 · daily reward intro sheet ---------- */
.intro-coin{width:76px;height:76px;margin:2px auto 14px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 30%,#FFE9A8,#F5B427 62%,#D98A09);
  box-shadow:0 0 0 7px #FEF5DC,0 8px 20px rgba(217,138,9,.3)}
.intro-coin span{font:700 30px/1 var(--sans);color:#8A5208}
.intro-h{margin:0;text-align:center}
.intro-sub{text-align:center}
#sheet-intro .ladder-wrap,#sheet-reward .ladder-wrap{margin:16px 0 18px}
#sheet-intro .btn.text,#sheet-reward .btn.text{color:var(--g500)}

/* ---------- Notification permission dialog (Android-style) ----------
   Sits above the reward sheet: the OS asking what "remind me" just promised. */
.notif{position:absolute;left:28px;right:28px;top:38%;z-index:75;background:#fff;
  border-radius:16px;padding:20px 20px 8px;box-shadow:0 24px 48px -12px rgba(16,24,40,.35)}
.notif b{display:block;font:600 16px/24px var(--sans);color:var(--g900)}
.nf-row{display:flex;justify-content:flex-end;gap:4px;margin-top:14px}
.nf-row button{border:0;background:none;padding:10px 12px;border-radius:10px;
  font:600 14px/20px var(--sans);color:var(--brand)}
.nf-row button:active{background:var(--brand50)}

/* ---------- Chat · free minutes over ----------
   The screen the journey turns on. Today it ends on a billing notice; the
   chapter has to arrive before that line, inside the conversation. */
.chat-nav{gap:10px}
.cn-av{width:36px;height:36px;border-radius:50%;object-fit:cover;object-position:50% 22%;flex:none}
.cn-t{display:flex;flex-direction:column;min-width:0}
.cn-t b{font:700 16px/21px var(--sans);color:var(--g900)}
.cn-t small{display:flex;align-items:center;gap:5px;font:500 12px/16px var(--sans);color:#067647}
.cn-t small::before{content:"";width:6px;height:6px;border-radius:50%;background:#12B76A}
.chat-scroll{background:#FDF0EB}
/* The bottom padding clears the absolutely-positioned .chat-cta (~145px tall),
   so the last card — the pitch — can scroll fully above it. */
.chat-thread{display:flex;flex-direction:column;gap:9px;padding:14px 16px 156px}

.c-b{max-width:84%;padding:9px 12px;border-radius:12px;position:relative}
.c-b p{margin:0;font:400 15px/21px var(--sans);color:var(--g800)}
.c-b time{display:block;margin-top:2px;text-align:right;
  font:400 11px/14px var(--sans);color:var(--g400)}
.c-b.hemali{align-self:flex-start;background:#fff;border-radius:3px 12px 12px 12px}
.c-b.user{align-self:flex-end;background:#FBDDD0;border-radius:12px 3px 12px 12px}
/* The grey system voice, kept for the join notice and the end-of-chat notice,
   so the chapter above it reads as Hemali and not as the app. */
.c-sys,.c-end{margin:4px 0;padding:9px 14px;border-radius:10px;text-align:center;
  background:#EEF1F6;font:400 13px/19px var(--sans);color:var(--g600)}
.c-end{margin-top:8px}
.ch-s{margin:3px 0 0;font:400 13px/19px var(--sans);color:var(--g600)}
/* Scoped past `.btn.sm`, which sets width:auto. A chapter handed to her in the
   chat is the main action on the screen{margin-top:11px;width:100%;height:42px;font-size:15px}
.ch-saved{display:flex;align-items:center;gap:5px;margin-top:9px;
  font:500 11px/16px var(--sans);color:#067647}
.ch-saved::before{content:"";width:13px;height:13px;border-radius:50%;background:#ECFDF3;
  box-shadow:inset 0 0 0 1.4px #ABEFC6}

/* ---------------------------------------------- PM spec: 3-report surfaces */
/* The brief's 10-minute wait, drawn into the thread so the gap is visible. */
.c-gap{display:flex;align-items:center;gap:9px;margin:14px 2px 10px;
  font:600 11px/16px var(--sans);color:var(--g400)}
.c-gap::before,.c-gap::after{content:"";flex:1;height:1px;background:#EAECF0}

/* The in-chat menu: three reports, she picks. A list, not a poster.
   Hierarchy, top to bottom: deal strip (said once) > card title > row names.
   The price appears exactly once — repeating it per row flattened the card. */
.of3{align-self:stretch;overflow:hidden;border-radius:14px;background:#fff;
  border:1px solid #F0D6BE;box-shadow:0 6px 16px rgba(122,46,14,.09)}
.of3-strip{margin:0;padding:6px 12px;background:#FFF1E3;
  font:700 10px/14px var(--sans);letter-spacing:.07em;color:var(--brand-dk)}
.of3-in{padding:11px 12px 10px}
.of3-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  margin:0 0 10px}
.of3-head>b{flex:1;min-width:0;font:700 15px/20px var(--sans);color:var(--g900);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.of3-price{flex:none;display:flex;align-items:baseline;gap:5px}
.of3-price b{font:700 17px/21px var(--sans);color:var(--g900)}
.of3-price s{font:400 12px/16px var(--sans);color:var(--g400)}
.of3-price i{padding:2px 5px;border-radius:5px;background:#ECFDF3;color:#067647;
  font:700 9px/13px var(--sans);font-style:normal}
/* One report, so the row can afford a bigger cover and two full lines — a
   recommendation reads nothing like a three-item menu. */
.of3-lead{display:flex;align-items:center;gap:11px;width:100%;padding:10px 9px;
  border:0;border-radius:10px;background:#FFFBF6;text-align:left;cursor:pointer}
.of3-lead:hover{background:#FFF4E8}
.of3-t{flex:1;min-width:0}
.of3-t small{display:block;font:400 12px/17px var(--sans);color:var(--g700)}
.of3-t em{display:block;margin-top:3px;font:500 10px/14px var(--sans);
  font-style:normal;color:var(--g500)}
.btn.of3-go{width:100%;margin-top:9px}
.of3-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:10px;padding-top:9px;border-top:1px solid #F5EEE6;
  font:500 11px/16px var(--sans);color:var(--g500)}
.of3-foot .lnk-btn{flex:none;font:600 11px/16px var(--sans)}

/* Day 4 says it is the last ask in words, never in colour — escalating the
   pixels is how you teach people to stop looking. */
.of3-foot.last,.ex-sub.last{color:#B54708;font-weight:600}

/* Post-purchase follow-up: the report's own questions, asked in the thread. */
.sg{align-self:stretch;margin-top:4px;display:flex;flex-direction:column;
  align-items:flex-start;gap:7px}
.sg-h{margin:2px 0 0;font:700 10px/14px var(--sans);letter-spacing:.07em;
  text-transform:uppercase;color:var(--g500)}
.sg-q{padding:8px 13px;border-radius:16px;background:#fff;border:1px solid #F0C6AE;
  font:500 13px/18px var(--sans);color:#B54708;cursor:pointer;text-align:left}
.sg-q:hover{background:#FFF6EC}
.c-typing{display:flex;align-items:center;gap:4px;padding:13px 14px}
.c-typing span{width:6px;height:6px;border-radius:50%;background:#C7B9A8;
  animation:sgdot 1s infinite ease-in-out}
.c-typing span:nth-child(2){animation-delay:.15s}
.c-typing span:nth-child(3){animation-delay:.3s}
@keyframes sgdot{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* The day-5 shelf: present, reachable, asking nothing. */
.rep-top.quiet{align-items:center}
.rep-top.quiet > div{flex:1;min-width:0}
.rep-top.quiet .rep-status{color:var(--g500)}

/* ---------- Per-report cover art ----------
   Three reports on one shelf need three covers, or they read as one product
   listed three times. The colourway and motif come from the report's own
   data, so a fourth report is a data change, not a CSS change. */
.cv{position:relative;flex:none;display:block;
  width:var(--cw,38px);height:var(--ch,50px);
  border-radius:2px 5px 5px 2px;overflow:hidden;
  background:linear-gradient(145deg,var(--cva) 0%,var(--cvb) 100%);
  box-shadow:0 3px 9px rgba(16,24,40,.22)}
/* Spine shadow on the left, page leaves on the fore-edge. */
.cv::before{content:'';position:absolute;left:0;top:0;bottom:0;width:17%;
  background:linear-gradient(90deg,rgba(0,0,0,.3),rgba(0,0,0,0))}
.cv::after{content:'';position:absolute;right:0;top:5%;bottom:5%;width:3px;
  background:repeating-linear-gradient(90deg,#FFFDF7 0 1px,rgba(227,212,191,.9) 1px 2px)}
.cv-art{position:absolute;inset:0;width:100%;height:100%;color:var(--cvi)}
.cv-star{fill:var(--cvi);opacity:.45}
.cv-sm{--cw:38px;--ch:50px}
.cv-md{--cw:44px;--ch:58px}
.cv-lg{--cw:104px;--ch:138px;margin:0 auto 16px;border-radius:3px 8px 8px 3px}
.ex-tap .cv{--cw:34px;--ch:45px}
.rep-top .cv{--cw:44px;--ch:56px}

/* Picker screen */
.pk-lead{margin:14px 16px 0;font:400 14px/21px var(--sans);color:var(--g600)}
/* One price for all three, said once. */
.pk-strip{display:flex;align-items:baseline;gap:7px;margin:12px 16px 0;padding:9px 12px;
  border-radius:10px;background:#FFF1E3}
.pk-strip span{flex:1;min-width:0;font:500 12px/17px var(--sans);color:#8A4B21}
.pk-strip b{font:700 17px/21px var(--sans);color:var(--g900)}
.pk-strip s{font:400 12px/17px var(--sans);color:var(--g400)}
.pk-strip i{padding:2px 5px;border-radius:5px;background:#ECFDF3;color:#067647;
  font:700 9px/13px var(--sans);font-style:normal;letter-spacing:.04em}
.pk-list{display:flex;flex-direction:column;gap:10px;padding:12px 16px 0}
.pk-card{display:flex;align-items:center;gap:12px;width:100%;padding:12px;
  border:1px solid var(--line);border-radius:14px;background:#fff;text-align:left;
  cursor:pointer;box-shadow:0 2px 8px rgba(16,24,40,.05)}
.pk-card:hover{border-color:var(--brand);background:#FFFBF6}
.pk-t{flex:1;min-width:0}
.pk-t b{display:block;font:700 15px/20px var(--sans);color:var(--g900)}
.pk-t small{display:block;margin-top:2px;font:400 12px/17px var(--sans);color:var(--g600)}
.pk-meta{display:flex;align-items:center;gap:6px;margin-top:6px;
  font:500 11px/15px var(--sans);color:var(--g400)}
.pk-free{padding:2px 5px;border-radius:5px;background:#ECFDF3;color:#067647;
  font:700 9px/13px var(--sans);font-style:normal;letter-spacing:.04em}
.pk-chev{flex:none;font:400 19px/19px var(--sans);font-style:normal;color:#C7B9A8}
.pk-note{margin:16px;padding:11px 12px;border-radius:10px;background:#F9FAFB;
  font:400 12px/18px var(--sans);color:var(--g600)}

/* ---------- Day 1 · the reminder opt-in ----------
   Sits after the end-of-chat notice, in the system voice's position but warmer:
   it is the one ask of the day, made right after she has read her own chapter. */
.rm-card{align-self:stretch;margin-top:2px;padding:12px 14px;border-radius:12px;
  background:#fff;border:1px dashed #F0C6AE}
.rm-card p{margin:0;font:400 14px/20px var(--sans);color:var(--g700)}
.rm-card p b{font-weight:700;color:var(--g900)}
.rm-card .btn{margin-top:10px;width:100%;height:40px;font-size:14px}
.rm-card.done{border-style:solid;border-color:#ABEFC6;background:#F6FEF9}
.rm-card.done p{color:#067647}

/* ---------- Day 2/3 · the push that brought her back ----------
   OS-style banner over the top of the screen. Content, not a reminder:
   it carries the chapter, and tapping it lands in the chat. */
.push-note{position:absolute;top:8px;left:10px;right:10px;z-index:60;
  display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:0;
  border-radius:14px;background:rgba(252,252,253,.96);text-align:left;cursor:pointer;
  box-shadow:0 10px 26px rgba(16,24,40,.22),0 1px 0 rgba(255,255,255,.6) inset;
  transform:translateY(-120%);opacity:0;transition:transform .32s ease,opacity .32s ease}
.push-note.on{transform:translateY(0);opacity:1}
.push-note img{width:34px;height:34px;border-radius:9px;object-fit:cover;
  object-position:50% 22%;flex:none}
.pn-t{min-width:0;flex:1}
.pn-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.pn-top b{font:700 13px/18px var(--sans);color:var(--g900)}
.pn-top small{font:400 11px/16px var(--sans);color:var(--g400)}
.pn-t p{margin:1px 0 0;font:400 13px/18px var(--sans);color:var(--g700)}

/* The paid route, unchanged, pinned under the free one. */
.chat-cta{position:absolute;left:0;right:0;bottom:0;z-index:6;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:#fff;border-top:1px solid var(--g200)}
.cc-row{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:12px;
  background:#FDEDE4}
.cc-row img{width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:50% 22%;flex:none}
.cc-row p{margin:0;font:500 13px/19px var(--sans);color:var(--g800)}
.cc-row s{color:var(--g400)}
.cc-row b{color:#067647}
.chat-cta .btn{margin-top:10px}

/* ---------- R.1b hero + expert card ---------- */
.hero{position:relative;padding:calc(var(--sbh) + 58px) 16px 10px;text-align:center;
  background:#FCE9DE url('assets/hero.png') top center/100% auto no-repeat}
.hero h1{margin:0;font-family:var(--serif);font-size:26px;line-height:31px;font-weight:700;color:var(--g800)}
.hero-date{margin:6px 0 14px;font:600 14px/20px var(--sans);color:var(--w700);opacity:.9}
.ins-list{text-align:left}
.ins{display:flex;gap:8px;align-items:center;min-height:56px;padding:8px 10px;border-radius:10px;
  border-bottom:.8px solid #FDECD3}
.ins svg{width:24px;height:24px;flex:none}
.ins p{margin:0;font:400 14px/20px var(--sans);color:var(--g700)}
.ai-foot{text-align:right;padding:8px 2px 0}
.ai-foot .ai{font:300 italic 10px/14px var(--sans);color:#FDB022}

/* Matches the Today page in the daily-reward prototype: a purple gradient shell
   with the white card inset, and Continue Chat stacked beside the avatar. */
.expert-card{border-radius:16px;padding:0 4px 4px;
  background:linear-gradient(180deg,#7D58A1,#4A3460)}
.expert-top{display:flex;align-items:center;justify-content:center;gap:6px;
  padding:6px 10px 8px;font:700 12px/18px var(--sans);color:#fff;letter-spacing:.01em;
  text-transform:uppercase}
.expert-top b{font-weight:700;text-transform:none;font-variant-numeric:tabular-nums}
.expert-body{background:#fff;border-radius:12px;padding:8px 12px;
  box-shadow:0 2px 4px rgba(16,24,40,.06),0 0 15px rgba(16,24,40,.08)}
.expert-row{display:flex;align-items:center;gap:10px}
.expert-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.av-ring{position:relative;flex:none;width:68px;height:68px;border-radius:50%;
  border:2.4px solid var(--s700);display:block}
.av-ring img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:center}
.av-ring .dot{position:absolute;right:-1px;top:1px;width:15px;height:15px;border-radius:50%;
  background:var(--s700);border:2px solid #fff}
.av-ring.sm{width:44px;height:44px;border-width:2px}
.expert-meta b{display:block;font:600 16px/22px var(--sans);color:var(--g800)}
.expert-meta p{margin:0;display:flex;gap:6px;align-items:baseline;
  font:600 14px/20px var(--sans);color:var(--s700)}
.expert-meta s{color:var(--g400);font-weight:500;font-size:12px}
.expert-meta strong{font-weight:600;color:var(--s700)}
.expert-body .btn.primary{height:40px;border-radius:12px;font-size:16px}
/* Entry B — one row, ~56px. A second full-width button competed with Continue
   Chat at identical width, and the extra ~160px pushed Daily reward below the
   fold. Chat has to win this card, so the report gets a small outlined button. */
.expert-report{display:flex;align-items:center;gap:10px;margin:2px 0 4px}
.er-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.er-t b{font:600 15px/20px var(--sans);color:var(--g900);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.er-t small{font:400 12px/17px var(--sans);color:var(--g500);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.expert-report .btn.sm{flex:none;height:32px;padding:0 12px;font-size:13px;border-radius:9px}

/* ---------- Personalised guidance ----------
   Full-width rows, same as the daily-reward Today page (.g2wrap / .g2). */
/* No peach panel: section title on the white page, cards straight under it.
   The lead is plain grey text, not a box. */
.guide-lead{margin:-4px 0 0;font:400 12px/17px var(--sans);color:var(--g500)}
.tiles{display:flex;flex-direction:column;gap:8px}
/* Every tile is the same object — white, Gray/200, 16px radius, ~84px tall.
   The report earns attention through its cover, not a coloured card. */
.tile{text-align:left;width:100%;background:#fff;border:1px solid var(--g200);border-radius:16px;
  padding:12px;display:flex;align-items:center;gap:12px;min-height:84px}
.tile:active{background:var(--g50)}
.tile img,.tile .ti{flex:none;width:56px;height:56px;object-fit:contain;margin:0}
.tile .bk3{--bw:42px;--bh:56px;margin:0 7px}
.tile .tt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.tile b{font:600 16px/22px var(--sans);color:var(--g900);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile small{font:400 12px/17px var(--sans);color:var(--g500)}
.tile .tag{flex:none}
.tile .arr{flex:none}
.tag{font-style:normal;font:600 12px/16px var(--sans);padding:1px 6px;border-radius:8px}
.tag.purple{background:var(--purple);color:#fff}
.tag.green{background:var(--s50);color:var(--s700)}

/* ---------- R.2 Report page ---------- */
/* The hero photo fades into white, so the card below it has no visible seam. */
.r2-hero{position:relative;display:flex;flex-direction:column;align-items:center;
  padding:0 12px 28px;border-radius:0 0 24px 24px;overflow:hidden;background:#FCEFE9}
/* The couple is an animated loop of the same artwork as r2-hero.png, framed so
   the two heads land under the book. The GIF carries its own motion, so the
   old CSS drift is gone — two pans at once just read as drift. */
.r2-hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:#FCEFE9 url(assets/r2-hero.gif) center 40%/cover no-repeat}
/* The wash used to start at 30% and take most of the couple with it. It now
   only softens the last fifth, where the hero meets the white page. */
.r2-hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0) 72%,rgba(255,255,255,.92) 100%)}
.r2-nav{position:relative;z-index:3;align-self:stretch;display:flex;align-items:center;
  padding:calc(var(--sbh) + 12px) 16px 12px}
.r2-nav-r{margin-left:auto;display:flex;align-items:center;gap:9px}
/* The book sits low and the GIF is framed high, so the couple reads above it
   rather than behind it. At 76px the heads landed inside the open pages. */
/* Sits above the card, so the book rests on it rather than slipping behind it.
   Whatever it gains at the top it gives back at the bottom, so it drops without
   making the hero taller and shoving the card down with it. Not a transform:
   bookShift already owns that property while the cover swings open. */
.r2-bookwrap{position:relative;z-index:5;width:242px;height:161px;margin:118px 0 -14px;
  perspective:900px}
.r2-book{display:block;width:242px;height:161px;object-fit:contain;opacity:0}
/* The spine sits at the wrapper's centre line; the cover hinges off it. */
.r2-cover{position:absolute;left:119px;top:0;width:122px;height:161px;object-fit:contain;
  transform-origin:left center;backface-visibility:hidden}
/* The spine stays put while the cover swings, so the frame slides left by half a
   page — otherwise the closed book would sit off-centre. */
#report.on .r2-bookwrap{animation:bookShift .9s cubic-bezier(.45,.05,.3,1) .22s both}
@keyframes bookShift{0%{transform:translateX(-59px)}100%{transform:translateX(0)}}
#report.on .r2-book{animation:bookPages .9s ease .22s both}
#report.on .r2-cover{animation:bookOpen .9s cubic-bezier(.45,.05,.3,1) .22s both}
@keyframes bookOpen{
  0%{transform:rotateY(0deg)}
  100%{transform:rotateY(-172deg)}
}
@keyframes bookPages{
  0%,42%{opacity:0;transform:scale(.97)}
  70%{opacity:1}
  100%{opacity:1;transform:scale(1)}
}
@media (prefers-reduced-motion:reduce){
  #report.on .r2-bookwrap{animation:none}
  #report.on .r2-book{animation:none;opacity:1}
  #report.on .r2-cover{animation:none;opacity:0}
}
/* A white card lifted over the bottom of the hero, centred. It gives the title
   and the three stats one container to sit in and hides the seam where the
   artwork stops. */
/* The book is in front now, so the overlap is only as deep as the card's top
   padding — any more and the book's bottom edge would land on the title. The
   negative bottom margin pulls everything after the card up with it; the card
   itself is held in place by the top one.
   No shadow: it drew a line exactly where the book is meant to be resting. */
.r2-card{position:relative;z-index:4;width:calc(100% - 32px);margin:-36px auto -20px;
  background:#fff;border-radius:20px;padding:20px 16px 16px;text-align:center}
.r2-card h1{margin:0 auto;max-width:290px;font:700 21px/29px var(--sans);color:var(--g900)}
.r2-stats{margin-top:12px;display:flex;align-items:center;justify-content:center;gap:10px}
.r2-stats div{width:84px}
.r2-stats b{display:flex;align-items:center;justify-content:center;gap:2px;
  font:600 16px/24px var(--sans);color:var(--g800);white-space:nowrap}
.r2-stats small{display:block;font:500 12px/18px var(--sans);color:var(--g500)}
.r2-div{width:1px;height:20.5px;background:var(--g200)}
.r2-about{padding:20px 16px 24px;display:flex;flex-direction:column;gap:10px}
/* One small paragraph. It used to be a large headline, a three-item checklist and
   a provenance line — the checklist repeated "Find answers to" one screen below,
   and the three blocks took half a screen to say one small thing. */
/* Centred, to carry on the card's axis rather than restart a left edge the
   section below it does not share. */
.r2-lead{margin:0;text-align:center;font:400 14px/21px var(--sans);color:var(--g600)}
.r2-lead b{font-weight:600;color:var(--g900)}
/* Secondary, so it is narrower than the full column — at full width it carried
   the same weight as the Buy now button fixed to the bottom of the screen. */
.r2-sample{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  align-self:center;width:auto;padding:0 22px;height:44px;margin-top:8px;
  border-radius:12px;font-size:15px}

/* Still used by the "people also bought" rail inside the report. */
.lbl{margin:0 0 12px;font:600 13px/20px var(--sans);letter-spacing:.03em;color:var(--g500)}

/* Every block below the fold is a titled section with a full-bleed rule above
   it. Tiny grey micro-labels made the whole page read as one undivided wash. */
.r2-block{padding:24px 16px;border-top:1px solid var(--g200)}
.r2-h{display:flex;align-items:baseline;margin:0 0 4px;
  font:600 20px/28px var(--sans);color:var(--g900)}

/* PM track: what the report answers, as her own questions. It stands in for the
   chapter ladder, because a ladder with nothing shut is only a contents page. */
.r2-learn{margin:14px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.r2-learn li{position:relative;padding-left:30px;font:500 14px/21px var(--sans);color:var(--g800)}
.r2-learn li::before{content:"";position:absolute;left:0;top:1px;width:20px;height:20px;
  border-radius:50%;background:var(--brand50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.2 3.8 7.5 8.5 2.8' fill='none' stroke='%23D9572A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px 11px no-repeat}
/* The handover, said plainly and once: the pages below are somebody else's
   chart, so the depth reads as proof rather than as her own reading. */
.r2-sampnote{margin:6px 0 0;font:400 14px/21px var(--sans);color:var(--g600)}
/* The report body is already its own typographic world, so it only needs room
   away from the section heading — and its own full-bleed left edge back, since
   the block it sits in is indented 16px. */
.r2-report{margin:18px -16px 0}

/* Questions as a plain divided list. The "?" bubbles were decoration, not signal. */
/* A question mark disc in front of every row — seven unmarked text lines with
   hairlines between them read as a table, not as questions. */
.qrow{display:flex;align-items:flex-start;gap:10px;padding:10px 0;
  border-bottom:1px solid var(--g200)}
.qrow:last-child{border-bottom:0;padding-bottom:0}
.qrow::before{content:"?";flex:none;width:21px;height:21px;margin-top:1px;border-radius:50%;
  background:var(--brand50);color:var(--brand-dk);
  font:700 12px/21px var(--sans);text-align:center}
/* Seven of these in a row, so they are a list to scan, not seven headlines. */
.qrow span{font:400 14px/21px var(--sans);color:var(--g700)}

/* Contents list. The numeral hangs in its own narrow column so the titles stay
   on the same left edge as every other section. */
.toc{margin:0;padding:0;list-style:none;counter-reset:toc}
.toc li{counter-increment:toc;display:flex;flex-direction:column;
  padding:12px 0;border-bottom:1px solid var(--g200)}
.toc li:last-child{border-bottom:0;padding-bottom:0}
.toc b{display:flex;align-items:baseline;gap:8px;font:600 16px/24px var(--sans);color:var(--g900)}
.toc b::before{content:counter(toc);flex:none;width:18px;
  font:400 14px/24px var(--sans);color:var(--g400)}
.toc span{display:flex;align-items:baseline;gap:8px;padding-left:26px;
  font:400 14px/20px var(--sans);color:var(--g500)}
.toc em{margin-left:auto;flex:none;font-style:normal;font:400 13px/20px var(--sans);color:var(--g400)}

/* Rating summary above the quotes, so the average is stated once and loudly. */
.rsum{display:flex;align-items:center;gap:12px;margin:12px 0}
.rsum>b{font:700 34px/38px var(--sans);color:var(--g900)}
.rsum>span{display:flex;flex-direction:column;gap:1px}
.rsum .stars{font-style:normal;font:400 15px/20px var(--sans);color:#F79009;letter-spacing:2px}
.rsum em{font-style:normal;font:400 13px/18px var(--sans);color:var(--g500)}

/* Quotes scroll sideways; stacking three of them would bury the CTA. */
.revs{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;
  margin:0 -16px;padding:0 16px 2px;scrollbar-width:none}
.revs::-webkit-scrollbar{display:none}
.review{flex:none;width:258px;scroll-snap-align:start;background:var(--g50);
  border-radius:12px;padding:13px 15px}
.review b{display:block;font:600 12px/18px var(--sans);color:var(--w700);margin-bottom:6px}
.review p{margin:0;font:400 14px/20px var(--sans);color:var(--g600)}

/* ---------- Sticky buy bar ---------- */
.buybar{flex:none;position:relative;z-index:12;display:flex;flex-direction:column;gap:10px;
  padding:10px 16px calc(12px + env(safe-area-inset-bottom,0px));background:#fff;
  border-top:1px solid var(--g200);box-shadow:0 -4px 16px -8px rgba(16,24,40,.18)}
/* Not green: green is wallet money everywhere else in the app, and a finding is
   not money. The neutral surface also stops it competing with the CTA. */
.buy-why{margin:0;display:flex;align-items:center;gap:7px;padding:7px 11px;border-radius:10px;
  background:var(--g50);font:600 13px/18px var(--sans);color:var(--g700)}
.buy-why svg{flex:none}
.buy-row{display:flex;align-items:center;gap:16px}
.price b{display:block;font:700 22px/28px var(--sans);color:var(--g900)}
/* The saving was one grey 12px line and read as a footnote. Same treatment as
   the entry points now: struck MRP, then the cut in a filled chip. */
.price small{display:flex;align-items:center;gap:6px;white-space:nowrap;
  font:600 13px/18px var(--sans);color:var(--g400)}
.price small s{font-weight:400}
.price small i{font-style:normal;font:700 11px/15px var(--sans);padding:2px 6px;
  border-radius:5px;background:#ECFDF3;color:#067647}

/* ---------- Brand band (sample + read) ---------- */
.band{background:#7A2E0E;display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px;font:600 12px/18px var(--sans);color:#fff}
.band span{font-weight:400;color:#FCE4D8}

/* ---------- R.3 sample body ---------- */
.sample-body{background:var(--g50);padding:20px 16px 24px;display:flex;flex-direction:column;gap:16px}
.s-cover{background:#fff;border-radius:12px;padding:16px;display:flex;flex-direction:column;
  align-items:center;gap:6px;text-align:center}
.s-tag{background:var(--w100);color:var(--w700);border-radius:10px;padding:3px 8px;
  font:600 12px/18px var(--sans)}
.s-cover h2{margin:0;font:700 20px/30px var(--sans);color:var(--g700)}
.s-cover .ssub{margin:0;font:400 12px/18px var(--sans);color:var(--g600)}
.s-cover .sname{margin:0;font:600 14px/20px var(--sans);color:var(--w700)}
.accent{background:var(--w25);border-radius:12px;display:flex;gap:12px;overflow:hidden}
.accent .bar{width:3px;background:var(--w500);flex:none}
.accent .at{flex:1;padding:14px 14px 14px 0;display:flex;flex-direction:column;gap:6px}
.accent .at b{font:600 12px/18px var(--sans);color:var(--w700)}
.accent .at p{margin:0;font:400 16px/24px var(--sans);color:var(--g700)}
.s-scores{display:flex;gap:8px}
.s-scores div{flex:1;background:#fff;border:1px solid var(--g200);border-radius:12px;
  padding:14px 0;text-align:center}
.s-scores b{display:block;font:700 18px/28px var(--sans);color:var(--w700)}
.s-scores small{display:block;font:400 12px/18px var(--sans);color:var(--g600);margin-top:2px}
.s-covers{background:#fff;border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:10px}
.s-covers .clbl{font:600 12px/18px var(--sans);color:var(--w700)}
.s-covers .item{display:flex;gap:10px;align-items:center}
.s-covers .item::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--w500)}
.s-covers .item p{margin:0;font:400 16px/24px var(--sans);color:var(--g700)}
.s-note{margin:0;font:400 12px/18px var(--sans);color:var(--g600)}
/* Devanagari needs a touch more leading than Latin at the same size. */
.dev,.dev *{font-family:var(--dev)}
.dev .accent .at p,.dev .s-covers .item p{line-height:26px}

/* ---------- R.7 read-in-app report ---------- */
.read-body{background:var(--g50);padding:16px 16px 40px;display:flex;flex-direction:column;gap:16px}
.r-cover{background:#fff;border-radius:12px;padding:28px 16px;text-align:center}
.r-cover .eyebrow{letter-spacing:.06em}
.r-cover h2{margin:8px 0 0;font:700 24px/30px var(--sans);color:var(--g700)}
.r-cover .rfor{margin:8px 0 0;font:600 16px/20px var(--sans);color:var(--brand)}
.r-cover .rmeta{margin:8px 0 0;font:400 12px/18px var(--sans);color:var(--g500)}
/* The report's own colourway carried onto its title page. */
.r-cover.rc-art{position:relative;overflow:hidden;padding-top:34px}
.r-cover.rc-art::before{content:'';position:absolute;left:0;right:0;top:0;height:6px;
  background:linear-gradient(90deg,var(--cva),var(--cvb))}
.r-card{background:#fff;border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:16px}
/* Ring dials, after Melooha: the arc carries the degree and the word under the
   label carries the meaning, so no raw number is ever shown. */
.r-scores{display:grid;grid-template-columns:1fr 1fr;gap:4px;
  background:#fff;border-radius:12px;padding:16px 4px 12px}
.r-scores .dlbl{grid-column:1/-1;margin:0 0 4px;padding:0 12px;
  font:600 12px/18px var(--sans);letter-spacing:.04em;color:var(--g500)}
.dial{position:relative;aspect-ratio:1;display:grid;place-items:center}
.dial svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.dial .tk{fill:none;stroke:var(--c);stroke-width:2.6;opacity:.15}
.dial .ar{fill:none;stroke:var(--c);stroke-width:2.6;stroke-linecap:round;
  transition:stroke-dasharray .9s cubic-bezier(.22,1,.36,1)}
.dial .cap{fill:var(--c)}
.dial span{position:relative;text-align:center;padding:0 22px}
.dial b{display:block;font:600 14px/18px var(--sans);color:var(--g800)}
.dial small{display:block;margin-top:3px;font:600 12px/16px var(--sans);color:var(--c)}
.r-sec{background:#fff;border-radius:12px;overflow:hidden;padding:0 0 16px}
.r-sec .top-bar{height:4px;background:var(--w700);margin:0 16px 14px;border-radius:0 0 2px 2px}
.r-sec .shead{padding:0 16px}
.r-sec .shead h3{margin:8px 0 0;font:700 24px/30px var(--sans);color:var(--w900)}
.r-sec .shead p{margin:2px 0 0;font:400 12px/18px var(--sans);color:var(--g500)}
.r-sec .accent{margin:14px 16px 0}
.win{margin:10px 16px 0;border:1px solid var(--g200);border-radius:12px;padding:17px}
.win.strong{background:var(--w25);border-color:var(--w100)}
.pill{display:inline-block;background:var(--w900);color:#fff;border-radius:999px;padding:4px 10px;
  font:600 12px/18px var(--sans);letter-spacing:.02em}
.win .wlbl{margin:0;font:600 12px/18px var(--sans);color:var(--w700);letter-spacing:.02em}
.win h4{margin:10px 0 0;font:700 20px/28px var(--sans);color:var(--g900)}
.win h4.sm{font-size:18px;line-height:24px}
.win p{margin:10px 0 0;font:400 16px/24px var(--sans);color:var(--g600)}
.upsell{background:var(--brand50);border:1px solid #F6D9CB;border-radius:12px;padding:16px}
.upsell b{display:block;font:600 16px/20px var(--sans);color:var(--g900)}
.upsell p{margin:4px 0 12px;font:400 12px/18px var(--sans);color:var(--g600)}
.upsell .btn{height:40px;font-size:14px}
.bars{padding:0 16px;margin-top:14px}
.bars .blbl{margin:0 0 12px;font:600 12px/18px var(--sans);letter-spacing:.04em;color:var(--g500)}
.bar-row{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.bar-row span{width:110px;flex:none;font:400 14px/20px var(--sans);color:var(--g700)}
.bar-row .track{flex:1;height:6px;border-radius:3px;background:var(--g200);overflow:hidden}
.bar-row .track i{display:block;height:6px;border-radius:3px;background:var(--w500);width:0;
  transition:width .6s cubic-bezier(.32,.72,0,1)}
.bar-row em{font-style:normal;width:12px;text-align:right;font:600 14px/20px var(--sans);color:var(--g700)}
/* The year labels and the percentages both need more room than the trait bars. */
.bands .bar-row span{width:98px}
.bands .bar-row em{width:34px}

/* Partner portrait: a label and a sentence, not a chart the reader must decode. */
.facts{padding:0 16px;margin-top:14px;display:flex;flex-direction:column}
.facts>div{padding:12px 0;border-top:1px solid var(--g200)}
.facts>div:first-child{border-top:0;padding-top:2px}
.facts span{display:block;font:600 12px/18px var(--sans);letter-spacing:.04em;
  text-transform:uppercase;color:var(--g500)}
.facts p{margin:4px 0 0;font:400 16px/24px var(--sans);color:var(--g700)}

/* A plain bulleted list inside a report section — patterns, remedies, the
   three things to change at work. */
.rlist{padding:0 16px;margin-top:16px}
.rlist .blbl{margin:0 0 10px;font:600 12px/18px var(--sans);letter-spacing:.04em;
  color:var(--g500)}
.rlist ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.rlist li{position:relative;padding-left:18px;font:400 15px/23px var(--sans);color:var(--g700)}
.rlist li::before{content:'';position:absolute;left:0;top:9px;width:6px;height:6px;
  border-radius:50%;background:var(--brand)}

/* ---------- The partner, seen from behind ----------
   Per the reference: a figure turned away, dissolving into a pink aurora.
   Three radial washes make the light, the silhouette is blurred and masked so
   it never gets an edge, and a white vignette eats it from every side — which
   is what keeps it a feeling instead of a claim about a real face. */
.pt{margin:14px 16px 0;padding:0;border-radius:14px;overflow:hidden;background:#FDF2F7}
.pt-art{position:relative;height:210px;
  background:
    radial-gradient(70% 55% at 22% 16%,#FFE1EE 0,rgba(255,225,238,0) 70%),
    radial-gradient(62% 50% at 82% 26%,#E8DBFB 0,rgba(232,219,251,0) 72%),
    radial-gradient(95% 72% at 50% 106%,#FFD4C7 0,rgba(255,212,199,0) 68%),
    linear-gradient(180deg,#FFF8FB 0,#FBE6F0 100%)}
.pt-fig{position:absolute;left:50%;bottom:0;width:100%;height:100%;
  transform:translateX(-50%);opacity:.82;filter:blur(6px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.5) 24%,#000 60%);
          mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.5) 24%,#000 60%)}
/* Light eats the silhouette from the sides, the way it does in the reference. */
.pt-art::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(64% 76% at 50% 56%,rgba(255,255,255,0) 44%,rgba(255,255,255,.72) 100%)}
.pt figcaption{margin:0;padding:13px 14px 15px;background:#fff;
  font:400 15px/23px var(--sans);color:var(--g700)}

.tilt{padding:0 16px;margin-top:16px}
/* Filled from the right, because the figure under the fill is the arranged side. */
.tilt .track{display:flex;justify-content:flex-end;height:8px;border-radius:4px;
  background:var(--g200);overflow:hidden}
.tilt .track i{flex:none;height:8px;border-radius:4px;background:var(--w500);width:0;
  transition:width .6s cubic-bezier(.22,1,.36,1)}
.tilt-top{display:flex;justify-content:space-between;margin-bottom:8px;
  font:400 14px/20px var(--sans);color:var(--g600)}
.tilt-top.n{margin:8px 0 0;font-weight:600;color:var(--w700)}

/* Two verdict lists, the way MyNaksh splits its greens from its cautions. */
.verdicts{display:flex;flex-direction:column;gap:10px}
.vlist{border-radius:12px;padding:16px}
.vlist.go{background:var(--s50)}
.vlist.hold{background:var(--w25)}
.vlist .vh{margin:0 0 10px;font:600 12px/18px var(--sans);letter-spacing:.04em}
.vlist.go .vh{color:var(--s700)}
.vlist.hold .vh{color:var(--w700)}
.vlist ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.vlist li{position:relative;padding-left:22px;font:400 15px/22px var(--sans);color:var(--g700)}
.vlist li::before{content:"";position:absolute;left:4px;top:8px;width:7px;height:7px;
  border-radius:50%}
.vlist.go li::before{background:var(--s700)}
.vlist.hold li::before{background:var(--w500)}

.tagged{background:#fff;border-radius:12px;padding:17px}
.tagged .th{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tagged h4{margin:0;font:700 18px/24px var(--sans);color:var(--g900)}
.tagged .tpill{font:600 12px/18px var(--sans);border-radius:999px;padding:4px 10px;white-space:nowrap}
.tagged .tpill.green{background:var(--s50);color:var(--s700)}
.tagged .tpill.amber{background:var(--w100);color:var(--w700)}
.tagged p{margin:10px 0 0;font:400 16px/24px var(--sans);color:var(--g600)}
.carousel-wrap{padding:8px 0 0}
.carousel-wrap .lbl{padding:0 0 12px;margin:0}
/* "People also bought" scrolls sideways, with the bleed so cards run off the edge. */
.carousel{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;padding-bottom:4px;margin:0 -16px;padding-left:16px;padding-right:16px}
.carousel::-webkit-scrollbar{display:none}
/* Each upsell gets the same cover, price pattern and button as the report being
   sold above it — a title and a bare ₹49 gave the reader nothing to recognise. */
.carousel .pcard{flex:none;width:158px;scroll-snap-align:start;background:#fff;border:1px solid var(--g200);
  border-radius:14px;padding:12px;display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.carousel .pcard .bk3{--bw:38px;--bh:51px;margin-bottom:10px}
.carousel .pcard b{font:600 14px/19px var(--sans);color:var(--g900)}
.carousel .pcard small{flex:1;margin-top:3px;font:400 12px/17px var(--sans);color:var(--g500)}
.pc-pr{display:flex;align-items:baseline;gap:5px;margin-top:8px}
.pc-pr em{font-style:normal;font:700 15px/20px var(--sans);color:var(--g900)}
.pc-pr s{font:400 11px/16px var(--sans);color:var(--g400)}
/* A quiet outlined button, not a second brand-orange CTA — the page already has
   one of those stuck to the bottom. */
.pc-btn{align-self:stretch;margin-top:8px;padding:7px 0;border-radius:9px;text-align:center;
  border:1px solid var(--brand);font:600 13px/18px var(--sans);color:var(--brand)}
.pcard:active .pc-btn{background:var(--brand50)}

/* ---------- R.5 / R.6 Timeline ---------- */
.tl-head{padding:18px 16px 0}
.tl-head h1{margin:0;font-family:var(--serif);font-size:30px;line-height:36px;font-weight:700;color:var(--g900)}
.tl-head p{margin:2px 0 0;font:400 14px/20px var(--sans);color:var(--g600)}
.tl-today{display:flex;align-items:center;gap:8px;padding:18px 16px 6px;
  font:700 14px/20px var(--sans);letter-spacing:.04em;color:var(--brand)}
.tl-today i{width:10px;height:10px;border-radius:50%;background:var(--brand)}
.tl{position:relative;padding:0 16px 0 20px}
.tl::before{content:"";position:absolute;left:20px;top:0;bottom:16px;width:2px;background:var(--brand);opacity:.85}
.tl-item{padding-left:20px;margin-bottom:18px}
.tl-item time{display:block;font:400 12px/18px var(--sans);color:var(--g500);margin-bottom:6px}
.tl-card{padding:14px}
.rep-top{display:flex;gap:12px;align-items:flex-start}
.rep-top>img{width:44px;height:56px;border-radius:4px;object-fit:cover;flex:none;
  box-shadow:0 2px 6px rgba(16,24,40,.18)}
.rep-top>div{flex:1;min-width:0}
.rep-top b{display:block;font:700 17px/24px var(--sans);color:var(--g900)}
.rep-status{margin:2px 0 0;font:400 14px/20px var(--sans);color:var(--g600)}
.rep-status.gray{color:var(--g500)}
.rep-status.green{color:var(--s700);font-weight:600}
.rep-status.ready{color:var(--s700);font-weight:600}
.rep-status.gray{color:var(--g600)}
.tarot-th{width:48px;height:48px;object-fit:contain;flex:none}
.doc-th{width:44px;height:50px;flex:none;border-radius:4px;background:linear-gradient(160deg,#FDECD3,#F7D9A8);
  box-shadow:inset 0 0 0 1px #F0C98A}
.steps{margin-top:14px;display:flex;flex-direction:column;gap:12px}
.step{display:flex;align-items:flex-start;gap:12px}
.step .sdot{flex:none;width:24px;height:24px;border-radius:50%;background:var(--g100);
  position:relative;transition:background .3s ease,box-shadow .3s ease}
.step p{margin:0;font:400 15px/22px var(--sans);color:var(--g400);transition:color .3s ease}
.step.done .sdot{background:#12B76A}
.step.done .sdot::after{content:"";position:absolute;left:8px;top:6px;width:6px;height:10px;
  border:2px solid #fff;border-top:0;border-left:0;transform:rotate(45deg)}
.step.done p{color:var(--g900);font-weight:600}
.step.now .sdot{background:#fff;box-shadow:inset 0 0 0 3px var(--w500);animation:pulse 1.4s ease-in-out infinite}
.step.now p{color:var(--w900);font-weight:600}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@media (prefers-reduced-motion:reduce){.step.now .sdot{animation:none}}
.notify{margin-top:14px;background:var(--w50);border-radius:10px;padding:10px 12px;
  font:500 13px/18px var(--sans);color:var(--w700)}
.rep-acts{display:flex;gap:10px;margin-top:14px}
.rep-acts .btn{height:44px;font-size:15px}
.rep-acts .btn.outline{width:auto;padding:0 20px}

/* ---------- R.6b/c Book opening ---------- */
#book{background:var(--w25)}
.book-stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;
  perspective:1400px}
.book{position:relative;width:170px;height:218px;transform-origin:center;
  transition:width .9s cubic-bezier(.4,0,.2,1),height .9s cubic-bezier(.4,0,.2,1)}
.book.open{width:290px;height:400px}
.book .page{position:absolute;inset:0;background:#fff;border-radius:10px;
  box-shadow:0 18px 40px -16px rgba(122,46,14,.35);
  display:flex;flex-direction:column;justify-content:center;padding:26px;opacity:0;
  transition:opacity .5s ease .25s}
.book.open .page{opacity:1}
.book .page h2{margin:6px 0 0;font:700 22px/28px var(--sans);color:var(--g700)}
.book .page .psub{margin:4px 0 0;font:400 14px/20px var(--sans);color:var(--g600)}
.book .page hr{width:100%;border:0;border-top:1px solid var(--g200);margin:16px 0 0}
.book .cover{position:absolute;inset:0;transform-origin:left center;backface-visibility:hidden;
  transition:transform .9s ease-in-out}
.book .cover img{width:100%;height:100%;object-fit:contain}
.book.open .cover{transform:rotateY(-160deg)}
.book-cap{margin:0;font:600 15px/22px var(--sans);color:var(--brand);transition:opacity .3s ease}

/* ---------- Scrim + sheets ---------- */
.scrim{position:absolute;inset:0;z-index:70;background:rgba(16,24,40,.45);opacity:0;transition:opacity .22s ease}
.scrim.on{opacity:1}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:71;background:#fff;
  border-radius:24px 24px 0 0;padding:20px 20px calc(20px + env(safe-area-inset-bottom,0px));
  transform:translateY(102%);transition:transform .3s cubic-bezier(.32,.72,0,1);
  max-height:88%;overflow-y:auto;display:flex;flex-direction:column;gap:14px}
.sheet.on{transform:none}
@media (prefers-reduced-motion:reduce){.sheet,.scrim{transition:none}}
.grab{width:40px;height:4px;border-radius:2px;background:var(--g200);margin:-6px auto 2px;flex:none}
.sheet h3{margin:0;font:700 18px/26px var(--sans);color:var(--g900)}
.sheet-sub{margin:-8px 0 0;font:400 13px/18px var(--sans);color:var(--g600)}
.radio-list{display:flex;flex-direction:column;overflow-y:auto}
.radio-list button{display:flex;align-items:center;justify-content:space-between;gap:12px;
  border:0;background:none;padding:13px 0;font:400 16px/24px var(--sans);color:var(--g700);text-align:left}
.radio-list button+button{border-top:1px solid var(--g200)}
.radio-list button.on{color:var(--w700);font-weight:600}
.radio-list .rd{flex:none;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--g300);position:relative}
.radio-list button.on .rd{border-color:#C4320A;border-width:6px;background:#fff}

.buy-top{display:flex;align-items:center;gap:12px}
.buy-top img{width:48px;height:62px;border-radius:4px;object-fit:cover;flex:none;
  box-shadow:0 2px 6px rgba(16,24,40,.18)}
.buy-top b{display:block;font:700 17px/24px var(--sans);color:var(--g900)}
.buy-top small{display:block;font:400 13px/18px var(--sans);color:var(--g600);margin-top:2px}
.buy-lang{display:flex;align-items:center;justify-content:space-between;gap:10px;
  border:1px solid var(--g200);border-radius:10px;padding:13px 14px;font:400 15px/22px var(--sans);color:var(--g700)}
.buy-lang b{font-weight:600}
.buy-price{background:var(--g50);border-radius:10px;padding:14px}
.brow{display:flex;justify-content:space-between;gap:10px;font:400 14px/22px var(--sans);color:var(--g600)}
.brow.green{color:var(--s700);font-weight:600}
.brow.total{font:700 16px/24px var(--sans);color:var(--g900)}
.buy-price hr{border:0;border-top:1px solid var(--g200);margin:10px 0}

/* ---------- Push + toast ---------- */
.push{position:absolute;top:calc(var(--sbh) + 6px);left:10px;right:10px;z-index:80;
  background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-radius:16px;padding:12px 14px;
  display:flex;gap:12px;align-items:flex-start;cursor:pointer;
  box-shadow:0 12px 30px -8px rgba(16,24,40,.35);
  transform:translateY(-140%);transition:transform .42s cubic-bezier(.32,.72,0,1),opacity .25s ease}
.push.on{transform:none}
.push-ic{flex:none;width:38px;height:38px;border-radius:9px;background:var(--brand)}
.push-t small{display:block;font:400 12px/18px var(--sans);color:var(--g500)}
.push-t b{display:block;font:700 14px/20px var(--sans);color:var(--g900)}
.push-t p{margin:1px 0 0;font:400 13px/18px var(--sans);color:var(--g600)}

.toast{position:absolute;left:50%;bottom:86px;transform:translate(-50%,12px);z-index:90;
  background:rgba(16,24,40,.92);color:#fff;border-radius:10px;padding:10px 16px;
  font:500 13px/18px var(--sans);white-space:nowrap;opacity:0;transition:opacity .2s ease,transform .2s ease;
  pointer-events:none;max-width:86%;overflow:hidden;text-overflow:ellipsis}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.success{background:var(--s700)}

/* ---------- Review pass (16 Oct) ---------- */
/* Coins on the check-in card, per Figma 2638:16701. */
#checkinCard{position:relative}
.ci-coins{position:absolute;top:14px;right:14px;font-size:20px;line-height:1}
/* The guidance slot renders a .tile; the wrapper itself must not add a box. */
.gslot{display:contents}
/* Chapter reader — a full ebook page. Paper ground, centred chapter opener,
   clean sans prose with the chart figures sitting inside it. The sell blocks
   at the end read as UI, not prose. */
#chapter{background:#FCF7ED}
#chapter h3{font-family:var(--serif);font-weight:700;font-size:26px;line-height:31px;
  text-align:center;color:#2C2318;margin:0}
#chapter h3::after{content:"";display:block;width:54px;height:1px;background:#D8C5A5;margin:14px auto 16px}
.ktl{position:relative;height:12px;margin:2px 6px 0}
.ktl-bar{display:block;height:6px;margin-top:3px;border-radius:3px;background:#EFE3CC;overflow:hidden}
.ktl-bar i{display:block;height:100%;width:82%;background:linear-gradient(90deg,#E8CE93,#C9972F)}
.ktl-dot{position:absolute;left:82%;top:0;width:12px;height:12px;border-radius:50%;
  background:#C9972F;border:2px solid #FCF7ED;transform:translateX(-50%)}
.ktl-lab{display:flex;justify-content:space-between;margin:5px 6px 0;font:500 11px/15px var(--sans);color:#8A7A5E}
.ktl-lab b{color:#9A6A14}
.cl-h{margin:0 0 1px;font:700 10px/15px var(--sans);letter-spacing:.06em;
  text-transform:uppercase;color:var(--g500)}
.cl-row{display:flex;gap:9px;align-items:flex-start}
.cl-row i{flex:0 0 auto;width:18px;height:18px;border-radius:50%;margin-top:1px;
  font:700 10px/18px var(--sans);font-style:normal;text-align:center;
  background:var(--g100);color:var(--g500)}
.cl-row.done i{background:#ECFDF3;color:#067647}
.cl-row span{display:flex;flex-direction:column}
.cl-row b{font:600 13px/18px var(--sans);color:var(--g900)}
.cl-row small{font:400 11px/15px var(--sans);color:var(--g500)}
/* Strikes inside tile subtitles and chat buttons stay quiet. */
.tile .tt small s{color:var(--g400)}

/* ---------- Real phone: full screen ---------- */
@media (max-width:600px){
  html,body{background:#fff;overscroll-behavior:none}
  .stage{padding:0;height:100dvh}
  .switcher{display:none}
  .phone{width:100%;height:100dvh;max-height:none;border-radius:0;box-shadow:none}
  /* The OS draws the real status bar, so give the chrome the notch inset instead of our fake one. */
  :root{--sbh:env(safe-area-inset-top,0px)}
  .sbar{display:none}
}