/* The shopper's site. Builds on brand.css. */

/* The page opens in a dark room, so the bar above it is dark until the reader scrolls into daylight. */
.nav.on-dark:not(.scrolled) { --ink: #f3f1ee; --muted: #b2aba4; --line: rgba(255, 255, 255, .16); --accent: #f4f2ef; --on-accent: #0b0b0e; --bg: #0b0a0d; background: transparent; color: var(--ink); position: fixed; left: 0; right: 0; }
.nav.on-dark { position: fixed; left: 0; right: 0; }

/* ---------- hero ---------- */
.hero { min-height: min(100svh, 980px); display: grid; align-items: center; padding: 120px 0 72px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
/* The line breaks where the thought does: "The mirror that / styles you." */
.hero .display { font-size: clamp(44px, 6.1vw, 92px); }
.hero .display em { display: block; }
.hero-copy .lede { color: #c2bbb3; }
.hero-copy .fine { color: #968f88; }
.hero-stage { display: grid; justify-items: center; }
.hero-glass { width: clamp(240px, 27vw, 360px); }
.hero-glass .figure { position: absolute; inset: 9% 6% 0; width: 88%; height: 91%; }
.hero-glass .look, .hero-cap .c { opacity: 0; animation: wear 15s var(--ease) infinite; }
.hero-glass .look { transform-origin: 50% 30%; }
.hero-glass .l2, .hero-cap .c2 { animation-delay: 5s; }
.hero-glass .l3, .hero-cap .c3 { animation-delay: 10s; }
/* One look every five seconds: a second to arrive, three to be worn, half a second to leave. */
@keyframes wear {
  0% { opacity: 0; transform: translateY(6px); }
  7%, 30% { opacity: 1; transform: none; }
  35%, 100% { opacity: 0; transform: none; }
}
.hero-glass .spark { stroke-dasharray: 14 86; opacity: 0; animation: spark 5s linear infinite; }
@keyframes spark { 0% { opacity: 1; stroke-dashoffset: 0; } 18% { opacity: 1; stroke-dashoffset: -100; } 20%, 100% { opacity: 0; stroke-dashoffset: -100; } }
.hero-glass .halo .arc:not(.spark) { opacity: .55; }
.hero-glass::before { content: ""; position: absolute; inset: auto 0 0; height: 46%; background: linear-gradient(transparent, rgba(11, 10, 13, .88)); z-index: 2; }
.hero-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 0 9% 8%; }
.hero-cap p { position: relative; height: 1.3em; }
.hero-cap .c { position: absolute; left: 0; bottom: 0; white-space: nowrap; }
.hero-cap .tag { font: 500 11px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #d2cbc3; margin-bottom: 8px; }
.hero-cap .line { font-size: clamp(20px, 2vw, 27px); line-height: 1.2; }

/* ---------- now in the mirror: the stores that said yes ----------
   A card each: three pieces from the store's own rails under one arch, its name with a hairline in its own colour, one
   line about it, and the way into its mirror. On a phone the cards are a row the thumb swipes. */
.partners { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }
.partner {
  display: grid; gap: 6px; align-content: start; min-width: 0; padding: 10px 10px 20px; border-radius: var(--r-lg);
  color: inherit; text-decoration: none; background: var(--panel);
  box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(20, 16, 10, .05), 0 24px 48px -36px rgba(20, 16, 10, .35);
  transition: transform var(--calm) var(--ease), box-shadow var(--calm) var(--ease);
}
.partner:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px color-mix(in oklab, var(--store) 45%, var(--line)), 0 2px 4px rgba(20, 16, 10, .06), 0 30px 56px -34px rgba(20, 16, 10, .45); }
.partner:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.partner-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; aspect-ratio: 9 / 8; margin-bottom: 12px; border-radius: calc(var(--r-lg) - 6px) calc(var(--r-lg) - 6px) 6px 6px; overflow: hidden; background: var(--card); }
.partner-rail i, .partner-rail img { display: block; width: 100%; height: 100%; min-width: 0; background: var(--card); }
.partner-rail img { object-fit: cover; object-position: top; }
.partner-name { position: relative; padding: 0 10px 10px; font: 400 clamp(22px, 2vw, 27px)/1.1 var(--serif); }
.partner-name::after { content: ""; position: absolute; left: 10px; bottom: 0; width: 28px; height: 2px; border-radius: 2px; background: var(--store); }
.partner-line { padding: 4px 10px 0; font-size: 14.5px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.partner-go { margin: 10px 10px 0; font: 500 12px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.partner-go::after { content: " →"; letter-spacing: 0; }
@media (max-width: 760px) {
  .partners { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; margin-inline: calc(-1 * clamp(20px, 5vw, 56px)); padding-inline: clamp(20px, 5vw, 56px); scroll-padding-inline: clamp(20px, 5vw, 56px); scrollbar-width: none; }
  .partners::-webkit-scrollbar { display: none; }
  .partner { scroll-snap-align: start; }
}

/* ---------- try it here: the stylist, on a real store's rails ---------- */
.head { max-width: 22em; margin-bottom: clamp(36px, 5vw, 64px); }
.head .lede { margin-top: var(--s5); }
.try { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(28px, 4.5vw, 64px); align-items: start; }
.try-ask { display: grid; gap: var(--s6); align-content: start; }
.try-step { display: grid; gap: var(--s3); }
.step { display: flex; align-items: center; gap: 10px; font: 500 11.5px/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.step b { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--panel); font: 500 11px/1 var(--sans); letter-spacing: 0; }
.try-say { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.15; font-style: italic; min-height: 2.3em; text-wrap: balance; }
.try-looks { display: grid; gap: var(--s4); min-width: 0; }
.try-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); }
.try-trio li { display: grid; gap: 4px; align-content: start; min-width: 0; animation: rise var(--calm) var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
.try-trio .shot, .try-trio i { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: var(--r-md); overflow: hidden; background-color: var(--card); margin-bottom: 6px; }
.try-trio img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.try-trio .badge { position: absolute; left: 8px; top: 8px; }
.try-trio b { font-weight: 400; font-size: 14.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.try-trio li > span:last-child { font-size: 13px; line-height: 1.35; color: var(--muted); }
.try-go { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); align-items: center; margin-top: var(--s3); }
.try-go .fine { flex: 1 1 220px; max-width: 42ch; }
.ask { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.15; }

/* ---------- after the mirror: the wardrobe, and the vote ---------- */
.after { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3.4vw, 48px); margin-bottom: var(--s7); }
.after-card { display: grid; gap: var(--s3); align-content: start; }
.after-card .muted { max-width: 46ch; }
.after-art { min-height: 330px; margin-bottom: var(--s4); border-radius: var(--r-lg); background: var(--panel); box-shadow: 0 0 0 1px var(--line); padding: clamp(20px, 2.8vw, 32px); display: grid; align-content: center; }
.after-art .vote-pair { max-width: 320px; }
.swatch.real { background-size: cover; background-position: top center; }
.phone-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--s4); }
.kept li { display: grid; grid-template-columns: 58px 1fr; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.kept i { display: block; aspect-ratio: 3 / 4; border-radius: 10px; }
.kept b { display: block; font-weight: 400; font-size: 15px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.kept span { font-size: 13px; color: var(--muted); }
.ticks { display: grid; gap: 12px; }
.ticks li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: baseline; }
.ticks li::before { content: ""; width: 14px; height: 8px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-3px) rotate(-45deg); opacity: .7; }

/* ---------- second opinions ---------- */
.vote-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: var(--s4); }
.vote-pair > div { display: grid; gap: 6px; }
.vote-pair i { display: block; aspect-ratio: 3 / 4; border-radius: var(--r-md); }
.vote-pair .chosen i { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--ink); }
.vote-pair b { font-weight: 500; font-size: 15px; margin-top: 6px; }
.vote-pair span { font-size: 13px; color: var(--muted); }

/* ---------- promises ---------- */
.promises { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); margin-bottom: var(--s7); }
.promises li { display: grid; gap: var(--s3); align-content: start; padding-top: var(--s5); border-top: 1px solid var(--line); }

/* ---------- tiers ---------- */
.tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); max-width: 880px; }
.tier { display: grid; gap: var(--s5); align-content: start; }
.tier .price { font: 400 clamp(34px, 4vw, 48px)/1 var(--serif); }
.tier .price small { font: 400 15px/1 var(--sans); color: var(--muted); }
.tier.dark { box-shadow: none; }
.tier .btn { margin-top: var(--s2); }

/* ---------- inner pages ---------- */
.page-head { padding: clamp(120px, 16vw, 190px) 0 clamp(40px, 6vw, 72px); }
.page-head .lede { margin-top: var(--s5); }
.page-head .kicker + .display, .page-head .kicker + .title { margin-top: var(--s4); }
.doc { padding-bottom: var(--s9); }
.doc .note { padding: var(--s4) var(--s5); border-radius: var(--r-md); background: var(--card); font-size: 14.5px; color: var(--muted); max-width: var(--measure); margin-bottom: var(--s6); }
.compare { width: 100%; border-collapse: collapse; font-size: 15px; }
.compare th, .compare td { text-align: left; padding: 16px 12px 16px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare th { font: 500 11.5px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.compare td:first-child { color: var(--muted); width: 34%; }
.steps { display: grid; gap: var(--s5); counter-reset: s; max-width: var(--measure); }
.steps li { display: grid; grid-template-columns: 44px 1fr; gap: var(--s4); }
.steps li::before { counter-increment: s; content: counter(s, decimal-leading-zero); font: 400 22px/1.2 var(--serif); color: var(--muted); }

/* ---------- account ---------- */
.account { min-height: 100svh; padding: clamp(104px, 13vw, 150px) 0 var(--s9); }
.gate { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: clamp(32px, 7vw, 110px); align-items: start; }
.gate-card { display: grid; gap: var(--s5); }
.tabs { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--card); gap: 2px; }
.tabs button { min-height: 40px; padding: 0 20px; border-radius: 999px; font-size: 14.5px; color: var(--muted); transition: background-color var(--quick), color var(--quick); }
.tabs button[aria-selected="true"] { background: var(--panel); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
.waiting { display: grid; gap: var(--s4); padding: var(--s5); border-radius: var(--r-lg); background: var(--glass); color: var(--pearl); }
.waiting ul { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.waiting li { flex: 0 0 96px; display: grid; gap: 6px; font-size: 13px; line-height: 1.25; }
.waiting img { width: 96px; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; border-radius: 10px; background: #1e1d24; }
.me-head { display: flex; flex-wrap: wrap; gap: var(--s5); justify-content: space-between; align-items: end; margin-bottom: var(--s7); }
.allow { display: flex; gap: var(--s4); align-items: center; }
.ring { width: 58px; height: 58px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 3; stroke: var(--line); }
.ring .left { stroke: var(--ink); stroke-linecap: round; transition: stroke-dashoffset var(--slow) var(--ease); }
.me-tabs { display: flex; gap: var(--s5); border-bottom: 1px solid var(--line); margin-bottom: var(--s6); overflow-x: auto; scrollbar-width: none; }
.me-tabs button { padding: 14px 0; font-size: 15px; color: var(--muted); border-bottom: 1.5px solid transparent; margin-bottom: -1px; white-space: nowrap; transition: color var(--quick), border-color var(--quick); }
.me-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.closet { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: clamp(14px, 2vw, 24px); }
.piece { display: grid; gap: 8px; align-content: start; position: relative; animation: rise var(--calm) var(--ease) both; }
.piece .shot { position: relative; aspect-ratio: 3 / 4; border-radius: var(--r-md); overflow: hidden; background: var(--card); }
.piece img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: opacity var(--calm), transform 600ms var(--ease); }
.piece .shot:hover img { transform: scale(1.02); }
.piece .shot .badge { position: absolute; left: 8px; top: 8px; }
.piece .flip { position: absolute; right: 8px; bottom: 8px; min-height: 30px; padding: 0 12px; border-radius: 999px; background: rgba(12, 11, 14, .72); color: var(--pearl); font-size: 12px; }
.piece b { font-weight: 400; font-size: 15px; line-height: 1.3; }
.piece .meta { font-size: 13px; color: var(--muted); }
.piece .acts { display: flex; gap: var(--s4); }
.piece .acts .link { font-size: 13.5px; padding: 6px 0; }
.piece.pick .shot { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink); }
.piece .tick { position: absolute; right: 10px; top: 10px; width: 28px; height: 28px; border-radius: 50%; background: var(--panel); box-shadow: 0 0 0 1px var(--line); display: grid; place-items: center; font-size: 14px; }
.piece.pick .tick { background: var(--ink); color: var(--panel); }
.empty { padding: clamp(40px, 8vw, 90px) var(--s5); text-align: center; border-radius: var(--r-lg); background: var(--card); display: grid; gap: var(--s4); justify-items: center; }
.askbar { position: sticky; bottom: 16px; z-index: 20; margin-top: var(--s6); display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; justify-content: space-between; padding: 12px 12px 12px 22px; border-radius: 999px; background: var(--glass); color: var(--pearl); box-shadow: 0 24px 60px -30px rgba(10, 8, 6, .8); }
.askbar .btn { background: var(--pearl); color: var(--glass); }
.askbar .link { color: var(--pearl); }
.boardrow { display: grid; grid-template-columns: 1fr auto; gap: var(--s4); align-items: center; padding: var(--s5) 0; border-top: 1px solid var(--line); }
.boardrow:last-child { border-bottom: 1px solid var(--line); }
.tally { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 8px; font-size: 14px; color: var(--muted); }
.tally b { color: var(--ink); font-weight: 500; }
.settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(16px, 2.4vw, 28px); }
.settings .card { display: grid; gap: var(--s4); align-content: start; }
.sizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }

/* ---------- a board, as a guest sees it ---------- */
.boardpage { min-height: 100svh; display: grid; align-content: start; gap: var(--s6); padding: clamp(28px, 6vw, 64px) 0 var(--s9); }
.boardpage .brandmark { justify-self: center; }
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 280px)); justify-content: center; gap: clamp(12px, 2vw, 22px); max-width: 980px; margin-inline: auto; width: 100%; }
.choice { display: grid; gap: 10px; text-align: left; align-content: start; }
.choice .shot { position: relative; aspect-ratio: 3 / 4; border-radius: var(--r-md); overflow: hidden; background: var(--card); transition: opacity var(--quick) var(--ease), box-shadow var(--calm); }
.choice:active .shot { opacity: .86; }
.choice img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.choice.mine .shot { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink); }
.choice b { font-weight: 400; font-size: 15px; line-height: 1.3; }
.choice .meta { font-size: 13.5px; color: var(--muted); }
.choice .bar { height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.choice .bar i { display: block; height: 100%; background: var(--ink); transform-origin: left; transform: scaleX(var(--v, 0)); transition: transform var(--slow) var(--ease); }
.center { text-align: center; justify-items: center; margin-inline: auto; }
.board-head { max-width: 640px; }
.board-head .title { font-size: clamp(34px, 7vw, 56px); }
.board-name { width: min(420px, 100%); margin-inline: auto; }
.choices.n2 { grid-template-columns: repeat(2, minmax(0, 300px)); }
.choices.n3, .choices.n4 { grid-template-columns: repeat(auto-fit, minmax(150px, 260px)); }
.choice .shot .badge { position: absolute; left: 8px; top: 8px; }
.choice.won .shot { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--good); }
.choice[disabled] { cursor: default; }
.choice .bar.lead i, .q-looks .bar.lead i { background: var(--good); }
.after-vote { width: min(520px, 100%); margin-inline: auto; display: grid; gap: var(--s4); animation: rise var(--calm) var(--ease) both; }
.after-vote textarea { min-height: 76px; resize: none; line-height: 1.45; }
.after-vote .btn { justify-self: start; }
.board-foot { margin-top: var(--s6); padding-top: var(--s7); border-top: 1px solid var(--line); max-width: 560px; }
.boardpage > *, .boardbody > * { min-width: 0; }
.boardbody { display: grid; gap: var(--s6); }
/* On a phone the looks sit side by side, so they can be compared without scrolling back. */
@media (max-width: 560px) {
  .choices.n2, .choices.n3, .choices.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .choices.n3 > :last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - 6px); }
  .choice b { font-size: 14px; }
  .choice .meta { font-size: 13px; }
  .board-head .title { font-size: clamp(30px, 9vw, 40px); }
}

/* ---------- asking: the sheet that makes a question, and the owner's results ---------- */
.ask-body { display: grid; gap: var(--s5); }
.ask-strip { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--s1)); padding: 0 var(--s1); }
.ask-strip li { flex: 0 0 92px; display: grid; gap: 6px; font-size: 13px; line-height: 1.25; color: var(--muted); }
.ask-strip img { width: 92px; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; border-radius: 12px; background: var(--card); }
.ask-quick { gap: 8px; margin-top: calc(-1 * var(--s3)); }
.ask-quick .chip { min-height: 36px; padding: 0 14px; font-size: 13.5px; }
.ask-set { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.ask-set legend { margin-bottom: 8px; }
.ask-days { grid-template-columns: repeat(3, 1fr); }
.ask-choice { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-md); background: var(--card); cursor: pointer; transition: box-shadow var(--quick); }
.ask-choice:has(input:checked) { box-shadow: inset 0 0 0 1.5px var(--ink); background: var(--panel); }
.ask-choice input { margin: 3px 0 0; accent-color: var(--ink); width: 18px; height: 18px; flex: none; }
.ask-choice span { display: grid; gap: 2px; }
.ask-choice b { font-weight: 500; font-size: 15px; }
.ask-choice small { font-size: 13px; color: var(--muted); line-height: 1.4; }
.ask-days .ask-choice { padding: 12px; align-items: center; }
.ask-link { flex-wrap: nowrap; }
.ask-link .input { min-width: 0; flex: 1; }
.ask-tell:not([hidden]) { padding-top: var(--s3); border-top: 1px solid var(--line); }
.btn.wa { background: #1f6b4a; color: #fff; }
.tell-line { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; justify-content: space-between; padding: 14px 18px; margin-bottom: var(--s5); border-radius: var(--r-md); background: var(--card); }
.tell-line[hidden] { display: none; }
.questions { display: grid; gap: var(--s6); }
.question { display: grid; gap: var(--s4); padding-bottom: var(--s6); border-bottom: 1px solid var(--line); }
.q-looks { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(132px, 180px); gap: 14px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.q-looks li { display: grid; gap: 7px; align-content: start; }
.q-looks .shot { position: relative; aspect-ratio: 3 / 4; border-radius: var(--r-md); overflow: hidden; background: var(--card); }
.q-looks .shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.q-looks .shot .badge { position: absolute; left: 8px; top: 8px; }
.q-looks li.won .shot { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--good); }
.q-looks b { font-weight: 400; font-size: 14px; line-height: 1.3; }
.q-looks .meta { font-size: 13px; color: var(--muted); }
.q-looks .bar { height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.q-looks .bar i { display: block; height: 100%; background: var(--ink); transform-origin: left; transform: scaleX(var(--v, 0)); transition: transform var(--slow) var(--ease); }
.q-notes { display: grid; gap: 8px; padding: 14px 18px; border-radius: var(--r-md); background: var(--card); font-size: 14.5px; }
.q-notes b { font-weight: 500; }
.q-acts { gap: 10px 18px; }
.decide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; margin-top: var(--s4); }
.decide-grid .shot { aspect-ratio: 3 / 4; border-radius: var(--r-md); overflow: hidden; background: var(--card); }
.decide-grid img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
dialog.sheet.winner[open] { display: flex; flex-direction: column; gap: var(--s5); }
.winner-shot { flex: none; height: min(46svh, 460px); border-radius: var(--r-md); overflow: hidden; background: var(--card); }
.winner-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.winner .title { font-size: clamp(28px, 6vw, 40px); }

@media (max-width: 900px) {
  .hero { padding-top: 104px; }
  .hero-grid, .gate { grid-template-columns: 1fr; }
  .hero-glass { width: min(64vw, 300px); }
  .tiers, .try, .after { grid-template-columns: 1fr; }
  .after-art { min-height: 0; }
  .try-say { min-height: 0; }
  .promises { grid-template-columns: 1fr 1fr; }
  .closet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .askbar { border-radius: var(--r-lg); padding: 14px; }
}
@media (max-width: 520px) {
  .promises { grid-template-columns: 1fr; }
  .compare td:first-child { width: 42%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-glass .l1, .hero-cap .c1 { opacity: 1; }
}

/* The first screen arrives on its own, without waiting for a script. */
.hero [data-reveal], .page-head [data-reveal] { opacity: 1; transform: none; transition: none; animation: enter var(--slow) var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms + 80ms); }
@keyframes enter { from { opacity: 0; transform: translateY(10px); } }
.boardbody { display: grid; gap: var(--s6); }

/* Signing out. Beside the account button on a wide bar; a row of its own, with the wardrobe, in the phone menu. */
.row.signed { align-items: baseline; gap: var(--s2) var(--s4); }
.nav-out { padding: 10px 4px; font-size: 14px; white-space: nowrap; }
.nav-links .menu-only { display: none; }
/* With "Your wardrobe" and "Sign out" beside the mirror button, a bar under about 1040px does not fit on one line,
   so a signed-in shopper gets the phone menu a little earlier than brand.css gives it (900px). */
@media (min-width: 901px) and (max-width: 1040px) {
  .nav.signed .nav-links { position: fixed; inset: 64px 0 auto 0; flex-direction: column; gap: 0; padding: var(--s3) clamp(20px, 5vw, 56px) var(--s5); background: var(--bg); border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity var(--calm), transform var(--calm) var(--ease); }
  .nav.signed .nav-links a { padding: 14px 0; font-size: 18px; color: var(--ink); border-bottom: 1px solid var(--line); }
  .nav.signed.open .nav-links { opacity: 1; transform: none; pointer-events: auto; }
  .nav.signed .nav-toggle { display: inline-flex; margin-left: auto; }
  .nav.signed .nav-cta .hide-s { display: none; }
  .nav.signed .nav-links .menu-only { display: block; width: 100%; min-height: 44px; padding: 14px 0; text-align: left; font-size: 18px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
}
@media (min-width: 1041px) and (max-width: 1140px) {
  .nav, .nav-links { gap: var(--s4); }
  .nav-links a { white-space: nowrap; }
  .nav-cta .btn.small { padding: 0 18px; }
  .nav-out { padding: 10px 2px; font-size: 13px; }
}
@media (max-width: 900px) {
  .nav-links .menu-only { display: block; width: 100%; min-height: 44px; padding: 14px 0; text-align: left; font-size: 18px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
}

/* A kicker sits a little clear of the heading under it, even in a close stack. */
.stack.close > .kicker + .title, .stack.close > .kicker + .display { margin-top: var(--s4); }

/* The home page's section titles break where the thought does, on two lines, not five. */
[data-page="home"] .head { max-width: 46em; }
[data-page="home"] .head .title em { display: block; }
.ask-go { position: sticky; bottom: calc(-1 * clamp(22px, 4vw, 36px)); margin-bottom: calc(-1 * clamp(22px, 4vw, 36px)); padding: 12px 0 clamp(22px, 4vw, 36px); background: linear-gradient(to top, var(--panel) 72%, transparent); }
@media (max-width: 700px) { .ask-go { bottom: calc(-24px - env(safe-area-inset-bottom)); margin-bottom: calc(-24px - env(safe-area-inset-bottom)); padding-bottom: calc(24px + env(safe-area-inset-bottom)); } }

/* "Add MIRVA to your home screen" (src/web/install.js): a card that rises once, after the first kept look. */
.install-card {
  position: fixed; z-index: 80; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); max-width: 460px; margin: 0 auto;
  display: grid; gap: 12px; padding: 16px 16px 14px 18px; border-radius: 20px; background: #0b0b0e; color: #f4f2ef;
  box-shadow: 0 30px 70px -30px rgba(10, 8, 6, .8); transform: translateY(24px); opacity: 0; transition: transform 260ms cubic-bezier(.2,.7,.2,1), opacity 260ms;
}
.install-card.in { transform: none; opacity: 1; }
.install-card b { display: block; font: 400 20px/1.2 var(--serif); }
.install-card span { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.45; color: #d2cbc3; }
.install-acts { display: flex; justify-content: flex-end; gap: 8px; }
.install-acts button { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 0; font: 500 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.install-later { background: none; color: #d2cbc3; }
.install-add { background: #f4f2ef; color: #0b0b0e; }

/* ---------- the account as an app, on a phone: four places along the bottom ---------- */
.appbar { display: none; }
@media (max-width: 700px) {
  .account { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
  .me-tabs { display: none; }
  .appbar {
    display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: color-mix(in oklab, var(--panel) 90%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 -1px 0 var(--line);
  }
  .appbar-item { position: relative; display: grid; justify-items: center; gap: 3px; min-height: 52px; padding: 6px 0 4px; color: var(--muted); font-size: 11px; letter-spacing: .06em; text-decoration: none; -webkit-tap-highlight-color: transparent; }
  .appbar-item svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .appbar-item[aria-current="page"] { color: var(--ink); }
  .appbar-item[aria-current="page"] svg { stroke-width: 1.9; }
  .appbar-item .dot { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--good); color: #fff; font: 600 10.5px/18px var(--sans); font-style: normal; text-align: center; }
  .appbar-item .dot[hidden] { display: none; }
  :root .askbar { bottom: calc(80px + env(safe-area-inset-bottom)); }
  .install-card { bottom: calc(84px + env(safe-area-inset-bottom)); }
}
@media (max-width: 700px) {
  .account { padding-top: 92px; }
  .me-head { margin-bottom: var(--s5); }
  .allow .btn { display: none; } /* the Mirror is in the bar along the bottom */
}

/* ---------- home: the MIRVA mirror, and her in it ----------
   The founder's design (23 Oct 2026), as a photograph: public/brand/mirva-mirror.webp has its glass see-through (cut
   along the inside of the line of light) and its edges faded into this room. The portraits sit behind the glass, each
   placed by where its model stands (MIRVA's pose model): her head just under the curve, her feet just above the base,
   on the mirror's own axis. The mirror arrives first, then she appears in it; after that the looks follow each other
   by fading only. Nothing is masked, filtered or drawn while it moves. */
.oval-hero { position: relative; justify-self: center; width: clamp(226px, min(26vw, (100svh - 380px) * .455), 330px); margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (max-width: 900px) { .oval-hero { width: min(64vw, 270px); } }
/* wide screens: the labels beside the mirror name the piece, so the caption under it goes and the mirror grows */
@media (min-width: 1100px) {
  .oval-hero { width: clamp(240px, min(24vw, (100svh - 260px) * .455), 330px); }
  .oval-hero .oval-cap { display: none; }
  .hero .oval-hero figcaption { width: max-content; max-width: 62ch; margin-top: -9%; }
}
.mirror-photo { position: relative; aspect-ratio: 480 / 1056; }
.mirror-body { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
/* the glass: its box in the photograph, and its own pebble outline traced from the photograph and grown a little under
   the line of light (node tools/stores/glass-shape.mjs). A rounded box let the portrait spill past the light at three
   corners and left a dark sliver inside it on the left (30 Oct 2026). Light behind, like the room's floor, where the
   portrait fades at its foot. */
.mirror-glass {
  position: absolute; z-index: 1; left: 23.54%; top: 7.01%; width: 52.29%; height: 71.5%; background: #e4d9ca;
  clip-path: polygon(50.23% 0.01%, 60.35% -0.38%, 70.45% -0.08%, 79.77% 1.61%, 87.30% 4.98%, 91.76% 10.30%, 94.60% 15.36%, 96.22% 19.97%, 97.09% 23.99%, 97.93% 27.24%, 98.37% 30.11%, 98.83% 32.55%, 98.90% 34.79%, 99.36% 36.65%, 99.78% 38.33%, 99.76% 39.97%, 100.26% 41.37%, 100.26% 42.77%, 100.29% 44.08%, 100.31% 45.32%, 100.36% 46.50%, 100.74% 47.63%, 100.79% 48.76%, 100.72% 49.87%, 100.73% 50.97%, 100.72% 52.07%, 100.79% 53.18%, 100.74% 54.31%, 100.74% 55.47%, 100.69% 56.66%, 100.66% 57.91%, 100.61% 59.23%, 100.61% 60.64%, 100.58% 62.15%, 100.57% 63.81%, 100.55% 65.64%, 100.10% 67.55%, 100.01% 69.84%, 99.59% 72.35%, 98.76% 75.11%, 97.89% 78.41%, 96.58% 82.21%, 94.18% 86.24%, 90.96% 90.85%, 86.09% 95.46%, 78.52% 98.25%, 69.59% 99.85%, 59.92% 100.10%, 50.23% 100.11%, 40.57% 99.97%, 30.92% 99.72%, 21.70% 98.64%, 13.83% 96.13%, 8.19% 92.14%, 4.60% 87.59%, 2.17% 83.37%, 0.93% 79.36%, 0.09% 75.91%, -0.40% 72.90%, -0.40% 70.16%, -0.83% 67.94%, -0.92% 65.88%, -0.98% 64.03%, -0.95% 62.34%, -1.01% 60.80%, -1.05% 59.37%, -1.03% 58.03%, -1.08% 56.76%, -1.15% 55.55%, -1.16% 54.37%, -0.73% 53.20%, -0.76% 52.08%, -0.77% 50.97%, -0.76% 49.86%, -0.73% 48.74%, -0.37% 47.62%, -0.28% 46.47%, -0.32% 45.26%, -0.29% 44.01%, 0.11% 42.75%, 0.20% 41.37%, 0.62% 39.95%, 0.68% 38.33%, 1.10% 36.65%, 1.14% 34.65%, 1.57% 32.52%, 2.03% 30.09%, 2.86% 27.40%, 3.42% 24.01%, 4.55% 20.17%, 6.21% 15.64%, 9.86% 11.43%, 15.79% 8.24%, 23.06% 5.57%, 31.31% 3.20%, 40.45% 1.34%);
}
/* the mirror's own shadow on the wall, so the marble's veins quieten as they pass behind it */
.mirror-photo::before { content: ""; position: absolute; z-index: 0; inset: -14% -42% 6%; background: radial-gradient(closest-side, rgba(11, 10, 13, .78), rgba(11, 10, 13, .45) 55%, rgba(11, 10, 13, 0)); pointer-events: none; }
.mirror-glass img {
  position: absolute; max-width: none; height: var(--h); width: var(--w); left: var(--l); top: var(--t);
  opacity: 0; animation: oval-look 18s var(--ease) infinite;
  -webkit-mask-image: linear-gradient(#000 92%, transparent); mask-image: linear-gradient(#000 92%, transparent);
}
/* the light-room portraits (23 Oct 2026: the founder asked for a light room in the mirror), placed by landmarks-day.json */
.mirror-glass .o1 { --h: 101.3%; --w: 171.39%; --l: -35.35%; --t: -2.65%; animation-delay: 1.1s; }
/* All three are the same model standing in the same place (one photo, the piece changed by MIRVA's engine), so they share
   one placement (tools/stores/place-hero.mjs reads her head and axis identical in each). */
.mirror-glass .o2 { --h: 101.3%; --w: 171.39%; --l: -35.35%; --t: -2.65%; animation-delay: 7.1s; }
.mirror-glass .o3 { --h: 101.3%; --w: 171.39%; --l: -35.35%; --t: -2.65%; animation-delay: 13.1s; }
/* the mirror's own few words, over her: MIRVA and the occasion at the top, the look and the family button at the foot.
   The room in the glass is light, so they are ink; the button is ivory with WhatsApp's own mark. */
.mg-ui { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 15% 6% 6%; pointer-events: none; text-align: center; }
.mg-top { display: grid; justify-items: center; gap: 4px; width: 100%; }
.mg-mark { font: 500 11px/1 var(--mark); letter-spacing: .34em; padding-left: .34em; color: #14131a; }
.mg-for { position: relative; display: block; width: 100%; height: 1.3em; font: 500 11px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #4a4650; }
.mg-for .c { position: absolute; left: 0; right: 0; top: 0; white-space: nowrap; opacity: 0; animation: oval-look 18s var(--ease) infinite; }
.mg-for .c1 { animation-delay: 1.1s; } .mg-for .c2 { animation-delay: 7.1s; } .mg-for .c3 { animation-delay: 13.1s; }
/* no look dots (30 Oct 2026): the glass is too narrow for them anywhere but over her; the occasion says which look it is */
.mg-foot { display: grid; justify-items: center; }
.mg-ask { display: inline-flex; align-items: center; padding: 6px 10px 6px 8px; border-radius: 999px; background: rgba(249, 246, 241, .94); color: #14131a; font: 600 11px/1 var(--sans); white-space: nowrap; box-shadow: 0 8px 18px -10px rgba(10, 8, 6, .55); }
.mg-ask.wa::before { margin-right: .4em; vertical-align: 0; }
/* what is happening, said beside the mirror on a wide screen: three quiet labels with a hairline to the mirror */
.mirror-notes { display: none; }
@media (min-width: 1100px) {
  .mirror-notes { display: block; list-style: none; margin: 0; padding: 0; }
  .mirror-notes li { position: absolute; z-index: 3; width: 150px; font: 400 12.5px/1.4 var(--sans); color: #a8a097; opacity: 0; animation: note-in .6s var(--ease) forwards; }
  .mirror-notes b { display: block; font: 400 17px/1.2 var(--serif); color: #f3f1ee; margin-bottom: 2px; }
  .mirror-notes li::after { content: ""; position: absolute; top: .62em; width: 34px; height: 1px; background: rgba(243, 241, 238, .38); }
  .mirror-notes li::before { content: ""; position: absolute; top: calc(.62em - 2px); width: 5px; height: 5px; border-radius: 50%; background: #f3f1ee; }
  .n-face { right: 86%; top: 20%; text-align: right; padding-right: 46px; animation-delay: 1.2s !important; }
  .n-face::after { right: 6px; } .n-face::before { right: 0; }
  .n-piece { left: 86%; top: 42%; padding-left: 46px; animation-delay: 1.45s !important; }
  .n-piece::after { left: 6px; } .n-piece::before { left: 0; }
  .n-ask { left: 86%; top: 73%; padding-left: 46px; animation-delay: 1.7s !important; }
  .n-ask::after { left: 6px; } .n-ask::before { left: 0; }
}
@keyframes note-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* the pitch beside it: three steps in one line, and a door for store owners */
.mirror-notes .np { position: relative; display: block; height: 1.4em; font: italic 400 14px/1.4 var(--serif); color: #e9e2d8; }
.mirror-notes .np .c { position: absolute; left: 0; right: 0; white-space: nowrap; opacity: 0; animation: oval-look 18s var(--ease) infinite; }
.mirror-notes .np .c1 { animation-delay: 1.1s; } .mirror-notes .np .c2 { animation-delay: 7.1s; } .mirror-notes .np .c3 { animation-delay: 13.1s; }
.hero-steps { list-style: none; margin: 6px 0 4px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font: 500 15px/1.3 var(--sans); color: #d9d2c9; }
.hero-steps li { display: flex; align-items: center; gap: 10px; }
.hero-steps i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font: 500 12.5px/1 var(--sans); font-style: normal; color: #f3f1ee; box-shadow: inset 0 0 0 1px rgba(243, 241, 238, .35); }
.hero-store { font-size: 14.5px; color: #a8a097; }
.hero-store a { color: #f3f1ee; text-underline-offset: 3px; }
.hero-store a::after { content: " →"; }
@keyframes oval-look { 0% { opacity: 0; } 5%, 31% { opacity: 1; } 35%, 100% { opacity: 0; } }
/* the mirror itself arrives first, in the hero's own entrance */
.hero .oval-hero[data-reveal] { animation-duration: 900ms; }
/* under the base: what she is wearing, and what it is for, in step with the glass */
.oval-cap { display: grid; justify-items: center; gap: 4px; margin-top: -2px; text-align: center; color: #f4f2ef; }
.oval-cap p { position: relative; height: 1.35em; width: 100%; }
.oval-cap .c { position: absolute; left: 0; right: 0; bottom: 0; white-space: nowrap; opacity: 0; animation: oval-look 18s var(--ease) infinite; }
.oval-cap .c1 { animation-delay: 1.1s; } .oval-cap .c2 { animation-delay: 7.1s; } .oval-cap .c3 { animation-delay: 13.1s; }
.oval-cap .tag { font: 500 11px/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: #b9b1a8; }
.oval-cap .line { font-size: clamp(19px, 1.7vw, 23px); }
.oval-hero figcaption { color: #8f877f; text-align: center; max-width: 32ch; justify-self: center; }
@media (prefers-reduced-motion: reduce) {
  .mirror-glass .o1, .oval-cap .c1, .mg-for .c1 { opacity: 1; animation: none; }
  .mirror-glass .o2, .mirror-glass .o3, .oval-cap .c2, .oval-cap .c3, .mg-for .c2, .mg-for .c3 { display: none; }
  .mirror-notes li, .mirror-notes .np .c1 { opacity: 1; animation: none; }
  .mirror-notes .np .c2, .mirror-notes .np .c3 { display: none; }
}

/* ---------- home: the proof ---------- */
.proof { display: grid; gap: var(--s5); }
.proof-pick { justify-self: start; display: inline-flex; padding: 4px; border-radius: 999px; background: var(--panel); box-shadow: 0 0 0 1px var(--line); }
.proof-pick input { position: absolute; opacity: 0; pointer-events: none; }
.proof-pick label { min-height: 40px; padding: 0 22px; display: grid; place-items: center; border-radius: 999px; font-size: 14.5px; color: var(--muted); cursor: pointer; transition: background var(--quick), color var(--quick); }
.proof-pick input:checked + label { background: var(--ink); color: var(--panel); }
.proof-pick input:focus-visible + label { outline: 2px solid var(--ink); outline-offset: 2px; }
.proof .him { display: none; }
.proof:has(#forHim:checked) .him { display: grid; }
.proof:has(#forHim:checked) .her { display: none; }
.proof-row { display: grid; grid-template-columns: minmax(0, .8fr) auto minmax(0, 3fr); gap: clamp(14px, 2vw, 28px); align-items: center; }
.proof .before { margin: 0; display: grid; gap: 10px; }
.proof .before img, .results li > img:first-child { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; object-position: 50% 12%; border-radius: var(--r-md); background: var(--card); }
.proof .before img { filter: saturate(.9); }
.proof figcaption, .results p { display: grid; gap: 3px; font-size: 13.5px; line-height: 1.35; color: var(--muted); }
.proof figcaption b, .results b { font-weight: 500; font-size: 15px; color: var(--ink); }
.results .kicker { font-size: 11px; }
.proof-arrow { width: 34px; height: 2px; background: var(--ink); position: relative; opacity: .5; }
.proof-arrow::after { content: ""; position: absolute; right: -1px; top: -4px; width: 9px; height: 9px; border-top: 2px solid var(--ink); border-right: 2px solid var(--ink); transform: rotate(45deg); }
.results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 24px); }
.results li { position: relative; display: grid; gap: 10px; align-content: start; }
.results .store { position: absolute; right: 8px; top: 8px; width: 28%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; border-radius: 10px; box-shadow: 0 0 0 2px var(--panel), 0 10px 22px -12px rgba(12, 10, 8, .6); background: var(--card); }
.proof-note { max-width: 78ch; margin-top: var(--s5); }
@media (max-width: 700px) {
  .proof-row { grid-template-columns: minmax(0, 1fr); }
  .proof .before { grid-template-columns: 92px 1fr; align-items: center; }
  .proof-arrow { display: none; }
  .results { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 calc(-1 * clamp(20px, 5vw, 56px)); padding: 0 clamp(20px, 5vw, 56px) 6px; scrollbar-width: none; }
  .results li { flex: 0 0 62vw; scroll-snap-align: start; }
}

/* ---------- home: how it works ---------- */
.how { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); margin-bottom: clamp(40px, 6vw, 72px); counter-reset: how; }
.how li { display: grid; align-content: start; gap: 8px; padding-top: 18px; border-top: 1px solid var(--line); counter-increment: how; } /* start: a taller neighbour no longer pushes a step's title down */
.how li::before { content: counter(how, decimal-leading-zero); font: 400 20px/1 var(--serif); color: var(--muted); }
.how b { font: 400 clamp(20px, 1.8vw, 24px)/1.2 var(--serif); }
.how span { font-size: 15px; line-height: 1.5; color: var(--muted); }
@media (max-width: 900px) { .how { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .how { grid-template-columns: minmax(0, 1fr); } }

/* ---------- home: the family, in WhatsApp ---------- */
.family-points { display: grid; gap: 14px; max-width: 46ch; }
.family-points li { padding-left: 22px; position: relative; color: var(--muted); line-height: 1.5; }
.family-points li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--good); }
.family-points b { color: var(--ink); font-weight: 500; }
.family-demo { justify-self: center; width: min(380px, 100%); }
.chat { display: grid; gap: 10px; padding: 16px 14px 20px; border-radius: 28px; background: #0b141a; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 50px 100px -50px rgba(0,0,0,.9); }
.chat-top { display: flex; align-items: center; gap: 10px; padding: 0 6px 8px; border-bottom: 1px solid rgba(255,255,255,.08); font: 500 15px var(--sans); color: #e9edef; }
.chat-dot { width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #3aa58c, #0b3029); }
.chat-top .wa { margin-left: auto; line-height: 0; }
.chat-top .wa::before { margin: 0; width: 20px; height: 20px; }
.bubble { justify-self: start; max-width: 88%; padding: 6px 6px 8px; border-radius: 4px 14px 14px 14px; background: #202c33; color: #e9edef; font-size: 14px; line-height: 1.4; }
.bubble img { display: block; width: 100%; height: auto; border-radius: 10px; }
.bubble-site { margin: 6px 6px 0; font-size: 11px; color: #8696a0; text-transform: lowercase; }
.bubble-title { margin: 2px 6px 0; font-weight: 500; }
.bubble-text { margin: 4px 6px 0; color: #d1d7db; font-size: 13px; }
.bubble.mine { justify-self: end; border-radius: 14px 4px 14px 14px; background: #005c4b; padding: 8px 12px; }
.bubble:not(:has(img)) { padding: 8px 12px; }

/* ---------- home: near you ---------- */
.wait { display: grid; gap: var(--s4); }
/* /mirrors: the MIRVA mirror (the concept picture /retail shows) beside the waiting list. */
.mirror-concept { margin: 0; display: grid; gap: var(--s3); justify-items: center; align-self: start; }
.mirror-concept img { width: min(100%, 360px); height: auto; border-radius: var(--r-lg); }
.wait .formnote.ok { color: var(--good); }
.store-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(12px, 2vw, 20px); }
.store-list a { display: grid; gap: 6px; padding: 22px 24px; border-radius: var(--r-lg); background: var(--panel); box-shadow: 0 0 0 1px var(--line); text-decoration: none; color: var(--ink); transition: box-shadow var(--quick), transform var(--quick) var(--ease); }
.store-list a:hover { box-shadow: 0 0 0 1px var(--ink); transform: translateY(-1px); }
.store-list b { font: 400 24px/1.15 var(--serif); }
.store-list span { font-size: 14.5px; color: var(--muted); }
.store-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(12px, 2vw, 20px); }
.store-list a { display: grid; gap: 6px; padding: 22px 24px; border-radius: var(--r-lg); background: var(--panel); box-shadow: 0 0 0 1px var(--line); text-decoration: none; color: var(--ink); transition: box-shadow var(--quick), transform var(--quick) var(--ease); }
.store-list a:hover { box-shadow: 0 0 0 1px var(--ink); transform: translateY(-1px); }
.store-list b { font: 400 24px/1.15 var(--serif); }
.store-list span { font-size: 14.5px; color: var(--muted); }
/* the pictures' width and height attributes give the page their shape before they load; CSS sets the size */
.proof img, .oval img { height: auto; }
.oval img { height: 100%; }
@media (max-width: 700px) {
  .results { scroll-padding-inline: clamp(20px, 5vw, 56px); }
  .oval-hero { margin-top: 40px; width: min(78vw, 320px); }
}
/* the results show the person, not the empty studio above her */
.proof .before img, .results li > img:first-child { aspect-ratio: 5 / 8; object-position: 50% 38%; }

/* answers arrive: a bar grows from nothing when a vote comes in */
@starting-style { .choice .bar i, .q-looks .bar i { transform: scaleX(0); } }

/* ---------- her look on her phone, from the mirror's code (/p/<code>, src/web/pickup.js) ---------- */
.pickup { padding-block: calc(24px + env(safe-area-inset-top)) 48px; display: grid; gap: 22px; max-width: 520px; }
.pickup-body { display: grid; gap: 18px; }
.pickup-body .title { font-size: clamp(32px, 9vw, 44px); }
/* a shopper's own phone, handing a photo to a store's mirror (/photo, src/web/photo.js) */
.photo-title { margin: 6px 0 0; font: 400 clamp(32px, 9vw, 44px)/1.05 var(--serif); letter-spacing: -.01em; }
.photo-lead { margin: 0; font-size: 16px; line-height: 1.5; opacity: .82; max-width: 34ch; }
.photo-preview { margin: 0; border-radius: 22px; overflow: hidden; max-height: 52svh; background: #141218; }
.photo-preview img { display: block; width: 100%; max-height: 52svh; object-fit: contain; }
.photo-choose { justify-self: start; min-height: 52px; padding-inline: 28px; cursor: pointer; }
.photo-choose[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.photo-says { margin: 0; min-height: 1.4em; font: italic 400 19px/1.35 var(--serif); }
.photo-fine { opacity: .7; }
.pickup-frame { position: relative; margin: 0; border-radius: 26px; overflow: hidden; aspect-ratio: 9 / 16; max-height: 64svh; background: #141218;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .08); }
.pickup-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.pickup-frame.waiting img { opacity: .35; filter: saturate(.7); }
.pickup-frame.unveil img { animation: pickup-unveil 1s var(--ease); }
@keyframes pickup-unveil { from { opacity: 0; transform: scale(1.04); } }
.pickup-halo { position: absolute; left: 22%; right: 22%; top: 38%; height: 70px; border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  border-top: 2px solid rgba(246, 248, 251, .9); filter: drop-shadow(0 0 10px rgba(226, 201, 149, .5)); animation: breathe 2.4s ease-in-out infinite; }
.pickup-name { display: grid; gap: 2px; color: var(--muted); }
.pickup-name b { color: var(--ink); font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .pickup-halo, .pickup-frame.unveil img { animation: none; } }