/* ==========================================================================
   JUMI Ad Animator — shared styles for content pages
   (About, Contact, Guides, Blog, FAQ, Legal). Dark theme, matching the
   landing and the editor. Structure mirrors PatternMaker's content.css so
   both products share one content design system.
   ========================================================================== */
:root{
  --bg:#0b0f14; --card:#11161d; --cardalt:#161c25;
  --ink:#e6edf3; --sec:#aeb8c4; --muted:#7d8b99;
  --border:#1a212b; --border2:#232c38; --acc:#3db3cb; --acc-h:#5fc4d6; --acc-ink:#04232b;
  --disp:'Nunito',system-ui,-apple-system,sans-serif; --body:'Nunito',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}

/* header (matches the landing) */
.hdr{position:sticky;top:0;z-index:50;background:rgba(11,15,20,0.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.hdr-in{max-width:1120px;margin:0 auto;padding:0 24px;height:68px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand img{height:22px;width:auto}
.brand .suffix{font-family:var(--disp);font-weight:700;font-size:16px;color:var(--ink)}
.nav{display:flex;align-items:center;gap:26px;font-size:15px;font-weight:600}
.nav a{color:var(--sec);text-decoration:none;transition:color .15s ease}
.nav a:hover{color:var(--ink)}
.nav .cta{display:inline-flex;align-items:center;height:40px;padding:0 20px;background:var(--acc);color:var(--acc-ink);border-radius:999px;font-weight:800}
.nav .cta:hover{background:var(--acc-h);color:var(--acc-ink)}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px;margin-right:-6px;color:var(--ink);border-radius:8px;line-height:0}
.nav-toggle:hover{background:var(--cardalt)}

/* article */
.page{max-width:820px;margin:0 auto;padding:56px 24px 68px}
.page h1{font-family:var(--disp);font-weight:900;font-size:42px;line-height:1.14;letter-spacing:-.5px;color:var(--ink);margin:0 0 10px}
.page .sub{color:var(--muted);font-size:18px;margin:0 0 26px}
.page .lead{font-size:19px;color:var(--ink);line-height:1.6;margin-bottom:22px}
.page h2{font-family:var(--disp);font-weight:800;font-size:24px;color:var(--ink);letter-spacing:-.2px;margin:38px 0 12px}
.page h3{font-family:var(--disp);font-weight:800;font-size:18px;color:var(--ink);margin:26px 0 8px}
.page p{color:var(--sec);font-size:16.5px;line-height:1.7;margin:0 0 15px}
.page p strong{color:var(--ink)}
.page a{color:var(--acc);font-weight:700;text-decoration:none}
.page a:hover{text-decoration:underline;color:var(--acc-h)}
.page ul,.page ol{margin:0 0 15px;padding:0 0 0 2px;list-style:none}
.page li{position:relative;color:var(--sec);font-size:16.5px;line-height:1.6;padding:0 0 10px 22px}
.page li::before{content:"";position:absolute;left:2px;top:11px;width:7px;height:7px;border-radius:50%;background:var(--acc)}
.page ol{counter-reset:step}
.page ol li{counter-increment:step}
.page ol li::before{content:counter(step);top:0;left:0;width:20px;height:20px;background:var(--acc);color:var(--acc-ink);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;border-radius:50%}
.page ol li{padding-left:30px}
.page li strong{color:var(--ink)}

/* callout */
.note{background:var(--card);border:1px solid var(--border2);border-radius:14px;padding:18px 20px;color:var(--sec);font-size:15.5px;line-height:1.6;margin:22px 0}
.note strong{color:var(--ink)}

/* primary button — .page selector needed so .page a colour rule doesn't win on specificity */
.page a.cta-btn,.cta-btn{display:inline-flex;align-items:center;gap:8px;height:50px;padding:0 28px;background:var(--acc);color:var(--acc-ink);text-decoration:none;font-family:var(--disp);font-weight:800;font-size:16px;border-radius:999px;box-shadow:0 2px 16px rgba(61,179,203,0.3);margin:8px 0}
.page a.cta-btn:hover,.cta-btn:hover{background:var(--acc-h);color:var(--acc-ink);text-decoration:none}

/* tables (e.g. banner size reference) */
.table-wrap{overflow-x:auto;border:1px solid var(--border2);border-radius:12px;margin:16px 0 20px}
.table-wrap table{margin:0;border:none}
.page table{width:100%;border-collapse:collapse;margin:16px 0 20px;font-size:15px;min-width:520px}
.page th,.page td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--border);vertical-align:top}
.page th{font-family:var(--disp);font-weight:800;color:var(--ink);background:var(--cardalt);font-size:12.5px;letter-spacing:.04em;text-transform:uppercase}
.page td{color:var(--sec)}
.page tbody tr:last-child td{border-bottom:none}
.page td.dim{font-weight:800;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.page td.name{color:var(--ink);font-weight:600;white-space:nowrap}

/* contact email card */
.email-card{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:var(--card);border:1px solid var(--border2);border-radius:16px;padding:22px 24px;margin:6px 0 8px}
.email-card .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:800;margin-bottom:3px}
.email-card .addr{font-size:21px;font-weight:800;color:var(--ink)}
.email-card a.btn{margin-left:auto;display:inline-flex;align-items:center;height:44px;padding:0 22px;background:var(--acc);color:var(--acc-ink);text-decoration:none;font-weight:800;font-size:15px;border-radius:999px}
.email-card a.btn:hover{background:var(--acc-h)}

/* related-links row at the foot of an article */
.rel{margin-top:26px;font-size:15.5px;color:var(--sec)}

/* guides hub — card grid */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;margin:10px 0 8px}
a.gcard{display:block;background:var(--card);border:1px solid var(--border2);border-radius:16px;padding:22px 22px 20px;text-decoration:none;transition:transform .15s ease,border-color .15s ease}
a.gcard:hover{transform:translateY(-3px);border-color:rgba(61,179,203,0.5);text-decoration:none}
.gcard .tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--acc);margin-bottom:9px}
.gcard h3{font-family:var(--disp);font-weight:800;font-size:18px;color:var(--ink);margin:0 0 7px;line-height:1.25}
.gcard p{color:var(--sec);font-size:14.5px;line-height:1.55;margin:0}
.gcard .go{display:inline-block;margin-top:12px;color:var(--acc);font-weight:800;font-size:14px}

/* blog — post cards (index) */
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:24px;margin:18px 0 8px}
a.post-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border2);border-radius:16px;overflow:hidden;text-decoration:none;transition:transform .15s ease,border-color .15s ease}
a.post-card:hover{transform:translateY(-3px);border-color:rgba(61,179,203,0.5)}
.post-card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--cardalt)}
.post-card .body{padding:16px 18px 20px}
.post-card .tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--acc);margin-bottom:8px}
.post-card h3{font-family:var(--disp);font-weight:800;font-size:18px;line-height:1.3;color:var(--ink);margin:0 0 7px}
.post-card p{font-size:14px;color:var(--sec);line-height:1.55;margin:0}
.post-card .go{display:inline-block;margin-top:12px;color:var(--acc);font-weight:800;font-size:14px}

/* blog — article page */
.page .eyebrow{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--acc);margin-bottom:10px}
.page .post-meta{font-size:14px;color:var(--muted);font-weight:700;margin:0 0 20px}
.page .hero-img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:16px;margin:4px 0 26px;background:var(--cardalt);border:1px solid var(--border2)}

/* footer (columned, shared with the landing) */
.site-ft{background:var(--bg);border-top:1px solid rgba(255,255,255,0.06);font-family:var(--body)}
.site-ft .ft-inner{max-width:1120px;margin:0 auto;padding:48px 24px 28px}
.site-ft .ft-top{display:flex;flex-wrap:wrap;gap:34px 56px;justify-content:space-between}
.site-ft .ft-brand{display:flex;align-items:center;gap:18px;flex:0 0 auto}
.site-ft .ft-brand img{height:30px;width:auto;opacity:.97}
.site-ft .ft-rule{width:1px;height:42px;background:rgba(255,255,255,0.15)}
.site-ft .ft-tag{font-family:var(--disp);font-weight:800;font-size:13px;line-height:1.55;letter-spacing:.2em;text-transform:uppercase;color:#5fc4d6}
.site-ft .ft-cols{display:flex;flex-wrap:wrap;gap:30px 48px}
.site-ft .ft-col{display:flex;flex-direction:column;gap:10px;min-width:118px}
.site-ft .ft-col h4{font-family:var(--disp);font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#5b6b7a;margin:0 0 2px}
.site-ft .ft-col a{font-size:13px;font-weight:600;color:#94a3b8;text-decoration:none;transition:color .15s ease}
.site-ft .ft-col a:hover{color:#3db3cb}
.site-ft .ft-rule-h{height:1px;background:rgba(255,255,255,0.08);margin:34px 0 18px}
.site-ft .ft-addr{text-align:center;font-size:11.5px;font-weight:600;color:#64748b;letter-spacing:.02em;line-height:1.7}
@media (max-width:680px){ .site-ft .ft-top{gap:26px 32px} .site-ft .ft-cols{gap:22px 30px} .site-ft .ft-brand{flex-basis:100%} }

@media (max-width:680px){
  .page h1{font-size:34px}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center}
  .nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:#0d1218;border-bottom:1px solid var(--border2);box-shadow:0 12px 24px rgba(0,0,0,0.45);padding:6px 0;display:none}
  .nav.open{display:flex}
  .nav a{padding:13px 24px;font-size:16px}
  .nav .cta{height:44px;margin:10px 24px;justify-content:center}
}