/* Strays · the house system (the same one perchpet.fun, pelly.fun, ambers.fun and sepia.fun are built on).
   One bold colour field for the hero and the closing band, cream cards with soft shadows on a paper page, a painted
   mascot on a living stage, a paste box with "Try one" chips, a live strip. Headlines: Plus Jakarta Sans 800, tight.
   Text: Inter. Numbers, tickers, labels: JetBrains Mono. Each option sets its colours in its own page (:root vars)
   and its layout with body[data-layout]. */
:root {
  --field: #E5484D; --field-hi: #F27A7C; --field-deep: #C93A40;
  --ink: #2B0A0E; --ink-2: rgba(43, 10, 14, .72); --cream: #FFF6EE; --paper: #FBF5EE; --gold: #F2B640; --gold-deep: #D99A22;
  --head: #FFFFFF; --head-2: #FFE3C9; --kicker: #C93A40; --live: #1FA35B; --chip-bg: rgba(255, 246, 238, .86);
  --line: rgba(43, 10, 14, .12);
  --shadow: 0 30px 60px -36px rgba(43, 10, 14, .55), 0 2px 6px -2px rgba(43, 10, 14, .12);
  --shadow-s: 0 14px 30px -20px rgba(43, 10, 14, .55), 0 1px 3px rgba(43, 10, 14, .1);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.55 Inter, system-ui, sans-serif; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: 'Plus Jakarta Sans', Inter, sans-serif; font-weight: 800; letter-spacing: -.035em; margin: 0; }
p { margin: 0; }
a { color: inherit; }
button { font: inherit; }
img { display: block; max-width: 100%; }
.mono { font-family: 'JetBrains Mono', monospace; }
@keyframes beat { 50% { box-shadow: 0 0 0 5px rgba(31, 163, 91, 0); } 0%, 100% { box-shadow: 0 0 0 0 rgba(31, 163, 91, .35); } }
@keyframes rise { from { transform: translateY(16px); opacity: 0; } }
@keyframes slide { from { transform: translateX(-20px); opacity: 0; } }

/* ---------- header ---------- */
.top { position: absolute; z-index: 30; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 22px max(24px, 5vw); }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 800 27px/1 'Plus Jakarta Sans', sans-serif; letter-spacing: -.045em; color: var(--head); }
.logo span { width: 40px; height: 40px; border-radius: 12px; background: var(--field-deep); display: grid; place-items: center; overflow: hidden; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .5), inset 0 0 0 2px rgba(255, 255, 255, .25); }
.logo span img { width: 100%; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.top nav { display: flex; align-items: center; gap: 18px; font-weight: 600; font-size: 14.5px; padding: 5px 5px 5px 18px; border-radius: 999px; background: rgba(255, 246, 238, .55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.top nav a { text-decoration: none; color: var(--ink-2); }
.top nav a:hover { color: var(--ink); }
.chip { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding: 8px 13px; border-radius: 999px; background: var(--chip-bg); color: var(--ink) !important; font: 700 12.5px 'JetBrains Mono', monospace; text-decoration: none; }
.chip i { width: 7px; height: 7px; border-radius: 50%; background: rgba(43, 10, 14, .3); }
.motion { border: 0; cursor: pointer; }
.motion .sw { position: relative; flex: none; width: 24px; height: 14px; border-radius: 999px; background: rgba(43, 10, 14, .25); transition: background .2s; }
.motion .sw::after { content: ''; position: absolute; left: 2px; top: 2px; width: 10px; height: 10px; border-radius: 50%; background: #FFF; transition: transform .2s; }
.motion[aria-pressed="true"] .sw { background: var(--live); }
.motion[aria-pressed="true"] .sw::after { transform: translateX(10px); }

/* ---------- the hero ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; background: var(--field); overflow: hidden; display: grid; grid-template-columns: minmax(0, 660px) 1fr; align-items: center; padding: 120px max(24px, 5vw) 120px; }
.sky { position: absolute; inset: 0; pointer-events: none; }
.sky > * { position: absolute; }
.sun { width: 54vw; height: 54vw; right: 2vw; top: -6vw; border-radius: 50%; background: radial-gradient(closest-side, var(--field-hi), transparent 72%); opacity: .95; }
.dots { right: 4vw; top: 16vh; width: 220px; height: 160px; background-image: radial-gradient(rgba(255, 255, 255, .28) 2px, transparent 2.5px); background-size: 22px 22px; }
.ground { left: -5%; right: -5%; bottom: -1px; height: 22vh; background: var(--field-deep); border-radius: 50% 50% 0 0 / 30% 30% 0 0; opacity: .55; }

.copy { position: relative; z-index: 6; }
.eyebrow { margin: 0 0 18px; display: inline-flex; align-items: center; gap: 9px; padding: 7px 13px 7px 10px; border-radius: 999px; background: rgba(0, 0, 0, .12); font: 700 11.5px 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--head); }
.eyebrow b { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(242, 182, 64, .3); }
.hero h1 { font-size: clamp(46px, 5.3vw, 80px); line-height: .96; color: var(--head); text-wrap: balance; }
.hero h1 em { font-style: normal; color: var(--head-2); display: block; }
.sub { margin-top: 18px; max-width: 30em; font-size: 18.5px; line-height: 1.5; color: var(--head); opacity: .92; }
.sub strong { font-weight: 700; }
.scan { margin-top: 28px; display: flex; gap: 8px; max-width: 540px; padding: 7px; border-radius: 18px; background: var(--cream); box-shadow: var(--shadow); }
.scan input { flex: 1 1 0; width: 0; min-width: 0; border: 0; outline: 0; background: transparent; padding: 0 14px; font: 600 15px 'JetBrains Mono', monospace; color: var(--ink); }
.scan input::placeholder { color: rgba(43, 10, 14, .42); }
.btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 13px; padding: 13px 20px; font-weight: 700; font-size: 15px; cursor: pointer; background: rgba(43, 10, 14, .07); color: var(--ink); transition: transform .15s ease, box-shadow .15s ease; white-space: nowrap; text-decoration: none; }
.btn:hover { transform: translateY(-1px); }
.btn.primary { background: var(--ink); color: var(--cream); box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .8); }
.try { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-top: 14px; font-size: 13.5px; font-weight: 600; color: var(--head); opacity: .95; }
.try .chip { padding: 6px 12px 6px 7px; cursor: pointer; transition: transform .15s; }
.try .chip:hover { transform: translateY(-1px); }
.try .chip img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.ticks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.ticks span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 9px; border-radius: 999px; background: rgba(0, 0, 0, .12); color: var(--head); font-size: 13.5px; font-weight: 600; }
.ticks span::before { content: '✓'; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .2); font-size: 11px; font-weight: 800; }

/* the stage: Scruff trots home, leaving paw prints; sizes follow the stage (cqw) */
.stage { position: absolute; z-index: 2; right: max(0px, 3vw); top: clamp(56px, 7vh, 96px); width: min(44vw, 70vh); aspect-ratio: 1; pointer-events: none; container-type: inline-size; }
.halo { position: absolute; left: 14%; top: 10%; width: 72%; height: 72%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .34), transparent 72%); }
.rings { position: absolute; left: 14%; top: 60%; width: 72%; height: 13%; }
.rings i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); transform: scale(.4); opacity: 0; }
.shadow { position: absolute; left: 25%; top: 64.5%; width: 52%; height: 5.5%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .22), transparent); }
.cat { position: absolute; left: 9%; top: -2%; width: 82%; height: auto; user-select: none; -webkit-user-drag: none; filter: drop-shadow(0 22px 28px rgba(0, 0, 0, .18)); transform-origin: 50% 90%; }
.paws { position: absolute; left: -14%; top: 63%; width: 34%; height: 6%; }
.paws i { position: absolute; width: 3.6cqw; height: 3.6cqw; opacity: 0; background: var(--paw, rgba(0, 0, 0, .16)); -webkit-mask: url(/p/paw.svg) center / contain no-repeat; mask: url(/p/paw.svg) center / contain no-repeat; transform: rotate(90deg); }
.spark { position: absolute; width: 3cqw; height: 3cqw; background: #FFF; -webkit-mask: url(/p/spark.svg) center / contain no-repeat; mask: url(/p/spark.svg) center / contain no-repeat; opacity: .9; }
.s1 { left: 18%; top: 18%; } .s2 { left: 86%; top: 30%; width: 2.2cqw; height: 2.2cqw; } .s3 { left: 74%; top: 8%; width: 1.8cqw; height: 1.8cqw; }
.tag { position: absolute; z-index: 4; left: 58%; top: -2%; display: inline-flex; align-items: center; gap: 7px; padding: .6em .95em; border-radius: 11px; background: var(--cream); color: var(--ink); font: 600 clamp(11px, 1.8cqw, 14px) Inter, sans-serif; box-shadow: var(--shadow-s); white-space: nowrap; transform-origin: 50% -4cqw; }
.tag::before { content: ''; position: absolute; left: 50%; top: -4cqw; width: 1.5px; height: 4cqw; background: rgba(255, 255, 255, .7); }
.tag b { font: 700 1em 'JetBrains Mono', monospace; }
.tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--live); }

/* the live case card, floating on the stage */
.case { position: absolute; z-index: 7; right: max(16px, 4vw); bottom: 96px; width: 360px; background: var(--cream); border-radius: 22px; padding: 16px 18px 14px; box-shadow: var(--shadow); }
.case-top { display: flex; align-items: center; gap: 10px; }
.case-top img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: rgba(43, 10, 14, .08); }
.case-top b { font: 800 19px/1.1 'Plus Jakarta Sans', sans-serif; letter-spacing: -.03em; }
.case-top small { display: block; font: 500 11px 'JetBrains Mono', monospace; color: var(--ink-2); }
.live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font: 700 10.5px 'JetBrains Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--live); }
.case dl { margin: 12px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.case dl div { background: rgba(43, 10, 14, .05); border-radius: 12px; padding: 8px 10px; min-width: 0; }
.case dt { font-size: 11.5px; color: var(--ink-2); }
.case dd { margin: 2px 0 0; font: 700 14px 'JetBrains Mono', monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1.3em; }
.case dd.typing::after { content: '▍'; color: var(--field); }
.verdict { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pill { font: 700 11px 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .07em; padding: 6px 10px; border-radius: 9px; background: #E3F3DA; color: #23693A; white-space: nowrap; }
.pill.no { background: #FBE2DE; color: #9A2A1C; }
.pill.wait { background: rgba(43, 10, 14, .07); color: var(--ink-2); }
.verdict small { font: 500 11px 'JetBrains Mono', monospace; color: var(--ink-2); text-align: right; }

/* the live strip */
.strip { position: absolute; z-index: 8; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 14px; padding: 12px max(24px, 5vw); background: rgba(255, 246, 238, .92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); overflow: hidden; }
.strip-label { display: inline-flex; align-items: center; gap: 8px; font: 700 11.5px 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.strip-label i { width: 8px; height: 8px; border-radius: 50%; background: var(--live); }
.strip ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; overflow: hidden; mask-image: linear-gradient(90deg, #000 85%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); }
.strip li { flex: none; }
.strip li a { display: inline-flex; align-items: center; gap: 8px; background: rgba(43, 10, 14, .06); border-radius: 999px; padding: 6px 12px 6px 7px; font: 600 12.5px Inter, sans-serif; color: var(--ink); text-decoration: none; }
.strip li a:hover { background: rgba(43, 10, 14, .1); }
.strip li img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.strip li b { font: 700 12.5px 'JetBrains Mono', monospace; }
.strip li span { color: var(--ink-2); }

/* ---------- sections ---------- */
.sec { padding: 100px max(24px, 6vw) 70px; max-width: 1320px; margin: 0 auto; }
.sec-head { max-width: 760px; margin: 0 0 34px; }
.kicker { margin: 0 0 12px; font: 700 11.5px 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--kicker); display: flex; align-items: center; gap: 9px; }
.kicker::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--field); }
.sec-head h2 { font-size: clamp(34px, 4vw, 54px); line-height: 1.02; text-wrap: balance; }
.lede { margin: 14px 0 0; color: var(--ink-2); font-size: 18px; max-width: 40em; }

/* 4 reads: the engine's checks, each with a real number from a real coin */
.reads { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.reads li { display: flex; flex-direction: column; background: var(--cream); border-radius: 26px; overflow: hidden; box-shadow: var(--shadow); }
.r-art { position: relative; aspect-ratio: 1 / .78; background: var(--field); overflow: hidden; display: grid; place-items: center; padding: 18px; }
.r-art::after { content: ''; position: absolute; left: -10%; right: -10%; bottom: -16%; height: 34%; background: var(--field-deep); opacity: .5; border-radius: 50% 50% 0 0; }
.r-body { padding: 16px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.r-n { font: 700 11.5px 'JetBrains Mono', monospace; color: var(--kicker); }
.reads h3 { margin-top: 6px; font-size: 23px; letter-spacing: -.025em; }
.reads p { margin-top: 6px; color: var(--ink-2); font-size: 15px; }
.reads em { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 14px; font: 600 12px 'JetBrains Mono', monospace; font-style: normal; color: var(--kicker); }
.reads em i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--live); }
/* the little product vignettes inside each read's art */
.vg { position: relative; z-index: 1; width: 100%; max-width: 250px; background: var(--cream); border-radius: 16px; padding: 12px 13px; box-shadow: var(--shadow-s); font: 600 12px 'JetBrains Mono', monospace; color: var(--ink); }
.vg .big { font: 800 30px/1 'Plus Jakarta Sans', sans-serif; letter-spacing: -.04em; }
.vg .lbl { color: var(--ink-2); font-weight: 500; font-size: 11px; margin-top: 4px; }
.vg .bar { height: 8px; border-radius: 99px; background: rgba(43, 10, 14, .08); margin-top: 10px; overflow: hidden; }
.vg .bar i { display: block; height: 100%; width: 0; background: var(--field); border-radius: 99px; transition: width 1.4s cubic-bezier(.2, .9, .25, 1); }
.vg .tl { position: relative; height: 34px; margin-top: 8px; }
.vg .tl::before { content: ''; position: absolute; left: 0; right: 0; top: 16px; height: 2px; background: rgba(43, 10, 14, .14); }
.vg .tl b { position: absolute; top: 10px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; border: 2px solid var(--cream); box-shadow: 0 0 0 1.5px var(--ink); background: var(--ink); }
.vg .tl b.sell { background: var(--field); box-shadow: 0 0 0 1.5px var(--field); }
.vg .tl b.now { background: var(--gold); box-shadow: 0 0 0 1.5px var(--gold-deep); }
.vg .row { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-top: 1px dashed var(--line); }
.vg .row:first-of-type { border-top: 0; }
.vg .row s { color: var(--ink-2); text-decoration-color: var(--field); }
.vg .blocks { display: flex; gap: 4px; margin-top: 10px; }
.vg .blocks i { flex: 1; height: 26px; border-radius: 6px; background: rgba(43, 10, 14, .08); }
.vg .blocks i.hit { background: var(--field); }

/* the verdict bar: who gets a kit */
.rule { margin-top: 18px; background: var(--cream); border-radius: 22px; padding: 18px 20px; box-shadow: var(--shadow-s); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rule div { display: grid; gap: 4px; padding: 6px 4px; }
.rule .pill { justify-self: start; }
.rule b { font: 800 17px 'Plus Jakarta Sans', sans-serif; letter-spacing: -.02em; }
.rule span { font-size: 14px; color: var(--ink-2); }

/* the kit: four real pictures */
.feat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.feat { background: var(--cream); border-radius: 28px; padding: 14px 14px 24px; box-shadow: var(--shadow); }
.feat-pic { position: relative; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; display: grid; place-items: center; background: var(--field); }
.feat-pic.paper { background: #F1E8DE; }
.feat-pic canvas { display: block; box-shadow: var(--shadow); }
.feat-pic canvas.pfp { width: 58%; border-radius: 50%; }
.feat-pic canvas.wide { width: 88%; border-radius: 12px; }
.feat-pic canvas.card { width: 82%; border-radius: 14px; }
.feat h3 { margin: 20px 10px 0; font-size: 23px; letter-spacing: -.025em; }
.feat p { margin: 6px 10px 0; color: var(--ink-2); font-size: 15.5px; }
.ca-demo { width: 86%; background: var(--cream); border-radius: 16px; padding: 14px 16px; box-shadow: var(--shadow); font: 600 12.5px 'JetBrains Mono', monospace; }
.ca-demo .addr { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 11px; background: rgba(43, 10, 14, .06); }
.ca-demo .addr code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-demo .addr .btn { padding: 6px 11px; font-size: 12px; border-radius: 9px; }
.ca-demo ul { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 4px; }
.ca-demo li { display: flex; gap: 8px; color: var(--ink-2); font-weight: 500; }
.ca-demo li b { color: #C0392B; }
.ca-demo li s { text-decoration-color: #C0392B; }

/* questions */
.faq { max-width: 1000px; }
.faq-list { display: grid; gap: 10px; }
.faq details { background: var(--cream); border-radius: 18px; padding: 0 22px; box-shadow: var(--shadow-s); }
.faq summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; font: 700 17.5px 'Plus Jakarta Sans', sans-serif; letter-spacing: -.015em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(43, 10, 14, .06); font: 600 18px/1 'JetBrains Mono', monospace; }
.faq details[open] summary::after { content: '–'; }
.faq details p { margin: 0 0 18px; color: var(--ink-2); max-width: 46em; }

/* the closing band */
.cta-card { position: relative; display: grid; grid-template-columns: minmax(0, 360px) 1fr; align-items: center; gap: 24px; background: var(--field); border-radius: 34px; padding: 0 44px 0 20px; overflow: hidden; }
.cta-card::after { content: ''; position: absolute; left: -10%; right: -10%; bottom: -40%; height: 60%; background: var(--field-deep); opacity: .55; border-radius: 50% 50% 0 0; }
.cta-art { position: relative; z-index: 1; width: 100%; height: auto; margin: 4% 0 -6%; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .18)); }
.cta-copy { position: relative; z-index: 2; padding: 40px 0; }
.cta-copy h2 { font-size: clamp(32px, 3.6vw, 52px); line-height: 1.02; color: var(--head); }
.cta-copy p { margin: 10px 0 0; font-size: 18px; color: var(--head); opacity: .9; }
.cta-copy .scan { margin-top: 22px; }

/* $STRAYS */
.coin-card { display: grid; grid-template-columns: 260px 1fr; gap: 40px; align-items: center; background: var(--ink); color: var(--cream); border-radius: 32px; padding: 30px; }
.coin-art { width: 260px; height: 260px; border-radius: 26px; background: var(--field); display: grid; place-items: center; overflow: hidden; }
.coin-art img { width: 108%; max-width: none; margin-top: 8%; }
.coin-card h2 { color: var(--cream); font-size: clamp(32px, 3.4vw, 48px); }
.coin-card .kicker { color: var(--head-2); }
.coin-card .kicker::before { background: var(--gold); }
.coin-card p { color: rgba(255, 246, 238, .78); margin: 10px 0 0; max-width: 36em; }
.coin-card .fine { color: rgba(255, 246, 238, .55); font-size: 13.5px; }
.ca { display: flex; align-items: center; gap: 10px; margin-top: 18px; background: rgba(255, 246, 238, .08); border: 1px solid rgba(255, 246, 238, .16); border-radius: 13px; padding: 13px 15px; max-width: 580px; }
.ca span { font: 700 11px 'JetBrains Mono', monospace; letter-spacing: .08em; color: var(--gold); }
.ca code { font: 600 14px 'JetBrains Mono', monospace; flex: 1; }
.foot { padding: 26px max(24px, 6vw) 50px; max-width: 1320px; margin: 0 auto; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.foot p { margin: 0 0 6px; max-width: 64em; }
.foot .small { font: 600 12px 'JetBrains Mono', monospace; margin-top: 14px; }

/* ---------- motion: on by default, the Motion switch turns it off ---------- */
[data-motion="on"] .cat { animation: trot 1.15s ease-in-out infinite; }
[data-motion="on"] .shadow { animation: shad 1.15s ease-in-out infinite; }
[data-motion="on"] .rings i { animation: ring 3.6s ease-out infinite; }
[data-motion="on"] .rings i:nth-child(2) { animation-delay: 1.2s; }
[data-motion="on"] .rings i:nth-child(3) { animation-delay: 2.4s; }
[data-motion="on"] .paws i { animation: paw 2.4s ease-in-out infinite; }
[data-motion="on"] .spark { animation: twinkle 2.8s ease-in-out infinite; }
[data-motion="on"] .s2 { animation-delay: .9s; } [data-motion="on"] .s3 { animation-delay: 1.7s; }
[data-motion="on"] .halo { animation: breathe 5s ease-in-out infinite; }
[data-motion="on"] .tag { animation: sway 5s ease-in-out infinite; }
[data-motion="on"] .live i, [data-motion="on"] .strip-label i, [data-motion="on"] .tag i, [data-motion="on"] .reads em i { animation: beat 2s ease-in-out infinite; }
[data-motion="on"] .case { animation: rise .7s .3s cubic-bezier(.2, .9, .25, 1) both; }
[data-motion="on"] [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .8s cubic-bezier(.2, .9, .25, 1); transition-delay: calc(var(--i, 0) * 90ms); }
[data-motion="on"] [data-reveal].in { opacity: 1; transform: none; }
[data-motion="off"] .paws i { opacity: .5; }
@keyframes trot { 0%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-1.6%) rotate(-.8deg); } 50% { transform: translateY(0) rotate(0); } 75% { transform: translateY(-1.1%) rotate(.6deg); } }
@keyframes shad { 0%, 50%, 100% { transform: scaleX(1); opacity: 1; } 25%, 75% { transform: scaleX(.9); opacity: .75; } }
@keyframes ring { 0% { transform: scale(.35); opacity: 0; } 20% { opacity: .9; } 100% { transform: scale(1.15); opacity: 0; } }
@keyframes paw { 0%, 100% { opacity: 0; } 20%, 60% { opacity: 1; } }
@keyframes twinkle { 0%, 100% { transform: scale(.6) rotate(0); opacity: .3; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes sway { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }

/* ---------- layout B: the stage on the left, the copy on the right ---------- */
[data-layout="b"] .hero { grid-template-columns: 1fr minmax(0, 640px); }
[data-layout="b"] .copy { grid-column: 2; }
[data-layout="b"] .stage { right: auto; left: max(0px, 1vw); }
[data-layout="b"] .case, [data-layout="b"] .eng-d { right: auto; left: max(16px, 3vw); }
[data-layout="b"] .sun { right: auto; left: 2vw; }
[data-layout="b"] .dots { right: auto; left: 4vw; }
[data-layout="b"] .tag { left: 6%; }
@keyframes trot-flip { 0%, 100% { transform: scaleX(-1) translateY(0) rotate(0); } 25% { transform: scaleX(-1) translateY(-1.6%) rotate(-.8deg); } 50% { transform: scaleX(-1) translateY(0); } 75% { transform: scaleX(-1) translateY(-1.1%) rotate(.6deg); } }

/* ---------- layout C: a framed hero, a rounded colour panel on the paper page, the header on paper ---------- */
[data-layout="c"] .top { position: relative; padding-bottom: 14px; }
[data-layout="c"] .top .logo { color: var(--ink); }
[data-layout="c"] .top nav { background: var(--cream); box-shadow: var(--shadow-s); }
[data-layout="c"] .hero { margin: 0 max(14px, 2vw); border-radius: 40px; min-height: calc(100svh - 92px); padding-top: 70px; padding-bottom: 110px; box-shadow: var(--shadow); }
[data-layout="c"] .stage { top: clamp(30px, 5vh, 60px); }
[data-layout="c"] .strip { border-radius: 0 0 40px 40px; }

/* ---------- the heartbeat behind Scruff: flat where the dev sold, a pulse where the coin is alive again ---------- */
.ekg { position: absolute; left: -8%; top: 52%; width: 114%; height: 18%; overflow: visible; }
.ekg path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ekg-base { stroke: rgba(255, 255, 255, .28); stroke-width: 3; }
.ekg-dead { stroke: rgba(6, 30, 28, .28); stroke-width: 3; stroke-dasharray: 2 9; }
.ekg-live { stroke: #FFFFFF; stroke-width: 4; stroke-dasharray: 260 1740; stroke-dashoffset: 260; opacity: 0; filter: drop-shadow(0 0 6px rgba(255, 255, 255, .9)); }
.ekg-label { position: absolute; z-index: 3; top: 49%; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font: 700 clamp(10px, 1.6cqw, 12.5px) 'JetBrains Mono', monospace; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.ekg-label.dead { left: 3%; top: 64%; background: rgba(6, 30, 28, .14); color: rgba(6, 30, 28, .7); }
.ekg-label.alive { right: -2%; top: 69%; background: var(--cream); color: var(--ink); box-shadow: var(--shadow-s); opacity: .45; transition: opacity .6s; }
.ekg-label.alive i { width: 7px; height: 7px; border-radius: 50%; background: var(--live); }
.hero.alive .ekg-label.alive { opacity: 1; }
.hero.alive .ekg-live { opacity: 1; }
[data-motion="on"] .hero.alive .ekg-live { animation: pulse-run 2.4s linear infinite; }
[data-motion="off"] .hero.alive .ekg-live { stroke-dasharray: none; stroke-dashoffset: 0; opacity: .9; }
@keyframes pulse-run { from { stroke-dashoffset: 260; } to { stroke-dashoffset: -1740; } }
.hero.alive .halo { background: radial-gradient(closest-side, rgba(255, 255, 255, .45), transparent 72%); }

/* ---------- the Revival Engine console ---------- */
.eng { position: absolute; z-index: 7; right: max(16px, 3vw); bottom: 84px; width: 380px; background: var(--cream); border-radius: 22px; padding: 14px 16px 14px; box-shadow: var(--shadow); color: var(--ink); }
.eng-top { display: flex; align-items: center; gap: 8px; font: 800 14px 'Plus Jakarta Sans', sans-serif; letter-spacing: -.01em; }
.eng-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--field); box-shadow: 0 0 0 3px rgba(53, 181, 169, .25); }
.eng-state { margin-left: auto; font: 700 10.5px 'JetBrains Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.eng-coin { display: flex; align-items: center; gap: 10px; margin: 10px 0 6px; padding: 9px 10px; border-radius: 14px; background: rgba(6, 48, 44, .05); }
.eng-pic { position: relative; width: 38px; height: 38px; flex: none; border-radius: 50%; }
.eng-pic img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; filter: grayscale(1) brightness(.85); transition: filter 1s ease; background: rgba(6, 48, 44, .08); }
.eng-pic::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid transparent; }
.eng.revived .eng-pic img { filter: none; }
.eng.revived .eng-pic::after { border-color: var(--live); }
.eng-coin b { display: block; font: 800 17px/1.1 'Plus Jakarta Sans', sans-serif; letter-spacing: -.02em; }
.eng-coin small { font: 500 11px 'JetBrains Mono', monospace; color: var(--ink-2); }
.eng-tag { margin-left: auto; font: 700 10.5px 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .05em; padding: 5px 8px; border-radius: 8px; background: rgba(6, 48, 44, .07); color: var(--ink-2); white-space: nowrap; }
.eng.revived .eng-tag { background: #E3F3DA; color: #23693A; }
.eng.nokit .eng-tag { background: #FBE2DE; color: #9A2A1C; }
.eng-steps { list-style: none; margin: 0; padding: 0; display: grid; }
.eng-steps li { position: relative; display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 8px; padding: 7px 2px; border-top: 1px dashed var(--line); font-size: 13px; color: var(--ink-2); transition: color .3s; }
.eng-steps li:first-child { border-top: 0; }
.eng-steps .ic { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid rgba(6, 48, 44, .25); display: grid; place-items: center; font-size: 9px; font-weight: 800; }
.eng-steps li.run { color: var(--ink); }
.eng-steps li.run .ic { border-color: var(--field); border-top-color: transparent; }
.eng-steps li.ok { color: var(--ink); }
.eng-steps li.ok .ic { background: var(--ink); border-color: var(--ink); }
.eng-steps li.ok .ic::after { content: '✓'; color: var(--cream); }
.eng-steps .v { font: 700 12.5px 'JetBrains Mono', monospace; color: var(--ink); white-space: nowrap; }
.eng-steps .bar { position: absolute; left: 28px; right: 0; bottom: 2px; height: 2px; border-radius: 2px; background: transparent; overflow: hidden; }
.eng-steps .bar b { display: block; height: 100%; width: 0; background: var(--field); transition: width 1.5s cubic-bezier(.2, .9, .25, 1); }
.eng-steps li[data-s="trail"] { grid-template-columns: 18px auto 1fr auto; }
.bag { width: 100%; height: 22px; }
.bag path { fill: none; stroke: #C0392B; stroke-width: 2.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.eng-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; min-height: 30px; }
.verdict-pill { font: 800 12px 'JetBrains Mono', monospace; letter-spacing: .06em; text-transform: uppercase; padding: 7px 11px; border-radius: 10px; white-space: nowrap; }
.verdict-pill:empty { display: none; }
.verdict-pill.ok { background: var(--live); color: #FFF; box-shadow: 0 0 0 0 rgba(31, 163, 91, .5); }
.verdict-pill.no { background: #FBE2DE; color: #9A2A1C; }
.eng-meta { font: 500 10.5px 'JetBrains Mono', monospace; color: var(--ink-2); text-align: right; }
.eng.scanning .eng-steps li .v::after { content: '···'; color: var(--ink-2); }
[data-motion="on"] .eng.scanning .eng-steps li .ic { animation: spin .9s linear infinite; border-color: var(--field); border-top-color: transparent; }
[data-motion="on"] .eng-steps li.run .ic { animation: spin .8s linear infinite; }
[data-motion="on"] .verdict-pill.ok { animation: pop .5s cubic-bezier(.2, 1.6, .4, 1), glow 2s ease-out .5s 2; }
[data-motion="on"] .eng.revived .eng-pic::after { animation: ringpulse 1.4s ease-out 2; }
[data-motion="on"] .eng-dot { animation: beat 2s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }
@keyframes glow { from { box-shadow: 0 0 0 0 rgba(31, 163, 91, .55); } to { box-shadow: 0 0 0 12px rgba(31, 163, 91, 0); } }
@keyframes ringpulse { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
.eng-m { display: none; position: relative; right: auto; bottom: auto; width: 100%; max-width: 540px; margin-top: 22px; }

/* ---------- abandoned → revived ---------- */
.ba { display: grid; grid-template-columns: 1fr 150px 1fr; align-items: center; gap: 18px; }
.ba-card { position: relative; background: var(--cream); border-radius: 28px; padding: 22px 22px 18px; box-shadow: var(--shadow); display: grid; gap: 10px; overflow: hidden; }
.ba-card .pill { justify-self: start; }
.ba-pic { width: 76px; height: 76px; border-radius: 50%; overflow: hidden; display: block; box-shadow: 0 0 0 4px var(--cream), 0 0 0 6px rgba(6, 48, 44, .12); }
.ba-pic img { width: 100%; height: 100%; object-fit: cover; }
.ba-card.dead .ba-pic img { filter: grayscale(1) brightness(.8); }
.ba-card.dead { background: #EFEDEA; color: rgba(6, 48, 44, .8); }
.ba-card.alive .ba-pic { box-shadow: 0 0 0 4px var(--cream), 0 0 0 6px var(--live); }
.ba-card h3 { font-size: 28px; }
.ba-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 15px; }
.ba-card ul li { display: flex; gap: 8px; }
.ba-card.dead ul li::before { content: '✕'; color: #B4483C; font-weight: 800; }
.ba-card.alive ul li::before { content: '✓'; color: var(--live); font-weight: 800; }
.ba-line { width: 100%; height: 40px; margin-top: 4px; }
.ba-line path { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ba-card.dead .ba-line path { stroke: rgba(6, 48, 44, .25); stroke-dasharray: 3 8; }
.ba-card.alive .ba-line path { stroke: var(--field); stroke-dasharray: 600; stroke-dashoffset: 0; }
.ba-mid { position: relative; display: grid; justify-items: center; gap: 10px; }
.ba-chip { padding: 8px 12px; border-radius: 12px; background: var(--ink); color: var(--cream); font: 700 11.5px 'JetBrains Mono', monospace; letter-spacing: .04em; white-space: nowrap; box-shadow: var(--shadow-s); }
.ba-mid svg { width: 60px; height: 24px; }
.ba-mid svg path { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ba-beam { position: absolute; left: -40%; right: -40%; top: 50%; height: 2px; background: linear-gradient(90deg, transparent, var(--field), transparent); opacity: 0; }
.fine-note { margin-top: 14px; font-size: 13.5px; color: var(--ink-2); }
[data-motion="on"] .ba.in .ba-card.dead { animation: fade-grey 1s ease .2s both; }
[data-motion="on"] .ba.in .ba-beam { animation: beam 1.2s ease-in-out .7s both; }
[data-motion="on"] .ba.in .ba-card.alive { animation: come-alive .8s cubic-bezier(.2, 1.3, .4, 1) 1.5s both; }
[data-motion="on"] .ba.in .ba-card.alive .ba-line path { animation: draw 1.4s ease 2s both; }
[data-motion="on"] .ba.in .ba-card.alive .ba-pic { animation: ringpulse-s 1.6s ease-out 2.1s 2; }
@keyframes fade-grey { from { filter: saturate(1.6); } }
@keyframes beam { 0% { opacity: 0; transform: scaleX(.2); } 50% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1.2) translateX(30%); } }
@keyframes come-alive { from { opacity: .35; transform: scale(.94); filter: grayscale(1); } }
@keyframes draw { from { stroke-dashoffset: 600; } }
@keyframes ringpulse-s { 50% { box-shadow: 0 0 0 4px var(--cream), 0 0 0 14px rgba(31, 163, 91, .25); } }

/* ---------- the reads play once they're in view ---------- */
.vg .bar i { width: 0; }
.reads li.play .vg .bar i { width: 100%; }
[data-motion="on"] .vg .tl b { transform: scale(0); transition: transform .4s cubic-bezier(.2, 1.6, .4, 1); }
[data-motion="on"] .reads li.play .vg .tl b { transform: scale(1); }
[data-motion="on"] .reads li.play .vg .tl b:nth-child(2) { transition-delay: .35s; }
[data-motion="on"] .reads li.play .vg .tl b:nth-child(3) { transition-delay: .7s; }
[data-motion="on"] .vg .blocks i.hit { background: rgba(6, 48, 44, .08); transition: background .3s; transition-delay: calc(var(--j) * 110ms + .3s); }
[data-motion="on"] .reads li.play .vg .blocks i.hit { background: var(--field); }
.vg .row s { position: relative; text-decoration: none; }
.vg .row s::after { content: ''; position: absolute; left: 0; top: 52%; height: 1.5px; width: 100%; background: #C0392B; }
[data-motion="on"] .vg .row s::after { width: 0; transition: width .4s ease; transition-delay: calc(var(--j) * 250ms + .4s); }
[data-motion="on"] .reads li.play .vg .row s::after { width: 100%; }

/* ---------- headline entrance ---------- */
[data-motion="on"] .hero h1 .l1, [data-motion="on"] .hero h1 em { animation: rise .9s cubic-bezier(.2, .9, .25, 1) both; }
[data-motion="on"] .hero h1 .l1 { display: block; }
[data-motion="on"] .hero h1 em { animation-delay: .15s; }
[data-motion="on"] .hero .sub, [data-motion="on"] .hero .scan { animation: rise .9s cubic-bezier(.2, .9, .25, 1) .3s both; }

/* ---------- kit buttons and the PFP studio ---------- */
.feat-btn { margin: 14px 10px 0; }
.studio { position: fixed; inset: 0; z-index: 100; background: rgba(6, 30, 28, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: grid; place-items: center; padding: 16px; overflow-y: auto; }
.studio-card { width: min(900px, 100%); background: var(--paper); border-radius: 28px; padding: 18px; box-shadow: var(--shadow); }
.studio-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; font: 800 22px 'Plus Jakarta Sans', sans-serif; letter-spacing: -.02em; }
.studio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pfp-stage { position: relative; aspect-ratio: 1; border-radius: 18px; overflow: hidden; background: rgba(6, 48, 44, .06); }
.pfp-stage canvas { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.circle-guide { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 999px rgba(244, 248, 245, .55); pointer-events: none; outline: 1.5px dashed rgba(6, 48, 44, .35); outline-offset: -1px; }
.studio-tools { display: grid; gap: 12px; align-content: start; }
.studio-tools .row { display: flex; flex-wrap: wrap; gap: 8px; }
.seg { display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(6, 48, 44, .07); gap: 2px; width: fit-content; }
.seg-btn { border: 0; background: transparent; padding: 8px 14px; border-radius: 999px; font-weight: 600; cursor: pointer; color: var(--ink-2); }
.seg-btn[aria-pressed="true"] { background: var(--ink); color: var(--cream); }
.studio-note { font-size: 13.5px; color: var(--ink-2); }
.stickers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sticker { display: grid; justify-items: center; gap: 4px; padding: 8px 4px 6px; border-radius: 14px; border: 1.5px solid transparent; background: var(--cream); box-shadow: var(--shadow-s); cursor: pointer; font-size: 11.5px; font-weight: 700; color: var(--ink-2); }
.sticker img { width: 100%; max-width: 54px; aspect-ratio: 1; object-fit: contain; }
.sticker:hover { border-color: var(--field); }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
.check input { accent-color: var(--ink); width: 18px; height: 18px; }
.btn.small { padding: 7px 12px; font-size: 13px; border-radius: 10px; }
.btn:disabled { opacity: .4; cursor: default; transform: none; }

/* ---------- narrower screens ---------- */
@media (max-width: 1180px) {
  .case, .eng-d { display: none; }
  .copy .eng-m { display: block; }
  .ba { grid-template-columns: minmax(0, 1fr); }
  .ba-mid { grid-auto-flow: column; align-items: center; }
  .ba-mid svg { transform: rotate(90deg); }
  .ba-beam { left: 0; right: 0; }
  .reads { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .copy .case-m { display: block; }
}
.case-m { display: none; position: relative; right: auto; bottom: auto; width: 100%; max-width: 540px; margin-top: 22px; }
[data-layout="c"] .case-m { text-align: left; }

/* ---------- phones ---------- */
@media (max-width: 860px) {
  .top { padding: 14px 16px; }
  .top nav a:not(.chip) { display: none; }
  .top nav { gap: 6px; padding: 4px; }
  .top .chip { padding: 7px 10px; }
  .chip .t { display: none; }
  .hero, [data-layout="b"] .hero, [data-layout="c"] .hero { display: flex; flex-direction: column; align-items: stretch; text-align: left; padding: 0 16px; min-height: 0; }
  .stage, [data-layout="b"] .stage, [data-layout="c"] .stage { position: relative; order: 1; right: auto; left: auto; top: auto; width: calc(100% + 32px); margin: 78px -16px 0; aspect-ratio: 1 / .74; }
  .copy, [data-layout="c"] .copy { order: 2; padding: 0 0 26px; align-items: stretch; }
  [data-layout="c"] .try, [data-layout="c"] .ticks { justify-content: flex-start; }
  .hero h1 { font-size: 42px; }
  .sub { font-size: 16.5px; }
  .scan { margin-top: 20px; }
  .scan .btn { padding: 12px 16px; }
  .strip, [data-layout="c"] .strip { position: relative; order: 3; margin: 0 -16px; width: auto; padding: 12px 16px; }
  .strip-label { display: none; }
  .sun { width: 100vw; height: 100vw; top: 0; right: -20vw; }
  .sec { padding: 60px 16px 40px; }
  .sec-head { margin-bottom: 24px; }
  .lede { font-size: 16px; }
  .reads { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .rule { grid-template-columns: minmax(0, 1fr); }
  .feat-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .feat { border-radius: 22px; padding: 10px 10px 20px; }
  .feat h3 { font-size: 20px; }
  .faq details { padding: 0 16px; }
  .faq summary { font-size: 16px; }
  .cta-card { grid-template-columns: minmax(0, 1fr); padding: 0 18px 10px; gap: 0; }
  .cta-art { width: 70%; margin: 4% auto -8%; }
  .cta-copy { padding: 0 0 18px; }
  .coin-card { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 20px; }
  .coin-art { width: 100%; height: 220px; }
  .coin-art img { width: 70%; }
  .studio-grid { grid-template-columns: minmax(0, 1fr); }
  .studio { place-items: start center; }
  .ekg-label { font-size: 10px; padding: 4px 8px; }
  .ekg-label.alive { right: 4%; }
  .eng-m { padding: 12px 13px; }
  [data-layout="c"] .hero { margin: 0 10px; border-radius: 28px; padding: 0 16px; min-height: 0; }
  [data-layout="c"] .stage { margin-top: 6px; }
  [data-layout="c"] .strip { border-radius: 0 0 28px 28px; }
}