/* Pulse AI — blog styles. Matches the landing page: warm paper, editorial serif, signal red. */
:root{
  --paper:#f4f1ea; --paper-2:#ece7dc; --card:#fbfaf6; --ink:#171514; --ink-2:#211e1c;
  --ink-soft:#5b554d; --accent:#e63b2e; --accent-d:#c4321f; --accent-l:#ff7a6e;
  --line:rgba(23,21,20,.12); --line-2:rgba(23,21,20,.2);
  --serif:'Fraunces',Georgia,serif; --sans:'Space Grotesk',system-ui,sans-serif; --mono:'Space Mono',monospace;
  --maxw:1480px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);line-height:1.6;font-size:17px;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(var(--line) .9px, transparent .9px);background-size:30px 30px;}
::selection{background:var(--accent);color:#fff}
a{color:inherit}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}

/* Header — matches the landing page's floating pill nav exactly */
.nav{position:sticky;top:14px;z-index:60;padding:0 20px}
.nav-pill{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:62px;padding:0 14px 0 22px;
  background:rgba(251,250,246,.86);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:100px;box-shadow:0 10px 30px -16px rgba(23,21,20,.28)}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.brand-ic{height:30px;width:30px;border-radius:7px;display:block;flex:none}
.brand-word{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:26px;letter-spacing:0;color:var(--ink);line-height:1}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{font-size:15px;color:var(--ink-soft);font-weight:500;text-decoration:none}
.nav-links a:hover{color:var(--ink)}
.nav-cta{display:flex;align-items:center;gap:10px}
.btn{display:inline-flex;align-items:center;gap:9px;justify-content:center;font-family:var(--sans);font-weight:600;font-size:16px;
  padding:14px 26px;border-radius:100px;cursor:pointer;border:1.5px solid var(--ink);text-decoration:none;
  transition:transform .15s,background .2s,color .2s,border-color .2s;white-space:nowrap}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-ghost{background:transparent;color:var(--ink)}
.menu-btn{display:none;background:none;border:none;cursor:pointer;padding:8px}
.menu-btn span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0}
.mobile-menu{display:none;flex-direction:column;gap:2px;max-width:var(--maxw);margin:8px auto 0;padding:14px 22px 20px;
  background:var(--card);border:1px solid var(--line);border-radius:22px}
.mobile-menu a{padding:11px 0;font-size:17px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.mobile-menu .btn{margin-top:12px}
.mobile-menu.show{display:flex}
@media(max-width:900px){
  .nav-links{display:none}
  .nav-cta .btn-ghost{display:none}
  .menu-btn{display:block}
}

/* Article */
.post{max-width:760px;margin:0 auto;padding:64px 32px 24px}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-d);margin-bottom:18px}
.post h1{font-family:var(--serif);font-size:clamp(34px,5.2vw,54px);line-height:1.08;letter-spacing:-.02em;font-weight:700;margin-bottom:20px}
.post .lede{font-size:20px;color:var(--ink-soft);line-height:1.65;margin-bottom:26px}
.meta{font-family:var(--mono);font-size:13px;color:var(--ink-soft);padding-bottom:26px;border-bottom:1px solid var(--line);margin-bottom:40px}

.body{max-width:760px;margin:0 auto;padding:0 32px 64px}
.body h2{font-family:var(--serif);font-size:clamp(25px,3.2vw,33px);line-height:1.2;letter-spacing:-.01em;font-weight:700;margin:48px 0 16px}
.body h3{font-family:var(--sans);font-size:20px;font-weight:700;margin:32px 0 10px}
.body p{margin-bottom:20px;color:var(--ink-2)}
.body ul,.body ol{margin:0 0 22px 22px}
.body li{margin-bottom:10px;color:var(--ink-2)}
.body strong{font-weight:700;color:var(--ink)}
.body a{color:var(--accent-d);text-decoration:underline;text-underline-offset:3px}
.body a:hover{color:var(--accent)}

.pull{border-left:3px solid var(--accent);background:var(--card);padding:22px 26px;border-radius:0 12px 12px 0;margin:32px 0}
.pull p{margin:0;font-family:var(--serif);font-size:21px;line-height:1.45}

.callout{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:28px;margin:40px 0}
.callout h3{margin-top:0}
.callout p:last-child{margin-bottom:0}

.cta-box{background:var(--ink);color:var(--paper);border-radius:16px;padding:36px;margin:52px 0 8px;text-align:center}
.cta-box h3{font-family:var(--serif);font-size:27px;font-weight:700;margin:0 0 10px;color:var(--paper)}
.cta-box p{color:rgba(244,241,234,.72);margin-bottom:22px}
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
/* Specificity note: `.body a` (0,1,1) would otherwise win over a bare `.cta-1` (0,1,0)
   and paint the button text red-on-red. Qualify these so the buttons keep their own colors. */
.cta-box .cta-row a{text-decoration:none;font-weight:700;padding:13px 24px;border-radius:10px;font-size:16px}
.cta-box .cta-row a.cta-1{background:var(--accent);color:#fff;text-decoration:none}
.cta-box .cta-row a.cta-1:hover{background:var(--accent-d);color:#fff}
.cta-box .cta-row a.cta-2{border:1px solid rgba(244,241,234,.3);color:var(--paper);text-decoration:none}
.cta-box .cta-row a.cta-2:hover{background:rgba(244,241,234,.08);color:var(--paper)}

/* Blog index */
.idx-hero{max-width:900px;margin:0 auto;padding:72px 32px 40px}
.idx-hero h1{font-family:var(--serif);font-size:clamp(36px,5.5vw,58px);line-height:1.06;letter-spacing:-.02em;font-weight:700;margin-bottom:16px}
.idx-hero p{font-size:19px;color:var(--ink-soft);max-width:600px}
.posts{max-width:900px;margin:0 auto;padding:0 32px 80px;display:flex;flex-direction:column;gap:20px}
.card{display:block;text-decoration:none;background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:30px;transition:transform .18s ease,border-color .18s ease}
.card:hover{transform:translateY(-2px);border-color:var(--line-2)}
.card .k{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-d);margin-bottom:12px}
.card h2{font-family:var(--serif);font-size:27px;line-height:1.22;font-weight:700;margin-bottom:10px;letter-spacing:-.01em}
.card p{color:var(--ink-soft);margin-bottom:14px}
.card .more{font-weight:700;font-size:15px;color:var(--accent-d)}

/* Footer */
.ft{background:var(--ink);color:var(--paper);padding:56px 0 26px;margin-top:40px}
.ft .brand-word{color:var(--paper)}
.ft-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;padding-bottom:34px;border-bottom:1px solid rgba(244,241,234,.14)}
.ft .tag{color:rgba(244,241,234,.64);max-width:300px;margin:12px 0 16px;font-size:15px}
.ft-demo small{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(244,241,234,.5)}
.ft-demo a{font-family:var(--serif);font-size:21px;font-weight:700;color:var(--accent-l);text-decoration:none}
.ft-col{display:flex;flex-direction:column;gap:9px}
.ft-col h4{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,241,234,.5);margin-bottom:5px;font-weight:400}
.ft-col a{color:rgba(244,241,234,.8);text-decoration:none;font-size:15px}
.ft-col a:hover{color:var(--paper)}
.ft-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px;
  font-family:var(--mono);font-size:12px;color:rgba(244,241,234,.5)}

@media(max-width:640px){
  .post{padding:44px 22px 20px}
  .body{padding:0 22px 48px}
  .wrap,.hd-in,.idx-hero,.posts{padding-left:22px;padding-right:22px}
  .cta-box{padding:28px 22px}
}