/* Kratom Deals Engine — enhancement styles. Inherits theme tokens (--ink, --teal, --line …). */ /* ---- Freshness pill ---- */ .kr-fresh { display:inline-flex; align-items:center; gap:.45rem; font-size:.82rem; font-weight:600; border:1px solid var(--line); border-radius:999px; padding:.25rem .7rem; margin:.2rem 0 1rem; } .kr-fresh__dot { width:.55rem; height:.55rem; border-radius:50%; background:currentColor; } .kr-fresh--ok { color:var(--verify); border-color:#bfe4cd; background:#f1f9f4; } .kr-fresh--warn { color:var(--amber); border-color:#f0dcb6; background:var(--amber-soft); } .kr-fresh--old { color:var(--danger); border-color:#eecccc; background:#fbeeee; } /* ---- Trust profile ---- */ .kr-trust__head { display:flex; gap:1rem; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; } .kr-trust__score { flex:0 0 auto; text-align:center; border:2px solid var(--ink); border-radius:var(--radius); padding:.5rem .9rem; line-height:1; } .kr-trust__score span { font-family:var(--display); font-size:2rem; color:var(--teal); font-weight:800; } .kr-trust__score small { display:block; font-size:.7rem; color:var(--ink-soft); margin-top:.25rem; } .kr-trust__pillars { display:grid; gap:.5rem; margin:.4rem 0 1rem; } .kr-trust__pillar { display:grid; grid-template-columns:minmax(120px,1fr) 2fr auto; gap:.7rem; align-items:center; font-size:.9rem; } .kr-trust__plabel { color:var(--ink-soft); } .kr-trust__pval { font-family:var(--mono); font-size:.82rem; color:var(--ink-soft); } .kr-bar { display:block; height:8px; background:var(--mist); border-radius:999px; overflow:hidden; } .kr-bar > span { display:block; height:100%; background:var(--teal); border-radius:999px; } .kr-trust__facts { display:flex; flex-direction:column; margin:.6rem 0; } .kr-trust__fact { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; border-top:1px solid var(--line); padding:.6rem 0; } .kr-trust__fact:last-child { border-bottom:1px solid var(--line); } .kr-trust__fact dt { font-size:.9rem; color:var(--ink-soft); text-transform:none; letter-spacing:0; margin:0; flex:0 0 auto; } .kr-trust__fact dd { margin:0; font-weight:500; text-align:right; } .kr-trust__unverified { background:var(--amber-soft); border:1px solid #f0dcb6; border-radius:8px; padding:.7rem .9rem; font-size:.9rem; margin:.6rem 0; } .kr-trust__foot { margin:.6rem 0 0; font-size:.82rem; } /* ---- Decision snapshot ---- */ .kr-snapshot { border:2px solid var(--ink); } .kr-snapshot__head { display:flex; justify-content:space-between; align-items:center; gap:1rem; } .kr-snapshot__head h2 { margin:0; } .kr-snapshot__score { font-family:var(--display); font-weight:800; font-size:1.8rem; color:var(--teal); } .kr-snapshot__score small { font-size:.9rem; color:var(--ink-soft); } .kr-snapshot__bottom { font-size:1.05rem; margin:.5rem 0 .8rem; } .kr-snapshot__grid { display:flex; flex-direction:column; margin:.4rem 0 .8rem; } .kr-snapshot__grid > div { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; border-top:1px solid var(--line); padding:.55rem 0; } .kr-snapshot__grid > div:last-child { border-bottom:1px solid var(--line); } .kr-snapshot__grid dt { font-size:.9rem; color:var(--ink-soft); text-transform:none; letter-spacing:0; margin:0; } .kr-snapshot__grid dd { margin:0; font-weight:500; text-align:right; } .kr-snapshot__chips { display:flex; flex-wrap:wrap; gap:.45rem; margin:.3rem 0 .8rem; } .kr-chip { font-size:.82rem; font-weight:600; border-radius:999px; padding:.28rem .7rem; border:1px solid var(--line); } .kr-chip--good { color:var(--teal-deep); background:var(--mist); border-color:#bfe0df; } .kr-chip--skip { color:var(--warn); background:#fbe9df; border-color:#f0cdb6; } .kr-snapshot__jump { font-weight:700; font-family:var(--display); text-decoration:none; } /* ---- Pros / cons ---- */ .kr-proscons__cols { display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; } .kr-proscons__col { border:1px solid var(--line); border-radius:var(--radius); padding:.6rem 1rem 1rem; } .kr-proscons__col h3 { display:flex; align-items:center; gap:.5rem; margin:.6rem 0 .3rem; font-size:1rem; } .kr-proscons__col--pro { background:#f1f9f4; border-color:#cbe8d5; } .kr-proscons__col--pro h3 span { color:var(--verify); } .kr-proscons__col--con { background:#fbf4ef; border-color:#f0d9c6; } .kr-proscons__col--con h3 span { color:var(--warn); } .kr-proscons__col ul { margin:.3rem 0 0; padding-left:1.1rem; } .kr-proscons__col li { margin:.35rem 0; font-size:.94rem; } /* ---- Team activity row (inside the verifylog) ---- */ .kr-verifylog__row--team { background:var(--mist); border-radius:6px; } .kr-verifylog__row--team .kr-verifylog__ico { color:var(--teal); font-weight:800; } /* ---- Shared tool shell ---- */ .kr-tool { border:1px solid var(--line); border-radius:var(--radius); background:#fff; padding:1.2rem 1.3rem; margin:1.4rem 0; } .kr-tool__title { margin:0 0 .2rem; } .kr-tool__note { margin:0 0 1rem; font-size:.82rem; } .kr-tool__grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:.9rem; } .kr-tool label { display:flex; flex-direction:column; font-size:.82rem; font-weight:600; color:var(--ink-soft); gap:.3rem; } .kr-tool input, .kr-tool select { font:inherit; padding:.5rem .6rem; border:1px solid var(--line); border-radius:7px; background:#fff; color:var(--ink); } .kr-tool__inline { display:flex; gap:.4rem; } .kr-tool__inline input { flex:1; } .kr-tool__out { margin-top:1.1rem; border-top:1px solid var(--line); padding-top:1rem; } .kr-tool__stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:.7rem; } .kr-tool__stats > div { background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:.6rem .7rem; } .kr-tool__stats strong { display:block; font-family:var(--display); font-size:1.35rem; color:var(--teal-deep); } .kr-tool__stats span { font-size:.76rem; color:var(--ink-soft); } .kr-tool__tip { font-size:.88rem; background:var(--mist); border-radius:8px; padding:.6rem .8rem; margin:.9rem 0 0; } .kr-syringe { width:100%; height:auto; margin:1rem 0 .2rem; } .kr-syringe text { font:600 8px var(--body); fill:var(--ink-soft); } /* ---- Storage tool ---- */ .kr-storage__date { max-width:280px; } .kr-storage__result { margin-top:1rem; } .kr-storage__badge { display:inline-block; font-family:var(--display); font-weight:800; font-size:1.1rem; padding:.4rem .9rem; border-radius:8px; } .kr-storage__badge.is-ok { background:#f1f9f4; color:var(--verify); border:1px solid #cbe8d5; } .kr-storage__badge.is-soon { background:var(--amber-soft); color:var(--amber); border:1px solid #f0dcb6; } .kr-storage__badge.is-over { background:#fbeeee; color:var(--danger); border:1px solid #eecccc; } .kr-storage__ref { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:.7rem; margin-top:1.1rem; } .kr-storage__card { border:1px solid var(--line); border-radius:8px; padding:.7rem .8rem; } .kr-storage__card strong { display:block; margin-bottom:.25rem; font-size:.92rem; } .kr-storage__card span { font-size:.84rem; color:var(--ink-soft); } @media (max-width:640px) { .kr-proscons__cols { grid-template-columns:1fr; } .kr-trust__pillar { grid-template-columns:1fr auto; } .kr-trust__pillar .kr-bar { grid-column:1 / -1; order:3; } } /* ---- Reconstitution overflow warning ---- */ .kr-tool__warn { font-size:.9rem; background:#fbeeee; color:var(--danger); border:1px solid #eecccc; border-radius:8px; padding:.55rem .8rem; margin:.6rem 0 0; } /* ---- Storage guide ([kr_storage_guide]) ---- */ .kr-guide { margin:1rem 0; } .kr-guide h3 { margin:1.6rem 0 .5rem; } .kr-guide__cards { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:.4rem 0 .5rem; } .kr-guide__card { border:1px solid var(--line); border-radius:var(--radius); padding:1rem 1.1rem; } .kr-guide__card h3 { margin:0 0 .5rem; } .kr-guide__card ul { margin:0; padding-left:1.1rem; } .kr-guide__card li { margin:.3rem 0; font-size:.92rem; } .kr-guide__card--cool { background:#eef7fb; border-color:#cbe4ef; } .kr-guide__card--warm { background:var(--amber-soft); border-color:#f0dcb6; } .kr-guide__list { margin:.3rem 0; padding-left:1.2rem; } .kr-guide__list li { margin:.3rem 0; } .kr-guide__steps { margin:.3rem 0; padding-left:1.3rem; } .kr-guide__steps li { margin:.5rem 0; } .kr-guide__tablewrap { overflow-x:auto; } .kr-guide__table { width:100%; border-collapse:collapse; font-size:.9rem; } .kr-guide__table th, .kr-guide__table td { text-align:left; padding:.55rem .7rem; border-bottom:1px solid var(--line); } .kr-guide__table thead th { border-bottom:2px solid var(--line); font-family:var(--display); } .kr-guide__row-hot { background:var(--amber-soft); } .kr-guide__row-hot td:first-child { font-weight:700; } .kr-guide__cols { display:grid; grid-template-columns:1fr 1fr; gap:1rem; } .kr-guide__bad { background:#fbeeee; border:1px solid #eecccc; border-radius:var(--radius); padding:.6rem 1rem; } .kr-guide__bad strong { display:block; margin:.3rem 0; color:var(--danger); } .kr-guide__bad ul { margin:.2rem 0; padding-left:1.1rem; } .kr-guide__bad li { margin:.25rem 0; font-size:.9rem; } .kr-guide__q { border:1px solid var(--line); border-radius:8px; padding:.6rem .9rem; margin:.5rem 0; } .kr-guide__q summary { cursor:pointer; font-weight:600; } .kr-guide__q p { margin:.6rem 0 0; color:var(--ink-soft); } .kr-tools-stack { display:flex; flex-direction:column; gap:1.2rem; } @media (max-width:640px) { .kr-guide__cards, .kr-guide__cols { grid-template-columns:1fr; } } /* ---- Catalog / pricing breakdown (review pages) ---- */ .kr-catalog__stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:.7rem; margin:.4rem 0 1rem; } .kr-catalog__stats > div { background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:.6rem .7rem; text-align:center; } .kr-catalog__stats strong { display:block; font-family:var(--display); font-size:1.5rem; color:var(--teal-deep); } .kr-catalog__stats span { font-size:.76rem; color:var(--ink-soft); } .kr-catalog__group { margin:.8rem 0; } .kr-catalog__group h3 { margin:0 0 .4rem; font-size:.82rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); } .kr-catalog__chips { display:flex; flex-wrap:wrap; gap:.4rem; } .kr-catalog__foot { margin:.6rem 0 0; font-size:.82rem; } /* ---- Comparison table (review pages) — keep cells compact ---- */ .kr-section--comparison_table table { width:100%; border-collapse:collapse; font-size:.9rem; } .kr-section--comparison_table th, .kr-section--comparison_table td { text-align:left; padding:.5rem .7rem; border-bottom:1px solid var(--line); vertical-align:top; } .kr-section--comparison_table thead th { border-bottom:2px solid var(--line); font-family:var(--display); } .kr-section--comparison_table tbody th, .kr-section--comparison_table td:first-child { color:var(--ink-soft); font-weight:600; } .kr-section--comparison_table tr:first-child td, .kr-section--comparison_table col:first-child { background:var(--mist); } /* ---- Reddit sentiment badge (Trust Profile) ---- */ .kr-sent { display:inline-block; padding:.12rem .55rem; border-radius:999px; font-weight:600; font-size:.85rem; border:1px solid; } .kr-sent--good { color:var(--verify); background:#f1f9f4; border-color:#bfe4cd; } .kr-sent--warn { color:var(--amber); background:var(--amber-soft); border-color:#f0dcb6; } .kr-sent--bad { color:var(--danger); background:#fbeeee; border-color:#eecccc; } /* ---- Decision Snapshot & Trust Profile: card + icon tiles (reference-style) ---- */ .kr-snapcard, .kr-trustcard { border:1px solid var(--line); border-radius:16px; background:linear-gradient(135deg, rgba(14,124,123,.06), #ffffff 62%); padding:1.5rem 1.6rem; margin:1.4rem 0; } .kr-snapcard__head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1.15rem; } .kr-snapcard__eyebrow { margin:0 0 .15rem; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--teal); } .kr-snapcard__title { margin:0; font-family:var(--display); font-size:1.55rem; line-height:1.12; color:var(--ink); } .kr-snapcard__score { flex:0 0 auto; display:inline-flex; align-items:center; gap:.35rem; background:#fff; border:1px solid var(--line); border-radius:999px; padding:.4rem .85rem; white-space:nowrap; } .kr-snapcard__score b { font-size:1.1rem; font-weight:700; color:var(--ink); } .kr-snapcard__score small { color:var(--ink-soft); font-weight:500; font-size:.8rem; } .kr-snapcard__bottom { margin:0 0 1.1rem; font-size:1rem; line-height:1.5; color:var(--ink); } .kr-snapcard__grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1.05rem 1.5rem; } @media (max-width:560px){ .kr-snapcard__grid { grid-template-columns:1fr; } } .kr-tile { display:flex; align-items:flex-start; gap:.7rem; } .kr-tile__ico { flex:0 0 auto; width:34px; height:34px; border-radius:9px; margin-top:1px; display:inline-flex; align-items:center; justify-content:center; background:#e6f4f3; color:var(--teal-deep); } .kr-tile__body { display:flex; flex-direction:column; min-width:0; } .kr-tile__label { font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-soft); margin-bottom:.12rem; } .kr-tile__val { font-size:.95rem; line-height:1.35; color:var(--ink); word-wrap:break-word; } .kr-tile__val a { color:var(--teal-deep); text-decoration:none; } .kr-tile__val a:hover { text-decoration:underline; } .kr-snapcard__chips { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.15rem; } .kr-snapcard__foot { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1.25rem; padding-top:.9rem; border-top:1px solid var(--line); } .kr-snapcard__jump { font-size:.92rem; font-weight:600; color:var(--teal-deep); text-decoration:none; } .kr-snapcard__jump:hover { text-decoration:underline; } .kr-snapcard__verified { font-size:.78rem; color:var(--ink-soft); } .kr-trustcard .kr-fresh { margin:.1rem 0 1.1rem; } .kr-trustcard .kr-trust__pillars { margin:0 0 1.25rem; } .kr-trustcard .kr-trust__unverified { margin-top:1.15rem; } /* ---- v2 divergent styling: flat card, segmented meter, accent-bar tiles, bar-rows ---- */ .kr-snapcard, .kr-trustcard { background:#fff; border:1px solid var(--line); border-top:3px solid var(--teal); border-radius:14px; padding:1.4rem 1.5rem; margin:1.4rem 0; } .kr-snapcard__head { align-items:center; } .kr-snapcard__scorewrap { flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:.3rem; } .kr-snapcard__scorelbl { font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); } /* Segmented meter */ .kr-meter { display:inline-flex; align-items:center; gap:.55rem; } .kr-meter__segs { display:inline-flex; gap:3px; } .kr-meter__seg { width:15px; height:8px; border-radius:2px; background:var(--line); } .kr-meter__seg.is-on { background:var(--teal); } .kr-meter__num { font-family:var(--display); font-weight:700; font-size:1.05rem; color:var(--ink); } .kr-meter__num small { color:var(--ink-soft); font-weight:500; font-size:.76rem; margin-left:1px; } /* Snapshot: accent-bar tile rows */ .kr-snapcard__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; } @media (max-width:560px){ .kr-snapcard__grid { grid-template-columns:1fr; } } .kr-tile { display:flex; align-items:flex-start; gap:.6rem; background:var(--mist); border-left:3px solid var(--teal); border-radius:8px; padding:.7rem .8rem; } .kr-tile__ico { flex:0 0 auto; width:30px; height:30px; border-radius:8px; margin-top:0; display:inline-flex; align-items:center; justify-content:center; background:#fff; color:var(--teal-deep); border:1px solid var(--line); } .kr-tile__label { font-size:.7rem; } .kr-tile__val { font-size:.95rem; } /* Trust: stacked bar-rows */ .kr-trust__rows { display:flex; flex-direction:column; } .kr-trow { position:relative; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.65rem .2rem .65rem .9rem; border-bottom:1px solid var(--line); } .kr-trow:last-child { border-bottom:0; } .kr-trow::before { content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:3px; height:56%; border-radius:2px; background:var(--teal); opacity:.55; } .kr-trow__label { display:inline-flex; align-items:center; gap:.5rem; font-size:.85rem; color:var(--ink-soft); } .kr-trow__label svg { flex:0 0 auto; color:var(--teal-deep); } .kr-trow__val { font-size:.95rem; color:var(--ink); text-align:right; } .kr-trow__val a { color:var(--teal-deep); text-decoration:none; } .kr-trow__val a:hover { text-decoration:underline; } /* Eyebrow is now an

; store name is a non-heading span. Keep the visual look. */ h3.kr-snapcard__eyebrow { margin:0 0 .15rem; font-family:var(--body); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--teal); line-height:1.2; } .kr-snapcard__title { display:block; } /* ---- Archive freshness blurb ---- */ .kr-activity { margin:.2rem 0 1.1rem; font-size:.95rem; line-height:1.5; color:var(--ink); background:var(--mist); border-left:3px solid var(--teal); border-radius:8px; padding:.7rem .9rem; } /* ============================================================ Interactive reader sections (v1.3): momentum line, savings calculator, feedback popup, comparison pick bar, compound interest ============================================================ */ /* ---- Coupon momentum + extra trust stats ---- */ .kr-coupon__momentum { margin:.1rem 0 .5rem; font-size:.9rem; font-weight:600; color:var(--teal-deep); } .kr-coupon__momentum strong { color:var(--teal-deep); } .kr-coupon__stats .kr-rate small, .kr-coupon__stats .kr-savg small, .kr-coupon__stats .kr-reord small { color:var(--ink-soft); font-weight:400; } .kr-coupon__stats .kr-savg strong { color:var(--verify); } /* ---- Feedback popup ---- */ .kr-fbpop { position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center; background:rgba(16,34,46,.55); padding:1rem; } .kr-fbpop:not([hidden]) { display:flex; } body.kr-fbpop-open { overflow:hidden; } .kr-fbpop__card { position:relative; background:#fff; border-radius:var(--radius); max-width:400px; width:100%; padding:1.4rem 1.4rem 1.5rem; box-shadow:0 18px 50px rgba(16,34,46,.28); animation:pdFbIn .18s ease-out; } @keyframes pdFbIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } } .kr-fbpop__x { position:absolute; top:.5rem; right:.6rem; border:0; background:none; font-size:1.6rem; line-height:1; color:var(--ink-soft); cursor:pointer; padding:.2rem .4rem; } .kr-fbpop__x:hover { color:var(--ink); } .kr-fbpop__q { font-family:var(--display); font-weight:700; font-size:1.15rem; margin:.2rem 0 1rem; color:var(--ink); } .kr-fbpop__btns { display:flex; gap:.6rem; flex-wrap:wrap; } .kr-fbpop__btns--reorder { margin:.3rem 0 1rem; } .kr-fbpop__field { display:block; font-size:.9rem; font-weight:600; color:var(--ink-soft); margin:.2rem 0 1rem; } .kr-fbpop__money { display:flex; align-items:center; gap:.35rem; margin-top:.35rem; } .kr-fbpop__money > span { font-weight:700; color:var(--ink); } .kr-fbpop__money input { flex:1; font:inherit; padding:.5rem .6rem; border:1px solid var(--line); border-radius:8px; } .kr-fbpop__field-label { font-size:.9rem; font-weight:600; color:var(--ink-soft); margin:0 0 .4rem; } /* Pressed state for the Yes/No toggle — clearly filled, with a check, higher specificity so it always wins. */ .kr-fbpop .kr-btn.is-toggle { position:relative; transition:background .12s, color .12s, border-color .12s; } .kr-fbpop .kr-btn.is-toggle.is-on { background:var(--teal); color:#fff; border-color:var(--teal); box-shadow:0 0 0 3px rgba(14,124,123,.18); } .kr-fbpop .kr-btn.is-toggle.is-on::before { content:"✓ "; font-weight:700; } .kr-fbpop__submit { width:100%; margin-top:.2rem; } .kr-fbpop__submit[disabled] { opacity:.5; cursor:not-allowed; } .kr-fbpop__thanks { font-weight:600; color:var(--verify); text-align:center; margin:.4rem 0; } .kr-btn--ghost { background:#fff; color:var(--teal); border:1px solid var(--line); } .kr-btn--ghost:hover { border-color:var(--teal); } /* ---- Comparison: readers pick A vs B ---- */ .kr-pickbar__bar { display:flex; height:34px; border-radius:8px; overflow:hidden; border:1px solid var(--line); margin:.6rem 0 .5rem; } .kr-pickbar__a, .kr-pickbar__b { display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:.85rem; min-width:2.2rem; transition:width .4s ease; } .kr-pickbar__a { background:var(--teal); } .kr-pickbar__b { background:var(--amber); } .kr-pickbar__legend { display:flex; gap:1.2rem; font-size:.88rem; color:var(--ink-soft); } .kr-pickbar__legend .kr-dot { display:inline-block; width:.7rem; height:.7rem; border-radius:50%; margin-right:.35rem; vertical-align:middle; } .kr-dot--a { background:var(--teal); } .kr-dot--b { background:var(--amber); } /* ---- Compound: reader interest ---- */ .kr-interest__list { display:flex; flex-direction:column; gap:.4rem; margin-top:.6rem; } .kr-interest__item { display:flex; justify-content:space-between; align-items:center; gap:1rem; border:1px solid var(--line); border-radius:8px; padding:.55rem .8rem; text-decoration:none; color:var(--ink); } .kr-interest__item:hover { border-color:var(--teal); } .kr-interest__item strong { color:var(--teal); font-family:var(--display); } /* ---- Most-popular badge + trend (v1.4) ---- */ .kr-label--popular { background:var(--teal); color:#fff; border-color:var(--teal); } .kr-coupon--popular { box-shadow:0 0 0 2px var(--teal) inset; } .kr-trend { font-size:.82rem; font-weight:600; margin-left:.3rem; white-space:nowrap; } .kr-trend--up { color:var(--verify); } .kr-trend--down { color:var(--ink-soft); } /* ---- Reader-data block at the bottom of each coupon card (v1.5) ---- */ .kr-coupon__reader { margin-top:.9rem; padding-top:.75rem; border-top:1px dashed var(--line); } .kr-coupon__reader-label { display:block; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:.4rem; } .kr-coupon__reader-items { display:flex; flex-wrap:wrap; gap:.5rem .9rem; align-items:center; } .kr-rdr { font-size:.88rem; color:var(--ink); display:inline-flex; align-items:center; gap:.25rem; } .kr-rdr small { color:var(--ink-soft); font-weight:400; } .kr-rdr strong { color:var(--ink); } .kr-rdr--week strong { color:var(--teal-deep); } .kr-rdr.kr-savg strong { color:var(--verify); } .kr-rdr.kr-reord strong { color:var(--teal); } /* ============================================================ Review buyer-feedback module (v1.8) ============================================================ */ .kr-rvw-trustline { font-size:.95rem; color:var(--ink); margin:.4rem 0 0; } .kr-rvw-trustline strong { color:var(--teal-deep); } .kr-rvwfb__q { font-family:var(--display); font-weight:700; font-size:1.05rem; margin:.4rem 0 .7rem; color:var(--ink); } .kr-rvwfb__btns { display:flex; flex-wrap:wrap; gap:.5rem; } .kr-rvwfb__btns--sm .kr-btn { padding:.35rem .8rem; } .kr-rvwfb [data-rf="ordered"].is-sel { background:var(--teal); color:#fff; border-color:var(--teal); } .kr-rvwfb__rate { display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; margin:.7rem 0; padding-bottom:.7rem; border-bottom:1px dashed var(--line); } .kr-rvwfb__lbl { font-weight:600; color:var(--ink-soft); font-size:.92rem; min-width:9rem; } .kr-rvwfb__stars .kr-star { font-size:1.5rem; line-height:1; background:none; border:0; cursor:pointer; color:var(--line); padding:0 .05rem; transition:color .1s; } .kr-rvwfb__stars .kr-star.is-on { color:var(--amber); } .kr-rvwfb .kr-btn.is-toggle.is-on { background:var(--teal); color:#fff; border-color:var(--teal); } .kr-rvwfb__buy { margin:.8rem 0; } .kr-rvwfb__chips { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.5rem; } .kr-chip { font:inherit; font-size:.85rem; padding:.35rem .75rem; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--ink); cursor:pointer; transition:all .1s; } .kr-chip:hover { border-color:var(--teal); } .kr-chip.is-on { background:var(--teal); color:#fff; border-color:var(--teal); } .kr-chip--static { cursor:default; background:var(--mist); border-color:var(--line); } .kr-chip--static:hover { border-color:var(--line); } .kr-rvwfb__submit { margin-top:1rem; } .kr-rvwfb__thanks { font-weight:600; color:var(--verify); margin:.6rem 0; } .kr-rvwfb__data { margin-top:1.3rem; padding-top:1rem; border-top:2px solid var(--line); } .kr-rvwfb__data h3 { margin:0 0 .7rem; font-size:1rem; } .kr-rvwfb__stats { display:flex; flex-wrap:wrap; gap:1.4rem; } .kr-rvwfb__stat { display:flex; flex-direction:column; } .kr-rvwfb__stat strong { font-family:var(--display); font-size:1.15rem; color:var(--ink); } .kr-rvwfb__bought { margin:1rem 0 0; display:flex; align-items:center; flex-wrap:wrap; gap:.4rem; } .kr-rvw-helpful { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin:1rem 0 0; font-size:.92rem; } .kr-rvw-helpful__q { font-weight:600; color:var(--ink-soft); } .kr-rvw-helpful .kr-mini.is-on { background:var(--teal); color:#fff; border-color:var(--teal); } .kr-rvw-helpful__stat { margin-left:.3rem; } @media (max-width:560px){ .kr-rvwfb__lbl { min-width:100%; } } /* Staff preview note on review reader-data */ .kr-rvwfb__preview { font-size:.82rem; color:var(--amber); background:var(--amber-soft); border-radius:8px; padding:.5rem .7rem; margin:0 0 .8rem; } /* ===================================================================== * RESEARCH COMPOUND PAGE — interactive sections (compound-fields.php) * Distinct editorial look: flat bordered cards, teal/amber tokens, * left-rail timeline, ranked vendor list. Not a clone of any other site. * ===================================================================== */ /* ---- Category chips (header + homepage cards) ---- */ .pdc-chips { display:flex; flex-wrap:wrap; gap:.4rem; margin:0 0 .6rem; } .pdc-chip { display:inline-flex; align-items:center; font-size:.75rem; font-weight:700; letter-spacing:.02em; text-transform:uppercase; text-decoration:none; color:var(--teal-deep); background:#e6f4f3; border:1px solid #bfe0df; border-radius:999px; padding:.22rem .7rem; } .pdc-chips--card { margin:.5rem 0 .6rem; } .kr-compound__summary { font-size:1.08rem; color:var(--ink-soft); line-height:1.55; margin:.4rem 0 .3rem; max-width:60ch; } /* ---- In-page jump nav ---- */ .pdc-jump { display:flex; flex-wrap:wrap; align-items:center; gap:.35rem; margin:0 0 1.4rem; padding:.55rem .7rem; background:#fff; border:1px solid var(--line); border-radius:var(--radius); position:sticky; top:0; z-index:20; } .pdc-jump__label { font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); margin-right:.3rem; } .pdc-jump a { font-size:.85rem; font-weight:600; text-decoration:none; color:var(--ink-soft); padding:.25rem .6rem; border-radius:999px; } .pdc-jump a:hover { background:var(--mist); color:var(--teal-deep); } /* ---- Core benefits grid ---- */ .pdc-benefits__note { margin-top:0; } .pdc-benefits__grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:.8rem; margin-top:1rem; } .pdc-benefit { display:flex; flex-direction:column; gap:.35rem; padding:1rem; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper); transition:border-color .15s, box-shadow .15s; } .pdc-benefit:hover { border-color:#bfe0df; box-shadow:0 2px 10px rgba(14,124,123,.06); } .pdc-benefit__icon { display:inline-flex; width:2.2rem; height:2.2rem; align-items:center; justify-content:center; color:var(--teal-deep); background:#e6f4f3; border-radius:9px; } .pdc-benefit__icon svg { width:1.25rem; height:1.25rem; } .pdc-benefit__title { font-family:var(--display); font-weight:700; color:var(--ink); font-size:1rem; } .pdc-benefit__text { font-size:.9rem; color:var(--ink-soft); line-height:1.5; } /* ---- Research observation timeline (left rail) ---- */ .pdc-timeline__list { list-style:none; margin:1rem 0 0; padding:0; position:relative; } .pdc-timeline__list::before { content:""; position:absolute; left:15px; top:8px; bottom:8px; width:2px; background:linear-gradient(var(--teal), #bfe0df); border-radius:2px; } .pdc-timeline__item { position:relative; display:flex; gap:1rem; padding:0 0 1.2rem 0; } .pdc-timeline__item:last-child { padding-bottom:0; } .pdc-timeline__marker { flex:0 0 auto; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; z-index:1; background:var(--teal); color:#fff; font-family:var(--display); font-weight:800; font-size:.85rem; box-shadow:0 0 0 4px var(--paper); } .pdc-timeline__body { padding-top:.15rem; } .pdc-timeline__phase { font-family:var(--display); font-weight:700; color:var(--teal-deep); font-size:1rem; } .pdc-timeline__physical { margin:.25rem 0 0; color:var(--ink); font-size:.92rem; line-height:1.5; } .pdc-timeline__research { margin:.25rem 0 0; color:var(--ink-soft); font-size:.88rem; line-height:1.5; } .pdc-fineprint { font-size:.82rem; margin-top:1rem; } /* ---- Handling & storage reference ---- */ .pdc-facts__grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:.7rem; margin:1rem 0; } .pdc-fact { padding:.8rem .9rem; border:1px solid var(--line); border-radius:9px; background:var(--paper); } .pdc-fact__label { display:block; font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); } .pdc-fact__value { display:block; margin-top:.25rem; font-family:var(--display); font-weight:700; color:var(--ink); font-size:1.02rem; } .pdc-fact--evidence { border-width:2px; } .pdc-fact--evidence.pdc-fact--preclinical { border-color:#d5e0e2; background:var(--mist); } .pdc-fact--evidence.pdc-fact--early { border-color:#f0dcb6; background:var(--amber-soft); } .pdc-fact--evidence.pdc-fact--moderate { border-color:#bfe0df; background:#e6f4f3; } .pdc-fact--evidence.pdc-fact--approved { border-color:#bfe4cd; background:#f1f9f4; } .pdc-fact--evidence.pdc-fact--unclear { border-color:#eecccc; background:#fbeeee; } .pdc-facts__list { margin:.6rem 0; } .pdc-facts__list > div { display:flex; gap:1rem; padding:.5rem 0; border-bottom:1px solid var(--line); } .pdc-facts__list > div:last-child { border-bottom:0; } .pdc-facts__list dt { flex:0 0 40%; margin:0; font-weight:600; color:var(--ink-soft); } .pdc-facts__list dd { margin:0; color:var(--ink); } .pdc-handling__notes { margin:.9rem 0 0; padding:.7rem .9rem; background:var(--mist); border-radius:8px; font-size:.9rem; } .pdc-handling__notes-label { display:block; font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin-bottom:.2rem; } .pdc-handling__tools { margin-top:1rem; } /* ---- Molecular structure ---- */ .pdc-seq { display:flex; flex-wrap:wrap; gap:.3rem; margin:1rem 0 .8rem; } .pdc-res { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; width:2.1rem; height:2.4rem; border-radius:7px; border:1px solid var(--line); background:#fff; font-family:var(--mono); cursor:default; transition:transform .1s; } .pdc-res:hover { transform:translateY(-2px); } .pdc-res__l { font-weight:800; font-size:.95rem; line-height:1; color:var(--ink); } .pdc-res__n { font-size:.6rem; color:var(--ink-soft); margin-top:.1rem; } .pdc-res--hydrophobic { background:var(--amber-soft); border-color:#f0dcb6; } .pdc-res--polar { background:#eef6fb; border-color:#c9e0ee; } .pdc-res--acidic { background:#fbeeee; border-color:#eecccc; } .pdc-res--basic { background:#f3eefb; border-color:#ddccee; } .pdc-res--special { background:var(--mist); border-color:var(--line); } .pdc-legend { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; } .pdc-legend__item { font-size:.75rem; font-weight:600; padding:.2rem .55rem; border-radius:6px; border:1px solid var(--line); color:var(--ink-soft); } .pdc-props { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.7rem; margin:.4rem 0; } .pdc-prop { padding:.7rem .8rem; border:1px solid var(--line); border-radius:9px; background:var(--paper); } .pdc-prop--wide { grid-column:1 / -1; } .pdc-prop__k { display:block; font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); } .pdc-prop__v { display:block; margin-top:.25rem; font-family:var(--display); font-weight:700; color:var(--ink); } .pdc-prop__seq { font-family:var(--mono); font-weight:600; font-size:.85rem; word-break:break-word; color:var(--teal-deep); } .pdc-prop__sub { display:block; font-size:.68rem; color:var(--ink-soft); margin-top:.1rem; } /* ---- Top vendors (recency list) ---- */ .pdc-vendors__list { list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:.6rem; } .pdc-vendor { display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; padding:.85rem 1rem; border:1px solid var(--line); border-radius:var(--radius); background:#fff; transition:border-color .15s, box-shadow .15s; } .pdc-vendor:hover { border-color:#bfe0df; box-shadow:0 2px 10px rgba(14,124,123,.06); } .pdc-vendor__main { display:flex; align-items:center; gap:.7rem; text-decoration:none; flex:1 1 220px; min-width:0; } .pdc-vendor__logo { flex:0 0 auto; width:2.6rem; height:2.6rem; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--paper); } .pdc-vendor__logo img { width:100%; height:100%; object-fit:contain; } .pdc-vendor__initial { font-family:var(--display); font-weight:800; color:var(--teal-deep); font-size:1.1rem; } .pdc-vendor__info { display:flex; flex-direction:column; min-width:0; } .pdc-vendor__name { font-family:var(--display); font-weight:700; color:var(--ink); font-size:1rem; line-height:1.2; } .pdc-vendor__deal { font-size:.85rem; color:var(--ink-soft); line-height:1.35; margin-top:.15rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:34ch; } .pdc-vendor__cta { display:flex; align-items:center; gap:.7rem; margin-left:auto; } .pdc-vendor__disc { font-family:var(--display); font-weight:800; color:var(--amber); font-size:.95rem; white-space:nowrap; } .kr-btn--sm { padding:.4rem .8rem; font-size:.85rem; } @media (max-width:560px){ .pdc-vendor__main { flex-basis:100%; } .pdc-vendor__cta { margin-left:0; width:100%; justify-content:space-between; } .pdc-vendor__deal { max-width:100%; } } /* ---- Homepage compound card ---- */ .kr-card--compound .pdc-chips--card { justify-content:flex-start; } /* ---- Reconstitution tool note (links to the dedicated calculator) ---- */ .pdc-toolnote__btn { display:inline-flex; align-items:center; margin:.4rem 0 .8rem; } /* ===================== VENDOR CATALOG INSIGHTS ===================== */ .pdv-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .6rem; margin: 1rem 0; } .pdv-stats > div { padding: .7rem .8rem; background: var(--mist, #eaf1f2); border-radius: 10px; text-align: center; } .pdv-stats strong { display: block; font-family: var(--display, sans-serif); font-size: 1.25rem; line-height: 1.2; color: var(--teal-deep, #0a5c5b); } .pdv-stats span { display: block; margin-top: .15rem; font-size: .74rem; line-height: 1.35; color: var(--ink-soft, #3f5866); } .pdv-trend { margin: .2rem 0 1rem; padding: .55rem .8rem; font-size: .9rem; border-left: 3px solid var(--line, #d5e0e2); background: #fafcfc; border-radius: 0 8px 8px 0; } .pdv-trend--down { border-left-color: var(--verify, #1f8a4c); } .pdv-trend--up { border-left-color: var(--warn, #b3541e); } /* The editor's note — visually distinct so a reader can tell a person wrote it. */ .pdv-note { margin: 1rem 0 1.1rem; padding: .85rem 1rem; background: var(--amber-soft, #fdf3e3); border-left: 3px solid var(--amber, #d98e2b); border-radius: 0 8px 8px 0; } .pdv-note p { margin: 0; font-size: .95rem; line-height: 1.6; } .pdv-cats { margin: 0 0 1.2rem; } .pdv-cats h3 { margin: 0 0 .45rem; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft, #3f5866); } .pdv-cats__chips { display: flex; flex-wrap: wrap; gap: .35rem; } .pdv-product__unit { display: block; margin-top: .1rem; font-size: .74rem; color: var(--ink-soft, #3f5866); } .pdv-product__flags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .45rem; } .pdv-flag { display: inline-block; padding: .1rem .45rem; font-size: .68rem; font-weight: 700; letter-spacing: .03em; border-radius: 999px; } .pdv-flag--best { color: #0d5c33; background: #e3f5ea; } .pdv-flag--out { color: #7a4a12; background: #f6ecdc; } /* ===================================================================== REVIEW ENHANCEMENTS v1.25 — known-for chips, baseline grid, red flags, verdict decision, community ledger, computed comparison table. Scoped to their own blocks; nothing here restyles existing components. ===================================================================== */ /* --- Price position line (our most defensible number, now on reviews) --- */ .kr-pricepos{margin:0 0 18px;padding:10px 14px;border-left:3px solid #2f6f4f;background:#f3f8f5; font-size:14px;line-height:1.5;border-radius:0 6px 6px 0} /* --- Known for: position chips, not a prose block --- */ .kr-knownfor__note{margin:0 0 14px;font-size:14px;color:#5a6470} .kr-knownfor__chips{list-style:none;margin:0;padding:0;display:grid;gap:10px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr))} .kr-chip-card{background:#f7f9fb;border:1px solid #e3e8ee;border-radius:8px;padding:12px 14px} .kr-chip-card__label{display:block;font-weight:700;font-size:14px;margin-bottom:4px} .kr-chip-card__detail{display:block;font-size:13px;line-height:1.5;color:#4a545f} /* --- Baseline checks: identical on every review, and that is the point --- */ .kr-baseline__note{margin:0 0 14px;font-size:14px;color:#5a6470} .kr-baseline__grid{list-style:none;margin:0;padding:0;display:grid;gap:8px 18px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))} .kr-baseline__row{display:flex;align-items:flex-start;gap:9px;font-size:14px; padding:7px 0;border-bottom:1px solid #eef1f4} .kr-baseline__mark{flex:0 0 18px;font-weight:700;line-height:1.4} .kr-baseline__row--yes .kr-baseline__mark{color:#2f7d4f} .kr-baseline__row--no .kr-baseline__mark{color:#aab0b8} .kr-baseline__label{flex:1} .kr-baseline__row--no .kr-baseline__label{color:#6b737c} .kr-baseline__val{display:block;font-size:12px;color:#7a828b;margin-top:2px} /* --- Red flags: severity, evidence, and what to do about it --- */ .kr-flags__note{margin:0 0 16px;font-size:14px;color:#5a6470} .kr-flags__list{list-style:none;margin:0;padding:0;counter-reset:pdflag} .kr-flag{position:relative;border:1px solid #e6e2d8;border-left-width:4px;border-radius:8px; padding:14px 16px;margin-bottom:12px;background:#fdfcfa} .kr-flag--high{border-left-color:#c0392b;background:#fdf5f4} .kr-flag--medium{border-left-color:#d68910;background:#fdf9f2} .kr-flag--low{border-left-color:#7f8c8d;background:#fafbfb} .kr-flag__sev{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em; text-transform:uppercase;padding:3px 8px;border-radius:4px;margin-bottom:8px;color:#fff} .kr-flag--high .kr-flag__sev{background:#c0392b} .kr-flag--medium .kr-flag__sev{background:#d68910} .kr-flag--low .kr-flag__sev{background:#7f8c8d} .kr-flag__body{margin:0 0 8px;font-size:15px;line-height:1.55;font-weight:600} .kr-flag__ev,.kr-flag__do{margin:0 0 5px;font-size:13.5px;line-height:1.55;color:#4a545f} .kr-flag__do{color:#1f4d33} .kr-flag__ev strong,.kr-flag__do strong{font-weight:700} /* --- Verdict: a decision, with its conditions attached --- */ .kr-decision{border-top:3px solid #2f6f4f} .kr-decision__line{font-size:17px;line-height:1.55;font-weight:600;margin:0 0 16px} .kr-decision__grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-bottom:14px} .kr-decision__cell{padding:13px 15px;border-radius:8px;border:1px solid #e3e8ee} .kr-decision__cell h3{margin:0 0 6px;font-size:13px;letter-spacing:.05em;text-transform:uppercase} .kr-decision__cell p{margin:0;font-size:14.5px;line-height:1.55} .kr-decision__cell--buy{background:#f3f8f5;border-color:#cfe3d7} .kr-decision__cell--buy h3{color:#2f6f4f} .kr-decision__cell--skip{background:#fbf6f5;border-color:#ecd9d5} .kr-decision__cell--skip h3{color:#a5442f} .kr-decision__vs{margin:0 0 12px;font-size:14.5px;line-height:1.6;padding:11px 14px; background:#f7f9fb;border-radius:6px} .kr-decision__conf{margin:0;font-size:13px;color:#5a6470} .kr-decision__conf--high{color:#2f6f4f} .kr-decision__conf--low{color:#a5442f} /* --- Community ledger: reported, never asserted --- */ .kr-community__note{margin:0 0 14px;font-size:13.5px;color:#5a6470;line-height:1.55} .kr-community__cols{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))} .kr-community__col h3{font-size:14px;margin:0 0 9px} .kr-community__list{list-style:none;margin:0;padding:0} .kr-community__item{padding:9px 0;border-bottom:1px solid #eef1f4;font-size:14px;line-height:1.5} .kr-community__theme{font-weight:650} .kr-community__count{font-size:12px;color:#7a828b;margin-left:6px;white-space:nowrap} .kr-community__gist{display:block;font-size:13px;color:#4a545f;margin-top:3px} .kr-community__check{display:block;font-size:12.5px;color:#1f4d33;margin-top:4px} .kr-community__meta{margin:14px 0 0;font-size:12px;color:#7a828b;line-height:1.5} /* --- What we could not verify --- */ .kr-unknowns__note{margin:0 0 12px;font-size:14px;color:#5a6470;line-height:1.55} .kr-unknowns__list{margin:0;padding-left:20px;font-size:14px;line-height:1.7;color:#4a545f} /* --- Comparison table built from our own priced catalog --- */ .kr-cmp{width:100%;border-collapse:collapse;font-size:14px} .kr-cmp th,.kr-cmp td{padding:9px 11px;border-bottom:1px solid #eef1f4;text-align:left;vertical-align:top} .kr-cmp thead th{font-size:12.5px;letter-spacing:.03em;text-transform:uppercase;color:#5a6470; border-bottom:2px solid #dfe4ea} .kr-cmp th[scope=row]{font-weight:600;color:#3c454f;width:170px} .kr-cmp .kr-cmp__subject{background:#f3f8f5} .kr-cmp thead .kr-cmp__subject{color:#2f6f4f} .kr-cmp__note{margin:11px 0 0;font-size:12.5px;color:#7a828b;line-height:1.55} @media (max-width:640px){ .kr-cmp{display:block;overflow-x:auto;white-space:nowrap} .kr-decision__grid,.kr-baseline__grid,.kr-knownfor__chips{grid-template-columns:1fr} } .kr-community__sources{margin:10px 0 0;font-size:12px;color:#7a828b;line-height:1.55} .kr-community__sources a{color:#5a6470;text-decoration:underline} .kr-community__stamp{display:block;margin-top:8px;font-size:12px;color:#8a919a} /* ===================================================================== WINS & LOSSES v1.27 Own wrapper class (`kr-winlose`) so the theme's legacy `.kr-proscons { grid-template-columns:1fr 1fr }` no longer lands on the section and pushes the heading and note into side-by-side columns. Green tick per win, red cross per trade-off. ===================================================================== */ .kr-winlose { display:block; } .kr-winlose > h2 { margin-bottom:.35rem; } .kr-winlose .kr-proscons__cols{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; align-items:start; margin-top:.9rem; } .kr-winlose .kr-proscons__col{ border:1px solid var(--line); border-radius:var(--radius); padding:.9rem 1.05rem 1rem; height:100%; } .kr-winlose .kr-proscons__col h3{ display:flex; align-items:center; gap:.45rem; margin:0 0 .55rem; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; padding-bottom:.5rem; border-bottom:1px solid rgba(0,0,0,.07); } /* Green = wins */ .kr-winlose .kr-proscons__col--pro{ background:#f2f9f5; border-color:#c6e3d2; } .kr-winlose .kr-proscons__col--pro h3{ color:#1f6b45; } /* Red = trade-offs (was warm orange) */ .kr-winlose .kr-proscons__col--con{ background:#fdf4f3; border-color:#f0cfca; } .kr-winlose .kr-proscons__col--con h3{ color:#a5342a; } /* Per-bullet marks. The lists come from the generator as plain