/* LCC sections added on top of Retro Umbrella's styles.css: pain picker, why it works, Jiyu buy box, story pages,
   comparison table, book-page hero. RU tokens only (--paper --stone --rule --ink --ink-2 --ink-3 --edge --pad --sans). */
:root{--lcc-ok:#1F4A33;--lcc-ok-bg:#D3EBDD;--lcc-pick:#F6F08C;--r:24px}

/* ── pain picker ("What's happening at your place?") ── */
.pains .set-head{margin-bottom:36px}
.pain-g{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.pain{display:flex;flex-direction:column;background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:0 1px 0 var(--rule);transition:transform .3s,box-shadow .3s}
.pain:hover{transform:translateY(-3px);box-shadow:0 18px 40px -24px rgba(22,21,19,.35)}
.pain img{aspect-ratio:4/3;width:100%;object-fit:cover}
.pain div{padding:20px 20px 22px;display:flex;flex-direction:column;gap:12px;flex:1}
.pain q{font:italic 400 20px/1.3 var(--serif,'Playfair Display',serif);color:var(--ink);quotes:none}
.pain span{margin-top:auto;font:600 14px/1.3 var(--sans);color:var(--ink);display:flex;align-items:center;gap:8px}
.pain span svg{width:16px;height:16px}
@media (max-width:1000px){.pain-g{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.pain-g{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(var(--edge)*-1);padding-inline:var(--edge)}.pain{flex:0 0 74vw;scroll-snap-align:start}.pain q{font-size:19px}}

/* ── why it works ── */
.why{background:var(--stone)}
.why-g{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(32px,6vw,96px);align-items:start}
.why ol{list-style:none;display:grid;gap:28px;counter-reset:w}
.why li{display:grid;grid-template-columns:44px 1fr;gap:18px;counter-increment:w}
.why li::before{content:counter(w);width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font:600 16px/1 var(--sans)}
.why li b{display:block;font:600 18px/1.3 var(--sans);color:var(--ink);margin-bottom:6px}
.why li p{color:var(--ink-2);font-size:16px;line-height:1.55}
@media (max-width:860px){.why-g{grid-template-columns:1fr}}

/* ── Jiyu buy box ── */
.bb-g{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,5vw,72px);align-items:start}
.bb-gal{position:sticky;top:110px}
.bb-main{aspect-ratio:1;border-radius:var(--r);overflow:hidden;background:#fff;position:relative}
.bb-main img{width:100%;height:100%;object-fit:cover}
.bb-main .free{position:absolute;left:16px;top:16px;background:var(--lcc-pick);color:var(--ink);font:500 13px/1 var(--sans);padding:8px 14px;border-radius:999px}
.bb-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:10px}
.bb-thumbs button{aspect-ratio:1;border-radius:14px;overflow:hidden;box-shadow:inset 0 0 0 2px transparent;padding:0;background:#fff}
.bb-thumbs button[aria-current="true"]{box-shadow:0 0 0 2px var(--ink)}
.bb-thumbs img{width:100%;height:100%;object-fit:cover}
.bb-love{display:flex;align-items:center;gap:8px;font:600 14px/1 var(--sans);color:var(--ink)}
.bb-love i{color:#C2410C;font-style:normal;letter-spacing:2px}
.bb h1,.bb h2.bb-t{font:400 clamp(34px,4vw,52px)/1.05 var(--serif,'Playfair Display',serif);letter-spacing:-.01em;margin-top:14px;color:var(--ink)}
.bb-benefit{margin-top:14px;font:600 18px/1.4 var(--sans);color:var(--ink)}
.bb-ticks{list-style:none;display:grid;gap:12px;margin-top:20px}
.bb-ticks li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.45;color:var(--ink)}
.bb-ticks li::before{content:"";flex:none;width:22px;height:22px;margin-top:1px;border-radius:50%;background:var(--lcc-ok-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F4A33' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/13px no-repeat}
.bb-fmt{display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--rule);margin-top:26px}
.bb-fmt button{height:40px;border-radius:999px;font:600 14px/1 var(--sans);color:var(--ink)}
.bb-fmt button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.bb-rows{display:grid;gap:12px;margin-top:16px}
.bb-row{position:relative;display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:16px 18px;border-radius:18px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--rule);font-family:var(--sans);color:var(--ink)}
.bb-row[aria-checked="true"]{box-shadow:inset 0 0 0 2px var(--ink);background:#FFFDF6}
.bb-row .dot{flex:none;width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--rule)}
.bb-row[aria-checked="true"] .dot{box-shadow:inset 0 0 0 6px var(--ink)}
.bb-row .mid{flex:1;min-width:0}.bb-row .mid b{display:block;font-weight:600;font-size:16px}.bb-row .mid small{display:block;font-size:13px;color:var(--ink-3);margin-top:2px}
.bb-row .mid small.ok{color:var(--lcc-ok);font-weight:600}
.bb-row .pr{text-align:right}.bb-row .pr b{display:block;font-size:18px;font-weight:600}.bb-row .pr small{font-size:13px;color:var(--ink-3)}.bb-row .pr em{font-style:normal;color:var(--lcc-ok);font-weight:600}
.bb-row .tag{position:absolute;right:16px;top:-11px;font:600 12px/1 var(--sans);padding:6px 10px;border-radius:999px;background:var(--lcc-pick);color:var(--ink)}
.bb-row .tag.best{background:var(--ink);color:var(--paper)}
.bb-go{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:58px;margin-top:18px;border-radius:999px;background:var(--ink);color:var(--paper);font:600 16px/1 var(--sans)}
.bb-go svg{width:18px;height:18px}
.bb-then{text-align:center;font-size:14px;color:var(--ink-2);margin-top:10px}
.bb-promise{display:flex;gap:12px;align-items:flex-start;margin-top:18px;padding:14px 16px;border-radius:16px;background:var(--lcc-ok-bg);color:var(--lcc-ok);font-size:14px;line-height:1.5}
.bb-promise svg{flex:none;width:20px;height:20px;margin-top:1px}
.bb-pay{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.bb-pay span{font-size:12px;color:var(--ink-2);padding:5px 9px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--rule);background:#fff}
@media (max-width:900px){.bb-g{grid-template-columns:1fr}.bb-gal{position:static}}

/* ── sound familiar (the 2:13am story, NAB order) ── */
.nab{max-width:760px;margin-inline:auto;text-align:center}
.nab .t{font:400 clamp(30px,4vw,48px)/1.1 var(--serif,'Playfair Display',serif);color:var(--ink)}
.nab p{font-size:clamp(18px,1.6vw,21px);line-height:1.6;color:var(--ink-2);margin-top:18px}
.nab p b{color:var(--ink);font-weight:600}
.nab .turn{margin-top:28px;font:italic 400 clamp(24px,2.6vw,32px)/1.3 var(--serif,'Playfair Display',serif);color:var(--ink)}

/* ── story pages (what happens in the book) ── */
.story-g{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.story-g figure{background:#fff;border-radius:var(--r);overflow:hidden}
.story-g img{width:100%;aspect-ratio:4/3;object-fit:cover}
.story-g figcaption{padding:18px 20px 22px;font:italic 400 18px/1.4 var(--serif,'Playfair Display',serif);color:var(--ink)}
.story-g figcaption small{display:block;font:500 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-style:normal;margin-bottom:10px}
@media (max-width:900px){.story-g{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.story-g{grid-template-columns:1fr}}

/* ── how to use + authority ── */
.use-g{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}
.use-g div{background:#fff;border-radius:var(--r);padding:26px}
.use-g b{display:block;font:600 13px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.use-g p{margin-top:12px;font:400 20px/1.35 var(--serif,'Playfair Display',serif);color:var(--ink)}
.auth{display:flex;gap:16px;align-items:flex-start;margin-top:28px;padding:20px 22px;border-radius:var(--r);background:var(--stone);font-size:15px;line-height:1.55;color:var(--ink-2)}
.auth b{color:var(--ink)}
@media (max-width:760px){.use-g{grid-template-columns:1fr}}

/* ── comparison (Jiyu's us vs them) ── */
.cmp{width:100%;border-collapse:separate;border-spacing:0;font-family:var(--sans);font-size:15px}
.cmp th{font-weight:600;padding:16px 10px;text-align:center;color:var(--ink-2)}
.cmp th.us{background:var(--ink);color:var(--paper);border-radius:var(--r) var(--r) 0 0}
.cmp td{padding:16px 10px;border-top:1px solid var(--rule);text-align:center}
.cmp td:first-child{text-align:left;font-weight:500;color:var(--ink);padding-left:0}
.cmp td.us{background:#fff}
.cmp tr:last-child td.us{border-radius:0 0 var(--r) var(--r)}
.cmp .y,.cmp .n{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;font-size:14px;font-weight:700}
.cmp .y{background:var(--lcc-ok-bg);color:var(--lcc-ok)}.cmp .n{background:var(--stone);color:var(--ink-3)}
@media (max-width:640px){.cmp{font-size:13px}.cmp th,.cmp td{padding:12px 4px}}

/* ── hero: darker left-to-right overlay so the words always read (phone keeps RU's bottom-up one) ── */
@media (min-width:761px){.hero::after{background:linear-gradient(0deg,rgba(14,11,8,.45) 0%,rgba(14,11,8,0) 22%),linear-gradient(90deg,rgba(14,11,8,.88) 0%,rgba(14,11,8,.72) 32%,rgba(14,11,8,.38) 58%,rgba(14,11,8,0) 82%)}}
.hero-stars{display:flex;align-items:center;gap:10px;margin:0 0 18px!important;font:500 15px/1 var(--sans)!important;color:#fff!important}
.hero-stars span{color:#FFC93C;font-size:20px;letter-spacing:3px}

/* ── buttons: rounded, one warm "buy" colour for every main action ── */
:root{--buy:#E2531B;--buy-hover:#C2410C}
.btn,.bb-go,.rc-go,.rc-more{border-radius:999px!important}
.btn-paper,.btn-ink,.bb-go,.rc-go,.buy .btn,.mbar em{background:var(--buy)!important;color:#fff!important;font-weight:600!important}
.btn-paper:hover,.btn-ink:hover,.bb-go:hover,.rc-go:hover,.buy .btn:hover{background:var(--buy-hover)!important}
.hero .btn-line{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.85)}
.hero-stars{white-space:nowrap;max-width:none!important}
@media(max-width:760px){
  html body .hero p.hero-stars{display:flex!important;font-size:13px!important;margin-bottom:12px!important}
  html body .hero p.hero-stars span{font-size:16px}
  html body .hero .ctas a.btn-paper,html body .close a.btn-paper,html body .close a.btn,html body .phero a.btn-paper{background:var(--buy)!important;color:#fff!important;border-color:var(--buy)!important}
}