/* ==========================================================================
   Ping — IT & MSP Insights by Atera — shared stylesheet
   Design language: friendly "chat & call" visual style (Skype-inspired).
   Speech-bubble cards (rounded, one sharp corner), circular avatar badges,
   blue-to-violet gradients, floating call/chat bubble decorations.
   ========================================================================== */

:root{
  --bg:        #F3F9FF;
  --surface:   #FFFFFF;
  --ink:       #10233D;
  --ink-soft:  #55708C;
  --line:      #DCEBFA;
  --blue:      #00AFF0;
  --blue-dk:   #0A5FB4;
  --violet:    #7B5CFA;
  --navy:      #0D2A4D;
  --mint:      #33D6A6;
  --amber:     #FFB238;
  --coral:     #FF6B81;
  --radius-bubble: 26px 26px 26px 6px;
  --radius-bubble-sm: 16px 16px 16px 5px;
  --radius-pill: 999px;
  --max: 1180px;
  --glow: 0 18px 40px rgba(10,95,180,.16);
  --glow-sm: 0 8px 22px rgba(10,95,180,.14);
  font-size: 17px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Nunito Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:"Baloo 2","Nunito Sans",sans-serif;
  font-weight:700;
  line-height:1.16;
  margin:0 0 .5em;
  letter-spacing:-0.01em;
  color:var(--navy);
}
h1{ font-size:clamp(2.3rem,4.6vw,3.4rem); }
h2{ font-size:clamp(1.6rem,3vw,2.2rem); }
h3{ font-size:1.24rem; }
p{ margin:0 0 1em; color:var(--ink-soft); }
a{ color:inherit; text-decoration:none; }
img,svg{ max-width:100%; display:block; }
ul{ margin:0 0 1em; padding-left:1.2em; color:var(--ink-soft); }
li{ margin-bottom:.45em; }
code{ background:#E7F4FF; padding:2px 6px; border-radius:6px; font-size:.9em; }
.container{ max-width:var(--max); margin:0 auto; padding:0 28px; }
.wrap-narrow{ max-width:760px; margin:0 auto; padding:0 28px; }
:focus-visible{ outline:3px solid var(--blue-dk); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:"Baloo 2",sans-serif; font-weight:600; font-size:.98rem;
  padding:13px 26px; border-radius:var(--radius-pill); border:2px solid transparent;
  cursor:pointer; transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:linear-gradient(120deg,var(--blue),var(--violet)); color:#fff; box-shadow:var(--glow-sm); }
.btn-primary:hover{ box-shadow:var(--glow); }
.btn-ghost{ background:transparent; color:var(--navy); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--blue); }
.btn-light{ background:#fff; color:var(--blue-dk); box-shadow:var(--glow-sm); }
.btn-outline-inv{ background:transparent; color:#fff; border-color:rgba(255,255,255,.5); }
.btn-block{ width:100%; justify-content:center; }
.btn-sm{ padding:9px 18px; font-size:.85rem; }

/* ---------- Header / Nav ---------- */
.site-header{ position:sticky; top:0; z-index:50; background:rgba(243,249,255,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.nav{ display:flex; align-items:center; justify-content:space-between; padding:16px 0; gap:20px; }
.logo{ display:flex; align-items:center; gap:10px; font-family:"Baloo 2",sans-serif; font-weight:700; font-size:1.3rem; letter-spacing:-.01em; color:var(--navy); }
.logo .mark{ width:38px; height:38px; flex:none; }
.logo .brand-x{ color:#fff; background:linear-gradient(120deg,var(--blue),var(--violet)); border-radius:8px; padding:1px 8px; font-size:.8em; }
.nav-links{ display:flex; align-items:center; gap:28px; list-style:none; margin:0; padding:0; font-weight:700; font-size:.94rem; }
.nav-links a{ padding:6px 2px; border-bottom:2px solid transparent; color:var(--ink-soft); }
.nav-links a:hover, .nav-links a.active{ border-bottom-color:var(--blue); color:var(--navy); }
.nav-actions{ display:flex; align-items:center; gap:12px; }
.nav-toggle{ display:none; background:none; border:2px solid var(--line); border-radius:10px; padding:8px 10px; cursor:pointer; }
.nav-toggle span{ display:block; width:20px; height:2px; background:var(--navy); margin:4px 0; }

@media (max-width: 900px){
  .nav-links{
    position:absolute; top:100%; left:0; right:0; background:var(--bg);
    flex-direction:column; align-items:flex-start; gap:0; border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden; transition:max-height .25s ease; padding:0 28px;
  }
  .nav-links.open{ max-height:460px; padding:10px 28px 20px; }
  .nav-links li{ width:100%; padding:10px 0; border-bottom:1px solid var(--line); }
  .nav-toggle{ display:inline-block; }
  .nav-actions .btn-ghost{ display:none; }
}

/* ---------- Hero ---------- */
.hero{ padding:60px 0 40px; position:relative; overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }
.eyebrow-tag{
  display:inline-flex; align-items:center; gap:8px; font-family:"Baloo 2",sans-serif; font-weight:700; font-size:.78rem;
  background:#fff; color:var(--blue-dk); border-radius:var(--radius-pill);
  padding:7px 14px 7px 10px; margin-bottom:18px; box-shadow:var(--glow-sm);
}
.eyebrow-tag .dot{ width:9px; height:9px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 4px rgba(51,214,166,.25); }
.tag{ display:inline-block; font-family:"Baloo 2",sans-serif; font-weight:700; font-size:.76rem; background:#E7F4FF; color:var(--blue-dk); border-radius:var(--radius-pill); padding:6px 14px; margin-bottom:16px; }
.tag.violet{ background:#F1ECFF; color:#5B3FD1; }
.tag.amber{ background:#FFF3DE; color:#8A5A00; }
.hero-art{ background:var(--surface); border-radius:var(--radius-bubble); box-shadow:var(--glow); padding:16px; position:relative; }
.lede{ font-size:1.15rem; color:var(--ink-soft); max-width:54ch; }
@media (max-width:860px){ .hero-grid{ grid-template-columns:1fr; } }

/* ---------- Sections ---------- */
section{ padding:56px 0; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:34px; flex-wrap:wrap; }
.section-head p{ margin:6px 0 0; max-width:52ch; }
.band{ background:linear-gradient(135deg, var(--navy), var(--blue-dk) 60%, var(--violet)); color:#EAF3FF; }
.band h2{ color:#fff; }
.band p{ color:#BFDBFA; }
.band-soft{ background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

/* ---------- Blog cards ---------- */
.post-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
@media (max-width:960px){ .post-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .post-grid{ grid-template-columns:1fr;} }
.post-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-bubble);
  overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--glow-sm);
  transition:transform .16s ease, box-shadow .16s ease;
}
.post-card:hover{ transform:translateY(-4px); box-shadow:var(--glow); }
.post-card .thumb{ aspect-ratio:16/10; border-bottom:1px solid var(--line); background:#E7F4FF; }
.post-card .body{ padding:20px 20px 24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.post-card .cat{ font-family:"Baloo 2",sans-serif; font-weight:700; font-size:.72rem; letter-spacing:.02em; color:var(--blue-dk); }
.post-card h3{ margin:0; font-size:1.1rem; }
.post-card .excerpt{ font-size:.92rem; color:var(--ink-soft); flex:1; }
.post-card .meta{ font-size:.8rem; color:var(--ink-soft); border-top:1px solid var(--line); padding-top:10px; }
.post-card.featured{ grid-column:span 2; }
@media (max-width:960px){ .post-card.featured{ grid-column:span 1; } }

/* ---------- Feature list / icons ---------- */
.feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:860px){ .feature-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .feature-grid{ grid-template-columns:1fr;} }
.feature{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-bubble-sm); padding:24px; box-shadow:var(--glow-sm); }
.feature .ico-wrap{ width:52px; height:52px; border-radius:50%; background:#E7F4FF; display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.feature.alt .ico-wrap{ background:#F1ECFF; }
.feature.gold .ico-wrap{ background:#FFF3DE; }
.feature .ico{ width:28px; height:28px; }
.feature h3{ font-size:1.05rem; margin-bottom:6px; }
.feature p{ font-size:.92rem; margin:0; }

/* ---------- Stat strip ---------- */
.stat-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:left; }
@media (max-width:760px){ .stat-strip{ grid-template-columns:repeat(2,1fr);} }
.stat{ border-left:3px solid var(--mint); padding-left:16px; }
.stat .num{ font-family:"Baloo 2",sans-serif; font-weight:700; font-size:2.05rem; display:block; color:#fff; }
.stat .lbl{ font-size:.85rem; color:#BFDBFA; }

/* ---------- Article ---------- */
.article-head{ padding:52px 0 20px; }
.article-meta{ display:flex; gap:14px; align-items:center; font-size:.88rem; color:var(--ink-soft); margin-bottom:18px; flex-wrap:wrap; }
.avatar{ width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:#fff; }
.article-hero-img{ border-radius:var(--radius-bubble); box-shadow:var(--glow); overflow:hidden; margin:26px 0 10px; }
.article-body{ font-size:1.05rem; }
.article-body h2{ margin-top:1.6em; font-size:1.45rem; }
.article-body h3{ margin-top:1.3em; }
.article-body blockquote{
  margin:1.6em 0; padding:18px 22px; background:#fff; border-left:4px solid var(--blue);
  border-radius:0 var(--radius-bubble-sm) var(--radius-bubble-sm) 0; font-style:italic; color:var(--ink); box-shadow:var(--glow-sm);
}
.pullquote{ font-family:"Baloo 2",sans-serif; font-size:1.3rem; font-weight:700; color:var(--blue-dk); margin:1.4em 0; }
.callout{ background:#F1ECFF; border-left:4px solid var(--violet); border-radius:var(--radius-bubble-sm); padding:22px 24px; margin:2em 0; }
.callout h4{ margin-bottom:6px; }
.toc{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-bubble-sm); padding:20px 24px; margin:24px 0; font-size:.94rem; box-shadow:var(--glow-sm); }
.toc-title{ font-family:"Baloo 2",sans-serif; font-weight:700; margin-bottom:8px; }
.toc ol{ margin:0; padding-left:1.2em; }
.share-row{ display:flex; gap:10px; margin:30px 0; }
.share-row a{ border:1px solid var(--line); border-radius:var(--radius-pill); padding:8px 16px; font-size:.85rem; font-weight:700; font-family:"Baloo 2",sans-serif; }
.author-box{ display:flex; gap:16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-bubble); padding:22px; margin:36px 0; align-items:flex-start; box-shadow:var(--glow-sm); }
.author-box .avatar{ width:58px; height:58px; flex:none; }
.related-strip{ padding-top:10px; }

/* ---------- Forms ---------- */
.form-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-bubble); box-shadow:var(--glow); padding:36px; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-family:"Baloo 2",sans-serif; font-weight:700; font-size:.87rem; margin-bottom:6px; }
.field input,.field select,.field textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:14px;
  font-family:inherit; font-size:.98rem; background:#FBFDFF; color:var(--ink);
}
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--blue); outline:none; box-shadow:0 0 0 3px rgba(0,175,240,.15); }
.field-check{ display:flex; align-items:flex-start; gap:10px; font-size:.86rem; color:var(--ink-soft); }
.field-check input{ margin-top:4px; width:auto; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:560px){ .field-row{ grid-template-columns:1fr; } }
.plan-toggle{ display:inline-flex; border:1px solid var(--line); border-radius:var(--radius-pill); padding:4px; margin-bottom:22px; background:#fff; box-shadow:var(--glow-sm); }
.plan-toggle button{ border:none; background:none; font-family:"Baloo 2",sans-serif; font-weight:700; padding:9px 20px; border-radius:var(--radius-pill); cursor:pointer; color:var(--ink); }
.plan-toggle button.active{ background:linear-gradient(120deg,var(--blue),var(--violet)); color:#fff; }
.plan-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:860px){ .plan-grid{ grid-template-columns:1fr; } }
.plan-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-bubble); padding:26px; display:flex; flex-direction:column; box-shadow:var(--glow-sm); }
.plan-card.highlight{ background:linear-gradient(150deg,var(--navy),var(--blue-dk) 70%,var(--violet)); color:#fff; box-shadow:var(--glow); border:none; }
.plan-card.highlight p, .plan-card.highlight li{ color:#CBE2FA; }
.plan-card .price{ font-family:"Baloo 2",sans-serif; font-size:2.15rem; font-weight:700; margin:8px 0 14px; }
.plan-card .price span{ font-size:.9rem; font-weight:500; }

/* ---------- Legal pages ---------- */
.legal-body h2{ margin-top:1.8em; font-size:1.32rem; border-top:1px solid var(--line); padding-top:1em; }
.legal-body h2:first-of-type{ border-top:none; padding-top:0; }
.legal-meta{ color:var(--ink-soft); font-size:.9rem; margin-bottom:2em; }
.cookie-table{ width:100%; border-collapse:collapse; margin:1.2em 0; font-size:.92rem; }
.cookie-table th,.cookie-table td{ border:1px solid var(--line); padding:10px 12px; text-align:left; vertical-align:top; }
.cookie-table th{ background:#E7F4FF; font-family:"Baloo 2",sans-serif; }

/* ---------- Cookie banner ---------- */
.cookie-banner{
  position:fixed; left:20px; right:20px; bottom:20px; z-index:200; max-width:520px; margin:0 auto;
  background:var(--navy); color:#EAF3FF; border-radius:var(--radius-bubble); padding:20px 22px;
  box-shadow:0 22px 44px rgba(0,0,0,.3); display:none; gap:14px; flex-direction:column;
}
.cookie-banner.show{ display:flex; }
.cookie-banner p{ color:#BFDBFA; font-size:.88rem; margin:0; }
.cookie-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--navy); color:#C6DCF5; padding:56px 0 26px; margin-top:60px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; margin-bottom:40px; }
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
.footer-grid h4{ color:#fff; font-size:.9rem; margin-bottom:14px; }
.footer-grid ul{ list-style:none; padding:0; margin:0; font-size:.9rem; }
.footer-grid li{ margin-bottom:9px; }
.footer-grid a:hover{ color:#fff; }
.footer-newsletter form{ display:flex; gap:8px; margin-top:10px; }
.footer-newsletter input{ flex:1; border-radius:var(--radius-pill); border:1px solid rgba(255,255,255,.2); padding:10px 16px; background:rgba(255,255,255,.06); color:#fff; font-size:.88rem; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.14); padding-top:22px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.82rem; color:#7FA0C7; }
.footer-bottom a:hover{ color:#fff; }
.footer-disclaimer{ font-size:.76rem; color:#6A8CB5; max-width:900px; margin-top:14px; }

/* ---------- Misc ---------- */
.breadcrumb{ font-size:.85rem; color:var(--ink-soft); margin-bottom:14px; }
.breadcrumb a:hover{ text-decoration:underline; }
.badge-row{ display:flex; gap:10px; flex-wrap:wrap; margin:18px 0; }
.badge{ border:1px solid var(--line); background:#fff; border-radius:var(--radius-pill); padding:6px 14px; font-size:.78rem; font-weight:700; font-family:"Baloo 2",sans-serif; box-shadow:var(--glow-sm); }
.divider{ height:1px; background:var(--line); border:none; margin:40px 0; }
.center{ text-align:center; }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
@media (max-width:800px){ .two-col{ grid-template-columns:1fr; } }
.skip-link{ position:absolute; left:-999px; top:0; background:var(--blue); color:#fff; padding:10px 16px; z-index:999; }
.skip-link:focus{ left:20px; top:20px; }

/* floating decorative call/chat bubbles */
.float-bubble{ position:absolute; border-radius:50%; opacity:.5; pointer-events:none; }