/* Front-end sales page components (v2). Pulp-paperback treatment: stamps, tape, hand-written notes.
   Built only from skin tokens; every effect has a static fallback. */
@import url('fonts/hand.css');   /* self-hosted: no request to Google */
:root{--hand:"Caveat","Bradley Hand","Segoe Print",cursive;--tape:rgba(242,183,5,.55)}

/* top announcement bar: information, not a fake countdown */
.topbar{background:var(--ink);color:var(--bg);font-size:14.5px;text-align:center;padding:9px 16px}
.topbar b{color:var(--acc2)}
.topbar a{color:var(--bg);font-weight:700;margin-left:10px;white-space:nowrap}

/* stamp label used as section eyebrow */
.stamp{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--acc);
  border:2px solid var(--acc);border-radius:3px;padding:4px 10px;transform:rotate(-1.5deg);margin-bottom:14px;background:var(--surface)}
.center .stamp,.stamp.c{display:table;margin-inline:auto}

/* hero: two columns on desktop */
.hero2{padding-block:40px 34px}
.hero2 .grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:36px;align-items:center}
.hero2 h1{font-size:clamp(30px,3.5vw,44px);line-height:1.06;text-align:left;margin:4px 0 0}
.hero2 h1 em,.dr h2 em{font-style:normal;color:var(--acc);background:linear-gradient(transparent 82%, var(--acc2) 82%)}
.hero2 .sub{text-align:left;margin:16px 0 0;font-size:18.5px;color:var(--mut)}
.hero2 .hero-img{margin:0}
.price-card{text-align:left;margin:24px 0 0;max-width:none;padding:20px 22px;border-style:solid;background:var(--surface);box-shadow:var(--shadow);position:relative}
.price-card .pc-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.price-card .pc-price{font-family:var(--display);font-size:54px;line-height:1}
.price-card .pc-price small{font-family:var(--body);font-size:15px;color:var(--mut);display:block;margin-top:4px;text-transform:none}
.price-card .btn-buy{flex:1;min-width:220px}
.trust{display:flex;flex-wrap:wrap;gap:8px 16px;margin:14px 0 0;padding:0;list-style:none;font-size:13.5px;color:var(--mut)}
.trust li{display:flex;align-items:center;gap:6px}
.trust li::before{content:"✓";display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--ok-soft);color:var(--ok);font-size:11px;font-weight:700}
.hand{font-family:var(--hand);font-size:24px;line-height:1.1;color:var(--acc);display:inline-block;transform:rotate(-3deg)}
.price-card .hand{position:absolute;right:16px;top:-30px}

/* stat strip: only verified or measured numbers */
.stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:0}
.stat{background:var(--surface);border:var(--border-w) solid var(--line);border-radius:var(--r-sm);padding:14px 10px;text-align:center;position:relative;box-shadow:var(--shadow-sm)}
.stat::before{content:"";position:absolute;top:-8px;left:50%;width:46px;height:14px;transform:translateX(-50%) rotate(-3deg);background:var(--tape)}
.stat b{display:block;font-family:var(--display);font-size:30px;line-height:1.05}
.stat span{display:block;font-size:12.5px;color:var(--mut);margin-top:4px;line-height:1.35}
.stats-note{font-size:12.5px;color:var(--mut2);text-align:center;margin:12px 0 0}

/* comparison: method vs method */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px}
.vs-card{background:var(--surface);border:var(--border-w) solid var(--line);border-radius:var(--r);padding:20px 20px 16px;position:relative;box-shadow:var(--shadow-sm)}
.vs-card h3{margin:0 0 12px;padding-right:54px}
.vs-card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:16px}
.vs-card li{display:grid;grid-template-columns:22px 1fr;gap:8px}
.vs-card.bad li::before{content:"✗";color:var(--bad);font-weight:700}
.vs-card.good li::before{content:"✓";color:var(--ok);font-weight:700}
.vs-card .seal{position:absolute;top:14px;right:14px;width:42px;height:42px;border:3px solid currentColor;border-radius:4px;display:grid;place-items:center;font-size:24px;font-weight:700;transform:rotate(8deg)}
.vs-card.bad .seal{color:var(--bad)}.vs-card.good .seal{color:var(--ok);transform:rotate(-6deg)}
.vs-card.good{border-color:var(--ink);border-width:calc(var(--border-w) + 1px)}

/* stage catalogue: numbered cards */
.stages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:22px 0}
.stage{background:var(--surface);border:var(--border-w) solid var(--line);border-radius:var(--r-sm);padding:14px;position:relative}
.stage .no{display:inline-grid;place-items:center;min-width:30px;height:24px;padding:0 6px;border-radius:3px;font-family:var(--mono);font-size:12px;color:var(--acc-ink);background:var(--acc);margin-bottom:8px}
.stage:nth-child(3n+2) .no{background:var(--ink);color:var(--bg)}
.stage:nth-child(3n) .no{background:var(--acc2);color:var(--ink)}
.stage b{display:block;font-size:15.5px}
.stage p{margin:4px 0 0;font-size:13.5px;line-height:1.45;color:var(--mut)}
.stage .opt{position:absolute;top:12px;right:10px;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--mut2)}

/* peek inside: overlapping, slightly tilted screenshots with tape */
.peek{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:34px 0 16px;padding:0 8px}
.peek figure{margin:0;position:relative}
.peek figure:nth-child(1){transform:rotate(-2.2deg);z-index:2}
.peek figure:nth-child(2){transform:rotate(1.8deg) translate(-2%,24px)}
.peek figure:nth-child(3){transform:rotate(-1deg) translate(4%,-10px)}
.peek figure::before{content:"";position:absolute;top:-10px;left:50%;width:90px;height:22px;transform:translateX(-50%) rotate(-4deg);background:var(--tape);z-index:3}
.peek img{width:100%;height:auto;display:block;border:var(--border-w) solid var(--ink);border-radius:var(--r-sm);box-shadow:var(--shadow);cursor:zoom-in;background:var(--surface)}
.peek-note{text-align:right;margin:26px 0 0}

/* after-you-click timeline */
.next-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:22px 0 22px;counter-reset:ns;list-style:none;padding:0}
.next-steps li{background:var(--surface);border:var(--border-w) dashed var(--line);border-radius:var(--r-sm);padding:14px 14px 12px;font-size:14.5px;line-height:1.45}
.next-steps li::before{counter-increment:ns;content:counter(ns);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--bg);font-family:var(--mono);font-size:13px;margin-bottom:8px}
.secure{font-size:13.5px;color:var(--mut);text-align:center;margin:14px 0 0}

/* optional founder note */
.founder{background:var(--surface);border:var(--border-w) solid var(--line);border-radius:var(--r);padding:26px 26px 22px;position:relative;box-shadow:var(--shadow-sm)}
.founder::before{content:"";position:absolute;top:-11px;left:28px;width:110px;height:24px;transform:rotate(-3deg);background:var(--tape)}
.founder .sig{font-family:var(--hand);font-size:34px;color:var(--ink);margin:10px 0 0}

@media (max-width:980px){.stats{grid-template-columns:repeat(3,minmax(0,1fr))}.stages{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){
  .hero2 .grid{grid-template-columns:1fr}
  .hero2 h1,.hero2 .sub{text-align:center}
  .hero2 .stamp{display:table;margin-inline:auto}
  .vs,.next-steps{grid-template-columns:1fr}
}
@media (max-width:560px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stages{grid-template-columns:1fr}
  .peek{grid-template-columns:1fr;gap:26px}
  .peek figure:nth-child(n){transform:rotate(-1deg)}
  .price-card .hand{position:static;display:block;margin-bottom:6px}
  .price-card .pc-price{font-size:46px}
  .topbar{font-size:13px}
}
@media (prefers-reduced-motion:reduce){.stamp,.peek figure,.hand{transform:none!important}}

/* JV page: swipe cards and asset grid */
.swipe-card{background:var(--surface);border:var(--border-w) solid var(--line);border-radius:var(--r);padding:18px;margin-top:18px;box-shadow:var(--shadow-sm)}
.swipe-card .swipe{max-height:360px;overflow:auto}
.assets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px}
.assets figure{margin:0;background:var(--surface);border:var(--border-w) solid var(--line);border-radius:var(--r-sm);padding:10px}
.assets img{width:100%;height:180px;object-fit:contain;display:block;background:var(--bg);border-radius:var(--r-sm)}
.assets figcaption{font-size:13.5px;color:var(--mut);margin-top:8px}
@media (max-width:560px){.assets{grid-template-columns:1fr}}

.review-box{background:var(--surface);border:calc(var(--border-w) + 1px) dashed var(--acc);border-radius:var(--r);padding:18px;margin-top:14px}
.review-box .ft td{padding:8px 10px}

.hero-img figcaption{font-size:13px;color:var(--mut);text-align:center;margin-top:8px}