.sales main { max-width: 46rem; padding-top: .75rem; }
.sales section { margin: 0 0 1.25rem; }
.sales h2 { font-size: clamp(1.5rem, 4.2vw, 2rem); margin: 0 0 .75rem; }
.sales h3 { margin: 0 0 .3rem; }
.sales .panel { padding: 1.9rem clamp(1.1rem, 5vw, 2.4rem); }

/* Hero: the evening-teal band with the lamp-amber button */
.hero { background: var(--teal); color: var(--on-teal); border-radius: 28px; padding: clamp(1.75rem, 6vw, 3.25rem) clamp(1.2rem, 5vw, 2.75rem); box-shadow: var(--shelf); margin-bottom: 2rem !important; }
.hero .forwho { margin: 0 0 .9rem; font: 700 .82rem/1.45 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--amber); }
.hero h1 { color: #fff; font-size: clamp(2.05rem, 7vw, 3.3rem); line-height: 1.05; margin: 0 0 1rem; }
.hero .sub { font-size: clamp(1.08rem, 2.6vw, 1.25rem); line-height: 1.55; margin: 0 0 1.6rem; max-width: 36rem; }
.hero .under, .last .under { margin: .9rem 0 0; font-size: .95rem; }
.hero :focus-visible, .last :focus-visible { outline-color: var(--amber); }
.buy { margin: 0; }
.btn.big { font-size: clamp(1.1rem, 3.4vw, 1.3rem); padding: .95rem 2.1rem; }
.hero .btn, .last .btn { background: var(--amber); border-color: var(--amber); color: var(--ink); }
.hero .btn:hover, .last .btn:hover { background: #FFC85A; border-color: #FFC85A; color: var(--ink); }

.lede { font-family: var(--head); font-weight: 700; font-size: 1.3rem; line-height: 1.3; letter-spacing: -.02em; color: var(--teal); }

/* The three steps */
.steps { list-style: none; margin: 1.25rem 0; padding: 0; display: grid; gap: .8rem; counter-reset: step; }
.steps li { margin: 0; counter-increment: step; background: var(--bg); border-radius: 22px; padding: 1rem 1.2rem 1rem 4.4rem; position: relative; }
.steps li::before { content: counter(step); position: absolute; left: 1rem; top: 1rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--amber); color: var(--ink);
  display: grid; place-items: center; font: 700 1.2rem/1 var(--head); }
.steps p { margin: 0; }
.asks { list-style: none; margin: .6rem 0; padding: 0; display: grid; gap: .45rem; }
.steps .asks li { margin: 0; counter-increment: none; background: #fff; border-radius: 14px 14px 14px 4px; padding: .55rem .85rem; font-style: italic; }
.steps .asks li::before { content: none; }

/* What you get, and the for / not for lists */
.ticks, .crosses { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: .7rem; }
.ticks li, .crosses li { margin: 0; padding-left: 2rem; position: relative; }
.ticks li::before, .crosses li::before { position: absolute; left: 0; top: .12rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; display: grid; place-items: center; font: 700 .85rem/1 var(--body); }
.ticks li::before { content: "\2713"; background: var(--teal); color: #fff; }
.crosses li::before { content: "\2715"; background: var(--danger-soft); color: var(--danger-ink); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.two .panel { margin: 0; }

/* Why it is different */
.why { display: grid; gap: 1.1rem; margin: 0; }
.why dt { font-family: var(--head); font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; color: var(--teal); }
.why dd { margin: .2rem 0 0; }

/* The sample */
.sample-note { font-weight: 700; }
.sample .paper { position: relative; margin-top: 2rem; }
/* What each letter is, as a label stuck on the top edge of its airmail border (David, 8 Oct 2026). */
.paper-label { position: absolute; top: -.8rem; left: clamp(.9rem, 4vw, 2.25rem); margin: 0; padding: .2rem .9rem; border-radius: 999px;
  background: var(--teal); color: #fff; font: 700 .8rem/1.5 var(--body); letter-spacing: .06em; text-transform: uppercase; }
.sample .letter-body { max-width: none; }
.sample .letter-body h3 { font-family: var(--letter); font-weight: 400; font-style: italic; font-size: .95rem; letter-spacing: 0; color: var(--muted); margin: 1.2em 0 .15em; }
.sample .letter-body h3:first-child { margin-top: 0; }

.sample > .buy { margin-top: 1.75rem; }
.sample > .under, .panel > .under { margin: .7rem 0 0; font-size: .95rem; color: var(--muted); }
.panel > .buy { margin-top: 1.5rem; }
.more { margin-top: 1.2em; }
.more summary { cursor: pointer; font: 700 1rem/1.4 var(--body); color: var(--teal); text-decoration: underline; padding: .5rem 0; }
.more[open] summary { margin-bottom: 1em; }

/* This is what you finish with: the funnel at a glance, straight under the headline */
.pack-note { margin: 0; }
.pack .paper { position: relative; margin-top: 2rem; }
.pack .kind { margin: 1.3rem 0 .4rem; font: 700 .78rem/1.4 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pack .kind:first-child { margin-top: .3rem; }
.pack .card-t { margin: 0; font: 700 1.05rem/1.3 var(--head); letter-spacing: -.01em; color: var(--teal); }
.pack-yours { margin: 1.25rem 0 0; }
.letters { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.letters li { margin: 0; display: grid; grid-template-columns: 3.6rem 1fr; column-gap: .8rem; align-items: baseline; background: var(--bg); border-radius: 14px; padding: .65rem .9rem; }
.letters .day { grid-row: span 2; align-self: center; text-align: center; font: 700 .78rem/1 var(--body); letter-spacing: .05em; text-transform: uppercase; color: #fff; background: var(--teal); border-radius: 999px; padding: .4rem 0; }
.letters .subj { font-weight: 700; }
.letters .prev { color: var(--muted); font-size: .93rem; }
.pack-more { margin: .6rem 0 0; }

/* The buy bar on phones: shown by the script once the first button has gone off the top, and put away whenever
   another buy button is on screen. Never shown without JavaScript, or on a wide screen. */
.stick { display: none; }

/* Price and guarantee */
.price { text-align: center; background: var(--amber-soft); color: var(--flag-ink); }
.price h2 { color: var(--flag-ink); }
.price .amount { font: 700 clamp(3rem, 12vw, 4.5rem)/1 var(--head); letter-spacing: -.04em; color: var(--teal); margin: 0 0 .25rem; }
.price .buy { margin-top: 1.25rem; }
.guarantee { border: 3px solid var(--amber); }

/* Questions */
.faq { margin: 0; }
.faq dt { font-weight: 700; color: var(--teal); padding-top: 1rem; }
.faq dt:first-child { padding-top: 0; }
.faq dd { margin: .2rem 0 0; padding-bottom: 1rem; border-bottom: 2px dashed var(--teal-soft); }
.faq dd:last-child { border-bottom: 0; padding-bottom: 0; }

/* About, and the last call */
.about .who { align-items: flex-start; }
.about .avatar { width: 84px; height: 84px; font-size: 1.6rem; }
.about h2 { font-size: 1.35rem; margin: 0 0 .3rem; }
.about p:last-child { margin: 0; }
.last { background: var(--teal); color: var(--on-teal); border-radius: 28px; padding: clamp(1.75rem, 6vw, 2.75rem) clamp(1.2rem, 5vw, 2.4rem); text-align: center; }
.last h2 { color: #fff; margin-bottom: 1.4rem; }

.foot { max-width: 46rem; margin: 0 auto; padding: 0 1.25rem 3rem; font-size: .92rem; color: var(--muted); text-align: center; }
.foot ul { list-style: none; margin: 0 0 .75rem; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem 1.25rem; justify-content: center; }
.foot li { margin: 0; }
.foot p { margin: 0; }

/* The advertising question (only with a Meta pixel configured). Both answers look the same on purpose. */
.ads-ask { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--sheet); border-top: 3px solid var(--teal); padding: .9rem 1.25rem; box-shadow: 0 -6px 24px rgba(23, 48, 46, .18); }
.ads-ask[hidden], .foot [hidden] { display: none; }
.ads-in { max-width: 46rem; margin: 0 auto; display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; }
.ads-in p { margin: 0; flex: 1 1 18rem; font-size: .95rem; }
.ads-btns { display: flex; gap: .6rem; }
.foot .linklike { font-weight: 400; text-decoration: underline; padding: 0; color: inherit; }

@media (max-width: 40rem) {
  .stick:not([hidden]) { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; background: var(--teal); padding: .6rem .9rem calc(.6rem + env(safe-area-inset-bottom)); box-shadow: 0 -6px 24px rgba(23, 48, 46, .25); }
  .stick .btn { display: block; width: 100%; background: var(--amber); border-color: var(--amber); color: var(--ink); font-size: 1.05rem; padding: .75rem 1rem; }
  .ads-ask:not([hidden]) ~ .stick, .stick:has(~ .ads-ask:not([hidden])) { display: none; }
  .ads-btns { width: 100%; }
  .ads-btns .btn { flex: 1; }
  .two { grid-template-columns: 1fr; }
  .btn.big { display: block; width: 100%; padding-left: 1rem; padding-right: 1rem; }
  .steps li { padding: 4.1rem 1.1rem 1rem; }
  .about .who { flex-direction: column; }
}