/* Mint SEO — Case Study (BedShelfie 907:192 + Hidden Garden template 834:28). Shared .csb- styles. */

/* ===== HERO — dark scoreboard ===== */
.csb-hero { background: radial-gradient(80% 90% at 80% 0%, #17423b, #0a1f1c 62%), #0a1f1c; color: #fff; }
.csb-hero__in { max-width: 1312px; margin: 0 auto; padding: 10px 48px clamp(48px, 6vw, 72px); display: grid; grid-template-columns: 1fr 1.06fr; gap: 60px; align-items: center; }
.csb-lede { min-width: 0; }
.csb-lede .eyebrow { font-size: 15px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mint-light); margin: 0 0 10px; }
.csb-lede .brand { font-size: 22px; font-weight: 800; color: #fff; margin: 0 0 14px; }
.csb-lede h1 { margin: 0; font-size: clamp(34px, 4vw, 50px); font-weight: 800; line-height: 1.04; letter-spacing: -0.03em; color: #fff; } .csb-lede h1 em { font-style: normal; color: var(--mint-light); }
.csb-lede .sub { margin: 18px 0 0; font-size: 17px; line-height: 1.55; color: rgba(255,255,255,0.74); max-width: 520px; }
.csb-lede__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.csb-btn { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; padding: 14px 24px; border-radius: 11px; text-decoration: none; transition: transform 0.2s, background 0.2s; }
.csb-btn--mint { background: var(--mint-ink); color: #fff; } .csb-btn--mint:hover { background: #35b0a7; transform: translateY(-2px); }
.csb-btn--ghost { background: rgba(255,255,255,0.06); color: #fff; border: 1px solid rgba(255,255,255,0.22); } .csb-btn--ghost:hover { background: rgba(255,255,255,0.12); }
.csb-btn--dark { background: #0f2e29; color: #fff; } .csb-btn--dark:hover { background: #17423b; transform: translateY(-2px); }
/* scoreboard */
.csb-score { display: grid; gap: 16px; min-width: 0; }
.csb-score__hero { display: flex; align-items: center; gap: 24px; background: rgba(143,214,207,0.06); border: 1px solid rgba(143,214,207,0.2); border-radius: 16px; padding: 26px 30px; }
.csb-score__hero .v { font-size: clamp(44px, 4.6vw, 60px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--mint-light); white-space: nowrap; }
.csb-score__hero .l { font-size: 16px; font-weight: 700; line-height: 1.3; color: #fff; }
.csb-score__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.csb-score__cell { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 24px 26px; }
.csb-score__cell .v { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; color: #fff; line-height: 1; margin-bottom: 12px; }
.csb-score__cell .l { font-size: 15px; line-height: 1.35; color: rgba(255,255,255,0.66); }

/* ===== ARTICLE SECTION (rail + prose) ===== */
.csb-sec { }
.csb-sec--cream { background: #f4f3ef; }
.csb-sec--tint { background: var(--mint-tint); }
.csb-sec--white { background: #fff; }
.csb-sec__in { max-width: 1312px; margin: 0 auto; padding: clamp(56px, 6vw, 88px) 48px; display: grid; grid-template-columns: 304px 1fr; gap: 64px; align-items: start; }
.csb-sec__in--norail { grid-template-columns: minmax(0, 860px); justify-content: center; }
/* left stat rail (sticky) */
.csb-rail { position: sticky; top: 96px; border-left: 2px solid var(--mint); padding-left: 24px; min-width: 0; }
.csb-rail .who { font-size: 15px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--body); }
.csb-rail .phase { font-size: 18px; font-weight: 800; color: var(--ink); margin: 2px 0 18px; }
.csb-rail__stat { padding: 18px 0; border-top: 1px solid rgba(20,20,19,0.1); } .csb-rail__stat:first-of-type { border-top: 0; padding-top: 0; }
.csb-rail__stat .v { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; color: var(--ink); } .csb-rail__stat .v.hl { color: var(--mint-ink); }
.csb-rail__stat .l { margin-top: 8px; font-size: 15px; line-height: 1.4; color: var(--body); }
/* article prose */
.csb-art { min-width: 0; max-width: 840px; }
.csb-art h2 { margin: 0 0 24px; font-size: clamp(30px, 3.4vw, 42px); font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.csb-art h3 { margin: 36px 0 14px; font-size: 24px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
.csb-art p { margin: 0 0 20px; font-size: 17px; line-height: 1.62; color: #33352f; }
.csb-art ul { margin: 0 0 20px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.csb-art ul li { position: relative; padding-left: 26px; font-size: 17px; line-height: 1.5; font-weight: 700; color: var(--ink); }
.csb-art ul li::before { content: ""; position: absolute; left: 0; top: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--mint); }
.csb-art hr { border: 0; border-top: 1px solid var(--border); margin: 28px 0; }
.csb-art .csb-note { font-size: 14px; line-height: 1.62; color: var(--body); }
.csb-figure { margin: 8px 0 24px; }
.csb-figure__img { width: 100%; aspect-ratio: 16 / 11; border-radius: 16px; background: linear-gradient(135deg, #e9ece6, #f4f5f1); border: 1px solid var(--border); display: grid; place-items: center; color: #b9bcb3; font-size: 15px; font-weight: 700; letter-spacing: 0.04em; }
.csb-figure__cap { margin: 12px 0 0; font-size: 15px; color: var(--body); text-align: center; }
.csb-figure__real { width: 100%; height: auto; border-radius: 16px; display: block; border: 1px solid var(--border); background: #fff; }
.csb-figure--product .csb-figure__real { max-width: 460px; margin: 0 auto; aspect-ratio: 1 / 1; object-fit: cover; }
.csb-figure--wide .csb-figure__img { aspect-ratio: 20 / 7; }

/* keyword table */
.csb-table { width: 100%; border-collapse: collapse; margin: 8px 0 28px; font-size: 15px; }
.csb-table thead th { text-align: left; padding: 12px 14px; background: var(--ink); color: #fff; font-weight: 800; font-size: 13px; letter-spacing: 0.03em; }
.csb-table thead th:first-child { border-radius: 8px 0 0 0; } .csb-table thead th:last-child { border-radius: 0 8px 0 0; }
.csb-table tbody td { padding: 11px 14px; border-bottom: 1px solid var(--border); color: var(--ink); }
.csb-table tbody tr:nth-child(even) { background: #fafaf8; }
.csb-table tbody td:first-child { font-weight: 700; }
.csb-table .mv { font-weight: 800; color: var(--mint-deep); } .csb-table .mv.new { color: #b26a00; }
.csb-tablewrap { overflow-x: auto; }
.csb-brtag { display: inline-block; margin-left: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: var(--body); background: #edeeea; border-radius: 5px; padding: 2px 8px; vertical-align: middle; }
.csb-table tbody td:first-child { white-space: normal; }

/* ===== AUTHOR + CLOSING CTA ===== */
.csb-author { background: #fff; }
.csb-author__in { max-width: 900px; margin: 0 auto; padding: clamp(48px, 5vw, 72px) 48px; display: grid; grid-template-columns: 150px 1fr; gap: 40px; align-items: center; }
.csb-author__ph { width: 150px; height: 150px; border-radius: 50%; background: linear-gradient(135deg, #e9ece6, #f4f5f1); border: 1px solid var(--border); overflow: hidden; } .csb-author__ph img { width: 100%; height: 100%; object-fit: cover; }
.csb-author__c .k { font-size: 15px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mint-ink); margin: 0 0 6px; }
.csb-author__c h3 { margin: 0; font-size: 28px; font-weight: 800; color: var(--ink); }
.csb-author__c .divl { width: 56px; height: 4px; background: var(--mint); border-radius: 2px; margin: 16px 0; }
.csb-author__c p { margin: 0 0 18px; font-size: 16px; line-height: 1.6; color: var(--body); }
.csb-author__c a { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; color: var(--mint-ink); text-decoration: none; } .csb-author__c a:hover { text-decoration: underline; }
.csb-close { background: radial-gradient(90% 120% at 50% 0%, #17423b, #0a1f1c 65%); color: #fff; text-align: center; }
.csb-close__in { max-width: 760px; margin: 0 auto; padding: clamp(56px, 6vw, 80px) 48px; }
.csb-close h2 { margin: 0; font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.csb-close p { margin: 16px auto 28px; max-width: 560px; font-size: 17px; line-height: 1.55; color: rgba(255,255,255,0.75); }
.csb-close__ctas { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

@media (max-width: 980px) {
  .csb-hero__in { grid-template-columns: 1fr; gap: 36px; padding: 44px 22px 56px; }
  .csb-sec__in { grid-template-columns: 1fr; gap: 32px; padding: 48px 22px; }
  .csb-rail { position: static; }
  .csb-author__in { grid-template-columns: 1fr; text-align: center; padding: 44px 22px; justify-items: center; } .csb-author__c .divl { margin-left: auto; margin-right: auto; }
}
@media (max-width: 560px) { .csb-score__grid { grid-template-columns: 1fr; } .csb-score__hero { flex-direction: column; align-items: flex-start; gap: 10px; } }

/* ===== Field-driven case-study renderer ([mintseo_case_study]) ===== */
.csx { max-width: 820px; margin: 0 auto; padding: 56px 24px 80px; }
.csx-hero .eyebrow { font-size:16px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mint-ink);margin:0 0 12px; }
.csx-hero h1 { margin:0;font-size:clamp(34px,4.4vw,52px);font-weight:800;line-height:1.05;letter-spacing:-.02em;color:var(--ink); }
.csx-hero__sum { margin:16px 0 0;font-size:19px;line-height:1.55;color:var(--body); }
.csx-hero__stats { display:flex;gap:40px;margin:28px 0 0;padding:24px 0 0;border-top:1px solid var(--border); }
.csx-hero__stat b { display:block;font-size:34px;font-weight:800;letter-spacing:-.02em;color:var(--mint-ink); }
.csx-hero__stat span { font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--body); }
.csx-toc { background:var(--mint-tint);border-radius:14px;padding:18px 24px;margin:36px 0 44px; }
.csx-toc .k { font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--mint-ink); }
.csx-toc ol { margin:10px 0 0;padding-left:20px;columns:2;font-size:16px; }
.csx-toc li { margin:4px 0; }
.csx-toc a { color:var(--ink);text-decoration:none;font-weight:700; } .csx-toc a:hover { color:var(--mint-ink); }
.csx-sec { margin:40px 0; scroll-margin-top:100px; }
.csx-sec h2 { margin:0 0 14px;font-size:clamp(24px,3vw,32px);font-weight:800;letter-spacing:-.01em;color:var(--ink); }
.csx-sec__body { font-size:18px;line-height:1.7;color:var(--body); } .csx-sec__body p { margin:0 0 16px; }
.csx-rail { display:flex;flex-wrap:wrap;gap:18px;margin:22px 0 0; }
.csx-stat { flex:1;min-width:150px;background:#fff;border:1px solid var(--border);border-radius:14px;padding:18px 20px; }
.csx-stat .v { font-size:30px;font-weight:800;letter-spacing:-.02em;color:var(--mint-ink); }
.csx-stat .l { font-size:14px;color:var(--body);margin-top:2px; }
.csx-quote { margin:44px 0;padding:32px 34px;background:var(--mint-tint);border-radius:18px;border:0; }
.csx-quote p { margin:0;font-size:22px;line-height:1.5;font-weight:700;color:var(--ink); }
.csx-quote footer { margin-top:16px;font-size:15px;color:var(--body); } .csx-quote footer b { color:var(--ink); } .csx-quote footer span { margin-left:8px; }
.csx-cta { margin:48px 0 0;padding:40px 36px;background:radial-gradient(90% 140% at 82% -10%,#1c5049,#0a1f1c 60%),#0a1f1c;border-radius:20px;text-align:center; }
.csx-cta h2 { margin:0 0 18px;color:#fff;font-size:28px;font-weight:800; }
@media(max-width:600px){ .csx-toc ol{columns:1;} .csx-hero__stats{gap:24px;flex-wrap:wrap;} }