/* THE HERO: static. Headline, the free offer, and one small tired-site gag. Nothing pinned, wiped or animated. */
.hero{position:relative;padding:clamp(2.6rem,6vw,5rem) 0 clamp(2.8rem,5vw,4.2rem);background:var(--paper);overflow:hidden;overflow:clip}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(1.8rem,4vw,4rem);align-items:center}
.hero-copy .label{margin-bottom:0}
.hero-copy h1{margin:1.1rem 0 1.4rem;font-size:clamp(2.7rem,6.4vw,5.6rem);line-height:.96}
.hero-copy .lead{max-width:34em}
.hero-copy .cta{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem}
.hero-copy .fine{margin-top:1.2rem;font-size:.88rem;color:var(--muted);max-width:52ch}
.hero-copy .chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem;list-style:none}
.hero-copy .chips li{border:1.5px solid var(--ink);border-radius:999px;padding:.35rem .85rem;font-size:.82rem;font-weight:600;background:#fff}
.hero-side{display:flex;flex-direction:column;gap:1.6rem;min-width:0}

/* the offer */
.freecard{background:#fff;border:2px solid var(--ink);border-radius:var(--radius);padding:1.5rem;box-shadow:8px 8px 0 var(--ink);transform:rotate(1.2deg)}
.freecard .tag{display:inline-block;background:var(--lime);border:2px solid var(--ink);border-radius:999px;padding:.2rem .7rem;margin-bottom:.9rem;font:700 .74rem/1.2 var(--font);letter-spacing:.12em;text-transform:uppercase}
.freecard h2{font-size:clamp(1.5rem,2.3vw,2.1rem);margin-bottom:.7rem}
.freecard p{font-size:.98rem;color:var(--muted)}
.freecard ul{list-style:none;margin:1rem 0 0;display:grid;gap:.5rem;font-size:.95rem;font-weight:500}
.freecard li{display:flex;gap:.6rem;align-items:center}
.freecard li::before{content:"✓";font-weight:700;background:var(--lime);border:2px solid var(--ink);border-radius:7px;width:1.45em;height:1.45em;display:inline-grid;place-items:center;font-size:.76rem;flex:none}
.fc-link{display:inline-block;margin-top:1.1rem;font-weight:700;font-size:.92rem;text-underline-offset:4px;text-decoration-thickness:2px;text-decoration-color:var(--lime-2)}

/* Exhibit A: a tired site, kept small and still. Desktop only: on a phone the headline does the work. */
.exhibit{margin:0 0 0 -4%;width:86%;transform:rotate(-2.2deg)}
.ex-win{position:relative;background:#fff;border:2px solid var(--ink);border-radius:10px;overflow:visible;box-shadow:5px 5px 0 var(--ink);font:12px/1.35 "Times New Roman",Times,serif;color:#000}
.ex-bar{display:flex;align-items:center;gap:5px;padding:5px 8px;background:#d4d0c8;border-bottom:2px solid var(--ink);border-radius:8px 8px 0 0;font:10px Arial,sans-serif;white-space:nowrap;overflow:hidden}
.ex-bar i{width:8px;height:8px;border-radius:50%;background:#888;flex:none}
.ex-bar span{margin-left:4px;background:#fff;border:1px inset #999;padding:1px 6px;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ex-page{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Crect width='3' height='3' fill='%23e8eefc'/%3E%3Crect x='3' y='3' width='3' height='3' fill='%23e8eefc'/%3E%3C/svg%3E");padding-bottom:8px;border-radius:0 0 8px 8px;overflow:hidden}
.ex-banner{padding:9px 10px;background:linear-gradient(#1a3a9a,#3c67df 55%,#1a3a9a);color:#fff;font:italic 700 17px/1.1 "Times New Roman",serif;text-shadow:1px 1px 0 #000}
.ex-banner b{margin-left:7px;font:700 9px Arial,sans-serif;background:#ff0;color:#c00;padding:1px 4px;text-shadow:none;transform:rotate(-6deg);display:inline-block;vertical-align:middle}
.ex-page p{margin:7px 10px 0}
.ex-uc{margin:7px 0 0;background:repeating-linear-gradient(-45deg,#ff0 0 8px,#fff 8px 16px);border-block:2px dashed #000;text-align:center;font:700 11px Arial,sans-serif;padding:3px 0}
.ex-ctr{margin:7px 10px 0;font:11px Arial,sans-serif}.ex-ctr i{display:inline-block;background:#000;color:#0f0;font:700 11px "Courier New",monospace;padding:1px 3px;margin-left:1px}
.ex-note{position:absolute;z-index:2;font:700 11px/1.2 var(--font);background:#d4161c;color:#fff;padding:5px 9px;border-radius:4px;box-shadow:2px 2px 0 rgba(0,0,0,.35);white-space:nowrap}
.ex-note.n1{right:-14px;top:42%;transform:rotate(3deg)}
.ex-note.n2{left:-10px;bottom:-12px;transform:rotate(-2deg)}
.exhibit figcaption{margin-top:1.3rem;font-size:.82rem;color:var(--muted);max-width:30ch}

@media(max-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .exhibit{display:none}
  .hero-side{max-width:520px}
}
@media(max-width:700px){
  .hero-copy h1{font-size:clamp(2.55rem,13.4vw,3.8rem);margin:.9rem 0 1.1rem}
  .hero-copy .lead{font-size:1.02rem}.hero-copy .cta{margin-top:1.4rem}
  .freecard{transform:none}
}