/* ── COOLNOMICS COMMERCIAL STRATEGY DOCUMENT ──────────────────
   Shared hero component for Pro pages.
   Editions: .sd-fellows (green) · .sd-accelerator (taupe) · .sd-dfy (black) · .sd-bespoke (black, cream + green type)
   ─────────────────────────────────────────────────────────── */

.hero-img-wrap.sd-wrap { align-items: center; }
.sd-stack { position: relative; width: min(100%, 440px); }
.sd-sheet { container-type: inline-size; aspect-ratio: 1 / 1.414; width: 100%; position: relative; }
.sd-inner { position: absolute; inset: 0; padding: 7cqw 7.5cqw; display: flex; flex-direction: column; }

/* cream contents page, behind */
.sd-sheet.sd-interior { position: absolute; top: 0; left: 0; background: #f7f4ed; color: #000; transform: translate(9%, -5%) rotate(3.2deg); }
/* cover, in front */
.sd-sheet.sd-cover { transform: rotate(-1.4deg); box-shadow: -1px 0 0 rgba(0,0,0,0.25); }

/* editions: the cover colour is the only thing that changes */
.sd-fellows { background: #2b9236; color: #000; }
.sd-accelerator { background: #b8a898; color: #000; }
.sd-dfy { background: #000; color: #f7f4ed; box-shadow: inset 0 0 0 1px rgba(247,244,237,0.28); }
.sd-dfy .sd-code, .sd-dfy .sd-pillar-n, .sd-dfy .sd-foot { color: #2b9236; }
.sd-dfy .sd-pillar-n { opacity: 1; }

.sd-bespoke { background: #000; color: #f7f4ed; box-shadow: -1px 0 0 rgba(0,0,0,0.25), inset 0 0 0 1px rgba(247,244,237,0.12); }
.sd-bespoke .sd-code, .sd-bespoke .sd-pillar-n { color: #2b9236; }
.sd-bespoke .sd-pillar-n { opacity: 1; }
.sd-bespoke .sd-rule { background: #2b9236; }
.sd-bespoke .sd-pillars, .sd-bespoke .sd-pillar { border-color: rgba(247,244,237,0.25); }
.sd-bespoke .sd-foot { color: rgba(247,244,237,0.72); }

/* cover type */
.sd-head { display: flex; justify-content: space-between; align-items: baseline; }
.sd-mark { font-family: 'CanelaText', serif; font-weight: 300; font-size: 4.6cqw; letter-spacing: -0.01em; }
.sd-mark sup { font-size: 0.4em; vertical-align: super; line-height: 0; }
.sd-code { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 300; font-size: 2.1cqw; letter-spacing: 0.18em; text-transform: uppercase; }
.sd-rule { height: 1px; background: currentColor; margin-top: 4cqw; }
.sd-title-wrap { margin-top: auto; }
.sd-title { font-family: 'CanelaText', serif; font-weight: 300; font-size: 15.5cqw; line-height: 0.92; letter-spacing: -0.035em; }
.sd-for { font-family: 'CanelaText', serif; font-style: italic; font-weight: 100; font-size: 4.6cqw; margin-top: 4cqw; }
.sd-pillars { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 8cqw; border-top: 1px solid currentColor; }
.sd-pillar { padding: 2.6cqw 0 2.8cqw; border-bottom: 1px solid currentColor; display: flex; flex-direction: column; gap: 0.8cqw; }
.sd-pillar:nth-child(3n+2), .sd-pillar:nth-child(3n+3) { padding-left: 2.8cqw; border-left: 1px solid currentColor; }
.sd-pillar-n { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 300; font-size: 1.9cqw; letter-spacing: 0.14em; opacity: 0.65; }
.sd-pillar-name { font-family: 'CanelaText', serif; font-weight: 300; font-size: 4.4cqw; letter-spacing: -0.01em; }
.sd-foot { display: flex; justify-content: space-between; align-items: baseline; margin-top: 5cqw; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 300; font-size: 1.95cqw; letter-spacing: 0.16em; text-transform: uppercase; }

/* contents page type */
.sd-i-head { display: flex; justify-content: space-between; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 300; font-size: 2cqw; letter-spacing: 0.18em; text-transform: uppercase; padding-bottom: 3cqw; border-bottom: 1px solid #000; }
.sd-i-title { font-family: 'CanelaText', serif; font-weight: 300; font-size: 8cqw; letter-spacing: -0.02em; margin: 7cqw 0 5cqw; }
.sd-i-row { display: grid; grid-template-columns: 10cqw 1fr auto; align-items: baseline; padding: 2.6cqw 0; border-top: 1px solid rgba(0,0,0,0.2); font-family: 'CanelaText', serif; font-weight: 100; font-size: 4cqw; }
.sd-i-row span:first-child, .sd-i-row span:last-child { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 300; font-size: 2cqw; letter-spacing: 0.14em; opacity: 0.55; }

/* one settle-in moment on load, skipped for reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .sd-sheet.sd-interior { animation: sd-settle-back 1.1s cubic-bezier(.2,.7,.2,1) 0.15s both; }
  .sd-sheet.sd-cover { animation: sd-settle-front 1s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes sd-settle-back { from { transform: translate(0,0) rotate(0deg); } }
  @keyframes sd-settle-front { from { transform: rotate(0deg) translateY(8px); opacity: 0; } }
}

@media (max-width: 768px) {
  .sd-stack { width: min(78%, 380px); margin-top: 24px; }
}