/* ===========================================================================
   GenkiCars, matchmaking pages (exporters, countries, and later requests)
   Light and minimal, but not flat: white surfaces float on a soft grey
   page with layered shadows, one green accent.
   Built on the site tokens in site.css.
   Logical properties throughout (margin-inline, padding-inline-start, ...),
   so the same sheet mirrors correctly under dir="rtl" when Arabic goes live.
   =========================================================================== */

/* The page is a soft grey so white surfaces read as raised. */
body.page-match { background: #fff; }
:root { --surface-line: rgba(16,20,24,.06); }

.m-page { padding-block: clamp(20px, 4vw, 48px) clamp(40px, 6vw, 72px); }

/* ---- headings ---------------------------------------------------------- */
.m-head { margin-block-end: clamp(20px, 3vw, 32px); }
.m-head h1 {
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem);
  letter-spacing: -.025em;
  margin-block-end: .35em;
}
.m-lead { color: var(--ink-2); font-size: clamp(1rem, .95rem + .3vw, 1.12rem); margin: 0; max-width: 60ch; }
.m-sub  { color: var(--ink-3); margin: 0 0 .4rem; }
.m-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; color: var(--ink-3); font-size: .92rem; margin: .4rem 0 0; }
.m-h3   { font-size: 1rem; font-weight: 700; letter-spacing: -.01em; margin: 0 0 .7rem; }

.m-back {
  display: inline-flex; align-items: center; gap: .35rem;
  color: var(--ink-3); font-size: .9rem; margin-block-end: 1rem;
}
.m-back::before { content: "\2190"; }
[dir="rtl"] .m-back::before { content: "\2192"; }
.m-back:hover { color: var(--ink); text-decoration: none; }

/* ---- filter chips ------------------------------------------------------ */
.m-filter {
  display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none;
  margin-block-end: 1.25rem; padding-block: 4px 10px; padding-inline: 2px;
  -webkit-overflow-scrolling: touch;
}
.m-filter::-webkit-scrollbar { display: none; }
.m-chip {
  flex: 0 0 auto;
  padding: .5rem .95rem; min-height: 40px;
  display: inline-flex; align-items: center;
  background: var(--bg); border: 1px solid var(--surface-line); border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
  color: var(--ink-2); font-size: .9rem; font-weight: 500; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.m-chip:hover { text-decoration: none; color: var(--ink); transform: translateY(-1px); box-shadow: var(--shadow); }
.m-chip.is-on { background: var(--logo-ink); border-color: var(--logo-ink); color: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.22); }

/* ---- layout ------------------------------------------------------------ */
.m-split { display: grid; gap: clamp(20px, 3vw, 40px); }
@media (min-width: 960px) { .m-split { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } }
.m-side { display: grid; gap: 16px; }
@media (min-width: 960px) { .m-side { position: sticky; top: calc(var(--header-h) + 16px); } }

.m-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.m-grid--2 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.m-count { color: var(--ink-3); font-size: .9rem; margin: 0 0 .75rem; }
.m-list { transition: opacity .18s ease; }
.m-list.is-loading { opacity: .45; }

/* ---- cards: lift + soft shadow on hover, never a coloured bar ----------- */
.m-card {
  display: block;
  background: var(--bg);
  border: 1px solid var(--surface-line);
  border-radius: var(--r-lg);
  padding: 20px;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
a.m-card { transition: transform .2s ease, box-shadow .2s ease; }
a.m-card:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.m-box { background: var(--bg); }

.m-xcard, .m-ccard { display: flex; flex-direction: column; gap: .45rem; }
.m-xcard__name, .m-ccard__name { font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; }
.m-xcard__meta { color: var(--ink-3); font-size: .88rem; }
.m-xcard__row, .m-ccard__row { font-size: .9rem; color: var(--ink-2); }
.m-xcard__k { display: block; color: var(--ink-3); font-size: .74rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.m-xcard__vetted, .m-ccard__checked { margin-block-start: auto; padding-block-start: .4rem; color: var(--green-darker); font-size: .82rem; font-weight: 600; }
.m-ccard__checked { color: var(--ink-3); font-weight: 500; }

.m-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; }
.m-tag { padding: .22rem .6rem; border-radius: var(--r-pill); background: #f1f3f2; border: 1px solid var(--surface-line); color: var(--ink-2); font-size: .8rem; }

/* ---- pills -------------------------------------------------------------- */
.m-pill {
  display: inline-flex; align-items: center; align-self: flex-start;
  padding: .28rem .7rem; border-radius: var(--r-pill);
  font-size: .8rem; font-weight: 600;
}
.m-pill--rhd-yes        { background: var(--green-tint); color: var(--green-darker); }
.m-pill--rhd-restricted { background: var(--amber-bg);   color: var(--amber); }
.m-pill--rhd-no         { background: var(--sold-bg);    color: var(--sold); }
.m-pill--rhd-unknown    { background: var(--bg-sunken);  color: var(--ink-3); }
.m-vetted { color: var(--green-darker); font-weight: 600; }

/* ---- profile ------------------------------------------------------------ */
.m-facts {
  display: grid; gap: 1px; margin: 0 0 clamp(20px, 3vw, 32px);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  background: var(--line); border: 1px solid var(--surface-line); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.m-facts > div { background: var(--bg); padding: 14px 16px; }
.m-facts dt { color: var(--ink-3); font-size: .74rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-block-end: .2rem; }
.m-facts dd { margin: 0; font-weight: 600; }
.m-facts small { color: var(--ink-3); font-weight: 400; }

.m-sec { padding-block: 0 clamp(20px, 3vw, 28px); }
.m-sec + .m-sec { border-block-start: 1px solid var(--line); padding-block-start: clamp(20px, 3vw, 28px); }
.m-sec p { margin: 0; color: var(--ink-2); }

.m-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.m-ticks li { position: relative; padding-inline-start: 1.6rem; color: var(--ink-2); font-size: .95rem; }
.m-ticks li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .45em;
  width: .7rem; height: .4rem;
  /* Physical sides on purpose: a tick is the same shape in both languages. */
  border-left: 2px solid var(--green); border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}

.m-steps { margin: 0; padding-inline-start: 1.3rem; display: grid; gap: .7rem; color: var(--ink-2); }
.m-steps li::marker { color: var(--ink-3); font-weight: 600; }
.m-links { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; gap: .4rem; }

.m-ids { margin: .8rem 0 0; display: grid; gap: .25rem; }
.m-ids dt { color: var(--ink-3); font-size: .78rem; margin-block-start: .5rem; }
.m-ids dd { margin: 0; display: flex; flex-direction: column; gap: .15rem; font-size: .9rem; }
.m-mono { font-family: var(--mono); font-size: .95rem; color: var(--ink); letter-spacing: .02em; }

.m-note { color: var(--ink-3); font-size: .88rem; margin: .7rem 0 0; }
.m-note--warn { color: var(--amber); }
.m-note--center { text-align: center; margin-block-start: 2rem; }
.m-empty { padding: 32px; text-align: center; color: var(--ink-3); background: var(--bg); border: 1px dashed var(--line-strong); border-radius: var(--r-lg); margin: 0; }
.m-more { font-weight: 600; }

.m-disclaimer {
  padding: 16px 18px; border-radius: var(--r-lg);
  background: rgba(255,255,255,.6); border: 1px solid var(--surface-line); color: var(--ink-3); font-size: .85rem;
}
.m-disclaimer p { margin: 0; }
.m-disclaimer p + p { margin-block-start: .6rem; color: var(--ink-2); }

.m-previewbar {
  background: var(--amber-bg); color: var(--amber);
  text-align: center; font-size: .88rem; font-weight: 600; padding: .55rem 1rem;
}

/* ---- home ------------------------------------------------------------------ */
.m-hero {
  text-align: center;
  padding-block: clamp(4px, 1.5vw, 20px) clamp(12px, 3vw, 32px);
}
/* Home: the title sits close under the header (the page and the hero both added space). */
.page-home .m-page { padding-block-start: clamp(12px, 2.5vw, 28px); }
.m-hero > p { max-width: 60ch; margin-inline: auto; }
.m-hero h1 { font-size: clamp(1.85rem, 1.2rem + 2.8vw, 3rem); letter-spacing: -.03em; margin-block-end: .4em; }
.m-hero .m-lead { margin-inline: auto; }
.m-hero .m-cta { margin-block-start: clamp(20px, 3vw, 28px); }
/* A faint green wash behind the top of the home page, no box around it. */
body.page-home { background: #fff; }

.m-select {
  flex: 1 1 240px; min-height: 52px; padding-inline: 14px;
  font: inherit; font-size: 16px;            /* 16px: no zoom-on-focus on iPhone */
  color: var(--ink); background: var(--bg-soft);
  border: 1px solid var(--line-strong); border-radius: var(--r);
  box-shadow: 0 1px 2px rgba(16,20,24,.06) inset;
}
.m-select:focus { outline: 3px solid var(--green-ring); outline-offset: 1px; border-color: var(--green); }

.m-how { margin: clamp(28px, 5vw, 56px) auto; text-align: center; }
.m-how__steps { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); text-align: start; }
.m-how__step {
  display: flex; flex-direction: column; gap: .3rem; padding: 22px;
  border-radius: var(--r-lg); background: var(--bg);
  border: 1px solid var(--surface-line); box-shadow: var(--shadow);
}
.m-how__step span:last-child { color: var(--ink-2); font-size: .95rem; }
.m-how__n {
  display: inline-grid; place-items: center; width: 38px; height: 38px; margin-block-end: .5rem;
  border-radius: 12px; color: var(--on-green); font-weight: 700;
  background: linear-gradient(150deg, #4ade80, var(--green-dark));
  box-shadow: 0 6px 14px rgba(34,197,94,.35), 0 1px 0 rgba(255,255,255,.4) inset;
}
.m-how .m-h3 { font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem); margin-block-end: 1.1rem; }
.page-home .m-disclaimer { max-width: 720px; margin-inline: auto; }

/* ---- home: the make question, in the hero ------------------------------- */
.m-makes { margin: clamp(24px, 4vw, 40px) auto 0; }
.m-makes__q { font-size: clamp(1.15rem, 1rem + .8vw, 1.5rem); margin-block-end: 1rem; }
.m-makes__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
@media (min-width: 640px) { .m-makes__list { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1000px) { .m-makes__list { grid-template-columns: repeat(6, 1fr); } }   /* 12 tiles: 2 even rows across the 1290px container */
.m-make {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
  min-height: 104px; padding: 14px 8px;
  background: var(--bg); border: 1px solid var(--surface-line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); color: var(--ink-2); font-size: .88rem; font-weight: 600;
  transition: transform .2s ease, box-shadow .2s ease, color .2s ease;
}
.m-make .mk-logo { width: 36px; height: 36px; }
.m-make__word { display: flex; align-items: center; height: 36px; color: var(--ink); font-size: 1.05rem; font-weight: 800; }
.m-make:hover { text-decoration: none; color: var(--ink); transform: translateY(-3px); box-shadow: var(--shadow-lg); }
/* Make logos (inline SVG): ink at rest, the brand's own colour on hover and
   once chosen. --brand is set on each tile from MAKE_COLORS. */
.mk-logo { width: 32px; height: 32px; flex: 0 0 auto; color: var(--ink); opacity: .8; transition: color .2s ease, opacity .2s ease; }
.m-make:hover .mk-logo, .q-tile:hover .mk-logo, .q-tile:has(input:checked) .mk-logo { color: var(--brand, var(--ink)); opacity: 1; }

/* ---- the guided request form ------------------------------------------------
   Without JavaScript every question is a card, one under the other. With it
   (.is-live) one question shows at a time. */
/* The form spans the site container (1290px) like every other page. */
.q-page { padding-block-start: clamp(16px, 2.5vw, 28px); }
.q-intro { margin-block-end: clamp(12px, 2vw, 18px); }
.q-intro h1 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); }
.q-intro[hidden] { display: none; }

/* No card: the questions sit straight on the page, edge to edge of the
   container, so a phone screen is not a box inside a box. */
.q { padding-block: 8px; margin-block-end: 32px; }
/* The min-height keeps the footer from bouncing as questions change length.
   svh = the screen with the address bar showing: plain vh changes as the bar
   slides in and out, which resized the question under the thumb. */
.q-flow.is-live .q { display: none; margin: 0; min-height: min(380px, 48vh); }
@supports (height: 1svh) { .q-flow.is-live .q { min-height: min(380px, 48svh); } }
.q-flow.is-live .q.is-active { display: flex; flex-direction: column; }
/* A step change is two moves: the old question leaves (q-out-*, 200ms, the
   time is OUT_MS in js/request.js), then the new one comes in (q-in-*). */
.q.q-in-next { animation: q-in-next .42s cubic-bezier(.22, 1, .36, 1); }
.q.q-in-prev { animation: q-in-prev .42s cubic-bezier(.22, 1, .36, 1); }
.q.q-out-next { animation: q-out-next .2s cubic-bezier(.4, 0, 1, 1) forwards; }
.q.q-out-prev { animation: q-out-prev .2s cubic-bezier(.4, 0, 1, 1) forwards; }
.q-flow.is-turning { pointer-events: none; }
@keyframes q-in-next { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes q-in-prev { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: none; } }
@keyframes q-out-next { to { opacity: 0; transform: translateY(-14px); } }
@keyframes q-out-prev { to { opacity: 0; transform: translateY(14px); } }
/* Phones: the next question slides in sideways like an iPhone screen push.
   It only MOVES, it never fades: a fade-in starts invisible, and iPhones
   sometimes held it there until the screen was touched. A slide is drawn
   fully from its first frame, so that cannot happen. */
@media (hover: none) {
  .q.q-in-next { animation: q-push-next .34s cubic-bezier(.32, .72, 0, 1); }
  .q.q-in-prev { animation: q-push-prev .34s cubic-bezier(.32, .72, 0, 1); }
  .q.q-out-next { animation: q-pull-next .2s cubic-bezier(.4, 0, 1, 1) forwards; }
  .q.q-out-prev { animation: q-pull-prev .2s cubic-bezier(.4, 0, 1, 1) forwards; }
  .q-stage { overflow-x: clip; }
}
@keyframes q-push-next { from { transform: translate3d(36px, 0, 0); } to { transform: none; } }
@keyframes q-push-prev { from { transform: translate3d(-36px, 0, 0); } to { transform: none; } }
@keyframes q-pull-next { to { opacity: 0; transform: translate3d(-36px, 0, 0); } }
@keyframes q-pull-prev { to { opacity: 0; transform: translate3d(36px, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .q.q-in-next, .q.q-in-prev, .q.q-out-next, .q.q-out-prev { animation: none; } }

.q-h { font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); letter-spacing: -.025em; line-height: 1.2; margin: 0 0 .35em; }
.q-h label { cursor: text; }
.q-hint { color: var(--ink-3); margin: 0 0 1rem; max-width: 62ch; }
.q-input { min-height: 52px; font-size: 1.05rem; }
textarea.q-input { min-height: 140px; font-size: 1rem; }
.q .m-field + .m-field, .q .m-row + .m-field { margin-block-start: 14px; }
.q .m-err { display: block; margin-block-start: 10px; }
.q .m-ack { margin-block-start: 14px; }
.q-find { margin-block-end: 12px; }
.q-none { color: var(--ink-3); margin: .4rem 0 0; }
.q-js-only { display: none; }
.q-flow.is-live .q-js-only { display: block; }
.q-flow:not(.is-live) .q-nav { display: none; }

/* tiles */
.q-tiles { display: grid; gap: 10px; }
.q-tiles--makes     { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
.q-tiles--countries { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.q-tiles--types     { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
@media (min-width: 640px) { .q-tiles--makes { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } }
.q-tile {
  position: relative; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45rem;
  min-height: 84px; padding: 12px 10px;
  background: var(--bg); border: 1.5px solid var(--line); border-radius: var(--r);
  color: var(--ink-2); text-align: center;
  transition: border-color .15s ease, background-color .15s ease, transform .18s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.q-tile[hidden] { display: none; }
.q-tile:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: var(--shadow); }
.q-tile:active { transform: scale(.98); }
.q-tile input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.q-tile:has(input:focus-visible) { outline: 3px solid var(--green-ring); outline-offset: 2px; }
.q-tile:has(input:checked) {
  border-color: var(--green); background: var(--green-tint); color: var(--ink);
  box-shadow: 0 0 0 3px var(--green-ring);
}
/* The tick on the chosen tile. Physical sides on purpose: same shape in both languages. */
.q-tile:has(input:checked)::after {
  content: ""; position: absolute; top: 8px; inset-inline-end: 8px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.9531 3.99225C19.48 3.9335 20.0214 4.09638 20.4492 4.43854C20.8769 4.78081 21.1545 5.27298 21.2129 5.79987C21.2716 6.32695 21.1064 6.84596 20.7617 7.24908C20.5953 7.44382 20.4282 7.63931 20.2617 7.83405C17.2647 11.3402 14.2675 14.8465 11.2705 18.3526C11.1041 18.5473 10.937 18.7428 10.7705 18.9376C10.52 19.23 10.1569 19.4123 9.76758 19.4493C9.50945 19.4735 9.25416 19.4313 9.02344 19.3311C8.84537 19.272 8.67957 19.1816 8.53906 19.0606C8.45329 18.9866 8.36702 18.9129 8.28125 18.8389C6.73535 17.5051 5.18946 16.1708 3.64356 14.837C3.55775 14.7629 3.47155 14.6884 3.38574 14.6143C2.98278 14.2673 2.74666 13.7828 2.74707 13.252C2.7467 12.7223 2.98292 12.1892 3.38574 11.7862C3.78869 11.3833 4.32181 11.1482 4.85156 11.1485C5.38243 11.148 5.86681 11.3832 6.21387 11.7862C6.28792 11.872 6.36247 11.9582 6.43652 12.044C7.4622 13.2328 8.48806 14.4216 9.51367 15.6104C12.0681 12.1955 14.6234 8.78117 17.1777 5.36627C17.3311 5.16129 17.4844 4.95602 17.6377 4.75104C17.9553 4.32607 18.426 4.05079 18.9531 3.99225Z' fill='%230a0a0a'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.q-tile img { width: 32px; height: 32px; opacity: .8; }
.q-tile:has(input:checked) img { opacity: 1; }
.q-tile__word { display: flex; align-items: center; height: 32px; color: var(--ink); font-size: 1.05rem; font-weight: 800; }
.q-tile__label { font-size: .9rem; font-weight: 600; }
.q-tile--row, .q-tile--country {
  flex-direction: row; justify-content: flex-start; gap: .65rem;
  min-height: 50px; padding-block: 10px; padding-inline: 14px 34px; text-align: start;
}
.q-tile--row .q-tile__label, .q-tile--country .q-tile__label { font-size: .95rem; }
.q-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--ink-3); }
.q-dot--yes { background: var(--green); }
.q-dot--restricted { background: var(--amber); }
.q-dot--no { background: var(--sold); }

/* letter keys, desktop only */
.q-key {
  position: absolute; top: 7px; inset-inline-start: 7px;
  min-width: 20px; padding: 1px 5px; border-radius: 5px;
  border: 1px solid var(--line-strong); background: var(--bg);
  color: var(--ink-3); font: 600 .68rem/1.4 var(--font); text-align: center;
}
.q-tile--row .q-key { position: static; order: -1; }
.q-tile:has(input:checked) .q-key { border-color: var(--green); color: var(--green-darker); }
@media (hover: none) { .q-key, .q-keyhint { display: none; } }

/* quick-fill chips */
.q-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-block-end: 12px; }
.q-chip {
  padding: .45rem .9rem; min-height: 38px; border-radius: var(--r-pill); cursor: pointer;
  background: var(--bg); border: 1px solid var(--line-strong); color: var(--ink-2);
  font: inherit; font-size: .88rem; font-weight: 600;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.q-chip:hover { border-color: var(--ink-3); color: var(--ink); }
.q-chip[aria-pressed="true"] { border-color: var(--green); background: var(--green-tint); color: var(--green-darker); }
/* Model step: popular models of the make in the chosen type, and the fixes
   offered under a model that does not fit. */
.q-models { margin-block-start: 18px; }
.q-models[hidden] { display: none; }
.q-models__label { margin: 0 0 8px; color: var(--ink-3); font-size: .86rem; font-weight: 600; }
.q-fix { margin-block: 10px 0; }

.q-money { display: flex; gap: 10px; }
.q-money .q-input { flex: 1 1 auto; min-width: 0; }
.q-money .m-select { flex: 0 0 112px; min-height: 52px; }

.q-nav { display: flex; align-items: center; gap: 14px; padding-block-start: 22px; }
.q-nav .btn { min-width: 150px; min-height: 46px; }

/* progress and the trail of answers */
.q-top {
  position: sticky; top: var(--header-h); z-index: 5;
  padding-block: 10px 12px; background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
/* Phones: solid, not blurred. A see-through blur is redrawn on every frame of
   a scroll, and with the header and tab bar that made three. */
@media (max-width: 999px) {
  .q-top { top: 60px; background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.q-bar { height: 6px; border-radius: var(--r-pill); background: #e2e7e4; overflow: hidden; }
.q-bar span {
  display: block; height: 100%; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, #4ade80, var(--green-dark));
  transition: width .4s cubic-bezier(.2, .8, .2, 1);
}
.q-trail { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 10px; }
.q-trail[hidden] { display: none; }
.q-crumb {
  max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: .3rem .75rem; border-radius: var(--r-pill); cursor: pointer;
  background: var(--bg); border: 1px solid var(--surface-line); box-shadow: var(--shadow-sm);
  color: var(--ink-2); font: inherit; font-size: .8rem; font-weight: 600;
  transition: transform .15s ease, box-shadow .15s ease, color .15s ease;
}
.q-crumb:hover { color: var(--ink); transform: translateY(-1px); box-shadow: var(--shadow); }

.q-foot { display: flex; align-items: center; gap: 1rem; margin-block-start: 14px; color: var(--ink-3); font-size: .85rem; }
.q-foot[hidden] { display: none; }
.q-back {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 40px; padding: 0 .4rem;
  background: none; border: 0; cursor: pointer; color: var(--ink-2); font: inherit; font-weight: 600;
}
.q-back::before { content: "\2190"; }
.is-rtl .q-back::before { content: "\2192"; }
.q-back:hover { color: var(--ink); }
.q-back[hidden] { visibility: hidden; display: inline-flex; }
.q-count { margin-inline-start: auto; font-variant-numeric: tabular-nums; }

/* review */
.q-summary { margin: 0 0 18px; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.q-sumrow {
  position: relative; display: grid; grid-template-columns: minmax(100px, 34%) 1fr; gap: 12px;
  padding: 12px 16px; border-block-end: 1px solid var(--line); transition: background-color .15s ease;
}
.q-sumrow:last-child { border-block-end: 0; }
.q-sumrow:hover { background: var(--bg-soft); }
.q-sumrow dt { color: var(--ink-3); font-size: .86rem; }
.q-sumrow dd { margin: 0; display: flex; justify-content: space-between; gap: 12px; font-weight: 600; overflow-wrap: anywhere; }
.q-sumrow dd.is-empty { color: var(--ink-3); font-weight: 400; }
.q-sumrow__edit {
  flex: 0 0 auto; background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--link); font: inherit; font-size: .85rem; font-weight: 600;
}
.q-sumrow__edit::after { content: ""; position: absolute; inset: 0; }
.q--review .m-submit { margin-block-start: 18px; }

/* ---- flags ------------------------------------------------------------------ */
.flag {
  width: 28px; height: 21px; flex: 0 0 auto; object-fit: cover;
  border-radius: 4px; box-shadow: 0 0 0 1px rgba(16,20,24,.1), 0 1px 3px rgba(16,20,24,.12);
}
.flag--lg { width: 44px; height: 33px; border-radius: 6px; }
.m-flagh { display: flex; align-items: center; gap: .6rem; }
.m-crow__name { display: flex; align-items: center; gap: .6rem; }
.m-crow__name + .m-crow__meta { padding-inline-start: calc(28px + .6rem); }
/* In the form the dot (the right-hand-drive answer) sits after the name. */
.q-tile--country .q-dot { margin-inline-start: auto; }
.q-tile--country { padding-inline-end: 14px; }
.q-tile--country:has(input:checked) { padding-inline-end: 36px; }
.q-tile--country:has(input:checked) .q-dot { display: none; }

/* ---- wheels (built by request.js; without JavaScript the tiles and the
   <select> are the fields). Spun with a finger, the mouse wheel or the arrow
   keys, like a phone's date picker; the row that stops in the green band is
   the answer. Rows are 48px: request.js counts on that. */
.q-flow.is-live .q-tiles--countries, .q-flow.is-live .q-money .m-select { display: none; }
.q-wheel { display: none; }
.q-flow.is-live .q-wheel { display: block; position: relative; max-width: 520px; }
.q-opt__name { flex: 1 1 auto; min-width: 0; }
.q-opt__rhd { display: inline-flex; align-items: center; gap: .4rem; flex: 0 0 auto; color: var(--ink-3); font-size: .78rem; }
.q-opt__rhd::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); }
.q-opt__rhd--yes::before { background: var(--green); }
.q-opt__rhd--restricted::before { background: var(--amber); }
.q-opt__rhd--no::before { background: var(--sold); }
@media (max-width: 480px) { .q-opt__rhd { font-size: 0; gap: 0; } }   /* just the dot on small phones */
/* The currency: three rows, beside the budget. */
.q-flow.is-live .q-money { align-items: center; }
.q-flow.is-live .q-wheel--small { flex: 0 0 110px; }
.q-wheel--small .q-wheel__band { top: 48px; }
.q-wheel--small .q-wheel__list { height: 144px; padding-block: 48px; }
.q-wheel--small .q-wheel__opt { justify-content: center; padding-inline: 8px; }
.q-wheel__band {
  position: absolute; inset-inline: 0; top: 96px; height: 48px; pointer-events: none;
  background: var(--green-tint); border: 1.5px solid var(--green); border-radius: var(--r);
}
.q-wheel__list {
  position: relative; list-style: none; margin: 0; padding: 96px 0; height: 240px; box-sizing: border-box;
  overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain;
  scrollbar-width: none; outline: none;
}
.q-wheel__list::-webkit-scrollbar { display: none; }
/* The rows fade towards the top and bottom under two still gradients laid
   over the list: cheap to draw, unlike a mask on the scrolling list itself,
   which made iPhones redraw the next question late. */
.q-wheel::before, .q-wheel::after {
  content: ""; position: absolute; inset-inline: 0; height: 33%; z-index: 1; pointer-events: none;
}
.q-wheel::before { top: 0; background: linear-gradient(#fff, rgba(255,255,255,0)); }
.q-wheel::after { bottom: 0; background: linear-gradient(rgba(255,255,255,0), #fff); }
.q-wheel__opt {
  height: 48px; display: flex; align-items: center; gap: .7rem; padding-inline: 16px;
  scroll-snap-align: center; cursor: pointer; color: var(--ink-2); font-size: 1.05rem;
  -webkit-tap-highlight-color: transparent;
}
.q-wheel__opt.is-on { color: var(--ink); font-weight: 700; }
.q-wheel__opt--ph { justify-content: center; color: var(--ink-3); font-weight: 500; }
.q-wheel__opt--ph.is-on { color: var(--ink-3); font-weight: 600; }
.q-wheel:has(.q-wheel__list:focus-visible) .q-wheel__band { box-shadow: 0 0 0 3px var(--green-ring); }

/* Phones: nothing in the form changes size as the visitor moves through it,
   so the page does not jump. The trail of answers is one line that scrolls
   sideways (it used to wrap onto a new line as answers were added, pushing
   the question down), and its line is kept even before the first answer. */
@media (max-width: 999px) {
  .q-trail { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; min-height: 30px; }
  .q-trail::-webkit-scrollbar { display: none; }
  .q-trail[hidden] { display: flex; visibility: hidden; }
  .q-crumb { flex: 0 0 auto; max-width: 160px; }
}

/* ---- country groups ----------------------------------------------------------- */
.m-group { margin-block-end: clamp(24px, 4vw, 40px); }
.m-group__h { display: flex; align-items: center; gap: .6rem; font-size: 1.05rem; margin-block-end: .8rem; }
.m-group__h::before { content: ""; width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; background: var(--ink-3); box-shadow: 0 0 0 4px rgba(107,115,120,.15); }
.m-group--yes .m-group__h::before        { background: var(--green); box-shadow: 0 0 0 4px rgba(34,197,94,.18); }
.m-group--restricted .m-group__h::before { background: var(--amber); box-shadow: 0 0 0 4px rgba(51,65,85,.14); }
.m-group--no .m-group__h::before         { background: var(--sold);  box-shadow: 0 0 0 4px rgba(176,34,31,.14); }
.m-group__n { color: var(--ink-3); font-weight: 500; font-size: .9rem; }

.m-clist { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.m-crow {
  display: flex; flex-direction: column; gap: .15rem; min-height: 56px; justify-content: center;
  padding: 14px 18px; border-radius: var(--r); color: var(--ink);
  background: var(--bg); border: 1px solid var(--surface-line); box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.m-crow:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.m-crow__name { font-weight: 600; }
.m-crow__meta { color: var(--ink-3); font-size: .84rem; }
.m-crow__meta:empty { display: none; }

/* ---- the warning on a country that refuses or has not confirmed RHD --------- */
.m-alert { padding: 18px 20px; border-radius: var(--r-lg); margin-block-end: clamp(20px, 3vw, 32px); }
.m-alert p { margin: .5rem 0 0; }
.m-alert__h { font-size: 1.05rem; margin: 0; }
.m-alert--no      { background: var(--sold-bg);  color: #7a1513; border: 1px solid rgba(176,34,31,.16); box-shadow: 0 8px 24px rgba(176,34,31,.08); }
/* Notes the buyer must read (safety, "use the same email"): the brand green, softly. */
.m-alert--unknown { background: var(--green-tint); color: var(--ink); border: 1px solid rgba(34,197,94,.35); box-shadow: 0 8px 24px rgba(34,197,94,.08); }

/* ---- calls to action ---------------------------------------------------- */
.m-cta { margin: clamp(18px, 3vw, 28px) 0 0; text-align: center; }
.m-cta--start { text-align: start; margin: 0 0 clamp(18px, 3vw, 28px); }
/* Review step: what sending with or without an account means. */
.q-account { margin: 0 0 14px; padding: 12px 14px; border-radius: var(--r); background: var(--bg-soft); color: var(--ink-2); font-size: .92rem; }
/* The first screen of the form for visitors without an account. While it
   shows, the form waits underneath (html.q-gated hides it). */
html.q-gated .q-page .q-flow, html.q-gated .q-page > .m-alert { display: none; }
.q-gate { margin: clamp(8px, 3vw, 32px) auto 32px; text-align: center; }
.q-gate[hidden] { display: none; }
.q-gate__h { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); letter-spacing: -.025em; margin: 0 0 4.1rem; }
.q-gate__opts { display: grid; gap: 14px; text-align: start; }
@media (min-width: 800px) { .q-gate__opts { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.q-gate__opt { display: flex; flex-direction: column; gap: .5rem; padding: 22px; border-radius: var(--r-xl); background: #fff; border: 1px solid var(--line-strong); box-shadow: var(--shadow-md); }
.q-gate__opt h3 { margin: 0; font-size: 1.12rem; color: var(--ink); }
.q-gate__opt p { margin: 0 0 .6rem; color: var(--ink); font-size: .95rem; line-height: 1.55; flex: 1; }
.q-gate__opt--main { border: 2px solid var(--green); box-shadow: 0 0 0 4px var(--green-ring), var(--shadow-md); }
.m-limit__form { margin-block: 1rem; max-width: 420px; }

/* ---- forms (request, report) ------------------------------------------- */
.m-narrow { }              /* full container width, like every page (Lay: 1290px everywhere) */
.m-form { display: grid; gap: 18px; margin-block-end: 24px; }
.m-fs {
  margin: 0; padding: clamp(16px, 3vw, 22px); min-width: 0;
  border: 1px solid var(--surface-line); border-radius: var(--r-lg); background: var(--bg);
  box-shadow: var(--shadow);
  display: grid; gap: 14px;
}
/* The legend sits inside the card as its title, not cut into the border. */
.m-fs > legend { float: inline-start; width: 100%; padding: 0; margin-block-end: 2px; font-weight: 700; font-size: 1.05rem; }
.m-field { display: grid; gap: 6px; min-width: 0; }
.m-field > label, .m-field__label { font-size: .9rem; font-weight: 600; color: var(--ink-2); }
.m-row { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .m-row { grid-template-columns: 1fr 1fr; } .m-row--budget { grid-template-columns: 2fr 1fr; } }
/* "From" and "to" years: always side by side, phones included (four digits each). */
.q .m-row { grid-template-columns: 1fr 1fr; gap: 10px; }
.q .m-row .m-field { min-width: 0; }
.m-input {
  width: 100%; min-height: 48px; padding: 10px 14px;
  font: inherit; font-size: 16px;               /* 16px: no zoom-on-focus on iPhone */
  color: var(--ink); background: var(--bg-soft);
  border: 1px solid var(--line-strong); border-radius: var(--r);
  box-shadow: 0 1px 2px rgba(16,20,24,.06) inset;
  transition: border-color .15s ease, background-color .15s ease;
}
textarea.m-input { min-height: 110px; resize: vertical; line-height: 1.6; }
.m-input:focus { outline: 3px solid var(--green-ring); outline-offset: 1px; border-color: var(--green); background: var(--bg); }
.m-field .m-select { flex: none; width: 100%; min-height: 48px; }
.m-input[hidden] { display: none; }
.m-err { color: var(--sold); font-size: .86rem; font-weight: 500; }
.has-error .m-input, .has-error .m-select { border-color: var(--sold); }
.m-form-error { margin: 0; color: var(--sold); font-weight: 600; text-align: center; }
.m-hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }


.m-acks { display: grid; gap: 10px; }
.m-ack {
  display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; cursor: pointer;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); font-size: .93rem;
  background: var(--bg-soft); transition: border-color .15s ease, background-color .15s ease;
}
.m-ack:has(input:checked) { border-color: rgba(34,197,94,.5); background: var(--green-tint); }
.m-ack[hidden] { display: none; }
.m-ack input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--green-dark); }
.m-ack .m-err { grid-column: 2; }
.m-ack.has-error { border-color: var(--sold); }

/* ---- sent ---------------------------------------------------------------- */
.m-done {
  padding: clamp(18px, 4vw, 28px); border-radius: var(--r-xl); overflow: hidden; background: #fff; color: var(--ink);
  border: 1px solid rgba(16,20,24,.1); box-shadow: var(--shadow-lg);
  margin-block-end: 24px; outline: none;
}
.m-done h2 { font-size: 1.3rem; margin: 0 0 .4rem; color: var(--ink); }
/* The request "sent" panel: a black head and a white body. */
.m-done--sent { padding: 0; }
/* Black head, green tick: the one place the green is a big shape. */
.m-done__head { display: flex; align-items: center; gap: 16px; padding: clamp(18px, 4vw, 26px) clamp(18px, 4vw, 28px); background: var(--logo-ink); color: #fff; }
.m-done__tick { flex: 0 0 auto; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--green); color: #0a0a0a; box-shadow: 0 0 0 5px rgba(34,197,94,.22); }
.m-done--sent h2 { margin: 0; color: #fff; }
.m-done__ref { margin: .2rem 0 0; font-weight: 700; color: var(--green); letter-spacing: .01em; }
.m-done__body { padding: clamp(18px, 4vw, 28px); }
.m-done__body > p { color: var(--ink); line-height: 1.6; }
/* What must not be missed: red, on white, never pale. */
.m-done__important { margin: 1rem 0; padding: 14px 16px; border: 2px solid var(--sold); border-radius: var(--r); background: #fff; }
.m-done__flag { display: inline-block; margin-bottom: .4rem; padding: 2px 10px; border-radius: var(--r-pill); background: var(--sold); color: #fff; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.m-done__important p { margin: 0; color: var(--sold); font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
/* Safety tips: white on black, green ticks. */
.m-done__safety { margin-top: 1.2rem; padding: 18px 20px; border-radius: var(--r-lg); background: var(--logo-ink); color: #fff; }
.m-done__safety p { margin: 0 0 .7rem; color: #fff; }
.m-done__safety .m-ticks li { color: #fff; }
.m-done__list { margin: .4rem 0 1rem; padding-inline-start: 1.2rem; }
.m-done__list li { margin-block: .3rem; font-weight: 600; }
.m-done .m-alert { margin: 1rem 0 0; }

/* ---- car request board (/car-requests/) ---------------------------------- */
.b-card { display: flex; flex-direction: column; gap: .6rem; transition: transform .15s ease, box-shadow .15s ease; }
.b-card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow); }
.b-card__top { display: flex; align-items: center; gap: .75rem; }
.b-card__car { display: block; font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; }
.b-card__meta { display: block; color: var(--ink-3); font-size: .86rem; }
.b-card__row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .92rem; color: var(--ink-2); }
.b-card__row .flag { width: 22px; height: 16px; border-radius: 3px; }
.b-card__budget { font-weight: 600; font-size: .95rem; }
.b-card__foot { margin-block-start: auto; padding-block-start: .6rem; border-block-start: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: .5rem; color: var(--ink-3); font-size: .8rem; }
.b-card__slots { display: inline-flex; align-items: center; gap: .4rem; }
.b-card.is-full { opacity: .62; }
.b-card__example { align-self: flex-start; background: #eef0f2; color: #5b6368; }
.b-card.is-full .b-card__slots span { color: var(--sold); font-weight: 600; }
.b-logo { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--bg-soft); color: var(--brand, var(--ink)); }
.b-logo .mk-logo { width: 26px; height: 26px; color: inherit; opacity: 1; }
.b-logo--text { font-weight: 700; font-size: 1.15rem; color: var(--ink-2); }
.b-slots { display: inline-flex; gap: 3px; }
.b-slots i { width: 14px; height: 6px; border-radius: 3px; background: var(--bg-sunken); }
.b-slots i.on { background: var(--green); }
.b-head { display: flex; align-items: center; gap: 1rem; }
.b-head .b-logo { width: 60px; height: 60px; border-radius: 16px; }
.b-head .b-logo .mk-logo { width: 36px; height: 36px; }
.b-head h1 { margin: 0; }
.b-head .flag { width: 22px; height: 16px; border-radius: 3px; vertical-align: -2px; }
.b-locked { position: relative; border-radius: var(--r-lg); background: var(--bg-soft); overflow: hidden; }
.b-buyer { margin: 0; padding: 18px 20px; display: grid; grid-template-columns: max-content 1fr; gap: .55rem 1.2rem; filter: blur(5px); user-select: none; pointer-events: none; }
.b-buyer dt { color: var(--ink-3); font-size: .8rem; font-weight: 600; }
.b-buyer dd { margin: 0; color: var(--ink); }
.b-lock { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; padding: 16px; text-align: center; background: rgba(246,247,248,.55); color: var(--ink); }
.b-lock p { margin: 0; max-width: 34ch; font-weight: 600; font-size: .95rem; }
.b-contact__slots { display: flex; align-items: center; gap: .6rem; margin: 0 0 1rem; color: var(--ink-2); font-size: .9rem; }
.b-form { display: grid; gap: .5rem; }
.b-form label { font-weight: 600; font-size: .9rem; }
.b-form textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 12px; font: inherit; background: var(--bg-soft); resize: vertical; }
.b-form button[disabled] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
@media (max-width: 560px) {
  .b-buyer { grid-template-columns: 1fr; gap: .2rem; }
  .b-buyer dd { margin-block-end: .5rem; }
}
.b-buyer--open { filter: none; user-select: text; pointer-events: auto; background: var(--green-tint); border-radius: var(--r-lg); }
.b-buyer--open dd { overflow-wrap: anywhere; }
.m-alert--yes { background: var(--green-tint); color: var(--green-darker); }
.p-page { }                /* full container width (1290px) */
.p-card { max-width: 440px; margin: clamp(16px, 4vw, 48px) auto; }
.p-card .m-form { margin-block: 1rem 0; }
.p-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.p-list li { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; display: flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: baseline; }
.p-split { display: grid; gap: 20px; align-items: start; }
@media (min-width: 860px) { .p-split { grid-template-columns: 1fr 1fr; } .p-split .p-card { margin: 0; max-width: none; } }
.p-form { }
.p-narrow { max-width: 460px; }
.p-checks__grid { display: grid; gap: 6px 14px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.p-check { display: flex; gap: .5rem; align-items: flex-start; font-size: .95rem; cursor: pointer; }
.p-check input { margin-block-start: .25rem; accent-color: var(--green-dark); }
.p-confirm { padding: 14px 16px; background: var(--bg-soft); border-radius: 12px; }
.p-hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* ---- dealer area: menu on the left (desktop), on top (phone) ----------- */
.p-shell { display: grid; gap: clamp(20px, 3vw, 40px); align-items: start; }
.p-main { min-width: 0; }
.p-side { background: var(--bg); border: 1px solid rgba(16,20,24,.06); border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: 16px; }
.p-side__who { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.p-side__id { min-width: 0; display: grid; gap: 2px; }
.p-side__co { font-size: 1rem; line-height: 1.3; overflow-wrap: anywhere; }
.p-side__mail { color: var(--ink-3); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-out { margin: 0; flex: none; }
.p-out__btn { font: inherit; font-size: .88rem; font-weight: 600; color: var(--ink-2); background: var(--bg); cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: .45rem .95rem; min-height: 38px;
  transition: color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.p-out__btn:hover { color: var(--ink); border-color: var(--ink-3); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.p-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 14px; padding-block-start: 14px; border-top: 1px solid var(--line); }
.p-nav__a { display: flex; align-items: center; min-height: 40px; padding: .45rem .9rem; border-radius: var(--r-pill);
  color: var(--ink-2); font-size: .92rem; font-weight: 500; background: var(--bg-soft); transition: background-color .15s ease, color .15s ease; }
.p-nav__a:hover { text-decoration: none; color: var(--ink); background: var(--bg-sunken); }
.p-nav__a.is-on { background: var(--logo-ink); color: #fff; font-weight: 600; }
@media (min-width: 960px) {
  .p-shell { grid-template-columns: 250px minmax(0, 1fr); }
  .p-side { position: sticky; top: calc(var(--header-h) + 24px); padding: 20px; }
  .p-side { display: flex; flex-direction: column; }
  .p-side__who { display: contents; }               /* name on top, the pages, Sign out at the bottom */
  .p-side__id { order: 0; padding-block-end: 14px; border-bottom: 1px solid var(--line); }
  .p-nav { order: 1; flex-direction: column; gap: 2px; margin-block-start: 0; padding-block: 12px; border-top: 0; }
  .p-out { order: 2; padding-block-start: 14px; border-top: 1px solid var(--line); }
  .p-nav__a { background: none; border-radius: 10px; }
  .p-nav__a:hover { background: var(--bg-soft); }
  .p-nav__a.is-on { background: var(--logo-ink); }
  .p-out__btn { width: 100%; }
}
/* the dashboard inside the menu layout: buttons line up with the text, facts never leave a hole */
.p-main .m-cta { text-align: start; display: flex; flex-wrap: wrap; gap: 10px; margin-block: clamp(20px, 3vw, 28px) clamp(28px, 4vw, 40px); }
.p-main .m-head { margin-block-start: 0; }
.p-locked { margin-block-start: clamp(16px, 2.5vw, 24px); }
.p-billing-link { margin-block: 0 clamp(18px, 3vw, 28px); }
/* ---- Billing: the orders table (cards on phones) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.bl { padding: 0; overflow: hidden; }
.bl__table { width: 100%; border-collapse: collapse; font-size: .94rem; }
.bl__table th { text-align: start; font-size: .74rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); background: var(--bg-soft); padding: 12px 16px; }
.bl__table td { padding: 14px 16px; border-top: 1px solid var(--line); vertical-align: middle; }
.bl__table tbody tr:first-child td { border-top: 0; }
.bl__table .m-note { margin-inline-start: .3rem; font-size: .85rem; }
.bl__num { text-align: end !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bl__act { text-align: end; white-space: nowrap; }
.bl__st { display: inline-block; padding: .2rem .65rem; border-radius: var(--r-pill); font-size: .8rem; font-weight: 600; background: var(--bg-sunken); color: var(--ink-2); white-space: nowrap; }
.bl__st--paid { background: var(--green-tint); color: var(--green-darker); }
.bl__portal { margin-block-start: clamp(16px, 2.5vw, 24px); }
@media (max-width: 759px) {
  .bl__table thead { display: none; }
  .bl__table, .bl__table tbody, .bl__table tr, .bl__table td { display: block; width: 100%; }
  .bl__table tr { padding: 14px 16px; border-top: 1px solid var(--line); }
  .bl__table tbody tr:first-child { border-top: 0; }
  .bl__table td { border: 0; padding: 3px 0; display: flex; justify-content: space-between; gap: 12px; text-align: end; }
  .bl__table td::before { content: attr(data-label); color: var(--ink-3); font-size: .85rem; text-align: start; }
  .bl__table td.bl__act { display: block; padding-block-start: 10px; }
  .bl__table td.bl__act::before { content: none; }
  .bl__act .btn { width: 100%; }
}
@media (max-width: 559px) { .p-main .m-facts { grid-template-columns: 1fr 1fr; } .p-main .m-facts > div:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.m-input[readonly] { background: var(--bg-sunken); color: var(--ink-2); }
.m-trust .m-note { margin-block: .2rem .8rem; }
/* ---- country step: the suggestion and the region buttons (live mode only) */
.q-suggest, .q-regions { display: none; }
.q-flow.is-live .q-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 0 0 14px; }
.q-flow.is-live .q-regions { display: flex; margin: 0 0 12px; }
.q-suggest__q { color: var(--ink-2); font-weight: 600; }
.q-suggest__yes { display: inline-flex; align-items: center; gap: .6rem; padding: 10px 18px; border: 2px solid var(--green); border-radius: 999px;
  background: var(--green-tint); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.q-suggest__yes:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.q-suggest__yes .flag { width: 26px; height: 19px; border-radius: 3px; }
.q-regions .m-chip { font: inherit; font-size: .88rem; cursor: pointer; }
/* Reveal: the question before a credit is spent, and the messages to the buyer */
.b-msg { margin-top: 1.4rem; display: grid; gap: .7rem; }
.b-msg .m-h3, .b-msg .m-note { margin: 0; }
.b-msg__item { padding: 12px 14px; border-radius: 12px; background: var(--bg-soft); }
.b-msg__item p { margin: 0; overflow-wrap: anywhere; }
.b-msg__item .b-msg__when { font-size: .78rem; color: var(--ink-3); margin-bottom: .3rem; }
/* ---- the request form sits in a centred column: title, progress, every
   question and the buttons line up on the middle of the page */
.q-page .q-intro, .q-page > .m-alert, .q-flow { margin-inline: auto; }
.q-intro, .q-h, .q-hint { text-align: center; }
.q-intro .m-lead, .q-hint { margin-inline: auto; }
.q-trail, .q-nav, .q-flow.is-live .q-suggest, .q-flow.is-live .q-regions { justify-content: center; }
.q-flow.is-live .q-regions { flex-wrap: wrap; }
.q-flow.is-live .q-wheel { margin-inline: auto; width: 100%; }
.q-flow.is-live .q-money { justify-content: center; max-width: 520px; margin-inline: auto; }
/* ---- depth: on the white page every surface is raised by a soft, layered
   shadow; hovering lifts it a little further. Never a coloured bar. */
.m-card { box-shadow: var(--shadow-md); border-color: rgba(16,20,24,.06); }
a.m-card:hover, .b-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.m-facts { box-shadow: var(--shadow-md); border-color: rgba(16,20,24,.06); }
.q-tile { border-color: rgba(16,20,24,.08); box-shadow: var(--shadow-sm); }
.q-tile:hover { border-color: rgba(16,20,24,.12); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.q-tile:has(input:checked) { box-shadow: 0 0 0 3px var(--green-ring), var(--shadow-md); }
.m-input, .q-input, .m-select, .b-form textarea { box-shadow: 0 1px 2px rgba(16,20,24,.05), inset 0 1px 2px rgba(16,20,24,.04); }
.m-input:focus, .q-input:focus, .b-form textarea:focus { box-shadow: 0 0 0 3px var(--green-ring), 0 4px 12px rgba(16,20,24,.06); }
.m-alert { box-shadow: var(--shadow-sm); }
.b-locked { box-shadow: inset 0 1px 3px rgba(16,20,24,.06); }
/* Until request.js has picked the question to show, show none (no flash of
   the long plain form). The height holds the footer in place meanwhile. */
html.q-js .q-flow:not(.is-live) .q, html.q-js .q-flow:not(.is-live) .q-top, html.q-js .q-flow:not(.is-live) .q-foot { display: none; }
html.q-js .q-flow:not(.is-live) { min-height: min(460px, 60vh); }
/* The budget in yen, approximately, under the buyer's own amount */
.b-card__jpy { display: block; margin-top: .1rem; color: var(--ink-3); font-size: .82rem; font-weight: 600; }
.m-facts .b-jpy { display: block; margin-top: .15rem; color: var(--ink-3); font-size: .82rem; font-weight: 600; }
.b-fx { margin: -10px 0 clamp(20px, 3vw, 28px); font-size: .8rem; }
.m-list .b-fx { margin: 14px 0 0; }
.b-fx a { color: inherit; }
/* ---- the "Use 1 credit?" box: in the middle of the screen over a dimmed page */
.b-modal { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(16,20,24,.45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.b-modal[hidden] { display: none; }
.b-modal__box { width: 100%; max-width: 420px; padding: 28px 26px 24px; border-radius: var(--r-xl); background: #fff;
  box-shadow: var(--shadow-lg); text-align: center; }
html.b-modal-open { overflow: hidden; }
.b-modal__icon { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; margin-bottom: 12px;
  background: var(--green-tint); color: var(--green-darker); }
.b-modal__title { margin: 0 0 .5rem; font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.b-modal__text { margin: 0 0 1.4rem; color: var(--ink-2); font-size: .95rem; line-height: 1.55; }
.b-modal__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.b-modal__actions .btn { width: 100%; min-height: 46px; }
.b-modal__actions .is-busy { opacity: .7; cursor: progress; }
/* opening: a short fade and a slight rise (with JavaScript only) */
.b-modal { transition: opacity .18s ease; }
.b-modal__box { transition: transform .22s cubic-bezier(.22, 1, .36, 1), opacity .22s ease; }
.b-modal.js:not(.is-in) { opacity: 0; }
.b-modal.js:not(.is-in) .b-modal__box { transform: translateY(10px) scale(.98); }
@media (max-width: 420px) { .b-modal__actions { grid-template-columns: 1fr; } .b-modal__actions .btn:first-child { order: 2; } }
@media (prefers-reduced-motion: reduce) { .b-modal, .b-modal__box { transition: none; } }
/* ---- contact page: one centred card with the form, sent without a reload */
.c-page .c-head { margin-inline: auto; text-align: center; }
.c-page .c-head .m-lead { margin-inline: auto; }
.c-card { margin-inline: auto; padding: clamp(22px, 4vw, 36px); background: #fff;
  border: 1px solid rgba(16,20,24,.06); border-radius: var(--r-xl); box-shadow: var(--shadow-md);
  transition: opacity .2s ease, transform .2s ease; }
.c-card.is-swapping { opacity: 0; transform: translateY(6px); }
.c-form { display: grid; gap: 18px; }
.c-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 600px) { .c-row { grid-template-columns: 1fr; } }
.c-field { display: grid; gap: 7px; min-width: 0; }
.c-field label { font-size: .9rem; font-weight: 600; color: var(--ink-2); }
.c-input { width: 100%; box-sizing: border-box; min-height: 52px; padding: 13px 16px;
  font: inherit; font-size: max(16px, 1rem); line-height: 1.4; color: var(--ink);   /* 16px or more: no zoom on iPhone */
  background: #fff; border: 1.5px solid var(--line-strong); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16,20,24,.05), inset 0 1px 2px rgba(16,20,24,.04);
  transition: border-color .15s ease, box-shadow .15s ease; -webkit-appearance: none; appearance: none; }
.c-input::placeholder { color: var(--ink-3); }
.c-input:hover { border-color: #b9c0c6; }
.c-input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 4px var(--green-ring), 0 4px 12px rgba(16,20,24,.06); }
.c-input[aria-invalid="true"] { border-color: var(--sold); box-shadow: 0 0 0 4px rgba(176,34,31,.12); }
.c-text { min-height: 0; resize: none; line-height: 1.6; }
.c-field .m-err { margin-top: -1px; }
.c-alert { margin: 0; }
.c-alert[hidden] { display: none; }
.c-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding-top: 4px; }
.c-send { position: relative; min-width: 190px; min-height: 52px; font-size: 1rem; }
.c-note { margin: 0; flex: 1 1 220px; color: var(--ink-3); font-size: .85rem; }
@media (max-width: 600px) { .c-send { width: 100%; } }
.c-spin { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent;
  animation: c-spin .7s linear infinite; }
.c-send.is-busy { cursor: progress; }
.c-send.is-busy .c-send__label { visibility: hidden; }
.c-send.is-busy .c-spin { display: block; position: absolute; inset: 0; margin: auto; }
@keyframes c-spin { to { transform: rotate(360deg); } }
/* the thank-you */
.c-done { text-align: center; padding: 10px 0 4px; outline: none; animation: c-in .35s cubic-bezier(.22, 1, .36, 1); }
.c-done h2 { margin: 14px 0 .4rem; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.6rem); letter-spacing: -.02em; }
.c-done p { margin: 0 auto .4rem; max-width: 46ch; color: var(--ink-2); }
.c-done .c-done__mail { margin-bottom: 1.4rem; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.c-done__tick svg { width: 72px; height: 72px; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.c-done__tick circle { stroke: var(--green); fill: var(--green-tint); stroke-dasharray: 151; stroke-dashoffset: 151; animation: c-draw .5s ease-out forwards; }
.c-done__tick path { stroke: var(--green-darker); stroke-dasharray: 36; stroke-dashoffset: 36; animation: c-draw .35s .4s ease-out forwards; }
@keyframes c-draw { to { stroke-dashoffset: 0; } }
@keyframes c-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .c-done, .c-done__tick circle, .c-done__tick path { animation: none; stroke-dashoffset: 0; }
}


/* Board age groups: Last 48 hours, Up to 4 days old ... Up to 3 weeks old. */
.b-age { display: flex; align-items: center; gap: .5rem; margin: 1.6rem 0 .75rem; font-size: 1rem; font-weight: 700; color: var(--ink); }
.b-age:first-of-type { margin-top: .25rem; }
.b-age span { font-size: .78rem; font-weight: 600; color: var(--ink-3); background: var(--bg-soft); border-radius: 999px; padding: .1rem .55rem; }

/* My requests (/buyer/) */
.p-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.b-mine { padding: 18px 20px; display: grid; gap: .45rem; align-content: start; }
.b-mine p, .b-mine h2 { margin: 0; }
.p-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: .3rem; }
.p-inline { display: inline; margin: 0; }

/* ---- dealers and buyers in Japan (2026-10-25) ------------------------------ */
/* Board: New label, Viewed bubble, filters, the dealer's area line. */
.b-card__pills { display: flex; gap: .4rem; flex-wrap: wrap; }
.b-pill--new { background: var(--green); color: var(--on-green); font-weight: 700; }
.b-pill--japan { background: #fdeef1; color: #9b1c33; }
.b-viewed { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem; border-radius: var(--r-pill);
  background: var(--green-tint); color: var(--green-darker); font-size: .78rem; font-weight: 600; white-space: nowrap; }
.b-viewed--zero { background: var(--bg-soft); color: var(--ink-3); }
.b-viewed--full { background: var(--sold-bg); color: var(--sold); }
/* ---- board filters --------------------------------------------------------
   Computer (1000px+): one row of fields above the list.
   Phone: a slim bar ("Filters" + All / In Japan / Outside Japan); "Filters"
   opens the form as a bottom sheet (js/app-shell.js; #b-filters:target
   without JavaScript). Filters in use show as chips that remove themselves. */
.b-filters { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end;
  margin: 0 0 1rem; padding: 14px 16px; background: var(--bg); border: 1px solid rgba(16,20,24,.06); border-radius: var(--r-lg); box-shadow: var(--shadow-md); }
.b-filters__f { display: grid; gap: .3rem; font-size: .8rem; font-weight: 600; color: var(--ink-3); min-width: 0; }
.b-filters__f .m-input, .b-filters__f .m-select { width: 100%; box-sizing: border-box; height: 48px; font-size: 16px; }
.b-filters__go { display: flex; align-items: center; gap: .8rem; grid-column: 1 / -1; }
.b-filters__clear { font-size: .88rem; }
.b-filters__head { display: none; }

.b-bar { display: none; }
.b-active { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 1rem; }
.b-active__chip { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .55rem .4rem .8rem; border-radius: 999px;
  background: var(--logo-ink, #121212); color: #fff; font-size: .86rem; font-weight: 600; line-height: 1; }
.b-active__chip:hover { text-decoration: none; color: #fff; opacity: .88; }
.b-active__clear { font-size: .86rem; }

@media (min-width: 1000px) {
  .b-filters { grid-template-columns: 1.2fr 1.4fr .8fr .8fr 1.1fr auto; }
  .b-filters__go { grid-column: auto; }
}

@media (max-width: 999px) {
  .b-bar { display: flex; align-items: center; gap: 8px; margin: 0 0 .8rem; overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px; }
  .b-bar::-webkit-scrollbar { display: none; }
  .b-bar__where { display: flex; gap: 8px; }
  .b-bar .m-chip { white-space: nowrap; }
  .b-bar__open { flex: none; display: inline-flex; align-items: center; gap: .45rem; height: 40px; padding: 0 14px; border-radius: 999px;
    background: #fff; border: 1px solid var(--line); color: var(--ink); font-weight: 700; font-size: .92rem; -webkit-tap-highlight-color: transparent; }
  .b-bar__open:hover { text-decoration: none; }
  .b-bar__open.is-on { border-color: var(--ink); }
  .b-bar__n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
    background: var(--green); color: var(--on-green); font-size: .74rem; }

  /* The form becomes a sheet that rises from the bottom, above the tab bar. */
  .b-filters { display: none; position: fixed; inset-inline: 0; bottom: 0; z-index: 131; margin: 0;
    grid-template-columns: 1fr 1fr; gap: 14px; max-height: 88vh; max-height: 88svh; overflow-y: auto;
    padding: 0 18px calc(18px + env(safe-area-inset-bottom)); border: 0; border-radius: 20px 20px 0 0;
    box-shadow: 0 -16px 48px rgba(16,20,24,.22); overscroll-behavior: contain; }
  .b-filters.is-open, .b-filters:target { display: grid; animation: b-sheet-up .22s cubic-bezier(.32,.72,0,1); }
  .b-filters__head { display: flex; align-items: center; justify-content: space-between; grid-column: 1 / -1;
    position: sticky; top: 0; z-index: 1; margin: 0 -18px; padding: 16px 18px 10px; background: var(--bg); }
  .b-filters__head strong { font-size: 1.05rem; }
  .b-filters__x { display: grid; place-items: center; width: 40px; height: 40px; margin: -8px -8px -8px 0; color: var(--ink); border-radius: 50%; }
  .b-filters__f { grid-column: 1 / -1; font-size: .86rem; }
  .b-filters__f--year { grid-column: auto; }
  .b-filters__go { position: sticky; bottom: calc(-18px - env(safe-area-inset-bottom)); margin: 4px -18px calc(-18px - env(safe-area-inset-bottom));
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--line);
    flex-direction: column-reverse; align-items: stretch; gap: .6rem; }
  .b-filters__go .btn { width: 100%; height: 52px; font-size: 1rem; }
  .b-filters__clear { text-align: center; padding: .3rem; }
  .b-sheet-scrim { position: fixed; inset: 0; z-index: 130; background: rgba(16,20,24,.32); animation: b-fade .2s ease; }
}
@keyframes b-sheet-up { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes b-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .b-filters.is-open, .b-filters:target, .b-sheet-scrim { animation: none; } }
.b-reach { margin: -.4rem 0 1rem; font-size: .92rem; color: var(--ink-2); }
.b-reach p { margin: 0; }
.p-msg { flex-basis: 100%; color: var(--ink-2); font-size: .9rem; }

/* Request form: where the buyer lives, and the prefectures.
   The "where do you live" question sits centred: two large cards side by side
   (stacked on a phone), each with a round icon, a soft green glow that wakes
   up on hover, and an arrow that turns green once the card is chosen. */
.q[data-step="location"] { align-items: center; text-align: center; }
.q[data-step="location"] .q-hint { margin-inline: auto; }
.q[data-step="location"] .q-h { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); }
.q[data-step="location"] .q-nav { justify-content: center; }
.q-tiles--where { grid-template-columns: 1fr; width: 100%; max-width: 560px; gap: 10px; margin-block-start: .4rem; }
@media (min-width: 640px) { .q-tiles--where { grid-template-columns: 1fr 1fr; gap: 14px; } }
.q-tile--where {
  min-height: 0; gap: .25rem; padding: 16px 18px; overflow: hidden; isolation: isolate;
  border-radius: var(--r-xl); border-color: var(--line);
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
  box-shadow: var(--shadow-sm);
  transition: border-color .2s ease, background-color .2s ease, transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s ease;
}
/* Phones: one slim row each, icon on the left. */
@media (max-width: 639px) {
  .q-tile--where { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; row-gap: 0; text-align: start; padding: 12px 40px 12px 14px; }
  .q-tile--where .q-where__badge { grid-row: 1 / 3; margin: 0; }
  .q-tile--where .q-tile__label, .q-tile--where .q-tile__sub { align-self: end; }
  .q-tile--where .q-tile__sub { align-self: start; }
  .q-tile--where:has(input:checked)::after { top: 50%; margin-top: -9px; }
}
@media (min-width: 640px) { .q-tile--where { padding: 20px 18px 18px; } }
/* The glow behind the icon. */
.q-tile--where::before {
  content: ""; position: absolute; z-index: -1; inset-inline: 0; top: -40%; height: 90%;
  background: radial-gradient(closest-side, rgba(34,197,94,.16), rgba(34,197,94,0));
  opacity: 0; transform: scale(.85); transition: opacity .3s ease, transform .4s cubic-bezier(.22, 1, .36, 1);
}
/* Hover: a small lift, NO extra shadow (Lay, 2026-11-02); the ring around the icon is the effect. */
.q-tile--where:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.q-tile--where:hover::before, .q-tile--where:has(input:checked)::before { opacity: 1; transform: none; }
.q-tile--where:has(input:checked) {
  background: linear-gradient(180deg, var(--bg) 0%, var(--green-tint) 100%);
  box-shadow: 0 0 0 3px var(--green-ring), var(--shadow-md);
}
/* The icon sits in a badge that also holds the green ring. The ring is an SVG circle
   whose stroke is "drawn" from the top, clockwise, until it closes (stroke-dashoffset
   100 -> 0, pathLength 100). Hover draws it; a chosen card keeps it full. */
.q-where__badge {
  position: relative; display: grid; place-items: center; flex: 0 0 auto; align-self: center;
  width: 42px; height: 42px; margin-block-end: .3rem;            /* exactly the icon: the ring centres on it */
}
@media (min-width: 640px) { .q-where__badge { width: 48px; height: 48px; margin-block-end: .4rem; } }
/* Centred on the badge whatever the layout. max-width:none beats the site-wide
   "svg { max-width: 100% }", which squeezed the ring and pushed it off centre. */
.q-where__ring {
  position: absolute; top: 50%; left: 50%; width: calc(100% + 14px); height: calc(100% + 14px);
  max-width: none; max-height: none; margin: 0;
  transform: translate(-50%, -50%) rotate(-90deg); pointer-events: none; overflow: visible;
}
.q-where__ring circle {
  fill: none; stroke: var(--green); stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 100;
  transition: stroke-dashoffset .7s cubic-bezier(.65, 0, .35, 1);
}
.q-tile--where:hover .q-where__ring circle,
.q-tile--where:has(input:checked) .q-where__ring circle { stroke-dashoffset: 0; }
.q-where__icon {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 42px; height: 42px; border-radius: 50%; overflow: hidden;
  background: var(--bg);
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px var(--line), 0 8px 20px rgba(16,20,24,.12);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .25s ease;
}
@media (min-width: 640px) { .q-where__icon { width: 48px; height: 48px; } }
.q-where__icon .q-flag { width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; opacity: 1; }
.q-where__icon--globe { background: linear-gradient(160deg, var(--green-tint), #dcfce7); color: var(--green-darker); }
.q-tile__globe { width: 58%; height: 58%; transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.q-tile--where:hover .q-tile__globe { transform: rotate(-18deg); }
.q-tile--where:has(input:checked) .q-where__icon { box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px var(--line), 0 8px 20px rgba(34,197,94,.25); }
.q-tile--where .q-tile__label { font-size: 1rem; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.q-tile__sub { font-size: .84rem; color: var(--ink-3); }
.q-tile--where .q-tile__sub { font-size: .85rem; }
.q-where__go {
  display: none; place-items: center; width: 32px; height: 32px; margin-block-start: .5rem; border-radius: 50%;
  background: var(--bg); color: var(--ink-2); border: 1px solid var(--line-strong);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .25s cubic-bezier(.22, 1, .36, 1);
}
@media (min-width: 640px) { .q-where__go { display: grid; } }
.q-tile--where:hover .q-where__go { transform: translateX(3px); border-color: var(--ink-3); color: var(--ink); }
.q-tile--where:has(input:checked) .q-where__go { background: var(--green); border-color: var(--green); color: var(--on-green); box-shadow: var(--shadow-green); }
@media (prefers-reduced-motion: reduce) {
  .q-tile--where, .q-tile--where::before, .q-where__icon, .q-tile__globe, .q-where__go, .q-where__ring circle { transition: none; }
  .q-tile--where:hover, .q-tile--where:hover .q-where__icon, .q-tile--where:hover .q-tile__globe, .q-tile--where:hover .q-where__go { transform: none; }
}
/* The eight regions of Japan: two rows of four (four rows of two on a phone). */
.q-tiles--jpregions { grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 640px) { .q-tiles--jpregions { grid-template-columns: repeat(4, 1fr); gap: 12px; } }
.q-tile--jpregion { min-height: 76px; padding: 12px 10px; gap: .2rem; }
.q-tile--jpregion .q-tile__label { font-size: .98rem; font-weight: 700; color: var(--ink); }
.q-tile--jpregion .q-tile__sub { font-size: .76rem; line-height: 1.3; }
@media (max-width: 639px) { .q-tile--jpregion .q-tile__sub { display: none; } .q-tile--jpregion { min-height: 56px; } }
/* Prefectures: a region holds 1 to 10, so the buttons are a centred group (auto-fit drops the
   empty columns, justify-content centres what is left), each label centred too.
   Same padding both sides so the text stays centred when the tick appears. */
.q-tiles--prefs { grid-template-columns: repeat(auto-fit, minmax(140px, 170px)); justify-content: center; gap: 8px; }
.q-tile--pref { min-height: 44px; justify-content: center; text-align: center; padding-inline: 30px; }
.q-city { margin: 18px auto 0; max-width: 420px; text-align: center; }
.q-city .q-input { text-align: center; }

/* Dealer profile: area, export countries, radios. */
.p-radios { display: grid; gap: .45rem; margin: .3rem 0 .6rem; }
.p-areas { display: grid; gap: .8rem; margin-top: .6rem; padding: 12px 14px; background: var(--bg-soft); border-radius: var(--r); }
.p-area__region { font-weight: 700; }
.p-area__prefs { display: grid; gap: 4px 12px; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); margin: .35rem 0 0; padding-inline-start: 1.6rem; }
.p-export__where { margin-top: .4rem; }
/* Only what the answers above make relevant (all shown where :has is not supported). */
.p-reach:has(input[name="coverage"][value="areas"]:not(:checked)) .p-areas { display: none; }
.p-export:has(input[name="exports"][value="yes"]:not(:checked)) .p-export__where { display: none; }
.p-form:has(input[name="exports"][value="yes"]:not(:checked)) .p-dest,
.p-form:has(input[name="export_all"][value="some"]:not(:checked)) .p-dest { display: none; }

/* Credit packs: Standard is the decoy, Pro is featured. */
.pk-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 1rem 0 1.6rem; align-items: stretch; }
.pk { position: relative; display: flex; flex-direction: column; gap: .35rem; padding: 22px 20px; transition: transform .2s ease, box-shadow .2s ease; }
.pk:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.pk--featured { border: 2px solid var(--green); box-shadow: var(--shadow-lg), 0 0 0 4px var(--green-ring); }
.pk__badge { position: absolute; top: -12px; inset-inline-start: 20px; padding: .2rem .7rem; border-radius: var(--r-pill);
  background: var(--green); color: var(--on-green); font-size: .78rem; font-weight: 700; box-shadow: var(--shadow-green); }
.pk__name { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--ink-2); }
.pk__price { margin: .2rem 0 0; }
.pk__price span { font-size: 2.2rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.pk--custom .pk__price span { font-size: 1.6rem; }
.pk__usd { margin: 0; color: var(--ink-3); font-size: .82rem; }   /* the yen price is the price; dollars are a guide */
.pk__credits { margin: 0; font-size: 1rem; }
.pk__unit { margin: 0; color: var(--ink-3); font-size: .86rem; }
.pk--featured .pk__unit { color: var(--green-darker); font-weight: 700; }
.pk__ticks { margin: .6rem 0 1rem; flex: 1; font-size: .9rem; }
.pk form { margin: 0; }
.pk-rules { margin-bottom: 1.6rem; }

/* Sign in with Google / Facebook. */
.oa-buttons { display: grid; gap: .55rem; margin: .4rem 0 1rem; }
.oa-btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; }
.oa-or { display: flex; align-items: center; gap: .8rem; margin: .4rem 0 0; color: var(--ink-3); font-size: .85rem; }
.oa-or::before, .oa-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---- Touch screens: feel like an app ----------------------------------------
   On a phone, :hover sticks to whatever was last tapped, so every card the
   thumb touched stayed lifted (and its big shadow kept being redrawn). Here a
   tap gives the iPhone feel instead: the card presses in while the finger is
   down and springs back. js/app.js adds an empty touchstart listener, without
   which iPhones never show :active at all. */
@media (hover: none) {
  .q-tile:hover, .q-tile--where:hover, .m-make:hover, a.m-card:hover, .b-card:hover, .m-crow:hover,
  .m-chip:hover, .q-crumb:hover, .q-suggest__yes:hover, .pk:hover,
  .q-tile--where:hover .q-where__icon, .q-tile--where:hover .q-tile__globe, .q-tile--where:hover .q-where__go { transform: none; }
  .q-tile, .m-make, a.m-card, .b-card, .m-crow, .m-chip, .q-chip, .q-crumb, .q-suggest__yes, .pk, .btn {
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
    transition-property: transform, border-color, background-color, box-shadow, color;
    transition-duration: .16s; transition-timing-function: cubic-bezier(.32, .72, 0, 1);
  }
  .q-tile:active, .m-make:active, a.m-card:active, .b-card:active, .m-crow:active, .pk:active { transform: scale(.97); }
  .m-chip:active, .q-chip:active, .q-crumb:active, .q-suggest__yes:active, .btn:active { transform: scale(.95); }
}

/* ---- paying a pack by card (/exporter/pay/) and the receipt ------------ */
.pay { max-width: none; margin-inline: 0; }
.pay__facts { margin: 1rem 0 1.2rem; }
.pay__form { display: grid; gap: .8rem; margin-top: 1rem; }
.pay__element { min-height: 120px; }
.pay__safe { display: flex; gap: .5rem; align-items: flex-start; margin-top: 1rem; }
.pay__safe svg { flex: none; margin-top: .2rem; color: var(--link, #15803d); }
.pay__cancel { margin-top: .8rem; }

.receipt { max-width: none; margin-inline: 0; }
.receipt__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.receipt__head small { font-size: .7em; font-weight: 400; color: var(--ink-3); margin-inline-start: .4rem; }
.receipt__meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .8rem; margin: 1.2rem 0; }
.receipt__meta dt { font-size: .8rem; color: var(--ink-3); }
.receipt__meta dd { margin: 0; font-weight: 600; }
.receipt__parties { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 1.2rem; }
.receipt__parties p { margin: .3rem 0 0; line-height: 1.6; }
.receipt__table { width: 100%; border-collapse: collapse; }
.receipt__table th, .receipt__table td { text-align: start; padding: .7rem .4rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.receipt__table th:last-child, .receipt__table td:last-child { text-align: end; white-space: nowrap; }
.receipt__table tfoot th { border-bottom: 0; font-size: 1.05rem; }
.receipt__table tfoot td { border-bottom: 0; color: var(--ink-3); font-size: .9rem; }

@media print {
  .site-header, .site-footer, .app-tabs, .p-side, .receipt__print, .receipt__back, .app-scrim { display: none !important; }
  .receipt { box-shadow: none; border: 0; margin: 0; max-width: none; }
}

/* "Frequent buyer": the same email sent several requests lately */
.b-pill--frequent { display: inline-flex; align-items: center; gap: .3rem; background: #f1f5f9; color: #334155; font-weight: 600; }

/* ---- /rate/: five big stars, one button --------------------------------- */
.rate { text-align: center; max-width: 460px; }
.rate__icon { width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: var(--on-green); }
.rate__form { display: grid; gap: .6rem; margin-top: 1.2rem; }
/* Radios in reverse order (5..1) + flex row-reverse: a star and every star
   "after" it in the markup (the lower ones) light up together. */
.rate__stars { display: flex; flex-direction: row-reverse; justify-content: center; gap: 6px; border: 0; padding: 0; margin: 0; }
.rate__stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rate__stars label { cursor: pointer; padding: 4px; -webkit-tap-highlight-color: transparent; }
.rate__stars svg { width: 48px; height: 48px; color: #e5e7eb; transition: fill .12s ease, transform .12s ease; }
.rate__stars input:checked ~ label svg { color: #f5b301; }
@media (hover: hover) {
  .rate__stars:hover label svg { color: #e5e7eb; }
  .rate__stars label:hover svg, .rate__stars label:hover ~ label svg { color: #f5b301; }
}
.rate__stars label:active svg { transform: scale(.9); }
.rate__stars input:focus-visible + label { outline: 2px solid var(--link, #15803d); outline-offset: 2px; border-radius: 8px; }
.rate__label { min-height: 1.4em; margin: 0; font-weight: 600; color: var(--ink-2); }
.rate__label span { display: none; }
.rate__stars:has(#star1:checked) ~ .rate__label [data-for="star1"],
.rate__stars:has(#star2:checked) ~ .rate__label [data-for="star2"],
.rate__stars:has(#star3:checked) ~ .rate__label [data-for="star3"],
.rate__stars:has(#star4:checked) ~ .rate__label [data-for="star4"],
.rate__stars:has(#star5:checked) ~ .rate__label [data-for="star5"] { display: inline; }
.p-stars { color: #f5b301; }
/* Payment page at full container width: summary | card form side by side. */
.pay__grid { display: grid; gap: clamp(20px, 3vw, 40px); }
@media (min-width: 860px) { .pay__grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.pay .m-h2 { margin-top: 0; }
@media (max-width: 999px) { .b-filters__f--where { display: none; } }   /* the bar above has it as one-tap chips */

/* ---- credit packs: once or every month ---------------------------------- */
.pk-switch { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 1rem; }
.pk-switch__save { margin-inline-start: .35rem; font-size: .78rem; font-weight: 700; color: var(--link, #15803d); }
.pk-switch .is-on .pk-switch__save { color: #86efac; }
.pk__price small { font-size: .95rem; font-weight: 600; color: var(--ink-3); }
.pk-plan { margin-bottom: 1.2rem; }
.pk-plan p { margin: .3rem 0 .8rem; }
.pk__has { text-align: center; }

/* Welcome credits: the free trial line (register, packs, dashboard) */
.p-welcome { margin: .8rem 0 1rem; padding: .8rem 1rem; border-radius: 12px; background: #ecfdf3; color: #14532d; font-size: .95rem; line-height: 1.55; }
.p-welcome a { color: #15803d; font-weight: 600; }

/* ---- buyers: one sign-in box, and My account ---------------------------- */
.b-auth { max-width: 460px; }
.b-auth__forgot { text-align: center; }
.b-auth__new { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); text-align: center; }
.b-auth__new p { margin: 0 0 .7rem; font-size: .95rem; }
.b-auth__more { text-align: center; margin-top: -.4rem; }
.b-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .8rem; }
.b-sec-head .m-h3 { margin: 0; }
.b-acct-grid { display: grid; gap: 16px; margin-top: 1.6rem; }
@media (min-width: 860px) { .b-acct-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.b-static { margin: .2rem 0; font-weight: 600; }