/* ===== Reading progress bar ===== */
.progress-bar{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--green),var(--green-2));z-index:300}

/* ===== Guide hero ===== */
.guide-hero{background:var(--bg);color:var(--white);padding:150px 0 64px;position:relative;overflow:hidden}
.guide-hero-inner{position:relative;z-index:2;max-width:760px}
.guide-hero h1{margin-top:16px}
.guide-hero-lead{font-size:18px;color:#9eb1a8;max-width:640px;margin:24px 0 0}
.guide-meta{display:flex;gap:20px;flex-wrap:wrap;margin:28px 0 34px;font-size:13px;color:#8fa39a}
.guide-meta span{display:inline-flex;align-items:center;gap:7px}
.guide-hero .hero-cta{margin-top:0}

/* ===== Layout: sticky TOC + content ===== */
.guide-layout{display:grid;grid-template-columns:252px 1fr;gap:60px;padding:64px 0 20px;align-items:start}
.guide-toc{position:sticky;top:100px}
.guide-toc-label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:#8a9a92;font-weight:750;margin-bottom:14px}
.guide-toc ol{list-style:none;display:grid;gap:2px;counter-reset:toc}
.guide-toc a{display:block;padding:9px 12px;border-radius:10px;color:#57665e;text-decoration:none;font-size:13.5px;border-left:2px solid transparent;transition:.2s;line-height:1.3}
.guide-toc a:hover{background:#f1f4f2;color:#102019}
.guide-toc a.active{color:#0d7a53;background:#eafbf3;border-left-color:var(--green-2);font-weight:650}
.guide-content{min-width:0}

/* ===== Section rhythm ===== */
.guide-section{padding:52px 0;border-top:1px solid #e4e9e6}
.guide-section:first-child{border-top:0;padding-top:0}
.guide-section .kicker{margin-bottom:14px;display:inline-flex}
.guide-section h2{font-size:clamp(28px,3.6vw,40px);margin-bottom:20px;max-width:680px}
.guide-section h3{font-size:20px;margin:28px 0 10px}
.guide-section>p{font-size:16.5px;color:#4c5951;margin-bottom:18px;max-width:760px}
.guide-section p{line-height:1.65}
.guide-section ul.plain,.guide-section ol.plain{margin:18px 0;padding-left:0;list-style:none;display:grid;gap:12px;max-width:760px}
.guide-section ul.plain li{padding-left:28px;position:relative;color:#4c5951;font-size:15.5px}
.guide-section ul.plain li:before{content:'✓';position:absolute;left:0;color:#29a570;font-weight:750}
.guide-section ol.plain{counter-reset:steps}
.guide-section ol.plain li{padding-left:32px;position:relative;color:#4c5951;font-size:15.5px}
.guide-section ol.plain li:before{counter-increment:steps;content:counter(steps);position:absolute;left:0;top:-1px;width:20px;height:20px;border-radius:50%;background:#0e211b;color:var(--green);font-size:11px;font-weight:750;display:grid;place-items:center}

/* ===== Callout boxes ===== */
.callout{display:flex;gap:14px;align-items:flex-start;background:#eafbf3;border:1px solid rgba(54,207,142,.25);border-radius:16px;padding:20px 22px;margin:26px 0;max-width:760px}
.callout-icon{font-size:18px;line-height:1.2}
.callout p{margin:0;font-size:14.5px;color:#1f4636}
.callout.warning{background:#fdf5e8;border-color:rgba(214,158,46,.3)}
.callout.warning p{color:#6b4f13}

/* ===== Mini timeline ===== */
.mini-timeline{display:grid;gap:0;margin:30px 0;max-width:760px}
.mini-timeline-item{display:grid;grid-template-columns:40px 1fr;gap:20px;padding-bottom:26px;position:relative}
.mini-timeline-item:not(:last-child):before{content:'';position:absolute;left:19px;top:40px;bottom:0;width:1px;background:#dde5e1}
.mini-timeline-num{width:40px;height:40px;border-radius:50%;background:#0e211b;color:var(--green);display:grid;place-items:center;font-weight:750;font-size:14px;z-index:2}
.mini-timeline-item h4{font-size:16.5px;margin-bottom:5px}
.mini-timeline-item p{font-size:14.5px;color:#5c6b62;margin:0}

/* ===== Industry cards ===== */
.industry-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:16px;margin-top:30px}
.industry-card{background:#fff;border:1px solid #dfe6e2;border-radius:18px;padding:22px;transition:.25s}
.industry-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(17,37,28,.08)}
.industry-icon{width:40px;height:40px;border-radius:12px;background:#e3f7ed;color:#17885d;display:grid;place-items:center;font-size:18px;margin-bottom:14px}
.industry-card h4{font-size:16px;margin-bottom:7px}
.industry-card p{font-size:13.5px;color:#6d7c74;margin:0}

/* ===== Stat grid ===== */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:28px 0}
.stat-card{background:#fff;border:1px solid #dfe6e2;border-radius:16px;padding:22px;text-align:center}
.stat-card strong{display:block;font-size:26px;color:#102019;letter-spacing:-.03em}
.stat-card span{display:block;font-size:12px;color:#718078;margin-top:5px}

/* ===== Advantage cards ===== */
.adv-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:10px}
.adv-card{background:#fff;border:1px solid #dfe6e2;border-radius:16px;padding:20px 22px;display:flex;gap:14px;align-items:flex-start}
.adv-icon{color:#29a570;font-size:16px;margin-top:1px}
.adv-card p{margin:0;font-size:14.5px;color:#3d4a43}

/* ===== Comparison table ===== */
.compare-table-wrap{overflow-x:auto;margin:28px 0;border:1px solid #dfe6e2;border-radius:18px}
table.compare-table{width:100%;border-collapse:collapse;min-width:560px}
table.compare-table th,table.compare-table td{padding:16px 20px;text-align:left;font-size:14px;border-bottom:1px solid #e7ece9}
table.compare-table th{background:#f6f9f7;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#5c6b62}
table.compare-table tr:last-child td{border-bottom:0}
table.compare-table td:first-child{color:#0d1a15;font-weight:650}

/* ===== Checklist grid ===== */
.checklist-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}
.checklist-col{background:#fff;border:1px solid #dfe6e2;border-radius:18px;padding:24px}
.checklist-col h4{font-size:13px;margin-bottom:16px;text-transform:uppercase;letter-spacing:.06em;color:#5c6b62}
.checklist-col ul{list-style:none;display:grid;gap:12px}
.checklist-col li{padding-left:26px;position:relative;font-size:14.5px;color:#3d4a43}
.checklist-col.good li:before{content:'✓';position:absolute;left:0;color:#29a570;font-weight:750}
.checklist-col.bad li:before{content:'✕';position:absolute;left:0;color:#e0625f;font-weight:750}

/* ===== Example call cards ===== */
.examples-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}
.call-example{background:#fff;border:1px solid #dfe6e2;border-radius:20px;padding:22px}
.call-example h4{font-size:12.5px;color:#17885d;text-transform:uppercase;letter-spacing:.05em;margin-bottom:16px}
.call-bubble{padding:11px 14px;border-radius:14px;margin-bottom:8px;font-size:13.5px;max-width:92%;line-height:1.5}
.call-bubble:last-child{margin-bottom:0}
.call-bubble.client{background:#f3f6f4;color:#33403a}
.call-bubble.ai{background:#eafbf3;border:1px solid rgba(54,207,142,.25);color:#173a2b;margin-left:auto}
.call-bubble strong{display:block;font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px;opacity:.65}

/* ===== Takeaway recap ===== */
.takeaway-list{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:28px 0}

/* ===== Responsive ===== */
@media(max-width:980px){
  .guide-layout{grid-template-columns:1fr;gap:0;padding-top:36px}
  .guide-toc{display:none}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .adv-grid,.checklist-grid,.examples-grid,.takeaway-list{grid-template-columns:1fr}
}
@media(max-width:640px){
  .guide-hero{padding:118px 0 44px}
  .guide-hero-lead{font-size:16px}
  .guide-meta{gap:12px;font-size:12px}
  .guide-section{padding:40px 0}
  .stat-grid{grid-template-columns:1fr 1fr;gap:10px}
  .stat-card{padding:16px}
  .stat-card strong{font-size:21px}
}