/* ═══════════════════════════════════════════════════════════
   GLOWLINE CARD SYSTEM
   One radius, one hairline, one shadow, one hover.
   Loaded last on every inner page so it overrides page-level card styles.
   Colours, content and layout are untouched; only the card "surface" is unified.
═══════════════════════════════════════════════════════════ */
:root{
  --card-radius:4px;
  --card-line:rgba(0,0,128,.09);
  --card-shadow:0 1px 2px rgba(0,0,128,.04),0 14px 34px -14px rgba(0,0,128,.14);
  --card-shadow-hover:0 2px 4px rgba(0,0,128,.05),0 22px 44px -16px rgba(0,0,128,.22);
}

/* 1 · Same corner radius everywhere */
.val-card,.mission-card,.who-card,.reasons-card,.info-card,
.tool-card,.insight-card,.cs-card,.ac-card,
.bc-problem-card,.bc-overview-card,.bc-who-card,.bc-price-card,
.ff-del-card,.ff-audience-card,.ff-price-card,
.related-card,.article-cta-block{border-radius:var(--card-radius)}

/* 2 · Same soft shadow (cards that sit on a coloured or transparent ground keep it too) */
.val-card,.mission-card,.who-card,.reasons-card,.info-card,
.tool-card,.insight-card,.cs-card,.ac-card,
.bc-problem-card,.bc-overview-card,.bc-who-card,.bc-price-card,
.ff-del-card,.ff-audience-card,.ff-price-card,
.article-cta-block{box-shadow:var(--card-shadow)}

/* 3 · Same hairline on light cards (gold accent edges are preserved) */
.who-card,.info-card,.tool-card,.insight-card,.cs-card,.ff-del-card,.related-card{border:1px solid var(--card-line)}
.bc-problem-card,.ff-audience-card{border-top-color:var(--card-line);border-right-color:var(--card-line);border-bottom-color:var(--card-line)}

/* 4 · Same gentle hover lift on light, clickable-feeling cards */
.tool-card,.insight-card,.cs-card,.ac-card,.related-card,.ff-del-card,.bc-problem-card,.ff-audience-card{
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s cubic-bezier(.22,1,.36,1)
}
.tool-card:hover,.insight-card:hover,.cs-card:hover,.ac-card:hover,.related-card:hover,
.ff-del-card:hover,.bc-problem-card:hover,.ff-audience-card:hover{
  transform:translateY(-3px);box-shadow:var(--card-shadow-hover)
}
@media (prefers-reduced-motion:reduce){
  .tool-card:hover,.insight-card:hover,.cs-card:hover,.ac-card:hover,.related-card:hover,
  .ff-del-card:hover,.bc-problem-card:hover,.ff-audience-card:hover{transform:none}
}

/* ── Calmer colour-blocking, matching the homepage "Why Glowline" cards ── */
/* About: the five values become one family (white, hairline, single gold rule) */
.val-card,.val-card.val-dark,.val-card.val-light,.val-card.val-accent{
  background:#fff;color:var(--navy);
  border:1px solid var(--card-line);border-top:3px solid var(--yellow);
}
.val-card h4{color:var(--navy)}
.val-card p,.val-card.val-dark p,.val-card.val-accent p{color:#4a4a5a}
.val-card{transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s cubic-bezier(.22,1,.36,1)}
.val-card:hover{transform:translateY(-3px);box-shadow:var(--card-shadow-hover)}

/* Bootcamp: the solid gold card becomes white with a gold rule (navy + white remain) */
.bc-overview-card--gold{background:#fff;border:1px solid var(--card-line);box-shadow:inset 0 3px 0 var(--yellow),var(--card-shadow)}
.bc-overview-card--gold ul li{color:#4a4a5a}

/* Small gold pills: darker gold on pale yellow so the labels are readable */
.sprint-item-tag,.tool-tag{color:#8a6d00}

/* contact: secondary line under the WhatsApp row */
.info-item .info-sub{font-size:.74rem;font-weight:400;opacity:.6}