/* ══ THE FRONT PAGE AS A DATA CENTRE ══════════════════════════════════════
   The homepage mockup the owner approved (08/11/2026; partials/front.php). The homepage since 09/11/2026.
   Tokens only, logical properties only. The figures are the largest type on the page and nothing moves by itself:
   «live» is a date and a source, not an animation. Desktop first, as the owner asked; a narrow screen stacks.
   ════════════════════════════════════════════════════════════════════════ */

/* ── The first screen ── */
.v2-hero.is-front .v2-front-hero { display: grid; gap: var(--s-8); align-items: start; padding-block: var(--s-10) var(--s-8); }
.v2-front-intro { display: grid; gap: var(--s-3); min-inline-size: 0; }
.v2-front-kicker { margin: 0; color: var(--accent); font-weight: 600; font-size: var(--t-sm); }
.v2-front-verdict {
  margin: 0; color: var(--ink); font-size: var(--t-3xl); line-height: 1.4; font-weight: 700; text-wrap: balance;
}
.v2-front-sub { margin: 0; color: var(--ink-body); font-size: var(--t-md); }
.v2-front-search {
  margin-block-start: var(--s-3); background: var(--surface-card); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); padding: var(--s-2); display: grid; gap: var(--s-1);
}
.v2-front-search .v2-askbar { margin: 0; }
.v2-front-search .v2-answer:empty { display: none; }
.v2-front-tabs { display: flex; flex-wrap: wrap; gap: var(--s-1); padding: var(--s-1); }
.v2-front-tabs a {
  min-block-size: 40px; display: inline-flex; align-items: center; padding-inline: var(--s-4); border-radius: var(--radius);
  font-weight: 600; font-size: var(--t-sm); color: var(--ink-dim);
}
.v2-front-tabs a:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.v2-front-tabs a.is-data { margin-inline-start: auto; color: var(--accent); border: 1px dashed color-mix(in srgb, var(--accent) 40%, transparent); }

.v2-front-aimark {
  display: inline-flex; align-items: center; justify-content: center; min-inline-size: 30px; block-size: 22px; padding-inline: 7px;
  border-radius: var(--radius-pill); background: var(--surface-deep); color: var(--live); font: 700 11.5px/1 var(--font-ui);
  letter-spacing: .04em; direction: ltr;
}
.v2-front-ai {
  margin-block-start: var(--s-2); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3); align-items: start;
  padding: var(--s-4); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
}
.v2-front-ai p { margin: 0; color: var(--ink); font-size: var(--t-base); line-height: 1.6; }
.v2-front-ai .v2-front-ai-meta { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); margin-block-start: var(--s-2); font-size: var(--t-sm); color: var(--ink-dim); }
.v2-front-ai-meta a { font-weight: 600; min-block-size: 24px; display: inline-flex; align-items: center; }

.v2-front-tiles { display: grid; gap: var(--s-3); min-inline-size: 0; }
.v2-front-tile {
  background: var(--surface-card); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: var(--s-5) var(--s-6);
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-1) var(--s-5); align-items: baseline;
}
.v2-front-tile b { font-variant-numeric: lining-nums tabular-nums; grid-row: span 2; font: 700 clamp(40px, 4vw, 54px)/1 var(--font-display); color: var(--ink); min-inline-size: 3ch; }
.v2-front-tile span { font-size: var(--t-md); font-weight: 600; color: var(--ink); }
.v2-front-tile small { font-size: var(--t-sm); color: var(--ink-dim); }
.v2-front-tiles-foot { margin: 0; display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); font-size: var(--t-xs); color: var(--ink-dim); padding-inline: var(--s-1); }
.v2-front-tiles-foot a { font-weight: 600; min-block-size: 24px; display: inline-flex; align-items: center; }

/* ── The bands below ── */
.v2-front-band { padding-block: var(--s-10); }
.v2-front-band.is-warm { background: var(--surface-warm); border-block: 1px solid var(--rule-faint); }
.v2-front-band .v2-sec-head { margin-block-end: var(--s-5); }

/* Where the requests are. */
.v2-front-demand { display: grid; gap: var(--s-6); align-items: start; }
.v2-front-table { inline-size: 100%; border-collapse: collapse; background: var(--surface-card); border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; }
.v2-front-table th, .v2-front-table td { padding: var(--s-3) var(--s-4); text-align: start; border-block-end: 1px solid var(--rule-faint); font-size: var(--t-base); }
.v2-front-table thead th { font-size: var(--t-sm); color: var(--ink-dim); font-weight: 600; background: var(--surface-warm); }
.v2-front-table thead th[aria-sort] { color: var(--accent); }
.v2-front-table tbody th { font-weight: 600; }
.v2-front-table tbody th a { color: var(--ink); }
.v2-front-table .n { text-align: end; inline-size: 7.5rem; white-space: nowrap; }
.v2-front-table td.n { font-family: var(--font-display); font-weight: 600; font-size: var(--t-md); color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.v2-front-table td.is-zero { color: var(--ink-dim); }
.v2-front-bar { display: inline-block; block-size: 6px; border-radius: var(--radius-pill); background: var(--accent); vertical-align: middle; margin-inline-start: var(--s-2); }
.v2-front-explain { background: var(--surface-card); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: var(--s-5) var(--s-6); display: grid; gap: var(--s-3); font-size: var(--t-base); }
.v2-front-explain h3 { margin: 0; font-size: var(--t-md); color: var(--ink); }
.v2-front-explain dl { margin: 0; display: grid; gap: var(--s-2); }
.v2-front-explain dt { font-weight: 600; color: var(--ink); }
.v2-front-explain dd { margin: 0; color: var(--ink-body); }
.v2-front-explain a { font-weight: 600; }

/* The month's report and its chart. */
.v2-front-report { background: var(--surface-card); border: 1px solid var(--rule); border-radius: var(--radius-lg); display: grid; overflow: hidden; }
.v2-front-report-txt { padding: var(--s-6) var(--s-8); display: grid; gap: var(--s-3); align-content: start; }
.v2-front-report-txt .when { font-size: var(--t-sm); color: var(--accent); font-weight: 600; }
.v2-front-report-txt h3 { margin: 0; font-size: var(--t-xl); line-height: 1.45; color: var(--ink); text-wrap: balance; }
.v2-front-report-txt ul { margin: 0; padding-inline-start: var(--s-5); display: grid; gap: var(--s-2); font-size: var(--t-base); color: var(--ink-body); }
.v2-front-report-fig { margin: 0; padding: var(--s-6) var(--s-6); display: grid; gap: var(--s-2); border-block-start: 1px solid var(--rule-faint); }
.v2-front-report-fig figcaption { font-weight: 600; color: var(--ink); font-size: var(--t-md); }
.v2-front-report-fig small { font-size: var(--t-xs); color: var(--ink-dim); }
.v2-front-chart { inline-size: 100%; block-size: auto; }
.v2-front-chart .grid line { stroke: var(--rule); stroke-width: 1; }
.v2-front-chart text { fill: var(--ink-dim); font-size: 12px; font-family: var(--font-ar); }
.v2-front-chart polyline { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.v2-front-chart polyline.is-requests { stroke: var(--accent); stroke-width: 3; }
.v2-front-chart polyline.is-listings { stroke: var(--ink-dim); stroke-width: 2.5; stroke-dasharray: 7 6; }
.v2-front-chart circle.is-requests { fill: var(--accent); }
.v2-front-chart circle.is-listings { fill: var(--ink-dim); }
.v2-front-chart text.lbl { font-size: 13px; font-weight: 600; }
.v2-front-chart text.lbl.is-requests { fill: var(--accent); }
.v2-front-chart text.lbl.is-listings { fill: var(--ink-dim); }
.v2-front-acts { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* How we answer you. */
.v2-front-service { display: grid; gap: var(--s-8); align-items: start; }
.v2-front-lede { font-size: var(--t-lg); color: var(--ink); margin: var(--s-2) 0 var(--s-5); line-height: 1.5; }
.v2-front-facts { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-3); }
.v2-front-facts li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--s-3); font-size: var(--t-base); color: var(--ink); }
.v2-front-facts li::before {
  content: ""; inline-size: 16px; block-size: 16px; border-radius: 50%; margin-block-start: 4px;
  box-shadow: inset 0 0 0 4px var(--surface-warm), inset 0 0 0 8px var(--accent);
}
.v2-front-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); margin-block-start: var(--s-6); }
.v2-front-figs > div { background: var(--surface-card); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: var(--s-4) var(--s-5); display: grid; gap: var(--s-1); }
.v2-front-figs b { font: 700 34px/1 var(--font-display); color: var(--ink); }
.v2-front-figs span { font-size: var(--t-sm); color: var(--ink-body); line-height: 1.45; }
.v2-front-figs-foot { font-size: var(--t-xs); color: var(--ink-dim); margin: var(--s-2) 0 var(--s-5); }
.v2-front-chat { margin: 0; background: var(--surface-card); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; }
.v2-front-chat figcaption { display: flex; gap: var(--s-2); align-items: center; padding: var(--s-3) var(--s-4); background: var(--surface-deep); color: var(--accent-on); font-weight: 600; font-size: var(--t-base); }
.v2-front-chat figcaption small { margin-inline-start: auto; font-weight: 400; color: var(--ink-faint); }
.v2-front-chat-body { padding: var(--s-5) var(--s-4); display: grid; gap: var(--s-3); background: color-mix(in srgb, var(--accent) 4%, var(--surface-card)); }
.v2-front-chat-body p { margin: 0; max-inline-size: 84%; padding: var(--s-3) var(--s-3); border-radius: 12px; font-size: var(--t-base); line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; }
.v2-front-chat-body .is-client { justify-self: start; background: var(--surface-card); border: 1px solid var(--rule); }
.v2-front-chat-body .is-ai { justify-self: end; background: color-mix(in srgb, var(--accent) 13%, var(--surface-card)); }
.v2-front-chat-body .who { display: block; font-size: var(--t-xs); color: var(--ink-dim); margin-block-end: var(--s-1); }
.v2-front-chat > small { display: block; padding: var(--s-3) var(--s-4); font-size: var(--t-xs); color: var(--ink-dim); border-block-start: 1px solid var(--rule-faint); }

/* Listing with us. */
.v2-front-sell {
  background: var(--surface-deep); color: color-mix(in srgb, var(--accent-on) 82%, var(--surface-deep)); border-radius: var(--radius-lg);
  padding: var(--s-8) var(--s-10); display: grid; gap: var(--s-8); align-items: center;
}
.v2-front-sell h2 { color: var(--accent-on); margin: 0; }
.v2-front-sell p { margin: var(--s-3) 0 var(--s-5); font-size: var(--t-md); }
.v2-front-sell .v2-btn.is-line { color: var(--accent-on); border-color: color-mix(in srgb, var(--accent-on) 30%, transparent); background: transparent; }
.v2-front-sell-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.v2-front-sell-figs > div { border: 1px solid color-mix(in srgb, var(--accent-on) 18%, transparent); border-radius: var(--radius-lg); padding: var(--s-4); }
.v2-front-sell-figs b { display: block; font: 700 36px/1 var(--font-display); color: var(--live); }
.v2-front-sell-figs span { font-size: var(--t-sm); }

/* The office. */
.v2-front-office { margin: 0; display: grid; gap: var(--s-3); background: var(--surface-card); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: var(--s-5) var(--s-6); }
.v2-front-office div { display: grid; gap: 2px; }
.v2-front-office dt { font-size: var(--t-sm); color: var(--ink-dim); }
.v2-front-office dd { margin: 0; color: var(--ink); font-size: var(--t-base); }
.v2-front-office a { font-weight: 600; }

/* ── Desktop: two columns where the mockup has two ── */
@media (min-width: 1024px) {
  .v2-hero.is-front .v2-front-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--s-12); padding-block: var(--s-12) var(--s-10); }
  .v2-front-demand { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--s-8); }
  .v2-front-report { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
  .v2-front-report-fig { border-block-start: 0; border-inline-start: 1px solid var(--rule-faint); }
  .v2-front-service.has-chat { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s-10); }
  .v2-front-service:not(.has-chat) > div { max-inline-size: 760px; }
  .v2-front-sell { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--s-10); }
  .v2-front-office { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── The market page and «how we count» ── */
.v2-market-head h1, .v2-count-page h1 { margin: 0 0 var(--s-2); color: var(--ink); font-size: var(--t-3xl); line-height: 1.3; text-wrap: balance; }
.v2-market-head .v2-sec-note a { font-weight: 600; margin-inline-start: var(--s-2); }
.v2-market-top { display: grid; gap: var(--s-6); align-items: start; padding-block-end: var(--s-8); }
.v2-count-page { max-inline-size: 72ch; display: grid; gap: var(--s-6); }
.v2-count-page section { display: grid; gap: var(--s-2); }
.v2-count-page h2 { margin: 0; font-size: var(--t-lg); color: var(--ink); }
.v2-count-page p, .v2-count-page li { margin: 0; color: var(--ink-body); font-size: var(--t-md); line-height: 1.7; }
.v2-count-page ul { margin: 0; padding-inline-start: var(--s-5); display: grid; gap: var(--s-2); }
@media (min-width: 1024px) {
  .v2-market-top { grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: var(--s-8); }
}

/* ── A thumb's size where the pointer is a finger (UI/UX Pro Max «touch-target-size»; the 06/11 phone pass) ── */
@media (pointer: coarse) {
  .v2-front-tabs a, .v2-front-ai-meta a, .v2-front-tiles-foot a, .v2-front-explain a, .v2-front-office a,
  .v2-front-table tbody th a, .v2-market-head .v2-sec-note a, .v2-front-band .v2-sec-more { min-block-size: 44px; display: inline-flex; align-items: center; }
}

/* ── Under 1024px: one column, and the three counts straight after the sentence they prove ──
   The intro's parts and the tiles become one ordered list, so a phone's first screen reads: the sentence, its two
   numbers, the three counts, then the search and the assistant. */
@media (max-width: 1023px) {
  .v2-hero.is-front .v2-front-hero { padding-block: var(--s-6) var(--s-5); gap: var(--s-4); }
  .v2-front-intro { display: contents; }
  .v2-front-kicker { order: 1; }
  .v2-front-verdict { order: 2; }
  .v2-front-sub { order: 3; }
  .v2-front-tiles { order: 4; }
  .v2-front-search { order: 5; margin-block-start: 0; }
  .v2-front-ai { order: 6; margin-block-start: 0; }
  .v2-front-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
  .v2-front-tile { grid-template-columns: 1fr; padding: var(--s-3); gap: var(--s-1); align-content: start; }
  .v2-front-tile b { grid-row: auto; font-size: clamp(26px, 7.5vw, 40px); min-inline-size: 0; }
  .v2-front-tile span { font-size: var(--t-sm); line-height: 1.35; }
  .v2-front-tile small { font-size: var(--t-xs); line-height: 1.35; }
  .v2-front-tiles-foot { grid-column: 1 / -1; }
  .v2-front-band { padding-block: var(--s-8); }
  .v2-front-report-txt { padding: var(--s-5); }
  .v2-front-report-fig { padding: var(--s-4); }
  .v2-front-sell { padding: var(--s-6) var(--s-5); gap: var(--s-5); }
  .v2-front-figs { gap: var(--s-2); }
  .v2-front-figs > div { padding: var(--s-3); }
  .v2-front-figs b { font-size: 28px; }
}

/* ── A narrow screen: the table keeps every column without widening the page; the chart's words stay readable ── */
.v2-front-table-wrap { overflow-x: auto; min-inline-size: 0; }
@media (max-width: 640px) {
  .v2-front-table th, .v2-front-table td { padding: var(--s-2) var(--s-2); font-size: var(--t-sm); }
  .v2-front-table .n { inline-size: auto; white-space: normal; }
  .v2-front-table thead th { line-height: 1.3; }
  .v2-front-table td.n { font-size: var(--t-base); }
  .v2-front-bar { display: none; }
  /* The SVG is drawn 640 wide and shrinks to the screen: its words are set larger here so they print near 11px, and
     only the first and last month are named so they never collide. */
  .v2-front-chart text { font-size: 20px; }
  .v2-front-chart text.lbl { font-size: 17px; }
  .v2-front-chart .months text:not(:first-child):not(:last-child) { display: none; }
  .v2-front-chat-body p { max-inline-size: 92%; }
}