/* ============================================================
   CALCULATE HUB — GLOBAL CSS
   Silo: Calculate | Cyan #06B6D4 | DM Sans | Dark Theme
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700;9..40,800&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --c:       #06B6D4;
  --c-h:     #0891B2;
  --c-dim:   rgba(6,182,212,0.10);
  --c-dim2:  rgba(6,182,212,0.05);
  --c-brd:   rgba(6,182,212,0.28);
  --c-glow:  rgba(6,182,212,0.18);

  --bg:      #0A0F1C;
  --bg2:     #080D18;
  --card:    #111B2E;
  --card2:   #0D1526;
  --brd:     rgba(55,75,100,0.28);
  --brd2:    rgba(55,75,100,0.18);

  --t1: #FFFFFF;
  --t2: #C8D8E8;
  --t3: #8899AA;
  --t4: #5A7090;

  --font: 'DM Sans', sans-serif;
  --r:  14px;
  --r2: 10px;
  --r3: 8px;
}

body, .ch { font-family: var(--font); background: var(--bg); color: var(--t2); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; }

/* Rank Math Breadcrumb Styling */
.rank-math-breadcrumb {
  max-width: 1000px;
  margin: 0 auto;
  padding: 12px 20px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
}
.rank-math-breadcrumb a {
  color: #5A7090;
  text-decoration: none;
}
.rank-math-breadcrumb a:hover {
  color: #06B6D4;
}
.rank-math-breadcrumb .separator {
  color: #374B64;
  margin: 0 8px;
}
.rank-math-breadcrumb .last {
  color: #8899AA;
}

/* LAYOUT */
.ch-wrap   { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.ch-wrap-m { max-width: 860px;  margin: 0 auto; padding: 0 24px; }
.ch-wrap-s { max-width: 760px;  margin: 0 auto; padding: 0 24px; }
.ch-sec    { padding: 80px 0; }
.ch-sec-sm { padding: 64px 0; }

/* EYEBROW */
.ch-eyebrow { display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:16px; }
.ch-eyebrow::before, .ch-eyebrow::after { content:''; height:1px; width:44px; background:var(--brd); }
.ch-eyebrow span { font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--c); }

/* HEADINGS */
.ch-h1 { font-size:clamp(30px,5.5vw,52px); font-weight:800; color:var(--t1); line-height:1.12; text-align:center; letter-spacing:-0.5px; }
.ch-h2 { font-size:clamp(26px,4vw,38px); font-weight:700; color:var(--t1); line-height:1.2; text-align:center; }
.ch-em { font-style:normal; color:var(--c); }
.ch-lead { font-size:17px; color:var(--t3); text-align:center; max-width:600px; margin:14px auto 0; line-height:1.72; }

/* BADGE (top pill) */
.ch-pill { display:inline-flex; align-items:center; gap:7px; background:var(--c-dim); border:1px solid var(--c-brd); color:var(--c); font-size:11px; font-weight:700; letter-spacing:0.9px; text-transform:uppercase; padding:6px 16px; border-radius:20px; margin-bottom:20px; }

/* STATUS BADGES */
.st { display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; padding:3px 9px; border-radius:5px; }
.st-live { background:rgba(16,185,129,0.12); border:1px solid rgba(16,185,129,0.28); color:#10B981; }
.st-soon { background:rgba(245,158,11,0.10); border:1px solid rgba(245,158,11,0.26); color:#F59E0B; }
.st-new  { background:rgba(6,182,212,0.12);  border:1px solid rgba(6,182,212,0.26);  color:#06B6D4; }

/* BUTTON */
.ch-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--c); color:#000; font-family:var(--font); font-size:15px; font-weight:700; border:none; border-radius:var(--r2); padding:14px 32px; cursor:pointer; text-decoration:none; transition:background .2s, transform .15s, box-shadow .2s; white-space:nowrap; }
.ch-btn:hover { background:var(--c-h); transform:translateY(-1px); box-shadow:0 8px 28px rgba(6,182,212,0.35); }
.ch-btn:active { transform:translateY(0); }

/* STATS STRIP */
.ch-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--brd); border:1px solid var(--brd); border-radius:var(--r); overflow:hidden; margin:44px auto 0; max-width:840px; }
.ch-stat { background:var(--card); padding:22px 16px; text-align:center; }
.ch-stat-v { font-size:28px; font-weight:800; color:var(--c); line-height:1; margin-bottom:5px; }
.ch-stat-l { font-size:12px; color:var(--t4); font-weight:500; }

/* SEARCH */
.ch-search { position:relative; max-width:560px; margin:28px auto 0; }
.ch-search input { width:100%; background:var(--card); border:1px solid var(--brd); border-radius:12px; color:var(--t1); font-family:var(--font); font-size:15px; padding:14px 20px 14px 48px; outline:none; transition:border-color .2s, box-shadow .2s; }
.ch-search input::placeholder { color:var(--t4); }
.ch-search input:focus { border-color:var(--c); box-shadow:0 0 0 3px var(--c-dim); }
.ch-search-ico { position:absolute; left:17px; top:50%; transform:translateY(-50%); color:var(--t4); font-size:16px; pointer-events:none; }

/* TOOLS GRID */
.ch-tools-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:48px; }

/* TOOL CARD */
.ch-tool { background:var(--card); border:1px solid var(--brd); border-radius:var(--r); padding:24px; text-decoration:none; display:flex; flex-direction:column; position:relative; overflow:hidden; transition:transform .22s, box-shadow .22s, border-color .22s; }
.ch-tool::after { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--c),transparent); opacity:0; transition:opacity .25s; }
.ch-tool:hover { transform:translateY(-4px); box-shadow:0 16px 48px rgba(0,0,0,0.5), 0 0 0 1px rgba(6,182,212,0.2); border-color:var(--c-brd); }
.ch-tool:hover::after { opacity:1; }
.ch-tool.live::after { opacity:0.5; }

.ch-tool-top { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:16px; }
.ch-tool-icon { width:50px; height:50px; border-radius:13px; background:var(--c-dim); border:1px solid var(--c-brd); display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
.ch-tool-name { font-size:17px; font-weight:700; color:var(--t1); margin-bottom:8px; line-height:1.3; }
.ch-tool-desc { font-size:14px; color:var(--t3); line-height:1.65; margin-bottom:16px; flex:1; }
.ch-tool-tags { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:18px; }
.ch-tool-tag { font-size:11px; font-weight:600; color:var(--t4); background:var(--bg); border:1px solid var(--brd2); padding:3px 9px; border-radius:5px; }
.ch-tool-cta { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--c); margin-top:auto; transition:gap .2s; }
.ch-tool:hover .ch-tool-cta { gap:10px; }
.ch-tool-cta-dim { font-size:13px; font-weight:600; color:var(--t4); margin-top:auto; }

/* HOW IT WORKS */
.ch-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:52px; position:relative; }
.ch-steps::before { content:''; position:absolute; top:34px; left:17%; right:17%; height:1px; background:linear-gradient(90deg,transparent,var(--c-brd),transparent); }
.ch-step { background:var(--card); border:1px solid var(--brd); border-radius:var(--r); padding:32px 24px 28px; text-align:center; position:relative; z-index:1; transition:border-color .2s, transform .2s; }
.ch-step:hover { border-color:var(--c-brd); transform:translateY(-2px); }
.ch-step-num { width:44px; height:44px; border-radius:50%; background:var(--c-dim); border:2px solid var(--c-brd); color:var(--c); font-size:17px; font-weight:800; display:flex; align-items:center; justify-content:center; margin:0 auto 18px; }
.ch-step-ico { font-size:28px; display:block; margin-bottom:14px; }
.ch-step h4 { font-size:17px; font-weight:700; color:var(--t1); margin-bottom:10px; }
.ch-step p  { font-size:16px; color:var(--t4); line-height:1.65; }

/* FEATURES */
.ch-feats { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:52px; }
.ch-feat { background:var(--card); border:1px solid var(--brd); border-radius:var(--r); padding:28px 24px; transition:border-color .2s, transform .2s; }
.ch-feat:hover { border-color:var(--c-brd); transform:translateY(-2px); }
.ch-feat-ico { font-size:30px; margin-bottom:16px; display:block; }
.ch-feat h4 { font-size:17px; font-weight:700; color:var(--t1); margin-bottom:10px; }
.ch-feat p  { font-size:16px; color:var(--t3); line-height:1.65; }

/* AUDIENCE TAGS */
.ch-aud { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:32px; }
.ch-aud-tag { display:inline-flex; align-items:center; gap:7px; background:var(--card); border:1px solid var(--brd); border-radius:20px; padding:8px 18px; font-size:14px; color:var(--t3); font-weight:500; transition:border-color .2s, color .2s; }
.ch-aud-tag:hover { border-color:var(--c-brd); color:var(--t2); }

/* FAQ */
.ch-faq-list { display:flex; flex-direction:column; gap:10px; margin-top:44px; }
.ch-faq-item { background:var(--card); border:1px solid var(--brd); border-radius:var(--r2); overflow:hidden; transition:border-color .2s; }
.ch-faq-item.open { border-color:var(--c-brd); }
.ch-faq-q { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px 22px; cursor:pointer; user-select:none; }
.ch-faq-qt { font-size:16px; font-weight:600; color:var(--t1); line-height:1.4; }
.ch-faq-ico { width:28px; height:28px; border-radius:50%; background:var(--c-dim); border:1px solid var(--c-brd); color:var(--c); display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:300; line-height:1; flex-shrink:0; transition:transform .28s ease; }
.ch-faq-item.open .ch-faq-ico { transform:rotate(45deg); }
.ch-faq-body { max-height:0; overflow:hidden; transition:max-height .32s ease; padding:0 22px; }
.ch-faq-item.open .ch-faq-body { max-height:400px; padding-bottom:20px; }
.ch-faq-body p { font-size:16px; color:var(--t3); line-height:1.75; margin:0; }

/* OTHER CATS */
.ch-cats { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:40px; }
.ch-cat { background:var(--card); border:1px solid var(--brd); border-radius:var(--r); padding:20px; text-decoration:none; display:flex; align-items:center; gap:14px; transition:transform .2s, border-color .2s; }
.ch-cat:hover { transform:translateY(-2px); }
.ch-cat-ico { width:44px; height:44px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.ch-cat-txt h5 { font-size:14px; font-weight:700; color:var(--t1); margin-bottom:3px; }
.ch-cat-txt span { font-size:12px; color:var(--t4); }

/* CTA BANNER */
.ch-cta-box { background:linear-gradient(135deg,rgba(6,182,212,0.09),rgba(6,182,212,0.03)); border:1px solid var(--c-brd); border-radius:20px; padding:64px 48px; text-align:center; }
.ch-cta-box h2 { font-size:clamp(24px,3.5vw,34px); font-weight:700; color:var(--t1); margin-bottom:12px; }
.ch-cta-box p { font-size:17px; color:var(--t3); max-width:480px; margin:0 auto 32px; }

/* DIVIDER */
.ch-hr { border:none; border-top:1px solid var(--brd); }

/* ANIMATIONS */
@keyframes chup { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }
.ch-anim  { animation:chup .55s ease both; }
.ch-d1    { animation-delay:.08s; }
.ch-d2    { animation-delay:.16s; }
.ch-d3    { animation-delay:.24s; }

/* RESPONSIVE */
@media(max-width:960px){
  .ch-tools-grid{grid-template-columns:repeat(2,1fr);}
  .ch-steps{grid-template-columns:repeat(2,1fr);}
  .ch-steps::before{display:none;}
  .ch-feats{grid-template-columns:repeat(2,1fr);}
  .ch-cats{grid-template-columns:repeat(2,1fr);}
  .ch-stats{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:600px){
  .ch-wrap,.ch-wrap-m,.ch-wrap-s{padding:0 16px;}
  .ch-sec{padding:56px 0;}
  .ch-tools-grid{grid-template-columns:1fr;}
  .ch-steps{grid-template-columns:1fr;}
  .ch-feats{grid-template-columns:1fr;}
  .ch-cats{grid-template-columns:repeat(2,1fr);}
  .ch-cta-box{padding:44px 24px;}
}