.icon {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
  vertical-align: -.2em;
}

.brand-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: #f5e5cf;
  color: #9a4326;
  font-size: 24px;
}

.footer-inner .brand-icon { width: 38px; height: 38px; font-size: 19px; }
.nav-buy .icon { margin-left: 8px; }
.button { background: #b44324; }
.hero-copy .hero-note { font-size: 13px; margin: 12px 0 0; }
.hero-sample {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 18px;
  padding-block: 10px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.hero-art { overflow: clip; overflow-clip-margin: 16px; }
.hero-art .sun { width: 64px; height: 64px; top: 30px; }
.ribbon .container > span, .included span, .format-note {
  display: flex;
  align-items: center;
  gap: 8px;
}
.topic-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 16px;
  border-radius: 11px;
  background: #ffffff9c;
  font-size: 20px;
}
.topics h3 { min-height: 0; }
.page-preview span { align-items: center; gap: 5px; }
.quote-art .quote-heart { width: 42px; height: 42px; color: #b44324; }
.quote-art .little-star { width: 52px; height: 52px; }
.format-note { justify-content: center; }
.close-dialog { display: grid; place-items: center; width: 44px; height: 44px; font-size: 17px; }
.mobile-buy { display: none; }

@media (min-width: 701px) and (max-width: 950px) {
  .hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .hero-art .book { width: min(260px, 84%); }
  .hero-sample { display: flex; width: fit-content; margin-left: 0; }
  .offer { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .offer h2 { font-size: 39px; }
  .price-card { padding-inline: 25px; }
}

@media (max-width: 700px) {
  body { padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
  .container { width: calc(100% - 36px); }
  header { height: 72px; }
  .brand-icon { width: 38px; height: 38px; font-size: 20px; }
  .nav-buy { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; }
  .hero { min-height: auto; padding-block: 30px 24px; gap: 10px; }
  .eyebrow { font-size: 10px; letter-spacing: .08em; }
  .hero h1 { font-size: clamp(34px, 9.5vw, 52px); margin: 14px 0 19px; }
  .hero-copy > p { font-size: 16px; line-height: 1.55; margin-bottom: 18px; }
  .hero-copy .button { font-size: 15px; padding: 14px 16px; min-height: 51px; }
  .hero-sample { margin: 10px 0 0; min-height: 44px; }
  .hero-copy .hero-note { margin: 0; text-align: left; }
  .hero-art { min-height: 0; padding-block: 20px 24px; }
  .hero-art:before { inset: 30px 10px 18px; }
  .hero-art .sun { width: 37px; height: 37px; top: 25px; }
  .book { width: clamp(158px, 50vw, 226px); transform: rotate(-5deg); }
  .ribbon > .container { gap: 13px; font-size: 12px; line-height: 1.3; }
  .intro, .together, .faq { padding-block: 42px; }
  .section-heading { margin-bottom: 22px; }
  .section-heading > p { margin-top: 13px; font-size: 15px; }
  h2, .offer h2 { font-size: clamp(29px, 8vw, 39px); }
  .topics { grid-template-columns: 1fr; gap: 9px; }
  .topics article, .topics article:last-child {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 4px 12px;
    grid-column: auto;
    padding: 13px;
  }
  .topic-icon { grid-row: span 2; margin: 0; }
  .topics h3 { font-size: 19px; }
  .topics p { font-size: 14px; line-height: 1.45; margin: 0; }
  .preview { padding-block: 42px; }
  .pages { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: none; }
  .page-preview span { font-size: 11px; min-height: 44px; padding-top: 5px; }
  .page-preview .icon { width: 14px; height: 14px; }
  .preview-foot { font-size: 13px; margin-top: 15px; }
  .together { gap: 24px; }
  .quote-art { display: none; }
  .steps { margin-top: 20px; }
  .steps li { gap: 12px; margin-bottom: 16px; }
  .steps li:last-child { margin-bottom: 0; }
  .steps p, .offer > div > p { font-size: 15px; }
  .offer-section { padding-block: 42px; }
  .offer { gap: 24px; }
  .included { font-size: 14px; }
  .price-card { padding: 24px 18px; }
  .price-card .button { min-height: 52px; font-size: 16px; }
  .questions summary, .questions p { font-size: 15px; }
  .questions summary { min-height: 44px; }
  .questions details { padding-block: 8px; }
  .mobile-buy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: fixed;
    z-index: 5;
    inset: auto 0 0;
    padding: 10px max(18px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
    background: #fcf9f1;
    border-top: 1px solid #d8dfd3;
    box-shadow: 0 -4px 24px #173f4518;
  }
  .mobile-buy strong, .mobile-buy small { display: block; line-height: 1.25; }
  .mobile-buy small { color: #52625c; font-size: 12px; margin-top: 3px; }
  .mobile-buy .button { min-height: 44px; padding: 10px 14px; gap: 10px; }
  .mobile-buy[hidden] { display: none; }
}

@media (hover: none) {
  .page-preview:hover, .button:hover { transform: none; }
}