/* ─────────────────────────────────────────────────────────────
   Wisesoft.ai blog — shared stylesheet

   THIS IS A DELIBERATE, SCOPED EXCEPTION to the repo's "keep everything
   single-file/inline" convention, agreed 2026-08-28. It applies to /blog/
   ONLY — index.html, the four legal pages and support.html stay fully inline
   and must not be migrated here.

   The reason is evidence rather than taste. The five legal pages were built
   as one CSS family and, measured six weeks later, only NINE rules still
   matched across all five. That is defensible for five documents that each
   do something different; it is not defensible for a set of posts that are
   all the same kind of page and that is designed to keep growing. Inline CSS
   makes "change the body size across the blog" an N-file edit where N only
   ever goes up.

   The palette is copied verbatim from index.html's :root. If the brand
   changes there, change it here too — this file is a sibling of that block,
   not a source of truth for it.
   ───────────────────────────────────────────────────────────── */

:root{
  --space:    #FFFFFF;
  --cosmos:   #F6F7FB;
  --deep:     #ECEEF5;
  --aurora:   #4338CA;
  --aurora-lt:#3730A3;
  --nebula:   #0D9488;
  --star:     #B45309;
  --comet:    #BE185D;
  --white:    #14172B;
  --pale:     #383C57;
  --muted:    #666E8C;
  --border:   #E3E6F0;
  --border-lt:#CFD3E2;
  --safe-top: env(safe-area-inset-top,0px);
}

*{margin:0;padding:0;box-sizing:border-box;}
img,svg{max-width:100%;display:block;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--space);color:var(--pale);
  font-size:17px;line-height:1.75;-webkit-font-smoothing:antialiased;
}

/* ── chrome ─────────────────────────────────────────────── */
.bnav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 20px;padding-top:calc(12px + var(--safe-top));
  background:rgba(255,255,255,.86);border-bottom:1px solid var(--border);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;min-height:44px;}
.nav-wordmark{font-family:'Poppins',sans-serif;font-weight:800;font-size:18px;color:var(--white);letter-spacing:-0.3px;}
.nav-wordmark .t{background:linear-gradient(90deg,#3B82F6,#14B8A6);-webkit-background-clip:text;background-clip:text;color:transparent;}
.nav-wordmark .ai{color:var(--muted);font-weight:600;font-size:15px;}
.bnav-cta{
  font-family:'Poppins',sans-serif;font-weight:700;font-size:13px;
  background:var(--aurora);color:#fff;text-decoration:none;
  padding:10px 16px;border-radius:20px;white-space:nowrap;
}
.bnav-cta:hover{opacity:.9;}

.wrap{max-width:680px;margin:0 auto;padding:36px 20px 64px;}

/* ── type ───────────────────────────────────────────────── */
h1,h2,h3{font-family:'Poppins',sans-serif;color:var(--white);letter-spacing:-0.4px;line-height:1.2;}
h1{font-size:clamp(28px,5.5vw,40px);font-weight:800;margin-bottom:14px;text-wrap:balance;}
h2{font-size:clamp(20px,3.4vw,26px);font-weight:800;margin:38px 0 12px;}
h3{font-size:18px;font-weight:700;margin:26px 0 8px;}
p{margin-bottom:18px;}
a{color:var(--aurora-lt);}
strong{color:var(--white);font-weight:700;}
em{font-style:italic;}
ul,ol{margin:0 0 18px 22px;}
li{margin-bottom:9px;}
hr{border:none;border-top:1px solid var(--border);margin:38px 0;}

.crumb{font-size:13px;color:var(--muted);margin-bottom:18px;}
.crumb a{color:var(--muted);text-decoration:none;}
.crumb a:hover{color:var(--aurora-lt);text-decoration:underline;}

.meta{font-size:13.5px;color:var(--muted);margin-bottom:28px;
  padding-bottom:20px;border-bottom:1px solid var(--border);}
.standfirst{font-size:clamp(17px,2.6vw,19.5px);color:var(--muted);line-height:1.7;margin-bottom:26px;}

/* ── the two devices these posts lean on ─────────────────
   .exchange shows a message and a reply, the way the app does; .callout is
   the one-line takeaway. Both exist so a post can SHOW the thing rather than
   describe it — same reasoning as the homepage's Try It section. */
.exchange{
  background:var(--cosmos);border:1px solid var(--border);border-radius:14px;
  padding:18px 20px;margin:0 0 22px;
}
.exchange .lbl{
  font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-bottom:5px;
}
.exchange .said{font-size:16px;color:var(--white);font-weight:600;line-height:1.6;margin-bottom:16px;}
.exchange .said:last-child{margin-bottom:0;}
.exchange .line{
  display:flex;gap:10px;align-items:flex-start;
  font-size:15.5px;line-height:1.6;margin-bottom:10px;
}
.exchange .line:last-child{margin-bottom:0;}
.exchange .tag{
  flex-shrink:0;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 8px;border-radius:20px;margin-top:3px;
}
.tag-knew{background:rgba(13,148,136,.13);color:var(--nebula);}
.tag-guess{background:rgba(190,24,93,.11);color:var(--comet);}

.callout{
  background:rgba(67,56,202,.07);border-left:3px solid var(--aurora);
  border-radius:0 12px 12px 0;padding:16px 18px;margin:0 0 24px;
  font-size:16px;line-height:1.65;color:var(--white);
}

.endcta{
  background:linear-gradient(120deg,rgba(67,56,202,.08),rgba(13,148,136,.05));
  border:1px solid rgba(67,56,202,.22);border-radius:18px;
  padding:24px;margin-top:40px;text-align:center;
}
.endcta h2{margin:0 0 8px;font-size:21px;}
.endcta p{font-size:15px;color:var(--muted);margin-bottom:16px;}
.endcta a.btn{
  display:inline-block;background:var(--aurora);color:#fff;text-decoration:none;
  font-family:'Poppins',sans-serif;font-weight:700;font-size:14.5px;
  padding:12px 22px;border-radius:24px;
}
.endcta a.btn:hover{opacity:.9;}

/* ── the hub ─────────────────────────────────────────────── */
.postlist{list-style:none;margin:28px 0 0;display:flex;flex-direction:column;gap:14px;}
.postlist li{margin:0;}
.postcard{
  display:block;text-decoration:none;color:inherit;
  background:var(--cosmos);border:1px solid var(--border);border-radius:16px;
  padding:20px 22px;transition:border-color .2s;
}
.postcard:hover{border-color:var(--aurora);}
.postcard h2{font-size:19px;margin:0 0 7px;}
.postcard p{font-size:14.5px;color:var(--muted);line-height:1.6;margin:0;}
.postcard .when{font-size:12px;color:var(--muted);margin-top:9px;}
.soon{opacity:.62;}
.soon .postcard{border-style:dashed;pointer-events:none;}

/* ── footer ──────────────────────────────────────────────── */
.bfoot{
  border-top:1px solid var(--border);background:var(--cosmos);
  padding:26px 20px;text-align:center;font-size:13px;color:var(--muted);
}
.bfoot nav{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:center;margin-bottom:12px;}
.bfoot a{color:var(--muted);text-decoration:none;}
.bfoot a:hover{color:var(--aurora-lt);text-decoration:underline;}

@media(min-width:640px){
  .bnav{padding-left:32px;padding-right:32px;}
  .wrap{padding:48px 32px 80px;}
}