/* Retention guide: loop strip, WhatsApp message story, metrics list. */
.cr-guide .cr-loop { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; margin:28px 0; counter-reset:loop; }
.cr-guide .cr-loop > div { position:relative; display:grid; gap:4px; padding:16px 14px; border-radius:18px; border:1px solid var(--fe-border); background:var(--fe-raised); color:var(--fe-ink); }
.cr-guide .cr-loop > div:not(:last-child)::after { content:"→"; position:absolute; right:-10px; top:18px; z-index:1; color:var(--fe-accent); font-weight:800; }
.cr-guide .cr-loop span { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--fe-accent); color:var(--fe-raised); font:800 .8rem 'Manrope',sans-serif; }
.cr-guide .cr-loop b { margin-top:4px; font-size:1rem; }
.cr-guide .cr-loop small { color:var(--fe-muted); font-size:.8rem; line-height:1.4; }

.cr-guide .cr-story { margin:44px 0; padding:26px; border-radius:26px; border:1px solid var(--fe-border); background:var(--fe-surface); color:var(--fe-ink); scroll-margin-top:110px; }
.cr-guide .cr-title { margin-top:6px; font:400 clamp(1.6rem,3vw,2.1rem)/1.1 'DM Serif Display',serif; }
.cr-guide .cr-sub { margin-top:6px; color:var(--fe-muted); font-size:.92rem; line-height:1.55; }
.cr-guide .cr-biz { display:flex; flex-wrap:wrap; gap:6px; margin:18px 0; }
.cr-guide .cr-biz button { min-height:42px; padding:0 16px; border:1px solid var(--fe-border); border-radius:999px; background:var(--fe-raised); color:var(--fe-ink); font:700 .88rem 'Manrope',sans-serif; cursor:pointer; }
.cr-guide .cr-biz button[aria-selected=true] { background:var(--fe-accent); border-color:var(--fe-accent); color:var(--fe-raised); }
.cr-guide button:focus-visible { outline:3px solid var(--fe-accent-2); outline-offset:2px; }
.cr-guide .cr-layout { display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr); gap:24px; align-items:start; }

/* Phone (always WhatsApp light) */
.cr-guide .cr-phone { overflow:hidden; border:8px solid #15171a; border-radius:34px; background:#efe7dd; box-shadow:0 30px 60px -30px rgba(0,0,0,.6); font-family:system-ui,-apple-system,'Segoe UI',sans-serif; }
.cr-guide .cr-phone-top { display:flex; align-items:center; gap:10px; padding:14px 14px 12px; background:#1f6f5c; color:#fff; }
.cr-guide .cr-phone-top b { display:block; font-size:.9rem; }
.cr-guide .cr-phone-top small { display:block; color:rgba(255,255,255,.75); font-size:.72rem; }
.cr-guide .cr-av { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#fff; color:#1f6f5c; font-weight:800; }
.cr-guide .cr-chat { display:flex; flex-direction:column; gap:6px; height:440px; overflow-y:auto; padding:14px 12px 18px; background-image:radial-gradient(rgba(0,0,0,.035) 1px,transparent 1px); background-size:14px 14px; scrollbar-width:thin; }
.cr-guide .cr-daymark { align-self:center; margin:8px 0 2px; padding:3px 10px; border-radius:8px; background:#dfeaf2; color:#4a5a66; font-size:.7rem; font-weight:700; }
.cr-guide .cr-msg { position:relative; display:grid; gap:3px; max-width:84%; padding:8px 10px 5px; border-radius:12px; color:#111; font-size:.83rem; line-height:1.42; box-shadow:0 1px 1px rgba(0,0,0,.08); }
.cr-guide .cr-msg small { justify-self:end; color:#8a8f94; font-size:.66rem; }
.cr-guide .cr-out { align-self:flex-start; background:#fff; border-top-left-radius:3px; }
.cr-guide .cr-in { align-self:flex-end; background:#d9fdd3; border-top-right-radius:3px; }
.cr-guide .cr-msg.is-new { animation:cr-pop .4s cubic-bezier(.2,.9,.3,1.3) both; }
.cr-guide .cr-msg.is-late { animation-delay:.7s; }
@keyframes cr-pop { from { opacity:0; transform:translateY(10px) scale(.96); } }

/* Side */
.cr-guide .cr-chips { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.cr-guide .cr-chips button { display:grid; gap:1px; padding:9px 10px; border:1px solid var(--fe-border); border-radius:12px; background:var(--fe-raised); color:var(--fe-ink); font:700 .86rem 'Manrope',sans-serif; text-align:left; cursor:pointer; }
.cr-guide .cr-chips button span { color:var(--fe-muted); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; }
.cr-guide .cr-chips button.is-done span::after { content:" ✓"; color:var(--fe-accent); }
.cr-guide .cr-chips button[aria-selected=true] { background:var(--fe-accent); border-color:var(--fe-accent); color:var(--fe-raised); }
.cr-guide .cr-chips button[aria-selected=true] span { color:inherit; opacity:.8; }
.cr-guide .cr-note-in { margin-top:14px; padding:22px; border-radius:20px; background:var(--fe-raised); border:1px solid var(--fe-border); animation:cr-fade .3s ease; }
@keyframes cr-fade { from { opacity:0; transform:translateY(6px); } }
.cr-guide .cr-note-tag { display:inline-block; padding:4px 10px; border-radius:999px; background:color-mix(in srgb,var(--fe-accent) 16%,transparent); color:var(--fe-accent); font:800 .72rem 'Manrope',sans-serif; letter-spacing:.06em; text-transform:uppercase; }
.cr-guide .cr-note-why { margin-top:12px; font:400 1.3rem/1.35 'DM Serif Display',serif; }
.cr-guide .cr-note-goal { display:flex; gap:10px; align-items:center; margin-top:14px; padding-top:12px; border-top:1px solid var(--fe-border); font-weight:700; }
.cr-guide .cr-note-goal span { color:var(--fe-muted); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }
.cr-guide .cr-ctrl { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.cr-guide .cr-ctrl button { flex:1 1 auto; min-height:42px; padding:0 14px; border:1px solid var(--fe-border); border-radius:999px; background:var(--fe-raised); color:var(--fe-ink); font:700 .86rem 'Manrope',sans-serif; cursor:pointer; }
.cr-guide .cr-ctrl #cr-next { background:var(--fe-accent); border-color:var(--fe-accent); color:var(--fe-raised); }
.cr-guide .cr-ctrl button:disabled { opacity:.35; cursor:default; }

.cr-guide .cr-watch { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:22px 0; }
.cr-guide .cr-watch > div { display:grid; gap:4px; padding:16px; border-radius:16px; border:1px solid var(--fe-border); border-left:4px solid var(--fe-accent); background:var(--fe-raised); color:var(--fe-muted); font-size:.9rem; line-height:1.55; }
.cr-guide .cr-watch b { color:var(--fe-ink); font-size:1rem; }

@media (max-width:900px) {
  .cr-guide .cr-loop { grid-template-columns:1fr 1fr; }
  .cr-guide .cr-loop > div::after { display:none; }
  .cr-guide .cr-layout { grid-template-columns:1fr; }
  .cr-guide .cr-phone { max-width:360px; width:100%; margin:0 auto; }
}
@media (max-width:560px) {
  .cr-guide .cr-story { padding:16px; margin-left:-6px; margin-right:-6px; }
  .cr-guide .cr-chat { height:380px; }
  .cr-guide .cr-watch { grid-template-columns:1fr; }
  .cr-guide .cr-loop > div:last-child { grid-column:1 / -1; }
}
@media (prefers-reduced-motion:reduce) { .cr-guide .cr-msg.is-new, .cr-guide .cr-note-in { animation:none; } }