/* Poop Pen landing page. Mobile first. Palette and type tokens up top. */
@font-face {
  font-family: "Nunito";
  src: url("../assets/fonts/nunito-latin.woff2") format("woff2"), url("../assets/fonts/Nunito-VariableFont_wght.ttf") format("truetype");
  font-weight: 200 1000;
  font-display: swap;
}
:root {
  --cream: #FFF8EE;
  --cream-2: #F7EBD8;
  --choc: #3B2416;
  --choc-2: #2A170D;
  --caramel: #C8823A;
  --toffee: #8A5A2B;
  --sun: #FFD23F;
  --amz-1: #FFD814;
  --amz-2: #FFA41C;
  --ink: #241409;
  --muted: #6B4F3A;
  --r-lg: 28px;
  --r-md: 20px;
  --shadow: 0 18px 40px -18px rgba(59, 36, 22, .45), 0 4px 12px -4px rgba(59, 36, 22, .15);
  --font: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sticky-h: 76px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--cream); color: var(--ink);
  font: 500 17px/1.55 var(--font); overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
/* subtle grain over the whole page, pure CSS (inline SVG noise) */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: .07; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.05; letter-spacing: -.02em; font-weight: 900; }
p { margin: 0; }
.wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 760px; }
.center { text-align: center; }
.section { padding: 76px 0; }
.section-sm { padding: 24px 0 8px; }
.h2 { font-size: clamp(34px, 9vw, 58px); color: var(--choc); }
.h3 { font-size: 26px; color: var(--choc); }
.lead { font-size: 19px; color: var(--muted); max-width: 560px; margin: 14px auto 0; }
.body { font-size: 18px; color: var(--muted); margin-top: 14px; }
.small { font-size: 13px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--sun); padding: 10px 14px; border-radius: 10px; z-index: 200; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; border-radius: 8px; }

.draft-tag {
  display: inline-block; vertical-align: middle; background: var(--sun); color: #2a1a00;
  font: 900 10px/1 var(--font); letter-spacing: .08em; padding: 4px 6px; border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.12); text-transform: uppercase; white-space: nowrap;
}

/* ---------- Promo + top bar ---------- */
.promo {
  background: var(--sun); color: var(--choc); text-align: center;
  font-weight: 800; font-size: 13px; letter-spacing: .02em; padding: 7px 12px;
}
.topbar { background: var(--choc-2); color: var(--cream); position: relative; z-index: 5; }
.topbar-in { display: flex; align-items: center; justify-content: space-between; height: 56px; }
.topbar-link { font-weight: 800; font-size: 14px; text-decoration: none; opacity: .92; padding: 12px 0; min-height: 48px; display: inline-flex; align-items: center; gap: 6px; }
.topbar-link:hover { opacity: 1; color: var(--sun); }

/* ---------- Hero ---------- */
.hero, .final {
  position: relative; overflow: hidden; color: var(--cream);
  background:
    radial-gradient(120% 80% at 80% 10%, rgba(200,130,58,.55), transparent 60%),
    radial-gradient(90% 70% at 0% 100%, rgba(138,90,43,.6), transparent 60%),
    linear-gradient(160deg, var(--choc-2) 0%, var(--choc) 45%, #6b4020 100%);
}
.hero-glow {
  position: absolute; width: 520px; height: 520px; right: -140px; top: 40px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,210,63,.35), rgba(255,164,28,.12) 45%, transparent 70%);
  filter: blur(10px); pointer-events: none;
}
.hero-grid {
  position: relative; display: grid; grid-template-columns: 1fr 34%; gap: 8px 12px;
  padding-top: 28px; padding-bottom: 40px;
}
.hero-copy { align-self: center; }
.chip {
  display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 7px 12px; border-radius: 999px; color: var(--sun);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.hero-h { font-size: clamp(40px, 11.5vw, 82px); margin-top: 14px; color: #fff; text-shadow: 0 6px 30px rgba(0,0,0,.25); }
.hero-sub { font-size: clamp(17px, 4.6vw, 22px); margin-top: 14px; color: rgba(255,248,238,.88); font-weight: 600; max-width: 520px; }
.rating { display: flex; align-items: center; gap: 8px; margin-top: 16px; flex-wrap: wrap; font-size: 15px; }
.rating-txt { color: rgba(255,248,238,.9); }
.stars {
  --r: 5; font-size: 20px; letter-spacing: 2px; line-height: 1;
  background: linear-gradient(90deg, var(--sun) calc(var(--r) / 5 * 100%), rgba(255,255,255,.28) 0);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-visual { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pen-float { animation: float 5.5s ease-in-out infinite; will-change: transform; }
.hero-pen {
  width: auto; max-height: 360px; height: 360px; object-fit: contain;
  filter: drop-shadow(0 26px 30px rgba(0,0,0,.45)) drop-shadow(0 0 40px rgba(255,210,63,.25));
}
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(-14px) rotate(-2deg); }
}
.hero-cta { grid-column: 1 / -1; margin-top: 10px; }
.price { font-size: 18px; color: rgba(255,248,238,.9); font-weight: 700; margin-bottom: 12px; }
.price strong { font-size: 30px; color: #fff; font-weight: 900; margin-right: 4px; }
.fine { font-size: 12px; color: rgba(255,248,238,.72); margin-top: 12px; line-height: 1.4; }
.trust { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.trust li {
  font-size: 13px; font-weight: 800; padding: 7px 12px 7px 28px; border-radius: 999px; position: relative;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.trust li::before {
  content: ""; position: absolute; left: 11px; top: 50%; width: 10px; height: 6px; margin-top: -5px;
  border: solid var(--sun); border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg);
}

/* ---------- Buy button ---------- */
.btn-buy {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: 999px; text-decoration: none;
  background: linear-gradient(180deg, var(--amz-1), var(--amz-2)); color: #0F1111;
  font: 900 18px/1 var(--font); letter-spacing: -.01em;
  box-shadow: 0 10px 24px -8px rgba(255,164,28,.7), inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 0 rgba(0,0,0,.08);
  transition: transform .15s ease, box-shadow .15s ease; -webkit-tap-highlight-color: transparent;
}
.btn-buy:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -10px rgba(255,164,28,.8), inset 0 1px 0 rgba(255,255,255,.6); }
.btn-buy:active { transform: translateY(1px) scale(.99); }
.btn-buy::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.65), transparent);
  transform: skewX(-20deg); animation: shine 4.5s ease-in-out infinite;
}
@keyframes shine { 0%, 70% { left: -60%; } 100% { left: 130%; } }
.btn-label { position: relative; z-index: 1; white-space: nowrap; }
.smile { width: 34px; height: 14px; position: relative; z-index: 1; margin-top: 6px; }
.btn-xl { width: 100%; min-height: 64px; font-size: 21px; }
.btn-giant { min-height: 72px; font-size: 24px; }

/* ---------- Demo ---------- */
.demo { background: radial-gradient(70% 60% at 50% 55%, #FFE9B8, var(--cream) 70%); }
.demo-stage { position: relative; width: min(78vw, 340px); aspect-ratio: 1; margin: 34px auto 0; }
.demo-ring {
  position: absolute; inset: 6%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,210,63,.55), rgba(255,210,63,0) 70%);
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { transform: scale(.92); opacity: .7; } 50% { transform: scale(1.06); opacity: 1; } }
.demo-btn {
  position: relative; width: 100%; height: 100%; border: 0; padding: 8%; cursor: pointer; border-radius: 50%;
  background: transparent; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transform-origin: 50% 85%;
}
.demo-btn img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 22px 22px rgba(59,36,22,.35)); pointer-events: none; }
.demo-btn.squish { animation: squish .55s cubic-bezier(.3,1.6,.5,1); }
@keyframes squish {
  0% { transform: scale(1, 1); }
  25% { transform: scale(1.18, .78); }
  55% { transform: scale(.92, 1.1); }
  80% { transform: scale(1.03, .97); }
  100% { transform: scale(1, 1); }
}
.puffs { position: absolute; left: 50%; top: 55%; pointer-events: none; }
.puff {
  position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, #EADBC3 70%); box-shadow: 0 4px 10px rgba(59,36,22,.12);
  font-size: 30px; line-height: 44px; text-align: center; opacity: 0;
  animation: puff 1s ease-out forwards;
}
.puff:nth-child(3n+1) { background: none; box-shadow: none; }
@keyframes puff {
  0% { opacity: 0; transform: translate(0, 0) scale(.3); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(var(--s)); }
}
.demo-count { margin-top: 20px; font-size: 22px; font-weight: 900; color: var(--choc); min-height: 34px; }
.demo-count b { color: var(--caramel); }
.demo-hint {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 14px; font-weight: 800; color: var(--toffee);
  background: rgba(255,255,255,.7); padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(138,90,43,.18);
}
.demo-hint svg { width: 18px; height: 18px; }

/* ---------- Split sections ---------- */
.split { display: grid; gap: 34px; align-items: center; }
.photo { width: 100%; border-radius: var(--r-lg); box-shadow: var(--shadow); object-fit: cover; }
.photo-white { background: #fff; }
.ink { display: block; width: 220px; height: 22px; color: var(--caramel); margin: 10px 0 4px; }
.ink path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s cubic-bezier(.6,.1,.3,1) .2s; }
.ink.in path { stroke-dashoffset: 0; }
.facts { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; }
.facts li {
  position: relative; padding: 14px 16px 14px 48px; border-radius: 16px; background: #fff;
  box-shadow: 0 6px 18px -10px rgba(59,36,22,.35); font-size: 16px; font-weight: 600; color: var(--ink);
}
.facts li::before {
  content: ""; position: absolute; left: 16px; top: 17px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--sun) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%233B2416' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
}

/* ---------- Gifts ---------- */
.gifts { background: var(--cream-2); }
.gift-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 34px; }
.gift { background: #fff; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow); }
.gift img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.gift-txt { padding: 14px 14px 16px; }
.gift h3 { font-size: 17px; color: var(--choc); }
.gift p { font-size: 14px; color: var(--muted); margin-top: 6px; line-height: 1.4; }

/* ---------- Mid band ---------- */
.band { padding: 20px 14px; }
.band-in {
  position: relative; overflow: hidden; border-radius: var(--r-lg); padding: 44px 22px; color: #fff;
  background: radial-gradient(80% 120% at 100% 0%, rgba(255,210,63,.4), transparent 55%), linear-gradient(135deg, var(--choc), var(--toffee));
  box-shadow: var(--shadow);
}
.band-h { font-size: clamp(34px, 9vw, 60px); margin-bottom: 24px; }
.band-h + .btn-buy { max-width: 440px; }
.band-price { margin-top: 12px; font-weight: 700; color: rgba(255,248,238,.85); }

/* ---------- Steps ---------- */
.step-list { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 14px; }
.step { display: flex; gap: 16px; align-items: center; background: #fff; border-radius: var(--r-md); padding: 16px; box-shadow: 0 6px 18px -10px rgba(59,36,22,.35); }
.step-ic {
  position: relative; flex: 0 0 60px; height: 60px; border-radius: 18px; display: grid; place-items: center;
  background: linear-gradient(145deg, var(--caramel), var(--toffee)); color: var(--cream);
}
.step-ic svg { width: 30px; height: 30px; }
.step-ic b {
  position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; border-radius: 50%; background: var(--sun);
  color: var(--choc); font-size: 13px; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.step strong { display: block; font-size: 19px; font-weight: 900; color: var(--choc); }
.step span span { font-size: 15px; color: var(--muted); }
.note { margin-top: 18px; font-size: 15px; color: var(--muted); font-weight: 600; }

/* ---------- Reviews ---------- */
.reviews { background: linear-gradient(180deg, var(--cream), var(--cream-2)); }
.agg { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 18px; color: var(--muted); font-weight: 700; }
.agg strong { color: var(--choc); font-size: 20px; }
.stars-lg { font-size: 30px; }
.reviews .stars, .review .stars { background-image: linear-gradient(90deg, #F5A300 calc(var(--r) / 5 * 100%), rgba(59,36,22,.18) 0); }
.review-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 84%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 26px 20px 30px; margin: 0 -20px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.review-track::-webkit-scrollbar { display: none; }
.review {
  scroll-snap-align: center; margin: 0; background: #fff; border-radius: var(--r-md); padding: 24px;
  box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 14px; border: 2px dashed rgba(200,130,58,.45);
}
.review blockquote { margin: 0; font-size: 17px; font-weight: 700; color: var(--ink); flex: 1; }
.review figcaption { font-size: 14px; color: var(--muted); font-weight: 700; }
.reviews .btn-buy { max-width: 440px; }

/* ---------- Collect ---------- */
.collect-card {
  display: flex; align-items: center; gap: 18px; padding: 22px; border-radius: var(--r-lg);
  background: rgba(255,255,255,.75); border: 1px solid rgba(138,90,43,.15); box-shadow: var(--shadow);
}
.collect-card p { color: var(--muted); margin-top: 4px; font-weight: 600; }
.collect-emoji { display: flex; flex: 0 0 auto; }
.collect-emoji span {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 26px;
  background: var(--cream-2); border: 3px solid #fff; margin-left: -12px; box-shadow: 0 4px 10px rgba(59,36,22,.15);
}
.collect-emoji span:first-child { margin-left: 0; }

/* ---------- FAQ ---------- */
.faq-list { margin-top: 30px; display: grid; gap: 12px; }
.faq-item { background: #fff; border-radius: var(--r-md); box-shadow: 0 6px 18px -10px rgba(59,36,22,.35); overflow: hidden; }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 18px 56px 18px 20px; min-height: 60px; position: relative;
  font-weight: 900; font-size: 18px; color: var(--choc);
}
.faq-item summary::-webkit-details-marker { display: none; }
.plus { position: absolute; right: 18px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: var(--cream-2); transition: transform .3s ease, background .3s; }
.plus::before, .plus::after { content: ""; position: absolute; left: 7px; right: 7px; top: 12px; height: 2.5px; border-radius: 2px; background: var(--choc); }
.plus::after { transform: rotate(90deg); transition: transform .3s ease; }
.faq-item[open] .plus { transform: rotate(180deg); background: var(--sun); }
.faq-item[open] .plus::after { transform: rotate(0); }
.faq-a { padding: 0 20px 20px; color: var(--muted); font-size: 16px; }
.faq-item[open] .faq-a { animation: faqIn .35s ease; }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- Final ---------- */
.final { margin-top: 40px; }
.final-grid { position: relative; display: grid; grid-template-columns: 1fr; text-align: center; gap: 18px; align-items: center; padding-top: 56px; padding-bottom: 64px; }
.final-visual { display: flex; justify-content: center; }
.final-pen { height: 260px; width: auto; transform: rotate(8deg); filter: drop-shadow(0 26px 30px rgba(0,0,0,.45)) drop-shadow(0 0 40px rgba(255,210,63,.25)); }
.final-h { font-size: clamp(38px, 10.5vw, 76px); color: #fff; }
.final-copy .price { margin-top: 16px; }
.final-copy .btn-buy { margin-top: 4px; }

/* ---------- Footer ---------- */
.footer { background: var(--choc-2); color: rgba(255,248,238,.78); padding: 40px 0 44px; text-align: center; }
.footer-in { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.footer img { width: 56px; height: 56px; border-radius: 14px; }
.footer-brand { font-weight: 900; color: var(--cream); font-size: 18px; }
.footer a { color: var(--sun); }

/* ---------- Sticky bar ---------- */
.sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; align-items: center; gap: 10px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); min-height: var(--sticky-h);
  background: rgba(42,23,13,.92); color: var(--cream);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  border-top: 1px solid rgba(255,255,255,.1); box-shadow: 0 -10px 30px rgba(0,0,0,.25);
  transform: translateY(110%); transition: transform .35s cubic-bezier(.2,.8,.2,1); visibility: hidden;
}
.sticky.show { transform: none; visibility: visible; }
.sticky img { width: 44px; height: 44px; object-fit: contain; flex: 0 0 44px; }
.sticky-txt { flex: 1; min-width: 0; font-size: 14px; line-height: 1.25; }
.sticky-txt strong { display: block; font-size: 15px; font-weight: 900; }
.star-y { color: var(--sun); margin: 0 2px 0 6px; }
.btn-sticky { min-height: 52px; padding: 0 18px; font-size: 16px; flex: 0 0 auto; }

/* ---------- Confetti ---------- */
.confetti {
  position: fixed; z-index: 300; width: 10px; height: 14px; margin: -7px 0 0 -5px; border-radius: 3px; pointer-events: none;
  font-size: 20px; line-height: 14px; animation: confetti .9s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes confetti {
  0% { transform: translate(0, 0) rotate(0) scale(.6); opacity: 1; }
  100% { transform: translate(var(--x), calc(var(--y) + 60px)) rotate(var(--rot)) scale(1); opacity: 0; }
}

/* ---------- Reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease var(--d, 0ms), transform .7s cubic-bezier(.2,.8,.2,1) var(--d, 0ms); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- Mobile body padding for sticky ---------- */
@media (max-width: 899px) {
  .footer { padding-bottom: calc(var(--sticky-h) + env(safe-area-inset-bottom) + 24px); }
}

/* ---------- Tablet / desktop ---------- */
@media (min-width: 640px) {
  .gift-grid { grid-template-columns: repeat(4, 1fr); }
  .review-track { grid-auto-columns: calc((100% - 28px) / 3); margin: 0; padding: 30px 0; }
}
@media (min-width: 900px) {
  .sticky { display: none; }
  .section { padding: 110px 0; }
  .hero-grid { grid-template-columns: 1.1fr .9fr; grid-template-rows: auto auto; padding-top: 70px; padding-bottom: 90px; gap: 0 40px; }
  .hero-copy { grid-column: 1; grid-row: 1; align-self: end; }
  .hero-cta { grid-column: 1; grid-row: 2; max-width: 480px; margin-top: 26px; }
  .hero-visual { grid-column: 2; grid-row: 1 / span 2; }
  .hero-pen { height: 560px; max-height: 560px; }
  .hero-glow { width: 760px; height: 760px; right: -120px; top: -40px; }
  .split { grid-template-columns: 1fr 1fr; gap: 70px; }
  .split-rev .split-media { order: 2; }
  .band { padding: 30px 20px; }
  .band-in { padding: 70px 40px; }
  .final-grid { grid-template-columns: .8fr 1.2fr; gap: 40px; padding-top: 90px; padding-bottom: 100px; }
  .final-pen { height: 520px; }
  .final-grid { text-align: left; }
  .final-copy .btn-buy { max-width: 480px; }
  .collect-card { padding: 28px 34px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
  .ink path { stroke-dashoffset: 0; }
}

/* ---------- v2 additions ---------- */
/* tighter demo -> pen hand-off (both sections share the cream bg) */
.demo { padding-bottom: 28px; }
.demo + .pen { padding-top: 36px; }
@media (min-width: 900px) { .demo { padding-bottom: 36px; } .demo + .pen { padding-top: 56px; } }

/* prime badge: text + CSS, no Amazon logo files */
.prime-badge {
  display: inline-flex; align-items: center; gap: 3px; vertical-align: middle;
  padding: 3px 9px 3px 6px; border-radius: 999px; background: #E6F6FC; color: #0F79AF;
  font: italic 900 14px/1 var(--font, inherit); letter-spacing: -.01em; text-transform: lowercase;
  box-shadow: inset 0 0 0 1.5px rgba(15,121,175,.28); margin-left: 6px; white-space: nowrap;
}
.prime-badge svg { width: 13px; height: 13px; color: #F59E0B; }
.prime-badge[hidden] { display: none; }
.prime-lg { font-size: 17px; padding: 6px 13px 6px 9px; margin-left: auto; }
.prime-lg svg { width: 16px; height: 16px; }
.band .prime-badge, .final .prime-badge { background: rgba(255,255,255,.92); }

/* stocking card icon */
.collect-icon { flex: 0 0 auto; width: 64px; height: 64px; display: grid; place-items: center; background: #FFF4DA; border-radius: 18px; box-shadow: inset 0 0 0 2px rgba(155,97,54,.15); }
.collect-icon svg { width: 46px; height: 46px; }
@media (max-width: 520px) { .collect-card { flex-wrap: wrap; } .prime-lg { margin-left: 0; } }

/* real reviews */
.review-title { margin: 0; font-weight: 900; font-size: 16px; color: var(--choc); }
.review blockquote { font-size: 16px; font-weight: 600; line-height: 1.5; }
.review figcaption { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
.review-name { color: var(--ink); font-weight: 900; }
.review-vp { color: #C45500; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.review-date { flex-basis: 100%; font-size: 12px; font-weight: 600; }

/* v2: real reviews, drop the placeholder dashed border */
.review{border:1px solid rgba(200,130,58,.22)}

/* ---------- v3 additions ---------- */
/* Logo: big hanging badge in the top bar + footer brand moment */
.topbar-in { height: 60px; }
.brand { position: relative; z-index: 6; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; align-self: flex-start; margin-top: 6px; }
.brand img {
  width: 68px; height: 68px; border-radius: 50%; flex: 0 0 auto;
  box-shadow: 0 0 0 3px var(--cream), 0 10px 24px rgba(0,0,0,.4);
}
.brand-name { font-weight: 900; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: var(--cream); margin-top: -18px; }
.hero-grid { padding-top: 46px; }
.footer { padding-top: 52px; }
.footer-badge { position: relative; width: 136px; height: 136px; margin-bottom: 8px; }
.footer-badge::before { content: ""; position: absolute; inset: -26px; border-radius: 50%; background: radial-gradient(circle, rgba(255,210,63,.35), transparent 68%); }
.footer .footer-badge img { position: relative; width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 0 0 4px var(--cream), 0 14px 34px rgba(0,0,0,.45); }
.footer-brand { font-size: 26px; letter-spacing: .02em; }

/* Hero carousel. Mobile: floating pen beside the headline, photo strip under the CTA. Desktop: one 4:5 carousel. */
.carousel { position: relative; width: 100%; }
.car-track { display: flex; overflow: hidden; scrollbar-width: none; }
.car-track::-webkit-scrollbar { display: none; }
.slide { margin: 0; flex: 0 0 100%; display: flex; align-items: center; justify-content: center; }
.slide-photo, .car-btn, .car-thumbs { display: none; }
.hero-strip { grid-column: 1 / -1; margin: 22px -20px 0; }
.strip-track {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 20px 8px; scroll-padding: 0 20px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; outline: none;
}
.strip-track::-webkit-scrollbar { display: none; }
.strip-slide {
  margin: 0; flex: 0 0 74%; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; scroll-snap-align: center; background: #fff;
  box-shadow: 0 16px 34px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.12);
}
.strip-slide img, .slide-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.strip-dots { display: flex; justify-content: center; gap: 7px; margin-top: 12px; }
.dot { width: 7px; height: 7px; border-radius: 99px; background: rgba(255,248,238,.35); transition: width .25s, background .25s; }
.dot.on { width: 22px; background: var(--sun); }

@media (min-width: 640px) { .strip-slide { flex-basis: 44%; } }
@media (min-width: 900px) {
  .topbar-in { height: 68px; }
  .brand img { width: 96px; height: 96px; margin-bottom: -44px; }
  .brand { margin-top: 14px; }
  .brand-name { font-size: 18px; margin-top: -10px; }
  .hero-grid { padding-top: 84px; }
  .hero-strip { display: none; }
  .hero-visual { justify-content: flex-start; }
  .carousel { --w: min(448px, 38vw); width: var(--w); }
  .car-track { aspect-ratio: 4 / 5; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: 28px; outline: none; }
  .car-track:focus-visible { box-shadow: 0 0 0 3px var(--sun); }
  .slide { scroll-snap-align: center; height: 100%; }
  .slide-photo { display: flex; border-radius: 28px; overflow: hidden; background: #fff; }
  .slide-float .pen-float { height: 100%; display: flex; align-items: center; }
  .slide-float .hero-pen { height: calc(var(--w) * 1.25 - 28px); max-height: none; }
  .carousel.on-photo .car-track { box-shadow: 0 24px 50px rgba(0,0,0,.4); }
  .car-btn {
    display: grid; place-items: center; position: absolute; top: calc(var(--w) * .625 - 24px); width: 48px; height: 48px; border-radius: 50%;
    border: 0; cursor: pointer; background: rgba(255,248,238,.94); color: var(--choc); box-shadow: 0 8px 20px rgba(0,0,0,.3); transition: transform .2s;
  }
  .car-btn:hover { transform: scale(1.08); }
  .car-btn svg { width: 22px; height: 22px; }
  .car-prev { left: -24px; } .car-next { right: -24px; }
  .car-thumbs { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
  .thumb {
    width: 58px; height: 72px; padding: 0; border-radius: 12px; cursor: pointer; overflow: hidden;
    background: #fff; border: 2px solid rgba(255,255,255,.2); transition: border-color .2s, transform .2s;
  }
  .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .thumb-float { background: rgba(255,255,255,.1); padding: 5px; }
  .thumb-float img { object-fit: contain; }
  .thumb:hover { transform: translateY(-2px); }
  .thumb.on { border-color: var(--sun); }
}

/* Tap me burst on the demo */
.tapme {
  position: absolute; top: -4%; right: -10%; width: 116px; height: 116px; z-index: 3; pointer-events: none; color: var(--choc);
  animation: tapme 1.8s ease-in-out infinite; transition: opacity .3s, transform .3s, visibility .3s;
}
.tapme-burst { width: 100%; height: 100%; filter: drop-shadow(0 6px 10px rgba(59,36,22,.28)); }
.tapme-burst polygon { fill: var(--sun); stroke: var(--choc); stroke-width: 3.5; stroke-linejoin: round; }
.tapme-txt {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  font-weight: 900; font-size: 21px; line-height: .95; letter-spacing: .01em; transform: rotate(-10deg);
}
.tapme-arrow { position: absolute; width: 54px; height: 36px; left: -34px; bottom: -14px; }
.tapme.gone { opacity: 0; visibility: hidden; transform: scale(.4); animation: none; }
@keyframes tapme {
  0%, 100% { transform: rotate(8deg) scale(1); }
  12% { transform: rotate(-4deg) scale(1.08); }
  24% { transform: rotate(10deg) scale(1.02); }
  36% { transform: rotate(6deg) scale(1); }
}
@media (min-width: 900px) { .tapme { width: 132px; height: 132px; right: -16%; } .tapme-txt { font-size: 24px; } }

/* Gift cards: tinted media box so padded white-bg art sits flush */
.gift-media { aspect-ratio: 1; background: #FDECD6; overflow: hidden; }
.gift-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; aspect-ratio: auto; }

/* Reviews: two big featured quotes + a scrolling set */
.review blockquote { white-space: pre-line; }
.review-featured { display: grid; gap: 18px; margin-top: 30px; }
.review-big { border: 0; border-left: 6px solid var(--sun); padding: 28px 24px 24px; position: relative; }
.review-big::before {
  content: "\201C"; position: absolute; top: -8px; right: 18px; font: 900 110px/1 Georgia, serif; color: rgba(255,210,63,.55); pointer-events: none;
}
.review-big .review-title { font-size: 21px; line-height: 1.2; padding-right: 40px; }
.review-big blockquote { font-size: 17px; line-height: 1.55; color: var(--ink); }
.review-featured + .review-track { padding-top: 18px; }
@media (min-width: 900px) {
  .review-featured { grid-template-columns: 1.15fr .85fr; align-items: start; gap: 24px; }
  .review-big { padding: 34px 34px 28px; }
  .review-big .review-title { font-size: 24px; }
}
@media (min-width: 1000px) {
  .review-track { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); grid-auto-columns: auto; overflow: visible; }
}

/* ===================== v5 demo polish (Oct 23) ===================== */
/* Mobile: TAP ME burst poked ~5px past the right edge and let the page wiggle sideways */
.demo { overflow: hidden; }
@supports (overflow: clip) { .demo { overflow: clip; } }
/* Puffs come out of the base, behind the topper, not over its eyes */

.puffs { top: 80%; z-index: 2; }
/* Topper photo has a hard cut at the stem: fade it out */
/* v6: topper is a true-alpha cut with a clean peg now; no CSS mask (the mask clipped the drop-shadow into a visible box) */
/* Bigger demo on big screens */
@media (min-width: 900px) { .demo-stage { width: 420px; } }
/* Nicer line breaks on headings and leads */
.h2, .lead, .hero-sub, .band-h, .final-h, .hero-h { text-wrap: balance; }
/* How it works: step text was inline and inherited the loose body line-height */
.step span span { display: block; margin-top: 3px; line-height: 1.4; }
/* Hero trust chips: "Batteries included" is already in the promo bar; keep the chips on one row on phones */
@media (max-width: 480px) { .trust li:first-child { display: none; } }
/* DRAFT tags: small and quiet for demos, still visible */
.draft-tag { font-size: 9px; padding: 3px 5px; border-radius: 5px; opacity: .85; box-shadow: none; background: rgba(255,210,63,.9); letter-spacing: .1em; }
.gift { position: relative; }
.gift .draft-tag, .collect-card .draft-tag { position: absolute; top: 10px; right: 10px; z-index: 2; }
.collect-card { position: relative; }
.footer .draft-tag { vertical-align: 1px; margin-left: 4px; }
/* Footer Privacy link: real tap target */
.footer .small a { display: inline-block; padding: 12px 6px; margin: -12px -6px; min-height: 44px; line-height: 20px; box-sizing: border-box; }
/* Featured reviews: clamp the long one, with a toggle (text stays verbatim) */
.review blockquote.clamp { display: -webkit-box; -webkit-line-clamp: 9; -webkit-box-orient: vertical; overflow: hidden; }
.review-more {
  align-self: flex-start; margin: 10px 0 12px; padding: 10px 0; min-height: 44px; border: 0; background: none; cursor: pointer;
  font: 800 15px/1 var(--font); color: #C45500; text-decoration: underline; text-underline-offset: 3px;
}
.review-more:hover { color: var(--choc); }

/* Small review cards: names line up across the row */
.review-track .review figcaption { margin-top: auto; padding-top: 14px; }
/* Gift text a touch bigger on desktop */
@media (min-width: 900px) { .gift h3 { font-size: 19px; } .gift p { font-size: 15px; } }
/* Visible keyboard focus everywhere */
:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
.btn-buy:focus-visible { outline-color: #fff; box-shadow: 0 0 0 6px rgba(255,210,63,.6); }
/* v6: mobile hero pen sits in the swipe strip, which clips overflow. The 40px glow + 30px shadow got cut off
   at the strip edges and showed as a faint box. Smaller shadow that fits inside, glow moved to a soft radial behind. */
@media (max-width: 899px) {
  .slide-float { padding: 20px 6px 30px; background: radial-gradient(closest-side, rgba(255,210,63,.16), rgba(255,210,63,0)); }
  .slide-float .hero-pen { height: 318px; max-height: 318px; filter: drop-shadow(0 10px 9px rgba(0,0,0,.38)); }
}