/* Light theme for the blog + landing pages, so they match the homepage.
   Loaded after site.css, scoped to body.inner. Nothing here touches the homepage
   (that has its own home.css) and no page content changes. */

/* --muted is darker than site.css (#64748B): that grey is 4.48:1 on the soft
   bands, under the 4.5:1 minimum for small text. #5B6B80 is 5.13:1. */
body.inner{--muted:#5B6B80}

/* buttons: flat indigo, as on the homepage */
.inner .btn-primary{background:var(--indigo);box-shadow:0 8px 22px rgba(79,70,229,.24)}
.inner .btn-primary:hover{background:#4338CA;box-shadow:0 12px 28px rgba(79,70,229,.32)}

/* ── page header: soft light band instead of the navy gradient ─────────── */
.inner .pg-hero{background:linear-gradient(180deg,var(--bg-soft),#fff);color:var(--ink);
  border-bottom:1px solid var(--line);padding:64px 0 52px}
.inner .pg-hero::before{
  background:radial-gradient(640px 300px at 10% 0%,rgba(79,70,229,.09),transparent 65%)}
.inner .pg-hero h1{color:var(--ink);font-weight:800;text-wrap:balance}
.inner .pg-hero .lede{color:var(--body)}
.inner .crumb,.inner .meta{color:var(--muted)}
.inner .crumb a:hover{color:var(--indigo)}

/* ── calls to action: indigo cards, not navy bands ────────────────────── */
.inner .inline-cta{background:radial-gradient(520px 220px at 50% 0%,rgba(255,255,255,.14),transparent 70%),var(--indigo);
  border-radius:20px}
.inner .inline-cta h3{color:#fff}
.inner .inline-cta p{color:rgba(255,255,255,.88)}
.inner .cta{background:#fff;color:var(--ink);padding:72px 0 88px}
.inner .cta::before{display:none}
.inner .cta .wrap{width:calc(100% - 48px);max-width:1112px;padding:56px 32px;border-radius:24px;
  background:radial-gradient(520px 240px at 50% 0%,rgba(255,255,255,.14),transparent 70%),var(--indigo);color:#fff}
.inner .cta h2{color:#fff}
.inner .cta p{color:rgba(255,255,255,.88)}

/* ── footer: light, keeps all the internal links ──────────────────────── */
.inner footer{background:#fff;color:var(--muted);border-top:1px solid var(--line)}
.inner footer h4{color:var(--ink)}
.inner footer a:hover{color:var(--indigo)}
.inner footer .logo{color:var(--ink)}
.inner .fbot{border-top-color:var(--line);align-items:center}
.inner footer ul{gap:0}
.inner footer li a,.inner .fbot a{display:inline-block;padding:13px 0}

/* ── touch targets, keyboard focus, skip link ─────────────────────────── */
.inner header .nav > a{display:flex;align-items:center;min-height:44px}
.inner a:focus-visible,.inner summary:focus-visible{outline:3px solid var(--indigo);outline-offset:3px;border-radius:10px}
.inner .cta .wrap a:focus-visible,.inner .inline-cta a:focus-visible{outline-color:#fff}
.skip{position:absolute;left:12px;top:-64px;z-index:100;background:var(--ink);color:#fff;
  font-weight:600;padding:11px 18px;border-radius:10px}
.skip:focus{top:12px}
/* the whole post link-card is a big target already; make article links easy to hit */
.inner article.post li a,.inner article.post p a{padding:2px 0}

/* ── jump links clear the sticky header; Pricing reachable on phones ──── */
html{scroll-padding-top:88px}
.inner .navp{display:none;align-items:center;min-height:44px;padding:0 10px;font-weight:600;
  font-size:.94rem;color:var(--body)}
@media (max-width:960px){
  .inner .navp{display:inline-flex}
  .inner .nav .acts{margin-left:auto}
}
@media (max-width:620px){
  html{scroll-padding-top:80px}
  .inner .nav{gap:12px;height:64px}
  .inner .nav .btn-ghost{display:none}
  .inner .nav .btn{white-space:nowrap;padding:10px 16px;font-size:.9rem}
  .inner .pg-hero{padding:44px 0 36px}
  .inner .cta .wrap{padding:44px 22px}
}

/* ── reduced motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .inner .btn:hover,.inner .post-card:hover{transform:none}
}

/* breadcrumb links are standalone controls: make them 44px tall to tap */
.inner .crumb{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px}
.inner .crumb a{display:inline-flex;align-items:center;min-height:44px;padding:0 2px}

/* desktop nav links: 44px tall to tap (tablets in landscape show this nav) */
.inner .nav nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 2px}

/* button rows inside article text (the generic article-link padding would otherwise squash .btn) */
.inner article.post .actions{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0 8px}
.inner article.post .actions a.btn{padding:12px 22px;min-height:44px;font-weight:600;text-decoration:none}