/* Shared stylesheet of the two search landing pages, godpack.gg/pack-simulator/
   and godpack.gg/pokemon-slabs/. Colors, font and header match the homepage and
   /about/ (whose base rules are repeated here so neither page depends on the
   other). The .sim block repeats the homepage ring rules from style.css so the
   homepage's own orbit.js and demo.js run unchanged on /pack-simulator/; keep
   those lines in step with style.css. Phone first; wider layouts from 560px. */
@font-face{font-family:"Hanken Grotesk";src:url("/assets/hanken-grotesk-latin.woff2") format("woff2");font-style:normal;font-weight:400 700;font-display:swap}
:root{color-scheme:dark;--bg:#0b0a0e;--text:#f4f2f8;--muted:#a5a1b0;--faint:#8e8a9a;--accent:#b8a0ff;--line:#ffffff14;--card:#ffffff08}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:1rem;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--accent);overflow-wrap:anywhere}
.header{height:64px;display:flex;align-items:center;padding:0 max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left))}
.wordmark{display:block;position:relative;width:124px;height:44px;overflow:hidden;flex-shrink:0}
.wordmark img{position:absolute;left:-8px;top:-6px;width:140px;height:56px}
.enter{margin-left:auto;display:flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid #ffffff2e;border-radius:999px;color:var(--text);font-size:.875rem;font-weight:500;text-decoration:none}
main{max-width:760px;margin:0 auto;padding:16px 16px 48px}
h1{margin:16px 0 0;font-size:clamp(2rem,8.4vw,2.75rem);line-height:1.1;font-weight:600;letter-spacing:-.03em}
h2{margin:48px 0 0;font-size:1.375rem;line-height:1.3;font-weight:600}
h3{margin:28px 0 0;font-size:1.0625rem;line-height:1.4;font-weight:600}
h3+p{margin-top:6px}
h2,h3{scroll-margin-top:16px}
p,li{color:#e4e1ec}
strong{color:var(--text);font-weight:600}
a:focus-visible,button:focus-visible,.cta:focus-visible,.enter:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.cta:focus-visible,.enter:focus-visible,.cta2:focus-visible{border-radius:999px}
.crumbs ol{display:flex;flex-wrap:wrap;gap:4px 0;margin:0;padding:0;list-style:none;color:var(--faint);font-size:.8125rem}
.crumbs li{color:var(--faint)}
.crumbs li+li::before{content:"/";margin:0 8px;color:#5d5968}
.crumbs a{color:var(--muted);text-decoration:none}

/* Hero: answer sentence, two actions, what's free, updated date. */
.lede{margin:16px 0 0;color:var(--text);font-size:1.125rem;line-height:1.55}
.ctas{display:flex;flex-direction:column;gap:12px;margin:24px 0 0}
.cta,.cta2{display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border-radius:999px;font:inherit;font-weight:600;text-decoration:none;cursor:pointer;touch-action:manipulation}
.cta{border:0;background:var(--text);color:var(--bg)}
.cta2{border:1px solid #ffffff2e;background:none;color:var(--text)}
.free{margin:12px 0 0;color:var(--muted);font-size:.875rem}
.byline{margin:8px 0 0;color:var(--faint);font-size:.8125rem}
@media(min-width:560px){.ctas{flex-direction:row}.ctas>*{flex:1}}

/* The quotable definition paragraph. */
.definition{margin:32px 0 0;padding:2px 0 2px 16px;border-left:3px solid var(--accent);color:var(--text);font-size:1.0625rem;line-height:1.6}

/* Simulator: the homepage ring (style.css) inside a framed box. */
.sim{--pack:clamp(150px,44vw,210px);position:relative;margin:28px 0 0;border:1px solid var(--line);border-radius:20px;background:radial-gradient(120% 80% at 50% 0%,#b8a0ff12,transparent 70%),var(--card);overflow:hidden}
.sim-label{margin:0;padding:16px 16px 0;color:var(--faint);font-size:.75rem;font-weight:500;letter-spacing:.02em;text-align:center}
.orbit{position:relative;height:calc(var(--pack)*1.4 + 40px);touch-action:pan-y;cursor:pointer;-webkit-user-select:none;user-select:none}
.light{position:absolute;left:50%;top:50%;width:calc(var(--pack)*2.36);height:calc(var(--pack)*2.36);margin:calc(var(--pack)*-1.18) 0 0 calc(var(--pack)*-1.18);border-radius:50%;opacity:0;pointer-events:none;will-change:opacity}
.light:nth-child(1){background:radial-gradient(closest-side,#7a2cf0,transparent);opacity:.3}
.light:nth-child(2){background:radial-gradient(closest-side,#3f52ff,transparent);opacity:.065}
.light:nth-child(3){background:radial-gradient(closest-side,#b48cff,transparent)}
.light:nth-child(4){background:radial-gradient(closest-side,#c8c8d8,transparent);opacity:.065}
.pack{position:absolute;left:50%;top:50%;width:var(--pack);height:calc(var(--pack)*1.4);margin:calc(var(--pack)*-.7) 0 0 calc(var(--pack)*-.5);z-index:1;will-change:transform;-webkit-user-drag:none}
.pack:nth-of-type(1){z-index:201}
.pack:nth-of-type(2){z-index:100;transform:translate3d(calc(var(--pack)*.618),calc(var(--pack)*-.064),0) scale(.74) perspective(700px) rotateY(34deg);filter:brightness(.48)}
.pack:nth-of-type(3){transform:translate3d(0,calc(var(--pack)*-.127),0) scale(.48);filter:brightness(.3)}
.pack:nth-of-type(4){z-index:100;transform:translate3d(calc(var(--pack)*-.618),calc(var(--pack)*-.064),0) scale(.74) perspective(700px) rotateY(-34deg);filter:brightness(.48)}
.tap{position:absolute;left:50%;top:56%;width:0;height:0;z-index:300;pointer-events:none}
.tap span{position:absolute;left:calc(var(--pack)*-.16);top:calc(var(--pack)*-.16);width:calc(var(--pack)*.32);height:calc(var(--pack)*.32);border-radius:50%;border:2px solid #fff;background:#ffffff1f;opacity:0;will-change:transform,opacity}
/* Unlike the homepage, the demo button is visible here: it is the page's main action. */
.sim .demo-hint{display:flex;margin:4px 16px 16px;width:calc(100% - 32px);position:relative;z-index:302}
.sim-note{margin:0;padding:0 16px 18px;color:var(--faint);font-size:.8125rem;text-align:center}
.demo-root{position:fixed;inset:0;z-index:1000;font-family:inherit}
.demo-root[hidden]{display:none}
@media(min-width:560px){.sim{--pack:210px}.sim .demo-hint{width:auto;max-width:320px;margin:4px auto 16px}}

/* Proof grid: slabs from the Master pack. */
.slabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:28px 0 0;padding:0;list-style:none}
.slabs a{display:flex;flex-direction:column;height:100%;padding:12px;border:1px solid var(--line);border-radius:16px;background:var(--card);color:var(--text);text-decoration:none}
.slabs img{display:block;width:100%;max-width:150px;height:auto;margin:0 auto;aspect-ratio:200/335;border-radius:6px}
.slabs .name{margin:10px 0 0;font-size:.875rem;font-weight:600;line-height:1.3;color:var(--text)}
.slabs .meta{margin:4px 0 0;color:var(--muted);font-size:.8125rem;line-height:1.35}
.slabs .value{color:var(--text);font-weight:600}
.proof-note{margin:12px 0 0;color:var(--faint);font-size:.8125rem}
@media(min-width:560px){.slabs{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:720px){.slabs{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Benefit grid and link cards. */
.grid{display:grid;grid-template-columns:1fr;gap:12px;margin:20px 0 0}
.grid>div,.links a{padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:var(--card)}
.grid h3{margin:0;font-size:1rem}
.grid p{margin:6px 0 0;font-size:.9375rem;line-height:1.5}
.links{display:grid;grid-template-columns:1fr;gap:12px;margin:20px 0 0;padding:0;list-style:none}
.links a{display:block;height:100%;color:var(--text);text-decoration:none}
.links strong{display:block;font-size:1rem}
.links span{display:block;margin-top:4px;color:var(--muted);font-size:.9375rem;line-height:1.5}
@media(min-width:560px){.grid,.links{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:720px){.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}}

.steps,.keylist{margin:16px 0 0;padding-left:1.25em}
.steps li,.keylist li{margin:10px 0 0;padding-left:4px}
.steps li::marker{color:var(--accent);font-weight:600}
.keylist li::marker{color:var(--accent)}
.note{margin:20px 0 0;padding:14px 16px;border-radius:14px;background:#b8a0ff14;border:1px solid #b8a0ff33;color:var(--text)}

/* Tables: short columns that fit 320px without scrolling. */
.table{width:100%;margin:20px 0 0;border-collapse:collapse;font-size:.9375rem;line-height:1.45}
.table caption{text-align:left;color:var(--faint);font-size:.75rem;font-weight:500;padding:0 0 8px}
.table th,.table td{padding:12px 10px 12px 0;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);color:#e4e1ec}
.table thead th{padding-top:0;color:var(--faint);font-size:.75rem;font-weight:500}
.table tbody th{color:var(--text);font-weight:600}
.table td:last-child{padding-right:0}
.fine{margin:12px 0 0;color:var(--faint);font-size:.8125rem}

/* FAQ as disclosure rows. */
.faq{margin:16px 0 0;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:12px 0;font-weight:600;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex-shrink:0;color:var(--accent);font-size:1.25rem;font-weight:400;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin:0 0 16px}

.closing{margin:56px 0 0;padding:28px 20px;border:1px solid var(--line);border-radius:20px;background:radial-gradient(120% 90% at 50% 0%,#b8a0ff1a,transparent 70%),var(--card);text-align:center}
.closing h2{margin:0}
.closing p{margin:8px 0 0}
.closing .ctas{margin-top:20px}

footer{border-top:1px solid var(--line);padding:24px 16px 40px;text-align:center;color:var(--faint);font-size:.8125rem}
footer a{display:inline-block;padding:6px 0;color:var(--muted);margin:0 8px}
footer a[aria-current]{color:var(--text)}
@media(hover:hover) and (pointer:fine){.crumbs a:hover{color:var(--accent)}.cta:hover{background:#fff}.cta2:hover,.enter:hover{border-color:#ffffff66}.slabs a:hover,.links a:hover{border-color:#ffffff33}footer a:hover{color:var(--text)}}

/* Product pages: /packs/, /packs/<tier>/, /fairness/, /rewards/ and /shipping/. */

/* Pack chooser on /packs/: one card per pack with its top card, an app link and a guide link. */
.tiers{display:grid;grid-template-columns:1fr;gap:12px;margin:28px 0 0;padding:0;list-style:none}
.tiers li{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px 14px;align-content:start;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--card)}
.tiers img{display:block;width:76px;height:auto;aspect-ratio:200/336;border-radius:6px}
.tiers .tier-name{margin:0;font-size:1.0625rem;font-weight:600;line-height:1.3;color:var(--text)}
.tiers .tier-name span{float:right;font-weight:600}
.tiers .tier-mix,.tiers .tier-top{margin:4px 0 0;color:var(--muted);font-size:.875rem;line-height:1.4}
.tiers .tier-top strong{font-weight:600}
.tier-links{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tier-links a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 12px;border-radius:999px;font-size:.875rem;font-weight:600;text-decoration:none}
.tier-links .go{background:var(--text);color:var(--bg)}
.tier-links .more{border:1px solid #ffffff2e;color:var(--text)}
@media(min-width:620px){.tiers{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Tier pages: the pack wrapper beside its card mix. */
.packshot{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:center;margin:28px 0 0;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--card)}
.packshot img{display:block;width:96px;height:auto;aspect-ratio:1060/1484}
.packshot dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:.9375rem;line-height:1.4}
.packshot dt{color:var(--faint)}
.packshot dd{margin:0;color:var(--text);font-weight:600}
@media(min-width:560px){.packshot{grid-template-columns:140px 1fr}.packshot img{width:140px}}

/* Number columns in odds and fee tables. */
.table .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.table td.odds{padding-right:10px}

/* Shipping calculator on /shipping/. */
.calc{margin:28px 0 0;padding:16px;border:1px solid var(--line);border-radius:20px;background:radial-gradient(120% 80% at 50% 0%,#b8a0ff12,transparent 70%),var(--card)}
.calc-head{margin:0;color:var(--faint);font-size:.75rem;font-weight:500}
.calc-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0 0}
.calc label{display:block;color:var(--muted);font-size:.8125rem}
.calc select,.calc input{display:block;width:100%;min-height:44px;margin:4px 0 0;padding:0 10px;border:1px solid #ffffff2e;border-radius:10px;background:var(--bg);color:var(--text);font:inherit;font-size:1rem}
.calc output{display:block;margin:14px 0 0;color:var(--text);font-size:1rem;line-height:1.5}
.calc output strong{font-size:1.125rem}
@media(max-width:400px){.calc-row{grid-template-columns:1fr 1fr}.calc-row .wide{grid-column:1/-1}}
@media(hover:hover) and (pointer:fine){.tier-links .go:hover{background:#fff}.tier-links .more:hover{border-color:#ffffff66}}

/* Sign-up prompts (owner request, October 17, 2026): the same three short
   blocks on every search page, near the top, mid-page and before the FAQ. */
.signup{display:flex;flex-direction:column;gap:14px;margin:32px 0 0;padding:20px;border:1px solid #b8a0ff40;border-radius:18px;background:linear-gradient(135deg,#b8a0ff1f,#b8a0ff08 60%,transparent)}
.signup p{margin:0;color:#e4e1ec;font-size:.9375rem;line-height:1.5}
.signup .signup-head{color:var(--text);font-size:1.0625rem;font-weight:600;line-height:1.35}
.signup a{display:flex;align-items:center;justify-content:center;align-self:stretch;min-height:48px;padding:0 24px;border-radius:999px;background:var(--text);color:var(--bg);font-weight:600;text-decoration:none}
.signup a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(min-width:560px){.signup{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:20px}.signup>div{min-width:0}.signup a{align-self:center}}
@media(hover:hover) and (pointer:fine){.signup a:hover{background:#fff}}
/* FAQ dropdowns, matching the homepage FAQ. */
.faq{margin:16px 0 0;border-top:0}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{margin-top:0;border-top:0}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:12px 0;color:var(--text);font-weight:500;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex-shrink:0;color:var(--muted);font-size:1.25rem;font-weight:400;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin:0 0 16px;color:#e4e1ec}
.faq summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
@media(hover:hover) and (pointer:fine){.faq summary:hover::after{color:var(--text)}}