/* ============================================================
   Dee Get Busy: Indonesia - digital product page
   Rides on styles.css tokens. No new fonts, no new colors.
   ============================================================ */

.book-hero {
  padding: calc(var(--s-7) + 40px) 0 var(--s-7);
  border-bottom: 1px solid var(--hairline);
}
.book-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
  gap: var(--s-7);
  align-items: start;
}
.book-hero__copy { max-width: 60ch; }
.book-hero .h1 { margin-bottom: var(--s-3); }
.book-hero__lede { margin-bottom: var(--s-3); }
.book-hero__answer { margin-bottom: var(--s-4); }

/* the buy card */
.buycard {
  border: 1px solid var(--hairline-strong);
  background: var(--pewter);
  padding: var(--s-4);
  position: sticky;
  top: 112px;
}
.buycard__cover {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--hairline);
  margin-bottom: var(--s-3);
}
.buycard__price {
  font-family: var(--display);
  font-size: 48px;
  font-weight: 400;
  line-height: 1;
  color: var(--bone);
  margin-bottom: 4px;
}
.buycard__price-note {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: var(--s-3);
}
.buycard .btn { width: 100%; justify-content: center; text-align: center; }
.buycard__facts {
  list-style: none;
  margin: var(--s-3) 0 0;
  padding: var(--s-3) 0 0;
  border-top: 1px solid var(--hairline);
  display: grid;
  gap: 10px;
}
.buycard__facts li {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.buycard__facts li::before { content: "/"; color: var(--teal); }
.buycard__status {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--hairline);
  font-size: 13px;
  line-height: 1.5;
  color: var(--steel);
}

/* the three-part module explainer */
.module-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
  margin: var(--s-5) 0;
}
.module {
  border: 1px solid var(--hairline);
  padding: var(--s-3);
  background: rgba(244, 241, 236, 0.02);
}
.module__n {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--teal);
  display: block;
  margin-bottom: var(--s-2);
}
.module__t {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 400;
  margin-bottom: 10px;
  color: var(--bone);
}
.module__d { font-size: 15px; line-height: 1.6; color: var(--steel); }

/* look inside */
.spreads {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-3);
  margin: var(--s-5) 0 var(--s-3);
}
.spreads figure { margin: 0; }
.spreads img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--hairline);
  background: var(--ink);
}
.spreads figcaption {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel);
  margin-top: 10px;
  line-height: 1.5;
}

/* the contents tease: the book's own contents page, plus the same thing as text */
.section--toc { border-top: 1px solid var(--hairline); }
.section--toc .h2 { margin-bottom: var(--s-3); }
.section--toc > .wrap > .body { max-width: 68ch; }
.toc-wrap {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: var(--s-6);
  align-items: start;
  margin: var(--s-5) 0 var(--s-4);
}
.toc-proof { margin: 0; position: sticky; top: 112px; }
.toc-proof img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--hairline);
  background: var(--ink);
}
.toc-proof figcaption {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel);
  margin-top: 10px;
  line-height: 1.6;
}
.toc-cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4) var(--s-5);
}
@media (max-width: 1380px) {
  .toc-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.toc-group { break-inside: avoid; }
.toc-group__head {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
  gap: var(--s-2);
}
.toc-group__count { color: var(--steel); }
.toc-group ol { list-style: none; margin: 0; padding: 0; }
.toc-group li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--bone);
  padding: 7px 0;
  border-bottom: 1px solid rgba(244, 241, 236, 0.06);
}
.toc-group li .toc-dots {
  flex: 1 1 auto;
  border-bottom: 1px dotted rgba(244, 241, 236, 0.22);
  transform: translateY(-4px);
  min-width: 12px;
}
.toc-group li .toc-p {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--steel);
  flex: 0 0 auto;
}
.toc-note {
  display: block;
  font-size: 13px;
  line-height: 1.5;
  color: var(--steel);
  margin-top: 3px;
}
.toc-group li.has-note { flex-wrap: wrap; }
.toc-group li.has-note .toc-note { flex: 1 0 100%; }

/* locations */
.regions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5) var(--s-6);
  margin: var(--s-4) 0 var(--s-5);
}
.region__head {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--s-2);
  display: flex;
  justify-content: space-between;
  gap: var(--s-2);
}
.region__count { color: var(--steel); }
.region ol { list-style: none; margin: 0; padding: 0; }
.region li {
  font-size: 16px;
  line-height: 1.5;
  color: var(--bone);
  padding: 9px 0;
  border-bottom: 1px solid rgba(244, 241, 236, 0.06);
}

/* honest two-column fit block */
.fit {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
  margin: var(--s-4) 0 var(--s-5);
}
.fit__col { border-top: 2px solid var(--hairline-strong); padding-top: var(--s-3); }
.fit__col--no { border-top-color: var(--crimson); }
.fit__t {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: var(--s-2);
}
.fit ul { list-style: none; margin: 0; padding: 0; }
.fit li {
  font-size: 16px;
  line-height: 1.6;
  color: var(--bone);
  padding: 8px 0 8px 20px;
  position: relative;
}
.fit li::before {
  content: "/";
  position: absolute;
  left: 0;
  color: var(--steel);
}

/* faq */
.bookfaq { margin: var(--s-4) 0 var(--s-5); }
.bookfaq__item { padding: var(--s-3) 0; border-bottom: 1px solid var(--hairline); }
.bookfaq__q {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 400;
  color: var(--bone);
  margin-bottom: 10px;
}
.bookfaq__a { font-size: 16px; line-height: 1.65; color: var(--steel); max-width: 64ch; }

/* byline */
.byline {
  border-top: 1px solid var(--hairline);
  padding-top: var(--s-4);
  margin-top: var(--s-5);
}
.byline__meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel);
  line-height: 1.8;
  margin-top: var(--s-2);
}

/* mobile safety baseline */
@media (max-width: 1100px) {
  .book-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .buycard { position: static; max-width: 460px; }
  .module-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spreads { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toc-wrap { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .toc-proof { max-width: 360px; position: static; }
}
@media (max-width: 820px) {
  html, body { overflow-x: clip; max-width: 100%; }
  img, video, svg, canvas { max-width: 100%; }
  /* the mobile nav wraps to two rows, so the hero needs real clearance under it */
  .book-hero { padding: calc(var(--s-6) + 72px) 0 var(--s-6); }
  .book-hero .wrap,
  .section .wrap {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
  }
  .module-row,
  .regions,
  .toc-cols,
  .fit { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .toc-proof { max-width: none; }
  .buycard { max-width: none; }
  .buycard__price { font-size: 40px; }
  h1, h2, h3, .h1, .h2, .h3, .lede, .body, .bookfaq__q, .module__t {
    overflow-wrap: break-word;
  }
  /* headlines wrap on whole words, never mid-word */
  .book-hero .h1, .h2, .bookfaq__q, .module__t { hyphens: none; }
  .body, .lede, .bookfaq__a, .module__d { hyphens: auto; }
}
@media (max-width: 420px) {
  .spreads { grid-template-columns: minmax(0, 1fr); }
}