/* Shared layout for the three sales page examples. Each page sets its own colors and fonts. */
html { color-scheme: var(--scheme, light); -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body-font, system-ui, sans-serif); line-height: 1.6; }
a, button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.wrap { max-width: 46rem; margin: 0 auto; padding: 0 1rem; }
.top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem 0; flex-wrap: wrap; }
.brand { font-family: var(--head-font, inherit); font-weight: 700; }
.badge { display: inline-block; border: 2px solid currentColor; border-radius: 999px; padding: .1rem .7rem; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.hero { padding: 2rem 0 2.5rem; }
.offer-name { font-weight: 700; color: var(--accent-text); text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; margin: 0 0 .6rem; }
h1 { font-family: var(--head-font, inherit); font-size: clamp(2rem, 7vw, 3rem); line-height: 1.12; margin: 0 0 1rem; overflow-wrap: break-word; }
.sub { font-size: 1.12rem; color: var(--mute); margin: 0; }
section { padding: 2.25rem 0; border-top: 1px solid var(--line); }
h2 { font-family: var(--head-font, inherit); font-size: clamp(1.35rem, 4.5vw, 1.9rem); line-height: 1.2; margin: 0 0 1rem; }
ul.inside { margin: 0; padding-left: 1.2rem; display: grid; gap: .5rem; }
.bonuses { display: grid; gap: 1rem; }
.bonus { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius, .6rem); padding: 1.1rem 1.2rem; }
.bonus h3 { margin: 0 0 .35rem; font-size: 1.1rem; }
.bonus p { margin: 0; }
.why { color: var(--mute); }
.buy { background: var(--card); border: 2px solid var(--accent); border-radius: var(--radius, .6rem); padding: 1.5rem 1.2rem; text-align: center; }
.price { font-size: 2rem; font-weight: 800; margin: 0 0 1rem; font-family: var(--head-font, inherit); }
.cta { display: inline-block; font-weight: 700; padding: .95rem 1.6rem; border-radius: var(--radius, .6rem); background: var(--accent); color: var(--on-accent); text-decoration: none; transition: background-color .15s ease; }
.cta:hover { background: var(--accent-hover); }
.example-line { font-size: .85rem; color: var(--mute); margin: .6rem 0 0; }
.guarantee { font-weight: 700; margin: 1.25rem 0 0; }
.proof { border: 3px dashed var(--line-strong); border-radius: var(--radius, .6rem); padding: 1.6rem 1rem; text-align: center; font-weight: 700; color: var(--mute); }
footer { padding: 2rem 0 3rem; color: var(--mute); font-size: .9rem; border-top: 1px solid var(--line); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}