/* Piczzle web — brand tokens mirror the app (src/theme, LaunchSplash). */
@font-face{font-family:Newsreader;font-weight:400;font-display:swap;src:url(/brand/newsreader-400.ttf) format("truetype")}
@font-face{font-family:Newsreader;font-weight:500;font-display:swap;src:url(/brand/newsreader-500.ttf) format("truetype")}
@font-face{font-family:"JetBrains Mono";font-weight:500;font-display:swap;src:url(/brand/jetbrains-mono-500.ttf) format("truetype")}
:root{--cream:#EFEAE1;--ink:#1E2826;--ink2:#5C5346;--ink3:#8C8273;--teal:#0F766E;--sage:#5B6B67}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font-family:Newsreader,Georgia,serif}

/* The lockup: "Piczzle" with a dotless ı whose dot is the teal keystone.
   Geometry from the launch animation's resting frame (46 pt wordmark):
   keystone body 13/46 em, seated 0.549 em above the baseline, centred
   0.038 em left of the ı (the right tab balances it). Newsreader's ascent
   is 1470/2000, so with line-height 1 the baseline sits 0.265 em up. */
.lockup{display:inline-flex;align-items:baseline;font-family:Newsreader,Georgia,serif;font-weight:500;line-height:1;letter-spacing:-.011em;color:var(--ink);text-decoration:none;white-space:nowrap}
.lockup .i{position:relative;margin:0 .0326em 0 .0652em}
.lockup .i img{position:absolute;left:calc(50% - .1795em);bottom:.814em;width:.359em;height:.359em}

.mark{display:block;border-radius:6.7%;box-shadow:0 1px 2px rgba(30,40,38,.10),0 10px 28px -8px rgba(30,40,38,.30)}
.tagline{font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:500;text-transform:uppercase;letter-spacing:.25em;color:var(--sage)}
a.btn{display:inline-block;background:var(--teal);color:#fff;text-decoration:none;border-radius:16px;padding:16px 32px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-weight:600;font-size:17px;box-shadow:0 8px 20px -10px rgba(15,118,110,.7)}

/* Legal / support pages */
.top{display:flex;align-items:center;gap:12px;padding:4px 0 6px}
.top .mark{width:34px;height:34px;border-radius:3px;box-shadow:0 1px 2px rgba(30,40,38,.12),0 4px 10px -4px rgba(30,40,38,.3)}
.top .lockup{font-size:26px}