/*
 * Lev Credit — public-site layout (spec §5.a; ADR 0025). The header / footer / page
 * layout only (these are NOT component-library components); the page CONTENT composes the
 * {% lc_* %} library. Tokens ONLY — the branding gate enforces zero hex + WCAG AA. The
 * footer's blue is the AA variant (--lc-brand-secondary-aa) + white, never the bright-fill
 * internal-admin exception. The bright brand colours are never used here.
 */

/* THE PAGE CANVAS (ADR 0131, s16): the body itself carries the dawn — never
 * stark white. Gated by test_client_beauty.py::CanvasTests + the harness
 * computed-style check on every manifest page. */
.lc-public {
  margin: 0;
  background-color: var(--lc-canvas-day);
  background-image: var(--lc-wash-page);
  background-repeat: no-repeat;
  color: var(--lc-grey-900);
  font-family: var(--lc-font-sans);
  font-size: var(--lc-text-base);
  line-height: 1.5;
}

/* Skip link (accessibility) */
.lc-public-skip {
  position: absolute; left: var(--lc-space-2); top: -3rem;
  background: var(--lc-white); color: var(--lc-grey-900);
  padding: var(--lc-space-2) var(--lc-space-3); border-radius: var(--lc-radius-sm);
  z-index: var(--lc-z-header);
}
.lc-public-skip:focus { top: var(--lc-space-2); }

/* --- Sticky header (AMD-001) — ONE LINE at every width (ADR 0134, owner n1).
 * Brand left, the nav strip center, phone + auth right — a single nowrap flex
 * row at 390 and at 1920 alike. The nav is an ALWAYS-VISIBLE single-line
 * swipeable strip: no hamburger, no hidden menu, no click to reveal — it
 * scrolls INSIDE its own overflow-x container (the ADR-0108 page-level
 * no-hscroll law), snaps per tab, and paints CSS-only edge-fade hints
 * (background-attachment: local white covers riding the content over
 * scroll-anchored ink shadows — a fade shows ONLY toward cut-off tabs).
 * The supersession of the ADR-0131 two-row lg grid is deliberate,
 * re-pinned by apps/public/tests/test_one_line_header.py. */
/* THE CONTINUOUS-WIDTH LAW (ADR 0187, owner item 7) applied to the one-line
 * bar. Measured at HEAD: the bar's incompressible content - wordmark + phone +
 * "Вход" + the apply chip + three 8px separations + its gutter - came to
 * 365px, so EVERY PUBLIC PAGE scrolled horizontally at 360px, the narrowest
 * real phone. Nothing had ever seen it because the review viewports jump 390 ->
 * 768 and the law only ever failed BELOW the lowest of them.
 *
 * The fix is a fluid GUTTER rather than a new breakpoint: the bar's own metric
 * narrows continuously with the window, so it holds at 360 with room to spare
 * instead of clearing one number and breaking at the next. The 8px separations
 * are the ADR-0186 target-gap FLOOR and are deliberately untouched - what gives
 * way is the chrome around the targets, never the space between them. */
.lc-public-header {
  position: sticky; top: 0; z-index: var(--lc-z-header);
  display: flex; flex-wrap: nowrap; align-items: center; gap: var(--lc-target-gap);
  padding: var(--lc-space-2) clamp(var(--lc-space-1), 1.2vw, var(--lc-space-2));
  background: var(--lc-white); color: var(--lc-grey-900);
  border-bottom: var(--lc-border-width) solid var(--lc-grey-300);
  box-shadow: var(--lc-shadow-sm);
}
.lc-public-header__brand {
  flex: 0 0 auto;
  font-weight: var(--lc-weight-black); font-size: 1.25rem; color: var(--lc-grey-900);
  text-decoration: none;
}
.lc-public-header__brand:focus-visible,
.lc-public-nav a:focus-visible,
.lc-public-header__phone-number:focus-visible,
.lc-public-footer a:focus-visible,
.lc-public-skip:focus-visible {
  outline: var(--lc-focus-ring-width) solid var(--lc-focus-ring-color);
  outline-offset: var(--lc-focus-ring-offset);
}
.lc-public-nav {
  position: relative;
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-wrap: nowrap; align-items: center; gap: var(--lc-target-gap);
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  background-image:
    linear-gradient(90deg, var(--lc-white) 45%, transparent),
    linear-gradient(270deg, var(--lc-white) 45%, transparent),
    radial-gradient(farthest-side at 0 50%, var(--lc-edge-hint), transparent),
    radial-gradient(farthest-side at 100% 50%, var(--lc-edge-hint), transparent);
  background-position: left center, right center, left center, right center;
  background-size: 2.5rem 100%, 2.5rem 100%, 0.75rem 100%, 0.75rem 100%;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.lc-public-nav::-webkit-scrollbar { display: none; }
.lc-public-nav a {
  display: inline-flex; align-items: center; min-height: var(--lc-hit-target);
  padding: 0 var(--lc-space-2); border-radius: var(--lc-radius-md);
  color: var(--lc-grey-900); text-decoration: none;
  white-space: nowrap; flex: 0 0 auto; scroll-snap-align: start;
}
.lc-public-nav a:hover { color: var(--lc-link); }
.lc-public-nav a[aria-current="page"] { font-weight: var(--lc-weight-semibold); color: var(--lc-link); }

/* Client-portal entry points in the header (owner-reported #6; ADR 0082) — existing
 * clients log in, new visitors apply. The two actions are {% lc_button %} library buttons
 * (the AA brand fills + white from components.css); this is layout chrome ONLY — the
 * cluster never wraps or shrinks on the one-line bar; no colour declared here. */
.lc-public-header__auth {
  flex: 0 0 auto;
  display: flex; flex-wrap: nowrap; align-items: center; gap: var(--lc-target-gap);
}
/* The bar's chips ride slimmer padding + the sm type size — every reclaimed
 * pixel widens the nav strip's window on the one line (heights/hit targets
 * untouched). */
.lc-public-header__auth .lc-btn--sm {
  /* Fluid with the window for the ADR-0187 reason above - the chip's PADDING
   * gives way, its label and its 44px target never do. The FLOOR of the
   * clamp is the ADR-0191 ink floor (6px): a chip whose label ink sits 4px
   * from its own painted border fails Q2.5 at EVERY width, which is what the
   * space-1 floor measured as. */
  padding-inline: clamp(calc(var(--lc-space-1) + var(--lc-space-1) / 2),
                        1.2vw, var(--lc-space-2));
  font-size: var(--lc-text-sm);
}
.lc-public-header__auth .lc-btn--ghost.lc-btn--sm {
  padding-inline: calc(var(--lc-space-1) + var(--lc-space-1) / 2);
}
/* Signed-in state (owner item 3): the logout POST form sits inline beside "My account". */
.lc-public-header__logout { display: inline-flex; align-items: center; margin: 0; }

/* s18 (ADR 0130) compacted onto the one line (n1): a small receiver glyph
 * beside the tel: link — the icon+number tap target; the italic city-call
 * cost note still joins DIRECTLY beneath the number at the canonical 60rem
 * (the pinned s18 breakpoint choice — the number renders alone below md). */
.lc-public-header__phone {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--lc-space-1);
}
.lc-public-header__phone-icon {
  display: block; width: 0.75rem; height: 0.75rem; color: var(--lc-link);
}
.lc-public-header__phone-stack { display: flex; flex-direction: column; align-items: flex-start; }
.lc-public-header__phone-number {
  display: inline-flex; align-items: center; min-height: var(--lc-hit-target);
  font-size: var(--lc-text-sm);
  font-weight: var(--lc-weight-semibold); color: var(--lc-link); text-decoration: none;
  white-space: nowrap;
}
.lc-public-header__phone-number:hover { text-decoration: underline; color: var(--lc-link-hover); }
.lc-public-header__phone-note {
  display: none; font-style: italic;
  font-size: var(--lc-text-sm); color: var(--lc-grey-700);
  white-space: nowrap;
}
@media (min-width: 60rem) {
  .lc-public-header__phone-note { display: block; }
  .lc-public-header__phone-number { font-size: var(--lc-text-base); }
  .lc-public-header { gap: var(--lc-space-2); padding: var(--lc-space-2) var(--lc-space-3); }
  .lc-public-nav a { padding: 0 var(--lc-space-3); }
  .lc-public-header__auth { gap: var(--lc-space-2); }
  .lc-public-header__phone-number { font-weight: var(--lc-weight-bold); }
}

/* From lg the line breathes: wider gutters, the full-size wordmark, and the
 * strip centers its tabs WHEN THEY FIT — "safe" falls back to start-aligned
 * scrolling on overflow (a centered overflowing row would clip its left end
 * unreachably). */
@media (min-width: 75rem) {
  .lc-public-header { gap: var(--lc-space-4); padding: var(--lc-space-2) var(--lc-space-5); }
  .lc-public-nav { justify-content: safe center; }
}

/* --- Main / page layout utilities (used by the page templates) ----------- */
/* NO SINGLE TOKEN MAY WIDEN THE PAGE (ADR 0178). A bare URL printed in prose -
 * the agent-surface docs quote their own endpoints - has no break opportunity,
 * so at 390px it pushed the DOCUMENT into horizontal scroll, breaking the
 * ADR-0108 law on a page no hand-picked gallery had ever looked at. `anywhere`
 * breaks such a token ONLY when it would otherwise overflow, and (unlike
 * `break-word`) it also lets the min-content width shrink, which is what makes
 * a flex/grid item holding one actually give way. The same rule already guards
 * `.lc-declaration`, the office rail and the PDF sheet. */
.lc-public-main {
  max-width: 72rem; margin: 0 auto; padding: var(--lc-space-6) var(--lc-space-5);
  overflow-wrap: anywhere;
}
/* ADR 0191 (DP1/A1): HEADINGS wrap between words, never inside one - the
 * anywhere law above shredded the /zayavka/ H1 to a stranded lone „е" at 390.
 * A heading's words are dictionary words; a heading that genuinely cannot fit
 * a word is a copy problem, not a wrapping instruction. */
/* `break-word`, not `normal` (DP1 final sweep): under `normal` the /zayavka h1
 * measured "кандидатстване" CLIPPED at the hero's own clip edge at 360 - an
 * unfittable word must still break; a fitting word still never does. */
.lc-public h1, .lc-public h2, .lc-public h3 { overflow-wrap: break-word; }
/* The wizard instrument cards' label words wrap between words too (DP1/A1:
 * the anywhere grain shredded them at 360). */
.lc-instrument-card__label,
.lc-instrument-card__note { overflow-wrap: break-word; }
/* MORNING LEV (ADR 0118): every page opens on the dawn wash — sky light into
 * sun light — with a soft sun-glow veil rising from the lower corner. The glow
 * is an absolutely positioned pseudo-element (zero layout shift; decorative
 * only), kept behind the hero content by the isolated stacking context. */
.lc-public-hero {
  background: var(--lc-wash-dawn); color: var(--lc-grey-900);
  padding: var(--lc-space-8) var(--lc-space-6); border-radius: var(--lc-radius-lg);
  margin-bottom: var(--lc-space-6);
  border: var(--lc-border-width) solid var(--lc-sky-100);
  position: relative; isolation: isolate; overflow: hidden;
}
.lc-public-hero::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  right: -12%; bottom: -45%; width: 55%; aspect-ratio: 1;
  border-radius: var(--lc-radius-pill);
  background: radial-gradient(circle, var(--lc-veil-sun-strong) 0%, var(--lc-veil-sun) 55%, transparent 75%);
}
.lc-public-hero::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: -10%; top: -55%; width: 45%; aspect-ratio: 1;
  border-radius: var(--lc-radius-pill);
  background: radial-gradient(circle, var(--lc-veil-sky-strong) 0%, var(--lc-veil-sky) 55%, transparent 75%);
}
.lc-public-hero h1 { font-size: 2.25rem; font-weight: var(--lc-weight-extrabold); margin: 0 0 var(--lc-space-3); }
.lc-public-hero p { color: var(--lc-grey-700); max-width: 44rem; }
/* Simple heroes (offices / how-to-pay / blog-less pages): the spot art fills
 * the empty right half as a large in-wash composition instead of floating
 * small under the copy (ADR 0131 round 2). Absolute = zero layout shift;
 * z-index -1 keeps it under the copy inside the hero's isolated context. */
@media (min-width: 60rem) {
  .lc-public-hero > .lc-public-art--spot {
    position: absolute; z-index: -1;
    right: var(--lc-space-8); top: 50%; transform: translateY(-50%);
    max-width: 24rem;
  }
}
.lc-public-section { margin-block: var(--lc-space-6); }
.lc-public-section__title { font-size: 1.5rem; margin-bottom: var(--lc-space-4); }
.lc-public-grid {
  display: grid; gap: var(--lc-space-4);
  /* min(…, 100%) keeps the track able to shrink below the ideal on very
   * narrow viewports — no page-level horizontal scroll at ANY width (ADR 0108). */
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}
.lc-public-callout {
  background: var(--lc-wash-sky); color: var(--lc-grey-900);
  border-left: var(--lc-space-1) solid var(--lc-info);
  border-radius: var(--lc-radius-md);
  padding: var(--lc-space-4) var(--lc-space-5); margin-block: var(--lc-space-5);
}
.lc-public-prose { max-width: 48rem; }
.lc-public-prose h2 { font-size: 1.375rem; font-weight: var(--lc-weight-bold); margin-top: var(--lc-space-6); }
.lc-public-prose p, .lc-public-prose li { color: var(--lc-grey-900); }

/* --- Footer (AA blue + white) ---------------------------------------------
 * MORNING LEV: the deep dusk band — a gradient from the AA blue into
 * --lc-sky-deep; white text holds AA on BOTH stops (4.66:1 / 7.24:1). The
 * bright fills still never appear on this sheet (the test_public.py pin). */
.lc-public-footer {
  background: var(--lc-brand-secondary-aa);
  background-image: var(--lc-wash-deep);
  color: var(--lc-on-brand);
  padding: var(--lc-space-6) var(--lc-space-5);
}
.lc-public-footer__inner { max-width: 72rem; margin: 0 auto; }
.lc-public-footer__reg { max-width: 52rem; margin-bottom: var(--lc-space-5); }
.lc-public-footer__nav { display: flex; flex-wrap: wrap; gap: var(--lc-space-4); }
.lc-public-footer a {
  color: var(--lc-on-brand); text-decoration: underline;
  display: inline-flex; align-items: center; min-height: var(--lc-hit-target);
}

/* --- The §5.b quick-lead form (ADR 0044 part 2) ---------------------------
 * Layout chrome only — the fields themselves are {% lc_* %} library components
 * (components.css). Tokens ONLY; the collapsed <details> sections carry the
 * "helps us prepare a better offer" optional blocks. */
/* The form reads as ONE contained document sheet on the canvas (ADR 0131 —
 * round-1 verdict: the on-page application ran ~5 000px of unbounded white). */
.lc-public-form {
  display: grid;
  /* ADR 0178: an implicit grid column is `auto`, and a grid item will not go
   * below its own min-content width - so one unbreakable field or a nowrap
   * control widens the whole page. Every grid declares a shrinkable track. */
  grid-template-columns: minmax(0, 1fr); gap: var(--lc-space-4); max-width: 56rem;
  /* CENTRE THE BOUNDED COLUMN (ADR 0178). The 56rem cap is right - a form field
   * wider than that is unpleasant to fill in - but without `margin-inline: auto`
   * the sheet hugged the left edge of a 72rem main, so /zayavka/ carried a
   * 704px void down its whole right side at 1920 while the form crowded left.
   * A bounded column belongs in the MIDDLE of its measure; its siblings
   * (.lc-public-panel) have always centred, and this brings the form into line. */
  margin-inline: auto;
  background: var(--lc-white);
  border: var(--lc-border-width) solid var(--lc-grey-300);
  border-radius: var(--lc-radius-lg);
  box-shadow: var(--lc-shadow-xs);
  padding: var(--lc-space-5);
}
/* Field-group grid: single column (the focused form ethos) below md; logical
 * two-across grouping at ≥60rem — the canonical md breakpoint (ADR 0108). */
.lc-public-form__grid {
  display: grid; gap: var(--lc-space-4);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 60rem) {
  .lc-public-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.lc-public-form__section {
  border: var(--lc-border-width) solid var(--lc-grey-300);
  border-radius: var(--lc-radius-md);
  padding: var(--lc-space-5);
  margin: 0;
  display: grid;
  /* ADR 0178: an implicit grid column is `auto`, and a grid item will not go
   * below its own min-content width - so one unbreakable field or a nowrap
   * control widens the whole page. Every grid declares a shrinkable track. */
  grid-template-columns: minmax(0, 1fr); gap: var(--lc-space-3);
}
.lc-public-form__legend {
  font-weight: var(--lc-weight-semibold); padding: 0 var(--lc-space-2);
}
.lc-public-form__details {
  border: var(--lc-border-width) solid var(--lc-grey-300);
  border-radius: var(--lc-radius-md);
  background: var(--lc-cream);
}
.lc-public-form__details[open] { background: var(--lc-white); }
.lc-public-form__details > summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--lc-space-2);
  cursor: pointer;
  min-height: var(--lc-hit-target);
  padding: var(--lc-space-3) var(--lc-space-5);
  border-radius: var(--lc-radius-md);
}
.lc-public-form__details > summary:focus-visible {
  outline: var(--lc-focus-ring-width) solid var(--lc-focus-ring-color);
  outline-offset: var(--lc-focus-ring-offset);
}
.lc-public-form__summary-title { font-weight: var(--lc-weight-semibold); }
.lc-public-form__summary-hint { color: var(--lc-grey-700); }
.lc-public-form__details > .lc-public-form__grid,
.lc-public-form__details > .lc-public-form__choices,
.lc-public-form__details > .lc-field,
.lc-public-form__details > .lc-field__error {
  margin: 0 var(--lc-space-5) var(--lc-space-4);
}
.lc-public-form__choices { display: grid;
  /* ADR 0178: an implicit grid column is `auto`, and a grid item will not go
   * below its own min-content width - so one unbreakable field or a nowrap
   * control widens the whole page. Every grid declares a shrinkable track. */
  grid-template-columns: minmax(0, 1fr); gap: var(--lc-space-2); }
.lc-public-form__privacy { color: var(--lc-grey-700); margin: 0; }
.lc-public-form__privacy a { color: var(--lc-link); }

/* --- The §5.a loan-calculator widget (pinned /api/kalkulator/ contract) -----
 * Server-rendered markup: templates/public/_calculator.html, enhanced by
 * static/js/loan-calculator.js. Tokens ONLY (the branding gate enforces zero
 * hex + AA). The provisional state (data-state="local") is NEVER colour-alone:
 * italic + dimmed figures PLUS the visible hint/note text. Decorative fills use
 * the AA brand variants — the bright brand colours are never used here. */
.lc-calc {
  display: grid;
  /* ADR 0178: an implicit grid column is `auto`, and a grid item will not go
   * below its own min-content width - so one unbreakable field or a nowrap
   * control widens the whole page. Every grid declares a shrinkable track. */
  grid-template-columns: minmax(0, 1fr); gap: var(--lc-space-5);
  background: var(--lc-white); color: var(--lc-grey-900);
  border: var(--lc-border-width) solid var(--lc-grey-300);
  border-radius: var(--lc-radius-lg);
  padding: var(--lc-space-5);
  box-shadow: var(--lc-shadow-sm);
}
.lc-calc__controls {
  display: grid; gap: var(--lc-space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}
.lc-calc__control { display: grid;
  /* ADR 0178: an implicit grid column is `auto`, and a grid item will not go
   * below its own min-content width - so one unbreakable field or a nowrap
   * control widens the whole page. Every grid declares a shrinkable track. */
  grid-template-columns: minmax(0, 1fr); gap: var(--lc-space-2); }
.lc-calc__number { max-width: 11rem; }

/* s9 (ADR 0129): the min/max bounds flank the selector LEFT and RIGHT — the one
 * place a product's parameters are stated (the separate parameters block died). */
.lc-calc__slider { display: flex; align-items: center; gap: var(--lc-space-3); }
.lc-calc__slider .lc-calc__range { flex: 1 1 auto; min-width: 0; }
.lc-calc__bound {
  flex: 0 0 auto;
  font-size: var(--lc-text-sm);
  font-weight: var(--lc-weight-semibold);
  color: var(--lc-grey-700);
  white-space: nowrap;
}
/* s11: the fixed-term product states its term as text — no selector renders. */
.lc-calc__fixed-term {
  margin: 0;
  min-height: var(--lc-hit-target);
  display: flex; align-items: center;
  font-weight: var(--lc-weight-semibold);
}

/* Range slider — token-styled, ≥44px hit target (ADR 0186), visible focus ring. The thumb
 * is a decorative AA-orange fill (no text sits on it). */
.lc-calc__range {
  appearance: none; -webkit-appearance: none;
  width: 100%; height: var(--lc-hit-target);
  margin: 0; background: transparent; cursor: pointer;
}
.lc-calc__range:focus-visible {
  outline: var(--lc-focus-ring-width) solid var(--lc-focus-ring-color);
  outline-offset: var(--lc-focus-ring-offset);
  border-radius: var(--lc-radius-sm);
}
.lc-calc__range::-webkit-slider-runnable-track {
  height: var(--lc-space-2);
  border-radius: var(--lc-radius-pill);
  background: var(--lc-grey-300);
}
.lc-calc__range::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: var(--lc-space-5); height: var(--lc-space-5);
  margin-top: calc((var(--lc-space-2) - var(--lc-space-5)) / 2);
  border-radius: var(--lc-radius-pill);
  background: var(--lc-brand-primary-aa);
  border: var(--lc-border-width) solid var(--lc-white);
  box-shadow: var(--lc-shadow-sm);
}
.lc-calc__range::-moz-range-track {
  height: var(--lc-space-2);
  border-radius: var(--lc-radius-pill);
  background: var(--lc-grey-300);
}
.lc-calc__range::-moz-range-thumb {
  width: var(--lc-space-5); height: var(--lc-space-5);
  border-radius: var(--lc-radius-pill);
  background: var(--lc-brand-primary-aa);
  border: var(--lc-border-width) solid var(--lc-white);
  box-shadow: var(--lc-shadow-sm);
}

/* Figures — dt label over a bold dd value. aria-live="polite" in the markup. */
.lc-calc__figures {
  display: grid; gap: var(--lc-space-4); margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
}
.lc-calc__figure dt {
  font-size: var(--lc-text-sm); color: var(--lc-grey-700);
  margin: 0 0 var(--lc-space-1);
}
.lc-calc__figure dd {
  font-size: 1.25rem; font-weight: var(--lc-weight-bold); color: var(--lc-grey-900); margin: 0;
}

/* Provisional vs confirmed: data-state="local" = italic + dimmed (still ≥AA on
 * white) PLUS the visible hint text below — never colour-alone. The server
 * figures (data-state="server") render upright at full strength. */
.lc-calc__figures[data-state="local"] dd { font-style: italic; opacity: 0.75; }
.lc-calc__hint {
  margin: 0; font-size: var(--lc-text-sm); font-style: italic;
  color: var(--lc-grey-700);
}
.lc-calc__note {
  margin: 0; font-size: var(--lc-text-sm);
  color: var(--lc-grey-900); background: var(--lc-warning-soft);
  border-left: var(--lc-space-1) solid var(--lc-warning);
  border-radius: var(--lc-radius-sm);
  padding: var(--lc-space-2) var(--lc-space-3);
}
.lc-calc__cta { display: flex; flex-wrap: wrap; gap: var(--lc-space-3); }

/* The representative-example figures (public/_representative.html) — hidden
 * until the authoritative server response lands. */
.lc-calc-rep__figures { margin-top: var(--lc-space-4); }

/* --- The home-page per-product calculator tabs (plain progressive
 * enhancement — loan-calculator.js assigns the ARIA tab semantics). --------- */
.lc-calc-tabs { display: grid;
  /* ADR 0178: an implicit grid column is `auto`, and a grid item will not go
   * below its own min-content width - so one unbreakable field or a nowrap
   * control widens the whole page. Every grid declares a shrinkable track. */
  grid-template-columns: minmax(0, 1fr); gap: var(--lc-space-4); }
.lc-calc-tabs__list { display: flex; flex-wrap: wrap; gap: var(--lc-space-2); }
.lc-calc-tabs__tab {
  font: inherit; font-weight: var(--lc-weight-semibold);
  display: inline-flex; align-items: center;
  min-height: var(--lc-hit-target);
  /* Block padding 0 -> space-2 (DP1/Q2.5): a two-line WRAPPED tab label
   * outgrows the min-height and its ink then sat 1px from the pill's own
   * border; a single-line tab is unchanged (min-height still sizes it). */
  padding: var(--lc-space-2) var(--lc-space-4);
  border: var(--lc-border-width) solid var(--lc-grey-300);
  border-radius: var(--lc-radius-pill);
  background: var(--lc-white); color: var(--lc-grey-900);
  cursor: pointer;
  /* The client motion law (ADR 0118): transitions animate transform/opacity
   * ONLY on this sheet — colour states switch instantly. */
}
/* A help line directly above the calculator (the wizard employment step) ran
 * its ink 0.2px from the first tab's painted edge at every width (DP1/Q2.5). */
.lc-field__help + .lc-calc-tabs { margin-block-start: var(--lc-space-3); }
.lc-calc-tabs__tab:hover { border-color: var(--lc-grey-500); }
.lc-calc-tabs__tab:focus-visible {
  outline: var(--lc-focus-ring-width) solid var(--lc-focus-ring-color);
  outline-offset: var(--lc-focus-ring-offset);
}
.lc-calc-tabs__tab--active {
  /* AA blue fill + white (customer-facing); the border uses the shorthand —
   * the brand-as-text gate regex rightly catches any "…color:" property. */
  background: var(--lc-brand-secondary-aa); color: var(--lc-on-brand);
  border: var(--lc-border-width) solid var(--lc-brand-secondary-aa);
}
.lc-calc-tabs__panel-title { margin: 0 0 var(--lc-space-3); font-size: 1.25rem; }

/* --- §5.d Step 5 co-debtor / guarantor hub (ADR 0051) -----------------------
 * Layout chrome only; the rows are {% lc_card %} / {% lc_button %} / {% lc_badge %}
 * library components. Tokens ONLY (the branding gate enforces zero hex + AA). */
.lc-public-subtitle {
  font-weight: var(--lc-weight-bold); color: var(--lc-grey-900);
  margin: var(--lc-space-5) 0 var(--lc-space-2);
}
.lc-party-list {
  list-style: none; margin: 0 0 var(--lc-space-4); padding: 0;
  display: grid;
  /* ADR 0178: an implicit grid column is `auto`, and a grid item will not go
   * below its own min-content width - so one unbreakable field or a nowrap
   * control widens the whole page. Every grid declares a shrinkable track. */
  grid-template-columns: minmax(0, 1fr); gap: var(--lc-space-3);
}
.lc-party-empty { color: var(--lc-grey-700); margin: 0 0 var(--lc-space-4); }
.lc-party-row__body {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--lc-space-3);
}
.lc-party-row__name { font-weight: var(--lc-weight-semibold); margin: 0; }
.lc-party-row__actions {
  display: flex; flex-wrap: wrap; gap: var(--lc-space-2); margin-top: var(--lc-space-3);
}
.lc-party-continue { margin-top: var(--lc-space-6); }

/* --- §5.g remote OTP signing (ADR 0052) — declaration checkbox rows ----------
 * Token-only (branding gate). Polished further in the cross-surface QA sweep. */
.lc-checkbox-row {
  display: flex; align-items: flex-start; gap: var(--lc-space-2);
  padding: var(--lc-space-2) 0; min-height: var(--lc-hit-target);
}
.lc-checkbox-row input { margin-top: var(--lc-space-1); }

/* --- §5.a Wagtail blog / promotions (ADR 0056) ------------------------------
 * Layout chrome only; token-only (branding gate). Polished in the QA sweep. */
.lc-blog-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--lc-space-4); grid-template-columns: minmax(0, 1fr); }
/* Blog / promotion listings: two-across from md, three-across on desktop
 * (ADR 0131 — 38 photo cards in two columns ran the index past 16k px). */
@media (min-width: 60rem) {
  .lc-blog-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 75rem) {
  .lc-blog-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Article cards with their committed hero photography (ADR 0131 — round 1:
 * the index was a wall of underlined links while every article carries a real
 * 1080×1080 hero JPEG). White sheets on the canvas; title link, quiet date. */
.lc-blog-card {
  background: var(--lc-white);
  border: var(--lc-border-width) solid var(--lc-grey-300);
  border-radius: var(--lc-radius-lg);
  box-shadow: var(--lc-shadow-xs);
  overflow: hidden;
  display: grid;
  /* ADR 0178: an implicit grid column is `auto`, and a grid item will not go
   * below its own min-content width - so one unbreakable field or a nowrap
   * control widens the whole page. Every grid declares a shrinkable track. */
  grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr;
  transition: transform var(--lc-motion-fast) var(--lc-ease);
}
.lc-blog-card:hover { transform: translateY(-2px); }
.lc-blog-card__img { display: block; width: 100%; height: auto; }
.lc-blog-card__body {
  padding: var(--lc-space-4) var(--lc-space-5) var(--lc-space-5);
  display: grid;
  /* ADR 0178: an implicit grid column is `auto`, and a grid item will not go
   * below its own min-content width - so one unbreakable field or a nowrap
   * control widens the whole page. Every grid declares a shrinkable track. */
  grid-template-columns: minmax(0, 1fr); gap: var(--lc-space-2); align-content: start;
}
.lc-blog-card__body h2 { margin: 0; font-size: var(--lc-text-lg); }
.lc-blog-card__body h2 a { color: var(--lc-link); text-decoration: none; }
.lc-blog-card__body h2 a:hover { text-decoration: underline; color: var(--lc-link-hover); }
.lc-blog-card__body h2 a:focus-visible {
  outline: var(--lc-focus-ring-width) solid var(--lc-focus-ring-color);
  outline-offset: var(--lc-focus-ring-offset);
}
.lc-blog-card__date { margin: 0; color: var(--lc-grey-700); font-size: var(--lc-text-sm); }
.lc-blog-card__excerpt { margin: 0; color: var(--lc-grey-700); }
.lc-blog-hero { max-width: 100%; height: auto; border-radius: var(--lc-radius-md); margin: var(--lc-space-4) 0; }
.lc-blog-body { display: grid;
  /* ADR 0178: an implicit grid column is `auto`, and a grid item will not go
   * below its own min-content width - so one unbreakable field or a nowrap
   * control widens the whole page. Every grid declares a shrinkable track. */
  grid-template-columns: minmax(0, 1fr); gap: var(--lc-space-4); }

/* The shared article footer (ADR 0138 - owner n6): the products / offices /
   call-or-apply band under every blog article; the call-or-apply choice pairs
   from md on the canonical breakpoint scale. */
.lc-article-footer { margin-top: var(--lc-space-6); border-top: var(--lc-border-width) solid var(--lc-grey-300); }
.lc-article-footer__contacts { margin-top: var(--lc-space-4); }
.lc-article-footer__choice { display: grid; gap: var(--lc-space-4); align-items: start; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 60rem) {
  .lc-article-footer__choice { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.lc-article-footer__option-title { margin: 0 0 var(--lc-space-2); font-size: var(--lc-text-lg); }
.lc-article-footer__apply { display: grid;
  /* ADR 0178: an implicit grid column is `auto`, and a grid item will not go
   * below its own min-content width - so one unbreakable field or a nowrap
   * control widens the whole page. Every grid declares a shrinkable track. */
  grid-template-columns: minmax(0, 1fr); gap: var(--lc-space-2); }
/* Long glossary product names must WRAP inside the full-width apply buttons.
 * Since ADR 0178 `.lc-btn` wraps by default, so the local override below is
 * redundant and is kept only as the local statement of intent; `min-width: 0`
 * still earns its place - a grid item does not shrink without it. */
.lc-article-footer__choice > .lc-public-panel { min-width: 0; }
.lc-article-footer__apply .lc-btn { white-space: normal; }

/* ==========================================================================
 * The adaptive-layout + content layer (content-map slice, ADR 0108).
 *
 * CANONICAL BREAKPOINTS (the law — tokens.css documents the scale; CSS custom
 * properties cannot appear in @media conditions, so the pinned literals are):
 *   sm = 40rem   md = 60rem   lg = 75rem   xl = 100rem   (min-width preferred)
 * Mobile-first: every rule below is single-column by default and composes
 * multi-column ONLY at these widths. Every grid column is minmax(0, …) so no
 * page ever scrolls horizontally. Tokens ONLY (branding gate: zero hex, AA
 * pairings; the bright brand fills never appear on this customer surface).
 * ========================================================================== */

/* Site-wide dev-content notice — slim and quiet, never an error. */
.lc-public-devnote {
  margin: 0;
  padding: var(--lc-space-2) var(--lc-space-5);
  background: var(--lc-brand-secondary-soft);
  color: var(--lc-grey-900);
  font-size: var(--lc-text-sm);
  text-align: center;
}

/* --- Hero compositions ---------------------------------------------------- */
.lc-public-hero__ctas {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--lc-space-3);
  margin-top: var(--lc-space-5);
}

/* n15 (ADR 0134 — owner): the COMPACT „Обадете ми се" unit inside the hero,
 * a quiet white companion card ADJACENT to the primary apply CTA — right of
 * it while the ctas row fits, directly beneath it when the row wraps. The
 * form is the REAL s3 callback unit (endpoint/fields/consent/honeypot
 * identical) restyled compact; DOM ancestry is pinned by
 * apps/public/tests/test_hero_callback.py. */
.lc-public-hero__callback { flex: 1 1 16rem; max-width: 24rem; }
.lc-public-form--callback-compact {
  gap: var(--lc-space-2);
  padding: var(--lc-space-4);
}
.lc-public-form--callback-compact .lc-field__help,
.lc-public-form--callback-compact .lc-checkbox__label,
.lc-public-form--callback-compact .lc-public-form__privacy {
  font-size: var(--lc-text-sm);
}
.lc-public-hero__tagline {
  font-size: var(--lc-text-lg); font-weight: var(--lc-weight-semibold); color: var(--lc-grey-900);
}

/* Home hero: copy | calculator split at ≥lg; stacked below. */
.lc-public-hero--split {
  display: grid; gap: var(--lc-space-6);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 75rem) {
  .lc-public-hero--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
.lc-public-hero__calc-title { font-size: 1.5rem; margin: 0 0 var(--lc-space-4); }

/* Self-made decorative hero illustration — token fills only (fill/stroke are
 * non-text; the contrast gate scans color/background pairings). */
.lc-public-hero__art-svg {
  display: block; width: 100%; max-width: 30rem; height: auto;
  margin-top: var(--lc-space-6);
}
.lc-art--soft { fill: var(--lc-grey-300); opacity: 0.55; }
.lc-art--secondary { stroke: var(--lc-brand-secondary-aa); }
.lc-art--secondary-fill { fill: var(--lc-brand-secondary-aa); opacity: 0.4; }
.lc-art--primary { fill: var(--lc-brand-primary-aa); }

/* Product hero (c32, ADR 0125): the parameter card died with the from-to/APR
 * table — the hero is the DESCRIPTION above the calculator; the grid survives
 * for the copy/art split. */
.lc-public-hero--product {
  display: grid; gap: var(--lc-space-6);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 75rem) {
  .lc-public-hero--product { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: center; }
}

/* --- Canonical-breakpoint section grids ----------------------------------- */
.lc-public-grid-2,
.lc-public-grid-3,
.lc-public-grid-offices {
  display: grid; gap: var(--lc-space-4);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 60rem) {
  .lc-public-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lc-public-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lc-public-grid-offices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 75rem) {
  .lc-public-grid-offices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Detail composition: main content | rail at ≥lg (single column below). */
.lc-public-cols {
  display: grid; gap: var(--lc-space-5);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 75rem) {
  .lc-public-cols { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
}
.lc-public-cols__rail { display: grid;
  /* ADR 0178: an implicit grid column is `auto`, and a grid item will not go
   * below its own min-content width - so one unbreakable field or a nowrap
   * control widens the whole page. Every grid declares a shrinkable track. */
  grid-template-columns: minmax(0, 1fr); gap: var(--lc-space-4); align-content: start; }

/* Wide monitors: let the page breathe a little more. */
@media (min-width: 100rem) {
  .lc-public-main { max-width: 84rem; }
}

/* --- Benefit / icon vocabulary --------------------------------------------- */
.lc-public-benefit {
  background: var(--lc-white); color: var(--lc-grey-900);
  border: var(--lc-border-width) solid var(--lc-grey-300);
  border-radius: var(--lc-radius-md);
  padding: var(--lc-space-4);
  box-shadow: var(--lc-shadow-xs);
}
.lc-public-benefit__title { margin: var(--lc-space-3) 0 var(--lc-space-2); font-size: var(--lc-text-lg); }
.lc-public-benefit__text { margin: 0; color: var(--lc-grey-700); }
/* Icon strokes inherit `color` (currentColor); --lc-link is the sanctioned
 * blue text token (never the bright brand as text — AMD-003). */
.lc-public-icon { display: inline-flex; color: var(--lc-link); }
.lc-public-icon--method { margin-bottom: var(--lc-space-2); }
.lc-public-icon__svg { display: block; }

/* --- Content lists ---------------------------------------------------------- */
.lc-public-checklist {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  /* ADR 0178: an implicit grid column is `auto`, and a grid item will not go
   * below its own min-content width - so one unbreakable field or a nowrap
   * control widens the whole page. Every grid declares a shrinkable track. */
  grid-template-columns: minmax(0, 1fr); gap: var(--lc-space-3);
}
.lc-public-checklist li {
  display: flex; align-items: flex-start; gap: var(--lc-space-2);
  color: var(--lc-grey-900);
}
.lc-public-checklist__mark { display: inline-flex; flex: none; margin-top: var(--lc-space-1); color: var(--lc-success); }
.lc-public-doclist { margin: 0; padding-left: var(--lc-space-5); display: grid;
  /* ADR 0178: an implicit grid column is `auto`, and a grid item will not go
   * below its own min-content width - so one unbreakable field or a nowrap
   * control widens the whole page. Every grid declares a shrinkable track. */
  grid-template-columns: minmax(0, 1fr); gap: var(--lc-space-2); }

/* --- The 4-step process ------------------------------------------------------ */
.lc-public-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--lc-space-4);
  grid-template-columns: minmax(0, 1fr);
  counter-reset: lc-step;
}
@media (min-width: 60rem) {
  .lc-public-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 75rem) {
  .lc-public-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.lc-public-step {
  background: var(--lc-white); color: var(--lc-grey-900);
  border: var(--lc-border-width) solid var(--lc-grey-300);
  border-radius: var(--lc-radius-md);
  padding: var(--lc-space-4);
}
.lc-public-step__number {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--lc-space-8); height: var(--lc-space-8);
  border-radius: var(--lc-radius-pill);
  background: var(--lc-brand-secondary-aa); color: var(--lc-on-brand);
  font-weight: var(--lc-weight-bold);
}
.lc-public-step__title { margin: var(--lc-space-3) 0 var(--lc-space-2); font-size: var(--lc-text-base); }
.lc-public-step__text { margin: 0; color: var(--lc-grey-700); }

/* --- FAQ list (fully expanded — ADR 0115; headings, no toggle affordance) --- */
.lc-public-accordion { display: grid;
  /* ADR 0178: an implicit grid column is `auto`, and a grid item will not go
   * below its own min-content width - so one unbreakable field or a nowrap
   * control widens the whole page. Every grid declares a shrinkable track. */
  grid-template-columns: minmax(0, 1fr); gap: var(--lc-space-2); margin-bottom: var(--lc-space-5); }
/* FAQ two-across on desktop (ADR 0131 — a single column of short Q&A cards
 * ran the landing sections needlessly tall). */
@media (min-width: 75rem) {
  .lc-public-accordion { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
.lc-public-accordion__item {
  background: var(--lc-white); color: var(--lc-grey-900);
  border: var(--lc-border-width) solid var(--lc-grey-300);
  border-radius: var(--lc-radius-md);
}
.lc-public-accordion__q {
  display: flex; align-items: center;
  min-height: var(--lc-hit-target);
  margin: 0;
  padding: var(--lc-space-3) var(--lc-space-5);
  font-size: var(--lc-text-base);
  font-weight: var(--lc-weight-semibold);
}
.lc-public-accordion__a { margin: 0; padding: 0 var(--lc-space-5) var(--lc-space-4); color: var(--lc-grey-700); }
.lc-public-accordion__a a { color: var(--lc-link); }

/* --- Company fact chips ------------------------------------------------------ */
.lc-public-facts {
  list-style: none; margin: var(--lc-space-6) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--lc-space-3);
}
.lc-public-facts li {
  background: var(--lc-cream); color: var(--lc-grey-900);
  border-radius: var(--lc-radius-pill);
  padding: var(--lc-space-2) var(--lc-space-4);
}

/* --- Office cards (live-site card architecture) ------------------------------ */
.lc-public-office {
  background: var(--lc-white); color: var(--lc-grey-900);
  border: var(--lc-border-width) solid var(--lc-grey-300);
  border-radius: var(--lc-radius-md);
  overflow: hidden;
  box-shadow: var(--lc-shadow-xs);
}
.lc-public-office__photo { display: block; width: 100%; height: auto; }
.lc-public-office__body { padding: var(--lc-space-5); }
.lc-public-office__name { margin: 0 0 var(--lc-space-3); font-size: var(--lc-text-lg); }
.lc-public-office__facts { display: grid;
  /* ADR 0178: an implicit grid column is `auto`, and a grid item will not go
   * below its own min-content width - so one unbreakable field or a nowrap
   * control widens the whole page. Every grid declares a shrinkable track. */
  grid-template-columns: minmax(0, 1fr); gap: var(--lc-space-2); margin: 0 0 var(--lc-space-3); }
/* Left-aligned label-over-value stacks (ADR 0131 round 1: the space-between +
 * right-aligned values read ragged and accidental inside the narrow cards). */
.lc-public-office__facts div { display: grid;
  /* ADR 0178: an implicit grid column is `auto`, and a grid item will not go
   * below its own min-content width - so one unbreakable field or a nowrap
   * control widens the whole page. Every grid declares a shrinkable track. */
  grid-template-columns: minmax(0, 1fr); gap: var(--lc-space-1); }
.lc-public-office__facts dt {
  color: var(--lc-grey-700); margin: 0;
  font-size: var(--lc-text-sm);
}
.lc-public-office__facts dd { margin: 0; font-weight: var(--lc-weight-semibold); }

.lc-public-note { color: var(--lc-grey-700); font-size: var(--lc-text-sm); margin-top: var(--lc-space-3); }

/* ==========================================================================
 * MORNING LEV — the client-side beauty layer (ADR 0118).
 *
 * The customer surfaces read as a warm Bulgarian morning: the dawn wash opens
 * every page, layered paper-cut SVG compositions carry the imagery, white
 * cards float on tinted bands, and the two-tone DAWN-BAR (sun → sky) is the
 * recurring signature accent. All colour comes from the ADR-0118 layer
 * tokens (tints / veils / washes — tokens.css); the bright brand fills never
 * appear on this sheet (the test_public.py pin).
 *
 * THE CLIENT MOTION LAW (ADR 0118, gated by test_client_beauty.py): on this
 * sheet and portal.css every transition animates TRANSFORM or OPACITY only,
 * never longer than --lc-motion-base (200ms); colour/border states switch
 * instantly; no keyframe animation; prefers-reduced-motion neutralises all
 * of it. Decorative depth (glows, washes, shadows) is STATIC — zero layout
 * shift, zero scroll effects, nothing between the visitor and the content.
 * ========================================================================== */

/* --- The dawn-bar signature: a short two-tone rule under section titles. --- */
.lc-public-section__title::after {
  content: ""; display: block;
  width: var(--lc-space-8); height: var(--lc-space-1);
  border-radius: var(--lc-radius-pill);
  background: var(--lc-dawn-bar);
  margin-top: var(--lc-space-2);
}

/* --- Tinted bands: inset rounded washes for section rhythm. ---------------- */
.lc-public-band {
  border-radius: var(--lc-radius-lg);
  padding: var(--lc-space-5) var(--lc-space-5);
  position: relative; isolation: isolate; overflow: hidden;
}
.lc-public-band--sun { background: var(--lc-wash-sun); }
.lc-public-band--sky { background: var(--lc-wash-sky); }
/* Copy | illustration split for CTA bands (single column below md). */
.lc-public-band--duo {
  display: grid; gap: var(--lc-space-5);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 60rem) {
  .lc-public-band--duo { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: center; }
}

/* --- PHOTOGRAPHY (ADR 0177) ----------------------------------------------
 * THE ROLE RULE, and it is what keeps both accessibility gates satisfied
 * without either being weakened:
 *
 *   a photograph BEHIND TEXT is DECORATIVE — it says nothing the copy does
 *   not — so it renders as a background-image and never enters the
 *   accessibility tree; a photograph that IS content renders as an <img>
 *   with real alt text.
 *
 * That is why no committed photo ever needs the empty-alt idiom the SEO gate
 * forbids: nothing decorative is ever an <img> in the first place.
 *
 * The backdrop is set through --lc-hero-photo by a modifier below rather than
 * inline, so every photographic URL on the client side sits in this one
 * block. Composite specificity (.lc-public-hero.lc-public-hero--photo) beats
 * the base rule's `background:` shorthand regardless of source order. */
.lc-public-hero.lc-public-hero--photo {
  background-color: var(--lc-canvas-day);
  background-image: var(--lc-scrim-flat), var(--lc-hero-photo);
  background-size: cover, cover;
  background-position: center, center 38%;
  background-repeat: no-repeat, no-repeat;
  border-color: var(--lc-sun-100);
}
/* The copy column the scrim is MEASURED over, and the width at which it can
 * first be constrained: 30rem of the 65rem inner hero is 46%, inside the 52%
 * at which --lc-scrim-copy still holds its 0.94 stop. The imagery gate
 * re-derives that fraction from these very numbers rather than trusting it. */
.lc-public-hero__copy { max-width: 30rem; }
@media (min-width: 75rem) {
  .lc-public-hero.lc-public-hero--photo {
    background-image: var(--lc-scrim-copy), var(--lc-hero-photo);
  }
}
/* The photographic backdrop is decorative; under reduced transparency
 * preferences it steps aside entirely rather than degrading legibility. */
.lc-public-hero--photo::before,
.lc-public-hero--photo::after { opacity: 0.5; }
/* THE ONE PLACE a decorative photographic URL is named. A backdrop that is
 * merely a background cannot be lazy-loaded and cannot carry alt text, so the
 * count of them is deliberately kept to what the design genuinely needs: one.
 * The wide step serves the 1440/1920 review widths at roughly 1.5x. */
.lc-public-hero--photo-branch { --lc-hero-photo: url("../img/photo/branch-front-1200.webp"); }
@media (min-width: 75rem) {
  .lc-public-hero--photo-branch { --lc-hero-photo: url("../img/photo/branch-front-1800.webp"); }
}

/* A photograph AS CONTENT: the duo band's companion figure and the branch
 * storefront on an office card. width/height ride the tag (the CLS fix the
 * friction budget pins); the intrinsic ratio here only guards the object-fit
 * crop when a source of a different shape is swapped in. */
.lc-public-figure { margin: 0; min-width: 0; }
.lc-public-figure__img {
  display: block; width: 100%; height: auto;
  border-radius: var(--lc-radius-lg);
  box-shadow: var(--lc-shadow-sm);
}
.lc-public-office__photo {
  display: block; width: 100%; height: auto;
  aspect-ratio: 8 / 5; object-fit: cover;
  border-radius: var(--lc-radius-md);
  margin-bottom: var(--lc-space-3);
}
/* The duo band's copy keeps its measure beside the figure. */
.lc-public-band--duo .lc-public-band__copy > :last-child { margin-bottom: 0; }
.lc-public-band__copy p { color: var(--lc-grey-700); }

/* --- Icon discs: the stroke icons sit on warm tint circles. Deep accents
 *     hold AA on the 100 tints (5.39:1 sun / 5.99:1 sky — computed). ------- */
.lc-public-icon {
  align-items: center; justify-content: center;
  width: calc(var(--lc-space-8) + var(--lc-space-3));
  height: calc(var(--lc-space-8) + var(--lc-space-3));
  border-radius: var(--lc-radius-pill);
  background: var(--lc-sun-100); color: var(--lc-sun-deep);
}
.lc-public-icon--sky { background: var(--lc-sky-100); color: var(--lc-sky-deep); }
/* Playful alternation inside the benefit triads. */
.lc-public-grid-3 > :nth-child(even) .lc-public-icon {
  background: var(--lc-sky-100); color: var(--lc-sky-deep);
}

/* --- Card depth + the hover lift (transform-only micro-transition). -------- */
.lc-public-benefit,
.lc-public-step,
.lc-public-office,
.lc-public-accordion__item,
.lc-public .lc-card {
  transition: transform var(--lc-motion-fast) var(--lc-ease);
}
.lc-public-benefit:hover,
.lc-public-step:hover,
.lc-public-office:hover,
.lc-public .lc-card:hover { transform: translateY(-2px); }
.lc-public-benefit { border-color: var(--lc-sun-100); box-shadow: var(--lc-shadow-sm); }
.lc-public-step { border-color: var(--lc-sky-100); box-shadow: var(--lc-shadow-xs); }
.lc-public-office { box-shadow: var(--lc-shadow-sm); }
.lc-public-accordion__item { box-shadow: var(--lc-shadow-xs); }

/* FAQ questions carry a small dawn dot. */
.lc-public-accordion__q::before {
  content: ""; flex: none;
  width: var(--lc-space-2); height: var(--lc-space-2);
  border-radius: var(--lc-radius-pill);
  background: var(--lc-dawn-bar);
  margin-right: var(--lc-space-2);
}

/* Company fact chips: warm tint + hairline. */
.lc-public-facts li {
  background: var(--lc-sun-50);
  border: var(--lc-border-width) solid var(--lc-sun-100);
}

/* --- Primary CTAs float on a sun-tinted shadow (decorative depth only). ---- */
.lc-public .lc-btn--primary { box-shadow: var(--lc-shadow-sun); }
.lc-public .lc-btn--primary:disabled { box-shadow: none; }

/* Full-width buttons are a TOUCH convenience: from md up they right-size to
 * their label (ADR 0131 round 1 — 1 200px-wide submit bars read clumsy).
 * The grid-stretch variant of the same defect: buttons that are direct grid
 * children (.lc-public-form / fieldsets are grids) stretch to the column —
 * from md they self-size to their content instead. */
@media (min-width: 60rem) {
  .lc-public .lc-btn--full { width: auto; padding-inline: var(--lc-space-8); }
  .lc-public .lc-btn { justify-self: start; }
}

/* --- The calculator card: sun-300 crest + a heavier float in the hero. ----- */
.lc-calc { border-top: var(--lc-space-1) solid var(--lc-sun-300); }
.lc-public-hero__calc .lc-calc { box-shadow: var(--lc-shadow-lg); }

/* --- The quick-lead form: sections read as soft sheets; the optional
 *     <details> blocks warm up (count untouched — the ADR-0115 gate). ------- */
.lc-public-form__section {
  background: var(--lc-white);
  border-color: var(--lc-sky-100);
  box-shadow: var(--lc-shadow-xs);
}
.lc-public-form__legend { color: var(--lc-sky-deep); }
.lc-public-form__details { background: var(--lc-sun-50); border-color: var(--lc-sun-100); }
.lc-public-form__details[open] { background: var(--lc-white); }

/* --- Header brand: the real company wordmark (ADR 0124 — it carries its own
   coin, so it takes precedence over the coin-sun mark in this slot). n1: the
   one-line bar renders it compact (1.5rem) below lg, full token height from
   lg — the strip in the middle gets the width. -------------------------------- */
.lc-public-header__brand { display: inline-flex; align-items: center; }
/* ADR 0187: the mark scales CONTINUOUSLY through the base range instead of
 * holding 1.125rem all the way down to a phone. Both steps above are untouched
 * - the clamp reaches its 1.125rem ceiling well before 60rem, so from md up the
 * wordmark is byte-identical to what it was; only the narrow end gives way, and
 * it is what buys the 360px bar its margin. */
.lc-public-header__logo {
  display: block; height: clamp(0.875rem, 3vw, 1.125rem); width: auto;
}
@media (min-width: 60rem) {
  .lc-public-header__logo { height: 1.5rem; }
}
@media (min-width: 75rem) {
  .lc-public-header__logo { height: var(--lc-space-6); }
}
.lc-public-nav a:hover { background: var(--lc-veil-sky); }

/* --- Centered panel: auth, confirmations, invalid-link pages. -------------- */
.lc-public-panel {
  background: var(--lc-white);
  border: var(--lc-border-width) solid var(--lc-grey-300);
  border-radius: var(--lc-radius-lg);
  box-shadow: var(--lc-shadow-md);
  padding: var(--lc-space-5) var(--lc-space-5);
  max-width: 34rem;
  margin-inline: auto;
}
.lc-public-panel--wide { max-width: 44rem; }
.lc-public-panel--center { text-align: center; }
.lc-public-panel--center .lc-public-hero__ctas { justify-content: center; }

/* Stacked sibling FORMS always get breathing room (ADR 0119 — owner o4/c2:
 * the wizard's "Next" + "Save and continue later" and the parties hub's
 * Continue + abandon rendered butted/overlapping). Direct children only:
 * gapped rows of forms (e.g. .lc-party-row__actions) manage their own layout.
 * Gated by test_overlap_invariants.py — never delete. */
.lc-public-panel > form + form,
.lc-public-section > form + form { margin-top: var(--lc-space-4); }

/* One-time-code entry (portal login, the signing ceremony): large, centred,
 * ledger-spaced digits — the code is the moment of ceremony. Digits ride the
 * UI face (ADR 0119 — Nunito's digits are natively monowidth; no dotted zero). */
.lc-public-otp .lc-input {
  font-size: var(--lc-text-xl);
  font-family: var(--lc-font-sans);
  letter-spacing: 0.35em;
  text-align: center;
}

/* --- Shared empty-state block (portal lists, the parties hub). ------------- */
.lc-public-empty {
  display: grid;
  /* ADR 0178: an implicit grid column is `auto`, and a grid item will not go
   * below its own min-content width - so one unbreakable field or a nowrap
   * control widens the whole page. Every grid declares a shrinkable track. */
  grid-template-columns: minmax(0, 1fr); gap: var(--lc-space-3); justify-items: center;
  text-align: center;
  background: var(--lc-sun-50);
  border-radius: var(--lc-radius-lg);
  padding: var(--lc-space-6) var(--lc-space-5);
}
.lc-public-empty p { margin: 0; }
/* In-table empty rows: quiet, compact — no tinted block inside a cell. */
.lc-public-empty--quiet { background: transparent; padding: var(--lc-space-4); }

/* --- The wizard progress: label + a static dawn fill (no animation — the
 *     width is set per page render via the --lc-progress custom property). -- */
.lc-wizard-progress { display: grid;
  /* ADR 0178: an implicit grid column is `auto`, and a grid item will not go
   * below its own min-content width - so one unbreakable field or a nowrap
   * control widens the whole page. Every grid declares a shrinkable track. */
  grid-template-columns: minmax(0, 1fr); gap: var(--lc-space-2); margin-bottom: var(--lc-space-4); max-width: 34rem; }
.lc-wizard-progress__label {
  font-size: var(--lc-text-sm); font-weight: var(--lc-weight-semibold);
  color: var(--lc-grey-700); margin: 0;
}
.lc-wizard-progress__track {
  height: var(--lc-space-2); border-radius: var(--lc-radius-pill);
  background: var(--lc-sun-100); overflow: hidden;
}
.lc-wizard-progress__fill {
  display: block; height: 100%; width: var(--lc-progress, 0%);
  border-radius: var(--lc-radius-pill);
  background: linear-gradient(90deg, var(--lc-sun-300), var(--lc-sky-300));
}

/* --- The self-made illustration library (templates/public/_art.html). ------
 * Sizing wrappers + the token paint classes. Fills/strokes are decorative
 * (never text-bearing); the compositions are layered paper-cut geometry in
 * the tint ladders with veil overlays. */
.lc-public-art { display: block; width: 100%; height: auto; }
.lc-public-art--hero { max-width: 30rem; margin-top: var(--lc-space-6); }
.lc-public-art--spot { max-width: 17rem; }
.lc-public-art--panel { max-width: 13rem; margin: 0 auto var(--lc-space-4); }
.lc-public-art--band { max-width: 15rem; margin-inline: auto; }
.lc-art--paper { fill: var(--lc-white); }
.lc-art--cream { fill: var(--lc-cream); }
.lc-art--mist { fill: var(--lc-grey-100); }
.lc-art--sun-1 { fill: var(--lc-sun-100); }
.lc-art--sun-2 { fill: var(--lc-sun-200); }
.lc-art--sun-3 { fill: var(--lc-sun-300); }
.lc-art--sky-1 { fill: var(--lc-sky-100); }
.lc-art--sky-2 { fill: var(--lc-sky-200); }
.lc-art--sky-3 { fill: var(--lc-sky-300); }
.lc-art--veil-sun { fill: var(--lc-veil-sun-strong); }
.lc-art--veil-sky { fill: var(--lc-veil-sky-strong); }
.lc-art--deep { fill: var(--lc-sky-deep); }
.lc-art--deep-sun { fill: var(--lc-sun-deep); }
.lc-art--line { fill: none; stroke: var(--lc-sky-deep); }
.lc-art--line-sun { fill: none; stroke: var(--lc-sun-deep); }
.lc-art--line-soft { fill: none; stroke: var(--lc-grey-300); }
.lc-art--line-paper { fill: none; stroke: var(--lc-white); }

/* --- The friction law's floor: reduced motion neutralises everything. ------ */
@media (prefers-reduced-motion: reduce) {
  .lc-public *,
  .lc-public *::before,
  .lc-public *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* --- The restructured wizard steps (ADR 0120) -------------------------------
 * c36 contact-person slots, the c13 EasyPay-vs-bank picture buttons and the c14
 * declarations redress. Tokens ONLY (branding gate); colour states switch
 * instantly (the client motion law — no new transitions). */
.lc-public-fieldset {
  border: var(--lc-border-width) solid var(--lc-grey-300);
  border-radius: var(--lc-radius-md);
  padding: var(--lc-space-5);
  margin: 0;
  display: grid;
  /* ADR 0178: an implicit grid column is `auto`, and a grid item will not go
   * below its own min-content width - so one unbreakable field or a nowrap
   * control widens the whole page. Every grid declares a shrinkable track. */
  grid-template-columns: minmax(0, 1fr); gap: var(--lc-space-3);
}
.lc-public-fieldset > legend {
  font-weight: var(--lc-weight-semibold); padding: 0 var(--lc-space-2);
}
.lc-public-form__actions {
  display: flex; flex-wrap: wrap; gap: var(--lc-space-3); align-items: center;
}
.lc-field__label--inline {
  display: flex; align-items: center; gap: var(--lc-space-2);
  min-height: var(--lc-hit-target);
}
/* The two large c13 picture buttons: the radio itself stays screen-reader
 * accessible; the card is the visual affordance (selected = sun-tinted sheet,
 * ink ring on keyboard focus). */
.lc-instrument-cards {
  display: grid; gap: var(--lc-space-4);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 60rem) {
  .lc-instrument-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.lc-instrument-card {
  display: grid;
  /* ADR 0178: an implicit grid column is `auto`, and a grid item will not go
   * below its own min-content width - so one unbreakable field or a nowrap
   * control widens the whole page. Every grid declares a shrinkable track. */
  grid-template-columns: minmax(0, 1fr); gap: var(--lc-space-3); justify-items: center;
  text-align: center; cursor: pointer;
  border: var(--lc-border-width) solid var(--lc-grey-300);
  border-radius: var(--lc-radius-md);
  background: var(--lc-white);
  padding: var(--lc-space-5);
  min-height: var(--lc-hit-target);
}
.lc-instrument-card:has(input:checked) {
  border-color: var(--lc-sun-deep);
  background: var(--lc-sun-50);
}
.lc-instrument-card:has(input:focus-visible) {
  outline: var(--lc-focus-ring-width) solid var(--lc-focus-ring-color);
  outline-offset: var(--lc-focus-ring-offset);
}
.lc-instrument-card input {
  position: absolute; opacity: 0; pointer-events: none;
}
.lc-instrument-card__label { font-weight: var(--lc-weight-bold); }
.lc-instrument-card__note { color: var(--lc-grey-700); }
/* c14: each declaration is a document-like sheet — title, the FULL stored text,
 * then the consent affordance. */
.lc-declaration {
  border: var(--lc-border-width) solid var(--lc-grey-300);
  border-radius: var(--lc-radius-md);
  background: var(--lc-white);
  padding: var(--lc-space-4) var(--lc-space-5);
  display: grid;
  /* ADR 0178: an implicit grid column is `auto`, and a grid item will not go
   * below its own min-content width - so one unbreakable field or a nowrap
   * control widens the whole page. Every grid declares a shrinkable track. */
  grid-template-columns: minmax(0, 1fr); gap: var(--lc-space-3);
  /* Unbreakable seeded tokens (e.g. EMAIL_INDIVIDUALIZATION headings inside
   * the placeholder texts) must wrap, never widen the page (ADR 0131 — the
   * 390px horizontal-scroll defect the harness caught). */
  overflow-wrap: anywhere;
}
.lc-declaration__title { margin: 0; font-size: var(--lc-text-lg); }
.lc-declaration__body {
  border-inline-start: var(--lc-space-1) solid var(--lc-sky-200);
  padding-inline-start: var(--lc-space-4);
  color: var(--lc-grey-900);
}
.lc-declaration__consent {
  display: flex; align-items: center; gap: var(--lc-space-2);
  font-weight: var(--lc-weight-semibold);
  min-height: var(--lc-hit-target);
}

/* --- ADR 0125: PUBLIC CONTENT + BEAUTY ROUND 2 ------------------------------
 * The landing apply options (c23), the MORNING TOWN hero scene (c24), the
 * how-to-pay mark circles + the inactive card button (c25/c26), the
 * consent-gated map (c29) and the footer socials (c31). Tokens only; no new
 * transitions (the client motion law); breakpoints stay canonical. */
.lc-public-apply__option {
  background: var(--lc-white);
  border: var(--lc-border-width) solid var(--lc-sun-100);
  border-radius: var(--lc-radius-lg);
  box-shadow: var(--lc-shadow-sun);
  padding: var(--lc-space-5);
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--lc-space-3);
}
.lc-public-apply__option .lc-public-art { max-width: 11rem; margin: 0; }
.lc-public-apply__name { margin: 0; font-size: var(--lc-text-xl); }
.lc-public-apply__blurb { margin: 0; color: var(--lc-grey-700); }
.lc-public-apply__ctas {
  display: flex; flex-wrap: wrap; gap: var(--lc-space-3);
  margin-top: auto;
}

/* The MORNING TOWN hero scene — wide, in-flow (zero CLS, paint only).
 * ADR 0131: scaled UP — the art carries the imagery duty photography does on
 * the live site; a small floating scene read timid at 1440. */
.lc-public-art--scene { max-width: 40rem; margin-top: var(--lc-space-4); }

/* How-to-pay method circles (c26) — LARGER, mark-bearing. */
.lc-public-method-circle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 8.5rem; height: 8.5rem;
  border-radius: var(--lc-radius-pill);
  background: var(--lc-sun-50);
  border: var(--lc-border-width) solid var(--lc-sun-100);
  margin-bottom: var(--lc-space-3);
  overflow: hidden;
}
.lc-public-method-circle img { max-width: 70%; height: auto; }
.lc-public-method-circle .lc-public-art { width: 78%; }
.lc-public-method-circle .lc-public-icon__svg { width: 3.25rem; height: 3.25rem; }
.lc-public-method-marks { display: flex; flex-wrap: wrap; gap: var(--lc-space-3); }
.lc-public-method-marks .lc-public-method-circle--mark {
  width: 7rem; height: 7rem;
  background: var(--lc-white);
  border-color: var(--lc-grey-300);
  margin-bottom: var(--lc-space-2);
}
.lc-public-method-cardcta { margin-top: var(--lc-space-3); }
.lc-public-method-cardcta .lc-btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.lc-public-method-cardcta .lc-public-note { margin: var(--lc-space-2) 0 0; }

/* The offices map (s19, ADR 0130): the embed loads EAGERLY — the ADR-0125
 * click-to-load placeholder is retired; the sheet frames the iframe only. */
.lc-public-map {
  border: var(--lc-border-width) solid var(--lc-sky-100);
  border-radius: var(--lc-radius-lg);
  background: var(--lc-wash-sky);
  overflow: hidden;
}
.lc-public-map__frame { display: block; width: 100%; height: 26rem; border: 0; }

/* Footer socials (c31) — AMD-003 hit targets on the dusk band. */
.lc-public-footer__social {
  display: flex; align-items: center; gap: var(--lc-space-3);
  margin-top: var(--lc-space-4);
}
.lc-public-footer__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--lc-hit-target); height: var(--lc-hit-target);
  border-radius: var(--lc-radius-sm);
}

/* ====================================================================== *
 *  THE HIT-TARGET LAW — the client site (ADR 0186, owner item 3)
 *
 *  The MORNING LEV surfaces already sat on --lc-hit-target almost everywhere,
 *  so the token carried them from 40 to 44. What lands here is the wordmark -
 *  a 73.5x18 logo image that is the site's home link on every page - and the
 *  SEPARATION half of the law, which the one-line header (ADR 0134) had
 *  compacted to 4px at narrow widths. The strip scrolls horizontally by
 *  design, so wider gaps cost scroll distance inside the strip and never
 *  page-level horizontal scroll: the ADR-0108 law is untouched.
 * ====================================================================== */
.lc-public-header__brand {
  min-height: var(--lc-hit-target);
  min-width: var(--lc-hit-target);
  justify-content: center;
}

/* The skip link is the FIRST control a keyboard reader meets. */
.lc-public-skip {
  display: inline-flex;
  align-items: center;
  min-height: var(--lc-hit-target);
  min-width: var(--lc-hit-target);
}

/* Footer navs stacked with no margin put a 44px link directly against the
 * next one; the law's second half separates them. */
.lc-public-footer__nav { row-gap: var(--lc-target-gap); }
.lc-public-footer__inner > nav + nav { margin-top: var(--lc-target-gap); }

/* A short nav label ("Начало") clears the floor down and misses it across. */
.lc-public-nav a { min-width: var(--lc-hit-target); justify-content: center; }

/* A paragraph whose WHOLE content is one link is a standalone call to action,
 * not a link in a sentence - `:only-child` is the structural form of the
 * classification rule, and the detector's `inline-in-text` exemption agrees
 * with it by asking the same question ("does the parent carry other text?").
 * A link INSIDE a sentence is untouched by this, which is the point. */
.lc-public :is(p, li, dd) > a:only-child {
  display: inline-flex;
  align-items: center;
  min-height: var(--lc-hit-target);
  min-width: var(--lc-hit-target);
}

/* --- The signing station kiosk (ADR 0196) --------------------------------- */
/* The /station surface rides the MORNING LEV shell; these are its few own
 * pieces - the screen column, the document list, and the capture canvas
 * (touch-action: none is what lets Pointer Events own the pen/finger). All
 * tokens; client hit-target tier via the shared .lc-btn/.lc-checkbox-row. */
.lc-station-screen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--lc-space-5);
  max-width: 60rem;
  margin-inline: auto;
}

.lc-station-subtitle {
  font-size: var(--lc-text-lg);
  font-weight: var(--lc-weight-bold);
  margin: var(--lc-space-3) 0 var(--lc-space-2);
}

.lc-station-doclist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--lc-space-3);
}

.lc-station-doclist__item {
  display: flex;
  align-items: center;
  gap: var(--lc-space-3);
  flex-wrap: wrap;
  min-width: 0;
}

.lc-station-doclist__state {
  color: var(--lc-grey-700);
}

.lc-station-declaration {
  margin-bottom: var(--lc-space-4);
}

.lc-station-canvas {
  display: block;
  width: 100%;
  height: 14rem;
  background: var(--lc-white);
  border: var(--lc-border-width) dashed var(--lc-grey-500);
  border-radius: var(--lc-radius-md);
  touch-action: none;
}

.lc-station-actions {
  display: flex;
  gap: var(--lc-space-3);
  flex-wrap: wrap;
  align-items: center;
}