/* CoreSpend blog — sits on top of /style.css (tokens, .d, bands, navbar, footer).
   Generated pages: blog/build.py. Text column 720px, figures up to 1040px. */

.wrap-narrow{max-width:720px;margin:0 auto;padding-left:24px;padding-right:24px}

/* ── post header (dark band) ──────────────────────────────────────────── */
.post-hero{padding:56px 0 0;position:relative;overflow:hidden}
.post-hero::before{content:"";position:absolute;inset:-20% -10%;z-index:0;pointer-events:none;
  background:radial-gradient(42% 38% at 18% 32%,rgba(79,208,158,.16),transparent 70%),radial-gradient(36% 34% at 84% 68%,rgba(79,208,158,.10),transparent 70%)}
.post-hero>*{position:relative;z-index:1}
.post-hero .eyebrow{margin-bottom:18px}
.post-hero .eyebrow a{color:inherit;text-decoration:none}
.post-hero .eyebrow a:hover{text-decoration:underline}
.post-hero h1{font-size:clamp(2.2rem,5.2vw,3.9rem);margin-bottom:18px}
.standfirst{color:var(--muted);font-size:1.2rem;line-height:1.5;max-width:36em}
.post-hero .cover{margin-top:40px;margin-bottom:-120px;max-width:1040px}
.post-hero .cover img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:22px;box-shadow:0 30px 70px -20px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.1)}
.index-hero{padding:40px 0 0;overflow:hidden}
.index-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;align-items:center}
.index-copy{padding-bottom:64px}
.index-copy h1{font-size:clamp(2.6rem,5.6vw,4.6rem)}
.index-art{position:relative;height:460px}
.index-art img{position:absolute;filter:drop-shadow(0 30px 40px rgba(0,0,0,.5))}
.index-art .art-ipad{width:min(560px,100%);height:auto;right:0;top:20px}
.index-art .art-phone{width:200px;height:auto;left:4%;bottom:-40px}
@media (max-width:900px){
  .index-grid{grid-template-columns:1fr;gap:0}
  .index-copy{padding-bottom:28px}
  .index-art{height:360px;max-width:560px;margin:0 auto;width:100%}
  .index-art .art-ipad{width:min(460px,86%)}
  .index-art .art-phone{width:160px;left:0;bottom:-30px}
}

/* ── article ──────────────────────────────────────────────────────────── */
.post{padding:150px 0 40px}
.index-hero+.post{padding-top:56px}
.prose{font-size:1.1rem;line-height:1.75}
.prose>p,.prose>ul,.prose>ol,.prose>blockquote,.prose>h2,.prose>h3,.prose>hr,.prose>aside{margin-bottom:1.2em}
.prose h2{font-size:clamp(1.6rem,3.2vw,2.1rem);font-weight:800;letter-spacing:-.02em;line-height:1.15;margin-top:2.2em;scroll-margin-top:96px}
.prose h3{font-size:1.2rem;font-weight:800;margin-top:1.8em}
.prose h2+p,.prose h3+p{margin-top:0}
.prose a{text-decoration-color:rgba(14,122,80,.35);text-underline-offset:3px}
.prose a:hover{text-decoration-color:var(--green-ink)}
.prose ul,.prose ol{padding-left:1.3em}
.prose li{margin-bottom:.35em}
.prose li::marker{color:var(--green-ink);font-weight:700}
.prose blockquote{border-left:4px solid var(--green);padding:.2em 0 .2em 1.1em;color:var(--muted);font-size:1.15rem;font-style:italic}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}
.prose strong{font-weight:700}
.prose code{font-size:.9em}
.prose .lead{font-size:1.22rem;color:var(--muted)}

/* ── figures ──────────────────────────────────────────────────────────── */
.fig{margin:2.2em 0}
.fig img,.fig video{width:100%;border-radius:18px;box-shadow:var(--shadow);border:1px solid var(--line);background:var(--card)}
.fig.plain img,.fig.plain video{box-shadow:none;border:0;background:transparent;border-radius:0}   /* device renders carry their own frame */
.fig figcaption{margin-top:.8em;color:var(--muted);font-size:.9rem;line-height:1.5;text-align:center}
/* wider than the text column; stays centred on the same axis */
.fig.wide{width:min(1040px,calc(100vw - 48px));margin-left:50%;transform:translateX(-50%)}
/* bezelled phone renders have their own shadow */
.fig.phone img{box-shadow:none;border:0;background:transparent;border-radius:0;width:min(380px,100%);margin:0 auto}
.fig.duo .duo{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.fig.duo.phone .duo img{width:100%}
.fig.wide .duo{gap:28px}
.fig.phone.wide .duo{width:min(820px,100%);margin:0 auto}
@media (max-width:700px){
  .fig.duo .duo{grid-template-columns:1fr}
  .fig.wide{width:auto;margin-left:-8px;margin-right:-8px;transform:none}
}

/* video inside the landing page's iPhone bezel (.phone-bezel from style.css) */
.fig.video-phone .phone-bezel{margin:0 auto 34px;width:min(360px,80vw);filter:drop-shadow(0 14px 18px rgba(0,0,0,.22))}   /* the landing page's 34px/40px shadow spilled over the caption */
.fig.video-phone video{width:89.8%;border-radius:14% / 6.4%;box-shadow:none;border:0}
.fig.video-phone img.bezel{width:100%;box-shadow:none;border:0;border-radius:0;background:transparent}
.fig .cap{margin-top:.8em;color:var(--muted);font-size:.9rem;line-height:1.5;text-align:center}

/* ── asides ───────────────────────────────────────────────────────────── */
.prose aside{border-radius:18px;padding:22px 24px;background:var(--green-soft);border:1px solid rgba(40,166,121,.25)}
.prose aside .aside-title{font-weight:800;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green-ink);margin-bottom:.6em}
.prose aside p:last-child,.prose aside ol:last-child,.prose aside ul:last-child{margin-bottom:0}
.prose aside p,.prose aside li{font-size:1rem}
.prose aside ol,.prose aside ul{padding-left:1.3em;margin-bottom:.8em}
.prose aside.note{background:var(--chip-bg);border-color:var(--line)}
.prose aside.note .aside-title{color:var(--muted)}

/* ── post navigation ──────────────────────────────────────────────────── */
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:56px;padding-top:28px;border-top:1px solid var(--line)}
.post-nav a{display:block;text-decoration:none;color:var(--ink);font-weight:700;line-height:1.3}
.post-nav a small{display:block;color:var(--muted);font-weight:600;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.3em}
.post-nav a:hover{color:var(--green-ink)}
.post-nav .post-next{text-align:right}

/* ── closing CTA band ─────────────────────────────────────────────────── */
.post-cta{padding:72px 0;text-align:center}
.post-cta .wrap{max-width:720px}
.post-cta h2{font-size:clamp(2rem,5vw,3.2rem);margin-bottom:14px}
.post-cta p{color:var(--muted);margin-bottom:26px;font-size:1.1rem}
.post-cta .store-badge{display:inline-block}

/* ── index cards ──────────────────────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:28px}
.card{display:block;text-decoration:none;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 10px 30px -20px rgba(14,29,21,.3);transition:transform .2s ease,box-shadow .2s ease}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.card img{width:100%;aspect-ratio:16/9;object-fit:cover}
.card-body{padding:22px 24px 26px}
.card-body .eyebrow{margin-bottom:8px}
.card-body h2{font-size:1.35rem;font-weight:800;letter-spacing:-.015em;line-height:1.2;margin-bottom:8px}
.card-body p:last-child{color:var(--muted);font-size:.98rem;line-height:1.5}
.cards .card:first-child{grid-column:1 / -1;display:grid;grid-template-columns:1.3fr 1fr;align-items:center}
.cards .card:first-child img{height:100%;aspect-ratio:auto;min-height:280px}
.cards .card:first-child .card-body{padding:36px}
.cards .card:first-child h2{font-size:clamp(1.6rem,3vw,2.2rem)}
@media (max-width:760px){
  .cards .card:first-child{grid-template-columns:1fr}
  .cards .card:first-child img{aspect-ratio:16/9;min-height:0}
  .cards .card:first-child .card-body{padding:22px 24px 26px}
}

/* ── small screens ────────────────────────────────────────────────────── */
@media (max-width:700px){
  .post-hero{padding-top:28px}
  .post-hero .cover{margin-top:28px;margin-bottom:-60px}
  .post-hero .cover img{border-radius:16px}
  .post{padding-top:84px}
  .prose{font-size:1.04rem}
  .post-nav{grid-template-columns:1fr}
  .post-nav .post-next{text-align:left}
}