:root {
  color-scheme: light;
  --paper: #fff9ee;
  --ink: #2c1b14;
  --muted: #665045;
  --accent: #a83a0d;
  --line: #dfcfc0;
  --space: clamp(20px, 5vw, 72px);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
body { margin: 0; }
h1, h2, h3, p, ul, ol { margin: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 5px;
}
.wrap { max-width: 1424px; margin-inline: auto; padding-inline: var(--space); }
.skip-link { position: absolute; top: 12px; left: 12px; padding: 10px; background: var(--paper); transform: translateY(-200%); }
.skip-link:focus { z-index: 1; transform: translateY(0); }

.site-header {
  min-height: 88px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}
.brand { display: inline-flex; gap: 10px; align-items: center; font-size: 22px; font-weight: 760; letter-spacing: -.045em; }
.brand img { border-radius: 25%; }
.site-header nav { display: flex; align-items: center; gap: clamp(16px, 3vw, 38px); font-weight: 590; font-size: 14px; }
.site-header nav a:hover, .site-footer > a:last-child:hover { text-decoration: underline; text-underline-offset: 5px; }
.header-download { min-height: 44px; display: inline-flex; align-items: center; gap: 9px; padding: 0 16px; border: 1px solid #bea797; border-radius: 8px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.header-download:hover { background: #f7e7d7; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(26px, 5vw, 88px);
  align-items: center;
  padding-top: 24px;
  padding-bottom: clamp(36px, 5vw, 70px);
}
.hero h1 {
  font-size: clamp(54px, 7.6vw, 108px);
  font-weight: 780;
  letter-spacing: -.078em;
  line-height: .96;
}
.hero h1 em { font: italic 400 1.06em/.85 Georgia, serif; letter-spacing: -.082em; color: var(--accent); }
.hero-copy p {
  max-width: 39ch;
  margin-top: 24px;
  color: var(--muted);
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.5;
}
.hero-copy .hero-availability {
  margin-top: 12px;
  color: var(--accent);
  font-size: 14px;
}
.store-links { display: flex; flex-wrap: wrap; gap: 10px; }
.hero .store-links { margin-top: 26px; }
.store-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 13px;
  min-width: 146px;
  min-height: 58px;
  padding: 8px 12px;
  border-radius: 9px;
  background: var(--ink);
  color: #fff9ee;
}
.store-link:hover { background: #523022; }
.store-link small, .store-link strong { display: block; }
.store-link small { color: #f0cbb1; font-size: 11px; line-height: 1.25; }
.store-link strong { font-size: 17px; line-height: 1.25; letter-spacing: -.015em; }
.store-arrow { color: #ffbe87; font-size: 19px; }
.hero-art {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: center;
  gap: clamp(10px, 1.4vw, 18px);
  aspect-ratio: 1.17;
  padding-inline: clamp(20px, 4vw, 52px);
  border-radius: 24px;
  background: #d75b26;
}
.hero-card {
  width: 100%;
  height: auto;
  aspect-ratio: 1.58;
  object-fit: cover;
  border-radius: 5% / 8%;
  box-shadow: 0 2px 3px #54230e26, 0 9px 18px #54230e30;
}

.cards {
  padding-block: clamp(32px, 5vw, 64px);
  border-block: 1px solid var(--line);
}
.cards-heading p { margin-top: 10px; color: var(--muted); line-height: 1.5; }
.card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2.1vw, 26px);
  margin-top: 25px;
  padding: 0;
  list-style: none;
}
.card-grid img {
  width: 100%;
  height: auto;
  aspect-ratio: 1.58;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f7e9da;
}
.card-grid span { display: block; margin-top: 7px; font-weight: 690; line-height: 1.3; }
.more-cards { margin-top: 24px; border-top: 1px solid var(--line); }
.more-cards summary {
  width: fit-content;
  padding-block: 14px;
  color: var(--accent);
  cursor: pointer;
  font-weight: 700;
}
.more-cards .card-grid { margin-top: 8px; }

.how { padding-block: clamp(47px, 7vw, 104px); }
.cards h2, .how h2, .faq h2 { font-size: clamp(34px, 5vw, 64px); line-height: .99; font-weight: 760; letter-spacing: -.064em; }
.how ol { list-style: none; counter-reset: step; padding: 0; margin-top: 30px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3.4vw, 44px); }
.how li { counter-increment: step; border-top: 1px solid var(--line); padding-top: 13px; }
.how li::before { content: counter(step, decimal-leading-zero); color: var(--accent); font-weight: 700; font-size: 14px; }
.how h3 { margin-top: 10px; font-size: clamp(18px, 2vw, 25px); letter-spacing: -.035em; }
.how p, .faq p { margin-top: 8px; color: var(--muted); line-height: 1.5; max-width: 37ch; }

.faq { background: #f7e9da; }
.faq-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 24px; padding-block: clamp(36px, 6vw, 76px); }
.faq details { border-bottom: 1px solid #d4bead; }
.faq details:first-child { border-top: 1px solid #d4bead; }
.faq summary { padding: 15px 0; cursor: pointer; font-weight: 650; line-height: 1.35; }
.faq p { padding-bottom: 16px; max-width: 48ch; margin-top: 0; }

.site-footer { padding-block: 24px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.site-footer .brand { font-size: 18px; }
.site-footer > a:last-child { font-size: 14px; }

@media (max-width: 850px) {
  .hero { gap: 24px; }
  .hero h1 { font-size: clamp(47px, 8.3vw, 72px); }
  .store-link { min-width: 133px; gap: 7px; }
}

@media (max-width: 680px) {
  .site-header { flex-wrap: wrap; min-height: 0; padding-block: 16px; gap: 9px 14px; }
  .site-header nav { order: 3; width: 100%; gap: 22px; }
  .site-header nav a { padding-block: 8px; }
  .brand { font-size: 20px; }
  .brand img { width: 34px; height: 34px; }
  .header-download { padding-inline: 11px; }
  .hero { grid-template-columns: 1fr; padding-top: 20px; }
  .hero h1 { font-size: clamp(54px, 12vw, 80px); }
  .hero-copy p { margin-top: 17px; }
  .hero .store-links { margin-top: 20px; }
  .hero-art { aspect-ratio: 1.52; }
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .how ol, .faq-grid { grid-template-columns: 1fr; }
  .how ol { margin-top: 22px; }
}

@media (max-width: 360px) {
  .store-link { min-width: 0; padding-inline: 8px; }
  .store-link strong { font-size: 15px; }
  .store-arrow { font-size: 15px; }
}