/* V8 — mobile reading, a tactile first action, and a distinct ground for each chapter. */
:root {
  --almond: #f1e8db;
  --rose-paper: #e9d6d0;
}

/* Section boundaries use the ground and spacing. Rules inside the documents stay. */
.site-header, .section-nav, .hero-bottom, .faq-section,
.materials-collection, .materials-footer, .material-extra-examples,
.guarantee, .site-footer, .footer-bottom {
  border-top: 0;
  border-bottom: 0;
}
.inside-section { background: var(--paper); }
.inside-section .product-demo { margin-bottom: 0; }
.materials-showcase {
  margin-top: 0;
  padding-block: 66px;
  background: var(--blush);
}
.materials-essential { border-right: 0; }
.materials-intro { margin-bottom: 34px; }
.materials-collection { padding-top: 0; }
.materials-footer { margin-top: 30px; padding-top: 0; }
.material-extra-examples { padding-top: 8px; }
.details-section {
  background: var(--almond);
  /* This section uses .wrap itself, so carry its ground to the page edges. */
  box-shadow: 0 0 0 100vmax var(--almond);
  clip-path: inset(0 -100vmax);
}
.kits-section { background: var(--ivory); }
.faq-section { background: var(--rose-paper); }
.faq-section::before {
  background: linear-gradient(#e9d6d0e8, #e9d6d0dc),
    url("envelope-cream-cloth-1600.webp") center / cover no-repeat;
}
.closing-section { background: var(--wine-dark); color: var(--paper); }
.closing-section .eyebrow, .closing-section em,
.closing-layout p:not(.eyebrow), .closing-layout p.closing-price,
.closing-flourish { color: #f3dcd2; }
.closing-flourish svg { stroke: #f3dcd2; }
.closing-section .paper-button:focus-visible { outline-color: var(--paper); }
.site-footer { background: var(--ivory); }

@media (max-width: 899px) {
  html { scroll-padding-top: 20px; }
  .site-header .header-nav, .section-nav { display: none; }
  .site-header { justify-content: center; }
  .hero-actions {
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
  }
  .hero-actions .text-link {
    min-height: 44px;
    font-size: 14px;
  }
  #first-cta {
    width: min(100%, 340px);
    min-height: 68px;
    padding: 17px 30px;
    border: 2px solid var(--wine-dark);
    border-radius: 12px;
    background: linear-gradient(145deg, #f7e1d4 0%, #e8bcad 100%);
    color: var(--wine-dark);
    font: 600 29px/1.15 var(--serif);
    box-shadow: inset 0 2px 0 #fff8ee, 0 5px 0 #753e4b, 0 11px 20px #51203224;
    transform: none;
  }
  #first-cta::after { display: none; }
  #first-cta:focus-visible {
    outline: 3px solid var(--wine-dark);
    outline-offset: 7px;
  }
  #first-cta:active {
    transform: translateY(3px);
    box-shadow: inset 0 1px 2px #753e4b30, 0 2px 0 #753e4b, 0 5px 10px #51203220;
  }
}

@media (max-width: 640px) {
  .hero-format { font-size: 15px; max-width: 34ch; }
  .hero-actions { margin-top: 24px; gap: 12px; }
  /* The introductory statement and its route need a full line each. */
  .hero-bottom { flex-direction: column; gap: 4px; padding-top: 0; font-size: 12px; }
  .hero-bottom > a { font-size: 14px; }
  .hero-copy > .eyebrow { font-size: 10px; letter-spacing: 1.2px; }
  .hero-copy > .eyebrow .little-line { display: none; }
  .inside-section { padding-block: 44px 36px; }
  .inside-section .section-heading > p:last-child { margin-top: 16px; }
  .product-demo .demo-caption, .product-demo .demo-honesty { font-size: 13px; line-height: 1.65; }
  .materials-showcase { padding-block: 40px 38px; }
  .materials-intro { margin-bottom: 24px; }
  .materials-collection { padding-top: 0; }
  .materials-complete { margin-top: 30px; }
  .materials-footer { margin-top: 22px; }
  .material-item figcaption > span, .material-extra-examples figcaption > span {
    font-size: 12px;
    line-height: 1.5;
  }
  .materials-footer .text-link { font-size: 13px; }
  .kit-description { min-height: 0; }
  .faq-list .details-content p + p { margin-top: 12px; }
}

/* The owner's exception applies only to the first button on a mobile screen. */
@media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
  #first-cta { animation: first-cta-breathe 3.6s ease-in-out infinite; }
  #first-cta:hover, #first-cta:focus-visible, #first-cta:active { animation: none; }
}
@keyframes first-cta-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-2px) scale(1.012); }
}
@media (prefers-reduced-motion: reduce) {
  #first-cta { animation: none; transition: none; transform: none; }
  #first-cta:active { transform: none; }
}
@media print {
  .materials-showcase, .details-section, .faq-section, .closing-section {
    background: white; color: var(--ink); box-shadow: none; clip-path: none;
  }
  .closing-section .eyebrow, .closing-section em,
  .closing-layout p, .closing-layout .closing-price { color: var(--ink); }
}