/* kongi.co's design system. Every page loads this first, then its own sheet (styles.css, doc.css or careers.css).
   One white page; one grey for every fill (the app's DS.well); ink for words, Kongi green for the main button.
   Borderless (CLAUDE.md): a card, tile, field or chip is set apart by its fill, never an outline; an ink ring shows only
   while a field is in use. The header and footer are web.HEADER and web.FOOTER (the shop's own header has Browse and search,
   web.SHOP_HEADER; the logo alone and a line of links, web.FOCUSED and web.MINI, where there's one thing to do); scripts/site_chrome.py copies them onto
   the static pages, and tests/test_site.py fails if a page drifts. */
@font-face { font-family: "GT Standard"; src: url(/fonts/GTStandard-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "GT Standard"; src: url(/fonts/GTStandard-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "GT Standard"; src: url(/fonts/GTStandard-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
:root {
  --forest: #0e5b3f;              /* Kongi green: the main button */
  --forest-deep: #0b4c34;
  --ink: #0d0d0d;
  --paper: #ffffff;               /* every page */
  --tile: #f2f2f7;                /* every fill: fields, chips, cards, boxes, photo tiles */
  --tile-deep: #e5e5ea;           /* a fill under the pointer, a box not yet ticked */
  --muted: rgba(13, 13, 13, .64); /* secondary words */
  --faint: rgba(13, 13, 13, .5);  /* placeholders, small print */
  --line: rgba(13, 13, 13, .1);   /* hairlines between rows and under the header, nothing else */
  --sale: #cc0d38;                /* deals only */
  --danger: #d70015;              /* the last button of something that can't be undone, nothing else */
  --star: #f5b017;                /* rating stars only */
  --protect: #007aff;             /* Kongi Protection's seal only */
  --night: #111111;               /* the footer, dark sheets */
  --muted-dark: rgba(255, 255, 255, .72);
  --reveal: cubic-bezier(.58, 0, .2, 1);
  --press: cubic-bezier(.23, 1, .32, 1);
  /* Marketing pages share the homepage's proportions. */
  --marketing-width: 1100px;
  --marketing-space: clamp(48px, 6vw, 88px);
  --marketing-title: clamp(44px, 6.5vw, 80px);
  --marketing-heading: clamp(34px, 4.1vw, 52px);
  --marketing-radius: 32px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scrollbar-gutter: stable; }
/* the footer sits at the bottom of the screen even when the page is shorter */
body { min-height: 100svh; display: flex; flex-direction: column; font-family: "GT Standard", system-ui, -apple-system, sans-serif;
  color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; }
body > main { flex: 1 0 auto; width: 100%; }
/* a short page (no orders yet, a 404) still takes most of the screen, so the footer shows under it without filling half */
body:has(> footer:not(.mini)) > main { min-height: 70svh; }
a { color: inherit; text-decoration: none; }
[id] { scroll-margin-top: 96px; }  /* a link to a heading (#kongi-protection) lands under the sticky header, not behind it */
.logo { font-weight: 600; font-size: 28px; line-height: 1; letter-spacing: -.045em; }
.badge img { display: block; height: 44px; width: auto; }
.badges { display: flex; flex-wrap: wrap; gap: 12px; }  /* the App Store's and Google Play's, side by side */

/* buttons: green for the one thing to do, grey for the rest, no outlines */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border: 0;
  border-radius: 999px; background: none; color: inherit; font: 500 16px/1 "GT Standard", system-ui, sans-serif; cursor: pointer;
  white-space: nowrap; transition: transform .2s var(--press), opacity .16s, background-color .2s, color .2s; }
.btn.solid { background: var(--forest); color: var(--paper); }
.btn.gray { background: var(--tile); color: var(--ink); }
.btn.light { background: var(--paper); color: var(--ink); }  /* on a dark sheet */
.btn.danger { background: var(--danger); color: var(--paper); }
.btn.big { height: 56px; padding: 0 30px; font-size: 18px; }
.btn.wide { width: 100%; }
.btn:disabled { opacity: .5; cursor: default; transform: none; }
@media (hover: hover) {
  .btn:hover { transform: translateY(-1px); }
  .btn.solid:hover { background: var(--forest-deep); }
  .btn.gray:hover, .btn.text:hover { background: var(--tile-deep); }
  .btn.light:hover { background: var(--tile-deep); }  /* not the tile's own grey: it sits on tiles */
  .btn.danger:hover { background: #b80012; }
  .badge img { transition: transform .2s var(--press), opacity .2s; }
  .badge:hover img { transform: translateY(-1px); opacity: .85; }
}
.btn:active { transform: scale(.96); }
@media (max-width: 760px) {
  .btn { height: 38px; padding: 0 14px; font-size: 14px; }
  .btn.big { height: 44px; padding: 0 24px; font-size: 15px; }
}

/* --- the site's header (the homepage's): the logo, then For brands, Log in and Sign up, full width --- */
.site-bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between;
  padding: 18px clamp(16px, 3vw, 28px); background: var(--paper); }
.site-bar .actions { display: flex; align-items: center; gap: 8px; }
.site-bar .btn.gray { background: var(--tile-deep); }  /* Log In, as the homepage hero's Learn More: the plain grey faded on white */
@media (hover: hover) { .site-bar .btn.gray:hover { background: #d8d8de; } }
@media (max-width: 760px) { .site-bar .btn.text:not(.shop-link), .site-bar .btn.gray { display: none; } }  /* phones: Shop and Download */

/* going from page to page on the site, the next page fades in over the last (a view transition) instead of the screen
   blanking while it loads; where browsers don't do it, an ordinary page load */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
/* --- the shop's header (Cosmos's, measured at 1440 wide: 92px tall, 32px in; the logo and Browse on the left, the search
   bar in the middle, Log in and the main button on the right, both 48px pills; sticky, a hairline under it) --- */
.shop-bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 24px; height: 92px;
  padding: 0 clamp(16px, 3vw, 32px); background: var(--paper); border-bottom: 1px solid transparent;
  transition: background-color .3s cubic-bezier(.22, 1, .36, 1), border-color .3s cubic-bezier(.22, 1, .36, 1); }
/* (no view-transition-name on it: that cuts it off from what's behind, and its glass pills (backdrop-filter) then blur nothing) */
.shop-bar:not(.bare) { display: grid; grid-template-columns: 1fr minmax(0, 600px) 1fr; }
/* while the search is in use everything but it dims, the header too (Cosmos's): the header under its own veil, the page
   under the scrim below it */
.shop-bar::after { content: ""; position: absolute; inset: 0 0 -1px; z-index: 30; background: rgba(13, 13, 13, .4); opacity: 0;
  pointer-events: none; transition: opacity .15s cubic-bezier(0, 0, .2, 1); }
.searching .shop-bar::after { opacity: 1; pointer-events: auto; }
/* the logo alone, to the shop's front (Etsy's, Depop's): the homepage is the footer's logo; trimmed to its letters (cap
   height to baseline, the g's tail hanging below), so it centers by what shows */
.shop-left { display: flex; align-items: center; min-width: 0; }
.shop-left .logo { text-box: trim-both cap alphabetic; }
.shop-bar .btn { height: 48px; padding: 0 24px; font-size: 15px; font-weight: 500; letter-spacing: -.02em; }
.shop-bar .btn.text { color: var(--muted); }
.shop-bar .btn.text:hover { color: var(--ink); }
.shop-bar .actions { display: flex; align-items: center; gap: 4px; justify-self: end; }
/* signed in (Depop's, Whatnot's): their photo or initial instead of Log in and Start earning, opening a small menu */
.signed-in .shop-bar .actions > :is(.login, .join, .me-link) { display: none; }
.shop-bar .actions > .avatar { display: none; }
.signed-in .shop-bar .actions > .avatar { display: grid; }
.avatar { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; overflow: hidden; border: 0; border-radius: 50%;
  background: var(--forest); color: var(--paper); font: 600 15px "GT Standard", system-ui, sans-serif; cursor: pointer; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.avatar:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* the bag beside it (Depop's, Nike's): how many are in it on a small ink pill */
.bag-link, .me-link { position: relative; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: var(--ink);
  transition: background-color .2s; }
.bag-link:hover, .me-link:hover { background: var(--tile); }
.me-link { display: none; }  /* a phone's Log in, signed out */
.bag-link svg, .me-link svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bag-count { position: absolute; top: -2px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--ink); color: var(--paper); font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; }
.account-menu { position: absolute; top: 58px; right: max(clamp(16px, 3vw, 32px), calc((100% - 1240px) / 2)); z-index: 20;
  width: 280px; padding: 6px; border-radius: 16px; background: var(--paper); box-shadow: 0 10px 30px rgba(0, 0, 0, .08); }
.account-menu .who { display: flex; align-items: center; gap: 12px; padding: 10px 10px 14px; margin-bottom: 6px;
  border-bottom: 1px solid var(--line); min-width: 0; }
.account-menu .who > span:last-child { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.account-menu .who b { font-weight: 600; }
.account-menu .who b + span { color: var(--muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu .who .avatar { flex: none; width: 40px; height: 40px; cursor: default; }
.menu-item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px; border: 0; border-radius: 10px; background: none;
  color: var(--ink); text-align: left; font: 400 15px "GT Standard", system-ui, sans-serif; cursor: pointer; }
.menu-item svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.menu-item:hover { background: var(--tile); }
.menu-note { margin-left: auto; color: var(--muted); font-size: 14px; }
/* the app at the end (Uber Eats' "There's more to love in the app") */
.menu-app { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; padding: 12px 10px; border-radius: 10px; background: var(--tile); }
.menu-app span { color: var(--muted); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
/* the search bar (Cosmos's, its own colors: an off-white pill with a 12% ink hairline and a glass edge, a warm grey
   hint): 457px in the middle, widening to 600px while in use as the page behind dims and the panel drops under it */
.shop-search { --search-bg: #fcfbfa; --search-hover: #f9f8f8; --search-chip: #f2f1ef; --search-hint: #9a9796; --search-label: #6d6a68;
  position: relative; justify-self: center; display: flex; align-items: center; gap: 8px; width: 457px; max-width: 100%; height: 56px;
  padding: 8px; border-radius: 999px; background: var(--search-bg); box-shadow: 0 0 0 1px rgba(13, 13, 13, .12),
  inset 0 1px 1.5px rgba(255, 255, 255, .7), inset 0 -1px 1.5px rgba(0, 0, 0, .03); cursor: text; z-index: 31;
  transition: width .3s cubic-bezier(0, 0, .2, 1), background-color .15s cubic-bezier(.4, 0, .2, 1), box-shadow .15s cubic-bezier(.4, 0, .2, 1); }
.shop-search:hover { background: var(--search-hover); }
.shop-search:focus-within { width: 600px; background: var(--search-bg); box-shadow: 0 0 0 1px rgba(13, 13, 13, .12); }
.shop-search input { flex: 1; min-width: 0; height: 100%; padding: 0 12px; border: 0; background: none; color: var(--ink);
  font: 400 14px "GT Standard", system-ui, sans-serif; letter-spacing: -.02em; outline: none; -webkit-appearance: none; appearance: none; }
.shop-search input::-webkit-search-cancel-button { display: none; }
/* the page dims behind it while it's in use (Cosmos's scrim: 40% ink, in and out in .15s) */
.shop-scrim { position: fixed; inset: var(--header-h, 92px) 0 0; z-index: 9; background: rgba(13, 13, 13, .4); opacity: 0; pointer-events: none;
  transition: opacity .15s cubic-bezier(0, 0, .2, 1); }
.shop-scrim.on { opacity: 1; pointer-events: auto; }
/* "Search for" and an idea that rolls up out of sight as the next rolls in (the app's), gone once they type */
.shop-hint { position: absolute; inset: 0 24px 0 20px; display: flex; align-items: center; gap: .3em; color: var(--search-hint);
  font-size: 14px; letter-spacing: -.02em; white-space: nowrap; pointer-events: none; transition: color .15s; }
.shop-search:hover .shop-hint { color: var(--search-label); }
.shop-hint span { position: relative; height: 20px; overflow: hidden; }
.shop-hint b { display: block; font-weight: 400; line-height: 20px; }
.shop-hint b + b { animation: hint-in .45s var(--press) both; }
.shop-hint b.out { position: absolute; top: 0; animation: hint-out .45s var(--press) both; }
@keyframes hint-in { from { transform: translateY(100%); opacity: 0; } }
@keyframes hint-out { to { transform: translateY(-100%); opacity: 0; } }
@keyframes hint-fade { from { opacity: 0; } }
.shop-search input:not(:placeholder-shown) + .shop-hint { display: none; }
/* its suggestions (Depop's): a panel under it, a row each, the typed letters in bold; the row the arrows are on in ink */
/* its panel (Cosmos's): as wide as the bar, 8px under it, 24px corners on the bar's off-white, scaling in from 98% in
   .12s; what's trending a row of chips (12px corners), what they type a row each with their letters in bold */
.shop-suggest { position: absolute; top: calc(100% + 8px); left: 0; width: 100%; z-index: 30; max-height: min(70vh, 520px); overflow-y: auto;
  padding: 12px; border-radius: 24px; background: var(--search-bg); box-shadow: 0 0 0 .5px rgba(13, 13, 13, .12), 0 1px 8px rgba(0, 0, 0, .05);
  scrollbar-width: none; animation: suggest-in .12s cubic-bezier(0, 0, .2, 1); }
.shop-suggest.trending { padding: 24px; }
@keyframes suggest-in { from { opacity: 0; transform: scale(.98); } }
.shop-suggest p { padding: 0 0 6px; color: var(--search-label); font-weight: 500; font-size: 14px; }
.shop-suggest:not(.trending) p { padding: 8px 12px 6px; }
.shop-chips-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 80px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 80px), transparent); }
.shop-chips-row::-webkit-scrollbar { display: none; }
.shop-suggest a { display: block; padding: 10px 12px; border-radius: 12px; color: var(--ink); font-size: 15px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background-color .15s cubic-bezier(.4, 0, .2, 1); }
.shop-chips-row a { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px 0 10px;
  background: var(--search-chip); font-size: 14px; font-weight: 500; letter-spacing: -.02em; }
.shop-chips-row.brands a { padding-left: 8px; }
.shop-chips-row img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; background: var(--paper); }
.shop-suggest .shop-chips-row + p { padding-top: 18px; }
.shop-chips-row svg { width: 20px; height: 20px; fill: none; stroke: var(--search-hint); stroke-width: 1.8; stroke-linecap: round; }
.shop-suggest a b { font-weight: 600; }
.shop-suggest a:hover { background: var(--search-chip); }
.shop-chips-row a:hover { background: #e9e8e6; }
.shop-suggest a.on { background: var(--ink); color: var(--paper); }
.shop-suggest a.on svg { stroke: currentColor; }
@media (prefers-reduced-motion: reduce) { .shop-hint b + b, .shop-hint b.out { animation-name: none; } .shop-hint b.out { display: none; } }
/* a brand's page (Cosmos's): the search looks in the brand, a chip at the start of the bar (its logo and name; the x
   searches everything again) */
.shop-scope { flex: none; display: flex; align-items: center; gap: 6px; height: 40px; max-width: 45%; padding: 8px 12px 8px 8px;
  border-radius: 999px; background: var(--paper); box-shadow: 0 0 0 1px var(--line); color: var(--ink); font-size: 14px; font-weight: 500;
  letter-spacing: -.02em; white-space: nowrap; animation: hint-fade .25s ease-out; }
.shop-scope span { overflow: hidden; text-overflow: ellipsis; }
.shop-scope i { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--tile) center / cover; display: grid; place-items: center;
  font-style: normal; font-size: 12px; }
/* its x sits on the logo, showing as the chip is pointed at (Cosmos's) */
.shop-scope { position: relative; }
.shop-scope button { position: absolute; left: 7px; top: 7px; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0;
  border-radius: 50%; background: var(--search-hover); color: var(--ink); cursor: pointer; opacity: 0; transition: opacity .15s; }
.shop-scope:hover button, .shop-scope button:focus-visible { opacity: 1; }
.over-media .shop-search:not(:focus-within) .shop-scope button { background: rgba(60, 60, 60, .9); color: #fff; }
.shop-scope svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.shop-search.scoped .shop-hint { left: calc(var(--scope-w, 0px) + 16px); }
.shop-search.scoped input { padding-left: 0; }
/* over a brand's photo: the header clear and its controls glass in white (Cosmos's), solid again once it's scrolled past */
.over-media .shop-bar { background: transparent; border-bottom-color: transparent;
  /* Cosmos's glass over a photo, exactly: 10% white over a 22px blur; the search bar and its chip edged in 12% white (their
     hairline border) and so are the buttons' pill; the logo's with no edge */
  --glass: rgba(255, 255, 255, .1); --glass-blur: blur(22px); --glass-edge: inset 0 0 0 1px rgba(245, 244, 242, .12); }
.shop-left, .shop-bar .actions { transition: background-color .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s cubic-bezier(.22, 1, .36, 1); }
.over-media .shop-left { justify-self: start; height: 56px; flex-wrap: wrap; align-content: center; margin-left: -8px; padding: 0 28px;
  border-radius: 999px; background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.over-media .shop-left:hover { background: rgba(255, 255, 255, .15); }  /* brighter under the pointer, as the search bar */
.over-media .shop-bar .actions { padding: 4px; border-radius: 999px; background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge); }
.over-media .shop-bar :is(.logo, .bag-link, .me-link) { color: #fff; }
.over-media .shop-bar .btn.text { color: rgba(255, 255, 255, .6); }
.over-media .shop-bar .btn.text:hover { color: #fff; background: rgba(255, 255, 255, .14); }  /* the glass brighter, the words still white */
.over-media .shop-bar .btn.solid { background: #fff; color: var(--ink); }  /* Cosmos's Sign up on a photo */
.over-media .shop-search:not(:focus-within) { background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge); }
.over-media .shop-search:not(:focus-within):hover { background: rgba(255, 255, 255, .15); }
.over-media .shop-search:not(:focus-within) input { color: #fff; }
.over-media .shop-search:not(:focus-within) .shop-hint { color: rgba(255, 255, 255, .6); }
.over-media .shop-search:not(:focus-within) .shop-scope { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: var(--glass-edge);
  transition: background-color .3s cubic-bezier(.22, 1, .36, 1); }
.over-media .shop-search:not(:focus-within) .shop-scope:hover { background: rgba(255, 255, 255, .2); }
/* where there's one thing to do (logging in, checking out): the logo alone, in the middle */
.shop-bar.bare { justify-content: center; }
.shop-bar.bare .logo { margin: 0 auto; }
/* phones (Whatnot's: the logo row, 16px in); the search bar gets a row of its own under it */
@media (max-width: 760px) {
  .shop-bar, .shop-bar:not(.bare) { display: flex; height: auto; flex-wrap: wrap; row-gap: 8px; padding-top: 12px; padding-bottom: 12px; }
  .shop-left { margin-right: auto; }
  .shop-bar .btn.text { display: none; }
  /* signed out (Etsy's, Depop's): the bag and an account icon, not the wide Start earning button */
  .shop-bar .btn.join { display: none; }
  .shop-bar .actions { gap: 4px; }
  .me-link { display: grid; }
  .shop-search, .shop-search:focus-within { order: 3; flex-basis: 100%; width: 100%; height: 48px; padding: 4px; }
  .shop-search input, .shop-hint { font-size: 16px; } /* under 16px, iOS Safari zooms in on focus */
}

/* --- the footer: the app to get, then Kongi, Brands, Help and Legal, then the year and @shopkongi --- */
footer { --pad: clamp(16px, 5vw, 64px); background: var(--night); color: var(--muted-dark); padding: 64px var(--pad) 28px; font-size: 15px; }
footer .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; flex-wrap: wrap; }
footer .brand { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
footer .brand .logo { color: var(--paper); font-size: 32px; }
footer .cols { display: grid; grid-template-columns: repeat(4, minmax(120px, auto)); gap: 32px clamp(32px, 6vw, 96px); }
footer nav { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
footer h4 { color: var(--paper); font-size: 15px; font-weight: 500; margin-bottom: 4px; }
footer nav a:hover { color: var(--paper); }
footer .base { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px;
  margin-top: 56px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .12); }
/* @shopkongi on each network, as icons (Depop, Whatnot, Vinted) */
footer .social { display: flex; gap: 20px; }
footer .social a { display: flex; }
footer .social a:hover { color: var(--paper); }
footer .social svg { width: 20px; height: 20px; fill: currentColor; }
/* desktop: scan to get the app (Depop); phones get the App Store badge instead */
footer .get-app { display: flex; align-items: center; gap: 16px; }
footer .get-app img { width: 72px; height: 72px; padding: 8px; background: var(--paper); border-radius: 14px; box-sizing: content-box; }
footer .get-app b { display: block; color: var(--paper); font-size: 16px; font-weight: 500; }
footer .get-app span { display: block; margin-top: 4px; max-width: 220px; line-height: 1.4; }
@media (min-width: 761px) { footer .brand .badge { display: none; } }
@media (max-width: 760px) { footer .cols { grid-template-columns: 1fr 1fr; } footer .get-app { display: none; } }
/* under the logo-alone header: a line of links (Shopify's checkout) */
footer.mini { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; padding: 24px 16px; border-top: 1px solid var(--line);
  background: var(--paper); color: var(--muted); font-size: 13px; }
footer.mini a:hover { color: var(--ink); text-decoration: underline; }

/* outside the US and Canada (country.js, Polymarket's "It looks like you're in…"): their flag, where Kongi ships, one
   button; a small dialog on a computer, a sheet up from the bottom on a phone, as confirmations are */
dialog.notice { width: min(400px, calc(100% - 32px)); margin: auto; padding: 32px 24px 24px; border: 0; border-radius: 20px;
  background: var(--paper); color: var(--ink); text-align: center; box-shadow: 0 30px 80px rgba(0, 0, 0, .25);
  animation: notice-in .3s var(--press); }
dialog.notice::backdrop { background: rgba(0, 0, 0, .45); }
@keyframes notice-in { from { opacity: 0; transform: translateY(16px); } }
.notice-flag { display: block; width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 16px; object-fit: cover;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }
.notice h2 { font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -.02em; }
.notice p { margin: 8px 0 24px; color: var(--muted); font-size: 15px; line-height: 1.45; }
.notice-x { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 32px; height: 32px;
  border: 0; border-radius: 50%; background: var(--tile); color: var(--ink); cursor: pointer; }
.notice-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@media (max-width: 760px) {
  dialog.notice { width: 100%; max-width: none; margin: auto 0 0; border-radius: 20px 20px 0 0;
    padding-bottom: max(24px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { dialog.notice { animation: none; } }