/* ══════════════════════════════════════════════════════════════════════
   content.css — editorial content cluster (/guides /use-cases /best
   /offshore-hosting /glossary). Built on nokycvps style.css :root tokens.
   ══════════════════════════════════════════════════════════════════════ */

.ct-i{width:1em;height:1em;flex:none}

/* ── breadcrumb ── */
.ct-crumb{border-bottom:1px solid var(--bd2);background:var(--bg);font-size:12.5px}
.ct-crumb .w{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:14px;padding-bottom:14px;color:var(--tx3);font-family:var(--f)}
.ct-crumb a{color:var(--tx2)}
.ct-crumb a:hover{color:var(--ac)}
.ct-crumb-s{color:var(--tx4)}
.ct-crumb [aria-current]{color:var(--tx)}

/* ── hero ── */
.ct-hero{position:relative;background:var(--dk);color:#fff;overflow:hidden}
.ct-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.32;z-index:0}
.ct-hero--img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,27,20,.55),rgba(14,27,20,.88));z-index:1}
.ct-hero-in{position:relative;z-index:2;padding-top:66px;padding-bottom:64px;max-width:880px}
.ct-eb{display:inline-flex;align-items:center;gap:8px;font-family:var(--f);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#34d399;background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.26);border-radius:100px;padding:6px 13px}
.ct-eb .ct-i{width:14px;height:14px}
.ct-h1{font-family:var(--fd);font-weight:800;letter-spacing:-.025em;line-height:1.08;font-size:clamp(30px,5vw,52px);margin:18px 0 0;color:#fff}
.ct-h1 em{font-style:normal;color:#34d399}
.ct-lead{font-size:clamp(16px,2.1vw,19px);line-height:1.65;color:rgba(255,255,255,.82);margin:18px 0 0;max-width:680px}
.ct-hero-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.ct-hero .bt-s{border-color:rgba(255,255,255,.28);color:#fff}
.ct-hero .bt-s:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5)}

/* ── section frame + editorial column ── */
.ct-sec{padding:54px 0}
.ct-sec-a{background:var(--bg2);border-top:1px solid var(--bd2);border-bottom:1px solid var(--bd2)}
.ct-wrap{max-width:760px;margin:0 auto}
.ct-block{max-width:760px;margin:0 auto;padding-top:38px}
.ct-block:first-child{padding-top:46px}
.ct-block h2{font-family:var(--fd);font-weight:800;letter-spacing:-.02em;font-size:clamp(22px,3vw,30px);color:var(--tx);margin:0 0 6px;scroll-margin-top:80px}

/* ── prose ── */
.ct-prose p{color:var(--tx2);font-size:16.5px;line-height:1.78;margin-top:15px}
.ct-prose h3{font-family:var(--fd);font-weight:700;font-size:19px;color:var(--tx);margin:28px 0 0}
.ct-prose strong{color:var(--tx);font-weight:600}
.ct-prose a{color:var(--ac);font-weight:600;text-decoration:none;border-bottom:1px solid var(--ac-bg)}
.ct-prose a:hover{border-bottom-color:var(--ac)}
.ct-prose ul,.ct-prose ol{margin:15px 0 0;padding-left:0;list-style:none;display:grid;gap:10px}
.ct-prose ul li,.ct-prose ol li{position:relative;padding-left:27px;color:var(--tx2);font-size:15.8px;line-height:1.62}
.ct-prose ul li::before{content:"";position:absolute;left:4px;top:9px;width:7px;height:7px;border-radius:2px;background:var(--ac);transform:rotate(45deg)}
.ct-prose ol{counter-reset:cup}
.ct-prose ol li{counter-increment:cup}
.ct-prose ol li::before{content:counter(cup);position:absolute;left:0;top:0;width:19px;height:19px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ac);background:var(--ac-bg);border-radius:6px;display:grid;place-items:center}
.ct-prose code{font-family:'JetBrains Mono',monospace;font-size:.86em;background:var(--bg3);border:1px solid var(--bd);border-radius:6px;padding:1.5px 6px;color:var(--ac2)}
.ct-prose pre{background:#0e1b14;color:#d7e6dd;border-radius:12px;padding:16px 18px;overflow-x:auto;margin:16px 0 0;border:1px solid #1c3326}
.ct-prose pre code{background:none;border:0;padding:0;color:inherit;font-size:13px;line-height:1.65;white-space:pre;display:block}
.ct-prose blockquote{margin:16px 0 0;padding:2px 0 2px 18px;border-left:3px solid var(--ac);color:var(--tx2);font-style:italic}

/* ── key facts card ── */
.ct-facts{max-width:760px;margin:38px auto 0;background:linear-gradient(165deg,#fff 30%,var(--ac-bg));border:1px solid var(--bd);border-radius:16px;box-shadow:0 1px 3px rgba(0,0,0,.04);padding:26px 28px}
.ct-facts-h{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ac2);margin:0 0 16px}
.ct-facts ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ct-facts li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:var(--tx);line-height:1.55}
.ct-facts li .ct-i{width:18px;height:18px;color:var(--gn);margin-top:2px}

/* ── how-to steps ── */
.ct-steps{max-width:760px;margin:8px auto 0;list-style:none;counter-reset:s;padding:0;display:grid;gap:14px}
.ct-steps li{counter-increment:s;display:flex;gap:16px;background:#fff;border:1px solid var(--bd);border-radius:14px;box-shadow:0 1px 3px rgba(0,0,0,.04);padding:20px 22px}
.ct-steps li::before{content:counter(s);flex:none;width:34px;height:34px;border-radius:11px;background:var(--ac);color:#fff;font-family:var(--fd);font-weight:700;font-size:16px;display:grid;place-items:center}
.ct-step-b b{display:block;font-family:var(--fd);font-size:16.5px;color:var(--tx);margin-bottom:2px}
.ct-step-b .ct-prose p:first-child{margin-top:6px}

/* ── comparison table ── */
.ct-table-wrap{max-width:980px;margin:0 auto;overflow-x:auto;border:1px solid var(--bd);border-radius:16px;box-shadow:0 1px 3px rgba(0,0,0,.04);background:#fff}
.ct-table{width:100%;border-collapse:collapse;font-size:14px;min-width:720px}
.ct-table caption{caption-side:top;text-align:left;padding:16px 20px 0;font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--tx3)}
.ct-table thead th{text-align:left;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--tx3);font-weight:500;padding:16px 16px 12px;border-bottom:1px solid var(--bd);white-space:nowrap}
.ct-table tbody td,.ct-table tbody th{padding:15px 16px;border-top:1px solid var(--bd);text-align:left;color:var(--tx2);vertical-align:middle;font-weight:400}
.ct-table tbody th{color:var(--tx);font-family:var(--fd);font-weight:600;font-size:15px}
.ct-table tbody th a{color:inherit}
.ct-table tbody th a:hover{color:var(--ac)}
.ct-table .ct-self{background:linear-gradient(90deg,var(--ac-bg),transparent)}
.ct-table .ct-self th{color:var(--ac2)}
.ct-badge{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:var(--ac);border-radius:100px;padding:2px 8px;margin-left:6px;vertical-align:middle}
.ct-tag{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:11.5px;padding:3px 9px;border-radius:100px;white-space:nowrap}
.ct-tag.ct-yes{color:#0a7a4a;background:rgba(10,138,74,.1);border:1px solid rgba(10,138,74,.28)}
.ct-tag.ct-no{color:#c0392b;background:#fdeeee;border:1px solid #f3c9c9}
.ct-tag.ct-mid{color:#9a6a00;background:#fff6e5;border:1px solid #ffe0a6}

/* ── hub card grid ── */
.ct-hub{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ct-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--bd);border-radius:16px;box-shadow:0 1px 3px rgba(0,0,0,.04);padding:24px 22px;transition:.2s ease}
.ct-card:hover{box-shadow:0 14px 34px -16px rgba(14,107,74,.28);transform:translateY(-4px);border-color:var(--ac-bg)}
.ct-card-hd{display:flex;align-items:center;gap:13px;margin-bottom:11px}
.ct-card-ic{width:40px;height:40px;flex:none;border-radius:11px;display:grid;place-items:center;background:var(--ac-bg);color:var(--ac2);transition:.2s ease}
.ct-card:hover .ct-card-ic{background:var(--ac);color:#fff}
.ct-card-ic .ct-i{width:20px;height:20px}
.ct-card h3{font-family:var(--fd);font-weight:700;font-size:16px;line-height:1.3;margin:0;color:var(--tx)}
.ct-card p{font-size:14px;color:var(--tx2);margin:0;line-height:1.55;flex:1}
.ct-card-go{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-size:12.5px;font-weight:600;color:var(--ac)}
.ct-card-go svg{width:15px;height:15px;transition:transform .2s ease}
.ct-card:hover .ct-card-go svg{transform:translateX(4px)}

/* ── glossary ── */
.ct-gloss{display:grid;gap:14px}
.ct-term{background:#fff;border:1px solid var(--bd);border-radius:14px;box-shadow:0 1px 3px rgba(0,0,0,.04);padding:20px 22px}
.ct-term dt{font-family:var(--fd);font-weight:700;font-size:17px;color:var(--tx)}
.ct-term dd{margin:8px 0 0;color:var(--tx2);font-size:14.8px;line-height:1.62}
.ct-term dd a{color:var(--ac);font-weight:600}

/* ── faq ── */
.ct-faq-hd{text-align:center;max-width:640px;margin:0 auto 32px}
.ct-faq-hd .ov{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ac)}
.ct-faq-hd h2{font-family:var(--fd);font-weight:800;letter-spacing:-.02em;font-size:clamp(23px,3.4vw,32px);margin:8px 0 0;color:var(--tx)}
.ct-faq{display:grid;gap:10px}
.ct-fq{background:#fff;border:1px solid var(--bd);border-radius:13px;overflow:hidden}
.ct-fq summary{display:flex;align-items:center;gap:14px;justify-content:space-between;padding:18px 20px;cursor:pointer;font-family:var(--fd);font-weight:600;font-size:16px;color:var(--tx);list-style:none}
.ct-fq summary::-webkit-details-marker{display:none}
.ct-fq-i{position:relative;flex:none;width:15px;height:15px}
.ct-fq-i::before,.ct-fq-i::after{content:"";position:absolute;background:var(--ac);border-radius:2px;transition:.2s ease}
.ct-fq-i::before{top:6px;left:0;width:15px;height:2.4px}
.ct-fq-i::after{top:0;left:6px;width:2.4px;height:15px}
.ct-fq[open] .ct-fq-i::after{transform:rotate(90deg);opacity:0}
.ct-fq-a{padding:0 20px 20px}
.ct-fq-a p:first-child{margin-top:0}

/* ── related ── */
.ct-rel{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ct-rel-card{background:#fff;border:1px solid var(--bd);border-radius:14px;padding:20px;transition:.2s ease}
.ct-rel-card:hover{border-color:var(--ac-bg);box-shadow:0 10px 26px -14px rgba(14,107,74,.24);transform:translateY(-3px)}
.ct-rel-card h3{font-family:var(--fd);font-weight:700;font-size:16px;margin:0;color:var(--tx)}
.ct-rel-card p{font-size:13.5px;color:var(--tx2);margin:7px 0 0;line-height:1.5}

/* ── bookend CTA ── */
.ct-cta{background:var(--dk);color:#fff;text-align:center;padding:64px 0}
.ct-cta h2{font-family:var(--fd);font-weight:800;letter-spacing:-.02em;font-size:clamp(26px,4vw,40px);margin:0;color:#fff}
.ct-cta p{color:rgba(255,255,255,.78);font-size:17px;margin:14px auto 0;max-width:560px}
.ct-cta-acts{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:28px}
.ct-cta .bt-s{border-color:rgba(255,255,255,.28);color:#fff}
.ct-cta .bt-s:hover{background:rgba(255,255,255,.08)}

/* ── reveal: subtle CSS-only entrance; always visible (no JS dependency, crawler-safe) ── */
@media (prefers-reduced-motion: no-preference){
  .reveal{animation:ct-rise .6s ease both}
  @keyframes ct-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
}

/* ── responsive ── */
@media (max-width:1000px){.ct-hub,.ct-rel{grid-template-columns:1fr 1fr}}
@media (max-width:680px){
  .ct-hub,.ct-rel{grid-template-columns:1fr}
  .ct-table{min-width:0;display:block}
  .ct-table thead{display:none}
  .ct-table tbody,.ct-table tbody tr{display:block}
  .ct-table tbody tr{padding:6px 0;border-top:1px solid var(--bd)}
  .ct-table tbody th,.ct-table tbody td{display:flex;justify-content:space-between;gap:14px;border:0;padding:7px 16px;text-align:right}
  .ct-table tbody th{font-size:16px;padding-top:14px}
  .ct-table tbody td::before{content:attr(data-l);font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--tx3);text-align:left}
}