/* Self-hosted faces, latin + latin-ext only; nothing is requested from Google at
   runtime. Lexend sets the headings, Atkinson Hyperlegible the reading text: it was
   drawn by the Braille Institute for low-vision readers, which suits an audience of
   disability-support recipients. No italic is loaded: the delivered copy has none.
   font-display: optional — the two latin files are preloaded and small, so they are
   nearly always there for the first paint; when they are not, the page keeps the
   metric-matched Arial below instead of re-breaking the H1 mid-read (no font CLS).
   A metric match alone still re-wrapped 5 of 42 page/width pairs by one line. */
@font-face {
  font-family: "Lexend";
  font-style: normal;
  font-weight: 500 700;
  font-display: optional;
  src: url("../fonts/lexend-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lexend";
  font-style: normal;
  font-weight: 500 700;
  font-display: optional;
  src: url("../fonts/lexend-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url("../fonts/atkinson-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url("../fonts/atkinson-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url("../fonts/atkinson-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url("../fonts/atkinson-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Metric-matched fallbacks keep line breaks in the H1 and the lede the same before
   and after the web font arrives (CLS). Measured in Chrome on 28.09.2026 over the
   real H1s and ledes of all six pages: width in the web face against Arial of the
   same weight (size-adjust), and the web face's ascent and descent divided by that
   ratio. Bold headings get Arial Bold: a synthesised bold would not match. */
@font-face {
  font-family: "Lexend Fallback";
  font-weight: 400 500;
  src: local("Arial");
  size-adjust: 106.16%;
  ascent-override: 94.2%;
  descent-override: 23.5%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Lexend Fallback";
  font-weight: 600 700;
  src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 106.71%;
  ascent-override: 93.7%;
  descent-override: 23.4%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Atkinson Fallback";
  font-weight: 400;
  src: local("Arial");
  size-adjust: 98.8%;
  ascent-override: 96.1%;
  descent-override: 29.4%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Atkinson Fallback";
  font-weight: 700;
  src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 98.8%;
  ascent-override: 96.1%;
  descent-override: 29.4%;
  line-gap-override: 0%;
}

/* odsp-payday-loans.ca — written for this site only.
   Palette from the logo pack: a deep night blue (the dark master's own backdrop,
   lifted a step so the mark reads), the leaf greens, the sky blue of the figure
   and the sun amber of the last petal. Amber and light green fail on white
   (1.8:1 and 2.5:1), so they only ever carry dark text or sit behind nothing. */

:root {
  --night-900: #0B1E33;
  --night-800: #1E4066;
  --on-night: #EAF1F8;
  --on-night-dim: #B9C7D6;
  --sky-600: #0F5789;
  --sky-700: #0A4270;
  --sky-300: #8CCBF3;
  --leaf-700: #2A6A2E;
  --leaf-500: #5FA339;
  --leaf-100: #E4F1DC;
  --sun-400: #FDB329;
  --sun-500: #F59E1B;
  --ember-700: #A8430F;
  --ember-100: #FCEADB;
  --paper: #FFFFFF;
  --mist: #F3F7F1;
  --sand: #FFF6E3;
  --ink: #13202F;
  --prose: #2F3C4B;
  --quiet: #566478;
  --line: #D3DDCD;
  --line-soft: #E4EBE0;

  --face-head: "Lexend", "Lexend Fallback", "Segoe UI", system-ui, sans-serif;
  --face-body: "Atkinson Hyperlegible", "Atkinson Fallback", "Segoe UI", system-ui, sans-serif;
  --round: 0.875rem;
  --round-sm: 0.5rem;
  --lift: 0 1px 2px rgba(11, 30, 51, 0.06), 0 10px 28px rgba(11, 30, 51, 0.10);
  --bar-h: 4.25rem;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--bar-h) + 1rem);
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--prose);
  font-family: var(--face-body);
  font-size: 1.0625rem;
  line-height: 1.65;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--sky-600); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--sky-700); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--sky-600); outline-offset: 2px; border-radius: 3px; }

h1, h2, h3 {
  font-family: var(--face-head);
  color: var(--ink);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.shell { width: min(100% - 2rem, 76rem); margin-inline: auto; }

/* An implicit grid track is `auto`, and an auto track grows to its widest child:
   the 34rem comparison table then pushed the whole article to 546px on a 360px
   phone. Every single-column grid gets an explicit shrinkable track; the wider
   layouts below redefine the columns in their media queries. */
.welcome__grid, .purse__sums, .reading, .scales, .nudge__inner, .basement__top,
.apply__grid, .contactlayout, .reach, .reach__cards { grid-template-columns: minmax(0, 1fr); }

.offscreen {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

.jumpto {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 60;
  padding: 0.6rem 1rem;
  background: var(--sun-400);
  color: var(--night-900);
  font-weight: 700;
  border-radius: var(--round-sm);
}
.jumpto:focus { top: 0.75rem; }

.ico { flex: none; width: 1.25rem; height: 1.25rem; }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.9rem;
  padding: 0.6rem 1.35rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--face-head);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.btn svg { flex: none; }
.btn--sun { background: var(--sun-400); color: var(--night-900); }
.btn--sun:hover { background: var(--sun-500); color: var(--night-900); text-decoration: none; }
.btn--sun:active { transform: translateY(1px); }
.btn--line { border-color: currentColor; color: var(--sky-600); background: transparent; }
.btn--line:hover { background: rgba(15, 87, 137, 0.08); text-decoration: none; }
.btn--big { min-height: 3.25rem; padding: 0.75rem 1.6rem; font-size: 1.0625rem; }
.btn--wide { width: 100%; }
.btn:disabled { cursor: not-allowed; opacity: 0.55; }

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

.canopy {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--night-900);
  box-shadow: 0 1px 0 rgba(140, 203, 243, 0.14);
}
.canopy__bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--bar-h);
}
.logo { display: inline-flex; flex: none; align-items: center; padding-block: 0.4rem; }
.logo__row { width: auto; height: 2.1rem; }
.canopy__apply { margin-left: auto; min-height: 2.5rem; padding: 0.45rem 1rem; font-size: 0.95rem; }

.burger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid rgba(140, 203, 243, 0.4);
  border-radius: var(--round-sm);
  background: transparent;
  color: var(--on-night);
  font: 600 0.95rem/1 var(--face-head);
  cursor: pointer;
}
.burger:focus-visible, .routes a:focus-visible, .routes__open:focus-visible { outline-color: var(--sky-300); }
.burger__lines,
.burger__lines::before,
.burger__lines::after {
  display: block;
  width: 1.15rem;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.burger__lines { position: relative; }
.burger__lines::before, .burger__lines::after { content: ""; position: absolute; left: 0; }
.burger__lines::before { top: -6px; }
.burger__lines::after { top: 6px; }
.burger[aria-expanded="true"] .burger__lines { background: transparent; }
.burger[aria-expanded="true"] .burger__lines::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__lines::after { transform: translateY(-6px) rotate(-45deg); }
.burger__text { display: none; }

/* mobile: the whole nav is a panel under the bar */
.routes {
  display: none;
  position: absolute;
  top: 100%;
  left: -1rem;
  right: -1rem;
  padding: 0.5rem 1rem 1rem;
  background: var(--night-800);
  border-top: 1px solid rgba(140, 203, 243, 0.35);
  box-shadow: 0 18px 36px rgba(4, 12, 22, 0.35);
}
.routes.is-open { display: block; }
.routes__list, .routes__sub { list-style: none; margin: 0; padding: 0; }
.routes__list > li { border-bottom: 1px solid rgba(140, 203, 243, 0.14); }
.routes__list > li:last-child { border-bottom: 0; }
.routes a,
.routes__open {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 3rem;
  padding: 0.5rem 0.25rem;
  color: var(--on-night);
  font: 500 1.02rem/1.3 var(--face-head);
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.routes a:hover, .routes__open:hover { color: var(--sky-300); }
.routes a[aria-current="page"], .routes__open.is-current { color: var(--sun-400); }
.routes__caret {
  width: 0.55rem;
  height: 0.55rem;
  margin-left: 0.6rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}
.routes__open[aria-expanded="true"] .routes__caret { transform: translateY(2px) rotate(-135deg); }
.routes__sub { padding: 0 0 0.5rem 0.9rem; border-left: 2px solid rgba(253, 179, 41, 0.55); margin-left: 0.25rem; }
.routes__sub[hidden] { display: none; }
.routes__sub a { min-height: 2.6rem; font-weight: 400; color: var(--on-night-dim); }

/* 320px phones: logo, "Apply now" and the burger must still share one row */
@media (max-width: 21.99rem) {
  .canopy__bar { gap: 0.5rem; }
  .logo__row { height: 1.6rem; }
  .canopy__apply { padding: 0.4rem 0.7rem; font-size: 0.88rem; }
  .burger { padding: 0.4rem 0.5rem; }
}

@media (min-width: 26rem) {
  .burger__text { display: inline; }
  .logo__row { height: 2.4rem; }
}

@media (min-width: 62rem) {
  .burger { display: none; }
  .routes {
    display: block;
    position: static;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    margin-left: auto;
  }
  .canopy__apply { margin-left: 0.5rem; }
  .routes__list { display: flex; align-items: center; gap: 0.25rem; }
  .routes__list > li { border: 0; position: relative; }
  .routes a, .routes__open { width: auto; min-height: 2.6rem; padding: 0.4rem 0.8rem; border-radius: var(--round-sm); }
  .routes__list > li > a:hover, .routes__open:hover { background: rgba(140, 203, 243, 0.1); }
  .routes__sub {
    position: absolute;
    top: calc(100% + 0.6rem);
    left: 0;
    min-width: 15.5rem;
    padding: 0.4rem;
    margin: 0;
    background: var(--night-800);
    border: 1px solid rgba(140, 203, 243, 0.4);
    border-radius: var(--round);
    box-shadow: 0 18px 40px rgba(4, 12, 22, 0.45);
  }
  .routes__sub a { width: 100%; padding: 0.5rem 0.75rem; color: var(--on-night); }
  .routes__sub a:hover { background: rgba(140, 203, 243, 0.12); }
  .logo__row { height: 2.6rem; }
}

/* -------------------------------------------------------------- breadcrumbs */

.trail { background: var(--mist); border-bottom: 1px solid var(--line-soft); }
.trail__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 0.5rem;
  margin: 0 auto;
  padding: 0.7rem 0;
  list-style: none;
  font-size: 0.93rem;
  color: var(--quiet);
}
.trail__list li + li::before { content: "/"; margin-right: 0.5rem; color: var(--quiet); }

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

.welcome { background: var(--mist); padding: 2rem 0 2.5rem; }
.welcome h1 {
  margin: 0 0 1.5rem;
  text-align: center;
  font-size: clamp(1.8rem, 1.2rem + 2.5vw, 2.9rem);
  font-weight: 700;
}
.welcome__grid { display: grid; gap: 1.75rem; }
.welcome__lede p { margin: 0 0 1rem; font-size: 1.15rem; line-height: 1.6; color: var(--prose); }
.welcome__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin: 1.25rem 0 0; }
.welcome__jump { font-weight: 700; }
.welcome--plain { padding-bottom: 2rem; }
.welcome--plain .welcome__lede { max-width: none; }

@media (min-width: 56rem) {
  .welcome { padding: 2.75rem 0 3.25rem; }
  .welcome__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: 2.5rem; align-items: stretch; }
  .welcome__lede p { font-size: 1.2rem; }
}

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

.purse {
  padding: 1.35rem 1.25rem 1.25rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--round);
  box-shadow: var(--lift);
}
.purse__title { margin: 0 0 0.35rem; font-size: 1.25rem; }
.purse__fields { display: grid; gap: 0 1.1rem; }
.purse__lede { margin: 0 0 0.9rem; font-size: 0.98rem; color: var(--quiet); }
.purse__field { margin: 0 0 0.9rem; }
.purse__labelrow { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.35rem; }
.purse__labelrow label, .purse__field--deposit > label { font-weight: 700; color: var(--ink); }
.purse__labelrow output { font: 600 1.2rem/1.2 var(--face-head); color: var(--ink); font-variant-numeric: tabular-nums; }
.purse__money {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.35rem;
  padding: 0 0.85rem;
  border: 2px solid var(--line);
  border-radius: var(--round-sm);
  background: var(--paper);
  font: 600 1.15rem/1 var(--face-head);
  color: var(--ink);
}
.purse__money:focus-within { border-color: var(--sky-600); }
.purse__money input {
  width: 100%;
  min-height: 2.9rem;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  font-variant-numeric: tabular-nums;
}
.purse__money input:focus { outline: none; }
.purse__hint { margin: 0.35rem 0 0; font-size: 0.9rem; color: var(--quiet); }

.purse__range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2rem;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.purse__range::-webkit-slider-runnable-track {
  height: 0.5rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sky-600) var(--fill, 50%), var(--line) var(--fill, 50%));
}
.purse__range::-moz-range-track { height: 0.5rem; border-radius: 999px; background: var(--line); }
.purse__range::-moz-range-progress { height: 0.5rem; border-radius: 999px; background: var(--sky-600); }
.purse__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1.6rem;
  height: 1.6rem;
  margin-top: -0.55rem;
  border: 3px solid var(--paper);
  border-radius: 50%;
  background: var(--sky-600);
  box-shadow: 0 1px 4px rgba(11, 30, 51, 0.35);
}
.purse__range::-moz-range-thumb {
  width: 1.3rem;
  height: 1.3rem;
  border: 3px solid var(--paper);
  border-radius: 50%;
  background: var(--sky-600);
  box-shadow: 0 1px 4px rgba(11, 30, 51, 0.35);
}
.purse__range:focus-visible { outline-offset: 4px; }
.purse__limits { display: flex; justify-content: space-between; font-size: 0.86rem; color: var(--quiet); }

.purse__split {
  display: flex;
  height: 0.9rem;
  margin-top: 0.4rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--leaf-500);
}
.purse__owe { display: block; width: 48%; background: var(--sun-500); transition: width 0.2s ease; }
.purse__splitnote { margin: 0.45rem 0 0.9rem; font-size: 0.92rem; color: var(--quiet); }

.purse__sums { display: grid; gap: 0.5rem; margin: 0 0 1.1rem; }
.purse__sum {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.6rem 0.8rem;
  border-radius: var(--round-sm);
  background: var(--mist);
}
.purse__sum dt { font-size: 0.95rem; }
.purse__sum dd { margin: 0; font: 600 1.15rem/1.2 var(--face-head); color: var(--ink); font-variant-numeric: tabular-nums; }
.purse__sum--keep { background: var(--leaf-100); }
.purse__sum--keep dd { color: var(--leaf-700); }
.purse__cta { margin: 0 0 0.85rem; }
.purse__note { margin: 0; font-size: 0.86rem; line-height: 1.5; color: var(--quiet); }

/* ---------------------------------------------------------- key figures band */

@media (min-width: 56rem) {
  /* дві колонки полів і підсумки в рядок: калькулятор нижчий на ~200px,
     тож поруч із ним не лишається порожньої колонки тексту */
  /* калькулятор тягнеться на висоту колонки з текстом: кнопка й примітка
     тримаються низу, тож залишок висоти читається як поле, а не як діра */
  .purse { display: flex; flex-direction: column; }
  .purse__cta { margin-top: auto; padding-top: 0.5rem; }
  .purse__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .purse__sums { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem; }
  .purse__sum { flex-direction: column; align-items: flex-start; gap: 0.15rem; }
  .purse__sum dt { font-size: 0.82rem; line-height: 1.3; }
}

/* ----------------------------------------------------- review form in a sheet */

.echoes__cta { display: flex; justify-content: center; margin: 1.5rem 0 0; }

/* the card itself: the sheet is transparent on purpose, the panel inside it
   carries the surface — same treatment as the request form */
.echo {
  display: block;
  padding: 1.5rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--round);
  background: var(--paper);
  box-shadow: var(--lift);
}
.sheet .echo { box-shadow: none; padding-top: 1.6rem; }
.sheet .echo__title { padding-right: 3rem; }
.echo__title { margin: 0 0 0.4rem; font-size: 1.35rem; }
.echo__intro { margin: 0 0 0.85rem; color: var(--quiet); }
.echo__status:empty { display: none; }
.echo__status { margin: 0 0 0.9rem; font-weight: 700; color: var(--leaf-700); }
.echo__fields { margin: 0; padding: 0; border: 0; display: grid; gap: 0.9rem; }
.echo__fields[disabled] { opacity: 0.6; }
.echo__acts { margin: 1.1rem 0 0; }
.echo__note { margin: 0.75rem 0 0; font-size: 0.85rem; line-height: 1.5; color: var(--quiet); }

/* star rating (01.10): required, nothing chosen by default. Five radios; every
   star up to the chosen (or hovered) one is filled. */
.echo__rate { grid-column: 1 / -1; min-width: 0; margin: 0; padding: 0; border: 0; }
.echo__rate-legend { margin: 0 0 0.3rem; padding: 0; font-weight: 700; color: var(--ink); }
.echo__rate-row { display: flex; }
.echo__rate-input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.echo__rate-star { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 8px; color: var(--quiet); cursor: pointer; }
.echo__rate-star svg { width: 2.1rem; height: 2.1rem; fill: transparent; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; transition: fill 0.12s ease, color 0.12s ease; }
.echo__rate-row:has(.echo__rate-input:checked) .echo__rate-star { color: var(--ember-700); }
.echo__rate-row:has(.echo__rate-input:checked) .echo__rate-star svg { fill: var(--sun-400); }
.echo__rate-input:checked + .echo__rate-star ~ .echo__rate-star { color: var(--quiet); }
.echo__rate-input:checked + .echo__rate-star ~ .echo__rate-star svg { fill: transparent; }
@media (hover: hover) {
  .echo__rate-row.echo__rate-row:hover .echo__rate-star.echo__rate-star { color: var(--ember-700); }
  .echo__rate-row.echo__rate-row:hover .echo__rate-star.echo__rate-star svg { fill: var(--sun-400); }
  .echo__rate-row.echo__rate-row:hover .echo__rate-star:hover ~ .echo__rate-star.echo__rate-star { color: var(--quiet); }
  .echo__rate-row.echo__rate-row:hover .echo__rate-star:hover ~ .echo__rate-star.echo__rate-star svg { fill: transparent; }
}
.echo__rate-input:focus-visible + .echo__rate-star { outline: 3px solid var(--sky-600); outline-offset: 1px; }
.echo__rate.is-missing .echo__rate-legend,
.echo__rate.is-missing .echo__rate-star { color: var(--ember-700); }
.inputrow--wide textarea {
  width: 100%;
  min-height: 6rem;
  padding: 0.6rem 0.7rem;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: calc(var(--round) - 6px);
  resize: vertical;
}
.inputrow--wide textarea:focus-visible { outline: 3px solid var(--sky-600); outline-offset: 1px; }

@media (min-width: 40rem) {
  .inputrow--wide textarea { min-height: 7.5rem; }
  .echo__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inputrow--wide { grid-column: 1 / -1; }
}

/* ------------------------------------------- key figures beside the copy
   They used to run as a full-width dark strip under the hero; that left the
   left column empty next to the calculator and cost a screen of scrolling. */

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 0.6rem;
  margin: 1.5rem 1.35rem 0;
  padding: 0;
  list-style: none;
  transform: skewX(-5deg);
}
.facts__item {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "ico value" "ico label";
  align-items: center;
  column-gap: 0.65rem;
  padding: 0.7rem 0.95rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
}
/* увесь блок нахилений, тож вісім карток складаються в один паралелограм;
   вміст кожної випрямляємо назад, щоб текст і іконки стояли рівно. Бокові
   поля дорівнюють вильоту скосу: висота/2 × tan 5° ≈ 15px на блок 330px */
.facts__item > * { transform: skewX(5deg); }

.facts__ico {
  grid-area: ico;
  width: 22px;
  height: 22px;
  color: var(--sky-600);
}
.facts__value { grid-area: value; font: 700 1.05rem/1.2 var(--face-head); color: var(--ink); }
.facts__label { grid-area: label; font-size: 0.82rem; line-height: 1.35; color: var(--quiet); }

@media (min-width: 56rem) {
  /* компактні картки у два стовпці, притиснуті до низу колонки: якщо
     калькулятор вищий, залишок лягає полем над картками, а не дірою під ними */
  .welcome__copy { display: flex; flex-direction: column; }
  .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
    margin: 1.6rem 1rem 0;
    margin-top: auto;
    padding-top: 1.6rem;
  }
  .facts__item { padding: 0.72rem 0.9rem; }
}

@media (min-width: 70rem) {
  /* колонка 17rem лишалась від «On this page»; без нього стаття йде однією
     колонкою з мірою рядка близько 75 знаків */
  .reading { grid-template-columns: minmax(0, 1fr); padding-top: 2.5rem; }
  .essay { order: 1; max-width: 48rem; margin-inline: auto; }
  /* статті (30.09, двічі «не заполнено»): на всю ширину фрейму — заголовок розділу
     на всю ширину з номером-паралелограмом та іконкою над ним, текст на всю ширину,
     поруч із картинкою — до неї; картинка більша, щоб рядок біля неї був коротший */
  .essay--rails { max-width: none; }
  .essay--rails .pic { width: min(40%, 30rem); }
  .essay--rails .pic--compact { width: min(30%, 20rem); }
}

/* a picture beside the FAQ (moved there from a section too short to float it
   without a hole): above the questions on a phone, a sticky column on a wide screen */
.essay--rails .pic--faq { float: none; width: auto; max-width: 30rem; margin: 0 0 1.25rem; }
@media (min-width: 64rem) {
  .topic__body:has(> .pic--faq) { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 2fr); column-gap: 2.5rem; align-items: start; }
  .essay--rails .topic__body > .pic--faq { max-width: none; margin: 0.35rem 0 0; position: sticky; top: calc(var(--bar-h) + 1.5rem); }
}

/* «Before you borrow»: чотири поради зі статті тієї ж сторінки (не цифри з шапки),
   іконка в скошеній жовтій плашці — як номери розділів */
.brief { clear: both; margin: 2.2rem 0 0.5rem; padding: 1.4rem 1.25rem 1.5rem; border-radius: var(--round); background: var(--mist); border: 1px solid var(--line); }
.brief__title { margin: 0 0 1rem; font: 700 1.15rem/1.3 var(--face-head); color: var(--ink); }
.brief__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.brief__item { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.85rem; align-items: start; }
.brief__badge { display: grid; place-items: center; width: 2.6rem; height: 2.3rem; border-radius: 5px; background: var(--sun-400); color: var(--night-900); transform: skewX(-12deg); }
.brief__badge svg { width: 1.3rem; height: 1.3rem; transform: skewX(12deg); }
.brief__head { margin: 0 0 0.2rem; font: 700 1rem/1.3 var(--face-head); color: var(--ink); }
.brief__text { margin: 0; font-size: 0.95rem; line-height: 1.5; color: var(--quiet); }
@media (min-width: 40rem) { .brief__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .brief { padding: 1.6rem 1.75rem 1.75rem; } .brief__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ------------------------------------------------ section rail (promo pages) */

/* 30.09: без нумерації. Заголовок на всю ширину; мітка теми (іконка + 1–2 слова) лежить
   поверх його рядка справа і з'являється лише там, де праворуч від тексту вільно:
   це перевіряє site.js (клас is-room), тож заголовок через неї не переноситься */
.topic__rail { position: relative; margin: 2.6rem 0 1rem; }
.topic--rail:first-child .topic__rail { margin-top: 0; }
/* .essay in front: the later `.essay h2` would otherwise win with its 2.6rem top margin */
.essay .topic__rail h2 { margin: 0; clear: none; }
.topic__tag {
  position: absolute;
  top: 50%;
  right: 0;
  display: none;
  align-items: center;
  gap: 0.55rem;
  padding: 0.25rem 0.95rem 0.25rem 0.25rem;
  border-radius: 999px;
  background: var(--mist);
  color: var(--sky-700);
  font: 600 0.78rem/1 var(--face-head);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateY(-50%);
}
.topic__rail.is-room .topic__tag { display: inline-flex; }
.topic__ico { width: 1.65rem; height: 1.65rem; padding: 0.33rem; border-radius: 50%; background: var(--paper); color: var(--sky-700); }
.topic__body { min-width: 0; }
.topic__body::after { content: ""; display: block; clear: both; }

.essay { font-size: 1.0625rem; }
.essay::after { content: ""; display: block; clear: both; }
.essay p { margin: 0 0 1.05rem; }
.essay h2 {
  clear: both;
  margin: 2.6rem 0 1rem;
  font-size: clamp(1.4rem, 1.15rem + 1vw, 1.8rem);
}
.topic:first-child h2 { margin-top: 0; }
.essay h3 { margin: 1.75rem 0 0.7rem; font-size: 1.2rem; color: var(--sky-700); }
.essay ul, .essay ol { margin: 0 0 1.25rem; padding-left: 1.4rem; }
.essay li { margin: 0.4rem 0; padding-left: 0.2rem; }
.essay ul > li::marker { color: var(--leaf-700); }
.essay ol { list-style: none; padding-left: 0; counter-reset: step; }
.essay ol > li {
  position: relative;
  padding-left: 2.6rem;
  counter-increment: step;
  min-height: 1.9rem;
}
.essay ol > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  background: var(--night-900);
  color: var(--sun-400);
  font: 700 0.9rem/1 var(--face-head);
}
.essay strong { color: var(--ink); }

.pic { margin: 0.3rem 0 1.25rem; }
.pic img { width: 100%; border-radius: var(--round); }
@media (min-width: 50rem) {
  .pic { width: min(44%, 26rem); }
  .pic--right { float: right; margin: 0.35rem 0 1rem 1.75rem; }
  .pic--left { float: left; margin: 0.35rem 1.75rem 1rem 0; }
  .pic--compact { width: min(28%, 16rem); }
}

.tablebox {
  clear: both;
  margin: 0 0 1.5rem;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--round);
}
.tablebox table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: 0.98rem; }
.tablebox th, .tablebox td { padding: 0.75rem 0.9rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-soft); }
.tablebox thead th { background: var(--night-800); color: var(--on-night); font: 600 0.95rem/1.35 var(--face-head); border-bottom: 0; }
.tablebox tbody th { background: var(--mist); color: var(--ink); font-weight: 700; }
.tablebox tbody tr:last-child th, .tablebox tbody tr:last-child td { border-bottom: 0; }

.scales { clear: both; display: grid; gap: 1rem; margin: 0 0 1.5rem; }
.scales__side { padding: 1rem 1.15rem 0.35rem; border-radius: var(--round); border: 1px solid transparent; }
.scales__side--plus { background: var(--leaf-100); border-color: rgba(42, 106, 46, 0.25); }
.scales__side--minus { background: var(--ember-100); border-color: rgba(168, 67, 15, 0.25); }
.scales__label { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.35rem !important; font: 600 1.05rem/1.3 var(--face-head); }
.scales__side--plus .scales__label { color: var(--leaf-700); }
.scales__side--minus .scales__label { color: var(--ember-700); }
.scales ul { margin-bottom: 0.75rem; }
.scales__side--minus ul > li::marker { color: var(--ember-700); }
@media (min-width: 44rem) {
  .scales { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.cue { clear: both; display: flex; justify-content: center; margin: 1.5rem 0 0.5rem; }

.faq { clear: both; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0.25rem;
  font: 600 1.08rem/1.35 var(--face-head);
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--sky-600); }
.faq__icon {
  position: relative;
  flex: none;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--mist);
  border: 1px solid var(--line);
}
.faq__icon::before, .faq__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.8rem;
  height: 2px;
  background: var(--sky-600);
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease;
}
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open] .faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq__a { padding: 0 0.25rem 0.5rem; }

.essay--legal h2 { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem); }

/* ------------------------------------------------------------------ reviews */

.echoes { background: var(--sand); padding: 2.75rem 0 2.5rem; }
.echoes__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.echoes__title { margin: 0; font-size: clamp(1.4rem, 1.15rem + 1vw, 1.8rem); }
/* the same average and count the AggregateRating in the markup carries */
.echoes__summary { margin: 0.3rem 0 0; font-size: 0.95rem; font-weight: 700; color: var(--quiet); }
.echoes__nav { display: flex; gap: 0.5rem; }
.echoes__arrow {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 2px solid var(--night-900);
  border-radius: 50%;
  background: var(--paper);
  color: var(--night-900);
  cursor: pointer;
}
.echoes__arrow:disabled { opacity: 0.35; cursor: default; }
.echoes__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(16rem, 1fr);
  gap: 1rem;
  margin: 0;
  padding: 6px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* equal to the padding: position 0 must be a snap point, or the browser
     scrolls the track by itself after load and PageSpeed loses the LCP */
  scroll-padding-inline: 6px;
  scrollbar-width: thin;
}
@media (min-width: 44rem) { .echoes__track { grid-auto-columns: calc((100% - 1rem) / 2); } }
@media (min-width: 70rem) { .echoes__track { grid-auto-columns: calc((100% - 2rem) / 3); } }
.echoes__card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.2rem 1.25rem;
  border-radius: var(--round);
  background: var(--paper);
  border: 1px solid #F0DDB4;
  scroll-snap-align: start;
}
.echoes__stars { margin: 0; color: var(--ember-700); letter-spacing: 0.12em; font-size: 1.05rem; }
.echoes__quote { margin: 0; flex: 1; }
.echoes__quote p { margin: 0; color: var(--prose); }
.echoes__who { display: flex; align-items: center; flex-wrap: wrap; gap: 0.2rem 0.6rem; margin: 0; font-size: 0.95rem; }
.echoes__avatar {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--night-900);
  color: var(--sun-400);
  font: 600 0.9rem/1 var(--face-head);
}
.echoes__name { font-weight: 700; color: var(--ink); }
.echoes__city { color: var(--quiet); }
.echoes__dots { display: flex; justify-content: center; gap: 0.35rem; margin-top: 1rem; }
.echoes__dots button {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.echoes__dots button::before {
  content: "";
  display: block;
  width: 0.6rem;
  height: 0.6rem;
  margin: auto;
  border-radius: 50%;
  background: #D8C49A;
}
.echoes__dots button[aria-current="true"]::before { background: var(--night-900); transform: scale(1.25); }

/* ---------------------------------------------------------- closing CTA band */

.nudge { background: var(--night-900); color: var(--on-night); padding: 2.5rem 0; }
.nudge__inner { display: grid; gap: 1.25rem; justify-items: center; }
.nudge__copy { margin: 0; font-size: 1.15rem; line-height: 1.6; color: var(--on-night); text-align: left; }
.nudge__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 1rem; margin: 0; }
.nudge .btn--line { color: var(--on-night); }
.nudge .btn--line:hover { background: rgba(140, 203, 243, 0.12); }
.nudge :focus-visible { outline-color: var(--sky-300); }

/* ------------------------------------------------------------------- footer */

.basement { background: var(--night-900); color: var(--on-night-dim); font-size: 0.95rem; border-top: 1px solid rgba(140, 203, 243, 0.16); }
.basement a { color: var(--on-night); text-decoration-color: rgba(234, 241, 248, 0.45); }
.basement a:hover { color: var(--sky-300); }
.basement :focus-visible { outline-color: var(--sky-300); }
.basement__top { display: grid; gap: 2rem; padding: 2.75rem 0 2rem; }
.logo--foot { padding: 0; }
.basement__logo { width: 11rem; height: auto; }
.basement__about { margin: 1rem 0 0; line-height: 1.6; }
.basement__label { margin: 0 0 0.75rem; font: 600 0.8rem/1.2 var(--face-head); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sun-400); }
.basement__nav ul { margin: 0; padding: 0; list-style: none; }
.basement__nav li { margin: 0 0 0.55rem; }
.basement__nav a[aria-current="page"] { color: var(--sun-400); }
.basement__reach li { display: flex; gap: 0.6rem; align-items: flex-start; }
.basement__reach .ico { margin-top: 0.15rem; color: var(--sky-300); }
.basement__key { display: block; font-size: 0.85rem; color: var(--on-night-dim); }
.basement__reach .pending { color: var(--on-night); }
.basement__fine { padding: 1.5rem 0 2rem; border-top: 1px solid rgba(140, 203, 243, 0.16); font-size: 0.88rem; line-height: 1.6; }
.basement__fine p { margin: 0 0 0.75rem; }
.basement__odsp { color: var(--on-night); font-weight: 700; }
.basement__copy { margin-bottom: 0 !important; }

@media (min-width: 44rem) {
  .basement__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .basement__top { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1.25fr); gap: 2.5rem; }
}

/* ---------------------------------------------------------- request form */

.apply {
  padding: 1.5rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--round);
  background: var(--paper);
  box-shadow: var(--lift);
}
.apply__title { margin: 0 0 0.4rem; font-size: 1.4rem; }
.apply__intro { margin: 0 0 0.9rem; color: var(--quiet); font-size: 0.98rem; }
.apply__status:empty { display: none; }
.apply__status { margin: 0 0 1rem; padding: 0.7rem 0.9rem; border-radius: var(--round-sm); background: var(--sand); color: var(--ink); font-weight: 700; }
.apply__fields { margin: 0; padding: 0; border: 0; min-width: 0; }
.apply__grid { display: grid; gap: 0.9rem; margin-bottom: 1rem; }
@media (min-width: 40rem) { .apply__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.inputrow label { display: block; margin-bottom: 0.3rem; font-weight: 700; color: var(--ink); }
.inputrow input {
  width: 100%;
  min-height: 3rem;
  padding: 0.55rem 0.8rem;
  border: 2px solid var(--line);
  border-radius: var(--round-sm);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}
.inputrow input:focus { border-color: var(--sky-600); outline: 3px solid rgba(15, 87, 137, 0.25); outline-offset: 0; }
.inputrow input:disabled { background: var(--mist); }
.inputrow__hint { margin: 0.3rem 0 0; font-size: 0.86rem; color: var(--quiet); }
.consent { display: flex; gap: 0.7rem; align-items: flex-start; margin: 0 0 1.25rem; font-size: 0.95rem; line-height: 1.5; cursor: pointer; }
.consent input { flex: none; width: 1.3rem; height: 1.3rem; margin: 0.15rem 0 0; accent-color: var(--sky-600); }
.apply__send { display: flex; width: 100%; }
.notice { margin: 0 0 1rem; padding: 0.85rem 1rem; border-radius: var(--round-sm); font-weight: 700; }
.notice--good { background: var(--leaf-100); color: var(--leaf-700); }
.notice--bad { background: var(--ember-100); color: var(--ember-700); }

.sheet {
  width: min(100% - 1.5rem, 36rem);
  max-height: calc(100% - 1.5rem);
  padding: 0;
  border: 0;
  border-radius: var(--round);
  background: transparent;
}
.sheet::backdrop { background: rgba(6, 16, 28, 0.66); }
.sheet__panel { position: relative; }
.sheet__close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 0;
  border-radius: 50%;
  background: var(--mist);
  color: var(--ink);
  cursor: pointer;
}
.sheet .apply { box-shadow: none; padding-top: 1.6rem; }
.sheet .apply__title { padding-right: 3rem; }

/* ----------------------------------------------------------------- contact */

.contactlayout { display: grid; gap: 1.75rem; padding: 2rem 0 3rem; align-items: start; }
@media (min-width: 56rem) { .contactlayout { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 2.5rem; } }
.reach { display: grid; gap: 1.25rem; }
.reach__cards { display: grid; gap: 0.75rem; margin: 0; }
.reach__card { padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--round); background: var(--mist); }
.reach__card dt { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.3rem; font: 600 1rem/1.3 var(--face-head); color: var(--ink); }
.reach__card dt .ico { color: var(--leaf-700); }
.reach__card dd { margin: 0; }
.reach__map iframe { display: block; width: 100%; height: 22rem; border: 0; border-radius: var(--round); }
.pending { color: var(--quiet); }

/* ------------------------------------------------------------ 404, received */

.lost { padding: 3.5rem 0 4.5rem; text-align: center; }
.lost__code { margin: 0; font: 700 clamp(4rem, 3rem + 6vw, 7rem)/1 var(--face-head); color: var(--leaf-700); }
.lost h1 { margin: 0.5rem 0 1rem; font-size: clamp(1.8rem, 1.3rem + 2vw, 2.5rem); }
.lost__lede { margin: 0 auto 1.5rem; max-width: 40rem; text-align: left; }
.lost__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
.lost .notice { max-width: 40rem; margin-inline: auto; text-align: left; }