/* Volo — "luxury minimal" design system for the consumer product surface.
 *
 * Warm charcoal, generous negative space, an elegant serif for display type,
 * a clean sans for everything else, and a single restrained champagne accent.
 * Deliberately quiet — this is the boutique, not the trading terminal
 * (terminal.html keeps terminal.css; this powers app.html).
 */

:root {
  --bg: #0e0d0b;
  --bg-2: #131210;
  --surface: #16140f;
  --surface-2: #1c1a14;
  --line: #2a2720;
  --line-2: #3a3529;
  --text: #e9e4d8;
  --muted: #978f7e;
  --faint: #6e6859;
  --bright: #f8f3e7;
  --gold: #c2a05a;
  --gold-soft: rgba(194, 160, 90, 0.12);
  --gold-line: rgba(194, 160, 90, 0.4);
  --green: #8aae90;
  --red: #cf8d80;
  /* Bright "terminal" status colours for the RFQ board */
  --t-blue: #3d9bff;
  --t-green: #2ec26e;
  --t-amber: #ffae3b;
  --t-red: #ff5b5b;
  --t-grey: #9a9488;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
/* The `hidden` attribute must win over class display rules (.screen/.topbar use
   display:flex, which would otherwise override the UA `[hidden]{display:none}`). */
[hidden] { display: none !important; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.6;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-weight: 500; }
.serif { font-family: var(--serif); font-weight: 500; letter-spacing: 0.01em; }
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--bright); }

.dim, .muted { color: var(--muted); }
.faint { color: var(--faint); }
.amber, .gold { color: var(--gold); }
.green { color: var(--green); }
.red { color: var(--red); }
.bright { color: var(--bright); }
.tnum { font-variant-numeric: tabular-nums; }

/* ------------------------------- buttons ------------------------------- */
button {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  background: var(--bright);
  color: #14130f;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 11px 20px;
  letter-spacing: 0.02em;
  transition: filter 0.12s, border-color 0.12s, background 0.12s;
}
button:hover { filter: brightness(0.94); }
button.ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line-2);
}
button.ghost:hover { border-color: var(--gold-line); color: var(--bright); filter: none; }
button:disabled { opacity: 0.4; cursor: default; filter: none; }
.btn-block { width: 100%; display: block; }

/* Google-brand button (white per Google guidelines) */
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  width: 100%;
  background: #ffffff; color: #1f1f1f;
  border: 0; border-radius: 6px; padding: 12px 20px;
  font-weight: 500; font-size: 14px; cursor: pointer;
}
.btn-google:hover { filter: brightness(0.96); }
.btn-google svg { width: 18px; height: 18px; }

/* ------------------------------- inputs -------------------------------- */
input, select, textarea {
  font-family: var(--sans);
  font-size: 14px;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 11px 13px;
  width: 100%;
  transition: border-color 0.12s;
}
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold-line); }
label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}

/* ------------------------------- panels -------------------------------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.panel-title {
  font-size: 11px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.14em; padding: 13px 18px; border-bottom: 1px solid var(--line);
}
.body { padding: 18px; }

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th {
  text-align: left; color: var(--muted); font-weight: 500;
  text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.1em;
  padding: 11px 14px; border-bottom: 1px solid var(--line);
}
td { padding: 13px 14px; border-bottom: 1px solid var(--line); }
tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: rgba(194, 160, 90, 0.04); }

/* =============================== app shell =============================== */
.topbar {
  display: flex; align-items: center; gap: 22px;
  padding: 0 26px; height: 64px;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20; background: rgba(14, 13, 11, 0.9);
  backdrop-filter: blur(8px);
}
.topbar .brand { font-family: var(--serif); font-size: 22px; letter-spacing: 0.22em; color: var(--bright); }
.spacer { flex: 1; }

.topnav { display: inline-flex; gap: 4px; }
.navlink {
  background: transparent; color: var(--muted); border-radius: 20px;
  padding: 8px 18px; font-size: 13px; letter-spacing: 0.06em; cursor: pointer;
}
.navlink:hover { color: var(--text); text-decoration: none; }
.navlink.active { background: var(--gold-soft); color: var(--gold); }

.searchwrap { flex: 1; display: flex; justify-content: center; padding: 0 22px; }
.searchwrap input {
  width: 100%; max-width: 460px;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 22px;
  padding: 9px 18px; font-size: 13.5px;
}
.searchwrap input::placeholder { color: var(--faint); }
.searchwrap input:focus { outline: none; border-color: var(--gold-line); }
@media (max-width: 820px) { .searchwrap { display: none; } }

/* Browse hub — horizontal carousel of collectible-type boxes */
.browse-carousel {
  display: flex; gap: 0; overflow-x: auto; padding: 4px 2px 18px; align-items: stretch;
  scroll-snap-type: x proximity;
}
.browse-carousel::-webkit-scrollbar { height: 8px; }
.browse-carousel::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; }
.type-tile {
  /* Fixed width (not min/max) so collapse animates one continuous, constant-speed
     step — min/max both shrinking past the content width caused a mid-motion pause. */
  width: 230px; flex: 0 0 auto; scroll-snap-align: start;
  margin-right: 14px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 22px; cursor: pointer;
  transition: border-color 0.14s, background 0.14s,
    width 0.5s linear, margin 0.5s linear, padding 0.5s linear,
    opacity 0.5s linear, border-width 0.5s linear;
}
.type-tile:hover { border-color: var(--gold-line); }
.type-tile.open { border-color: var(--gold-line); background: var(--gold-soft); }
.type-tile .tt-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.type-tile h3 { font-family: var(--serif); font-size: 22px; color: var(--bright); margin: 0; font-weight: 500; text-transform: none; letter-spacing: 0; white-space: nowrap; }
.type-tile .tt-meta { color: var(--muted); font-size: 12.5px; margin-top: 6px; white-space: nowrap; }
.type-tile .chev { color: var(--gold); font-size: 14px; }
.type-tile .soon { font-size: 10px; color: var(--faint); border: 1px solid var(--line-2); border-radius: 20px; padding: 2px 9px; text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; }

/* Focused: the other tiles collapse away, so the selected one glides into the left
   from its own position (no reorder — reordering made it teleport in from the edge),
   and a sub-carousel of its categories expands to its right. */
.browse-carousel.focused { scroll-snap-type: none; }
.browse-carousel.focused .type-tile.open { margin-right: 24px; }
.browse-carousel.focused .type-tile:not(.open) {
  width: 0; margin-right: 0; padding-left: 0; padding-right: 0;
  border-width: 0; opacity: 0; pointer-events: none;
}
.subrail {
  display: flex; align-items: center; gap: 10px; flex: 0 0 auto; overflow: hidden;
  max-width: 0; opacity: 0;
  transition: max-width 0.5s linear, opacity 0.5s linear, padding 0.5s linear;
}
.browse-carousel.focused .subrail {
  max-width: 2000px; opacity: 1; padding-left: 24px; border-left: 1px solid var(--line);
}
.subtype {
  border: 1px solid var(--line-2); border-radius: 22px; padding: 9px 18px; cursor: pointer;
  color: var(--text); font-size: 13.5px; background: var(--surface); white-space: nowrap;
  transition: all 0.12s;
}
.subtype:hover { border-color: var(--gold-line); color: var(--gold); }
.subtype.active { border-color: var(--gold); color: var(--gold); background: var(--gold-soft); }
.subtype.soon { color: var(--faint); cursor: default; }
.subtype.soon:hover { border-color: var(--line-2); color: var(--faint); }

/* Catalogue embedded under the carousel (same Browse page, no backlink) */
#browseBody { margin-top: 30px; }
#browseBody:empty { margin-top: 0; }
.browse-body-head { animation: vfade 0.3s cubic-bezier(0.22,0.61,0.36,1) both; }
.browse-body-head h2 { font-family: var(--serif); font-size: 30px; font-weight: 500; color: var(--bright); margin: 0 0 4px; letter-spacing: 0; }
.browse-body-head .view-sub { margin-bottom: 22px; }

/* Home hub (post-sign-in landing; reached via the VOLO wordmark) */
.home { max-width: 880px; margin: 0 auto; text-align: center; padding-top: 20px; animation: vfade 0.34s cubic-bezier(0.22,0.61,0.36,1) both; }
.home-mark { font-family: var(--serif); font-size: clamp(46px, 10vw, 88px); letter-spacing: 0.28em; color: var(--bright); padding-left: 0.28em; line-height: 1.05; }
.home-rule { width: 48px; height: 1px; background: var(--gold); margin: 16px auto 18px; }
.home-tag { color: var(--muted); font-size: 15px; margin: 0 auto 30px; max-width: 520px; }
/* About: a full-width tile (spans both Buy + Browse), styled like the nav tiles;
   the whole tile is a link into the About page. */
.home-about {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 28px 30px; margin: 0 0 18px; text-align: left; cursor: pointer;
  transition: border-color 0.14s, transform 0.14s;
}
.home-about:hover { border-color: var(--gold-line); transform: translateY(-2px); }
.home-about .kicker { font-size: 11px; text-transform: uppercase; letter-spacing: 0.22em; color: var(--gold); margin-bottom: 12px; }
.home-about-lead { font-family: var(--serif); font-size: 22px; color: var(--bright); margin: 0 0 12px; }
.home-about-lead em { color: var(--gold); font-style: italic; }
.home-about-body { color: var(--muted); font-size: 14px; line-height: 1.75; margin: 0; max-width: 760px; }
.home-about-more { display: inline-block; margin-top: 14px; color: var(--gold); font-size: 13px; }

/* About page */
.about-page { max-width: 820px; margin: 0 auto; animation: vfade 0.34s cubic-bezier(0.22,0.61,0.36,1) both; }
.about-hero { text-align: center; margin: 8px 0 52px; }
.about-hero h1 { font-family: var(--serif); font-size: clamp(34px, 6vw, 52px); font-weight: 500; color: var(--bright); margin: 0 0 22px; line-height: 1.1; }
.about-hero p { color: var(--muted); font-size: 16px; line-height: 1.8; margin: 0 auto 16px; max-width: 700px; }
.about-emph { color: var(--bright) !important; font-family: var(--serif); font-style: italic; font-size: 19px !important; }
.about-section { margin: 0 0 54px; }
.about-section h2 { font-family: var(--serif); font-size: 28px; font-weight: 500; color: var(--bright); margin: 0 0 24px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.about-steps { display: grid; gap: 16px; }
.about-step { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 26px 28px; }
.about-step .step-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.about-step .step-n {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-family: var(--serif); font-size: 16px;
  color: var(--gold); border: 1px solid var(--gold-line); background: var(--gold-soft);
}
.about-step h3 { font-family: var(--serif); font-size: 22px; font-weight: 500; color: var(--bright); margin: 0; }
.about-step p { color: var(--muted); font-size: 14.5px; line-height: 1.78; margin: 0 0 12px; }
.about-step p:last-child { margin-bottom: 0; }
.about-why { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 16px; }
.about-why-item { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; }
.about-why-item b { display: block; font-family: var(--serif); font-size: 18px; font-weight: 500; color: var(--gold); margin-bottom: 8px; }
.about-why-item p { color: var(--muted); font-size: 13.5px; line-height: 1.7; margin: 0; }
.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 18px 36px 18px 2px; position: relative;
  color: var(--bright); font-size: 15px; font-weight: 500;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  color: var(--gold); font-size: 20px; line-height: 1; transition: transform 0.2s;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item summary:hover { color: var(--gold); }
.faq-item .a { color: var(--muted); font-size: 14px; line-height: 1.78; padding: 0 36px 20px 2px; margin-top: -4px; }
.about-cta { text-align: center; margin-top: 8px; }
.about-cta button { min-width: 220px; }
.home-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; text-align: left; }
.home-tile { display: flex; flex-direction: column; height: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 26px; transition: border-color 0.14s, transform 0.14s; }
.home-tile:hover { border-color: var(--gold-line); transform: translateY(-2px); text-decoration: none; }
.home-tile .ht-title { font-family: var(--serif); font-size: 26px; color: var(--bright); margin-bottom: 8px; }
/* Push the description (and the Enter button under it) to the bottom so every
   tile's subtext + Enter line up at the same height regardless of title length. */
.home-tile .ht-desc { color: var(--muted); font-size: 13.5px; line-height: 1.6; margin-top: auto; }
.home-tile .ht-go { color: var(--gold); font-size: 13px; margin-top: 14px; }

/* Catalogue filter bar (cards + watches) — equal-width controls on one line where
   it fits; wraps only when the viewport is too narrow. Clear gap above the grid. */
.filterbar {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--line);
}
.filterbar input, .filterbar select { flex: 1 1 0; min-width: 120px; width: auto; }
.filterbar button { flex: 0 0 auto; }

.search-sect { margin-bottom: 30px; }
.search-sect .rfq-col-h { margin-bottom: 14px; }

/* Browse discovery zone (hub only) */
.discovery { margin-top: 32px; animation: vfade 0.34s cubic-bezier(0.22,0.61,0.36,1) both; }
.disc-sect { margin-top: 32px; }
.disc-sect .rfq-col-h { margin-bottom: 16px; }
.potd { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 24px 26px; }
.potd .potd-k { font-size: 11px; text-transform: uppercase; letter-spacing: 0.22em; color: var(--gold); margin-bottom: 18px; }
.potd .potd-body { display: flex; align-items: center; gap: 28px; }
@media (max-width: 620px) { .potd .potd-body { flex-direction: column; align-items: flex-start; gap: 18px; } }
.potd .potd-img { flex: 0 0 auto; width: 160px; height: 160px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.potd .potd-img img { width: 100%; height: 100%; object-fit: contain; }
.potd .potd-info { flex: 1; min-width: 0; }
.potd .potd-title { font-family: var(--serif); font-size: 30px; color: var(--bright); line-height: 1.15; }
.potd .potd-ref { color: var(--muted); font-size: 13.5px; margin-top: 4px; }
.potd .potd-sub { color: var(--text); font-size: 13.5px; margin-top: 6px; }
.potd .potd-price { font-family: var(--serif); font-size: 26px; color: var(--gold); margin: 14px 0 0; }
.potd .potd-cta { display: flex; flex-direction: column; gap: 10px; flex: 0 0 auto; margin-left: auto; align-self: center; min-width: 190px; }
.potd .potd-cta button { width: 100%; }
@media (max-width: 620px) { .potd .potd-cta { margin-left: 0; width: 100%; align-self: stretch; } }
/* Skeleton placeholders (reserve space so the tile doesn't jump on load) */
@keyframes skel-shimmer { 0% { background-position: -300px 0; } 100% { background-position: 300px 0; } }
.skel, .skel-line, .skel-btn { background: linear-gradient(90deg, var(--surface-2) 25%, var(--line) 38%, var(--surface-2) 60%); background-size: 600px 100%; animation: skel-shimmer 1.5s ease infinite; border-radius: 8px; }
.potd .potd-cta .skel-btn { height: 40px; width: 100%; border-radius: 22px; }
.skel-line { height: 14px; margin: 10px 0; }

/* Pokémon card catalogue — image grid + detail */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px; }
.card-cell { cursor: pointer; }
.card-cell img, .card-cell .noimg {
  width: 100%; aspect-ratio: 63 / 88; border-radius: 10px; border: 1px solid var(--line);
  display: block; object-fit: contain; background: var(--surface-2);
}
.card-cell:hover img { border-color: var(--gold-line); }
.card-cell .card-name { font-size: 13px; color: var(--text); margin-top: 9px; line-height: 1.3; }
/* Image placeholder when a collectible has no photo: a clean, centered gem
   line-mark (gold, low-opacity) on the surface tone — no "no image" text, no
   dashed box. Painted as a CSS background data-URI so it always renders. */
.noimg {
  display: flex; align-items: center; justify-content: center;
  font-size: 0; color: transparent; border-style: solid;
  background-color: var(--surface-2);
  background-repeat: no-repeat; background-position: center;
  background-size: clamp(34px, 32%, 72px) auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23c2a05a' stroke-opacity='0.45' stroke-width='1.4' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M10 18 18 8 30 8 38 18 24 42Z'/%3E%3Cpath d='M10 18H38'/%3E%3Cpath d='M18 8 24 18 30 8'/%3E%3Cpath d='M24 18V42'/%3E%3C/svg%3E");
}
.card-detail { display: grid; grid-template-columns: 300px 1fr; gap: 34px; align-items: start; position: relative; }
@media (max-width: 680px) { .card-detail { grid-template-columns: 1fr; max-width: 320px; } }
.card-hero { width: 100%; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); }

/* Rolex art sits a hair low in the source frames. Nudge it up with a transform
   (object-fit stays contain — no scaling, so no zoom or blur), and pull the caption
   up so there's no dead space. Text spacing then mirrors the card tiles. */
/* The frame lives on the wrapper and the image is nudged up *inside* it (clipped),
   so the watch actually rises within its container instead of the whole frame moving. */
.watch-cell { padding-bottom: 12px; }
.watch-cell .watch-thumb {
  width: 100%; aspect-ratio: 1 / 1; overflow: hidden; display: block;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2);
  transition: border-color 0.14s;
}
.watch-cell .watch-thumb img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  border: 0; border-radius: 0; transform: translateY(-12%); transition: transform 0.18s ease;
}
.watch-cell .watch-thumb .noimg { width: 100%; height: 100%; border: 0; border-radius: 0; }
.watch-cell:hover .watch-thumb { border-color: var(--gold-line); }
.watch-cell:hover .watch-thumb img { transform: translateY(-12%) scale(1.03); }
/* Three distinct levels so title / ref / price are easy to tell apart:
   ref = small muted eyebrow, title = bright + medium, price = gold. */
.watch-cell .wc-ref { margin-top: 11px; font-size: 10.5px; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; }
.watch-cell .wc-title { margin-top: 3px; font-size: 14.5px; font-weight: 500; color: var(--bright); line-height: 1.3; }
.watch-cell .wc-price { margin-top: 4px; font-size: 13px; color: var(--gold); }
/* Detail hero: clip wrapper so the upward nudge can't overflow the "Back" link. */
.watch-hero-box { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); }
.watch-hero-img { width: 100%; height: 100%; object-fit: contain; transform: translateY(-7%); display: block; }

/* Dealer RFQ feed — search/filters, then one column of bright, expandable rows.
   No entrance animation (it re-fired on every poll); polling only re-renders on an
   actual data change, so the feed never flickers. */
.rfq-filters { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.rfq-filters #rfqSearch { flex: 1 1 240px; min-width: 200px; }
.rfq-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rfq-chip { border: 1px solid var(--line-2); background: var(--surface); color: var(--muted); border-radius: 20px; padding: 6px 13px; font-size: 12.5px; cursor: pointer; transition: all 0.12s; }
.rfq-chip:hover { border-color: var(--gold-line); color: var(--text); }
.rfq-chip.on { background: var(--gold-soft); border-color: var(--gold-line); color: var(--gold); }

.rfq-item { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--line-2); border-radius: 10px; margin-bottom: 10px; cursor: pointer; transition: box-shadow 0.14s, border-color 0.14s; }
.rfq-item:hover { border-color: var(--gold-line); }
.rfq-item .rc-badge { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; padding: 3px 8px; border-radius: 5px; color: #0e0d0b; background: var(--t-grey); white-space: nowrap; }
/* Feed tile: image left · title/subtitle · price/time right */
.rfq-item .ri-head { display: flex; align-items: center; gap: 16px; padding: 15px 16px; }
.rfq-item .ri-img { width: 64px; height: 64px; flex: 0 0 auto; object-fit: contain; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); }
.rfq-item .ri-noimg { display: flex; align-items: center; justify-content: center; font-size: 26px; color: var(--faint); }
.rfq-item .ri-main { flex: 1; min-width: 0; }
.rfq-item .ri-titlerow { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; }
.rfq-item .ri-cat { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em; }
.rfq-item .ri-title { font-family: var(--serif); font-size: 17px; color: var(--bright); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rfq-item .ri-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rfq-item .ri-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: 0 0 auto; text-align: right; }
.rfq-item .ri-price { font-size: 15px; color: var(--bright); font-variant-numeric: tabular-nums; }
.rfq-item .ri-plabel { font-size: 10px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.06em; }
.rfq-item .ri-time { font-size: 12px; color: var(--muted); }
.rfq-item .rr-chev { color: var(--muted); font-size: 12px; transition: transform 0.15s; margin-top: 4px; }
.rfq-item.open .rr-chev { transform: rotate(180deg); }
.mini-soon { font-size: 9px; color: var(--faint); border: 1px solid var(--line-2); border-radius: 8px; padding: 1px 5px; margin-left: 4px; text-transform: uppercase; }
.rfq-item .rr-detail { display: none; padding: 6px 16px 16px; border-top: 1px solid var(--line); }
.rfq-item.open .rr-detail { display: block; }
.rd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 620px) { .rd-grid { grid-template-columns: 1fr; gap: 12px; } }
.rd-status-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--gold); margin: 8px 0 8px; }
.rd-status .linkish { display: inline-block; margin-top: 10px; }
.rd-row { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.rd-row span:first-child { color: var(--muted); }
.rd-row span:last-child { color: var(--text); text-align: right; }
.rd-act { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.rd-act button { padding: 8px 16px; font-size: 13px; }
/* Status accents: bright left bar + badge + subtle colour ring so rows pop */
.rfq-item.s-blue  { border-left-color: var(--t-blue);  box-shadow: 0 0 0 1px rgba(61,155,255,0.14); }
.rfq-item.s-green { border-left-color: var(--t-green); box-shadow: 0 0 0 1px rgba(46,194,110,0.14); }
.rfq-item.s-amber { border-left-color: var(--t-amber); box-shadow: 0 0 0 1px rgba(255,174,59,0.14); }
.rfq-item.s-red   { border-left-color: var(--t-red);   box-shadow: 0 0 0 1px rgba(255,91,91,0.14); }
.rfq-item.s-grey  { border-left-color: var(--t-grey); }
.rfq-item.s-blue  .rc-badge { background: var(--t-blue); }
.rfq-item.s-green .rc-badge { background: var(--t-green); }
.rfq-item.s-amber .rc-badge { background: var(--t-amber); }
.rfq-item.s-red   .rc-badge { background: var(--t-red); }

/* Save-to-Watchlist control on item pages */
.save-btn {
  position: absolute; top: 0; right: 0; z-index: 3;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--gold-line); background: var(--surface);
  color: var(--gold); font-size: 26px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.14s, border-color 0.14s, transform 0.12s;
}
.save-btn:hover { background: var(--gold-soft); transform: translateY(-1px); }
.save-btn.saved { background: var(--gold); color: var(--bg); border-color: var(--gold); }
.save-btn .sb-ic { display: block; line-height: 1; transform: translateY(-1px); }
.save-btn::after {
  content: attr(data-tip); position: absolute; top: 50%; right: calc(100% + 10px);
  transform: translateY(-50%); white-space: nowrap;
  background: var(--surface-2); color: var(--bright); border: 1px solid var(--line);
  padding: 6px 11px; border-radius: 8px; font-size: 12px; letter-spacing: 0.02em;
  opacity: 0; pointer-events: none; transition: opacity 0.14s;
}
.save-btn:hover::after { opacity: 1; }

/* Watchlist tiles (remove badge over a normal grid cell) */
.wl-cell { position: relative; }
.wl-cell > div[onclick] { cursor: pointer; }
.wl-remove {
  position: absolute; top: 6px; right: 6px; z-index: 3;
  width: 26px; height: 26px; border-radius: 50%; line-height: 1; font-size: 16px;
  border: 1px solid var(--line-2); background: rgba(14, 13, 11, 0.78); color: var(--muted);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.wl-remove:hover { border-color: var(--red); color: var(--red); }

/* Variant toggle (dial colour etc.) */
.vbtns { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.vbtn { padding: 7px 14px; border-radius: 20px; border: 1px solid var(--line-2); background: var(--surface); color: var(--muted); cursor: pointer; font-size: 12.5px; }
.vbtn:hover { border-color: var(--gold-line); color: var(--text); }
.vbtn.active { background: var(--gold-soft); border-color: var(--gold-line); color: var(--gold); }

/* Card analytics tiles */
.analytics-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; margin-top: 26px; }
.a-tile { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px; }
.a-tile .a-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.11em; color: var(--muted); margin-bottom: 12px; }
.a-tile .a-big { font-family: var(--serif); font-size: 26px; color: var(--bright); }
.a-tile.soon { border-style: dashed; }
.a-tile.soon .a-soon { font-size: 13px; color: var(--faint); }
.a-tile.soon .pill { margin-bottom: 8px; }
.vrow { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.vrow:last-child { border-bottom: 0; }
.vrow .vk { color: var(--muted); text-transform: capitalize; }
.minibars { display: flex; align-items: flex-end; gap: 10px; height: 76px; margin-top: 6px; }
.minibars .b { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.minibars .bar { width: 100%; background: var(--gold-soft); border-top: 2px solid var(--gold); border-radius: 3px 3px 0 0; min-height: 4px; }
.minibars .bl { font-size: 10px; color: var(--muted); }
.minibars .bv { font-size: 10px; color: var(--text); }
.linechart { width: 100%; height: 170px; display: block; }
.chart-x { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 6px; }

/* --- luxury motion: gentle fade/rise on render, hover lift, select fade-out --- */
@keyframes vfade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.card-grid, .card-detail, .rfq-tile, .browse-carousel, .analytics-grid, .cards, .subtypes,
.view-head, .empty { animation: vfade 0.32s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.card-cell { animation: vfade 0.36s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.card-cell img { transition: transform 0.18s ease, border-color 0.14s ease, box-shadow 0.18s ease; }
.card-cell:hover img { transform: translateY(-4px) scale(1.02); border-color: var(--gold-line); box-shadow: 0 14px 30px -18px rgba(0,0,0,0.8); }
#cardResults.leaving { opacity: 0; transform: scale(0.985); transition: opacity 0.19s ease, transform 0.19s ease; }
@media (prefers-reduced-motion: reduce) {
  .card-grid, .card-detail, .rfq-tile, .browse-carousel, .analytics-grid, .cards, .subtypes,
  .view-head, .empty, .card-cell { animation: none; }
}

/* Big RFQ submission tile */
.rfq-tile {
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  padding: 34px 38px; max-width: 720px; margin: 0 auto;
  box-shadow: 0 1px 0 rgba(255,255,255,0.02), 0 24px 60px -40px rgba(0,0,0,0.7);
}
.rfq-tile .rfq-h { font-family: var(--serif); font-size: 26px; color: var(--bright); margin: 0 0 4px; }
.rfq-tile .rfq-sub { color: var(--muted); font-size: 13.5px; margin: 0 0 24px; }

.idbtn {
  display: inline-flex; align-items: center; gap: 9px;
  background: transparent; color: var(--text); border: 1px solid var(--line-2);
  border-radius: 22px; padding: 7px 9px 7px 14px; font-weight: 400;
}
.idbtn:hover { filter: none; border-color: var(--gold-line); }
.idbtn .avatar {
  width: 26px; height: 26px; border-radius: 50%; background: var(--gold-soft);
  color: var(--gold); display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; text-transform: uppercase;
}

.wrap { width: 100%; max-width: 1040px; margin: 0 auto; padding: 34px 26px 80px; }

.view-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 6px; }
.view-head h1 { font-family: var(--serif); font-size: 30px; color: var(--bright); margin: 0; letter-spacing: 0.01em; }
.view-sub { color: var(--muted); font-size: 13.5px; margin: 0 0 26px; max-width: 680px; }

.tabs { display: flex; gap: 28px; margin-bottom: 30px; border-bottom: 1px solid var(--line); }
.tabs a {
  padding: 0 1px 14px; font-size: 13px; color: var(--muted); letter-spacing: 0.02em;
  border-bottom: 1.5px solid transparent; margin-bottom: -1px; cursor: pointer;
}
.tabs a:hover { color: var(--text); }
.tabs a.active { color: var(--bright); border-bottom-color: var(--gold); }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 16px; }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 20px; cursor: pointer; transition: border-color 0.14s, transform 0.14s;
}
.card:hover { border-color: var(--gold-line); transform: translateY(-1px); }
.card.flat, .card.flat:hover { cursor: default; transform: none; border-color: var(--line); }
.card .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.card .item { color: var(--bright); font-size: 15.5px; font-weight: 500; }
.card .meta { color: var(--muted); font-size: 12px; margin-top: 3px; }
.card .big { font-family: var(--serif); font-size: 30px; color: var(--text); letter-spacing: 0.01em; }
.card .row2 { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 14px; }

.pill {
  display: inline-block; font-size: 10.5px; padding: 3px 11px; border-radius: 20px;
  text-transform: uppercase; letter-spacing: 0.09em; border: 1px solid var(--line-2); color: var(--muted);
}
.pill.open, .pill.live { color: var(--green); border-color: rgba(138, 174, 144, 0.4); }
.pill.matched { color: var(--gold); border-color: var(--gold-line); }
.pill.warn { color: var(--red); border-color: rgba(207, 141, 128, 0.4); }

.empty {
  border: 1px dashed var(--line-2); border-radius: 12px; padding: 52px 24px;
  text-align: center; color: var(--muted);
}
.empty .hint { font-size: 13px; margin-top: 8px; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 800px) { .grid2 { grid-template-columns: 1fr; } }
.field { margin-bottom: 16px; }
.frow { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.out { margin-top: 14px; font-size: 13px; white-space: pre-wrap; color: var(--muted); }

.anon-note {
  display: flex; gap: 10px; align-items: center; font-size: 12.5px; color: var(--muted);
  background: var(--gold-soft); border: 1px solid var(--gold-line); border-radius: 8px;
  padding: 12px 15px; margin-bottom: 22px;
}
.anon-note .k { color: var(--gold); white-space: nowrap; }

.book .best td { background: rgba(138, 174, 144, 0.06); }
.savings { color: var(--green); font-weight: 600; }
.countdown.soon { color: var(--red); }
.linkish { color: var(--gold); cursor: pointer; font-size: 13px; }
.linkish:hover { color: var(--bright); }
.backlink { color: var(--muted); cursor: pointer; font-size: 13px; display: inline-block; margin-bottom: 18px; }
.backlink:hover { color: var(--text); }
.mono-id { font-family: var(--mono); font-size: 12px; color: var(--faint); }

/* settlement stepper */
.stepper { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 20px 0; }
.step { display: flex; align-items: center; gap: 9px; padding: 6px 0; }
.step .dot {
  width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-2);
  display: inline-flex; align-items: center; justify-content: center; font-size: 10px;
  color: var(--muted); flex: 0 0 auto;
}
.step.done .dot { background: var(--green); border-color: var(--green); color: #0f0e0b; }
.step.current .dot { border-color: var(--gold); color: var(--gold); }
.step.fail .dot { background: var(--red); border-color: var(--red); color: #0f0e0b; }
.step .lbl { font-size: 11.5px; color: var(--muted); }
.step.done .lbl, .step.current .lbl { color: var(--text); }
.stepper .bar { width: 26px; height: 1.5px; background: var(--line-2); flex: 0 0 auto; }
.devbar { font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); margin-top: 18px; padding-top: 16px; }

/* "where the trade is right now" banner above the stepper */
.settle-now { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; }
.settle-now .settle-phase { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.settle-now .settle-detail { font-size: 13px; color: var(--text); }
/* status history list */
.hist { display: flex; flex-direction: column; gap: 6px; }
.hist-row { display: flex; gap: 12px; align-items: baseline; font-size: 12px; }
.hist-row .hist-when { color: var(--muted); flex: 0 0 auto; min-width: 150px; }
.hist-row .hist-what { color: var(--text); }

/* drawer */
.drawer-bg { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 40; display: none; }
.drawer-bg.show { display: block; }
.drawer {
  position: fixed; top: 0; right: 0; height: 100%; width: min(440px, 94vw);
  background: var(--surface); border-left: 1px solid var(--line); z-index: 41;
  transform: translateX(100%); transition: transform 0.18s ease; overflow-y: auto;
}
.drawer.show { transform: translateX(0); }
.drawer .dh { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.drawer .dh strong { font-family: var(--serif); font-size: 18px; font-weight: 500; }
.drawer .dh .x { cursor: pointer; color: var(--muted); font-size: 22px; line-height: 1; }
.drawer .db { padding: 22px; }
.drawer h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin: 0 0 12px; font-weight: 500; }
.drawer .sect { margin-bottom: 30px; }
/* Account drawer: details header, interests editor, settings/admin links */
.acct-head .acct-name { font-family: var(--serif); font-size: 22px; color: var(--bright); line-height: 1.1; }
.acct-head .acct-email { margin-top: 3px; }
.acct-head .acct-role { margin-top: 10px; display: inline-block; font-size: 12px; color: var(--gold); border: 1px solid var(--gold-line); background: var(--gold-soft); border-radius: 20px; padding: 4px 12px; }
.int-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.pill-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chips.readonly .chip { cursor: default; }

/* "Dealers only" badge on the RFQs page title */
.dealers-only {
  font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--gold); border: 1px solid var(--gold-line);
  background: var(--gold-soft); border-radius: 20px; padding: 4px 11px; vertical-align: middle;
  margin-left: 12px; position: relative; top: -4px;
}

/* Submit-a-request wizard */
.wiz-h { font-family: var(--serif); font-size: 22px; color: var(--bright); margin: 4px 0 18px; font-weight: 500; }
.wiz-crumb { font-size: 12px; color: var(--muted); letter-spacing: 0.04em; margin-bottom: 14px; }
.wiz-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.wiz-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 24px 22px; cursor: pointer; transition: border-color 0.14s, transform 0.14s; }
.wiz-card:hover { border-color: var(--gold-line); transform: translateY(-2px); }
.wiz-card .wc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wiz-card .wc-chev { color: var(--gold); font-size: 14px; }
.wiz-card h3 { font-family: var(--serif); font-size: 20px; color: var(--bright); margin: 0; font-weight: 500; text-transform: none; letter-spacing: 0; }
.wiz-card .meta { margin-top: 6px; }
.wiz-card.soon { opacity: 0.6; cursor: default; }
.wiz-card.soon:hover { border-color: var(--line); transform: none; }
.wiz-card.soon .pill { margin-top: 8px; display: inline-block; }
.wiz-alt { margin-top: 20px; }
.wiz-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 24px; }
.wiz-selected { display: flex; align-items: center; gap: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 18px; }
.wiz-selected img { width: 56px; height: 56px; object-fit: contain; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); }
.wiz-selected .ws-title { font-family: var(--serif); font-size: 18px; color: var(--bright); }
/* Step 4: ticket on the left, market-price guide on the right */
/* Selected item spans the full width on top; form + guide sit side by side below */
.wiz-hero { display: flex; align-items: center; gap: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; margin-bottom: 18px; }
.wiz-hero img { width: 84px; height: 84px; object-fit: contain; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); flex: 0 0 auto; }
.wiz-hero .wh-info { flex: 1; min-width: 0; }
.wiz-hero .wh-title { font-family: var(--serif); font-size: 22px; color: var(--bright); line-height: 1.2; }
.wiz-hero .wh-detail { color: var(--muted); font-size: 13.5px; margin-top: 4px; }
.wiz-hero .wh-browse { flex: 0 0 auto; align-self: center; border: 1px solid var(--gold-line); color: var(--gold); background: var(--gold-soft); border-radius: 22px; padding: 9px 16px; font-size: 13px; white-space: nowrap; }
.wiz-hero .wh-browse:hover { background: rgba(194,160,90,0.2); text-decoration: none; }
.buy-grid2 { display: grid; grid-template-columns: 1fr 280px; gap: 24px; align-items: start; }
@media (max-width: 720px) { .buy-grid2 { grid-template-columns: 1fr; } }
.buy-guide { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.buy-guide > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; }
.buy-guide > summary::-webkit-details-marker { display: none; }
.buy-guide .bg-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--gold); }
.buy-guide .bg-head { font-size: 15px; color: var(--bright); font-variant-numeric: tabular-nums; }
.buy-guide[open] > summary { border-bottom: 1px solid var(--line); }
.buy-guide .bg-body { padding: 6px 16px 14px; }
.buy-guide .bg-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.buy-guide .bg-row span:first-child { color: var(--muted); }
.buy-guide .bg-row span:last-child { color: var(--bright); }
.buy-guide .bg-chart { margin-top: 12px; }
.buy-guide .bg-note { margin-top: 12px; font-size: 11.5px; color: var(--faint); line-height: 1.5; }
/* Currency-styled top-price input */
.price-input { display: flex; align-items: center; gap: 0; }
.price-input .pi-cur { padding: 0 12px; color: var(--muted); border: 1px solid var(--line-2); border-right: 0; border-radius: 10px 0 0 10px; align-self: stretch; display: flex; align-items: center; background: var(--surface-2); }
.price-input input { border-radius: 0 10px 10px 0; font-variant-numeric: tabular-nums; }
.check-inline { display: inline-flex; align-items: center; gap: 9px; color: var(--text); font-size: 13.5px; }
.check-inline input { width: auto; }

/* RFQ header summary tile (buyer + dealer detail pages) */
.rfq-summary { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; margin-bottom: 18px; }
.rfq-summary .rs-top { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.rfq-summary h1 { font-family: var(--serif); font-size: 26px; font-weight: 500; color: var(--bright); margin: 0; line-height: 1.15; }
.rfq-summary .rfq-ref { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--muted); border: 1px solid var(--line-2); border-radius: 6px; padding: 3px 8px; white-space: nowrap; }
.rfq-summary .rs-detail { color: var(--muted); font-size: 13.5px; margin-top: 8px; }
.rfq-summary .rs-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.rfq-chip2 { font-size: 12px; color: var(--muted); border: 1px solid var(--line-2); border-radius: 20px; padding: 4px 12px; }
.rfq-chip2.gold { color: var(--gold); border-color: var(--gold-line); background: var(--gold-soft); }
.rfq-chip2.rs-browse { color: var(--gold); border-color: var(--gold-line); cursor: pointer; }
.rfq-chip2.rs-browse:hover { background: var(--gold-soft); text-decoration: none; }

/* Accept buttons in the quote book */
.btn-accept-best { background: var(--green); color: #0f0e0b; border-color: var(--green); font-weight: 600; padding: 6px 16px; font-size: 12px; }
.btn-accept-best:hover { filter: brightness(1.08); }

/* Deliberate confirmation modal */
.modal-bg { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.62); display: flex; align-items: center; justify-content: center; padding: 24px; animation: vfade 0.18s ease both; }
.modal { background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px; padding: 28px 28px 24px; max-width: 420px; width: 100%; text-align: center; }
.modal.danger { border-color: rgba(255,91,91,0.5); box-shadow: 0 0 0 1px rgba(255,91,91,0.2), 0 24px 60px -30px rgba(255,91,91,0.5); }
.modal-bang { width: 46px; height: 46px; border-radius: 50%; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 700; color: var(--t-red); border: 2px solid var(--t-red); }
.modal-title { font-family: var(--serif); font-size: 23px; color: var(--bright); margin-bottom: 12px; }
.modal-line { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0 0 8px; }
.modal-prompt { color: var(--text); font-size: 16px; margin: 18px 0 10px; }
.modal-prompt b { color: var(--bright); font-family: var(--mono); font-size: 17px; letter-spacing: 0.04em; }
.modal-input { text-align: center; letter-spacing: 0.04em; }
.modal-actions { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }
.modal-actions button { min-width: 130px; }
.modal-go:disabled { opacity: 0.4; cursor: not-allowed; }
/* Congratulations modal (post-accept, before settlement) */
.modal.congrats { border-color: var(--gold-line); box-shadow: 0 0 0 1px rgba(194,160,90,0.25), 0 24px 60px -28px rgba(194,160,90,0.5); }
.modal.congrats .congrats-k { font-size: 11px; text-transform: uppercase; letter-spacing: 0.24em; color: var(--gold); margin-bottom: 14px; }
.modal.congrats .congrats-img { width: 120px; height: 120px; object-fit: contain; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); margin: 0 auto 16px; display: block; }
.modal.congrats .congrats-price { font-family: var(--serif); font-size: 30px; color: var(--gold); margin: 8px 0; }
.drawer-links { display: flex; flex-direction: column; gap: 4px; }
.drawer-link { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 10px; color: var(--text); font-size: 14px; border: 1px solid var(--line); transition: border-color 0.14s, background 0.14s; }
.drawer-link:hover { border-color: var(--gold-line); background: var(--gold-soft); text-decoration: none; color: var(--bright); }
.drawer-link .dl-ic { color: var(--gold); font-size: 15px; width: 18px; text-align: center; }
.settings-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 24px 26px; max-width: 460px; }
.settings-card h3 { font-family: var(--serif); font-size: 18px; color: var(--bright); margin: 0 0 4px; font-weight: 500; }
.addr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
@media (max-width: 760px) { .addr-grid { grid-template-columns: 1fr; gap: 18px; } }
.addr-grid .rfq-col-h { margin-bottom: 14px; }
.addr-card { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; margin-bottom: 10px; }
.addr-card .addr-label { color: var(--bright); font-weight: 600; font-size: 14px; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.addr-card .addr-name { color: var(--text); font-size: 13.5px; font-weight: 500; margin-bottom: 4px; }
.addr-card .addr-line { color: var(--muted); font-size: 13px; line-height: 1.55; }
.addr-rm { flex: 0 0 auto; align-self: flex-start; width: 34px; height: 34px; border: 1px solid var(--line-2); border-radius: 8px; cursor: pointer; transition: border-color .15s, background-color .15s; background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: 18px 18px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23e9e4d8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3Cpath d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E"); }
.addr-rm:hover { border-color: var(--red); background-color: color-mix(in srgb, var(--red) 8%, transparent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23cf8d80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3Cpath d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E"); }

/* Mobile gate — block the web app on phones; point to the app instead */
.mobile-gate { position: fixed; inset: 0; z-index: 99999; background: var(--bg); display: flex; align-items: center; justify-content: center; padding: 32px 26px; text-align: center; }
.mobile-gate .mg-inner { max-width: 380px; }
.mobile-gate .mg-mark { font-family: var(--serif); font-size: 52px; letter-spacing: 0.22em; color: var(--bright); padding-left: 0.22em; }
.mobile-gate .mg-rule { width: 44px; height: 1px; background: var(--gold); margin: 20px auto 24px; }
.mobile-gate .mg-tag { font-family: var(--serif); font-size: 22px; color: var(--bright); margin: 0 0 14px; line-height: 1.3; }
.mobile-gate .mg-sub { color: var(--muted); font-size: 14px; line-height: 1.65; margin: 0 0 28px; }
.mobile-gate .mg-btn { display: inline-block; background: var(--gold); color: var(--bg); font-weight: 600; font-size: 14px; padding: 13px 26px; border-radius: 26px; }
.mobile-gate .mg-btn:hover { text-decoration: none; filter: brightness(1.05); }
.mobile-gate .mg-foot { color: var(--faint); font-size: 12px; margin-top: 22px; }

.checks { display: flex; gap: 16px; flex-wrap: wrap; }
.checks label { display: inline-flex; gap: 7px; align-items: center; margin: 0; color: var(--text); font-size: 13.5px; }
.checks input { width: auto; }

/* ============================ entry screens ============================ */
.screen { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 22px; }
.screen .mark { font-family: var(--serif); font-size: 40px; letter-spacing: 0.3em; color: var(--bright); margin-bottom: 4px; padding-left: 0.3em; }
.screen .rule { width: 40px; height: 1px; background: var(--gold); margin: 18px 0 26px; }

.auth-card { width: 100%; max-width: 360px; text-align: center; }
.auth-card .lead { font-family: var(--serif); font-size: 22px; color: var(--text); margin: 0 0 24px; }
.auth-card .divider { display: flex; align-items: center; gap: 12px; color: var(--faint); font-size: 11px; letter-spacing: 0.1em; margin: 18px 0; text-transform: uppercase; }
.auth-card .divider::before, .auth-card .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-card .stack > * + * { margin-top: 12px; }
.auth-foot { margin-top: 30px; color: var(--faint); font-size: 12px; letter-spacing: 0.04em; }
.auth-foot .k { color: var(--gold); }
.auth-err { color: var(--red); font-size: 13px; min-height: 18px; margin-top: 12px; }
.dev-access { margin-top: 26px; }
.dev-access .linkish { font-size: 12px; color: var(--faint); }

/* onboarding */
.onb { width: 100%; max-width: 640px; }
.onb .kicker { font-size: 11px; text-transform: uppercase; letter-spacing: 0.22em; color: var(--gold); text-align: center; margin-bottom: 12px; }
.onb h1 { font-family: var(--serif); font-size: 34px; color: var(--bright); text-align: center; margin: 0 0 10px; font-weight: 500; }
.onb .sub { color: var(--muted); text-align: center; margin: 0 auto 36px; max-width: 460px; }
.onb .steps { display: flex; justify-content: center; gap: 8px; margin-bottom: 34px; }
.onb .steps .s { width: 26px; height: 2px; background: var(--line-2); border-radius: 2px; }
.onb .steps .s.on { background: var(--gold); }

.choice-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 620px) { .choice-cards { grid-template-columns: 1fr; } }
.choice {
  border: 1px solid var(--line); border-radius: 14px; padding: 28px 24px; cursor: pointer;
  background: var(--surface); transition: border-color 0.14s, transform 0.14s; text-align: left;
}
.choice:hover, .choice.sel { border-color: var(--gold-line); transform: translateY(-2px); }
.choice.sel { background: var(--gold-soft); }
.choice .ic { font-family: var(--serif); font-size: 26px; color: var(--gold); margin-bottom: 14px; }
.choice h3 { font-family: var(--serif); font-size: 22px; color: var(--bright); margin: 0 0 8px; text-transform: none; letter-spacing: 0; font-weight: 500; }
.choice p { color: var(--muted); font-size: 13.5px; margin: 0; line-height: 1.55; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  border: 1px solid var(--line-2); border-radius: 22px; padding: 8px 16px; cursor: pointer;
  color: var(--muted); font-size: 13px; user-select: none; transition: all 0.12s;
}
.chip:hover { border-color: var(--gold-line); color: var(--text); }
.chip.on { background: var(--gold-soft); border-color: var(--gold-line); color: var(--gold); }

/* Dealer application: the value-proposition panel + a small section label */
.dealer-pitch { background: var(--gold-soft); border: 1px solid var(--gold-line); border-radius: 14px; padding: 20px 22px; margin: 0 0 24px; text-align: left; }
.dealer-pitch .dp-title { font-family: var(--serif); font-size: 18px; color: var(--gold); margin-bottom: 14px; }
.dealer-pitch .dp-item { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.dealer-pitch .dp-item:last-child { margin-bottom: 0; }
.dealer-pitch .dp-item b { color: var(--bright); font-size: 13.5px; font-weight: 600; }
.dealer-pitch .dp-item span { color: var(--muted); font-size: 13px; line-height: 1.55; }
.dealer-sub { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--gold); margin: 18px 0 12px; }

.onb-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 34px; }
.onb-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 30px; }

/* ==================== PRE-LOGIN INTRO / LANDING ==================== */
.intro {
  position: fixed; inset: 0; z-index: 50; background: var(--bg);
  overflow-y: auto; overflow-x: hidden;
  scroll-snap-type: y mandatory; scroll-behavior: smooth;
}
/* soft gold aura, fixed while sections scroll under it */
.intro::before {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(120% 85% at 50% -8%, var(--gold-soft), transparent 58%);
}
.intro-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; padding: 20px 34px;
}
.intro-brand { font-family: var(--serif); font-size: 20px; letter-spacing: 0.24em; color: var(--bright); padding-left: 0.24em; }
.intro-auth { display: flex; align-items: center; gap: 12px; }
.intro-login { background: transparent; color: var(--muted); border: 0; padding: 8px 6px; font-family: var(--sans); font-size: 14px; cursor: pointer; transition: color 0.15s; }
.intro-login:hover { color: var(--bright); }
.intro-su { background: var(--gold); color: #17140d; border: 0; border-radius: 22px; padding: 9px 20px; font-family: var(--sans); font-weight: 600; font-size: 14px; cursor: pointer; transition: filter 0.15s, transform 0.15s; }
.intro-su:hover { filter: brightness(1.08); transform: translateY(-1px); }

.intro-dots { position: fixed; right: 26px; top: 50%; transform: translateY(-50%); z-index: 60; display: flex; flex-direction: column; gap: 14px; }
.intro-dot { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 1px solid var(--gold-line); background: transparent; cursor: pointer; transition: background 0.3s, border-color 0.3s, transform 0.3s; }
.intro-dot:hover { border-color: var(--gold); }
.intro-dot.on { background: var(--gold); border-color: var(--gold); transform: scale(1.3); }

.intro-sec { position: relative; min-height: 100vh; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 110px 26px 92px; }
.intro-inner { position: relative; z-index: 2; max-width: 720px; }
.intro-num { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -58%); z-index: 1; pointer-events: none; user-select: none; font-family: var(--serif); font-weight: 600; line-height: 1; color: var(--gold); font-size: clamp(210px, 34vw, 400px); opacity: 0; transition: opacity 1.1s ease; }
.intro-mark { font-family: var(--serif); font-size: clamp(52px, 11vw, 104px); letter-spacing: 0.28em; color: var(--bright); padding-left: 0.28em; line-height: 1.02; }
.intro-rule { width: 52px; height: 1px; background: var(--gold); margin: 22px auto 26px; }
.intro-kicker { font-family: var(--sans); font-size: 12px; text-transform: uppercase; letter-spacing: 0.28em; color: var(--gold); margin-bottom: 20px; }
.intro-h { font-family: var(--serif); font-weight: 500; color: var(--bright); line-height: 1.08; margin: 0; font-size: clamp(32px, 5.4vw, 58px); letter-spacing: 0.005em; }
.intro-lead { font-family: var(--sans); font-size: clamp(15px, 2.2vw, 19px); color: var(--muted); margin: 22px auto 0; max-width: 540px; line-height: 1.6; }
.intro-p { font-family: var(--sans); font-size: clamp(15px, 2.1vw, 18px); color: var(--text); margin: 26px auto 0; max-width: 620px; line-height: 1.68; }

.intro-cue { position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); background: transparent; border: 0; cursor: pointer; font-family: var(--sans); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); animation: introCue 1.9s ease-in-out infinite; }
@keyframes introCue { 0%, 100% { opacity: 0.5; transform: translate(-50%, 0); } 50% { opacity: 1; transform: translate(-50%, 5px); } }

.intro-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }
.intro-btn { border: 0; border-radius: 26px; padding: 14px 30px; font-family: var(--sans); font-weight: 600; font-size: 15px; cursor: pointer; transition: filter 0.15s, transform 0.15s, border-color 0.15s, color 0.15s; }
.intro-btn.primary { background: var(--gold); color: #17140d; }
.intro-btn.primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.intro-btn.ghost { background: transparent; color: var(--bright); border: 1px solid var(--gold-line); }
.intro-btn.ghost:hover { border-color: var(--gold); color: var(--gold); }
.intro-anon { margin-top: 30px; font-family: var(--sans); font-size: 12.5px; color: var(--faint); }
.intro-anon .k { color: var(--gold); margin-right: 6px; }

/* reveal on enter: staggered fade + rise */
.intro-sec .intro-mark, .intro-sec .intro-rule, .intro-sec .intro-kicker,
.intro-sec .intro-h, .intro-sec .intro-lead, .intro-sec .intro-p,
.intro-sec .intro-cta, .intro-sec .intro-anon {
  opacity: 0; transform: translateY(26px);
  transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.intro-sec.in .intro-mark, .intro-sec.in .intro-rule, .intro-sec.in .intro-kicker,
.intro-sec.in .intro-h, .intro-sec.in .intro-lead, .intro-sec.in .intro-p,
.intro-sec.in .intro-cta, .intro-sec.in .intro-anon { opacity: 1; transform: none; }
.intro-sec.in .intro-num { opacity: 0.05; }
.intro-sec.in .intro-rule { transition-delay: 0.08s; }
.intro-sec.in .intro-h { transition-delay: 0.16s; }
.intro-sec.in .intro-lead, .intro-sec.in .intro-p { transition-delay: 0.28s; }
.intro-sec.in .intro-cta { transition-delay: 0.4s; }
.intro-sec.in .intro-anon { transition-delay: 0.52s; }

.auth-back { position: fixed; top: 22px; left: 30px; z-index: 5; color: var(--muted); font-size: 13px; cursor: pointer; transition: color 0.15s; }
.auth-back:hover { color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  .intro { scroll-behavior: auto; }
  .intro-sec .intro-mark, .intro-sec .intro-rule, .intro-sec .intro-kicker,
  .intro-sec .intro-h, .intro-sec .intro-lead, .intro-sec .intro-p,
  .intro-sec .intro-cta, .intro-sec .intro-anon { opacity: 1; transform: none; transition: none; }
  .intro-num { opacity: 0.05; }
  .intro-cue { animation: none; }
  .intro-sec .intro-prop, .intro-sec .intro-cats, .intro-sec .intro-split-prop { opacity: 1; transform: none; transition: none; }
}

/* ---- per-section props (icons, cards, RFQ tile, timeline) ---- */
.intro-kicker { display: inline-flex; align-items: center; gap: 9px; }
.ik-ico { display: inline-flex; color: var(--gold); }
.intro-cats { margin-top: 22px; display: flex; gap: 11px; justify-content: center; align-items: center; font-family: var(--sans); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
.intro-cats span { color: var(--gold-line); }

.intro-prop { margin-top: 42px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.intro-prop:empty { display: none; }

/* request spec card */
.intro-reqcard { width: min(440px, 90vw); text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; box-shadow: 0 22px 55px rgba(0, 0, 0, 0.4); }
.irc-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.irc-eyebrow { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted); }
.irc-tag { font-size: 11px; color: var(--gold); }
.irc-item { display: flex; align-items: center; gap: 14px; margin-bottom: 15px; }
.irc-item .ri-img { width: 56px; height: 56px; object-fit: contain; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.irc-title { font-family: var(--serif); font-size: 19px; color: var(--bright); }
.irc-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.irc-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.irc-chips span { font-size: 11.5px; color: var(--text); border: 1px solid var(--line-2); border-radius: 20px; padding: 4px 11px; }
.irc-price { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line); padding-top: 14px; }
.irc-plabel { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.irc-pval { font-family: var(--serif); font-size: 25px; color: var(--gold); font-variant-numeric: tabular-nums; }
.irc-note { font-size: 11.5px; color: var(--faint); margin-top: 9px; }

/* live dealer RFQ tile (reuses .rfq-item) + collectible toggle */
.intro-rfq { width: min(480px, 92vw); text-align: left; cursor: default; box-shadow: 0 22px 55px rgba(0, 0, 0, 0.4); }
.intro-rfq .ri-noimg { color: var(--gold); }
.intro-rfq-act { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }
.irq-quote { font-size: 12.5px; color: var(--gold); border: 1px solid var(--gold-line); border-radius: 8px; padding: 6px 15px; }
.irq-ghost { font-size: 12.5px; color: var(--muted); border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 15px; }
.intro-toggle { display: flex; gap: 8px; justify-content: center; }
.irt-btn { font-family: var(--sans); font-size: 12.5px; color: var(--muted); background: transparent; border: 1px solid var(--line-2); border-radius: 20px; padding: 7px 16px; cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; }
.irt-btn:hover { border-color: var(--gold-line); color: var(--text); }
.irt-btn.on { background: var(--gold-soft); border-color: var(--gold-line); color: var(--gold); }

/* settlement timeline */
.intro-flow { display: flex; align-items: flex-start; justify-content: center; flex-wrap: nowrap; }
.if-step { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.if-node { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--gold-line); background: var(--gold-soft); color: var(--gold); display: flex; align-items: center; justify-content: center; font-size: 14px; }
.if-step.last .if-node { background: var(--gold); color: #17140d; border-color: var(--gold); }
.if-label { font-size: 12px; color: var(--muted); white-space: nowrap; }
.if-step.last .if-label { color: var(--bright); }
.if-line { width: 46px; height: 1px; background: var(--gold-line); margin: 17px 6px 0; }

/* props reveal — scale up just after the text, a different motion than the copy */
.intro-sec .intro-prop, .intro-sec .intro-cats { opacity: 0; transform: translateY(30px) scale(0.98); transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); }
.intro-sec.in .intro-prop { opacity: 1; transform: none; transition-delay: 0.34s; }
.intro-sec.in .intro-cats { opacity: 1; transform: none; transition-delay: 0.44s; }

/* section-02 split layout + fuller tile with spec rows */
.intro-rfq-detail { padding: 6px 16px 10px; border-top: 1px solid var(--line); }
.ird-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; font-size: 12.5px; }
.ird-row + .ird-row { border-top: 1px solid rgba(255, 255, 255, 0.035); }
.ird-row span:first-child { color: var(--muted); }
.ird-row span:last-child { color: var(--text); }

.intro-sec-split { text-align: left; }
.intro-split { display: flex; align-items: center; gap: 56px; width: 100%; max-width: 1000px; position: relative; z-index: 2; }
.intro-split-text { flex: 1 1 0; min-width: 0; }
.intro-split-text .intro-h { font-size: clamp(28px, 3.6vw, 44px); }
.intro-split-text .intro-p { margin: 22px 0 0; max-width: 440px; }
.intro-split-prop { flex: 0 0 440px; display: flex; flex-direction: column; gap: 16px; }
.intro-split-prop .intro-rfq { width: 100%; }
.intro-split-prop .intro-toggle { justify-content: flex-start; }
.intro-sec .intro-split-prop { opacity: 0; transform: translateX(34px); transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); }
.intro-sec.in .intro-split-prop { opacity: 1; transform: none; transition-delay: 0.3s; }

@media (max-width: 880px) {
  .intro-split { flex-direction: column; gap: 30px; text-align: center; }
  .intro-split-prop { flex-basis: auto; width: min(440px, 92vw); }
  .intro-split-text .intro-p { margin: 22px auto 0; }
  .intro-split-prop .intro-toggle { justify-content: center; }
}

/* App Store CTA (mobile) */
.intro-appbtn { display: inline-flex; align-items: center; gap: 12px; margin-top: 32px; padding: 12px 22px; background: var(--bright); color: #0e0d0b; border-radius: 13px; text-decoration: none; transition: filter 0.15s, transform 0.15s; }
.intro-appbtn:hover { filter: brightness(0.95); transform: translateY(-1px); color: #0e0d0b; }
.intro-appbtn svg { width: 25px; height: 25px; }
.intro-appbtn .iab-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; font-family: var(--sans); font-weight: 600; font-size: 18px; }
.intro-appbtn .iab-txt small { font-weight: 400; font-size: 10px; opacity: 0.72; }

/* phones: keep the intro story, tuned for small screens (no full web app) */
@media (max-width: 640px) {
  .intro { scroll-snap-type: none; }
  .intro-dots { display: none; }
  .intro-bar { padding: 15px 18px; }
  .intro-brand { font-size: 17px; }
  .intro-sec { padding: 86px 20px 72px; }
  .intro-mark { font-size: clamp(42px, 17vw, 76px); letter-spacing: 0.22em; padding-left: 0.22em; }
  .intro-num { font-size: clamp(150px, 54vw, 280px); }
  .intro-cats { font-size: 10.5px; gap: 8px; letter-spacing: 0.12em; }
  .intro-prop { margin-top: 30px; }
  .intro-cue { font-size: 11px; }
  .intro-flow { flex-direction: column; align-items: flex-start; }
  .if-step { flex-direction: row; gap: 12px; align-items: center; }
  .if-line { width: 1px; height: 22px; margin: 3px 0 3px 16px; }
}