/* Story Dice detail/landing page (tt-007 redesign).
   All colours come from globals.css design tokens -- no hardcoded brand hex.
   Classes are sd-prefixed to stay out of product-detail.css's way. */

.sd-offline {
  max-width: 46rem;
  margin: 0 auto;
  padding: 1.1rem 1.4rem;
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(12, 58, 40, 0.10);
}

.sd-eyebrow {
  display: inline-block;
  font-family: var(--font-ibm);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bg-white);
  background: var(--accent-primary);
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  margin-bottom: 0.5rem;
}

.sd-offline h3 {
  margin: 0 0 0.35rem;
  font-family: var(--font-ibm);
  font-size: 1.45rem;
  line-height: 1.15;
  color: var(--primary-color);
}

.sd-offline .sd-lead {
  margin: 0 0 0.7rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-color);
}

.sd-offline .sd-lead b { color: var(--primary-color); }

/* ── Benefits: compact single-column checklist, not a grid ─────────────── */
.sd-benefits {
  list-style: none;
  margin: 0 0 0.8rem;
  padding: 0;
}
.sd-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.15rem 0;
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--text-color);
}
.sd-benefits .sd-benefit-icon { flex: 0 0 auto; font-size: 1.1rem; line-height: 1.4; }

/* ── Download control: one label, one select, one button ───────────────── */
.sd-download-form { margin: 0 0 0.9rem; }
.sd-download-form label {
  display: block;
  font-family: var(--font-ibm);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--primary-color);
  margin-bottom: 0.45rem;
}
.sd-download-row {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  align-items: stretch;
}
.sd-download-row select {
  flex: 1 1 12rem;
  min-width: 10rem;
  font: inherit;
  font-family: var(--font-ibm);
  font-weight: 600;
  color: var(--primary-color);
  background: var(--bg-white);
  border: 1.5px solid var(--primary-color);
  border-radius: 10px;
  padding: 0.65rem 0.8rem;
  cursor: pointer;
}
.sd-download-row .sd-download-btn {
  flex: 0 0 auto;
  font-family: var(--font-ibm);
  font-weight: 600;
  font-size: 1rem;
  color: var(--bg-white);
  background: var(--primary-color);
  border: 1.5px solid var(--primary-color);
  border-radius: 10px;
  padding: 0.65rem 1.5rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.sd-download-row .sd-download-btn:hover {
  background: var(--accent-orange-light);
  border-color: var(--accent-orange-light);
  color: var(--primary-color);
}

/* ── Post-download steps ────────────────────────────────────────────────── */
.sd-steps {
  background: var(--primary-light);
  border-radius: 12px;
  padding: 0.7rem 1rem;
}
.sd-steps h4 {
  margin: 0 0 0.35rem;
  font-family: var(--font-ibm);
  font-size: 0.95rem;
  color: var(--primary-color);
}
.sd-steps ol {
  margin: 0;
  padding-left: 1.25rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--text-color);
  list-style: decimal;   /* the site-wide reset strips list markers; steps need their numbers */
}
.sd-steps li { margin-bottom: 0.2rem; }
.sd-steps li:last-child { margin-bottom: 0; }
.sd-steps b { color: var(--primary-color); }

.sd-note {
  margin: 0.5rem 0 0;
  font-size: 0.82rem;
  color: var(--text-color);
  opacity: 0.85;
}
.sd-note a { color: var(--accent-primary); }

/* ── Hero demo: the looping promo animation is the pitch ────────────────── */
.sd-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  width: min(100%, 42rem);   /* single-column hero: cap the animation, keep it centered */
}
.sd-demo-frame {
  width: 100%;
  aspect-ratio: 680 / 400;
  border: 0;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(12, 58, 40, 0.18);
  background: #0f0e17;   /* matches the animation stage so lazy-load doesn't flash white */
}
.sd-demo-caption {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-color);
  opacity: 0.85;
  text-align: center;
}
.sd-demo-note {
  margin: 0;
  font-family: var(--font-ibm);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--primary-color);
  text-align: center;
}

/* ── Value intro: sneaky-lesson pitch, lives in the hero under the title ── */
.sd-value-intro { text-align: center; }
.sd-value-intro h2 {
  margin: 0 0 0.3rem;
  font-family: var(--font-ibm);
  font-size: 1.7rem;
  line-height: 1.15;
  color: var(--primary-color);
}
.sd-value-lead {
  margin: 0 auto;
  max-width: 34rem;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--text-color);
}

/* ── Value section: tier ladder first, then the skills cards ────────────── */
.sd-value { text-align: center; }
.sd-skills {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  max-width: 52rem;
  margin: 0 auto 0.9rem;
}
.sd-skill {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  text-align: left;
}
.sd-skill-icon { font-size: 1.5rem; line-height: 1; display: block; margin-bottom: 0.4rem; }
.sd-skill h3 {
  margin: 0 0 0.25rem;
  font-family: var(--font-ibm);
  font-size: 1.02rem;
  color: var(--primary-color);
}
.sd-skill p { margin: 0; font-size: 0.88rem; line-height: 1.45; color: var(--text-color); }
.sd-value-footer {
  margin: 0;
  font-size: 0.95rem;
  font-style: italic;
  color: var(--text-color);
  opacity: 0.9;
}

.sd-tiers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 21rem));
  gap: 1rem;
  justify-content: center;
  margin-bottom: 1.75rem;   /* air before the skills cards below */
}
.sd-tier {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  background: var(--bg-white);
  border: 1.5px solid var(--primary-color);
  border-radius: 16px;
  padding: 1.1rem 1.2rem 1.2rem;
}
.sd-tier-dice { font-size: 1.5rem; line-height: 1; }
.sd-tier h3 {
  margin: 0;
  font-family: var(--font-ibm);
  font-size: 1.15rem;
  color: var(--primary-color);
}
.sd-tier p { margin: 0 0 0.2rem; font-size: 0.9rem; line-height: 1.45; color: var(--text-color); }
.sd-tier-price {
  font-family: var(--font-ibm);
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--accent-primary);
  margin-bottom: 0.35rem;
}
.sd-tier .auth-buttons { gap: 0.7rem; }

@media (max-width: 768px) {
  .sd-skills { grid-template-columns: 1fr; max-width: 26rem; }
  .sd-tiers { grid-template-columns: minmax(0, 21rem); }
}

/* ── Download section: signed-in only, revealed by "Get the download" ──── */
/* Collapsed by default; JS toggles .sd-open. A <noscript> style block in the
   template forces it visible when JS is off so the anchor link still works. */
#sd-offline-section { display: none; }
#sd-offline-section.sd-open { display: block; }
/* extra air between the tier cards and the download box */
.layout-stacked .stacked-section-browse { padding-top: 2.5rem; }

/* keep the box centered inside the section (max-width + auto margins) */
.stacked-section .sd-offline { margin: 0 auto; }

/* ── Compact vertical rhythm, scoped to this page's stylesheet ──────────
   The default stacked layout spends 3rem (60px at the site's 20px rem base)
   of padding per section plus a 2.5rem title. Tightened so hero (story left,
   play card right) + the centered download card fit a laptop viewport
   without scrolling. */
.product-layout-container { padding: 1rem 2rem; }
.layout-stacked .stacked-section { padding: 1rem 2rem; }
/* style.css (the switch theme, loaded globally by base.html) gives every
   .section-inner 88px top+bottom padding at >=641px -- that's ~350px of air
   across this page's two sections. Neutralise it here; the sections' own
   padding above provides the rhythm. */
.layout-stacked .stacked-section .section-inner { padding-top: 0; padding-bottom: 0; }
/* tiers follow immediately below the hero's "no signup" note -- keep it tight */
.layout-stacked .stacked-section-hero { padding-top: 0.75rem; padding-bottom: 1rem; }
/* minimal hero: centered title + value intro with the animation beneath */
.layout-stacked .stacked-section-hero .section-inner {
  grid-template-columns: 1fr;
  gap: 1rem;
  justify-items: center;
}
.layout-stacked .stacked-section-hero .hero-content { text-align: center; }
/* h1.product-title needed: product-detail.css matches this element as
   ".product-layout-container .hero-content h1" (0,2,1), which outguns a
   class-only selector no matter the load order */
.product-layout-container .hero-content h1.product-title { font-size: 2.1rem; margin-bottom: 0; }
.layout-stacked .stacked-section-value { padding-top: 0.5rem; }

@media (max-width: 640px) {
  .sd-offline { padding: 1.2rem 1rem; }
  .sd-download-row .sd-download-btn { flex: 1 1 100%; }
}