/* ============================================================================
   JUST CAPTIONS — SEO / CONTENT PAGES · shared styles
   ----------------------------------------------------------------------------
   Loaded AFTER styles.css on every landing page, blog post, alternatives and
   how-to page under a subfolder. Reuses the brand tokens (--yellow, --paper,
   --gray-*, --r-*, --sh-*, --sans, --mono) so new pages stay pixel-consistent
   with the homepage. Components added here:
     .page-hero   compact hero for inner pages
     .crumbs      breadcrumb trail
     .prose       long-form article typography (blog, guides)
     .cmp         comparison table (alternatives pages)
     .callout     highlighted aside / tip box
     .related     internal-link cards (hub-and-spoke linking)
     .post-grid   blog index card grid
   ============================================================================ */

/* ---- compact inner-page hero -------------------------------------------- */
.page-hero{padding:72px 0 8px;text-align:center;}
.page-hero h1{font-size:clamp(32px,5vw,56px);margin:14px auto 0;max-width:18ch;}
.page-hero .lead{margin:22px auto 0;max-width:56ch;}
.page-hero .hero-cta{margin-top:30px;justify-content:center;}
.page-hero .hero-sub{margin-top:22px;}

/* ---- breadcrumbs -------------------------------------------------------- */
.crumbs{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--gray-400);
  display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;text-transform:uppercase;}
.crumbs a{color:var(--gray-500);}
.crumbs a:hover{color:var(--black);}
.crumbs .sep{color:var(--gray-300);}

/* ---- long-form prose (articles / guides) -------------------------------- */
.prose{max-width:720px;margin:0 auto;font-size:18px;line-height:1.7;color:var(--gray-700);}
.prose > * + *{margin-top:22px;}
.prose h2{font-size:clamp(24px,3.2vw,34px);font-weight:800;margin-top:52px;letter-spacing:-.025em;color:var(--black);}
.prose h3{font-size:21px;font-weight:700;margin-top:36px;letter-spacing:-.02em;color:var(--black);}
.prose p{color:var(--gray-700);}
.prose a{color:var(--black);text-decoration:underline;text-decoration-color:var(--yellow-deep);
  text-decoration-thickness:2px;text-underline-offset:2px;}
.prose a:hover{background:var(--yellow-soft);}
.prose ul,.prose ol{padding-left:24px;display:flex;flex-direction:column;gap:10px;}
.prose li{padding-left:4px;}
.prose strong{color:var(--black);font-weight:700;}
.prose blockquote{border-left:4px solid var(--yellow);background:var(--gray-50);
  padding:16px 22px;border-radius:0 var(--r-md) var(--r-md) 0;font-size:17px;color:var(--gray-600);}
.prose figure{margin:32px auto;}
.prose figure img{border-radius:var(--r-md);box-shadow:var(--sh-sm);width:100%;}
.prose figcaption{font-family:var(--mono);font-size:12px;color:var(--gray-400);text-align:center;margin-top:10px;}
.prose .step-list{counter-reset:s;list-style:none;padding-left:0;gap:18px;}
.prose .step-list > li{counter-increment:s;position:relative;padding-left:48px;}
.prose .step-list > li::before{content:counter(s);position:absolute;left:0;top:-2px;width:32px;height:32px;
  border-radius:50%;background:var(--yellow);color:var(--black);font-family:var(--mono);font-weight:600;
  font-size:15px;display:flex;align-items:center;justify-content:center;}
.prose .step-list > li strong{display:block;margin-bottom:2px;}

/* article meta line */
.art-meta{font-family:var(--mono);font-size:13px;color:var(--gray-500);display:flex;gap:14px;
  justify-content:center;flex-wrap:wrap;margin-top:18px;}
.art-meta .sep{color:var(--gray-300);}

/* ---- callout / tip ------------------------------------------------------ */
.callout{max-width:720px;margin:32px auto;background:var(--yellow-soft);border:1px solid var(--yellow-deep);
  border-radius:var(--r-md);padding:20px 24px;display:flex;gap:14px;font-size:16px;line-height:1.6;color:var(--gray-700);}
.callout .ico{flex:none;width:34px;height:34px;border-radius:10px;background:var(--yellow);
  display:flex;align-items:center;justify-content:center;}
.callout .ico svg{width:18px;height:18px;color:var(--black);}
.callout b{color:var(--black);}

/* ---- comparison table (alternatives) ------------------------------------ */
.cmp-wrap{max-width:840px;margin:40px auto 0;overflow-x:auto;}
.cmp{width:100%;border-collapse:separate;border-spacing:0;font-size:15px;min-width:520px;}
.cmp th,.cmp td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--gray-200);vertical-align:top;}
.cmp thead th{font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--gray-500);border-bottom:2px solid var(--gray-300);font-weight:500;}
.cmp thead th.us{color:var(--black);}
.cmp tbody th{font-weight:600;color:var(--black);width:34%;}
.cmp td.us{background:var(--yellow-soft);font-weight:600;color:var(--black);}
.cmp thead th.us{background:var(--yellow-soft);border-radius:var(--r-sm) var(--r-sm) 0 0;}
.cmp tr:last-child td,.cmp tbody tr:last-child td,.cmp tbody tr:last-child th{border-bottom:none;}
.cmp .yes{color:#1f7a3d;font-weight:700;}
.cmp .no{color:var(--gray-400);}

/* pros / cons two-up */
.diff{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:840px;margin:36px auto 0;}
.diff .card{padding:24px;}
.diff h3{font-size:18px;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:9px;}
.diff ul{list-style:none;display:flex;flex-direction:column;gap:10px;}
.diff li{display:flex;gap:10px;font-size:15px;color:var(--gray-700);line-height:1.5;}
.diff .mk{flex:none;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:1px;}
.diff .mk svg{width:12px;height:12px;}
.diff .mk.up{background:var(--yellow);color:var(--black);}
.diff .mk.dn{background:var(--gray-100);color:var(--gray-500);}

/* ---- related / internal-link cards -------------------------------------- */
.related{max-width:980px;margin:0 auto;}
.related .sec-head{margin-bottom:8px;}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px;}
.rel-card{display:block;padding:24px;background:var(--white);border:1px solid var(--gray-200);
  border-radius:var(--r-md);transition:transform .15s var(--ease),box-shadow .2s var(--ease),border-color .2s;}
.rel-card:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--gray-300);}
.rel-card .ico{width:42px;height:42px;border-radius:12px;background:var(--gray-50);border:1px solid var(--gray-200);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.rel-card .ico svg{width:20px;height:20px;}
.rel-card b{font-size:17px;letter-spacing:-.02em;display:block;margin-bottom:6px;}
.rel-card span{font-size:14px;color:var(--gray-500);line-height:1.5;}
.rel-card .go{font-family:var(--mono);font-size:12px;color:var(--gray-400);margin-top:12px;display:inline-block;}

/* ---- blog index --------------------------------------------------------- */
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;margin-top:48px;}
.post-card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--gray-200);
  border-radius:var(--r-lg);overflow:hidden;transition:transform .15s var(--ease),box-shadow .2s var(--ease);}
.post-card:hover{transform:translateY(-3px);box-shadow:var(--sh-md);}
.post-card .pc-tag{position:absolute;top:14px;left:14px;}
.post-card .pc-thumb{aspect-ratio:16/9;position:relative;background:#0E0E0D;overflow:hidden;}
.post-card .pc-thumb img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;}
/* gentle scrim: darken top-right (for the glyph badge) and bottom (for the caption) */
.post-card .pc-thumb::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,rgba(10,10,10,.30) 0%,rgba(10,10,10,0) 32%,rgba(10,10,10,0) 54%,rgba(10,10,10,.34) 100%);}
.post-card .pc-thumb .cap-strip{position:absolute;left:16px;bottom:16px;font-size:14px;z-index:2;}
/* platform glyph badge — the icon set, now sitting over a distinct photo per card */
.post-card .pc-badge{position:absolute;top:12px;right:12px;z-index:2;width:38px;height:38px;padding:9px;
  box-sizing:border-box;border-radius:50%;background:rgba(12,12,12,.48);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.24);
  fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.post-card .pc-body{padding:22px;display:flex;flex-direction:column;gap:8px;flex:1;}
.post-card .pc-kicker{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gray-400);}
.post-card h3{font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.2;}
.post-card p{font-size:14px;color:var(--gray-500);line-height:1.55;flex:1;}
.post-card .pc-go{font-family:var(--mono);font-size:12px;color:var(--gray-600);font-weight:500;margin-top:4px;}

/* ---- shared section helpers for inner pages ----------------------------- */
.narrow{max-width:760px;margin-left:auto;margin-right:auto;}
.sec-head.left{text-align:left;align-items:flex-start;max-width:46ch;margin-left:0;}
.bg-soft{background:var(--gray-50);}

/* ---- responsive --------------------------------------------------------- */
@media (max-width:860px){
  .rel-grid{grid-template-columns:1fr;}
  .diff{grid-template-columns:1fr;}
  .prose{font-size:17px;}
}