/* kongi.co's homepage, /brands and the shop. base.css comes first: the tokens, the header, the footer, the buttons. */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.scrim { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px;
  background: rgba(0, 0, 0, 0); transition: background .2s ease, backdrop-filter .2s ease, -webkit-backdrop-filter .2s ease; }
.scrim.on { background: rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }  /* Whatnot's: the page dims and softens behind */
.dialog { width: min(400px, 100%); background: var(--paper); color: var(--ink); border-radius: 16px; padding: 22px 24px 28px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .3); opacity: 0; transform: translateY(12px) scale(.98);
  transition: transform .3s var(--press), opacity .2s; }
.scrim.on .dialog { opacity: 1; transform: none; }
.dialog-head { display: flex; align-items: center; justify-content: space-between; }
.dialog h3 { font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.close { width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; font-size: 26px; line-height: 1; cursor: pointer; color: var(--ink); }
.close:hover { background: rgba(13, 13, 13, .06); }
.tabs { display: flex; gap: 20px; margin: 14px 0 22px; border-bottom: 1px solid rgba(13, 13, 13, .1); }
.tabs button { border: 0; background: none; font: 500 15px "GT Standard", system-ui, sans-serif; padding: 0 0 10px;
  color: rgba(13, 13, 13, .5); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.tabs button[aria-selected="true"] { color: var(--ink); border-color: var(--ink); }
.qr-body { display: grid; justify-items: center; text-align: center; gap: 14px; }
.qr-body > img { padding: 14px; border-radius: 16px; background: var(--tile); box-sizing: content-box; }
.qr-body .badges { justify-content: center; }
.qr-body p { font-size: 15px; line-height: 1.45; color: var(--muted); max-width: 280px; }
.lede { margin: 14px 0 22px; font-size: 16px; line-height: 1.5; color: var(--muted); }

section {
  position: relative; overflow: hidden;
  display: grid; place-items: center;
  padding: clamp(88px, 9vw, 144px) clamp(16px, 5vw, 64px);
}
#hero { min-height: calc(100svh - 80px); padding-top: 8px; }  /* under the 80px header */
#hero + section { margin-top: clamp(32px, 4vw, 64px); }
.row {
  position: relative; width: 100%; max-width: 1100px;
  display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(24px, 6vw, 88px);
}
.row.flip .copy { order: -1; }
.copy { max-width: 460px; }
h1, h2 { font-weight: 600; letter-spacing: -.035em; line-height: 1.02; }
h1 { font-size: clamp(40px, 6vw, 72px); }
h2 { font-size: clamp(34px, 4.6vw, 56px); }
.copy p, .stack p { text-wrap: balance; }
.copy p { margin-top: 16px; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.45; color: var(--muted); }
.soon { margin-top: 32px; }
#hero p { font-size: clamp(19px, 2.1vw, 24px); }
#close { padding-top: 0; }  /* right under Spend it on anything, which has its own space */
#hero .btn.gray { background: var(--tile-deep); }  /* the tiles' own grey vanished on the white wash over them */
@media (hover: hover) { #hero .btn.gray:hover { background: #d8d8de; } }

/* iPhone 17 Pro at its real proportions: a 402 x 874 pt screen with 55 pt corners and the Dynamic Island, an 11 pt
   black bezel and a thin titanium rim. Every size is a share of the frame, so it scales with the height. */
.phone {
  position: relative; height: min(640px, calc(100svh - 200px)); aspect-ratio: 424 / 896; justify-self: center;
  border-radius: 15.57% / 7.37%; background: #0b0b0c;
  box-shadow: 0 0 0 1.5px #48484c, 0 0 0 3px #1c1c1e, 0 60px 100px -30px rgba(0, 0, 0, .38), 0 24px 48px -12px rgba(0, 0, 0, .18);
}
.phone::before, .phone::after { content: ""; position: absolute; width: 1%; border-radius: 0 3px 3px 0; background: #2c2c2f; }
.phone::before { right: -1.6%; top: 24%; height: 10%; }                              /* side button */
.phone::after { left: -1.6%; top: 20%; height: 6%; border-radius: 3px 0 0 3px; }      /* action button */
.screen { position: absolute; inset: 1.228% 2.594%; border-radius: 13.68% / 6.29%; overflow: hidden; background: #fff;
  container-type: inline-size; isolation: isolate; }
.screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.screen::after { content: ""; position: absolute; top: 1.26%; left: 50%; width: 31.34%; height: 4.23%; translate: -50% 0;
  border-radius: 999px; background: #000; z-index: 3; }                               /* Dynamic Island */

/* the app's credit toast (UI.swift Toast: Liquid Glass, 44 pt, subheadline semibold) dropping in under the island,
   the same snappy spring as /brands' (keyframes toast) */
.ptoast { position: absolute; top: 7.8%; left: 50%; z-index: 2; display: flex; align-items: center; gap: 2cqw; height: 10.95cqw;
  padding: 0 4cqw; border-radius: 999px; white-space: nowrap; font-size: 3.75cqw; font-weight: 600; color: #0d0d0d;
  background: rgba(255, 255, 255, .72); backdrop-filter: blur(14px) saturate(1.8); -webkit-backdrop-filter: blur(14px) saturate(1.8);
  box-shadow: 0 1cqw 4cqw rgba(0, 0, 0, .14), inset 0 0 0 .3cqw rgba(255, 255, 255, .7);
  opacity: 0; transform: translate(-50%, -160%); }
.in .ptoast { animation: toast 4.2s .9s infinite; }

/* the bag: a tap on Use credit, then the credit line and the lower total (two real screenshots, crossfaded) */
.screen .on { opacity: 0; }
.screen .tap { position: absolute; left: 10.7%; top: 43.7%; width: 14cqw; aspect-ratio: 1; translate: -50% -50%; z-index: 2;
  border-radius: 50%; background: rgba(13, 13, 13, .18); opacity: 0; scale: .3; }
.in .screen .on { animation: credit-on 6s 1s infinite; }
.in .screen .tap { animation: credit-tap 6s 1s infinite; }
@keyframes credit-on { 0%, 24% { opacity: 0; } 28%, 88% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes credit-tap { 0%, 18% { opacity: 0; scale: .3; } 21% { opacity: 1; scale: 1; } 28%, 100% { opacity: 0; scale: 1.25; } }
/* the bag's numbers as pills, on the same loop as its credit: in as Use Credit is ticked, out as it's unticked */
.cycle { opacity: 0; transform: scale(.4); }
.in .cycle.a { animation: pill-a 6s 1s infinite; }
.in .cycle.b { animation: pill-b 6s 1s infinite; }
@keyframes pill-a { 0%, 28% { opacity: 0; transform: scale(.4); } 31% { opacity: 1; transform: scale(1.08); } 33%, 86% { opacity: 1; transform: none; }
  91%, 100% { opacity: 0; transform: scale(.4); } }
@keyframes pill-b { 0%, 32% { opacity: 0; transform: scale(.4); } 35% { opacity: 1; transform: scale(1.08); } 37%, 86% { opacity: 1; transform: none; }
  91%, 100% { opacity: 0; transform: scale(.4); } }

.t { border-radius: 20px; background: var(--tile) center / 80% no-repeat; }

.wall { position: absolute; inset: 0; padding: 0 0 24px; display: grid; grid-auto-rows: minmax(0, 1fr); gap: 12px; overflow: hidden; }
.wall-row { display: flex; gap: 12px; padding-right: 12px; width: max-content; will-change: transform; }
.wall-row .t { height: 100%; aspect-ratio: 1; flex: none; background-size: cover; }  /* its tile's grey is in the photo */
/* the middle softened for the headline as the app's welcome does it: the wall blurred under a half-white wash, through an
   oval that fades out, so the products still show through */
.wall::after { content: ""; position: absolute; inset: 0;
  background: color-mix(in srgb, var(--paper) 50%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  -webkit-mask-image: radial-gradient(ellipse 42% 38% at 50% 52%, #000 50%, transparent 100%);
  mask-image: radial-gradient(ellipse 42% 38% at 50% 52%, #000 50%, transparent 100%); }
.center { position: relative; max-width: 600px; text-align: center; }
.center p { margin-left: auto; margin-right: auto; max-width: 460px; }

.orbit { position: absolute; inset: 0; pointer-events: none; }
.orbit .t { position: absolute; left: var(--x); top: var(--y); width: var(--s); aspect-ratio: 1; box-shadow: 0 16px 40px rgba(0, 0, 0, .08);
  animation: bob 7s ease-in-out var(--d, 0s) infinite alternate; }
.orbit .far { filter: blur(3px); opacity: .6; }
@keyframes bob { to { translate: 0 -16px; } }
.stack { position: relative; display: grid; justify-items: center; text-align: center; }
.stack p { margin-top: 14px; max-width: 480px; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.45; color: var(--muted); }
.stack .phone { margin-top: 28px; height: min(540px, calc(100svh - 380px)); }

.cats { width: 100%; max-width: 520px; justify-self: center; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.search {
  grid-column: 1 / -1; height: 60px; border-radius: 999px; padding: 0 22px;
  display: flex; align-items: center; gap: 12px; background: var(--tile); font-size: 18px; font-weight: 600;
}
.search svg { width: 22px; height: 22px; flex: none; }
.caret { width: 2px; height: 24px; background: var(--ink); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.cat { aspect-ratio: 4 / 5; display: flex; align-items: flex-end; padding: 12px 14px; font-size: 15px; font-weight: 500; background-position: center 40%; background-size: 70%; }

.get { margin-top: 28px; display: flex; align-items: center; gap: 16px; }
.get .qr { width: 88px; height: 88px; padding: 10px; border-radius: 14px; background: var(--tile); box-sizing: content-box; }

.reveal { opacity: 0; transform: translateY(24px); transition: transform .45s var(--reveal) .08s, opacity .34s cubic-bezier(.42, 0, .2, 1) .08s; }
.in .reveal { opacity: 1; transform: none; }
.in .reveal.late { transition-delay: .16s; }
.in .reveal.later { transition-delay: .24s; }

/* kongi.co/brands, after Canva Creators' and Whatnot's seller pages: the promise in a big centered headline with the
   homepage's products floating around it, then each section shows the thing itself (an order, the app's own listings,
   the ad controls) on white with the one grey, and the homepage's product wall closes it. */
.cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.center .cta { justify-content: center; }
.brands h1, .brands h2 { text-wrap: balance; }
.brands #top { min-height: calc(100svh - 80px); padding-top: 8px; }
/* the subhead about as wide as the headline (Whop's, Framer's, Canva Creators'), one line where it fits: balanced into two
   short lines it read as an afterthought under the big type */
.brands #top .center { max-width: 760px; }
.brands #top .center p { max-width: 680px; margin-top: 20px; font-size: clamp(19px, 1.7vw, 22px); text-wrap: pretty; }

/* the model as a flow: Stripe's and Vercel's diagrams (one thin line a flow into a single port on the hub, a pulse of light
   running along each) in aaru.com's panel with a faint dot grid; the reader's brand the one accent (Kongi green) */
.brands #orders .wide { min-width: 0; }  /* a grid item: else the chart's phone width stretches the section */
.flow { margin-top: 48px; border-radius: 32px; background: var(--tile);
  background-image: radial-gradient(rgba(13, 13, 13, .09) 1px, transparent 1.2px); background-size: 18px 18px; }
.flow .scroll { padding: 24px 12px 8px; }
.flow .scroll svg { display: block; width: 100%; height: auto; font-family: "GT Standard", system-ui, sans-serif; }
.flow .base path { fill: none; stroke: #cfcfd6; stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.4s var(--reveal), opacity .5s; }
.flow .base path.pay { stroke: color-mix(in srgb, #0e5b3f 55%, transparent); stroke-width: 2; }
.flow .base path.mine { stroke: color-mix(in srgb, var(--ink) 55%, transparent); stroke-width: 2; }
.in .flow .base path { stroke-dashoffset: 0; }
#ship-head path { fill: color-mix(in srgb, var(--ink) 55%, transparent); stroke: none; }  /* the shipment's arrowhead, the line's own ink */
/* a pulse of light along each line, an order on its way */
.flow .pulse path { fill: none; stroke: #8e8e96; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: .07 .93;
  stroke-dashoffset: .07; opacity: 0; }
.flow .pulse path.pay { stroke: #0e5b3f; stroke-width: 3; }
.flow .pulse path.mine { stroke: var(--ink); stroke-width: 3; }
/* only the step on show runs, from when it comes on; a dimmed line stays still */
.in .flow[data-step="1"] .pulse .s1, .in .flow[data-step="2"] .pulse .s2, .in .flow[data-step="3"] .pulse .s3 {
  animation: pulse 3.2s cubic-bezier(.45, 0, .35, 1) infinite; }
@keyframes pulse { 0% { stroke-dashoffset: .07; opacity: 0; } 8% { opacity: 1; } 42% { stroke-dashoffset: -.93; opacity: 1; }
  48%, 100% { stroke-dashoffset: -.93; opacity: 0; } }
.flow .port { fill: var(--paper); stroke: #c7c7cc; stroke-width: 1.5; }
.flow .port.pay { stroke: #0e5b3f; }
.flow .port.mine { stroke: var(--ink); }
/* the shopper's bag, as the app's Bag lists it */
.flow .card { fill: var(--paper); }
.flow .thumb { fill: var(--tile); }
.flow .title { font-size: 16px; font-weight: 600; letter-spacing: -.01em; fill: var(--ink); }
.flow .title.small { font-size: 14px; }
.flow .item { font-size: 14px; font-weight: 500; fill: var(--ink); }
.flow .brand { font-size: 12.5px; fill: var(--muted); }
rect.yours { fill: var(--ink); }
text.yours { font-size: 11px; font-weight: 500; fill: var(--paper); }
.flow .price { font-size: 14px; text-anchor: end; fill: var(--ink); }
.flow .price.total { font-weight: 600; }
.flow .rule { stroke: var(--line); }
.flow .kongi rect { fill: #0e5b3f; }  /* the iOS app icon: the cream wordmark on Kongi green */
.flow .mark { text-anchor: middle; fill: #f3ecdf; font-size: 28px; font-weight: 600; letter-spacing: -.045em; }
.flow .store rect { fill: var(--paper); }
.flow .store.mine rect { fill: var(--ink); }
.flow .store text { fill: var(--ink); }
.flow .store.mine text { fill: var(--paper); }
.flow .name { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.flow .store .sub { font-size: 13px; opacity: .65; }
/* what a line carries, as aaru.com labels its graphs: plain small text, tracked caps, muted; the step's own in its color */
.flow .lbl { font-size: 11.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; fill: var(--faint); }
.flow[data-step="1"] .lbl.s1 { fill: #0e5b3f; }
.flow[data-step="2"] .lbl.s2, .flow[data-step="3"] .lbl.s3 { fill: var(--ink); }

/* step by step, as aaru.com explains its visuals: a caption card with the step and what happens, arrows to step through, the
   step's part of the flow lit and the rest dimmed */
.flow .st { transition: opacity .5s; }
.flow[data-step] .st { opacity: .2; }
.flow .only { opacity: 0 !important; }
/* the lit part of the drawing; pulses aren't in it (they show only while they run, so a still one never lingers) */
.flow[data-step="1"] .st.s1, .flow[data-step="2"] .st.s2, .flow[data-step="3"] .st.s3 { opacity: 1 !important; }
.steps { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0 24px 24px; }
/* aaru.com's caption card: 24px in, 20px corners, the counter in tracked caps, the step at a regular weight */
.step-card { width: min(520px, 100%); padding: 22px 24px 24px; border-radius: 20px; background: var(--paper); }
.step-card .counter { font-size: 12px; letter-spacing: .1em; color: var(--faint); }
.step-card b { display: block; margin-top: 12px; font-size: 20px; font-weight: 500; line-height: 1.2; letter-spacing: -.01em; }
.step-card p { margin-top: 6px; font-size: 15px; line-height: 1.45; color: var(--muted); }
.step-go { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: var(--paper); color: var(--ink); cursor: pointer; transition: background-color .2s; }
.step-go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .step-go:hover { background: var(--tile-deep); } }
.step-go:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* where products show: three of the app's own listings, each under the place it shows */
.spots { position: relative; width: 100%; max-width: 540px; aspect-ratio: 540 / 470; justify-self: start; }
.spot { position: absolute; width: 36%; animation: bob 6s ease-in-out infinite alternate; }
.spot.s1 { left: 0; top: 16%; }
.spot.s2 { left: 32%; top: 34%; z-index: 1; animation-delay: -2s; }
.spot.s3 { right: 0; top: 2%; animation-delay: -4s; }
.spot em { display: inline-block; margin: 0 0 10px 4px; padding: 5px 12px; border-radius: 999px; background: var(--ink);
  color: var(--paper); font-style: normal; font-size: 13px; font-weight: 500; }
.ac { padding: 10px 10px 14px; border-radius: 20px; background: var(--paper); box-shadow: 0 24px 56px rgba(0, 0, 0, .12); }
.ac .img { aspect-ratio: 1; border-radius: 14px; background: var(--tile) center / 78% no-repeat; margin-bottom: 10px; }
.ac > b, .ac > span, .ac > strong { display: block; padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac > b { font-weight: 500; font-size: 15px; }
.ac > span { margin-top: 2px; font-size: 13px; color: var(--muted); }
.ac > strong { margin-top: 8px; font-size: 16px; font-weight: 600; }
.ac.dark { position: relative; padding: 10px 10px 48px; background: #111; color: var(--paper); }  /* Discover is always dark */
.ac.dark .img { aspect-ratio: 3 / 4; margin: 0; }
.by { position: absolute; left: 14px; bottom: 14px; display: flex; align-items: center; gap: 8px; font-size: 13px; }
.by i { width: 20px; height: 20px; border-radius: 50%; background: var(--paper); flex: none; }
.by b { font-weight: 600; }
.points { list-style: none; margin-top: 32px; display: grid; gap: 22px; }
.points b { display: block; font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.points span { display: block; margin-top: 4px; font-size: 16px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }

/* Sponsored Products: three cards, each with a small working piece of the brand dashboard */
.wide { width: 100%; max-width: 1100px; }
.wide.narrow { max-width: 800px; }
.brands .wide .head h2 { text-wrap: wrap; }
.wide .head p { margin-top: 16px; max-width: 760px; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.45; color: var(--muted); text-wrap: balance; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
.card { background: var(--tile); border-radius: 24px; padding: 12px 12px 28px; }
.card h3 { margin: 22px 12px 0; font-size: 21px; font-weight: 600; letter-spacing: -.015em; }
.card p { margin: 8px 12px 0; font-size: 16px; line-height: 1.45; color: var(--muted); }
.art { height: 200px; border-radius: 16px; background: var(--paper); overflow: hidden; display: grid; place-items: center; }
@keyframes toast {
  0% { opacity: 0; transform: translate(-50%, -160%); animation-timing-function: cubic-bezier(.25, 1.25, .5, 1); }
  10% { opacity: 1; transform: translate(-50%, 0); }
  69% { opacity: 1; transform: translate(-50%, 0); animation-timing-function: cubic-bezier(.5, 0, .75, 0); }
  79%, 100% { opacity: 0; transform: translate(-50%, -160%); }
}
/* the campaign's own controls (platform: daily budget, pacing): spend fills up to the budget and stops there */
.art.spend { place-items: stretch; align-content: center; gap: 28px; padding: 0 32px; }
.meter .row2 { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
.meter .row2 span:first-child { color: var(--ink); font-weight: 500; }
.track { position: relative; margin-top: 10px; height: 14px; border-radius: 999px; background: var(--tile); overflow: hidden; }
.track i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 999px; background: var(--forest); transition: width 2.2s cubic-bezier(.3, .7, .2, 1) .4s; }
.in .track i { width: 100%; }
.art.kw { display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 10px; padding: 0 24px; }
.art.kw span { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px;
  background: var(--tile); font-size: 14px; font-weight: 500; opacity: 0; transform: scale(.8);
  transition: opacity .25s, transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.in .art.kw span { opacity: 1; transform: none; }
.art.kw span:nth-child(2) { transition-delay: .15s; } .art.kw span:nth-child(3) { transition-delay: .3s; }
.art.kw span:nth-child(4) { transition-delay: .45s; } .art.kw span:nth-child(5) { transition-delay: .6s; }
.art.chart { place-items: stretch; grid-template-rows: auto 1fr; gap: 16px; padding: 22px 0 0; }
.art.chart .head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 22px; }
.art.chart .head b { font-size: 15px; font-weight: 600; }
.win { display: flex; padding: 3px; border-radius: 999px; background: var(--tile); }
.win span { padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--muted); }
.win .on { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.art.chart svg { width: 100%; height: 100%; display: block; }
.art.chart .area { fill: url(#fill); }
.art.chart .line { fill: none; stroke: var(--forest); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.art.chart svg { clip-path: inset(0 100% 0 0); transition: clip-path 1.6s var(--reveal) .4s; }
.in .art.chart svg { clip-path: inset(0 0 0 0); }

.faq { margin-top: 40px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 24px 0;
  font-size: clamp(18px, 1.8vw, 22px); font-weight: 500; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
/* no browser ring around the row: a keyboard's focus rings the + in ink, as the site's other controls do */
.faq summary { outline: none; }
.faq summary:focus-visible::after { outline: 2px solid var(--ink); outline-offset: 3px; }
.faq summary::after { content: "+"; display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%;
  background: var(--ink); color: var(--paper); font-size: 20px; transition: transform .3s var(--press); }
.faq details.on summary::after { transform: rotate(45deg); }
.faq details > div { overflow: hidden; }
.faq details p { max-width: 640px; padding: 0 0 24px; font-size: 17px; line-height: 1.5; color: var(--muted); }

/* how shoppers get paid: Rakuten's statement band, in Kongi green, its highlight a lighter green */
#paid { padding-block: 0; }  /* the sections either side keep their own space, so it sits evenly between them */
.paid { width: 100%; max-width: 1100px; padding: clamp(64px, 9vw, 128px) clamp(20px, 5vw, 64px); border-radius: 32px;  /* /brands' chart */
  padding-bottom: clamp(48px, 6vw, 88px);  /* under Learn More, a small line: less than above the headline */
  background: var(--forest); color: #f3ecdf; text-align: center; }  /* Kongi green with the app icon's cream */
.paid h2 { max-width: 20ch; margin: 0 auto; line-height: 1.1; text-wrap: balance; }  /* the page's headline size */
/* each line slides up from behind its own edge, one after another, as the band comes into view (.in, app.js) */
.paid .line { display: block; overflow: hidden; padding: .08em 0; margin: -.08em 0; }  /* room for descenders and the highlight */
.paid .line + .line { margin-top: calc(.4em - .08em); }
.paid .line > span { display: inline-block; transform: translateY(105%); transition: transform .9s var(--reveal); }
.in .paid .line > span { transform: none; }
.in .paid .line:nth-child(2) > span { transition-delay: .14s; }
.in .paid .line:nth-child(3) > span { transition-delay: .28s; }
.paid .more { margin-top: clamp(28px, 3vw, 40px); font-size: clamp(20px, 2.2vw, 26px); font-weight: 500; }
.paid .more a { color: inherit; text-decoration: underline; text-underline-offset: 4px; }
.in .paid .more > span { transition-delay: .42s; }
.paid mark { padding: 0 .12em; border-radius: .12em; background: #1d7a55; color: inherit;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }  /* each wrapped line its own highlight */

/* kongi.co/how-it-works: the story in the ads' look (appstore/social/formats/make_ads.py): each step a panel of one
   flat color with its headline centered, real products on rounded tiles, white pills that pop in, all once the panel scrolls into view (.in, app.js) */
/* the title alone on white, the panels right under it */
.hiw #hiw-top { padding-block: clamp(32px, 4vw, 56px) clamp(20px, 2.5vw, 34px); }
.hiw #hiw-top h1 { max-width: 14ch; font-size: clamp(44px, 7vw, 88px); text-align: center; text-wrap: balance; }
.hiw-step { padding-block: clamp(8px, 1vw, 14px); }
.ad { position: relative; width: 100%; max-width: 1100px; padding: clamp(56px, 7vw, 104px) clamp(20px, 5vw, 72px);
  border-radius: 32px; text-align: center; overflow: hidden; }
.ad.yellow { background: #ffd84d; color: #111; }
.ad.green { background: var(--forest); color: #f3ecdf; }
.ad.coral { background: #ff8a6b; color: #111; }
.ad.purple { background: #5b2bd9; color: #fff; }
.ad h2 { max-width: 16ch; margin: 0 auto; text-wrap: balance; }
.ad > p { max-width: 520px; margin: 16px auto 0; font-size: clamp(17px, 1.7vw, 21px); line-height: 1.45; opacity: .85; text-wrap: balance; }
/* the yellow ad's two sparkles, on the first panel only */
.spark { position: absolute; width: clamp(26px, 3vw, 40px); fill: #111; opacity: 0; }
.spark.s1 { top: 9%; left: 7%; }
.spark.s2 { right: 8%; bottom: 10%; }
.in .spark { animation: twinkle 2.6s ease-in-out .9s infinite; }
.in .spark.s2 { animation-delay: 1.3s; }
@keyframes twinkle { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.05); } }
.pill { display: inline-flex; align-items: center; padding: 10px 20px 11px; border-radius: 999px; background: #fff; color: #111;
  font-size: clamp(15px, 1.5vw, 19px); font-weight: 600; white-space: nowrap; box-shadow: 0 8px 24px rgba(0, 0, 0, .14); }
.cloud { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: clamp(330px, 32vw, 430px); margin: clamp(32px, 4vw, 48px) auto 0; }  /* three, then two */
.ad.green .pill { background: #f3ecdf; color: var(--forest); }
.shots { display: grid; gap: 14px; width: max-content; margin: clamp(32px, 4vw, 48px) auto 0; }
.shots.one { grid-template-columns: min(360px, 78vw); }
.shots.two { grid-template-columns: repeat(2, min(300px, 40vw)); }
.shot { position: relative; aspect-ratio: 4 / 5; border-radius: 28px; overflow: hidden; background: #f4f4f6; }
.shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; display: block; }
.shot .pill { position: absolute; left: 14px; bottom: 14px; transform-origin: 0 100%; }
.ad .facts { margin-top: clamp(32px, 4vw, 48px); text-align: left; }
.facts { width: 100%; display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 1000px) { .facts { grid-template-columns: repeat(3, 1fr); } }  /* side by side only with room for them */
.fact { padding: clamp(22px, 2.6vw, 32px); border-radius: 24px; background: #fff; color: #111; }
.fact h3 { font-size: clamp(19px, 1.9vw, 23px); font-weight: 600; letter-spacing: -.02em; }
.fact h3.with-seal { display: flex; align-items: center; gap: 8px; }
.fact .seal { width: 1em; height: 1em; flex: none; color: var(--protect); }
.fact p { margin-top: 8px; font-size: 16px; line-height: 1.45; color: var(--muted); }
.fact a { color: #111; text-decoration: underline; text-underline-offset: 3px; }
/* the ads' pop: up from nothing with a little overshoot, each after the one before (--d) */
.pop { opacity: 0; transform: scale(.4); transition: opacity .2s ease var(--d, 0s), transform .5s cubic-bezier(.34, 1.56, .64, 1) var(--d, 0s); }
.in .pop { opacity: 1; transform: none; }
/* the close: the store badges and, on a computer, the QR code, on Kongi green */
.hiw #hiw-get { padding-bottom: clamp(48px, 6vw, 96px); }  /* room before the footer */
/* the close, on Kongi green: one button, which opens the QR code on a computer and goes to the store on a phone (app.js) */
.ad .cta { justify-content: center; margin-top: clamp(28px, 3.5vw, 40px); }

/* Shop like you always do on the yellow ad's panel, dark words: the products float inside it on white tiles, and the
   app's credit toast drops in, bigger */
.ad.cream { background: #f3ecdf; color: #111; }  /* Spend it on anything's panel, the app icon's cream */
#look .orbit .t { background-color: var(--paper); }
#look .ad { padding-block: clamp(56px, 7vw, 96px); }
#look .stack p { color: rgba(17, 17, 17, .72); }
#look .ad h2 { max-width: none; }
/* the app's toast, larger than life so it reads from across the page: the same drop under the island */
#look .ptoast { height: 15cqw; gap: 2.6cqw; padding: 0 5.5cqw; font-size: 5.4cqw; }

/* Spend it on anything on the cream panel, the phone flanked by the bag's own numbers as pills */
#spend .ad { text-align: left; }
#spend .phone { height: min(560px, calc(100svh - 240px)); }
#spend .copy p { color: rgba(17, 17, 17, .72); }
.phone-wrap { position: relative; justify-self: center; }
.phone-wrap .pill { position: absolute; z-index: 1; }
.phone-wrap .pill:nth-of-type(1) { top: 50%; right: -22%; }
.phone-wrap .pill:nth-of-type(2) { top: 64%; left: -20%; }

/* the close: the homepage's product wall behind one more way in */
.brands #start { min-height: min(720px, 90svh); }

@media (max-width: 760px) {
  .brands #top { min-height: 0; padding-top: 72px; padding-bottom: 96px; }
  .spots { justify-self: center; text-align: left; }
  .flow { border-radius: 24px; }
  .paid { border-radius: 24px; }
  .ad { border-radius: 24px; }
  .phone-wrap .pill:nth-of-type(1) { right: -8%; }
  .phone-wrap .pill:nth-of-type(2) { left: -8%; }
  #spend .ad { text-align: center; }
  .spark { width: 20px; }
  .spark.s1 { top: 18px; left: 18px; }
  .spark.s2 { right: 18px; bottom: 18px; }
  .cloud { gap: 8px; }
  .cloud .pill { padding: 8px 14px 9px; font-size: 14px; }  /* three, then two, on a phone too */
  #paid { padding-top: 24px; }  /* #look ends closer to it on a phone: the same space above as below */
  .flow .scroll { overflow-x: auto; scrollbar-width: none; }  /* the chart at a readable size, swiped sideways */
  .flow .scroll svg { min-width: 640px; }
  .spots { max-width: 400px; }
  .brands #top .orbit { display: none; }  /* no room beside the headline on a phone */
  .cards { grid-template-columns: 1fr; gap: 12px; margin-top: 28px; }
  .card h3 { font-size: 20px; }
  .art { height: 180px; }
  .faq { text-align: left; }
}


@media (max-width: 760px) {
  .get .qr { display: none; }
  section { padding-top: 64px; padding-bottom: 64px; }
  #hero + section { margin-top: 24px; }
  .row { grid-template-columns: 1fr; gap: 28px; text-align: center; }
  .row.flip .copy { order: 0; }
  .copy { margin: 0 auto; }
  .phone { height: min(420px, calc(100svh - 380px)); }
  h1 { font-size: 40px; } h2 { font-size: 34px; }
  /* a phone's headline, line and buttons fill most of the width: a taller, whiter, softer middle so they read clearly */
  .wall::after { background: color-mix(in srgb, var(--paper) 78%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    -webkit-mask-image: radial-gradient(ellipse 110% 44% at 50% 50%, #000 62%, transparent 100%);
    mask-image: radial-gradient(ellipse 110% 44% at 50% 50%, #000 62%, transparent 100%); }
  .orbit .t { width: calc(var(--s) * .5); }
  .orbit .far, .orbit .top { display: none; }
  .search { height: 50px; font-size: 16px; }
  .cat { aspect-ratio: 1; font-size: 13px; padding: 8px 10px; }
  .get { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .art.kw span, .paid .line > span, .pop { opacity: 1; transform: none; transition: none; }
  .in .spark { animation: none; opacity: 1; }
  .flow .base path { stroke-dashoffset: 0; transition: none; }
  .flow .pulse { display: none; }
  .toast, .in .toast, .ptoast, .in .ptoast { animation: none; opacity: 1; transform: translate(-50%, 0); }
  .in .screen .on { animation: none; opacity: 1; } .in .screen .tap { animation: none; }
  .cycle, .in .cycle.a, .in .cycle.b { animation: none; opacity: 1; transform: none; }  /* the credit stays on, and its numbers */
  .track i { width: 100%; transition: none; }
  .art.chart svg { clip-path: none; transition: none; }
  .caret, .orbit .t, .spot { animation: none; }
}

/* --- the shop: /browse, /search, /category, /orders (the header is base.css's) --- */
/* kongi.co/orders, /credit and /settings, from the account menu: one column (Zara's, GetYourGuide's account pages) */
.orders-page, .account-page { max-width: 640px; margin: 0 auto; }
.orders-page h1, .account-page h1 { font-size: 24px; line-height: 32px; font-weight: 600; margin-bottom: 8px; }
/* settings: a small grey label per part (the app's SettingsSection), each detail as a label over its value with Edit
   beside it, hairlines between rows */
.set { margin-top: 32px; }
.set h2 { margin-bottom: 4px; color: var(--muted); font-size: 14px; font-weight: 500; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 64px; padding: 12px 0;
  border-bottom: 1px solid var(--line); }
.set-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.set-label { color: var(--muted); font-size: 14px; }
.set-value { font-size: 16px; overflow-wrap: anywhere; }
.set-value.none { color: var(--faint); }
.set-name { font-size: 16px; }
.set-switch .set-value { color: var(--muted); font-size: 14px; }
.set-edit { flex: none; padding: 6px 0; border: 0; background: none; color: var(--ink); cursor: pointer;
  font: 500 15px "GT Standard", system-ui, sans-serif; text-decoration: underline; text-underline-offset: 3px; }
.set-actions { display: flex; gap: 16px; flex: none; }
.set-add { margin-top: 16px; }
.set-form, .set .co-form { display: flex; flex-direction: column; gap: 12px; padding-top: 8px; }
.set-check { display: flex; align-items: center; gap: 10px; font-size: 15px; cursor: pointer; }
.set-check input { width: 18px; height: 18px; accent-color: var(--ink); }
.set-link { border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.set .auth-error { margin-top: 12px; }
/* switches (the app's ToggleRow): grey off, Kongi green on */
.set-switch { cursor: pointer; }
.set-switch input { -webkit-appearance: none; appearance: none; flex: none; position: relative; width: 51px; height: 31px; margin: 0;
  border-radius: 999px; background: var(--tile-deep); cursor: pointer; transition: background-color .2s; }
.set-switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%;
  background: var(--paper); box-shadow: 0 2px 4px rgba(0, 0, 0, .15); transition: transform .2s var(--press); }
.set-switch input:checked { background: var(--forest); }
.set-switch input:checked::after { transform: translateX(20px); }
.set-switch input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* who they shop for: the app's grey chips, ink when picked */
.set-chips { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 8px; }
.set-chip { position: relative; }
.set-chip input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.set-chip span { display: flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px; background: var(--tile);
  font-size: 15px; font-weight: 500; cursor: pointer; transition: background-color .2s, color .2s; }
.set-chip input:checked + span { background: var(--ink); color: var(--paper); }
.set-chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
/* credit (the app's CreditView): the balance on a grey tile, then each month's entries */
.credit-tile { display: flex; flex-direction: column; gap: 4px; margin-top: 16px; padding: 24px; border-radius: 20px; background: var(--tile); }
.credit-label { color: var(--muted); font-size: 14px; }
.credit-balance { font-size: 44px; line-height: 1.1; font-weight: 600; letter-spacing: -.02em; }
.credit-pending { color: var(--forest); font-size: 15px; }
.credit-app { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 16px;
  padding-top: 16px; border-top: 1px solid var(--line); }
.credit-app p { color: var(--muted); font-size: 15px; line-height: 1.4; }
.credit-month { margin: 32px 0 4px; font-size: 17px; font-weight: 600; }
.credit-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.credit-what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.credit-title { font-size: 15px; }
.credit-when { color: var(--muted); font-size: 13px; }
.credit-amount { flex: none; font-size: 15px; font-weight: 600; }
.credit-amount.in { color: var(--forest); }
.credit-amount.pending { color: var(--muted); }
/* a confirmation (account.js confirmSheet, the app's confirmSheet): a small dialog on a computer, a sheet up from the
   bottom on a phone */
dialog.sheet { width: min(420px, calc(100% - 32px)); margin: auto; padding: 0; border: 0; border-radius: 20px; background: var(--paper);
  color: var(--ink); box-shadow: 0 30px 80px rgba(0, 0, 0, .25); animation: sheet-in .3s var(--press); }
dialog.sheet::backdrop { background: rgba(0, 0, 0, .45); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(16px); } }
.sheet-in { display: flex; flex-direction: column; gap: 16px; padding: 24px; }
.sheet h2 { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.sheet-text { display: flex; flex-direction: column; gap: 12px; color: var(--muted); font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.sheet-list { padding-left: 20px; color: var(--ink); font-size: 15px; line-height: 1.45; }
.sheet-list li + li { margin-top: 8px; }
.sheet-buttons { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
@media (max-width: 760px) {
  dialog.sheet { width: 100%; max-width: none; margin: auto 0 0; border-radius: 20px 20px 0 0; }
  .sheet-in { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { dialog.sheet { animation: none; } }
.order-row { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.order-row .co-n { font-weight: 600; }
.order-chev svg { width: 18px; height: 18px; fill: none; stroke: #b3b3b3; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.orders-empty { padding: 64px 0; text-align: center; }
.orders-empty img { margin: 0 auto 16px; display: block; }
.orders-empty h2 { font-size: 20px; font-weight: 600; }
.orders-empty p { margin-top: 6px; color: var(--muted); }
main.shop { --gutter: clamp(16px, 3vw, 32px); --card-radius: 16px; max-width: none; }  /* every photo card's corners: the product cards' (the app's) */  /* the page's width, 32px in (Cosmos's) */
.shop-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.shop-head h1, .shop-head h2 { font-weight: 600; letter-spacing: -.02em; }
.shop-head h1 { font-size: 24px; line-height: 32px; }
.shop-head h2 { font-size: 20px; line-height: 28px; }
.shop-head a { font-weight: 500; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.shop-head p { color: var(--muted); }
.shop-section { margin-top: 48px; padding: 0; display: block; }
/* a section's See All: a grey pill (Cosmos's View all) */
.shop-head > h1 + a, .shop-head > h2 + a { display: inline-flex; align-items: center; height: 40px; padding: 0 20px;
  border-radius: 999px; background: var(--tile); font-size: 14px; font-weight: 500; text-decoration: none; transition: background-color .2s; }
.shop-head > h1 + a:hover, .shop-head > h2 + a:hover { background: var(--tile-deep); }
/* a brand's wide photo card (Cosmos's): its name in white on its photo, which grows a little under the pointer */
.brand-tile { position: relative; display: grid; place-items: center; aspect-ratio: 363 / 154; border-radius: var(--card-radius); overflow: hidden;
  background: var(--tile); color: #fff; text-decoration: none; isolation: isolate; scroll-margin-top: 96px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .02), 0 4px 16px rgba(0, 0, 0, .1); }
.brand-tile[hidden] { display: none; }
.brand-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .2s ease-out; }
.brand-tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0, 0, 0, .18); }
.brand-tile.plain::before { background: rgba(0, 0, 0, .42); }
.brand-tile:hover img { transform: scale(1.05); }
.brand-tile span { padding: 16px; font-size: 24px; font-weight: 600; letter-spacing: -.01em; line-height: 1.1; text-align: center;
  text-shadow: 0 1px 16px rgba(0, 0, 0, .35); }
/* Featured Brands (Cosmos's): a row of them running off the page's edges, faded at an edge with more past it, a round
   arrow at each end to move it along (a trackpad or a swipe too) */
.rail { position: relative; }
.rail-track { display: flex; gap: 32px; overflow-x: auto; scrollbar-width: none; margin: -16px calc(-1 * var(--gutter, 16px));
  padding: 16px var(--gutter, 16px); --back: 1; --on: 1;
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, var(--back)) 0, #000 80px, #000 calc(100% - 80px), rgba(0, 0, 0, var(--on)) 100%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, var(--back)) 0, #000 80px, #000 calc(100% - 80px), rgba(0, 0, 0, var(--on)) 100%); }
.rail-track::-webkit-scrollbar { display: none; }
.rail-track.back { --back: 0; }
.rail-track.on { --on: 0; }
.rail-track .brand-tile { flex: 0 0 363px; }
.rail-step { position: absolute; top: 50%; z-index: 2; width: 32px; height: 32px; margin-top: -16px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 3px 12px rgba(0, 0, 0, .12); color: var(--ink); cursor: pointer; }
.rail-step[hidden] { display: none; }
.rail-step.prev { left: 8px; } .rail-step.next { right: 8px; }
.rail-step svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: none) { .rail-step { display: none !important; } }
/* kongi.co/browse/brands (Cosmos's Brands): the search on the left and the alphabet in the middle of one line, then four
   across of the brands' cards */
.brands-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.brands-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 12px 0 20px; }
.brands-find { display: flex; align-items: center; gap: 12px; color: var(--faint); }
.brands-find svg { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.brands-find input { width: 100%; min-width: 0; border: 0; background: none; color: var(--ink); font: 400 16px "GT Standard", system-ui, sans-serif;
  outline: none; -webkit-appearance: none; appearance: none; }
.brands-find input::placeholder { color: var(--faint); }
.brands-find input::-webkit-search-cancel-button { display: none; }
.brands-letters { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; font-size: 16px; color: var(--faint); }
.brands-letters a { color: var(--faint); text-decoration: none; transition: color .15s; }
.brands-letters a:hover { color: var(--ink); }
.brands-letters span { cursor: default; }
.brands-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.brands-none { color: var(--muted); }
/* a brand's page (Cosmos's): its photo edge to edge under the header (header.js makes the header glass on it), its name
   and what it sells at the foot; a row of pill menus; five across of its products */
main.brand-main { padding-top: 0; }
.brand-hero { position: relative; height: 498px; margin: calc(8px - var(--header-h, 64px)) calc(8px - var(--gutter, 16px)) 0;
  border-radius: 40px; overflow: hidden; isolation: isolate; color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 6px 44px rgba(0, 0, 0, .15), 0 4px 8px rgba(0, 0, 0, .03); }
.brand-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.brand-hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, .47) 0, rgba(0, 0, 0, 0) 172px),
    linear-gradient(0deg, rgba(0, 0, 0, .47) 0, rgba(0, 0, 0, 0) 340px), linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .3) 100%); }
.brand-hero-text { position: absolute; left: 32px; right: 32px; bottom: 32px; display: grid; justify-items: start; gap: 12px; max-width: 520px; }
.brand-hero h1 { font-size: clamp(36px, 5vw, 60px); font-weight: 600; line-height: 1; letter-spacing: -.03em; }
/* its description (Cosmos's): two lines at most, 403px wide */
.brand-hero p { max-width: 403px; font-size: 16px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Follow and its Instagram (Cosmos's): a white 48px pill; a 48px glass circle that widens to the handle under the pointer */
.bh-actions { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; }
.bh-follow { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 24px; border: 0; border-radius: 999px;
  background: #fff; color: var(--ink); font: 500 15px "GT Standard", system-ui, sans-serif; letter-spacing: -.3px; cursor: pointer;
  transition: background-color .15s cubic-bezier(.4, 0, .2, 1), color .15s cubic-bezier(.4, 0, .2, 1); }
.bh-follow:hover { background: #e8e8e6; }
.bh-follow.on { background: rgba(255, 255, 255, .16); color: #fff; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.bh-follow.on:hover { background: rgba(255, 255, 255, .24); }
.bh-ig { display: flex; align-items: center; justify-content: center; height: 48px; padding: 0 12px; border-radius: 999px; color: #fff;
  background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); text-decoration: none;
  transition: background-color .15s cubic-bezier(.4, 0, .2, 1); }
.bh-ig svg { width: 24px; height: 24px; flex: none; }
.bh-ig > span { display: grid; grid-template-columns: 0fr; transition: grid-template-columns .3s ease-out; }
.bh-ig > span > span { min-width: 0; overflow: hidden; }
.bh-ig > span > span > span { display: block; width: max-content; max-width: 240px; padding-left: 4px; font-size: 15px; font-weight: 500;
  letter-spacing: -.3px; white-space: nowrap; opacity: 0; filter: blur(4px); transition: opacity .3s ease-out 50ms, filter .2s ease-out 50ms; }
.bh-ig:hover > span, .bh-ig:focus-visible > span { grid-template-columns: 1fr; }
.bh-ig:hover > span > span > span, .bh-ig:focus-visible > span > span > span { opacity: 1; filter: none; }
.bp-filters { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; padding: 16px 0; }
.bp-left { display: flex; flex-wrap: wrap; gap: 6px; }
.bp-pill { position: relative; }
.bp-pill > summary, a.bp-pill { display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 12px 0 20px; border-radius: 999px;
  background: var(--tile); color: var(--ink); font-size: 16px; white-space: nowrap; list-style: none; cursor: pointer; text-decoration: none;
  transition: background-color .2s, color .2s; }
a.bp-pill { padding: 0 20px; }
.bp-pill > summary::-webkit-details-marker { display: none; }
.bp-pill > summary:hover, a.bp-pill:hover { background: var(--tile-deep); }
.bp-pill.on > summary, a.bp-pill.on { background: var(--ink); color: var(--paper); }
.bp-pill svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .2s; }
.bp-pill[open] svg { transform: rotate(180deg); }
.bp-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; display: grid; min-width: 200px; padding: 6px; border-radius: 16px;
  background: var(--paper); box-shadow: 0 10px 30px rgba(0, 0, 0, .1); animation: menu-in .18s var(--press); }
.bp-sort .bp-menu { left: auto; right: 0; }
.bp-menu a { padding: 10px 12px; border-radius: 10px; color: var(--ink); font-size: 15px; white-space: nowrap; text-decoration: none; }
.bp-menu a:hover { background: var(--tile); }
.bp-menu a[aria-current] { font-weight: 600; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px); } }
.bp-grid { --bp-colgap: 32px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px var(--bp-colgap); }
.bp-card { display: flex; flex-direction: column; min-width: 0; color: var(--ink); text-decoration: none; }
.bp-ph { aspect-ratio: 1; margin-bottom: 14px; overflow: hidden; border-radius: var(--card-radius); background: var(--tile); }
.bp-ph img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease-out; }
.bp-ph.whole img { object-fit: contain; mix-blend-mode: multiply; }
.bp-card:hover .bp-ph img { transform: scale(1.03); }
.bp-n { font-size: 16px; font-weight: 500; line-height: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-b, .bp-pr { color: var(--muted); font-size: 16px; line-height: 22px; }
.bp-b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }  /* one line, as Cosmos's */
.bp-pr s { margin-left: 6px; }
.bp-more { display: flex; width: fit-content; margin: 40px auto 0; }
.bp-none { padding: 48px 0; color: var(--muted); text-align: center; }
@media (max-width: 1200px) { .bp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1000px) {
  .brands-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .bp-grid { --bp-colgap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 24px; }
}
@media (max-width: 760px) {
  .brands-bar { grid-template-columns: 1fr; gap: 12px; }
  .brands-letters { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none;
    margin: 0 calc(-1 * var(--gutter, 16px)); padding: 4px var(--gutter, 16px); }
  .brands-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .brand-tile span { font-size: 17px; padding: 10px; }
  .rail-track { gap: 12px; }
  .rail-track .brand-tile { flex-basis: 280px; }
  .brand-hero { height: 420px; border-radius: 24px; }
  .brand-hero-text { left: 20px; right: 20px; bottom: 24px; }
  /* Cosmos's on a phone: Follow across the card, Instagram a circle beside it (no handle sliding out: nothing hovers) */
  .bh-actions { justify-self: stretch; }
  .bh-follow { flex: 1; }
  .bh-ig { width: 48px; padding: 0; }
  .bh-ig > span { display: none; }
  .bp-filters { overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter, 16px)); padding: 16px var(--gutter, 16px); }
  .bp-left { flex-wrap: nowrap; }
  .bp-menu { position: fixed; top: auto; left: 12px; right: 12px; bottom: 12px; }
  .bp-grid { --bp-colgap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
  .bp-n, .bp-b, .bp-pr { font-size: 14px; line-height: 20px; }
}
/* a brand among the rows (Cosmos's): five columns of squares, 32px apart; its photo two across and two down with its
   name and a white Shop pill, its six best sellers as square photos named at the foot on a fade; flipped every other */
.brand-block { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; }
.bb-hero { grid-area: 1 / 1 / span 2 / span 2; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 40px; width: 100%; aspect-ratio: 1; border-radius: var(--card-radius); overflow: hidden; isolation: isolate; color: #fff; text-decoration: none; }
.brand-block.flip .bb-hero { grid-area: 1 / 4 / span 2 / span 2; }
.bb-hero img, .bb-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .3s ease-out; }
.bb-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0, 0, 0, .18); }
.bb-hero strong { padding: 0 24px; font-size: clamp(36px, 4.4vw, 64px); font-weight: 600; letter-spacing: -.03em; line-height: 1; text-align: center; }
.bb-hero span { display: inline-flex; align-items: center; height: 48px; padding: 0 24px; border-radius: 999px; background: #fff; color: var(--ink);
  font-size: 15px; font-weight: 500; transition: transform .2s var(--press); }
.bb-hero:hover span { transform: translateY(-1px); }
.bb-item { position: relative; width: 100%; aspect-ratio: 1; border-radius: var(--card-radius); overflow: hidden; isolation: isolate; background: var(--tile); color: #fff;
  text-decoration: none; }
.bb-item::before { content: ""; position: absolute; inset: 30% 0 0; z-index: -1; background: linear-gradient(transparent, rgba(0, 0, 0, .4)); }
.bb-item span { position: absolute; left: 16px; right: 16px; bottom: 16px; font-size: 16px; text-align: center; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.bb-hero:hover img, .bb-item:hover img { transform: scale(1.04); }
@media (max-width: 1000px) {
  .brand-block, .brand-block.flip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .bb-hero, .brand-block.flip .bb-hero { grid-area: auto / 1 / auto / span 2; }
  .bb-item span { font-size: 14px; left: 10px; right: 10px; bottom: 10px; }
}
/* the shop's tabs under the header (Cosmos's): All, each category and Brands in one row, the one they're on an ink
   pill; it scrolls sideways when it doesn't fit, faded where there's more */
main.shop:has(> .shop-tabs) { padding-top: 4px; }
.shop-tabs { position: relative; display: flex; justify-content: safe center; gap: 8px; margin: 0 calc(-1 * var(--gutter, 16px)) 24px; padding: 0 var(--gutter, 16px);
  overflow-x: auto; scrollbar-width: none; }
.shop-tabs::-webkit-scrollbar { display: none; }
.shop-tabs a { position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; height: 40px; padding: 0 20px; border-radius: 999px; color: var(--search-hint, #9a9796);
  font-size: 14px; font-weight: 500; letter-spacing: -.02em; text-decoration: none; transition: color .15s, background-color .15s; }
.shop-tabs a:hover { color: var(--ink); }
.brands-title + .shop-section { margin-top: 8px; }
.shop-tabs a[aria-current] { color: var(--ink); background: var(--search-chip, #f2f1ef); view-transition-name: shop-tab; }
/* going to another tab, its pill slides there from the last page's and takes its width (Cosmos's: .15s), the browser
   morphing one page's into the next's */
::view-transition-group(shop-tab) { animation-duration: .15s; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
@media (max-width: 760px) { .shop-tabs { justify-content: flex-start; margin-bottom: 16px; } }
/* product cards: the app's grid card (photo on a light tile, brand, name, rating, price) */
.shop-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 24px 16px; }
.shop-cards.shop-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.shop-cards.shop-row > :nth-child(n+7) { display: none; } /* one row on a computer; phones swipe through them all */
.shop-card { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.shop-card .shop-ph { aspect-ratio: 1; border-radius: var(--card-radius, 16px); overflow: hidden; background: var(--tile); margin-bottom: 6px; }
.shop-card .shop-ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.shop-card .shop-ph.whole img { object-fit: contain; mix-blend-mode: multiply; }  /* a wide photo whole (web.WIDE) */
.shop-card:hover .shop-ph img { transform: scale(1.04); }
.shop-card .shop-b { color: var(--muted); font-size: 14px; }
.shop-card .shop-n { font-size: 15px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.shop-card .shop-r { color: var(--muted); font-size: 13px; }
.shop-card .shop-r::before { content: "★ "; color: var(--star); }
.shop-card .shop-pr { font-weight: 600; font-size: 15px; }
.shop-card .shop-pr s { margin-left: 6px; color: var(--muted); font-weight: 400; }
.shop-card .shop-pr .shop-sale { color: var(--sale); }
/* the search's row (web.search_filters): one line that scrolls sideways, edge to edge, room kept for the focus ring */
.shop-chips { display: flex; gap: 8px; margin: -4px calc(-1 * var(--gutter, 16px)) 16px; padding: 4px var(--gutter, 16px);
  overflow-x: auto; scrollbar-width: none; }
.shop-chips::-webkit-scrollbar { display: none; }
.shop-chips > * { flex: none; height: 40px; display: inline-flex; align-items: center; gap: 6px; padding: 0 18px; border: 0;
  border-radius: 999px; background: var(--tile); color: var(--ink); font: inherit; font-size: 14px; font-weight: 500; letter-spacing: -.02em;
  cursor: pointer; transition: color .15s, background-color .15s; }
/* the categories in it as the shop's tabs (Cosmos's): grey words, a grey pill on the one they're in */
.shop-chips > a:not(.on) { background: none; color: var(--search-hint, #9a9796); }
.shop-chips > a:not(.on):hover { color: var(--ink); }
.shop-chips > a[aria-current=page] { background: var(--search-chip, #f2f1ef); color: var(--ink); }
.shop-chips svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.shop-chips a.on svg { width: 14px; height: 14px; stroke-width: 2.4; margin-right: -4px; }
.shop-chips .on { background: var(--ink); color: var(--paper); }
.shop-filter b { min-width: 18px; height: 18px; display: grid; place-items: center; border-radius: 999px; background: var(--paper);
  color: var(--ink); font-size: 12px; font-weight: 600; }
/* a search's title: the words searched (Cosmos's) */
.shop-query { margin: 8px 0 24px; font-size: 26px; font-weight: 400; letter-spacing: -.02em; line-height: 1.5; }
.shop-count { color: var(--search-hint, #9a9796); font-size: 15px; white-space: nowrap; }
/* the brand a search names, in the grid (web.search_brand): two columns wide at the start of the first row, as tall as
   the photos beside it, the products filling in to its right */
.bp-grid.led { grid-auto-flow: row dense; }
.sb-cell { grid-column: 1 / 3; grid-row: 1; align-self: start; container-type: inline-size; }
/* half its width less half a gap: one column's width, so it stands as tall as the square photos beside it */
.search-brand { position: relative; display: flex; align-items: flex-end;
  justify-content: space-between; gap: 12px; height: calc(50cqw - var(--bp-colgap, 32px) / 2); padding: 24px;
  border-radius: var(--card-radius, 16px); overflow: hidden; isolation: isolate; color: #fff; text-decoration: none; }
.search-brand img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; z-index: -2;
  transition: transform .3s ease-out; }
.search-brand::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .05) 65%); }
.search-brand:hover img { transform: scale(1.03); }
.sb-text { display: grid; gap: 4px; min-width: 0; }
.sb-text strong { font-size: clamp(26px, 2.6vw, 40px); font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.sb-text span { max-width: 360px; font-size: 15px; line-height: 1.35; opacity: .9; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sb-shop { flex: none; display: inline-flex; align-items: center; height: 40px; padding: 0 20px; border-radius: 999px; background: #fff;
  color: var(--ink); font-size: 15px; font-weight: 500; }
/* a search's or category's grid: five across on a computer, as a brand's page */
.shop-cards:not(.shop-row) { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px 24px; }
@media (max-width: 1200px) { .shop-cards:not(.shop-row) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .shop-cards:not(.shop-row) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 16px; } }
@media (max-width: 760px) {
  .shop-cards:not(.shop-row) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  .search-brand { padding: 18px; }
  .sb-shop { height: 40px; padding: 0 18px; }
}
.shop-empty .btn { margin-top: 16px; }
/* the Filter sheet: a panel down the right side on a computer (adidas), a sheet up from the bottom on a phone (Klarna's) */
dialog.sheet.filters { width: min(420px, 100%); height: 100%; max-height: none; margin: 0 0 0 auto; border-radius: 0;
  animation-name: panel-in; }
@keyframes panel-in { from { opacity: 0; transform: translateX(32px); } }
.filters form { display: flex; flex-direction: column; height: 100%; }
.filters-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.filters-head h2 { font-size: 17px; }
.filters-head a { justify-self: end; font-size: 15px; font-weight: 500; }
.filters-x { justify-self: start; width: 36px; height: 36px; display: grid; place-items: center; margin-left: -8px; border: 0;
  background: none; color: var(--ink); cursor: pointer; }
.filters-x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.filters-body { flex: 1; overflow-y: auto; display: grid; align-content: start; gap: 24px; padding: 20px 24px 28px; }
.filters fieldset { min-width: 0; border: 0; }
.filters legend { padding: 0; font-size: 15px; font-weight: 600; }
dialog.filters .chips { flex-wrap: wrap; overflow: visible; margin: 8px 0 0; padding: 0; }
dialog.filters .chip { flex: none; }
.filters summary { margin-top: 12px; font-size: 15px; font-weight: 500; text-decoration: underline; cursor: pointer; list-style: none; }
.filters summary::-webkit-details-marker { display: none; }
.filters details[open] summary { display: none; }
.filters-sale { display: flex; align-items: center; justify-content: space-between; font-size: 15px; font-weight: 600; cursor: pointer; }
/* the app's toggle */
.filters-sale input { appearance: none; position: relative; width: 51px; height: 31px; border-radius: 999px; background: var(--tile-deep);
  cursor: pointer; transition: background-color .2s; }
.filters-sale input::before { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%;
  background: var(--paper); box-shadow: 0 2px 6px rgba(0, 0, 0, .2); transition: transform .2s var(--press); }
.filters-sale input:checked { background: var(--ink); }
.filters-sale input:checked::before { transform: translateX(20px); }
.filters-sale input:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }
.filters-foot { padding: 16px 24px max(16px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.filters-foot .btn { width: 100%; }
@media (max-width: 760px) {
  dialog.sheet.filters { width: 100%; height: auto; max-height: 88svh; margin: auto 0 0; border-radius: 20px 20px 0 0; animation-name: sheet-in; }
  .filters form { height: auto; max-height: 88svh; }
}
.shop-pager { display: flex; justify-content: center; gap: 12px; margin-top: 40px; }
.shop-empty { padding: 64px 0; text-align: center; color: var(--muted); }
@media (max-width: 860px) {
  .shop-cards.shop-row > :nth-child(n+7) { display: flex; }
  .shop-cards.shop-row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 42%; overflow-x: auto; scrollbar-width: none;
    margin: 0 calc(-1 * var(--gutter, 16px)); padding: 0 var(--gutter, 16px); }
  .shop-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- signing in and checking out on kongi.co (Depop's sign-in, Shopify's one-page checkout): the logo alone up top --- */
.auth { position: relative; max-width: 400px; margin: clamp(32px, 12vh, 128px) auto 64px; text-align: center; }
.auth h1, .checkout h1, .co-done h1 { font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -.02em; }
.auth-lede { margin-top: 8px; color: var(--muted); overflow-wrap: anywhere; }
.auth form { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
/* borderless, as the app's FormField: a soft fill, ringed in ink only while in use (CLAUDE.md) */
.auth-input { width: 100%; height: 52px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--tile);
  color: var(--ink); font: 400 16px "GT Standard", system-ui, sans-serif; -webkit-appearance: none; appearance: none;
  transition: box-shadow .2s var(--press); }
select.auth-input { background: var(--tile) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d0d0d' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center / 18px no-repeat; padding-right: 40px; }
.auth-input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--ink); }
.auth-phone { display: flex; gap: 8px; }  /* the country, then the number (Uber's sign-up) */
.auth-phone select { flex: none; width: auto; }
.auth-phone input { flex: 1; min-width: 0; }
.btn.apple { gap: 10px; background: var(--ink); color: var(--paper); }
.btn.apple svg { width: 17px; height: 20px; fill: currentColor; }
.btn.google { gap: 10px; background: var(--tile); color: var(--ink); }  /* Google's neutral button: its G on a fill, no outline */
.btn.google svg { width: 20px; height: 20px; }
.auth-or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 14px; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-link { align-self: center; padding: 6px; border: 0; background: none; color: var(--ink); cursor: pointer;
  font: 500 15px "GT Standard", system-ui, sans-serif; text-decoration: underline; text-underline-offset: 3px; }
.auth-back { position: absolute; top: -2px; left: -10px; width: 40px; height: 40px; display: grid; place-items: center; border: 0;
  border-radius: 50%; background: none; color: var(--ink); cursor: pointer; }
.auth-back:hover { background: var(--tile); }
.auth-back svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* the app's ErrorBox: a red mark on a faint red box, the words in ink */
.auth-error { margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: rgba(255, 59, 48, .1); color: var(--ink);
  font-size: 14px; line-height: 1.4; text-align: left; }
.auth-error::before { content: "!"; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 8px;
  border-radius: 50%; background: #ff3b30; color: #fff; font-size: 12px; font-weight: 600; vertical-align: -3px; }
.auth-legal { margin-top: 24px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.auth-legal a { color: var(--ink); text-decoration: underline; }
/* checkout (Depop's on the web) on the white page: the address and the card on the left with the button under them, the
   item and totals on a grey tile on the right (Shopify's summary); one column on a phone, the order first */
main.co { max-width: none; padding: 40px 16px 72px; }
.checkout { display: grid; grid-template-columns: minmax(0, 560px) 360px; gap: 48px; justify-content: center; align-items: start; }
.co-main { display: flex; flex-direction: column; gap: 32px; }
/* the page's title (Sweatpals' checkout), as the bag's and orders' */
.co-title { font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -.02em; margin-bottom: -8px; }
.co-card h2 { margin-bottom: 14px; font-size: 17px; font-weight: 600; }
/* the summary is the grey tile, so what's inside it is white */
.co-summary { padding: 20px; border-radius: 20px; background: var(--tile); }
.co-summary .co-ph, .co-summary .auth-input { background-color: var(--paper); }
.co-main > .auth-error { margin: 0; }
/* their addresses as a list to pick from (the default first), then another */
.co-saved { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.co-opt { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; cursor: pointer; line-height: 1.45; font-size: 15px; }
.co-opt input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--ink); flex: none; }
.co-saved .auth-link { align-self: flex-start; padding: 0; font-size: 14px; }
.co-form { display: flex; flex-direction: column; gap: 12px; }
.co-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.co-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
/* a field's name inside it, moving up small once there's something in it (Depop's, Shopify's) */
.fl { position: relative; display: block; }
.fl > .auth-input { padding-top: 16px; }
.fl > span { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); color: var(--faint); font-size: 16px;
  pointer-events: none; transition: top .15s var(--press), font-size .15s var(--press), transform .15s var(--press); }
.fl > :focus + span, .fl > input:not(:placeholder-shown) + span, .fl > select + span { top: 8px; transform: none; font-size: 12px; }
.co-summary { position: sticky; top: 88px; }
.co-brand { font-weight: 600; margin-bottom: 14px; }
.co-item { display: flex; gap: 14px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.co-ph { flex: none; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: var(--tile); }
.co-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.co-what { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.co-n { font-size: 15px; line-height: 1.3; }
.co-v { color: var(--muted); font-size: 13px; }
.co-price { font-weight: 500; font-size: 15px; }
/* the space between lines is each line's own padding, not the grid's gap, so a line can open or fold smoothly (checkout.js) */
.co-totals { display: grid; grid-template-columns: 1fr auto; margin-top: 16px; font-size: 15px; }
.co-totals dt, .co-totals dd { box-sizing: border-box; padding-top: 10px; overflow: hidden; }
.co-totals dt:first-of-type, .co-totals dd:first-of-type { padding-top: 0; }
.co-totals dd { text-align: right; font-variant-numeric: tabular-nums; }
.co-totals dd.soft { color: var(--muted); font-size: 13px; align-self: center; }
/* an amount still coming (the brand's own tax): a small spinner where it goes, the amount replaces it */
.spinner { display: inline-block; width: 14px; height: 14px; box-sizing: border-box; border-radius: 50%;
  border: 2px solid var(--tile-deep); border-top-color: var(--ink); vertical-align: -2px; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 1.6s; } }
.co-totals dt:last-of-type, .co-totals dd:last-of-type { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line); font-weight: 600; font-size: 17px; }
.co-credit { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 15px; cursor: pointer; }
.co-credit input { width: 18px; height: 18px; accent-color: var(--ink); }
.co-credit b { margin-left: auto; color: var(--muted); font-size: 13px; font-weight: 400; }
.co-add-promo { margin-top: 12px; padding: 0; font-size: 14px; }
.co-promo { display: flex; gap: 10px; margin-top: 14px; }
.co-promo .fl { flex: 1; }
.co-promo .btn { height: 52px; padding: 0 18px; border-radius: 12px; font-size: 15px; }
.auth-input.invalid, .auth-input.invalid:focus { box-shadow: inset 0 0 0 1.5px var(--danger); }
.co-promo-error { margin-top: 8px; color: var(--danger); font-size: 14px; line-height: 1.4; }
/* the confirmation (the app's OrderPlacedView): one card, the bag over the title, the items, then what it ships to,
   when it arrives and what was paid; more to shop under it */
.co-done { grid-column: 1 / -1; width: min(100%, 1040px); margin: 0 auto; }
.co-done-card { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }
.co-done-head { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.co-bag { width: 89px; height: 110px; margin-bottom: 12px; animation: co-float 3s ease-in-out infinite; }
@keyframes co-float { 50% { transform: translateY(-6px); } }
.co-number { color: var(--muted); font-size: 15px; }
.co-sent { margin-top: 2px; color: var(--muted); font-size: 15px; overflow-wrap: anywhere; }
.co-sent b { color: var(--ink); font-weight: 500; }
.co-lines { display: flex; flex-direction: column; gap: 14px; }
.co-line { display: flex; gap: 14px; align-items: flex-start; }
.co-line .co-n { font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.co-facts { display: grid; grid-template-columns: 96px 1fr; padding: 0 16px; border-radius: 16px; background: var(--tile); font-size: 15px; }
.co-facts dt, .co-facts dd { padding: 14px 0; line-height: 1.45; }
.co-facts dt { color: var(--muted); }
.co-facts dt:not(:first-of-type), .co-facts dd:not(:first-of-type) { border-top: 1px solid rgba(0, 0, 0, .06); }
.co-more { margin-top: 40px; }
@media (prefers-reduced-motion: reduce) { .co-bag { animation: none; } }
@media (max-width: 900px) {
  .checkout { grid-template-columns: minmax(0, 560px); }
  .co-summary { order: -1; position: static; }
}

/* download.kongi.co (komoot's, Rocket Money's): the pitch with the QR code and the badge, the app beside it */
.download { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 72px; align-items: center; max-width: 1000px;
  margin: 40px auto 64px; }
.dl-icon { width: 72px; height: 72px; border-radius: 16px; display: block; }
.download h1 { margin-top: 24px; font-size: clamp(44px, 6vw, 68px); line-height: 1; font-weight: 600; letter-spacing: -.045em; }
.download .dl-copy > p { margin-top: 16px; max-width: 420px; color: var(--muted); font-size: clamp(18px, 1.8vw, 21px); line-height: 1.4; }
.dl-get { display: flex; align-items: center; gap: 20px; margin-top: 36px; padding: 18px; border-radius: 22px; background: var(--tile);
  width: fit-content; }
.dl-qr { width: 112px; height: 112px; padding: 10px; border-radius: 14px; background: var(--paper); box-sizing: content-box; display: block; }
.dl-get b { display: block; margin-bottom: 12px; font-size: 16px; font-weight: 500; }
.download .phone { height: min(600px, calc(100svh - 180px)); }
@media (max-width: 860px) {
  .download { grid-template-columns: minmax(0, 1fr); gap: 40px; text-align: center; margin-top: 16px; }
  .dl-icon { margin: 0 auto; }
  .download .dl-copy > p { margin-left: auto; margin-right: auto; }
  .dl-get { margin: 28px auto 0; padding: 0; background: none; }
  .dl-qr, .dl-get b { display: none; }  /* on a phone the QR code is for nobody: the badge alone */
  .download .phone { height: 520px; }
}

/* a new shopper's first-order offer above Buy now (Etsy's offer line, in the deal color's tint): signed in, only for a
   shopper it's for */
.offer { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 13px 16px; border-radius: 14px;
  background: rgba(204, 13, 56, .07); font-size: 15px; }
.offer svg { flex: none; width: 18px; height: 18px; color: var(--sale); }
.offer b { color: var(--sale); font-weight: 500; }  /* one line of text, so "off" and "your" are a word space apart */
.offer a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }  /* the offer's terms (its cap) */
.signed-in .offer:not(.yes) { display: none; }
.bag-offer { margin-top: 14px; color: var(--muted); font-size: 14px; }
/* the bag (the app's BagView; Selfridges', adidas' and Urban Outfitters' on the web): its lines by brand on the left,
   each brand's shipping beside its name; each line a large photo with its name and price on one line, its options under
   them; the order summary with Checkout on a grey tile on the right; one column on a phone */
.bag { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; align-items: start; }
/* the shop's new look: the lines and the summary side by side in a 1,120px column, the title as the search's (26px), how
   many beside it; the photos with the shop's corners, the summary held in view */
.bag-page { max-width: 1120px; margin: 0 auto; }
.bag-page > .shop-head { justify-content: flex-start; align-items: baseline; gap: 12px; margin: 8px 0 28px; }
.bag-page > .shop-head h1 { font-size: 26px; font-weight: 400; letter-spacing: -.02em; line-height: 1.2; }
.bag-page .co-summary { top: 116px; border-radius: var(--card-radius, 16px); padding: 24px; }
.bag-page .bag-row .co-ph { width: 120px; height: 120px; border-radius: var(--card-radius, 16px); }
.bag-page .bag-n { font-weight: 500; }
.bag-page .bag-brand h2 { font-size: 16px; font-weight: 500; }
.bag-page .bag-brand h2 a { color: inherit; text-decoration: none; }
.bag-page .bag-brand h2 a:hover { text-decoration: underline; text-underline-offset: 3px; }
#bag-n { color: var(--search-hint, #9a9796); font-size: 15px; }
.bag-brand + .bag-brand { margin-top: 40px; }
.bag-brand-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 14px;
  border-bottom: 1px solid var(--line); }
.bag-brand h2 { font-size: 17px; font-weight: 600; }
.bag-row { display: flex; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.bag-row .co-ph { width: 140px; height: 140px; border-radius: 14px; }
.bag-what { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.bag-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 4px; }
.bag-n { font-size: 16px; font-weight: 600; line-height: 1.35; }
.bag-v { color: var(--muted); font-size: 14px; }
.bag-off { color: var(--sale); font-size: 13px; font-weight: 600; }
.bag-actions { display: flex; align-items: center; gap: 16px; margin-top: auto; padding-top: 12px; }
.bag-qty { height: 36px; padding: 0 32px 0 14px; border: 0; border-radius: 999px; appearance: none; cursor: pointer;
  background: var(--tile) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%230d0d0d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center / 10px;
  font: 500 14px "GT Standard", system-ui, sans-serif; color: var(--ink); }
.bag-qty:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.bag-remove { padding: 0; font-size: 14px; }
.bag-price { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 16px; white-space: nowrap; }
.bag-price s, .bag-price span { color: var(--muted); font-size: 13px; }
.bag-ship { color: var(--muted); font-size: 14px; text-align: right; }
.bag-summary h2 { margin-bottom: 16px; font-size: 17px; font-weight: 600; }
.bag-summary .btn { margin-top: 20px; }
.bag-summary .co-totals { margin-top: 0; }
.btn.off { opacity: .5; pointer-events: none; }
.bag-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 64px 16px; text-align: center; }
.bag-empty h2 { font-size: 20px; font-weight: 600; }
.bag-empty p { margin-bottom: 16px; color: var(--muted); }
/* the bag's lines at checkout, over the totals */
.co-bag-lines { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.co-bag-lines .co-line { color: inherit; }
@media (max-width: 900px) { .bag { grid-template-columns: minmax(0, 1fr); gap: 32px; } .bag .bag-summary { order: 0; } }  /* the lines first, as retailers' bags on a phone */
@media (max-width: 600px) { .bag-row { gap: 14px; } .bag-row .co-ph { width: 96px; height: 96px; border-radius: 12px; } }
/* a line that sold out: greyed in place, then what can take its place, under its text */
.bag-sold-line { border-bottom: 1px solid var(--line); padding-bottom: 20px; }
.bag-sold-line .bag-row { border-bottom: 0; padding-bottom: 12px; }
.bag-sold .co-ph img, .bag-sold .bag-n, .bag-sold .bag-v { opacity: .45; }
.bag-out { font-size: 14px; font-weight: 600; }
.bag-alts { margin-left: 160px; }
.bag-alts h3 { margin: 4px 0 10px; font-size: 14px; font-weight: 600; }
.bag-swap { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.bag-chip { height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--tile); color: var(--ink);
  font: inherit; font-size: 14px; cursor: pointer; }
.bag-chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.bag-similar { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; }
.bag-similar::-webkit-scrollbar { display: none; }
.bag-card { flex: none; display: flex; flex-direction: column; gap: 4px; width: 128px; font-size: 13px; }
.bag-card .co-ph { width: 128px; height: 128px; border-radius: 12px; }
.bag-card b { margin-top: 4px; font-weight: 600; }
.bag-card span:last-child { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--muted); }
@media (max-width: 600px) { .bag-alts { margin-left: 0; } }

/* one order (the app's OrderDetailView): where it stands, eBay's three steps, tracking, the item, then sections */
.od { display: flex; flex-direction: column; gap: 28px; }
.od-back { align-self: flex-start; color: var(--muted); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.od-top h1 { font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -.02em; }
.od-sub { margin-top: 4px; color: var(--muted); font-size: 15px; }
.od-steps { display: flex; flex-direction: column; gap: 10px; }
.od-dots { display: flex; align-items: center; }
.od-dots .dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--tile-deep); }
.od-dots .bar { flex: 1; height: 2px; background: var(--tile-deep); }
.od-dots .done { background: var(--ink); }
.od-names { display: grid; grid-template-columns: repeat(var(--steps), 1fr); color: var(--muted); font-size: 13px; }
.od-names span:not(:first-child):not(:last-child) { text-align: center; }
.od-names span:last-child { text-align: right; }
.od-names .done { color: var(--ink); font-weight: 600; }
.od-track { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 16px; background: var(--tile); }
.od-track > div { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; font-size: 15px; }
.od-track span { color: var(--muted); overflow-wrap: anywhere; user-select: all; }
.od-item { display: flex; gap: 14px; align-items: center; color: inherit; }
.od-item .co-n { font-weight: 600; }
.od-section { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.od-section h2 { font-size: 17px; font-weight: 600; }
.od-section > .btn { align-self: flex-start; }
.od-section > .auth-link { align-self: flex-start; padding: 0; font-size: 14px; }
.od-p { font-size: 15px; line-height: 1.5; white-space: pre-line; }
.od-soft { color: var(--muted); font-size: 13px; }
.od-right { text-align: right; }
.od-muted { color: var(--muted); }
.od-line { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; }
.od-line > :first-child { color: var(--muted); }
.od-line.sale > :last-child { color: var(--sale); }
.od-line.credit > :last-child { color: var(--forest); }
.od-line.total { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line); font-weight: 600; }
.od-line.total > :first-child { color: var(--ink); }
.od-row { display: flex; align-items: center; min-height: 52px; padding: 0; border: 0; border-bottom: 1px solid var(--line); background: none;
  color: var(--ink); font: 400 16px "GT Standard", system-ui, sans-serif; text-align: left; cursor: pointer; }
.od-rated { color: var(--star); font-size: 18px; letter-spacing: 2px; }
/* the return and review sheets */
.od-form { display: flex; flex-direction: column; gap: 14px; }
.od-form h3 { font-size: 15px; font-weight: 600; }
.od-form .od-item .co-ph { width: 56px; height: 56px; }
.od-reasons { display: flex; flex-direction: column; }
.od-note { height: auto; padding: 14px 16px; resize: vertical; font: inherit; line-height: 1.45; }
.od-sum { display: flex; flex-direction: column; gap: 8px; }
.od-stars { display: flex; gap: 6px; }
.od-stars button { padding: 0; border: 0; background: none; color: var(--tile-deep); font-size: 36px; line-height: 1; cursor: pointer; }
.od-stars button.on { color: var(--star); }
.od-stars button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 6px; }

/* the app, from a browser on an iPhone (header.js): a bar along the bottom with the first-order offer that's the app's
   there (Instacart's offer bar, Faire's), a white card like the computer's pill, clear of the home indicator */
.app-bar { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 30;
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 28px; align-items: center; gap: 10px; padding: 10px 6px 10px 12px;
  border-radius: 20px; background: var(--paper); box-shadow: 0 10px 30px rgba(0, 0, 0, .14); animation: app-bar-in .35s var(--press) backwards; }
.app-bar img { border-radius: 9px; }
.app-bar b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.app-bar b + span { display: block; color: var(--muted); font-size: 13px; line-height: 1.3; }
.app-bar .btn { height: 38px; padding: 0 14px; font-size: 14px; }
.app-bar-close { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; }
.app-bar-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
body.has-app-bar { padding-bottom: 96px; }
@keyframes app-bar-in { from { transform: translateY(24px); opacity: 0; } }
/* the bag on an iPhone: the offer in the app, above Get the App and Checkout */
.bag-app { margin: 14px 0 12px; font-size: 15px; line-height: 1.35; }
.bag-summary .btn + .btn { margin-top: 10px; }
.btn.ink { background: var(--ink); color: var(--paper); }  /* the bag's Checkout under Get the App, on an iPhone */
@media (hover: hover) { .btn.ink:hover { background: #2a2a2a; } }

/* the app, from a computer (Depop's): a pill in the corner that opens to its QR code; not on phones or tablets */
.app-prompt { display: none; }
@media (min-width: 1024px) and (hover: hover) {
  .app-prompt { display: block; position: fixed; right: 24px; bottom: 24px; z-index: 30; }
}
.app-pill { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 22px 0 12px; border: 0; border-radius: 999px;
  background: var(--paper); color: var(--ink); font: inherit; font-size: 17px; font-weight: 600; letter-spacing: -.02em;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .12); cursor: pointer; transition: transform .2s var(--press); }
.app-pill:hover { transform: translateY(-1px); }
.app-pill img, .app-head img { border-radius: 9px; }
.app-card { width: 264px; padding: 18px 18px 10px; border-radius: 24px; background: var(--paper); box-shadow: 0 10px 30px rgba(0, 0, 0, .12); }
.app-head { display: flex; align-items: center; gap: 12px; }
.app-head b { font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.app-card p { margin-top: 10px; color: var(--muted); font-size: 15px; line-height: 1.35; }
.app-qr { position: relative; display: block; width: 148px; margin: 14px auto 0; padding: 12px; border-radius: 16px; background: var(--tile); }
.app-qr img:first-child { display: block; width: 100%; padding: 8px; border-radius: 8px; background: var(--paper); box-sizing: border-box; }
.app-qr .app-mark { position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 7px;
  box-shadow: 0 0 0 3px var(--paper); }
.app-close { display: grid; place-items: center; width: 40px; height: 32px; margin: 4px auto 0; border: 0; background: none; color: var(--ink); cursor: pointer; }
.app-close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.app-prompt [hidden] { display: none; }
/* it grows out of the pill's corner and its contents rise in after it; closing shrinks it back (header.js waits for it) */
.app-pill:not([hidden]), .app-card:not([hidden]) { transform-origin: 100% 100%; }
.app-pill:not([hidden]) { animation: app-pill-in .3s var(--press) backwards; }
.app-card:not([hidden]) { animation: app-in .42s cubic-bezier(.34, 1.3, .64, 1) backwards; }
.app-card > * { animation: app-rise .45s var(--press) backwards; }
.app-card > :nth-child(2) { animation-delay: .05s; }
.app-card > :nth-child(3) { animation-delay: .1s; }
.app-card > :nth-child(4) { animation-delay: .15s; }
.app-card.out { animation: app-out .2s cubic-bezier(.4, 0, 1, 1) both; }
@keyframes app-in { from { opacity: 0; transform: translateY(12px) scale(.5); } }
@keyframes app-out { to { opacity: 0; transform: translateY(12px) scale(.5); } }
@keyframes app-pill-in { from { opacity: 0; transform: scale(.85); } }
@keyframes app-rise { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .app-prompt *, .app-card { animation-duration: .01s !important; animation-delay: 0s !important; } }

/* the app sheet on a product page (web.py APP_SHEET), centered: the app's icon, its line, then on a computer the QR code
   (the homepage's Start Earning) and on a phone (.on-phone, SCRIPT) Get the App in its place, over Learn more */
.app-sheet .sheet-in { align-items: center; text-align: center; padding-top: 32px; }
.app-sheet-icon { border-radius: 15px; }
.app-sheet h2 { max-width: 320px; font-size: 22px; line-height: 1.25; letter-spacing: -.02em; text-wrap: balance; }
.app-sheet-qr { width: 176px; height: 176px; margin-top: 8px; padding: 14px; border-radius: 16px; background: var(--tile); box-sizing: content-box; }
.app-sheet-scan { margin-top: -6px; color: var(--muted); font-size: 15px; }
.app-sheet .sheet-buttons { align-self: stretch; margin-top: 8px; }
.app-sheet.on-phone :is(.app-sheet-qr, .app-sheet-scan), .app-sheet:not(.on-phone) .app-sheet-store { display: none; }

/* Log In over the page (header.js; Cosmos's sign-up modal, exactly): the page blurred 16px under 40% ink, a white card
   24px round with a hairline ring, 72px over its wordmark; the title 26px, a line, a few of the page's photos, then the
   sign-in; in and out in .15s */
.auth-scrim { position: fixed; inset: 0; z-index: 300; background: rgba(13, 13, 13, .4); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  opacity: 0; transition: opacity .15s cubic-bezier(0, 0, .2, 1); }
.auth-modal { position: fixed; top: 50%; left: 50%; z-index: 301; width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto;
  padding: 72px 16px 56px; border-radius: 24px; background: var(--paper); text-align: center; scrollbar-width: none;
  box-shadow: 0 0 0 .5px rgba(13, 13, 13, .12), 0 1px 8px rgba(0, 0, 0, .05);
  opacity: 0; transform: translate(-50%, -50%) scale(.97); transition: opacity .15s cubic-bezier(.4, 0, .2, 1), transform .15s cubic-bezier(.4, 0, .2, 1); }
.auth-scrim.open, .auth-modal.open { opacity: 1; }
.auth-modal.open { transform: translate(-50%, -50%); }
.auth-scrim[hidden], .auth-modal[hidden] { display: none; }
.am-close { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0;
  border-radius: 50%; background: var(--tile); color: var(--ink); cursor: pointer; }
.am-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.am-logo { margin-bottom: 24px; font-size: 34px; font-weight: 600; line-height: 1; letter-spacing: -.045em; }
.auth-modal .auth { max-width: none; margin: 0; }
.auth-modal form { margin-top: 0; }
.auth-modal #title { margin: 0 0 12px; font-size: 26px; font-weight: 400; line-height: 1.15; letter-spacing: -.02em; }
.am-sub { max-width: 320px; margin: 0 auto; color: var(--search-label, #6d6a68); font-size: 14px; line-height: 1.4; letter-spacing: -.02em; }
.auth-modal #lede { max-width: 320px; margin: 0 auto 8px; }
.am-photos { display: flex; align-items: center; justify-content: center; gap: 12px; height: 133px; margin: 32px 0; }
.am-photos img { object-fit: cover; border-radius: 6px; background: var(--tile); }
.am-photos img:nth-child(1) { width: 60px; height: 74px; } .am-photos img:nth-child(2) { width: 108px; height: 133px; }
.am-photos img:nth-child(3) { width: 80px; height: 49px; } .am-photos img:nth-child(4) { width: 80px; height: 102px; }
.am-photos[hidden] { display: none; }
.auth-modal form, .auth-modal .auth-legal, .auth-modal .auth-error { width: min(420px, 100%); margin-left: auto; margin-right: auto; }
.auth-modal .auth-legal { margin-top: 20px; color: var(--search-label, #6d6a68); font-size: 12px; }