:root {
  --ink: #293247;
  --body: #37383c;
  --muted: #68666b;
  --paper: #fffdfb;
  --peach: #fff1e8;
  --accent: #b74722;
  --accent-hover: #943519;
  --line: #e9dfd8;
  --serif: Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--body); font: 20px/1.7 var(--serif); }
img, video { display: block; max-width: 100%; height: auto; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
.masthead { background: #fff6ef; border-top: 4px solid #e8b999; border-bottom: 1px solid var(--line); }
.masthead-inner { max-width: 1120px; margin: auto; padding: 22px 28px; text-align: center; }
.wordmark { color: var(--ink); font: 700 32px/1.2 var(--serif); text-decoration: none; letter-spacing: -.9px; }
.wordmark span { color: var(--accent); font-style: italic; font-weight: 400; }
.article { max-width: 760px; margin: 0 auto; padding: 38px 28px 78px; }
.eyebrow { font: 700 11px/1.4 var(--sans); text-transform: uppercase; letter-spacing: 1.8px; color: var(--accent); margin: 0 0 17px; }
.article h1 { color: var(--ink); font-size: clamp(36px,5vw,52px); line-height: 1.09; letter-spacing: -1.5px; margin: 0 0 22px; font-weight: 700; }
.dek { font: 20px/1.6 var(--sans); color: #5d6069; margin: 0 0 22px; }
.byline { font: 14px/1.5 var(--sans); color: var(--ink); padding-bottom: 23px; margin-bottom: 28px; border-bottom: 1px solid var(--line); }
.story-section { margin: 0 0 44px; }
.story-section h2, .faq h2 { color: var(--ink); font-size: 32px; line-height: 1.23; letter-spacing: -.65px; margin: 44px 0 20px; }
.story-section p { margin: 0 0 22px; }
.hero { width: min(960px,calc(100vw - 48px)); margin: 10px 50% 38px; transform: translateX(-50%); }
.hero img { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: 18px; }
.hero figcaption, .demo-video figcaption, .flavor-image figcaption { font: 13px/1.5 var(--sans); color: var(--muted); padding: 11px 2px 0; }
.demo-video { max-width: 360px; margin: 34px auto; }
.demo-video video { width: 100%; background: #29272a; border-radius: 16px; }
.demo-video figcaption { text-align: center; }
.flavor-image { margin: 32px 0; }
.flavor-image img { width: 100%; height: auto; object-fit: contain; border-radius: 18px; }
.offer { margin: 38px 50%; transform: translateX(-50%); width: min(920px,calc(100vw - 48px)); display: grid; grid-template-columns: minmax(260px,43%) 1fr; gap: 38px; align-items: center; background: var(--peach); border: 1px solid #f1dbcd; border-radius: 26px; padding: 34px 40px; }
.offer-image { width: 100%; max-height: 400px; object-fit: contain; border-radius: 16px; }
.offer-copy h2 { margin: 8px 0 15px; font-size: 37px; }
.offer-copy p { font: 16px/1.6 var(--sans); margin: 0 0 16px; }
.offer-kicker { font-size: 11px!important; text-transform: uppercase; letter-spacing: 1.6px; font-weight: 700!important; color: var(--accent); }
.price strong { font-family: var(--serif); font-size: 38px; color: var(--ink); }
.cta { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; background: var(--accent); color: #fff; text-decoration: none; font: 700 17px/1.3 var(--sans); padding: 16px 30px; border-radius: 999px; text-align: center; box-shadow: 0 4px 12px #b7472214; transition: background .15s ease, box-shadow .15s ease; }
.cta:hover { background: var(--accent-hover); box-shadow: 0 5px 15px #b7472226; }
.closing-cta { text-align: center; margin: 32px 0 4px; }
blockquote { position: relative; margin: 30px 0; padding: 30px 34px; border: 1px solid #e5dce9; border-radius: 18px; background: #f7f2f8; font-size: 25px; line-height: 1.5; color: var(--ink); }
blockquote p { margin: 0 0 14px!important; }
blockquote cite { display: block; font: 600 13px/1.5 var(--sans); color: var(--muted); font-style: normal; }
.faq { border-top: 1px solid var(--line); margin-top: 52px; }
.faq details { border-bottom: 1px solid var(--line); padding: 20px 0; font: 16px/1.65 var(--sans); }
.faq summary { font-weight: 650; color: var(--ink); cursor: pointer; }
.faq summary::marker { color: var(--accent); }
.faq details p { margin: 13px 0 2px; color: #565963; }
.footer { background: #f6efe9; color: #5f5d61; border-top: 1px solid var(--line); padding: 38px max(24px,calc((100vw - 704px)/2)); font: 13px/1.7 var(--sans); }
.footer a { color: var(--ink); text-underline-offset: 4px; }
.footer-nav { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 22px; }
.footer p { max-width: 760px; margin: 0 0 13px; }
@media(max-width:700px) {
  body { font-size: 18px; line-height: 1.72; }
  .masthead-inner { padding: 19px 20px; }
  .wordmark { font-size: 29px; }
  .article { padding: 27px 22px 58px; }
  .article h1 { font-size: 36px; line-height: 1.1; letter-spacing: -1px; }
  .dek { font-size: 18px; line-height: 1.55; }
  .byline { margin-bottom: 24px; padding-bottom: 20px; }
  .story-section h2, .faq h2 { font-size: 28px; }
  .hero { width: calc(100vw - 28px); margin-top: 8px; margin-bottom: 29px; }
  .hero img { border-radius: 13px; }
  .hero figcaption { padding-left: 8px; padding-right: 8px; }
  .offer { width: calc(100vw - 28px); grid-template-columns: 1fr; padding: 24px; gap: 22px; border-radius: 22px; }
  .offer-image { max-height: 290px; }
  .offer-copy { text-align: center; }
  .offer-copy h2 { font-size: 32px; }
  .cta { width: 100%; padding-left: 22px; padding-right: 22px; }
  blockquote { padding: 25px 24px; font-size: 23px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } .cta { transition: none; } }

/* A single quotation, followed by a quiet name and location. */
blockquote cite { display: flex; flex-direction: column; gap: 3px; }
blockquote cite strong { color: var(--ink); font-size: 14px; }
blockquote cite span { font-weight: 400; }