/* Self-hosted variable faces, latin + latin-ext; nothing is requested from Google
   at runtime. Red Hat Display sets the headings, Red Hat Text the reading copy.
   font-display: optional + metric-matched fallbacks: the two latin files are
   preloaded, and when they are late the page keeps the fallback instead of
   re-breaking the H1 mid-read (no font CLS). */
@font-face {
  font-family: "Red Hat Display";
  font-style: normal;
  font-weight: 600 800;
  font-display: optional;
  src: url("../fonts/redhat-display-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: "Red Hat Display";
  font-style: normal;
  font-weight: 600 800;
  font-display: optional;
  src: url("../fonts/redhat-display-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: "Red Hat Text";
  font-style: normal;
  font-weight: 400 700;
  font-display: optional;
  src: url("../fonts/redhat-text-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: "Red Hat Text";
  font-style: normal;
  font-weight: 400 700;
  font-display: optional;
  src: url("../fonts/redhat-text-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;
}
/* fallbacks, measured in Chrome on 29.09.2026 over this site's own H1s (weight
   800 against Arial Bold) and ledes (400 against Arial): width ratio -> size-adjust,
   the web face's ascent and descent divided by that ratio -> the overrides */
@font-face {
  font-family: "Display Fallback";
  font-weight: 600 800;
  src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 84.76%;
  ascent-override: 120.3%;
  descent-override: 36.6%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Text Fallback";
  font-weight: 400 500;
  src: local("Arial");
  size-adjust: 99.19%;
  ascent-override: 102.8%;
  descent-override: 31.3%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Text Fallback";
  font-weight: 600 700;
  src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 99.19%;
  ascent-override: 102.8%;
  descent-override: 31.3%;
  line-gap-override: 0%;
}

/* debtconsolidationloancanada.ca — written for this site only.
   Palette from the logo pack (30.09, replacing the first plum/peach one): the navy
   of the dark master's backdrop for the bars, the logo's blue for the one action
   colour (white text), deeper blues for links and accents on cool light greys, a
   light sky blue for accents on navy, the silver of the ring for the offset
   shadow; sage and rose only to say "saves" or "costs more", gold for the stars.
   The hero pairs the copy with the page's first picture and keeps the key figures
   as light cards under both (never a dark strip of their own); the calculator is a
   worksheet in a band of its own under the hero; the article is one centred
   column, no side menu. A hard silver offset shadow marks the picture and the sheet. */

:root {
  /* from the logo pack (30.09): the dark master's own backdrop, the royal blue of
     "consolidation" and the bars, the bright blue of the arrow, the silver ring */
  --navy-900: #06142A;
  --navy-800: #153A68;
  --blue-700: #004C99;
  --blue-600: #0060B0;
  --azure-600: #0059B3;
  --azure-500: #006ED6;
  --sky-300: #7CC4FF;
  --on-navy: #EAF2FB;
  --on-navy-dim: #AFC0D4;
  --silver-400: #8F9AA7;
  --silver-300: #B6C2CF;
  --gold-600: #A87400;
  --ice: #F2F6FB;
  --frost: #E6ECF4;
  --mist: #E2EDFA;
  --paper: #FFFFFF;
  --ink: #0C1626;
  --prose: #28313E;
  --quiet: #56616F;
  --line: #D5DEE8;
  --line-soft: #E3E9F1;
  --sage-700: #2C6A52;
  --sage-300: #9CD8BC;
  --sage-100: #E2F0E8;
  --rose-700: #A13A36;
  --rose-300: #F4A7A0;
  --rose-100: #F9E6E3;

  --type-display: "Red Hat Display", "Display Fallback", sans-serif;
  --type-text: "Red Hat Text", "Text Fallback", sans-serif;
  --r-lg: 18px;
  --r-md: 12px;
  --r-sm: 8px;
  --shadow: 0 2px 4px rgba(6, 20, 42, 0.05), 0 14px 34px rgba(6, 20, 42, 0.10);
  --offset: 0.5rem 0.5rem 0 var(--silver-300);
  --bar: 4.5rem;
}

*, *::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) + 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(--type-text);
  font-size: 1.0625rem;
  line-height: 1.65;
}

img { display: block; max-width: 100%; height: auto; }
a { color: var(--blue-600); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--navy-900); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--blue-600); outline-offset: 2px; border-radius: 3px; }
h1, h2, h3 { font-family: var(--type-display); color: var(--ink); line-height: 1.18; font-weight: 700; text-wrap: balance; }

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

/* single-column grids get a shrinkable track: an implicit auto track grows to its
   widest child, and a scrolling table would push the page wider than a phone */
.intro__grid, .readwrap, .weigh, .closer__inner, .pluses, .sitefoot__top, .request__grid,
.contactwrap, .touch, .touch__cards, .keyfigs, .feedback__fields, .tally__sheet,
.tally__lines, .tally__bars { display: grid; grid-template-columns: minmax(0, 1fr); }

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

.skiplink {
  position: absolute;
  top: -4rem;
  left: 1rem;
  z-index: 70;
  padding: 0.6rem 1rem;
  border-radius: var(--r-sm);
  background: var(--azure-500);
  color: var(--paper);
  font-weight: 700;
}
.skiplink:focus { top: 0.75rem; }

.ico { flex: none; width: 1.25rem; height: 1.25rem; }
.pending { color: var(--quiet); }

/* the domain is 30 characters long: the email address and the bare-domain links
   in the policy are single unbreakable strings that pushed a 1024px footer column
   and a 320px phone wider than the screen */
.sitefoot__contact span, .touch__card dd, .story a { min-width: 0; overflow-wrap: anywhere; }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.9rem;
  padding: 0.6rem 1.3rem;
  border: 2px solid transparent;
  border-radius: var(--r-sm);
  font: 700 1rem/1.2 var(--type-display);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn svg { flex: none; }
.btn--warm { background: var(--azure-500); color: var(--paper); }
.btn--warm:hover { background: var(--azure-600); color: var(--paper); text-decoration: none; }
.btn--outline { border-color: currentColor; color: var(--blue-600); background: transparent; }
.btn--outline:hover { background: rgba(0, 96, 176, 0.08); text-decoration: none; }
.btn--lg { min-height: 3.2rem; padding: 0.75rem 1.5rem; font-size: 1.0625rem; }
.btn--block { width: 100%; }
.btn:disabled { cursor: not-allowed; opacity: 0.55; }

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

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--navy-900);
  box-shadow: 0 1px 0 rgba(124, 196, 255, 0.16);
}
.topbar__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--bar);
}
.topbar__cta { margin-left: auto; min-height: 2.5rem; padding: 0.45rem 0.95rem; font-size: 0.95rem; }

/* the client's logo (dark master, background keyed out by prepare_assets.py):
   the mark and the wordmark as two images; the wordmark is 16:1, so a phone
   shows the mark alone rather than a line too small to read */
.brand { display: inline-flex; align-items: center; gap: 0.55rem; flex: none; text-decoration: none; }
.brand__mark { width: auto; height: 2.5rem; }
.brand__word { display: none; width: auto; height: 0.85rem; }
.brand:focus-visible { outline-color: var(--sky-300); }
.brand--foot { display: inline-block; }
.brand__lockup { width: 15rem; max-width: 100%; height: auto; }

.menubtn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.4rem 0.65rem;
  border: 1px solid rgba(124, 196, 255, 0.45);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--on-navy);
  font: 700 0.95rem/1 var(--type-display);
  cursor: pointer;
}
.menubtn__icon, .menubtn__icon::before, .menubtn__icon::after {
  display: block;
  width: 1.15rem;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.2s ease;
}
.menubtn__icon { position: relative; }
.menubtn__icon::before, .menubtn__icon::after { content: ""; position: absolute; left: 0; }
.menubtn__icon::before { top: -6px; }
.menubtn__icon::after { top: 6px; }
.menubtn[aria-expanded="true"] .menubtn__icon { background: transparent; }
.menubtn[aria-expanded="true"] .menubtn__icon::before { transform: translateY(6px) rotate(45deg); }
.menubtn[aria-expanded="true"] .menubtn__icon::after { transform: translateY(-6px) rotate(-45deg); }
.menubtn__label { display: none; }
.menubtn:focus-visible, .navline a:focus-visible, .navline__drop:focus-visible { outline-color: var(--sky-300); }

.navline {
  display: none;
  position: absolute;
  top: 100%;
  left: -1rem;
  right: -1rem;
  padding: 0.5rem 1rem 1rem;
  background: var(--navy-800);
  border-top: 1px solid rgba(124, 196, 255, 0.4);
  box-shadow: 0 18px 36px rgba(2, 10, 24, 0.4);
}
.navline.is-open { display: block; }
.navline__list, .navline__sub { margin: 0; padding: 0; list-style: none; }
.navline__list > li { border-bottom: 1px solid rgba(124, 196, 255, 0.16); }
.navline__list > li:last-child { border-bottom: 0; }
.navline a, .navline__drop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 3rem;
  padding: 0.5rem 0.25rem;
  border: 0;
  background: none;
  color: var(--on-navy);
  font: 600 1.02rem/1.3 var(--type-display);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.navline a:hover, .navline__drop:hover { color: var(--sky-300); }
.navline a[aria-current="page"], .navline__drop.is-current { color: var(--sky-300); }
.navline__chev {
  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;
}
.navline__drop[aria-expanded="true"] .navline__chev { transform: translateY(2px) rotate(-135deg); }
.navline__sub { margin-left: 0.3rem; padding: 0 0 0.5rem 0.9rem; border-left: 2px solid rgba(124, 196, 255, 0.6); }
.navline__sub[hidden] { display: none; }
.navline__sub a { min-height: 2.6rem; font-weight: 500; color: var(--on-navy-dim); }

@media (max-width: 21.99rem) {
  .topbar__row { gap: 0.5rem; }
  .topbar__cta { padding: 0.4rem 0.7rem; font-size: 0.88rem; }
}
@media (min-width: 26rem) {
  .menubtn__label { display: inline; }
}
/* phone and tablet: "Apply now" in the middle of the bar, the logo at the left,
   the menu button at the right (two equal side columns keep the button centred) */
@media (max-width: 63.99rem) {
  .topbar__row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .brand { justify-self: start; }
  .topbar__cta { justify-self: center; margin: 0; }
  .menubtn { justify-self: end; }
}
/* the wordmark joins the mark once half the bar beside the centred button can hold
   it (mark + wordmark 268px; half of 736 minus the button is 302) */
@media (min-width: 48rem) {
  .brand__word { display: block; }
}
@media (min-width: 64rem) {
  .menubtn { display: none; }
  .navline {
    display: block;
    position: static;
    margin-left: auto;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
  }
  .topbar__cta { margin-left: 0.5rem; }
  .navline__list { display: flex; align-items: center; gap: 0.2rem; }
  .navline__list > li { position: relative; border: 0; }
  .navline a, .navline__drop { width: auto; min-height: 2.6rem; padding: 0.4rem 0.8rem; border-radius: var(--r-sm); }
  .navline__list > li > a:hover, .navline__drop:hover { background: rgba(124, 196, 255, 0.1); }
  .navline__sub {
    position: absolute;
    top: calc(100% + 0.6rem);
    left: 0;
    min-width: 16rem;
    margin: 0;
    padding: 0.4rem;
    border: 1px solid rgba(124, 196, 255, 0.45);
    border-radius: var(--r-md);
    background: var(--navy-800);
    box-shadow: 0 18px 40px rgba(2, 10, 24, 0.45);
  }
  .navline__sub a { width: 100%; padding: 0.5rem 0.75rem; color: var(--on-navy); }
  .navline__sub a:hover { background: rgba(124, 196, 255, 0.12); }
  .brand__mark { height: 2.75rem; }
  .brand__word { height: 1rem; }
}

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

.breadpath { background: var(--ice); border-bottom: 1px solid var(--line-soft); }
/* left, on the same edge as the H1 under it */
.breadpath__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  margin: 0 auto;
  padding: 0.7rem 0;
  list-style: none;
  font-size: 0.93rem;
  color: var(--quiet);
}
.breadpath__list li + li::before { content: "›"; margin-right: 0.5rem; color: var(--quiet); }

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

.intro { background: var(--ice); padding: 2rem 0 2.25rem; }
/* the H1 runs the full width of the frame, the copy and the picture sit under it */
.intro h1 { margin: 0 0 1.25rem; font-size: 1.85rem; font-weight: 800; letter-spacing: -0.015em; }
.intro__inner { container-type: inline-size; }
/* From 64rem every H1 sits on one line across the frame (the client's rule for all
   sites, 30.09). The size follows the frame width and is set by the longest H1 on
   the site: "Corporate Debt Consolidation: Options for Canadian Businesses" is 29.4
   font-sizes wide in Red Hat Display 800 (measured in Chrome); 30.5 leaves room
   for the fallback face a first visit may get. From 48rem the size already follows
   the frame, never below 1.85rem, so there is no jump at 64rem: a tablet wraps a
   long H1 until the frame is wide enough (about 950px), phones wrap as before. */
@media (min-width: 48rem) {
  .intro h1 { font-size: max(1.85rem, min(2.85rem, 100cqi / 30.5)); }
}
.intro__grid { gap: 1.75rem; }
.intro__lede p { margin: 0 0 1rem; font-size: 1.15rem; line-height: 1.6; }
.intro__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin: 1.1rem 0 0; }
.intro__jump { font-weight: 700; }
.intro--plain { padding-bottom: 2rem; }

/* The picture is first in the markup. A phone shows it under the copy (order);
   a tablet floats it and the lede runs round it and on under it, so it is never
   cropped and leaves no hole to speak of; from 68.75rem it has a column of its own,
   where it keeps 3:2 as the least it takes and grows with a taller copy column
   down to a 1.25:1 cut; past that it is centred beside the copy (measured in
   ЗВІТ-ЕТАП-1.md). */
.intro__hero {
  order: 1;
  position: relative;
  /* stretch, not normal: for a grid item with an aspect ratio normal means start,
     and the box would take no width on a phone */
  justify-self: stretch;
  margin: 0 0 0.5rem;
  aspect-ratio: 3 / 2;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--frost);
  box-shadow: var(--offset);
}
.intro__hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.keyfigs { gap: 0.75rem; margin: 1.75rem 0 0; padding: 0; list-style: none; }
.keyfigs__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "icon num" "icon cap";
  align-items: center;
  column-gap: 0.75rem;
  padding: 0.75rem 0.9rem;
  border-top: 3px solid var(--azure-500);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  background: var(--paper);
}
.keyfigs__icon { grid-area: icon; width: 2.25rem; height: 2.25rem; padding: 0.5rem; border-radius: 50%; background: var(--frost); color: var(--blue-700); }
.keyfigs__num { grid-area: num; font: 800 1.02rem/1.2 var(--type-display); color: var(--ink); }
.keyfigs__cap { grid-area: cap; font-size: 0.84rem; line-height: 1.35; color: var(--quiet); }
@media (min-width: 30rem) { .keyfigs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* float up to 68.75rem (1100px), columns from there: measured on all seven pages,
   that is where the hole beside a float under a short lede outgrows the margin a
   long lede leaves round a centred picture */
@media (min-width: 40rem) and (max-width: 68.74rem) {
  .intro__grid { display: flow-root; }
  .intro__hero { float: right; width: 48%; margin: 0.35rem 0 1rem 1.75rem; }
}
@media (min-width: 68.75rem) {
  .intro__grid { container-type: inline-size; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; }
  .intro__main { grid-column: 1; grid-row: 1; align-self: center; }
  /* as tall as the copy, but cut no narrower than 1.25:1 — the alt texts name
     things at the edges of the pictures (the CN Tower, the score gauge) */
  .intro__hero { grid-column: 2; grid-row: 1; align-self: center; height: 100%; max-height: calc((100cqw - 3rem) / 2.5); margin: 0; }
}
@media (min-width: 64rem) {
  .intro { padding: 2.5rem 0 2.75rem; }
  .intro__lede p { font-size: 1.2rem; }
  /* two full rows: pages.json gives 6, 8 or 10 figures */
  .keyfigs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .keyfigs--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .keyfigs--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

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

/* A worksheet in a band of its own under the hero: the reader's lines on a ruled
   sheet at the left, the reading on a dark panel at the right, one bordered sheet
   with the peach offset shadow. Filled inputs with a rule under them, column heads
   once, dotted leaders in the totals: it reads as a statement, not a form card. */

.tally { padding: 2.5rem 0 2.75rem; background: var(--mist); }
.tally__head { max-width: 48rem; margin-bottom: 1.4rem; }
.tally__title { margin: 0 0 0.4rem; font-size: clamp(1.4rem, 1.15rem + 1vw, 1.85rem); }
.tally__lede { margin: 0; color: var(--quiet); }
/* the offset shadow reaches 8px into the page gutter, as it does on the hero picture */
.tally__sheet {
  border: 2px solid var(--navy-900);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper);
  box-shadow: var(--offset);
}
.tally__entry { padding: 1.25rem 1rem 1.2rem; }
.tally__readout { display: flex; flex-direction: column; padding: 1.35rem 1.1rem 1.25rem; background: var(--navy-900); color: var(--on-navy); }
.tally__readout :focus-visible { outline-color: var(--sky-300); }
.tally__note { max-width: 48rem; margin: 1.35rem 0 0; font-size: 0.88rem; line-height: 1.55; color: var(--quiet); }

/* -- the sheet */
.tally__group { margin: 0 0 1.4rem; padding: 0; border: 0; min-width: 0; }
.tally__group:last-child { margin-bottom: 0; }
/* floated, so the legend lays out like a heading inside the fieldset's padding */
.tally__legend { float: left; width: 100%; margin: 0 0 0.65rem; padding: 0; font: 800 0.8rem/1.2 var(--type-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-700); }
.tally__legend + * { clear: both; }
.tally__heads, .tally__row { display: grid; grid-template-columns: 1.85rem minmax(0, 1fr) minmax(0, 0.75fr) 2.25rem; gap: 0.55rem; align-items: center; }
.tally__heads { padding-bottom: 0.4rem; border-bottom: 2px solid var(--navy-900); font: 700 0.82rem/1.2 var(--type-display); color: var(--quiet); }
.tally__row { padding: 0.5rem 0; border-bottom: 1px dashed var(--line); }
.tally__num { display: grid; place-items: center; width: 1.85rem; height: 1.85rem; border: 2px solid var(--azure-500); border-radius: 8px; color: var(--blue-700); font: 800 0.85rem/1 var(--type-display); }
.tally__cell { display: block; min-width: 0; }
.tally__label { display: block; margin-bottom: 0.3rem; font-size: 0.88rem; font-weight: 700; line-height: 1.35; color: var(--ink); }
/* the column heads name the inputs on the debt lines; the labels stay for screen readers */
.tally__row .tally__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tally__box {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0 0.7rem;
  border-bottom: 2px solid var(--navy-800);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  background: var(--ice);
  color: var(--ink);
  font: 700 1.05rem/1 var(--type-display);
}
.tally__box:focus-within { outline: 3px solid var(--blue-600); outline-offset: 2px; background: var(--paper); }
.tally__box input, .tally__box select {
  width: 100%;
  min-width: 0;
  min-height: 2.75rem;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-variant-numeric: tabular-nums;
}
.tally__box input:focus, .tally__box select:focus { outline: none; }
.tally__box--select { padding-right: 0.3rem; }
.tally__unit { color: var(--quiet); }
.tally__remove {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--quiet);
  cursor: pointer;
}
.tally__remove:hover { background: var(--frost); color: var(--ink); }
.tally__remove[hidden] { display: none; }
.tally__remove svg { width: 16px; height: 16px; }
.tally__add {
  margin-top: 0.8rem;
  padding: 0.5rem 0.95rem;
  border: 2px dashed var(--blue-600);
  border-radius: 999px;
  background: transparent;
  color: var(--blue-600);
  font: 700 0.93rem/1.2 var(--type-display);
  cursor: pointer;
}
.tally__add:hover { background: var(--mist); }
.tally__add[hidden] { display: none; }
/* the lender's quote as a coupon clipped to the sheet */
.tally__group--quote { padding: 1rem 1rem 1.1rem; border: 2px dashed var(--silver-400); border-radius: var(--r-md); background: var(--ice); }
.tally__group--quote .tally__box { background: var(--paper); }
.tally__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
/* consumer proposal mode: one ledger line per figure */
.tally__cell--line { padding: 0.6rem 0; border-bottom: 1px dashed var(--line); }
.tally__cell--line:first-child { border-top: 2px solid var(--navy-900); }

/* -- the reading */
.tally__results { margin-bottom: 1.1rem; }
.tally__headline { margin: 0 0 1.2rem; }
.tally__headline dt { font: 800 0.8rem/1.3 var(--type-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-navy-dim); }
.tally__headline dd { margin: 0.25rem 0 0; font: 800 clamp(2rem, 1.6rem + 1.6vw, 2.7rem)/1.1 var(--type-display); color: var(--sky-300); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tally__headline.is-good dd { color: var(--sage-300); }
.tally__headline.is-bad dd { color: var(--rose-300); }
.tally__bars { gap: 0.9rem; margin: 0 0 1.1rem; }
.tally__barhead { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: 0 0 0.35rem; font-size: 0.9rem; line-height: 1.35; color: var(--on-navy-dim); }
.tally__barval { font: 700 1rem/1.2 var(--type-display); color: var(--on-navy); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tally__track { position: relative; display: flex; height: 0.8rem; border-radius: 999px; background: rgba(234, 242, 251, 0.14); overflow: hidden; }
.tally__fill { display: block; flex: none; width: 0; height: 100%; border-radius: 999px; background: var(--sage-300); transition: width 0.25s ease; }
.tally__fill.is-over { background: var(--rose-300); }
.tally__bar--now .tally__fill { background: var(--sky-300); }
.tally__bar--new .tally__fill { background: var(--azure-500); }
.tally__verdict {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.2rem 1rem;
  margin: 0 0 1rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid rgba(234, 242, 251, 0.22);
  border-radius: var(--r-sm);
  background: rgba(234, 242, 251, 0.07);
  font-size: 0.92rem;
  color: var(--on-navy-dim);
}
.tally__verdict strong { font: 800 1.15rem/1.2 var(--type-display); color: var(--on-navy); font-variant-numeric: tabular-nums; }
.tally__verdict.is-good { border-color: var(--sage-100); background: var(--sage-100); color: var(--prose); }
.tally__verdict.is-good strong { color: var(--sage-700); }
.tally__verdict.is-bad { border-color: var(--rose-100); background: var(--rose-100); color: var(--prose); }
.tally__verdict.is-bad strong { color: var(--rose-700); }
.tally__receipt { margin: 0 0 1rem; }
.tally__receipt div { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.3rem 0; font-size: 0.92rem; }
.tally__receipt dt { display: flex; flex: 1; align-items: baseline; min-width: 0; color: var(--on-navy-dim); }
.tally__receipt dt::after { content: ""; flex: 1; min-width: 1rem; margin-left: 0.5rem; border-bottom: 2px dotted rgba(234, 242, 251, 0.3); }
.tally__receipt dd { margin: 0; font: 700 1rem/1.2 var(--type-display); color: var(--on-navy); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tally__hint { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--on-navy-dim); }
.tally__hint[hidden] { display: none; }
.tally__flags { display: grid; gap: 0.5rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.tally__flags:empty { display: none; }
.tally__flags li { padding: 0.6rem 0.8rem; border-radius: var(--r-sm); font-size: 0.9rem; font-weight: 600; line-height: 1.45; }
.tally__flags .is-warn { background: var(--rose-100); color: var(--rose-700); }
.tally__flags .is-info { background: var(--frost); color: var(--ink); }
.tally__cta { margin: auto 0 0; }

/* utilization: the track, the 30% mark from the article, the ends of the scale */
.tally__meter { position: relative; margin: 0 0 1.1rem; padding-top: 1.45rem; }
.tally__meter .tally__track { height: 1rem; }
.tally__mark { position: absolute; top: 0; left: 30%; transform: translateX(-50%); font: 800 0.8rem/1 var(--type-display); color: var(--on-navy); }
.tally__mark::after { content: ""; position: absolute; top: 1.05rem; left: 50%; width: 2px; height: 1.55rem; margin-left: -1px; background: var(--on-navy); }
.tally__scale { display: flex; justify-content: space-between; margin-top: 0.35rem; font-size: 0.8rem; color: var(--on-navy-dim); }

/* consumer proposal: the income as one bar, split the way it is spent */
.tally__split { margin: 0 0 1.1rem; }
.tally__split .tally__track { height: 1rem; }
.tally__seg { display: block; flex: none; width: 0; height: 100%; transition: width 0.25s ease; }
.tally__seg--proposal, .tally__key--proposal::before { background: var(--sky-300); }
.tally__seg--newpay, .tally__key--newpay::before { background: var(--azure-500); }
.tally__seg--costs, .tally__key--costs::before { background: var(--silver-300); }
.tally__seg--left, .tally__key--left::before { background: var(--sage-300); }
.tally__keys { display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; margin: 0.6rem 0 0; padding: 0; list-style: none; font-size: 0.85rem; color: var(--on-navy-dim); }
.tally__key { display: inline-flex; align-items: center; gap: 0.4rem; }
.tally__key::before { content: ""; flex: none; width: 0.75rem; height: 0.75rem; border-radius: 3px; }

@media (min-width: 30rem) {
  .tally__entry { padding: 1.4rem 1.35rem 1.3rem; }
  .tally__readout { padding: 1.5rem 1.35rem 1.35rem; }
  .tally__cell--line { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 11rem); align-items: center; gap: 1rem; }
  .tally__cell--line .tally__label { margin: 0; }
}
@media (min-width: 56rem) {
  .tally { padding: 3rem 0 3.25rem; }
  .tally__sheet { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .tally__entry { padding: 1.75rem 2rem 1.6rem; }
  .tally__readout { padding: 1.75rem 2rem 1.6rem; }
}

/* ------------------------------------------------------------------ article */

.readwrap { padding: 2.25rem 0 3rem; }
.story { width: 100%; max-width: 48rem; margin-inline: auto; }
.story::after { content: ""; display: block; clear: both; }
.story p { margin: 0 0 1.05rem; }
.story h2 { clear: both; margin: 2.6rem 0 1rem; font-size: clamp(1.4rem, 1.15rem + 1vw, 1.85rem); }
.chapter:first-child h2 { margin-top: 0; }
.story h3 { margin: 1.75rem 0 0.7rem; font-size: 1.2rem; color: var(--blue-600); }
.story ul, .story ol { margin: 0 0 1.25rem; padding-left: 1.35rem; }
.story li { margin: 0.4rem 0; padding-left: 0.2rem; }
.story ul > li::marker { color: var(--blue-700); }
.story ol { list-style: none; padding-left: 0; counter-reset: n; }
.story ol > li { position: relative; min-height: 1.9rem; padding-left: 2.6rem; counter-increment: n; }
.story ol > li::before {
  content: counter(n);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border: 2px solid var(--azure-500);
  border-radius: 8px;
  color: var(--blue-700);
  font: 800 0.9rem/1 var(--type-display);
}
.story strong { color: var(--ink); }

.photo { margin: 0.3rem 0 1.25rem; }
.photo img { width: 100%; border-radius: var(--r-md); }
@media (min-width: 50rem) {
  .photo { width: min(46%, 22rem); }
  .photo--r { float: right; margin: 0.35rem 0 1rem 1.6rem; }
  .photo--l { float: left; margin: 0.35rem 1.6rem 1rem 0; }
  .photo--small { width: min(32%, 15rem); }
}

.gridscroll { clear: both; margin: 0 0 1.5rem; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
.gridscroll table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: 0.97rem; }
.gridscroll th, .gridscroll td { padding: 0.75rem 0.9rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-soft); }
.gridscroll thead th { background: var(--navy-900); color: var(--on-navy); font: 700 0.95rem/1.35 var(--type-display); border-bottom: 0; }
.gridscroll tbody th { background: var(--ice); color: var(--ink); font-weight: 700; }
.gridscroll tbody tr:nth-child(even) td { background: #F7FAFD; }
.gridscroll tbody tr:last-child th, .gridscroll tbody tr:last-child td { border-bottom: 0; }

.weigh { clear: both; gap: 1rem; margin: 0 0 1.5rem; }
.weigh__side { padding: 1rem 1.1rem 0.4rem; border-radius: var(--r-md); border: 1px solid transparent; }
.weigh__side--pro { background: var(--sage-100); border-color: rgba(44, 106, 82, 0.25); }
.weigh__side--con { background: var(--rose-100); border-color: rgba(161, 58, 54, 0.25); }
.weigh__head { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.35rem !important; font: 800 1.05rem/1.3 var(--type-display); }
.weigh__side--pro .weigh__head { color: var(--sage-700); }
.weigh__side--con .weigh__head { color: var(--rose-700); }
.weigh ul { margin-bottom: 0.75rem; }
.weigh__side--pro ul > li::marker { color: var(--sage-700); }
.weigh__side--con ul > li::marker { color: var(--rose-700); }
@media (min-width: 44rem) { .weigh { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

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

/* 30.09, замовник: текст по обох краях, як у Word; переноси тримають проміжки рівними */
.story p, .story li { text-align: justify; -webkit-hyphens: auto; hyphens: auto; }

/* ------------------------------------------------------ side notes (30.09)
   Two notes per chapter (icon, a short head, one line from that chapter) stand
   in the text on the right, and the text flows around them. The article takes
   the full width. The cards keep the right edge; a right-hand picture stands next
   to them, top-aligned. They only ever stand beside plain text: in each chapter
   they are placed at the first run of paragraphs long enough to hold them, so
   a table, a pros/cons block or a button never sits beside them (the client, 30.09).
   The FAQ has none. On narrower screens there is no room, so they are not shown. */
.sidenote { display: none; }
@media (min-width: 64rem) {
  .story--noted { max-width: none; }
  .sidenote { display: block; float: right; width: 15rem; margin: 0.35rem 0 1.1rem 1.75rem; }
  .story .sidenote__list { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
  .story .sidenote__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.45rem 0.65rem;
    margin: 0;
    padding: 0.8rem 0.9rem 0.85rem;
    border: 1px solid var(--line-soft);
    border-left: 3px solid var(--azure-500);
    border-radius: var(--r-sm);
    background: var(--ice);
    text-align: left;
    -webkit-hyphens: manual;
    hyphens: manual;
  }
  .sidenote__icon {
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 9px;
    background: var(--navy-900);
    color: var(--sky-300);
  }
  .sidenote__svg { width: 1.15rem; height: 1.15rem; }
  .sidenote__head { font: 700 0.95rem/1.25 var(--type-display); color: var(--ink); }
  .sidenote__text { grid-column: 1 / -1; font-size: 0.86rem; line-height: 1.45; color: var(--quiet); }
}
@media (min-width: 75rem) {
  .sidenote { width: 16.5rem; }
}

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

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

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

.testimony { padding: 2.75rem 0 2.5rem; background: var(--frost); }
.testimony__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.testimony__title { margin: 0; font-size: clamp(1.4rem, 1.15rem + 1vw, 1.85rem); }
/* the same average and count the AggregateRating in the markup carries */
.testimony__summary { margin: 0.3rem 0 0; font-size: 0.95rem; font-weight: 700; color: var(--quiet); }
.testimony__arrows { display: flex; gap: 0.5rem; }
.testimony__arrow {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 2px solid var(--navy-900);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--navy-900);
  cursor: pointer;
}
.testimony__arrow:disabled { opacity: 0.35; cursor: default; }
.testimony__rail {
  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 rail by itself after load and PageSpeed reports NO_LCP */
  scroll-padding-inline: 6px;
  scrollbar-width: thin;
}
@media (min-width: 44rem) { .testimony__rail { grid-auto-columns: calc((100% - 1rem) / 2); } }
@media (min-width: 70rem) { .testimony__rail { grid-auto-columns: calc((100% - 2rem) / 3); } }
.testimony__card { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.2rem 1.25rem; border-radius: var(--r-md); background: var(--paper); border: 1px solid #D6E0EC; scroll-snap-align: start; }
.testimony__stars { margin: 0; color: var(--gold-600); letter-spacing: 0.12em; font-size: 1.05rem; }
.testimony__quote { flex: 1; margin: 0; }
.testimony__quote p { margin: 0; }
.testimony__who { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.6rem; margin: 0; font-size: 0.95rem; }
.testimony__badge { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 10px; background: var(--navy-900); color: var(--sky-300); font: 700 0.9rem/1 var(--type-display); }
.testimony__name { font-weight: 700; color: var(--ink); }
.testimony__place { color: var(--quiet); }
.testimony__dots { display: flex; justify-content: center; gap: 0.35rem; margin-top: 1rem; }
.testimony__dots button { width: 1.5rem; height: 1.5rem; padding: 0; border: 0; background: transparent; cursor: pointer; }
.testimony__dots button::before { content: ""; display: block; width: 0.6rem; height: 0.6rem; margin: auto; border-radius: 3px; background: #B7C4D4; }
.testimony__dots button[aria-current="true"]::before { background: var(--navy-900); transform: scale(1.25); }
.testimony__cta { display: flex; justify-content: center; margin: 1.5rem 0 0; }

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

/* a light band, the pitch at the left and four icon cards at the right — not a dark
   strip with a centred paragraph and two buttons, which is what odsp has */
.closer { padding: 3rem 0 3.25rem; background: var(--paper); border-top: 1px solid var(--line-soft); }
.closer__inner { gap: 2rem; align-items: center; }
.closer__title { margin: 0 0 0.6rem; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); }
.closer__copy { max-width: 34rem; margin: 0 0 1.4rem; font-size: 1.1rem; line-height: 1.6; }
.closer__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.5rem; margin: 0; }
.closer__link { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; }
.pluses { gap: 0.9rem; margin: 0; padding: 0; list-style: none; }
.pluses__item { position: relative; padding: 1.15rem 1.2rem 1.1rem 4.4rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--ice); }
.pluses__icon { position: absolute; top: 1.1rem; left: 1.1rem; width: 2.5rem; height: 2.5rem; padding: 0.55rem; border-radius: 12px; background: var(--azure-500); color: var(--paper); }
.pluses__title { margin: 0 0 0.25rem; font: 800 1.05rem/1.3 var(--type-display); color: var(--ink); }
.pluses__text { margin: 0; font-size: 0.95rem; line-height: 1.5; color: var(--quiet); }
@media (min-width: 40rem) { .pluses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .closer__inner { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 3rem; } }

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

.sitefoot { background: var(--navy-900); color: var(--on-navy-dim); font-size: 0.95rem; border-top: 1px solid rgba(124, 196, 255, 0.16); }
.sitefoot a { color: var(--on-navy); text-decoration-color: rgba(234, 242, 251, 0.45); }
.sitefoot a:hover { color: var(--sky-300); }
.sitefoot :focus-visible { outline-color: var(--sky-300); }
.sitefoot__top { gap: 2rem; padding: 2.75rem 0 2rem; }
.sitefoot__about { margin: 1rem 0 0; line-height: 1.6; }
.sitefoot__heading { margin: 0 0 0.75rem; font: 800 0.8rem/1.2 var(--type-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sky-300); }
.sitefoot__col ul { margin: 0; padding: 0; list-style: none; }
.sitefoot__col li { margin: 0 0 0.55rem; }
.sitefoot__col a[aria-current="page"] { color: var(--sky-300); }
.sitefoot__contact li { display: flex; align-items: flex-start; gap: 0.6rem; }
.sitefoot__contact .ico { margin-top: 0.15rem; color: var(--sky-300); }
.sitefoot__key { display: block; font-size: 0.85rem; color: var(--on-navy-dim); }
.sitefoot__contact .pending { color: var(--on-navy); }
.sitefoot__legal { padding: 1.5rem 0 2rem; border-top: 1px solid rgba(124, 196, 255, 0.16); font-size: 0.88rem; line-height: 1.6; }
.sitefoot__legal p { margin: 0 0 0.75rem; }
.sitefoot__caution { color: var(--on-navy); font-weight: 700; }
.sitefoot__copy { margin-bottom: 0 !important; }
@media (min-width: 44rem) { .sitefoot__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .sitefoot__top { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.05fr) minmax(0, 0.9fr) minmax(0, 1.2fr); gap: 2.5rem; } }

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

.request { padding: 1.5rem 1.25rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow); }
.request__title { margin: 0 0 0.4rem; font-size: 1.4rem; }
.request__intro { margin: 0 0 0.9rem; color: var(--quiet); font-size: 0.98rem; }
.request__status:empty { display: none; }
.request__status { margin: 0 0 1rem; padding: 0.7rem 0.9rem; border-radius: var(--r-sm); background: var(--frost); color: var(--ink); font-weight: 700; }
.request__fields { margin: 0; padding: 0; border: 0; min-width: 0; }
.request__grid { gap: 0.9rem; margin-bottom: 1rem; }
@media (min-width: 40rem) { .request__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.entry label { display: block; margin-bottom: 0.3rem; font-weight: 700; color: var(--ink); }
.entry input, .entry textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.55rem 0.8rem;
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}
.entry textarea { min-height: 7rem; resize: vertical; }
.entry input:focus, .entry textarea:focus { border-color: var(--blue-600); outline: 3px solid rgba(0, 96, 176, 0.22); outline-offset: 0; }
.entry input:disabled { background: var(--ice); }
.entry__hint { margin: 0.3rem 0 0; font-size: 0.86rem; color: var(--quiet); }
.okbox { display: flex; align-items: flex-start; gap: 0.7rem; margin: 0 0 1.25rem; font-size: 0.95rem; line-height: 1.5; cursor: pointer; }
.okbox input { flex: none; width: 1.3rem; height: 1.3rem; margin: 0.15rem 0 0; accent-color: var(--blue-600); }
.flash { margin: 0 0 1rem; padding: 0.85rem 1rem; border-radius: var(--r-sm); font-weight: 700; }
.flash--good { background: var(--sage-100); color: var(--sage-700); }
.flash--bad { background: var(--rose-100); color: var(--rose-700); }

.feedback { padding: 1.5rem 1.25rem; border-radius: var(--r-lg); background: var(--paper); }
.feedback__title { margin: 0 0 0.4rem; font-size: 1.35rem; padding-right: 3rem; }
.feedback__intro { margin: 0 0 0.85rem; color: var(--quiet); }
.feedback__status:empty { display: none; }
.feedback__status { margin: 0 0 0.9rem; font-weight: 700; color: var(--sage-700); }
.feedback__fields { gap: 0.9rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.feedback__fields[disabled] { opacity: 0.6; }
.feedback__acts { margin: 1.1rem 0 0; }
.feedback__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 turns gold, like the review cards. */
.feedback__score { grid-column: 1 / -1; min-width: 0; margin: 0; padding: 0; border: 0; }
.feedback__score-legend { margin: 0 0 0.3rem; padding: 0; font-weight: 700; color: var(--ink); }
.feedback__score-row { display: flex; }
.feedback__score-input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.feedback__score-star { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--r-sm); color: var(--quiet); cursor: pointer; }
.feedback__score-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; }
.feedback__score-row:has(.feedback__score-input:checked) .feedback__score-star { color: var(--gold-600); }
.feedback__score-row:has(.feedback__score-input:checked) .feedback__score-star svg { fill: var(--gold-600); }
.feedback__score-input:checked + .feedback__score-star ~ .feedback__score-star { color: var(--quiet); }
.feedback__score-input:checked + .feedback__score-star ~ .feedback__score-star svg { fill: transparent; }
@media (hover: hover) {
  .feedback__score-row.feedback__score-row:hover .feedback__score-star.feedback__score-star { color: var(--gold-600); }
  .feedback__score-row.feedback__score-row:hover .feedback__score-star.feedback__score-star svg { fill: var(--gold-600); }
  .feedback__score-row.feedback__score-row:hover .feedback__score-star:hover ~ .feedback__score-star.feedback__score-star { color: var(--quiet); }
  .feedback__score-row.feedback__score-row:hover .feedback__score-star:hover ~ .feedback__score-star.feedback__score-star svg { fill: transparent; }
}
.feedback__score-input:focus-visible + .feedback__score-star { outline: 3px solid var(--blue-600); outline-offset: 1px; }
.feedback__score.is-missing .feedback__score-legend,
.feedback__score.is-missing .feedback__score-star { color: var(--rose-700); }
@media (min-width: 40rem) {
  .feedback__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .entry--wide { grid-column: 1 / -1; }
}

.modal { width: min(100% - 1.5rem, 36rem); max-height: calc(100% - 1.5rem); padding: 0; border: 0; border-radius: var(--r-lg); background: transparent; }
.modal::backdrop { background: rgba(3, 12, 26, 0.66); }
.modal__panel { position: relative; }
.modal__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: var(--r-sm);
  background: var(--ice);
  color: var(--ink);
  cursor: pointer;
}
.modal .request { box-shadow: none; padding-top: 1.6rem; }
.modal .request__title { padding-right: 3rem; }

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

.contactwrap { gap: 1.75rem; padding: 2rem 0 3rem; align-items: start; }
@media (min-width: 56rem) { .contactwrap { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 2.5rem; } }
.touch { gap: 1.25rem; }
.touch__cards { gap: 0.75rem; margin: 0; }
.touch__card { padding: 1rem 1.1rem; border: 1px solid var(--line); border-left: 4px solid var(--azure-500); border-radius: var(--r-md); background: var(--ice); }
.touch__card dt { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.3rem; font: 700 1rem/1.3 var(--type-display); color: var(--ink); }
.touch__card dt .ico { color: var(--blue-700); }
.touch__card dd { margin: 0; }
.touch__map iframe { display: block; width: 100%; height: 22rem; border: 0; border-radius: var(--r-md); }

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

.notfound { padding: 3.5rem 0 4.5rem; text-align: center; }
.notfound__code { margin: 0; font: 800 clamp(4rem, 3rem + 6vw, 7rem)/1 var(--type-display); color: var(--blue-700); }
.notfound h1 { margin: 0.5rem 0 1rem; font-size: clamp(1.8rem, 1.3rem + 2vw, 2.5rem); }
.notfound__lede { max-width: 40rem; margin: 0 auto 1.5rem; text-align: left; }
.notfound__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
.notfound .flash { max-width: 40rem; margin-inline: auto; text-align: left; }