/* ---------- Hero ---------- */
.hero{
	min-height: calc(100svh - 64px);
	gap:108px;
}
.hero h1{
	font-size:clamp(2.3rem,5.4vw,3.9rem);
	font-weight:700;
}
.hero h1 .cheap{
	background:var(--green-soft);color:var(--green);
	padding:0 .18em;border-radius:8px;box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.hero .sub{
	font-family:'Lora',serif;font-style:italic;font-size:1.18rem;color:var(--soft);
	margin-top:20px;max-width:600px;
}
.cta-button{
	border:none;border-radius:12px;background:var(--ink);color:#fff;
	padding:16px 28px;font-size:1rem;font-weight:600;cursor:pointer;
	transition:transform .15s ease,background .15s ease;
	text-decoration: none;
	text-align: center;
}
.cta-button:hover{background:var(--green);transform:translateY(-2px)}
.cta-note{font-size:.85rem;color:var(--soft)}
/* ---------- Deal card ---------- */
.deal-card{
	position:relative;
	background:var(--card);
	border:1px solid var(--line);
	border-radius:var(--radius);
	box-shadow:var(--shadow);
	padding:20px;
	max-width:340px;margin:0 auto;
	transform:rotate(2.5deg);
}
.deal-card::before{ /* holo foil edge — the TCG touch */
	content:"";position:absolute;inset:-2px;z-index:-1;
	border-radius:16px;background:var(--holo);
	filter:saturate(1.2);
}
.deal-art{
	height:220px;border-radius:8px;
	background:
		radial-gradient(circle at 30% 25%,rgba(255,255,255,.55),transparent 45%),
		var(--holo);
	background-blend-mode:screen;
	overflow:hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}
.deal-art img{
	max-width:85%;   /* max-* can never exceed the box, even for a 2000px image */
	max-height:85%;
	object-fit:contain;
	filter:drop-shadow(0 8px 12px rgba(21,23,28,.3)); /* follows the cutout, not the bounding box */
}
.deal-meta{display:flex;justify-content:space-between;align-items:flex-start;margin-top:16px;gap:12px}
.deal-meta h3{font-size:1.02rem;font-weight:600}
.deal-meta small{color:var(--soft);font-size:.8rem}
.price-now{font-family:'IBM Plex Mono',monospace;font-weight:600;color:var(--green);font-size:1.1rem;white-space:nowrap}
.price-was{font-family:'IBM Plex Mono',monospace;color:var(--soft);text-decoration:line-through;font-size:.82rem;display:block;text-align:right}
.deal-badge{
	position:absolute;top:-16px;right:-12px;
	background:var(--green);color:#fff;
	font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:.85rem;
	padding:8px 12px;border-radius:999px;
	box-shadow:0 8px 16px -8px rgba(11,138,75,.6);
	transform:rotate(6deg);
}
/* ---------- Steps (a real sequence, so numbers earn their place) ---------- */
.steps{
	display: flex;
	flex-direction: column;
	gap: 16px;
	/* display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); */
	/* gap:16px; */
}
.step{
	background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
	padding:24px;position:relative;overflow:hidden;
	transition:transform .2s ease,box-shadow .2s ease;
}
.step:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.step::after{ /* holo strip on hover */
	content:"";position:absolute;left:0;right:0;top:0;height:3px;
	background:var(--holo);opacity:0;transition:opacity .2s ease;
}
.step:hover::after{opacity:1}
.step-num{
	font-family:'IBM Plex Mono',monospace;font-size:.8rem;font-weight:600;
	color:var(--green);background:var(--green-soft);
	width:32px;height:32px;border-radius:8px;
	display:grid;place-items:center;margin-bottom:36px;
}
.step h3{font-size:1.08rem;font-weight:600;margin-bottom:8px}
.step p{font-size:.92rem;color:var(--soft)}
/* ---------- Mechanism: show, don't tell ---------- */
.compare{
	margin-top:72px;background:var(--card);
	border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
	box-shadow:var(--shadow);
}
.compare-row{
	display:grid;grid-template-columns:1.4fr 1fr 1fr;
	align-items:center;gap:12px;
	padding:16px 24px;border-bottom:1px solid var(--line);
	font-size:.94rem;
}
.compare-row:last-child{border-bottom:none}
.compare-row.head{
	font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
	color:var(--soft);background:var(--paper);
}
.compare-row .price{font-family:'IBM Plex Mono',monospace;font-weight:600;text-align:right}
.compare-row.best{background:var(--green-soft)}
.compare-row.best .price{color:var(--green)}
.best-tag{
	display:inline-block;margin-left:8px;
	background:var(--green);color:#fff;border-radius:999px;
	font-size:.68rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
	padding:3px 8px;vertical-align:middle;
}

.step-visual{
  border:1px solid var(--line);border-radius:12px;padding:14px;
  margin-bottom:16px;min-height:120px;background:#fff;
  font-size:.78rem;display:flex;flex-direction:column;gap:8px;
  justify-content:center;
}
 
/* 01 — watchlist */
.mini-search{
  border:1px solid var(--line);border-radius:8px;padding:6px 10px;
  color:var(--soft);font-family:'IBM Plex Mono',monospace;font-size:.72rem;
}
.caret{display:inline-block;width:1px;height:.9em;background:var(--ink);
  vertical-align:text-bottom;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{
  border:1px solid var(--line);border-radius:999px;padding:3px 10px;
  font-weight:600;color:var(--soft);
}
.chip-new{border-color:var(--green);color:var(--green);background:rgba(0,222,141,.07)}
 
/* 02 — live scan */
.scan-row{
  display:flex;justify-content:space-between;color:var(--soft);
  border-bottom:1px dashed var(--line);padding-bottom:5px;
}
.scan-price{font-family:'IBM Plex Mono',monospace}
.scan-hit{color:var(--ink);font-weight:600}
.scan-hit .scan-price{color:var(--green)}
.scan-status{display:flex;align-items:center;gap:6px;color:var(--soft);font-size:.7rem}
.live-dot{
  width:7px;height:7px;border-radius:50%;background:var(--green);
  animation:pulse 1.6s ease-out infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(0,222,141,.5)}
  70%{box-shadow:0 0 0 7px rgba(0,222,141,0)}
  100%{box-shadow:0 0 0 0 rgba(0,222,141,0)}
}
 
/* 03 — alert toast */
.toast{
  border:1px solid var(--line);border-left:3px solid var(--green);
  border-radius:10px;padding:10px 12px;box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.toast-head{display:flex;justify-content:space-between;color:var(--soft);
  font-size:.68rem;margin-bottom:4px}
.toast-body{margin:2px 0 0;color:var(--soft)}
.toast-link{color:var(--green);font-weight:600;text-decoration:underline}
 
/* 04 — receipt */
.receipt-row{
  display:flex;justify-content:space-between;padding:4px 0;
  border-bottom:1px dashed var(--line);
}
.receipt-save{
  border:none;font-weight:700;color:var(--green);
  font-family:'IBM Plex Mono',monospace;
}
 
@media (prefers-reduced-motion:reduce){
  .caret,.live-dot{animation:none}
}
/* ---------- Pricing ---------- */
.plans{ display: flex; flex-direction: column; width:100%; max-width:720px; gap: 16px; margin-top: 72px; }
.plan{
	background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
	padding:28px;display:flex;flex-direction:column;gap:16px;
}
.plan.featured{border-color:var(--green);box-shadow:var(--shadow)}
.plan h3{font-size:1.15rem}
.plan .amount{font-family:'IBM Plex Mono',monospace;font-size:2rem;font-weight:600}
.plan .amount span{font-size:.85rem;color:var(--soft);font-weight:500}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:8px;font-size:.92rem;color:var(--soft)}
.plan li::before{content:"✓ ";color:var(--green);font-weight:700}
.plan button{
	margin-top:auto;border-radius:10px;padding:12px;font-weight:600;cursor:pointer;
	border:1px solid var(--line);background:var(--paper);
}
.plan.featured button{background:var(--ink);color:#fff;border-color:var(--ink)}
.plan.featured button:hover{background:var(--green);border-color:var(--green)}
/* ---------- FAQ: native accordion, zero JS ---------- */
.faq{max-width:720px;margin-top:36px; width: 100%;}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
	cursor:pointer;list-style:none;
	display:flex;justify-content:space-between;align-items:center;gap:16px;
	padding:20px 4px;font-weight:600;font-size:1rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.3rem;color:var(--soft);transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 4px 20px;color:var(--soft);font-size:.95rem;max-width:560px}
/* ---------- Final CTA + footer ---------- */
.final{margin:100px 0 0;padding:0 24px}
.final-inner{
	max-width:1100px;margin:0 auto;
	background:var(--ink);color:var(--paper);
	border-radius:20px;padding:clamp(36px,6vw,64px);text-align:center;
	position:relative;overflow:hidden;
}
.final-inner::before{
	content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--holo);
}
.final-inner h2{font-size:clamp(1.7rem,4vw,2.6rem);font-weight:600}
.final-inner p{color:#A9ADB5;margin:16px auto 28px;max-width:420px}
footer{
	max-width:1100px;margin:0 auto;padding:28px 24px;
	display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
	font-size:.82rem;color:var(--soft);
}
/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (max-width:820px){
	.nav-links{display:none}
	.compare-row{grid-template-columns:1.2fr 1fr;font-size:.86rem}
	.compare-row :nth-child(2){display:none}
}
@media (prefers-reduced-motion:reduce){
	html{scroll-behavior:auto}
	.reveal{opacity:1;transform:none;transition:none}
	.step,.cta-button{transition:none}
}

/* ----------- NEW STEPS -------- */
.step-visual{
  border:1px solid var(--line);border-radius:12px;padding:14px;
  margin-bottom:16px;min-height:120px;background:#fff;
  font-size:.78rem;display:flex;flex-direction:column;gap:8px;
  justify-content:center;
}
 
/* 01 — watchlist */
.mini-search{
  border:1px solid var(--line);border-radius:8px;padding:6px 10px;
  color:var(--soft);font-family:'IBM Plex Mono',monospace;font-size:.72rem;
}
.caret{display:inline-block;width:1px;height:.9em;background:var(--ink);
  vertical-align:text-bottom;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{
  border:1px solid var(--line);border-radius:999px;padding:3px 10px;
  font-weight:600;color:var(--soft);
}
.chip-new{border-color:var(--green);color:var(--green);background:rgba(0,222,141,.07)}
 
/* 02 — live scan */
.scan-row{
  display:flex;justify-content:space-between;color:var(--soft);
  border-bottom:1px dashed var(--line);padding-bottom:5px;
}
.scan-price{font-family:'IBM Plex Mono',monospace}
.scan-hit{color:var(--ink);font-weight:600}
.scan-hit .scan-price{color:var(--green)}
.scan-status{display:flex;align-items:center;gap:6px;color:var(--soft);font-size:.7rem}
.live-dot{
  width:7px;height:7px;border-radius:50%;background:var(--green);
  animation:pulse 1.6s ease-out infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(0,222,141,.5)}
  70%{box-shadow:0 0 0 7px rgba(0,222,141,0)}
  100%{box-shadow:0 0 0 0 rgba(0,222,141,0)}
}
 
/* 03 — alert toast */
.toast{
  border:1px solid var(--line);border-left:3px solid var(--green);
  border-radius:10px;padding:10px 12px;box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.toast-head{display:flex;justify-content:space-between;color:var(--soft);
  font-size:.68rem;margin-bottom:4px}
.toast-body{margin:2px 0 0;color:var(--soft)}
.toast-link{color:var(--green);font-weight:600;text-decoration:underline}
 
/* 04 — receipt */
.receipt-row{
  display:flex;justify-content:space-between;padding:4px 0;
  border-bottom:1px dashed var(--line);
}
.receipt-save{
  border:none;font-weight:700;color:var(--green);
  font-family:'IBM Plex Mono',monospace;
}
 
@media (prefers-reduced-motion:reduce){
  .caret,.live-dot{animation:none}
}