@font-face { font-family: Archivo; src: url(../fonts/archivo.woff2) format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }

:root {
  --ultra: #3A27F0; --deep: #1513A8; --night: #100D86; --indigo: #6E22F2; --violet: #B51FE0; --magenta: #F01FA6;
  --rose: #FF2A6D; --verm: #FF3D2E; --tang: #FF7A1A; --mari: #FFB000; --yolk: #FFD21F;
  --pearl: #FFF6EC; --lilac: #ECE8FF; --ink: #100D56;
  --on-field: #fff; --ground: var(--deep);
  --gut: clamp(16px, 4vw, 64px);
  --out: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}
html[data-sealed="yes"] { --ground: #E9E4DC; --on-field: #17151F; color-scheme: light; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-color: var(--magenta) var(--night); }
html[data-sealed="yes"] { scrollbar-color: #17151F #E9E4DC; }
body { margin: 0; background: var(--ground); color: var(--on-field); font: 400 18px/1.5 Archivo, system-ui, sans-serif; font-stretch: 100%; -webkit-font-smoothing: antialiased; overflow-x: clip; caret-color: var(--magenta); }
::selection { background: var(--yolk); color: var(--ink); }
:focus-visible { outline: 3px solid var(--yolk); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, p, ol, ul, dl, dd { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; text-underline-offset: .18em; }
[hidden] { display: none !important; }
.defs { position: absolute; }

h1, h2 { font-weight: 800; font-stretch: 125%; letter-spacing: -.03em; line-height: 1; text-wrap: balance; }
h1 { font-size: clamp(2.7rem, 6.4vw, 6rem); }
h2 { font-size: clamp(2.2rem, 5vw, 4.6rem); }

/* one world or the other, never both */
html[data-sealed="no"] .dead, html[data-sealed="yes"] .live { display: none !important; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 30px; border: 0; border-radius: 999px; background: var(--pearl); color: var(--ink); font: 700 1.02rem/1 Archivo, sans-serif; font-stretch: 112%; text-decoration: none; cursor: pointer; transition: box-shadow .35s var(--out), transform .35s var(--out); box-shadow: 0 8px 22px -8px rgba(10, 5, 70, .5); }
.btn:hover { transform: translateY(-1px); box-shadow: 0 0 0 4px var(--magenta), 0 0 0 8px var(--mari), 0 0 0 12px var(--yolk), 0 14px 26px -8px rgba(10, 5, 70, .5); }
.btn:active { transform: translateY(1px); }
.btn.line { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85); }
.btn.line:hover { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 2px #fff; }
.btn.yolk { background: var(--yolk); color: var(--ink); }
.btn.small { min-height: 42px; padding: 0 20px; font-size: .92rem; white-space: nowrap; background: var(--ink); color: #fff; box-shadow: none; }
.btn.small:hover { box-shadow: 0 0 0 3px var(--magenta), 0 0 0 6px var(--yolk); }
.btn.ink { background: var(--ink); color: #fff; }
.btn:disabled { background: rgba(16, 13, 86, .14); color: rgba(16, 13, 86, .72); box-shadow: none; cursor: not-allowed; transform: none; }

/* nav: one pearl capsule that stays readable over every field */
.nav { position: fixed; z-index: 30; top: 14px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; width: max-content; max-width: calc(100vw - 24px); padding: 6px 6px 6px 16px; border-radius: 999px; background: var(--pearl); color: var(--ink); box-shadow: 0 14px 34px -14px rgba(10, 5, 70, .6); }
.brand { white-space: nowrap; display: flex; align-items: center; gap: 8px; margin-right: 12px; font-weight: 800; font-stretch: 125%; font-size: 1.05rem; letter-spacing: -.02em; text-decoration: none; }
.brand svg { width: 22px; height: 22px; }
.links { display: flex; }
.links a { padding: 10px 13px; border-radius: 999px; font-size: .94rem; font-weight: 500; text-decoration: none; transition: background .2s; }
.links a:hover { background: var(--lilac); }
.seg { display: flex; gap: 2px; padding: 3px; margin: 0 6px; border-radius: 999px; background: var(--lilac); }
.seg button { min-height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font: 600 .84rem/1 Archivo, sans-serif; white-space: nowrap; cursor: pointer; transition: background .2s, color .2s; }
.seg button:hover { background: rgba(16, 13, 86, .1); }
.seg button[aria-pressed="true"] { background: var(--yolk); font-weight: 800; }
html[data-sealed="yes"] .seg { background: #2b2933; }
html[data-sealed="yes"] .seg button { color: #E9E4DC; }
html[data-sealed="yes"] .seg button[aria-pressed="true"] { color: #17151F; }

/* the stage */
.stage { position: relative; height: 270vh; height: 270svh; background: var(--deep); }
html[data-sealed="yes"] .stage { height: 100vh; height: 100svh; background: #E9E4DC; }
.sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
#field, #swarm { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.nogl #field { background: repeating-radial-gradient(circle at 72% 47%, #FF2A6D 0 16px, #3A27F0 16px 32px); }
#swarm { z-index: 2; }
/* in the hero nothing swims under the numbers in the strip */
#swarm.clear { -webkit-mask-image: linear-gradient(#000 calc(100% - 112px), transparent calc(100% - 96px)); mask-image: linear-gradient(#000 calc(100% - 112px), transparent calc(100% - 96px)); }

.hero { position: absolute; z-index: 3; left: var(--gut); top: 50%; width: min(47vw, 700px); translate: 0 -54%; pointer-events: none; }
.hero a, .hero .cta { pointer-events: auto; }
.hero .lead { margin-top: 22px; max-width: 34em; font-size: clamp(1.05rem, 1.45vw, 1.32rem); line-height: 1.42; font-weight: 500; text-wrap: pretty; text-shadow: 0 1px 14px rgba(16, 13, 134, .55); }
.cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

.strip { position: absolute; z-index: 4; left: var(--gut); right: var(--gut); bottom: 22px; display: flex; gap: clamp(20px, 4vw, 64px); padding-top: 12px; border-top: 2px solid rgba(255, 255, 255, .85); }
.strip div { display: grid; gap: 2px; }
.strip span { font-size: .84rem; font-weight: 500; }
.strip b { font-size: clamp(1.05rem, 1.7vw, 1.5rem); font-weight: 800; font-stretch: 112%; font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; }

.sealing { position: absolute; z-index: 6; left: 50%; bottom: 96px; translate: -50% 0; padding: 12px 20px; border-radius: 999px; background: var(--yolk); color: var(--ink); font-weight: 700; text-align: center; animation: beat 1.1s ease-in-out infinite; max-width: calc(100vw - 32px); }
@keyframes beat { 50% { box-shadow: 0 0 0 8px rgba(255, 210, 31, .35); } }

.board { position: absolute; z-index: 4; top: 76px; right: var(--gut); bottom: 24px; width: min(42vw, 600px); display: flex; flex-direction: column; opacity: 0; will-change: opacity, transform; }
.anchor { position: absolute; top: 132vh; top: 132svh; }
.board h2 { font-size: clamp(2rem, 3.6vw, 3.2rem); }
.board .note { margin-top: 8px; font-size: .95rem; max-width: 38em; }
.board .reh { margin-top: 10px; padding: 8px 12px; border-radius: 10px; background: var(--yolk); color: var(--ink); font-size: .88rem; font-weight: 600; }
.rows { margin-top: 14px; border-top: 2px solid rgba(255, 255, 255, .85); overflow: hidden; }
.rows li > * { display: grid; grid-template-columns: 24px 38px minmax(0, 1fr) minmax(50px, 96px) 58px 58px; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid rgba(255, 255, 255, .28); text-decoration: none; font-variant-numeric: tabular-nums; }
.rows li:first-child > * { background: linear-gradient(90deg, rgba(255, 210, 31, .22), transparent 70%); }
.rows li:hover > * { background: rgba(255, 255, 255, .12); }
.rows .none { padding: 18px 0; }
.rk { font-weight: 800; font-size: .95rem; }
.pic { width: 36px; height: 36px; border-radius: 50%; background: #fff url(../img/coins.webp?v=17) no-repeat; background-size: 600%; box-shadow: 0 0 0 2px #fff; }
.pic.own { background-size: cover; background-position: center; }
.nm { min-width: 0; display: grid; line-height: 1.15; }
.nm b { font-weight: 800; font-stretch: 112%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nm i { font-style: normal; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .24); overflow: hidden; }
.bar s { display: block; height: 100%; border-radius: 3px; background: var(--yolk); transition: width .8s var(--out); }
.pc { text-align: right; font-weight: 800; }
.cp { text-align: right; font-size: .9rem; }
.more { margin-top: 8px; font-size: .9rem; }

/* how it works: four posters that slide over each other */
.band { position: sticky; top: 0; min-height: 82vh; min-height: 82svh; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; padding: 96px var(--gut) 64px; overflow: hidden; color: #fff; }
.band > canvas, .launch > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.band .in { position: relative; max-width: min(760px, 62vw); }
.band h2 { font-size: clamp(3.6rem, 13vw, 12rem); letter-spacing: -.045em; }
.band p { margin-top: 18px; max-width: 33em; font-size: clamp(1.1rem, 1.6vw, 1.4rem); font-weight: 500; line-height: 1.4; text-wrap: pretty; }
.pict { position: absolute; left: 84%; top: 50%; translate: -50% -50%; width: clamp(110px, 19vw, 280px); height: clamp(110px, 19vw, 280px); color: #fff; }
.b1 { background: var(--verm); } .b2 { background: var(--magenta); } .b3 { background: var(--yolk); } .b4 { background: var(--deep); }
.ink, .band .ink, .b1 p, .b2 p { color: var(--ink); }
.b1 p, .b2 p { font-weight: 600; }

/* the pot */
.pot { position: relative; z-index: 1; padding: clamp(96px, 12vw, 170px) 0; background: var(--yolk); color: var(--ink); overflow: hidden; }
.pot > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.wrap { position: relative; width: min(100% - var(--gut) * 2, 1320px); margin: 0 auto; }
.pot h2 { max-width: 12em; }
.count { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; margin-top: 36px; }
.count b { font-size: clamp(3rem, 9vw, 8.5rem); font-weight: 800; font-stretch: 118%; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink); }
.count > span { font-size: clamp(1.3rem, 2.4vw, 2.2rem); font-weight: 600; }
.count em { padding: 4px 10px; border-radius: 8px; background: var(--ink); color: var(--yolk); font-style: normal; font-weight: 700; font-size: .85rem; }
.flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(40px, 6vw, 80px); border-top: 3px solid var(--ink); }
.flow li { position: relative; padding: 26px 22px 0 0; }
.flow li::before { content: ''; position: absolute; top: -12px; left: 0; width: 21px; height: 21px; border-radius: 50%; box-shadow: 0 0 0 3px var(--yolk); background: var(--c); }
.flow li:nth-child(1) { --c: var(--ultra); } .flow li:nth-child(2) { --c: var(--magenta); } .flow li:nth-child(3) { --c: var(--verm); } .flow li:nth-child(4) { --c: var(--pearl); }
.flow b { display: block; font-size: clamp(1.2rem, 1.9vw, 1.65rem); font-weight: 800; font-stretch: 112%; letter-spacing: -.015em; line-height: 1.1; }
.flow > li > span { display: block; margin-top: 8px; max-width: 22em; font-size: 1rem; font-weight: 500; }
.flow a { font-weight: 700; }

/* play */
.play { position: relative; z-index: 1; padding: clamp(80px, 10vw, 140px) 0; background: var(--deep); overflow: hidden; }
.play > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.play .two { align-items: center; }
.play .sub { margin-top: 18px; max-width: 30em; font-size: clamp(1.1rem, 1.5vw, 1.35rem); font-weight: 500; line-height: 1.4; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.chips button { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 4px 13px 4px 5px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; font: 700 .92rem/1 Archivo, sans-serif; font-stretch: 112%; cursor: pointer; transition: background .2s; }
.chips button:hover { background: rgba(255, 255, 255, .26); }
.chips button[aria-pressed="true"] { background: var(--yolk); color: var(--ink); }
.chips .pic { width: 32px; height: 32px; }
.play .cta { margin-top: 24px; }
.now { margin-top: 18px; font-weight: 600; }
.keys { margin-top: 6px; font-size: .94rem; }
.demo { position: relative; aspect-ratio: 1; width: 100%; max-width: 560px; justify-self: center; }
.demo canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* the game */
html.gaming, html.gaming body { overflow: hidden; }
.game { position: fixed; inset: 0; z-index: 50; background: var(--deep); overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.game canvas#gField, .game canvas#gTop { position: absolute; inset: 0; width: 100%; height: 100%; }
#gTop { cursor: crosshair; }
.ghud { position: absolute; left: 16px; top: 14px; display: flex; gap: 22px; padding: 10px 18px; border-radius: 18px; background: rgba(16, 13, 134, .78); color: #fff; }
.ghud div { display: grid; gap: 1px; min-width: 52px; }
.ghud span { font-size: .78rem; font-weight: 500; }
.ghud b { font-size: 1.3rem; font-weight: 800; font-stretch: 112%; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stam { min-width: 110px !important; align-content: center; }
.stam i { display: block; height: 8px; margin-top: 6px; border-radius: 4px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.stam s { display: block; height: 100%; background: var(--yolk); transform-origin: left; }
.gmap { position: absolute; right: 16px; bottom: 16px; }
.gclose { position: absolute; right: 16px; top: 14px; background: var(--pearl); color: var(--ink); }
.gsprint { position: absolute; left: 16px; bottom: calc(20px + env(safe-area-inset-bottom)); width: 96px; height: 96px; border: 0; border-radius: 50%; background: var(--yolk); color: var(--ink); font: 800 1rem/1 Archivo, sans-serif; font-stretch: 112%; touch-action: none; box-shadow: 0 0 0 5px rgba(255, 255, 255, .4); }
.gsprint:active { background: #fff; }
.gcount { position: absolute; left: 0; right: 0; top: 27%; translate: 0 -50%; text-align: center; font-size: clamp(5rem, 18vw, 12rem); font-weight: 800; font-stretch: 125%; letter-spacing: -.04em; line-height: 1; color: #fff; pointer-events: none; text-shadow: 0 6px 30px rgba(16, 13, 134, .6); }
.gcenter { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; gap: 6px; width: min(90vw, 460px); padding: 26px 30px; border-radius: 24px; background: var(--pearl); color: var(--ink); text-align: center; }
.gcenter b { font-size: 1.7rem; font-weight: 800; font-stretch: 118%; letter-spacing: -.02em; line-height: 1.1; }
.gend { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: min(92vw, 520px); max-height: 92svh; overflow: auto; padding: clamp(22px, 4vw, 36px); border-radius: 28px; background: #17151F; color: #E9E4DC; }
.gend h2 { font-size: clamp(2.4rem, 7vw, 3.6rem); }
.gend > p { margin-top: 10px; }
.gend ol { margin-top: 18px; border-top: 2px solid rgba(233, 228, 220, .8); }
.gend li { display: grid; grid-template-columns: 22px 34px 1fr auto; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid rgba(233, 228, 220, .25); font-variant-numeric: tabular-nums; }
.gend li.me { color: var(--yolk); }
.gend li b { font-weight: 800; font-stretch: 112%; }
.gend li i { font-style: normal; }
.gend .pic { width: 32px; height: 32px; }
.gend .cta { margin-top: 20px; gap: 10px; }
.gend .btn { min-height: 48px; padding: 0 20px; font-size: .95rem; }
.gend .btn.line { box-shadow: inset 0 0 0 2px rgba(233, 228, 220, .8); color: #E9E4DC; }
.gend .btn.line:hover { background: #E9E4DC; color: #17151F; }

/* launch */
.launch { position: relative; z-index: 1; padding: clamp(80px, 11vw, 150px) 0; background: var(--rose); overflow: hidden; }
.two { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.pitch p { margin-top: 18px; max-width: 26em; font-size: clamp(1.1rem, 1.5vw, 1.35rem); font-weight: 500; }
.dish { position: relative; margin-top: 34px; aspect-ratio: 16 / 7; max-width: 520px; }
.dish canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.dish span { position: absolute; left: 0; bottom: 0; padding: 5px 13px; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 800; font-stretch: 112%; }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: clamp(20px, 3vw, 36px); border-radius: 28px; background: var(--pearl); color: var(--ink); box-shadow: 0 30px 60px -28px rgba(70, 0, 80, .75); }
.wide, .drop { grid-column: 1 / -1; }
.field { display: grid; gap: 6px; font-size: .92rem; font-weight: 600; min-width: 0; }
.field input, .field textarea { width: 100%; padding: 13px 14px; border: 0; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1.5px rgba(16, 13, 86, .3); color: var(--ink); font: 500 1rem/1.3 Archivo, sans-serif; resize: vertical; transition: box-shadow .2s; }
.field input::placeholder, .field textarea::placeholder { color: rgba(16, 13, 86, .62); }
.field input:focus, .field textarea:focus { outline: 0; box-shadow: inset 0 0 0 2.5px var(--ultra); }
.field.bad input { box-shadow: inset 0 0 0 2.5px var(--verm); }
.drop { position: relative; display: grid; place-items: center; min-height: 124px; border-radius: 16px; background: #fff center / cover no-repeat; box-shadow: inset 0 0 0 1.5px rgba(16, 13, 86, .3); cursor: pointer; text-align: center; font-weight: 700; transition: box-shadow .2s; }
.drop:hover, .drop.over, .drop:focus-within { box-shadow: inset 0 0 0 2.5px var(--ultra); }
.drop.has span { display: none; }
.drop.has { min-height: 170px; background-size: contain; }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop small { display: block; margin-top: 3px; font-weight: 500; font-size: .86rem; }
.err { padding: 11px 14px; border-radius: 12px; background: #FFE3DF; color: #9C1608; font-weight: 600; font-size: .95rem; }
.steps { display: grid; gap: 5px; font-size: .95rem; font-weight: 500; }
.steps li { padding-left: 22px; position: relative; opacity: .62; }
.steps li::before { content: ''; position: absolute; left: 2px; top: .42em; width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 2px currentColor; }
.steps li.active, .steps li.done, .steps li.failed { opacity: 1; }
.steps li.active::before { background: var(--mari); animation: beat 1s infinite; }
.steps li.done::before { background: var(--ultra); box-shadow: none; }
.steps li.failed { color: #9C1608; }
.steps li.failed::before { background: var(--verm); box-shadow: none; }
.form .btn { width: 100%; }
.cost { font-size: .9rem; }
.donebox { padding: 34px; border-radius: 28px; background: var(--pearl); color: var(--ink); display: grid; gap: 14px; justify-items: start; }
.donebox h3 { font-size: 1.9rem; font-weight: 800; font-stretch: 118%; letter-spacing: -.02em; line-height: 1.05; }
.donebox .btn { background: var(--ink); color: #fff; }

/* rules */
.rules { position: relative; z-index: 1; padding: clamp(80px, 11vw, 150px) 0; background: var(--lilac); color: var(--ink); }
.rules h2 { max-width: 15em; font-size: clamp(2rem, 4.2vw, 3.8rem); }
.rules ol { columns: 2 340px; column-gap: clamp(32px, 6vw, 96px); margin-top: clamp(32px, 5vw, 64px); }
.rules li { break-inside: avoid; padding: 16px 0; border-top: 2px solid rgba(16, 13, 86, .85); font-size: 1.08rem; line-height: 1.45; }
.rules li b { font-weight: 800; font-stretch: 112%; }
.fine { margin-top: 40px; max-width: 62em; font-size: .94rem; }

/* footer */
.foot { position: relative; z-index: 1; padding: 40px var(--gut) 28px; background: var(--deep); color: #fff; }
.word { display: block; width: 100%; height: auto; overflow: visible; }
.word text { font: 800 146px Archivo, sans-serif; font-stretch: 125%; letter-spacing: -5px; paint-order: stroke; stroke-linejoin: round; }
.e1 { fill: var(--ultra); stroke: var(--ultra); stroke-width: 26px; }
.e2 { fill: var(--magenta); stroke: var(--magenta); stroke-width: 19.5px; }
.e3 { fill: var(--verm); stroke: var(--verm); stroke-width: 13px; }
.e4 { fill: var(--mari); stroke: var(--mari); stroke-width: 6.5px; }
.e5 { fill: var(--pearl); }
.foot p { margin-top: 26px; font-size: .92rem; }

/* the memorial: the colour has gone, only the egg and the winner keep any */
html[data-sealed="yes"] body { background: #E9E4DC; }
html[data-sealed="yes"] .nav { background: #17151F; color: #E9E4DC; box-shadow: none; }
html[data-sealed="yes"] .hero .lead { text-shadow: none; }
.hero .dead h1 { font-size: clamp(3.6rem, 9vw, 8rem); letter-spacing: -.045em; }
.hero .dead b { font-weight: 800; font-stretch: 112%; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; margin-top: 28px; max-width: 540px; }
.facts div { border-top: 2px solid #17151F; padding-top: 7px; }
.facts dt { font-size: .92rem; }
.facts dd { font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 800; font-stretch: 112%; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.paid { margin-top: 18px; font-weight: 500; }
.end { margin-top: 8px; font-weight: 700; }
.wallsec { padding: clamp(64px, 9vw, 120px) 0; background: #E9E4DC; color: #17151F; }
.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 28px; margin-top: 34px; border-top: 2px solid #17151F; }
.wall li { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid rgba(23, 21, 31, .3); font-variant-numeric: tabular-nums; }
.wall b { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wall .pic { filter: grayscale(1); box-shadow: 0 0 0 1px #17151F; }
html[data-sealed="yes"] .foot { background: #17151F; }
html[data-sealed="yes"] .foot .e1, html[data-sealed="yes"] .foot .e2, html[data-sealed="yes"] .foot .e3, html[data-sealed="yes"] .foot .e4 { fill: none; stroke: #3b3946; stroke-width: 1px; }
html[data-sealed="yes"] .foot .e5 { fill: #E9E4DC; }

/* phones */
@media (max-width: 820px) {
  body { font-size: 17px; }
  .links { display: none; }
  .nav { width: calc(100vw - 24px); justify-content: space-between; padding-left: 12px; }
  .btn.small { padding: 0 14px; font-size: .86rem; min-height: 38px; }
  .seg { margin: 0 2px; }
  .seg button { min-height: 34px; padding: 0 10px; font-size: .78rem; }
  .brand { font-size: .95rem; margin-right: 6px; }
  .brand { margin-right: auto; }
  .hero { left: 16px; right: 16px; top: auto; bottom: 104px; width: auto; translate: none; }
  .hero h1 { font-size: clamp(2.5rem, 11.4vw, 3.4rem); }
  .hero .lead { margin-top: 12px; font-size: 1rem; line-height: 1.35; }
  .cta { margin-top: 18px; gap: 10px; }
  .cta .watch { display: none; }
  .cta .btn { flex: 1 1 0; min-height: 52px; padding: 0 12px; font-size: .95rem; white-space: nowrap; }
  .strip { left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom)); justify-content: space-between; gap: 10px; }
  .strip div:nth-child(n+3) { display: none; }
  .strip div:first-child { flex: 1; }
  .board { left: 16px; right: 16px; width: auto; top: auto; height: 49svh; bottom: calc(10px + env(safe-area-inset-bottom)); }
  .board h2, .board .note { display: none; }
  .board .reh { margin-top: 0; font-size: .8rem; padding: 6px 10px; }
  .rows { margin-top: 8px; }
  .rows li > * { grid-template-columns: 18px 32px minmax(0, 1fr) 48px 48px; gap: 8px; padding: 5px 0; font-size: .92rem; }
  .bar { display: none; }
  .pic { width: 30px; height: 30px; }
  .band { grid-template-columns: minmax(0, 1fr); align-content: end; padding: 110px 16px 40px; min-height: 76svh; }
  .pict { width: 96px; height: 96px; }
  .band .in { max-width: none; }
  .band h2 { font-size: clamp(3rem, 15.6vw, 5rem); }
  .flow { grid-template-columns: minmax(0, 1fr); border-top: 0; border-left: 3px solid var(--ink); }
  .flow li { padding: 0 0 26px 24px; }
  .flow li:last-child { padding-bottom: 0; }
  .flow li::before { top: 2px; left: -12px; }
  .two { grid-template-columns: minmax(0, 1fr); }
  .form { grid-template-columns: minmax(0, 1fr); border-radius: 22px; }
  .ghud { left: 10px; top: 10px; gap: 12px; padding: 7px 12px; }
  .ghud div { min-width: 0; }
  .ghud b { font-size: 1rem; }
  .ghud .stam { display: none; }
  .gclose { right: 10px; top: 10px; }
  .gmap { right: 10px; bottom: 14px; }
  .demo { max-width: 340px; }
  .hero .dead h1 { font-size: 17vw; }
  .facts { gap: 10px 18px; margin-top: 16px; }
  .facts dd { font-size: 1.25rem; }
  html[data-sealed="yes"] .hero { bottom: 24px; }
}
@media (max-width: 560px) { .nav .btn.small { display: none; } .nav { padding-right: 4px; } }
@media (max-height: 700px) and (min-width: 821px) {
  .hero h1 { font-size: clamp(2.4rem, 5vw, 4.4rem); }
  .rows li > * { padding: 4px 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sealing, .steps li.active::before { animation: none; }
}