/* Loans LP design system.
   RTL Hebrew, mobile first, built for a very long page.

   Direction: calm, numerate, unhurried. The research found the licensed Israeli tier has already
   converged on a quiet register (no countdowns, no fake scarcity, no distress imagery), so visual
   restraint here is competitive, not just compliant. Nothing on this page should look like it is
   trying to rush anyone.

   Logical properties throughout (inline-start/end, not left/right) so the RTL flip is structural
   rather than a pile of overrides. */

:root {
  /* Ink on warm paper. Deliberately not the generic fintech blue-purple gradient. */
  --ink:        #0f1a2a;
  --ink-2:      #2c3a4d;
  --ink-3:      #5a6878;
  --paper:      #faf8f4;
  --paper-2:    #f2eee7;
  --line:       #e2dcd2;
  --white:      #ffffff;

  /* One confident accent. Green reads "go" without the lime-fintech cliche. */
  --accent:     #0d6b57;
  --accent-2:   #0a5546;
  --accent-soft:#e6f2ef;

  /* Clay carries the honesty moments: the total-cost warning, the risk line. Not red.
     Red would read as an error; this is not an error, it is the truth about a tradeoff. */
  --clay:       #a4521f;
  --clay-soft:  #fbf0e7;

  --radius:     14px;
  --radius-sm:  9px;
  --shadow:     0 1px 2px rgba(15,26,42,.05), 0 8px 24px -12px rgba(15,26,42,.14);
  --shadow-lg:  0 2px 4px rgba(15,26,42,.06), 0 20px 48px -20px rgba(15,26,42,.22);

  --container:  1120px;
  --gap:        clamp(1rem, 3vw, 1.75rem);
  --section-y:  clamp(3rem, 8vw, 6rem);

  /* Height of the sticky action bar, reserved so nothing hides behind it. */
  --bar-h:      68px;

  --font: 'Assistant', 'Rubik', 'Segoe UI', system-ui, -apple-system, 'Arial Hebrew', Arial, sans-serif;
}

/* ---------- reset ---------- */

*, *::before, *::after { box-sizing: border-box; }

/* The UA stylesheet's [hidden] rule is display:none at zero specificity, so ANY class that sets
   display (.delta is grid, .honesty is flex, .benefit-optin is grid) silently beats it and the
   element stays visible. This bit the consolidation delta block, which rendered "0 שינוי" in every
   calculator mode. Global and !important on purpose: hidden must mean hidden. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  /* Anchor jumps must not land under the sticky header. */
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  /* Room for the sticky bar on mobile. */
  padding-block-end: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px));
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

@media (min-width: 861px) {
  body { padding-block-end: 0; }
}

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.2; font-weight: 800; letter-spacing: -.015em; }
h1 { font-size: clamp(1.85rem, 5.6vw, 3.15rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2.3rem); }
h3 { font-size: clamp(1.15rem, 2.6vw, 1.45rem); }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent-2); text-underline-offset: 3px; }

img, svg { max-width: 100%; height: auto; display: block; }

/* Long page: let the browser skip offscreen work. Real measured win on a 31 section page. */
.section { content-visibility: auto; contain-intrinsic-size: auto 620px; }

/* ---------- layout ---------- */

.container { width: min(100% - 2rem, var(--container)); margin-inline: auto; }
.container-narrow { width: min(100% - 2rem, 760px); margin-inline: auto; }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2rem, 5vw, 3rem); }
.section--paper2 { background: var(--paper-2); }
.section--ink { background: var(--ink); color: var(--paper); }
.section--ink h2, .section--ink h3 { color: var(--white); }
.section--ink .lede { color: #b9c4d2; }

.lede { font-size: clamp(1.02rem, 2.2vw, 1.18rem); color: var(--ink-2); max-width: 62ch; }

.eyebrow {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--accent);
  margin-bottom: .6rem;
  display: block;
}
.section--ink .eyebrow { color: #6dd6b8; }

.grid { display: grid; gap: var(--gap); }
@media (min-width: 700px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.1rem, 2.6vw, 1.6rem);
}
.card--flat { background: transparent; border-color: transparent; padding-inline: 0; }
.section--ink .card { background: #17253a; border-color: #27384f; color: #d8e0ea; }

/* ---------- header ---------- */

.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250,248,244,.9);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 62px;
}
/* No company logo here on purpose: the hero belongs to the visitor's situation, not to a brand.
   See ARCHITECTURE.md "Identity placement". */
.header__mark { font-weight: 800; font-size: .95rem; color: var(--ink-2); }
.header__actions { display: flex; align-items: center; gap: .6rem; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.35rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font: inherit; font-weight: 700; font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, background-color .12s ease, border-color .12s ease;
  min-height: 48px; /* thumb target */
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-2); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink-3); }
.btn--wa { background: #1f9c53; color: #fff; }
.btn--wa:hover { background: #17803f; }
.btn--block { width: 100%; }
.btn--sm { padding: .55rem 1rem; font-size: .92rem; min-height: 40px; }

/* ---------- sticky action bar (Layer A: the always-available path) ---------- */

.actionbar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 60;
  background: var(--white);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px -12px rgba(15,26,42,.25);
  padding: .55rem .75rem calc(.55rem + env(safe-area-inset-bottom, 0px));
}
.actionbar__inner { display: flex; gap: .5rem; align-items: center; max-width: var(--container); margin-inline: auto; }
.actionbar .btn { flex: 1; padding-inline: .6rem; font-size: .95rem; }
@media (min-width: 861px) {
  .actionbar { inset-inline: auto; inset-inline-end: 1.25rem; bottom: 1.25rem;
               border: 1px solid var(--line); border-radius: 999px; padding: .5rem;
               box-shadow: var(--shadow-lg); }
  .actionbar__inner { gap: .4rem; }
  .actionbar .btn { flex: none; }
}

/* ---------- hero ---------- */

.hero {
  background:
    radial-gradient(900px 420px at 85% -10%, #e8f1ee 0%, rgba(232,241,238,0) 60%),
    var(--paper);
  padding-block: clamp(2rem, 6vw, 4rem) clamp(2.5rem, 6vw, 4rem);
  border-bottom: 1px solid var(--line);
}
.hero__grid { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); align-items: start; }
@media (min-width: 940px) {
  .hero__grid { grid-template-columns: 1fr 1fr; gap: 3rem; }
}
.hero h1 { margin-bottom: .35em; }
.hero__sub { font-size: clamp(1.05rem, 2.4vw, 1.25rem); color: var(--ink-2); max-width: 34ch; }

/* Micro-trust strip: answers the two live objections before scroll friction forms. */
.trustrip { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.trustrip__item {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 999px; padding: .4rem .8rem;
  font-size: .87rem; font-weight: 600; color: var(--ink-2);
}
.trustrip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }

/* ---------- calculator ---------- */

.calc {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.calc__modes {
  display: flex; gap: .25rem; padding: .5rem;
  background: var(--paper-2); border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: thin;
}
/* Seven modes will not sit on one line anywhere. Scroll on a phone, wrap once there is room,
   so a desktop visitor can see every option without discovering a horizontal scrollbar. */
@media (min-width: 940px) {
  .calc__modes { flex-wrap: wrap; overflow-x: visible; }
}
.calc__mode {
  flex: none;
  border: 1px solid transparent; background: transparent;
  border-radius: 999px; padding: .5rem .85rem;
  font: inherit; font-size: .89rem; font-weight: 700; color: var(--ink-3);
  cursor: pointer; white-space: nowrap;
}
.calc__mode[aria-selected="true"] { background: var(--white); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow); }
.calc__body { padding: clamp(1rem, 3vw, 1.5rem); }

.field { margin-bottom: 1.1rem; }
.field__row { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-bottom: .45rem; }
.field__label { font-weight: 700; font-size: .95rem; }
.field__hint { font-size: .82rem; color: var(--ink-3); }

/* Typed override next to the slider: research flagged slider-only as a real UX gap. */
.field__value {
  display: inline-flex; align-items: baseline; gap: .2rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .25rem .5rem; background: var(--paper);
}
.field__value input {
  font: inherit; font-weight: 800; font-size: 1.05rem;
  border: 0; background: transparent; color: var(--ink);
  width: 6.5ch; text-align: center; padding: 0;
  -moz-appearance: textfield;
}
.field__value input::-webkit-outer-spin-button,
.field__value input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.field__value input:focus { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.field__unit { font-size: .9rem; color: var(--ink-3); font-weight: 700; }

input[type="range"] {
  width: 100%; height: 34px; background: transparent; -webkit-appearance: none; appearance: none; margin: 0;
}
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--line); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--line); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 28px; height: 28px; margin-top: -12px;
  border-radius: 50%; background: var(--accent); border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(13,107,87,.4); cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; background: var(--accent);
  border: 3px solid #fff; box-shadow: 0 2px 8px rgba(13,107,87,.4); cursor: pointer;
}
input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 999px; }

.seg { display: flex; gap: .35rem; flex-wrap: wrap; }
.seg button {
  flex: 1 1 auto; min-width: max-content;
  border: 1px solid var(--line); background: var(--white);
  border-radius: var(--radius-sm); padding: .55rem .7rem;
  font: inherit; font-size: .88rem; font-weight: 700; color: var(--ink-2); cursor: pointer;
}
.seg button[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-2); }

/* The result. The monthly number is the largest thing on the page for a reason. */
.result {
  background: var(--ink); color: var(--white);
  border-radius: var(--radius); padding: clamp(1rem, 3vw, 1.4rem);
  margin-top: 1.25rem;
}
.result__main { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.result__label { font-size: .9rem; color: #a9b6c6; font-weight: 600; }
.result__number { font-size: clamp(2rem, 7vw, 2.9rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.result__number small { font-size: .42em; font-weight: 700; color: #a9b6c6; }
.result__breakdown {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem;
  margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #2b3b52;
}
.result__cell dt { font-size: .8rem; color: #a9b6c6; margin-bottom: .15rem; }
.result__cell dd { margin: 0; font-size: 1.12rem; font-weight: 800; }

/* Consolidation: the monthly delta may NEVER render without the total-cost delta.
   This pairing is the campaign's differentiator (synthesis ruling 2.3). */
.delta { display: grid; gap: .6rem; grid-template-columns: 1fr 1fr; }
.delta__cell { background: #17253a; border: 1px solid #2b3b52; border-radius: var(--radius-sm); padding: .7rem .8rem; }
.delta__cell dt { font-size: .78rem; color: #a9b6c6; }
.delta__cell dd { margin: .15rem 0 0; font-size: 1.2rem; font-weight: 800; }
.delta--good dd { color: #6dd6b8; }
.delta--bad  dd { color: #f0a875; }

.honesty {
  display: flex; gap: .6rem; align-items: flex-start;
  background: var(--clay-soft); border: 1px solid #f0dcc9;
  border-radius: var(--radius-sm); padding: .8rem .9rem;
  margin-top: .9rem; font-size: .92rem; color: #6b3512; line-height: 1.5;
}
.honesty strong { color: var(--clay); }

.calc__note { font-size: .82rem; color: var(--ink-3); margin-top: .9rem; line-height: 1.5; }

/* Repeatable loan rows for consolidation mode. */
.loanrows { display: grid; gap: .6rem; }
.loanrow { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: .4rem; align-items: end; }
.loanrow label { font-size: .74rem; color: var(--ink-3); font-weight: 700; display: block; margin-bottom: .2rem; }
.loanrow input {
  font: inherit; font-size: .95rem; width: 100%;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .5rem .55rem; background: var(--white); color: var(--ink);
  -moz-appearance: textfield;
}
.loanrow input::-webkit-outer-spin-button,
.loanrow input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.loanrow__del {
  border: 1px solid var(--line); background: var(--white); color: var(--ink-3);
  border-radius: var(--radius-sm); width: 38px; height: 38px; font-size: 1.1rem;
  cursor: pointer; line-height: 1;
}
.loanrow__del:hover { border-color: var(--clay); color: var(--clay); }

/* ---------- lead form ---------- */

/* Two fields only, placed after the free result. Never ת"ז, anywhere in this funnel. */
.leadform { display: grid; gap: .7rem; }
.leadform__fields { display: grid; gap: .6rem; }
@media (min-width: 560px) { .leadform__fields { grid-template-columns: 1fr 1fr; } }

.input {
  font: inherit; font-size: 1rem; width: 100%;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .85rem .9rem; background: var(--white); color: var(--ink);
  min-height: 50px;
}
.input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.input[aria-invalid="true"] { border-color: var(--clay); background: var(--clay-soft); }

.consent { display: grid; gap: .5rem; margin-top: .2rem; }
.consent label { display: flex; gap: .55rem; align-items: flex-start; font-size: .84rem; color: var(--ink-2); line-height: 1.45; cursor: pointer; }
.consent input[type="checkbox"] { margin-top: .25rem; width: 19px; height: 19px; flex: none; accent-color: var(--accent); }

.benefit-optin {
  border: 1px dashed var(--line); border-radius: var(--radius-sm);
  padding: .7rem .8rem; background: var(--paper); display: grid; gap: .5rem;
}
.benefit-optin > p { font-size: .84rem; font-weight: 700; margin: 0; color: var(--ink-2); }

.formerror { font-size: .86rem; color: var(--clay); font-weight: 700; }
.formnote { font-size: .78rem; color: var(--ink-3); line-height: 1.5; }

/* ---------- identity band (the one legitimate brand-like element) ---------- */

.identity {
  display: grid; gap: 1rem; align-items: center;
  grid-template-columns: auto 1fr;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem;
}
.identity__photo {
  width: 76px; height: 76px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--paper-2); background: var(--paper-2); flex: none;
}
.identity__name { font-weight: 800; font-size: 1.05rem; }
.identity__title { font-size: .88rem; color: var(--ink-3); }
.identity__license { font-size: .8rem; color: var(--ink-3); margin-top: .2rem; }
.identity__logo { max-height: 34px; width: auto; margin-top: .5rem; opacity: .9; }
.identity[hidden] { display: none; }

/* ---------- audience self-select ---------- */

.picker { display: grid; gap: .7rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 860px) { .picker { grid-template-columns: repeat(4, 1fr); } }
.picker__card {
  display: block; text-decoration: none; color: inherit;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem; transition: border-color .12s ease, transform .12s ease;
}
.picker__card:hover { border-color: var(--accent); transform: translateY(-2px); }
.picker__icon { font-size: 1.5rem; line-height: 1; margin-bottom: .5rem; }
.picker__title { font-weight: 800; margin-bottom: .2rem; }
.picker__sub { font-size: .86rem; color: var(--ink-3); }

/* ---------- audience sections ---------- */

.audience { border-inline-start: 4px solid var(--accent); padding-inline-start: clamp(.9rem, 2.5vw, 1.5rem); }
.audience__list { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; gap: .5rem; }
.audience__list li { display: flex; gap: .55rem; align-items: flex-start; font-size: .98rem; }
.audience__list li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-top: .6em; flex: none; }

/* Inline mini form repeated between sections. */
.miniform {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(.9rem, 2.5vw, 1.25rem);
}
.miniform__title { font-weight: 800; margin-bottom: .6rem; font-size: 1.02rem; }

/* ---------- comparison table ---------- */

.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: .94rem; }
th, td { padding: .8rem .9rem; text-align: start; border-bottom: 1px solid var(--line); }
thead th { background: var(--paper-2); font-size: .85rem; font-weight: 800; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
td strong { font-weight: 800; }
.cell-good { color: var(--accent-2); font-weight: 800; }
.cell-bad  { color: var(--clay); font-weight: 800; }

/* ---------- steps ---------- */

.steps { counter-reset: step; display: grid; gap: 1rem; }
@media (min-width: 800px) { .steps--3 { grid-template-columns: repeat(3, 1fr); } }
.step { position: relative; padding-inline-start: 3rem; }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; inset-inline-start: 0; top: 0;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: .95rem;
}
.step h3 { font-size: 1.05rem; margin-bottom: .25em; }
.step p { font-size: .93rem; color: var(--ink-2); margin: 0; }
.section--ink .step p { color: #b9c4d2; }

/* ---------- FAQ ---------- */

.faq { display: grid; gap: .55rem; }
.faq details {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .9rem 1rem;
}
.faq details[open] { border-color: var(--accent); }
.faq summary {
  cursor: pointer; font-weight: 700; font-size: 1rem; list-style: none;
  display: flex; justify-content: space-between; gap: 1rem; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.35rem; font-weight: 400; color: var(--accent); line-height: 1; flex: none; }
.faq details[open] summary::after { content: "\2212"; }
.faq details > div { margin-top: .7rem; font-size: .95rem; color: var(--ink-2); line-height: 1.6; }

/* ---------- proof ---------- */

.quote { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem; }
.quote blockquote { margin: 0 0 .7rem; font-size: 1rem; line-height: 1.6; }
.quote figcaption { font-size: .85rem; color: var(--ink-3); font-weight: 700; }

.statband { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 800px) { .statband { grid-template-columns: repeat(4, 1fr); } }
.stat__num { font-size: clamp(1.5rem, 4.5vw, 2.1rem); font-weight: 800; letter-spacing: -.02em; }
/* Static-rendered, never animated. The research found two live competitor pages showing a literal
   unrendered "0" where an animated counter should have been. */
.stat__label { font-size: .85rem; color: var(--ink-3); line-height: 1.45; }
.section--ink .stat__label { color: #a9b6c6; }
.stat__src { font-size: .72rem; color: var(--ink-3); opacity: .85; margin-top: .3rem; }

/* ---------- legal ---------- */

.legal {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 1rem;
  font-size: .85rem; color: var(--ink-2); line-height: 1.6;
}
.legal strong { color: var(--ink); }

/* The statutory warning. Readable size on purpose: the research flagged the category's
   wall-of-tiny-text pattern as worth testing against, given documented distrust of fine print. */
.warning-statutory {
  background: var(--clay-soft); border: 1px solid #f0dcc9; border-radius: var(--radius-sm);
  padding: .9rem 1rem; font-size: .92rem; color: #6b3512; font-weight: 600; line-height: 1.55;
}

.footer { background: var(--ink); color: #b9c4d2; padding-block: clamp(2.5rem, 6vw, 4rem); font-size: .88rem; }
.footer h4 { color: var(--white); font-size: .95rem; margin-bottom: .6rem; }
.footer a { color: #9fd8c8; }
.footer__grid { display: grid; gap: 1.75rem; }
@media (min-width: 760px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer__bottom { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid #2b3b52; font-size: .8rem; color: #8595a8; }

/* ---------- utilities ---------- */

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skiplink {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: #fff; padding: .7rem 1.1rem; border-radius: 0 0 var(--radius-sm) 0;
}
.skiplink:focus { inset-inline-start: 0; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.stack > * + * { margin-top: 1rem; }
.mt-lg { margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.center { text-align: center; }
.muted { color: var(--ink-3); }
.nowrap { white-space: nowrap; }

/* Numbers stay LTR inside RTL text so "1,886.80" never reorders. */
.num { unicode-bidi: isolate; direction: ltr; display: inline-block; }