/* Pinky's web pages: the app's palette (core/BrandArgb.kt) and fonts, flat blocks, no shadows. */
@font-face { font-family: "Archivo Black"; src: url("fonts/ArchivoBlack.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Archivo"; src: url("fonts/Archivo.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }

:root { --lime: #D7FF3B; --pink: #FF3C8E; --ink: #141414; --bg: #FFFFFF; --muted: #555555; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: "Archivo", system-ui, sans-serif; font-size: 17px; line-height: 1.4; }
.wrap { max-width: 520px; margin: 0 auto; padding: 0 24px; }
.band { border-bottom: 3px solid var(--ink); padding: 20px 0 28px; }
.lime { background: var(--lime); }
.pink { background: var(--pink); }
.brand { display: flex; align-items: center; gap: 10px; margin-bottom: 36px; }
.rings { width: 44px; height: 28px; }
.rings circle { fill: none; stroke-width: 3.5; }
.rings circle:first-child { stroke: var(--ink); }
.rings circle:last-child { stroke: var(--pink); }
.word { font-family: "Archivo Black", sans-serif; font-size: 26px; letter-spacing: -0.5px; }
.kicker { margin: 0 0 10px; font-family: "Archivo Black", sans-serif; font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; }
h1 { margin: 0; font-family: "Archivo Black", sans-serif; font-size: 44px; line-height: 1.02; letter-spacing: -0.5px; }
h2 { margin: 36px 0 12px; font-family: "Archivo Black", sans-serif; font-size: 22px; }
.lead { margin: 24px 0; font-size: 19px; }
.code-box { border: 3px solid var(--ink); background: var(--lime); padding: 14px 16px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 4px; }
.label { font-size: 13px; font-weight: 700; }
.code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 700; font-size: 24px; letter-spacing: 1px; }
.pill { display: flex; align-items: center; justify-content: center; height: 60px; border-radius: 999px; background: var(--ink); color: var(--lime); font-family: "Archivo Black", sans-serif; font-size: 19px; text-decoration: none; }
.box { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 18px; border: 3px solid var(--ink); background: var(--bg); color: var(--ink); font-family: "Archivo Black", sans-serif; font-size: 15px; text-decoration: none; cursor: pointer; }
.box.off { border-color: #999; color: #777; cursor: default; }
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.steps li { display: flex; gap: 14px; align-items: flex-start; }
.steps .n { flex: none; width: 36px; height: 36px; border: 3px solid var(--ink); display: flex; align-items: center; justify-content: center; font-family: "Archivo Black", sans-serif; }
.steps .box { margin-top: 10px; }
.steps li > div > .box { display: flex; width: fit-content; }
.stores { display: flex; flex-wrap: wrap; gap: 10px; }
.note { display: block; margin-top: 6px; font-weight: 700; }
.foot { margin-top: 48px; padding-top: 18px; padding-bottom: 40px; border-top: 3px solid var(--ink); font-size: 14px; color: var(--muted); }
.foot a { color: var(--ink); font-weight: 700; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }
main a:not(.box):not(.pill) { color: var(--ink); font-weight: 700; }
#android .note, .steps .note { font-weight: 400; }
.store { gap: 10px; height: auto; min-height: 56px; padding: 8px 16px 8px 12px; text-align: left; }
.store svg { width: 26px; height: 26px; flex: none; fill: currentColor; }
.store span { display: flex; flex-direction: column; line-height: 1.1; font-family: "Archivo Black", sans-serif; font-size: 17px; }
.store small { font-family: "Archivo", sans-serif; font-weight: 600; font-size: 12px; }