/* PAGE CONTAINER - 4 column grid */
.page {
  display: grid;
  grid-template-columns: 1.5fr 1.5fr 1.5fr 1fr;
  grid-template-rows: auto;
  gap: 1px;
  max-width: 900px;
  margin: 0 auto;
  border: 2px solid var(--ink-dark);
  box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.3);
  background-color: var(--ink-dark);
}

/* SHARED BLOCK STYLES */
.block {
  background-color: var(--paper);
  padding: 6px;
  font-family: var(--font-body);
  font-size: 10px;
  line-height: 1.4;
  color: var(--ink-body);
  display: flex;
  flex-direction: column;
}

.block h2 {
  font-family: var(--font-headline);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 4px 0;
  color: var(--ink-dark);
}

.block p {
  margin: 3px 0;
  font-size: 10px;
  line-height: 1.4;
}

.block em {
  font-size: 9px;
  color: var(--ink-light);
}

/* BLOCK 1 - FULL WIDTH BANNER */
#block-1 {
  grid-column: 1 / 5;
  grid-row: 1;
  text-align: center;
  font-family: var(--font-condensed);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 4px;
  padding: 6px 10px;
  background-color: var(--ink-dark);
  color: var(--paper);
}

/* BLOCK 2 - LEFT OFFER COLUMN */
#block-2 {
  grid-column: 1;
  grid-row: 2 / 6;
  text-align: center;
}

.you-free {
  font-family: var(--font-headline);
  font-size: 20px;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--ink-dark);
}

/* BLOCK 3 - SCREAMER HEADLINE */
#block-3 {
  grid-column: 2 / 5;
  grid-row: 2 / 4;
  text-align: center;
  padding: 10px;
}

#block-3 h1 {
  font-family: var(--font-headline);
  font-size: 16px;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.2;
  margin: 0;
  color: var(--ink-dark);
}

.skinny {
  font-family: var(--font-condensed);
  font-size: 22px;
  font-weight: 400;
}

.fat {
  font-family: var(--font-headline);
  font-size: 28px;
  font-weight: 900;
}

.ages {
  font-family: var(--font-condensed);
  font-size: 14px;
  font-weight: 700;
}

.build-line {
  font-family: var(--font-headline);
  font-size: 20px;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.1;
  margin: 6px 0;
  color: var(--ink-dark);
}

/* BLOCK 4 - HERO IMAGE */
#block-4 {
  grid-column: 3 / 5;
  grid-row: 4 / 7;
}

#block-4 .illustration-box {
  min-height: 200px;
  flex-grow: 1;
}

/* BLOCK 5 - BEFORE/AFTER TESTIMONIALS */
#block-5 {
  grid-column: 1;
  grid-row: 6 / 9;
}

/* BLOCK 6 - STAT BOX */
#block-6 {
  grid-column: 2;
  grid-row: 4;
  text-align: center;
}

.stat-number {
  font-family: var(--font-headline);
  font-size: 28px;
  font-weight: 900;
  color: var(--ink-dark);
  margin: 0;
}

.stat-label {
  font-family: var(--font-condensed);
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ink-light);
  margin: 0;
}

/* BLOCK 7 - BODY COPY */
#block-7 {
  grid-column: 2;
  grid-row: 5 / 7;
}

/* BLOCK 8 - SHOUT TEXT */
#block-8 {
  grid-column: 2;
  grid-row: 7;
}

/* BLOCK 9 - INSET IMAGE */
#block-9 {
  grid-column: 1;
  grid-row: 9 / 11;
}

#block-9 .illustration-box {
  flex-grow: 1;
}

/* BLOCK 10 */
#block-10 {
  grid-column: 1;
  grid-row: 11;
}

/* BLOCK 11 */
#block-11 {
  grid-column: 1;
  grid-row: 12;
}

/* BLOCK 12 */
#block-12 {
  grid-column: 2;
  grid-row: 8;
}

/* BLOCK 13 */
#block-13 {
  grid-column: 2;
  grid-row: 9;
}

/* BLOCK 14 */
#block-14 {
  grid-column: 2;
  grid-row: 10;
}

/* BLOCK 15 */
#block-15 {
  grid-column: 2;
  grid-row: 11;
}

/* BLOCK 16 - PHOTO */
#block-16 {
  grid-column: 2;
  grid-row: 12;
}

#block-16 .illustration-box {
  flex-grow: 1;
}

/* BLOCK 17 - TRANSFORMATION PITCH */
#block-17 {
  grid-column: 3;
  grid-row: 7 / 9;
}

/* BLOCK 18 - THE REVEAL */
#block-18 {
  grid-column: 3;
  grid-row: 9 / 11;
  text-align: center;
}

.shout {
  font-family: var(--font-condensed);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 6px 0;
  color: var(--ink-dark);
}

.reveal {
  font-family: var(--font-headline);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  margin: 8px 0 4px 0;
  color: var(--ink-dark);
}

.name-reveal {
  font-family: var(--font-headline);
  font-size: 32px;
  font-weight: 900;
  letter-spacing: 10px;
  text-transform: uppercase;
  margin: 0;
  color: var(--ink-dark);
}

/* BLOCK 19 - NARROW RIGHT STRIP */
#block-19 {
  grid-column: 4;
  grid-row: 7 / 11;
  text-align: center;
}

/* BLOCK 20 - ORDER FORM */
#block-20 {
  grid-column: 2 / 4;
  grid-row: 13;
}

/* BLOCK 21 - EDITOR NOTE */
#block-21 {
  grid-column: 1;
  grid-row: 13;
}

/* BLOCK 28 - FREE BOX */
#block-28 {
  grid-column: 4;
  grid-row: 11 / 14;
  text-align: center;
}

/* BLOCK 22 - FOOTER */
#block-22 {
  grid-column: 1 / 5;
  grid-row: 14;
  background-color: var(--paper-dark);
  border-top: 4px double var(--ink-dark);
  padding: 8px 15px;
  font-family: var(--font-condensed);
  font-size: 7px;
  line-height: 1.3;
  text-align: justify;
  color: var(--ink-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* RESPONSIVE - TABLET */
@media screen and (max-width: 899px) {
  .page {
    grid-template-columns: 1fr 1fr;
  }

  #block-1 { grid-column: 1 / 3; grid-row: auto; }
  #block-2 { grid-column: 1; grid-row: auto; }
  #block-3 { grid-column: 2; grid-row: auto; }
  #block-4 { grid-column: 1 / 3; grid-row: auto; }
  #block-5 { grid-column: 1; grid-row: auto; }
  #block-6 { grid-column: 2; grid-row: auto; }
  #block-7 { grid-column: 1; grid-row: auto; }
  #block-8 { grid-column: 2; grid-row: auto; }
  #block-9 { grid-column: 1; grid-row: auto; }
  #block-10 { grid-column: 2; grid-row: auto; }
  #block-11 { grid-column: 1; grid-row: auto; }
  #block-12 { grid-column: 2; grid-row: auto; }
  #block-13 { grid-column: 1; grid-row: auto; }
  #block-14 { grid-column: 2; grid-row: auto; }
  #block-15 { grid-column: 1; grid-row: auto; }
  #block-16 { grid-column: 2; grid-row: auto; }
  #block-17 { grid-column: 1; grid-row: auto; }
  #block-18 { grid-column: 1 / 3; grid-row: auto; }
  #block-19 { grid-column: 1; grid-row: auto; }
  #block-20 { grid-column: 1 / 3; grid-row: auto; }
  #block-21 { grid-column: 1; grid-row: auto; }
  #block-28 { grid-column: 2; grid-row: auto; }
  #block-22 { grid-column: 1 / 3; grid-row: auto; }
}

/* RESPONSIVE - PHONE */
@media screen and (max-width: 599px) {
  .page {
    grid-template-columns: 1fr;
  }

  #block-1, #block-2, #block-3, #block-4,
  #block-5, #block-6, #block-7, #block-8,
  #block-9, #block-10, #block-11, #block-12,
  #block-13, #block-14, #block-15, #block-16,
  #block-17, #block-18, #block-19, #block-20,
  #block-21, #block-22, #block-28 {
    grid-column: 1;
    grid-row: auto;
  }

  .block p {
    font-size: 13px;
  }

  .block h2 {
    font-size: 16px;
  }

  .shout {
    font-size: 16px;
  }

  .name-reveal {
    font-size: 24px;
    letter-spacing: 6px;
  }

  #block-3 h1 {
    font-size: 14px;
  }

  .skinny { font-size: 18px; }
  .fat { font-size: 22px; }
  .build-line { font-size: 16px; }
}